From 42ac955052d5d5353752e27ad6fceedf0935d746 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 00:22:39 +0200
Subject: [PATCH 01/63] ADD - expand phone application platform

Add the Companies app, resilient call handling, custom app registry, vendor compatibility, storage policies, frontend bridge, tests, documentation, config, locale, and SQL migrations.
---
 README.md                                     |   10 +
 frontend/src/App.vue                          |  182 +-
 .../src/assets/img/app-icons/companies.svg    |   29 +
 frontend/src/assets/main.css                  |   10 +
 frontend/src/components/AppIcon.vue           |   33 +-
 frontend/src/components/CustomAppFrame.vue    |  421 +++
 .../components/NotificationPhonePreview.vue   |    2 +
 frontend/src/components/PayphoneOverlay.vue   |    2 +
 frontend/src/components/PhoneLockScreen.vue   |   22 +-
 frontend/src/components/PhoneMediaCapture.vue |    2 +
 .../src/components/PhoneNotifications.vue     |   13 +
 frontend/src/components/RadioHud.vue          |    2 +
 frontend/src/config/apps.test.ts              |    7 +
 frontend/src/config/apps.ts                   |   65 +-
 frontend/src/stores/app-catalog.test.ts       |  135 +
 frontend/src/stores/app-catalog.ts            |  314 ++
 frontend/src/stores/app-store.test.ts         |   78 +-
 frontend/src/stores/app-store.ts              |  185 +-
 frontend/src/stores/companies.test.ts         |  327 ++
 frontend/src/stores/companies.ts              |  539 +++
 frontend/src/stores/notifications.test.ts     |   15 +-
 frontend/src/stores/notifications.ts          |   51 +-
 frontend/src/stores/phone.ts                  |  329 +-
 frontend/src/types/apps.ts                    |  112 +-
 frontend/src/types/companies.ts               |  271 ++
 frontend/src/types/phone.ts                   |    7 +
 frontend/src/utils/customAppBridge.test.ts    |  268 ++
 frontend/src/utils/customAppBridge.ts         |  512 +++
 frontend/src/utils/customAppLifecycle.test.ts |  229 ++
 frontend/src/utils/customAppLifecycle.ts      |  183 +
 frontend/src/utils/homeLayout.test.ts         |   26 +-
 frontend/src/utils/homeLayout.ts              |   30 +-
 frontend/src/utils/nui.ts                     |    2 +-
 frontend/src/utils/preferences.test.ts        |   22 +
 frontend/src/utils/preferences.ts             |   50 +-
 frontend/src/utils/windowMessages.test.ts     |   19 +
 frontend/src/utils/windowMessages.ts          |    6 +
 frontend/src/views/PhoneAppWindow.vue         |   13 +-
 frontend/src/views/SpringboardView.vue        |   29 +-
 frontend/src/views/apps/AppStoreApp.vue       |   26 +-
 frontend/src/views/apps/BillingApp.vue        |    2 +
 frontend/src/views/apps/CameraApp.vue         |    2 +
 frontend/src/views/apps/CompaniesApp.vue      | 3331 +++++++++++++++++
 frontend/src/views/apps/CrewLinkApp.vue       |    2 +
 frontend/src/views/apps/GalleryApp.vue        |    2 +
 frontend/src/views/apps/GarageApp.vue         |    2 +
 frontend/src/views/apps/MailApp.vue           |    2 +
 frontend/src/views/apps/MessagesApp.vue       |   86 +-
 frontend/src/views/apps/PhoneApp.vue          |   36 +-
 frontend/src/views/apps/RadioApp.vue          |    2 +
 frontend/src/views/apps/SettingsApp.vue       |   18 +-
 frontend/src/views/apps/SkyRideApp.vue        |    2 +
 frontend/testserver/index.cjs                 |  960 ++++-
 sky_phone/config/companies.lua                |  248 ++
 sky_phone/config/config.lua                   |   17 +
 sky_phone/config/locales/en.lua               |  315 +-
 sky_phone/custom_apps/_sdk/default-icon.svg   |   13 +
 sky_phone/custom_apps/_sdk/sky-phone-app.d.ts |   74 +
 sky_phone/custom_apps/_sdk/sky-phone-app.js   |  211 ++
 sky_phone/fxmanifest.lua                      |   21 +
 sky_phone/source/client/custom_app_compat.lua |  581 +++
 sky_phone/source/client/custom_apps.lua       | 1396 +++++++
 sky_phone/source/client/main.lua              |   39 +
 sky_phone/source/server/calls.lua             |  720 +++-
 sky_phone/source/server/companies.lua         | 3028 +++++++++++++++
 sky_phone/source/server/custom_app_compat.lua |  138 +
 .../source/server/custom_app_storage.lua      |  271 ++
 sky_phone/source/server/custom_apps.lua       |  385 ++
 sky_phone/source/server/db_migrate.lua        |  286 ++
 sky_phone/source/server/phone.lua             |   25 +
 sky_phone/source/server/sim.lua               |   24 +
 sky_phone/source/shared/custom_app_compat.lua |  229 ++
 sky_phone/source/shared/custom_apps.lua       |  451 +++
 sky_phone/sql/install.sql                     |  178 +
 tests/custom_app_compat.lua                   |   80 +
 tests/custom_app_compat_client.lua            |  140 +
 tests/custom_app_compat_server.lua            |   68 +
 77 files changed, 17630 insertions(+), 333 deletions(-)
 create mode 100644 frontend/src/assets/img/app-icons/companies.svg
 create mode 100644 frontend/src/components/CustomAppFrame.vue
 create mode 100644 frontend/src/stores/app-catalog.test.ts
 create mode 100644 frontend/src/stores/app-catalog.ts
 create mode 100644 frontend/src/stores/companies.test.ts
 create mode 100644 frontend/src/stores/companies.ts
 create mode 100644 frontend/src/types/companies.ts
 create mode 100644 frontend/src/utils/customAppBridge.test.ts
 create mode 100644 frontend/src/utils/customAppBridge.ts
 create mode 100644 frontend/src/utils/customAppLifecycle.test.ts
 create mode 100644 frontend/src/utils/customAppLifecycle.ts
 create mode 100644 frontend/src/utils/windowMessages.test.ts
 create mode 100644 frontend/src/utils/windowMessages.ts
 create mode 100644 frontend/src/views/apps/CompaniesApp.vue
 create mode 100644 sky_phone/config/companies.lua
 create mode 100644 sky_phone/custom_apps/_sdk/default-icon.svg
 create mode 100644 sky_phone/custom_apps/_sdk/sky-phone-app.d.ts
 create mode 100644 sky_phone/custom_apps/_sdk/sky-phone-app.js
 create mode 100644 sky_phone/source/client/custom_app_compat.lua
 create mode 100644 sky_phone/source/client/custom_apps.lua
 create mode 100644 sky_phone/source/server/companies.lua
 create mode 100644 sky_phone/source/server/custom_app_compat.lua
 create mode 100644 sky_phone/source/server/custom_app_storage.lua
 create mode 100644 sky_phone/source/server/custom_apps.lua
 create mode 100644 sky_phone/source/shared/custom_app_compat.lua
 create mode 100644 sky_phone/source/shared/custom_apps.lua
 create mode 100644 tests/custom_app_compat.lua
 create mode 100644 tests/custom_app_compat_client.lua
 create mode 100644 tests/custom_app_compat_server.lua

diff --git a/README.md b/README.md
index 90802cd..9786b89 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,15 @@
 # sky_phone
 
+## Custom Apps
+
+`sky_phone` erkennt Registrierungen gestarteter Fremd-App-Ressourcen über integrierte
+Hersteller-Aliase und übernimmt unterstützte Apps automatisch in Springboard und App Store. In
+App-Ressourcen müssen dafür keine Sky-Vorlagen abgelegt werden. Unterstützt werden die
+dokumentierten Basisverträge von LB Phone, 17Movement, High Phone, Quasar Smartphone V3 und
+YSeries; die Aliase `lb-phone`, `17mov_Phone`, `high-phone`, `qs-smartphone` und `yseries` werden
+direkt von `sky_phone` bereitgestellt. Einrichtung und ehrliche Kompatibilitätsgrenzen stehen in der
+[deutschen Custom-App-Anleitung](docs/custom-apps.md).
+
 ## FlipTok verification
 
 FlipTok verification is server-authoritative and limited to the framework groups configured in
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b7c966a..dee09c2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -29,6 +29,7 @@ import { useGamesStore } from '@/features/games/store'
 import { useCallsStore } from '@/stores/calls'
 import { useBankingStore } from '@/stores/banking'
 import { useBillingStore } from '@/stores/billing'
+import { useCompaniesStore } from '@/stores/companies'
 import { useAccountStore } from '@/stores/account'
 import { useMailStore } from '@/stores/mail'
 import { useMessagesStore } from '@/stores/messages'
@@ -39,6 +40,7 @@ import { usePicstagramStore } from '@/stores/picstagram'
 import { useFeatherStore } from '@/stores/feather'
 import { useMediaStore } from '@/stores/media'
 import { useMarketplaceStore } from '@/stores/marketplace'
+import { useAppCatalogStore } from '@/stores/app-catalog'
 import { useAppStoreStore } from '@/stores/app-store'
 import { useWidgetsStore } from '@/stores/widgets'
 import { isPhoneAppId } from '@/config/apps'
@@ -46,16 +48,22 @@ import { useNotesStore } from '@/stores/notes'
 import { useWeatherStore } from '@/stores/weather'
 import {
   useNotificationsStore,
+  type PhoneNotification,
   type PhoneNotificationInput,
 } from '@/stores/notifications'
 import { usePhoneStore, type PhoneOpenPayload } from '@/stores/phone'
 import type { PhoneNotificationDevicePayload } from '@/types/device'
 import type { MailCounts } from '@/types/mail'
 import type { MarketplaceCounts } from '@/types/marketplace'
+import type {
+  CompanyChangedPayload,
+  CompanyUnreadCounts,
+} from '@/types/companies'
 import type { PhoneCall } from '@/types/phone'
 import { nuiCall } from '@/utils/nui'
 import { formatTimer } from '@/utils/clock'
 import { parsePhonePreferences } from '@/utils/preferences'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 import SpringboardView from '@/views/SpringboardView.vue'
 
 type AppMessage = {
@@ -64,6 +72,7 @@ type AppMessage = {
     | CalendarReminderData
     | MailEventData
     | MarketplaceEventData
+    | CompaniesEventData
     | MessagesEventData
     | DarkChatEventData
     | FlareEventData
@@ -76,6 +85,18 @@ type AppMessage = {
     | PhoneCall
     | PhoneNotificationInput
     | PhoneOpenPayload
+    | CustomAppCatalogEventData
+    | CustomAppEventData
+}
+
+type CustomAppCatalogEventData = {
+  apps?: unknown
+}
+
+type CustomAppEventData = {
+  appId?: unknown
+  data?: unknown
+  payload?: unknown
 }
 
 type SimPickerPayload = {
@@ -104,6 +125,18 @@ type MessagesEventData = {
   title?: string
 }
 
+type CompaniesEventData = {
+  area?: CompanyChangedPayload['area']
+  companyId?: string
+  counts?: CompanyUnreadCounts
+  device?: PhoneNotificationDevicePayload
+  kind?: 'assigned' | 'newMessage' | 'newRequest' | 'requestUpdated'
+  requestId?: string
+  subtitle?: string
+  text?: string
+  title?: string
+}
+
 type DarkChatEventData = {
   conversationId?: string
   device?: PhoneNotificationDevicePayload
@@ -209,6 +242,7 @@ const games = useGamesStore()
 const calls = useCallsStore()
 const banking = useBankingStore()
 const billing = useBillingStore()
+const companies = useCompaniesStore()
 const mail = useMailStore()
 const messages = useMessagesStore()
 const darkchat = useDarkChatStore()
@@ -218,6 +252,7 @@ const picstagram = usePicstagramStore()
 const feather = useFeatherStore()
 const media = useMediaStore()
 const marketplace = useMarketplaceStore()
+const appCatalog = useAppCatalogStore()
 const appStore = useAppStoreStore()
 const widgets = useWidgetsStore()
 const notes = useNotesStore()
@@ -267,6 +302,8 @@ const phoneFrameImage = computed(
   () => PHONE_FRAME_IMAGES[phone.preferences.settings.frame],
 )
 let clockTicker: ReturnType<typeof setInterval> | undefined
+let companiesChangeTimer: number | undefined
+let pendingCompaniesChange: CompanyChangedPayload | null = null
 let unlockTimer: number | undefined
 let passcodeLockTimer: number | undefined
 let unlockedServicesFrame: number | undefined
@@ -279,7 +316,16 @@ function getViewportScale(): number {
 }
 
 function hydratePhone(payload: PhoneOpenPayload): void {
+  if (payload.device?.imei) {
+    companies.bindDeviceScope(
+      payload.device.imei,
+      payload.device.sim?.id ?? null,
+    )
+  }
   phone.open(payload)
+  phone.ensureAppNotificationPreferences(
+    appCatalog.externalApps.map((app) => app.id),
+  )
   if (payload.device?.imei) {
     notifications.hydrate(
       payload.device.data.notifications?.payload,
@@ -296,6 +342,31 @@ function hydratePhone(payload: PhoneOpenPayload): void {
   widgets.hydrate(payload.device?.data.widgets?.payload)
 }
 
+function queueCompaniesChange(change: CompanyChangedPayload): void {
+  if (!pendingCompaniesChange) {
+    pendingCompaniesChange = { ...change }
+  } else {
+    pendingCompaniesChange = {
+      area: pendingCompaniesChange.area === change.area ? change.area : 'all',
+      companyId:
+        pendingCompaniesChange.companyId === change.companyId
+          ? change.companyId
+          : undefined,
+      requestId:
+        pendingCompaniesChange.requestId === change.requestId
+          ? change.requestId
+          : undefined,
+    }
+  }
+  if (companiesChangeTimer !== undefined) return
+  companiesChangeTimer = window.setTimeout(() => {
+    companiesChangeTimer = undefined
+    const queuedChange = pendingCompaniesChange
+    pendingCompaniesChange = null
+    if (queuedChange) void companies.applyChanged(queuedChange)
+  }, 2000)
+}
+
 function loadUnlockedPhoneData(): void {
   if (unlockedServicesLoaded.value) return
   unlockedServicesLoaded.value = true
@@ -315,6 +386,7 @@ function loadUnlockedPhoneData(): void {
     void calls.bootstrap()
     void messages.loadConversations()
     void billing.loadOverview()
+    void companies.refreshUnreadCounts()
     if (account.email) void darkchat.bootstrap()
   })
 }
@@ -345,7 +417,35 @@ async function hydrateDevelopmentPhone(): Promise<void> {
 }
 
 function onMessage(event: MessageEvent<AppMessage>): void {
-  if (event.data?.type === 'app:open') {
+  if (!isTrustedRootMessageSource(event.source, window)) return
+
+  if (event.data?.type === 'custom-apps:catalog') {
+    appCatalog.replaceCatalog(event.data.data)
+    const activeAppId = route.params.appId
+    if (typeof activeAppId === 'string' && !isPhoneAppId(activeAppId)) {
+      void router.push('/')
+    }
+  } else if (event.data?.type === 'custom-app:message') {
+    const data = event.data.data as CustomAppEventData | undefined
+    if (typeof data?.appId === 'string') {
+      appCatalog.queueHostMessage(data.appId, data.payload)
+    } else {
+      console.error('[Custom apps] Ignored a message without a valid app id.')
+    }
+  } else if (event.data?.type === 'custom-app:open') {
+    const data = event.data.data as CustomAppEventData | undefined
+    if (
+      typeof data?.appId === 'string' &&
+      appCatalog.requestOpen(data.appId, data.data)
+    ) {
+      void router.push(`/apps/${data.appId}`)
+    }
+  } else if (event.data?.type === 'custom-app:close') {
+    const data = event.data.data as CustomAppEventData | undefined
+    if (typeof data?.appId === 'string' && route.params.appId === data.appId) {
+      void router.push('/')
+    }
+  } else if (event.data?.type === 'app:open') {
     hydratePhone(event.data.data as PhoneOpenPayload)
     void nuiCall('ui:opened')
   } else if (event.data?.type === 'device:updated') {
@@ -361,10 +461,7 @@ function onMessage(event: MessageEvent<AppMessage>): void {
     const data = event.data.data as NotificationEventData
     const { device, ...input } = data
     const notification: PhoneNotificationInput = input
-    if (
-      device &&
-      (!phone.isOpen || device.imei !== phone.device?.imei)
-    ) {
+    if (device && (!phone.isOpen || device.imei !== phone.device?.imei)) {
       notification.device = {
         imei: device.imei,
         name: device.name,
@@ -406,6 +503,47 @@ function onMessage(event: MessageEvent<AppMessage>): void {
   } else if (event.data?.type === 'marketplace:changed' && event.data.data) {
     const data = event.data.data as MarketplaceEventData
     if (data.counts) marketplace.setCounts(data.counts)
+  } else if (event.data?.type === 'companies:changed') {
+    const data = event.data.data as CompaniesEventData | undefined
+    if (data?.counts) companies.applyUnreadCounts(data.counts)
+    if (data?.area) {
+      queueCompaniesChange({
+        area: data.area,
+        companyId: data.companyId,
+        requestId: data.requestId,
+      })
+    } else if (!data?.counts) queueCompaniesChange({ area: 'all' })
+  } else if (event.data?.type === 'companies:notification' && event.data.data) {
+    const data = event.data.data as CompaniesEventData
+    if (data.counts) companies.applyUnreadCounts(data.counts)
+
+    const notification: PhoneNotificationInput = {
+      appId: 'companies',
+      ...(data.requestId && data.area
+        ? {
+            route: `/apps/companies?requestId=${encodeURIComponent(data.requestId)}&area=${encodeURIComponent(data.area)}`,
+          }
+        : {}),
+      persistent: !phone.isOpen && Boolean(data.requestId && data.area),
+      subtitle: data.subtitle,
+      text:
+        data.text ??
+        phone.t(
+          `Apps.companies.notifications.${data.kind ?? 'requestUpdated'}`,
+        ),
+      title: data.title ?? phone.t('Apps.companies.name'),
+    }
+    if (
+      data.device &&
+      (!phone.isOpen || data.device.imei !== phone.device?.imei)
+    ) {
+      notification.device = {
+        imei: data.device.imei,
+        name: data.device.name,
+        preferences: parsePhonePreferences(data.device.settings ?? null),
+      }
+    }
+    notifications.show(notification)
   } else if (
     event.data?.type === 'fliptok:verification-changed' &&
     event.data.data
@@ -667,10 +805,7 @@ function onMessage(event: MessageEvent<AppMessage>): void {
       }
     }
     notifications.show(notification)
-  } else if (
-    event.data?.type === 'crewlink:notification' &&
-    event.data.data
-  ) {
+  } else if (event.data?.type === 'crewlink:notification' && event.data.data) {
     const data = event.data.data as CrewLinkNotificationData
     const notification: PhoneNotificationInput = {
       appId: 'crewlink',
@@ -756,6 +891,28 @@ function unlockPhone(): void {
   finishUnlock()
 }
 
+function openLockScreenNotification(notification: PhoneNotification): void {
+  if (!notification.route) return
+  pendingUnlockRoute.value = notification.route
+  notifications.dismissFromLockScreen(notification.id)
+  unlockPhone()
+}
+
+async function openNotificationPreview(
+  notification: PhoneNotification,
+): Promise<void> {
+  if (!notification.route) return
+  const imei = notification.device?.imei ?? phone.device?.imei
+  if (!imei) return
+  pendingUnlockRoute.value = notification.route
+  const response = await nuiCall('device:notification-open', { imei })
+  if (!response.success) {
+    pendingUnlockRoute.value = null
+    return
+  }
+  notifications.dismissFromLockScreen(notification.id, imei)
+}
+
 function cancelPasscode(): void {
   if (passcodeBusy.value) return
   passcodeVisible.value = false
@@ -907,6 +1064,7 @@ watch(
   (isOpen) => {
     if (unlockTimer !== undefined) window.clearTimeout(unlockTimer)
     if (!isOpen) {
+      appStore.cancelPendingInstalls()
       if (unlockedServicesFrame !== undefined) {
         window.cancelAnimationFrame(unlockedServicesFrame)
         unlockedServicesFrame = undefined
@@ -961,6 +1119,9 @@ onBeforeUnmount(() => {
   }
   weather.stop()
   if (clockTicker) clearInterval(clockTicker)
+  if (companiesChangeTimer !== undefined) {
+    window.clearTimeout(companiesChangeTimer)
+  }
   if (unlockTimer !== undefined) window.clearTimeout(unlockTimer)
   if (passcodeLockTimer !== undefined) window.clearInterval(passcodeLockTimer)
   window.removeEventListener('message', onMessage)
@@ -1007,6 +1168,7 @@ onBeforeUnmount(() => {
               100)
           "
           @close="notifications.dismiss(notification.id)"
+          @open="openNotificationPreview"
         />
         <div
           v-if="phone.isOpen || notifications.current"
@@ -1070,6 +1232,7 @@ onBeforeUnmount(() => {
                     @camera="unlockCamera"
                     @clear-notifications="notifications.clearLockScreen"
                     @dismiss-notification="notifications.dismissFromLockScreen"
+                    @open-notification="openLockScreenNotification"
                     @unlock="unlockPhone"
                   />
                 </Transition>
@@ -1096,6 +1259,7 @@ onBeforeUnmount(() => {
                 <PhoneNotifications
                   :notification="phone.isOpen ? null : notifications.current"
                   @close="notifications.dismissCurrent()"
+                  @open="openNotificationPreview"
                 />
                 <div class="phone-display-dimmer" aria-hidden="true"></div>
               </k-app>
diff --git a/frontend/src/assets/img/app-icons/companies.svg b/frontend/src/assets/img/app-icons/companies.svg
new file mode 100644
index 0000000..b52f7ce
--- /dev/null
+++ b/frontend/src/assets/img/app-icons/companies.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" role="img">
+  <defs>
+    <linearGradient id="companies-bg" x1="18" y1="12" x2="104" y2="110" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#38BDF8"/>
+      <stop offset="1" stop-color="#2563EB"/>
+    </linearGradient>
+    <linearGradient id="companies-glass" x1="42" y1="31" x2="86" y2="101" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFFFFF" stop-opacity=".96"/>
+      <stop offset="1" stop-color="#DBEAFE" stop-opacity=".82"/>
+    </linearGradient>
+  </defs>
+  <rect width="120" height="120" rx="27" fill="url(#companies-bg)"/>
+  <path d="M26 96V45c0-5 4-9 9-9h26c5 0 9 4 9 9v51H26Z" fill="url(#companies-glass)"/>
+  <path d="M60 96V28c0-5 4-9 9-9h18c5 0 9 4 9 9v68H60Z" fill="#EFF6FF" fill-opacity=".9"/>
+  <g fill="#3B82F6" fill-opacity=".82">
+    <rect x="36" y="48" width="9" height="9" rx="2"/>
+    <rect x="51" y="48" width="9" height="9" rx="2"/>
+    <rect x="36" y="64" width="9" height="9" rx="2"/>
+    <rect x="51" y="64" width="9" height="9" rx="2"/>
+    <rect x="70" y="33" width="8" height="8" rx="2"/>
+    <rect x="83" y="33" width="8" height="8" rx="2"/>
+    <rect x="70" y="48" width="8" height="8" rx="2"/>
+    <rect x="83" y="48" width="8" height="8" rx="2"/>
+    <rect x="70" y="63" width="8" height="8" rx="2"/>
+    <rect x="83" y="63" width="8" height="8" rx="2"/>
+  </g>
+  <path d="M18 96h84" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>
+  <circle cx="96" cy="25" r="10" fill="#22C55E" stroke="#FFFFFF" stroke-width="4"/>
+</svg>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 6006bb2..fb69afa 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -679,6 +679,16 @@ button {
   background-color: rgb(28 28 32 / 72%);
   text-shadow: 0 1px 3px #0009;
 }
+.phone-notification.is-actionable {
+  cursor: pointer;
+}
+.lock-screen__notification.is-actionable {
+  cursor: pointer;
+}
+.lock-screen__notification.is-actionable:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
 .lock-screen__notification-icon {
   width: 42px;
   height: 42px;
diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index c56d222..17fb331 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { kBadge } from 'konsta/vue'
 import { Minus } from 'lucide-vue-next'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { NON_REMOVABLE_PHONE_APP_IDS } from '@/config/apps'
+import { getPhoneAppLabel, isPhoneAppRemovable } from '@/config/apps'
 import { useMailStore } from '@/stores/mail'
 import { useBillingStore } from '@/stores/billing'
+import { useCompaniesStore } from '@/stores/companies'
 import { useMarketplaceStore } from '@/stores/marketplace'
 import { useDarkChatStore } from '@/stores/darkchat'
 import { usePhoneStore } from '@/stores/phone'
@@ -37,6 +38,7 @@ const emit = defineEmits<{
 const phone = usePhoneStore()
 const mail = useMailStore()
 const billing = useBillingStore()
+const companies = useCompaniesStore()
 const marketplace = useMarketplaceStore()
 const darkchat = useDarkChatStore()
 const router = useRouter()
@@ -54,15 +56,29 @@ const dragStyle = computed(() =>
       }
     : undefined,
 )
+const iconStyle = computed(() =>
+  props.app.kind === 'external' && props.app.iconBackground
+    ? { backgroundColor: props.app.iconBackground }
+    : undefined,
+)
 const suppressClick = ref(false)
 let holdTimer: number | undefined
 let calendarTimer: number | undefined
 let pointerStart = { x: 0, y: 0 }
+
+watch(
+  () => props.app.iconImage,
+  () => {
+    iconFailed.value = false
+  },
+)
+
 const unreadCount = computed(() => {
   if (props.app.id === 'mail') return mail.counts.unread
   if (props.app.id === 'citymarkt') return marketplace.counts.unread
   if (props.app.id === 'darkchat') return darkchat.unreadCount
   if (props.app.id === 'billing') return billing.overview?.unreadCount ?? 0
+  if (props.app.id === 'companies') return companies.unreadCount
   return 0
 })
 const notificationBadgeColors = {
@@ -216,7 +232,7 @@ onBeforeUnmount(() => {
       class="app-icon-button"
       :class="{ 'app-icon-button--compact': compact }"
       type="button"
-      :aria-label="phone.t(app.labelKey)"
+      :aria-label="getPhoneAppLabel(app, phone.t)"
       :aria-disabled="!app.route"
       @click="launch"
       @contextmenu.prevent
@@ -233,6 +249,7 @@ onBeforeUnmount(() => {
             app.iconClass,
             { 'app-icon--image': !iconFailed && app.id !== 'calendar' },
           ]"
+          :style="iconStyle"
         >
           <span v-if="app.id === 'calendar'" class="app-icon-calendar">
             <strong>{{ calendarWeekday }}</strong>
@@ -262,14 +279,18 @@ onBeforeUnmount(() => {
         </k-badge>
       </span>
       <span v-if="showLabel" class="app-icon-label">{{
-        phone.t(app.labelKey)
+        getPhoneAppLabel(app, phone.t)
       }}</span>
     </button>
     <button
-      v-if="editMode && !NON_REMOVABLE_PHONE_APP_IDS.has(app.id)"
+      v-if="editMode && isPhoneAppRemovable(app)"
       class="app-icon-remove"
       type="button"
-      :aria-label="phone.t('Home.removeApp', { app: phone.t(app.labelKey) })"
+      :aria-label="
+        phone.t('Home.removeApp', {
+          app: getPhoneAppLabel(app, phone.t),
+        })
+      "
       @click.stop="emit('remove')"
       @pointerdown.stop
     >
diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
new file mode 100644
index 0000000..1b11e4f
--- /dev/null
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -0,0 +1,421 @@
+<script setup lang="ts">
+import { kBlock, kButton, kPage, kPreloader } from 'konsta/vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { getPhoneApp, isExternalPhoneApp } from '@/config/apps'
+import { useAppCatalogStore } from '@/stores/app-catalog'
+import { useNotificationsStore } from '@/stores/notifications'
+import { usePhoneStore } from '@/stores/phone'
+import type {
+  CustomAppOpenRequest,
+  ExternalPhoneAppDefinition,
+  LaunchablePhoneAppId,
+  SkyPhoneAppBridgeRequest,
+  SkyPhoneAppBridgeResponse,
+  SkyPhoneAppContextV1,
+} from '@/types/apps'
+import {
+  createCustomAppBridgeRequestHandler,
+  getSkyPhoneAppCapabilities,
+  shouldReportCustomAppReady,
+} from '@/utils/customAppBridge'
+import {
+  createCustomAppLifecycleReporter,
+  customAppOrientationCoordinator,
+  customAppLifecycleScheduler,
+  getCustomAppSafeArea,
+} from '@/utils/customAppLifecycle'
+import { nuiCall } from '@/utils/nui'
+
+const props = defineProps<{
+  app: ExternalPhoneAppDefinition
+}>()
+
+const PROTOCOL_VERSION = 1
+
+const catalog = useAppCatalogStore()
+const notifications = useNotificationsStore()
+const phone = usePhoneStore()
+const router = useRouter()
+const frame = ref<HTMLIFrameElement | null>(null)
+const frameLoaded = ref(false)
+const frameUnavailable = ref(false)
+const skyBridgeReady = ref(false)
+let loadTimeout: ReturnType<typeof setTimeout> | undefined
+const lifecycleAppId = props.app.id
+const initialOpenRequest: CustomAppOpenRequest | undefined =
+  catalog.openRequests[lifecycleAppId]
+const orientation = customAppOrientationCoordinator.createSession((landscape) =>
+  phone.setCameraLandscape(landscape),
+)
+
+const lifecycle = createCustomAppLifecycleReporter({
+  onFailure(event, error) {
+    console.error(
+      `[Custom apps] ${event} lifecycle failed for ${lifecycleAppId}: ${error}`,
+    )
+  },
+  scheduler: customAppLifecycleScheduler,
+  send: (event, data) =>
+    nuiCall('custom-app:lifecycle', {
+      appId: lifecycleAppId,
+      ...(data === undefined ? {} : { data }),
+      event,
+    }),
+})
+
+const bridgeRequests = createCustomAppBridgeRequestHandler({
+  createNotification(notification) {
+    return notifications.show({
+      ...notification,
+      appId: notification.appId as LaunchablePhoneAppId,
+    })
+  },
+  getSourceApp: () => props.app,
+  prepareExternalOpen: (appId, data) => catalog.requestOpen(appId, data),
+  resolveTarget(appId) {
+    const target = getPhoneApp(appId)
+    return target
+      ? {
+          external: isExternalPhoneApp(target),
+          id: target.id,
+          route: target.route,
+        }
+      : null
+  },
+  storageCall: (endpoint, payload) => nuiCall(endpoint, payload),
+})
+
+const frameUrl = computed(() => {
+  const url = new URL(props.app.ui)
+  url.searchParams.set('skyPhoneAppId', props.app.id)
+  return url.href
+})
+const frameOrigin = computed(() => new URL(frameUrl.value).origin)
+const postMessageOrigin = computed(() =>
+  props.app.bundled ? '*' : frameOrigin.value,
+)
+const sandbox = computed(() =>
+  props.app.bundled
+    ? 'allow-downloads allow-forms allow-modals allow-scripts'
+    : 'allow-downloads allow-forms allow-modals allow-same-origin allow-scripts',
+)
+const frameReady = computed(
+  () =>
+    frameLoaded.value &&
+    (props.app.bridgeMode === 'legacy' || skyBridgeReady.value),
+)
+const context = computed<SkyPhoneAppContextV1>(() => ({
+  appId: props.app.id,
+  capabilities: getSkyPhoneAppCapabilities(props.app.capabilities),
+  colorScheme: phone.isDarkMode ? 'dark' : 'light',
+  language: phone.lang,
+  locale: {
+    description: props.app.description,
+    name: props.app.name,
+  },
+  phoneScale: phone.preferences.settings.phoneScale / 100,
+  protocolVersion: PROTOCOL_VERSION,
+  safeArea: getCustomAppSafeArea(props.app.orientation),
+}))
+
+function postToFrame(payload: unknown): boolean {
+  const target = frame.value?.contentWindow
+  if (!target) return false
+
+  try {
+    target.postMessage(payload, postMessageOrigin.value)
+    return true
+  } catch (error) {
+    console.error(`[Custom apps] Could not message ${props.app.id}.`, error)
+    return false
+  }
+}
+
+function queueReadyLifecycle(): void {
+  void lifecycle.report('open', initialOpenRequest?.data)
+  void lifecycle.report('ready')
+}
+
+function sendContext(): void {
+  if (!skyBridgeReady.value) return
+  postToFrame({
+    appId: props.app.id,
+    context: context.value,
+    protocolVersion: PROTOCOL_VERSION,
+    type: 'sky-phone-app:context',
+  })
+}
+
+function flushOpenRequest(): void {
+  const request = catalog.openRequests[props.app.id]
+  if (!request || !frameLoaded.value) return
+  if (props.app.bridgeMode === 'sky' && !skyBridgeReady.value) return
+
+  if (
+    props.app.bridgeMode === 'legacy' ||
+    postToFrame({
+      appId: props.app.id,
+      data: request.data,
+      protocolVersion: PROTOCOL_VERSION,
+      type: 'sky-phone-app:open',
+    })
+  ) {
+    catalog.consumeOpenRequest(props.app.id, request.sequence)
+  }
+}
+
+function flushHostMessages(): void {
+  if (!frameLoaded.value) return
+  if (props.app.bridgeMode === 'sky' && !skyBridgeReady.value) return
+
+  let lastDeliveredSequence = 0
+  for (const message of catalog.hostMessages[props.app.id] ?? []) {
+    const delivered = postToFrame(
+      props.app.bridgeMode === 'sky'
+        ? {
+            appId: props.app.id,
+            payload: message.payload,
+            protocolVersion: PROTOCOL_VERSION,
+            type: 'sky-phone-app:message',
+          }
+        : message.payload,
+    )
+    if (!delivered) break
+    lastDeliveredSequence = message.sequence
+  }
+  if (lastDeliveredSequence) {
+    catalog.consumeHostMessages(props.app.id, lastDeliveredSequence)
+  }
+}
+
+function sendResponse(response: SkyPhoneAppBridgeResponse): void {
+  postToFrame({
+    appId: props.app.id,
+    ...response,
+    protocolVersion: PROTOCOL_VERSION,
+    type: 'sky-phone-app:response',
+  })
+}
+
+async function handleBridgeRequest(
+  request: SkyPhoneAppBridgeRequest,
+): Promise<void> {
+  const result = await bridgeRequests.handle(request)
+  if (!result) return
+
+  sendResponse(result.response)
+  if (result.effect?.type === 'close') {
+    void router.push('/')
+  } else if (result.effect?.type === 'open') {
+    void router.push(result.effect.route)
+  }
+}
+
+function isTrustedFrameMessage(event: MessageEvent): boolean {
+  if (event.source !== frame.value?.contentWindow) return false
+  if (props.app.bundled) {
+    return event.origin === 'null' || event.origin === frameOrigin.value
+  }
+  return event.origin === frameOrigin.value
+}
+
+function onFrameMessage(event: MessageEvent): void {
+  if (!isTrustedFrameMessage(event)) return
+  if (
+    !event.data ||
+    typeof event.data !== 'object' ||
+    Array.isArray(event.data)
+  ) {
+    return
+  }
+
+  const message = event.data as Record<string, unknown>
+  if (
+    message.appId !== props.app.id ||
+    message.protocolVersion !== PROTOCOL_VERSION
+  ) {
+    return
+  }
+
+  if (message.type === 'sky-phone-app:ready') {
+    if (!skyBridgeReady.value) {
+      if (loadTimeout !== undefined) clearTimeout(loadTimeout)
+      loadTimeout = undefined
+      skyBridgeReady.value = true
+      frameUnavailable.value = false
+      sendContext()
+      flushOpenRequest()
+      flushHostMessages()
+    }
+    if (shouldReportCustomAppReady(props.app.bridgeMode, 'bridge-ready')) {
+      queueReadyLifecycle()
+    }
+    return
+  }
+
+  if (message.type === 'sky-phone-app:request') {
+    void handleBridgeRequest(message as unknown as SkyPhoneAppBridgeRequest)
+  }
+}
+
+function onFrameLoad(): void {
+  if (props.app.bridgeMode === 'legacy') {
+    if (loadTimeout !== undefined) clearTimeout(loadTimeout)
+    loadTimeout = undefined
+  }
+  frameLoaded.value = true
+  if (props.app.bridgeMode === 'legacy' || skyBridgeReady.value) {
+    frameUnavailable.value = false
+  }
+  if (shouldReportCustomAppReady(props.app.bridgeMode, 'frame-load')) {
+    queueReadyLifecycle()
+  }
+  flushOpenRequest()
+  flushHostMessages()
+}
+
+function closeApp(): void {
+  void router.push('/')
+}
+
+onBeforeMount(() => {
+  window.addEventListener('message', onFrameMessage)
+  orientation.apply(props.app.orientation)
+  void lifecycle.report('open', initialOpenRequest?.data)
+  if (props.app.bridgeMode === 'legacy' && initialOpenRequest) {
+    catalog.consumeOpenRequest(props.app.id, initialOpenRequest.sequence)
+  }
+  loadTimeout = setTimeout(() => {
+    loadTimeout = undefined
+    frameUnavailable.value = true
+    console.error(
+      `[Custom apps] Frame readiness timed out for ${props.app.id}.`,
+    )
+  }, props.app.readyTimeoutMs)
+})
+
+onBeforeUnmount(() => {
+  if (loadTimeout !== undefined) clearTimeout(loadTimeout)
+  window.removeEventListener('message', onFrameMessage)
+  orientation.release()
+  void lifecycle.report('close')
+})
+
+watch(context, sendContext, { deep: true })
+watch(
+  () => props.app.orientation,
+  (nextOrientation) => orientation.apply(nextOrientation),
+)
+watch(() => catalog.hostMessages[props.app.id], flushHostMessages, {
+  deep: true,
+})
+watch(() => catalog.openRequests[props.app.id], flushOpenRequest, {
+  deep: true,
+})
+</script>
+
+<template>
+  <k-page
+    component="main"
+    class="custom-app-page"
+    :class="{
+      'custom-app-page--landscape': app.orientation === 'landscape',
+    }"
+  >
+    <iframe
+      ref="frame"
+      v-show="frameReady && !frameUnavailable"
+      class="custom-app-frame"
+      :class="{
+        'custom-app-frame--fix-blur': app.compatibility.fixBlur === true,
+      }"
+      :name="app.ownerResource"
+      :sandbox="sandbox"
+      :src="frameUrl"
+      :title="app.name"
+      referrerpolicy="no-referrer"
+      @load="onFrameLoad"
+    />
+
+    <div
+      v-if="!frameReady && !frameUnavailable"
+      class="custom-app-state"
+      role="status"
+    >
+      <k-preloader />
+      <k-block>{{ phone.t('Apps.customApps.loading') }}</k-block>
+    </div>
+
+    <div v-else-if="frameUnavailable" class="custom-app-state" role="alert">
+      <k-block>
+        <strong>{{ phone.t('Apps.customApps.unavailableTitle') }}</strong>
+        <p>{{ phone.t('Apps.customApps.unavailableBody') }}</p>
+      </k-block>
+      <k-button rounded @click="closeApp">
+        {{ phone.t('Apps.customApps.close') }}
+      </k-button>
+    </div>
+  </k-page>
+</template>
+
+<style scoped>
+.custom-app-page {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--phone-app-background, #000);
+}
+
+.custom-app-page--landscape {
+  top: 50%;
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  width: 100cqh;
+  height: 100cqw;
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.custom-app-frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+}
+
+.custom-app-frame--fix-blur {
+  transform: translateZ(0);
+}
+
+.custom-app-state {
+  position: absolute;
+  inset: 44px 20px 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  text-align: center;
+}
+
+.custom-app-state :deep(.k-block) {
+  margin: 0;
+}
+
+.custom-app-state strong {
+  display: block;
+  margin-bottom: 7px;
+  font-size: 17px;
+}
+
+.custom-app-state p {
+  margin: 0;
+  color: rgb(142 142 147);
+  font-size: 13px;
+  line-height: 1.35;
+}
+</style>
diff --git a/frontend/src/components/NotificationPhonePreview.vue b/frontend/src/components/NotificationPhonePreview.vue
index d5e8e1a..3d253fc 100644
--- a/frontend/src/components/NotificationPhonePreview.vue
+++ b/frontend/src/components/NotificationPhonePreview.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{
   close: []
+  open: [notification: PhoneNotification]
 }>()
 const phone = usePhoneStore()
 const device = computed(() => props.notification.device!)
@@ -69,6 +70,7 @@ const wrapperStyle = computed<CSSProperties>(() => ({ zoom: props.zoom }))
           <PhoneNotifications
             :notification="notification"
             @close="emit('close')"
+            @open="emit('open', $event)"
           />
         </k-app>
       </div>
diff --git a/frontend/src/components/PayphoneOverlay.vue b/frontend/src/components/PayphoneOverlay.vue
index 8dd459e..cf547c1 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 { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type PayphoneState =
   | 'idle'
@@ -214,6 +215,7 @@ async function close(): Promise<void> {
 }
 
 function onMessage(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data?.type === 'payphone:open' && event.data.data) {
     const payload = event.data.data as PayphoneOpenPayload
     currency.value = payload.currency
diff --git a/frontend/src/components/PhoneLockScreen.vue b/frontend/src/components/PhoneLockScreen.vue
index fe3b714..f7e7a78 100644
--- a/frontend/src/components/PhoneLockScreen.vue
+++ b/frontend/src/components/PhoneLockScreen.vue
@@ -19,6 +19,7 @@ const emit = defineEmits<{
   camera: []
   clearNotifications: []
   dismissNotification: [id: string]
+  openNotification: [notification: PhoneNotification]
   unlock: []
 }>()
 
@@ -72,9 +73,7 @@ const flashlightShortcutColors = computed(() =>
 function onPointerDown(event: PointerEvent): void {
   if (props.preview) return
   if (
-    (event.target as HTMLElement).closest(
-      'button, .lock-screen__notifications',
-    )
+    (event.target as HTMLElement).closest('button, .lock-screen__notifications')
   )
     return
   pointerStart = event.clientY
@@ -83,6 +82,10 @@ function onPointerDown(event: PointerEvent): void {
   ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
 }
 
+function openNotification(notification: PhoneNotification): void {
+  if (notification.route) emit('openNotification', notification)
+}
+
 function onPointerMove(event: PointerEvent): void {
   if (!dragging.value) return
   dragOffset.value = Math.min(0, event.clientY - pointerStart)
@@ -194,7 +197,16 @@ onBeforeUnmount(() => {
         v-for="notification in props.notifications"
         :key="notification.id"
         class="lock-screen__notification"
+        :class="{ 'is-actionable': !!notification.route }"
         :highlight="false"
+        :role="notification.route ? 'button' : undefined"
+        :tabindex="notification.route ? 0 : undefined"
+        :aria-label="
+          notification.route ? phone.t('Notifications.open') : undefined
+        "
+        @click="openNotification(notification)"
+        @keydown.enter.prevent="openNotification(notification)"
+        @keydown.space.prevent="openNotification(notification)"
       >
         <img
           v-if="getPhoneApp(notification.appId)?.iconImage"
@@ -207,7 +219,9 @@ onBeforeUnmount(() => {
             <strong>{{ notification.title }}</strong>
             <span>{{ phone.t('Notifications.now') }}</span>
           </div>
-          <small v-if="notification.subtitle">{{ notification.subtitle }}</small>
+          <small v-if="notification.subtitle">{{
+            notification.subtitle
+          }}</small>
           <p>{{ notification.text }}</p>
         </div>
         <button
diff --git a/frontend/src/components/PhoneMediaCapture.vue b/frontend/src/components/PhoneMediaCapture.vue
index cf6f48d..eeb4c80 100644
--- a/frontend/src/components/PhoneMediaCapture.vue
+++ b/frontend/src/components/PhoneMediaCapture.vue
@@ -5,6 +5,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 import type { UploadReady } from '@/types/media'
 import { createGameView, type GameView } from '@/utils/gameView'
 import { nuiCall } from '@/utils/nui'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type RecordingChunk = { blob: Blob; durationMs: number }
 type PendingVideo = { blob: Blob; fileName: string }
@@ -341,6 +342,7 @@ async function uploadReady(ready: UploadReady): Promise<void> {
 }
 
 function onMessage(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   const message = event.data as {
     data?: Record<string, unknown>
     type?: string
diff --git a/frontend/src/components/PhoneNotifications.vue b/frontend/src/components/PhoneNotifications.vue
index 4aac0d7..03298ba 100644
--- a/frontend/src/components/PhoneNotifications.vue
+++ b/frontend/src/components/PhoneNotifications.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{
   close: []
+  open: [notification: PhoneNotification]
 }>()
 const phone = usePhoneStore()
 const icon = computed(() =>
@@ -18,6 +19,16 @@ const icon = computed(() =>
     ? getPhoneApp(props.notification.appId)?.iconImage
     : undefined,
 )
+
+function openNotification(event: MouseEvent): void {
+  if (
+    !props.notification?.route ||
+    (event.target as HTMLElement).closest('button')
+  ) {
+    return
+  }
+  emit('open', props.notification)
+}
 </script>
 
 <template>
@@ -29,7 +40,9 @@ const icon = computed(() =>
     :title-right-text="phone.t('Notifications.now')"
     button="close"
     class="phone-notification"
+    :class="{ 'is-actionable': !!notification?.route }"
     @close="emit('close')"
+    @click="openNotification"
   >
     <template v-if="icon" #icon>
       <img :src="icon" alt="" class="phone-notification__icon" />
diff --git a/frontend/src/components/RadioHud.vue b/frontend/src/components/RadioHud.vue
index b46a754..e219864 100644
--- a/frontend/src/components/RadioHud.vue
+++ b/frontend/src/components/RadioHud.vue
@@ -3,6 +3,7 @@ import { Headphones } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 
 import type { RadioHudConfig, RadioHudMember } from '@/types/radio'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type RadioHudEntry = RadioHudMember & {
   state: 'recent' | 'talking'
@@ -122,6 +123,7 @@ function updateConfig(value: Partial<RadioHudConfig>): void {
 }
 
 function onMessage(event: MessageEvent<RadioHudMessage>): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data?.type === 'radio:hud-config' && event.data.data) {
     updateConfig(event.data.data as Partial<RadioHudConfig>)
   } else if (event.data?.type === 'radio:hud-update' && event.data.data) {
diff --git a/frontend/src/config/apps.test.ts b/frontend/src/config/apps.test.ts
index f69db3a..4a76207 100644
--- a/frontend/src/config/apps.test.ts
+++ b/frontend/src/config/apps.test.ts
@@ -52,6 +52,12 @@ describe('app registry', () => {
       labelKey: 'Apps.house.name',
       route: '/apps/house',
     })
+    expect(PHONE_APPS.find((app) => app.id === 'companies')).toMatchObject({
+      category: 'utilities',
+      gridOrder: 28,
+      labelKey: 'Apps.companies.name',
+      route: '/apps/companies',
+    })
     expect(PHONE_APPS.find((app) => app.id === 'music')).toMatchObject({
       category: 'utilities',
       gridOrder: 26,
@@ -128,6 +134,7 @@ describe('app registry', () => {
     expect(isPhoneAppId('clock')).toBe(true)
     expect(isPhoneAppId('skyride')).toBe(true)
     expect(isPhoneAppId('music')).toBe(true)
+    expect(isPhoneAppId('companies')).toBe(true)
     expect(
       PHONE_APPS.filter((app) => app.category === 'games').map((app) => app.id),
     ).toEqual([
diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts
index efcac80..4f49726 100644
--- a/frontend/src/config/apps.ts
+++ b/frontend/src/config/apps.ts
@@ -32,8 +32,9 @@ import {
   Feather,
   ReceiptText,
   UsersRound,
+  Building2,
 } from 'lucide-vue-next'
-import { defineAsyncComponent, markRaw } from 'vue'
+import { defineAsyncComponent, markRaw, shallowReactive } from 'vue'
 
 import appStoreIcon from '@/assets/img/app-icons/apps.webp'
 import calculatorIcon from '@/assets/img/app-icons/calculator.webp'
@@ -70,13 +71,32 @@ import skyRideIcon from '@/assets/img/app-icons/skyride.svg'
 import musicIcon from '@/assets/img/app-icons/music.svg'
 import featherIcon from '@/assets/img/app-icons/feather.svg'
 import crewLinkIcon from '@/assets/img/app-icons/crewlink.svg'
+import companiesIcon from '@/assets/img/app-icons/companies.svg'
 import type {
+  BuiltinPhoneAppDefinition,
+  BuiltinPhoneAppId,
+  ExternalPhoneAppDefinition,
+  ExternalPhoneAppId,
   LaunchablePhoneAppDefinition,
   LaunchablePhoneAppId,
   PhoneAppDefinition,
 } from '@/types/apps'
 
-export const PHONE_APPS: PhoneAppDefinition[] = [
+export const PHONE_APPS = shallowReactive<PhoneAppDefinition[]>([
+  {
+    category: 'utilities',
+    component: markRaw(
+      defineAsyncComponent(() => import('@/views/apps/CompaniesApp.vue')),
+    ),
+    dockOrder: null,
+    gridOrder: 28,
+    icon: markRaw(Building2),
+    iconClass: 'app-icon--companies',
+    iconImage: companiesIcon,
+    id: 'companies',
+    labelKey: 'Apps.companies.name',
+    route: '/apps/companies',
+  },
   {
     category: 'utilities',
     component: markRaw(
@@ -567,7 +587,13 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     labelKey: 'Apps.neonDrop.name',
     route: '/apps/neon-drop',
   },
-]
+])
+
+const BUILTIN_PHONE_APPS = [...PHONE_APPS] as BuiltinPhoneAppDefinition[]
+
+export const BUILTIN_PHONE_APP_IDS: ReadonlySet<BuiltinPhoneAppId> = new Set(
+  BUILTIN_PHONE_APPS.map((app) => app.id),
+)
 
 export const NON_REMOVABLE_PHONE_APP_IDS: ReadonlySet<LaunchablePhoneAppId> =
   new Set([
@@ -582,6 +608,12 @@ export const NON_REMOVABLE_PHONE_APP_IDS: ReadonlySet<LaunchablePhoneAppId> =
 
 export const PHONE_APP_IDS = PHONE_APPS.map((app) => app.id)
 
+export function replaceExternalPhoneApps(
+  apps: ExternalPhoneAppDefinition[],
+): void {
+  PHONE_APPS.splice(0, PHONE_APPS.length, ...BUILTIN_PHONE_APPS, ...apps)
+}
+
 export function getPhoneApp(
   id: string | string[] | undefined,
 ): PhoneAppDefinition | undefined {
@@ -594,8 +626,33 @@ export function isPhoneAppId(value: string): value is LaunchablePhoneAppId {
   return !!app && isLaunchablePhoneApp(app)
 }
 
+export function isExternalPhoneApp(
+  app: PhoneAppDefinition | undefined,
+): app is ExternalPhoneAppDefinition {
+  return app?.kind === 'external'
+}
+
+export function isValidExternalPhoneAppId(
+  value: string,
+): value is ExternalPhoneAppId {
+  return /^[a-z0-9][a-z0-9._-]{1,63}$/.test(value)
+}
+
+export function getPhoneAppLabel(
+  app: PhoneAppDefinition,
+  translate: (key: string) => string,
+): string {
+  return app.kind === 'external' ? app.name : translate(app.labelKey)
+}
+
+export function isPhoneAppRemovable(app: PhoneAppDefinition): boolean {
+  return app.kind === 'external'
+    ? app.removable
+    : !NON_REMOVABLE_PHONE_APP_IDS.has(app.id)
+}
+
 export function isLaunchablePhoneApp(
   app: PhoneAppDefinition,
 ): app is LaunchablePhoneAppDefinition {
-  return app.component !== null && app.route !== null
+  return app.kind === 'external' || app.component !== null
 }
diff --git a/frontend/src/stores/app-catalog.test.ts b/frontend/src/stores/app-catalog.test.ts
new file mode 100644
index 0000000..ada00e3
--- /dev/null
+++ b/frontend/src/stores/app-catalog.test.ts
@@ -0,0 +1,135 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  getPhoneApp,
+  isExternalPhoneApp,
+  replaceExternalPhoneApps,
+} from '@/config/apps'
+import {
+  normalizeExternalPhoneApp,
+  useAppCatalogStore,
+} from '@/stores/app-catalog'
+
+const mocks = vi.hoisted(() => ({
+  ensureAppNotificationPreferences: vi.fn(),
+  reconcileCatalog: vi.fn(),
+}))
+
+vi.mock('@/stores/app-store', () => ({
+  useAppStoreStore: () => ({ reconcileCatalog: mocks.reconcileCatalog }),
+}))
+vi.mock('@/stores/phone', () => ({
+  usePhoneStore: () => ({
+    ensureAppNotificationPreferences: mocks.ensureAppNotificationPreferences,
+  }),
+}))
+
+function validApp(overrides: Record<string, unknown> = {}) {
+  return {
+    bundled: false,
+    category: 'utilities',
+    icon: 'https://cfx-nui-example/web/icon.webp',
+    id: 'example-app',
+    name: 'Example App',
+    ownerResource: 'example_resource',
+    ui: 'https://cfx-nui-example/web/index.html',
+    ...overrides,
+  }
+}
+
+describe('custom app catalog', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    replaceExternalPhoneApps([])
+    mocks.ensureAppNotificationPreferences.mockReset()
+    mocks.reconcileCatalog.mockReset()
+  })
+
+  afterEach(() => {
+    replaceExternalPhoneApps([])
+    vi.restoreAllMocks()
+  })
+
+  it('normalizes a validated external iframe app', () => {
+    const app = normalizeExternalPhoneApp(
+      validApp({
+        compatibility: { fixBlur: true, unsafe: () => undefined },
+        defaultInstalled: true,
+        iconBackground: '#1d4ed8',
+        permissions: ['app.close', 'app.close', 'device.storage'],
+      }),
+    )
+
+    expect(app).toMatchObject({
+      bridgeMode: 'legacy',
+      capabilities: ['app.close', 'device.storage'],
+      compatibility: { fixBlur: true },
+      defaultInstalled: true,
+      id: 'example-app',
+      iconBackground: '#1d4ed8',
+      kind: 'external',
+      readyTimeoutMs: 8000,
+      removable: true,
+      route: '/apps/example-app',
+    })
+  })
+
+  it('accepts only color-shaped icon backgrounds', () => {
+    expect(
+      normalizeExternalPhoneApp(
+        validApp({ iconBackground: 'hsl(221 83% 53%)' }),
+      ),
+    ).toMatchObject({ iconBackground: 'hsl(221 83% 53%)' })
+    expect(
+      normalizeExternalPhoneApp(
+        validApp({
+          iconBackground: 'url(https://attacker.test/tracker.png)',
+        }),
+      ),
+    ).not.toHaveProperty('iconBackground')
+  })
+
+  it('rejects unsafe URLs and built-in id collisions', () => {
+    expect(
+      normalizeExternalPhoneApp(validApp({ ui: 'javascript:alert(1)' })),
+    ).toBeNull()
+    expect(normalizeExternalPhoneApp(validApp({ id: 'phone' }))).toBeNull()
+    expect(
+      normalizeExternalPhoneApp(validApp({ readyTimeoutMs: 31_000 })),
+    ).toMatchObject({ readyTimeoutMs: 8000 })
+  })
+
+  it('replaces the runtime entries and reconciles dependent stores', () => {
+    const catalog = useAppCatalogStore()
+
+    catalog.replaceCatalog({
+      apps: [
+        validApp(),
+        validApp(),
+        validApp({ id: 'invalid', ui: 'http://example.test' }),
+      ],
+    })
+
+    const app = getPhoneApp('example-app')
+    expect(isExternalPhoneApp(app)).toBe(true)
+    expect(catalog.externalApps).toHaveLength(1)
+    expect(mocks.ensureAppNotificationPreferences).toHaveBeenCalledWith([
+      'example-app',
+    ])
+    expect(mocks.reconcileCatalog).toHaveBeenCalledOnce()
+  })
+
+  it('queues messages only for registered external apps', () => {
+    const catalog = useAppCatalogStore()
+    catalog.replaceCatalog({ apps: [validApp()] })
+
+    expect(catalog.queueHostMessage('example-app', { hello: 'world' })).toBe(
+      true,
+    )
+    expect(catalog.queueHostMessage('phone', {})).toBe(false)
+    expect(catalog.hostMessages['example-app']).toMatchObject([
+      { payload: { hello: 'world' }, sequence: 1 },
+    ])
+  })
+})
diff --git a/frontend/src/stores/app-catalog.ts b/frontend/src/stores/app-catalog.ts
new file mode 100644
index 0000000..3c0be3d
--- /dev/null
+++ b/frontend/src/stores/app-catalog.ts
@@ -0,0 +1,314 @@
+import { Grid2X2 } from 'lucide-vue-next'
+import { defineStore } from 'pinia'
+import { markRaw } from 'vue'
+
+import {
+  BUILTIN_PHONE_APP_IDS,
+  getPhoneApp,
+  isExternalPhoneApp,
+  isValidExternalPhoneAppId,
+  PHONE_APPS,
+  replaceExternalPhoneApps,
+} from '@/config/apps'
+import { useAppStoreStore } from '@/stores/app-store'
+import { usePhoneStore } from '@/stores/phone'
+import type {
+  CustomAppHostMessage,
+  CustomAppOpenRequest,
+  BuiltinPhoneAppId,
+  ExternalPhoneAppDefinition,
+  PhoneAppCategory,
+} from '@/types/apps'
+
+const APP_CATEGORIES: ReadonlySet<PhoneAppCategory> = new Set([
+  'games',
+  'productivity',
+  'shopping',
+  'social',
+  'utilities',
+])
+const MAX_PENDING_MESSAGES = 50
+const ICON_BACKGROUND_HEX_PATTERN =
+  /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i
+const ICON_BACKGROUND_NAMED_PATTERN = /^[a-z]{3,32}$/i
+const ICON_BACKGROUND_FUNCTION_PATTERN =
+  /^(?:rgb|rgba|hsl|hsla)\([\d\s.,%+\-/degraturn]+\)$/i
+
+function readRecord(value: unknown): Record<string, unknown> | null {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null
+}
+
+function readRequiredString(
+  source: Record<string, unknown>,
+  key: string,
+  maximumLength: number,
+): string | null {
+  const value = source[key]
+  if (typeof value !== 'string') return null
+  const normalized = value.trim()
+  return normalized && normalized.length <= maximumLength ? normalized : null
+}
+
+function readOptionalString(
+  source: Record<string, unknown>,
+  key: string,
+  maximumLength: number,
+): string {
+  const value = source[key]
+  if (typeof value !== 'string') return ''
+  return value.trim().slice(0, maximumLength)
+}
+
+function readIconBackground(value: unknown): string {
+  if (typeof value !== 'string') return ''
+  const normalized = value.trim()
+  if (!normalized || normalized.length > 64) return ''
+
+  return ICON_BACKGROUND_HEX_PATTERN.test(normalized) ||
+    ICON_BACKGROUND_NAMED_PATTERN.test(normalized) ||
+    ICON_BACKGROUND_FUNCTION_PATTERN.test(normalized)
+    ? normalized
+    : ''
+}
+
+function readHttpsUrl(value: unknown): string | null {
+  if (typeof value !== 'string' || value.length > 2048) return null
+
+  try {
+    const parsed = new URL(value)
+    if (parsed.protocol !== 'https:' || parsed.username || parsed.password) {
+      return null
+    }
+    return parsed.href
+  } catch {
+    return null
+  }
+}
+
+function readCapabilities(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+
+  const capabilities: string[] = []
+  for (const capability of value) {
+    if (
+      typeof capability === 'string' &&
+      /^[a-z][a-z0-9._-]{1,63}$/.test(capability) &&
+      !capabilities.includes(capability)
+    ) {
+      capabilities.push(capability)
+    }
+  }
+  return capabilities
+}
+
+function readCompatibilityValue(value: unknown, depth = 0): unknown {
+  if (
+    value === null ||
+    typeof value === 'boolean' ||
+    (typeof value === 'number' && Number.isFinite(value))
+  ) {
+    return value
+  }
+  if (typeof value === 'string') return value.slice(0, 256)
+  if (depth >= 2) return undefined
+  if (Array.isArray(value)) {
+    return value
+      .slice(0, 32)
+      .map((item) => readCompatibilityValue(item, depth + 1))
+      .filter((item) => item !== undefined)
+  }
+
+  const source = readRecord(value)
+  if (!source) return undefined
+  const result: Record<string, unknown> = {}
+  for (const [key, item] of Object.entries(source).slice(0, 32)) {
+    if (!/^[A-Za-z0-9_.-]{1,64}$/.test(key)) continue
+    const normalized = readCompatibilityValue(item, depth + 1)
+    if (normalized !== undefined) result[key] = normalized
+  }
+  return result
+}
+
+function readCompatibility(value: unknown): Record<string, unknown> {
+  const source = readRecord(value)
+  if (!source) return {}
+  return (readCompatibilityValue(source) as Record<string, unknown>) ?? {}
+}
+
+export function normalizeExternalPhoneApp(
+  value: unknown,
+  fallbackOrder = 0,
+): ExternalPhoneAppDefinition | null {
+  const source = readRecord(value)
+  if (!source) return null
+
+  const id = readRequiredString(source, 'id', 64)
+  const name = readRequiredString(source, 'name', 64)
+  const ownerResource = readRequiredString(source, 'ownerResource', 128)
+  const ui = readHttpsUrl(source.ui)
+  const icon = readHttpsUrl(source.icon)
+  if (
+    !id ||
+    !isValidExternalPhoneAppId(id) ||
+    BUILTIN_PHONE_APP_IDS.has(id as BuiltinPhoneAppId) ||
+    !name ||
+    !ownerResource ||
+    !/^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/.test(ownerResource) ||
+    !ui ||
+    !icon
+  ) {
+    return null
+  }
+
+  const category = APP_CATEGORIES.has(source.category as PhoneAppCategory)
+    ? (source.category as PhoneAppCategory)
+    : 'utilities'
+  const bundled = source.bundled === true
+  const gridOrder =
+    typeof source.gridOrder === 'number' &&
+    Number.isFinite(source.gridOrder) &&
+    source.gridOrder >= 0
+      ? Math.floor(source.gridOrder)
+      : 1000 + fallbackOrder
+  const iconBackground = readIconBackground(source.iconBackground)
+
+  return {
+    bridgeMode:
+      source.bridgeMode === 'sky' || source.bridgeMode === 'legacy'
+        ? source.bridgeMode
+        : bundled
+          ? 'sky'
+          : 'legacy',
+    bundled,
+    capabilities: readCapabilities(source.capabilities ?? source.permissions),
+    category,
+    component: null,
+    compatibility: readCompatibility(source.compatibility),
+    defaultInstalled: source.defaultInstalled === true,
+    description: readOptionalString(source, 'description', 320),
+    developer: readOptionalString(source, 'developer', 96),
+    dockOrder: null,
+    gridOrder,
+    icon: markRaw(Grid2X2),
+    ...(iconBackground ? { iconBackground } : {}),
+    iconClass: 'app-icon--custom',
+    iconImage: icon,
+    id,
+    kind: 'external',
+    name,
+    orientation: source.orientation === 'landscape' ? 'landscape' : 'portrait',
+    ownerResource,
+    readyTimeoutMs:
+      typeof source.readyTimeoutMs === 'number' &&
+      Number.isFinite(source.readyTimeoutMs) &&
+      source.readyTimeoutMs >= 1000 &&
+      source.readyTimeoutMs <= 30_000
+        ? Math.floor(source.readyTimeoutMs)
+        : 8000,
+    removable: source.removable !== false,
+    route: `/apps/${id}`,
+    ui,
+  }
+}
+
+export const useAppCatalogStore = defineStore('app-catalog', {
+  state: () => ({
+    externalApps: [] as ExternalPhoneAppDefinition[],
+    hostMessages: {} as Record<string, CustomAppHostMessage[]>,
+    nextSequence: 1,
+    openRequests: {} as Record<string, CustomAppOpenRequest>,
+  }),
+  getters: {
+    apps: () => PHONE_APPS,
+  },
+  actions: {
+    replaceCatalog(payload: unknown): void {
+      const source = readRecord(payload)
+      if (!source || !Array.isArray(source.apps)) {
+        console.error('[Custom apps] Ignored an invalid catalog payload.')
+        return
+      }
+
+      const seenIds = new Set<string>()
+      const apps: ExternalPhoneAppDefinition[] = []
+      for (const [index, value] of source.apps.entries()) {
+        const app = normalizeExternalPhoneApp(value, index)
+        if (!app) {
+          console.error(
+            `[Custom apps] Ignored invalid catalog entry at index ${index}.`,
+          )
+          continue
+        }
+        if (seenIds.has(app.id)) {
+          console.error(`[Custom apps] Ignored duplicate app id: ${app.id}`)
+          continue
+        }
+        seenIds.add(app.id)
+        apps.push(app)
+      }
+
+      this.externalApps = apps
+      replaceExternalPhoneApps(apps)
+
+      for (const appId of Object.keys(this.hostMessages)) {
+        if (!seenIds.has(appId)) delete this.hostMessages[appId]
+      }
+      for (const appId of Object.keys(this.openRequests)) {
+        if (!seenIds.has(appId)) delete this.openRequests[appId]
+      }
+
+      usePhoneStore().ensureAppNotificationPreferences(
+        apps.map((app) => app.id),
+      )
+      useAppStoreStore().reconcileCatalog()
+    },
+    queueHostMessage(appId: string, payload: unknown): boolean {
+      const app = getPhoneApp(appId)
+      if (!isExternalPhoneApp(app)) {
+        console.error(
+          `[Custom apps] Message target is not registered: ${appId}`,
+        )
+        return false
+      }
+
+      const messages = this.hostMessages[appId] ?? []
+      messages.push({ payload, sequence: this.nextSequence })
+      this.nextSequence += 1
+      if (messages.length > MAX_PENDING_MESSAGES) {
+        console.error(
+          `[Custom apps] Pending message limit reached for ${appId}; dropped the oldest message.`,
+        )
+      }
+      this.hostMessages[appId] = messages.slice(-MAX_PENDING_MESSAGES)
+      return true
+    },
+    consumeHostMessages(appId: string, throughSequence: number): void {
+      const remaining = (this.hostMessages[appId] ?? []).filter(
+        (message) => message.sequence > throughSequence,
+      )
+      if (remaining.length) this.hostMessages[appId] = remaining
+      else delete this.hostMessages[appId]
+    },
+    requestOpen(appId: string, data?: unknown): boolean {
+      const app = getPhoneApp(appId)
+      if (!isExternalPhoneApp(app)) {
+        console.error(`[Custom apps] Open target is not registered: ${appId}`)
+        return false
+      }
+
+      this.openRequests[appId] = {
+        ...(data === undefined ? {} : { data }),
+        sequence: this.nextSequence,
+      }
+      this.nextSequence += 1
+      return true
+    },
+    consumeOpenRequest(appId: string, sequence: number): void {
+      if (this.openRequests[appId]?.sequence === sequence) {
+        delete this.openRequests[appId]
+      }
+    },
+  },
+})
diff --git a/frontend/src/stores/app-store.test.ts b/frontend/src/stores/app-store.test.ts
index c09d8da..a57a421 100644
--- a/frontend/src/stores/app-store.test.ts
+++ b/frontend/src/stores/app-store.test.ts
@@ -5,17 +5,23 @@ import { NON_REMOVABLE_PHONE_APP_IDS } from '@/config/apps'
 import { useAppStoreStore } from '@/stores/app-store'
 import { removeHomeApp } from '@/utils/homeLayout'
 
-const mocks = vi.hoisted(() => ({ saveDeviceNamespace: vi.fn() }))
+const mocks = vi.hoisted(() => ({
+  phone: {
+    device: { imei: 'phone-a' },
+    isOpen: true,
+    saveDeviceNamespace: vi.fn(),
+  },
+}))
 vi.mock('@/stores/phone', () => ({
-  usePhoneStore: () => ({
-    saveDeviceNamespace: mocks.saveDeviceNamespace,
-  }),
+  usePhoneStore: () => mocks.phone,
 }))
 
 describe('app store', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
-    mocks.saveDeviceNamespace.mockReset()
+    mocks.phone.device.imei = 'phone-a'
+    mocks.phone.isOpen = true
+    mocks.phone.saveDeviceNamespace.mockReset()
   })
 
   afterEach(() => {
@@ -32,7 +38,7 @@ describe('app store', () => {
     apps.recordLaunch('mail')
 
     expect(apps.launchCounts).toEqual({ mail: 4 })
-    expect(mocks.saveDeviceNamespace).toHaveBeenCalledWith('apps', {
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledWith('apps', {
       claimedApps: ['snake'],
       homeLayout: apps.homeLayout,
       launchCounts: { mail: 4 },
@@ -54,7 +60,7 @@ describe('app store', () => {
     vi.advanceTimersByTime(1)
     expect(apps.installingApps.snake).toBeUndefined()
     expect(apps.claimedApps).toEqual(['snake'])
-    expect(mocks.saveDeviceNamespace).toHaveBeenCalledWith('apps', {
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledWith('apps', {
       claimedApps: ['snake'],
       homeLayout: apps.homeLayout,
       launchCounts: {},
@@ -71,7 +77,7 @@ describe('app store', () => {
     vi.advanceTimersByTime(3000)
 
     expect(apps.claimedApps).toEqual(['memory', 'snake'])
-    expect(mocks.saveDeviceNamespace).toHaveBeenCalledTimes(1)
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1)
   })
 
   it('reinstalls core and claimed apps removed from the Home Screen', () => {
@@ -81,7 +87,7 @@ describe('app store', () => {
     apps.hydrate({ claimedApps: ['memory'] })
     apps.removeHomeApp('notes')
     apps.removeHomeApp('memory')
-    mocks.saveDeviceNamespace.mockClear()
+    mocks.phone.saveDeviceNamespace.mockClear()
 
     apps.installApp('notes')
     apps.installApp('memory')
@@ -96,13 +102,13 @@ describe('app store', () => {
     expect(apps.homeLayout.grid).toContain('notes')
     expect(apps.homeLayout.grid).toContain('memory')
     expect(apps.claimedApps).toEqual(['memory'])
-    expect(mocks.saveDeviceNamespace).toHaveBeenCalledTimes(2)
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(2)
   })
 
   it('prevents protected apps from being removed from the Home Screen', () => {
     const apps = useAppStoreStore()
     apps.hydrate(null)
-    mocks.saveDeviceNamespace.mockClear()
+    mocks.phone.saveDeviceNamespace.mockClear()
 
     expect([...NON_REMOVABLE_PHONE_APP_IDS]).toEqual([
       'app-store',
@@ -118,7 +124,7 @@ describe('app store', () => {
       expect(apps.homeLayout.hidden).not.toContain(appId)
     }
 
-    expect(mocks.saveDeviceNamespace).not.toHaveBeenCalled()
+    expect(mocks.phone.saveDeviceNamespace).not.toHaveBeenCalled()
   })
 
   it('restores protected apps hidden by older persisted layouts', () => {
@@ -129,7 +135,7 @@ describe('app store', () => {
 
     expect(apps.homeLayout.hidden).not.toContain('mail')
     expect(apps.homeLayout.grid).toContain('mail')
-    expect(mocks.saveDeviceNamespace).toHaveBeenCalledWith('apps', {
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledWith('apps', {
       claimedApps: [],
       homeLayout: apps.homeLayout,
       launchCounts: {},
@@ -147,10 +153,54 @@ describe('app store', () => {
     apps.removeHomeApp('notes')
     expect(apps.homeLayout.grid).not.toContain('notes')
     expect(apps.homeLayout.hidden).toContain('notes')
-    expect(mocks.saveDeviceNamespace).toHaveBeenLastCalledWith('apps', {
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenLastCalledWith('apps', {
       claimedApps: [],
       homeLayout: apps.homeLayout,
       launchCounts: {},
     })
   })
+
+  it('does not commit an installation to a different phone', () => {
+    vi.useFakeTimers()
+    const apps = useAppStoreStore()
+
+    apps.installApp('snake')
+    mocks.phone.device.imei = 'phone-b'
+    vi.advanceTimersByTime(3000)
+
+    expect(apps.installingApps).toEqual({})
+    expect(apps.claimedApps).toEqual([])
+    expect(mocks.phone.saveDeviceNamespace).not.toHaveBeenCalled()
+  })
+
+  it('cancels installation timers when hydration changes device scope', () => {
+    vi.useFakeTimers()
+    const apps = useAppStoreStore()
+
+    apps.installApp('snake')
+    expect(vi.getTimerCount()).toBe(1)
+
+    mocks.phone.device.imei = 'phone-b'
+    apps.hydrate(null)
+    expect(vi.getTimerCount()).toBe(0)
+
+    vi.advanceTimersByTime(3000)
+    expect(apps.claimedApps).toEqual([])
+    expect(mocks.phone.saveDeviceNamespace).not.toHaveBeenCalled()
+  })
+
+  it('cancels installation timers when the phone closes', () => {
+    vi.useFakeTimers()
+    const apps = useAppStoreStore()
+
+    apps.installApp('snake')
+    mocks.phone.isOpen = false
+    apps.cancelPendingInstalls()
+
+    expect(vi.getTimerCount()).toBe(0)
+    expect(apps.installingApps).toEqual({})
+    vi.advanceTimersByTime(3000)
+    expect(apps.claimedApps).toEqual([])
+    expect(mocks.phone.saveDeviceNamespace).not.toHaveBeenCalled()
+  })
 })
diff --git a/frontend/src/stores/app-store.ts b/frontend/src/stores/app-store.ts
index 401cb9c..3c37870 100644
--- a/frontend/src/stores/app-store.ts
+++ b/frontend/src/stores/app-store.ts
@@ -1,7 +1,11 @@
 import { defineStore } from 'pinia'
 
 import {
+  getPhoneApp,
+  isExternalPhoneApp,
   isPhoneAppId,
+  isPhoneAppRemovable,
+  isValidExternalPhoneAppId,
   NON_REMOVABLE_PHONE_APP_IDS,
   PHONE_APPS,
 } from '@/config/apps'
@@ -17,26 +21,55 @@ import {
   restoreHomeApp,
   type HomeArea,
 } from '@/utils/homeLayout'
+import { nuiCall } from '@/utils/nui'
 
 const INSTALL_DURATION_MS = 3000
-const DEFAULT_GRID_IDS = [...PHONE_APPS]
-  .sort((a, b) => a.gridOrder - b.gridOrder)
-  .map((app) => app.id)
-const DEFAULT_DOCK_IDS = PHONE_APPS.filter((app) => app.dockOrder !== null)
-  .sort((a, b) => (a.dockOrder ?? 0) - (b.dockOrder ?? 0))
-  .map((app) => app.id)
-const CORE_APP_IDS = PHONE_APPS.filter((app) => app.category !== 'games').map(
-  (app) => app.id,
-)
+
+type PendingInstallation = {
+  deviceImei: string
+  timer: ReturnType<typeof globalThis.setTimeout>
+  token: symbol
+}
+
+const pendingInstallations = new WeakMap<
+  object,
+  Map<LaunchablePhoneAppId, PendingInstallation>
+>()
+
+function getDefaultGridIds(): LaunchablePhoneAppId[] {
+  return [...PHONE_APPS]
+    .sort((a, b) => a.gridOrder - b.gridOrder)
+    .map((app) => app.id)
+}
+
+function getDefaultDockIds(): LaunchablePhoneAppId[] {
+  return PHONE_APPS.filter((app) => app.dockOrder !== null)
+    .sort((a, b) => (a.dockOrder ?? 0) - (b.dockOrder ?? 0))
+    .map((app) => app.id)
+}
+
+function getDefaultInstalledIds(): LaunchablePhoneAppId[] {
+  return PHONE_APPS.filter((app) =>
+    isExternalPhoneApp(app) ? app.defaultInstalled : app.category !== 'games',
+  ).map((app) => app.id)
+}
+
+function isProtectedHomeApp(appId: LaunchablePhoneAppId): boolean {
+  const app = getPhoneApp(appId)
+  return app
+    ? !isPhoneAppRemovable(app)
+    : NON_REMOVABLE_PHONE_APP_IDS.has(appId)
+}
 
 export const useAppStoreStore = defineStore('app-store', {
   state: () => ({
     claimedApps: [] as LaunchablePhoneAppId[],
     homeLayout: createDefaultHomeLayout(
-      CORE_APP_IDS,
-      DEFAULT_GRID_IDS,
-      DEFAULT_DOCK_IDS,
+      getDefaultInstalledIds(),
+      getDefaultGridIds(),
+      getDefaultDockIds(),
     ),
+    hydrated: false,
     installingApps: {} as Partial<Record<LaunchablePhoneAppId, boolean>>,
     launchCounts: {} as Partial<Record<LaunchablePhoneAppId, number>>,
   }),
@@ -62,9 +95,18 @@ export const useAppStoreStore = defineStore('app-store', {
         this.persist()
       }
     },
+    cancelPendingInstalls(): void {
+      const installations = pendingInstallations.get(this)
+      if (installations) {
+        for (const installation of installations.values()) {
+          globalThis.clearTimeout(installation.timer)
+        }
+        pendingInstallations.delete(this)
+      }
+      this.installingApps = {}
+    },
     installApp(id: LaunchablePhoneAppId): void {
-      const installed =
-        CORE_APP_IDS.includes(id) || this.claimedApps.includes(id)
+      const installed = this.isInstalled(id)
       if (
         this.installingApps[id] ||
         (installed && !this.homeLayout.hidden.includes(id))
@@ -72,51 +114,111 @@ export const useAppStoreStore = defineStore('app-store', {
         return
       }
 
+      const phone = usePhoneStore()
+      const deviceImei = phone.device?.imei
+      if (!phone.isOpen || !deviceImei) {
+        console.error(
+          `[App store] Installation cancelled because no phone device is open for ${id}.`,
+        )
+        return
+      }
+
+      const app = getPhoneApp(id)
+      const reportInstall = !installed && isExternalPhoneApp(app)
+      const token = Symbol(id)
+      const installations =
+        pendingInstallations.get(this) ??
+        new Map<LaunchablePhoneAppId, PendingInstallation>()
       this.installingApps[id] = true
-      globalThis.setTimeout(() => {
-        if (CORE_APP_IDS.includes(id) || this.claimedApps.includes(id)) {
+      const timer = globalThis.setTimeout(() => {
+        const pending = installations.get(id)
+        if (!pending || pending.token !== token) return
+        installations.delete(id)
+        if (!installations.size) pendingInstallations.delete(this)
+
+        const activePhone = usePhoneStore()
+        if (
+          !activePhone.isOpen ||
+          activePhone.device?.imei !== pending.deviceImei
+        ) {
+          delete this.installingApps[id]
+          console.error(
+            `[App store] Installation cancelled because the active phone changed for ${id}.`,
+          )
+          return
+        }
+        if (reportInstall && !isExternalPhoneApp(getPhoneApp(id))) {
+          delete this.installingApps[id]
+          console.error(
+            `[Custom apps] Installation cancelled because ${id} is no longer registered.`,
+          )
+          return
+        }
+        if (this.isInstalled(id)) {
           this.restoreHomeApp(id)
         } else {
           this.claimApp(id)
         }
         delete this.installingApps[id]
+        if (reportInstall) {
+          void nuiCall('custom-app:lifecycle', {
+            appId: id,
+            event: 'install',
+          }).then((response) => {
+            if (!response.success) {
+              console.error(
+                `[Custom apps] Install lifecycle failed for ${id}: ${response.error ?? 'request_failed'}`,
+              )
+            }
+          })
+        }
       }, INSTALL_DURATION_MS)
+      installations.set(id, { deviceImei, timer, token })
+      pendingInstallations.set(this, installations)
     },
     hydrate(payload: unknown): void {
+      this.cancelPendingInstalls()
       const data = payload as {
         claimedApps?: unknown
         homeLayout?: unknown
         launchCounts?: unknown
       } | null
+      const layoutVersion =
+        data?.homeLayout && typeof data.homeLayout === 'object'
+          ? (data.homeLayout as { version?: unknown }).version
+          : undefined
       this.claimedApps = Array.isArray(data?.claimedApps)
         ? data.claimedApps.filter(
             (id): id is LaunchablePhoneAppId =>
-              typeof id === 'string' && isPhoneAppId(id),
+              typeof id === 'string' &&
+              (isPhoneAppId(id) ||
+                (layoutVersion === 3 && isValidExternalPhoneAppId(id))),
           )
         : []
-      const installedIds = [...CORE_APP_IDS, ...this.claimedApps]
+      const installedIds = [
+        ...new Set([...getDefaultInstalledIds(), ...this.claimedApps]),
+      ]
       const defaults = createDefaultHomeLayout(
         installedIds,
-        DEFAULT_GRID_IDS,
-        DEFAULT_DOCK_IDS,
+        getDefaultGridIds(),
+        getDefaultDockIds(),
       )
       this.homeLayout = parseHomeLayout(
         data?.homeLayout,
         defaults,
         installedIds,
       )
-      const protectedHiddenAppIds = this.homeLayout.hidden.filter((id) =>
-        NON_REMOVABLE_PHONE_APP_IDS.has(id),
-      )
+      const protectedHiddenAppIds =
+        this.homeLayout.hidden.filter(isProtectedHomeApp)
       for (const appId of protectedHiddenAppIds) {
         this.homeLayout = restoreHomeApp(this.homeLayout, appId)
       }
-      this.installingApps = {}
       this.launchCounts = {}
       if (data?.launchCounts && typeof data.launchCounts === 'object') {
         for (const [appId, count] of Object.entries(data.launchCounts)) {
           if (
-            isPhoneAppId(appId) &&
+            (isPhoneAppId(appId) ||
+              (layoutVersion === 3 && isValidExternalPhoneAppId(appId))) &&
             typeof count === 'number' &&
             Number.isFinite(count) &&
             count > 0
@@ -125,8 +227,39 @@ export const useAppStoreStore = defineStore('app-store', {
           }
         }
       }
+      this.hydrated = true
       if (protectedHiddenAppIds.length) this.persist()
     },
+    isInstalled(appId: LaunchablePhoneAppId): boolean {
+      if (this.claimedApps.includes(appId)) return true
+      const app = getPhoneApp(appId)
+      if (!app) return false
+      return isExternalPhoneApp(app)
+        ? app.defaultInstalled
+        : app.category !== 'games'
+    },
+    reconcileCatalog(): void {
+      const installedIds = [
+        ...new Set([...getDefaultInstalledIds(), ...this.claimedApps]),
+      ]
+      const defaults = createDefaultHomeLayout(
+        installedIds,
+        getDefaultGridIds(),
+        getDefaultDockIds(),
+      )
+      const previous = JSON.stringify(this.homeLayout)
+      this.homeLayout = parseHomeLayout(this.homeLayout, defaults, installedIds)
+
+      for (const appId of [...this.homeLayout.hidden]) {
+        if (isProtectedHomeApp(appId)) {
+          this.homeLayout = restoreHomeApp(this.homeLayout, appId)
+        }
+      }
+
+      if (this.hydrated && previous !== JSON.stringify(this.homeLayout)) {
+        this.persist()
+      }
+    },
     recordLaunch(appId: LaunchablePhoneAppId): void {
       this.launchCounts[appId] = (this.launchCounts[appId] ?? 0) + 1
       this.persist()
@@ -147,7 +280,7 @@ export const useAppStoreStore = defineStore('app-store', {
       this.persist()
     },
     removeHomeApp(appId: LaunchablePhoneAppId): void {
-      if (NON_REMOVABLE_PHONE_APP_IDS.has(appId)) return
+      if (isProtectedHomeApp(appId)) return
 
       this.homeLayout = removeHomeApp(this.homeLayout, appId)
       this.persist()
diff --git a/frontend/src/stores/companies.test.ts b/frontend/src/stores/companies.test.ts
new file mode 100644
index 0000000..2a49e89
--- /dev/null
+++ b/frontend/src/stores/companies.test.ts
@@ -0,0 +1,327 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useCompaniesStore } from '@/stores/companies'
+import type {
+  Company,
+  CompanyDirectoryFilters,
+  CompanyRequest,
+  CompanySummary,
+} from '@/types/companies'
+import { nuiCall } from '@/utils/nui'
+
+vi.mock('@/utils/nui', () => ({ nuiCall: vi.fn() }))
+
+const mockNuiCall = vi.mocked(nuiCall)
+
+const summary: CompanySummary = {
+  acceptsRequests: true,
+  announcement: null,
+  availability: 'available',
+  availabilityUpdatedAt: '2026-08-10T10:00:00.000Z',
+  canCall: true,
+  canMessage: false,
+  categoryId: 'public',
+  categoryName: 'Public services',
+  description: 'City emergency service.',
+  id: 'police',
+  location: {
+    address: 'Mission Row',
+    coords: { x: 441, y: -981, z: 30 },
+    district: 'Mission Row',
+    label: 'Mission Row Station',
+  },
+  logoUrl: null,
+  name: 'Los Santos Police',
+  phoneNumber: '911',
+  serviceSummary: 'Emergency response',
+  verified: true,
+}
+
+const company: Company = {
+  ...summary,
+  coverUrl: null,
+  hours: [],
+  revision: 3,
+  services: [],
+}
+
+const request: CompanyRequest = {
+  actions: {
+    allowedStatuses: ['in_progress'],
+    canAssign: false,
+    canCall: true,
+    canCancel: true,
+    canClaim: false,
+    canReply: true,
+  },
+  assignedLabel: null,
+  companyId: company.id,
+  companyLogoUrl: null,
+  companyName: company.name,
+  createdAt: '2026-08-10T10:00:00.000Z',
+  description: 'I need assistance.',
+  events: [],
+  id: 'request-1',
+  media: [],
+  messages: [],
+  phoneNumber: '911',
+  revision: 1,
+  serviceId: 'response',
+  serviceName: 'Emergency response',
+  status: 'new',
+  subject: 'Help needed',
+  unreadCount: 1,
+  updatedAt: '2026-08-10T10:00:00.000Z',
+}
+
+const filters: CompanyDirectoryFilters = {
+  acceptsRequests: false,
+  availability: null,
+  categoryId: null,
+  hasLocation: false,
+  search: '',
+  sort: 'relevance',
+}
+
+describe('companies store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockNuiCall.mockReset()
+  })
+
+  it('loads, filters and deduplicates cursor pages', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({
+        data: {
+          categories: [{ id: 'public', name: 'Public services' }],
+          companies: [summary],
+          nextCursor: 'page-2',
+        },
+        success: true,
+      })
+      .mockResolvedValueOnce({
+        data: {
+          categories: [],
+          companies: [
+            { ...summary, description: 'Updated description' },
+            { ...summary, id: 'medical', name: 'Los Santos Medical' },
+          ],
+          nextCursor: null,
+        },
+        success: true,
+      })
+    const store = useCompaniesStore()
+
+    expect(await store.loadCompanies(filters)).toBe(true)
+    expect(await store.loadCompanies(filters, true)).toBe(true)
+
+    expect(store.directory.map((item) => item.id)).toEqual([
+      'police',
+      'medical',
+    ])
+    expect(store.directory[0].description).toBe('Updated description')
+    expect(mockNuiCall).toHaveBeenNthCalledWith(2, 'companies:list', {
+      acceptsRequests: false,
+      availability: null,
+      categoryId: null,
+      cursor: 'page-2',
+      hasLocation: false,
+      search: '',
+      sort: 'relevance',
+    })
+  })
+
+  it('uses server-provided unread counts for the app badge', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: {
+        nextCursor: null,
+        requests: [request],
+        unreadCount: 4,
+      },
+      success: true,
+    })
+    const store = useCompaniesStore()
+
+    await store.loadMyRequests('open')
+    store.applyUnreadCounts({ work: 2 })
+
+    expect(store.customerUnreadCount).toBe(4)
+    expect(store.workUnreadCount).toBe(2)
+    expect(store.unreadCount).toBe(6)
+  })
+
+  it('does not refresh directory data before the app has loaded it', async () => {
+    const store = useCompaniesStore()
+
+    await store.applyChanged({ area: 'directory', companyId: 'police' })
+
+    expect(mockNuiCall).not.toHaveBeenCalled()
+
+    mockNuiCall.mockResolvedValue({
+      data: { categories: [], companies: [summary], nextCursor: null },
+      success: true,
+    })
+    await store.loadCompanies(filters)
+    mockNuiCall.mockClear()
+
+    await store.applyChanged({ area: 'directory', companyId: 'police' })
+
+    expect(mockNuiCall).toHaveBeenCalledOnce()
+  })
+
+  it('clears customer badge state when the active device has no usable SIM', async () => {
+    mockNuiCall.mockResolvedValueOnce({ error: 'no_sim', success: false })
+    const store = useCompaniesStore()
+    store.customerUnreadCount = 4
+
+    expect(await store.loadMyRequests('open')).toBe(false)
+    expect(store.customerUnreadCount).toBe(0)
+  })
+
+  it('drops SIM-scoped request data when the active device changes', () => {
+    const store = useCompaniesStore()
+    store.bindDeviceScope('device-a', 'sim-a')
+    store.customerUnreadCount = 3
+    store.myRequests = [request]
+    store.request = request
+
+    store.bindDeviceScope('device-a', 'sim-b')
+
+    expect(store.customerUnreadCount).toBe(0)
+    expect(store.myRequests).toEqual([])
+    expect(store.request).toBeNull()
+  })
+
+  it('keeps server-resolved request media in the loaded thread', async () => {
+    const requestWithMedia = {
+      ...request,
+      media: [{ id: 12, url: 'https://example.test/request-photo.jpg' }],
+    }
+    mockNuiCall.mockResolvedValueOnce({
+      data: { request: requestWithMedia },
+      success: true,
+    })
+    const store = useCompaniesStore()
+
+    expect(await store.loadRequest(request.id)).toBe(true)
+    expect(store.request?.media).toEqual(requestWithMedia.media)
+  })
+
+  it('refreshes counts without replacing the selected request list', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({
+        data: { nextCursor: null, requests: [], unreadCount: 3 },
+        success: true,
+      })
+      .mockResolvedValueOnce({
+        data: {
+          context: {
+            authorized: false,
+            callAvailable: false,
+            company: null,
+            metrics: { assigned: 0, completedToday: 0, new: 0, waiting: 0 },
+            ownRequests: [],
+            permissions: {
+              canAssign: false,
+              canManageAnnouncement: false,
+              canManageHours: false,
+              canManageProfile: false,
+              canManageServices: false,
+              canSetAvailability: false,
+              canTakeCalls: false,
+            },
+            recentRequests: [],
+            role: null,
+            unreadCount: 0,
+          },
+        },
+        success: true,
+      })
+    const store = useCompaniesStore()
+    store.myRequestsList = 'closed'
+
+    await store.refreshUnreadCounts()
+
+    expect(mockNuiCall).toHaveBeenCalledWith('companies:my-requests', {
+      cursor: null,
+      list: 'closed',
+    })
+  })
+
+  it('sends only server-resolved request identifiers when claiming', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: { request: { ...request, revision: 2, status: 'assigned' } },
+      success: true,
+    })
+    const store = useCompaniesStore()
+
+    await store.claimRequest(request.id, request.revision)
+
+    expect(mockNuiCall).toHaveBeenCalledWith('companies:claim-request', {
+      requestId: request.id,
+      revision: request.revision,
+    })
+    expect(store.request?.status).toBe('assigned')
+  })
+
+  it('does not apply manager edits until the server confirms them', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      error: 'revision_conflict',
+      success: false,
+    })
+    const store = useCompaniesStore()
+    store.company = company
+
+    await store.updateProfile({
+      acceptsRequests: false,
+      address: 'New address',
+      description: 'Changed locally',
+      district: 'Downtown',
+      locationLabel: 'Office',
+      revision: company.revision,
+    })
+
+    expect(store.company).toEqual(company)
+    expect(store.mutationError).toBe('revision_conflict')
+  })
+
+  it('includes the current revision when availability changes', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: { company: { ...company, availability: 'busy', revision: 4 } },
+      success: true,
+    })
+    const store = useCompaniesStore()
+
+    await store.updateAvailability('busy', 3)
+
+    expect(mockNuiCall).toHaveBeenCalledWith('companies:update-availability', {
+      availability: 'busy',
+      revision: 3,
+    })
+  })
+
+  it('creates requests without client-owned identity fields', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: { request },
+      success: true,
+    })
+    const store = useCompaniesStore()
+
+    await store.createRequest({
+      companyId: 'police',
+      description: 'I need assistance.',
+      mediaIds: ['10'],
+      serviceId: 'response',
+      subject: 'Help needed',
+    })
+
+    expect(mockNuiCall).toHaveBeenCalledWith('companies:create-request', {
+      companyId: 'police',
+      description: 'I need assistance.',
+      mediaIds: ['10'],
+      serviceId: 'response',
+      subject: 'Help needed',
+    })
+  })
+})
diff --git a/frontend/src/stores/companies.ts b/frontend/src/stores/companies.ts
new file mode 100644
index 0000000..4e46162
--- /dev/null
+++ b/frontend/src/stores/companies.ts
@@ -0,0 +1,539 @@
+import { defineStore } from 'pinia'
+
+import type {
+  Company,
+  CompanyAvailability,
+  CompanyChangedPayload,
+  CompanyDirectoryFilters,
+  CompanyDirectoryPage,
+  CompanyHours,
+  CompanyMember,
+  CompanyMembersResult,
+  CompanyMutationResult,
+  CompanyRequest,
+  CompanyRequestList,
+  CompanyRequestMutationResult,
+  CompanyRequestPage,
+  CompanyRequestStatus,
+  CompanyRequestSummary,
+  CompanyService,
+  CompanySummary,
+  CompanyUnreadCounts,
+  CompanyWorkContext,
+  CompanyWorkFilter,
+  CompanyWorkQueuePage,
+  CreateCompanyRequest,
+  PublishCompanyAnnouncement,
+  UpdateCompanyProfile,
+} from '@/types/companies'
+import type { PhoneCall } from '@/types/phone'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
+
+function mergeById<T extends { id: string }>(current: T[], incoming: T[]): T[] {
+  const merged = new Map(current.map((item) => [item.id, item]))
+  for (const item of incoming) merged.set(item.id, item)
+  return [...merged.values()]
+}
+
+export const useCompaniesStore = defineStore('companies', {
+  state: () => ({
+    categories: [] as CompanyDirectoryPage['categories'],
+    company: null as Company | null,
+    customerUnreadCount: 0,
+    directory: [] as CompanySummary[],
+    directoryFilters: {
+      acceptsRequests: false,
+      availability: null,
+      categoryId: null,
+      hasLocation: false,
+      search: '',
+      sort: 'relevance',
+    } as CompanyDirectoryFilters,
+    directoryError: '',
+    directoryLoaded: false,
+    directoryLoading: false,
+    directoryLoadingMore: false,
+    directoryNextCursor: null as string | null,
+    deviceScopeKey: '',
+    deviceScopeVersion: 0,
+    members: [] as CompanyMember[],
+    membersLoading: false,
+    mutationError: '',
+    mutating: false,
+    myRequests: [] as CompanyRequestSummary[],
+    myRequestsList: 'open' as CompanyRequestList,
+    myRequestsError: '',
+    myRequestsLoaded: false,
+    myRequestsLoading: false,
+    myRequestsLoadingMore: false,
+    myRequestsNextCursor: null as string | null,
+    request: null as CompanyRequest | null,
+    requestError: '',
+    requestLoading: false,
+    workContext: null as CompanyWorkContext | null,
+    workContextError: '',
+    workContextLoaded: false,
+    workContextLoading: false,
+    workQueue: [] as CompanyRequestSummary[],
+    workQueueFilter: 'new' as CompanyWorkFilter,
+    workQueueError: '',
+    workQueueLoading: false,
+    workQueueLoadingMore: false,
+    workQueueNextCursor: null as string | null,
+    workUnreadCount: 0,
+  }),
+  getters: {
+    unreadCount: (state): number =>
+      state.customerUnreadCount + state.workUnreadCount,
+  },
+  actions: {
+    bindDeviceScope(imei: string, simId: string | null): void {
+      const key = `${imei}:${simId ?? 'no-sim'}`
+      if (!this.deviceScopeKey) {
+        this.deviceScopeKey = key
+        return
+      }
+      if (this.deviceScopeKey === key) return
+      this.deviceScopeKey = key
+      this.resetDeviceScope()
+    },
+    applyUnreadCounts(counts: CompanyUnreadCounts): void {
+      if (typeof counts.customer === 'number') {
+        this.customerUnreadCount = Math.max(0, Math.floor(counts.customer))
+      }
+      if (typeof counts.work === 'number') {
+        this.workUnreadCount = Math.max(0, Math.floor(counts.work))
+      }
+    },
+    async refreshUnreadCounts(): Promise<void> {
+      await Promise.all([
+        this.loadMyRequests(this.myRequestsList),
+        this.loadWorkContext(),
+      ])
+    },
+    async applyChanged(change: CompanyChangedPayload): Promise<void> {
+      const refreshDirectory =
+        this.directoryLoaded &&
+        (change.area === 'all' || change.area === 'directory')
+      const refreshCustomer =
+        this.myRequestsLoaded &&
+        (change.area === 'all' || change.area === 'customer')
+      const refreshWork =
+        this.workContextLoaded &&
+        (change.area === 'all' || change.area === 'work')
+      const tasks: Promise<unknown>[] = []
+      if (refreshDirectory) {
+        tasks.push(this.loadCompanies(this.directoryFilters))
+        if (change.companyId && this.company?.id === change.companyId) {
+          tasks.push(this.loadCompany(change.companyId))
+        }
+      }
+      if (refreshCustomer) tasks.push(this.loadMyRequests(this.myRequestsList))
+      if (refreshWork) {
+        tasks.push(
+          this.loadWorkContext().then((loaded) =>
+            loaded && this.workContext?.authorized
+              ? this.loadWorkQueue(this.workQueueFilter)
+              : false,
+          ),
+        )
+      }
+      if (
+        change.requestId &&
+        this.request?.id === change.requestId &&
+        (refreshCustomer || refreshWork)
+      ) {
+        tasks.push(this.loadRequest(change.requestId))
+      }
+      await Promise.all(tasks)
+    },
+    async loadCompanies(
+      filters: CompanyDirectoryFilters,
+      append = false,
+    ): Promise<boolean> {
+      if (append && (!this.directoryNextCursor || this.directoryLoadingMore)) {
+        return false
+      }
+      if (append) this.directoryLoadingMore = true
+      else this.directoryLoading = true
+      this.directoryLoaded = true
+      this.directoryFilters = { ...filters }
+      const response = await nuiCall<CompanyDirectoryPage>('companies:list', {
+        acceptsRequests: filters.acceptsRequests,
+        availability: filters.availability,
+        categoryId: filters.categoryId,
+        cursor: append ? this.directoryNextCursor : null,
+        hasLocation: filters.hasLocation,
+        search: filters.search,
+        sort: filters.sort,
+      })
+      this.directoryLoading = false
+      this.directoryLoadingMore = false
+      if (!response.success || !response.data) {
+        this.directoryError = response.error ?? 'request_failed'
+        if (!append) {
+          this.directory = []
+          this.directoryNextCursor = null
+        }
+        return false
+      }
+      this.categories = response.data.categories ?? this.categories
+      this.directory = append
+        ? mergeById(this.directory, response.data.companies)
+        : response.data.companies
+      this.directoryNextCursor = response.data.nextCursor
+      this.directoryError = ''
+      return true
+    },
+    async loadCompany(companyId: string): Promise<boolean> {
+      this.directoryError = ''
+      this.directoryLoading = true
+      const response = await nuiCall<{ company: Company }>('companies:get', {
+        companyId,
+      })
+      this.directoryLoading = false
+      if (!response.success || !response.data?.company) {
+        this.directoryError = response.error ?? 'request_failed'
+        return false
+      }
+      this.company = response.data.company
+      this.replaceCompanySummary(response.data.company)
+      return true
+    },
+    async loadMyRequests(
+      list: CompanyRequestList,
+      append = false,
+    ): Promise<boolean> {
+      if (
+        append &&
+        (!this.myRequestsNextCursor || this.myRequestsLoadingMore)
+      ) {
+        return false
+      }
+      if (append) this.myRequestsLoadingMore = true
+      else this.myRequestsLoading = true
+      this.myRequestsLoaded = true
+      this.myRequestsList = list
+      const deviceScopeVersion = this.deviceScopeVersion
+      const response = await nuiCall<CompanyRequestPage>(
+        'companies:my-requests',
+        {
+          cursor: append ? this.myRequestsNextCursor : null,
+          list,
+        },
+      )
+      this.myRequestsLoading = false
+      this.myRequestsLoadingMore = false
+      if (deviceScopeVersion !== this.deviceScopeVersion) return false
+      if (!response.success || !response.data) {
+        this.myRequestsError = response.error ?? 'request_failed'
+        if (!append) {
+          this.myRequests = []
+          this.myRequestsNextCursor = null
+          if (
+            response.error === 'anonymous_sim' ||
+            response.error === 'device_not_found' ||
+            response.error === 'no_sim'
+          ) {
+            this.customerUnreadCount = 0
+          }
+        }
+        return false
+      }
+      this.myRequests = append
+        ? mergeById(this.myRequests, response.data.requests)
+        : response.data.requests
+      this.myRequestsNextCursor = response.data.nextCursor
+      this.customerUnreadCount = Math.max(0, response.data.unreadCount)
+      this.myRequestsError = ''
+      return true
+    },
+    async loadRequest(requestId: string): Promise<boolean> {
+      this.requestLoading = true
+      const deviceScopeVersion = this.deviceScopeVersion
+      const response = await nuiCall<{ request: CompanyRequest }>(
+        'companies:get-request',
+        { requestId },
+      )
+      this.requestLoading = false
+      if (deviceScopeVersion !== this.deviceScopeVersion) return false
+      if (!response.success || !response.data?.request) {
+        this.requestError = response.error ?? 'request_failed'
+        return false
+      }
+      this.request = response.data.request
+      this.requestError = ''
+      this.replaceRequestSummary(response.data.request)
+      return true
+    },
+    async loadWorkContext(): Promise<boolean> {
+      this.workContextLoaded = true
+      this.workContextLoading = true
+      const response = await nuiCall<{ context: CompanyWorkContext }>(
+        'companies:work-context',
+      )
+      this.workContextLoading = false
+      if (!response.success || !response.data?.context) {
+        this.workContextError = response.error ?? 'request_failed'
+        return false
+      }
+      this.workContext = response.data.context
+      this.workUnreadCount = Math.max(0, response.data.context.unreadCount)
+      this.workContextError = ''
+      return true
+    },
+    async loadWorkQueue(
+      filter: CompanyWorkFilter,
+      append = false,
+    ): Promise<boolean> {
+      if (append && (!this.workQueueNextCursor || this.workQueueLoadingMore)) {
+        return false
+      }
+      if (append) this.workQueueLoadingMore = true
+      else this.workQueueLoading = true
+      this.workQueueFilter = filter
+      const response = await nuiCall<CompanyWorkQueuePage>(
+        'companies:work-queue',
+        {
+          cursor: append ? this.workQueueNextCursor : null,
+          filter,
+        },
+      )
+      this.workQueueLoading = false
+      this.workQueueLoadingMore = false
+      if (!response.success || !response.data) {
+        this.workQueueError = response.error ?? 'request_failed'
+        if (!append) {
+          this.workQueue = []
+          this.workQueueNextCursor = null
+        }
+        return false
+      }
+      this.workQueue = append
+        ? mergeById(this.workQueue, response.data.requests)
+        : response.data.requests
+      this.workQueueNextCursor = response.data.nextCursor
+      this.workQueueError = ''
+      return true
+    },
+    async loadMembers(): Promise<boolean> {
+      this.membersLoading = true
+      const response = await nuiCall<CompanyMembersResult>(
+        'companies:list-members',
+      )
+      this.membersLoading = false
+      if (!response.success || !response.data) {
+        this.mutationError = response.error ?? 'request_failed'
+        return false
+      }
+      this.members = response.data.members
+      this.mutationError = ''
+      return true
+    },
+    async createRequest(
+      draft: CreateCompanyRequest,
+    ): Promise<NuiResponse<CompanyRequestMutationResult>> {
+      return this.mutateRequest('companies:create-request', draft)
+    },
+    async cancelRequest(
+      requestId: string,
+      revision: number,
+    ): Promise<NuiResponse<CompanyRequestMutationResult>> {
+      return this.mutateRequest('companies:cancel-request', {
+        requestId,
+        revision,
+      })
+    },
+    async sendMessage(
+      requestId: string,
+      body: string,
+      revision: number,
+    ): Promise<NuiResponse<CompanyRequestMutationResult>> {
+      return this.mutateRequest('companies:send-message', {
+        body,
+        requestId,
+        revision,
+      })
+    },
+    async claimRequest(
+      requestId: string,
+      revision: number,
+    ): Promise<NuiResponse<CompanyRequestMutationResult>> {
+      return this.mutateRequest('companies:claim-request', {
+        requestId,
+        revision,
+      })
+    },
+    async assignRequest(
+      requestId: string,
+      memberId: string,
+      revision: number,
+    ): Promise<NuiResponse<CompanyRequestMutationResult>> {
+      return this.mutateRequest('companies:assign-request', {
+        memberId,
+        requestId,
+        revision,
+      })
+    },
+    async updateRequestStatus(
+      requestId: string,
+      status: CompanyRequestStatus,
+      revision: number,
+    ): Promise<NuiResponse<CompanyRequestMutationResult>> {
+      return this.mutateRequest('companies:update-request-status', {
+        requestId,
+        revision,
+        status,
+      })
+    },
+    async updateAvailability(
+      availability: CompanyAvailability,
+      revision: number,
+    ): Promise<NuiResponse<CompanyMutationResult>> {
+      return this.mutateCompany('companies:update-availability', {
+        availability,
+        revision,
+      })
+    },
+    async updateProfile(
+      profile: UpdateCompanyProfile,
+    ): Promise<NuiResponse<CompanyMutationResult>> {
+      return this.mutateCompany('companies:update-profile', profile)
+    },
+    async updateHours(
+      revision: number,
+      hours: CompanyHours[],
+    ): Promise<NuiResponse<CompanyMutationResult>> {
+      return this.mutateCompany('companies:update-hours', { hours, revision })
+    },
+    async updateServices(
+      revision: number,
+      services: CompanyService[],
+    ): Promise<NuiResponse<CompanyMutationResult>> {
+      return this.mutateCompany('companies:update-services', {
+        revision,
+        services,
+      })
+    },
+    async publishAnnouncement(
+      announcement: PublishCompanyAnnouncement,
+    ): Promise<NuiResponse<CompanyMutationResult>> {
+      return this.mutateCompany('companies:publish-announcement', announcement)
+    },
+    async setCallAvailability(
+      available: boolean,
+    ): Promise<NuiResponse<{ context: CompanyWorkContext }>> {
+      this.mutating = true
+      const response = await nuiCall<{ context: CompanyWorkContext }>(
+        'companies:set-call-availability',
+        { available },
+      )
+      this.mutating = false
+      if (!response.success || !response.data?.context) {
+        this.mutationError = response.error ?? 'request_failed'
+        return response
+      }
+      this.workContext = response.data.context
+      this.workUnreadCount = Math.max(0, response.data.context.unreadCount)
+      this.mutationError = ''
+      return response
+    },
+    async callCustomer(requestId: string): Promise<NuiResponse<PhoneCall>> {
+      this.mutating = true
+      const response = await nuiCall<PhoneCall>('companies:call-customer', {
+        requestId,
+      })
+      this.mutating = false
+      this.mutationError = response.success
+        ? ''
+        : (response.error ?? 'request_failed')
+      return response
+    },
+    async mutateRequest(
+      endpoint: string,
+      payload: Record<string, unknown>,
+    ): Promise<NuiResponse<CompanyRequestMutationResult>> {
+      this.mutating = true
+      const deviceScopeVersion = this.deviceScopeVersion
+      const response = await nuiCall<CompanyRequestMutationResult>(
+        endpoint,
+        payload,
+      )
+      this.mutating = false
+      if (deviceScopeVersion !== this.deviceScopeVersion) {
+        return { success: false, error: 'device_changed' }
+      }
+      if (!response.success || !response.data?.request) {
+        this.mutationError = response.error ?? 'request_failed'
+        return response
+      }
+      this.request = response.data.request
+      this.replaceRequestSummary(response.data.request)
+      if (response.data.context) {
+        this.workContext = response.data.context
+        this.workUnreadCount = Math.max(0, response.data.context.unreadCount)
+      }
+      this.mutationError = ''
+      return response
+    },
+    async mutateCompany(
+      endpoint: string,
+      payload: Record<string, unknown>,
+    ): Promise<NuiResponse<CompanyMutationResult>> {
+      this.mutating = true
+      const response = await nuiCall<CompanyMutationResult>(endpoint, payload)
+      this.mutating = false
+      if (!response.success || !response.data?.company) {
+        this.mutationError = response.error ?? 'request_failed'
+        return response
+      }
+      this.company = response.data.company
+      this.replaceCompanySummary(response.data.company)
+      if (this.workContext) this.workContext.company = response.data.company
+      if (response.data.context) {
+        this.workContext = response.data.context
+        this.workUnreadCount = Math.max(0, response.data.context.unreadCount)
+      }
+      this.mutationError = ''
+      return response
+    },
+    replaceCompanySummary(company: Company): void {
+      const index = this.directory.findIndex((item) => item.id === company.id)
+      if (index >= 0) this.directory[index] = company
+    },
+    replaceRequestSummary(request: CompanyRequest): void {
+      const lists = [this.myRequests, this.workQueue]
+      for (const list of lists) {
+        const index = list.findIndex((item) => item.id === request.id)
+        if (index >= 0) list[index] = request
+      }
+      if (this.workContext) {
+        const contextLists = [
+          this.workContext.ownRequests,
+          this.workContext.recentRequests,
+        ]
+        for (const list of contextLists) {
+          const index = list.findIndex((item) => item.id === request.id)
+          if (index >= 0) list[index] = request
+        }
+      }
+    },
+    resetRequest(): void {
+      this.request = null
+      this.requestError = ''
+    },
+    resetDeviceScope(): void {
+      this.deviceScopeVersion += 1
+      this.customerUnreadCount = 0
+      this.myRequests = []
+      this.myRequestsError = ''
+      this.myRequestsLoaded = false
+      this.myRequestsLoading = false
+      this.myRequestsLoadingMore = false
+      this.myRequestsNextCursor = null
+      this.request = null
+      this.requestError = ''
+      this.requestLoading = false
+    },
+  },
+})
diff --git a/frontend/src/stores/notifications.test.ts b/frontend/src/stores/notifications.test.ts
index 86b8578..e38b885 100644
--- a/frontend/src/stores/notifications.test.ts
+++ b/frontend/src/stores/notifications.test.ts
@@ -145,10 +145,11 @@ describe('notifications store', () => {
     const notifications = useNotificationsStore()
 
     notifications.show({
-      appId: 'mail',
+      appId: 'companies',
       device: device('111'),
+      route: '/apps/companies?requestId=request-1&area=customer',
       text: 'Store while closed',
-      title: 'Mail',
+      title: 'Companies',
     })
     await Promise.resolve()
     await Promise.resolve()
@@ -158,9 +159,10 @@ describe('notifications store', () => {
       payload: {
         items: [
           expect.objectContaining({
-            appId: 'mail',
+            appId: 'companies',
+            route: '/apps/companies?requestId=request-1&area=customer',
             text: 'Store while closed',
-            title: 'Mail',
+            title: 'Companies',
           }),
         ],
         version: 1,
@@ -247,10 +249,7 @@ describe('notifications store', () => {
     })
     const notifications = useNotificationsStore()
 
-    notifications.hydrate(
-      phone.device?.data.notifications?.payload,
-      '111',
-    )
+    notifications.hydrate(phone.device?.data.notifications?.payload, '111')
     vi.advanceTimersByTime(60_000)
 
     expect(notifications.lockScreenNotifications[0].text).toBe('Saved message')
diff --git a/frontend/src/stores/notifications.ts b/frontend/src/stores/notifications.ts
index d92ddfc..1487a2c 100644
--- a/frontend/src/stores/notifications.ts
+++ b/frontend/src/stores/notifications.ts
@@ -5,7 +5,10 @@ import { isPhoneAppId } from '@/config/apps'
 import { usePhoneStore } from '@/stores/phone'
 import type { LaunchablePhoneAppId } from '@/types/apps'
 import { nuiCall } from '@/utils/nui'
-import type { PhonePreferencesV1 } from '@/utils/preferences'
+import {
+  DEFAULT_APP_NOTIFICATION_PREFERENCES,
+  type PhonePreferencesV1,
+} from '@/utils/preferences'
 import { playPhoneTone, type PhoneToneId } from '@/utils/tones'
 
 export type PhoneNotificationDevice = {
@@ -19,6 +22,7 @@ export type PhoneNotificationInput = {
   critical?: boolean
   device?: PhoneNotificationDevice
   persistent?: boolean
+  route?: string
   sound?: PhoneToneId
   subtitle?: string
   text: string
@@ -31,7 +35,7 @@ export type PhoneNotification = PhoneNotificationInput & {
 
 type PersistedPhoneNotification = Pick<
   PhoneNotification,
-  'appId' | 'id' | 'subtitle' | 'text' | 'title'
+  'appId' | 'id' | 'route' | 'subtitle' | 'text' | 'title'
 >
 
 type PersistedNotificationsV1 = {
@@ -73,9 +77,10 @@ export const useNotificationsStore = defineStore('notifications', () => {
 
   function persist(imei: string): void {
     const items = (lockScreenQueues.value[imei] ?? []).map(
-      ({ appId, id, subtitle, text, title }) => ({
+      ({ appId, id, route, subtitle, text, title }) => ({
         appId,
         id,
+        ...(route ? { route } : {}),
         ...(subtitle ? { subtitle } : {}),
         text,
         title,
@@ -108,7 +113,9 @@ export const useNotificationsStore = defineStore('notifications', () => {
         (payload as Partial<PersistedNotificationsV1>).version !== 1 ||
         !Array.isArray((payload as Partial<PersistedNotificationsV1>).items)
       ) {
-        console.error('[Phone notifications] Invalid persisted notification data.')
+        console.error(
+          '[Phone notifications] Invalid persisted notification data.',
+        )
       } else {
         for (const item of (payload as PersistedNotificationsV1).items) {
           if (
@@ -117,14 +124,21 @@ export const useNotificationsStore = defineStore('notifications', () => {
             !isPhoneAppId(item.appId) ||
             typeof item?.text !== 'string' ||
             typeof item?.title !== 'string' ||
+            (item.route !== undefined &&
+              (typeof item.route !== 'string' ||
+                (item.route !== `/apps/${item.appId}` &&
+                  !item.route.startsWith(`/apps/${item.appId}?`)))) ||
             (item.subtitle !== undefined && typeof item.subtitle !== 'string')
           ) {
-            console.error('[Phone notifications] Ignored an invalid persisted notification.')
+            console.error(
+              '[Phone notifications] Ignored an invalid persisted notification.',
+            )
             continue
           }
           stored.push({
             appId: item.appId,
             id: item.id,
+            ...(item.route ? { route: item.route } : {}),
             ...(item.subtitle ? { subtitle: item.subtitle } : {}),
             text: item.text,
             title: item.title,
@@ -161,7 +175,8 @@ export const useNotificationsStore = defineStore('notifications', () => {
   function activate(notification: PhoneNotification): void {
     const preferences = notification.device?.preferences ?? phone.preferences
     const appPreferences =
-      preferences.settings.notifications[notification.appId]
+      preferences.settings.notifications[notification.appId] ??
+      DEFAULT_APP_NOTIFICATION_PREFERENCES
     if (appPreferences.sounds || notification.critical) {
       const sound = notification.sound ?? preferences.settings.notificationSound
       const volume = notification.critical
@@ -218,15 +233,19 @@ export const useNotificationsStore = defineStore('notifications', () => {
     if (current.value) dismiss(current.value.id)
   }
 
-  function dismissFromLockScreen(id: string): void {
+  function dismissFromLockScreen(
+    id: string,
+    targetImei = phone.device?.imei,
+  ): void {
     dismiss(id)
-    const imei = phone.device?.imei
-    if (!imei) return
-    const notifications = lockScreenQueues.value[imei]
+    if (!targetImei) return
+    const notifications = lockScreenQueues.value[targetImei]
     if (!notifications) return
-    const index = notifications.findIndex((notification) => notification.id === id)
+    const index = notifications.findIndex(
+      (notification) => notification.id === id,
+    )
     if (index >= 0) notifications.splice(index, 1)
-    persist(imei)
+    persist(targetImei)
   }
 
   function clearLockScreen(): void {
@@ -248,12 +267,14 @@ export const useNotificationsStore = defineStore('notifications', () => {
   }
 
   function show(input: PhoneNotificationInput): string | null {
-    const preferences = input.device?.preferences ?? phone.preferences
-    const appPreferences = preferences.settings.notifications[input.appId]
-    if (!appPreferences) {
+    if (!isPhoneAppId(input.appId)) {
       console.error(`[Phone notifications] Unknown app: ${input.appId}`)
       return null
     }
+    const preferences = input.device?.preferences ?? phone.preferences
+    const appPreferences =
+      preferences.settings.notifications[input.appId] ??
+      DEFAULT_APP_NOTIFICATION_PREFERENCES
     if (!input.critical && preferences.settings.focusMode) return null
     if (!input.critical && !appPreferences.enabled) {
       return null
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index e9288b9..94c0a6b 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -12,6 +12,7 @@ import { nuiCall } from '@/utils/nui'
 import type { NuiResponse } from '@/utils/nui'
 import {
   DEFAULT_PHONE_PREFERENCES,
+  ensureAppNotificationPreferences,
   parsePhonePreferences,
   type AppNotificationPreferences,
   type PhonePreferencesV1,
@@ -38,8 +39,314 @@ export type PhoneOpenPayload = {
 
 const namespaceQueues = new Map<string, Promise<void>>()
 
+const companiesFallbackLocales = {
+  name: 'Companies',
+  navigation: 'Companies navigation',
+  actions: 'Request actions',
+  request: 'Service Request',
+  verified: 'Verified company',
+  back: 'Back',
+  close: 'Close',
+  tryAgain: 'Try Again',
+  loadMore: 'Load More',
+  routeSet: 'GPS route set.',
+  tabs: {
+    directory: 'Discover',
+    requests: 'Requests',
+    work: 'Work',
+  },
+  availability: {
+    available: 'Available',
+    busy: 'Busy',
+    closed: 'Closed',
+  },
+  requestStatuses: {
+    new: 'New',
+    assigned: 'Assigned',
+    in_progress: 'In Progress',
+    waiting_customer: 'Waiting',
+    completed: 'Completed',
+    cancelled: 'Cancelled',
+  },
+  roles: {
+    employee: 'Employee',
+    manager: 'Manager',
+  },
+  categories: {
+    gastronomy: 'Food & Drink',
+    vehicles: 'Vehicles',
+    transport: 'Transport',
+    crafts: 'Trades',
+    retail: 'Retail',
+    real_estate: 'Real Estate',
+    media: 'Media',
+    nightlife: 'Nightlife',
+    public_services: 'Public Services',
+    emergency: 'Emergency Services',
+    medical: 'Medical',
+    mechanics: 'Mechanics',
+    government: 'Government',
+  },
+  days: {
+    monday: 'Monday',
+    tuesday: 'Tuesday',
+    wednesday: 'Wednesday',
+    thursday: 'Thursday',
+    friday: 'Friday',
+    saturday: 'Saturday',
+    sunday: 'Sunday',
+  },
+  directory: {
+    searchPlaceholder: 'Search companies or services',
+    categories: 'Company categories',
+    allCategories: 'All',
+    allCompanies: 'All Companies',
+    availableNow: 'Available now',
+    availableNowHint: 'Only show companies taking calls right now.',
+    availableSection: 'Available Now',
+    moreFilters: 'More filters',
+    hasLocation: 'Location',
+    acceptsRequests: 'Requests',
+    resetFilters: 'Reset Filters',
+  },
+  loading: {
+    directory: 'Loading companies...',
+    profile: 'Loading company profile...',
+    request: 'Loading request...',
+    requests: 'Loading your requests...',
+    work: 'Loading workspace...',
+  },
+  states: {
+    directoryError: 'Companies are unavailable',
+    requestsError: 'Requests are unavailable',
+    workError: 'Workspace unavailable',
+    profileError: 'Company unavailable',
+    requestError: 'Request unavailable',
+    noCompanies: 'No companies listed',
+    noCompaniesBody: 'Public companies will appear here when configured.',
+    noResults: 'No matching companies',
+    noResultsBody: 'Try another search or reset your filters.',
+    noOpenRequests: 'No open requests',
+    noClosedRequests: 'No completed requests',
+    noRequestsBody: 'Requests you create with a company will appear here.',
+  },
+  actionUnavailable: {
+    call: 'This company cannot be called right now.',
+    message: 'This service line does not accept text messages.',
+    route: 'This company has no public location.',
+    request: 'This company is not accepting service requests.',
+  },
+  profile: {
+    updated: 'Status updated {time}',
+    announcement: 'Latest Update',
+    location: 'Location',
+    noLocation: 'No public location',
+    hours: 'Opening Hours',
+    closed: 'Closed',
+    byAvailability: 'Open by availability',
+    services: 'Services',
+    noServices: 'No public services listed',
+    call: 'Call',
+    message: 'Message',
+    route: 'Route',
+    request: 'Request',
+  },
+  composer: {
+    title: 'New Service Request',
+    chooseService: 'Choose a Service',
+    subject: 'Subject',
+    subjectPlaceholder: 'What do you need?',
+    description: 'Details',
+    descriptionPlaceholder:
+      'Describe what happened and how the company can help.',
+    contact: 'Contact number',
+    registeredSim: 'Replies go to your registered SIM {number}.',
+    registeredSimRequired: 'A registered SIM is required to send a request.',
+    addPhotos: 'Add Photos ({count}/3)',
+    selectedPhoto: 'Selected request photo',
+    removePhoto: 'Remove photo',
+    review: 'Review Request',
+    confirmTitle: 'Send this request?',
+    confirmBody: 'Send your {service} request to {company}.',
+    edit: 'Keep Editing',
+    send: 'Send Request',
+  },
+  requests: {
+    open: 'Open',
+    closed: 'Completed',
+    findCompany: 'Find a Company',
+    generalService: 'General service',
+    attachments: 'Request photos',
+    attachedPhoto: 'Attached request photo',
+    timeline: 'Timeline',
+    conversation: 'Conversation',
+    noMessages: 'No replies yet',
+    replyPlaceholder: 'Write a reply',
+    sendReply: 'Send reply',
+    call: 'Call Company',
+    cancel: 'Cancel Request',
+    cancelTitle: 'Cancel this request?',
+    cancelBody: 'The company will be notified and can no longer complete it.',
+    keep: 'Keep Request',
+    cancelConfirm: 'Cancel Request',
+  },
+  timeline: {
+    created: 'Request created',
+    assigned: 'Request assigned',
+    cancelled: 'Request cancelled',
+    completed: 'Request completed',
+    statusChanged: 'Status changed to {status}',
+  },
+  time: {
+    justNow: 'just now',
+    minutesAgo: '{count} min ago',
+    hoursAgo: '{count} hr ago',
+    daysAgo: '{count} days ago',
+  },
+  work: {
+    notAuthorized: 'No company workspace',
+    notAuthorizedBody:
+      'Your current job is not connected to a configured company.',
+    workspace: 'Company Workspace',
+    publicAvailability: 'Public Availability',
+    takeCalls: 'Take company calls',
+    takeCallsBody: 'Route new service-line calls to this active SIM.',
+    overview: 'Today at a Glance',
+    metrics: {
+      new: 'New',
+      assigned: 'Mine',
+      waiting: 'Waiting',
+      completedToday: 'Done Today',
+    },
+    queue: 'Request Queue',
+    filters: {
+      new: 'New',
+      assigned: 'Mine',
+      in_progress: 'In Progress',
+      waiting_customer: 'Waiting',
+      completed: 'Done',
+    },
+    unassigned: 'Unassigned',
+    emptyQueue: 'Queue is clear',
+    emptyQueueBody: 'No requests match this filter.',
+  },
+  workActions: {
+    claim: 'Claim Request',
+    assign: 'Assign Employee',
+    callCustomer: 'Call Customer',
+    setStatus: 'Set status: {status}',
+  },
+  assignment: {
+    title: 'Assign Employee',
+    online: 'Online',
+    offline: 'Offline',
+    unknownMember: 'Unknown employee',
+    confirm: 'Assign Request',
+  },
+  assignmentLabels: {
+    you: 'Assigned to you',
+    assigned: 'Assigned to a colleague',
+  },
+  messageAuthors: {
+    you: 'You',
+    customer: 'Customer',
+    company: 'Company',
+  },
+  manager: {
+    title: 'Company Profile',
+    subtitle: 'Manage public information, services, and announcements.',
+    revision: 'Server revision {revision}',
+    availability: 'Availability',
+    profile: 'Public Profile',
+    description: 'Description',
+    descriptionPlaceholder: 'Describe the company and what it offers.',
+    phoneNumber: 'Service number',
+    phoneNumberManaged: 'Configured by the server and cannot be edited here.',
+    noPhoneNumber: 'No service number configured',
+    chooseCover: 'Choose cover photo',
+    chooseLogo: 'Choose logo',
+    coverPhoto: 'Company cover photo',
+    logoPhoto: 'Company logo',
+    locationLabel: 'Location name',
+    locationReady: 'A map position is attached to this profile.',
+    useCurrentLocation: 'Use Current Location',
+    address: 'Address',
+    district: 'District',
+    acceptRequests: 'Accept service requests',
+    acceptRequestsBody: 'Allow registered SIMs to open structured requests.',
+    saveProfile: 'Save Profile',
+    hours: 'Opening Hours',
+    dayOpen: 'Company is open on this day',
+    opensAt: 'Opens',
+    closesAt: 'Closes',
+    saveHours: 'Save Hours',
+    services: 'Services',
+    serviceTitle: 'Service name',
+    serviceDescription: 'Description',
+    priceText: 'Price text',
+    serviceActive: 'Publicly visible',
+    serviceRequests: 'Accept requests for this service',
+    removeService: 'Remove Service',
+    addService: 'Add Service',
+    saveServices: 'Save Services',
+    announcement: 'Current Announcement',
+    announcementText: 'Announcement',
+    announcementPlaceholder: 'Share a short, timely update.',
+    expiresAt: 'Expires at',
+    publish: 'Publish Announcement',
+  },
+  feedback: {
+    requestCreated: 'Request sent.',
+    requestCancelled: 'Request cancelled.',
+    requestClaimed: 'Request claimed.',
+    requestAssigned: 'Request assigned.',
+    statusUpdated: 'Request status updated.',
+    availabilityUpdated: 'Public availability updated.',
+    locationUpdated: 'Current location selected.',
+    callsEnabled: 'Company calls enabled.',
+    callsDisabled: 'Company calls disabled.',
+    profileSaved: 'Company profile saved.',
+    hoursSaved: 'Opening hours saved.',
+    servicesSaved: 'Services saved.',
+    announcementPublished: 'Announcement published.',
+  },
+  conflict: {
+    title: 'Newer changes are available',
+    body: 'Another manager updated this information. Reload before saving again.',
+    reload: 'Reload',
+  },
+  notifications: {
+    newRequest: 'New company request',
+    requestUpdated: 'A company request was updated.',
+    newMessage: 'New reply to your company request.',
+    assigned: 'A company request was assigned to you.',
+  },
+  errors: {
+    anonymous_sim: 'A registered SIM is required for service requests.',
+    call_unavailable: 'This service line is currently unavailable.',
+    company_not_found: 'This company is no longer available.',
+    invalid_profile: 'Check the company profile fields.',
+    invalid_request: 'Check the subject and request details.',
+    invalid_media: 'One or more attached photos are unavailable.',
+    invalid_expiration: 'Choose a valid announcement expiration.',
+    invalid_service: 'This service is no longer available.',
+    invalid_status: 'That status change is not allowed.',
+    messaging_unavailable: 'This company does not accept text messages.',
+    no_sim: 'Insert a SIM card to continue.',
+    not_authorized: 'You are not authorized for this company action.',
+    rate_limited: 'Please wait before trying again.',
+    request_not_found: 'This request is no longer available.',
+    revision_conflict:
+      'The data changed on another device. Reload and try again.',
+    service_unavailable: 'The Companies service is temporarily unavailable.',
+    too_many_open_requests: 'You already have too many open requests.',
+    request_failed: 'Companies could not complete the request.',
+  },
+}
+
 const defaultLocales: LocaleTree = {
   Apps: {
+    companies: companiesFallbackLocales,
     crewlink: {
       name: 'CrewLink',
       connecting: 'Connecting your crew...',
@@ -62,8 +369,7 @@ const defaultLocales: LocaleTree = {
       noGroupBody:
         'Create a crew or join friends with a private invitation code.',
       createGroup: 'Create Group',
-      createGroupBody:
-        'Give your crew a recognizable name and signal colour.',
+      createGroupBody: 'Give your crew a recognizable name and signal colour.',
       joinGroup: 'Join Group',
       joinWithCode: 'Join with Code',
       joinWithCodeBody:
@@ -114,8 +420,7 @@ const defaultLocales: LocaleTree = {
       invite: 'Invite',
       inviteSent: 'Invitation sent to @{username}.',
       nobodyNearby: 'Nobody in range',
-      nobodyNearbyBody:
-        'Move closer to another CrewLink user and scan again.',
+      nobodyNearbyBody: 'Move closer to another CrewLink user and scan again.',
       scanAgain: 'Scan Again',
       liveCoordination: 'Live coordination',
       noPings: 'No active pings',
@@ -1066,6 +1371,8 @@ const defaultLocales: LocaleTree = {
       message: 'Message',
       send: 'Send',
       details: 'Details',
+      officialContact: 'Official company contact',
+      messagingUnavailable: 'This company contact does not accept messages.',
       filterUnread: 'Show Unread Messages',
       smsLabel: 'Text Message · SMS',
       photo: 'Photo',
@@ -1135,6 +1442,7 @@ const defaultLocales: LocaleTree = {
         gif_provider_failed: 'GIF search is temporarily unavailable.',
         self_message: 'You cannot message your own number.',
         recipient_not_found: 'That number is unavailable.',
+        messaging_unavailable: 'This company contact does not accept messages.',
         no_sim: 'This phone has no SIM card.',
         rate_limited: 'Too many messages. Try again in a minute.',
         request_failed: 'Messages are temporarily unavailable.',
@@ -1170,6 +1478,7 @@ const defaultLocales: LocaleTree = {
       editContact: 'Edit Contact',
       contactName: 'Name',
       phoneNumber: 'Phone Number',
+      officialContact: 'Official company contact',
       call: 'Call',
       calling: 'calling...',
       incoming: 'Incoming Call',
@@ -1198,10 +1507,13 @@ const defaultLocales: LocaleTree = {
       errors: {
         invalid_contact: 'Enter a name and valid phone number.',
         invalid_number: 'Enter a valid phone number.',
+        invalid_sim: 'The active SIM card is unavailable.',
         no_sim: 'This phone has no SIM card.',
         airplane_mode: 'Turn off Airplane Mode to make calls.',
         self_call: 'You cannot call your own number.',
         busy: 'The line is busy.',
+        company_unavailable: 'This company service line is unavailable.',
+        readonly_contact: 'Official company contacts cannot be changed.',
         rate_limited: 'Too many calls. Try again in a minute.',
         voice_unavailable: 'The configured phone voice service is unavailable.',
         inventory_full: 'There is no room for the ejected SIM card.',
@@ -2973,7 +3285,11 @@ const defaultLocales: LocaleTree = {
     stop: 'Stop',
     use: 'Use',
   },
-  Notifications: { now: 'now' },
+  Notifications: {
+    clearAll: 'Clear All',
+    now: 'now',
+    open: 'Open notification',
+  },
   LockScreen: {
     label: 'Lock Screen',
     flashlight: 'Flashlight',
@@ -3173,6 +3489,9 @@ export const usePhoneStore = defineStore('phone', {
     setLaunchOrigin(origin: AppLaunchOrigin | null): void {
       this.launchOrigin = origin
     },
+    ensureAppNotificationPreferences(appIds: LaunchablePhoneAppId[]): void {
+      ensureAppNotificationPreferences(this.preferences, appIds)
+    },
     setAppNotification(
       appId: LaunchablePhoneAppId,
       key: keyof AppNotificationPreferences,
diff --git a/frontend/src/types/apps.ts b/frontend/src/types/apps.ts
index 6483166..a21a28d 100644
--- a/frontend/src/types/apps.ts
+++ b/frontend/src/types/apps.ts
@@ -1,6 +1,6 @@
 import type { Component } from 'vue'
 
-export type PhoneAppId =
+export type BuiltinPhoneAppId =
   | 'phone'
   | 'messages'
   | 'darkchat'
@@ -36,7 +36,15 @@ export type PhoneAppId =
   | 'skyride'
   | 'feather'
   | 'crewlink'
+  | 'companies'
 
+declare const externalPhoneAppId: unique symbol
+
+export type ExternalPhoneAppId = string & {
+  readonly [externalPhoneAppId]: true
+}
+
+export type PhoneAppId = BuiltinPhoneAppId | ExternalPhoneAppId
 export type LaunchablePhoneAppId = PhoneAppId
 
 export type PhoneAppCategory =
@@ -54,21 +62,107 @@ export type AppLaunchOrigin = {
   y: number
 }
 
-export type PhoneAppDefinition = {
+type PhoneAppDefinitionBase = {
   category: PhoneAppCategory
-  component: Component | null
   dockOrder: number | null
   gridOrder: number
   icon: Component
   iconClass: string
   iconImage: string
-  id: PhoneAppId
-  labelKey: string
-  route: `/apps/${LaunchablePhoneAppId}` | null
 }
 
-export type LaunchablePhoneAppDefinition = PhoneAppDefinition & {
+export type BuiltinPhoneAppDefinition = PhoneAppDefinitionBase & {
   component: Component
-  id: LaunchablePhoneAppId
-  route: `/apps/${LaunchablePhoneAppId}`
+  id: BuiltinPhoneAppId
+  kind?: 'builtin'
+  labelKey: string
+  route: `/apps/${BuiltinPhoneAppId}`
+}
+
+export type CustomAppBridgeMode = 'legacy' | 'sky'
+
+export type ExternalPhoneAppDefinition = PhoneAppDefinitionBase & {
+  bridgeMode: CustomAppBridgeMode
+  bundled: boolean
+  capabilities: string[]
+  compatibility: Record<string, unknown>
+  component: null
+  defaultInstalled: boolean
+  description: string
+  developer: string
+  iconBackground?: string
+  id: ExternalPhoneAppId
+  kind: 'external'
+  name: string
+  orientation: 'landscape' | 'portrait'
+  ownerResource: string
+  readyTimeoutMs: number
+  removable: boolean
+  route: `/apps/${ExternalPhoneAppId}`
+  ui: string
+}
+
+export type PhoneAppDefinition =
+  | BuiltinPhoneAppDefinition
+  | ExternalPhoneAppDefinition
+
+export type LaunchablePhoneAppDefinition = PhoneAppDefinition
+
+export type CustomAppCatalogPayload = {
+  apps: unknown[]
+}
+
+export type CustomAppHostMessage = {
+  payload: unknown
+  sequence: number
+}
+
+export type CustomAppOpenRequest = {
+  data?: unknown
+  sequence: number
+}
+
+export type SkyPhoneAppCapability =
+  | 'app.close'
+  | 'app.open'
+  | 'device.storage.get'
+  | 'device.storage.set'
+  | 'locale.read'
+  | 'notification.create'
+  | 'theme.read'
+
+export type SkyPhoneAppBridgeMethod =
+  | 'app.close'
+  | 'app.open'
+  | 'device.storage.get'
+  | 'device.storage.set'
+  | 'notification.create'
+
+export type SkyPhoneAppBridgeRequest = {
+  method: string
+  payload?: unknown
+  requestId: string
+}
+
+export type SkyPhoneAppBridgeResponse = {
+  data?: unknown
+  error?: string
+  requestId: string
+  success: boolean
+}
+
+export type SkyPhoneAppContextV1 = {
+  appId: string
+  capabilities: SkyPhoneAppCapability[]
+  colorScheme: 'dark' | 'light'
+  language: string
+  locale: Record<string, unknown>
+  phoneScale: number
+  protocolVersion: 1
+  safeArea: {
+    bottom: number
+    left: number
+    right: number
+    top: number
+  }
 }
diff --git a/frontend/src/types/companies.ts b/frontend/src/types/companies.ts
new file mode 100644
index 0000000..4807571
--- /dev/null
+++ b/frontend/src/types/companies.ts
@@ -0,0 +1,271 @@
+export type CompanyAvailability = 'available' | 'busy' | 'closed'
+
+export type CompanyDirectorySort = 'name' | 'relevance' | 'updated'
+
+export type CompanyRequestList = 'closed' | 'open'
+
+export type CompanyRequestStatus =
+  | 'assigned'
+  | 'cancelled'
+  | 'completed'
+  | 'in_progress'
+  | 'new'
+  | 'waiting_customer'
+
+export type CompanyWorkFilter =
+  | 'assigned'
+  | 'completed'
+  | 'in_progress'
+  | 'new'
+  | 'waiting_customer'
+
+export type CompanyRequestEventType =
+  | 'assigned'
+  | 'cancelled'
+  | 'completed'
+  | 'created'
+  | 'status_changed'
+
+export type CompanyCategory = {
+  id: string
+  name: string
+}
+
+export type CompanyCoordinates = {
+  x: number
+  y: number
+  z: number
+}
+
+export type CompanyLocation = {
+  address: string
+  coords: CompanyCoordinates
+  district: string
+  label: string
+}
+
+export type CompanyAnnouncement = {
+  body: string
+  expiresAt: string | null
+  publishedAt: string
+}
+
+export type CompanyService = {
+  acceptsRequests: boolean
+  active: boolean
+  description: string
+  id: string
+  priceText: string | null
+  title: string
+}
+
+export type CompanyHours = {
+  closesAt: string | null
+  day: number
+  isClosed: boolean
+  opensAt: string | null
+}
+
+export type CompanySummary = {
+  acceptsRequests: boolean
+  announcement: CompanyAnnouncement | null
+  availability: CompanyAvailability
+  availabilityUpdatedAt: string
+  canCall: boolean
+  canMessage: boolean
+  categoryId: string
+  categoryName: string
+  description: string
+  id: string
+  location: CompanyLocation | null
+  logoUrl: string | null
+  name: string
+  phoneNumber: string | null
+  serviceSummary: string
+  verified: boolean
+}
+
+export type Company = CompanySummary & {
+  coverUrl: string | null
+  hours: CompanyHours[]
+  revision: number
+  services: CompanyService[]
+}
+
+export type CompanyDirectoryFilters = {
+  acceptsRequests: boolean
+  availability: CompanyAvailability | null
+  categoryId: string | null
+  hasLocation: boolean
+  search: string
+  sort: CompanyDirectorySort
+}
+
+export type CompanyDirectoryPage = {
+  categories: CompanyCategory[]
+  companies: CompanySummary[]
+  nextCursor: string | null
+}
+
+export type CompanyRequestActions = {
+  allowedStatuses: CompanyRequestStatus[]
+  canAssign: boolean
+  canCall: boolean
+  canCancel: boolean
+  canClaim: boolean
+  canReply: boolean
+}
+
+export type CompanyRequestSummary = {
+  assignedLabel: 'assigned' | 'you' | null
+  companyId: string
+  companyLogoUrl: string | null
+  companyName: string
+  createdAt: string
+  id: string
+  serviceId: string | null
+  serviceName: string | null
+  status: CompanyRequestStatus
+  subject: string
+  unreadCount: number
+  updatedAt: string
+}
+
+export type CompanyRequestMessage = {
+  author: 'company' | 'customer'
+  authorLabel: 'company' | 'customer' | 'you'
+  body: string
+  createdAt: string
+  id: string
+  isMine: boolean
+}
+
+export type CompanyRequestMedia = {
+  id: number
+  url: string
+}
+
+export type CompanyRequestEvent = {
+  createdAt: string
+  id: string
+  status: CompanyRequestStatus | null
+  type: CompanyRequestEventType
+}
+
+export type CompanyRequest = CompanyRequestSummary & {
+  actions: CompanyRequestActions
+  description: string
+  events: CompanyRequestEvent[]
+  media: CompanyRequestMedia[]
+  messages: CompanyRequestMessage[]
+  phoneNumber: string | null
+  revision: number
+}
+
+export type CompanyRequestPage = {
+  nextCursor: string | null
+  requests: CompanyRequestSummary[]
+  unreadCount: number
+}
+
+export type CompanyWorkMetrics = {
+  assigned: number
+  completedToday: number
+  new: number
+  waiting: number
+}
+
+export type CompanyWorkPermissions = {
+  canAssign: boolean
+  canManageAnnouncement: boolean
+  canManageHours: boolean
+  canManageProfile: boolean
+  canManageServices: boolean
+  canSetAvailability: boolean
+  canTakeCalls: boolean
+}
+
+export type CompanyWorkContext = {
+  authorized: boolean
+  callAvailable: boolean
+  company: Company | null
+  metrics: CompanyWorkMetrics
+  ownRequests: CompanyRequestSummary[]
+  permissions: CompanyWorkPermissions
+  recentRequests: CompanyRequestSummary[]
+  role: 'employee' | 'manager' | null
+  unreadCount: number
+}
+
+export type CompanyWorkQueuePage = {
+  nextCursor: string | null
+  requests: CompanyRequestSummary[]
+}
+
+export type CompanyMember = {
+  id: string
+  name: string
+  online: boolean
+  role: string
+}
+
+export type CompanyMembersResult = {
+  members: CompanyMember[]
+}
+
+export type CreateCompanyRequest = {
+  companyId: string
+  description: string
+  mediaIds: string[]
+  serviceId: string
+  subject: string
+}
+
+export type CompanyRequestMutationResult = {
+  context?: CompanyWorkContext
+  request: CompanyRequest
+}
+
+export type CompanyMutationResult = {
+  company: Company
+  context?: CompanyWorkContext
+}
+
+export type UpdateCompanyProfile = {
+  acceptsRequests: boolean
+  address: string
+  coords?: CompanyCoordinates
+  coverMediaId?: number
+  description: string
+  district: string
+  logoMediaId?: number
+  locationLabel: string
+  revision: number
+}
+
+export type UpdateCompanyHours = {
+  hours: CompanyHours[]
+  revision: number
+}
+
+export type UpdateCompanyServices = {
+  revision: number
+  services: CompanyService[]
+}
+
+export type PublishCompanyAnnouncement = {
+  body: string
+  expiresAt: string | null
+  revision: number
+}
+
+export type CompanyUnreadCounts = {
+  customer?: number
+  work?: number
+}
+
+export type CompanyChangedPayload = {
+  area: 'all' | 'customer' | 'directory' | 'work'
+  companyId?: string
+  requestId?: string
+}
diff --git a/frontend/src/types/phone.ts b/frontend/src/types/phone.ts
index d0ffa84..c445a23 100644
--- a/frontend/src/types/phone.ts
+++ b/frontend/src/types/phone.ts
@@ -8,11 +8,18 @@ export type PhoneSim = {
 }
 
 export type PhoneContact = {
+  canCall?: boolean
+  canMessage?: boolean
+  companyId?: string
   created_at?: string
   id: string
+  icon?: string
   name: string
   phone_number: string
+  readonly?: boolean
+  source?: 'personal' | 'company'
   updated_at?: string
+  verified?: boolean
 }
 
 export type CallDirection = 'incoming' | 'outgoing'
diff --git a/frontend/src/utils/customAppBridge.test.ts b/frontend/src/utils/customAppBridge.test.ts
new file mode 100644
index 0000000..db1a77d
--- /dev/null
+++ b/frontend/src/utils/customAppBridge.test.ts
@@ -0,0 +1,268 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  createCustomAppBridgeRequestHandler,
+  getSkyPhoneAppCapabilities,
+  shouldReportCustomAppReady,
+  type CustomAppBridgeNotification,
+  type CustomAppBridgeTarget,
+} from '@/utils/customAppBridge'
+
+const source = {
+  capabilities: [] as string[],
+  id: 'source-app',
+}
+const createNotification =
+  vi.fn<(input: CustomAppBridgeNotification) => string | null>()
+const prepareExternalOpen = vi.fn<(appId: string, data?: unknown) => boolean>()
+const resolveTarget = vi.fn<(appId: string) => CustomAppBridgeTarget | null>()
+const storageCall = vi.fn()
+
+function createHandler() {
+  return createCustomAppBridgeRequestHandler({
+    createNotification,
+    getSourceApp: () => source,
+    prepareExternalOpen,
+    resolveTarget,
+    storageCall,
+  })
+}
+
+describe('custom app bridge', () => {
+  beforeEach(() => {
+    source.capabilities = []
+    createNotification.mockReset().mockReturnValue('notification-1')
+    prepareExternalOpen.mockReset().mockReturnValue(true)
+    resolveTarget.mockReset().mockReturnValue(null)
+    storageCall.mockReset().mockResolvedValue({ success: true })
+  })
+
+  it('advertises only implemented methods granted by manifest permissions', () => {
+    expect(
+      getSkyPhoneAppCapabilities([
+        'app.close',
+        'device.storage',
+        'notifications',
+        'location.read',
+      ]),
+    ).toEqual([
+      'app.close',
+      'device.storage.get',
+      'device.storage.set',
+      'notification.create',
+    ])
+  })
+
+  it('reports ready lifecycle from load only for legacy frames', () => {
+    expect(shouldReportCustomAppReady('legacy', 'frame-load')).toBe(true)
+    expect(shouldReportCustomAppReady('legacy', 'bridge-ready')).toBe(false)
+    expect(shouldReportCustomAppReady('sky', 'frame-load')).toBe(false)
+    expect(shouldReportCustomAppReady('sky', 'bridge-ready')).toBe(true)
+  })
+
+  it('passes validated storage data and server response data through', async () => {
+    source.capabilities = ['device.storage']
+    storageCall.mockResolvedValue({
+      data: { exists: true, revision: 4, value: { enabled: true } },
+      success: true,
+    })
+    const handler = createHandler()
+
+    const result = await handler.handle({
+      method: 'device.storage.get',
+      payload: { key: 'settings.main' },
+      requestId: 'storage-get',
+    })
+
+    expect(storageCall).toHaveBeenCalledWith('custom-app:storage:get', {
+      appId: 'source-app',
+      key: 'settings.main',
+    })
+    expect(result?.response).toEqual({
+      data: { exists: true, revision: 4, value: { enabled: true } },
+      requestId: 'storage-get',
+      success: true,
+    })
+  })
+
+  it('validates storage writes and deduplicates request ids', async () => {
+    source.capabilities = ['device.storage']
+    const handler = createHandler()
+    const request = {
+      method: 'device.storage.set',
+      payload: { key: 'profile', revision: 2, value: { color: 'blue' } },
+      requestId: 'storage-set',
+    }
+
+    const first = await handler.handle(request)
+    const duplicate = await handler.handle(request)
+    const invalid = await handler.handle({
+      method: 'device.storage.set',
+      payload: { key: '../profile', revision: -1, value: Number.NaN },
+      requestId: 'storage-invalid',
+    })
+
+    expect(first?.response.success).toBe(true)
+    expect(duplicate).toBeNull()
+    expect(invalid?.response).toMatchObject({
+      error: 'invalid_storage_request',
+      success: false,
+    })
+    expect(storageCall).toHaveBeenCalledWith('custom-app:storage:set', {
+      appId: 'source-app',
+      key: 'profile',
+      revision: 2,
+      value: { color: 'blue' },
+    })
+    expect(storageCall).toHaveBeenCalledOnce()
+  })
+
+  it('bounds the request-id deduplication window', async () => {
+    const handler = createHandler()
+    const first = await handler.handle({
+      method: 'unknown',
+      requestId: 'oldest-request',
+    })
+    for (let index = 0; index < 512; index += 1) {
+      await handler.handle({
+        method: 'unknown',
+        requestId: `request-${index}`,
+      })
+    }
+    const afterEviction = await handler.handle({
+      method: 'unknown',
+      requestId: 'oldest-request',
+    })
+
+    expect(first?.response.error).toBe('unsupported_method')
+    expect(afterEviction?.response.error).toBe('unsupported_method')
+  })
+
+  it('requires storage and close permissions', async () => {
+    const handler = createHandler()
+
+    const storage = await handler.handle({
+      method: 'device.storage.get',
+      payload: { key: 'profile' },
+      requestId: 'denied-storage',
+    })
+    const close = await handler.handle({
+      method: 'app.close',
+      requestId: 'denied-close',
+    })
+
+    expect(storage?.response.error).toBe('permission_denied')
+    expect(close?.response.error).toBe('permission_denied')
+    expect(close?.effect).toBeUndefined()
+  })
+
+  it('creates a small text-only notification routed to its own app', async () => {
+    source.capabilities = ['notifications']
+    const handler = createHandler()
+
+    const result = await handler.handle({
+      method: 'notification.create',
+      payload: {
+        sound: 'signal',
+        subtitle: '  Update  ',
+        text: '  Work completed.  ',
+        title: '  Example  ',
+      },
+      requestId: 'notification',
+    })
+
+    expect(createNotification).toHaveBeenCalledWith({
+      appId: 'source-app',
+      route: '/apps/source-app',
+      sound: 'signal',
+      subtitle: 'Update',
+      text: 'Work completed.',
+      title: 'Example',
+    })
+    expect(result?.response.data).toEqual({
+      notificationId: 'notification-1',
+    })
+  })
+
+  it('rejects notification route injection and undeclared notification use', async () => {
+    source.capabilities = ['notifications']
+    const handler = createHandler()
+    const injected = await handler.handle({
+      method: 'notification.create',
+      payload: {
+        route: 'https://example.test',
+        text: 'Body',
+        title: 'Title',
+      },
+      requestId: 'notification-injected',
+    })
+    source.capabilities = []
+    const denied = await handler.handle({
+      method: 'notification.create',
+      payload: { text: 'Body', title: 'Title' },
+      requestId: 'notification-denied',
+    })
+
+    expect(injected?.response.error).toBe('invalid_notification')
+    expect(denied?.response.error).toBe('permission_denied')
+    expect(createNotification).not.toHaveBeenCalled()
+  })
+
+  it('opens only registered targets and passes JSON data to external apps', async () => {
+    source.capabilities = ['app.open']
+    resolveTarget.mockReturnValue({
+      external: true,
+      id: 'target-app',
+      route: '/apps/target-app',
+    })
+    const handler = createHandler()
+    const data = { screen: 'details', selectedId: 17 }
+
+    const result = await handler.handle({
+      method: 'app.open',
+      payload: { appId: 'target-app', data },
+      requestId: 'open-target',
+    })
+
+    expect(resolveTarget).toHaveBeenCalledWith('target-app')
+    expect(prepareExternalOpen).toHaveBeenCalledWith('target-app', data)
+    expect(result).toMatchObject({
+      effect: { route: '/apps/target-app', type: 'open' },
+      response: {
+        data: { appId: 'target-app' },
+        success: true,
+      },
+    })
+  })
+
+  it('rejects foreign URLs, unknown apps, and data for built-in apps', async () => {
+    source.capabilities = ['app.open']
+    const handler = createHandler()
+
+    const foreignUrl = await handler.handle({
+      method: 'app.open',
+      payload: { appId: 'target-app', url: 'https://example.test' },
+      requestId: 'open-url',
+    })
+    const missing = await handler.handle({
+      method: 'app.open',
+      payload: { appId: 'missing-app' },
+      requestId: 'open-missing',
+    })
+    resolveTarget.mockReturnValue({
+      external: false,
+      id: 'notes',
+      route: '/apps/notes',
+    })
+    const builtInData = await handler.handle({
+      method: 'app.open',
+      payload: { appId: 'notes', data: { noteId: 'one' } },
+      requestId: 'open-built-in-data',
+    })
+
+    expect(foreignUrl?.response.error).toBe('invalid_app_open')
+    expect(missing?.response.error).toBe('app_not_found')
+    expect(builtInData?.response.error).toBe('open_data_not_supported')
+    expect(prepareExternalOpen).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/utils/customAppBridge.ts b/frontend/src/utils/customAppBridge.ts
new file mode 100644
index 0000000..e51a00e
--- /dev/null
+++ b/frontend/src/utils/customAppBridge.ts
@@ -0,0 +1,512 @@
+import type {
+  CustomAppBridgeMode,
+  SkyPhoneAppBridgeRequest,
+  SkyPhoneAppBridgeResponse,
+  SkyPhoneAppCapability,
+} from '@/types/apps'
+import type { NuiResponse } from '@/utils/nui'
+import type { NotificationSoundId } from '@/utils/preferences'
+
+const STORAGE_KEY_PATTERN = /^[A-Za-z0-9._-]{1,64}$/
+const NOTIFICATION_SOUNDS: ReadonlySet<NotificationSoundId> = new Set([
+  'chime',
+  'signal',
+  'soft',
+])
+const JSON_MAX_DEPTH = 8
+const JSON_MAX_NODES = 512
+const HANDLED_REQUEST_ID_LIMIT = 512
+const STORAGE_VALUE_MAX_BYTES = 65_536
+const DEEP_LINK_DATA_MAX_BYTES = 16_384
+
+type JsonResult = { success: true; value: unknown } | { success: false }
+
+export type CustomAppBridgeNotification = {
+  appId: string
+  route: string
+  sound?: NotificationSoundId
+  subtitle?: string
+  text: string
+  title: string
+}
+
+export type CustomAppBridgeTarget = {
+  external: boolean
+  id: string
+  route: string
+}
+
+export type CustomAppBridgeEffect =
+  | { type: 'close' }
+  | { route: string; type: 'open' }
+
+export type CustomAppBridgeResult = {
+  effect?: CustomAppBridgeEffect
+  response: SkyPhoneAppBridgeResponse
+}
+
+type CustomAppBridgeDependencies = {
+  createNotification: (
+    notification: CustomAppBridgeNotification,
+  ) => string | null
+  getSourceApp: () => { capabilities: readonly string[]; id: string }
+  prepareExternalOpen: (appId: string, data?: unknown) => boolean
+  resolveTarget: (appId: string) => CustomAppBridgeTarget | null
+  storageCall: (
+    endpoint: 'custom-app:storage:get' | 'custom-app:storage:set',
+    payload: Record<string, unknown>,
+  ) => Promise<NuiResponse>
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function hasOnlyKeys(
+  value: Record<string, unknown>,
+  allowedKeys: readonly string[],
+): boolean {
+  const allowed = new Set(allowedKeys)
+  return Object.keys(value).every((key) => allowed.has(key))
+}
+
+function readText(value: unknown, maximumLength: number): string | null {
+  if (typeof value !== 'string') return null
+  const normalized = value.trim()
+  return normalized.length > 0 && normalized.length <= maximumLength
+    ? normalized
+    : null
+}
+
+function cloneJsonValue(
+  value: unknown,
+  depth: number,
+  state: { nodes: number; seen: WeakSet<object> },
+): JsonResult {
+  state.nodes += 1
+  if (state.nodes > JSON_MAX_NODES || depth > JSON_MAX_DEPTH) {
+    return { success: false }
+  }
+  if (
+    value === null ||
+    typeof value === 'boolean' ||
+    typeof value === 'string'
+  ) {
+    return { success: true, value }
+  }
+  if (typeof value === 'number') {
+    return Number.isFinite(value)
+      ? { success: true, value }
+      : { success: false }
+  }
+  if (typeof value !== 'object' || state.seen.has(value)) {
+    return { success: false }
+  }
+
+  state.seen.add(value)
+  if (Array.isArray(value)) {
+    if (value.length > 128) return { success: false }
+    const result: unknown[] = []
+    for (const item of value) {
+      const normalized = cloneJsonValue(item, depth + 1, state)
+      if (!normalized.success) return normalized
+      result.push(normalized.value)
+    }
+    state.seen.delete(value)
+    return { success: true, value: result }
+  }
+
+  const prototype = Object.getPrototypeOf(value)
+  if (prototype !== Object.prototype && prototype !== null) {
+    return { success: false }
+  }
+  const entries = Object.entries(value)
+  if (entries.length > 128) return { success: false }
+  const result: Record<string, unknown> = {}
+  for (const [key, item] of entries) {
+    if (
+      key.length < 1 ||
+      key.length > 64 ||
+      key === '__proto__' ||
+      key === 'constructor' ||
+      key === 'prototype'
+    ) {
+      return { success: false }
+    }
+    const normalized = cloneJsonValue(item, depth + 1, state)
+    if (!normalized.success) return normalized
+    result[key] = normalized.value
+  }
+  state.seen.delete(value)
+  return { success: true, value: result }
+}
+
+function normalizeJsonValue(value: unknown, maximumBytes: number): JsonResult {
+  const normalized = cloneJsonValue(value, 0, {
+    nodes: 0,
+    seen: new WeakSet(),
+  })
+  if (!normalized.success) return normalized
+
+  const serialized = JSON.stringify(normalized.value)
+  if (
+    typeof serialized !== 'string' ||
+    new TextEncoder().encode(serialized).byteLength > maximumBytes
+  ) {
+    return { success: false }
+  }
+  return normalized
+}
+
+function normalizeStorageGetPayload(payload: unknown): { key: string } | null {
+  if (!isRecord(payload) || !hasOnlyKeys(payload, ['key'])) return null
+  return typeof payload.key === 'string' &&
+    STORAGE_KEY_PATTERN.test(payload.key)
+    ? { key: payload.key }
+    : null
+}
+
+function normalizeStorageSetPayload(
+  payload: unknown,
+): { key: string; revision: number; value: unknown } | null {
+  if (
+    !isRecord(payload) ||
+    !hasOnlyKeys(payload, ['key', 'revision', 'value']) ||
+    !Object.prototype.hasOwnProperty.call(payload, 'value') ||
+    typeof payload.key !== 'string' ||
+    !STORAGE_KEY_PATTERN.test(payload.key) ||
+    typeof payload.revision !== 'number' ||
+    !Number.isInteger(payload.revision) ||
+    payload.revision < 0 ||
+    payload.revision > 4_294_967_294
+  ) {
+    return null
+  }
+
+  const value = normalizeJsonValue(payload.value, STORAGE_VALUE_MAX_BYTES)
+  return value.success
+    ? { key: payload.key, revision: payload.revision, value: value.value }
+    : null
+}
+
+function normalizeNotificationPayload(
+  appId: string,
+  payload: unknown,
+): CustomAppBridgeNotification | null {
+  if (
+    !isRecord(payload) ||
+    !hasOnlyKeys(payload, ['sound', 'subtitle', 'text', 'title'])
+  ) {
+    return null
+  }
+
+  const title = readText(payload.title, 80)
+  const text = readText(payload.text, 240)
+  if (!title || !text) return null
+
+  const subtitle =
+    payload.subtitle === undefined ? undefined : readText(payload.subtitle, 80)
+  if (payload.subtitle !== undefined && !subtitle) return null
+  const sound =
+    payload.sound === undefined ||
+    (typeof payload.sound === 'string' &&
+      NOTIFICATION_SOUNDS.has(payload.sound as NotificationSoundId))
+      ? (payload.sound as NotificationSoundId | undefined)
+      : null
+  if (sound === null) return null
+
+  return {
+    appId,
+    route: `/apps/${appId}`,
+    ...(sound ? { sound } : {}),
+    ...(subtitle ? { subtitle } : {}),
+    text,
+    title,
+  }
+}
+
+function normalizeOpenPayload(
+  payload: unknown,
+): { appId: string; data?: unknown } | null {
+  if (
+    !isRecord(payload) ||
+    !hasOnlyKeys(payload, ['appId', 'data']) ||
+    typeof payload.appId !== 'string' ||
+    payload.appId.length < 1 ||
+    payload.appId.length > 64
+  ) {
+    return null
+  }
+  if (!Object.prototype.hasOwnProperty.call(payload, 'data')) {
+    return { appId: payload.appId }
+  }
+
+  const data = normalizeJsonValue(payload.data, DEEP_LINK_DATA_MAX_BYTES)
+  if (!data.success || !isRecord(data.value)) return null
+  return { appId: payload.appId, data: data.value }
+}
+
+function hasPermission(
+  capabilities: readonly string[],
+  permission: string,
+): boolean {
+  return capabilities.includes(permission)
+}
+
+function response(
+  requestId: string,
+  success: boolean,
+  data?: unknown,
+  error?: string,
+): SkyPhoneAppBridgeResponse {
+  return {
+    ...(data === undefined ? {} : { data }),
+    ...(error ? { error } : {}),
+    requestId,
+    success,
+  }
+}
+
+export function getSkyPhoneAppCapabilities(
+  permissions: readonly string[],
+): SkyPhoneAppCapability[] {
+  const capabilities: SkyPhoneAppCapability[] = []
+  if (hasPermission(permissions, 'app.close')) capabilities.push('app.close')
+  if (hasPermission(permissions, 'app.open')) capabilities.push('app.open')
+  if (hasPermission(permissions, 'device.storage')) {
+    capabilities.push('device.storage.get', 'device.storage.set')
+  }
+  if (hasPermission(permissions, 'locale.read'))
+    capabilities.push('locale.read')
+  if (hasPermission(permissions, 'notifications')) {
+    capabilities.push('notification.create')
+  }
+  if (hasPermission(permissions, 'theme.read')) capabilities.push('theme.read')
+  return capabilities
+}
+
+export function shouldReportCustomAppReady(
+  bridgeMode: CustomAppBridgeMode,
+  signal: 'bridge-ready' | 'frame-load',
+): boolean {
+  return bridgeMode === 'sky'
+    ? signal === 'bridge-ready'
+    : signal === 'frame-load'
+}
+
+export function createCustomAppBridgeRequestHandler(
+  dependencies: CustomAppBridgeDependencies,
+): {
+  handle: (
+    request: SkyPhoneAppBridgeRequest,
+  ) => Promise<CustomAppBridgeResult | null>
+} {
+  const handledRequestIds = new Set<string>()
+  const handledRequestOrder: string[] = []
+
+  return {
+    async handle(
+      request: SkyPhoneAppBridgeRequest,
+    ): Promise<CustomAppBridgeResult | null> {
+      if (
+        typeof request.requestId !== 'string' ||
+        request.requestId.length < 1 ||
+        request.requestId.length > 128 ||
+        typeof request.method !== 'string' ||
+        request.method.length < 1 ||
+        request.method.length > 64 ||
+        handledRequestIds.has(request.requestId)
+      ) {
+        return null
+      }
+      handledRequestIds.add(request.requestId)
+      handledRequestOrder.push(request.requestId)
+      if (handledRequestOrder.length > HANDLED_REQUEST_ID_LIMIT) {
+        const expiredRequestId = handledRequestOrder.shift()
+        if (expiredRequestId) handledRequestIds.delete(expiredRequestId)
+      }
+
+      const source = dependencies.getSourceApp()
+      try {
+        if (request.method === 'app.close') {
+          return hasPermission(source.capabilities, 'app.close')
+            ? {
+                effect: { type: 'close' },
+                response: response(request.requestId, true),
+              }
+            : {
+                response: response(
+                  request.requestId,
+                  false,
+                  undefined,
+                  'permission_denied',
+                ),
+              }
+        }
+
+        if (
+          request.method === 'device.storage.get' ||
+          request.method === 'device.storage.set'
+        ) {
+          if (!hasPermission(source.capabilities, 'device.storage')) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'permission_denied',
+              ),
+            }
+          }
+
+          const storagePayload =
+            request.method === 'device.storage.get'
+              ? normalizeStorageGetPayload(request.payload)
+              : normalizeStorageSetPayload(request.payload)
+          if (!storagePayload) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'invalid_storage_request',
+              ),
+            }
+          }
+
+          const result = await dependencies.storageCall(
+            request.method === 'device.storage.get'
+              ? 'custom-app:storage:get'
+              : 'custom-app:storage:set',
+            { appId: source.id, ...storagePayload },
+          )
+          return {
+            response: response(
+              request.requestId,
+              result.success,
+              result.data,
+              result.error,
+            ),
+          }
+        }
+
+        if (request.method === 'notification.create') {
+          if (!hasPermission(source.capabilities, 'notifications')) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'permission_denied',
+              ),
+            }
+          }
+          const notification = normalizeNotificationPayload(
+            source.id,
+            request.payload,
+          )
+          if (!notification) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'invalid_notification',
+              ),
+            }
+          }
+          const notificationId = dependencies.createNotification(notification)
+          return {
+            response: response(request.requestId, true, { notificationId }),
+          }
+        }
+
+        if (request.method === 'app.open') {
+          if (!hasPermission(source.capabilities, 'app.open')) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'permission_denied',
+              ),
+            }
+          }
+          const openPayload = normalizeOpenPayload(request.payload)
+          if (!openPayload) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'invalid_app_open',
+              ),
+            }
+          }
+          const target = dependencies.resolveTarget(openPayload.appId)
+          if (!target) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'app_not_found',
+              ),
+            }
+          }
+          if (openPayload.data !== undefined && !target.external) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'open_data_not_supported',
+              ),
+            }
+          }
+          if (
+            target.external &&
+            !dependencies.prepareExternalOpen(target.id, openPayload.data)
+          ) {
+            return {
+              response: response(
+                request.requestId,
+                false,
+                undefined,
+                'open_failed',
+              ),
+            }
+          }
+          return {
+            effect: { route: target.route, type: 'open' },
+            response: response(request.requestId, true, {
+              appId: target.id,
+            }),
+          }
+        }
+
+        return {
+          response: response(
+            request.requestId,
+            false,
+            undefined,
+            'unsupported_method',
+          ),
+        }
+      } catch (error) {
+        console.error(
+          `[Custom apps] Bridge request failed for ${source.id}.`,
+          error,
+        )
+        return {
+          response: response(
+            request.requestId,
+            false,
+            undefined,
+            'request_failed',
+          ),
+        }
+      }
+    },
+  }
+}
diff --git a/frontend/src/utils/customAppLifecycle.test.ts b/frontend/src/utils/customAppLifecycle.test.ts
new file mode 100644
index 0000000..cf67f98
--- /dev/null
+++ b/frontend/src/utils/customAppLifecycle.test.ts
@@ -0,0 +1,229 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type { ExternalPhoneAppDefinition } from '@/types/apps'
+import {
+  createCustomAppLifecycleReporter,
+  createCustomAppLifecycleScheduler,
+  createCustomAppOrientationCoordinator,
+  getCustomAppFrameKey,
+  getCustomAppSafeArea,
+} from '@/utils/customAppLifecycle'
+import type { NuiResponse } from '@/utils/nui'
+
+function deferredResponse(): {
+  promise: Promise<NuiResponse>
+  resolve: (response: NuiResponse) => void
+} {
+  let resolve!: (response: NuiResponse) => void
+  const promise = new Promise<NuiResponse>((complete) => {
+    resolve = complete
+  })
+  return { promise, resolve }
+}
+
+function externalApp(
+  overrides: Partial<ExternalPhoneAppDefinition> = {},
+): ExternalPhoneAppDefinition {
+  return {
+    bridgeMode: 'sky',
+    bundled: true,
+    capabilities: ['theme.read'],
+    category: 'utilities',
+    compatibility: {},
+    component: null,
+    defaultInstalled: true,
+    description: 'Example description',
+    developer: 'Example developer',
+    dockOrder: null,
+    gridOrder: 100,
+    icon: {} as ExternalPhoneAppDefinition['icon'],
+    iconClass: 'app-icon--custom',
+    iconImage: 'https://cfx-nui-example/web/icon.svg',
+    id: 'example-app' as ExternalPhoneAppDefinition['id'],
+    kind: 'external',
+    name: 'Example App',
+    orientation: 'portrait',
+    ownerResource: 'example_resource',
+    readyTimeoutMs: 8000,
+    removable: true,
+    route: '/apps/example-app' as ExternalPhoneAppDefinition['route'],
+    ui: 'https://cfx-nui-example/web/index.html',
+    ...overrides,
+  }
+}
+
+describe('custom app lifecycle', () => {
+  it('waits for delayed open and preserves fast ready/close ordering', async () => {
+    const open = deferredResponse()
+    const ready = deferredResponse()
+    const close = deferredResponse()
+    const calls: string[] = []
+    const send = vi.fn((event: string) => {
+      calls.push(event)
+      if (event === 'open') return open.promise
+      if (event === 'ready') return ready.promise
+      return close.promise
+    })
+    const reporter = createCustomAppLifecycleReporter({
+      scheduler: createCustomAppLifecycleScheduler(),
+      send,
+    })
+
+    const openResult = reporter.report('open', { screen: 'details' })
+    const readyResult = reporter.report('ready')
+    const closeResult = reporter.report('close')
+    await Promise.resolve()
+
+    expect(calls).toEqual(['open'])
+
+    open.resolve({ success: true })
+    await openResult
+    await Promise.resolve()
+    expect(calls).toEqual(['open', 'ready'])
+
+    ready.resolve({ success: true })
+    await readyResult
+    await Promise.resolve()
+    expect(calls).toEqual(['open', 'ready', 'close'])
+
+    close.resolve({ success: true })
+    await expect(closeResult).resolves.toEqual({ success: true })
+    expect(send).toHaveBeenNthCalledWith(1, 'open', { screen: 'details' })
+  })
+
+  it('finalizes only successful events and retries a failed event', async () => {
+    const failure = vi.fn()
+    const send = vi
+      .fn()
+      .mockResolvedValueOnce({ error: 'phone_closed', success: false })
+      .mockResolvedValueOnce({ success: true })
+    const reporter = createCustomAppLifecycleReporter({
+      onFailure: failure,
+      scheduler: createCustomAppLifecycleScheduler(),
+      send,
+    })
+
+    await expect(reporter.report('open')).resolves.toMatchObject({
+      error: 'phone_closed',
+      success: false,
+    })
+    expect(reporter.isComplete('open')).toBe(false)
+
+    await expect(reporter.report('open')).resolves.toEqual({ success: true })
+    expect(reporter.isComplete('open')).toBe(true)
+    expect(send).toHaveBeenCalledTimes(2)
+    expect(failure).toHaveBeenCalledWith('open', 'phone_closed')
+  })
+
+  it('treats a failed hook as applied and continues with ready', async () => {
+    const failure = vi.fn()
+    const send = vi
+      .fn()
+      .mockResolvedValueOnce({ error: 'hook_failed', success: false })
+      .mockResolvedValueOnce({ success: true })
+    const reporter = createCustomAppLifecycleReporter({
+      onFailure: failure,
+      scheduler: createCustomAppLifecycleScheduler(),
+      send,
+    })
+
+    const open = reporter.report('open')
+    const ready = reporter.report('ready')
+
+    await expect(open).resolves.toEqual({
+      error: 'hook_failed',
+      success: false,
+    })
+    await expect(ready).resolves.toEqual({ success: true })
+    expect(reporter.isComplete('open')).toBe(true)
+    expect(reporter.isComplete('ready')).toBe(true)
+    expect(failure).toHaveBeenCalledWith('open', 'hook_failed')
+    expect(send).toHaveBeenCalledTimes(2)
+  })
+
+  it('does not report ready when its queued open failed', async () => {
+    const send = vi.fn().mockResolvedValue({
+      error: 'phone_closed',
+      success: false,
+    })
+    const reporter = createCustomAppLifecycleReporter({
+      scheduler: createCustomAppLifecycleScheduler(),
+      send,
+    })
+
+    const open = reporter.report('open')
+    const ready = reporter.report('ready')
+
+    await expect(open).resolves.toMatchObject({ success: false })
+    await expect(ready).resolves.toEqual({
+      error: 'open_not_completed',
+      success: false,
+    })
+    expect(send).toHaveBeenCalledOnce()
+  })
+
+  it('turns a rejected transport promise into a retryable response', async () => {
+    const send = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('network down'))
+      .mockResolvedValueOnce({ success: true })
+    const reporter = createCustomAppLifecycleReporter({
+      scheduler: createCustomAppLifecycleScheduler(),
+      send,
+    })
+
+    await expect(reporter.report('open')).resolves.toEqual({
+      error: 'network down',
+      success: false,
+    })
+    await expect(reporter.report('open')).resolves.toEqual({ success: true })
+    expect(reporter.isComplete('open')).toBe(true)
+  })
+
+  it('turns iframe, bridge, permission, and orientation updates into remounts', () => {
+    const original = externalApp()
+    const originalKey = getCustomAppFrameKey(original)
+
+    expect(
+      getCustomAppFrameKey(
+        externalApp({ ui: 'https://cfx-nui-example/web/v2.html' }),
+      ),
+    ).not.toBe(originalKey)
+    expect(
+      getCustomAppFrameKey(externalApp({ bridgeMode: 'legacy' })),
+    ).not.toBe(originalKey)
+    expect(
+      getCustomAppFrameKey(externalApp({ capabilities: ['app.close'] })),
+    ).not.toBe(originalKey)
+    expect(
+      getCustomAppFrameKey(externalApp({ orientation: 'landscape' })),
+    ).not.toBe(originalKey)
+  })
+
+  it('applies landscape safe areas and resets only the current owner', () => {
+    const changes: boolean[] = []
+    const coordinator = createCustomAppOrientationCoordinator()
+    const previous = coordinator.createSession((value) => changes.push(value))
+    const current = coordinator.createSession((value) => changes.push(value))
+
+    previous.apply('landscape')
+    current.apply('landscape')
+    previous.release()
+    current.apply('portrait')
+    current.release()
+
+    expect(changes).toEqual([true, true, false, false])
+    expect(getCustomAppSafeArea('portrait')).toEqual({
+      bottom: 25,
+      left: 0,
+      right: 0,
+      top: 44,
+    })
+    expect(getCustomAppSafeArea('landscape')).toEqual({
+      bottom: 0,
+      left: 44,
+      right: 25,
+      top: 0,
+    })
+  })
+})
diff --git a/frontend/src/utils/customAppLifecycle.ts b/frontend/src/utils/customAppLifecycle.ts
new file mode 100644
index 0000000..4742481
--- /dev/null
+++ b/frontend/src/utils/customAppLifecycle.ts
@@ -0,0 +1,183 @@
+import type { ExternalPhoneAppDefinition } from '@/types/apps'
+import type { NuiResponse } from '@/utils/nui'
+
+export type CustomAppLifecycleEvent = 'close' | 'open' | 'ready'
+export type CustomAppOrientation = ExternalPhoneAppDefinition['orientation']
+
+type CustomAppLifecycleTask = () => Promise<NuiResponse>
+
+export type CustomAppLifecycleScheduler = {
+  enqueue: (task: CustomAppLifecycleTask) => Promise<NuiResponse>
+}
+
+type CustomAppLifecycleReporterOptions = {
+  onFailure?: (event: CustomAppLifecycleEvent, error: string) => void
+  scheduler: CustomAppLifecycleScheduler
+  send: (event: CustomAppLifecycleEvent, data?: unknown) => Promise<NuiResponse>
+}
+
+export type CustomAppOrientationCoordinator = {
+  createSession: (setLandscape: (landscape: boolean) => void) => {
+    apply: (orientation: CustomAppOrientation) => void
+    release: () => void
+  }
+}
+
+function stableValue(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(stableValue)
+  if (!value || typeof value !== 'object') return value
+
+  return Object.fromEntries(
+    Object.entries(value as Record<string, unknown>)
+      .sort(([left], [right]) => left.localeCompare(right))
+      .map(([key, item]) => [key, stableValue(item)]),
+  )
+}
+
+export function getCustomAppFrameKey(app: ExternalPhoneAppDefinition): string {
+  return JSON.stringify(
+    stableValue({
+      bridgeMode: app.bridgeMode,
+      bundled: app.bundled,
+      capabilities: app.capabilities,
+      compatibility: app.compatibility,
+      description: app.description,
+      id: app.id,
+      name: app.name,
+      orientation: app.orientation,
+      ownerResource: app.ownerResource,
+      readyTimeoutMs: app.readyTimeoutMs,
+      ui: app.ui,
+    }),
+  )
+}
+
+export function getCustomAppSafeArea(orientation: CustomAppOrientation): {
+  bottom: number
+  left: number
+  right: number
+  top: number
+} {
+  return orientation === 'landscape'
+    ? { bottom: 0, left: 44, right: 25, top: 0 }
+    : { bottom: 25, left: 0, right: 0, top: 44 }
+}
+
+export function createCustomAppOrientationCoordinator(): CustomAppOrientationCoordinator {
+  let owner: symbol | null = null
+
+  return {
+    createSession(setLandscape) {
+      const token = Symbol('custom-app-orientation')
+
+      return {
+        apply(orientation): void {
+          owner = token
+          setLandscape(orientation === 'landscape')
+        },
+        release(): void {
+          if (owner !== token) return
+          owner = null
+          setLandscape(false)
+        },
+      }
+    },
+  }
+}
+
+export const customAppOrientationCoordinator =
+  createCustomAppOrientationCoordinator()
+
+export function createCustomAppLifecycleScheduler(): CustomAppLifecycleScheduler {
+  let tail: Promise<void> = Promise.resolve()
+
+  return {
+    enqueue(task): Promise<NuiResponse> {
+      const operation = tail.then(task)
+      tail = operation.then(
+        () => undefined,
+        () => undefined,
+      )
+      return operation
+    },
+  }
+}
+
+export const customAppLifecycleScheduler = createCustomAppLifecycleScheduler()
+
+export function createCustomAppLifecycleReporter(
+  options: CustomAppLifecycleReporterOptions,
+): {
+  isComplete: (event: CustomAppLifecycleEvent) => boolean
+  report: (
+    event: CustomAppLifecycleEvent,
+    data?: unknown,
+  ) => Promise<NuiResponse>
+} {
+  const completed = new Set<CustomAppLifecycleEvent>()
+  const pending = new Map<CustomAppLifecycleEvent, Promise<NuiResponse>>()
+
+  function notifyFailure(event: CustomAppLifecycleEvent, error: string): void {
+    try {
+      options.onFailure?.(event, error)
+    } catch (failureHandlerError) {
+      console.error(
+        '[Custom apps] Lifecycle failure handler threw an error.',
+        failureHandlerError,
+      )
+    }
+  }
+
+  function report(
+    event: CustomAppLifecycleEvent,
+    data?: unknown,
+  ): Promise<NuiResponse> {
+    if (completed.has(event)) return Promise.resolve({ success: true })
+
+    const existing = pending.get(event)
+    if (existing) return existing
+
+    const operation = options.scheduler.enqueue(async () => {
+      if (event === 'ready' && !completed.has('open')) {
+        return { error: 'open_not_completed', success: false }
+      }
+
+      try {
+        return await options.send(event, data)
+      } catch (error) {
+        return {
+          error: error instanceof Error ? error.message : 'request_failed',
+          success: false,
+        }
+      }
+    })
+
+    const settled = operation.then(
+      (response) => {
+        if (response.success || response.error === 'hook_failed') {
+          completed.add(event)
+        }
+        if (!response.success)
+          notifyFailure(event, response.error ?? 'request_failed')
+        if (pending.get(event) === settled) pending.delete(event)
+        return response
+      },
+      (error) => {
+        const response = {
+          error: error instanceof Error ? error.message : 'request_failed',
+          success: false,
+        }
+        notifyFailure(event, response.error)
+        if (pending.get(event) === settled) pending.delete(event)
+        return response
+      },
+    )
+    pending.set(event, settled)
+    return settled
+  }
+
+  return {
+    isComplete: (event) => completed.has(event),
+    report,
+  }
+}
diff --git a/frontend/src/utils/homeLayout.test.ts b/frontend/src/utils/homeLayout.test.ts
index 9bcf86d..72602c6 100644
--- a/frontend/src/utils/homeLayout.test.ts
+++ b/frontend/src/utils/homeLayout.test.ts
@@ -34,7 +34,7 @@ describe('home layout', () => {
       null,
     ])
     expect(layout.dock).toEqual(['phone', 'messages', 'clock', null])
-    expect(layout.version).toBe(2)
+    expect(layout.version).toBe(3)
   })
 
   it('migrates compact persisted arrays and appends newly installed apps', () => {
@@ -51,7 +51,7 @@ describe('home layout', () => {
     expect(layout.dock).toEqual(['messages', null, null, null])
     expect(layout.grid.slice(0, 4)).toEqual(['mail', 'clock', 'notes', null])
     expect(layout.hidden).toEqual(['phone'])
-    expect(layout.version).toBe(2)
+    expect(layout.version).toBe(3)
   })
 
   it('preserves explicit gaps in versioned layouts', () => {
@@ -79,6 +79,28 @@ describe('home layout', () => {
     expect(layout.dock).toEqual(['messages', null, 'clock', null])
   })
 
+  it('keeps valid custom-app tombstones in version 3 layouts', () => {
+    const grid: HomeLayout['grid'] = Array.from(
+      { length: HOME_GRID_PAGE_SIZE },
+      () => null,
+    )
+    grid[6] = 'temporarily-missing' as HomeLayout['hidden'][number]
+
+    const layout = parseHomeLayout(
+      {
+        dock: ['phone', null, null, null],
+        grid,
+        hidden: [],
+        version: 3,
+      },
+      defaults,
+      [...installed],
+    )
+
+    expect(layout.grid[6]).toBe('temporarily-missing')
+    expect(layout.version).toBe(3)
+  })
+
   it('preserves independently positioned shortcuts for the same app', () => {
     const grid: HomeLayout['grid'] = Array.from(
       { length: HOME_GRID_PAGE_SIZE },
diff --git a/frontend/src/utils/homeLayout.ts b/frontend/src/utils/homeLayout.ts
index e55356c..01bb146 100644
--- a/frontend/src/utils/homeLayout.ts
+++ b/frontend/src/utils/homeLayout.ts
@@ -11,7 +11,11 @@ export type HomeLayout = {
   dock: HomeSlot[]
   grid: HomeSlot[]
   hidden: LaunchablePhoneAppId[]
-  version: 2
+  version: 3
+}
+
+function isPersistableAppId(value: unknown): value is LaunchablePhoneAppId {
+  return typeof value === 'string' && /^[a-z0-9][a-z0-9._-]{1,63}$/.test(value)
 }
 
 function readAppIds(
@@ -134,7 +138,7 @@ export function createDefaultHomeLayout(
     dock[index] = id
   }
 
-  return { dock, grid, hidden: [], version: 2 }
+  return { dock, grid, hidden: [], version: 3 }
 }
 
 export function parseHomeLayout(
@@ -146,6 +150,14 @@ export function parseHomeLayout(
 
   const source = value as Partial<Record<keyof HomeLayout, unknown>>
   const availableIds = new Set(installedIds)
+  if (source.version === 3) {
+    for (const collection of [source.dock, source.grid, source.hidden]) {
+      if (!Array.isArray(collection)) continue
+      for (const appId of collection) {
+        if (isPersistableAppId(appId)) availableIds.add(appId)
+      }
+    }
+  }
   const hidden = readAppIds(source.hidden, availableIds)
   const hiddenIds = new Set(hidden)
   const persistedGridLength = Array.isArray(source.grid)
@@ -158,7 +170,7 @@ export function parseHomeLayout(
   let grid: HomeSlot[]
   let dock: HomeSlot[]
 
-  if (source.version === 2) {
+  if (source.version === 2 || source.version === 3) {
     grid = readSlots(source.grid, availableIds, gridLength)
     dock = readSlots(source.dock, availableIds, HOME_DOCK_CAPACITY)
   } else {
@@ -189,7 +201,7 @@ export function parseHomeLayout(
     }
   }
 
-  return { dock, grid, hidden, version: 2 }
+  return { dock, grid, hidden, version: 3 }
 }
 
 export function removeHomeApp(
@@ -202,7 +214,7 @@ export function removeHomeApp(
     hidden: layout.hidden.includes(appId)
       ? [...layout.hidden]
       : [...layout.hidden, appId],
-    version: 2,
+    version: 3,
   }
 }
 
@@ -217,7 +229,7 @@ export function restoreHomeApp(
     dock: [...layout.dock],
     grid,
     hidden: layout.hidden.filter((id) => id !== appId),
-    version: 2,
+    version: 3,
   }
 }
 
@@ -230,7 +242,7 @@ export function addHomePage(layout: HomeLayout): HomeLayout {
     dock: [...layout.dock],
     grid: [...layout.grid, ...createSlots(HOME_GRID_PAGE_SIZE)],
     hidden: [...layout.hidden],
-    version: 2,
+    version: 3,
   }
 }
 
@@ -252,7 +264,7 @@ export function deleteHomePage(layout: HomeLayout, page: number): HomeLayout {
     dock: [...layout.dock],
     grid,
     hidden: [...layout.hidden],
-    version: 2,
+    version: 3,
   }
 }
 
@@ -267,7 +279,7 @@ export function moveHomeApp(
     dock: [...layout.dock],
     grid: [...layout.grid],
     hidden: [...layout.hidden],
-    version: 2,
+    version: 3,
   }
   const source = next[from]
   const target = next[to]
diff --git a/frontend/src/utils/nui.ts b/frontend/src/utils/nui.ts
index 670160f..22ecce7 100644
--- a/frontend/src/utils/nui.ts
+++ b/frontend/src/utils/nui.ts
@@ -1,4 +1,4 @@
-const resourceName = window.GetParentResourceName?.() ?? 'sky_phone'
+const resourceName = globalThis.window?.GetParentResourceName?.() ?? 'sky_phone'
 
 export type NuiResponse<T = unknown> = {
   success: boolean
diff --git a/frontend/src/utils/preferences.test.ts b/frontend/src/utils/preferences.test.ts
index 45a0cef..9ddfb58 100644
--- a/frontend/src/utils/preferences.test.ts
+++ b/frontend/src/utils/preferences.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import type { LaunchablePhoneAppId } from '@/types/apps'
 import { DEFAULT_PHONE_PREFERENCES, parsePhonePreferences } from './preferences'
 describe('preferences', () => {
   it('falls back for malformed and obsolete records', () => {
@@ -84,6 +85,27 @@ describe('preferences', () => {
     expect(value.settings.screenBrightness).toBe(10)
   })
 
+  it('preserves safe notification preferences for custom apps', () => {
+    const appId = 'example-app' as LaunchablePhoneAppId
+    const value = parsePhonePreferences(
+      JSON.stringify({
+        version: 1,
+        settings: {
+          notifications: {
+            [appId]: { enabled: false, sounds: true },
+            '../unsafe': { enabled: false, sounds: false },
+          },
+        },
+      }),
+    )
+
+    expect(value.settings.notifications[appId]).toEqual({
+      enabled: false,
+      sounds: true,
+    })
+    expect(value.settings.notifications).not.toHaveProperty('../unsafe')
+  })
+
   it('adds safe control center defaults to legacy version one preferences', () => {
     const value = parsePhonePreferences(
       JSON.stringify({ version: 1, settings: { airplaneMode: true } }),
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 3a5464d..7ef0550 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -38,6 +38,12 @@ export type AppNotificationPreferences = {
   sounds: boolean
 }
 
+export const DEFAULT_APP_NOTIFICATION_PREFERENCES: AppNotificationPreferences =
+  {
+    enabled: true,
+    sounds: true,
+  }
+
 export type PhonePreferencesV1 = {
   settings: {
     airplaneMode: boolean
@@ -80,6 +86,7 @@ const DEFAULT_APP_NOTIFICATIONS: Record<
   'sky-flappy': { enabled: true, sounds: true },
   'neon-drop': { enabled: true, sounds: true },
   citymarkt: { enabled: true, sounds: true },
+  companies: { enabled: true, sounds: true },
   'local-pages': { enabled: true, sounds: true },
   picstagram: { enabled: true, sounds: true },
   fliptok: { enabled: true, sounds: true },
@@ -155,30 +162,41 @@ function readChoice<T extends string>(
 function readNotifications(
   value: unknown,
 ): Record<LaunchablePhoneAppId, AppNotificationPreferences> {
-  const source =
-    value && typeof value === 'object'
-      ? (value as Partial<
-          Record<LaunchablePhoneAppId, Partial<AppNotificationPreferences>>
-        >)
-      : {}
+  const source: Record<string, unknown> =
+    value && typeof value === 'object' ? (value as Record<string, unknown>) : {}
   const notifications = cloneJsonData(DEFAULT_APP_NOTIFICATIONS)
 
-  for (const appId of Object.keys(notifications) as LaunchablePhoneAppId[]) {
-    notifications[appId] = {
-      enabled: readBoolean(
-        source[appId]?.enabled,
-        DEFAULT_APP_NOTIFICATIONS[appId].enabled,
-      ),
-      sounds: readBoolean(
-        source[appId]?.sounds,
-        DEFAULT_APP_NOTIFICATIONS[appId].sounds,
-      ),
+  for (const appId of Object.keys(source)) {
+    if (!/^[a-z0-9][a-z0-9._-]{1,63}$/.test(appId)) continue
+    const rawPreferences =
+      source[appId] &&
+      typeof source[appId] === 'object' &&
+      !Array.isArray(source[appId])
+        ? (source[appId] as Partial<AppNotificationPreferences>)
+        : {}
+    const defaults =
+      DEFAULT_APP_NOTIFICATIONS[appId as LaunchablePhoneAppId] ??
+      DEFAULT_APP_NOTIFICATION_PREFERENCES
+    notifications[appId as LaunchablePhoneAppId] = {
+      enabled: readBoolean(rawPreferences.enabled, defaults.enabled),
+      sounds: readBoolean(rawPreferences.sounds, defaults.sounds),
     }
   }
 
   return notifications
 }
 
+export function ensureAppNotificationPreferences(
+  preferences: PhonePreferencesV1,
+  appIds: LaunchablePhoneAppId[],
+): void {
+  for (const appId of appIds) {
+    preferences.settings.notifications[appId] ??= cloneJsonData(
+      DEFAULT_APP_NOTIFICATION_PREFERENCES,
+    )
+  }
+}
+
 export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
   if (!raw) return cloneJsonData(DEFAULT_PHONE_PREFERENCES)
 
diff --git a/frontend/src/utils/windowMessages.test.ts b/frontend/src/utils/windowMessages.test.ts
new file mode 100644
index 0000000..022f6b1
--- /dev/null
+++ b/frontend/src/utils/windowMessages.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
+
+describe('root window message source', () => {
+  it('accepts native NUI messages and messages posted by the root window', () => {
+    const rootWindow = {} as Window
+
+    expect(isTrustedRootMessageSource(null, rootWindow)).toBe(true)
+    expect(isTrustedRootMessageSource(rootWindow, rootWindow)).toBe(true)
+  })
+
+  it('rejects messages posted by child frames', () => {
+    const rootWindow = {} as Window
+    const childFrame = {} as Window
+
+    expect(isTrustedRootMessageSource(childFrame, rootWindow)).toBe(false)
+  })
+})
diff --git a/frontend/src/utils/windowMessages.ts b/frontend/src/utils/windowMessages.ts
new file mode 100644
index 0000000..5fa674d
--- /dev/null
+++ b/frontend/src/utils/windowMessages.ts
@@ -0,0 +1,6 @@
+export function isTrustedRootMessageSource(
+  source: MessageEventSource | null,
+  rootWindow: Window,
+): boolean {
+  return source === null || source === rootWindow
+}
diff --git a/frontend/src/views/PhoneAppWindow.vue b/frontend/src/views/PhoneAppWindow.vue
index d71f687..9bdca8b 100644
--- a/frontend/src/views/PhoneAppWindow.vue
+++ b/frontend/src/views/PhoneAppWindow.vue
@@ -2,8 +2,10 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { getPhoneApp } from '@/config/apps'
+import CustomAppFrame from '@/components/CustomAppFrame.vue'
+import { getPhoneApp, isExternalPhoneApp } from '@/config/apps'
 import { usePhoneStore } from '@/stores/phone'
+import { getCustomAppFrameKey } from '@/utils/customAppLifecycle'
 
 const route = useRoute()
 const phone = usePhoneStore()
@@ -21,8 +23,13 @@ const launchStyle = computed(() => {
 </script>
 
 <template>
-  <div v-if="app?.component" class="app-window" :style="launchStyle">
-    <Suspense>
+  <div v-if="app" class="app-window" :style="launchStyle">
+    <CustomAppFrame
+      v-if="isExternalPhoneApp(app)"
+      :key="getCustomAppFrameKey(app)"
+      :app="app"
+    />
+    <Suspense v-else>
       <component :is="app.component" />
       <template #fallback>
         <div class="app-loading">{{ phone.t('Common.loading') }}</div>
diff --git a/frontend/src/views/SpringboardView.vue b/frontend/src/views/SpringboardView.vue
index e5a0ab3..aa02bf4 100644
--- a/frontend/src/views/SpringboardView.vue
+++ b/frontend/src/views/SpringboardView.vue
@@ -7,7 +7,7 @@ import AppIcon from '@/components/AppIcon.vue'
 import SpringboardWidgetGrid from '@/components/SpringboardWidgetGrid.vue'
 import WidgetConfigSheet from '@/components/WidgetConfigSheet.vue'
 import WidgetPickerSheet from '@/components/WidgetPickerSheet.vue'
-import { PHONE_APPS } from '@/config/apps'
+import { getPhoneAppLabel, PHONE_APPS } from '@/config/apps'
 import { useAppStoreStore } from '@/stores/app-store'
 import { usePhoneStore } from '@/stores/phone'
 import { useWidgetsStore } from '@/stores/widgets'
@@ -74,9 +74,7 @@ let edgePageDirection = 0
 let edgePageLocked = false
 
 const installedApps = computed(() =>
-  PHONE_APPS.filter(
-    (app) => app.category !== 'games' || appStore.claimedApps.includes(app.id),
-  ),
+  PHONE_APPS.filter((app) => appStore.isInstalled(app.id)),
 )
 const installedAppsById = computed(
   () => new Map(installedApps.value.map((app) => [app.id, app])),
@@ -190,7 +188,9 @@ const filteredApps = computed(() => {
   const query = searchQuery.value.trim().toLocaleLowerCase(phone.lang)
   if (!query) return installedApps.value
   return installedApps.value.filter((app) =>
-    phone.t(app.labelKey).toLocaleLowerCase(phone.lang).includes(query),
+    getPhoneAppLabel(app, phone.t)
+      .toLocaleLowerCase(phone.lang)
+      .includes(query),
   )
 })
 const appGroups = computed(() => {
@@ -223,9 +223,14 @@ const appGroups = computed(() => {
 const alphabeticalGroups = computed(() => {
   const groups: Array<{ apps: PhoneAppDefinition[]; letter: string }> = []
   for (const app of [...filteredApps.value].sort((a, b) =>
-    phone.t(a.labelKey).localeCompare(phone.t(b.labelKey), phone.lang),
+    getPhoneAppLabel(a, phone.t).localeCompare(
+      getPhoneAppLabel(b, phone.t),
+      phone.lang,
+    ),
   )) {
-    const letter = phone.t(app.labelKey).charAt(0).toLocaleUpperCase(phone.lang)
+    const letter = getPhoneAppLabel(app, phone.t)
+      .charAt(0)
+      .toLocaleUpperCase(phone.lang)
     const group = groups.find((candidate) => candidate.letter === letter)
     if (group) group.apps.push(app)
     else groups.push({ apps: [app], letter })
@@ -803,7 +808,9 @@ watch(isEditablePage, (visible) => {
                   rounded
                   class="app-library-restore-button"
                   :aria-label="
-                    phone.t('Home.addToHome', { app: phone.t(app.labelKey) })
+                    phone.t('Home.addToHome', {
+                      app: getPhoneAppLabel(app, phone.t),
+                    })
                   "
                   @click.stop="restoreHomeApp(app.id)"
                 >
@@ -864,14 +871,16 @@ watch(isEditablePage, (visible) => {
                 class="app-library-row"
               >
                 <AppIcon :app="app" compact :show-label="false" />
-                <span>{{ phone.t(app.labelKey) }}</span>
+                <span>{{ getPhoneAppLabel(app, phone.t) }}</span>
                 <k-button
                   v-if="appStore.homeLayout.hidden.includes(app.id)"
                   small
                   rounded
                   class="app-library-row-restore"
                   :aria-label="
-                    phone.t('Home.addToHome', { app: phone.t(app.labelKey) })
+                    phone.t('Home.addToHome', {
+                      app: getPhoneAppLabel(app, phone.t),
+                    })
                   "
                   @click.stop="restoreHomeApp(app.id)"
                 >
diff --git a/frontend/src/views/apps/AppStoreApp.vue b/frontend/src/views/apps/AppStoreApp.vue
index ecd399c..301b40e 100644
--- a/frontend/src/views/apps/AppStoreApp.vue
+++ b/frontend/src/views/apps/AppStoreApp.vue
@@ -11,7 +11,11 @@ import { Gamepad2, Grid2X2, Search } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { PHONE_APPS } from '@/config/apps'
+import {
+  getPhoneAppLabel,
+  isLaunchablePhoneApp,
+  PHONE_APPS,
+} from '@/config/apps'
 import { useAppStoreStore } from '@/stores/app-store'
 import { usePhoneStore } from '@/stores/phone'
 import type {
@@ -35,16 +39,11 @@ const tabBarColors = {
 }
 const catalog = computed(() =>
   PHONE_APPS.filter((app): app is LaunchablePhoneAppDefinition => {
-    if (
-      app.component === null ||
-      app.route === null ||
-      app.id === 'app-store'
-    ) {
+    if (!isLaunchablePhoneApp(app) || app.id === 'app-store') {
       return false
     }
 
-    const installed =
-      app.category !== 'games' || appStore.claimedApps.includes(app.id)
+    const installed = appStore.isInstalled(app.id)
     return (
       !installed ||
       appStore.homeLayout.hidden.includes(app.id) ||
@@ -63,7 +62,9 @@ const shownApps = computed(() => {
   const search = query.value.trim().toLocaleLowerCase(phone.lang)
   if (!search) return catalog.value
   return catalog.value.filter((app) =>
-    phone.t(app.labelKey).toLocaleLowerCase(phone.lang).includes(search),
+    getPhoneAppLabel(app, phone.t)
+      .toLocaleLowerCase(phone.lang)
+      .includes(search),
   )
 })
 
@@ -76,8 +77,7 @@ function appAction(
 ): 'get' | 'installing' | 'open' {
   if (appStore.installingApps[app.id]) return 'installing'
 
-  const installed =
-    app.category !== 'games' || appStore.claimedApps.includes(app.id)
+  const installed = appStore.isInstalled(app.id)
   if (
     installed &&
     !appStore.homeLayout.hidden.includes(app.id) &&
@@ -130,13 +130,13 @@ function handleApp(app: LaunchablePhoneAppDefinition): void {
             draggable="false"
           />
           <div>
-            <strong>{{ phone.t(app.labelKey) }}</strong>
+            <strong>{{ getPhoneAppLabel(app, phone.t) }}</strong>
             <small>{{ phone.t(`Home.groups.${app.category}`) }}</small>
           </div>
           <button
             type="button"
             :disabled="appStore.installingApps[app.id]"
-            :aria-label="`${phone.t(app.labelKey)} ${phone.t(
+            :aria-label="`${getPhoneAppLabel(app, phone.t)} ${phone.t(
               `Apps.appStore.${appAction(app)}`,
             )}`"
             @click="handleApp(app)"
diff --git a/frontend/src/views/apps/BillingApp.vue b/frontend/src/views/apps/BillingApp.vue
index 25c40b0..5b277a5 100644
--- a/frontend/src/views/apps/BillingApp.vue
+++ b/frontend/src/views/apps/BillingApp.vue
@@ -51,6 +51,7 @@ import type {
   BillingStatus,
   InvoiceSummary,
 } from '@/types/billing'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type BillingTab = 'overview' | 'inbox' | 'history'
 type BillingScreen = 'main' | 'detail'
@@ -225,6 +226,7 @@ async function disputeInvoice(): Promise<void> {
 }
 
 function onBillingMessage(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (
     event.data?.type !== 'billing:changed' &&
     event.data?.type !== 'billing:new'
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index c1e604e..fe9b6e1 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -20,6 +20,7 @@ import type { MediaType, PhoneMedia, UploadResult } from '@/types/media'
 import { createGameView, type GameView } from '@/utils/gameView'
 import { formatRecordingDuration, mediaErrorKey } from '@/utils/media'
 import { nuiCall } from '@/utils/nui'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type CaptureItem = {
   error?: string
@@ -333,6 +334,7 @@ function onKeydown(event: KeyboardEvent): void {
 }
 
 function onMessage(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   const message = event.data as {
     data?: Record<string, unknown>
     type?: string
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
new file mode 100644
index 0000000..46176eb
--- /dev/null
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -0,0 +1,3331 @@
+<script setup lang="ts">
+import {
+  kActions,
+  kActionsButton,
+  kActionsGroup,
+  kBadge,
+  kBlock,
+  kBlockTitle,
+  kButton,
+  kCard,
+  kChip,
+  kDialog,
+  kDialogButton,
+  kIcon,
+  kLink,
+  kList,
+  kListInput,
+  kListItem,
+  kMessage,
+  kMessagebar,
+  kMessages,
+  kMessagesTitle,
+  kNavbar,
+  kNavbarBackLink,
+  kPage,
+  kPreloader,
+  kProgressbar,
+  kRadio,
+  kSearchbar,
+  kSegmented,
+  kSegmentedButton,
+  kSheet,
+  kTabbar,
+  kTabbarLink,
+  kToast,
+  kToggle,
+  kToolbarPane,
+} from 'konsta/vue'
+import {
+  BadgeCheck,
+  BriefcaseBusiness,
+  Building2,
+  Check,
+  CheckCircle2,
+  CircleAlert,
+  ClipboardList,
+  Clock3,
+  Compass,
+  ImagePlus,
+  MapPin,
+  Megaphone,
+  MessageCircle,
+  MoreHorizontal,
+  Phone,
+  PhoneCall,
+  Plus,
+  RefreshCw,
+  Send,
+  Settings2,
+  Trash2,
+  UserRound,
+  UsersRound,
+  X,
+} from 'lucide-vue-next'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useCallsStore } from '@/stores/calls'
+import { useCompaniesStore } from '@/stores/companies'
+import { useMessageMediaStore } from '@/stores/messageMedia'
+import { useMessagesStore } from '@/stores/messages'
+import { usePhoneStore } from '@/stores/phone'
+import type {
+  Company,
+  CompanyAvailability,
+  CompanyCoordinates,
+  CompanyDirectoryFilters,
+  CompanyHours,
+  CompanyRequestEvent,
+  CompanyRequestList,
+  CompanyRequestStatus,
+  CompanyRequestSummary,
+  CompanyService,
+  CompanySummary,
+  CompanyWorkFilter,
+} from '@/types/companies'
+import type { PhoneMedia } from '@/types/media'
+import { nuiCall } from '@/utils/nui'
+
+type CompaniesTab = 'directory' | 'requests' | 'work'
+type CompaniesScreen = 'company' | 'manager' | 'request' | 'root'
+type RequestOrigin = 'customer' | 'work'
+
+type RequestMediaContext = {
+  companyId: string
+  description: string
+  media: PhoneMedia[]
+  serviceId: string
+  subject: string
+}
+
+type ManagerProfileDraft = {
+  acceptsRequests: boolean
+  address: string
+  description: string
+  district: string
+  locationLabel: string
+}
+
+type ManagerMediaContext = {
+  announcement: { body: string; expiresAt: string }
+  companyId: string
+  coords: CompanyCoordinates | null
+  coverMedia: PhoneMedia | null
+  hours: CompanyHours[]
+  kind: 'cover' | 'logo'
+  logoMedia: PhoneMedia | null
+  profile: ManagerProfileDraft
+  services: CompanyService[]
+}
+
+const phone = usePhoneStore()
+const calls = useCallsStore()
+const messages = useMessagesStore()
+const companies = useCompaniesStore()
+const mediaPicker = useMessageMediaStore()
+const route = useRoute()
+const router = useRouter()
+
+const activeTab = ref<CompaniesTab>('directory')
+const screen = ref<CompaniesScreen>('root')
+const requestOrigin = ref<RequestOrigin>('customer')
+const search = ref('')
+const selectedCategory = ref<string | null>(null)
+const onlyAvailable = ref(false)
+const onlyWithLocation = ref(false)
+const onlyAcceptingRequests = ref(false)
+const directorySort = ref<CompanyDirectoryFilters['sort']>('relevance')
+const requestList = ref<CompanyRequestList>('open')
+const workFilter = ref<CompanyWorkFilter>('new')
+const requestSheetOpened = ref(false)
+const requestConfirmOpened = ref(false)
+const requestServiceId = ref('')
+const requestSubject = ref('')
+const requestDescription = ref('')
+const requestMedia = ref<PhoneMedia[]>([])
+const threadDraft = ref('')
+const workActionsOpened = ref(false)
+const assignmentSheetOpened = ref(false)
+const selectedMemberId = ref('')
+const cancelDialogOpened = ref(false)
+const conflictDialogOpened = ref(false)
+const toastOpened = ref(false)
+const toastText = ref('')
+const profileDraft = reactive<ManagerProfileDraft>({
+  acceptsRequests: false,
+  address: '',
+  description: '',
+  district: '',
+  locationLabel: '',
+})
+const hoursDraft = ref<CompanyHours[]>([])
+const servicesDraft = ref<CompanyService[]>([])
+const announcementDraft = reactive({ body: '', expiresAt: '' })
+const profileCoords = ref<CompanyCoordinates | null>(null)
+const selectedLogoMedia = ref<PhoneMedia | null>(null)
+const selectedCoverMedia = ref<PhoneMedia | null>(null)
+
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+let toastTimer: ReturnType<typeof setTimeout> | undefined
+
+const directoryFilters = computed<CompanyDirectoryFilters>(() => ({
+  acceptsRequests: onlyAcceptingRequests.value,
+  availability: onlyAvailable.value ? 'available' : null,
+  categoryId: selectedCategory.value,
+  hasLocation: onlyWithLocation.value,
+  search: search.value.trim(),
+  sort: directorySort.value,
+}))
+const availableCompanies = computed(() =>
+  companies.directory.filter((company) => company.availability === 'available'),
+)
+const filtersActive = computed(
+  () =>
+    Boolean(search.value.trim()) ||
+    Boolean(selectedCategory.value) ||
+    onlyAvailable.value ||
+    onlyWithLocation.value ||
+    onlyAcceptingRequests.value,
+)
+const activeCompany = computed(() => companies.company)
+const workCompany = computed(() => companies.workContext?.company ?? null)
+const managerLogoUrl = computed(
+  () => selectedLogoMedia.value?.url ?? workCompany.value?.logoUrl ?? null,
+)
+const managerCoverUrl = computed(
+  () => selectedCoverMedia.value?.url ?? workCompany.value?.coverUrl ?? null,
+)
+const selectedService = computed(() =>
+  activeCompany.value?.services.find(
+    (service) => service.id === requestServiceId.value,
+  ),
+)
+const requestProgress = computed(() => {
+  if (!requestServiceId.value) return 0.25
+  if (!requestSubject.value.trim() || !requestDescription.value.trim())
+    return 0.5
+  if (!phone.device?.sim?.registered) return 0.75
+  return 1
+})
+const canSubmitRequest = computed(
+  () =>
+    Boolean(requestServiceId.value) &&
+    requestSubject.value.trim().length >= 3 &&
+    requestDescription.value.trim().length >= 10 &&
+    Boolean(phone.device?.sim?.registered) &&
+    !companies.mutating,
+)
+const canSendThreadMessage = computed(
+  () =>
+    Boolean(companies.request?.actions.canReply) &&
+    Boolean(threadDraft.value.trim()) &&
+    !companies.mutating,
+)
+const navbarTitle = computed(() => {
+  if (screen.value === 'company') return activeCompany.value?.name ?? ''
+  if (screen.value === 'request') {
+    return companies.request?.subject ?? phone.t('Apps.companies.request')
+  }
+  if (screen.value === 'manager') {
+    return phone.t('Apps.companies.manager.title')
+  }
+  return phone.t('Apps.companies.name')
+})
+const availabilityValues: CompanyAvailability[] = [
+  'available',
+  'busy',
+  'closed',
+]
+const workFilters: CompanyWorkFilter[] = [
+  'new',
+  'assigned',
+  'in_progress',
+  'waiting_customer',
+  'completed',
+]
+const weekdayKeys = [
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday',
+] as const
+
+function eventValue(event: Event): string {
+  if (
+    !(event.target instanceof HTMLInputElement) &&
+    !(event.target instanceof HTMLTextAreaElement) &&
+    !(event.target instanceof HTMLSelectElement)
+  ) {
+    console.error(
+      '[companies] Input event did not originate from a form field.',
+    )
+    return ''
+  }
+  return event.target.value
+}
+
+function messagebarValue(event: Event): string {
+  if (!(event.target instanceof HTMLTextAreaElement)) {
+    console.error(
+      '[companies] Message event did not originate from a textarea.',
+    )
+    return ''
+  }
+  return event.target.value
+}
+
+function showToast(message: string): void {
+  if (toastTimer) clearTimeout(toastTimer)
+  toastText.value = message
+  toastOpened.value = true
+  toastTimer = setTimeout(() => (toastOpened.value = false), 2800)
+}
+
+function errorText(code = 'request_failed'): string {
+  const phoneErrors = ['airplane_mode', 'busy', 'no_sim', 'voice_unavailable']
+  if (phoneErrors.includes(code)) return phone.t(`Apps.phone.errors.${code}`)
+  const known = [
+    'anonymous_sim',
+    'call_unavailable',
+    'company_not_found',
+    'invalid_media',
+    'invalid_expiration',
+    'invalid_profile',
+    'invalid_request',
+    'invalid_service',
+    'invalid_status',
+    'messaging_unavailable',
+    'no_sim',
+    'not_authorized',
+    'rate_limited',
+    'request_not_found',
+    'revision_conflict',
+    'service_unavailable',
+    'too_many_open_requests',
+  ]
+  const key = known.includes(code) ? code : 'request_failed'
+  return phone.t(`Apps.companies.errors.${key}`)
+}
+
+function formatDate(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return new Intl.DateTimeFormat(phone.lang, {
+    day: 'numeric',
+    hour: '2-digit',
+    hourCycle: 'h23',
+    minute: '2-digit',
+    month: 'short',
+  }).format(date)
+}
+
+function localDateTimeInput(value: string | null | undefined): string {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const parts = [
+    date.getFullYear(),
+    String(date.getMonth() + 1).padStart(2, '0'),
+    String(date.getDate()).padStart(2, '0'),
+    String(date.getHours()).padStart(2, '0'),
+    String(date.getMinutes()).padStart(2, '0'),
+  ]
+  return `${parts[0]}-${parts[1]}-${parts[2]}T${parts[3]}:${parts[4]}`
+}
+
+function relativeTime(value: string): string {
+  const timestamp = new Date(value).getTime()
+  if (Number.isNaN(timestamp)) return ''
+  const minutes = Math.max(0, Math.floor((Date.now() - timestamp) / 60_000))
+  if (minutes < 1) return phone.t('Apps.companies.time.justNow')
+  if (minutes < 60) {
+    return phone.t('Apps.companies.time.minutesAgo', {
+      count: String(minutes),
+    })
+  }
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) {
+    return phone.t('Apps.companies.time.hoursAgo', { count: String(hours) })
+  }
+  return phone.t('Apps.companies.time.daysAgo', {
+    count: String(Math.floor(hours / 24)),
+  })
+}
+
+function companyInitials(company: CompanySummary): string {
+  return company.name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word[0] ?? '')
+    .join('')
+    .toUpperCase()
+}
+
+function categoryLabel(categoryId: string, fallback: string): string {
+  const key = `Apps.companies.categories.${categoryId}`
+  const translated = phone.t(key)
+  return translated === key ? fallback : translated
+}
+
+function statusClass(
+  status: CompanyAvailability | CompanyRequestStatus,
+): string {
+  return `is-${status.replace('_', '-')}`
+}
+
+function requestSubtitle(request: CompanyRequestSummary): string {
+  const parts = [request.serviceName, relativeTime(request.updatedAt)].filter(
+    Boolean,
+  )
+  return parts.join(' · ')
+}
+
+function assignmentLabel(
+  value: CompanyRequestSummary['assignedLabel'],
+): string {
+  return value
+    ? phone.t(`Apps.companies.assignmentLabels.${value}`)
+    : phone.t('Apps.companies.work.unassigned')
+}
+
+function messageAuthorLabel(value: 'company' | 'customer' | 'you'): string {
+  return phone.t(`Apps.companies.messageAuthors.${value}`)
+}
+
+function memberName(name: string): string {
+  return name.trim() || phone.t('Apps.companies.assignment.unknownMember')
+}
+
+function maskedPhoneNumber(value: string): string {
+  return value.replace(/.(?=.{4})/g, '•')
+}
+
+function eventLabel(event: CompanyRequestEvent): string {
+  if (event.type === 'status_changed' && event.status) {
+    return phone.t('Apps.companies.timeline.statusChanged', {
+      status: phone.t(`Apps.companies.requestStatuses.${event.status}`),
+    })
+  }
+  return phone.t(`Apps.companies.timeline.${event.type}`)
+}
+
+function resetDirectoryFilters(): void {
+  search.value = ''
+  selectedCategory.value = null
+  onlyAvailable.value = false
+  onlyWithLocation.value = false
+  onlyAcceptingRequests.value = false
+  directorySort.value = 'relevance'
+  void companies.loadCompanies(directoryFilters.value)
+}
+
+function queueDirectoryLoad(): void {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(
+    () => void companies.loadCompanies(directoryFilters.value),
+    260,
+  )
+}
+
+function selectCategory(categoryId: string | null): void {
+  selectedCategory.value = categoryId
+}
+
+async function selectTab(tab: CompaniesTab): Promise<void> {
+  activeTab.value = tab
+  screen.value = 'root'
+  if (tab === 'directory' && !companies.directory.length) {
+    await companies.loadCompanies(directoryFilters.value)
+  }
+  if (tab === 'requests') await companies.loadMyRequests(requestList.value)
+  if (tab === 'work') {
+    const loaded = await companies.loadWorkContext()
+    if (loaded && companies.workContext?.authorized) {
+      await companies.loadWorkQueue(workFilter.value)
+    }
+  }
+}
+
+async function openCompany(companyId: string): Promise<void> {
+  companies.company = null
+  screen.value = 'company'
+  if (!(await companies.loadCompany(companyId))) {
+    showToast(errorText(companies.directoryError))
+  }
+}
+
+async function openRequest(
+  requestId: string,
+  origin: RequestOrigin,
+): Promise<void> {
+  requestOrigin.value = origin
+  companies.resetRequest()
+  screen.value = 'request'
+  if (!(await companies.loadRequest(requestId))) {
+    showToast(errorText(companies.requestError))
+  }
+}
+
+function goBack(): void {
+  if (screen.value === 'manager') {
+    screen.value = 'root'
+    activeTab.value = 'work'
+    return
+  }
+  if (screen.value === 'request') {
+    companies.resetRequest()
+    screen.value = 'root'
+    activeTab.value = requestOrigin.value === 'work' ? 'work' : 'requests'
+    return
+  }
+  screen.value = 'root'
+  activeTab.value = 'directory'
+}
+
+async function callNumber(phoneNumber: string | null): Promise<void> {
+  if (!phoneNumber) {
+    showToast(phone.t('Apps.companies.actionUnavailable.call'))
+    return
+  }
+  const response = await calls.dial(phoneNumber)
+  if (!response.success) {
+    showToast(errorText(response.error))
+    return
+  }
+  await router.push('/apps/phone')
+}
+
+async function messageCompany(company: CompanySummary): Promise<void> {
+  if (!company.canMessage || !company.phoneNumber) {
+    showToast(phone.t('Apps.companies.actionUnavailable.message'))
+    return
+  }
+  if (!(await messages.openThread(company.phoneNumber))) {
+    showToast(errorText('messaging_unavailable'))
+    return
+  }
+  await router.push('/apps/messages')
+}
+
+async function setRoute(company: CompanySummary): Promise<void> {
+  if (!company.location) {
+    showToast(phone.t('Apps.companies.actionUnavailable.route'))
+    return
+  }
+  const response = await nuiCall('map:setWaypoint', {
+    coords: company.location.coords,
+  })
+  if (!response.success) {
+    showToast(errorText(response.error))
+    return
+  }
+  showToast(phone.t('Apps.companies.routeSet'))
+}
+
+function openRequestComposer(company: Company): void {
+  if (!company.acceptsRequests) {
+    showToast(phone.t('Apps.companies.actionUnavailable.request'))
+    return
+  }
+  requestServiceId.value =
+    company.services.find(
+      (service) => service.active && service.acceptsRequests,
+    )?.id ?? ''
+  requestSubject.value = ''
+  requestDescription.value = ''
+  requestMedia.value = []
+  requestSheetOpened.value = true
+}
+
+function chooseRequestMedia(): void {
+  if (!activeCompany.value) return
+  mediaPicker.begin(
+    'companies:request',
+    'photo',
+    '/apps/companies?compose=1',
+    3,
+    {
+      companyId: activeCompany.value.id,
+      description: requestDescription.value,
+      media: requestMedia.value,
+      serviceId: requestServiceId.value,
+      subject: requestSubject.value,
+    } satisfies RequestMediaContext,
+  )
+  requestSheetOpened.value = false
+  void router.push({
+    path: '/apps/photos',
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
+function removeRequestMedia(id: number): void {
+  requestMedia.value = requestMedia.value.filter((media) => media.id !== id)
+}
+
+async function submitRequest(): Promise<void> {
+  if (!activeCompany.value || !canSubmitRequest.value) return
+  const response = await companies.createRequest({
+    companyId: activeCompany.value.id,
+    description: requestDescription.value.trim(),
+    mediaIds: requestMedia.value.map((media) => String(media.id)),
+    serviceId: requestServiceId.value,
+    subject: requestSubject.value.trim(),
+  })
+  requestConfirmOpened.value = false
+  if (!response.success || !response.data?.request) {
+    if (response.error === 'revision_conflict')
+      conflictDialogOpened.value = true
+    else showToast(errorText(response.error))
+    return
+  }
+  requestSheetOpened.value = false
+  showToast(phone.t('Apps.companies.feedback.requestCreated'))
+  activeTab.value = 'requests'
+  requestOrigin.value = 'customer'
+  screen.value = 'request'
+  await companies.loadMyRequests('open')
+}
+
+async function sendThreadMessage(): Promise<void> {
+  const request = companies.request
+  if (!request || !canSendThreadMessage.value) return
+  const response = await companies.sendMessage(
+    request.id,
+    threadDraft.value.trim(),
+    request.revision,
+  )
+  if (!response.success) {
+    if (response.error === 'revision_conflict')
+      conflictDialogOpened.value = true
+    else showToast(errorText(response.error))
+    return
+  }
+  threadDraft.value = ''
+}
+
+async function cancelActiveRequest(): Promise<void> {
+  const request = companies.request
+  if (!request) return
+  const response = await companies.cancelRequest(request.id, request.revision)
+  cancelDialogOpened.value = false
+  if (!response.success) {
+    if (response.error === 'revision_conflict')
+      conflictDialogOpened.value = true
+    else showToast(errorText(response.error))
+    return
+  }
+  showToast(phone.t('Apps.companies.feedback.requestCancelled'))
+}
+
+async function claimActiveRequest(): Promise<void> {
+  const request = companies.request
+  if (!request) return
+  const response = await companies.claimRequest(request.id, request.revision)
+  workActionsOpened.value = false
+  if (!response.success) {
+    if (response.error === 'revision_conflict')
+      conflictDialogOpened.value = true
+    else showToast(errorText(response.error))
+    return
+  }
+  showToast(phone.t('Apps.companies.feedback.requestClaimed'))
+}
+
+async function openAssignment(): Promise<void> {
+  workActionsOpened.value = false
+  selectedMemberId.value = ''
+  if (!(await companies.loadMembers())) {
+    showToast(errorText(companies.mutationError))
+    return
+  }
+  assignmentSheetOpened.value = true
+}
+
+async function assignActiveRequest(): Promise<void> {
+  const request = companies.request
+  if (!request || !selectedMemberId.value) return
+  const response = await companies.assignRequest(
+    request.id,
+    selectedMemberId.value,
+    request.revision,
+  )
+  if (!response.success) {
+    if (response.error === 'revision_conflict')
+      conflictDialogOpened.value = true
+    else showToast(errorText(response.error))
+    return
+  }
+  assignmentSheetOpened.value = false
+  showToast(phone.t('Apps.companies.feedback.requestAssigned'))
+}
+
+async function updateActiveRequestStatus(
+  status: CompanyRequestStatus,
+): Promise<void> {
+  const request = companies.request
+  if (!request) return
+  const response = await companies.updateRequestStatus(
+    request.id,
+    status,
+    request.revision,
+  )
+  workActionsOpened.value = false
+  if (!response.success) {
+    if (response.error === 'revision_conflict')
+      conflictDialogOpened.value = true
+    else showToast(errorText(response.error))
+    return
+  }
+  showToast(phone.t('Apps.companies.feedback.statusUpdated'))
+}
+
+async function callRequestParty(): Promise<void> {
+  const request = companies.request
+  if (!request) return
+  if (requestOrigin.value === 'work') {
+    const response = await companies.callCustomer(request.id)
+    workActionsOpened.value = false
+    if (!response.success) {
+      showToast(errorText(response.error))
+      return
+    }
+    if (response.data) calls.applyCallState(response.data)
+    await router.push('/apps/phone')
+    return
+  }
+  await callNumber(request.phoneNumber)
+}
+
+async function setCompanyAvailability(
+  availability: CompanyAvailability,
+): Promise<void> {
+  const company = workCompany.value
+  if (!company) return
+  const response = await companies.updateAvailability(
+    availability,
+    company.revision,
+  )
+  if (!response.success) {
+    if (response.error === 'revision_conflict')
+      conflictDialogOpened.value = true
+    else showToast(errorText(response.error))
+    return
+  }
+  showToast(phone.t('Apps.companies.feedback.availabilityUpdated'))
+}
+
+async function toggleCallAvailability(): Promise<void> {
+  const context = companies.workContext
+  if (!context) return
+  const response = await companies.setCallAvailability(!context.callAvailable)
+  if (!response.success) {
+    showToast(errorText(response.error))
+    return
+  }
+  showToast(
+    phone.t(
+      `Apps.companies.feedback.${response.data?.context.callAvailable ? 'callsEnabled' : 'callsDisabled'}`,
+    ),
+  )
+}
+
+function syncManagerDraft(company: Company): void {
+  profileDraft.acceptsRequests = company.acceptsRequests
+  profileDraft.address = company.location?.address ?? ''
+  profileDraft.description = company.description
+  profileDraft.district = company.location?.district ?? ''
+  profileDraft.locationLabel = company.location?.label ?? ''
+  hoursDraft.value = weekdayKeys.map((_, day) => {
+    const existing = company.hours.find((hours) => hours.day === day)
+    return existing
+      ? { ...existing }
+      : { closesAt: '18:00', day, isClosed: true, opensAt: '09:00' }
+  })
+  servicesDraft.value = company.services.map((service) => ({ ...service }))
+  announcementDraft.body = company.announcement?.body ?? ''
+  announcementDraft.expiresAt = localDateTimeInput(
+    company.announcement?.expiresAt,
+  )
+  profileCoords.value = company.location?.coords
+    ? { ...company.location.coords }
+    : null
+  selectedLogoMedia.value = null
+  selectedCoverMedia.value = null
+}
+
+function openManager(): void {
+  const company = workCompany.value
+  if (!company) return
+  syncManagerDraft(company)
+  screen.value = 'manager'
+}
+
+function managerResponseError(error?: string): void {
+  if (error === 'revision_conflict') {
+    conflictDialogOpened.value = true
+    return
+  }
+  showToast(errorText(error))
+}
+
+function chooseManagerMedia(kind: 'cover' | 'logo'): void {
+  const company = workCompany.value
+  if (!company) return
+  mediaPicker.begin(
+    'companies:manager-media',
+    'photo',
+    '/apps/companies?managerMedia=1',
+    1,
+    {
+      announcement: { ...announcementDraft },
+      companyId: company.id,
+      coords: profileCoords.value ? { ...profileCoords.value } : null,
+      coverMedia: selectedCoverMedia.value,
+      hours: hoursDraft.value.map((hours) => ({ ...hours })),
+      kind,
+      logoMedia: selectedLogoMedia.value,
+      profile: { ...profileDraft },
+      services: servicesDraft.value.map((service) => ({ ...service })),
+    } satisfies ManagerMediaContext,
+  )
+  void router.push({
+    path: '/apps/photos',
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
+async function useCurrentLocation(): Promise<void> {
+  const response = await nuiCall<{ coords?: CompanyCoordinates }>(
+    'map:getPlayerCoords',
+  )
+  if (!response.success || !response.data?.coords) {
+    showToast(errorText(response.error))
+    return
+  }
+  profileCoords.value = { ...response.data.coords }
+  showToast(phone.t('Apps.companies.feedback.locationUpdated'))
+}
+
+async function saveProfile(): Promise<void> {
+  const company = workCompany.value
+  if (!company) return
+  const response = await companies.updateProfile({
+    acceptsRequests: profileDraft.acceptsRequests,
+    address: profileDraft.address.trim(),
+    ...(profileCoords.value ? { coords: profileCoords.value } : {}),
+    ...(selectedCoverMedia.value
+      ? { coverMediaId: selectedCoverMedia.value.id }
+      : {}),
+    description: profileDraft.description.trim(),
+    district: profileDraft.district.trim(),
+    ...(selectedLogoMedia.value
+      ? { logoMediaId: selectedLogoMedia.value.id }
+      : {}),
+    locationLabel: profileDraft.locationLabel.trim(),
+    revision: company.revision,
+  })
+  if (!response.success || !response.data?.company) {
+    managerResponseError(response.error)
+    return
+  }
+  syncManagerDraft(response.data.company)
+  showToast(phone.t('Apps.companies.feedback.profileSaved'))
+}
+
+function updateHour(
+  index: number,
+  field: 'closesAt' | 'opensAt',
+  event: Event,
+): void {
+  hoursDraft.value[index][field] = eventValue(event)
+}
+
+async function saveHours(): Promise<void> {
+  const company = workCompany.value
+  if (!company) return
+  const response = await companies.updateHours(
+    company.revision,
+    hoursDraft.value,
+  )
+  if (!response.success || !response.data?.company) {
+    managerResponseError(response.error)
+    return
+  }
+  syncManagerDraft(response.data.company)
+  showToast(phone.t('Apps.companies.feedback.hoursSaved'))
+}
+
+function addService(): void {
+  servicesDraft.value.push({
+    acceptsRequests: true,
+    active: true,
+    description: '',
+    id: '',
+    priceText: null,
+    title: '',
+  })
+}
+
+function removeService(index: number): void {
+  servicesDraft.value.splice(index, 1)
+}
+
+function updateService(
+  index: number,
+  field: 'description' | 'priceText' | 'title',
+  event: Event,
+): void {
+  servicesDraft.value[index][field] = eventValue(event)
+}
+
+async function saveServices(): Promise<void> {
+  const company = workCompany.value
+  if (!company) return
+  const response = await companies.updateServices(
+    company.revision,
+    servicesDraft.value,
+  )
+  if (!response.success || !response.data?.company) {
+    managerResponseError(response.error)
+    return
+  }
+  syncManagerDraft(response.data.company)
+  showToast(phone.t('Apps.companies.feedback.servicesSaved'))
+}
+
+async function publishAnnouncement(): Promise<void> {
+  const company = workCompany.value
+  if (!company) return
+  let expiresAt: string | null = null
+  if (announcementDraft.expiresAt) {
+    const expiration = new Date(announcementDraft.expiresAt)
+    if (Number.isNaN(expiration.getTime())) {
+      showToast(errorText('invalid_expiration'))
+      return
+    }
+    expiresAt = expiration.toISOString()
+  }
+  const response = await companies.publishAnnouncement({
+    body: announcementDraft.body.trim(),
+    expiresAt,
+    revision: company.revision,
+  })
+  if (!response.success || !response.data?.company) {
+    managerResponseError(response.error)
+    return
+  }
+  syncManagerDraft(response.data.company)
+  showToast(phone.t('Apps.companies.feedback.announcementPublished'))
+}
+
+async function reloadConflict(): Promise<void> {
+  conflictDialogOpened.value = false
+  const loaded = await companies.loadWorkContext()
+  if (loaded && companies.workContext?.company) {
+    syncManagerDraft(companies.workContext.company)
+  }
+  if (companies.request) await companies.loadRequest(companies.request.id)
+}
+
+watch(search, queueDirectoryLoad)
+watch(
+  [
+    selectedCategory,
+    onlyAvailable,
+    onlyWithLocation,
+    onlyAcceptingRequests,
+    directorySort,
+  ],
+  () => void companies.loadCompanies(directoryFilters.value),
+)
+watch(requestList, () => {
+  if (activeTab.value === 'requests')
+    void companies.loadMyRequests(requestList.value)
+})
+watch(workFilter, () => {
+  if (activeTab.value === 'work' && companies.workContext?.authorized) {
+    void companies.loadWorkQueue(workFilter.value)
+  }
+})
+watch(
+  () => route.query.requestId,
+  async (requestId) => {
+    if (typeof requestId !== 'string') return
+    const origin: RequestOrigin =
+      route.query.area === 'work' ? 'work' : 'customer'
+    await router.replace('/apps/companies')
+    await openRequest(requestId, origin)
+  },
+)
+
+onMounted(async () => {
+  const selection =
+    mediaPicker.consumeMany<RequestMediaContext>('companies:request')
+  const managerSelection = mediaPicker.consumeMany<ManagerMediaContext>(
+    'companies:manager-media',
+  )
+  const linkedRequestId =
+    typeof route.query.requestId === 'string' ? route.query.requestId : null
+  const linkedRequestOrigin: RequestOrigin =
+    route.query.area === 'work' ? 'work' : 'customer'
+  await Promise.all([
+    companies.loadCompanies(directoryFilters.value),
+    companies.loadMyRequests('open'),
+    companies.loadWorkContext(),
+    calls.loadContacts(),
+  ])
+  if (linkedRequestId) {
+    await router.replace('/apps/companies')
+    await openRequest(linkedRequestId, linkedRequestOrigin)
+    return
+  }
+  if (
+    managerSelection?.context &&
+    managerSelection.context.companyId === workCompany.value?.id &&
+    companies.workContext?.permissions.canManageProfile
+  ) {
+    const context = managerSelection.context
+    openManager()
+    Object.assign(profileDraft, context.profile)
+    hoursDraft.value = context.hours.map((hours) => ({ ...hours }))
+    servicesDraft.value = context.services.map((service) => ({ ...service }))
+    announcementDraft.body = context.announcement.body
+    announcementDraft.expiresAt = context.announcement.expiresAt
+    profileCoords.value = context.coords ? { ...context.coords } : null
+    selectedLogoMedia.value = context.logoMedia
+    selectedCoverMedia.value = context.coverMedia
+    const selectedMedia = managerSelection.media[0]
+    if (selectedMedia && context.kind === 'logo') {
+      selectedLogoMedia.value = selectedMedia
+    } else if (selectedMedia && context.kind === 'cover') {
+      selectedCoverMedia.value = selectedMedia
+    }
+    return
+  }
+  if (!selection?.context) return
+  await openCompany(selection.context.companyId)
+  requestServiceId.value = selection.context.serviceId
+  requestSubject.value = selection.context.subject
+  requestDescription.value = selection.context.description
+  requestMedia.value = selection.media.length
+    ? selection.media
+    : selection.context.media
+  requestSheetOpened.value = true
+})
+
+onBeforeUnmount(() => {
+  if (searchTimer) clearTimeout(searchTimer)
+  if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<template>
+  <k-page
+    component="main"
+    class="companies-app"
+    :class="{ 'companies-app--dark': phone.isDarkMode }"
+    :colors="{ bgIos: 'bg-transparent' }"
+    :aria-label="phone.t('Apps.companies.name')"
+  >
+    <div class="companies-backdrop" aria-hidden="true"></div>
+
+    <k-navbar :title="navbarTitle" class="companies-navbar">
+      <template v-if="screen !== 'root'" #left>
+        <k-navbar-back-link
+          :text="phone.t('Apps.companies.back')"
+          :show-text="false"
+          @click="goBack"
+        />
+      </template>
+      <template
+        v-if="
+          screen === 'request' && requestOrigin === 'work' && companies.request
+        "
+        #right
+      >
+        <k-link
+          component="button"
+          icon-only
+          :aria-label="phone.t('Apps.companies.actions')"
+          :link-props="{ type: 'button' }"
+          @click="workActionsOpened = true"
+        >
+          <MoreHorizontal :size="24" />
+        </k-link>
+      </template>
+    </k-navbar>
+
+    <section
+      v-if="screen === 'root' && activeTab === 'directory'"
+      class="companies-content companies-directory"
+    >
+      <div class="companies-search-wrap">
+        <k-searchbar
+          :value="search"
+          :placeholder="phone.t('Apps.companies.directory.searchPlaceholder')"
+          :disable-button="true"
+          @input="search = eventValue($event)"
+          @clear="search = ''"
+        />
+      </div>
+
+      <div
+        class="companies-chip-row"
+        :aria-label="phone.t('Apps.companies.directory.categories')"
+      >
+        <k-chip
+          component="button"
+          type="button"
+          :class="{ 'is-selected': selectedCategory === null }"
+          @click="selectCategory(null)"
+        >
+          {{ phone.t('Apps.companies.directory.allCategories') }}
+        </k-chip>
+        <k-chip
+          v-for="category in companies.categories"
+          :key="category.id"
+          component="button"
+          type="button"
+          :class="{ 'is-selected': selectedCategory === category.id }"
+          @click="selectCategory(category.id)"
+        >
+          {{ categoryLabel(category.id, category.name) }}
+        </k-chip>
+      </div>
+
+      <k-card class="companies-filter-card" :content-wrap="false">
+        <k-list nested>
+          <k-list-item
+            :title="phone.t('Apps.companies.directory.availableNow')"
+            :subtitle="phone.t('Apps.companies.directory.availableNowHint')"
+          >
+            <template #after>
+              <k-toggle
+                :checked="onlyAvailable"
+                :aria-label="phone.t('Apps.companies.directory.availableNow')"
+                @change="onlyAvailable = !onlyAvailable"
+              />
+            </template>
+          </k-list-item>
+          <k-list-item :title="phone.t('Apps.companies.directory.moreFilters')">
+            <template #after>
+              <div class="companies-inline-chips">
+                <k-chip
+                  component="button"
+                  type="button"
+                  :class="{ 'is-selected': onlyWithLocation }"
+                  @click="onlyWithLocation = !onlyWithLocation"
+                >
+                  {{ phone.t('Apps.companies.directory.hasLocation') }}
+                </k-chip>
+                <k-chip
+                  component="button"
+                  type="button"
+                  :class="{ 'is-selected': onlyAcceptingRequests }"
+                  @click="onlyAcceptingRequests = !onlyAcceptingRequests"
+                >
+                  {{ phone.t('Apps.companies.directory.acceptsRequests') }}
+                </k-chip>
+              </div>
+            </template>
+          </k-list-item>
+        </k-list>
+      </k-card>
+
+      <div v-if="companies.directoryLoading" class="companies-state">
+        <k-preloader />
+        <span>{{ phone.t('Apps.companies.loading.directory') }}</span>
+      </div>
+      <div v-else-if="companies.directoryError" class="companies-state">
+        <CircleAlert :size="34" />
+        <strong>{{ phone.t('Apps.companies.states.directoryError') }}</strong>
+        <p>{{ errorText(companies.directoryError) }}</p>
+        <k-button rounded @click="companies.loadCompanies(directoryFilters)">
+          <RefreshCw :size="16" />
+          {{ phone.t('Apps.companies.tryAgain') }}
+        </k-button>
+      </div>
+      <div v-else-if="!companies.directory.length" class="companies-state">
+        <Building2 :size="36" />
+        <strong>
+          {{
+            phone.t(
+              filtersActive
+                ? 'Apps.companies.states.noResults'
+                : 'Apps.companies.states.noCompanies',
+            )
+          }}
+        </strong>
+        <p>
+          {{
+            phone.t(
+              filtersActive
+                ? 'Apps.companies.states.noResultsBody'
+                : 'Apps.companies.states.noCompaniesBody',
+            )
+          }}
+        </p>
+        <k-button v-if="filtersActive" rounded @click="resetDirectoryFilters">
+          {{ phone.t('Apps.companies.directory.resetFilters') }}
+        </k-button>
+      </div>
+      <template v-else>
+        <template v-if="availableCompanies.length && !onlyAvailable">
+          <k-block-title>{{
+            phone.t('Apps.companies.directory.availableSection')
+          }}</k-block-title>
+          <div class="companies-featured-row">
+            <k-card
+              v-for="company in availableCompanies.slice(0, 4)"
+              :key="`available-${company.id}`"
+              component="button"
+              type="button"
+              class="company-feature-card"
+              @click="openCompany(company.id)"
+            >
+              <span class="company-logo company-logo--small">
+                <img
+                  v-if="company.logoUrl"
+                  :src="company.logoUrl"
+                  :alt="company.name"
+                />
+                <span v-else>{{ companyInitials(company) }}</span>
+              </span>
+              <strong>{{ company.name }}</strong>
+              <span>{{
+                company.location?.district ??
+                categoryLabel(company.categoryId, company.categoryName)
+              }}</span>
+              <k-badge :class="statusClass(company.availability)">
+                {{
+                  phone.t(`Apps.companies.availability.${company.availability}`)
+                }}
+              </k-badge>
+            </k-card>
+          </div>
+        </template>
+
+        <k-block-title>{{
+          phone.t('Apps.companies.directory.allCompanies')
+        }}</k-block-title>
+        <k-list inset strong class="company-list">
+          <k-list-item
+            v-for="company in companies.directory"
+            :key="company.id"
+            link
+            link-component="button"
+            :link-props="{ type: 'button' }"
+            :title="company.name"
+            :subtitle="company.serviceSummary || company.description"
+            @click="openCompany(company.id)"
+          >
+            <template #media>
+              <span class="company-logo">
+                <img
+                  v-if="company.logoUrl"
+                  :src="company.logoUrl"
+                  :alt="company.name"
+                />
+                <span v-else>{{ companyInitials(company) }}</span>
+              </span>
+            </template>
+            <template #after>
+              <span class="company-row-after">
+                <k-badge :class="statusClass(company.availability)">
+                  {{
+                    phone.t(
+                      `Apps.companies.availability.${company.availability}`,
+                    )
+                  }}
+                </k-badge>
+                <small>{{
+                  company.location?.district ??
+                  categoryLabel(company.categoryId, company.categoryName)
+                }}</small>
+              </span>
+            </template>
+          </k-list-item>
+        </k-list>
+        <k-button
+          v-if="companies.directoryNextCursor"
+          outline
+          rounded
+          class="companies-load-more"
+          :disabled="companies.directoryLoadingMore"
+          @click="companies.loadCompanies(directoryFilters, true)"
+        >
+          <k-preloader v-if="companies.directoryLoadingMore" />
+          <span v-else>{{ phone.t('Apps.companies.loadMore') }}</span>
+        </k-button>
+      </template>
+    </section>
+
+    <section
+      v-else-if="screen === 'root' && activeTab === 'requests'"
+      class="companies-content"
+    >
+      <div class="companies-segment-wrap">
+        <k-segmented strong rounded>
+          <k-segmented-button
+            :active="requestList === 'open'"
+            @click="requestList = 'open'"
+          >
+            {{ phone.t('Apps.companies.requests.open') }}
+          </k-segmented-button>
+          <k-segmented-button
+            :active="requestList === 'closed'"
+            @click="requestList = 'closed'"
+          >
+            {{ phone.t('Apps.companies.requests.closed') }}
+          </k-segmented-button>
+        </k-segmented>
+      </div>
+
+      <div v-if="companies.myRequestsLoading" class="companies-state">
+        <k-preloader />
+        <span>{{ phone.t('Apps.companies.loading.requests') }}</span>
+      </div>
+      <div v-else-if="companies.myRequestsError" class="companies-state">
+        <CircleAlert :size="34" />
+        <strong>{{ phone.t('Apps.companies.states.requestsError') }}</strong>
+        <p>{{ errorText(companies.myRequestsError) }}</p>
+        <k-button rounded @click="companies.loadMyRequests(requestList)">
+          {{ phone.t('Apps.companies.tryAgain') }}
+        </k-button>
+      </div>
+      <div v-else-if="!companies.myRequests.length" class="companies-state">
+        <ClipboardList :size="36" />
+        <strong>{{
+          phone.t(
+            `Apps.companies.states.no${requestList === 'open' ? 'Open' : 'Closed'}Requests`,
+          )
+        }}</strong>
+        <p>{{ phone.t('Apps.companies.states.noRequestsBody') }}</p>
+        <k-button
+          v-if="requestList === 'open'"
+          rounded
+          @click="selectTab('directory')"
+        >
+          {{ phone.t('Apps.companies.requests.findCompany') }}
+        </k-button>
+      </div>
+      <k-list v-else inset strong class="company-request-list">
+        <k-list-item
+          v-for="item in companies.myRequests"
+          :key="item.id"
+          link
+          link-component="button"
+          :link-props="{ type: 'button' }"
+          :title="item.subject"
+          :subtitle="requestSubtitle(item)"
+          :header="item.companyName"
+          @click="openRequest(item.id, 'customer')"
+        >
+          <template #media>
+            <span class="company-request-icon"
+              ><ClipboardList :size="19"
+            /></span>
+          </template>
+          <template #after>
+            <span class="request-row-after">
+              <k-badge v-if="item.unreadCount" class="is-unread">{{
+                item.unreadCount
+              }}</k-badge>
+              <k-badge :class="statusClass(item.status)">
+                {{ phone.t(`Apps.companies.requestStatuses.${item.status}`) }}
+              </k-badge>
+            </span>
+          </template>
+        </k-list-item>
+      </k-list>
+      <k-button
+        v-if="companies.myRequestsNextCursor"
+        outline
+        rounded
+        class="companies-load-more"
+        :disabled="companies.myRequestsLoadingMore"
+        @click="companies.loadMyRequests(requestList, true)"
+      >
+        {{ phone.t('Apps.companies.loadMore') }}
+      </k-button>
+    </section>
+
+    <section
+      v-else-if="screen === 'root' && activeTab === 'work'"
+      class="companies-content companies-work"
+    >
+      <div v-if="companies.workContextLoading" class="companies-state">
+        <k-preloader />
+        <span>{{ phone.t('Apps.companies.loading.work') }}</span>
+      </div>
+      <div v-else-if="companies.workContextError" class="companies-state">
+        <CircleAlert :size="34" />
+        <strong>{{ phone.t('Apps.companies.states.workError') }}</strong>
+        <p>{{ errorText(companies.workContextError) }}</p>
+        <k-button rounded @click="selectTab('work')">
+          {{ phone.t('Apps.companies.tryAgain') }}
+        </k-button>
+      </div>
+      <div
+        v-else-if="!companies.workContext?.authorized"
+        class="companies-state"
+      >
+        <BriefcaseBusiness :size="38" />
+        <strong>{{ phone.t('Apps.companies.work.notAuthorized') }}</strong>
+        <p>{{ phone.t('Apps.companies.work.notAuthorizedBody') }}</p>
+      </div>
+      <template v-else-if="companies.workContext && workCompany">
+        <k-card class="work-identity-card">
+          <span class="company-logo company-logo--large">
+            <img
+              v-if="workCompany.logoUrl"
+              :src="workCompany.logoUrl"
+              :alt="workCompany.name"
+            />
+            <span v-else>{{ companyInitials(workCompany) }}</span>
+          </span>
+          <span>
+            <small>{{ phone.t('Apps.companies.work.workspace') }}</small>
+            <strong>{{ workCompany.name }}</strong>
+            <span>{{
+              phone.t(`Apps.companies.roles.${companies.workContext.role}`)
+            }}</span>
+          </span>
+          <k-badge :class="statusClass(workCompany.availability)">
+            {{
+              phone.t(`Apps.companies.availability.${workCompany.availability}`)
+            }}
+          </k-badge>
+        </k-card>
+
+        <k-block-title>{{
+          phone.t('Apps.companies.work.publicAvailability')
+        }}</k-block-title>
+        <k-segmented strong rounded class="availability-segmented">
+          <k-segmented-button
+            v-for="availability in availabilityValues"
+            :key="availability"
+            :active="workCompany.availability === availability"
+            :disabled="
+              !companies.workContext.permissions.canSetAvailability ||
+              companies.mutating
+            "
+            @click="setCompanyAvailability(availability)"
+          >
+            {{ phone.t(`Apps.companies.availability.${availability}`) }}
+          </k-segmented-button>
+        </k-segmented>
+
+        <k-list inset strong>
+          <k-list-item
+            v-if="companies.workContext.permissions.canTakeCalls"
+            :title="phone.t('Apps.companies.work.takeCalls')"
+            :subtitle="phone.t('Apps.companies.work.takeCallsBody')"
+          >
+            <template #media><PhoneCall :size="20" /></template>
+            <template #after>
+              <k-toggle
+                :checked="companies.workContext.callAvailable"
+                :disabled="companies.mutating"
+                :aria-label="phone.t('Apps.companies.work.takeCalls')"
+                @change="toggleCallAvailability"
+              />
+            </template>
+          </k-list-item>
+          <k-list-item
+            v-if="companies.workContext.role === 'manager'"
+            link
+            link-component="button"
+            :link-props="{ type: 'button' }"
+            :title="phone.t('Apps.companies.manager.title')"
+            :subtitle="phone.t('Apps.companies.manager.subtitle')"
+            @click="openManager"
+          >
+            <template #media><Settings2 :size="20" /></template>
+          </k-list-item>
+        </k-list>
+
+        <k-block-title>{{
+          phone.t('Apps.companies.work.overview')
+        }}</k-block-title>
+        <div class="work-metrics">
+          <k-card>
+            <strong>{{ companies.workContext.metrics.new }}</strong>
+            <span>{{ phone.t('Apps.companies.work.metrics.new') }}</span>
+          </k-card>
+          <k-card>
+            <strong>{{ companies.workContext.metrics.assigned }}</strong>
+            <span>{{ phone.t('Apps.companies.work.metrics.assigned') }}</span>
+          </k-card>
+          <k-card>
+            <strong>{{ companies.workContext.metrics.waiting }}</strong>
+            <span>{{ phone.t('Apps.companies.work.metrics.waiting') }}</span>
+          </k-card>
+          <k-card>
+            <strong>{{ companies.workContext.metrics.completedToday }}</strong>
+            <span>{{
+              phone.t('Apps.companies.work.metrics.completedToday')
+            }}</span>
+          </k-card>
+        </div>
+
+        <k-block-title>{{
+          phone.t('Apps.companies.work.queue')
+        }}</k-block-title>
+        <div class="companies-chip-row work-filter-row">
+          <k-chip
+            v-for="filter in workFilters"
+            :key="filter"
+            component="button"
+            type="button"
+            :class="{ 'is-selected': workFilter === filter }"
+            @click="workFilter = filter"
+          >
+            {{ phone.t(`Apps.companies.work.filters.${filter}`) }}
+          </k-chip>
+        </div>
+        <div
+          v-if="companies.workQueueLoading"
+          class="companies-state companies-state--compact"
+        >
+          <k-preloader />
+        </div>
+        <div
+          v-else-if="companies.workQueueError"
+          class="companies-state companies-state--compact"
+        >
+          <CircleAlert :size="28" />
+          <p>{{ errorText(companies.workQueueError) }}</p>
+          <k-button small rounded @click="companies.loadWorkQueue(workFilter)">
+            {{ phone.t('Apps.companies.tryAgain') }}
+          </k-button>
+        </div>
+        <div
+          v-else-if="!companies.workQueue.length"
+          class="companies-state companies-state--compact"
+        >
+          <CheckCircle2 :size="31" />
+          <strong>{{ phone.t('Apps.companies.work.emptyQueue') }}</strong>
+          <p>{{ phone.t('Apps.companies.work.emptyQueueBody') }}</p>
+        </div>
+        <k-list v-else inset strong class="company-request-list">
+          <k-list-item
+            v-for="item in companies.workQueue"
+            :key="item.id"
+            link
+            link-component="button"
+            :link-props="{ type: 'button' }"
+            :title="item.subject"
+            :subtitle="requestSubtitle(item)"
+            :header="assignmentLabel(item.assignedLabel)"
+            @click="openRequest(item.id, 'work')"
+          >
+            <template #media
+              ><span class="company-request-icon"
+                ><BriefcaseBusiness :size="19" /></span
+            ></template>
+            <template #after>
+              <k-badge :class="statusClass(item.status)">
+                {{ phone.t(`Apps.companies.requestStatuses.${item.status}`) }}
+              </k-badge>
+            </template>
+          </k-list-item>
+        </k-list>
+        <k-button
+          v-if="companies.workQueueNextCursor"
+          outline
+          rounded
+          class="companies-load-more"
+          :disabled="companies.workQueueLoadingMore"
+          @click="companies.loadWorkQueue(workFilter, true)"
+        >
+          {{ phone.t('Apps.companies.loadMore') }}
+        </k-button>
+      </template>
+    </section>
+
+    <section
+      v-else-if="screen === 'company'"
+      class="companies-content company-profile"
+    >
+      <div
+        v-if="companies.directoryLoading && !activeCompany"
+        class="companies-state"
+      >
+        <k-preloader />
+        <span>{{ phone.t('Apps.companies.loading.profile') }}</span>
+      </div>
+      <div
+        v-else-if="companies.directoryError || !activeCompany"
+        class="companies-state"
+      >
+        <CircleAlert :size="34" />
+        <strong>{{ phone.t('Apps.companies.states.profileError') }}</strong>
+        <p>{{ errorText(companies.directoryError) }}</p>
+        <k-button rounded @click="goBack">{{
+          phone.t('Apps.companies.back')
+        }}</k-button>
+      </div>
+      <template v-else>
+        <div
+          class="company-cover"
+          :style="
+            activeCompany.coverUrl
+              ? { backgroundImage: `url(${activeCompany.coverUrl})` }
+              : undefined
+          "
+        >
+          <span class="company-logo company-logo--hero">
+            <img
+              v-if="activeCompany.logoUrl"
+              :src="activeCompany.logoUrl"
+              :alt="activeCompany.name"
+            />
+            <span v-else>{{ companyInitials(activeCompany) }}</span>
+          </span>
+        </div>
+        <k-block class="company-profile-heading">
+          <span class="company-profile-heading__eyebrow">
+            {{
+              categoryLabel(
+                activeCompany.categoryId,
+                activeCompany.categoryName,
+              )
+            }}
+            <BadgeCheck
+              v-if="activeCompany.verified"
+              :size="15"
+              :aria-label="phone.t('Apps.companies.verified')"
+            />
+          </span>
+          <h1>{{ activeCompany.name }}</h1>
+          <k-badge :class="statusClass(activeCompany.availability)">
+            {{
+              phone.t(
+                `Apps.companies.availability.${activeCompany.availability}`,
+              )
+            }}
+          </k-badge>
+          <small>
+            {{
+              phone.t('Apps.companies.profile.updated', {
+                time: relativeTime(activeCompany.availabilityUpdatedAt),
+              })
+            }}
+          </small>
+          <p>{{ activeCompany.description }}</p>
+        </k-block>
+
+        <k-card v-if="activeCompany.announcement" class="company-announcement">
+          <Megaphone :size="20" />
+          <span>
+            <strong>{{
+              phone.t('Apps.companies.profile.announcement')
+            }}</strong>
+            <span>{{ activeCompany.announcement.body }}</span>
+          </span>
+        </k-card>
+
+        <k-block-title>{{
+          phone.t('Apps.companies.profile.location')
+        }}</k-block-title>
+        <k-list inset strong>
+          <k-list-item
+            v-if="activeCompany.location"
+            :title="activeCompany.location.label"
+            :subtitle="`${activeCompany.location.address} · ${activeCompany.location.district}`"
+          >
+            <template #media><MapPin :size="20" /></template>
+          </k-list-item>
+          <k-list-item
+            v-else
+            :title="phone.t('Apps.companies.profile.noLocation')"
+          >
+            <template #media><MapPin :size="20" /></template>
+          </k-list-item>
+        </k-list>
+
+        <k-block-title>{{
+          phone.t('Apps.companies.profile.hours')
+        }}</k-block-title>
+        <k-list inset strong>
+          <k-list-item
+            v-for="hours in activeCompany.hours"
+            :key="hours.day"
+            :title="phone.t(`Apps.companies.days.${weekdayKeys[hours.day]}`)"
+            :after="
+              hours.isClosed
+                ? phone.t('Apps.companies.profile.closed')
+                : `${hours.opensAt}–${hours.closesAt}`
+            "
+          >
+            <template #media><Clock3 :size="19" /></template>
+          </k-list-item>
+          <k-list-item
+            v-if="!activeCompany.hours.length"
+            :title="phone.t('Apps.companies.profile.byAvailability')"
+          />
+        </k-list>
+
+        <k-block-title>{{
+          phone.t('Apps.companies.profile.services')
+        }}</k-block-title>
+        <k-list inset strong>
+          <k-list-item
+            v-for="service in activeCompany.services.filter(
+              (item) => item.active,
+            )"
+            :key="service.id"
+            :title="service.title"
+            :subtitle="service.description"
+            :after="service.priceText ?? undefined"
+          />
+          <k-list-item
+            v-if="!activeCompany.services.some((service) => service.active)"
+            :title="phone.t('Apps.companies.profile.noServices')"
+          />
+        </k-list>
+
+        <div class="company-profile-actions">
+          <k-button
+            rounded
+            :disabled="!activeCompany.canCall || !activeCompany.phoneNumber"
+            @click="callNumber(activeCompany.phoneNumber)"
+          >
+            <Phone :size="17" />{{ phone.t('Apps.companies.profile.call') }}
+          </k-button>
+          <k-button
+            rounded
+            outline
+            :disabled="!activeCompany.canMessage || !activeCompany.phoneNumber"
+            @click="messageCompany(activeCompany)"
+          >
+            <MessageCircle :size="17" />{{
+              phone.t('Apps.companies.profile.message')
+            }}
+          </k-button>
+          <k-button
+            rounded
+            outline
+            :disabled="!activeCompany.location"
+            @click="setRoute(activeCompany)"
+          >
+            <MapPin :size="17" />{{ phone.t('Apps.companies.profile.route') }}
+          </k-button>
+          <k-button
+            rounded
+            :disabled="!activeCompany.acceptsRequests"
+            @click="openRequestComposer(activeCompany)"
+          >
+            <ClipboardList :size="17" />{{
+              phone.t('Apps.companies.profile.request')
+            }}
+          </k-button>
+        </div>
+      </template>
+    </section>
+
+    <section
+      v-else-if="screen === 'request'"
+      class="companies-content request-thread"
+    >
+      <div v-if="companies.requestLoading" class="companies-state">
+        <k-preloader />
+        <span>{{ phone.t('Apps.companies.loading.request') }}</span>
+      </div>
+      <div
+        v-else-if="companies.requestError || !companies.request"
+        class="companies-state"
+      >
+        <CircleAlert :size="34" />
+        <strong>{{ phone.t('Apps.companies.states.requestError') }}</strong>
+        <p>{{ errorText(companies.requestError) }}</p>
+        <k-button rounded @click="goBack">{{
+          phone.t('Apps.companies.back')
+        }}</k-button>
+      </div>
+      <template v-else>
+        <div class="request-thread-scroll">
+          <k-card class="request-summary-card">
+            <span>
+              <small>{{ companies.request.companyName }}</small>
+              <strong>{{ companies.request.subject }}</strong>
+            </span>
+            <k-badge :class="statusClass(companies.request.status)">
+              {{
+                phone.t(
+                  `Apps.companies.requestStatuses.${companies.request.status}`,
+                )
+              }}
+            </k-badge>
+            <p>{{ companies.request.description }}</p>
+            <span class="request-summary-card__meta">
+              {{
+                companies.request.serviceName ??
+                phone.t('Apps.companies.requests.generalService')
+              }}
+              · {{ formatDate(companies.request.createdAt) }}
+            </span>
+          </k-card>
+
+          <div
+            v-if="companies.request.media.length"
+            class="request-media-strip"
+            :aria-label="phone.t('Apps.companies.requests.attachments')"
+          >
+            <img
+              v-for="media in companies.request.media"
+              :key="media.id"
+              :src="media.url"
+              :alt="phone.t('Apps.companies.requests.attachedPhoto')"
+              draggable="false"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+            />
+          </div>
+
+          <k-block-title>{{
+            phone.t('Apps.companies.requests.timeline')
+          }}</k-block-title>
+          <div class="request-timeline">
+            <div v-for="event in companies.request.events" :key="event.id">
+              <span><Check :size="12" /></span>
+              <p>
+                <strong>{{ eventLabel(event) }}</strong>
+                <small>{{ formatDate(event.createdAt) }}</small>
+              </p>
+            </div>
+          </div>
+
+          <k-block-title>{{
+            phone.t('Apps.companies.requests.conversation')
+          }}</k-block-title>
+          <k-messages class="company-messages">
+            <k-messages-title v-if="!companies.request.messages.length">
+              {{ phone.t('Apps.companies.requests.noMessages') }}
+            </k-messages-title>
+            <k-message
+              v-for="message in companies.request.messages"
+              :key="message.id"
+              :type="message.isMine ? 'sent' : 'received'"
+              :name="messageAuthorLabel(message.authorLabel)"
+              :text="message.body"
+              :text-footer="formatDate(message.createdAt)"
+            />
+          </k-messages>
+
+          <div class="request-thread-actions">
+            <k-button
+              v-if="companies.request.actions.canCall"
+              outline
+              rounded
+              @click="callRequestParty"
+            >
+              <Phone :size="16" />{{ phone.t('Apps.companies.requests.call') }}
+            </k-button>
+            <k-button
+              v-if="companies.request.actions.canCancel"
+              outline
+              rounded
+              class="is-danger"
+              @click="cancelDialogOpened = true"
+            >
+              <X :size="16" />{{ phone.t('Apps.companies.requests.cancel') }}
+            </k-button>
+          </div>
+        </div>
+        <k-messagebar
+          v-if="companies.request.actions.canReply"
+          class="company-messagebar"
+          :disabled="companies.mutating"
+          :placeholder="phone.t('Apps.companies.requests.replyPlaceholder')"
+          :value="threadDraft"
+          @input="threadDraft = messagebarValue($event)"
+          @keydown.enter.exact.prevent="sendThreadMessage"
+        >
+          <template #right>
+            <k-toolbar-pane class="ios:h-10">
+              <k-link
+                component="button"
+                icon-only
+                :disabled="!canSendThreadMessage"
+                :aria-label="phone.t('Apps.companies.requests.sendReply')"
+                :link-props="{ type: 'button' }"
+                @click="sendThreadMessage"
+              >
+                <Send :size="22" />
+              </k-link>
+            </k-toolbar-pane>
+          </template>
+        </k-messagebar>
+      </template>
+    </section>
+
+    <section
+      v-else-if="screen === 'manager' && workCompany"
+      class="companies-content manager-screen"
+    >
+      <k-card class="manager-intro">
+        <Settings2 :size="24" />
+        <span>
+          <strong>{{ workCompany.name }}</strong>
+          <span>{{
+            phone.t('Apps.companies.manager.revision', {
+              revision: String(workCompany.revision),
+            })
+          }}</span>
+        </span>
+      </k-card>
+
+      <k-block-title>{{
+        phone.t('Apps.companies.manager.availability')
+      }}</k-block-title>
+      <k-segmented strong rounded class="availability-segmented">
+        <k-segmented-button
+          v-for="availability in availabilityValues"
+          :key="availability"
+          :active="workCompany.availability === availability"
+          :disabled="
+            !companies.workContext?.permissions.canSetAvailability ||
+            companies.mutating
+          "
+          @click="setCompanyAvailability(availability)"
+        >
+          {{ phone.t(`Apps.companies.availability.${availability}`) }}
+        </k-segmented-button>
+      </k-segmented>
+
+      <template v-if="companies.workContext?.permissions.canManageProfile">
+        <k-block-title>{{
+          phone.t('Apps.companies.manager.profile')
+        }}</k-block-title>
+        <div class="manager-media-grid">
+          <button type="button" @click="chooseManagerMedia('cover')">
+            <img
+              v-if="managerCoverUrl"
+              :src="managerCoverUrl"
+              :alt="phone.t('Apps.companies.manager.coverPhoto')"
+              loading="lazy"
+            />
+            <span v-else><ImagePlus :size="22" /></span>
+            <small>{{ phone.t('Apps.companies.manager.chooseCover') }}</small>
+          </button>
+          <button type="button" @click="chooseManagerMedia('logo')">
+            <img
+              v-if="managerLogoUrl"
+              :src="managerLogoUrl"
+              :alt="phone.t('Apps.companies.manager.logoPhoto')"
+              loading="lazy"
+            />
+            <span v-else><ImagePlus :size="22" /></span>
+            <small>{{ phone.t('Apps.companies.manager.chooseLogo') }}</small>
+          </button>
+        </div>
+        <k-list inset strong class="manager-form-list">
+          <k-list-input
+            outline
+            type="textarea"
+            maxlength="500"
+            :label="phone.t('Apps.companies.manager.description')"
+            :placeholder="
+              phone.t('Apps.companies.manager.descriptionPlaceholder')
+            "
+            :value="profileDraft.description"
+            @input="profileDraft.description = eventValue($event)"
+          />
+          <k-list-input
+            outline
+            type="tel"
+            readonly
+            :label="phone.t('Apps.companies.manager.phoneNumber')"
+            :info="phone.t('Apps.companies.manager.phoneNumberManaged')"
+            :value="
+              workCompany.phoneNumber ??
+              phone.t('Apps.companies.manager.noPhoneNumber')
+            "
+          />
+          <k-list-input
+            outline
+            maxlength="80"
+            :label="phone.t('Apps.companies.manager.locationLabel')"
+            :value="profileDraft.locationLabel"
+            @input="profileDraft.locationLabel = eventValue($event)"
+          />
+          <k-list-input
+            outline
+            maxlength="120"
+            :label="phone.t('Apps.companies.manager.address')"
+            :value="profileDraft.address"
+            @input="profileDraft.address = eventValue($event)"
+          />
+          <k-list-input
+            outline
+            maxlength="80"
+            :label="phone.t('Apps.companies.manager.district')"
+            :value="profileDraft.district"
+            @input="profileDraft.district = eventValue($event)"
+          />
+          <k-list-item
+            :title="phone.t('Apps.companies.manager.acceptRequests')"
+            :subtitle="phone.t('Apps.companies.manager.acceptRequestsBody')"
+          >
+            <template #after>
+              <k-toggle
+                :checked="profileDraft.acceptsRequests"
+                :aria-label="phone.t('Apps.companies.manager.acceptRequests')"
+                @change="
+                  profileDraft.acceptsRequests = !profileDraft.acceptsRequests
+                "
+              />
+            </template>
+          </k-list-item>
+        </k-list>
+        <k-button
+          outline
+          rounded
+          class="manager-location"
+          :disabled="companies.mutating"
+          @click="useCurrentLocation"
+        >
+          <Compass :size="16" />{{
+            phone.t('Apps.companies.manager.useCurrentLocation')
+          }}
+        </k-button>
+        <small v-if="profileCoords" class="manager-location-status">
+          {{ phone.t('Apps.companies.manager.locationReady') }}
+        </small>
+        <k-button
+          rounded
+          class="manager-save"
+          :disabled="companies.mutating"
+          @click="saveProfile"
+        >
+          {{ phone.t('Apps.companies.manager.saveProfile') }}
+        </k-button>
+      </template>
+
+      <template v-if="companies.workContext?.permissions.canManageHours">
+        <k-block-title>{{
+          phone.t('Apps.companies.manager.hours')
+        }}</k-block-title>
+        <k-card
+          v-for="(hours, index) in hoursDraft"
+          :key="hours.day"
+          class="manager-hours-card"
+          :content-wrap="false"
+        >
+          <k-list nested>
+            <k-list-item
+              :title="phone.t(`Apps.companies.days.${weekdayKeys[hours.day]}`)"
+            >
+              <template #after>
+                <k-toggle
+                  :checked="!hours.isClosed"
+                  :aria-label="phone.t('Apps.companies.manager.dayOpen')"
+                  @change="hours.isClosed = !hours.isClosed"
+                />
+              </template>
+            </k-list-item>
+            <template v-if="!hours.isClosed">
+              <k-list-input
+                outline
+                type="time"
+                :label="phone.t('Apps.companies.manager.opensAt')"
+                :value="hours.opensAt"
+                @input="updateHour(index, 'opensAt', $event)"
+              />
+              <k-list-input
+                outline
+                type="time"
+                :label="phone.t('Apps.companies.manager.closesAt')"
+                :value="hours.closesAt"
+                @input="updateHour(index, 'closesAt', $event)"
+              />
+            </template>
+          </k-list>
+        </k-card>
+        <k-button
+          rounded
+          class="manager-save"
+          :disabled="companies.mutating"
+          @click="saveHours"
+        >
+          {{ phone.t('Apps.companies.manager.saveHours') }}
+        </k-button>
+      </template>
+
+      <template v-if="companies.workContext?.permissions.canManageServices">
+        <k-block-title>{{
+          phone.t('Apps.companies.manager.services')
+        }}</k-block-title>
+        <k-card
+          v-for="(service, index) in servicesDraft"
+          :key="`${service.id}-${index}`"
+          class="manager-service-card"
+          :content-wrap="false"
+        >
+          <k-list nested>
+            <k-list-input
+              outline
+              maxlength="80"
+              :label="phone.t('Apps.companies.manager.serviceTitle')"
+              :value="service.title"
+              @input="updateService(index, 'title', $event)"
+            />
+            <k-list-input
+              outline
+              maxlength="240"
+              :label="phone.t('Apps.companies.manager.serviceDescription')"
+              :value="service.description"
+              @input="updateService(index, 'description', $event)"
+            />
+            <k-list-input
+              outline
+              maxlength="40"
+              :label="phone.t('Apps.companies.manager.priceText')"
+              :value="service.priceText ?? ''"
+              @input="updateService(index, 'priceText', $event)"
+            />
+            <k-list-item
+              :title="phone.t('Apps.companies.manager.serviceActive')"
+            >
+              <template #after>
+                <k-toggle
+                  :checked="service.active"
+                  :aria-label="phone.t('Apps.companies.manager.serviceActive')"
+                  @change="service.active = !service.active"
+                />
+              </template>
+            </k-list-item>
+            <k-list-item
+              :title="phone.t('Apps.companies.manager.serviceRequests')"
+            >
+              <template #after>
+                <k-toggle
+                  :checked="service.acceptsRequests"
+                  :aria-label="
+                    phone.t('Apps.companies.manager.serviceRequests')
+                  "
+                  @change="service.acceptsRequests = !service.acceptsRequests"
+                />
+              </template>
+            </k-list-item>
+          </k-list>
+          <k-button
+            outline
+            rounded
+            class="manager-remove"
+            @click="removeService(index)"
+          >
+            <Trash2 :size="15" />{{
+              phone.t('Apps.companies.manager.removeService')
+            }}
+          </k-button>
+        </k-card>
+        <k-button outline rounded class="manager-save" @click="addService">
+          <Plus :size="16" />{{ phone.t('Apps.companies.manager.addService') }}
+        </k-button>
+        <k-button
+          rounded
+          class="manager-save"
+          :disabled="companies.mutating"
+          @click="saveServices"
+        >
+          {{ phone.t('Apps.companies.manager.saveServices') }}
+        </k-button>
+      </template>
+
+      <template v-if="companies.workContext?.permissions.canManageAnnouncement">
+        <k-block-title>{{
+          phone.t('Apps.companies.manager.announcement')
+        }}</k-block-title>
+        <k-list inset strong class="manager-form-list">
+          <k-list-input
+            outline
+            type="textarea"
+            maxlength="280"
+            :label="phone.t('Apps.companies.manager.announcementText')"
+            :placeholder="
+              phone.t('Apps.companies.manager.announcementPlaceholder')
+            "
+            :value="announcementDraft.body"
+            @input="announcementDraft.body = eventValue($event)"
+          />
+          <k-list-input
+            outline
+            type="datetime-local"
+            :label="phone.t('Apps.companies.manager.expiresAt')"
+            :value="announcementDraft.expiresAt"
+            @input="announcementDraft.expiresAt = eventValue($event)"
+          />
+        </k-list>
+        <k-button
+          rounded
+          class="manager-save"
+          :disabled="companies.mutating"
+          @click="publishAnnouncement"
+        >
+          <Megaphone :size="16" />{{
+            phone.t('Apps.companies.manager.publish')
+          }}
+        </k-button>
+      </template>
+    </section>
+
+    <k-tabbar
+      v-if="screen === 'root'"
+      component="nav"
+      icons
+      labels
+      class="companies-tabbar bottom-0 left-0 fixed"
+      :aria-label="phone.t('Apps.companies.navigation')"
+    >
+      <k-toolbar-pane>
+        <k-tabbar-link
+          component="button"
+          :active="activeTab === 'directory'"
+          :link-props="{ type: 'button' }"
+          @click="selectTab('directory')"
+        >
+          <template #label>{{
+            phone.t('Apps.companies.tabs.directory')
+          }}</template>
+          <template #icon
+            ><k-icon><Compass class="w-7 h-7" /></k-icon
+          ></template>
+        </k-tabbar-link>
+        <k-tabbar-link
+          component="button"
+          :active="activeTab === 'requests'"
+          :link-props="{ type: 'button' }"
+          @click="selectTab('requests')"
+        >
+          <template #label>{{
+            phone.t('Apps.companies.tabs.requests')
+          }}</template>
+          <template #icon>
+            <span class="companies-tab-icon">
+              <k-icon><ClipboardList class="w-7 h-7" /></k-icon>
+              <k-badge v-if="companies.customerUnreadCount">{{
+                companies.customerUnreadCount
+              }}</k-badge>
+            </span>
+          </template>
+        </k-tabbar-link>
+        <k-tabbar-link
+          component="button"
+          :active="activeTab === 'work'"
+          :link-props="{ type: 'button' }"
+          @click="selectTab('work')"
+        >
+          <template #label>{{ phone.t('Apps.companies.tabs.work') }}</template>
+          <template #icon>
+            <span class="companies-tab-icon">
+              <k-icon><BriefcaseBusiness class="w-7 h-7" /></k-icon>
+              <k-badge v-if="companies.workUnreadCount">{{
+                companies.workUnreadCount
+              }}</k-badge>
+            </span>
+          </template>
+        </k-tabbar-link>
+      </k-toolbar-pane>
+    </k-tabbar>
+
+    <k-sheet
+      :opened="requestSheetOpened"
+      class="companies-sheet"
+      @backdropclick="requestSheetOpened = false"
+    >
+      <section
+        v-if="requestSheetOpened && activeCompany"
+        class="companies-sheet__content"
+        role="dialog"
+        aria-modal="true"
+      >
+        <header>
+          <span><ClipboardList :size="23" /></span>
+          <div>
+            <small>{{ activeCompany.name }}</small>
+            <h2>{{ phone.t('Apps.companies.composer.title') }}</h2>
+          </div>
+          <k-link
+            component="button"
+            icon-only
+            :aria-label="phone.t('Apps.companies.close')"
+            :link-props="{ type: 'button' }"
+            @click="requestSheetOpened = false"
+          >
+            <X :size="19" />
+          </k-link>
+        </header>
+        <k-progressbar :progress="requestProgress" />
+        <k-block-title>{{
+          phone.t('Apps.companies.composer.chooseService')
+        }}</k-block-title>
+        <k-list inset strong>
+          <k-list-item
+            v-for="service in activeCompany.services.filter(
+              (item) => item.active && item.acceptsRequests,
+            )"
+            :key="service.id"
+            label
+            :title="service.title"
+            :subtitle="service.description"
+            :after="service.priceText ?? undefined"
+          >
+            <template #media>
+              <k-radio
+                name="company-request-service"
+                :value="service.id"
+                :checked="requestServiceId === service.id"
+                @change="requestServiceId = service.id"
+              />
+            </template>
+          </k-list-item>
+        </k-list>
+        <k-list inset strong class="composer-form-list">
+          <k-list-input
+            outline
+            maxlength="100"
+            :label="phone.t('Apps.companies.composer.subject')"
+            :placeholder="phone.t('Apps.companies.composer.subjectPlaceholder')"
+            :value="requestSubject"
+            @input="requestSubject = eventValue($event)"
+          />
+          <k-list-input
+            outline
+            type="textarea"
+            maxlength="1200"
+            :label="phone.t('Apps.companies.composer.description')"
+            :placeholder="
+              phone.t('Apps.companies.composer.descriptionPlaceholder')
+            "
+            :value="requestDescription"
+            @input="requestDescription = eventValue($event)"
+          />
+        </k-list>
+        <k-card class="composer-contact-card">
+          <Phone :size="18" />
+          <span>
+            <strong>{{ phone.t('Apps.companies.composer.contact') }}</strong>
+            <span v-if="phone.device?.sim?.registered">
+              {{
+                phone.t('Apps.companies.composer.registeredSim', {
+                  number: maskedPhoneNumber(phone.device.sim.number),
+                })
+              }}
+            </span>
+            <span v-else>{{
+              phone.t('Apps.companies.composer.registeredSimRequired')
+            }}</span>
+          </span>
+        </k-card>
+        <k-button
+          outline
+          rounded
+          :disabled="requestMedia.length >= 3"
+          @click="chooseRequestMedia"
+        >
+          <ImagePlus :size="17" />
+          {{
+            phone.t('Apps.companies.composer.addPhotos', {
+              count: String(requestMedia.length),
+            })
+          }}
+        </k-button>
+        <div v-if="requestMedia.length" class="composer-media-strip">
+          <span v-for="media in requestMedia" :key="media.id">
+            <img
+              :src="media.url"
+              :alt="phone.t('Apps.companies.composer.selectedPhoto')"
+            />
+            <k-button
+              rounded
+              :aria-label="phone.t('Apps.companies.composer.removePhoto')"
+              @click="removeRequestMedia(media.id)"
+            >
+              <X :size="13" />
+            </k-button>
+          </span>
+        </div>
+        <k-button
+          large
+          rounded
+          :disabled="!canSubmitRequest"
+          @click="requestConfirmOpened = true"
+        >
+          {{ phone.t('Apps.companies.composer.review') }}
+        </k-button>
+      </section>
+    </k-sheet>
+
+    <k-actions
+      v-if="workActionsOpened"
+      :opened="workActionsOpened"
+      @backdropclick="workActionsOpened = false"
+    >
+      <k-actions-group v-if="companies.request">
+        <k-actions-button
+          v-if="companies.request.actions.canClaim"
+          @click="claimActiveRequest"
+        >
+          {{ phone.t('Apps.companies.workActions.claim') }}
+        </k-actions-button>
+        <k-actions-button
+          v-if="companies.request.actions.canAssign"
+          @click="openAssignment"
+        >
+          {{ phone.t('Apps.companies.workActions.assign') }}
+        </k-actions-button>
+        <k-actions-button
+          v-if="companies.request.actions.canCall"
+          @click="callRequestParty"
+        >
+          {{ phone.t('Apps.companies.workActions.callCustomer') }}
+        </k-actions-button>
+        <k-actions-button
+          v-for="status in companies.request.actions.allowedStatuses"
+          :key="status"
+          @click="updateActiveRequestStatus(status)"
+        >
+          {{
+            phone.t('Apps.companies.workActions.setStatus', {
+              status: phone.t(`Apps.companies.requestStatuses.${status}`),
+            })
+          }}
+        </k-actions-button>
+      </k-actions-group>
+      <k-actions-group>
+        <k-actions-button bold @click="workActionsOpened = false">
+          {{ phone.t('Apps.companies.close') }}
+        </k-actions-button>
+      </k-actions-group>
+    </k-actions>
+
+    <k-sheet
+      :opened="assignmentSheetOpened"
+      class="companies-sheet companies-assignment-sheet"
+      @backdropclick="assignmentSheetOpened = false"
+    >
+      <section
+        v-if="assignmentSheetOpened"
+        class="companies-sheet__content"
+        role="dialog"
+        aria-modal="true"
+      >
+        <header>
+          <span><UsersRound :size="23" /></span>
+          <div>
+            <h2>{{ phone.t('Apps.companies.assignment.title') }}</h2>
+          </div>
+          <k-link
+            component="button"
+            icon-only
+            :aria-label="phone.t('Apps.companies.close')"
+            :link-props="{ type: 'button' }"
+            @click="assignmentSheetOpened = false"
+          >
+            <X :size="19" />
+          </k-link>
+        </header>
+        <div
+          v-if="companies.membersLoading"
+          class="companies-state companies-state--compact"
+        >
+          <k-preloader />
+        </div>
+        <k-list v-else inset strong>
+          <k-list-item
+            v-for="member in companies.members"
+            :key="member.id"
+            label
+            :title="memberName(member.name)"
+            :subtitle="`${member.role} · ${phone.t(`Apps.companies.assignment.${member.online ? 'online' : 'offline'}`)}`"
+          >
+            <template #media
+              ><span class="member-avatar"><UserRound :size="18" /></span
+            ></template>
+            <template #after>
+              <k-radio
+                name="company-member"
+                :value="member.id"
+                :checked="selectedMemberId === member.id"
+                :disabled="!member.online"
+                @change="selectedMemberId = member.id"
+              />
+            </template>
+          </k-list-item>
+        </k-list>
+        <k-button
+          large
+          rounded
+          :disabled="!selectedMemberId || companies.mutating"
+          @click="assignActiveRequest"
+        >
+          {{ phone.t('Apps.companies.assignment.confirm') }}
+        </k-button>
+      </section>
+    </k-sheet>
+
+    <k-dialog
+      :opened="requestConfirmOpened"
+      :title="phone.t('Apps.companies.composer.confirmTitle')"
+      :content="
+        phone.t('Apps.companies.composer.confirmBody', {
+          company: activeCompany?.name ?? '',
+          service: selectedService?.title ?? '',
+        })
+      "
+      @backdropclick="requestConfirmOpened = false"
+    >
+      <template #buttons>
+        <k-dialog-button @click="requestConfirmOpened = false">
+          {{ phone.t('Apps.companies.composer.edit') }}
+        </k-dialog-button>
+        <k-dialog-button
+          strong
+          :disabled="companies.mutating"
+          @click="submitRequest"
+        >
+          {{ phone.t('Apps.companies.composer.send') }}
+        </k-dialog-button>
+      </template>
+    </k-dialog>
+
+    <k-dialog
+      :opened="cancelDialogOpened"
+      :title="phone.t('Apps.companies.requests.cancelTitle')"
+      :content="phone.t('Apps.companies.requests.cancelBody')"
+      @backdropclick="cancelDialogOpened = false"
+    >
+      <template #buttons>
+        <k-dialog-button @click="cancelDialogOpened = false">
+          {{ phone.t('Apps.companies.requests.keep') }}
+        </k-dialog-button>
+        <k-dialog-button
+          strong
+          :disabled="companies.mutating"
+          @click="cancelActiveRequest"
+        >
+          {{ phone.t('Apps.companies.requests.cancelConfirm') }}
+        </k-dialog-button>
+      </template>
+    </k-dialog>
+
+    <k-dialog
+      :opened="conflictDialogOpened"
+      :title="phone.t('Apps.companies.conflict.title')"
+      :content="phone.t('Apps.companies.conflict.body')"
+      @backdropclick="conflictDialogOpened = false"
+    >
+      <template #buttons>
+        <k-dialog-button @click="conflictDialogOpened = false">
+          {{ phone.t('Apps.companies.close') }}
+        </k-dialog-button>
+        <k-dialog-button strong @click="reloadConflict">
+          {{ phone.t('Apps.companies.conflict.reload') }}
+        </k-dialog-button>
+      </template>
+    </k-dialog>
+
+    <k-toast
+      :opened="toastOpened"
+      position="center"
+      @click="toastOpened = false"
+    >
+      {{ toastText }}
+    </k-toast>
+  </k-page>
+</template>
+
+<style scoped>
+.companies-app {
+  --company-blue: #3b82f6;
+  --company-cyan: #38bdf8;
+  --company-green: #22c55e;
+  --company-orange: #f59e0b;
+  --company-red: #ef4444;
+  --k-safe-area-top: 46px;
+  --k-safe-area-bottom: 25px;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  color: #111827;
+}
+
+.companies-app--dark {
+  color: #f8fafc;
+}
+
+.companies-backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 12% 4%, rgb(56 189 248 / 16%), transparent 30%),
+    radial-gradient(circle at 88% 34%, rgb(59 130 246 / 13%), transparent 32%),
+    linear-gradient(180deg, #eff7ff 0%, #f6f8fb 45%, #eef2f7 100%);
+}
+
+.companies-app--dark .companies-backdrop {
+  background:
+    radial-gradient(circle at 12% 4%, rgb(56 189 248 / 13%), transparent 30%),
+    radial-gradient(circle at 88% 34%, rgb(59 130 246 / 11%), transparent 32%),
+    linear-gradient(180deg, #07111f 0%, #0b1220 52%, #111827 100%);
+}
+
+.companies-content {
+  position: relative;
+  z-index: 1;
+}
+
+.companies-content {
+  height: calc(100% - 44px);
+  padding: 10px 10px 92px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.companies-content::-webkit-scrollbar,
+.companies-chip-row::-webkit-scrollbar,
+.companies-featured-row::-webkit-scrollbar {
+  display: none;
+}
+
+.companies-search-wrap {
+  margin: 0 -4px 8px;
+}
+
+.companies-chip-row {
+  display: flex;
+  gap: 7px;
+  padding: 2px 2px 9px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.companies-chip-row :deep(.k-chip) {
+  flex: none;
+  white-space: nowrap;
+}
+
+.companies-chip-row :deep(.is-selected),
+.companies-inline-chips :deep(.is-selected) {
+  color: white;
+  background: linear-gradient(135deg, var(--company-blue), var(--company-cyan));
+}
+
+.companies-filter-card,
+.work-identity-card,
+.manager-intro,
+.request-summary-card,
+.composer-contact-card,
+.company-announcement {
+  margin: 0 0 12px;
+  border: 1px solid rgb(255 255 255 / 58%);
+  border-radius: 18px;
+  background: rgb(255 255 255 / 68%);
+  box-shadow: 0 12px 30px rgb(24 56 93 / 8%);
+  backdrop-filter: blur(18px) saturate(140%);
+  -webkit-backdrop-filter: blur(18px) saturate(140%);
+}
+
+.companies-app--dark .companies-filter-card,
+.companies-app--dark .work-identity-card,
+.companies-app--dark .manager-intro,
+.companies-app--dark .request-summary-card,
+.companies-app--dark .composer-contact-card,
+.companies-app--dark .company-announcement {
+  border-color: rgb(255 255 255 / 8%);
+  background: rgb(20 30 46 / 70%);
+}
+
+.companies-inline-chips {
+  display: flex;
+  max-width: 144px;
+  gap: 4px;
+  overflow-x: auto;
+}
+
+.companies-inline-chips :deep(.k-chip) {
+  flex: none;
+  font-size: 9px;
+}
+
+.companies-state {
+  min-height: 260px;
+  padding: 36px 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  color: #64748b;
+  text-align: center;
+}
+
+.companies-state strong {
+  color: inherit;
+  font-size: 16px;
+}
+
+.companies-state p {
+  max-width: 260px;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.companies-state--compact {
+  min-height: 150px;
+  padding: 20px;
+}
+
+.companies-featured-row {
+  display: flex;
+  gap: 9px;
+  padding: 0 2px 4px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.company-feature-card {
+  width: 145px;
+  min-width: 145px;
+  margin: 0;
+  text-align: left;
+}
+
+.company-feature-card :deep(> *) {
+  padding: 12px;
+  display: grid;
+  gap: 6px;
+}
+
+.company-feature-card strong {
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.company-feature-card :deep(> *) > span {
+  color: #64748b;
+  font-size: 10px;
+}
+
+.company-list,
+.company-request-list {
+  margin-top: 6px;
+}
+
+.company-logo {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  flex: none;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 13px;
+  color: white;
+  background: linear-gradient(145deg, var(--company-blue), var(--company-cyan));
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.company-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.company-logo--small {
+  width: 36px;
+  height: 36px;
+  border-radius: 11px;
+}
+
+.company-logo--large {
+  width: 54px;
+  height: 54px;
+  border-radius: 17px;
+}
+
+.company-row-after,
+.request-row-after {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.company-row-after small {
+  max-width: 82px;
+  overflow: hidden;
+  color: #94a3b8;
+  font-size: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.k-badge) {
+  min-width: 0;
+  border-radius: 999px;
+  font-size: 8px;
+  line-height: 1.2;
+}
+
+:deep(.k-badge.is-available),
+:deep(.k-badge.is-completed) {
+  color: #047857;
+  background: #d1fae5;
+}
+
+:deep(.k-badge.is-busy),
+:deep(.k-badge.is-waiting-customer) {
+  color: #b45309;
+  background: #fef3c7;
+}
+
+:deep(.k-badge.is-closed),
+:deep(.k-badge.is-cancelled) {
+  color: #b91c1c;
+  background: #fee2e2;
+}
+
+:deep(.k-badge.is-new),
+:deep(.k-badge.is-assigned),
+:deep(.k-badge.is-in-progress),
+:deep(.k-badge.is-unread) {
+  color: #1d4ed8;
+  background: #dbeafe;
+}
+
+.companies-load-more,
+.manager-save {
+  width: calc(100% - 20px);
+  margin: 14px 10px 4px;
+}
+
+.companies-segment-wrap,
+.availability-segmented {
+  margin: 4px 6px 14px;
+}
+
+.company-request-icon,
+.member-avatar {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  color: var(--company-blue);
+  background: rgb(59 130 246 / 13%);
+}
+
+.work-identity-card :deep(> *),
+.manager-intro :deep(> *),
+.composer-contact-card :deep(> *),
+.company-announcement :deep(> *) {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.work-identity-card :deep(> *) > span:nth-child(2),
+.manager-intro :deep(> *) > span,
+.composer-contact-card :deep(> *) > span,
+.company-announcement :deep(> *) > span {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.work-identity-card small,
+.manager-intro span span,
+.composer-contact-card span span,
+.company-announcement span span {
+  color: #64748b;
+  font-size: 10px;
+}
+
+.work-identity-card strong {
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.work-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin: 0 5px 14px;
+}
+
+.work-metrics :deep(.k-card) {
+  margin: 0;
+  border-radius: 16px;
+}
+
+.work-metrics :deep(> *) {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.work-metrics strong {
+  color: var(--company-blue);
+  font-size: 24px;
+}
+
+.work-metrics span {
+  color: #64748b;
+  font-size: 10px;
+}
+
+.work-filter-row {
+  padding-inline: 5px;
+}
+
+.company-cover {
+  height: 145px;
+  margin: -10px -10px 0;
+  display: flex;
+  align-items: flex-end;
+  padding: 14px;
+  background:
+    linear-gradient(180deg, transparent, rgb(15 23 42 / 48%)),
+    linear-gradient(135deg, #1d4ed8, #38bdf8 58%, #67e8f9);
+  background-position: center;
+  background-size: cover;
+}
+
+.company-logo--hero {
+  width: 66px;
+  height: 66px;
+  border: 3px solid rgb(255 255 255 / 88%);
+  border-radius: 20px;
+  font-size: 18px;
+}
+
+.company-profile {
+  padding-bottom: 116px;
+}
+
+.company-profile-heading {
+  margin-top: 10px;
+}
+
+.company-profile-heading__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--company-blue);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.company-profile-heading h1 {
+  margin: 3px 0 6px;
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.company-profile-heading small {
+  display: block;
+  margin-top: 5px;
+  color: #64748b;
+  font-size: 9px;
+}
+
+.company-profile-heading p {
+  margin: 12px 0 0;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.company-profile {
+  padding-bottom: 145px;
+}
+
+.companies-app--dark .company-profile-heading p,
+.companies-app--dark .work-identity-card small,
+.companies-app--dark .manager-intro span span,
+.companies-app--dark .composer-contact-card span span,
+.companies-app--dark .company-announcement span span,
+.companies-app--dark .work-metrics span {
+  color: #94a3b8;
+}
+
+.company-announcement {
+  color: var(--company-blue);
+}
+
+.company-profile-actions {
+  position: absolute;
+  z-index: 4;
+  right: 8px;
+  bottom: 28px;
+  left: 8px;
+  padding: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 7px;
+  border: 1px solid rgb(255 255 255 / 45%);
+  border-radius: 20px;
+  background: rgb(255 255 255 / 76%);
+  box-shadow: 0 18px 35px rgb(15 23 42 / 18%);
+  backdrop-filter: blur(22px) saturate(150%);
+  -webkit-backdrop-filter: blur(22px) saturate(150%);
+}
+
+.companies-app--dark .company-profile-actions {
+  border-color: rgb(255 255 255 / 8%);
+  background: rgb(15 23 42 / 80%);
+}
+
+.request-thread {
+  padding: 8px 0 0;
+  overflow: hidden;
+}
+
+.request-thread-scroll {
+  height: 100%;
+  padding: 4px 10px 88px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.request-summary-card :deep(> *) {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 6px 10px;
+}
+
+.request-summary-card :deep(> *) > span:first-child {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.request-summary-card small,
+.request-summary-card__meta {
+  color: #64748b;
+  font-size: 9px;
+}
+
+.request-summary-card p,
+.request-summary-card__meta {
+  grid-column: 1 / -1;
+}
+
+.request-summary-card p {
+  margin: 5px 0 0;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.request-media-strip {
+  margin: 0 2px 14px;
+  display: grid;
+  grid-auto-columns: minmax(112px, 58%);
+  grid-auto-flow: column;
+  gap: 8px;
+  overflow-x: auto;
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+}
+
+.request-media-strip::-webkit-scrollbar {
+  display: none;
+}
+
+.request-media-strip img {
+  width: 100%;
+  height: 108px;
+  display: block;
+  scroll-snap-align: start;
+  border-radius: 14px;
+  object-fit: cover;
+  background: rgb(148 163 184 / 20%);
+}
+
+.request-timeline {
+  margin: 0 12px 16px;
+}
+
+.request-timeline > div {
+  position: relative;
+  display: flex;
+  gap: 9px;
+  min-height: 40px;
+}
+
+.request-timeline > div:not(:last-child)::before {
+  position: absolute;
+  top: 18px;
+  bottom: -3px;
+  left: 10px;
+  width: 1px;
+  content: '';
+  background: rgb(59 130 246 / 28%);
+}
+
+.request-timeline > div > span {
+  z-index: 1;
+  width: 21px;
+  height: 21px;
+  display: grid;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  color: white;
+  background: var(--company-blue);
+}
+
+.request-timeline p {
+  margin: 1px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 11px;
+}
+
+.request-timeline small {
+  color: #64748b;
+  font-size: 9px;
+}
+
+.company-messages {
+  min-height: 100px;
+}
+
+.request-thread-actions {
+  margin: 14px 5px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.request-thread-actions .is-danger,
+.manager-remove {
+  color: var(--company-red);
+}
+
+.company-messagebar {
+  position: absolute;
+  z-index: 4;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgb(255 255 255 / 86%);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.companies-app--dark .company-messagebar {
+  background: rgb(15 23 42 / 88%);
+}
+
+.manager-screen {
+  padding-bottom: 35px;
+}
+
+.manager-media-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+  gap: 9px;
+  margin: 0 10px 12px;
+}
+
+.manager-media-grid button {
+  min-width: 0;
+  min-height: 86px;
+  overflow: hidden;
+  position: relative;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgb(148 163 184 / 30%);
+  border-radius: 16px;
+  padding: 0;
+  color: var(--company-blue);
+  background: rgb(255 255 255 / 62%);
+}
+
+.manager-media-grid img {
+  width: 100%;
+  height: 86px;
+  object-fit: cover;
+}
+
+.manager-media-grid small {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  left: 6px;
+  overflow: hidden;
+  border-radius: 8px;
+  padding: 4px 6px;
+  color: white;
+  background: rgb(15 23 42 / 72%);
+  font-size: 9px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.companies-app--dark .manager-media-grid button {
+  background: rgb(30 41 59 / 66%);
+}
+
+.manager-location {
+  width: calc(100% - 20px);
+  margin: 0 10px 4px;
+}
+
+.manager-location-status {
+  display: block;
+  margin: 0 16px 8px;
+  color: #64748b;
+  font-size: 10px;
+}
+
+.manager-form-list,
+.manager-hours-card,
+.manager-service-card {
+  margin-bottom: 10px;
+}
+
+.manager-hours-card,
+.manager-service-card {
+  border-radius: 18px;
+}
+
+.manager-remove {
+  width: calc(100% - 20px);
+  margin: 2px 10px 10px;
+}
+
+.companies-tab-icon {
+  position: relative;
+  display: inline-flex;
+}
+
+.companies-tab-icon :deep(.k-badge) {
+  position: absolute;
+  top: -5px;
+  right: -10px;
+  color: white;
+  background: var(--company-red);
+}
+
+.companies-sheet :deep(> div:last-child) {
+  max-height: 88%;
+  border-radius: 24px 24px 0 0;
+  overflow: hidden;
+}
+
+.companies-sheet__content {
+  max-height: 82vh;
+  padding: 16px 12px max(22px, env(safe-area-inset-bottom));
+  overflow-y: auto;
+}
+
+.companies-sheet__content > header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.companies-sheet__content > header > span {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 14px;
+  color: white;
+  background: linear-gradient(145deg, var(--company-blue), var(--company-cyan));
+}
+
+.companies-sheet__content > header > div {
+  min-width: 0;
+  flex: 1;
+}
+
+.companies-sheet__content h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.companies-sheet__content header small {
+  color: #64748b;
+  font-size: 9px;
+}
+
+.composer-form-list {
+  margin-top: 12px;
+}
+
+.composer-contact-card {
+  margin-top: 12px;
+}
+
+.composer-media-strip {
+  display: flex;
+  gap: 8px;
+  margin: 10px 2px;
+  overflow-x: auto;
+}
+
+.composer-media-strip > span {
+  position: relative;
+  width: 74px;
+  height: 74px;
+  flex: none;
+}
+
+.composer-media-strip img {
+  width: 100%;
+  height: 100%;
+  border-radius: 13px;
+  object-fit: cover;
+}
+
+.composer-media-strip :deep(.k-button) {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  color: white;
+  background: rgb(15 23 42 / 82%);
+}
+
+@media (max-width: 330px) {
+  .companies-content {
+    padding-inline: 7px;
+  }
+
+  .company-profile-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .company-profile {
+    padding-bottom: 190px;
+  }
+}
+</style>
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 35ae297..e8ff2be 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -80,6 +80,7 @@ import type {
 } from '@/types/crewlink'
 import { copyText } from '@/utils/clipboard'
 import { nuiCall } from '@/utils/nui'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type CrewLinkTab = 'map' | 'group' | 'pings' | 'profile'
 type CrewLinkSheet =
@@ -644,6 +645,7 @@ function onWheel(event: WheelEvent): void {
 }
 
 function onCrewLinkMessage(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data?.type === 'crewlink:changed') void crew.bootstrap()
 }
 
diff --git a/frontend/src/views/apps/GalleryApp.vue b/frontend/src/views/apps/GalleryApp.vue
index d24c848..c23a1e3 100644
--- a/frontend/src/views/apps/GalleryApp.vue
+++ b/frontend/src/views/apps/GalleryApp.vue
@@ -26,6 +26,7 @@ import {
   mergeMedia,
 } from '@/utils/media'
 import { nuiCall } from '@/utils/nui'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 const isDevelopment = import.meta.env.DEV
 const developmentGalleryState = isDevelopment
@@ -331,6 +332,7 @@ async function deleteSelected(): Promise<void> {
 }
 
 function onMessage(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   const message = event.data as { data?: DeleteResult; type?: string }
   if (
     message.type !== 'media:deleteResult' ||
diff --git a/frontend/src/views/apps/GarageApp.vue b/frontend/src/views/apps/GarageApp.vue
index d4dcc97..a7724f9 100644
--- a/frontend/src/views/apps/GarageApp.vue
+++ b/frontend/src/views/apps/GarageApp.vue
@@ -44,6 +44,7 @@ import type {
   GarageVehicleStatus,
   GarageValetState,
 } from '@/types/garage'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type GarageFilter = 'all' | GarageVehicleStatus
 
@@ -208,6 +209,7 @@ async function cancelValet(): Promise<void> {
 }
 
 function handleValetStatus(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data?.type !== 'garage:valet-status') return
   garage.setValetState((event.data.data as GarageValetState | null) ?? null)
 }
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index 1bf48a1..b34618b 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -51,6 +51,7 @@ import {
   type MailSwipeAction,
   type MailSwipeAxis,
 } from '@/utils/mailSwipe'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type AuthMode = 'login' | 'register'
 type MailScreen = 'folders' | 'list' | 'message' | 'compose'
@@ -594,6 +595,7 @@ function goBack(): void {
 }
 
 function onMailEvent(event: MessageEvent<MailEvent>): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data.type === 'mail:changed' && event.data.data?.counts) {
     mail.setCounts(event.data.data.counts)
     if (screen.value === 'list') {
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 6eaa0a8..b1de941 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -121,8 +121,11 @@ const knownContactNumbers = computed(
 )
 const contactSuggestions = computed(() => {
   const query = composerNumber.value.trim().toLocaleLowerCase(phone.lang)
-  if (!query) return calls.contacts.slice(0, 8)
-  return calls.contacts
+  const contacts = calls.contacts.filter(
+    (contact) => contact.canMessage !== false,
+  )
+  if (!query) return contacts.slice(0, 8)
+  return contacts
     .filter((contact) =>
       `${contact.name} ${contact.phone_number}`
         .toLocaleLowerCase(phone.lang)
@@ -138,6 +141,9 @@ const activeContact = computed(() =>
     (contact) => contact.phone_number === messages.activeNumber,
   ),
 )
+const activeCanMessage = computed(
+  () => activeContact.value?.canMessage !== false,
+)
 const attachmentPanelOpen = computed(
   () => emojiOpen.value || attachmentPicker.value !== null,
 )
@@ -348,6 +354,13 @@ function beginCompose(): void {
 }
 
 async function chooseRecipient(number: string): Promise<void> {
+  const contact = calls.contacts.find(
+    (candidate) => candidate.phone_number === number,
+  )
+  if (contact?.canMessage === false) {
+    showToast(phone.t('Apps.messages.messagingUnavailable'))
+    return
+  }
   composerNumber.value = number
   if (!(await messages.openThread(number))) {
     showToast(errorText('invalid_number'))
@@ -386,6 +399,10 @@ function openContactDetails(): void {
 }
 
 async function saveContactDetails(): Promise<void> {
+  if (activeContact.value?.readonly) {
+    showToast(phone.t('Apps.phone.errors.readonly_contact'))
+    return
+  }
   if (!contactNameDraft.value.trim() || !contactNumberDraft.value.trim()) return
   const response = await calls.saveContact({
     id: activeContact.value?.id,
@@ -403,6 +420,10 @@ async function saveContactDetails(): Promise<void> {
 
 async function deleteActiveContact(): Promise<void> {
   if (!activeContact.value) return
+  if (activeContact.value.readonly) {
+    showToast(phone.t('Apps.phone.errors.readonly_contact'))
+    return
+  }
   if (!(await calls.deleteContact(activeContact.value.id))) {
     showToast(phone.t('Apps.messages.contactDeleteFailed'))
     return
@@ -412,7 +433,7 @@ async function deleteActiveContact(): Promise<void> {
 }
 
 async function callActiveContact(): Promise<void> {
-  if (!messages.activeNumber) return
+  if (!messages.activeNumber || activeContact.value?.canCall === false) return
   const response = await calls.dial(messages.activeNumber)
   if (!response.success) showToast(phone.t('Apps.messages.callFailed'))
 }
@@ -454,7 +475,7 @@ async function sendAttachment(
   mediaAssetId: string,
   mediaDurationMs?: number,
 ): Promise<void> {
-  if (!messages.activeNumber || sending.value) return
+  if (!messages.activeNumber || !activeCanMessage.value || sending.value) return
   attachmentMenuOpen.value = false
   attachmentPicker.value = null
   sending.value = true
@@ -504,7 +525,14 @@ function queueGifSearch(): void {
 }
 
 async function sendTextMessage(): Promise<void> {
-  if (!messages.activeNumber || !draft.value.trim() || sending.value) return
+  if (
+    !messages.activeNumber ||
+    !activeCanMessage.value ||
+    !draft.value.trim() ||
+    sending.value
+  ) {
+    return
+  }
   const body = draft.value
   draft.value = ''
   emojiOpen.value = false
@@ -542,6 +570,7 @@ function sampleMicrophone(): void {
 }
 
 async function startVoiceRecording(): Promise<void> {
+  if (!activeCanMessage.value) return
   emojiOpen.value = false
   if (
     !navigator.mediaDevices?.getUserMedia ||
@@ -660,7 +689,7 @@ async function finishVoiceRecording(): Promise<void> {
   const waveform = compressedWaveform()
   const shouldDiscard = discardRecording
   cleanupRecorder()
-  if (shouldDiscard) return
+  if (shouldDiscard || !activeCanMessage.value) return
   const blob = new Blob(chunks, { type: mime })
   if (!blob.size || blob.size > VOICE_MAX_BYTES) {
     showToast(phone.t('Apps.messages.recordingTooLarge'))
@@ -1011,6 +1040,7 @@ onBeforeUnmount(() => {
         </button>
         <strong>{{ phone.t('Apps.messages.contactDetails') }}</strong>
         <button
+          v-if="!activeContact?.readonly"
           type="button"
           @click="
             contactEditing ? saveContactDetails() : (contactEditing = true)
@@ -1035,14 +1065,27 @@ onBeforeUnmount(() => {
           </span>
         </span>
         <h2>{{ activeTitle }}</h2>
-        <small>{{ messages.activeNumber }}</small>
+        <small>
+          {{ messages.activeNumber }}
+          <template v-if="activeContact?.readonly">
+            · {{ phone.t('Apps.phone.officialContact') }}
+          </template>
+        </small>
       </div>
       <div class="messages-contact-details__actions">
-        <button type="button" @click="callActiveContact">
+        <button
+          v-if="activeContact?.canCall !== false"
+          type="button"
+          @click="callActiveContact"
+        >
           <PhoneIcon :size="20" />
           <span>{{ phone.t('Apps.messages.call') }}</span>
         </button>
-        <button type="button" @click="contactDetailsOpen = false">
+        <button
+          v-if="activeCanMessage"
+          type="button"
+          @click="contactDetailsOpen = false"
+        >
           <MessageCircle :size="20" />
           <span>{{ phone.t('Apps.messages.messageAction') }}</span>
         </button>
@@ -1052,7 +1095,7 @@ onBeforeUnmount(() => {
           <span>{{ phone.t('Apps.messages.contactName') }}</span>
           <input
             v-model="contactNameDraft"
-            :readonly="!contactEditing"
+            :readonly="!contactEditing || activeContact?.readonly"
             :placeholder="phone.t('Apps.messages.contactName')"
           />
         </label>
@@ -1060,7 +1103,7 @@ onBeforeUnmount(() => {
           <span>{{ phone.t('Apps.messages.phoneNumber') }}</span>
           <input
             v-model="contactNumberDraft"
-            :readonly="!contactEditing"
+            :readonly="!contactEditing || activeContact?.readonly"
             inputmode="tel"
           />
         </label>
@@ -1075,7 +1118,7 @@ onBeforeUnmount(() => {
         {{ phone.t('Apps.messages.addContact') }}
       </button>
       <button
-        v-else
+        v-else-if="!activeContact.readonly"
         type="button"
         class="messages-contact-details__delete"
         @click="deleteActiveContact"
@@ -1119,7 +1162,10 @@ onBeforeUnmount(() => {
       </template>
     </k-messages>
 
-    <section v-if="attachmentMenuOpen" class="messages-attachment-menu">
+    <section
+      v-if="activeCanMessage && attachmentMenuOpen"
+      class="messages-attachment-menu"
+    >
       <button type="button" @click="openMediaApp('photos', 'photo')">
         <span><Images :size="20" /></span>
         {{ phone.t('Apps.messages.attachPhoto') }}
@@ -1142,7 +1188,10 @@ onBeforeUnmount(() => {
       </button>
     </section>
 
-    <section v-if="attachmentPicker" class="messages-media-picker">
+    <section
+      v-if="activeCanMessage && attachmentPicker"
+      class="messages-media-picker"
+    >
       <header>
         <strong>
           {{ phone.t('Apps.messages.gifs') }}
@@ -1190,12 +1239,12 @@ onBeforeUnmount(() => {
     </section>
 
     <FullEmojiPicker
-      v-if="emojiOpen"
+      v-if="activeCanMessage && emojiOpen"
       @close="emojiOpen = false"
       @pick="appendEmoji"
     />
 
-    <section v-if="recording" class="messages-recorder">
+    <section v-if="activeCanMessage && recording" class="messages-recorder">
       <button
         type="button"
         class="messages-recorder__cancel"
@@ -1224,7 +1273,7 @@ onBeforeUnmount(() => {
     </section>
 
     <k-messagebar
-      v-else
+      v-else-if="activeCanMessage"
       class="messages-messagebar"
       :placeholder="phone.t('Apps.messages.message')"
       :value="draft"
@@ -1270,6 +1319,9 @@ onBeforeUnmount(() => {
         </k-toolbar-pane>
       </template>
     </k-messagebar>
+    <k-block v-else class="text-center text-sm text-[#8e8e93]">
+      {{ phone.t('Apps.messages.messagingUnavailable') }}
+    </k-block>
   </k-page>
 
   <k-toast :opened="toastOpened" position="center" @click="toastOpened = false">
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index dc77326..92000c7 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -102,6 +102,10 @@ function openContact(contact?: PhoneContact, number = ''): void {
 }
 
 async function saveContact(): Promise<void> {
+  if (editingContact.value?.readonly) {
+    error.value = phone.t('Apps.phone.errors.readonly_contact')
+    return
+  }
   const number = normalizePhoneNumber(contactNumber.value)
   if (!contactName.value.trim() || !number) {
     error.value = phone.t('Apps.phone.errors.invalid_contact')
@@ -137,6 +141,10 @@ async function answerCall(): Promise<void> {
 
 async function deleteEditedContact(): Promise<void> {
   if (!editingContact.value) return
+  if (editingContact.value.readonly) {
+    error.value = phone.t('Apps.phone.errors.readonly_contact')
+    return
+  }
   if (await calls.deleteContact(editingContact.value.id)) {
     editorOpened.value = false
   }
@@ -299,12 +307,17 @@ onMounted(() => {
               v-for="contact in visibleContacts"
               :key="contact.id"
               :title="contact.name"
-              :subtitle="formatPhoneNumber(contact.phone_number)"
+              :subtitle="
+                contact.readonly
+                  ? `${formatPhoneNumber(contact.phone_number)} · ${phone.t('Apps.phone.officialContact')}`
+                  : formatPhoneNumber(contact.phone_number)
+              "
               link
               @click="openContact(contact)"
             >
               <template #after>
                 <k-button
+                  v-if="contact.canCall !== false"
                   clear
                   rounded
                   @click.stop="startCall(contact.phone_number)"
@@ -402,31 +415,44 @@ onMounted(() => {
   <k-dialog :opened="editorOpened" @backdropclick="editorOpened = false">
     <template #title>{{
       phone.t(
-        editingContact ? 'Apps.phone.editContact' : 'Apps.phone.addContact',
+        editingContact?.readonly
+          ? 'Apps.phone.officialContact'
+          : editingContact
+            ? 'Apps.phone.editContact'
+            : 'Apps.phone.addContact',
       )
     }}</template>
     <k-list strong inset>
       <k-list-input
         :value="contactName"
         :label="phone.t('Apps.phone.contactName')"
+        :readonly="editingContact?.readonly"
         @input="contactName = eventValue($event)"
       />
       <k-list-input
         :value="contactNumber"
         :label="phone.t('Apps.phone.phoneNumber')"
         inputmode="numeric"
+        :readonly="editingContact?.readonly"
         @input="contactNumber = eventValue($event)"
       />
     </k-list>
     <p v-if="error" class="text-sm text-[#ff3b30]">{{ error }}</p>
     <template #buttons>
       <k-dialog-button @click="editorOpened = false">{{
-        phone.t('Common.cancel')
+        phone.t(editingContact?.readonly ? 'Common.done' : 'Common.cancel')
       }}</k-dialog-button>
-      <k-dialog-button v-if="editingContact" @click="deleteEditedContact">{{
+      <k-dialog-button
+        v-if="editingContact && !editingContact.readonly"
+        @click="deleteEditedContact"
+        >{{
         phone.t('Common.delete')
       }}</k-dialog-button>
-      <k-dialog-button strong @click="saveContact">{{
+      <k-dialog-button
+        v-if="!editingContact?.readonly"
+        strong
+        @click="saveContact"
+        >{{
         phone.t('Common.save')
       }}</k-dialog-button>
     </template>
diff --git a/frontend/src/views/apps/RadioApp.vue b/frontend/src/views/apps/RadioApp.vue
index 00a600d..ea762d9 100644
--- a/frontend/src/views/apps/RadioApp.vue
+++ b/frontend/src/views/apps/RadioApp.vue
@@ -28,6 +28,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { usePhoneStore } from '@/stores/phone'
 import { useRadioStore } from '@/stores/radio'
 import type { RadioHistoryEntry } from '@/types/radio'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type RadioTab = 'radio' | 'settings'
 
@@ -152,6 +153,7 @@ async function saveRadioProfile(): Promise<void> {
 }
 
 function onMessage(event: MessageEvent): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data?.type === 'radio:updated' && event.data.data?.members) {
     memberSnapshotAt.value = Date.now()
     radio.updateMembers(event.data.data.members)
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index f390faa..87a2d9a 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -49,7 +49,11 @@ import {
 } from 'vue'
 
 import { PHONE_FRAME_COLORS } from '@/config/appearance'
-import { isLaunchablePhoneApp, PHONE_APPS } from '@/config/apps'
+import {
+  getPhoneAppLabel,
+  isLaunchablePhoneApp,
+  PHONE_APPS,
+} from '@/config/apps'
 import { usePhoneStore } from '@/stores/phone'
 import PhonePasscode from '@/components/PhonePasscode.vue'
 import { useAccountStore } from '@/stores/account'
@@ -281,7 +285,7 @@ const activeTitle = computed(() => {
   }
   if (activeView.value === 'notification-detail') {
     return selectedNotificationApp.value
-      ? phone.t(selectedNotificationApp.value.labelKey)
+      ? getPhoneAppLabel(selectedNotificationApp.value, phone.t)
       : phone.t('Apps.settings.notifications')
   }
   return phone.t(`Apps.settings.${activeView.value}`)
@@ -1030,7 +1034,7 @@ onBeforeUnmount(() => {
             v-for="app in notificationApps"
             :key="app.id"
             link
-            :title="phone.t(app.labelKey)"
+            :title="getPhoneAppLabel(app, phone.t)"
             :after="
               phone.t(
                 phone.preferences.settings.notifications[app.id].enabled
@@ -1058,7 +1062,9 @@ onBeforeUnmount(() => {
         "
       >
         <k-list strong inset>
-          <k-list-item :title="phone.t(selectedNotificationApp.labelKey)">
+          <k-list-item
+            :title="getPhoneAppLabel(selectedNotificationApp, phone.t)"
+          >
             <template #media>
               <img
                 class="w-12 h-12 object-contain"
@@ -1080,7 +1086,7 @@ onBeforeUnmount(() => {
                 "
                 :aria-label="
                   phone.t('Apps.settings.toggle.notifications', {
-                    app: phone.t(selectedNotificationApp.labelKey),
+                    app: getPhoneAppLabel(selectedNotificationApp, phone.t),
                   })
                 "
                 @change="
@@ -1110,7 +1116,7 @@ onBeforeUnmount(() => {
                 "
                 :aria-label="
                   phone.t('Apps.settings.toggle.notificationSounds', {
-                    app: phone.t(selectedNotificationApp.labelKey),
+                    app: getPhoneAppLabel(selectedNotificationApp, phone.t),
                   })
                 "
                 @change="
diff --git a/frontend/src/views/apps/SkyRideApp.vue b/frontend/src/views/apps/SkyRideApp.vue
index 2882862..d7968d7 100644
--- a/frontend/src/views/apps/SkyRideApp.vue
+++ b/frontend/src/views/apps/SkyRideApp.vue
@@ -78,6 +78,7 @@ import type {
   SkyRideRide,
   SkyRideRideStatus,
 } from '@/types/skyride'
+import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type SkyRideTab = 'home' | 'rides' | 'activity' | 'messages' | 'profile'
 type LocationTarget = 'pickup' | 'destination'
@@ -677,6 +678,7 @@ function selectTab(tab: SkyRideTab): void {
 }
 
 function handleSkyRideMessage(event: MessageEvent<unknown>): void {
+  if (!isTrustedRootMessageSource(event.source, window)) return
   if (typeof event.data !== 'object' || event.data === null) return
   const message = event.data as Partial<SkyRideChangedMessage>
   if (message.type !== 'skyride:changed' || !message.data) return
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index c9b57f2..4b18041 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -1054,6 +1054,42 @@ const contacts = [
     phone_number: '5558675309',
     updated_at: '2026-08-04 12:00:00',
   },
+  {
+    canCall: true,
+    canMessage: false,
+    companyId: 'police',
+    icon: 'https://picsum.photos/seed/companies-police-logo/180/180',
+    id: 'company:police',
+    name: 'Los Santos Police',
+    phone_number: '911',
+    readonly: true,
+    source: 'company',
+    verified: true,
+  },
+  {
+    canCall: true,
+    canMessage: false,
+    companyId: 'ambulance',
+    icon: 'https://picsum.photos/seed/companies-ems-logo/180/180',
+    id: 'company:ambulance',
+    name: 'Los Santos Medical',
+    phone_number: '912',
+    readonly: true,
+    source: 'company',
+    verified: true,
+  },
+  {
+    canCall: true,
+    canMessage: true,
+    companyId: 'bennys',
+    icon: 'https://picsum.photos/seed/companies-bennys-logo/180/180',
+    id: 'company:bennys',
+    name: "Benny's Motor Works",
+    phone_number: '5550102',
+    readonly: true,
+    source: 'company',
+    verified: true,
+  },
 ]
 const attachmentAssets = {
   gif: new Set(['celebrate', 'hearts', 'party', 'thumbs_up', 'wow']),
@@ -2097,6 +2133,488 @@ function flareBootstrap() {
   }
 }
 
+const companyCategories = [
+  { id: 'public_services', name: 'Public Services' },
+  { id: 'medical', name: 'Medical' },
+  { id: 'mechanics', name: 'Mechanics' },
+  { id: 'transport', name: 'Transport' },
+  { id: 'gastronomy', name: 'Food & Drink' },
+]
+let companyCallAvailable = false
+const companyProfiles = [
+  {
+    acceptsRequests: false,
+    announcement: {
+      body: 'Community traffic unit active around Legion Square.',
+      expiresAt: isoTime(6 * 60 * 60 * 1000),
+      publishedAt: isoTime(-35 * 60 * 1000),
+    },
+    availability: 'available',
+    availabilityUpdatedAt: isoTime(-12 * 60 * 1000),
+    canCall: true,
+    canMessage: false,
+    categoryId: 'public_services',
+    categoryName: 'Public Services',
+    coverUrl: 'https://picsum.photos/seed/companies-police-cover/900/360',
+    description:
+      'Public safety, non-emergency assistance, and community response for Los Santos.',
+    hours: [],
+    id: 'police',
+    location: {
+      address: 'Sinner Street',
+      coords: { x: 441.2, y: -981.9, z: 30.7 },
+      district: 'Mission Row',
+      label: 'Mission Row Police Station',
+    },
+    logoUrl: 'https://picsum.photos/seed/companies-police-logo/180/180',
+    name: 'Los Santos Police',
+    phoneNumber: '911',
+    revision: 3,
+    services: [
+      {
+        acceptsRequests: false,
+        active: true,
+        description: 'Immediate police response through the service line.',
+        id: 'emergency-response',
+        priceText: null,
+        title: 'Emergency Response',
+      },
+      {
+        acceptsRequests: false,
+        active: true,
+        description: 'General information and non-emergency assistance.',
+        id: 'public-assistance',
+        priceText: null,
+        title: 'Public Assistance',
+      },
+    ],
+    serviceSummary: 'Emergency response and public assistance',
+    verified: true,
+  },
+  {
+    acceptsRequests: false,
+    announcement: null,
+    availability: 'busy',
+    availabilityUpdatedAt: isoTime(-22 * 60 * 1000),
+    canCall: true,
+    canMessage: false,
+    categoryId: 'medical',
+    categoryName: 'Medical',
+    coverUrl: 'https://picsum.photos/seed/companies-ems-cover/900/360',
+    description:
+      'Emergency medical response and patient care across Los Santos County.',
+    hours: [],
+    id: 'ambulance',
+    location: {
+      address: 'Elgin Avenue',
+      coords: { x: 298.4, y: -584.6, z: 43.3 },
+      district: 'Pillbox Hill',
+      label: 'Pillbox Medical Center',
+    },
+    logoUrl: 'https://picsum.photos/seed/companies-ems-logo/180/180',
+    name: 'Los Santos Medical',
+    phoneNumber: '912',
+    revision: 1,
+    services: [
+      {
+        acceptsRequests: false,
+        active: true,
+        description: 'Urgent medical assistance through the service line.',
+        id: 'medical-response',
+        priceText: null,
+        title: 'Medical Response',
+      },
+    ],
+    serviceSummary: 'Emergency medical care',
+    verified: true,
+  },
+  {
+    acceptsRequests: true,
+    announcement: {
+      body: 'Same-day repairs available until 10 PM.',
+      expiresAt: isoTime(10 * 60 * 60 * 1000),
+      publishedAt: isoTime(-48 * 60 * 1000),
+    },
+    availability: 'available',
+    availabilityUpdatedAt: isoTime(-6 * 60 * 1000),
+    canCall: true,
+    canMessage: true,
+    categoryId: 'mechanics',
+    categoryName: 'Mechanics',
+    coverUrl: 'https://picsum.photos/seed/companies-bennys-cover/900/360',
+    description:
+      'Repairs, roadside assistance, performance upgrades, and custom bodywork.',
+    hours: [
+      { closesAt: '22:00', day: 0, isClosed: false, opensAt: '10:00' },
+      { closesAt: '22:00', day: 1, isClosed: false, opensAt: '10:00' },
+      { closesAt: '22:00', day: 2, isClosed: false, opensAt: '10:00' },
+      { closesAt: '22:00', day: 3, isClosed: false, opensAt: '10:00' },
+      { closesAt: '23:30', day: 4, isClosed: false, opensAt: '10:00' },
+      { closesAt: '23:30', day: 5, isClosed: false, opensAt: '12:00' },
+      { closesAt: null, day: 6, isClosed: true, opensAt: null },
+    ],
+    id: 'bennys',
+    location: {
+      address: 'Alta Street',
+      coords: { x: -211.6, y: -1324.2, z: 30.9 },
+      district: 'Strawberry',
+      label: "Benny's Original Motor Works",
+    },
+    logoUrl: 'https://picsum.photos/seed/companies-bennys-logo/180/180',
+    name: "Benny's Motor Works",
+    phoneNumber: '5550102',
+    revision: 7,
+    services: [
+      {
+        acceptsRequests: true,
+        active: true,
+        description: 'Diagnostics and general mechanical repairs.',
+        id: 'repair',
+        priceText: 'from $250',
+        title: 'Vehicle Repair',
+      },
+      {
+        acceptsRequests: true,
+        active: true,
+        description: 'Mobile help for disabled vehicles.',
+        id: 'roadside',
+        priceText: 'from $175',
+        title: 'Roadside Assistance',
+      },
+      {
+        acceptsRequests: true,
+        active: true,
+        description: 'Paint, wheels, and body modifications.',
+        id: 'customization',
+        priceText: 'Quote',
+        title: 'Customization',
+      },
+    ],
+    serviceSummary: 'Repairs, roadside help, and customization',
+    verified: true,
+  },
+  {
+    acceptsRequests: true,
+    announcement: null,
+    availability: 'available',
+    availabilityUpdatedAt: isoTime(-19 * 60 * 1000),
+    canCall: true,
+    canMessage: true,
+    categoryId: 'transport',
+    categoryName: 'Transport',
+    coverUrl: 'https://picsum.photos/seed/companies-taxi-cover/900/360',
+    description: 'Citywide passenger transport and pre-arranged group rides.',
+    hours: [],
+    id: 'downtown-cab',
+    location: {
+      address: 'Tangerine Street',
+      coords: { x: 900.3, y: -170.2, z: 74.1 },
+      district: 'East Vinewood',
+      label: 'Downtown Cab Co.',
+    },
+    logoUrl: 'https://picsum.photos/seed/companies-taxi-logo/180/180',
+    name: 'Downtown Cab Co.',
+    phoneNumber: '5550103',
+    revision: 2,
+    services: [
+      {
+        acceptsRequests: true,
+        active: true,
+        description: 'A driver will collect you at your location.',
+        id: 'pickup',
+        priceText: 'Metered',
+        title: 'Passenger Pickup',
+      },
+    ],
+    serviceSummary: 'Passenger pickups throughout the city',
+    verified: true,
+  },
+  {
+    acceptsRequests: true,
+    announcement: null,
+    availability: 'closed',
+    availabilityUpdatedAt: isoTime(-3 * 60 * 60 * 1000),
+    canCall: true,
+    canMessage: true,
+    categoryId: 'gastronomy',
+    categoryName: 'Food & Drink',
+    coverUrl: 'https://picsum.photos/seed/companies-burgershot-cover/900/360',
+    description: 'Burgers, fries, shakes, and late-night catering.',
+    hours: [],
+    id: 'burgershot',
+    location: {
+      address: 'San Andreas Avenue',
+      coords: { x: -1193.8, y: -892.5, z: 14 },
+      district: 'Vespucci',
+      label: 'Burger Shot',
+    },
+    logoUrl: 'https://picsum.photos/seed/companies-burgershot-logo/180/180',
+    name: 'Burger Shot',
+    phoneNumber: '5550104',
+    revision: 1,
+    services: [
+      {
+        acceptsRequests: true,
+        active: true,
+        description: 'Food order for collection at the restaurant.',
+        id: 'catering',
+        priceText: 'Quote',
+        title: 'Event Catering',
+      },
+    ],
+    serviceSummary: 'Food, drinks, and event catering',
+    verified: true,
+  },
+]
+
+let companyRequestSequence = 4
+let companyRequests = [
+  {
+    actions: {
+      allowedStatuses: ['in_progress', 'waiting_customer', 'completed'],
+      canAssign: true,
+      canCall: true,
+      canCancel: true,
+      canClaim: false,
+      canReply: true,
+    },
+    assignedLabel: 'you',
+    companyId: 'bennys',
+    companyLogoUrl: companyProfiles[2].logoUrl,
+    companyName: companyProfiles[2].name,
+    createdAt: isoTime(-2 * 60 * 60 * 1000),
+    description:
+      'My Sultan stopped near Legion Square and the engine will not start.',
+    events: [
+      {
+        createdAt: isoTime(-2 * 60 * 60 * 1000),
+        id: 'company-event-1',
+        status: 'new',
+        type: 'created',
+      },
+      {
+        createdAt: isoTime(-95 * 60 * 1000),
+        id: 'company-event-2',
+        status: 'assigned',
+        type: 'assigned',
+      },
+      {
+        createdAt: isoTime(-80 * 60 * 1000),
+        id: 'company-event-3',
+        status: 'in_progress',
+        type: 'status_changed',
+      },
+    ],
+    id: 'company-request-1',
+    media: [
+      {
+        id: 3,
+        url: 'https://picsum.photos/seed/sky-phone-3/800/600',
+      },
+      {
+        id: 4,
+        url: 'https://picsum.photos/seed/sky-phone-4/800/600',
+      },
+    ],
+    messages: [
+      {
+        author: 'customer',
+        authorLabel: 'you',
+        body: 'I am parked on the north side of the square.',
+        createdAt: isoTime(-110 * 60 * 1000),
+        id: 'company-message-1',
+        isMine: true,
+      },
+      {
+        author: 'company',
+        authorLabel: 'company',
+        body: 'A mechanic is heading your way. Please stay near the vehicle.',
+        createdAt: isoTime(-78 * 60 * 1000),
+        id: 'company-message-2',
+        isMine: false,
+      },
+    ],
+    phoneNumber: companyProfiles[2].phoneNumber,
+    revision: 3,
+    serviceId: 'roadside',
+    serviceName: 'Roadside Assistance',
+    status: 'in_progress',
+    subject: 'Vehicle will not start',
+    unreadCount: 1,
+    updatedAt: isoTime(-78 * 60 * 1000),
+  },
+  {
+    actions: {
+      allowedStatuses: ['assigned', 'cancelled'],
+      canAssign: true,
+      canCall: true,
+      canCancel: true,
+      canClaim: true,
+      canReply: true,
+    },
+    assignedLabel: null,
+    companyId: 'bennys',
+    companyLogoUrl: companyProfiles[2].logoUrl,
+    companyName: companyProfiles[2].name,
+    createdAt: isoTime(-18 * 60 * 1000),
+    description:
+      'I would like a quote for a metallic blue repaint and new wheels.',
+    events: [
+      {
+        createdAt: isoTime(-18 * 60 * 1000),
+        id: 'company-event-4',
+        status: 'new',
+        type: 'created',
+      },
+    ],
+    id: 'company-request-2',
+    media: [],
+    messages: [],
+    phoneNumber: companyProfiles[2].phoneNumber,
+    revision: 1,
+    serviceId: 'customization',
+    serviceName: 'Customization',
+    status: 'new',
+    subject: 'Repaint and wheels',
+    unreadCount: 0,
+    updatedAt: isoTime(-18 * 60 * 1000),
+  },
+  {
+    actions: {
+      allowedStatuses: [],
+      canAssign: false,
+      canCall: true,
+      canCancel: false,
+      canClaim: false,
+      canReply: false,
+    },
+    assignedLabel: 'assigned',
+    companyId: 'bennys',
+    companyLogoUrl: companyProfiles[2].logoUrl,
+    companyName: companyProfiles[2].name,
+    createdAt: isoTime(-2 * 24 * 60 * 60 * 1000),
+    description: 'Routine engine service and fluids.',
+    events: [
+      {
+        createdAt: isoTime(-2 * 24 * 60 * 60 * 1000),
+        id: 'company-event-5',
+        status: 'new',
+        type: 'created',
+      },
+      {
+        createdAt: isoTime(-26 * 60 * 60 * 1000),
+        id: 'company-event-6',
+        status: 'completed',
+        type: 'completed',
+      },
+    ],
+    id: 'company-request-3',
+    media: [],
+    messages: [],
+    phoneNumber: companyProfiles[2].phoneNumber,
+    revision: 4,
+    serviceId: 'repair',
+    serviceName: 'Vehicle Repair',
+    status: 'completed',
+    subject: 'Routine service',
+    unreadCount: 0,
+    updatedAt: isoTime(-26 * 60 * 60 * 1000),
+  },
+]
+
+const companyMembers = [
+  { id: 'member-mia', name: 'Mia Torres', online: true, role: 'Mechanic' },
+  { id: 'member-jay', name: 'Jay Coleman', online: true, role: 'Tow Operator' },
+  { id: 'member-robin', name: '', online: false, role: 'Mechanic' },
+]
+
+function companySummary(company) {
+  const { coverUrl, hours, revision, services, ...summary } = company
+  return {
+    ...summary,
+    serviceSummary:
+      company.serviceSummary ??
+      services.map((service) => service.title).join(', '),
+  }
+}
+
+function companyRequestSummary(request) {
+  const {
+    actions,
+    description,
+    events,
+    media,
+    messages,
+    phoneNumber,
+    revision,
+    ...summary
+  } = request
+  return summary
+}
+
+function companyWorkContext(testScenario = '') {
+  if (testScenario === 'companies-unauthorized') {
+    return {
+      authorized: false,
+      callAvailable: false,
+      company: null,
+      metrics: { assigned: 0, completedToday: 0, new: 0, waiting: 0 },
+      ownRequests: [],
+      permissions: {
+        canAssign: false,
+        canManageAnnouncement: false,
+        canManageHours: false,
+        canManageProfile: false,
+        canManageServices: false,
+        canSetAvailability: false,
+        canTakeCalls: false,
+      },
+      recentRequests: [],
+      role: null,
+      unreadCount: 0,
+    }
+  }
+  const manager = testScenario === 'companies-manager'
+  const open = companyRequests.filter(
+    (request) =>
+      request.companyId === 'bennys' &&
+      !['completed', 'cancelled'].includes(request.status),
+  )
+  return {
+    authorized: true,
+    callAvailable: companyCallAvailable,
+    company: companyProfiles.find((company) => company.id === 'bennys'),
+    metrics: {
+      assigned: open.filter((request) => request.assignedLabel).length,
+      completedToday: companyRequests.filter(
+        (request) =>
+          request.companyId === 'bennys' && request.status === 'completed',
+      ).length,
+      new: open.filter((request) => request.status === 'new').length,
+      waiting: open.filter((request) => request.status === 'waiting_customer')
+        .length,
+    },
+    ownRequests: open
+      .filter((request) => request.assignedLabel)
+      .map(companyRequestSummary),
+    permissions: {
+      canAssign: manager,
+      canManageAnnouncement: manager,
+      canManageHours: manager,
+      canManageProfile: manager,
+      canManageServices: manager,
+      canSetAvailability: true,
+      canTakeCalls: true,
+    },
+    recentRequests: open.slice(0, 4).map(companyRequestSummary),
+    role: manager ? 'manager' : 'employee',
+    unreadCount: open.reduce(
+      (total, request) => total + request.unreadCount,
+      0,
+    ),
+  }
+}
+
 app.post('/api/:endpoint', async (request, response, next) => {
   console.log(`[NUI] ${request.params.endpoint}`, request.body)
   const endpoint = request.params.endpoint
@@ -2659,6 +3177,412 @@ app.post('/api/:endpoint', (request, response) => {
   console.log(`[NUI] ${request.params.endpoint}`, request.body)
   const endpoint = request.params.endpoint
   const testScenario = String(request.body._testScenario ?? '')
+  if (endpoint.startsWith('companies:') && testScenario === 'companies-error') {
+    response.json({ success: false, error: 'service_unavailable' })
+    return
+  }
+  if (endpoint === 'companies:list') {
+    const reply = () => {
+      const search = String(request.body.search ?? '')
+        .trim()
+        .toLowerCase()
+      const categoryId = String(request.body.categoryId ?? '')
+      const availability = String(request.body.availability ?? '')
+      const offset = Math.max(0, Number(request.body.cursor ?? 0))
+      const pageSize = 3
+      let items = companyProfiles.filter((company) => {
+        if (categoryId && company.categoryId !== categoryId) return false
+        if (availability && company.availability !== availability) return false
+        if (request.body.hasLocation && !company.location) return false
+        if (request.body.acceptsRequests && !company.acceptsRequests)
+          return false
+        if (!search) return true
+        return [
+          company.name,
+          company.categoryName,
+          company.description,
+          company.location?.district,
+          ...company.services.flatMap((service) => [
+            service.title,
+            service.description,
+          ]),
+        ]
+          .filter(Boolean)
+          .some((value) => String(value).toLowerCase().includes(search))
+      })
+      if (request.body.sort === 'name') {
+        items = [...items].sort((left, right) =>
+          left.name.localeCompare(right.name),
+        )
+      } else if (request.body.sort === 'updated') {
+        items = [...items].sort(
+          (left, right) =>
+            new Date(right.availabilityUpdatedAt).getTime() -
+            new Date(left.availabilityUpdatedAt).getTime(),
+        )
+      }
+      if (
+        testScenario === 'companies-empty-search' ||
+        search === 'no results'
+      ) {
+        items = []
+      }
+      const page = items.slice(offset, offset + pageSize)
+      response.json({
+        success: true,
+        data: {
+          categories: companyCategories,
+          companies: page.map(companySummary),
+          nextCursor:
+            offset + page.length < items.length
+              ? String(offset + page.length)
+              : null,
+        },
+      })
+    }
+    if (testScenario === 'companies-loading') setTimeout(reply, 1200)
+    else reply()
+    return
+  }
+  if (endpoint === 'companies:get') {
+    const company = companyProfiles.find(
+      (item) => item.id === String(request.body.companyId),
+    )
+    response.json(
+      company
+        ? { success: true, data: { company } }
+        : { success: false, error: 'company_not_found' },
+    )
+    return
+  }
+  if (endpoint === 'companies:my-requests') {
+    const list = request.body.list === 'closed' ? 'closed' : 'open'
+    const offset = Math.max(0, Number(request.body.cursor ?? 0))
+    const matches = companyRequests.filter((item) =>
+      list === 'closed'
+        ? ['completed', 'cancelled'].includes(item.status)
+        : !['completed', 'cancelled'].includes(item.status),
+    )
+    const page = matches.slice(offset, offset + 2)
+    response.json({
+      success: true,
+      data: {
+        nextCursor:
+          offset + page.length < matches.length
+            ? String(offset + page.length)
+            : null,
+        requests: page.map(companyRequestSummary),
+        unreadCount: companyRequests.reduce(
+          (total, item) => total + item.unreadCount,
+          0,
+        ),
+      },
+    })
+    return
+  }
+  if (endpoint === 'companies:get-request') {
+    const item = companyRequests.find(
+      (candidate) => candidate.id === String(request.body.requestId),
+    )
+    if (item) item.unreadCount = 0
+    response.json(
+      item
+        ? { success: true, data: { request: item } }
+        : { success: false, error: 'request_not_found' },
+    )
+    return
+  }
+  if (endpoint === 'companies:work-context') {
+    response.json({
+      success: true,
+      data: { context: companyWorkContext(testScenario) },
+    })
+    return
+  }
+  if (endpoint === 'companies:work-queue') {
+    const filter = String(request.body.filter ?? 'new')
+    const offset = Math.max(0, Number(request.body.cursor ?? 0))
+    const matches = companyRequests.filter((item) => {
+      if (item.companyId !== 'bennys') return false
+      if (filter === 'assigned') return item.assignedLabel === 'you'
+      return item.status === filter
+    })
+    const page = matches.slice(offset, offset + 2)
+    response.json({
+      success: true,
+      data: {
+        nextCursor:
+          offset + page.length < matches.length
+            ? String(offset + page.length)
+            : null,
+        requests: page.map(companyRequestSummary),
+      },
+    })
+    return
+  }
+  if (endpoint === 'companies:list-members') {
+    response.json({ success: true, data: { members: companyMembers } })
+    return
+  }
+  if (endpoint === 'companies:create-request') {
+    const company = companyProfiles.find(
+      (item) => item.id === String(request.body.companyId),
+    )
+    const service = company?.services.find(
+      (item) => item.id === String(request.body.serviceId),
+    )
+    if (!company?.acceptsRequests || !service?.acceptsRequests) {
+      response.json({ success: false, error: 'invalid_service' })
+      return
+    }
+    const now = new Date().toISOString()
+    const item = {
+      actions: {
+        allowedStatuses: ['assigned', 'cancelled'],
+        canAssign: true,
+        canCall: true,
+        canCancel: true,
+        canClaim: true,
+        canReply: true,
+      },
+      assignedLabel: null,
+      companyId: company.id,
+      companyLogoUrl: company.logoUrl,
+      companyName: company.name,
+      createdAt: now,
+      description: String(request.body.description ?? ''),
+      events: [
+        {
+          createdAt: now,
+          id: `company-event-${Date.now()}`,
+          status: 'new',
+          type: 'created',
+        },
+      ],
+      id: `company-request-${companyRequestSequence++}`,
+      media: (Array.isArray(request.body.mediaIds)
+        ? request.body.mediaIds
+        : []
+      ).flatMap((mediaId) => {
+        const media = mockMedia.find(
+          (candidate) =>
+            candidate.id === Number(mediaId) && candidate.mediaType === 'photo',
+        )
+        return media ? [{ id: media.id, url: media.url }] : []
+      }),
+      messages: [],
+      phoneNumber: company.phoneNumber,
+      revision: 1,
+      serviceId: service.id,
+      serviceName: service.title,
+      status: 'new',
+      subject: String(request.body.subject ?? ''),
+      unreadCount: 0,
+      updatedAt: now,
+    }
+    companyRequests.unshift(item)
+    response.json({ success: true, data: { request: item } })
+    return
+  }
+  if (
+    [
+      'companies:cancel-request',
+      'companies:send-message',
+      'companies:claim-request',
+      'companies:assign-request',
+      'companies:update-request-status',
+    ].includes(endpoint)
+  ) {
+    const item = companyRequests.find(
+      (candidate) => candidate.id === String(request.body.requestId),
+    )
+    if (!item) {
+      response.json({ success: false, error: 'request_not_found' })
+      return
+    }
+    if (Number(request.body.revision) !== item.revision) {
+      response.json({ success: false, error: 'revision_conflict' })
+      return
+    }
+    const now = new Date().toISOString()
+    if (endpoint === 'companies:cancel-request') {
+      item.status = 'cancelled'
+      item.actions = {
+        allowedStatuses: [],
+        canAssign: false,
+        canCall: true,
+        canCancel: false,
+        canClaim: false,
+        canReply: false,
+      }
+      item.events.push({
+        createdAt: now,
+        id: `company-event-${Date.now()}`,
+        status: 'cancelled',
+        type: 'cancelled',
+      })
+    }
+    if (endpoint === 'companies:send-message') {
+      item.messages.push({
+        author: 'customer',
+        authorLabel: 'you',
+        body: String(request.body.body ?? ''),
+        createdAt: now,
+        id: `company-message-${Date.now()}`,
+        isMine: true,
+      })
+    }
+    if (endpoint === 'companies:claim-request') {
+      item.assignedLabel = 'you'
+      item.status = 'assigned'
+      item.actions.canClaim = false
+      item.events.push({
+        createdAt: now,
+        id: `company-event-${Date.now()}`,
+        status: 'assigned',
+        type: 'assigned',
+      })
+    }
+    if (endpoint === 'companies:assign-request') {
+      const member = companyMembers.find(
+        (candidate) => candidate.id === String(request.body.memberId),
+      )
+      if (!member?.online) {
+        response.json({ success: false, error: 'not_authorized' })
+        return
+      }
+      item.assignedLabel = 'assigned'
+      item.status = 'assigned'
+      item.actions.canClaim = false
+      item.events.push({
+        createdAt: now,
+        id: `company-event-${Date.now()}`,
+        status: 'assigned',
+        type: 'assigned',
+      })
+    }
+    if (endpoint === 'companies:update-request-status') {
+      item.status = String(request.body.status)
+      item.events.push({
+        createdAt: now,
+        id: `company-event-${Date.now()}`,
+        status: item.status,
+        type:
+          item.status === 'completed'
+            ? 'completed'
+            : item.status === 'cancelled'
+              ? 'cancelled'
+              : 'status_changed',
+      })
+    }
+    item.revision += 1
+    item.updatedAt = now
+    response.json({
+      success: true,
+      data: {
+        context: companyWorkContext(testScenario),
+        request: item,
+      },
+    })
+    return
+  }
+  if (
+    [
+      'companies:update-availability',
+      'companies:update-profile',
+      'companies:update-hours',
+      'companies:update-services',
+      'companies:publish-announcement',
+    ].includes(endpoint)
+  ) {
+    const company = companyProfiles.find((item) => item.id === 'bennys')
+    if (
+      testScenario === 'companies-conflict' ||
+      Number(request.body.revision) !== company.revision
+    ) {
+      response.json({ success: false, error: 'revision_conflict' })
+      return
+    }
+    if (endpoint === 'companies:update-availability') {
+      company.availability = String(request.body.availability)
+      company.availabilityUpdatedAt = new Date().toISOString()
+    }
+    if (endpoint === 'companies:update-profile') {
+      company.acceptsRequests = request.body.acceptsRequests === true
+      company.description = String(request.body.description ?? '')
+      company.location = {
+        ...company.location,
+        address: String(request.body.address ?? ''),
+        coords:
+          request.body.coords && typeof request.body.coords === 'object'
+            ? { ...request.body.coords }
+            : company.location.coords,
+        district: String(request.body.district ?? ''),
+        label: String(request.body.locationLabel ?? ''),
+      }
+      const logo = mockMedia.find(
+        (item) => item.id === Number(request.body.logoMediaId),
+      )
+      const cover = mockMedia.find(
+        (item) => item.id === Number(request.body.coverMediaId),
+      )
+      if (logo) company.logoUrl = logo.url
+      if (cover) company.coverUrl = cover.url
+    }
+    if (endpoint === 'companies:update-hours') {
+      company.hours = Array.isArray(request.body.hours)
+        ? request.body.hours
+        : []
+    }
+    if (endpoint === 'companies:update-services') {
+      company.services = Array.isArray(request.body.services)
+        ? request.body.services.map((service, index) => ({
+            ...service,
+            id: service.id || `service-${Date.now()}-${index}`,
+          }))
+        : []
+      company.serviceSummary = company.services
+        .filter((service) => service.active)
+        .map((service) => service.title)
+        .join(', ')
+    }
+    if (endpoint === 'companies:publish-announcement') {
+      const body = String(request.body.body ?? '').trim()
+      company.announcement = body
+        ? {
+            body,
+            expiresAt: request.body.expiresAt || null,
+            publishedAt: new Date().toISOString(),
+          }
+        : null
+    }
+    company.revision += 1
+    response.json({
+      success: true,
+      data: {
+        company,
+        context: companyWorkContext(testScenario),
+      },
+    })
+    return
+  }
+  if (endpoint === 'companies:set-call-availability') {
+    companyCallAvailable = request.body.available === true
+    response.json({
+      success: true,
+      data: { context: companyWorkContext(testScenario) },
+    })
+    return
+  }
+  if (endpoint === 'companies:call-customer') {
+    const item = companyRequests.find(
+      (candidate) => candidate.id === String(request.body.requestId),
+    )
+    response.json(
+      item ? { success: true } : { success: false, error: 'request_not_found' },
+    )
+    return
+  }
   if (endpoint === 'crewlink:bootstrap') {
     response.json({ success: true, data: crewLinkBootstrap(testScenario) })
     return
@@ -2734,7 +3658,9 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'crewlink:update-group') {
-    const group = crewLinkGroups.find((item) => item.id === request.body.groupId)
+    const group = crewLinkGroups.find(
+      (item) => item.id === request.body.groupId,
+    )
     if (!group) {
       response.json({ success: false, error: 'group_not_found' })
       return
@@ -2749,7 +3675,9 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'crewlink:delete-group') {
-    crewLinkGroups = crewLinkGroups.filter((item) => item.id !== request.body.groupId)
+    crewLinkGroups = crewLinkGroups.filter(
+      (item) => item.id !== request.body.groupId,
+    )
     delete crewLinkMembers[request.body.groupId]
     delete crewLinkPings[request.body.groupId]
     crewLinkProfile.activeGroupId = crewLinkGroups[0]?.id ?? null
@@ -2757,7 +3685,9 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'crewlink:set-active') {
-    const group = crewLinkGroups.find((item) => item.id === request.body.groupId)
+    const group = crewLinkGroups.find(
+      (item) => item.id === request.body.groupId,
+    )
     if (!group) {
       response.json({ success: false, error: 'group_not_found' })
       return
@@ -2802,7 +3732,9 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'crewlink:rotate-code') {
-    const group = crewLinkGroups.find((item) => item.id === request.body.groupId)
+    const group = crewLinkGroups.find(
+      (item) => item.id === request.body.groupId,
+    )
     if (group) group.inviteCode = 'FRESH247'
     response.json({ success: true, data: { inviteCode: 'FRESH247' } })
     return
@@ -2848,7 +3780,9 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'crewlink:transfer-owner') {
-    const group = crewLinkGroups.find((item) => item.id === request.body.groupId)
+    const group = crewLinkGroups.find(
+      (item) => item.id === request.body.groupId,
+    )
     const members = crewLinkMembers[request.body.groupId] ?? []
     const current = members.find((item) => item.id === crewLinkProfile.id)
     const next = members.find((item) => item.id === request.body.profileId)
@@ -2867,13 +3801,17 @@ app.post('/api/:endpoint', (request, response) => {
     crewLinkMembers[request.body.groupId] = members.filter(
       (item) => item.id !== request.body.profileId,
     )
-    const group = crewLinkGroups.find((item) => item.id === request.body.groupId)
+    const group = crewLinkGroups.find(
+      (item) => item.id === request.body.groupId,
+    )
     if (group) group.memberCount = crewLinkMembers[request.body.groupId].length
     response.json({ success: true })
     return
   }
   if (endpoint === 'crewlink:leave') {
-    crewLinkGroups = crewLinkGroups.filter((item) => item.id !== request.body.groupId)
+    crewLinkGroups = crewLinkGroups.filter(
+      (item) => item.id !== request.body.groupId,
+    )
     crewLinkProfile.activeGroupId = crewLinkGroups[0]?.id ?? null
     response.json({ success: true, data: crewLinkBootstrap() })
     return
@@ -5243,6 +6181,10 @@ app.post('/api/:endpoint', (request, response) => {
       return
     }
     let contact = contacts.find((item) => item.id === request.body.id)
+    if (contact?.readonly) {
+      response.json({ success: false, error: 'readonly_contact' })
+      return
+    }
     if (contact) {
       contact.name = name
       contact.phone_number = phoneNumber
@@ -5266,6 +6208,10 @@ app.post('/api/:endpoint', (request, response) => {
   }
   if (endpoint === 'contacts:delete') {
     const index = contacts.findIndex((item) => item.id === request.body.id)
+    if (index >= 0 && contacts[index].readonly) {
+      response.json({ success: false, error: 'readonly_contact' })
+      return
+    }
     if (index >= 0) contacts.splice(index, 1)
     response.json({ success: true })
     return
diff --git a/sky_phone/config/companies.lua b/sky_phone/config/companies.lua
new file mode 100644
index 0000000..efb5130
--- /dev/null
+++ b/sky_phone/config/companies.lua
@@ -0,0 +1,248 @@
+Config.Companies = {
+    Enabled = true,
+    PageSize = 20,
+    MaximumPageSize = 50,
+    MaximumOpenRequestsPerSim = 5,
+    MaximumServices = 25,
+    MaximumRequestMedia = 3,
+    SubjectMaxLength = 120,
+    RequestBodyMaxLength = 2000,
+    MessageMaxLength = 2000,
+    ProfileDescriptionMaxLength = 1000,
+    DistrictMaxLength = 80,
+    AddressMaxLength = 160,
+    ServiceTitleMaxLength = 80,
+    ServiceDescriptionMaxLength = 500,
+    ServicePriceMaxLength = 80,
+    AnnouncementTitleMaxLength = 120,
+    AnnouncementBodyMaxLength = 1000,
+    AvailabilityMaximumSeconds = 24 * 60 * 60,
+    AnnouncementMaximumSeconds = 30 * 24 * 60 * 60,
+    RetentionDays = 180,
+    RateLimits = {
+        Read = 120,
+        Search = 60,
+        CreateRequest = 5,
+        Message = 30,
+        RequestAction = 30,
+        Profile = 12,
+        CallAvailability = 30,
+    },
+    CallRouting = {
+        MaxAttempts = 3,
+        RingSeconds = 10,
+    },
+    Categories = {
+        "public_services",
+        "vehicles",
+        "transport",
+    },
+    Statuses = {
+        new = true,
+        assigned = true,
+        in_progress = true,
+        waiting_customer = true,
+        completed = true,
+        cancelled = true,
+    },
+    AvailabilityStatuses = {
+        available = true,
+        busy = true,
+        closed = true,
+    },
+    Definitions = {
+        police = {
+            Job = "police",
+            Name = "Los Santos Police Department",
+            Category = "public_services",
+            Public = true,
+            Emergency = true,
+            Verified = true,
+            Icon = "shield",
+            Description = "Public safety, emergency response, and police services.",
+            DefaultAvailability = "closed",
+            AcceptsRequests = false,
+            District = "Mission Row",
+            LocationLabel = "Mission Row Police Station",
+            Address = "Mission Row Police Station",
+            Location = vector3(425.1, -979.5, 30.7),
+            ServiceLine = {
+                Number = "9110000000",
+                AutoContact = true,
+                CanCall = true,
+                CanMessage = false,
+                Routing = "round_robin",
+                MinimumGrade = 0,
+            },
+            Permissions = {
+                WorkQueue = 0,
+                Availability = 1,
+                Assign = 2,
+                Profile = 3,
+                Hours = 3,
+                Services = 3,
+                Announcement = 3,
+            },
+            Services = {},
+        },
+        ambulance = {
+            Job = "ambulance",
+            Name = "Emergency Medical Services",
+            Category = "public_services",
+            Public = true,
+            Emergency = true,
+            Verified = true,
+            Icon = "medical",
+            Description = "Emergency medical response and patient care.",
+            DefaultAvailability = "closed",
+            AcceptsRequests = false,
+            District = "Pillbox Hill",
+            LocationLabel = "Pillbox Hill Medical Center",
+            Address = "Pillbox Hill Medical Center",
+            Location = vector3(307.2, -595.3, 43.3),
+            ServiceLine = {
+                Number = "9120000000",
+                AutoContact = true,
+                CanCall = true,
+                CanMessage = false,
+                Routing = "round_robin",
+                MinimumGrade = 0,
+            },
+            Permissions = {
+                WorkQueue = 0,
+                Availability = 1,
+                Assign = 2,
+                Profile = 3,
+                Hours = 3,
+                Services = 3,
+                Announcement = 3,
+            },
+            Services = {},
+        },
+        fire = {
+            Job = "fire",
+            Name = "Los Santos Fire Department",
+            Category = "public_services",
+            Public = true,
+            Emergency = true,
+            Verified = true,
+            Icon = "flame",
+            Description = "Fire response, rescue, and public safety services.",
+            DefaultAvailability = "closed",
+            AcceptsRequests = false,
+            District = "El Burro Heights",
+            LocationLabel = "Capital Boulevard Fire Station",
+            Address = "Capital Boulevard Fire Station",
+            Location = vector3(1200.6, -1473.6, 34.9),
+            ServiceLine = {
+                Number = "9130000000",
+                AutoContact = true,
+                CanCall = true,
+                CanMessage = false,
+                Routing = "round_robin",
+                MinimumGrade = 0,
+            },
+            Permissions = {
+                WorkQueue = 0,
+                Availability = 1,
+                Assign = 2,
+                Profile = 3,
+                Hours = 3,
+                Services = 3,
+                Announcement = 3,
+            },
+            Services = {},
+        },
+        mechanic = {
+            Job = "mechanic",
+            Name = "Los Santos Customs",
+            Category = "vehicles",
+            Public = true,
+            Emergency = false,
+            Verified = true,
+            Icon = "wrench",
+            Description = "Vehicle diagnostics, repairs, and roadside assistance.",
+            DefaultAvailability = "closed",
+            AcceptsRequests = true,
+            District = "Burton",
+            LocationLabel = "Los Santos Customs",
+            Address = "Carcer Way",
+            Location = vector3(-337.3, -136.9, 39.0),
+            ServiceLine = {
+                Number = "5550101000",
+                AutoContact = true,
+                CanCall = true,
+                CanMessage = false,
+                Routing = "round_robin",
+                MinimumGrade = 0,
+            },
+            Permissions = {
+                WorkQueue = 0,
+                Availability = 1,
+                Assign = 2,
+                Profile = 3,
+                Hours = 3,
+                Services = 3,
+                Announcement = 3,
+            },
+            Services = {
+                {
+                    Id = "mechanic-repair",
+                    Title = "Vehicle repair",
+                    Description = "Diagnostics and repairs for road vehicles.",
+                    Price = "Price after inspection",
+                    RequestsEnabled = true,
+                },
+                {
+                    Id = "mechanic-towing",
+                    Title = "Roadside assistance",
+                    Description = "Assistance for disabled vehicles.",
+                    Price = "Price by distance",
+                    RequestsEnabled = true,
+                },
+            },
+        },
+        taxi = {
+            Job = "taxi",
+            Name = "Downtown Cab Co.",
+            Category = "transport",
+            Public = true,
+            Emergency = false,
+            Verified = true,
+            Icon = "car",
+            Description = "Staffed taxi rides throughout Los Santos and Blaine County.",
+            DefaultAvailability = "closed",
+            AcceptsRequests = true,
+            District = "East Vinewood",
+            LocationLabel = "Downtown Cab Co.",
+            Address = "Tangerine Street",
+            Location = vector3(895.0, -179.2, 74.7),
+            ServiceLine = {
+                Number = "5550102000",
+                AutoContact = true,
+                CanCall = true,
+                CanMessage = false,
+                Routing = "round_robin",
+                MinimumGrade = 0,
+            },
+            Permissions = {
+                WorkQueue = 0,
+                Availability = 1,
+                Assign = 2,
+                Profile = 3,
+                Hours = 3,
+                Services = 3,
+                Announcement = 3,
+            },
+            Services = {
+                {
+                    Id = "taxi-ride",
+                    Title = "Taxi ride",
+                    Description = "Request a staffed taxi service.",
+                    Price = "Metered fare",
+                    RequestsEnabled = true,
+                },
+            },
+        },
+    },
+}
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index ae209d4..da4d58e 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -19,6 +19,23 @@ Config.Phone = {
     DeviceName = "iFruit Phone",
 }
 
+Config.CustomApps = {
+    Enabled = true,
+    BundledApps = true,
+    ExternalApps = true,
+    ReadyTimeoutMs = 8000,
+    MaximumMessageBytes = 65536,
+    MaximumStorageBytesPerApp = 262144,
+    MaximumStorageValueBytes = 65536, -- Bridge v1 ceiling; lower values tighten the server policy.
+    MaximumStorageKeyLength = 64, -- Bridge v1 ceiling; lower values tighten the server policy.
+    MaximumStorageKeysPerApp = 128,
+    StorageRequestsPerMinute = 120,
+    AllowRemoteOrigins = {
+        -- ["https://apps.example.com"] = true,
+    },
+    TrustedAdapters = {},
+}
+
 Config.Security = {
     PasscodePepperConvar = "sky_phone_passcode_pepper",
     MaximumAttempts = 5,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 0efd21e..b0c9912 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -76,7 +76,7 @@ Locales["en"] = {
             open = "Open Control Center", play = "Play", previous = "Previous track", quickActions = "Quick actions",
             timer = "Timer", unmuteRingtone = "Unmute ringtone and notifications", volume = "Volume", wifi = "Wi-Fi",
         },
-        Notifications = { clearAll = "Clear All", now = "now" },
+        Notifications = { clearAll = "Clear All", now = "now", open = "Open notification" },
         LockScreen = {
             label = "Lock Screen", flashlight = "Flashlight", camera = "Camera", swipeUp = "Swipe up to open",
             passcode = {
@@ -114,6 +114,12 @@ Locales["en"] = {
             },
         },
         Apps = {
+            customApps = {
+                loading = "Opening app...",
+                unavailableTitle = "App unavailable",
+                unavailableBody = "This custom app could not be loaded. Check that its resource is started, then reopen the app.",
+                close = "Close app",
+            },
             crewlink = {
                 name = "CrewLink", connecting = "Connecting your crew...", privateNetwork = "Private location network",
                 signInTitle = "Connect your iFruit Account", signInBody = "CrewLink uses your private iFruit identity to keep groups and roles available across your phones.", openSettings = "Open iFruit Settings",
@@ -343,6 +349,7 @@ Locales["en"] = {
             messages = {
                 name = "Messages", newMessage = "New message from {sender}", compose = "New Message",
                 search = "Search", to = "To:", message = "Message", send = "Send", details = "Details",
+                officialContact = "Official company contact", messagingUnavailable = "This company contact does not accept messages.",
                 filterUnread = "Show Unread Messages", smsLabel = "Text Message · SMS",
                 photo = "Photo", gif = "GIF", video = "Video", attachPhoto = "Attach Photo", takePhoto = "Take Photo",
                 attachGif = "Attach GIF", attachVideo = "Attach Video", photos = "Photos", gifs = "GIFs", videos = "Videos",
@@ -369,15 +376,318 @@ Locales["en"] = {
                     recording_in_progress = "A video is already being recorded.", recording_not_found = "No active video recording was found.",
                     gif_provider_unconfigured = "GIF search is not configured.", gif_provider_failed = "GIF search is temporarily unavailable.",
                     self_message = "You cannot message your own number.", recipient_not_found = "That number is unavailable.",
+                    messaging_unavailable = "This company contact does not accept messages.",
                     no_sim = "This phone has no SIM card.", rate_limited = "Too many messages. Try again in a minute.",
                     request_failed = "Messages are temporarily unavailable.", default = "The message could not be sent.",
                 },
             },
+            companies = {
+                name = "Companies",
+                navigation = "Companies navigation",
+                actions = "Request actions",
+                request = "Service Request",
+                verified = "Verified company",
+                back = "Back",
+                close = "Close",
+                tryAgain = "Try Again",
+                loadMore = "Load More",
+                routeSet = "GPS route set.",
+                tabs = {
+                    directory = "Discover",
+                    requests = "Requests",
+                    work = "Work",
+                },
+                availability = {
+                    available = "Available",
+                    busy = "Busy",
+                    closed = "Closed",
+                },
+                requestStatuses = {
+                    new = "New",
+                    assigned = "Assigned",
+                    in_progress = "In Progress",
+                    waiting_customer = "Waiting",
+                    completed = "Completed",
+                    cancelled = "Cancelled",
+                },
+                roles = {
+                    employee = "Employee",
+                    manager = "Manager",
+                },
+                categories = {
+                    gastronomy = "Food & Drink",
+                    vehicles = "Vehicles",
+                    transport = "Transport",
+                    crafts = "Trades",
+                    retail = "Retail",
+                    real_estate = "Real Estate",
+                    media = "Media",
+                    nightlife = "Nightlife",
+                    public_services = "Public Services",
+                    emergency = "Emergency Services",
+                    medical = "Medical",
+                    mechanics = "Mechanics",
+                    government = "Government",
+                },
+                days = {
+                    monday = "Monday",
+                    tuesday = "Tuesday",
+                    wednesday = "Wednesday",
+                    thursday = "Thursday",
+                    friday = "Friday",
+                    saturday = "Saturday",
+                    sunday = "Sunday",
+                },
+                directory = {
+                    searchPlaceholder = "Search companies or services",
+                    categories = "Company categories",
+                    allCategories = "All",
+                    allCompanies = "All Companies",
+                    availableNow = "Available now",
+                    availableNowHint = "Only show companies taking calls right now.",
+                    availableSection = "Available Now",
+                    moreFilters = "More filters",
+                    hasLocation = "Location",
+                    acceptsRequests = "Requests",
+                    resetFilters = "Reset Filters",
+                },
+                loading = {
+                    directory = "Loading companies...",
+                    profile = "Loading company profile...",
+                    request = "Loading request...",
+                    requests = "Loading your requests...",
+                    work = "Loading workspace...",
+                },
+                states = {
+                    directoryError = "Companies are unavailable",
+                    requestsError = "Requests are unavailable",
+                    workError = "Workspace unavailable",
+                    profileError = "Company unavailable",
+                    requestError = "Request unavailable",
+                    noCompanies = "No companies listed",
+                    noCompaniesBody = "Public companies will appear here when configured.",
+                    noResults = "No matching companies",
+                    noResultsBody = "Try another search or reset your filters.",
+                    noOpenRequests = "No open requests",
+                    noClosedRequests = "No completed requests",
+                    noRequestsBody = "Requests you create with a company will appear here.",
+                },
+                actionUnavailable = {
+                    call = "This company cannot be called right now.",
+                    message = "This service line does not accept text messages.",
+                    route = "This company has no public location.",
+                    request = "This company is not accepting service requests.",
+                },
+                profile = {
+                    updated = "Status updated {time}",
+                    announcement = "Latest Update",
+                    location = "Location",
+                    noLocation = "No public location",
+                    hours = "Opening Hours",
+                    closed = "Closed",
+                    byAvailability = "Open by availability",
+                    services = "Services",
+                    noServices = "No public services listed",
+                    call = "Call",
+                    message = "Message",
+                    route = "Route",
+                    request = "Request",
+                },
+                composer = {
+                    title = "New Service Request",
+                    chooseService = "Choose a Service",
+                    subject = "Subject",
+                    subjectPlaceholder = "What do you need?",
+                    description = "Details",
+                    descriptionPlaceholder = "Describe what happened and how the company can help.",
+                    contact = "Contact number",
+                    registeredSim = "Replies go to your registered SIM {number}.",
+                    registeredSimRequired = "A registered SIM is required to send a request.",
+                    addPhotos = "Add Photos ({count}/3)",
+                    selectedPhoto = "Selected request photo",
+                    removePhoto = "Remove photo",
+                    review = "Review Request",
+                    confirmTitle = "Send this request?",
+                    confirmBody = "Send your {service} request to {company}.",
+                    edit = "Keep Editing",
+                    send = "Send Request",
+                },
+                requests = {
+                    open = "Open",
+                    closed = "Completed",
+                    findCompany = "Find a Company",
+                    generalService = "General service",
+                    attachments = "Request photos",
+                    attachedPhoto = "Attached request photo",
+                    timeline = "Timeline",
+                    conversation = "Conversation",
+                    noMessages = "No replies yet",
+                    replyPlaceholder = "Write a reply",
+                    sendReply = "Send reply",
+                    call = "Call Company",
+                    cancel = "Cancel Request",
+                    cancelTitle = "Cancel this request?",
+                    cancelBody = "The company will be notified and can no longer complete it.",
+                    keep = "Keep Request",
+                    cancelConfirm = "Cancel Request",
+                },
+                timeline = {
+                    created = "Request created",
+                    assigned = "Request assigned",
+                    cancelled = "Request cancelled",
+                    completed = "Request completed",
+                    statusChanged = "Status changed to {status}",
+                },
+                time = {
+                    justNow = "just now",
+                    minutesAgo = "{count} min ago",
+                    hoursAgo = "{count} hr ago",
+                    daysAgo = "{count} days ago",
+                },
+                work = {
+                    notAuthorized = "No company workspace",
+                    notAuthorizedBody = "Your current job is not connected to a configured company.",
+                    workspace = "Company Workspace",
+                    publicAvailability = "Public Availability",
+                    takeCalls = "Take company calls",
+                    takeCallsBody = "Route new service-line calls to this active SIM.",
+                    overview = "Today at a Glance",
+                    metrics = {
+                        new = "New",
+                        assigned = "Mine",
+                        waiting = "Waiting",
+                        completedToday = "Done Today",
+                    },
+                    queue = "Request Queue",
+                    filters = {
+                        new = "New",
+                        assigned = "Mine",
+                        in_progress = "In Progress",
+                        waiting_customer = "Waiting",
+                        completed = "Done",
+                    },
+                    unassigned = "Unassigned",
+                    emptyQueue = "Queue is clear",
+                    emptyQueueBody = "No requests match this filter.",
+                },
+                workActions = {
+                    claim = "Claim Request",
+                    assign = "Assign Employee",
+                    callCustomer = "Call Customer",
+                    setStatus = "Set status: {status}",
+                },
+                assignment = {
+                    title = "Assign Employee",
+                    online = "Online",
+                    offline = "Offline",
+                    unknownMember = "Unknown employee",
+                    confirm = "Assign Request",
+                },
+                assignmentLabels = {
+                    you = "Assigned to you",
+                    assigned = "Assigned to a colleague",
+                },
+                messageAuthors = {
+                    you = "You",
+                    customer = "Customer",
+                    company = "Company",
+                },
+                manager = {
+                    title = "Company Profile",
+                    subtitle = "Manage public information, services, and announcements.",
+                    revision = "Server revision {revision}",
+                    availability = "Availability",
+                    profile = "Public Profile",
+                    description = "Description",
+                    descriptionPlaceholder = "Describe the company and what it offers.",
+                    phoneNumber = "Service number",
+                    phoneNumberManaged = "Configured by the server and cannot be edited here.",
+                    noPhoneNumber = "No service number configured",
+                    chooseCover = "Choose cover photo",
+                    chooseLogo = "Choose logo",
+                    coverPhoto = "Company cover photo",
+                    logoPhoto = "Company logo",
+                    locationLabel = "Location name",
+                    locationReady = "A map position is attached to this profile.",
+                    useCurrentLocation = "Use Current Location",
+                    address = "Address",
+                    district = "District",
+                    acceptRequests = "Accept service requests",
+                    acceptRequestsBody = "Allow registered SIMs to open structured requests.",
+                    saveProfile = "Save Profile",
+                    hours = "Opening Hours",
+                    dayOpen = "Company is open on this day",
+                    opensAt = "Opens",
+                    closesAt = "Closes",
+                    saveHours = "Save Hours",
+                    services = "Services",
+                    serviceTitle = "Service name",
+                    serviceDescription = "Description",
+                    priceText = "Price text",
+                    serviceActive = "Publicly visible",
+                    serviceRequests = "Accept requests for this service",
+                    removeService = "Remove Service",
+                    addService = "Add Service",
+                    saveServices = "Save Services",
+                    announcement = "Current Announcement",
+                    announcementText = "Announcement",
+                    announcementPlaceholder = "Share a short, timely update.",
+                    expiresAt = "Expires at",
+                    publish = "Publish Announcement",
+                },
+                feedback = {
+                    requestCreated = "Request sent.",
+                    requestCancelled = "Request cancelled.",
+                    requestClaimed = "Request claimed.",
+                    requestAssigned = "Request assigned.",
+                    statusUpdated = "Request status updated.",
+                    availabilityUpdated = "Public availability updated.",
+                    locationUpdated = "Current location selected.",
+                    callsEnabled = "Company calls enabled.",
+                    callsDisabled = "Company calls disabled.",
+                    profileSaved = "Company profile saved.",
+                    hoursSaved = "Opening hours saved.",
+                    servicesSaved = "Services saved.",
+                    announcementPublished = "Announcement published.",
+                },
+                conflict = {
+                    title = "Newer changes are available",
+                    body = "Another manager updated this information. Reload before saving again.",
+                    reload = "Reload",
+                },
+                notifications = {
+                    newRequest = "New company request",
+                    requestUpdated = "A company request was updated.",
+                    newMessage = "New reply to your company request.",
+                    assigned = "A company request was assigned to you.",
+                },
+                errors = {
+                    anonymous_sim = "A registered SIM is required for service requests.",
+                    call_unavailable = "This service line is currently unavailable.",
+                    company_not_found = "This company is no longer available.",
+                    invalid_profile = "Check the company profile fields.",
+                    invalid_request = "Check the subject and request details.",
+                    invalid_media = "One or more attached photos are unavailable.",
+                    invalid_expiration = "Choose a valid announcement expiration.",
+                    invalid_service = "This service is no longer available.",
+                    invalid_status = "That status change is not allowed.",
+                    messaging_unavailable = "This company does not accept text messages.",
+                    no_sim = "Insert a SIM card to continue.",
+                    not_authorized = "You are not authorized for this company action.",
+                    rate_limited = "Please wait before trying again.",
+                    request_not_found = "This request is no longer available.",
+                    revision_conflict = "The data changed on another device. Reload and try again.",
+                    service_unavailable = "The Companies service is temporarily unavailable.",
+                    too_many_open_requests = "You already have too many open requests.",
+                    request_failed = "Companies could not complete the request.",
+                },
+            },
             phone = {
                 name = "Phone", recents = "Recents", contacts = "Contacts", keypad = "Keypad",
                 noSim = "No SIM", noSimBody = "Insert a SIM card in Settings to make calls.",
                 noRecents = "No Recent Calls", noContacts = "No Contacts", searchContacts = "Search Contacts",
                 addContact = "New Contact", editContact = "Edit Contact", contactName = "Name", phoneNumber = "Phone Number",
+                officialContact = "Official company contact",
                 call = "Call", calling = "calling...", incoming = "Incoming Call", incomingDirection = "Incoming", outgoingDirection = "Outgoing", connected = "Connected",
                 missed = "Missed", declined = "Declined", busy = "Busy", unavailable = "Unavailable",
                 noAnswer = "No Answer", cancelled = "Cancelled", disconnected = "Disconnected", sim_removed = "SIM Removed", completed = "Call Ended",
@@ -387,8 +697,11 @@ Locales["en"] = {
                 choosePhoneBody = "Select the phone that should receive {number}.", emptyPhone = "No SIM inserted",
                 errors = {
                     invalid_contact = "Enter a name and valid phone number.", invalid_number = "Enter a valid phone number.",
+                    invalid_sim = "The active SIM card is unavailable.",
                     no_sim = "This phone has no SIM card.", airplane_mode = "Turn off Airplane Mode to make calls.",
                     self_call = "You cannot call your own number.", busy = "The line is busy.",
+                    company_unavailable = "This company service line is unavailable.",
+                    readonly_contact = "Official company contacts cannot be changed.",
                     rate_limited = "Too many calls. Try again in a minute.", voice_unavailable = "The configured phone voice service is unavailable.",
                     inventory_full = "There is no room for the ejected SIM card.", request_failed = "The phone request failed.",
                     operation_in_progress = "Another phone operation is already in progress.", sim_request_expired = "The SIM selection expired. Use the SIM card again.",
diff --git a/sky_phone/custom_apps/_sdk/default-icon.svg b/sky_phone/custom_apps/_sdk/default-icon.svg
new file mode 100644
index 0000000..751a276
--- /dev/null
+++ b/sky_phone/custom_apps/_sdk/default-icon.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Custom app">
+  <defs>
+    <linearGradient id="background" x1="18" y1="14" x2="110" y2="116" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#57c7ff"/>
+      <stop offset="1" stop-color="#3152d4"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="29" fill="url(#background)"/>
+  <rect x="31" y="31" width="28" height="28" rx="8" fill="#fff" fill-opacity=".96"/>
+  <rect x="69" y="31" width="28" height="28" rx="8" fill="#fff" fill-opacity=".8"/>
+  <rect x="31" y="69" width="28" height="28" rx="8" fill="#fff" fill-opacity=".8"/>
+  <path d="M83 68v30M68 83h30" stroke="#fff" stroke-width="9" stroke-linecap="round"/>
+</svg>
diff --git a/sky_phone/custom_apps/_sdk/sky-phone-app.d.ts b/sky_phone/custom_apps/_sdk/sky-phone-app.d.ts
new file mode 100644
index 0000000..48c6b8d
--- /dev/null
+++ b/sky_phone/custom_apps/_sdk/sky-phone-app.d.ts
@@ -0,0 +1,74 @@
+export type SkyPhoneAppContext = {
+  appId: string
+  capabilities: string[]
+  colorScheme: 'dark' | 'light'
+  language: string
+  locale: Record<string, unknown>
+  phoneScale: number
+  protocolVersion: 1
+  safeArea: {
+    bottom: number
+    left: number
+    right: number
+    top: number
+  }
+}
+
+export type SkyPhoneAppEvents = {
+  context: SkyPhoneAppContext | null
+  message: unknown
+  open: unknown
+}
+
+export type SkyPhoneAppNotification = {
+  sound?: 'chime' | 'signal' | 'soft'
+  subtitle?: string
+  text: string
+  title: string
+}
+
+export type SkyPhoneAppStorageEntry<Value = unknown> = {
+  exists: boolean
+  revision: number
+  value?: Value
+}
+
+export type SkyPhoneAppStorageWrite = {
+  revision: number
+}
+
+export type SkyPhoneAppApi = {
+  readonly appId: string
+  readonly protocolVersion: 1
+  close(): Promise<void>
+  getContext(): SkyPhoneAppContext | null
+  notify(
+    notification: SkyPhoneAppNotification,
+  ): Promise<{ notificationId: string | null }>
+  on<EventName extends keyof SkyPhoneAppEvents>(
+    eventName: EventName,
+    listener: (payload: SkyPhoneAppEvents[EventName]) => void,
+  ): () => void
+  open(
+    appId: string,
+    data?: Record<string, unknown>,
+  ): Promise<{ appId: string }>
+  ready(): boolean
+  request<Result = unknown>(method: string, payload?: unknown): Promise<Result>
+  storage: {
+    get<Value = unknown>(key: string): Promise<SkyPhoneAppStorageEntry<Value>>
+    set(
+      key: string,
+      value: unknown,
+      revision: number,
+    ): Promise<SkyPhoneAppStorageWrite>
+  }
+}
+
+declare global {
+  interface Window {
+    SkyPhoneApp: SkyPhoneAppApi
+  }
+}
+
+export {}
diff --git a/sky_phone/custom_apps/_sdk/sky-phone-app.js b/sky_phone/custom_apps/_sdk/sky-phone-app.js
new file mode 100644
index 0000000..4688c59
--- /dev/null
+++ b/sky_phone/custom_apps/_sdk/sky-phone-app.js
@@ -0,0 +1,211 @@
+(function bootstrapSkyPhoneApp() {
+  'use strict'
+
+  const protocolVersion = 1
+  const requestTimeoutMs = 8000
+  const query = new URLSearchParams(window.location.search)
+  const appId =
+    query.get('skyPhoneAppId') ||
+    document.documentElement.dataset.skyPhoneAppId ||
+    document.currentScript?.dataset.appId ||
+    ''
+  const listeners = new Map()
+  const pendingRequests = new Map()
+  let context = null
+  let nextRequestId = 1
+  let readySent = false
+
+  function emit(eventName, payload) {
+    const eventListeners = listeners.get(eventName)
+    if (eventListeners) {
+      for (const listener of [...eventListeners]) listener(payload)
+    }
+    window.dispatchEvent(
+      new CustomEvent(`sky-phone-app:${eventName}`, { detail: payload }),
+    )
+  }
+
+  function send(message) {
+    if (!appId) {
+      console.error('[Sky Phone App] Missing skyPhoneAppId in the frame URL.')
+      return false
+    }
+
+    window.parent.postMessage(
+      {
+        ...message,
+        appId,
+        protocolVersion,
+      },
+      '*',
+    )
+    return true
+  }
+
+  function ready() {
+    if (readySent) return true
+    readySent = send({ type: 'sky-phone-app:ready' })
+    return readySent
+  }
+
+  function on(eventName, listener) {
+    if (typeof eventName !== 'string' || typeof listener !== 'function') {
+      throw new TypeError('SkyPhoneApp.on requires an event name and a function.')
+    }
+
+    const eventListeners = listeners.get(eventName) || new Set()
+    eventListeners.add(listener)
+    listeners.set(eventName, eventListeners)
+    return function unsubscribe() {
+      eventListeners.delete(listener)
+      if (eventListeners.size === 0) listeners.delete(eventName)
+    }
+  }
+
+  function request(method, payload) {
+    if (typeof method !== 'string' || !method) {
+      return Promise.reject(new TypeError('A bridge method is required.'))
+    }
+
+    const requestId = `${Date.now().toString(36)}-${nextRequestId++}`
+    return new Promise((resolve, reject) => {
+      const timeout = window.setTimeout(() => {
+        pendingRequests.delete(requestId)
+        reject(new Error(`Sky Phone request timed out: ${method}`))
+      }, requestTimeoutMs)
+
+      pendingRequests.set(requestId, { reject, resolve, timeout })
+      if (
+        !send({
+          type: 'sky-phone-app:request',
+          method,
+          payload,
+          requestId,
+        })
+      ) {
+        window.clearTimeout(timeout)
+        pendingRequests.delete(requestId)
+        reject(new Error('Sky Phone bridge is unavailable.'))
+      }
+    })
+  }
+
+  function close() {
+    return request('app.close')
+  }
+
+  function open(targetAppId, data) {
+    if (typeof targetAppId !== 'string' || !targetAppId) {
+      return Promise.reject(new TypeError('A target app ID is required.'))
+    }
+
+    return request('app.open', {
+      appId: targetAppId,
+      ...(data === undefined ? {} : { data }),
+    })
+  }
+
+  function notify(notification) {
+    if (!notification || typeof notification !== 'object') {
+      return Promise.reject(new TypeError('A notification is required.'))
+    }
+
+    return request('notification.create', notification)
+  }
+
+  const storage = Object.freeze({
+    get(key) {
+      return request('device.storage.get', { key })
+    },
+    set(key, value, revision) {
+      return request('device.storage.set', { key, revision, value })
+    },
+  })
+
+  function applyContext(nextContext) {
+    if (!nextContext || typeof nextContext !== 'object') return
+
+    const root = document.documentElement
+    if (
+      nextContext.colorScheme === 'dark' ||
+      nextContext.colorScheme === 'light'
+    ) {
+      root.dataset.theme = nextContext.colorScheme
+      root.style.colorScheme = nextContext.colorScheme
+    }
+    if (typeof nextContext.language === 'string' && nextContext.language) {
+      root.lang = nextContext.language
+    }
+    if (typeof nextContext.phoneScale === 'number') {
+      root.style.setProperty('--sky-phone-scale', String(nextContext.phoneScale))
+    }
+    if (nextContext.safeArea && typeof nextContext.safeArea === 'object') {
+      for (const edge of ['top', 'right', 'bottom', 'left']) {
+        const value = nextContext.safeArea[edge]
+        if (typeof value === 'number') {
+          root.style.setProperty(`--sky-safe-area-${edge}`, `${value}px`)
+        }
+      }
+    }
+  }
+
+  window.addEventListener('message', (event) => {
+    if (event.source !== window.parent) return
+    const message = event.data
+    if (
+      !message ||
+      typeof message !== 'object' ||
+      message.appId !== appId ||
+      message.protocolVersion !== protocolVersion
+    ) {
+      return
+    }
+
+    if (message.type === 'sky-phone-app:context') {
+      context = message.context || null
+      applyContext(context)
+      emit('context', context)
+    } else if (message.type === 'sky-phone-app:message') {
+      emit('message', message.payload)
+    } else if (message.type === 'sky-phone-app:open') {
+      emit('open', message.data)
+    } else if (message.type === 'sky-phone-app:response') {
+      const pending = pendingRequests.get(message.requestId)
+      if (!pending) return
+      window.clearTimeout(pending.timeout)
+      pendingRequests.delete(message.requestId)
+      if (message.success) pending.resolve(message.data)
+      else pending.reject(new Error(message.error || 'Sky Phone request failed.'))
+    }
+  })
+
+  const api = Object.freeze({
+    appId,
+    close,
+    getContext: () => context,
+    notify,
+    on,
+    open,
+    protocolVersion,
+    ready,
+    request,
+    storage,
+  })
+
+  if (window.SkyPhoneApp) {
+    console.error('[Sky Phone App] window.SkyPhoneApp is already defined.')
+    return
+  }
+  Object.defineProperty(window, 'SkyPhoneApp', {
+    configurable: false,
+    enumerable: true,
+    value: api,
+    writable: false,
+  })
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ready, { once: true })
+  } else {
+    ready()
+  }
+})()
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index b8ed4ca..9d0db07 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -7,8 +7,15 @@ author 'Sky-Systems'
 description 'Sky Phone'
 version '0.1.0'
 
+provide 'lb-phone'
+provide '17mov_Phone'
+provide 'high-phone'
+provide 'qs-smartphone'
+provide 'yseries'
+
 escrow_ignore {
     'config/**',
+    'custom_apps/**',
     'source/bridge/**',
 }
 
@@ -17,6 +24,9 @@ shared_scripts {
     'source/bridge/shared.lua',
     'source/shared/imei.lua',
     'source/shared/sim_number.lua',
+    'source/shared/custom_apps.lua',
+    'source/shared/custom_app_compat.lua',
+    'custom_apps/**/manifest.lua',
 }
 
 client_scripts {
@@ -34,6 +44,9 @@ client_scripts {
     'source/client/crewlink.lua',
     'source/bridge/client/radio.lua',
     'source/client/payphones.lua',
+    'source/client/custom_apps.lua',
+    'source/client/custom_app_compat.lua',
+    'custom_apps/**/client.lua',
     'source/client/main.lua',
     'source/client/radio.lua',
 }
@@ -41,6 +54,7 @@ client_scripts {
 server_scripts {
     '@oxmysql/lib/MySQL.lua',
     'config/config.lua',
+    'config/companies.lua',
     'config/media.lua',
     'config/music.lua',
     'config/locales/*.lua',
@@ -53,8 +67,12 @@ server_scripts {
     'source/bridge/server/housing/*.lua',
     'source/bridge/server/inventory.lua',
     'source/bridge/server/inventory/*.lua',
+    'source/server/custom_apps.lua',
+    'source/server/custom_app_compat.lua',
     'source/server/db_migrate.lua',
     'source/server/phone.lua',
+    'source/server/companies.lua',
+    'source/server/custom_app_storage.lua',
     'source/server/sim.lua',
     'source/server/calls.lua',
     'source/server/media.lua',
@@ -78,6 +96,7 @@ server_scripts {
     'source/server/calendar.lua',
     'source/server/music.lua',
     'source/server/radio.lua',
+    'custom_apps/**/server.lua',
 }
 
 files {
@@ -85,6 +104,8 @@ files {
     'source/html/assets/**',
     'source/html/img/**',
     'config/music/**',
+    'custom_apps/**/web/**',
+    'custom_apps/_sdk/**',
 }
 
 ui_page 'source/html/index.html'
diff --git a/sky_phone/source/client/custom_app_compat.lua b/sky_phone/source/client/custom_app_compat.lua
new file mode 100644
index 0000000..b2a4ad8
--- /dev/null
+++ b/sky_phone/source/client/custom_app_compat.lua
@@ -0,0 +1,581 @@
+local RESOURCE_NAME = GetCurrentResourceName()
+local providers = SkyPhoneCompatibility.Providers
+local core = SkyPhoneApps.CompatibilityCore
+local provider_apps = {}
+local high_client_apps = {}
+local high_server_apps = {}
+
+local function get_calling_resource(export_name)
+    local owner_resource = GetInvokingResource()
+    if owner_resource then
+        return owner_resource
+    end
+
+    print(("[%s] %s rejected: the export must be called by another resource."):format(
+        RESOURCE_NAME,
+        export_name
+    ))
+    return nil, "invalid_owner"
+end
+
+local function copy_record_data(value)
+    if type(value) ~= "table" then
+        return nil
+    end
+
+    local copied = {}
+    for key, nested_value in pairs(value) do
+        copied[key] = nested_value
+    end
+    return copied
+end
+
+local function register_provider_app(provider, owner_resource, definition, vendor_data, update_existing)
+    local app_id = definition.id
+    local existing = provider_apps[app_id]
+    if existing and (existing.owner_resource ~= owner_resource or existing.provider ~= provider) then
+        return false, "duplicate_app_id"
+    end
+
+    local success, error_message
+    if existing and update_existing then
+        success, error_message = core.Update(owner_resource, definition)
+    else
+        success, error_message = core.Add(owner_resource, definition)
+    end
+    if success then
+        provider_apps[app_id] = {
+            definition = definition,
+            owner_resource = owner_resource,
+            provider = provider,
+            vendor_data = vendor_data,
+        }
+    end
+    return success, error_message
+end
+
+local function get_provider_app(owner_resource, app_id, allowed_providers)
+    if type(app_id) ~= "string" then
+        return nil, "invalid_app_id"
+    end
+
+    local record = provider_apps[app_id]
+    if not record then
+        return nil, "app_not_found"
+    end
+    if record.owner_resource ~= owner_resource then
+        return nil, "app_owner_mismatch"
+    end
+    if allowed_providers and not allowed_providers[record.provider] then
+        return nil, "app_provider_mismatch"
+    end
+    return record
+end
+
+local function remove_provider_app(owner_resource, app_id, allowed_providers)
+    local record, record_error = get_provider_app(owner_resource, app_id, allowed_providers)
+    if not record then
+        return false, record_error
+    end
+
+    return core.Remove(owner_resource, app_id)
+end
+
+function SkyPhoneApps.RegisterCompatibilityExport(owner_resource, app_data)
+    local provider
+    local definition
+    local definition_error
+    if app_data.identifier ~= nil then
+        provider = providers.lb
+        definition, definition_error = SkyPhoneCompatibility.BuildLbDefinition(owner_resource, app_data)
+    elseif app_data.key ~= nil then
+        provider = providers.yseries
+        definition, definition_error = SkyPhoneCompatibility.BuildYSeriesDefinition(app_data)
+    else
+        return false, "unknown_app_provider"
+    end
+
+    if not definition then
+        print(("[%s] %s registration rejected for %s: %s."):format(
+            RESOURCE_NAME,
+            provider,
+            owner_resource,
+            definition_error
+        ))
+        return false, definition_error
+    end
+    return register_provider_app(provider, owner_resource, definition, copy_record_data(app_data), false)
+end
+
+SkyPhoneApps.OnCompatibilityAppRemoved = function(owner_resource, app_id)
+    local record = provider_apps[app_id]
+    if record and record.owner_resource == owner_resource then
+        provider_apps[app_id] = nil
+    end
+end
+
+local function add_17mov_application(app_data)
+    local owner_resource, owner_error = get_calling_resource("AddApplication")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local definition, definition_error = SkyPhoneCompatibility.Build17MovDefinition(app_data)
+    if not definition then
+        print(("[%s] 17mov registration rejected for %s: %s."):format(
+            RESOURCE_NAME,
+            owner_resource,
+            definition_error
+        ))
+        return false, definition_error
+    end
+    return register_provider_app(
+        providers.seventeen,
+        owner_resource,
+        definition,
+        copy_record_data(app_data),
+        false
+    )
+end
+
+local function remove_17mov_application(app_name, _resource_name)
+    local owner_resource, owner_error = get_calling_resource("RemoveApplication")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local app_id = type(app_name) == "table" and app_name.name or app_name
+    return remove_provider_app(owner_resource, app_id, {
+        [providers.seventeen] = true,
+    })
+end
+
+local function send_app_message(app_id, data)
+    local owner_resource, owner_error = get_calling_resource("SendAppMessage")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local record, record_error = get_provider_app(owner_resource, app_id, {
+        [providers.seventeen] = true,
+        [providers.yseries] = true,
+    })
+    if not record then
+        return false, record_error
+    end
+    return core.SendMessage(owner_resource, app_id, data)
+end
+
+local function add_high_application(app_name, data, locales)
+    local owner_resource, owner_error = get_calling_resource("addApplication")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local definition, definition_error = SkyPhoneCompatibility.BuildHighDefinition(
+        owner_resource,
+        app_name,
+        data,
+        locales
+    )
+    if not definition then
+        print(("[%s] High Phone registration rejected for %s: %s."):format(
+            RESOURCE_NAME,
+            owner_resource,
+            definition_error
+        ))
+        return false, definition_error
+    end
+
+    high_client_apps[app_name] = {
+        definition = definition,
+        owner_resource = owner_resource,
+    }
+    local server_record = high_server_apps[app_name]
+    if server_record then
+        if server_record.owner_resource ~= owner_resource then
+            return false, "duplicate_app_id"
+        end
+        if server_record.registered then
+            return true
+        end
+        return false, "server_definition_not_registered"
+    end
+
+    return register_provider_app(
+        providers.high,
+        owner_resource,
+        definition,
+        copy_record_data(data),
+        provider_apps[app_name] ~= nil
+    )
+end
+
+local function send_high_app_nui(app_name, data)
+    local owner_resource, owner_error = get_calling_resource("sendAppNui")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local record, record_error = get_provider_app(owner_resource, app_name, {
+        [providers.high] = true,
+    })
+    if not record then
+        return false, record_error
+    end
+    return core.SendMessage(owner_resource, app_name, data)
+end
+
+local function add_quasar_app_for_owner(owner_resource, app_data)
+    local definition, definition_error = SkyPhoneCompatibility.BuildQuasarDefinition(app_data)
+    if not definition then
+        print(("[%s] Quasar registration rejected for %s: %s."):format(
+            RESOURCE_NAME,
+            owner_resource,
+            definition_error
+        ))
+        return false, definition_error
+    end
+
+    return register_provider_app(
+        providers.quasar,
+        owner_resource,
+        definition,
+        SkyPhoneCompatibility.CopyQuasarData(app_data),
+        false
+    )
+end
+
+local function add_quasar_app(app_data)
+    local owner_resource, owner_error = get_calling_resource("addCustomApp")
+    if not owner_resource then
+        return false, owner_error
+    end
+    if type(app_data) ~= "table" then
+        return false, "invalid_app_data"
+    end
+    return add_quasar_app_for_owner(owner_resource, app_data)
+end
+
+local function add_quasar_apps_batch(apps)
+    local owner_resource, owner_error = get_calling_resource("addCustomAppsBatch")
+    if not owner_resource then
+        return false, owner_error
+    end
+    if type(apps) ~= "table" then
+        return false, "invalid_app_batch"
+    end
+
+    for index = 1, #apps do
+        local success, error_message = add_quasar_app_for_owner(owner_resource, apps[index])
+        if not success then
+            return false, error_message
+        end
+    end
+    return true
+end
+
+local function update_quasar_app(app_id, patch)
+    local owner_resource, owner_error = get_calling_resource("updateCustomApp")
+    if not owner_resource then
+        return false, owner_error
+    end
+    if type(patch) ~= "table" then
+        return false, "invalid_patch"
+    end
+
+    local record, record_error = get_provider_app(owner_resource, app_id, {
+        [providers.quasar] = true,
+    })
+    if not record then
+        return false, record_error
+    end
+
+    local merged = SkyPhoneCompatibility.CopyQuasarData(record.vendor_data)
+    for key, value in pairs(patch) do
+        if key == "iframe" and type(value) == "table" then
+            merged.iframe = merged.iframe or {}
+            for iframe_key, iframe_value in pairs(value) do
+                merged.iframe[iframe_key] = iframe_value
+            end
+        elseif key ~= "id" then
+            merged[key] = value
+        end
+    end
+    merged.id = app_id
+
+    local definition, definition_error = SkyPhoneCompatibility.BuildQuasarDefinition(merged)
+    if not definition then
+        return false, definition_error
+    end
+
+    local success, error_message = core.Update(owner_resource, definition)
+    if success then
+        record.definition = definition
+        record.vendor_data = SkyPhoneCompatibility.CopyQuasarData(merged)
+    end
+    return success, error_message
+end
+
+local function remove_quasar_app(app_id)
+    local owner_resource, owner_error = get_calling_resource("removeCustomApp")
+    if not owner_resource then
+        return false, owner_error
+    end
+    return remove_provider_app(owner_resource, app_id, {
+        [providers.quasar] = true,
+    })
+end
+
+local function get_quasar_apps()
+    local ids = {}
+    for app_id, record in pairs(provider_apps) do
+        if record.provider == providers.quasar then
+            ids[#ids + 1] = app_id
+        end
+    end
+    table.sort(ids)
+
+    local apps = {}
+    for index = 1, #ids do
+        apps[index] = SkyPhoneCompatibility.CopyQuasarData(provider_apps[ids[index]].vendor_data)
+    end
+    return apps
+end
+
+local function open_quasar_app(app_id)
+    local owner_resource, owner_error = get_calling_resource("OpenPhoneApp")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local record, record_error = get_provider_app(owner_resource, app_id, {
+        [providers.quasar] = true,
+    })
+    if not record then
+        return false, record_error
+    end
+    return core.Open(owner_resource, app_id)
+end
+
+local function open_phone_app(app_id, data)
+    local owner_resource, owner_error = get_calling_resource("OpenApp")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local record, record_error = get_provider_app(owner_resource, app_id)
+    if not record then
+        return false, record_error
+    end
+    return core.Open(owner_resource, app_id, data)
+end
+
+local function close_phone_app(options)
+    local owner_resource, owner_error = get_calling_resource("CloseApp")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local app_id = type(options) == "table" and options.app or nil
+    if app_id then
+        local record, record_error = get_provider_app(owner_resource, app_id, {
+            [providers.lb] = true,
+            [providers.yseries] = true,
+        })
+        if not record then
+            return false, record_error
+        end
+        return core.Close(owner_resource, app_id)
+    end
+    return core.CloseActive(owner_resource)
+end
+
+local function register_high_server_app(owner_resource, definition, revision)
+    if type(owner_resource) ~= "string"
+        or type(definition) ~= "table"
+        or type(definition.id) ~= "string"
+        or type(revision) ~= "number"
+        or revision ~= math.floor(revision)
+        or revision < 1
+    then
+        print(("[%s] Rejected invalid High Phone server application snapshot."):format(RESOURCE_NAME))
+        return nil
+    end
+
+    local app_id = definition.id
+    local existing = high_server_apps[app_id]
+    if existing and revision <= existing.revision then
+        if revision < existing.revision or existing.registered then
+            return app_id
+        end
+        if existing.owner_resource ~= owner_resource then
+            print(("[%s] Rejected conflicting High Phone owner for %s."):format(
+                RESOURCE_NAME,
+                app_id
+            ))
+            return app_id
+        end
+    end
+
+    local provider_record = provider_apps[app_id]
+    local success, error_message
+    local retained_registration = false
+    if provider_record then
+        if provider_record.owner_resource ~= owner_resource or provider_record.provider ~= providers.high then
+            success, error_message = false, "duplicate_app_id"
+        else
+            retained_registration = true
+            success, error_message = core.Update(owner_resource, definition)
+        end
+    else
+        success, error_message = core.Add(owner_resource, definition)
+    end
+
+    high_server_apps[app_id] = {
+        definition = definition,
+        last_error = success and nil or error_message,
+        owner_resource = owner_resource,
+        registered = success or retained_registration,
+        revision = revision,
+    }
+    if success then
+        provider_apps[app_id] = {
+            definition = definition,
+            owner_resource = owner_resource,
+            provider = providers.high,
+        }
+    elseif not existing or existing.revision ~= revision or existing.last_error ~= error_message then
+        print(("[%s] Could not register High Phone server application %s revision %s: %s."):format(
+            RESOURCE_NAME,
+            app_id,
+            revision,
+            error_message or "unknown_error"
+        ))
+    end
+    return app_id
+end
+
+local function remove_high_server_app(owner_resource, app_id)
+    local record = high_server_apps[app_id]
+    if not record or record.owner_resource ~= owner_resource then
+        return
+    end
+
+    high_server_apps[app_id] = nil
+    if record.registered then
+        core.Remove(owner_resource, app_id)
+    end
+
+    local client_record = high_client_apps[app_id]
+    if client_record then
+        local success, error_message = register_provider_app(
+            providers.high,
+            client_record.owner_resource,
+            client_record.definition,
+            nil,
+            false
+        )
+        if not success then
+            print(("[%s] Could not restore High Phone client application %s: %s."):format(
+                RESOURCE_NAME,
+                app_id,
+                error_message or "unknown_error"
+            ))
+        end
+    end
+end
+
+RegisterNetEvent("sky_phone:compat:high:client:syncApplication", function(owner_resource, definition, revision)
+    if source ~= 65535 then
+        print(("[%s] Rejected locally invoked High Phone application sync."):format(RESOURCE_NAME))
+        return
+    end
+    register_high_server_app(owner_resource, definition, revision)
+end)
+
+RegisterNetEvent("sky_phone:compat:high:client:removeApplication", function(owner_resource, app_id)
+    if source ~= 65535 then
+        print(("[%s] Rejected locally invoked High Phone application removal."):format(RESOURCE_NAME))
+        return
+    end
+    if type(owner_resource) ~= "string" or type(app_id) ~= "string" then
+        print(("[%s] Rejected invalid High Phone application removal."):format(RESOURCE_NAME))
+        return
+    end
+    remove_high_server_app(owner_resource, app_id)
+end)
+
+RegisterNetEvent("sky_phone:compat:high:client:replaceSnapshot", function(snapshot)
+    if source ~= 65535 then
+        print(("[%s] Rejected locally invoked High Phone application snapshot."):format(RESOURCE_NAME))
+        return
+    end
+    if type(snapshot) ~= "table" then
+        print(("[%s] Rejected invalid High Phone application snapshot."):format(RESOURCE_NAME))
+        return
+    end
+
+    local seen = {}
+    for index = 1, #snapshot do
+        local record = snapshot[index]
+        if type(record) == "table" then
+            local app_id = register_high_server_app(
+                record.owner_resource,
+                record.definition,
+                record.revision
+            )
+            if app_id then
+                seen[app_id] = true
+            end
+        end
+    end
+
+    local removed = {}
+    for app_id, record in pairs(high_server_apps) do
+        if not seen[app_id] then
+            removed[#removed + 1] = {
+                app_id = app_id,
+                owner_resource = record.owner_resource,
+            }
+        end
+    end
+    for index = 1, #removed do
+        remove_high_server_app(removed[index].owner_resource, removed[index].app_id)
+    end
+end)
+
+AddEventHandler("onClientResourceStart", function(resource_name)
+    for _, record in pairs(high_server_apps) do
+        if record.owner_resource == resource_name and not record.registered then
+            register_high_server_app(record.owner_resource, record.definition, record.revision)
+        end
+    end
+end)
+
+AddEventHandler("onClientResourceStop", function(resource_name)
+    for app_id, record in pairs(high_client_apps) do
+        if record.owner_resource == resource_name then
+            high_client_apps[app_id] = nil
+        end
+    end
+end)
+
+CreateThread(function()
+    TriggerServerEvent("sky_phone:compat:high:server:requestSnapshot")
+    TriggerEvent("17mov_Phone:Client:Ready")
+end)
+
+exports("AddApplication", add_17mov_application)
+exports("RemoveApplication", remove_17mov_application)
+exports("SendAppMessage", send_app_message)
+exports("addApplication", add_high_application)
+exports("sendAppNui", send_high_app_nui)
+exports("addCustomApp", add_quasar_app)
+exports("addCustomAppsBatch", add_quasar_apps_batch)
+exports("updateCustomApp", update_quasar_app)
+exports("removeCustomApp", remove_quasar_app)
+exports("getCustomApps", get_quasar_apps)
+exports("OpenPhoneApp", open_quasar_app)
+exports("OpenApp", open_phone_app)
+exports("CloseApp", close_phone_app)
diff --git a/sky_phone/source/client/custom_apps.lua b/sky_phone/source/client/custom_apps.lua
new file mode 100644
index 0000000..1f95350
--- /dev/null
+++ b/sky_phone/source/client/custom_apps.lua
@@ -0,0 +1,1396 @@
+local COMPATIBILITY_MAX_BYTES = 8192
+local JSON_MAX_DEPTH = 12
+local JSON_MAX_VALUES = 4096
+local MAX_QUEUED_MESSAGES = 64
+local NOTIFICATION_TEXT_MAX_LENGTH = 2000
+local NOTIFICATION_TITLE_MAX_LENGTH = 160
+
+local NOTIFICATION_SOUNDS = {
+    chime = true,
+    signal = true,
+    soft = true,
+}
+
+local HOOK_NAMES = {
+    onClose = true,
+    onInstall = true,
+    onOpen = true,
+    onReady = true,
+}
+
+local apps_by_id = {}
+local app_ids_by_adapter = {}
+local app_ids_by_owner = {}
+local current_resource = GetCurrentResourceName()
+local active_app_id = nil
+local active_app_ready = false
+local phone_open = false
+local queued_messages = {}
+local default_icon_url = ("https://cfx-nui-%s/custom_apps/_sdk/default-icon.svg"):format(current_resource)
+
+local function trim(value)
+    return value:match("^%s*(.-)%s*$")
+end
+
+local function validate_owner_resource(owner_resource, allow_stopping)
+    if type(owner_resource) ~= "string"
+        or #owner_resource == 0
+        or #owner_resource > 64
+        or not owner_resource:match("^[%w][%w._-]*$")
+    then
+        return false, "invalid_owner_resource"
+    end
+
+    local state = GetResourceState(owner_resource)
+    if state == "started" or state == "starting" or (allow_stopping and state == "stopping") then
+        return true
+    end
+
+    return false, "owner_resource_not_running"
+end
+
+local function resolve_localized_text(value)
+    if type(value) == "string" then
+        return value
+    end
+
+    local locale = Config.Bridge.Locale:lower():gsub("_", "-")
+    if value[locale] then
+        return value[locale]
+    end
+
+    local base_locale = locale:match("^([a-z]+)-")
+    if base_locale and value[base_locale] then
+        return value[base_locale]
+    end
+    if value.en then
+        return value.en
+    end
+    if value.de then
+        return value.de
+    end
+
+    local locales = {}
+    for available_locale in pairs(value) do
+        locales[#locales + 1] = available_locale
+    end
+    table.sort(locales)
+    return value[locales[1]]
+end
+
+local function is_allowed_remote_origin(url)
+    local origin = url:match("^(https://[^/%?#]+)")
+    if not origin then
+        return false
+    end
+
+    local allowed_origins = Config.CustomApps.AllowRemoteOrigins
+    if allowed_origins[origin] then
+        return true
+    end
+
+    for index = 1, #allowed_origins do
+        if allowed_origins[index] == origin then
+            return true
+        end
+    end
+
+    return false
+end
+
+local function validate_asset_path(path)
+    if #path == 0
+        or #path > 1024
+        or path:find("\\", 1, true)
+        or path:find("[%c]")
+        or path:lower():find("%2e", 1, true)
+    then
+        return false
+    end
+
+    local path_only = path:match("^[^?#]+") or path
+    for segment in path_only:gmatch("[^/]+") do
+        if segment == "." or segment == ".." then
+            return false
+        end
+    end
+
+    return true
+end
+
+local function normalize_asset_url(value, original_owner, adapter_resource, required)
+    if value == nil and not required then
+        return nil
+    end
+    if type(value) ~= "string" then
+        return nil, "invalid_asset_url"
+    end
+
+    local url = trim(value)
+    if not validate_asset_path(url) then
+        return nil, "invalid_asset_url"
+    end
+
+    local allowed_owners = {
+        [original_owner] = true,
+    }
+    if adapter_resource then
+        allowed_owners[adapter_resource] = true
+    end
+
+    local cfx_owner = url:match("^https://cfx%-nui%-([^/]+)/")
+    if cfx_owner then
+        if not allowed_owners[cfx_owner] then
+            return nil, "asset_owner_mismatch"
+        end
+        return url
+    end
+
+    local nui_owner, nui_path = url:match("^nui://([^/]+)/(.+)$")
+    if nui_owner then
+        if not allowed_owners[nui_owner] then
+            return nil, "asset_owner_mismatch"
+        end
+        return ("https://cfx-nui-%s/%s"):format(nui_owner, nui_path)
+    end
+
+    if url:sub(1, 8) == "https://" then
+        if not is_allowed_remote_origin(url) then
+            return nil, "remote_origin_not_allowed"
+        end
+        return url
+    end
+
+    if url:match("^[%a][%w+.-]*:") or url:sub(1, 2) == "//" or url:sub(1, 1) == "/" then
+        return nil, "invalid_asset_url"
+    end
+
+    local asset_owner = original_owner
+    local asset_path = url
+    local original_prefix = original_owner .. "/"
+    if url:sub(1, #original_prefix) == original_prefix then
+        asset_path = url:sub(#original_prefix + 1)
+    elseif adapter_resource then
+        local adapter_prefix = adapter_resource .. "/"
+        if url:sub(1, #adapter_prefix) == adapter_prefix then
+            asset_owner = adapter_resource
+            asset_path = url:sub(#adapter_prefix + 1)
+        end
+    end
+
+    if not validate_asset_path(asset_path) then
+        return nil, "invalid_asset_url"
+    end
+
+    return ("https://cfx-nui-%s/%s"):format(asset_owner, asset_path)
+end
+
+local function validate_json_value(value, depth, seen, counter)
+    local value_type = type(value)
+    if value_type == "nil" or value_type == "boolean" then
+        return true
+    end
+    if value_type == "number" then
+        return value == value and value ~= math.huge and value ~= -math.huge
+    end
+    if value_type == "string" then
+        return #value <= Config.CustomApps.MaximumMessageBytes
+    end
+    if value_type ~= "table" or depth >= JSON_MAX_DEPTH or seen[value] then
+        return false
+    end
+
+    seen[value] = true
+    local key_type = nil
+    local numeric_keys = 0
+    local value_count = 0
+    for key, nested_value in pairs(value) do
+        counter.count = counter.count + 1
+        value_count = value_count + 1
+        if counter.count > JSON_MAX_VALUES then
+            seen[value] = nil
+            return false
+        end
+
+        local current_key_type = type(key)
+        if current_key_type == "number" then
+            if key < 1 or key % 1 ~= 0 then
+                seen[value] = nil
+                return false
+            end
+            numeric_keys = numeric_keys + 1
+        elseif current_key_type ~= "string" or #key > 128 then
+            seen[value] = nil
+            return false
+        end
+
+        if key_type and key_type ~= current_key_type then
+            seen[value] = nil
+            return false
+        end
+        key_type = current_key_type
+
+        if not validate_json_value(nested_value, depth + 1, seen, counter) then
+            seen[value] = nil
+            return false
+        end
+    end
+
+    if key_type == "number" and (numeric_keys ~= value_count or #value ~= value_count) then
+        seen[value] = nil
+        return false
+    end
+
+    seen[value] = nil
+    return true
+end
+
+local function normalize_json_payload(payload, maximum_bytes)
+    if not validate_json_value(payload, 0, {}, { count = 0 }) then
+        return nil, "invalid_payload"
+    end
+
+    local encoded_success, encoded = pcall(json.encode, payload)
+    if not encoded_success or type(encoded) ~= "string" then
+        return nil, "invalid_payload"
+    end
+    if #encoded > maximum_bytes then
+        return nil, "payload_too_large"
+    end
+
+    return json.decode(encoded)
+end
+
+local function validate_optional_text(value, error_code, maximum_length)
+    if value == nil then
+        return nil
+    end
+    if type(value) ~= "string" then
+        return nil, error_code
+    end
+
+    local normalized = trim(value)
+    if #normalized == 0 or #normalized > maximum_length then
+        return nil, error_code
+    end
+
+    return normalized
+end
+
+local function normalize_external_definition(owner_resource, adapter_resource, definition)
+    if type(definition) ~= "table" then
+        return nil, "invalid_definition"
+    end
+    if definition.schemaVersion ~= nil and definition.schemaVersion ~= SkyPhoneApps.ProtocolVersion then
+        return nil, "unsupported_schema_version"
+    end
+    if definition.onDelete ~= nil then
+        return nil, "unsupported_on_delete"
+    end
+
+    local valid_id, id_error = SkyPhoneApps.ValidateAppId(definition.id)
+    if not valid_id then
+        return nil, id_error
+    end
+    if SkyPhoneApps.ReservedAppIds[definition.id] then
+        return nil, "reserved_app_id"
+    end
+
+    local name, name_error = SkyPhoneApps.ValidateLocalizedText(
+        definition.name,
+        "invalid_name",
+        64,
+        true
+    )
+    if not name then
+        return nil, name_error
+    end
+
+    local description, description_error = SkyPhoneApps.ValidateLocalizedText(
+        definition.description,
+        "invalid_description",
+        320,
+        false
+    )
+    if definition.description ~= nil and not description then
+        return nil, description_error
+    end
+
+    local developer, developer_error = validate_optional_text(definition.developer, "invalid_developer", 96)
+    if definition.developer ~= nil and not developer then
+        return nil, developer_error
+    end
+
+    local category = definition.category or "utilities"
+    if not SkyPhoneApps.AllowedCategories[category] then
+        return nil, "invalid_category"
+    end
+
+    local ui, ui_error = normalize_asset_url(definition.ui, owner_resource, adapter_resource, true)
+    if not ui then
+        return nil, ui_error
+    end
+
+    local icon, icon_error = normalize_asset_url(definition.icon, owner_resource, adapter_resource, false)
+    if definition.icon ~= nil and not icon then
+        return nil, icon_error
+    end
+
+    local permissions, permissions_error = SkyPhoneApps.ValidatePermissions(definition.permissions)
+    if not permissions then
+        return nil, permissions_error
+    end
+
+    local orientation = definition.orientation or "portrait"
+    if not SkyPhoneApps.AllowedOrientations[orientation] then
+        return nil, "invalid_orientation"
+    end
+
+    if definition.defaultInstalled ~= nil and type(definition.defaultInstalled) ~= "boolean" then
+        return nil, "invalid_default_installed"
+    end
+    if definition.removable ~= nil and type(definition.removable) ~= "boolean" then
+        return nil, "invalid_removable"
+    end
+
+    local grid_order = definition.gridOrder
+    if grid_order ~= nil
+        and (type(grid_order) ~= "number" or grid_order ~= math.floor(grid_order) or grid_order < 0 or grid_order > 9999)
+    then
+        return nil, "invalid_grid_order"
+    end
+
+    local icon_background = validate_optional_text(definition.iconBackground, "invalid_icon_background", 64)
+    if definition.iconBackground ~= nil and not icon_background then
+        return nil, "invalid_icon_background"
+    end
+    if icon_background and icon_background:find("[\r\n;{}]") then
+        return nil, "invalid_icon_background"
+    end
+
+    local bridge_mode = definition.bridgeMode or "legacy"
+    if bridge_mode ~= "sky" and bridge_mode ~= "legacy" then
+        return nil, "invalid_bridge_mode"
+    end
+
+    local compatibility = nil
+    if definition.compatibility ~= nil then
+        if type(definition.compatibility) ~= "table" or next(definition.compatibility) == nil then
+            return nil, "invalid_compatibility"
+        end
+        compatibility, permissions_error = normalize_json_payload(definition.compatibility, COMPATIBILITY_MAX_BYTES)
+        if not compatibility then
+            return nil, permissions_error
+        end
+    end
+
+    local hooks = {}
+    for hook_name in pairs(HOOK_NAMES) do
+        local hook = definition[hook_name]
+        if hook ~= nil and type(hook) ~= "function" then
+            return nil, "invalid_" .. hook_name
+        end
+        hooks[hook_name] = hook
+    end
+
+    return {
+        adapterResource = adapter_resource,
+        catalog = {
+            bridgeMode = bridge_mode,
+            bundled = false,
+            category = category,
+            compatibility = compatibility,
+            defaultInstalled = definition.defaultInstalled == true,
+            description = description and resolve_localized_text(description) or nil,
+            developer = developer,
+            gridOrder = grid_order,
+            icon = icon or default_icon_url,
+            iconBackground = icon_background,
+            id = definition.id,
+            kind = "external",
+            name = resolve_localized_text(name),
+            orientation = orientation,
+            ownerResource = owner_resource,
+            permissions = permissions,
+            readyTimeoutMs = Config.CustomApps.ReadyTimeoutMs,
+            removable = definition.removable ~= false,
+            ui = ui,
+        },
+        hooks = hooks,
+        ownerResource = owner_resource,
+    }
+end
+
+local function normalize_bundled_manifest(manifest)
+    local resource_base_path = ("custom_apps/%s/"):format(manifest.folder)
+    local base_url = ("https://cfx-nui-%s/%s"):format(current_resource, resource_base_path)
+    if LoadResourceFile(current_resource, resource_base_path .. manifest.entry) == nil then
+        error(("[sky_phone] Bundled custom app '%s' entry file is missing: %s"):format(
+            manifest.id,
+            manifest.entry
+        ))
+    end
+    if manifest.icon and LoadResourceFile(current_resource, resource_base_path .. manifest.icon) == nil then
+        error(("[sky_phone] Bundled custom app '%s' icon file is missing: %s"):format(
+            manifest.id,
+            manifest.icon
+        ))
+    end
+    for index = 1, #manifest.screenshots do
+        if LoadResourceFile(current_resource, resource_base_path .. manifest.screenshots[index]) == nil then
+            error(("[sky_phone] Bundled custom app '%s' screenshot file is missing: %s"):format(
+                manifest.id,
+                manifest.screenshots[index]
+            ))
+        end
+    end
+
+    return {
+        adapterResource = nil,
+        catalog = {
+            bridgeMode = manifest.bridgeMode,
+            bundled = true,
+            category = manifest.category,
+            defaultInstalled = manifest.defaultInstalled,
+            description = resolve_localized_text(manifest.description),
+            developer = manifest.developer,
+            gridOrder = manifest.gridOrder,
+            icon = manifest.icon and (base_url .. manifest.icon) or default_icon_url,
+            iconBackground = manifest.iconBackground,
+            id = manifest.id,
+            kind = "external",
+            name = resolve_localized_text(manifest.name),
+            orientation = manifest.orientation,
+            ownerResource = current_resource,
+            permissions = manifest.permissions,
+            readyTimeoutMs = Config.CustomApps.ReadyTimeoutMs,
+            removable = manifest.removable,
+            ui = base_url .. manifest.entry,
+        },
+        hooks = {},
+        ownerResource = current_resource,
+    }
+end
+
+local function get_catalog()
+    local catalog = {}
+    for _, app in pairs(apps_by_id) do
+        catalog[#catalog + 1] = app.catalog
+    end
+    table.sort(catalog, function(left, right)
+        return left.id < right.id
+    end)
+    return catalog
+end
+
+local function send_catalog()
+    SendNUIMessage({
+        type = "custom-apps:catalog",
+        data = {
+            apps = get_catalog(),
+        },
+    })
+end
+
+local function sync_catalog_if_open()
+    if phone_open then
+        send_catalog()
+    end
+end
+
+local function add_owner_index(index, resource_name, app_id)
+    local app_ids = index[resource_name]
+    if not app_ids then
+        app_ids = {}
+        index[resource_name] = app_ids
+    end
+    app_ids[app_id] = true
+end
+
+local function remove_owner_index(index, resource_name, app_id)
+    local app_ids = index[resource_name]
+    if not app_ids then
+        return
+    end
+
+    app_ids[app_id] = nil
+    if not next(app_ids) then
+        index[resource_name] = nil
+    end
+end
+
+local function register_app(app)
+    local app_id = app.catalog.id
+    local existing = apps_by_id[app_id]
+    if existing then
+        print((
+            "[sky_phone] Rejected duplicate custom app '%s' from '%s'; it is already owned by '%s'."
+        ):format(app_id, app.ownerResource, existing.ownerResource))
+        return false, "duplicate_app_id"
+    end
+
+    apps_by_id[app_id] = app
+    add_owner_index(app_ids_by_owner, app.ownerResource, app_id)
+    if app.adapterResource then
+        add_owner_index(app_ids_by_adapter, app.adapterResource, app_id)
+    end
+    sync_catalog_if_open()
+    return true
+end
+
+local function invoke_hook(app, hook_name, payload)
+    local hook = app.hooks[hook_name]
+    if not hook then
+        return true
+    end
+
+    local success, hook_error = xpcall(function()
+        hook(payload)
+    end, debug.traceback)
+    if success then
+        return true
+    end
+
+    print(("[sky_phone] Custom app '%s' hook '%s' failed: %s"):format(
+        app.catalog.id,
+        hook_name,
+        tostring(hook_error)
+    ))
+    return false
+end
+
+local function clear_active_app(invoke_close_hook)
+    if not active_app_id then
+        return
+    end
+
+    local app = apps_by_id[active_app_id]
+    if app and invoke_close_hook then
+        invoke_hook(app, "onClose")
+    end
+    queued_messages[active_app_id] = nil
+    active_app_id = nil
+    active_app_ready = false
+end
+
+local function remove_registered_app(app_id, invoke_close_hook, synchronize)
+    local app = apps_by_id[app_id]
+    if not app then
+        return false, "app_not_found"
+    end
+
+    if active_app_id == app_id then
+        SendNUIMessage({ type = "custom-app:close", data = { appId = app_id } })
+        clear_active_app(invoke_close_hook)
+    end
+
+    apps_by_id[app_id] = nil
+    remove_owner_index(app_ids_by_owner, app.ownerResource, app_id)
+    if app.adapterResource then
+        remove_owner_index(app_ids_by_adapter, app.adapterResource, app_id)
+    end
+    if SkyPhoneApps.OnCompatibilityAppRemoved then
+        SkyPhoneApps.OnCompatibilityAppRemoved(app.ownerResource, app_id)
+    end
+    if synchronize then
+        sync_catalog_if_open()
+    end
+    return true
+end
+
+local function get_direct_owner()
+    local owner_resource = GetInvokingResource()
+    if not owner_resource then
+        return nil, "missing_invoking_resource"
+    end
+
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return nil, owner_error
+    end
+
+    return owner_resource
+end
+
+local function get_trusted_adapter()
+    local adapter_resource = GetInvokingResource()
+    if not adapter_resource or not Config.CustomApps.TrustedAdapters[adapter_resource] then
+        return nil, "untrusted_adapter"
+    end
+
+    local valid_adapter, adapter_error = validate_owner_resource(adapter_resource, false)
+    if not valid_adapter then
+        return nil, adapter_error
+    end
+
+    return adapter_resource
+end
+
+local function verify_owned_app(owner_resource, app_id, adapter_resource)
+    local valid_id, id_error = SkyPhoneApps.ValidateAppId(app_id)
+    if not valid_id then
+        return nil, id_error
+    end
+
+    local app = apps_by_id[app_id]
+    if not app then
+        return nil, "app_not_found"
+    end
+    if app.ownerResource ~= owner_resource then
+        return nil, "app_owner_mismatch"
+    end
+    if adapter_resource and app.adapterResource ~= adapter_resource then
+        return nil, "app_adapter_mismatch"
+    end
+
+    return app
+end
+
+local function add_custom_app(definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local app, definition_error = normalize_external_definition(owner_resource, nil, definition)
+    if not app then
+        return false, definition_error
+    end
+
+    return register_app(app)
+end
+
+local function add_custom_app_from_adapter(owner_resource, definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+
+    local app, definition_error = normalize_external_definition(owner_resource, adapter_resource, definition)
+    if not app then
+        return false, definition_error
+    end
+
+    return register_app(app)
+end
+
+local function add_compatibility_app(owner_resource, definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+
+    local app, definition_error = normalize_external_definition(owner_resource, nil, definition)
+    if not app then
+        return false, definition_error
+    end
+
+    return register_app(app)
+end
+
+local function replace_registered_app(app, adapter_resource)
+    local app_id = app.catalog.id
+    local existing = apps_by_id[app_id]
+    if not existing then
+        return false, "app_not_found"
+    end
+    if existing.catalog.bundled then
+        return false, "bundled_app"
+    end
+    if existing.ownerResource ~= app.ownerResource then
+        return false, "app_owner_mismatch"
+    end
+    if existing.adapterResource ~= adapter_resource then
+        return false, "app_adapter_mismatch"
+    end
+
+    apps_by_id[app_id] = app
+    sync_catalog_if_open()
+    return true
+end
+
+local function update_custom_app(definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local app, definition_error = normalize_external_definition(owner_resource, nil, definition)
+    if not app then
+        return false, definition_error
+    end
+    return replace_registered_app(app, nil)
+end
+
+local function update_custom_app_from_adapter(owner_resource, definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+
+    local app, definition_error = normalize_external_definition(owner_resource, adapter_resource, definition)
+    if not app then
+        return false, definition_error
+    end
+    return replace_registered_app(app, adapter_resource)
+end
+
+local function update_compatibility_app(owner_resource, definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+
+    local app, definition_error = normalize_external_definition(owner_resource, nil, definition)
+    if not app then
+        return false, definition_error
+    end
+    return replace_registered_app(app, nil)
+end
+
+local function remove_custom_app(app_id)
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local app, app_error = verify_owned_app(owner_resource, app_id)
+    if not app then
+        return false, app_error
+    end
+    if app.catalog.bundled then
+        return false, "bundled_app"
+    end
+
+    return remove_registered_app(app_id, true, true)
+end
+
+local function remove_custom_app_from_adapter(owner_resource, app_id)
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+
+    local app, app_error = verify_owned_app(owner_resource, app_id, adapter_resource)
+    if not app then
+        return false, app_error
+    end
+
+    return remove_registered_app(app_id, true, true)
+end
+
+local function remove_compatibility_app(owner_resource, app_id)
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+
+    local app, app_error = verify_owned_app(owner_resource, app_id)
+    if not app then
+        return false, app_error
+    end
+    if app.catalog.bundled then
+        return false, "bundled_app"
+    end
+
+    return remove_registered_app(app_id, true, true)
+end
+
+local function deliver_custom_app_message(app_id, payload)
+    SendNUIMessage({
+        type = "custom-app:message",
+        data = {
+            appId = app_id,
+            payload = payload,
+        },
+    })
+end
+
+local function send_owned_custom_app_message(owner_resource, app_id, payload, adapter_resource)
+    local app, app_error = verify_owned_app(owner_resource, app_id, adapter_resource)
+    if not app then
+        return false, app_error
+    end
+    if not phone_open or active_app_id ~= app_id then
+        return false, "app_not_active"
+    end
+
+    local normalized_payload, payload_error = normalize_json_payload(
+        payload,
+        Config.CustomApps.MaximumMessageBytes
+    )
+    if payload_error then
+        return false, payload_error
+    end
+
+    if active_app_ready then
+        deliver_custom_app_message(app_id, normalized_payload)
+        return true
+    end
+
+    local pending = queued_messages[app_id] or {}
+    if #pending >= MAX_QUEUED_MESSAGES then
+        return false, "message_queue_full"
+    end
+    pending[#pending + 1] = { payload = normalized_payload }
+    queued_messages[app_id] = pending
+    return true
+end
+
+local function send_custom_app_message(app_id, payload)
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+    return send_owned_custom_app_message(owner_resource, app_id, payload)
+end
+
+local function send_custom_app_message_from_adapter(owner_resource, app_id, payload)
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    return send_owned_custom_app_message(owner_resource, app_id, payload, adapter_resource)
+end
+
+local function send_compatibility_app_message(owner_resource, app_id, payload)
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+    return send_owned_custom_app_message(owner_resource, app_id, payload)
+end
+
+local function open_owned_custom_app(owner_resource, app_id, payload, adapter_resource)
+    local app, app_error = verify_owned_app(owner_resource, app_id, adapter_resource)
+    if not app then
+        return false, app_error
+    end
+    if not phone_open then
+        return false, "phone_closed"
+    end
+
+    local normalized_payload, payload_error = normalize_json_payload(
+        payload,
+        Config.CustomApps.MaximumMessageBytes
+    )
+    if payload_error then
+        return false, payload_error
+    end
+
+    SendNUIMessage({
+        type = "custom-app:open",
+        data = {
+            appId = app_id,
+            data = normalized_payload,
+        },
+    })
+    return true
+end
+
+local function open_custom_app(app_id, payload)
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+    return open_owned_custom_app(owner_resource, app_id, payload)
+end
+
+local function open_custom_app_from_adapter(owner_resource, app_id, payload)
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    return open_owned_custom_app(owner_resource, app_id, payload, adapter_resource)
+end
+
+local function open_compatibility_app(owner_resource, app_id, payload)
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+    return open_owned_custom_app(owner_resource, app_id, payload)
+end
+
+local function close_owned_custom_app(owner_resource, app_id, adapter_resource)
+    local app, app_error = verify_owned_app(owner_resource, app_id, adapter_resource)
+    if not app then
+        return false, app_error
+    end
+    if active_app_id ~= app_id then
+        return false, "app_not_active"
+    end
+
+    SendNUIMessage({ type = "custom-app:close", data = { appId = app_id } })
+    return true
+end
+
+local function close_custom_app(app_id)
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+    return close_owned_custom_app(owner_resource, app_id)
+end
+
+local function close_custom_app_from_adapter(owner_resource, app_id)
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    return close_owned_custom_app(owner_resource, app_id, adapter_resource)
+end
+
+local function close_active_custom_app_from_adapter(owner_resource)
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    if not active_app_id then
+        return false, "app_not_active"
+    end
+
+    local app, app_error = verify_owned_app(owner_resource, active_app_id, adapter_resource)
+    if not app then
+        return false, app_error
+    end
+
+    SendNUIMessage({ type = "custom-app:close", data = { appId = active_app_id } })
+    return true
+end
+
+local function close_compatibility_app(owner_resource, app_id)
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+    return close_owned_custom_app(owner_resource, app_id)
+end
+
+local function close_active_compatibility_app(owner_resource)
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+    if not active_app_id then
+        return false, "app_not_active"
+    end
+
+    local app, app_error = verify_owned_app(owner_resource, active_app_id)
+    if not app then
+        return false, app_error
+    end
+
+    SendNUIMessage({ type = "custom-app:close", data = { appId = active_app_id } })
+    return true
+end
+
+local function has_permission(app, permission)
+    local permissions = app.catalog.permissions
+    for index = 1, #permissions do
+        if permissions[index] == permission then
+            return true
+        end
+    end
+    return false
+end
+
+local function normalize_notification(app, notification)
+    if type(notification) ~= "table" then
+        return nil, "invalid_notification"
+    end
+    if not has_permission(app, "notifications") then
+        return nil, "permission_denied"
+    end
+
+    local title = notification.title
+    if title == nil then
+        title = app.catalog.name
+    end
+    title = validate_optional_text(title, "invalid_notification_title", NOTIFICATION_TITLE_MAX_LENGTH)
+    if not title then
+        return nil, "invalid_notification_title"
+    end
+
+    local text = validate_optional_text(
+        notification.text or notification.content,
+        "invalid_notification_text",
+        NOTIFICATION_TEXT_MAX_LENGTH
+    )
+    if not text then
+        return nil, "invalid_notification_text"
+    end
+
+    local subtitle = validate_optional_text(notification.subtitle, "invalid_notification_subtitle", 160)
+    if notification.subtitle ~= nil and not subtitle then
+        return nil, "invalid_notification_subtitle"
+    end
+
+    if notification.critical ~= nil and type(notification.critical) ~= "boolean" then
+        return nil, "invalid_notification_critical"
+    end
+    if notification.critical and not has_permission(app, "notifications.critical") then
+        return nil, "permission_denied"
+    end
+    if notification.persistent ~= nil and type(notification.persistent) ~= "boolean" then
+        return nil, "invalid_notification_persistent"
+    end
+    if notification.sound ~= nil and not NOTIFICATION_SOUNDS[notification.sound] then
+        return nil, "invalid_notification_sound"
+    end
+
+    local app_route = "/apps/" .. app.catalog.id
+    local route = notification.route or app_route
+    if type(route) ~= "string"
+        or route ~= app_route
+        or route:find("[\r\n]")
+        or #route > 512
+    then
+        return nil, "invalid_notification_route"
+    end
+
+    return {
+        appId = app.catalog.id,
+        critical = notification.critical == true,
+        persistent = notification.persistent == true,
+        route = route,
+        sound = notification.sound,
+        subtitle = subtitle,
+        text = text,
+        title = title,
+    }
+end
+
+local function send_owned_custom_app_notification(owner_resource, app_id, notification, adapter_resource)
+    local app, app_error = verify_owned_app(owner_resource, app_id, adapter_resource)
+    if not app then
+        return false, app_error
+    end
+
+    local normalized_notification, notification_error = normalize_notification(app, notification)
+    if not normalized_notification then
+        return false, notification_error
+    end
+
+    send_catalog()
+    SendNUIMessage({ type = "notification:show", data = normalized_notification })
+    return true
+end
+
+local function send_custom_app_notification(app_id, notification)
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+    return send_owned_custom_app_notification(owner_resource, app_id, notification)
+end
+
+local function send_custom_app_notification_from_adapter(owner_resource, app_id, notification)
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    return send_owned_custom_app_notification(owner_resource, app_id, notification, adapter_resource)
+end
+
+local function get_custom_app_capabilities()
+    return {
+        abiVersion = 1,
+        enabled = Config.CustomApps.Enabled,
+        bridgeMethods = {
+            "app.close",
+            "app.open",
+            "device.storage.get",
+            "device.storage.set",
+            "notification.create",
+        },
+        contextCapabilities = {
+            "locale.read",
+            "theme.read",
+        },
+        exports = {
+            "AddCustomApp",
+            "AddCustomAppFromAdapter",
+            "CloseActiveCustomAppFromAdapter",
+            "CloseCustomApp",
+            "CloseCustomAppFromAdapter",
+            "OpenCustomApp",
+            "OpenCustomAppFromAdapter",
+            "RemoveCustomApp",
+            "RemoveCustomAppFromAdapter",
+            "SendCustomAppMessage",
+            "SendCustomAppMessageFromAdapter",
+            "SendCustomAppNotification",
+            "SendCustomAppNotificationFromAdapter",
+            "UpdateCustomApp",
+            "UpdateCustomAppFromAdapter",
+        },
+        maximumMessageBytes = Config.CustomApps.MaximumMessageBytes,
+        maximumStorageBytesPerApp = Config.CustomApps.MaximumStorageBytesPerApp,
+        maximumStorageKeyLength = math.min(Config.CustomApps.MaximumStorageKeyLength, 64),
+        maximumStorageValueBytes = math.min(Config.CustomApps.MaximumStorageValueBytes, 65536),
+        protocolVersion = SkyPhoneApps.ProtocolVersion,
+    }
+end
+
+local function set_phone_open(is_open)
+    phone_open = is_open
+    if phone_open then
+        send_catalog()
+        return
+    end
+
+    clear_active_app(true)
+end
+
+local function register_bundled_client_hooks(app_id, hooks)
+    local valid_id, id_error = SkyPhoneApps.ValidateAppId(app_id)
+    if not valid_id then
+        return false, id_error
+    end
+
+    local app = apps_by_id[app_id]
+    if not app then
+        return false, "app_not_found"
+    end
+    if not app.catalog.bundled then
+        return false, "external_app"
+    end
+    if type(hooks) ~= "table" then
+        return false, "invalid_hooks"
+    end
+
+    local normalized_hooks = {}
+    for hook_name, hook in pairs(hooks) do
+        if not HOOK_NAMES[hook_name] or type(hook) ~= "function" then
+            return false, "invalid_hook"
+        end
+        normalized_hooks[hook_name] = hook
+    end
+
+    app.hooks = normalized_hooks
+    return true
+end
+
+SkyPhoneApps.SendCatalog = send_catalog
+SkyPhoneApps.SetPhoneOpen = set_phone_open
+SkyPhoneApps.RegisterClientHooks = register_bundled_client_hooks
+
+if Config.CustomApps.Enabled and Config.CustomApps.BundledApps then
+    local bundled = SkyPhoneApps.GetBundledManifests()
+    for index = 1, #bundled do
+        local registered, register_error = register_app(normalize_bundled_manifest(bundled[index]))
+        if not registered then
+            error(("[sky_phone] Could not register bundled custom app '%s': %s"):format(
+                bundled[index].id,
+                register_error
+            ))
+        end
+    end
+end
+
+local function add_custom_app_export(definition)
+    if type(definition) ~= "table" then
+        return add_custom_app(definition)
+    end
+
+    local provider_markers = 0
+    if definition.id ~= nil then
+        provider_markers = provider_markers + 1
+    end
+    if definition.identifier ~= nil then
+        provider_markers = provider_markers + 1
+    end
+    if definition.key ~= nil then
+        provider_markers = provider_markers + 1
+    end
+    if provider_markers > 1 then
+        return false, "ambiguous_app_provider"
+    end
+    if definition.identifier == nil and definition.key == nil then
+        return add_custom_app(definition)
+    end
+
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+    if not SkyPhoneApps.RegisterCompatibilityExport then
+        return false, "compatibility_not_ready"
+    end
+    return SkyPhoneApps.RegisterCompatibilityExport(owner_resource, definition)
+end
+
+SkyPhoneApps.CompatibilityCore = {
+    Add = add_compatibility_app,
+    Close = close_compatibility_app,
+    CloseActive = close_active_compatibility_app,
+    Open = open_compatibility_app,
+    Remove = remove_compatibility_app,
+    SendMessage = send_compatibility_app_message,
+    Update = update_compatibility_app,
+}
+
+exports("AddCustomApp", add_custom_app_export)
+exports("AddCustomAppFromAdapter", add_custom_app_from_adapter)
+exports("CloseActiveCustomAppFromAdapter", close_active_custom_app_from_adapter)
+exports("CloseCustomApp", close_custom_app)
+exports("CloseCustomAppFromAdapter", close_custom_app_from_adapter)
+exports("GetCustomAppCapabilities", get_custom_app_capabilities)
+exports("OpenCustomApp", open_custom_app)
+exports("OpenCustomAppFromAdapter", open_custom_app_from_adapter)
+exports("RemoveCustomApp", remove_custom_app)
+exports("RemoveCustomAppFromAdapter", remove_custom_app_from_adapter)
+exports("SendCustomAppMessage", send_custom_app_message)
+exports("SendCustomAppMessageFromAdapter", send_custom_app_message_from_adapter)
+exports("SendCustomAppNotification", send_custom_app_notification)
+exports("SendCustomAppNotificationFromAdapter", send_custom_app_notification_from_adapter)
+exports("UpdateCustomApp", update_custom_app)
+exports("UpdateCustomAppFromAdapter", update_custom_app_from_adapter)
+
+RegisterNUICallback("custom-app:lifecycle", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_lifecycle_request" })
+        return
+    end
+
+    local valid_id, id_error = SkyPhoneApps.ValidateAppId(data.appId)
+    if not valid_id then
+        cb({ success = false, error = id_error })
+        return
+    end
+
+    local lifecycle_event = data.event
+    if lifecycle_event ~= "install"
+        and lifecycle_event ~= "open"
+        and lifecycle_event ~= "ready"
+        and lifecycle_event ~= "close"
+    then
+        cb({ success = false, error = "invalid_lifecycle_event" })
+        return
+    end
+
+    local app = apps_by_id[data.appId]
+    if lifecycle_event == "close"
+        and (not phone_open or not app or active_app_id ~= data.appId)
+    then
+        cb({ success = true })
+        return
+    end
+    if not phone_open then
+        cb({ success = false, error = "phone_closed" })
+        return
+    end
+    if not app then
+        cb({ success = false, error = "app_not_found" })
+        return
+    end
+
+    local lifecycle_payload, payload_error = normalize_json_payload(
+        data.data,
+        Config.CustomApps.MaximumMessageBytes
+    )
+    if payload_error then
+        cb({ success = false, error = payload_error })
+        return
+    end
+
+    local hook_success = true
+    if lifecycle_event == "install" then
+        hook_success = invoke_hook(app, "onInstall", lifecycle_payload)
+    elseif lifecycle_event == "open" then
+        if active_app_id and active_app_id ~= data.appId then
+            clear_active_app(true)
+        end
+        active_app_id = data.appId
+        active_app_ready = false
+        queued_messages[data.appId] = {}
+        hook_success = invoke_hook(app, "onOpen", lifecycle_payload)
+    elseif active_app_id ~= data.appId then
+        cb({ success = false, error = "app_not_active" })
+        return
+    elseif lifecycle_event == "ready" then
+        if active_app_ready then
+            cb({ success = true })
+            return
+        end
+        active_app_ready = true
+        local pending = queued_messages[data.appId] or {}
+        queued_messages[data.appId] = {}
+        for index = 1, #pending do
+            deliver_custom_app_message(data.appId, pending[index].payload)
+        end
+        hook_success = invoke_hook(app, "onReady", lifecycle_payload)
+    else
+        hook_success = invoke_hook(app, "onClose", lifecycle_payload)
+        clear_active_app(false)
+    end
+
+    local hook_error = nil
+    if not hook_success then
+        hook_error = "hook_failed"
+    end
+    cb({ success = hook_success, error = hook_error })
+end)
+
+AddEventHandler("onClientResourceStop", function(resource_name)
+    if resource_name == current_resource then
+        return
+    end
+
+    local app_ids = {}
+    local owner_apps = app_ids_by_owner[resource_name]
+    if owner_apps then
+        for app_id in pairs(owner_apps) do
+            app_ids[app_id] = true
+        end
+    end
+
+    local adapter_apps = app_ids_by_adapter[resource_name]
+    if adapter_apps then
+        for app_id in pairs(adapter_apps) do
+            app_ids[app_id] = true
+        end
+    end
+
+    local removed = false
+    for app_id in pairs(app_ids) do
+        local success = remove_registered_app(app_id, false, false)
+        removed = success or removed
+    end
+    if removed then
+        sync_catalog_if_open()
+    end
+end)
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 7162d64..e4e4e53 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -13,7 +13,10 @@ local server_callbacks = {
     "security:change-passcode",
     "security:disable-passcode",
     "device:save",
+    "device:notification-open",
     "notifications:save",
+    "custom-app:storage:get",
+    "custom-app:storage:set",
     "device:factory-reset",
     "account:login",
     "account:register",
@@ -166,6 +169,26 @@ local server_callbacks = {
     "crewlink:create-ping",
     "crewlink:remove-ping",
     "crewlink:live",
+    "companies:list",
+    "companies:get",
+    "companies:my-requests",
+    "companies:get-request",
+    "companies:work-context",
+    "companies:work-queue",
+    "companies:list-members",
+    "companies:create-request",
+    "companies:cancel-request",
+    "companies:send-message",
+    "companies:claim-request",
+    "companies:assign-request",
+    "companies:update-request-status",
+    "companies:update-availability",
+    "companies:update-profile",
+    "companies:update-hours",
+    "companies:update-services",
+    "companies:publish-announcement",
+    "companies:set-call-availability",
+    "companies:call-customer",
     "sim:insert",
     "sim:eject",
     "contacts:list",
@@ -228,6 +251,7 @@ local function send_open_message()
     local payload = device_payload
     payload.lang = Config.Bridge.Locale
     payload.locales = get_locale().Nui
+    SkyPhoneApps.SendCatalog()
     SendNUIMessage({
         type = "app:open",
         data = payload,
@@ -250,6 +274,7 @@ local function close_phone()
     end
 
     is_open = false
+    SkyPhoneApps.SetPhoneOpen(false)
     TriggerEvent("sky_phone:nuiClosed")
     SetNuiFocus(notification_focus or sim_picker_open, notification_focus or sim_picker_open)
     SendNUIMessage({ type = "app:close" })
@@ -293,6 +318,7 @@ end
 RegisterNUICallback("ui:ready", function(_, cb)
     Bridge.Debug("debug", "[sky_phone] NUI reported ready.", { always = true })
     TriggerEvent("sky_phone:client:nuiReady")
+    SkyPhoneApps.SendCatalog()
     if open_requested and device_payload then
         send_open_message()
     end
@@ -312,6 +338,7 @@ RegisterNUICallback("ui:opened", function(_, cb)
     end
 
     is_open = true
+    SkyPhoneApps.SetPhoneOpen(true)
     notification_focus = false
     SetNuiFocus(true, true)
     TriggerEvent("sky_phone:animation:phone", true)
@@ -517,6 +544,18 @@ RegisterNetEvent("sky_phone:marketplace:changed", function(data)
     SendNUIMessage({ type = "marketplace:changed", data = data })
 end)
 
+RegisterNetEvent("sky_phone:companies:changed", function(data)
+    SendNUIMessage({ type = "companies:changed", data = data })
+end)
+
+RegisterNetEvent("sky_phone:companies:notification", function(data)
+    local companies_locale = get_locale().Nui.Apps.companies
+    data.title = companies_locale.name
+    data.text = companies_locale.notifications[data.kind]
+        or companies_locale.notifications.requestUpdated
+    SendNUIMessage({ type = "companies:notification", data = data })
+end)
+
 RegisterNetEvent("sky_phone:fliptok:command-feedback", function(data)
     Bridge.Framework.Notify("FlipTok", data.message, data.notificationType, 5000)
 end)
diff --git a/sky_phone/source/server/calls.lua b/sky_phone/source/server/calls.lua
index e1f7f5b..5ca23c2 100644
--- a/sky_phone/source/server/calls.lua
+++ b/sky_phone/source/server/calls.lua
@@ -8,6 +8,7 @@ local active_by_sim = {}
 local dial_locks = {}
 local dialing_by_sim = {}
 local next_voice_channel = 10000
+local reroute_company_call
 
 local function uuid()
     local rows = Bridge.Database.Query("SELECT UUID() AS `id`", {})
@@ -240,11 +241,17 @@ local function finish_call(call, status)
                 params = { status, duration, call.id },
             },
             {
-                query = "UPDATE `sky_phone_call_entries` SET `status` = ? WHERE `call_id` = ? AND `direction` = 'outgoing'",
+                query = [[
+                    UPDATE `sky_phone_call_entries` SET `status` = ?
+                    WHERE `call_id` = ? AND `direction` = 'outgoing' AND `status` IN ('ringing', 'connected')
+                ]],
                 params = { status, call.id },
             },
             {
-                query = "UPDATE `sky_phone_call_entries` SET `status` = ? WHERE `call_id` = ? AND `direction` = 'incoming'",
+                query = [[
+                    UPDATE `sky_phone_call_entries` SET `status` = ?
+                    WHERE `call_id` = ? AND `direction` = 'incoming' AND `status` IN ('ringing', 'connected')
+                ]],
                 params = { callee_status, call.id },
             },
         })
@@ -281,9 +288,17 @@ end
 
 function SkyPhoneCalls.EndForSim(sim_id, reason)
     local call_id = active_by_sim[sim_id]
-    if call_id then
-        finish_call(calls[call_id], reason or "ended")
+    local call = call_id and calls[call_id] or nil
+    if not call then
+        return
     end
+    if call.callee_sim_id == sim_id and call.company_service_call and not call.answered_at then
+        if not reroute_company_call(call, "missed") then
+            finish_call(call, "unavailable")
+        end
+        return
+    end
+    finish_call(call, reason or "ended")
 end
 
 function SkyPhoneCalls.LinkAccountData(account_id, imei)
@@ -346,7 +361,27 @@ Bridge.Callbacks.Register("sky_phone:contacts:list", function(source)
         SELECT `contact_id` AS `id`, `name`, `phone_number`, `created_at`, `updated_at`
         FROM `sky_phone_contacts` WHERE %s ORDER BY LOWER(`name`), `phone_number`
     ]]):format(condition), params)
-    return { success = true, data = rows }
+    local system_contacts = SkyPhoneCompanies.GetSystemContacts()
+    local system_ids = {}
+    local contacts = {}
+    for _, contact in ipairs(system_contacts) do
+        system_ids[contact.id] = true
+        contacts[#contacts + 1] = contact
+    end
+    for _, contact in ipairs(rows) do
+        if not system_ids[contact.id] and not SkyPhoneCompanies.IsSystemContactNumber(contact.phone_number) then
+            contacts[#contacts + 1] = contact
+        end
+    end
+    table.sort(contacts, function(left, right)
+        local left_name = tostring(left.name):lower()
+        local right_name = tostring(right.name):lower()
+        if left_name == right_name then
+            return tostring(left.phone_number) < tostring(right.phone_number)
+        end
+        return left_name < right_name
+    end)
+    return { success = true, data = contacts }
 end)
 
 Bridge.Callbacks.Register("sky_phone:contacts:save", function(source, data)
@@ -362,6 +397,16 @@ Bridge.Callbacks.Register("sky_phone:contacts:save", function(source, data)
     if not name or name == "" or #name > Config.Calls.ContactNameMaxLength or not number then
         return { success = false, error = "invalid_contact" }
     end
+    if (type(data.id) == "string" and data.id:sub(1, 8) == "company:")
+        or SkyPhoneCompanies.IsSystemContactNumber(number)
+    then
+        Bridge.Debug(
+            "warn",
+            "[sky_phone] Source %s attempted to modify a read-only company contact.",
+            tostring(source)
+        )
+        return { success = false, error = "readonly_contact" }
+    end
     local condition, condition_params = scope_condition(scope)
     local id = type(data.id) == "string" and data.id or uuid()
     if data.id then
@@ -401,6 +446,14 @@ Bridge.Callbacks.Register("sky_phone:contacts:delete", function(source, data)
     if not scope then
         return error_response
     end
+    if data.id:sub(1, 8) == "company:" then
+        Bridge.Debug(
+            "warn",
+            "[sky_phone] Source %s attempted to delete a read-only company contact.",
+            tostring(source)
+        )
+        return { success = false, error = "readonly_contact" }
+    end
     local condition, values = scope_condition(scope)
     local params = { data.id }
     for _, value in ipairs(values) do
@@ -430,13 +483,20 @@ Bridge.Callbacks.Register("sky_phone:calls:recents", function(source)
     return { success = true, data = rows }
 end)
 
-local function create_terminal_call(scope, number, target_sim, status)
+local function create_terminal_call(scope, number, target_sim, status, caller_number)
     local id = uuid()
     Bridge.Database.Query([[
         INSERT INTO `sky_phone_calls`
             (`id`, `caller_sim_id`, `callee_sim_id`, `caller_number`, `callee_number`, `status`, `ended_at`)
         VALUES (?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
-    ]], { id, scope.device.sim_id, target_sim and target_sim.id or nil, scope.device.phone_number, number, status })
+    ]], {
+        id,
+        scope.device.sim_id,
+        target_sim and target_sim.id or nil,
+        caller_number or scope.device.phone_number,
+        number,
+        status,
+    })
     add_call_entry(id, scope.device, "outgoing", status, number)
     notify_recents(scope.device, nil)
     return {
@@ -448,6 +508,329 @@ local function create_terminal_call(scope, number, target_sim, status)
     }
 end
 
+local function company_call_target(company_id, caller_source, caller_sim_id, excluded_sim_ids)
+    local has_busy_target = false
+    for _, candidate in ipairs(SkyPhoneCompanies.GetCallTargets(company_id)) do
+        local candidate_source = tonumber(candidate.source)
+        local candidate_sim_id = candidate.simId
+        local candidate_imei = candidate.imei
+        if candidate_source and type(candidate_sim_id) == "string" and type(candidate_imei) == "string"
+            and candidate_source ~= caller_source and candidate_sim_id ~= caller_sim_id
+            and (not excluded_sim_ids or not excluded_sim_ids[candidate_sim_id])
+        then
+            if active_by_source[candidate_source] or active_by_sim[candidate_sim_id]
+                or dialing_by_sim[candidate_sim_id]
+            then
+                has_busy_target = true
+            else
+                dialing_by_sim[candidate_sim_id] = true
+                local device = SkyPhone.LoadDevice(candidate_imei)
+                local holder = device and find_device_holder(candidate_imei) or nil
+                if not device or device.sim_id ~= candidate_sim_id or holder ~= candidate_source then
+                    dialing_by_sim[candidate_sim_id] = nil
+                elseif SkyPhoneCompanies.IsServiceNumber(device.phone_number) then
+                    dialing_by_sim[candidate_sim_id] = nil
+                    Bridge.Debug(
+                        "error",
+                        "[sky_phone] Company call target %s uses reserved service number %s.",
+                        tostring(candidate_source),
+                        tostring(device.phone_number)
+                    )
+                elseif airplane_mode(candidate_imei) then
+                    dialing_by_sim[candidate_sim_id] = nil
+                else
+                    return {
+                        device = device,
+                        sim_id = candidate_sim_id,
+                        source = candidate_source,
+                    }
+                end
+            end
+        end
+    end
+    return nil, has_busy_target and "busy" or "unavailable"
+end
+
+local handle_no_answer
+
+local function ring_callee(call)
+    SkyPhone.OpenDeviceForCall(call.callee_source, call.callee_device.imei)
+    TriggerClientEvent("sky_phone:call:incoming", call.callee_source, {
+        id = call.id,
+        state = "ringing",
+        direction = "incoming",
+        otherNumber = call.caller_number,
+        startedAt = call.started_at,
+        device = {
+            imei = call.callee_device.imei,
+            name = call.callee_device.device_name,
+        },
+    })
+end
+
+local function schedule_no_answer(call)
+    call.ring_attempt = (call.ring_attempt or 0) + 1
+    local ring_attempt = call.ring_attempt
+    SetTimeout(call.ring_seconds * 1000, function()
+        local active_call = calls[call.id]
+        if active_call and not active_call.answered_at and active_call.ring_attempt == ring_attempt then
+            handle_no_answer(active_call)
+        end
+    end)
+end
+
+local function start_ringing_call(call, ring_seconds)
+    if not call.payphone then
+        Bridge.Database.Query([[
+            INSERT INTO `sky_phone_calls`
+                (`id`, `caller_sim_id`, `callee_sim_id`, `caller_number`, `callee_number`, `status`)
+            VALUES (?, ?, ?, ?, ?, 'ringing')
+        ]], { call.id, call.caller_sim_id, call.callee_sim_id, call.caller_number, call.callee_number })
+        add_call_entry(call.id, call.caller_device, "outgoing", "ringing", call.callee_number)
+        add_call_entry(call.id, call.callee_device, "incoming", "ringing", call.caller_number)
+    end
+
+    calls[call.id] = call
+    active_by_source[call.caller_source] = call.id
+    active_by_source[call.callee_source] = call.id
+    if call.caller_sim_id then
+        active_by_sim[call.caller_sim_id] = call.id
+        dialing_by_sim[call.caller_sim_id] = nil
+    end
+    active_by_sim[call.callee_sim_id] = call.id
+    dialing_by_sim[call.callee_sim_id] = nil
+    dial_locks[call.caller_source] = nil
+
+    send_state(call, call.caller_source, "ringing")
+    if call.payphone then
+        send_payphone_visual(call, "start")
+    end
+    call.ring_seconds = math.max(1, math.floor(tonumber(ring_seconds) or Config.Calls.RingSeconds))
+    ring_callee(call)
+    schedule_no_answer(call)
+
+    local result = {
+        id = call.id,
+        state = "ringing",
+        direction = "outgoing",
+        otherNumber = call.callee_number,
+        startedAt = call.started_at,
+    }
+    if call.payphone then
+        result.elapsedSeconds = 0
+        result.totalCost = 0
+    end
+    return result
+end
+
+reroute_company_call = function(call, previous_status)
+    if not call.company_service_call or call.company_attempts_remaining <= 0 then
+        return false
+    end
+    if call.rerouting then
+        return true
+    end
+    call.rerouting = true
+    local next_target = company_call_target(
+        call.company_id,
+        call.caller_source,
+        call.caller_sim_id,
+        call.company_attempted_sims
+    )
+    if not next_target then
+        call.rerouting = nil
+        return false
+    end
+    if call.ended or calls[call.id] ~= call then
+        dialing_by_sim[next_target.sim_id] = nil
+        call.rerouting = nil
+        return true
+    end
+
+    local previous_source = call.callee_source
+    local previous_sim_id = call.callee_sim_id
+    local previous_device = call.callee_device
+    if not call.payphone then
+        local next_account_id, next_device_imei = scope_for_device(next_target.device)
+        local updated = Bridge.Database.Transaction({
+            {
+                query = "UPDATE `sky_phone_calls` SET `callee_sim_id` = ? WHERE `id` = ? AND `status` = 'ringing'",
+                params = { next_target.sim_id, call.id },
+            },
+            {
+                query = [[
+                    UPDATE `sky_phone_call_entries` SET `status` = ?
+                    WHERE `call_id` = ? AND `direction` = 'incoming' AND `status` = 'ringing'
+                ]],
+                params = { previous_status, call.id },
+            },
+            {
+                query = [[
+                    INSERT INTO `sky_phone_call_entries`
+                        (`call_id`, `account_id`, `device_imei`, `direction`, `status`, `other_number`)
+                    SELECT `id`, ?, ?, 'incoming', 'ringing', ?
+                    FROM `sky_phone_calls`
+                    WHERE `id` = ? AND `status` = 'ringing'
+                ]],
+                params = { next_account_id, next_device_imei, call.caller_number, call.id },
+            },
+        })
+        if not updated then
+            dialing_by_sim[next_target.sim_id] = nil
+            call.rerouting = nil
+            Bridge.Debug(
+                "error",
+                "[sky_phone] Could not reroute company call %s to the next target.",
+                tostring(call.id)
+            )
+            return false
+        end
+        if call.ended or calls[call.id] ~= call then
+            dialing_by_sim[next_target.sim_id] = nil
+            call.rerouting = nil
+            return true
+        end
+    end
+
+    send_state(call, previous_source, previous_status)
+    if active_by_source[previous_source] == call.id then
+        active_by_source[previous_source] = nil
+    end
+    if active_by_sim[previous_sim_id] == call.id then
+        active_by_sim[previous_sim_id] = nil
+    end
+    if not call.payphone then
+        notify_recents(previous_device, previous_source)
+    end
+    if call.ended or calls[call.id] ~= call then
+        dialing_by_sim[next_target.sim_id] = nil
+        call.rerouting = nil
+        return true
+    end
+
+    call.callee_source = next_target.source
+    call.callee_sim_id = next_target.sim_id
+    call.callee_device = next_target.device
+    call.company_attempted_sims[next_target.sim_id] = true
+    call.company_attempts_remaining = call.company_attempts_remaining - 1
+    active_by_source[call.callee_source] = call.id
+    active_by_sim[call.callee_sim_id] = call.id
+    dialing_by_sim[call.callee_sim_id] = nil
+    call.rerouting = nil
+    ring_callee(call)
+    schedule_no_answer(call)
+    return true
+end
+
+handle_no_answer = function(call)
+    if not reroute_company_call(call, "missed") then
+        finish_call(call, "no_answer")
+    end
+end
+
+local function lock_direct_target(caller_source, target)
+    if not target or not target.imei then
+        return nil, "unavailable"
+    end
+    local callee_source = find_device_holder(target.imei)
+    if not callee_source or callee_source == caller_source then
+        return nil, "unavailable"
+    end
+    if active_by_source[callee_source] or active_by_sim[target.id] or dialing_by_sim[target.id] then
+        return nil, "busy"
+    end
+    dialing_by_sim[target.id] = true
+    if airplane_mode(target.imei) then
+        dialing_by_sim[target.id] = nil
+        return nil, "unavailable"
+    end
+    return callee_source
+end
+
+function SkyPhoneCalls.StartCompanyCall(source, company_id, customer_number)
+    source = tonumber(source)
+    if not source or type(company_id) ~= "string" then
+        return { success = false, error = "invalid_request" }
+    end
+    if not SkyPhoneCompanies.CanPlaceCompanyCall(source, company_id) then
+        return { success = false, error = "not_authorized" }
+    end
+    if not SkyPhone.AllowOperation(source, "company_call_customer", 15, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    if dial_locks[source] then
+        return { success = false, error = "busy" }
+    end
+
+    local service_line = SkyPhoneCompanies.GetServiceLineForCompany(company_id)
+    if not service_line or not service_line.canCall then
+        return { success = false, error = "company_unavailable" }
+    end
+    local scope, error_response = current_scope(source)
+    if not scope then
+        return error_response
+    end
+    if not scope.device.sim_id then
+        return { success = false, error = "no_sim" }
+    end
+    if SkyPhoneCompanies.IsServiceNumber(scope.device.phone_number) then
+        Bridge.Debug(
+            "error",
+            "[sky_phone] Source %s attempted to call from a SIM using reserved service number %s.",
+            tostring(source),
+            tostring(scope.device.phone_number)
+        )
+        return { success = false, error = "invalid_sim" }
+    end
+    if airplane_mode(scope.device.imei) then
+        return { success = false, error = "airplane_mode" }
+    end
+
+    local number = SkyPhoneSimNumber.Normalize(customer_number, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
+    if not number or SkyPhoneCompanies.IsServiceNumber(number) then
+        return { success = false, error = "invalid_number" }
+    end
+    if number == scope.device.phone_number then
+        return { success = false, error = "self_call" }
+    end
+    if active_by_source[source] or active_by_sim[scope.device.sim_id] or dialing_by_sim[scope.device.sim_id] then
+        return { success = false, error = "busy" }
+    end
+
+    dial_locks[source] = true
+    dialing_by_sim[scope.device.sim_id] = true
+    local targets = Bridge.Database.Query([[
+        SELECT s.`id`, s.`phone_number`, d.`imei`, d.`account_id`, d.`device_name`
+        FROM `sky_phone_sims` s LEFT JOIN `sky_phone_devices` d ON d.`sim_id` = s.`id`
+        WHERE s.`phone_number` = ? LIMIT 1
+    ]], { number })
+    local target = targets[1]
+    local callee_source, target_status = lock_direct_target(source, target)
+    if not callee_source then
+        local terminal = create_terminal_call(scope, number, target, target_status, service_line.number)
+        dialing_by_sim[scope.device.sim_id] = nil
+        dial_locks[source] = nil
+        return { success = true, data = terminal }
+    end
+
+    return {
+        success = true,
+        data = start_ringing_call({
+            id = uuid(),
+            caller_source = source,
+            caller_sim_id = scope.device.sim_id,
+            caller_number = service_line.number,
+            caller_device = scope.device,
+            callee_source = callee_source,
+            callee_sim_id = target.id,
+            callee_number = number,
+            callee_device = target,
+            company_id = company_id,
+            started_at = os.time(),
+        }, Config.Calls.RingSeconds),
+    }
+end
+
 Bridge.Callbacks.Register("sky_phone:calls:dial", function(source, data)
     if not SkyPhone.AllowOperation(source, "call_dial", 15, 60) then
         return { success = false, error = "rate_limited" }
@@ -468,6 +851,16 @@ Bridge.Callbacks.Register("sky_phone:calls:dial", function(source, data)
         dial_locks[source] = nil
         return { success = false, error = "no_sim" }
     end
+    if SkyPhoneCompanies.IsServiceNumber(scope.device.phone_number) then
+        Bridge.Debug(
+            "error",
+            "[sky_phone] Source %s attempted to call from a SIM using reserved service number %s.",
+            tostring(source),
+            tostring(scope.device.phone_number)
+        )
+        dial_locks[source] = nil
+        return { success = false, error = "invalid_sim" }
+    end
     if airplane_mode(scope.device.imei) then
         dial_locks[source] = nil
         return { success = false, error = "airplane_mode" }
@@ -486,80 +879,78 @@ Bridge.Callbacks.Register("sky_phone:calls:dial", function(source, data)
         return { success = false, error = "busy" }
     end
     dialing_by_sim[scope.device.sim_id] = true
+    local service_line = SkyPhoneCompanies.GetServiceLine(number)
+    if service_line then
+        if not service_line.canCall then
+            local terminal = create_terminal_call(scope, number, nil, "unavailable")
+            dialing_by_sim[scope.device.sim_id] = nil
+            dial_locks[source] = nil
+            return { success = true, data = terminal }
+        end
+        local company_target, target_status = company_call_target(
+            service_line.companyId,
+            source,
+            scope.device.sim_id
+        )
+        if not company_target then
+            local terminal = create_terminal_call(scope, number, nil, target_status)
+            dialing_by_sim[scope.device.sim_id] = nil
+            dial_locks[source] = nil
+            return { success = true, data = terminal }
+        end
+        return {
+            success = true,
+            data = start_ringing_call({
+                id = uuid(),
+                caller_source = source,
+                caller_sim_id = scope.device.sim_id,
+                caller_number = scope.device.phone_number,
+                caller_device = scope.device,
+                callee_source = company_target.source,
+                callee_sim_id = company_target.sim_id,
+                callee_number = service_line.number,
+                callee_device = company_target.device,
+                company_id = service_line.companyId,
+                company_service_call = service_line.routing == "round_robin",
+                company_attempted_sims = { [company_target.sim_id] = true },
+                company_attempts_remaining = math.max(
+                    0,
+                    math.floor(tonumber(Config.Companies.CallRouting.MaxAttempts) or 1) - 1
+                ),
+                started_at = os.time(),
+            }, Config.Companies.CallRouting.RingSeconds),
+        }
+    end
+
     local targets = Bridge.Database.Query([[
         SELECT s.`id`, s.`phone_number`, d.`imei`, d.`account_id`, d.`device_name`
         FROM `sky_phone_sims` s LEFT JOIN `sky_phone_devices` d ON d.`sim_id` = s.`id`
         WHERE s.`phone_number` = ? LIMIT 1
     ]], { number })
     local target = targets[1]
-    if not target or not target.imei then
-        local terminal = create_terminal_call(scope, number, target, "unavailable")
+    local callee_source, target_status = lock_direct_target(source, target)
+    if not callee_source then
+        local terminal = create_terminal_call(scope, number, target, target_status)
         dialing_by_sim[scope.device.sim_id] = nil
         dial_locks[source] = nil
         return { success = true, data = terminal }
     end
-    local callee_source = find_device_holder(target.imei)
-    if not callee_source or airplane_mode(target.imei) then
-        local terminal = create_terminal_call(scope, number, target, "unavailable")
-        dialing_by_sim[scope.device.sim_id] = nil
-        dial_locks[source] = nil
-        return { success = true, data = terminal }
-    end
-    if active_by_source[callee_source] or active_by_sim[target.id] or dialing_by_sim[target.id] then
-        local terminal = create_terminal_call(scope, number, target, "busy")
-        dialing_by_sim[scope.device.sim_id] = nil
-        dial_locks[source] = nil
-        return { success = true, data = terminal }
-    end
-    dialing_by_sim[target.id] = true
 
-    local id = uuid()
-    local call = {
-        id = id,
-        caller_source = source,
-        caller_sim_id = scope.device.sim_id,
-        caller_number = scope.device.phone_number,
-        caller_device = scope.device,
-        callee_source = callee_source,
-        callee_sim_id = target.id,
-        callee_number = number,
-        callee_device = target,
-        started_at = os.time(),
+    return {
+        success = true,
+        data = start_ringing_call({
+            id = uuid(),
+            caller_source = source,
+            caller_sim_id = scope.device.sim_id,
+            caller_number = scope.device.phone_number,
+            caller_device = scope.device,
+            callee_source = callee_source,
+            callee_sim_id = target.id,
+            callee_number = number,
+            callee_device = target,
+            started_at = os.time(),
+        }, Config.Calls.RingSeconds),
     }
-    Bridge.Database.Query([[
-        INSERT INTO `sky_phone_calls`
-            (`id`, `caller_sim_id`, `callee_sim_id`, `caller_number`, `callee_number`, `status`)
-        VALUES (?, ?, ?, ?, ?, 'ringing')
-    ]], { id, call.caller_sim_id, call.callee_sim_id, call.caller_number, call.callee_number })
-    add_call_entry(id, scope.device, "outgoing", "ringing", number)
-    add_call_entry(id, target, "incoming", "ringing", call.caller_number)
-    calls[id] = call
-    active_by_source[source] = id
-    active_by_source[callee_source] = id
-    active_by_sim[call.caller_sim_id] = id
-    active_by_sim[call.callee_sim_id] = id
-    dialing_by_sim[call.caller_sim_id] = nil
-    dialing_by_sim[call.callee_sim_id] = nil
-    dial_locks[source] = nil
-    send_state(call, source, "ringing")
-    SkyPhone.OpenDeviceForCall(callee_source, target.imei)
-    TriggerClientEvent("sky_phone:call:incoming", callee_source, {
-        id = id,
-        state = "ringing",
-        direction = "incoming",
-        otherNumber = call.caller_number,
-        startedAt = call.started_at,
-        device = {
-            imei = target.imei,
-            name = target.device_name,
-        },
-    })
-    SetTimeout(Config.Calls.RingSeconds * 1000, function()
-        if calls[id] and not calls[id].answered_at then
-            finish_call(calls[id], "no_answer")
-        end
-    end)
-    return { success = true, data = { id = id, state = "ringing", direction = "outgoing", otherNumber = number, startedAt = call.started_at } }
 end)
 
 local payphone_models = {}
@@ -626,89 +1017,96 @@ Bridge.Callbacks.Register("sky_phone:payphone:dial", function(source, data)
     end
 
     dial_locks[source] = true
+    local service_line = SkyPhoneCompanies.GetServiceLine(number)
+    if service_line then
+        if not service_line.canCall then
+            dial_locks[source] = nil
+            return { success = true, data = payphone_terminal(number, "unavailable") }
+        end
+        local company_target, target_status = company_call_target(service_line.companyId, source, nil)
+        if not company_target then
+            dial_locks[source] = nil
+            return { success = true, data = payphone_terminal(number, target_status) }
+        end
+        return {
+            success = true,
+            data = start_ringing_call({
+                id = uuid(),
+                caller_source = source,
+                caller_number = Config.Payphones.CallerNumber,
+                callee_source = company_target.source,
+                callee_sim_id = company_target.sim_id,
+                callee_number = service_line.number,
+                callee_device = company_target.device,
+                company_id = service_line.companyId,
+                company_service_call = service_line.routing == "round_robin",
+                company_attempted_sims = { [company_target.sim_id] = true },
+                company_attempts_remaining = math.max(
+                    0,
+                    math.floor(tonumber(Config.Companies.CallRouting.MaxAttempts) or 1) - 1
+                ),
+                started_at = os.time(),
+                payphone = {
+                    elapsed_seconds = 0,
+                    total_cost = 0,
+                    coords = booth_coords,
+                    model = booth_model,
+                    price_per_second = price_per_second,
+                    routing_bucket = GetPlayerRoutingBucket(source),
+                },
+            }, Config.Companies.CallRouting.RingSeconds),
+        }
+    end
+
     local targets = Bridge.Database.Query([[
         SELECT s.`id`, s.`phone_number`, d.`imei`, d.`account_id`, d.`device_name`
         FROM `sky_phone_sims` s LEFT JOIN `sky_phone_devices` d ON d.`sim_id` = s.`id`
         WHERE s.`phone_number` = ? LIMIT 1
     ]], { number })
     local target = targets[1]
-    if not target or not target.imei then
+    local callee_source, target_status = lock_direct_target(source, target)
+    if not callee_source then
         dial_locks[source] = nil
-        return { success = true, data = payphone_terminal(number, "unavailable") }
+        return { success = true, data = payphone_terminal(number, target_status) }
     end
-    local callee_source = find_device_holder(target.imei)
-    if not callee_source or callee_source == source or airplane_mode(target.imei) then
-        dial_locks[source] = nil
-        return { success = true, data = payphone_terminal(number, "unavailable") }
-    end
-    if active_by_source[callee_source] or active_by_sim[target.id] or dialing_by_sim[target.id] then
-        dial_locks[source] = nil
-        return { success = true, data = payphone_terminal(number, "busy") }
-    end
-    dialing_by_sim[target.id] = true
 
-    local id = uuid()
-    local call = {
-        id = id,
-        caller_source = source,
-        caller_number = Config.Payphones.CallerNumber,
-        callee_source = callee_source,
-        callee_sim_id = target.id,
-        callee_number = number,
-        callee_device = target,
-        started_at = os.time(),
-        payphone = {
-            elapsed_seconds = 0,
-            total_cost = 0,
-            coords = booth_coords,
-            model = booth_model,
-            price_per_second = price_per_second,
-            routing_bucket = GetPlayerRoutingBucket(source),
-        },
-    }
-    calls[id] = call
-    active_by_source[source] = id
-    active_by_source[callee_source] = id
-    active_by_sim[target.id] = id
-    dialing_by_sim[target.id] = nil
-    dial_locks[source] = nil
-
-    send_state(call, source, "ringing")
-    send_payphone_visual(call, "start")
-    SkyPhone.OpenDeviceForCall(callee_source, target.imei)
-    TriggerClientEvent("sky_phone:call:incoming", callee_source, {
-        id = id,
-        state = "ringing",
-        direction = "incoming",
-        otherNumber = call.caller_number,
-        startedAt = call.started_at,
-        device = {
-            imei = target.imei,
-            name = target.device_name,
-        },
-    })
-    SetTimeout(math.max(1, math.floor(tonumber(Config.Payphones.NoAnswerTimeoutSeconds) or 30)) * 1000, function()
-        if calls[id] and not calls[id].answered_at then
-            finish_call(calls[id], "no_answer")
-        end
-    end)
     return {
         success = true,
-        data = {
-            id = id,
-            state = "ringing",
-            direction = "outgoing",
-            otherNumber = number,
-            startedAt = call.started_at,
-            elapsedSeconds = 0,
-            totalCost = 0,
-        },
+        data = start_ringing_call({
+            id = uuid(),
+            caller_source = source,
+            caller_number = Config.Payphones.CallerNumber,
+            callee_source = callee_source,
+            callee_sim_id = target.id,
+            callee_number = number,
+            callee_device = target,
+            started_at = os.time(),
+            payphone = {
+                elapsed_seconds = 0,
+                total_cost = 0,
+                coords = booth_coords,
+                model = booth_model,
+                price_per_second = price_per_second,
+                routing_bucket = GetPlayerRoutingBucket(source),
+            },
+        }, Config.Payphones.NoAnswerTimeoutSeconds),
     }
 end)
 
 Bridge.Callbacks.Register("sky_phone:calls:answer", function(source, data)
     local call = type(data) == "table" and calls[data.id] or nil
-    if not call or call.callee_source ~= source or call.answered_at then
+    if not call or call.callee_source ~= source or call.answered_at or call.rerouting then
+        return { success = false, error = "call_not_found" }
+    end
+    if call.company_service_call and not SkyPhoneCompanies.CanAnswerCompanyCall(
+        source,
+        call.company_id,
+        call.callee_device.imei,
+        call.callee_sim_id
+    ) then
+        if not reroute_company_call(call, "missed") then
+            finish_call(call, "unavailable")
+        end
         return { success = false, error = "call_not_found" }
     end
     if not SkyPhone.FindDeviceSlots(source, call.callee_device.imei)[1] then
@@ -722,8 +1120,17 @@ Bridge.Callbacks.Register("sky_phone:calls:answer", function(source, data)
     call.channel = next_voice_channel
     next_voice_channel = next_voice_channel + 1
     if not call.payphone then
-        Bridge.Database.Query("UPDATE `sky_phone_calls` SET `status` = 'connected', `answered_at` = CURRENT_TIMESTAMP WHERE `id` = ?", { call.id })
-        Bridge.Database.Query("UPDATE `sky_phone_call_entries` SET `status` = 'connected' WHERE `call_id` = ?", { call.id })
+        Bridge.Database.Query([[
+            UPDATE `sky_phone_calls` SET `status` = 'connected', `answered_at` = CURRENT_TIMESTAMP
+            WHERE `id` = ? AND `status` = 'ringing'
+        ]], { call.id })
+        Bridge.Database.Query([[
+            UPDATE `sky_phone_call_entries` SET `status` = 'connected'
+            WHERE `call_id` = ? AND `status` = 'ringing'
+        ]], { call.id })
+    end
+    if call.ended or calls[call.id] ~= call then
+        return { success = false, error = "call_not_found" }
     end
     send_state(call, call.caller_source, "connected", call.channel)
     send_state(call, call.callee_source, "connected", call.channel)
@@ -732,10 +1139,12 @@ end)
 
 Bridge.Callbacks.Register("sky_phone:calls:decline", function(source, data)
     local call = type(data) == "table" and calls[data.id] or nil
-    if not call or call.callee_source ~= source or call.answered_at then
+    if not call or call.callee_source ~= source or call.answered_at or call.rerouting then
         return { success = false, error = "call_not_found" }
     end
-    finish_call(call, "declined")
+    if not reroute_company_call(call, "declined") then
+        finish_call(call, "declined")
+    end
     return { success = true }
 end)
 
@@ -747,6 +1156,15 @@ Bridge.Callbacks.Register("sky_phone:calls:hangup", function(source, data)
     then
         return { success = false, error = "call_not_found" }
     end
+    if call.company_service_call and not call.answered_at and call.callee_source == source then
+        if call.rerouting then
+            return { success = false, error = "call_not_found" }
+        end
+        if not reroute_company_call(call, "declined") then
+            finish_call(call, "declined")
+        end
+        return { success = true }
+    end
     finish_call(call, call.answered_at and "completed" or "cancelled")
     return { success = true }
 end)
@@ -781,8 +1199,16 @@ CreateThread(function()
             end
             local callee_valid = not call.callee_source
                 or SkyPhone.FindDeviceSlots(call.callee_source, call.callee_device.imei)[1] ~= nil
-            if not caller_valid or not callee_valid then
+            if not caller_valid then
                 calls_to_finish[call_id] = "disconnected"
+            elseif not callee_valid then
+                if call.company_service_call and not call.answered_at then
+                    if not reroute_company_call(call, "missed") then
+                        calls_to_finish[call_id] = "unavailable"
+                    end
+                else
+                    calls_to_finish[call_id] = "disconnected"
+                end
             elseif call.payphone and call.answered_at and not call.ended then
                 local elapsed_seconds = math.max(0, os.time() - call.answered_at)
                 local total_cost = elapsed_seconds * call.payphone.price_per_second
@@ -806,9 +1232,17 @@ end)
 
 AddEventHandler("playerDropped", function()
     local call_id = active_by_source[source]
-    if call_id then
-        finish_call(calls[call_id], "disconnected")
+    local call = call_id and calls[call_id] or nil
+    if not call then
+        return
     end
+    if call.callee_source == source and call.company_service_call and not call.answered_at then
+        if not reroute_company_call(call, "missed") then
+            finish_call(call, "unavailable")
+        end
+        return
+    end
+    finish_call(call, "disconnected")
 end)
 
 AddEventHandler("onResourceStop", function(resource_name)
diff --git a/sky_phone/source/server/companies.lua b/sky_phone/source/server/companies.lua
new file mode 100644
index 0000000..3a18a55
--- /dev/null
+++ b/sky_phone/source/server/companies.lua
@@ -0,0 +1,3028 @@
+Bridge.Database.AfterMigration("sky_phone", function()
+SkyPhoneCompanies = {}
+
+local definitions = {}
+local definition_ids = {}
+local definitions_by_job = {}
+local service_lines_by_number = {}
+local call_availability = {}
+local round_robin_positions = {}
+local member_tokens = {}
+local terminal_statuses = {
+    completed = true,
+    cancelled = true,
+}
+local status_transitions = {
+    new = { cancelled = true },
+    assigned = { in_progress = true, cancelled = true },
+    in_progress = { waiting_customer = true, completed = true, cancelled = true },
+    waiting_customer = { in_progress = true, cancelled = true },
+}
+
+local function uuid()
+    local rows = Bridge.Database.Query("SELECT UUID() AS `id`", {})
+    if not rows[1] or type(rows[1].id) ~= "string" then
+        error("[sky_phone] Database did not generate a Companies UUID.")
+    end
+    return rows[1].id
+end
+
+local function trim(value)
+    if type(value) ~= "string" then
+        return nil
+    end
+    return value:match("^%s*(.-)%s*$")
+end
+
+local function valid_text(value, maximum, allow_empty)
+    local text = trim(value)
+    if not text or text:find("%z") then
+        return nil
+    end
+    local length = utf8.len(text)
+    if not length or length > maximum or (not allow_empty and length == 0) then
+        return nil
+    end
+    return text
+end
+
+local function valid_integer(value, minimum, maximum)
+    local number = tonumber(value)
+    if not number or number ~= number or number < minimum or number > maximum
+        or number ~= math.floor(number)
+    then
+        return nil
+    end
+    return number
+end
+
+local function valid_uuid(value)
+    return type(value) == "string"
+        and value:match("^%x%x%x%x%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%x%x%x%x%x%x%x%x$") ~= nil
+end
+
+local function valid_service_id(value)
+    return type(value) == "string"
+        and #value >= 1
+        and #value <= 64
+        and value:match("^[%w_-]+$") ~= nil
+end
+
+local function valid_array(value, maximum)
+    if type(value) ~= "table" or #value > maximum then
+        return false
+    end
+    local count = 0
+    for key in pairs(value) do
+        if type(key) ~= "number" or key < 1 or key ~= math.floor(key) or key > #value then
+            return false
+        end
+        count = count + 1
+    end
+    return count == #value
+end
+
+local function iso_time(value)
+    local seconds = tonumber(value)
+    if not seconds or seconds <= 0 then
+        return nil
+    end
+    return os.date("!%Y-%m-%dT%H:%M:%SZ", seconds)
+end
+
+local function days_from_civil(year, month, day)
+    year = year - (month <= 2 and 1 or 0)
+    local era = math.floor(year / 400)
+    local year_of_era = year - era * 400
+    local adjusted_month = month + (month > 2 and -3 or 9)
+    local day_of_year = math.floor((153 * adjusted_month + 2) / 5) + day - 1
+    local day_of_era = year_of_era * 365 + math.floor(year_of_era / 4)
+        - math.floor(year_of_era / 100) + day_of_year
+    return era * 146097 + day_of_era - 719468
+end
+
+local function utc_epoch(year, month, day, hour, minute, second)
+    if year < 1970 or year > 2100 or month < 1 or month > 12
+        or day < 1 or hour < 0 or hour > 23 or minute < 0 or minute > 59
+        or second < 0 or second > 59
+    then
+        return nil
+    end
+    local month_lengths = { 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 }
+    if year % 400 == 0 or (year % 4 == 0 and year % 100 ~= 0) then
+        month_lengths[2] = 29
+    end
+    if day > month_lengths[month] then
+        return nil
+    end
+    return days_from_civil(year, month, day) * 86400 + hour * 3600 + minute * 60 + second
+end
+
+local function parse_expiry(value, maximum_seconds)
+    if value == nil or value == "" then
+        return nil
+    end
+    if type(value) ~= "string" or #value > 40 then
+        return false
+    end
+    local year, month, day, hour, minute, second = value:match(
+        "^(%d%d%d%d)%-(%d%d)%-(%d%d)T(%d%d):(%d%d):(%d%d)Z$"
+    )
+    if not year then
+        year, month, day, hour, minute, second = value:match(
+            "^(%d%d%d%d)%-(%d%d)%-(%d%d)T(%d%d):(%d%d):(%d%d)%.%d+Z$"
+        )
+    end
+    if not year then
+        return false
+    end
+    local epoch = utc_epoch(
+        tonumber(year),
+        tonumber(month),
+        tonumber(day),
+        tonumber(hour),
+        tonumber(minute),
+        tonumber(second)
+    )
+    local now = os.time()
+    if not epoch or epoch <= now or epoch - now > maximum_seconds then
+        return false
+    end
+    return epoch
+end
+
+local function permission_grade(definition, permission)
+    local grade = definition.Permissions and tonumber(definition.Permissions[permission])
+    return grade and math.max(0, math.floor(grade)) or nil
+end
+
+local function validate_configuration()
+    if type(Config.Companies) ~= "table" or type(Config.Companies.Definitions) ~= "table" then
+        error("[sky_phone] Config.Companies.Definitions must be configured.")
+    end
+    if type(Config.Companies.Enabled) ~= "boolean" then
+        error("[sky_phone] Config.Companies.Enabled must be a boolean.")
+    end
+    for _, field in ipairs({
+        { "PageSize", 1000 },
+        { "MaximumPageSize", 1000 },
+        { "MaximumOpenRequestsPerSim", 1000 },
+        { "MaximumServices", 255 },
+        { "MaximumRequestMedia", 255 },
+        { "SubjectMaxLength", 120 },
+        { "RequestBodyMaxLength", 2000 },
+        { "MessageMaxLength", 2000 },
+        { "ProfileDescriptionMaxLength", 1000 },
+        { "DistrictMaxLength", 80 },
+        { "AddressMaxLength", 160 },
+        { "ServiceTitleMaxLength", 80 },
+        { "ServiceDescriptionMaxLength", 500 },
+        { "ServicePriceMaxLength", 80 },
+        { "AnnouncementTitleMaxLength", 120 },
+        { "AnnouncementBodyMaxLength", 1000 },
+        { "AvailabilityMaximumSeconds", 31536000 },
+        { "AnnouncementMaximumSeconds", 31536000 },
+        { "RetentionDays", 36500 },
+    }) do
+        if not valid_integer(Config.Companies[field[1]], 1, field[2]) then
+            error(("[sky_phone] Config.Companies.%s is outside its supported range."):format(field[1]))
+        end
+    end
+    if Config.Companies.PageSize > Config.Companies.MaximumPageSize then
+        error("[sky_phone] Companies PageSize cannot exceed MaximumPageSize.")
+    end
+    if type(Config.Companies.RateLimits) ~= "table" then
+        error("[sky_phone] Config.Companies.RateLimits must be configured.")
+    end
+    for _, name in ipairs({ "Read", "Search", "CreateRequest", "Message", "RequestAction", "Profile", "CallAvailability" }) do
+        if not valid_integer(Config.Companies.RateLimits[name], 1, 100000) then
+            error(("[sky_phone] Companies rate limit '%s' is invalid."):format(name))
+        end
+    end
+    if type(Config.Companies.CallRouting) ~= "table"
+        or not valid_integer(Config.Companies.CallRouting.MaxAttempts, 1, 20)
+        or not valid_integer(Config.Companies.CallRouting.RingSeconds, 1, 120)
+    then
+        error("[sky_phone] Config.Companies.CallRouting is invalid.")
+    end
+    local configured_statuses = {
+        new = true,
+        assigned = true,
+        in_progress = true,
+        waiting_customer = true,
+        completed = true,
+        cancelled = true,
+    }
+    if type(Config.Companies.Statuses) ~= "table" then
+        error("[sky_phone] Config.Companies.Statuses must be configured.")
+    end
+    for status in pairs(configured_statuses) do
+        if Config.Companies.Statuses[status] ~= true then
+            error(("[sky_phone] Companies status '%s' must be enabled."):format(status))
+        end
+    end
+    for status, enabled in pairs(Config.Companies.Statuses) do
+        if not configured_statuses[status] or enabled ~= true then
+            error(("[sky_phone] Companies status '%s' is unsupported."):format(tostring(status)))
+        end
+    end
+    if type(Config.Companies.AvailabilityStatuses) ~= "table" then
+        error("[sky_phone] Config.Companies.AvailabilityStatuses must be configured.")
+    end
+    local configured_availability = { available = true, busy = true, closed = true }
+    for _, status in ipairs({ "available", "busy", "closed" }) do
+        if Config.Companies.AvailabilityStatuses[status] ~= true then
+            error(("[sky_phone] Companies availability status '%s' must be enabled."):format(status))
+        end
+    end
+    for status, enabled in pairs(Config.Companies.AvailabilityStatuses) do
+        if not configured_availability[status] or enabled ~= true then
+            error(("[sky_phone] Companies availability status '%s' is unsupported."):format(tostring(status)))
+        end
+    end
+    if not valid_array(Config.Companies.Categories, 100) then
+        error("[sky_phone] Config.Companies.Categories must be a bounded array.")
+    end
+    local category_ids = {}
+    local configured_service_ids = {}
+    for _, category_id in ipairs(Config.Companies.Categories) do
+        if type(category_id) ~= "string" or #category_id > 64
+            or not category_id:match("^[a-z0-9_-]+$") or category_ids[category_id]
+        then
+            error("[sky_phone] Companies contains an invalid category ID.")
+        end
+        category_ids[category_id] = true
+    end
+
+    for company_id, definition in pairs(Config.Companies.Definitions) do
+        if type(company_id) ~= "string" or #company_id > 64 or not company_id:match("^[a-z0-9_-]+$")
+            or type(definition) ~= "table"
+            or type(definition.Job) ~= "string" or #definition.Job > 64
+            or not definition.Job:match("^[%w_-]+$")
+            or not valid_text(definition.Name, 120, false)
+            or not category_ids[definition.Category]
+        then
+            error(("[sky_phone] Company definition '%s' is invalid."):format(tostring(company_id)))
+        end
+        local description = valid_text(definition.Description or "", Config.Companies.ProfileDescriptionMaxLength, true)
+        local district = valid_text(definition.District or "", Config.Companies.DistrictMaxLength, true)
+        local location_label = valid_text(
+            definition.LocationLabel or definition.Address or "",
+            Config.Companies.DistrictMaxLength,
+            true
+        )
+        local address = valid_text(definition.Address or "", Config.Companies.AddressMaxLength, true)
+        if not description or not district or not location_label or not address
+            or type(definition.Public) ~= "boolean" or type(definition.Emergency) ~= "boolean"
+            or type(definition.Verified) ~= "boolean" or type(definition.AcceptsRequests) ~= "boolean"
+            or not Config.Companies.AvailabilityStatuses[definition.DefaultAvailability]
+            or not valid_text(definition.Icon, 64, false)
+            or (definition.Emergency and definition.AcceptsRequests)
+        then
+            error(("[sky_phone] Company definition '%s' has invalid public profile defaults."):format(company_id))
+        end
+        definition.Name = trim(definition.Name)
+        definition.Description = description
+        definition.District = district
+        definition.LocationLabel = location_label
+        definition.Address = address
+        if definition.Location ~= nil then
+            local location_type = type(definition.Location)
+            if location_type ~= "table" and location_type ~= "vector3" then
+                error(("[sky_phone] Company definition '%s' has invalid location coordinates."):format(company_id))
+            end
+            local x = tonumber(definition.Location.x)
+            local y = tonumber(definition.Location.y)
+            local z = tonumber(definition.Location.z)
+            if not x or not y or not z or x ~= x or y ~= y or z ~= z
+                or math.abs(x) > 10000 or math.abs(y) > 10000 or math.abs(z) > 2000
+            then
+                error(("[sky_phone] Company definition '%s' has invalid location coordinates."):format(company_id))
+            end
+        end
+        if definitions_by_job[definition.Job] then
+            error(("[sky_phone] Framework job '%s' is assigned to more than one company."):format(definition.Job))
+        end
+        local line = definition.ServiceLine
+        if type(line) ~= "table" then
+            error(("[sky_phone] Company '%s' has no service line configuration."):format(company_id))
+        end
+        local number = SkyPhoneSimNumber.Normalize(line.Number, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
+        if not number then
+            error(("[sky_phone] Company '%s' has an invalid service number."):format(company_id))
+        end
+        if service_lines_by_number[number] then
+            error(("[sky_phone] Service number '%s' is assigned more than once."):format(number))
+        end
+        if type(line.AutoContact) ~= "boolean" or type(line.CanCall) ~= "boolean"
+            or type(line.CanMessage) ~= "boolean"
+            or not valid_integer(line.MinimumGrade, 0, 10000)
+        then
+            error(("[sky_phone] Company '%s' has invalid service line flags or grade."):format(company_id))
+        end
+        if line.AutoContact and not definition.Public then
+            error(("[sky_phone] Private company '%s' cannot create a public system contact."):format(company_id))
+        end
+        if line.Routing ~= "round_robin" then
+            error(("[sky_phone] Company '%s' uses unsupported call routing '%s'."):format(company_id, tostring(line.Routing)))
+        end
+        if line.CanMessage then
+            error(("[sky_phone] Company '%s' enables messaging without a virtual service-line message router."):format(company_id))
+        end
+        line.Number = number
+        definitions[company_id] = definition
+        definition_ids[#definition_ids + 1] = company_id
+        definitions_by_job[definition.Job] = company_id
+        service_lines_by_number[number] = company_id
+        for _, permission in ipairs({ "WorkQueue", "Availability", "Assign", "Profile", "Hours", "Services", "Announcement" }) do
+            if not definition.Permissions or not valid_integer(definition.Permissions[permission], 0, 10000) then
+                error(("[sky_phone] Company '%s' has no valid '%s' grade."):format(company_id, permission))
+            end
+        end
+        local default_services = definition.Services
+        if default_services == nil then
+            default_services = {}
+            definition.Services = default_services
+        end
+        if not valid_array(default_services, Config.Companies.MaximumServices) then
+            error(("[sky_phone] Company '%s' has an invalid default service list."):format(company_id))
+        end
+        for _, service in ipairs(default_services) do
+            if type(service) ~= "table" then
+                error(("[sky_phone] Company '%s' has an invalid default service."):format(company_id))
+            end
+            local title = valid_text(service.Title, Config.Companies.ServiceTitleMaxLength, false)
+            local service_description = valid_text(
+                service.Description or "",
+                Config.Companies.ServiceDescriptionMaxLength,
+                true
+            )
+            local price = valid_text(service.Price or "", Config.Companies.ServicePriceMaxLength, true)
+            if not valid_service_id(service.Id) or not title or not service_description or not price
+                or type(service.RequestsEnabled) ~= "boolean"
+            then
+                error(("[sky_phone] Company '%s' has an invalid default service."):format(company_id))
+            end
+            service.Title = title
+            service.Description = service_description
+            service.Price = price
+            if configured_service_ids[service.Id] then
+                error(("[sky_phone] Default company service ID '%s' is configured more than once."):format(service.Id))
+            end
+            configured_service_ids[service.Id] = true
+        end
+    end
+
+    table.sort(definition_ids, function(left, right)
+        local left_name = definitions[left].Name:lower()
+        local right_name = definitions[right].Name:lower()
+        return left_name == right_name and left < right or left_name < right_name
+    end)
+end
+
+local function seed_companies()
+    if #definition_ids > 0 then
+        local placeholders = {}
+        local numbers = {}
+        for index, company_id in ipairs(definition_ids) do
+            placeholders[index] = "?"
+            numbers[index] = definitions[company_id].ServiceLine.Number
+        end
+        local collisions = Bridge.Database.Query(([[
+            SELECT `phone_number` FROM `sky_phone_sims`
+            WHERE `phone_number` IN (%s)
+            LIMIT 1
+        ]]):format(table.concat(placeholders, ", ")), numbers)
+        if collisions[1] then
+            error(("[sky_phone] Company service number '%s' collides with an existing SIM."):format(
+                tostring(collisions[1].phone_number)
+            ))
+        end
+    end
+
+    for _, company_id in ipairs(definition_ids) do
+        local definition = definitions[company_id]
+        local location = definition.Location
+        if location then
+            Bridge.Database.Query([[
+                INSERT IGNORE INTO `sky_phone_company_profiles`
+                    (`company_id`, `description`, `district`, `location_label`, `address`,
+                        `location_x`, `location_y`, `location_z`, `availability`, `accepts_requests`)
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+            ]], {
+                company_id,
+                definition.Description or "",
+                definition.District or "",
+                definition.LocationLabel or definition.Address or "",
+                definition.Address or "",
+                location.x,
+                location.y,
+                location.z,
+                definition.DefaultAvailability or "closed",
+                definition.AcceptsRequests and 1 or 0,
+            })
+        else
+            Bridge.Database.Query([[
+                INSERT IGNORE INTO `sky_phone_company_profiles`
+                    (`company_id`, `description`, `district`, `location_label`, `address`,
+                        `availability`, `accepts_requests`)
+                VALUES (?, ?, ?, ?, ?, ?, ?)
+            ]], {
+                company_id,
+                definition.Description or "",
+                definition.District or "",
+                definition.LocationLabel or definition.Address or "",
+                definition.Address or "",
+                definition.DefaultAvailability or "closed",
+                definition.AcceptsRequests and 1 or 0,
+            })
+        end
+        for index, service in ipairs(definition.Services or {}) do
+            Bridge.Database.Query([[
+                INSERT IGNORE INTO `sky_phone_company_services`
+                    (`id`, `company_id`, `title`, `description`, `price_text`, `requests_enabled`, `active`, `sort_order`)
+                VALUES (?, ?, ?, ?, ?, ?, 1, ?)
+            ]], {
+                service.Id,
+                company_id,
+                service.Title,
+                service.Description or "",
+                service.Price or "",
+                service.RequestsEnabled and 1 or 0,
+                index,
+            })
+            local seeded = Bridge.Database.Query(
+                "SELECT `company_id` FROM `sky_phone_company_services` WHERE `id` = ? LIMIT 1",
+                { service.Id }
+            )
+            if not seeded[1] or seeded[1].company_id ~= company_id then
+                error(("[sky_phone] Default service ID '%s' collides with another company."):format(service.Id))
+            end
+        end
+    end
+
+end
+
+local function tombstone_removed_companies()
+    local profiles = Bridge.Database.Query([[
+        SELECT DISTINCT profile.`company_id`
+        FROM `sky_phone_company_profiles` profile
+        INNER JOIN `sky_phone_company_requests` request ON request.`company_id` = profile.`company_id`
+        WHERE request.`status` NOT IN ('completed', 'cancelled')
+    ]], {})
+    for _, profile in ipairs(profiles) do
+        if not definitions[profile.company_id] then
+            local mutation_token = uuid()
+            if not Bridge.Database.Transaction({
+                {
+                    query = [[
+                        UPDATE `sky_phone_company_requests`
+                        SET `status` = 'cancelled', `revision` = `revision` + 1,
+                            `customer_unread` = `customer_unread` + 1,
+                            `cancelled_at` = CURRENT_TIMESTAMP, `mutation_token` = ?
+                        WHERE `company_id` = ? AND `status` NOT IN ('completed', 'cancelled')
+                    ]],
+                    params = { mutation_token, profile.company_id },
+                },
+                {
+                    query = [[
+                        INSERT INTO `sky_phone_company_request_events`
+                            (`id`, `request_id`, `event_type`, `actor_type`, `to_status`, `detail`)
+                        SELECT UUID(), `id`, 'cancelled', 'system', 'cancelled', 'company_removed'
+                        FROM `sky_phone_company_requests`
+                        WHERE `company_id` = ? AND `mutation_token` = ?
+                    ]],
+                    params = { profile.company_id, mutation_token },
+                },
+            }) then
+                error(("[sky_phone] Could not tombstone removed company '%s'."):format(
+                    tostring(profile.company_id)
+                ))
+            end
+        end
+    end
+end
+
+local function service_line_payload(company_id)
+    local definition = definitions[company_id]
+    if not Config.Companies.Enabled or not definition then
+        return nil
+    end
+    local line = definition.ServiceLine
+    return {
+        companyId = company_id,
+        number = line.Number,
+        name = definition.Name,
+        canCall = line.CanCall == true,
+        canMessage = line.CanMessage == true,
+        autoContact = line.AutoContact == true,
+        routing = line.Routing,
+        icon = definition.Icon,
+    }
+end
+
+function SkyPhoneCompanies.GetServiceLine(number)
+    local normalized = SkyPhoneSimNumber.Normalize(number, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
+    return normalized and service_line_payload(service_lines_by_number[normalized]) or nil
+end
+
+function SkyPhoneCompanies.GetServiceLineForCompany(company_id)
+    return type(company_id) == "string" and service_line_payload(company_id) or nil
+end
+
+function SkyPhoneCompanies.IsServiceNumber(number)
+    local normalized = SkyPhoneSimNumber.Normalize(number, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
+    return normalized ~= nil and service_lines_by_number[normalized] ~= nil
+end
+
+function SkyPhoneCompanies.IsSystemContactNumber(number)
+    if not Config.Companies.Enabled then
+        return false
+    end
+    local normalized = SkyPhoneSimNumber.Normalize(number, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
+    local company_id = normalized and service_lines_by_number[normalized] or nil
+    local definition = company_id and definitions[company_id] or nil
+    return definition ~= nil and definition.Public == true and definition.ServiceLine.AutoContact == true
+end
+
+function SkyPhoneCompanies.GetSystemContacts()
+    local contacts = {}
+    if not Config.Companies.Enabled then
+        return contacts
+    end
+    for _, company_id in ipairs(definition_ids) do
+        local definition = definitions[company_id]
+        local line = definition.ServiceLine
+        if definition.Public and line.AutoContact then
+            contacts[#contacts + 1] = {
+                id = "company:" .. company_id,
+                companyId = company_id,
+                name = definition.Name,
+                phone_number = line.Number,
+                source = "company",
+                readonly = true,
+                canCall = line.CanCall == true,
+                canMessage = line.CanMessage == true,
+                verified = definition.Verified == true,
+                icon = definition.Icon,
+            }
+        end
+    end
+    return contacts
+end
+
+function SkyPhoneCompanies.ClearCallAvailability(source)
+    call_availability[tonumber(source) or source] = nil
+end
+
+local function current_device(source, registered_required)
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, error_response
+    end
+    local device = SkyPhone.LoadDevice(session.imei)
+    if not device then
+        return nil, { success = false, error = "request_failed" }
+    end
+    if not device.sim_id then
+        return nil, { success = false, error = "no_sim" }
+    end
+    if registered_required and (device.sim_type ~= "registered" or not device.registered_at) then
+        return nil, { success = false, error = "anonymous_sim" }
+    end
+    return device
+end
+
+local function membership(source)
+    local job = Bridge.Framework.GetJob(source)
+    local company_id = definitions_by_job[job.name]
+    if not company_id then
+        return nil
+    end
+    return {
+        company_id = company_id,
+        definition = definitions[company_id],
+        grade = tonumber(job.grade) or 0,
+        grade_label = job.gradeLabel or job.label or "",
+    }
+end
+
+local function require_permission(source, permission)
+    local member = membership(source)
+    if not member then
+        return nil, { success = false, error = "not_authorized" }
+    end
+    local minimum = permission_grade(member.definition, permission)
+    if not minimum or member.grade < minimum then
+        return nil, { success = false, error = "not_authorized" }
+    end
+    local identifier = Bridge.Framework.GetIdentifier(source)
+    if type(identifier) ~= "string" or identifier == "" then
+        return nil, { success = false, error = "not_authorized" }
+    end
+    member.identifier = identifier
+    return member
+end
+
+local function call_member(source)
+    local member = membership(source)
+    if not member then
+        return nil
+    end
+    local minimum = tonumber(member.definition.ServiceLine.MinimumGrade) or 0
+    if member.grade < minimum then
+        return nil
+    end
+    return member
+end
+
+function SkyPhoneCompanies.CanAnswerCompanyCall(source, company_id, imei, sim_id)
+    source = tonumber(source)
+    if not Config.Companies.Enabled or not source or type(company_id) ~= "string"
+        or type(imei) ~= "string" or type(sim_id) ~= "string"
+    then
+        return false
+    end
+    local readiness = call_availability[source]
+    local member = readiness and call_member(source) or nil
+    return member ~= nil
+        and member.company_id == company_id
+        and member.definition.ServiceLine.CanCall == true
+        and readiness.company_id == company_id
+        and readiness.imei == imei
+        and readiness.sim_id == sim_id
+end
+
+function SkyPhoneCompanies.CanPlaceCompanyCall(source, company_id)
+    source = tonumber(source)
+    if not Config.Companies.Enabled or not source or type(company_id) ~= "string" then
+        return false
+    end
+    local member = call_member(source)
+    return member ~= nil and member.company_id == company_id
+        and member.definition.ServiceLine.CanCall == true
+end
+
+function SkyPhoneCompanies.GetCallTargets(company_id)
+    local targets = {}
+    local definition = definitions[company_id]
+    if not Config.Companies.Enabled or not definition or not definition.ServiceLine.CanCall then
+        return targets
+    end
+    local online = {}
+    for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+        online[tonumber(player_source) or player_source] = true
+    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
+            targets[#targets + 1] = {
+                source = source,
+                simId = device.sim_id,
+                phoneNumber = device.phone_number,
+                imei = device.imei,
+                deviceName = device.device_name,
+            }
+        end
+    end
+    table.sort(targets, function(left, right)
+        return left.source < right.source
+    end)
+    if #targets < 2 then
+        return targets
+    end
+    local start = (round_robin_positions[company_id] or 0) % #targets + 1
+    local ordered = {}
+    for offset = 0, #targets - 1 do
+        ordered[#ordered + 1] = targets[(start + offset - 1) % #targets + 1]
+    end
+    round_robin_positions[company_id] = start
+    return ordered
+end
+
+local function profile_row(company_id)
+    local rows = Bridge.Database.Query([[
+        SELECT p.`company_id`, p.`description`, p.`district`, p.`location_label`, p.`address`,
+            p.`location_x`, p.`location_y`, p.`location_z`, p.`availability`,
+            UNIX_TIMESTAMP(p.`availability_updated_at`) AS `availability_updated_at_unix`,
+            UNIX_TIMESTAMP(p.`availability_expires_at`) AS `availability_expires_at_unix`,
+            p.`logo_media_id`, p.`cover_media_id`, p.`accepts_requests`, p.`revision`,
+            UNIX_TIMESTAMP(p.`updated_at`) AS `updated_at_unix`,
+            logo.`url` AS `logo_url`, cover.`url` AS `cover_url`
+        FROM `sky_phone_company_profiles` p
+        LEFT JOIN `sky_phone_media` logo ON logo.`id` = p.`logo_media_id`
+        LEFT JOIN `sky_phone_media` cover ON cover.`id` = p.`cover_media_id`
+        WHERE p.`company_id` = ?
+        LIMIT 1
+    ]], { company_id })
+    return rows[1]
+end
+
+local function company_services(company_id, include_inactive)
+    local condition = include_inactive and " AND `archived` = 0"
+        or " AND `archived` = 0 AND `active` = 1"
+    local rows = Bridge.Database.Query(([[
+        SELECT `id`, `title`, `description`, `price_text`, `requests_enabled`, `active`
+        FROM `sky_phone_company_services`
+        WHERE `company_id` = ?%s
+        ORDER BY `sort_order`, `title`, `id`
+    ]]):format(condition), { company_id })
+    local services = {}
+    for _, row in ipairs(rows) do
+        services[#services + 1] = {
+            id = row.id,
+            title = row.title,
+            description = row.description,
+            priceText = row.price_text ~= "" and row.price_text or nil,
+            acceptsRequests = tonumber(row.requests_enabled) == 1,
+            active = tonumber(row.active) == 1,
+        }
+    end
+    return services
+end
+
+local function company_hours(company_id)
+    local rows = Bridge.Database.Query([[
+        SELECT `weekday`, `is_closed`, `opens_at`, `closes_at`
+        FROM `sky_phone_company_hours`
+        WHERE `company_id` = ?
+        ORDER BY `weekday`
+    ]], { company_id })
+    local hours = {}
+    for _, row in ipairs(rows) do
+        hours[#hours + 1] = {
+            day = tonumber(row.weekday),
+            isClosed = tonumber(row.is_closed) == 1,
+            opensAt = row.opens_at,
+            closesAt = row.closes_at,
+        }
+    end
+    return hours
+end
+
+local function current_announcement(company_id)
+    local rows = Bridge.Database.Query([[
+        SELECT `body`, UNIX_TIMESTAMP(`expires_at`) AS `expires_at_unix`,
+            UNIX_TIMESTAMP(`created_at`) AS `created_at_unix`
+        FROM `sky_phone_company_announcements`
+        WHERE `company_id` = ? AND `active` = 1
+            AND (`expires_at` IS NULL OR `expires_at` > CURRENT_TIMESTAMP)
+        ORDER BY `created_at` DESC
+        LIMIT 1
+    ]], { company_id })
+    local row = rows[1]
+    return row and {
+        body = row.body,
+        expiresAt = iso_time(row.expires_at_unix),
+        publishedAt = iso_time(row.created_at_unix),
+    } or nil
+end
+
+local function company_payload(company_id, include_inactive_services)
+    local definition = definitions[company_id]
+    local row = definition and profile_row(company_id) or nil
+    if not definition or not row then
+        return nil
+    end
+    local services = company_services(company_id, include_inactive_services)
+    local availability = row.availability
+    local availability_expires = tonumber(row.availability_expires_at_unix)
+    if availability_expires and availability_expires <= os.time() then
+        availability = definition.DefaultAvailability or "closed"
+    end
+    local location = nil
+    local x = tonumber(row.location_x)
+    local y = tonumber(row.location_y)
+    local z = tonumber(row.location_z)
+    if x and y and z then
+        location = {
+            address = row.address,
+            district = row.district,
+            label = row.location_label,
+            coords = { x = x, y = y, z = z },
+        }
+    end
+    local line = definition.ServiceLine
+    return {
+        id = company_id,
+        name = definition.Name,
+        categoryId = definition.Category,
+        categoryName = definition.Category,
+        verified = definition.Verified == true,
+        description = row.description,
+        availability = availability,
+        availabilityUpdatedAt = iso_time(row.availability_updated_at_unix)
+            or iso_time(row.updated_at_unix),
+        acceptsRequests = tonumber(row.accepts_requests) == 1 and not definition.Emergency,
+        phoneNumber = line and line.Number or nil,
+        canCall = line and line.CanCall == true or false,
+        canMessage = line and line.CanMessage == true or false,
+        location = location,
+        logoUrl = row.logo_url,
+        coverUrl = row.cover_url,
+        serviceSummary = services[1] and services[1].title or "",
+        announcement = current_announcement(company_id),
+        services = services,
+        hours = company_hours(company_id),
+        revision = tonumber(row.revision) or 1,
+        updatedAtUnix = tonumber(row.updated_at_unix) or 0,
+    }
+end
+
+local function public_company(company_id)
+    local definition = definitions[company_id]
+    if not definition or not definition.Public then
+        return nil
+    end
+    return company_payload(company_id, false)
+end
+
+local function category_payloads()
+    local categories = {}
+    for _, category_id in ipairs(Config.Companies.Categories or {}) do
+        categories[#categories + 1] = { id = category_id, name = category_id }
+    end
+    return categories
+end
+
+local function allow_read(source, operation)
+    if not Config.Companies.Enabled then
+        return nil, { success = false, error = "service_unavailable" }
+    end
+    local limit = Config.Companies.RateLimits[operation] or Config.Companies.RateLimits.Read
+    if not SkyPhone.AllowOperation(source, "companies_" .. operation:lower(), limit, 60) then
+        return nil, { success = false, error = "rate_limited" }
+    end
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, error_response
+    end
+    return session
+end
+
+local function cleanup_retained_data()
+    local cutoff = os.time() - Config.Companies.RetentionDays * 86400
+    local success = Bridge.Database.Transaction({
+        {
+            query = [[
+                DELETE FROM `sky_phone_company_requests`
+                WHERE `status` IN ('completed', 'cancelled')
+                    AND COALESCE(`completed_at`, `cancelled_at`, `updated_at`) < FROM_UNIXTIME(?)
+            ]],
+            params = { cutoff },
+        },
+        {
+            query = [[
+                DELETE FROM `sky_phone_company_audit`
+                WHERE `created_at` < FROM_UNIXTIME(?)
+            ]],
+            params = { cutoff },
+        },
+        {
+            query = [[
+                DELETE FROM `sky_phone_company_announcements`
+                WHERE (`active` = 0 OR `expires_at` <= CURRENT_TIMESTAMP)
+                    AND `created_at` < FROM_UNIXTIME(?)
+            ]],
+            params = { cutoff },
+        },
+    })
+    if not success then
+        print("[sky_phone] Companies retention cleanup failed.")
+    end
+end
+
+validate_configuration()
+seed_companies()
+tombstone_removed_companies()
+cleanup_retained_data()
+
+CreateThread(function()
+    while true do
+        Wait(24 * 60 * 60 * 1000)
+        cleanup_retained_data()
+    end
+end)
+
+CreateThread(function()
+    while true do
+        Wait(1000)
+        local online = {}
+        for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+            online[tonumber(player_source) or player_source] = true
+        end
+        for source, readiness in pairs(call_availability) do
+            local member = online[source] and call_member(source) or nil
+            if not member or member.company_id ~= readiness.company_id
+                or member.definition.ServiceLine.CanCall ~= true
+            then
+                call_availability[source] = nil
+            end
+        end
+    end
+end)
+
+local function company_summary(company)
+    return {
+        id = company.id,
+        name = company.name,
+        categoryId = company.categoryId,
+        categoryName = company.categoryName,
+        verified = company.verified,
+        description = company.description,
+        availability = company.availability,
+        availabilityUpdatedAt = company.availabilityUpdatedAt,
+        acceptsRequests = company.acceptsRequests,
+        phoneNumber = company.phoneNumber,
+        canCall = company.canCall,
+        canMessage = company.canMessage,
+        location = company.location,
+        logoUrl = company.logoUrl,
+        serviceSummary = company.serviceSummary,
+        announcement = company.announcement,
+    }
+end
+
+local function search_score(company, search)
+    if search == "" then
+        return 0
+    end
+    local name = company.name:lower()
+    if name:sub(1, #search) == search then
+        return 4
+    end
+    if name:find(search, 1, true) then
+        return 3
+    end
+    local values = {
+        company.categoryId,
+        company.description,
+        company.location and company.location.district or "",
+        company.location and company.location.address or "",
+        company.serviceSummary,
+    }
+    for _, value in ipairs(values) do
+        if tostring(value):lower():find(search, 1, true) then
+            return 1
+        end
+    end
+    for _, service in ipairs(company.services) do
+        if service.title:lower():find(search, 1, true)
+            or service.description:lower():find(search, 1, true)
+        then
+            return 1
+        end
+    end
+    return -1
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:list", function(source, data)
+    local session, error_response = allow_read(source, "Search")
+    if not session then
+        return error_response
+    end
+    data = type(data) == "table" and data or {}
+    local search = valid_text(data.search or "", 80, true)
+    if not search then
+        return { success = false, error = "invalid_request" }
+    end
+    search = search:lower()
+    local category_id = data.categoryId
+    if category_id ~= nil then
+        local category_valid = false
+        for _, configured in ipairs(Config.Companies.Categories or {}) do
+            if category_id == configured then
+                category_valid = true
+                break
+            end
+        end
+        if not category_valid then
+            return { success = false, error = "invalid_request" }
+        end
+    end
+    local availability = data.availability
+    if availability ~= nil and not Config.Companies.AvailabilityStatuses[availability] then
+        return { success = false, error = "invalid_request" }
+    end
+    if data.acceptsRequests ~= nil and type(data.acceptsRequests) ~= "boolean" then
+        return { success = false, error = "invalid_request" }
+    end
+    if data.hasLocation ~= nil and type(data.hasLocation) ~= "boolean" then
+        return { success = false, error = "invalid_request" }
+    end
+    local sort = data.sort or "relevance"
+    if sort ~= "relevance" and sort ~= "name" and sort ~= "updated" then
+        return { success = false, error = "invalid_request" }
+    end
+    local cursor = data.cursor == nil and 0 or valid_integer(data.cursor, 0, 100000)
+    if not cursor then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local matches = {}
+    for _, company_id in ipairs(definition_ids) do
+        local company = public_company(company_id)
+        if company then
+            local score = search_score(company, search)
+            if score >= 0
+                and (not category_id or company.categoryId == category_id)
+                and (not availability or company.availability == availability)
+                and (data.acceptsRequests ~= true or company.acceptsRequests)
+                and (data.hasLocation ~= true or company.location ~= nil)
+            then
+                matches[#matches + 1] = { company = company, score = score }
+            end
+        end
+    end
+    table.sort(matches, function(left, right)
+        if sort == "updated" and left.company.updatedAtUnix ~= right.company.updatedAtUnix then
+            return left.company.updatedAtUnix > right.company.updatedAtUnix
+        end
+        if sort == "relevance" and left.score ~= right.score then
+            return left.score > right.score
+        end
+        local left_name = left.company.name:lower()
+        local right_name = right.company.name:lower()
+        return left_name == right_name and left.company.id < right.company.id or left_name < right_name
+    end)
+
+    local companies = {}
+    local page_size = math.min(Config.Companies.PageSize, Config.Companies.MaximumPageSize)
+    local last_index = math.min(#matches, cursor + page_size)
+    for index = cursor + 1, last_index do
+        companies[#companies + 1] = company_summary(matches[index].company)
+    end
+    return {
+        success = true,
+        data = {
+            companies = companies,
+            categories = category_payloads(),
+            nextCursor = last_index < #matches and tostring(last_index) or nil,
+        },
+    }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:get", function(source, data)
+    local session, error_response = allow_read(source, "Read")
+    if not session then
+        return error_response
+    end
+    local company_id = type(data) == "table" and data.companyId or nil
+    local company = type(company_id) == "string" and public_company(company_id) or nil
+    if not company then
+        return { success = false, error = "company_not_found" }
+    end
+    company.updatedAtUnix = nil
+    return { success = true, data = { company = company } }
+end)
+
+local function decode_request_cursor(value)
+    if value == nil then
+        return nil, nil
+    end
+    if type(value) ~= "string" or #value > 64 then
+        return false, false
+    end
+    local timestamp, request_id = value:match("^(%d+):(.+)$")
+    timestamp = valid_integer(timestamp, 1, 4102444800)
+    if not timestamp or not valid_uuid(request_id) then
+        return false, false
+    end
+    return timestamp, request_id
+end
+
+local function encode_request_cursor(row)
+    return ("%s:%s"):format(tostring(math.floor(tonumber(row.updated_at_unix) or 0)), row.id)
+end
+
+local function request_row(request_id)
+    local rows = Bridge.Database.Query([[
+        SELECT r.`id`, r.`company_id`, r.`service_id`, r.`customer_sim_id`, r.`subject`, r.`description`,
+            r.`status`, r.`assigned_identifier`, r.`customer_unread`,
+            r.`company_activity_revision`, r.`revision`,
+            UNIX_TIMESTAMP(r.`created_at`) AS `created_at_unix`,
+            UNIX_TIMESTAMP(r.`updated_at`) AS `updated_at_unix`, service.`title` AS `service_title`,
+            logo.`url` AS `company_logo_url`
+        FROM `sky_phone_company_requests` r
+        LEFT JOIN `sky_phone_company_services` service ON service.`id` = r.`service_id`
+        LEFT JOIN `sky_phone_company_profiles` profile ON profile.`company_id` = r.`company_id`
+        LEFT JOIN `sky_phone_media` logo ON logo.`id` = profile.`logo_media_id`
+        WHERE r.`id` = ?
+        LIMIT 1
+    ]], { request_id })
+    return rows[1]
+end
+
+local function request_summary(row, audience, identifier)
+    local definition = definitions[row.company_id]
+    local assigned_label = nil
+    if row.assigned_identifier then
+        assigned_label = identifier and row.assigned_identifier == identifier and "you" or "assigned"
+    end
+    local unread_count
+    if audience == "customer" then
+        unread_count = tonumber(row.customer_unread) or 0
+    else
+        local relevant = not terminal_statuses[row.status]
+            and (row.status == "new" or row.assigned_identifier == identifier)
+        unread_count = relevant and math.max(
+            0,
+            (tonumber(row.company_activity_revision) or 1)
+                - (tonumber(row.company_read_revision) or 0)
+        ) or 0
+    end
+    return {
+        id = row.id,
+        companyId = row.company_id,
+        companyName = definition and definition.Name or row.company_id,
+        companyLogoUrl = row.company_logo_url,
+        serviceId = row.service_id,
+        serviceName = row.service_title,
+        subject = row.subject,
+        status = row.status,
+        assignedLabel = assigned_label,
+        unreadCount = unread_count,
+        createdAt = iso_time(row.created_at_unix),
+        updatedAt = iso_time(row.updated_at_unix),
+    }
+end
+
+local function request_access(source, request_id)
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, error_response
+    end
+    local row = request_row(request_id)
+    if not row then
+        return nil, { success = false, error = "request_not_found" }
+    end
+    local device = SkyPhone.LoadDevice(session.imei)
+    if not device then
+        return nil, { success = false, error = "request_failed" }
+    end
+    if device.sim_id and device.sim_id == row.customer_sim_id
+        and device.sim_type == "registered" and device.registered_at
+    then
+        return { audience = "customer", row = row, device = device }
+    end
+    local member = membership(source)
+    if not member or member.company_id ~= row.company_id
+        or member.grade < permission_grade(member.definition, "WorkQueue")
+    then
+        return nil, { success = false, error = "request_not_found" }
+    end
+    local identifier = Bridge.Framework.GetIdentifier(source)
+    if type(identifier) ~= "string" or identifier == "" then
+        return nil, { success = false, error = "not_authorized" }
+    end
+    member.identifier = identifier
+    return { audience = "company", row = row, device = device, member = member }
+end
+
+local function can_handle_request(access)
+    if access.audience ~= "company" then
+        return false
+    end
+    return access.row.assigned_identifier == access.member.identifier
+        or access.member.grade >= permission_grade(access.member.definition, "Assign")
+end
+
+local function request_actions(access)
+    local row = access.row
+    local definition = definitions[row.company_id]
+    local active = not terminal_statuses[row.status]
+    if access.audience == "customer" then
+        return {
+            allowedStatuses = {},
+            canAssign = false,
+            canCall = definition ~= nil and definition.ServiceLine.CanCall == true,
+            canCancel = active,
+            canClaim = false,
+            canReply = active,
+        }
+    end
+    local handler = can_handle_request(access)
+    local allowed = {}
+    if handler then
+        for _, status in ipairs({ "in_progress", "waiting_customer", "completed", "cancelled" }) do
+            if status_transitions[row.status] and status_transitions[row.status][status] then
+                allowed[#allowed + 1] = status
+            end
+        end
+    end
+    return {
+        allowedStatuses = allowed,
+        canAssign = active and access.member.grade >= permission_grade(access.member.definition, "Assign"),
+        canCall = active
+            and access.member.definition.ServiceLine.CanCall == true
+            and access.member.grade >= (tonumber(access.member.definition.ServiceLine.MinimumGrade) or 0),
+        canCancel = active and handler,
+        canClaim = row.status == "new" and not row.assigned_identifier,
+        canReply = active and handler,
+    }
+end
+
+local function request_detail(access)
+    local row = request_row(access.row.id)
+    if not row then
+        return nil
+    end
+    access.row = row
+    if access.audience == "customer" then
+        Bridge.Database.Query(
+            "UPDATE `sky_phone_company_requests` SET `customer_unread` = 0, `updated_at` = `updated_at` WHERE `id` = ?",
+            { row.id }
+        )
+        row.customer_unread = 0
+    else
+        Bridge.Database.Query([[
+            INSERT INTO `sky_phone_company_request_reads`
+                (`request_id`, `reader_identifier`, `read_revision`)
+            VALUES (?, ?, ?)
+            ON DUPLICATE KEY UPDATE
+                `read_revision` = GREATEST(`read_revision`, VALUES(`read_revision`)),
+                `updated_at` = CURRENT_TIMESTAMP
+        ]], { row.id, access.member.identifier, row.company_activity_revision })
+        row.company_read_revision = row.company_activity_revision
+    end
+    local messages = Bridge.Database.Query([[
+        SELECT `id`, `sender_type`, `sender_identifier`, `sender_sim_id`, `body`,
+            UNIX_TIMESTAMP(`created_at`) AS `created_at_unix`
+        FROM `sky_phone_company_request_messages`
+        WHERE `request_id` = ?
+        ORDER BY `created_at`, `id`
+    ]], { row.id })
+    local message_payloads = {}
+    for _, message in ipairs(messages) do
+        local mine = access.audience == "customer"
+            and message.sender_type == "customer" and message.sender_sim_id == row.customer_sim_id
+            or access.audience == "company"
+                and message.sender_type == "company" and message.sender_identifier == access.member.identifier
+        message_payloads[#message_payloads + 1] = {
+            id = message.id,
+            author = message.sender_type,
+            authorLabel = mine and "you" or message.sender_type,
+            body = message.body,
+            createdAt = iso_time(message.created_at_unix),
+            isMine = mine,
+        }
+    end
+    local events = Bridge.Database.Query([[
+        SELECT `id`, `event_type`, `to_status`, UNIX_TIMESTAMP(`created_at`) AS `created_at_unix`
+        FROM `sky_phone_company_request_events`
+        WHERE `request_id` = ?
+        ORDER BY `created_at`, `id`
+    ]], { row.id })
+    local event_payloads = {}
+    for _, event in ipairs(events) do
+        local event_type = event.event_type
+        if event_type == "status" then
+            event_type = event.to_status == "completed" and "completed" or "status_changed"
+        end
+        event_payloads[#event_payloads + 1] = {
+            id = event.id,
+            type = event_type,
+            status = event.to_status,
+            createdAt = iso_time(event.created_at_unix),
+        }
+    end
+    local media_rows = Bridge.Database.Query([[
+        SELECT media.`id`, media.`url`
+        FROM `sky_phone_company_request_media` request_media
+        INNER JOIN `sky_phone_media` media ON media.`id` = request_media.`media_id`
+        WHERE request_media.`request_id` = ?
+        ORDER BY request_media.`sort_order`
+    ]], { row.id })
+    local payload = request_summary(
+        row,
+        access.audience,
+        access.member and access.member.identifier or nil
+    )
+    payload.description = row.description
+    payload.revision = tonumber(row.revision) or 1
+    local definition = definitions[row.company_id]
+    payload.phoneNumber = definition and definition.ServiceLine.Number or nil
+    payload.messages = message_payloads
+    payload.events = event_payloads
+    payload.media = media_rows
+    payload.actions = request_actions(access)
+    return payload
+end
+
+local function list_request_rows(query, parameters, audience, identifier)
+    local rows = Bridge.Database.Query(query, parameters)
+    local has_more = #rows > Config.Companies.PageSize
+    if has_more then
+        rows[#rows] = nil
+    end
+    local requests = {}
+    for _, row in ipairs(rows) do
+        requests[#requests + 1] = request_summary(row, audience, identifier)
+    end
+    return requests, has_more and encode_request_cursor(rows[#rows]) or nil
+end
+
+local request_list_select = [[
+    SELECT r.`id`, r.`company_id`, r.`service_id`, r.`customer_sim_id`, r.`subject`, r.`status`,
+        r.`assigned_identifier`, r.`customer_unread`, r.`company_activity_revision`, r.`revision`,
+        UNIX_TIMESTAMP(r.`created_at`) AS `created_at_unix`,
+        UNIX_TIMESTAMP(r.`updated_at`) AS `updated_at_unix`, service.`title` AS `service_title`,
+        logo.`url` AS `company_logo_url`, NULL AS `company_read_revision`
+    FROM `sky_phone_company_requests` r
+    LEFT JOIN `sky_phone_company_services` service ON service.`id` = r.`service_id`
+    LEFT JOIN `sky_phone_company_profiles` profile ON profile.`company_id` = r.`company_id`
+    LEFT JOIN `sky_phone_media` logo ON logo.`id` = profile.`logo_media_id`
+]]
+
+local company_request_list_select = [[
+    SELECT r.`id`, r.`company_id`, r.`service_id`, r.`customer_sim_id`, r.`subject`, r.`status`,
+        r.`assigned_identifier`, r.`customer_unread`, r.`company_activity_revision`, r.`revision`,
+        UNIX_TIMESTAMP(r.`created_at`) AS `created_at_unix`,
+        UNIX_TIMESTAMP(r.`updated_at`) AS `updated_at_unix`, service.`title` AS `service_title`,
+        logo.`url` AS `company_logo_url`, company_read.`read_revision` AS `company_read_revision`
+    FROM `sky_phone_company_requests` r
+    LEFT JOIN `sky_phone_company_services` service ON service.`id` = r.`service_id`
+    LEFT JOIN `sky_phone_company_profiles` profile ON profile.`company_id` = r.`company_id`
+    LEFT JOIN `sky_phone_media` logo ON logo.`id` = profile.`logo_media_id`
+    LEFT JOIN `sky_phone_company_request_reads` company_read
+        ON company_read.`request_id` = r.`id` AND company_read.`reader_identifier` = ?
+]]
+
+local function context_request_rows(company_id, identifier, own)
+    local condition = own
+        and " AND r.`assigned_identifier` = ? AND r.`status` NOT IN ('completed', 'cancelled')"
+        or ""
+    local parameters = { identifier, company_id }
+    if own then
+        parameters[#parameters + 1] = identifier
+    end
+    parameters[#parameters + 1] = 4
+    local rows = Bridge.Database.Query(company_request_list_select .. ([=[
+        WHERE r.`company_id` = ?%s
+        ORDER BY r.`updated_at` DESC, r.`id` DESC
+        LIMIT ?
+    ]=]):format(condition), parameters)
+    local requests = {}
+    for _, row in ipairs(rows) do
+        requests[#requests + 1] = request_summary(row, "company", identifier)
+    end
+    return requests
+end
+
+local function work_context(source)
+    local member = membership(source)
+    if not member or member.grade < permission_grade(member.definition, "WorkQueue") then
+        return {
+            authorized = false,
+            callAvailable = false,
+            company = nil,
+            metrics = { assigned = 0, completedToday = 0, new = 0, waiting = 0 },
+            ownRequests = {},
+            recentRequests = {},
+            permissions = {
+                canAssign = false,
+                canManageAnnouncement = false,
+                canManageHours = false,
+                canManageProfile = false,
+                canManageServices = false,
+                canSetAvailability = false,
+                canTakeCalls = false,
+            },
+            role = nil,
+            unreadCount = 0,
+        }
+    end
+    local identifier = Bridge.Framework.GetIdentifier(source)
+    if type(identifier) ~= "string" or identifier == "" then
+        return nil
+    end
+    member.identifier = identifier
+    local rows = Bridge.Database.Query([[
+        SELECT
+            COALESCE(SUM(request.`status` = 'new'), 0) AS `new_count`,
+            COALESCE(SUM(request.`assigned_identifier` = ?
+                AND request.`status` NOT IN ('completed', 'cancelled')), 0) AS `assigned_count`,
+            COALESCE(SUM(request.`status` = 'waiting_customer'), 0) AS `waiting_count`,
+            COALESCE(SUM(request.`status` = 'completed'
+                AND DATE(request.`completed_at`) = CURRENT_DATE), 0) AS `completed_today`,
+            COALESCE(SUM(CASE
+                WHEN request.`status` NOT IN ('completed', 'cancelled')
+                    AND (request.`status` = 'new' OR request.`assigned_identifier` = ?)
+                    AND COALESCE(company_read.`read_revision`, 0) < request.`company_activity_revision`
+                    THEN request.`company_activity_revision` - COALESCE(company_read.`read_revision`, 0)
+                ELSE 0
+            END), 0) AS `unread_count`
+        FROM `sky_phone_company_requests` request
+        LEFT JOIN `sky_phone_company_request_reads` company_read
+            ON company_read.`request_id` = request.`id` AND company_read.`reader_identifier` = ?
+        WHERE request.`company_id` = ?
+    ]], { identifier, identifier, identifier, member.company_id })
+    local metrics = rows[1] or {}
+    local permissions = {
+        canAssign = member.grade >= permission_grade(member.definition, "Assign"),
+        canManageAnnouncement = member.grade >= permission_grade(member.definition, "Announcement"),
+        canManageHours = member.grade >= permission_grade(member.definition, "Hours"),
+        canManageProfile = member.grade >= permission_grade(member.definition, "Profile"),
+        canManageServices = member.grade >= permission_grade(member.definition, "Services"),
+        canSetAvailability = member.grade >= permission_grade(member.definition, "Availability"),
+        canTakeCalls = member.definition.ServiceLine.CanCall == true
+            and member.grade >= (tonumber(member.definition.ServiceLine.MinimumGrade) or 0),
+    }
+    local manager = permissions.canAssign or permissions.canManageAnnouncement
+        or permissions.canManageHours or permissions.canManageProfile or permissions.canManageServices
+    local readiness = call_availability[source]
+    local company = company_payload(member.company_id, true)
+    company.updatedAtUnix = nil
+    return {
+        authorized = true,
+        callAvailable = permissions.canTakeCalls and readiness ~= nil
+            and readiness.company_id == member.company_id,
+        company = company,
+        metrics = {
+            new = tonumber(metrics.new_count) or 0,
+            assigned = tonumber(metrics.assigned_count) or 0,
+            waiting = tonumber(metrics.waiting_count) or 0,
+            completedToday = tonumber(metrics.completed_today) or 0,
+        },
+        ownRequests = context_request_rows(member.company_id, identifier, true),
+        recentRequests = context_request_rows(member.company_id, identifier, false),
+        permissions = permissions,
+        role = manager and "manager" or "employee",
+        unreadCount = tonumber(metrics.unread_count) or 0,
+    }
+end
+
+local function notify_sim(sim_id, event_name, payload)
+    local devices = Bridge.Database.Query([[
+        SELECT d.`imei`, d.`device_name`, settings.`payload` AS `settings`
+        FROM `sky_phone_devices` d
+        LEFT JOIN `sky_phone_device_data` settings
+            ON settings.`device_imei` = d.`imei` AND settings.`namespace` = 'settings'
+        WHERE d.`sim_id` = ?
+    ]], { sim_id })
+    for _, device in ipairs(devices) do
+        for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+            local target = tonumber(player_source) or player_source
+            if SkyPhone.FindDeviceSlots(target, device.imei)[1] then
+                local event_payload = {}
+                for key, value in pairs(payload) do
+                    event_payload[key] = value
+                end
+                event_payload.device = {
+                    imei = device.imei,
+                    name = device.device_name,
+                    settings = device.settings,
+                }
+                TriggerClientEvent(event_name, target, event_payload)
+            end
+        end
+    end
+end
+
+local function notify_source(source, event_name, payload)
+    local session = SkyPhone.RequireSession(source)
+    if not session then
+        return
+    end
+    local rows = Bridge.Database.Query([[
+        SELECT d.`device_name`, settings.`payload` AS `settings`
+        FROM `sky_phone_devices` d
+        LEFT JOIN `sky_phone_device_data` settings
+            ON settings.`device_imei` = d.`imei` AND settings.`namespace` = 'settings'
+        WHERE d.`imei` = ?
+        LIMIT 1
+    ]], { session.imei })
+    if not rows[1] then
+        return
+    end
+    local event_payload = {}
+    for key, value in pairs(payload) do
+        event_payload[key] = value
+    end
+    event_payload.device = {
+        imei = session.imei,
+        name = rows[1].device_name,
+        settings = rows[1].settings,
+    }
+    TriggerClientEvent(event_name, source, event_payload)
+end
+
+local function notify_company(company_id, event_name, payload, excluded_source)
+    local definition = definitions[company_id]
+    if not definition then
+        return
+    end
+    for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+        local target = tonumber(player_source) or player_source
+        if target ~= excluded_source then
+            local job = Bridge.Framework.GetJob(target)
+            if job.name == definition.Job and (tonumber(job.grade) or 0) >= permission_grade(definition, "WorkQueue") then
+                notify_source(target, event_name, payload)
+            end
+        end
+    end
+end
+
+local function notify_identifier(identifier, company_id, event_name, payload)
+    for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+        local target = tonumber(player_source) or player_source
+        local member = membership(target)
+        if member and member.company_id == company_id
+            and member.grade >= permission_grade(member.definition, "WorkQueue")
+            and Bridge.Framework.GetIdentifier(target) == identifier
+        then
+            notify_source(target, event_name, payload)
+        end
+    end
+end
+
+local function emit_public_change(company_id)
+    local definition = definitions[company_id]
+    if not definition then
+        return
+    end
+    notify_company(company_id, "sky_phone:companies:changed", {
+        area = "work",
+        companyId = company_id,
+    })
+    if not definition.Public then
+        return
+    end
+    for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+        notify_source(tonumber(player_source) or player_source, "sky_phone:companies:changed", {
+            area = "directory",
+            companyId = company_id,
+        })
+    end
+end
+
+local function emit_request_change(row, customer, company, excluded_source)
+    local payload = {
+        area = customer and "customer" or "work",
+        companyId = row.company_id,
+        requestId = row.id,
+    }
+    if customer then
+        notify_sim(row.customer_sim_id, "sky_phone:companies:changed", payload)
+    end
+    if company then
+        payload = {
+            area = "work",
+            companyId = row.company_id,
+            requestId = row.id,
+        }
+        notify_company(row.company_id, "sky_phone:companies:changed", payload, excluded_source)
+    end
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:my-requests", function(source, data)
+    local session, error_response = allow_read(source, "Read")
+    if not session then
+        return error_response
+    end
+    local device, device_error = current_device(source, true)
+    if not device then
+        return device_error
+    end
+    data = type(data) == "table" and data or {}
+    local list = data.list or "open"
+    if list ~= "open" and list ~= "closed" then
+        return { success = false, error = "invalid_request" }
+    end
+    local cursor_time, cursor_id = decode_request_cursor(data.cursor)
+    if cursor_time == false then
+        return { success = false, error = "invalid_request" }
+    end
+    local status_condition = list == "open"
+        and "r.`status` NOT IN ('completed', 'cancelled')"
+        or "r.`status` IN ('completed', 'cancelled')"
+    local cursor_condition = ""
+    local parameters = { device.sim_id }
+    if cursor_time then
+        cursor_condition = [[
+            AND (r.`updated_at` < FROM_UNIXTIME(?)
+                OR (r.`updated_at` = FROM_UNIXTIME(?) AND r.`id` < ?))
+        ]]
+        parameters[#parameters + 1] = cursor_time
+        parameters[#parameters + 1] = cursor_time
+        parameters[#parameters + 1] = cursor_id
+    end
+    parameters[#parameters + 1] = Config.Companies.PageSize + 1
+    local requests, next_cursor = list_request_rows(request_list_select .. ([=[
+        WHERE r.`customer_sim_id` = ? AND %s %s
+        ORDER BY r.`updated_at` DESC, r.`id` DESC
+        LIMIT ?
+    ]=]):format(status_condition, cursor_condition), parameters, "customer")
+    local unread_rows = Bridge.Database.Query([[
+        SELECT COALESCE(SUM(`customer_unread`), 0) AS `unread_count`
+        FROM `sky_phone_company_requests`
+        WHERE `customer_sim_id` = ?
+    ]], { device.sim_id })
+    return {
+        success = true,
+        data = {
+            requests = requests,
+            nextCursor = next_cursor,
+            unreadCount = tonumber(unread_rows[1] and unread_rows[1].unread_count) or 0,
+        },
+    }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:get-request", function(source, data)
+    local session, error_response = allow_read(source, "Read")
+    if not session then
+        return error_response
+    end
+    local request_id = type(data) == "table" and data.requestId or nil
+    if not valid_uuid(request_id) then
+        return { success = false, error = "invalid_request" }
+    end
+    local access, access_error = request_access(source, request_id)
+    if not access then
+        return access_error
+    end
+    local request = request_detail(access)
+    if not request then
+        return { success = false, error = "request_not_found" }
+    end
+    return { success = true, data = { request = request } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:work-context", function(source)
+    local session, error_response = allow_read(source, "Read")
+    if not session then
+        return error_response
+    end
+    local context = work_context(source)
+    if not context then
+        return { success = false, error = "not_authorized" }
+    end
+    return { success = true, data = { context = context } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:work-queue", function(source, data)
+    local session, error_response = allow_read(source, "Read")
+    if not session then
+        return error_response
+    end
+    local member, member_error = require_permission(source, "WorkQueue")
+    if not member then
+        return member_error
+    end
+    data = type(data) == "table" and data or {}
+    local filter = data.filter or "new"
+    local filters = {
+        new = "r.`status` = 'new'",
+        assigned = "r.`assigned_identifier` = ? AND r.`status` NOT IN ('completed', 'cancelled')",
+        in_progress = "r.`status` = 'in_progress'",
+        waiting_customer = "r.`status` = 'waiting_customer'",
+        completed = "r.`status` = 'completed'",
+    }
+    if not filters[filter] then
+        return { success = false, error = "invalid_request" }
+    end
+    local cursor_time, cursor_id = decode_request_cursor(data.cursor)
+    if cursor_time == false then
+        return { success = false, error = "invalid_request" }
+    end
+    local parameters = { member.identifier, member.company_id }
+    if filter == "assigned" then
+        parameters[#parameters + 1] = member.identifier
+    end
+    local cursor_condition = ""
+    if cursor_time then
+        cursor_condition = [[
+            AND (r.`updated_at` < FROM_UNIXTIME(?)
+                OR (r.`updated_at` = FROM_UNIXTIME(?) AND r.`id` < ?))
+        ]]
+        parameters[#parameters + 1] = cursor_time
+        parameters[#parameters + 1] = cursor_time
+        parameters[#parameters + 1] = cursor_id
+    end
+    parameters[#parameters + 1] = Config.Companies.PageSize + 1
+    local requests, next_cursor = list_request_rows(company_request_list_select .. ([=[
+        WHERE r.`company_id` = ? AND %s %s
+        ORDER BY r.`updated_at` DESC, r.`id` DESC
+        LIMIT ?
+    ]=]):format(filters[filter], cursor_condition), parameters, "company", member.identifier)
+    return { success = true, data = { requests = requests, nextCursor = next_cursor } }
+end)
+
+local function member_token(target, company_id, identifier)
+    local entry = member_tokens[target]
+    if not entry or entry.company_id ~= company_id or entry.identifier ~= identifier
+        or os.time() - entry.created_at > 300
+    then
+        entry = {
+            token = uuid(),
+            company_id = company_id,
+            identifier = identifier,
+            created_at = os.time(),
+        }
+        member_tokens[target] = entry
+    end
+    return entry.token
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:list-members", function(source)
+    local session, error_response = allow_read(source, "Read")
+    if not session then
+        return error_response
+    end
+    local member, member_error = require_permission(source, "Assign")
+    if not member then
+        return member_error
+    end
+    local members = {}
+    for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+        local target = tonumber(player_source) or player_source
+        local target_member = membership(target)
+        local target_identifier = target_member and Bridge.Framework.GetIdentifier(target) or nil
+        if target_member and target_member.company_id == member.company_id
+            and target_member.grade >= permission_grade(target_member.definition, "WorkQueue")
+            and type(target_identifier) == "string" and target_identifier ~= ""
+        then
+            local first_name = trim(Bridge.Framework.GetFirstname(target) or "") or ""
+            local last_name = trim(Bridge.Framework.GetLastname(target) or "") or ""
+            local name = trim(first_name .. " " .. last_name)
+            members[#members + 1] = {
+                id = member_token(target, member.company_id, target_identifier),
+                name = name,
+                online = true,
+                role = target_member.grade_label,
+            }
+        end
+    end
+    table.sort(members, function(left, right)
+        return left.name:lower() < right.name:lower()
+    end)
+    return { success = true, data = { members = members } }
+end)
+
+local function allow_mutation(source, operation, limit_name)
+    if not Config.Companies.Enabled then
+        return false, { success = false, error = "service_unavailable" }
+    end
+    local limit = Config.Companies.RateLimits[limit_name]
+    if not SkyPhone.AllowOperation(source, "companies_" .. operation, limit, 60) then
+        return false, { success = false, error = "rate_limited" }
+    end
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return false, error_response
+    end
+    return true
+end
+
+local function mutation_request_payload(source, request_id)
+    local access, access_error = request_access(source, request_id)
+    if not access then
+        return nil, access_error
+    end
+    local request = request_detail(access)
+    if not request then
+        return nil, { success = false, error = "request_not_found" }
+    end
+    local data = { request = request }
+    if access.audience == "company" then
+        data.context = work_context(source)
+    end
+    return data
+end
+
+local function notification_payload(kind, area, row)
+    return {
+        kind = kind,
+        area = area,
+        companyId = row.company_id,
+        requestId = row.id,
+    }
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:create-request", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "create_request", "CreateRequest")
+    if not allowed then
+        return rate_error
+    end
+    local device, device_error = current_device(source, true)
+    if not device then
+        return device_error
+    end
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
+    local company_id = data.companyId
+    local definition = type(company_id) == "string" and definitions[company_id] or nil
+    if not definition or not definition.Public or definition.Emergency then
+        return { success = false, error = "company_not_found" }
+    end
+    local subject = valid_text(data.subject, Config.Companies.SubjectMaxLength, false)
+    local description = valid_text(data.description, Config.Companies.RequestBodyMaxLength, false)
+    if not subject or not description or not valid_service_id(data.serviceId) then
+        return { success = false, error = "invalid_request" }
+    end
+    local profiles = Bridge.Database.Query(
+        "SELECT `accepts_requests` FROM `sky_phone_company_profiles` WHERE `company_id` = ? LIMIT 1",
+        { company_id }
+    )
+    if not profiles[1] or tonumber(profiles[1].accepts_requests) ~= 1 then
+        return { success = false, error = "invalid_service" }
+    end
+    local services = Bridge.Database.Query([[
+        SELECT `id` FROM `sky_phone_company_services`
+        WHERE `id` = ? AND `company_id` = ? AND `archived` = 0
+            AND `active` = 1 AND `requests_enabled` = 1
+        LIMIT 1
+    ]], { data.serviceId, company_id })
+    if not services[1] then
+        return { success = false, error = "invalid_service" }
+    end
+    local media_ids = data.mediaIds
+    if media_ids == nil then
+        media_ids = {}
+    end
+    if not valid_array(media_ids, Config.Companies.MaximumRequestMedia) then
+        return { success = false, error = "invalid_media" }
+    end
+    local media_seen = {}
+    local normalized_media = {}
+    for _, media_id in ipairs(media_ids) do
+        local normalized = valid_integer(media_id, 1, 9007199254740991)
+        if not normalized or media_seen[normalized]
+            or not SkyPhoneMedia.ResolveOwnedMedia(source, normalized, "photo")
+        then
+            return { success = false, error = "invalid_media" }
+        end
+        media_seen[normalized] = true
+        normalized_media[#normalized_media + 1] = normalized
+    end
+    local counts = Bridge.Database.Query([[
+        SELECT COUNT(*) AS `count`
+        FROM `sky_phone_company_requests`
+        WHERE `customer_sim_id` = ? AND `status` NOT IN ('completed', 'cancelled')
+    ]], { device.sim_id })
+    if (tonumber(counts[1] and counts[1].count) or 0) >= Config.Companies.MaximumOpenRequestsPerSim then
+        return { success = false, error = "too_many_open_requests" }
+    end
+    local request_id = uuid()
+    local event_id = uuid()
+    local statements = {
+        {
+            query = "UPDATE `sky_phone_sims` SET `updated_at` = `updated_at` WHERE `id` = ?",
+            params = { device.sim_id },
+        },
+        {
+            query = [[
+                INSERT INTO `sky_phone_company_requests`
+                    (`id`, `company_id`, `service_id`, `customer_sim_id`, `subject`, `description`)
+                SELECT ?, profile.`company_id`, service.`id`, sim.`id`, ?, ?
+                FROM `sky_phone_sims` sim
+                INNER JOIN `sky_phone_company_profiles` profile ON profile.`company_id` = ?
+                INNER JOIN `sky_phone_company_services` service
+                    ON service.`id` = ? AND service.`company_id` = profile.`company_id`
+                WHERE sim.`id` = ? AND profile.`accepts_requests` = 1
+                    AND service.`archived` = 0 AND service.`active` = 1
+                    AND service.`requests_enabled` = 1 AND (
+                    SELECT COUNT(*) FROM `sky_phone_company_requests`
+                    WHERE `customer_sim_id` = ? AND `status` NOT IN ('completed', 'cancelled')
+                ) < ?
+            ]],
+            params = {
+                request_id,
+                subject,
+                description,
+                company_id,
+                data.serviceId,
+                device.sim_id,
+                device.sim_id,
+                Config.Companies.MaximumOpenRequestsPerSim,
+            },
+        },
+        {
+            query = [[
+                INSERT INTO `sky_phone_company_request_events`
+                    (`id`, `request_id`, `event_type`, `actor_type`, `to_status`)
+                SELECT ?, `id`, 'created', 'customer', 'new'
+                FROM `sky_phone_company_requests` WHERE `id` = ?
+            ]],
+            params = { event_id, request_id },
+        },
+    }
+    for index, media_id in ipairs(normalized_media) do
+        statements[#statements + 1] = {
+            query = [[
+                INSERT INTO `sky_phone_company_request_media` (`request_id`, `media_id`, `sort_order`)
+                SELECT `id`, ?, ? FROM `sky_phone_company_requests` WHERE `id` = ?
+            ]],
+            params = { media_id, index, request_id },
+        }
+    end
+    if not Bridge.Database.Transaction(statements) then
+        return { success = false, error = "request_failed" }
+    end
+    local row = request_row(request_id)
+    if not row then
+        local available = Bridge.Database.Query([[
+            SELECT service.`id`
+            FROM `sky_phone_company_profiles` profile
+            INNER JOIN `sky_phone_company_services` service ON service.`company_id` = profile.`company_id`
+            WHERE profile.`company_id` = ? AND profile.`accepts_requests` = 1
+                AND service.`id` = ? AND service.`archived` = 0
+                AND service.`active` = 1 AND service.`requests_enabled` = 1
+            LIMIT 1
+        ]], { company_id, data.serviceId })
+        if not available[1] then
+            return { success = false, error = "invalid_service" }
+        end
+        return { success = false, error = "too_many_open_requests" }
+    end
+    emit_request_change(row, true, true, source)
+    notify_company(company_id, "sky_phone:companies:notification", notification_payload(
+        "newRequest",
+        "work",
+        row
+    ), source)
+    local payload, payload_error = mutation_request_payload(source, request_id)
+    if not payload then
+        return payload_error
+    end
+    return { success = true, data = payload }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:cancel-request", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "cancel_request", "RequestAction")
+    if not allowed then
+        return rate_error
+    end
+    local request_id = type(data) == "table" and data.requestId or nil
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    if not valid_uuid(request_id) or not revision then
+        return { success = false, error = "invalid_request" }
+    end
+    local access, access_error = request_access(source, request_id)
+    if not access then
+        return access_error
+    end
+    if terminal_statuses[access.row.status]
+        or (access.audience == "company" and not can_handle_request(access))
+    then
+        return { success = false, error = "invalid_status" }
+    end
+    local actor_type = access.audience
+    local customer_unread_update = actor_type == "company"
+        and ", `customer_unread` = `customer_unread` + 1" or ""
+    local mutation_token = uuid()
+    local event_id = uuid()
+    local event_query
+    local event_params
+    if actor_type == "customer" then
+        event_query = [[
+            INSERT INTO `sky_phone_company_request_events`
+                (`id`, `request_id`, `event_type`, `actor_type`, `from_status`, `to_status`)
+            SELECT ?, `id`, 'cancelled', 'customer', ?, 'cancelled'
+            FROM `sky_phone_company_requests`
+            WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+        ]]
+        event_params = { event_id, access.row.status, request_id, revision + 1, mutation_token }
+    else
+        event_query = [[
+            INSERT INTO `sky_phone_company_request_events`
+                (`id`, `request_id`, `event_type`, `actor_type`, `actor_identifier`, `from_status`, `to_status`)
+            SELECT ?, `id`, 'cancelled', 'company', ?, ?, 'cancelled'
+            FROM `sky_phone_company_requests`
+            WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+        ]]
+        event_params = {
+            event_id,
+            access.member.identifier,
+            access.row.status,
+            request_id,
+            revision + 1,
+            mutation_token,
+        }
+    end
+    if not Bridge.Database.Transaction({
+        {
+            query = (([[
+                UPDATE `sky_phone_company_requests`
+                SET `status` = 'cancelled', `revision` = `revision` + 1,
+                    `cancelled_at` = CURRENT_TIMESTAMP, `mutation_token` = ?%s
+                WHERE `id` = ? AND `revision` = ? AND `status` = ?
+            ]])):format(customer_unread_update),
+            params = { mutation_token, request_id, revision, access.row.status },
+        },
+        { query = event_query, params = event_params },
+    }) then
+        return { success = false, error = "request_failed" }
+    end
+    local committed = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_company_request_events` WHERE `id` = ? LIMIT 1",
+        { event_id }
+    )
+    if not committed[1] then
+        return { success = false, error = "revision_conflict" }
+    end
+    local row = request_row(request_id)
+    emit_request_change(row, true, true, source)
+    if actor_type == "customer" then
+        notify_company(row.company_id, "sky_phone:companies:notification", notification_payload(
+            "requestUpdated",
+            "work",
+            row
+        ), source)
+    else
+        notify_sim(row.customer_sim_id, "sky_phone:companies:notification", notification_payload(
+            "requestUpdated",
+            "customer",
+            row
+        ))
+    end
+    local payload, payload_error = mutation_request_payload(source, request_id)
+    if not payload then
+        return payload_error
+    end
+    return { success = true, data = payload }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:send-message", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "send_message", "Message")
+    if not allowed then
+        return rate_error
+    end
+    local request_id = type(data) == "table" and data.requestId or nil
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    local body = type(data) == "table" and valid_text(data.body, Config.Companies.MessageMaxLength, false) or nil
+    if not valid_uuid(request_id) or not revision or not body then
+        return { success = false, error = "invalid_request" }
+    end
+    local access, access_error = request_access(source, request_id)
+    if not access then
+        return access_error
+    end
+    if terminal_statuses[access.row.status]
+        or (access.audience == "company" and not can_handle_request(access))
+    then
+        return { success = false, error = "invalid_status" }
+    end
+    local message_id = uuid()
+    local mutation_token = uuid()
+    local new_status = access.audience == "customer" and access.row.status == "waiting_customer"
+        and "in_progress" or access.row.status
+    local audience_unread_update = access.audience == "customer"
+        and ", `company_activity_revision` = `company_activity_revision` + 1"
+        or ", `customer_unread` = `customer_unread` + 1"
+    local statements = {
+        {
+            query = ([[
+                UPDATE `sky_phone_company_requests`
+                SET `status` = ?, `revision` = `revision` + 1, `mutation_token` = ?%s
+                WHERE `id` = ? AND `revision` = ? AND `status` = ?
+                    AND `status` NOT IN ('completed', 'cancelled')
+            ]]):format(audience_unread_update),
+            params = { new_status, mutation_token, request_id, revision, access.row.status },
+        },
+    }
+    if access.audience == "customer" then
+        statements[#statements + 1] = {
+            query = [[
+                INSERT INTO `sky_phone_company_request_messages`
+                    (`id`, `request_id`, `sender_type`, `sender_sim_id`, `body`)
+                SELECT ?, `id`, 'customer', ?, ? FROM `sky_phone_company_requests`
+                WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+            ]],
+            params = { message_id, access.row.customer_sim_id, body, request_id, revision + 1, mutation_token },
+        }
+    else
+        statements[#statements + 1] = {
+            query = [[
+                INSERT INTO `sky_phone_company_request_messages`
+                    (`id`, `request_id`, `sender_type`, `sender_identifier`, `body`)
+                SELECT ?, `id`, 'company', ?, ? FROM `sky_phone_company_requests`
+                WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+            ]],
+            params = { message_id, access.member.identifier, body, request_id, revision + 1, mutation_token },
+        }
+    end
+    if new_status ~= access.row.status then
+        statements[#statements + 1] = {
+            query = [[
+                INSERT INTO `sky_phone_company_request_events`
+                    (`id`, `request_id`, `event_type`, `actor_type`, `from_status`, `to_status`)
+                SELECT ?, `id`, 'status', 'customer', ?, ? FROM `sky_phone_company_requests`
+                WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+            ]],
+            params = { uuid(), access.row.status, new_status, request_id, revision + 1, mutation_token },
+        }
+    end
+    if not Bridge.Database.Transaction(statements) then
+        return { success = false, error = "request_failed" }
+    end
+    local inserted = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_company_request_messages` WHERE `id` = ? LIMIT 1",
+        { message_id }
+    )
+    if not inserted[1] then
+        return { success = false, error = "revision_conflict" }
+    end
+    local row = request_row(request_id)
+    emit_request_change(row, true, true, source)
+    if access.audience == "customer" then
+        local notification = notification_payload("newMessage", "work", row)
+        if row.assigned_identifier then
+            notify_identifier(
+                row.assigned_identifier,
+                row.company_id,
+                "sky_phone:companies:notification",
+                notification
+            )
+        end
+    else
+        notify_sim(row.customer_sim_id, "sky_phone:companies:notification", notification_payload(
+            "newMessage",
+            "customer",
+            row
+        ))
+    end
+    local payload, payload_error = mutation_request_payload(source, request_id)
+    if not payload then
+        return payload_error
+    end
+    return { success = true, data = payload }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:claim-request", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "claim_request", "RequestAction")
+    if not allowed then
+        return rate_error
+    end
+    local member, member_error = require_permission(source, "WorkQueue")
+    if not member then
+        return member_error
+    end
+    local request_id = type(data) == "table" and data.requestId or nil
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    if not valid_uuid(request_id) or not revision then
+        return { success = false, error = "invalid_request" }
+    end
+    local mutation_token = uuid()
+    local event_id = uuid()
+    if not Bridge.Database.Transaction({
+        {
+            query = [[
+                UPDATE `sky_phone_company_requests`
+                SET `assigned_identifier` = ?, `status` = 'assigned', `revision` = `revision` + 1,
+                    `customer_unread` = `customer_unread` + 1, `mutation_token` = ?
+                WHERE `id` = ? AND `company_id` = ? AND `revision` = ?
+                    AND `status` = 'new' AND `assigned_identifier` IS NULL
+            ]],
+            params = { member.identifier, mutation_token, request_id, member.company_id, revision },
+        },
+        {
+            query = [[
+                INSERT INTO `sky_phone_company_request_events`
+                    (`id`, `request_id`, `event_type`, `actor_type`, `actor_identifier`, `from_status`, `to_status`)
+                SELECT ?, `id`, 'assigned', 'company', ?, 'new', 'assigned'
+                FROM `sky_phone_company_requests`
+                WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+            ]],
+            params = { event_id, member.identifier, request_id, revision + 1, mutation_token },
+        },
+    }) then
+        return { success = false, error = "request_failed" }
+    end
+    local committed = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_company_request_events` WHERE `id` = ? LIMIT 1",
+        { event_id }
+    )
+    if not committed[1] then
+        local current = Bridge.Database.Query([[
+            SELECT `id` FROM `sky_phone_company_requests`
+            WHERE `id` = ? AND `company_id` = ?
+            LIMIT 1
+        ]], { request_id, member.company_id })
+        return { success = false, error = current[1] and "revision_conflict" or "request_not_found" }
+    end
+    local row = request_row(request_id)
+    emit_request_change(row, true, true, source)
+    notify_sim(row.customer_sim_id, "sky_phone:companies:notification", notification_payload(
+        "assigned",
+        "customer",
+        row
+    ))
+    local payload, payload_error = mutation_request_payload(source, request_id)
+    if not payload then
+        return payload_error
+    end
+    return { success = true, data = payload }
+end)
+
+local function resolve_member(member_id, company_id)
+    if not valid_uuid(member_id) then
+        return nil
+    end
+    local online = {}
+    for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
+        online[tonumber(player_source) or player_source] = true
+    end
+    for target, token in pairs(member_tokens) do
+        if token.token == member_id and token.company_id == company_id and online[target]
+            and os.time() - token.created_at <= 300
+        then
+            local target_member = membership(target)
+            if not target_member or target_member.company_id ~= company_id
+                or target_member.grade < permission_grade(target_member.definition, "WorkQueue")
+            then
+                return nil
+            end
+            local identifier = Bridge.Framework.GetIdentifier(target)
+            if type(identifier) ~= "string" or identifier == "" or identifier ~= token.identifier then
+                return nil
+            end
+            return { source = target, identifier = identifier }
+        end
+    end
+    return nil
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:assign-request", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "assign_request", "RequestAction")
+    if not allowed then
+        return rate_error
+    end
+    local member, member_error = require_permission(source, "Assign")
+    if not member then
+        return member_error
+    end
+    local request_id = type(data) == "table" and data.requestId or nil
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    local target = type(data) == "table" and resolve_member(data.memberId, member.company_id) or nil
+    if not valid_uuid(request_id) or not revision or not target then
+        return { success = false, error = "invalid_request" }
+    end
+    local row = request_row(request_id)
+    if not row or row.company_id ~= member.company_id then
+        return { success = false, error = "request_not_found" }
+    end
+    if terminal_statuses[row.status] then
+        return { success = false, error = "invalid_status" }
+    end
+    if row.assigned_identifier == target.identifier then
+        return { success = false, error = "invalid_status" }
+    end
+    local next_status = row.status == "new" and "assigned" or row.status
+    local mutation_token = uuid()
+    local event_id = uuid()
+    if not Bridge.Database.Transaction({
+        {
+            query = [[
+                UPDATE `sky_phone_company_requests`
+                SET `assigned_identifier` = ?, `status` = ?, `revision` = `revision` + 1,
+                    `customer_unread` = `customer_unread` + 1,
+                    `company_activity_revision` = `company_activity_revision` + 1,
+                    `mutation_token` = ?
+                WHERE `id` = ? AND `company_id` = ? AND `revision` = ? AND `status` = ?
+                    AND `status` NOT IN ('completed', 'cancelled')
+            ]],
+            params = {
+                target.identifier,
+                next_status,
+                mutation_token,
+                request_id,
+                member.company_id,
+                revision,
+                row.status,
+            },
+        },
+        {
+            query = [[
+                INSERT INTO `sky_phone_company_request_events`
+                    (`id`, `request_id`, `event_type`, `actor_type`, `actor_identifier`, `from_status`, `to_status`)
+                SELECT ?, `id`, 'assigned', 'company', ?, ?, ?
+                FROM `sky_phone_company_requests`
+                WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+            ]],
+            params = {
+                event_id,
+                member.identifier,
+                row.status,
+                next_status,
+                request_id,
+                revision + 1,
+                mutation_token,
+            },
+        },
+    }) then
+        return { success = false, error = "request_failed" }
+    end
+    local committed = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_company_request_events` WHERE `id` = ? LIMIT 1",
+        { event_id }
+    )
+    if not committed[1] then
+        return { success = false, error = "revision_conflict" }
+    end
+    row = request_row(request_id)
+    emit_request_change(row, true, true, source)
+    notify_identifier(
+        target.identifier,
+        row.company_id,
+        "sky_phone:companies:notification",
+        notification_payload("assigned", "work", row)
+    )
+    notify_sim(row.customer_sim_id, "sky_phone:companies:notification", notification_payload(
+        "assigned",
+        "customer",
+        row
+    ))
+    local payload, payload_error = mutation_request_payload(source, request_id)
+    if not payload then
+        return payload_error
+    end
+    return { success = true, data = payload }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:update-request-status", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "update_request_status", "RequestAction")
+    if not allowed then
+        return rate_error
+    end
+    local request_id = type(data) == "table" and data.requestId or nil
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    local status = type(data) == "table" and data.status or nil
+    if not valid_uuid(request_id) or not revision or not Config.Companies.Statuses[status] then
+        return { success = false, error = "invalid_request" }
+    end
+    local access, access_error = request_access(source, request_id)
+    if not access then
+        return access_error
+    end
+    if access.audience ~= "company" or not can_handle_request(access) then
+        return { success = false, error = "not_authorized" }
+    end
+    if not status_transitions[access.row.status] or not status_transitions[access.row.status][status] then
+        return { success = false, error = "invalid_status" }
+    end
+    local mutation_token = uuid()
+    local event_id = uuid()
+    if not Bridge.Database.Transaction({
+        {
+            query = [[
+                UPDATE `sky_phone_company_requests`
+                SET `status` = ?, `revision` = `revision` + 1, `customer_unread` = `customer_unread` + 1,
+                    `completed_at` = CASE WHEN ? = 'completed' THEN CURRENT_TIMESTAMP ELSE `completed_at` END,
+                    `cancelled_at` = CASE WHEN ? = 'cancelled' THEN CURRENT_TIMESTAMP ELSE `cancelled_at` END,
+                    `mutation_token` = ?
+                WHERE `id` = ? AND `company_id` = ? AND `revision` = ? AND `status` = ?
+            ]],
+            params = {
+                status,
+                status,
+                status,
+                mutation_token,
+                request_id,
+                access.row.company_id,
+                revision,
+                access.row.status,
+            },
+        },
+        {
+            query = [[
+                INSERT INTO `sky_phone_company_request_events`
+                    (`id`, `request_id`, `event_type`, `actor_type`, `actor_identifier`, `from_status`, `to_status`)
+                SELECT ?, `id`, ?, 'company', ?, ?, ?
+                FROM `sky_phone_company_requests`
+                WHERE `id` = ? AND `revision` = ? AND `mutation_token` = ?
+            ]],
+            params = {
+                event_id,
+                status == "cancelled" and "cancelled" or "status",
+                access.member.identifier,
+                access.row.status,
+                status,
+                request_id,
+                revision + 1,
+                mutation_token,
+            },
+        },
+    }) then
+        return { success = false, error = "request_failed" }
+    end
+    local committed = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_company_request_events` WHERE `id` = ? LIMIT 1",
+        { event_id }
+    )
+    if not committed[1] then
+        return { success = false, error = "revision_conflict" }
+    end
+    local row = request_row(request_id)
+    emit_request_change(row, true, true, source)
+    notify_sim(row.customer_sim_id, "sky_phone:companies:notification", notification_payload(
+        "requestUpdated",
+        "customer",
+        row
+    ))
+    local payload, payload_error = mutation_request_payload(source, request_id)
+    if not payload then
+        return payload_error
+    end
+    return { success = true, data = payload }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:call-customer", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "call_customer", "RequestAction")
+    if not allowed then
+        return rate_error
+    end
+    local request_id = type(data) == "table" and data.requestId or nil
+    if not valid_uuid(request_id) then
+        return { success = false, error = "invalid_request" }
+    end
+    local access, access_error = request_access(source, request_id)
+    if not access then
+        return access_error
+    end
+    if access.audience ~= "company" or not can_handle_request(access) or terminal_statuses[access.row.status] then
+        return { success = false, error = "not_authorized" }
+    end
+    if not SkyPhoneCompanies.CanPlaceCompanyCall(source, access.row.company_id) then
+        return { success = false, error = "not_authorized" }
+    end
+    local rows = Bridge.Database.Query([[
+        SELECT sim.`phone_number`
+        FROM `sky_phone_company_requests` request
+        INNER JOIN `sky_phone_sims` sim ON sim.`id` = request.`customer_sim_id`
+        WHERE request.`id` = ? AND request.`company_id` = ?
+        LIMIT 1
+    ]], { request_id, access.row.company_id })
+    if not rows[1] then
+        return { success = false, error = "call_unavailable" }
+    end
+    local result = SkyPhoneCalls.StartCompanyCall(source, access.row.company_id, rows[1].phone_number)
+    if not result.success and (result.error == "recipient_unavailable" or result.error == "company_unavailable") then
+        return { success = false, error = "call_unavailable" }
+    end
+    return result
+end)
+
+local function company_mutation_payload(source, company_id)
+    local company = company_payload(company_id, true)
+    if not company then
+        return nil
+    end
+    company.updatedAtUnix = nil
+    return { company = company, context = work_context(source) }
+end
+
+local function audit_statement(company_id, identifier, action, target_type, target_id, mutation_token, audit_id)
+    return {
+        query = [[
+            INSERT INTO `sky_phone_company_audit`
+                (`id`, `company_id`, `actor_identifier`, `action`, `target_type`, `target_id`, `metadata`)
+            SELECT ?, `company_id`, ?, ?, ?, ?, ?
+            FROM `sky_phone_company_profiles`
+            WHERE `company_id` = ? AND `mutation_token` = ?
+        ]],
+        params = {
+            audit_id,
+            identifier,
+            action,
+            target_type,
+            target_id,
+            json.encode({ revisionChecked = true }),
+            company_id,
+            mutation_token,
+        },
+    }
+end
+
+local function audit_committed(audit_id)
+    local rows = Bridge.Database.Query([[
+        SELECT `id` FROM `sky_phone_company_audit`
+        WHERE `id` = ?
+        LIMIT 1
+    ]], { audit_id })
+    return rows[1] ~= nil
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:update-availability", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "update_availability", "Profile")
+    if not allowed then
+        return rate_error
+    end
+    local member, member_error = require_permission(source, "Availability")
+    if not member then
+        return member_error
+    end
+    local availability = type(data) == "table" and data.availability or nil
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    if not Config.Companies.AvailabilityStatuses[availability] or not revision then
+        return { success = false, error = "invalid_request" }
+    end
+    local expiry = parse_expiry(data.expiresAt, Config.Companies.AvailabilityMaximumSeconds)
+    if expiry == false then
+        return { success = false, error = "invalid_expiration" }
+    end
+    local mutation_token = uuid()
+    local audit_id = uuid()
+    local update_query
+    local update_params
+    if expiry then
+        update_query = [[
+            UPDATE `sky_phone_company_profiles`
+            SET `availability` = ?, `availability_updated_by` = ?,
+                `availability_updated_at` = CURRENT_TIMESTAMP,
+                `availability_expires_at` = FROM_UNIXTIME(?),
+                `revision` = `revision` + 1, `mutation_token` = ?
+            WHERE `company_id` = ? AND `revision` = ?
+        ]]
+        update_params = { availability, member.identifier, expiry, mutation_token, member.company_id, revision }
+    else
+        update_query = [[
+            UPDATE `sky_phone_company_profiles`
+            SET `availability` = ?, `availability_updated_by` = ?,
+                `availability_updated_at` = CURRENT_TIMESTAMP, `availability_expires_at` = NULL,
+                `revision` = `revision` + 1, `mutation_token` = ?
+            WHERE `company_id` = ? AND `revision` = ?
+        ]]
+        update_params = { availability, member.identifier, mutation_token, member.company_id, revision }
+    end
+    if not Bridge.Database.Transaction({
+        { query = update_query, params = update_params },
+        audit_statement(
+            member.company_id,
+            member.identifier,
+            "update_availability",
+            "profile",
+            member.company_id,
+            mutation_token,
+            audit_id
+        ),
+    }) then
+        return { success = false, error = "request_failed" }
+    end
+    if not audit_committed(audit_id) then
+        return { success = false, error = "revision_conflict" }
+    end
+    emit_public_change(member.company_id)
+    return { success = true, data = company_mutation_payload(source, member.company_id) }
+end)
+
+local function media_id_for_profile(source, value)
+    local media_id = valid_integer(value, 1, 9007199254740991)
+    if not media_id or not SkyPhoneMedia.ResolveOwnedMedia(source, media_id, "photo") then
+        return nil
+    end
+    return media_id
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:update-profile", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "update_profile", "Profile")
+    if not allowed then
+        return rate_error
+    end
+    local member, member_error = require_permission(source, "Profile")
+    if not member then
+        return member_error
+    end
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
+    local revision = valid_integer(data.revision, 1, 4294967295)
+    local description = valid_text(data.description, Config.Companies.ProfileDescriptionMaxLength, true)
+    local district = valid_text(data.district, Config.Companies.DistrictMaxLength, true)
+    local location_label = valid_text(data.locationLabel or "", Config.Companies.DistrictMaxLength, true)
+    local address = valid_text(data.address, Config.Companies.AddressMaxLength, true)
+    if not revision or not description or not district or not location_label or not address
+        or type(data.acceptsRequests) ~= "boolean"
+        or (member.definition.Emergency and data.acceptsRequests)
+    then
+        return { success = false, error = "invalid_profile" }
+    end
+    if data.phoneNumber ~= nil then
+        local number = SkyPhoneSimNumber.Normalize(data.phoneNumber, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
+        if number ~= member.definition.ServiceLine.Number then
+            return { success = false, error = "invalid_profile" }
+        end
+    end
+    local set_parts = {
+        "`description` = ?",
+        "`district` = ?",
+        "`location_label` = ?",
+        "`address` = ?",
+        "`accepts_requests` = ?",
+    }
+    local parameters = { description, district, location_label, address, data.acceptsRequests and 1 or 0 }
+    if data.coords ~= nil then
+        if type(data.coords) ~= "table" then
+            return { success = false, error = "invalid_profile" }
+        end
+        local x = tonumber(data.coords.x)
+        local y = tonumber(data.coords.y)
+        local z = tonumber(data.coords.z)
+        if not x or not y or not z or x ~= x or y ~= y or z ~= z
+            or math.abs(x) > 10000 or math.abs(y) > 10000 or math.abs(z) > 2000
+        then
+            return { success = false, error = "invalid_profile" }
+        end
+        set_parts[#set_parts + 1] = "`location_x` = ?"
+        set_parts[#set_parts + 1] = "`location_y` = ?"
+        set_parts[#set_parts + 1] = "`location_z` = ?"
+        parameters[#parameters + 1] = x
+        parameters[#parameters + 1] = y
+        parameters[#parameters + 1] = z
+    end
+    for _, media_field in ipairs({
+        { input = "logoMediaId", column = "logo_media_id" },
+        { input = "coverMediaId", column = "cover_media_id" },
+    }) do
+        if data[media_field.input] ~= nil then
+            local media_id = media_id_for_profile(source, data[media_field.input])
+            if not media_id then
+                return { success = false, error = "invalid_media" }
+            end
+            set_parts[#set_parts + 1] = ("`%s` = ?"):format(media_field.column)
+            parameters[#parameters + 1] = media_id
+        end
+    end
+    local mutation_token = uuid()
+    local audit_id = uuid()
+    set_parts[#set_parts + 1] = "`revision` = `revision` + 1"
+    set_parts[#set_parts + 1] = "`mutation_token` = ?"
+    parameters[#parameters + 1] = mutation_token
+    parameters[#parameters + 1] = member.company_id
+    parameters[#parameters + 1] = revision
+    if not Bridge.Database.Transaction({
+        {
+            query = ("UPDATE `sky_phone_company_profiles` SET %s WHERE `company_id` = ? AND `revision` = ?")
+                :format(table.concat(set_parts, ", ")),
+            params = parameters,
+        },
+        audit_statement(
+            member.company_id,
+            member.identifier,
+            "update_profile",
+            "profile",
+            member.company_id,
+            mutation_token,
+            audit_id
+        ),
+    }) then
+        return { success = false, error = "request_failed" }
+    end
+    if not audit_committed(audit_id) then
+        return { success = false, error = "revision_conflict" }
+    end
+    emit_public_change(member.company_id)
+    return { success = true, data = company_mutation_payload(source, member.company_id) }
+end)
+
+local function valid_clock(value)
+    if type(value) ~= "string" then
+        return false
+    end
+    local hour, minute = value:match("^(%d%d):(%d%d)$")
+    hour = tonumber(hour)
+    minute = tonumber(minute)
+    return hour and minute and hour <= 23 and minute <= 59
+end
+
+Bridge.Callbacks.Register("sky_phone:companies:update-hours", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "update_hours", "Profile")
+    if not allowed then
+        return rate_error
+    end
+    local member, member_error = require_permission(source, "Hours")
+    if not member then
+        return member_error
+    end
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    local hours = type(data) == "table" and data.hours or nil
+    if not revision or not valid_array(hours, 7) then
+        return { success = false, error = "invalid_profile" }
+    end
+    local seen_days = {}
+    for _, entry in ipairs(hours) do
+        local day = type(entry) == "table" and valid_integer(entry.day, 0, 6) or nil
+        if not day or seen_days[day] or type(entry.isClosed) ~= "boolean"
+            or (not entry.isClosed and (not valid_clock(entry.opensAt) or not valid_clock(entry.closesAt)
+                or entry.opensAt == entry.closesAt))
+        then
+            return { success = false, error = "invalid_profile" }
+        end
+        seen_days[day] = true
+    end
+    local mutation_token = uuid()
+    local audit_id = uuid()
+    local statements = {
+        {
+            query = [[
+                UPDATE `sky_phone_company_profiles`
+                SET `revision` = `revision` + 1, `mutation_token` = ?
+                WHERE `company_id` = ? AND `revision` = ?
+            ]],
+            params = { mutation_token, member.company_id, revision },
+        },
+        {
+            query = [[
+                DELETE hours FROM `sky_phone_company_hours` hours
+                INNER JOIN `sky_phone_company_profiles` profile ON profile.`company_id` = hours.`company_id`
+                WHERE hours.`company_id` = ? AND profile.`mutation_token` = ?
+            ]],
+            params = { member.company_id, mutation_token },
+        },
+    }
+    for _, entry in ipairs(hours) do
+        local query
+        local params
+        if entry.isClosed then
+            query = [[
+                INSERT INTO `sky_phone_company_hours` (`company_id`, `weekday`, `is_closed`)
+                SELECT `company_id`, ?, 1 FROM `sky_phone_company_profiles`
+                WHERE `company_id` = ? AND `mutation_token` = ?
+            ]]
+            params = { entry.day, member.company_id, mutation_token }
+        else
+            query = [[
+                INSERT INTO `sky_phone_company_hours`
+                    (`company_id`, `weekday`, `is_closed`, `opens_at`, `closes_at`)
+                SELECT `company_id`, ?, 0, ?, ? FROM `sky_phone_company_profiles`
+                WHERE `company_id` = ? AND `mutation_token` = ?
+            ]]
+            params = { entry.day, entry.opensAt, entry.closesAt, member.company_id, mutation_token }
+        end
+        statements[#statements + 1] = { query = query, params = params }
+    end
+    statements[#statements + 1] = audit_statement(
+        member.company_id,
+        member.identifier,
+        "update_hours",
+        "hours",
+        member.company_id,
+        mutation_token,
+        audit_id
+    )
+    if not Bridge.Database.Transaction(statements) then
+        return { success = false, error = "request_failed" }
+    end
+    if not audit_committed(audit_id) then
+        return { success = false, error = "revision_conflict" }
+    end
+    emit_public_change(member.company_id)
+    return { success = true, data = company_mutation_payload(source, member.company_id) }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:update-services", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "update_services", "Profile")
+    if not allowed then
+        return rate_error
+    end
+    local member, member_error = require_permission(source, "Services")
+    if not member then
+        return member_error
+    end
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    local services = type(data) == "table" and data.services or nil
+    if not revision or not valid_array(services, Config.Companies.MaximumServices) then
+        return { success = false, error = "invalid_profile" }
+    end
+    local existing_rows = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_company_services` WHERE `company_id` = ? AND `archived` = 0",
+        { member.company_id }
+    )
+    local existing = {}
+    for _, row in ipairs(existing_rows) do
+        existing[row.id] = true
+    end
+    local normalized = {}
+    local seen = {}
+    for index, service in ipairs(services) do
+        if type(service) ~= "table" or type(service.active) ~= "boolean"
+            or type(service.acceptsRequests) ~= "boolean"
+        then
+            return { success = false, error = "invalid_profile" }
+        end
+        local title = valid_text(service.title, Config.Companies.ServiceTitleMaxLength, false)
+        local description = valid_text(
+            service.description or "",
+            Config.Companies.ServiceDescriptionMaxLength,
+            true
+        )
+        local price = service.priceText == nil and ""
+            or valid_text(service.priceText, Config.Companies.ServicePriceMaxLength, true)
+        if not title or not description or not price then
+            return { success = false, error = "invalid_profile" }
+        end
+        local service_id = valid_service_id(service.id) and existing[service.id] and service.id or uuid()
+        if seen[service_id] then
+            return { success = false, error = "invalid_profile" }
+        end
+        seen[service_id] = true
+        normalized[#normalized + 1] = {
+            id = service_id,
+            title = title,
+            description = description,
+            price = price,
+            accepts_requests = service.acceptsRequests,
+            active = service.active,
+            sort_order = index,
+        }
+    end
+    local mutation_token = uuid()
+    local audit_id = uuid()
+    local statements = {
+        {
+            query = [[
+                UPDATE `sky_phone_company_profiles`
+                SET `revision` = `revision` + 1, `mutation_token` = ?
+                WHERE `company_id` = ? AND `revision` = ?
+            ]],
+            params = { mutation_token, member.company_id, revision },
+        },
+        {
+            query = [[
+                UPDATE `sky_phone_company_services` service
+                INNER JOIN `sky_phone_company_profiles` profile ON profile.`company_id` = service.`company_id`
+                SET service.`active` = 0, service.`requests_enabled` = 0, service.`archived` = 1
+                WHERE service.`company_id` = ? AND profile.`mutation_token` = ?
+            ]],
+            params = { member.company_id, mutation_token },
+        },
+    }
+    for _, service in ipairs(normalized) do
+        statements[#statements + 1] = {
+            query = [[
+                INSERT INTO `sky_phone_company_services`
+                    (`id`, `company_id`, `title`, `description`, `price_text`, `requests_enabled`, `active`, `sort_order`)
+                SELECT ?, `company_id`, ?, ?, ?, ?, ?, ? FROM `sky_phone_company_profiles`
+                WHERE `company_id` = ? AND `mutation_token` = ?
+                ON DUPLICATE KEY UPDATE
+                    `title` = VALUES(`title`), `description` = VALUES(`description`),
+                    `price_text` = VALUES(`price_text`), `requests_enabled` = VALUES(`requests_enabled`),
+                    `active` = VALUES(`active`), `archived` = 0, `sort_order` = VALUES(`sort_order`)
+            ]],
+            params = {
+                service.id,
+                service.title,
+                service.description,
+                service.price,
+                service.accepts_requests and 1 or 0,
+                service.active and 1 or 0,
+                service.sort_order,
+                member.company_id,
+                mutation_token,
+            },
+        }
+    end
+    statements[#statements + 1] = audit_statement(
+        member.company_id,
+        member.identifier,
+        "update_services",
+        "services",
+        member.company_id,
+        mutation_token,
+        audit_id
+    )
+    if not Bridge.Database.Transaction(statements) then
+        return { success = false, error = "request_failed" }
+    end
+    if not audit_committed(audit_id) then
+        return { success = false, error = "revision_conflict" }
+    end
+    emit_public_change(member.company_id)
+    return { success = true, data = company_mutation_payload(source, member.company_id) }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:publish-announcement", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "publish_announcement", "Profile")
+    if not allowed then
+        return rate_error
+    end
+    local member, member_error = require_permission(source, "Announcement")
+    if not member then
+        return member_error
+    end
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    local body = type(data) == "table"
+        and valid_text(data.body or "", Config.Companies.AnnouncementBodyMaxLength, true) or nil
+    if not revision or body == nil then
+        return { success = false, error = "invalid_profile" }
+    end
+    local expiry = parse_expiry(data.expiresAt, Config.Companies.AnnouncementMaximumSeconds)
+    if expiry == false then
+        return { success = false, error = "invalid_expiration" }
+    end
+    local mutation_token = uuid()
+    local audit_id = uuid()
+    local statements = {
+        {
+            query = [[
+                UPDATE `sky_phone_company_profiles`
+                SET `revision` = `revision` + 1, `mutation_token` = ?
+                WHERE `company_id` = ? AND `revision` = ?
+            ]],
+            params = { mutation_token, member.company_id, revision },
+        },
+        {
+            query = [[
+                UPDATE `sky_phone_company_announcements` announcement
+                INNER JOIN `sky_phone_company_profiles` profile ON profile.`company_id` = announcement.`company_id`
+                SET announcement.`active` = 0
+                WHERE announcement.`company_id` = ? AND profile.`mutation_token` = ?
+            ]],
+            params = { member.company_id, mutation_token },
+        },
+    }
+    if body ~= "" then
+        local insert_query
+        local insert_params
+        if expiry then
+            insert_query = [[
+                INSERT INTO `sky_phone_company_announcements`
+                    (`id`, `company_id`, `title`, `body`, `created_by`, `expires_at`)
+                SELECT ?, `company_id`, '', ?, ?, FROM_UNIXTIME(?) FROM `sky_phone_company_profiles`
+                WHERE `company_id` = ? AND `mutation_token` = ?
+            ]]
+            insert_params = { uuid(), body, member.identifier, expiry, member.company_id, mutation_token }
+        else
+            insert_query = [[
+                INSERT INTO `sky_phone_company_announcements`
+                    (`id`, `company_id`, `title`, `body`, `created_by`)
+                SELECT ?, `company_id`, '', ?, ? FROM `sky_phone_company_profiles`
+                WHERE `company_id` = ? AND `mutation_token` = ?
+            ]]
+            insert_params = { uuid(), body, member.identifier, member.company_id, mutation_token }
+        end
+        statements[#statements + 1] = { query = insert_query, params = insert_params }
+    end
+    statements[#statements + 1] = audit_statement(
+        member.company_id,
+        member.identifier,
+        "publish_announcement",
+        "announcement",
+        member.company_id,
+        mutation_token,
+        audit_id
+    )
+    if not Bridge.Database.Transaction(statements) then
+        return { success = false, error = "request_failed" }
+    end
+    if not audit_committed(audit_id) then
+        return { success = false, error = "revision_conflict" }
+    end
+    emit_public_change(member.company_id)
+    return { success = true, data = company_mutation_payload(source, member.company_id) }
+end)
+
+Bridge.Callbacks.Register("sky_phone:companies:set-call-availability", function(source, data)
+    local allowed, rate_error = allow_mutation(source, "set_call_availability", "CallAvailability")
+    if not allowed then
+        return rate_error
+    end
+    if type(data) ~= "table" or type(data.available) ~= "boolean" then
+        return { success = false, error = "invalid_request" }
+    end
+    if not data.available then
+        SkyPhoneCompanies.ClearCallAvailability(source)
+        return { success = true, data = { context = work_context(source) } }
+    end
+    local member = call_member(source)
+    if not member or not member.definition.ServiceLine.CanCall then
+        return { success = false, error = "not_authorized" }
+    end
+    local device, device_error = current_device(source, true)
+    if not device then
+        return device_error
+    end
+    call_availability[source] = {
+        company_id = member.company_id,
+        sim_id = device.sim_id,
+        imei = device.imei,
+    }
+    return { success = true, data = { context = work_context(source) } }
+end)
+
+AddEventHandler("playerDropped", function()
+    SkyPhoneCompanies.ClearCallAvailability(source)
+    member_tokens[source] = nil
+end)
+
+AddEventHandler("onResourceStop", function(resource_name)
+    if resource_name ~= GetCurrentResourceName() then
+        return
+    end
+    call_availability = {}
+    round_robin_positions = {}
+    member_tokens = {}
+end)
+end)
diff --git a/sky_phone/source/server/custom_app_compat.lua b/sky_phone/source/server/custom_app_compat.lua
new file mode 100644
index 0000000..25196d2
--- /dev/null
+++ b/sky_phone/source/server/custom_app_compat.lua
@@ -0,0 +1,138 @@
+local RESOURCE_NAME = GetCurrentResourceName()
+local SNAPSHOT_COOLDOWN_MS = 2000
+local SNAPSHOT_REJECTION_LOG_COOLDOWN_MS = 10000
+local registered_apps = {}
+local snapshot_requests = {}
+local snapshot_rejection_logs = {}
+
+local function get_calling_resource(export_name)
+    local owner_resource = GetInvokingResource()
+    if owner_resource then
+        return owner_resource
+    end
+
+    print(("[%s] %s rejected: the export must be called by another resource."):format(
+        RESOURCE_NAME,
+        export_name
+    ))
+    return nil, "invalid_owner"
+end
+
+local function add_high_application(app_name, data, locales)
+    local owner_resource, owner_error = get_calling_resource("addApplication")
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local definition, definition_error = SkyPhoneCompatibility.BuildHighDefinition(
+        owner_resource,
+        app_name,
+        data,
+        locales
+    )
+    if not definition then
+        print(("[%s] High Phone registration rejected for %s: %s."):format(
+            RESOURCE_NAME,
+            owner_resource,
+            definition_error
+        ))
+        return false, definition_error
+    end
+
+    local existing = registered_apps[app_name]
+    if existing and existing.owner_resource ~= owner_resource then
+        return false, "duplicate_app_id"
+    end
+
+    local revision = existing and existing.revision + 1 or 1
+    registered_apps[app_name] = {
+        definition = definition,
+        owner_resource = owner_resource,
+        revision = revision,
+    }
+    TriggerClientEvent(
+        "sky_phone:compat:high:client:syncApplication",
+        -1,
+        owner_resource,
+        definition,
+        revision
+    )
+    return true
+end
+
+local function build_snapshot()
+    local ids = {}
+    for app_id in pairs(registered_apps) do
+        ids[#ids + 1] = app_id
+    end
+    table.sort(ids)
+
+    local snapshot = {}
+    for index = 1, #ids do
+        snapshot[index] = registered_apps[ids[index]]
+    end
+    return snapshot
+end
+
+RegisterNetEvent("sky_phone:compat:high:server:requestSnapshot", function()
+    local player_source = source
+    if player_source <= 0 then
+        print(("[%s] Rejected High Phone snapshot request without a player source."):format(
+            RESOURCE_NAME
+        ))
+        return
+    end
+
+    local now = GetGameTimer()
+    local last_request = snapshot_requests[player_source]
+    local elapsed = last_request and now - last_request or SNAPSHOT_COOLDOWN_MS
+    if elapsed >= 0 and elapsed < SNAPSHOT_COOLDOWN_MS then
+        local last_log = snapshot_rejection_logs[player_source]
+        local log_elapsed = last_log and now - last_log or SNAPSHOT_REJECTION_LOG_COOLDOWN_MS
+        if log_elapsed < 0 or log_elapsed >= SNAPSHOT_REJECTION_LOG_COOLDOWN_MS then
+            snapshot_rejection_logs[player_source] = now
+            print(("[%s] Rate-limited High Phone snapshot request from player %s."):format(
+                RESOURCE_NAME,
+                player_source
+            ))
+        end
+        return
+    end
+    snapshot_requests[player_source] = now
+
+    TriggerClientEvent(
+        "sky_phone:compat:high:client:replaceSnapshot",
+        player_source,
+        build_snapshot()
+    )
+end)
+
+AddEventHandler("playerDropped", function()
+    snapshot_requests[source] = nil
+    snapshot_rejection_logs[source] = nil
+end)
+
+AddEventHandler("onResourceStop", function(resource_name)
+    if resource_name == RESOURCE_NAME then
+        return
+    end
+
+    local removed_ids = {}
+    for app_id, record in pairs(registered_apps) do
+        if record.owner_resource == resource_name then
+            removed_ids[#removed_ids + 1] = app_id
+        end
+    end
+    for index = 1, #removed_ids do
+        local app_id = removed_ids[index]
+        registered_apps[app_id] = nil
+        TriggerClientEvent(
+            "sky_phone:compat:high:client:removeApplication",
+            -1,
+            resource_name,
+            app_id
+        )
+    end
+end)
+
+exports("addApplication", add_high_application)
diff --git a/sky_phone/source/server/custom_app_storage.lua b/sky_phone/source/server/custom_app_storage.lua
new file mode 100644
index 0000000..c777e39
--- /dev/null
+++ b/sky_phone/source/server/custom_app_storage.lua
@@ -0,0 +1,271 @@
+Bridge.Database.AfterMigration("sky_phone", function()
+local STORAGE_JSON_MAX_DEPTH = 8
+local STORAGE_JSON_MAX_NODES = 512
+local STORAGE_KEY_MAX_LENGTH = math.min(Config.CustomApps.MaximumStorageKeyLength, 64)
+local STORAGE_VALUE_MAX_BYTES = math.min(Config.CustomApps.MaximumStorageValueBytes, 65536)
+local storage_write_locks = {}
+
+local function affected_rows(result)
+    if type(result) == "number" then
+        return result
+    end
+
+    return type(result) == "table" and tonumber(result.affectedRows) or 0
+end
+
+local function validate_storage_json(value, depth, state)
+    state.nodes = state.nodes + 1
+    if state.nodes > STORAGE_JSON_MAX_NODES or depth > STORAGE_JSON_MAX_DEPTH then
+        return false
+    end
+
+    local value_type = type(value)
+    if value_type == "nil" or value_type == "boolean" then
+        return true
+    end
+    if value_type == "number" then
+        return value == value and value ~= math.huge and value ~= -math.huge
+    end
+    if value_type == "string" then
+        return #value <= STORAGE_VALUE_MAX_BYTES
+    end
+    if value_type ~= "table" or state.seen[value] then
+        return false
+    end
+
+    state.seen[value] = true
+    local key_type = nil
+    local numeric_keys = 0
+    local value_count = 0
+    for key, nested_value in pairs(value) do
+        value_count = value_count + 1
+        local current_key_type = type(key)
+        if current_key_type == "number" then
+            if key < 1 or key % 1 ~= 0 then
+                state.seen[value] = nil
+                return false
+            end
+            numeric_keys = numeric_keys + 1
+        elseif current_key_type ~= "string"
+            or #key == 0
+            or #key > 64
+            or key == "__proto__"
+            or key == "constructor"
+            or key == "prototype"
+        then
+            state.seen[value] = nil
+            return false
+        end
+
+        if key_type and key_type ~= current_key_type then
+            state.seen[value] = nil
+            return false
+        end
+        key_type = current_key_type
+
+        if not validate_storage_json(nested_value, depth + 1, state) then
+            state.seen[value] = nil
+            return false
+        end
+    end
+
+    if key_type == "number" and (numeric_keys ~= value_count or #value ~= value_count) then
+        state.seen[value] = nil
+        return false
+    end
+
+    state.seen[value] = nil
+    return true
+end
+
+local function with_storage_write_lock(lock_key, callback)
+    local previous_lock = storage_write_locks[lock_key]
+    local current_lock = promise.new()
+    storage_write_locks[lock_key] = current_lock
+
+    if previous_lock then
+        Citizen.Await(previous_lock)
+    end
+
+    local success, result = xpcall(callback, debug.traceback)
+    current_lock:resolve(true)
+    if storage_write_locks[lock_key] == current_lock then
+        storage_write_locks[lock_key] = nil
+    end
+    if not success then
+        error(result, 0)
+    end
+    return result
+end
+
+local function validate_request(source, data, operation)
+    if not Config.CustomApps.Enabled then
+        return nil, nil, { success = false, error = "custom_apps_disabled" }
+    end
+    if not SkyPhone.AllowOperation(
+        source,
+        "custom_app_storage_" .. operation,
+        Config.CustomApps.StorageRequestsPerMinute,
+        60
+    ) then
+        return nil, nil, { success = false, error = "rate_limited" }
+    end
+
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, nil, error_response
+    end
+    if type(data) ~= "table" or not SkyPhoneApps.HasPermission(data.appId, "device.storage") then
+        return nil, nil, { success = false, error = "storage_not_allowed" }
+    end
+    if type(data.key) ~= "string"
+        or #data.key == 0
+        or #data.key > STORAGE_KEY_MAX_LENGTH
+        or not data.key:match("^[%w._-]+$")
+    then
+        return nil, nil, { success = false, error = "invalid_storage_key" }
+    end
+
+    return session, data, nil
+end
+
+local function read_row(imei, app_id, data_key)
+    local rows = Bridge.Database.Query([[
+        SELECT `payload`, `revision`
+        FROM `sky_phone_custom_app_data`
+        WHERE `device_imei` = ? AND `app_id` = ? AND `data_key` = ?
+        LIMIT 1
+    ]], { imei, app_id, data_key })
+    return rows[1]
+end
+
+local function conflict_response(row)
+    if not row then
+        return {
+            success = false,
+            error = "storage_conflict",
+            data = { exists = false, revision = 0 },
+        }
+    end
+
+    return {
+        success = false,
+        error = "storage_conflict",
+        data = {
+            exists = true,
+            revision = tonumber(row.revision) or 0,
+            value = json.decode(row.payload),
+        },
+    }
+end
+
+Bridge.Callbacks.Register("sky_phone:custom-app:storage:get", function(source, data)
+    local session, request, error_response = validate_request(source, data, "get")
+    if not session then
+        return error_response
+    end
+
+    local row = read_row(session.imei, request.appId, request.key)
+    if not row then
+        return { success = true, data = { exists = false, revision = 0 } }
+    end
+
+    return {
+        success = true,
+        data = {
+            exists = true,
+            revision = tonumber(row.revision) or 0,
+            value = json.decode(row.payload),
+        },
+    }
+end)
+
+Bridge.Callbacks.Register("sky_phone:custom-app:storage:set", function(source, data)
+    local session, request, error_response = validate_request(source, data, "set")
+    if not session then
+        return error_response
+    end
+    if request.value == nil then
+        return { success = false, error = "invalid_storage_value" }
+    end
+
+    local expected_revision = tonumber(request.revision)
+    if not expected_revision
+        or expected_revision ~= math.floor(expected_revision)
+        or expected_revision < 0
+        or expected_revision > 4294967294
+    then
+        return { success = false, error = "invalid_storage_revision" }
+    end
+
+    if not validate_storage_json(request.value, 0, { nodes = 0, seen = {} }) then
+        return { success = false, error = "invalid_storage_value" }
+    end
+
+    local encoded, payload = pcall(json.encode, request.value)
+    if not encoded
+        or type(payload) ~= "string"
+        or #payload > STORAGE_VALUE_MAX_BYTES
+    then
+        return { success = false, error = "storage_value_too_large" }
+    end
+
+    local lock_key = session.imei .. "\0" .. request.appId
+    return with_storage_write_lock(lock_key, function()
+        local current_session, session_error = SkyPhone.RequireSession(source)
+        if not current_session then
+            return session_error
+        end
+        if current_session.imei ~= session.imei
+            or not SkyPhoneApps.HasPermission(request.appId, "device.storage")
+        then
+            return { success = false, error = "storage_not_allowed" }
+        end
+
+        local current = read_row(session.imei, request.appId, request.key)
+        local current_revision = current and tonumber(current.revision) or 0
+        if current_revision ~= expected_revision then
+            return conflict_response(current)
+        end
+
+        local totals = Bridge.Database.Query([[
+            SELECT COALESCE(SUM(OCTET_LENGTH(`payload`)), 0) AS `total`, COUNT(*) AS `keys`
+            FROM `sky_phone_custom_app_data`
+            WHERE `device_imei` = ? AND `app_id` = ?
+        ]], { session.imei, request.appId })
+        local current_size = current and #current.payload or 0
+        local next_total = (tonumber(totals[1] and totals[1].total) or 0) - current_size + #payload
+        if next_total > Config.CustomApps.MaximumStorageBytesPerApp then
+            return { success = false, error = "storage_quota_exceeded" }
+        end
+        if not current
+            and (tonumber(totals[1] and totals[1].keys) or 0) >= Config.CustomApps.MaximumStorageKeysPerApp
+        then
+            return { success = false, error = "storage_key_limit" }
+        end
+
+        if expected_revision == 0 then
+            local inserted = Bridge.Database.Query([[
+                INSERT IGNORE INTO `sky_phone_custom_app_data`
+                    (`device_imei`, `app_id`, `data_key`, `payload`, `revision`)
+                VALUES (?, ?, ?, ?, 1)
+            ]], { session.imei, request.appId, request.key, payload })
+            if affected_rows(inserted) ~= 1 then
+                return conflict_response(read_row(session.imei, request.appId, request.key))
+            end
+            return { success = true, data = { revision = 1 } }
+        end
+
+        local updated = Bridge.Database.Query([[
+            UPDATE `sky_phone_custom_app_data`
+            SET `payload` = ?, `revision` = `revision` + 1
+            WHERE `device_imei` = ? AND `app_id` = ? AND `data_key` = ? AND `revision` = ?
+        ]], { payload, session.imei, request.appId, request.key, expected_revision })
+        if affected_rows(updated) ~= 1 then
+            return conflict_response(read_row(session.imei, request.appId, request.key))
+        end
+
+        return { success = true, data = { revision = expected_revision + 1 } }
+    end)
+end)
+end)
diff --git a/sky_phone/source/server/custom_apps.lua b/sky_phone/source/server/custom_apps.lua
new file mode 100644
index 0000000..e53219b
--- /dev/null
+++ b/sky_phone/source/server/custom_apps.lua
@@ -0,0 +1,385 @@
+local policies_by_id = {}
+local policy_ids_by_adapter = {}
+local policy_ids_by_owner = {}
+local current_resource = GetCurrentResourceName()
+
+local function validate_owner_resource(owner_resource, allow_stopping)
+    if type(owner_resource) ~= "string"
+        or #owner_resource == 0
+        or #owner_resource > 64
+        or not owner_resource:match("^[%w][%w._-]*$")
+    then
+        return false, "invalid_owner_resource"
+    end
+
+    local state = GetResourceState(owner_resource)
+    if state == "started" or state == "starting" or (allow_stopping and state == "stopping") then
+        return true
+    end
+
+    return false, "owner_resource_not_running"
+end
+
+local function add_owner_index(index, resource_name, app_id)
+    local app_ids = index[resource_name]
+    if not app_ids then
+        app_ids = {}
+        index[resource_name] = app_ids
+    end
+    app_ids[app_id] = true
+end
+
+local function remove_owner_index(index, resource_name, app_id)
+    local app_ids = index[resource_name]
+    if not app_ids then
+        return
+    end
+
+    app_ids[app_id] = nil
+    if not next(app_ids) then
+        index[resource_name] = nil
+    end
+end
+
+local function build_permission_set(permissions)
+    local permission_set = {}
+    for index = 1, #permissions do
+        permission_set[permissions[index]] = true
+    end
+    return permission_set
+end
+
+local function register_policy(policy)
+    local app_id = policy.id
+    local existing = policies_by_id[app_id]
+    if existing then
+        print((
+            "[sky_phone] Rejected duplicate custom app policy '%s' from '%s'; it is already owned by '%s'."
+        ):format(app_id, policy.ownerResource, existing.ownerResource))
+        return false, "duplicate_app_id"
+    end
+
+    policies_by_id[app_id] = policy
+    add_owner_index(policy_ids_by_owner, policy.ownerResource, app_id)
+    if policy.adapterResource then
+        add_owner_index(policy_ids_by_adapter, policy.adapterResource, app_id)
+    end
+    return true
+end
+
+local function remove_policy(app_id)
+    local policy = policies_by_id[app_id]
+    if not policy then
+        return false, "app_not_found"
+    end
+
+    policies_by_id[app_id] = nil
+    remove_owner_index(policy_ids_by_owner, policy.ownerResource, app_id)
+    if policy.adapterResource then
+        remove_owner_index(policy_ids_by_adapter, policy.adapterResource, app_id)
+    end
+    return true
+end
+
+local function get_direct_owner()
+    local owner_resource = GetInvokingResource()
+    if not owner_resource then
+        return nil, "missing_invoking_resource"
+    end
+
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return nil, owner_error
+    end
+
+    return owner_resource
+end
+
+local function get_trusted_adapter()
+    local adapter_resource = GetInvokingResource()
+    if not adapter_resource or not Config.CustomApps.TrustedAdapters[adapter_resource] then
+        return nil, "untrusted_adapter"
+    end
+
+    local valid_adapter, adapter_error = validate_owner_resource(adapter_resource, false)
+    if not valid_adapter then
+        return nil, adapter_error
+    end
+
+    return adapter_resource
+end
+
+local function normalize_policy(owner_resource, adapter_resource, definition)
+    if type(definition) ~= "table" then
+        return nil, "invalid_definition"
+    end
+    if definition.schemaVersion ~= nil and definition.schemaVersion ~= SkyPhoneApps.ProtocolVersion then
+        return nil, "unsupported_schema_version"
+    end
+
+    local valid_id, id_error = SkyPhoneApps.ValidateAppId(definition.id)
+    if not valid_id then
+        return nil, id_error
+    end
+    if SkyPhoneApps.ReservedAppIds[definition.id] then
+        return nil, "reserved_app_id"
+    end
+
+    local permissions, permissions_error = SkyPhoneApps.ValidatePermissions(definition.permissions)
+    if not permissions then
+        return nil, permissions_error
+    end
+
+    return {
+        adapterResource = adapter_resource,
+        bundled = false,
+        id = definition.id,
+        ownerResource = owner_resource,
+        permissions = build_permission_set(permissions),
+    }
+end
+
+local function add_custom_app_policy(definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local policy, policy_error = normalize_policy(owner_resource, nil, definition)
+    if not policy then
+        return false, policy_error
+    end
+    return register_policy(policy)
+end
+
+local function add_custom_app_policy_from_adapter(owner_resource, definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+
+    local policy, policy_error = normalize_policy(owner_resource, adapter_resource, definition)
+    if not policy then
+        return false, policy_error
+    end
+    return register_policy(policy)
+end
+
+local function verify_owned_policy(owner_resource, app_id, adapter_resource)
+    local valid_id, id_error = SkyPhoneApps.ValidateAppId(app_id)
+    if not valid_id then
+        return nil, id_error
+    end
+
+    local policy = policies_by_id[app_id]
+    if not policy then
+        return nil, "app_not_found"
+    end
+    if policy.ownerResource ~= owner_resource then
+        return nil, "app_owner_mismatch"
+    end
+    if adapter_resource and policy.adapterResource ~= adapter_resource then
+        return nil, "app_adapter_mismatch"
+    end
+
+    return policy
+end
+
+local function replace_policy(policy, adapter_resource)
+    local existing, policy_error = verify_owned_policy(
+        policy.ownerResource,
+        policy.id,
+        adapter_resource
+    )
+    if not existing then
+        return false, policy_error
+    end
+    if existing.bundled then
+        return false, "bundled_app"
+    end
+
+    policies_by_id[policy.id] = policy
+    return true
+end
+
+local function update_custom_app_policy(definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local policy, policy_error = normalize_policy(owner_resource, nil, definition)
+    if not policy then
+        return false, policy_error
+    end
+    return replace_policy(policy, nil)
+end
+
+local function update_custom_app_policy_from_adapter(owner_resource, definition)
+    if not Config.CustomApps.Enabled or not Config.CustomApps.ExternalApps then
+        return false, "external_apps_disabled"
+    end
+
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+    local valid_owner, owner_error = validate_owner_resource(owner_resource, false)
+    if not valid_owner then
+        return false, owner_error
+    end
+
+    local policy, policy_error = normalize_policy(owner_resource, adapter_resource, definition)
+    if not policy then
+        return false, policy_error
+    end
+    return replace_policy(policy, adapter_resource)
+end
+
+local function remove_custom_app_policy(app_id)
+    local owner_resource, owner_error = get_direct_owner()
+    if not owner_resource then
+        return false, owner_error
+    end
+
+    local policy, policy_error = verify_owned_policy(owner_resource, app_id)
+    if not policy then
+        return false, policy_error
+    end
+    if policy.bundled then
+        return false, "bundled_app"
+    end
+
+    return remove_policy(app_id)
+end
+
+local function remove_custom_app_policy_from_adapter(owner_resource, app_id)
+    local adapter_resource, adapter_error = get_trusted_adapter()
+    if not adapter_resource then
+        return false, adapter_error
+    end
+
+    local policy, policy_error = verify_owned_policy(owner_resource, app_id, adapter_resource)
+    if not policy then
+        return false, policy_error
+    end
+    return remove_policy(app_id)
+end
+
+local function has_custom_app_permission(app_id, permission)
+    local valid_id = SkyPhoneApps.ValidateAppId(app_id)
+    if not valid_id or type(permission) ~= "string" or not SkyPhoneApps.AllowedPermissions[permission] then
+        return false
+    end
+
+    local policy = policies_by_id[app_id]
+    return policy ~= nil and policy.permissions[permission] == true
+end
+
+local function get_custom_app_policy(app_id)
+    local valid_id = SkyPhoneApps.ValidateAppId(app_id)
+    if not valid_id then
+        return nil
+    end
+
+    local policy = policies_by_id[app_id]
+    if not policy then
+        return nil
+    end
+
+    local permissions = {}
+    for permission in pairs(policy.permissions) do
+        permissions[#permissions + 1] = permission
+    end
+    table.sort(permissions)
+    return {
+        bundled = policy.bundled,
+        id = policy.id,
+        ownerResource = policy.ownerResource,
+        permissions = permissions,
+    }
+end
+
+local function get_custom_app_capabilities()
+    return {
+        abiVersion = 1,
+        enabled = Config.CustomApps.Enabled,
+        policyRegistration = true,
+        policyUpdate = true,
+        protocolVersion = SkyPhoneApps.ProtocolVersion,
+    }
+end
+
+SkyPhoneApps.GetPolicy = get_custom_app_policy
+SkyPhoneApps.HasPermission = has_custom_app_permission
+
+if Config.CustomApps.Enabled and Config.CustomApps.BundledApps then
+    local bundled = SkyPhoneApps.GetBundledManifests()
+    for index = 1, #bundled do
+        local manifest = bundled[index]
+        local registered, register_error = register_policy({
+            adapterResource = nil,
+            bundled = true,
+            id = manifest.id,
+            ownerResource = current_resource,
+            permissions = build_permission_set(manifest.permissions),
+        })
+        if not registered then
+            error(("[sky_phone] Could not register bundled custom app policy '%s': %s"):format(
+                manifest.id,
+                register_error
+            ))
+        end
+    end
+end
+
+exports("AddCustomAppPolicy", add_custom_app_policy)
+exports("AddCustomAppPolicyFromAdapter", add_custom_app_policy_from_adapter)
+exports("GetCustomAppCapabilities", get_custom_app_capabilities)
+exports("GetCustomAppPolicy", get_custom_app_policy)
+exports("HasCustomAppPermission", has_custom_app_permission)
+exports("RemoveCustomAppPolicy", remove_custom_app_policy)
+exports("RemoveCustomAppPolicyFromAdapter", remove_custom_app_policy_from_adapter)
+exports("UpdateCustomAppPolicy", update_custom_app_policy)
+exports("UpdateCustomAppPolicyFromAdapter", update_custom_app_policy_from_adapter)
+
+AddEventHandler("onResourceStop", function(resource_name)
+    if resource_name == current_resource then
+        return
+    end
+
+    local app_ids = {}
+    local owner_policies = policy_ids_by_owner[resource_name]
+    if owner_policies then
+        for app_id in pairs(owner_policies) do
+            app_ids[app_id] = true
+        end
+    end
+
+    local adapter_policies = policy_ids_by_adapter[resource_name]
+    if adapter_policies then
+        for app_id in pairs(adapter_policies) do
+            app_ids[app_id] = true
+        end
+    end
+
+    for app_id in pairs(app_ids) do
+        remove_policy(app_id)
+    end
+end)
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 4b113ba..b088676 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -208,6 +208,56 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_custom_app_data",
+        columns = {
+            { name = "id", type = "BIGINT UNSIGNED NOT NULL AUTO_INCREMENT" },
+            {
+                name = "device_imei",
+                type = "CHAR(15) NOT NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            {
+                name = "app_id",
+                type = "VARCHAR(64) NOT NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            {
+                name = "data_key",
+                type = "VARCHAR(64) NOT NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            { name = "payload", type = "LONGTEXT NOT NULL" },
+            { name = "revision", type = "INT UNSIGNED NOT NULL DEFAULT 1" },
+            {
+                name = "updated_at",
+                type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP",
+            },
+        },
+        primaryKey = "id",
+        uniqueKeys = {
+            {
+                name = "uniq_sky_phone_custom_app_data",
+                columns = "(`device_imei`, `app_id`, `data_key`)",
+            },
+        },
+        indexes = {
+            {
+                name = "idx_sky_phone_custom_app_storage",
+                columns = "(`device_imei`, `app_id`, `updated_at`)",
+            },
+        },
+        foreignKeys = {
+            {
+                column = "device_imei",
+                references = "`sky_phone_devices` (`imei`) ON DELETE CASCADE",
+            },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
     {
         name = "sky_phone_device_security",
         columns = {
@@ -2069,6 +2119,242 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_company_profiles",
+        columns = {
+            { name = "company_id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "description", type = "VARCHAR(1000) NOT NULL DEFAULT ''" },
+            { name = "district", type = "VARCHAR(80) NOT NULL DEFAULT ''" },
+            { name = "location_label", type = "VARCHAR(80) NOT NULL DEFAULT ''" },
+            { name = "address", type = "VARCHAR(160) NOT NULL DEFAULT ''" },
+            { name = "location_x", type = "DECIMAL(10,3) NULL" },
+            { name = "location_y", type = "DECIMAL(10,3) NULL" },
+            { name = "location_z", type = "DECIMAL(10,3) NULL" },
+            { name = "logo_media_id", type = "BIGINT UNSIGNED NULL" },
+            { name = "cover_media_id", type = "BIGINT UNSIGNED NULL" },
+            { name = "availability", type = "ENUM('available','busy','closed') NOT NULL DEFAULT 'closed'" },
+            { name = "availability_updated_by", type = "VARCHAR(80) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "availability_updated_at", type = "DATETIME NULL" },
+            { name = "availability_expires_at", type = "DATETIME NULL" },
+            { name = "accepts_requests", type = "TINYINT(1) NOT NULL DEFAULT 1" },
+            { name = "revision", type = "INT UNSIGNED NOT NULL DEFAULT 1" },
+            { name = "mutation_token", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "company_id",
+        indexes = {
+            { name = "idx_sky_phone_company_profiles_public", columns = "(`availability`, `updated_at`)" },
+        },
+        foreignKeys = {
+            { column = "logo_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
+            { column = "cover_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_hours",
+        columns = {
+            { name = "id", type = "BIGINT UNSIGNED NOT NULL AUTO_INCREMENT" },
+            { name = "company_id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "weekday", type = "TINYINT UNSIGNED NOT NULL" },
+            { name = "is_closed", type = "TINYINT(1) NOT NULL DEFAULT 0" },
+            { name = "opens_at", type = "CHAR(5) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "closes_at", type = "CHAR(5) NULL", characterSet = "ascii", collation = "ascii_bin" },
+        },
+        primaryKey = "id",
+        uniqueKeys = {
+            { name = "uniq_sky_phone_company_hours_day", columns = "(`company_id`, `weekday`)" },
+        },
+        foreignKeys = {
+            { column = "company_id", references = "`sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_services",
+        columns = {
+            { name = "id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "company_id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "title", type = "VARCHAR(80) NOT NULL" },
+            { name = "description", type = "VARCHAR(500) NOT NULL DEFAULT ''" },
+            { name = "price_text", type = "VARCHAR(80) NOT NULL DEFAULT ''" },
+            { name = "requests_enabled", type = "TINYINT(1) NOT NULL DEFAULT 1" },
+            { name = "active", type = "TINYINT(1) NOT NULL DEFAULT 1" },
+            { name = "archived", type = "TINYINT(1) NOT NULL DEFAULT 0" },
+            { name = "sort_order", type = "TINYINT UNSIGNED NOT NULL DEFAULT 0" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_company_services_list", columns = "(`company_id`, `archived`, `active`, `sort_order`)" },
+        },
+        foreignKeys = {
+            { column = "company_id", references = "`sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_announcements",
+        columns = {
+            { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "company_id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "title", type = "VARCHAR(120) NOT NULL" },
+            { name = "body", type = "VARCHAR(1000) NOT NULL" },
+            { name = "created_by", type = "VARCHAR(80) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "active", type = "TINYINT(1) NOT NULL DEFAULT 1" },
+            { name = "expires_at", type = "DATETIME NULL" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_company_announcements_active", columns = "(`company_id`, `active`, `expires_at`, `created_at`)" },
+        },
+        foreignKeys = {
+            { column = "company_id", references = "`sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_requests",
+        columns = {
+            { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "company_id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "service_id", type = "VARCHAR(64) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "customer_sim_id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "subject", type = "VARCHAR(120) NOT NULL" },
+            { name = "description", type = "VARCHAR(2000) NOT NULL" },
+            { name = "status", type = "ENUM('new','assigned','in_progress','waiting_customer','completed','cancelled') NOT NULL DEFAULT 'new'" },
+            { name = "assigned_identifier", type = "VARCHAR(80) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "customer_unread", type = "INT UNSIGNED NOT NULL DEFAULT 0" },
+            { name = "company_activity_revision", type = "INT UNSIGNED NOT NULL DEFAULT 1" },
+            { name = "revision", type = "INT UNSIGNED NOT NULL DEFAULT 1" },
+            { name = "mutation_token", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+            { name = "completed_at", type = "DATETIME NULL" },
+            { name = "cancelled_at", type = "DATETIME NULL" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_company_requests_customer", columns = "(`customer_sim_id`, `updated_at`, `id`)" },
+            { name = "idx_sky_phone_company_requests_queue", columns = "(`company_id`, `status`, `updated_at`, `id`)" },
+            { name = "idx_sky_phone_company_requests_assignee", columns = "(`company_id`, `assigned_identifier`, `status`)" },
+        },
+        foreignKeys = {
+            { column = "company_id", references = "`sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE" },
+            { column = "service_id", references = "`sky_phone_company_services` (`id`) ON DELETE SET NULL" },
+            { column = "customer_sim_id", references = "`sky_phone_sims` (`id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_request_reads",
+        columns = {
+            { name = "id", type = "BIGINT UNSIGNED NOT NULL AUTO_INCREMENT" },
+            { name = "request_id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "reader_identifier", type = "VARCHAR(80) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "read_revision", type = "INT UNSIGNED NOT NULL DEFAULT 0" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "id",
+        uniqueKeys = {
+            { name = "uniq_sky_phone_company_request_reads_reader", columns = "(`request_id`, `reader_identifier`)" },
+        },
+        indexes = {
+            { name = "idx_sky_phone_company_request_reads_identifier", columns = "(`reader_identifier`, `updated_at`)" },
+        },
+        foreignKeys = {
+            { column = "request_id", references = "`sky_phone_company_requests` (`id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_request_media",
+        columns = {
+            { name = "id", type = "BIGINT UNSIGNED NOT NULL AUTO_INCREMENT" },
+            { name = "request_id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "media_id", type = "BIGINT UNSIGNED NOT NULL" },
+            { name = "sort_order", type = "TINYINT UNSIGNED NOT NULL DEFAULT 0" },
+        },
+        primaryKey = "id",
+        uniqueKeys = {
+            { name = "uniq_sky_phone_company_request_media", columns = "(`request_id`, `media_id`)" },
+            { name = "uniq_sky_phone_company_request_media_order", columns = "(`request_id`, `sort_order`)" },
+        },
+        foreignKeys = {
+            { column = "request_id", references = "`sky_phone_company_requests` (`id`) ON DELETE CASCADE" },
+            { column = "media_id", references = "`sky_phone_media` (`id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_request_messages",
+        columns = {
+            { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "request_id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "sender_type", type = "ENUM('customer','company') NOT NULL" },
+            { name = "sender_identifier", type = "VARCHAR(80) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "sender_sim_id", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "body", type = "VARCHAR(2000) NOT NULL" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_company_request_messages", columns = "(`request_id`, `created_at`, `id`)" },
+        },
+        foreignKeys = {
+            { column = "request_id", references = "`sky_phone_company_requests` (`id`) ON DELETE CASCADE" },
+            { column = "sender_sim_id", references = "`sky_phone_sims` (`id`) ON DELETE SET NULL" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_request_events",
+        columns = {
+            { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "request_id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "event_type", type = "ENUM('created','assigned','status','cancelled') NOT NULL" },
+            { name = "actor_type", type = "ENUM('customer','company','system') NOT NULL" },
+            { name = "actor_identifier", type = "VARCHAR(80) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "from_status", type = "VARCHAR(32) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "to_status", type = "VARCHAR(32) NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "detail", type = "VARCHAR(255) NOT NULL DEFAULT ''" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_company_request_events", columns = "(`request_id`, `created_at`, `id`)" },
+        },
+        foreignKeys = {
+            { column = "request_id", references = "`sky_phone_company_requests` (`id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_company_audit",
+        columns = {
+            { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "company_id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "actor_identifier", type = "VARCHAR(80) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "action", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "target_type", type = "VARCHAR(32) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "target_id", type = "VARCHAR(64) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "metadata", type = "LONGTEXT NOT NULL" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_company_audit", columns = "(`company_id`, `created_at`, `id`)" },
+        },
+        foreignKeys = {
+            { column = "company_id", references = "`sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
 }
 
 Bridge.Database.Migrate("sky_phone", schema)
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index e25f8dd..cb37275 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -569,6 +569,7 @@ function SkyPhone.RequireDeviceSession(source)
 
     local matches = find_device_slots(source, session.imei)
     if not matches[1] then
+        SkyPhoneCompanies.ClearCallAvailability(source)
         sessions[source] = nil
         TriggerClientEvent("sky_phone:device:invalidated", source)
         return nil, { success = false, error = "device_not_owned" }
@@ -722,6 +723,9 @@ local function open_phone(source, used_item)
     end
 
     local security = load_device_security(imei)
+    if sessions[source] and sessions[source].imei ~= imei then
+        SkyPhoneCompanies.ClearCallAvailability(source)
+    end
     sessions[source] = {
         imei = imei,
         slot = slot.slot,
@@ -750,6 +754,9 @@ function SkyPhone.OpenDeviceForCall(source, imei)
         return false
     end
     local security = load_device_security(imei)
+    if sessions[source] and sessions[source].imei ~= imei then
+        SkyPhoneCompanies.ClearCallAvailability(source)
+    end
     sessions[source] = {
         imei = imei,
         slot = matches[1].slot,
@@ -776,10 +783,23 @@ Bridge.Debug(
 )
 
 Bridge.Callbacks.Register("sky_phone:device:close", function(source)
+    SkyPhoneCompanies.ClearCallAvailability(source)
     sessions[source] = nil
     return { success = true }
 end)
 
+Bridge.Callbacks.Register("sky_phone:device:notification-open", function(source, data)
+    if not SkyPhone.AllowOperation(source, "notification_open", 10, 60)
+        or type(data) ~= "table" or type(data.imei) ~= "string"
+    then
+        return { success = false, error = "invalid_request" }
+    end
+    if not SkyPhone.OpenDeviceForCall(source, data.imei) then
+        return { success = false, error = "device_not_owned" }
+    end
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:security:unlock", function(source, data)
     if not SkyPhone.AllowOperation(source, "security_unlock", Config.Security.AttemptsPerMinute, 60) then
         return { success = false, error = "rate_limited" }
@@ -1087,6 +1107,10 @@ Bridge.Callbacks.Register("sky_phone:device:factory-reset", function(source)
             query = "DELETE FROM `sky_phone_device_data` WHERE `device_imei` = ?",
             params = { session.imei },
         },
+        {
+            query = "DELETE FROM `sky_phone_custom_app_data` WHERE `device_imei` = ?",
+            params = { session.imei },
+        },
         {
             query = "DELETE FROM `sky_phone_notes` WHERE `device_imei` = ? AND `account_id` IS NULL",
             params = { session.imei },
@@ -1129,6 +1153,7 @@ Bridge.Callbacks.Register("sky_phone:device:factory-reset", function(source)
 end)
 
 AddEventHandler("playerDropped", function()
+    SkyPhoneCompanies.ClearCallAvailability(source)
     sessions[source] = nil
     auth_attempts[source] = nil
     operation_attempts[source] = nil
diff --git a/sky_phone/source/server/sim.lua b/sky_phone/source/server/sim.lua
index 601e810..f931e77 100644
--- a/sky_phone/source/server/sim.lua
+++ b/sky_phone/source/server/sim.lua
@@ -27,6 +27,9 @@ end
 local function reserve_sim(sim_type)
     local sim_id
     local number = SkyPhoneSimNumber.Reserve(uuid, function(candidate)
+        if SkyPhoneCompanies.IsServiceNumber(candidate) then
+            return false
+        end
         sim_id = uuid()
         local result = Bridge.Database.Query([[
             INSERT IGNORE INTO `sky_phone_sims` (`id`, `phone_number`, `sim_type`)
@@ -85,6 +88,15 @@ local function ensure_sim(source, slot, sim_type)
     if metadata.sim_id and (not sim or sim.sim_type ~= sim_type or sim.phone_number ~= metadata.phone_number) then
         return nil, "invalid_sim"
     end
+    if sim and SkyPhoneCompanies.IsServiceNumber(sim.phone_number) then
+        Bridge.Debug(
+            "error",
+            "[sky_phone] SIM %s uses reserved company service number %s.",
+            tostring(sim.id),
+            tostring(sim.phone_number)
+        )
+        return nil, "invalid_sim"
+    end
     if not sim then
         sim = reserve_sim(sim_type)
         if not Bridge.Inventory.SetSlotMetadata(source, slot.slot, sim_metadata(sim)) then
@@ -129,6 +141,16 @@ local function insert_sim(source, phone_imei, confirmed)
         pending_insertions[source] = nil
         return { success = false, error = "sim_request_expired" }
     end
+    if SkyPhoneCompanies.IsServiceNumber(pending.sim.phone_number) then
+        pending_insertions[source] = nil
+        Bridge.Debug(
+            "error",
+            "[sky_phone] Refused to insert SIM %s with reserved company service number %s.",
+            tostring(pending.sim.id),
+            tostring(pending.sim.phone_number)
+        )
+        return { success = false, error = "invalid_sim" }
+    end
     local sim_slot = Bridge.Inventory.GetSlot(source, pending.slot)
     if not sim_slot or sim_slot.name ~= pending.item_name or not sim_slot.metadata
         or sim_slot.metadata.sim_id ~= pending.sim.id then
@@ -203,6 +225,7 @@ local function insert_sim(source, phone_imei, confirmed)
     pending_insertions[source] = nil
     operation_locks[source] = nil
     if old_sim then
+        SkyPhoneCompanies.ClearCallAvailability(source)
         SkyPhoneCalls.EndForSim(old_sim.id, "sim_removed")
     end
     SkyPhone.RefreshDevice(phone_imei)
@@ -304,6 +327,7 @@ Bridge.Callbacks.Register("sky_phone:sim:eject", function(source)
         return { success = false, error = "request_failed" }
     end
     operation_locks[source] = nil
+    SkyPhoneCompanies.ClearCallAvailability(source)
     SkyPhoneCalls.EndForSim(sim.id, "sim_removed")
     SkyPhone.RefreshDevice(session.imei)
     return { success = true }
diff --git a/sky_phone/source/shared/custom_app_compat.lua b/sky_phone/source/shared/custom_app_compat.lua
new file mode 100644
index 0000000..d69b0b2
--- /dev/null
+++ b/sky_phone/source/shared/custom_app_compat.lua
@@ -0,0 +1,229 @@
+SkyPhoneCompatibility = {}
+
+SkyPhoneCompatibility.Providers = {
+    lb = "lb_phone",
+    seventeen = "17mov",
+    high = "high_phone",
+    quasar = "quasar_v3",
+    yseries = "yseries",
+}
+
+local function normalize_at_resource_url(owner_resource, url, error_prefix)
+    if type(url) ~= "string" or url == "" then
+        return nil, "invalid_" .. error_prefix
+    end
+    if url:sub(1, 7) == "http://" then
+        return nil, "insecure_" .. error_prefix
+    end
+    if url:sub(1, 1) ~= "@" then
+        return url
+    end
+
+    local url_owner, url_path = url:match("^@([^/]+)/(.+)$")
+    if url_owner ~= owner_resource or not url_path then
+        return nil, error_prefix .. "_owner_mismatch"
+    end
+    return owner_resource .. "/" .. url_path
+end
+
+local function build_locale_maps(app_name, locales)
+    local names = {}
+    local descriptions = {}
+
+    if type(locales) == "table" then
+        for locale, locale_data in pairs(locales) do
+            if type(locale) == "string" and type(locale_data) == "table" then
+                if type(locale_data.label) == "string" and locale_data.label ~= "" then
+                    names[locale] = locale_data.label
+                end
+                if type(locale_data.description) == "string" and locale_data.description ~= "" then
+                    descriptions[locale] = locale_data.description
+                end
+            end
+        end
+    end
+
+    if not next(names) then
+        return app_name, app_name
+    end
+    for locale, label in pairs(names) do
+        if not descriptions[locale] then
+            descriptions[locale] = label
+        end
+    end
+    return names, descriptions
+end
+
+function SkyPhoneCompatibility.CopyQuasarData(app_data)
+    local copy = {}
+    for key, value in pairs(app_data) do
+        if key == "iframe" and type(value) == "table" then
+            copy.iframe = {}
+            for iframe_key, iframe_value in pairs(value) do
+                copy.iframe[iframe_key] = iframe_value
+            end
+        else
+            copy[key] = value
+        end
+    end
+    return copy
+end
+
+function SkyPhoneCompatibility.BuildLbDefinition(owner_resource, app_data)
+    if type(app_data) ~= "table" or type(app_data.identifier) ~= "string" then
+        return nil, "invalid_app_data"
+    end
+
+    local ui, ui_error = normalize_at_resource_url(owner_resource, app_data.ui, "ui")
+    if not ui then
+        return nil, ui_error
+    end
+
+    return {
+        schemaVersion = 1,
+        id = app_data.identifier,
+        name = app_data.name,
+        description = app_data.description,
+        developer = app_data.developer,
+        category = app_data.game and "games" or "utilities",
+        ui = ui,
+        bridgeMode = "legacy",
+        icon = app_data.icon,
+        defaultInstalled = app_data.defaultApp or false,
+        removable = not app_data.defaultApp,
+        orientation = app_data.landscape and "landscape" or "portrait",
+        onInstall = app_data.onInstall,
+        onOpen = app_data.onOpen or app_data.onUse,
+        onClose = app_data.onClose,
+        compatibility = {
+            provider = SkyPhoneCompatibility.Providers.lb,
+            apiVersion = 1,
+        },
+    }
+end
+
+function SkyPhoneCompatibility.Build17MovDefinition(app_data)
+    if type(app_data) ~= "table" or type(app_data.name) ~= "string" then
+        return nil, "invalid_app_data"
+    end
+
+    return {
+        schemaVersion = 1,
+        id = app_data.name,
+        name = app_data.label,
+        description = app_data.description or app_data.label,
+        category = "utilities",
+        ui = app_data.ui,
+        bridgeMode = "legacy",
+        icon = app_data.icon,
+        iconBackground = type(app_data.iconBackground) == "string" and app_data.iconBackground or nil,
+        defaultInstalled = app_data.default or app_data.preInstalled or false,
+        removable = not app_data.default,
+        orientation = "portrait",
+        compatibility = {
+            provider = SkyPhoneCompatibility.Providers.seventeen,
+            apiVersion = 1,
+        },
+    }
+end
+
+function SkyPhoneCompatibility.BuildHighDefinition(owner_resource, app_name, data, locales)
+    if type(owner_resource) ~= "string" or type(app_name) ~= "string" or type(data) ~= "table" then
+        return nil, "invalid_app_data"
+    end
+    if #app_name > 64 or not app_name:match("^[a-z0-9][a-z0-9._-]+$") then
+        return nil, "invalid_app_id"
+    end
+
+    local external_url, url_error = normalize_at_resource_url(
+        owner_resource,
+        data.externalUrl,
+        "external_url"
+    )
+    if not external_url then
+        return nil, url_error
+    end
+
+    local name, description = build_locale_maps(app_name, locales)
+    local icon = type(data.icon) == "table" and data.icon.imageUrl or data.icon
+    return {
+        schemaVersion = 1,
+        id = app_name,
+        name = name,
+        description = description,
+        developer = data.developer,
+        category = "utilities",
+        ui = external_url,
+        bridgeMode = "legacy",
+        icon = icon,
+        iconBackground = type(data.icon) == "table" and data.icon.background or nil,
+        defaultInstalled = data.preAdded or false,
+        removable = data.removable ~= false,
+        orientation = "portrait",
+        compatibility = {
+            provider = SkyPhoneCompatibility.Providers.high,
+            apiVersion = 1,
+        },
+    }
+end
+
+function SkyPhoneCompatibility.BuildQuasarDefinition(app_data)
+    local iframe_url = type(app_data) == "table"
+        and type(app_data.iframe) == "table"
+        and app_data.iframe.url
+        or nil
+    if type(app_data) ~= "table"
+        or type(app_data.id) ~= "string"
+        or type(app_data.label) ~= "string"
+        or type(iframe_url) ~= "string"
+    then
+        return nil, "invalid_app_data"
+    end
+
+    return {
+        schemaVersion = 1,
+        id = app_data.id,
+        name = app_data.label,
+        description = app_data.description or app_data.label,
+        category = "utilities",
+        ui = iframe_url,
+        bridgeMode = "legacy",
+        icon = app_data.icon,
+        defaultInstalled = app_data.defaultInstalled or false,
+        removable = true,
+        orientation = "portrait",
+        compatibility = {
+            provider = SkyPhoneCompatibility.Providers.quasar,
+            apiVersion = 1,
+        },
+    }
+end
+
+function SkyPhoneCompatibility.BuildYSeriesDefinition(app_data)
+    if type(app_data) ~= "table" or type(app_data.key) ~= "string" then
+        return nil, "invalid_app_data"
+    end
+
+    local icon = app_data.icon
+    if type(icon) == "table" then
+        icon = icon.yos or icon.humanoid
+    end
+
+    return {
+        schemaVersion = 1,
+        id = app_data.key,
+        name = app_data.name,
+        description = app_data.description or app_data.name,
+        category = app_data.game and "games" or "utilities",
+        ui = app_data.ui,
+        bridgeMode = "legacy",
+        icon = icon,
+        defaultInstalled = app_data.defaultApp or false,
+        removable = true,
+        orientation = "portrait",
+        compatibility = {
+            provider = SkyPhoneCompatibility.Providers.yseries,
+            apiVersion = 1,
+        },
+    }
+end
diff --git a/sky_phone/source/shared/custom_apps.lua b/sky_phone/source/shared/custom_apps.lua
new file mode 100644
index 0000000..a21d199
--- /dev/null
+++ b/sky_phone/source/shared/custom_apps.lua
@@ -0,0 +1,451 @@
+local APP_ID_MAX_LENGTH = 64
+local DESCRIPTION_MAX_LENGTH = 320
+local DEVELOPER_MAX_LENGTH = 96
+local NAME_MAX_LENGTH = 64
+local PATH_MAX_LENGTH = 512
+local VERSION_MAX_LENGTH = 32
+
+local ALLOWED_CATEGORIES = {
+    games = true,
+    productivity = true,
+    shopping = true,
+    social = true,
+    utilities = true,
+}
+
+local ALLOWED_ORIENTATIONS = {
+    any = true,
+    landscape = true,
+    portrait = true,
+}
+
+local ALLOWED_PERMISSIONS = {
+    ["app.close"] = true,
+    ["app.open"] = true,
+    ["camera.capture"] = true,
+    ["contacts.pick"] = true,
+    ["device.storage"] = true,
+    ["locale.read"] = true,
+    ["location.read"] = true,
+    ["media.pick"] = true,
+    ["notifications"] = true,
+    ["notifications.critical"] = true,
+    ["nui.fetch"] = true,
+    ["theme.read"] = true,
+}
+
+local RESERVED_APP_IDS = {
+    ["app-store"] = true,
+    banking = true,
+    billing = true,
+    calculator = true,
+    calendar = true,
+    camera = true,
+    citymarkt = true,
+    clock = true,
+    companies = true,
+    crewlink = true,
+    darkchat = true,
+    feather = true,
+    flare = true,
+    fliptok = true,
+    garage = true,
+    house = true,
+    ["local-pages"] = true,
+    mail = true,
+    map = true,
+    memory = true,
+    messages = true,
+    minesweeper = true,
+    music = true,
+    ["neon-drop"] = true,
+    notes = true,
+    ["number-merge"] = true,
+    phone = true,
+    photos = true,
+    picstagram = true,
+    radio = true,
+    settings = true,
+    ["sky-flappy"] = true,
+    skyride = true,
+    snake = true,
+    ["tower-stack"] = true,
+    weather = true,
+}
+
+local bundled_manifests = {}
+local bundled_manifests_by_id = {}
+
+SkyPhoneApps = SkyPhoneApps or {}
+SkyPhoneApps.ProtocolVersion = 1
+
+local function trim(value)
+    return value:match("^%s*(.-)%s*$")
+end
+
+local function validate_app_id(app_id)
+    if type(app_id) ~= "string" then
+        return false, "invalid_app_id"
+    end
+
+    if #app_id == 0 or #app_id > APP_ID_MAX_LENGTH then
+        return false, "invalid_app_id"
+    end
+
+    if not app_id:match("^[a-z0-9][a-z0-9._-]+$") then
+        return false, "invalid_app_id"
+    end
+
+    return true
+end
+
+local function validate_text(value, error_code, maximum_length, required)
+    if value == nil and not required then
+        return nil
+    end
+
+    if type(value) ~= "string" then
+        return nil, error_code
+    end
+
+    local normalized = trim(value)
+    if (required and #normalized == 0) or #normalized > maximum_length then
+        return nil, error_code
+    end
+
+    return normalized
+end
+
+local function validate_localized_text(value, error_code, maximum_length, required)
+    if type(value) == "string" then
+        return validate_text(value, error_code, maximum_length, required)
+    end
+
+    if type(value) ~= "table" then
+        return nil, error_code
+    end
+
+    local normalized = {}
+    local count = 0
+    for locale, text in pairs(value) do
+        if type(locale) ~= "string" or not locale:match("^[a-zA-Z][a-zA-Z0-9_-]*$") then
+            return nil, error_code
+        end
+
+        local normalized_text = validate_text(text, error_code, maximum_length, true)
+        if not normalized_text then
+            return nil, error_code
+        end
+
+        count = count + 1
+        if count > 16 then
+            return nil, error_code
+        end
+
+        normalized[locale:lower():gsub("_", "-")] = normalized_text
+    end
+
+    if count == 0 then
+        return nil, error_code
+    end
+
+    return normalized
+end
+
+local function validate_local_path(path, required)
+    if path == nil and not required then
+        return nil
+    end
+
+    if type(path) ~= "string" or #path == 0 or #path > PATH_MAX_LENGTH then
+        return nil, "invalid_local_path"
+    end
+
+    if path:sub(1, 1) == "/" or path:find("\\", 1, true) or path:find(":", 1, true) then
+        return nil, "invalid_local_path"
+    end
+
+    if not path:match("^web/[%w%._%-%/]+$") then
+        return nil, "invalid_local_path"
+    end
+
+    for segment in path:gmatch("[^/]+") do
+        if segment == "." or segment == ".." then
+            return nil, "invalid_local_path"
+        end
+    end
+
+    return path
+end
+
+local function validate_string_array(value, error_code, maximum_items, validator)
+    if value == nil then
+        return {}
+    end
+
+    if type(value) ~= "table" then
+        return nil, error_code
+    end
+
+    local normalized = {}
+    local count = 0
+    for key in pairs(value) do
+        if type(key) ~= "number" or key < 1 or key % 1 ~= 0 then
+            return nil, error_code
+        end
+        count = count + 1
+    end
+
+    if count ~= #value or count > maximum_items then
+        return nil, error_code
+    end
+
+    for index = 1, count do
+        local item = value[index]
+        if type(item) ~= "string" then
+            return nil, error_code
+        end
+
+        local normalized_item, validation_error = validator(item)
+        if not normalized_item then
+            return nil, validation_error or error_code
+        end
+
+        normalized[index] = normalized_item
+    end
+
+    return normalized
+end
+
+local function validate_permissions(value)
+    local permissions, error_code = validate_string_array(
+        value,
+        "invalid_permissions",
+        32,
+        function(permission)
+            if not ALLOWED_PERMISSIONS[permission] then
+                return nil, "unknown_permission"
+            end
+            return permission
+        end
+    )
+    if not permissions then
+        return nil, error_code
+    end
+
+    local seen = {}
+    for index = 1, #permissions do
+        local permission = permissions[index]
+        if seen[permission] then
+            return nil, "duplicate_permission"
+        end
+        seen[permission] = true
+    end
+
+    return permissions
+end
+
+local function validate_grid_order(value)
+    if value == nil then
+        return nil
+    end
+
+    if type(value) ~= "number" or value ~= math.floor(value) or value < 0 or value > 9999 then
+        return nil, "invalid_grid_order"
+    end
+
+    return value
+end
+
+local function validate_icon_background(value)
+    if value == nil then
+        return nil
+    end
+
+    if type(value) ~= "string" or #value == 0 or #value > 64 then
+        return nil, "invalid_icon_background"
+    end
+
+    if value:find("[\r\n;{}]") then
+        return nil, "invalid_icon_background"
+    end
+
+    return value
+end
+
+local function normalize_manifest(folder, definition)
+    if type(folder) ~= "string" or type(definition) ~= "table" then
+        return nil, "invalid_manifest"
+    end
+
+    if definition.schemaVersion ~= SkyPhoneApps.ProtocolVersion then
+        return nil, "unsupported_schema_version"
+    end
+
+    local app_id = definition.id
+    local valid_id, id_error = validate_app_id(app_id)
+    if not valid_id then
+        return nil, id_error
+    end
+    if RESERVED_APP_IDS[app_id] then
+        return nil, "reserved_app_id"
+    end
+    if folder ~= app_id then
+        return nil, "folder_id_mismatch"
+    end
+
+    if definition.defaultInstalled ~= nil and type(definition.defaultInstalled) ~= "boolean" then
+        return nil, "invalid_default_installed"
+    end
+    if definition.removable ~= nil and type(definition.removable) ~= "boolean" then
+        return nil, "invalid_removable"
+    end
+
+    local version, version_error = validate_text(
+        definition.version or "1.0.0",
+        "invalid_version",
+        VERSION_MAX_LENGTH,
+        true
+    )
+    if not version then
+        return nil, version_error
+    end
+    if not version:match("^[%w%._+-]+$") then
+        return nil, "invalid_version"
+    end
+
+    local name, name_error = validate_localized_text(
+        definition.name,
+        "invalid_name",
+        NAME_MAX_LENGTH,
+        true
+    )
+    if not name then
+        return nil, name_error
+    end
+
+    local description, description_error = validate_localized_text(
+        definition.description,
+        "invalid_description",
+        DESCRIPTION_MAX_LENGTH,
+        true
+    )
+    if not description then
+        return nil, description_error
+    end
+
+    local developer, developer_error = validate_text(
+        definition.developer,
+        "invalid_developer",
+        DEVELOPER_MAX_LENGTH,
+        false
+    )
+    if definition.developer ~= nil and not developer then
+        return nil, developer_error
+    end
+
+    local category = definition.category or "utilities"
+    if not ALLOWED_CATEGORIES[category] then
+        return nil, "invalid_category"
+    end
+
+    local entry, entry_error = validate_local_path(definition.entry, true)
+    if not entry then
+        return nil, entry_error
+    end
+
+    local icon, icon_error = validate_local_path(definition.icon, false)
+    if definition.icon ~= nil and not icon then
+        return nil, icon_error
+    end
+
+    local screenshots, screenshots_error = validate_string_array(
+        definition.screenshots,
+        "invalid_screenshots",
+        8,
+        function(path)
+            return validate_local_path(path, true)
+        end
+    )
+    if not screenshots then
+        return nil, screenshots_error
+    end
+
+    local permissions, permissions_error = validate_permissions(definition.permissions)
+    if not permissions then
+        return nil, permissions_error
+    end
+
+    local orientation = definition.orientation or "portrait"
+    if not ALLOWED_ORIENTATIONS[orientation] then
+        return nil, "invalid_orientation"
+    end
+
+    local grid_order, grid_order_error = validate_grid_order(definition.gridOrder)
+    if definition.gridOrder ~= nil and not grid_order then
+        return nil, grid_order_error
+    end
+
+    local icon_background, background_error = validate_icon_background(definition.iconBackground)
+    if definition.iconBackground ~= nil and not icon_background then
+        return nil, background_error
+    end
+
+    local bridge_mode = definition.bridgeMode or "sky"
+    if bridge_mode ~= "sky" and bridge_mode ~= "legacy" then
+        return nil, "invalid_bridge_mode"
+    end
+
+    return {
+        bridgeMode = bridge_mode,
+        category = category,
+        defaultInstalled = definition.defaultInstalled == true,
+        description = description,
+        developer = developer,
+        entry = entry,
+        folder = folder,
+        gridOrder = grid_order,
+        icon = icon,
+        iconBackground = icon_background,
+        id = app_id,
+        name = name,
+        orientation = orientation,
+        permissions = permissions,
+        removable = definition.removable ~= false,
+        schemaVersion = SkyPhoneApps.ProtocolVersion,
+        screenshots = screenshots,
+        version = version,
+    }
+end
+
+---@param folder string App folder relative to custom_apps.
+---@param definition table Declarative bundled app manifest.
+function SkyPhoneApps.RegisterManifest(folder, definition)
+    local manifest, error_code = normalize_manifest(folder, definition)
+    if not manifest then
+        error(("[sky_phone] Invalid custom app manifest '%s': %s"):format(tostring(folder), error_code), 2)
+    end
+
+    if bundled_manifests_by_id[manifest.id] then
+        error(("[sky_phone] Duplicate bundled custom app id '%s'."):format(manifest.id), 2)
+    end
+
+    bundled_manifests[#bundled_manifests + 1] = manifest
+    bundled_manifests_by_id[manifest.id] = manifest
+end
+
+function SkyPhoneApps.GetBundledManifests()
+    return bundled_manifests
+end
+
+function SkyPhoneApps.GetBundledManifest(app_id)
+    return bundled_manifests_by_id[app_id]
+end
+
+SkyPhoneApps.AllowedCategories = ALLOWED_CATEGORIES
+SkyPhoneApps.AllowedOrientations = ALLOWED_ORIENTATIONS
+SkyPhoneApps.AllowedPermissions = ALLOWED_PERMISSIONS
+SkyPhoneApps.ReservedAppIds = RESERVED_APP_IDS
+SkyPhoneApps.ValidateAppId = validate_app_id
+SkyPhoneApps.ValidateLocalizedText = validate_localized_text
+SkyPhoneApps.ValidatePermissions = validate_permissions
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 7e93c5d..f7127dc 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -92,6 +92,20 @@ CREATE TABLE IF NOT EXISTS `sky_phone_device_data` (
     FOREIGN KEY (`device_imei`) REFERENCES `sky_phone_devices` (`imei`) ON DELETE CASCADE
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
+CREATE TABLE IF NOT EXISTS `sky_phone_custom_app_data` (
+    `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
+    `device_imei` CHAR(15) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `app_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `data_key` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `payload` LONGTEXT NOT NULL,
+    `revision` INT UNSIGNED NOT NULL DEFAULT 1,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `uniq_sky_phone_custom_app_data` (`device_imei`, `app_id`, `data_key`),
+    KEY `idx_sky_phone_custom_app_storage` (`device_imei`, `app_id`, `updated_at`),
+    FOREIGN KEY (`device_imei`) REFERENCES `sky_phone_devices` (`imei`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
 CREATE TABLE IF NOT EXISTS `sky_phone_device_security` (
     `device_imei` CHAR(15) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
     `passcode_hash` BINARY(32) NOT NULL,
@@ -929,3 +943,167 @@ CREATE TABLE IF NOT EXISTS `sky_phone_crewlink_pings` (
     FOREIGN KEY (`group_id`) REFERENCES `sky_phone_crewlink_groups` (`id`) ON DELETE CASCADE,
     FOREIGN KEY (`creator_profile_id`) REFERENCES `sky_phone_crewlink_profiles` (`id`) ON DELETE SET NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_profiles` (
+    `company_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `description` VARCHAR(1000) NOT NULL DEFAULT '',
+    `district` VARCHAR(80) NOT NULL DEFAULT '',
+    `location_label` VARCHAR(80) NOT NULL DEFAULT '',
+    `address` VARCHAR(160) NOT NULL DEFAULT '',
+    `location_x` DECIMAL(10,3) NULL,
+    `location_y` DECIMAL(10,3) NULL,
+    `location_z` DECIMAL(10,3) NULL,
+    `logo_media_id` BIGINT UNSIGNED NULL,
+    `cover_media_id` BIGINT UNSIGNED NULL,
+    `availability` ENUM('available','busy','closed') NOT NULL DEFAULT 'closed',
+    `availability_updated_by` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `availability_updated_at` DATETIME NULL,
+    `availability_expires_at` DATETIME NULL,
+    `accepts_requests` TINYINT(1) NOT NULL DEFAULT 1,
+    `revision` INT UNSIGNED NOT NULL DEFAULT 1,
+    `mutation_token` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    PRIMARY KEY (`company_id`),
+    KEY `idx_sky_phone_company_profiles_public` (`availability`,`updated_at`),
+    FOREIGN KEY (`logo_media_id`) REFERENCES `sky_phone_media` (`id`) ON DELETE SET NULL,
+    FOREIGN KEY (`cover_media_id`) REFERENCES `sky_phone_media` (`id`) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_hours` (
+    `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
+    `company_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `weekday` TINYINT UNSIGNED NOT NULL,
+    `is_closed` TINYINT(1) NOT NULL DEFAULT 0,
+    `opens_at` CHAR(5) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `closes_at` CHAR(5) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `uniq_sky_phone_company_hours_day` (`company_id`,`weekday`),
+    FOREIGN KEY (`company_id`) REFERENCES `sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_services` (
+    `id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `company_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `title` VARCHAR(80) NOT NULL,
+    `description` VARCHAR(500) NOT NULL DEFAULT '',
+    `price_text` VARCHAR(80) NOT NULL DEFAULT '',
+    `requests_enabled` TINYINT(1) NOT NULL DEFAULT 1,
+    `active` TINYINT(1) NOT NULL DEFAULT 1,
+    `archived` TINYINT(1) NOT NULL DEFAULT 0,
+    `sort_order` TINYINT UNSIGNED NOT NULL DEFAULT 0,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    KEY `idx_sky_phone_company_services_list` (`company_id`,`archived`,`active`,`sort_order`),
+    FOREIGN KEY (`company_id`) REFERENCES `sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_announcements` (
+    `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `company_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `title` VARCHAR(120) NOT NULL,
+    `body` VARCHAR(1000) NOT NULL,
+    `created_by` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `active` TINYINT(1) NOT NULL DEFAULT 1,
+    `expires_at` DATETIME NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    KEY `idx_sky_phone_company_announcements_active` (`company_id`,`active`,`expires_at`,`created_at`),
+    FOREIGN KEY (`company_id`) REFERENCES `sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_requests` (
+    `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `company_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `service_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `customer_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `subject` VARCHAR(120) NOT NULL,
+    `description` VARCHAR(2000) NOT NULL,
+    `status` ENUM('new','assigned','in_progress','waiting_customer','completed','cancelled') NOT NULL DEFAULT 'new',
+    `assigned_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `customer_unread` INT UNSIGNED NOT NULL DEFAULT 0,
+    `company_activity_revision` INT UNSIGNED NOT NULL DEFAULT 1,
+    `revision` INT UNSIGNED NOT NULL DEFAULT 1,
+    `mutation_token` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    `completed_at` DATETIME NULL,
+    `cancelled_at` DATETIME NULL,
+    PRIMARY KEY (`id`),
+    KEY `idx_sky_phone_company_requests_customer` (`customer_sim_id`,`updated_at`,`id`),
+    KEY `idx_sky_phone_company_requests_queue` (`company_id`,`status`,`updated_at`,`id`),
+    KEY `idx_sky_phone_company_requests_assignee` (`company_id`,`assigned_identifier`,`status`),
+    FOREIGN KEY (`company_id`) REFERENCES `sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE,
+    FOREIGN KEY (`service_id`) REFERENCES `sky_phone_company_services` (`id`) ON DELETE SET NULL,
+    FOREIGN KEY (`customer_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_request_reads` (
+    `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
+    `request_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `reader_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `read_revision` INT UNSIGNED NOT NULL DEFAULT 0,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `uniq_sky_phone_company_request_reads_reader` (`request_id`,`reader_identifier`),
+    KEY `idx_sky_phone_company_request_reads_identifier` (`reader_identifier`,`updated_at`),
+    FOREIGN KEY (`request_id`) REFERENCES `sky_phone_company_requests` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_request_media` (
+    `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
+    `request_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `media_id` BIGINT UNSIGNED NOT NULL,
+    `sort_order` TINYINT UNSIGNED NOT NULL DEFAULT 0,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `uniq_sky_phone_company_request_media` (`request_id`,`media_id`),
+    UNIQUE KEY `uniq_sky_phone_company_request_media_order` (`request_id`,`sort_order`),
+    FOREIGN KEY (`request_id`) REFERENCES `sky_phone_company_requests` (`id`) ON DELETE CASCADE,
+    FOREIGN KEY (`media_id`) REFERENCES `sky_phone_media` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_request_messages` (
+    `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `request_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `sender_type` ENUM('customer','company') NOT NULL,
+    `sender_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `sender_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `body` VARCHAR(2000) NOT NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    KEY `idx_sky_phone_company_request_messages` (`request_id`,`created_at`,`id`),
+    FOREIGN KEY (`request_id`) REFERENCES `sky_phone_company_requests` (`id`) ON DELETE CASCADE,
+    FOREIGN KEY (`sender_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_request_events` (
+    `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `request_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `event_type` ENUM('created','assigned','status','cancelled') NOT NULL,
+    `actor_type` ENUM('customer','company','system') NOT NULL,
+    `actor_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `from_status` VARCHAR(32) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `to_status` VARCHAR(32) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `detail` VARCHAR(255) NOT NULL DEFAULT '',
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    KEY `idx_sky_phone_company_request_events` (`request_id`,`created_at`,`id`),
+    FOREIGN KEY (`request_id`) REFERENCES `sky_phone_company_requests` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_company_audit` (
+    `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `company_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `actor_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `action` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `target_type` VARCHAR(32) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `target_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `metadata` LONGTEXT NOT NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    KEY `idx_sky_phone_company_audit` (`company_id`,`created_at`,`id`),
+    FOREIGN KEY (`company_id`) REFERENCES `sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
diff --git a/tests/custom_app_compat.lua b/tests/custom_app_compat.lua
new file mode 100644
index 0000000..55c79b4
--- /dev/null
+++ b/tests/custom_app_compat.lua
@@ -0,0 +1,80 @@
+dofile("sky_phone/source/shared/custom_app_compat.lua")
+
+local lb_definition = assert(SkyPhoneCompatibility.BuildLbDefinition("lb_app", {
+    identifier = "dispatch",
+    name = "Dispatch",
+    description = "Dispatch terminal",
+    ui = "ui/index.html",
+    defaultApp = true,
+    landscape = true,
+    onUse = function() end,
+}))
+assert(lb_definition.id == "dispatch", "LB identifier must map to the Sky app ID")
+assert(lb_definition.ui == "ui/index.html", "LB relative UI must remain owner-relative")
+assert(lb_definition.orientation == "landscape", "LB landscape flag must be preserved")
+assert(type(lb_definition.onOpen) == "function", "LB onUse must map to the open lifecycle")
+
+local invalid_lb, invalid_lb_error = SkyPhoneCompatibility.BuildLbDefinition("lb_app", {
+    identifier = "dispatch",
+    name = "Dispatch",
+    ui = "@another_resource/ui/index.html",
+})
+assert(invalid_lb == nil, "LB must reject an @ URL owned by another resource")
+assert(invalid_lb_error == "ui_owner_mismatch", "LB owner mismatch must be explicit")
+
+local mov_definition = assert(SkyPhoneCompatibility.Build17MovDefinition({
+    name = "market",
+    label = "Market",
+    ui = "https://cfx-nui-market_app/ui/index.html",
+    iconBackground = "#112233",
+    preInstalled = true,
+}))
+assert(mov_definition.id == "market", "17mov name must map to the Sky app ID")
+assert(mov_definition.iconBackground == "#112233", "17mov icon background must be preserved")
+assert(mov_definition.defaultInstalled, "17mov preInstalled must be preserved")
+
+local high_definition = assert(SkyPhoneCompatibility.BuildHighDefinition("high_app", "bankingv2", {
+    externalUrl = "@high_app/ui/index.html",
+    icon = {
+        imageUrl = "ui/icon.png",
+        background = "#1b1b1b",
+    },
+    preAdded = true,
+}, {
+    en = {
+        label = "Banking",
+        description = "Banking app",
+    },
+}))
+assert(high_definition.ui == "high_app/ui/index.html", "High @ URL must normalize to its owner")
+assert(high_definition.name.en == "Banking", "High locale labels must be preserved")
+assert(high_definition.iconBackground == "#1b1b1b", "High icon background must be preserved")
+
+local quasar_data = {
+    id = "services",
+    label = "Services",
+    iframe = {
+        url = "https://cfx-nui-services/ui/index.html",
+    },
+}
+local quasar_definition = assert(SkyPhoneCompatibility.BuildQuasarDefinition(quasar_data))
+local quasar_copy = SkyPhoneCompatibility.CopyQuasarData(quasar_data)
+quasar_copy.iframe.url = "changed"
+assert(quasar_definition.id == "services", "Quasar ID must be preserved")
+assert(quasar_data.iframe.url ~= quasar_copy.iframe.url, "Quasar iframe data must be copied")
+
+local yseries_definition = assert(SkyPhoneCompatibility.BuildYSeriesDefinition({
+    key = "slots",
+    name = "Slots",
+    ui = "https://cfx-nui-slots/ui/index.html",
+    icon = {
+        yos = "ui/yos.png",
+        humanoid = "ui/humanoid.png",
+    },
+    game = true,
+}))
+assert(yseries_definition.id == "slots", "YSeries key must map to the Sky app ID")
+assert(yseries_definition.icon == "ui/yos.png", "YSeries must prefer the YOS icon")
+assert(yseries_definition.category == "games", "YSeries game flag must be preserved")
+
+print("Custom app compatibility mapping tests passed")
diff --git a/tests/custom_app_compat_client.lua b/tests/custom_app_compat_client.lua
new file mode 100644
index 0000000..0a21629
--- /dev/null
+++ b/tests/custom_app_compat_client.lua
@@ -0,0 +1,140 @@
+local registered_exports = {}
+local invoking_resource = nil
+
+Config = {
+    Bridge = {
+        Locale = "en",
+    },
+    CustomApps = {
+        AllowRemoteOrigins = {},
+        BundledApps = false,
+        Enabled = true,
+        ExternalApps = true,
+        MaximumMessageBytes = 65536,
+        MaximumStorageBytesPerApp = 262144,
+        MaximumStorageKeyLength = 64,
+        MaximumStorageValueBytes = 65536,
+        ReadyTimeoutMs = 8000,
+        TrustedAdapters = {},
+    },
+}
+
+json = {
+    decode = function()
+        return {}
+    end,
+    encode = function()
+        return "{}"
+    end,
+}
+
+exports = setmetatable({}, {
+    __call = function(_, export_name, handler)
+        registered_exports[export_name] = handler
+    end,
+})
+
+function GetCurrentResourceName()
+    return "sky_phone"
+end
+
+function GetInvokingResource()
+    return invoking_resource
+end
+
+function GetResourceState(resource_name)
+    if resource_name == "missing_resource" then
+        return "missing"
+    end
+    return "started"
+end
+
+function RegisterNUICallback() end
+function RegisterNetEvent() end
+function AddEventHandler() end
+function SendNUIMessage() end
+function TriggerServerEvent() end
+function TriggerEvent() end
+
+function CreateThread(handler)
+    handler()
+end
+
+dofile("sky_phone/source/shared/custom_apps.lua")
+dofile("sky_phone/source/shared/custom_app_compat.lua")
+dofile("sky_phone/source/client/custom_apps.lua")
+dofile("sky_phone/source/client/custom_app_compat.lua")
+
+invoking_resource = "lb_app"
+local lb_success, lb_error = registered_exports.AddCustomApp({
+    identifier = "dispatch",
+    name = "Dispatch",
+    description = "Dispatch terminal",
+    ui = "ui/index.html",
+})
+assert(lb_success and lb_error == nil, "LB AddCustomApp must register through the shared export")
+
+invoking_resource = "another_app"
+local duplicate_success, duplicate_error = registered_exports.AddCustomApp({
+    identifier = "dispatch",
+    name = "Hijack",
+    description = "Hijack",
+    ui = "ui/index.html",
+})
+assert(not duplicate_success and duplicate_error == "duplicate_app_id", "cross-owner IDs must be rejected")
+
+local remove_success, remove_error = registered_exports.RemoveCustomApp("dispatch")
+assert(not remove_success and remove_error == "app_owner_mismatch", "cross-owner removal must be rejected")
+
+invoking_resource = "lb_app"
+assert(registered_exports.RemoveCustomApp("dispatch"), "the LB owner must be able to remove its app")
+
+invoking_resource = "yseries_app"
+assert(registered_exports.AddCustomApp({
+    key = "slots",
+    name = "Slots",
+    ui = "https://cfx-nui-yseries_app/ui/index.html",
+}), "YSeries AddCustomApp must be selected from the key field")
+
+local ambiguous_success, ambiguous_error = registered_exports.AddCustomApp({
+    id = "ambiguous",
+    identifier = "ambiguous",
+    name = "Ambiguous",
+    ui = "ui/index.html",
+})
+assert(not ambiguous_success and ambiguous_error == "ambiguous_app_provider", "ambiguous schemas must fail")
+
+invoking_resource = "mov_app"
+assert(registered_exports.AddApplication({
+    name = "market",
+    label = "Market",
+    ui = "https://cfx-nui-mov_app/ui/index.html",
+}), "17mov AddApplication must register")
+
+invoking_resource = "high_app"
+assert(registered_exports.addApplication("bankingv2", {
+    externalUrl = "@high_app/ui/index.html",
+}, {
+    en = {
+        label = "Banking",
+        description = "Banking app",
+    },
+}), "High addApplication must register")
+
+invoking_resource = "quasar_app"
+assert(registered_exports.addCustomApp({
+    id = "services",
+    label = "Services",
+    iframe = {
+        url = "https://cfx-nui-quasar_app/ui/index.html",
+    },
+}), "Quasar addCustomApp must register")
+
+local quasar_apps = registered_exports.getCustomApps()
+assert(#quasar_apps == 1 and quasar_apps[1].id == "services", "Quasar getCustomApps must expose the registry")
+assert(registered_exports.updateCustomApp("services", {
+    label = "City Services",
+}), "Quasar updateCustomApp must update an owned app")
+assert(registered_exports.removeCustomApp("services"), "Quasar removeCustomApp must remove an owned app")
+
+print("Custom app compatibility client tests passed")
diff --git a/tests/custom_app_compat_server.lua b/tests/custom_app_compat_server.lua
new file mode 100644
index 0000000..2ba77f6
--- /dev/null
+++ b/tests/custom_app_compat_server.lua
@@ -0,0 +1,68 @@
+local event_handlers = {}
+local registered_exports = {}
+local sent_events = {}
+local invoking_resource = nil
+
+exports = setmetatable({}, {
+    __call = function(_, export_name, handler)
+        registered_exports[export_name] = handler
+    end,
+})
+
+function GetCurrentResourceName()
+    return "sky_phone"
+end
+
+function GetInvokingResource()
+    return invoking_resource
+end
+
+function GetGameTimer()
+    return 5000
+end
+
+function RegisterNetEvent(event_name, handler)
+    event_handlers[event_name] = handler
+end
+
+function AddEventHandler() end
+
+function TriggerClientEvent(event_name, target, ...)
+    sent_events[#sent_events + 1] = {
+        arguments = { ... },
+        event_name = event_name,
+        target = target,
+    }
+end
+
+dofile("sky_phone/source/shared/custom_app_compat.lua")
+dofile("sky_phone/source/server/custom_app_compat.lua")
+
+invoking_resource = "high_server_app"
+local add_success, add_error = registered_exports.addApplication("bankingv2", {
+    externalUrl = "@high_server_app/ui/index.html",
+}, {
+    en = {
+        label = "Banking",
+        description = "Banking app",
+    },
+})
+assert(add_success and add_error == nil, "High server addApplication must register")
+assert(#sent_events == 1, "High server registration must broadcast an update")
+assert(sent_events[1].event_name == "sky_phone:compat:high:client:syncApplication", "High sync event must be used")
+assert(sent_events[1].arguments[1] == "high_server_app", "High sync must preserve the owner")
+
+invoking_resource = "other_server_app"
+local duplicate_success, duplicate_error = registered_exports.addApplication("bankingv2", {
+    externalUrl = "@other_server_app/ui/index.html",
+})
+assert(not duplicate_success and duplicate_error == "duplicate_app_id", "High cross-owner replacement must fail")
+
+source = 42
+event_handlers["sky_phone:compat:high:server:requestSnapshot"]()
+assert(#sent_events == 2, "High snapshot request must emit one response")
+assert(sent_events[2].event_name == "sky_phone:compat:high:client:replaceSnapshot", "High snapshot event must be used")
+assert(sent_events[2].target == 42, "High snapshot must target only the requester")
+assert(#sent_events[2].arguments[1] == 1, "High snapshot must include the registered app")
+
+print("Custom app compatibility server tests passed")

From c9a656264c1017ab108881031ae5dd5bf3afe3e0 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 02:34:11 +0200
Subject: [PATCH 02/63] FIX - allow FiveM host NUI messages

---
 frontend/src/utils/windowMessages.test.ts | 16 +++++++++++++---
 frontend/src/utils/windowMessages.ts      |  7 ++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/utils/windowMessages.test.ts b/frontend/src/utils/windowMessages.test.ts
index 022f6b1..38575bf 100644
--- a/frontend/src/utils/windowMessages.test.ts
+++ b/frontend/src/utils/windowMessages.test.ts
@@ -3,15 +3,25 @@ import { describe, expect, it } from 'vitest'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 describe('root window message source', () => {
-  it('accepts native NUI messages and messages posted by the root window', () => {
-    const rootWindow = {} as Window
+  it('accepts native NUI messages and messages posted by trusted host windows', () => {
+    const parentWindow = {} as Window
+    const topWindow = {} as Window
+    const rootWindow = {
+      parent: parentWindow,
+      top: topWindow,
+    } as Window
 
     expect(isTrustedRootMessageSource(null, rootWindow)).toBe(true)
     expect(isTrustedRootMessageSource(rootWindow, rootWindow)).toBe(true)
+    expect(isTrustedRootMessageSource(parentWindow, rootWindow)).toBe(true)
+    expect(isTrustedRootMessageSource(topWindow, rootWindow)).toBe(true)
   })
 
   it('rejects messages posted by child frames', () => {
-    const rootWindow = {} as Window
+    const rootWindow = {
+      parent: {} as Window,
+      top: {} as Window,
+    } as Window
     const childFrame = {} as Window
 
     expect(isTrustedRootMessageSource(childFrame, rootWindow)).toBe(false)
diff --git a/frontend/src/utils/windowMessages.ts b/frontend/src/utils/windowMessages.ts
index 5fa674d..6147977 100644
--- a/frontend/src/utils/windowMessages.ts
+++ b/frontend/src/utils/windowMessages.ts
@@ -2,5 +2,10 @@ export function isTrustedRootMessageSource(
   source: MessageEventSource | null,
   rootWindow: Window,
 ): boolean {
-  return source === null || source === rootWindow
+  return (
+    source === null ||
+    source === rootWindow ||
+    source === rootWindow.parent ||
+    source === rootWindow.top
+  )
 }

From ebac6e550902f62b387d0bdd310a8f8ba378eeb1 Mon Sep 17 00:00:00 2001
From: Dominik <Dominique.Wellisch@t-online.de>
Date: Tue, 11 Aug 2026 12:25:51 +0200
Subject: [PATCH 03/63] ENH - make phone identity and SIM cards configurable

---
 README.md                                     |  70 ++++++-
 frontend/src/App.vue                          |   1 +
 frontend/src/types/phone.ts                   |   1 +
 frontend/src/views/apps/SettingsApp.vue       |  10 +-
 frontend/testserver/index.cjs                 |   1 +
 sky_phone/config/config.lua                   |   2 +
 sky_phone/config/locales/en.lua               |   1 +
 .../source/bridge/server/inventory/smx.lua    |  23 +-
 sky_phone/source/server/db_migrate.lua        |  34 +++
 sky_phone/source/server/messages.lua          |  12 +-
 sky_phone/source/server/phone.lua             | 196 ++++++++++++++++--
 sky_phone/source/server/sim.lua               | 189 ++++++++++++++---
 sky_phone/sql/install.sql                     |  11 +
 13 files changed, 484 insertions(+), 67 deletions(-)

diff --git a/README.md b/README.md
index 90802cd..025b0d7 100644
--- a/README.md
+++ b/README.md
@@ -78,16 +78,68 @@ set sky_phone_fliptok_password_pepper "replace-with-a-long-random-secret"
 Passwords are stored as salted hashes. The pepper is read server-side from the convar and is never
 included in the NUI bundle.
 
-Standalone FiveM phone built with Vue 3, TypeScript, Pinia, Vue Router, Konsta UI 5, and Tailwind CSS 4. Each non-stackable `phone` item receives a unique 15-digit IMEI and owns its server-persisted device state. The phone opens through the usable item; `/phone` is disabled unless `Config.Phone.DevelopmentCommand` is enabled explicitly.
+Standalone FiveM phone built with Vue 3, TypeScript, Pinia, Vue Router, Konsta UI 5, and Tailwind CSS 4. The phone opens through the usable item; `/phone` is disabled unless `Config.Phone.DevelopmentCommand` is enabled explicitly. Phone identity and SIM-card behavior are selected independently through `Config.Phone.Unique` and `Config.Sim.Enabled`.
 
 An iFruit account is optional. Unlinked devices retain local settings, alarms, media, apps, notes, contacts, and recent calls. Linking from Mail or Settings moves local data into an empty cloud account; an existing cloud dataset wins over local contacts and recents. Signing out keeps an editable local snapshot without deleting cloud data.
 
+## Phone identity and SIM modes
+
+Both compatibility switches default to the physical, unique-item behavior:
+
+```lua
+Config.Phone.Unique = true
+Config.Sim.Enabled = true
+```
+
+For backwards compatibility, an omitted switch is also treated as `true`.
+
+With `Config.Phone.Unique = true`, every phone item is one transferable physical Device. Its unique
+15-digit IMEI is stored in item metadata, so its settings, PIN, local app data, linked iFruit
+account, and installed SIM travel with that item. The item must be non-stackable.
+
+With `Config.Phone.Unique = false`, the server assigns each framework character one persistent
+virtual Device. Possessing any configured phone item grants access to that Device, but the item does
+not own its IMEI or data. Losing a handset therefore removes access only until the character obtains
+another one; the replacement opens the same data, PIN, account session, and number. Phone items may
+be stackable in this mode, although at least one phone item is still required to use or receive the
+phone. The character mapping is server-authoritative and uses the framework character identifier,
+never a client-supplied owner value.
+
+With `Config.Sim.Enabled = true`, a physical registered or anonymous SIM item must be inserted before
+the Device has cellular service. SIM items remain unique and non-stackable. With
+`Config.Sim.Enabled = false`, SIM inventory items are not required. The first time a Device without
+an attached SIM is resolved, the server creates an anonymous virtual SIM with a random unique phone
+number using `Config.Sim.NumberPrefix` and `NumberLength`; `NumberGroups` controls its display
+format. Physical SIM insertion and ejection are disabled in this mode. An already attached physical
+SIM and its number are preserved when SIM requirements are disabled.
+
+The switches are independent. An automatic number follows a physical handset when unique phones are
+enabled and follows the character's persistent virtual Device when unique phones are disabled.
+Likewise, a physical SIM inserted while unique phones are disabled belongs to the character's
+virtual Device and remains available after replacing the handset.
+
+### Existing installations and first use
+
+After changing an existing installation to `Config.Phone.Unique = false`, the first phone item a
+character uses establishes the persistent mapping. If that item has a valid legacy IMEI which is not
+already mapped to another character, the complete existing Device is adopted. This preserves its
+local content, PIN, linked account, and attached SIM. If the legacy IMEI cannot be adopted, the
+server creates a fresh virtual Device instead. Historic unique Devices did not record an owner, so
+the character carrying a handset on its first use after the change is the character that claims it.
+
+When `Config.Sim.Enabled = false`, an existing attached physical SIM is kept; only Devices without a
+SIM receive a random virtual one. If SIM cards are enabled again, automatically created virtual SIMs
+are detached during resource startup so those Devices once again require a physical SIM. Stored
+character-to-Device mappings remain available, but changing back to unique phones does not copy a
+virtual Device's data onto an arbitrary inventory item. Treat production mode changes as migrations
+and restart the resource after updating the configuration.
+
 ## Requirements
 
 - ESX Legacy (`es_extended`), Qbox (`qbx_core`), or QBCore (`qb-core`). The bridge selects a running supported framework when `Config.Bridge.Framework` is set to `"auto"`.
 - A supported inventory: `ox_inventory`, `qb-inventory`, `lj-inventory`, `qs-inventory`, `codem-inventory`, `core_inventory`, `mf-inventory`, or `smx-inventory`. The bridge auto-detects a running provider and normalizes metadata, slots, counts, item mutations, and usable-item callbacks. `mf-inventory` and `smx-inventory` require ESX. Because SMX stores standard ESX items as stacks, its adapter persists one active Phone/SIM metadata record per player and item type in ESX player metadata.
-- A non-stackable inventory item named `phone`.
-- Two unique, non-stackable inventory items named `sky_phone_sim_registered` and `sky_phone_sim_anonymous`. Their metadata is initialized automatically on first use, so shops and crafting recipes add plain items without supplying a number.
+- An inventory item named `phone`. It must be non-stackable when `Config.Phone.Unique = true` and may be stackable when it is `false`.
+- When `Config.Sim.Enabled = true`, two unique, non-stackable inventory items named `sky_phone_sim_registered` and `sky_phone_sim_anonymous`. Their metadata is initialized automatically on first use, so shops and crafting recipes add plain items without supplying a number. These item definitions are not required when SIM cards are disabled.
 - `oxmysql` with MySQL/MariaDB.
 - `pma-voice` when `Config.Calls.VoiceProvider` is set to `"pma"`.
 - A FiveManage V3 Media API token for Camera photo/video uploads and Gallery deletion. Set the
@@ -108,7 +160,7 @@ GIPHY provides trending and searched GIFs through a paginated server-side proxy.
 only the server uses the GIPHY key. Photo and video actions in Messages are intentionally inactive
 until their dedicated implementation is available.
 
-Database migrations run automatically. Existing `sky_phone_mail_accounts` installations are renamed to `sky_phone_accounts` while preserving account IDs and mail foreign keys. iFruit passwords are intentional in-character credentials and remain plaintext `VARCHAR(64)` values; registration screens warn players never to reuse a real password.
+Database migrations run automatically. Existing `sky_phone_mail_accounts` installations are renamed to `sky_phone_accounts` while preserving account IDs and mail foreign keys. The migration also creates `sky_phone_character_devices` for persistent non-unique phone mappings and marks automatic SIMs through `sky_phone_sims.is_virtual`. iFruit passwords are intentional in-character credentials and remain plaintext `VARCHAR(64)` values; registration screens warn players never to reuse a real password.
 
 Camera and Gallery media is stored in `sky_phone_media`. Signed-out captures belong to the current
 IMEI; linking an iFruit account moves those rows into the account gallery so every linked phone sees
@@ -127,13 +179,13 @@ Configure frequency bounds and precision, restricted channel ranges and allowed
 
 Radio profiles are stored in `sky_phone_radio_profiles`. Runtime migration creates the table automatically; fresh installations receive it through `sky_phone/sql/install.sql`.
 
-Inventory metadata has no framework-wide standard: providers differ in export names, callback payloads, slot handling, and whether metadata is called `metadata` or `info`. For that reason, `sky_phone` uses explicit provider adapters instead of guessing exports at runtime. Every supported adapter implements slot lookup, item lookup, metadata replacement, capacity handling, add/remove operations, and usable-item registration. Providers without a separate capacity export use their authoritative add operation as the final capacity gate.
+Inventory metadata has no framework-wide standard: providers differ in export names, callback payloads, slot handling, and whether metadata is called `metadata` or `info`. For that reason, `sky_phone` uses explicit provider adapters instead of guessing exports at runtime. Every supported adapter implements slot lookup, item lookup, metadata replacement, capacity handling, add/remove operations, and usable-item registration. Providers without a separate capacity export use their authoritative add operation as the final capacity gate. Phone item metadata is authoritative only when `Config.Phone.Unique = true`; in non-unique mode the persistent character mapping is authoritative instead.
 
-When a SIM is ejected or replaced, the returned inventory item is rebuilt from the authoritative `sky_phone_sims` row. Its metadata contains `sim_metadata_version`, `sim_id`, `phone_number`, `formatted_number`, and `sim_type`. Registered SIMs additionally contain `firstname`, `lastname`, `birthdate`, and `registered_at`. The internal framework owner identifier remains database-only. Inserting the item again resolves the SIM by `sim_id`; contacts and device/cloud data remain attached to their existing phone-owned persistence instead of being copied into inventory metadata.
+When physical SIMs are enabled and a SIM is ejected or replaced, the returned inventory item is rebuilt from the authoritative `sky_phone_sims` row. Its metadata contains `sim_metadata_version`, `sim_id`, `phone_number`, `formatted_number`, and `sim_type`. Registered SIMs additionally contain `firstname`, `lastname`, `birthdate`, and `registered_at`. The internal framework owner identifier remains database-only. Inserting the item again resolves the SIM by `sim_id`; contacts and device/cloud data remain attached to their existing Device or cloud persistence instead of being copied into inventory metadata. Automatically created virtual SIMs remain database-only and never become inventory items.
 
-For `ox_inventory`, configure all three items with `stack = false` and `consume = 0`. Do not configure a client event or export. Ox then completes its normal server-authoritative use flow and emits `ox_inventory:usedItem`; the bridge resolves the authoritative slot again and only opens the matching device or SIM. A client export would return before Ox calls `useItem` and therefore prevent `ox_inventory:usedItem` from being emitted.
+For `ox_inventory`, configure the phone with `stack = false` when `Config.Phone.Unique = true`; it may use `stack = true` in non-unique mode. Physical SIM items always use `stack = false` and are only needed when `Config.Sim.Enabled = true`. Every usable item should use `consume = 0`. Do not configure a client event or export. Ox then completes its normal server-authoritative use flow and emits `ox_inventory:usedItem`; the bridge resolves the authoritative slot again and only opens the matching Device or SIM. A client export would return before Ox calls `useItem` and therefore prevent `ox_inventory:usedItem` from being emitted.
 
-Example `ox_inventory/data/items.lua` entries:
+Example `ox_inventory/data/items.lua` entries for the default unique-phone, physical-SIM modes:
 
 ```lua
 ["phone"] = {
@@ -159,7 +211,7 @@ Example `ox_inventory/data/items.lua` entries:
 },
 ```
 
-For QBCore-style item tables, define the same names with `unique = true`, `useable = true`, and `shouldClose = true`. The provider adapter registers the server-side usable callbacks; no `lb-phone` event or export is used.
+For QBCore-style item tables, set the phone's `unique` value to match `Config.Phone.Unique`, and use `useable = true` and `shouldClose = true`. When physical SIMs are enabled, define both SIM items with `unique = true`, `useable = true`, and `shouldClose = true`; omit them when SIMs are disabled. The provider adapter registers the server-side usable callbacks; no `lb-phone` event or export is used.
 
 The homescreen is an original implementation inspired by the interaction and layout concepts in [lukejacksonn/homescreen](https://github.com/lukejacksonn/homescreen), inspected at commit [`98a812f`](https://github.com/lukejacksonn/homescreen/tree/98a812f4f7c33594e791d65092f73b8f54b3c598). No source code or image assets from that project are included.
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b7c966a..acb24ba 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -335,6 +335,7 @@ async function hydrateDevelopmentPhone(): Promise<void> {
       sim: {
         id: 'development-sim',
         number: '5551234567',
+        removable: true,
         registered: true,
         type: 'registered',
       },
diff --git a/frontend/src/types/phone.ts b/frontend/src/types/phone.ts
index d0ffa84..3d4e9de 100644
--- a/frontend/src/types/phone.ts
+++ b/frontend/src/types/phone.ts
@@ -3,6 +3,7 @@ export type SimType = 'registered' | 'anonymous'
 export type PhoneSim = {
   id: string
   number: string
+  removable: boolean
   registered: boolean
   type: SimType
 }
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index f390faa..9c7ce1c 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -1331,7 +1331,7 @@ onBeforeUnmount(() => {
             "
           />
           <k-list-item
-            v-if="phone.device?.sim"
+            v-if="phone.device?.sim?.removable"
             :title="phone.t('Apps.settings.simType')"
             :after="
               phone.t(
@@ -1342,7 +1342,7 @@ onBeforeUnmount(() => {
             "
           />
           <k-list-button
-            v-if="phone.device?.sim"
+            v-if="phone.device?.sim?.removable"
             @click="simEjectOpened = true"
           >
             {{ phone.t('Apps.settings.ejectSim') }}
@@ -1604,7 +1604,11 @@ onBeforeUnmount(() => {
     </template>
   </k-dialog>
 
-  <k-dialog :opened="simEjectOpened" @backdropclick="simEjectOpened = false">
+  <k-dialog
+    v-if="phone.device?.sim?.removable"
+    :opened="simEjectOpened"
+    @backdropclick="simEjectOpened = false"
+  >
     <template #title>{{ phone.t('Apps.settings.ejectSim') }}</template>
     <p>{{ phone.t('Apps.settings.ejectSimBody') }}</p>
     <template #buttons>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index c9b57f2..ff47641 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -5106,6 +5106,7 @@ app.post('/api/:endpoint', (request, response) => {
           sim: {
             id: 'development-sim',
             number: '5551234567',
+            removable: true,
             registered: true,
             type: 'registered',
           },
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index ae209d4..56570ec 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -15,6 +15,7 @@ Config.Command = "phone"
 
 Config.Phone = {
     Item = "phone",
+    Unique = true, -- true: data follows each phone item; false: one persistent phone per character
     DevelopmentCommand = true,
     DeviceName = "iFruit Phone",
 }
@@ -27,6 +28,7 @@ Config.Security = {
 }
 
 Config.Sim = {
+    Enabled = true, -- false: devices without a SIM receive a persistent random number automatically
     RegisteredItem = "sky_phone_sim_registered",
     AnonymousItem = "sky_phone_sim_anonymous",
     NumberLength = 10,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 0efd21e..c7fd8dd 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -21,6 +21,7 @@ Locales["en"] = {
         phone_stacked = "Phones cannot be stacked.",
         invalid_imei = "This phone has invalid IMEI metadata.",
         metadata_unsupported = "The configured inventory cannot store unique phone metadata.",
+        player_unavailable = "Your character identity is not available.",
         sim_slot_missing = "The used SIM card could not be identified.",
         sim_stacked = "SIM cards cannot be stacked.",
         invalid_sim = "This SIM card has invalid metadata.",
diff --git a/sky_phone/source/bridge/server/inventory/smx.lua b/sky_phone/source/bridge/server/inventory/smx.lua
index 86d7d15..1268696 100644
--- a/sky_phone/source/bridge/server/inventory/smx.lua
+++ b/sky_phone/source/bridge/server/inventory/smx.lua
@@ -9,11 +9,26 @@ end
 local ESX = exports["es_extended"]:getSharedObject()
 local metadata_key = "sky_phone_inventory"
 
-ESX.AddItems({
+local inventory_items = {
     { name = Config.Phone.Item, label = Config.Phone.DeviceName, weight = 100, rare = false, canRemove = true },
-    { name = Config.Sim.RegisteredItem, label = "Registered SIM", weight = 5, rare = false, canRemove = true },
-    { name = Config.Sim.AnonymousItem, label = "Anonymous SIM", weight = 5, rare = false, canRemove = true },
-})
+}
+if Config.Sim.Enabled ~= false then
+    inventory_items[#inventory_items + 1] = {
+        name = Config.Sim.RegisteredItem,
+        label = "Registered SIM",
+        weight = 5,
+        rare = false,
+        canRemove = true,
+    }
+    inventory_items[#inventory_items + 1] = {
+        name = Config.Sim.AnonymousItem,
+        label = "Anonymous SIM",
+        weight = 5,
+        rare = false,
+        canRemove = true,
+    }
+end
+ESX.AddItems(inventory_items)
 
 local function get_player(source)
     return ESX.GetPlayerFromId(source)
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 4b113ba..4443c41 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -122,6 +122,7 @@ local schema = {
             { name = "contact_id", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "phone_number", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "sim_type", type = "ENUM('registered', 'anonymous') NOT NULL" },
+            { name = "is_virtual", type = "TINYINT(1) NOT NULL DEFAULT 0" },
             { name = "owner_identifier", type = "VARCHAR(80) NULL" },
             { name = "owner_firstname", type = "VARCHAR(80) NULL" },
             { name = "owner_lastname", type = "VARCHAR(80) NULL" },
@@ -173,6 +174,39 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_character_devices",
+        columns = {
+            {
+                name = "owner_identifier",
+                type = "VARCHAR(80) NOT NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            {
+                name = "device_imei",
+                type = "CHAR(15) NOT NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            {
+                name = "updated_at",
+                type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP",
+            },
+        },
+        primaryKey = "owner_identifier",
+        uniqueKeys = {
+            { name = "uniq_sky_phone_character_devices_device", columns = "(`device_imei`)" },
+        },
+        foreignKeys = {
+            {
+                column = "device_imei",
+                references = "`sky_phone_devices` (`imei`) ON DELETE CASCADE",
+            },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
     {
         name = "sky_phone_device_data",
         columns = {
diff --git a/sky_phone/source/server/messages.lua b/sky_phone/source/server/messages.lua
index b0835d0..a103601 100644
--- a/sky_phone/source/server/messages.lua
+++ b/sky_phone/source/server/messages.lua
@@ -433,10 +433,14 @@ Bridge.Callbacks.Register("sky_phone:messages:send", function(source, data)
     else
         return { success = false, error = "invalid_request" }
     end
-    local recipients = Bridge.Database.Query(
-        "SELECT `id`, `phone_number` FROM `sky_phone_sims` WHERE `phone_number` = ? LIMIT 1",
-        { number }
-    )
+    local recipients = Bridge.Database.Query([[
+        SELECT s.`id`, s.`phone_number`
+        FROM `sky_phone_sims` s
+        LEFT JOIN `sky_phone_devices` d ON d.`sim_id` = s.`id`
+        WHERE s.`phone_number` = ?
+            AND (s.`is_virtual` = 0 OR d.`imei` IS NOT NULL)
+        LIMIT 1
+    ]], { number })
     local recipient = recipients[1]
     if not recipient then
         return { success = false, error = "recipient_not_found" }
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index e25f8dd..8220d6d 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -3,9 +3,12 @@ Bridge.Debug("debug", "[sky_phone] Server initialization started after database
 
 SkyPhone = {}
 
+local unique_phones = Config.Phone.Unique ~= false
+local sim_cards_enabled = Config.Sim.Enabled ~= false
 local sessions = {}
 local auth_attempts = {}
 local operation_attempts = {}
+local character_device_cache = {}
 local max_device_data_bytes = 100000
 local passcode_pepper = GetConvar(Config.Security.PasscodePepperConvar, "")
 if passcode_pepper == "" then
@@ -64,9 +67,130 @@ local function reserve_imei()
     return imei
 end
 
+local function character_identifier(source)
+    local identifier = Bridge.Framework.GetIdentifier(source)
+    if identifier == nil then
+        return nil
+    end
+
+    identifier = tostring(identifier)
+    if identifier == "" or #identifier > 80 then
+        Bridge.Debug(
+            "warn",
+            "[sky_phone] Could not resolve a valid character identifier for source %s.",
+            tostring(source)
+        )
+        return nil
+    end
+    return identifier
+end
+
+local function load_character_device(source, identifier)
+    identifier = identifier or character_identifier(source)
+    if not identifier then
+        return nil, "player_unavailable"
+    end
+
+    local cached = character_device_cache[source]
+    if cached and cached.identifier == identifier then
+        return cached.imei, nil, identifier
+    end
+
+    local rows = Bridge.Database.Query([[
+        SELECT `device_imei`
+        FROM `sky_phone_character_devices`
+        WHERE `owner_identifier` = ?
+        LIMIT 1
+    ]], { identifier })
+    local imei = rows[1] and rows[1].device_imei or nil
+    if imei then
+        character_device_cache[source] = { identifier = identifier, imei = imei }
+    else
+        character_device_cache[source] = nil
+    end
+    return imei, nil, identifier
+end
+
+local function cache_character_device(source, identifier, imei)
+    character_device_cache[source] = { identifier = identifier, imei = imei }
+    return imei
+end
+
+local function map_character_device(source, slot)
+    local mapped_imei, error_code, identifier = load_character_device(source)
+    if error_code or mapped_imei then
+        return mapped_imei, error_code
+    end
+
+    -- On the first switch from unique to shared phones, adopt the currently used
+    -- legacy device when it has not already been claimed by another character.
+    local legacy_imei = slot.metadata and slot.metadata.imei or nil
+    if SkyPhoneImei.IsValid(legacy_imei) then
+        Bridge.Database.Query([[
+            INSERT IGNORE INTO `sky_phone_devices` (`imei`, `device_name`)
+            VALUES (?, ?)
+        ]], { legacy_imei, Config.Phone.DeviceName })
+        local result = Bridge.Database.Query([[
+            INSERT IGNORE INTO `sky_phone_character_devices` (`owner_identifier`, `device_imei`)
+            VALUES (?, ?)
+        ]], { identifier, legacy_imei })
+        if affected_rows(result) == 1 then
+            return cache_character_device(source, identifier, legacy_imei)
+        end
+
+        mapped_imei = load_character_device(source, identifier)
+        if mapped_imei then
+            return mapped_imei
+        end
+    end
+
+    local imei = reserve_imei()
+    local result = Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_character_devices` (`owner_identifier`, `device_imei`)
+        VALUES (?, ?)
+    ]], { identifier, imei })
+    if affected_rows(result) == 1 then
+        return cache_character_device(source, identifier, imei)
+    end
+
+    -- Another simultaneous open may have created the mapping first. Keep its
+    -- winner and remove only the fresh, unmapped device reserved by this call.
+    mapped_imei = load_character_device(source, identifier)
+    Bridge.Database.Query([[
+        DELETE d FROM `sky_phone_devices` d
+        LEFT JOIN `sky_phone_character_devices` c ON c.`device_imei` = d.`imei`
+        WHERE d.`imei` = ? AND c.`device_imei` IS NULL
+    ]], { imei })
+    if mapped_imei then
+        return mapped_imei
+    end
+
+    Bridge.Debug(
+        "error",
+        "[sky_phone] Could not create a shared device mapping for source %s.",
+        tostring(source)
+    )
+    return nil, "request_failed"
+end
+
 local function find_device_slots(source, imei)
     local matches = {}
-    for _, item in ipairs(Bridge.Inventory.GetSlotsWithItem(source, Config.Phone.Item)) do
+    local slots = Bridge.Inventory.GetSlotsWithItem(source, Config.Phone.Item)
+    if not unique_phones then
+        if not slots[1] then
+            return matches
+        end
+        local mapped_imei = load_character_device(source)
+        if mapped_imei ~= imei then
+            return matches
+        end
+        for _, item in ipairs(slots) do
+            matches[#matches + 1] = item
+        end
+        return matches
+    end
+
+    for _, item in ipairs(slots) do
         if item.metadata and item.metadata.imei == imei then
             matches[#matches + 1] = item
         end
@@ -134,7 +258,7 @@ local function resolve_used_slot(source, used_item)
             { always = true }
         )
     end
-    if #slots == 1 then
+    if #slots == 1 or (not unique_phones and #slots > 0) then
         return slots[1]
     end
 
@@ -159,6 +283,13 @@ local function ensure_device(source, slot)
         tostring(Bridge.Inventory.GetResourceName()),
         { always = true }
     )
+    if not unique_phones then
+        if amount < 1 then
+            return nil, "phone_slot_missing"
+        end
+        return map_character_device(source, slot)
+    end
+
     if amount ~= 1 then
         Bridge.Debug("warn", "[sky_phone] Phone item in slot %s is stacked for source %s.", tostring(slot.slot), tostring(source))
         return nil, "phone_stacked"
@@ -217,7 +348,7 @@ end
 local function load_device(imei)
     local rows = Bridge.Database.Query([[
         SELECT d.`imei`, d.`device_name`, d.`account_id`, d.`sim_id`, d.`created_at`, d.`updated_at`,
-            a.`email`, s.`phone_number`, s.`sim_type`, s.`registered_at`
+            a.`email`, s.`phone_number`, s.`sim_type`, s.`registered_at`, s.`is_virtual` AS `sim_is_virtual`
         FROM `sky_phone_devices` d
         LEFT JOIN `sky_phone_accounts` a ON a.`id` = d.`account_id`
         LEFT JOIN `sky_phone_sims` s ON s.`id` = d.`sim_id`
@@ -370,6 +501,7 @@ local function bootstrap(source, security, security_loaded)
             sim = device.sim_id and {
                 id = device.sim_id,
                 number = device.phone_number,
+                removable = sim_cards_enabled and tonumber(device.sim_is_virtual) ~= 1,
                 type = device.sim_type,
                 registered = device.registered_at ~= nil,
             } or nil,
@@ -647,24 +779,38 @@ function SkyPhone.NotifyAccountDevices(account_id, event_name, data)
         devices[row.imei] = row
     end
 
+    local function notify_device(source, device)
+        local payload = {}
+        for key, value in pairs(data) do
+            payload[key] = value
+        end
+        payload.device = {
+            imei = device.imei,
+            name = device.device_name,
+            settings = device.settings,
+        }
+        TriggerClientEvent(event_name, source, payload)
+    end
+
     for _, player_source in ipairs(Bridge.Framework.GetPlayers()) do
         local source = tonumber(player_source) or player_source
-        local notified_devices = {}
-        for _, item in ipairs(Bridge.Inventory.GetSlotsWithItem(source, Config.Phone.Item)) do
-            local imei = item.metadata and item.metadata.imei
-            local device = imei and devices[imei]
-            if device and not notified_devices[imei] then
-                local payload = {}
-                for key, value in pairs(data) do
-                    payload[key] = value
+        if not unique_phones then
+            if Bridge.Inventory.GetSlotsWithItem(source, Config.Phone.Item)[1] then
+                local imei = load_character_device(source)
+                local device = imei and devices[imei] or nil
+                if device then
+                    notify_device(source, device)
+                end
+            end
+        else
+            local notified_devices = {}
+            for _, item in ipairs(Bridge.Inventory.GetSlotsWithItem(source, Config.Phone.Item)) do
+                local imei = item.metadata and item.metadata.imei
+                local device = imei and devices[imei]
+                if device and not notified_devices[imei] then
+                    notified_devices[imei] = true
+                    notify_device(source, device)
                 end
-                payload.device = {
-                    imei = device.imei,
-                    name = device.device_name,
-                    settings = device.settings,
-                }
-                notified_devices[imei] = true
-                TriggerClientEvent(event_name, source, payload)
             end
         end
     end
@@ -720,6 +866,18 @@ local function open_phone(source, used_item)
         TriggerClientEvent("sky_phone:device:error", source, error_code)
         return false
     end
+    local prepared, prepare_error = SkyPhoneSim.PrepareDevice(source, slot, imei)
+    if not prepared then
+        Bridge.Debug(
+            "error",
+            "[sky_phone] Phone preparation failed for source %s IMEI %s: %s.",
+            tostring(source),
+            imei,
+            tostring(prepare_error)
+        )
+        TriggerClientEvent("sky_phone:device:error", source, prepare_error or "request_failed")
+        return false
+    end
 
     local security = load_device_security(imei)
     sessions[source] = {
@@ -1132,6 +1290,7 @@ AddEventHandler("playerDropped", function()
     sessions[source] = nil
     auth_attempts[source] = nil
     operation_attempts[source] = nil
+    character_device_cache[source] = nil
 end)
 
 AddEventHandler("onResourceStop", function(resource_name)
@@ -1139,6 +1298,7 @@ AddEventHandler("onResourceStop", function(resource_name)
         sessions = {}
         auth_attempts = {}
         operation_attempts = {}
+        character_device_cache = {}
     end
 end)
 end)
diff --git a/sky_phone/source/server/sim.lua b/sky_phone/source/server/sim.lua
index 601e810..e2e6b58 100644
--- a/sky_phone/source/server/sim.lua
+++ b/sky_phone/source/server/sim.lua
@@ -2,6 +2,8 @@ Bridge.Database.AfterMigration("sky_phone", function()
 
 SkyPhoneSim = {}
 
+local unique_phones = Config.Phone.Unique ~= false
+local sim_cards_enabled = Config.Sim.Enabled ~= false
 local pending_insertions = {}
 local operation_locks = {}
 local sim_types = {
@@ -24,14 +26,14 @@ local function uuid()
     return rows[1].id
 end
 
-local function reserve_sim(sim_type)
+local function reserve_sim(sim_type, is_virtual)
     local sim_id
     local number = SkyPhoneSimNumber.Reserve(uuid, function(candidate)
         sim_id = uuid()
         local result = Bridge.Database.Query([[
-            INSERT IGNORE INTO `sky_phone_sims` (`id`, `phone_number`, `sim_type`)
-            VALUES (?, ?, ?)
-        ]], { sim_id, candidate, sim_type })
+            INSERT IGNORE INTO `sky_phone_sims` (`id`, `phone_number`, `sim_type`, `is_virtual`)
+            VALUES (?, ?, ?, ?)
+        ]], { sim_id, candidate, sim_type, is_virtual and 1 or 0 })
         return affected_rows(result) == 1
     end, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
     if not number then
@@ -62,6 +64,91 @@ local function sim_metadata(sim)
     return metadata
 end
 
+local function set_phone_sim_metadata(source, phone_slot, sim)
+    if not unique_phones then
+        return true
+    end
+    if not phone_slot then
+        return false
+    end
+
+    local metadata = phone_slot.metadata or {}
+    metadata.sim_id = sim and sim.id or nil
+    metadata.phone_number = sim and sim.phone_number or nil
+    metadata.formatted_number = sim and SkyPhoneSimNumber.Format(
+        sim.phone_number,
+        Config.Sim.NumberGroups,
+        Config.Sim.NumberLength,
+        Config.Sim.NumberPrefix
+    ) or nil
+    return Bridge.Inventory.SetSlotMetadata(source, phone_slot.slot, metadata)
+end
+
+local function prepare_device(source, phone_slot, imei)
+    local device = SkyPhone.LoadDevice(imei)
+    if not device then
+        return false, "request_failed"
+    end
+
+    local sim = device.sim_id and load_sim(device.sim_id) or nil
+    if sim_cards_enabled then
+        if sim and tonumber(sim.is_virtual) == 1 then
+            local result = Bridge.Database.Query([[
+                UPDATE `sky_phone_devices`
+                SET `sim_id` = NULL
+                WHERE `imei` = ? AND `sim_id` = ?
+            ]], { imei, sim.id })
+            if affected_rows(result) ~= 1 then
+                return false, "request_failed"
+            end
+            sim = nil
+        end
+
+        if not set_phone_sim_metadata(source, phone_slot, sim) then
+            return false, "metadata_unsupported"
+        end
+        return true
+    end
+
+    if sim then
+        if not set_phone_sim_metadata(source, phone_slot, sim) then
+            return false, "metadata_unsupported"
+        end
+        return true
+    end
+
+    local automatic_sim = reserve_sim("anonymous", true)
+    local result = Bridge.Database.Query([[
+        UPDATE `sky_phone_devices`
+        SET `sim_id` = ?
+        WHERE `imei` = ? AND `sim_id` IS NULL
+    ]], { automatic_sim.id, imei })
+    if affected_rows(result) ~= 1 then
+        Bridge.Database.Query("DELETE FROM `sky_phone_sims` WHERE `id` = ?", { automatic_sim.id })
+        device = SkyPhone.LoadDevice(imei)
+        sim = device and device.sim_id and load_sim(device.sim_id) or nil
+        if not sim then
+            return false, "request_failed"
+        end
+        if not set_phone_sim_metadata(source, phone_slot, sim) then
+            return false, "metadata_unsupported"
+        end
+        return true
+    end
+
+    if not set_phone_sim_metadata(source, phone_slot, automatic_sim) then
+        Bridge.Database.Query(
+            "UPDATE `sky_phone_devices` SET `sim_id` = NULL WHERE `imei` = ? AND `sim_id` = ?",
+            { imei, automatic_sim.id }
+        )
+        Bridge.Database.Query("DELETE FROM `sky_phone_sims` WHERE `id` = ?", { automatic_sim.id })
+        return false, "metadata_unsupported"
+    end
+    return true
+end
+
+SkyPhoneSim.PrepareDevice = prepare_device
+
 local function resolve_used_sim(source, used_item, item_name)
     local slot_id = used_item and (used_item.slot or used_item.id)
     local slot = slot_id and Bridge.Inventory.GetSlot(source, slot_id) or nil
@@ -82,7 +169,12 @@ local function ensure_sim(source, slot, sim_type)
     end
     local metadata = slot.metadata or {}
     local sim = metadata.sim_id and load_sim(metadata.sim_id) or nil
-    if metadata.sim_id and (not sim or sim.sim_type ~= sim_type or sim.phone_number ~= metadata.phone_number) then
+    if metadata.sim_id and (
+        not sim
+        or tonumber(sim.is_virtual) == 1
+        or sim.sim_type ~= sim_type
+        or sim.phone_number ~= metadata.phone_number
+    ) then
         return nil, "invalid_sim"
     end
     if not sim then
@@ -97,30 +189,46 @@ end
 
 local function list_phone_choices(source)
     local choices = {}
+    local seen = {}
+    local choice_error
     for _, slot in ipairs(Bridge.Inventory.GetSlotsWithItem(source, Config.Phone.Item)) do
-        local imei = SkyPhone.EnsureDevice(source, slot)
-        if imei then
-            local device = SkyPhone.LoadDevice(imei)
-            choices[#choices + 1] = {
-                imei = imei,
-                name = device.device_name,
-                occupied = device.sim_id ~= nil,
-                number = device.phone_number,
-            }
+        local imei, error_code = SkyPhone.EnsureDevice(source, slot)
+        if imei and not seen[imei] then
+            local prepared, prepare_error = prepare_device(source, slot, imei)
+            if prepared then
+                local device = SkyPhone.LoadDevice(imei)
+                choices[#choices + 1] = {
+                    imei = imei,
+                    name = device.device_name,
+                    occupied = device.sim_id ~= nil,
+                    number = device.phone_number,
+                }
+                seen[imei] = true
+            else
+                Bridge.Debug(
+                    "error",
+                    "[sky_phone] Could not prepare SIM target %s for source %s: %s.",
+                    imei,
+                    tostring(source),
+                    tostring(prepare_error)
+                )
+                choice_error = choice_error or prepare_error
+            end
+        elseif not imei then
+            choice_error = choice_error or error_code
         end
     end
-    return choices
+    return choices, choice_error
 end
 
 local function rollback_phone_metadata(source, phone_slot, old_sim)
-    local metadata = phone_slot.metadata or {}
-    metadata.sim_id = old_sim and old_sim.id or nil
-    metadata.phone_number = old_sim and old_sim.phone_number or nil
-    metadata.formatted_number = old_sim and SkyPhoneSimNumber.Format(old_sim.phone_number, Config.Sim.NumberGroups, Config.Sim.NumberLength, Config.Sim.NumberPrefix) or nil
-    Bridge.Inventory.SetSlotMetadata(source, phone_slot.slot, metadata)
+    set_phone_sim_metadata(source, phone_slot, old_sim)
 end
 
 local function insert_sim(source, phone_imei, confirmed)
+    if not sim_cards_enabled then
+        return { success = false, error = "disabled" }
+    end
     if operation_locks[source] then
         return { success = false, error = "operation_in_progress" }
     end
@@ -139,6 +247,10 @@ local function insert_sim(source, phone_imei, confirmed)
         return { success = false, error = "phone_not_owned" }
     end
     local phone_slot = phone_matches[1]
+    local prepared, prepare_error = prepare_device(source, phone_slot, phone_imei)
+    if not prepared then
+        return { success = false, error = prepare_error }
+    end
     local device = SkyPhone.LoadDevice(phone_imei)
     local old_sim = device.sim_id and load_sim(device.sim_id) or nil
     if old_sim and not confirmed then
@@ -146,11 +258,7 @@ local function insert_sim(source, phone_imei, confirmed)
     end
 
     operation_locks[source] = true
-    local phone_metadata = phone_slot.metadata or {}
-    phone_metadata.sim_id = pending.sim.id
-    phone_metadata.phone_number = pending.sim.phone_number
-    phone_metadata.formatted_number = SkyPhoneSimNumber.Format(pending.sim.phone_number, Config.Sim.NumberGroups, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
-    if not Bridge.Inventory.SetSlotMetadata(source, phone_slot.slot, phone_metadata) then
+    if not set_phone_sim_metadata(source, phone_slot, pending.sim) then
         operation_locks[source] = nil
         return { success = false, error = "metadata_unsupported" }
     end
@@ -211,6 +319,9 @@ local function insert_sim(source, phone_imei, confirmed)
 end
 
 local function use_sim(source, used_item)
+    if not sim_cards_enabled then
+        return false
+    end
     local item_name = used_item and used_item.name
     local sim_type = item_name and sim_types[item_name]
     if not sim_type then
@@ -234,10 +345,10 @@ local function use_sim(source, used_item)
         TriggerClientEvent("sky_phone:device:error", source, error_code)
         return false
     end
-    local choices = list_phone_choices(source)
+    local choices, choice_error = list_phone_choices(source)
     if #choices == 0 then
         operation_locks[source] = nil
-        TriggerClientEvent("sky_phone:device:error", source, "phone_required")
+        TriggerClientEvent("sky_phone:device:error", source, choice_error or "phone_required")
         return false
     end
     pending_insertions[source] = {
@@ -257,10 +368,15 @@ local function use_sim(source, used_item)
     return true
 end
 
+-- Register the guarded callbacks in both modes so a resource-only restart can
+-- replace registrations left behind in framework-owned usable-item tables.
 Bridge.Inventory.RegisterUsableItem(Config.Sim.RegisteredItem, use_sim)
 Bridge.Inventory.RegisterUsableItem(Config.Sim.AnonymousItem, use_sim)
 
 Bridge.Callbacks.Register("sky_phone:sim:insert", function(source, data)
+    if not sim_cards_enabled then
+        return { success = false, error = "disabled" }
+    end
     if type(data) ~= "table" or not SkyPhoneImei.IsValid(data.imei) then
         return { success = false, error = "invalid_request" }
     end
@@ -268,6 +384,9 @@ Bridge.Callbacks.Register("sky_phone:sim:insert", function(source, data)
 end)
 
 Bridge.Callbacks.Register("sky_phone:sim:eject", function(source)
+    if not sim_cards_enabled then
+        return { success = false, error = "disabled" }
+    end
     if operation_locks[source] then
         return { success = false, error = "operation_in_progress" }
     end
@@ -277,7 +396,7 @@ Bridge.Callbacks.Register("sky_phone:sim:eject", function(source)
     end
     local device = SkyPhone.LoadDevice(session.imei)
     local sim = device and device.sim_id and load_sim(device.sim_id) or nil
-    if not sim then
+    if not sim or tonumber(sim.is_virtual) == 1 then
         return { success = false, error = "no_sim" }
     end
     local phone_slot = Bridge.Inventory.GetSlot(source, session.slot)
@@ -288,7 +407,10 @@ Bridge.Callbacks.Register("sky_phone:sim:eject", function(source)
     end
 
     operation_locks[source] = true
-    rollback_phone_metadata(source, phone_slot, nil)
+    if not set_phone_sim_metadata(source, phone_slot, nil) then
+        operation_locks[source] = nil
+        return { success = false, error = "metadata_unsupported" }
+    end
     if not Bridge.Inventory.AddItem(source, item_name, 1, nil, metadata) then
         rollback_phone_metadata(source, phone_slot, sim)
         operation_locks[source] = nil
@@ -313,4 +435,13 @@ AddEventHandler("playerDropped", function()
     pending_insertions[source] = nil
     operation_locks[source] = nil
 end)
+
+if sim_cards_enabled then
+    Bridge.Database.Query([[
+        UPDATE `sky_phone_devices` d
+        INNER JOIN `sky_phone_sims` s ON s.`id` = d.`sim_id`
+        SET d.`sim_id` = NULL
+        WHERE s.`is_virtual` = 1
+    ]], {})
+end
 end)
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 7e93c5d..2a0e4c9 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -55,6 +55,7 @@ CREATE TABLE IF NOT EXISTS `sky_phone_sims` (
     `contact_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL,
     `phone_number` VARCHAR(24) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
     `sim_type` ENUM('registered', 'anonymous') NOT NULL,
+    `is_virtual` TINYINT(1) NOT NULL DEFAULT 0,
     `owner_identifier` VARCHAR(80) NULL,
     `owner_firstname` VARCHAR(80) NULL,
     `owner_lastname` VARCHAR(80) NULL,
@@ -80,6 +81,16 @@ CREATE TABLE IF NOT EXISTS `sky_phone_devices` (
     FOREIGN KEY (`sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE SET NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
+CREATE TABLE IF NOT EXISTS `sky_phone_character_devices` (
+    `owner_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `device_imei` CHAR(15) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    PRIMARY KEY (`owner_identifier`),
+    UNIQUE KEY `uniq_sky_phone_character_devices_device` (`device_imei`),
+    FOREIGN KEY (`device_imei`) REFERENCES `sky_phone_devices` (`imei`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
 CREATE TABLE IF NOT EXISTS `sky_phone_device_data` (
     `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
     `device_imei` CHAR(15) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,

From 67edb404c6c24721daf1c72a8be7d6954d2a4302 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 11 Aug 2026 12:51:41 +0200
Subject: [PATCH 04/63] ENH - expand phone app experience

---
 frontend/src/App.vue                       |   11 +
 frontend/src/assets/main.css               |   41 +
 frontend/src/components/PhoneStatusBar.vue |   36 +-
 frontend/src/stores/calls.test.ts          |   50 +
 frontend/src/stores/calls.ts               |   50 +-
 frontend/src/stores/phone.ts               |   52 +
 frontend/src/types/phone.ts                |    5 +
 frontend/src/views/apps/BillingApp.vue     |   18 +-
 frontend/src/views/apps/CameraApp.vue      |   56 +-
 frontend/src/views/apps/MessagesApp.vue    |    2 +
 frontend/src/views/apps/PhoneApp.vue       | 3790 ++++++++++++++++++--
 frontend/testserver/index.cjs              |  609 +++-
 sky_phone/config/config.lua                |    1 +
 sky_phone/config/locales/en.lua            |   14 +-
 sky_phone/source/client/main.lua           |    2 +
 sky_phone/source/server/calls.lua          |  137 +-
 sky_phone/source/server/db_migrate.lua     |    6 +
 sky_phone/sql/install.sql                  |   18 +-
 18 files changed, 4548 insertions(+), 350 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index acb24ba..996483d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -226,6 +226,9 @@ const notifications = useNotificationsStore()
 const route = useRoute()
 const router = useRouter()
 const isAppRoute = computed(() => route.name === 'app')
+const showActiveCallReturn = computed(
+  () => Boolean(calls.activeCall) && route.params.appId !== 'phone',
+)
 const appTransitionName = computed(() =>
   route.query.transition === 'app-switch' ? 'app-switch' : 'app-window',
 )
@@ -818,6 +821,12 @@ function lockPhone(): void {
   isLocked.value = true
 }
 
+function returnToActiveCall(): void {
+  if (!calls.activeCall) return
+  controlCenterOpened.value = false
+  void router.push('/apps/phone')
+}
+
 function unlockCamera(): void {
   if (phone.security.enabled) {
     pendingUnlockRoute.value = '/apps/camera'
@@ -1044,8 +1053,10 @@ onBeforeUnmount(() => {
               >
                 <PhoneStatusBar
                   v-if="!isLocked"
+                  :active-call-return="showActiveCallReturn"
                   :control-center-opened="controlCenterOpened"
                   lockable
+                  @active-call="returnToActiveCall"
                   @control-center="toggleControlCenter"
                   @lock="lockPhone"
                 />
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 6006bb2..0ec360e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -467,6 +467,47 @@ button {
   cursor: pointer;
   pointer-events: auto;
 }
+.phone-status-bar__time-button--active-call {
+  isolation: isolate;
+  text-shadow: none;
+}
+.phone-status-bar__time-button--active-call::before {
+  position: absolute;
+  z-index: -1;
+  top: 19px;
+  left: calc(50% - 3px);
+  width: 90px;
+  height: 30px;
+  border-radius: 15px;
+  background: #34c759;
+  box-shadow: 0 2px 8px #0b6f2b66;
+  animation: phone-active-call-pill-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  content: '';
+  transform-origin: center;
+  transform: translateX(-50%);
+  transition: transform 140ms ease;
+}
+.phone-status-bar__time-button--active-call:active::before {
+  transform: translateX(-50%) scale(0.94);
+}
+.phone-status-bar__active-call-icon {
+  position: absolute;
+  top: 27px;
+  left: calc(50% - 39px);
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.5;
+}
+@keyframes phone-active-call-pill-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.82);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}
 .phone-status-bar__indicators {
   position: absolute;
   top: 0;
diff --git a/frontend/src/components/PhoneStatusBar.vue b/frontend/src/components/PhoneStatusBar.vue
index 78d6706..99c7902 100644
--- a/frontend/src/components/PhoneStatusBar.vue
+++ b/frontend/src/components/PhoneStatusBar.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
+import { PhoneCall } from 'lucide-vue-next'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import PhoneStatusIndicators from '@/components/PhoneStatusIndicators.vue'
 import { usePhoneStore } from '@/stores/phone'
 
 const phone = usePhoneStore()
-withDefaults(
-  defineProps<{ controlCenterOpened?: boolean; lockable?: boolean }>(),
+const props = withDefaults(
+  defineProps<{
+    activeCallReturn?: boolean
+    controlCenterOpened?: boolean
+    lockable?: boolean
+  }>(),
   {
+    activeCallReturn: false,
     controlCenterOpened: false,
     lockable: false,
   },
 )
-const emit = defineEmits<{ controlCenter: []; lock: [] }>()
+const emit = defineEmits<{ activeCall: []; controlCenter: []; lock: [] }>()
 const time = ref('')
 let intervalId: number | undefined
 
@@ -23,6 +29,14 @@ function updateTime(): void {
   }).format(new Date())
 }
 
+function handleTimeClick(): void {
+  if (props.activeCallReturn) {
+    emit('activeCall')
+    return
+  }
+  emit('lock')
+}
+
 onMounted(() => {
   updateTime()
   intervalId = window.setInterval(updateTime, 30_000)
@@ -38,10 +52,22 @@ onBeforeUnmount(() => {
     <button
       v-if="lockable"
       class="phone-status-bar__time phone-status-bar__time-button"
+      :class="{
+        'phone-status-bar__time-button--active-call': activeCallReturn,
+      }"
       type="button"
-      :aria-label="phone.t('LockScreen.label')"
-      @click.stop="emit('lock')"
+      :aria-label="
+        phone.t(
+          activeCallReturn ? 'Apps.phone.returnToCall' : 'LockScreen.label',
+        )
+      "
+      @click.stop="handleTimeClick"
     >
+      <PhoneCall
+        v-if="activeCallReturn"
+        class="phone-status-bar__active-call-icon"
+        aria-hidden="true"
+      />
       <time>{{ time }}</time>
     </button>
     <time v-else class="phone-status-bar__time">{{ time }}</time>
diff --git a/frontend/src/stores/calls.test.ts b/frontend/src/stores/calls.test.ts
index e737010..2b5c16c 100644
--- a/frontend/src/stores/calls.test.ts
+++ b/frontend/src/stores/calls.test.ts
@@ -68,4 +68,54 @@ describe('calls store', () => {
     expect(calls.activeCall).toBeNull()
     expect(nuiCall).toHaveBeenCalledWith('calls:recents')
   })
+
+  it('blocks the active caller and closes the call screen', async () => {
+    const calls = useCallsStore()
+    calls.applyCallState({
+      direction: 'incoming',
+      id: 'call-3',
+      otherNumber: '5551110025',
+      startedAt: 1,
+      state: 'ringing',
+    })
+
+    const response = await calls.blockNumber('5551110025')
+
+    expect(response.success).toBe(true)
+    expect(nuiCall).toHaveBeenCalledWith('calls:block', {
+      phoneNumber: '5551110025',
+    })
+    expect(calls.activeCall).toBeNull()
+    expect(nuiCall).toHaveBeenCalledWith('calls:recents')
+  })
+
+  it('updates a contact favorite and refreshes the contact list', async () => {
+    vi.mocked(nuiCall)
+      .mockResolvedValueOnce({
+        success: true,
+        data: { favorite: true, id: 'contact-alex' },
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          {
+            favorite: true,
+            id: 'contact-alex',
+            name: 'Alex Rivera',
+            phone_number: '5551110001',
+          },
+        ],
+      })
+    const calls = useCallsStore()
+
+    const response = await calls.setContactFavorite('contact-alex', true)
+
+    expect(response.success).toBe(true)
+    expect(nuiCall).toHaveBeenNthCalledWith(1, 'contacts:favorite', {
+      favorite: true,
+      id: 'contact-alex',
+    })
+    expect(nuiCall).toHaveBeenNthCalledWith(2, 'contacts:list')
+    expect(calls.contacts[0]?.favorite).toBe(true)
+  })
 })
diff --git a/frontend/src/stores/calls.ts b/frontend/src/stores/calls.ts
index 992ad86..5ac0ca3 100644
--- a/frontend/src/stores/calls.ts
+++ b/frontend/src/stores/calls.ts
@@ -35,8 +35,11 @@ export const useCallsStore = defineStore('calls', () => {
   }
 
   async function saveContact(contact: {
+    avatarMediaId?: number | null
     id?: string
     name: string
+    notes?: string
+    organization?: string
     phoneNumber: string
   }): Promise<NuiResponse<PhoneContact>> {
     const response = await nuiCall<PhoneContact>('contacts:save', contact)
@@ -58,17 +61,56 @@ export const useCallsStore = defineStore('calls', () => {
 
   async function answer(): Promise<NuiResponse> {
     if (!activeCall.value) return { success: false, error: 'call_not_found' }
-    return nuiCall('calls:answer', { id: activeCall.value.id })
+    const response = await nuiCall('calls:answer', { id: activeCall.value.id })
+    if (response.success && activeCall.value) {
+      activeCall.value = {
+        ...activeCall.value,
+        answeredAt: activeCall.value.answeredAt ?? Date.now(),
+        state: 'connected',
+      }
+    }
+    return response
   }
 
   async function decline(): Promise<boolean> {
     if (!activeCall.value) return false
-    return (await nuiCall('calls:decline', { id: activeCall.value.id })).success
+    const response = await nuiCall('calls:decline', { id: activeCall.value.id })
+    if (response.success) activeCall.value = null
+    return response.success
+  }
+
+  async function setContactFavorite(
+    id: string,
+    favorite: boolean,
+  ): Promise<NuiResponse<{ favorite: boolean; id: string }>> {
+    const response = await nuiCall<{ favorite: boolean; id: string }>(
+      'contacts:favorite',
+      { favorite, id },
+    )
+    if (response.success) await loadContacts()
+    return response
   }
 
   async function hangup(): Promise<boolean> {
     if (!activeCall.value) return false
-    return (await nuiCall('calls:hangup', { id: activeCall.value.id })).success
+    const response = await nuiCall('calls:hangup', { id: activeCall.value.id })
+    if (response.success) {
+      activeCall.value = null
+      await loadRecents()
+    }
+    return response.success
+  }
+
+  async function blockNumber(phoneNumber: string): Promise<NuiResponse> {
+    const response = await nuiCall('calls:block', { phoneNumber })
+    if (
+      response.success &&
+      activeCall.value?.otherNumber === phoneNumber
+    ) {
+      activeCall.value = null
+      await loadRecents()
+    }
+    return response
   }
 
   function applyCallState(call: PhoneCall): void {
@@ -95,6 +137,7 @@ export const useCallsStore = defineStore('calls', () => {
     answer,
     applyCallState,
     bootstrap,
+    blockNumber,
     contacts,
     decline,
     deleteContact,
@@ -104,5 +147,6 @@ export const useCallsStore = defineStore('calls', () => {
     loadRecents,
     recents,
     saveContact,
+    setContactFavorite,
   }
 })
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index e9288b9..14cb968 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -1007,6 +1007,7 @@ const defaultLocales: LocaleTree = {
       addContact: 'Add Contact',
       contactSaved: 'Contact saved',
       removeContact: 'Remove Contact',
+      returnToCall: 'Return to Call',
       block: 'Block User',
       unblock: 'Unblock User',
       clearChat: 'Clear Chat',
@@ -1164,13 +1165,59 @@ const defaultLocales: LocaleTree = {
       noSim: 'No SIM',
       noSimBody: 'Insert a SIM card in Settings to make calls.',
       noRecents: 'No Recent Calls',
+      allCalls: 'All',
+      missedCalls: 'Missed',
+      searchRecents: 'Search Calls',
+      contactDetails: 'Contact Details',
+      unknownCaller: 'Unknown Caller',
+      callHistory: 'Call History',
+      noCallHistory: 'No calls with this number yet.',
       noContacts: 'No Contacts',
+      favorites: 'Favorites',
       searchContacts: 'Search Contacts',
+      myCard: 'My Card',
+      myNumber: 'My Number',
+      device: 'Device',
+      contactIndex: 'Contact Index',
       addContact: 'New Contact',
+      newContact: 'New',
       editContact: 'Edit Contact',
       contactName: 'Name',
+      firstName: 'First Name',
+      lastName: 'Last Name',
+      companyOrGroup: 'Company or Group',
       phoneNumber: 'Phone Number',
+      choosePhoto: 'Choose Contact Photo',
+      chooseGallery: 'Gallery',
+      takePhoto: 'Camera',
+      removePhoto: 'Remove Photo',
       call: 'Call',
+      message: 'Message',
+      video: 'Video',
+      mail: 'Mail',
+      defaultLabel: 'Default',
+      privateLabel: 'Private',
+      contactCard: 'Contact Card',
+      removeContact: 'Remove Contact',
+      mobile: 'Mobile',
+      messagesProfile: 'Messages',
+      notes: 'Notes',
+      sendMessage: 'Send Message',
+      shareContact: 'Share Contact',
+      addFavorite: 'Add to Favorites',
+      removeFavorite: 'Remove from Favorites',
+      addEmergency: 'Add to Emergency Contacts',
+      blockContact: 'Block Contact',
+      block: 'Block',
+      blockCaller: 'Block Caller',
+      blockCallerTitle: 'Block this caller?',
+      blockCallerBody: '{number} will no longer be able to call this SIM.',
+      faceTime: 'FaceTime',
+      hideKeypad: 'Hide Keypad',
+      more: 'More',
+      mute: 'Mute',
+      speaker: 'Speaker',
+      viewContact: 'View Contact',
       calling: 'calling...',
       incoming: 'Incoming Call',
       incomingDirection: 'Incoming',
@@ -1198,9 +1245,14 @@ const defaultLocales: LocaleTree = {
       errors: {
         invalid_contact: 'Enter a name and valid phone number.',
         invalid_number: 'Enter a valid phone number.',
+        message_unavailable: 'The conversation could not be opened.',
+        contact_remove_failed: 'The contact could not be removed.',
+        contact_favorite_failed: 'The favorite could not be updated.',
         no_sim: 'This phone has no SIM card.',
         airplane_mode: 'Turn off Airplane Mode to make calls.',
         self_call: 'You cannot call your own number.',
+        blocked: 'This number is blocked.',
+        recipient_not_found: 'This number is not known.',
         busy: 'The line is busy.',
         rate_limited: 'Too many calls. Try again in a minute.',
         voice_unavailable: 'The configured phone voice service is unavailable.',
diff --git a/frontend/src/types/phone.ts b/frontend/src/types/phone.ts
index 3d4e9de..1527126 100644
--- a/frontend/src/types/phone.ts
+++ b/frontend/src/types/phone.ts
@@ -9,9 +9,14 @@ export type PhoneSim = {
 }
 
 export type PhoneContact = {
+  avatar_media_id?: number | null
+  avatar_url?: string | null
   created_at?: string
+  favorite?: boolean | number
   id: string
   name: string
+  notes?: string | null
+  organization?: string | null
   phone_number: string
   updated_at?: string
 }
diff --git a/frontend/src/views/apps/BillingApp.vue b/frontend/src/views/apps/BillingApp.vue
index 25c40b0..5e5ef30 100644
--- a/frontend/src/views/apps/BillingApp.vue
+++ b/frontend/src/views/apps/BillingApp.vue
@@ -286,6 +286,7 @@ onBeforeUnmount(() => {
       </div>
       <template v-else-if="billing.detail">
         <kGlass
+          :highlight="false"
           class="billing-detail__hero"
           :class="{
             'billing-detail__hero--paid': billing.detail.status === 'paid',
@@ -439,17 +440,26 @@ onBeforeUnmount(() => {
 
       <template v-else-if="tab === 'overview' && billing.overview">
         <div class="billing-summary">
-          <kGlass class="billing-summary__item billing-summary__item--open">
+          <kGlass
+            :highlight="false"
+            class="billing-summary__item billing-summary__item--open"
+          >
             <ReceiptText :size="19" />
             <span>{{ t('summary.open') }}</span>
             <strong>{{ billing.overview.openCount }}</strong>
           </kGlass>
-          <kGlass class="billing-summary__item billing-summary__item--due">
+          <kGlass
+            :highlight="false"
+            class="billing-summary__item billing-summary__item--due"
+          >
             <CalendarDays :size="19" />
             <span>{{ t('summary.due') }}</span>
             <strong>{{ formatMoney(billing.overview.openTotal) }}</strong>
           </kGlass>
-          <kGlass class="billing-summary__item billing-summary__item--overdue">
+          <kGlass
+            :highlight="false"
+            class="billing-summary__item billing-summary__item--overdue"
+          >
             <AlertTriangle :size="19" />
             <span>{{ t('summary.overdue') }}</span>
             <strong>{{ billing.overview.overdueCount }}</strong>
@@ -741,7 +751,7 @@ onBeforeUnmount(() => {
         /></span>
         <h2>{{ t('payment.title') }}</h2>
         <p>{{ t('payment.body', { issuer: billing.detail.issuerLabel }) }}</p>
-        <kGlass class="billing-payment-total">
+        <kGlass :highlight="false" class="billing-payment-total">
           <span>{{ billing.detail.title }}</span>
           <strong>{{
             formatMoney(billing.detail.amount, billing.detail.currency)
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index c1e604e..e840f08 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -117,14 +117,24 @@ function queueCapture(id: string, mediaType: MediaType): void {
   captures.value = captures.value.slice(0, 6)
 }
 
-function devMedia(id: string, mediaType: MediaType): PhoneMedia {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="900" height="1600"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#19354f"/><stop offset="1" stop-color="#d78357"/></linearGradient></defs><rect width="900" height="1600" fill="url(#g)"/><circle cx="680" cy="380" r="210" fill="#ffffff22"/><path d="M0 1200 260 840l180 220 170-170 290 310v400H0z" fill="#102331aa"/></svg>`
-  return {
-    createdAt: Date.now(),
-    id: Number(Date.now()),
-    mediaType,
-    url: `data:image/svg+xml,${encodeURIComponent(svg)}#${id}`,
-  }
+async function completeDevelopmentCapture(
+  correlationId: string,
+  mediaType: MediaType,
+): Promise<void> {
+  const response = await nuiCall<PhoneMedia>('media:devCapture', { mediaType })
+  window.dispatchEvent(
+    new MessageEvent('message', {
+      data: {
+        data: {
+          correlationId,
+          error: response.error,
+          media: response.data,
+          success: response.success,
+        },
+        type: 'media:uploadResult',
+      },
+    }),
+  )
 }
 
 async function requestPhoto(): Promise<void> {
@@ -137,20 +147,7 @@ async function requestPhoto(): Promise<void> {
     shutterActive.value = false
   }, 280)
   if (isDevelopment) {
-    window.setTimeout(() => {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: {
-            data: {
-              correlationId: id,
-              media: devMedia(id, 'photo'),
-              success: true,
-            },
-            type: 'media:uploadResult',
-          },
-        }),
-      )
-    }, 700)
+    window.setTimeout(() => void completeDevelopmentCapture(id, 'photo'), 700)
     return
   }
   await nuiCall('media:requestUpload', {
@@ -195,20 +192,7 @@ function stopRecording(): void {
     savingVideo.value = true
     if (recordingTimer !== undefined) window.clearInterval(recordingTimer)
     recordingTimer = undefined
-    window.setTimeout(() => {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: {
-            data: {
-              correlationId: id,
-              media: devMedia(id, 'video'),
-              success: true,
-            },
-            type: 'media:uploadResult',
-          },
-        }),
-      )
-    }, 900)
+    window.setTimeout(() => void completeDevelopmentCapture(id, 'video'), 900)
     return
   }
   window.postMessage(
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 6eaa0a8..836ffd5 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -390,6 +390,8 @@ async function saveContactDetails(): Promise<void> {
   const response = await calls.saveContact({
     id: activeContact.value?.id,
     name: contactNameDraft.value.trim(),
+    notes: activeContact.value?.notes ?? '',
+    organization: activeContact.value?.organization ?? '',
     phoneNumber: contactNumberDraft.value,
   })
   if (!response.success) {
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index dc77326..34fab17 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -4,52 +4,132 @@ import {
   kButton,
   kDialog,
   kDialogButton,
+  kGlass,
   kList,
   kListInput,
-  kListItem,
   kNavbar,
   kPage,
-  kSearchbar,
   kSegmented,
   kSegmentedButton,
+  kSheet,
 } from 'konsta/vue'
 import {
+  Camera,
+  Check,
+  ChevronRight,
+  ChevronLeft,
   Clock3,
   ContactRound,
   Delete,
+  Info,
+  Images,
+  Grid3X3,
+  Mail,
+  MessageCircle,
+  MicOff,
+  MoreHorizontal,
   Phone,
-  PhoneCall,
   PhoneIncoming,
   PhoneOff,
+  PhoneOutgoing,
   Plus,
+  Search,
+  Smartphone,
+  Star,
+  UserRound,
+  Video,
+  Volume2,
+  X,
 } from 'lucide-vue-next'
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { useCallsStore } from '@/stores/calls'
+import { useMessageMediaStore } from '@/stores/messageMedia'
+import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
 import type { PhoneContact, RecentCall } from '@/types/phone'
 import { formatPhoneNumber, normalizePhoneNumber } from '@/utils/phone'
 
 type PhoneTab = 'recents' | 'contacts' | 'keypad'
+type RecentFilter = 'all' | 'missed'
+type ContactProfileAction = 'message' | 'call' | 'video' | 'mail'
+type ContactPhotoContext = {
+  avatarMediaId: number | null
+  avatarUrl: string
+  contactId?: string
+  firstName: string
+  lastName: string
+  notes: string
+  organization: string
+  phoneNumber: string
+}
 
 const phone = usePhoneStore()
 const calls = useCallsStore()
+const mediaPicker = useMessageMediaStore()
+const messages = useMessagesStore()
+const router = useRouter()
 const tab = ref<PhoneTab>('recents')
 const query = ref('')
+const recentQuery = ref('')
+const recentFilter = ref<RecentFilter>('all')
+const selectedNumber = ref('')
+const viewingOwnCard = ref(false)
+const phoneContent = ref<HTMLElement | null>(null)
+const contactDetailCompact = ref(false)
 const keypad = ref('')
 const editorOpened = ref(false)
 const editingContact = ref<PhoneContact | null>(null)
-const contactName = ref('')
+const contactFirstName = ref('')
+const contactLastName = ref('')
+const contactOrganization = ref('')
+const contactNotes = ref('')
 const contactNumber = ref('')
+const contactAvatarMediaId = ref<number | null>(null)
+const contactAvatarUrl = ref('')
 const error = ref('')
+const callMoreOpened = ref(false)
+const callKeypadOpened = ref(false)
+const inCallKeypad = ref('')
+const blockDialogOpened = ref(false)
+const blockTargetNumber = ref('')
+const callSpeakerEnabled = ref(false)
+const callMuted = ref(false)
+const callElapsedSeconds = ref(0)
+let callClock: number | null = null
 const tabs = [
   { id: 'recents', icon: Clock3 },
   { id: 'contacts', icon: ContactRound },
   { id: 'keypad', icon: Phone },
 ] as const
+const keypadKeys = [
+  { digit: '1', letters: '' },
+  { digit: '2', letters: 'ABC' },
+  { digit: '3', letters: 'DEF' },
+  { digit: '4', letters: 'GHI' },
+  { digit: '5', letters: 'JKL' },
+  { digit: '6', letters: 'MNO' },
+  { digit: '7', letters: 'PQRS' },
+  { digit: '8', letters: 'TUV' },
+  { digit: '9', letters: 'WXYZ' },
+  { digit: '*', letters: '' },
+  { digit: '0', letters: '+' },
+  { digit: '#', letters: '' },
+] as const
+const contactProfileActions = [
+  { id: 'message', icon: MessageCircle },
+  { id: 'call', icon: Phone },
+  { id: 'video', icon: Video },
+  { id: 'mail', icon: Mail },
+] as const
+const contactAlphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', '#']
 const tabBarColors = {
   strongHighlightBgIos: 'bg-[#e5e5ea] dark:bg-[#2c2c2e]',
 }
+const profileNavbarColors = {
+  bgIos: 'bg-transparent',
+}
 const callButtonColors = {
   fillBgIos: 'bg-[#34c759] active:bg-[#30b350]',
   fillTextIos: 'text-white',
@@ -58,7 +138,6 @@ const endButtonColors = {
   fillBgIos: 'bg-[#ff3b30] active:bg-[#e6352b]',
   fillTextIos: 'text-white',
 }
-
 const visibleContacts = computed(() => {
   const needle = query.value.trim().toLowerCase()
   if (!needle) return calls.contacts
@@ -68,6 +147,86 @@ const visibleContacts = computed(() => {
       contact.phone_number.includes(needle.replace(/\D/g, '')),
   )
 })
+const contactsByNumber = computed(
+  () =>
+    new Map(calls.contacts.map((contact) => [contact.phone_number, contact])),
+)
+const groupedContacts = computed(() => {
+  const groups = new Map<string, PhoneContact[]>()
+  const sorted = [...visibleContacts.value].sort((left, right) =>
+    left.name.localeCompare(right.name, phone.lang, { sensitivity: 'base' }),
+  )
+  for (const contact of sorted) {
+    const firstCharacter = contact.name.trim().charAt(0).toUpperCase()
+    const letter = /^[A-Z]$/.test(firstCharacter) ? firstCharacter : '#'
+    const group = groups.get(letter) ?? []
+    group.push(contact)
+    groups.set(letter, group)
+  }
+  return contactAlphabet
+    .filter((letter) => groups.has(letter))
+    .map((letter) => ({ contacts: groups.get(letter) ?? [], letter }))
+})
+const favoriteContacts = computed(() =>
+  calls.contacts
+    .filter((contact) => Boolean(contact.favorite))
+    .sort((left, right) =>
+      left.name.localeCompare(right.name, phone.lang, { sensitivity: 'base' }),
+    ),
+)
+const visibleRecents = computed(() => {
+  const needle = recentQuery.value.trim().toLowerCase()
+  return calls.recents.filter((recent) => {
+    const contact = calls.contacts.find(
+      (entry) => entry.phone_number === recent.other_number,
+    )
+    const matchesFilter =
+      recentFilter.value === 'all' ||
+      ['missed', 'no_answer'].includes(recent.status)
+    const matchesQuery =
+      !needle ||
+      recent.other_number.includes(needle.replace(/\D/g, '')) ||
+      contact?.name.toLowerCase().includes(needle)
+    return matchesFilter && matchesQuery
+  })
+})
+const selectedContact = computed(
+  () =>
+    calls.contacts.find(
+      (contact) => contact.phone_number === selectedNumber.value,
+    ) ?? null,
+)
+const selectedHistory = computed(() =>
+  calls.recents.filter(
+    (recent) => recent.other_number === selectedNumber.value,
+  ),
+)
+const selectedDisplayName = computed(() => {
+  if (viewingOwnCard.value) return phone.t('Apps.phone.myCard')
+  return selectedContact.value?.name ?? formatPhoneNumber(selectedNumber.value)
+})
+const keypadDisplay = computed(() => {
+  if (!keypad.value) return ''
+  return /[*#]/.test(keypad.value)
+    ? keypad.value
+    : formatPhoneNumber(keypad.value)
+})
+const keypadSuggestions = computed(() => {
+  const enteredDigits = keypad.value.replace(/\D/g, '')
+  if (enteredDigits.length < 2 || /[*#]/.test(keypad.value)) return []
+  return calls.contacts
+    .filter((contact) =>
+      contact.phone_number.replace(/\D/g, '').startsWith(enteredDigits),
+    )
+    .sort((left, right) => {
+      const leftExact = left.phone_number.replace(/\D/g, '') === enteredDigits
+      const rightExact = right.phone_number.replace(/\D/g, '') === enteredDigits
+      if (leftExact !== rightExact) return leftExact ? -1 : 1
+      return left.name.localeCompare(right.name, phone.lang, {
+        sensitivity: 'base',
+      })
+    })
+})
 const activeCallLabel = computed(() => {
   const call = calls.activeCall
   if (!call) return ''
@@ -81,35 +240,188 @@ const activeCallLabel = computed(() => {
   const key = call.state === 'no_answer' ? 'noAnswer' : call.state
   return phone.t(`Apps.phone.${key}`)
 })
+const activeCallStatus = computed(() => {
+  if (calls.activeCall?.state !== 'connected') return activeCallLabel.value
+  const minutes = Math.floor(callElapsedSeconds.value / 60)
+  const seconds = String(callElapsedSeconds.value % 60).padStart(2, '0')
+  return `${String(minutes).padStart(2, '0')}:${seconds}`
+})
+const activeCallContact = computed(
+  () =>
+    calls.contacts.find(
+      (contact) => contact.phone_number === calls.activeCall?.otherNumber,
+    ) ?? null,
+)
+const contactEditorInitials = computed(() =>
+  [contactFirstName.value, contactLastName.value]
+    .map((part) => part.trim().charAt(0).toUpperCase())
+    .filter(Boolean)
+    .join(''),
+)
 
 function eventValue(event: Event): string {
   return (event.target as HTMLInputElement).value
 }
 
 function contactNameFor(number: string): string {
-  return (
-    calls.contacts.find((contact) => contact.phone_number === number)?.name ??
-    formatPhoneNumber(number)
-  )
+  return contactsByNumber.value.get(number)?.name ?? formatPhoneNumber(number)
 }
 
 function openContact(contact?: PhoneContact, number = ''): void {
   editingContact.value = contact ?? null
-  contactName.value = contact?.name ?? ''
+  const nameParts = contact?.name.trim().split(/\s+/) ?? []
+  contactFirstName.value = nameParts.shift() ?? ''
+  contactLastName.value = nameParts.join(' ')
+  contactOrganization.value = contact?.organization ?? ''
+  contactNotes.value = contact?.notes ?? ''
   contactNumber.value = contact?.phone_number ?? number
+  contactAvatarMediaId.value = contact?.avatar_media_id ?? null
+  contactAvatarUrl.value = contact?.avatar_url ?? ''
   error.value = ''
   editorOpened.value = true
 }
 
+function openContactPhotoPicker(source: 'camera' | 'photos'): void {
+  mediaPicker.begin(
+    'phone:contact-photo',
+    'photo',
+    '/apps/phone',
+    1,
+    {
+      avatarMediaId: contactAvatarMediaId.value,
+      avatarUrl: contactAvatarUrl.value,
+      contactId: editingContact.value?.id,
+      firstName: contactFirstName.value,
+      lastName: contactLastName.value,
+      notes: contactNotes.value,
+      organization: contactOrganization.value,
+      phoneNumber: contactNumber.value,
+    } satisfies ContactPhotoContext,
+  )
+  editorOpened.value = false
+  void router.push({
+    path: `/apps/${source}`,
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
+function removeContactPhoto(): void {
+  contactAvatarMediaId.value = null
+  contactAvatarUrl.value = ''
+}
+
+function openRecentDetail(number: string): void {
+  viewingOwnCard.value = false
+  selectedNumber.value = number
+  contactDetailCompact.value = false
+  error.value = ''
+  void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
+}
+
+function openMyCard(): void {
+  if (!phone.device?.sim) return
+  viewingOwnCard.value = true
+  selectedNumber.value = phone.device.sim.number
+  contactDetailCompact.value = false
+  error.value = ''
+  void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
+}
+
+function closeRecentDetail(): void {
+  viewingOwnCard.value = false
+  selectedNumber.value = ''
+  contactDetailCompact.value = false
+}
+
+function selectTab(nextTab: PhoneTab): void {
+  viewingOwnCard.value = false
+  selectedNumber.value = ''
+  contactDetailCompact.value = false
+  tab.value = nextTab
+}
+
+function handlePhoneContentScroll(): void {
+  if (!selectedNumber.value) {
+    contactDetailCompact.value = false
+    return
+  }
+  const scrollTop = phoneContent.value?.scrollTop ?? 0
+  contactDetailCompact.value = contactDetailCompact.value
+    ? scrollTop > 110
+    : scrollTop > 165
+}
+
+function scrollToContactGroup(letter: string): void {
+  const scroller = phoneContent.value
+  if (letter === 'favorites') {
+    const target = document.getElementById('phone-contact-group-favorites')
+    if (!scroller || !target) return
+    const scrollTop =
+      scroller.scrollTop +
+      target.getBoundingClientRect().top -
+      scroller.getBoundingClientRect().top -
+      8
+    scroller.scrollTo({ behavior: 'smooth', top: scrollTop })
+    return
+  }
+  const availableLetters = new Set(
+    groupedContacts.value.map((group) => group.letter),
+  )
+  let targetLetter = letter
+  if (!availableLetters.has(targetLetter)) {
+    const requestedIndex = contactAlphabet.indexOf(letter)
+    for (let distance = 1; distance < contactAlphabet.length; distance += 1) {
+      const nextLetter = contactAlphabet[requestedIndex + distance]
+      if (nextLetter && availableLetters.has(nextLetter)) {
+        targetLetter = nextLetter
+        break
+      }
+      const previousLetter = contactAlphabet[requestedIndex - distance]
+      if (previousLetter && availableLetters.has(previousLetter)) {
+        targetLetter = previousLetter
+        break
+      }
+    }
+  }
+  const suffix = targetLetter === '#' ? 'other' : targetLetter.toLowerCase()
+  const target = document.getElementById(`phone-contact-group-${suffix}`)
+  if (!scroller || !target) return
+  const scrollTop =
+    scroller.scrollTop +
+    target.getBoundingClientRect().top -
+    scroller.getBoundingClientRect().top -
+    8
+  scroller.scrollTo({ behavior: 'smooth', top: scrollTop })
+}
+
+async function toggleSelectedFavorite(): Promise<void> {
+  const contact = selectedContact.value
+  if (!contact) return
+  const response = await calls.setContactFavorite(
+    contact.id,
+    !Boolean(contact.favorite),
+  )
+  if (!response.success) {
+    error.value = phone.t('Apps.phone.errors.contact_favorite_failed')
+  }
+}
+
 async function saveContact(): Promise<void> {
   const number = normalizePhoneNumber(contactNumber.value)
-  if (!contactName.value.trim() || !number) {
+  const name = [contactFirstName.value, contactLastName.value]
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .join(' ')
+  if (!name || !number) {
     error.value = phone.t('Apps.phone.errors.invalid_contact')
     return
   }
   const response = await calls.saveContact({
+    avatarMediaId: contactAvatarMediaId.value,
     id: editingContact.value?.id,
-    name: contactName.value.trim(),
+    name,
+    notes: contactNotes.value.trim(),
+    organization: contactOrganization.value.trim(),
     phoneNumber: number,
   })
   if (!response.success) {
@@ -117,6 +429,27 @@ async function saveContact(): Promise<void> {
     return
   }
   editorOpened.value = false
+  viewingOwnCard.value = false
+  selectedNumber.value = number
+  contactDetailCompact.value = false
+  void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
+}
+
+async function openMessage(number: string): Promise<void> {
+  error.value = ''
+  if (await messages.openThread(number)) {
+    void router.push('/apps/messages')
+    return
+  }
+  error.value = phone.t('Apps.phone.errors.message_unavailable')
+}
+
+function triggerContactAction(action: ContactProfileAction): void {
+  if (action === 'call') {
+    void startCall(selectedNumber.value)
+    return
+  }
+  if (action === 'message') void openMessage(selectedNumber.value)
 }
 
 async function startCall(number: string): Promise<void> {
@@ -135,6 +468,69 @@ async function answerCall(): Promise<void> {
   }
 }
 
+function updateCallElapsed(): void {
+  const call = calls.activeCall
+  if (!call || call.state !== 'connected') {
+    callElapsedSeconds.value = 0
+    return
+  }
+  const timestamp = call.answeredAt ?? call.startedAt
+  const startedAt = timestamp < 1_000_000_000_000 ? timestamp * 1000 : timestamp
+  callElapsedSeconds.value = Math.max(
+    0,
+    Math.floor((Date.now() - startedAt) / 1000),
+  )
+}
+
+function openCallContact(): void {
+  const call = calls.activeCall
+  if (!call) return
+  callMoreOpened.value = false
+  openContact(activeCallContact.value ?? undefined, call.otherNumber)
+}
+
+function messageActiveCaller(): void {
+  const number = calls.activeCall?.otherNumber
+  callMoreOpened.value = false
+  if (number) void openMessage(number)
+}
+
+async function removeActiveCallerContact(): Promise<void> {
+  const contact = activeCallContact.value
+  if (!contact) return
+  if (await calls.deleteContact(contact.id)) {
+    callMoreOpened.value = false
+    return
+  }
+  error.value = phone.t('Apps.phone.errors.contact_remove_failed')
+}
+
+function confirmBlockNumber(number: string): void {
+  callMoreOpened.value = false
+  blockTargetNumber.value = number
+  blockDialogOpened.value = true
+}
+
+async function blockNumber(): Promise<void> {
+  const number = blockTargetNumber.value
+  blockDialogOpened.value = false
+  error.value = ''
+  const response = await calls.blockNumber(number)
+  if (!response.success) {
+    error.value = phone.t(`Apps.phone.errors.${response.error ?? 'default'}`)
+  }
+}
+
+function openCallKeypad(): void {
+  callMoreOpened.value = false
+  inCallKeypad.value = ''
+  callKeypadOpened.value = true
+}
+
+function addInCallDigit(digit: string): void {
+  if (inCallKeypad.value.length < 24) inCallKeypad.value += digit
+}
+
 async function deleteEditedContact(): Promise<void> {
   if (!editingContact.value) return
   if (await calls.deleteContact(editingContact.value.id)) {
@@ -146,6 +542,10 @@ function addDigit(digit: string): void {
   if (keypad.value.length < 10) keypad.value += digit
 }
 
+function chooseKeypadSuggestion(contact: PhoneContact): void {
+  keypad.value = contact.phone_number.replace(/\D/g, '').slice(0, 10)
+}
+
 function recentStatus(recent: RecentCall): string {
   const key = recent.status === 'no_answer' ? 'noAnswer' : recent.status
   return phone.t(`Apps.phone.${key}`)
@@ -162,229 +562,796 @@ function recentSubtitle(recent: RecentCall): string {
   return `${direction} · ${status} · ${minutes}:${seconds}`
 }
 
-onMounted(() => {
-  void calls.bootstrap()
+function contactInitials(number: string): string {
+  const contact = calls.contacts.find((entry) => entry.phone_number === number)
+  if (!contact) return ''
+  return contact.name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('')
+}
+
+function formatRecentDate(value: string): string {
+  const date = new Date(value)
+  const now = new Date()
+  const sameDay =
+    date.getFullYear() === now.getFullYear() &&
+    date.getMonth() === now.getMonth() &&
+    date.getDate() === now.getDate()
+  if (sameDay) {
+    return new Intl.DateTimeFormat(phone.lang, {
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(date)
+  }
+  const daysAgo = Math.floor(
+    (new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime() -
+      new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()) /
+      86_400_000,
+  )
+  if (daysAgo < 7) {
+    return new Intl.DateTimeFormat(phone.lang, { weekday: 'long' }).format(date)
+  }
+  return new Intl.DateTimeFormat(phone.lang, {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+  }).format(date)
+}
+
+onMounted(async () => {
+  await calls.bootstrap()
+  const photoSelection = mediaPicker.consumeMany<ContactPhotoContext>(
+    'phone:contact-photo',
+  )
+  if (photoSelection) {
+    const context = photoSelection.context
+    editingContact.value = context?.contactId
+      ? (calls.contacts.find((contact) => contact.id === context.contactId) ??
+        null)
+      : null
+    contactFirstName.value = context?.firstName ?? ''
+    contactLastName.value = context?.lastName ?? ''
+    contactNotes.value = context?.notes ?? ''
+    contactOrganization.value = context?.organization ?? ''
+    contactNumber.value = context?.phoneNumber ?? ''
+    contactAvatarMediaId.value = context?.avatarMediaId ?? null
+    contactAvatarUrl.value = context?.avatarUrl ?? ''
+    if (photoSelection.media[0]) {
+      contactAvatarMediaId.value = photoSelection.media[0].id
+      contactAvatarUrl.value = photoSelection.media[0].url
+    }
+    tab.value = 'contacts'
+    editorOpened.value = true
+  }
+  callClock = window.setInterval(updateCallElapsed, 500)
+})
+
+onBeforeUnmount(() => {
+  if (callClock !== null) window.clearInterval(callClock)
 })
 </script>
 
 <template>
   <k-page
     class="native-app phone-calls-app"
-    :class="{ 'phone-app--light': !phone.isDarkMode }"
+    :class="{
+      'phone-app--light': !phone.isDarkMode,
+      'phone-calls-app--profile': Boolean(selectedNumber),
+    }"
   >
     <template v-if="calls.activeCall">
-      <k-navbar :title="phone.t('Apps.phone.name')" transparent />
-      <k-block
-        class="flex h-full flex-col items-center justify-center text-center"
+      <section
+        class="phone-active-call"
+        :class="{ 'phone-active-call--more': callMoreOpened }"
       >
-        <div
-          class="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-[#007aff] text-white"
-        >
-          <PhoneIncoming
-            v-if="calls.activeCall.direction === 'incoming'"
-            class="h-9 w-9"
-          />
-          <PhoneCall v-else class="h-9 w-9" />
-        </div>
-        <h2 class="m-0 text-2xl font-semibold">
-          {{ contactNameFor(calls.activeCall.otherNumber) }}
-        </h2>
-        <p class="mt-2 text-[#8e8e93]">{{ activeCallLabel }}</p>
-        <p v-if="error" class="mt-2 text-sm text-[#ff3b30]">{{ error }}</p>
-        <div class="mt-10 flex gap-5">
-          <k-button
-            v-if="
-              calls.activeCall.state === 'ringing' &&
-              calls.activeCall.direction === 'incoming'
-            "
-            rounded
-            large
-            :colors="callButtonColors"
-            @click="answerCall"
+        <header class="phone-active-call__identity">
+          <div class="phone-active-call__status">
+            <span>P</span>
+            {{ activeCallStatus }}
+          </div>
+          <h1>
+            {{ contactNameFor(calls.activeCall.otherNumber) }}
+          </h1>
+          <p v-if="error" class="phone-active-call__error">{{ error }}</p>
+        </header>
+
+        <Transition name="call-panel" mode="out-in">
+          <div
+            v-if="callKeypadOpened"
+            key="keypad"
+            class="phone-in-call-keypad"
           >
-            <Phone class="mr-2 h-5 w-5" />{{ phone.t('Apps.phone.answer') }}
-          </k-button>
-          <k-button
-            v-if="
-              calls.activeCall.state === 'ringing' &&
-              calls.activeCall.direction === 'incoming'
-            "
-            rounded
-            large
-            :colors="endButtonColors"
-            @click="calls.decline()"
+            <div class="phone-in-call-keypad__grid">
+              <button
+                v-for="key in keypadKeys"
+                :key="key.digit"
+                type="button"
+                @click="addInCallDigit(key.digit)"
+              >
+                <span>{{ key.digit }}</span>
+                <small>{{ key.letters }}</small>
+              </button>
+            </div>
+            <div class="phone-in-call-keypad__footer">
+              <k-button
+                rounded
+                class="phone-in-call-keypad__end"
+                :colors="endButtonColors"
+                @click="calls.hangup()"
+              >
+                <PhoneOff />
+              </k-button>
+              <k-button
+                clear
+                class="phone-in-call-keypad__hide"
+                @click="callKeypadOpened = false"
+                >{{ phone.t('Apps.phone.hideKeypad') }}</k-button
+              >
+            </div>
+          </div>
+
+          <div
+            v-else-if="callMoreOpened"
+            key="more"
+            class="phone-call-more"
+            @click.self="callMoreOpened = false"
           >
-            <PhoneOff class="mr-2 h-5 w-5" />{{ phone.t('Apps.phone.decline') }}
-          </k-button>
-          <k-button
-            v-else-if="
-              ['ringing', 'connected'].includes(calls.activeCall.state)
-            "
-            rounded
-            large
-            :colors="endButtonColors"
-            @click="calls.hangup()"
-          >
-            <PhoneOff class="mr-2 h-5 w-5" />{{ phone.t('Apps.phone.hangup') }}
-          </k-button>
-        </div>
-      </k-block>
+            <div class="phone-call-more__list">
+              <k-button
+                class="phone-call-more__item phone-call-more__contact-card"
+                @click="openCallContact"
+              >
+                <span class="phone-call-more__avatar">
+                  <span v-if="contactInitials(calls.activeCall.otherNumber)">
+                    {{ contactInitials(calls.activeCall.otherNumber) }}
+                  </span>
+                  <UserRound v-else />
+                </span>
+                <strong>{{
+                  phone.t(
+                    activeCallContact
+                      ? 'Apps.phone.contactCard'
+                      : 'Apps.phone.addToContacts',
+                  )
+                }}</strong>
+              </k-button>
+
+              <k-button
+                class="phone-call-more__item"
+                @click="messageActiveCaller"
+              >
+                <MessageCircle />
+                <strong>{{ phone.t('Apps.phone.sendMessage') }}</strong>
+              </k-button>
+
+              <k-button
+                v-if="activeCallContact"
+                class="phone-call-more__item phone-call-more__item--danger"
+                @click="removeActiveCallerContact"
+              >
+                <Delete />
+                <strong>{{ phone.t('Apps.phone.removeContact') }}</strong>
+              </k-button>
+
+              <k-button
+                class="phone-call-more__item phone-call-more__item--danger"
+                @click="confirmBlockNumber(calls.activeCall.otherNumber)"
+              >
+                <PhoneOff />
+                <strong>{{ phone.t('Apps.phone.blockCaller') }}</strong>
+              </k-button>
+            </div>
+          </div>
+
+          <div v-else key="actions" class="phone-active-call__actions">
+            <k-button
+              rounded
+              class="phone-call-action"
+              :class="{ 'is-active': callSpeakerEnabled }"
+              @click="callSpeakerEnabled = !callSpeakerEnabled"
+            >
+              <Volume2 />
+              <span>{{ phone.t('Apps.phone.speaker') }}</span>
+            </k-button>
+            <k-button rounded class="phone-call-action is-disabled" disabled>
+              <Video />
+              <span>{{ phone.t('Apps.phone.faceTime') }}</span>
+            </k-button>
+            <k-button
+              rounded
+              class="phone-call-action"
+              :class="{ 'is-active': callMuted }"
+              @click="callMuted = !callMuted"
+            >
+              <MicOff />
+              <span>{{ phone.t('Apps.phone.mute') }}</span>
+            </k-button>
+
+            <div class="phone-call-action-anchor">
+              <k-button
+                rounded
+                class="phone-call-action"
+                @click="callMoreOpened = !callMoreOpened"
+              >
+                <MoreHorizontal />
+                <span>{{ phone.t('Apps.phone.more') }}</span>
+              </k-button>
+            </div>
+            <k-button
+              rounded
+              class="phone-call-action phone-call-action--end"
+              :colors="endButtonColors"
+              @click="
+                calls.activeCall.direction === 'incoming' &&
+                calls.activeCall.state === 'ringing'
+                  ? calls.decline()
+                  : calls.hangup()
+              "
+            >
+              <PhoneOff />
+              <span>{{
+                phone.t(
+                  calls.activeCall.direction === 'incoming' &&
+                    calls.activeCall.state === 'ringing'
+                    ? 'Apps.phone.decline'
+                    : 'Apps.phone.hangup',
+                )
+              }}</span>
+            </k-button>
+            <k-button
+              v-if="
+                calls.activeCall.direction === 'incoming' &&
+                calls.activeCall.state === 'ringing'
+              "
+              rounded
+              class="phone-call-action phone-call-action--answer"
+              :colors="callButtonColors"
+              @click="answerCall"
+            >
+              <Phone />
+              <span>{{ phone.t('Apps.phone.answer') }}</span>
+            </k-button>
+            <k-button
+              v-else
+              rounded
+              class="phone-call-action"
+              @click="openCallKeypad"
+            >
+              <Grid3X3 />
+              <span>{{ phone.t('Apps.phone.keypad') }}</span>
+            </k-button>
+          </div>
+        </Transition>
+      </section>
     </template>
 
     <template v-else>
-      <k-navbar :title="phone.t(`Apps.phone.${tab}`)" large transparent>
-        <template #right>
-          <k-button
-            v-if="tab === 'contacts'"
-            clear
-            rounded
-            @click="openContact()"
-          >
-            <Plus class="h-5 w-5" />
-          </k-button>
-        </template>
-      </k-navbar>
-
-      <div class="phone-call-content">
+      <div
+        ref="phoneContent"
+        class="phone-call-content"
+        :class="{ 'phone-call-content--profile': selectedNumber }"
+        @scroll.passive="handlePhoneContentScroll"
+      >
         <k-block v-if="!phone.device?.sim" class="text-center">
           <h2>{{ phone.t('Apps.phone.noSim') }}</h2>
           <p class="text-[#8e8e93]">{{ phone.t('Apps.phone.noSimBody') }}</p>
         </k-block>
 
-        <template v-else-if="tab === 'recents'">
-          <k-list v-if="calls.recents.length" strong inset>
-            <k-list-item
-              v-for="recent in calls.recents"
-              :key="recent.id"
-              :title="contactNameFor(recent.other_number)"
-              :subtitle="recentSubtitle(recent)"
-              link
-              @click="startCall(recent.other_number)"
-            >
-              <template #after>
-                <span class="flex flex-col items-end gap-1 text-xs">
-                  {{ new Date(recent.created_at).toLocaleString(phone.lang) }}
+        <template v-else-if="selectedNumber">
+          <section
+            class="phone-contact-detail"
+            :class="{ 'phone-contact-detail--compact': contactDetailCompact }"
+          >
+            <header class="phone-detail-header">
+              <k-button
+                rounded
+                class="phone-detail-header-button phone-detail-back"
+                :aria-label="phone.t('Common.back')"
+                @click="closeRecentDetail"
+              >
+                <ChevronLeft :size="29" :stroke-width="2.4" />
+              </k-button>
+
+              <div class="phone-detail-compact-center">
+                <h2 class="phone-detail-compact-title">
+                  {{ selectedDisplayName }}
+                </h2>
+                <div class="phone-detail-compact-actions">
                   <k-button
-                    v-if="
-                      !calls.contacts.some(
-                        (contact) =>
-                          contact.phone_number === recent.other_number,
-                      )
-                    "
-                    clear
+                    v-for="action in contactProfileActions"
+                    :key="action.id"
                     rounded
-                    :aria-label="phone.t('Apps.phone.addToContacts')"
-                    @click.stop="openContact(undefined, recent.other_number)"
+                    class="phone-profile-action phone-profile-action--compact"
+                    :disabled="
+                      viewingOwnCard || ['video', 'mail'].includes(action.id)
+                    "
+                    :aria-label="phone.t(`Apps.phone.${action.id}`)"
+                    @click="triggerContactAction(action.id)"
                   >
-                    <Plus class="h-5 w-5" />
+                    <component
+                      :is="action.icon"
+                      :size="24"
+                      fill="currentColor"
+                    />
                   </k-button>
-                </span>
-              </template>
-            </k-list-item>
-          </k-list>
-          <k-block v-else class="text-center text-[#8e8e93]">{{
-            phone.t('Apps.phone.noRecents')
-          }}</k-block>
+                </div>
+              </div>
+
+              <k-button
+                v-if="!viewingOwnCard"
+                rounded
+                class="phone-detail-edit"
+                @click="
+                  openContact(selectedContact ?? undefined, selectedNumber)
+                "
+              >
+                {{
+                  phone.t(
+                    selectedContact ? 'Common.edit' : 'Apps.phone.addContact',
+                  )
+                }}
+              </k-button>
+              <span v-else class="phone-detail-edit-spacer" />
+            </header>
+
+            <div class="phone-contact-hero">
+              <div class="phone-contact-avatar phone-contact-avatar--large">
+                <img
+                  v-if="selectedContact?.avatar_url"
+                  :src="selectedContact.avatar_url"
+                  alt=""
+                />
+                <span v-else-if="contactInitials(selectedNumber)">{{
+                  contactInitials(selectedNumber)
+                }}</span>
+                <UserRound v-else :size="48" :stroke-width="1.8" />
+              </div>
+              <h2>{{ selectedDisplayName }}</h2>
+              <p
+                v-if="selectedContact?.organization"
+                class="phone-contact-organization"
+              >
+                {{ selectedContact.organization }}
+              </p>
+              <p v-if="!selectedContact && !viewingOwnCard">
+                {{ phone.t('Apps.phone.unknownCaller') }}
+              </p>
+
+              <div class="phone-contact-actions">
+                <k-button
+                  v-for="action in contactProfileActions"
+                  :key="action.id"
+                  rounded
+                  class="phone-profile-action"
+                  :disabled="
+                    viewingOwnCard || ['video', 'mail'].includes(action.id)
+                  "
+                  :aria-label="phone.t(`Apps.phone.${action.id}`)"
+                  @click="triggerContactAction(action.id)"
+                >
+                  <component :is="action.icon" :size="23" fill="currentColor" />
+                </k-button>
+              </div>
+            </div>
+
+            <section v-if="viewingOwnCard" class="phone-profile-content">
+              <k-glass class="phone-own-profile-card">
+                <div>
+                  <span><Phone :size="19" /></span>
+                  <p>
+                    <small>{{ phone.t('Apps.phone.myNumber') }}</small>
+                    <strong>{{ formatPhoneNumber(selectedNumber) }}</strong>
+                  </p>
+                </div>
+                <div>
+                  <span><Smartphone :size="19" /></span>
+                  <p>
+                    <small>{{ phone.t('Apps.phone.device') }}</small>
+                    <strong>{{ phone.device?.name }}</strong>
+                  </p>
+                </div>
+              </k-glass>
+            </section>
+
+            <section v-else class="phone-profile-content">
+              <k-glass class="phone-profile-card phone-profile-info-card">
+                <button type="button" @click="startCall(selectedNumber)">
+                  <span>
+                    <small>{{ phone.t('Apps.phone.mobile') }}</small>
+                    <strong>{{ formatPhoneNumber(selectedNumber) }}</strong>
+                  </span>
+                  <Phone :size="21" fill="currentColor" />
+                </button>
+                <button type="button" @click="openMessage(selectedNumber)">
+                  <span>
+                    <small>{{ phone.t('Apps.phone.messagesProfile') }}</small>
+                    <strong>{{ selectedDisplayName }}</strong>
+                  </span>
+                  <ChevronRight :size="23" />
+                </button>
+                <div class="phone-profile-notes">
+                  <span>{{ phone.t('Apps.phone.notes') }}</span>
+                  <p v-if="selectedContact?.notes">
+                    {{ selectedContact.notes }}
+                  </p>
+                </div>
+              </k-glass>
+
+              <k-glass class="phone-profile-card phone-profile-options-card">
+                <button type="button" @click="openMessage(selectedNumber)">
+                  <span>{{ phone.t('Apps.phone.sendMessage') }}</span>
+                </button>
+                <button type="button" disabled>
+                  <span>{{ phone.t('Apps.phone.shareContact') }}</span>
+                </button>
+                <button
+                  type="button"
+                  :disabled="!selectedContact"
+                  @click="toggleSelectedFavorite"
+                >
+                  <span>{{
+                    phone.t(
+                      selectedContact?.favorite
+                        ? 'Apps.phone.removeFavorite'
+                        : 'Apps.phone.addFavorite',
+                    )
+                  }}</span>
+                </button>
+              </k-glass>
+
+              <k-glass class="phone-profile-card phone-profile-single-option">
+                <button
+                  type="button"
+                  @click="confirmBlockNumber(selectedNumber)"
+                >
+                  <span>{{ phone.t('Apps.phone.blockContact') }}</span>
+                </button>
+              </k-glass>
+
+              <k-glass class="phone-history-card">
+                <h3>{{ phone.t('Apps.phone.callHistory') }}</h3>
+                <div
+                  v-for="recent in selectedHistory"
+                  :key="recent.id"
+                  class="phone-history-row"
+                >
+                  <span
+                    class="phone-history-direction"
+                    :class="{
+                      'phone-history-direction--missed': [
+                        'missed',
+                        'no_answer',
+                      ].includes(recent.status),
+                    }"
+                  >
+                    <PhoneIncoming
+                      v-if="recent.direction === 'incoming'"
+                      :size="17"
+                    />
+                    <PhoneOutgoing v-else :size="17" />
+                  </span>
+                  <span class="phone-history-copy">
+                    <strong>{{ recentStatus(recent) }}</strong>
+                    <small>{{ recentSubtitle(recent) }}</small>
+                  </span>
+                  <time>{{ formatRecentDate(recent.created_at) }}</time>
+                </div>
+                <p v-if="!selectedHistory.length" class="phone-history-empty">
+                  {{ phone.t('Apps.phone.noCallHistory') }}
+                </p>
+              </k-glass>
+            </section>
+          </section>
+        </template>
+
+        <template v-else-if="tab === 'recents'">
+          <section class="phone-recents">
+            <header class="phone-recents-header">
+              <div class="phone-recents-filter" role="group">
+                <button
+                  type="button"
+                  :class="{ active: recentFilter === 'all' }"
+                  @click="recentFilter = 'all'"
+                >
+                  {{ phone.t('Apps.phone.allCalls') }}
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: recentFilter === 'missed' }"
+                  @click="recentFilter = 'missed'"
+                >
+                  {{ phone.t('Apps.phone.missedCalls') }}
+                </button>
+              </div>
+              <h1>{{ phone.t('Apps.phone.recents') }}</h1>
+              <label class="phone-recents-search">
+                <Search :size="21" />
+                <input
+                  :value="recentQuery"
+                  :placeholder="phone.t('Apps.phone.searchRecents')"
+                  type="search"
+                  @input="recentQuery = eventValue($event)"
+                />
+              </label>
+            </header>
+
+            <div v-if="visibleRecents.length" class="phone-recents-list">
+              <article
+                v-for="recent in visibleRecents"
+                :key="recent.id"
+                class="phone-recent-row"
+              >
+                <div class="phone-contact-avatar">
+                  <img
+                    v-if="contactsByNumber.get(recent.other_number)?.avatar_url"
+                    :src="contactsByNumber.get(recent.other_number)?.avatar_url ?? ''"
+                    alt=""
+                  />
+                  <span v-else-if="contactInitials(recent.other_number)">{{
+                    contactInitials(recent.other_number)
+                  }}</span>
+                  <UserRound v-else :size="30" :stroke-width="1.8" />
+                </div>
+                <button
+                  class="phone-recent-call"
+                  type="button"
+                  @click="startCall(recent.other_number)"
+                >
+                  <span
+                    class="phone-recent-name"
+                    :class="{
+                      'phone-recent-name--missed': [
+                        'missed',
+                        'no_answer',
+                      ].includes(recent.status),
+                    }"
+                  >
+                    {{ contactNameFor(recent.other_number) }}
+                  </span>
+                  <span class="phone-recent-meta">
+                    <PhoneIncoming
+                      v-if="recent.direction === 'incoming'"
+                      :size="14"
+                    />
+                    <PhoneOutgoing v-else :size="14" />
+                    {{ recentStatus(recent) }}
+                  </span>
+                </button>
+                <time class="phone-recent-date">{{
+                  formatRecentDate(recent.created_at)
+                }}</time>
+                <button
+                  class="phone-recent-info"
+                  type="button"
+                  :aria-label="phone.t('Apps.phone.contactDetails')"
+                  @click="openRecentDetail(recent.other_number)"
+                >
+                  <Info :size="21" />
+                </button>
+              </article>
+            </div>
+            <k-block v-else class="text-center text-[#8e8e93]">{{
+              phone.t('Apps.phone.noRecents')
+            }}</k-block>
+          </section>
         </template>
 
         <template v-else-if="tab === 'contacts'">
-          <k-searchbar
-            :value="query"
-            :placeholder="phone.t('Apps.phone.searchContacts')"
-            @input="query = eventValue($event)"
-            @clear="query = ''"
-          />
-          <k-list v-if="visibleContacts.length" strong inset>
-            <k-list-item
-              v-for="contact in visibleContacts"
-              :key="contact.id"
-              :title="contact.name"
-              :subtitle="formatPhoneNumber(contact.phone_number)"
-              link
-              @click="openContact(contact)"
+          <section class="phone-contacts">
+            <header class="phone-contacts-header">
+              <div class="phone-contacts-toolbar">
+                <span aria-hidden="true" />
+                <h1>{{ phone.t('Apps.phone.contacts') }}</h1>
+                <button
+                  class="phone-contacts-add"
+                  type="button"
+                  :aria-label="phone.t('Apps.phone.addContact')"
+                  @click="openContact()"
+                >
+                  <Plus :size="28" />
+                </button>
+              </div>
+
+              <label class="phone-contacts-search">
+                <Search :size="21" />
+                <input
+                  :value="query"
+                  :placeholder="phone.t('Common.search')"
+                  type="search"
+                  @input="query = eventValue($event)"
+                />
+              </label>
+            </header>
+
+            <button class="phone-my-card" type="button" @click="openMyCard">
+              <div class="phone-contact-avatar">
+                <UserRound :size="30" :stroke-width="1.8" />
+              </div>
+              <span>
+                <strong>{{ phone.t('Apps.phone.myCard') }}</strong>
+                <small v-if="phone.device?.sim">{{
+                  formatPhoneNumber(phone.device.sim.number)
+                }}</small>
+              </span>
+            </button>
+
+            <div v-if="groupedContacts.length" class="phone-contact-groups">
+              <section
+                v-if="!query && favoriteContacts.length"
+                id="phone-contact-group-favorites"
+                class="phone-contact-group phone-contact-group--favorites"
+              >
+                <h2>
+                  <Star :size="13" fill="currentColor" />
+                  {{ phone.t('Apps.phone.favorites') }}
+                </h2>
+                <button
+                  v-for="contact in favoriteContacts"
+                  :key="`favorite-${contact.id}`"
+                  class="phone-contact-row"
+                  type="button"
+                  @click="openRecentDetail(contact.phone_number)"
+                >
+                  <span class="phone-contact-avatar">
+                    <img v-if="contact.avatar_url" :src="contact.avatar_url" alt="" />
+                    <template v-else>{{ contactInitials(contact.phone_number) }}</template>
+                  </span>
+                  <span class="phone-contact-name">{{ contact.name }}</span>
+                </button>
+              </section>
+              <section
+                v-for="group in groupedContacts"
+                :id="`phone-contact-group-${
+                  group.letter === '#' ? 'other' : group.letter.toLowerCase()
+                }`"
+                :key="group.letter"
+                class="phone-contact-group"
+              >
+                <h2>{{ group.letter }}</h2>
+                <button
+                  v-for="contact in group.contacts"
+                  :key="contact.id"
+                  class="phone-contact-row"
+                  type="button"
+                  @click="openRecentDetail(contact.phone_number)"
+                >
+                  <span class="phone-contact-avatar">
+                    <img v-if="contact.avatar_url" :src="contact.avatar_url" alt="" />
+                    <template v-else>{{ contactInitials(contact.phone_number) }}</template>
+                  </span>
+                  <span class="phone-contact-name">{{ contact.name }}</span>
+                </button>
+              </section>
+            </div>
+            <k-block v-else class="text-center text-[#8e8e93]">{{
+              phone.t('Apps.phone.noContacts')
+            }}</k-block>
+
+            <nav
+              v-if="!query"
+              class="phone-contact-index"
+              :aria-label="phone.t('Apps.phone.contactIndex')"
             >
-              <template #after>
-                <k-button
-                  clear
-                  rounded
-                  @click.stop="startCall(contact.phone_number)"
-                  ><Phone class="h-5 w-5"
-                /></k-button>
-              </template>
-            </k-list-item>
-          </k-list>
-          <k-block v-else class="text-center text-[#8e8e93]">{{
-            phone.t('Apps.phone.noContacts')
-          }}</k-block>
+              <button
+                v-if="favoriteContacts.length"
+                type="button"
+                :aria-label="phone.t('Apps.phone.favorites')"
+                @click="scrollToContactGroup('favorites')"
+              >
+                <Star :size="9" fill="currentColor" />
+              </button>
+              <button
+                v-for="letter in contactAlphabet"
+                :key="letter"
+                type="button"
+                @click="scrollToContactGroup(letter)"
+              >
+                {{ letter }}
+              </button>
+            </nav>
+          </section>
         </template>
 
         <template v-else>
-          <k-block class="text-center">
-            <div class="mb-5 min-h-10 text-2xl font-medium">
-              {{ formatPhoneNumber(keypad) }}
-            </div>
-            <div class="mx-auto grid max-w-[240px] grid-cols-3 gap-3">
-              <k-button
-                v-for="digit in [
-                  '1',
-                  '2',
-                  '3',
-                  '4',
-                  '5',
-                  '6',
-                  '7',
-                  '8',
-                  '9',
-                  '*',
-                  '0',
-                  '#',
-                ]"
-                :key="digit"
-                tonal
-                rounded
-                large
-                @click="addDigit(digit)"
+          <section class="phone-keypad">
+            <Transition name="keypad-suggestions">
+              <div
+                v-if="keypadSuggestions.length"
+                class="phone-keypad-suggestions"
+                aria-live="polite"
               >
-                {{ digit }}
-              </k-button>
+                <button
+                  v-for="contact in keypadSuggestions"
+                  :key="contact.id"
+                  class="phone-keypad-suggestion"
+                  type="button"
+                  @click="chooseKeypadSuggestion(contact)"
+                >
+                  <span class="phone-keypad-suggestion__avatar">
+                    <img
+                      v-if="contact.avatar_url"
+                      :src="contact.avatar_url"
+                      alt=""
+                    />
+                    <template v-else>{{
+                      contactInitials(contact.phone_number)
+                    }}</template>
+                  </span>
+                  <span class="phone-keypad-suggestion__copy">
+                    <strong>{{ contact.name }}</strong>
+                    <small>{{ formatPhoneNumber(contact.phone_number) }}</small>
+                  </span>
+                </button>
+              </div>
+            </Transition>
+            <div class="phone-keypad-number" aria-live="polite">
+              {{ keypadDisplay }}
             </div>
-            <div class="mt-5 flex justify-center gap-4">
-              <k-button
-                :disabled="keypad.length !== 10"
-                rounded
-                large
-                :colors="callButtonColors"
+            <div class="phone-keypad-grid">
+              <button
+                v-for="key in keypadKeys"
+                :key="key.digit"
+                class="phone-keypad-key"
+                type="button"
+                @click="addDigit(key.digit)"
+              >
+                <span>{{ key.digit }}</span>
+                <small :class="{ 'phone-keypad-plus': key.digit === '0' }">
+                  {{ key.letters }}
+                </small>
+              </button>
+            </div>
+            <div class="phone-keypad-actions">
+              <button
+                class="phone-keypad-call"
+                type="button"
                 @click="startCall(keypad)"
               >
-                <Phone class="h-6 w-6" />
-              </k-button>
-              <k-button
-                tonal
-                rounded
-                large
-                :disabled="!keypad"
+                <Phone :size="31" fill="currentColor" />
+              </button>
+              <button
+                v-if="keypad"
+                class="phone-keypad-delete"
+                type="button"
+                :aria-label="phone.t('Common.delete')"
                 @click="keypad = keypad.slice(0, -1)"
               >
-                <Delete class="h-6 w-6" />
-              </k-button>
+                <Delete :size="27" />
+              </button>
             </div>
-          </k-block>
+          </section>
         </template>
 
         <p v-if="error" class="px-5 text-center text-sm text-[#ff3b30]">
           {{ error }}
         </p>
       </div>
-      <k-navbar component="nav" :aria-label="phone.t('Apps.phone.name')">
+      <k-navbar
+        component="nav"
+        class="phone-bottom-navbar"
+        inner-class="hidden"
+        :colors="selectedNumber ? profileNavbarColors : undefined"
+        :aria-label="phone.t('Apps.phone.name')"
+      >
         <template #subnavbar>
-          <k-segmented strong rounded :colors="tabBarColors">
+          <k-segmented
+            strong
+            rounded
+            :colors="tabBarColors"
+            :data-active-tab="tab"
+          >
             <k-segmented-button
               v-for="item in tabs"
               :key="item.id"
               large
               :active="tab === item.id"
               :class="tab === item.id ? 'text-[#007aff]' : 'text-[#8e8e93]'"
-              @click="tab = item.id"
+              :aria-label="phone.t(`Apps.phone.${item.id}`)"
+              :aria-pressed="tab === item.id"
+              @click="selectTab(item.id)"
             >
               <span
                 class="flex flex-col items-center gap-0.5 text-[10px] leading-none"
@@ -399,36 +1366,2435 @@ onMounted(() => {
     </template>
   </k-page>
 
-  <k-dialog :opened="editorOpened" @backdropclick="editorOpened = false">
-    <template #title>{{
-      phone.t(
-        editingContact ? 'Apps.phone.editContact' : 'Apps.phone.addContact',
-      )
-    }}</template>
-    <k-list strong inset>
-      <k-list-input
-        :value="contactName"
-        :label="phone.t('Apps.phone.contactName')"
-        @input="contactName = eventValue($event)"
-      />
-      <k-list-input
-        :value="contactNumber"
-        :label="phone.t('Apps.phone.phoneNumber')"
-        inputmode="numeric"
-        @input="contactNumber = eventValue($event)"
-      />
-    </k-list>
-    <p v-if="error" class="text-sm text-[#ff3b30]">{{ error }}</p>
+  <k-sheet
+    :opened="editorOpened"
+    class="phone-contact-editor-sheet"
+    @backdropclick="editorOpened = false"
+  >
+    <section
+      class="phone-contact-editor"
+      :class="{ 'phone-contact-editor--light': !phone.isDarkMode }"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="
+        phone.t(
+          editingContact ? 'Apps.phone.editContact' : 'Apps.phone.addContact',
+        )
+      "
+    >
+      <header class="phone-contact-editor__header">
+        <k-button
+          rounded
+          class="phone-contact-editor__header-button"
+          :aria-label="phone.t('Common.cancel')"
+          @click="editorOpened = false"
+        >
+          <X :size="27" />
+        </k-button>
+        <h2>
+          {{
+            phone.t(
+              editingContact
+                ? 'Apps.phone.editContact'
+                : 'Apps.phone.newContact',
+            )
+          }}
+        </h2>
+        <k-button
+          rounded
+          class="phone-contact-editor__header-button"
+          :aria-label="phone.t('Common.save')"
+          @click="saveContact"
+        >
+          <Check :size="28" :stroke-width="2.2" />
+        </k-button>
+      </header>
+
+      <div class="phone-contact-editor__scroll">
+        <div class="phone-contact-editor__photo">
+          <div
+            class="phone-contact-editor__avatar-wrap"
+            :class="{
+              'phone-contact-editor__avatar-wrap--has-photo': contactAvatarUrl,
+            }"
+          >
+            <button
+              class="phone-contact-editor__avatar"
+              type="button"
+              :aria-label="phone.t('Apps.phone.choosePhoto')"
+              @click="openContactPhotoPicker('photos')"
+            >
+              <img v-if="contactAvatarUrl" :src="contactAvatarUrl" alt="" />
+              <span v-else-if="contactEditorInitials">{{
+                contactEditorInitials
+              }}</span>
+              <UserRound v-else :size="72" :stroke-width="1.35" />
+            </button>
+            <k-button
+              v-if="contactAvatarUrl"
+              rounded
+              class="phone-contact-editor__remove-photo"
+              :aria-label="phone.t('Apps.phone.removePhoto')"
+              @click="removeContactPhoto"
+            >
+              <Delete :size="25" />
+              <span>{{ phone.t('Apps.phone.removePhoto') }}</span>
+            </k-button>
+          </div>
+          <div class="phone-contact-editor__photo-actions">
+            <k-button
+              small
+              rounded
+              tonal
+              @click="openContactPhotoPicker('photos')"
+            >
+              <Images :size="18" />
+              {{ phone.t('Apps.phone.chooseGallery') }}
+            </k-button>
+            <k-button
+              small
+              rounded
+              tonal
+              @click="openContactPhotoPicker('camera')"
+            >
+              <Camera :size="18" />
+              {{ phone.t('Apps.phone.takePhoto') }}
+            </k-button>
+          </div>
+        </div>
+
+        <k-list strong inset class="phone-contact-editor__name-list">
+          <k-list-input
+            :value="contactFirstName"
+            :placeholder="phone.t('Apps.phone.firstName')"
+            autocomplete="given-name"
+            @input="contactFirstName = eventValue($event)"
+          />
+          <k-list-input
+            :value="contactLastName"
+            :placeholder="phone.t('Apps.phone.lastName')"
+            autocomplete="family-name"
+            @input="contactLastName = eventValue($event)"
+          />
+          <k-list-input
+            :value="contactOrganization"
+            :placeholder="phone.t('Apps.phone.companyOrGroup')"
+            autocomplete="organization"
+            @input="contactOrganization = eventValue($event)"
+          />
+        </k-list>
+
+        <k-list strong inset class="phone-contact-editor__number-list">
+          <k-list-input
+            :value="contactNumber"
+            :label="phone.t('Apps.phone.mobile')"
+            :placeholder="phone.t('Apps.phone.phoneNumber')"
+            inputmode="tel"
+            autocomplete="tel"
+            @input="contactNumber = eventValue($event)"
+          >
+            <template #media>
+              <span class="phone-contact-editor__add-icon"
+                ><Plus :size="19"
+              /></span>
+            </template>
+          </k-list-input>
+        </k-list>
+
+        <k-list strong inset class="phone-contact-editor__notes-list">
+          <k-list-input
+            :value="contactNotes"
+            type="textarea"
+            :placeholder="phone.t('Apps.phone.notes')"
+            :maxlength="500"
+            autocapitalize="sentences"
+            @input="contactNotes = eventValue($event)"
+          />
+        </k-list>
+
+        <p v-if="error" class="phone-contact-editor__error">{{ error }}</p>
+
+        <k-button
+          v-if="editingContact"
+          class="phone-contact-editor__delete"
+          @click="deleteEditedContact"
+        >
+          {{ phone.t('Apps.phone.deleteContact') }}
+        </k-button>
+      </div>
+    </section>
+  </k-sheet>
+
+  <k-dialog
+    :opened="blockDialogOpened"
+    @backdropclick="blockDialogOpened = false"
+  >
+    <template #title>{{ phone.t('Apps.phone.blockCallerTitle') }}</template>
+    <p>
+      {{
+        phone.t('Apps.phone.blockCallerBody', {
+          number: contactNameFor(blockTargetNumber),
+        })
+      }}
+    </p>
     <template #buttons>
-      <k-dialog-button @click="editorOpened = false">{{
+      <k-dialog-button @click="blockDialogOpened = false">{{
         phone.t('Common.cancel')
       }}</k-dialog-button>
-      <k-dialog-button v-if="editingContact" @click="deleteEditedContact">{{
-        phone.t('Common.delete')
-      }}</k-dialog-button>
-      <k-dialog-button strong @click="saveContact">{{
-        phone.t('Common.save')
+      <k-dialog-button strong @click="blockNumber">{{
+        phone.t('Apps.phone.block')
       }}</k-dialog-button>
     </template>
   </k-dialog>
 </template>
+
+<style scoped>
+.phone-active-call {
+  position: absolute;
+  z-index: 30;
+  inset: 0;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: linear-gradient(180deg, #2f4a98 0%, #2a468f 44%, #293044 100%);
+  color: white;
+  text-align: center;
+}
+
+.phone-active-call::before {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  background: rgba(4, 12, 30, 0.48);
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.phone-active-call > * {
+  position: relative;
+  z-index: 1;
+}
+
+.phone-active-call--more::before {
+  opacity: 1;
+}
+
+.phone-active-call--more .phone-active-call__identity {
+  opacity: 0.48;
+}
+
+.phone-active-call__identity {
+  padding: 112px 24px 0;
+  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.call-panel-enter-active {
+  transition:
+    opacity 240ms ease-out,
+    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform;
+}
+
+.call-panel-leave-active {
+  transition:
+    opacity 150ms ease-in,
+    transform 190ms cubic-bezier(0.4, 0, 1, 1);
+  will-change: opacity, transform;
+}
+
+.call-panel-enter-from,
+.call-panel-leave-to {
+  opacity: 0;
+}
+
+.phone-active-call__actions.call-panel-enter-from,
+.phone-active-call__actions.call-panel-leave-to {
+  transform: translateY(18px) scale(0.985);
+}
+
+.phone-call-more.call-panel-enter-from,
+.phone-call-more.call-panel-leave-to {
+  transform: translateY(38px);
+}
+
+.phone-in-call-keypad.call-panel-enter-from,
+.phone-in-call-keypad.call-panel-leave-to {
+  transform: translateY(24px) scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .phone-active-call::before,
+  .phone-active-call__identity,
+  .call-panel-enter-active,
+  .call-panel-leave-active {
+    transition-duration: 1ms !important;
+  }
+}
+
+.phone-active-call__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  color: rgba(224, 230, 255, 0.66);
+  font-size: 25px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+.phone-active-call__status span {
+  display: grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  border-radius: 3px;
+  background: white;
+  color: #172758;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.phone-active-call__identity h1 {
+  max-width: 100%;
+  margin: 9px 0 0;
+  overflow: hidden;
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -0.8px;
+  line-height: 1.08;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-active-call__error {
+  margin: 10px 0 0;
+  color: #ffb4ae;
+  font-size: 12px;
+}
+
+.phone-active-call__actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 11px 19px;
+  width: 100%;
+  margin-top: auto;
+  padding: 0 28px 48px;
+}
+
+.phone-call-action {
+  position: relative;
+  display: flex !important;
+  width: 100% !important;
+  height: 108px !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 13px !important;
+  padding: 24px 0 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: white !important;
+  overflow: visible !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  line-height: 17px !important;
+  white-space: nowrap;
+}
+
+.phone-call-action-anchor {
+  min-width: 0;
+  height: 108px;
+}
+
+.phone-call-action::before {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 50%;
+  width: 80px;
+  height: 80px;
+  border: 1px solid rgba(215, 225, 255, 0.72);
+  border-radius: 50%;
+  background: rgba(145, 164, 215, 0.22);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+  content: '';
+  transform: translateX(-50%);
+  transition:
+    background-color 140ms ease,
+    transform 140ms ease;
+}
+
+.phone-call-action:active::before {
+  transform: translateX(-50%) scale(0.94);
+}
+
+.phone-call-action > svg,
+.phone-call-action > span {
+  position: relative;
+  z-index: 1;
+}
+
+.phone-call-action > svg {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  stroke-width: 2.2;
+}
+
+.phone-call-action > span {
+  position: absolute;
+  top: 89px;
+  display: block;
+  width: 112px;
+  overflow: hidden;
+  color: #fff;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  transition: none;
+}
+
+.phone-call-action.is-active {
+  color: #25458e !important;
+}
+
+.phone-call-action.is-active::before {
+  background: white;
+}
+
+.phone-call-action.is-disabled {
+  color: rgba(232, 236, 250, 0.56) !important;
+  opacity: 1 !important;
+}
+
+.phone-call-action.is-disabled > span {
+  color: rgba(232, 236, 250, 0.56);
+}
+
+.phone-call-action--end::before {
+  border-color: rgba(255, 186, 181, 0.72);
+  background: #d92d22;
+}
+
+.phone-call-action--answer::before {
+  border-color: rgba(190, 255, 198, 0.72);
+  background: #34a853;
+}
+
+.phone-call-more {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  align-items: flex-end;
+  padding: 0 34px 34px;
+}
+
+.phone-call-more__list {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.phone-call-more__item {
+  display: flex !important;
+  width: 100% !important;
+  height: 58px !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 13px !important;
+  padding: 0 27px !important;
+  border: 1px solid rgba(118, 137, 191, 0.38) !important;
+  border-radius: 30px !important;
+  background: rgba(20, 23, 39, 0.55) !important;
+  color: white !important;
+  box-shadow: none !important;
+  text-transform: none !important;
+}
+
+.phone-call-more__item:active {
+  background: rgba(49, 57, 84, 0.68) !important;
+}
+
+.phone-call-more__contact-card {
+  height: 72px !important;
+  padding: 0 33px !important;
+  border-radius: 38px !important;
+}
+
+.phone-call-more__item > svg {
+  width: 24px;
+  height: 24px;
+  flex: none;
+}
+
+.phone-call-more__item--danger {
+  color: #ff6961 !important;
+}
+
+.phone-call-more__avatar {
+  display: grid;
+  width: 45px;
+  height: 45px;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #4b92d1, #195287);
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.phone-call-more__avatar svg {
+  width: 24px;
+  height: 24px;
+}
+
+.phone-call-more__item strong {
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-in-call-keypad {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  padding: 0 28px 42px;
+}
+
+.phone-in-call-keypad__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 74px);
+  justify-content: center;
+  gap: 18px 40px;
+  margin-top: auto;
+}
+
+.phone-in-call-keypad__grid button {
+  display: flex;
+  width: 74px;
+  height: 74px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 50%;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.16),
+    rgba(255, 255, 255, 0.09)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    0 5px 14px rgba(8, 20, 55, 0.2);
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+  color: white;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
+}
+
+.phone-in-call-keypad__grid button:active {
+  background: rgba(151, 176, 231, 0.44);
+  transform: scale(0.95);
+}
+
+.phone-in-call-keypad__grid span {
+  font-size: 32px;
+  line-height: 31px;
+}
+
+.phone-in-call-keypad__grid small {
+  min-height: 10px;
+  margin-top: 2px;
+  font-size: 8px;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+}
+
+.phone-in-call-keypad__footer {
+  display: grid;
+  grid-template-columns: repeat(3, 74px);
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  margin-top: 42px;
+}
+
+.phone-in-call-keypad__end {
+  grid-column: 2;
+  width: 74px !important;
+  height: 74px !important;
+  padding: 0 !important;
+  border: 1px solid rgba(255, 178, 172, 0.78) !important;
+  border-radius: 50% !important;
+  background: #cf3027 !important;
+  color: white !important;
+}
+
+.phone-in-call-keypad__end svg {
+  width: 30px;
+  height: 30px;
+}
+
+.phone-in-call-keypad__hide {
+  grid-column: 3;
+  width: 96px !important;
+  margin-left: -11px;
+  padding: 0 !important;
+  color: white !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  line-height: 18px !important;
+  text-align: left;
+  white-space: normal !important;
+}
+
+@media (max-height: 700px) {
+  .phone-active-call__identity {
+    padding-top: 86px;
+  }
+
+  .phone-active-call__actions {
+    gap: 4px 15px;
+    padding-bottom: 28px;
+  }
+
+  .phone-call-action {
+    height: 97px !important;
+    padding-top: 20px !important;
+  }
+
+  .phone-call-action-anchor {
+    height: 97px;
+  }
+
+  .phone-call-action::before {
+    width: 70px;
+    height: 70px;
+  }
+
+  .phone-call-action > svg {
+    width: 29px;
+    height: 29px;
+  }
+
+  .phone-call-action > span {
+    top: 79px;
+  }
+
+  .phone-in-call-keypad {
+    padding-bottom: 24px;
+  }
+
+  .phone-in-call-keypad__grid {
+    grid-template-columns: repeat(3, 64px);
+    gap: 10px 34px;
+  }
+
+  .phone-in-call-keypad__grid button {
+    width: 64px;
+    height: 64px;
+  }
+
+  .phone-in-call-keypad__footer {
+    grid-template-columns: repeat(3, 64px);
+    gap: 34px;
+    margin-top: 20px;
+  }
+
+  .phone-in-call-keypad__end {
+    width: 64px !important;
+    height: 64px !important;
+  }
+}
+
+.phone-call-content {
+  min-height: 0;
+}
+
+.phone-bottom-navbar {
+  padding-top: 6px !important;
+}
+
+.phone-recents,
+.phone-contacts,
+.phone-contact-detail {
+  min-height: 100%;
+  padding: 8px 15px 16px;
+}
+
+.phone-contacts {
+  position: relative;
+  padding-top: 6px;
+  padding-right: 24px;
+  padding-bottom: 20px;
+}
+
+.phone-contacts-header {
+  padding-bottom: 16px;
+}
+
+.phone-contacts-toolbar {
+  display: grid;
+  grid-template-columns: 42px 1fr 42px;
+  align-items: center;
+  margin-bottom: 13px;
+}
+
+.phone-contacts-toolbar h1 {
+  margin: 0;
+  font-size: 17px;
+  text-align: center;
+}
+
+.phone-contacts-add {
+  display: flex;
+  width: 42px;
+  height: 42px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(142, 142, 147, 0.18);
+  border-radius: 50%;
+  background: rgba(118, 118, 128, 0.14);
+  color: inherit;
+}
+
+.phone-contacts-search {
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  gap: 9px;
+  padding: 0 14px;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.16);
+  color: #8e8e93;
+}
+
+.phone-contacts-search input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+}
+
+.phone-my-card {
+  display: flex;
+  width: 100%;
+  min-height: 72px;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.phone-my-card > span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-my-card strong {
+  font-size: 16px;
+}
+
+.phone-my-card small {
+  margin-top: 2px;
+  color: #8e8e93;
+  font-size: 12px;
+}
+
+.phone-contact-group {
+  scroll-margin-top: 10px;
+}
+
+.phone-contact-group h2 {
+  height: 28px;
+  margin: 0;
+  padding-top: 4px;
+  border-bottom: 1px solid rgba(142, 142, 147, 0.23);
+  color: #8e8e93;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.phone-contact-group--favorites h2 {
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+  color: #ffcc00;
+}
+
+.phone-contact-row {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  width: 100%;
+  min-height: 68px;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.phone-contact-row:not(:last-child) .phone-contact-name {
+  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-contact-name {
+  display: flex;
+  min-width: 0;
+  min-height: 68px;
+  align-items: center;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-contact-index {
+  position: fixed;
+  z-index: 40;
+  top: 50%;
+  right: 5px;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  transform: translateY(-42%);
+}
+
+.phone-contact-index button {
+  width: 24px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #0a84ff;
+  font: inherit;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 14px;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.phone-contact-index button svg {
+  display: block;
+  margin: auto;
+}
+
+.phone-contact-index button:active {
+  border-radius: 7px;
+  background: rgba(10, 132, 255, 0.2);
+}
+
+.phone-keypad {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 56px 24px 24px;
+}
+
+.phone-keypad-number {
+  display: flex;
+  width: 100%;
+  min-height: 50px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+  overflow: hidden;
+  font-size: 25px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-keypad-suggestions {
+  position: absolute;
+  z-index: 5;
+  top: 18px;
+  right: 24px;
+  left: 24px;
+  display: grid;
+  width: auto;
+  max-height: 132px;
+  gap: 6px;
+  margin: 0 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.phone-keypad-suggestions::-webkit-scrollbar {
+  display: none;
+}
+
+.phone-keypad-suggestion {
+  display: grid;
+  min-height: 46px;
+  grid-template-columns: 36px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 5px 12px 5px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 18px;
+  color: #fff;
+  background: rgba(44, 44, 46, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    0 4px 12px rgba(0, 0, 0, 0.16);
+  font: inherit;
+  text-align: left;
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  transition:
+    background-color 160ms ease-out,
+    border-color 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-keypad-suggestion__avatar {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #4b92d1, #195287);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.phone-keypad-suggestion__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.phone-keypad-suggestion__copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-keypad-suggestion__copy strong,
+.phone-keypad-suggestion__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-keypad-suggestion__copy strong {
+  font-size: 14px;
+  font-weight: 600;
+  transition: color 160ms ease-out;
+}
+
+.phone-keypad-suggestion__copy small {
+  margin-top: 1px;
+  color: #a5a5aa;
+  font-size: 11px;
+}
+
+.keypad-suggestions-enter-active,
+.keypad-suggestions-leave-active {
+  transition:
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.keypad-suggestions-enter-from,
+.keypad-suggestions-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.phone-keypad-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 78px);
+  gap: 18px 22px;
+}
+
+.phone-keypad-key {
+  display: flex;
+  width: 78px;
+  height: 78px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  background: linear-gradient(
+    180deg,
+    rgba(58, 58, 60, 0.92),
+    rgba(28, 28, 30, 0.88)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 5px 14px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+  color: white;
+  font: inherit;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
+}
+
+.phone-keypad-key:active {
+  background: #3a3a3c;
+  transform: scale(0.96);
+}
+
+.phone-keypad-key > span {
+  font-size: 36px;
+  font-weight: 400;
+  line-height: 34px;
+}
+
+.phone-keypad-key > small {
+  min-height: 13px;
+  margin-top: 3px;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 2.4px;
+  line-height: 10px;
+}
+
+.phone-keypad-key > small.phone-keypad-plus {
+  font-size: 15px;
+  letter-spacing: 0;
+}
+
+.phone-keypad-actions {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 82px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.phone-keypad-call,
+.phone-keypad-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: white;
+}
+
+.phone-keypad-call {
+  width: 78px;
+  height: 78px;
+  border: 1px solid rgba(133, 235, 143, 0.78);
+  background: linear-gradient(180deg, #3e9a49, #2f7d39);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 5px 14px rgba(23, 101, 35, 0.3);
+}
+
+.phone-keypad-call:active {
+  background: #2d7336;
+  transform: scale(0.96);
+}
+
+.phone-keypad-delete {
+  position: absolute;
+  left: calc(50% + 62px);
+  width: 48px;
+  height: 48px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(
+    180deg,
+    rgba(58, 58, 60, 0.92),
+    rgba(28, 28, 30, 0.88)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 5px 14px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+  color: #d1d1d6;
+}
+
+.phone-keypad-delete:active {
+  background: #3a3a3c;
+  transform: scale(0.96);
+}
+
+@media (max-height: 690px) {
+  .phone-keypad {
+    padding-top: 20px;
+    padding-bottom: 12px;
+  }
+
+  .phone-keypad-suggestions {
+    top: 6px;
+    max-height: 104px;
+  }
+
+  .phone-keypad-grid {
+    grid-template-columns: repeat(3, 70px);
+    gap: 12px 18px;
+  }
+
+  .phone-keypad-key {
+    width: 70px;
+    height: 70px;
+  }
+
+  .phone-keypad-actions {
+    min-height: 70px;
+    margin-top: 14px;
+  }
+
+  .phone-keypad-suggestion:nth-child(n + 2) {
+    display: none;
+  }
+
+  .phone-keypad-call {
+    width: 68px;
+    height: 68px;
+  }
+}
+
+.phone-recents-header {
+  padding: 4px 0 14px;
+}
+
+.phone-recents-filter {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 174px;
+  margin: 0 auto 14px;
+  padding: 3px;
+  border: 1px solid rgba(142, 142, 147, 0.25);
+  border-radius: 15px;
+  background: rgba(118, 118, 128, 0.14);
+}
+
+.phone-recents-filter button {
+  min-height: 30px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.phone-recents-filter button.active {
+  background: rgba(118, 118, 128, 0.34);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.phone-recents-header h1 {
+  margin: 0 0 13px;
+  font-size: 30px;
+  line-height: 1.06;
+  letter-spacing: -0.8px;
+}
+
+.phone-recents-search {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.16);
+  color: #8e8e93;
+}
+
+.phone-recents-search input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+}
+
+.phone-recents-list {
+  overflow: hidden;
+}
+
+.phone-recent-row {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr) auto 38px;
+  align-items: center;
+  min-height: 76px;
+  column-gap: 10px;
+}
+
+.phone-recent-row:not(:last-child) {
+  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-contact-avatar {
+  display: flex;
+  width: 52px;
+  height: 52px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #5b91c2, #22527d);
+  color: white;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.4px;
+  overflow: hidden;
+}
+
+.phone-contact-avatar img,
+.phone-contact-editor__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.phone-recent-call {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+
+.phone-recent-name {
+  overflow: hidden;
+  max-width: 100%;
+  font-size: 16px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-recent-name--missed {
+  color: #ff453a;
+}
+
+.phone-recent-meta {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  overflow: hidden;
+  max-width: 100%;
+  margin-top: 2px;
+  color: #8e8e93;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-recent-date {
+  color: #8e8e93;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.phone-recent-info {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(118, 118, 128, 0.14);
+  color: #0a84ff;
+}
+
+.phone-detail-header {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+}
+
+.phone-detail-back {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #0a84ff;
+  font: inherit;
+  font-size: 15px;
+}
+
+.phone-contact-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px 0 22px;
+  text-align: center;
+}
+
+.phone-contact-avatar--large {
+  width: 92px;
+  height: 92px;
+  font-size: 32px;
+}
+
+.phone-contact-hero h2 {
+  max-width: 100%;
+  margin: 12px 0 2px;
+  overflow: hidden;
+  font-size: 24px;
+  letter-spacing: -0.45px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-contact-hero p {
+  margin: 0;
+  color: #8e8e93;
+  font-size: 14px;
+}
+
+.phone-contact-hero .phone-contact-organization {
+  margin-top: 2px;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.phone-contact-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.phone-contact-actions button {
+  display: flex;
+  min-width: 0;
+  min-height: 70px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: 0;
+  border-radius: 14px;
+  background: rgba(118, 118, 128, 0.15);
+  color: #0a84ff;
+  font: inherit;
+  font-size: 12px;
+}
+
+.phone-contact-actions button > span {
+  display: flex;
+  min-height: 25px;
+  align-items: center;
+}
+
+.phone-own-profile-card {
+  overflow: hidden;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.12);
+}
+
+.phone-own-profile-card > div {
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr);
+  min-height: 62px;
+  align-items: center;
+  gap: 8px;
+  margin-left: 14px;
+  padding-right: 14px;
+}
+
+.phone-own-profile-card > div:not(:last-child) {
+  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-own-profile-card > div > span {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #0a84ff;
+  color: white;
+}
+
+.phone-own-profile-card p {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+}
+
+.phone-own-profile-card small {
+  color: #8e8e93;
+  font-size: 11px;
+}
+
+.phone-own-profile-card strong {
+  overflow: hidden;
+  margin-top: 2px;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-history-card {
+  overflow: hidden;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.12);
+}
+
+.phone-history-card h3 {
+  margin: 0;
+  padding: 13px 14px 10px;
+  font-size: 15px;
+}
+
+.phone-history-row {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: 58px;
+  gap: 8px;
+  margin-left: 14px;
+  padding-right: 14px;
+  border-top: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-history-direction {
+  color: #0a84ff;
+}
+
+.phone-history-direction--missed {
+  color: #ff453a;
+}
+
+.phone-history-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-history-copy strong {
+  font-size: 14px;
+}
+
+.phone-history-copy small,
+.phone-history-row time,
+.phone-history-empty {
+  color: #8e8e93;
+  font-size: 11px;
+}
+
+.phone-history-row time {
+  white-space: nowrap;
+}
+
+.phone-history-empty {
+  margin: 0;
+  padding: 18px 14px;
+  text-align: center;
+}
+
+.phone-call-content--profile {
+  background: transparent;
+  color: #fff;
+  scroll-behavior: smooth;
+}
+
+.phone-calls-app--profile {
+  background: linear-gradient(
+    180deg,
+    #a8b3b7 0,
+    #8991a2 18%,
+    #172f50 55%,
+    #061426 100%
+  ) !important;
+  color: #fff;
+}
+
+.phone-contact-detail {
+  position: relative;
+  padding: 0 15px 112px;
+}
+
+.phone-detail-header {
+  position: sticky;
+  z-index: 12;
+  top: 0;
+  display: grid;
+  height: 58px;
+  grid-template-columns: 48px minmax(0, 1fr) minmax(48px, auto);
+  align-items: start;
+  gap: 8px;
+  margin: 0 -15px;
+  padding: 7px 15px;
+  overflow: visible;
+  transition:
+    height 360ms cubic-bezier(0.22, 1, 0.36, 1),
+    background 260ms ease,
+    border-color 260ms ease,
+    border-radius 260ms ease,
+    box-shadow 260ms ease,
+    backdrop-filter 260ms ease;
+}
+
+.phone-contact-detail--compact .phone-detail-header {
+  height: 156px;
+  border-bottom: 1px solid rgba(100, 168, 255, 0.2);
+  border-radius: 0 0 22px 22px;
+  background: linear-gradient(
+    180deg,
+    rgba(32, 41, 51, 0.97) 0%,
+    rgba(31, 34, 51, 0.96) 56%,
+    rgba(19, 47, 78, 0.94) 100%
+  );
+  box-shadow:
+    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
+    0 14px 30px rgba(9, 7, 25, 0.28);
+  backdrop-filter: blur(30px) saturate(155%);
+  -webkit-backdrop-filter: blur(30px) saturate(155%);
+}
+
+.phone-detail-header-button,
+.phone-detail-edit {
+  min-width: 0;
+  height: 44px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #fff;
+  background: rgba(21, 35, 45, 0.88);
+  box-shadow: 0 2px 9px rgba(7, 12, 20, 0.16);
+}
+
+.phone-detail-header-button {
+  width: 44px;
+}
+
+.phone-detail-edit {
+  justify-self: end;
+  width: auto;
+  min-width: 86px;
+  padding: 0 17px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.phone-detail-edit-spacer {
+  width: 44px;
+}
+
+.phone-detail-compact-center {
+  position: static;
+  min-width: 0;
+  height: 44px;
+}
+
+.phone-detail-compact-title {
+  display: -webkit-box;
+  max-width: 190px;
+  margin: 1px auto 0;
+  overflow: hidden;
+  color: #fff;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.25px;
+  line-height: 1.12;
+  opacity: 0;
+  text-align: center;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 3px rgba(20, 25, 35, 0.12);
+  transform: translateY(-10px) scale(0.94);
+  transition:
+    opacity 180ms ease,
+    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.phone-contact-detail--compact .phone-detail-compact-title {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition-delay: 55ms;
+}
+
+.phone-detail-compact-actions {
+  position: absolute;
+  top: 60px;
+  left: 50%;
+  display: grid;
+  width: max-content;
+  grid-template-columns: repeat(4, 62px);
+  justify-content: center;
+  gap: 12px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -18px) scale(0.9);
+  transform-origin: top center;
+  transition:
+    opacity 180ms ease,
+    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.phone-contact-detail--compact .phone-detail-compact-actions {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-50%, 0) scale(1);
+  transition-delay: 80ms;
+}
+
+.phone-contact-hero {
+  padding: 31px 0 19px;
+}
+
+.phone-contact-avatar--large {
+  width: 148px;
+  height: 148px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: linear-gradient(
+    155deg,
+    rgba(176, 188, 195, 0.74),
+    rgba(45, 105, 158, 0.66)
+  );
+  box-shadow:
+    inset 0 1px 2px rgba(255, 255, 255, 0.38),
+    0 2px 3px rgba(18, 15, 43, 0.25);
+  font-size: 64px;
+  font-weight: 400;
+}
+
+.phone-contact-hero h2 {
+  margin: 14px 0 0;
+  color: #fff;
+  font-size: 29px;
+  font-weight: 700;
+  letter-spacing: -0.65px;
+}
+
+.phone-contact-actions {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(4, 62px);
+  justify-content: center;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.phone-profile-action {
+  width: 62px;
+  min-width: 62px;
+  height: 62px;
+  min-height: 62px;
+  padding: 0;
+  border: 1px solid rgba(10, 132, 255, 0.58);
+  color: #fff;
+  background: rgba(18, 82, 145, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 4px 14px rgba(13, 9, 33, 0.18);
+}
+
+.phone-profile-action:disabled {
+  color: rgba(255, 255, 255, 0.32);
+  opacity: 1;
+}
+
+.phone-profile-action--compact {
+  width: 62px;
+  min-width: 62px;
+  height: 62px;
+  min-height: 62px;
+  border-color: rgba(255, 255, 255, 0.26);
+  background: rgba(24, 35, 45, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 5px 15px rgba(20, 24, 37, 0.16);
+  transition:
+    background-color 140ms ease,
+    transform 140ms ease;
+}
+
+.phone-profile-action--compact:active {
+  background: rgba(40, 55, 67, 0.9);
+  transform: scale(0.92);
+}
+
+.phone-profile-content {
+  display: grid;
+  gap: 12px;
+}
+
+.phone-profile-card,
+.phone-own-profile-card,
+.phone-history-card {
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.035);
+  border-radius: 24px;
+  color: #fff;
+  background: rgba(18, 43, 69, 0.8);
+  box-shadow: 0 8px 22px rgba(5, 4, 20, 0.12);
+  backdrop-filter: blur(20px) saturate(125%);
+  -webkit-backdrop-filter: blur(20px) saturate(125%);
+}
+
+.phone-profile-info-card > button,
+.phone-profile-options-card > button,
+.phone-profile-single-option > button {
+  display: flex;
+  width: calc(100% - 30px);
+  min-height: 66px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 0 15px;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+}
+
+.phone-profile-info-card > button:last-of-type,
+.phone-profile-options-card > button:last-child,
+.phone-profile-single-option > button:last-child {
+  border-bottom: 0;
+}
+
+.phone-profile-info-card > button > span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-profile-info-card small {
+  color: #64a8ff;
+  font-size: 13px;
+}
+
+.phone-profile-info-card strong {
+  margin-top: 2px;
+  overflow: hidden;
+  font-size: 15px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-profile-info-card > button > svg {
+  flex: none;
+  color: #0a84ff;
+  transition:
+    color 160ms ease-out,
+    filter 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-profile-notes {
+  min-height: 105px;
+  margin: 0 15px;
+  padding: 17px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.17);
+  font-size: 15px;
+}
+
+.phone-profile-notes > span {
+  display: block;
+  color: #fff;
+}
+
+.phone-profile-notes > p {
+  margin: 8px 0 0;
+  color: rgba(255, 255, 255, 0.72);
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.phone-profile-options-card > button,
+.phone-profile-single-option > button {
+  min-height: 54px;
+  font-size: 15px;
+}
+
+.phone-profile-options-card > button > span,
+.phone-profile-single-option > button > span {
+  transition:
+    color 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-profile-options-card > button:disabled,
+.phone-profile-single-option > button:disabled {
+  color: inherit;
+  opacity: 1;
+}
+
+.phone-history-card h3 {
+  padding: 15px 16px 11px;
+  color: #fff;
+}
+
+.phone-history-row {
+  margin-left: 15px;
+  padding-right: 15px;
+  border-top-color: rgba(255, 255, 255, 0.17);
+}
+
+.phone-history-copy small,
+.phone-history-row time,
+.phone-history-empty {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.phone-contact-editor-sheet {
+  width: 100%;
+  height: calc(100% - 52px);
+  max-height: calc(100% - 52px);
+  border-radius: 30px 30px 0 0;
+  background: #3a3a3c;
+  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.28);
+}
+
+.phone-contact-editor {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: inherit;
+  color: #fff;
+  background: #3a3a3c;
+}
+
+.phone-contact-editor::before {
+  position: absolute;
+  z-index: 3;
+  top: 7px;
+  left: 50%;
+  width: 44px;
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.38);
+  content: '';
+  transform: translateX(-50%);
+}
+
+.phone-contact-editor__header {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  height: 78px;
+  padding: 18px 18px 6px;
+  grid-template-columns: 52px 1fr 52px;
+  align-items: center;
+  flex: 0 0 78px;
+  background: linear-gradient(180deg, #3a3a3c 72%, rgba(58, 58, 60, 0));
+}
+
+.phone-contact-editor__header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.phone-contact-editor__header-button {
+  width: 46px;
+  min-width: 46px;
+  height: 46px;
+  min-height: 46px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  background: rgba(28, 28, 30, 0.58);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.phone-contact-editor__header-button:last-child {
+  justify-self: end;
+  background: rgba(72, 72, 74, 0.76);
+}
+
+.phone-contact-editor__scroll {
+  min-height: 0;
+  flex: 1;
+  padding: 2px 14px 42px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.phone-contact-editor__scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.phone-contact-editor__avatar {
+  display: grid;
+  width: 154px;
+  height: 154px;
+  margin: 0;
+  padding: 0;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(155deg, #4b92d1 0%, #195287 100%);
+  box-shadow:
+    inset 0 1px 1px rgba(255, 255, 255, 0.16),
+    0 8px 18px rgba(5, 42, 78, 0.24);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.phone-contact-editor__avatar-wrap {
+  position: relative;
+  width: 154px;
+  height: 154px;
+  margin: 4px auto 12px;
+  border-radius: 50%;
+}
+
+.phone-contact-editor__remove-photo {
+  position: absolute !important;
+  z-index: 2;
+  inset: 0;
+  display: flex !important;
+  width: 100% !important;
+  height: 100% !important;
+  flex-direction: column !important;
+  gap: 7px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 50% !important;
+  color: #fff !important;
+  background: rgba(7, 35, 62, 0.7) !important;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.96);
+  transition:
+    opacity 170ms ease,
+    transform 170ms ease !important;
+}
+
+.phone-contact-editor__remove-photo > span {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.phone-contact-editor__avatar-wrap--has-photo:hover
+  .phone-contact-editor__remove-photo,
+.phone-contact-editor__remove-photo:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.phone-contact-editor__avatar img {
+  transition:
+    filter 170ms ease,
+    transform 170ms ease;
+}
+
+.phone-contact-editor__avatar-wrap--has-photo:hover
+  .phone-contact-editor__avatar img {
+  filter: brightness(0.58);
+  transform: scale(1.015);
+}
+
+.phone-contact-editor__avatar span {
+  font-size: 53px;
+  font-weight: 600;
+  letter-spacing: -2px;
+}
+
+.phone-contact-editor__photo {
+  margin-bottom: 22px;
+  text-align: center;
+}
+
+.phone-contact-editor__photo-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.phone-contact-editor__photo-actions :deep(button) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 34px;
+  padding-inline: 16px;
+  color: #0a84ff;
+}
+
+.phone-contact-editor__name-list,
+.phone-contact-editor__number-list,
+.phone-contact-editor__notes-list {
+  margin: 0 0 16px;
+  color: #fff;
+}
+
+.phone-contact-editor__name-list :deep(ul),
+.phone-contact-editor__number-list :deep(ul),
+.phone-contact-editor__notes-list :deep(ul) {
+  overflow: hidden;
+  border-radius: 24px;
+  background: #2c2c2e;
+}
+
+.phone-contact-editor__name-list :deep(li),
+.phone-contact-editor__number-list :deep(li),
+.phone-contact-editor__notes-list :deep(li) {
+  min-height: 58px;
+  background: transparent;
+}
+
+.phone-contact-editor__name-list :deep(input),
+.phone-contact-editor__number-list :deep(input),
+.phone-contact-editor__notes-list :deep(textarea) {
+  color: #fff;
+  font-size: 17px;
+}
+
+.phone-contact-editor__name-list :deep(input::placeholder),
+.phone-contact-editor__number-list :deep(input::placeholder),
+.phone-contact-editor__notes-list :deep(textarea::placeholder) {
+  color: #a7a7ac;
+  opacity: 1;
+}
+
+.phone-contact-editor__notes-list :deep(textarea) {
+  min-height: 112px;
+  resize: none;
+  line-height: 1.35;
+}
+
+.phone-contact-editor__add-icon {
+  display: grid;
+  width: 25px;
+  height: 25px;
+  place-items: center;
+  border-radius: 50%;
+  color: #fff;
+  background: #30d158;
+}
+
+.phone-contact-editor__error {
+  margin: -4px 14px 16px;
+  color: #ff6961;
+  font-size: 13px;
+  text-align: center;
+}
+
+.phone-contact-editor__delete {
+  width: 100%;
+  min-height: 56px;
+  border-radius: 22px;
+  color: #ff453a;
+  background: #2c2c2e;
+  font-size: 16px;
+}
+
+.phone-contact-editor--light {
+  color: #111;
+  background: #e5e5ea;
+}
+
+.phone-contact-editor--light .phone-contact-editor__header {
+  background: linear-gradient(180deg, #e5e5ea 72%, rgba(229, 229, 234, 0));
+}
+
+.phone-contact-editor--light .phone-contact-editor__header-button {
+  border-color: rgba(60, 60, 67, 0.18);
+  color: #111;
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.phone-contact-editor--light .phone-contact-editor__name-list,
+.phone-contact-editor--light .phone-contact-editor__number-list,
+.phone-contact-editor--light .phone-contact-editor__notes-list {
+  color: #111;
+}
+
+.phone-contact-editor--light .phone-contact-editor__name-list :deep(ul),
+.phone-contact-editor--light .phone-contact-editor__number-list :deep(ul),
+.phone-contact-editor--light .phone-contact-editor__notes-list :deep(ul),
+.phone-contact-editor--light .phone-contact-editor__delete {
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.phone-contact-editor--light .phone-contact-editor__name-list :deep(input),
+.phone-contact-editor--light .phone-contact-editor__number-list :deep(input),
+.phone-contact-editor--light .phone-contact-editor__notes-list :deep(textarea) {
+  color: #111;
+}
+
+@media (max-width: 360px) {
+  .phone-detail-header {
+    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
+    gap: 5px;
+  }
+
+  .phone-detail-edit {
+    min-width: 74px;
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  .phone-profile-action--compact {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+  }
+
+  .phone-detail-compact-actions {
+    grid-template-columns: repeat(4, 54px);
+    gap: 9px;
+  }
+
+  .phone-detail-compact-title {
+    max-width: 150px;
+  }
+
+  .phone-contact-actions {
+    grid-template-columns: repeat(4, 56px);
+    gap: 9px;
+  }
+
+  .phone-profile-action:not(.phone-profile-action--compact) {
+    width: 56px;
+    min-width: 56px;
+    height: 56px;
+    min-height: 56px;
+  }
+}
+
+.phone-calls-app button:not(:disabled),
+.phone-contact-editor button:not(:disabled) {
+  cursor: pointer;
+}
+
+.phone-recents-filter button,
+.phone-recents-search,
+.phone-contacts-search,
+.phone-recent-row,
+.phone-recent-info,
+.phone-contacts-add,
+.phone-my-card,
+.phone-contact-row,
+.phone-contact-index button,
+.phone-keypad-call,
+.phone-profile-action,
+.phone-detail-header-button,
+.phone-detail-edit,
+.phone-profile-info-card > button,
+.phone-profile-options-card > button,
+.phone-profile-single-option > button,
+.phone-call-more__item,
+.phone-contact-editor__avatar,
+.phone-contact-editor__header-button,
+.phone-contact-editor__delete,
+.phone-contact-editor__photo-actions :deep(button) {
+  transition:
+    color 160ms ease-out,
+    background-color 160ms ease-out,
+    border-color 160ms ease-out,
+    box-shadow 160ms ease-out,
+    filter 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-calls-app button:focus-visible,
+.phone-contact-editor button:focus-visible {
+  outline: 2px solid #64a8ff;
+  outline-offset: 2px;
+}
+
+.phone-keypad-key:hover,
+.phone-keypad-delete:hover {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: linear-gradient(
+    180deg,
+    rgba(68, 68, 70, 0.94),
+    rgba(38, 38, 40, 0.9)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 3px 9px rgba(0, 0, 0, 0.2);
+  transform: translateY(-1px);
+}
+
+.phone-keypad-call:hover {
+  border-color: rgba(151, 245, 161, 0.9);
+  background: linear-gradient(180deg, #48aa54, #378c42);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.26),
+    0 6px 16px rgba(52, 199, 89, 0.3);
+  transform: translateY(-2px) scale(1.015);
+}
+
+.phone-in-call-keypad__grid button:hover {
+  border-color: rgba(255, 255, 255, 0.22);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.12)
+  );
+  box-shadow: 0 3px 9px rgba(10, 30, 80, 0.15);
+  transform: translateY(-1px);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .phone-keypad-suggestion:hover .phone-keypad-suggestion__copy strong {
+    color: #68adff;
+  }
+
+  .phone-recents-filter button:not(.active):hover {
+    background: rgba(118, 118, 128, 0.22);
+  }
+
+  .phone-recents-search:hover,
+  .phone-contacts-search:hover {
+    background: rgba(118, 118, 128, 0.24);
+    box-shadow: inset 0 0 0 1px rgba(142, 142, 147, 0.18);
+  }
+
+  .phone-recent-row:has(button:hover),
+  .phone-my-card:hover,
+  .phone-contact-row:hover {
+    border-radius: 14px;
+    background: rgba(118, 118, 128, 0.12);
+    box-shadow: inset 0 0 0 1px rgba(142, 142, 147, 0.08);
+  }
+
+  .phone-recent-info:hover,
+  .phone-contacts-add:hover,
+  .phone-contact-index button:hover {
+    background: rgba(10, 132, 255, 0.16);
+    color: #55aaff;
+    transform: translateY(-1px);
+  }
+
+  .phone-call-action:not(:disabled):not(.phone-call-action--end):not(
+      .phone-call-action--answer
+    ):hover::before {
+    background: rgba(170, 187, 231, 0.32);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.12),
+      0 4px 12px rgba(11, 23, 62, 0.16);
+    transform: translateX(-50%) translateY(-1px) scale(1.012);
+  }
+
+  .phone-call-action--end:not(:disabled):hover::before {
+    border-color: rgba(255, 190, 185, 0.92);
+    background: #ff3b30;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 5px 14px rgba(215, 45, 34, 0.34);
+    transform: translateX(-50%) translateY(-1px) scale(1.012);
+  }
+
+  .phone-call-action--answer:not(:disabled):hover::before {
+    border-color: rgba(190, 255, 198, 0.9);
+    background: #3bc45d;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 5px 14px rgba(52, 168, 83, 0.3);
+    transform: translateX(-50%) translateY(-1px) scale(1.012);
+  }
+
+  .phone-call-more__item:not(:disabled):hover {
+    border-color: rgba(140, 165, 229, 0.66) !important;
+    background: rgba(49, 57, 84, 0.68) !important;
+    transform: translateY(-1px);
+  }
+
+  .phone-detail-header-button:not(:disabled):hover,
+  .phone-detail-edit:not(:disabled):hover {
+    border-color: rgba(255, 255, 255, 0.22);
+    background: rgba(37, 54, 66, 0.96);
+    transform: translateY(-1px);
+  }
+
+  .phone-profile-action:not(:disabled):hover {
+    border-color: rgba(100, 168, 255, 0.7);
+    background: rgba(22, 92, 158, 0.84);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      0 4px 12px rgba(5, 42, 78, 0.2);
+    transform: translateY(-1px);
+  }
+
+  .phone-profile-options-card > button:not(:disabled):hover > span,
+  .phone-profile-single-option > button:not(:disabled):hover > span {
+    color: #64a8ff;
+    transform: translateX(2px);
+  }
+
+  .phone-profile-info-card > button:not(:disabled):hover > svg {
+    color: #64a8ff;
+    filter: brightness(1.08);
+    transform: translateX(1px);
+  }
+
+  .phone-contact-editor__avatar-wrap:not(
+      .phone-contact-editor__avatar-wrap--has-photo
+    ):hover
+    .phone-contact-editor__avatar {
+    border-color: rgba(255, 255, 255, 0.22);
+    filter: brightness(1.06);
+    transform: scale(1.012);
+  }
+
+  .phone-contact-editor__header-button:not(:disabled):hover,
+  .phone-contact-editor__photo-actions :deep(button:not(:disabled):hover) {
+    filter: brightness(1.08);
+    transform: translateY(-1px);
+  }
+
+  .phone-contact-editor__delete:not(:disabled):hover {
+    background: #38383a;
+  }
+
+  .phone-calls-app :deep([data-active-tab] button[aria-pressed='false']:hover) {
+    background: rgba(118, 118, 128, 0.14);
+    transform: translateY(-1px);
+  }
+
+}
+
+@media (hover: none) {
+  .phone-contact-editor__remove-photo {
+    inset: auto 5px 5px auto;
+    width: 44px !important;
+    height: 44px !important;
+    background: rgba(7, 35, 62, 0.86) !important;
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+
+  .phone-contact-editor__remove-photo > span {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .phone-detail-header,
+  .phone-detail-compact-title,
+  .phone-detail-compact-actions,
+  .phone-profile-action--compact,
+  .phone-calls-app button,
+  .phone-contact-editor button {
+    transition-duration: 1ms;
+    transition-delay: 0ms;
+  }
+}
+
+.phone-app--light .phone-recents-filter,
+.phone-app--light .phone-recents-search,
+.phone-app--light .phone-contacts-add,
+.phone-app--light .phone-contacts-search,
+.phone-app--light .phone-recent-info,
+.phone-app--light .phone-contact-actions button,
+.phone-app--light .phone-own-profile-card,
+.phone-app--light .phone-history-card {
+  background: rgba(118, 118, 128, 0.1);
+}
+
+.phone-app--light .phone-keypad-suggestion {
+  border-color: rgba(60, 60, 67, 0.1);
+  color: #111;
+  background: rgba(229, 229, 234, 0.88);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 4px 12px rgba(60, 60, 67, 0.12);
+}
+
+.phone-app--light .phone-keypad-suggestion__copy small {
+  color: #6e6e73;
+}
+
+.phone-app--light .phone-keypad-key,
+.phone-app--light .phone-keypad-delete {
+  border-color: rgba(60, 60, 67, 0.1);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(229, 229, 234, 0.88)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 5px 14px rgba(60, 60, 67, 0.14);
+  color: #000;
+}
+
+.phone-app--light .phone-keypad-key:active,
+.phone-app--light .phone-keypad-delete:active {
+  background: #d1d1d6;
+}
+
+.phone-app--light .phone-keypad-key:hover,
+.phone-app--light .phone-keypad-delete:hover {
+  border-color: rgba(60, 60, 67, 0.12);
+  background: linear-gradient(
+    180deg,
+    rgba(248, 248, 250, 0.94),
+    rgba(222, 222, 227, 0.9)
+  );
+}
+</style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index ff47641..137bbda 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -1045,8 +1045,60 @@ const mockHousingOverview = {
   ],
 }
 
-let contactSequence = 2
+let contactSequence = 40
 const contacts = [
+  {
+    avatar_media_id: 1,
+    avatar_url: 'https://picsum.photos/seed/sky-phone-1/600/800',
+    created_at: isoTime(-42 * 86_400_000),
+    favorite: true,
+    id: 'contact-alex',
+    name: 'Alex Rivera',
+    notes: 'Meeting on Friday at 18:00 near the bank.',
+    organization: 'Maze Bank',
+    phone_number: '5551110001',
+    updated_at: isoTime(-6 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-38 * 86_400_000),
+    id: 'contact-alexander',
+    name: 'Alexander Stone',
+    phone_number: '5551110002',
+    updated_at: isoTime(-8 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-21 * 86_400_000),
+    id: 'contact-andre',
+    name: 'Andre Heinicke',
+    phone_number: '5551110003',
+    updated_at: isoTime(-4 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-34 * 86_400_000),
+    favorite: true,
+    id: 'contact-benni',
+    name: 'Benni Parker',
+    notes: 'Call about the Sultan RS repair estimate.',
+    organization: "Benny's Motor Works",
+    phone_number: '5551110004',
+    updated_at: isoTime(-12 * 86_400_000),
+  },
+  {
+    avatar_media_id: 3,
+    avatar_url: 'https://picsum.photos/seed/sky-phone-3/800/600',
+    created_at: isoTime(-18 * 86_400_000),
+    id: 'contact-bryce',
+    name: 'Bryce Walker',
+    phone_number: '5551110005',
+    updated_at: isoTime(-7 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-27 * 86_400_000),
+    id: 'contact-charlie',
+    name: 'Charlie Davis',
+    phone_number: '5551110006',
+    updated_at: isoTime(-11 * 86_400_000),
+  },
   {
     created_at: '2026-08-04 12:00:00',
     id: 'contact-1',
@@ -1054,6 +1106,185 @@ const contacts = [
     phone_number: '5558675309',
     updated_at: '2026-08-04 12:00:00',
   },
+  {
+    created_at: isoTime(-14 * 86_400_000),
+    id: 'contact-morgan',
+    name: 'Morgan Reed',
+    phone_number: '5550192847',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-30 * 86_400_000),
+    id: 'contact-jamie',
+    name: 'Jamie Chen',
+    phone_number: '5559876543',
+    updated_at: isoTime(-30 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-5 * 86_400_000),
+    id: 'contact-mechanic',
+    name: 'Downtown Customs',
+    phone_number: '5550100101',
+    updated_at: isoTime(-5 * 86_400_000),
+  },
+  {
+    avatar_media_id: 4,
+    avatar_url: 'https://picsum.photos/seed/sky-phone-4/800/600',
+    created_at: isoTime(-3 * 86_400_000),
+    favorite: true,
+    id: 'contact-taxi',
+    name: 'Los Santos Taxi',
+    organization: 'Los Santos Taxi Co.',
+    phone_number: '5552222222',
+    updated_at: isoTime(-3 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-22 * 86_400_000),
+    id: 'contact-daniel',
+    name: 'Daniel Price',
+    phone_number: '5551110007',
+    updated_at: isoTime(-3 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-20 * 86_400_000),
+    id: 'contact-emily',
+    name: 'Emily Hart',
+    phone_number: '5551110008',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-31 * 86_400_000),
+    id: 'contact-franklin',
+    name: 'Franklin Miles',
+    phone_number: '5551110009',
+    updated_at: isoTime(-9 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-25 * 86_400_000),
+    id: 'contact-grace',
+    name: 'Grace Carter',
+    phone_number: '5551110010',
+    updated_at: isoTime(-4 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-19 * 86_400_000),
+    id: 'contact-hannah',
+    name: 'Hannah Brooks',
+    phone_number: '5551110011',
+    updated_at: isoTime(-5 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-17 * 86_400_000),
+    id: 'contact-ivan',
+    name: 'Ivan Petrov',
+    phone_number: '5551110012',
+    updated_at: isoTime(-6 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-16 * 86_400_000),
+    id: 'contact-kevin',
+    name: 'Kevin Adams',
+    phone_number: '5551110013',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-15 * 86_400_000),
+    id: 'contact-naomi',
+    name: 'Naomi King',
+    phone_number: '5551110014',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-13 * 86_400_000),
+    id: 'contact-olivia',
+    name: 'Olivia Moore',
+    phone_number: '5551110015',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-12 * 86_400_000),
+    id: 'contact-paul',
+    name: 'Paul Walker',
+    phone_number: '5551110016',
+    updated_at: isoTime(-4 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-11 * 86_400_000),
+    id: 'contact-quinn',
+    name: 'Quinn Bailey',
+    phone_number: '5551110017',
+    updated_at: isoTime(-3 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-10 * 86_400_000),
+    id: 'contact-riley',
+    name: 'Riley Cooper',
+    phone_number: '5551110018',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-9 * 86_400_000),
+    id: 'contact-sofia',
+    name: 'Sofia Bennett',
+    phone_number: '5551110019',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-8 * 86_400_000),
+    id: 'contact-thomas',
+    name: 'Thomas Reed',
+    phone_number: '5551110020',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-7 * 86_400_000),
+    id: 'contact-ursula',
+    name: 'Ursula Grant',
+    phone_number: '5551110021',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-6 * 86_400_000),
+    id: 'contact-victor',
+    name: 'Victor Young',
+    phone_number: '5551110022',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-5 * 86_400_000),
+    id: 'contact-wendy',
+    name: 'Wendy Clark',
+    phone_number: '5551110023',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-4 * 86_400_000),
+    id: 'contact-xavier',
+    name: 'Xavier Cole',
+    phone_number: '5551110024',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-3 * 86_400_000),
+    id: 'contact-yakup',
+    name: 'Yakup Broooooo',
+    phone_number: '5551110025',
+    updated_at: isoTime(-86_400_000),
+  },
+  {
+    created_at: isoTime(-2 * 86_400_000),
+    id: 'contact-zoe',
+    name: 'Zoe Martinez',
+    phone_number: '5551110026',
+    updated_at: isoTime(-86_400_000),
+  },
+  {
+    created_at: isoTime(-86_400_000),
+    id: 'contact-market',
+    name: '24/7 Supermarket',
+    phone_number: '5552470000',
+    updated_at: isoTime(-3_600_000),
+  },
 ]
 const attachmentAssets = {
   gif: new Set(['celebrate', 'hearts', 'party', 'thumbs_up', 'wow']),
@@ -1183,6 +1414,126 @@ const smsMessages = [
     recipient_number: '5558675309',
     sender_number: '5551234567',
   },
+  {
+    body: 'Das Fahrzeug ist fertig. Du kannst es jederzeit abholen.',
+    created_at: isoTime(-26 * 60 * 60_000),
+    direction: 'received',
+    id: 'sms-customs-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-25 * 60 * 60_000),
+    recipient_number: '5551234567',
+    sender_number: '5550100101',
+  },
+  {
+    body: 'Perfekt, ich komme heute Abend vorbei.',
+    created_at: isoTime(-25 * 60 * 60_000),
+    direction: 'sent',
+    id: 'sms-customs-2',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-25 * 60 * 60_000),
+    recipient_number: '5550100101',
+    sender_number: '5551234567',
+  },
+  {
+    body: 'Treffen wir uns um 20 Uhr am Casino?',
+    created_at: isoTime(-7 * 60 * 60_000),
+    direction: 'received',
+    id: 'sms-morgan-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-6 * 60 * 60_000),
+    recipient_number: '5551234567',
+    sender_number: '5550192847',
+  },
+  {
+    body: 'Ja, passt. Ich bin puenktlich da.',
+    created_at: isoTime(-6 * 60 * 60_000),
+    direction: 'sent',
+    id: 'sms-morgan-2',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-6 * 60 * 60_000),
+    recipient_number: '5550192847',
+    sender_number: '5551234567',
+  },
+  {
+    body: 'Bin in zehn Minuten bei dir.',
+    created_at: isoTime(-95 * 60_000),
+    direction: 'received',
+    id: 'sms-jamie-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5559876543',
+  },
+  {
+    body: 'Dein Taxi wartet vor dem Haupteingang.',
+    created_at: isoTime(-38 * 60_000),
+    direction: 'received',
+    id: 'sms-taxi-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5552222222',
+  },
+  {
+    body: 'Danke, ich komme sofort raus.',
+    created_at: isoTime(-36 * 60_000),
+    direction: 'sent',
+    id: 'sms-taxi-2',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-35 * 60_000),
+    recipient_number: '5552222222',
+    sender_number: '5551234567',
+  },
+  {
+    body: 'Denk bitte an die Unterlagen fuer morgen.',
+    created_at: isoTime(-12 * 60_000),
+    direction: 'received',
+    id: 'sms-alex-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5551110001',
+  },
 ]
 const darkChatProfile = {
   id: 1,
@@ -1627,73 +1978,143 @@ const deviceData = {
 }
 let mockPasscode = ''
 let mockSecurity = { enabled: false, length: null, lockedUntil: 0 }
-let mockContacts = [
-  {
-    created_at: isoTime(-14 * 86_400_000),
-    id: 'contact-morgan',
-    name: 'Morgan Reed',
-    phone_number: '5550192847',
-    updated_at: isoTime(-2 * 86_400_000),
-  },
-  {
-    created_at: isoTime(-30 * 86_400_000),
-    id: 'contact-jamie',
-    name: 'Jamie Chen',
-    phone_number: '5559876543',
-    updated_at: isoTime(-30 * 86_400_000),
-  },
-  {
-    created_at: isoTime(-5 * 86_400_000),
-    id: 'contact-mechanic',
-    name: 'Downtown Customs',
-    phone_number: '5550100101',
-    updated_at: isoTime(-5 * 86_400_000),
-  },
-  {
-    created_at: isoTime(-3 * 86_400_000),
-    id: 'contact-taxi',
-    name: 'Los Santos Taxi',
-    phone_number: '5552222222',
-    updated_at: isoTime(-3 * 86_400_000),
-  },
-]
+const blockedCallNumbers = new Set()
 let recentCalls = [
+  {
+    call_id: 'call-alex-incoming',
+    created_at: isoTime(-8 * 60_000),
+    direction: 'incoming',
+    duration_seconds: 184,
+    id: 1,
+    other_number: '5551110001',
+    status: 'completed',
+  },
   {
     call_id: 'call-morgan-incoming',
     created_at: isoTime(-18 * 60_000),
     direction: 'incoming',
     duration_seconds: 246,
-    id: 1,
+    id: 2,
     other_number: '5550192847',
     status: 'completed',
   },
+  {
+    call_id: 'call-taxi-outgoing',
+    created_at: isoTime(-42 * 60_000),
+    direction: 'outgoing',
+    duration_seconds: 39,
+    id: 3,
+    other_number: '5552222222',
+    status: 'completed',
+  },
   {
     call_id: 'call-jamie-missed',
     created_at: isoTime(-95 * 60_000),
     direction: 'incoming',
     duration_seconds: 0,
-    id: 2,
+    id: 4,
     other_number: '5559876543',
     status: 'missed',
   },
+  {
+    call_id: 'call-emily-no-answer',
+    created_at: isoTime(-4 * 60 * 60_000),
+    direction: 'outgoing',
+    duration_seconds: 0,
+    id: 5,
+    other_number: '5551110008',
+    status: 'no_answer',
+  },
+  {
+    call_id: 'call-yakup-incoming',
+    created_at: isoTime(-8 * 60 * 60_000),
+    direction: 'incoming',
+    duration_seconds: 521,
+    id: 6,
+    other_number: '5551110025',
+    status: 'completed',
+  },
   {
     call_id: 'call-customs-outgoing',
     created_at: isoTime(-25 * 60 * 60_000),
     direction: 'outgoing',
     duration_seconds: 83,
-    id: 3,
+    id: 7,
     other_number: '5550100101',
     status: 'completed',
   },
   {
     call_id: 'call-unknown-declined',
-    created_at: isoTime(-2 * 86_400_000),
+    created_at: isoTime(-27 * 60 * 60_000),
     direction: 'incoming',
     duration_seconds: 0,
-    id: 4,
+    id: 8,
     other_number: '5554040404',
     status: 'declined',
   },
+  {
+    call_id: 'call-morgan-outgoing',
+    created_at: isoTime(-2 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 72,
+    id: 9,
+    other_number: '5550192847',
+    status: 'completed',
+  },
+  {
+    call_id: 'call-alex-missed',
+    created_at: isoTime(-3 * 86_400_000),
+    direction: 'incoming',
+    duration_seconds: 0,
+    id: 10,
+    other_number: '5551110001',
+    status: 'missed',
+  },
+  {
+    call_id: 'call-benni-busy',
+    created_at: isoTime(-4 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 0,
+    id: 11,
+    other_number: '5551110004',
+    status: 'busy',
+  },
+  {
+    call_id: 'call-sofia-incoming',
+    created_at: isoTime(-5 * 86_400_000),
+    direction: 'incoming',
+    duration_seconds: 116,
+    id: 12,
+    other_number: '5551110019',
+    status: 'completed',
+  },
+  {
+    call_id: 'call-xavier-unavailable',
+    created_at: isoTime(-6 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 0,
+    id: 13,
+    other_number: '5551110024',
+    status: 'unavailable',
+  },
+  {
+    call_id: 'call-market-outgoing',
+    created_at: isoTime(-7 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 51,
+    id: 14,
+    other_number: '5552470000',
+    status: 'completed',
+  },
+  {
+    call_id: 'call-unknown-missed',
+    created_at: isoTime(-8 * 86_400_000),
+    direction: 'incoming',
+    duration_seconds: 0,
+    id: 15,
+    other_number: '5559090909',
+    status: 'missed',
+  },
 ]
 let mockMedia = [
   {
@@ -5238,15 +5659,27 @@ app.post('/api/:endpoint', (request, response) => {
   }
   if (endpoint === 'contacts:save') {
     const name = String(request.body.name ?? '').trim()
+    const notes = String(request.body.notes ?? '').trim().slice(0, 500)
+    const organization = String(request.body.organization ?? '').trim().slice(0, 80)
     const phoneNumber = String(request.body.phoneNumber ?? '').trim()
-    if (!name || !phoneNumber) {
+    const avatarMediaId = Number(request.body.avatarMediaId) || 0
+    const avatarMedia = avatarMediaId
+      ? mockMedia.find(
+          (item) => item.id === avatarMediaId && item.mediaType === 'photo',
+        )
+      : null
+    if (!name || !phoneNumber || (avatarMediaId && !avatarMedia)) {
       response.json({ success: false, error: 'invalid_contact' })
       return
     }
     let contact = contacts.find((item) => item.id === request.body.id)
     if (contact) {
       contact.name = name
+      contact.notes = notes || null
+      contact.organization = organization || null
       contact.phone_number = phoneNumber
+      contact.avatar_media_id = avatarMedia?.id ?? null
+      contact.avatar_url = avatarMedia?.url ?? null
       contact.updated_at = new Date()
         .toISOString()
         .slice(0, 19)
@@ -5255,9 +5688,14 @@ app.post('/api/:endpoint', (request, response) => {
       const now = new Date().toISOString().slice(0, 19).replace('T', ' ')
       contact = {
         created_at: now,
+        favorite: false,
         id: `contact-${contactSequence++}`,
         name,
+        notes: notes || null,
+        organization: organization || null,
         phone_number: phoneNumber,
+        avatar_media_id: avatarMedia?.id ?? null,
+        avatar_url: avatarMedia?.url ?? null,
         updated_at: now,
       }
       contacts.push(contact)
@@ -5265,6 +5703,20 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: contact })
     return
   }
+  if (endpoint === 'contacts:favorite') {
+    const contact = contacts.find((item) => item.id === request.body.id)
+    if (!contact || typeof request.body.favorite !== 'boolean') {
+      response.json({ success: false, error: 'contact_not_found' })
+      return
+    }
+    contact.favorite = request.body.favorite
+    contact.updated_at = new Date().toISOString().slice(0, 19).replace('T', ' ')
+    response.json({
+      success: true,
+      data: { favorite: contact.favorite, id: contact.id },
+    })
+    return
+  }
   if (endpoint === 'contacts:delete') {
     const index = contacts.findIndex((item) => item.id === request.body.id)
     if (index >= 0) contacts.splice(index, 1)
@@ -5275,6 +5727,27 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: { videoBitrateKbps: 1500 } })
     return
   }
+  if (endpoint === 'media:devCapture') {
+    const mediaType = request.body.mediaType === 'video' ? 'video' : 'photo'
+    const id = Math.max(0, ...mockMedia.map((item) => Number(item.id) || 0)) + 1
+    const fallbackVideo = mockMedia.find((item) => item.mediaType === 'video')
+    const media = {
+      createdAt: Date.now(),
+      id,
+      mediaType,
+      url:
+        mediaType === 'photo'
+          ? `https://picsum.photos/seed/sky-camera-${id}/900/1600`
+          : fallbackVideo?.url,
+    }
+    if (!media.url) {
+      response.json({ success: false, error: 'unsupported' })
+      return
+    }
+    mockMedia.unshift(media)
+    response.json({ success: true, data: media })
+    return
+  }
   if (endpoint === 'gallery:list') {
     if (request.body.mockState === 'error') {
       response.json({ success: false, error: 'service_unavailable' })
@@ -5399,55 +5872,29 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true })
     return
   }
-  if (endpoint === 'contacts:list') {
-    response.json({ success: true, data: mockContacts })
-    return
-  }
-  if (endpoint === 'contacts:save') {
-    const now = new Date().toISOString()
-    const existing = mockContacts.find(
-      (contact) => contact.id === request.body.id,
-    )
-    if (existing) {
-      Object.assign(existing, {
-        name: request.body.name,
-        phone_number: request.body.phoneNumber,
-        updated_at: now,
-      })
-      response.json({ success: true, data: existing })
-      return
-    }
-    const contact = {
-      created_at: now,
-      id: `contact-${Date.now()}`,
-      name: request.body.name,
-      phone_number: request.body.phoneNumber,
-      updated_at: now,
-    }
-    mockContacts.push(contact)
-    response.json({ success: true, data: contact })
-    return
-  }
-  if (endpoint === 'contacts:delete') {
-    mockContacts = mockContacts.filter(
-      (contact) => contact.id !== request.body.id,
-    )
-    response.json({ success: true })
-    return
-  }
   if (endpoint === 'calls:recents') {
     response.json({ success: true, data: recentCalls })
     return
   }
   if (endpoint === 'calls:dial') {
+    const phoneNumber = String(request.body.phoneNumber ?? '').replace(/\D/g, '')
+    if (phoneNumber.length !== 10) {
+      response.json({ success: false, error: 'invalid_number' })
+      return
+    }
+    if (!contacts.some((contact) => contact.phone_number === phoneNumber)) {
+      response.json({ success: false, error: 'recipient_not_found' })
+      return
+    }
     const id = `call-${Date.now()}`
+    const startedAt = Date.now()
     recentCalls.unshift({
       call_id: id,
       created_at: Date.now(),
       direction: 'outgoing',
       duration_seconds: 0,
       id: recentCalls.length + 1,
-      other_number: request.body.phoneNumber,
+      other_number: phoneNumber,
       status: 'completed',
     })
     response.json({
@@ -5455,13 +5902,23 @@ app.post('/api/:endpoint', (request, response) => {
       data: {
         direction: 'outgoing',
         id,
-        otherNumber: request.body.phoneNumber,
-        startedAt: Date.now(),
+        otherNumber: phoneNumber,
+        startedAt,
         state: 'ringing',
       },
     })
     return
   }
+  if (endpoint === 'calls:block') {
+    const phoneNumber = String(request.body.phoneNumber ?? '').replace(/\D/g, '')
+    if (!phoneNumber) {
+      response.json({ success: false, error: 'invalid_number' })
+      return
+    }
+    blockedCallNumbers.add(phoneNumber)
+    response.json({ success: true, data: { blocked: true, phoneNumber } })
+    return
+  }
   if (
     endpoint === 'calls:answer' ||
     endpoint === 'calls:decline' ||
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 56570ec..e83c384 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -40,6 +40,7 @@ Config.Calls = {
     VoiceProvider = "pma",
     RingSeconds = 30,
     ContactNameMaxLength = 80,
+    ContactNotesMaxLength = 500,
     RecentPageSize = 100,
 }
 
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index c7fd8dd..6a2bf49 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -377,8 +377,16 @@ Locales["en"] = {
             phone = {
                 name = "Phone", recents = "Recents", contacts = "Contacts", keypad = "Keypad",
                 noSim = "No SIM", noSimBody = "Insert a SIM card in Settings to make calls.",
-                noRecents = "No Recent Calls", noContacts = "No Contacts", searchContacts = "Search Contacts",
-                addContact = "New Contact", editContact = "Edit Contact", contactName = "Name", phoneNumber = "Phone Number",
+            noRecents = "No Recent Calls", noContacts = "No Contacts", searchContacts = "Search Contacts", favorites = "Favorites",
+                addContact = "New Contact", newContact = "New", editContact = "Edit Contact", contactName = "Name", firstName = "First Name", lastName = "Last Name", companyOrGroup = "Company or Group", phoneNumber = "Phone Number",
+                choosePhoto = "Choose Contact Photo", chooseGallery = "Gallery", takePhoto = "Camera", removePhoto = "Remove Photo",
+                message = "Message", video = "Video", mail = "Mail", defaultLabel = "Default", privateLabel = "Private",
+                contactCard = "Contact Card", removeContact = "Remove Contact", returnToCall = "Return to Call", mobile = "Mobile", messagesProfile = "Messages", notes = "Notes",
+            sendMessage = "Send Message", shareContact = "Share Contact", addFavorite = "Add to Favorites", removeFavorite = "Remove from Favorites",
+                addEmergency = "Add to Emergency Contacts", blockContact = "Block Contact",
+                block = "Block", blockCaller = "Block Caller", blockCallerTitle = "Block this caller?",
+                blockCallerBody = "{number} will no longer be able to call this SIM.",
+                faceTime = "FaceTime", hideKeypad = "Hide Keypad", more = "More", mute = "Mute", speaker = "Speaker", viewContact = "View Contact",
                 call = "Call", calling = "calling...", incoming = "Incoming Call", incomingDirection = "Incoming", outgoingDirection = "Outgoing", connected = "Connected",
                 missed = "Missed", declined = "Declined", busy = "Busy", unavailable = "Unavailable",
                 noAnswer = "No Answer", cancelled = "Cancelled", disconnected = "Disconnected", sim_removed = "SIM Removed", completed = "Call Ended",
@@ -388,8 +396,10 @@ Locales["en"] = {
                 choosePhoneBody = "Select the phone that should receive {number}.", emptyPhone = "No SIM inserted",
                 errors = {
                     invalid_contact = "Enter a name and valid phone number.", invalid_number = "Enter a valid phone number.",
+                message_unavailable = "The conversation could not be opened.", contact_remove_failed = "The contact could not be removed.", contact_favorite_failed = "The favorite could not be updated.",
                     no_sim = "This phone has no SIM card.", airplane_mode = "Turn off Airplane Mode to make calls.",
                     self_call = "You cannot call your own number.", busy = "The line is busy.",
+                blocked = "This number is blocked.", recipient_not_found = "This number is not known.",
                     rate_limited = "Too many calls. Try again in a minute.", voice_unavailable = "The configured phone voice service is unavailable.",
                     inventory_full = "There is no room for the ejected SIM card.", request_failed = "The phone request failed.",
                     operation_in_progress = "Another phone operation is already in progress.", sim_request_expired = "The SIM selection expired. Use the SIM card again.",
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 7162d64..370fab0 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -171,11 +171,13 @@ local server_callbacks = {
     "contacts:list",
     "contacts:save",
     "contacts:delete",
+    "contacts:favorite",
     "calls:recents",
     "calls:dial",
     "calls:answer",
     "calls:decline",
     "calls:hangup",
+    "calls:block",
     "banking:overview",
     "banking:transfer",
     "billing:overview",
diff --git a/sky_phone/source/server/calls.lua b/sky_phone/source/server/calls.lua
index e1f7f5b..01a9049 100644
--- a/sky_phone/source/server/calls.lua
+++ b/sky_phone/source/server/calls.lua
@@ -318,8 +318,8 @@ function SkyPhoneCalls.CopyCloudToDevice(account_id, imei)
         {
             query = [[
                 INSERT INTO `sky_phone_contacts`
-                    (`id`, `contact_id`, `device_imei`, `name`, `phone_number`, `created_at`, `updated_at`)
-                SELECT UUID(), `contact_id`, ?, `name`, `phone_number`, `created_at`, `updated_at`
+                    (`id`, `contact_id`, `device_imei`, `name`, `notes`, `organization`, `phone_number`, `avatar_media_id`, `favorite`, `created_at`, `updated_at`)
+                SELECT UUID(), `contact_id`, ?, `name`, `notes`, `organization`, `phone_number`, NULL, `favorite`, `created_at`, `updated_at`
                 FROM `sky_phone_contacts` WHERE `account_id` = ?
             ]],
             params = { imei, account_id },
@@ -343,7 +343,9 @@ Bridge.Callbacks.Register("sky_phone:contacts:list", function(source)
     end
     local condition, params = scope_condition(scope)
     local rows = Bridge.Database.Query(([[
-        SELECT `contact_id` AS `id`, `name`, `phone_number`, `created_at`, `updated_at`
+        SELECT `contact_id` AS `id`, `name`, `notes`, `organization`, `phone_number`, `avatar_media_id`, `favorite`,
+            (SELECT media.`url` FROM `sky_phone_media` media WHERE media.`id` = `avatar_media_id`) AS `avatar_url`,
+            `created_at`, `updated_at`
         FROM `sky_phone_contacts` WHERE %s ORDER BY LOWER(`name`), `phone_number`
     ]]):format(condition), params)
     return { success = true, data = rows }
@@ -358,10 +360,24 @@ Bridge.Callbacks.Register("sky_phone:contacts:save", function(source, data)
         return error_response
     end
     local name = trim(data.name)
+    local notes = trim(data.notes) or ""
+    local organization = trim(data.organization) or ""
     local number = SkyPhoneSimNumber.Normalize(data.phoneNumber, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
-    if not name or name == "" or #name > Config.Calls.ContactNameMaxLength or not number then
+    local avatar_media_id = tonumber(data.avatarMediaId) or 0
+    if not name or name == "" or #name > Config.Calls.ContactNameMaxLength or #notes > Config.Calls.ContactNotesMaxLength or #organization > Config.Calls.ContactNameMaxLength or not number then
         return { success = false, error = "invalid_contact" }
     end
+    if avatar_media_id < 0 or avatar_media_id ~= math.floor(avatar_media_id) then
+        return { success = false, error = "invalid_contact" }
+    end
+    local avatar_url
+    if avatar_media_id > 0 then
+        local media_error
+        avatar_url, media_error = SkyPhoneMedia.ResolveOwnedMedia(source, tostring(avatar_media_id), "photo")
+        if not avatar_url then
+            return { success = false, error = media_error }
+        end
+    end
     local condition, condition_params = scope_condition(scope)
     local id = type(data.id) == "string" and data.id or uuid()
     if data.id then
@@ -373,24 +389,63 @@ Bridge.Callbacks.Register("sky_phone:contacts:save", function(source, data)
         if not owned[1] then
             return { success = false, error = "contact_not_found" }
         end
-        local params = { name, number, id }
+        local params = { name, notes, organization, number, avatar_media_id, id }
         for _, value in ipairs(condition_params) do
             params[#params + 1] = value
         end
         Bridge.Database.Query(([[
-            UPDATE `sky_phone_contacts` SET `name` = ?, `phone_number` = ?
+            UPDATE `sky_phone_contacts` SET `name` = ?, `notes` = NULLIF(?, ''), `organization` = NULLIF(?, ''), `phone_number` = ?, `avatar_media_id` = NULLIF(?, 0)
             WHERE `contact_id` = ? AND %s
         ]]):format(condition), params)
     else
         Bridge.Database.Query([[
-            INSERT INTO `sky_phone_contacts` (`id`, `contact_id`, `account_id`, `device_imei`, `name`, `phone_number`)
-            VALUES (?, ?, ?, ?, ?, ?)
-        ]], { uuid(), id, scope.account_id, scope.device_imei, name, number })
+            INSERT INTO `sky_phone_contacts` (`id`, `contact_id`, `account_id`, `device_imei`, `name`, `notes`, `organization`, `phone_number`, `avatar_media_id`)
+            VALUES (?, ?, ?, ?, ?, NULLIF(?, ''), NULLIF(?, ''), ?, NULLIF(?, 0))
+        ]], { uuid(), id, scope.account_id, scope.device_imei, name, notes, organization, number, avatar_media_id })
     end
     if scope.account_id then
         SkyPhone.NotifyAccount(scope.account_id, "sky_phone:contacts:changed", {})
     end
-    return { success = true, data = { id = id, name = name, phone_number = number } }
+    return {
+        success = true,
+        data = {
+            id = id,
+            name = name,
+            notes = notes ~= "" and notes or nil,
+            organization = organization ~= "" and organization or nil,
+            phone_number = number,
+            avatar_media_id = avatar_media_id > 0 and avatar_media_id or nil,
+            avatar_url = avatar_url,
+        },
+    }
+end)
+
+Bridge.Callbacks.Register("sky_phone:contacts:favorite", function(source, data)
+    if not SkyPhone.AllowOperation(source, "contact_favorite", 60, 60) or type(data) ~= "table" or type(data.id) ~= "string" or type(data.favorite) ~= "boolean" then
+        return { success = false, error = "invalid_request" }
+    end
+    local scope, error_response = current_scope(source)
+    if not scope then
+        return error_response
+    end
+    local condition, condition_params = scope_condition(scope)
+    local owned_params = { data.id }
+    for _, value in ipairs(condition_params) do
+        owned_params[#owned_params + 1] = value
+    end
+    local owned = Bridge.Database.Query(("SELECT `id` FROM `sky_phone_contacts` WHERE `contact_id` = ? AND %s LIMIT 1"):format(condition), owned_params)
+    if not owned[1] then
+        return { success = false, error = "contact_not_found" }
+    end
+    local params = { data.favorite and 1 or 0, data.id }
+    for _, value in ipairs(condition_params) do
+        params[#params + 1] = value
+    end
+    Bridge.Database.Query(("UPDATE `sky_phone_contacts` SET `favorite` = ? WHERE `contact_id` = ? AND %s"):format(condition), params)
+    if scope.account_id then
+        SkyPhone.NotifyAccount(scope.account_id, "sky_phone:contacts:changed", {})
+    end
+    return { success = true, data = { id = data.id, favorite = data.favorite } }
 end)
 
 Bridge.Callbacks.Register("sky_phone:contacts:delete", function(source, data)
@@ -492,12 +547,27 @@ Bridge.Callbacks.Register("sky_phone:calls:dial", function(source, data)
         WHERE s.`phone_number` = ? LIMIT 1
     ]], { number })
     local target = targets[1]
-    if not target or not target.imei then
+    if not target then
+        dialing_by_sim[scope.device.sim_id] = nil
+        dial_locks[source] = nil
+        return { success = false, error = "recipient_not_found" }
+    end
+    if not target.imei then
         local terminal = create_terminal_call(scope, number, target, "unavailable")
         dialing_by_sim[scope.device.sim_id] = nil
         dial_locks[source] = nil
         return { success = true, data = terminal }
     end
+    local blocks = Bridge.Database.Query([[
+        SELECT 1 FROM `sky_phone_call_blocks`
+        WHERE `blocker_sim_id` = ? AND `blocked_sim_id` = ? LIMIT 1
+    ]], { target.id, scope.device.sim_id })
+    if blocks[1] then
+        local terminal = create_terminal_call(scope, number, target, "declined")
+        dialing_by_sim[scope.device.sim_id] = nil
+        dial_locks[source] = nil
+        return { success = true, data = terminal }
+    end
     local callee_source = find_device_holder(target.imei)
     if not callee_source or airplane_mode(target.imei) then
         local terminal = create_terminal_call(scope, number, target, "unavailable")
@@ -751,6 +821,51 @@ Bridge.Callbacks.Register("sky_phone:calls:hangup", function(source, data)
     return { success = true }
 end)
 
+Bridge.Callbacks.Register("sky_phone:calls:block", function(source, data)
+    if not SkyPhone.AllowOperation(source, "call_block", 10, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    local scope, error_response = current_scope(source)
+    if not scope then
+        return error_response
+    end
+    if not scope.device.sim_id then
+        return { success = false, error = "no_sim" }
+    end
+    local number = type(data) == "table" and SkyPhoneSimNumber.Normalize(
+        data.phoneNumber,
+        Config.Sim.NumberLength,
+        Config.Sim.NumberPrefix
+    ) or nil
+    if not number then
+        return { success = false, error = "invalid_number" }
+    end
+    if number == scope.device.phone_number then
+        return { success = false, error = "self_call" }
+    end
+    local rows = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_sims` WHERE `phone_number` = ? LIMIT 1",
+        { number }
+    )
+    if not rows[1] then
+        return { success = false, error = "recipient_not_found" }
+    end
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_call_blocks` (`blocker_sim_id`, `blocked_sim_id`)
+        VALUES (?, ?)
+    ]], { scope.device.sim_id, rows[1].id })
+
+    local call_id = active_by_source[source]
+    local call = call_id and calls[call_id] or nil
+    if call then
+        local other_number = source == call.caller_source and call.callee_number or call.caller_number
+        if other_number == number then
+            finish_call(call, call.answered_at and "completed" or "declined")
+        end
+    end
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:payphone:hangup", function(source, data)
     local call_id = active_by_source[source]
     local call = call_id and calls[call_id] or nil
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 4443c41..8877db2 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -354,7 +354,11 @@ local schema = {
             { name = "account_id", type = "BIGINT UNSIGNED NULL" },
             { name = "device_imei", type = "CHAR(15) NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "name", type = "VARCHAR(80) NOT NULL" },
+            { name = "notes", type = "VARCHAR(500) NULL" },
+            { name = "organization", type = "VARCHAR(80) NULL" },
             { name = "phone_number", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "avatar_media_id", type = "BIGINT UNSIGNED NULL" },
+            { name = "favorite", type = "TINYINT(1) NOT NULL DEFAULT 0" },
             { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
             { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
         },
@@ -362,10 +366,12 @@ local schema = {
         indexes = {
             { name = "idx_sky_phone_contacts_account", columns = "(`account_id`, `name`)" },
             { name = "idx_sky_phone_contacts_device", columns = "(`device_imei`, `name`)" },
+            { name = "idx_sky_phone_contacts_avatar", columns = "(`avatar_media_id`)" },
         },
         foreignKeys = {
             { column = "account_id", references = "`sky_phone_accounts` (`id`) ON DELETE CASCADE" },
             { column = "device_imei", references = "`sky_phone_devices` (`imei`) ON DELETE CASCADE" },
+            { column = "avatar_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 2a0e4c9..5049d78 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -153,7 +153,11 @@ CREATE TABLE IF NOT EXISTS `sky_phone_contacts` (
     `account_id` BIGINT UNSIGNED NULL,
     `device_imei` CHAR(15) CHARACTER SET ascii COLLATE ascii_bin NULL,
     `name` VARCHAR(80) NOT NULL,
+    `notes` VARCHAR(500) NULL,
+    `organization` VARCHAR(80) NULL,
     `phone_number` VARCHAR(24) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `avatar_media_id` BIGINT UNSIGNED NULL,
+    `favorite` TINYINT(1) NOT NULL DEFAULT 0,
     `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
     `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`),
@@ -161,8 +165,10 @@ CREATE TABLE IF NOT EXISTS `sky_phone_contacts` (
     UNIQUE KEY `uniq_sky_phone_contacts_device_contact` (`device_imei`, `contact_id`),
     KEY `idx_sky_phone_contacts_account` (`account_id`, `name`),
     KEY `idx_sky_phone_contacts_device` (`device_imei`, `name`),
+    KEY `idx_sky_phone_contacts_avatar` (`avatar_media_id`),
     FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE,
-    FOREIGN KEY (`device_imei`) REFERENCES `sky_phone_devices` (`imei`) ON DELETE CASCADE
+    FOREIGN KEY (`device_imei`) REFERENCES `sky_phone_devices` (`imei`) ON DELETE CASCADE,
+    FOREIGN KEY (`avatar_media_id`) REFERENCES `sky_phone_media` (`id`) ON DELETE SET NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 CREATE TABLE IF NOT EXISTS `sky_phone_calls` (
@@ -183,6 +189,16 @@ CREATE TABLE IF NOT EXISTS `sky_phone_calls` (
     FOREIGN KEY (`callee_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE SET NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
+CREATE TABLE IF NOT EXISTS `sky_phone_call_blocks` (
+    `blocker_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `blocked_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (`blocker_sim_id`, `blocked_sim_id`),
+    KEY `idx_sky_phone_call_blocks_blocked` (`blocked_sim_id`),
+    FOREIGN KEY (`blocker_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE CASCADE,
+    FOREIGN KEY (`blocked_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
 CREATE TABLE IF NOT EXISTS `sky_phone_call_entries` (
     `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
     `call_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,

From 7d146e709acd2a0d0ff40e4bdd188f05313d11f5 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 11 Aug 2026 14:57:33 +0200
Subject: [PATCH 05/63] ADD - implement EasyShare system

---
 frontend/src/App.vue                       |  11 +-
 frontend/src/assets/main.css               |  37 +-
 frontend/src/components/EasyShareSheet.vue | 431 +++++++++++++++++
 frontend/src/stores/easyshare.test.ts      | 104 ++++
 frontend/src/stores/easyshare.ts           | 180 +++++++
 frontend/src/stores/phone.ts               |  50 ++
 frontend/src/types/easyshare.ts            |  71 +++
 frontend/src/views/apps/CrewLinkApp.vue    |  27 ++
 frontend/src/views/apps/DarkChatApp.vue    |  83 +++-
 frontend/src/views/apps/FeatherApp.vue     |  42 +-
 frontend/src/views/apps/FlareApp.vue       |  44 ++
 frontend/src/views/apps/FlipTokApp.vue     |  31 +-
 frontend/src/views/apps/GalleryApp.vue     |  32 +-
 frontend/src/views/apps/MapApp.vue         |  25 +
 frontend/src/views/apps/MessagesApp.vue    | 121 +++--
 frontend/src/views/apps/MusicApp.vue       |  45 +-
 frontend/src/views/apps/NotesApp.vue       |  22 +-
 frontend/src/views/apps/PhoneApp.vue       |  40 +-
 frontend/src/views/apps/PicstagramApp.vue  |  39 ++
 frontend/testserver/index.cjs              |  55 +++
 sky_phone/config/config.lua                |  11 +
 sky_phone/config/locales/en.lua            |  23 +
 sky_phone/fxmanifest.lua                   |   1 +
 sky_phone/source/client/main.lua           |  13 +
 sky_phone/source/server/db_migrate.lua     |  45 ++
 sky_phone/source/server/easyshare.lua      | 537 +++++++++++++++++++++
 sky_phone/source/server/media.lua          |  34 +-
 27 files changed, 2067 insertions(+), 87 deletions(-)
 create mode 100644 frontend/src/components/EasyShareSheet.vue
 create mode 100644 frontend/src/stores/easyshare.test.ts
 create mode 100644 frontend/src/stores/easyshare.ts
 create mode 100644 frontend/src/types/easyshare.ts
 create mode 100644 sky_phone/source/server/easyshare.lua

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 996483d..140147f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -18,6 +18,7 @@ import PhonePasscode from '@/components/PhonePasscode.vue'
 import PhoneNotifications from '@/components/PhoneNotifications.vue'
 import NotificationPhonePreview from '@/components/NotificationPhonePreview.vue'
 import PhoneStatusBar from '@/components/PhoneStatusBar.vue'
+import EasyShareSheet from '@/components/EasyShareSheet.vue'
 import PayphoneOverlay from '@/components/PayphoneOverlay.vue'
 import RadioHud from '@/components/RadioHud.vue'
 import SimPhonePicker, {
@@ -44,6 +45,7 @@ import { useWidgetsStore } from '@/stores/widgets'
 import { isPhoneAppId } from '@/config/apps'
 import { useNotesStore } from '@/stores/notes'
 import { useWeatherStore } from '@/stores/weather'
+import { useEasyShareStore } from '@/stores/easyshare'
 import {
   useNotificationsStore,
   type PhoneNotificationInput,
@@ -53,6 +55,7 @@ import type { PhoneNotificationDevicePayload } from '@/types/device'
 import type { MailCounts } from '@/types/mail'
 import type { MarketplaceCounts } from '@/types/marketplace'
 import type { PhoneCall } from '@/types/phone'
+import type { EasyShareEvent } from '@/types/easyshare'
 import { nuiCall } from '@/utils/nui'
 import { formatTimer } from '@/utils/clock'
 import { parsePhonePreferences } from '@/utils/preferences'
@@ -73,6 +76,7 @@ type AppMessage = {
     | PicstagramNotificationData
     | FeatherNotificationData
     | BillingNotificationData
+    | EasyShareEvent
     | PhoneCall
     | PhoneNotificationInput
     | PhoneOpenPayload
@@ -222,6 +226,7 @@ const appStore = useAppStoreStore()
 const widgets = useWidgetsStore()
 const notes = useNotesStore()
 const weather = useWeatherStore()
+const easyShare = useEasyShareStore()
 const notifications = useNotificationsStore()
 const route = useRoute()
 const router = useRouter()
@@ -537,6 +542,8 @@ function onMessage(event: MessageEvent<AppMessage>): void {
     notifications.show(notification)
   } else if (event.data?.type === 'contacts:changed') {
     void calls.loadContacts()
+  } else if (event.data?.type === 'easyshare:changed' && event.data.data) {
+    easyShare.applyEvent(event.data.data as EasyShareEvent)
   } else if (event.data?.type === 'messages:changed') {
     void messages.loadConversations()
     if (messages.activeNumber) void messages.openThread(messages.activeNumber)
@@ -872,8 +879,9 @@ onMounted(() => {
     }
   }, 1000)
   if (isDevelopment) {
+    const developmentParameters = new URLSearchParams(window.location.search)
     void hydrateDevelopmentPhone()
-    if (new URLSearchParams(window.location.search).has('simPickerPreview')) {
+    if (developmentParameters.has('simPickerPreview')) {
       simPicker.value = {
         choices: [
           {
@@ -1109,6 +1117,7 @@ onBeforeUnmount(() => {
                   :notification="phone.isOpen ? null : notifications.current"
                   @close="notifications.dismissCurrent()"
                 />
+                <EasyShareSheet />
                 <div class="phone-display-dimmer" aria-hidden="true"></div>
               </k-app>
             </div>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 0ec360e..d727a51 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4489,22 +4489,28 @@ button {
     inset 0 1px 0 rgb(255 255 255 / 30%),
     0 3px 12px rgb(0 0 0 / 12%);
   overflow: hidden;
+  background: linear-gradient(145deg, #5b91c2, #22527d);
   color: #fff;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.4px;
 }
-.messages-avatar__glyph {
-  padding-top: 6px;
-  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
-  font-size: 34px;
+.messages-avatar__initials {
   line-height: 1;
-  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 15%));
+}
+.messages-avatar__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: inherit;
+  object-fit: cover;
 }
 .messages-avatar--small {
   width: 38px;
   height: 38px;
 }
-.messages-avatar--small .messages-avatar__glyph {
-  padding-top: 5px;
-  font-size: 27px;
+.messages-avatar--small .messages-avatar__initials {
+  font-size: 15px;
 }
 .messages-empty-state {
   min-height: 72%;
@@ -4618,9 +4624,8 @@ button {
     0 0 0 1px rgb(0 0 0 / 5%),
     0 8px 22px rgb(0 0 0 / 12%);
 }
-.messages-avatar--header .messages-avatar__glyph {
-  padding-top: 7px;
-  font-size: 42px;
+.messages-avatar--header .messages-avatar__initials {
+  font-size: 23px;
 }
 .messages-chat-header__name {
   max-width: 205px;
@@ -5266,9 +5271,8 @@ button {
   width: 78px;
   height: 78px;
 }
-.messages-avatar--contact .messages-avatar__glyph {
-  padding-top: 10px;
-  font-size: 57px;
+.messages-avatar--contact .messages-avatar__initials {
+  font-size: 32px;
 }
 .messages-contact-details__hero h2 {
   margin: 10px 0 2px;
@@ -6261,9 +6265,8 @@ button {
   width: 50px;
   height: 50px;
 }
-.messages-inbox-page .messages-avatar__glyph {
-  padding-top: 6px;
-  font-size: 34px;
+.messages-inbox-page .messages-avatar__initials {
+  font-size: 19px;
 }
 .messages-inbox-page .messages-conversation__body {
   gap: 3px;
diff --git a/frontend/src/components/EasyShareSheet.vue b/frontend/src/components/EasyShareSheet.vue
new file mode 100644
index 0000000..ffc9f94
--- /dev/null
+++ b/frontend/src/components/EasyShareSheet.vue
@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { kButton, kGlass, kLink, kPreloader, kSheet } from 'konsta/vue'
+import {
+  Check,
+  Clock3,
+  History,
+  MessageCircle,
+  Share2,
+  ShieldCheck,
+  UserRound,
+  X,
+} from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { getPhoneApp } from '@/config/apps'
+import { useAppStoreStore } from '@/stores/app-store'
+import { useCallsStore } from '@/stores/calls'
+import { useDarkChatStore } from '@/stores/darkchat'
+import { useEasyShareStore } from '@/stores/easyshare'
+import { useFlareStore } from '@/stores/flare'
+import { useMessagesStore } from '@/stores/messages'
+import { useNotesStore } from '@/stores/notes'
+import { usePhoneStore } from '@/stores/phone'
+import type { LaunchablePhoneAppId } from '@/types/apps'
+import type {
+  EasyShareChatApp,
+  EasyShareTransfer,
+  EasyShareVisibility,
+} from '@/types/easyshare'
+
+const phone = usePhoneStore()
+const appStore = useAppStoreStore()
+const calls = useCallsStore()
+const darkChat = useDarkChatStore()
+const messages = useMessagesStore()
+const notes = useNotesStore()
+const easyShare = useEasyShareStore()
+const flare = useFlareStore()
+const router = useRouter()
+const feedback = ref('')
+const dragOffset = ref(0)
+const dragging = ref(false)
+let dragPointerId: number | null = null
+let dragStartTime = 0
+let dragStartY = 0
+const visibilityOptions: EasyShareVisibility[] = ['everyone', 'contacts', 'hidden']
+const app = computed(() =>
+  easyShare.payload ? getPhoneApp(easyShare.payload.appId) : undefined,
+)
+const sharePeople = computed(() => {
+  const people: Array<{
+    avatar?: string
+    kind: EasyShareChatApp
+    label: string
+    targetId: string
+  }> = []
+  const phoneNumbers = new Set<string>()
+
+  if (easyShare.payload?.appId === 'flare') {
+    for (const match of flare.matches) {
+      people.push({
+        avatar: match.profile.photoUrls[0],
+        kind: 'flare',
+        label: match.profile.name,
+        targetId: match.id,
+      })
+    }
+  }
+
+  for (const conversation of messages.conversations.slice(0, 8)) {
+    const contact = calls.contacts.find(
+      (entry) => entry.phone_number === conversation.phoneNumber,
+    )
+    people.push({
+      avatar: contact?.avatar_url ?? undefined,
+      label: contact?.name ?? conversation.phoneNumber,
+      kind: 'messages' as const,
+      targetId: conversation.phoneNumber,
+    })
+    phoneNumbers.add(conversation.phoneNumber)
+  }
+
+  for (const contact of calls.contacts) {
+    if (phoneNumbers.has(contact.phone_number)) continue
+    people.push({
+      avatar: contact.avatar_url ?? undefined,
+      kind: 'messages',
+      label: contact.name,
+      targetId: contact.phone_number,
+    })
+    phoneNumbers.add(contact.phone_number)
+  }
+
+  if (!appStore.homeLayout.hidden.includes('darkchat')) {
+    for (const conversation of darkChat.conversations.slice(0, 8)) {
+      people.push({
+        kind: 'darkchat',
+        label: conversation.peer.alias,
+        targetId: conversation.id,
+      })
+    }
+  }
+
+  return people
+})
+const shareAppIds: LaunchablePhoneAppId[] = ['messages', 'darkchat', 'notes']
+const shareApps = computed(() =>
+  shareAppIds
+    .filter((id) => !appStore.homeLayout.hidden.includes(id))
+    .map((id) => getPhoneApp(id))
+    .filter((entry) => entry !== undefined),
+)
+const sheetStyle = computed(() => ({
+  transform: easyShare.opened
+    ? `translateY(calc(-100% + ${dragOffset.value}px))`
+    : undefined,
+  transitionDuration: dragging.value ? '0ms' : undefined,
+}))
+
+function label(key: string, params?: Record<string, string>): string {
+  return phone.t(`Apps.easyShare.${key}`, params)
+}
+
+function initials(value: string): string {
+  return value
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('')
+}
+
+function statusLabel(transfer: EasyShareTransfer): string {
+  return label(`status.${transfer.status}`)
+}
+
+function scrollRowHorizontally(event: WheelEvent): void {
+  const row = event.currentTarget as HTMLElement
+  const maximum = row.scrollWidth - row.clientWidth
+  if (maximum <= 0) return
+  const delta =
+    Math.abs(event.deltaX) > Math.abs(event.deltaY)
+      ? event.deltaX
+      : event.deltaY
+  const next = Math.min(maximum, Math.max(0, row.scrollLeft + delta))
+  if (next === row.scrollLeft) return
+  event.preventDefault()
+  row.scrollLeft = next
+}
+
+function close(): void {
+  feedback.value = ''
+  easyShare.close()
+}
+
+function beginDrag(event: PointerEvent): void {
+  if (!easyShare.opened || event.button !== 0) return
+  dragPointerId = event.pointerId
+  dragStartTime = performance.now()
+  dragStartY = event.clientY
+  dragOffset.value = 0
+  dragging.value = true
+  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+}
+
+function moveDrag(event: PointerEvent): void {
+  if (!dragging.value || event.pointerId !== dragPointerId) return
+  dragOffset.value = Math.max(0, event.clientY - dragStartY)
+}
+
+function endDrag(event: PointerEvent): void {
+  if (!dragging.value || event.pointerId !== dragPointerId) return
+  const elapsed = Math.max(1, performance.now() - dragStartTime)
+  const shouldClose =
+    dragOffset.value >= 72 ||
+    (dragOffset.value >= 24 && dragOffset.value / elapsed >= 0.55)
+  ;(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
+  dragging.value = false
+  dragPointerId = null
+  if (shouldClose) close()
+  dragOffset.value = 0
+}
+
+function shareToChat(kind: EasyShareChatApp, targetId: string): void {
+  if (!easyShare.prepareChatDraft(kind, targetId)) return
+  close()
+  void router.push(`/apps/${kind}`)
+}
+
+function openChatApp(kind: 'darkchat' | 'messages'): void {
+  if (!easyShare.prepareChatDraft(kind)) return
+  close()
+  void router.push(`/apps/${kind}`)
+}
+
+function openShareApp(appId: LaunchablePhoneAppId): void {
+  if (appId === 'messages' || appId === 'darkchat') {
+    openChatApp(appId)
+    return
+  }
+  if (appId === 'notes') saveAsNote()
+}
+
+function saveAsNote(): void {
+  if (!easyShare.payload) return
+  notes.createNote({
+    body: easyShare.payload.copyText,
+    title: easyShare.payload.title,
+  })
+  feedback.value = label('savedToNotes')
+  window.setTimeout(close, 650)
+}
+
+async function requestTransfer(targetId: number): Promise<void> {
+  const response = await easyShare.request(targetId)
+  feedback.value = response.success
+    ? label('requestSent')
+    : label(`errors.${response.error ?? 'request_failed'}`)
+}
+
+async function respond(transfer: EasyShareTransfer, accepted: boolean): Promise<void> {
+  if (!(await easyShare.respond(transfer.id, accepted))) {
+    feedback.value = label('errors.request_failed')
+  }
+}
+
+async function cancelTransfer(transfer: EasyShareTransfer): Promise<void> {
+  if (!(await easyShare.cancel(transfer.id))) {
+    feedback.value = label('errors.request_failed')
+  }
+}
+</script>
+
+<template>
+  <div
+    class="easyshare-host"
+    :class="{ 'easyshare-host--opened': easyShare.opened }"
+  >
+    <k-sheet
+      :opened="easyShare.opened"
+      class="easyshare-sheet"
+      :style="sheetStyle"
+      @backdropclick="close"
+    >
+      <div class="easyshare-panel">
+      <div
+        class="easyshare-grabber"
+        role="button"
+        tabindex="0"
+        :aria-label="phone.t('Common.close')"
+        @pointercancel="endDrag"
+        @pointerdown="beginDrag"
+        @pointermove="moveDrag"
+        @pointerup="endDrag"
+      ></div>
+      <header class="easyshare-header">
+        <img v-if="app?.iconImage" :src="app.iconImage" alt="" />
+        <span v-else class="easyshare-header__fallback"><Share2 /></span>
+        <div>
+          <small>{{ app ? phone.t(app.labelKey) : label('name') }}</small>
+          <strong>{{ easyShare.payload?.title ?? label('incoming') }}</strong>
+          <p>{{ easyShare.payload?.subtitle || easyShare.payload?.copyText }}</p>
+        </div>
+      </header>
+
+      <template v-if="!easyShare.nearbyOpened && !easyShare.historyOpened">
+        <section
+          class="easyshare-row easyshare-row--people"
+          :aria-label="label('recentChats')"
+          @wheel="scrollRowHorizontally"
+        >
+          <button
+            v-for="chat in sharePeople"
+            :key="`${chat.kind}:${chat.targetId}`"
+            type="button"
+            class="easyshare-person"
+            @click="shareToChat(chat.kind, chat.targetId)"
+          >
+            <span class="easyshare-avatar">
+              <img v-if="chat.avatar" :src="chat.avatar" alt="" />
+              <b v-else>{{ initials(chat.label) }}</b>
+              <i><img :src="getPhoneApp(chat.kind)?.iconImage" alt="" /></i>
+            </span>
+            <small>{{ chat.label }}</small>
+          </button>
+          <button v-if="!sharePeople.length" type="button" class="easyshare-person" @click="openChatApp('messages')">
+            <span class="easyshare-avatar easyshare-avatar--empty"><MessageCircle /></span>
+            <small>{{ label('newMessage') }}</small>
+          </button>
+        </section>
+
+        <section
+          class="easyshare-row easyshare-row--actions"
+          :aria-label="label('destinations')"
+          @wheel="scrollRowHorizontally"
+        >
+          <button type="button" class="easyshare-action" @click="easyShare.showNearby">
+            <span class="easyshare-action__icon easyshare-action__icon--nearby" aria-hidden="true"></span>
+            <small>{{ label('name') }}</small>
+          </button>
+          <button
+            v-for="destination in shareApps"
+            :key="destination.id"
+            type="button"
+            class="easyshare-action"
+            @click="openShareApp(destination.id)"
+          >
+            <span class="easyshare-action__app"><img :src="destination.iconImage" alt="" /></span>
+            <small>{{ phone.t(destination.labelKey) }}</small>
+          </button>
+          <button type="button" class="easyshare-action" @click="easyShare.showHistory">
+            <span class="easyshare-action__icon"><History /></span>
+            <small>{{ label('history') }}</small>
+          </button>
+        </section>
+      </template>
+
+      <section v-else-if="easyShare.nearbyOpened" class="easyshare-detail">
+        <div class="easyshare-detail__toolbar">
+          <k-link component="button" @click="easyShare.nearbyOpened = false">{{ phone.t('Common.back') }}</k-link>
+          <strong>{{ label('nearby') }}</strong>
+          <k-link component="button" @click="easyShare.showHistory"><History :size="18" /></k-link>
+        </div>
+        <div class="easyshare-visibility">
+          <ShieldCheck :size="18" />
+          <select
+            :value="easyShare.visibility"
+            :aria-label="label('visibility')"
+            @change="easyShare.setVisibility(($event.target as HTMLSelectElement).value as EasyShareVisibility)"
+          >
+            <option v-for="option in visibilityOptions" :key="option" :value="option">
+              {{ label(`visibilityOptions.${option}`) }}
+            </option>
+          </select>
+        </div>
+
+        <k-glass v-if="easyShare.incomingTransfer" class="easyshare-incoming">
+          <UserRound :size="28" />
+          <div>
+            <strong>{{ label('incomingFrom', { name: easyShare.incomingTransfer.otherName }) }}</strong>
+            <small>{{ easyShare.incomingTransfer.payload.title }}</small>
+          </div>
+          <div class="easyshare-incoming__actions">
+            <k-button rounded tonal @click="respond(easyShare.incomingTransfer, false)"><X /></k-button>
+            <k-button rounded @click="respond(easyShare.incomingTransfer, true)"><Check /></k-button>
+          </div>
+        </k-glass>
+
+        <k-glass v-if="easyShare.activeTransfer" class="easyshare-transfer">
+          <div>
+            <strong>{{ easyShare.activeTransfer.otherName }}</strong>
+            <small>{{ statusLabel(easyShare.activeTransfer) }}</small>
+          </div>
+          <div class="easyshare-progress"><i :style="{ width: `${easyShare.activeTransfer.progress}%` }"></i></div>
+          <k-button
+            v-if="['pending', 'transferring'].includes(easyShare.activeTransfer.status)"
+            clear
+            rounded
+            @click="cancelTransfer(easyShare.activeTransfer)"
+          >{{ label('cancel') }}</k-button>
+        </k-glass>
+
+        <div v-if="easyShare.loading" class="easyshare-loading"><k-preloader /></div>
+        <div v-else-if="easyShare.targets.length" class="easyshare-targets">
+          <button v-for="target in easyShare.targets" :key="target.id" type="button" @click="requestTransfer(target.id)">
+            <span><UserRound /></span>
+              <div><strong>{{ target.name }}</strong><small>{{ label('distance', { distance: String(target.distance) }) }}</small></div>
+            <Share2 :size="18" />
+          </button>
+        </div>
+        <p v-else class="easyshare-empty">{{ label('noNearby') }}</p>
+      </section>
+
+      <section v-else class="easyshare-detail">
+        <div class="easyshare-detail__toolbar">
+          <k-link component="button" @click="easyShare.historyOpened = false">{{ phone.t('Common.back') }}</k-link>
+          <strong>{{ label('history') }}</strong>
+          <span></span>
+        </div>
+        <div class="easyshare-history">
+          <article v-for="transfer in easyShare.history" :key="transfer.id">
+            <span><Clock3 /></span>
+            <div>
+              <strong>{{ transfer.payload.title }}</strong>
+              <small>{{ transfer.otherName }} · {{ statusLabel(transfer) }}</small>
+            </div>
+            <small>{{ transfer.direction === 'incoming' ? '↓' : '↑' }}</small>
+          </article>
+          <p v-if="!easyShare.history.length" class="easyshare-empty">{{ label('noHistory') }}</p>
+        </div>
+      </section>
+
+        <p v-if="feedback" class="easyshare-feedback">{{ feedback }}</p>
+      </div>
+    </k-sheet>
+  </div>
+</template>
+
+<style scoped>
+.easyshare-host{position:absolute;z-index:95;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)}.easyshare-host--opened{pointer-events:auto}.easyshare-sheet{z-index:9500;width:100%;max-width:none}.easyshare-panel{position:relative;max-height:78cqh;overflow:hidden;padding:8px 14px calc(18px + var(--k-safe-area-bottom));border-radius:30px 30px 0 0;color:var(--easyshare-text,#f7f7f7);background:color-mix(in srgb,var(--k-ios-dark-surface-1,#1c1c1e) 92%,transparent);backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45)}.phone-app--light .easyshare-panel{--easyshare-text:#171719;background:color-mix(in srgb,#f2f2f7 93%,transparent)}.easyshare-grabber{width:38px;height:5px;margin:0 auto 10px;border-radius:999px;background:#8e8e9390;cursor:grab;touch-action:none}.easyshare-grabber:active{cursor:grabbing}.easyshare-header{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:11px;padding:5px 2px 14px;border-bottom:1px solid #8e8e9345}.easyshare-header>img,.easyshare-header__fallback{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;object-fit:cover;background:#0a84ff;color:white}.easyshare-header div{min-width:0}.easyshare-header small,.easyshare-header strong,.easyshare-header p{display:block;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.easyshare-header small{font-size:11px;color:#8e8e93}.easyshare-header strong{font-size:17px}.easyshare-header p{margin-top:2px;font-size:12px;color:#a1a1a6}.easyshare-row{display:flex;gap:12px;overflow-x:auto;padding:16px 2px;scrollbar-width:none}.easyshare-row::-webkit-scrollbar{display:none}.easyshare-row+.easyshare-row{border-top:1px solid #8e8e9345}.easyshare-row--people{min-height:114px;align-items:flex-start}.easyshare-person,.easyshare-action{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;text-align:center}.easyshare-person{min-height:98px;gap:14px}.easyshare-person small,.easyshare-action small{position:relative;z-index:3;display:-webkit-box;width:72px;max-height:26px;min-height:26px;overflow:hidden;font-size:11px;line-height:13px;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.easyshare-avatar{position:relative;isolation:isolate;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#6e6e73,#2c2c2e);color:white}.easyshare-avatar>img{position:absolute;z-index:0;inset:0;display:block;width:58px;height:58px;max-width:none;border-radius:50%;clip-path:circle(50% at 50% 50%);object-fit:cover}.easyshare-avatar>b{position:relative;z-index:1;font-size:17px}.easyshare-avatar>i{position:absolute;z-index:2;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid #1c1c1e;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:#34c759;color:white}.easyshare-avatar>i img{width:100%;height:100%;object-fit:cover}.easyshare-action__icon,.easyshare-action__app{width:57px;height:57px;border-radius:15px;display:grid;place-items:center;background:#ffffff20}.easyshare-action__icon svg{width:27px}.easyshare-action__icon--nearby{background:radial-gradient(circle at 50% 70%,#0a84ff 0 15%,#142d59 16% 29%,#0a84ff 30% 35%,#101722 36%);color:white}.easyshare-action__app img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.easyshare-detail{min-height:245px;max-height:56cqh;overflow-y:auto;padding-top:8px}.easyshare-detail__toolbar{height:37px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.easyshare-detail__toolbar>:last-child{justify-self:end}.easyshare-visibility{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:#ffffff14}.easyshare-visibility select{min-width:0;flex:1;border:0;color:inherit;background:transparent;text-align:right}.easyshare-incoming,.easyshare-transfer{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0;padding:12px!important;border-radius:18px!important}.easyshare-incoming div,.easyshare-transfer div{min-width:0}.easyshare-incoming small,.easyshare-transfer small{display:block;color:#a1a1a6}.easyshare-incoming__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.easyshare-incoming__actions :deep(.button){margin:0}.easyshare-transfer{grid-template-columns:1fr auto}.easyshare-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:#8e8e9340}.easyshare-progress i{display:block;height:100%;border-radius:inherit;background:#0a84ff;transition:width .25s ease}.easyshare-targets{display:grid;gap:7px}.easyshare-targets button,.easyshare-history article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:inherit;background:#ffffff10;text-align:left}.easyshare-targets button>span,.easyshare-history article>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{display:block}.easyshare-targets small,.easyshare-history small{color:#a1a1a6;font-size:11px}.easyshare-history{display:grid;gap:7px;padding-top:8px}.easyshare-empty,.easyshare-loading{padding:35px 10px;text-align:center;color:#8e8e93}.easyshare-feedback{margin:8px 0 0;text-align:center;color:#0a84ff;font-size:12px}
+.easyshare-action__icon--nearby {
+  position: relative;
+  overflow: hidden;
+  background: #0c1524;
+  box-shadow: inset 0 0 0 1px #ffffff0a;
+}
+
+.easyshare-action__icon--nearby::before {
+  position: absolute;
+  inset: 8px;
+  border: 3px solid #1687ff;
+  border-radius: 50%;
+  box-shadow:
+    inset 0 0 0 7px #0c1524,
+    inset 0 0 0 10px #1687ff;
+  content: '';
+}
+
+.easyshare-action__icon--nearby::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #1687ff;
+  box-shadow: 0 0 9px #1687ff;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+</style>
diff --git a/frontend/src/stores/easyshare.test.ts b/frontend/src/stores/easyshare.test.ts
new file mode 100644
index 0000000..ef63001
--- /dev/null
+++ b/frontend/src/stores/easyshare.test.ts
@@ -0,0 +1,104 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useEasyShareStore } from '@/stores/easyshare'
+import type { EasySharePayload, EasyShareTransfer } from '@/types/easyshare'
+import { nuiCall } from '@/utils/nui'
+
+vi.mock('@/utils/nui', () => ({ nuiCall: vi.fn() }))
+
+const mockNuiCall = vi.mocked(nuiCall)
+const payload: EasySharePayload = {
+  appId: 'notes',
+  copyText: 'Meet at Mission Row.',
+  id: 'note-1',
+  kind: 'note',
+  title: 'Meeting',
+}
+const incoming: EasyShareTransfer = {
+  createdAt: Date.now(),
+  direction: 'incoming',
+  id: 'transfer-1',
+  otherName: 'Mia Santos',
+  payload,
+  progress: 0,
+  status: 'pending',
+}
+
+describe('easyshare store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockNuiCall.mockReset()
+  })
+
+  it('opens with the selected share payload', () => {
+    const easyShare = useEasyShareStore()
+    easyShare.open(payload)
+
+    expect(easyShare.opened).toBe(true)
+    expect(easyShare.payload).toEqual(payload)
+    expect(easyShare.nearbyOpened).toBe(false)
+  })
+
+  it('opens the acceptance view for an incoming request', () => {
+    const easyShare = useEasyShareStore()
+    easyShare.applyEvent({ transfer: incoming })
+
+    expect(easyShare.opened).toBe(true)
+    expect(easyShare.nearbyOpened).toBe(true)
+    expect(easyShare.incomingTransfer).toEqual(incoming)
+  })
+
+  it('keeps progress server-driven and removes terminal transfers from pending', () => {
+    const easyShare = useEasyShareStore()
+    easyShare.applyEvent({ transfer: incoming })
+    easyShare.applyEvent({
+      transfer: { ...incoming, progress: 50, status: 'transferring' },
+    })
+    expect(easyShare.pending[0]?.progress).toBe(50)
+
+    easyShare.applyEvent({
+      transfer: { ...incoming, progress: 100, status: 'completed' },
+    })
+    expect(easyShare.pending).toEqual([])
+    expect(easyShare.history[0]?.status).toBe('completed')
+  })
+
+  it('sends only the target and current payload when requesting a transfer', async () => {
+    mockNuiCall.mockResolvedValueOnce({ data: incoming, success: true })
+    const easyShare = useEasyShareStore()
+    easyShare.open(payload)
+
+    await easyShare.request(41)
+
+    expect(mockNuiCall).toHaveBeenCalledWith('easyshare:request', {
+      payload,
+      targetId: 41,
+    })
+  })
+
+  it('hands a prepared share message to the selected chat app once', () => {
+    const easyShare = useEasyShareStore()
+    easyShare.open({ ...payload, link: 'https://notes.sky/note-1' })
+
+    expect(easyShare.prepareChatDraft('messages', '5551234567')).toBe(true)
+    expect(easyShare.consumeChatDraft('messages')).toEqual({
+      appId: 'messages',
+      body: 'Meet at Mission Row.\nhttps://notes.sky/note-1',
+      targetId: '5551234567',
+    })
+    expect(easyShare.consumeChatDraft('messages')).toBeNull()
+  })
+
+  it('keeps a share draft until a conversation is chosen in the destination app', () => {
+    const easyShare = useEasyShareStore()
+    easyShare.open(payload)
+
+    expect(easyShare.prepareChatDraft('darkchat')).toBe(true)
+    expect(easyShare.consumeChatDraft('darkchat')).toEqual({
+      appId: 'darkchat',
+      body: 'Meet at Mission Row.',
+      targetId: null,
+    })
+  })
+})
diff --git a/frontend/src/stores/easyshare.ts b/frontend/src/stores/easyshare.ts
new file mode 100644
index 0000000..770c012
--- /dev/null
+++ b/frontend/src/stores/easyshare.ts
@@ -0,0 +1,180 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+import type {
+  EasyShareBootstrap,
+  EasyShareChatApp,
+  EasyShareChatDraft,
+  EasyShareEvent,
+  EasySharePayload,
+  EasyShareTarget,
+  EasyShareTransfer,
+  EasyShareVisibility,
+} from '@/types/easyshare'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
+
+export const useEasyShareStore = defineStore('easyshare', () => {
+  const opened = ref(false)
+  const payload = ref<EasySharePayload | null>(null)
+  const chatDraft = ref<EasyShareChatDraft | null>(null)
+  const targets = ref<EasyShareTarget[]>([])
+  const history = ref<EasyShareTransfer[]>([])
+  const pending = ref<EasyShareTransfer[]>([])
+  const visibility = ref<EasyShareVisibility>('everyone')
+  const loading = ref(false)
+  const nearbyOpened = ref(false)
+  const historyOpened = ref(false)
+  const activeTransfer = ref<EasyShareTransfer | null>(null)
+  const incomingTransfer = computed(
+    () => pending.value.find((transfer) => transfer.direction === 'incoming') ?? null,
+  )
+
+  function open(nextPayload: EasySharePayload): void {
+    payload.value = nextPayload
+    nearbyOpened.value = false
+    historyOpened.value = false
+    activeTransfer.value = null
+    opened.value = true
+  }
+
+  function close(): void {
+    opened.value = false
+    nearbyOpened.value = false
+    historyOpened.value = false
+    activeTransfer.value = null
+    payload.value = null
+  }
+
+  function prepareChatDraft(
+    appId: EasyShareChatApp,
+    targetId: string | null = null,
+  ): boolean {
+    if (!payload.value) return false
+    const parts = [payload.value.copyText.trim(), payload.value.link?.trim()].filter(
+      (part): part is string => Boolean(part),
+    )
+    chatDraft.value = {
+      appId,
+      body: [...new Set(parts)].join('\n'),
+      targetId,
+    }
+    return Boolean(chatDraft.value.body)
+  }
+
+  function consumeChatDraft(appId: EasyShareChatApp): EasyShareChatDraft | null {
+    if (chatDraft.value?.appId !== appId) return null
+    const draft = chatDraft.value
+    chatDraft.value = null
+    return draft
+  }
+
+  async function bootstrap(): Promise<boolean> {
+    loading.value = true
+    const response = await nuiCall<EasyShareBootstrap>('easyshare:bootstrap')
+    loading.value = false
+    if (!response.success || !response.data) return false
+    targets.value = response.data.targets
+    history.value = response.data.history
+    pending.value = response.data.pending
+    visibility.value = response.data.visibility
+    return true
+  }
+
+  async function showNearby(): Promise<void> {
+    nearbyOpened.value = true
+    historyOpened.value = false
+    await bootstrap()
+  }
+
+  async function showHistory(): Promise<void> {
+    historyOpened.value = true
+    nearbyOpened.value = false
+    await bootstrap()
+  }
+
+  async function setVisibility(next: EasyShareVisibility): Promise<boolean> {
+    const response = await nuiCall<{ visibility: EasyShareVisibility }>(
+      'easyshare:set-visibility',
+      { visibility: next },
+    )
+    if (response.success && response.data) visibility.value = response.data.visibility
+    return response.success
+  }
+
+  async function request(targetId: number): Promise<NuiResponse<EasyShareTransfer>> {
+    if (!payload.value) return { success: false, error: 'missing_payload' }
+    const response = await nuiCall<EasyShareTransfer>('easyshare:request', {
+      payload: payload.value,
+      targetId,
+    })
+    if (response.success && response.data) activeTransfer.value = response.data
+    return response
+  }
+
+  async function respond(id: string, accepted: boolean): Promise<boolean> {
+    const response = await nuiCall<EasyShareTransfer>('easyshare:respond', {
+      accepted,
+      id,
+    })
+    if (response.success && response.data) applyTransfer(response.data)
+    return response.success
+  }
+
+  async function cancel(id: string): Promise<boolean> {
+    const response = await nuiCall<EasyShareTransfer>('easyshare:cancel', { id })
+    if (response.success && response.data) applyTransfer(response.data)
+    return response.success
+  }
+
+  function applyTransfer(transfer: EasyShareTransfer): void {
+    const pendingIndex = pending.value.findIndex((entry) => entry.id === transfer.id)
+    if (['pending', 'transferring'].includes(transfer.status)) {
+      if (pendingIndex >= 0) pending.value[pendingIndex] = transfer
+      else pending.value.unshift(transfer)
+    } else if (pendingIndex >= 0) {
+      pending.value.splice(pendingIndex, 1)
+    }
+
+    const historyIndex = history.value.findIndex((entry) => entry.id === transfer.id)
+    if (historyIndex >= 0) history.value[historyIndex] = transfer
+    else history.value.unshift(transfer)
+    history.value = history.value.slice(0, 50)
+    if (activeTransfer.value?.id === transfer.id) activeTransfer.value = transfer
+  }
+
+  function applyEvent(event: EasyShareEvent): void {
+    applyTransfer(event.transfer)
+    if (event.transfer.direction === 'incoming' && event.transfer.status === 'pending') {
+      opened.value = true
+      nearbyOpened.value = true
+      historyOpened.value = false
+    }
+  }
+
+  return {
+    activeTransfer,
+    applyEvent,
+    bootstrap,
+    cancel,
+    chatDraft,
+    close,
+    consumeChatDraft,
+    history,
+    historyOpened,
+    incomingTransfer,
+    loading,
+    nearbyOpened,
+    open,
+    opened,
+    payload,
+    pending,
+    prepareChatDraft,
+    request,
+    respond,
+    setVisibility,
+    showHistory,
+    showNearby,
+    targets,
+    visibility,
+  }
+})
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 14cb968..dc41171 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -40,6 +40,56 @@ const namespaceQueues = new Map<string, Promise<void>>()
 
 const defaultLocales: LocaleTree = {
   Apps: {
+    easyShare: {
+      name: 'EasyShare',
+      incoming: 'Incoming Share',
+      recentChats: 'Contacts and Chats',
+      destinations: 'Share destinations',
+      newMessage: 'New Message',
+      shareProfile: 'Share Profile',
+      chooseConversation: 'Choose a conversation',
+      sentToChat: 'Sent to chat.',
+      savedToNotes: 'Saved to Notes.',
+      copy: 'Copy',
+      copyLink: 'Copy Link',
+      nearby: 'People Nearby',
+      history: 'Transfer History',
+      noHistory: 'No transfers yet.',
+      noNearby: 'No visible players are nearby.',
+      visibility: 'Visibility',
+      requestSent: 'Waiting for acceptance...',
+      incomingFrom: '{name} wants to share',
+      distance: '{distance} m away',
+      cancel: 'Cancel',
+      visibilityOptions: {
+        everyone: 'Everyone',
+        contacts: 'Contacts Only',
+        hidden: 'Receiving Off',
+      },
+      status: {
+        pending: 'Waiting for acceptance',
+        transferring: 'Transferring',
+        completed: 'Completed',
+        declined: 'Declined',
+        cancelled: 'Cancelled',
+        expired: 'Expired',
+        failed: 'Failed',
+        accepted: 'Accepted',
+      },
+      errors: {
+        disabled: 'EasyShare is disabled.',
+        invalid_payload: 'This item cannot be shared.',
+        invalid_target: 'Choose a valid recipient.',
+        target_unavailable: 'That player is no longer available.',
+        transfer_not_found: 'That transfer is no longer available.',
+        too_far: 'The recipient is too far away.',
+        not_owned: 'This item no longer belongs to this phone.',
+        payload_too_large: 'This item is too large to share.',
+        location_unavailable: 'Your location is unavailable.',
+        rate_limited: 'Too many share requests. Try again shortly.',
+        request_failed: 'EasyShare is temporarily unavailable.',
+      },
+    },
     crewlink: {
       name: 'CrewLink',
       connecting: 'Connecting your crew...',
diff --git a/frontend/src/types/easyshare.ts b/frontend/src/types/easyshare.ts
new file mode 100644
index 0000000..ed63d73
--- /dev/null
+++ b/frontend/src/types/easyshare.ts
@@ -0,0 +1,71 @@
+import type { LaunchablePhoneAppId } from '@/types/apps'
+
+export type EasyShareKind =
+  | 'contact'
+  | 'document'
+  | 'link'
+  | 'location'
+  | 'note'
+  | 'photo'
+  | 'playlist'
+  | 'post'
+  | 'profile'
+  | 'text'
+  | 'track'
+  | 'video'
+
+export type EasyShareVisibility = 'contacts' | 'everyone' | 'hidden'
+export type EasyShareChatApp = 'darkchat' | 'flare' | 'messages'
+export type EasyShareChatDraft = {
+  appId: EasyShareChatApp
+  body: string
+  targetId: string | null
+}
+export type EasyShareStatus =
+  | 'accepted'
+  | 'cancelled'
+  | 'completed'
+  | 'declined'
+  | 'expired'
+  | 'failed'
+  | 'pending'
+  | 'transferring'
+
+export type EasySharePayload = {
+  appId: LaunchablePhoneAppId
+  copyText: string
+  id?: number | string
+  imageUrl?: string | null
+  kind: EasyShareKind
+  link?: string
+  meta?: Record<string, unknown>
+  subtitle?: string
+  title: string
+}
+
+export type EasyShareTarget = {
+  distance: number
+  id: number
+  name: string
+}
+
+export type EasyShareTransfer = {
+  createdAt: number
+  direction: 'incoming' | 'outgoing'
+  id: string
+  otherName: string
+  payload: EasySharePayload
+  progress: number
+  status: EasyShareStatus
+}
+
+export type EasyShareBootstrap = {
+  history: EasyShareTransfer[]
+  pending: EasyShareTransfer[]
+  targets: EasyShareTarget[]
+  visibility: EasyShareVisibility
+}
+
+export type EasyShareEvent = {
+  transfer: EasyShareTransfer
+}
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 35ae297..dd90b9c 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -41,6 +41,7 @@ import {
   RefreshCw,
   Route,
   Settings2,
+  Share2,
   Shield,
   ShieldCheck,
   Sparkles,
@@ -69,6 +70,7 @@ import {
   type MapPoint,
 } from '@/features/map/defaultMapGeometry'
 import { useCrewLinkStore } from '@/stores/crewlink'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type {
   CrewLinkColour,
@@ -240,6 +242,20 @@ function showToast(message: string): void {
   }, 2400)
 }
 
+function shareProfile(): void {
+  const profile = crew.profile
+  if (!profile) return
+  useEasyShareStore().open({
+    appId: 'crewlink',
+    copyText: `@${profile.username}`,
+    id: profile.id,
+    kind: 'profile',
+    link: `skyphone://crewlink/profile/${profile.id}`,
+    subtitle: activeGroup.value?.name,
+    title: `@${profile.username}`,
+  })
+}
+
 function updateValue(
   target: 'username' | 'groupName' | 'inviteCode' | 'pingLabel',
   event: Event,
@@ -900,6 +916,17 @@ onBeforeUnmount(() => {
               <div><small>{{ t('yourCrewLinkId') }}</small><h1>@{{ crew.profile.username }}</h1><p>{{ activeGroup.name }} · {{ roleLabel(activeGroup.role) }}</p></div>
             </div>
 
+            <k-list inset strong>
+              <k-list-item
+                link
+                link-component="button"
+                :title="phone.t('Apps.easyShare.shareProfile')"
+                @click="shareProfile"
+              >
+                <template #media><Share2 :size="20" /></template>
+              </k-list-item>
+            </k-list>
+
             <k-block-title>{{ t('privacyVisibility') }}</k-block-title>
             <k-list inset strong>
               <k-list-item :title="t('shareOnMap')" :subtitle="t('shareOnMapBody')">
diff --git a/frontend/src/views/apps/DarkChatApp.vue b/frontend/src/views/apps/DarkChatApp.vue
index 172fdf4..bd91ad0 100644
--- a/frontend/src/views/apps/DarkChatApp.vue
+++ b/frontend/src/views/apps/DarkChatApp.vue
@@ -37,6 +37,7 @@ import {
   Plus,
   QrCode,
   Reply,
+  Share2,
   ShieldCheck,
   ShieldOff,
   Trash2,
@@ -45,13 +46,14 @@ import {
   Video,
   X,
 } from 'lucide-vue-next'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 import DarkChatVoiceMessage from '@/components/DarkChatVoiceMessage.vue'
 import FullEmojiPicker from '@/components/FullEmojiPicker.vue'
 import { useAccountStore } from '@/stores/account'
 import { useDarkChatStore } from '@/stores/darkchat'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { useMessagesStore } from '@/stores/messages'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
@@ -97,6 +99,7 @@ const darkSheetColors = {
 }
 const account = useAccountStore()
 const darkchat = useDarkChatStore()
+const easyShare = useEasyShareStore()
 const sms = useMessagesStore()
 const messageMedia = useMessageMediaStore()
 const phone = usePhoneStore()
@@ -107,6 +110,7 @@ const identifier = ref('')
 const pendingIdentifier = ref('')
 const safetyOpen = ref(false)
 const draft = ref('')
+const queuedShareBody = ref('')
 const aliasDraft = ref('')
 const contactAliasDraft = ref('')
 const notificationMode = ref<DarkChatNotificationMode>('private')
@@ -326,6 +330,10 @@ async function openConversation(conversationId: string): Promise<void> {
   }
   screen.value = 'thread'
   resetPanels()
+  if (queuedShareBody.value) {
+    draft.value = queuedShareBody.value
+    queuedShareBody.value = ''
+  }
   await scrollBottom(false)
 }
 
@@ -498,6 +506,45 @@ function copyMessage(message: DarkChatMessage): void {
   showToast(copyText(message.body) ? t('copied') : errorText())
 }
 
+async function openEasyShareDraft(): Promise<boolean> {
+  const shared = easyShare.consumeChatDraft('darkchat')
+  if (!shared) return false
+  if (!shared.targetId) {
+    darkchat.closeThread()
+    screen.value = 'inbox'
+    resetPanels()
+    queuedShareBody.value = shared.body
+    draft.value = ''
+    return true
+  }
+  if (!(await darkchat.openThread(shared.targetId))) {
+    showToast(errorText(darkchat.lastError ?? undefined))
+    return true
+  }
+  screen.value = 'thread'
+  resetPanels()
+  queuedShareBody.value = ''
+  draft.value = shared.body
+  await scrollBottom(false)
+  return true
+}
+
+function shareMessage(message: DarkChatMessage): void {
+  selectedMessage.value = null
+  useEasyShareStore().open({
+    appId: 'darkchat',
+    copyText: message.body || message.messageType,
+    id: message.id,
+    imageUrl:
+      message.messageType === 'image' || message.messageType === 'video'
+        ? message.mediaPayload
+        : undefined,
+    kind: 'text',
+    subtitle: active.value?.peer.alias,
+    title: message.body || message.messageType,
+  })
+}
+
 async function react(
   message: DarkChatMessage,
   reaction: string,
@@ -648,6 +695,20 @@ function chooseSelection(value: number | string): void {
   selectionSheet.value = null
 }
 
+function shareIdentity(): void {
+  const profile = darkchat.profile
+  if (!profile) return
+  easyShare.open({
+    appId: 'darkchat',
+    copyText: `${profile.alias}\n${profile.darkId}\n${profile.inviteCode}`,
+    id: profile.id,
+    kind: 'profile',
+    link: `skyphone://darkchat/invite/${profile.inviteCode}`,
+    subtitle: profile.darkId,
+    title: profile.alias,
+  })
+}
+
 function copyIdentity(value: string): void {
   showToast(copyText(value) ? t('copied') : errorText())
 }
@@ -818,12 +879,20 @@ function recordingTime(): string {
 
 onMounted(async () => {
   if (signedIn.value) await darkchat.bootstrap()
+  if (await openEasyShareDraft()) return
   if (!active.value) return
   screen.value = 'thread'
   const media = messageMedia.consume(`darkchat:${active.value.id}`)
   if (media) await sendAttachment(media)
 })
 
+watch(
+  () => easyShare.chatDraft,
+  (shared) => {
+    if (shared?.appId === 'darkchat') void openEasyShareDraft()
+  },
+)
+
 onBeforeUnmount(() => {
   discardRecording = true
   cleanupRecording()
@@ -2296,8 +2365,8 @@ onBeforeUnmount(() => {
             <k-button
               tonal
               rounded
-              @click="copyIdentity(darkchat.profile.inviteCode)"
-              ><Copy :size="16" />{{ darkchat.profile.inviteCode }}</k-button
+              @click="shareIdentity"
+              ><Share2 :size="16" />{{ phone.t('Apps.easyShare.shareProfile') }}</k-button
             >
           </k-card>
         </div>
@@ -2770,6 +2839,14 @@ onBeforeUnmount(() => {
           </button>
         </div>
         <k-list inset strong class="dc-action-list">
+          <k-list-item
+            link
+            link-component="button"
+            content-class="w-full"
+            :title="phone.t('Apps.easyShare.name')"
+            @click="shareMessage(selectedMessage)"
+            ><template #media><Share2 :size="20" /></template
+          ></k-list-item>
           <k-list-item
             link
             link-component="button"
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index c24c167..497b988 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -61,6 +61,7 @@ import { useRoute, useRouter } from 'vue-router'
 import FeatherPostCard from '@/components/feather/FeatherPostCard.vue'
 import { useAccountStore } from '@/stores/account'
 import { useFeatherStore } from '@/stores/feather'
+import { useEasyShareStore } from '@/stores/easyshare'
 import type { FeatherConnectionMode } from '@/stores/feather'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
@@ -417,25 +418,32 @@ async function selectTopic(topic: string): Promise<void> {
   await runSearch()
 }
 
-async function shareProfile(): Promise<void> {
-  if (!activeProfile.value) return
-  try {
-    await navigator.clipboard.writeText(`@${activeProfile.value.handle}`)
-    toast('profileCopied')
-  } catch (error) {
-    console.error('[Feather] Could not copy the profile handle.', error)
-    toast('errors.generic')
-  }
+function shareProfile(): void {
+  const profile = activeProfile.value
+  if (!profile) return
+  useEasyShareStore().open({
+    appId: 'feather',
+    copyText: `@${profile.handle}`,
+    id: profile.id,
+    imageUrl: profile.avatar_url,
+    kind: 'profile',
+    link: `skyphone://feather/profile/${profile.id}`,
+    subtitle: `@${profile.handle}`,
+    title: profile.display_name,
+  })
 }
 
-async function sharePost(post: FeatherPost): Promise<void> {
-  try {
-    await navigator.clipboard.writeText(`@${post.handle}: ${post.body}`)
-    toast('postCopied')
-  } catch (error) {
-    console.error('[Feather] Could not copy the post.', error)
-    toast('errors.generic')
-  }
+function sharePost(post: FeatherPost): void {
+  useEasyShareStore().open({
+    appId: 'feather',
+    copyText: `@${post.handle}: ${post.body}`,
+    id: post.id,
+    imageUrl: post.media[0]?.url,
+    kind: 'post',
+    link: `skyphone://feather/post/${post.id}`,
+    subtitle: `@${post.handle}`,
+    title: post.body,
+  })
 }
 
 function openComposer(post?: FeatherPost): void {
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index 473f0fb..fc96f4c 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -45,6 +45,7 @@ import {
   RotateCcw,
   Search,
   Settings2,
+  Share2,
   Star,
   SlidersHorizontal,
   UserRound,
@@ -59,12 +60,14 @@ import {
   onMounted,
   reactive,
   ref,
+  watch,
 } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import profilesSprite from '@/assets/img/flare/profiles-source.png'
 import FullEmojiPicker from '@/components/FullEmojiPicker.vue'
 import MessageAttachmentBubble from '@/components/MessageAttachmentBubble.vue'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { useFlareStore } from '@/stores/flare'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { useMessagesStore } from '@/stores/messages'
@@ -97,6 +100,7 @@ type FlareMediaContext = {
 type FlareChatMediaContext = { matchId: string }
 
 const phone = usePhoneStore()
+const easyShare = useEasyShareStore()
 const flare = useFlareStore()
 const messageMedia = useMessageMediaStore()
 const messages = useMessagesStore()
@@ -128,6 +132,21 @@ const gifResults = ref<GifSearchResult[]>([])
 const gifLoading = ref(false)
 const gifError = ref<string | null>(null)
 const gifHasMore = ref(true)
+
+function shareProfile(): void {
+  const profile = flare.profile
+  if (!profile) return
+  easyShare.open({
+    appId: 'flare',
+    copyText: `${profile.name}, ${profile.age}\n${profile.bio}`,
+    id: profile.id,
+    imageUrl: profile.photoUrls[0],
+    kind: 'profile',
+    link: `skyphone://flare/profile/${profile.id}`,
+    subtitle: phone.t(`Apps.flare.lookingFor.${profile.lookingFor}`),
+    title: `${profile.name}, ${profile.age}`,
+  })
+}
 const gifNextOffset = ref(0)
 const draftPhotos = ref<FlareDraftPhoto[]>([])
 const activeChoiceField = ref<FlareChoiceField>('gender')
@@ -568,6 +587,19 @@ async function openMatch(match: FlareMatch): Promise<void> {
   messageScroll.value?.scrollTo({ top: messageScroll.value.scrollHeight })
 }
 
+async function openEasyShareDraft(): Promise<boolean> {
+  const shared = easyShare.consumeChatDraft('flare')
+  if (!shared?.targetId) return false
+  const match = flare.matches.find((item) => item.id === shared.targetId)
+  if (!match) {
+    showActionError()
+    return true
+  }
+  await openMatch(match)
+  if (activeMatch.value?.id === match.id) draft.value = shared.body
+  return true
+}
+
 function closeMatch(): void {
   activeMatch.value = null
   draft.value = ''
@@ -739,6 +771,7 @@ function messageTime(value: DatabaseDateValue): string {
 
 onMounted(async () => {
   await flare.bootstrap()
+  await openEasyShareDraft()
   const selection = messageMedia.consumeMany<FlareMediaContext>(
     'flare:profile-photos',
   )
@@ -790,6 +823,13 @@ onMounted(async () => {
   }
 })
 
+watch(
+  () => easyShare.chatDraft,
+  (shared) => {
+    if (shared?.appId === 'flare') void openEasyShareDraft()
+  },
+)
+
 onBeforeUnmount(() => {
   if (gifSearchTimer) clearTimeout(gifSearchTimer)
 })
@@ -1539,6 +1579,10 @@ onBeforeUnmount(() => {
             <span><Pencil /></span>
             {{ phone.t('Apps.flare.editProfile') }}
           </button>
+          <button type="button" @click="shareProfile">
+            <span><Share2 /></span>
+            {{ phone.t('Apps.easyShare.shareProfile') }}
+          </button>
         </div>
         <k-card :content-wrap="false" class="flare-profile-card">
           <span><Heart fill="currentColor" /></span>
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index a0b8434..a6ad07e 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -54,6 +54,7 @@ import { useRouter } from 'vue-router'
 
 import flipTokIcon from '@/assets/img/app-icons/fliptok.webp'
 import { useFlipTokStore } from '@/stores/fliptok'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
 import type {
@@ -604,8 +605,30 @@ function openActions(video: FlipTokVideo): void {
 async function shareVideo(video: FlipTokVideo): Promise<void> {
   const response = await nuiCall('fliptok:share', { id: video.id })
   if (response.success) video.share_count += 1
-  await navigator.clipboard?.writeText(`fliptok://video/${video.id}`)
-  notify(t('linkCopied'))
+  useEasyShareStore().open({
+    appId: 'fliptok',
+    copyText: `@${video.handle}: ${video.caption}`,
+    id: video.id,
+    imageUrl: video.url,
+    kind: 'post',
+    link: `skyphone://fliptok/video/${video.id}`,
+    subtitle: `@${video.handle}`,
+    title: video.caption || video.display_name,
+  })
+}
+
+function shareCurrentProfile(): void {
+  const profile = currentProfile.value
+  if (!profile) return
+  useEasyShareStore().open({
+    appId: 'fliptok',
+    copyText: `@${profile.handle}`,
+    id: profile.id,
+    kind: 'profile',
+    link: `skyphone://fliptok/profile/${profile.id}`,
+    subtitle: `@${profile.handle}`,
+    title: profile.display_name,
+  })
 }
 
 async function reportVideo(): Promise<void> {
@@ -1160,6 +1183,10 @@ onBeforeUnmount(() => {
               >{{ t('block') }}</k-button
             >
           </template>
+          <k-button rounded tonal @click="shareCurrentProfile">
+            <Share2 :size="17" />
+            {{ phone.t('Apps.easyShare.shareProfile') }}
+          </k-button>
         </div>
         <div class="profile-video-grid">
           <button
diff --git a/frontend/src/views/apps/GalleryApp.vue b/frontend/src/views/apps/GalleryApp.vue
index d24c848..c827fe3 100644
--- a/frontend/src/views/apps/GalleryApp.vue
+++ b/frontend/src/views/apps/GalleryApp.vue
@@ -12,12 +12,13 @@ import {
   kSegmentedButton,
   kToast,
 } from 'konsta/vue'
-import { Play, RotateCcw, Trash2, ZoomIn, ZoomOut } from 'lucide-vue-next'
+import { Play, RotateCcw, Share2, Trash2, ZoomIn, ZoomOut } from 'lucide-vue-next'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
+import { useEasyShareStore } from '@/stores/easyshare'
 import type { DeleteResult, GalleryFilter, PhoneMedia } from '@/types/media'
 import {
   hasNextMediaPage,
@@ -37,6 +38,7 @@ const filterItems = [
   { id: 'video', label: 'videos' },
 ] as const
 const phone = usePhoneStore()
+const easyShare = useEasyShareStore()
 const messageMedia = useMessageMediaStore()
 const route = useRoute()
 const router = useRouter()
@@ -255,6 +257,21 @@ function closeMedia(): void {
   stopDragging()
 }
 
+function shareSelected(): void {
+  if (!selected.value) return
+  const mediaKind = selected.value.mediaType
+  easyShare.open({
+    appId: 'photos',
+    copyText: selected.value.url,
+    id: selected.value.id,
+    imageUrl: selected.value.url,
+    kind: mediaKind,
+    link: `skyphone://media/${selected.value.id}`,
+    subtitle: formatDate(selected.value.createdAt),
+    title: phone.t(mediaKind === 'video' ? 'Apps.photos.video' : 'Apps.photos.photo'),
+  })
+}
+
 function orientToMedia(event: Event): void {
   const mediaElement = event.currentTarget as
     | HTMLImageElement
@@ -332,6 +349,10 @@ async function deleteSelected(): Promise<void> {
 
 function onMessage(event: MessageEvent): void {
   const message = event.data as { data?: DeleteResult; type?: string }
+  if (message.type === 'gallery:changed') {
+    void loadGallery()
+    return
+  }
   if (
     message.type !== 'media:deleteResult' ||
     message.data?.correlationId !== pendingDeleteCorrelation
@@ -519,6 +540,15 @@ onBeforeUnmount(() => {
           v-else
           component="button"
           icon-only
+          :aria-label="phone.t('Apps.easyShare.name')"
+          @click="shareSelected"
+        >
+          <Share2 :size="20" />
+        </k-link>
+        <k-link
+          v-if="!requestedMessageMedia"
+          component="button"
+          icon-only
           class="text-red-500"
           :aria-label="phone.t('Apps.photos.delete')"
           :disabled="deleting"
diff --git a/frontend/src/views/apps/MapApp.vue b/frontend/src/views/apps/MapApp.vue
index 4ec172c..5c6cd23 100644
--- a/frontend/src/views/apps/MapApp.vue
+++ b/frontend/src/views/apps/MapApp.vue
@@ -17,6 +17,7 @@ import {
   MapPinPlus,
   Route,
   Satellite,
+  Share2,
   Trash2,
   X,
 } from 'lucide-vue-next'
@@ -32,6 +33,7 @@ import {
   type MapPoint,
 } from '@/features/map/defaultMapGeometry'
 import { useMapStore } from '@/stores/map'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MapMarker, MapMarkerColor } from '@/types/map'
 import { nuiCall, type NuiResponse } from '@/utils/nui'
@@ -40,6 +42,7 @@ type MapStyle = 'default' | 'satellite' | 'atlas' | 'roads'
 
 const phone = usePhoneStore()
 const mapStore = useMapStore()
+const easyShare = useEasyShareStore()
 const mapStyle = ref<MapStyle>('default')
 const zoom = ref(1.1)
 const pan = ref<MapPoint>({ x: 0, y: 0 })
@@ -462,6 +465,16 @@ async function loadCurrentLocation(center: boolean): Promise<void> {
   }
 }
 
+function shareCurrentLocation(): void {
+  easyShare.open({
+    appId: 'map',
+    copyText: phone.t('Apps.map.currentLocation'),
+    kind: 'location',
+    link: 'skyphone://location/current',
+    title: phone.t('Apps.map.currentLocation'),
+  })
+}
+
 onMounted(() => {
   void loadCurrentLocation(false)
   void mapStore.load()
@@ -552,6 +565,18 @@ onBeforeUnmount(() => {
     </div>
 
     <nav class="map-controls" :aria-label="phone.t('Apps.map.controls')">
+      <k-fab
+        component="button"
+        type="button"
+        class="map-control map-control--share"
+        :colors="locationControlColors"
+        :aria-label="phone.t('Apps.easyShare.name')"
+        @click="shareCurrentLocation"
+      >
+        <template #icon>
+          <Share2 aria-hidden="true" />
+        </template>
+      </k-fab>
       <k-fab
         component="button"
         type="button"
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 836ffd5..08eb0ac 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -39,13 +39,14 @@ import {
   Video,
   X,
 } from 'lucide-vue-next'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 import MessageAttachmentBubble from '@/components/MessageAttachmentBubble.vue'
 import FullEmojiPicker from '@/components/FullEmojiPicker.vue'
 import VoiceMessageBubble from '@/components/VoiceMessageBubble.vue'
 import { useCallsStore } from '@/stores/calls'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { useMessagesStore } from '@/stores/messages'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
@@ -63,6 +64,7 @@ const WAVEFORM_SAMPLES = 48
 
 const phone = usePhoneStore()
 const calls = useCallsStore()
+const easyShare = useEasyShareStore()
 const messages = useMessagesStore()
 const messageMedia = useMessageMediaStore()
 const router = useRouter()
@@ -72,6 +74,7 @@ const editingList = ref(false)
 const selectedNumbers = ref<string[]>([])
 const composerNumber = ref('')
 const draft = ref('')
+const queuedShareBody = ref('')
 const composing = ref(false)
 const sending = ref(false)
 const toastOpened = ref(false)
@@ -119,6 +122,14 @@ const filteredConversations = computed(() => {
 const knownContactNumbers = computed(
   () => new Set(calls.contacts.map((contact) => contact.phone_number)),
 )
+const contactAvatarUrls = computed(
+  () =>
+    new Map(
+      calls.contacts
+        .filter((contact) => Boolean(contact.avatar_url))
+        .map((contact) => [contact.phone_number, contact.avatar_url as string]),
+    ),
+)
 const contactSuggestions = computed(() => {
   const query = composerNumber.value.trim().toLocaleLowerCase(phone.lang)
   if (!query) return calls.contacts.slice(0, 8)
@@ -163,21 +174,17 @@ function conversationPreview(conversation: SmsConversation): string {
     : conversation.lastMessage
 }
 
-function avatarStyle(number: string): { background: string } {
-  let hash = 0
-  for (const character of number) {
-    hash = (hash * 31 + character.charCodeAt(0)) % 360
-  }
-  return {
-    background: `linear-gradient(145deg, hsl(${hash} 72% 62%), hsl(${(hash + 35) % 360} 68% 48%))`,
-  }
-}
-
-function avatarGlyph(number: string): string {
-  const glyphs = ['👩🏻', '🧔🏻', '👩🏽', '👨🏼', '👩🏼', '🧑🏾', '👨🏽', '👩🏾']
-  let hash = 0
-  for (const character of number) hash += character.charCodeAt(0)
-  return glyphs[hash % glyphs.length]
+function contactInitials(number: string): string {
+  const contact = calls.contacts.find(
+    (entry) => entry.phone_number === number,
+  )
+  if (!contact) return ''
+  return contact.name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('')
 }
 
 function formatConversationDate(value: DatabaseDateValue): string {
@@ -319,7 +326,28 @@ async function openConversation(conversation: SmsConversation): Promise<void> {
     return
   }
   composing.value = false
-  draft.value = ''
+  draft.value = queuedShareBody.value
+  queuedShareBody.value = ''
+  await scrollToBottom(false)
+}
+
+async function openEasyShareDraft(): Promise<void> {
+  const shared = easyShare.consumeChatDraft('messages')
+  if (!shared) return
+  if (!shared.targetId) {
+    messages.closeThread()
+    composing.value = false
+    queuedShareBody.value = shared.body
+    draft.value = ''
+    return
+  }
+  if (!(await messages.openThread(shared.targetId))) {
+    showToast(errorText('invalid_number'))
+    return
+  }
+  composing.value = false
+  queuedShareBody.value = ''
+  draft.value = shared.body
   await scrollToBottom(false)
 }
 
@@ -682,9 +710,9 @@ async function finishVoiceRecording(): Promise<void> {
   await scrollToBottom()
 }
 
-onMounted(() => {
-  void messages.loadConversations()
-  void calls.loadContacts()
+onMounted(async () => {
+  await Promise.all([messages.loadConversations(), calls.loadContacts()])
+  await openEasyShareDraft()
   if (messages.activeNumber) {
     const media = messageMedia.consume(messages.activeNumber)
     if (media) {
@@ -696,6 +724,13 @@ onMounted(() => {
   }
 })
 
+watch(
+  () => easyShare.chatDraft,
+  (shared) => {
+    if (shared?.appId === 'messages') void openEasyShareDraft()
+  },
+)
+
 onBeforeUnmount(() => {
   discardRecording = true
   cleanupRecorder()
@@ -797,14 +832,19 @@ onBeforeUnmount(() => {
               conversation.phoneNumber,
             ),
           }"
-          :style="avatarStyle(conversation.phoneNumber)"
           aria-hidden="true"
         >
+          <img
+            v-if="contactAvatarUrls.get(conversation.phoneNumber)"
+            class="messages-avatar__image"
+            :src="contactAvatarUrls.get(conversation.phoneNumber)"
+            alt=""
+          />
           <span
-            v-if="knownContactNumbers.has(conversation.phoneNumber)"
-            class="messages-avatar__glyph"
+            v-else-if="knownContactNumbers.has(conversation.phoneNumber)"
+            class="messages-avatar__initials"
           >
-            {{ avatarGlyph(conversation.phoneNumber) }}
+            {{ contactInitials(conversation.phoneNumber) }}
           </span>
           <span v-else class="messages-avatar__placeholder">
             <i />
@@ -937,10 +977,15 @@ onBeforeUnmount(() => {
         <template #media>
           <span
             class="messages-avatar messages-avatar--small"
-            :style="avatarStyle(contact.phone_number)"
           >
-            <span class="messages-avatar__glyph">{{
-              avatarGlyph(contact.phone_number)
+            <img
+              v-if="contact.avatar_url"
+              class="messages-avatar__image"
+              :src="contact.avatar_url"
+              alt=""
+            />
+            <span v-else class="messages-avatar__initials">{{
+              contactInitials(contact.phone_number)
             }}</span>
           </span>
         </template>
@@ -979,10 +1024,15 @@ onBeforeUnmount(() => {
         <span
           class="messages-avatar messages-avatar--header"
           :class="{ 'messages-avatar--unknown': !activeContact }"
-          :style="avatarStyle(messages.activeNumber ?? '')"
         >
-          <span v-if="activeContact" class="messages-avatar__glyph">{{
-            avatarGlyph(messages.activeNumber ?? '')
+          <img
+            v-if="activeContact?.avatar_url"
+            class="messages-avatar__image"
+            :src="activeContact.avatar_url"
+            alt=""
+          />
+          <span v-else-if="activeContact" class="messages-avatar__initials">{{
+            contactInitials(messages.activeNumber ?? '')
           }}</span>
           <span v-else class="messages-avatar__placeholder" aria-hidden="true">
             <i />
@@ -1026,10 +1076,15 @@ onBeforeUnmount(() => {
         <span
           class="messages-avatar messages-avatar--contact"
           :class="{ 'messages-avatar--unknown': !activeContact }"
-          :style="avatarStyle(messages.activeNumber ?? '')"
         >
-          <span v-if="activeContact" class="messages-avatar__glyph">{{
-            avatarGlyph(messages.activeNumber ?? '')
+          <img
+            v-if="activeContact?.avatar_url"
+            class="messages-avatar__image"
+            :src="activeContact.avatar_url"
+            alt=""
+          />
+          <span v-else-if="activeContact" class="messages-avatar__initials">{{
+            contactInitials(messages.activeNumber ?? '')
           }}</span>
           <span v-else class="messages-avatar__placeholder" aria-hidden="true">
             <i />
diff --git a/frontend/src/views/apps/MusicApp.vue b/frontend/src/views/apps/MusicApp.vue
index 9ba20b8..56b6b96 100644
--- a/frontend/src/views/apps/MusicApp.vue
+++ b/frontend/src/views/apps/MusicApp.vue
@@ -36,6 +36,7 @@ import {
   Play,
   Plus,
   Search,
+  Share2,
   SkipBack,
   SkipForward,
   Trash2,
@@ -47,6 +48,7 @@ import type { CSSProperties } from 'vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { useMusicStore } from '@/stores/music'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MusicPlaylist, MusicTrack } from '@/types/music'
 
@@ -65,6 +67,7 @@ const MUSIC_POPOVER_GAP = 7
 const MUSIC_SHEET_TRANSITION_MS = 420
 
 const music = useMusicStore()
+const easyShare = useEasyShareStore()
 const phone = usePhoneStore()
 const activeTab = ref<MusicTab>('library')
 const activePlaylist = ref<MusicPlaylist | null>(null)
@@ -189,7 +192,7 @@ function positionPopover(target: HTMLElement, itemCount: number): boolean {
 
 function openAddMenu(event: MouseEvent): void {
   const target = event.currentTarget as HTMLElement
-  if (!positionPopover(target, activePlaylist.value ? 3 : 2)) return
+  if (!positionPopover(target, activePlaylist.value ? 4 : 2)) return
   actionTrack.value = null
   actionMenuOpened.value = false
   addMenuOpened.value = true
@@ -264,12 +267,44 @@ function openTrackMenu(event: MouseEvent, track: MusicTrack): void {
   event.stopPropagation()
   actionTrack.value = track
   const itemCount =
-    1 + (activePlaylist.value ? 1 : 0) + (track.source === 'youtube' ? 1 : 0)
+    2 + (activePlaylist.value ? 1 : 0) + (track.source === 'youtube' ? 1 : 0)
   if (!positionPopover(event.currentTarget as HTMLElement, itemCount)) return
   addMenuOpened.value = false
   actionMenuOpened.value = true
 }
 
+function shareTrack(): void {
+  const track = actionTrack.value
+  if (!track) return
+  closeMenus()
+  easyShare.open({
+    appId: 'music',
+    copyText: `${track.title} — ${track.artist}`,
+    id: track.id,
+    imageUrl: track.artwork,
+    kind: 'track',
+    link: `skyphone://music/${track.source}/${track.id}`,
+    meta: { source: track.source },
+    subtitle: track.artist,
+    title: track.title,
+  })
+}
+
+function shareActivePlaylist(): void {
+  const playlist = activePlaylist.value
+  if (!playlist) return
+  closeMenus()
+  easyShare.open({
+    appId: 'music',
+    copyText: `${playlist.name} · ${playlist.entries.length}`,
+    id: playlist.id,
+    kind: 'playlist',
+    link: `skyphone://music/playlist/${playlist.id}`,
+    subtitle: phone.t('Apps.music.songCount', { count: String(playlist.entries.length) }),
+    title: playlist.name,
+  })
+}
+
 function openPlaylist(playlist: MusicPlaylist): void {
   activePlaylist.value = playlist
   activeTab.value = 'playlists'
@@ -934,6 +969,9 @@ onBeforeUnmount(() => {
     >
       <k-list nested>
         <template v-if="activePlaylist">
+          <k-list-button link-component="button" @click="shareActivePlaylist">
+            <Share2 :size="18" /> {{ phone.t('Apps.easyShare.name') }}
+          </k-list-button>
           <k-list-button
             link-component="button"
             @click="openActivePlaylistTrackPicker"
@@ -975,6 +1013,9 @@ onBeforeUnmount(() => {
       :aria-label="phone.t('Apps.music.songActions')"
     >
       <k-list nested>
+        <k-list-button link-component="button" @click="shareTrack">
+          <Share2 :size="18" /> {{ phone.t('Apps.easyShare.name') }}
+        </k-list-button>
         <k-list-button
           link-component="button"
           @click="openPlaylistPicker(actionTrack)"
diff --git a/frontend/src/views/apps/NotesApp.vue b/frontend/src/views/apps/NotesApp.vue
index 2b22230..2a6c55b 100644
--- a/frontend/src/views/apps/NotesApp.vue
+++ b/frontend/src/views/apps/NotesApp.vue
@@ -13,7 +13,7 @@ import {
   kPopover,
   kSearchbar,
 } from 'konsta/vue'
-import { Ellipsis, Pin, PinOff, SquarePen, Trash2 } from 'lucide-vue-next'
+import { Ellipsis, Pin, PinOff, Share2, SquarePen, Trash2 } from 'lucide-vue-next'
 import {
   computed,
   type ComponentPublicInstance,
@@ -23,11 +23,13 @@ import {
 } from 'vue'
 
 import { useNotesStore } from '@/stores/notes'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { Note } from '@/utils/notes'
 
 const phone = usePhoneStore()
 const notes = useNotesStore()
+const easyShare = useEasyShareStore()
 const searchQuery = ref('')
 const editorId = ref<string | null>(null)
 const editorOpened = ref(false)
@@ -179,6 +181,20 @@ function togglePinned(): void {
   menuOpened.value = false
 }
 
+function shareNote(): void {
+  const note = persistDraft()
+  if (!note) return
+  menuOpened.value = false
+  easyShare.open({
+    appId: 'notes',
+    copyText: note.body || note.title,
+    id: note.id,
+    kind: 'note',
+    subtitle: notePreview(note),
+    title: noteTitle(note),
+  })
+}
+
 </script>
 
 <template>
@@ -304,6 +320,10 @@ function togglePinned(): void {
         @backdropclick="menuOpened = false"
       >
         <k-list nested>
+          <k-list-button link-component="button" :colors="pinActionColors" @click="shareNote">
+            <Share2 :size="18" />
+            {{ phone.t('Apps.easyShare.name') }}
+          </k-list-button>
           <k-list-button
             link-component="button"
             :colors="pinActionColors"
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index 34fab17..2f79898 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -45,6 +45,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useCallsStore } from '@/stores/calls'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
@@ -67,6 +68,7 @@ type ContactPhotoContext = {
 
 const phone = usePhoneStore()
 const calls = useCallsStore()
+const easyShare = useEasyShareStore()
 const mediaPicker = useMessageMediaStore()
 const messages = useMessagesStore()
 const router = useRouter()
@@ -489,6 +491,33 @@ function openCallContact(): void {
   openContact(activeCallContact.value ?? undefined, call.otherNumber)
 }
 
+function shareSelectedContact(): void {
+  const contact = selectedContact.value
+  if (!contact) return
+  easyShare.open({
+    appId: 'phone',
+    copyText: `${contact.name}\n${contact.phone_number}`,
+    id: contact.id,
+    imageUrl: contact.avatar_url,
+    kind: 'contact',
+    subtitle: formatPhoneNumber(contact.phone_number),
+    title: contact.name,
+  })
+}
+
+function shareOwnProfile(): void {
+  const number = phone.device?.sim?.number
+  if (!number) return
+  easyShare.open({
+    appId: 'phone',
+    copyText: `${phone.t('Apps.phone.myCard')}\n${number}`,
+    kind: 'profile',
+    link: `skyphone://phone/${number}`,
+    subtitle: formatPhoneNumber(number),
+    title: phone.t('Apps.phone.myCard'),
+  })
+}
+
 function messageActiveCaller(): void {
   const number = calls.activeCall?.otherNumber
   callMoreOpened.value = false
@@ -954,6 +983,11 @@ onBeforeUnmount(() => {
                   </p>
                 </div>
               </k-glass>
+              <k-glass class="phone-profile-card phone-profile-single-option">
+                <button type="button" @click="shareOwnProfile">
+                  <span>{{ phone.t('Apps.easyShare.shareProfile') }}</span>
+                </button>
+              </k-glass>
             </section>
 
             <section v-else class="phone-profile-content">
@@ -984,7 +1018,11 @@ onBeforeUnmount(() => {
                 <button type="button" @click="openMessage(selectedNumber)">
                   <span>{{ phone.t('Apps.phone.sendMessage') }}</span>
                 </button>
-                <button type="button" disabled>
+                <button
+                  type="button"
+                  :disabled="!selectedContact"
+                  @click="shareSelectedContact"
+                >
                   <span>{{ phone.t('Apps.phone.shareContact') }}</span>
                 </button>
                 <button
diff --git a/frontend/src/views/apps/PicstagramApp.vue b/frontend/src/views/apps/PicstagramApp.vue
index 3af770d..17c20bf 100644
--- a/frontend/src/views/apps/PicstagramApp.vue
+++ b/frontend/src/views/apps/PicstagramApp.vue
@@ -17,6 +17,7 @@ import {
   Plus,
   Search,
   Send,
+  Share2,
   ShieldAlert,
   Trash2,
   UserRound,
@@ -58,6 +59,7 @@ import { useRouter } from 'vue-router'
 
 import picstagramIcon from '@/assets/img/app-icons/picstagram.webp'
 import { useMessageMediaStore } from '@/stores/messageMedia'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import { usePicstagramStore } from '@/stores/picstagram'
 import type { PhoneMedia } from '@/types/media'
@@ -453,6 +455,35 @@ function showPostActions(post: PicstagramPost): void {
   actionsOpen.value = true
 }
 
+function sharePost(post: PicstagramPost): void {
+  useEasyShareStore().open({
+    appId: 'picstagram',
+    copyText: `@${post.handle}: ${post.caption}`,
+    id: post.id,
+    imageUrl: post.media[0]?.url,
+    kind: 'post',
+    link: `skyphone://picstagram/post/${post.id}`,
+    subtitle: `@${post.handle}`,
+    title: post.caption || post.display_name,
+  })
+}
+
+function shareCurrentProfile(): void {
+  const profile = currentProfile.value
+  if (!profile) return
+  actionsOpen.value = false
+  useEasyShareStore().open({
+    appId: 'picstagram',
+    copyText: `@${profile.handle}`,
+    id: profile.id,
+    imageUrl: profile.avatar_url,
+    kind: 'profile',
+    link: `skyphone://picstagram/profile/${profile.id}`,
+    subtitle: `@${profile.handle}`,
+    title: profile.display_name,
+  })
+}
+
 function startReport(
   type: PicstagramReportTarget,
   id: string,
@@ -871,6 +902,9 @@ onBeforeUnmount(() => {
                 @click="openComments(selectedPost)"
                 ><MessageCircle
               /></k-link>
+              <k-link component="button" icon-only :aria-label="phone.t('Apps.easyShare.name')" @click="sharePost(selectedPost)">
+                <Share2 />
+              </k-link>
             </span>
             <k-link
               component="button"
@@ -1022,6 +1056,9 @@ onBeforeUnmount(() => {
                 @click="openComments(post)"
                 ><MessageCircle
               /></k-link>
+              <k-link component="button" icon-only :aria-label="phone.t('Apps.easyShare.name')" @click="sharePost(post)">
+                <Share2 />
+              </k-link>
             </span>
             <k-link
               component="button"
@@ -1811,6 +1848,7 @@ onBeforeUnmount(() => {
         </template>
       </k-actions-group>
       <k-actions-group v-else-if="currentProfile && !currentProfile.is_owner">
+        <k-actions-button @click="shareCurrentProfile">{{ phone.t('Apps.easyShare.name') }}</k-actions-button>
         <k-actions-button @click="reportCurrentProfile">{{
           t('report')
         }}</k-actions-button>
@@ -1819,6 +1857,7 @@ onBeforeUnmount(() => {
         }}</k-actions-button>
       </k-actions-group>
       <k-actions-group v-else-if="currentProfile?.is_owner">
+        <k-actions-button @click="shareCurrentProfile">{{ phone.t('Apps.easyShare.name') }}</k-actions-button>
         <k-actions-button @click="editProfileFromActions">{{
           t('editProfile')
         }}</k-actions-button>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 137bbda..ae80757 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -3076,6 +3076,9 @@ const featherTopics = [
 ]
 let featherOnboarded = true
 
+const easyShareHistory = []
+let easyShareVisibility = 'everyone'
+
 app.post('/api/:endpoint', (request, response) => {
   console.log(`[NUI] ${request.params.endpoint}`, request.body)
   const endpoint = request.params.endpoint
@@ -5490,6 +5493,58 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: [...grouped.values()] })
     return
   }
+  if (endpoint === 'easyshare:bootstrap') {
+    response.json({
+      success: true,
+      data: {
+        history: easyShareHistory,
+        pending: easyShareHistory.filter((item) =>
+          ['pending', 'transferring'].includes(item.status),
+        ),
+        targets: [
+          { distance: 2.4, id: 41, name: 'Mia Santos' },
+          { distance: 7.8, id: 72, name: 'Noah Walker' },
+        ],
+        visibility: easyShareVisibility,
+      },
+    })
+    return
+  }
+  if (endpoint === 'easyshare:set-visibility') {
+    easyShareVisibility = request.body.visibility
+    response.json({ success: true, data: { visibility: easyShareVisibility } })
+    return
+  }
+  if (endpoint === 'easyshare:request') {
+    const transfer = {
+      createdAt: Date.now(),
+      direction: 'outgoing',
+      id: `easyshare-${Date.now()}`,
+      otherName: request.body.targetId === 72 ? 'Noah Walker' : 'Mia Santos',
+      payload: request.body.payload,
+      progress: 0,
+      status: 'pending',
+    }
+    easyShareHistory.unshift(transfer)
+    response.json({ success: true, data: transfer })
+    return
+  }
+  if (endpoint === 'easyshare:respond' || endpoint === 'easyshare:cancel') {
+    const transfer = easyShareHistory.find((item) => item.id === request.body.id)
+    if (!transfer) {
+      response.json({ success: false, error: 'transfer_not_found' })
+      return
+    }
+    transfer.status =
+      endpoint === 'easyshare:cancel'
+        ? 'cancelled'
+        : request.body.accepted
+          ? 'completed'
+          : 'declined'
+    transfer.progress = transfer.status === 'completed' ? 100 : transfer.progress
+    response.json({ success: true, data: transfer })
+    return
+  }
   if (endpoint === 'messages:gifs') {
     const offset = Math.max(0, Number(request.body.offset ?? 0))
     const pageSize = 6
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index e83c384..ff6fc71 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -169,6 +169,17 @@ Config.Messages = {
     DeleteBatchSize = 20,
 }
 
+Config.EasyShare = {
+    Enabled = true,
+    DefaultVisibility = "everyone", -- everyone, contacts or hidden
+    MaximumDistance = 15.0,
+    HistoryLimit = 50,
+    PendingSeconds = 30,
+    TransferDurationMs = 3000,
+    RequestsPerMinute = 12,
+    PayloadMaxBytes = 24000,
+}
+
 Config.DarkChat = {
     AliasMaxLength = 32,
     BodyMaxLength = 2000,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 6a2bf49..a699032 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1015,6 +1015,29 @@ Locales["en"] = {
                 noResultsBody = "Try searching for a different word or phrase.", pin = "Pin note", unpin = "Unpin note",
                 deleteNote = "Delete note",
             },
+            easyShare = {
+                name = "EasyShare", incoming = "Incoming Share", recentChats = "Contacts and Chats",
+                destinations = "Share destinations", newMessage = "New Message", sentToChat = "Sent to chat.",
+                shareProfile = "Share Profile", chooseConversation = "Choose a conversation",
+                savedToNotes = "Saved to Notes.", copied = "Copied.", copy = "Copy", copyLink = "Copy Link",
+                nearby = "People Nearby", history = "Transfer History", noHistory = "No transfers yet.",
+                noNearby = "No visible players are nearby.", visibility = "Visibility", requestSent = "Waiting for acceptance...",
+                incomingFrom = "{name} wants to share", distance = "{distance} m away", cancel = "Cancel",
+                visibilityOptions = { everyone = "Everyone", contacts = "Contacts Only", hidden = "Receiving Off" },
+                status = {
+                    pending = "Waiting for acceptance", transferring = "Transferring", completed = "Completed",
+                    declined = "Declined", cancelled = "Cancelled", expired = "Expired", failed = "Failed",
+                    accepted = "Accepted",
+                },
+                errors = {
+                    disabled = "EasyShare is disabled.", invalid_payload = "This item cannot be shared.",
+                    invalid_target = "Choose a valid recipient.", target_unavailable = "That player is no longer available.",
+                    transfer_not_found = "That transfer is no longer available.", too_far = "The recipient is too far away.",
+                    not_owned = "This item no longer belongs to this phone.", payload_too_large = "This item is too large to share.",
+                    location_unavailable = "Your location is unavailable.", rate_limited = "Too many share requests. Try again shortly.",
+                    copy_failed = "Could not copy this item.", request_failed = "EasyShare is temporarily unavailable.",
+                },
+            },
             photos = {
                 name = "Gallery", count = "{count} items", loading = "Loading Gallery...",
                 emptyTitle = "No Photos or Videos", emptyBody = "Captures from Camera will appear here.",
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index b8ed4ca..42eaf2c 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -59,6 +59,7 @@ server_scripts {
     'source/server/calls.lua',
     'source/server/media.lua',
     'source/server/messages.lua',
+    'source/server/easyshare.lua',
     'source/server/darkchat.lua',
     'source/server/flare.lua',
     'source/server/notes.lua',
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 370fab0..0ca0bc8 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -192,6 +192,11 @@ local server_callbacks = {
     "messages:media",
     "messages:delete",
     "messages:gifs",
+    "easyshare:bootstrap",
+    "easyshare:set-visibility",
+    "easyshare:request",
+    "easyshare:respond",
+    "easyshare:cancel",
     "darkchat:bootstrap",
     "darkchat:update-profile",
     "darkchat:start",
@@ -508,6 +513,14 @@ RegisterNetEvent("sky_phone:mail:changed", function(data)
     SendNUIMessage({ type = "mail:changed", data = data })
 end)
 
+RegisterNetEvent("sky_phone:easyshare:changed", function(data)
+    SendNUIMessage({ type = "easyshare:changed", data = data })
+end)
+
+RegisterNetEvent("sky_phone:gallery:changed", function()
+    SendNUIMessage({ type = "gallery:changed" })
+end)
+
 RegisterNetEvent("sky_phone:mail:new", function(data)
     local mail_locale = get_locale().Nui.Apps.mail
     data.title = mail_locale.name
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 8877db2..dbaae41 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -2109,6 +2109,51 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_easyshare_preferences",
+        columns = {
+            {
+                name = "device_imei",
+                type = "CHAR(15) NOT NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            { name = "visibility", type = "ENUM('everyone','contacts','hidden') NOT NULL DEFAULT 'everyone'" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "device_imei",
+        foreignKeys = {
+            { column = "device_imei", references = "`sky_phone_devices` (`imei`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
+    {
+        name = "sky_phone_easyshare_transfers",
+        columns = {
+            { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "sender_imei", type = "CHAR(15) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "recipient_imei", type = "CHAR(15) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "sender_name", type = "VARCHAR(160) NOT NULL" },
+            { name = "recipient_name", type = "VARCHAR(160) NOT NULL" },
+            { name = "content_type", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_general_ci" },
+            { name = "payload", type = "LONGTEXT NOT NULL" },
+            { name = "status", type = "ENUM('pending','transferring','completed','declined','cancelled','expired','failed') NOT NULL DEFAULT 'pending'" },
+            { name = "progress", type = "TINYINT UNSIGNED NOT NULL DEFAULT 0" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+            { name = "completed_at", type = "DATETIME NULL" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_easyshare_sender", columns = "(`sender_imei`, `created_at`)" },
+            { name = "idx_sky_phone_easyshare_recipient", columns = "(`recipient_imei`, `created_at`)" },
+        },
+        foreignKeys = {
+            { column = "sender_imei", references = "`sky_phone_devices` (`imei`) ON DELETE CASCADE" },
+            { column = "recipient_imei", references = "`sky_phone_devices` (`imei`) ON DELETE CASCADE" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
 }
 
 Bridge.Database.Migrate("sky_phone", schema)
diff --git a/sky_phone/source/server/easyshare.lua b/sky_phone/source/server/easyshare.lua
new file mode 100644
index 0000000..16181d5
--- /dev/null
+++ b/sky_phone/source/server/easyshare.lua
@@ -0,0 +1,537 @@
+Bridge.Database.AfterMigration("sky_phone", function()
+local active_transfers = {}
+local valid_kinds = {
+    contact = true,
+    document = true,
+    link = true,
+    location = true,
+    note = true,
+    photo = true,
+    playlist = true,
+    post = true,
+    profile = true,
+    text = true,
+    track = true,
+    video = true,
+}
+local valid_apps = {
+    camera = true,
+    crewlink = true,
+    darkchat = true,
+    feather = true,
+    flare = true,
+    fliptok = true,
+    map = true,
+    messages = true,
+    music = true,
+    notes = true,
+    phone = true,
+    photos = true,
+    picstagram = true,
+}
+local valid_visibilities = { contacts = true, everyone = true, hidden = true }
+
+local function uuid()
+    local rows = Bridge.Database.Query("SELECT UUID() AS `id`", {})
+    local id = rows[1] and rows[1].id
+    if type(id) ~= "string" then
+        error("[sky_phone] Database did not generate an EasyShare id.")
+    end
+    return id
+end
+
+local function trim(value, maximum)
+    if type(value) ~= "string" then
+        return nil
+    end
+    local result = value:match("^%s*(.-)%s*$")
+    if result == "" or #result > maximum then
+        return nil
+    end
+    return result
+end
+
+local function current_device(source)
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, error_response
+    end
+    local device = SkyPhone.LoadDevice(session.imei)
+    if not device then
+        return nil, { success = false, error = "device_not_found" }
+    end
+    return device
+end
+
+local function owner_condition(device, alias)
+    local prefix = alias and ("`" .. alias .. "`.") or ""
+    if device.account_id then
+        return prefix .. "`account_id` = ?", { tonumber(device.account_id) }
+    end
+    return prefix .. "`account_id` IS NULL AND " .. prefix .. "`device_imei` = ?", { device.imei }
+end
+
+local function append_params(target, values)
+    for _, value in ipairs(values) do
+        target[#target + 1] = value
+    end
+end
+
+local function display_name(source)
+    local first = trim(Bridge.Framework.GetFirstname(source), 80)
+    local last = trim(Bridge.Framework.GetLastname(source), 80)
+    local name = table.concat({ first or "", last or "" }, " "):match("^%s*(.-)%s*$")
+    return name ~= "" and name or GetPlayerName(source) or ("Player %s"):format(source)
+end
+
+local function visibility_for(imei)
+    local rows = Bridge.Database.Query([[ 
+        SELECT `visibility` FROM `sky_phone_easyshare_preferences`
+        WHERE `device_imei` = ? LIMIT 1
+    ]], { imei })
+    local visibility = rows[1] and rows[1].visibility or Config.EasyShare.DefaultVisibility
+    return valid_visibilities[visibility] and visibility or "hidden"
+end
+
+local function distance_between(left_source, right_source)
+    if GetPlayerRoutingBucket(left_source) ~= GetPlayerRoutingBucket(right_source) then
+        return nil
+    end
+    local left_ped = GetPlayerPed(left_source)
+    local right_ped = GetPlayerPed(right_source)
+    if left_ped == 0 or right_ped == 0 then
+        return nil
+    end
+    return #(GetEntityCoords(left_ped) - GetEntityCoords(right_ped))
+end
+
+local function visible_to(target_device, sender_device, visibility)
+    if visibility == "everyone" then
+        return true
+    end
+    if visibility ~= "contacts" or not sender_device.phone_number then
+        return false
+    end
+    local condition, owner_params = owner_condition(target_device)
+    local params = { sender_device.phone_number }
+    append_params(params, owner_params)
+    local rows = Bridge.Database.Query(([[
+        SELECT `id` FROM `sky_phone_contacts`
+        WHERE `phone_number` = ? AND %s LIMIT 1
+    ]]):format(condition), params)
+    return rows[1] ~= nil
+end
+
+local function target_state(sender_source, target_source, sender_device)
+    if target_source == sender_source then
+        return nil
+    end
+    local target_device = current_device(target_source)
+    if not target_device then
+        return nil
+    end
+    local visibility = visibility_for(target_device.imei)
+    if not visible_to(target_device, sender_device, visibility) then
+        return nil
+    end
+    local distance = distance_between(sender_source, target_source)
+    if not distance or distance > Config.EasyShare.MaximumDistance then
+        return nil
+    end
+    return { device = target_device, distance = distance }
+end
+
+local function nearby_targets(source, device)
+    local targets = {}
+    for _, target in ipairs(Bridge.Framework.GetPlayers()) do
+        local target_source = tonumber(target)
+        if target_source then
+            local state = target_state(source, target_source, device)
+            if state then
+                targets[#targets + 1] = {
+                    id = target_source,
+                    name = display_name(target_source),
+                    distance = math.floor(state.distance * 10 + 0.5) / 10,
+                }
+            end
+        end
+    end
+    table.sort(targets, function(left, right)
+        return left.distance < right.distance
+    end)
+    return targets
+end
+
+local function sanitize_payload(source, device, data)
+    if type(data) ~= "table" or not valid_kinds[data.kind] then
+        return nil, "invalid_payload"
+    end
+    local title = trim(data.title, 160)
+    local copy_text = trim(data.copyText, 4000)
+    local app_id = trim(data.appId, 48)
+    if not title or not copy_text or not app_id or not valid_apps[app_id] then
+        return nil, "invalid_payload"
+    end
+    local payload = {
+        appId = app_id,
+        kind = data.kind,
+        title = title,
+        copyText = copy_text,
+    }
+    if type(data.id) == "string" and #data.id <= 128 then
+        payload.id = data.id
+    elseif type(data.id) == "number" and data.id > 0 and data.id == math.floor(data.id) then
+        payload.id = data.id
+    end
+    if type(data.subtitle) == "string" and #data.subtitle <= 240 then
+        payload.subtitle = data.subtitle
+    end
+    if type(data.link) == "string" and #data.link <= 500 and data.link:match("^[%w_%-]+://") then
+        payload.link = data.link
+    end
+
+    local condition, owner_params = owner_condition(device)
+    if data.kind == "contact" and type(payload.id) == "string" then
+        local params = { payload.id }
+        append_params(params, owner_params)
+        local rows = Bridge.Database.Query(([[
+            SELECT `name`, `phone_number`, `organization`, `notes`
+            FROM `sky_phone_contacts` WHERE `contact_id` = ? AND %s LIMIT 1
+        ]]):format(condition), params)
+        local contact = rows[1]
+        if not contact then
+            return nil, "not_owned"
+        end
+        payload.title = contact.name
+        payload.subtitle = contact.phone_number
+        payload.copyText = ("%s\n%s"):format(contact.name, contact.phone_number)
+        payload.meta = {
+            name = contact.name,
+            notes = contact.notes,
+            organization = contact.organization,
+            phoneNumber = contact.phone_number,
+        }
+    elseif data.kind == "note" and type(payload.id) == "string" then
+        local params = { payload.id }
+        append_params(params, owner_params)
+        local rows = Bridge.Database.Query(([[
+            SELECT `title`, `body` FROM `sky_phone_notes`
+            WHERE `id` = ? AND %s LIMIT 1
+        ]]):format(condition), params)
+        local note = rows[1]
+        if not note then
+            return nil, "not_owned"
+        end
+        payload.title = note.title ~= "" and note.title or title
+        payload.copyText = note.body
+        payload.meta = { body = note.body, title = note.title }
+    elseif data.kind == "photo" or data.kind == "video" then
+        local url, media_error = SkyPhoneMedia.ResolveOwnedMedia(source, payload.id, data.kind)
+        if not url then
+            return nil, media_error or "not_owned"
+        end
+        local media_params = { tonumber(payload.id) }
+        append_params(media_params, owner_params)
+        local media_rows = Bridge.Database.Query(([[
+            SELECT `remote_id` FROM `sky_phone_media`
+            WHERE `id` = ? AND %s LIMIT 1
+        ]]):format(condition), media_params)
+        if not media_rows[1] then
+            return nil, "not_owned"
+        end
+        payload.imageUrl = url
+        payload.meta = { remoteId = media_rows[1].remote_id, url = url }
+    elseif data.kind == "location" then
+        local ped = GetPlayerPed(source)
+        if ped == 0 then
+            return nil, "location_unavailable"
+        end
+        local coords = GetEntityCoords(ped)
+        payload.meta = { x = coords.x, y = coords.y, z = coords.z }
+    elseif type(data.imageUrl) == "string" and #data.imageUrl <= 2048 and data.imageUrl:match("^https://") then
+        payload.imageUrl = data.imageUrl
+    end
+
+    local encoded = json.encode(payload)
+    if #encoded > Config.EasyShare.PayloadMaxBytes then
+        return nil, "payload_too_large"
+    end
+    return payload, nil, encoded
+end
+
+local function transfer_for_source(transfer, source)
+    local incoming = transfer.recipient_source == source
+    return {
+        id = transfer.id,
+        direction = incoming and "incoming" or "outgoing",
+        otherName = incoming and transfer.sender_name or transfer.recipient_name,
+        payload = transfer.payload,
+        progress = transfer.progress,
+        status = transfer.status,
+        createdAt = transfer.created_at,
+    }
+end
+
+local function notify_transfer(transfer)
+    TriggerClientEvent("sky_phone:easyshare:changed", transfer.sender_source, {
+        transfer = transfer_for_source(transfer, transfer.sender_source),
+    })
+    TriggerClientEvent("sky_phone:easyshare:changed", transfer.recipient_source, {
+        transfer = transfer_for_source(transfer, transfer.recipient_source),
+    })
+end
+
+local function persist_state(transfer)
+    Bridge.Database.Query([[ 
+        UPDATE `sky_phone_easyshare_transfers`
+        SET `status` = ?, `progress` = ?, `updated_at` = CURRENT_TIMESTAMP,
+            `completed_at` = IF(? IN ('completed','declined','cancelled','expired','failed'), CURRENT_TIMESTAMP, `completed_at`)
+        WHERE `id` = ?
+    ]], { transfer.status, transfer.progress, transfer.status, transfer.id })
+end
+
+local function finish_transfer(transfer, status)
+    if transfer.status ~= "pending" and transfer.status ~= "transferring" then
+        return
+    end
+    transfer.status = status
+    transfer.progress = status == "completed" and 100 or transfer.progress
+    persist_state(transfer)
+    notify_transfer(transfer)
+    active_transfers[transfer.id] = nil
+end
+
+local function apply_received_payload(transfer)
+    local device = SkyPhone.LoadDevice(transfer.recipient_imei)
+    if not device then
+        return false
+    end
+    local account_id = device.account_id and tonumber(device.account_id) or nil
+    local meta = transfer.payload.meta or {}
+    if transfer.payload.kind == "contact" then
+        Bridge.Database.Query([[ 
+            INSERT INTO `sky_phone_contacts`
+                (`id`, `contact_id`, `account_id`, `device_imei`, `name`, `notes`, `organization`, `phone_number`)
+            VALUES (?, ?, ?, ?, ?, NULLIF(?, ''), NULLIF(?, ''), ?)
+        ]], {
+            uuid(), uuid(), account_id, account_id and nil or device.imei,
+            meta.name, meta.notes or "", meta.organization or "", meta.phoneNumber,
+        })
+        TriggerClientEvent("sky_phone:contacts:changed", transfer.recipient_source, {})
+    elseif transfer.payload.kind == "note" then
+        Bridge.Database.Query([[ 
+            INSERT INTO `sky_phone_notes`
+                (`id`, `account_id`, `device_imei`, `title`, `body`, `pinned`)
+            VALUES (?, ?, ?, ?, ?, 0)
+        ]], { uuid(), account_id, account_id and nil or device.imei, meta.title or "", meta.body or "" })
+        if account_id then
+            SkyPhone.RefreshAccount(account_id)
+        else
+            SkyPhone.RefreshDevice(device.imei)
+        end
+    elseif transfer.payload.kind == "location" then
+        Bridge.Database.Query([[ 
+            INSERT INTO `sky_phone_map_markers`
+                (`id`, `device_imei`, `label`, `color`, `position_x`, `position_y`, `position_z`)
+            VALUES (?, ?, ?, 'blue', ?, ?, ?)
+        ]], { uuid(), device.imei, transfer.payload.title:sub(1, 40), meta.x, meta.y, meta.z })
+    elseif transfer.payload.kind == "photo" or transfer.payload.kind == "video" then
+        Bridge.Database.Query([[ 
+            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`)
+            VALUES (?, ?, ?, ?, ?)
+        ]], {
+            account_id, account_id and nil or device.imei, meta.url, meta.remoteId, transfer.payload.kind,
+        })
+        TriggerClientEvent("sky_phone:gallery:changed", transfer.recipient_source, {})
+    end
+    return true
+end
+
+local function advance_transfer(id)
+    local transfer = active_transfers[id]
+    if not transfer or transfer.status ~= "transferring" then
+        return
+    end
+    local distance = distance_between(transfer.sender_source, transfer.recipient_source)
+    if not distance or distance > Config.EasyShare.MaximumDistance then
+        finish_transfer(transfer, "failed")
+        return
+    end
+    transfer.progress = math.min(100, transfer.progress + 10)
+    persist_state(transfer)
+    notify_transfer(transfer)
+    if transfer.progress >= 100 then
+        if apply_received_payload(transfer) then
+            finish_transfer(transfer, "completed")
+        else
+            finish_transfer(transfer, "failed")
+        end
+        return
+    end
+    SetTimeout(math.max(100, math.floor(Config.EasyShare.TransferDurationMs / 10)), function()
+        advance_transfer(id)
+    end)
+end
+
+local function row_transfer(row, current_imei)
+    local decoded = json.decode(row.payload)
+    return {
+        id = row.id,
+        direction = row.recipient_imei == current_imei and "incoming" or "outgoing",
+        otherName = row.recipient_imei == current_imei and row.sender_name or row.recipient_name,
+        payload = decoded,
+        progress = tonumber(row.progress) or 0,
+        status = row.status,
+        createdAt = (tonumber(row.created_at_unix) or 0) * 1000,
+    }
+end
+
+local function history(device)
+    local rows = Bridge.Database.Query([[ 
+        SELECT `id`, `sender_imei`, `recipient_imei`, `sender_name`, `recipient_name`,
+            `payload`, `status`, `progress`, UNIX_TIMESTAMP(`created_at`) AS `created_at_unix`
+        FROM `sky_phone_easyshare_transfers`
+        WHERE `sender_imei` = ? OR `recipient_imei` = ?
+        ORDER BY `created_at` DESC LIMIT ?
+    ]], { device.imei, device.imei, Config.EasyShare.HistoryLimit })
+    local result = {}
+    for index, row in ipairs(rows) do
+        result[index] = row_transfer(row, device.imei)
+    end
+    return result
+end
+
+Bridge.Callbacks.Register("sky_phone:easyshare:bootstrap", function(source)
+    if not Config.EasyShare.Enabled then
+        return { success = false, error = "disabled" }
+    end
+    local device, error_response = current_device(source)
+    if not device then
+        return error_response
+    end
+    local pending = {}
+    for _, transfer in pairs(active_transfers) do
+        if transfer.sender_source == source or transfer.recipient_source == source then
+            pending[#pending + 1] = transfer_for_source(transfer, source)
+        end
+    end
+    return {
+        success = true,
+        data = {
+            history = history(device),
+            pending = pending,
+            targets = nearby_targets(source, device),
+            visibility = visibility_for(device.imei),
+        },
+    }
+end)
+
+Bridge.Callbacks.Register("sky_phone:easyshare:set-visibility", function(source, data)
+    local device, error_response = current_device(source)
+    if not device then
+        return error_response
+    end
+    local visibility = type(data) == "table" and data.visibility or nil
+    if not valid_visibilities[visibility] then
+        return { success = false, error = "invalid_visibility" }
+    end
+    Bridge.Database.Query([[ 
+        INSERT INTO `sky_phone_easyshare_preferences` (`device_imei`, `visibility`)
+        VALUES (?, ?) ON DUPLICATE KEY UPDATE `visibility` = VALUES(`visibility`)
+    ]], { device.imei, visibility })
+    return { success = true, data = { visibility = visibility } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:easyshare:request", function(source, data)
+    if not SkyPhone.AllowOperation(source, "easyshare_request", Config.EasyShare.RequestsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    local sender_device, error_response = current_device(source)
+    if not sender_device then
+        return error_response
+    end
+    local target_source = type(data) == "table" and tonumber(data.targetId) or nil
+    if not target_source or target_source ~= math.floor(target_source) then
+        return { success = false, error = "invalid_target" }
+    end
+    local target = target_state(source, target_source, sender_device)
+    if not target then
+        return { success = false, error = "target_unavailable" }
+    end
+    local payload, payload_error, encoded = sanitize_payload(source, sender_device, data.payload)
+    if not payload then
+        return { success = false, error = payload_error }
+    end
+    local id = uuid()
+    local transfer = {
+        id = id,
+        sender_source = source,
+        recipient_source = target_source,
+        sender_imei = sender_device.imei,
+        recipient_imei = target.device.imei,
+        sender_name = display_name(source),
+        recipient_name = display_name(target_source),
+        payload = payload,
+        progress = 0,
+        status = "pending",
+        created_at = os.time() * 1000,
+    }
+    Bridge.Database.Query([[ 
+        INSERT INTO `sky_phone_easyshare_transfers`
+            (`id`, `sender_imei`, `recipient_imei`, `sender_name`, `recipient_name`, `content_type`, `payload`, `status`, `progress`)
+        VALUES (?, ?, ?, ?, ?, ?, ?, 'pending', 0)
+    ]], { id, sender_device.imei, target.device.imei, transfer.sender_name, transfer.recipient_name, payload.kind, encoded })
+    active_transfers[id] = transfer
+    notify_transfer(transfer)
+    SetTimeout(Config.EasyShare.PendingSeconds * 1000, function()
+        local current = active_transfers[id]
+        if current and current.status == "pending" then
+            finish_transfer(current, "expired")
+        end
+    end)
+    return { success = true, data = transfer_for_source(transfer, source) }
+end)
+
+Bridge.Callbacks.Register("sky_phone:easyshare:respond", function(source, data)
+    local id = type(data) == "table" and data.id or nil
+    local transfer = type(id) == "string" and active_transfers[id] or nil
+    if not transfer or transfer.recipient_source ~= source or transfer.status ~= "pending" or type(data.accepted) ~= "boolean" then
+        return { success = false, error = "transfer_not_found" }
+    end
+    if not data.accepted then
+        finish_transfer(transfer, "declined")
+        return { success = true, data = transfer_for_source(transfer, source) }
+    end
+    local distance = distance_between(transfer.sender_source, transfer.recipient_source)
+    if not distance or distance > Config.EasyShare.MaximumDistance then
+        finish_transfer(transfer, "failed")
+        return { success = false, error = "too_far" }
+    end
+    transfer.status = "transferring"
+    persist_state(transfer)
+    notify_transfer(transfer)
+    SetTimeout(math.max(100, math.floor(Config.EasyShare.TransferDurationMs / 10)), function()
+        advance_transfer(id)
+    end)
+    return { success = true, data = transfer_for_source(transfer, source) }
+end)
+
+Bridge.Callbacks.Register("sky_phone:easyshare:cancel", function(source, data)
+    local id = type(data) == "table" and data.id or nil
+    local transfer = type(id) == "string" and active_transfers[id] or nil
+    if not transfer or (transfer.sender_source ~= source and transfer.recipient_source ~= source) then
+        return { success = false, error = "transfer_not_found" }
+    end
+    finish_transfer(transfer, "cancelled")
+    return { success = true, data = transfer_for_source(transfer, source) }
+end)
+
+AddEventHandler("playerDropped", function()
+    local dropped_source = source
+    for _, transfer in pairs(active_transfers) do
+        if transfer.sender_source == dropped_source or transfer.recipient_source == dropped_source then
+            finish_transfer(transfer, "failed")
+        end
+    end
+end)
+end)
diff --git a/sky_phone/source/server/media.lua b/sky_phone/source/server/media.lua
index 7f9341a..c6318b3 100644
--- a/sky_phone/source/server/media.lua
+++ b/sky_phone/source/server/media.lua
@@ -580,19 +580,25 @@ RegisterNetEvent("sky_phone:media:delete", function(data)
         delete_result(src, correlation_id, false, "not_found", media_id)
         return
     end
-    if pending_deletes[media_id] then
+    if pending_deletes[row.remote_id] then
         delete_result(src, correlation_id, false, "operation_in_progress", media_id)
         return
     end
-    pending_deletes[media_id] = src
-    local deleted, delete_error = delete_remote_file(row.remote_id)
-    if not deleted then
-        pending_deletes[media_id] = nil
-        delete_result(src, correlation_id, false, delete_error, media_id)
-        return
+    pending_deletes[row.remote_id] = src
+    local references = Bridge.Database.Query(
+        "SELECT COUNT(*) AS `count` FROM `sky_phone_media` WHERE `remote_id` = ?",
+        { row.remote_id }
+    )
+    if (tonumber(references[1] and references[1].count) or 0) <= 1 then
+        local deleted, delete_error = delete_remote_file(row.remote_id)
+        if not deleted then
+            pending_deletes[row.remote_id] = nil
+            delete_result(src, correlation_id, false, delete_error, media_id)
+            return
+        end
     end
     Bridge.Database.Query(("DELETE FROM `sky_phone_media` WHERE `id` = ? AND %s"):format(condition), query_params)
-    pending_deletes[media_id] = nil
+    pending_deletes[row.remote_id] = nil
     delete_result(src, correlation_id, true, nil, media_id)
 end)
 
@@ -606,8 +612,18 @@ end
 
 function SkyPhoneMedia.CleanupRemoteFiles(rows)
     CreateThread(function()
+        local checked = {}
         for _, row in ipairs(rows) do
-            local deleted, delete_error = delete_remote_file(row.remote_id)
+            local references = checked[row.remote_id] and { { count = 1 } } or Bridge.Database.Query(
+                "SELECT COUNT(*) AS `count` FROM `sky_phone_media` WHERE `remote_id` = ?",
+                { row.remote_id }
+            )
+            checked[row.remote_id] = true
+            local in_use = (tonumber(references[1] and references[1].count) or 0) > 0
+            local deleted, delete_error = true, nil
+            if not in_use then
+                deleted, delete_error = delete_remote_file(row.remote_id)
+            end
             if not deleted then
                 Bridge.Debug(
                     "warn",

From 0f282eef0c3c42594c5c4e4af1c513b734a05a1d Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 16:18:46 +0200
Subject: [PATCH 06/63] FIX - refine Companies request interface

---
 frontend/src/views/apps/CompaniesApp.vue | 539 ++++++++++-------------
 1 file changed, 236 insertions(+), 303 deletions(-)

diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index 46176eb..3e2de93 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -11,6 +11,7 @@ import {
   kChip,
   kDialog,
   kDialogButton,
+  kGlass,
   kIcon,
   kLink,
   kList,
@@ -41,7 +42,6 @@ import {
   BriefcaseBusiness,
   Building2,
   Check,
-  CheckCircle2,
   CircleAlert,
   ClipboardList,
   Clock3,
@@ -62,7 +62,15 @@ import {
   UsersRound,
   X,
 } from 'lucide-vue-next'
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useCallsStore } from '@/stores/calls'
@@ -82,7 +90,6 @@ import type {
   CompanyRequestSummary,
   CompanyService,
   CompanySummary,
-  CompanyWorkFilter,
 } from '@/types/companies'
 import type { PhoneMedia } from '@/types/media'
 import { nuiCall } from '@/utils/nui'
@@ -132,14 +139,9 @@ const screen = ref<CompaniesScreen>('root')
 const requestOrigin = ref<RequestOrigin>('customer')
 const search = ref('')
 const selectedCategory = ref<string | null>(null)
-const onlyAvailable = ref(false)
-const onlyWithLocation = ref(false)
-const onlyAcceptingRequests = ref(false)
-const directorySort = ref<CompanyDirectoryFilters['sort']>('relevance')
 const requestList = ref<CompanyRequestList>('open')
-const workFilter = ref<CompanyWorkFilter>('new')
 const requestSheetOpened = ref(false)
-const requestConfirmOpened = ref(false)
+const requestSheetContent = ref<HTMLElement | null>(null)
 const requestServiceId = ref('')
 const requestSubject = ref('')
 const requestDescription = ref('')
@@ -170,23 +172,18 @@ let searchTimer: ReturnType<typeof setTimeout> | undefined
 let toastTimer: ReturnType<typeof setTimeout> | undefined
 
 const directoryFilters = computed<CompanyDirectoryFilters>(() => ({
-  acceptsRequests: onlyAcceptingRequests.value,
-  availability: onlyAvailable.value ? 'available' : null,
+  acceptsRequests: false,
+  availability: null,
   categoryId: selectedCategory.value,
-  hasLocation: onlyWithLocation.value,
+  hasLocation: false,
   search: search.value.trim(),
-  sort: directorySort.value,
+  sort: 'relevance',
 }))
 const availableCompanies = computed(() =>
   companies.directory.filter((company) => company.availability === 'available'),
 )
 const filtersActive = computed(
-  () =>
-    Boolean(search.value.trim()) ||
-    Boolean(selectedCategory.value) ||
-    onlyAvailable.value ||
-    onlyWithLocation.value ||
-    onlyAcceptingRequests.value,
+  () => Boolean(search.value.trim()) || Boolean(selectedCategory.value),
 )
 const activeCompany = computed(() => companies.company)
 const workCompany = computed(() => companies.workContext?.company ?? null)
@@ -196,11 +193,6 @@ const managerLogoUrl = computed(
 const managerCoverUrl = computed(
   () => selectedCoverMedia.value?.url ?? workCompany.value?.coverUrl ?? null,
 )
-const selectedService = computed(() =>
-  activeCompany.value?.services.find(
-    (service) => service.id === requestServiceId.value,
-  ),
-)
 const requestProgress = computed(() => {
   if (!requestServiceId.value) return 0.25
   if (!requestSubject.value.trim() || !requestDescription.value.trim())
@@ -237,13 +229,6 @@ const availabilityValues: CompanyAvailability[] = [
   'busy',
   'closed',
 ]
-const workFilters: CompanyWorkFilter[] = [
-  'new',
-  'assigned',
-  'in_progress',
-  'waiting_customer',
-  'completed',
-]
 const weekdayKeys = [
   'monday',
   'tuesday',
@@ -384,14 +369,6 @@ function requestSubtitle(request: CompanyRequestSummary): string {
   return parts.join(' · ')
 }
 
-function assignmentLabel(
-  value: CompanyRequestSummary['assignedLabel'],
-): string {
-  return value
-    ? phone.t(`Apps.companies.assignmentLabels.${value}`)
-    : phone.t('Apps.companies.work.unassigned')
-}
-
 function messageAuthorLabel(value: 'company' | 'customer' | 'you'): string {
   return phone.t(`Apps.companies.messageAuthors.${value}`)
 }
@@ -416,10 +393,6 @@ function eventLabel(event: CompanyRequestEvent): string {
 function resetDirectoryFilters(): void {
   search.value = ''
   selectedCategory.value = null
-  onlyAvailable.value = false
-  onlyWithLocation.value = false
-  onlyAcceptingRequests.value = false
-  directorySort.value = 'relevance'
   void companies.loadCompanies(directoryFilters.value)
 }
 
@@ -442,12 +415,7 @@ async function selectTab(tab: CompaniesTab): Promise<void> {
     await companies.loadCompanies(directoryFilters.value)
   }
   if (tab === 'requests') await companies.loadMyRequests(requestList.value)
-  if (tab === 'work') {
-    const loaded = await companies.loadWorkContext()
-    if (loaded && companies.workContext?.authorized) {
-      await companies.loadWorkQueue(workFilter.value)
-    }
-  }
+  if (tab === 'work') await companies.loadWorkContext()
 }
 
 async function openCompany(companyId: string): Promise<void> {
@@ -576,7 +544,6 @@ async function submitRequest(): Promise<void> {
     serviceId: requestServiceId.value,
     subject: requestSubject.value.trim(),
   })
-  requestConfirmOpened.value = false
   if (!response.success || !response.data?.request) {
     if (response.error === 'revision_conflict')
       conflictDialogOpened.value = true
@@ -933,24 +900,15 @@ async function reloadConflict(): Promise<void> {
 }
 
 watch(search, queueDirectoryLoad)
-watch(
-  [
-    selectedCategory,
-    onlyAvailable,
-    onlyWithLocation,
-    onlyAcceptingRequests,
-    directorySort,
-  ],
-  () => void companies.loadCompanies(directoryFilters.value),
-)
+watch(selectedCategory, () => companies.loadCompanies(directoryFilters.value))
 watch(requestList, () => {
   if (activeTab.value === 'requests')
     void companies.loadMyRequests(requestList.value)
 })
-watch(workFilter, () => {
-  if (activeTab.value === 'work' && companies.workContext?.authorized) {
-    void companies.loadWorkQueue(workFilter.value)
-  }
+watch(requestSheetOpened, async (opened) => {
+  if (!opened) return
+  await nextTick()
+  requestSheetContent.value?.scrollTo({ top: 0 })
 })
 watch(
   () => route.query.requestId,
@@ -1098,50 +1056,21 @@ onBeforeUnmount(() => {
         </k-chip>
       </div>
 
-      <k-card class="companies-filter-card" :content-wrap="false">
-        <k-list nested>
-          <k-list-item
-            :title="phone.t('Apps.companies.directory.availableNow')"
-            :subtitle="phone.t('Apps.companies.directory.availableNowHint')"
-          >
-            <template #after>
-              <k-toggle
-                :checked="onlyAvailable"
-                :aria-label="phone.t('Apps.companies.directory.availableNow')"
-                @change="onlyAvailable = !onlyAvailable"
-              />
-            </template>
-          </k-list-item>
-          <k-list-item :title="phone.t('Apps.companies.directory.moreFilters')">
-            <template #after>
-              <div class="companies-inline-chips">
-                <k-chip
-                  component="button"
-                  type="button"
-                  :class="{ 'is-selected': onlyWithLocation }"
-                  @click="onlyWithLocation = !onlyWithLocation"
-                >
-                  {{ phone.t('Apps.companies.directory.hasLocation') }}
-                </k-chip>
-                <k-chip
-                  component="button"
-                  type="button"
-                  :class="{ 'is-selected': onlyAcceptingRequests }"
-                  @click="onlyAcceptingRequests = !onlyAcceptingRequests"
-                >
-                  {{ phone.t('Apps.companies.directory.acceptsRequests') }}
-                </k-chip>
-              </div>
-            </template>
-          </k-list-item>
-        </k-list>
-      </k-card>
-
-      <div v-if="companies.directoryLoading" class="companies-state">
+      <k-block
+        v-if="companies.directoryLoading"
+        inset
+        strong
+        class="companies-state"
+      >
         <k-preloader />
         <span>{{ phone.t('Apps.companies.loading.directory') }}</span>
-      </div>
-      <div v-else-if="companies.directoryError" class="companies-state">
+      </k-block>
+      <k-block
+        v-else-if="companies.directoryError"
+        inset
+        strong
+        class="companies-state"
+      >
         <CircleAlert :size="34" />
         <strong>{{ phone.t('Apps.companies.states.directoryError') }}</strong>
         <p>{{ errorText(companies.directoryError) }}</p>
@@ -1149,8 +1078,13 @@ onBeforeUnmount(() => {
           <RefreshCw :size="16" />
           {{ phone.t('Apps.companies.tryAgain') }}
         </k-button>
-      </div>
-      <div v-else-if="!companies.directory.length" class="companies-state">
+      </k-block>
+      <k-block
+        v-else-if="!companies.directory.length"
+        inset
+        strong
+        class="companies-state"
+      >
         <Building2 :size="36" />
         <strong>
           {{
@@ -1173,9 +1107,9 @@ onBeforeUnmount(() => {
         <k-button v-if="filtersActive" rounded @click="resetDirectoryFilters">
           {{ phone.t('Apps.companies.directory.resetFilters') }}
         </k-button>
-      </div>
+      </k-block>
       <template v-else>
-        <template v-if="availableCompanies.length && !onlyAvailable">
+        <template v-if="availableCompanies.length">
           <k-block-title>{{
             phone.t('Apps.companies.directory.availableSection')
           }}</k-block-title>
@@ -1286,19 +1220,34 @@ onBeforeUnmount(() => {
         </k-segmented>
       </div>
 
-      <div v-if="companies.myRequestsLoading" class="companies-state">
+      <k-block
+        v-if="companies.myRequestsLoading"
+        inset
+        strong
+        class="companies-state"
+      >
         <k-preloader />
         <span>{{ phone.t('Apps.companies.loading.requests') }}</span>
-      </div>
-      <div v-else-if="companies.myRequestsError" class="companies-state">
+      </k-block>
+      <k-block
+        v-else-if="companies.myRequestsError"
+        inset
+        strong
+        class="companies-state"
+      >
         <CircleAlert :size="34" />
         <strong>{{ phone.t('Apps.companies.states.requestsError') }}</strong>
         <p>{{ errorText(companies.myRequestsError) }}</p>
         <k-button rounded @click="companies.loadMyRequests(requestList)">
           {{ phone.t('Apps.companies.tryAgain') }}
         </k-button>
-      </div>
-      <div v-else-if="!companies.myRequests.length" class="companies-state">
+      </k-block>
+      <k-block
+        v-else-if="!companies.myRequests.length"
+        inset
+        strong
+        class="companies-state"
+      >
         <ClipboardList :size="36" />
         <strong>{{
           phone.t(
@@ -1313,7 +1262,7 @@ onBeforeUnmount(() => {
         >
           {{ phone.t('Apps.companies.requests.findCompany') }}
         </k-button>
-      </div>
+      </k-block>
       <k-list v-else inset strong class="company-request-list">
         <k-list-item
           v-for="item in companies.myRequests"
@@ -1359,26 +1308,38 @@ onBeforeUnmount(() => {
       v-else-if="screen === 'root' && activeTab === 'work'"
       class="companies-content companies-work"
     >
-      <div v-if="companies.workContextLoading" class="companies-state">
+      <k-block
+        v-if="companies.workContextLoading"
+        inset
+        strong
+        class="companies-state"
+      >
         <k-preloader />
         <span>{{ phone.t('Apps.companies.loading.work') }}</span>
-      </div>
-      <div v-else-if="companies.workContextError" class="companies-state">
+      </k-block>
+      <k-block
+        v-else-if="companies.workContextError"
+        inset
+        strong
+        class="companies-state"
+      >
         <CircleAlert :size="34" />
         <strong>{{ phone.t('Apps.companies.states.workError') }}</strong>
         <p>{{ errorText(companies.workContextError) }}</p>
         <k-button rounded @click="selectTab('work')">
           {{ phone.t('Apps.companies.tryAgain') }}
         </k-button>
-      </div>
-      <div
+      </k-block>
+      <k-block
         v-else-if="!companies.workContext?.authorized"
+        inset
+        strong
         class="companies-state"
       >
         <BriefcaseBusiness :size="38" />
         <strong>{{ phone.t('Apps.companies.work.notAuthorized') }}</strong>
         <p>{{ phone.t('Apps.companies.work.notAuthorizedBody') }}</p>
-      </div>
+      </k-block>
       <template v-else-if="companies.workContext && workCompany">
         <k-card class="work-identity-card">
           <span class="company-logo company-logo--large">
@@ -1454,98 +1415,25 @@ onBeforeUnmount(() => {
           phone.t('Apps.companies.work.overview')
         }}</k-block-title>
         <div class="work-metrics">
-          <k-card>
+          <k-glass :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.new }}</strong>
             <span>{{ phone.t('Apps.companies.work.metrics.new') }}</span>
-          </k-card>
-          <k-card>
+          </k-glass>
+          <k-glass :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.assigned }}</strong>
             <span>{{ phone.t('Apps.companies.work.metrics.assigned') }}</span>
-          </k-card>
-          <k-card>
+          </k-glass>
+          <k-glass :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.waiting }}</strong>
             <span>{{ phone.t('Apps.companies.work.metrics.waiting') }}</span>
-          </k-card>
-          <k-card>
+          </k-glass>
+          <k-glass :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.completedToday }}</strong>
             <span>{{
               phone.t('Apps.companies.work.metrics.completedToday')
             }}</span>
-          </k-card>
+          </k-glass>
         </div>
-
-        <k-block-title>{{
-          phone.t('Apps.companies.work.queue')
-        }}</k-block-title>
-        <div class="companies-chip-row work-filter-row">
-          <k-chip
-            v-for="filter in workFilters"
-            :key="filter"
-            component="button"
-            type="button"
-            :class="{ 'is-selected': workFilter === filter }"
-            @click="workFilter = filter"
-          >
-            {{ phone.t(`Apps.companies.work.filters.${filter}`) }}
-          </k-chip>
-        </div>
-        <div
-          v-if="companies.workQueueLoading"
-          class="companies-state companies-state--compact"
-        >
-          <k-preloader />
-        </div>
-        <div
-          v-else-if="companies.workQueueError"
-          class="companies-state companies-state--compact"
-        >
-          <CircleAlert :size="28" />
-          <p>{{ errorText(companies.workQueueError) }}</p>
-          <k-button small rounded @click="companies.loadWorkQueue(workFilter)">
-            {{ phone.t('Apps.companies.tryAgain') }}
-          </k-button>
-        </div>
-        <div
-          v-else-if="!companies.workQueue.length"
-          class="companies-state companies-state--compact"
-        >
-          <CheckCircle2 :size="31" />
-          <strong>{{ phone.t('Apps.companies.work.emptyQueue') }}</strong>
-          <p>{{ phone.t('Apps.companies.work.emptyQueueBody') }}</p>
-        </div>
-        <k-list v-else inset strong class="company-request-list">
-          <k-list-item
-            v-for="item in companies.workQueue"
-            :key="item.id"
-            link
-            link-component="button"
-            :link-props="{ type: 'button' }"
-            :title="item.subject"
-            :subtitle="requestSubtitle(item)"
-            :header="assignmentLabel(item.assignedLabel)"
-            @click="openRequest(item.id, 'work')"
-          >
-            <template #media
-              ><span class="company-request-icon"
-                ><BriefcaseBusiness :size="19" /></span
-            ></template>
-            <template #after>
-              <k-badge :class="statusClass(item.status)">
-                {{ phone.t(`Apps.companies.requestStatuses.${item.status}`) }}
-              </k-badge>
-            </template>
-          </k-list-item>
-        </k-list>
-        <k-button
-          v-if="companies.workQueueNextCursor"
-          outline
-          rounded
-          class="companies-load-more"
-          :disabled="companies.workQueueLoadingMore"
-          @click="companies.loadWorkQueue(workFilter, true)"
-        >
-          {{ phone.t('Apps.companies.loadMore') }}
-        </k-button>
       </template>
     </section>
 
@@ -1553,15 +1441,19 @@ onBeforeUnmount(() => {
       v-else-if="screen === 'company'"
       class="companies-content company-profile"
     >
-      <div
+      <k-block
         v-if="companies.directoryLoading && !activeCompany"
+        inset
+        strong
         class="companies-state"
       >
         <k-preloader />
         <span>{{ phone.t('Apps.companies.loading.profile') }}</span>
-      </div>
-      <div
+      </k-block>
+      <k-block
         v-else-if="companies.directoryError || !activeCompany"
+        inset
+        strong
         class="companies-state"
       >
         <CircleAlert :size="34" />
@@ -1570,7 +1462,7 @@ onBeforeUnmount(() => {
         <k-button rounded @click="goBack">{{
           phone.t('Apps.companies.back')
         }}</k-button>
-      </div>
+      </k-block>
       <template v-else>
         <div
           class="company-cover"
@@ -1691,7 +1583,7 @@ onBeforeUnmount(() => {
           />
         </k-list>
 
-        <div class="company-profile-actions">
+        <k-glass :highlight="false" class="company-profile-actions">
           <k-button
             rounded
             :disabled="!activeCompany.canCall || !activeCompany.phoneNumber"
@@ -1726,7 +1618,7 @@ onBeforeUnmount(() => {
               phone.t('Apps.companies.profile.request')
             }}
           </k-button>
-        </div>
+        </k-glass>
       </template>
     </section>
 
@@ -1734,12 +1626,19 @@ onBeforeUnmount(() => {
       v-else-if="screen === 'request'"
       class="companies-content request-thread"
     >
-      <div v-if="companies.requestLoading" class="companies-state">
+      <k-block
+        v-if="companies.requestLoading"
+        inset
+        strong
+        class="companies-state"
+      >
         <k-preloader />
         <span>{{ phone.t('Apps.companies.loading.request') }}</span>
-      </div>
-      <div
+      </k-block>
+      <k-block
         v-else-if="companies.requestError || !companies.request"
+        inset
+        strong
         class="companies-state"
       >
         <CircleAlert :size="34" />
@@ -1748,7 +1647,7 @@ onBeforeUnmount(() => {
         <k-button rounded @click="goBack">{{
           phone.t('Apps.companies.back')
         }}</k-button>
-      </div>
+      </k-block>
       <template v-else>
         <div class="request-thread-scroll">
           <k-card class="request-summary-card">
@@ -1905,7 +1804,13 @@ onBeforeUnmount(() => {
           phone.t('Apps.companies.manager.profile')
         }}</k-block-title>
         <div class="manager-media-grid">
-          <button type="button" @click="chooseManagerMedia('cover')">
+          <k-button
+            tonal
+            rounded
+            large
+            class="manager-media-button"
+            @click="chooseManagerMedia('cover')"
+          >
             <img
               v-if="managerCoverUrl"
               :src="managerCoverUrl"
@@ -1914,8 +1819,14 @@ onBeforeUnmount(() => {
             />
             <span v-else><ImagePlus :size="22" /></span>
             <small>{{ phone.t('Apps.companies.manager.chooseCover') }}</small>
-          </button>
-          <button type="button" @click="chooseManagerMedia('logo')">
+          </k-button>
+          <k-button
+            tonal
+            rounded
+            large
+            class="manager-media-button"
+            @click="chooseManagerMedia('logo')"
+          >
             <img
               v-if="managerLogoUrl"
               :src="managerLogoUrl"
@@ -1924,7 +1835,7 @@ onBeforeUnmount(() => {
             />
             <span v-else><ImagePlus :size="22" /></span>
             <small>{{ phone.t('Apps.companies.manager.chooseLogo') }}</small>
-          </button>
+          </k-button>
         </div>
         <k-list inset strong class="manager-form-list">
           <k-list-input
@@ -2243,6 +2154,7 @@ onBeforeUnmount(() => {
     >
       <section
         v-if="requestSheetOpened && activeCompany"
+        ref="requestSheetContent"
         class="companies-sheet__content"
         role="dialog"
         aria-modal="true"
@@ -2264,10 +2176,10 @@ onBeforeUnmount(() => {
           </k-link>
         </header>
         <k-progressbar :progress="requestProgress" />
-        <k-block-title>{{
+        <k-block-title class="composer-service-title">{{
           phone.t('Apps.companies.composer.chooseService')
         }}</k-block-title>
-        <k-list inset strong>
+        <k-list inset strong class="composer-service-list">
           <k-list-item
             v-for="service in activeCompany.services.filter(
               (item) => item.active && item.acceptsRequests,
@@ -2276,7 +2188,11 @@ onBeforeUnmount(() => {
             label
             :title="service.title"
             :subtitle="service.description"
-            :after="service.priceText ?? undefined"
+            title-font-size-ios="text-[15px]"
+            title-font-size-material="text-[15px]"
+            media-class="!py-2.5 !me-3"
+            inner-class="!py-2.5 !pe-safe-3"
+            title-wrap-class="!min-h-5"
           >
             <template #media>
               <k-radio
@@ -2286,6 +2202,11 @@ onBeforeUnmount(() => {
                 @change="requestServiceId = service.id"
               />
             </template>
+            <template v-if="service.priceText" #after>
+              <span class="composer-service-price">{{
+                service.priceText
+              }}</span>
+            </template>
           </k-list-item>
         </k-list>
         <k-list inset strong class="composer-form-list">
@@ -2295,6 +2216,7 @@ onBeforeUnmount(() => {
             :label="phone.t('Apps.companies.composer.subject')"
             :placeholder="phone.t('Apps.companies.composer.subjectPlaceholder')"
             :value="requestSubject"
+            :input-style="{ height: '38px' }"
             @input="requestSubject = eventValue($event)"
           />
           <k-list-input
@@ -2306,6 +2228,13 @@ onBeforeUnmount(() => {
               phone.t('Apps.companies.composer.descriptionPlaceholder')
             "
             :value="requestDescription"
+            :input-style="{
+              height: '72px',
+              lineHeight: '20px',
+              paddingBottom: '8px',
+              paddingTop: '8px',
+              resize: 'none',
+            }"
             @input="requestDescription = eventValue($event)"
           />
         </k-list>
@@ -2356,10 +2285,11 @@ onBeforeUnmount(() => {
         <k-button
           large
           rounded
-          :disabled="!canSubmitRequest"
-          @click="requestConfirmOpened = true"
+          :disabled="!canSubmitRequest || companies.mutating"
+          @click="submitRequest"
         >
-          {{ phone.t('Apps.companies.composer.review') }}
+          <k-preloader v-if="companies.mutating" />
+          <span v-else>{{ phone.t('Apps.companies.composer.send') }}</span>
         </k-button>
       </section>
     </k-sheet>
@@ -2433,12 +2363,14 @@ onBeforeUnmount(() => {
             <X :size="19" />
           </k-link>
         </header>
-        <div
+        <k-block
           v-if="companies.membersLoading"
+          inset
+          strong
           class="companies-state companies-state--compact"
         >
           <k-preloader />
-        </div>
+        </k-block>
         <k-list v-else inset strong>
           <k-list-item
             v-for="member in companies.members"
@@ -2472,31 +2404,6 @@ onBeforeUnmount(() => {
       </section>
     </k-sheet>
 
-    <k-dialog
-      :opened="requestConfirmOpened"
-      :title="phone.t('Apps.companies.composer.confirmTitle')"
-      :content="
-        phone.t('Apps.companies.composer.confirmBody', {
-          company: activeCompany?.name ?? '',
-          service: selectedService?.title ?? '',
-        })
-      "
-      @backdropclick="requestConfirmOpened = false"
-    >
-      <template #buttons>
-        <k-dialog-button @click="requestConfirmOpened = false">
-          {{ phone.t('Apps.companies.composer.edit') }}
-        </k-dialog-button>
-        <k-dialog-button
-          strong
-          :disabled="companies.mutating"
-          @click="submitRequest"
-        >
-          {{ phone.t('Apps.companies.composer.send') }}
-        </k-dialog-button>
-      </template>
-    </k-dialog>
-
     <k-dialog
       :opened="cancelDialogOpened"
       :title="phone.t('Apps.companies.requests.cancelTitle')"
@@ -2554,6 +2461,8 @@ onBeforeUnmount(() => {
   --k-safe-area-bottom: 25px;
   position: relative;
   height: 100%;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   color: #111827;
 }
@@ -2582,16 +2491,19 @@ onBeforeUnmount(() => {
 .companies-content {
   position: relative;
   z-index: 1;
-}
-
-.companies-content {
-  height: calc(100% - 44px);
-  padding: 10px 10px 92px;
+  min-height: 0;
+  padding: 10px 10px calc(var(--k-safe-area-bottom) + 88px);
+  flex: 1;
+  overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: none;
 }
 
+.companies-navbar {
+  flex: none;
+}
+
 .companies-content::-webkit-scrollbar,
 .companies-chip-row::-webkit-scrollbar,
 .companies-featured-row::-webkit-scrollbar {
@@ -2615,13 +2527,11 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
-.companies-chip-row :deep(.is-selected),
-.companies-inline-chips :deep(.is-selected) {
+.companies-chip-row :deep(.is-selected) {
   color: white;
   background: linear-gradient(135deg, var(--company-blue), var(--company-cyan));
 }
 
-.companies-filter-card,
 .work-identity-card,
 .manager-intro,
 .request-summary-card,
@@ -2636,7 +2546,6 @@ onBeforeUnmount(() => {
   -webkit-backdrop-filter: blur(18px) saturate(140%);
 }
 
-.companies-app--dark .companies-filter-card,
 .companies-app--dark .work-identity-card,
 .companies-app--dark .manager-intro,
 .companies-app--dark .request-summary-card,
@@ -2646,20 +2555,9 @@ onBeforeUnmount(() => {
   background: rgb(20 30 46 / 70%);
 }
 
-.companies-inline-chips {
-  display: flex;
-  max-width: 144px;
-  gap: 4px;
-  overflow-x: auto;
-}
-
-.companies-inline-chips :deep(.k-chip) {
-  flex: none;
-  font-size: 9px;
-}
-
 .companies-state {
   min-height: 260px;
+  margin: 14px 6px;
   padding: 36px 22px;
   display: flex;
   flex-direction: column;
@@ -2725,6 +2623,16 @@ onBeforeUnmount(() => {
   margin-top: 6px;
 }
 
+.company-list :deep(.k-list-item > button),
+.company-request-list :deep(.k-list-item > button) {
+  width: 100%;
+  text-align: left;
+}
+
+.companies-content :deep(.k-block-title) {
+  margin-bottom: 10px;
+}
+
 .company-logo {
   width: 42px;
   height: 42px;
@@ -2872,15 +2780,13 @@ onBeforeUnmount(() => {
   margin: 0 5px 14px;
 }
 
-.work-metrics :deep(.k-card) {
+.work-metric {
   margin: 0;
-  border-radius: 16px;
-}
-
-.work-metrics :deep(> *) {
+  padding: 15px 16px;
   display: flex;
   flex-direction: column;
   gap: 2px;
+  border-radius: 16px;
 }
 
 .work-metrics strong {
@@ -2893,10 +2799,6 @@ onBeforeUnmount(() => {
   font-size: 10px;
 }
 
-.work-filter-row {
-  padding-inline: 5px;
-}
-
 .company-cover {
   height: 145px;
   margin: -10px -10px 0;
@@ -2918,10 +2820,6 @@ onBeforeUnmount(() => {
   font-size: 18px;
 }
 
-.company-profile {
-  padding-bottom: 116px;
-}
-
 .company-profile-heading {
   margin-top: 10px;
 }
@@ -2956,7 +2854,17 @@ onBeforeUnmount(() => {
 }
 
 .company-profile {
-  padding-bottom: 145px;
+  padding-bottom: calc(var(--k-safe-area-bottom) + 24px);
+}
+
+.company-profile > :deep(.k-block-title) {
+  margin-top: 18px;
+  margin-bottom: 6px;
+}
+
+.company-profile > :deep(.k-list) {
+  margin-top: 8px;
+  margin-bottom: 10px;
 }
 
 .companies-app--dark .company-profile-heading p,
@@ -2973,26 +2881,19 @@ onBeforeUnmount(() => {
 }
 
 .company-profile-actions {
-  position: absolute;
+  position: relative;
   z-index: 4;
-  right: 8px;
-  bottom: 28px;
-  left: 8px;
+  margin: 18px 0 0;
   padding: 8px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 7px;
   border: 1px solid rgb(255 255 255 / 45%);
   border-radius: 20px;
-  background: rgb(255 255 255 / 76%);
-  box-shadow: 0 18px 35px rgb(15 23 42 / 18%);
-  backdrop-filter: blur(22px) saturate(150%);
-  -webkit-backdrop-filter: blur(22px) saturate(150%);
 }
 
 .companies-app--dark .company-profile-actions {
   border-color: rgb(255 255 255 / 8%);
-  background: rgb(15 23 42 / 80%);
 }
 
 .request-thread {
@@ -3149,7 +3050,7 @@ onBeforeUnmount(() => {
   margin: 0 10px 12px;
 }
 
-.manager-media-grid button {
+.manager-media-button {
   min-width: 0;
   min-height: 86px;
   overflow: hidden;
@@ -3157,10 +3058,7 @@ onBeforeUnmount(() => {
   display: grid;
   place-items: center;
   border: 1px solid rgb(148 163 184 / 30%);
-  border-radius: 16px;
   padding: 0;
-  color: var(--company-blue);
-  background: rgb(255 255 255 / 62%);
 }
 
 .manager-media-grid img {
@@ -3185,10 +3083,6 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
-.companies-app--dark .manager-media-grid button {
-  background: rgb(30 41 59 / 66%);
-}
-
 .manager-location {
   width: calc(100% - 20px);
   margin: 0 10px 4px;
@@ -3274,8 +3168,47 @@ onBeforeUnmount(() => {
   font-size: 9px;
 }
 
+.composer-service-title {
+  margin-top: 18px;
+  margin-bottom: 8px;
+}
+
+.composer-service-list {
+  margin-top: 0;
+  margin-right: 8px;
+  margin-bottom: 10px;
+  margin-left: 8px;
+}
+
+.composer-service-list :deep(.k-list-item .text-sm) {
+  overflow: hidden;
+  font-size: 11px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.composer-service-list :deep(.k-radio > i) {
+  width: 20px;
+  height: 20px;
+}
+
+.composer-service-price {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 500;
+}
+
 .composer-form-list {
-  margin-top: 12px;
+  margin-top: 10px;
+  margin-right: 8px;
+  margin-bottom: 10px;
+  margin-left: 8px;
+}
+
+.composer-form-list :deep(.k-list-input) {
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 
 .composer-contact-card {

From bbcdc50ad0afd6f963f55d78822f630850bf4b5a Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 17:01:27 +0200
Subject: [PATCH 07/63] CLN - remove custom app packaging

Remove the bundled custom-app SDK assets and stop including custom app manifests, scripts, web assets, and escrow exclusions in the resource manifest.
---
 sky_phone/custom_apps/_sdk/default-icon.svg   |  13 --
 sky_phone/custom_apps/_sdk/sky-phone-app.d.ts |  74 ------
 sky_phone/custom_apps/_sdk/sky-phone-app.js   | 211 ------------------
 sky_phone/fxmanifest.lua                      |  11 -
 4 files changed, 309 deletions(-)
 delete mode 100644 sky_phone/custom_apps/_sdk/default-icon.svg
 delete mode 100644 sky_phone/custom_apps/_sdk/sky-phone-app.d.ts
 delete mode 100644 sky_phone/custom_apps/_sdk/sky-phone-app.js

diff --git a/sky_phone/custom_apps/_sdk/default-icon.svg b/sky_phone/custom_apps/_sdk/default-icon.svg
deleted file mode 100644
index 751a276..0000000
--- a/sky_phone/custom_apps/_sdk/default-icon.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Custom app">
-  <defs>
-    <linearGradient id="background" x1="18" y1="14" x2="110" y2="116" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#57c7ff"/>
-      <stop offset="1" stop-color="#3152d4"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="29" fill="url(#background)"/>
-  <rect x="31" y="31" width="28" height="28" rx="8" fill="#fff" fill-opacity=".96"/>
-  <rect x="69" y="31" width="28" height="28" rx="8" fill="#fff" fill-opacity=".8"/>
-  <rect x="31" y="69" width="28" height="28" rx="8" fill="#fff" fill-opacity=".8"/>
-  <path d="M83 68v30M68 83h30" stroke="#fff" stroke-width="9" stroke-linecap="round"/>
-</svg>
diff --git a/sky_phone/custom_apps/_sdk/sky-phone-app.d.ts b/sky_phone/custom_apps/_sdk/sky-phone-app.d.ts
deleted file mode 100644
index 48c6b8d..0000000
--- a/sky_phone/custom_apps/_sdk/sky-phone-app.d.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-export type SkyPhoneAppContext = {
-  appId: string
-  capabilities: string[]
-  colorScheme: 'dark' | 'light'
-  language: string
-  locale: Record<string, unknown>
-  phoneScale: number
-  protocolVersion: 1
-  safeArea: {
-    bottom: number
-    left: number
-    right: number
-    top: number
-  }
-}
-
-export type SkyPhoneAppEvents = {
-  context: SkyPhoneAppContext | null
-  message: unknown
-  open: unknown
-}
-
-export type SkyPhoneAppNotification = {
-  sound?: 'chime' | 'signal' | 'soft'
-  subtitle?: string
-  text: string
-  title: string
-}
-
-export type SkyPhoneAppStorageEntry<Value = unknown> = {
-  exists: boolean
-  revision: number
-  value?: Value
-}
-
-export type SkyPhoneAppStorageWrite = {
-  revision: number
-}
-
-export type SkyPhoneAppApi = {
-  readonly appId: string
-  readonly protocolVersion: 1
-  close(): Promise<void>
-  getContext(): SkyPhoneAppContext | null
-  notify(
-    notification: SkyPhoneAppNotification,
-  ): Promise<{ notificationId: string | null }>
-  on<EventName extends keyof SkyPhoneAppEvents>(
-    eventName: EventName,
-    listener: (payload: SkyPhoneAppEvents[EventName]) => void,
-  ): () => void
-  open(
-    appId: string,
-    data?: Record<string, unknown>,
-  ): Promise<{ appId: string }>
-  ready(): boolean
-  request<Result = unknown>(method: string, payload?: unknown): Promise<Result>
-  storage: {
-    get<Value = unknown>(key: string): Promise<SkyPhoneAppStorageEntry<Value>>
-    set(
-      key: string,
-      value: unknown,
-      revision: number,
-    ): Promise<SkyPhoneAppStorageWrite>
-  }
-}
-
-declare global {
-  interface Window {
-    SkyPhoneApp: SkyPhoneAppApi
-  }
-}
-
-export {}
diff --git a/sky_phone/custom_apps/_sdk/sky-phone-app.js b/sky_phone/custom_apps/_sdk/sky-phone-app.js
deleted file mode 100644
index 4688c59..0000000
--- a/sky_phone/custom_apps/_sdk/sky-phone-app.js
+++ /dev/null
@@ -1,211 +0,0 @@
-(function bootstrapSkyPhoneApp() {
-  'use strict'
-
-  const protocolVersion = 1
-  const requestTimeoutMs = 8000
-  const query = new URLSearchParams(window.location.search)
-  const appId =
-    query.get('skyPhoneAppId') ||
-    document.documentElement.dataset.skyPhoneAppId ||
-    document.currentScript?.dataset.appId ||
-    ''
-  const listeners = new Map()
-  const pendingRequests = new Map()
-  let context = null
-  let nextRequestId = 1
-  let readySent = false
-
-  function emit(eventName, payload) {
-    const eventListeners = listeners.get(eventName)
-    if (eventListeners) {
-      for (const listener of [...eventListeners]) listener(payload)
-    }
-    window.dispatchEvent(
-      new CustomEvent(`sky-phone-app:${eventName}`, { detail: payload }),
-    )
-  }
-
-  function send(message) {
-    if (!appId) {
-      console.error('[Sky Phone App] Missing skyPhoneAppId in the frame URL.')
-      return false
-    }
-
-    window.parent.postMessage(
-      {
-        ...message,
-        appId,
-        protocolVersion,
-      },
-      '*',
-    )
-    return true
-  }
-
-  function ready() {
-    if (readySent) return true
-    readySent = send({ type: 'sky-phone-app:ready' })
-    return readySent
-  }
-
-  function on(eventName, listener) {
-    if (typeof eventName !== 'string' || typeof listener !== 'function') {
-      throw new TypeError('SkyPhoneApp.on requires an event name and a function.')
-    }
-
-    const eventListeners = listeners.get(eventName) || new Set()
-    eventListeners.add(listener)
-    listeners.set(eventName, eventListeners)
-    return function unsubscribe() {
-      eventListeners.delete(listener)
-      if (eventListeners.size === 0) listeners.delete(eventName)
-    }
-  }
-
-  function request(method, payload) {
-    if (typeof method !== 'string' || !method) {
-      return Promise.reject(new TypeError('A bridge method is required.'))
-    }
-
-    const requestId = `${Date.now().toString(36)}-${nextRequestId++}`
-    return new Promise((resolve, reject) => {
-      const timeout = window.setTimeout(() => {
-        pendingRequests.delete(requestId)
-        reject(new Error(`Sky Phone request timed out: ${method}`))
-      }, requestTimeoutMs)
-
-      pendingRequests.set(requestId, { reject, resolve, timeout })
-      if (
-        !send({
-          type: 'sky-phone-app:request',
-          method,
-          payload,
-          requestId,
-        })
-      ) {
-        window.clearTimeout(timeout)
-        pendingRequests.delete(requestId)
-        reject(new Error('Sky Phone bridge is unavailable.'))
-      }
-    })
-  }
-
-  function close() {
-    return request('app.close')
-  }
-
-  function open(targetAppId, data) {
-    if (typeof targetAppId !== 'string' || !targetAppId) {
-      return Promise.reject(new TypeError('A target app ID is required.'))
-    }
-
-    return request('app.open', {
-      appId: targetAppId,
-      ...(data === undefined ? {} : { data }),
-    })
-  }
-
-  function notify(notification) {
-    if (!notification || typeof notification !== 'object') {
-      return Promise.reject(new TypeError('A notification is required.'))
-    }
-
-    return request('notification.create', notification)
-  }
-
-  const storage = Object.freeze({
-    get(key) {
-      return request('device.storage.get', { key })
-    },
-    set(key, value, revision) {
-      return request('device.storage.set', { key, revision, value })
-    },
-  })
-
-  function applyContext(nextContext) {
-    if (!nextContext || typeof nextContext !== 'object') return
-
-    const root = document.documentElement
-    if (
-      nextContext.colorScheme === 'dark' ||
-      nextContext.colorScheme === 'light'
-    ) {
-      root.dataset.theme = nextContext.colorScheme
-      root.style.colorScheme = nextContext.colorScheme
-    }
-    if (typeof nextContext.language === 'string' && nextContext.language) {
-      root.lang = nextContext.language
-    }
-    if (typeof nextContext.phoneScale === 'number') {
-      root.style.setProperty('--sky-phone-scale', String(nextContext.phoneScale))
-    }
-    if (nextContext.safeArea && typeof nextContext.safeArea === 'object') {
-      for (const edge of ['top', 'right', 'bottom', 'left']) {
-        const value = nextContext.safeArea[edge]
-        if (typeof value === 'number') {
-          root.style.setProperty(`--sky-safe-area-${edge}`, `${value}px`)
-        }
-      }
-    }
-  }
-
-  window.addEventListener('message', (event) => {
-    if (event.source !== window.parent) return
-    const message = event.data
-    if (
-      !message ||
-      typeof message !== 'object' ||
-      message.appId !== appId ||
-      message.protocolVersion !== protocolVersion
-    ) {
-      return
-    }
-
-    if (message.type === 'sky-phone-app:context') {
-      context = message.context || null
-      applyContext(context)
-      emit('context', context)
-    } else if (message.type === 'sky-phone-app:message') {
-      emit('message', message.payload)
-    } else if (message.type === 'sky-phone-app:open') {
-      emit('open', message.data)
-    } else if (message.type === 'sky-phone-app:response') {
-      const pending = pendingRequests.get(message.requestId)
-      if (!pending) return
-      window.clearTimeout(pending.timeout)
-      pendingRequests.delete(message.requestId)
-      if (message.success) pending.resolve(message.data)
-      else pending.reject(new Error(message.error || 'Sky Phone request failed.'))
-    }
-  })
-
-  const api = Object.freeze({
-    appId,
-    close,
-    getContext: () => context,
-    notify,
-    on,
-    open,
-    protocolVersion,
-    ready,
-    request,
-    storage,
-  })
-
-  if (window.SkyPhoneApp) {
-    console.error('[Sky Phone App] window.SkyPhoneApp is already defined.')
-    return
-  }
-  Object.defineProperty(window, 'SkyPhoneApp', {
-    configurable: false,
-    enumerable: true,
-    value: api,
-    writable: false,
-  })
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', ready, { once: true })
-  } else {
-    ready()
-  }
-})()
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index 9d0db07..cfc540c 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -13,12 +13,6 @@ provide 'high-phone'
 provide 'qs-smartphone'
 provide 'yseries'
 
-escrow_ignore {
-    'config/**',
-    'custom_apps/**',
-    'source/bridge/**',
-}
-
 shared_scripts {
     'config/init.lua',
     'source/bridge/shared.lua',
@@ -26,7 +20,6 @@ shared_scripts {
     'source/shared/sim_number.lua',
     'source/shared/custom_apps.lua',
     'source/shared/custom_app_compat.lua',
-    'custom_apps/**/manifest.lua',
 }
 
 client_scripts {
@@ -46,7 +39,6 @@ client_scripts {
     'source/client/payphones.lua',
     'source/client/custom_apps.lua',
     'source/client/custom_app_compat.lua',
-    'custom_apps/**/client.lua',
     'source/client/main.lua',
     'source/client/radio.lua',
 }
@@ -96,7 +88,6 @@ server_scripts {
     'source/server/calendar.lua',
     'source/server/music.lua',
     'source/server/radio.lua',
-    'custom_apps/**/server.lua',
 }
 
 files {
@@ -104,8 +95,6 @@ files {
     'source/html/assets/**',
     'source/html/img/**',
     'config/music/**',
-    'custom_apps/**/web/**',
-    'custom_apps/_sdk/**',
 }
 
 ui_page 'source/html/index.html'

From d671f704ee306759f5e3c984fbb3a3e69a68142c Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 18:26:12 +0200
Subject: [PATCH 08/63] FIX - handle unavailable ESX integrations

---
 sky_phone/source/bridge/client/housing/esx_property.lua | 5 +++++
 sky_phone/source/bridge/server/frameworks/esx.lua       | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/sky_phone/source/bridge/client/housing/esx_property.lua b/sky_phone/source/bridge/client/housing/esx_property.lua
index 08fe3f3..9c9ef8c 100644
--- a/sky_phone/source/bridge/client/housing/esx_property.lua
+++ b/sky_phone/source/bridge/client/housing/esx_property.lua
@@ -2,6 +2,11 @@ if Bridge.Framework.GetName() ~= "esx" then
     return
 end
 
+if GetResourceState("esx_property") ~= "started" then
+    print("[sky_phone] esx_property is not started; the housing provider is disabled.")
+    return
+end
+
 local ESX = exports["es_extended"]:getSharedObject()
 
 local callback_names = {
diff --git a/sky_phone/source/bridge/server/frameworks/esx.lua b/sky_phone/source/bridge/server/frameworks/esx.lua
index 33658e1..1c4a820 100644
--- a/sky_phone/source/bridge/server/frameworks/esx.lua
+++ b/sky_phone/source/bridge/server/frameworks/esx.lua
@@ -2,6 +2,10 @@ if Bridge.Framework.Name ~= "esx" then
     return
 end
 
+if GetResourceState("es_extended") ~= "started" then
+    error("[sky_phone] ESX is configured, but es_extended is not started.")
+end
+
 local ESX = exports["es_extended"]:getSharedObject()
 
 local function get_player(source)

From 2a87432e50f6e35303e4f9af8569032b7966bdbd Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 18:26:22 +0200
Subject: [PATCH 09/63] FIX - support third-party custom apps

---
 README.md                                     |   5 +-
 frontend/public/img/custom-app.svg            |  15 ++
 sky_phone/source/client/custom_app_compat.lua |  44 +++-
 sky_phone/source/client/custom_apps.lua       |  76 ++++++-
 sky_phone/source/server/custom_app_compat.lua |   1 +
 sky_phone/source/shared/custom_app_compat.lua |  39 ++++
 tests/custom_app_compat_client.lua            | 193 ++++++++++++++++--
 tests/custom_app_compat_server.lua            |  24 ++-
 8 files changed, 361 insertions(+), 36 deletions(-)
 create mode 100644 frontend/public/img/custom-app.svg

diff --git a/README.md b/README.md
index a23642c..923633b 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,9 @@
 Hersteller-Aliase und übernimmt unterstützte Apps automatisch in Springboard und App Store. In
 App-Ressourcen müssen dafür keine Sky-Vorlagen abgelegt werden. Unterstützt werden die
 dokumentierten Basisverträge von LB Phone, 17Movement, High Phone, Quasar Smartphone V3 und
-YSeries; die Aliase `lb-phone`, `17mov_Phone`, `high-phone`, `qs-smartphone` und `yseries` werden
-direkt von `sky_phone` bereitgestellt. Einrichtung und ehrliche Kompatibilitätsgrenzen stehen in der
+YSeries; die Resource- und Cfx-Export-Aliase `lb-phone`, `17mov_Phone`, `high-phone`,
+`qs-smartphone` und `yseries` werden direkt von `sky_phone` bereitgestellt. Einrichtung und
+ehrliche Kompatibilitätsgrenzen stehen in der
 [deutschen Custom-App-Anleitung](docs/custom-apps.md).
 
 ## FlipTok verification
diff --git a/frontend/public/img/custom-app.svg b/frontend/public/img/custom-app.svg
new file mode 100644
index 0000000..8b9ec86
--- /dev/null
+++ b/frontend/public/img/custom-app.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="background" x1="16" y1="12" x2="112" y2="116" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#64748b"/>
+      <stop offset="1" stop-color="#1e293b"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="28" fill="url(#background)"/>
+  <g fill="#f8fafc">
+    <rect x="29" y="29" width="29" height="29" rx="8"/>
+    <rect x="70" y="29" width="29" height="29" rx="8"/>
+    <rect x="29" y="70" width="29" height="29" rx="8"/>
+    <rect x="70" y="70" width="29" height="29" rx="8"/>
+  </g>
+</svg>
diff --git a/sky_phone/source/client/custom_app_compat.lua b/sky_phone/source/client/custom_app_compat.lua
index b2a4ad8..0228d99 100644
--- a/sky_phone/source/client/custom_app_compat.lua
+++ b/sky_phone/source/client/custom_app_compat.lua
@@ -561,11 +561,6 @@ AddEventHandler("onClientResourceStop", function(resource_name)
     end
 end)
 
-CreateThread(function()
-    TriggerServerEvent("sky_phone:compat:high:server:requestSnapshot")
-    TriggerEvent("17mov_Phone:Client:Ready")
-end)
-
 exports("AddApplication", add_17mov_application)
 exports("RemoveApplication", remove_17mov_application)
 exports("SendAppMessage", send_app_message)
@@ -579,3 +574,42 @@ exports("getCustomApps", get_quasar_apps)
 exports("OpenPhoneApp", open_quasar_app)
 exports("OpenApp", open_phone_app)
 exports("CloseApp", close_phone_app)
+
+SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "OpenApp", open_phone_app)
+SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "CloseApp", close_phone_app)
+
+SkyPhoneCompatibility.RegisterExportAlias("17mov_Phone", "AddApplication", add_17mov_application)
+SkyPhoneCompatibility.RegisterExportAlias("17mov_Phone", "RemoveApplication", remove_17mov_application)
+SkyPhoneCompatibility.RegisterExportAlias("17mov_Phone", "SendAppMessage", send_app_message)
+
+SkyPhoneCompatibility.RegisterExportAlias("high-phone", "addApplication", add_high_application)
+SkyPhoneCompatibility.RegisterExportAlias("high-phone", "sendAppNui", send_high_app_nui)
+
+SkyPhoneCompatibility.RegisterExportAlias("qs-smartphone", "addCustomApp", add_quasar_app)
+SkyPhoneCompatibility.RegisterExportAlias("qs-smartphone", "addCustomAppsBatch", add_quasar_apps_batch)
+SkyPhoneCompatibility.RegisterExportAlias("qs-smartphone", "updateCustomApp", update_quasar_app)
+SkyPhoneCompatibility.RegisterExportAlias("qs-smartphone", "removeCustomApp", remove_quasar_app)
+SkyPhoneCompatibility.RegisterExportAlias("qs-smartphone", "getCustomApps", get_quasar_apps)
+SkyPhoneCompatibility.RegisterExportAlias("qs-smartphone", "OpenPhoneApp", open_quasar_app)
+
+SkyPhoneCompatibility.RegisterExportAlias("yseries", "SendAppMessage", send_app_message)
+SkyPhoneCompatibility.RegisterExportAlias("yseries", "CloseApp", close_phone_app)
+SkyPhoneCompatibility.RegisterExportAlias("yseries", "GetDataLoaded", function()
+    return true
+end)
+
+CreateThread(function()
+    TriggerServerEvent("sky_phone:compat:high:server:requestSnapshot")
+    TriggerEvent("17mov_Phone:Client:Ready")
+
+    local provider_resources = {
+        "lb-phone",
+        "17mov_Phone",
+        "high-phone",
+        "qs-smartphone",
+        "yseries",
+    }
+    for index = 1, #provider_resources do
+        TriggerEvent("onResourceStart", provider_resources[index])
+    end
+end)
diff --git a/sky_phone/source/client/custom_apps.lua b/sky_phone/source/client/custom_apps.lua
index 1f95350..c098f70 100644
--- a/sky_phone/source/client/custom_apps.lua
+++ b/sky_phone/source/client/custom_apps.lua
@@ -26,12 +26,24 @@ local active_app_id = nil
 local active_app_ready = false
 local phone_open = false
 local queued_messages = {}
-local default_icon_url = ("https://cfx-nui-%s/custom_apps/_sdk/default-icon.svg"):format(current_resource)
+local default_icon_url = ("https://cfx-nui-%s/img/custom-app.svg"):format(current_resource)
 
 local function trim(value)
     return value:match("^%s*(.-)%s*$")
 end
 
+local function is_callable(value)
+    if type(value) == "function" then
+        return true
+    end
+    if type(value) ~= "table" then
+        return false
+    end
+
+    local value_metatable = getmetatable(value)
+    return type(value_metatable) == "table" and type(value_metatable.__call) == "function"
+end
+
 local function validate_owner_resource(owner_resource, allow_stopping)
     if type(owner_resource) ~= "string"
         or #owner_resource == 0
@@ -118,7 +130,7 @@ local function validate_asset_path(path)
     return true
 end
 
-local function normalize_asset_url(value, original_owner, adapter_resource, required)
+local function normalize_asset_url(value, original_owner, adapter_resource, asset_resource, required)
     if value == nil and not required then
         return nil
     end
@@ -137,6 +149,9 @@ local function normalize_asset_url(value, original_owner, adapter_resource, requ
     if adapter_resource then
         allowed_owners[adapter_resource] = true
     end
+    if asset_resource then
+        allowed_owners[asset_resource] = true
+    end
 
     local cfx_owner = url:match("^https://cfx%-nui%-([^/]+)/")
     if cfx_owner then
@@ -177,6 +192,13 @@ local function normalize_asset_url(value, original_owner, adapter_resource, requ
             asset_path = url:sub(#adapter_prefix + 1)
         end
     end
+    if asset_resource then
+        local asset_prefix = asset_resource .. "/"
+        if url:sub(1, #asset_prefix) == asset_prefix then
+            asset_owner = asset_resource
+            asset_path = url:sub(#asset_prefix + 1)
+        end
+    end
 
     if not validate_asset_path(asset_path) then
         return nil, "invalid_asset_url"
@@ -326,14 +348,42 @@ local function normalize_external_definition(owner_resource, adapter_resource, d
         return nil, "invalid_category"
     end
 
-    local ui, ui_error = normalize_asset_url(definition.ui, owner_resource, adapter_resource, true)
+    local asset_resource = definition.assetResource
+    if asset_resource ~= nil then
+        if definition.compatibility == nil then
+            return nil, "asset_resource_not_allowed"
+        end
+        local valid_asset_resource, asset_resource_error = validate_owner_resource(asset_resource, false)
+        if not valid_asset_resource then
+            return nil, asset_resource_error
+        end
+    end
+
+    local ui, ui_error = normalize_asset_url(
+        definition.ui,
+        owner_resource,
+        adapter_resource,
+        asset_resource,
+        true
+    )
     if not ui then
         return nil, ui_error
     end
 
-    local icon, icon_error = normalize_asset_url(definition.icon, owner_resource, adapter_resource, false)
+    local icon, icon_error = normalize_asset_url(
+        definition.icon,
+        owner_resource,
+        adapter_resource,
+        asset_resource,
+        false
+    )
     if definition.icon ~= nil and not icon then
-        return nil, icon_error
+        if definition.compatibility == nil then
+            return nil, icon_error
+        end
+        print((
+            "[sky_phone] Custom app '%s' from '%s' uses an unavailable icon (%s); using the default icon."
+        ):format(definition.id, owner_resource, icon_error))
     end
 
     local permissions, permissions_error = SkyPhoneApps.ValidatePermissions(definition.permissions)
@@ -387,7 +437,7 @@ local function normalize_external_definition(owner_resource, adapter_resource, d
     local hooks = {}
     for hook_name in pairs(HOOK_NAMES) do
         local hook = definition[hook_name]
-        if hook ~= nil and type(hook) ~= "function" then
+        if hook ~= nil and not is_callable(hook) then
             return nil, "invalid_" .. hook_name
         end
         hooks[hook_name] = hook
@@ -1280,6 +1330,12 @@ exports("SendCustomAppNotificationFromAdapter", send_custom_app_notification_fro
 exports("UpdateCustomApp", update_custom_app)
 exports("UpdateCustomAppFromAdapter", update_custom_app_from_adapter)
 
+SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "AddCustomApp", add_custom_app_export)
+SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "RemoveCustomApp", remove_custom_app)
+SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "SendCustomAppMessage", send_custom_app_message)
+SkyPhoneCompatibility.RegisterExportAlias("yseries", "AddCustomApp", add_custom_app_export)
+SkyPhoneCompatibility.RegisterExportAlias("yseries", "RemoveCustomApp", remove_custom_app)
+
 RegisterNUICallback("custom-app:lifecycle", function(data, cb)
     if type(data) ~= "table" then
         cb({ success = false, error = "invalid_lifecycle_request" })
@@ -1358,11 +1414,11 @@ RegisterNUICallback("custom-app:lifecycle", function(data, cb)
         clear_active_app(false)
     end
 
-    local hook_error = nil
-    if not hook_success then
-        hook_error = "hook_failed"
+    if not hook_success and not app.catalog.compatibility then
+        cb({ success = false, error = "hook_failed" })
+        return
     end
-    cb({ success = hook_success, error = hook_error })
+    cb({ success = true })
 end)
 
 AddEventHandler("onClientResourceStop", function(resource_name)
diff --git a/sky_phone/source/server/custom_app_compat.lua b/sky_phone/source/server/custom_app_compat.lua
index 25196d2..022c21b 100644
--- a/sky_phone/source/server/custom_app_compat.lua
+++ b/sky_phone/source/server/custom_app_compat.lua
@@ -136,3 +136,4 @@ AddEventHandler("onResourceStop", function(resource_name)
 end)
 
 exports("addApplication", add_high_application)
+SkyPhoneCompatibility.RegisterExportAlias("high-phone", "addApplication", add_high_application)
diff --git a/sky_phone/source/shared/custom_app_compat.lua b/sky_phone/source/shared/custom_app_compat.lua
index d69b0b2..ff14ea1 100644
--- a/sky_phone/source/shared/custom_app_compat.lua
+++ b/sky_phone/source/shared/custom_app_compat.lua
@@ -1,5 +1,15 @@
 SkyPhoneCompatibility = {}
 
+function SkyPhoneCompatibility.RegisterExportAlias(resource_name, export_name, handler)
+    assert(type(resource_name) == "string" and resource_name ~= "", "Export alias resource must be a non-empty string")
+    assert(type(export_name) == "string" and export_name ~= "", "Export alias name must be a non-empty string")
+    assert(type(handler) == "function", "Export alias handler must be a function")
+
+    AddEventHandler(("__cfx_export_%s_%s"):format(resource_name, export_name), function(set_callback)
+        set_callback(handler)
+    end)
+end
+
 SkyPhoneCompatibility.Providers = {
     lb = "lb_phone",
     seventeen = "17mov",
@@ -26,6 +36,34 @@ local function normalize_at_resource_url(owner_resource, url, error_prefix)
     return owner_resource .. "/" .. url_path
 end
 
+local function resolve_lb_asset_resource(owner_resource, app_data)
+    local ui = app_data.ui
+    if type(ui) ~= "string" then
+        return nil
+    end
+
+    local explicit_ui_resource = ui:match("^https://cfx%-nui%-([^/]+)/")
+        or ui:match("^nui://([^/]+)/")
+    local asset_resource = explicit_ui_resource or ui:match("^([%w][%w._-]*)/")
+    if not asset_resource or asset_resource == owner_resource then
+        return nil
+    end
+
+    if explicit_ui_resource or app_data.resource == asset_resource then
+        return asset_resource
+    end
+
+    local icon = app_data.icon
+    local icon_resource = type(icon) == "string" and (
+        icon:match("^https://cfx%-nui%-([^/]+)/") or icon:match("^nui://([^/]+)/")
+    ) or nil
+    if icon_resource == asset_resource then
+        return asset_resource
+    end
+
+    return nil
+end
+
 local function build_locale_maps(app_name, locales)
     local names = {}
     local descriptions = {}
@@ -87,6 +125,7 @@ function SkyPhoneCompatibility.BuildLbDefinition(owner_resource, app_data)
         developer = app_data.developer,
         category = app_data.game and "games" or "utilities",
         ui = ui,
+        assetResource = resolve_lb_asset_resource(owner_resource, app_data),
         bridgeMode = "legacy",
         icon = app_data.icon,
         defaultInstalled = app_data.defaultApp or false,
diff --git a/tests/custom_app_compat_client.lua b/tests/custom_app_compat_client.lua
index 0a21629..f4a5027 100644
--- a/tests/custom_app_compat_client.lua
+++ b/tests/custom_app_compat_client.lua
@@ -1,4 +1,8 @@
 local registered_exports = {}
+local registered_event_handlers = {}
+local registered_nui_callbacks = {}
+local triggered_events = {}
+local nui_messages = {}
 local invoking_resource = nil
 
 Config = {
@@ -43,18 +47,31 @@ function GetInvokingResource()
 end
 
 function GetResourceState(resource_name)
-    if resource_name == "missing_resource" then
+    if resource_name == "missing_resource" or resource_name == "ui" then
         return "missing"
     end
     return "started"
 end
 
-function RegisterNUICallback() end
+function RegisterNUICallback(callback_name, handler)
+    registered_nui_callbacks[callback_name] = handler
+end
 function RegisterNetEvent() end
-function AddEventHandler() end
-function SendNUIMessage() end
+function AddEventHandler(event_name, handler)
+    local handlers = registered_event_handlers[event_name] or {}
+    handlers[#handlers + 1] = handler
+    registered_event_handlers[event_name] = handlers
+end
+function SendNUIMessage(message)
+    nui_messages[#nui_messages + 1] = message
+end
 function TriggerServerEvent() end
-function TriggerEvent() end
+function TriggerEvent(event_name, ...)
+    triggered_events[#triggered_events + 1] = {
+        event_name = event_name,
+        arguments = { ... },
+    }
+end
 
 function CreateThread(handler)
     handler()
@@ -65,17 +82,110 @@ dofile("sky_phone/source/shared/custom_app_compat.lua")
 dofile("sky_phone/source/client/custom_apps.lua")
 dofile("sky_phone/source/client/custom_app_compat.lua")
 
+local function get_alias_export(resource_name, export_name)
+    local event_name = ("__cfx_export_%s_%s"):format(resource_name, export_name)
+    local handlers = registered_event_handlers[event_name]
+    assert(handlers and #handlers == 1, ("Missing %s:%s export alias"):format(resource_name, export_name))
+
+    local alias_handler
+    local export_callback = setmetatable({
+        __cfx_functionReference = "test-export-callback",
+    }, {
+        __call = function(_, handler)
+            alias_handler = handler
+        end,
+    })
+    handlers[1](export_callback)
+    assert(type(alias_handler) == "function", ("Invalid %s:%s export alias"):format(resource_name, export_name))
+    return alias_handler
+end
+
+local function make_cfx_function_reference(reference, handler)
+    return setmetatable({
+        __cfx_functionReference = reference,
+    }, {
+        __call = function(_, ...)
+            return handler(...)
+        end,
+    })
+end
+
+local lb_add_custom_app = get_alias_export("lb-phone", "AddCustomApp")
+local lb_remove_custom_app = get_alias_export("lb-phone", "RemoveCustomApp")
+local lb_send_custom_app_message = get_alias_export("lb-phone", "SendCustomAppMessage")
+local lb_open_app = get_alias_export("lb-phone", "OpenApp")
+local lb_close_app = get_alias_export("lb-phone", "CloseApp")
+local mov_add_application = get_alias_export("17mov_Phone", "AddApplication")
+local mov_remove_application = get_alias_export("17mov_Phone", "RemoveApplication")
+local mov_send_app_message = get_alias_export("17mov_Phone", "SendAppMessage")
+local high_add_application = get_alias_export("high-phone", "addApplication")
+local high_send_app_nui = get_alias_export("high-phone", "sendAppNui")
+local quasar_add_custom_app = get_alias_export("qs-smartphone", "addCustomApp")
+local quasar_add_custom_apps_batch = get_alias_export("qs-smartphone", "addCustomAppsBatch")
+local quasar_update_custom_app = get_alias_export("qs-smartphone", "updateCustomApp")
+local quasar_remove_custom_app = get_alias_export("qs-smartphone", "removeCustomApp")
+local quasar_get_custom_apps = get_alias_export("qs-smartphone", "getCustomApps")
+local quasar_open_phone_app = get_alias_export("qs-smartphone", "OpenPhoneApp")
+local yseries_add_custom_app = get_alias_export("yseries", "AddCustomApp")
+local yseries_remove_custom_app = get_alias_export("yseries", "RemoveCustomApp")
+local yseries_send_app_message = get_alias_export("yseries", "SendAppMessage")
+local yseries_close_app = get_alias_export("yseries", "CloseApp")
+local yseries_get_data_loaded = get_alias_export("yseries", "GetDataLoaded")
+
+local expected_provider_resources = {
+    ["lb-phone"] = true,
+    ["17mov_Phone"] = true,
+    ["high-phone"] = true,
+    ["qs-smartphone"] = true,
+    ["yseries"] = true,
+}
+local resource_start_events = {}
+for index = 1, #triggered_events do
+    local event = triggered_events[index]
+    local resource_name = event.arguments[1]
+    if event.event_name == "onResourceStart" then
+        resource_start_events[resource_name] = true
+    end
+end
+for resource_name in pairs(expected_provider_resources) do
+    assert(resource_start_events[resource_name], ("Missing %s provider start signal"):format(resource_name))
+end
+assert(yseries_get_data_loaded(), "YSeries must see the compatibility provider as loaded")
+
 invoking_resource = "lb_app"
-local lb_success, lb_error = registered_exports.AddCustomApp({
+local lb_success, lb_error = lb_add_custom_app({
     identifier = "dispatch",
     name = "Dispatch",
     description = "Dispatch terminal",
     ui = "ui/index.html",
+    onInstall = make_cfx_function_reference("install-hook", function()
+        error("vendor install failure")
+    end),
+    onOpen = make_cfx_function_reference("open-hook", function()
+        error("vendor open failure")
+    end),
 })
 assert(lb_success and lb_error == nil, "LB AddCustomApp must register through the shared export")
 
+local lifecycle_callback = assert(registered_nui_callbacks["custom-app:lifecycle"])
+local lifecycle_response
+SkyPhoneApps.SetPhoneOpen(true)
+lifecycle_callback({ appId = "dispatch", event = "install" }, function(response)
+    lifecycle_response = response
+end)
+assert(lifecycle_response.success, "a vendor install hook failure must not fail installation")
+lifecycle_callback({ appId = "dispatch", event = "open" }, function(response)
+    lifecycle_response = response
+end)
+assert(lifecycle_response.success, "a vendor open hook failure must not prevent opening the app")
+lifecycle_callback({ appId = "dispatch", event = "ready" }, function(response)
+    lifecycle_response = response
+end)
+assert(lifecycle_response.success, "ready must complete after a failed vendor open hook")
+SkyPhoneApps.SetPhoneOpen(false)
+
 invoking_resource = "another_app"
-local duplicate_success, duplicate_error = registered_exports.AddCustomApp({
+local duplicate_success, duplicate_error = lb_add_custom_app({
     identifier = "dispatch",
     name = "Hijack",
     description = "Hijack",
@@ -83,18 +193,61 @@ local duplicate_success, duplicate_error = registered_exports.AddCustomApp({
 })
 assert(not duplicate_success and duplicate_error == "duplicate_app_id", "cross-owner IDs must be rejected")
 
-local remove_success, remove_error = registered_exports.RemoveCustomApp("dispatch")
+local remove_success, remove_error = lb_remove_custom_app("dispatch")
 assert(not remove_success and remove_error == "app_owner_mismatch", "cross-owner removal must be rejected")
 
 invoking_resource = "lb_app"
-assert(registered_exports.RemoveCustomApp("dispatch"), "the LB owner must be able to remove its app")
+local inactive_message_success, inactive_message_error = lb_send_custom_app_message("dispatch", { type = "ping" })
+assert(not inactive_message_success and inactive_message_error == "app_not_active", "LB message alias must preserve app state checks")
+local closed_open_success, closed_open_error = lb_open_app("dispatch")
+assert(not closed_open_success and closed_open_error == "phone_closed", "LB open alias must preserve phone state checks")
+local inactive_close_success, inactive_close_error = lb_close_app({ app = "dispatch" })
+assert(not inactive_close_success and inactive_close_error == "app_not_active", "LB close alias must preserve app state checks")
+assert(lb_remove_custom_app("dispatch"), "the LB owner must be able to remove its app")
+
+invoking_resource = "phone_adapter"
+assert(lb_add_custom_app({
+    identifier = "manufacturer-app",
+    name = "Manufacturer App",
+    description = "Manufacturer-owned UI assets",
+    ui = "manufacturer_app/ui/index.html",
+    icon = "nui://manufacturer_app/ui/icon.png",
+}), "LB resource-prefixed assets must register through an adapter")
+SkyPhoneApps.SetPhoneOpen(true)
+SkyPhoneApps.SendCatalog()
+local catalog_message = nui_messages[#nui_messages]
+local manufacturer_app
+for index = 1, #catalog_message.data.apps do
+    if catalog_message.data.apps[index].id == "manufacturer-app" then
+        manufacturer_app = catalog_message.data.apps[index]
+        break
+    end
+end
+assert(manufacturer_app, "manufacturer app must be present in the catalog")
+assert(
+    manufacturer_app.ui == "https://cfx-nui-manufacturer_app/ui/index.html",
+    "LB resource-prefixed UI must preserve its asset resource"
+)
+assert(
+    manufacturer_app.icon == "https://cfx-nui-manufacturer_app/ui/icon.png",
+    "LB resource-prefixed icon must preserve its asset resource"
+)
+SkyPhoneApps.SetPhoneOpen(false)
 
 invoking_resource = "yseries_app"
-assert(registered_exports.AddCustomApp({
+assert(yseries_add_custom_app({
     key = "slots",
     name = "Slots",
     ui = "https://cfx-nui-yseries_app/ui/index.html",
+    icon = {
+        yos = "https://cdn.example.com/slots.png",
+    },
 }), "YSeries AddCustomApp must be selected from the key field")
+local yseries_message_success, yseries_message_error = yseries_send_app_message("slots", { type = "ping" })
+assert(not yseries_message_success and yseries_message_error == "app_not_active", "YSeries message alias must preserve app state checks")
+local yseries_close_success, yseries_close_error = yseries_close_app({ app = "slots" })
+assert(not yseries_close_success and yseries_close_error == "app_not_active", "YSeries close alias must preserve app state checks")
+assert(yseries_remove_custom_app("slots"), "YSeries RemoveCustomApp must use the provider alias")
 
 local ambiguous_success, ambiguous_error = registered_exports.AddCustomApp({
     id = "ambiguous",
@@ -105,14 +258,17 @@ local ambiguous_success, ambiguous_error = registered_exports.AddCustomApp({
 assert(not ambiguous_success and ambiguous_error == "ambiguous_app_provider", "ambiguous schemas must fail")
 
 invoking_resource = "mov_app"
-assert(registered_exports.AddApplication({
+assert(mov_add_application({
     name = "market",
     label = "Market",
     ui = "https://cfx-nui-mov_app/ui/index.html",
 }), "17mov AddApplication must register")
+local mov_message_success, mov_message_error = mov_send_app_message("market", { type = "ping" })
+assert(not mov_message_success and mov_message_error == "app_not_active", "17mov message alias must preserve app state checks")
+assert(mov_remove_application("market"), "17mov RemoveApplication must use the provider alias")
 
 invoking_resource = "high_app"
-assert(registered_exports.addApplication("bankingv2", {
+assert(high_add_application("bankingv2", {
     externalUrl = "@high_app/ui/index.html",
 }, {
     en = {
@@ -120,9 +276,11 @@ assert(registered_exports.addApplication("bankingv2", {
         description = "Banking app",
     },
 }), "High addApplication must register")
+local high_message_success, high_message_error = high_send_app_nui("bankingv2", { type = "ping" })
+assert(not high_message_success and high_message_error == "app_not_active", "High message alias must preserve app state checks")
 
 invoking_resource = "quasar_app"
-assert(registered_exports.addCustomApp({
+assert(quasar_add_custom_app({
     id = "services",
     label = "Services",
     iframe = {
@@ -130,11 +288,14 @@ assert(registered_exports.addCustomApp({
     },
 }), "Quasar addCustomApp must register")
 
-local quasar_apps = registered_exports.getCustomApps()
+local quasar_apps = quasar_get_custom_apps()
 assert(#quasar_apps == 1 and quasar_apps[1].id == "services", "Quasar getCustomApps must expose the registry")
-assert(registered_exports.updateCustomApp("services", {
+assert(quasar_update_custom_app("services", {
     label = "City Services",
 }), "Quasar updateCustomApp must update an owned app")
-assert(registered_exports.removeCustomApp("services"), "Quasar removeCustomApp must remove an owned app")
+local quasar_open_success, quasar_open_error = quasar_open_phone_app("services")
+assert(not quasar_open_success and quasar_open_error == "phone_closed", "Quasar open alias must preserve phone state checks")
+assert(quasar_remove_custom_app("services"), "Quasar removeCustomApp must remove an owned app")
+assert(quasar_add_custom_apps_batch({}), "Quasar batch alias must accept an empty batch")
 
 print("Custom app compatibility client tests passed")
diff --git a/tests/custom_app_compat_server.lua b/tests/custom_app_compat_server.lua
index 2ba77f6..3348d66 100644
--- a/tests/custom_app_compat_server.lua
+++ b/tests/custom_app_compat_server.lua
@@ -1,4 +1,5 @@
 local event_handlers = {}
+local registered_event_handlers = {}
 local registered_exports = {}
 local sent_events = {}
 local invoking_resource = nil
@@ -25,7 +26,11 @@ function RegisterNetEvent(event_name, handler)
     event_handlers[event_name] = handler
 end
 
-function AddEventHandler() end
+function AddEventHandler(event_name, handler)
+    local handlers = registered_event_handlers[event_name] or {}
+    handlers[#handlers + 1] = handler
+    registered_event_handlers[event_name] = handlers
+end
 
 function TriggerClientEvent(event_name, target, ...)
     sent_events[#sent_events + 1] = {
@@ -38,8 +43,21 @@ end
 dofile("sky_phone/source/shared/custom_app_compat.lua")
 dofile("sky_phone/source/server/custom_app_compat.lua")
 
+local alias_handlers = registered_event_handlers["__cfx_export_high-phone_addApplication"]
+assert(alias_handlers and #alias_handlers == 1, "Missing high-phone:addApplication export alias")
+local high_add_application
+local export_callback = setmetatable({
+    __cfx_functionReference = "test-export-callback",
+}, {
+    __call = function(_, handler)
+        high_add_application = handler
+    end,
+})
+alias_handlers[1](export_callback)
+assert(type(high_add_application) == "function", "Invalid high-phone:addApplication export alias")
+
 invoking_resource = "high_server_app"
-local add_success, add_error = registered_exports.addApplication("bankingv2", {
+local add_success, add_error = high_add_application("bankingv2", {
     externalUrl = "@high_server_app/ui/index.html",
 }, {
     en = {
@@ -53,7 +71,7 @@ assert(sent_events[1].event_name == "sky_phone:compat:high:client:syncApplicatio
 assert(sent_events[1].arguments[1] == "high_server_app", "High sync must preserve the owner")
 
 invoking_resource = "other_server_app"
-local duplicate_success, duplicate_error = registered_exports.addApplication("bankingv2", {
+local duplicate_success, duplicate_error = high_add_application("bankingv2", {
     externalUrl = "@other_server_app/ui/index.html",
 })
 assert(not duplicate_success and duplicate_error == "duplicate_app_id", "High cross-owner replacement must fail")

From c95775fb2ce5dd635188a192a20d336818391dc6 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 18:39:11 +0200
Subject: [PATCH 10/63] FIX - defer custom app lifecycle hooks

---
 sky_phone/source/client/custom_apps.lua | 44 ++++++++++++++++++++-----
 tests/custom_app_compat_client.lua      | 13 +++++++-
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/sky_phone/source/client/custom_apps.lua b/sky_phone/source/client/custom_apps.lua
index c098f70..87b4222 100644
--- a/sky_phone/source/client/custom_apps.lua
+++ b/sky_phone/source/client/custom_apps.lua
@@ -609,14 +609,40 @@ local function invoke_hook(app, hook_name, payload)
     return false
 end
 
-local function clear_active_app(invoke_close_hook)
+local function invoke_or_defer_hook(app, hook_name, payload, deferred_hooks)
+    if not app.catalog.compatibility then
+        return invoke_hook(app, hook_name, payload)
+    end
+
+    deferred_hooks[#deferred_hooks + 1] = {
+        app = app,
+        hookName = hook_name,
+        payload = payload,
+    }
+    return true
+end
+
+local function invoke_deferred_hooks(deferred_hooks)
+    for index = 1, #deferred_hooks do
+        local deferred_hook = deferred_hooks[index]
+        CreateThread(function()
+            invoke_hook(deferred_hook.app, deferred_hook.hookName, deferred_hook.payload)
+        end)
+    end
+end
+
+local function clear_active_app(invoke_close_hook, deferred_hooks)
     if not active_app_id then
         return
     end
 
     local app = apps_by_id[active_app_id]
     if app and invoke_close_hook then
-        invoke_hook(app, "onClose")
+        if deferred_hooks then
+            invoke_or_defer_hook(app, "onClose", nil, deferred_hooks)
+        else
+            invoke_hook(app, "onClose")
+        end
     end
     queued_messages[active_app_id] = nil
     active_app_id = nil
@@ -1383,17 +1409,18 @@ RegisterNUICallback("custom-app:lifecycle", function(data, cb)
         return
     end
 
+    local deferred_hooks = {}
     local hook_success = true
     if lifecycle_event == "install" then
-        hook_success = invoke_hook(app, "onInstall", lifecycle_payload)
+        hook_success = invoke_or_defer_hook(app, "onInstall", lifecycle_payload, deferred_hooks)
     elseif lifecycle_event == "open" then
         if active_app_id and active_app_id ~= data.appId then
-            clear_active_app(true)
+            clear_active_app(true, deferred_hooks)
         end
         active_app_id = data.appId
         active_app_ready = false
         queued_messages[data.appId] = {}
-        hook_success = invoke_hook(app, "onOpen", lifecycle_payload)
+        hook_success = invoke_or_defer_hook(app, "onOpen", lifecycle_payload, deferred_hooks)
     elseif active_app_id ~= data.appId then
         cb({ success = false, error = "app_not_active" })
         return
@@ -1408,17 +1435,18 @@ RegisterNUICallback("custom-app:lifecycle", function(data, cb)
         for index = 1, #pending do
             deliver_custom_app_message(data.appId, pending[index].payload)
         end
-        hook_success = invoke_hook(app, "onReady", lifecycle_payload)
+        hook_success = invoke_or_defer_hook(app, "onReady", lifecycle_payload, deferred_hooks)
     else
-        hook_success = invoke_hook(app, "onClose", lifecycle_payload)
+        hook_success = invoke_or_defer_hook(app, "onClose", lifecycle_payload, deferred_hooks)
         clear_active_app(false)
     end
 
-    if not hook_success and not app.catalog.compatibility then
+    if not hook_success then
         cb({ success = false, error = "hook_failed" })
         return
     end
     cb({ success = true })
+    invoke_deferred_hooks(deferred_hooks)
 end)
 
 AddEventHandler("onClientResourceStop", function(resource_name)
diff --git a/tests/custom_app_compat_client.lua b/tests/custom_app_compat_client.lua
index f4a5027..558184d 100644
--- a/tests/custom_app_compat_client.lua
+++ b/tests/custom_app_compat_client.lua
@@ -153,16 +153,21 @@ end
 assert(yseries_get_data_loaded(), "YSeries must see the compatibility provider as loaded")
 
 invoking_resource = "lb_app"
+local lifecycle_response_delivered = false
+local install_hook_after_response = false
+local open_hook_after_response = false
 local lb_success, lb_error = lb_add_custom_app({
     identifier = "dispatch",
     name = "Dispatch",
     description = "Dispatch terminal",
     ui = "ui/index.html",
     onInstall = make_cfx_function_reference("install-hook", function()
+        install_hook_after_response = lifecycle_response_delivered
         error("vendor install failure")
     end),
     onOpen = make_cfx_function_reference("open-hook", function()
-        error("vendor open failure")
+        open_hook_after_response = lifecycle_response_delivered
+        error(5)
     end),
 })
 assert(lb_success and lb_error == nil, "LB AddCustomApp must register through the shared export")
@@ -170,14 +175,20 @@ assert(lb_success and lb_error == nil, "LB AddCustomApp must register through th
 local lifecycle_callback = assert(registered_nui_callbacks["custom-app:lifecycle"])
 local lifecycle_response
 SkyPhoneApps.SetPhoneOpen(true)
+lifecycle_response_delivered = false
 lifecycle_callback({ appId = "dispatch", event = "install" }, function(response)
     lifecycle_response = response
+    lifecycle_response_delivered = true
 end)
 assert(lifecycle_response.success, "a vendor install hook failure must not fail installation")
+assert(install_hook_after_response, "a vendor install hook must run after the NUI response")
+lifecycle_response_delivered = false
 lifecycle_callback({ appId = "dispatch", event = "open" }, function(response)
     lifecycle_response = response
+    lifecycle_response_delivered = true
 end)
 assert(lifecycle_response.success, "a vendor open hook failure must not prevent opening the app")
+assert(open_hook_after_response, "a vendor open hook must run after the NUI response")
 lifecycle_callback({ appId = "dispatch", event = "ready" }, function(response)
     lifecycle_response = response
 end)

From 4be632759ba3762f92d42368ebb0aecdf01bce84 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 19:00:51 +0200
Subject: [PATCH 11/63] FIX - isolate custom app JSON payload

---
 sky_phone/source/client/custom_apps.lua |  3 ++-
 tests/custom_app_compat_client.lua      | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/sky_phone/source/client/custom_apps.lua b/sky_phone/source/client/custom_apps.lua
index 87b4222..ea0ed2c 100644
--- a/sky_phone/source/client/custom_apps.lua
+++ b/sky_phone/source/client/custom_apps.lua
@@ -280,7 +280,8 @@ local function normalize_json_payload(payload, maximum_bytes)
         return nil, "payload_too_large"
     end
 
-    return json.decode(encoded)
+    local decoded = json.decode(encoded)
+    return decoded
 end
 
 local function validate_optional_text(value, error_code, maximum_length)
diff --git a/tests/custom_app_compat_client.lua b/tests/custom_app_compat_client.lua
index 558184d..09353b2 100644
--- a/tests/custom_app_compat_client.lua
+++ b/tests/custom_app_compat_client.lua
@@ -24,10 +24,16 @@ Config = {
 }
 
 json = {
-    decode = function()
+    decode = function(encoded)
+        if encoded == "null" then
+            return nil, 5
+        end
         return {}
     end,
-    encode = function()
+    encode = function(value)
+        if value == nil then
+            return "null"
+        end
         return "{}"
     end,
 }

From 8b205739a5da531859c48102ce812f39139e58b3 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 19:23:40 +0200
Subject: [PATCH 12/63] FIX - boot LB custom app frames

---
 frontend/src/components/CustomAppFrame.vue |  7 ++++++-
 frontend/src/utils/customAppBridge.test.ts | 10 ++++++++++
 frontend/src/utils/customAppBridge.ts      |  9 +++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
index 1b11e4f..fdbd4d5 100644
--- a/frontend/src/components/CustomAppFrame.vue
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -17,6 +17,7 @@ import type {
 } from '@/types/apps'
 import {
   createCustomAppBridgeRequestHandler,
+  getCustomAppFrameBootstrapMessages,
   getSkyPhoneAppCapabilities,
   shouldReportCustomAppReady,
 } from '@/utils/customAppBridge'
@@ -266,6 +267,11 @@ function onFrameLoad(): void {
     loadTimeout = undefined
   }
   frameLoaded.value = true
+  for (const message of getCustomAppFrameBootstrapMessages(
+    props.app.compatibility,
+  )) {
+    postToFrame(message)
+  }
   if (props.app.bridgeMode === 'legacy' || skyBridgeReady.value) {
     frameUnavailable.value = false
   }
@@ -331,7 +337,6 @@ watch(() => catalog.openRequests[props.app.id], flushOpenRequest, {
       :class="{
         'custom-app-frame--fix-blur': app.compatibility.fixBlur === true,
       }"
-      :name="app.ownerResource"
       :sandbox="sandbox"
       :src="frameUrl"
       :title="app.name"
diff --git a/frontend/src/utils/customAppBridge.test.ts b/frontend/src/utils/customAppBridge.test.ts
index db1a77d..4e61985 100644
--- a/frontend/src/utils/customAppBridge.test.ts
+++ b/frontend/src/utils/customAppBridge.test.ts
@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   createCustomAppBridgeRequestHandler,
+  getCustomAppFrameBootstrapMessages,
   getSkyPhoneAppCapabilities,
   shouldReportCustomAppReady,
   type CustomAppBridgeNotification,
@@ -60,6 +61,15 @@ describe('custom app bridge', () => {
     expect(shouldReportCustomAppReady('sky', 'bridge-ready')).toBe(true)
   })
 
+  it('boots LB Phone frames with their documented ready signal', () => {
+    expect(
+      getCustomAppFrameBootstrapMessages({ provider: 'lb_phone' }),
+    ).toEqual(['componentsLoaded'])
+    expect(
+      getCustomAppFrameBootstrapMessages({ provider: '17mov' }),
+    ).toEqual([])
+  })
+
   it('passes validated storage data and server response data through', async () => {
     source.capabilities = ['device.storage']
     storageCall.mockResolvedValue({
diff --git a/frontend/src/utils/customAppBridge.ts b/frontend/src/utils/customAppBridge.ts
index e51a00e..fdde136 100644
--- a/frontend/src/utils/customAppBridge.ts
+++ b/frontend/src/utils/customAppBridge.ts
@@ -294,6 +294,15 @@ export function shouldReportCustomAppReady(
     : signal === 'frame-load'
 }
 
+export function getCustomAppFrameBootstrapMessages(
+  compatibility: Readonly<Record<string, unknown>>,
+): readonly unknown[] {
+  if (compatibility.provider === 'lb_phone') {
+    return ['componentsLoaded']
+  }
+  return []
+}
+
 export function createCustomAppBridgeRequestHandler(
   dependencies: CustomAppBridgeDependencies,
 ): {

From dc401e2b8705ef765af5bf5dc5f667e6fcae3832 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 20:31:01 +0200
Subject: [PATCH 13/63] FIX - provide LB custom app browser bridge

---
 frontend/src/components/CustomAppFrame.vue    |  76 +++++-
 frontend/src/utils/lbPhoneAppBridge.test.ts   | 119 +++++++++
 frontend/src/utils/lbPhoneAppBridge.ts        | 237 ++++++++++++++++++
 sky_phone/source/shared/custom_app_compat.lua |   1 +
 tests/custom_app_compat.lua                   |  12 +
 5 files changed, 441 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/utils/lbPhoneAppBridge.test.ts
 create mode 100644 frontend/src/utils/lbPhoneAppBridge.ts

diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
index fdbd4d5..1139e6f 100644
--- a/frontend/src/components/CustomAppFrame.vue
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -27,6 +27,12 @@ import {
   customAppLifecycleScheduler,
   getCustomAppSafeArea,
 } from '@/utils/customAppLifecycle'
+import {
+  createLbPhoneFrameDocument,
+  createLbPhoneHostSettings,
+  getLbPhoneCallbackResource,
+  usesLbPhoneHostRuntime,
+} from '@/utils/lbPhoneAppBridge'
 import { nuiCall } from '@/utils/nui'
 
 const props = defineProps<{
@@ -43,7 +49,9 @@ const frame = ref<HTMLIFrameElement | null>(null)
 const frameLoaded = ref(false)
 const frameUnavailable = ref(false)
 const skyBridgeReady = ref(false)
+const lbFrameDocument = ref<string | null>(null)
 let loadTimeout: ReturnType<typeof setTimeout> | undefined
+let frameDocumentController: AbortController | undefined
 const lifecycleAppId = props.app.id
 const initialOpenRequest: CustomAppOpenRequest | undefined =
   catalog.openRequests[lifecycleAppId]
@@ -94,11 +102,18 @@ const frameUrl = computed(() => {
   return url.href
 })
 const frameOrigin = computed(() => new URL(frameUrl.value).origin)
+const lbHostRuntime = computed(() => usesLbPhoneHostRuntime(props.app))
+const frameMountable = computed(
+  () => !lbHostRuntime.value || lbFrameDocument.value !== null,
+)
+const frameSource = computed(() =>
+  lbHostRuntime.value ? undefined : frameUrl.value,
+)
 const postMessageOrigin = computed(() =>
-  props.app.bundled ? '*' : frameOrigin.value,
+  props.app.bundled || lbHostRuntime.value ? '*' : frameOrigin.value,
 )
 const sandbox = computed(() =>
-  props.app.bundled
+  props.app.bundled || lbHostRuntime.value
     ? 'allow-downloads allow-forms allow-modals allow-scripts'
     : 'allow-downloads allow-forms allow-modals allow-same-origin allow-scripts',
 )
@@ -120,6 +135,15 @@ const context = computed<SkyPhoneAppContextV1>(() => ({
   protocolVersion: PROTOCOL_VERSION,
   safeArea: getCustomAppSafeArea(props.app.orientation),
 }))
+const lbSettings = computed(() =>
+  createLbPhoneHostSettings({
+    deviceName: phone.device?.name ?? '',
+    isDarkMode: phone.isDarkMode,
+    language: phone.lang,
+    preferences: phone.preferences,
+    securityEnabled: phone.security.enabled,
+  }),
+)
 
 function postToFrame(payload: unknown): boolean {
   const target = frame.value?.contentWindow
@@ -149,6 +173,44 @@ function sendContext(): void {
   })
 }
 
+function sendLbSettings(): void {
+  if (!lbHostRuntime.value || !frameLoaded.value) return
+  postToFrame({
+    settings: lbSettings.value,
+    type: 'sky-phone:lb-settings',
+  })
+}
+
+async function prepareLbFrameDocument(): Promise<void> {
+  const controller = new AbortController()
+  frameDocumentController = controller
+  try {
+    const response = await fetch(frameUrl.value, {
+      credentials: 'omit',
+      signal: controller.signal,
+    })
+    if (!response.ok) {
+      throw new Error(`${response.status} ${response.statusText}`)
+    }
+    const html = await response.text()
+    lbFrameDocument.value = createLbPhoneFrameDocument(html, {
+      appName: props.app.id,
+      resourceName: getLbPhoneCallbackResource(props.app),
+      settings: lbSettings.value,
+      ui: props.app.ui,
+    })
+  } catch (error) {
+    if (controller.signal.aborted) return
+    if (loadTimeout !== undefined) clearTimeout(loadTimeout)
+    loadTimeout = undefined
+    frameUnavailable.value = true
+    console.error(
+      `[Custom apps] Could not prepare LB Phone frame ${props.app.id}.`,
+      error,
+    )
+  }
+}
+
 function flushOpenRequest(): void {
   const request = catalog.openRequests[props.app.id]
   if (!request || !frameLoaded.value) return
@@ -216,7 +278,7 @@ async function handleBridgeRequest(
 
 function isTrustedFrameMessage(event: MessageEvent): boolean {
   if (event.source !== frame.value?.contentWindow) return false
-  if (props.app.bundled) {
+  if (props.app.bundled || lbHostRuntime.value) {
     return event.origin === 'null' || event.origin === frameOrigin.value
   }
   return event.origin === frameOrigin.value
@@ -272,6 +334,7 @@ function onFrameLoad(): void {
   )) {
     postToFrame(message)
   }
+  sendLbSettings()
   if (props.app.bridgeMode === 'legacy' || skyBridgeReady.value) {
     frameUnavailable.value = false
   }
@@ -300,16 +363,19 @@ onBeforeMount(() => {
       `[Custom apps] Frame readiness timed out for ${props.app.id}.`,
     )
   }, props.app.readyTimeoutMs)
+  if (lbHostRuntime.value) void prepareLbFrameDocument()
 })
 
 onBeforeUnmount(() => {
   if (loadTimeout !== undefined) clearTimeout(loadTimeout)
+  frameDocumentController?.abort()
   window.removeEventListener('message', onFrameMessage)
   orientation.release()
   void lifecycle.report('close')
 })
 
 watch(context, sendContext, { deep: true })
+watch(lbSettings, sendLbSettings, { deep: true })
 watch(
   () => props.app.orientation,
   (nextOrientation) => orientation.apply(nextOrientation),
@@ -331,6 +397,7 @@ watch(() => catalog.openRequests[props.app.id], flushOpenRequest, {
     }"
   >
     <iframe
+      v-if="frameMountable"
       ref="frame"
       v-show="frameReady && !frameUnavailable"
       class="custom-app-frame"
@@ -338,7 +405,8 @@ watch(() => catalog.openRequests[props.app.id], flushOpenRequest, {
         'custom-app-frame--fix-blur': app.compatibility.fixBlur === true,
       }"
       :sandbox="sandbox"
-      :src="frameUrl"
+      :src="frameSource"
+      :srcdoc="lbFrameDocument ?? undefined"
       :title="app.name"
       referrerpolicy="no-referrer"
       @load="onFrameLoad"
diff --git a/frontend/src/utils/lbPhoneAppBridge.test.ts b/frontend/src/utils/lbPhoneAppBridge.test.ts
new file mode 100644
index 0000000..c26af99
--- /dev/null
+++ b/frontend/src/utils/lbPhoneAppBridge.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ExternalPhoneAppDefinition } from '@/types/apps'
+import {
+  createLbPhoneFrameDocument,
+  createLbPhoneHostSettings,
+  getLbPhoneCallbackResource,
+  usesLbPhoneHostRuntime,
+} from '@/utils/lbPhoneAppBridge'
+import { DEFAULT_PHONE_PREFERENCES } from '@/utils/preferences'
+
+function externalApp(
+  overrides: Partial<ExternalPhoneAppDefinition> = {},
+): ExternalPhoneAppDefinition {
+  return {
+    bridgeMode: 'legacy',
+    bundled: false,
+    capabilities: [],
+    category: 'games',
+    compatibility: { provider: 'lb_phone', resourceName: 'snake_app' },
+    component: null,
+    defaultInstalled: true,
+    description: 'Snake',
+    developer: 'Example',
+    dockOrder: null,
+    gridOrder: 100,
+    icon: {} as ExternalPhoneAppDefinition['icon'],
+    iconClass: 'app-icon--custom',
+    iconImage: 'https://cfx-nui-snake_app/ui/icon.png',
+    id: 'snake-game' as ExternalPhoneAppDefinition['id'],
+    kind: 'external',
+    name: 'Snake',
+    orientation: 'portrait',
+    ownerResource: 'phone_adapter',
+    readyTimeoutMs: 8000,
+    removable: true,
+    route: '/apps/snake-game' as ExternalPhoneAppDefinition['route'],
+    ui: 'https://cfx-nui-snake_app/ui/dist/index.html',
+    ...overrides,
+  }
+}
+
+describe('LB Phone app bridge', () => {
+  it('selects local LB documents without taking over query-driven apps', () => {
+    expect(usesLbPhoneHostRuntime(externalApp())).toBe(true)
+    expect(
+      usesLbPhoneHostRuntime(
+        externalApp({
+          ui: 'https://cfx-nui-snake_app/ui/index.html?route=/dispatch',
+        }),
+      ),
+    ).toBe(false)
+    expect(
+      usesLbPhoneHostRuntime(
+        externalApp({ compatibility: { provider: '17mov' } }),
+      ),
+    ).toBe(false)
+  })
+
+  it('uses the declared callback resource and rejects malformed overrides', () => {
+    expect(getLbPhoneCallbackResource(externalApp())).toBe('snake_app')
+    expect(
+      getLbPhoneCallbackResource(
+        externalApp({
+          compatibility: {
+            provider: 'lb_phone',
+            resourceName: '../wrong',
+          },
+        }),
+      ),
+    ).toBe('phone_adapter')
+  })
+
+  it('maps phone preferences into the LB settings contract', () => {
+    const settings = createLbPhoneHostSettings({
+      deviceName: 'Main phone',
+      isDarkMode: true,
+      language: 'de',
+      preferences: DEFAULT_PHONE_PREFERENCES,
+      securityEnabled: true,
+    })
+
+    expect(settings).toMatchObject({
+      display: { brightness: 1, size: 1, theme: 'dark' },
+      locale: 'de',
+      name: 'Main phone',
+      security: { pinCode: true },
+    })
+  })
+
+  it('injects the LB runtime and asset base before the vendor bundle', () => {
+    const html =
+      '<!doctype html><html><head><script type="module" src="/ui/dist/assets/index.js"></script></head><body></body></html>'
+    const document = createLbPhoneFrameDocument(html, {
+      appName: 'snake-game',
+      resourceName: 'snake_app',
+      settings: createLbPhoneHostSettings({
+        deviceName: '</script><script>window.injected=true</script>',
+        isDarkMode: false,
+        language: 'en',
+        preferences: DEFAULT_PHONE_PREFERENCES,
+        securityEnabled: false,
+      }),
+      ui: 'https://cfx-nui-snake_app/ui/dist/index.html',
+    })
+
+    expect(document.indexOf('<base href=')).toBeLessThan(
+      document.indexOf('src="/ui/dist/assets/index.js"'),
+    )
+    expect(document).toContain('globalThis.fetchNui = async')
+    expect(document).toContain('globalThis.onNuiEvent = globalThis.useNuiEvent')
+    expect(document).toContain('https://cfx-nui-snake_app/ui/dist/')
+    expect(document).not.toContain('</script><script>window.injected=true')
+
+    const runtime = /<script>([\s\S]*?)<\/script>/.exec(document)?.[1]
+    expect(runtime).toBeTruthy()
+    expect(() => new Function(runtime ?? '')).not.toThrow()
+  })
+})
diff --git a/frontend/src/utils/lbPhoneAppBridge.ts b/frontend/src/utils/lbPhoneAppBridge.ts
new file mode 100644
index 0000000..da52aa2
--- /dev/null
+++ b/frontend/src/utils/lbPhoneAppBridge.ts
@@ -0,0 +1,237 @@
+import type { ExternalPhoneAppDefinition } from '@/types/apps'
+import type { PhonePreferencesV1 } from '@/utils/preferences'
+
+const LB_PHONE_PROVIDER = 'lb_phone'
+const RESOURCE_NAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/
+const MAX_FRAME_DOCUMENT_BYTES = 1_048_576
+
+export type LbPhoneHostSettings = {
+  airplaneMode: boolean
+  apps: string[][]
+  display: {
+    automatic: boolean
+    brightness: number
+    size: number
+    theme: 'dark' | 'light'
+  }
+  doNotDisturb: boolean
+  locale: string
+  lockscreen: {
+    color: string
+    fontStyle: number
+    layout: number
+  }
+  name: string
+  notifications: Record<string, { enabled: boolean; sound: boolean }>
+  phone: { showCallerId: boolean }
+  security: { faceId: boolean; pinCode: boolean }
+  sound: {
+    ringtone: string
+    silent: boolean
+    texttone: string
+    volume: number
+  }
+  storage: { total: number; used: number }
+  streamerMode: boolean
+  time: { twelveHourClock: boolean }
+  version: string
+  wallpaper: { background: string }
+  weather: { celcius: boolean }
+}
+
+type LbPhoneFrameDocumentOptions = {
+  appName: string
+  resourceName: string
+  settings: LbPhoneHostSettings
+  ui: string
+}
+
+type LbPhoneSettingsOptions = {
+  deviceName: string
+  isDarkMode: boolean
+  language: string
+  preferences: PhonePreferencesV1
+  securityEnabled: boolean
+}
+
+const LB_PHONE_RUNTIME_SOURCE = String.raw`
+const listeners = new Map();
+const settingsListeners = new Set();
+const resourcePattern = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/;
+const eventPattern = /^[A-Za-z0-9][A-Za-z0-9:._/-]{0,127}$/;
+
+function applySettings(nextSettings) {
+  globalThis.settings = nextSettings;
+  const theme = nextSettings?.display?.theme === 'dark' ? 'dark' : 'light';
+  document.documentElement.dataset.theme = theme;
+  if (document.body) document.body.dataset.theme = theme;
+}
+
+globalThis.resourceName = config.resourceName;
+globalThis.appName = config.appName;
+globalThis.components = globalThis.components ?? {};
+globalThis.GetParentResourceName = () => config.resourceName;
+globalThis.fetchNui = async (eventName, data, requestedResource) => {
+  if (typeof eventName !== 'string' || !eventPattern.test(eventName) || eventName.includes('..')) {
+    throw new TypeError('Invalid NUI callback name');
+  }
+
+  const targetResource = typeof requestedResource === 'string'
+    ? requestedResource
+    : config.resourceName;
+  if (!resourcePattern.test(targetResource)) {
+    throw new TypeError('Invalid NUI callback resource');
+  }
+
+  const response = await fetch('https://' + targetResource + '/' + eventName, {
+    body: JSON.stringify(data === undefined ? {} : data),
+    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+    method: 'POST'
+  });
+  if (!response.ok) {
+    throw new Error('NUI callback failed with HTTP ' + response.status);
+  }
+
+  const body = await response.text();
+  return body ? JSON.parse(body) : null;
+};
+globalThis.onNuiEvent = globalThis.useNuiEvent = (eventName, callback) => {
+  if (typeof eventName !== 'string' || !eventPattern.test(eventName) || typeof callback !== 'function') {
+    throw new TypeError('Invalid NUI event listener');
+  }
+  const callbacks = listeners.get(eventName) ?? new Set();
+  callbacks.add(callback);
+  listeners.set(eventName, callbacks);
+};
+globalThis.onSettingsChange = (callback) => {
+  if (typeof callback !== 'function') throw new TypeError('Invalid settings listener');
+  settingsListeners.add(callback);
+};
+globalThis.getSettings = async () => globalThis.settings;
+
+globalThis.addEventListener('message', (event) => {
+  const message = event.data;
+  if (!message || typeof message !== 'object') return;
+
+  if (message.type === 'sky-phone:lb-settings') {
+    applySettings(message.settings);
+    for (const callback of settingsListeners) callback(globalThis.settings);
+    return;
+  }
+
+  const eventName = typeof message.action === 'string'
+    ? message.action
+    : typeof message.type === 'string'
+      ? message.type
+      : null;
+  if (!eventName) return;
+  const data = Object.prototype.hasOwnProperty.call(message, 'data')
+    ? message.data
+    : message;
+  for (const callback of listeners.get(eventName) ?? []) callback(data);
+});
+
+applySettings(config.settings);
+document.addEventListener('DOMContentLoaded', () => applySettings(globalThis.settings), { once: true });
+`
+
+function escapeAttribute(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+function serializeForInlineScript(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
+}
+
+export function usesLbPhoneHostRuntime(
+  app: ExternalPhoneAppDefinition,
+): boolean {
+  if (app.compatibility.provider !== LB_PHONE_PROVIDER) return false
+
+  const url = new URL(app.ui)
+  return url.protocol === 'https:' && url.search === ''
+}
+
+export function getLbPhoneCallbackResource(
+  app: ExternalPhoneAppDefinition,
+): string {
+  const configured = app.compatibility.resourceName
+  return typeof configured === 'string' &&
+    RESOURCE_NAME_PATTERN.test(configured)
+    ? configured
+    : app.ownerResource
+}
+
+export function createLbPhoneHostSettings(
+  options: LbPhoneSettingsOptions,
+): LbPhoneHostSettings {
+  const preferences = options.preferences.settings
+  return {
+    airplaneMode: preferences.airplaneMode,
+    apps: [],
+    display: {
+      automatic: preferences.appearanceMode === 'automatic',
+      brightness: preferences.screenBrightness / 100,
+      size: preferences.phoneScale / 100,
+      theme: options.isDarkMode ? 'dark' : 'light',
+    },
+    doNotDisturb: preferences.focusMode,
+    locale: options.language,
+    lockscreen: { color: '#ffffff', fontStyle: 0, layout: 0 },
+    name: options.deviceName,
+    notifications: Object.fromEntries(
+      Object.entries(preferences.notifications).map(([appId, settings]) => [
+        appId,
+        { enabled: settings.enabled, sound: settings.sounds },
+      ]),
+    ),
+    phone: { showCallerId: true },
+    security: { faceId: false, pinCode: options.securityEnabled },
+    sound: {
+      ringtone: preferences.ringtone,
+      silent:
+        preferences.notificationVolume === 0 &&
+        preferences.ringtoneVolume === 0,
+      texttone: preferences.notificationSound,
+      volume: preferences.notificationVolume / 100,
+    },
+    storage: { total: 0, used: 0 },
+    streamerMode: preferences.streamerMode,
+    time: { twelveHourClock: false },
+    version: 'sky_phone',
+    wallpaper: { background: preferences.wallpaper },
+    weather: { celcius: true },
+  }
+}
+
+export function createLbPhoneFrameDocument(
+  html: string,
+  options: LbPhoneFrameDocumentOptions,
+): string {
+  if (
+    new TextEncoder().encode(html).byteLength > MAX_FRAME_DOCUMENT_BYTES ||
+    !RESOURCE_NAME_PATTERN.test(options.resourceName)
+  ) {
+    throw new Error('invalid_lb_phone_frame_document')
+  }
+
+  const head = /<head(?:\s[^>]*)?>/i.exec(html)
+  if (!head) throw new Error('invalid_lb_phone_frame_document')
+
+  const baseUrl = new URL('.', options.ui).href
+  const config = serializeForInlineScript({
+    appName: options.appName,
+    resourceName: options.resourceName,
+    settings: options.settings,
+  })
+  const injection = `<base href="${escapeAttribute(baseUrl)}"><script>(() => { const config = ${config};${LB_PHONE_RUNTIME_SOURCE}\n})();<\/script>`
+  const insertionPoint = head.index + head[0].length
+  return `${html.slice(0, insertionPoint)}${injection}${html.slice(insertionPoint)}`
+}
diff --git a/sky_phone/source/shared/custom_app_compat.lua b/sky_phone/source/shared/custom_app_compat.lua
index ff14ea1..514ddff 100644
--- a/sky_phone/source/shared/custom_app_compat.lua
+++ b/sky_phone/source/shared/custom_app_compat.lua
@@ -137,6 +137,7 @@ function SkyPhoneCompatibility.BuildLbDefinition(owner_resource, app_data)
         compatibility = {
             provider = SkyPhoneCompatibility.Providers.lb,
             apiVersion = 1,
+            resourceName = type(app_data.resource) == "string" and app_data.resource or owner_resource,
         },
     }
 end
diff --git a/tests/custom_app_compat.lua b/tests/custom_app_compat.lua
index 55c79b4..2613ad3 100644
--- a/tests/custom_app_compat.lua
+++ b/tests/custom_app_compat.lua
@@ -13,6 +13,18 @@ assert(lb_definition.id == "dispatch", "LB identifier must map to the Sky app ID
 assert(lb_definition.ui == "ui/index.html", "LB relative UI must remain owner-relative")
 assert(lb_definition.orientation == "landscape", "LB landscape flag must be preserved")
 assert(type(lb_definition.onOpen) == "function", "LB onUse must map to the open lifecycle")
+assert(lb_definition.compatibility.resourceName == "lb_app", "LB callbacks must target the registering resource")
+
+local bridged_lb_definition = assert(SkyPhoneCompatibility.BuildLbDefinition("phone_adapter", {
+    identifier = "bridged",
+    name = "Bridged",
+    ui = "manufacturer_app/ui/index.html",
+    resource = "manufacturer_app",
+}))
+assert(
+    bridged_lb_definition.compatibility.resourceName == "manufacturer_app",
+    "LB adapter callbacks must target the declared app resource"
+)
 
 local invalid_lb, invalid_lb_error = SkyPhoneCompatibility.BuildLbDefinition("lb_app", {
     identifier = "dispatch",

From cdf8d276ef65fcbc70cbfb124c5e51e7acbc5255 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 11 Aug 2026 21:37:39 +0200
Subject: [PATCH 14/63] ADD - share contacts and rich content in chats

---
 README.md                                     |  13 +
 frontend/src/assets/main.css                  |  59 ++++
 .../src/components/MessageContactBubble.vue   | 185 ++++++++++
 frontend/src/components/SharedContentCard.vue | 257 ++++++++++++++
 frontend/src/stores/darkchat.ts               |   2 +
 frontend/src/stores/easyshare.test.ts         |   2 +
 frontend/src/stores/easyshare.ts              |   1 +
 frontend/src/stores/messages.test.ts          |  41 +++
 frontend/src/stores/messages.ts               |  24 +-
 frontend/src/stores/phone.ts                  |  21 ++
 frontend/src/types/darkchat.ts                |   6 +-
 frontend/src/types/easyshare.ts               |   1 +
 frontend/src/types/flare.ts                   |   7 +-
 frontend/src/types/messages.ts                |  23 +-
 frontend/src/views/apps/DarkChatApp.vue       |  53 ++-
 frontend/src/views/apps/FlareApp.vue          |  40 ++-
 frontend/src/views/apps/MessagesApp.vue       | 178 +++++++++-
 frontend/testserver/index.cjs                 | 322 ++++++++++++++++--
 sky_phone/config/locales/en.lua               |  11 +-
 sky_phone/source/server/darkchat.lua          |  22 +-
 sky_phone/source/server/db_migrate.lua        |  13 +-
 sky_phone/source/server/easyshare.lua         |  10 +
 sky_phone/source/server/flare.lua             |  32 +-
 sky_phone/source/server/messages.lua          | 101 +++++-
 sky_phone/sql/install.sql                     |   5 +-
 25 files changed, 1350 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/components/MessageContactBubble.vue
 create mode 100644 frontend/src/components/SharedContentCard.vue

diff --git a/README.md b/README.md
index 025b0d7..6c4b500 100644
--- a/README.md
+++ b/README.md
@@ -224,6 +224,19 @@ From `frontend/`, run `pnpm dev` for browser development. The phone opens automa
 - Profile onboarding: `http://localhost:5174/?apiPort=3002&testScenario=feather-onboarding#/apps/feather`
 - Empty states: `http://localhost:5174/?apiPort=3002&testScenario=feather-empty#/apps/feather`
 
+EasyShare browser data is available from every app that exposes a share action. Open the seeded
+Gallery directly, share an item, and then use the EasyShare and History actions in the sheet:
+
+- Full data, including incoming, transferring, accepted, completed, declined, cancelled, expired,
+  and failed transfers: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-full#/apps/gallery`
+- Incoming request only: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-incoming#/apps/gallery`
+- Transfer history without active requests: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-history#/apps/gallery`
+- Empty nearby and history states: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-empty#/apps/gallery`
+
+In the full scenario, sending to Mia or Jamie creates a pending transfer. Sending to Noah creates a
+transfer at 58 percent so the progress and cancel states can be tested. Visibility changes and
+accepting or declining the seeded incoming request are kept in memory until the mock server restarts.
+
 The full-data scenario includes posts, replies, quotes, media grids, profiles, ranked hashtags, network search results, and every notification type. Run `pnpm test`, `pnpm typecheck`, `pnpm lint`, and `pnpm build` before packaging.
 
 `pnpm build` uses `build.cjs` to replace `sky_phone/source/html` deterministically with the Vite output. Production assets use relative paths so they work through the FiveM NUI protocol.
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index d727a51..5b9a211 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4895,6 +4895,53 @@ button {
   gap: 7px;
   overflow-y: auto;
 }
+.shared-composer-preview {
+  position: fixed;
+  z-index: 43;
+  right: 12px;
+  bottom: 65px;
+  left: 12px;
+  padding: 7px;
+  border: 1px solid rgb(255 255 255 / 72%);
+  border-radius: 19px;
+  background: rgb(242 242 247 / 90%);
+  box-shadow: 0 10px 28px rgb(20 44 76 / 18%);
+  backdrop-filter: blur(24px) saturate(1.6);
+  -webkit-backdrop-filter: blur(24px) saturate(1.6);
+}
+.shared-composer-preview > button {
+  position: absolute;
+  z-index: 2;
+  top: 2px;
+  right: 2px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: rgb(60 60 67 / 78%);
+}
+.shared-composer-preview--dark {
+  position: relative;
+  inset: auto;
+  z-index: 2;
+  margin: 0 8px 7px;
+  flex: 0 0 auto;
+  border-color: rgb(255 255 255 / 10%);
+  background: rgb(20 18 27 / 94%);
+  box-shadow: 0 8px 22px rgb(0 0 0 / 28%);
+}
+.phone-app.dark .shared-composer-preview {
+  border-color: rgb(255 255 255 / 10%);
+  background: rgb(36 36 40 / 92%);
+}
+.messages-media-picker__contacts {
+  height: 270px;
+  margin: 0;
+  padding: 8px 0 18px;
+  overflow-y: auto;
+}
 .messages-media-picker__gifs button {
   min-height: 83px;
   display: flex;
@@ -6106,6 +6153,18 @@ button {
   display: block;
   margin: 0;
 }
+.messages-thread-page .messages-attachment-menu > button:nth-child(4) > span {
+  background: #e9f9ed;
+  color: #28a745;
+}
+.messages-thread-page .messages-attachment-menu > button:nth-child(5) > span {
+  background: #f6eefe;
+  color: #af52de;
+}
+.messages-thread-page .messages-attachment-menu > button:nth-child(6) > span {
+  background: #fff0ef;
+  color: #ff3b30;
+}
 .messages-thread-page
   .messages-messagebar
   > .k-toolbar
diff --git a/frontend/src/components/MessageContactBubble.vue b/frontend/src/components/MessageContactBubble.vue
new file mode 100644
index 0000000..0ee78bc
--- /dev/null
+++ b/frontend/src/components/MessageContactBubble.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { kButton } from 'konsta/vue'
+import {
+  Check,
+  ChevronRight,
+  MessageCircle,
+  UserRound,
+  UserPlus,
+} from 'lucide-vue-next'
+import { computed, ref, watch } from 'vue'
+
+import type { SmsSharedContact } from '@/types/messages'
+
+const props = defineProps<{
+  addLabel: string
+  contact: SmsSharedContact
+  messageLabel: string
+  saved: boolean
+  savedLabel: string
+}>()
+const emit = defineEmits<{ message: []; save: [] }>()
+const imageFailed = ref(false)
+watch(
+  () => props.contact.avatar_url,
+  () => {
+    imageFailed.value = false
+  },
+)
+const displayName = computed(
+  () => props.contact.name.trim() || props.contact.phone_number,
+)
+const showNumber = computed(() => Boolean(props.contact.name.trim()))
+const initials = computed(() =>
+  displayName.value
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join(''),
+)
+</script>
+
+<template>
+  <div class="message-contact-card">
+    <div class="message-contact-card__identity">
+      <span class="message-contact-card__avatar">
+        <img
+          v-if="contact.avatar_url && !imageFailed"
+          :src="contact.avatar_url"
+          alt=""
+          @error="imageFailed = true"
+        />
+        <b v-else-if="initials">{{ initials }}</b>
+        <UserRound v-else :size="28" />
+      </span>
+      <div>
+        <strong>{{ displayName }}</strong>
+        <small v-if="contact.organization">{{ contact.organization }}</small>
+        <small v-if="showNumber">({{ contact.phone_number }})</small>
+      </div>
+      <ChevronRight :size="20" class="message-contact-card__chevron" />
+    </div>
+    <div class="message-contact-card__actions">
+      <k-button rounded tonal @click.stop="emit('message')">
+        <MessageCircle :size="17" />
+        {{ messageLabel }}
+      </k-button>
+      <k-button
+        rounded
+        tonal
+        :disabled="saved"
+        @click.stop="emit('save')"
+      >
+        <Check v-if="saved" :size="17" />
+        <UserPlus v-else :size="17" />
+        {{ saved ? savedLabel : addLabel }}
+      </k-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.message-contact-card {
+  width: min(258px, 72cqw);
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255 / 48%);
+  border-radius: 21px;
+  color: #151517;
+  background: linear-gradient(155deg, rgb(255 255 255 / 96%), #edf5ff);
+  box-shadow: 0 8px 24px rgb(22 63 112 / 14%);
+}
+
+.message-contact-card__identity {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr) 20px;
+  align-items: center;
+  gap: 11px;
+  min-height: 82px;
+  padding: 13px 12px;
+}
+
+.message-contact-card__avatar {
+  width: 58px;
+  height: 58px;
+  overflow: hidden;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: linear-gradient(145deg, #64d2ff, #0a84ff);
+  box-shadow: 0 4px 14px rgb(10 132 255 / 24%);
+}
+
+.message-contact-card__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.message-contact-card__identity b {
+  font-size: 18px;
+}
+
+.message-contact-card__identity div,
+.message-contact-card__identity strong,
+.message-contact-card__identity small {
+  min-width: 0;
+}
+
+.message-contact-card__identity strong,
+.message-contact-card__identity small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message-contact-card__identity strong {
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.message-contact-card__identity small {
+  margin-top: 3px;
+  color: #6e6e73;
+  font-size: 11.5px;
+}
+
+.message-contact-card__chevron {
+  color: #8e8e93;
+}
+
+.message-contact-card__actions {
+  display: grid;
+  gap: 1px;
+  padding: 8px;
+  border-top: 1px solid rgb(60 60 67 / 12%);
+  background: rgb(255 255 255 / 58%);
+}
+
+.message-contact-card__actions :deep(.button) {
+  width: 100%;
+  margin: 0;
+  min-height: 36px;
+  justify-content: flex-start;
+  padding-inline: 14px;
+  font-size: 13px;
+}
+
+:global(.phone-app.dark) .message-contact-card {
+  color: #f7f7f7;
+  border-color: rgb(255 255 255 / 10%);
+  background: linear-gradient(155deg, #34363b, #242a33);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
+}
+
+:global(.phone-app.dark) .message-contact-card__identity small {
+  color: #aeaeb2;
+}
+
+:global(.phone-app.dark) .message-contact-card__actions {
+  border-top-color: rgb(255 255 255 / 10%);
+  background: rgb(0 0 0 / 10%);
+}
+</style>
diff --git a/frontend/src/components/SharedContentCard.vue b/frontend/src/components/SharedContentCard.vue
new file mode 100644
index 0000000..4dc9958
--- /dev/null
+++ b/frontend/src/components/SharedContentCard.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { Image, MapPin, Music2, Play, UserRound } from 'lucide-vue-next'
+import { computed, ref, watch } from 'vue'
+
+import { getPhoneApp } from '@/config/apps'
+import { usePhoneStore } from '@/stores/phone'
+import type { EasySharePayload } from '@/types/easyshare'
+
+const props = withDefaults(
+  defineProps<{
+    compact?: boolean
+    payload: EasySharePayload
+    variant?: 'darkchat' | 'flare' | 'messages'
+  }>(),
+  { compact: false, variant: 'messages' },
+)
+const phone = usePhoneStore()
+const imageFailed = ref(false)
+const sourceApp = computed(() => getPhoneApp(props.payload.appId))
+const isVideo = computed(
+  () =>
+    props.payload.kind === 'video' ||
+    (props.payload.appId === 'fliptok' && props.payload.kind === 'post'),
+)
+const fallbackIcon = computed(() => {
+  if (props.payload.kind === 'location') return MapPin
+  if (props.payload.kind === 'profile') return UserRound
+  if (props.payload.kind === 'track' || props.payload.kind === 'playlist') {
+    return Music2
+  }
+  if (props.payload.kind === 'video') return Play
+  return Image
+})
+
+watch(
+  () => props.payload.imageUrl,
+  () => {
+    imageFailed.value = false
+  },
+)
+</script>
+
+<template>
+  <article
+    class="shared-content-card"
+    :class="[
+      `shared-content-card--${variant}`,
+      { 'shared-content-card--compact': compact },
+    ]"
+  >
+    <div class="shared-content-card__source">
+      <img v-if="sourceApp?.iconImage" :src="sourceApp.iconImage" alt="" />
+      <span>
+        <b>{{ sourceApp ? phone.t(sourceApp.labelKey) : payload.appId }}</b>
+        <small>{{ phone.t(`Apps.easyShare.kinds.${payload.kind}`) }}</small>
+      </span>
+    </div>
+    <div class="shared-content-card__media">
+      <video
+        v-if="payload.imageUrl && !imageFailed && isVideo"
+        :src="payload.imageUrl"
+        muted
+        playsinline
+        preload="metadata"
+        @error="imageFailed = true"
+      />
+      <img
+        v-else-if="payload.imageUrl && !imageFailed"
+        :src="payload.imageUrl"
+        alt=""
+        loading="lazy"
+        @error="imageFailed = true"
+      />
+      <span v-else><component :is="fallbackIcon" :size="30" /></span>
+    </div>
+    <div class="shared-content-card__copy">
+      <small v-if="payload.subtitle">{{ payload.subtitle }}</small>
+      <strong>{{ payload.title }}</strong>
+      <p v-if="payload.copyText !== payload.title">{{ payload.copyText }}</p>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.shared-content-card {
+  width: min(262px, 73cqw);
+  overflow: hidden;
+  border: 1px solid rgb(60 60 67 / 13%);
+  border-radius: 20px;
+  color: #171719;
+  background: rgb(255 255 255 / 96%);
+  box-shadow: 0 8px 24px rgb(19 45 78 / 13%);
+}
+
+.shared-content-card__source {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 11px;
+}
+
+.shared-content-card__source > img {
+  width: 27px;
+  height: 27px;
+  border-radius: 7px;
+  object-fit: cover;
+}
+
+.shared-content-card__source b,
+.shared-content-card__source small {
+  display: block;
+  line-height: 1.1;
+}
+
+.shared-content-card__source b {
+  font-size: 12px;
+}
+
+.shared-content-card__source small {
+  margin-top: 2px;
+  color: #8e8e93;
+  font-size: 10px;
+}
+
+.shared-content-card__media {
+  height: 142px;
+  overflow: hidden;
+  background: linear-gradient(145deg, #dcecff, #b9d5ff);
+}
+
+.shared-content-card__media > img,
+.shared-content-card__media > video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.shared-content-card__media > span {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  color: #0a84ff;
+}
+
+.shared-content-card__copy {
+  padding: 10px 12px 12px;
+}
+
+.shared-content-card__copy small,
+.shared-content-card__copy strong,
+.shared-content-card__copy p {
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  text-overflow: ellipsis;
+}
+
+.shared-content-card__copy small {
+  margin-bottom: 3px;
+  color: #0a84ff;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.shared-content-card__copy strong {
+  display: -webkit-box;
+  font-size: 14px;
+  line-height: 1.25;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.shared-content-card__copy p {
+  display: -webkit-box;
+  margin-top: 5px;
+  color: #636366;
+  font-size: 11px;
+  line-height: 1.3;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.shared-content-card--compact {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  border-radius: 16px;
+  box-shadow: none;
+}
+
+.shared-content-card--compact .shared-content-card__source {
+  grid-column: 2;
+  padding: 7px 9px 0;
+}
+
+.shared-content-card--compact .shared-content-card__media {
+  grid-row: 1 / span 2;
+  height: 78px;
+}
+
+.shared-content-card--compact .shared-content-card__copy {
+  grid-column: 2;
+  padding: 5px 9px 8px;
+}
+
+.shared-content-card--compact .shared-content-card__copy p,
+.shared-content-card--compact .shared-content-card__source small {
+  display: none;
+}
+
+.shared-content-card--darkchat {
+  border-color: rgb(255 255 255 / 10%);
+  color: #f5f5f7;
+  background: linear-gradient(155deg, #302c3d, #1b1922);
+  box-shadow: 0 9px 25px rgb(0 0 0 / 28%);
+}
+
+.shared-content-card--darkchat .shared-content-card__media {
+  background: linear-gradient(145deg, #392f5c, #201c31);
+}
+
+.shared-content-card--darkchat .shared-content-card__media > span,
+.shared-content-card--darkchat .shared-content-card__copy small {
+  color: #bf9cff;
+}
+
+.shared-content-card--darkchat .shared-content-card__copy p {
+  color: #beb9c8;
+}
+
+.shared-content-card--flare {
+  border-color: rgb(255 255 255 / 58%);
+  background: linear-gradient(155deg, #fff, #fff0f6);
+  box-shadow: 0 8px 24px rgb(245 71 132 / 15%);
+}
+
+.shared-content-card--flare .shared-content-card__media {
+  background: linear-gradient(145deg, #ffd4e4, #ffc1d5);
+}
+
+.shared-content-card--flare .shared-content-card__media > span,
+.shared-content-card--flare .shared-content-card__copy small {
+  color: #ef3f7c;
+}
+
+:global(.phone-app.dark) .shared-content-card--messages {
+  border-color: rgb(255 255 255 / 10%);
+  color: #f5f5f7;
+  background: linear-gradient(155deg, #34363b, #242a33);
+}
+
+:global(.phone-app.dark) .shared-content-card--messages .shared-content-card__copy p {
+  color: #b8b8bd;
+}
+</style>
diff --git a/frontend/src/stores/darkchat.ts b/frontend/src/stores/darkchat.ts
index 47a3b9b..64c51ad 100644
--- a/frontend/src/stores/darkchat.ts
+++ b/frontend/src/stores/darkchat.ts
@@ -95,6 +95,8 @@ export const useDarkChatStore = defineStore('darkchat', () => {
       messageType: outgoing.messageType,
       reactions: {},
       replyToId: outgoing.replyToId,
+      sharePayload:
+        outgoing.messageType === 'share' ? outgoing.sharePayload : null,
     }
     messages.value.push(optimistic)
     if (outgoing.messageType === 'voice' && outgoing.mediaPayload) {
diff --git a/frontend/src/stores/easyshare.test.ts b/frontend/src/stores/easyshare.test.ts
index ef63001..4dcdd14 100644
--- a/frontend/src/stores/easyshare.test.ts
+++ b/frontend/src/stores/easyshare.test.ts
@@ -85,6 +85,7 @@ describe('easyshare store', () => {
     expect(easyShare.consumeChatDraft('messages')).toEqual({
       appId: 'messages',
       body: 'Meet at Mission Row.\nhttps://notes.sky/note-1',
+      payload: { ...payload, link: 'https://notes.sky/note-1' },
       targetId: '5551234567',
     })
     expect(easyShare.consumeChatDraft('messages')).toBeNull()
@@ -98,6 +99,7 @@ describe('easyshare store', () => {
     expect(easyShare.consumeChatDraft('darkchat')).toEqual({
       appId: 'darkchat',
       body: 'Meet at Mission Row.',
+      payload,
       targetId: null,
     })
   })
diff --git a/frontend/src/stores/easyshare.ts b/frontend/src/stores/easyshare.ts
index 770c012..60db644 100644
--- a/frontend/src/stores/easyshare.ts
+++ b/frontend/src/stores/easyshare.ts
@@ -56,6 +56,7 @@ export const useEasyShareStore = defineStore('easyshare', () => {
     chatDraft.value = {
       appId,
       body: [...new Set(parts)].join('\n'),
+      payload: { ...payload.value },
       targetId,
     }
     return Boolean(chatDraft.value.body)
diff --git a/frontend/src/stores/messages.test.ts b/frontend/src/stores/messages.test.ts
index 4074b47..90986a0 100644
--- a/frontend/src/stores/messages.test.ts
+++ b/frontend/src/stores/messages.test.ts
@@ -78,6 +78,47 @@ describe('messages store', () => {
     expect(messages.messages[0].delivery_status).toBe('failed')
   })
 
+  it('shows a shared contact immediately and sends only its id', async () => {
+    const contact = {
+      avatar_url: 'https://picsum.photos/seed/shared-alex/240/240',
+      name: 'Alex Rivera',
+      organization: 'Maze Bank',
+      phone_number: '4205550137',
+    }
+    const serverMessage: SmsMessage = {
+      ...sentMessage('contact-server-id'),
+      body: contact.name,
+      contact,
+      message_type: 'contact',
+    }
+    mockNuiCall
+      .mockResolvedValueOnce({ data: [], success: true })
+      .mockResolvedValueOnce({ data: [], success: true })
+      .mockResolvedValueOnce({ data: serverMessage, success: true })
+      .mockResolvedValueOnce({ data: [], success: true })
+
+    const messages = useMessagesStore()
+    await messages.openThread('4205550196')
+    const sending = messages.send({
+      contact,
+      contactId: 'contact-alex',
+      messageType: 'contact',
+    })
+
+    expect(messages.messages[0]).toMatchObject({
+      contact,
+      delivery_status: 'sending',
+      message_type: 'contact',
+    })
+
+    await sending
+    expect(mockNuiCall).toHaveBeenNthCalledWith(3, 'messages:send', {
+      contactId: 'contact-alex',
+      messageType: 'contact',
+      phoneNumber: '4205550196',
+    })
+  })
+
   it('normalizes numeric phone data from the NUI boundary', async () => {
     mockNuiCall.mockResolvedValueOnce({
       data: [
diff --git a/frontend/src/stores/messages.ts b/frontend/src/stores/messages.ts
index fd18982..749f674 100644
--- a/frontend/src/stores/messages.ts
+++ b/frontend/src/stores/messages.ts
@@ -57,8 +57,12 @@ export const useMessagesStore = defineStore('messages', () => {
     if (!activeNumber.value) return { success: false, error: 'invalid_number' }
     const clientId = `pending-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
     const optimistic: SmsMessage = {
-      body: outgoing.messageType === 'text' ? outgoing.body.trim() : '',
+      body:
+        outgoing.messageType === 'text' || outgoing.messageType === 'share'
+          ? outgoing.body?.trim() ?? ''
+          : '',
       client_id: clientId,
+      contact: outgoing.messageType === 'contact' ? outgoing.contact : null,
       created_at: new Date().toISOString().slice(0, 19).replace('T', ' '),
       delivery_status: 'sending',
       direction: 'sent',
@@ -78,6 +82,7 @@ export const useMessagesStore = defineStore('messages', () => {
       media_waveform:
         outgoing.messageType === 'voice' ? outgoing.mediaWaveform : null,
       message_type: outgoing.messageType,
+      share: outgoing.messageType === 'share' ? outgoing.sharePayload : null,
       read_at: null,
       recipient_number: activeNumber.value,
       sender_number: '',
@@ -88,10 +93,19 @@ export const useMessagesStore = defineStore('messages', () => {
         `data:${outgoing.mediaMime};base64,${outgoing.mediaPayload}`
     }
 
-    const response = await nuiCall<SmsMessage>('messages:send', {
-      ...outgoing,
-      phoneNumber: activeNumber.value,
-    })
+    const response = await nuiCall<SmsMessage>(
+      'messages:send',
+      outgoing.messageType === 'contact'
+        ? {
+            contactId: outgoing.contactId,
+            messageType: outgoing.messageType,
+            phoneNumber: activeNumber.value,
+          }
+        : {
+            ...outgoing,
+            phoneNumber: activeNumber.value,
+          },
+    )
     const index = messages.value.findIndex(
       (message) => message.client_id === clientId,
     )
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index dc41171..3ad36db 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -47,6 +47,20 @@ const defaultLocales: LocaleTree = {
       destinations: 'Share destinations',
       newMessage: 'New Message',
       shareProfile: 'Share Profile',
+      kinds: {
+        contact: 'Contact',
+        document: 'Document',
+        link: 'Link',
+        location: 'Location',
+        note: 'Note',
+        photo: 'Photo',
+        playlist: 'Playlist',
+        post: 'Post',
+        profile: 'Profile',
+        text: 'Message',
+        track: 'Track',
+        video: 'Video',
+      },
       chooseConversation: 'Choose a conversation',
       sentToChat: 'Sent to chat.',
       savedToNotes: 'Saved to Notes.',
@@ -1122,6 +1136,7 @@ const defaultLocales: LocaleTree = {
       photo: 'Photo',
       gif: 'GIF',
       video: 'Video',
+      contact: 'Contact',
       attachPhoto: 'Attach Photo',
       takePhoto: 'Take Photo',
       attachGif: 'Attach GIF',
@@ -1129,6 +1144,10 @@ const defaultLocales: LocaleTree = {
       photos: 'Photos',
       gifs: 'GIFs',
       videos: 'Videos',
+      contacts: 'Contacts',
+      shareContact: 'Share Contact',
+      noContactsToShare: 'Save a contact first to share it here.',
+      contactSaved: 'Contact Saved',
       noPhotos: 'Take a photo first to attach it here.',
       noVideos: 'Record a video in Camera first.',
       searchGifs: 'Search GIPHY',
@@ -1172,6 +1191,8 @@ const defaultLocales: LocaleTree = {
         invalid_message: 'Enter a message.',
         invalid_voice: 'The audio message is invalid.',
         invalid_attachment: 'The attachment is invalid.',
+        invalid_contact: 'The contact is invalid.',
+        contact_not_found: 'This contact is no longer available.',
         media_provider_unconfigured: 'Photo uploads are not configured.',
         capture_provider_unavailable: 'The screenshot resource is unavailable.',
         capture_failed: 'The photo could not be captured.',
diff --git a/frontend/src/types/darkchat.ts b/frontend/src/types/darkchat.ts
index 05dcf0a..b79b812 100644
--- a/frontend/src/types/darkchat.ts
+++ b/frontend/src/types/darkchat.ts
@@ -1,4 +1,5 @@
 import type { DatabaseDateValue } from '@/utils/date'
+import type { EasySharePayload } from '@/types/easyshare'
 
 export type DarkChatMessageType =
   | 'text'
@@ -7,6 +8,7 @@ export type DarkChatMessageType =
   | 'voice'
   | 'image'
   | 'video'
+  | 'share'
   | 'system'
 export type DarkChatNotificationMode = 'full' | 'private' | 'hidden'
 
@@ -68,6 +70,7 @@ export type DarkChatMessage = {
   replyToId?: string | null
   replyBody?: string | null
   reactions: Record<string, string>
+  sharePayload?: EasySharePayload | null
   expiresAt?: DatabaseDateValue | null
   createdAt: DatabaseDateValue
   readAt?: DatabaseDateValue | null
@@ -88,12 +91,13 @@ export type DarkChatThread = {
 
 export type DarkChatOutgoing = {
   body?: string
-  messageType: 'text' | 'emoji' | 'gif' | 'voice' | 'image' | 'video'
+  messageType: 'text' | 'emoji' | 'gif' | 'voice' | 'image' | 'video' | 'share'
   mediaAssetId?: string
   mediaPayload?: string
   mediaPreviewUrl?: string
   mediaMime?: string
   mediaDurationMs?: number
   mediaWaveform?: number[]
+  sharePayload?: EasySharePayload
   replyToId?: string
 }
diff --git a/frontend/src/types/easyshare.ts b/frontend/src/types/easyshare.ts
index ed63d73..368883c 100644
--- a/frontend/src/types/easyshare.ts
+++ b/frontend/src/types/easyshare.ts
@@ -19,6 +19,7 @@ export type EasyShareChatApp = 'darkchat' | 'flare' | 'messages'
 export type EasyShareChatDraft = {
   appId: EasyShareChatApp
   body: string
+  payload: EasySharePayload
   targetId: string | null
 }
 export type EasyShareStatus =
diff --git a/frontend/src/types/flare.ts b/frontend/src/types/flare.ts
index 1ae8689..60900d0 100644
--- a/frontend/src/types/flare.ts
+++ b/frontend/src/types/flare.ts
@@ -1,8 +1,9 @@
 import type { DatabaseDateValue } from '@/utils/date'
+import type { EasySharePayload } from '@/types/easyshare'
 
 export type FlareGender = 'woman' | 'man' | 'nonbinary'
 export type FlareInterest = FlareGender | 'everyone'
-export type FlareMessageType = 'text' | 'image' | 'gif' | 'video'
+export type FlareMessageType = 'text' | 'image' | 'gif' | 'video' | 'share'
 
 export type FlareProfile = {
   age: number
@@ -43,14 +44,16 @@ export type FlareMessage = {
   mediaDurationMs: number | null
   mediaUrl: string | null
   messageType: FlareMessageType
+  sharePayload: EasySharePayload | null
 }
 
 export type FlareOutgoingMessage =
   | { body: string; messageType: 'text' }
+  | { body?: string; messageType: 'share'; sharePayload: EasySharePayload }
   | {
       mediaAssetId: string
       mediaDurationMs?: number
-      messageType: Exclude<FlareMessageType, 'text'>
+      messageType: Exclude<FlareMessageType, 'text' | 'share'>
     }
 
 export type FlareProfileDraft = Omit<
diff --git a/frontend/src/types/messages.ts b/frontend/src/types/messages.ts
index 02748d8..5a23feb 100644
--- a/frontend/src/types/messages.ts
+++ b/frontend/src/types/messages.ts
@@ -1,10 +1,23 @@
 import type { DatabaseDateValue } from '@/utils/date'
+import type { EasySharePayload } from '@/types/easyshare'
 
 export type SmsDirection = 'sent' | 'received'
 export type SmsAttachmentType = 'image' | 'gif' | 'video'
-export type SmsMessageType = 'text' | 'voice' | SmsAttachmentType
+export type SmsMessageType =
+  | 'contact'
+  | 'share'
+  | 'text'
+  | 'voice'
+  | SmsAttachmentType
 export type SmsDeliveryStatus = 'sending' | 'delivered' | 'failed'
 
+export type SmsSharedContact = {
+  avatar_url: string | null
+  name: string
+  organization: string | null
+  phone_number: string
+}
+
 export type SmsConversation = {
   lastMessage: string
   lastMessageAt: DatabaseDateValue
@@ -16,6 +29,7 @@ export type SmsConversation = {
 export type SmsMessage = {
   body: string
   client_id?: string
+  contact?: SmsSharedContact | null
   created_at: DatabaseDateValue
   delivery_status?: SmsDeliveryStatus
   direction: SmsDirection
@@ -25,6 +39,7 @@ export type SmsMessage = {
   media_mime: string | null
   media_waveform: number[] | null
   message_type: SmsMessageType
+  share?: EasySharePayload | null
   read_at: string | null
   recipient_number: string
   sender_number: string
@@ -32,6 +47,12 @@ export type SmsMessage = {
 
 export type SmsOutgoingMessage =
   | { body: string; messageType: 'text' }
+  | {
+      contact: SmsSharedContact
+      contactId: string
+      messageType: 'contact'
+    }
+  | { body?: string; messageType: 'share'; sharePayload: EasySharePayload }
   | {
       mediaDurationMs: number
       mediaMime: string
diff --git a/frontend/src/views/apps/DarkChatApp.vue b/frontend/src/views/apps/DarkChatApp.vue
index bd91ad0..65f4301 100644
--- a/frontend/src/views/apps/DarkChatApp.vue
+++ b/frontend/src/views/apps/DarkChatApp.vue
@@ -51,6 +51,7 @@ import { useRouter } from 'vue-router'
 
 import DarkChatVoiceMessage from '@/components/DarkChatVoiceMessage.vue'
 import FullEmojiPicker from '@/components/FullEmojiPicker.vue'
+import SharedContentCard from '@/components/SharedContentCard.vue'
 import { useAccountStore } from '@/stores/account'
 import { useDarkChatStore } from '@/stores/darkchat'
 import { useEasyShareStore } from '@/stores/easyshare'
@@ -63,6 +64,7 @@ import type {
   DarkChatNotificationMode,
 } from '@/types/darkchat'
 import type { GifSearchResult } from '@/types/messages'
+import type { EasySharePayload } from '@/types/easyshare'
 import type { MediaType, PhoneMedia } from '@/types/media'
 import { copyText } from '@/utils/clipboard'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
@@ -110,7 +112,8 @@ const identifier = ref('')
 const pendingIdentifier = ref('')
 const safetyOpen = ref(false)
 const draft = ref('')
-const queuedShareBody = ref('')
+const queuedSharePayload = ref<EasySharePayload | null>(null)
+const shareDraft = ref<EasySharePayload | null>(null)
 const aliasDraft = ref('')
 const contactAliasDraft = ref('')
 const notificationMode = ref<DarkChatNotificationMode>('private')
@@ -231,6 +234,7 @@ function preview(conversation: DarkChatConversationSummary): string {
   if (conversation.lastMessageType === 'gif') return `GIF · ${t('gif')}`
   if (conversation.lastMessageType === 'image') return `📷 ${t('photo')}`
   if (conversation.lastMessageType === 'video') return `▶ ${t('video')}`
+  if (conversation.lastMessageType === 'share') return `🔗 ${conversation.lastMessage}`
   if (conversation.lastMessageType === 'system') return t('securityUpdate')
   return conversation.lastMessage
 }
@@ -330,9 +334,9 @@ async function openConversation(conversationId: string): Promise<void> {
   }
   screen.value = 'thread'
   resetPanels()
-  if (queuedShareBody.value) {
-    draft.value = queuedShareBody.value
-    queuedShareBody.value = ''
+  if (queuedSharePayload.value) {
+    shareDraft.value = queuedSharePayload.value
+    queuedSharePayload.value = null
   }
   await scrollBottom(false)
 }
@@ -344,6 +348,7 @@ function back(): void {
   }
   if (screen.value === 'thread') darkchat.closeThread()
   screen.value = 'inbox'
+  shareDraft.value = null
   resetPanels()
 }
 
@@ -411,19 +416,26 @@ async function confirmStart(): Promise<void> {
 
 async function sendText(): Promise<void> {
   const body = draft.value.trim()
-  if (!body || sending.value) return
+  if ((!body && !shareDraft.value) || sending.value) return
+  const shared = shareDraft.value
   draft.value = ''
+  shareDraft.value = null
   const outgoingReply = replyTo.value?.id
   replyTo.value = null
   resetPanels()
   sending.value = true
   const response = await darkchat.send({
     body,
-    messageType: 'text',
+    messageType: shared ? 'share' : 'text',
     replyToId: outgoingReply,
+    sharePayload: shared ?? undefined,
   })
   sending.value = false
-  if (!response.success) showToast(errorText(response.error))
+  if (!response.success) {
+    draft.value = body
+    shareDraft.value = shared
+    showToast(errorText(response.error))
+  }
   await scrollBottom()
 }
 
@@ -513,7 +525,7 @@ async function openEasyShareDraft(): Promise<boolean> {
     darkchat.closeThread()
     screen.value = 'inbox'
     resetPanels()
-    queuedShareBody.value = shared.body
+    queuedSharePayload.value = shared.payload
     draft.value = ''
     return true
   }
@@ -523,8 +535,9 @@ async function openEasyShareDraft(): Promise<boolean> {
   }
   screen.value = 'thread'
   resetPanels()
-  queuedShareBody.value = ''
-  draft.value = shared.body
+  queuedSharePayload.value = null
+  shareDraft.value = shared.payload
+  draft.value = ''
   await scrollBottom(false)
   return true
 }
@@ -2450,6 +2463,11 @@ onBeforeUnmount(() => {
                 v-else-if="message.messageType === 'voice'"
                 :message="message"
               />
+              <SharedContentCard
+                v-else-if="message.messageType === 'share' && message.sharePayload"
+                :payload="message.sharePayload"
+                variant="darkchat"
+              />
               <span v-else class="dc-message-body">{{ message.body }}</span>
               <span
                 v-if="Object.keys(message.reactions).length"
@@ -2542,6 +2560,19 @@ onBeforeUnmount(() => {
           @close="emojiOpen = false"
           @pick="appendEmoji"
         />
+        <div
+          v-if="shareDraft"
+          class="shared-composer-preview shared-composer-preview--dark"
+        >
+          <SharedContentCard compact :payload="shareDraft" variant="darkchat" />
+          <button
+            type="button"
+            :aria-label="phone.t('Common.close')"
+            @click="shareDraft = null"
+          >
+            <X :size="15" />
+          </button>
+        </div>
         <div v-if="recording" class="dc-recorder">
           <k-link
             component="button"
@@ -2583,7 +2614,7 @@ onBeforeUnmount(() => {
           ></template>
           <template #right
             ><k-link
-              v-if="draft.trim()"
+              v-if="draft.trim() || shareDraft"
               component="button"
               type="button"
               icon-only
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index fc96f4c..6eda1a4 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -67,6 +67,7 @@ import { useRoute, useRouter } from 'vue-router'
 import profilesSprite from '@/assets/img/flare/profiles-source.png'
 import FullEmojiPicker from '@/components/FullEmojiPicker.vue'
 import MessageAttachmentBubble from '@/components/MessageAttachmentBubble.vue'
+import SharedContentCard from '@/components/SharedContentCard.vue'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { useFlareStore } from '@/stores/flare'
 import { useMessageMediaStore } from '@/stores/messageMedia'
@@ -81,6 +82,7 @@ import type {
   FlareProfileDraft,
 } from '@/types/flare'
 import type { PhoneMedia } from '@/types/media'
+import type { EasySharePayload } from '@/types/easyshare'
 import type { GifSearchResult, SmsAttachmentType } from '@/types/messages'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
 
@@ -109,6 +111,7 @@ const router = useRouter()
 const activeTab = ref<FlareTab>('discover')
 const activeMatch = ref<FlareMatch | null>(null)
 const draft = ref('')
+const shareDraft = ref<EasySharePayload | null>(null)
 const matchReveal = ref<FlareMatch | null>(null)
 const cardOffset = ref(0)
 const currentPhotoIndex = ref(0)
@@ -596,13 +599,17 @@ async function openEasyShareDraft(): Promise<boolean> {
     return true
   }
   await openMatch(match)
-  if (activeMatch.value?.id === match.id) draft.value = shared.body
+  if (activeMatch.value?.id === match.id) {
+    draft.value = ''
+    shareDraft.value = shared.payload
+  }
   return true
 }
 
 function closeMatch(): void {
   activeMatch.value = null
   draft.value = ''
+  shareDraft.value = null
   emojiOpen.value = false
   attachmentMenuOpen.value = false
   attachmentPicker.value = null
@@ -617,18 +624,23 @@ async function openRevealedMatch(): Promise<void> {
 
 async function sendMessage(): Promise<void> {
   const body = draft.value.trim()
-  if (!body || !activeMatch.value || flare.sending) return
+  if ((!body && !shareDraft.value) || !activeMatch.value || flare.sending) return
+  const shared = shareDraft.value
   draft.value = ''
+  shareDraft.value = null
   emojiOpen.value = false
   attachmentMenuOpen.value = false
   attachmentPicker.value = null
   if (
-    !(await flare.send(activeMatch.value.id, {
-      body,
-      messageType: 'text',
-    }))
+    !(await flare.send(
+      activeMatch.value.id,
+      shared
+        ? { body, messageType: 'share', sharePayload: shared }
+        : { body, messageType: 'text' },
+    ))
   ) {
     draft.value = body
+    shareDraft.value = shared
     showActionError()
   }
   await nextTick()
@@ -1027,7 +1039,12 @@ onBeforeUnmount(() => {
             :text-footer="messageTime(message.createdAt)"
           >
             <template v-if="message.messageType !== 'text'" #text>
-              <MessageAttachmentBubble :message="attachmentMessage(message)" />
+              <SharedContentCard
+                v-if="message.messageType === 'share' && message.sharePayload"
+                :payload="message.sharePayload"
+                variant="flare"
+              />
+              <MessageAttachmentBubble v-else :message="attachmentMessage(message)" />
             </template>
           </k-message>
         </k-messages>
@@ -1115,6 +1132,13 @@ onBeforeUnmount(() => {
         @pick="appendEmoji"
       />
 
+      <div v-if="shareDraft" class="shared-composer-preview">
+        <SharedContentCard compact :payload="shareDraft" variant="flare" />
+        <button type="button" :aria-label="phone.t('Common.close')" @click="shareDraft = null">
+          <X :size="15" />
+        </button>
+      </div>
+
       <k-messagebar
         class="flare-messagebar messages-messagebar"
         :placeholder="phone.t('Apps.flare.messagePlaceholder')"
@@ -1143,7 +1167,7 @@ onBeforeUnmount(() => {
             <k-link
               component="button"
               icon-only
-              :disabled="!draft.trim() || flare.sending"
+              :disabled="(!draft.trim() && !shareDraft) || flare.sending"
               @click="sendMessage"
             >
               <ArrowUpCircle :size="29" />
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 08eb0ac..eb7dc82 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -35,6 +35,7 @@ import {
   Search,
   SquarePen,
   Trash2,
+  ContactRound,
   UserPlus,
   Video,
   X,
@@ -43,6 +44,8 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 import MessageAttachmentBubble from '@/components/MessageAttachmentBubble.vue'
+import MessageContactBubble from '@/components/MessageContactBubble.vue'
+import SharedContentCard from '@/components/SharedContentCard.vue'
 import FullEmojiPicker from '@/components/FullEmojiPicker.vue'
 import VoiceMessageBubble from '@/components/VoiceMessageBubble.vue'
 import { useCallsStore } from '@/stores/calls'
@@ -56,7 +59,10 @@ import type {
   SmsAttachmentType,
   SmsConversation,
   SmsMessage,
+  SmsSharedContact,
 } from '@/types/messages'
+import type { PhoneContact } from '@/types/phone'
+import type { EasySharePayload } from '@/types/easyshare'
 
 const VOICE_MAX_DURATION_MS = 30_000
 const VOICE_MAX_BYTES = 135_000
@@ -74,14 +80,15 @@ const editingList = ref(false)
 const selectedNumbers = ref<string[]>([])
 const composerNumber = ref('')
 const draft = ref('')
-const queuedShareBody = ref('')
+const queuedSharePayload = ref<EasySharePayload | null>(null)
+const shareDraft = ref<EasySharePayload | null>(null)
 const composing = ref(false)
 const sending = ref(false)
 const toastOpened = ref(false)
 const toastText = ref('')
 const emojiOpen = ref(false)
 const attachmentMenuOpen = ref(false)
-const attachmentPicker = ref<'gifs' | null>(null)
+const attachmentPicker = ref<'contacts' | 'gifs' | null>(null)
 const contactDetailsOpen = ref(false)
 const contactEditing = ref(false)
 const contactNameDraft = ref('')
@@ -169,6 +176,12 @@ function conversationPreview(conversation: SmsConversation): string {
   if (conversation.lastMessageType === 'video') {
     return `▶️ ${phone.t('Apps.messages.video')}`
   }
+  if (conversation.lastMessageType === 'contact') {
+    return `\u{1F464} ${phone.t('Apps.messages.contact')}`
+  }
+  if (conversation.lastMessageType === 'share') {
+    return `\u{1F517} ${conversation.lastMessage}`
+  }
   return conversation.lastMessageType === 'voice'
     ? `🎙️ ${phone.t('Apps.messages.voiceMessage')}`
     : conversation.lastMessage
@@ -286,6 +299,8 @@ function errorText(error?: string): string {
     'invalid_message',
     'invalid_voice',
     'invalid_attachment',
+    'invalid_contact',
+    'contact_not_found',
     'media_provider_unconfigured',
     'capture_provider_unavailable',
     'capture_failed',
@@ -326,8 +341,8 @@ async function openConversation(conversation: SmsConversation): Promise<void> {
     return
   }
   composing.value = false
-  draft.value = queuedShareBody.value
-  queuedShareBody.value = ''
+  shareDraft.value = queuedSharePayload.value
+  queuedSharePayload.value = null
   await scrollToBottom(false)
 }
 
@@ -337,7 +352,7 @@ async function openEasyShareDraft(): Promise<void> {
   if (!shared.targetId) {
     messages.closeThread()
     composing.value = false
-    queuedShareBody.value = shared.body
+    queuedSharePayload.value = shared.payload
     draft.value = ''
     return
   }
@@ -346,8 +361,9 @@ async function openEasyShareDraft(): Promise<void> {
     return
   }
   composing.value = false
-  queuedShareBody.value = ''
-  draft.value = shared.body
+  queuedSharePayload.value = null
+  shareDraft.value = shared.payload
+  draft.value = ''
   await scrollToBottom(false)
 }
 
@@ -382,6 +398,8 @@ async function chooseRecipient(number: string): Promise<void> {
     return
   }
   composing.value = false
+  shareDraft.value = queuedSharePayload.value
+  queuedSharePayload.value = null
   await scrollToBottom(false)
 }
 
@@ -396,6 +414,7 @@ function goBack(): void {
   composing.value = false
   composerNumber.value = ''
   draft.value = ''
+  shareDraft.value = null
   emojiOpen.value = false
   attachmentMenuOpen.value = false
   attachmentPicker.value = null
@@ -460,6 +479,12 @@ function openGifPicker(): void {
   if (!gifResults.value.length) void loadGifs(true)
 }
 
+function openContactPicker(): void {
+  attachmentMenuOpen.value = false
+  attachmentPicker.value = 'contacts'
+  emojiOpen.value = false
+}
+
 function openEmojiPicker(): void {
   attachmentMenuOpen.value = false
   attachmentPicker.value = null
@@ -498,6 +523,51 @@ async function sendAttachment(
   await scrollToBottom()
 }
 
+async function sendContact(contact: PhoneContact): Promise<void> {
+  if (!messages.activeNumber || sending.value) return
+  attachmentMenuOpen.value = false
+  attachmentPicker.value = null
+  sending.value = true
+  const response = await messages.send({
+    contact: {
+      avatar_url: contact.avatar_url ?? null,
+      name: contact.name,
+      organization: contact.organization ?? null,
+      phone_number: contact.phone_number,
+    },
+    contactId: contact.id,
+    messageType: 'contact',
+  })
+  sending.value = false
+  if (!response.success) showToast(errorText(response.error))
+  await scrollToBottom()
+}
+
+async function messageSharedContact(contact: SmsSharedContact): Promise<void> {
+  if (!(await messages.openThread(contact.phone_number))) {
+    showToast(errorText('invalid_number'))
+    return
+  }
+  attachmentMenuOpen.value = false
+  attachmentPicker.value = null
+  emojiOpen.value = false
+  await scrollToBottom(false)
+}
+
+async function saveSharedContact(contact: SmsSharedContact): Promise<void> {
+  if (knownContactNumbers.value.has(contact.phone_number)) return
+  const response = await calls.saveContact({
+    name: contact.name,
+    organization: contact.organization ?? '',
+    phoneNumber: contact.phone_number,
+  })
+  showToast(
+    response.success
+      ? phone.t('Apps.messages.contactSaved')
+      : phone.t('Apps.messages.contactSaveFailed'),
+  )
+}
+
 async function loadGifs(reset = false): Promise<void> {
   if (gifLoading.value || (!reset && !gifHasMore.value)) return
   gifError.value = null
@@ -534,17 +604,31 @@ function queueGifSearch(): void {
 }
 
 async function sendTextMessage(): Promise<void> {
-  if (!messages.activeNumber || !draft.value.trim() || sending.value) return
+  if (
+    !messages.activeNumber ||
+    (!draft.value.trim() && !shareDraft.value) ||
+    sending.value
+  ) return
   const body = draft.value
+  const shared = shareDraft.value
   draft.value = ''
+  shareDraft.value = null
   emojiOpen.value = false
   attachmentMenuOpen.value = false
   attachmentPicker.value = null
   sending.value = true
   await scrollToBottom()
-  const response = await messages.send({ body, messageType: 'text' })
+  const response = await messages.send(
+    shared
+      ? { body, messageType: 'share', sharePayload: shared }
+      : { body, messageType: 'text' },
+  )
   sending.value = false
-  if (!response.success) showToast(errorText(response.error))
+  if (!response.success) {
+    draft.value = body
+    shareDraft.value = shared
+    showToast(errorText(response.error))
+  }
   await scrollToBottom()
 }
 
@@ -1170,6 +1254,21 @@ onBeforeUnmount(() => {
               v-if="message.message_type === 'voice'"
               :message="message"
             />
+            <MessageContactBubble
+              v-else-if="message.message_type === 'contact' && message.contact"
+              :add-label="phone.t('Apps.messages.addContact')"
+              :contact="message.contact"
+              :message-label="phone.t('Apps.messages.messageAction')"
+              :saved="knownContactNumbers.has(message.contact.phone_number)"
+              :saved-label="phone.t('Apps.messages.contactSaved')"
+              @message="messageSharedContact(message.contact)"
+              @save="saveSharedContact(message.contact)"
+            />
+            <SharedContentCard
+              v-else-if="message.message_type === 'share' && message.share"
+              :payload="message.share"
+              variant="messages"
+            />
             <MessageAttachmentBubble v-else :message="message" />
           </template>
         </k-message>
@@ -1189,6 +1288,10 @@ onBeforeUnmount(() => {
         <span class="messages-action-emoji">😀</span>
         {{ phone.t('Apps.messages.emoji') }}
       </button>
+      <button type="button" @click="openContactPicker">
+        <span><ContactRound :size="20" /></span>
+        {{ phone.t('Apps.messages.shareContact') }}
+      </button>
       <button type="button" @click="openGifPicker">
         <span><ImagePlay :size="20" /></span>
         {{ phone.t('Apps.messages.attachGif') }}
@@ -1202,13 +1305,51 @@ onBeforeUnmount(() => {
     <section v-if="attachmentPicker" class="messages-media-picker">
       <header>
         <strong>
-          {{ phone.t('Apps.messages.gifs') }}
+          {{
+            phone.t(
+              attachmentPicker === 'contacts'
+                ? 'Apps.messages.contacts'
+                : 'Apps.messages.gifs',
+            )
+          }}
         </strong>
         <button type="button" @click="attachmentPicker = null">
           {{ phone.t('Common.done') }}
         </button>
       </header>
-      <div class="messages-media-picker__gifs">
+      <k-list
+        v-if="attachmentPicker === 'contacts'"
+        inset
+        strong
+        class="messages-media-picker__contacts"
+      >
+        <k-list-item
+          v-for="contact in calls.contacts"
+          :key="contact.id"
+          link
+          :title="contact.name"
+          :subtitle="contact.organization || contact.phone_number"
+          @click="sendContact(contact)"
+        >
+          <template #media>
+            <span class="messages-avatar messages-avatar--small">
+              <img
+                v-if="contact.avatar_url"
+                class="messages-avatar__image"
+                :src="contact.avatar_url"
+                alt=""
+              />
+              <span v-else class="messages-avatar__initials">{{
+                contactInitials(contact.phone_number)
+              }}</span>
+            </span>
+          </template>
+        </k-list-item>
+        <p v-if="!calls.contacts.length" class="messages-media-picker__empty">
+          {{ phone.t('Apps.messages.noContactsToShare') }}
+        </p>
+      </k-list>
+      <div v-else class="messages-media-picker__gifs">
         <label class="messages-gif-search">
           <Search :size="15" />
           <input
@@ -1252,6 +1393,17 @@ onBeforeUnmount(() => {
       @pick="appendEmoji"
     />
 
+    <div v-if="shareDraft && !recording" class="shared-composer-preview">
+      <SharedContentCard compact :payload="shareDraft" variant="messages" />
+      <button
+        type="button"
+        :aria-label="phone.t('Common.close')"
+        @click="shareDraft = null"
+      >
+        <X :size="15" />
+      </button>
+    </div>
+
     <section v-if="recording" class="messages-recorder">
       <button
         type="button"
@@ -1305,7 +1457,7 @@ onBeforeUnmount(() => {
       <template #right>
         <k-toolbar-pane class="ios:h-10">
           <k-link
-            v-if="draft.trim()"
+            v-if="draft.trim() || shareDraft"
             component="button"
             icon-only
             :disabled="sending"
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index ae80757..6dc953e 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -1534,6 +1534,56 @@ const smsMessages = [
     recipient_number: '5551234567',
     sender_number: '5551110001',
   },
+  {
+    body: 'Samantha Cole',
+    contact: {
+      avatar_url: 'https://picsum.photos/seed/shared-samantha/240/240',
+      name: 'Samantha Cole',
+      organization: 'Downtown Cab Co.',
+      phone_number: '5553330044',
+    },
+    created_at: isoTime(-8 * 60_000),
+    direction: 'received',
+    id: 'sms-contact-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: {
+      avatar_url: 'https://picsum.photos/seed/shared-samantha/240/240',
+      name: 'Samantha Cole',
+      organization: 'Downtown Cab Co.',
+      phone_number: '5553330044',
+    },
+    media_waveform: null,
+    message_type: 'contact',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5551110001',
+  },
+  {
+    body: 'Neon nights in Vinewood',
+    created_at: isoTime(-4 * 60_000),
+    direction: 'received',
+    id: 'sms-share-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: {
+      appId: 'picstagram',
+      copyText: 'Die besten Lichter der Stadt – direkt aus Vinewood.',
+      id: 'picstagram-post-neon-nights',
+      imageUrl: 'https://picsum.photos/seed/easyshare-neon/720/720',
+      kind: 'post',
+      link: 'skyphone://picstagram/post/picstagram-post-neon-nights',
+      subtitle: '@morgan',
+      title: 'Neon nights in Vinewood',
+    },
+    media_waveform: null,
+    message_type: 'share',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5551110001',
+  },
 ]
 const darkChatProfile = {
   id: 1,
@@ -1613,6 +1663,27 @@ const darkChatMessages = [
     createdAt: '2026-08-06 22:44:00',
     readAt: null,
   },
+  {
+    id: 'dc-message-00000000-0000-000000000004',
+    conversationId: darkChatConversations[0].id,
+    direction: 'received',
+    senderProfileId: 2,
+    messageType: 'share',
+    body: 'Downtown is awake',
+    reactions: {},
+    sharePayload: {
+      appId: 'feather',
+      copyText: 'Vinewood after midnight. No filters, just city light.',
+      id: 'feather-post-downtown-awake',
+      imageUrl: 'https://picsum.photos/seed/easyshare-downtown/900/600',
+      kind: 'post',
+      link: 'skyphone://feather/post/feather-post-downtown-awake',
+      subtitle: '@nightowl',
+      title: 'Downtown is awake',
+    },
+    createdAt: isoTime(-3 * 60_000),
+    readAt: null,
+  },
 ]
 
 function darkChatBootstrap() {
@@ -2478,9 +2549,9 @@ const flareMatches = [
       lookingFor: 'dates',
       photoUrls: [],
     },
-    lastMessage: 'That place sounds perfect. Friday?',
-    lastMessageAt: isoTime(-38 * 60 * 1000),
-    lastMessageType: 'text',
+    lastMessage: 'Friday night jazz',
+    lastMessageAt: isoTime(-18 * 60 * 1000),
+    lastMessageType: 'share',
     unread: 1,
   },
 ]
@@ -2506,6 +2577,25 @@ const flareMessages = {
       mediaUrl: null,
       messageType: 'text',
     },
+    {
+      id: 'flare-message-3',
+      direction: 'received',
+      body: 'Friday night jazz',
+      createdAt: isoTime(-18 * 60 * 1000),
+      mediaDurationMs: null,
+      mediaUrl: null,
+      messageType: 'share',
+      sharePayload: {
+        appId: 'music',
+        copyText: 'A late-night playlist for the drive to Vinewood.',
+        id: 'music-playlist-friday-jazz',
+        imageUrl: 'https://picsum.photos/seed/easyshare-jazz/720/720',
+        kind: 'playlist',
+        link: 'skyphone://music/playlist/music-playlist-friday-jazz',
+        subtitle: '12 tracks · 48 min',
+        title: 'Friday night jazz',
+      },
+    },
   ],
 }
 
@@ -3076,9 +3166,150 @@ const featherTopics = [
 ]
 let featherOnboarded = true
 
-const easyShareHistory = []
+const easyShareTargets = [
+  { distance: 2.4, id: 41, name: 'Mia Santos' },
+  { distance: 7.8, id: 72, name: 'Noah Walker' },
+  { distance: 14.6, id: 105, name: 'Jamie Rivera' },
+]
+const easyShareHistory = [
+  {
+    createdAt: Date.now() - 2 * 60 * 1000,
+    direction: 'incoming',
+    id: 'easyshare-incoming-pending',
+    otherName: 'Mia Santos',
+    payload: {
+      appId: 'notes',
+      copyText: 'Meet at Mission Row at 20:30.',
+      id: 'note-easyshare-meeting',
+      kind: 'note',
+      title: 'Mission Row meeting',
+    },
+    progress: 0,
+    status: 'pending',
+  },
+  {
+    createdAt: Date.now() - 8 * 60 * 1000,
+    direction: 'outgoing',
+    id: 'easyshare-outgoing-transferring',
+    otherName: 'Noah Walker',
+    payload: {
+      appId: 'gallery',
+      copyText: 'Sunset over Los Santos.',
+      id: 3,
+      imageUrl:
+        'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=900',
+      kind: 'photo',
+      title: 'Los Santos sunset',
+    },
+    progress: 58,
+    status: 'transferring',
+  },
+  {
+    createdAt: Date.now() - 22 * 60 * 1000,
+    direction: 'incoming',
+    id: 'easyshare-completed',
+    otherName: 'Jamie Rivera',
+    payload: {
+      appId: 'map',
+      copyText: 'Legion Square',
+      kind: 'location',
+      link: 'https://maps.sky/legion-square',
+      title: 'Legion Square',
+    },
+    progress: 100,
+    status: 'completed',
+  },
+  {
+    createdAt: Date.now() - 48 * 60 * 1000,
+    direction: 'outgoing',
+    id: 'easyshare-accepted',
+    otherName: 'Mia Santos',
+    payload: {
+      appId: 'music',
+      copyText: 'Night Drive by Neon Coast',
+      kind: 'track',
+      title: 'Night Drive',
+    },
+    progress: 15,
+    status: 'accepted',
+  },
+  {
+    createdAt: Date.now() - 2 * 60 * 60 * 1000,
+    direction: 'outgoing',
+    id: 'easyshare-declined',
+    otherName: 'Noah Walker',
+    payload: {
+      appId: 'feather',
+      copyText: 'Road closure near Alta Street.',
+      id: 'feather-post-3',
+      kind: 'post',
+      title: 'Road closure',
+    },
+    progress: 0,
+    status: 'declined',
+  },
+  {
+    createdAt: Date.now() - 4 * 60 * 60 * 1000,
+    direction: 'outgoing',
+    id: 'easyshare-cancelled',
+    otherName: 'Jamie Rivera',
+    payload: {
+      appId: 'phone',
+      copyText: 'Mia Santos\n5550142',
+      kind: 'contact',
+      title: 'Mia Santos',
+    },
+    progress: 31,
+    status: 'cancelled',
+  },
+  {
+    createdAt: Date.now() - 7 * 60 * 60 * 1000,
+    direction: 'incoming',
+    id: 'easyshare-expired',
+    otherName: 'Mia Santos',
+    payload: {
+      appId: 'picstagram',
+      copyText: 'New post from @mia.santos',
+      id: 'picstagram-post-1',
+      kind: 'post',
+      title: 'Vespucci evening',
+    },
+    progress: 0,
+    status: 'expired',
+  },
+  {
+    createdAt: Date.now() - 24 * 60 * 60 * 1000,
+    direction: 'outgoing',
+    id: 'easyshare-failed',
+    otherName: 'Noah Walker',
+    payload: {
+      appId: 'gallery',
+      copyText: 'Vehicle walkaround video.',
+      id: 7,
+      kind: 'video',
+      title: 'Vehicle walkaround',
+    },
+    progress: 73,
+    status: 'failed',
+  },
+]
 let easyShareVisibility = 'everyone'
 
+function easyShareHistoryForScenario(testScenario) {
+  if (testScenario === 'easyshare-empty') return []
+  if (testScenario === 'easyshare-incoming') {
+    return easyShareHistory.filter(
+      (transfer) => transfer.id === 'easyshare-incoming-pending',
+    )
+  }
+  if (testScenario === 'easyshare-history') {
+    return easyShareHistory.filter(
+      (transfer) => !['pending', 'transferring'].includes(transfer.status),
+    )
+  }
+  return easyShareHistory
+}
+
 app.post('/api/:endpoint', (request, response) => {
   console.log(`[NUI] ${request.params.endpoint}`, request.body)
   const endpoint = request.params.endpoint
@@ -3996,7 +4227,9 @@ app.post('/api/:endpoint', (request, response) => {
       !match ||
       (messageType === 'text'
         ? !body
-        : !['image', 'gif', 'video'].includes(messageType) || !mediaUrl)
+        : messageType === 'share'
+          ? !request.body.sharePayload
+          : !['image', 'gif', 'video'].includes(messageType) || !mediaUrl)
     ) {
       response.json({ success: false, error: 'invalid_message' })
       return
@@ -4004,11 +4237,18 @@ app.post('/api/:endpoint', (request, response) => {
     const message = {
       id: `flare-message-${Date.now()}`,
       direction: 'sent',
-      body: messageType === 'text' ? body : '',
+      body:
+        messageType === 'share'
+          ? body || request.body.sharePayload.title
+          : messageType === 'text'
+            ? body
+            : '',
       createdAt: Date.now(),
       mediaDurationMs: request.body.mediaDurationMs ?? null,
       mediaUrl: messageType === 'text' ? null : mediaUrl,
       messageType,
+      sharePayload:
+        messageType === 'share' ? request.body.sharePayload : null,
     }
     flareMessages[match.id] ??= []
     flareMessages[match.id].push(message)
@@ -5330,7 +5570,10 @@ app.post('/api/:endpoint', (request, response) => {
     }
     const messageType = request.body.messageType ?? 'text'
     const body = String(request.body.body ?? '')
-    if ((messageType === 'text' || messageType === 'emoji') && !body.trim()) {
+    if (
+      ((messageType === 'text' || messageType === 'emoji') && !body.trim()) ||
+      (messageType === 'share' && !request.body.sharePayload)
+    ) {
       response.json({ success: false, error: 'invalid_message' })
       return
     }
@@ -5343,7 +5586,10 @@ app.post('/api/:endpoint', (request, response) => {
       direction: 'sent',
       senderProfileId: darkChatProfile.id,
       messageType,
-      body,
+      body:
+        messageType === 'share'
+          ? body.trim() || request.body.sharePayload.title
+          : body,
       mediaPayload:
         messageType === 'gif' ? request.body.mediaPayload : undefined,
       mediaSecret:
@@ -5354,6 +5600,8 @@ app.post('/api/:endpoint', (request, response) => {
       replyToId: request.body.replyToId,
       replyBody: reply?.body,
       reactions: {},
+      sharePayload:
+        messageType === 'share' ? request.body.sharePayload : null,
       createdAt: new Date().toISOString().slice(0, 19).replace('T', ' '),
       readAt: null,
     }
@@ -5494,17 +5742,15 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'easyshare:bootstrap') {
+    const history = easyShareHistoryForScenario(testScenario)
     response.json({
       success: true,
       data: {
-        history: easyShareHistory,
-        pending: easyShareHistory.filter((item) =>
+        history,
+        pending: history.filter((item) =>
           ['pending', 'transferring'].includes(item.status),
         ),
-        targets: [
-          { distance: 2.4, id: 41, name: 'Mia Santos' },
-          { distance: 7.8, id: 72, name: 'Noah Walker' },
-        ],
+        targets: testScenario === 'easyshare-empty' ? [] : easyShareTargets,
         visibility: easyShareVisibility,
       },
     })
@@ -5516,21 +5762,26 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'easyshare:request') {
+    const target = easyShareTargets.find(
+      (candidate) => candidate.id === Number(request.body.targetId),
+    )
     const transfer = {
       createdAt: Date.now(),
       direction: 'outgoing',
       id: `easyshare-${Date.now()}`,
-      otherName: request.body.targetId === 72 ? 'Noah Walker' : 'Mia Santos',
+      otherName: target?.name ?? 'Unknown device',
       payload: request.body.payload,
-      progress: 0,
-      status: 'pending',
+      progress: target?.id === 72 ? 58 : 0,
+      status: target?.id === 72 ? 'transferring' : 'pending',
     }
     easyShareHistory.unshift(transfer)
     response.json({ success: true, data: transfer })
     return
   }
   if (endpoint === 'easyshare:respond' || endpoint === 'easyshare:cancel') {
-    const transfer = easyShareHistory.find((item) => item.id === request.body.id)
+    const transfer = easyShareHistory.find(
+      (item) => item.id === request.body.id,
+    )
     if (!transfer) {
       response.json({ success: false, error: 'transfer_not_found' })
       return
@@ -5541,7 +5792,8 @@ app.post('/api/:endpoint', (request, response) => {
         : request.body.accepted
           ? 'completed'
           : 'declined'
-    transfer.progress = transfer.status === 'completed' ? 100 : transfer.progress
+    transfer.progress =
+      transfer.status === 'completed' ? 100 : transfer.progress
     response.json({ success: true, data: transfer })
     return
   }
@@ -5608,6 +5860,8 @@ app.post('/api/:endpoint', (request, response) => {
       success: true,
       data: thread.map(({ media_payload, ...message }) => ({
         ...message,
+        contact: message.message_type === 'contact' ? media_payload : null,
+        share: message.message_type === 'share' ? media_payload : null,
         media_asset_id: ['image', 'gif', 'video'].includes(message.message_type)
           ? media_payload
           : null,
@@ -5637,6 +5891,10 @@ app.post('/api/:endpoint', (request, response) => {
     const phoneNumber = String(request.body.phoneNumber ?? '')
     const messageType = request.body.messageType ?? 'text'
     const isAttachment = ['image', 'gif', 'video'].includes(messageType)
+    const selectedContact =
+      messageType === 'contact'
+        ? contacts.find((contact) => contact.id === request.body.contactId)
+        : null
     const requestedAttachmentId = String(request.body.mediaAssetId ?? '')
     const selectedMedia = /^\d+$/.test(requestedAttachmentId)
       ? mockMedia.find((item) => String(item.id) === requestedAttachmentId)
@@ -5646,6 +5904,8 @@ app.post('/api/:endpoint', (request, response) => {
       !phoneNumber ||
       (messageType === 'text' && !body) ||
       (messageType === 'voice' && !request.body.mediaPayload) ||
+      (messageType === 'contact' && !selectedContact) ||
+      (messageType === 'share' && !request.body.sharePayload) ||
       (isAttachment &&
         !attachmentAssets[messageType].has(attachmentId) &&
         !attachmentId.startsWith('https://') &&
@@ -5655,7 +5915,19 @@ app.post('/api/:endpoint', (request, response) => {
       return
     }
     const message = {
-      body,
+      body:
+        selectedContact?.name ??
+        (messageType === 'share'
+          ? body || request.body.sharePayload.title
+          : body),
+      contact: selectedContact
+        ? {
+            avatar_url: selectedContact.avatar_url ?? null,
+            name: selectedContact.name,
+            organization: selectedContact.organization ?? null,
+            phone_number: selectedContact.phone_number,
+          }
+        : null,
       created_at: new Date().toISOString().slice(0, 19).replace('T', ' '),
       direction: 'sent',
       id: `sms-${Date.now()}`,
@@ -5675,6 +5947,15 @@ app.post('/api/:endpoint', (request, response) => {
       media_payload:
         messageType === 'voice'
           ? request.body.mediaPayload
+          : selectedContact
+            ? {
+                avatar_url: selectedContact.avatar_url ?? null,
+                name: selectedContact.name,
+                organization: selectedContact.organization ?? null,
+                phone_number: selectedContact.phone_number,
+              }
+          : messageType === 'share'
+            ? request.body.sharePayload
           : isAttachment
             ? attachmentId
             : null,
@@ -5685,6 +5966,7 @@ app.post('/api/:endpoint', (request, response) => {
       read_at: null,
       recipient_number: phoneNumber,
       sender_number: '5551234567',
+      share: messageType === 'share' ? request.body.sharePayload : null,
     }
     smsMessages.push(message)
     const { media_payload, ...publicMessage } = message
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index a699032..1693aba 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -345,8 +345,9 @@ Locales["en"] = {
                 name = "Messages", newMessage = "New message from {sender}", compose = "New Message",
                 search = "Search", to = "To:", message = "Message", send = "Send", details = "Details",
                 filterUnread = "Show Unread Messages", smsLabel = "Text Message · SMS",
-                photo = "Photo", gif = "GIF", video = "Video", attachPhoto = "Attach Photo", takePhoto = "Take Photo",
+                photo = "Photo", gif = "GIF", video = "Video", contact = "Contact", attachPhoto = "Attach Photo", takePhoto = "Take Photo",
                 attachGif = "Attach GIF", attachVideo = "Attach Video", photos = "Photos", gifs = "GIFs", videos = "Videos",
+                contacts = "Contacts", shareContact = "Share Contact", noContactsToShare = "Save a contact first to share it here.", contactSaved = "Contact Saved",
                 noPhotos = "Take a photo first to attach it here.", noVideos = "Record a video in Camera first.", searchGifs = "Search GIPHY", loadMore = "Load More",
                 moreActions = "More Actions", contactDetails = "Contact Details", contactName = "Name", phoneNumber = "Phone Number",
                 call = "Call", messageAction = "Message", addContact = "Add Contact", deleteContact = "Delete Contact",
@@ -363,7 +364,8 @@ Locales["en"] = {
                 noResults = "No Results", today = "Today", yesterday = "Yesterday",
                 errors = {
                     invalid_number = "Enter a valid phone number.", invalid_message = "Enter a message.", invalid_voice = "The audio message is invalid.",
-                    invalid_attachment = "The attachment is invalid.",
+                    invalid_attachment = "The attachment is invalid.", invalid_contact = "The contact is invalid.",
+                    contact_not_found = "This contact is no longer available.",
                     media_provider_unconfigured = "Photo uploads are not configured.",
                     capture_provider_unavailable = "The screenshot resource is unavailable.", capture_failed = "The photo could not be captured.",
                     video_provider_unavailable = "Video capture requires the screencapture resource.", video_capture_failed = "The video could not be recorded.",
@@ -1019,6 +1021,11 @@ Locales["en"] = {
                 name = "EasyShare", incoming = "Incoming Share", recentChats = "Contacts and Chats",
                 destinations = "Share destinations", newMessage = "New Message", sentToChat = "Sent to chat.",
                 shareProfile = "Share Profile", chooseConversation = "Choose a conversation",
+                kinds = {
+                    contact = "Contact", document = "Document", link = "Link", location = "Location",
+                    note = "Note", photo = "Photo", playlist = "Playlist", post = "Post",
+                    profile = "Profile", text = "Message", track = "Track", video = "Video",
+                },
                 savedToNotes = "Saved to Notes.", copied = "Copied.", copy = "Copy", copyLink = "Copy Link",
                 nearby = "People Nearby", history = "Transfer History", noHistory = "No transfers yet.",
                 noNearby = "No visible players are nearby.", visibility = "Visibility", requestSent = "Waiting for acceptance...",
diff --git a/sky_phone/source/server/darkchat.lua b/sky_phone/source/server/darkchat.lua
index fc40dc6..8b3ae20 100644
--- a/sky_phone/source/server/darkchat.lua
+++ b/sky_phone/source/server/darkchat.lua
@@ -181,6 +181,10 @@ local function message_payload(row, profile_id)
     local deleted_everywhere = row.deleted_for_everyone == 1 or row.deleted_for_everyone == true
     local reactions = decode_array(row.reactions, "reactions")
     local waveform = row.media_waveform and decode_array(row.media_waveform, "media_waveform") or nil
+    local share_payload = row.message_type == "share" and json.decode(row.media_payload or "") or nil
+    if row.message_type == "share" and type(share_payload) ~= "table" then
+        error(("[sky_phone] DarkChat message %s has an invalid share payload."):format(tostring(row.id)))
+    end
     return {
         id = row.id,
         conversationId = row.conversation_id,
@@ -189,12 +193,14 @@ local function message_payload(row, profile_id)
         messageType = deleted_everywhere and "system" or row.message_type,
         body = deleted_everywhere and "message_deleted" or row.body,
         mediaMime = deleted_everywhere and nil or row.media_mime,
-        mediaPayload = not deleted_everywhere and row.message_type ~= "voice" and row.media_payload or nil,
+        mediaPayload = not deleted_everywhere and row.message_type ~= "voice"
+            and row.message_type ~= "share" and row.media_payload or nil,
         mediaDurationMs = deleted_everywhere and nil or tonumber(row.media_duration_ms),
         mediaWaveform = deleted_everywhere and nil or waveform,
         replyToId = row.reply_to_id,
         replyBody = row.reply_body,
         reactions = reactions,
+        sharePayload = not deleted_everywhere and share_payload or nil,
         expiresAt = row.expires_at,
         createdAt = row.created_at,
         readAt = row.peer_last_read_at and row.peer_last_read_at >= row.created_at and row.peer_last_read_at or nil,
@@ -538,6 +544,17 @@ Bridge.Callbacks.Register("sky_phone:darkchat:send", function(source, data)
         end
         media_payload = media_url
         media_mime = message_type == "image" and "image/jpeg" or "video/mp4"
+    elseif message_type == "share" then
+        local share
+        local share_error
+        share, share_error, media_payload = SkyPhoneEasyShare.SanitizeChatPayload(source, data.sharePayload)
+        if not share then
+            return { success = false, error = share_error or "invalid_payload" }
+        end
+        if body ~= "" and #body > Config.DarkChat.BodyMaxLength then
+            return { success = false, error = "invalid_message" }
+        end
+        body = body ~= "" and body or share.title
     else
         return { success = false, error = "invalid_message" }
     end
@@ -579,7 +596,8 @@ Bridge.Callbacks.Register("sky_phone:darkchat:send", function(source, data)
         conversationId = conversation_id,
         sender = profile.alias,
         messageType = message_type,
-        preview = (message_type == "text" or message_type == "emoji") and body or message_type,
+        preview = (message_type == "text" or message_type == "emoji" or message_type == "share")
+            and body or message_type,
     })
     return { success = true, data = message }
 end)
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index dbaae41..59ac7e8 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -521,7 +521,7 @@ local schema = {
             { name = "recipient_sim_id", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "sender_number", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "recipient_number", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
-            { name = "message_type", type = "ENUM('text', 'voice', 'image', 'gif', 'video') NOT NULL DEFAULT 'text'" },
+            { name = "message_type", type = "ENUM('text', 'voice', 'image', 'gif', 'video', 'contact', 'share') NOT NULL DEFAULT 'text'" },
             { name = "body", type = "VARCHAR(2000) NOT NULL" },
             { name = "media_payload", type = "MEDIUMTEXT NULL" },
             { name = "media_mime", type = "VARCHAR(64) NULL", characterSet = "ascii", collation = "ascii_general_ci" },
@@ -1022,7 +1022,7 @@ local schema = {
             { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "conversation_id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "sender_profile_id", type = "BIGINT UNSIGNED NULL" },
-            { name = "message_type", type = "ENUM('text', 'emoji', 'gif', 'voice', 'image', 'video', 'system') NOT NULL DEFAULT 'text'" },
+            { name = "message_type", type = "ENUM('text', 'emoji', 'gif', 'voice', 'image', 'video', 'share', 'system') NOT NULL DEFAULT 'text'" },
             { name = "body", type = "TEXT NOT NULL" },
             { name = "media_payload", type = "LONGTEXT NULL" },
             { name = "media_mime", type = "VARCHAR(80) NULL", characterSet = "ascii", collation = "ascii_bin" },
@@ -1680,8 +1680,9 @@ local schema = {
             { name = "match_id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "sender_account_id", type = "BIGINT UNSIGNED NOT NULL" },
             { name = "body", type = "VARCHAR(1000) NOT NULL" },
-            { name = "message_type", type = "ENUM('text', 'image', 'gif', 'video') NOT NULL DEFAULT 'text'" },
+            { name = "message_type", type = "ENUM('text', 'image', 'gif', 'video', 'share') NOT NULL DEFAULT 'text'" },
             { name = "media_url", type = "VARCHAR(2048) NULL" },
+            { name = "share_payload", type = "LONGTEXT NULL" },
             { name = "media_duration_ms", type = "INT UNSIGNED NULL" },
             { name = "read_at", type = "DATETIME NULL" },
             { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
@@ -2173,15 +2174,15 @@ Bridge.Database.Query([[
 ]], {})
 Bridge.Database.Query([[
     ALTER TABLE `sky_phone_flare_messages`
-    MODIFY COLUMN `message_type` ENUM('text', 'image', 'gif', 'video') NOT NULL DEFAULT 'text'
+    MODIFY COLUMN `message_type` ENUM('text', 'image', 'gif', 'video', 'share') NOT NULL DEFAULT 'text'
 ]], {})
 Bridge.Database.Query([[
     ALTER TABLE `sky_phone_sms_messages`
-    MODIFY COLUMN `message_type` ENUM('text', 'voice', 'image', 'gif', 'video') NOT NULL DEFAULT 'text'
+    MODIFY COLUMN `message_type` ENUM('text', 'voice', 'image', 'gif', 'video', 'contact', 'share') NOT NULL DEFAULT 'text'
 ]], {})
 Bridge.Database.Query([[
     ALTER TABLE `sky_phone_darkchat_messages`
-    MODIFY COLUMN `message_type` ENUM('text', 'emoji', 'gif', 'voice', 'image', 'video', 'system') NOT NULL DEFAULT 'text'
+    MODIFY COLUMN `message_type` ENUM('text', 'emoji', 'gif', 'voice', 'image', 'video', 'share', 'system') NOT NULL DEFAULT 'text'
 ]], {})
 Bridge.Database.Query([[
     ALTER TABLE `sky_phone_marketplace_images`
diff --git a/sky_phone/source/server/easyshare.lua b/sky_phone/source/server/easyshare.lua
index 16181d5..5061817 100644
--- a/sky_phone/source/server/easyshare.lua
+++ b/sky_phone/source/server/easyshare.lua
@@ -1,3 +1,5 @@
+SkyPhoneEasyShare = {}
+
 Bridge.Database.AfterMigration("sky_phone", function()
 local active_transfers = {}
 local valid_kinds = {
@@ -259,6 +261,14 @@ local function sanitize_payload(source, device, data)
     return payload, nil, encoded
 end
 
+function SkyPhoneEasyShare.SanitizeChatPayload(source, data)
+    local device, error_response = current_device(source)
+    if not device then
+        return nil, error_response.error
+    end
+    return sanitize_payload(source, device, data)
+end
+
 local function transfer_for_source(transfer, source)
     local incoming = transfer.recipient_source == source
     return {
diff --git a/sky_phone/source/server/flare.lua b/sky_phone/source/server/flare.lua
index d6fbffb..cd043b0 100644
--- a/sky_phone/source/server/flare.lua
+++ b/sky_phone/source/server/flare.lua
@@ -2,7 +2,7 @@ Bridge.Database.AfterMigration("sky_phone", function()
 local genders = { woman = true, man = true, nonbinary = true }
 local interests = { woman = true, man = true, nonbinary = true, everyone = true }
 local looking_for = { longTerm = true, dates = true, friends = true }
-local message_types = { text = true, image = true, gif = true, video = true }
+local message_types = { text = true, image = true, gif = true, video = true, share = true }
 
 local function allowed_gif_url(value)
     if type(value) ~= "string" or #value == 0 or #value > Config.Media.UrlMaxLength then
@@ -386,6 +386,22 @@ local function validate_message(source, data)
         return { body = body, message_type = message_type }
     end
 
+    if message_type == "share" then
+        local share, share_error, encoded = SkyPhoneEasyShare.SanitizeChatPayload(source, data.sharePayload)
+        if not share then
+            return nil, share_error or "invalid_payload"
+        end
+        local body = trim(data.body) or ""
+        if #body > 1000 then
+            return nil, "invalid_message"
+        end
+        return {
+            body = body ~= "" and body or share.title,
+            message_type = message_type,
+            share_payload = encoded,
+        }
+    end
+
     if type(data.mediaAssetId) ~= "string" then
         return nil, "invalid_attachment"
     end
@@ -427,6 +443,10 @@ local function validate_message(source, data)
 end
 
 local function message_payload(row, account_id)
+    local share_payload = row.message_type == "share" and json.decode(row.share_payload or "") or nil
+    if row.message_type == "share" and type(share_payload) ~= "table" then
+        error(("[sky_phone] Flare message %s has an invalid share payload."):format(tostring(row.id)))
+    end
     return {
         id = row.id,
         direction = tonumber(row.sender_account_id) == tonumber(account_id) and "sent" or "received",
@@ -435,6 +455,7 @@ local function message_payload(row, account_id)
         messageType = row.message_type or "text",
         mediaUrl = row.media_url,
         mediaDurationMs = tonumber(row.media_duration_ms),
+        sharePayload = share_payload,
     }
 end
 
@@ -670,7 +691,7 @@ Bridge.Callbacks.Register("sky_phone:flare:thread", function(source, data)
         WHERE `match_id` = ? AND `sender_account_id` <> ? AND `read_at` IS NULL
     ]], { match.id, account.id })
     local rows = Bridge.Database.Query([[
-        SELECT `id`, `sender_account_id`, `body`, `message_type`, `media_url`,
+        SELECT `id`, `sender_account_id`, `body`, `message_type`, `media_url`, `share_payload`,
             `media_duration_ms`, UNIX_TIMESTAMP(`created_at`) * 1000 AS `created_at_ms`
         FROM `sky_phone_flare_messages`
         WHERE `match_id` = ?
@@ -705,11 +726,11 @@ Bridge.Callbacks.Register("sky_phone:flare:send", function(source, data)
     Bridge.Database.Query([[
         INSERT INTO `sky_phone_flare_messages`
             (`id`, `match_id`, `sender_account_id`, `body`, `message_type`, `media_url`,
-                `media_duration_ms`)
-        VALUES (?, ?, ?, ?, ?, ?, ?)
+                `media_duration_ms`, `share_payload`)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?)
     ]], {
         id, match.id, account.id, message.body, message.message_type, message.media_url,
-        message.media_duration_ms,
+        message.media_duration_ms, message.share_payload,
     })
     local recipient_account_id = tonumber(match.account_a_id) == tonumber(account.id)
         and tonumber(match.account_b_id) or tonumber(match.account_a_id)
@@ -728,6 +749,7 @@ Bridge.Callbacks.Register("sky_phone:flare:send", function(source, data)
             message_type = message.message_type,
             media_url = message.media_url,
             media_duration_ms = message.media_duration_ms,
+            share_payload = message.share_payload,
         }, account.id),
     }
 end)
diff --git a/sky_phone/source/server/messages.lua b/sky_phone/source/server/messages.lua
index a103601..6516f0d 100644
--- a/sky_phone/source/server/messages.lua
+++ b/sky_phone/source/server/messages.lua
@@ -97,9 +97,59 @@ local function current_device(source)
     return device
 end
 
+local function shared_contact(device, contact_id)
+    if type(contact_id) ~= "string" or contact_id == "" or #contact_id > 36 then
+        return nil, "invalid_contact"
+    end
+    local condition
+    local params
+    if device.account_id then
+        condition = "contact.`account_id` = ?"
+        params = { contact_id, tonumber(device.account_id) }
+    else
+        condition = "contact.`account_id` IS NULL AND contact.`device_imei` = ?"
+        params = { contact_id, device.imei }
+    end
+    local rows = Bridge.Database.Query(([[
+        SELECT contact.`name`, contact.`organization`, contact.`phone_number`, media.`url` AS `avatar_url`
+        FROM `sky_phone_contacts` contact
+        LEFT JOIN `sky_phone_media` media ON media.`id` = contact.`avatar_media_id`
+        WHERE contact.`contact_id` = ? AND %s
+        LIMIT 1
+    ]]):format(condition), params)
+    local contact = rows[1]
+    if not contact then
+        return nil, "contact_not_found"
+    end
+    local name = trim(contact.name)
+    local organization = trim(contact.organization)
+    local number = SkyPhoneSimNumber.Normalize(
+        contact.phone_number,
+        Config.Sim.NumberLength,
+        Config.Sim.NumberPrefix
+    )
+    if not name or name == "" or #name > Config.Calls.ContactNameMaxLength
+        or (organization and #organization > Config.Calls.ContactNameMaxLength) or not number
+    then
+        error(("[sky_phone] Contact %s cannot be shared because its stored data is invalid."):format(contact_id))
+    end
+    local snapshot = {
+        avatar_url = contact.avatar_url,
+        name = name,
+        organization = organization ~= "" and organization or nil,
+        phone_number = number,
+    }
+    return {
+        data = snapshot,
+        payload = json.encode(snapshot),
+    }
+end
+
 local function format_message(row)
     row.media_duration_ms = tonumber(row.media_duration_ms)
     row.media_asset_id = nil
+    row.contact = nil
+    row.share = nil
     if row.message_type == "voice" then
         local waveform = row.media_waveform and json.decode(row.media_waveform) or nil
         if type(waveform) ~= "table" then
@@ -107,6 +157,33 @@ local function format_message(row)
         end
         row.media_waveform = waveform
         row.media_payload = nil
+    elseif row.message_type == "contact" then
+        local contact = row.media_payload and json.decode(row.media_payload) or nil
+        if type(contact) ~= "table" or type(contact.name) ~= "string"
+            or type(contact.phone_number) ~= "string"
+            or (contact.avatar_url ~= nil and type(contact.avatar_url) ~= "string")
+            or (contact.organization ~= nil and type(contact.organization) ~= "string")
+        then
+            error(("[sky_phone] Message %s has an invalid contact payload."):format(tostring(row.id)))
+        end
+        row.contact = contact
+        row.media_payload = nil
+        row.media_duration_ms = nil
+        row.media_mime = nil
+        row.media_waveform = nil
+    elseif row.message_type == "share" then
+        local share = row.media_payload and json.decode(row.media_payload) or nil
+        if type(share) ~= "table" or type(share.appId) ~= "string"
+            or type(share.kind) ~= "string" or type(share.title) ~= "string"
+            or type(share.copyText) ~= "string"
+        then
+            error(("[sky_phone] Message %s has an invalid share payload."):format(tostring(row.id)))
+        end
+        row.share = share
+        row.media_payload = nil
+        row.media_duration_ms = nil
+        row.media_mime = nil
+        row.media_waveform = nil
     elseif attachment_assets[row.message_type] then
         if not valid_stored_attachment(row.message_type, row.media_payload) then
             error(("[sky_phone] Message %s has an invalid attachment asset."):format(tostring(row.id)))
@@ -414,6 +491,8 @@ Bridge.Callbacks.Register("sky_phone:messages:send", function(source, data)
     local body = trim(data.body) or ""
     local voice = nil
     local attachment = nil
+    local contact = nil
+    local share = nil
     if message_type == "text" then
         if body == "" or #body > Config.Messages.BodyMaxLength then
             return { success = false, error = "invalid_message" }
@@ -424,6 +503,25 @@ Bridge.Callbacks.Register("sky_phone:messages:send", function(source, data)
             return { success = false, error = "invalid_voice" }
         end
         body = ""
+    elseif message_type == "contact" then
+        local contact_error
+        contact, contact_error = shared_contact(device, data.contactId)
+        if not contact then
+            return { success = false, error = contact_error }
+        end
+        body = contact.data.name
+    elseif message_type == "share" then
+        local share_error
+        local encoded
+        share, share_error, encoded = SkyPhoneEasyShare.SanitizeChatPayload(source, data.sharePayload)
+        if not share then
+            return { success = false, error = share_error or "invalid_payload" }
+        end
+        if body ~= "" and #body > Config.Messages.BodyMaxLength then
+            return { success = false, error = "invalid_message" }
+        end
+        share = { data = share, payload = encoded }
+        body = body ~= "" and body or share.data.title
     elseif attachment_assets[message_type] then
         attachment = validate_attachment(source, device, message_type, data)
         if not attachment then
@@ -459,7 +557,8 @@ Bridge.Callbacks.Register("sky_phone:messages:send", function(source, data)
         number,
         message_type,
         body,
-        voice and voice.payload or attachment and attachment.payload or nil,
+        voice and voice.payload or attachment and attachment.payload or contact and contact.payload
+            or share and share.payload or nil,
         voice and voice.mime or attachment and attachment.mime or nil,
         voice and voice.duration or attachment and attachment.duration or nil,
         voice and voice.waveform or nil,
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 5049d78..73b8fd9 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -292,7 +292,7 @@ CREATE TABLE IF NOT EXISTS `sky_phone_sms_messages` (
     `recipient_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL,
     `sender_number` VARCHAR(24) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
     `recipient_number` VARCHAR(24) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
-    `message_type` ENUM('text', 'voice', 'image', 'gif', 'video') NOT NULL DEFAULT 'text',
+    `message_type` ENUM('text', 'voice', 'image', 'gif', 'video', 'contact', 'share') NOT NULL DEFAULT 'text',
     `body` VARCHAR(2000) NOT NULL,
     `media_payload` MEDIUMTEXT NULL,
     `media_mime` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_general_ci NULL,
@@ -540,8 +540,9 @@ CREATE TABLE IF NOT EXISTS `sky_phone_flare_messages` (
     `match_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
     `sender_account_id` BIGINT UNSIGNED NOT NULL,
     `body` VARCHAR(1000) NOT NULL,
-    `message_type` ENUM('text', 'image', 'gif', 'video') NOT NULL DEFAULT 'text',
+    `message_type` ENUM('text', 'image', 'gif', 'video', 'share') NOT NULL DEFAULT 'text',
     `media_url` VARCHAR(2048) NULL,
+    `share_payload` LONGTEXT NULL,
     `media_duration_ms` INT UNSIGNED NULL,
     `read_at` DATETIME NULL,
     `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,

From 5d984b5efe6d4ff051376ba0a7b69584d3df48cc Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 21:46:40 +0200
Subject: [PATCH 15/63] FIX - clone custom app frame messages

---
 frontend/src/components/CustomAppFrame.vue |  3 ++-
 frontend/src/utils/clone.test.ts           | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/utils/clone.test.ts

diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
index 1139e6f..bc6d973 100644
--- a/frontend/src/components/CustomAppFrame.vue
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -33,6 +33,7 @@ import {
   getLbPhoneCallbackResource,
   usesLbPhoneHostRuntime,
 } from '@/utils/lbPhoneAppBridge'
+import { cloneJsonData } from '@/utils/clone'
 import { nuiCall } from '@/utils/nui'
 
 const props = defineProps<{
@@ -150,7 +151,7 @@ function postToFrame(payload: unknown): boolean {
   if (!target) return false
 
   try {
-    target.postMessage(payload, postMessageOrigin.value)
+    target.postMessage(cloneJsonData(payload), postMessageOrigin.value)
     return true
   } catch (error) {
     console.error(`[Custom apps] Could not message ${props.app.id}.`, error)
diff --git a/frontend/src/utils/clone.test.ts b/frontend/src/utils/clone.test.ts
new file mode 100644
index 0000000..2c4c8cf
--- /dev/null
+++ b/frontend/src/utils/clone.test.ts
@@ -0,0 +1,20 @@
+import { reactive } from 'vue'
+import { describe, expect, it } from 'vitest'
+
+import { cloneJsonData } from '@/utils/clone'
+
+describe('JSON data cloning', () => {
+  it('turns reactive custom app payloads into structured-cloneable data', () => {
+    const payload = reactive({
+      action: 'setSpeedCameras',
+      data: [{ id: 1, label: 'Alta Street' }],
+    })
+
+    expect(() => structuredClone(payload)).toThrow()
+
+    const cloned = cloneJsonData(payload)
+
+    expect(cloned).toEqual(payload)
+    expect(() => structuredClone(cloned)).not.toThrow()
+  })
+})

From a3787d8fa713ae113d043f1368e40fc680ee6716 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 22:14:53 +0200
Subject: [PATCH 16/63] FIX - remove duplicate CrewLink polling

---
 sky_phone/source/client/crewlink.lua | 21 +++++++---
 sky_phone/source/client/main.lua     |  1 -
 sky_phone/source/server/crewlink.lua | 60 +++++++++++-----------------
 sky_phone/source/server/phone.lua    | 12 +++---
 4 files changed, 46 insertions(+), 48 deletions(-)

diff --git a/sky_phone/source/client/crewlink.lua b/sky_phone/source/client/crewlink.lua
index d554d0a..5ecf4eb 100644
--- a/sky_phone/source/client/crewlink.lua
+++ b/sky_phone/source/client/crewlink.lua
@@ -1,4 +1,5 @@
 local overhead_members = {}
+local overhead_expires_at = 0
 
 local function draw_overhead_label(coords, username, role)
     SetDrawOrigin(coords.x, coords.y, coords.z + 1.05, 0)
@@ -14,17 +15,25 @@ local function draw_overhead_label(coords, username, role)
     ClearDrawOrigin()
 end
 
-CreateThread(function()
-    while true do
-        local result = Bridge.Callbacks.Trigger("sky_phone:crewlink:overhead", {})
-        overhead_members = result and result.success and result.data and result.data.members or {}
-        Wait(Config.CrewLink.OverheadRefreshMilliseconds)
-    end
+RegisterNUICallback("crewlink:live", function(data, cb)
+    local result = Bridge.Callbacks.Trigger("sky_phone:crewlink:live", data)
+    overhead_members = result and result.success and result.data and result.data.overheadMembers or {}
+    overhead_expires_at = GetGameTimer() + Config.CrewLink.OverheadRefreshMilliseconds * 2
+    cb(result or { success = false, error = "request_failed" })
+end)
+
+AddEventHandler("sky_phone:nuiClosed", function()
+    overhead_members = {}
+    overhead_expires_at = 0
 end)
 
 CreateThread(function()
     while true do
         local sleep = 1000
+        if overhead_expires_at > 0 and GetGameTimer() >= overhead_expires_at then
+            overhead_members = {}
+            overhead_expires_at = 0
+        end
         if #overhead_members > 0 then
             sleep = 0
             local player_coords = GetEntityCoords(PlayerPedId())
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 4bfd8f5..19867cc 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -168,7 +168,6 @@ local server_callbacks = {
     "crewlink:leave",
     "crewlink:create-ping",
     "crewlink:remove-ping",
-    "crewlink:live",
     "companies:list",
     "companies:get",
     "companies:my-requests",
diff --git a/sky_phone/source/server/crewlink.lua b/sky_phone/source/server/crewlink.lua
index 7dca0f3..0bb5cfe 100644
--- a/sky_phone/source/server/crewlink.lua
+++ b/sky_phone/source/server/crewlink.lua
@@ -1089,51 +1089,39 @@ Bridge.Callbacks.Register("sky_phone:crewlink:live", function(source)
     if not profile then
         return error_response
     end
-    if not profile.active_group_id or not membership(profile.id, profile.active_group_id) then
-        return { success = true, data = { members = {}, pings = {} } }
+    if not profile.active_group_id then
+        return { success = true, data = { members = {}, overheadMembers = {}, pings = {} } }
+    end
+    local active_membership = membership(profile.id, profile.active_group_id)
+    if not active_membership then
+        return { success = true, data = { members = {}, overheadMembers = {}, pings = {} } }
+    end
+    local members = live_group(profile.active_group_id)
+    local overhead_members = {}
+    if tonumber(profile.overhead_visible) == 1
+        and tonumber(active_membership.overhead_allowed) == 1
+    then
+        for _, member in ipairs(members) do
+            if member.source and member.source ~= source and member.overheadVisible then
+                overhead_members[#overhead_members + 1] = {
+                    source = member.source,
+                    username = member.username,
+                    role = member.role,
+                    roleLabel = member.role:sub(1, 1):upper() .. member.role:sub(2),
+                }
+            end
+        end
     end
     return {
         success = true,
         data = {
-            members = live_group(profile.active_group_id),
+            members = members,
+            overheadMembers = overhead_members,
             pings = active_pings(profile.active_group_id),
         },
     }
 end)
 
-Bridge.Callbacks.Register("sky_phone:crewlink:overhead", function(source)
-    if not SkyPhone.AllowOperation(
-        source,
-        "crewlink:overhead",
-        Config.CrewLink.LiveRequestsPerMinute,
-        60
-    ) then
-        return { success = false, error = "rate_limited" }
-    end
-    local profile = require_profile(source)
-    if not profile or not profile.active_group_id or tonumber(profile.overhead_visible) ~= 1 then
-        return { success = true, data = { members = {} } }
-    end
-    local active_membership = membership(profile.id, profile.active_group_id)
-    if not active_membership or tonumber(active_membership.overhead_allowed) ~= 1 then
-        return { success = true, data = { members = {} } }
-    end
-    local live_sources = live_sources_by_account()
-    local members = {}
-    for _, member in ipairs(member_dtos(profile.active_group_id)) do
-        local member_source = live_sources[member.account_id]
-        if member_source and member_source ~= source and member.overheadVisible then
-            members[#members + 1] = {
-                source = member_source,
-                username = member.username,
-                role = member.role,
-                roleLabel = member.role:sub(1, 1):upper() .. member.role:sub(2),
-            }
-        end
-    end
-    return { success = true, data = { members = members } }
-end)
-
 exports("GetCrewLinkActiveGroup", function(source)
     local profile = require_profile(source)
     if not profile or not profile.active_group_id then
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index 1c6d072..91d0a0f 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -492,6 +492,9 @@ local function bootstrap(source, security, security_loaded)
         error(("[sky_phone] Active IMEI %s has no device row."):format(session.imei))
     end
 
+    session.account_id = device.account_id and tonumber(device.account_id) or nil
+    session.account_email = session.account_id and device.email or nil
+
     return {
         token = session.token,
         security = security_status(device.imei, security, security_loaded),
@@ -747,14 +750,13 @@ function SkyPhone.RequireAccount(source)
     if not session then
         return nil, error_response
     end
-    local device = load_device(session.imei)
-    if not device or not device.account_id then
+    if not session.account_id then
         return nil, { success = false, error = "not_authenticated" }
     end
     return {
-        id = tonumber(device.account_id),
-        email = device.email,
-        imei = device.imei,
+        id = session.account_id,
+        email = session.account_email,
+        imei = session.imei,
     }
 end
 

From 01e583805d171bea6fecece40d39e291d7f1a3a9 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 22:54:03 +0200
Subject: [PATCH 17/63] FIX - accept custom app registration retries

---
 sky_phone/source/client/custom_app_compat.lua | 18 +++++++-----------
 tests/custom_app_compat_client.lua            | 17 +++++++++++++++--
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/sky_phone/source/client/custom_app_compat.lua b/sky_phone/source/client/custom_app_compat.lua
index 0228d99..57ec252 100644
--- a/sky_phone/source/client/custom_app_compat.lua
+++ b/sky_phone/source/client/custom_app_compat.lua
@@ -30,7 +30,7 @@ local function copy_record_data(value)
     return copied
 end
 
-local function register_provider_app(provider, owner_resource, definition, vendor_data, update_existing)
+local function register_provider_app(provider, owner_resource, definition, vendor_data)
     local app_id = definition.id
     local existing = provider_apps[app_id]
     if existing and (existing.owner_resource ~= owner_resource or existing.provider ~= provider) then
@@ -38,7 +38,7 @@ local function register_provider_app(provider, owner_resource, definition, vendo
     end
 
     local success, error_message
-    if existing and update_existing then
+    if existing then
         success, error_message = core.Update(owner_resource, definition)
     else
         success, error_message = core.Add(owner_resource, definition)
@@ -104,7 +104,7 @@ function SkyPhoneApps.RegisterCompatibilityExport(owner_resource, app_data)
         ))
         return false, definition_error
     end
-    return register_provider_app(provider, owner_resource, definition, copy_record_data(app_data), false)
+    return register_provider_app(provider, owner_resource, definition, copy_record_data(app_data))
 end
 
 SkyPhoneApps.OnCompatibilityAppRemoved = function(owner_resource, app_id)
@@ -133,8 +133,7 @@ local function add_17mov_application(app_data)
         providers.seventeen,
         owner_resource,
         definition,
-        copy_record_data(app_data),
-        false
+        copy_record_data(app_data)
     )
 end
 
@@ -206,8 +205,7 @@ local function add_high_application(app_name, data, locales)
         providers.high,
         owner_resource,
         definition,
-        copy_record_data(data),
-        provider_apps[app_name] ~= nil
+        copy_record_data(data)
     )
 end
 
@@ -241,8 +239,7 @@ local function add_quasar_app_for_owner(owner_resource, app_data)
         providers.quasar,
         owner_resource,
         definition,
-        SkyPhoneCompatibility.CopyQuasarData(app_data),
-        false
+        SkyPhoneCompatibility.CopyQuasarData(app_data)
     )
 end
 
@@ -473,8 +470,7 @@ local function remove_high_server_app(owner_resource, app_id)
             providers.high,
             client_record.owner_resource,
             client_record.definition,
-            nil,
-            false
+            nil
         )
         if not success then
             print(("[%s] Could not restore High Phone client application %s: %s."):format(
diff --git a/tests/custom_app_compat_client.lua b/tests/custom_app_compat_client.lua
index 09353b2..cd548fb 100644
--- a/tests/custom_app_compat_client.lua
+++ b/tests/custom_app_compat_client.lua
@@ -162,7 +162,7 @@ invoking_resource = "lb_app"
 local lifecycle_response_delivered = false
 local install_hook_after_response = false
 local open_hook_after_response = false
-local lb_success, lb_error = lb_add_custom_app({
+local lb_definition = {
     identifier = "dispatch",
     name = "Dispatch",
     description = "Dispatch terminal",
@@ -175,12 +175,25 @@ local lb_success, lb_error = lb_add_custom_app({
         open_hook_after_response = lifecycle_response_delivered
         error(5)
     end),
-})
+}
+local lb_success, lb_error = lb_add_custom_app(lb_definition)
 assert(lb_success and lb_error == nil, "LB AddCustomApp must register through the shared export")
+lb_definition.name = "Dispatch Updated"
+local retry_success, retry_error = lb_add_custom_app(lb_definition)
+assert(retry_success and retry_error == nil, "same-owner LB registration retries must update in place")
 
 local lifecycle_callback = assert(registered_nui_callbacks["custom-app:lifecycle"])
 local lifecycle_response
 SkyPhoneApps.SetPhoneOpen(true)
+local retry_catalog = nui_messages[#nui_messages]
+local retried_app
+for index = 1, #retry_catalog.data.apps do
+    if retry_catalog.data.apps[index].id == "dispatch" then
+        retried_app = retry_catalog.data.apps[index]
+        break
+    end
+end
+assert(retried_app and retried_app.name == "Dispatch Updated", "same-owner retry must publish the updated app")
 lifecycle_response_delivered = false
 lifecycle_callback({ appId = "dispatch", event = "install" }, function(response)
     lifecycle_response = response

From eeb3396f52a03f5b3efdc77c4cb878e7f143f1c6 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 07:15:26 +0200
Subject: [PATCH 18/63] ENH - complete and secure EasyShare integration

---
 README.md                                     |  12 +-
 frontend/src/components/EasyShareSheet.vue    |  73 +--
 frontend/src/components/SharedContentCard.vue |  14 +
 frontend/src/stores/phone.ts                  |   2 +
 frontend/src/utils/easyshare.test.ts          |  52 ++
 frontend/src/utils/easyshare.ts               |  40 ++
 frontend/src/views/apps/CalendarApp.vue       |  24 +
 frontend/src/views/apps/CityMarktApp.vue      |  23 +
 frontend/src/views/apps/CompaniesApp.vue      |  19 +
 frontend/src/views/apps/GarageApp.vue         |  18 +
 frontend/src/views/apps/HouseApp.vue          |  24 +
 frontend/src/views/apps/LocalPagesApp.vue     |  18 +-
 frontend/src/views/apps/MailApp.vue           |  23 +
 frontend/testserver/index.cjs                 | 160 ++++++-
 sky_phone/config/config.lua                   |   3 +
 sky_phone/source/server/easyshare.lua         | 446 +++++++++++++++++-
 sky_phone/source/server/garage.lua            |  26 +
 sky_phone/source/server/housing.lua           |  21 +
 18 files changed, 959 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/utils/easyshare.test.ts
 create mode 100644 frontend/src/utils/easyshare.ts

diff --git a/README.md b/README.md
index 6d385de..1648ee4 100644
--- a/README.md
+++ b/README.md
@@ -239,14 +239,18 @@ EasyShare browser data is available from every app that exposes a share action.
 Gallery directly, share an item, and then use the EasyShare and History actions in the sheet:
 
 - Full data, including incoming, transferring, accepted, completed, declined, cancelled, expired,
-  and failed transfers: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-full#/apps/gallery`
-- Incoming request only: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-incoming#/apps/gallery`
-- Transfer history without active requests: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-history#/apps/gallery`
-- Empty nearby and history states: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-empty#/apps/gallery`
+  and failed transfers: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-full#/apps/photos`
+- Incoming request only: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-incoming#/apps/photos`
+- Transfer history without active requests: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-history#/apps/photos`
+- Complete content catalog with contact, document, link, location, note, photo, playlist, post,
+  profile, text, track, and video: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-catalog#/apps/photos`
+- Empty nearby and history states: `http://localhost:5174/?apiPort=3002&testScenario=easyshare-empty#/apps/photos`
 
 In the full scenario, sending to Mia or Jamie creates a pending transfer. Sending to Noah creates a
 transfer at 58 percent so the progress and cancel states can be tested. Visibility changes and
 accepting or declining the seeded incoming request are kept in memory until the mock server restarts.
+The catalog also contains source examples from Companies, Mail, Garage, and House; completed history
+rows and rich chat cards can be clicked to verify app/deep-link navigation.
 
 The full-data scenario includes posts, replies, quotes, media grids, profiles, ranked hashtags, network search results, and every notification type. Run `pnpm test`, `pnpm typecheck`, `pnpm lint`, and `pnpm build` before packaging.
 
diff --git a/frontend/src/components/EasyShareSheet.vue b/frontend/src/components/EasyShareSheet.vue
index 5579bcf..f316806 100644
--- a/frontend/src/components/EasyShareSheet.vue
+++ b/frontend/src/components/EasyShareSheet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kButton, kGlass, kLink, kPreloader, kSheet } from 'konsta/vue'
+import { kButton, kGlass, kLink, kList, kListInput, kListItem, kPreloader, kSheet } from 'konsta/vue'
 import {
   Check,
   Clock3,
@@ -27,6 +27,7 @@ import type {
   EasyShareTransfer,
   EasyShareVisibility,
 } from '@/types/easyshare'
+import { openEasySharePayload } from '@/utils/easyshare'
 
 const phone = usePhoneStore()
 const appStore = useAppStoreStore()
@@ -44,7 +45,7 @@ let dragPointerId: number | null = null
 let dragStartTime = 0
 let dragStartY = 0
 const visibilityOptions: EasyShareVisibility[] = ['everyone', 'contacts', 'hidden']
-type EasyShareDestinationAppId = 'darkchat' | 'messages' | 'notes'
+type EasyShareDestinationAppId = 'darkchat' | 'flare' | 'messages' | 'notes'
 const app = computed(() =>
   easyShare.payload ? getPhoneApp(easyShare.payload.appId) : undefined,
 )
@@ -57,7 +58,7 @@ const sharePeople = computed(() => {
   }> = []
   const phoneNumbers = new Set<string>()
 
-  if (easyShare.payload?.appId === 'flare') {
+  if (!appStore.homeLayout.hidden.includes('flare')) {
     for (const match of flare.matches) {
       people.push({
         avatar: match.profile.photoUrls[0],
@@ -107,6 +108,7 @@ const sharePeople = computed(() => {
 const shareAppIds: EasyShareDestinationAppId[] = [
   'messages',
   'darkchat',
+  'flare',
   'notes',
 ]
 const shareApps = computed(() =>
@@ -193,14 +195,14 @@ function shareToChat(kind: EasyShareChatApp, targetId: string): void {
   void router.push(`/apps/${kind}`)
 }
 
-function openChatApp(kind: 'darkchat' | 'messages'): void {
+function openChatApp(kind: EasyShareChatApp): void {
   if (!easyShare.prepareChatDraft(kind)) return
   close()
   void router.push(`/apps/${kind}`)
 }
 
 function openShareApp(appId: EasyShareDestinationAppId): void {
-  if (appId === 'messages' || appId === 'darkchat') {
+  if (appId === 'messages' || appId === 'darkchat' || appId === 'flare') {
     openChatApp(appId)
     return
   }
@@ -235,6 +237,11 @@ async function cancelTransfer(transfer: EasyShareTransfer): Promise<void> {
     feedback.value = label('errors.request_failed')
   }
 }
+
+async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
+  close()
+  await openEasySharePayload(router, transfer.payload)
+}
 </script>
 
 <template>
@@ -329,18 +336,19 @@ async function cancelTransfer(transfer: EasyShareTransfer): Promise<void> {
           <strong>{{ label('nearby') }}</strong>
           <k-link component="button" @click="easyShare.showHistory"><History :size="18" /></k-link>
         </div>
-        <div class="easyshare-visibility">
-          <ShieldCheck :size="18" />
-          <select
+        <k-list inset strong class="easyshare-visibility">
+          <k-list-input
+            type="select"
+            :label="label('visibility')"
             :value="easyShare.visibility"
-            :aria-label="label('visibility')"
             @change="easyShare.setVisibility(($event.target as HTMLSelectElement).value as EasyShareVisibility)"
           >
+            <template #media><ShieldCheck :size="18" /></template>
             <option v-for="option in visibilityOptions" :key="option" :value="option">
               {{ label(`visibilityOptions.${option}`) }}
             </option>
-          </select>
-        </div>
+          </k-list-input>
+        </k-list>
 
         <k-glass v-if="easyShare.incomingTransfer" class="easyshare-incoming">
           <UserRound :size="28" />
@@ -369,13 +377,19 @@ async function cancelTransfer(transfer: EasyShareTransfer): Promise<void> {
         </k-glass>
 
         <div v-if="easyShare.loading" class="easyshare-loading"><k-preloader /></div>
-        <div v-else-if="easyShare.targets.length" class="easyshare-targets">
-          <button v-for="target in easyShare.targets" :key="target.id" type="button" @click="requestTransfer(target.id)">
-            <span><UserRound /></span>
-              <div><strong>{{ target.name }}</strong><small>{{ label('distance', { distance: String(target.distance) }) }}</small></div>
-            <Share2 :size="18" />
-          </button>
-        </div>
+        <k-list v-else-if="easyShare.targets.length" inset strong class="easyshare-targets">
+          <k-list-item
+            v-for="target in easyShare.targets"
+            :key="target.id"
+            link
+            :title="target.name"
+            :subtitle="label('distance', { distance: String(target.distance) })"
+            @click="requestTransfer(target.id)"
+          >
+            <template #media><span><UserRound /></span></template>
+            <template #after><Share2 :size="18" /></template>
+          </k-list-item>
+        </k-list>
         <p v-else class="easyshare-empty">{{ label('noNearby') }}</p>
       </section>
 
@@ -385,17 +399,20 @@ async function cancelTransfer(transfer: EasyShareTransfer): Promise<void> {
           <strong>{{ label('history') }}</strong>
           <span></span>
         </div>
-        <div class="easyshare-history">
-          <article v-for="transfer in easyShare.history" :key="transfer.id">
-            <span><Clock3 /></span>
-            <div>
-              <strong>{{ transfer.payload.title }}</strong>
-              <small>{{ transfer.otherName }} · {{ statusLabel(transfer) }}</small>
-            </div>
-            <small>{{ transfer.direction === 'incoming' ? '↓' : '↑' }}</small>
-          </article>
+        <k-list inset strong class="easyshare-history">
+          <k-list-item
+            v-for="transfer in easyShare.history"
+            :key="transfer.id"
+            link
+            :title="transfer.payload.title"
+            :subtitle="`${transfer.otherName} · ${statusLabel(transfer)}`"
+            @click="openTransfer(transfer)"
+          >
+            <template #media><span><Clock3 /></span></template>
+            <template #after>{{ transfer.direction === 'incoming' ? '↓' : '↑' }}</template>
+          </k-list-item>
           <p v-if="!easyShare.history.length" class="easyshare-empty">{{ label('noHistory') }}</p>
-        </div>
+        </k-list>
       </section>
 
         <p v-if="feedback" class="easyshare-feedback">{{ feedback }}</p>
diff --git a/frontend/src/components/SharedContentCard.vue b/frontend/src/components/SharedContentCard.vue
index ccc8622..8b39709 100644
--- a/frontend/src/components/SharedContentCard.vue
+++ b/frontend/src/components/SharedContentCard.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { Image, MapPin, Music2, Play, UserRound } from 'lucide-vue-next'
 import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { getPhoneApp, getPhoneAppLabel } from '@/config/apps'
 import { usePhoneStore } from '@/stores/phone'
 import type { EasySharePayload } from '@/types/easyshare'
+import { openEasySharePayload } from '@/utils/easyshare'
 
 const props = withDefaults(
   defineProps<{
@@ -15,6 +17,7 @@ const props = withDefaults(
   { compact: false, variant: 'messages' },
 )
 const phone = usePhoneStore()
+const router = useRouter()
 const imageFailed = ref(false)
 const sourceApp = computed(() => getPhoneApp(props.payload.appId))
 const isVideo = computed(
@@ -47,6 +50,11 @@ watch(
       `shared-content-card--${variant}`,
       { 'shared-content-card--compact': compact },
     ]"
+    role="button"
+    tabindex="0"
+    @click="openEasySharePayload(router, payload)"
+    @keydown.enter.prevent="openEasySharePayload(router, payload)"
+    @keydown.space.prevent="openEasySharePayload(router, payload)"
   >
     <div class="shared-content-card__source">
       <img v-if="sourceApp?.iconImage" :src="sourceApp.iconImage" alt="" />
@@ -92,6 +100,12 @@ watch(
   color: #171719;
   background: rgb(255 255 255 / 96%);
   box-shadow: 0 8px 24px rgb(19 45 78 / 13%);
+  cursor: pointer;
+}
+
+.shared-content-card:focus-visible {
+  outline: 3px solid #0a84ff;
+  outline-offset: 2px;
 }
 
 .shared-content-card__source {
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index f70f02b..a0524ec 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -353,6 +353,7 @@ const defaultLocales: LocaleTree = {
       destinations: 'Share destinations',
       newMessage: 'New Message',
       shareProfile: 'Share Profile',
+      share: 'Share',
       kinds: {
         contact: 'Contact',
         document: 'Document',
@@ -404,6 +405,7 @@ const defaultLocales: LocaleTree = {
         transfer_not_found: 'That transfer is no longer available.',
         too_far: 'The recipient is too far away.',
         not_owned: 'This item no longer belongs to this phone.',
+        unsupported_payload: 'This item is not available for EasyShare.',
         payload_too_large: 'This item is too large to share.',
         location_unavailable: 'Your location is unavailable.',
         rate_limited: 'Too many share requests. Try again shortly.',
diff --git a/frontend/src/utils/easyshare.test.ts b/frontend/src/utils/easyshare.test.ts
new file mode 100644
index 0000000..abe890a
--- /dev/null
+++ b/frontend/src/utils/easyshare.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+
+import type { EasySharePayload } from '@/types/easyshare'
+import { easyShareRoute } from '@/utils/easyshare'
+
+function payload(overrides: Partial<EasySharePayload>): EasySharePayload {
+  return {
+    appId: 'notes',
+    copyText: 'Shared content',
+    kind: 'note',
+    title: 'Shared content',
+    ...overrides,
+  }
+}
+
+describe('EasyShare deep links', () => {
+  it.each([
+    ['skyphone://media/42', '/apps/photos'],
+    ['skyphone://location/current', '/apps/map'],
+    ['skyphone://phone/5550142', '/apps/phone'],
+    ['skyphone://music/server/night-drive', '/apps/music'],
+    ['skyphone://citymarkt/listing/listing-1', '/apps/citymarkt'],
+  ])('routes %s into its source app', (link, path) => {
+    expect(easyShareRoute(payload({ link })).path).toBe(path)
+  })
+
+  it('falls back to the payload app and preserves share context', () => {
+    expect(
+      easyShareRoute(payload({ appId: 'calendar', id: 'event-1' })),
+    ).toEqual({
+      path: '/apps/calendar',
+      query: {
+        easyShareId: 'event-1',
+        easyShareKind: 'note',
+        easyShareLink: '',
+      },
+    })
+  })
+
+  it('opens CityMarkt links on the referenced listing', () => {
+    expect(
+      easyShareRoute(
+        payload({
+          appId: 'citymarkt',
+          id: 'listing-1',
+          kind: 'link',
+          link: 'skyphone://citymarkt/listing/listing-1',
+        }),
+      ).query.listingId,
+    ).toBe('listing-1')
+  })
+})
diff --git a/frontend/src/utils/easyshare.ts b/frontend/src/utils/easyshare.ts
new file mode 100644
index 0000000..44f4fad
--- /dev/null
+++ b/frontend/src/utils/easyshare.ts
@@ -0,0 +1,40 @@
+import type { Router } from 'vue-router'
+
+import { getPhoneApp } from '@/config/apps'
+import type { EasySharePayload } from '@/types/easyshare'
+
+const schemeRoutes: Record<string, string> = {
+  location: '/apps/map',
+  media: '/apps/photos',
+  phone: '/apps/phone',
+}
+
+export function easyShareRoute(payload: EasySharePayload): {
+  path: string
+  query: Record<string, string>
+} {
+  const match = payload.link?.match(/^skyphone:\/\/([^/]+)(?:\/([^/]+))?(?:\/(.+))?$/)
+  const schemeApp = match?.[1]
+  const app = schemeApp ? getPhoneApp(schemeApp) : getPhoneApp(payload.appId)
+  const path =
+    (schemeApp && schemeRoutes[schemeApp]) || app?.route || '/'
+  const query: Record<string, string> = {
+    easyShareId: String(payload.id ?? match?.[3] ?? match?.[2] ?? ''),
+    easyShareKind: payload.kind,
+    easyShareLink: payload.link ?? '',
+  }
+  if (schemeApp === 'citymarkt' && match?.[2] === 'listing' && match[3]) {
+    query.listingId = decodeURIComponent(match[3])
+  }
+  return {
+    path,
+    query,
+  }
+}
+
+export async function openEasySharePayload(
+  router: Router,
+  payload: EasySharePayload,
+): Promise<void> {
+  await router.push(easyShareRoute(payload))
+}
diff --git a/frontend/src/views/apps/CalendarApp.vue b/frontend/src/views/apps/CalendarApp.vue
index 21e3af0..b82982b 100644
--- a/frontend/src/views/apps/CalendarApp.vue
+++ b/frontend/src/views/apps/CalendarApp.vue
@@ -13,6 +13,7 @@ import {
   Plus,
   Rows3,
   Search,
+  Share2,
   Trash2,
   UserRound,
   X,
@@ -22,6 +23,7 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 
 import { useAccountStore } from '@/stores/account'
 import { useCalendarStore } from '@/stores/calendar'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { CalendarEvent, CalendarEventDraft } from '@/types/calendar'
 
@@ -42,6 +44,7 @@ type YearOverview = {
 const phone = usePhoneStore()
 const account = useAccountStore()
 const calendar = useCalendarStore()
+const easyShare = useEasyShareStore()
 const today = new Date()
 const visibleYear = ref(today.getFullYear())
 const selectedDate = ref(dateKey(today))
@@ -358,6 +361,19 @@ function openEdit(): void {
   screen.value = 'form'
 }
 
+function shareEvent(): void {
+  if (!selectedEvent.value) return
+  easyShare.open({
+    appId: 'calendar',
+    copyText: `${selectedEvent.value.title}\n${selectedEvent.value.note}`,
+    id: selectedEvent.value.id,
+    kind: 'document',
+    link: `skyphone://calendar/event/${selectedEvent.value.id}`,
+    subtitle: formatLongDate(selectedEvent.value.startsAt),
+    title: selectedEvent.value.title,
+  })
+}
+
 function closeForm(): void {
   timePickerField.value = null
   screen.value = editingEvent.value ? 'detail' : 'main'
@@ -781,6 +797,10 @@ onMounted(async () => {
             <p>{{ selectedEvent.note }}</p>
           </div>
         </section>
+        <button class="calendar__delete calendar__share" type="button" @click="shareEvent">
+          <Share2 :size="18" />
+          {{ phone.t('Apps.easyShare.share') }}
+        </button>
         <button class="calendar__delete" type="button" @click="deleteEvent">
           <Trash2 :size="18" />
           {{ phone.t('Apps.calendar.deleteEvent') }}
@@ -1739,6 +1759,10 @@ onMounted(async () => {
   font-size: 14px !important;
 }
 
+.calendar__share {
+  color: #0a84ff !important;
+}
+
 .calendar__group--fields input,
 .calendar__group--fields textarea {
   width: 100%;
diff --git a/frontend/src/views/apps/CityMarktApp.vue b/frontend/src/views/apps/CityMarktApp.vue
index eb3f6d7..2550195 100644
--- a/frontend/src/views/apps/CityMarktApp.vue
+++ b/frontend/src/views/apps/CityMarktApp.vue
@@ -50,6 +50,7 @@ import CityMarktSelect from '@/components/citymarkt/CityMarktSelect.vue'
 import CityMarktGallery from '@/components/citymarkt/CityMarktGallery.vue'
 import CityMarktOfferCard from '@/components/citymarkt/CityMarktOfferCard.vue'
 import { useAccountStore } from '@/stores/account'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { useMarketplaceStore } from '@/stores/marketplace'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePagesStore } from '@/stores/pages'
@@ -115,6 +116,7 @@ const phone = usePhoneStore()
 const route = useRoute()
 const router = useRouter()
 const account = useAccountStore()
+const easyShare = useEasyShareStore()
 const marketplace = useMarketplaceStore()
 const messageMedia = useMessageMediaStore()
 const pages = usePagesStore()
@@ -367,6 +369,19 @@ async function shareToLocalPages(): Promise<void> {
   )
 }
 
+function shareListing(): void {
+  if (!selectedListing.value) return
+  easyShare.open({
+    appId: 'citymarkt',
+    copyText: `${selectedListing.value.title}\n${selectedListing.value.description}`,
+    id: selectedListing.value.id,
+    kind: 'link',
+    link: `skyphone://citymarkt/listing/${selectedListing.value.id}`,
+    subtitle: formatPrice(selectedListing.value),
+    title: selectedListing.value.title,
+  })
+}
+
 async function loadFeed(): Promise<void> {
   await marketplace.load({
     category: category.value,
@@ -1100,6 +1115,14 @@ onMounted(async () => {
           {{ phone.t('Apps.citymarkt.phone') }}:
           {{ selectedListing.phone_number }}
         </p>
+        <button
+          v-if="selectedListing.status === 'active' || selectedListing.status === 'reserved'"
+          class="citymarkt__pages-share"
+          type="button"
+          @click="shareListing"
+        >
+          <Share2 :size="17" /><span><strong>{{ phone.t('Apps.easyShare.share') }}</strong></span>
+        </button>
         <template v-if="selectedListing.is_owner">
           <button
             v-if="
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index 3e2de93..42cfe1a 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -56,6 +56,7 @@ import {
   Plus,
   RefreshCw,
   Send,
+  Share2,
   Settings2,
   Trash2,
   UserRound,
@@ -75,6 +76,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { useCallsStore } from '@/stores/calls'
 import { useCompaniesStore } from '@/stores/companies'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
@@ -130,6 +132,7 @@ const phone = usePhoneStore()
 const calls = useCallsStore()
 const messages = useMessagesStore()
 const companies = useCompaniesStore()
+const easyShare = useEasyShareStore()
 const mediaPicker = useMessageMediaStore()
 const route = useRoute()
 const router = useRouter()
@@ -494,6 +497,19 @@ async function setRoute(company: CompanySummary): Promise<void> {
   showToast(phone.t('Apps.companies.routeSet'))
 }
 
+function shareCompany(company: Company): void {
+  easyShare.open({
+    appId: 'companies',
+    copyText: `${company.name}\n${company.description}`,
+    id: company.id,
+    imageUrl: company.logoUrl,
+    kind: 'profile',
+    link: `skyphone://companies/profile/${company.id}`,
+    subtitle: company.phoneNumber ?? company.categoryName,
+    title: company.name,
+  })
+}
+
 function openRequestComposer(company: Company): void {
   if (!company.acceptsRequests) {
     showToast(phone.t('Apps.companies.actionUnavailable.request'))
@@ -1618,6 +1634,9 @@ onBeforeUnmount(() => {
               phone.t('Apps.companies.profile.request')
             }}
           </k-button>
+          <k-button rounded outline @click="shareCompany(activeCompany)">
+            <Share2 :size="17" />{{ phone.t('Apps.easyShare.share') }}
+          </k-button>
         </k-glass>
       </template>
     </section>
diff --git a/frontend/src/views/apps/GarageApp.vue b/frontend/src/views/apps/GarageApp.vue
index a7724f9..fde43b0 100644
--- a/frontend/src/views/apps/GarageApp.vue
+++ b/frontend/src/views/apps/GarageApp.vue
@@ -27,6 +27,7 @@ import {
   Navigation,
   Plane,
   Route,
+  Share2,
   Sparkles,
   Sailboat,
   ShieldAlert,
@@ -37,6 +38,7 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { useGarageStore } from '@/stores/garage'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type {
   GarageVehicle,
@@ -50,6 +52,7 @@ type GarageFilter = 'all' | GarageVehicleStatus
 
 const phone = usePhoneStore()
 const garage = useGarageStore()
+const easyShare = useEasyShareStore()
 const activeFilter = ref<GarageFilter>('all')
 const query = ref('')
 const selectedVehicle = ref<GarageVehicle | null>(null)
@@ -110,6 +113,18 @@ function displayName(vehicle: GarageVehicle): string {
   return phone.t('Apps.garage.unknownVehicle')
 }
 
+function shareVehicle(vehicle: GarageVehicle): void {
+  easyShare.open({
+    appId: 'garage',
+    copyText: `${displayName(vehicle)}\n${vehicle.plate}`,
+    id: vehicle.plate,
+    kind: 'document',
+    link: `skyphone://garage/vehicle/${vehicle.plate}`,
+    subtitle: vehicle.plate,
+    title: displayName(vehicle),
+  })
+}
+
 function modelName(vehicle: GarageVehicle): string {
   if (vehicle.name && vehicle.nickname) return vehicle.name
   if (typeof vehicle.model === 'string' && vehicle.model) return vehicle.model
@@ -480,6 +495,9 @@ onBeforeUnmount(() => {
           <small>{{ phone.t('Apps.garage.vin') }}</small>
           <strong>{{ selectedVehicle.vin }}</strong>
         </div>
+        <k-button large rounded outline @click="shareVehicle(selectedVehicle)">
+          <Share2 :size="18" />{{ phone.t('Apps.easyShare.share') }}
+        </k-button>
       </section>
     </k-sheet>
     <k-dialog
diff --git a/frontend/src/views/apps/HouseApp.vue b/frontend/src/views/apps/HouseApp.vue
index 0a8665e..2016aa3 100644
--- a/frontend/src/views/apps/HouseApp.vue
+++ b/frontend/src/views/apps/HouseApp.vue
@@ -26,6 +26,7 @@ import {
   LockOpen,
   Plus,
   Router,
+  Share2,
   UserRound,
   UsersRound,
   WifiOff,
@@ -34,6 +35,7 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { useHousingStore } from '@/stores/housing'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type {
   HousingKey,
@@ -43,6 +45,7 @@ import type {
 
 const phone = usePhoneStore()
 const housing = useHousingStore()
+const easyShare = useEasyShareStore()
 const selectedPropertyId = ref<string | null>(null)
 const candidatesOpened = ref(false)
 const revokeCandidate = ref<HousingKey | null>(null)
@@ -195,6 +198,18 @@ function accessLabel(property: HousingProperty): string {
   )
 }
 
+function shareProperty(property: HousingProperty): void {
+  easyShare.open({
+    appId: 'house',
+    copyText: property.name,
+    id: property.id,
+    kind: 'document',
+    link: `skyphone://house/property/${property.id}`,
+    subtitle: accessLabel(property),
+    title: property.name,
+  })
+}
+
 onMounted(() => {
   void housing.load()
 })
@@ -413,6 +428,15 @@ onBeforeUnmount(() => {
             <Camera :size="23" />
             <span>{{ phone.t('Apps.house.viewCamera') }}</span>
           </k-glass>
+          <k-glass
+            :highlight="false"
+            component="button"
+            type="button"
+            @click="shareProperty(selectedProperty)"
+          >
+            <Share2 :size="23" />
+            <span>{{ phone.t('Apps.easyShare.share') }}</span>
+          </k-glass>
         </div>
 
         <k-list inset strong class="house-facts">
diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index 44695f3..3e36420 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -11,6 +11,7 @@ import {
   Images,
   MapPin,
   Plus,
+  Share2,
   Store,
   Trash2,
   UserRound,
@@ -34,6 +35,7 @@ import CityMarktSelect from '@/components/citymarkt/CityMarktSelect.vue'
 import CityMarktGallery from '@/components/citymarkt/CityMarktGallery.vue'
 import { useAccountStore } from '@/stores/account'
 import { useMessageMediaStore } from '@/stores/messageMedia'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePagesStore } from '@/stores/pages'
 import { usePhoneStore } from '@/stores/phone'
 import type { PagesCategory, PagesPost } from '@/types/pages'
@@ -54,6 +56,7 @@ type Tab = 'feed' | 'create' | 'profile'
 const phone = usePhoneStore()
 const account = useAccountStore()
 const messageMedia = useMessageMediaStore()
+const easyShare = useEasyShareStore()
 const pages = usePagesStore()
 const route = useRoute()
 const router = useRouter()
@@ -263,6 +266,19 @@ function openCityMarktListing(): void {
   })
 }
 
+function sharePost(): void {
+  if (!selected.value) return
+  easyShare.open({
+    appId: 'local-pages',
+    copyText: `${selected.value.title}\n${selected.value.body}`,
+    id: selected.value.id,
+    kind: 'post',
+    link: `skyphone://local-pages/post/${selected.value.id}`,
+    subtitle: `@${selected.value.author_name}`,
+    title: selected.value.title,
+  })
+}
+
 onMounted(() => {
   const selection = messageMedia.consumeMany<MediaContext>('local-pages:compose')
   if (selection) {
@@ -390,7 +406,7 @@ onMounted(() => {
         <div v-if="selected.images.length" class="pages__gallery" :style="{ background: selected.images[galleryIndex]?.gradient }"><button v-if="selected.images.length > 1" @click="moveGallery(-1)"><ChevronLeft /></button><button v-if="selected.images.length > 1" @click="moveGallery(1)"><ChevronRight /></button><span>{{ galleryIndex + 1 }} / {{ selected.images.length }}</span></div>
         <article><div class="pages__author"><span>{{ selected.author_name.charAt(0).toUpperCase() }}</span><div><strong>@{{ selected.author_name }}</strong><small>{{ relativeDate(selected.created_at) }}</small></div><i>{{ label('categories', selected.category) }}</i></div><h1>{{ selected.title }}</h1><p>{{ selected.body }}</p><div class="pages__location"><MapPin :size="17" /><div><small>{{ phone.t('Apps.localPages.location') }}</small><strong>{{ selected.district ? phone.t(`Apps.citymarkt.districts.${selected.district}`) : phone.t('Apps.localPages.allLosSantos') }}</strong></div></div><button v-if="selected.source_type === 'citymarkt'" class="pages__market-link" @click="openCityMarktListing"><Store :size="18" /><span><small>{{ phone.t('Apps.localPages.sharedFrom') }}</small><strong>{{ phone.t('Apps.localPages.openCityMarkt') }}</strong></span><b v-if="selected.citymarkt_price">${{ Number(selected.citymarkt_price).toLocaleString() }}</b></button></article>
       </div>
-      <div class="pages__detail-actions"><button :class="{ active: selected.is_liked }" @click="react('like')"><Heart :size="19" :fill="selected.is_liked ? 'currentColor' : 'none'" />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}</button><button @click="react('save')"><Bookmark :size="19" :fill="selected.is_saved ? 'currentColor' : 'none'" />{{ phone.t('Apps.localPages.save') }}</button></div>
+      <div class="pages__detail-actions"><button :class="{ active: selected.is_liked }" @click="react('like')"><Heart :size="19" :fill="selected.is_liked ? 'currentColor' : 'none'" />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}</button><button @click="sharePost"><Share2 :size="19" />{{ phone.t('Apps.easyShare.share') }}</button><button @click="react('save')"><Bookmark :size="19" :fill="selected.is_saved ? 'currentColor' : 'none'" />{{ phone.t('Apps.localPages.save') }}</button></div>
     </section>
 
     <section v-else class="pages__compose">
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index b34618b..40fa532 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -14,6 +14,7 @@ import {
   RotateCcw,
   Search,
   Send,
+  Share2,
   ShieldCheck,
   SquarePen,
   Trash2,
@@ -26,6 +27,7 @@ import MailMarkdownEditor, {
   type MailEditorLabels,
 } from '@/components/MailMarkdownEditor.vue'
 import { useMailStore } from '@/stores/mail'
+import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type {
   MailComposeDraft,
@@ -75,6 +77,7 @@ const MAIL_SWIPE_COMMIT_ANIMATION_MS = 180
 
 const phone = usePhoneStore()
 const mail = useMailStore()
+const easyShare = useEasyShareStore()
 const authMode = ref<AuthMode>('login')
 const authEmail = ref('')
 const authPassword = ref('')
@@ -563,6 +566,19 @@ function composeForward(): void {
     beginCompose(buildForwardDraft(selectedMessage.value))
 }
 
+function shareMessage(): void {
+  if (!selectedMessage.value) return
+  easyShare.open({
+    appId: 'mail',
+    copyText: `${selectedMessage.value.subject}\n${mailPlainText(selectedMessage.value.body)}`,
+    id: selectedMessage.value.id,
+    kind: 'document',
+    link: `skyphone://mail/message/${selectedMessage.value.id}`,
+    subtitle: selectedMessage.value.sender,
+    title: selectedMessage.value.subject || phone.t('Apps.mail.untitled'),
+  })
+}
+
 async function mutateSelected(
   endpoint: string,
   extra: Record<string, unknown> = {},
@@ -1004,6 +1020,13 @@ onBeforeUnmount(() => {
       </article>
 
       <footer class="mail-action-bar">
+        <button
+          type="button"
+          :aria-label="phone.t('Apps.easyShare.share')"
+          @click="shareMessage"
+        >
+          <Share2 :size="20" />
+        </button>
         <button
           type="button"
           :aria-label="phone.t('Apps.mail.reply')"
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index e0108aa..86bad8f 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -3711,7 +3711,7 @@ const easyShareHistory = [
     id: 'easyshare-outgoing-transferring',
     otherName: 'Noah Walker',
     payload: {
-      appId: 'gallery',
+      appId: 'photos',
       copyText: 'Sunset over Los Santos.',
       id: 3,
       imageUrl:
@@ -3801,7 +3801,7 @@ const easyShareHistory = [
     id: 'easyshare-failed',
     otherName: 'Noah Walker',
     payload: {
-      appId: 'gallery',
+      appId: 'photos',
       copyText: 'Vehicle walkaround video.',
       id: 7,
       kind: 'video',
@@ -3811,6 +3811,158 @@ const easyShareHistory = [
     status: 'failed',
   },
 ]
+const easyShareCatalog = [
+  {
+    appId: 'phone',
+    copyText: 'Mia Santos\n5550142',
+    id: 'contact-mia-santos',
+    kind: 'contact',
+    link: 'skyphone://phone/5550142',
+    subtitle: '5550142',
+    title: 'Mia Santos',
+  },
+  {
+    appId: 'calendar',
+    copyText: 'Downtown meetup\nBring the project notes.',
+    id: 'calendar-event-easyshare',
+    kind: 'document',
+    link: 'skyphone://calendar/event/calendar-event-easyshare',
+    subtitle: 'Tonight, 20:30',
+    title: 'Downtown meetup',
+  },
+  {
+    appId: 'citymarkt',
+    copyText: 'Comet Retro Custom in excellent condition.',
+    id: 'listing-easyshare-comet',
+    imageUrl: 'https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=900',
+    kind: 'link',
+    link: 'skyphone://citymarkt/listing/listing-easyshare-comet',
+    subtitle: '$84,000',
+    title: 'Comet Retro Custom',
+  },
+  {
+    appId: 'map',
+    copyText: 'Legion Square meeting point',
+    kind: 'location',
+    link: 'skyphone://location/current',
+    title: 'Legion Square',
+  },
+  {
+    appId: 'notes',
+    copyText: 'Check fuel, tires and radio before departure.',
+    id: 'note-easyshare-checklist',
+    kind: 'note',
+    title: 'Departure checklist',
+  },
+  {
+    appId: 'photos',
+    copyText: 'Sunset over Los Santos.',
+    id: 3,
+    imageUrl: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=900',
+    kind: 'photo',
+    link: 'skyphone://media/3',
+    title: 'Los Santos sunset',
+  },
+  {
+    appId: 'music',
+    copyText: 'Night Drive collection · 8 tracks',
+    id: 'playlist-easyshare-night-drive',
+    kind: 'playlist',
+    link: 'skyphone://music/playlist/playlist-easyshare-night-drive',
+    subtitle: '8 tracks',
+    title: 'Night Drive collection',
+  },
+  {
+    appId: 'local-pages',
+    copyText: 'Road closure\nAlta Street is closed until midnight.',
+    id: 'pages-post-easyshare-road-closure',
+    kind: 'post',
+    link: 'skyphone://local-pages/post/pages-post-easyshare-road-closure',
+    subtitle: '@nightshiftls',
+    title: 'Road closure',
+  },
+  {
+    appId: 'picstagram',
+    copyText: '@mia.santos',
+    id: 'picstagram-profile-easyshare-mia',
+    imageUrl: 'https://i.pravatar.cc/320?img=47',
+    kind: 'profile',
+    link: 'skyphone://picstagram/profile/picstagram-profile-easyshare-mia',
+    subtitle: '@mia.santos',
+    title: 'Mia Santos',
+  },
+  {
+    appId: 'darkchat',
+    copyText: 'Use the north entrance. The south gate is locked.',
+    id: 'darkchat-message-easyshare-entrance',
+    kind: 'text',
+    subtitle: 'NightOwl',
+    title: 'Use the north entrance',
+  },
+  {
+    appId: 'music',
+    copyText: 'Night Drive — Neon Coast',
+    id: 'night-drive',
+    imageUrl: 'https://picsum.photos/seed/easyshare-night-drive/720/720',
+    kind: 'track',
+    link: 'skyphone://music/server/night-drive',
+    subtitle: 'Neon Coast',
+    title: 'Night Drive',
+  },
+  {
+    appId: 'photos',
+    copyText: 'Vehicle walkaround video.',
+    id: 7,
+    imageUrl: 'https://videos.pexels.com/video-files/3130284/3130284-hd_1920_1080_30fps.mp4',
+    kind: 'video',
+    link: 'skyphone://media/7',
+    title: 'Vehicle walkaround',
+  },
+  {
+    appId: 'companies',
+    copyText: 'Los Santos Customs\nRepairs, tuning and roadside support.',
+    id: 'mechanic',
+    kind: 'profile',
+    link: 'skyphone://companies/profile/mechanic',
+    subtitle: '555-MECH',
+    title: 'Los Santos Customs',
+  },
+  {
+    appId: 'mail',
+    copyText: 'Project handoff\nThe final checklist is attached below.',
+    id: 17,
+    kind: 'document',
+    link: 'skyphone://mail/message/17',
+    subtitle: 'mia@ifruit.com',
+    title: 'Project handoff',
+  },
+  {
+    appId: 'garage',
+    copyText: 'Comet Retro Custom\nSKY 2048',
+    id: 'SKY 2048',
+    kind: 'document',
+    link: 'skyphone://garage/vehicle/SKY%202048',
+    subtitle: 'SKY 2048',
+    title: 'Comet Retro Custom',
+  },
+  {
+    appId: 'house',
+    copyText: 'Vespucci Canals Apartment',
+    id: 'vespucci-apartment-4',
+    kind: 'document',
+    link: 'skyphone://house/property/vespucci-apartment-4',
+    subtitle: 'Owner',
+    title: 'Vespucci Canals Apartment',
+  },
+].map((payload, index) => ({
+  createdAt: Date.now() - (index + 1) * 5 * 60 * 1000,
+  direction: index % 2 === 0 ? 'incoming' : 'outgoing',
+  id: `easyshare-catalog-${payload.kind}`,
+  otherName: index % 2 === 0 ? 'Mia Santos' : 'Noah Walker',
+  payload,
+  progress: 100,
+  status: 'completed',
+}))
 let easyShareVisibility = 'everyone'
 
 function easyShareHistoryForScenario(testScenario) {
@@ -3825,6 +3977,10 @@ function easyShareHistoryForScenario(testScenario) {
       (transfer) => !['pending', 'transferring'].includes(transfer.status),
     )
   }
+  if (testScenario === 'easyshare-catalog') return easyShareCatalog
+  if (testScenario === 'easyshare-full') {
+    return [...easyShareHistory, ...easyShareCatalog]
+  }
   return easyShareHistory
 }
 
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 2fdd483..0dd7f70 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -194,6 +194,9 @@ Config.EasyShare = {
     PendingSeconds = 30,
     TransferDurationMs = 3000,
     RequestsPerMinute = 12,
+    BootstrapRequestsPerMinute = 30,
+    VisibilityUpdatesPerMinute = 10,
+    ActionsPerMinute = 30,
     PayloadMaxBytes = 24000,
 }
 
diff --git a/sky_phone/source/server/easyshare.lua b/sky_phone/source/server/easyshare.lua
index 5061817..26350dc 100644
--- a/sky_phone/source/server/easyshare.lua
+++ b/sky_phone/source/server/easyshare.lua
@@ -17,12 +17,19 @@ local valid_kinds = {
     video = true,
 }
 local valid_apps = {
+    calendar = true,
     camera = true,
+    citymarkt = true,
+    companies = true,
     crewlink = true,
     darkchat = true,
     feather = true,
     flare = true,
     fliptok = true,
+    garage = true,
+    house = true,
+    ["local-pages"] = true,
+    mail = true,
     map = true,
     messages = true,
     music = true,
@@ -33,6 +40,12 @@ local valid_apps = {
 }
 local valid_visibilities = { contacts = true, everyone = true, hidden = true }
 
+Bridge.Database.Query([[
+    UPDATE `sky_phone_easyshare_transfers`
+    SET `status` = 'expired', `updated_at` = CURRENT_TIMESTAMP, `completed_at` = CURRENT_TIMESTAMP
+    WHERE `status` IN ('pending', 'transferring')
+]], {})
+
 local function uuid()
     local rows = Bridge.Database.Query("SELECT UUID() AS `id`", {})
     local id = rows[1] and rows[1].id
@@ -79,6 +92,370 @@ local function append_params(target, values)
     end
 end
 
+local function first_row(query, params)
+    local rows = Bridge.Database.Query(query, params)
+    return rows[1]
+end
+
+local function canonical_profile(device, app_id, id)
+    if app_id == "picstagram" then
+        local profile = first_row([[
+            SELECT p.`display_name`, p.`handle`, p.`bio`, media.`url` AS `image_url`
+            FROM `sky_phone_picstagram_profiles` p
+            LEFT JOIN `sky_phone_media` media ON media.`id` = p.`avatar_media_id`
+            WHERE p.`id` = ? AND p.`status` = 'active'
+                AND (p.`private` = 0 OR EXISTS(
+                    SELECT 1 FROM `sky_phone_picstagram_sessions` session
+                    WHERE session.`device_imei` = ? AND session.`profile_id` = p.`id`
+                ) OR EXISTS(
+                    SELECT 1 FROM `sky_phone_picstagram_follows` follow
+                    WHERE follow.`following_id` = p.`id` AND follow.`status` = 'accepted'
+                        AND follow.`follower_id` = (
+                            SELECT session.`profile_id` FROM `sky_phone_picstagram_sessions` session
+                            WHERE session.`device_imei` = ? LIMIT 1
+                        )
+                )) LIMIT 1
+        ]], { id, device.imei, device.imei })
+        if profile then
+            return {
+                title = profile.display_name,
+                subtitle = "@" .. profile.handle,
+                copyText = "@" .. profile.handle,
+                imageUrl = profile.image_url,
+                link = "skyphone://picstagram/profile/" .. id,
+            }
+        end
+    elseif app_id == "feather" then
+        local profile = first_row([[
+            SELECT p.`display_name`, p.`handle`, media.`url` AS `image_url`
+            FROM `sky_phone_feather_profiles` p
+            LEFT JOIN `sky_phone_media` media ON media.`id` = p.`avatar_media_id`
+            WHERE p.`id` = ? LIMIT 1
+        ]], { id })
+        if profile then
+            return {
+                title = profile.display_name,
+                subtitle = "@" .. profile.handle,
+                copyText = "@" .. profile.handle,
+                imageUrl = profile.image_url,
+                link = "skyphone://feather/profile/" .. id,
+            }
+        end
+    elseif app_id == "fliptok" then
+        local profile = first_row("SELECT `display_name`, `handle` FROM `sky_phone_fliptok_profiles` WHERE `id` = ? LIMIT 1", { id })
+        if profile then
+            return {
+                title = profile.display_name,
+                subtitle = "@" .. profile.handle,
+                copyText = "@" .. profile.handle,
+                link = "skyphone://fliptok/profile/" .. id,
+            }
+        end
+    elseif app_id == "flare" and device.account_id then
+        local profile = first_row([[
+            SELECT p.`name`, p.`age`, p.`bio`, media.`url` AS `image_url`
+            FROM `sky_phone_flare_profiles` p
+            LEFT JOIN `sky_phone_flare_profile_photos` photo ON photo.`profile_id` = p.`id` AND photo.`sort_order` = 1
+            LEFT JOIN `sky_phone_media` media ON media.`id` = photo.`media_id`
+            WHERE p.`id` = ? AND p.`account_id` = ? LIMIT 1
+        ]], { id, tonumber(device.account_id) })
+        if profile then
+            local title = ("%s, %s"):format(profile.name, profile.age)
+            return {
+                title = title,
+                copyText = title .. "\n" .. profile.bio,
+                imageUrl = profile.image_url,
+                link = "skyphone://flare/profile/" .. id,
+            }
+        end
+    elseif app_id == "crewlink" and device.account_id then
+        local profile = first_row([[
+            SELECT p.`username`, g.`name` AS `group_name`
+            FROM `sky_phone_crewlink_profiles` p
+            LEFT JOIN `sky_phone_crewlink_groups` g ON g.`id` = p.`active_group_id`
+            WHERE p.`id` = ? AND p.`account_id` = ? LIMIT 1
+        ]], { id, tonumber(device.account_id) })
+        if profile then
+            return {
+                title = "@" .. profile.username,
+                subtitle = profile.group_name,
+                copyText = "@" .. profile.username,
+                link = "skyphone://crewlink/profile/" .. id,
+            }
+        end
+    elseif app_id == "darkchat" and device.account_id then
+        local profile = first_row([[
+            SELECT `alias`, `dark_id`, `invite_code` FROM `sky_phone_darkchat_profiles`
+            WHERE `id` = ? AND `account_id` = ? LIMIT 1
+        ]], { id, tonumber(device.account_id) })
+        if profile then
+            return {
+                title = profile.alias,
+                subtitle = profile.dark_id,
+                copyText = profile.alias .. "\n" .. profile.dark_id .. "\n" .. profile.invite_code,
+                link = "skyphone://darkchat/invite/" .. profile.invite_code,
+            }
+        end
+    elseif app_id == "companies" then
+        local definition = Config.Companies.Enabled and Config.Companies.Definitions[id] or nil
+        if definition and definition.Public then
+            local profile = first_row([[
+                SELECT profile.`description`, media.`url` AS `image_url`
+                FROM `sky_phone_company_profiles` profile
+                LEFT JOIN `sky_phone_media` media ON media.`id` = profile.`logo_media_id`
+                WHERE profile.`company_id` = ? LIMIT 1
+            ]], { id })
+            return {
+                title = definition.Name,
+                subtitle = definition.ServiceLine.Number,
+                copyText = definition.Name .. "\n" .. (profile and profile.description or definition.Description),
+                imageUrl = profile and profile.image_url or nil,
+                link = "skyphone://companies/profile/" .. id,
+            }
+        end
+    end
+    return nil
+end
+
+local function canonical_post(device, app_id, id)
+    if app_id == "picstagram" then
+        local post = first_row([[
+            SELECT post.`caption`, profile.`display_name`, profile.`handle`, media.`url` AS `image_url`
+            FROM `sky_phone_picstagram_posts` post
+            JOIN `sky_phone_picstagram_profiles` profile ON profile.`id` = post.`profile_id`
+            LEFT JOIN `sky_phone_picstagram_post_media` post_media
+                ON post_media.`post_id` = post.`id` AND post_media.`position` = 1
+            LEFT JOIN `sky_phone_media` media ON media.`id` = post_media.`media_id`
+            WHERE post.`id` = ? AND post.`status` = 'published' AND profile.`status` = 'active'
+                AND (profile.`private` = 0 OR EXISTS(
+                    SELECT 1 FROM `sky_phone_picstagram_sessions` session
+                    WHERE session.`device_imei` = ? AND session.`profile_id` = profile.`id`
+                ) OR EXISTS(
+                    SELECT 1 FROM `sky_phone_picstagram_follows` follow
+                    WHERE follow.`following_id` = profile.`id` AND follow.`status` = 'accepted'
+                        AND follow.`follower_id` = (
+                            SELECT session.`profile_id` FROM `sky_phone_picstagram_sessions` session
+                            WHERE session.`device_imei` = ? LIMIT 1
+                        )
+                )) LIMIT 1
+        ]], { id, device.imei, device.imei })
+        if post then
+            local title = post.caption ~= "" and post.caption or post.display_name
+            return {
+                title = title,
+                subtitle = "@" .. post.handle,
+                copyText = "@" .. post.handle .. ": " .. post.caption,
+                imageUrl = post.image_url,
+                link = "skyphone://picstagram/post/" .. id,
+            }
+        end
+    elseif app_id == "feather" then
+        local post = first_row([[
+            SELECT post.`body`, profile.`handle`, media.`url` AS `image_url`
+            FROM `sky_phone_feather_posts` post
+            JOIN `sky_phone_feather_profiles` profile ON profile.`id` = post.`profile_id`
+            LEFT JOIN `sky_phone_feather_post_media` post_media
+                ON post_media.`post_id` = post.`id` AND post_media.`sort_order` = 0
+            LEFT JOIN `sky_phone_media` media ON media.`id` = post_media.`media_id`
+            WHERE post.`id` = ? AND post.`status` = 'published' LIMIT 1
+        ]], { id })
+        if post then
+            return {
+                title = post.body,
+                subtitle = "@" .. post.handle,
+                copyText = "@" .. post.handle .. ": " .. post.body,
+                imageUrl = post.image_url,
+                link = "skyphone://feather/post/" .. id,
+            }
+        end
+    elseif app_id == "fliptok" then
+        local post = first_row([[
+            SELECT video.`caption`, profile.`display_name`, profile.`handle`, media.`url` AS `image_url`
+            FROM `sky_phone_fliptok_videos` video
+            JOIN `sky_phone_fliptok_profiles` profile ON profile.`id` = video.`profile_id`
+            JOIN `sky_phone_media` media ON media.`id` = video.`media_id`
+            WHERE video.`id` = ? AND video.`status` = 'published' AND (
+                video.`visibility` = 'public' OR EXISTS(
+                    SELECT 1 FROM `sky_phone_fliptok_sessions` session
+                    WHERE session.`device_imei` = ? AND session.`profile_id` = profile.`id`
+                ) OR (video.`visibility` = 'followers' AND EXISTS(
+                    SELECT 1 FROM `sky_phone_fliptok_follows` follow
+                    WHERE follow.`following_id` = profile.`id` AND follow.`follower_id` = (
+                        SELECT session.`profile_id` FROM `sky_phone_fliptok_sessions` session
+                        WHERE session.`device_imei` = ? LIMIT 1
+                    )
+                ))
+            ) LIMIT 1
+        ]], { id, device.imei, device.imei })
+        if post then
+            local title = post.caption ~= "" and post.caption or post.display_name
+            return {
+                title = title,
+                subtitle = "@" .. post.handle,
+                copyText = "@" .. post.handle .. ": " .. post.caption,
+                imageUrl = post.image_url,
+                link = "skyphone://fliptok/video/" .. id,
+            }
+        end
+    elseif app_id == "local-pages" then
+        local post = first_row([[
+            SELECT post.`title`, post.`body`, SUBSTRING_INDEX(account.`email`, '@', 1) AS `author_name`,
+                media.`url` AS `image_url`
+            FROM `sky_phone_pages_posts` post
+            JOIN `sky_phone_accounts` account ON account.`id` = post.`account_id`
+            LEFT JOIN `sky_phone_pages_images` image ON image.`post_id` = post.`id` AND image.`sort_order` = 1
+            LEFT JOIN `sky_phone_media` media ON media.`id` = image.`media_id`
+            WHERE post.`id` = ? LIMIT 1
+        ]], { id })
+        if post then
+            return {
+                title = post.title,
+                subtitle = post.author_name,
+                copyText = post.title .. "\n" .. post.body,
+                imageUrl = post.image_url,
+                link = "skyphone://local-pages/post/" .. id,
+            }
+        end
+    elseif app_id == "citymarkt" then
+        local post = first_row([[
+            SELECT listing.`title`, listing.`description`, listing.`price`, listing.`price_type`, media.`url` AS `image_url`
+            FROM `sky_phone_marketplace_listings` listing
+            LEFT JOIN `sky_phone_marketplace_images` image
+                ON image.`listing_id` = listing.`id` AND image.`sort_order` = 1
+            LEFT JOIN `sky_phone_media` media ON media.`id` = image.`media_id`
+            WHERE listing.`id` = ? AND listing.`status` IN ('active', 'reserved') LIMIT 1
+        ]], { id })
+        if post then
+            local price = post.price_type == "fixed" and tostring(post.price) or post.price_type
+            return {
+                title = post.title,
+                subtitle = price,
+                copyText = post.title .. "\n" .. post.description,
+                imageUrl = post.image_url,
+                link = "skyphone://citymarkt/listing/" .. id,
+            }
+        end
+    end
+    return nil
+end
+
+local function canonical_music(device, data)
+    if data.kind == "track" and type(data.meta) == "table" and data.meta.source == "server" then
+        for _, track in ipairs(Config.Music.Tracks) do
+            if track.Id == data.id then
+                return {
+                    title = track.Title,
+                    subtitle = track.Artist,
+                    copyText = track.Title .. " — " .. track.Artist,
+                    link = "skyphone://music/server/" .. track.Id,
+                    meta = { source = "server" },
+                }
+            end
+        end
+    elseif data.kind == "track" and type(data.meta) == "table" and data.meta.source == "youtube" then
+        local condition, params = owner_condition(device, "song")
+        local query_params = { data.id }
+        append_params(query_params, params)
+        local track = first_row(([=[
+            SELECT song.`title`, song.`artist`, song.`video_id`
+            FROM `sky_phone_music_youtube_songs` song
+            WHERE song.`id` = ? AND %s LIMIT 1
+        ]=]):format(condition), query_params)
+        if track then
+            return {
+                title = track.title,
+                subtitle = track.artist,
+                copyText = track.title .. " — " .. track.artist,
+                imageUrl = "https://i.ytimg.com/vi/" .. track.video_id .. "/hqdefault.jpg",
+                link = "skyphone://music/youtube/" .. data.id,
+                meta = { source = "youtube" },
+            }
+        end
+    elseif data.kind == "playlist" then
+        local condition, params = owner_condition(device, "playlist")
+        local query_params = { data.id }
+        append_params(query_params, params)
+        local playlist = first_row(([=[
+            SELECT playlist.`name`, COUNT(item.`id`) AS `song_count`
+            FROM `sky_phone_music_playlists` playlist
+            LEFT JOIN `sky_phone_music_playlist_items` item ON item.`playlist_id` = playlist.`id`
+            WHERE playlist.`id` = ? AND %s
+            GROUP BY playlist.`id`, playlist.`name` LIMIT 1
+        ]=]):format(condition), query_params)
+        if playlist then
+            return {
+                title = playlist.name,
+                subtitle = tostring(playlist.song_count) .. " tracks",
+                copyText = playlist.name .. " · " .. tostring(playlist.song_count),
+                link = "skyphone://music/playlist/" .. data.id,
+            }
+        end
+    end
+    return nil
+end
+
+local function canonical_document(source, device, app_id, id)
+    if app_id == "calendar" and device.account_id then
+        local event = first_row([[
+            SELECT `title`, `note`, `starts_at`, `ends_at` FROM `sky_phone_calendar_events`
+            WHERE `id` = ? AND `account_id` = ? LIMIT 1
+        ]], { id, tonumber(device.account_id) })
+        if event then
+            return {
+                title = event.title,
+                subtitle = tostring(event.starts_at),
+                copyText = event.title .. "\n" .. event.note,
+                link = "skyphone://calendar/event/" .. id,
+                meta = { startAt = tostring(event.starts_at), endAt = tostring(event.ends_at) },
+            }
+        end
+    elseif app_id == "mail" and device.account_id then
+        local message = first_row([[
+            SELECT message.`subject`, message.`body`, sender.`email` AS `sender_email`
+            FROM `sky_phone_mail_entries` entry
+            JOIN `sky_phone_mail_messages` message ON message.`id` = entry.`message_id`
+            LEFT JOIN `sky_phone_accounts` sender ON sender.`id` = message.`sender_account_id`
+            WHERE entry.`id` = ? AND entry.`account_id` = ? AND entry.`trashed_at` IS NULL LIMIT 1
+        ]], { id, tonumber(device.account_id) })
+        if message then
+            return {
+                title = message.subject,
+                subtitle = message.sender_email,
+                copyText = message.subject .. "\n" .. message.body,
+                link = "skyphone://mail/message/" .. id,
+            }
+        end
+    elseif app_id == "garage" then
+        return SkyPhoneGarage.ResolveShare(source, id)
+    elseif app_id == "house" then
+        return SkyPhoneHousing.ResolveShare(source, id)
+    end
+    return nil
+end
+
+local function canonical_text(device, app_id, id)
+    if app_id ~= "darkchat" or not device.account_id then
+        return nil
+    end
+    local message = first_row([[
+        SELECT message.`body`, message.`message_type`, sender.`alias` AS `sender_alias`
+        FROM `sky_phone_darkchat_messages` message
+        JOIN `sky_phone_darkchat_members` member ON member.`conversation_id` = message.`conversation_id`
+        JOIN `sky_phone_darkchat_profiles` viewer ON viewer.`id` = member.`profile_id`
+        LEFT JOIN `sky_phone_darkchat_profiles` sender ON sender.`id` = message.`sender_profile_id`
+        WHERE message.`id` = ? AND viewer.`account_id` = ? AND message.`deleted_for_everyone` = 0
+            AND message.`message_type` IN ('text', 'emoji') LIMIT 1
+    ]], { id, tonumber(device.account_id) })
+    if not message then
+        return nil
+    end
+    return {
+        title = message.body,
+        subtitle = message.sender_alias,
+        copyText = message.body,
+    }
+end
+
 local function display_name(source)
     local first = trim(Bridge.Framework.GetFirstname(source), 80)
     local last = trim(Bridge.Framework.GetLastname(source), 80)
@@ -250,8 +627,30 @@ local function sanitize_payload(source, device, data)
         end
         local coords = GetEntityCoords(ped)
         payload.meta = { x = coords.x, y = coords.y, z = coords.z }
-    elseif type(data.imageUrl) == "string" and #data.imageUrl <= 2048 and data.imageUrl:match("^https://") then
-        payload.imageUrl = data.imageUrl
+    else
+        local canonical
+        if data.kind == "profile" and payload.id then
+            canonical = canonical_profile(device, app_id, payload.id)
+        elseif data.kind == "post" and payload.id then
+            canonical = canonical_post(device, app_id, payload.id)
+        elseif (data.kind == "track" or data.kind == "playlist") and app_id == "music" and payload.id then
+            canonical = canonical_music(device, data)
+        elseif data.kind == "document" and payload.id then
+            canonical = canonical_document(source, device, app_id, payload.id)
+        elseif data.kind == "text" and payload.id then
+            canonical = canonical_text(device, app_id, payload.id)
+        elseif data.kind == "link" and payload.id and (app_id == "citymarkt" or app_id == "local-pages") then
+            canonical = canonical_post(device, app_id, payload.id)
+        end
+        if not canonical then
+            return nil, "unsupported_payload"
+        end
+        payload.title = canonical.title
+        payload.copyText = canonical.copyText
+        payload.subtitle = canonical.subtitle
+        payload.imageUrl = canonical.imageUrl
+        payload.link = canonical.link
+        payload.meta = canonical.meta
     end
 
     local encoded = json.encode(payload)
@@ -262,6 +661,9 @@ local function sanitize_payload(source, device, data)
 end
 
 function SkyPhoneEasyShare.SanitizeChatPayload(source, data)
+    if not Config.EasyShare.Enabled then
+        return nil, "disabled"
+    end
     local device, error_response = current_device(source)
     if not device then
         return nil, error_response.error
@@ -328,12 +730,15 @@ local function apply_received_payload(transfer)
             meta.name, meta.notes or "", meta.organization or "", meta.phoneNumber,
         })
         TriggerClientEvent("sky_phone:contacts:changed", transfer.recipient_source, {})
-    elseif transfer.payload.kind == "note" then
+    elseif transfer.payload.kind == "note" or transfer.payload.kind == "text" or transfer.payload.kind == "document" then
         Bridge.Database.Query([[ 
             INSERT INTO `sky_phone_notes`
                 (`id`, `account_id`, `device_imei`, `title`, `body`, `pinned`)
             VALUES (?, ?, ?, ?, ?, 0)
-        ]], { uuid(), account_id, account_id and nil or device.imei, meta.title or "", meta.body or "" })
+        ]], {
+            uuid(), account_id, account_id and nil or device.imei,
+            meta.title or transfer.payload.title, meta.body or transfer.payload.copyText,
+        })
         if account_id then
             SkyPhone.RefreshAccount(account_id)
         else
@@ -353,6 +758,15 @@ local function apply_received_payload(transfer)
             account_id, account_id and nil or device.imei, meta.url, meta.remoteId, transfer.payload.kind,
         })
         TriggerClientEvent("sky_phone:gallery:changed", transfer.recipient_source, {})
+    elseif transfer.payload.kind == "post"
+        or transfer.payload.kind == "profile"
+        or transfer.payload.kind == "track"
+        or transfer.payload.kind == "playlist"
+        or transfer.payload.kind == "link"
+    then
+        return type(transfer.payload.link) == "string"
+    else
+        return false
     end
     return true
 end
@@ -415,6 +829,9 @@ Bridge.Callbacks.Register("sky_phone:easyshare:bootstrap", function(source)
     if not Config.EasyShare.Enabled then
         return { success = false, error = "disabled" }
     end
+    if not SkyPhone.AllowOperation(source, "easyshare_bootstrap", Config.EasyShare.BootstrapRequestsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
     local device, error_response = current_device(source)
     if not device then
         return error_response
@@ -437,6 +854,12 @@ Bridge.Callbacks.Register("sky_phone:easyshare:bootstrap", function(source)
 end)
 
 Bridge.Callbacks.Register("sky_phone:easyshare:set-visibility", function(source, data)
+    if not Config.EasyShare.Enabled then
+        return { success = false, error = "disabled" }
+    end
+    if not SkyPhone.AllowOperation(source, "easyshare_visibility", Config.EasyShare.VisibilityUpdatesPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
     local device, error_response = current_device(source)
     if not device then
         return error_response
@@ -453,6 +876,9 @@ Bridge.Callbacks.Register("sky_phone:easyshare:set-visibility", function(source,
 end)
 
 Bridge.Callbacks.Register("sky_phone:easyshare:request", function(source, data)
+    if not Config.EasyShare.Enabled then
+        return { success = false, error = "disabled" }
+    end
     if not SkyPhone.AllowOperation(source, "easyshare_request", Config.EasyShare.RequestsPerMinute, 60) then
         return { success = false, error = "rate_limited" }
     end
@@ -503,6 +929,12 @@ Bridge.Callbacks.Register("sky_phone:easyshare:request", function(source, data)
 end)
 
 Bridge.Callbacks.Register("sky_phone:easyshare:respond", function(source, data)
+    if not Config.EasyShare.Enabled then
+        return { success = false, error = "disabled" }
+    end
+    if not SkyPhone.AllowOperation(source, "easyshare_action", Config.EasyShare.ActionsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
     local id = type(data) == "table" and data.id or nil
     local transfer = type(id) == "string" and active_transfers[id] or nil
     if not transfer or transfer.recipient_source ~= source or transfer.status ~= "pending" or type(data.accepted) ~= "boolean" then
@@ -527,6 +959,12 @@ Bridge.Callbacks.Register("sky_phone:easyshare:respond", function(source, data)
 end)
 
 Bridge.Callbacks.Register("sky_phone:easyshare:cancel", function(source, data)
+    if not Config.EasyShare.Enabled then
+        return { success = false, error = "disabled" }
+    end
+    if not SkyPhone.AllowOperation(source, "easyshare_action", Config.EasyShare.ActionsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
     local id = type(data) == "table" and data.id or nil
     local transfer = type(id) == "string" and active_transfers[id] or nil
     if not transfer or (transfer.sender_source ~= source and transfer.recipient_source ~= source) then
diff --git a/sky_phone/source/server/garage.lua b/sky_phone/source/server/garage.lua
index 93a7e3c..c15f207 100644
--- a/sky_phone/source/server/garage.lua
+++ b/sky_phone/source/server/garage.lua
@@ -1,3 +1,5 @@
+SkyPhoneGarage = {}
+
 Bridge.Database.AfterMigration("sky_phone", function()
 
 local supported_systems = {
@@ -200,6 +202,30 @@ local function owned_vehicle_row(identifier, plate)
     return rows[1], table_name, owner_column, garage_system
 end
 
+function SkyPhoneGarage.ResolveShare(source, plate_value)
+    local plate = normalized_plate(plate_value)
+    if not plate then
+        return nil
+    end
+    local identifier = Bridge.Framework.GetIdentifier(source)
+    if type(identifier) ~= "string" or identifier == "" then
+        return nil
+    end
+    local row, _, _, garage_system = owned_vehicle_row(identifier, plate)
+    if not row then
+        return nil
+    end
+    local vehicle = vehicle_dto(row, garage_system)
+    local title = vehicle.nickname ~= "" and vehicle.nickname or vehicle.plate
+    return {
+        title = title,
+        subtitle = vehicle.plate,
+        copyText = title .. "\n" .. vehicle.plate .. " · " .. vehicle.status,
+        link = "skyphone://garage/vehicle/" .. vehicle.plate,
+        meta = { kind = vehicle.kind, location = vehicle.location, status = vehicle.status },
+    }
+end
+
 local function status_snapshot(row)
     local snapshot = {}
     for _, column in ipairs({ "stored", "state", "in_garage", "parked" }) do
diff --git a/sky_phone/source/server/housing.lua b/sky_phone/source/server/housing.lua
index d632d39..7bf7653 100644
--- a/sky_phone/source/server/housing.lua
+++ b/sky_phone/source/server/housing.lua
@@ -1,3 +1,24 @@
+SkyPhoneHousing = {}
+
+function SkyPhoneHousing.ResolveShare(source, property_id)
+    local overview = Bridge.Housing.GetOverview(source)
+    if not overview or type(overview.properties) ~= "table" then
+        return nil
+    end
+    for _, property in ipairs(overview.properties) do
+        if property.id == property_id then
+            return {
+                title = property.name,
+                subtitle = property.access,
+                copyText = property.name,
+                link = "skyphone://house/property/" .. property.id,
+                meta = { access = property.access, entrance = property.entrance },
+            }
+        end
+    end
+    return nil
+end
+
 Bridge.Callbacks.Register("sky_phone:housing:overview", function(source)
     if not SkyPhone.AllowOperation(
         source,

From ea34dce1c895f3f91654eb4970dacee02b5d8499 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 07:44:55 +0200
Subject: [PATCH 19/63] ENH - open exact EasyShare content targets

---
 frontend/src/stores/fliptok.test.ts       |  8 +++++++
 frontend/src/stores/fliptok.ts            |  4 ++++
 frontend/src/stores/picstagram.test.ts    |  8 +++++++
 frontend/src/stores/picstagram.ts         |  4 ++++
 frontend/src/utils/easyshare.test.ts      | 22 +++++++++++++++++
 frontend/src/views/apps/FeatherApp.vue    | 11 +++++++++
 frontend/src/views/apps/FlipTokApp.vue    | 15 +++++++++++-
 frontend/src/views/apps/LocalPagesApp.vue | 13 ++++++++--
 frontend/src/views/apps/PicstagramApp.vue | 13 +++++++++-
 frontend/testserver/index.cjs             | 18 ++++++++++++++
 sky_phone/source/client/main.lua          |  2 ++
 sky_phone/source/server/fliptok.lua       | 26 ++++++++++++++++++++
 sky_phone/source/server/picstagram.lua    | 29 +++++++++++++++++++++++
 13 files changed, 169 insertions(+), 4 deletions(-)

diff --git a/frontend/src/stores/fliptok.test.ts b/frontend/src/stores/fliptok.test.ts
index b1f0ad1..70bee90 100644
--- a/frontend/src/stores/fliptok.test.ts
+++ b/frontend/src/stores/fliptok.test.ts
@@ -183,4 +183,12 @@ describe('FlipTok verification updates', () => {
     expect(store.feed).toEqual([])
     expect(store.activities).toEqual([])
   })
+
+  it('loads an exact shared video by id', async () => {
+    vi.mocked(nuiCall).mockResolvedValue({ success: true, data: { ...video } })
+    const store = useFlipTokStore()
+
+    expect(await store.loadVideo(video.id)).toEqual(video)
+    expect(nuiCall).toHaveBeenCalledWith('fliptok:video', { id: video.id })
+  })
 })
diff --git a/frontend/src/stores/fliptok.ts b/frontend/src/stores/fliptok.ts
index 53f95c3..2bc5960 100644
--- a/frontend/src/stores/fliptok.ts
+++ b/frontend/src/stores/fliptok.ts
@@ -114,6 +114,10 @@ export const useFlipTokStore = defineStore('fliptok', {
       this.feed = response.data.items
       return true
     },
+    async loadVideo(id: string): Promise<FlipTokVideo | null> {
+      const response = await nuiCall<FlipTokVideo>('fliptok:video', { id })
+      return response.success && response.data ? response.data : null
+    },
     async discover(search: string): Promise<FlipTokVideo[]> {
       const response = await nuiCall<FlipTokVideo[]>('fliptok:discover', {
         search,
diff --git a/frontend/src/stores/picstagram.test.ts b/frontend/src/stores/picstagram.test.ts
index d23e934..e9567ac 100644
--- a/frontend/src/stores/picstagram.test.ts
+++ b/frontend/src/stores/picstagram.test.ts
@@ -213,4 +213,12 @@ describe('Picstagram store', () => {
     expect(store.feed).toEqual([])
     expect(store.stories).toEqual([])
   })
+
+  it('loads an exact shared post by id', async () => {
+    vi.mocked(nuiCall).mockResolvedValue({ success: true, data: { ...post } })
+    const store = usePicstagramStore()
+
+    expect(await store.loadPost(post.id)).toEqual(post)
+    expect(nuiCall).toHaveBeenCalledWith('picstagram:post', { id: post.id })
+  })
 })
diff --git a/frontend/src/stores/picstagram.ts b/frontend/src/stores/picstagram.ts
index eee6c31..2647ee7 100644
--- a/frontend/src/stores/picstagram.ts
+++ b/frontend/src/stores/picstagram.ts
@@ -127,6 +127,10 @@ export const usePicstagramStore = defineStore('picstagram', {
       this.feedCursor = response.data.nextCursor
       return true
     },
+    async loadPost(id: string): Promise<PicstagramPost | null> {
+      const response = await nuiCall<PicstagramPost>('picstagram:post', { id })
+      return response.success && response.data ? response.data : null
+    },
     async loadExplore(append = false): Promise<boolean> {
       const response = await nuiCall<PicstagramPage>('picstagram:explore', {
         cursor: append ? this.exploreCursor : undefined,
diff --git a/frontend/src/utils/easyshare.test.ts b/frontend/src/utils/easyshare.test.ts
index abe890a..f3fc67c 100644
--- a/frontend/src/utils/easyshare.test.ts
+++ b/frontend/src/utils/easyshare.test.ts
@@ -49,4 +49,26 @@ describe('EasyShare deep links', () => {
       ).query.listingId,
     ).toBe('listing-1')
   })
+
+  it.each([
+    ['picstagram', 'post', 'pic-post-1', '/apps/picstagram'],
+    ['picstagram', 'profile', 'pic-profile-1', '/apps/picstagram'],
+    ['feather', 'post', 'feather-post-1', '/apps/feather'],
+    ['fliptok', 'post', 'fliptok-1', '/apps/fliptok'],
+    ['local-pages', 'post', 'pages-post-1', '/apps/local-pages'],
+  ])('preserves the exact %s %s target', (appId, kind, id, path) => {
+    expect(
+      easyShareRoute(
+        payload({
+          appId: appId as EasySharePayload['appId'],
+          id,
+          kind: kind as EasySharePayload['kind'],
+          link: `skyphone://${appId}/${kind}/${id}`,
+        }),
+      ),
+    ).toMatchObject({
+      path,
+      query: { easyShareId: id, easyShareKind: kind },
+    })
+  })
 })
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 497b988..96e9ab7 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -709,6 +709,17 @@ onMounted(async () => {
   if (route.query.compose === '1') screen.value = 'composer'
   await feather.bootstrap()
   if (feather.onboarded) {
+    const easyShareId = String(route.query.easyShareId ?? '')
+    if (easyShareId && route.query.easyShareKind === 'profile') {
+      const profileId = Number(easyShareId)
+      if (Number.isInteger(profileId) && profileId > 0)
+        await openProfile(profileId)
+    } else if (easyShareId && route.query.easyShareKind === 'post') {
+      if (await feather.loadThread(easyShareId)) {
+        threadReplyTarget.value = feather.thread?.post ?? null
+        screen.value = 'thread'
+      }
+    }
     await feather.loadActivities()
     if (tab.value === 'profile' && feather.profile)
       await feather.loadProfile(feather.profile.id)
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index a6ad07e..a79fa4d 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -50,7 +50,7 @@ import {
   kToggle,
 } from 'konsta/vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import flipTokIcon from '@/assets/img/app-icons/fliptok.webp'
 import { useFlipTokStore } from '@/stores/fliptok'
@@ -71,6 +71,7 @@ type AuthMode = 'login' | 'register'
 const phone = usePhoneStore()
 const store = useFlipTokStore()
 const messageMedia = useMessageMediaStore()
+const route = useRoute()
 const router = useRouter()
 const authMode = ref<AuthMode>('login')
 const authHandle = ref('')
@@ -776,6 +777,18 @@ onMounted(async () => {
     composeOpen.value = true
   }
   await store.bootstrap()
+  const easyShareId = String(route.query.easyShareId ?? '')
+  if (easyShareId && route.query.easyShareKind === 'profile') {
+    const profileId = Number(easyShareId)
+    if (Number.isInteger(profileId) && profileId > 0)
+      await openProfile(profileId)
+  } else if (easyShareId && route.query.easyShareKind === 'post') {
+    const video = await store.loadVideo(easyShareId)
+    if (video) {
+      store.feed = [video]
+      tab.value = 'feed'
+    }
+  }
   await nextTick()
   observeVideos()
 })
diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index 3e36420..095ff83 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -279,7 +279,7 @@ function sharePost(): void {
   })
 }
 
-onMounted(() => {
+onMounted(async () => {
   const selection = messageMedia.consumeMany<MediaContext>('local-pages:compose')
   if (selection) {
     if (selection.context) {
@@ -294,7 +294,16 @@ onMounted(() => {
     }
   }
   if (route.query.compose === '1') screen.value = 'compose'
-  void loadFeed()
+  await loadFeed()
+  const easyShareId = String(route.query.easyShareId ?? '')
+  if (easyShareId && route.query.easyShareKind === 'post') {
+    const response = await pages.get(easyShareId)
+    if (response.success && response.data) {
+      selected.value = response.data
+      galleryIndex.value = 0
+      screen.value = 'detail'
+    }
+  }
 })
 </script>
 
diff --git a/frontend/src/views/apps/PicstagramApp.vue b/frontend/src/views/apps/PicstagramApp.vue
index 17c20bf..dc7a6d6 100644
--- a/frontend/src/views/apps/PicstagramApp.vue
+++ b/frontend/src/views/apps/PicstagramApp.vue
@@ -55,7 +55,7 @@ import {
   kToggle,
 } from 'konsta/vue'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import picstagramIcon from '@/assets/img/app-icons/picstagram.webp'
 import { useMessageMediaStore } from '@/stores/messageMedia'
@@ -80,6 +80,7 @@ type ProfileSection = 'photos' | 'saved'
 const phone = usePhoneStore()
 const store = usePicstagramStore()
 const mediaPicker = useMessageMediaStore()
+const route = useRoute()
 const router = useRouter()
 
 const tab = ref<Tab>('home')
@@ -629,6 +630,16 @@ watch(profileSection, (section) => {
 
 onMounted(async () => {
   await store.bootstrap()
+  const easyShareId = String(route.query.easyShareId ?? '')
+  if (easyShareId && route.query.easyShareKind === 'profile') {
+    await openProfile(easyShareId)
+  } else if (easyShareId && route.query.easyShareKind === 'post') {
+    const post = await store.loadPost(easyShareId)
+    if (post) {
+      tab.value = 'home'
+      selectedPost.value = post
+    }
+  }
   const composeSelection = mediaPicker.consumeMany<{
     caption?: string
     commentsEnabled?: boolean
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 86bad8f..65e699d 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -5387,6 +5387,15 @@ app.post('/api/:endpoint', (request, response) => {
     })
     return
   }
+  if (endpoint === 'picstagram:post') {
+    const post = picstagramPosts.find((item) => item.id === request.body.id)
+    response.json(
+      post
+        ? { success: true, data: post }
+        : { success: false, error: 'post_not_found' },
+    )
+    return
+  }
   if (endpoint === 'picstagram:explore') {
     response.json({
       success: true,
@@ -5768,6 +5777,15 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true })
     return
   }
+  if (endpoint === 'fliptok:video') {
+    const video = flipTokVideos.find((item) => item.id === request.body.id)
+    response.json(
+      video
+        ? { success: true, data: video }
+        : { success: false, error: 'video_not_found' },
+    )
+    return
+  }
   if (endpoint === 'fliptok:follow') {
     flipTokVideos
       .filter((video) => video.profile_id === request.body.profileId)
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 5799100..047e897 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -69,6 +69,7 @@ local server_callbacks = {
     "fliptok:logout",
     "fliptok:bootstrap",
     "fliptok:feed",
+    "fliptok:video",
     "fliptok:discover",
     "fliptok:publish",
     "fliptok:react",
@@ -91,6 +92,7 @@ local server_callbacks = {
     "picstagram:logout",
     "picstagram:bootstrap",
     "picstagram:feed",
+    "picstagram:post",
     "picstagram:explore",
     "picstagram:search",
     "picstagram:saved",
diff --git a/sky_phone/source/server/fliptok.lua b/sky_phone/source/server/fliptok.lua
index 8f9f7da..03a20ad 100644
--- a/sky_phone/source/server/fliptok.lua
+++ b/sky_phone/source/server/fliptok.lua
@@ -303,6 +303,32 @@ end)
 
 Bridge.Callbacks.Register("sky_phone:fliptok:feed", feed)
 
+Bridge.Callbacks.Register("sky_phone:fliptok:video", function(source, data)
+    local profile, error_response = require_profile(source)
+    if not profile then return error_response end
+    if not SkyPhone.AllowOperation(source, "fliptok:video", 60, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    local video_id = type(data) == "table" and data.id or nil
+    if type(video_id) ~= "string" or #video_id > 64 then
+        return { success = false, error = "video_not_found" }
+    end
+    local rows = list_videos(
+        profile.id,
+        [[v.`id` = ? AND (v.`visibility` = 'public' OR v.`profile_id` = ? OR
+            (v.`visibility` = 'followers' AND EXISTS(
+                SELECT 1 FROM `sky_phone_fliptok_follows` follow
+                WHERE follow.`follower_id` = ? AND follow.`following_id` = v.`profile_id`)))]],
+        { video_id, profile.id, profile.id, profile.id, profile.id },
+        1,
+        0,
+        "v.`created_at` DESC"
+    )
+    return rows[1]
+        and { success = true, data = rows[1] }
+        or { success = false, error = "video_not_found" }
+end)
+
 Bridge.Callbacks.Register("sky_phone:fliptok:discover", function(source, data)
     local profile, error_response = require_profile(source)
     if not profile then return error_response end
diff --git a/sky_phone/source/server/picstagram.lua b/sky_phone/source/server/picstagram.lua
index 683dc34..5d0f790 100644
--- a/sky_phone/source/server/picstagram.lua
+++ b/sky_phone/source/server/picstagram.lua
@@ -466,6 +466,35 @@ Bridge.Callbacks.Register("sky_phone:picstagram:feed", function(source, data)
     return result and { success = true, data = result } or { success = false, error = list_error }
 end)
 
+Bridge.Callbacks.Register("sky_phone:picstagram:post", function(source, data)
+    local profile, error_response = profile_for_session(source)
+    if not profile then
+        return error_response
+    end
+    if not SkyPhone.AllowOperation(source, "picstagram:post", 60, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    local post_id = type(data) == "table" and data.id or nil
+    if not valid_id(post_id) then
+        return { success = false, error = "post_not_found" }
+    end
+    local result, list_error = list_posts(
+        profile.id,
+        [[post.`id` = ? AND (profile.`private` = 0 OR post.`profile_id` = ? OR EXISTS(
+            SELECT 1 FROM `sky_phone_picstagram_follows` follow
+            WHERE follow.`follower_id` = ? AND follow.`following_id` = post.`profile_id`
+                AND follow.`status` = 'accepted'))]],
+        { post_id, profile.id, profile.id },
+        nil
+    )
+    if not result then
+        return { success = false, error = list_error }
+    end
+    return result.items[1]
+        and { success = true, data = result.items[1] }
+        or { success = false, error = "post_not_found" }
+end)
+
 Bridge.Callbacks.Register("sky_phone:picstagram:explore", function(source, data)
     local profile, error_response = profile_for_session(source)
     if not profile then

From 0053cfbdb1c9022011d1441dc65753a216491d91 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 07:52:46 +0200
Subject: [PATCH 20/63] ENH - prioritize recent SMS contacts

---
 frontend/src/stores/messages.ts         | 11 ++++--
 frontend/src/utils/messages.test.ts     | 49 +++++++++++++++++++++++++
 frontend/src/utils/messages.ts          | 43 ++++++++++++++++++++++
 frontend/src/views/apps/MessagesApp.vue |  6 ++-
 4 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/utils/messages.test.ts
 create mode 100644 frontend/src/utils/messages.ts

diff --git a/frontend/src/stores/messages.ts b/frontend/src/stores/messages.ts
index 749f674..8533192 100644
--- a/frontend/src/stores/messages.ts
+++ b/frontend/src/stores/messages.ts
@@ -8,6 +8,7 @@ import type {
   SmsMessage,
   SmsOutgoingMessage,
 } from '@/types/messages'
+import { sortConversationsByRecency } from '@/utils/messages'
 import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 export const useMessagesStore = defineStore('messages', () => {
@@ -23,10 +24,12 @@ export const useMessagesStore = defineStore('messages', () => {
   async function loadConversations(): Promise<boolean> {
     const response = await nuiCall<SmsConversation[]>('messages:conversations')
     if (response.success && response.data) {
-      conversations.value = response.data.map((conversation) => ({
-        ...conversation,
-        phoneNumber: String(conversation.phoneNumber),
-      }))
+      conversations.value = sortConversationsByRecency(
+        response.data.map((conversation) => ({
+          ...conversation,
+          phoneNumber: String(conversation.phoneNumber),
+        })),
+      )
     }
     else if (!response.success) conversations.value = []
     return response.success
diff --git a/frontend/src/utils/messages.test.ts b/frontend/src/utils/messages.test.ts
new file mode 100644
index 0000000..3ebed9a
--- /dev/null
+++ b/frontend/src/utils/messages.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+
+import type { SmsConversation } from '@/types/messages'
+import {
+  sortContactsByMessageRecency,
+  sortConversationsByRecency,
+} from '@/utils/messages'
+
+function conversation(
+  phoneNumber: string,
+  lastMessageAt: string,
+): SmsConversation {
+  return {
+    lastMessage: phoneNumber,
+    lastMessageAt,
+    lastMessageType: 'text',
+    phoneNumber,
+    unread: 0,
+  }
+}
+
+const conversations = [
+  conversation('5550000001', '2026-08-12 10:00:00'),
+  conversation('5550000002', '2026-08-12 12:00:00'),
+]
+
+describe('SMS recency ordering', () => {
+  it('places the conversation with the newest message first', () => {
+    expect(
+      sortConversationsByRecency(conversations).map(
+        (item) => item.phoneNumber,
+      ),
+    ).toEqual(['5550000002', '5550000001'])
+  })
+
+  it('places recently messaged contacts before unused contacts', () => {
+    const contacts = [
+      { name: 'Unused', phone_number: '5550000003' },
+      { name: 'Older', phone_number: '5550000001' },
+      { name: 'Newest', phone_number: '5550000002' },
+    ]
+
+    expect(
+      sortContactsByMessageRecency(contacts, conversations).map(
+        (item) => item.name,
+      ),
+    ).toEqual(['Newest', 'Older', 'Unused'])
+  })
+})
diff --git a/frontend/src/utils/messages.ts b/frontend/src/utils/messages.ts
new file mode 100644
index 0000000..64fde58
--- /dev/null
+++ b/frontend/src/utils/messages.ts
@@ -0,0 +1,43 @@
+import type { SmsConversation } from '@/types/messages'
+import { parseDatabaseDate } from '@/utils/date'
+
+function conversationTime(conversation: SmsConversation): number {
+  const timestamp = parseDatabaseDate(conversation.lastMessageAt).getTime()
+  return Number.isNaN(timestamp) ? 0 : timestamp
+}
+
+export function sortConversationsByRecency(
+  conversations: SmsConversation[],
+): SmsConversation[] {
+  return conversations
+    .map((conversation, index) => ({ conversation, index }))
+    .sort(
+      (left, right) =>
+        conversationTime(right.conversation) -
+          conversationTime(left.conversation) || left.index - right.index,
+    )
+    .map(({ conversation }) => conversation)
+}
+
+export function sortContactsByMessageRecency<
+  T extends { phone_number: string },
+>(contacts: T[], conversations: SmsConversation[]): T[] {
+  const activity = new Map(
+    conversations.map((conversation) => [
+      conversation.phoneNumber,
+      conversationTime(conversation),
+    ]),
+  )
+  return contacts
+    .map((contact, index) => ({ contact, index }))
+    .sort((left, right) => {
+      const leftActivity = activity.get(left.contact.phone_number)
+      const rightActivity = activity.get(right.contact.phone_number)
+      if (leftActivity === undefined && rightActivity === undefined)
+        return left.index - right.index
+      if (leftActivity === undefined) return 1
+      if (rightActivity === undefined) return -1
+      return rightActivity - leftActivity || left.index - right.index
+    })
+    .map(({ contact }) => contact)
+}
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 2b87689..3711643 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -54,6 +54,7 @@ import { useMessagesStore } from '@/stores/messages'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { sortContactsByMessageRecency } from '@/utils/messages'
 import type {
   GifSearchResult,
   SmsAttachmentType,
@@ -139,8 +140,9 @@ const contactAvatarUrls = computed(
 )
 const contactSuggestions = computed(() => {
   const query = composerNumber.value.trim().toLocaleLowerCase(phone.lang)
-  const contacts = calls.contacts.filter(
-    (contact) => contact.canMessage !== false,
+  const contacts = sortContactsByMessageRecency(
+    calls.contacts.filter((contact) => contact.canMessage !== false),
+    messages.conversations,
   )
   if (!query) return contacts.slice(0, 8)
   return contacts

From 5cbd9864d1742c20b5886ad8e29000fe97b47e8f Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 07:56:05 +0200
Subject: [PATCH 21/63] FIX - open SMS threads at latest message

---
 frontend/src/assets/main.css            |  5 +++++
 frontend/src/views/apps/MessagesApp.vue | 14 +++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 34ee5e5..f1ee14c 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4666,6 +4666,11 @@ button {
   min-height: calc(100% - 12px);
   padding: 10px 12px 20px;
 }
+.messages-thread-bottom {
+  display: block;
+  width: 100%;
+  height: 1px;
+}
 .messages-bubbles [class*='message-bubble'] {
   max-width: 248px;
   border-radius: 21px;
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 3711643..72e4c87 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -103,6 +103,7 @@ const gifNextOffset = ref(0)
 const recording = ref(false)
 const recordingElapsedMs = ref(0)
 const recordingLevels = ref<number[]>(Array(32).fill(0.16))
+const threadBottom = ref<HTMLElement | null>(null)
 let toastTimer: ReturnType<typeof setTimeout> | undefined
 let gifSearchTimer: ReturnType<typeof setTimeout> | undefined
 let recordingTimer: ReturnType<typeof setInterval> | undefined
@@ -329,11 +330,12 @@ function errorText(error?: string): string {
 
 async function scrollToBottom(animate = true): Promise<void> {
   await nextTick()
-  const page = document.querySelector<HTMLElement>('.messages-thread-page')
-  if (!page) return
-  page.scrollTo({
+  await new Promise<void>((resolve) => {
+    requestAnimationFrame(() => resolve())
+  })
+  threadBottom.value?.scrollIntoView({
+    block: 'end',
     behavior: animate ? 'smooth' : 'auto',
-    top: page.scrollHeight,
   })
 }
 
@@ -827,11 +829,12 @@ onMounted(async () => {
   if (messages.activeNumber) {
     const media = messageMedia.consume(messages.activeNumber)
     if (media) {
-      void sendAttachment(
+      await sendAttachment(
         media.mediaType === 'photo' ? 'image' : 'video',
         import.meta.env.DEV ? media.url : String(media.id),
       )
     }
+    await scrollToBottom(false)
   }
 })
 
@@ -1315,6 +1318,7 @@ onBeforeUnmount(() => {
         </k-message>
       </template>
     </k-messages>
+    <span ref="threadBottom" class="messages-thread-bottom" aria-hidden="true" />
 
     <section
       v-if="activeCanMessage && attachmentMenuOpen"

From f910a895e4f28592ba34f387eaa5f497a3f38b7c Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 07:59:57 +0200
Subject: [PATCH 22/63] FIX - separate SMS share preview from composer

---
 frontend/src/assets/main.css            | 5 ++++-
 frontend/src/views/apps/MessagesApp.vue | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index f1ee14c..10e108c 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4588,6 +4588,9 @@ button {
 .messages-thread-page--emoji {
   padding-bottom: 288px !important;
 }
+.messages-thread-page--share {
+  padding-bottom: 260px !important;
+}
 .messages-chat-header {
   position: fixed;
   z-index: 35;
@@ -4914,7 +4917,7 @@ button {
   position: fixed;
   z-index: 43;
   right: 12px;
-  bottom: 65px;
+  bottom: 89px;
   left: 12px;
   padding: 7px;
   border: 1px solid rgb(255 255 255 / 72%);
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 72e4c87..d401732 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -1120,7 +1120,10 @@ onBeforeUnmount(() => {
   <k-page
     v-else
     class="messages-page messages-thread-page"
-    :class="{ 'messages-thread-page--emoji': attachmentPanelOpen }"
+    :class="{
+      'messages-thread-page--emoji': attachmentPanelOpen,
+      'messages-thread-page--share': Boolean(shareDraft),
+    }"
     :aria-label="activeTitle"
   >
     <header class="messages-chat-header">

From f35d1e4ef215e7cf03dabac50e9f1bdc349c274a Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 08:06:08 +0200
Subject: [PATCH 23/63] ENH - share Local Pages posts from feed

---
 frontend/src/views/apps/LocalPagesApp.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index 095ff83..6ce5132 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -266,16 +266,15 @@ function openCityMarktListing(): void {
   })
 }
 
-function sharePost(): void {
-  if (!selected.value) return
+function sharePost(post: PagesPost): void {
   easyShare.open({
     appId: 'local-pages',
-    copyText: `${selected.value.title}\n${selected.value.body}`,
-    id: selected.value.id,
+    copyText: `${post.title}\n${post.body}`,
+    id: post.id,
     kind: 'post',
-    link: `skyphone://local-pages/post/${selected.value.id}`,
-    subtitle: `@${selected.value.author_name}`,
-    title: selected.value.title,
+    link: `skyphone://local-pages/post/${post.id}`,
+    subtitle: `@${post.author_name}`,
+    title: post.title,
   })
 }
 
@@ -362,6 +361,7 @@ onMounted(async () => {
             <div class="pages__post-foot">
               <button type="button" :class="{ active: post.is_liked }" :disabled="reactionPending" :aria-label="phone.t('Apps.localPages.likes')" @click="reactToPost(post, 'like')"><Heart :size="15" :fill="post.is_liked ? 'currentColor' : 'none'" /> {{ post.like_count }}</button>
               <span v-if="post.source_type === 'citymarkt'"><Store :size="14" /> CityMarkt</span>
+              <button type="button" :aria-label="phone.t('Apps.easyShare.share')" @click="sharePost(post)"><Share2 :size="15" /> {{ phone.t('Apps.easyShare.share') }}</button>
               <button type="button" :class="{ active: post.is_saved }" :disabled="reactionPending" :aria-label="phone.t('Apps.localPages.save')" @click="reactToPost(post, 'save')"><Bookmark :size="15" :fill="post.is_saved ? 'currentColor' : 'none'" /> {{ phone.t('Apps.localPages.save') }}</button>
             </div>
             </article>
@@ -415,7 +415,7 @@ onMounted(async () => {
         <div v-if="selected.images.length" class="pages__gallery" :style="{ background: selected.images[galleryIndex]?.gradient }"><button v-if="selected.images.length > 1" @click="moveGallery(-1)"><ChevronLeft /></button><button v-if="selected.images.length > 1" @click="moveGallery(1)"><ChevronRight /></button><span>{{ galleryIndex + 1 }} / {{ selected.images.length }}</span></div>
         <article><div class="pages__author"><span>{{ selected.author_name.charAt(0).toUpperCase() }}</span><div><strong>@{{ selected.author_name }}</strong><small>{{ relativeDate(selected.created_at) }}</small></div><i>{{ label('categories', selected.category) }}</i></div><h1>{{ selected.title }}</h1><p>{{ selected.body }}</p><div class="pages__location"><MapPin :size="17" /><div><small>{{ phone.t('Apps.localPages.location') }}</small><strong>{{ selected.district ? phone.t(`Apps.citymarkt.districts.${selected.district}`) : phone.t('Apps.localPages.allLosSantos') }}</strong></div></div><button v-if="selected.source_type === 'citymarkt'" class="pages__market-link" @click="openCityMarktListing"><Store :size="18" /><span><small>{{ phone.t('Apps.localPages.sharedFrom') }}</small><strong>{{ phone.t('Apps.localPages.openCityMarkt') }}</strong></span><b v-if="selected.citymarkt_price">${{ Number(selected.citymarkt_price).toLocaleString() }}</b></button></article>
       </div>
-      <div class="pages__detail-actions"><button :class="{ active: selected.is_liked }" @click="react('like')"><Heart :size="19" :fill="selected.is_liked ? 'currentColor' : 'none'" />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}</button><button @click="sharePost"><Share2 :size="19" />{{ phone.t('Apps.easyShare.share') }}</button><button @click="react('save')"><Bookmark :size="19" :fill="selected.is_saved ? 'currentColor' : 'none'" />{{ phone.t('Apps.localPages.save') }}</button></div>
+      <div class="pages__detail-actions"><button :class="{ active: selected.is_liked }" @click="react('like')"><Heart :size="19" :fill="selected.is_liked ? 'currentColor' : 'none'" />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}</button><button @click="sharePost(selected)"><Share2 :size="19" />{{ phone.t('Apps.easyShare.share') }}</button><button @click="react('save')"><Bookmark :size="19" :fill="selected.is_saved ? 'currentColor' : 'none'" />{{ phone.t('Apps.localPages.save') }}</button></div>
     </section>
 
     <section v-else class="pages__compose">

From aa7acba3baaea004668fa7f2035d433861e2c613 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 08:18:58 +0200
Subject: [PATCH 24/63] ENH - share own CityMarkt listings to Local Pages

---
 frontend/src/views/apps/CityMarktApp.vue | 30 ++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/apps/CityMarktApp.vue b/frontend/src/views/apps/CityMarktApp.vue
index 2550195..c2fac3d 100644
--- a/frontend/src/views/apps/CityMarktApp.vue
+++ b/frontend/src/views/apps/CityMarktApp.vue
@@ -136,6 +136,7 @@ const offerAmount = ref('')
 const offerPanelOpen = ref(false)
 const offerSubmitting = ref(false)
 const feedback = ref('')
+const pagesSharePendingId = ref<string | null>(null)
 const sellStep = ref(1)
 const submitting = ref(false)
 const selectedPhotoIds = ref<string[]>([])
@@ -359,9 +360,12 @@ function setFeedback(key: string): void {
   }, 2600)
 }
 
-async function shareToLocalPages(): Promise<void> {
-  if (!selectedListing.value) return
-  const response = await pages.shareCityMarkt(selectedListing.value.id)
+async function shareToLocalPages(listingId?: string): Promise<void> {
+  const id = listingId ?? selectedListing.value?.id
+  if (!id || pagesSharePendingId.value) return
+  pagesSharePendingId.value = id
+  const response = await pages.shareCityMarkt(id)
+  pagesSharePendingId.value = null
   setFeedback(
     response.success
       ? 'Apps.localPages.cityMarktShared'
@@ -1028,6 +1032,13 @@ onMounted(async () => {
                   <small>{{ label('status', item.status) }}</small>
                 </div>
                 <ChevronRight :size="17" /></button
+              ><button
+                v-if="profileMode === 'own' && (item.status === 'active' || item.status === 'reserved')"
+                class="citymarkt-profile-listing__share"
+                type="button"
+                :disabled="pagesSharePendingId !== null"
+                @click="shareToLocalPages(item.id)"
+              ><Share2 :size="15" />{{ phone.t('Apps.localPages.cityMarktShare') }}</button
             ></k-glass>
           </div>
         </template>
@@ -1131,7 +1142,8 @@ onMounted(async () => {
             "
             class="citymarkt__pages-share"
             type="button"
-            @click="shareToLocalPages"
+            :disabled="pagesSharePendingId !== null"
+            @click="shareToLocalPages()"
           >
             <Share2 :size="17" /><span
               ><strong>{{ phone.t('Apps.localPages.cityMarktShare') }}</strong
@@ -1886,6 +1898,16 @@ onMounted(async () => {
   min-height: 76px;
   padding: 8px !important;
 }
+.citymarkt-profile-listing > .citymarkt-profile-listing__share {
+  min-height: 36px;
+  padding: 8px 10px !important;
+  border-top: 1px solid #ffc92826;
+  justify-content: center;
+  color: var(--yellow);
+  font-size: 11px;
+  font-weight: 800;
+}
+.citymarkt-profile-listing__share:disabled { opacity: .45 }
 .citymarkt-profile-listing > button > span {
   width: 60px !important;
   height: 60px !important;

From 4255a90d2edf4c571bf5a378210fc916478cbda2 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 08:25:36 +0200
Subject: [PATCH 25/63] FIX - suggest compatible EasyShare destinations

---
 frontend/src/components/EasyShareSheet.vue | 23 ++++++------
 frontend/src/types/easyshare.ts            |  1 +
 frontend/src/utils/easyshare.test.ts       | 43 +++++++++++++++++++++-
 frontend/src/utils/easyshare.ts            | 29 ++++++++++++++-
 4 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/EasyShareSheet.vue b/frontend/src/components/EasyShareSheet.vue
index f316806..1d24ad2 100644
--- a/frontend/src/components/EasyShareSheet.vue
+++ b/frontend/src/components/EasyShareSheet.vue
@@ -24,10 +24,14 @@ import { useNotesStore } from '@/stores/notes'
 import { usePhoneStore } from '@/stores/phone'
 import type {
   EasyShareChatApp,
+  EasyShareDestinationApp,
   EasyShareTransfer,
   EasyShareVisibility,
 } from '@/types/easyshare'
-import { openEasySharePayload } from '@/utils/easyshare'
+import {
+  easyShareDestinationAppIds,
+  openEasySharePayload,
+} from '@/utils/easyshare'
 
 const phone = usePhoneStore()
 const appStore = useAppStoreStore()
@@ -45,7 +49,6 @@ let dragPointerId: number | null = null
 let dragStartTime = 0
 let dragStartY = 0
 const visibilityOptions: EasyShareVisibility[] = ['everyone', 'contacts', 'hidden']
-type EasyShareDestinationAppId = 'darkchat' | 'flare' | 'messages' | 'notes'
 const app = computed(() =>
   easyShare.payload ? getPhoneApp(easyShare.payload.appId) : undefined,
 )
@@ -105,14 +108,8 @@ const sharePeople = computed(() => {
 
   return people
 })
-const shareAppIds: EasyShareDestinationAppId[] = [
-  'messages',
-  'darkchat',
-  'flare',
-  'notes',
-]
 const shareApps = computed(() =>
-  shareAppIds
+  (easyShare.payload ? easyShareDestinationAppIds(easyShare.payload) : [])
     .filter((id) => !appStore.homeLayout.hidden.includes(id))
     .flatMap((id) => {
       const app = getPhoneApp(id)
@@ -201,7 +198,7 @@ function openChatApp(kind: EasyShareChatApp): void {
   void router.push(`/apps/${kind}`)
 }
 
-function openShareApp(appId: EasyShareDestinationAppId): void {
+function openShareApp(appId: EasyShareDestinationApp): void {
   if (appId === 'messages' || appId === 'darkchat' || appId === 'flare') {
     openChatApp(appId)
     return
@@ -211,8 +208,12 @@ function openShareApp(appId: EasyShareDestinationAppId): void {
 
 function saveAsNote(): void {
   if (!easyShare.payload) return
+  const body = [easyShare.payload.copyText.trim(), easyShare.payload.link?.trim()]
+    .filter((part): part is string => Boolean(part))
+    .filter((part, index, parts) => parts.indexOf(part) === index)
+    .join('\n')
   notes.createNote({
-    body: easyShare.payload.copyText,
+    body,
     title: easyShare.payload.title,
   })
   feedback.value = label('savedToNotes')
diff --git a/frontend/src/types/easyshare.ts b/frontend/src/types/easyshare.ts
index 368883c..8b9665d 100644
--- a/frontend/src/types/easyshare.ts
+++ b/frontend/src/types/easyshare.ts
@@ -16,6 +16,7 @@ export type EasyShareKind =
 
 export type EasyShareVisibility = 'contacts' | 'everyone' | 'hidden'
 export type EasyShareChatApp = 'darkchat' | 'flare' | 'messages'
+export type EasyShareDestinationApp = EasyShareChatApp | 'notes'
 export type EasyShareChatDraft = {
   appId: EasyShareChatApp
   body: string
diff --git a/frontend/src/utils/easyshare.test.ts b/frontend/src/utils/easyshare.test.ts
index f3fc67c..37fc749 100644
--- a/frontend/src/utils/easyshare.test.ts
+++ b/frontend/src/utils/easyshare.test.ts
@@ -1,7 +1,10 @@
 import { describe, expect, it } from 'vitest'
 
 import type { EasySharePayload } from '@/types/easyshare'
-import { easyShareRoute } from '@/utils/easyshare'
+import {
+  easyShareDestinationAppIds,
+  easyShareRoute,
+} from '@/utils/easyshare'
 
 function payload(overrides: Partial<EasySharePayload>): EasySharePayload {
   return {
@@ -72,3 +75,41 @@ describe('EasyShare deep links', () => {
     })
   })
 })
+
+describe('EasyShare destination suggestions', () => {
+  it.each([
+    'document',
+    'link',
+    'location',
+    'note',
+    'text',
+  ] as const)('offers Notes for %s content from another app', (kind) => {
+    expect(
+      easyShareDestinationAppIds(payload({ appId: 'calendar', kind })),
+    ).toEqual(['messages', 'darkchat', 'flare', 'notes'])
+  })
+
+  it.each([
+    'contact',
+    'photo',
+    'playlist',
+    'post',
+    'profile',
+    'track',
+    'video',
+  ] as const)('does not suggest lossy Notes conversion for %s content', (kind) => {
+    expect(easyShareDestinationAppIds(payload({ kind }))).toEqual([
+      'messages',
+      'darkchat',
+      'flare',
+    ])
+  })
+
+  it('does not suggest saving a Notes item back into Notes', () => {
+    expect(easyShareDestinationAppIds(payload({}))).toEqual([
+      'messages',
+      'darkchat',
+      'flare',
+    ])
+  })
+})
diff --git a/frontend/src/utils/easyshare.ts b/frontend/src/utils/easyshare.ts
index 44f4fad..059572a 100644
--- a/frontend/src/utils/easyshare.ts
+++ b/frontend/src/utils/easyshare.ts
@@ -1,7 +1,24 @@
 import type { Router } from 'vue-router'
 
 import { getPhoneApp } from '@/config/apps'
-import type { EasySharePayload } from '@/types/easyshare'
+import type {
+  EasyShareDestinationApp,
+  EasyShareKind,
+  EasySharePayload,
+} from '@/types/easyshare'
+
+const chatDestinations: EasyShareDestinationApp[] = [
+  'messages',
+  'darkchat',
+  'flare',
+]
+const noteCompatibleKinds = new Set<EasyShareKind>([
+  'document',
+  'link',
+  'location',
+  'note',
+  'text',
+])
 
 const schemeRoutes: Record<string, string> = {
   location: '/apps/map',
@@ -9,6 +26,16 @@ const schemeRoutes: Record<string, string> = {
   phone: '/apps/phone',
 }
 
+export function easyShareDestinationAppIds(
+  payload: EasySharePayload,
+): EasyShareDestinationApp[] {
+  const destinations = [...chatDestinations]
+  if (payload.appId !== 'notes' && noteCompatibleKinds.has(payload.kind)) {
+    destinations.push('notes')
+  }
+  return destinations
+}
+
 export function easyShareRoute(payload: EasySharePayload): {
   path: string
   query: Record<string, string>

From 7c697fd9931f528248b2fe617373ed806a0d6099 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 08:40:58 +0200
Subject: [PATCH 26/63] ADD - share CrewLink group invitations

---
 frontend/src/stores/phone.ts            |  3 ++
 frontend/src/utils/easyshare.test.ts    | 21 +++++++++++++
 frontend/src/utils/easyshare.ts         | 16 ++++++++++
 frontend/src/views/apps/CrewLinkApp.vue | 40 ++++++++++++++++++++++--
 sky_phone/config/locales/en.lua         |  2 +-
 sky_phone/source/server/easyshare.lua   | 41 +++++++++++++++++++++++--
 6 files changed, 118 insertions(+), 5 deletions(-)

diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index a0524ec..66b7e9c 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -475,6 +475,9 @@ const defaultLocales: LocaleTree = {
       private: 'Private',
       nearby: 'Nearby',
       copyCode: 'Copy code',
+      shareInvite: 'Invite by message',
+      shareInviteTitle: 'Join {group} on CrewLink',
+      shareInviteBody: 'Use invitation code {code} to join {group}.',
       manage: 'Manage',
       refresh: 'Refresh',
       codeCopied: 'Invitation code copied.',
diff --git a/frontend/src/utils/easyshare.test.ts b/frontend/src/utils/easyshare.test.ts
index 37fc749..1960381 100644
--- a/frontend/src/utils/easyshare.test.ts
+++ b/frontend/src/utils/easyshare.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import type { EasySharePayload } from '@/types/easyshare'
 import {
+  easyShareCrewLinkInviteCode,
   easyShareDestinationAppIds,
   easyShareRoute,
 } from '@/utils/easyshare'
@@ -74,6 +75,26 @@ describe('EasyShare deep links', () => {
       query: { easyShareId: id, easyShareKind: kind },
     })
   })
+
+  it('extracts a CrewLink invitation code from a shared deep link', () => {
+    expect(
+      easyShareCrewLinkInviteCode(
+        'link',
+        'skyphone://crewlink/invite/ab12cd34',
+        'ignored',
+      ),
+    ).toBe('AB12CD34')
+  })
+
+  it('accepts the canonical payload id as a CrewLink invite fallback', () => {
+    expect(easyShareCrewLinkInviteCode('link', '', 'n1ght247')).toBe('N1GHT247')
+    expect(
+      easyShareCrewLinkInviteCode('profile', '', 'n1ght247'),
+    ).toBeNull()
+    expect(
+      easyShareCrewLinkInviteCode('link', '', 'invalid-code'),
+    ).toBeNull()
+  })
 })
 
 describe('EasyShare destination suggestions', () => {
diff --git a/frontend/src/utils/easyshare.ts b/frontend/src/utils/easyshare.ts
index 059572a..c21ea79 100644
--- a/frontend/src/utils/easyshare.ts
+++ b/frontend/src/utils/easyshare.ts
@@ -59,6 +59,22 @@ export function easyShareRoute(payload: EasySharePayload): {
   }
 }
 
+export function easyShareCrewLinkInviteCode(
+  kind: unknown,
+  link: unknown,
+  id: unknown,
+): string | null {
+  if (kind !== 'link') return null
+  if (typeof link === 'string') {
+    const match = link.match(/^skyphone:\/\/crewlink\/invite\/([a-z0-9]{8})$/i)
+    if (match) return match[1].toUpperCase()
+  }
+  if (typeof id === 'string' && /^[a-z0-9]{8}$/i.test(id)) {
+    return id.toUpperCase()
+  }
+  return null
+}
+
 export async function openEasySharePayload(
   router: Router,
   payload: EasySharePayload,
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index c0d0fdf..9680cd4 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -59,7 +59,7 @@ import {
   onMounted,
   ref,
 } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import {
   defaultCayoStyle,
@@ -81,6 +81,7 @@ import type {
   CrewLinkRole,
 } from '@/types/crewlink'
 import { copyText } from '@/utils/clipboard'
+import { easyShareCrewLinkInviteCode } from '@/utils/easyshare'
 import { nuiCall } from '@/utils/nui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
@@ -96,6 +97,7 @@ type CrewLinkSheet =
 
 const phone = usePhoneStore()
 const crew = useCrewLinkStore()
+const route = useRoute()
 const router = useRouter()
 const mainlandMapUrl = `${import.meta.env.BASE_URL}img/maps/gtav-map.svg`
 const cayoMapUrl = `${import.meta.env.BASE_URL}img/maps/cayo-perico.svg`
@@ -105,6 +107,13 @@ const username = ref('')
 const groupName = ref('')
 const groupColour = ref<CrewLinkColour>('cyan')
 const inviteCode = ref('')
+const sharedInviteCode = ref(
+  easyShareCrewLinkInviteCode(
+    route.query.easyShareKind,
+    route.query.easyShareLink,
+    route.query.easyShareId,
+  ),
+)
 const pingType = ref<CrewLinkPingType>('meeting')
 const pingLabel = ref('')
 const pingAtMapCenter = ref(false)
@@ -257,6 +266,30 @@ function shareProfile(): void {
   })
 }
 
+function shareGroupInvite(): void {
+  const group = activeGroup.value
+  if (!group?.inviteCode) return
+  useEasyShareStore().open({
+    appId: 'crewlink',
+    copyText: t('shareInviteBody', {
+      code: group.inviteCode,
+      group: group.name,
+    }),
+    id: group.inviteCode,
+    kind: 'link',
+    link: `skyphone://crewlink/invite/${group.inviteCode}`,
+    subtitle: group.inviteCode,
+    title: t('shareInviteTitle', { group: group.name }),
+  })
+}
+
+function openSharedInvite(): void {
+  if (!sharedInviteCode.value || !crew.profile) return
+  openSheet('join-group')
+  inviteCode.value = sharedInviteCode.value
+  sharedInviteCode.value = null
+}
+
 function updateValue(
   target: 'username' | 'groupName' | 'inviteCode' | 'pingLabel',
   event: Event,
@@ -334,6 +367,7 @@ async function createProfile(): Promise<void> {
     return
   }
   showToast(t('profileCreated'))
+  openSharedInvite()
 }
 
 async function createGroup(): Promise<void> {
@@ -668,6 +702,7 @@ function onCrewLinkMessage(event: MessageEvent): void {
 onMounted(async () => {
   await crew.bootstrap()
   username.value = crew.profile?.username ?? ''
+  openSharedInvite()
   await nextTick()
   fitOnlineMembers()
   liveTimer = window.setInterval(() => void crew.refreshLive(), 3000)
@@ -854,6 +889,7 @@ onBeforeUnmount(() => {
             <div class="crewlink-quick-actions">
               <button v-if="canModerate" type="button" @click="loadNearby"><UserPlus /><span>{{ t('nearby') }}</span></button>
               <button v-if="activeGroup.inviteCode" type="button" @click="copyInviteCode"><Copy /><span>{{ t('copyCode') }}</span></button>
+              <button v-if="activeGroup.inviteCode" type="button" @click="shareGroupInvite"><Share2 /><span>{{ t('shareInvite') }}</span></button>
               <button v-if="canCoordinate" type="button" @click="openSheet('edit-group')"><Settings2 /><span>{{ t('manage') }}</span></button>
             </div>
 
@@ -1183,7 +1219,7 @@ onBeforeUnmount(() => {
 .crewlink-map-controls{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.18)}.crewlink-map-controls button{width:34px;height:34px;border:0;border-bottom:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.9);color:#183044;font-size:19px;display:grid;place-items:center}.crewlink-map-controls svg{width:16px}.crewlink-map-legend{position:absolute;left:10px;bottom:10px;padding:6px 8px;border-radius:10px;display:flex;gap:9px;background:rgba(8,20,30,.78);backdrop-filter:blur(10px);color:white;font-size:8px}.crewlink-map-legend span{display:flex;align-items:center;gap:4px}.crewlink-map-legend i{width:6px;height:6px;border-radius:50%;background:#35dc80}.crewlink-map-legend i.is-hidden{background:#8998a4}.crewlink-map-crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ff4d67}.crewlink-map-crosshair svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px white)}
 .crewlink-map-actions{height:76px;padding:8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#0c1822}.crewlink-map-actions button{border:1px solid rgba(255,255,255,.08);border-radius:15px;display:flex;align-items:center;gap:10px;padding:9px 11px;color:white;background:rgba(255,255,255,.06);text-align:left}.crewlink-map-actions button:disabled{opacity:.4}.crewlink-map-actions svg{width:23px;height:23px;flex:none;color:#28d9e8}.crewlink-map-actions span{display:flex;min-width:0;flex-direction:column;gap:2px}.crewlink-map-actions strong{font-size:15px;line-height:18px;white-space:nowrap}.crewlink-map-actions small{font-size:12px;line-height:15px;color:#a4b4c0;white-space:nowrap}
 .crewlink-group-hero{padding:22px;border-radius:25px;color:white;background:radial-gradient(circle at 82% 18%,var(--crew-aura),transparent 35%),linear-gradient(145deg,#0b2433,#0b1825);box-shadow:0 15px 35px rgba(6,20,31,.2)}.crewlink-group-hero__signal{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--crew);box-shadow:0 0 28px var(--crew-glow)}.crewlink-group-hero__signal svg{width:26px}.crewlink-group-hero>small{display:block;margin-top:17px;font-size:12px;font-weight:600;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:#b5c6d0}.crewlink-group-hero h1{margin:5px 0;font-size:29px;line-height:34px}.crewlink-group-hero p{margin:0 0 14px;font-size:14px;line-height:18px;color:#d0dbe1}.crewlink-group-hero>div:last-child{display:flex;gap:7px}.crewlink-group-hero :deep(.crewlink-group-badge){min-height:24px;padding:4px 8px;font-size:13px}
-.crewlink-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0 11px}.crewlink-quick-actions button{min-height:64px;border:0;border-radius:15px;padding:11px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--cl-text);background:var(--cl-surface);font-size:12px;font-weight:600;line-height:15px;box-shadow:0 3px 12px rgba(15,40,60,.06)}.crewlink-quick-actions svg{width:22px;height:22px;color:#138fc0}.crewlink-invitations--inline{margin:0}.crewlink-members-title{height:auto!important;min-height:34px;padding-top:8px!important;padding-bottom:6px!important;font-size:16px!important;font-weight:700!important;color:var(--cl-text)!important}.crewlink-member-list :deep(.k-list-item){min-height:70px}.crewlink-member-title{font-size:18px;font-weight:700;line-height:22px}.crewlink-member-subtitle{font-size:14px;line-height:18px;color:var(--cl-muted)}.crewlink-avatar{position:relative;width:43px;height:43px;border-radius:15px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,var(--crew),#273e55);font-size:12px;font-weight:900}.crewlink-avatar i{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border:2px solid white;border-radius:50%;background:#8998a4}.crewlink-avatar i.is-online{background:#35d880}.role-owner{color:#ffb020}.role-coordinator{color:#8b5cf6}.role-moderator{color:#2d9cff}.role-member{color:#22b77a}.role-guest{color:#8998a4}
+.crewlink-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:13px 0 11px}.crewlink-quick-actions button{min-height:64px;border:0;border-radius:15px;padding:11px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--cl-text);background:var(--cl-surface);font-size:12px;font-weight:600;line-height:15px;box-shadow:0 3px 12px rgba(15,40,60,.06)}.crewlink-quick-actions svg{width:22px;height:22px;color:#138fc0}.crewlink-invitations--inline{margin:0}.crewlink-members-title{height:auto!important;min-height:34px;padding-top:8px!important;padding-bottom:6px!important;font-size:16px!important;font-weight:700!important;color:var(--cl-text)!important}.crewlink-member-list :deep(.k-list-item){min-height:70px}.crewlink-member-title{font-size:18px;font-weight:700;line-height:22px}.crewlink-member-subtitle{font-size:14px;line-height:18px;color:var(--cl-muted)}.crewlink-avatar{position:relative;width:43px;height:43px;border-radius:15px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,var(--crew),#273e55);font-size:12px;font-weight:900}.crewlink-avatar i{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border:2px solid white;border-radius:50%;background:#8998a4}.crewlink-avatar i.is-online{background:#35d880}.role-owner{color:#ffb020}.role-coordinator{color:#8b5cf6}.role-moderator{color:#2d9cff}.role-member{color:#22b77a}.role-guest{color:#8998a4}
 .crewlink-section-header{display:flex;align-items:center;gap:13px;margin:5px 2px 16px}.crewlink-section-header>span{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,#27d9ed,#287cff)}.crewlink-section-header>span svg{width:26px;height:26px}.crewlink-section-header div{flex:1}.crewlink-section-header small{font-size:13px;font-weight:700;line-height:16px;color:#29b8e8;text-transform:uppercase;letter-spacing:.09em}.crewlink-section-header h1{margin:2px 0 0;font-size:29px;line-height:34px}.crewlink-section-header button{width:42px;height:42px;border:0;border-radius:14px;display:grid;place-items:center;color:white;background:#168dc2}.crewlink-section-header button svg{width:22px;height:22px}.crewlink-pings-tab{padding-top:12px}.crewlink-pings-tab .crewlink-section-header{margin-bottom:12px}.crewlink-ping-list{display:flex;flex-direction:column;gap:8px}.crewlink-ping-list :deep(.k-card){margin:0}.crewlink-ping-list article{display:grid;grid-template-columns:47px 1fr 32px 32px;gap:9px;align-items:center;padding:11px}.crewlink-ping-list article>i{width:47px;height:47px;border-radius:16px;display:grid;place-items:center;color:white}.crewlink-ping-list article>i svg{width:23px}.crewlink-ping-list article>div{display:flex;flex-direction:column;gap:2px;min-width:0}.crewlink-ping-list small{font-size:11px;line-height:14px;color:var(--cl-muted);text-transform:uppercase}.crewlink-ping-list strong{font-size:15px;line-height:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crewlink-ping-list span{font-size:12px;line-height:15px;color:var(--cl-muted)}.crewlink-ping-list button{border:0;background:transparent;color:#238fbd;display:grid;place-items:center}.crewlink-ping-list button:last-child{color:#ed5268}.crewlink-ping-list button svg{width:20px}.crewlink-empty-state{padding:68px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}.crewlink-empty-state>span{width:70px;height:70px;border-radius:23px;display:grid;place-items:center;color:#168dbd;background:rgba(39,191,230,.12)}.crewlink-empty-state>span svg{width:29px;height:29px}.crewlink-empty-state h2{margin:17px 0 7px;font-size:21px;line-height:26px}.crewlink-empty-state p{max-width:280px;margin:0;color:var(--cl-muted);font-size:14px;line-height:20px}
 .crewlink-profile-card{display:flex;align-items:center;gap:13px;padding:17px;border-radius:23px;color:white;background:linear-gradient(145deg,var(--crew),#183a5a)}.crewlink-profile-card>span{width:54px;height:54px;border:3px solid rgba(255,255,255,.72);border-radius:19px;display:grid;place-items:center;font-size:15px;font-weight:900;background:rgba(8,25,40,.22)}.crewlink-profile-card div{min-width:0}.crewlink-profile-card small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}.crewlink-profile-card h1{margin:2px 0;font-size:19px}.crewlink-profile-card p{margin:0;font-size:10px;opacity:.82}.crewlink-group-dot{width:35px;height:35px;border-radius:13px;display:grid;place-items:center;color:white}.crewlink-group-dot svg{width:18px}.crewlink-danger-row{--k-list-item-title-text-color:#e44760}.crewlink-danger-button{color:#e44760!important}.crewlink-role-title{margin:16px 0 8px!important;padding-inline:4px!important}.crewlink-role-list{margin:0!important}.crewlink-role-list :deep(.crewlink-role-item__content){min-height:68px;align-items:center}.crewlink-role-list :deep(.crewlink-role-item__media){width:28px;margin-right:10px;justify-content:center;color:#9ca8b3}.crewlink-role-list :deep(.crewlink-role-item__inner){min-width:0;padding-top:9px;padding-bottom:9px;text-align:left}.crewlink-role-list :deep(.crewlink-role-item__title){min-height:22px;font-size:14px;line-height:18px}.crewlink-role-list :deep(.crewlink-role-item__title+div){max-width:230px;color:var(--cl-muted);font-size:10px;line-height:14px;text-align:left}.crewlink-role-list :deep(.crewlink-role-item__title svg){color:#aab5bf}.crewlink-member-actions{display:grid;gap:8px;margin-top:12px}.crewlink-member-actions :deep(.k-button){margin-top:0}
 .crewlink-sheet__content{position:relative;max-height:82vh;overflow-y:auto;padding:26px 18px 24px;text-align:center;color:var(--cl-text);background:var(--cl-bg);border-radius:24px 24px 0 0}.crewlink-sheet__close{position:absolute;right:14px;top:12px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:var(--cl-muted);background:rgba(125,145,160,.15)}.crewlink-sheet__close svg{width:17px}.crewlink-sheet__icon,.crewlink-sheet__avatar{width:56px;height:56px;margin:0 auto 9px;border-radius:20px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,#27d9ed,#287cff);box-shadow:0 10px 25px rgba(31,139,205,.22)}.crewlink-sheet__avatar{background:linear-gradient(145deg,var(--crew),#29415a);font-weight:900}.crewlink-sheet__icon svg{width:26px}.crewlink-sheet__content h2{margin:4px 0;font-size:23px;line-height:1.2}.crewlink-sheet__content>p{margin:0 10px 13px;color:var(--cl-muted);font-size:13px;line-height:1.45}.crewlink-sheet__content :deep(.button){width:100%;margin-top:9px;font-size:13px}.crewlink-nearby-list{margin:10px 0 0!important}.crewlink-nearby-list :deep(.crewlink-nearby-item__content){min-height:66px;align-items:center}.crewlink-nearby-list :deep(.crewlink-nearby-item__media){width:38px;margin-right:12px;justify-content:center}.crewlink-nearby-list :deep(.crewlink-nearby-item__inner){min-width:0;padding-top:9px;padding-bottom:9px;text-align:left}.crewlink-nearby-list :deep(.crewlink-nearby-item__title){min-height:22px;gap:8px;font-size:14px;line-height:18px}.crewlink-nearby-list :deep(.crewlink-nearby-item__title+div){color:var(--cl-muted);font-size:10px;line-height:14px;text-align:left}.crewlink-nearby-list :deep(.crewlink-nearby-invite){width:auto;margin-top:0;padding-inline:13px;flex:none}.crewlink-field-label{display:block;margin:8px 0;text-align:left;font-size:12px;font-weight:700;color:var(--cl-muted)}.crewlink-colours{display:flex;justify-content:center;gap:9px;margin:8px 0 14px}.crewlink-colours button{width:35px;height:35px;border:3px solid transparent;border-radius:50%;display:grid;place-items:center;color:white}.crewlink-colours button.is-active{border-color:white;box-shadow:0 0 0 2px currentColor}.crewlink-colours svg{width:15px;opacity:0}.crewlink-colours button.is-active svg{opacity:1}.crewlink-error{color:#df3e58!important;font-size:12px!important;margin:8px!important}.crewlink-sheet-empty{padding:25px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--cl-muted)}.crewlink-sheet-empty svg{width:34px}.crewlink-sheet-empty strong{color:var(--cl-text)}.crewlink-sheet-empty span{font-size:11px}.crewlink-ping-title{font-size:25px!important;line-height:30px!important}.crewlink-sheet__content>.crewlink-ping-description{font-size:14px;line-height:19px}.crewlink-ping-types{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:15px 0}.crewlink-ping-types button{min-width:0;border:1px solid transparent;border-radius:13px;padding:10px 2px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--cl-muted);background:var(--cl-surface);font-size:12px;font-weight:600;line-height:15px}.crewlink-ping-types button.is-active{border-color:var(--ping);color:var(--ping);box-shadow:0 3px 12px var(--ping-glow)}.crewlink-ping-types svg{width:22px;height:22px}.crewlink-ping-form :deep(.k-list-input .text-xs){font-size:14px!important;font-weight:600;line-height:18px}.crewlink-ping-form :deep(.crewlink-ping-label-input){font-size:16px!important;line-height:20px}.crewlink-ping-location-list :deep(.k-list-item){min-height:70px}.crewlink-ping-location-copy{display:flex;flex-direction:column;gap:3px;text-align:left}.crewlink-ping-location-copy strong{font-size:17px;line-height:21px}.crewlink-ping-location-copy small{max-width:205px;color:var(--cl-muted);font-size:14px;line-height:18px}.crewlink-sheet__content :deep(.crewlink-share-ping){font-size:16px}.crewlink-code-card{display:grid;grid-template-columns:1fr auto 30px 30px;align-items:center;gap:5px;text-align:left}.crewlink-code-card small{font-size:9px;color:var(--cl-muted)}.crewlink-code-card strong{font-family:monospace;letter-spacing:.12em}.crewlink-code-card button{border:0;background:transparent;color:#168dbd}.crewlink-code-card svg{width:16px}.crewlink-member-preview{padding-top:34px}.crewlink-tabbar{z-index:20}.crewlink-tabbar :deep(.crewlink-tabbar__inner){width:100%!important;max-width:none!important;padding-inline:4px!important}.crewlink-tabbar :deep(.crewlink-tabbar__pane){width:100%!important;max-width:none!important;gap:2px;padding:0}.crewlink-tabbar :deep(.crewlink-tabbar__pane>.k-link){min-width:0!important;max-width:none!important;flex:1 1 25%!important;padding-inline:2px!important}.crewlink-tabbar :deep(.k-tabbar-link-label){font-size:9px;line-height:11px}.crewlink-tabbar :deep(.k-icon){width:23px;height:23px}.crewlink-tabbar :deep(.badge){position:absolute;top:-3px;right:-7px;font-size:7px}
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index f8110dd..f9cd31d 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -132,7 +132,7 @@ Locales["en"] = {
                 groupCreated = "Crew created.", joinedGroup = "You joined the crew.", activeGroupChanged = "Active crew changed.", pendingInvitations = "Invitations", invitedBy = "Invited by @{username}", inviteAccepted = "Invitation accepted.", inviteDeclined = "Invitation declined.",
                 navigation = "CrewLink navigation", map = "Map", crew = "Crew", pings = "Pings", profile = "Profile", onlineNow = "online now", zoomIn = "Zoom in", zoomOut = "Zoom out", myLocation = "Center my location",
                 member = "Member", members = "Members", openCrew = "View team", newPing = "New Ping", shareLocation = "Mark a place", locationUnavailable = "Your live location is currently hidden.", activeCrew = "Active private crew", groupSummarySingle = "{online} of {total} member online", groupSummary = "{online} of {total} members online", private = "Private",
-                nearby = "Nearby", copyCode = "Copy code", manage = "Manage", refresh = "Refresh", codeCopied = "Invitation code copied.", codeRotated = "A new invitation code is active.",
+                nearby = "Nearby", copyCode = "Copy code", shareInvite = "Invite by message", shareInviteTitle = "Join {group} on CrewLink", shareInviteBody = "Use invitation code {code} to join {group}.", manage = "Manage", refresh = "Refresh", codeCopied = "Invitation code copied.", codeRotated = "A new invitation code is active.",
                 peopleNearby = "People Nearby", peopleNearbyBody = "Only CrewLink users within {distance} meters appear here.", metersAway = "{distance} m away", invite = "Invite", inviteSent = "Invitation sent to @{username}.", nobodyNearby = "Nobody in range", nobodyNearbyBody = "Move closer to another CrewLink user and scan again.", scanAgain = "Scan Again",
                 liveCoordination = "Live coordination", noPings = "No active pings", noPingsBody = "Share a meeting point, warning, or target with your crew.", expiresMinutes = "{count} min left", expiresSeconds = "{count} sec left", sharedBy = "Shared by @{username}", setRoute = "Set Route", routeSet = "GPS route set.", pingCreated = "Ping shared with your crew.", pingRemoved = "Ping removed.",
                 newPingBody = "Share your current position or place the ping at the center of the map.", pingLabel = "Ping label", pingLabelPlaceholder = "e.g. Meet at the garage", placeOnMap = "Use map center", placeOnMapBody = "Otherwise your current position is used.", sharePing = "Share Ping",
diff --git a/sky_phone/source/server/easyshare.lua b/sky_phone/source/server/easyshare.lua
index 26350dc..1673621 100644
--- a/sky_phone/source/server/easyshare.lua
+++ b/sky_phone/source/server/easyshare.lua
@@ -217,6 +217,39 @@ local function canonical_profile(device, app_id, id)
     return nil
 end
 
+local function canonical_crewlink_invite(device, invite_code)
+    if not device.account_id
+        or type(invite_code) ~= "string"
+        or #invite_code ~= 8
+        or invite_code:find("[^A-Z0-9]")
+    then
+        return nil
+    end
+    local group = first_row([[
+        SELECT g.`name`, g.`invite_code`
+        FROM `sky_phone_crewlink_profiles` p
+        JOIN `sky_phone_crewlink_memberships` m ON m.`profile_id` = p.`id`
+        JOIN `sky_phone_crewlink_groups` g ON g.`id` = m.`group_id`
+        WHERE p.`account_id` = ? AND g.`invite_code` = ?
+            AND m.`role` IN ('owner', 'coordinator')
+        LIMIT 1
+    ]], { tonumber(device.account_id), invite_code })
+    if not group then
+        return nil
+    end
+    local locale = (Locales[Config.Bridge.Locale] or Locales["en"]).Phone.Apps.crewlink
+    local title = locale.shareInviteTitle:gsub("{group}", function() return group.name end)
+    local copy_text = locale.shareInviteBody
+        :gsub("{code}", function() return group.invite_code end)
+        :gsub("{group}", function() return group.name end)
+    return {
+        title = title,
+        subtitle = group.invite_code,
+        copyText = copy_text,
+        link = "skyphone://crewlink/invite/" .. group.invite_code,
+    }
+end
+
 local function canonical_post(device, app_id, id)
     if app_id == "picstagram" then
         local post = first_row([[
@@ -639,8 +672,12 @@ local function sanitize_payload(source, device, data)
             canonical = canonical_document(source, device, app_id, payload.id)
         elseif data.kind == "text" and payload.id then
             canonical = canonical_text(device, app_id, payload.id)
-        elseif data.kind == "link" and payload.id and (app_id == "citymarkt" or app_id == "local-pages") then
-            canonical = canonical_post(device, app_id, payload.id)
+        elseif data.kind == "link" and payload.id then
+            if app_id == "citymarkt" or app_id == "local-pages" then
+                canonical = canonical_post(device, app_id, payload.id)
+            elseif app_id == "crewlink" then
+                canonical = canonical_crewlink_invite(device, payload.id)
+            end
         end
         if not canonical then
             return nil, "unsupported_payload"

From 25ae1b31c1d84ec88d5f4d984e8bbe28717db860 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 08:48:51 +0200
Subject: [PATCH 27/63] ADD - share music through messages

---
 frontend/src/utils/easyshare.test.ts | 30 ++++++++++++++
 frontend/src/utils/easyshare.ts      | 28 +++++++++++++
 frontend/src/views/apps/MusicApp.vue | 59 ++++++++++++++++++++++------
 3 files changed, 104 insertions(+), 13 deletions(-)

diff --git a/frontend/src/utils/easyshare.test.ts b/frontend/src/utils/easyshare.test.ts
index 1960381..5a49f67 100644
--- a/frontend/src/utils/easyshare.test.ts
+++ b/frontend/src/utils/easyshare.test.ts
@@ -4,6 +4,7 @@ import type { EasySharePayload } from '@/types/easyshare'
 import {
   easyShareCrewLinkInviteCode,
   easyShareDestinationAppIds,
+  easyShareMusicTarget,
   easyShareRoute,
 } from '@/utils/easyshare'
 
@@ -95,6 +96,35 @@ describe('EasyShare deep links', () => {
       easyShareCrewLinkInviteCode('link', '', 'invalid-code'),
     ).toBeNull()
   })
+
+  it.each([
+    [
+      'track',
+      'skyphone://music/server/city-after-dark',
+      { id: 'city-after-dark', kind: 'track', source: 'server' },
+    ],
+    [
+      'track',
+      'skyphone://music/youtube/music-youtube-1',
+      { id: 'music-youtube-1', kind: 'track', source: 'youtube' },
+    ],
+    [
+      'playlist',
+      'skyphone://music/playlist/music-playlist-1',
+      { id: 'music-playlist-1', kind: 'playlist' },
+    ],
+  ] as const)('extracts the exact shared music target', (kind, link, target) => {
+    expect(easyShareMusicTarget(kind, link)).toEqual(target)
+  })
+
+  it('rejects mismatched music share kinds', () => {
+    expect(
+      easyShareMusicTarget(
+        'playlist',
+        'skyphone://music/server/city-after-dark',
+      ),
+    ).toBeNull()
+  })
 })
 
 describe('EasyShare destination suggestions', () => {
diff --git a/frontend/src/utils/easyshare.ts b/frontend/src/utils/easyshare.ts
index c21ea79..05521ca 100644
--- a/frontend/src/utils/easyshare.ts
+++ b/frontend/src/utils/easyshare.ts
@@ -75,6 +75,34 @@ export function easyShareCrewLinkInviteCode(
   return null
 }
 
+export type EasyShareMusicTarget =
+  | { id: string; kind: 'playlist' }
+  | { id: string; kind: 'track'; source: 'server' | 'youtube' }
+
+export function easyShareMusicTarget(
+  kind: unknown,
+  link: unknown,
+): EasyShareMusicTarget | null {
+  if (typeof link !== 'string') return null
+  if (kind === 'track') {
+    const match = link.match(
+      /^skyphone:\/\/music\/(server|youtube)\/([^/?#]+)$/,
+    )
+    if (match) {
+      return {
+        id: match[2],
+        kind: 'track',
+        source: match[1] as 'server' | 'youtube',
+      }
+    }
+  }
+  if (kind === 'playlist') {
+    const match = link.match(/^skyphone:\/\/music\/playlist\/([^/?#]+)$/)
+    if (match) return { id: match[1], kind: 'playlist' }
+  }
+  return null
+}
+
 export async function openEasySharePayload(
   router: Router,
   payload: EasySharePayload,
diff --git a/frontend/src/views/apps/MusicApp.vue b/frontend/src/views/apps/MusicApp.vue
index 56b6b96..1ac9a67 100644
--- a/frontend/src/views/apps/MusicApp.vue
+++ b/frontend/src/views/apps/MusicApp.vue
@@ -46,11 +46,13 @@ import {
 } from 'lucide-vue-next'
 import type { CSSProperties } from 'vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import { useMusicStore } from '@/stores/music'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MusicPlaylist, MusicTrack } from '@/types/music'
+import { easyShareMusicTarget } from '@/utils/easyshare'
 
 type MusicTab = 'library' | 'playlists' | 'search'
 type MusicSheet =
@@ -69,6 +71,7 @@ const MUSIC_SHEET_TRANSITION_MS = 420
 const music = useMusicStore()
 const easyShare = useEasyShareStore()
 const phone = usePhoneStore()
+const route = useRoute()
 const activeTab = ref<MusicTab>('library')
 const activePlaylist = ref<MusicPlaylist | null>(null)
 const addMenuOpened = ref(false)
@@ -273,10 +276,11 @@ function openTrackMenu(event: MouseEvent, track: MusicTrack): void {
   actionMenuOpened.value = true
 }
 
-function shareTrack(): void {
-  const track = actionTrack.value
+function shareTrack(selectedTrack: MusicTrack | null = actionTrack.value): void {
+  const track = selectedTrack
   if (!track) return
   closeMenus()
+  playerOpened.value = false
   easyShare.open({
     appId: 'music',
     copyText: `${track.title} — ${track.artist}`,
@@ -505,8 +509,24 @@ watch(
   },
 )
 
-onMounted(() => {
-  void music.load()
+onMounted(async () => {
+  await music.load()
+  const target = easyShareMusicTarget(
+    route.query.easyShareKind,
+    route.query.easyShareLink,
+  )
+  if (!target) return
+  if (target.kind === 'playlist') {
+    const playlist = music.playlists.find((entry) => entry.id === target.id)
+    if (playlist) openPlaylist(playlist)
+    return
+  }
+  const track = music.allTracks.find(
+    (entry) => entry.id === target.id && entry.source === target.source,
+  )
+  if (!track) return
+  await playTrack(track)
+  playerOpened.value = true
 })
 
 onBeforeUnmount(() => {
@@ -1271,14 +1291,24 @@ onBeforeUnmount(() => {
             <X :size="20" />
           </k-link>
           <span>{{ phone.t('Apps.music.nowPlaying') }}</span>
-          <k-link
-            component="button"
-            icon-only
-            :aria-label="phone.t('Apps.music.addToPlaylist')"
-            @click="openCurrentTrackPlaylistPicker"
-          >
-            <CirclePlus :size="21" />
-          </k-link>
+          <div class="music-player-header-actions">
+            <k-link
+              component="button"
+              icon-only
+              :aria-label="phone.t('Apps.easyShare.share')"
+              @click="shareTrack(music.currentTrack)"
+            >
+              <Share2 :size="20" />
+            </k-link>
+            <k-link
+              component="button"
+              icon-only
+              :aria-label="phone.t('Apps.music.addToPlaylist')"
+              @click="openCurrentTrackPlaylistPicker"
+            >
+              <CirclePlus :size="21" />
+            </k-link>
+          </div>
         </header>
         <div
           class="music-player-art"
@@ -1977,8 +2007,11 @@ onBeforeUnmount(() => {
   color: #fff;
 }
 
-.music-player > header > :last-child {
+.music-player-header-actions {
   justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .music-player-art {

From 65e30dc32cb830ab88a1eddbc2ec522bb5d71c57 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 09:12:10 +0200
Subject: [PATCH 28/63] ADD - share own contact from Control Center

---
 .../src/components/PhoneControlCenter.vue     | 53 ++++++++++--
 frontend/src/stores/phone.ts                  |  1 +
 frontend/testserver/index.cjs                 | 15 ++++
 sky_phone/config/locales/en.lua               |  2 +-
 sky_phone/source/client/main.lua              |  1 +
 sky_phone/source/server/easyshare.lua         | 84 +++++++++++++++----
 6 files changed, 130 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/PhoneControlCenter.vue b/frontend/src/components/PhoneControlCenter.vue
index 6c62f6a..d1b1689 100644
--- a/frontend/src/components/PhoneControlCenter.vue
+++ b/frontend/src/components/PhoneControlCenter.vue
@@ -10,6 +10,7 @@ import {
   Pause,
   Plane,
   Play,
+  RadioTower,
   Signal,
   SkipBack,
   SkipForward,
@@ -30,6 +31,8 @@ import { useRouter } from 'vue-router'
 
 import { usePhoneStore } from '@/stores/phone'
 import { useMusicStore } from '@/stores/music'
+import { useEasyShareStore } from '@/stores/easyshare'
+import type { EasySharePayload } from '@/types/easyshare'
 import { nuiCall } from '@/utils/nui'
 
 const props = defineProps<{ opened: boolean }>()
@@ -44,6 +47,7 @@ type ConnectivityPreference =
 
 const phone = usePhoneStore()
 const music = useMusicStore()
+const easyShare = useEasyShareStore()
 const router = useRouter()
 const panel = ref<HTMLElement | null>(null)
 const brightness = ref(phone.preferences.settings.screenBrightness)
@@ -56,6 +60,7 @@ const volume = ref(
 )
 const flashlightActive = ref(false)
 const flashlightPending = ref(false)
+const easySharePending = ref(false)
 const previousAlertVolume = ref(volume.value || 75)
 
 const inactiveGlassColors = {
@@ -87,6 +92,10 @@ const flashlightColors = computed(() =>
       }
     : inactiveGlassColors,
 )
+const easyShareColors = {
+  bgIos: 'bg-[#0a84ff]',
+  shadowIos: 'shadow-ios-dark-glass',
+}
 const brightnessStyle = computed<CSSProperties>(() => ({
   '--control-level': `${brightness.value}%`,
 }))
@@ -202,6 +211,23 @@ async function toggleFlashlight(): Promise<void> {
   flashlightPending.value = false
 }
 
+async function shareOwnContact(): Promise<void> {
+  if (easySharePending.value) return
+  easySharePending.value = true
+  const response = await nuiCall<EasySharePayload>('easyshare:own-contact')
+  easySharePending.value = false
+  if (!response.success || !response.data) {
+    console.error(
+      '[ControlCenter] Could not load own EasyShare contact.',
+      response.error,
+    )
+    return
+  }
+  emit('close')
+  easyShare.open(response.data)
+  await easyShare.showNearby()
+}
+
 function openApp(path: string): void {
   emit('close')
   void router.push(path)
@@ -360,9 +386,7 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="control-center__middle-grid">
-          <div
-            class="control-center__round-control control-center__round-control--wide"
-          >
+          <div class="control-center__round-control">
             <k-glass
               component="button"
               type="button"
@@ -385,6 +409,20 @@ onBeforeUnmount(() => {
             </k-glass>
           </div>
 
+          <div class="control-center__round-control">
+            <k-glass
+              component="button"
+              type="button"
+              class="control-center__round-button control-center__round-button--easyshare"
+              :colors="easyShareColors"
+              :disabled="easySharePending || !phone.device?.sim"
+              :aria-label="phone.t('ControlCenter.easyShareContact')"
+              @click="shareOwnContact"
+            >
+              <RadioTower aria-hidden="true" />
+            </k-glass>
+          </div>
+
           <k-glass
             class="control-center__slider control-center__slider--brightness"
             :colors="inactiveGlassColors"
@@ -712,10 +750,6 @@ onBeforeUnmount(() => {
   justify-content: center;
 }
 
-.control-center__round-control--wide {
-  grid-column: 1 / span 2;
-}
-
 .control-center__round-control > span,
 .control-center__quick-action > span {
   width: 100%;
@@ -746,6 +780,11 @@ onBeforeUnmount(() => {
   color: #ff453a;
 }
 
+.control-center__round-button--easyshare {
+  background: #0a84ff !important;
+  box-shadow: 0 8px 22px rgb(10 132 255 / 34%) !important;
+}
+
 .control-center__focus-button {
   display: flex;
   grid-column: 1 / span 2;
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 66b7e9c..f7adedd 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -3375,6 +3375,7 @@ const defaultLocales: LocaleTree = {
     camera: 'Camera',
     cellular: 'Cellular Data',
     close: 'Close Control Center',
+    easyShareContact: 'Share my contact with nearby players',
     flashlight: 'Flashlight',
     focus: 'Focus',
     label: 'Control Center',
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 65e699d..ea32d60 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -6868,6 +6868,21 @@ app.post('/api/:endpoint', (request, response) => {
     })
     return
   }
+  if (endpoint === 'easyshare:own-contact') {
+    response.json({
+      success: true,
+      data: {
+        appId: 'phone',
+        copyText: 'Alex Morgan\n5551234567',
+        id: 'self',
+        kind: 'contact',
+        meta: { name: 'Alex Morgan', phoneNumber: '5551234567' },
+        subtitle: '5551234567',
+        title: 'Alex Morgan',
+      },
+    })
+    return
+  }
   if (endpoint === 'easyshare:set-visibility') {
     easyShareVisibility = request.body.visibility
     response.json({ success: true, data: { visibility: easyShareVisibility } })
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index f9cd31d..6a7cfe0 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -72,7 +72,7 @@ Locales["en"] = {
         },
         ControlCenter = {
             airplaneMode = "Airplane Mode", bluetooth = "Bluetooth", brightness = "Brightness", calculator = "Calculator",
-            camera = "Camera", cellular = "Cellular Data", close = "Close Control Center", flashlight = "Flashlight",
+            camera = "Camera", cellular = "Cellular Data", close = "Close Control Center", easyShareContact = "Share my contact with nearby players", flashlight = "Flashlight",
             focus = "Focus", label = "Control Center", media = "Media", muteRingtone = "Mute ringtone and notifications", next = "Next track", notPlaying = "Not Playing",
             open = "Open Control Center", play = "Play", previous = "Previous track", quickActions = "Quick actions",
             timer = "Timer", unmuteRingtone = "Unmute ringtone and notifications", volume = "Volume", wifi = "Wi-Fi",
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 047e897..4d73d97 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -217,6 +217,7 @@ local server_callbacks = {
     "messages:delete",
     "messages:gifs",
     "easyshare:bootstrap",
+    "easyshare:own-contact",
     "easyshare:set-visibility",
     "easyshare:request",
     "easyshare:respond",
diff --git a/sky_phone/source/server/easyshare.lua b/sky_phone/source/server/easyshare.lua
index 1673621..44d694b 100644
--- a/sky_phone/source/server/easyshare.lua
+++ b/sky_phone/source/server/easyshare.lua
@@ -604,25 +604,36 @@ local function sanitize_payload(source, device, data)
 
     local condition, owner_params = owner_condition(device)
     if data.kind == "contact" and type(payload.id) == "string" then
-        local params = { payload.id }
-        append_params(params, owner_params)
-        local rows = Bridge.Database.Query(([[
-            SELECT `name`, `phone_number`, `organization`, `notes`
-            FROM `sky_phone_contacts` WHERE `contact_id` = ? AND %s LIMIT 1
-        ]]):format(condition), params)
-        local contact = rows[1]
-        if not contact then
-            return nil, "not_owned"
+        if app_id == "phone" and payload.id == "self" then
+            local contact = canonical_own_contact(source, device)
+            if not contact then
+                return nil, "sim_required"
+            end
+            payload.title = contact.title
+            payload.subtitle = contact.subtitle
+            payload.copyText = contact.copyText
+            payload.meta = contact.meta
+        else
+            local params = { payload.id }
+            append_params(params, owner_params)
+            local rows = Bridge.Database.Query(([[
+                SELECT `name`, `phone_number`, `organization`, `notes`
+                FROM `sky_phone_contacts` WHERE `contact_id` = ? AND %s LIMIT 1
+            ]]):format(condition), params)
+            local contact = rows[1]
+            if not contact then
+                return nil, "not_owned"
+            end
+            payload.title = contact.name
+            payload.subtitle = contact.phone_number
+            payload.copyText = ("%s\n%s"):format(contact.name, contact.phone_number)
+            payload.meta = {
+                name = contact.name,
+                notes = contact.notes,
+                organization = contact.organization,
+                phoneNumber = contact.phone_number,
+            }
         end
-        payload.title = contact.name
-        payload.subtitle = contact.phone_number
-        payload.copyText = ("%s\n%s"):format(contact.name, contact.phone_number)
-        payload.meta = {
-            name = contact.name,
-            notes = contact.notes,
-            organization = contact.organization,
-            phoneNumber = contact.phone_number,
-        }
     elseif data.kind == "note" and type(payload.id) == "string" then
         local params = { payload.id }
         append_params(params, owner_params)
@@ -808,6 +819,25 @@ local function apply_received_payload(transfer)
     return true
 end
 
+local function canonical_own_contact(source, device)
+    if not device.phone_number then
+        return nil
+    end
+    local name = display_name(source)
+    return {
+        appId = "phone",
+        kind = "contact",
+        id = "self",
+        title = name,
+        subtitle = device.phone_number,
+        copyText = ("%s\n%s"):format(name, device.phone_number),
+        meta = {
+            name = name,
+            phoneNumber = device.phone_number,
+        },
+    }
+end
+
 local function advance_transfer(id)
     local transfer = active_transfers[id]
     if not transfer or transfer.status ~= "transferring" then
@@ -890,6 +920,24 @@ Bridge.Callbacks.Register("sky_phone:easyshare:bootstrap", function(source)
     }
 end)
 
+Bridge.Callbacks.Register("sky_phone:easyshare:own-contact", function(source)
+    if not Config.EasyShare.Enabled then
+        return { success = false, error = "disabled" }
+    end
+    if not SkyPhone.AllowOperation(source, "easyshare_own_contact", Config.EasyShare.BootstrapRequestsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    local device, error_response = current_device(source)
+    if not device then
+        return error_response
+    end
+    local payload = canonical_own_contact(source, device)
+    if not payload then
+        return { success = false, error = "sim_required" }
+    end
+    return { success = true, data = payload }
+end)
+
 Bridge.Callbacks.Register("sky_phone:easyshare:set-visibility", function(source, data)
     if not Config.EasyShare.Enabled then
         return { success = false, error = "disabled" }

From 0fba77a89cfa2aba5a4843ebd08c9c59833a53eb Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 09:21:22 +0200
Subject: [PATCH 29/63] CLN - simplify EasyShare nearby view

---
 frontend/src/components/EasyShareSheet.vue | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/EasyShareSheet.vue b/frontend/src/components/EasyShareSheet.vue
index 1d24ad2..9e83d30 100644
--- a/frontend/src/components/EasyShareSheet.vue
+++ b/frontend/src/components/EasyShareSheet.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { kButton, kGlass, kLink, kList, kListInput, kListItem, kPreloader, kSheet } from 'konsta/vue'
+import { kButton, kGlass, kLink, kList, kListItem, kPreloader, kSheet } from 'konsta/vue'
 import {
   Check,
   Clock3,
   History,
   MessageCircle,
   Share2,
-  ShieldCheck,
   UserRound,
   X,
 } from 'lucide-vue-next'
@@ -26,7 +25,6 @@ import type {
   EasyShareChatApp,
   EasyShareDestinationApp,
   EasyShareTransfer,
-  EasyShareVisibility,
 } from '@/types/easyshare'
 import {
   easyShareDestinationAppIds,
@@ -48,7 +46,6 @@ const dragging = ref(false)
 let dragPointerId: number | null = null
 let dragStartTime = 0
 let dragStartY = 0
-const visibilityOptions: EasyShareVisibility[] = ['everyone', 'contacts', 'hidden']
 const app = computed(() =>
   easyShare.payload ? getPhoneApp(easyShare.payload.appId) : undefined,
 )
@@ -333,23 +330,10 @@ async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
 
       <section v-else-if="easyShare.nearbyOpened" class="easyshare-detail">
         <div class="easyshare-detail__toolbar">
-          <k-link component="button" @click="easyShare.nearbyOpened = false">{{ phone.t('Common.back') }}</k-link>
+          <span aria-hidden="true"></span>
           <strong>{{ label('nearby') }}</strong>
           <k-link component="button" @click="easyShare.showHistory"><History :size="18" /></k-link>
         </div>
-        <k-list inset strong class="easyshare-visibility">
-          <k-list-input
-            type="select"
-            :label="label('visibility')"
-            :value="easyShare.visibility"
-            @change="easyShare.setVisibility(($event.target as HTMLSelectElement).value as EasyShareVisibility)"
-          >
-            <template #media><ShieldCheck :size="18" /></template>
-            <option v-for="option in visibilityOptions" :key="option" :value="option">
-              {{ label(`visibilityOptions.${option}`) }}
-            </option>
-          </k-list-input>
-        </k-list>
 
         <k-glass v-if="easyShare.incomingTransfer" class="easyshare-incoming">
           <UserRound :size="28" />

From 1acd6770a5fd815ac25d972765f650482f1731a6 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 09:23:41 +0200
Subject: [PATCH 30/63] FIX - match EasyShare control button styling

---
 frontend/src/components/PhoneControlCenter.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/PhoneControlCenter.vue b/frontend/src/components/PhoneControlCenter.vue
index d1b1689..263b50a 100644
--- a/frontend/src/components/PhoneControlCenter.vue
+++ b/frontend/src/components/PhoneControlCenter.vue
@@ -92,10 +92,6 @@ const flashlightColors = computed(() =>
       }
     : inactiveGlassColors,
 )
-const easyShareColors = {
-  bgIos: 'bg-[#0a84ff]',
-  shadowIos: 'shadow-ios-dark-glass',
-}
 const brightnessStyle = computed<CSSProperties>(() => ({
   '--control-level': `${brightness.value}%`,
 }))
@@ -413,8 +409,8 @@ onBeforeUnmount(() => {
             <k-glass
               component="button"
               type="button"
-              class="control-center__round-button control-center__round-button--easyshare"
-              :colors="easyShareColors"
+              class="control-center__round-button"
+              :colors="inactiveGlassColors"
               :disabled="easySharePending || !phone.device?.sim"
               :aria-label="phone.t('ControlCenter.easyShareContact')"
               @click="shareOwnContact"
@@ -780,11 +776,6 @@ onBeforeUnmount(() => {
   color: #ff453a;
 }
 
-.control-center__round-button--easyshare {
-  background: #0a84ff !important;
-  box-shadow: 0 8px 22px rgb(10 132 255 / 34%) !important;
-}
-
 .control-center__focus-button {
   display: flex;
   grid-column: 1 / span 2;

From f79aed395929db89188ac84de9e8954027110849 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 13:31:48 +0200
Subject: [PATCH 31/63] ENH - overhaul Local Pages profiles

---
 frontend/src/stores/pages.test.ts         |  66 ++
 frontend/src/stores/pages.ts              |  45 +-
 frontend/src/stores/phone.ts              |  45 ++
 frontend/src/types/pages.ts               |  17 +
 frontend/src/views/apps/LocalPagesApp.vue | 756 +++++++++++++++++++++-
 frontend/testserver/index.cjs             |  62 +-
 sky_phone/config/config.lua               |   3 +
 sky_phone/config/locales/en.lua           |  14 +-
 sky_phone/source/client/main.lua          |   2 +
 sky_phone/source/server/db_migrate.lua    |  31 +
 sky_phone/source/server/pages.lua         | 126 +++-
 11 files changed, 1140 insertions(+), 27 deletions(-)

diff --git a/frontend/src/stores/pages.test.ts b/frontend/src/stores/pages.test.ts
index e2d027c..322f444 100644
--- a/frontend/src/stores/pages.test.ts
+++ b/frontend/src/stores/pages.test.ts
@@ -30,4 +30,70 @@ describe('Local Pages store', () => {
     expect(pages.items[0]?.is_liked).toBe(true)
     expect(pages.items[0]?.like_count).toBe(3)
   })
+
+  it('removes an unsaved post from the saved profile list immediately', async () => {
+    mockNuiCall.mockResolvedValueOnce({ success: true })
+    const pages = usePagesStore()
+    pages.savedItems = [
+      { id: 'saved-post', is_saved: true } as never,
+      { id: 'other-post', is_saved: true } as never,
+    ]
+
+    await pages.react('saved-post', 'save', false)
+
+    expect(pages.savedItems.map((item) => item.id)).toEqual(['other-post'])
+  })
+
+  it('adds a newly saved post to the profile list immediately', async () => {
+    mockNuiCall.mockResolvedValueOnce({ success: true })
+    const pages = usePagesStore()
+    pages.items = [{ id: 'feed-post', is_saved: false } as never]
+
+    await pages.react('feed-post', 'save', true)
+
+    expect(pages.savedItems.map((item) => item.id)).toEqual(['feed-post'])
+    expect(pages.savedItems[0]?.is_saved).toBe(true)
+  })
+
+  it('stores the profile returned by the server', async () => {
+    const profile = {
+      avatar_media_id: 42,
+      avatar_url: 'https://example.test/avatar.webp',
+      bio: 'Vinewood tips and city stories.',
+      email: 'demo@ifruit.com',
+      exists: true,
+      handle: 'demo',
+      post_count: 2,
+    }
+    mockNuiCall.mockResolvedValueOnce({ data: profile, success: true })
+
+    const response = await usePagesStore().saveProfile({
+      avatarMediaId: profile.avatar_media_id,
+      bio: profile.bio,
+      handle: profile.handle,
+    })
+
+    expect(response.success).toBe(true)
+    expect(usePagesStore().profile).toEqual(profile)
+  })
+
+  it('keeps an existing profile when an old browser mock returns no profile payload', async () => {
+    const pages = usePagesStore()
+    pages.profile = {
+      avatar_media_id: null,
+      avatar_url: null,
+      bio: '',
+      email: 'demo@ifruit.com',
+      exists: true,
+      handle: 'demo',
+      post_count: 2,
+    }
+    mockNuiCall
+      .mockResolvedValueOnce({ success: true })
+      .mockResolvedValueOnce({ data: { hasMore: false, items: [], offset: 0 }, success: true })
+      .mockResolvedValueOnce({ data: { hasMore: false, items: [], offset: 0 }, success: true })
+
+    expect(await pages.loadProfile()).toBe(true)
+    expect(pages.profile.handle).toBe('demo')
+  })
 })
diff --git a/frontend/src/stores/pages.ts b/frontend/src/stores/pages.ts
index a5e492d..1d2df3e 100644
--- a/frontend/src/stores/pages.ts
+++ b/frontend/src/stores/pages.ts
@@ -1,6 +1,12 @@
 import { defineStore } from 'pinia'
 
-import type { PagesPage, PagesPost, PagesPostDraft } from '@/types/pages'
+import type {
+  PagesPage,
+  PagesPost,
+  PagesPostDraft,
+  PagesProfile,
+  PagesProfileDraft,
+} from '@/types/pages'
 import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 export const usePagesStore = defineStore('pages', {
@@ -8,6 +14,7 @@ export const usePagesStore = defineStore('pages', {
     items: [] as PagesPost[],
     ownItems: [] as PagesPost[],
     savedItems: [] as PagesPost[],
+    profile: null as PagesProfile | null,
     isLoading: false,
   }),
   actions: {
@@ -19,13 +26,28 @@ export const usePagesStore = defineStore('pages', {
       return response.success
     },
     async loadProfile(): Promise<boolean> {
-      const [own, saved] = await Promise.all([
+      const [profile, own, saved] = await Promise.all([
+        nuiCall<PagesProfile>('pages:profile'),
         nuiCall<PagesPage>('pages:list-own'),
         nuiCall<PagesPage>('pages:list', { saved: true }),
       ])
+      if (profile.success && profile.data) this.profile = profile.data
       if (own.success && own.data) this.ownItems = own.data.items
       if (saved.success && saved.data) this.savedItems = saved.data.items
-      return own.success && saved.success
+      return profile.success && Boolean(profile.data ?? this.profile)
+    },
+    async saveProfile(draft: PagesProfileDraft): Promise<NuiResponse<PagesProfile>> {
+      const response = await nuiCall<PagesProfile>('pages:profile-save', draft)
+      if (response.success && response.data) {
+        this.profile = response.data
+        for (const item of [...this.items, ...this.ownItems, ...this.savedItems]) {
+          if (item.is_owner) {
+            item.author_avatar = response.data.avatar_url
+            item.author_name = response.data.handle
+          }
+        }
+      }
+      return response
     },
     get(id: string): Promise<NuiResponse<PagesPost>> {
       return nuiCall<PagesPost>('pages:get', { id })
@@ -41,13 +63,28 @@ export const usePagesStore = defineStore('pages', {
     async react(id: string, kind: 'like' | 'save', active: boolean): Promise<boolean> {
       const response = await nuiCall('pages:react', { active, id, kind })
       if (response.success) {
-        for (const item of [...this.items, ...this.ownItems, ...this.savedItems]) {
+        const knownItems = [...this.items, ...this.ownItems, ...this.savedItems]
+        for (const item of knownItems) {
           if (item.id !== id) continue
           if (kind === 'like') {
             item.like_count = Math.max(0, item.like_count + (active ? 1 : -1))
             item.is_liked = active
           } else item.is_saved = active
         }
+        if (kind === 'save' && !active) {
+          this.savedItems = this.savedItems.filter((item) => item.id !== id)
+        }
+        if (kind === 'save' && active && !this.savedItems.some((item) => item.id === id)) {
+          let savedItem = knownItems.find((item) => item.id === id)
+          if (!savedItem) {
+            const loaded = await this.get(id)
+            savedItem = loaded.success ? loaded.data : undefined
+          }
+          if (savedItem) {
+            savedItem.is_saved = true
+            this.savedItems.unshift(savedItem)
+          }
+        }
       }
       return response.success
     },
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index f7adedd..61412d4 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -2681,7 +2681,39 @@ const defaultLocales: LocaleTree = {
       noPhoto: 'No photo attached',
       signInTitle: 'Your Local Pages profile',
       signInBody: 'Sign in to iFruit in Settings to publish and save posts.',
+      authEyebrow: 'Local Pages account',
+      authWelcome: 'Welcome to Local Pages',
+      authBody: 'Sign in or create an iFruit account to build your local profile.',
+      login: 'Sign in',
+      register: 'Register',
+      loginTitle: 'Continue with iFruit',
+      loginBody: 'Your posts, saved items and profile stay linked to your account.',
+      registerTitle: 'Create an iFruit account',
+      registerBody: 'Choose your new iFruit address. Your Local Pages profile comes next.',
+      authEmail: 'iFruit address',
+      authEmailPlaceholder: 'your.name',
+      authPassword: 'Password',
+      authPasswordPlaceholder: 'At least 6 characters',
+      authConfirmPassword: 'Confirm password',
+      authConfirmPlaceholder: 'Enter the password again',
+      showPassword: 'Show password',
+      hidePassword: 'Hide password',
       localCreator: 'Local creator',
+      createProfile: 'Create your profile',
+      editProfile: 'Edit profile',
+      profileSetupBody: 'Your iFruit email is linked automatically.',
+      profileEmail: 'iFruit email',
+      profileHandle: 'Username',
+      profileHandlePlaceholder: 'your.name',
+      profileHandleHint: 'Use 3–24 lowercase letters, numbers, dots or underscores.',
+      profileBio: 'Bio',
+      profileBioPlaceholder: 'Tell the city a little about yourself...',
+      profilePhoto: 'Profile photo',
+      profilePhotoHint: 'Choose a photo from your Gallery or take a new one.',
+      removeProfilePhoto: 'Remove photo',
+      profileSave: 'Save profile',
+      profileCancel: 'Cancel',
+      profileSaved: 'Your profile was saved.',
       myPosts: 'My posts',
       saved: 'Saved',
       save: 'Save',
@@ -2707,7 +2739,20 @@ const defaultLocales: LocaleTree = {
       cityMarktShare: 'Share to Local Pages',
       cityMarktShared: 'Shared to Local Pages.',
       cityMarktShareHint: 'One CityMarkt share per day',
+      authErrors: {
+        invalid_email: 'Enter a valid 3–32 character iFruit address.',
+        invalid_password: 'Use a password between 6 and 64 characters.',
+        invalid_credentials: 'The iFruit address or password is incorrect.',
+        email_taken: 'This iFruit address is already registered.',
+        password_mismatch: 'The passwords do not match.',
+        rate_limited: 'Too many attempts. Try again shortly.',
+        default: 'The iFruit account request failed.',
+      },
       errors: {
+        profile_required: 'Create your Local Pages profile first.',
+        invalid_profile: 'Check your username and bio.',
+        invalid_profile_image: 'Choose a valid photo from this phone.',
+        profile_handle_taken: 'This username is already taken.',
         invalid_post: 'Add a title and a little more detail.',
         invalid_images: 'Choose valid photos from this phone.',
         invalid_request: 'This action is not valid.',
diff --git a/frontend/src/types/pages.ts b/frontend/src/types/pages.ts
index 4eca591..02cc24e 100644
--- a/frontend/src/types/pages.ts
+++ b/frontend/src/types/pages.ts
@@ -14,6 +14,7 @@ export type PagesImage = {
 }
 
 export type PagesPost = {
+  author_avatar: string | null
   author_name: string
   body: string
   category: PagesCategory
@@ -40,6 +41,22 @@ export type PagesPostDraft = {
   title: string
 }
 
+export type PagesProfile = {
+  avatar_media_id: number | null
+  avatar_url: string | null
+  bio: string
+  email: string
+  exists: boolean
+  handle: string
+  post_count: number
+}
+
+export type PagesProfileDraft = {
+  avatarMediaId: number
+  bio: string
+  handle: string
+}
+
 export type PagesPage = {
   hasMore: boolean
   items: PagesPost[]
diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index 6ce5132..56d2a19 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -6,10 +6,15 @@ import {
   ChevronLeft,
   ChevronRight,
   Compass,
+  Eye,
+  EyeOff,
   Heart,
   ImagePlus,
   Images,
+  KeyRound,
+  Mail,
   MapPin,
+  Pencil,
   Plus,
   Share2,
   Store,
@@ -18,7 +23,6 @@ import {
   X,
 } from 'lucide-vue-next'
 import {
-  kButton,
   kGlass,
   kIcon,
   kNavbar,
@@ -38,7 +42,13 @@ import { useMessageMediaStore } from '@/stores/messageMedia'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { usePagesStore } from '@/stores/pages'
 import { usePhoneStore } from '@/stores/phone'
-import type { PagesCategory, PagesPost } from '@/types/pages'
+import type { PagesCategory, PagesPost, PagesProfileDraft } from '@/types/pages'
+import type { PhoneMedia } from '@/types/media'
+import {
+  filterMailAddressInput,
+  MAIL_ADDRESS_INPUT_MAX_LENGTH,
+  normalizeMailAddress,
+} from '@/utils/mail'
 
 type SelectedPhoto = { background: string; id: string }
 type ComposeDraft = {
@@ -49,6 +59,7 @@ type ComposeDraft = {
   title: string
 }
 type MediaContext = { draft: ComposeDraft; photos: SelectedPhoto[] }
+type ProfileMediaContext = { draft: PagesProfileDraft }
 
 type Screen = 'main' | 'detail' | 'compose'
 type Tab = 'feed' | 'create' | 'profile'
@@ -69,6 +80,16 @@ const search = ref('')
 const category = ref<string>('all')
 const feedback = ref('')
 const reactionPending = ref(false)
+const onboardingReady = ref(false)
+const authMode = ref<'login' | 'register'>('login')
+const authForm = ref({ confirm: '', email: '', password: '' })
+const authPending = ref(false)
+const authPasswordVisible = ref(false)
+const authError = ref('')
+const profileEditing = ref(false)
+const profilePending = ref(false)
+const profileDraft = ref<PagesProfileDraft>({ avatarMediaId: 0, bio: '', handle: '' })
+const selectedProfilePhoto = ref<PhoneMedia | null>(null)
 const pickedPhotos = ref<SelectedPhoto[]>([])
 const draft = ref<ComposeDraft>({
   body: '',
@@ -110,6 +131,22 @@ const canPublish = computed(() => {
   const body = draft.value.body.trim().length
   return title >= 5 && title <= 80 && body >= 10 && body <= 1500
 })
+const canSaveProfile = computed(() => {
+  const handle = profileDraft.value.handle.trim().toLowerCase()
+  return handle.length >= 3
+    && handle.length <= 24
+    && /^[a-z0-9][a-z0-9._]*[a-z0-9]$/.test(handle)
+    && profileDraft.value.bio.trim().length <= 160
+})
+const profileAvatarUrl = computed(() => selectedProfilePhoto.value?.url
+  ?? (profileDraft.value.avatarMediaId > 0 ? pages.profile?.avatar_url : null))
+const authEmailValid = computed(() => normalizeMailAddress(authForm.value.email) !== null)
+const authPasswordValid = computed(() => {
+  const length = authForm.value.password.length
+  return length >= 6 && length <= 64
+})
+const authConfirmValid = computed(() => authMode.value === 'login'
+  || (authForm.value.confirm.length > 0 && authForm.value.confirm === authForm.value.password))
 
 function label(group: string, value: string): string {
   return phone.t(`Apps.localPages.${group}.${value}`)
@@ -147,12 +184,167 @@ async function selectTab(next: Tab): Promise<void> {
       tab.value = 'profile'
       return
     }
+    if (!pages.profile) await pages.loadProfile()
+    if (!pages.profile?.exists) {
+      syncProfileDraft()
+      profileEditing.value = true
+      tab.value = 'profile'
+      screen.value = 'main'
+      return
+    }
     screen.value = 'compose'
     return
   }
   tab.value = next
   screen.value = 'main'
-  if (next === 'profile' && isAuthenticated.value) await pages.loadProfile()
+  if (next === 'profile' && isAuthenticated.value) {
+    await pages.loadProfile()
+    ensureBrowserProfile()
+    syncProfileDraft()
+    profileEditing.value = !pages.profile?.exists
+  }
+}
+
+function updateAuthEmail(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const filtered = filterMailAddressInput(input.value)
+  if (input.value !== filtered) input.value = filtered
+  authForm.value.email = filtered
+}
+
+function inputValue(event: Event): string {
+  return (event.target as HTMLInputElement).value
+}
+
+function switchAuthMode(mode: 'login' | 'register'): void {
+  authMode.value = mode
+  authForm.value.confirm = ''
+  authError.value = ''
+}
+
+function authErrorMessage(error?: string): string {
+  const known = ['invalid_email', 'invalid_password', 'invalid_credentials', 'email_taken', 'rate_limited']
+  return phone.t(`Apps.localPages.authErrors.${error && known.includes(error) ? error : 'default'}`)
+}
+
+async function submitAuth(): Promise<void> {
+  authError.value = ''
+  if (!authEmailValid.value) {
+    authError.value = authErrorMessage('invalid_email')
+    return
+  }
+  if (!authPasswordValid.value) {
+    authError.value = authErrorMessage('invalid_password')
+    return
+  }
+  if (!authConfirmValid.value) {
+    authError.value = phone.t('Apps.localPages.authErrors.password_mismatch')
+    return
+  }
+  const email = normalizeMailAddress(authForm.value.email)
+  if (!email) return
+  authPending.value = true
+  const response = authMode.value === 'login'
+    ? await account.login(email, authForm.value.password)
+    : await account.register(email, authForm.value.password)
+  authPending.value = false
+  if (!response.success) {
+    authError.value = authErrorMessage(response.error)
+    return
+  }
+  authForm.value = { confirm: '', email: '', password: '' }
+  authPasswordVisible.value = false
+  await pages.loadProfile()
+  ensureBrowserProfile()
+  syncProfileDraft()
+  profileEditing.value = !pages.profile?.exists
+  tab.value = 'profile'
+  screen.value = 'main'
+  onboardingReady.value = true
+}
+
+function syncProfileDraft(): void {
+  profileDraft.value = {
+    avatarMediaId: pages.profile?.avatar_media_id ?? 0,
+    bio: pages.profile?.bio ?? '',
+    handle: pages.profile?.handle ?? account.email.split('@')[0].toLowerCase(),
+  }
+  selectedProfilePhoto.value = null
+}
+
+function ensureBrowserProfile(): void {
+  const onboardingScenario = new URLSearchParams(window.location.search).get('testScenario')
+  if (!import.meta.env.DEV || onboardingScenario === 'local-pages-onboarding' || pages.profile) return
+  const handle = account.email.split('@')[0].toLowerCase()
+  pages.profile = {
+    avatar_media_id: null,
+    avatar_url: null,
+    bio: '',
+    email: account.email,
+    exists: true,
+    handle,
+    post_count: pages.ownItems.length,
+  }
+}
+
+function editProfile(): void {
+  syncProfileDraft()
+  profileEditing.value = true
+}
+
+function cancelProfileEdit(): void {
+  if (!pages.profile?.exists) return
+  syncProfileDraft()
+  profileEditing.value = false
+}
+
+function openProfileMedia(app: 'camera' | 'photos'): void {
+  messageMedia.begin(
+    'local-pages:profile-avatar',
+    'photo',
+    '/apps/local-pages?profileEdit=1',
+    1,
+    { draft: { ...profileDraft.value } } satisfies ProfileMediaContext,
+  )
+  void router.push({ path: `/apps/${app}`, query: { mediaAttachment: 'photo' } })
+}
+
+function removeProfilePhoto(): void {
+  selectedProfilePhoto.value = null
+  profileDraft.value.avatarMediaId = 0
+}
+
+async function saveProfile(): Promise<void> {
+  if (!canSaveProfile.value || profilePending.value) {
+    showFeedback('Apps.localPages.errors.invalid_profile')
+    return
+  }
+  profilePending.value = true
+  try {
+    const response = await pages.saveProfile({
+      avatarMediaId: selectedProfilePhoto.value?.id ?? profileDraft.value.avatarMediaId,
+      bio: profileDraft.value.bio.trim(),
+      handle: profileDraft.value.handle.trim().toLowerCase(),
+    })
+    if (!response.success) {
+      showFeedback(`Apps.localPages.errors.${response.error ?? 'default'}`)
+      return
+    }
+    const loaded = await pages.loadProfile()
+    ensureBrowserProfile()
+    if (!pages.profile?.exists || (!loaded && !import.meta.env.DEV)) {
+      showFeedback('Apps.localPages.errors.request_failed')
+      return
+    }
+    syncProfileDraft()
+    tab.value = 'profile'
+    screen.value = 'main'
+    profileEditing.value = false
+    await loadFeed()
+    showFeedback('Apps.localPages.profileSaved')
+  } finally {
+    profilePending.value = false
+  }
 }
 
 async function openPost(post: PagesPost): Promise<void> {
@@ -280,6 +472,7 @@ function sharePost(post: PagesPost): void {
 
 onMounted(async () => {
   const selection = messageMedia.consumeMany<MediaContext>('local-pages:compose')
+  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>('local-pages:profile-avatar')
   if (selection) {
     if (selection.context) {
       draft.value = selection.context.draft
@@ -292,10 +485,35 @@ onMounted(async () => {
       pickedPhotos.value.push({ background: `url(${JSON.stringify(media.url)})`, id })
     }
   }
-  if (route.query.compose === '1') screen.value = 'compose'
-  await loadFeed()
+  if (isAuthenticated.value) {
+    await pages.loadProfile()
+    ensureBrowserProfile()
+    if (!pages.profile?.exists) {
+      syncProfileDraft()
+      profileEditing.value = true
+      tab.value = 'profile'
+      screen.value = 'main'
+    } else {
+      await loadFeed()
+    }
+    if (profileSelection) {
+      if (profileSelection.context) profileDraft.value = profileSelection.context.draft
+      if (profileSelection.media[0]) {
+        selectedProfilePhoto.value = profileSelection.media[0]
+        profileDraft.value.avatarMediaId = profileSelection.media[0].id
+      }
+      profileEditing.value = true
+      tab.value = 'profile'
+      screen.value = 'main'
+    }
+  } else {
+    tab.value = 'profile'
+    screen.value = 'main'
+  }
+  onboardingReady.value = true
+  if (route.query.compose === '1' && pages.profile?.exists) screen.value = 'compose'
   const easyShareId = String(route.query.easyShareId ?? '')
-  if (easyShareId && route.query.easyShareKind === 'post') {
+  if (pages.profile?.exists && easyShareId && route.query.easyShareKind === 'post') {
     const response = await pages.get(easyShareId)
     if (response.success && response.data) {
       selected.value = response.data
@@ -314,13 +532,19 @@ onMounted(async () => {
     :colors="{ bgIos: 'bg-transparent' }"
   >
     <template v-if="screen === 'main'">
+      <div v-if="!onboardingReady" class="pages__gate-loading">{{ phone.t('Common.loading') }}</div>
       <k-navbar
+        v-if="onboardingReady && isAuthenticated && pages.profile?.exists"
         class="pages-navbar"
         :subtitle="phone.t(tab === 'feed' ? 'Apps.localPages.eyebrow' : 'Apps.localPages.name')"
         :title="phone.t(tab === 'feed' ? 'Apps.localPages.name' : 'Apps.localPages.profile')"
       />
 
-      <section class="pages__content">
+      <section
+        v-if="onboardingReady"
+        class="pages__content"
+        :class="{ 'pages__content--gate': !isAuthenticated || !pages.profile?.exists }"
+      >
         <template v-if="tab === 'feed'">
           <k-glass class="pages-hero-glass">
             <div class="pages__hero"><div><small>{{ phone.t('Apps.localPages.cityPulse') }}</small><strong>{{ phone.t('Apps.localPages.heroTitle') }}</strong><span>{{ phone.t('Apps.localPages.heroBody') }}</span></div><MapPin :size="40" /></div>
@@ -338,23 +562,117 @@ onMounted(async () => {
         </template>
 
         <template v-else>
-          <div v-if="!isAuthenticated" class="pages__empty"><UserRound :size="42" /><strong>{{ phone.t('Apps.localPages.signInTitle') }}</strong><span>{{ phone.t('Apps.localPages.signInBody') }}</span></div>
+          <section v-if="!isAuthenticated" class="pages__auth">
+            <header class="pages__auth-head">
+              <span><UserRound :size="23" /></span>
+              <div><small>{{ phone.t('Apps.localPages.authEyebrow') }}</small><strong>{{ phone.t('Apps.localPages.authWelcome') }}</strong><p>{{ phone.t('Apps.localPages.authBody') }}</p></div>
+            </header>
+            <div class="pages__auth-modes">
+              <button type="button" :class="{ active: authMode === 'login' }" @click="switchAuthMode('login')">{{ phone.t('Apps.localPages.login') }}</button>
+              <button type="button" :class="{ active: authMode === 'register' }" @click="switchAuthMode('register')">{{ phone.t('Apps.localPages.register') }}</button>
+            </div>
+            <form class="pages__auth-form" @submit.prevent="submitAuth">
+              <div class="pages__auth-copy"><strong>{{ phone.t(authMode === 'login' ? 'Apps.localPages.loginTitle' : 'Apps.localPages.registerTitle') }}</strong><p>{{ phone.t(authMode === 'login' ? 'Apps.localPages.loginBody' : 'Apps.localPages.registerBody') }}</p></div>
+              <label>
+                {{ phone.t('Apps.localPages.authEmail') }}
+                <k-glass class="pages__auth-field">
+                  <Mail :size="16" />
+                  <input :value="authForm.email" :maxlength="MAIL_ADDRESS_INPUT_MAX_LENGTH" autocomplete="username" autocapitalize="none" autocorrect="off" inputmode="email" spellcheck="false" :placeholder="phone.t('Apps.localPages.authEmailPlaceholder')" @input="updateAuthEmail" />
+                  <span v-if="authForm.email && !authForm.email.includes('@')">@ifruit.com</span>
+                </k-glass>
+              </label>
+              <label>
+                {{ phone.t('Apps.localPages.authPassword') }}
+                <k-glass class="pages__auth-field">
+                  <KeyRound :size="16" />
+                  <input :value="authForm.password" :type="authPasswordVisible ? 'text' : 'password'" maxlength="64" :autocomplete="authMode === 'login' ? 'current-password' : 'new-password'" :placeholder="phone.t('Apps.localPages.authPasswordPlaceholder')" @input="authForm.password = inputValue($event)" />
+                  <button type="button" :aria-label="phone.t(authPasswordVisible ? 'Apps.localPages.hidePassword' : 'Apps.localPages.showPassword')" @click="authPasswordVisible = !authPasswordVisible"><EyeOff v-if="authPasswordVisible" :size="16" /><Eye v-else :size="16" /></button>
+                </k-glass>
+              </label>
+              <label v-if="authMode === 'register'">
+                {{ phone.t('Apps.localPages.authConfirmPassword') }}
+                <k-glass class="pages__auth-field">
+                  <KeyRound :size="16" />
+                  <input :value="authForm.confirm" :type="authPasswordVisible ? 'text' : 'password'" maxlength="64" autocomplete="new-password" :placeholder="phone.t('Apps.localPages.authConfirmPlaceholder')" @input="authForm.confirm = inputValue($event)" />
+                </k-glass>
+              </label>
+              <p v-if="authError" class="pages__auth-error">{{ authError }}</p>
+              <k-glass class="pages__auth-submit"><button type="submit" :disabled="authPending">{{ phone.t(authMode === 'login' ? 'Apps.localPages.login' : 'Apps.localPages.register') }}</button></k-glass>
+            </form>
+          </section>
           <template v-else>
-            <k-glass class="pages-profile-glass">
-              <div class="pages__profile"><span>{{ account.email.charAt(0).toUpperCase() }}</span><div><small>{{ phone.t('Apps.localPages.localCreator') }}</small><strong>@{{ account.email.split('@')[0] }}</strong><b>{{ pages.ownItems.length }} {{ phone.t('Apps.localPages.posts') }}</b></div></div>
-            </k-glass>
-            <k-glass class="pages-segmented-glass">
-              <div class="pages__segmented"><button :class="{ active: profileMode === 'own' }" @click="profileMode = 'own'">{{ phone.t('Apps.localPages.myPosts') }}</button><button :class="{ active: profileMode === 'saved' }" @click="profileMode = 'saved'">{{ phone.t('Apps.localPages.saved') }}</button></div>
-            </k-glass>
+            <section v-if="profileEditing || !pages.profile?.exists" class="pages__profile-editor">
+              <div class="pages__profile-editor-head">
+                <span><UserRound :size="21" /></span>
+                <div>
+                  <strong>{{ phone.t(pages.profile?.exists ? 'Apps.localPages.editProfile' : 'Apps.localPages.createProfile') }}</strong>
+                  <small>{{ phone.t('Apps.localPages.profileSetupBody') }}</small>
+                </div>
+              </div>
+              <div class="pages__profile-photo-editor">
+                <span class="pages__profile-photo-preview">
+                  <img v-if="profileAvatarUrl" :src="profileAvatarUrl" :alt="phone.t('Apps.localPages.profilePhoto')" />
+                  <UserRound v-else :size="30" />
+                </span>
+                <div>
+                  <strong>{{ phone.t('Apps.localPages.profilePhoto') }}</strong>
+                  <small>{{ phone.t('Apps.localPages.profilePhotoHint') }}</small>
+                  <div class="pages__profile-photo-actions">
+                    <k-glass><button type="button" @click="openProfileMedia('camera')"><Camera :size="15" />{{ phone.t('Apps.localPages.camera') }}</button></k-glass>
+                    <k-glass><button type="button" @click="openProfileMedia('photos')"><Images :size="15" />{{ phone.t('Apps.localPages.gallery') }}</button></k-glass>
+                  </div>
+                  <button v-if="profileAvatarUrl" class="pages__profile-photo-remove" type="button" @click="removeProfilePhoto">{{ phone.t('Apps.localPages.removeProfilePhoto') }}</button>
+                </div>
+              </div>
+              <label>
+                {{ phone.t('Apps.localPages.profileEmail') }}
+                <k-glass class="pages__profile-field pages__profile-field--readonly">
+                  <Mail :size="16" />
+                  <input :value="pages.profile?.email || account.email" readonly />
+                </k-glass>
+              </label>
+              <label>
+                {{ phone.t('Apps.localPages.profileHandle') }}
+                <span>{{ profileDraft.handle.trim().length }}/24</span>
+                <k-glass class="pages__profile-field">
+                  <b>@</b>
+                  <input v-model="profileDraft.handle" maxlength="24" :placeholder="phone.t('Apps.localPages.profileHandlePlaceholder')" autocapitalize="none" />
+                </k-glass>
+                <small>{{ phone.t('Apps.localPages.profileHandleHint') }}</small>
+              </label>
+              <label>
+                {{ phone.t('Apps.localPages.profileBio') }}
+                <span>{{ profileDraft.bio.trim().length }}/160</span>
+                <k-glass class="pages__profile-field pages__profile-field--bio">
+                  <textarea v-model="profileDraft.bio" maxlength="160" :placeholder="phone.t('Apps.localPages.profileBioPlaceholder')" />
+                </k-glass>
+              </label>
+              <div class="pages__profile-actions">
+                <k-glass v-if="pages.profile?.exists" class="pages__profile-action"><button type="button" @click="cancelProfileEdit">{{ phone.t('Apps.localPages.profileCancel') }}</button></k-glass>
+                <k-glass class="pages__profile-action pages__profile-action--save"><button type="button" :disabled="!canSaveProfile || profilePending" @click="saveProfile">{{ phone.t('Apps.localPages.profileSave') }}</button></k-glass>
+              </div>
+            </section>
+            <template v-else>
+              <k-glass class="pages-profile-glass">
+                <div class="pages__profile">
+                  <span><img v-if="pages.profile.avatar_url" :src="pages.profile.avatar_url" alt="" /><template v-else>{{ pages.profile.handle.charAt(0).toUpperCase() }}</template></span>
+                  <div><small>{{ phone.t('Apps.localPages.localCreator') }}</small><strong>@{{ pages.profile.handle }}</strong><b>{{ pages.profile.post_count }} {{ phone.t('Apps.localPages.posts') }}</b><p v-if="pages.profile.bio">{{ pages.profile.bio }}</p></div>
+                  <button class="pages__profile-edit" type="button" :aria-label="phone.t('Apps.localPages.editProfile')" @click="editProfile"><Pencil :size="15" /></button>
+                </div>
+              </k-glass>
+              <k-glass class="pages-segmented-glass">
+                <div class="pages__segmented"><button :class="{ active: profileMode === 'own' }" @click="profileMode = 'own'">{{ phone.t('Apps.localPages.myPosts') }}</button><button :class="{ active: profileMode === 'saved' }" @click="profileMode = 'saved'">{{ phone.t('Apps.localPages.saved') }}</button></div>
+              </k-glass>
+            </template>
           </template>
         </template>
 
         <div v-if="pages.isLoading" class="pages__empty">{{ phone.t('Common.loading') }}</div>
-        <div v-else-if="isAuthenticated || tab === 'feed'" class="pages__feed">
+        <div v-else-if="tab === 'feed' || (isAuthenticated && pages.profile?.exists && !profileEditing)" class="pages__feed">
           <k-glass v-for="post in displayedPosts" :key="post.id" class="pages-post-glass">
             <article class="pages__post">
             <button class="pages__post-open" type="button" @click="openPost(post)">
-              <div class="pages__post-head"><span>{{ post.author_name.charAt(0).toUpperCase() }}</span><div><strong>@{{ post.author_name }}</strong><small><MapPin :size="10" /> {{ post.district ? phone.t(`Apps.citymarkt.districts.${post.district}`) : phone.t('Apps.localPages.allLosSantos') }} · {{ relativeDate(post.created_at) }}</small></div><i>{{ label('categories', post.category) }}</i></div>
+              <div class="pages__post-head"><span><img v-if="post.author_avatar" :src="post.author_avatar" alt="" /><template v-else>{{ post.author_name.charAt(0).toUpperCase() }}</template></span><div><strong>@{{ post.author_name }}</strong><small><MapPin :size="10" /> {{ post.district ? phone.t(`Apps.citymarkt.districts.${post.district}`) : phone.t('Apps.localPages.allLosSantos') }} · {{ relativeDate(post.created_at) }}</small></div><i>{{ label('categories', post.category) }}</i></div>
               <div v-if="post.image" class="pages__cover" :style="{ background: post.image }"><b v-if="post.images.length > 1">1 / {{ post.images.length }}</b></div>
               <h2>{{ post.title }}</h2><p>{{ post.body }}</p>
             </button>
@@ -371,6 +689,7 @@ onMounted(async () => {
       </section>
 
       <k-tabbar
+        v-if="isAuthenticated && pages.profile?.exists"
         component="nav"
         icons
         labels
@@ -410,12 +729,27 @@ onMounted(async () => {
     </template>
 
     <section v-else-if="screen === 'detail' && selected" class="pages__detail">
-      <header><k-button component="button" clear rounded @click="screen = 'main'"><ArrowLeft :size="20" /></k-button><strong>{{ phone.t('Apps.localPages.post') }}</strong><k-button v-if="selected.is_owner" component="button" clear rounded class="danger" @click="removePost"><Trash2 :size="18" /></k-button><k-button v-else component="button" clear rounded @click="react('save')"><Bookmark :size="18" :fill="selected.is_saved ? 'currentColor' : 'none'" /></k-button></header>
+      <header>
+        <k-glass component="button" type="button" class="pages__detail-control" @click="screen = 'main'">
+          <ArrowLeft :size="20" />
+        </k-glass>
+        <strong>{{ phone.t('Apps.localPages.post') }}</strong>
+        <k-glass v-if="selected.is_owner" component="button" type="button" class="pages__detail-control danger" @click="removePost">
+          <Trash2 :size="18" />
+        </k-glass>
+        <k-glass v-else component="button" type="button" class="pages__detail-control" @click="react('save')">
+          <Bookmark :size="18" :fill="selected.is_saved ? 'currentColor' : 'none'" />
+        </k-glass>
+      </header>
       <div class="pages__detail-scroll">
         <div v-if="selected.images.length" class="pages__gallery" :style="{ background: selected.images[galleryIndex]?.gradient }"><button v-if="selected.images.length > 1" @click="moveGallery(-1)"><ChevronLeft /></button><button v-if="selected.images.length > 1" @click="moveGallery(1)"><ChevronRight /></button><span>{{ galleryIndex + 1 }} / {{ selected.images.length }}</span></div>
-        <article><div class="pages__author"><span>{{ selected.author_name.charAt(0).toUpperCase() }}</span><div><strong>@{{ selected.author_name }}</strong><small>{{ relativeDate(selected.created_at) }}</small></div><i>{{ label('categories', selected.category) }}</i></div><h1>{{ selected.title }}</h1><p>{{ selected.body }}</p><div class="pages__location"><MapPin :size="17" /><div><small>{{ phone.t('Apps.localPages.location') }}</small><strong>{{ selected.district ? phone.t(`Apps.citymarkt.districts.${selected.district}`) : phone.t('Apps.localPages.allLosSantos') }}</strong></div></div><button v-if="selected.source_type === 'citymarkt'" class="pages__market-link" @click="openCityMarktListing"><Store :size="18" /><span><small>{{ phone.t('Apps.localPages.sharedFrom') }}</small><strong>{{ phone.t('Apps.localPages.openCityMarkt') }}</strong></span><b v-if="selected.citymarkt_price">${{ Number(selected.citymarkt_price).toLocaleString() }}</b></button></article>
+        <article><div class="pages__author"><span><img v-if="selected.author_avatar" :src="selected.author_avatar" alt="" /><template v-else>{{ selected.author_name.charAt(0).toUpperCase() }}</template></span><div><strong>@{{ selected.author_name }}</strong><small>{{ relativeDate(selected.created_at) }}</small></div><i>{{ label('categories', selected.category) }}</i></div><h1>{{ selected.title }}</h1><p>{{ selected.body }}</p><div class="pages__location"><MapPin :size="17" /><div><small>{{ phone.t('Apps.localPages.location') }}</small><strong>{{ selected.district ? phone.t(`Apps.citymarkt.districts.${selected.district}`) : phone.t('Apps.localPages.allLosSantos') }}</strong></div></div><button v-if="selected.source_type === 'citymarkt'" class="pages__market-link" @click="openCityMarktListing"><Store :size="18" /><span><small>{{ phone.t('Apps.localPages.sharedFrom') }}</small><strong>{{ phone.t('Apps.localPages.openCityMarkt') }}</strong></span><b v-if="selected.citymarkt_price">${{ Number(selected.citymarkt_price).toLocaleString() }}</b></button></article>
       </div>
-      <div class="pages__detail-actions"><button :class="{ active: selected.is_liked }" @click="react('like')"><Heart :size="19" :fill="selected.is_liked ? 'currentColor' : 'none'" />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}</button><button @click="sharePost(selected)"><Share2 :size="19" />{{ phone.t('Apps.easyShare.share') }}</button><button @click="react('save')"><Bookmark :size="19" :fill="selected.is_saved ? 'currentColor' : 'none'" />{{ phone.t('Apps.localPages.save') }}</button></div>
+      <k-glass class="pages__detail-actions">
+        <button type="button" :class="{ active: selected.is_liked }" @click="react('like')"><Heart :size="19" :fill="selected.is_liked ? 'currentColor' : 'none'" />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}</button>
+        <button type="button" @click="sharePost(selected)"><Share2 :size="19" />{{ phone.t('Apps.easyShare.share') }}</button>
+        <button type="button" @click="react('save')"><Bookmark :size="19" :fill="selected.is_saved ? 'currentColor' : 'none'" />{{ phone.t('Apps.localPages.save') }}</button>
+      </k-glass>
     </section>
 
     <section v-else class="pages__compose">
@@ -547,6 +881,18 @@ onMounted(async () => {
   height: auto;
   padding: 108px 13px 112px;
 }
+.pages__content--gate {
+  padding: 68px 18px 34px;
+}
+.pages__gate-loading {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 750;
+}
 .pages-hero-glass,
 .pages-profile-glass,
 .pages-segmented-glass,
@@ -739,4 +1085,376 @@ onMounted(async () => {
   color: #17191a;
   box-shadow: 0 4px 12px #00000030;
 }
+.pages__detail > header .pages__detail-control,
+.pages__detail-actions {
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--color-ios-dark-glass);
+  box-shadow: var(--shadow-ios-dark-glass);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+.pages--light .pages__detail-control,
+.pages--light .pages__detail-actions {
+  background: var(--color-ios-light-glass);
+  box-shadow: var(--shadow-ios-light-glass);
+}
+.pages__auth {
+  padding: 2px 1px 18px;
+}
+.pages__auth-head {
+  padding: 5px 2px 15px;
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+}
+.pages__auth-head > span {
+  width: 44px;
+  height: 44px;
+  flex: none;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  background: #ffd63e1b;
+  color: var(--yellow);
+}
+.pages__auth-head div {
+  min-width: 0;
+}
+.pages__auth-head small,
+.pages__auth-head strong {
+  display: block;
+}
+.pages__auth-head small {
+  color: var(--yellow);
+  font-size: 9px;
+  font-weight: 900;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+.pages__auth-head strong {
+  margin-top: 2px;
+  font-size: 18px;
+}
+.pages__auth-head p,
+.pages__auth-copy p {
+  margin: 3px 0 0;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.pages__auth-modes {
+  margin-bottom: 14px;
+  padding: 4px;
+  border-radius: 11px;
+  display: flex;
+  background: var(--panel);
+}
+.pages__auth-modes button {
+  min-height: 34px;
+  flex: 1;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 750;
+}
+.pages__auth-modes button.active {
+  background: var(--yellow);
+  color: #17191a;
+}
+.pages__auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pages__auth-copy strong {
+  font-size: 15px;
+}
+.pages__auth-form label {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 750;
+}
+.pages__auth-field {
+  min-height: 44px;
+  margin-top: 6px;
+  padding: 0 12px;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--yellow);
+}
+.pages__auth-field input {
+  min-width: 0;
+  flex: 1;
+  padding: 11px 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #f7f7f2;
+  font-size: 13px;
+}
+.pages--light .pages__auth-field input {
+  color: #171b1e;
+}
+.pages__auth-field > span {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+.pages__auth-field button {
+  width: 30px;
+  height: 30px;
+  margin-right: -7px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  color: var(--muted);
+}
+.pages__auth-error {
+  margin: -2px 2px 0;
+  color: #ff6961;
+  font-size: 11px;
+  line-height: 1.35;
+}
+.pages__auth-submit {
+  border-radius: 11px;
+  overflow: hidden;
+  color: var(--yellow);
+}
+.pages__auth-submit button {
+  width: 100%;
+  min-height: 44px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 850;
+}
+.pages__auth-submit button:disabled {
+  opacity: .45;
+}
+.pages__profile > div {
+  min-width: 0;
+  flex: 1;
+}
+.pages__profile p {
+  margin: 7px 0 0;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.pages__profile-edit {
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: #ffffff0d;
+  color: var(--yellow);
+}
+.pages--light .pages__profile-edit {
+  background: #0000000a;
+}
+.pages__profile-editor {
+  padding: 2px 1px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pages__profile-editor-head {
+  padding: 5px 2px 2px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.pages__profile-editor-head > span {
+  width: 42px;
+  height: 42px;
+  flex: none;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  background: #ffd63e1b;
+  color: var(--yellow);
+}
+.pages__profile-editor-head strong,
+.pages__profile-editor-head small {
+  display: block;
+}
+.pages__profile-editor-head strong {
+  font-size: 17px;
+}
+.pages__profile-editor-head small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.3;
+}
+.pages__profile-photo-editor {
+  padding: 12px;
+  border: 1px solid #ffffff14;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #ffffff08;
+}
+.pages--light .pages__profile-photo-editor {
+  border-color: #00000012;
+  background: #00000005;
+}
+.pages__profile-photo-preview {
+  width: 70px;
+  height: 70px;
+  flex: none;
+  overflow: hidden;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: #ffd63e1b;
+  color: var(--yellow);
+}
+.pages__profile-photo-preview img,
+.pages__profile > span img,
+.pages__post-head > span img,
+.pages__author > span img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pages__profile-photo-editor > div {
+  min-width: 0;
+  flex: 1;
+}
+.pages__profile-photo-editor strong,
+.pages__profile-photo-editor small {
+  display: block;
+}
+.pages__profile-photo-editor strong {
+  font-size: 13px;
+}
+.pages__profile-photo-editor small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.3;
+}
+.pages__profile-photo-actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 6px;
+}
+.pages__profile-photo-actions > * {
+  min-width: 0;
+  flex: 1;
+  border-radius: 9px;
+  overflow: hidden;
+}
+.pages__profile-photo-actions button {
+  width: 100%;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: transparent;
+  color: var(--yellow);
+  font-size: 10px;
+  font-weight: 800;
+}
+.pages__profile-photo-remove {
+  margin-top: 7px;
+  padding: 0;
+  background: transparent;
+  color: #ff6961;
+  font-size: 10px;
+  font-weight: 700;
+}
+.pages__profile-editor label {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 750;
+}
+.pages__profile-editor label > span {
+  float: right;
+  font-size: 10px;
+  font-weight: 600;
+}
+.pages__profile-editor label > small {
+  display: block;
+  margin: 5px 2px 0;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+.pages__profile-field {
+  min-height: 44px;
+  margin-top: 6px;
+  padding: 0 12px;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--yellow);
+}
+.pages__profile-field input,
+.pages__profile-field textarea {
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 11px 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+}
+.pages__profile-field input,
+.pages__profile-field textarea {
+  color: #f7f7f2;
+}
+.pages--light .pages__profile-field input,
+.pages--light .pages__profile-field textarea {
+  color: #171b1e;
+}
+.pages__profile-field--readonly {
+  color: var(--muted);
+}
+.pages__profile-field--readonly input {
+  color: var(--muted);
+}
+.pages__profile-field--bio {
+  align-items: flex-start;
+}
+.pages__profile-field textarea {
+  min-height: 88px;
+  resize: none;
+  line-height: 1.4;
+}
+.pages__profile-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.pages__profile-action {
+  min-width: 96px;
+  border-radius: 11px;
+  overflow: hidden;
+}
+.pages__profile-action button {
+  width: 100%;
+  min-height: 42px;
+  padding: 0 14px;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 800;
+}
+.pages__profile-action--save {
+  color: var(--yellow);
+}
+.pages__profile-action button:disabled {
+  opacity: .4;
+}
 </style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index ea32d60..14c3e5b 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -2458,6 +2458,15 @@ const pagesReactions = [
   { post_id: 'pages-1', account_id: 1, kind: 'like' },
   { post_id: 'pages-3', account_id: 1, kind: 'save' },
 ]
+let pagesProfile = {
+  avatar_media_id: null,
+  avatar_url: null,
+  bio: 'Vinewood tips and city stories.',
+  email: 'demo@ifruit.com',
+  exists: true,
+  handle: 'demo',
+}
+let pagesOnboardingCompleted = false
 
 function pageView(post) {
   const listing = marketplaceListings.find(
@@ -2465,6 +2474,7 @@ function pageView(post) {
   )
   return {
     ...post,
+    author_avatar: post.account_id === 1 ? pagesProfile.avatar_url : null,
     citymarkt_price: listing?.price ?? null,
     image: post.images[0]?.gradient ?? null,
     is_liked: pagesReactions.some(
@@ -7500,6 +7510,54 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: false, error: 'not_authenticated' })
     return
   }
+  if (endpoint === 'pages:profile') {
+    const email = linkedAccount?.email ?? pagesProfile.email
+    const onboarding =
+      testScenario === 'local-pages-onboarding' && !pagesOnboardingCompleted
+    response.json({
+      success: true,
+      data: {
+        avatar_media_id: onboarding ? null : pagesProfile.avatar_media_id,
+        avatar_url: onboarding ? null : pagesProfile.avatar_url,
+        bio: onboarding ? '' : pagesProfile.bio,
+        email,
+        exists: onboarding ? false : pagesProfile.exists,
+        handle: onboarding ? email.split('@')[0] : pagesProfile.handle,
+        post_count: pagesPosts.filter((item) => item.account_id === 1).length,
+      },
+    })
+    return
+  }
+  if (endpoint === 'pages:profile-save') {
+    pagesOnboardingCompleted = true
+    const avatarMediaId = Number(request.body.avatarMediaId) || 0
+    const avatarMedia = avatarMediaId > 0
+      ? mockMedia.find((item) => item.id === avatarMediaId && item.mediaType === 'photo')
+      : null
+    if (avatarMediaId > 0 && !avatarMedia) {
+      response.json({ success: false, error: 'invalid_profile_image' })
+      return
+    }
+    pagesProfile = {
+      avatar_media_id: avatarMedia?.id ?? null,
+      avatar_url: avatarMedia?.url ?? null,
+      bio: String(request.body.bio ?? '').trim(),
+      email: linkedAccount?.email ?? pagesProfile.email,
+      exists: true,
+      handle: String(request.body.handle ?? '').trim().toLowerCase(),
+    }
+    pagesPosts.forEach((post) => {
+      if (post.account_id === 1) post.author_name = pagesProfile.handle
+    })
+    response.json({
+      success: true,
+      data: {
+        ...pagesProfile,
+        post_count: pagesPosts.filter((item) => item.account_id === 1).length,
+      },
+    })
+    return
+  }
   if (endpoint === 'pages:list-own') {
     response.json({
       success: true,
@@ -7530,7 +7588,7 @@ app.post('/api/:endpoint', (request, response) => {
       ...request.body,
       id,
       account_id: 1,
-      author_name: 'demo',
+      author_name: pagesProfile.handle,
       source_type: 'personal',
       citymarkt_listing_id: null,
       created_at: new Date().toISOString(),
@@ -7570,7 +7628,7 @@ app.post('/api/:endpoint', (request, response) => {
     pagesPosts.unshift({
       id,
       account_id: 1,
-      author_name: 'demo',
+      author_name: pagesProfile.handle,
       source_type: 'citymarkt',
       citymarkt_listing_id: listing.id,
       title: listing.title,
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 0dd7f70..0592b08 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -360,6 +360,9 @@ Config.Marketplace = {
 Config.LocalPages = {
     PageSize = 20,
     MaxImages = 6,
+    ProfileHandleMinLength = 3,
+    ProfileHandleMaxLength = 24,
+    ProfileBioMaxLength = 160,
     TitleMinLength = 5,
     TitleMaxLength = 80,
     BodyMinLength = 10,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 6a7cfe0..90cf18f 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1245,13 +1245,25 @@ Locales["en"] = {
                 discover = "Discover", create = "Post", profile = "Profile", post = "Post", posts = "posts",
                 noPosts = "Nothing here yet", noPostsBody = "Be the first to share something with the city.", noPhoto = "No photo attached",
                 signInTitle = "Your Local Pages profile", signInBody = "Sign in to iFruit in Settings to publish and save posts.",
+                authEyebrow = "Local Pages account", authWelcome = "Welcome to Local Pages",
+                authBody = "Sign in or create an iFruit account to build your local profile.", login = "Sign in", register = "Register",
+                loginTitle = "Continue with iFruit", loginBody = "Your posts, saved items and profile stay linked to your account.",
+                registerTitle = "Create an iFruit account", registerBody = "Choose your new iFruit address. Your Local Pages profile comes next.",
+                authEmail = "iFruit address", authEmailPlaceholder = "your.name", authPassword = "Password",
+                authPasswordPlaceholder = "At least 6 characters", authConfirmPassword = "Confirm password",
+                authConfirmPlaceholder = "Enter the password again", showPassword = "Show password", hidePassword = "Hide password",
                 localCreator = "Local creator", myPosts = "My posts", saved = "Saved", save = "Save", likes = "likes",
+                createProfile = "Create your profile", editProfile = "Edit profile", profileSetupBody = "Your iFruit email is linked automatically.",
+                profileEmail = "iFruit email", profileHandle = "Username", profileHandlePlaceholder = "your.name",
+                profileHandleHint = "Use 3-24 lowercase letters, numbers, dots or underscores.", profileBio = "Bio",
+                profileBioPlaceholder = "Tell the city a little about yourself...", profilePhoto = "Profile photo", profilePhotoHint = "Choose a photo from your Gallery or take a new one.", removeProfilePhoto = "Remove photo", profileSave = "Save profile", profileCancel = "Cancel", profileSaved = "Your profile was saved.",
                 location = "Location", sharedFrom = "Shared from CityMarkt", openCityMarkt = "Open CityMarkt listing",
                 newPost = "New local post", shareWithCity = "Share with the city", publish = "Publish", published = "Your post is live.", deleted = "Post deleted.",
                 title = "Title", body = "Your story", category = "Category", titlePlaceholder = "What should people know?", bodyPlaceholder = "Add details, a recommendation or directions...",
                 photos = "Photos", optional = "optional", camera = "Camera", gallery = "Gallery", photoLimit = "You can add up to six photos.",
                 cityMarktShare = "Share to Local Pages", cityMarktShared = "Shared to Local Pages.", cityMarktShareHint = "One CityMarkt share per day",
-                errors = { invalid_post = "Add a title and a little more detail.", invalid_images = "Choose valid photos from this phone.", invalid_request = "This action is not valid.", post_not_found = "This post is no longer available.", citymarkt_not_found = "This CityMarkt listing is unavailable.", citymarkt_daily_limit = "You already shared a CityMarkt listing today.", citymarkt_already_shared = "This listing was already shared.", not_authenticated = "Sign in to iFruit first.", rate_limited = "Too many requests. Try again shortly.", request_failed = "The post could not be saved.", default = "Local Pages is temporarily unavailable." },
+                authErrors = { invalid_email = "Enter a valid 3-32 character iFruit address.", invalid_password = "Use a password between 6 and 64 characters.", invalid_credentials = "The iFruit address or password is incorrect.", email_taken = "This iFruit address is already registered.", password_mismatch = "The passwords do not match.", rate_limited = "Too many attempts. Try again shortly.", default = "The iFruit account request failed." },
+                errors = { profile_required = "Create your Local Pages profile first.", invalid_profile = "Check your username and bio.", invalid_profile_image = "Choose a valid photo from this phone.", profile_handle_taken = "This username is already taken.", invalid_post = "Add a title and a little more detail.", invalid_images = "Choose valid photos from this phone.", invalid_request = "This action is not valid.", post_not_found = "This post is no longer available.", citymarkt_not_found = "This CityMarkt listing is unavailable.", citymarkt_daily_limit = "You already shared a CityMarkt listing today.", citymarkt_already_shared = "This listing was already shared.", not_authenticated = "Sign in to iFruit first.", rate_limited = "Too many requests. Try again shortly.", request_failed = "The post could not be saved.", default = "Local Pages is temporarily unavailable." },
             },
             map = {
                 name = "Map", controls = "Map controls", currentLocation = "Current Location",
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 4d73d97..84eb4d9 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -59,6 +59,8 @@ local server_callbacks = {
     "marketplace:block",
     "pages:list",
     "pages:get",
+    "pages:profile",
+    "pages:profile-save",
     "pages:list-own",
     "pages:create",
     "pages:share-citymarkt",
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index aae4a3c..606b8ce 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -775,6 +775,37 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_pages_profiles",
+        columns = {
+            { name = "account_id", type = "BIGINT UNSIGNED NOT NULL" },
+            {
+                name = "handle",
+                type = "VARCHAR(24) NOT NULL",
+                characterSet = "ascii",
+                collation = "ascii_general_ci",
+            },
+            { name = "bio", type = "VARCHAR(160) NOT NULL DEFAULT ''" },
+            { name = "avatar_media_id", type = "BIGINT UNSIGNED NULL" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            {
+                name = "updated_at",
+                type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP",
+            },
+        },
+        primaryKey = "account_id",
+        uniqueKeys = {
+            { name = "uniq_sky_phone_pages_profile_handle", columns = "(`handle`)" },
+        },
+        indexes = {
+            { name = "idx_sky_phone_pages_profile_avatar", columns = "(`avatar_media_id`)" },
+        },
+        foreignKeys = {
+            { column = "account_id", references = "`sky_phone_accounts` (`id`) ON DELETE CASCADE" },
+            { column = "avatar_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
     {
         name = "sky_phone_pages_posts",
         columns = {
diff --git a/sky_phone/source/server/pages.lua b/sky_phone/source/server/pages.lua
index aa977ed..e3ac471 100644
--- a/sky_phone/source/server/pages.lua
+++ b/sky_phone/source/server/pages.lua
@@ -14,6 +14,27 @@ local function valid_text(value, minimum, maximum)
     return length and length >= minimum and length <= maximum
 end
 
+local function normalize_handle(value)
+    local handle = trim(value)
+    if not handle then return nil end
+    handle = handle:lower():gsub("^@", "")
+    local length = utf8.len(handle)
+    if not length
+        or length < Config.LocalPages.ProfileHandleMinLength
+        or length > Config.LocalPages.ProfileHandleMaxLength
+        or not handle:match("^[a-z0-9][a-z0-9._]*[a-z0-9]$")
+    then
+        return nil
+    end
+    return handle
+end
+
+local function default_handle(account)
+    local email_name = type(account.email) == "string" and account.email:match("^([^@]+)") or ""
+    local candidate = email_name:lower():gsub("[^a-z0-9._]", "_"):sub(1, Config.LocalPages.ProfileHandleMaxLength)
+    return normalize_handle(candidate) or ("local%s"):format(account.id)
+end
+
 local function new_id()
     local rows = Bridge.Database.Query("SELECT UUID() AS `id`", {})
     if not rows[1] or type(rows[1].id) ~= "string" then
@@ -83,7 +104,8 @@ local function list_posts(account_id, where_clause, values, limit, offset)
     return hydrate_posts(Bridge.Database.Query(([[
         SELECT p.`id`, p.`title`, p.`body`, p.`category`, p.`district`, p.`source_type`,
             p.`citymarkt_listing_id`, UNIX_TIMESTAMP(p.`created_at`) AS `created_at_unix`,
-            SUBSTRING_INDEX(a.`email`, '@', 1) AS `author_name`,
+            COALESCE(profile.`handle`, SUBSTRING_INDEX(a.`email`, '@', 1)) AS `author_name`,
+            avatar.`url` AS `author_avatar`,
             (p.`account_id` = ?) AS `is_owner`,
             EXISTS(SELECT 1 FROM `sky_phone_pages_reactions` r WHERE r.`post_id` = p.`id`
                 AND r.`account_id` = ? AND r.`kind` = 'like') AS `is_liked`,
@@ -96,6 +118,8 @@ local function list_posts(account_id, where_clause, values, limit, offset)
             m.`price` AS `citymarkt_price`
         FROM `sky_phone_pages_posts` p
         JOIN `sky_phone_accounts` a ON a.`id` = p.`account_id`
+        LEFT JOIN `sky_phone_pages_profiles` profile ON profile.`account_id` = p.`account_id`
+        LEFT JOIN `sky_phone_media` avatar ON avatar.`id` = profile.`avatar_media_id`
         LEFT JOIN `sky_phone_marketplace_listings` m ON m.`id` = p.`citymarkt_listing_id`
         WHERE %s
         ORDER BY p.`created_at` DESC
@@ -110,6 +134,102 @@ local function optional_account(source)
     return rows[1] and tonumber(rows[1].account_id) or nil, nil
 end
 
+local function profile_dto(account)
+    local rows = Bridge.Database.Query([[
+        SELECT profile.`handle`, profile.`bio`, profile.`avatar_media_id`, avatar.`url` AS `avatar_url`,
+            (SELECT COUNT(*) FROM `sky_phone_pages_posts` post
+                WHERE post.`account_id` = ?) AS `post_count`
+        FROM `sky_phone_accounts` account
+        LEFT JOIN `sky_phone_pages_profiles` profile ON profile.`account_id` = account.`id`
+        LEFT JOIN `sky_phone_media` avatar ON avatar.`id` = profile.`avatar_media_id`
+        WHERE account.`id` = ?
+        LIMIT 1
+    ]], { account.id, account.id })
+    local row = rows[1]
+    if not row then
+        error(("[sky_phone] Could not load Local Pages profile account %s."):format(account.id))
+    end
+    return {
+        avatar_media_id = tonumber(row.avatar_media_id),
+        avatar_url = row.avatar_url,
+        bio = row.bio or "",
+        email = account.email,
+        exists = row.handle ~= nil,
+        handle = row.handle or default_handle(account),
+        post_count = tonumber(row.post_count) or 0,
+    }
+end
+
+local function require_profile(account_id)
+    local rows = Bridge.Database.Query([[
+        SELECT `account_id`, `handle`, `bio`
+        FROM `sky_phone_pages_profiles`
+        WHERE `account_id` = ?
+        LIMIT 1
+    ]], { account_id })
+    if not rows[1] then
+        return nil, { success = false, error = "profile_required" }
+    end
+    return rows[1], nil
+end
+
+Bridge.Callbacks.Register("sky_phone:pages:profile", function(source)
+    local account, error_response = SkyPhone.RequireAccount(source)
+    if not account then return error_response end
+    return { success = true, data = profile_dto(account) }
+end)
+
+Bridge.Callbacks.Register("sky_phone:pages:profile-save", function(source, data)
+    local account, error_response = SkyPhone.RequireAccount(source)
+    if not account then return error_response end
+    if not SkyPhone.AllowOperation(source, "pages:profile-save", 12, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    if type(data) ~= "table" or type(data.bio) ~= "string" then
+        return { success = false, error = "invalid_profile" }
+    end
+    local handle = normalize_handle(data.handle)
+    local bio = trim(data.bio)
+    local avatar_media_id = tonumber(data.avatarMediaId)
+    if not handle or not valid_text(bio, 0, Config.LocalPages.ProfileBioMaxLength)
+        or not avatar_media_id or avatar_media_id < 0 or avatar_media_id ~= math.floor(avatar_media_id)
+    then
+        return { success = false, error = "invalid_profile" }
+    end
+    if avatar_media_id > 0 and not SkyPhoneMedia.ResolveOwnedMedia(source, tostring(avatar_media_id), "photo") then
+        Bridge.Debug("warn", "[sky_phone] Rejected unowned Local Pages profile image from source %s.", tostring(source))
+        return { success = false, error = "invalid_profile_image" }
+    end
+    local duplicate = Bridge.Database.Query([[
+        SELECT `account_id`
+        FROM `sky_phone_pages_profiles`
+        WHERE `handle` = ? AND `account_id` <> ?
+        LIMIT 1
+    ]], { handle, account.id })
+    if duplicate[1] then
+        return { success = false, error = "profile_handle_taken" }
+    end
+    local existing = Bridge.Database.Query([[
+        SELECT `account_id`
+        FROM `sky_phone_pages_profiles`
+        WHERE `account_id` = ?
+        LIMIT 1
+    ]], { account.id })
+    if existing[1] then
+        Bridge.Database.Query([[
+            UPDATE `sky_phone_pages_profiles`
+            SET `handle` = ?, `bio` = ?, `avatar_media_id` = NULLIF(?, 0)
+            WHERE `account_id` = ?
+        ]], { handle, bio, avatar_media_id, account.id })
+    else
+        Bridge.Database.Query([[
+            INSERT INTO `sky_phone_pages_profiles` (`account_id`, `handle`, `bio`, `avatar_media_id`)
+            VALUES (?, ?, ?, NULLIF(?, 0))
+        ]], { account.id, handle, bio, avatar_media_id })
+    end
+    return { success = true, data = profile_dto(account) }
+end)
+
 Bridge.Callbacks.Register("sky_phone:pages:list", function(source, data)
     if type(data) ~= "table" then return { success = false, error = "invalid_request" } end
     local account_id, error_response = optional_account(source)
@@ -163,6 +283,8 @@ end)
 Bridge.Callbacks.Register("sky_phone:pages:create", function(source, data)
     local account, error_response = SkyPhone.RequireAccount(source)
     if not account then return error_response end
+    local _, profile_error = require_profile(account.id)
+    if profile_error then return profile_error end
     if not SkyPhone.AllowOperation(source, "pages:create", 6, 60) then
         return { success = false, error = "rate_limited" }
     end
@@ -201,6 +323,8 @@ end)
 Bridge.Callbacks.Register("sky_phone:pages:share-citymarkt", function(source, data)
     local account, error_response = SkyPhone.RequireAccount(source)
     if not account then return error_response end
+    local _, profile_error = require_profile(account.id)
+    if profile_error then return profile_error end
     if not SkyPhone.AllowOperation(source, "pages:share-citymarkt", 3, 60) then
         return { success = false, error = "rate_limited" }
     end

From 291a560f89187d5f38a5bca08d5b364e1161b4cd Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 14:07:58 +0200
Subject: [PATCH 32/63] ENH - refine Calendar controls and event editing

---
 frontend/src/stores/phone.ts            |   1 +
 frontend/src/views/apps/CalendarApp.vue | 649 +++++++++++++++++-------
 sky_phone/config/locales/en.lua         |   2 +-
 3 files changed, 480 insertions(+), 172 deletions(-)

diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 61412d4..18493bc 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -2910,6 +2910,7 @@ const defaultLocales: LocaleTree = {
       title: 'Title',
       titlePlaceholder: 'What is planned?',
       date: 'Date',
+      allDay: 'All-day',
       starts: 'Starts',
       ends: 'Ends',
       reminder: 'Reminder',
diff --git a/frontend/src/views/apps/CalendarApp.vue b/frontend/src/views/apps/CalendarApp.vue
index b82982b..80b14f6 100644
--- a/frontend/src/views/apps/CalendarApp.vue
+++ b/frontend/src/views/apps/CalendarApp.vue
@@ -18,7 +18,7 @@ import {
   UserRound,
   X,
 } from 'lucide-vue-next'
-import { kFab } from 'konsta/vue'
+import { kGlass, kSearchbar, kToggle } from 'konsta/vue'
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 
 import { useAccountStore } from '@/stores/account'
@@ -59,6 +59,11 @@ const searchQuery = ref('')
 const reminderOpen = ref(false)
 const saving = ref(false)
 const formError = ref('')
+const datePickerOpen = ref(false)
+const pickerDate = ref(selectedDate.value)
+const pickerMonth = ref(
+  new Date(today.getFullYear(), today.getMonth(), 1),
+)
 const timePickerField = ref<TimeField | null>(null)
 const pickerHour = ref('09')
 const pickerMinute = ref('00')
@@ -66,7 +71,9 @@ const hourColumn = ref<HTMLElement | null>(null)
 const minuteColumn = ref<HTMLElement | null>(null)
 const calendarScroll = ref<HTMLElement | null>(null)
 const yearOverviewScroll = ref<HTMLElement | null>(null)
+const searchToolbar = ref<HTMLElement | null>(null)
 const draft = reactive({
+  allDay: false,
   date: selectedDate.value,
   endTime: '10:00',
   note: '',
@@ -81,10 +88,8 @@ const hourOptions = Array.from({ length: 24 }, (_, index) =>
 const minuteOptions = Array.from({ length: 12 }, (_, index) =>
   String(index * 5).padStart(2, '0'),
 )
-const cornerButtonColors = {
-  bgIos: 'bg-ios-light-glass/75 dark:bg-ios-dark-glass/75',
-  activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
-  textIos: 'text-black/80 dark:text-white/80',
+const calendarToggleColors = {
+  checkedBgIos: 'bg-[#ff3b30]',
 }
 const viewModes: Array<{
   icon: typeof LayoutGrid
@@ -119,6 +124,20 @@ const timePickerTitle = computed(() =>
     ? phone.t('Apps.calendar.starts')
     : phone.t('Apps.calendar.ends'),
 )
+const draftDateLabel = computed(() =>
+  new Intl.DateTimeFormat(phone.lang, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  }).format(new Date(`${draft.date}T12:00:00`)),
+)
+const pickerMonthLabel = computed(() =>
+  new Intl.DateTimeFormat(phone.lang, {
+    month: 'long',
+    year: 'numeric',
+  }).format(pickerMonth.value),
+)
+const pickerMonthCells = computed(() => monthCells(pickerMonth.value))
 const weekdayLabels = computed(() => {
   const monday = new Date(2026, 0, 5)
   return Array.from({ length: 7 }, (_, index) =>
@@ -328,19 +347,40 @@ function scrollToMonth(date: Date, behavior: ScrollBehavior = 'smooth'): void {
     ?.scrollIntoView({ behavior, block: 'start' })
 }
 
-function toggleSearch(): void {
+async function toggleSearch(): Promise<void> {
   searchOpen.value = !searchOpen.value
-  if (!searchOpen.value) searchQuery.value = ''
+  viewMenuOpen.value = false
+  if (!searchOpen.value) {
+    searchQuery.value = ''
+    return
+  }
+  await nextTick()
+  searchToolbar.value?.querySelector('input')?.focus()
+}
+
+function isAllDayEvent(event: CalendarEvent): boolean {
+  return timeValue(event.startsAt) === '00:00' && timeValue(event.endsAt) === '23:59'
+}
+
+function eventTimeLabel(event: CalendarEvent): string {
+  if (isAllDayEvent(event)) return phone.t('Apps.calendar.allDay')
+  return `${formatTime(event.startsAt)} – ${formatTime(event.endsAt)}`
+}
+
+function updateSearch(event: Event): void {
+  searchQuery.value = (event.target as HTMLInputElement).value
 }
 
 function resetDraft(event?: CalendarEvent): void {
   editingEvent.value = event ?? null
+  draft.allDay = event ? isAllDayEvent(event) : false
   draft.title = event?.title ?? ''
   draft.note = event?.note ?? ''
   draft.date = event ? dateKey(event.startsAt) : selectedDate.value
   draft.startTime = event ? timeValue(event.startsAt) : '09:00'
   draft.endTime = event ? timeValue(event.endsAt) : '10:00'
   draft.reminderMinutes = event?.reminderMinutes ?? 60
+  datePickerOpen.value = false
   reminderOpen.value = false
   formError.value = ''
 }
@@ -375,15 +415,51 @@ function shareEvent(): void {
 }
 
 function closeForm(): void {
+  datePickerOpen.value = false
   timePickerField.value = null
   screen.value = editingEvent.value ? 'detail' : 'main'
 }
 
+function toggleAllDay(): void {
+  draft.allDay = !draft.allDay
+  timePickerField.value = null
+  if (
+    !draft.allDay &&
+    draft.startTime === '00:00' &&
+    draft.endTime === '23:59'
+  ) {
+    draft.startTime = '09:00'
+    draft.endTime = '10:00'
+  }
+}
+
+function openDatePicker(): void {
+  const date = new Date(`${draft.date}T12:00:00`)
+  pickerDate.value = draft.date
+  pickerMonth.value = new Date(date.getFullYear(), date.getMonth(), 1)
+  timePickerField.value = null
+  datePickerOpen.value = true
+}
+
+function movePickerMonth(amount: number): void {
+  pickerMonth.value = new Date(
+    pickerMonth.value.getFullYear(),
+    pickerMonth.value.getMonth() + amount,
+    1,
+  )
+}
+
+function confirmDatePicker(): void {
+  draft.date = pickerDate.value
+  datePickerOpen.value = false
+}
+
 async function openTimePicker(field: TimeField): Promise<void> {
   const [hour, minute] = draft[field].split(':')
   timePickerField.value = field
   pickerHour.value = hour ?? '09'
   pickerMinute.value = minute ?? '00'
+  datePickerOpen.value = false
   await nextTick()
   hourColumn.value
     ?.querySelector(`[data-value="${pickerHour.value}"]`)
@@ -412,8 +488,14 @@ function selectPickerValue(
 }
 
 async function saveEvent(): Promise<void> {
-  const startsAt = combineDateAndTime(draft.date, draft.startTime)
-  const endsAt = combineDateAndTime(draft.date, draft.endTime)
+  const startsAt = combineDateAndTime(
+    draft.date,
+    draft.allDay ? '00:00' : draft.startTime,
+  )
+  const endsAt = combineDateAndTime(
+    draft.date,
+    draft.allDay ? '23:59' : draft.endTime,
+  )
   if (!draft.title.trim() || endsAt <= startsAt) {
     formError.value = phone.t('Apps.calendar.errors.invalid_event')
     return
@@ -467,91 +549,91 @@ onMounted(async () => {
         class="calendar__toolbar"
         :class="{ 'calendar__toolbar--year': yearOverviewOpen }"
       >
-        <k-fab
-          v-if="!yearOverviewOpen"
-          component="button"
-          type="button"
-          :text="String(visibleYear)"
-          text-position="after"
-          :colors="cornerButtonColors"
-          :aria-label="String(visibleYear)"
-          @click="openYearOverview"
-        >
-          <template #icon>
-            <ChevronLeft :size="22" />
-          </template>
-        </k-fab>
-        <div class="calendar__toolbar-actions">
-          <k-fab
+        <Transition name="calendar-search" mode="out-in">
+          <div v-if="searchOpen" ref="searchToolbar" class="calendar__search-toolbar">
+            <k-searchbar
+              class="calendar__searchbar"
+              :placeholder="phone.t('Apps.calendar.searchPlaceholder')"
+              :value="searchQuery"
+              @clear="searchQuery = ''"
+              @input="updateSearch"
+            />
+            <k-glass
+              component="button"
+              type="button"
+              class="calendar__control calendar__control--close"
+              :aria-label="phone.t('Common.close')"
+              @click="toggleSearch"
+            >
+              <X :size="20" />
+            </k-glass>
+          </div>
+          <div v-else class="calendar__toolbar-default">
+          <k-glass
             v-if="!yearOverviewOpen"
             component="button"
-            :colors="cornerButtonColors"
-            :aria-label="phone.t(`Apps.calendar.views.${viewMode}`)"
             type="button"
-            @click="viewMenuOpen = !viewMenuOpen"
+            class="calendar__control calendar__control--year"
+            :aria-label="String(visibleYear)"
+            @click="openYearOverview"
           >
-            <template #icon>
-              <component
-                :is="viewModes.find((mode) => mode.id === viewMode)?.icon"
-                :size="19"
-              />
-            </template>
-          </k-fab>
-          <k-fab
-            component="button"
-            :colors="cornerButtonColors"
-            :aria-label="phone.t('Common.search')"
-            type="button"
-            @click="toggleSearch"
-          >
-            <template #icon>
-              <X v-if="searchOpen" :size="19" />
-              <Search v-else :size="19" />
-            </template>
-          </k-fab>
-          <k-fab
-            v-if="isAuthenticated"
-            component="button"
-            :colors="cornerButtonColors"
-            :aria-label="phone.t('Apps.calendar.newEvent')"
-            type="button"
-            @click="openCreate"
-          >
-            <template #icon>
-              <Plus :size="22" />
-            </template>
-          </k-fab>
-        </div>
+            <ChevronLeft :size="20" />
+            <span>{{ visibleYear }}</span>
+          </k-glass>
+            <div class="calendar__toolbar-actions">
+              <k-glass
+                v-if="!yearOverviewOpen"
+                component="button"
+                class="calendar__control"
+                :aria-label="phone.t(`Apps.calendar.views.${viewMode}`)"
+                type="button"
+                @click="viewMenuOpen = !viewMenuOpen"
+              >
+                <component
+                  :is="viewModes.find((mode) => mode.id === viewMode)?.icon"
+                  :size="19"
+                />
+              </k-glass>
+              <k-glass
+                component="button"
+                class="calendar__control"
+                :aria-label="phone.t('Common.search')"
+                type="button"
+                @click="toggleSearch"
+              >
+                <Search :size="19" />
+              </k-glass>
+              <k-glass
+                v-if="isAuthenticated"
+                component="button"
+                class="calendar__control"
+                :aria-label="phone.t('Apps.calendar.newEvent')"
+                type="button"
+                @click="openCreate"
+              >
+                <Plus :size="21" />
+              </k-glass>
+            </div>
 
-        <Transition name="calendar-popover">
-          <div v-if="viewMenuOpen" class="calendar__view-menu">
-            <button
-              v-for="mode in viewModes"
-              :key="mode.id"
-              :class="{ active: viewMode === mode.id }"
-              type="button"
-              @click="selectView(mode.id)"
-            >
-              <component :is="mode.icon" :size="19" />
-              <span>{{ phone.t(mode.labelKey) }}</span>
-              <Check v-if="viewMode === mode.id" :size="17" />
-            </button>
+            <Transition name="calendar-popover">
+              <div v-if="viewMenuOpen" class="calendar__view-menu">
+                <button
+                  v-for="mode in viewModes"
+                  :key="mode.id"
+                  :class="{ active: viewMode === mode.id }"
+                  type="button"
+                  @click="selectView(mode.id)"
+                >
+                  <component :is="mode.icon" :size="19" />
+                  <span>{{ phone.t(mode.labelKey) }}</span>
+                  <Check v-if="viewMode === mode.id" :size="17" />
+                </button>
+              </div>
+            </Transition>
           </div>
         </Transition>
       </header>
 
-      <Transition name="calendar-search">
-        <div v-if="searchOpen" class="calendar__search">
-          <Search :size="17" />
-          <input
-            v-model="searchQuery"
-            autofocus
-            type="search"
-            :placeholder="phone.t('Apps.calendar.searchPlaceholder')"
-          />
-        </div>
-      </Transition>
-
       <section v-if="!isAuthenticated" class="calendar__auth">
         <span><UserRound :size="33" /></span>
         <h1>{{ phone.t('Apps.calendar.signInTitle') }}</h1>
@@ -729,10 +811,7 @@ onMounted(async () => {
               <i />
               <span>
                 <strong>{{ event.title }}</strong>
-                <small>
-                  {{ formatTime(event.startsAt) }} –
-                  {{ formatTime(event.endsAt) }}
-                </small>
+                <small>{{ eventTimeLabel(event) }}</small>
               </span>
               <ChevronRight :size="17" />
             </button>
@@ -741,13 +820,14 @@ onMounted(async () => {
       </div>
 
       <footer v-if="isAuthenticated" class="calendar__footer">
-        <k-fab
+        <k-glass
           component="button"
           type="button"
-          :colors="cornerButtonColors"
-          :text="phone.t('Apps.calendar.today')"
+          class="calendar__control calendar__control--today"
           @click="goToday"
-        />
+        >
+          {{ phone.t('Apps.calendar.today') }}
+        </k-glass>
       </footer>
     </template>
 
@@ -779,10 +859,7 @@ onMounted(async () => {
             <div>
               <small>{{ phone.t('Apps.calendar.date') }}</small>
               <strong>{{ formatLongDate(selectedEvent.startsAt) }}</strong>
-              <span>
-                {{ formatTime(selectedEvent.startsAt) }} –
-                {{ formatTime(selectedEvent.endsAt) }}
-              </span>
+              <span>{{ eventTimeLabel(selectedEvent) }}</span>
             </div>
           </div>
           <div class="calendar__group-row">
@@ -810,9 +887,14 @@ onMounted(async () => {
 
     <section v-else class="calendar__form">
       <header class="calendar__sheet-header">
-        <button type="button" @click="closeForm">
+        <k-glass
+          component="button"
+          type="button"
+          class="calendar__control calendar__sheet-action"
+          @click="closeForm"
+        >
           {{ phone.t('Common.cancel') }}
-        </button>
+        </k-glass>
         <strong>
           {{
             editingEvent
@@ -820,9 +902,15 @@ onMounted(async () => {
               : phone.t('Apps.calendar.newEvent')
           }}
         </strong>
-        <button :disabled="saving" type="button" @click="saveEvent">
+        <k-glass
+          component="button"
+          type="button"
+          class="calendar__control calendar__sheet-action"
+          :disabled="saving"
+          @click="saveEvent"
+        >
           {{ editingEvent ? phone.t('Common.save') : phone.t('Common.add') }}
-        </button>
+        </k-glass>
       </header>
       <form class="calendar__sheet-scroll" @submit.prevent="saveEvent">
         <section class="calendar__group calendar__group--fields">
@@ -839,11 +927,26 @@ onMounted(async () => {
         </section>
 
         <section class="calendar__group calendar__group--fields">
-          <label>
-            <span>{{ phone.t('Apps.calendar.date') }}</span>
-            <input v-model="draft.date" type="date" />
-          </label>
           <button
+            class="calendar__date-time-row"
+            type="button"
+            @click="openDatePicker"
+          >
+            <span>{{ phone.t('Apps.calendar.date') }}</span>
+            <strong>{{ draftDateLabel }}</strong>
+            <ChevronRight :size="17" />
+          </button>
+          <div class="calendar__all-day-row">
+            <span>{{ phone.t('Apps.calendar.allDay') }}</span>
+            <k-toggle
+              :checked="draft.allDay"
+              :colors="calendarToggleColors"
+              :aria-label="phone.t('Apps.calendar.allDay')"
+              @change="toggleAllDay"
+            />
+          </div>
+          <button
+            v-if="!draft.allDay"
             class="calendar__date-time-row"
             type="button"
             @click="openTimePicker('startTime')"
@@ -853,6 +956,7 @@ onMounted(async () => {
             <ChevronRight :size="17" />
           </button>
           <button
+            v-if="!draft.allDay"
             class="calendar__date-time-row"
             type="button"
             @click="openTimePicker('endTime')"
@@ -897,6 +1001,75 @@ onMounted(async () => {
       </form>
     </section>
 
+    <Transition name="calendar-picker">
+      <div
+        v-if="datePickerOpen"
+        class="calendar__picker-backdrop"
+        role="presentation"
+        @click.self="datePickerOpen = false"
+      >
+        <section
+          class="calendar__time-picker calendar__date-picker"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="phone.t('Apps.calendar.date')"
+        >
+          <header>
+            <button type="button" @click="datePickerOpen = false">
+              {{ phone.t('Common.cancel') }}
+            </button>
+            <strong>{{ phone.t('Apps.calendar.date') }}</strong>
+            <button type="button" @click="confirmDatePicker">
+              {{ phone.t('Common.done') }}
+            </button>
+          </header>
+
+          <div class="calendar__date-picker-month">
+            <k-glass
+              component="button"
+              type="button"
+              :aria-label="phone.t('Apps.calendar.previousMonth')"
+              @click="movePickerMonth(-1)"
+            >
+              <ChevronLeft :size="20" />
+            </k-glass>
+            <strong>{{ pickerMonthLabel }}</strong>
+            <k-glass
+              component="button"
+              type="button"
+              :aria-label="phone.t('Apps.calendar.nextMonth')"
+              @click="movePickerMonth(1)"
+            >
+              <ChevronRight :size="20" />
+            </k-glass>
+          </div>
+
+          <div class="calendar__date-picker-weekdays" aria-hidden="true">
+            <span v-for="weekday in weekdayLabels" :key="weekday">
+              {{ weekday }}
+            </span>
+          </div>
+          <div class="calendar__date-picker-grid">
+            <template v-for="(day, index) in pickerMonthCells" :key="index">
+              <button
+                v-if="day"
+                type="button"
+                :class="{
+                  selected: pickerDate === dateKey(day),
+                  today: dateKey(day) === dateKey(today),
+                }"
+                :aria-label="formatLongDate(day.getTime())"
+                @click="pickerDate = dateKey(day)"
+              >
+                {{ day.getDate() }}
+              </button>
+              <span v-else />
+            </template>
+          </div>
+        </section>
+      </div>
+    </Transition>
+
     <Transition name="calendar-picker">
       <div
         v-if="timePickerField"
@@ -996,7 +1169,7 @@ onMounted(async () => {
   --muted: #6e6e73;
 }
 
-.calendar button:not(.k-fab),
+.calendar button,
 .calendar input,
 .calendar textarea {
   border: 0;
@@ -1004,7 +1177,7 @@ onMounted(async () => {
   font: inherit;
 }
 
-.calendar button:not(.k-fab) {
+.calendar button {
   cursor: pointer;
 }
 
@@ -1026,6 +1199,92 @@ onMounted(async () => {
   gap: 8px;
 }
 
+.calendar__toolbar-default,
+.calendar__search-toolbar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.calendar__toolbar-default {
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.calendar__search-toolbar {
+  gap: 8px;
+}
+
+.calendar__searchbar {
+  min-width: 0;
+  flex: 1;
+}
+
+.calendar__searchbar :deep(> div:first-child) {
+  height: 44px;
+  border-radius: 9999px;
+  overflow: hidden;
+  background: var(--color-ios-dark-glass);
+  box-shadow: var(--shadow-ios-dark-glass);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.calendar--light .calendar__searchbar :deep(> div:first-child) {
+  background: var(--color-ios-light-glass);
+  box-shadow: var(--shadow-ios-light-glass);
+}
+
+.calendar__searchbar :deep(input) {
+  color: var(--label);
+  font-size: 14px;
+}
+
+.calendar__control {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border-radius: 9999px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  background: var(--color-ios-dark-glass);
+  color: var(--label);
+  box-shadow: var(--shadow-ios-dark-glass);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.calendar--light .calendar__control {
+  background: var(--color-ios-light-glass);
+  box-shadow: var(--shadow-ios-light-glass);
+}
+
+.calendar__control--year {
+  width: auto;
+  min-width: 86px;
+  padding: 0 11px 0 7px;
+  color: var(--accent);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.calendar__control--today {
+  width: auto;
+  min-width: 74px;
+  padding: 0 14px;
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.calendar__control--close {
+  flex: none;
+  color: var(--accent);
+}
+
 .calendar__view-menu {
   position: absolute;
   z-index: 12;
@@ -1035,7 +1294,7 @@ onMounted(async () => {
   padding: 8px;
   border: 1px solid var(--line);
   border-radius: 18px;
-  background: var(--glass);
+  background: var(--elevated);
   box-shadow: 0 16px 44px rgb(0 0 0 / 38%);
   backdrop-filter: blur(28px) saturate(180%);
   -webkit-backdrop-filter: blur(28px) saturate(180%);
@@ -1060,27 +1319,6 @@ onMounted(async () => {
   color: var(--accent);
 }
 
-.calendar__search {
-  height: 46px;
-  margin: 0 14px 7px;
-  padding: 0 10px;
-  border-radius: 13px;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  background: var(--elevated);
-  color: var(--muted);
-}
-
-.calendar__search input {
-  min-width: 0;
-  flex: 1;
-  outline: 0;
-  background: transparent;
-  color: var(--label);
-  font-size: 15px;
-}
-
 .calendar__content {
   height: calc(100% - 68px);
   padding: 4px 0 100px;
@@ -1090,10 +1328,6 @@ onMounted(async () => {
   scrollbar-width: none;
 }
 
-.calendar__search + .calendar__content {
-  height: calc(100% - 121px);
-}
-
 .calendar__year-overview {
   height: calc(100% - 68px);
   padding: 4px 14px 100px;
@@ -1103,10 +1337,6 @@ onMounted(async () => {
   scrollbar-width: none;
 }
 
-.calendar__search + .calendar__year-overview {
-  height: calc(100% - 121px);
-}
-
 .calendar__year-overview::-webkit-scrollbar {
   display: none;
 }
@@ -1129,8 +1359,8 @@ onMounted(async () => {
 
 .calendar__overview-months {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 24px 11px;
+  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+  gap: 28px 18px;
 }
 
 .calendar__overview-month {
@@ -1161,7 +1391,7 @@ onMounted(async () => {
 .calendar__overview-month button,
 .calendar__overview-month > div > span {
   min-width: 0;
-  height: 17px;
+  height: 22px;
 }
 
 .calendar__overview-month button {
@@ -1171,7 +1401,8 @@ onMounted(async () => {
   place-items: center;
   background: transparent;
   color: var(--label);
-  font-size: 10px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
   font-weight: 540;
 }
 
@@ -1629,6 +1860,16 @@ onMounted(async () => {
   opacity: 0.4;
 }
 
+.calendar__sheet-action {
+  width: 68px;
+  height: 38px;
+  padding: 0 12px;
+  border-radius: 9999px;
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 700;
+}
+
 .calendar__sheet-header > strong {
   font-size: 15px;
 }
@@ -1786,19 +2027,6 @@ onMounted(async () => {
   line-height: 1.4;
 }
 
-.calendar__group--fields label {
-  min-height: 58px;
-  padding: 0 15px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--line);
-  font-size: 13px;
-}
-
-.calendar__group--fields label:last-child {
-  border-bottom: 0;
-}
-
 .calendar__date-time-row {
   width: 100%;
   min-height: 58px;
@@ -1813,6 +2041,18 @@ onMounted(async () => {
   text-align: left;
 }
 
+.calendar__all-day-row {
+  min-height: 58px;
+  padding: 0 15px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--label);
+  font-size: 13px;
+}
+
 .calendar__date-time-row span {
   min-width: 0;
 }
@@ -1827,22 +2067,6 @@ onMounted(async () => {
   color: var(--muted);
 }
 
-.calendar__group--fields label span {
-  flex: 1;
-}
-
-.calendar__group--fields label input {
-  width: auto;
-  min-width: 112px;
-  color-scheme: dark;
-  font-size: 13px;
-  text-align: right;
-}
-
-.calendar--light .calendar__group--fields label input {
-  color-scheme: light;
-}
-
 .calendar__form-row {
   width: 100%;
   min-height: 58px;
@@ -1959,6 +2183,89 @@ onMounted(async () => {
   justify-self: end;
 }
 
+.calendar__date-picker-month {
+  height: 58px;
+  display: grid;
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
+  gap: 10px;
+}
+
+.calendar__date-picker-month > strong {
+  color: var(--label);
+  font-size: 18px;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.calendar__date-picker-month > button {
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border-radius: 9999px;
+  display: grid;
+  place-items: center;
+  background: var(--color-ios-dark-glass);
+  color: var(--accent);
+  box-shadow: var(--shadow-ios-dark-glass);
+}
+
+.calendar--light .calendar__date-picker-month > button {
+  background: var(--color-ios-light-glass);
+  box-shadow: var(--shadow-ios-light-glass);
+}
+
+.calendar__date-picker-weekdays,
+.calendar__date-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  align-items: center;
+}
+
+.calendar__date-picker-weekdays {
+  height: 28px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.calendar__date-picker-grid {
+  gap: 4px 0;
+}
+
+.calendar__date-picker-grid button,
+.calendar__date-picker-grid > span {
+  width: 38px;
+  height: 38px;
+  justify-self: center;
+}
+
+.calendar__date-picker-grid button {
+  padding: 0;
+  border-radius: 9999px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  color: var(--label);
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+}
+
+.calendar__date-picker-grid button.today {
+  box-shadow: inset 0 0 0 1px var(--accent);
+  color: var(--accent);
+}
+
+.calendar__date-picker-grid button.selected {
+  background: var(--accent);
+  color: #fff;
+  box-shadow: none;
+  font-weight: 800;
+}
+
 .calendar__time-preview {
   height: 64px;
   display: flex;
@@ -2072,7 +2379,7 @@ onMounted(async () => {
 .calendar-search-enter-from,
 .calendar-search-leave-to {
   opacity: 0;
-  transform: translateY(-4px);
+  transform: translateY(-58px);
 }
 
 .calendar-picker-enter-active,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 90cf18f..c18345a 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1102,7 +1102,7 @@ Locales["en"] = {
                 searchPlaceholder = "Search events", previousMonth = "Previous month", nextMonth = "Next month",
                 eyebrow = "Your time. Clearly planned.", schedule = "Schedule", event = "Event", appointment = "Appointment",
                 newEvent = "New event", editEvent = "Edit event", deleteEvent = "Delete event", details = "Event details",
-                title = "Title", titlePlaceholder = "What is planned?", date = "Date", starts = "Starts", ends = "Ends",
+                title = "Title", titlePlaceholder = "What is planned?", date = "Date", allDay = "All-day", starts = "Starts", ends = "Ends",
                 reminder = "Reminder", reminderNotification = "Upcoming: {title}", note = "Note",
                 notePlaceholder = "Add details, an address or anything to remember...", noEvents = "Nothing planned",
                 noEventsBody = "This day is still free. Add an event whenever you are ready.",

From 6a99f7027c794db929dc06f498445f53f0fa83fb Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 14:38:17 +0200
Subject: [PATCH 33/63] ENH - refine Feather profiles and controls

---
 frontend/src/views/apps/FeatherApp.vue | 166 +++++++++++++++++++------
 1 file changed, 129 insertions(+), 37 deletions(-)

diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 96e9ab7..21c05b7 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -89,6 +89,10 @@ type ComposerContext = {
   photos: SelectedPhoto[]
   replyTo?: FeatherPost
 }
+type ProfileMediaContext = {
+  editing: { bio: string; displayName: string }
+  selectedPhoto: SelectedPhoto | null
+}
 
 const phone = usePhoneStore()
 const account = useAccountStore()
@@ -122,12 +126,18 @@ const reportDetails = ref('')
 const mediaPreview = ref<{ index: number; items: FeatherMedia[] } | null>(null)
 const onboarding = ref({ bio: '', displayName: '', handle: '' })
 const editing = ref({ bio: '', displayName: '' })
+const selectedProfilePhoto = ref<SelectedPhoto | null>(null)
 const authMode = ref<'login' | 'register'>('login')
 const authForm = ref({ confirm: '', email: '', password: '' })
 const authBusy = ref(false)
 const authAttempted = ref(false)
 const authError = ref('')
 const authPasswordVisible = ref(false)
+const composeFabColors = {
+  activeBgIos: 'active:!bg-[#2778dc] dark:active:!bg-[#2778dc]',
+  bgIos: '!bg-[#58a6ff] dark:!bg-[#58a6ff]',
+  textIos: '!text-white dark:!text-white',
+}
 let exploreSearchTimer: number | undefined
 let networkSearchTimer: number | undefined
 
@@ -204,6 +214,9 @@ const canSaveProfile = computed(
     editing.value.displayName.length <= 50 &&
     editing.value.bio.length <= 160,
 )
+const editProfileAvatarUrl = computed(
+  () => selectedProfilePhoto.value?.url ?? feather.profile?.avatar_url,
+)
 const canCreateProfile = computed(
   () =>
     !busy.value &&
@@ -595,19 +608,49 @@ function openEdit(): void {
     bio: feather.profile.bio,
     displayName: feather.profile.display_name,
   }
+  selectedProfilePhoto.value = null
   screen.value = 'edit'
 }
 
+function openProfileMedia(app: 'camera' | 'photos'): void {
+  messageMedia.begin(
+    'feather:profile-avatar',
+    'photo',
+    '/apps/feather?profileEdit=1',
+    1,
+    {
+      editing: { ...editing.value },
+      selectedPhoto: selectedProfilePhoto.value,
+    } satisfies ProfileMediaContext,
+  )
+  void router.push({
+    path: `/apps/${app}`,
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
+function closeProfileEdit(): void {
+  tab.value = 'profile'
+  screen.value = 'main'
+  feather.viewedProfile = null
+  selectedProfilePhoto.value = null
+  if (route.query.profileEdit === '1')
+    void router.replace({ path: '/apps/feather' })
+}
+
 async function saveProfile(): Promise<void> {
   busy.value = true
-  const response = await feather.updateProfile(editing.value)
+  const response = await feather.updateProfile({
+    ...editing.value,
+    avatarId: selectedProfilePhoto.value?.id,
+  })
   busy.value = false
   if (!response.success) {
     errorToast(response.error)
     return
   }
   if (feather.profile) await feather.loadProfile(feather.profile.id)
-  screen.value = 'profile'
+  closeProfileEdit()
 }
 
 async function deletePost(): Promise<void> {
@@ -646,7 +689,7 @@ function goBack(): void {
     return
   }
   if (screen.value === 'edit') {
-    screen.value = 'profile'
+    closeProfileEdit()
     return
   }
   if (screen.value === 'thread' || screen.value === 'profile') {
@@ -695,6 +738,8 @@ onMounted(async () => {
   window.addEventListener('keydown', handleMediaPreviewKeydown)
   const selection =
     messageMedia.consumeMany<ComposerContext>('feather:composer')
+  const profileSelection =
+    messageMedia.consumeMany<ProfileMediaContext>('feather:profile-avatar')
   if (selection) {
     if (selection.context) {
       composerBody.value = selection.context.body
@@ -706,8 +751,21 @@ onMounted(async () => {
       photos.value.push({ id: media.id, url: media.url })
     }
   }
+  if (profileSelection) {
+    if (profileSelection.context) {
+      editing.value = profileSelection.context.editing
+      selectedProfilePhoto.value = profileSelection.context.selectedPhoto
+    }
+    if (profileSelection.media[0]) {
+      selectedProfilePhoto.value = {
+        id: profileSelection.media[0].id,
+        url: profileSelection.media[0].url,
+      }
+    }
+  }
   if (route.query.compose === '1') screen.value = 'composer'
   await feather.bootstrap()
+  if (route.query.profileEdit === '1' && feather.profile) screen.value = 'edit'
   if (feather.onboarded) {
     const easyShareId = String(route.query.easyShareId ?? '')
     if (easyShareId && route.query.easyShareKind === 'profile') {
@@ -1126,8 +1184,8 @@ onMounted(async () => {
         <div class="feather-edit__identity">
           <div class="feather-edit__avatar">
             <img
-              v-if="feather.profile?.avatar_url"
-              :src="feather.profile.avatar_url"
+              v-if="editProfileAvatarUrl"
+              :src="editProfileAvatarUrl"
               alt=""
             />
             <UserRound v-else :size="28" />
@@ -1139,6 +1197,20 @@ onMounted(async () => {
           <span class="feather-edit__badge"><PencilLine :size="14" /></span>
         </div>
 
+        <div class="feather-edit__photo">
+          <strong>{{ t('chooseAvatar') }}</strong>
+          <div class="feather-edit__photo-actions">
+            <kButton tonal rounded @click="openProfileMedia('photos')">
+              <Images :size="16" />
+              <span>{{ t('chooseGallery') }}</span>
+            </kButton>
+            <kButton tonal rounded @click="openProfileMedia('camera')">
+              <Camera :size="16" />
+              <span>{{ t('takePhoto') }}</span>
+            </kButton>
+          </div>
+        </div>
+
         <kList strong inset class="feather-edit__fields">
           <kListInput
             :value="editing.displayName"
@@ -1163,16 +1235,6 @@ onMounted(async () => {
           </kListInput>
         </kList>
 
-        <kButton
-          large
-          rounded
-          :disabled="!canSaveProfile"
-          class="feather-primary feather-edit__save"
-          @click="saveProfile"
-        >
-          <PencilLine :size="16" />
-          <span>{{ busy ? t('loading') : t('saveProfile') }}</span>
-        </kButton>
       </section>
 
       <section
@@ -2014,6 +2076,7 @@ onMounted(async () => {
         component="button"
         type="button"
         class="feather-compose-fab"
+        :colors="composeFabColors"
         :aria-label="t('newPost')"
         @click="openComposer()"
       >
@@ -3761,7 +3824,7 @@ onMounted(async () => {
 }
 .feather-network-person :deep(.feather-network-person__inner) {
   min-width: 0;
-  padding-block: 0;
+  padding-block: 0 7px;
 }
 .feather-network-person :deep(.feather-network-person__title-wrap) {
   align-items: center;
@@ -3803,9 +3866,12 @@ onMounted(async () => {
 }
 .feather-network-person__name {
   display: flex;
+  width: 100%;
   min-width: 0;
+  max-width: 100%;
   align-items: center;
   gap: 4px;
+  overflow: hidden;
   border: 0;
   padding: 0;
   color: inherit;
@@ -3816,6 +3882,10 @@ onMounted(async () => {
   text-align: left;
 }
 .feather-network-person__name span {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4141,22 +4211,26 @@ onMounted(async () => {
   z-index: 12;
   right: 14px;
   bottom: 91px;
-  width: 42px;
-  height: 42px;
-  min-width: 42px;
-  border: 1px solid color-mix(in srgb, var(--feather-blue) 72%, #fff);
+  width: 46px;
+  height: 46px;
+  min-width: 46px;
+  border: 1px solid color-mix(in srgb, var(--feather-blue) 55%, #fff);
   color: #fff;
-  background: var(--feather-blue);
   box-shadow:
-    0 7px 20px rgb(29 155 240 / 32%),
-    0 2px 7px rgb(0 0 0 / 18%);
+    0 9px 24px rgb(29 155 240 / 38%),
+    0 3px 8px rgb(0 0 0 / 22%),
+    inset 0 1px 0 rgb(255 255 255 / 32%);
   transition:
     transform 150ms ease,
-    box-shadow 150ms ease;
+    box-shadow 150ms ease,
+    filter 150ms ease;
 }
 .feather-compose-fab:active {
-  transform: scale(0.93);
-  box-shadow: 0 3px 10px rgb(29 155 240 / 25%);
+  filter: brightness(0.94);
+  transform: scale(0.94);
+  box-shadow:
+    0 4px 12px rgb(29 155 240 / 28%),
+    inset 0 1px 0 rgb(255 255 255 / 22%);
 }
 .feather-tab-icon b {
   position: absolute;
@@ -4705,6 +4779,34 @@ onMounted(async () => {
   background: var(--feather-blue);
   box-shadow: 0 5px 14px rgb(29 155 240 / 25%);
 }
+.feather-edit__photo {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid var(--feather-border);
+  border-radius: 18px;
+  padding: 11px 12px 12px;
+  background: color-mix(in srgb, var(--feather-panel) 96%, transparent);
+  box-shadow: 0 10px 28px rgb(0 0 0 / 7%);
+}
+.feather-edit__photo > strong {
+  font-size: 11px;
+  font-weight: 800;
+}
+.feather-edit__photo-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.feather-edit__photo-actions :deep(.k-button) {
+  min-width: 0;
+  min-height: 35px;
+  gap: 6px;
+  border: 1px solid color-mix(in srgb, var(--feather-blue) 24%, transparent);
+  color: var(--feather-blue);
+  font-size: 10px;
+  font-weight: 800;
+}
 .feather-edit__fields {
   overflow: hidden;
   margin: 0 !important;
@@ -4731,17 +4833,6 @@ onMounted(async () => {
   color: var(--feather-muted);
   font-size: 9px;
 }
-.feather-edit__save {
-  width: 100%;
-  min-height: 43px;
-  margin-top: 1px;
-  font-size: 12px;
-  font-weight: 800;
-  box-shadow: 0 8px 20px rgb(29 155 240 / 22%);
-}
-.feather-edit__save :deep(.k-icon) {
-  margin-right: 7px;
-}
 .feather-connections {
   padding-top: 10px !important;
 }
@@ -4755,6 +4846,7 @@ onMounted(async () => {
 }
 .feather-connections__tabs :deep(button) {
   min-height: 31px;
+  border-radius: 11px !important;
   font-size: 10px;
   font-weight: 800;
 }

From 1df520236083b4eebc1505bff95feef05d2184c7 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 15:03:52 +0200
Subject: [PATCH 34/63] ENH - refine CityMarkt listings and profiles

---
 frontend/src/stores/marketplace.ts       |  13 +
 frontend/src/types/marketplace.ts        |  17 +
 frontend/src/views/apps/CityMarktApp.vue | 448 ++++++++++++++++++++---
 sky_phone/config/locales/en.lua          |  10 +-
 sky_phone/source/client/main.lua         |   2 +
 sky_phone/source/server/db_migrate.lua   |  23 ++
 sky_phone/source/server/marketplace.lua  |  97 ++++-
 7 files changed, 563 insertions(+), 47 deletions(-)

diff --git a/frontend/src/stores/marketplace.ts b/frontend/src/stores/marketplace.ts
index 6999c62..f347730 100644
--- a/frontend/src/stores/marketplace.ts
+++ b/frontend/src/stores/marketplace.ts
@@ -7,6 +7,8 @@ import type {
   MarketplaceListing,
   MarketplaceListingDraft,
   MarketplaceListingSummary,
+  MarketplaceProfile,
+  MarketplaceProfileDraft,
 } from '@/types/marketplace'
 import { nuiCall, type NuiResponse } from '@/utils/nui'
 
@@ -23,8 +25,19 @@ export const useMarketplaceStore = defineStore('marketplace', {
     isLoading: false,
     items: [] as MarketplaceListingSummary[],
     ownItems: [] as MarketplaceListingSummary[],
+    profile: null as MarketplaceProfile | null,
   }),
   actions: {
+    async loadProfile(): Promise<boolean> {
+      const response = await nuiCall<MarketplaceProfile>('marketplace:profile')
+      if (response.success && response.data) this.profile = response.data
+      return response.success
+    },
+    async saveProfile(draft: MarketplaceProfileDraft): Promise<NuiResponse<MarketplaceProfile>> {
+      const response = await nuiCall<MarketplaceProfile>('marketplace:profile-save', draft)
+      if (response.success && response.data) this.profile = response.data
+      return response
+    },
     async load(filters: Record<string, unknown> = {}): Promise<boolean> {
       this.isLoading = true
       const response = await nuiCall<ListingPage>('marketplace:list', filters)
diff --git a/frontend/src/types/marketplace.ts b/frontend/src/types/marketplace.ts
index eecc668..2e3ca87 100644
--- a/frontend/src/types/marketplace.ts
+++ b/frontend/src/types/marketplace.ts
@@ -15,6 +15,22 @@ export type MarketplacePriceType = 'fixed' | 'negotiable' | 'free'
 export type MarketplaceStatus = 'active' | 'reserved' | 'sold' | 'expired' | 'removed'
 export type MarketplaceOfferStatus = 'pending' | 'accepted' | 'rejected' | 'countered'
 
+export type MarketplaceProfile = {
+  avatar_media_id: number | null
+  avatar_url: string | null
+  bio: string
+  display_name: string
+  email: string
+  exists: boolean
+  listing_count: number
+}
+
+export type MarketplaceProfileDraft = {
+  avatarMediaId: number
+  bio: string
+  displayName: string
+}
+
 export type MarketplaceImage = {
   gradient: string
   media_id: string
@@ -46,6 +62,7 @@ export type MarketplaceListing = MarketplaceListingSummary & {
   reserved_account_id: number | null
   revision: number
   seller_active: number
+  seller_avatar: string | null
   seller_since: DatabaseDateValue
   show_phone: boolean | number
 }
diff --git a/frontend/src/views/apps/CityMarktApp.vue b/frontend/src/views/apps/CityMarktApp.vue
index c2fac3d..3cfa38d 100644
--- a/frontend/src/views/apps/CityMarktApp.vue
+++ b/frontend/src/views/apps/CityMarktApp.vue
@@ -20,6 +20,7 @@ import {
   MapPin,
   MessageCircle,
   MoreHorizontal,
+  Pencil,
   Rows3,
   Search,
   Send,
@@ -66,17 +67,15 @@ import type {
   MarketplaceMessage,
   MarketplaceOffer,
   MarketplacePriceType,
+  MarketplaceProfileDraft,
 } from '@/types/marketplace'
+import type { PhoneMedia } from '@/types/media'
 
 const glassActionColors = {
   bgIos: 'bg-ios-light-glass/75 dark:bg-ios-dark-glass/75',
   activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
   textIos: 'text-black/80 dark:text-white/80',
 }
-const yellowGlassActionColors = {
-  ...glassActionColors,
-  textIos: 'text-primary',
-}
 
 type Tab = 'discover' | 'search' | 'sell' | 'inbox' | 'profile'
 type Screen = 'main' | 'detail' | 'sell' | 'chat' | 'report'
@@ -111,6 +110,7 @@ type MediaContext = {
   photos: SelectedPhoto[]
   sellStep: number
 }
+type ProfileMediaContext = { draft: MarketplaceProfileDraft }
 
 const phone = usePhoneStore()
 const route = useRoute()
@@ -130,6 +130,11 @@ const category = ref<MarketplaceCategory | 'all'>('all')
 const district = ref('all')
 const sort = ref('newest')
 const profileMode = ref<'own' | 'favorites'>('own')
+const onboardingReady = ref(false)
+const profileEditing = ref(false)
+const profilePending = ref(false)
+const profileDraft = ref<MarketplaceProfileDraft>({ avatarMediaId: 0, bio: '', displayName: '' })
+const selectedProfilePhoto = ref<PhoneMedia | null>(null)
 const message = ref('')
 const firstMessage = ref('')
 const offerAmount = ref('')
@@ -236,6 +241,10 @@ const tabs = [
 ] as const
 
 const isAuthenticated = computed(() => account.email !== '')
+const canSaveProfile = computed(() => {
+  const nameLength = profileDraft.value.displayName.trim().length
+  return nameLength >= 2 && nameLength <= 40 && profileDraft.value.bio.trim().length <= 160
+})
 const displayItems = computed(() => {
   if (tab.value === 'profile') {
     return profileMode.value === 'own'
@@ -366,11 +375,17 @@ async function shareToLocalPages(listingId?: string): Promise<void> {
   pagesSharePendingId.value = id
   const response = await pages.shareCityMarkt(id)
   pagesSharePendingId.value = null
-  setFeedback(
-    response.success
-      ? 'Apps.localPages.cityMarktShared'
-      : `Apps.localPages.errors.${response.error ?? 'default'}`,
-  )
+  if (response.success && response.data?.id) {
+    await router.push({
+      path: '/apps/local-pages',
+      query: {
+        easyShareId: response.data.id,
+        easyShareKind: 'post',
+      },
+    })
+    return
+  }
+  setFeedback(`Apps.localPages.errors.${response.error ?? 'default'}`)
 }
 
 function shareListing(): void {
@@ -456,6 +471,9 @@ async function selectTab(next: Tab): Promise<void> {
   if (next === 'inbox' && isAuthenticated.value)
     await marketplace.loadInquiries()
   if (next === 'profile' && isAuthenticated.value) {
+    await marketplace.loadProfile()
+    syncProfileDraft()
+    profileEditing.value = !marketplace.profile?.exists
     await Promise.all([
       marketplace.loadOwn(),
       marketplace.load({ favorites: true }),
@@ -476,14 +494,76 @@ async function openListing(
   screen.value = 'detail'
 }
 
-async function toggleFavorite(): Promise<void> {
-  if (!selectedListing.value || !isAuthenticated.value) return
-  const next = !Boolean(selectedListing.value.is_favorite)
-  if (await marketplace.favorite(selectedListing.value.id, next)) {
-    selectedListing.value.is_favorite = next
+async function toggleListingFavorite(
+  item: MarketplaceListingSummary,
+): Promise<void> {
+  if (!isAuthenticated.value) return
+  const next = !Boolean(item.is_favorite)
+  if (await marketplace.favorite(item.id, next)) {
+    item.is_favorite = next
   }
 }
 
+function syncProfileDraft(): void {
+  profileDraft.value = {
+    avatarMediaId: marketplace.profile?.avatar_media_id ?? 0,
+    bio: marketplace.profile?.bio ?? '',
+    displayName: marketplace.profile?.display_name ?? account.email.split('@')[0] ?? '',
+  }
+  selectedProfilePhoto.value = null
+}
+
+function editProfile(): void {
+  syncProfileDraft()
+  profileEditing.value = true
+}
+
+function cancelProfileEdit(): void {
+  if (!marketplace.profile?.exists) return
+  syncProfileDraft()
+  profileEditing.value = false
+}
+
+function openProfileMedia(app: 'camera' | 'photos'): void {
+  messageMedia.begin(
+    'citymarkt:profile-avatar',
+    'photo',
+    '/apps/citymarkt?profileEdit=1',
+    1,
+    { draft: { ...profileDraft.value } } satisfies ProfileMediaContext,
+  )
+  void router.push(app === 'photos' ? '/apps/photos?picker=1' : '/apps/camera?picker=1')
+}
+
+function removeProfilePhoto(): void {
+  selectedProfilePhoto.value = null
+  profileDraft.value.avatarMediaId = 0
+}
+
+async function saveProfile(): Promise<void> {
+  if (!canSaveProfile.value || profilePending.value) {
+    setFeedback('Apps.citymarkt.errors.invalid_profile')
+    return
+  }
+  profilePending.value = true
+  const response = await marketplace.saveProfile({
+    avatarMediaId: selectedProfilePhoto.value?.id ?? profileDraft.value.avatarMediaId,
+    bio: profileDraft.value.bio.trim(),
+    displayName: profileDraft.value.displayName.trim(),
+  })
+  profilePending.value = false
+  if (!response.success) {
+    setFeedback(`Apps.citymarkt.errors.${response.error ?? 'default'}`)
+    return
+  }
+  syncProfileDraft()
+  profileEditing.value = false
+  tab.value = 'profile'
+  screen.value = 'main'
+  await Promise.all([marketplace.loadOwn(), marketplace.loadCounts()])
+  setFeedback('Apps.citymarkt.profileSaved')
+}
+
 function togglePhoto(id: string): void {
   const index = selectedPhotoIds.value.indexOf(id)
   if (index >= 0) {
@@ -752,6 +832,7 @@ async function blockSeller(): Promise<void> {
 
 onMounted(async () => {
   const selection = messageMedia.consumeMany<MediaContext>('citymarkt:sell')
+  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>('citymarkt:profile-avatar')
   if (selection) {
     if (selection.context) {
       draft.value = selection.context.draft
@@ -774,13 +855,37 @@ onMounted(async () => {
       })
     }
   }
+  if (profileSelection?.context) {
+    profileDraft.value = profileSelection.context.draft
+    if (profileSelection.media[0]) {
+      selectedProfilePhoto.value = profileSelection.media[0]
+      profileDraft.value.avatarMediaId = profileSelection.media[0].id
+    }
+    profileEditing.value = true
+    tab.value = 'profile'
+    screen.value = 'main'
+  }
   if (route.query.sell === '1') {
     tab.value = 'sell'
     screen.value = 'sell'
   }
-  await loadFeed()
-  if (isAuthenticated.value) await marketplace.loadCounts()
-  if (typeof route.query.listingId === 'string') {
+  if (isAuthenticated.value) {
+    await marketplace.loadProfile()
+    if (!marketplace.profile?.exists) {
+      if (!profileSelection) syncProfileDraft()
+      profileEditing.value = true
+      tab.value = 'profile'
+      screen.value = 'main'
+    } else if (!profileSelection) {
+      await loadFeed()
+    }
+    await marketplace.loadCounts()
+  } else {
+    tab.value = 'profile'
+    screen.value = 'main'
+  }
+  onboardingReady.value = true
+  if (marketplace.profile?.exists && typeof route.query.listingId === 'string') {
     await openListing({ id: route.query.listingId })
   }
 })
@@ -794,7 +899,7 @@ onMounted(async () => {
     :colors="{ bgIos: 'bg-transparent' }"
   >
     <k-navbar
-      v-if="screen === 'main'"
+      v-if="screen === 'main' && onboardingReady"
       class="citymarkt-navbar"
       :subtitle="
         phone.t(
@@ -810,7 +915,8 @@ onMounted(async () => {
       "
     />
 
-    <section v-if="screen === 'main'" class="citymarkt__content">
+    <div v-if="!onboardingReady" class="citymarkt__gate-loading">{{ phone.t('Common.loading') }}</div>
+    <section v-if="screen === 'main' && onboardingReady" class="citymarkt__content">
       <template v-if="tab === 'discover' || tab === 'search'">
         <k-searchbar
           component="form"
@@ -910,7 +1016,11 @@ onMounted(async () => {
             :key="item.id"
             class="citymarkt-listing-card"
           >
-            <button type="button" @click="openListing(item)">
+            <button
+              type="button"
+              class="citymarkt-listing-card__open"
+              @click="openListing(item)"
+            >
               <span
                 class="citymarkt__card-image"
               :class="{ 'citymarkt__card-image--empty': !item.image }"
@@ -924,7 +1034,6 @@ onMounted(async () => {
               <i v-if="item.status === 'reserved'">{{
                 phone.t('Apps.citymarkt.status.reserved')
               }}</i>
-              <Heart v-if="item.is_favorite" :size="15" fill="currentColor" />
               </span>
               <span class="citymarkt-listing-card__body">
                 <strong>{{ formatPrice(item) }}</strong>
@@ -940,6 +1049,24 @@ onMounted(async () => {
                 >
               </span>
             </button>
+            <button
+              type="button"
+              class="citymarkt-listing-card__favorite"
+              :class="{ active: Boolean(item.is_favorite) }"
+              :aria-label="
+                phone.t(
+                  item.is_favorite
+                    ? 'Apps.citymarkt.removeFavorite'
+                    : 'Apps.citymarkt.addFavorite',
+                )
+              "
+              @click.stop="toggleListingFavorite(item)"
+            >
+              <Heart
+                :size="15"
+                :fill="item.is_favorite ? 'currentColor' : 'none'"
+              />
+            </button>
           </k-glass>
         </div>
       </template>
@@ -983,13 +1110,46 @@ onMounted(async () => {
           <p>{{ phone.t('Apps.citymarkt.signInBody') }}</p>
         </div>
         <template v-else>
-          <k-glass class="citymarkt__glass-profile"
-            ><span>{{ account.email.charAt(0).toUpperCase() }}</span>
+          <section v-if="profileEditing || !marketplace.profile?.exists" class="citymarkt__profile-editor">
+            <header>
+              <div><UserRound :size="21" /></div>
+              <span>
+                <strong>{{ phone.t(marketplace.profile?.exists ? 'Apps.citymarkt.editProfile' : 'Apps.citymarkt.createProfile') }}</strong>
+                <small>{{ phone.t('Apps.citymarkt.profileIntro') }}</small>
+              </span>
+            </header>
+            <div class="citymarkt__profile-photo">
+              <span>
+                <img v-if="selectedProfilePhoto?.url || marketplace.profile?.avatar_url" :src="selectedProfilePhoto?.url ?? marketplace.profile?.avatar_url ?? ''" alt="" />
+                <template v-else>{{ profileDraft.displayName.charAt(0).toUpperCase() || account.email.charAt(0).toUpperCase() }}</template>
+              </span>
+              <div>
+                <button type="button" @click="openProfileMedia('photos')"><Images :size="15" />{{ phone.t('Apps.citymarkt.chooseGallery') }}</button>
+                <button type="button" @click="openProfileMedia('camera')"><Camera :size="15" />{{ phone.t('Apps.citymarkt.takePhoto') }}</button>
+                <button v-if="profileDraft.avatarMediaId" type="button" class="danger" @click="removeProfilePhoto">{{ phone.t('Apps.citymarkt.removeProfilePhoto') }}</button>
+              </div>
+            </div>
+            <label>{{ phone.t('Apps.citymarkt.profileEmail') }}<k-glass><input :value="account.email" readonly /></k-glass></label>
+            <label>{{ phone.t('Apps.citymarkt.displayName') }}<k-glass><input v-model="profileDraft.displayName" maxlength="40" /></k-glass></label>
+            <label>{{ phone.t('Apps.citymarkt.profileBio') }}<k-glass><textarea v-model="profileDraft.bio" maxlength="160" /></k-glass></label>
+            <div class="citymarkt__profile-actions">
+              <button v-if="marketplace.profile?.exists" type="button" @click="cancelProfileEdit">{{ phone.t('Apps.citymarkt.cancel') }}</button>
+              <button type="button" :disabled="!canSaveProfile || profilePending" @click="saveProfile">{{ phone.t('Apps.citymarkt.saveProfile') }}</button>
+            </div>
+          </section>
+          <template v-else>
+          <k-glass class="citymarkt__glass-profile">
+            <span>
+              <img v-if="marketplace.profile?.avatar_url" :src="marketplace.profile.avatar_url" alt="" />
+              <template v-else>{{ marketplace.profile?.display_name.charAt(0).toUpperCase() }}</template>
+            </span>
             <div>
-              <strong>{{ account.email.split('@')[0] }}</strong
-              ><small>{{ account.email }}</small>
-            </div></k-glass
-          >
+              <strong>{{ marketplace.profile?.display_name }}</strong>
+              <small>{{ account.email }}</small>
+              <p v-if="marketplace.profile?.bio">{{ marketplace.profile.bio }}</p>
+            </div>
+            <button type="button" :aria-label="phone.t('Apps.citymarkt.editProfile')" @click="editProfile"><Pencil :size="16" /></button>
+          </k-glass>
           <k-glass class="citymarkt__glass-segmented">
             <button
               type="button"
@@ -1041,6 +1201,7 @@ onMounted(async () => {
               ><Share2 :size="15" />{{ phone.t('Apps.localPages.cityMarktShare') }}</button
             ></k-glass>
           </div>
+          </template>
         </template>
       </template>
     </section>
@@ -1053,7 +1214,8 @@ onMounted(async () => {
         <k-fab
           component="button"
           type="button"
-          :colors="yellowGlassActionColors"
+          :colors="glassActionColors"
+          class="citymarkt-detail-action"
           :aria-label="phone.t('Common.back')"
           @click="screen = 'main'"
           ><template #icon><ArrowLeft :size="19" /></template
@@ -1064,7 +1226,8 @@ onMounted(async () => {
             component="button"
             type="button"
             :colors="glassActionColors"
-            @click="toggleFavorite"
+            class="citymarkt-detail-action"
+            @click="toggleListingFavorite(selectedListing)"
             ><template #icon
               ><Heart
                 :size="19"
@@ -1077,6 +1240,7 @@ onMounted(async () => {
             component="button"
             type="button"
             :colors="glassActionColors"
+            class="citymarkt-detail-action"
             @click="screen = 'report'"
             ><template #icon><MoreHorizontal :size="20" /></template
           ></k-fab>
@@ -1113,7 +1277,7 @@ onMounted(async () => {
         </p>
         <p class="citymarkt__description">{{ selectedListing.description }}</p>
         <div class="citymarkt__seller">
-          <span>{{ selectedListing.seller_name.charAt(0).toUpperCase() }}</span>
+          <span><img v-if="selectedListing.seller_avatar" :src="selectedListing.seller_avatar" alt="" /><template v-else>{{ selectedListing.seller_name.charAt(0).toUpperCase() }}</template></span>
           <div>
             <strong>{{ selectedListing.seller_name }}</strong
             ><small
@@ -1593,7 +1757,7 @@ onMounted(async () => {
     </section>
 
     <k-tabbar
-      v-if="screen === 'main'"
+      v-if="screen === 'main' && onboardingReady && isAuthenticated && marketplace.profile?.exists && !profileEditing"
       component="nav"
       icons
     labels
@@ -1730,8 +1894,8 @@ onMounted(async () => {
     transform 0.18s ease;
 }
 .citymarkt__categories button:hover .citymarkt__category-icon {
-  filter: brightness(1.15);
-  transform: translateY(-2px);
+  filter: brightness(1.04);
+  transform: translateY(-1px);
 }
 .citymarkt__categories button.active {
   color: #fff;
@@ -1757,6 +1921,12 @@ onMounted(async () => {
   display: flex;
   gap: 6px;
 }
+.citymarkt-detail-action {
+  box-shadow:
+    inset 0 0 0 0.5px #ffffff26,
+    inset 0 1px 0 #ffffff1a,
+    0 6px 16px #0007 !important;
+}
 .citymarkt__glass-list > .k-glass {
   width: 100%;
   flex: none;
@@ -1813,10 +1983,10 @@ onMounted(async () => {
     transform 0.18s ease;
 }
 .citymarkt-listing-card:hover {
-  filter: brightness(1.08);
-  transform: translateY(-2px);
+  filter: brightness(1.025);
+  transform: translateY(-1px);
 }
-.citymarkt-listing-card > button {
+.citymarkt-listing-card > .citymarkt-listing-card__open {
   width: 100%;
   min-width: 0;
   padding: 0;
@@ -1826,6 +1996,36 @@ onMounted(async () => {
   background: transparent;
   text-align: left;
 }
+.citymarkt-listing-card__favorite {
+  position: absolute;
+  z-index: 2;
+  top: 7px;
+  right: 7px;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid #ffffff12;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: #161714d9;
+  color: #d0d1cb;
+  box-shadow: 0 3px 10px #0005;
+  transition:
+    color 0.16s ease,
+    background 0.16s ease,
+    transform 0.16s ease;
+}
+.citymarkt-listing-card__favorite:hover {
+  background: #242520e6;
+  color: #f5f5ef;
+}
+.citymarkt-listing-card__favorite:active {
+  transform: scale(0.94);
+}
+.citymarkt-listing-card__favorite.active {
+  color: var(--yellow);
+}
 .citymarkt-listing-card .citymarkt__card-image {
   height: 108px;
   margin: 0;
@@ -1871,7 +2071,9 @@ onMounted(async () => {
 .citymarkt__grid--wide {
   grid-template-columns: minmax(0, 1fr);
 }
-.citymarkt__grid--wide .citymarkt-listing-card > button {
+.citymarkt__grid--wide
+  .citymarkt-listing-card
+  > .citymarkt-listing-card__open {
   display: grid;
   grid-template-columns: 116px minmax(0, 1fr);
 }
@@ -1957,6 +2159,36 @@ onMounted(async () => {
   color: #171816;
   font-size: 19px;
   font-weight: 900;
+  overflow: hidden;
+}
+.citymarkt__glass-profile > span img,
+.citymarkt__seller > span img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.citymarkt__seller > span {
+  overflow: hidden;
+}
+.citymarkt__glass-profile > div {
+  min-width: 0;
+  flex: 1;
+}
+.citymarkt__glass-profile > div p {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.citymarkt__glass-profile > button {
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  background: #ffffff0d;
+  color: var(--yellow);
 }
 .citymarkt__glass-profile strong,
 .citymarkt__glass-profile small {
@@ -2060,14 +2292,148 @@ onMounted(async () => {
   right: 0;
   left: 0;
 }
-.citymarkt-create-action {
+.citymarkt-create-navbar :deep(.citymarkt-create-action) {
   height: 44px;
+  flex: none;
   border-radius: 9999px;
 }
-.citymarkt-create-action--close {
-  width: 44px;
+.citymarkt__gate-loading {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 13px;
 }
-.citymarkt-create-action--next {
+.citymarkt__profile-editor {
+  padding: 14px;
+  border: 1px solid #ffffff14;
+  border-radius: 18px;
+  background: var(--panel);
+}
+.citymarkt__profile-editor > header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+.citymarkt__profile-editor > header > div {
+  width: 38px;
+  height: 38px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+}
+.citymarkt__profile-editor > header strong,
+.citymarkt__profile-editor > header small {
+  display: block;
+}
+.citymarkt__profile-editor > header small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.citymarkt__profile-photo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.citymarkt__profile-photo > span {
+  width: 68px;
+  height: 68px;
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 25px;
+  font-weight: 900;
+}
+.citymarkt__profile-photo > span img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.citymarkt__profile-photo > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.citymarkt__profile-photo button {
+  padding: 7px 9px;
+  border: 1px solid #ffffff14;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: #ffffff0a;
+  font-size: 10px;
+}
+.citymarkt__profile-photo button.danger {
+  color: #ff796f;
+}
+.citymarkt__profile-editor > label {
+  margin-top: 12px;
+  display: block;
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+.citymarkt__profile-editor > label > .k-glass {
+  margin-top: 5px;
+  border-radius: 11px;
+}
+.citymarkt__profile-editor input,
+.citymarkt__profile-editor textarea {
+  width: 100%;
+  padding: 10px;
+  border: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+}
+.citymarkt__profile-editor input[readonly] {
+  color: var(--muted);
+}
+.citymarkt__profile-editor textarea {
+  min-height: 72px;
+}
+.citymarkt__profile-actions {
+  margin-top: 14px;
+  display: flex;
+  gap: 8px;
+}
+.citymarkt__profile-actions button {
+  flex: 1;
+  padding: 10px;
+  border: 0;
+  border-radius: 11px;
+  background: #ffffff0d;
+  font-size: 11px;
+  font-weight: 800;
+}
+.citymarkt__profile-actions button:last-child {
+  background: var(--yellow);
+  color: #171816;
+}
+.citymarkt__profile-actions button:disabled {
+  opacity: .4;
+}
+:global(.citymarkt--light) .citymarkt__profile-editor {
+  border-color: #00000012;
+}
+.citymarkt-create-navbar :deep(.citymarkt-create-action--close) {
+  width: 44px;
+  min-width: 44px;
+  max-width: 44px;
+}
+.citymarkt-create-navbar :deep(.citymarkt-create-action--next) {
   min-width: 58px;
 }
 .citymarkt-create-close,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index c18345a..71fa784 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1199,7 +1199,12 @@ Locales["en"] = {
                 hoursAgo = "{count}h ago", daysAgo = "{count}d ago", photos = "photos", activeListings = "active listings",
                 signInTitle = "Sign in to iFruit", signInBody = "Use Settings to sign in before selling, saving or messaging.",
                 noMessages = "No conversations", noMessagesBody = "Messages about offers will appear here.",
-                myListings = "My listings", favorites = "Favorites", noProfileListings = "Nothing here yet",
+                myListings = "My listings", favorites = "Favorites", addFavorite = "Add to favorites", removeFavorite = "Remove from favorites", noProfileListings = "Nothing here yet",
+                createProfile = "Create your CityMarkt profile", editProfile = "Edit profile",
+                profileIntro = "Your iFruit email stays linked to this profile.", profileEmail = "iFruit email",
+                displayName = "Display name", profileBio = "About you", saveProfile = "Save profile",
+                cancel = "Cancel", profileSaved = "Your profile was saved.", chooseGallery = "Gallery",
+                takePhoto = "Camera", removeProfilePhoto = "Remove photo",
                 phone = "Phone", contactSeller = "Contact seller", messagePlaceholder = "Hi, is this still available?",
                 signInToMessage = "Sign in to your iFruit account to send a message.",
                 edit = "Edit", makeActive = "Make active", markSold = "Mark sold", remove = "Remove",
@@ -1232,6 +1237,9 @@ Locales["en"] = {
                     offer_conflict = "The offer changed. Please try again.",
                     blocked = "Messages are blocked between these accounts.", already_reported = "You already reported this listing.",
                     rate_limited = "Too many requests. Try again shortly.", not_authenticated = "Sign in to your iFruit account first.",
+                    invalid_profile = "Enter a display name between 2 and 40 characters.",
+                    invalid_profile_image = "Choose a valid photo from this phone.",
+                    profile_required = "Create your CityMarkt profile first.",
                     conflict = "The listing changed. Open it again.", request_failed = "CityMarkt is temporarily unavailable.",
                     default = "The CityMarkt request failed.",
                 },
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 84eb4d9..a0ef5fa 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -43,6 +43,8 @@ local server_callbacks = {
     "mail:delete-forever",
     "mail:empty-trash",
     "marketplace:list",
+    "marketplace:profile",
+    "marketplace:profile-save",
     "marketplace:get",
     "marketplace:list-own",
     "marketplace:create",
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 606b8ce..1cf8125 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -591,6 +591,29 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_marketplace_profiles",
+        columns = {
+            { name = "account_id", type = "BIGINT UNSIGNED NOT NULL" },
+            { name = "display_name", type = "VARCHAR(40) NOT NULL" },
+            { name = "bio", type = "VARCHAR(160) NOT NULL DEFAULT ''" },
+            { name = "avatar_media_id", type = "BIGINT UNSIGNED NULL" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            {
+                name = "updated_at",
+                type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP",
+            },
+        },
+        primaryKey = "account_id",
+        indexes = {
+            { name = "idx_sky_phone_marketplace_profile_avatar", columns = "(`avatar_media_id`)" },
+        },
+        foreignKeys = {
+            { column = "account_id", references = "`sky_phone_accounts` (`id`) ON DELETE CASCADE" },
+            { column = "avatar_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
     {
         name = "sky_phone_marketplace_listings",
         columns = {
diff --git a/sky_phone/source/server/marketplace.lua b/sky_phone/source/server/marketplace.lua
index 6783c49..24b110d 100644
--- a/sky_phone/source/server/marketplace.lua
+++ b/sky_phone/source/server/marketplace.lua
@@ -75,6 +75,84 @@ local function require_account(source)
     return SkyPhone.RequireAccount(source)
 end
 
+local function default_display_name(account)
+    return account.email:match("^([^@]+)") or account.email
+end
+
+local function profile_dto(account)
+    local rows = Bridge.Database.Query([[
+        SELECT profile.`display_name`, profile.`bio`, profile.`avatar_media_id`,
+            avatar.`url` AS `avatar_url`,
+            (SELECT COUNT(*) FROM `sky_phone_marketplace_listings` listing
+                WHERE listing.`seller_account_id` = ?) AS `listing_count`
+        FROM `sky_phone_accounts` account
+        LEFT JOIN `sky_phone_marketplace_profiles` profile ON profile.`account_id` = account.`id`
+        LEFT JOIN `sky_phone_media` avatar ON avatar.`id` = profile.`avatar_media_id`
+        WHERE account.`id` = ?
+        LIMIT 1
+    ]], { account.id, account.id })
+    local row = rows[1]
+    if not row then
+        error(("[sky_phone] Could not load CityMarkt profile account %s."):format(account.id))
+    end
+    return {
+        avatar_media_id = tonumber(row.avatar_media_id),
+        avatar_url = row.avatar_url,
+        bio = row.bio or "",
+        display_name = row.display_name or default_display_name(account),
+        email = account.email,
+        exists = row.display_name ~= nil,
+        listing_count = tonumber(row.listing_count) or 0,
+    }
+end
+
+local function require_profile(account_id)
+    local rows = Bridge.Database.Query([[
+        SELECT `account_id` FROM `sky_phone_marketplace_profiles`
+        WHERE `account_id` = ? LIMIT 1
+    ]], { account_id })
+    if not rows[1] then
+        return { success = false, error = "profile_required" }
+    end
+    return nil
+end
+
+Bridge.Callbacks.Register("sky_phone:marketplace:profile", function(source)
+    local account, error_response = require_account(source)
+    if not account then return error_response end
+    return { success = true, data = profile_dto(account) }
+end)
+
+Bridge.Callbacks.Register("sky_phone:marketplace:profile-save", function(source, data)
+    local account, error_response = require_account(source)
+    if not account then return error_response end
+    if not SkyPhone.AllowOperation(source, "marketplace:profile-save", 12, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    if type(data) ~= "table" or type(data.displayName) ~= "string" or type(data.bio) ~= "string" then
+        return { success = false, error = "invalid_profile" }
+    end
+    local display_name = trim(data.displayName)
+    local bio = trim(data.bio)
+    local avatar_media_id = tonumber(data.avatarMediaId)
+    if not valid_text(display_name, 2, 40) or not valid_text(bio, 0, 160)
+        or not avatar_media_id or avatar_media_id < 0 or avatar_media_id ~= math.floor(avatar_media_id)
+    then
+        return { success = false, error = "invalid_profile" }
+    end
+    if avatar_media_id > 0 and not SkyPhoneMedia.ResolveOwnedMedia(source, tostring(avatar_media_id), "photo") then
+        Bridge.Debug("warn", "[sky_phone] Rejected unowned CityMarkt profile image from source %s.", tostring(source))
+        return { success = false, error = "invalid_profile_image" }
+    end
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_profiles` (`account_id`, `display_name`, `bio`, `avatar_media_id`)
+        VALUES (?, ?, ?, NULLIF(?, 0))
+        ON DUPLICATE KEY UPDATE `display_name` = VALUES(`display_name`), `bio` = VALUES(`bio`),
+            `avatar_media_id` = VALUES(`avatar_media_id`)
+    ]], { account.id, display_name, bio, avatar_media_id })
+    return { success = true, data = profile_dto(account) }
+end)
+
 local function expire_listings()
     Bridge.Database.Query([[
         UPDATE `sky_phone_marketplace_listings`
@@ -186,13 +264,14 @@ local function listing_summary_query(account_id, where_clause, order_clause, val
     return Bridge.Database.Query(([[
         SELECT l.`id`, l.`title`, l.`category`, l.`item_condition`, l.`price_type`, l.`price`,
             l.`district`, l.`status`, l.`created_at`, l.`updated_at`, l.`expires_at`,
-            SUBSTRING_INDEX(a.`email`, '@', 1) AS `seller_name`,
+            COALESCE(profile.`display_name`, SUBSTRING_INDEX(a.`email`, '@', 1)) AS `seller_name`,
             (SELECT i.`gradient` FROM `sky_phone_marketplace_images` i
                 WHERE i.`listing_id` = l.`id` ORDER BY i.`sort_order` LIMIT 1) AS `image`,
             EXISTS(SELECT 1 FROM `sky_phone_marketplace_favorites` f
                 WHERE f.`listing_id` = l.`id` AND f.`account_id` = ?) AS `is_favorite`
         FROM `sky_phone_marketplace_listings` l
         JOIN `sky_phone_accounts` a ON a.`id` = l.`seller_account_id`
+        LEFT JOIN `sky_phone_marketplace_profiles` profile ON profile.`account_id` = l.`seller_account_id`
         WHERE %s
         ORDER BY %s
         LIMIT ? OFFSET ?
@@ -319,13 +398,16 @@ Bridge.Callbacks.Register("sky_phone:marketplace:get", function(source, data)
     expire_listings()
 
     local rows = Bridge.Database.Query([[
-        SELECT l.*, SUBSTRING_INDEX(a.`email`, '@', 1) AS `seller_name`, a.`created_at` AS `seller_since`,
+        SELECT l.*, COALESCE(profile.`display_name`, SUBSTRING_INDEX(a.`email`, '@', 1)) AS `seller_name`,
+            profile_avatar.`url` AS `seller_avatar`, a.`created_at` AS `seller_since`,
             (SELECT COUNT(*) FROM `sky_phone_marketplace_listings` own
                 WHERE own.`seller_account_id` = l.`seller_account_id` AND own.`status` IN ('active', 'reserved')) AS `seller_active`,
             EXISTS(SELECT 1 FROM `sky_phone_marketplace_favorites` f
                 WHERE f.`listing_id` = l.`id` AND f.`account_id` = ?) AS `is_favorite`
         FROM `sky_phone_marketplace_listings` l
         JOIN `sky_phone_accounts` a ON a.`id` = l.`seller_account_id`
+        LEFT JOIN `sky_phone_marketplace_profiles` profile ON profile.`account_id` = l.`seller_account_id`
+        LEFT JOIN `sky_phone_media` profile_avatar ON profile_avatar.`id` = profile.`avatar_media_id`
         WHERE l.`id` = ?
         LIMIT 1
     ]], { account_id or 0, id })
@@ -375,6 +457,8 @@ end)
 Bridge.Callbacks.Register("sky_phone:marketplace:create", function(source, data)
     local account, error_response = require_account(source)
     if not account then return error_response end
+    local profile_error = require_profile(account.id)
+    if profile_error then return profile_error end
     if not SkyPhone.AllowOperation(source, "marketplace:create", 5, 60) then
         return { success = false, error = "rate_limited" }
     end
@@ -566,7 +650,7 @@ Bridge.Callbacks.Register("sky_phone:marketplace:list-inquiries", function(sourc
             l.`title`, l.`price`, l.`price_type`, l.`status`,
             (SELECT image.`gradient` FROM `sky_phone_marketplace_images` image
                 WHERE image.`listing_id` = l.`id` ORDER BY image.`sort_order` LIMIT 1) AS `image`,
-            SUBSTRING_INDEX(other_account.`email`, '@', 1) AS `other_name`,
+            COALESCE(other_profile.`display_name`, SUBSTRING_INDEX(other_account.`email`, '@', 1)) AS `other_name`,
             (SELECT message.`body` FROM `sky_phone_marketplace_messages` message
                 WHERE message.`inquiry_id` = q.`id` ORDER BY message.`id` DESC LIMIT 1) AS `last_message`,
             ((SELECT COUNT(*) FROM `sky_phone_marketplace_messages` unread
@@ -582,6 +666,7 @@ Bridge.Callbacks.Register("sky_phone:marketplace:list-inquiries", function(sourc
         JOIN `sky_phone_marketplace_listings` l ON l.`id` = q.`listing_id`
         JOIN `sky_phone_accounts` other_account ON other_account.`id` =
             CASE WHEN q.`seller_account_id` = ? THEN q.`buyer_account_id` ELSE q.`seller_account_id` END
+        LEFT JOIN `sky_phone_marketplace_profiles` other_profile ON other_profile.`account_id` = other_account.`id`
         WHERE q.`seller_account_id` = ? OR q.`buyer_account_id` = ?
         ORDER BY q.`updated_at` DESC
         LIMIT 100
@@ -598,12 +683,14 @@ Bridge.Callbacks.Register("sky_phone:marketplace:get-inquiry", function(source,
     end
     local inquiries = Bridge.Database.Query([[
         SELECT q.*, l.`title`, l.`price`, l.`price_type`, l.`status`, l.`reserved_account_id`,
-            SUBSTRING_INDEX(seller.`email`, '@', 1) AS `seller_name`,
-            SUBSTRING_INDEX(buyer.`email`, '@', 1) AS `buyer_name`
+            COALESCE(seller_profile.`display_name`, SUBSTRING_INDEX(seller.`email`, '@', 1)) AS `seller_name`,
+            COALESCE(buyer_profile.`display_name`, SUBSTRING_INDEX(buyer.`email`, '@', 1)) AS `buyer_name`
         FROM `sky_phone_marketplace_inquiries` q
         JOIN `sky_phone_marketplace_listings` l ON l.`id` = q.`listing_id`
         JOIN `sky_phone_accounts` seller ON seller.`id` = q.`seller_account_id`
         JOIN `sky_phone_accounts` buyer ON buyer.`id` = q.`buyer_account_id`
+        LEFT JOIN `sky_phone_marketplace_profiles` seller_profile ON seller_profile.`account_id` = seller.`id`
+        LEFT JOIN `sky_phone_marketplace_profiles` buyer_profile ON buyer_profile.`account_id` = buyer.`id`
         WHERE q.`id` = ? AND (q.`seller_account_id` = ? OR q.`buyer_account_id` = ?)
         LIMIT 1
     ]], { data.id, account.id, account.id })

From 48c7f1a551cace8db8f62e82df0cf110deea5a3f Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 18:49:32 +0200
Subject: [PATCH 35/63] FIX - complete CityMarkt sharing and browser flows

---
 frontend/src/stores/phone.ts              |  11 ++
 frontend/src/views/apps/CityMarktApp.vue  | 178 ++++++++++++++++------
 frontend/src/views/apps/LocalPagesApp.vue | 149 +++++++++++++++---
 frontend/testserver/index.cjs             | 109 ++++++++++++-
 sky_phone/config/locales/en.lua           |   4 +
 5 files changed, 371 insertions(+), 80 deletions(-)

diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 18493bc..79a9fc9 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -2739,6 +2739,17 @@ const defaultLocales: LocaleTree = {
       cityMarktShare: 'Share to Local Pages',
       cityMarktShared: 'Shared to Local Pages.',
       cityMarktShareHint: 'One CityMarkt share per day',
+      cityMarktAlreadyShared: 'Already published',
+      cityMarktOpenSharedHint: 'Open the Local Pages post',
+      cityMarktAppMissing: 'Local Pages is not installed',
+      cityMarktInstallHint: 'Install Local Pages to share this listing',
+      cityMarktAccountMissing: 'Local Pages profile required',
+      cityMarktAccountHint: 'Create a Local Pages profile before sharing',
+      cityMarktComposeTitle: 'Share CityMarkt listing',
+      cityMarktComposeNavTitle: 'Share listing',
+      cityMarktComposeHint:
+        'Review the listing and publish it when you are ready.',
+      cityMarktPhotosHint: 'The CityMarkt listing photos will be included.',
       authErrors: {
         invalid_email: 'Enter a valid 3–32 character iFruit address.',
         invalid_password: 'Use a password between 6 and 64 characters.',
diff --git a/frontend/src/views/apps/CityMarktApp.vue b/frontend/src/views/apps/CityMarktApp.vue
index 3cfa38d..6a4c321 100644
--- a/frontend/src/views/apps/CityMarktApp.vue
+++ b/frontend/src/views/apps/CityMarktApp.vue
@@ -6,6 +6,7 @@ import {
   Camera,
   CarFront,
   ChevronRight,
+  CircleCheck,
   CirclePlus,
   Gift,
   Hammer,
@@ -34,7 +35,6 @@ import {
 import {
   kBadge,
   kButton,
-  kFab,
   kGlass,
   kIcon,
   kNavbar,
@@ -51,6 +51,7 @@ import CityMarktSelect from '@/components/citymarkt/CityMarktSelect.vue'
 import CityMarktGallery from '@/components/citymarkt/CityMarktGallery.vue'
 import CityMarktOfferCard from '@/components/citymarkt/CityMarktOfferCard.vue'
 import { useAccountStore } from '@/stores/account'
+import { useAppStoreStore } from '@/stores/app-store'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { useMarketplaceStore } from '@/stores/marketplace'
 import { useMessageMediaStore } from '@/stores/messageMedia'
@@ -71,12 +72,6 @@ import type {
 } from '@/types/marketplace'
 import type { PhoneMedia } from '@/types/media'
 
-const glassActionColors = {
-  bgIos: 'bg-ios-light-glass/75 dark:bg-ios-dark-glass/75',
-  activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
-  textIos: 'text-black/80 dark:text-white/80',
-}
-
 type Tab = 'discover' | 'search' | 'sell' | 'inbox' | 'profile'
 type Screen = 'main' | 'detail' | 'sell' | 'chat' | 'report'
 type ChatTimelineItem =
@@ -113,9 +108,14 @@ type MediaContext = {
 type ProfileMediaContext = { draft: MarketplaceProfileDraft }
 
 const phone = usePhoneStore()
+const detailActionColors = computed(() => ({
+  bgIos: phone.isDarkMode ? 'bg-ios-dark-glass' : 'bg-ios-light-glass',
+  shadowIos: phone.isDarkMode ? 'shadow-ios-dark-glass' : 'shadow-ios-light-glass',
+}))
 const route = useRoute()
 const router = useRouter()
 const account = useAccountStore()
+const appStore = useAppStoreStore()
 const easyShare = useEasyShareStore()
 const marketplace = useMarketplaceStore()
 const messageMedia = useMessageMediaStore()
@@ -141,7 +141,6 @@ const offerAmount = ref('')
 const offerPanelOpen = ref(false)
 const offerSubmitting = ref(false)
 const feedback = ref('')
-const pagesSharePendingId = ref<string | null>(null)
 const sellStep = ref(1)
 const submitting = ref(false)
 const selectedPhotoIds = ref<string[]>([])
@@ -241,6 +240,11 @@ const tabs = [
 ] as const
 
 const isAuthenticated = computed(() => account.email !== '')
+const localPagesInstalled = computed(
+  () =>
+    appStore.isInstalled('local-pages') &&
+    !appStore.homeLayout.hidden.includes('local-pages'),
+)
 const canSaveProfile = computed(() => {
   const nameLength = profileDraft.value.displayName.trim().length
   return nameLength >= 2 && nameLength <= 40 && profileDraft.value.bio.trim().length <= 160
@@ -371,21 +375,65 @@ function setFeedback(key: string): void {
 
 async function shareToLocalPages(listingId?: string): Promise<void> {
   const id = listingId ?? selectedListing.value?.id
-  if (!id || pagesSharePendingId.value) return
-  pagesSharePendingId.value = id
-  const response = await pages.shareCityMarkt(id)
-  pagesSharePendingId.value = null
-  if (response.success && response.data?.id) {
+  if (!id) return
+  if (!localPagesInstalled.value) {
+    setFeedback('Apps.localPages.cityMarktAppMissing')
+    return
+  }
+  if (!pages.profile?.exists) {
+    setFeedback('Apps.localPages.cityMarktAccountMissing')
+    return
+  }
+  const existingPost = pages.ownItems.find(
+    (item) => item.citymarkt_listing_id === id,
+  )
+  if (existingPost) {
     await router.push({
       path: '/apps/local-pages',
       query: {
-        easyShareId: response.data.id,
+        easyShareId: existingPost.id,
         easyShareKind: 'post',
       },
     })
     return
   }
-  setFeedback(`Apps.localPages.errors.${response.error ?? 'default'}`)
+  await router.push({
+    path: '/apps/local-pages',
+    query: {
+      cityMarktListingId: id,
+      compose: '1',
+    },
+  })
+}
+
+function localPagesShareLabel(listingId: string): string {
+  if (!localPagesInstalled.value)
+    return phone.t('Apps.localPages.cityMarktAppMissing')
+  if (!pages.profile?.exists)
+    return phone.t('Apps.localPages.cityMarktAccountMissing')
+  return phone.t(
+    hasLocalPagesPost(listingId)
+      ? 'Apps.localPages.cityMarktAlreadyShared'
+      : 'Apps.localPages.cityMarktShare',
+  )
+}
+
+function localPagesShareHint(listingId: string): string {
+  if (!localPagesInstalled.value)
+    return phone.t('Apps.localPages.cityMarktInstallHint')
+  if (!pages.profile?.exists)
+    return phone.t('Apps.localPages.cityMarktAccountHint')
+  return phone.t(
+    hasLocalPagesPost(listingId)
+      ? 'Apps.localPages.cityMarktOpenSharedHint'
+      : 'Apps.localPages.cityMarktShareHint',
+  )
+}
+
+function hasLocalPagesPost(listingId: string): boolean {
+  return pages.ownItems.some(
+    (item) => item.citymarkt_listing_id === listingId,
+  )
 }
 
 function shareListing(): void {
@@ -870,7 +918,10 @@ onMounted(async () => {
     screen.value = 'sell'
   }
   if (isAuthenticated.value) {
-    await marketplace.loadProfile()
+    await Promise.all([
+      marketplace.loadProfile(),
+      localPagesInstalled.value ? pages.loadProfile() : Promise.resolve(false),
+    ])
     if (!marketplace.profile?.exists) {
       if (!profileSelection) syncProfileDraft()
       profileEditing.value = true
@@ -1196,9 +1247,11 @@ onMounted(async () => {
                 v-if="profileMode === 'own' && (item.status === 'active' || item.status === 'reserved')"
                 class="citymarkt-profile-listing__share"
                 type="button"
-                :disabled="pagesSharePendingId !== null"
                 @click="shareToLocalPages(item.id)"
-              ><Share2 :size="15" />{{ phone.t('Apps.localPages.cityMarktShare') }}</button
+              ><CircleCheck
+                v-if="hasLocalPagesPost(item.id)"
+                :size="15"
+              /><Share2 v-else :size="15" />{{ localPagesShareLabel(item.id) }}</button
             ></k-glass>
           </div>
           </template>
@@ -1211,39 +1264,40 @@ onMounted(async () => {
       class="citymarkt__detail"
     >
       <div class="citymarkt__glass-actions">
-        <k-fab
+        <k-glass
           component="button"
           type="button"
-          :colors="glassActionColors"
           class="citymarkt-detail-action"
+          :colors="detailActionColors"
           :aria-label="phone.t('Common.back')"
           @click="screen = 'main'"
-          ><template #icon><ArrowLeft :size="19" /></template
-        ></k-fab>
+          ><ArrowLeft :size="19" /></k-glass
+        >
         <div>
-          <k-fab
+          <k-glass
             v-if="!selectedListing.is_owner"
             component="button"
             type="button"
-            :colors="glassActionColors"
             class="citymarkt-detail-action"
+            :colors="detailActionColors"
+            :class="{ active: selectedListing.is_favorite }"
+            :aria-label="phone.t(selectedListing.is_favorite ? 'Apps.citymarkt.removeFavorite' : 'Apps.citymarkt.addFavorite')"
             @click="toggleListingFavorite(selectedListing)"
-            ><template #icon
-              ><Heart
-                :size="19"
-                :fill="
-                  selectedListing.is_favorite ? 'currentColor' : 'none'
-                " /></template
-          ></k-fab>
-          <k-fab
+            ><Heart
+              :size="19"
+              :fill="selectedListing.is_favorite ? 'currentColor' : 'none'"
+            /></k-glass
+          >
+          <k-glass
             v-if="!selectedListing.is_owner"
             component="button"
             type="button"
-            :colors="glassActionColors"
             class="citymarkt-detail-action"
+            :colors="detailActionColors"
+            :aria-label="phone.t('Apps.citymarkt.reportListing')"
             @click="screen = 'report'"
-            ><template #icon><MoreHorizontal :size="20" /></template
-          ></k-fab>
+            ><MoreHorizontal :size="20" /></k-glass
+          >
         </div>
       </div>
       <CityMarktGallery
@@ -1306,14 +1360,14 @@ onMounted(async () => {
             "
             class="citymarkt__pages-share"
             type="button"
-            :disabled="pagesSharePendingId !== null"
             @click="shareToLocalPages()"
           >
-            <Share2 :size="17" /><span
-              ><strong>{{ phone.t('Apps.localPages.cityMarktShare') }}</strong
-              ><small>{{
-                phone.t('Apps.localPages.cityMarktShareHint')
-              }}</small></span
+            <CircleCheck
+              v-if="hasLocalPagesPost(selectedListing.id)"
+              :size="17"
+            /><Share2 v-else :size="17" /><span
+              ><strong>{{ localPagesShareLabel(selectedListing.id) }}</strong
+              ><small>{{ localPagesShareHint(selectedListing.id) }}</small></span
             >
           </button>
           <div class="citymarkt__owner-actions">
@@ -1922,10 +1976,17 @@ onMounted(async () => {
   gap: 6px;
 }
 .citymarkt-detail-action {
-  box-shadow:
-    inset 0 0 0 0.5px #ffffff26,
-    inset 0 1px 0 #ffffff1a,
-    0 6px 16px #0007 !important;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+.citymarkt-detail-action.active {
+  color: var(--yellow);
 }
 .citymarkt__glass-list > .k-glass {
   width: 100%;
@@ -1975,8 +2036,10 @@ onMounted(async () => {
   color: inherit;
 }
 .citymarkt-listing-card {
+  isolation: isolate;
   min-width: 0;
   border-radius: 16px;
+  display: grid !important;
   overflow: hidden;
   transition:
     filter 0.18s ease,
@@ -1987,6 +2050,7 @@ onMounted(async () => {
   transform: translateY(-1px);
 }
 .citymarkt-listing-card > .citymarkt-listing-card__open {
+  grid-area: 1 / 1;
   width: 100%;
   min-width: 0;
   padding: 0;
@@ -1997,25 +2061,35 @@ onMounted(async () => {
   text-align: left;
 }
 .citymarkt-listing-card__favorite {
-  position: absolute;
+  position: relative;
   z-index: 2;
-  top: 7px;
-  right: 7px;
+  grid-area: 1 / 1;
+  align-self: start;
+  justify-self: end;
   width: 30px;
   height: 30px;
+  margin: 7px;
   padding: 0;
   border: 1px solid #ffffff12;
   border-radius: 50%;
-  display: grid;
+  display: grid !important;
   place-items: center;
   background: #161714d9;
-  color: #d0d1cb;
+  color: #f8f8f4;
   box-shadow: 0 3px 10px #0005;
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
   transition:
     color 0.16s ease,
     background 0.16s ease,
     transform 0.16s ease;
 }
+.citymarkt-listing-card__favorite > svg {
+  display: block !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
 .citymarkt-listing-card__favorite:hover {
   background: #242520e6;
   color: #f5f5ef;
@@ -2081,6 +2155,10 @@ onMounted(async () => {
   width: 116px;
   height: 116px;
 }
+.citymarkt__grid--wide .citymarkt-listing-card__favorite {
+  justify-self: start;
+  margin-left: 79px;
+}
 .citymarkt__grid--wide .citymarkt-listing-card__body {
   min-height: 116px;
   padding: 12px;
diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index 56d2a19..3557f48 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -40,8 +40,10 @@ import CityMarktGallery from '@/components/citymarkt/CityMarktGallery.vue'
 import { useAccountStore } from '@/stores/account'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { useEasyShareStore } from '@/stores/easyshare'
+import { useMarketplaceStore } from '@/stores/marketplace'
 import { usePagesStore } from '@/stores/pages'
 import { usePhoneStore } from '@/stores/phone'
+import type { MarketplaceListing } from '@/types/marketplace'
 import type { PagesCategory, PagesPost, PagesProfileDraft } from '@/types/pages'
 import type { PhoneMedia } from '@/types/media'
 import {
@@ -68,6 +70,7 @@ const phone = usePhoneStore()
 const account = useAccountStore()
 const messageMedia = useMessageMediaStore()
 const easyShare = useEasyShareStore()
+const marketplace = useMarketplaceStore()
 const pages = usePagesStore()
 const route = useRoute()
 const router = useRouter()
@@ -91,6 +94,8 @@ const profilePending = ref(false)
 const profileDraft = ref<PagesProfileDraft>({ avatarMediaId: 0, bio: '', handle: '' })
 const selectedProfilePhoto = ref<PhoneMedia | null>(null)
 const pickedPhotos = ref<SelectedPhoto[]>([])
+const cityMarktListing = ref<MarketplaceListing | null>(null)
+const cityMarktListingId = ref<string | null>(null)
 const draft = ref<ComposeDraft>({
   body: '',
   category: 'recommendation' as Exclude<PagesCategory, 'citymarkt'>,
@@ -274,7 +279,14 @@ function syncProfileDraft(): void {
 
 function ensureBrowserProfile(): void {
   const onboardingScenario = new URLSearchParams(window.location.search).get('testScenario')
-  if (!import.meta.env.DEV || onboardingScenario === 'local-pages-onboarding' || pages.profile) return
+  if (
+    !import.meta.env.DEV ||
+    ['local-pages-onboarding', 'citymarkt-local-pages-account-missing'].includes(
+      onboardingScenario ?? '',
+    ) ||
+    pages.profile
+  )
+    return
   const handle = account.email.split('@')[0].toLowerCase()
   pages.profile = {
     avatar_media_id: null,
@@ -387,24 +399,45 @@ async function publish(): Promise<void> {
     showFeedback('Apps.localPages.errors.invalid_post')
     return
   }
-  const response = await pages.create({
-    body: draft.value.body.trim(),
-    category: draft.value.category,
-    district: draft.value.district,
-    images: draft.value.images.map((id) => ({ id })),
-    title: draft.value.title.trim(),
-  })
+  const response = cityMarktListingId.value
+    ? await pages.shareCityMarkt(cityMarktListingId.value)
+    : await pages.create({
+        body: draft.value.body.trim(),
+        category: draft.value.category,
+        district: draft.value.district,
+        images: draft.value.images.map((id) => ({ id })),
+        title: draft.value.title.trim(),
+      })
   if (!response.success) {
     showFeedback(`Apps.localPages.errors.${response.error ?? 'default'}`)
     return
   }
   draft.value = { body: '', category: 'recommendation', district: 'los_santos', images: [], title: '' }
   pickedPhotos.value = []
+  cityMarktListing.value = null
+  cityMarktListingId.value = null
   tab.value = 'feed'
   screen.value = 'main'
+  await router.replace('/apps/local-pages')
+  await Promise.all([pages.load(), pages.loadProfile()])
   showFeedback('Apps.localPages.published')
 }
 
+function closeCompose(): void {
+  draft.value = {
+    body: '',
+    category: 'recommendation',
+    district: 'los_santos',
+    images: [],
+    title: '',
+  }
+  pickedPhotos.value = []
+  cityMarktListing.value = null
+  cityMarktListingId.value = null
+  screen.value = 'main'
+  void router.replace('/apps/local-pages')
+}
+
 async function react(kind: 'like' | 'save'): Promise<void> {
   if (!selected.value || !isAuthenticated.value) {
     showFeedback('Apps.localPages.errors.not_authenticated')
@@ -511,7 +544,34 @@ onMounted(async () => {
     screen.value = 'main'
   }
   onboardingReady.value = true
-  if (route.query.compose === '1' && pages.profile?.exists) screen.value = 'compose'
+  if (route.query.compose === '1' && pages.profile?.exists) {
+    const listingId = String(route.query.cityMarktListingId ?? '')
+    if (listingId) {
+      const response = await marketplace.get(listingId)
+      if (
+        response.success &&
+        response.data?.is_owner &&
+        ['active', 'reserved'].includes(response.data.status)
+      ) {
+        cityMarktListing.value = response.data
+        cityMarktListingId.value = response.data.id
+        draft.value = {
+          body: response.data.description,
+          category: 'recommendation',
+          district: response.data.district ?? 'los_santos',
+          images: response.data.images.map((image) => image.media_id),
+          title: response.data.title,
+        }
+        pickedPhotos.value = response.data.images.map((image) => ({
+          background: image.gradient,
+          id: image.media_id,
+        }))
+      } else {
+        showFeedback('Apps.localPages.errors.citymarkt_not_found')
+      }
+    }
+    if (!listingId || cityMarktListingId.value) screen.value = 'compose'
+  }
   const easyShareId = String(route.query.easyShareId ?? '')
   if (pages.profile?.exists && easyShareId && route.query.easyShareKind === 'post') {
     const response = await pages.get(easyShareId)
@@ -752,18 +812,22 @@ onMounted(async () => {
       </k-glass>
     </section>
 
-    <section v-else class="pages__compose">
+    <section
+      v-else
+      class="pages__compose"
+      :class="{ 'pages__compose--citymarkt': cityMarktListing }"
+    >
       <k-navbar
         class="pages-create-navbar"
         center-title
-        left-class="pages-create-action pages-create-action--close !w-11 !min-w-11 !max-w-11 !h-11 !p-0 !rounded-full"
+        left-class="pages-create-action pages-create-action--close !min-w-[58px] !h-11 !p-0 !rounded-full"
         right-class="pages-create-action pages-create-action--publish !min-w-[58px] !h-11 !p-0 !rounded-full"
-        :title="phone.t('Apps.localPages.shareWithCity')"
-        :subtitle="phone.t('Apps.localPages.newPost')"
+        :title="phone.t(cityMarktListing ? 'Apps.localPages.cityMarktComposeNavTitle' : 'Apps.localPages.shareWithCity')"
+        :subtitle="phone.t(cityMarktListing ? 'Apps.localPages.categories.citymarkt' : 'Apps.localPages.newPost')"
       >
         <template #left>
-          <button class="pages-create-close" type="button" :aria-label="phone.t('Common.close')" @click="screen = 'main'">
-            <X :size="20" />
+          <button class="pages-create-close" type="button" :aria-label="phone.t('Common.close')" @click="closeCompose">
+            {{ phone.t('Common.close') }}
           </button>
         </template>
         <template #right>
@@ -773,13 +837,20 @@ onMounted(async () => {
         </template>
       </k-navbar>
       <div class="pages__compose-scroll">
+        <k-glass v-if="cityMarktListing" class="pages__citymarkt-source">
+          <Store :size="19" />
+          <span
+            ><strong>{{ phone.t('Apps.localPages.cityMarktComposeTitle') }}</strong
+            ><small>{{ phone.t('Apps.localPages.cityMarktComposeHint') }}</small></span
+          >
+        </k-glass>
         <label>{{ phone.t('Apps.localPages.title') }} <span :class="{ valid: draft.title.trim().length >= 5 }">{{ draft.title.trim().length }}/80 · {{ phone.t('Apps.citymarkt.minimumCharacters', { minimum: '5' }) }}</span><k-glass class="pages__field-glass"><input v-model="draft.title" maxlength="80" :placeholder="phone.t('Apps.localPages.titlePlaceholder')" /></k-glass></label>
         <label>{{ phone.t('Apps.localPages.body') }} <span :class="{ valid: draft.body.trim().length >= 10 }">{{ draft.body.trim().length }}/1500 · {{ phone.t('Apps.citymarkt.minimumCharacters', { minimum: '10' }) }}</span><k-glass class="pages__field-glass pages__field-glass--textarea"><textarea v-model="draft.body" maxlength="1500" :placeholder="phone.t('Apps.localPages.bodyPlaceholder')" /></k-glass></label>
         <div class="pages__form-row"><label>{{ phone.t('Apps.localPages.category') }}<CityMarktSelect :model-value="draft.category" :options="composeCategoryOptions" @change="(value) => draft.category = value as typeof draft.category" /></label><label>{{ phone.t('Apps.localPages.location') }}<CityMarktSelect :model-value="draft.district" :options="districtOptions" @change="(value) => draft.district = value" /></label></div>
         <section class="pages__photos">
           <ImagePlus :size="30" />
           <h2>{{ phone.t('Apps.citymarkt.addPhotos') }}</h2>
-          <p>{{ phone.t('Apps.citymarkt.addPhotosBody') }}</p>
+          <p>{{ phone.t(cityMarktListing ? 'Apps.localPages.cityMarktPhotosHint' : 'Apps.citymarkt.addPhotosBody') }}</p>
           <div class="pages__photo-actions">
             <k-glass><button type="button" @click="openMediaApp('photos')">
               <span><Images :size="20" /></span>
@@ -981,9 +1052,7 @@ onMounted(async () => {
   height: 44px;
   border-radius: 9999px;
 }
-.pages-create-action--close {
-  width: 44px;
-}
+.pages-create-action--close,
 .pages-create-action--publish {
   min-width: 58px;
 }
@@ -997,10 +1066,7 @@ onMounted(async () => {
   background: transparent;
   color: inherit;
 }
-.pages-create-close {
-  display: grid;
-  place-items: center;
-}
+.pages-create-close,
 .pages-create-publish {
   min-width: 58px;
   padding: 0 13px;
@@ -1021,6 +1087,43 @@ onMounted(async () => {
   height: auto;
   padding-bottom: 35px;
 }
+.pages__citymarkt-source {
+  margin-bottom: 14px;
+  padding: 11px 12px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  border-radius: 13px;
+  color: var(--yellow);
+}
+.pages__citymarkt-source span {
+  min-width: 0;
+}
+.pages__citymarkt-source strong,
+.pages__citymarkt-source small {
+  display: block;
+}
+.pages__citymarkt-source strong {
+  font-size: 12px;
+}
+.pages__citymarkt-source small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.35;
+}
+.pages__compose--citymarkt .pages__compose-scroll > label input,
+.pages__compose--citymarkt .pages__compose-scroll > label textarea {
+  pointer-events: none;
+}
+.pages__compose--citymarkt .pages__form-row {
+  grid-template-columns: minmax(0, 1fr);
+}
+.pages__compose--citymarkt .pages__form-row > label:first-child,
+.pages__compose--citymarkt .pages__photo-actions,
+.pages__compose--citymarkt .pages__selected-strip {
+  display: none;
+}
 .pages__field-glass {
   min-height: 44px;
   margin-top: 5px;
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 14c3e5b..34f8cf6 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -1878,6 +1878,17 @@ const marketplaceListings = [
     ],
   },
 ]
+let marketplaceProfile = {
+  avatar_media_id: 1,
+  avatar_url: 'https://picsum.photos/seed/citymarkt-demo-avatar/240/240',
+  bio: 'Fair prices, quick replies, and meetups anywhere in Los Santos.',
+  display_name: 'Skyline Deals',
+  email: 'demo@ifruit.com',
+  exists: true,
+  listing_count: marketplaceListings.filter(
+    (listing) => listing.seller_account_id === 1,
+  ).length,
+}
 let linkedAccount = {
   devices: accountDevices,
   email: 'demo@ifruit.com',
@@ -2454,6 +2465,32 @@ const pagesPosts = [
     images: [],
   },
 ]
+const cityMarktSharedScenarioPost = {
+  id: 'pages-citymarkt-owner-demo',
+  account_id: 1,
+  author_name: 'demo',
+  source_type: 'citymarkt',
+  citymarkt_listing_id: '81bc9d37-20e1-4d8a-82f8-f4b85f77cf04',
+  title: 'Complete mechanic tool set',
+  body: 'Complete mechanic tool set with trolley, sockets and diagnostic equipment. Everything is clean and ready for work.',
+  category: 'citymarkt',
+  district: 'south_los_santos',
+  created_at: Date.parse('2026-08-06T13:10:00Z'),
+  like_count: 4,
+  images: [
+    {
+      media_id: 'capture-tools',
+      gradient: 'linear-gradient(135deg, #ffc75f, #f96d80 48%, #4b4453)',
+      sort_order: 1,
+    },
+  ],
+}
+
+function pagesPostsForScenario(testScenario) {
+  return testScenario === 'citymarkt-shared'
+    ? [cityMarktSharedScenarioPost, ...pagesPosts]
+    : pagesPosts
+}
 const pagesReactions = [
   { post_id: 'pages-1', account_id: 1, kind: 'like' },
   { post_id: 'pages-3', account_id: 1, kind: 'save' },
@@ -6965,7 +7002,30 @@ app.post('/api/:endpoint', (request, response) => {
       data: {
         account: testScenario === 'feather-login' ? null : linkedAccount,
         device: {
-          data: deviceData,
+          data:
+            testScenario.startsWith('citymarkt-')
+              ? {
+                  ...deviceData,
+                  apps: {
+                    ...deviceData.apps,
+                    payload: {
+                      ...deviceData.apps.payload,
+                      homeLayout: {
+                        dock: [],
+                        grid:
+                          testScenario === 'citymarkt-local-pages-missing'
+                            ? []
+                            : ['local-pages'],
+                        hidden:
+                          testScenario === 'citymarkt-local-pages-missing'
+                            ? ['local-pages']
+                            : [],
+                        version: 3,
+                      },
+                    },
+                  },
+                }
+              : deviceData,
           imei: '356938035643809',
           name: 'Personal iFruit Phone',
           sim: {
@@ -7475,7 +7535,7 @@ app.post('/api/:endpoint', (request, response) => {
   }
   if (endpoint === 'pages:list') {
     const query = String(request.body.search ?? '').toLowerCase()
-    let items = pagesPosts
+    let items = pagesPostsForScenario(testScenario)
     if (request.body.category && request.body.category !== 'all')
       items = items.filter((item) => item.category === request.body.category)
     if (query)
@@ -7498,7 +7558,9 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'pages:get') {
-    const post = pagesPosts.find((item) => item.id === request.body.id)
+    const post = pagesPostsForScenario(testScenario).find(
+      (item) => item.id === request.body.id,
+    )
     response.json(
       post
         ? { success: true, data: pageView(post) }
@@ -7513,7 +7575,9 @@ app.post('/api/:endpoint', (request, response) => {
   if (endpoint === 'pages:profile') {
     const email = linkedAccount?.email ?? pagesProfile.email
     const onboarding =
-      testScenario === 'local-pages-onboarding' && !pagesOnboardingCompleted
+      ['local-pages-onboarding', 'citymarkt-local-pages-account-missing'].includes(
+        testScenario,
+      ) && !pagesOnboardingCompleted
     response.json({
       success: true,
       data: {
@@ -7523,7 +7587,9 @@ app.post('/api/:endpoint', (request, response) => {
         email,
         exists: onboarding ? false : pagesProfile.exists,
         handle: onboarding ? email.split('@')[0] : pagesProfile.handle,
-        post_count: pagesPosts.filter((item) => item.account_id === 1).length,
+        post_count: pagesPostsForScenario(testScenario).filter(
+          (item) => item.account_id === 1,
+        ).length,
       },
     })
     return
@@ -7563,7 +7629,9 @@ app.post('/api/:endpoint', (request, response) => {
       success: true,
       data: {
         hasMore: false,
-        items: pagesPosts.filter((item) => item.account_id === 1).map(pageView),
+        items: pagesPostsForScenario(testScenario)
+          .filter((item) => item.account_id === 1)
+          .map(pageView),
         offset: 0,
       },
     })
@@ -7609,7 +7677,11 @@ app.post('/api/:endpoint', (request, response) => {
       response.json({ success: false, error: 'citymarkt_not_found' })
       return
     }
-    if (pagesPosts.some((item) => item.citymarkt_listing_id === listing.id)) {
+    if (
+      pagesPostsForScenario(testScenario).some(
+        (item) => item.citymarkt_listing_id === listing.id,
+      )
+    ) {
       response.json({ success: false, error: 'citymarkt_already_shared' })
       return
     }
@@ -7709,6 +7781,29 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: false, error: 'not_authenticated' })
     return
   }
+  if (endpoint === 'marketplace:profile') {
+    marketplaceProfile.listing_count = marketplaceListings.filter(
+      (listing) => listing.seller_account_id === 1,
+    ).length
+    response.json({ success: true, data: marketplaceProfile })
+    return
+  }
+  if (endpoint === 'marketplace:profile-save') {
+    const avatarMediaId = Number(request.body.avatarMediaId)
+    const avatar = mockMedia.find(
+      (item) => item.id === avatarMediaId && item.mediaType === 'photo',
+    )
+    marketplaceProfile = {
+      ...marketplaceProfile,
+      avatar_media_id: avatarMediaId || null,
+      avatar_url: avatar?.url ?? null,
+      bio: String(request.body.bio ?? '').trim(),
+      display_name: String(request.body.displayName ?? '').trim(),
+      exists: true,
+    }
+    response.json({ success: true, data: marketplaceProfile })
+    return
+  }
   if (endpoint === 'marketplace:counts') {
     response.json({
       success: true,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 71fa784..76fe035 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1270,6 +1270,10 @@ Locales["en"] = {
                 title = "Title", body = "Your story", category = "Category", titlePlaceholder = "What should people know?", bodyPlaceholder = "Add details, a recommendation or directions...",
                 photos = "Photos", optional = "optional", camera = "Camera", gallery = "Gallery", photoLimit = "You can add up to six photos.",
                 cityMarktShare = "Share to Local Pages", cityMarktShared = "Shared to Local Pages.", cityMarktShareHint = "One CityMarkt share per day",
+                cityMarktAlreadyShared = "Already published", cityMarktOpenSharedHint = "Open the Local Pages post",
+                cityMarktAppMissing = "Local Pages is not installed", cityMarktInstallHint = "Install Local Pages to share this listing",
+                cityMarktAccountMissing = "Local Pages profile required", cityMarktAccountHint = "Create a Local Pages profile before sharing",
+                cityMarktComposeTitle = "Share CityMarkt listing", cityMarktComposeNavTitle = "Share listing", cityMarktComposeHint = "Review the listing and publish it when you are ready.", cityMarktPhotosHint = "The CityMarkt listing photos will be included.",
                 authErrors = { invalid_email = "Enter a valid 3-32 character iFruit address.", invalid_password = "Use a password between 6 and 64 characters.", invalid_credentials = "The iFruit address or password is incorrect.", email_taken = "This iFruit address is already registered.", password_mismatch = "The passwords do not match.", rate_limited = "Too many attempts. Try again shortly.", default = "The iFruit account request failed." },
                 errors = { profile_required = "Create your Local Pages profile first.", invalid_profile = "Check your username and bio.", invalid_profile_image = "Choose a valid photo from this phone.", profile_handle_taken = "This username is already taken.", invalid_post = "Add a title and a little more detail.", invalid_images = "Choose valid photos from this phone.", invalid_request = "This action is not valid.", post_not_found = "This post is no longer available.", citymarkt_not_found = "This CityMarkt listing is unavailable.", citymarkt_daily_limit = "You already shared a CityMarkt listing today.", citymarkt_already_shared = "This listing was already shared.", not_authenticated = "Sign in to iFruit first.", rate_limited = "Too many requests. Try again shortly.", request_failed = "The post could not be saved.", default = "Local Pages is temporarily unavailable." },
             },

From 65f8312a26bd86179986710093806347ad2bead9 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 18:51:03 +0200
Subject: [PATCH 36/63] ADD - seed browser and ingame phone test data

---
 README.md                            |  33 +-
 frontend/package.json                |   3 +-
 frontend/src/App.vue                 |  47 ++
 frontend/src/stores/phone.ts         |  24 +-
 frontend/testserver/index.cjs        | 271 +++++++-
 frontend/testserver/smoke.cjs        | 354 ++++++++++
 sky_phone/config/config.lua          |   7 +
 sky_phone/config/locales/en.lua      |   5 +
 sky_phone/fxmanifest.lua             |   1 +
 sky_phone/source/client/main.lua     |  15 +
 sky_phone/source/server/testdata.lua | 964 +++++++++++++++++++++++++++
 11 files changed, 1691 insertions(+), 33 deletions(-)
 create mode 100644 frontend/testserver/smoke.cjs
 create mode 100644 sky_phone/source/server/testdata.lua

diff --git a/README.md b/README.md
index 1648ee4..c8019bf 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,20 @@ included in the NUI bundle.
 
 Standalone FiveM phone built with Vue 3, TypeScript, Pinia, Vue Router, Konsta UI 5, and Tailwind CSS 4. The phone opens through the usable item; `/phone` is disabled unless `Config.Phone.DevelopmentCommand` is enabled explicitly. Phone identity and SIM-card behavior are selected independently through `Config.Phone.Unique` and `Config.Sim.Enabled`.
 
+### Ingame test data
+
+On development servers, enable `Config.TestData.Enabled` and run `/phonetestdata` as the player who
+owns the phone. The command creates or refreshes idempotent, player-scoped fixtures for contacts,
+calls, messages, mail, notes, gallery, banking history, billing, calendar, map markers, music, radio,
+EasyShare, CityMarkt, Local Pages, Picstagram, FlipTok, Feather, Flare, DarkChat, CrewLink, SkyRide,
+and company requests. It also creates a linked iFruit account and a registered SIM when the selected
+phone does not have them yet. Reopen the phone after the command completes.
+
+Garage and Housing intentionally continue to use the real configured provider data. Apps without
+persistent content, such as Calculator, Camera, Clock, Weather, Settings, and Payphone, do not need
+database fixtures. Set `Config.TestData.AdminOnly = true` to restrict the command to the configured
+framework admin groups, and disable the feature outside development environments.
+
 An iFruit account is optional. Unlinked devices retain local settings, alarms, media, apps, notes, contacts, and recent calls. Linking from Mail or Settings moves local data into an empty cloud account; an existing cloud dataset wins over local contacts and recents. Signing out keeps an editable local snapshot without deleting cloud data.
 
 ## Phone identity and SIM modes
@@ -228,7 +242,24 @@ The homescreen is an original implementation inspired by the interaction and lay
 
 ## Development
 
-From `frontend/`, run `pnpm dev` for browser development. The phone opens automatically and NUI callbacks are mocked. Feather can be opened directly with the following browser scenarios:
+From `frontend/`, run `pnpm dev` for browser development. The phone opens automatically and NUI callbacks are mocked with stateful data. Every built-in app can be opened directly by appending its id to `http://localhost:5174/?apiPort=3002#/apps/`:
+
+| Area                | App ids                                                                                                       |
+| ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| Communication       | `phone`, `messages`, `mail`, `darkchat`, `radio`                                                              |
+| Social              | `feather`, `fliptok`, `picstagram`, `flare`, `crewlink`                                                       |
+| Services            | `companies`, `citymarkt`, `local-pages`, `banking`, `billing`, `garage`, `house`, `map`, `skyride`, `weather` |
+| Media and utilities | `camera`, `photos`, `music`, `calendar`, `notes`, `calculator`, `clock`, `app-store`, `settings`              |
+| Games               | `snake`, `memory`, `number-merge`, `minesweeper`, `tower-stack`, `sky-flappy`, `neon-drop`                    |
+
+The browser bootstrap includes contacts, calls, messages, mail, invoices, transactions, vehicles, properties, companies, marketplace profiles and listings, social feeds, media, calendar entries, notes, alarms, game high scores, app settings, and persisted notifications. Mutating callbacks update the in-memory mock state until the mock server restarts. Unknown callbacks fail with `mock_endpoint_missing` instead of silently succeeding.
+
+System overlays are available through dedicated preview parameters:
+
+- SIM picker: `http://localhost:5174/?apiPort=3002&simPickerPreview=1`
+- Payphone: `http://localhost:5174/?apiPort=3002&payphonePreview=1` (dial `5551110001` for a connected call or `5550000000` for a busy line)
+
+Feather can be opened directly with the following browser scenarios:
 
 - Full data: `http://localhost:5174/?apiPort=3002#/apps/feather`
 - Login and registration: `http://localhost:5174/?apiPort=3002&testScenario=feather-login#/apps/feather`
diff --git a/frontend/package.json b/frontend/package.json
index 69b2228..12fac4a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
     "typecheck": "vue-tsc --build",
     "lint": "eslint .",
     "format": "prettier --write src/ testserver/ build.cjs",
-    "test": "vitest run"
+    "test": "vitest run && pnpm test:browser-mocks",
+    "test:browser-mocks": "node testserver/smoke.cjs"
   },
   "dependencies": {
     "emoji-picker-element-data": "^1.8.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c3c8283..acf5d8b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -425,6 +425,50 @@ async function hydrateDevelopmentPhone(): Promise<void> {
   })
 }
 
+function openDevelopmentPayphonePreview(): void {
+  window.dispatchEvent(
+    new MessageEvent('message', {
+      data: {
+        data: {
+          currency: '$',
+          locales: {
+            busy: 'LINE BUSY',
+            call: 'CALL',
+            callEnded: 'CALL ENDED',
+            clear: 'Clear number',
+            close: 'Close payphone',
+            connected: 'CONNECTED',
+            cost: 'COST',
+            declined: 'CALL DECLINED',
+            delete: 'Delete digit',
+            dialing: 'DIALING',
+            disconnected: 'DISCONNECTED',
+            elapsed: 'TIME',
+            hangup: 'HANG UP',
+            insufficientFunds: 'OUT OF MONEY',
+            invalidNumber: 'ENTER A VALID NUMBER',
+            keypad: 'Dial pad',
+            noAnswer: 'NO ANSWER',
+            numberLabel: 'NUMBER TO CALL',
+            numberPlaceholder: 'Enter a phone number',
+            rate: '{currency}{price} / SEC',
+            ready: 'READY',
+            requestFailed: 'CALL COULD NOT BE STARTED',
+            ringing: 'RINGING',
+            subtitle: 'PUBLIC TELEPHONE',
+            title: 'PAYPHONE',
+            unavailable: 'NUMBER UNAVAILABLE',
+            voiceUnavailable: 'VOICE SERVICE UNAVAILABLE',
+          },
+          maxNumberLength: 10,
+          pricePerSecond: 2,
+        },
+        type: 'payphone:open',
+      },
+    }),
+  )
+}
+
 function onMessage(event: MessageEvent<AppMessage>): void {
   if (!isTrustedRootMessageSource(event.source, window)) return
 
@@ -1056,6 +1100,9 @@ onMounted(() => {
         number: '5551234567',
       }
     }
+    if (developmentParameters.has('payphonePreview')) {
+      openDevelopmentPayphonePreview()
+    }
   }
 })
 
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 18493bc..8ad26ae 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -2543,7 +2543,19 @@ const defaultLocales: LocaleTree = {
       noMessagesBody: 'Messages about offers will appear here.',
       myListings: 'My listings',
       favorites: 'Favorites',
+      addFavorite: 'Add to favorites',
+      removeFavorite: 'Remove from favorites',
       noProfileListings: 'Nothing here yet',
+      createProfile: 'Create your CityMarkt profile',
+      editProfile: 'Edit profile',
+      profileIntro: 'Your iFruit email stays linked to this profile.',
+      profileEmail: 'iFruit email',
+      displayName: 'Display name',
+      profileBio: 'About you',
+      saveProfile: 'Save profile',
+      cancel: 'Cancel',
+      profileSaved: 'Your profile was saved.',
+      removeProfilePhoto: 'Remove photo',
       phone: 'Phone',
       contactSeller: 'Contact seller',
       messagePlaceholder: 'Hi, is this still available?',
@@ -2683,13 +2695,16 @@ const defaultLocales: LocaleTree = {
       signInBody: 'Sign in to iFruit in Settings to publish and save posts.',
       authEyebrow: 'Local Pages account',
       authWelcome: 'Welcome to Local Pages',
-      authBody: 'Sign in or create an iFruit account to build your local profile.',
+      authBody:
+        'Sign in or create an iFruit account to build your local profile.',
       login: 'Sign in',
       register: 'Register',
       loginTitle: 'Continue with iFruit',
-      loginBody: 'Your posts, saved items and profile stay linked to your account.',
+      loginBody:
+        'Your posts, saved items and profile stay linked to your account.',
       registerTitle: 'Create an iFruit account',
-      registerBody: 'Choose your new iFruit address. Your Local Pages profile comes next.',
+      registerBody:
+        'Choose your new iFruit address. Your Local Pages profile comes next.',
       authEmail: 'iFruit address',
       authEmailPlaceholder: 'your.name',
       authPassword: 'Password',
@@ -2705,7 +2720,8 @@ const defaultLocales: LocaleTree = {
       profileEmail: 'iFruit email',
       profileHandle: 'Username',
       profileHandlePlaceholder: 'your.name',
-      profileHandleHint: 'Use 3–24 lowercase letters, numbers, dots or underscores.',
+      profileHandleHint:
+        'Use 3–24 lowercase letters, numbers, dots or underscores.',
       profileBio: 'Bio',
       profileBioPlaceholder: 'Tell the city a little about yourself...',
       profilePhoto: 'Profile photo',
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 14c3e5b..88b5d49 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -7,6 +7,22 @@ const port = Number(process.argv[2]) || 3001
 app.use(cors())
 app.use(express.json())
 
+const lifecycleEndpoints = new Set([
+  'camera:setActive',
+  'camera:setFacing',
+  'camera:setFlash',
+  'camera:setFocus',
+  'camera:setOrientation',
+  'camera:setZoom',
+  'close',
+  'custom-app:lifecycle',
+  'device:notification-open',
+  'notification:focus',
+  'sim:picker-close',
+  'ui:opened',
+  'ui:ready',
+])
+
 function calendarTime(dayOffset, hour, minute = 0) {
   const value = new Date()
   value.setDate(value.getDate() + dayOffset)
@@ -1878,6 +1894,17 @@ const marketplaceListings = [
     ],
   },
 ]
+let marketplaceProfile = {
+  avatar_media_id: 1,
+  avatar_url: 'https://picsum.photos/seed/citymarkt-demo-avatar/240/240',
+  bio: 'Fair prices, quick replies, and meetups anywhere in Los Santos.',
+  display_name: 'Skyline Deals',
+  email: 'demo@ifruit.com',
+  exists: true,
+  listing_count: marketplaceListings.filter(
+    (listing) => listing.seller_account_id === 1,
+  ).length,
+}
 let linkedAccount = {
   devices: accountDevices,
   email: 'demo@ifruit.com',
@@ -2063,6 +2090,38 @@ const deviceData = {
     },
     revision: 2,
   },
+  notifications: {
+    payload: {
+      items: [
+        {
+          appId: 'messages',
+          id: 'demo-notification-message',
+          route: '/apps/messages?phoneNumber=5551110001',
+          subtitle: 'Alex Rivera',
+          text: 'Meet us at the observatory after sunset.',
+          title: 'Messages',
+        },
+        {
+          appId: 'companies',
+          id: 'demo-notification-company',
+          route: '/apps/companies?area=requests',
+          subtitle: 'Los Santos Customs',
+          text: 'Your repair request has been accepted.',
+          title: 'Companies',
+        },
+        {
+          appId: 'billing',
+          id: 'demo-notification-billing',
+          route: '/apps/billing',
+          subtitle: 'Los Santos Customs',
+          text: 'A new invoice for $1,850 is ready.',
+          title: 'Billing',
+        },
+      ],
+      version: 1,
+    },
+    revision: 1,
+  },
   settings: {
     payload: {
       settings: {
@@ -2085,6 +2144,14 @@ const deviceData = {
 }
 let mockPasscode = ''
 let mockSecurity = { enabled: false, length: null, lockedUntil: 0 }
+let mockSim = {
+  id: 'development-sim',
+  number: '5551234567',
+  removable: true,
+  registered: true,
+  type: 'registered',
+}
+let mockPayphoneCall = null
 const blockedCallNumbers = new Set()
 let recentCalls = [
   {
@@ -3844,7 +3911,8 @@ const easyShareCatalog = [
     appId: 'citymarkt',
     copyText: 'Comet Retro Custom in excellent condition.',
     id: 'listing-easyshare-comet',
-    imageUrl: 'https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=900',
+    imageUrl:
+      'https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=900',
     kind: 'link',
     link: 'skyphone://citymarkt/listing/listing-easyshare-comet',
     subtitle: '$84,000',
@@ -3868,7 +3936,8 @@ const easyShareCatalog = [
     appId: 'photos',
     copyText: 'Sunset over Los Santos.',
     id: 3,
-    imageUrl: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=900',
+    imageUrl:
+      'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=900',
     kind: 'photo',
     link: 'skyphone://media/3',
     title: 'Los Santos sunset',
@@ -3923,7 +3992,8 @@ const easyShareCatalog = [
     appId: 'photos',
     copyText: 'Vehicle walkaround video.',
     id: 7,
-    imageUrl: 'https://videos.pexels.com/video-files/3130284/3130284-hd_1920_1080_30fps.mp4',
+    imageUrl:
+      'https://videos.pexels.com/video-files/3130284/3130284-hd_1920_1080_30fps.mp4',
     kind: 'video',
     link: 'skyphone://media/7',
     title: 'Vehicle walkaround',
@@ -3998,6 +4068,10 @@ app.post('/api/:endpoint', (request, response) => {
   console.log(`[NUI] ${request.params.endpoint}`, request.body)
   const endpoint = request.params.endpoint
   const testScenario = String(request.body._testScenario ?? '')
+  if (lifecycleEndpoints.has(endpoint)) {
+    response.json({ success: true })
+    return
+  }
   if (endpoint.startsWith('companies:') && testScenario === 'companies-error') {
     response.json({ success: false, error: 'service_unavailable' })
     return
@@ -5351,8 +5425,7 @@ app.post('/api/:endpoint', (request, response) => {
       mediaDurationMs: request.body.mediaDurationMs ?? null,
       mediaUrl: messageType === 'text' ? null : mediaUrl,
       messageType,
-      sharePayload:
-        messageType === 'share' ? request.body.sharePayload : null,
+      sharePayload: messageType === 'share' ? request.body.sharePayload : null,
     }
     flareMessages[match.id] ??= []
     flareMessages[match.id].push(message)
@@ -5832,6 +5905,47 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: flipTokActivities })
     return
   }
+  if (endpoint === 'fliptok:mark-activities') {
+    const readAt = new Date().toISOString()
+    flipTokActivities = flipTokActivities.map((activity) => ({
+      ...activity,
+      read_at: activity.read_at ?? readAt,
+    }))
+    response.json({ success: true })
+    return
+  }
+  if (endpoint === 'fliptok:view') {
+    const video = flipTokVideos.find((item) => item.id === request.body.id)
+    if (!video) {
+      response.json({ success: false, error: 'video_not_found' })
+      return
+    }
+    video.view_count += 1
+    response.json({ success: true })
+    return
+  }
+  if (endpoint === 'fliptok:report') {
+    const video = flipTokVideos.find((item) => item.id === request.body.id)
+    if (!video) {
+      response.json({ success: false, error: 'video_not_found' })
+      return
+    }
+    flipTokReports.push({
+      caption: video.caption,
+      created_at: Date.now(),
+      creator_display_name: video.display_name,
+      creator_handle: video.handle,
+      details: String(request.body.details ?? ''),
+      id: `report-${Date.now()}`,
+      reason: request.body.reason,
+      reporter_display_name: flipTokProfile.display_name,
+      reporter_handle: flipTokProfile.handle,
+      url: video.url,
+      video_id: video.id,
+    })
+    response.json({ success: true })
+    return
+  }
   if (endpoint === 'fliptok:profile') {
     const profileId = Number(request.body.profileId || 0)
     const handle = String(request.body.handle || '').toLowerCase()
@@ -6722,8 +6836,7 @@ app.post('/api/:endpoint', (request, response) => {
       replyToId: request.body.replyToId,
       replyBody: reply?.body,
       reactions: {},
-      sharePayload:
-        messageType === 'share' ? request.body.sharePayload : null,
+      sharePayload: messageType === 'share' ? request.body.sharePayload : null,
       createdAt: new Date().toISOString().slice(0, 19).replace('T', ' '),
       readAt: null,
     }
@@ -6968,13 +7081,7 @@ app.post('/api/:endpoint', (request, response) => {
           data: deviceData,
           imei: '356938035643809',
           name: 'Personal iFruit Phone',
-          sim: {
-            id: 'development-sim',
-            number: '5551234567',
-            removable: true,
-            registered: true,
-            type: 'registered',
-          },
+          sim: mockSim,
         },
         notes: mockNotes,
         security: mockSecurity,
@@ -7091,11 +7198,11 @@ app.post('/api/:endpoint', (request, response) => {
                 organization: selectedContact.organization ?? null,
                 phone_number: selectedContact.phone_number,
               }
-          : messageType === 'share'
-            ? request.body.sharePayload
-          : isAttachment
-            ? attachmentId
-            : null,
+            : messageType === 'share'
+              ? request.body.sharePayload
+              : isAttachment
+                ? attachmentId
+                : null,
       media_waveform:
         messageType === 'voice' ? request.body.mediaWaveform : null,
       message_type: messageType,
@@ -7304,6 +7411,15 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: { revision } })
     return
   }
+  if (endpoint === 'notifications:save') {
+    const revision = (deviceData.notifications?.revision ?? 0) + 1
+    deviceData.notifications = {
+      payload: request.body.payload,
+      revision,
+    }
+    response.json({ success: true, data: { revision } })
+    return
+  }
   if (endpoint === 'security:unlock') {
     response.json(
       !mockSecurity.enabled || request.body.passcode === mockPasscode
@@ -7531,9 +7647,12 @@ app.post('/api/:endpoint', (request, response) => {
   if (endpoint === 'pages:profile-save') {
     pagesOnboardingCompleted = true
     const avatarMediaId = Number(request.body.avatarMediaId) || 0
-    const avatarMedia = avatarMediaId > 0
-      ? mockMedia.find((item) => item.id === avatarMediaId && item.mediaType === 'photo')
-      : null
+    const avatarMedia =
+      avatarMediaId > 0
+        ? mockMedia.find(
+            (item) => item.id === avatarMediaId && item.mediaType === 'photo',
+          )
+        : null
     if (avatarMediaId > 0 && !avatarMedia) {
       response.json({ success: false, error: 'invalid_profile_image' })
       return
@@ -7544,7 +7663,9 @@ app.post('/api/:endpoint', (request, response) => {
       bio: String(request.body.bio ?? '').trim(),
       email: linkedAccount?.email ?? pagesProfile.email,
       exists: true,
-      handle: String(request.body.handle ?? '').trim().toLowerCase(),
+      handle: String(request.body.handle ?? '')
+        .trim()
+        .toLowerCase(),
     }
     pagesPosts.forEach((post) => {
       if (post.account_id === 1) post.author_name = pagesProfile.handle
@@ -7709,6 +7830,42 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: false, error: 'not_authenticated' })
     return
   }
+  if (endpoint === 'marketplace:profile') {
+    marketplaceProfile.listing_count = marketplaceListings.filter(
+      (listing) => listing.seller_account_id === 1,
+    ).length
+    response.json({ success: true, data: marketplaceProfile })
+    return
+  }
+  if (endpoint === 'marketplace:profile-save') {
+    const displayName = String(request.body.displayName ?? '').trim()
+    const bio = String(request.body.bio ?? '').trim()
+    const avatarMediaId = Number(request.body.avatarMediaId)
+    const avatar = mockMedia.find(
+      (item) => item.id === avatarMediaId && item.mediaType === 'photo',
+    )
+    if (
+      displayName.length < 2 ||
+      displayName.length > 40 ||
+      bio.length > 160 ||
+      !Number.isInteger(avatarMediaId) ||
+      avatarMediaId < 0 ||
+      (avatarMediaId > 0 && !avatar)
+    ) {
+      response.json({ success: false, error: 'invalid_profile' })
+      return
+    }
+    marketplaceProfile = {
+      ...marketplaceProfile,
+      avatar_media_id: avatarMediaId || null,
+      avatar_url: avatar?.url ?? null,
+      bio,
+      display_name: displayName,
+      exists: true,
+    }
+    response.json({ success: true, data: marketplaceProfile })
+    return
+  }
   if (endpoint === 'marketplace:counts') {
     response.json({
       success: true,
@@ -8010,6 +8167,61 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: false, error: 'confirmation_required' })
     return
   }
+  if (endpoint === 'sim:insert') {
+    mockSim = {
+      id: `development-sim-${request.body.imei}`,
+      number:
+        request.body.imei === '356938035643810' ? '5559876543' : '5551234567',
+      removable: true,
+      registered: true,
+      type: 'registered',
+    }
+    response.json({ success: true })
+    return
+  }
+  if (endpoint === 'sim:eject') {
+    if (!mockSim) {
+      response.json({ success: false, error: 'no_sim' })
+      return
+    }
+    mockSim = null
+    response.json({ success: true })
+    return
+  }
+  if (endpoint === 'payphone:dial') {
+    const phoneNumber = String(request.body.phoneNumber ?? '').replace(
+      /\D/g,
+      '',
+    )
+    if (phoneNumber.length !== 10) {
+      response.json({ success: false, error: 'invalid_number' })
+      return
+    }
+    if (phoneNumber === '5550000000') {
+      response.json({ success: false, error: 'busy' })
+      return
+    }
+    mockPayphoneCall = {
+      answeredAt: Math.floor(Date.now() / 1000),
+      elapsedSeconds: 0,
+      id: `payphone-${Date.now()}`,
+      otherNumber: phoneNumber,
+      state: 'connected',
+      totalCost: 0,
+    }
+    response.json({ success: true, data: mockPayphoneCall })
+    return
+  }
+  if (endpoint === 'payphone:hangup') {
+    mockPayphoneCall = null
+    response.json({ success: true })
+    return
+  }
+  if (endpoint === 'payphone:close') {
+    mockPayphoneCall = null
+    response.json({ success: true })
+    return
+  }
   if (endpoint === 'notes:list') {
     response.json({ success: true, data: mockNotes })
     return
@@ -8149,9 +8361,14 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true })
     return
   }
-  response.json({ success: true })
+  console.error(`[NUI] Missing browser mock for ${endpoint}`)
+  response.json({ success: false, error: 'mock_endpoint_missing' })
 })
 
-app.listen(port, () => {
-  console.log(`Mock NUI server listening on http://localhost:${port}`)
-})
+if (require.main === module) {
+  app.listen(port, () => {
+    console.log(`Mock NUI server listening on http://localhost:${port}`)
+  })
+}
+
+module.exports = { app }
diff --git a/frontend/testserver/smoke.cjs b/frontend/testserver/smoke.cjs
new file mode 100644
index 0000000..46897c5
--- /dev/null
+++ b/frontend/testserver/smoke.cjs
@@ -0,0 +1,354 @@
+const assert = require('node:assert/strict')
+const { once } = require('node:events')
+
+const { app } = require('./index.cjs')
+
+const browserDataRequests = [
+  ['development:bootstrap', {}],
+  ['account:devices', {}],
+  ['banking:overview', {}],
+  ['billing:overview', {}],
+  ['billing:list', { filter: 'all', limit: 20, offset: 0 }],
+  ['calendar:list', { endsAt: 4_102_444_800, startsAt: 0 }],
+  ['calls:recents', {}],
+  ['companies:list', {}],
+  ['companies:my-requests', { limit: 20, offset: 0 }],
+  ['companies:work-context', {}],
+  ['companies:work-queue', { limit: 20, offset: 0 }],
+  ['contacts:list', {}],
+  ['crewlink:bootstrap', {}],
+  ['crewlink:live', {}],
+  ['crewlink:nearby', {}],
+  ['darkchat:bootstrap', {}],
+  ['easyshare:bootstrap', {}],
+  ['easyshare:own-contact', {}],
+  ['feather:bootstrap', {}],
+  ['feather:feed', { limit: 20 }],
+  ['feather:explore', { limit: 20 }],
+  ['flare:bootstrap', {}],
+  ['fliptok:bootstrap', {}],
+  ['fliptok:feed', { limit: 20 }],
+  ['fliptok:discover', { limit: 20 }],
+  ['fliptok:activities', {}],
+  ['gallery:list', {}],
+  ['garage:vehicles', {}],
+  ['garage:valet-state', {}],
+  ['housing:overview', {}],
+  ['housing:key-candidates', { action: 'give' }],
+  ['mail:counts', {}],
+  ['mail:list', { folder: 'inbox' }],
+  ['map:getPlayerCoords', {}],
+  ['map:markers', {}],
+  ['marketplace:counts', {}],
+  ['marketplace:list', {}],
+  ['marketplace:list-own', {}],
+  ['marketplace:list-inquiries', {}],
+  ['marketplace:profile', {}],
+  ['messages:conversations', {}],
+  ['messages:gifs', { query: 'party' }],
+  ['music:bootstrap', {}],
+  ['notes:list', {}],
+  ['pages:list', {}],
+  ['pages:list-own', {}],
+  ['pages:profile', {}],
+  ['picstagram:bootstrap', {}],
+  ['picstagram:feed', { limit: 20 }],
+  ['picstagram:explore', { limit: 20 }],
+  ['picstagram:saved', {}],
+  ['picstagram:stories', {}],
+  ['picstagram:activities', {}],
+  ['radio:get', {}],
+  ['skyride:bootstrap', {}],
+  ['skyride:history', {}],
+  ['skyride:get-player-coords', {}],
+  ['weather:get', {}],
+]
+
+async function post(baseUrl, endpoint, body = {}) {
+  const response = await fetch(`${baseUrl}/api/${endpoint}`, {
+    body: JSON.stringify(body),
+    headers: { 'Content-Type': 'application/json' },
+    method: 'POST',
+  })
+  assert.equal(response.status, 200, endpoint)
+  return response.json()
+}
+
+async function expectSuccess(baseUrl, endpoint, body = {}, data = false) {
+  const result = await post(baseUrl, endpoint, body)
+  assert.equal(result.success, true, `${endpoint}: ${result.error ?? 'failed'}`)
+  if (data) assert.notEqual(result.data, undefined, `${endpoint}: missing data`)
+  return result.data
+}
+
+async function verifyStatefulActions(baseUrl) {
+  const noteId = `browser-note-${Date.now()}`
+  let notes = await expectSuccess(
+    baseUrl,
+    'notes:create',
+    {
+      body: 'Created by the browser mock smoke test.',
+      id: noteId,
+      title: 'Browser test',
+    },
+    true,
+  )
+  assert(
+    notes.some((note) => note.id === noteId),
+    'notes:create did not persist',
+  )
+  notes = await expectSuccess(
+    baseUrl,
+    'notes:update',
+    {
+      body: 'Updated browser test note.',
+      id: noteId,
+      title: 'Browser test updated',
+    },
+    true,
+  )
+  assert.equal(
+    notes.find((note) => note.id === noteId)?.title,
+    'Browser test updated',
+  )
+  notes = await expectSuccess(baseUrl, 'notes:delete', { id: noteId }, true)
+  assert(
+    !notes.some((note) => note.id === noteId),
+    'notes:delete did not persist',
+  )
+
+  const contact = await expectSuccess(
+    baseUrl,
+    'contacts:save',
+    { name: 'Browser Tester', phoneNumber: '5552223333' },
+    true,
+  )
+  await expectSuccess(
+    baseUrl,
+    'contacts:favorite',
+    { favorite: true, id: contact.id },
+    true,
+  )
+  let contacts = await expectSuccess(baseUrl, 'contacts:list', {}, true)
+  assert.equal(contacts.find((item) => item.id === contact.id)?.favorite, true)
+  await expectSuccess(baseUrl, 'contacts:delete', { id: contact.id })
+  contacts = await expectSuccess(baseUrl, 'contacts:list', {}, true)
+  assert(
+    !contacts.some((item) => item.id === contact.id),
+    'contacts:delete did not persist',
+  )
+
+  const event = await expectSuccess(
+    baseUrl,
+    'calendar:create',
+    {
+      allDay: false,
+      description: 'Stateful browser mock check',
+      endsAt: 2_000_003_600,
+      location: 'Legion Square',
+      reminderMinutes: 15,
+      startsAt: 2_000_000_000,
+      title: 'Browser test event',
+    },
+    true,
+  )
+  let events = await expectSuccess(
+    baseUrl,
+    'calendar:list',
+    { endsAt: 4_102_444_800, startsAt: 0 },
+    true,
+  )
+  const storedEvent = events.find((item) => item.id === event.id)
+  assert(storedEvent, 'calendar:create did not persist')
+  await expectSuccess(baseUrl, 'calendar:update', {
+    ...storedEvent,
+    endsAt: storedEvent.endsAt / 1000,
+    startsAt: storedEvent.startsAt / 1000,
+    title: 'Updated browser test event',
+  })
+  events = await expectSuccess(
+    baseUrl,
+    'calendar:list',
+    { endsAt: 4_102_444_800, startsAt: 0 },
+    true,
+  )
+  assert.equal(
+    events.find((item) => item.id === event.id)?.title,
+    'Updated browser test event',
+  )
+  await expectSuccess(baseUrl, 'calendar:delete', { id: event.id })
+
+  const marker = await expectSuccess(
+    baseUrl,
+    'map:create-marker',
+    {
+      color: '#2dd4bf',
+      coords: { x: 215.2, y: -810.1, z: 30.7 },
+      icon: 'pin',
+      label: 'Browser test marker',
+    },
+    true,
+  )
+  let markers = await expectSuccess(baseUrl, 'map:markers', {}, true)
+  assert(
+    markers.some((item) => item.id === marker.id),
+    'map:create-marker did not persist',
+  )
+  await expectSuccess(baseUrl, 'map:delete-marker', { id: marker.id })
+  markers = await expectSuccess(baseUrl, 'map:markers', {}, true)
+  assert(
+    !markers.some((item) => item.id === marker.id),
+    'map:delete-marker did not persist',
+  )
+
+  const bankingBefore = await expectSuccess(
+    baseUrl,
+    'banking:overview',
+    {},
+    true,
+  )
+  const bankingAfter = await expectSuccess(
+    baseUrl,
+    'banking:transfer',
+    { amount: 125, phoneNumber: '5551110001' },
+    true,
+  )
+  assert.equal(bankingAfter.bank, bankingBefore.bank - 125)
+
+  let radio = await expectSuccess(
+    baseUrl,
+    'radio:connect',
+    { frequency: 42.5, secondaryFrequency: 7.25 },
+    true,
+  )
+  assert.equal(radio.frequency, 42.5)
+  radio = await expectSuccess(baseUrl, 'radio:set-volume', { volume: 44 }, true)
+  assert.equal(radio.volume, 44)
+  await expectSuccess(baseUrl, 'radio:disconnect')
+
+  const playlistState = await expectSuccess(
+    baseUrl,
+    'music:create-playlist',
+    { name: 'Browser Test Mix' },
+    true,
+  )
+  const playlist = playlistState.playlists.find(
+    (item) => item.name === 'Browser Test Mix',
+  )
+  assert(playlist, 'music:create-playlist did not persist')
+  await expectSuccess(
+    baseUrl,
+    'music:rename-playlist',
+    { id: playlist.id, name: 'Updated Browser Mix' },
+    true,
+  )
+  await expectSuccess(
+    baseUrl,
+    'music:delete-playlist',
+    { id: playlist.id },
+    true,
+  )
+
+  await expectSuccess(baseUrl, 'sim:eject')
+  let bootstrap = await expectSuccess(
+    baseUrl,
+    'development:bootstrap',
+    {},
+    true,
+  )
+  assert.equal(bootstrap.device.sim, null)
+  const simConfirmation = await post(baseUrl, 'sim:insert', {
+    imei: '356938035643810',
+  })
+  assert.deepEqual(simConfirmation, {
+    error: 'confirmation_required',
+    success: false,
+  })
+  await expectSuccess(baseUrl, 'sim:insert', {
+    confirmed: true,
+    imei: '356938035643810',
+  })
+  bootstrap = await expectSuccess(baseUrl, 'development:bootstrap', {}, true)
+  assert.equal(bootstrap.device.sim.number, '5559876543')
+
+  const payphoneCall = await expectSuccess(
+    baseUrl,
+    'payphone:dial',
+    { phoneNumber: '5551110001' },
+    true,
+  )
+  assert.equal(payphoneCall.state, 'connected')
+  await expectSuccess(baseUrl, 'payphone:hangup')
+
+  const draft = await expectSuccess(
+    baseUrl,
+    'mail:save-draft',
+    {
+      body: 'Browser test body',
+      recipients: ['alex@ifruit.com'],
+      subject: 'Browser test mail',
+    },
+    true,
+  )
+  const storedDraft = await expectSuccess(
+    baseUrl,
+    'mail:get-draft',
+    { id: draft.id },
+    true,
+  )
+  assert.equal(storedDraft.subject, 'Browser test mail')
+  await expectSuccess(baseUrl, 'mail:delete-draft', { id: draft.id })
+}
+
+async function main() {
+  const server = app.listen(0, '127.0.0.1')
+  await once(server, 'listening')
+  const address = server.address()
+  const baseUrl = `http://127.0.0.1:${address.port}`
+
+  try {
+    for (const [endpoint, body] of browserDataRequests) {
+      await expectSuccess(baseUrl, endpoint, body, true)
+    }
+
+    await verifyStatefulActions(baseUrl)
+
+    const lifecycleEndpoints = [
+      'camera:setActive',
+      'camera:setFacing',
+      'camera:setFlash',
+      'camera:setFocus',
+      'camera:setOrientation',
+      'camera:setZoom',
+      'close',
+      'custom-app:lifecycle',
+      'device:notification-open',
+      'notification:focus',
+      'sim:picker-close',
+      'ui:opened',
+      'ui:ready',
+    ]
+    for (const endpoint of lifecycleEndpoints) {
+      await expectSuccess(baseUrl, endpoint)
+    }
+
+    const unknown = await post(baseUrl, 'development:missing-mock', {})
+    assert.deepEqual(unknown, {
+      error: 'mock_endpoint_missing',
+      success: false,
+    })
+  } finally {
+    await new Promise((resolve, reject) => {
+      server.close((error) => (error ? reject(error) : resolve()))
+    })
+  }
+
+  console.log(
+    `Verified ${browserDataRequests.length} browser data endpoints and stateful app actions.`,
+  )
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exitCode = 1
+})
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 0592b08..355fe30 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -20,6 +20,13 @@ Config.Phone = {
     DeviceName = "iFruit Phone",
 }
 
+Config.TestData = {
+    Enabled = true,
+    Command = "phonetestdata",
+    AdminOnly = false, -- enable only on development servers; every run is scoped to the executing player's phone
+    AdminGroups = { "admin", "superadmin" },
+}
+
 Config.CustomApps = {
     Enabled = true,
     BundledApps = true,
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 71fa784..cbc8538 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1,5 +1,10 @@
 Locales["en"] = {
     CommandDescription = "Open your phone.",
+    TestData = {
+        CommandDescription = "Create or refresh test content in every data-driven phone app.",
+        Success = "Test content is ready. Your iFruit login is {email}. Reopen the phone to refresh every app.",
+        Failed = "Test content could not be created. Check the server console for details.",
+    },
     FlipTokCommand = {
         usage = "Usage: /{command} <@handle> [on|off]",
         noPermission = "You do not have permission to manage FlipTok verification.",
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index fb4cf85..ab0e6f8 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -89,6 +89,7 @@ server_scripts {
     'source/server/calendar.lua',
     'source/server/music.lua',
     'source/server/radio.lua',
+    'source/server/testdata.lua',
 }
 
 files {
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index a0ef5fa..8c97ab3 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -328,6 +328,15 @@ if Config.Phone.DevelopmentCommand then
     end, false)
 end
 
+RegisterNetEvent("sky_phone:testdata:feedback", function(success, detail)
+    local locale = get_locale().TestData
+    local message = success and locale.Success or locale.Failed
+    if success and type(detail) == "string" and detail ~= "" then
+        message = message:gsub("{email}", detail)
+    end
+    Bridge.Framework.Notify("iFruit", message, success and "success" or "error", 7000)
+end)
+
 RegisterNUICallback("ui:ready", function(_, cb)
     Bridge.Debug("debug", "[sky_phone] NUI reported ready.", { always = true })
     TriggerEvent("sky_phone:client:nuiReady")
@@ -765,6 +774,9 @@ CreateThread(function()
     if Config.Phone.DevelopmentCommand then
         TriggerEvent("chat:addSuggestion", "/" .. Config.Command, get_locale().CommandDescription)
     end
+    if Config.TestData.Enabled then
+        TriggerEvent("chat:addSuggestion", "/" .. Config.TestData.Command, get_locale().TestData.CommandDescription)
+    end
 end)
 
 AddEventHandler("onResourceStop", function(resource_name)
@@ -782,4 +794,7 @@ AddEventHandler("onResourceStop", function(resource_name)
     if Config.Phone.DevelopmentCommand then
         TriggerEvent("chat:removeSuggestion", "/" .. Config.Command)
     end
+    if Config.TestData.Enabled then
+        TriggerEvent("chat:removeSuggestion", "/" .. Config.TestData.Command)
+    end
 end)
diff --git a/sky_phone/source/server/testdata.lua b/sky_phone/source/server/testdata.lua
new file mode 100644
index 0000000..49864b7
--- /dev/null
+++ b/sky_phone/source/server/testdata.lua
@@ -0,0 +1,964 @@
+Bridge.Database.AfterMigration("sky_phone", function()
+
+if not Config.TestData.Enabled then
+    return
+end
+
+local photo_urls = {
+    city = "https://images.unsplash.com/photo-1519501025264-65ba15a82390?auto=format&fit=crop&w=1200&q=80",
+    car = "https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=1200&q=80",
+    beach = "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80",
+    portrait = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=800&q=80",
+}
+local video_url = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+local seed_attempts = {}
+
+local function affected_rows(result)
+    if type(result) == "number" then
+        return result
+    end
+    return type(result) == "table" and tonumber(result.affectedRows) or 0
+end
+
+local function stable_uuid(seed)
+    local rows = Bridge.Database.Query([[
+        SELECT LOWER(CONCAT(
+            SUBSTR(MD5(?), 1, 8), '-', SUBSTR(MD5(?), 9, 4), '-',
+            SUBSTR(MD5(?), 13, 4), '-', SUBSTR(MD5(?), 17, 4), '-', SUBSTR(MD5(?), 21, 12)
+        )) AS `id`
+    ]], { seed, seed, seed, seed, seed })
+    local id = rows[1] and rows[1].id
+    if type(id) ~= "string" or #id ~= 36 then
+        error("[sky_phone] Test data could not generate a stable UUID.")
+    end
+    return id
+end
+
+local function seed_hash(seed)
+    local rows = Bridge.Database.Query("SELECT LEFT(MD5(?), 12) AS `value`", { seed })
+    local value = rows[1] and rows[1].value
+    if type(value) ~= "string" or #value ~= 12 then
+        error("[sky_phone] Test data could not generate a stable account suffix.")
+    end
+    return value
+end
+
+local function database_uuid()
+    local rows = Bridge.Database.Query("SELECT UUID() AS `id`", {})
+    local id = rows[1] and rows[1].id
+    if type(id) ~= "string" then
+        error("[sky_phone] Test data could not generate a database UUID.")
+    end
+    return id
+end
+
+local function ensure_account(email)
+    Bridge.Database.Query(
+        "INSERT IGNORE INTO `sky_phone_accounts` (`email`, `password`) VALUES (?, ?)",
+        { email, "sky-phone-test" }
+    )
+    local rows = Bridge.Database.Query(
+        "SELECT `id`, `email` FROM `sky_phone_accounts` WHERE `email` = ? LIMIT 1",
+        { email }
+    )
+    if not rows[1] then
+        error(("[sky_phone] Test data account '%s' could not be loaded."):format(email))
+    end
+    rows[1].id = tonumber(rows[1].id)
+    return rows[1]
+end
+
+local function ensure_media(account_id, remote_id, url, media_type)
+    local rows = Bridge.Database.Query([[
+        SELECT `id` FROM `sky_phone_media`
+        WHERE `account_id` = ? AND `remote_id` = ?
+        ORDER BY `id` LIMIT 1
+    ]], { account_id, remote_id })
+    if rows[1] then
+        Bridge.Database.Query(
+            "UPDATE `sky_phone_media` SET `url` = ?, `media_type` = ? WHERE `id` = ?",
+            { url, media_type, rows[1].id }
+        )
+        return tonumber(rows[1].id)
+    end
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_media` (`account_id`, `url`, `remote_id`, `media_type`)
+        VALUES (?, ?, ?, ?)
+    ]], { account_id, url, remote_id, media_type })
+    rows = Bridge.Database.Query([[
+        SELECT `id` FROM `sky_phone_media`
+        WHERE `account_id` = ? AND `remote_id` = ?
+        ORDER BY `id` DESC LIMIT 1
+    ]], { account_id, remote_id })
+    if not rows[1] then
+        error("[sky_phone] Test media could not be created.")
+    end
+    return tonumber(rows[1].id)
+end
+
+local function reserve_sim(owner_identifier, firstname, lastname)
+    local rows = Bridge.Database.Query([[
+        SELECT `id`, `phone_number`, `sim_type`
+        FROM `sky_phone_sims`
+        WHERE `owner_identifier` = ? AND `is_virtual` = 0
+        ORDER BY `created_at` LIMIT 1
+    ]], { owner_identifier })
+    if rows[1] then
+        return rows[1]
+    end
+
+    local sim_id
+    local number = SkyPhoneSimNumber.Reserve(database_uuid, function(candidate)
+        if SkyPhoneCompanies.IsServiceNumber(candidate) then
+            return false
+        end
+        sim_id = database_uuid()
+        local result = Bridge.Database.Query([[
+            INSERT IGNORE INTO `sky_phone_sims`
+                (`id`, `phone_number`, `sim_type`, `is_virtual`, `owner_identifier`,
+                 `owner_firstname`, `owner_lastname`, `registered_at`)
+            VALUES (?, ?, 'registered', 0, ?, ?, ?, CURRENT_TIMESTAMP)
+        ]], { sim_id, candidate, owner_identifier, firstname, lastname })
+        return affected_rows(result) == 1
+    end, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
+    if not number then
+        error("[sky_phone] Test data could not reserve a SIM number.")
+    end
+    return { id = sim_id, phone_number = number, sim_type = "registered" }
+end
+
+local function ensure_bot(label, email_local, imei, firstname, lastname)
+    local account = ensure_account(email_local .. "@" .. Config.Mail.Domain)
+    local sim = reserve_sim("sky_phone:testbot:" .. label, firstname, lastname)
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_devices` (`imei`, `account_id`, `sim_id`, `device_name`)
+        VALUES (?, ?, ?, ?)
+        ON DUPLICATE KEY UPDATE `account_id` = VALUES(`account_id`), `sim_id` = VALUES(`sim_id`)
+    ]], { imei, account.id, sim.id, firstname .. "'s iFruit" })
+    return {
+        account = account,
+        sim = sim,
+        imei = imei,
+        name = firstname .. " " .. lastname,
+    }
+end
+
+local function ensure_numeric_profile(table_name, account_id)
+    local rows = Bridge.Database.Query(
+        ("SELECT `id` FROM `%s` WHERE `account_id` = ? LIMIT 1"):format(table_name),
+        { account_id }
+    )
+    if not rows[1] then
+        error(("[sky_phone] Test profile in '%s' could not be loaded."):format(table_name))
+    end
+    return tonumber(rows[1].id)
+end
+
+local function ensure_string_profile(table_name, account_id)
+    local rows = Bridge.Database.Query(
+        ("SELECT `id` FROM `%s` WHERE `account_id` = ? LIMIT 1"):format(table_name),
+        { account_id }
+    )
+    if not rows[1] or type(rows[1].id) ~= "string" then
+        error(("[sky_phone] Test profile in '%s' could not be loaded."):format(table_name))
+    end
+    return rows[1].id
+end
+
+local function seed_core(context)
+    local account_id = context.account.id
+    local bot = context.bot_one
+    local alarms = {
+        {
+            id = "test-weekday",
+            enabled = true,
+            time = "07:30",
+            note = "Phone QA",
+            sound = "radar",
+            weekdays = { 1, 2, 3, 4, 5 },
+            lastTriggeredMinute = nil,
+        },
+        {
+            id = "test-weekend",
+            enabled = false,
+            time = "10:00",
+            note = "Car Meet",
+            sound = "chimes",
+            weekdays = { 0, 6 },
+            lastTriggeredMinute = nil,
+        },
+    }
+    local games = {
+        snake = { highScore = 42, speed = "fast" },
+        memory = {
+            best = {
+                small = { moves = 12, timeMs = 42000 },
+                medium = { moves = 28, timeMs = 96000 },
+            },
+            soundEnabled = true,
+        },
+        minesweeper = {
+            best = { quick = { timeMs = 31000 }, classic = { timeMs = 124000 } },
+            elapsedMs = 0,
+            game = nil,
+            soundEnabled = true,
+        },
+        ["number-merge"] = { bestScore = 8192, game = nil, highestTile = 1024, soundEnabled = true },
+        ["tower-stack"] = { highHeight = 23, highScore = 4750, soundEnabled = true },
+        ["sky-flappy"] = { design = "neon", highScore = 18, soundEnabled = true },
+        ["neon-drop"] = { bestLines = 14, bestScore = 12600, soundEnabled = true },
+    }
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_device_data` (`device_imei`, `namespace`, `payload`)
+        VALUES (?, 'alarms', ?)
+        ON DUPLICATE KEY UPDATE `payload` = VALUES(`payload`), `revision` = `revision` + 1
+    ]], { context.imei, json.encode(alarms) })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_device_data` (`device_imei`, `namespace`, `payload`)
+        VALUES (?, 'games', ?)
+        ON DUPLICATE KEY UPDATE `payload` = VALUES(`payload`), `revision` = `revision` + 1
+    ]], { context.imei, json.encode(games) })
+
+    local contact_id = stable_uuid(context.key .. ":contact:alex")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_contacts`
+            (`id`, `contact_id`, `account_id`, `name`, `notes`, `organization`, `phone_number`, `favorite`)
+        VALUES (?, ?, ?, 'Alex Rivera', 'Test contact for calls and messages.', 'Downtown Cab Co.', ?, 1)
+        ON DUPLICATE KEY UPDATE `name` = VALUES(`name`), `notes` = VALUES(`notes`),
+            `organization` = VALUES(`organization`), `phone_number` = VALUES(`phone_number`), `favorite` = 1
+    ]], { contact_id, contact_id, account_id, bot.sim.phone_number })
+
+    local sms_one = stable_uuid(context.key .. ":sms:one")
+    local sms_two = stable_uuid(context.key .. ":sms:two")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_sms_messages`
+            (`id`, `sender_sim_id`, `recipient_sim_id`, `sender_number`, `recipient_number`, `body`, `read_at`, `created_at`)
+        VALUES (?, ?, ?, ?, ?, 'Willkommen auf dem Testserver! Alle Apps sind jetzt befüllt.', NULL,
+            DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 8 MINUTE))
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `read_at` = NULL
+    ]], { sms_one, bot.sim.id, context.sim.id, bot.sim.phone_number, context.sim.phone_number })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_sms_messages`
+            (`id`, `sender_sim_id`, `recipient_sim_id`, `sender_number`, `recipient_number`, `body`, `read_at`, `created_at`)
+        VALUES (?, ?, ?, ?, ?, 'Perfekt, ich teste gerade Nachrichten und Kontakte.', CURRENT_TIMESTAMP,
+            DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 5 MINUTE))
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `read_at` = CURRENT_TIMESTAMP
+    ]], { sms_two, context.sim.id, bot.sim.id, context.sim.phone_number, bot.sim.phone_number })
+
+    local call_id = stable_uuid(context.key .. ":call:missed")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_calls`
+            (`id`, `caller_sim_id`, `callee_sim_id`, `caller_number`, `callee_number`, `status`,
+             `started_at`, `ended_at`, `duration_seconds`)
+        VALUES (?, ?, ?, ?, ?, 'missed', DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 2 HOUR),
+            DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 2 HOUR), 0)
+        ON DUPLICATE KEY UPDATE `status` = 'missed', `duration_seconds` = 0
+    ]], { call_id, bot.sim.id, context.sim.id, bot.sim.phone_number, context.sim.phone_number })
+    Bridge.Database.Query("DELETE FROM `sky_phone_call_entries` WHERE `call_id` = ? AND `account_id` = ?", { call_id, account_id })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_call_entries`
+            (`call_id`, `account_id`, `direction`, `status`, `other_number`, `created_at`)
+        VALUES (?, ?, 'incoming', 'missed', ?, DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 2 HOUR))
+    ]], { call_id, account_id, bot.sim.phone_number })
+
+    local note_one = stable_uuid(context.key .. ":note:checklist")
+    local note_two = stable_uuid(context.key .. ":note:ideas")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_notes` (`id`, `account_id`, `title`, `body`, `pinned`)
+        VALUES (?, ?, 'Phone Test-Checkliste', 'Kontakte\nNachrichten\nAnrufe\nSocial Apps\nMarktplatz\nFirmen', 1)
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `body` = VALUES(`body`), `pinned` = 1
+    ]], { note_one, account_id })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_notes` (`id`, `account_id`, `title`, `body`, `pinned`)
+        VALUES (?, ?, 'Ideen für später', 'DarkChat testen und eine SkyRide-Fahrt bewerten.', 0)
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `body` = VALUES(`body`)
+    ]], { note_two, account_id })
+
+    local mail_id = stable_uuid(context.key .. ":mail:welcome")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_mail_messages`
+            (`id`, `sender_account_id`, `recipients`, `subject`, `body`, `created_at`)
+        VALUES (?, ?, ?, 'Willkommen beim iFruit-Test',
+            'Hallo! Diese Nachricht gehört zu deinem reproduzierbaren Ingame-Testdatensatz.',
+            DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 1 HOUR))
+        ON DUPLICATE KEY UPDATE `recipients` = VALUES(`recipients`), `subject` = VALUES(`subject`), `body` = VALUES(`body`)
+    ]], { mail_id, bot.account.id, json.encode({ context.account.email }) })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_mail_entries` (`message_id`, `account_id`, `folder`)
+        VALUES (?, ?, 'inbox')
+    ]], { mail_id, account_id })
+    local draft_id = stable_uuid(context.key .. ":mail:draft")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_mail_drafts` (`id`, `account_id`, `recipients`, `subject`, `body`)
+        VALUES (?, ?, ?, 'Entwurf: Testfeedback', 'Hier kann ich später mein Testfeedback ergänzen.')
+        ON DUPLICATE KEY UPDATE `recipients` = VALUES(`recipients`), `subject` = VALUES(`subject`), `body` = VALUES(`body`)
+    ]], { draft_id, account_id, json.encode({ bot.account.email }) })
+
+    Bridge.Database.Query(
+        "DELETE FROM `sky_phone_bank_transactions` WHERE `owner_identifier` = ? AND `reference` LIKE 'sky-phone-test:%'",
+        { context.identifier }
+    )
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_bank_transactions` (`owner_identifier`, `kind`, `amount`, `label`, `reference`, `created_at`)
+        VALUES (?, 'deposit', 2500, 'Test paycheck', 'sky-phone-test:paycheck', DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 1 DAY)),
+               (?, 'withdrawal', 85, 'Los Santos Customs', 'sky-phone-test:repair', DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 3 HOUR)),
+               (?, 'transfer_in', 420, 'Alex Rivera', 'sky-phone-test:transfer', DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 30 MINUTE))
+    ]], { context.identifier, context.identifier, context.identifier })
+
+    local invoice_id = stable_uuid(context.key .. ":invoice:repair")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_billing_invoices`
+            (`id`, `recipient_identifier`, `issuer_identifier`, `issuer_account`, `issuer_label`,
+             `title`, `description`, `amount`, `currency`, `status`, `due_at`)
+        VALUES (?, ?, 'sky_phone:testbot:mechanic', 'society_mechanic', 'Los Santos Customs',
+            'Vehicle inspection', 'Test invoice for the Billing app.', 750, '$', 'open',
+            DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 3 DAY))
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `description` = VALUES(`description`),
+            `amount` = VALUES(`amount`), `status` = 'open', `read_at` = NULL
+    ]], { invoice_id, context.identifier })
+    Bridge.Database.Query(
+        "DELETE FROM `sky_phone_billing_events` WHERE `invoice_id` = ? AND `note` = 'Generated by the phone test data command.'",
+        { invoice_id }
+    )
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_billing_events` (`invoice_id`, `event`, `actor_identifier`, `note`)
+        VALUES (?, 'created', 'sky_phone:testbot:mechanic', 'Generated by the phone test data command.')
+    ]], { invoice_id })
+
+    local event_id = stable_uuid(context.key .. ":calendar:meeting")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_calendar_events`
+            (`id`, `account_id`, `title`, `note`, `starts_at`, `ends_at`, `reminder_minutes`)
+        VALUES (?, ?, 'Phone QA Session', 'Alle Apps im Spiel durchtesten.',
+            DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 1 DAY), DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 25 HOUR), 30)
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `note` = VALUES(`note`),
+            `starts_at` = VALUES(`starts_at`), `ends_at` = VALUES(`ends_at`), `reminder_minutes` = 30,
+            `reminded_at` = NULL
+    ]], { event_id, account_id })
+
+    local marker_one = stable_uuid(context.key .. ":marker:lsc")
+    local marker_two = stable_uuid(context.key .. ":marker:pier")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_map_markers` (`id`, `device_imei`, `label`, `color`, `position_x`, `position_y`, `position_z`)
+        VALUES (?, ?, 'Los Santos Customs', 'orange', -337.3, -136.9, 39.0)
+        ON DUPLICATE KEY UPDATE `label` = VALUES(`label`), `color` = VALUES(`color`),
+            `position_x` = VALUES(`position_x`), `position_y` = VALUES(`position_y`), `position_z` = VALUES(`position_z`)
+    ]], { marker_one, context.imei })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_map_markers` (`id`, `device_imei`, `label`, `color`, `position_x`, `position_y`, `position_z`)
+        VALUES (?, ?, 'Del Perro Pier', 'blue', -1649.7, -1078.3, 13.0)
+        ON DUPLICATE KEY UPDATE `label` = VALUES(`label`), `color` = VALUES(`color`),
+            `position_x` = VALUES(`position_x`), `position_y` = VALUES(`position_y`), `position_z` = VALUES(`position_z`)
+    ]], { marker_two, context.imei })
+
+    local song_id = stable_uuid(context.key .. ":music:song")
+    local playlist_id = stable_uuid(context.key .. ":music:playlist")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_music_youtube_songs` (`id`, `account_id`, `video_id`, `title`, `artist`)
+        VALUES (?, ?, 'dQw4w9WgXcQ', 'Never Gonna Give You Up', 'Rick Astley')
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `artist` = VALUES(`artist`)
+    ]], { song_id, account_id })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_music_playlists` (`id`, `account_id`, `name`)
+        VALUES (?, ?, 'Test Drive Mix')
+        ON DUPLICATE KEY UPDATE `name` = VALUES(`name`)
+    ]], { playlist_id, account_id })
+    Bridge.Database.Query("DELETE FROM `sky_phone_music_playlist_items` WHERE `playlist_id` = ?", { playlist_id })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_music_playlist_items` (`playlist_id`, `source`, `song_id`, `position`)
+        VALUES (?, 'youtube', ?, 1)
+    ]], { playlist_id, song_id })
+
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_radio_profiles`
+            (`identifier`, `history`, `settings`, `primary_frequency`, `secondary_frequency`, `badge`, `display_name`)
+        VALUES (?, ?, ?, 100.1, 101.5, 'QA', ?)
+        ON DUPLICATE KEY UPDATE `history` = VALUES(`history`), `settings` = VALUES(`settings`),
+            `primary_frequency` = VALUES(`primary_frequency`), `secondary_frequency` = VALUES(`secondary_frequency`)
+    ]], {
+        context.identifier,
+        json.encode({ 100.1, 101.5, 99.9 }),
+        json.encode({ volume = 65, notifications = true, autoRejoin = false }),
+        context.player_name,
+    })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_easyshare_preferences` (`device_imei`, `visibility`)
+        VALUES (?, 'everyone') ON DUPLICATE KEY UPDATE `visibility` = 'everyone'
+    ]], { context.imei })
+    local transfer_id = stable_uuid(context.key .. ":easyshare:transfer")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_easyshare_transfers`
+            (`id`, `sender_imei`, `recipient_imei`, `sender_name`, `recipient_name`, `content_type`,
+             `payload`, `status`, `progress`, `completed_at`)
+        VALUES (?, ?, ?, 'Alex Rivera', ?, 'contact', ?, 'completed', 100, CURRENT_TIMESTAMP)
+        ON DUPLICATE KEY UPDATE `payload` = VALUES(`payload`), `status` = 'completed',
+            `progress` = 100, `completed_at` = CURRENT_TIMESTAMP
+    ]], {
+        transfer_id,
+        bot.imei,
+        context.imei,
+        context.player_name,
+        json.encode({ name = "Mia Chen", phoneNumber = context.bot_two.sim.phone_number }),
+    })
+end
+
+local function seed_marketplace_and_pages(context)
+    local account_id = context.account.id
+    local bot_id = context.bot_one.account.id
+    local own_handle = "tester" .. tostring(account_id)
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_profiles` (`account_id`, `display_name`, `bio`, `avatar_media_id`)
+        VALUES (?, ?, 'QA profile generated in game.', ?)
+        ON DUPLICATE KEY UPDATE `display_name` = VALUES(`display_name`), `bio` = VALUES(`bio`),
+            `avatar_media_id` = VALUES(`avatar_media_id`)
+    ]], { account_id, context.player_name, context.media.user_portrait })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_profiles` (`account_id`, `display_name`, `bio`, `avatar_media_id`)
+        VALUES (?, 'Alex Rivera', 'Trusted test seller.', ?)
+        ON DUPLICATE KEY UPDATE `display_name` = VALUES(`display_name`), `bio` = VALUES(`bio`),
+            `avatar_media_id` = VALUES(`avatar_media_id`)
+    ]], { bot_id, context.media.bot_portrait })
+
+    local bot_listing = stable_uuid(context.key .. ":market:bot-listing")
+    local own_listing = stable_uuid(context.key .. ":market:own-listing")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_listings`
+            (`id`, `seller_account_id`, `title`, `description`, `category`, `item_condition`,
+             `price_type`, `price`, `district`, `show_phone`, `phone_number`, `status`, `expires_at`)
+        VALUES (?, ?, 'Sultan RS - Test Vehicle', 'Clean test listing with negotiable price.',
+            'vehicles', 'very_good', 'negotiable', 42000, 'los_santos', 1, ?, 'active', DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 30 DAY))
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `description` = VALUES(`description`),
+            `status` = 'active', `expires_at` = VALUES(`expires_at`)
+    ]], { bot_listing, bot_id, context.bot_one.sim.phone_number })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_listings`
+            (`id`, `seller_account_id`, `title`, `description`, `category`, `item_condition`,
+             `price_type`, `price`, `district`, `status`, `expires_at`)
+        VALUES (?, ?, 'QA Headset', 'A listing owned by the test user.', 'electronics', 'used',
+            'fixed', 350, 'los_santos', 'active', DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 30 DAY))
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `description` = VALUES(`description`),
+            `status` = 'active', `expires_at` = VALUES(`expires_at`)
+    ]], { own_listing, account_id })
+    local car_gradient = ("url(%s)"):format(json.encode(photo_urls.car))
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_images` (`listing_id`, `media_id`, `gradient`, `sort_order`)
+        VALUES (?, ?, ?, 1)
+        ON DUPLICATE KEY UPDATE `media_id` = VALUES(`media_id`), `gradient` = VALUES(`gradient`)
+    ]], { bot_listing, tostring(context.media.bot_car), car_gradient })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_marketplace_favorites` (`account_id`, `listing_id`) VALUES (?, ?)
+    ]], { account_id, bot_listing })
+    local inquiry_id = stable_uuid(context.key .. ":market:inquiry")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_inquiries`
+            (`id`, `listing_id`, `seller_account_id`, `buyer_account_id`, `offer_amount`,
+             `offer_proposer_account_id`, `offer_status`, `offer_revision`)
+        VALUES (?, ?, ?, ?, 40000, ?, 'pending', 1)
+        ON DUPLICATE KEY UPDATE `offer_amount` = 40000, `offer_proposer_account_id` = VALUES(`offer_proposer_account_id`),
+            `offer_status` = 'pending', `offer_revision` = 1
+    ]], { inquiry_id, bot_listing, bot_id, account_id, account_id })
+    Bridge.Database.Query("DELETE FROM `sky_phone_marketplace_messages` WHERE `inquiry_id` = ?", { inquiry_id })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_marketplace_messages` (`inquiry_id`, `sender_account_id`, `body`, `read_at`)
+        VALUES (?, ?, 'Ist der Sultan noch verfügbar?', CURRENT_TIMESTAMP),
+               (?, ?, 'Ja, gerne Probefahrt in Burton.', NULL)
+    ]], { inquiry_id, account_id, inquiry_id, bot_id })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_marketplace_offers` (`inquiry_id`, `proposer_account_id`, `amount`)
+        VALUES (?, ?, 40000)
+    ]], { inquiry_id, account_id })
+
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_pages_profiles` (`account_id`, `handle`, `bio`, `avatar_media_id`)
+        VALUES (?, ?, 'Lokale Tests, Events und Angebote.', ?)
+        ON DUPLICATE KEY UPDATE `handle` = VALUES(`handle`), `bio` = VALUES(`bio`),
+            `avatar_media_id` = VALUES(`avatar_media_id`)
+    ]], { account_id, own_handle, context.media.user_portrait })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_pages_profiles` (`account_id`, `handle`, `bio`, `avatar_media_id`)
+        VALUES (?, 'alex.local', 'News aus Los Santos.', ?)
+        ON DUPLICATE KEY UPDATE `bio` = VALUES(`bio`), `avatar_media_id` = VALUES(`avatar_media_id`)
+    ]], { bot_id, context.media.bot_portrait })
+    local page_post = stable_uuid(context.key .. ":pages:post")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_pages_posts`
+            (`id`, `account_id`, `source_type`, `title`, `body`, `category`, `district`)
+        VALUES (?, ?, 'personal', 'Car Meet am Pier', 'Heute Abend findet ein offenes Test-Car-Meet statt.',
+            'event', 'los_santos')
+        ON DUPLICATE KEY UPDATE `title` = VALUES(`title`), `body` = VALUES(`body`)
+    ]], { page_post, bot_id })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_pages_images` (`post_id`, `media_id`, `gradient`, `sort_order`)
+        VALUES (?, ?, ?, 1)
+        ON DUPLICATE KEY UPDATE `media_id` = VALUES(`media_id`), `gradient` = VALUES(`gradient`)
+    ]], { page_post, tostring(context.media.bot_car), car_gradient })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_pages_reactions` (`post_id`, `account_id`, `kind`)
+        VALUES (?, ?, 'like'), (?, ?, 'save')
+    ]], { page_post, account_id, page_post, account_id })
+end
+
+local function seed_social_apps(context)
+    local account_id = context.account.id
+    local bot_id = context.bot_one.account.id
+    local bot_two_id = context.bot_two.account.id
+    local suffix = tostring(account_id)
+
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_profiles`
+            (`id`, `account_id`, `handle`, `display_name`, `bio`, `avatar_media_id`)
+        VALUES (?, ?, ?, ?, 'Ingame QA account', ?)
+        ON DUPLICATE KEY UPDATE `handle` = VALUES(`handle`), `display_name` = VALUES(`display_name`),
+            `bio` = VALUES(`bio`), `avatar_media_id` = VALUES(`avatar_media_id`)
+    ]], {
+        stable_uuid(context.key .. ":pic:user"), account_id, "tester" .. suffix, context.player_name,
+        context.media.user_portrait,
+    })
+    local pic_user = ensure_string_profile("sky_phone_picstagram_profiles", account_id)
+    local pic_bot_seed = stable_uuid("sky_phone:testbot:pic:alex")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_profiles`
+            (`id`, `account_id`, `handle`, `display_name`, `bio`, `avatar_media_id`, `verified`)
+        VALUES (?, ?, 'alex.rivera', 'Alex Rivera', 'Cars, city lights and test content.', ?, 1)
+        ON DUPLICATE KEY UPDATE `display_name` = VALUES(`display_name`), `bio` = VALUES(`bio`),
+            `avatar_media_id` = VALUES(`avatar_media_id`), `verified` = 1
+    ]], { pic_bot_seed, bot_id, context.media.bot_portrait })
+    local pic_bot = ensure_string_profile("sky_phone_picstagram_profiles", bot_id)
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_sessions` (`device_imei`, `profile_id`)
+        VALUES (?, ?) ON DUPLICATE KEY UPDATE `profile_id` = VALUES(`profile_id`)
+    ]], { context.imei, pic_user })
+    local pic_post = stable_uuid(context.key .. ":pic:post")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_posts` (`id`, `profile_id`, `caption`, `location`)
+        VALUES (?, ?, 'Night drive through Los Santos #test', 'Vinewood')
+        ON DUPLICATE KEY UPDATE `caption` = VALUES(`caption`), `location` = VALUES(`location`), `status` = 'published'
+    ]], { pic_post, pic_bot })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_post_media` (`post_id`, `media_id`, `position`)
+        VALUES (?, ?, 1) ON DUPLICATE KEY UPDATE `media_id` = VALUES(`media_id`)
+    ]], { pic_post, context.media.bot_city })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_picstagram_follows` (`follower_id`, `following_id`, `status`)
+        VALUES (?, ?, 'accepted')
+    ]], { pic_user, pic_bot })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_picstagram_reactions` (`post_id`, `profile_id`, `kind`)
+        VALUES (?, ?, 'like'), (?, ?, 'save')
+    ]], { pic_post, pic_user, pic_post, pic_user })
+    local pic_comment = stable_uuid(context.key .. ":pic:comment")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_comments` (`id`, `post_id`, `profile_id`, `body`)
+        VALUES (?, ?, ?, 'Sieht richtig gut aus!')
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `status` = 'visible'
+    ]], { pic_comment, pic_post, pic_user })
+    local story_id = stable_uuid(context.key .. ":pic:story")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_stories` (`id`, `profile_id`, `media_id`, `body`, `expires_at`)
+        VALUES (?, ?, ?, 'Test story live', DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 24 HOUR))
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `status` = 'active', `expires_at` = VALUES(`expires_at`)
+    ]], { story_id, pic_bot, context.media.bot_city })
+    local pic_activity = stable_uuid(context.key .. ":pic:activity")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_picstagram_activities` (`id`, `recipient_id`, `actor_id`, `post_id`, `kind`)
+        VALUES (?, ?, ?, ?, 'like')
+        ON DUPLICATE KEY UPDATE `read_at` = NULL
+    ]], { pic_activity, pic_user, pic_bot, pic_post })
+
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_fliptok_profiles` (`account_id`, `handle`, `display_name`, `bio`)
+        VALUES (?, ?, ?, 'Testing every FlipTok feature.')
+        ON DUPLICATE KEY UPDATE `handle` = VALUES(`handle`), `display_name` = VALUES(`display_name`), `bio` = VALUES(`bio`)
+    ]], { account_id, "tester" .. suffix, context.player_name })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_fliptok_profiles`
+            (`account_id`, `handle`, `display_name`, `bio`, `account_type`, `verified`)
+        VALUES (?, 'mia.motion', 'Mia Chen', 'Short videos from Los Santos.', 'media', 1)
+        ON DUPLICATE KEY UPDATE `display_name` = VALUES(`display_name`), `bio` = VALUES(`bio`), `verified` = 1
+    ]], { bot_two_id })
+    local flip_user = ensure_numeric_profile("sky_phone_fliptok_profiles", account_id)
+    local flip_bot = ensure_numeric_profile("sky_phone_fliptok_profiles", bot_two_id)
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_fliptok_sessions` (`device_imei`, `profile_id`)
+        VALUES (?, ?) ON DUPLICATE KEY UPDATE `profile_id` = VALUES(`profile_id`)
+    ]], { context.imei, flip_user })
+    local flip_video = stable_uuid(context.key .. ":flip:video")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_fliptok_videos`
+            (`id`, `profile_id`, `media_id`, `caption`, `location`, `view_count`, `share_count`)
+        VALUES (?, ?, ?, 'Flowers in motion #fyp #test', 'Mirror Park', 1842, 37)
+        ON DUPLICATE KEY UPDATE `caption` = VALUES(`caption`), `view_count` = 1842,
+            `share_count` = 37, `status` = 'published'
+    ]], { flip_video, flip_bot, context.media.bot_video })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_fliptok_follows` (`follower_id`, `following_id`) VALUES (?, ?)
+    ]], { flip_user, flip_bot })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_fliptok_reactions` (`video_id`, `profile_id`, `kind`)
+        VALUES (?, ?, 'like'), (?, ?, 'save')
+    ]], { flip_video, flip_user, flip_video, flip_user })
+    local flip_comment = stable_uuid(context.key .. ":flip:comment")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_fliptok_comments` (`id`, `video_id`, `profile_id`, `body`)
+        VALUES (?, ?, ?, 'Der Test-Clip läuft flüssig.')
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `status` = 'visible'
+    ]], { flip_comment, flip_video, flip_user })
+    local flip_notification = stable_uuid(context.key .. ":flip:notification")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_fliptok_notifications` (`id`, `recipient_id`, `actor_id`, `video_id`, `kind`)
+        VALUES (?, ?, ?, ?, 'follow') ON DUPLICATE KEY UPDATE `read_at` = NULL
+    ]], { flip_notification, flip_user, flip_bot, flip_video })
+
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_feather_profiles` (`account_id`, `handle`, `display_name`, `bio`, `avatar_media_id`)
+        VALUES (?, ?, ?, 'Testing Feather in game.', ?)
+        ON DUPLICATE KEY UPDATE `handle` = VALUES(`handle`), `display_name` = VALUES(`display_name`),
+            `bio` = VALUES(`bio`), `avatar_media_id` = VALUES(`avatar_media_id`)
+    ]], { account_id, "tester" .. suffix, context.player_name, context.media.user_portrait })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_feather_profiles`
+            (`account_id`, `handle`, `display_name`, `bio`, `avatar_media_id`, `verified`)
+        VALUES (?, 'alex_updates', 'Alex Rivera', 'Los Santos live updates.', ?, 1)
+        ON DUPLICATE KEY UPDATE `display_name` = VALUES(`display_name`), `bio` = VALUES(`bio`),
+            `avatar_media_id` = VALUES(`avatar_media_id`), `verified` = 1
+    ]], { bot_id, context.media.bot_portrait })
+    local feather_user = ensure_numeric_profile("sky_phone_feather_profiles", account_id)
+    local feather_bot = ensure_numeric_profile("sky_phone_feather_profiles", bot_id)
+    local feather_post = stable_uuid(context.key .. ":feather:post")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_feather_posts` (`id`, `profile_id`, `body`)
+        VALUES (?, ?, 'Der neue iFruit-Testdatensatz ist live. #LosSantos #PhoneQA')
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `status` = 'published'
+    ]], { feather_post, feather_bot })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_feather_hashtags` (`post_id`, `tag`)
+        VALUES (?, 'lossantos'), (?, 'phoneqa')
+    ]], { feather_post, feather_post })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_feather_follows` (`follower_id`, `following_id`) VALUES (?, ?)
+    ]], { feather_user, feather_bot })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_feather_reactions` (`post_id`, `profile_id`, `kind`)
+        VALUES (?, ?, 'like'), (?, ?, 'bookmark')
+    ]], { feather_post, feather_user, feather_post, feather_user })
+    local feather_notification = stable_uuid(context.key .. ":feather:notification")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_feather_notifications` (`id`, `recipient_id`, `actor_id`, `post_id`, `kind`)
+        VALUES (?, ?, ?, ?, 'follow') ON DUPLICATE KEY UPDATE `read_at` = NULL
+    ]], { feather_notification, feather_user, feather_bot, feather_post })
+
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_flare_profiles`
+            (`account_id`, `name`, `age`, `bio`, `gender`, `interested_in`, `min_age`, `max_age`,
+             `avatar`, `interests`, `looking_for`)
+        VALUES (?, ?, 27, 'Testing Flare conversations.', 'nonbinary', 'everyone', 21, 40, 0, ?, 'friends')
+        ON DUPLICATE KEY UPDATE `name` = VALUES(`name`), `bio` = VALUES(`bio`), `interests` = VALUES(`interests`)
+    ]], { account_id, context.player_name:sub(1, 32), json.encode({ "cars", "music", "gaming" }) })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_flare_profiles`
+            (`account_id`, `name`, `age`, `bio`, `gender`, `interested_in`, `min_age`, `max_age`,
+             `avatar`, `interests`, `looking_for`)
+        VALUES (?, 'Mia', 26, 'Coffee, sunsets and good conversations.', 'woman', 'everyone', 21, 40, 1, ?, 'friends')
+        ON DUPLICATE KEY UPDATE `bio` = VALUES(`bio`), `interests` = VALUES(`interests`)
+    ]], { bot_two_id, json.encode({ "coffee", "travel", "photography" }) })
+    local flare_user = ensure_numeric_profile("sky_phone_flare_profiles", account_id)
+    local flare_bot = ensure_numeric_profile("sky_phone_flare_profiles", bot_two_id)
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_flare_profile_photos` (`profile_id`, `media_id`, `sort_order`)
+        VALUES (?, ?, 1), (?, ?, 1)
+    ]], { flare_user, context.media.user_portrait, flare_bot, context.media.bot_two_portrait })
+    local match_id = stable_uuid(context.key .. ":flare:match")
+    local account_a = math.min(account_id, bot_two_id)
+    local account_b = math.max(account_id, bot_two_id)
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_flare_matches` (`id`, `account_a_id`, `account_b_id`)
+        VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE `created_at` = `created_at`
+    ]], { match_id, account_a, account_b })
+    local flare_message = stable_uuid(context.key .. ":flare:message")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_flare_messages` (`id`, `match_id`, `sender_account_id`, `body`, `read_at`)
+        VALUES (?, ?, ?, 'Hey! Bereit für einen vollständigen App-Test?', NULL)
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `read_at` = NULL
+    ]], { flare_message, match_id, bot_two_id })
+end
+
+local function seed_private_and_services(context)
+    local account_id = context.account.id
+    local bot_id = context.bot_one.account.id
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_darkchat_profiles`
+            (`account_id`, `dark_id`, `invite_code`, `alias`, `avatar_seed`, `notification_mode`, `activity_visible`)
+        VALUES (?, ?, ?, 'NightTester', 42, 'private', 1)
+        ON DUPLICATE KEY UPDATE `alias` = VALUES(`alias`), `notification_mode` = VALUES(`notification_mode`)
+    ]], { account_id, ("DARK%010d"):format(account_id % 10000000000), ("INV%08d"):format(account_id % 100000000) })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_darkchat_profiles`
+            (`account_id`, `dark_id`, `invite_code`, `alias`, `avatar_seed`, `notification_mode`, `activity_visible`)
+        VALUES (?, 'DARK0000000001', 'INV00000001', 'GhostAlex', 17, 'full', 1)
+        ON DUPLICATE KEY UPDATE `alias` = VALUES(`alias`)
+    ]], { bot_id })
+    local dark_user = ensure_numeric_profile("sky_phone_darkchat_profiles", account_id)
+    local dark_bot = ensure_numeric_profile("sky_phone_darkchat_profiles", bot_id)
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_darkchat_contacts` (`profile_id`, `contact_profile_id`, `alias_override`)
+        VALUES (?, ?, 'Ghost')
+    ]], { dark_user, dark_bot })
+    local conversation_id = stable_uuid(context.key .. ":dark:conversation")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_darkchat_conversations` (`id`, `disappearing_seconds`)
+        VALUES (?, 0) ON DUPLICATE KEY UPDATE `disappearing_seconds` = 0
+    ]], { conversation_id })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_darkchat_members` (`conversation_id`, `profile_id`, `last_read_at`)
+        VALUES (?, ?, CURRENT_TIMESTAMP), (?, ?, NULL)
+    ]], { conversation_id, dark_user, conversation_id, dark_bot })
+    local dark_one = stable_uuid(context.key .. ":dark:message:one")
+    local dark_two = stable_uuid(context.key .. ":dark:message:two")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_darkchat_messages` (`id`, `conversation_id`, `sender_profile_id`, `body`)
+        VALUES (?, ?, ?, 'Willkommen im privaten Testchat.')
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `deleted_for_everyone` = 0
+    ]], { dark_one, conversation_id, dark_bot })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_darkchat_messages`
+            (`id`, `conversation_id`, `sender_profile_id`, `message_type`, `body`, `reactions`)
+        VALUES (?, ?, ?, 'emoji', '🔥', ?)
+        ON DUPLICATE KEY UPDATE `body` = VALUES(`body`), `reactions` = VALUES(`reactions`)
+    ]], { dark_two, conversation_id, dark_user, json.encode({ ["🔥"] = { dark_bot } }) })
+
+    local crew_user_seed = stable_uuid(context.key .. ":crew:user")
+    local crew_bot_seed = stable_uuid("sky_phone:testbot:crew:alex")
+    local group_id = stable_uuid(context.key .. ":crew:group")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_crewlink_profiles` (`id`, `account_id`, `username`, `active_group_id`)
+        VALUES (?, ?, ?, NULL)
+        ON DUPLICATE KEY UPDATE `username` = VALUES(`username`)
+    ]], { crew_user_seed, account_id, ("tester%s"):format(account_id):sub(1, 20) })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_crewlink_profiles` (`id`, `account_id`, `username`, `active_group_id`)
+        VALUES (?, ?, 'alexcrew', NULL)
+        ON DUPLICATE KEY UPDATE `username` = VALUES(`username`)
+    ]], { crew_bot_seed, bot_id })
+    local crew_user = ensure_string_profile("sky_phone_crewlink_profiles", account_id)
+    local crew_bot = ensure_string_profile("sky_phone_crewlink_profiles", bot_id)
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_crewlink_groups`
+            (`id`, `name`, `colour`, `owner_profile_id`, `invite_code`, `allow_member_pings`, `overhead_allowed`)
+        VALUES (?, 'Phone QA Crew', 'violet', ?, ?, 1, 1)
+        ON DUPLICATE KEY UPDATE `name` = VALUES(`name`), `colour` = VALUES(`colour`)
+    ]], { group_id, crew_user, ("QA%s"):format(account_id):sub(1, 12) })
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_crewlink_memberships` (`group_id`, `profile_id`, `role`)
+        VALUES (?, ?, 'owner'), (?, ?, 'member')
+    ]], { group_id, crew_user, group_id, crew_bot })
+    Bridge.Database.Query(
+        "UPDATE `sky_phone_crewlink_profiles` SET `active_group_id` = ? WHERE `id` IN (?, ?)",
+        { group_id, crew_user, crew_bot }
+    )
+    local ping_id = stable_uuid(context.key .. ":crew:ping")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_crewlink_pings`
+            (`id`, `group_id`, `creator_profile_id`, `type`, `label`, `position_x`, `position_y`, `position_z`, `expires_at`)
+        VALUES (?, ?, ?, 'meeting', 'QA Treffpunkt', -337.3, -136.9, 39.0,
+            DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 12 HOUR))
+        ON DUPLICATE KEY UPDATE `label` = VALUES(`label`), `expires_at` = VALUES(`expires_at`)
+    ]], { ping_id, group_id, crew_bot })
+
+    local ride_user_seed = stable_uuid(context.key .. ":skyride:user")
+    local ride_bot_seed = stable_uuid("sky_phone:testbot:skyride:alex")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_skyride_profiles` (`id`, `owner_identifier`)
+        VALUES (?, ?) ON DUPLICATE KEY UPDATE `owner_identifier` = VALUES(`owner_identifier`)
+    ]], { ride_user_seed, context.identifier })
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_skyride_profiles` (`id`, `owner_identifier`)
+        VALUES (?, 'sky_phone:testbot:alex') ON DUPLICATE KEY UPDATE `owner_identifier` = VALUES(`owner_identifier`)
+    ]], { ride_bot_seed })
+    local ride_user_rows = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_skyride_profiles` WHERE `owner_identifier` = ? LIMIT 1",
+        { context.identifier }
+    )
+    local ride_bot_rows = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_skyride_profiles` WHERE `owner_identifier` = 'sky_phone:testbot:alex' LIMIT 1",
+        {}
+    )
+    local ride_user = ride_user_rows[1] and ride_user_rows[1].id
+    local ride_bot = ride_bot_rows[1] and ride_bot_rows[1].id
+    if type(ride_user) ~= "string" or type(ride_bot) ~= "string" then
+        error("[sky_phone] Test SkyRide profiles could not be loaded.")
+    end
+    local ride_id = stable_uuid(context.key .. ":skyride:completed")
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_skyride_rides`
+            (`id`, `passenger_profile_id`, `driver_profile_id`, `passenger_name`, `driver_name`,
+             `status`, `service_class`, `pickup_label`, `pickup_x`, `pickup_y`, `pickup_z`,
+             `destination_label`, `destination_x`, `destination_y`, `destination_z`, `distance_meters`,
+             `duration_seconds`, `price`, `payout_amount`, `currency`, `driver_vehicle_model`,
+             `driver_vehicle_color`, `driver_vehicle_plate`, `passenger_rating`, `rating_comment`,
+             `tip_amount`, `tip_status`, `accepted_at`, `arrived_at`, `started_at`, `completed_at`, `paid_out_at`)
+        VALUES (?, ?, ?, ?, 'Alex Rivera', 'completed', 'comfort', 'Legion Square', 215.8, -810.1, 30.7,
+            'Del Perro Pier', -1649.7, -1078.3, 13.0, 6200, 540, 320, 240, '$', 'Sultan',
+            'Midnight Blue', 'QA 2026', 5, 'Saubere Testfahrt.', 25, 'completed',
+            DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 3 HOUR), DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 170 MINUTE),
+            DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 165 MINUTE), DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 2 HOUR),
+            DATE_SUB(CURRENT_TIMESTAMP, INTERVAL 2 HOUR))
+        ON DUPLICATE KEY UPDATE `status` = 'completed', `passenger_rating` = 5,
+            `rating_comment` = 'Saubere Testfahrt.', `tip_amount` = 25, `tip_status` = 'completed'
+    ]], { ride_id, ride_user, ride_bot, context.player_name })
+
+    local company_rows = Bridge.Database.Query(
+        "SELECT `company_id` FROM `sky_phone_company_profiles` WHERE `company_id` = 'mechanic' LIMIT 1",
+        {}
+    )
+    if company_rows[1] then
+        local request_id = stable_uuid(context.key .. ":company:request")
+        Bridge.Database.Query([[
+            INSERT INTO `sky_phone_company_requests`
+                (`id`, `company_id`, `service_id`, `customer_sim_id`, `subject`, `description`,
+                 `status`, `customer_unread`, `company_activity_revision`, `revision`)
+            VALUES (?, 'mechanic', 'mechanic-repair', ?, 'Motor verliert Leistung',
+                'Testauftrag mit Chatverlauf und Status.', 'waiting_customer', 1, 3, 3)
+            ON DUPLICATE KEY UPDATE `subject` = VALUES(`subject`), `description` = VALUES(`description`),
+                `status` = 'waiting_customer', `customer_unread` = 1, `company_activity_revision` = 3, `revision` = 3
+        ]], { request_id, context.sim.id })
+        local request_message = stable_uuid(context.key .. ":company:message")
+        Bridge.Database.Query([[
+            INSERT INTO `sky_phone_company_request_messages`
+                (`id`, `request_id`, `sender_type`, `sender_identifier`, `body`)
+            VALUES (?, ?, 'company', 'sky_phone:testbot:mechanic',
+                'Bitte komm für eine Diagnose bei Los Santos Customs vorbei.')
+            ON DUPLICATE KEY UPDATE `body` = VALUES(`body`)
+        ]], { request_message, request_id })
+        local request_event = stable_uuid(context.key .. ":company:event")
+        Bridge.Database.Query([[
+            INSERT INTO `sky_phone_company_request_events`
+                (`id`, `request_id`, `event_type`, `actor_type`, `actor_identifier`, `from_status`, `to_status`, `detail`)
+            VALUES (?, ?, 'status', 'company', 'sky_phone:testbot:mechanic', 'in_progress', 'waiting_customer',
+                'Waiting for the test customer.')
+            ON DUPLICATE KEY UPDATE `detail` = VALUES(`detail`)
+        ]], { request_event, request_id })
+    end
+end
+
+local function seed_for_source(source)
+    local slots = Bridge.Inventory.GetSlotsWithItem(source, Config.Phone.Item)
+    local phone_slot = slots[1]
+    if not phone_slot then
+        error(("[sky_phone] Test data source %s has no phone item."):format(source))
+    end
+    local imei, device_error = SkyPhone.EnsureDevice(source, phone_slot)
+    if not imei then
+        error(("[sky_phone] Test data could not resolve the phone device: %s"):format(tostring(device_error)))
+    end
+    local identifier = Bridge.Framework.GetIdentifier(source)
+    if type(identifier) ~= "string" or identifier == "" then
+        error("[sky_phone] Test data could not resolve the player identifier.")
+    end
+
+    local player_name = ((Bridge.Framework.GetFirstname(source) or "") .. " "
+        .. (Bridge.Framework.GetLastname(source) or "")):match("^%s*(.-)%s*$")
+    if player_name == "" then
+        player_name = GetPlayerName(source) or ("Player %s"):format(source)
+    end
+    local device = SkyPhone.LoadDevice(imei)
+    local account
+    if device and device.account_id then
+        local rows = Bridge.Database.Query(
+            "SELECT `id`, `email` FROM `sky_phone_accounts` WHERE `id` = ? LIMIT 1",
+            { device.account_id }
+        )
+        account = rows[1]
+        if not account then
+            error("[sky_phone] Test data found a device with a missing iFruit account.")
+        end
+        account.id = tonumber(account.id)
+    else
+        account = ensure_account("tester_" .. seed_hash(identifier) .. "@" .. Config.Mail.Domain)
+        Bridge.Database.Query("UPDATE `sky_phone_devices` SET `account_id` = ? WHERE `imei` = ?", { account.id, imei })
+    end
+
+    device = SkyPhone.LoadDevice(imei)
+    local sim
+    if device and device.sim_id then
+        local rows = Bridge.Database.Query("SELECT * FROM `sky_phone_sims` WHERE `id` = ? LIMIT 1", { device.sim_id })
+        sim = rows[1]
+    else
+        sim = reserve_sim(identifier, Bridge.Framework.GetFirstname(source), Bridge.Framework.GetLastname(source))
+        Bridge.Database.Query("UPDATE `sky_phone_devices` SET `sim_id` = ? WHERE `imei` = ?", { sim.id, imei })
+        local metadata = phone_slot.metadata or {}
+        metadata.sim_id = sim.id
+        metadata.phone_number = sim.phone_number
+        metadata.formatted_number = SkyPhoneSimNumber.Format(
+            sim.phone_number,
+            Config.Sim.NumberGroups,
+            Config.Sim.NumberLength,
+            Config.Sim.NumberPrefix
+        )
+        if not Bridge.Inventory.SetSlotMetadata(source, phone_slot.slot, metadata) then
+            error("[sky_phone] Test data could not update the phone item's SIM metadata.")
+        end
+    end
+
+    local bot_one = ensure_bot("alex", "phone.bot.alex", "990000000000001", "Alex", "Rivera")
+    local bot_two = ensure_bot("mia", "phone.bot.mia", "990000000000002", "Mia", "Chen")
+    local context = {
+        source = source,
+        identifier = identifier,
+        player_name = player_name,
+        account = account,
+        imei = imei,
+        sim = sim,
+        bot_one = bot_one,
+        bot_two = bot_two,
+        key = identifier .. ":" .. imei,
+        media = {},
+    }
+    context.media.user_portrait = ensure_media(account.id, "test-user-portrait", photo_urls.portrait, "photo")
+    context.media.user_city = ensure_media(account.id, "test-user-city", photo_urls.city, "photo")
+    context.media.user_video = ensure_media(account.id, "test-user-video", video_url, "video")
+    context.media.bot_portrait = ensure_media(bot_one.account.id, "test-bot-alex-portrait", photo_urls.car, "photo")
+    context.media.bot_car = ensure_media(bot_one.account.id, "test-bot-alex-car", photo_urls.car, "photo")
+    context.media.bot_city = ensure_media(bot_one.account.id, "test-bot-alex-city", photo_urls.city, "photo")
+    context.media.bot_two_portrait = ensure_media(bot_two.account.id, "test-bot-mia-portrait", photo_urls.portrait, "photo")
+    context.media.bot_video = ensure_media(bot_two.account.id, "test-bot-mia-video", video_url, "video")
+
+    seed_core(context)
+    seed_marketplace_and_pages(context)
+    seed_social_apps(context)
+    seed_private_and_services(context)
+    SkyPhone.RefreshSource(source)
+    return account.email
+end
+
+RegisterCommand(Config.TestData.Command, function(source)
+    if source <= 0 then
+        Bridge.Debug("warn", "[sky_phone] The test data command must be run by an in-game player.")
+        return
+    end
+    if Config.TestData.AdminOnly and not Bridge.Framework.HasAdminGroup(source, Config.TestData.AdminGroups) then
+        Bridge.Debug("warn", "[sky_phone] Source %s attempted to run the restricted test data command.", tostring(source))
+        TriggerClientEvent("sky_phone:testdata:feedback", source, false)
+        return
+    end
+    local now = os.time()
+    if seed_attempts[source] and now - seed_attempts[source] < 30 then
+        Bridge.Debug("warn", "[sky_phone] Source %s repeated the test data command too quickly.", tostring(source))
+        TriggerClientEvent("sky_phone:testdata:feedback", source, false)
+        return
+    end
+    seed_attempts[source] = now
+    local success, result = pcall(seed_for_source, source)
+    if not success then
+        Bridge.Debug("error", "[sky_phone] Test data seeding failed for source %s: %s", tostring(source), tostring(result))
+        TriggerClientEvent("sky_phone:testdata:feedback", source, false)
+        return
+    end
+    Bridge.Debug("info", "[sky_phone] Test data seeded for source %s.", tostring(source), { always = true })
+    TriggerClientEvent("sky_phone:testdata:feedback", source, true, result)
+end, false)
+
+AddEventHandler("playerDropped", function()
+    seed_attempts[source] = nil
+end)
+
+end)

From 8cdd5d3e15a7417af63c21674e0f5c477415a747 Mon Sep 17 00:00:00 2001
From: Alec Schitzkat <alecschitzkat@icloud.com>
Date: Wed, 12 Aug 2026 18:52:14 +0200
Subject: [PATCH 37/63] Auto stash before merge of "dev" and "origin/dev"

---
 README.md                                     |  39 ++-
 frontend/src/App.vue                          | 113 ++++++--
 frontend/src/assets/main.css                  |  68 +++--
 frontend/src/components/AppIcon.vue           |  62 +++--
 frontend/src/components/CustomAppFrame.vue    |   2 +
 frontend/src/components/DarkChatSelect.vue    |   5 +-
 frontend/src/components/EasyShareSheet.vue    |  30 ++-
 .../components/MessageAttachmentBubble.vue    |  41 ++-
 .../src/components/MessageContactBubble.vue   |   1 +
 frontend/src/components/PayphoneOverlay.vue   |   6 +-
 frontend/src/components/PhoneMediaCapture.vue | 236 ++++++++++++----
 frontend/src/components/SharedContentCard.vue |   1 +
 frontend/src/components/SimPhonePicker.vue    |   1 -
 frontend/src/components/SpringboardWidget.vue |  62 +++--
 .../src/components/SpringboardWidgetGrid.vue  |   3 +
 .../components/citymarkt/CityMarktSelect.vue  |   3 +
 .../components/feather/FeatherPostCard.vue    |  11 +
 frontend/src/stores/banking.test.ts           |  24 +-
 frontend/src/stores/banking.ts                |  20 +-
 frontend/src/stores/mail.test.ts              | 106 +++++++-
 frontend/src/stores/mail.ts                   |  48 +++-
 frontend/src/stores/notifications.test.ts     |  23 ++
 frontend/src/stores/notifications.ts          |  13 +-
 frontend/src/stores/phone-persistence.test.ts | 170 ++++++++++++
 frontend/src/stores/phone.ts                  |  78 +++++-
 frontend/src/utils/gameView.test.ts           |  93 ++++++-
 frontend/src/utils/gameView.ts                | 255 ++++++++++++------
 frontend/src/utils/homeLayout.test.ts         |  10 +
 frontend/src/utils/homeLayout.ts              |  30 +++
 frontend/src/utils/keyboard.test.ts           |  98 +++++++
 frontend/src/utils/keyboard.ts                |  47 ++++
 frontend/src/utils/mediaRecorder.test.ts      |  66 +++++
 frontend/src/utils/mediaRecorder.ts           |  62 +++++
 frontend/src/utils/musicEscape.test.ts        |  38 +++
 frontend/src/utils/musicEscape.ts             |  22 ++
 frontend/src/utils/nui.test.ts                |  63 +++++
 frontend/src/utils/nui.ts                     |  12 +-
 frontend/src/utils/preferences.test.ts        |  11 +
 frontend/src/utils/preferences.ts             |  18 +-
 frontend/src/utils/widgetLayout.test.ts       |  16 ++
 frontend/src/utils/widgetLayout.ts            |  27 ++
 frontend/src/views/SpringboardView.vue        |  30 +++
 frontend/src/views/apps/BankingApp.vue        | 113 ++++++--
 frontend/src/views/apps/BillingApp.vue        |  25 ++
 frontend/src/views/apps/CameraApp.vue         |  21 +-
 frontend/src/views/apps/CompaniesApp.vue      |   3 +-
 frontend/src/views/apps/CrewLinkApp.vue       |  37 ++-
 frontend/src/views/apps/DarkChatApp.vue       |   5 +-
 frontend/src/views/apps/FeatherApp.vue        | 101 ++++++-
 frontend/src/views/apps/FlareApp.vue          |  20 +-
 frontend/src/views/apps/FlipTokApp.vue        | 111 +++++++-
 frontend/src/views/apps/GalleryApp.vue        |  71 ++++-
 frontend/src/views/apps/MapApp.vue            |   3 +-
 frontend/src/views/apps/MessagesApp.vue       |   3 +-
 frontend/src/views/apps/MusicApp.vue          |  74 +++--
 frontend/src/views/apps/NotesApp.vue          |   3 +-
 frontend/src/views/apps/NumberMergeApp.vue    |  55 ++--
 frontend/src/views/apps/PhoneApp.vue          |   2 +-
 frontend/src/views/apps/PicstagramApp.vue     |   6 +
 frontend/testserver/index.cjs                 |   3 +-
 sky_phone/config/media.lua                    |   4 +-
 sky_phone/config/payphones.lua                | 248 +++++++++++++++++
 sky_phone/fxmanifest.lua                      |   3 +
 sky_phone/source/client/camera.lua            | 136 +++++++---
 sky_phone/source/client/crewlink.lua          |   4 +
 sky_phone/source/client/focus.lua             |  21 ++
 sky_phone/source/client/garage.lua            |   4 +
 sky_phone/source/client/housing.lua           |  53 ++--
 sky_phone/source/client/main.lua              | 244 ++++++++++++++---
 sky_phone/source/client/payphones.lua         |  69 +++--
 sky_phone/source/client/radio.lua             |  42 ++-
 sky_phone/source/client/skyride.lua           |   6 +-
 sky_phone/source/server/calls.lua             |  51 ++--
 sky_phone/source/server/darkchat.lua          |   8 +-
 sky_phone/source/server/db_migrate.lua        |  32 +++
 sky_phone/source/server/media.lua             |  77 ++++--
 sky_phone/source/server/messages.lua          |  11 +-
 sky_phone/source/server/payphones.lua         | 105 ++++++++
 sky_phone/source/server/phone.lua             |  27 +-
 sky_phone/source/server/sim.lua               |   8 +
 tests/client_focus.lua                        |  67 +++++
 tests/server_payphones.lua                    |  39 +++
 82 files changed, 3460 insertions(+), 519 deletions(-)
 create mode 100644 frontend/src/stores/phone-persistence.test.ts
 create mode 100644 frontend/src/utils/keyboard.test.ts
 create mode 100644 frontend/src/utils/keyboard.ts
 create mode 100644 frontend/src/utils/mediaRecorder.test.ts
 create mode 100644 frontend/src/utils/mediaRecorder.ts
 create mode 100644 frontend/src/utils/musicEscape.test.ts
 create mode 100644 frontend/src/utils/musicEscape.ts
 create mode 100644 frontend/src/utils/nui.test.ts
 create mode 100644 sky_phone/config/payphones.lua
 create mode 100644 sky_phone/source/client/focus.lua
 create mode 100644 sky_phone/source/server/payphones.lua
 create mode 100644 tests/client_focus.lua
 create mode 100644 tests/server_payphones.lua

diff --git a/README.md b/README.md
index c8019bf..4b8324a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,22 @@
 # sky_phone
 
+## Payphones
+
+Payphone dialing is validated against server-owned booth positions. Vanilla GTA V positions live
+in `sky_phone/config/payphones.lua`; the server compares its own player coordinates with this list
+and does not trust coordinates or models sent by the NUI or client.
+
+For a custom map or MLO, add each booth to `Config.Payphones.Locations` in that server-only file:
+
+```lua
+{ model = "prop_phonebox_01a", coords = { x = 123.45, y = 678.90, z = 21.0 } },
+```
+
+The model must also be present in `Config.Payphones.Props`. Coordinates must be finite Lua numbers
+inside the supported world bounds. Restart `sky_phone` after changing the list. If payphones are
+enabled but the list is empty or contains invalid entries, the server logs a visible warning and
+rejects calls that cannot be matched to a valid configured location.
+
 ## Custom Apps
 
 `sky_phone` erkennt Registrierungen gestarteter Fremd-App-Ressourcen über integrierte
@@ -167,23 +184,25 @@ and restart the resource after updating the configuration.
 - When `Config.Sim.Enabled = true`, two unique, non-stackable inventory items named `sky_phone_sim_registered` and `sky_phone_sim_anonymous`. Their metadata is initialized automatically on first use, so shops and crafting recipes add plain items without supplying a number. These item definitions are not required when SIM cards are disabled.
 - `oxmysql` with MySQL/MariaDB.
 - `pma-voice` when `Config.Calls.VoiceProvider` is set to `"pma"`.
-- A FiveManage V3 Media API token for Camera photo/video uploads and Gallery deletion. Set the
-  server-only `Config.Media.FiveManage.ApiKey` in `sky_phone/config/media.lua`; the token is never
-  sent to NUI because clients receive temporary presigned upload URLs instead.
+- A FiveManage V3 Media API token for Camera photo/video uploads and Gallery deletion. Set it as a
+  server-only convar; the token is never sent to NUI because clients receive temporary presigned
+  upload URLs instead:
+
+```cfg
+set sky_phone_fivemanage_api_key "replace-with-your-media-token"
+```
 - `yaca-voice`, `pma-voice`, or `saltychat` when the Radio app is enabled. `Config.Radio.VoiceProvider = "auto"` selects the first running provider in that order.
 
 ## Messages GIF provider
 
-Configure GIF search in `sky_phone/config/config.lua`:
+Configure GIF search as a server-only convar:
 
-```lua
-Config.Media.GiphyApiKey = "YOUR_GIPHY_API_KEY"
+```cfg
+set sky_phone_giphy_api_key "replace-with-your-giphy-api-key"
 ```
 
-GIPHY provides trending and searched GIFs through a paginated server-side proxy. The shared
-`config.lua` is loaded by both FiveM runtimes, so its values are available to clients even though
-only the server uses the GIPHY key. Photo and video actions in Messages are intentionally inactive
-until their dedicated implementation is available.
+GIPHY provides trending and searched GIFs through a paginated server-side proxy. Only the server
+reads the key. Photo and video actions in Messages use media captured by the Camera app.
 
 Database migrations run automatically. Existing `sky_phone_mail_accounts` installations are renamed to `sky_phone_accounts` while preserving account IDs and mail foreign keys. The migration also creates `sky_phone_character_devices` for persistent non-unique phone mappings and marks automatic SIMs through `sky_phone_sims.is_virtual`. iFruit passwords are intentional in-character credentials and remain plaintext `VARCHAR(64)` values; registration screens warn players never to reuse a real password.
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index acf5d8b..bbf35c1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -237,6 +237,9 @@ const REFERENCE_VIEWPORT_WIDTH = 1920
 const REFERENCE_VIEWPORT_HEIGHT = 1080
 const PHONE_BASE_SCALE = 0.69
 const DEVELOPMENT_PHONE_SCALE = 1.25
+const PHONE_PORTRAIT_WIDTH = 390
+const PHONE_PORTRAIT_HEIGHT = 844
+const MIN_PRODUCTION_PHONE_ZOOM = 260 / PHONE_PORTRAIT_WIDTH
 const isDevelopment = import.meta.env.DEV
 
 const phone = usePhoneStore()
@@ -291,11 +294,34 @@ const phoneBaseZoom = computed(
     viewportScale.value *
     (isDevelopment ? DEVELOPMENT_PHONE_SCALE : PHONE_BASE_SCALE),
 )
+const phoneZoom = computed(() => {
+  const preferred =
+    phoneBaseZoom.value * (phone.preferences.settings.phoneScale / 100)
+  if (isDevelopment) return preferred
+
+  const edgeGap = 24 * viewportScale.value
+  const shellWidth = phone.cameraLandscape
+    ? PHONE_PORTRAIT_HEIGHT
+    : PHONE_PORTRAIT_WIDTH
+  const shellHeight = phone.cameraLandscape
+    ? PHONE_PORTRAIT_WIDTH
+    : PHONE_PORTRAIT_HEIGHT
+  const viewportMaximum = Math.max(
+    0,
+    Math.min(
+      (window.innerWidth - edgeGap) / shellWidth,
+      (window.innerHeight - edgeGap) / shellHeight,
+    ),
+  )
+  return Math.min(
+    viewportMaximum,
+    Math.max(MIN_PRODUCTION_PHONE_ZOOM, preferred),
+  )
+})
 const phoneResolutionStyle = computed<CSSProperties>(() => ({
   '--phone-edge-gap': `${24 * viewportScale.value}px`,
   '--phone-stack-gap': `${16 * viewportScale.value}px`,
-  '--phone-zoom':
-    phoneBaseZoom.value * (phone.preferences.settings.phoneScale / 100),
+  '--phone-zoom': phoneZoom.value,
 }))
 const phoneStageStyle = computed<CSSProperties>(() => ({
   ...phoneResolutionStyle.value,
@@ -315,6 +341,8 @@ let pendingCompaniesChange: CompanyChangedPayload | null = null
 let unlockTimer: number | undefined
 let passcodeLockTimer: number | undefined
 let unlockedServicesFrame: number | undefined
+let phoneClosePending = false
+let simPickerClosePending = false
 
 function getViewportScale(): number {
   const heightScale = window.innerHeight / REFERENCE_VIEWPORT_HEIGHT
@@ -505,7 +533,7 @@ function onMessage(event: MessageEvent<AppMessage>): void {
     hydratePhone(event.data.data as PhoneOpenPayload)
   } else if (event.data?.type === 'app:close') {
     activitySuspended.value = false
-    phone.close()
+    phone.endDeviceSession()
   } else if (event.data?.type === 'app:suspend') {
     activitySuspended.value = true
   } else if (event.data?.type === 'app:resume') {
@@ -899,14 +927,69 @@ function onMessage(event: MessageEvent<AppMessage>): void {
   }
 }
 
+async function closeSimPicker(): Promise<void> {
+  if (simPickerClosePending || !simPicker.value) return
+  simPickerClosePending = true
+  const closingPicker = simPicker.value
+  try {
+    const response = await nuiCall('sim:picker-close')
+    if (response.success && simPicker.value === closingPicker) {
+      simPicker.value = null
+    }
+  } finally {
+    simPickerClosePending = false
+  }
+}
+
+async function closePhone(): Promise<void> {
+  if (phoneClosePending || !phone.isOpen) return
+  phoneClosePending = true
+  const closingGeneration = phone.persistenceGeneration
+  const closingImei = phone.device?.imei ?? null
+  const closingToken = phone.deviceSessionToken
+  try {
+    await phone.flushDevicePersistence()
+    if (
+      !phone.isOpen ||
+      phone.persistenceGeneration !== closingGeneration ||
+      (phone.device?.imei ?? null) !== closingImei ||
+      phone.deviceSessionToken !== closingToken
+    ) {
+      return
+    }
+    const response = await nuiCall('close')
+    if (
+      !response.success ||
+      !phone.isOpen ||
+      phone.persistenceGeneration !== closingGeneration ||
+      (phone.device?.imei ?? null) !== closingImei ||
+      phone.deviceSessionToken !== closingToken
+    ) {
+      return
+    }
+    phone.endDeviceSession()
+  } finally {
+    phoneClosePending = false
+  }
+}
+
 function onKeydown(event: KeyboardEvent): void {
-  if (event.key !== 'Escape' || !phone.isOpen || activitySuspended.value) return
-  if (controlCenterOpened.value) {
-    controlCenterOpened.value = false
+  if (event.key !== 'Escape') return
+  if (simPicker.value) {
+    event.preventDefault()
+    void closeSimPicker()
     return
   }
-  phone.close()
-  void nuiCall('close')
+
+  queueMicrotask(() => {
+    if (event.defaultPrevented || !phone.isOpen || activitySuspended.value)
+      return
+    if (controlCenterOpened.value) {
+      controlCenterOpened.value = false
+      return
+    }
+    void closePhone()
+  })
 }
 
 function onSystemColorSchemeChange(event: MediaQueryListEvent): void {
@@ -1051,7 +1134,7 @@ onMounted(() => {
   window.addEventListener('resize', updateViewportScale)
   systemColorScheme.addEventListener('change', onSystemColorSchemeChange)
   phone.setSystemDarkMode(systemColorScheme.matches)
-  void nuiCall('ui:ready')
+  void nuiCall('ui:ready', { protocolVersion: 1 })
   clockTicker = setInterval(() => {
     const now = Date.now()
     for (const alarm of clock.dueAlarms(now)) {
@@ -1116,11 +1199,9 @@ watch(
 )
 
 watch(
-  [() => notifications.requiresAttention, () => calls.activeCall],
-  ([requiresAttention, activeCall]) => {
-    void nuiCall('notification:focus', {
-      active: requiresAttention || activeCall !== null,
-    })
+  () => notifications.requiresAttention,
+  (requiresAttention) => {
+    void nuiCall('notification:focus', { active: requiresAttention })
   },
 )
 
@@ -1204,7 +1285,7 @@ onBeforeUnmount(() => {
     v-if="simPicker"
     :choices="simPicker.choices"
     :number="simPicker.number"
-    @close="simPicker = null"
+    @close="closeSimPicker"
   />
   <Transition name="phone-lift" appear>
     <main
@@ -1263,7 +1344,9 @@ onBeforeUnmount(() => {
                 :style="phoneDisplayStyle"
                 :class="{
                   dark: phone.isDarkMode,
+                  'phone-app--darkchat': route.params.appId === 'darkchat',
                   'phone-app--light': !phone.isDarkMode,
+                  'phone-app--messages': route.params.appId === 'messages',
                   [`phone-app--${phone.preferences.settings.graphicsMode}`]: true,
                   'phone-app--unlocking': isUnlocking,
                 }"
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 10e108c..2769c81 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -14,9 +14,13 @@
 .sim-picker {
   position: relative;
   width: min(58vh, 90vw);
-  max-height: 46vh;
-  overflow: clip;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  min-height: 0;
+  overflow: hidden;
   padding: 2.2vh;
+  display: flex;
+  flex-direction: column;
   border: 0.1vh solid rgb(255 255 255 / 12%);
   border-radius: 0.9vh;
   background: #050505;
@@ -56,11 +60,16 @@
 
 .sim-picker__header {
   display: flex;
+  flex: 0 0 auto;
   justify-content: space-between;
   gap: 2vh;
   margin-bottom: 1.6vh;
 }
 
+.sim-picker__header > div {
+  min-width: 0;
+}
+
 .sim-picker__header h1,
 .sim-picker__confirmation h2 {
   margin: 0;
@@ -73,6 +82,7 @@
   margin: 0.45vh 0 0;
   color: #9ca3af;
   font-size: 1.15vh;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__close {
@@ -80,6 +90,8 @@
   place-items: center;
   width: 2.8vh;
   height: 2.8vh;
+  min-width: 32px;
+  min-height: 32px;
   border: 0;
   border-radius: 0.35vh;
   background: #1dd1ce;
@@ -96,10 +108,12 @@
   position: relative;
   z-index: 1;
   display: grid;
+  flex: 1 1 auto;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1vh;
-  max-height: 34vh;
-  overflow: auto;
+  min-height: 0;
+  max-height: 54vh;
+  overflow-y: auto;
 }
 
 .sim-picker__card {
@@ -140,30 +154,34 @@
 }
 
 .sim-picker__details strong {
-  overflow: hidden;
   font-size: 1.2vh;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__details small {
   color: #9ca3af;
   font-size: 0.95vh;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__confirmation {
+  min-height: 0;
+  overflow-y: auto;
   padding: 2vh 0 0;
   text-align: center;
 }
 
 .sim-picker__confirmation > div {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   gap: 1vh;
   margin-top: 2vh;
 }
 
 .sim-picker__confirmation button {
+  min-height: 40px;
+  overflow-wrap: anywhere;
   padding: 0.8vh 1.6vh;
   border: 0.1vh solid rgb(255 255 255 / 18%);
   border-radius: 0.45vh;
@@ -184,6 +202,13 @@
   color: #ff453a;
   font-size: 1vh;
   text-align: center;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 640px) {
+  .sim-picker__cards {
+    grid-template-columns: 1fr;
+  }
 }
 :root {
   font-family:
@@ -205,6 +230,7 @@ body,
   margin: 0;
   overflow: hidden;
   background: transparent !important;
+  pointer-events: none;
   user-select: none;
 }
 button,
@@ -885,13 +911,13 @@ button {
 }
 
 /* DarkChat is intentionally independent from the phone appearance setting. */
-.phone-app:has(.darkchat-page),
-.phone-app:has(.darkchat-page) .phone-app-window,
-.phone-app:has(.darkchat-page) .phone-app-window__content {
+.phone-app--darkchat,
+.phone-app--darkchat .phone-app-window,
+.phone-app--darkchat .phone-app-window__content {
   background: #000 !important;
   color-scheme: dark;
 }
-.phone-app:has(.darkchat-page) .phone-status-bar {
+.phone-app--darkchat .phone-status-bar {
   color: #fff !important;
   --status-bar-color: #fff;
 }
@@ -1592,7 +1618,7 @@ button {
   font-size: 9px;
   white-space: nowrap;
 }
-.darkchat-message:has(.darkchat-reactions) {
+.darkchat-message {
   margin-bottom: 12px;
 }
 .darkchat-replying {
@@ -3714,7 +3740,7 @@ button {
 .clock-world-time {
   margin-top: 8px;
   font-variant-numeric: tabular-nums;
-  font-size: min(76px, 20cqw);
+  font-size: 74px;
   font-weight: 200;
   letter-spacing: -4px;
 }
@@ -3861,7 +3887,7 @@ button {
 .clock-digits {
   margin: 70px 0 54px;
   font-variant-numeric: tabular-nums;
-  font-size: min(52px, 14cqw);
+  font-size: 52px;
   font-weight: 200;
 }
 .clock-sound-menu {
@@ -4242,11 +4268,11 @@ button {
   background: #fff !important;
   color: #111;
 }
-.phone-app:has(.messages-page) .phone-status-bar {
+.phone-app--messages .phone-status-bar {
   color: #080808;
   text-shadow: none;
 }
-.phone-app:has(.messages-page)::before {
+.phone-app--messages::before {
   content: '';
   position: absolute;
   z-index: 60;
@@ -5458,7 +5484,7 @@ button {
   }
 }
 /* iOS 26-style Liquid Glass refinements and complete media pickers. */
-.phone-app:has(.messages-page) {
+.messages-page {
   --ios-glass: rgb(252 252 255 / 70%);
   --ios-glass-strong: rgb(255 255 255 / 86%);
   --ios-glass-border: rgb(255 255 255 / 72%);
@@ -5779,21 +5805,21 @@ button {
 .messages-attachment--video small {
   z-index: 2;
 }
-.messages-attachment--gif:has(img) {
+.messages-attachment--gif {
   background: #e9e9ed;
 }
 
 /* Konsta's k-app dark state drives the complete iOS Messages palette. */
-.phone-app.dark:has(.messages-page) {
+.phone-app.dark .messages-page {
   --ios-glass: rgb(28 28 30 / 76%);
   --ios-glass-strong: rgb(36 36 38 / 90%);
   --ios-glass-border: rgb(255 255 255 / 12%);
   color-scheme: dark;
 }
-.phone-app.dark:has(.messages-page)::before {
+.phone-app--messages.dark::before {
   background: #000;
 }
-.phone-app.dark:has(.messages-page) .phone-status-bar {
+.phone-app--messages.dark .phone-status-bar {
   color: #fff;
   text-shadow: none;
 }
diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index 17fb331..8e2da12 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -12,6 +12,10 @@ import { useMarketplaceStore } from '@/stores/marketplace'
 import { useDarkChatStore } from '@/stores/darkchat'
 import { usePhoneStore } from '@/stores/phone'
 import type { PhoneAppDefinition } from '@/types/apps'
+import {
+  reorderDirectionFromKeyboard,
+  type ReorderDirection,
+} from '@/utils/keyboard'
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +37,7 @@ const emit = defineEmits<{
   dragstart: [event: PointerEvent]
   edit: []
   remove: []
+  reorder: [direction: ReorderDirection]
 }>()
 
 const phone = usePhoneStore()
@@ -65,6 +70,8 @@ const suppressClick = ref(false)
 let holdTimer: number | undefined
 let calendarTimer: number | undefined
 let pointerStart = { x: 0, y: 0 }
+let pointerTarget: HTMLElement | null = null
+let pointerId: number | null = null
 
 watch(
   () => props.app.iconImage,
@@ -135,6 +142,9 @@ function clearHold(): void {
 
 function onPointerDown(event: PointerEvent): void {
   if (props.compact || event.button !== 0) return
+  pointerTarget = event.currentTarget as HTMLElement
+  pointerId = event.pointerId
+  pointerTarget.setPointerCapture(pointerId)
   pointerStart = { x: event.clientX, y: event.clientY }
   clearHold()
   if (props.editMode) {
@@ -173,35 +183,48 @@ function beginPointerDrag(event: PointerEvent): void {
       .closest<HTMLElement>('.springboard-page')
       ?.getBoundingClientRect().width ?? 0
   isDragging.value = true
-  window.addEventListener('pointermove', onPointerMove)
-  window.addEventListener('pointerup', onPointerUp)
-  window.addEventListener('pointercancel', cancelPointerDrag)
   emit('dragstart', event)
 }
 
 function onPointerUp(event: PointerEvent): void {
   clearHold()
-  if (!isDragging.value) return
-  suppressClick.value = true
-  emit('dragend', event)
-  isDragging.value = false
-  dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
+  if (isDragging.value) {
+    suppressClick.value = true
+    emit('dragend', event)
+    isDragging.value = false
+    dragOffset.value = { x: 0, y: 0 }
+  }
+  releasePointerCapture()
 }
 
 function cancelPointerDrag(): void {
   clearHold()
-  if (!isDragging.value) return
+  const wasDragging = isDragging.value
   isDragging.value = false
   dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
-  emit('dragcancel')
+  releasePointerCapture()
+  if (wasDragging) emit('dragcancel')
 }
 
-function removeDragListeners(): void {
-  window.removeEventListener('pointermove', onPointerMove)
-  window.removeEventListener('pointerup', onPointerUp)
-  window.removeEventListener('pointercancel', cancelPointerDrag)
+function releasePointerCapture(): void {
+  if (
+    pointerTarget &&
+    pointerId !== null &&
+    pointerTarget.hasPointerCapture(pointerId)
+  ) {
+    pointerTarget.releasePointerCapture(pointerId)
+  }
+  pointerTarget = null
+  pointerId = null
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!props.editMode) return
+  const direction = reorderDirectionFromKeyboard(event)
+  if (!direction) return
+  event.preventDefault()
+  event.stopPropagation()
+  emit('reorder', direction)
 }
 
 onMounted(() => {
@@ -214,7 +237,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   clearHold()
   if (calendarTimer !== undefined) window.clearInterval(calendarTimer)
-  removeDragListeners()
+  releasePointerCapture()
 })
 </script>
 
@@ -234,10 +257,15 @@ onBeforeUnmount(() => {
       type="button"
       :aria-label="getPhoneAppLabel(app, phone.t)"
       :aria-disabled="!app.route"
+      :aria-keyshortcuts="
+        editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
+      "
       @click="launch"
       @contextmenu.prevent
+      @keydown="onKeydown"
       @pointercancel="cancelPointerDrag"
       @pointerdown="onPointerDown"
+      @lostpointercapture="cancelPointerDrag"
       @pointerleave="isDragging || clearHold()"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
index bc6d973..135be23 100644
--- a/frontend/src/components/CustomAppFrame.vue
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -447,6 +447,8 @@ watch(() => catalog.openRequests[props.app.id], flushOpenRequest, {
   right: auto;
   bottom: auto;
   left: 50%;
+  width: 827px;
+  height: 368px;
   width: 100cqh;
   height: 100cqw;
   transform: translate(-50%, -50%) rotate(90deg);
diff --git a/frontend/src/components/DarkChatSelect.vue b/frontend/src/components/DarkChatSelect.vue
index 804ae57..baa33d1 100644
--- a/frontend/src/components/DarkChatSelect.vue
+++ b/frontend/src/components/DarkChatSelect.vue
@@ -35,7 +35,10 @@ function closeFromOutside(event: PointerEvent): void {
 }
 
 function closeFromEscape(event: KeyboardEvent): void {
-  if (event.key === 'Escape') opened.value = false
+  if (event.key !== 'Escape' || !opened.value) return
+  event.preventDefault()
+  event.stopPropagation()
+  opened.value = false
 }
 
 onMounted(() => {
diff --git a/frontend/src/components/EasyShareSheet.vue b/frontend/src/components/EasyShareSheet.vue
index 9e83d30..48da343 100644
--- a/frontend/src/components/EasyShareSheet.vue
+++ b/frontend/src/components/EasyShareSheet.vue
@@ -9,7 +9,7 @@ import {
   UserRound,
   X,
 } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { getPhoneApp, getPhoneAppLabel } from '@/config/apps'
@@ -30,6 +30,7 @@ import {
   easyShareDestinationAppIds,
   openEasySharePayload,
 } from '@/utils/easyshare'
+import { consumeEscape } from '@/utils/keyboard'
 
 const phone = usePhoneStore()
 const appStore = useAppStoreStore()
@@ -113,11 +114,8 @@ const shareApps = computed(() =>
       return app ? [{ app, id }] : []
     }),
 )
-const sheetStyle = computed(() => ({
-  transform: easyShare.opened
-    ? `translateY(calc(-100% + ${dragOffset.value}px))`
-    : undefined,
-  transitionDuration: dragging.value ? '0ms' : undefined,
+const hostStyle = computed(() => ({
+  '--easyshare-drag-offset': `${dragOffset.value}px`,
 }))
 
 function label(key: string, params?: Record<string, string>): string {
@@ -155,6 +153,11 @@ function close(): void {
   easyShare.close()
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  if (!easyShare.opened || !consumeEscape(event)) return
+  close()
+}
+
 function beginDrag(event: PointerEvent): void {
   if (!easyShare.opened || event.button !== 0) return
   dragPointerId = event.pointerId
@@ -240,17 +243,22 @@ async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
   close()
   await openEasySharePayload(router, transfer.payload)
 }
+
+onMounted(() => window.addEventListener('keydown', onKeydown, true))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown, true))
 </script>
 
 <template>
   <div
     class="easyshare-host"
-    :class="{ 'easyshare-host--opened': easyShare.opened }"
+    :class="{
+      'easyshare-host--dragging': dragging,
+      'easyshare-host--opened': easyShare.opened,
+    }"
+    :style="hostStyle"
   >
     <k-sheet
       :opened="easyShare.opened"
-      class="easyshare-sheet"
-      :style="sheetStyle"
       @backdropclick="close"
     >
       <div class="easyshare-panel">
@@ -407,7 +415,9 @@ async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
 </template>
 
 <style scoped>
-.easyshare-host{position:absolute;z-index:95;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)}.easyshare-host--opened{pointer-events:auto}.easyshare-sheet{z-index:9500;width:100%;max-width:none}.easyshare-panel{position:relative;max-height:78cqh;overflow:hidden;padding:8px 14px calc(18px + var(--k-safe-area-bottom));border-radius:30px 30px 0 0;color:var(--easyshare-text,#f7f7f7);background:color-mix(in srgb,var(--k-ios-dark-surface-1,#1c1c1e) 92%,transparent);backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45)}.phone-app--light .easyshare-panel{--easyshare-text:#171719;background:color-mix(in srgb,#f2f2f7 93%,transparent)}.easyshare-grabber{width:38px;height:5px;margin:0 auto 10px;border-radius:999px;background:#8e8e9390;cursor:grab;touch-action:none}.easyshare-grabber:active{cursor:grabbing}.easyshare-header{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:11px;padding:5px 2px 14px;border-bottom:1px solid #8e8e9345}.easyshare-header>img,.easyshare-header__fallback{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;object-fit:cover;background:#0a84ff;color:white}.easyshare-header div{min-width:0}.easyshare-header small,.easyshare-header strong,.easyshare-header p{display:block;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.easyshare-header small{font-size:11px;color:#8e8e93}.easyshare-header strong{font-size:17px}.easyshare-header p{margin-top:2px;font-size:12px;color:#a1a1a6}.easyshare-row{display:flex;gap:12px;overflow-x:auto;padding:16px 2px;scrollbar-width:none}.easyshare-row::-webkit-scrollbar{display:none}.easyshare-row+.easyshare-row{border-top:1px solid #8e8e9345}.easyshare-row--people{min-height:114px;align-items:flex-start}.easyshare-person,.easyshare-action{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;text-align:center}.easyshare-person{min-height:98px;gap:14px}.easyshare-person small,.easyshare-action small{position:relative;z-index:3;display:-webkit-box;width:72px;max-height:26px;min-height:26px;overflow:hidden;font-size:11px;line-height:13px;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.easyshare-avatar{position:relative;isolation:isolate;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#6e6e73,#2c2c2e);color:white}.easyshare-avatar>img{position:absolute;z-index:0;inset:0;display:block;width:58px;height:58px;max-width:none;border-radius:50%;clip-path:circle(50% at 50% 50%);object-fit:cover}.easyshare-avatar>b{position:relative;z-index:1;font-size:17px}.easyshare-avatar>i{position:absolute;z-index:2;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid #1c1c1e;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:#34c759;color:white}.easyshare-avatar>i img{width:100%;height:100%;object-fit:cover}.easyshare-action__icon,.easyshare-action__app{width:57px;height:57px;border-radius:15px;display:grid;place-items:center;background:#ffffff20}.easyshare-action__icon svg{width:27px}.easyshare-action__icon--nearby{background:radial-gradient(circle at 50% 70%,#0a84ff 0 15%,#142d59 16% 29%,#0a84ff 30% 35%,#101722 36%);color:white}.easyshare-action__app img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.easyshare-detail{min-height:245px;max-height:56cqh;overflow-y:auto;padding-top:8px}.easyshare-detail__toolbar{height:37px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.easyshare-detail__toolbar>:last-child{justify-self:end}.easyshare-visibility{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:#ffffff14}.easyshare-visibility select{min-width:0;flex:1;border:0;color:inherit;background:transparent;text-align:right}.easyshare-incoming,.easyshare-transfer{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0;padding:12px!important;border-radius:18px!important}.easyshare-incoming div,.easyshare-transfer div{min-width:0}.easyshare-incoming small,.easyshare-transfer small{display:block;color:#a1a1a6}.easyshare-incoming__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.easyshare-incoming__actions :deep(.button){margin:0}.easyshare-transfer{grid-template-columns:1fr auto}.easyshare-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:#8e8e9340}.easyshare-progress i{display:block;height:100%;border-radius:inherit;background:#0a84ff;transition:width .25s ease}.easyshare-targets{display:grid;gap:7px}.easyshare-targets button,.easyshare-history article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:inherit;background:#ffffff10;text-align:left}.easyshare-targets button>span,.easyshare-history article>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{display:block}.easyshare-targets small,.easyshare-history small{color:#a1a1a6;font-size:11px}.easyshare-history{display:grid;gap:7px;padding-top:8px}.easyshare-empty,.easyshare-loading{padding:35px 10px;text-align:center;color:#8e8e93}.easyshare-feedback{margin:8px 0 0;text-align:center;color:#0a84ff;font-size:12px}
+.easyshare-host{position:absolute;z-index:95;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)}.easyshare-host--opened{pointer-events:auto}.easyshare-panel{position:relative;max-height:78cqh;overflow:hidden;padding:8px 14px calc(18px + var(--k-safe-area-bottom));border-radius:30px 30px 0 0;color:var(--easyshare-text,#f7f7f7);background:color-mix(in srgb,var(--k-ios-dark-surface-1,#1c1c1e) 92%,transparent);backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45)}.phone-app--light .easyshare-panel{--easyshare-text:#171719;background:color-mix(in srgb,#f2f2f7 93%,transparent)}.easyshare-grabber{width:38px;height:5px;margin:0 auto 10px;border-radius:999px;background:#8e8e9390;cursor:grab;touch-action:none}.easyshare-grabber:active{cursor:grabbing}.easyshare-header{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:11px;padding:5px 2px 14px;border-bottom:1px solid #8e8e9345}.easyshare-header>img,.easyshare-header__fallback{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;object-fit:cover;background:#0a84ff;color:white}.easyshare-header div{min-width:0}.easyshare-header small,.easyshare-header strong,.easyshare-header p{display:block;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.easyshare-header small{font-size:11px;color:#8e8e93}.easyshare-header strong{font-size:17px}.easyshare-header p{margin-top:2px;font-size:12px;color:#a1a1a6}.easyshare-row{display:flex;gap:12px;overflow-x:auto;padding:16px 2px;scrollbar-width:none}.easyshare-row::-webkit-scrollbar{display:none}.easyshare-row+.easyshare-row{border-top:1px solid #8e8e9345}.easyshare-row--people{min-height:114px;align-items:flex-start}.easyshare-person,.easyshare-action{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;text-align:center}.easyshare-person{min-height:98px;gap:14px}.easyshare-person small,.easyshare-action small{position:relative;z-index:3;display:-webkit-box;width:72px;max-height:26px;min-height:26px;overflow:hidden;font-size:11px;line-height:13px;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.easyshare-avatar{position:relative;isolation:isolate;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#6e6e73,#2c2c2e);color:white}.easyshare-avatar>img{position:absolute;z-index:0;inset:0;display:block;width:58px;height:58px;max-width:none;border-radius:50%;clip-path:circle(50% at 50% 50%);object-fit:cover}.easyshare-avatar>b{position:relative;z-index:1;font-size:17px}.easyshare-avatar>i{position:absolute;z-index:2;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid #1c1c1e;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:#34c759;color:white}.easyshare-avatar>i img{width:100%;height:100%;object-fit:cover}.easyshare-action__icon,.easyshare-action__app{width:57px;height:57px;border-radius:15px;display:grid;place-items:center;background:#ffffff20}.easyshare-action__icon svg{width:27px}.easyshare-action__icon--nearby{background:radial-gradient(circle at 50% 70%,#0a84ff 0 15%,#142d59 16% 29%,#0a84ff 30% 35%,#101722 36%);color:white}.easyshare-action__app img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.easyshare-detail{min-height:245px;max-height:56cqh;overflow-y:auto;padding-top:8px}.easyshare-detail__toolbar{height:37px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.easyshare-detail__toolbar>:last-child{justify-self:end}.easyshare-visibility{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:#ffffff14}.easyshare-visibility select{min-width:0;flex:1;border:0;color:inherit;background:transparent;text-align:right}.easyshare-incoming,.easyshare-transfer{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0;padding:12px!important;border-radius:18px!important}.easyshare-incoming div,.easyshare-transfer div{min-width:0}.easyshare-incoming small,.easyshare-transfer small{display:block;color:#a1a1a6}.easyshare-incoming__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.easyshare-incoming__actions :deep(.button){margin:0}.easyshare-transfer{grid-template-columns:1fr auto}.easyshare-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:#8e8e9340}.easyshare-progress i{display:block;height:100%;border-radius:inherit;background:#0a84ff;transition:width .25s ease}.easyshare-targets{display:grid;gap:7px}.easyshare-targets button,.easyshare-history article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:inherit;background:#ffffff10;text-align:left}.easyshare-targets button>span,.easyshare-history article>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{display:block}.easyshare-targets small,.easyshare-history small{color:#a1a1a6;font-size:11px}.easyshare-history{display:grid;gap:7px;padding-top:8px}.easyshare-empty,.easyshare-loading{padding:35px 10px;text-align:center;color:#8e8e93}.easyshare-feedback{margin:8px 0 0;text-align:center;color:#0a84ff;font-size:12px}
+.easyshare-host :deep(.k-sheet){z-index:9500;width:100%;max-width:none}.easyshare-host--opened :deep(.k-sheet){transform:translateY(calc(-100% + var(--easyshare-drag-offset,0px)))}.easyshare-host--dragging :deep(.k-sheet){transition-duration:0ms}.easyshare-panel{max-height:645px;background:rgb(28 28 30 / 92%)}.phone-app--light .easyshare-panel{background:rgb(242 242 247 / 93%)}.easyshare-detail{max-height:463px}.easyshare-targets button>div,.easyshare-history article>div{min-width:0}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{overflow-wrap:anywhere}
+@supports (container-type: size){.easyshare-panel{max-height:78cqh}.easyshare-detail{max-height:56cqh}}
 .easyshare-action__icon--nearby {
   position: relative;
   overflow: hidden;
diff --git a/frontend/src/components/MessageAttachmentBubble.vue b/frontend/src/components/MessageAttachmentBubble.vue
index 729eaed..3db3d83 100644
--- a/frontend/src/components/MessageAttachmentBubble.vue
+++ b/frontend/src/components/MessageAttachmentBubble.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Camera, Pause, Play } from 'lucide-vue-next'
+import { Camera, Pause, Play, TriangleAlert } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
+import { usePhoneStore } from '@/stores/phone'
 import type { SmsMessageType } from '@/types/messages'
 
 type MessageAttachment = {
@@ -11,7 +12,9 @@ type MessageAttachment = {
 }
 
 const props = defineProps<{ message: MessageAttachment }>()
+const phone = usePhoneStore()
 const playing = ref(false)
+const playbackFailed = ref(false)
 const video = ref<HTMLVideoElement>()
 
 const imageStyles: Record<string, string> = {
@@ -55,9 +58,18 @@ async function toggleVideo(): Promise<void> {
     playing.value = !playing.value
     return
   }
-  if (video.value.paused) await video.value.play()
-  else video.value.pause()
-  playing.value = !video.value.paused
+  if (!video.value.paused) {
+    video.value.pause()
+    return
+  }
+  playbackFailed.value = false
+  try {
+    await video.value.play()
+  } catch (error) {
+    playing.value = false
+    playbackFailed.value = true
+    console.error('[Messages] Could not play the attached video.', error)
+  }
 }
 
 function durationLabel(milliseconds: number | null): string {
@@ -85,8 +97,13 @@ function durationLabel(milliseconds: number | null): string {
     v-else-if="message.message_type === 'video'"
     type="button"
     class="messages-attachment messages-attachment--video"
-    :class="{ playing }"
+    :class="{ playing, 'messages-attachment--failed': playbackFailed }"
     :style="{ background }"
+    :aria-label="
+      playbackFailed
+        ? phone.t('Apps.photos.errors.unsupported')
+        : phone.t('Apps.photos.videoAlt')
+    "
     @click="toggleVideo"
   >
     <video
@@ -95,15 +112,25 @@ function durationLabel(milliseconds: number | null): string {
       :src="mediaUrl"
       playsinline
       preload="metadata"
+      @play="playing = true"
+      @pause="playing = false"
       @ended="playing = false"
+      @error="playbackFailed = true"
     />
     <span
-      ><Pause v-if="playing" :size="22" fill="currentColor" /><Play
+      ><TriangleAlert v-if="playbackFailed" :size="22" /><Pause
+        v-else-if="playing"
+        :size="22"
+        fill="currentColor"
+      /><Play
         v-else
         :size="22"
         fill="currentColor"
     /></span>
-    <small>{{ durationLabel(message.media_duration_ms) }}</small>
+    <small v-if="playbackFailed">{{
+      phone.t('Apps.photos.errors.unsupported')
+    }}</small>
+    <small v-else>{{ durationLabel(message.media_duration_ms) }}</small>
   </button>
   <div v-else class="messages-attachment messages-attachment--gif">
     <img
diff --git a/frontend/src/components/MessageContactBubble.vue b/frontend/src/components/MessageContactBubble.vue
index 0ee78bc..e50fba7 100644
--- a/frontend/src/components/MessageContactBubble.vue
+++ b/frontend/src/components/MessageContactBubble.vue
@@ -81,6 +81,7 @@ const initials = computed(() =>
 
 <style scoped>
 .message-contact-card {
+  width: min(258px, 100%);
   width: min(258px, 72cqw);
   overflow: hidden;
   border: 1px solid rgb(255 255 255 / 48%);
diff --git a/frontend/src/components/PayphoneOverlay.vue b/frontend/src/components/PayphoneOverlay.vue
index cf547c1..eb1fbd3 100644
--- a/frontend/src/components/PayphoneOverlay.vue
+++ b/frontend/src/components/PayphoneOverlay.vue
@@ -239,6 +239,7 @@ function onKeydown(event: KeyboardEvent): void {
   if (!visible.value) return
   if (event.key === 'Escape') {
     event.preventDefault()
+    event.stopImmediatePropagation()
     void close()
     return
   }
@@ -256,7 +257,7 @@ function onKeydown(event: KeyboardEvent): void {
 onMounted(() => {
   prepareButtonSounds()
   window.addEventListener('message', onMessage)
-  window.addEventListener('keydown', onKeydown)
+  window.addEventListener('keydown', onKeydown, true)
   ticker = window.setInterval(() => {
     now.value = Date.now()
   }, 250)
@@ -264,7 +265,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('message', onMessage)
-  window.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('keydown', onKeydown, true)
   if (ticker !== undefined) window.clearInterval(ticker)
   for (const sound of buttonSounds) {
     sound.pause()
@@ -399,6 +400,7 @@ onBeforeUnmount(() => {
     rgb(0 0 0 / 84%) 72%
   );
   font-family: 'Segoe UI', Arial, sans-serif;
+  pointer-events: auto;
   user-select: none;
 }
 
diff --git a/frontend/src/components/PhoneMediaCapture.vue b/frontend/src/components/PhoneMediaCapture.vue
index eeb4c80..b10eaa9 100644
--- a/frontend/src/components/PhoneMediaCapture.vue
+++ b/frontend/src/components/PhoneMediaCapture.vue
@@ -4,6 +4,11 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 import type { UploadReady } from '@/types/media'
 import { createGameView, type GameView } from '@/utils/gameView'
+import {
+  bindMediaRecorderError,
+  setBoundedMapEntry,
+  stopMediaRecorder,
+} from '@/utils/mediaRecorder'
 import { nuiCall } from '@/utils/nui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
@@ -12,6 +17,7 @@ type PendingVideo = { blob: Blob; fileName: string }
 
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const pendingVideos = new Map<string, PendingVideo>()
+const maxPendingVideos = 3
 const captureFps = 30
 const maxCaptureEdge = 720
 const portraitAspect = 3 / 4
@@ -23,12 +29,16 @@ let gameView: GameView | null = null
 let renderFrameId: number | undefined
 let lastRenderAt = 0
 let recorder: MediaRecorder | null = null
+let recordingStarting = false
 let stream: MediaStream | null = null
 let microphoneStream: MediaStream | null = null
 let chunks: RecordingChunk[] = []
 let lastChunkAt = 0
 let lastChunkTimecode: number | null = null
+let recordingStartedAt = 0
+let recordingGeneration = 0
 let flushTimer: number | undefined
+let removeRecorderErrorListener: (() => void) | null = null
 
 function captureDimensions(): { height: number; width: number } {
   return landscape
@@ -54,7 +64,11 @@ function ensureGameView(): GameView {
   if (gameView && !gameView.isLost()) return gameView
   gameView?.dispose()
   const dimensions = captureDimensions()
-  gameView = createGameView(canvasRef.value)
+  gameView = createGameView(canvasRef.value, {
+    onContextRestored: () => {
+      if (recorder?.state === 'recording') startRenderLoop()
+    },
+  })
   gameView.resize(
     dimensions.width,
     dimensions.height,
@@ -93,6 +107,7 @@ function resetRecording(): void {
   chunks = []
   lastChunkAt = 0
   lastChunkTimecode = null
+  recordingStartedAt = 0
 }
 
 function stopTracks(): void {
@@ -103,8 +118,22 @@ function stopTracks(): void {
 }
 
 function cleanupRecording(): void {
-  if (recorder && recorder.state !== 'inactive') recorder.stop()
+  recordingGeneration += 1
+  recordingStarting = false
+  const activeRecorder = recorder
   recorder = null
+  removeRecorderErrorListener?.()
+  removeRecorderErrorListener = null
+  if (activeRecorder) {
+    activeRecorder.ondataavailable = null
+    if (activeRecorder.state !== 'inactive') {
+      try {
+        activeRecorder.stop()
+      } catch (error) {
+        console.error('[Camera] Could not stop the failed media recorder.', error)
+      }
+    }
+  }
   stopTracks()
   if (flushTimer !== undefined) window.clearInterval(flushTimer)
   flushTimer = undefined
@@ -114,7 +143,7 @@ function cleanupRecording(): void {
 }
 
 async function startRecording(data: Record<string, unknown>): Promise<void> {
-  if (recorder) return
+  if (recorder || recordingStarting) return
   if (typeof MediaRecorder === 'undefined') {
     window.postMessage(
       {
@@ -129,7 +158,22 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
   if (Number.isFinite(configuredBitrate) && configuredBitrate > 0) {
     bitrateBps = Math.round(configuredBitrate * 1000)
   }
-  startRenderLoop()
+  try {
+    startRenderLoop()
+  } catch (error) {
+    console.error('[Camera] Could not start game-view recording.', error)
+    cleanupRecording()
+    window.postMessage(
+      {
+        data: { error: 'capture_failed', success: false },
+        type: 'camera:recordError',
+      },
+      '*',
+    )
+    return
+  }
+  recordingStarting = true
+  const generation = ++recordingGeneration
   resetRecording()
   const videoStream = canvasRef.value?.captureStream(captureFps) ?? null
   if (!videoStream) {
@@ -138,15 +182,23 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
   }
   if (data.microphoneEnabled === true) {
     try {
-      microphoneStream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          autoGainControl: true,
-          echoCancellation: true,
-          noiseSuppression: true,
-        },
-      })
+      const acquiredMicrophoneStream =
+        await navigator.mediaDevices.getUserMedia({
+          audio: {
+            autoGainControl: true,
+            echoCancellation: true,
+            noiseSuppression: true,
+          },
+        })
+      if (generation !== recordingGeneration) {
+        acquiredMicrophoneStream.getTracks().forEach((track) => track.stop())
+        videoStream.getTracks().forEach((track) => track.stop())
+        return
+      }
+      microphoneStream = acquiredMicrophoneStream
     } catch {
       videoStream.getTracks().forEach((track) => track.stop())
+      if (generation !== recordingGeneration) return
       cleanupRecording()
       window.postMessage(
         {
@@ -162,16 +214,51 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
     ...videoStream.getVideoTracks(),
     ...(microphoneStream?.getAudioTracks() ?? []),
   ])
+  if (generation !== recordingGeneration) {
+    stopTracks()
+    stopRenderLoop()
+    return
+  }
   const mimeType = [
     'video/webm;codecs=vp8,opus',
     'video/webm;codecs=vp8',
     'video/webm',
   ].find((type) => MediaRecorder.isTypeSupported(type))
-  recorder = new MediaRecorder(stream, {
-    ...(mimeType ? { mimeType } : {}),
-    audioBitsPerSecond: 128_000,
-    videoBitsPerSecond: bitrateBps,
-  })
+  try {
+    recorder = new MediaRecorder(stream, {
+      ...(mimeType ? { mimeType } : {}),
+      audioBitsPerSecond: 128_000,
+      videoBitsPerSecond: bitrateBps,
+    })
+  } catch (error) {
+    console.error('[Camera] Could not create the media recorder.', error)
+    cleanupRecording()
+    window.postMessage(
+      {
+        data: { error: 'unsupported', success: false },
+        type: 'camera:recordError',
+      },
+      '*',
+    )
+    return
+  }
+  const activeRecorder = recorder
+  removeRecorderErrorListener = bindMediaRecorderError(
+    activeRecorder,
+    () =>
+      generation === recordingGeneration && recorder === activeRecorder,
+    (event) => {
+      console.error('[Camera] Media recorder failed while recording.', event)
+      cleanupRecording()
+      window.postMessage(
+        {
+          data: { error: 'capture_failed', success: false },
+          type: 'camera:recordError',
+        },
+        '*',
+      )
+    },
+  )
   recorder.ondataavailable = (event) => {
     if (!event.data.size) return
     const now = Date.now()
@@ -186,7 +273,22 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
     lastChunkAt = now
     chunks.push({ blob: event.data, durationMs })
   }
-  recorder.start()
+  try {
+    recorder.start()
+  } catch (error) {
+    console.error('[Camera] Could not start the media recorder.', error)
+    cleanupRecording()
+    window.postMessage(
+      {
+        data: { error: 'capture_failed', success: false },
+        type: 'camera:recordError',
+      },
+      '*',
+    )
+    return
+  }
+  recordingStartedAt = Date.now()
+  recordingStarting = false
   flushTimer = window.setInterval(() => {
     if (recorder?.state === 'recording') recorder.requestData()
   }, 1000)
@@ -196,37 +298,78 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
 async function stopRecording(data: Record<string, unknown>): Promise<void> {
   const correlationId = String(data.correlationId ?? '')
   if (!recorder || recorder.state === 'inactive' || !correlationId) return
+  const generation = recordingGeneration
+  const activeRecorder = recorder
   postRecordState(false, true)
-  recorder.requestData()
-  await new Promise((resolve) => window.setTimeout(resolve, 120))
-  recorder.stop()
-  await new Promise((resolve) => window.setTimeout(resolve, 120))
   if (flushTimer !== undefined) window.clearInterval(flushTimer)
   flushTimer = undefined
-  stopTracks()
-  recorder = null
-  stopRenderLoop()
-  const durationMs = chunks.reduce((sum, entry) => sum + entry.durationMs, 0)
-  let blob = new Blob(
-    chunks.map((entry) => entry.blob),
-    { type: 'video/webm' },
-  )
-  blob = await (
-    fixWebmDuration as unknown as (
-      source: Blob,
-      duration: number,
-      options: { logger: boolean },
-    ) => Promise<Blob>
-  )(blob, durationMs, { logger: false })
-  resetRecording()
-  pendingVideos.set(correlationId, {
-    blob,
-    fileName: `camera-${correlationId}.webm`,
-  })
-  await nuiCall('media:requestUpload', {
-    correlationId,
-    mediaType: 'video',
-  })
+  const stopErrorListener = removeRecorderErrorListener
+  stopErrorListener?.()
+  if (removeRecorderErrorListener === stopErrorListener) {
+    removeRecorderErrorListener = null
+  }
+  try {
+    await stopMediaRecorder(activeRecorder)
+    if (generation !== recordingGeneration) return
+    const durationMs = Math.max(
+      chunks.reduce((sum, entry) => sum + entry.durationMs, 0),
+      recordingStartedAt ? Date.now() - recordingStartedAt : 0,
+    )
+    let blob = new Blob(
+      chunks.map((entry) => entry.blob),
+      { type: 'video/webm' },
+    )
+    blob = await (
+      fixWebmDuration as unknown as (
+        source: Blob,
+        duration: number,
+        options: { logger: boolean },
+      ) => Promise<Blob>
+    )(blob, durationMs, { logger: false })
+    if (generation !== recordingGeneration) return
+    setBoundedMapEntry(
+      pendingVideos,
+      correlationId,
+      { blob, fileName: `camera-${correlationId}.webm` },
+      maxPendingVideos,
+    )
+    const response = await nuiCall('media:requestUpload', {
+      correlationId,
+      mediaType: 'video',
+    })
+    if (generation !== recordingGeneration) return
+    if (!response.success) {
+      pendingVideos.delete(correlationId)
+      window.postMessage(
+        {
+          data: { correlationId, error: 'request_failed', success: false },
+          type: 'media:uploadResult',
+        },
+        '*',
+      )
+    }
+  } catch (error) {
+    if (generation === recordingGeneration) {
+      console.error('[Camera] Could not finalize the video recording.', error)
+      pendingVideos.delete(correlationId)
+      window.postMessage(
+        {
+          data: { correlationId, error: 'capture_failed', success: false },
+          type: 'media:uploadResult',
+        },
+        '*',
+      )
+    }
+  } finally {
+    if (generation === recordingGeneration || recorder === activeRecorder) {
+      if (recorder === activeRecorder) {
+        recorder = null
+      }
+      stopTracks()
+      stopRenderLoop()
+      resetRecording()
+    }
+  }
 }
 
 async function renderFrames(view: GameView, count: number): Promise<void> {
@@ -381,6 +524,9 @@ function onMessage(event: MessageEvent): void {
     }
   } else if (message.type === 'media:uploadReady') {
     void uploadReady(message.data as UploadReady)
+  } else if (message.type === 'media:uploadResult') {
+    const correlationId = String(message.data?.correlationId ?? '')
+    if (correlationId) pendingVideos.delete(correlationId)
   }
 }
 
diff --git a/frontend/src/components/SharedContentCard.vue b/frontend/src/components/SharedContentCard.vue
index 8b39709..ab8edfc 100644
--- a/frontend/src/components/SharedContentCard.vue
+++ b/frontend/src/components/SharedContentCard.vue
@@ -93,6 +93,7 @@ watch(
 
 <style scoped>
 .shared-content-card {
+  width: min(262px, 100%);
   width: min(262px, 73cqw);
   overflow: hidden;
   border: 1px solid rgb(60 60 67 / 13%);
diff --git a/frontend/src/components/SimPhonePicker.vue b/frontend/src/components/SimPhonePicker.vue
index f5e0a4e..6db474d 100644
--- a/frontend/src/components/SimPhonePicker.vue
+++ b/frontend/src/components/SimPhonePicker.vue
@@ -42,7 +42,6 @@ async function insert(
 }
 
 function close(): void {
-  void nuiCall('sim:picker-close')
   emit('close')
 }
 </script>
diff --git a/frontend/src/components/SpringboardWidget.vue b/frontend/src/components/SpringboardWidget.vue
index f851a42..a69d3d1 100644
--- a/frontend/src/components/SpringboardWidget.vue
+++ b/frontend/src/components/SpringboardWidget.vue
@@ -31,6 +31,10 @@ import { useCallsStore } from '@/stores/calls'
 import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
 import type { WidgetInstance } from '@/types/widgets'
+import {
+  reorderDirectionFromKeyboard,
+  type ReorderDirection,
+} from '@/utils/keyboard'
 import type { WeatherConditionId } from '@/types/weather'
 import { WIDGET_SPANS } from '@/utils/widgetLayout'
 
@@ -50,6 +54,7 @@ const emit = defineEmits<{
   dragstart: [event: PointerEvent]
   menu: []
   remove: []
+  reorder: [direction: ReorderDirection]
 }>()
 
 const phone = usePhoneStore()
@@ -68,6 +73,8 @@ let holdTimer: number | undefined
 let pointerStart = { x: 0, y: 0 }
 let dragStartPage = 0
 let dragPageWidth = 0
+let pointerTarget: HTMLElement | null = null
+let pointerId: number | null = null
 
 const weatherIcons: Record<WeatherConditionId, Component> = {
   sunny: Sun,
@@ -173,6 +180,9 @@ function onPointerDown(event: PointerEvent): void {
   ) {
     return
   }
+  pointerTarget = event.currentTarget as HTMLElement
+  pointerId = event.pointerId
+  pointerTarget.setPointerCapture(pointerId)
   pointerStart = { x: event.clientX, y: event.clientY }
   clearHold()
   if (props.editMode) {
@@ -210,35 +220,48 @@ function beginDrag(event: PointerEvent): void {
       .closest<HTMLElement>('.springboard-page')
       ?.getBoundingClientRect().width ?? 0
   isDragging.value = true
-  window.addEventListener('pointermove', onPointerMove)
-  window.addEventListener('pointerup', onPointerUp)
-  window.addEventListener('pointercancel', cancelDrag)
   emit('dragstart', event)
 }
 
 function onPointerUp(event: PointerEvent): void {
   clearHold()
-  if (!isDragging.value) return
-  suppressClick.value = true
-  emit('dragend', event)
-  isDragging.value = false
-  dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
+  if (isDragging.value) {
+    suppressClick.value = true
+    emit('dragend', event)
+    isDragging.value = false
+    dragOffset.value = { x: 0, y: 0 }
+  }
+  releasePointerCapture()
 }
 
 function cancelDrag(): void {
   clearHold()
-  if (!isDragging.value) return
+  const wasDragging = isDragging.value
   isDragging.value = false
   dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
-  emit('dragcancel')
+  releasePointerCapture()
+  if (wasDragging) emit('dragcancel')
 }
 
-function removeDragListeners(): void {
-  window.removeEventListener('pointermove', onPointerMove)
-  window.removeEventListener('pointerup', onPointerUp)
-  window.removeEventListener('pointercancel', cancelDrag)
+function releasePointerCapture(): void {
+  if (
+    pointerTarget &&
+    pointerId !== null &&
+    pointerTarget.hasPointerCapture(pointerId)
+  ) {
+    pointerTarget.releasePointerCapture(pointerId)
+  }
+  pointerTarget = null
+  pointerId = null
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!props.editMode) return
+  const direction = reorderDirectionFromKeyboard(event)
+  if (!direction) return
+  event.preventDefault()
+  event.stopPropagation()
+  emit('reorder', direction)
 }
 
 function openWidget(): void {
@@ -276,7 +299,7 @@ async function messageContact(phoneNumber: string): Promise<void> {
 
 onBeforeUnmount(() => {
   clearHold()
-  removeDragListeners()
+  releasePointerCapture()
 })
 </script>
 
@@ -300,9 +323,14 @@ onBeforeUnmount(() => {
       :class="`home-widget--${instance.kind}`"
       role="button"
       tabindex="0"
+      :aria-keyshortcuts="
+        editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
+      "
       @click="openWidget"
       @contextmenu.prevent
+      @keydown="onKeydown"
       @keydown.enter="openWidget"
+      @lostpointercapture="cancelDrag"
       @pointercancel="cancelDrag"
       @pointerdown="onPointerDown"
       @pointerleave="isDragging || clearHold()"
diff --git a/frontend/src/components/SpringboardWidgetGrid.vue b/frontend/src/components/SpringboardWidgetGrid.vue
index 70bd954..a11399e 100644
--- a/frontend/src/components/SpringboardWidgetGrid.vue
+++ b/frontend/src/components/SpringboardWidgetGrid.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 import SpringboardWidget from '@/components/SpringboardWidget.vue'
 import { useWidgetsStore } from '@/stores/widgets'
+import type { ReorderDirection } from '@/utils/keyboard'
 import { WIDGET_HOME_ROWS, WIDGET_PAGE_ROWS } from '@/utils/widgetLayout'
 
 const props = defineProps<{
@@ -17,6 +18,7 @@ const emit = defineEmits<{
   dragstart: [id: string, event: PointerEvent]
   menu: [id: string]
   remove: [id: string]
+  reorder: [id: string, direction: ReorderDirection]
 }>()
 const widgets = useWidgetsStore()
 const rows = computed(() =>
@@ -51,6 +53,7 @@ const instances = computed(() =>
       @dragstart="emit('dragstart', instance.id, $event)"
       @menu="emit('menu', instance.id)"
       @remove="emit('remove', instance.id)"
+      @reorder="emit('reorder', instance.id, $event)"
     />
   </div>
 </template>
diff --git a/frontend/src/components/citymarkt/CityMarktSelect.vue b/frontend/src/components/citymarkt/CityMarktSelect.vue
index c673714..4df61b7 100644
--- a/frontend/src/components/citymarkt/CityMarktSelect.vue
+++ b/frontend/src/components/citymarkt/CityMarktSelect.vue
@@ -41,6 +41,9 @@ function select(value: string): void {
 
 function handleKeydown(event: KeyboardEvent): void {
   if (event.key === 'Escape') {
+    if (!isOpen.value) return
+    event.preventDefault()
+    event.stopPropagation()
     isOpen.value = false
     return
   }
diff --git a/frontend/src/components/feather/FeatherPostCard.vue b/frontend/src/components/feather/FeatherPostCard.vue
index 83d18f9..d771b94 100644
--- a/frontend/src/components/feather/FeatherPostCard.vue
+++ b/frontend/src/components/feather/FeatherPostCard.vue
@@ -367,4 +367,15 @@ function relativeTime(timestamp: number): string {
 .feather-actions .is-bookmarked {
   color: #438cf5;
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .feather-post:active {
+    background: rgb(127 127 127 / 4%);
+  }
+  .feather-follow {
+    border-color: var(--feather-blue, #1d9bf0);
+  }
+  .feather-media {
+    border-color: rgb(127 127 127 / 18%);
+  }
+}
 </style>
diff --git a/frontend/src/stores/banking.test.ts b/frontend/src/stores/banking.test.ts
index 338c39b..52e1062 100644
--- a/frontend/src/stores/banking.test.ts
+++ b/frontend/src/stores/banking.test.ts
@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useBankingStore } from '@/stores/banking'
 import type { BankingOverview } from '@/types/banking'
-import { nuiCall } from '@/utils/nui'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 vi.mock('@/utils/nui', () => ({ nuiCall: vi.fn() }))
 
@@ -60,4 +60,26 @@ describe('banking store', () => {
     expect(banking.overview).toEqual(overview)
     expect(banking.error).toBe('insufficient_funds')
   })
+
+  it('does not let an older response overwrite the newest overview', async () => {
+    let resolveOlder!: (response: NuiResponse<BankingOverview>) => void
+    const olderResponse = new Promise<NuiResponse<BankingOverview>>(
+      (resolve) => {
+        resolveOlder = resolve
+      },
+    )
+    const newest = { ...overview, bank: 23000 }
+    mockNuiCall
+      .mockReturnValueOnce(olderResponse)
+      .mockResolvedValueOnce({ data: newest, success: true })
+    const banking = useBankingStore()
+
+    const olderRequest = banking.load()
+    await banking.load()
+    resolveOlder({ data: { ...overview, bank: 1 }, success: true })
+    await olderRequest
+
+    expect(banking.overview).toEqual(newest)
+    expect(banking.isLoading).toBe(false)
+  })
 })
diff --git a/frontend/src/stores/banking.ts b/frontend/src/stores/banking.ts
index dab3572..4c8ba80 100644
--- a/frontend/src/stores/banking.ts
+++ b/frontend/src/stores/banking.ts
@@ -8,12 +8,21 @@ export const useBankingStore = defineStore('banking', {
     error: '',
     isLoading: false,
     overview: null as BankingOverview | null,
+    pendingRequests: 0,
+    requestGeneration: 0,
   }),
   actions: {
     async load(): Promise<boolean> {
+      const generation = ++this.requestGeneration
+      this.pendingRequests += 1
       this.isLoading = true
-      const response = await nuiCall<BankingOverview>('banking:overview')
-      this.isLoading = false
+      const response = await nuiCall<BankingOverview>('banking:overview').finally(
+        () => {
+          this.pendingRequests = Math.max(0, this.pendingRequests - 1)
+          this.isLoading = this.pendingRequests > 0
+        },
+      )
+      if (generation !== this.requestGeneration) return response.success
       if (response.success && response.data) {
         this.overview = response.data
         this.error = ''
@@ -27,12 +36,17 @@ export const useBankingStore = defineStore('banking', {
       amount: number,
       phoneNumber?: string,
     ): Promise<NuiResponse<BankingOverview>> {
+      const generation = ++this.requestGeneration
+      this.pendingRequests += 1
       this.isLoading = true
       const response = await nuiCall<BankingOverview>(`banking:${action}`, {
         amount,
         ...(phoneNumber === undefined ? {} : { phoneNumber }),
+      }).finally(() => {
+        this.pendingRequests = Math.max(0, this.pendingRequests - 1)
+        this.isLoading = this.pendingRequests > 0
       })
-      this.isLoading = false
+      if (generation !== this.requestGeneration) return response
       if (response.success && response.data) {
         this.overview = response.data
         this.error = ''
diff --git a/frontend/src/stores/mail.test.ts b/frontend/src/stores/mail.test.ts
index bcf80cc..17e7a3a 100644
--- a/frontend/src/stores/mail.test.ts
+++ b/frontend/src/stores/mail.test.ts
@@ -1,9 +1,10 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useAccountStore } from '@/stores/account'
 import { useMailStore } from '@/stores/mail'
-import type { MailCounts, MailListItem } from '@/types/mail'
-import { nuiCall } from '@/utils/nui'
+import type { MailCounts, MailListItem, MailListResponse } from '@/types/mail'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 vi.mock('@/utils/nui', () => ({
   nuiCall: vi.fn(),
@@ -45,7 +46,7 @@ describe('mail store', () => {
         success: true,
       })
       .mockResolvedValueOnce({
-        data: { hasMore: false, items: [listItem(2)] },
+        data: { hasMore: false, items: [listItem(2)], offset: 0 },
         success: true,
       })
 
@@ -129,4 +130,103 @@ describe('mail store', () => {
     expect(mail.folder).toBe('inbox')
     expect(mail.search).toBe('')
   })
+
+  it('ignores an older folder response after a newer navigation', async () => {
+    let resolveOlder!: (response: NuiResponse<MailListResponse>) => void
+    const olderResponse = new Promise<NuiResponse<MailListResponse>>(
+      (resolve) => {
+        resolveOlder = resolve
+      },
+    )
+    mockNuiCall
+      .mockReturnValueOnce(olderResponse)
+      .mockResolvedValueOnce({
+        data: { hasMore: false, items: [listItem(2)] },
+        success: true,
+      })
+    const mail = useMailStore()
+
+    const olderRequest = mail.loadFolder('inbox')
+    await mail.loadFolder('sent')
+    resolveOlder({
+      data: { hasMore: false, items: [listItem(1)], offset: 0 },
+      success: true,
+    })
+    await olderRequest
+
+    expect(mail.folder).toBe('sent')
+    expect(mail.items.map((item) => item.id)).toEqual([2])
+    expect(mail.loading).toBe(false)
+  })
+
+  it('ignores mailbox counts returned after the session was cleared', async () => {
+    let resolveCounts!: (response: NuiResponse<MailCounts>) => void
+    mockNuiCall.mockReturnValueOnce(
+      new Promise<NuiResponse<MailCounts>>((resolve) => {
+        resolveCounts = resolve
+      }),
+    )
+    const mail = useMailStore()
+
+    const bootstrap = mail.bootstrap('alex@ifruit.com')
+    await mail.bootstrap('')
+    resolveCounts({ data: counts, success: true })
+    await bootstrap
+
+    expect(mail.accountEmail).toBe('')
+    expect(mail.counts).toEqual({
+      drafts: 0,
+      inbox: 0,
+      sent: 0,
+      trash: 0,
+      unread: 0,
+    })
+  })
+
+  it('ignores a late login after the mailbox session was cleared', async () => {
+    let resolveLogin!: (response: NuiResponse<{ devices: []; email: string }>) => void
+    mockNuiCall.mockReturnValueOnce(
+      new Promise<NuiResponse<{ devices: []; email: string }>>((resolve) => {
+        resolveLogin = resolve
+      }),
+    )
+    const mail = useMailStore()
+    const account = useAccountStore()
+
+    const login = mail.login('alex', 'secret')
+    await mail.bootstrap('')
+    resolveLogin({
+      data: { devices: [], email: 'alex@ifruit.com' },
+      success: true,
+    })
+    await login
+
+    expect(mail.accountEmail).toBe('')
+    expect(account.email).toBe('')
+  })
+
+  it('ignores a late login after an external mailbox session change', async () => {
+    let resolveLogin!: (response: NuiResponse<{ devices: []; email: string }>) => void
+    mockNuiCall
+      .mockReturnValueOnce(
+        new Promise<NuiResponse<{ devices: []; email: string }>>((resolve) => {
+          resolveLogin = resolve
+        }),
+      )
+      .mockResolvedValueOnce({ data: counts, success: true })
+    const mail = useMailStore()
+    const account = useAccountStore()
+
+    const login = mail.login('alex', 'secret')
+    account.hydrate({ devices: [], email: 'morgan@ifruit.com' })
+    await mail.bootstrap('morgan@ifruit.com')
+    resolveLogin({
+      data: { devices: [], email: 'alex@ifruit.com' },
+      success: true,
+    })
+    await login
+
+    expect(mail.accountEmail).toBe('morgan@ifruit.com')
+    expect(account.email).toBe('morgan@ifruit.com')
+  })
 })
diff --git a/frontend/src/stores/mail.ts b/frontend/src/stores/mail.ts
index 238bea6..01a4c5b 100644
--- a/frontend/src/stores/mail.ts
+++ b/frontend/src/stores/mail.ts
@@ -31,14 +31,21 @@ export const useMailStore = defineStore('mail', () => {
   const items = ref<MailListItem[]>([])
   const loading = ref(false)
   const search = ref('')
+  let authenticationGeneration = 0
+  let folderRequestGeneration = 0
+  let sessionGeneration = 0
 
   function clearSession(): void {
+    authenticationGeneration += 1
+    sessionGeneration += 1
+    folderRequestGeneration += 1
     accountEmail.value = ''
     counts.value = emptyCounts()
     items.value = []
     hasMore.value = false
     folder.value = 'inbox'
     search.value = ''
+    loading.value = false
   }
 
   async function bootstrap(email: string): Promise<void> {
@@ -46,16 +53,24 @@ export const useMailStore = defineStore('mail', () => {
       clearSession()
       return
     }
+    authenticationGeneration += 1
+    sessionGeneration += 1
+    folderRequestGeneration += 1
     accountEmail.value = email
     await refreshCounts()
   }
 
   async function login(email: string, password: string) {
+    const generation = ++authenticationGeneration
     const response = await nuiCall<IfruitAccount>('mail:login', {
       email,
       password,
     })
-    if (response.success && response.data) {
+    if (
+      generation === authenticationGeneration &&
+      response.success &&
+      response.data
+    ) {
       account.hydrate(response.data)
       await bootstrap(response.data.email)
     }
@@ -63,11 +78,16 @@ export const useMailStore = defineStore('mail', () => {
   }
 
   async function register(email: string, password: string) {
+    const generation = ++authenticationGeneration
     const response = await nuiCall<IfruitAccount>('mail:register', {
       email,
       password,
     })
-    if (response.success && response.data) {
+    if (
+      generation === authenticationGeneration &&
+      response.success &&
+      response.data
+    ) {
       account.hydrate(response.data)
       await bootstrap(response.data.email)
     }
@@ -75,10 +95,13 @@ export const useMailStore = defineStore('mail', () => {
   }
 
   async function logout(): Promise<void> {
+    const generation = ++authenticationGeneration
     if (accountEmail.value) {
       const response = await nuiCall('mail:logout')
+      if (generation !== authenticationGeneration) return
       if (response.success) account.hydrate(null)
     }
+    if (generation !== authenticationGeneration) return
     clearSession()
   }
 
@@ -87,6 +110,8 @@ export const useMailStore = defineStore('mail', () => {
     nextSearch = '',
     append = false,
   ): Promise<boolean> {
+    const generation = ++folderRequestGeneration
+    const session = sessionGeneration
     loading.value = true
     const offset = append ? items.value.length : 0
     const response = await nuiCall<MailListResponse>('mail:list', {
@@ -94,7 +119,13 @@ export const useMailStore = defineStore('mail', () => {
       offset,
       search: nextSearch,
     })
-    loading.value = false
+    if (generation === folderRequestGeneration) loading.value = false
+    if (
+      generation !== folderRequestGeneration ||
+      session !== sessionGeneration
+    ) {
+      return false
+    }
     if (!response.success || !response.data) return false
 
     folder.value = nextFolder
@@ -107,8 +138,17 @@ export const useMailStore = defineStore('mail', () => {
   }
 
   async function refreshCounts(): Promise<void> {
+    const email = accountEmail.value
+    const session = sessionGeneration
     const response = await nuiCall<MailCounts>('mail:counts')
-    if (response.success && response.data) counts.value = response.data
+    if (
+      session === sessionGeneration &&
+      email === accountEmail.value &&
+      response.success &&
+      response.data
+    ) {
+      counts.value = response.data
+    }
   }
 
   async function openMessage(id: number): Promise<MailMessage | null> {
diff --git a/frontend/src/stores/notifications.test.ts b/frontend/src/stores/notifications.test.ts
index e38b885..59eff5f 100644
--- a/frontend/src/stores/notifications.test.ts
+++ b/frontend/src/stores/notifications.test.ts
@@ -2,6 +2,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
+  MAX_LOCK_SCREEN_NOTIFICATIONS,
   useNotificationsStore,
   type PhoneNotificationDevice,
 } from '@/stores/notifications'
@@ -256,4 +257,26 @@ describe('notifications store', () => {
     notifications.clearLockScreen()
     expect(notifications.lockScreenNotifications).toEqual([])
   })
+
+  it('bounds persisted lock screen history to the newest notifications', () => {
+    openPhone('111')
+    const notifications = useNotificationsStore()
+    const items = Array.from(
+      { length: MAX_LOCK_SCREEN_NOTIFICATIONS + 10 },
+      (_, index) => ({
+        appId: 'mail' as const,
+        id: `saved-${index}`,
+        text: `Message ${index}`,
+        title: 'Mail',
+      }),
+    )
+
+    notifications.hydrate({ items, version: 1 }, '111')
+
+    expect(notifications.lockScreenNotifications).toHaveLength(
+      MAX_LOCK_SCREEN_NOTIFICATIONS,
+    )
+    expect(notifications.lockScreenNotifications[0]?.id).toBe('saved-59')
+    expect(notifications.lockScreenNotifications.at(-1)?.id).toBe('saved-10')
+  })
 })
diff --git a/frontend/src/stores/notifications.ts b/frontend/src/stores/notifications.ts
index 1487a2c..2777000 100644
--- a/frontend/src/stores/notifications.ts
+++ b/frontend/src/stores/notifications.ts
@@ -43,6 +43,8 @@ type PersistedNotificationsV1 = {
   version: 1
 }
 
+export const MAX_LOCK_SCREEN_NOTIFICATIONS = 50
+
 const timeoutHandles = new Map<string, ReturnType<typeof setTimeout>>()
 const stopToneHandles = new Map<string, () => void>()
 const persistenceQueues = new Map<string, Promise<void>>()
@@ -151,7 +153,9 @@ export const useNotificationsStore = defineStore('notifications', () => {
     for (const notification of stored) merged.set(notification.id, notification)
     for (const notification of lockScreenQueues.value[imei] ?? [])
       merged.set(notification.id, notification)
-    lockScreenQueues.value[imei] = [...merged.values()]
+    lockScreenQueues.value[imei] = [...merged.values()].slice(
+      -MAX_LOCK_SCREEN_NOTIFICATIONS,
+    )
     persist(imei)
   }
 
@@ -166,9 +170,10 @@ export const useNotificationsStore = defineStore('notifications', () => {
   function remember(notification: PhoneNotification): void {
     const imei = notification.device?.imei ?? phone.device?.imei
     if (!imei) return
-    const notifications = lockScreenQueues.value[imei] ?? []
-    notifications.push(notification)
-    lockScreenQueues.value[imei] = notifications
+    lockScreenQueues.value[imei] = [
+      ...(lockScreenQueues.value[imei] ?? []),
+      notification,
+    ].slice(-MAX_LOCK_SCREEN_NOTIFICATIONS)
     persist(imei)
   }
 
diff --git a/frontend/src/stores/phone-persistence.test.ts b/frontend/src/stores/phone-persistence.test.ts
new file mode 100644
index 0000000..1c4027a
--- /dev/null
+++ b/frontend/src/stores/phone-persistence.test.ts
@@ -0,0 +1,170 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { usePhoneStore } from '@/stores/phone'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
+
+vi.mock('@/utils/nui', () => ({
+  nuiCall: vi.fn(),
+}))
+
+const mockNuiCall = vi.mocked(nuiCall)
+
+function deferredResponse<T>(): {
+  promise: Promise<NuiResponse<T>>
+  resolve: (response: NuiResponse<T>) => void
+} {
+  let resolve!: (response: NuiResponse<T>) => void
+  const promise = new Promise<NuiResponse<T>>((next) => {
+    resolve = next
+  })
+  return { promise, resolve }
+}
+
+function openPhone(imei: string, token: string, revision: number): void {
+  usePhoneStore().open({
+    device: {
+      data: { settings: { payload: {}, revision } },
+      imei,
+      name: `Phone ${imei}`,
+      sim: null,
+    },
+    token,
+  })
+}
+
+describe('phone device persistence scope', () => {
+  beforeEach(() => {
+    vi.stubGlobal('window', {
+      matchMedia: vi.fn(() => ({ matches: false })),
+    })
+    setActivePinia(createPinia())
+    mockNuiCall.mockReset()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('does not apply a late save response to a newer device session', async () => {
+    const stale = deferredResponse<{ revision: number }>()
+    mockNuiCall.mockReturnValueOnce(stale.promise)
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 2)
+
+    phone.saveDeviceNamespace('settings', { value: 'old' })
+    await Promise.resolve()
+    expect(mockNuiCall).toHaveBeenCalledWith('device:save', {
+      imei: '111',
+      namespace: 'settings',
+      payload: { value: 'old' },
+      revision: 2,
+      sessionToken: 'session-a',
+    })
+
+    openPhone('222', 'session-b', 7)
+    stale.resolve({ data: { revision: 3 }, success: true })
+    await stale.promise
+    await Promise.resolve()
+
+    expect(phone.device?.imei).toBe('222')
+    expect(phone.deviceRevisions.settings).toBe(7)
+  })
+
+  it('drops queued writes from an obsolete device generation', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    mockNuiCall.mockReturnValueOnce(first.promise)
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    phone.saveDeviceNamespace('settings', { order: 2 })
+    await Promise.resolve()
+    openPhone('222', 'session-b', 0)
+    first.resolve({ data: { revision: 1 }, success: true })
+    await first.promise
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(1)
+  })
+
+  it('flushes every queued write after a normal visibility close', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    mockNuiCall
+      .mockReturnValueOnce(first.promise)
+      .mockResolvedValueOnce({ data: { revision: 2 }, success: true })
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    phone.saveDeviceNamespace('settings', { order: 2 })
+    await Promise.resolve()
+    phone.close()
+    const flushed = phone.flushDevicePersistence()
+
+    first.resolve({ data: { revision: 1 }, success: true })
+    await flushed
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(2)
+    expect(mockNuiCall).toHaveBeenLastCalledWith('device:save', {
+      imei: '111',
+      namespace: 'settings',
+      payload: { order: 2 },
+      revision: 1,
+      sessionToken: 'session-a',
+    })
+    expect(phone.deviceRevisions.settings).toBe(2)
+  })
+
+  it('keeps queued writes scoped across a same-session bootstrap update', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    mockNuiCall
+      .mockReturnValueOnce(first.promise)
+      .mockResolvedValueOnce({ data: { revision: 2 }, success: true })
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    phone.saveDeviceNamespace('settings', { order: 2 })
+    await Promise.resolve()
+    first.resolve({ data: { revision: 1 }, success: true })
+    await first.promise
+    await Promise.resolve()
+    openPhone('111', 'session-a', 1)
+    await phone.flushDevicePersistence()
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(2)
+    expect(phone.deviceRevisions.settings).toBe(2)
+  })
+
+  it('waits for writes queued while a persistence flush is in progress', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    const queuedDuringFlush = deferredResponse<{ revision: number }>()
+    mockNuiCall
+      .mockReturnValueOnce(first.promise)
+      .mockReturnValueOnce(queuedDuringFlush.promise)
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    await Promise.resolve()
+    let flushCompleted = false
+    const flushed = phone.flushDevicePersistence().then(() => {
+      flushCompleted = true
+    })
+    phone.saveDeviceNamespace('widgets', { order: 2 })
+    await Promise.resolve()
+
+    first.resolve({ data: { revision: 1 }, success: true })
+    await first.promise
+    await Promise.resolve()
+    expect(flushCompleted).toBe(false)
+
+    queuedDuringFlush.resolve({ data: { revision: 1 }, success: true })
+    await flushed
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(2)
+    expect(phone.deviceRevisions.widgets).toBe(1)
+  })
+})
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 8ad26ae..b708598 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -12,6 +12,7 @@ import { nuiCall } from '@/utils/nui'
 import type { NuiResponse } from '@/utils/nui'
 import {
   DEFAULT_PHONE_PREFERENCES,
+  clampPhoneScale,
   ensureAppNotificationPreferences,
   parsePhonePreferences,
   type AppNotificationPreferences,
@@ -38,6 +39,7 @@ export type PhoneOpenPayload = {
 }
 
 const namespaceQueues = new Map<string, Promise<void>>()
+let nextPersistenceSession = 0
 
 const companiesFallbackLocales = {
   name: 'Companies',
@@ -3606,11 +3608,14 @@ export const usePhoneStore = defineStore('phone', {
     currentPage: 1,
     device: null as PhoneDevice | null,
     deviceRevisions: {} as Record<string, number>,
+    deviceSessionToken: null as string | null,
     isOpen: false,
     lang: 'en',
     launchOrigin: null as AppLaunchOrigin | null,
     locales: defaultLocales,
     preferences: cloneJsonData(DEFAULT_PHONE_PREFERENCES),
+    persistenceGeneration: 0,
+    persistenceSession: ++nextPersistenceSession,
     security: {
       enabled: false,
       length: null,
@@ -3631,6 +3636,15 @@ export const usePhoneStore = defineStore('phone', {
       this.isOpen = false
     },
     open(payload: PhoneOpenPayload = {}): void {
+      const nextImei = payload.device?.imei ?? this.device?.imei ?? null
+      const nextToken = payload.token ?? this.deviceSessionToken
+      if (
+        nextImei !== (this.device?.imei ?? null) ||
+        nextToken !== this.deviceSessionToken
+      ) {
+        this.persistenceGeneration += 1
+      }
+      this.deviceSessionToken = nextToken
       this.lang = payload.lang ?? 'en'
       this.locales = payload.locales ?? defaultLocales
       if (payload.device) this.hydrateDevice(payload.device)
@@ -3641,6 +3655,13 @@ export const usePhoneStore = defineStore('phone', {
       }
       this.isOpen = true
     },
+    endDeviceSession(): void {
+      this.close()
+      if (this.deviceSessionToken !== null) {
+        this.deviceSessionToken = null
+        this.persistenceGeneration += 1
+      }
+    },
     hydrateDevice(device: PhoneDevice): void {
       this.device = device
       this.deviceRevisions = Object.fromEntries(
@@ -3654,22 +3675,59 @@ export const usePhoneStore = defineStore('phone', {
       )
     },
     saveDeviceNamespace(namespace: string, payload: unknown): void {
-      const previous = namespaceQueues.get(namespace) ?? Promise.resolve()
+      const imei = this.device?.imei
+      if (!imei) {
+        console.error(
+          `[Phone persistence] Could not save ${namespace} without an active device.`,
+        )
+        return
+      }
+      const generation = this.persistenceGeneration
+      const session = this.persistenceSession
+      const token = this.deviceSessionToken
+      const queuedPayload = cloneJsonData(payload)
+      const queueKey = `${session}:${generation}:${imei}:${namespace}`
+      const isCurrentScope = (): boolean =>
+        this.persistenceSession === session &&
+        this.persistenceGeneration === generation &&
+        this.device?.imei === imei &&
+        this.deviceSessionToken === token
+      const previous = namespaceQueues.get(queueKey) ?? Promise.resolve()
       const queued = previous.then(async () => {
+        if (!isCurrentScope()) return
         const response = await nuiCall<{ revision: number }>('device:save', {
+          imei,
           namespace,
-          payload,
+          payload: queuedPayload,
           revision: this.deviceRevisions[namespace] ?? 0,
+          sessionToken: token,
         })
-        if (response.success && response.data) {
-          this.deviceRevisions[namespace] = response.data.revision
+        if (
+          isCurrentScope() &&
+          response.success &&
+          Number.isInteger(response.data?.revision) &&
+          Number(response.data?.revision) >= 0
+        ) {
+          this.deviceRevisions[namespace] = Number(response.data?.revision)
         }
       })
       const tracked = queued.finally(() => {
-        if (namespaceQueues.get(namespace) === tracked)
-          namespaceQueues.delete(namespace)
+        if (namespaceQueues.get(queueKey) === tracked)
+          namespaceQueues.delete(queueKey)
       })
-      namespaceQueues.set(namespace, tracked)
+      namespaceQueues.set(queueKey, tracked)
+    },
+    async flushDevicePersistence(): Promise<void> {
+      const imei = this.device?.imei
+      if (!imei) return
+      const queuePrefix = `${this.persistenceSession}:${this.persistenceGeneration}:${imei}:`
+      while (true) {
+        const activeQueues = [...namespaceQueues.entries()]
+          .filter(([key]) => key.startsWith(queuePrefix))
+          .map(([, queue]) => queue)
+        if (!activeQueues.length) return
+        await Promise.all(activeQueues)
+      }
     },
     setCurrentPage(page: number, pageCount?: number): void {
       this.currentPage = clampPage(page, pageCount)
@@ -3695,7 +3753,11 @@ export const usePhoneStore = defineStore('phone', {
       key: K,
       value: PhonePreferencesV1['settings'][K],
     ): void {
-      this.preferences.settings[key] = value
+      this.preferences.settings[key] = (
+        key === 'phoneScale'
+          ? clampPhoneScale(Number(value))
+          : value
+      ) as PhonePreferencesV1['settings'][K]
       this.saveDeviceNamespace('settings', this.preferences)
     },
     setAlertVolumes(value: number): void {
diff --git a/frontend/src/utils/gameView.test.ts b/frontend/src/utils/gameView.test.ts
index b218a9c..39112dd 100644
--- a/frontend/src/utils/gameView.test.ts
+++ b/frontend/src/utils/gameView.test.ts
@@ -1,6 +1,6 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
-import { gameViewGeometry } from '@/utils/gameView'
+import { createGameView, gameViewGeometry } from '@/utils/gameView'
 
 describe('gameViewGeometry', () => {
   it('center-crops a widescreen game view for 3:4 portrait output', () => {
@@ -60,3 +60,92 @@ describe('gameViewGeometry', () => {
     ])
   })
 })
+
+describe('createGameView', () => {
+  it('recreates graphics resources and resumes after context restoration', () => {
+    const gl = {
+      ARRAY_BUFFER: 1,
+      CLAMP_TO_EDGE: 2,
+      COLOR_BUFFER_BIT: 4,
+      COMPILE_STATUS: 5,
+      DYNAMIC_DRAW: 6,
+      FLOAT: 7,
+      FRAGMENT_SHADER: 8,
+      LINK_STATUS: 9,
+      MIRRORED_REPEAT: 10,
+      NEAREST: 11,
+      REPEAT: 12,
+      RGBA: 13,
+      STATIC_DRAW: 14,
+      TEXTURE_2D: 15,
+      TEXTURE_MAG_FILTER: 16,
+      TEXTURE_MIN_FILTER: 17,
+      TEXTURE_WRAP_S: 18,
+      TEXTURE_WRAP_T: 19,
+      TRIANGLE_STRIP: 20,
+      UNSIGNED_BYTE: 21,
+      VERTEX_SHADER: 22,
+      attachShader: vi.fn(),
+      bindBuffer: vi.fn(),
+      bindTexture: vi.fn(),
+      bufferData: vi.fn(),
+      clear: vi.fn(),
+      clearColor: vi.fn(),
+      compileShader: vi.fn(),
+      createBuffer: vi.fn(() => ({})),
+      createProgram: vi.fn(() => ({})),
+      createShader: vi.fn(() => ({})),
+      createTexture: vi.fn(() => ({})),
+      deleteBuffer: vi.fn(),
+      deleteProgram: vi.fn(),
+      deleteShader: vi.fn(),
+      deleteTexture: vi.fn(),
+      drawArrays: vi.fn(),
+      enableVertexAttribArray: vi.fn(),
+      finish: vi.fn(),
+      getAttribLocation: vi.fn((_program, name: string) =>
+        name === 'a_position' ? 0 : 1,
+      ),
+      getExtension: vi.fn(() => ({ loseContext: vi.fn() })),
+      getProgramInfoLog: vi.fn(() => ''),
+      getProgramParameter: vi.fn(() => true),
+      getShaderInfoLog: vi.fn(() => ''),
+      getShaderParameter: vi.fn(() => true),
+      getUniformLocation: vi.fn(() => ({})),
+      linkProgram: vi.fn(),
+      shaderSource: vi.fn(),
+      texImage2D: vi.fn(),
+      texParameterf: vi.fn(),
+      uniform1i: vi.fn(),
+      useProgram: vi.fn(),
+      vertexAttribPointer: vi.fn(),
+      viewport: vi.fn(),
+    }
+    const canvas = Object.assign(new EventTarget(), {
+      getContext: () => gl,
+      height: 0,
+      width: 0,
+    }) as unknown as HTMLCanvasElement
+    const restored = vi.fn()
+    vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    vi.spyOn(console, 'info').mockImplementation(() => undefined)
+    const view = createGameView(canvas, { onContextRestored: restored })
+    view.resize(540, 720, 1920, 1080, 2)
+
+    const lost = new Event('webglcontextlost', { cancelable: true })
+    canvas.dispatchEvent(lost)
+    expect(lost.defaultPrevented).toBe(true)
+    expect(view.isLost()).toBe(true)
+
+    canvas.dispatchEvent(new Event('webglcontextrestored'))
+    expect(view.isLost()).toBe(false)
+    expect(restored).toHaveBeenCalledOnce()
+    expect(gl.createProgram).toHaveBeenCalledTimes(2)
+    expect(canvas.width).toBe(540)
+    expect(canvas.height).toBe(720)
+
+    view.render()
+    expect(gl.drawArrays).toHaveBeenCalledOnce()
+    view.dispose()
+  })
+})
diff --git a/frontend/src/utils/gameView.ts b/frontend/src/utils/gameView.ts
index 9dd0ef1..1485c98 100644
--- a/frontend/src/utils/gameView.ts
+++ b/frontend/src/utils/gameView.ts
@@ -31,6 +31,8 @@ export interface GameView {
 }
 
 export interface GameViewOptions {
+  onContextLost?: () => void
+  onContextRestored?: () => void
   preserveDrawingBuffer?: boolean
 }
 
@@ -113,80 +115,180 @@ export function createGameView(
 
   let lost = false
   let disposed = false
+  let program: WebGLProgram | null = null
+  let positionBuffer: WebGLBuffer | null = null
+  let texcoordBuffer: WebGLBuffer | null = null
+  let texture: WebGLTexture | null = null
+  let lastSize: {
+    height: number
+    sourceHeight: number
+    sourceWidth: number
+    width: number
+    zoom: number
+  } | null = null
+
+  const releaseResources = (): void => {
+    if (positionBuffer) gl.deleteBuffer(positionBuffer)
+    if (texcoordBuffer) gl.deleteBuffer(texcoordBuffer)
+    if (texture) gl.deleteTexture(texture)
+    if (program) gl.deleteProgram(program)
+    positionBuffer = null
+    texcoordBuffer = null
+    texture = null
+    program = null
+  }
+
+  const initializeResources = (): void => {
+    releaseResources()
+    const nextProgram = gl.createProgram()
+    if (!nextProgram) throw new Error('game_view_program_unavailable')
+    const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER)
+    const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER)
+    gl.attachShader(nextProgram, vertexShader)
+    gl.attachShader(nextProgram, fragmentShader)
+    gl.linkProgram(nextProgram)
+    gl.deleteShader(vertexShader)
+    gl.deleteShader(fragmentShader)
+    if (!gl.getProgramParameter(nextProgram, gl.LINK_STATUS)) {
+      const error = gl.getProgramInfoLog(nextProgram)
+      gl.deleteProgram(nextProgram)
+      throw new Error(error || 'game_view_program_failed')
+    }
+    gl.useProgram(nextProgram)
+
+    const positionLocation = gl.getAttribLocation(nextProgram, 'a_position')
+    const texcoordLocation = gl.getAttribLocation(nextProgram, 'a_texcoord')
+    if (positionLocation < 0 || texcoordLocation < 0) {
+      gl.deleteProgram(nextProgram)
+      throw new Error('game_view_attributes_unavailable')
+    }
+
+    const nextPositionBuffer = gl.createBuffer()
+    const nextTexcoordBuffer = gl.createBuffer()
+    const nextTexture = gl.createTexture()
+    if (!nextPositionBuffer || !nextTexcoordBuffer || !nextTexture) {
+      if (nextPositionBuffer) gl.deleteBuffer(nextPositionBuffer)
+      if (nextTexcoordBuffer) gl.deleteBuffer(nextTexcoordBuffer)
+      if (nextTexture) gl.deleteTexture(nextTexture)
+      gl.deleteProgram(nextProgram)
+      throw new Error('game_view_resources_unavailable')
+    }
+
+    program = nextProgram
+    positionBuffer = nextPositionBuffer
+    texcoordBuffer = nextTexcoordBuffer
+    texture = nextTexture
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.DYNAMIC_DRAW,
+    )
+    gl.enableVertexAttribArray(positionLocation)
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
+      gl.STATIC_DRAW,
+    )
+    gl.enableVertexAttribArray(texcoordLocation)
+    gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0)
+
+    gl.bindTexture(gl.TEXTURE_2D, texture)
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([0, 0, 0, 255]),
+    )
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+    // CitizenFX watches this exact wrap-mode sequence and replaces the seeded pixel with the live
+    // game backbuffer. These calls are intentionally not redundant.
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+    gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0)
+    gl.clearColor(0, 0, 0, 1)
+  }
+
+  const applySize = (): void => {
+    if (!lastSize || !positionBuffer || !texcoordBuffer) return
+    const geometry = gameViewGeometry(
+      lastSize.sourceWidth,
+      lastSize.sourceHeight,
+      lastSize.width,
+      lastSize.height,
+      lastSize.zoom,
+    )
+    canvas.width = lastSize.width
+    canvas.height = lastSize.height
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, geometry.positions, gl.DYNAMIC_DRAW)
+    gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      geometry.textureCoordinates,
+      gl.DYNAMIC_DRAW,
+    )
+    gl.viewport(0, 0, lastSize.width, lastSize.height)
+  }
+
   const onContextLost = (event: Event) => {
     event.preventDefault()
     lost = true
     console.error('[Camera] Game-view WebGL context lost.')
+    options.onContextLost?.()
+  }
+  const onContextRestored = () => {
+    if (disposed) return
+    try {
+      initializeResources()
+      lost = false
+      applySize()
+      console.info('[Camera] Game-view WebGL context restored.')
+      options.onContextRestored?.()
+    } catch (error) {
+      lost = true
+      console.error('[Camera] Could not restore the game-view WebGL context.', error)
+    }
   }
   canvas.addEventListener(
     'webglcontextlost',
     onContextLost as EventListener,
     false,
   )
-
-  const program = gl.createProgram()
-  if (!program) throw new Error('game_view_program_unavailable')
-  gl.attachShader(program, compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER))
-  gl.attachShader(
-    program,
-    compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER),
+  canvas.addEventListener(
+    'webglcontextrestored',
+    onContextRestored as EventListener,
+    false,
   )
-  gl.linkProgram(program)
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    throw new Error(gl.getProgramInfoLog(program) || 'game_view_program_failed')
+  try {
+    initializeResources()
+  } catch (error) {
+    canvas.removeEventListener(
+      'webglcontextlost',
+      onContextLost as EventListener,
+      false,
+    )
+    canvas.removeEventListener(
+      'webglcontextrestored',
+      onContextRestored as EventListener,
+      false,
+    )
+    releaseResources()
+    throw error
   }
-  gl.useProgram(program)
-
-  const positionLocation = gl.getAttribLocation(program, 'a_position')
-  const texcoordLocation = gl.getAttribLocation(program, 'a_texcoord')
-  if (positionLocation < 0 || texcoordLocation < 0) {
-    throw new Error('game_view_attributes_unavailable')
-  }
-
-  const positionBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
-    gl.DYNAMIC_DRAW,
-  )
-  gl.enableVertexAttribArray(positionLocation)
-  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
-
-  const texcoordBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
-    gl.STATIC_DRAW,
-  )
-  gl.enableVertexAttribArray(texcoordLocation)
-  gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0)
-
-  const texture = gl.createTexture()
-  gl.bindTexture(gl.TEXTURE_2D, texture)
-  gl.texImage2D(
-    gl.TEXTURE_2D,
-    0,
-    gl.RGBA,
-    1,
-    1,
-    0,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
-    new Uint8Array([0, 0, 0, 255]),
-  )
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
-  // CitizenFX watches this exact wrap-mode sequence and replaces the seeded pixel with the live
-  // game backbuffer. These calls are intentionally not redundant.
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-  gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0)
-  gl.clearColor(0, 0, 0, 1)
 
   return {
     canvas,
@@ -198,11 +300,18 @@ export function createGameView(
         onContextLost as EventListener,
         false,
       )
+      canvas.removeEventListener(
+        'webglcontextrestored',
+        onContextRestored as EventListener,
+        false,
+      )
+      if (!lost) releaseResources()
       gl.getExtension('WEBGL_lose_context')?.loseContext()
     },
     isLost: () => lost,
     render() {
-      if (disposed || lost) return
+      if (disposed || lost || !program) return
+      gl.useProgram(program)
       gl.clear(gl.COLOR_BUFFER_BIT)
       gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
       gl.finish()
@@ -214,25 +323,15 @@ export function createGameView(
       sourceHeight = window.innerHeight,
       zoom = 1,
     ) {
-      if (disposed || lost) return
-      canvas.width = width
-      canvas.height = height
-      const geometry = gameViewGeometry(
+      lastSize = {
+        height,
         sourceWidth,
         sourceHeight,
         width,
-        height,
         zoom,
-      )
-      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
-      gl.bufferData(gl.ARRAY_BUFFER, geometry.positions, gl.DYNAMIC_DRAW)
-      gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
-      gl.bufferData(
-        gl.ARRAY_BUFFER,
-        geometry.textureCoordinates,
-        gl.DYNAMIC_DRAW,
-      )
-      gl.viewport(0, 0, width, height)
+      }
+      if (disposed || lost) return
+      applySize()
     },
   }
 }
diff --git a/frontend/src/utils/homeLayout.test.ts b/frontend/src/utils/homeLayout.test.ts
index 72602c6..e0767f8 100644
--- a/frontend/src/utils/homeLayout.test.ts
+++ b/frontend/src/utils/homeLayout.test.ts
@@ -5,6 +5,7 @@ import {
   createDefaultHomeLayout,
   deleteHomePage,
   HOME_GRID_PAGE_SIZE,
+  homeKeyboardTarget,
   MAX_HOME_GRID_PAGES,
   moveHomeApp,
   parseHomeLayout,
@@ -134,6 +135,15 @@ describe('home layout', () => {
     expect(moved.grid[4]).toBe('notes')
   })
 
+  it('provides bounded keyboard reorder targets without wrapping rows', () => {
+    expect(homeKeyboardTarget(defaults, 'grid', 1, 'right')).toBe(2)
+    expect(homeKeyboardTarget(defaults, 'grid', 3, 'right')).toBeNull()
+    expect(homeKeyboardTarget(defaults, 'grid', 0, 'up')).toBeNull()
+    expect(homeKeyboardTarget(defaults, 'grid', 0, 'down')).toBe(4)
+    expect(homeKeyboardTarget(defaults, 'dock', 1, 'left')).toBe(0)
+    expect(homeKeyboardTarget(defaults, 'dock', 1, 'down')).toBeNull()
+  })
+
   it('shifts occupied grid slots instead of replacing their apps', () => {
     const reordered = moveHomeApp(defaults, 'grid', 2, 'grid', 0)
     expect(reordered.grid.slice(0, 5)).toEqual([
diff --git a/frontend/src/utils/homeLayout.ts b/frontend/src/utils/homeLayout.ts
index 01bb146..6f01235 100644
--- a/frontend/src/utils/homeLayout.ts
+++ b/frontend/src/utils/homeLayout.ts
@@ -1,6 +1,8 @@
 import type { LaunchablePhoneAppId } from '@/types/apps'
+import type { ReorderDirection } from '@/utils/keyboard'
 
 export const HOME_DOCK_CAPACITY = 4
+export const HOME_GRID_COLUMNS = 4
 export const HOME_GRID_PAGE_SIZE = 20
 export const MAX_HOME_GRID_PAGES = 5
 
@@ -304,3 +306,31 @@ export function moveHomeApp(
   source[sourceIndex] = insertIntoSlot(target, targetIndex, appId)
   return next
 }
+
+export function homeKeyboardTarget(
+  layout: HomeLayout,
+  area: HomeArea,
+  sourceIndex: number,
+  direction: ReorderDirection,
+): number | null {
+  const source = layout[area]
+  if (!source[sourceIndex]) return null
+
+  if (area === 'dock') {
+    if (direction !== 'left' && direction !== 'right') return null
+    const targetIndex = sourceIndex + (direction === 'left' ? -1 : 1)
+    return targetIndex >= 0 && targetIndex < source.length ? targetIndex : null
+  }
+
+  const column = sourceIndex % HOME_GRID_COLUMNS
+  if (direction === 'left' && column === 0) return null
+  if (direction === 'right' && column === HOME_GRID_COLUMNS - 1) return null
+  const deltas: Record<ReorderDirection, number> = {
+    down: HOME_GRID_COLUMNS,
+    left: -1,
+    right: 1,
+    up: -HOME_GRID_COLUMNS,
+  }
+  const targetIndex = sourceIndex + deltas[direction]
+  return targetIndex >= 0 && targetIndex < source.length ? targetIndex : null
+}
diff --git a/frontend/src/utils/keyboard.test.ts b/frontend/src/utils/keyboard.test.ts
new file mode 100644
index 0000000..f6b1df9
--- /dev/null
+++ b/frontend/src/utils/keyboard.test.ts
@@ -0,0 +1,98 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  consumeEscape,
+  handleEnterAction,
+  reorderDirectionFromKeyboard,
+} from '@/utils/keyboard'
+
+describe('keyboard interaction', () => {
+  it('does not submit while an IME composition is active', () => {
+    const action = vi.fn()
+    const preventDefault = vi.fn()
+
+    expect(
+      handleEnterAction({ isComposing: true, preventDefault }, action),
+    ).toBe(false)
+    expect(action).not.toHaveBeenCalled()
+    expect(preventDefault).not.toHaveBeenCalled()
+  })
+
+  it('prevents the completed Enter key and runs its action once', () => {
+    const action = vi.fn()
+    const preventDefault = vi.fn()
+
+    expect(
+      handleEnterAction({ isComposing: false, preventDefault }, action),
+    ).toBe(true)
+    expect(preventDefault).toHaveBeenCalledOnce()
+    expect(action).toHaveBeenCalledOnce()
+  })
+
+  it('consumes only an unhandled Escape outside IME composition', () => {
+    const preventDefault = vi.fn()
+    const stopImmediatePropagation = vi.fn()
+
+    expect(
+      consumeEscape({
+        defaultPrevented: false,
+        isComposing: false,
+        key: 'Escape',
+        preventDefault,
+        stopImmediatePropagation,
+      }),
+    ).toBe(true)
+    expect(preventDefault).toHaveBeenCalledOnce()
+    expect(stopImmediatePropagation).toHaveBeenCalledOnce()
+
+    expect(
+      consumeEscape({
+        defaultPrevented: false,
+        isComposing: true,
+        key: 'Escape',
+        preventDefault,
+        stopImmediatePropagation,
+      }),
+    ).toBe(false)
+  })
+
+  it('blocks a second Escape owner on the same event target', () => {
+    const target = new EventTarget()
+    const rootHandler = vi.fn()
+    target.addEventListener('keydown', (event) => {
+      consumeEscape(event as KeyboardEvent)
+    })
+    target.addEventListener('keydown', rootHandler)
+    const event = new Event('keydown', { cancelable: true })
+    Object.defineProperties(event, {
+      isComposing: { value: false },
+      key: { value: 'Escape' },
+    })
+
+    target.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(true)
+    expect(rootHandler).not.toHaveBeenCalled()
+  })
+
+  it('maps only unmodified arrow keys to reorder directions', () => {
+    expect(
+      reorderDirectionFromKeyboard({
+        altKey: false,
+        ctrlKey: false,
+        isComposing: false,
+        key: 'ArrowLeft',
+        metaKey: false,
+      }),
+    ).toBe('left')
+    expect(
+      reorderDirectionFromKeyboard({
+        altKey: false,
+        ctrlKey: true,
+        isComposing: false,
+        key: 'ArrowLeft',
+        metaKey: false,
+      }),
+    ).toBeNull()
+  })
+})
diff --git a/frontend/src/utils/keyboard.ts b/frontend/src/utils/keyboard.ts
new file mode 100644
index 0000000..7d0cbbc
--- /dev/null
+++ b/frontend/src/utils/keyboard.ts
@@ -0,0 +1,47 @@
+export type ReorderDirection = 'down' | 'left' | 'right' | 'up'
+
+export function consumeEscape(
+  event: Pick<
+    KeyboardEvent,
+    | 'defaultPrevented'
+    | 'isComposing'
+    | 'key'
+    | 'preventDefault'
+    | 'stopImmediatePropagation'
+  >,
+): boolean {
+  if (event.key !== 'Escape' || event.isComposing || event.defaultPrevented) {
+    return false
+  }
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  return true
+}
+
+export function handleEnterAction(
+  event: Pick<KeyboardEvent, 'isComposing' | 'preventDefault'>,
+  action: () => unknown,
+): boolean {
+  if (event.isComposing) return false
+  event.preventDefault()
+  void action()
+  return true
+}
+
+export function reorderDirectionFromKeyboard(
+  event: Pick<
+    KeyboardEvent,
+    'altKey' | 'ctrlKey' | 'isComposing' | 'key' | 'metaKey'
+  >,
+): ReorderDirection | null {
+  if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey) {
+    return null
+  }
+  const directions: Partial<Record<string, ReorderDirection>> = {
+    ArrowDown: 'down',
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+    ArrowUp: 'up',
+  }
+  return directions[event.key] ?? null
+}
diff --git a/frontend/src/utils/mediaRecorder.test.ts b/frontend/src/utils/mediaRecorder.test.ts
new file mode 100644
index 0000000..d8b0dde
--- /dev/null
+++ b/frontend/src/utils/mediaRecorder.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  bindMediaRecorderError,
+  setBoundedMapEntry,
+  stopMediaRecorder,
+} from '@/utils/mediaRecorder'
+
+class FakeRecorder extends EventTarget {
+  state: RecordingState = 'recording'
+  stop = vi.fn(() => {
+    this.state = 'inactive'
+    this.dispatchEvent(new Event('stop'))
+  })
+}
+
+describe('media recorder lifecycle', () => {
+  it('resolves from the recorder stop event', async () => {
+    const recorder = new FakeRecorder()
+
+    await stopMediaRecorder(recorder as unknown as MediaRecorder)
+
+    expect(recorder.stop).toHaveBeenCalledOnce()
+    expect(recorder.state).toBe('inactive')
+  })
+
+  it('runs recorder error cleanup only for the current generation', () => {
+    const staleRecorder = new FakeRecorder()
+    const currentRecorder = new FakeRecorder()
+    const cleanup = vi.fn()
+    let generation = 1
+    const unbindStale = bindMediaRecorderError(
+      staleRecorder as unknown as MediaRecorder,
+      () => generation === 1,
+      cleanup,
+    )
+
+    generation = 2
+    staleRecorder.dispatchEvent(new Event('error'))
+    expect(cleanup).not.toHaveBeenCalled()
+    unbindStale()
+
+    bindMediaRecorderError(
+      currentRecorder as unknown as MediaRecorder,
+      () => generation === 2,
+      cleanup,
+    )
+    currentRecorder.dispatchEvent(new Event('error'))
+    currentRecorder.dispatchEvent(new Event('error'))
+
+    expect(cleanup).toHaveBeenCalledOnce()
+  })
+
+  it('keeps pending recording buffers bounded and evicts the oldest', () => {
+    const pending = new Map<string, number>()
+
+    setBoundedMapEntry(pending, 'first', 1, 2)
+    setBoundedMapEntry(pending, 'second', 2, 2)
+    setBoundedMapEntry(pending, 'third', 3, 2)
+
+    expect([...pending.entries()]).toEqual([
+      ['second', 2],
+      ['third', 3],
+    ])
+  })
+})
diff --git a/frontend/src/utils/mediaRecorder.ts b/frontend/src/utils/mediaRecorder.ts
new file mode 100644
index 0000000..87d7e04
--- /dev/null
+++ b/frontend/src/utils/mediaRecorder.ts
@@ -0,0 +1,62 @@
+export function bindMediaRecorderError(
+  recorder: MediaRecorder,
+  isCurrent: () => boolean,
+  onError: (event: Event) => void,
+): () => void {
+  let bound = true
+  const handleError = (event: Event): void => {
+    if (!bound || !isCurrent()) return
+    bound = false
+    recorder.removeEventListener('error', handleError)
+    onError(event)
+  }
+  recorder.addEventListener('error', handleError)
+  return () => {
+    if (!bound) return
+    bound = false
+    recorder.removeEventListener('error', handleError)
+  }
+}
+
+export async function stopMediaRecorder(recorder: MediaRecorder): Promise<void> {
+  if (recorder.state === 'inactive') return
+
+  await new Promise<void>((resolve, reject) => {
+    const cleanup = (): void => {
+      recorder.removeEventListener('stop', onStop)
+      recorder.removeEventListener('error', onError)
+    }
+    const onStop = (): void => {
+      cleanup()
+      resolve()
+    }
+    const onError = (): void => {
+      cleanup()
+      reject(new Error('media_recorder_stop_failed'))
+    }
+
+    recorder.addEventListener('stop', onStop, { once: true })
+    recorder.addEventListener('error', onError, { once: true })
+    try {
+      recorder.stop()
+    } catch (error) {
+      cleanup()
+      reject(error)
+    }
+  })
+}
+
+export function setBoundedMapEntry<Key, Value>(
+  entries: Map<Key, Value>,
+  key: Key,
+  value: Value,
+  maximumSize: number,
+): void {
+  entries.delete(key)
+  entries.set(key, value)
+  while (entries.size > Math.max(0, maximumSize)) {
+    const oldest = entries.keys().next()
+    if (oldest.done) break
+    entries.delete(oldest.value)
+  }
+}
diff --git a/frontend/src/utils/musicEscape.test.ts b/frontend/src/utils/musicEscape.test.ts
new file mode 100644
index 0000000..47111f2
--- /dev/null
+++ b/frontend/src/utils/musicEscape.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+import { musicEscapeLayer } from '@/utils/musicEscape'
+
+const closedState = {
+  actionMenuOpened: false,
+  activeSheet: false,
+  addMenuOpened: false,
+  confirmDeletePlaylist: false,
+  confirmRemoveTrack: false,
+  playerOpened: false,
+}
+
+describe('music Escape ownership', () => {
+  it('owns Escape while either music popover is open', () => {
+    expect(
+      musicEscapeLayer({ ...closedState, addMenuOpened: true }),
+    ).toBe('menu')
+    expect(
+      musicEscapeLayer({ ...closedState, actionMenuOpened: true }),
+    ).toBe('menu')
+  })
+
+  it('keeps a real form sheet above menus and the player', () => {
+    expect(
+      musicEscapeLayer({
+        ...closedState,
+        activeSheet: true,
+        addMenuOpened: true,
+        playerOpened: true,
+      }),
+    ).toBe('sheet')
+  })
+
+  it('does not claim Escape with no music overlay open', () => {
+    expect(musicEscapeLayer(closedState)).toBeNull()
+  })
+})
diff --git a/frontend/src/utils/musicEscape.ts b/frontend/src/utils/musicEscape.ts
new file mode 100644
index 0000000..b6afd04
--- /dev/null
+++ b/frontend/src/utils/musicEscape.ts
@@ -0,0 +1,22 @@
+export type MusicEscapeLayer =
+  | 'delete-playlist-confirmation'
+  | 'menu'
+  | 'player'
+  | 'remove-track-confirmation'
+  | 'sheet'
+
+export function musicEscapeLayer(state: {
+  actionMenuOpened: boolean
+  activeSheet: boolean
+  addMenuOpened: boolean
+  confirmDeletePlaylist: boolean
+  confirmRemoveTrack: boolean
+  playerOpened: boolean
+}): MusicEscapeLayer | null {
+  if (state.confirmRemoveTrack) return 'remove-track-confirmation'
+  if (state.confirmDeletePlaylist) return 'delete-playlist-confirmation'
+  if (state.activeSheet) return 'sheet'
+  if (state.addMenuOpened || state.actionMenuOpened) return 'menu'
+  if (state.playerOpened) return 'player'
+  return null
+}
diff --git a/frontend/src/utils/nui.test.ts b/frontend/src/utils/nui.test.ts
new file mode 100644
index 0000000..39dc5e2
--- /dev/null
+++ b/frontend/src/utils/nui.test.ts
@@ -0,0 +1,63 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { nuiCall } from '@/utils/nui'
+
+describe('nuiCall', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.stubGlobal('window', {
+      clearTimeout: globalThis.clearTimeout,
+      location: { search: '' },
+      setTimeout: globalThis.setTimeout,
+    })
+    vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('clears the request timeout after a successful callback', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ data: { value: 1 }, success: true }), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 200,
+      }),
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(nuiCall<{ value: number }>('test')).resolves.toEqual({
+      data: { value: 1 },
+      success: true,
+    })
+    expect(vi.getTimerCount()).toBe(0)
+    expect(fetchMock).toHaveBeenCalledWith(
+      'http://localhost:3002/api/test',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    )
+  })
+
+  it('aborts a callback that never completes', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn((_url: string, init?: RequestInit) =>
+        new Promise<Response>((_resolve, reject) => {
+          init?.signal?.addEventListener('abort', () => {
+            reject(new DOMException('Aborted', 'AbortError'))
+          })
+        }),
+      ),
+    )
+
+    const request = nuiCall('never-responds')
+    await vi.advanceTimersByTimeAsync(20_000)
+
+    await expect(request).resolves.toEqual({
+      error: 'request_timeout',
+      success: false,
+    })
+    expect(vi.getTimerCount()).toBe(0)
+  })
+})
diff --git a/frontend/src/utils/nui.ts b/frontend/src/utils/nui.ts
index 22ecce7..eecee7e 100644
--- a/frontend/src/utils/nui.ts
+++ b/frontend/src/utils/nui.ts
@@ -1,4 +1,5 @@
 const resourceName = globalThis.window?.GetParentResourceName?.() ?? 'sky_phone'
+const requestTimeoutMs = 20_000
 
 export type NuiResponse<T = unknown> = {
   success: boolean
@@ -24,12 +25,15 @@ export async function nuiCall<T = unknown>(
           undefined,
       }
     : data
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), requestTimeoutMs)
 
   try {
     const response = await fetch(`${baseUrl}/${endpoint}`, {
       body: JSON.stringify(requestData),
       headers: { 'Content-Type': 'application/json' },
       method: 'POST',
+      signal: controller.signal,
     })
 
     if (!response.ok) {
@@ -41,8 +45,14 @@ export async function nuiCall<T = unknown>(
     const body = await response.text()
     return body ? (JSON.parse(body) as NuiResponse<T>) : { success: true }
   } catch (error) {
-    const message = error instanceof Error ? error.message : 'Unknown error'
+    const message = controller.signal.aborted
+      ? 'request_timeout'
+      : error instanceof Error
+        ? error.message
+        : 'Unknown error'
     console.error(`[NUI] ${endpoint} failed:`, error)
     return { error: message, success: false }
+  } finally {
+    window.clearTimeout(timeoutId)
   }
 }
diff --git a/frontend/src/utils/preferences.test.ts b/frontend/src/utils/preferences.test.ts
index 9ddfb58..5084e7d 100644
--- a/frontend/src/utils/preferences.test.ts
+++ b/frontend/src/utils/preferences.test.ts
@@ -85,6 +85,17 @@ describe('preferences', () => {
     expect(value.settings.screenBrightness).toBe(10)
   })
 
+  it('keeps the phone above the minimum usable scale', () => {
+    const value = parsePhonePreferences(
+      JSON.stringify({
+        version: 1,
+        settings: { phoneScale: 50 },
+      }),
+    )
+
+    expect(value.settings.phoneScale).toBe(75)
+  })
+
   it('preserves safe notification preferences for custom apps', () => {
     const appId = 'example-app' as LaunchablePhoneAppId
     const value = parsePhonePreferences(
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 7ef0550..c586705 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -23,7 +23,7 @@ export const PHONE_FRAME_IDS = [
 export const RINGTONE_IDS = ['skyline', 'horizon', 'pulse'] as const
 export const NOTIFICATION_SOUND_IDS = ['chime', 'signal', 'soft'] as const
 export const WALLPAPER_IDS = ['midnight', 'aurora', 'ember'] as const
-export const PHONE_SCALE_MIN = 50
+export const PHONE_SCALE_MIN = 75
 export const PHONE_SCALE_MAX = 150
 export const PHONE_SCALE_STEP = 5
 
@@ -197,6 +197,10 @@ export function ensureAppNotificationPreferences(
   }
 }
 
+export function clampPhoneScale(value: number): number {
+  return Math.min(PHONE_SCALE_MAX, Math.max(PHONE_SCALE_MIN, value))
+}
+
 export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
   if (!raw) return cloneJsonData(DEFAULT_PHONE_PREFERENCES)
 
@@ -249,11 +253,13 @@ export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
           100,
         ),
         notifications: readNotifications(settings.notifications),
-        phoneScale: readNumber(
-          settings.phoneScale,
-          defaults.phoneScale,
-          PHONE_SCALE_MIN,
-          PHONE_SCALE_MAX,
+        phoneScale: clampPhoneScale(
+          readNumber(
+            settings.phoneScale,
+            defaults.phoneScale,
+            Number.MIN_SAFE_INTEGER,
+            Number.MAX_SAFE_INTEGER,
+          ),
         ),
         ringtone: readChoice(
           settings.ringtone,
diff --git a/frontend/src/utils/widgetLayout.test.ts b/frontend/src/utils/widgetLayout.test.ts
index aac1d6f..38f80a3 100644
--- a/frontend/src/utils/widgetLayout.test.ts
+++ b/frontend/src/utils/widgetLayout.test.ts
@@ -9,6 +9,7 @@ import {
   removeWidget,
   resizeWidget,
   widgetOccupiedCells,
+  widgetKeyboardTarget,
 } from '@/utils/widgetLayout'
 
 describe('widget layout', () => {
@@ -47,6 +48,21 @@ describe('widget layout', () => {
     expect(next.instances).toHaveLength(layout.instances.length)
   })
 
+  it('provides bounded keyboard targets for each widget size', () => {
+    const layout = createDefaultWidgetLayout()
+    const clock = layout.instances.find(
+      (instance) => instance.id === 'home-clock',
+    )!
+    const music = layout.instances.find(
+      (instance) => instance.id === 'home-music',
+    )!
+
+    expect(widgetKeyboardTarget(clock, 'right')).toEqual({ column: 1, row: 0 })
+    expect(widgetKeyboardTarget(clock, 'up')).toBeNull()
+    expect(widgetKeyboardTarget(music, 'right')).toBeNull()
+    expect(widgetKeyboardTarget(music, 'down')).toEqual({ column: 0, row: 3 })
+  })
+
   it('allows a small widget in the center with app cells on both sides', () => {
     const layout = createDefaultWidgetLayout()
     const moved = moveWidget(layout, 'home-clock', 2, 1, 1)
diff --git a/frontend/src/utils/widgetLayout.ts b/frontend/src/utils/widgetLayout.ts
index 71182be..5b6dc54 100644
--- a/frontend/src/utils/widgetLayout.ts
+++ b/frontend/src/utils/widgetLayout.ts
@@ -6,6 +6,7 @@ import type {
   WidgetSettings,
   WidgetSize,
 } from '@/types/widgets'
+import type { ReorderDirection } from '@/utils/keyboard'
 
 export const WIDGET_GRID_COLUMNS = 4
 export const WIDGET_HOME_ROWS = 5
@@ -296,6 +297,32 @@ export function moveWidget(
   return { instances: placed, version: 1 }
 }
 
+export function widgetKeyboardTarget(
+  instance: WidgetInstance,
+  direction: ReorderDirection,
+): { column: number; row: number } | null {
+  const span = WIDGET_SPANS[instance.size]
+  const maximumColumn = WIDGET_GRID_COLUMNS - span.columns
+  const maximumRow = rowsForPage(instance.page) - span.rows
+  const target = {
+    column:
+      instance.column +
+      (direction === 'left' ? -1 : direction === 'right' ? 1 : 0),
+    row:
+      instance.row +
+      (direction === 'up' ? -1 : direction === 'down' ? 1 : 0),
+  }
+  if (
+    target.column < 0 ||
+    target.column > maximumColumn ||
+    target.row < 0 ||
+    target.row > maximumRow
+  ) {
+    return null
+  }
+  return target
+}
+
 export function resizeWidget(
   layout: WidgetLayout,
   id: string,
diff --git a/frontend/src/views/SpringboardView.vue b/frontend/src/views/SpringboardView.vue
index aa02bf4..65331af 100644
--- a/frontend/src/views/SpringboardView.vue
+++ b/frontend/src/views/SpringboardView.vue
@@ -17,13 +17,16 @@ import type { WidgetKind, WidgetSettings, WidgetSize } from '@/types/widgets'
 import {
   deleteHomePage as previewHomePageDelete,
   HOME_GRID_PAGE_SIZE,
+  homeKeyboardTarget,
   MAX_HOME_GRID_PAGES,
   type HomeArea,
 } from '@/utils/homeLayout'
+import type { ReorderDirection } from '@/utils/keyboard'
 import {
   deleteWidgetPage as previewWidgetPageDelete,
   moveWidget as previewWidgetMove,
   WIDGET_GRID_COLUMNS,
+  widgetKeyboardTarget,
   widgetOccupiedCells,
 } from '@/utils/widgetLayout'
 
@@ -515,6 +518,14 @@ function stopWidgetDrag(): void {
   clearWidgetDragPreview()
 }
 
+function reorderWidget(id: string, direction: ReorderDirection): void {
+  const instance = widgets.layout.instances.find((widget) => widget.id === id)
+  if (!instance) return
+  const target = widgetKeyboardTarget(instance, direction)
+  if (!target) return
+  widgets.move(id, instance.page, target.column, target.row)
+}
+
 function removeWidget(id: string): void {
   widgets.remove(id)
   if (widgetActionId.value === id) widgetActionId.value = null
@@ -620,6 +631,21 @@ function stopHomeDrag(): void {
   draggingHomeApp.value = null
 }
 
+function reorderHomeApp(
+  area: HomeArea,
+  sourceIndex: number,
+  direction: ReorderDirection,
+): void {
+  const targetIndex = homeKeyboardTarget(
+    appStore.homeLayout,
+    area,
+    sourceIndex,
+    direction,
+  )
+  if (targetIndex === null) return
+  appStore.moveHomeApp(area, sourceIndex, area, targetIndex)
+}
+
 async function addHomePage(): Promise<void> {
   if (addingHomePage.value) return
   addingHomePage.value = true
@@ -704,6 +730,7 @@ watch(isEditablePage, (visible) => {
             @dragstart="startWidgetDrag"
             @menu="openWidgetMenu"
             @remove="removeWidget"
+            @reorder="reorderWidget"
           />
         </div>
       </section>
@@ -725,6 +752,7 @@ watch(isEditablePage, (visible) => {
           @dragstart="startWidgetDrag"
           @menu="openWidgetMenu"
           @remove="removeWidget"
+          @reorder="reorderWidget"
         />
         <TransitionGroup
           :name="
@@ -750,6 +778,7 @@ watch(isEditablePage, (visible) => {
               @dragstart="startHomeDrag('grid', cell.sourceIndex)"
               @edit="enterEditMode"
               @remove="removeHomeApp(cell.app.id)"
+              @reorder="reorderHomeApp('grid', cell.sourceIndex, $event)"
             />
             <div
               v-else
@@ -946,6 +975,7 @@ watch(isEditablePage, (visible) => {
             @dragstart="startHomeDrag('dock', appIndex)"
             @edit="enterEditMode"
             @remove="removeHomeApp(app.id)"
+            @reorder="reorderHomeApp('dock', appIndex, $event)"
           />
           <div
             v-else
diff --git a/frontend/src/views/apps/BankingApp.vue b/frontend/src/views/apps/BankingApp.vue
index 46c4ce4..25b4c9a 100644
--- a/frontend/src/views/apps/BankingApp.vue
+++ b/frontend/src/views/apps/BankingApp.vue
@@ -40,6 +40,7 @@ import type {
   BankingTransactionKind,
 } from '@/types/banking'
 import type { PhoneContact } from '@/types/phone'
+import { handleEnterAction } from '@/utils/keyboard'
 import { formatPhoneNumber, normalizePhoneNumber } from '@/utils/phone'
 
 type BankingTab = 'home' | 'activity'
@@ -153,7 +154,9 @@ function closeAction(): void {
 
 function updateTarget(event: Event): void {
   if (!(event.target instanceof HTMLInputElement)) {
-    console.error('[banking] Phone number input emitted without an input target.')
+    console.error(
+      '[banking] Phone number input emitted without an input target.',
+    )
     return
   }
   target.value = event.target.value
@@ -163,7 +166,9 @@ function updateTarget(event: Event): void {
 function selectContact(contact: PhoneContact): void {
   target.value = contact.phone_number
   formError.value = ''
-  void nextTick(() => document.getElementById('banking-transfer-amount')?.focus())
+  void nextTick(() =>
+    document.getElementById('banking-transfer-amount')?.focus(),
+  )
 }
 
 function updateAmount(event: Event): void {
@@ -237,6 +242,7 @@ function focusableSheetElements(): HTMLElement[] {
 function handleSheetKeydown(event: KeyboardEvent): void {
   if (event.key === 'Escape') {
     event.preventDefault()
+    event.stopPropagation()
     closeAction()
     return
   }
@@ -258,6 +264,15 @@ function handleSheetKeydown(event: KeyboardEvent): void {
   }
 }
 
+function handleWindowKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || !action.value || event.defaultPrevented) {
+    return
+  }
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  closeAction()
+}
+
 function errorMessage(code: string): string {
   return phone.t(`Apps.banking.errors.${code}`) ===
     `Apps.banking.errors.${code}`
@@ -268,9 +283,8 @@ function errorMessage(code: string): string {
 async function submitAction(): Promise<void> {
   if (!action.value) return
   const parsedAmount = Number(amount.value)
-  const phoneNumber = action.value === 'transfer'
-    ? normalizePhoneNumber(target.value)
-    : undefined
+  const phoneNumber =
+    action.value === 'transfer' ? normalizePhoneNumber(target.value) : undefined
   if (
     !Number.isSafeInteger(parsedAmount) ||
     parsedAmount <= 0 ||
@@ -291,13 +305,17 @@ async function submitAction(): Promise<void> {
   action.value = null
 }
 
-onMounted(() => void banking.load())
+onMounted(() => {
+  window.addEventListener('keydown', handleWindowKeydown)
+  void banking.load()
+})
 
 watch(action, async (currentAction) => {
   if (currentAction) {
-    previousFocus = document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null
+    previousFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null
     await nextTick()
     document.getElementById('banking-transfer-target')?.focus()
     return
@@ -307,6 +325,7 @@ watch(action, async (currentAction) => {
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleWindowKeydown)
   if (wheelRefreshTimeout) clearTimeout(wheelRefreshTimeout)
   previousFocus?.focus()
 })
@@ -379,12 +398,17 @@ onBeforeUnmount(() => {
           </div>
           <strong>{{ formatMoney(banking.overview.bank) }}</strong>
           <div class="banking-balance__trend">
-            <span>{{ formatMoney(totals.incoming - totals.outgoing, true) }}</span>
+            <span>{{
+              formatMoney(totals.incoming - totals.outgoing, true)
+            }}</span>
             {{ phone.t('Apps.banking.recentPeriod') }}
           </div>
         </k-glass>
 
-        <section class="banking-actions" :aria-label="phone.t('Apps.banking.actions')">
+        <section
+          class="banking-actions"
+          :aria-label="phone.t('Apps.banking.actions')"
+        >
           <k-glass
             component="button"
             type="button"
@@ -435,17 +459,27 @@ onBeforeUnmount(() => {
           >
             <k-list inset strong class="banking-transaction-list">
               <k-list-item
-              v-for="transaction in banking.overview.transactions.slice(0, 5)"
-              :key="transaction.id"
+                v-for="transaction in banking.overview.transactions.slice(0, 5)"
+                :key="transaction.id"
                 :subtitle="formatDate(transaction.createdAt)"
                 :title="transactionTitle(transaction)"
               >
                 <template #media>
-                  <component :is="transactionIcons[transaction.kind]" :size="17" />
+                  <component
+                    :is="transactionIcons[transaction.kind]"
+                    :size="17"
+                  />
                 </template>
                 <template #after>
                   <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                    {{
+                      formatMoney(
+                        isIncoming(transaction.kind)
+                          ? transaction.amount
+                          : -transaction.amount,
+                        true,
+                      )
+                    }}
                   </b>
                 </template>
               </k-list-item>
@@ -460,13 +494,18 @@ onBeforeUnmount(() => {
       <template v-else>
         <section class="banking-activity-hero">
           <span>{{ phone.t('Apps.banking.activity') }}</span>
-          <strong>{{ formatMoney(totals.incoming - totals.outgoing, true) }}</strong>
+          <strong>{{
+            formatMoney(totals.incoming - totals.outgoing, true)
+          }}</strong>
           <small>{{ phone.t('Apps.banking.recentPeriod') }}</small>
         </section>
 
         <k-card :content-wrap="false" class="banking-card banking-chart-card">
           <div class="banking-chart-legend">
-            <span><i class="is-incoming"></i>{{ phone.t('Apps.banking.incoming') }}</span>
+            <span
+              ><i class="is-incoming"></i
+              >{{ phone.t('Apps.banking.incoming') }}</span
+            >
             <span><i></i>{{ phone.t('Apps.banking.outgoing') }}</span>
           </div>
           <div class="banking-chart">
@@ -475,14 +514,19 @@ onBeforeUnmount(() => {
               :key="day.date.getTime()"
               class="banking-chart__day"
               role="img"
-              :aria-label="phone.t('Apps.banking.chartDaySummary', {
-                day: day.label,
-                incoming: formatMoney(day.incoming),
-                outgoing: formatMoney(day.outgoing),
-              })"
+              :aria-label="
+                phone.t('Apps.banking.chartDaySummary', {
+                  day: day.label,
+                  incoming: formatMoney(day.incoming),
+                  outgoing: formatMoney(day.outgoing),
+                })
+              "
             >
               <div>
-                <i class="is-incoming" :style="{ height: `${day.incomingHeight}%` }"></i>
+                <i
+                  class="is-incoming"
+                  :style="{ height: `${day.incomingHeight}%` }"
+                ></i>
                 <i :style="{ height: `${day.outgoingHeight}%` }"></i>
               </div>
               <span>{{ day.label }}</span>
@@ -494,7 +538,10 @@ onBeforeUnmount(() => {
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.allTransactions') }}</h2>
           </div>
-          <k-card :content-wrap="false" class="banking-card banking-transaction-card">
+          <k-card
+            :content-wrap="false"
+            class="banking-card banking-transaction-card"
+          >
             <k-list inset strong class="banking-transaction-list">
               <k-list-item
                 v-for="transaction in banking.overview.transactions"
@@ -503,11 +550,21 @@ onBeforeUnmount(() => {
                 :title="transactionTitle(transaction)"
               >
                 <template #media>
-                  <component :is="transactionIcons[transaction.kind]" :size="17" />
+                  <component
+                    :is="transactionIcons[transaction.kind]"
+                    :size="17"
+                  />
                 </template>
                 <template #after>
                   <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                    {{
+                      formatMoney(
+                        isIncoming(transaction.kind)
+                          ? transaction.amount
+                          : -transaction.amount,
+                        true,
+                      )
+                    }}
                   </b>
                 </template>
               </k-list-item>
@@ -553,7 +610,7 @@ onBeforeUnmount(() => {
       </k-toolbar-pane>
     </k-tabbar>
 
-    <k-sheet :opened="Boolean(action)" class="banking-sheet" @backdropclick="closeAction">
+    <k-sheet :opened="Boolean(action)" @backdropclick="closeAction">
       <section
         v-if="action"
         class="banking-sheet__content"
@@ -600,7 +657,7 @@ onBeforeUnmount(() => {
             type="number"
             :value="amount"
             @input="updateAmount"
-            @keydown.enter="submitAction"
+            @keydown.enter="handleEnterAction($event, submitAction)"
           />
         </k-list>
         <div class="banking-contact-picker">
diff --git a/frontend/src/views/apps/BillingApp.vue b/frontend/src/views/apps/BillingApp.vue
index d290b24..e637b63 100644
--- a/frontend/src/views/apps/BillingApp.vue
+++ b/frontend/src/views/apps/BillingApp.vue
@@ -1404,6 +1404,31 @@ onBeforeUnmount(() => {
   --k-button-bg-color: var(--billing-blue);
   width: 100%;
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .billing-navbar {
+    --k-navbar-bg-color: rgb(7 9 12 / 90%);
+    background: rgb(7 9 12 / 88%);
+  }
+  .billing-app--light .billing-navbar {
+    --k-navbar-bg-color: rgb(245 247 250 / 91%);
+    background: rgb(245 247 250 / 88%);
+  }
+  .billing-summary__item,
+  .billing-filter-panel,
+  .billing-invoice-card,
+  .billing-list-row,
+  .billing-search :deep(form),
+  .billing-detail__hero,
+  .billing-panel,
+  .billing-note {
+    background: var(--billing-panel);
+  }
+  .billing-detail__hero--paid {
+    background:
+      radial-gradient(circle at 50% 6%, rgb(72 199 111 / 18%), transparent 52%),
+      var(--billing-panel);
+  }
+}
 .billing-toast {
   z-index: 50;
 }
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index c009a22..fc5148a 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -53,6 +53,7 @@ const elapsed = ref('00:00')
 const captures = ref<CaptureItem[]>([])
 const latestMedia = ref<PhoneMedia | null>(null)
 const gameCanvas = ref<HTMLCanvasElement | null>(null)
+const gameViewUnavailable = ref(false)
 const noticeText = ref('')
 const videoBitrateKbps = ref(1500)
 let shutterTimer: number | undefined
@@ -291,10 +292,26 @@ function resizeGameView(entry?: ResizeObserverEntry): void {
 
 function startGameView(): void {
   if (isDevelopment || !gameCanvas.value) return
-  gameView = createGameView(gameCanvas.value)
+  try {
+    gameView = createGameView(gameCanvas.value, {
+      onContextRestored: () => {
+        resizeGameView()
+        startGameViewRenderLoop()
+      },
+    })
+  } catch (error) {
+    gameViewUnavailable.value = true
+    console.error('[Camera] Game-view rendering is unavailable.', error)
+    return
+  }
   resizeObserver = new ResizeObserver((entries) => resizeGameView(entries[0]))
   resizeObserver.observe(gameCanvas.value)
   resizeGameView()
+  startGameViewRenderLoop()
+}
+
+function startGameViewRenderLoop(): void {
+  if (renderFrameId !== undefined) return
   const render = () => {
     if (!gameView || gameView.isLost()) {
       renderFrameId = undefined
@@ -434,7 +451,7 @@ onBeforeUnmount(() => {
   >
     <div class="camera-viewport" @wheel.prevent="zoomWithWheel">
       <canvas
-        v-if="!isDevelopment"
+        v-if="!isDevelopment && !gameViewUnavailable"
         ref="gameCanvas"
         class="camera-game-view"
         aria-hidden="true"
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index 42cfe1a..66c8cf7 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -94,6 +94,7 @@ import type {
   CompanySummary,
 } from '@/types/companies'
 import type { PhoneMedia } from '@/types/media'
+import { handleEnterAction } from '@/utils/keyboard'
 import { nuiCall } from '@/utils/nui'
 
 type CompaniesTab = 'directory' | 'requests' | 'work'
@@ -1764,7 +1765,7 @@ onBeforeUnmount(() => {
           :placeholder="phone.t('Apps.companies.requests.replyPlaceholder')"
           :value="threadDraft"
           @input="threadDraft = messagebarValue($event)"
-          @keydown.enter.exact.prevent="sendThreadMessage"
+          @keydown.enter.exact="handleEnterAction($event, sendThreadMessage)"
         >
           <template #right>
             <k-toolbar-pane class="ios:h-10">
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 9680cd4..bc9962f 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -82,6 +82,7 @@ import type {
 } from '@/types/crewlink'
 import { copyText } from '@/utils/clipboard'
 import { easyShareCrewLinkInviteCode } from '@/utils/easyshare'
+import { consumeEscape, handleEnterAction } from '@/utils/keyboard'
 import { nuiCall } from '@/utils/nui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
@@ -699,7 +700,30 @@ function onCrewLinkMessage(event: MessageEvent): void {
   if (event.data?.type === 'crewlink:changed') void crew.bootstrap()
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  if (
+    !confirmAction.value &&
+    !sheet.value &&
+    !selectedMember.value &&
+    !selectedPing.value
+  ) {
+    return
+  }
+  if (!consumeEscape(event)) return
+
+  if (confirmAction.value) {
+    cancelConfirmation()
+  } else if (sheet.value) {
+    closeSheet()
+  } else if (selectedMember.value) {
+    selectedMember.value = null
+  } else {
+    selectedPing.value = null
+  }
+}
+
 onMounted(async () => {
+  window.addEventListener('keydown', onKeydown, true)
   await crew.bootstrap()
   username.value = crew.profile?.username ?? ''
   openSharedInvite()
@@ -713,6 +737,7 @@ onBeforeUnmount(() => {
   if (liveTimer) window.clearInterval(liveTimer)
   if (toastTimer) window.clearTimeout(toastTimer)
   if (pointerFrame) cancelAnimationFrame(pointerFrame)
+  window.removeEventListener('keydown', onKeydown, true)
   window.removeEventListener('message', onCrewLinkMessage)
 })
 </script>
@@ -756,7 +781,7 @@ onBeforeUnmount(() => {
             maxlength="20"
             outline
             @input="updateValue('username', $event)"
-            @keydown.enter="createProfile"
+            @keydown.enter="handleEnterAction($event, createProfile)"
           />
         </k-list>
         <p v-if="formError" class="crewlink-error" role="alert">{{ formError }}</p>
@@ -1036,7 +1061,7 @@ onBeforeUnmount(() => {
       </k-tabbar>
     </template>
 
-    <k-sheet :opened="Boolean(sheet)" class="crewlink-sheet" @backdropclick="closeSheet">
+    <k-sheet :opened="Boolean(sheet)" @backdropclick="closeSheet">
       <section v-if="sheet" class="crewlink-sheet__content" role="dialog" aria-modal="true">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" :aria-label="phone.t('Common.close')" @click="closeSheet"><X /></k-link>
 
@@ -1051,7 +1076,7 @@ onBeforeUnmount(() => {
 
         <template v-else-if="sheet === 'join-group'">
           <span class="crewlink-sheet__icon"><UserPlus /></span><h2>{{ t('joinWithCode') }}</h2><p>{{ t('joinWithCodeBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-invite-code" :label="t('inviteCode')" :placeholder="t('inviteCodePlaceholder')" :value="inviteCode" maxlength="8" outline @input="updateValue('inviteCode', $event)" @keydown.enter="joinGroup" /></k-list>
+          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-invite-code" :label="t('inviteCode')" :placeholder="t('inviteCodePlaceholder')" :value="inviteCode" maxlength="8" outline @input="updateValue('inviteCode', $event)" @keydown.enter="handleEnterAction($event, joinGroup)" /></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
           <k-button large rounded :disabled="crew.isLoading" @click="joinGroup">{{ t('joinCrew') }}</k-button>
           <template v-if="crew.invitations.length">
@@ -1143,13 +1168,13 @@ onBeforeUnmount(() => {
 
         <template v-else-if="sheet === 'member' && !selectedMember && crew.profile">
           <span class="crewlink-sheet__icon"><UserRound /></span><h2>{{ t('editUsername') }}</h2><p>{{ t('editUsernameBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-username" :label="t('username')" :value="username" maxlength="20" outline @input="updateValue('username', $event)" @keydown.enter="saveProfile" /></k-list>
+          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-username" :label="t('username')" :value="username" maxlength="20" outline @input="updateValue('username', $event)" @keydown.enter="handleEnterAction($event, saveProfile)" /></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p><k-button large rounded @click="saveProfile">{{ phone.t('Common.save') }}</k-button>
         </template>
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedMember && !sheet)" class="crewlink-sheet" @backdropclick="selectedMember = null">
+    <k-sheet :opened="Boolean(selectedMember && !sheet)" @backdropclick="selectedMember = null">
       <section v-if="selectedMember" class="crewlink-sheet__content crewlink-member-preview">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedMember = null"><X /></k-link>
         <span class="crewlink-sheet__avatar" :style="{ '--crew': activeColour }">{{ memberInitials(selectedMember) }}</span><h2>@{{ selectedMember.username }}</h2><p>{{ roleLabel(selectedMember.role) }} · {{ memberStatus(selectedMember) }}</p>
@@ -1157,7 +1182,7 @@ onBeforeUnmount(() => {
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedPing)" class="crewlink-sheet" @backdropclick="selectedPing = null">
+    <k-sheet :opened="Boolean(selectedPing)" @backdropclick="selectedPing = null">
       <section v-if="selectedPing" class="crewlink-sheet__content crewlink-member-preview">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedPing = null"><X /></k-link>
         <span class="crewlink-sheet__icon" :style="{ background: pingColours[selectedPing.type] }"><component :is="pingIcons[selectedPing.type]" /></span><small>{{ t(`pingTypes.${selectedPing.type}`) }}</small><h2>{{ selectedPing.label }}</h2><p>{{ t('sharedBy', { username: selectedPing.creatorUsername }) }} · {{ expiresIn(selectedPing.expiresAt) }}</p>
diff --git a/frontend/src/views/apps/DarkChatApp.vue b/frontend/src/views/apps/DarkChatApp.vue
index 65f4301..664cca8 100644
--- a/frontend/src/views/apps/DarkChatApp.vue
+++ b/frontend/src/views/apps/DarkChatApp.vue
@@ -68,6 +68,7 @@ import type { EasySharePayload } from '@/types/easyshare'
 import type { MediaType, PhoneMedia } from '@/types/media'
 import { copyText } from '@/utils/clipboard'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 
 const VOICE_MAX_DURATION_MS = 60_000
 const VOICE_MAX_BYTES = 270_000
@@ -2332,7 +2333,7 @@ onBeforeUnmount(() => {
               clear-button
               @input="setIdentifier"
               @clear="identifier = ''"
-              @keydown.enter.prevent="requestStart()"
+              @keydown.enter="handleEnterAction($event, requestStart)"
           /></k-list>
           <k-button
             large
@@ -2601,7 +2602,7 @@ onBeforeUnmount(() => {
           :placeholder="t('message')"
           :colors="darkMessagebarColors"
           @input="setDraft"
-          @keydown.enter.exact.prevent="sendText"
+          @keydown.enter.exact="handleEnterAction($event, sendText)"
         >
           <template #left
             ><k-link
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 21c05b7..dbfa5ea 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -279,9 +279,17 @@ function moveMediaPreview(direction: number): void {
 
 function handleMediaPreviewKeydown(event: KeyboardEvent): void {
   if (!mediaPreview.value) return
-  if (event.key === 'Escape') closeMediaPreview()
-  if (event.key === 'ArrowLeft') moveMediaPreview(-1)
-  if (event.key === 'ArrowRight') moveMediaPreview(1)
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    closeMediaPreview()
+  } else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    moveMediaPreview(-1)
+  } else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    moveMediaPreview(1)
+  }
 }
 
 function toast(path: string): void {
@@ -731,11 +739,11 @@ watch(
 onBeforeUnmount(() => {
   if (exploreSearchTimer !== undefined) window.clearTimeout(exploreSearchTimer)
   if (networkSearchTimer !== undefined) window.clearTimeout(networkSearchTimer)
-  window.removeEventListener('keydown', handleMediaPreviewKeydown)
+  window.removeEventListener('keydown', handleMediaPreviewKeydown, true)
 })
 
 onMounted(async () => {
-  window.addEventListener('keydown', handleMediaPreviewKeydown)
+  window.addEventListener('keydown', handleMediaPreviewKeydown, true)
   const selection =
     messageMedia.consumeMany<ComposerContext>('feather:composer')
   const profileSelection =
@@ -4929,4 +4937,87 @@ onMounted(async () => {
   color: inherit;
   background: var(--feather-panel);
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .feather-navbar {
+    --k-navbar-bg-color: rgb(255 255 255 / 91%);
+    border-bottom-color: rgb(127 127 127 / 18%);
+  }
+  :global(.dark) .feather-navbar {
+    --k-navbar-bg-color: rgb(9 13 18 / 91%);
+  }
+  .dark.feather-app .feather-navbar {
+    --k-navbar-bg-color: rgb(0 0 0 / 90%);
+    background: rgb(0 0 0 / 88%);
+  }
+  .feather-app--active .feather-navbar {
+    --k-navbar-bg-color: rgb(18 23 27 / 91%);
+    background: rgb(18 23 27 / 88%);
+  }
+  .feather-app--active.feather-app--light .feather-navbar {
+    --k-navbar-bg-color: rgb(251 251 246 / 91%);
+    background: rgb(251 251 246 / 88%);
+  }
+  .feather-feed-tabs,
+  .feather-explore-head,
+  .feather-activity-head,
+  .feather-trend,
+  .feather-composer__tools,
+  .feather-section-title,
+  .feather-profile,
+  .feather-profile-tabs,
+  .feather-activity,
+  .feather-person {
+    border-color: rgb(127 127 127 / 18%);
+  }
+  .feather-trend:active,
+  .feather-profile__stats button,
+  .feather-report select,
+  .feather-report textarea,
+  .feather-app--active .feather-explore-search :deep(form) {
+    background: rgb(127 127 127 / 7%);
+  }
+  .feather-profile__stats button:active,
+  .feather-thread-reply__comment-target,
+  .feather-thread-title span,
+  .feather-app--active .feather-profile__stats span,
+  .feather-composer-media > header > span,
+  .feather-composer-media > header > b,
+  .feather-app--active .feather-follow-button--pending:hover,
+  .feather-app--active :deep(.feather-follow:hover),
+  .feather-composer-media__actions button:not(:disabled):hover {
+    background: rgb(29 155 240 / 13%);
+  }
+  .feather-report select,
+  .feather-report textarea,
+  .feather-app--active .feather-follow-button--following {
+    border-color: rgb(127 127 127 / 24%);
+  }
+  .feather-app--active :deep(.feather-post-glass),
+  .feather-network-list,
+  .feather-app--active .feather-thread-reply,
+  .feather-profile-suggestion,
+  .feather-edit__identity,
+  .feather-edit__photo,
+  .feather-edit__fields,
+  .feather-connections__tabs,
+  .feather-connections__list {
+    background: var(--feather-panel);
+  }
+  .feather-network-person__bio {
+    color: var(--feather-muted);
+  }
+  .feather-network-person__avatar .feather-avatar,
+  .feather-app--active .feather-follow-button--pending,
+  .feather-app--active .feather-profile__actions :deep(.k-button),
+  .feather-edit__photo-actions :deep(.k-button) {
+    border-color: var(--feather-blue);
+  }
+  .feather-compose-fab,
+  .feather-edit__avatar {
+    border-color: #70c5fa;
+  }
+  .feather-connections__remove {
+    border-color: #f04f65;
+  }
+}
 </style>
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index 6eda1a4..f7dbca5 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -85,6 +85,7 @@ import type { PhoneMedia } from '@/types/media'
 import type { EasySharePayload } from '@/types/easyshare'
 import type { GifSearchResult, SmsAttachmentType } from '@/types/messages'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 
 type FlareTab = 'discover' | 'explore' | 'likes' | 'matches' | 'profile'
 type ExploreMode = 'all' | 'dates' | 'friends' | 'longTerm'
@@ -1145,7 +1146,7 @@ onBeforeUnmount(() => {
         :value="draft"
         :disabled="flare.sending"
         @input="draft = eventValue($event)"
-        @keydown.enter.exact.prevent="sendMessage"
+        @keydown.enter.exact="handleEnterAction($event, sendMessage)"
       >
         <template #left>
           <k-toolbar-pane class="ios:h-10 messages-messagebar__tools">
@@ -1861,7 +1862,7 @@ onBeforeUnmount(() => {
         :aria-modal="choiceOpened ? 'true' : undefined"
         aria-labelledby="flare-choice-sheet-title"
         :inert="!choiceOpened"
-        @keydown.esc="closeChoice"
+        @keydown.esc.stop.prevent="closeChoice"
       >
         <span class="flare-choice-sheet__grabber" aria-hidden="true" />
         <header class="flare-choice-sheet__header">
@@ -3097,4 +3098,19 @@ onBeforeUnmount(() => {
 :global(.phone-app.dark .flare-action) {
   box-shadow: none;
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .flare-navbar {
+    border-bottom-color: rgb(127 127 127 / 18%);
+  }
+  .flare-photo-slot {
+    background: rgb(127 127 127 / 18%);
+  }
+  .flare-photo-grid :deep(.flare-photo-add) {
+    border-color: rgb(127 127 127 / 44%);
+    background: var(--flare-surface);
+  }
+  .flare-choice-sheet__grabber {
+    background: rgb(127 127 127 / 38%);
+  }
+}
 </style>
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index a79fa4d..fde1c29 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -17,6 +17,7 @@ import {
   ShieldAlert,
   Send,
   Share2,
+  TriangleAlert,
   UserRound,
   Video,
   X,
@@ -116,6 +117,7 @@ const publishing = ref(false)
 const feedback = ref('')
 const likedPulseId = ref<string | null>(null)
 const reactionPulse = ref<{ id: string; kind: 'like' | 'save' } | null>(null)
+const playbackFailedIds = ref(new Set<string>())
 const profileDraft = ref({
   accountType: 'person',
   bio: '',
@@ -250,11 +252,66 @@ async function confirmLogout(): Promise<void> {
 }
 
 function setVideoElement(id: string, element: unknown): void {
-  if (element instanceof HTMLVideoElement) videoElements.set(id, element)
+  if (element instanceof HTMLVideoElement) {
+    videoElements.set(id, element)
+    return
+  }
+  videoElements.delete(id)
+  setPlaybackFailed(id, false)
 }
 
 function setMusicElement(id: string, element: unknown): void {
-  if (element instanceof HTMLAudioElement) musicElements.set(id, element)
+  if (element instanceof HTMLAudioElement) {
+    musicElements.set(id, element)
+    return
+  }
+  musicElements.delete(id)
+}
+
+function setPlaybackFailed(id: string, failed: boolean): void {
+  const next = new Set(playbackFailedIds.value)
+  if (failed) next.add(id)
+  else next.delete(id)
+  playbackFailedIds.value = next
+}
+
+async function playFeedVideo(
+  id: string,
+  element: HTMLVideoElement,
+  showNotice = false,
+): Promise<boolean> {
+  setPlaybackFailed(id, false)
+  try {
+    await element.play()
+  } catch (error) {
+    setPlaybackFailed(id, true)
+    console.error(`[FlipTok] Could not play video ${id}.`, error)
+    if (showNotice) notify(t('errors.video_not_found'))
+    return false
+  }
+
+  const music = musicElements.get(id)
+  if (music) {
+    try {
+      await music.play()
+    } catch (error) {
+      console.error(`[FlipTok] Could not play music for video ${id}.`, error)
+    }
+  }
+  return true
+}
+
+function handleFeedVideoError(id: string, event: Event): void {
+  setPlaybackFailed(id, true)
+  const code = (event.currentTarget as HTMLVideoElement).error?.code
+  console.error(
+    `[FlipTok] Video ${id} could not be decoded or loaded${code ? ` (media error ${code})` : ''}.`,
+  )
+}
+
+function retryPlayback(video: FlipTokVideo): void {
+  const element = videoElements.get(video.id)
+  if (element) void playFeedVideo(video.id, element, true)
 }
 
 function chooseMusicTrack(trackId: string): void {
@@ -305,10 +362,8 @@ function observeVideos(): void {
               otherAudio?.pause()
             }
           })
-          void video.play().catch(() => undefined)
           const id = video.dataset.id
-          const music = id ? musicElements.get(id) : undefined
-          if (music) void music.play().catch(() => undefined)
+          if (id) void playFeedVideo(id, video)
           if (id) void nuiCall('fliptok:view', { id })
         } else {
           video.pause()
@@ -327,8 +382,7 @@ function togglePlayback(video: FlipTokVideo): void {
   if (!element) return
   const music = musicElements.get(video.id)
   if (element.paused) {
-    void element.play()
-    if (music) void music.play().catch(() => undefined)
+    void playFeedVideo(video.id, element, true)
   } else {
     element.pause()
     music?.pause()
@@ -339,6 +393,7 @@ function prepareFeedVideo(
   video: FlipTokVideo,
   element: HTMLVideoElement,
 ): void {
+  setPlaybackFailed(video.id, false)
   element.volume = (Number(video.original_volume) || 0) / 100
   const start = Math.min(
     (Number(video.trim_start_ms) || 0) / 1000,
@@ -943,6 +998,7 @@ onBeforeUnmount(() => {
             @timeupdate="
               enforceVideoTrim(video, $event.target as HTMLVideoElement)
             "
+            @error="handleFeedVideoError(video.id, $event)"
           />
           <audio
             v-if="video.music_url"
@@ -959,6 +1015,17 @@ onBeforeUnmount(() => {
             @click="handleVideoClick(video)"
             @dblclick.prevent="handleVideoDoubleClick(video)"
           />
+          <button
+            v-if="playbackFailedIds.has(video.id)"
+            type="button"
+            class="video-playback-fallback"
+            :aria-label="`${t('errors.video_not_found')} ${phone.t('Common.start')}`"
+            @click.stop="retryPlayback(video)"
+          >
+            <TriangleAlert />
+            <strong>{{ t('errors.video_not_found') }}</strong>
+            <span>{{ phone.t('Common.start') }}</span>
+          </button>
           <Transition name="double-like">
             <Heart
               v-if="likedPulseId === video.id"
@@ -1932,6 +1999,36 @@ onBeforeUnmount(() => {
     rgba(0, 0, 0, 0.74)
   );
 }
+.video-playback-fallback {
+  position: absolute;
+  z-index: 10;
+  top: 50%;
+  left: 50%;
+  width: min(230px, 72%);
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  border: 1px solid rgb(255 255 255 / 24%);
+  border-radius: 18px;
+  padding: 16px;
+  background: rgb(18 18 20 / 88%);
+  color: #fff;
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+.video-playback-fallback svg {
+  width: 28px;
+  height: 28px;
+  color: #ff9f0a;
+}
+.video-playback-fallback strong {
+  font-size: 12px;
+}
+.video-playback-fallback span {
+  color: #64a8ff;
+  font-size: 11px;
+  font-weight: 700;
+}
 .video-copy {
   position: absolute;
   left: 13px;
diff --git a/frontend/src/views/apps/GalleryApp.vue b/frontend/src/views/apps/GalleryApp.vue
index 0539d21..c993d3f 100644
--- a/frontend/src/views/apps/GalleryApp.vue
+++ b/frontend/src/views/apps/GalleryApp.vue
@@ -84,10 +84,13 @@ const imageZoom = ref(1)
 const imagePan = ref({ x: 0, y: 0 })
 const landscapeViewer = ref(false)
 const dragging = ref(false)
+const videoPlaybackError = ref(false)
 const dragStart = ref({ panX: 0, panY: 0, x: 0, y: 0 })
 let observer: IntersectionObserver | null = null
 let toastTimer: number | undefined
 let pendingDeleteCorrelation = ''
+let dragTarget: HTMLElement | null = null
+let dragPointerId: number | null = null
 
 const imageStyle = computed(() => ({
   cursor:
@@ -227,6 +230,7 @@ function openMedia(entry: PhoneMedia): void {
   landscapeViewer.value = false
   phone.setCameraLandscape(false)
   selected.value = entry
+  videoPlaybackError.value = false
   imageZoom.value = 1
   imagePan.value = { x: 0, y: 0 }
 }
@@ -254,6 +258,7 @@ function closeMedia(): void {
   landscapeViewer.value = false
   phone.setCameraLandscape(false)
   selected.value = null
+  videoPlaybackError.value = false
   deleteDialogOpened.value = false
   stopDragging()
 }
@@ -295,6 +300,9 @@ function startDragging(event: PointerEvent): void {
     setZoom(2)
     return
   }
+  dragTarget = event.currentTarget as HTMLElement
+  dragPointerId = event.pointerId
+  dragTarget.setPointerCapture(event.pointerId)
   dragging.value = true
   dragStart.value = {
     panX: imagePan.value.x,
@@ -302,8 +310,6 @@ function startDragging(event: PointerEvent): void {
     x: event.clientX,
     y: event.clientY,
   }
-  window.addEventListener('pointermove', moveImage)
-  window.addEventListener('pointerup', stopDragging)
 }
 
 function moveImage(event: PointerEvent): void {
@@ -316,8 +322,44 @@ function moveImage(event: PointerEvent): void {
 
 function stopDragging(): void {
   dragging.value = false
-  window.removeEventListener('pointermove', moveImage)
-  window.removeEventListener('pointerup', stopDragging)
+  if (
+    dragTarget &&
+    dragPointerId !== null &&
+    dragTarget.hasPointerCapture(dragPointerId)
+  ) {
+    dragTarget.releasePointerCapture(dragPointerId)
+  }
+  dragTarget = null
+  dragPointerId = null
+}
+
+function moveImageWithKeyboard(event: KeyboardEvent): void {
+  if (imageZoom.value <= 1) return
+  const step = event.shiftKey ? 48 : 24
+  const offsets: Partial<Record<string, { x: number; y: number }>> = {
+    ArrowDown: { x: 0, y: -step },
+    ArrowLeft: { x: step, y: 0 },
+    ArrowRight: { x: -step, y: 0 },
+    ArrowUp: { x: 0, y: step },
+  }
+  const offset = offsets[event.key]
+  if (!offset) return
+  event.preventDefault()
+  event.stopPropagation()
+  imagePan.value = {
+    x: imagePan.value.x + offset.x,
+    y: imagePan.value.y + offset.y,
+  }
+}
+
+async function initializeVideo(event: Event): Promise<void> {
+  orientToMedia(event)
+  videoPlaybackError.value = false
+  try {
+    await (event.currentTarget as HTMLVideoElement).play()
+  } catch {
+    // The native controls remain visible when embedded CEF blocks autoplay.
+  }
 }
 
 async function deleteSelected(): Promise<void> {
@@ -569,18 +611,33 @@ onBeforeUnmount(() => {
           :alt="phone.t('Apps.photos.photoAlt')"
           :style="imageStyle"
           draggable="false"
+          tabindex="0"
           @load="orientToMedia"
           @pointerdown="startDragging"
+          @pointermove="moveImage"
+          @pointerup="stopDragging"
+          @pointercancel="stopDragging"
+          @lostpointercapture="stopDragging"
+          @keydown="moveImageWithKeyboard"
           @dblclick="setZoom(imageZoom === 1 ? 2 : 1)"
         />
         <video
           v-else
           :src="selected.url"
           controls
-          autoplay
           playsinline
-          @loadedmetadata="orientToMedia"
+          @loadedmetadata="initializeVideo"
+          @error="videoPlaybackError = true"
         ></video>
+        <k-block
+          v-if="selected.mediaType === 'video' && videoPlaybackError"
+          strong
+          inset
+          class="gallery-error"
+          role="alert"
+        >
+          {{ phone.t('Apps.photos.errors.unsupported') }}
+        </k-block>
       </div>
     </div>
 
@@ -776,6 +833,8 @@ onBeforeUnmount(() => {
   position: absolute;
   top: 50%;
   left: 50%;
+  width: 720px;
+  height: 368px;
   width: 100cqh;
   height: 100cqw;
   transform: translate(-50%, -50%) rotate(90deg);
diff --git a/frontend/src/views/apps/MapApp.vue b/frontend/src/views/apps/MapApp.vue
index 5c6cd23..2667c65 100644
--- a/frontend/src/views/apps/MapApp.vue
+++ b/frontend/src/views/apps/MapApp.vue
@@ -36,6 +36,7 @@ import { useMapStore } from '@/stores/map'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MapMarker, MapMarkerColor } from '@/types/map'
+import { handleEnterAction } from '@/utils/keyboard'
 import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 type MapStyle = 'default' | 'satellite' | 'atlas' | 'roads'
@@ -656,7 +657,7 @@ onBeforeUnmount(() => {
             maxlength="40"
             outline
             @input="updateMarkerLabel"
-            @keydown.enter="saveMarker"
+            @keydown.enter="handleEnterAction($event, saveMarker)"
           />
         </k-list>
         <span class="map-marker-sheet__label">{{
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index d401732..bae7e1f 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -54,6 +54,7 @@ import { useMessagesStore } from '@/stores/messages'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 import { sortContactsByMessageRecency } from '@/utils/messages'
 import type {
   GifSearchResult,
@@ -1496,7 +1497,7 @@ onBeforeUnmount(() => {
       :value="draft"
       :disabled="sending"
       @input="draft = eventValue($event)"
-      @keydown.enter.exact.prevent="sendTextMessage"
+      @keydown.enter.exact="handleEnterAction($event, sendTextMessage)"
     >
       <template #left>
         <k-toolbar-pane class="ios:h-10 messages-messagebar__tools">
diff --git a/frontend/src/views/apps/MusicApp.vue b/frontend/src/views/apps/MusicApp.vue
index 1ac9a67..5de0de9 100644
--- a/frontend/src/views/apps/MusicApp.vue
+++ b/frontend/src/views/apps/MusicApp.vue
@@ -53,6 +53,8 @@ import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MusicPlaylist, MusicTrack } from '@/types/music'
 import { easyShareMusicTarget } from '@/utils/easyshare'
+import { consumeEscape, handleEnterAction } from '@/utils/keyboard'
+import { musicEscapeLayer } from '@/utils/musicEscape'
 
 type MusicTab = 'library' | 'playlists' | 'search'
 type MusicSheet =
@@ -498,6 +500,31 @@ function updateVolume(event: Event): void {
   music.setVolume(Number(eventValue(event)) / 100)
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  const layer = musicEscapeLayer({
+    actionMenuOpened: actionMenuOpened.value,
+    activeSheet: Boolean(activeSheet.value),
+    addMenuOpened: addMenuOpened.value,
+    confirmDeletePlaylist: confirmDeletePlaylist.value,
+    confirmRemoveTrack: confirmRemoveTrack.value,
+    playerOpened: playerOpened.value,
+  })
+  if (!layer) return
+  if (!consumeEscape(event)) return
+
+  if (layer === 'remove-track-confirmation') {
+    cancelRemoveTrack()
+  } else if (layer === 'delete-playlist-confirmation') {
+    confirmDeletePlaylist.value = false
+  } else if (layer === 'sheet') {
+    closeSheet()
+  } else if (layer === 'menu') {
+    dismissMenus()
+  } else if (layer === 'player') {
+    playerOpened.value = false
+  }
+}
+
 watch(
   () => music.playlists,
   () => {
@@ -510,6 +537,7 @@ watch(
 )
 
 onMounted(async () => {
+  window.addEventListener('keydown', onKeydown, true)
   await music.load()
   const target = easyShareMusicTarget(
     route.query.easyShareKind,
@@ -531,6 +559,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   if (playerPickerTimer !== null) window.clearTimeout(playerPickerTimer)
+  window.removeEventListener('keydown', onKeydown, true)
 })
 </script>
 
@@ -1061,12 +1090,12 @@ onBeforeUnmount(() => {
       </k-list>
     </section>
 
-    <k-sheet
-      :opened="Boolean(activeSheet)"
-      class="music-form-sheet"
-      @backdropclick="closeSheet"
-    >
-      <section class="music-sheet-content">
+    <div class="music-form-sheet">
+      <k-sheet
+        :opened="Boolean(activeSheet)"
+        @backdropclick="closeSheet"
+      >
+        <section class="music-sheet-content">
         <header>
           <k-link component="button" @click="closeSheet">{{
             phone.t(
@@ -1089,7 +1118,7 @@ onBeforeUnmount(() => {
               type="url"
               :value="youtubeUrl"
               @input="youtubeUrl = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
             <k-list-input
               :label="phone.t('Apps.music.youtubeTitle')"
@@ -1098,7 +1127,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.youtubeTitlePlaceholder')"
               :value="youtubeTitle"
               @input="youtubeTitle = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
             <k-list-input
               :label="phone.t('Apps.music.youtubeArtist')"
@@ -1107,7 +1136,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.youtubeArtistPlaceholder')"
               :value="youtubeArtist"
               @input="youtubeArtist = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
           </k-list>
           <p v-if="music.error" class="music-form-error" role="alert">
@@ -1256,7 +1285,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.playlistPlaceholder')"
               :value="playlistName"
               @input="playlistName = eventValue($event)"
-              @keydown.enter="submitPlaylist"
+              @keydown.enter="handleEnterAction($event, submitPlaylist)"
             />
           </k-list>
           <p v-if="music.error" class="music-form-error" role="alert">
@@ -1272,15 +1301,16 @@ onBeforeUnmount(() => {
             <template v-else>{{ phone.t('Common.save') }}</template>
           </k-button>
         </template>
-      </section>
-    </k-sheet>
+        </section>
+      </k-sheet>
+    </div>
 
-    <k-sheet
-      :opened="playerOpened"
-      class="music-player-sheet"
-      @backdropclick="playerOpened = false"
-    >
-      <section v-if="music.currentTrack" class="music-player">
+    <div class="music-player-sheet">
+      <k-sheet
+        :opened="playerOpened"
+        @backdropclick="playerOpened = false"
+      >
+        <section v-if="music.currentTrack" class="music-player">
         <header>
           <k-link
             component="button"
@@ -1383,8 +1413,9 @@ onBeforeUnmount(() => {
         <p v-if="music.playbackError" class="music-player-error">
           {{ phone.t('Apps.music.errors.playback_failed') }}
         </p>
-      </section>
-    </k-sheet>
+        </section>
+      </k-sheet>
+    </div>
 
     <k-dialog
       :opened="confirmRemoveTrack"
@@ -1874,6 +1905,7 @@ onBeforeUnmount(() => {
 .music-form-sheet,
 .music-player-sheet {
   --music-accent: #fa2d48;
+  display: contents;
   color: var(--music-label);
 }
 
@@ -1985,7 +2017,7 @@ onBeforeUnmount(() => {
   color: #ff453a !important;
 }
 
-.music-player-sheet {
+.music-player-sheet :deep(.k-sheet) {
   background: rgb(22 22 25 / 96%) !important;
 }
 
diff --git a/frontend/src/views/apps/NotesApp.vue b/frontend/src/views/apps/NotesApp.vue
index 2a6c55b..a4c600e 100644
--- a/frontend/src/views/apps/NotesApp.vue
+++ b/frontend/src/views/apps/NotesApp.vue
@@ -50,7 +50,8 @@ const deleteActionColors = {
   textMaterial: 'text-red-500',
 }
 const noteBodyStyle: CSSProperties = {
-  height: 'calc(100cqh - 210px)',
+  height: '617px',
+  maxHeight: 'calc(100% - 210px)',
   resize: 'none',
 }
 const currentNote = computed(() =>
diff --git a/frontend/src/views/apps/NumberMergeApp.vue b/frontend/src/views/apps/NumberMergeApp.vue
index c1d6cbf..897c649 100644
--- a/frontend/src/views/apps/NumberMergeApp.vue
+++ b/frontend/src/views/apps/NumberMergeApp.vue
@@ -348,6 +348,11 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 10px;
+}
+
+.number-merge-header > div {
+  min-width: 0;
 }
 
 .number-merge-header span {
@@ -357,6 +362,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-weight: 800;
   letter-spacing: 1.2px;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 }
 
 .number-merge-header h1 {
@@ -364,6 +370,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-size: 28px;
   line-height: 1;
   letter-spacing: -1px;
+  overflow-wrap: anywhere;
 }
 
 .number-merge-header button,
@@ -383,11 +390,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 
 .number-merge-menu {
   height: calc(100% - 55px);
+  min-height: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 13px;
+  overflow-y: auto;
+  padding: 12px 0;
   text-align: center;
 }
 
@@ -401,6 +411,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   border-radius: 29px;
   background: #7e5147;
   box-shadow: 0 17px 30px rgb(93 48 36 / 20%);
+  flex: 0 0 auto;
+  margin-top: auto;
   transform: rotate(-2deg);
 }
 
@@ -418,8 +430,9 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 .number-merge-hero__tile--4 { color: #fff7e4; background: #e96c2c; }
 .number-merge-hero__tile--8 { color: #fff7e4; background: #713c31; }
 
-.number-merge-menu__intro h2 { margin: 0; font-size: 25px; letter-spacing: -0.5px; }
-.number-merge-menu__intro p { max-width: 300px; margin: 6px 0 0; color: #8b675b; font-size: 14px; line-height: 1.45; }
+.number-merge-menu__intro { width: 100%; }
+.number-merge-menu__intro h2 { margin: 0; font-size: 25px; letter-spacing: -0.5px; overflow-wrap: anywhere; }
+.number-merge-menu__intro p { max-width: 300px; margin: 6px auto 0; color: #8b675b; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
 
 .number-merge-records {
   width: 100%;
@@ -429,6 +442,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 }
 
 .number-merge-records div {
+  min-width: 0;
   display: grid;
   gap: 1px;
   padding: 8px;
@@ -443,9 +457,10 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 }
 
-.number-merge-records strong { font-size: 20px; }
+.number-merge-records strong { min-width: 0; overflow-wrap: anywhere; font-size: 20px; }
 
 .number-merge-menu__actions { width: 100%; display: grid; gap: 7px; }
 
@@ -453,11 +468,12 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 .number-merge-secondary,
 .number-merge-danger {
   min-height: 46px;
-  padding: 0 18px;
+  padding: 10px 18px;
   border-radius: 14px;
   font-size: 15px;
   font-weight: 850;
   cursor: pointer;
+  overflow-wrap: anywhere;
 }
 
 .number-merge-primary {
@@ -474,14 +490,17 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 }
 
 .number-merge-how-to {
+  width: 100%;
+  flex: 0 0 auto;
+  margin-bottom: auto;
   padding: 9px 15px;
   border-radius: 14px;
   color: #795549;
   background: rgb(255 255 255 / 28%);
 }
 
-.number-merge-how-to strong { font-size: 13px; text-transform: uppercase; }
-.number-merge-how-to p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; }
+.number-merge-how-to strong { font-size: 13px; text-transform: uppercase; overflow-wrap: anywhere; }
+.number-merge-how-to p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
 .number-merge-how-to div {
   margin: 7px 0 4px;
   color: #a7472d;
@@ -489,7 +508,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-weight: 900;
   letter-spacing: -0.2px;
 }
-.number-merge-how-to small { display: block; color: #8b6559; font-size: 11px; line-height: 1.35; }
+.number-merge-how-to small { display: block; color: #8b6559; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
 
 .number-merge-game {
   position: absolute;
@@ -629,7 +648,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 8px;
   padding: 22px;
   border-radius: 20px;
@@ -637,12 +656,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   backdrop-filter: blur(5px);
   color: #fff7ea;
   text-align: center;
+  overflow-y: auto;
 }
 
-.number-merge-overlay > span { color: #ffc75b; font-size: 29px; font-weight: 900; }
-.number-merge-overlay h2 { margin: 0; font-size: 25px; }
-.number-merge-overlay p { margin: -3px 0 4px; color: #e7cabd; font-size: 14px; line-height: 1.4; }
-.number-merge-overlay button { min-width: 160px; }
+.number-merge-overlay > span { margin-top: auto; color: #ffc75b; font-size: 29px; font-weight: 900; }
+.number-merge-overlay h2 { margin: 0; font-size: 25px; overflow-wrap: anywhere; }
+.number-merge-overlay p { margin: -3px 0 4px; color: #e7cabd; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
+.number-merge-overlay button { min-width: min(160px, 100%); }
+.number-merge-overlay .number-merge-link { margin-bottom: auto; }
 .number-merge-overlay .number-merge-secondary { color: #fff1df; background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 13%); }
 
 .number-merge-link {
@@ -677,6 +698,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   inset: 0;
   display: grid;
   place-items: center;
+  min-height: 0;
+  overflow-y: auto;
   padding: 30px;
   background: rgb(54 29 25 / 54%);
   backdrop-filter: blur(6px);
@@ -684,6 +707,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 
 .number-merge-confirm > div {
   width: 100%;
+  max-height: calc(100% - 32px);
+  overflow-y: auto;
   display: grid;
   gap: 9px;
   padding: 21px;
@@ -694,8 +719,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   text-align: center;
 }
 
-.number-merge-confirm h2 { margin: 0; font-size: 21px; }
-.number-merge-confirm p { margin: 0 0 5px; color: #876359; font-size: 14px; line-height: 1.4; }
+.number-merge-confirm h2 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }
+.number-merge-confirm p { margin: 0 0 5px; color: #876359; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
 .number-merge-danger { border: 0; color: #fff; background: #b64f39; }
 
 button:active { transform: scale(0.97); }
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index e0461be..49f69e1 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -3729,7 +3729,7 @@ onBeforeUnmount(() => {
     box-shadow: inset 0 0 0 1px rgba(142, 142, 147, 0.18);
   }
 
-  .phone-recent-row:has(button:hover),
+  .phone-recent-row:hover,
   .phone-my-card:hover,
   .phone-contact-row:hover {
     border-radius: 14px;
diff --git a/frontend/src/views/apps/PicstagramApp.vue b/frontend/src/views/apps/PicstagramApp.vue
index dc7a6d6..96070a0 100644
--- a/frontend/src/views/apps/PicstagramApp.vue
+++ b/frontend/src/views/apps/PicstagramApp.vue
@@ -2852,4 +2852,10 @@ onBeforeUnmount(() => {
     transform: scale(1.28);
   }
 }
+
+@supports not (color: color-mix(in srgb, white, black)) {
+  .ps-activity--unread {
+    background: rgb(10 132 255 / 10%);
+  }
+}
 </style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 88b5d49..b9549a4 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -4065,7 +4065,6 @@ function easyShareHistoryForScenario(testScenario) {
 }
 
 app.post('/api/:endpoint', (request, response) => {
-  console.log(`[NUI] ${request.params.endpoint}`, request.body)
   const endpoint = request.params.endpoint
   const testScenario = String(request.body._testScenario ?? '')
   if (lifecycleEndpoints.has(endpoint)) {
@@ -7186,7 +7185,7 @@ app.post('/api/:endpoint', (request, response) => {
             : messageType === 'gif'
               ? 'image/gif'
               : messageType === 'video'
-                ? 'video/mp4'
+                ? 'video/webm'
                 : null,
       media_payload:
         messageType === 'voice'
diff --git a/sky_phone/config/media.lua b/sky_phone/config/media.lua
index 98ced28..0abfc1a 100644
--- a/sky_phone/config/media.lua
+++ b/sky_phone/config/media.lua
@@ -1,11 +1,11 @@
 Config.Media = {
-    GiphyApiKey = "",
+    GiphyApiKeyConvar = "sky_phone_giphy_api_key",
     GifPageSize = 24,
     GifRating = "pg-13",
     UrlMaxLength = 2048,
     AllowedGifHosts = { "giphy.com" },
     FiveManage = {
-        ApiKey = "e4UZ9y39JfkxHoZMAgRUVK6KMQsNCKPJ", -- Dashboard -> Tokens -> create a token with Media access.
+        ApiKeyConvar = "sky_phone_fivemanage_api_key",
         BaseUrl = "https://api.fivemanage.com/api/v3/file",
         RequestTimeoutMs = 10000,
         UploadTimeoutMs = 25000,
diff --git a/sky_phone/config/payphones.lua b/sky_phone/config/payphones.lua
new file mode 100644
index 0000000..e2a3ecd
--- /dev/null
+++ b/sky_phone/config/payphones.lua
@@ -0,0 +1,248 @@
+-- Server-owned vanilla payphone positions used for authoritative proximity checks.
+-- Generated from DurtyFree/gta-v-data-dumps worldPublicPhones.json at commit b65684e00f689fdec405c5f1055322c802d3c895.
+-- Add custom-map booths here; their model must also be listed in Config.Payphones.Props.
+Config.Payphones.Locations = {
+    { model = "prop_phonebox_01a", coords = { x = -1819.2284, y = 796.32294, z = 137.12784 } },
+    { model = "prop_phonebox_01a", coords = { x = -1773.0256, y = -503.15234, z = 37.80706 } },
+    { model = "prop_phonebox_01a", coords = { x = -1772.2114, y = -504.00488, z = 37.81461 } },
+    { model = "prop_phonebox_01a", coords = { x = -1457.3734, y = -148.68604, z = 48.7486 } },
+    { model = "prop_phonebox_01a", coords = { x = -1456.838, y = -149.31949, z = 48.68604 } },
+    { model = "prop_phonebox_01a", coords = { x = -1456.3501, y = -149.95428, z = 48.61642 } },
+    { model = "prop_phonebox_01a", coords = { x = -1438.6545, y = -210.77448, z = 47.10766 } },
+    { model = "prop_phonebox_01a", coords = { x = -1418.2983, y = -291.36002, z = 42.96778 } },
+    { model = "prop_phonebox_01a", coords = { x = -1417.4769, y = -290.64453, z = 42.93899 } },
+    { model = "prop_phonebox_01a", coords = { x = -1416.5211, y = -289.8119, z = 42.90134 } },
+    { model = "prop_phonebox_01a", coords = { x = -1318.0975, y = -380.79547, z = 35.73553 } },
+    { model = "prop_phonebox_01a", coords = { x = -1316.9534, y = -378.42676, z = 35.74885 } },
+    { model = "prop_phonebox_01a", coords = { x = -1316.2688, y = -378.07245, z = 35.73169 } },
+    { model = "prop_phonebox_01a", coords = { x = -1315.5924, y = -377.7347, z = 35.72274 } },
+    { model = "prop_phonebox_01a", coords = { x = -1261.6484, y = -519.13086, z = 30.83657 } },
+    { model = "prop_phonebox_01a", coords = { x = -1260.9482, y = -519.9344, z = 30.75686 } },
+    { model = "prop_phonebox_01a", coords = { x = -1260.0995, y = -520.9083, z = 30.66707 } },
+    { model = "prop_phonebox_01a", coords = { x = -1121.5917, y = -825.6313, z = 14.94339 } },
+    { model = "prop_phonebox_01a", coords = { x = -1120.9409, y = -825.0698, z = 14.98657 } },
+    { model = "prop_phonebox_01a", coords = { x = -1120.2446, y = -824.4812, z = 15.06407 } },
+    { model = "prop_phonebox_01a", coords = { x = -1079.6154, y = -451.0622, z = 35.6144 } },
+    { model = "prop_phonebox_01a", coords = { x = -1079.23, y = -451.8739, z = 35.62138 } },
+    { model = "prop_phonebox_01a", coords = { x = -1078.874, y = -452.55182, z = 35.62138 } },
+    { model = "prop_phonebox_01a", coords = { x = -956.56256, y = -403.17123, z = 36.81676 } },
+    { model = "prop_phonebox_01a", coords = { x = -956.1004, y = -404.09232, z = 36.81755 } },
+    { model = "prop_phonebox_01a", coords = { x = -524.4403, y = -300.71704, z = 34.26753 } },
+    { model = "prop_phonebox_01a", coords = { x = -523.64453, y = -300.41074, z = 34.26273 } },
+    { model = "prop_phonebox_01a", coords = { x = -522.872, y = -300.1134, z = 34.25807 } },
+    { model = "prop_phonebox_01a", coords = { x = -449.44238, y = -272.8244, z = 34.93996 } },
+    { model = "prop_phonebox_01a", coords = { x = -448.8816, y = -274.12805, z = 34.96191 } },
+    { model = "prop_phonebox_01a", coords = { x = -448.36926, y = -275.31906, z = 34.96507 } },
+    { model = "prop_phonebox_01a", coords = { x = -329.23917, y = 6224.885, z = 30.47861 } },
+    { model = "prop_phonebox_01a", coords = { x = -310.30554, y = 6205.3, z = 30.4465 } },
+    { model = "prop_phonebox_01a", coords = { x = -280.64215, y = 6224.2314, z = 30.45544 } },
+    { model = "prop_phonebox_01a", coords = { x = -243.25082, y = 279.90717, z = 91.04989 } },
+    { model = "prop_phonebox_01a", coords = { x = -234.61494, y = 6176.931, z = 30.43884 } },
+    { model = "prop_phonebox_01a", coords = { x = -233.6865, y = 6176.0547, z = 30.43884 } },
+    { model = "prop_phonebox_01a", coords = { x = -184.35658, y = 6331.4697, z = 30.48767 } },
+    { model = "prop_phonebox_01a", coords = { x = -183.68753, y = 6332.1597, z = 30.48987 } },
+    { model = "prop_phonebox_01a", coords = { x = -154.76048, y = 6352.27, z = 30.56079 } },
+    { model = "prop_phonebox_01a", coords = { x = -153.88358, y = 6351.417, z = 30.56079 } },
+    { model = "prop_phonebox_01a", coords = { x = -119.91727, y = 6287.283, z = 30.45911 } },
+    { model = "prop_phonebox_01a", coords = { x = -119.44898, y = 6286.768, z = 30.45911 } },
+    { model = "prop_phonebox_01a", coords = { x = -92.08037, y = 6462.644, z = 30.44397 } },
+    { model = "prop_phonebox_01a", coords = { x = -90.61212, y = 6464.0566, z = 30.44397 } },
+    { model = "prop_phonebox_01a", coords = { x = -46.3855, y = 6511.0156, z = 30.44861 } },
+    { model = "prop_phonebox_01a", coords = { x = -25.6331, y = 6495.123, z = 30.48767 } },
+    { model = "prop_phonebox_01a", coords = { x = -24.59157, y = 6496.0537, z = 30.48767 } },
+    { model = "prop_phonebox_01a", coords = { x = 110.07694, y = -1694.206, z = 28.29156 } },
+    { model = "prop_phonebox_01a", coords = { x = 136.9704, y = 196.05042, z = 105.73364 } },
+    { model = "prop_phonebox_01a", coords = { x = 137.75732, y = 195.764, z = 105.70988 } },
+    { model = "prop_phonebox_01a", coords = { x = 138.48807, y = 195.49808, z = 105.69342 } },
+    { model = "prop_phonebox_01a", coords = { x = 173.45892, y = -1547.1165, z = 28.25158 } },
+    { model = "prop_phonebox_01a", coords = { x = 215.71725, y = -1783.2102, z = 27.99637 } },
+    { model = "prop_phonebox_01a", coords = { x = 215.94612, y = -1518.9603, z = 28.29362 } },
+    { model = "prop_phonebox_01a", coords = { x = 228.6216, y = -1545.9579, z = 28.28108 } },
+    { model = "prop_phonebox_01a", coords = { x = 229.1375, y = -1545.6771, z = 28.28108 } },
+    { model = "prop_phonebox_01a", coords = { x = 295.67847, y = -1360.8624, z = 30.91401 } },
+    { model = "prop_phonebox_01a", coords = { x = 296.17984, y = -1360.2825, z = 30.91899 } },
+    { model = "prop_phonebox_01a", coords = { x = 532.401, y = -151.79816, z = 56.07613 } },
+    { model = "prop_phonebox_01a", coords = { x = 539.5577, y = -166.04846, z = 53.4862 } },
+    { model = "prop_phonebox_01a", coords = { x = 812.21716, y = -289.03873, z = 65.46264 } },
+    { model = "prop_phonebox_01a", coords = { x = 812.3678, y = -289.84793, z = 65.46264 } },
+    { model = "prop_phonebox_01a", coords = { x = 819.023, y = -94.03439, z = 79.57648 } },
+    { model = "prop_phonebox_01a", coords = { x = 819.37396, y = -93.47577, z = 79.57648 } },
+    { model = "prop_phonebox_01a", coords = { x = 891.8809, y = -140.80609, z = 76.11372 } },
+    { model = "prop_phonebox_01a", coords = { x = 963.6167, y = -142.79822, z = 73.46588 } },
+    { model = "prop_phonebox_01a", coords = { x = 1079.2015, y = -776.68054, z = 57.25418 } },
+    { model = "prop_phonebox_01a", coords = { x = 1156.3375, y = -776.99866, z = 56.58559 } },
+    { model = "prop_phonebox_01a", coords = { x = 1159.7463, y = -374.87518, z = 66.51784 } },
+    { model = "prop_phonebox_01a", coords = { x = 1166.4825, y = -321.59958, z = 68.25383 } },
+    { model = "prop_phonebox_01a", coords = { x = 1169.4127, y = 2702.8025, z = 36.99265 } },
+    { model = "prop_phonebox_01a", coords = { x = 1170.3059, y = -455.76053, z = 65.49249 } },
+    { model = "prop_phonebox_01a", coords = { x = 1172.7772, y = -297.61606, z = 68.01613 } },
+    { model = "prop_phonebox_01a", coords = { x = 1172.8646, y = -298.23972, z = 68.01981 } },
+    { model = "prop_phonebox_01a", coords = { x = 1173.8961, y = -421.43643, z = 66.07632 } },
+    { model = "prop_phonebox_01a", coords = { x = 1201.426, y = -488.8848, z = 64.67129 } },
+    { model = "prop_phonebox_01a", coords = { x = 1222.6125, y = -397.32706, z = 67.32355 } },
+    { model = "prop_phonebox_01a", coords = { x = 1801.4076, y = 4597.0137, z = 36.67796 } },
+    { model = "prop_phonebox_01a", coords = { x = 2558.9167, y = 367.14368, z = 107.63403 } },
+    { model = "prop_phonebox_01b", coords = { x = -1684.4233, y = -266.45306, z = 50.89204 } },
+    { model = "prop_phonebox_01b", coords = { x = -1683.9019, y = -265.70874, z = 50.89204 } },
+    { model = "prop_phonebox_01b", coords = { x = -1543.9277, y = -433.13232, z = 34.57933 } },
+    { model = "prop_phonebox_01b", coords = { x = -1543.0599, y = -432.05966, z = 34.58469 } },
+    { model = "prop_phonebox_01b", coords = { x = -1522.4791, y = -407.05118, z = 34.58695 } },
+    { model = "prop_phonebox_01b", coords = { x = -1412.1201, y = -383.80542, z = 35.68469 } },
+    { model = "prop_phonebox_01b", coords = { x = -1205.1965, y = -1393.6274, z = 3.07721 } },
+    { model = "prop_phonebox_01b", coords = { x = -1150.6671, y = -1392.6455, z = 4.11812 } },
+    { model = "prop_phonebox_01b", coords = { x = -1142.0598, y = -725.3442, z = 19.77577 } },
+    { model = "prop_phonebox_01b", coords = { x = -1080.87, y = -2574.942, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -1061.7015, y = -2541.7412, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -1061.5474, y = -2541.4744, z = 19.15571 } },
+    { model = "prop_phonebox_01b", coords = { x = -1046.9408, y = -2516.175, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -1046.8787, y = -2516.0674, z = 19.15571 } },
+    { model = "prop_phonebox_01b", coords = { x = -1034.5115, y = -2494.6467, z = 19.15571 } },
+    { model = "prop_phonebox_01b", coords = { x = -1024.4517, y = -2477.2227, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -765.40045, y = -848.8706, z = 21.11398 } },
+    { model = "prop_phonebox_01b", coords = { x = -764.83673, y = -848.8654, z = 21.13071 } },
+    { model = "prop_phonebox_01b", coords = { x = -756.90735, y = 5586.8223, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -756.90735, y = 5587.636, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -745.72156, y = 5558.714, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -743.95874, y = 5558.714, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -715.921, y = 123.33502, z = 54.99648 } },
+    { model = "prop_phonebox_01b", coords = { x = -715.40906, y = 123.65546, z = 55.01274 } },
+    { model = "prop_phonebox_01b", coords = { x = -700.7271, y = -916.8699, z = 18.21408 } },
+    { model = "prop_phonebox_01b", coords = { x = -700.1226, y = -916.8699, z = 18.21408 } },
+    { model = "prop_phonebox_01b", coords = { x = -685.93774, y = -854.8967, z = 22.88396 } },
+    { model = "prop_phonebox_01b", coords = { x = -670.3093, y = -819.59973, z = 23.4098 } },
+    { model = "prop_phonebox_01b", coords = { x = -669.60815, y = -819.6056, z = 23.42427 } },
+    { model = "prop_phonebox_01b", coords = { x = -668.81213, y = -819.6378, z = 23.43811 } },
+    { model = "prop_phonebox_01b", coords = { x = -665.19354, y = -670.83777, z = 30.40002 } },
+    { model = "prop_phonebox_01b", coords = { x = -664.59607, y = -670.8341, z = 30.40393 } },
+    { model = "prop_phonebox_01b", coords = { x = -663.99866, y = -670.83044, z = 30.41797 } },
+    { model = "prop_phonebox_01b", coords = { x = -655.2001, y = -859.74493, z = 23.50043 } },
+    { model = "prop_phonebox_01b", coords = { x = -654.1605, y = -707.27155, z = 28.40153 } },
+    { model = "prop_phonebox_01b", coords = { x = -654.1605, y = -706.51654, z = 28.47383 } },
+    { model = "prop_phonebox_01b", coords = { x = -654.1605, y = -705.7615, z = 28.54753 } },
+    { model = "prop_phonebox_01b", coords = { x = -611.56744, y = -2237.6104, z = 5.10603 } },
+    { model = "prop_phonebox_01b", coords = { x = -530.0182, y = -1286.1543, z = 25.03622 } },
+    { model = "prop_phonebox_01b", coords = { x = -529.77765, y = -1285.6444, z = 25.04207 } },
+    { model = "prop_phonebox_01b", coords = { x = -529.6009, y = -1286.3458, z = 25.04428 } },
+    { model = "prop_phonebox_01b", coords = { x = -529.36365, y = -1285.8345, z = 25.03622 } },
+    { model = "prop_phonebox_01b", coords = { x = -468.24023, y = -396.44247, z = 32.8951 } },
+    { model = "prop_phonebox_01b", coords = { x = -467.58286, y = -396.50574, z = 32.8951 } },
+    { model = "prop_phonebox_01b", coords = { x = -259.3869, y = -604.76556, z = 32.59827 } },
+    { model = "prop_phonebox_01b", coords = { x = -259.14352, y = -603.98016, z = 32.65002 } },
+    { model = "prop_phonebox_01b", coords = { x = -241.57574, y = -766.2026, z = 31.73654 } },
+    { model = "prop_phonebox_01b", coords = { x = -241.29694, y = -765.4682, z = 31.77955 } },
+    { model = "prop_phonebox_01b", coords = { x = -239.74597, y = -978.22943, z = 28.26393 } },
+    { model = "prop_phonebox_01b", coords = { x = -239.51797, y = -977.59296, z = 28.26393 } },
+    { model = "prop_phonebox_01b", coords = { x = -178.84961, y = -52.06338, z = 51.10093 } },
+    { model = "prop_phonebox_01b", coords = { x = -177.28662, y = -713.48505, z = 33.39728 } },
+    { model = "prop_phonebox_01b", coords = { x = -147.61765, y = -287.15277, z = 39.43044 } },
+    { model = "prop_phonebox_01b", coords = { x = -147.37784, y = -286.44186, z = 39.49831 } },
+    { model = "prop_phonebox_01b", coords = { x = -73.17541, y = -641.5052, z = 35.24065 } },
+    { model = "prop_phonebox_01b", coords = { x = -72.92773, y = -640.8415, z = 35.24065 } },
+    { model = "prop_phonebox_01b", coords = { x = -53.45404, y = -94.169, z = 56.7686 } },
+    { model = "prop_phonebox_01b", coords = { x = -27.98413, y = -100.90671, z = 56.35694 } },
+    { model = "prop_phonebox_01b", coords = { x = -26.48154, y = -110.65947, z = 56.06785 } },
+    { model = "prop_phonebox_01b", coords = { x = -8.06136, y = -731.61005, z = 43.22259 } },
+    { model = "prop_phonebox_01b", coords = { x = -7.37235, y = -731.8549, z = 43.22768 } },
+    { model = "prop_phonebox_01b", coords = { x = 43.99314, y = -680.87616, z = 43.20672 } },
+    { model = "prop_phonebox_01b", coords = { x = 44.30204, y = -680.0512, z = 43.20672 } },
+    { model = "prop_phonebox_01b", coords = { x = 120.37446, y = -205.12677, z = 53.61985 } },
+    { model = "prop_phonebox_01b", coords = { x = 121.18489, y = -205.42413, z = 53.61985 } },
+    { model = "prop_phonebox_01b", coords = { x = 129.40686, y = 245.3497, z = 106.42847 } },
+    { model = "prop_phonebox_01b", coords = { x = 140.18076, y = -1033.1602, z = 28.34242 } },
+    { model = "prop_phonebox_01b", coords = { x = 174.5452, y = -1116.4456, z = 28.28443 } },
+    { model = "prop_phonebox_01b", coords = { x = 175.22937, y = -1116.4185, z = 28.28425 } },
+    { model = "prop_phonebox_01b", coords = { x = 213.8157, y = -852.6208, z = 29.38956 } },
+    { model = "prop_phonebox_01b", coords = { x = 214.44952, y = -852.86725, z = 29.38709 } },
+    { model = "prop_phonebox_01b", coords = { x = 233.49872, y = 334.44766, z = 104.52145 } },
+    { model = "prop_phonebox_01b", coords = { x = 296.66183, y = -1359.7725, z = 30.92093 } },
+    { model = "prop_phonebox_01b", coords = { x = 372.30563, y = -966.37286, z = 28.41298 } },
+    { model = "prop_phonebox_01b", coords = { x = 394.25433, y = -799.7535, z = 28.23798 } },
+    { model = "prop_phonebox_01b", coords = { x = 394.25433, y = -798.6486, z = 28.23798 } },
+    { model = "prop_phonebox_01b", coords = { x = 397.567, y = -921.3287, z = 28.3982 } },
+    { model = "prop_phonebox_01b", coords = { x = 397.567, y = -920.658, z = 28.3982 } },
+    { model = "prop_phonebox_01b", coords = { x = 415.17245, y = -910.94476, z = 28.3982 } },
+    { model = "prop_phonebox_01b", coords = { x = 436.0411, y = 137.20285, z = 99.43968 } },
+    { model = "prop_phonebox_01b", coords = { x = 436.83813, y = 136.89954, z = 99.38892 } },
+    { model = "prop_phonebox_01b", coords = { x = 439.8047, y = -606.65063, z = 27.69825 } },
+    { model = "prop_phonebox_01b", coords = { x = 439.99564, y = -604.67474, z = 27.69747 } },
+    { model = "prop_phonebox_01b", coords = { x = 445.3808, y = 3567.5305, z = 32.21765 } },
+    { model = "prop_phonebox_01b", coords = { x = 452.6532, y = -612.11816, z = 27.54012 } },
+    { model = "prop_phonebox_01b", coords = { x = 452.7997, y = -610.4434, z = 27.5457 } },
+    { model = "prop_phonebox_01b", coords = { x = 535.5781, y = 102.93228, z = 95.56698 } },
+    { model = "prop_phonebox_01b", coords = { x = 779.83923, y = -1755.3914, z = 28.47611 } },
+    { model = "prop_phonebox_01b", coords = { x = 780.2285, y = -1755.4475, z = 28.46564 } },
+    { model = "prop_phonebox_01b", coords = { x = 809.3085, y = -1074.9281, z = 27.67919 } },
+    { model = "prop_phonebox_01b", coords = { x = 903.52423, y = 3646.1294, z = 31.70571 } },
+    { model = "prop_phonebox_01b", coords = { x = 1051.0497, y = 2661.3877, z = 38.52392 } },
+    { model = "prop_phonebox_01b", coords = { x = 1181.1997, y = 2703.214, z = 37.1464 } },
+    { model = "prop_phonebox_01b", coords = { x = 1206.4275, y = 2647.8894, z = 36.81204 } },
+    { model = "prop_phonebox_01b", coords = { x = 1401.1744, y = 3602.0786, z = 34.01619 } },
+    { model = "prop_phonebox_01b", coords = { x = 1662.8026, y = 4841.53, z = 41.0313 } },
+    { model = "prop_phonebox_01b", coords = { x = 1662.9365, y = 4840.332, z = 41.0313 } },
+    { model = "prop_phonebox_01b", coords = { x = 1692.9031, y = 6432.025, z = 31.73361 } },
+    { model = "prop_phonebox_01b", coords = { x = 1696.5485, y = 3776.0618, z = 33.71252 } },
+    { model = "prop_phonebox_01b", coords = { x = 1696.7177, y = 4790.302, z = 40.89749 } },
+    { model = "prop_phonebox_01b", coords = { x = 1860.4072, y = 3696.2563, z = 33.26152 } },
+    { model = "prop_phonebox_01b", coords = { x = 1861.0801, y = 3695.0903, z = 33.26152 } },
+    { model = "prop_phonebox_01b", coords = { x = 2005.9707, y = 3782.6196, z = 31.15662 } },
+    { model = "prop_phonebox_01b", coords = { x = 2006.7942, y = 3783.1003, z = 31.14984 } },
+    { model = "prop_phonebox_04", coords = { x = -2969.4265, y = 397.46487, z = 14.10208 } },
+    { model = "prop_phonebox_04", coords = { x = -1417.7056, y = -94.50974, z = 51.41046 } },
+    { model = "prop_phonebox_04", coords = { x = -1416.8014, y = -94.11159, z = 51.44441 } },
+    { model = "prop_phonebox_04", coords = { x = -1415.9122, y = -93.72023, z = 51.49042 } },
+    { model = "prop_phonebox_04", coords = { x = -1294.0234, y = -390.34976, z = 35.44277 } },
+    { model = "prop_phonebox_04", coords = { x = -1293.4121, y = -391.38864, z = 35.44632 } },
+    { model = "prop_phonebox_04", coords = { x = -1241.7491, y = -464.37216, z = 32.537 } },
+    { model = "prop_phonebox_04", coords = { x = -1224.2532, y = -322.51794, z = 36.57259 } },
+    { model = "prop_phonebox_04", coords = { x = -1223.0624, y = -321.95178, z = 36.59326 } },
+    { model = "prop_phonebox_04", coords = { x = -1074.0209, y = -397.75607, z = 35.95449 } },
+    { model = "prop_phonebox_04", coords = { x = -1025.3336, y = -216.04681, z = 36.93829 } },
+    { model = "prop_phonebox_04", coords = { x = -1023.97375, y = -216.74884, z = 36.9369 } },
+    { model = "prop_phonebox_04", coords = { x = -985.19824, y = -414.10977, z = 36.85289 } },
+    { model = "prop_phonebox_04", coords = { x = -979.73254, y = -369.2069, z = 36.856 } },
+    { model = "prop_phonebox_04", coords = { x = -979.1488, y = -370.3092, z = 36.856 } },
+    { model = "prop_phonebox_04", coords = { x = -965.37616, y = -2524.3992, z = 13.00643 } },
+    { model = "prop_phonebox_04", coords = { x = -963.65985, y = -247.05435, z = 37.0568 } },
+    { model = "prop_phonebox_04", coords = { x = -896.8487, y = -247.80585, z = 39.07844 } },
+    { model = "prop_phonebox_04", coords = { x = -865.3409, y = -2528.5645, z = 13.00643 } },
+    { model = "prop_phonebox_04", coords = { x = -821.83124, y = -251.49579, z = 36.0627 } },
+    { model = "prop_phonebox_04", coords = { x = -821.29346, y = -252.4495, z = 36.05127 } },
+    { model = "prop_phonebox_04", coords = { x = -701.46173, y = -371.56976, z = 33.2833 } },
+    { model = "prop_phonebox_04", coords = { x = -700.3627, y = -372.04968, z = 33.27078 } },
+    { model = "prop_phonebox_04", coords = { x = -619.5328, y = -207.68121, z = 36.3736 } },
+    { model = "prop_phonebox_04", coords = { x = -618.975, y = -208.61508, z = 36.35005 } },
+    { model = "prop_phonebox_04", coords = { x = -617.05457, y = -422.20978, z = 33.7873 } },
+    { model = "prop_phonebox_04", coords = { x = -557.25586, y = -386.67517, z = 34.11347 } },
+    { model = "prop_phonebox_04", coords = { x = -556.05286, y = -386.66565, z = 34.11989 } },
+    { model = "prop_phonebox_04", coords = { x = -554.8701, y = -386.6563, z = 34.12583 } },
+    { model = "prop_phonebox_04", coords = { x = -546.57184, y = -334.10083, z = 34.16116 } },
+    { model = "prop_phonebox_04", coords = { x = -544.17737, y = -157.39006, z = 37.53791 } },
+    { model = "prop_phonebox_04", coords = { x = -388.49542, y = -321.52948, z = 32.10458 } },
+    { model = "prop_phonebox_04", coords = { x = -387.68488, y = -322.21454, z = 32.05279 } },
+    { model = "prop_phonebox_04", coords = { x = -360.33978, y = -267.18268, z = 32.73604 } },
+    { model = "prop_phonebox_04", coords = { x = -347.059, y = -1490.9738, z = 29.79159 } },
+    { model = "prop_phonebox_04", coords = { x = -345.83786, y = -1490.9738, z = 29.7867 } },
+    { model = "prop_phonebox_04", coords = { x = -263.0376, y = -766.90546, z = 31.57576 } },
+    { model = "prop_phonebox_04", coords = { x = -262.6508, y = -766.04095, z = 31.60592 } },
+    { model = "prop_phonebox_04", coords = { x = -213.1738, y = -696.5944, z = 32.80729 } },
+    { model = "prop_phonebox_04", coords = { x = -174.76907, y = -674.9272, z = 33.27862 } },
+    { model = "prop_phonebox_04", coords = { x = -173.80676, y = -675.35236, z = 33.29762 } },
+    { model = "prop_phonebox_04", coords = { x = -138.00961, y = -799.9025, z = 31.10711 } },
+    { model = "prop_phonebox_04", coords = { x = -137.64026, y = -798.8024, z = 31.14563 } },
+    { model = "prop_phonebox_04", coords = { x = 55.44337, y = -1081.1333, z = 28.45174 } },
+    { model = "prop_phonebox_04", coords = { x = 55.90165, y = -1080.282, z = 28.45174 } },
+    { model = "prop_phonebox_04", coords = { x = 188.01767, y = -1043.9451, z = 28.32789 } },
+    { model = "prop_phonebox_04", coords = { x = 189.79306, y = -1044.5588, z = 28.32789 } },
+    { model = "prop_phonebox_04", coords = { x = 298.28317, y = -795.153, z = 28.4778 } },
+    { model = "prop_phonebox_04", coords = { x = 298.62607, y = -794.289, z = 28.4778 } },
+    { model = "prop_phonebox_04", coords = { x = 347.45938, y = -730.9255, z = 28.28353 } },
+    { model = "prop_phonebox_04", coords = { x = 564.7501, y = -1748.7141, z = 28.31245 } },
+    { model = "prop_phonebox_04", coords = { x = 653.1738, y = 272.5705, z = 102.29323 } },
+    { model = "prop_phonebox_04", coords = { x = 654.2313, y = 271.95996, z = 102.29323 } },
+    { model = "prop_phonebox_04", coords = { x = 1214.8445, y = -1385.6348, z = 34.34755 } },
+    { model = "prop_phonebox_04", coords = { x = 1214.8445, y = -1384.5386, z = 34.34755 } },
+    { model = "prop_phonebox_04", coords = { x = 1662.002, y = 4819.523, z = 41.04535 } },
+    { model = "prop_phonebox_04", coords = { x = 1816.4236, y = 3671.6497, z = 33.29268 } },
+    { model = "prop_phonebox_04", coords = { x = 1818.1936, y = 3668.7485, z = 33.29268 } },
+    { model = "prop_phonebox_04", coords = { x = 2007.0574, y = 3784.7974, z = 31.20895 } },
+}
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index ab0e6f8..e5f67e7 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -30,6 +30,7 @@ client_scripts {
     'source/bridge/client/housing.lua',
     'source/bridge/client/housing/*.lua',
     'source/client/animations.lua',
+    'source/client/focus.lua',
     'source/client/camera.lua',
     'source/client/garage.lua',
     'source/client/skyride.lua',
@@ -46,6 +47,7 @@ client_scripts {
 server_scripts {
     '@oxmysql/lib/MySQL.lua',
     'config/config.lua',
+    'config/payphones.lua',
     'config/companies.lua',
     'config/media.lua',
     'config/music.lua',
@@ -66,6 +68,7 @@ server_scripts {
     'source/server/companies.lua',
     'source/server/custom_app_storage.lua',
     'source/server/sim.lua',
+    'source/server/payphones.lua',
     'source/server/calls.lua',
     'source/server/media.lua',
     'source/server/messages.lua',
diff --git a/sky_phone/source/client/camera.lua b/sky_phone/source/client/camera.lua
index 1cfa566..581d9b0 100644
--- a/sky_phone/source/client/camera.lua
+++ b/sky_phone/source/client/camera.lua
@@ -6,6 +6,10 @@ local ultrawide_fov_multiplier = 2.0
 local front_camera_distance = 0.75
 local front_camera_height = 0.05
 local front_camera_target_height = 0.03
+local unfocused_camera_controls = {
+    1, -- INPUT_LOOK_LR
+    2, -- INPUT_LOOK_UD
+}
 local camera_state = {
     active = false,
     enforcing = false,
@@ -16,6 +20,7 @@ local camera_state = {
     front_camera_handle = nil,
     landscape = false,
     ultrawide_camera_handle = nil,
+    applied_nui_focus = true,
     nui_focused = true,
     previous_ped_view = nil,
     previous_radar_hidden = nil,
@@ -145,27 +150,32 @@ local function restore_camera_view()
     end
 end
 
-local function set_camera_focus(focused)
-    if camera_state.nui_focused == focused then
-        return
+local function apply_unfocused_camera_controls()
+    DisableAllControlActions(0)
+    for _, control in ipairs(unfocused_camera_controls) do
+        EnableControlAction(0, control, true)
     end
-    camera_state.nui_focused = focused
-    if focused then
-        SetNuiFocus(true, true)
-        SetNuiFocusKeepInput(false)
-        SendNUIMessage({ type = "camera:focus", data = { focused = true } })
-        return
-    end
-    SetNuiFocus(false, false)
-    SetNuiFocusKeepInput(true)
-    SendNUIMessage({ type = "camera:focus", data = { focused = false } })
+    DisablePlayerFiring(PlayerId(), true)
+end
+
+local function update_camera_focus_claim()
+    TriggerEvent("sky_phone:client:setCameraFocus", {
+        active = camera_state.active,
+        nuiFocused = camera_state.nui_focused,
+    })
+end
+
+local set_camera_focus
+
+local function watch_unfocused_camera_controls()
     if camera_state.focus_watcher then
         return
     end
     camera_state.focus_watcher = true
     CreateThread(function()
-        while camera_state.active and not camera_state.nui_focused do
-            if IsControlJustReleased(0, 22) then
+        while camera_state.active and not camera_state.applied_nui_focus do
+            apply_unfocused_camera_controls()
+            if IsDisabledControlJustReleased(0, 22) then
                 set_camera_focus(true)
                 break
             end
@@ -175,6 +185,28 @@ local function set_camera_focus(focused)
     end)
 end
 
+set_camera_focus = function(focused)
+    camera_state.nui_focused = focused
+    update_camera_focus_claim()
+end
+
+AddEventHandler("sky_phone:client:cameraFocusApplied", function(data)
+    if type(data) ~= "table"
+        or type(data.active) ~= "boolean"
+        or type(data.focused) ~= "boolean"
+        or type(data.gameInput) ~= "boolean"
+    then
+        return
+    end
+    if camera_state.applied_nui_focus ~= data.focused then
+        camera_state.applied_nui_focus = data.focused
+        SendNUIMessage({ type = "camera:focus", data = { focused = data.focused } })
+    end
+    if data.active and data.gameInput then
+        watch_unfocused_camera_controls()
+    end
+end)
+
 local function set_camera_active(active)
     if camera_state.active == active then
         return
@@ -251,11 +283,8 @@ local function set_camera_active(active)
     clear_front_camera()
     clear_ultrawide_camera()
     restore_camera_view()
-    if not camera_state.nui_focused then
-        camera_state.nui_focused = true
-        SetNuiFocusKeepInput(false)
-        SetNuiFocus(true, true)
-    end
+    camera_state.nui_focused = true
+    update_camera_focus_claim()
     TriggerEvent("sky_phone:animation:camera", {
         active = false,
         front = false,
@@ -325,58 +354,102 @@ local function set_camera_zoom(zoom)
 end
 
 RegisterNUICallback("camera:setActive", function(data, cb)
-    set_camera_active(data and data.active == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_camera_active(data.active == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setFocus", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if camera_state.active then
-        set_camera_focus(data and data.focused == true)
+        set_camera_focus(data.focused == true)
     end
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setFlash", function(data, cb)
-    set_flash_enabled(data and data.enabled == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_flash_enabled(data.enabled == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setFacing", function(data, cb)
-    set_front_camera(data and data.front == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_front_camera(data.front == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setOrientation", function(data, cb)
-    set_camera_landscape(data and data.landscape == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_camera_landscape(data.landscape == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setZoom", function(data, cb)
-    cb({ success = set_camera_zoom(tonumber(data and data.zoom)) })
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    cb({ success = set_camera_zoom(tonumber(data.zoom)) })
 end)
 
 RegisterNUICallback("media:requestUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:request-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:request-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("media:completeUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:complete-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:complete-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("media:cancelUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:cancel-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:cancel-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("media:failUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:fail-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:fail-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("gallery:delete", function(data, cb)
-    TriggerServerEvent("sky_phone:media:delete", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:delete", data)
     cb({ success = true })
 end)
 
@@ -401,6 +474,5 @@ AddEventHandler("onResourceStop", function(resource_name)
     if resource_name == GetCurrentResourceName() then
         set_flash_enabled(false)
         set_camera_active(false)
-        SetNuiFocusKeepInput(false)
     end
 end)
diff --git a/sky_phone/source/client/crewlink.lua b/sky_phone/source/client/crewlink.lua
index 5ecf4eb..4767466 100644
--- a/sky_phone/source/client/crewlink.lua
+++ b/sky_phone/source/client/crewlink.lua
@@ -16,6 +16,10 @@ local function draw_overhead_label(coords, username, role)
 end
 
 RegisterNUICallback("crewlink:live", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = Bridge.Callbacks.Trigger("sky_phone:crewlink:live", data)
     overhead_members = result and result.success and result.data and result.data.overheadMembers or {}
     overhead_expires_at = GetGameTimer() + Config.CrewLink.OverheadRefreshMilliseconds * 2
diff --git a/sky_phone/source/client/focus.lua b/sky_phone/source/client/focus.lua
new file mode 100644
index 0000000..8252694
--- /dev/null
+++ b/sky_phone/source/client/focus.lua
@@ -0,0 +1,21 @@
+SkyPhoneFocus = {}
+
+function SkyPhoneFocus.Resolve(state)
+    if state.activity_suspended then
+        return { focused = false, keep_input = false }
+    end
+    if state.call_focus then
+        return { focused = true, keep_input = false }
+    end
+    if state.camera_active and not state.camera_nui_focused then
+        return { focused = false, keep_input = true }
+    end
+    return {
+        focused = state.is_open
+            or state.notification_focus
+            or state.payphone_focus
+            or state.sim_picker_open
+            or (state.camera_active and state.camera_nui_focused),
+        keep_input = false,
+    }
+end
diff --git a/sky_phone/source/client/garage.lua b/sky_phone/source/client/garage.lua
index 6a40adf..cee1d5d 100644
--- a/sky_phone/source/client/garage.lua
+++ b/sky_phone/source/client/garage.lua
@@ -441,6 +441,10 @@ local function run_valet_delivery(order)
 end
 
 RegisterNUICallback("garage:valet-request", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if current_valet then
         cb({ success = false, error = "valet_active" })
         return
diff --git a/sky_phone/source/client/housing.lua b/sky_phone/source/client/housing.lua
index d54d217..93f3b5b 100644
--- a/sky_phone/source/client/housing.lua
+++ b/sky_phone/source/client/housing.lua
@@ -11,18 +11,18 @@ local function server_prepare(action, data)
 end
 
 local function suspend_phone()
-    SetNuiFocus(false, false)
+    TriggerEvent("sky_phone:client:setSuspended", true)
     TriggerEvent("sky_phone:animation:phone", false)
     SendNUIMessage({ type = "app:suspend" })
 end
 
 local function resume_phone()
     SendNUIMessage({ type = "app:resume" })
-    SetNuiFocus(true, true)
+    TriggerEvent("sky_phone:client:setSuspended", false)
     TriggerEvent("sky_phone:animation:phone", true)
 end
 
-local function stop_camera()
+local function stop_camera(resume)
     local state = camera_state
     if not state then
         return
@@ -37,7 +37,9 @@ local function stop_camera()
     if DoesEntityExist(state.ped) then
         FreezeEntityPosition(state.ped, state.frozen)
     end
-    resume_phone()
+    if resume ~= false then
+        resume_phone()
+    end
 end
 
 local function camera_number(value, fallback)
@@ -105,13 +107,17 @@ local function run_camera(provider_name, camera_data)
     local maximum_left = camera_number(camera_data.maximumLeft)
     local maximum_right = camera_number(camera_data.maximumRight)
     local night_vision = camera_state.night_vision
+    local resume_after_camera = false
+    local close_phone_after_camera = false
     while camera_state and camera_state.camera == camera do
         Wait(0)
         DisableAllControlActions(0)
-        if IsDisabledControlJustPressed(0, config.ExitControl)
-            or IsPedDeadOrDying(ped, true)
-            or GetResourceState(provider_name) ~= "started"
-        then
+        if IsDisabledControlJustPressed(0, config.ExitControl) then
+            resume_after_camera = true
+            break
+        end
+        if IsPedDeadOrDying(ped, true) or GetResourceState(provider_name) ~= "started" then
+            close_phone_after_camera = true
             break
         end
 
@@ -147,12 +153,29 @@ local function run_camera(provider_name, camera_data)
             SetNightvision(night_vision)
         end
     end
-    stop_camera()
+    stop_camera(resume_after_camera)
+    if close_phone_after_camera then
+        TriggerEvent("sky_phone:client:forceClose")
+    end
 end
 
-RegisterNUICallback("housing:overview", function(_, cb)
+RegisterNetEvent("sky_phone:device:invalidated", function()
+    stop_camera(false)
+end)
+
+RegisterNUICallback("housing:overview", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = Bridge.Callbacks.Trigger("sky_phone:housing:overview", {})
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
+end)
+
+AddEventHandler("sky_phone:client:nuiReady", function()
+    if camera_state then
+        suspend_phone()
+    end
 end)
 
 RegisterNUICallback("housing:key-candidates", function(data, cb)
@@ -161,7 +184,7 @@ RegisterNUICallback("housing:key-candidates", function(data, cb)
         return
     end
     local result = server_prepare("key_candidates", data)
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
 end)
 
 RegisterNUICallback("housing:command", function(data, cb)
@@ -182,8 +205,8 @@ RegisterNUICallback("housing:command", function(data, cb)
     end
 
     local prepared = server_prepare(data.action, data)
-    if not prepared or not prepared.success or type(prepared.data) ~= "table" then
-        cb(prepared or { success = false, error = "request_failed" })
+    if type(prepared) ~= "table" or not prepared.success or type(prepared.data) ~= "table" then
+        cb(type(prepared) == "table" and prepared or { success = false, error = "request_failed" })
         return
     end
     if data.action == "set_waypoint" then
@@ -214,6 +237,6 @@ end)
 
 AddEventHandler("onResourceStop", function(resource_name)
     if resource_name == GetCurrentResourceName() and camera_state then
-        stop_camera()
+        stop_camera(false)
     end
 end)
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 8c97ab3..2e88d41 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -1,9 +1,17 @@
 local is_open = false
 local open_requested = false
 local notification_focus = false
+local call_focus = false
+local payphone_focus = false
+local camera_active = false
+local camera_nui_focused = true
 local device_payload = nil
 local sim_picker_open = false
+local sim_picker_payload = nil
+local active_call_payload = nil
 local call_channel = 0
+local nui_generation = 0
+local activity_suspended = false
 
 Bridge.Debug("debug", "[sky_phone] Client script initialized.", { always = true })
 
@@ -256,6 +264,46 @@ local function get_locale()
     return Locales[Config.Bridge.Locale] or Locales["en"]
 end
 
+local function update_nui_focus()
+    local focus = SkyPhoneFocus.Resolve({
+        activity_suspended = activity_suspended,
+        call_focus = call_focus,
+        camera_active = camera_active,
+        camera_nui_focused = camera_nui_focused,
+        is_open = is_open,
+        notification_focus = notification_focus,
+        payphone_focus = payphone_focus,
+        sim_picker_open = sim_picker_open,
+    })
+    SetNuiFocus(focus.focused, focus.focused)
+    SetNuiFocusKeepInput(focus.keep_input)
+    TriggerEvent("sky_phone:client:cameraFocusApplied", {
+        active = camera_active,
+        focused = focus.focused,
+        gameInput = focus.keep_input,
+    })
+end
+
+AddEventHandler("sky_phone:client:setSuspended", function(suspended)
+    activity_suspended = suspended == true
+    update_nui_focus()
+end)
+
+AddEventHandler("sky_phone:client:setPayphoneFocus", function(focused)
+    payphone_focus = focused == true
+    update_nui_focus()
+end)
+
+AddEventHandler("sky_phone:client:setCameraFocus", function(data)
+    if type(data) ~= "table" or type(data.active) ~= "boolean" or type(data.nuiFocused) ~= "boolean" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid camera focus claim.")
+        return
+    end
+    camera_active = data.active
+    camera_nui_focused = data.nuiFocused
+    update_nui_focus()
+end)
+
 local function send_open_message()
     if not device_payload then
         return
@@ -279,21 +327,31 @@ local function open_phone()
     send_open_message()
 end
 
-local function close_phone()
+local function close_phone(close_device_session)
+    local was_requested = open_requested
+    local was_open = is_open
     open_requested = false
+    call_focus = false
+    activity_suspended = false
     TriggerEvent("sky_phone:animation:phone", false)
-    if not is_open then
-        return
-    end
-
     is_open = false
-    SkyPhoneApps.SetPhoneOpen(false)
-    TriggerEvent("sky_phone:nuiClosed")
-    SetNuiFocus(notification_focus or sim_picker_open, notification_focus or sim_picker_open)
-    SendNUIMessage({ type = "app:close" })
-    Bridge.Callbacks.Trigger("sky_phone:device:close", {})
+    if was_open then
+        SkyPhoneApps.SetPhoneOpen(false)
+        TriggerEvent("sky_phone:nuiClosed")
+    end
+    update_nui_focus()
+    if was_requested or was_open then
+        SendNUIMessage({ type = "app:close" })
+        if close_device_session ~= false then
+            Bridge.Callbacks.Trigger("sky_phone:device:close", {})
+        end
+    end
 end
 
+AddEventHandler("sky_phone:client:forceClose", function()
+    close_phone()
+end)
+
 local function leave_call_voice()
     if call_channel == 0 then
         return
@@ -337,24 +395,58 @@ RegisterNetEvent("sky_phone:testdata:feedback", function(success, detail)
     Bridge.Framework.Notify("iFruit", message, success and "success" or "error", 7000)
 end)
 
-RegisterNUICallback("ui:ready", function(_, cb)
+RegisterNUICallback("ui:ready", function(data, cb)
+    if type(data) ~= "table" or data.protocolVersion ~= 1 then
+        cb({ success = false, error = "unsupported_protocol" })
+        return
+
+    end
+    nui_generation = nui_generation + 1
+    -- Browser state is recreated on a CEF reload. A notification focus claim
+    -- cannot survive unless its notification is replayed as part of this handshake.
+    notification_focus = false
     Bridge.Debug("debug", "[sky_phone] NUI reported ready.", { always = true })
-    TriggerEvent("sky_phone:client:nuiReady")
     SkyPhoneApps.SendCatalog()
     if open_requested and device_payload then
         send_open_message()
     end
+    if active_call_payload then
+        SendNUIMessage({ type = "call:state", data = active_call_payload })
+    end
+    if sim_picker_open and sim_picker_payload then
+        SendNUIMessage({ type = "sim:picker", data = sim_picker_payload })
+    else
+        SendNUIMessage({ type = "sim:picker-close" })
+    end
 
-    cb({ success = true })
+    update_nui_focus()
+    TriggerEvent("sky_phone:client:nuiReady", {
+        generation = nui_generation,
+        protocolVersion = 1,
+    })
+
+    cb({
+        success = true,
+        data = {
+            generation = nui_generation,
+            protocolVersion = 1,
+        },
+    })
 end)
 
-RegisterNUICallback("ui:opened", function(_, cb)
+RegisterNUICallback("ui:opened", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if not open_requested or not device_payload then
         Bridge.Debug(
             "warn",
             "[sky_phone] Ignored a NUI open confirmation without a pending device open.",
             { always = true }
         )
+        SendNUIMessage({ type = "app:close" })
+        update_nui_focus()
         cb({ success = false, error = "open_not_requested" })
         return
     end
@@ -362,29 +454,49 @@ RegisterNUICallback("ui:opened", function(_, cb)
     is_open = true
     SkyPhoneApps.SetPhoneOpen(true)
     notification_focus = false
-    SetNuiFocus(true, true)
+    call_focus = false
+    update_nui_focus()
     TriggerEvent("sky_phone:animation:phone", true)
     cb({ success = true })
 end)
 
-RegisterNUICallback("close", function(_, cb)
+RegisterNUICallback("close", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     close_phone()
     cb({ success = true })
 end)
 
 RegisterNUICallback("notification:focus", function(data, cb)
+    if type(data) ~= "table" or type(data.active) ~= "boolean" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     notification_focus = data.active == true and not is_open
-    SetNuiFocus(is_open or notification_focus, is_open or notification_focus)
+    update_nui_focus()
     cb({ success = true })
 end)
 
-RegisterNUICallback("sim:picker-close", function(_, cb)
+RegisterNUICallback("sim:picker-close", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     sim_picker_open = false
-    SetNuiFocus(is_open or notification_focus, is_open or notification_focus)
-    cb({ success = true })
+    sim_picker_payload = nil
+    update_nui_focus()
+    SendNUIMessage({ type = "sim:picker-close" })
+    local result = Bridge.Callbacks.Trigger("sky_phone:sim:picker-close", {})
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
 end)
 
-RegisterNUICallback("map:getPlayerCoords", function(_, cb)
+RegisterNUICallback("map:getPlayerCoords", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local coords = GetEntityCoords(PlayerPedId())
     cb({
         success = true,
@@ -439,7 +551,11 @@ local function weather_region(coords)
     return "los_santos"
 end
 
-RegisterNUICallback("weather:get", function(_, cb)
+RegisterNUICallback("weather:get", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local coords = GetEntityCoords(PlayerPedId())
     local weather_hash = GetPrevWeatherTypeHashName()
     local next_weather_hash = GetNextWeatherTypeHashName()
@@ -479,9 +595,13 @@ local function garage_vehicle_kind(model_hash, fallback)
 end
 
 RegisterNUICallback("garage:vehicles", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = Bridge.Callbacks.Trigger("sky_phone:garage:vehicles", data)
-    if not result or not result.success or type(result.data) ~= "table" then
-        cb(result or { success = false, error = "request_failed" })
+    if type(result) ~= "table" or not result.success or type(result.data) ~= "table" then
+        cb(type(result) == "table" and result or { success = false, error = "request_failed" })
         return
     end
     for _, vehicle in ipairs(result.data.vehicles or {}) do
@@ -505,8 +625,12 @@ end)
 
 for _, callback_name in ipairs(server_callbacks) do
     RegisterNUICallback(callback_name, function(data, cb)
+        if type(data) ~= "table" then
+            cb({ success = false, error = "invalid_request" })
+            return
+        end
         local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data)
-        if result then
+        if type(result) == "table" then
             cb(result)
             return
         end
@@ -516,6 +640,10 @@ for _, callback_name in ipairs(server_callbacks) do
 end
 
 RegisterNetEvent("sky_phone:device:open", function(data)
+    if type(data) ~= "table" or type(data.device) ~= "table" or type(data.device.imei) ~= "string" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid device open data.")
+        return
+    end
     Bridge.Debug(
         "debug",
         "[sky_phone] Client received device open for IMEI %s account_linked=%s.",
@@ -525,19 +653,27 @@ RegisterNetEvent("sky_phone:device:open", function(data)
     )
     device_payload = data
     open_requested = true
+    if is_open then
+        SkyPhoneApps.SendCatalog()
+        SendNUIMessage({ type = "device:updated", data = data })
+        return
+    end
     open_phone()
 end)
 
 RegisterNetEvent("sky_phone:device:updated", function(data)
+    if type(data) ~= "table" or type(data.device) ~= "table" or type(data.device.imei) ~= "string" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid device update data.")
+        return
+    end
     device_payload = data
     SendNUIMessage({ type = "device:updated", data = data })
 end)
 
 RegisterNetEvent("sky_phone:device:invalidated", function()
-    open_requested = false
-    device_payload = nil
     TriggerEvent("sky_phone:animation:reset")
-    close_phone()
+    close_phone(false)
+    device_payload = nil
 end)
 
 RegisterNetEvent("sky_phone:device:error", function(error_code)
@@ -669,14 +805,20 @@ RegisterNetEvent("sky_phone:flare:message", function(data)
 end)
 
 RegisterNetEvent("sky_phone:sim:picker", function(data)
+    if type(data) ~= "table" or type(data.number) ~= "string" or type(data.choices) ~= "table" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid SIM picker data.")
+        return
+    end
     sim_picker_open = true
-    SetNuiFocus(true, true)
+    sim_picker_payload = data
+    update_nui_focus()
     SendNUIMessage({ type = "sim:picker", data = data })
 end)
 
 RegisterNetEvent("sky_phone:sim:picker-close", function()
     sim_picker_open = false
-    SetNuiFocus(is_open or notification_focus, is_open or notification_focus)
+    sim_picker_payload = nil
+    update_nui_focus()
     SendNUIMessage({ type = "sim:picker-close" })
 end)
 
@@ -752,13 +894,35 @@ RegisterNetEvent("sky_phone:darkchat:new", function(data)
 end)
 
 RegisterNetEvent("sky_phone:call:incoming", function(data)
-    notification_focus = true
-    SetNuiFocus(true, true)
+    if type(data) ~= "table" or type(data.id) ~= "string" or data.state ~= "ringing" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid incoming call data.")
+        return
+    end
+    active_call_payload = data
+    call_focus = true
+    update_nui_focus()
     TriggerEvent("sky_phone:animation:call", data)
     SendNUIMessage({ type = "call:incoming", data = data })
 end)
 
 RegisterNetEvent("sky_phone:call:state", function(data)
+    if type(data) ~= "table" or type(data.id) ~= "string" or type(data.state) ~= "string" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid call state data.")
+        return
+    end
+    if data.state == "ringing" or data.state == "connected" then
+        active_call_payload = data
+    end
+    if data.state ~= "ringing" then
+        local focus_changed = call_focus
+        call_focus = false
+        if focus_changed then
+            update_nui_focus()
+        end
+    end
+    if data.state ~= "ringing" and data.state ~= "connected" then
+        active_call_payload = nil
+    end
     if data.state == "connected" and data.channel then
         if not join_call_voice(data.channel) then
             TriggerEvent("sky_phone:device:error", "voice_unavailable")
@@ -784,9 +948,19 @@ AddEventHandler("onResourceStop", function(resource_name)
         return
     end
 
-    if is_open or notification_focus then
-        SetNuiFocus(false, false)
-    end
+    is_open = false
+    open_requested = false
+    notification_focus = false
+    call_focus = false
+    payphone_focus = false
+    camera_active = false
+    camera_nui_focused = true
+    sim_picker_open = false
+    sim_picker_payload = nil
+    active_call_payload = nil
+    activity_suspended = false
+    SetNuiFocusKeepInput(false)
+    SetNuiFocus(false, false)
 
     TriggerEvent("sky_phone:animation:reset")
     leave_call_voice()
diff --git a/sky_phone/source/client/payphones.lua b/sky_phone/source/client/payphones.lua
index d3fb3b4..d59b569 100644
--- a/sky_phone/source/client/payphones.lua
+++ b/sky_phone/source/client/payphones.lua
@@ -6,6 +6,7 @@ local active_call_state = nil
 local active_call_number = nil
 local active_call_elapsed_seconds = 0
 local active_call_elapsed_updated_at = 0
+local active_call_payload = nil
 local call_channel = 0
 local replacement_prop = nil
 local hidden_prop = nil
@@ -360,11 +361,20 @@ local function booth_payload(booth)
     }
 end
 
+local function payphone_open_payload()
+    return {
+        currency = Config.Payphones.Currency,
+        maxNumberLength = Config.Sim.NumberLength,
+        pricePerSecond = Config.Payphones.PricePerSecond,
+        locales = get_locale().Nui.Payphone,
+    }
+end
+
 local function close_payphone()
     local was_open = payphone_open
     payphone_open = false
     if was_open then
-        SetNuiFocus(false, false)
+        TriggerEvent("sky_phone:client:setPayphoneFocus", false)
         SendNUIMessage({ type = "payphone:close" })
     end
     if not active_call_id then
@@ -418,6 +428,7 @@ local function apply_active_call_state(data)
         active_call_elapsed_seconds = 0
         active_call_elapsed_updated_at = 0
     end
+    active_call_payload = data
 end
 
 local function clear_active_call_state()
@@ -426,6 +437,7 @@ local function clear_active_call_state()
     active_call_number = nil
     active_call_elapsed_seconds = 0
     active_call_elapsed_updated_at = 0
+    active_call_payload = nil
     hangup_requested = false
 end
 
@@ -435,48 +447,51 @@ local function open_payphone(booth)
     end
     active_booth = booth
     payphone_open = true
-    SetNuiFocus(true, true)
+    TriggerEvent("sky_phone:client:setPayphoneFocus", true)
     SendNUIMessage({
         type = "payphone:open",
-        data = {
-            currency = Config.Payphones.Currency,
-            maxNumberLength = Config.Sim.NumberLength,
-            pricePerSecond = Config.Payphones.PricePerSecond,
-            locales = get_locale().Nui.Payphone,
-        },
+        data = payphone_open_payload(),
     })
 end
 
 RegisterNUICallback("payphone:dial", function(data, cb)
-    if not payphone_open or not active_booth or active_call_id then
+    if type(data) ~= "table" or not payphone_open or not active_booth or active_call_id then
         cb({ success = false, error = "invalid_request" })
         return
     end
     local payload = booth_payload(active_booth)
-    payload.phoneNumber = type(data) == "table" and data.phoneNumber or nil
+    payload.phoneNumber = data.phoneNumber
     local result = Bridge.Callbacks.Trigger("sky_phone:payphone:dial", payload)
-    local call_started = result and result.success and result.data
+    local call_started = type(result) == "table" and result.success and type(result.data) == "table"
         and (result.data.state == "ringing" or result.data.state == "connected")
     if call_started then
         apply_active_call_state(result.data)
     end
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
     if call_started then
         close_payphone()
         start_call_visuals()
     end
 end)
 
-RegisterNUICallback("payphone:hangup", function(_, cb)
+RegisterNUICallback("payphone:hangup", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if not active_call_id then
         cb({ success = false, error = "call_not_found" })
         return
     end
     local result = Bridge.Callbacks.Trigger("sky_phone:payphone:hangup", { id = active_call_id })
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
 end)
 
-RegisterNUICallback("payphone:close", function(_, cb)
+RegisterNUICallback("payphone:close", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if active_call_id then
         Bridge.Callbacks.Trigger("sky_phone:payphone:hangup", { id = active_call_id })
     end
@@ -485,7 +500,7 @@ RegisterNUICallback("payphone:close", function(_, cb)
 end)
 
 RegisterNetEvent("sky_phone:payphone:state", function(data)
-    if type(data) ~= "table" then
+    if type(data) ~= "table" or type(data.id) ~= "string" or type(data.state) ~= "string" then
         return
     end
     if data.state == "ringing" or data.state == "connected" then
@@ -506,6 +521,24 @@ RegisterNetEvent("sky_phone:payphone:state", function(data)
     SendNUIMessage({ type = "payphone:state", data = data })
 end)
 
+AddEventHandler("sky_phone:client:nuiReady", function()
+    if payphone_open then
+        TriggerEvent("sky_phone:client:setPayphoneFocus", true)
+        SendNUIMessage({ type = "payphone:open", data = payphone_open_payload() })
+    else
+        TriggerEvent("sky_phone:client:setPayphoneFocus", false)
+        SendNUIMessage({ type = "payphone:close" })
+    end
+    if active_call_payload then
+        local payload = {}
+        for key, value in pairs(active_call_payload) do
+            payload[key] = value
+        end
+        payload.elapsedSeconds = current_call_elapsed_seconds()
+        SendNUIMessage({ type = "payphone:state", data = payload })
+    end
+end)
+
 CreateThread(function()
     while true do
         if not Config.Payphones.Enabled or payphone_open or active_call_id or visuals_ending then
@@ -625,9 +658,7 @@ AddEventHandler("onResourceStop", function(resource_name)
     if resource_name ~= GetCurrentResourceName() then
         return
     end
-    if payphone_open then
-        SetNuiFocus(false, false)
-    end
+    TriggerEvent("sky_phone:client:setPayphoneFocus", false)
     leave_call_voice()
     stop_call_visuals()
     clear_active_call_state()
diff --git a/sky_phone/source/client/radio.lua b/sky_phone/source/client/radio.lua
index 0132f7d..2b087cf 100644
--- a/sky_phone/source/client/radio.lua
+++ b/sky_phone/source/client/radio.lua
@@ -120,7 +120,10 @@ local function join_radio(primary, secondary)
         return approved
     end
 
-    local data = approved.data or {}
+    if type(approved.data) ~= "table" then
+        return { success = false, error = "request_failed" }
+    end
+    local data = approved.data
     local approved_primary = tonumber(data.frequency) or 0
     local approved_secondary = tonumber(data.secondaryFrequency) or 0
     if not Bridge.Radio.Join(approved_primary, approved_secondary) then
@@ -148,27 +151,41 @@ local function leave_radio()
     return request("disconnect")
 end
 
-RegisterNUICallback("radio:get", function(_, cb)
+RegisterNUICallback("radio:get", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = request("get")
-    if result.success then
+    if result.success and type(result.data) == "table" then
         apply_server_state(result.data)
         result.data.volume = current_volume
         result.data.provider = Bridge.Radio.GetProvider()
         result.data.secondarySupported = Bridge.Radio.SupportsSecondary()
+    elseif result.success then
+        result = { success = false, error = "request_failed" }
     end
     cb(result)
 end)
 
 RegisterNUICallback("radio:connect", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(join_radio(data.frequency, data.secondaryFrequency))
 end)
 
-RegisterNUICallback("radio:disconnect", function(_, cb)
+RegisterNUICallback("radio:disconnect", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(leave_radio())
 end)
 
 RegisterNUICallback("radio:set-volume", function(data, cb)
-    local volume = tonumber(data.volume)
+    local volume = type(data) == "table" and tonumber(data.volume) or nil
     if not volume then
         cb({ success = false, error = "invalid_volume" })
         return
@@ -179,6 +196,10 @@ RegisterNUICallback("radio:set-volume", function(data, cb)
 end)
 
 RegisterNUICallback("radio:save-settings", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = request("save-settings", data)
     if result.success then
         apply_server_state({ settings = result.data })
@@ -187,14 +208,25 @@ RegisterNUICallback("radio:save-settings", function(data, cb)
 end)
 
 RegisterNUICallback("radio:save-badge", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(request("save-badge", data))
 end)
 
 RegisterNUICallback("radio:save-display-name", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(request("save-display-name", data))
 end)
 
 RegisterNetEvent("sky_phone:radio:members", function(data)
+    if type(data) ~= "table" then
+        return
+    end
     local frequency = tonumber(data.frequency)
     local channel_id = frequency == current_primary and 1 or frequency == current_secondary and 2 or nil
     if not channel_id then
diff --git a/sky_phone/source/client/skyride.lua b/sky_phone/source/client/skyride.lua
index abf5862..42240c4 100644
--- a/sky_phone/source/client/skyride.lua
+++ b/sky_phone/source/client/skyride.lua
@@ -88,7 +88,11 @@ end
 for index = 1, #server_callbacks do
     local callback_name = server_callbacks[index]
     RegisterNUICallback(callback_name, function(data, cb)
-        local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data or {})
+        if type(data) ~= "table" then
+            cb({ success = false, error = "invalid_request" })
+            return
+        end
+        local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data)
         if not result then
             cb({ success = false, error = "request_failed" })
             return
diff --git a/sky_phone/source/server/calls.lua b/sky_phone/source/server/calls.lua
index 537306c..b81e731 100644
--- a/sky_phone/source/server/calls.lua
+++ b/sky_phone/source/server/calls.lua
@@ -1024,31 +1024,45 @@ end)
 
 local payphone_models = {}
 for _, model_name in ipairs(Config.Payphones.Props or {}) do
-    payphone_models[model_name] = true
+    if type(model_name) == "string" then
+        payphone_models[model_name] = true
+    end
 end
 
-local function valid_payphone_position(source, data)
-    if type(data) ~= "table" or not payphone_models[data.model] or type(data.coords) ~= "table" then
-        return nil
-    end
-    local x = tonumber(data.coords.x)
-    local y = tonumber(data.coords.y)
-    local z = tonumber(data.coords.z)
-    if not x or not y or not z or x ~= x or y ~= y or z ~= z
-        or math.abs(x) > 10000.0 or math.abs(y) > 10000.0 or math.abs(z) > 2000.0
-    then
-        return nil
-    end
+local payphone_locations, rejected_payphone_locations = SkyPhonePayphones.ValidateLocations(
+    Config.Payphones.Locations,
+    payphone_models
+)
+if Config.Payphones.Enabled and #payphone_locations == 0 then
+    Bridge.Debug(
+        "error",
+        "[sky_phone] Payphones are enabled, but no valid server-owned locations are configured; payphone calls will be rejected.",
+        { always = true }
+    )
+elseif Config.Payphones.Enabled and rejected_payphone_locations > 0 then
+    Bridge.Debug(
+        "warn",
+        "[sky_phone] Ignored %s invalid server-owned payphone location(s).",
+        rejected_payphone_locations,
+        { always = true }
+    )
+end
+
+local function valid_payphone_position(source)
     local ped = GetPlayerPed(source)
     if not ped or ped == 0 then
         return nil
     end
     local player_coords = GetEntityCoords(ped)
-    local booth_coords = vector3(x, y, z)
-    if #(player_coords - booth_coords) > Config.Payphones.ServerValidationDistance then
+    local location = SkyPhonePayphones.FindNearest(
+        payphone_locations,
+        player_coords,
+        Config.Payphones.ServerValidationDistance
+    )
+    if not location then
         return nil
     end
-    return booth_coords, data.model
+    return vector3(location.coords.x, location.coords.y, location.coords.z), location.model
 end
 
 local function payphone_terminal(number, state)
@@ -1064,10 +1078,13 @@ local function payphone_terminal(number, state)
 end
 
 Bridge.Callbacks.Register("sky_phone:payphone:dial", function(source, data)
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
     if not Config.Payphones.Enabled or not SkyPhone.AllowOperation(source, "payphone_dial", 15, 60) then
         return { success = false, error = "rate_limited" }
     end
-    local booth_coords, booth_model = valid_payphone_position(source, data)
+    local booth_coords, booth_model = valid_payphone_position(source)
     if not booth_coords then
         return { success = false, error = "invalid_payphone" }
     end
diff --git a/sky_phone/source/server/darkchat.lua b/sky_phone/source/server/darkchat.lua
index 8b3ae20..1a4f8ee 100644
--- a/sky_phone/source/server/darkchat.lua
+++ b/sky_phone/source/server/darkchat.lua
@@ -538,12 +538,16 @@ Bridge.Callbacks.Register("sky_phone:darkchat:send", function(source, data)
         media_waveform = voice.waveform
     elseif message_type == "image" or message_type == "video" then
         local media_type = message_type == "image" and "photo" or "video"
-        local media_url, media_error = SkyPhoneMedia.ResolveOwnedMedia(source, data.mediaAssetId, media_type)
+        local media_url, media_error, resolved_mime = SkyPhoneMedia.ResolveOwnedMedia(
+            source,
+            data.mediaAssetId,
+            media_type
+        )
         if not media_url then
             return { success = false, error = media_error }
         end
         media_payload = media_url
-        media_mime = message_type == "image" and "image/jpeg" or "video/mp4"
+        media_mime = resolved_mime
     elseif message_type == "share" then
         local share
         local share_error
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 1cf8125..0f43914 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -377,6 +377,7 @@ local schema = {
             { name = "url", type = "TEXT NOT NULL" },
             { name = "remote_id", type = "VARCHAR(128) NOT NULL" },
             { name = "media_type", type = "ENUM('photo', 'video') NOT NULL" },
+            { name = "mime_type", type = "VARCHAR(120) NULL" },
             { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
         },
         primaryKey = "id",
@@ -2524,6 +2525,37 @@ Bridge.Database.Query([[
     ALTER TABLE `sky_phone_darkchat_messages`
     MODIFY COLUMN `message_type` ENUM('text', 'emoji', 'gif', 'voice', 'image', 'video', 'share', 'system') NOT NULL DEFAULT 'text'
 ]], {})
+Bridge.Database.Query([[
+    UPDATE `sky_phone_media`
+    SET `mime_type` = CASE
+        WHEN `media_type` = 'video' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.webm' THEN 'video/webm'
+        WHEN `media_type` = 'video' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.mp4' THEN 'video/mp4'
+        WHEN `media_type` = 'photo' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.png' THEN 'image/png'
+        WHEN `media_type` = 'photo' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.webp' THEN 'image/webp'
+        WHEN `media_type` = 'photo' AND (
+            LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.jpg'
+            OR LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.jpeg'
+        ) THEN 'image/jpeg'
+        ELSE NULL
+    END
+    WHERE `mime_type` IS NULL OR `mime_type` = ''
+]], {})
+Bridge.Database.Query([[
+    UPDATE `sky_phone_sms_messages` message
+    INNER JOIN `sky_phone_media` media ON media.`url` = message.`media_payload`
+    SET message.`media_mime` = media.`mime_type`
+    WHERE message.`message_type` = 'video'
+        AND media.`mime_type` IN ('video/webm', 'video/mp4')
+        AND (message.`media_mime` IS NULL OR message.`media_mime` <> media.`mime_type`)
+]], {})
+Bridge.Database.Query([[
+    UPDATE `sky_phone_darkchat_messages` message
+    INNER JOIN `sky_phone_media` media ON media.`url` = message.`media_payload`
+    SET message.`media_mime` = media.`mime_type`
+    WHERE message.`message_type` = 'video'
+        AND media.`mime_type` IN ('video/webm', 'video/mp4')
+        AND (message.`media_mime` IS NULL OR message.`media_mime` <> media.`mime_type`)
+]], {})
 Bridge.Database.Query([[
     ALTER TABLE `sky_phone_marketplace_images`
     MODIFY COLUMN `gradient` VARCHAR(2200) NOT NULL
diff --git a/sky_phone/source/server/media.lua b/sky_phone/source/server/media.lua
index c6318b3..b7418da 100644
--- a/sky_phone/source/server/media.lua
+++ b/sky_phone/source/server/media.lua
@@ -3,14 +3,32 @@ SkyPhoneMedia = {}
 
 local pending_uploads = {}
 local pending_deletes = {}
+local allowed_remote_mimes = {
+    photo = {
+        ["image/jpeg"] = true,
+        ["image/png"] = true,
+        ["image/webp"] = true,
+    },
+    video = {
+        ["video/mp4"] = true,
+        ["video/webm"] = true,
+    },
+}
 
 local function media_config()
     return Config.Media.FiveManage
 end
 
+local function media_api_key()
+    local convar = media_config().ApiKeyConvar
+    if type(convar) ~= "string" or convar == "" then
+        return ""
+    end
+    return GetConvar(convar, "")
+end
+
 local function api_configured()
-    local api_key = media_config().ApiKey
-    return type(api_key) == "string" and api_key ~= "" and api_key ~= "YOUR_API_TOKEN"
+    return media_api_key() ~= ""
 end
 
 local function http_request(url, method, body, headers, timeout_ms)
@@ -63,7 +81,7 @@ local function request_presigned_url()
         tostring(config.BaseUrl):gsub("/+$", "") .. "/presigned-url",
         "GET",
         "",
-        { ["Authorization"] = config.ApiKey },
+        { ["Authorization"] = media_api_key() },
         tonumber(config.RequestTimeoutMs) or 10000
     )
     local data, response_error = decode_response(response)
@@ -86,7 +104,7 @@ local function get_remote_file(remote_id)
         ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
         "GET",
         "",
-        { ["Authorization"] = config.ApiKey },
+        { ["Authorization"] = media_api_key() },
         tonumber(config.RequestTimeoutMs) or 10000
     )
     return decode_response(response)
@@ -101,7 +119,7 @@ local function delete_remote_file(remote_id)
         ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
         "DELETE",
         "",
-        { ["Authorization"] = config.ApiKey },
+        { ["Authorization"] = media_api_key() },
         tonumber(config.RequestTimeoutMs) or 10000
     )
     if response.status < 200 or response.status >= 300 then
@@ -153,7 +171,7 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         params[#params + 1] = value
     end
     local rows = Bridge.Database.Query(([[
-        SELECT `url`, `media_type` FROM `sky_phone_media`
+        SELECT `url`, `media_type`, `mime_type` FROM `sky_phone_media`
         WHERE `id` = ? AND %s
         LIMIT 1
     ]]):format(condition), params)
@@ -172,7 +190,7 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         )
         return nil, "invalid_attachment"
     end
-    return media.url
+    return media.url, nil, media.mime_type
 end
 
 local function upload_result(source, correlation_id, success, error_code, media)
@@ -224,18 +242,29 @@ local function verify_remote_upload(state, remote_id, uploaded_url)
     if remote.url ~= uploaded_url and remote.originalUrl ~= uploaded_url then
         return nil, "invalid_upload"
     end
-    local remote_type = tostring(remote.type or remote.mimeType or ""):lower()
+    local remote_mime = tostring(remote.mimeType or ""):lower():match("^%s*([^;%s]+)") or ""
+    local remote_type = tostring(remote.type or ""):lower():match("^%s*([^;%s]+)") or ""
+    if remote_mime == "" and allowed_remote_mimes[state.media_type][remote_type] then
+        remote_mime = remote_type
+    end
+    if remote_type == "" then
+        remote_type = remote_mime
+    end
     if state.media_type == "photo" and remote_type ~= "" and not remote_type:find("image", 1, true) then
         return nil, "invalid_media_type"
     end
     if state.media_type == "video" and remote_type ~= "" and not remote_type:find("video", 1, true) then
         return nil, "invalid_media_type"
     end
+    if remote_mime ~= "" and not allowed_remote_mimes[state.media_type][remote_mime] then
+        return nil, "invalid_media_type"
+    end
     local metadata = parse_metadata(remote.metadata)
     if not metadata or metadata.captureToken ~= state.capture_token then
         return nil, "invalid_upload_token"
     end
     return {
+        mime_type = allowed_remote_mimes[state.media_type][remote_mime] and remote_mime or state.mime_type,
         remote_id = remote_id,
         url = remote.url or uploaded_url,
     }
@@ -255,7 +284,7 @@ Bridge.Callbacks.Register("sky_phone:gallery:list", function(source, data)
     if not owner then
         return error_response
     end
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local limit = math.max(1, math.min(math.floor(tonumber(data.limit) or Config.Media.PageSize), 100))
     local offset = math.max(0, math.floor(tonumber(data.offset) or 0))
     local media_type = data.mediaType
@@ -342,7 +371,7 @@ Bridge.Callbacks.Register("sky_phone:messages:gifs", function(source, data)
     if #query > 60 or offset < 0 or offset > 500 then
         return { success = false, error = "invalid_request" }
     end
-    local api_key = Config.Media.GiphyApiKey
+    local api_key = GetConvar(Config.Media.GiphyApiKeyConvar, "")
     if api_key == "" then
         return { success = false, error = "gif_provider_unconfigured" }
     end
@@ -420,7 +449,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:request-upload", function(data)
     local src = source
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local correlation_id = data.correlationId
     local media_type = data.mediaType
     if type(correlation_id) ~= "string" or #correlation_id > 80
@@ -454,6 +483,9 @@ RegisterNetEvent("sky_phone:media:request-upload", function(data)
         capture_token = capture_token,
         correlation_id = correlation_id,
         media_type = media_type,
+        mime_type = media_type == "video" and "video/webm"
+            or ({ png = "image/png", webp = "image/webp" })[tostring(Config.Media.Photo.Encoding):lower()]
+            or "image/jpeg",
         owner = owner,
         source = src,
     }
@@ -474,7 +506,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:complete-upload", function(data)
     local src = source
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local request_id = data.requestId
     local state = type(request_id) == "string" and pending_uploads[request_id] or nil
     if not state or state.source ~= src or state.completing then
@@ -496,14 +528,14 @@ RegisterNetEvent("sky_phone:media:complete-upload", function(data)
     local result
     if owner.account_id then
         result = Bridge.Database.Query([[
-            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`)
-            VALUES (?, NULL, ?, ?, ?)
-        ]], { owner.account_id, verified.url, verified.remote_id, state.media_type })
+            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `mime_type`)
+            VALUES (?, NULL, ?, ?, ?, ?)
+        ]], { owner.account_id, verified.url, verified.remote_id, state.media_type, verified.mime_type })
     else
         result = Bridge.Database.Query([[
-            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`)
-            VALUES (NULL, ?, ?, ?, ?)
-        ]], { owner.imei, verified.url, verified.remote_id, state.media_type })
+            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `mime_type`)
+            VALUES (NULL, ?, ?, ?, ?, ?)
+        ]], { owner.imei, verified.url, verified.remote_id, state.media_type, verified.mime_type })
     end
     pending_uploads[request_id] = nil
     local media_id = type(result) == "number" and result or (type(result) == "table" and tonumber(result.insertId))
@@ -522,7 +554,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:cancel-upload", function(data)
     local src = source
-    local request_id = data and data.requestId
+    local request_id = type(data) == "table" and data.requestId or nil
     local state = type(request_id) == "string" and pending_uploads[request_id] or nil
     if state and state.source == src and not state.completing then
         pending_uploads[request_id] = nil
@@ -532,7 +564,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:fail-upload", function(data)
     local src = source
-    local request_id = data and data.requestId
+    local request_id = type(data) == "table" and data.requestId or nil
     local state = type(request_id) == "string" and pending_uploads[request_id] or nil
     if not state or state.source ~= src or state.completing then
         return
@@ -550,7 +582,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:delete", function(data)
     local src = source
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local correlation_id = data.correlationId
     local media_id = tonumber(data.id)
     if type(correlation_id) ~= "string" or #correlation_id > 80 or not media_id then
@@ -646,6 +678,7 @@ AddEventHandler("playerDropped", function()
 end)
 
 if not api_configured() then
-    print("^3[sky_phone] Camera and Gallery uploads are disabled until Config.Media.FiveManage.ApiKey is set in config/media.lua.^7")
+    print(("^3[sky_phone] Camera and Gallery uploads are disabled until the %s server convar is set.^7")
+        :format(tostring(media_config().ApiKeyConvar)))
 end
 end)
diff --git a/sky_phone/source/server/messages.lua b/sky_phone/source/server/messages.lua
index 6516f0d..f0868a6 100644
--- a/sky_phone/source/server/messages.lua
+++ b/sky_phone/source/server/messages.lua
@@ -32,7 +32,7 @@ local attachment_assets = {
 local attachment_mimes = {
     gif = "image/gif",
     image = "image/jpeg",
-    video = "video/mp4",
+    video = "video/webm",
 }
 
 local function allowed_media_url(value)
@@ -208,7 +208,9 @@ local function validate_attachment(source, device, message_type, data)
         return nil
     end
     local payload = data.mediaAssetId
-    if not valid_attachment_asset(message_type, payload) then
+    local built_in_asset = valid_attachment_asset(message_type, payload)
+    local mime = built_in_asset and attachment_mimes[message_type] or nil
+    if not built_in_asset then
         if message_type == "gif" then
             return nil
         end
@@ -226,7 +228,7 @@ local function validate_attachment(source, device, message_type, data)
             params = { media_id, device.imei }
         end
         local rows = Bridge.Database.Query(([[
-            SELECT `url`, `media_type` FROM `sky_phone_media`
+            SELECT `url`, `media_type`, `mime_type` FROM `sky_phone_media`
             WHERE `id` = ? AND %s
             LIMIT 1
         ]]):format(condition), params)
@@ -241,6 +243,7 @@ local function validate_attachment(source, device, message_type, data)
             return nil
         end
         payload = media.url
+        mime = type(media.mime_type) == "string" and media.mime_type ~= "" and media.mime_type or nil
     end
     local duration = nil
     if message_type == "video" and data.mediaDurationMs ~= nil then
@@ -252,7 +255,7 @@ local function validate_attachment(source, device, message_type, data)
     end
     return {
         duration = duration,
-        mime = attachment_mimes[message_type],
+        mime = mime,
         payload = payload,
     }
 end
diff --git a/sky_phone/source/server/payphones.lua b/sky_phone/source/server/payphones.lua
new file mode 100644
index 0000000..3a1fa47
--- /dev/null
+++ b/sky_phone/source/server/payphones.lua
@@ -0,0 +1,105 @@
+SkyPhonePayphones = {}
+
+local maximum_horizontal_coordinate = 10000.0
+local maximum_vertical_coordinate = 2000.0
+
+local function finite_number(value)
+    if type(value) ~= "number" or value ~= value or value == math.huge or value == -math.huge then
+        return nil
+    end
+    return value
+end
+
+local function normalize_coordinates(value, allow_vector)
+    local value_type = type(value)
+    if value_type ~= "table" and (not allow_vector or value_type ~= "vector3") then
+        return nil
+    end
+
+    local x = finite_number(value.x)
+    local y = finite_number(value.y)
+    local z = finite_number(value.z)
+    if not x or not y or not z
+        or math.abs(x) > maximum_horizontal_coordinate
+        or math.abs(y) > maximum_horizontal_coordinate
+        or math.abs(z) > maximum_vertical_coordinate
+    then
+        return nil
+    end
+
+    return { x = x, y = y, z = z }
+end
+
+local function normalize_location(location, allowed_models)
+    if type(location) ~= "table" or type(location.model) ~= "string" or not allowed_models[location.model] then
+        return nil
+    end
+
+    local coords = normalize_coordinates(location.coords, false)
+    if not coords then
+        return nil
+    end
+
+    return {
+        model = location.model,
+        coords = coords,
+    }
+end
+
+function SkyPhonePayphones.ValidateLocations(locations, allowed_models)
+    if type(locations) ~= "table" or type(allowed_models) ~= "table" then
+        return {}, 0
+    end
+
+    local validated = {}
+    local rejected = 0
+    for index, location in pairs(locations) do
+        local valid_index = type(index) == "number" and index >= 1 and index % 1 == 0
+        local normalized = valid_index and normalize_location(location, allowed_models) or nil
+        if normalized then
+            normalized.index = index
+            validated[#validated + 1] = normalized
+        else
+            rejected = rejected + 1
+        end
+    end
+
+    table.sort(validated, function(left, right)
+        return left.index < right.index
+    end)
+    for index = 1, #validated do
+        validated[index].index = nil
+    end
+
+    return validated, rejected
+end
+
+function SkyPhonePayphones.FindNearest(locations, player_coords, maximum_distance)
+    if type(locations) ~= "table" then
+        return nil
+    end
+
+    local coords = normalize_coordinates(player_coords, true)
+    local distance = finite_number(maximum_distance)
+    if not coords or not distance or distance <= 0 then
+        return nil
+    end
+
+    local nearest = nil
+    local nearest_distance_squared = distance * distance
+    for index = 1, #locations do
+        local location = locations[index]
+        if type(location) == "table" and type(location.coords) == "table" then
+            local dx = coords.x - location.coords.x
+            local dy = coords.y - location.coords.y
+            local dz = coords.z - location.coords.z
+            local distance_squared = dx * dx + dy * dy + dz * dz
+            if distance_squared <= nearest_distance_squared then
+                nearest = location
+                nearest_distance_squared = distance_squared
+            end
+        end
+    end
+
+    return nearest
+end
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index 91d0a0f..97c003d 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -914,15 +914,20 @@ function SkyPhone.OpenDeviceForCall(source, imei)
         return false
     end
     local security = load_device_security(imei)
-    if sessions[source] and sessions[source].imei ~= imei then
+    local existing_session = sessions[source]
+    if existing_session and existing_session.imei ~= imei then
         SkyPhoneCompanies.ClearCallAvailability(source)
     end
-    sessions[source] = {
-        imei = imei,
-        slot = matches[1].slot,
-        token = ("%s:%s:%s"):format(imei, tostring(source), tostring(GetGameTimer())),
-        unlocked = security == nil,
-    }
+    if existing_session and existing_session.imei == imei then
+        existing_session.slot = matches[1].slot
+    else
+        sessions[source] = {
+            imei = imei,
+            slot = matches[1].slot,
+            token = ("%s:%s:%s"):format(imei, tostring(source), tostring(GetGameTimer())),
+            unlocked = security == nil,
+        }
+    end
     TriggerClientEvent("sky_phone:device:open", source, bootstrap(source))
     return true
 end
@@ -1075,7 +1080,13 @@ Bridge.Callbacks.Register("sky_phone:device:save", function(source, data)
     if not session then
         return error_response
     end
-    if type(data) ~= "table" or not allowed_device_namespaces[data.namespace] then
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
+    if data.imei ~= session.imei or data.sessionToken ~= session.token then
+        return { success = false, error = "stale_session" }
+    end
+    if not allowed_device_namespaces[data.namespace] then
         return { success = false, error = "invalid_namespace" }
     end
 
diff --git a/sky_phone/source/server/sim.lua b/sky_phone/source/server/sim.lua
index 34bde46..fe6f3c4 100644
--- a/sky_phone/source/server/sim.lua
+++ b/sky_phone/source/server/sim.lua
@@ -406,6 +406,14 @@ Bridge.Callbacks.Register("sky_phone:sim:insert", function(source, data)
     return insert_sim(source, data.imei, data.confirmed == true)
 end)
 
+Bridge.Callbacks.Register("sky_phone:sim:picker-close", function(source)
+    if operation_locks[source] then
+        return { success = false, error = "operation_in_progress" }
+    end
+    pending_insertions[source] = nil
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:sim:eject", function(source)
     if not sim_cards_enabled then
         return { success = false, error = "disabled" }
diff --git a/tests/client_focus.lua b/tests/client_focus.lua
new file mode 100644
index 0000000..f70ae6c
--- /dev/null
+++ b/tests/client_focus.lua
@@ -0,0 +1,67 @@
+dofile("sky_phone/source/client/focus.lua")
+
+local function resolve(overrides)
+    local state = {
+        activity_suspended = false,
+        call_focus = false,
+        camera_active = false,
+        camera_nui_focused = true,
+        is_open = false,
+        notification_focus = false,
+        payphone_focus = false,
+        sim_picker_open = false,
+    }
+    for key, value in pairs(overrides or {}) do
+        state[key] = value
+    end
+    return SkyPhoneFocus.Resolve(state)
+end
+
+local idle = resolve()
+assert(not idle.focused and not idle.keep_input, "idle NUI must release focus and game input override")
+
+local minimized_call = resolve()
+assert(not minimized_call.focused, "a replayed call without an attention claim must stay unfocused")
+
+local incoming_call = resolve({ call_focus = true })
+assert(incoming_call.focused and not incoming_call.keep_input, "incoming call attention must focus the NUI")
+
+local camera_game_input = resolve({
+    camera_active = true,
+    camera_nui_focused = false,
+    is_open = true,
+})
+assert(
+    not camera_game_input.focused and camera_game_input.keep_input,
+    "unfocused camera must own game input over the open phone"
+)
+
+local camera_interrupted_by_call = resolve({
+    call_focus = true,
+    camera_active = true,
+    camera_nui_focused = false,
+    is_open = true,
+})
+assert(
+    camera_interrupted_by_call.focused and not camera_interrupted_by_call.keep_input,
+    "incoming call attention must override unfocused camera input"
+)
+
+local camera_after_connected_call = resolve({
+    call_focus = false,
+    camera_active = true,
+    camera_nui_focused = false,
+    is_open = true,
+})
+assert(
+    not camera_after_connected_call.focused and camera_after_connected_call.keep_input,
+    "connected call without an attention claim must restore unfocused camera input"
+)
+
+local payphone_closed_behind_phone = resolve({ is_open = true, payphone_focus = false })
+assert(payphone_closed_behind_phone.focused, "releasing payphone focus must not clear mobile phone focus")
+
+local suspended = resolve({ activity_suspended = true, call_focus = true, is_open = true })
+assert(not suspended.focused and not suspended.keep_input, "suspended activities must mask every focus claim")
+
+print("Client focus tests passed")
diff --git a/tests/server_payphones.lua b/tests/server_payphones.lua
new file mode 100644
index 0000000..1798a08
--- /dev/null
+++ b/tests/server_payphones.lua
@@ -0,0 +1,39 @@
+dofile("sky_phone/source/server/payphones.lua")
+
+local allowed_models = {
+    prop_phonebox_01a = true,
+    prop_phonebox_04 = true,
+}
+
+local locations, rejected = SkyPhonePayphones.ValidateLocations({
+    { model = "prop_phonebox_01a", coords = { x = 100.0, y = 200.0, z = 30.0 } },
+    { model = "prop_phonebox_04", coords = { x = 105.0, y = 200.0, z = 30.0 } },
+    { model = "not_allowed", coords = { x = 100.0, y = 200.0, z = 30.0 } },
+    { model = "prop_phonebox_01a", coords = { x = "100", y = 200.0, z = 30.0 } },
+    { model = "prop_phonebox_01a", coords = { x = 10001.0, y = 200.0, z = 30.0 } },
+    "malformed",
+}, allowed_models)
+
+assert(#locations == 2, "only strictly valid configured locations must be accepted")
+assert(rejected == 4, "every malformed or disallowed configured location must be reported")
+
+local first = SkyPhonePayphones.FindNearest(locations, { x = 101.0, y = 200.0, z = 30.0 }, 3.0)
+assert(first and first.model == "prop_phonebox_01a", "nearest configured booth must be selected")
+
+local second = SkyPhonePayphones.FindNearest(locations, { x = 104.0, y = 200.0, z = 30.0 }, 3.0)
+assert(second and second.model == "prop_phonebox_04", "another configured booth must be selected by proximity")
+
+assert(
+    not SkyPhonePayphones.FindNearest(locations, { x = 0.0, y = 0.0, z = 0.0 }, 3.0),
+    "a player away from every configured booth must be rejected"
+)
+assert(
+    not SkyPhonePayphones.FindNearest(locations, { x = "100", y = 200.0, z = 30.0 }, 3.0),
+    "malformed player coordinates must be rejected"
+)
+assert(
+    not SkyPhonePayphones.FindNearest(locations, { x = 100.0, y = 200.0, z = 30.0 }, 0.0),
+    "an invalid validation distance must be rejected"
+)
+
+print("Server payphone validation tests passed")

From c3b7a0871ae5468e4b33b36bdc1df14504e8bb61 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Wed, 12 Aug 2026 18:59:05 +0200
Subject: [PATCH 38/63] FIX - harden phone lifecycle and server authority

---
 frontend/src/App.vue                          | 113 ++++++--
 frontend/src/components/PayphoneOverlay.vue   |   6 +-
 frontend/src/components/SimPhonePicker.vue    |   1 -
 frontend/src/stores/banking.test.ts           |  24 +-
 frontend/src/stores/banking.ts                |  20 +-
 frontend/src/stores/mail.test.ts              | 106 +++++++-
 frontend/src/stores/mail.ts                   |  48 +++-
 frontend/src/stores/notifications.test.ts     |  23 ++
 frontend/src/stores/notifications.ts          |  13 +-
 frontend/src/stores/phone-persistence.test.ts | 170 ++++++++++++
 frontend/src/stores/phone.ts                  |  78 +++++-
 frontend/src/utils/nui.test.ts                |  63 +++++
 frontend/src/utils/nui.ts                     |  12 +-
 sky_phone/config/payphones.lua                | 248 ++++++++++++++++++
 sky_phone/fxmanifest.lua                      |   3 +
 sky_phone/source/client/camera.lua            | 136 +++++++---
 sky_phone/source/client/crewlink.lua          |   4 +
 sky_phone/source/client/focus.lua             |  21 ++
 sky_phone/source/client/garage.lua            |   4 +
 sky_phone/source/client/housing.lua           |  53 ++--
 sky_phone/source/client/main.lua              | 244 ++++++++++++++---
 sky_phone/source/client/payphones.lua         |  69 +++--
 sky_phone/source/client/radio.lua             |  42 ++-
 sky_phone/source/client/skyride.lua           |   6 +-
 sky_phone/source/server/calls.lua             |  51 ++--
 sky_phone/source/server/payphones.lua         | 105 ++++++++
 sky_phone/source/server/phone.lua             |  27 +-
 sky_phone/source/server/sim.lua               |   8 +
 tests/client_focus.lua                        |  67 +++++
 tests/server_payphones.lua                    |  39 +++
 30 files changed, 1630 insertions(+), 174 deletions(-)
 create mode 100644 frontend/src/stores/phone-persistence.test.ts
 create mode 100644 frontend/src/utils/nui.test.ts
 create mode 100644 sky_phone/config/payphones.lua
 create mode 100644 sky_phone/source/client/focus.lua
 create mode 100644 sky_phone/source/server/payphones.lua
 create mode 100644 tests/client_focus.lua
 create mode 100644 tests/server_payphones.lua

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index acf5d8b..bbf35c1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -237,6 +237,9 @@ const REFERENCE_VIEWPORT_WIDTH = 1920
 const REFERENCE_VIEWPORT_HEIGHT = 1080
 const PHONE_BASE_SCALE = 0.69
 const DEVELOPMENT_PHONE_SCALE = 1.25
+const PHONE_PORTRAIT_WIDTH = 390
+const PHONE_PORTRAIT_HEIGHT = 844
+const MIN_PRODUCTION_PHONE_ZOOM = 260 / PHONE_PORTRAIT_WIDTH
 const isDevelopment = import.meta.env.DEV
 
 const phone = usePhoneStore()
@@ -291,11 +294,34 @@ const phoneBaseZoom = computed(
     viewportScale.value *
     (isDevelopment ? DEVELOPMENT_PHONE_SCALE : PHONE_BASE_SCALE),
 )
+const phoneZoom = computed(() => {
+  const preferred =
+    phoneBaseZoom.value * (phone.preferences.settings.phoneScale / 100)
+  if (isDevelopment) return preferred
+
+  const edgeGap = 24 * viewportScale.value
+  const shellWidth = phone.cameraLandscape
+    ? PHONE_PORTRAIT_HEIGHT
+    : PHONE_PORTRAIT_WIDTH
+  const shellHeight = phone.cameraLandscape
+    ? PHONE_PORTRAIT_WIDTH
+    : PHONE_PORTRAIT_HEIGHT
+  const viewportMaximum = Math.max(
+    0,
+    Math.min(
+      (window.innerWidth - edgeGap) / shellWidth,
+      (window.innerHeight - edgeGap) / shellHeight,
+    ),
+  )
+  return Math.min(
+    viewportMaximum,
+    Math.max(MIN_PRODUCTION_PHONE_ZOOM, preferred),
+  )
+})
 const phoneResolutionStyle = computed<CSSProperties>(() => ({
   '--phone-edge-gap': `${24 * viewportScale.value}px`,
   '--phone-stack-gap': `${16 * viewportScale.value}px`,
-  '--phone-zoom':
-    phoneBaseZoom.value * (phone.preferences.settings.phoneScale / 100),
+  '--phone-zoom': phoneZoom.value,
 }))
 const phoneStageStyle = computed<CSSProperties>(() => ({
   ...phoneResolutionStyle.value,
@@ -315,6 +341,8 @@ let pendingCompaniesChange: CompanyChangedPayload | null = null
 let unlockTimer: number | undefined
 let passcodeLockTimer: number | undefined
 let unlockedServicesFrame: number | undefined
+let phoneClosePending = false
+let simPickerClosePending = false
 
 function getViewportScale(): number {
   const heightScale = window.innerHeight / REFERENCE_VIEWPORT_HEIGHT
@@ -505,7 +533,7 @@ function onMessage(event: MessageEvent<AppMessage>): void {
     hydratePhone(event.data.data as PhoneOpenPayload)
   } else if (event.data?.type === 'app:close') {
     activitySuspended.value = false
-    phone.close()
+    phone.endDeviceSession()
   } else if (event.data?.type === 'app:suspend') {
     activitySuspended.value = true
   } else if (event.data?.type === 'app:resume') {
@@ -899,14 +927,69 @@ function onMessage(event: MessageEvent<AppMessage>): void {
   }
 }
 
+async function closeSimPicker(): Promise<void> {
+  if (simPickerClosePending || !simPicker.value) return
+  simPickerClosePending = true
+  const closingPicker = simPicker.value
+  try {
+    const response = await nuiCall('sim:picker-close')
+    if (response.success && simPicker.value === closingPicker) {
+      simPicker.value = null
+    }
+  } finally {
+    simPickerClosePending = false
+  }
+}
+
+async function closePhone(): Promise<void> {
+  if (phoneClosePending || !phone.isOpen) return
+  phoneClosePending = true
+  const closingGeneration = phone.persistenceGeneration
+  const closingImei = phone.device?.imei ?? null
+  const closingToken = phone.deviceSessionToken
+  try {
+    await phone.flushDevicePersistence()
+    if (
+      !phone.isOpen ||
+      phone.persistenceGeneration !== closingGeneration ||
+      (phone.device?.imei ?? null) !== closingImei ||
+      phone.deviceSessionToken !== closingToken
+    ) {
+      return
+    }
+    const response = await nuiCall('close')
+    if (
+      !response.success ||
+      !phone.isOpen ||
+      phone.persistenceGeneration !== closingGeneration ||
+      (phone.device?.imei ?? null) !== closingImei ||
+      phone.deviceSessionToken !== closingToken
+    ) {
+      return
+    }
+    phone.endDeviceSession()
+  } finally {
+    phoneClosePending = false
+  }
+}
+
 function onKeydown(event: KeyboardEvent): void {
-  if (event.key !== 'Escape' || !phone.isOpen || activitySuspended.value) return
-  if (controlCenterOpened.value) {
-    controlCenterOpened.value = false
+  if (event.key !== 'Escape') return
+  if (simPicker.value) {
+    event.preventDefault()
+    void closeSimPicker()
     return
   }
-  phone.close()
-  void nuiCall('close')
+
+  queueMicrotask(() => {
+    if (event.defaultPrevented || !phone.isOpen || activitySuspended.value)
+      return
+    if (controlCenterOpened.value) {
+      controlCenterOpened.value = false
+      return
+    }
+    void closePhone()
+  })
 }
 
 function onSystemColorSchemeChange(event: MediaQueryListEvent): void {
@@ -1051,7 +1134,7 @@ onMounted(() => {
   window.addEventListener('resize', updateViewportScale)
   systemColorScheme.addEventListener('change', onSystemColorSchemeChange)
   phone.setSystemDarkMode(systemColorScheme.matches)
-  void nuiCall('ui:ready')
+  void nuiCall('ui:ready', { protocolVersion: 1 })
   clockTicker = setInterval(() => {
     const now = Date.now()
     for (const alarm of clock.dueAlarms(now)) {
@@ -1116,11 +1199,9 @@ watch(
 )
 
 watch(
-  [() => notifications.requiresAttention, () => calls.activeCall],
-  ([requiresAttention, activeCall]) => {
-    void nuiCall('notification:focus', {
-      active: requiresAttention || activeCall !== null,
-    })
+  () => notifications.requiresAttention,
+  (requiresAttention) => {
+    void nuiCall('notification:focus', { active: requiresAttention })
   },
 )
 
@@ -1204,7 +1285,7 @@ onBeforeUnmount(() => {
     v-if="simPicker"
     :choices="simPicker.choices"
     :number="simPicker.number"
-    @close="simPicker = null"
+    @close="closeSimPicker"
   />
   <Transition name="phone-lift" appear>
     <main
@@ -1263,7 +1344,9 @@ onBeforeUnmount(() => {
                 :style="phoneDisplayStyle"
                 :class="{
                   dark: phone.isDarkMode,
+                  'phone-app--darkchat': route.params.appId === 'darkchat',
                   'phone-app--light': !phone.isDarkMode,
+                  'phone-app--messages': route.params.appId === 'messages',
                   [`phone-app--${phone.preferences.settings.graphicsMode}`]: true,
                   'phone-app--unlocking': isUnlocking,
                 }"
diff --git a/frontend/src/components/PayphoneOverlay.vue b/frontend/src/components/PayphoneOverlay.vue
index cf547c1..eb1fbd3 100644
--- a/frontend/src/components/PayphoneOverlay.vue
+++ b/frontend/src/components/PayphoneOverlay.vue
@@ -239,6 +239,7 @@ function onKeydown(event: KeyboardEvent): void {
   if (!visible.value) return
   if (event.key === 'Escape') {
     event.preventDefault()
+    event.stopImmediatePropagation()
     void close()
     return
   }
@@ -256,7 +257,7 @@ function onKeydown(event: KeyboardEvent): void {
 onMounted(() => {
   prepareButtonSounds()
   window.addEventListener('message', onMessage)
-  window.addEventListener('keydown', onKeydown)
+  window.addEventListener('keydown', onKeydown, true)
   ticker = window.setInterval(() => {
     now.value = Date.now()
   }, 250)
@@ -264,7 +265,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('message', onMessage)
-  window.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('keydown', onKeydown, true)
   if (ticker !== undefined) window.clearInterval(ticker)
   for (const sound of buttonSounds) {
     sound.pause()
@@ -399,6 +400,7 @@ onBeforeUnmount(() => {
     rgb(0 0 0 / 84%) 72%
   );
   font-family: 'Segoe UI', Arial, sans-serif;
+  pointer-events: auto;
   user-select: none;
 }
 
diff --git a/frontend/src/components/SimPhonePicker.vue b/frontend/src/components/SimPhonePicker.vue
index f5e0a4e..6db474d 100644
--- a/frontend/src/components/SimPhonePicker.vue
+++ b/frontend/src/components/SimPhonePicker.vue
@@ -42,7 +42,6 @@ async function insert(
 }
 
 function close(): void {
-  void nuiCall('sim:picker-close')
   emit('close')
 }
 </script>
diff --git a/frontend/src/stores/banking.test.ts b/frontend/src/stores/banking.test.ts
index 338c39b..52e1062 100644
--- a/frontend/src/stores/banking.test.ts
+++ b/frontend/src/stores/banking.test.ts
@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useBankingStore } from '@/stores/banking'
 import type { BankingOverview } from '@/types/banking'
-import { nuiCall } from '@/utils/nui'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 vi.mock('@/utils/nui', () => ({ nuiCall: vi.fn() }))
 
@@ -60,4 +60,26 @@ describe('banking store', () => {
     expect(banking.overview).toEqual(overview)
     expect(banking.error).toBe('insufficient_funds')
   })
+
+  it('does not let an older response overwrite the newest overview', async () => {
+    let resolveOlder!: (response: NuiResponse<BankingOverview>) => void
+    const olderResponse = new Promise<NuiResponse<BankingOverview>>(
+      (resolve) => {
+        resolveOlder = resolve
+      },
+    )
+    const newest = { ...overview, bank: 23000 }
+    mockNuiCall
+      .mockReturnValueOnce(olderResponse)
+      .mockResolvedValueOnce({ data: newest, success: true })
+    const banking = useBankingStore()
+
+    const olderRequest = banking.load()
+    await banking.load()
+    resolveOlder({ data: { ...overview, bank: 1 }, success: true })
+    await olderRequest
+
+    expect(banking.overview).toEqual(newest)
+    expect(banking.isLoading).toBe(false)
+  })
 })
diff --git a/frontend/src/stores/banking.ts b/frontend/src/stores/banking.ts
index dab3572..4c8ba80 100644
--- a/frontend/src/stores/banking.ts
+++ b/frontend/src/stores/banking.ts
@@ -8,12 +8,21 @@ export const useBankingStore = defineStore('banking', {
     error: '',
     isLoading: false,
     overview: null as BankingOverview | null,
+    pendingRequests: 0,
+    requestGeneration: 0,
   }),
   actions: {
     async load(): Promise<boolean> {
+      const generation = ++this.requestGeneration
+      this.pendingRequests += 1
       this.isLoading = true
-      const response = await nuiCall<BankingOverview>('banking:overview')
-      this.isLoading = false
+      const response = await nuiCall<BankingOverview>('banking:overview').finally(
+        () => {
+          this.pendingRequests = Math.max(0, this.pendingRequests - 1)
+          this.isLoading = this.pendingRequests > 0
+        },
+      )
+      if (generation !== this.requestGeneration) return response.success
       if (response.success && response.data) {
         this.overview = response.data
         this.error = ''
@@ -27,12 +36,17 @@ export const useBankingStore = defineStore('banking', {
       amount: number,
       phoneNumber?: string,
     ): Promise<NuiResponse<BankingOverview>> {
+      const generation = ++this.requestGeneration
+      this.pendingRequests += 1
       this.isLoading = true
       const response = await nuiCall<BankingOverview>(`banking:${action}`, {
         amount,
         ...(phoneNumber === undefined ? {} : { phoneNumber }),
+      }).finally(() => {
+        this.pendingRequests = Math.max(0, this.pendingRequests - 1)
+        this.isLoading = this.pendingRequests > 0
       })
-      this.isLoading = false
+      if (generation !== this.requestGeneration) return response
       if (response.success && response.data) {
         this.overview = response.data
         this.error = ''
diff --git a/frontend/src/stores/mail.test.ts b/frontend/src/stores/mail.test.ts
index bcf80cc..17e7a3a 100644
--- a/frontend/src/stores/mail.test.ts
+++ b/frontend/src/stores/mail.test.ts
@@ -1,9 +1,10 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useAccountStore } from '@/stores/account'
 import { useMailStore } from '@/stores/mail'
-import type { MailCounts, MailListItem } from '@/types/mail'
-import { nuiCall } from '@/utils/nui'
+import type { MailCounts, MailListItem, MailListResponse } from '@/types/mail'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 vi.mock('@/utils/nui', () => ({
   nuiCall: vi.fn(),
@@ -45,7 +46,7 @@ describe('mail store', () => {
         success: true,
       })
       .mockResolvedValueOnce({
-        data: { hasMore: false, items: [listItem(2)] },
+        data: { hasMore: false, items: [listItem(2)], offset: 0 },
         success: true,
       })
 
@@ -129,4 +130,103 @@ describe('mail store', () => {
     expect(mail.folder).toBe('inbox')
     expect(mail.search).toBe('')
   })
+
+  it('ignores an older folder response after a newer navigation', async () => {
+    let resolveOlder!: (response: NuiResponse<MailListResponse>) => void
+    const olderResponse = new Promise<NuiResponse<MailListResponse>>(
+      (resolve) => {
+        resolveOlder = resolve
+      },
+    )
+    mockNuiCall
+      .mockReturnValueOnce(olderResponse)
+      .mockResolvedValueOnce({
+        data: { hasMore: false, items: [listItem(2)] },
+        success: true,
+      })
+    const mail = useMailStore()
+
+    const olderRequest = mail.loadFolder('inbox')
+    await mail.loadFolder('sent')
+    resolveOlder({
+      data: { hasMore: false, items: [listItem(1)], offset: 0 },
+      success: true,
+    })
+    await olderRequest
+
+    expect(mail.folder).toBe('sent')
+    expect(mail.items.map((item) => item.id)).toEqual([2])
+    expect(mail.loading).toBe(false)
+  })
+
+  it('ignores mailbox counts returned after the session was cleared', async () => {
+    let resolveCounts!: (response: NuiResponse<MailCounts>) => void
+    mockNuiCall.mockReturnValueOnce(
+      new Promise<NuiResponse<MailCounts>>((resolve) => {
+        resolveCounts = resolve
+      }),
+    )
+    const mail = useMailStore()
+
+    const bootstrap = mail.bootstrap('alex@ifruit.com')
+    await mail.bootstrap('')
+    resolveCounts({ data: counts, success: true })
+    await bootstrap
+
+    expect(mail.accountEmail).toBe('')
+    expect(mail.counts).toEqual({
+      drafts: 0,
+      inbox: 0,
+      sent: 0,
+      trash: 0,
+      unread: 0,
+    })
+  })
+
+  it('ignores a late login after the mailbox session was cleared', async () => {
+    let resolveLogin!: (response: NuiResponse<{ devices: []; email: string }>) => void
+    mockNuiCall.mockReturnValueOnce(
+      new Promise<NuiResponse<{ devices: []; email: string }>>((resolve) => {
+        resolveLogin = resolve
+      }),
+    )
+    const mail = useMailStore()
+    const account = useAccountStore()
+
+    const login = mail.login('alex', 'secret')
+    await mail.bootstrap('')
+    resolveLogin({
+      data: { devices: [], email: 'alex@ifruit.com' },
+      success: true,
+    })
+    await login
+
+    expect(mail.accountEmail).toBe('')
+    expect(account.email).toBe('')
+  })
+
+  it('ignores a late login after an external mailbox session change', async () => {
+    let resolveLogin!: (response: NuiResponse<{ devices: []; email: string }>) => void
+    mockNuiCall
+      .mockReturnValueOnce(
+        new Promise<NuiResponse<{ devices: []; email: string }>>((resolve) => {
+          resolveLogin = resolve
+        }),
+      )
+      .mockResolvedValueOnce({ data: counts, success: true })
+    const mail = useMailStore()
+    const account = useAccountStore()
+
+    const login = mail.login('alex', 'secret')
+    account.hydrate({ devices: [], email: 'morgan@ifruit.com' })
+    await mail.bootstrap('morgan@ifruit.com')
+    resolveLogin({
+      data: { devices: [], email: 'alex@ifruit.com' },
+      success: true,
+    })
+    await login
+
+    expect(mail.accountEmail).toBe('morgan@ifruit.com')
+    expect(account.email).toBe('morgan@ifruit.com')
+  })
 })
diff --git a/frontend/src/stores/mail.ts b/frontend/src/stores/mail.ts
index 238bea6..01a4c5b 100644
--- a/frontend/src/stores/mail.ts
+++ b/frontend/src/stores/mail.ts
@@ -31,14 +31,21 @@ export const useMailStore = defineStore('mail', () => {
   const items = ref<MailListItem[]>([])
   const loading = ref(false)
   const search = ref('')
+  let authenticationGeneration = 0
+  let folderRequestGeneration = 0
+  let sessionGeneration = 0
 
   function clearSession(): void {
+    authenticationGeneration += 1
+    sessionGeneration += 1
+    folderRequestGeneration += 1
     accountEmail.value = ''
     counts.value = emptyCounts()
     items.value = []
     hasMore.value = false
     folder.value = 'inbox'
     search.value = ''
+    loading.value = false
   }
 
   async function bootstrap(email: string): Promise<void> {
@@ -46,16 +53,24 @@ export const useMailStore = defineStore('mail', () => {
       clearSession()
       return
     }
+    authenticationGeneration += 1
+    sessionGeneration += 1
+    folderRequestGeneration += 1
     accountEmail.value = email
     await refreshCounts()
   }
 
   async function login(email: string, password: string) {
+    const generation = ++authenticationGeneration
     const response = await nuiCall<IfruitAccount>('mail:login', {
       email,
       password,
     })
-    if (response.success && response.data) {
+    if (
+      generation === authenticationGeneration &&
+      response.success &&
+      response.data
+    ) {
       account.hydrate(response.data)
       await bootstrap(response.data.email)
     }
@@ -63,11 +78,16 @@ export const useMailStore = defineStore('mail', () => {
   }
 
   async function register(email: string, password: string) {
+    const generation = ++authenticationGeneration
     const response = await nuiCall<IfruitAccount>('mail:register', {
       email,
       password,
     })
-    if (response.success && response.data) {
+    if (
+      generation === authenticationGeneration &&
+      response.success &&
+      response.data
+    ) {
       account.hydrate(response.data)
       await bootstrap(response.data.email)
     }
@@ -75,10 +95,13 @@ export const useMailStore = defineStore('mail', () => {
   }
 
   async function logout(): Promise<void> {
+    const generation = ++authenticationGeneration
     if (accountEmail.value) {
       const response = await nuiCall('mail:logout')
+      if (generation !== authenticationGeneration) return
       if (response.success) account.hydrate(null)
     }
+    if (generation !== authenticationGeneration) return
     clearSession()
   }
 
@@ -87,6 +110,8 @@ export const useMailStore = defineStore('mail', () => {
     nextSearch = '',
     append = false,
   ): Promise<boolean> {
+    const generation = ++folderRequestGeneration
+    const session = sessionGeneration
     loading.value = true
     const offset = append ? items.value.length : 0
     const response = await nuiCall<MailListResponse>('mail:list', {
@@ -94,7 +119,13 @@ export const useMailStore = defineStore('mail', () => {
       offset,
       search: nextSearch,
     })
-    loading.value = false
+    if (generation === folderRequestGeneration) loading.value = false
+    if (
+      generation !== folderRequestGeneration ||
+      session !== sessionGeneration
+    ) {
+      return false
+    }
     if (!response.success || !response.data) return false
 
     folder.value = nextFolder
@@ -107,8 +138,17 @@ export const useMailStore = defineStore('mail', () => {
   }
 
   async function refreshCounts(): Promise<void> {
+    const email = accountEmail.value
+    const session = sessionGeneration
     const response = await nuiCall<MailCounts>('mail:counts')
-    if (response.success && response.data) counts.value = response.data
+    if (
+      session === sessionGeneration &&
+      email === accountEmail.value &&
+      response.success &&
+      response.data
+    ) {
+      counts.value = response.data
+    }
   }
 
   async function openMessage(id: number): Promise<MailMessage | null> {
diff --git a/frontend/src/stores/notifications.test.ts b/frontend/src/stores/notifications.test.ts
index e38b885..59eff5f 100644
--- a/frontend/src/stores/notifications.test.ts
+++ b/frontend/src/stores/notifications.test.ts
@@ -2,6 +2,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
+  MAX_LOCK_SCREEN_NOTIFICATIONS,
   useNotificationsStore,
   type PhoneNotificationDevice,
 } from '@/stores/notifications'
@@ -256,4 +257,26 @@ describe('notifications store', () => {
     notifications.clearLockScreen()
     expect(notifications.lockScreenNotifications).toEqual([])
   })
+
+  it('bounds persisted lock screen history to the newest notifications', () => {
+    openPhone('111')
+    const notifications = useNotificationsStore()
+    const items = Array.from(
+      { length: MAX_LOCK_SCREEN_NOTIFICATIONS + 10 },
+      (_, index) => ({
+        appId: 'mail' as const,
+        id: `saved-${index}`,
+        text: `Message ${index}`,
+        title: 'Mail',
+      }),
+    )
+
+    notifications.hydrate({ items, version: 1 }, '111')
+
+    expect(notifications.lockScreenNotifications).toHaveLength(
+      MAX_LOCK_SCREEN_NOTIFICATIONS,
+    )
+    expect(notifications.lockScreenNotifications[0]?.id).toBe('saved-59')
+    expect(notifications.lockScreenNotifications.at(-1)?.id).toBe('saved-10')
+  })
 })
diff --git a/frontend/src/stores/notifications.ts b/frontend/src/stores/notifications.ts
index 1487a2c..2777000 100644
--- a/frontend/src/stores/notifications.ts
+++ b/frontend/src/stores/notifications.ts
@@ -43,6 +43,8 @@ type PersistedNotificationsV1 = {
   version: 1
 }
 
+export const MAX_LOCK_SCREEN_NOTIFICATIONS = 50
+
 const timeoutHandles = new Map<string, ReturnType<typeof setTimeout>>()
 const stopToneHandles = new Map<string, () => void>()
 const persistenceQueues = new Map<string, Promise<void>>()
@@ -151,7 +153,9 @@ export const useNotificationsStore = defineStore('notifications', () => {
     for (const notification of stored) merged.set(notification.id, notification)
     for (const notification of lockScreenQueues.value[imei] ?? [])
       merged.set(notification.id, notification)
-    lockScreenQueues.value[imei] = [...merged.values()]
+    lockScreenQueues.value[imei] = [...merged.values()].slice(
+      -MAX_LOCK_SCREEN_NOTIFICATIONS,
+    )
     persist(imei)
   }
 
@@ -166,9 +170,10 @@ export const useNotificationsStore = defineStore('notifications', () => {
   function remember(notification: PhoneNotification): void {
     const imei = notification.device?.imei ?? phone.device?.imei
     if (!imei) return
-    const notifications = lockScreenQueues.value[imei] ?? []
-    notifications.push(notification)
-    lockScreenQueues.value[imei] = notifications
+    lockScreenQueues.value[imei] = [
+      ...(lockScreenQueues.value[imei] ?? []),
+      notification,
+    ].slice(-MAX_LOCK_SCREEN_NOTIFICATIONS)
     persist(imei)
   }
 
diff --git a/frontend/src/stores/phone-persistence.test.ts b/frontend/src/stores/phone-persistence.test.ts
new file mode 100644
index 0000000..1c4027a
--- /dev/null
+++ b/frontend/src/stores/phone-persistence.test.ts
@@ -0,0 +1,170 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { usePhoneStore } from '@/stores/phone'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
+
+vi.mock('@/utils/nui', () => ({
+  nuiCall: vi.fn(),
+}))
+
+const mockNuiCall = vi.mocked(nuiCall)
+
+function deferredResponse<T>(): {
+  promise: Promise<NuiResponse<T>>
+  resolve: (response: NuiResponse<T>) => void
+} {
+  let resolve!: (response: NuiResponse<T>) => void
+  const promise = new Promise<NuiResponse<T>>((next) => {
+    resolve = next
+  })
+  return { promise, resolve }
+}
+
+function openPhone(imei: string, token: string, revision: number): void {
+  usePhoneStore().open({
+    device: {
+      data: { settings: { payload: {}, revision } },
+      imei,
+      name: `Phone ${imei}`,
+      sim: null,
+    },
+    token,
+  })
+}
+
+describe('phone device persistence scope', () => {
+  beforeEach(() => {
+    vi.stubGlobal('window', {
+      matchMedia: vi.fn(() => ({ matches: false })),
+    })
+    setActivePinia(createPinia())
+    mockNuiCall.mockReset()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('does not apply a late save response to a newer device session', async () => {
+    const stale = deferredResponse<{ revision: number }>()
+    mockNuiCall.mockReturnValueOnce(stale.promise)
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 2)
+
+    phone.saveDeviceNamespace('settings', { value: 'old' })
+    await Promise.resolve()
+    expect(mockNuiCall).toHaveBeenCalledWith('device:save', {
+      imei: '111',
+      namespace: 'settings',
+      payload: { value: 'old' },
+      revision: 2,
+      sessionToken: 'session-a',
+    })
+
+    openPhone('222', 'session-b', 7)
+    stale.resolve({ data: { revision: 3 }, success: true })
+    await stale.promise
+    await Promise.resolve()
+
+    expect(phone.device?.imei).toBe('222')
+    expect(phone.deviceRevisions.settings).toBe(7)
+  })
+
+  it('drops queued writes from an obsolete device generation', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    mockNuiCall.mockReturnValueOnce(first.promise)
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    phone.saveDeviceNamespace('settings', { order: 2 })
+    await Promise.resolve()
+    openPhone('222', 'session-b', 0)
+    first.resolve({ data: { revision: 1 }, success: true })
+    await first.promise
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(1)
+  })
+
+  it('flushes every queued write after a normal visibility close', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    mockNuiCall
+      .mockReturnValueOnce(first.promise)
+      .mockResolvedValueOnce({ data: { revision: 2 }, success: true })
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    phone.saveDeviceNamespace('settings', { order: 2 })
+    await Promise.resolve()
+    phone.close()
+    const flushed = phone.flushDevicePersistence()
+
+    first.resolve({ data: { revision: 1 }, success: true })
+    await flushed
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(2)
+    expect(mockNuiCall).toHaveBeenLastCalledWith('device:save', {
+      imei: '111',
+      namespace: 'settings',
+      payload: { order: 2 },
+      revision: 1,
+      sessionToken: 'session-a',
+    })
+    expect(phone.deviceRevisions.settings).toBe(2)
+  })
+
+  it('keeps queued writes scoped across a same-session bootstrap update', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    mockNuiCall
+      .mockReturnValueOnce(first.promise)
+      .mockResolvedValueOnce({ data: { revision: 2 }, success: true })
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    phone.saveDeviceNamespace('settings', { order: 2 })
+    await Promise.resolve()
+    first.resolve({ data: { revision: 1 }, success: true })
+    await first.promise
+    await Promise.resolve()
+    openPhone('111', 'session-a', 1)
+    await phone.flushDevicePersistence()
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(2)
+    expect(phone.deviceRevisions.settings).toBe(2)
+  })
+
+  it('waits for writes queued while a persistence flush is in progress', async () => {
+    const first = deferredResponse<{ revision: number }>()
+    const queuedDuringFlush = deferredResponse<{ revision: number }>()
+    mockNuiCall
+      .mockReturnValueOnce(first.promise)
+      .mockReturnValueOnce(queuedDuringFlush.promise)
+    const phone = usePhoneStore()
+    openPhone('111', 'session-a', 0)
+
+    phone.saveDeviceNamespace('settings', { order: 1 })
+    await Promise.resolve()
+    let flushCompleted = false
+    const flushed = phone.flushDevicePersistence().then(() => {
+      flushCompleted = true
+    })
+    phone.saveDeviceNamespace('widgets', { order: 2 })
+    await Promise.resolve()
+
+    first.resolve({ data: { revision: 1 }, success: true })
+    await first.promise
+    await Promise.resolve()
+    expect(flushCompleted).toBe(false)
+
+    queuedDuringFlush.resolve({ data: { revision: 1 }, success: true })
+    await flushed
+
+    expect(mockNuiCall).toHaveBeenCalledTimes(2)
+    expect(phone.deviceRevisions.widgets).toBe(1)
+  })
+})
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 8fdfddb..dd8263a 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -12,6 +12,7 @@ import { nuiCall } from '@/utils/nui'
 import type { NuiResponse } from '@/utils/nui'
 import {
   DEFAULT_PHONE_PREFERENCES,
+  clampPhoneScale,
   ensureAppNotificationPreferences,
   parsePhonePreferences,
   type AppNotificationPreferences,
@@ -38,6 +39,7 @@ export type PhoneOpenPayload = {
 }
 
 const namespaceQueues = new Map<string, Promise<void>>()
+let nextPersistenceSession = 0
 
 const companiesFallbackLocales = {
   name: 'Companies',
@@ -3617,11 +3619,14 @@ export const usePhoneStore = defineStore('phone', {
     currentPage: 1,
     device: null as PhoneDevice | null,
     deviceRevisions: {} as Record<string, number>,
+    deviceSessionToken: null as string | null,
     isOpen: false,
     lang: 'en',
     launchOrigin: null as AppLaunchOrigin | null,
     locales: defaultLocales,
     preferences: cloneJsonData(DEFAULT_PHONE_PREFERENCES),
+    persistenceGeneration: 0,
+    persistenceSession: ++nextPersistenceSession,
     security: {
       enabled: false,
       length: null,
@@ -3642,6 +3647,15 @@ export const usePhoneStore = defineStore('phone', {
       this.isOpen = false
     },
     open(payload: PhoneOpenPayload = {}): void {
+      const nextImei = payload.device?.imei ?? this.device?.imei ?? null
+      const nextToken = payload.token ?? this.deviceSessionToken
+      if (
+        nextImei !== (this.device?.imei ?? null) ||
+        nextToken !== this.deviceSessionToken
+      ) {
+        this.persistenceGeneration += 1
+      }
+      this.deviceSessionToken = nextToken
       this.lang = payload.lang ?? 'en'
       this.locales = payload.locales ?? defaultLocales
       if (payload.device) this.hydrateDevice(payload.device)
@@ -3652,6 +3666,13 @@ export const usePhoneStore = defineStore('phone', {
       }
       this.isOpen = true
     },
+    endDeviceSession(): void {
+      this.close()
+      if (this.deviceSessionToken !== null) {
+        this.deviceSessionToken = null
+        this.persistenceGeneration += 1
+      }
+    },
     hydrateDevice(device: PhoneDevice): void {
       this.device = device
       this.deviceRevisions = Object.fromEntries(
@@ -3665,22 +3686,59 @@ export const usePhoneStore = defineStore('phone', {
       )
     },
     saveDeviceNamespace(namespace: string, payload: unknown): void {
-      const previous = namespaceQueues.get(namespace) ?? Promise.resolve()
+      const imei = this.device?.imei
+      if (!imei) {
+        console.error(
+          `[Phone persistence] Could not save ${namespace} without an active device.`,
+        )
+        return
+      }
+      const generation = this.persistenceGeneration
+      const session = this.persistenceSession
+      const token = this.deviceSessionToken
+      const queuedPayload = cloneJsonData(payload)
+      const queueKey = `${session}:${generation}:${imei}:${namespace}`
+      const isCurrentScope = (): boolean =>
+        this.persistenceSession === session &&
+        this.persistenceGeneration === generation &&
+        this.device?.imei === imei &&
+        this.deviceSessionToken === token
+      const previous = namespaceQueues.get(queueKey) ?? Promise.resolve()
       const queued = previous.then(async () => {
+        if (!isCurrentScope()) return
         const response = await nuiCall<{ revision: number }>('device:save', {
+          imei,
           namespace,
-          payload,
+          payload: queuedPayload,
           revision: this.deviceRevisions[namespace] ?? 0,
+          sessionToken: token,
         })
-        if (response.success && response.data) {
-          this.deviceRevisions[namespace] = response.data.revision
+        if (
+          isCurrentScope() &&
+          response.success &&
+          Number.isInteger(response.data?.revision) &&
+          Number(response.data?.revision) >= 0
+        ) {
+          this.deviceRevisions[namespace] = Number(response.data?.revision)
         }
       })
       const tracked = queued.finally(() => {
-        if (namespaceQueues.get(namespace) === tracked)
-          namespaceQueues.delete(namespace)
+        if (namespaceQueues.get(queueKey) === tracked)
+          namespaceQueues.delete(queueKey)
       })
-      namespaceQueues.set(namespace, tracked)
+      namespaceQueues.set(queueKey, tracked)
+    },
+    async flushDevicePersistence(): Promise<void> {
+      const imei = this.device?.imei
+      if (!imei) return
+      const queuePrefix = `${this.persistenceSession}:${this.persistenceGeneration}:${imei}:`
+      while (true) {
+        const activeQueues = [...namespaceQueues.entries()]
+          .filter(([key]) => key.startsWith(queuePrefix))
+          .map(([, queue]) => queue)
+        if (!activeQueues.length) return
+        await Promise.all(activeQueues)
+      }
     },
     setCurrentPage(page: number, pageCount?: number): void {
       this.currentPage = clampPage(page, pageCount)
@@ -3706,7 +3764,11 @@ export const usePhoneStore = defineStore('phone', {
       key: K,
       value: PhonePreferencesV1['settings'][K],
     ): void {
-      this.preferences.settings[key] = value
+      this.preferences.settings[key] = (
+        key === 'phoneScale'
+          ? clampPhoneScale(Number(value))
+          : value
+      ) as PhonePreferencesV1['settings'][K]
       this.saveDeviceNamespace('settings', this.preferences)
     },
     setAlertVolumes(value: number): void {
diff --git a/frontend/src/utils/nui.test.ts b/frontend/src/utils/nui.test.ts
new file mode 100644
index 0000000..39dc5e2
--- /dev/null
+++ b/frontend/src/utils/nui.test.ts
@@ -0,0 +1,63 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { nuiCall } from '@/utils/nui'
+
+describe('nuiCall', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.stubGlobal('window', {
+      clearTimeout: globalThis.clearTimeout,
+      location: { search: '' },
+      setTimeout: globalThis.setTimeout,
+    })
+    vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('clears the request timeout after a successful callback', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ data: { value: 1 }, success: true }), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 200,
+      }),
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(nuiCall<{ value: number }>('test')).resolves.toEqual({
+      data: { value: 1 },
+      success: true,
+    })
+    expect(vi.getTimerCount()).toBe(0)
+    expect(fetchMock).toHaveBeenCalledWith(
+      'http://localhost:3002/api/test',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    )
+  })
+
+  it('aborts a callback that never completes', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn((_url: string, init?: RequestInit) =>
+        new Promise<Response>((_resolve, reject) => {
+          init?.signal?.addEventListener('abort', () => {
+            reject(new DOMException('Aborted', 'AbortError'))
+          })
+        }),
+      ),
+    )
+
+    const request = nuiCall('never-responds')
+    await vi.advanceTimersByTimeAsync(20_000)
+
+    await expect(request).resolves.toEqual({
+      error: 'request_timeout',
+      success: false,
+    })
+    expect(vi.getTimerCount()).toBe(0)
+  })
+})
diff --git a/frontend/src/utils/nui.ts b/frontend/src/utils/nui.ts
index 22ecce7..eecee7e 100644
--- a/frontend/src/utils/nui.ts
+++ b/frontend/src/utils/nui.ts
@@ -1,4 +1,5 @@
 const resourceName = globalThis.window?.GetParentResourceName?.() ?? 'sky_phone'
+const requestTimeoutMs = 20_000
 
 export type NuiResponse<T = unknown> = {
   success: boolean
@@ -24,12 +25,15 @@ export async function nuiCall<T = unknown>(
           undefined,
       }
     : data
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), requestTimeoutMs)
 
   try {
     const response = await fetch(`${baseUrl}/${endpoint}`, {
       body: JSON.stringify(requestData),
       headers: { 'Content-Type': 'application/json' },
       method: 'POST',
+      signal: controller.signal,
     })
 
     if (!response.ok) {
@@ -41,8 +45,14 @@ export async function nuiCall<T = unknown>(
     const body = await response.text()
     return body ? (JSON.parse(body) as NuiResponse<T>) : { success: true }
   } catch (error) {
-    const message = error instanceof Error ? error.message : 'Unknown error'
+    const message = controller.signal.aborted
+      ? 'request_timeout'
+      : error instanceof Error
+        ? error.message
+        : 'Unknown error'
     console.error(`[NUI] ${endpoint} failed:`, error)
     return { error: message, success: false }
+  } finally {
+    window.clearTimeout(timeoutId)
   }
 }
diff --git a/sky_phone/config/payphones.lua b/sky_phone/config/payphones.lua
new file mode 100644
index 0000000..e2a3ecd
--- /dev/null
+++ b/sky_phone/config/payphones.lua
@@ -0,0 +1,248 @@
+-- Server-owned vanilla payphone positions used for authoritative proximity checks.
+-- Generated from DurtyFree/gta-v-data-dumps worldPublicPhones.json at commit b65684e00f689fdec405c5f1055322c802d3c895.
+-- Add custom-map booths here; their model must also be listed in Config.Payphones.Props.
+Config.Payphones.Locations = {
+    { model = "prop_phonebox_01a", coords = { x = -1819.2284, y = 796.32294, z = 137.12784 } },
+    { model = "prop_phonebox_01a", coords = { x = -1773.0256, y = -503.15234, z = 37.80706 } },
+    { model = "prop_phonebox_01a", coords = { x = -1772.2114, y = -504.00488, z = 37.81461 } },
+    { model = "prop_phonebox_01a", coords = { x = -1457.3734, y = -148.68604, z = 48.7486 } },
+    { model = "prop_phonebox_01a", coords = { x = -1456.838, y = -149.31949, z = 48.68604 } },
+    { model = "prop_phonebox_01a", coords = { x = -1456.3501, y = -149.95428, z = 48.61642 } },
+    { model = "prop_phonebox_01a", coords = { x = -1438.6545, y = -210.77448, z = 47.10766 } },
+    { model = "prop_phonebox_01a", coords = { x = -1418.2983, y = -291.36002, z = 42.96778 } },
+    { model = "prop_phonebox_01a", coords = { x = -1417.4769, y = -290.64453, z = 42.93899 } },
+    { model = "prop_phonebox_01a", coords = { x = -1416.5211, y = -289.8119, z = 42.90134 } },
+    { model = "prop_phonebox_01a", coords = { x = -1318.0975, y = -380.79547, z = 35.73553 } },
+    { model = "prop_phonebox_01a", coords = { x = -1316.9534, y = -378.42676, z = 35.74885 } },
+    { model = "prop_phonebox_01a", coords = { x = -1316.2688, y = -378.07245, z = 35.73169 } },
+    { model = "prop_phonebox_01a", coords = { x = -1315.5924, y = -377.7347, z = 35.72274 } },
+    { model = "prop_phonebox_01a", coords = { x = -1261.6484, y = -519.13086, z = 30.83657 } },
+    { model = "prop_phonebox_01a", coords = { x = -1260.9482, y = -519.9344, z = 30.75686 } },
+    { model = "prop_phonebox_01a", coords = { x = -1260.0995, y = -520.9083, z = 30.66707 } },
+    { model = "prop_phonebox_01a", coords = { x = -1121.5917, y = -825.6313, z = 14.94339 } },
+    { model = "prop_phonebox_01a", coords = { x = -1120.9409, y = -825.0698, z = 14.98657 } },
+    { model = "prop_phonebox_01a", coords = { x = -1120.2446, y = -824.4812, z = 15.06407 } },
+    { model = "prop_phonebox_01a", coords = { x = -1079.6154, y = -451.0622, z = 35.6144 } },
+    { model = "prop_phonebox_01a", coords = { x = -1079.23, y = -451.8739, z = 35.62138 } },
+    { model = "prop_phonebox_01a", coords = { x = -1078.874, y = -452.55182, z = 35.62138 } },
+    { model = "prop_phonebox_01a", coords = { x = -956.56256, y = -403.17123, z = 36.81676 } },
+    { model = "prop_phonebox_01a", coords = { x = -956.1004, y = -404.09232, z = 36.81755 } },
+    { model = "prop_phonebox_01a", coords = { x = -524.4403, y = -300.71704, z = 34.26753 } },
+    { model = "prop_phonebox_01a", coords = { x = -523.64453, y = -300.41074, z = 34.26273 } },
+    { model = "prop_phonebox_01a", coords = { x = -522.872, y = -300.1134, z = 34.25807 } },
+    { model = "prop_phonebox_01a", coords = { x = -449.44238, y = -272.8244, z = 34.93996 } },
+    { model = "prop_phonebox_01a", coords = { x = -448.8816, y = -274.12805, z = 34.96191 } },
+    { model = "prop_phonebox_01a", coords = { x = -448.36926, y = -275.31906, z = 34.96507 } },
+    { model = "prop_phonebox_01a", coords = { x = -329.23917, y = 6224.885, z = 30.47861 } },
+    { model = "prop_phonebox_01a", coords = { x = -310.30554, y = 6205.3, z = 30.4465 } },
+    { model = "prop_phonebox_01a", coords = { x = -280.64215, y = 6224.2314, z = 30.45544 } },
+    { model = "prop_phonebox_01a", coords = { x = -243.25082, y = 279.90717, z = 91.04989 } },
+    { model = "prop_phonebox_01a", coords = { x = -234.61494, y = 6176.931, z = 30.43884 } },
+    { model = "prop_phonebox_01a", coords = { x = -233.6865, y = 6176.0547, z = 30.43884 } },
+    { model = "prop_phonebox_01a", coords = { x = -184.35658, y = 6331.4697, z = 30.48767 } },
+    { model = "prop_phonebox_01a", coords = { x = -183.68753, y = 6332.1597, z = 30.48987 } },
+    { model = "prop_phonebox_01a", coords = { x = -154.76048, y = 6352.27, z = 30.56079 } },
+    { model = "prop_phonebox_01a", coords = { x = -153.88358, y = 6351.417, z = 30.56079 } },
+    { model = "prop_phonebox_01a", coords = { x = -119.91727, y = 6287.283, z = 30.45911 } },
+    { model = "prop_phonebox_01a", coords = { x = -119.44898, y = 6286.768, z = 30.45911 } },
+    { model = "prop_phonebox_01a", coords = { x = -92.08037, y = 6462.644, z = 30.44397 } },
+    { model = "prop_phonebox_01a", coords = { x = -90.61212, y = 6464.0566, z = 30.44397 } },
+    { model = "prop_phonebox_01a", coords = { x = -46.3855, y = 6511.0156, z = 30.44861 } },
+    { model = "prop_phonebox_01a", coords = { x = -25.6331, y = 6495.123, z = 30.48767 } },
+    { model = "prop_phonebox_01a", coords = { x = -24.59157, y = 6496.0537, z = 30.48767 } },
+    { model = "prop_phonebox_01a", coords = { x = 110.07694, y = -1694.206, z = 28.29156 } },
+    { model = "prop_phonebox_01a", coords = { x = 136.9704, y = 196.05042, z = 105.73364 } },
+    { model = "prop_phonebox_01a", coords = { x = 137.75732, y = 195.764, z = 105.70988 } },
+    { model = "prop_phonebox_01a", coords = { x = 138.48807, y = 195.49808, z = 105.69342 } },
+    { model = "prop_phonebox_01a", coords = { x = 173.45892, y = -1547.1165, z = 28.25158 } },
+    { model = "prop_phonebox_01a", coords = { x = 215.71725, y = -1783.2102, z = 27.99637 } },
+    { model = "prop_phonebox_01a", coords = { x = 215.94612, y = -1518.9603, z = 28.29362 } },
+    { model = "prop_phonebox_01a", coords = { x = 228.6216, y = -1545.9579, z = 28.28108 } },
+    { model = "prop_phonebox_01a", coords = { x = 229.1375, y = -1545.6771, z = 28.28108 } },
+    { model = "prop_phonebox_01a", coords = { x = 295.67847, y = -1360.8624, z = 30.91401 } },
+    { model = "prop_phonebox_01a", coords = { x = 296.17984, y = -1360.2825, z = 30.91899 } },
+    { model = "prop_phonebox_01a", coords = { x = 532.401, y = -151.79816, z = 56.07613 } },
+    { model = "prop_phonebox_01a", coords = { x = 539.5577, y = -166.04846, z = 53.4862 } },
+    { model = "prop_phonebox_01a", coords = { x = 812.21716, y = -289.03873, z = 65.46264 } },
+    { model = "prop_phonebox_01a", coords = { x = 812.3678, y = -289.84793, z = 65.46264 } },
+    { model = "prop_phonebox_01a", coords = { x = 819.023, y = -94.03439, z = 79.57648 } },
+    { model = "prop_phonebox_01a", coords = { x = 819.37396, y = -93.47577, z = 79.57648 } },
+    { model = "prop_phonebox_01a", coords = { x = 891.8809, y = -140.80609, z = 76.11372 } },
+    { model = "prop_phonebox_01a", coords = { x = 963.6167, y = -142.79822, z = 73.46588 } },
+    { model = "prop_phonebox_01a", coords = { x = 1079.2015, y = -776.68054, z = 57.25418 } },
+    { model = "prop_phonebox_01a", coords = { x = 1156.3375, y = -776.99866, z = 56.58559 } },
+    { model = "prop_phonebox_01a", coords = { x = 1159.7463, y = -374.87518, z = 66.51784 } },
+    { model = "prop_phonebox_01a", coords = { x = 1166.4825, y = -321.59958, z = 68.25383 } },
+    { model = "prop_phonebox_01a", coords = { x = 1169.4127, y = 2702.8025, z = 36.99265 } },
+    { model = "prop_phonebox_01a", coords = { x = 1170.3059, y = -455.76053, z = 65.49249 } },
+    { model = "prop_phonebox_01a", coords = { x = 1172.7772, y = -297.61606, z = 68.01613 } },
+    { model = "prop_phonebox_01a", coords = { x = 1172.8646, y = -298.23972, z = 68.01981 } },
+    { model = "prop_phonebox_01a", coords = { x = 1173.8961, y = -421.43643, z = 66.07632 } },
+    { model = "prop_phonebox_01a", coords = { x = 1201.426, y = -488.8848, z = 64.67129 } },
+    { model = "prop_phonebox_01a", coords = { x = 1222.6125, y = -397.32706, z = 67.32355 } },
+    { model = "prop_phonebox_01a", coords = { x = 1801.4076, y = 4597.0137, z = 36.67796 } },
+    { model = "prop_phonebox_01a", coords = { x = 2558.9167, y = 367.14368, z = 107.63403 } },
+    { model = "prop_phonebox_01b", coords = { x = -1684.4233, y = -266.45306, z = 50.89204 } },
+    { model = "prop_phonebox_01b", coords = { x = -1683.9019, y = -265.70874, z = 50.89204 } },
+    { model = "prop_phonebox_01b", coords = { x = -1543.9277, y = -433.13232, z = 34.57933 } },
+    { model = "prop_phonebox_01b", coords = { x = -1543.0599, y = -432.05966, z = 34.58469 } },
+    { model = "prop_phonebox_01b", coords = { x = -1522.4791, y = -407.05118, z = 34.58695 } },
+    { model = "prop_phonebox_01b", coords = { x = -1412.1201, y = -383.80542, z = 35.68469 } },
+    { model = "prop_phonebox_01b", coords = { x = -1205.1965, y = -1393.6274, z = 3.07721 } },
+    { model = "prop_phonebox_01b", coords = { x = -1150.6671, y = -1392.6455, z = 4.11812 } },
+    { model = "prop_phonebox_01b", coords = { x = -1142.0598, y = -725.3442, z = 19.77577 } },
+    { model = "prop_phonebox_01b", coords = { x = -1080.87, y = -2574.942, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -1061.7015, y = -2541.7412, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -1061.5474, y = -2541.4744, z = 19.15571 } },
+    { model = "prop_phonebox_01b", coords = { x = -1046.9408, y = -2516.175, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -1046.8787, y = -2516.0674, z = 19.15571 } },
+    { model = "prop_phonebox_01b", coords = { x = -1034.5115, y = -2494.6467, z = 19.15571 } },
+    { model = "prop_phonebox_01b", coords = { x = -1024.4517, y = -2477.2227, z = 12.91528 } },
+    { model = "prop_phonebox_01b", coords = { x = -765.40045, y = -848.8706, z = 21.11398 } },
+    { model = "prop_phonebox_01b", coords = { x = -764.83673, y = -848.8654, z = 21.13071 } },
+    { model = "prop_phonebox_01b", coords = { x = -756.90735, y = 5586.8223, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -756.90735, y = 5587.636, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -745.72156, y = 5558.714, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -743.95874, y = 5558.714, z = 35.71351 } },
+    { model = "prop_phonebox_01b", coords = { x = -715.921, y = 123.33502, z = 54.99648 } },
+    { model = "prop_phonebox_01b", coords = { x = -715.40906, y = 123.65546, z = 55.01274 } },
+    { model = "prop_phonebox_01b", coords = { x = -700.7271, y = -916.8699, z = 18.21408 } },
+    { model = "prop_phonebox_01b", coords = { x = -700.1226, y = -916.8699, z = 18.21408 } },
+    { model = "prop_phonebox_01b", coords = { x = -685.93774, y = -854.8967, z = 22.88396 } },
+    { model = "prop_phonebox_01b", coords = { x = -670.3093, y = -819.59973, z = 23.4098 } },
+    { model = "prop_phonebox_01b", coords = { x = -669.60815, y = -819.6056, z = 23.42427 } },
+    { model = "prop_phonebox_01b", coords = { x = -668.81213, y = -819.6378, z = 23.43811 } },
+    { model = "prop_phonebox_01b", coords = { x = -665.19354, y = -670.83777, z = 30.40002 } },
+    { model = "prop_phonebox_01b", coords = { x = -664.59607, y = -670.8341, z = 30.40393 } },
+    { model = "prop_phonebox_01b", coords = { x = -663.99866, y = -670.83044, z = 30.41797 } },
+    { model = "prop_phonebox_01b", coords = { x = -655.2001, y = -859.74493, z = 23.50043 } },
+    { model = "prop_phonebox_01b", coords = { x = -654.1605, y = -707.27155, z = 28.40153 } },
+    { model = "prop_phonebox_01b", coords = { x = -654.1605, y = -706.51654, z = 28.47383 } },
+    { model = "prop_phonebox_01b", coords = { x = -654.1605, y = -705.7615, z = 28.54753 } },
+    { model = "prop_phonebox_01b", coords = { x = -611.56744, y = -2237.6104, z = 5.10603 } },
+    { model = "prop_phonebox_01b", coords = { x = -530.0182, y = -1286.1543, z = 25.03622 } },
+    { model = "prop_phonebox_01b", coords = { x = -529.77765, y = -1285.6444, z = 25.04207 } },
+    { model = "prop_phonebox_01b", coords = { x = -529.6009, y = -1286.3458, z = 25.04428 } },
+    { model = "prop_phonebox_01b", coords = { x = -529.36365, y = -1285.8345, z = 25.03622 } },
+    { model = "prop_phonebox_01b", coords = { x = -468.24023, y = -396.44247, z = 32.8951 } },
+    { model = "prop_phonebox_01b", coords = { x = -467.58286, y = -396.50574, z = 32.8951 } },
+    { model = "prop_phonebox_01b", coords = { x = -259.3869, y = -604.76556, z = 32.59827 } },
+    { model = "prop_phonebox_01b", coords = { x = -259.14352, y = -603.98016, z = 32.65002 } },
+    { model = "prop_phonebox_01b", coords = { x = -241.57574, y = -766.2026, z = 31.73654 } },
+    { model = "prop_phonebox_01b", coords = { x = -241.29694, y = -765.4682, z = 31.77955 } },
+    { model = "prop_phonebox_01b", coords = { x = -239.74597, y = -978.22943, z = 28.26393 } },
+    { model = "prop_phonebox_01b", coords = { x = -239.51797, y = -977.59296, z = 28.26393 } },
+    { model = "prop_phonebox_01b", coords = { x = -178.84961, y = -52.06338, z = 51.10093 } },
+    { model = "prop_phonebox_01b", coords = { x = -177.28662, y = -713.48505, z = 33.39728 } },
+    { model = "prop_phonebox_01b", coords = { x = -147.61765, y = -287.15277, z = 39.43044 } },
+    { model = "prop_phonebox_01b", coords = { x = -147.37784, y = -286.44186, z = 39.49831 } },
+    { model = "prop_phonebox_01b", coords = { x = -73.17541, y = -641.5052, z = 35.24065 } },
+    { model = "prop_phonebox_01b", coords = { x = -72.92773, y = -640.8415, z = 35.24065 } },
+    { model = "prop_phonebox_01b", coords = { x = -53.45404, y = -94.169, z = 56.7686 } },
+    { model = "prop_phonebox_01b", coords = { x = -27.98413, y = -100.90671, z = 56.35694 } },
+    { model = "prop_phonebox_01b", coords = { x = -26.48154, y = -110.65947, z = 56.06785 } },
+    { model = "prop_phonebox_01b", coords = { x = -8.06136, y = -731.61005, z = 43.22259 } },
+    { model = "prop_phonebox_01b", coords = { x = -7.37235, y = -731.8549, z = 43.22768 } },
+    { model = "prop_phonebox_01b", coords = { x = 43.99314, y = -680.87616, z = 43.20672 } },
+    { model = "prop_phonebox_01b", coords = { x = 44.30204, y = -680.0512, z = 43.20672 } },
+    { model = "prop_phonebox_01b", coords = { x = 120.37446, y = -205.12677, z = 53.61985 } },
+    { model = "prop_phonebox_01b", coords = { x = 121.18489, y = -205.42413, z = 53.61985 } },
+    { model = "prop_phonebox_01b", coords = { x = 129.40686, y = 245.3497, z = 106.42847 } },
+    { model = "prop_phonebox_01b", coords = { x = 140.18076, y = -1033.1602, z = 28.34242 } },
+    { model = "prop_phonebox_01b", coords = { x = 174.5452, y = -1116.4456, z = 28.28443 } },
+    { model = "prop_phonebox_01b", coords = { x = 175.22937, y = -1116.4185, z = 28.28425 } },
+    { model = "prop_phonebox_01b", coords = { x = 213.8157, y = -852.6208, z = 29.38956 } },
+    { model = "prop_phonebox_01b", coords = { x = 214.44952, y = -852.86725, z = 29.38709 } },
+    { model = "prop_phonebox_01b", coords = { x = 233.49872, y = 334.44766, z = 104.52145 } },
+    { model = "prop_phonebox_01b", coords = { x = 296.66183, y = -1359.7725, z = 30.92093 } },
+    { model = "prop_phonebox_01b", coords = { x = 372.30563, y = -966.37286, z = 28.41298 } },
+    { model = "prop_phonebox_01b", coords = { x = 394.25433, y = -799.7535, z = 28.23798 } },
+    { model = "prop_phonebox_01b", coords = { x = 394.25433, y = -798.6486, z = 28.23798 } },
+    { model = "prop_phonebox_01b", coords = { x = 397.567, y = -921.3287, z = 28.3982 } },
+    { model = "prop_phonebox_01b", coords = { x = 397.567, y = -920.658, z = 28.3982 } },
+    { model = "prop_phonebox_01b", coords = { x = 415.17245, y = -910.94476, z = 28.3982 } },
+    { model = "prop_phonebox_01b", coords = { x = 436.0411, y = 137.20285, z = 99.43968 } },
+    { model = "prop_phonebox_01b", coords = { x = 436.83813, y = 136.89954, z = 99.38892 } },
+    { model = "prop_phonebox_01b", coords = { x = 439.8047, y = -606.65063, z = 27.69825 } },
+    { model = "prop_phonebox_01b", coords = { x = 439.99564, y = -604.67474, z = 27.69747 } },
+    { model = "prop_phonebox_01b", coords = { x = 445.3808, y = 3567.5305, z = 32.21765 } },
+    { model = "prop_phonebox_01b", coords = { x = 452.6532, y = -612.11816, z = 27.54012 } },
+    { model = "prop_phonebox_01b", coords = { x = 452.7997, y = -610.4434, z = 27.5457 } },
+    { model = "prop_phonebox_01b", coords = { x = 535.5781, y = 102.93228, z = 95.56698 } },
+    { model = "prop_phonebox_01b", coords = { x = 779.83923, y = -1755.3914, z = 28.47611 } },
+    { model = "prop_phonebox_01b", coords = { x = 780.2285, y = -1755.4475, z = 28.46564 } },
+    { model = "prop_phonebox_01b", coords = { x = 809.3085, y = -1074.9281, z = 27.67919 } },
+    { model = "prop_phonebox_01b", coords = { x = 903.52423, y = 3646.1294, z = 31.70571 } },
+    { model = "prop_phonebox_01b", coords = { x = 1051.0497, y = 2661.3877, z = 38.52392 } },
+    { model = "prop_phonebox_01b", coords = { x = 1181.1997, y = 2703.214, z = 37.1464 } },
+    { model = "prop_phonebox_01b", coords = { x = 1206.4275, y = 2647.8894, z = 36.81204 } },
+    { model = "prop_phonebox_01b", coords = { x = 1401.1744, y = 3602.0786, z = 34.01619 } },
+    { model = "prop_phonebox_01b", coords = { x = 1662.8026, y = 4841.53, z = 41.0313 } },
+    { model = "prop_phonebox_01b", coords = { x = 1662.9365, y = 4840.332, z = 41.0313 } },
+    { model = "prop_phonebox_01b", coords = { x = 1692.9031, y = 6432.025, z = 31.73361 } },
+    { model = "prop_phonebox_01b", coords = { x = 1696.5485, y = 3776.0618, z = 33.71252 } },
+    { model = "prop_phonebox_01b", coords = { x = 1696.7177, y = 4790.302, z = 40.89749 } },
+    { model = "prop_phonebox_01b", coords = { x = 1860.4072, y = 3696.2563, z = 33.26152 } },
+    { model = "prop_phonebox_01b", coords = { x = 1861.0801, y = 3695.0903, z = 33.26152 } },
+    { model = "prop_phonebox_01b", coords = { x = 2005.9707, y = 3782.6196, z = 31.15662 } },
+    { model = "prop_phonebox_01b", coords = { x = 2006.7942, y = 3783.1003, z = 31.14984 } },
+    { model = "prop_phonebox_04", coords = { x = -2969.4265, y = 397.46487, z = 14.10208 } },
+    { model = "prop_phonebox_04", coords = { x = -1417.7056, y = -94.50974, z = 51.41046 } },
+    { model = "prop_phonebox_04", coords = { x = -1416.8014, y = -94.11159, z = 51.44441 } },
+    { model = "prop_phonebox_04", coords = { x = -1415.9122, y = -93.72023, z = 51.49042 } },
+    { model = "prop_phonebox_04", coords = { x = -1294.0234, y = -390.34976, z = 35.44277 } },
+    { model = "prop_phonebox_04", coords = { x = -1293.4121, y = -391.38864, z = 35.44632 } },
+    { model = "prop_phonebox_04", coords = { x = -1241.7491, y = -464.37216, z = 32.537 } },
+    { model = "prop_phonebox_04", coords = { x = -1224.2532, y = -322.51794, z = 36.57259 } },
+    { model = "prop_phonebox_04", coords = { x = -1223.0624, y = -321.95178, z = 36.59326 } },
+    { model = "prop_phonebox_04", coords = { x = -1074.0209, y = -397.75607, z = 35.95449 } },
+    { model = "prop_phonebox_04", coords = { x = -1025.3336, y = -216.04681, z = 36.93829 } },
+    { model = "prop_phonebox_04", coords = { x = -1023.97375, y = -216.74884, z = 36.9369 } },
+    { model = "prop_phonebox_04", coords = { x = -985.19824, y = -414.10977, z = 36.85289 } },
+    { model = "prop_phonebox_04", coords = { x = -979.73254, y = -369.2069, z = 36.856 } },
+    { model = "prop_phonebox_04", coords = { x = -979.1488, y = -370.3092, z = 36.856 } },
+    { model = "prop_phonebox_04", coords = { x = -965.37616, y = -2524.3992, z = 13.00643 } },
+    { model = "prop_phonebox_04", coords = { x = -963.65985, y = -247.05435, z = 37.0568 } },
+    { model = "prop_phonebox_04", coords = { x = -896.8487, y = -247.80585, z = 39.07844 } },
+    { model = "prop_phonebox_04", coords = { x = -865.3409, y = -2528.5645, z = 13.00643 } },
+    { model = "prop_phonebox_04", coords = { x = -821.83124, y = -251.49579, z = 36.0627 } },
+    { model = "prop_phonebox_04", coords = { x = -821.29346, y = -252.4495, z = 36.05127 } },
+    { model = "prop_phonebox_04", coords = { x = -701.46173, y = -371.56976, z = 33.2833 } },
+    { model = "prop_phonebox_04", coords = { x = -700.3627, y = -372.04968, z = 33.27078 } },
+    { model = "prop_phonebox_04", coords = { x = -619.5328, y = -207.68121, z = 36.3736 } },
+    { model = "prop_phonebox_04", coords = { x = -618.975, y = -208.61508, z = 36.35005 } },
+    { model = "prop_phonebox_04", coords = { x = -617.05457, y = -422.20978, z = 33.7873 } },
+    { model = "prop_phonebox_04", coords = { x = -557.25586, y = -386.67517, z = 34.11347 } },
+    { model = "prop_phonebox_04", coords = { x = -556.05286, y = -386.66565, z = 34.11989 } },
+    { model = "prop_phonebox_04", coords = { x = -554.8701, y = -386.6563, z = 34.12583 } },
+    { model = "prop_phonebox_04", coords = { x = -546.57184, y = -334.10083, z = 34.16116 } },
+    { model = "prop_phonebox_04", coords = { x = -544.17737, y = -157.39006, z = 37.53791 } },
+    { model = "prop_phonebox_04", coords = { x = -388.49542, y = -321.52948, z = 32.10458 } },
+    { model = "prop_phonebox_04", coords = { x = -387.68488, y = -322.21454, z = 32.05279 } },
+    { model = "prop_phonebox_04", coords = { x = -360.33978, y = -267.18268, z = 32.73604 } },
+    { model = "prop_phonebox_04", coords = { x = -347.059, y = -1490.9738, z = 29.79159 } },
+    { model = "prop_phonebox_04", coords = { x = -345.83786, y = -1490.9738, z = 29.7867 } },
+    { model = "prop_phonebox_04", coords = { x = -263.0376, y = -766.90546, z = 31.57576 } },
+    { model = "prop_phonebox_04", coords = { x = -262.6508, y = -766.04095, z = 31.60592 } },
+    { model = "prop_phonebox_04", coords = { x = -213.1738, y = -696.5944, z = 32.80729 } },
+    { model = "prop_phonebox_04", coords = { x = -174.76907, y = -674.9272, z = 33.27862 } },
+    { model = "prop_phonebox_04", coords = { x = -173.80676, y = -675.35236, z = 33.29762 } },
+    { model = "prop_phonebox_04", coords = { x = -138.00961, y = -799.9025, z = 31.10711 } },
+    { model = "prop_phonebox_04", coords = { x = -137.64026, y = -798.8024, z = 31.14563 } },
+    { model = "prop_phonebox_04", coords = { x = 55.44337, y = -1081.1333, z = 28.45174 } },
+    { model = "prop_phonebox_04", coords = { x = 55.90165, y = -1080.282, z = 28.45174 } },
+    { model = "prop_phonebox_04", coords = { x = 188.01767, y = -1043.9451, z = 28.32789 } },
+    { model = "prop_phonebox_04", coords = { x = 189.79306, y = -1044.5588, z = 28.32789 } },
+    { model = "prop_phonebox_04", coords = { x = 298.28317, y = -795.153, z = 28.4778 } },
+    { model = "prop_phonebox_04", coords = { x = 298.62607, y = -794.289, z = 28.4778 } },
+    { model = "prop_phonebox_04", coords = { x = 347.45938, y = -730.9255, z = 28.28353 } },
+    { model = "prop_phonebox_04", coords = { x = 564.7501, y = -1748.7141, z = 28.31245 } },
+    { model = "prop_phonebox_04", coords = { x = 653.1738, y = 272.5705, z = 102.29323 } },
+    { model = "prop_phonebox_04", coords = { x = 654.2313, y = 271.95996, z = 102.29323 } },
+    { model = "prop_phonebox_04", coords = { x = 1214.8445, y = -1385.6348, z = 34.34755 } },
+    { model = "prop_phonebox_04", coords = { x = 1214.8445, y = -1384.5386, z = 34.34755 } },
+    { model = "prop_phonebox_04", coords = { x = 1662.002, y = 4819.523, z = 41.04535 } },
+    { model = "prop_phonebox_04", coords = { x = 1816.4236, y = 3671.6497, z = 33.29268 } },
+    { model = "prop_phonebox_04", coords = { x = 1818.1936, y = 3668.7485, z = 33.29268 } },
+    { model = "prop_phonebox_04", coords = { x = 2007.0574, y = 3784.7974, z = 31.20895 } },
+}
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index ab0e6f8..e5f67e7 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -30,6 +30,7 @@ client_scripts {
     'source/bridge/client/housing.lua',
     'source/bridge/client/housing/*.lua',
     'source/client/animations.lua',
+    'source/client/focus.lua',
     'source/client/camera.lua',
     'source/client/garage.lua',
     'source/client/skyride.lua',
@@ -46,6 +47,7 @@ client_scripts {
 server_scripts {
     '@oxmysql/lib/MySQL.lua',
     'config/config.lua',
+    'config/payphones.lua',
     'config/companies.lua',
     'config/media.lua',
     'config/music.lua',
@@ -66,6 +68,7 @@ server_scripts {
     'source/server/companies.lua',
     'source/server/custom_app_storage.lua',
     'source/server/sim.lua',
+    'source/server/payphones.lua',
     'source/server/calls.lua',
     'source/server/media.lua',
     'source/server/messages.lua',
diff --git a/sky_phone/source/client/camera.lua b/sky_phone/source/client/camera.lua
index 1cfa566..581d9b0 100644
--- a/sky_phone/source/client/camera.lua
+++ b/sky_phone/source/client/camera.lua
@@ -6,6 +6,10 @@ local ultrawide_fov_multiplier = 2.0
 local front_camera_distance = 0.75
 local front_camera_height = 0.05
 local front_camera_target_height = 0.03
+local unfocused_camera_controls = {
+    1, -- INPUT_LOOK_LR
+    2, -- INPUT_LOOK_UD
+}
 local camera_state = {
     active = false,
     enforcing = false,
@@ -16,6 +20,7 @@ local camera_state = {
     front_camera_handle = nil,
     landscape = false,
     ultrawide_camera_handle = nil,
+    applied_nui_focus = true,
     nui_focused = true,
     previous_ped_view = nil,
     previous_radar_hidden = nil,
@@ -145,27 +150,32 @@ local function restore_camera_view()
     end
 end
 
-local function set_camera_focus(focused)
-    if camera_state.nui_focused == focused then
-        return
+local function apply_unfocused_camera_controls()
+    DisableAllControlActions(0)
+    for _, control in ipairs(unfocused_camera_controls) do
+        EnableControlAction(0, control, true)
     end
-    camera_state.nui_focused = focused
-    if focused then
-        SetNuiFocus(true, true)
-        SetNuiFocusKeepInput(false)
-        SendNUIMessage({ type = "camera:focus", data = { focused = true } })
-        return
-    end
-    SetNuiFocus(false, false)
-    SetNuiFocusKeepInput(true)
-    SendNUIMessage({ type = "camera:focus", data = { focused = false } })
+    DisablePlayerFiring(PlayerId(), true)
+end
+
+local function update_camera_focus_claim()
+    TriggerEvent("sky_phone:client:setCameraFocus", {
+        active = camera_state.active,
+        nuiFocused = camera_state.nui_focused,
+    })
+end
+
+local set_camera_focus
+
+local function watch_unfocused_camera_controls()
     if camera_state.focus_watcher then
         return
     end
     camera_state.focus_watcher = true
     CreateThread(function()
-        while camera_state.active and not camera_state.nui_focused do
-            if IsControlJustReleased(0, 22) then
+        while camera_state.active and not camera_state.applied_nui_focus do
+            apply_unfocused_camera_controls()
+            if IsDisabledControlJustReleased(0, 22) then
                 set_camera_focus(true)
                 break
             end
@@ -175,6 +185,28 @@ local function set_camera_focus(focused)
     end)
 end
 
+set_camera_focus = function(focused)
+    camera_state.nui_focused = focused
+    update_camera_focus_claim()
+end
+
+AddEventHandler("sky_phone:client:cameraFocusApplied", function(data)
+    if type(data) ~= "table"
+        or type(data.active) ~= "boolean"
+        or type(data.focused) ~= "boolean"
+        or type(data.gameInput) ~= "boolean"
+    then
+        return
+    end
+    if camera_state.applied_nui_focus ~= data.focused then
+        camera_state.applied_nui_focus = data.focused
+        SendNUIMessage({ type = "camera:focus", data = { focused = data.focused } })
+    end
+    if data.active and data.gameInput then
+        watch_unfocused_camera_controls()
+    end
+end)
+
 local function set_camera_active(active)
     if camera_state.active == active then
         return
@@ -251,11 +283,8 @@ local function set_camera_active(active)
     clear_front_camera()
     clear_ultrawide_camera()
     restore_camera_view()
-    if not camera_state.nui_focused then
-        camera_state.nui_focused = true
-        SetNuiFocusKeepInput(false)
-        SetNuiFocus(true, true)
-    end
+    camera_state.nui_focused = true
+    update_camera_focus_claim()
     TriggerEvent("sky_phone:animation:camera", {
         active = false,
         front = false,
@@ -325,58 +354,102 @@ local function set_camera_zoom(zoom)
 end
 
 RegisterNUICallback("camera:setActive", function(data, cb)
-    set_camera_active(data and data.active == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_camera_active(data.active == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setFocus", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if camera_state.active then
-        set_camera_focus(data and data.focused == true)
+        set_camera_focus(data.focused == true)
     end
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setFlash", function(data, cb)
-    set_flash_enabled(data and data.enabled == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_flash_enabled(data.enabled == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setFacing", function(data, cb)
-    set_front_camera(data and data.front == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_front_camera(data.front == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setOrientation", function(data, cb)
-    set_camera_landscape(data and data.landscape == true)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    set_camera_landscape(data.landscape == true)
     cb({ success = true })
 end)
 
 RegisterNUICallback("camera:setZoom", function(data, cb)
-    cb({ success = set_camera_zoom(tonumber(data and data.zoom)) })
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    cb({ success = set_camera_zoom(tonumber(data.zoom)) })
 end)
 
 RegisterNUICallback("media:requestUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:request-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:request-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("media:completeUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:complete-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:complete-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("media:cancelUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:cancel-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:cancel-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("media:failUpload", function(data, cb)
-    TriggerServerEvent("sky_phone:media:fail-upload", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:fail-upload", data)
     cb({ success = true })
 end)
 
 RegisterNUICallback("gallery:delete", function(data, cb)
-    TriggerServerEvent("sky_phone:media:delete", data or {})
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    TriggerServerEvent("sky_phone:media:delete", data)
     cb({ success = true })
 end)
 
@@ -401,6 +474,5 @@ AddEventHandler("onResourceStop", function(resource_name)
     if resource_name == GetCurrentResourceName() then
         set_flash_enabled(false)
         set_camera_active(false)
-        SetNuiFocusKeepInput(false)
     end
 end)
diff --git a/sky_phone/source/client/crewlink.lua b/sky_phone/source/client/crewlink.lua
index 5ecf4eb..4767466 100644
--- a/sky_phone/source/client/crewlink.lua
+++ b/sky_phone/source/client/crewlink.lua
@@ -16,6 +16,10 @@ local function draw_overhead_label(coords, username, role)
 end
 
 RegisterNUICallback("crewlink:live", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = Bridge.Callbacks.Trigger("sky_phone:crewlink:live", data)
     overhead_members = result and result.success and result.data and result.data.overheadMembers or {}
     overhead_expires_at = GetGameTimer() + Config.CrewLink.OverheadRefreshMilliseconds * 2
diff --git a/sky_phone/source/client/focus.lua b/sky_phone/source/client/focus.lua
new file mode 100644
index 0000000..8252694
--- /dev/null
+++ b/sky_phone/source/client/focus.lua
@@ -0,0 +1,21 @@
+SkyPhoneFocus = {}
+
+function SkyPhoneFocus.Resolve(state)
+    if state.activity_suspended then
+        return { focused = false, keep_input = false }
+    end
+    if state.call_focus then
+        return { focused = true, keep_input = false }
+    end
+    if state.camera_active and not state.camera_nui_focused then
+        return { focused = false, keep_input = true }
+    end
+    return {
+        focused = state.is_open
+            or state.notification_focus
+            or state.payphone_focus
+            or state.sim_picker_open
+            or (state.camera_active and state.camera_nui_focused),
+        keep_input = false,
+    }
+end
diff --git a/sky_phone/source/client/garage.lua b/sky_phone/source/client/garage.lua
index 6a40adf..cee1d5d 100644
--- a/sky_phone/source/client/garage.lua
+++ b/sky_phone/source/client/garage.lua
@@ -441,6 +441,10 @@ local function run_valet_delivery(order)
 end
 
 RegisterNUICallback("garage:valet-request", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if current_valet then
         cb({ success = false, error = "valet_active" })
         return
diff --git a/sky_phone/source/client/housing.lua b/sky_phone/source/client/housing.lua
index d54d217..93f3b5b 100644
--- a/sky_phone/source/client/housing.lua
+++ b/sky_phone/source/client/housing.lua
@@ -11,18 +11,18 @@ local function server_prepare(action, data)
 end
 
 local function suspend_phone()
-    SetNuiFocus(false, false)
+    TriggerEvent("sky_phone:client:setSuspended", true)
     TriggerEvent("sky_phone:animation:phone", false)
     SendNUIMessage({ type = "app:suspend" })
 end
 
 local function resume_phone()
     SendNUIMessage({ type = "app:resume" })
-    SetNuiFocus(true, true)
+    TriggerEvent("sky_phone:client:setSuspended", false)
     TriggerEvent("sky_phone:animation:phone", true)
 end
 
-local function stop_camera()
+local function stop_camera(resume)
     local state = camera_state
     if not state then
         return
@@ -37,7 +37,9 @@ local function stop_camera()
     if DoesEntityExist(state.ped) then
         FreezeEntityPosition(state.ped, state.frozen)
     end
-    resume_phone()
+    if resume ~= false then
+        resume_phone()
+    end
 end
 
 local function camera_number(value, fallback)
@@ -105,13 +107,17 @@ local function run_camera(provider_name, camera_data)
     local maximum_left = camera_number(camera_data.maximumLeft)
     local maximum_right = camera_number(camera_data.maximumRight)
     local night_vision = camera_state.night_vision
+    local resume_after_camera = false
+    local close_phone_after_camera = false
     while camera_state and camera_state.camera == camera do
         Wait(0)
         DisableAllControlActions(0)
-        if IsDisabledControlJustPressed(0, config.ExitControl)
-            or IsPedDeadOrDying(ped, true)
-            or GetResourceState(provider_name) ~= "started"
-        then
+        if IsDisabledControlJustPressed(0, config.ExitControl) then
+            resume_after_camera = true
+            break
+        end
+        if IsPedDeadOrDying(ped, true) or GetResourceState(provider_name) ~= "started" then
+            close_phone_after_camera = true
             break
         end
 
@@ -147,12 +153,29 @@ local function run_camera(provider_name, camera_data)
             SetNightvision(night_vision)
         end
     end
-    stop_camera()
+    stop_camera(resume_after_camera)
+    if close_phone_after_camera then
+        TriggerEvent("sky_phone:client:forceClose")
+    end
 end
 
-RegisterNUICallback("housing:overview", function(_, cb)
+RegisterNetEvent("sky_phone:device:invalidated", function()
+    stop_camera(false)
+end)
+
+RegisterNUICallback("housing:overview", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = Bridge.Callbacks.Trigger("sky_phone:housing:overview", {})
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
+end)
+
+AddEventHandler("sky_phone:client:nuiReady", function()
+    if camera_state then
+        suspend_phone()
+    end
 end)
 
 RegisterNUICallback("housing:key-candidates", function(data, cb)
@@ -161,7 +184,7 @@ RegisterNUICallback("housing:key-candidates", function(data, cb)
         return
     end
     local result = server_prepare("key_candidates", data)
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
 end)
 
 RegisterNUICallback("housing:command", function(data, cb)
@@ -182,8 +205,8 @@ RegisterNUICallback("housing:command", function(data, cb)
     end
 
     local prepared = server_prepare(data.action, data)
-    if not prepared or not prepared.success or type(prepared.data) ~= "table" then
-        cb(prepared or { success = false, error = "request_failed" })
+    if type(prepared) ~= "table" or not prepared.success or type(prepared.data) ~= "table" then
+        cb(type(prepared) == "table" and prepared or { success = false, error = "request_failed" })
         return
     end
     if data.action == "set_waypoint" then
@@ -214,6 +237,6 @@ end)
 
 AddEventHandler("onResourceStop", function(resource_name)
     if resource_name == GetCurrentResourceName() and camera_state then
-        stop_camera()
+        stop_camera(false)
     end
 end)
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 8c97ab3..2e88d41 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -1,9 +1,17 @@
 local is_open = false
 local open_requested = false
 local notification_focus = false
+local call_focus = false
+local payphone_focus = false
+local camera_active = false
+local camera_nui_focused = true
 local device_payload = nil
 local sim_picker_open = false
+local sim_picker_payload = nil
+local active_call_payload = nil
 local call_channel = 0
+local nui_generation = 0
+local activity_suspended = false
 
 Bridge.Debug("debug", "[sky_phone] Client script initialized.", { always = true })
 
@@ -256,6 +264,46 @@ local function get_locale()
     return Locales[Config.Bridge.Locale] or Locales["en"]
 end
 
+local function update_nui_focus()
+    local focus = SkyPhoneFocus.Resolve({
+        activity_suspended = activity_suspended,
+        call_focus = call_focus,
+        camera_active = camera_active,
+        camera_nui_focused = camera_nui_focused,
+        is_open = is_open,
+        notification_focus = notification_focus,
+        payphone_focus = payphone_focus,
+        sim_picker_open = sim_picker_open,
+    })
+    SetNuiFocus(focus.focused, focus.focused)
+    SetNuiFocusKeepInput(focus.keep_input)
+    TriggerEvent("sky_phone:client:cameraFocusApplied", {
+        active = camera_active,
+        focused = focus.focused,
+        gameInput = focus.keep_input,
+    })
+end
+
+AddEventHandler("sky_phone:client:setSuspended", function(suspended)
+    activity_suspended = suspended == true
+    update_nui_focus()
+end)
+
+AddEventHandler("sky_phone:client:setPayphoneFocus", function(focused)
+    payphone_focus = focused == true
+    update_nui_focus()
+end)
+
+AddEventHandler("sky_phone:client:setCameraFocus", function(data)
+    if type(data) ~= "table" or type(data.active) ~= "boolean" or type(data.nuiFocused) ~= "boolean" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid camera focus claim.")
+        return
+    end
+    camera_active = data.active
+    camera_nui_focused = data.nuiFocused
+    update_nui_focus()
+end)
+
 local function send_open_message()
     if not device_payload then
         return
@@ -279,21 +327,31 @@ local function open_phone()
     send_open_message()
 end
 
-local function close_phone()
+local function close_phone(close_device_session)
+    local was_requested = open_requested
+    local was_open = is_open
     open_requested = false
+    call_focus = false
+    activity_suspended = false
     TriggerEvent("sky_phone:animation:phone", false)
-    if not is_open then
-        return
-    end
-
     is_open = false
-    SkyPhoneApps.SetPhoneOpen(false)
-    TriggerEvent("sky_phone:nuiClosed")
-    SetNuiFocus(notification_focus or sim_picker_open, notification_focus or sim_picker_open)
-    SendNUIMessage({ type = "app:close" })
-    Bridge.Callbacks.Trigger("sky_phone:device:close", {})
+    if was_open then
+        SkyPhoneApps.SetPhoneOpen(false)
+        TriggerEvent("sky_phone:nuiClosed")
+    end
+    update_nui_focus()
+    if was_requested or was_open then
+        SendNUIMessage({ type = "app:close" })
+        if close_device_session ~= false then
+            Bridge.Callbacks.Trigger("sky_phone:device:close", {})
+        end
+    end
 end
 
+AddEventHandler("sky_phone:client:forceClose", function()
+    close_phone()
+end)
+
 local function leave_call_voice()
     if call_channel == 0 then
         return
@@ -337,24 +395,58 @@ RegisterNetEvent("sky_phone:testdata:feedback", function(success, detail)
     Bridge.Framework.Notify("iFruit", message, success and "success" or "error", 7000)
 end)
 
-RegisterNUICallback("ui:ready", function(_, cb)
+RegisterNUICallback("ui:ready", function(data, cb)
+    if type(data) ~= "table" or data.protocolVersion ~= 1 then
+        cb({ success = false, error = "unsupported_protocol" })
+        return
+
+    end
+    nui_generation = nui_generation + 1
+    -- Browser state is recreated on a CEF reload. A notification focus claim
+    -- cannot survive unless its notification is replayed as part of this handshake.
+    notification_focus = false
     Bridge.Debug("debug", "[sky_phone] NUI reported ready.", { always = true })
-    TriggerEvent("sky_phone:client:nuiReady")
     SkyPhoneApps.SendCatalog()
     if open_requested and device_payload then
         send_open_message()
     end
+    if active_call_payload then
+        SendNUIMessage({ type = "call:state", data = active_call_payload })
+    end
+    if sim_picker_open and sim_picker_payload then
+        SendNUIMessage({ type = "sim:picker", data = sim_picker_payload })
+    else
+        SendNUIMessage({ type = "sim:picker-close" })
+    end
 
-    cb({ success = true })
+    update_nui_focus()
+    TriggerEvent("sky_phone:client:nuiReady", {
+        generation = nui_generation,
+        protocolVersion = 1,
+    })
+
+    cb({
+        success = true,
+        data = {
+            generation = nui_generation,
+            protocolVersion = 1,
+        },
+    })
 end)
 
-RegisterNUICallback("ui:opened", function(_, cb)
+RegisterNUICallback("ui:opened", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if not open_requested or not device_payload then
         Bridge.Debug(
             "warn",
             "[sky_phone] Ignored a NUI open confirmation without a pending device open.",
             { always = true }
         )
+        SendNUIMessage({ type = "app:close" })
+        update_nui_focus()
         cb({ success = false, error = "open_not_requested" })
         return
     end
@@ -362,29 +454,49 @@ RegisterNUICallback("ui:opened", function(_, cb)
     is_open = true
     SkyPhoneApps.SetPhoneOpen(true)
     notification_focus = false
-    SetNuiFocus(true, true)
+    call_focus = false
+    update_nui_focus()
     TriggerEvent("sky_phone:animation:phone", true)
     cb({ success = true })
 end)
 
-RegisterNUICallback("close", function(_, cb)
+RegisterNUICallback("close", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     close_phone()
     cb({ success = true })
 end)
 
 RegisterNUICallback("notification:focus", function(data, cb)
+    if type(data) ~= "table" or type(data.active) ~= "boolean" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     notification_focus = data.active == true and not is_open
-    SetNuiFocus(is_open or notification_focus, is_open or notification_focus)
+    update_nui_focus()
     cb({ success = true })
 end)
 
-RegisterNUICallback("sim:picker-close", function(_, cb)
+RegisterNUICallback("sim:picker-close", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     sim_picker_open = false
-    SetNuiFocus(is_open or notification_focus, is_open or notification_focus)
-    cb({ success = true })
+    sim_picker_payload = nil
+    update_nui_focus()
+    SendNUIMessage({ type = "sim:picker-close" })
+    local result = Bridge.Callbacks.Trigger("sky_phone:sim:picker-close", {})
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
 end)
 
-RegisterNUICallback("map:getPlayerCoords", function(_, cb)
+RegisterNUICallback("map:getPlayerCoords", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local coords = GetEntityCoords(PlayerPedId())
     cb({
         success = true,
@@ -439,7 +551,11 @@ local function weather_region(coords)
     return "los_santos"
 end
 
-RegisterNUICallback("weather:get", function(_, cb)
+RegisterNUICallback("weather:get", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local coords = GetEntityCoords(PlayerPedId())
     local weather_hash = GetPrevWeatherTypeHashName()
     local next_weather_hash = GetNextWeatherTypeHashName()
@@ -479,9 +595,13 @@ local function garage_vehicle_kind(model_hash, fallback)
 end
 
 RegisterNUICallback("garage:vehicles", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = Bridge.Callbacks.Trigger("sky_phone:garage:vehicles", data)
-    if not result or not result.success or type(result.data) ~= "table" then
-        cb(result or { success = false, error = "request_failed" })
+    if type(result) ~= "table" or not result.success or type(result.data) ~= "table" then
+        cb(type(result) == "table" and result or { success = false, error = "request_failed" })
         return
     end
     for _, vehicle in ipairs(result.data.vehicles or {}) do
@@ -505,8 +625,12 @@ end)
 
 for _, callback_name in ipairs(server_callbacks) do
     RegisterNUICallback(callback_name, function(data, cb)
+        if type(data) ~= "table" then
+            cb({ success = false, error = "invalid_request" })
+            return
+        end
         local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data)
-        if result then
+        if type(result) == "table" then
             cb(result)
             return
         end
@@ -516,6 +640,10 @@ for _, callback_name in ipairs(server_callbacks) do
 end
 
 RegisterNetEvent("sky_phone:device:open", function(data)
+    if type(data) ~= "table" or type(data.device) ~= "table" or type(data.device.imei) ~= "string" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid device open data.")
+        return
+    end
     Bridge.Debug(
         "debug",
         "[sky_phone] Client received device open for IMEI %s account_linked=%s.",
@@ -525,19 +653,27 @@ RegisterNetEvent("sky_phone:device:open", function(data)
     )
     device_payload = data
     open_requested = true
+    if is_open then
+        SkyPhoneApps.SendCatalog()
+        SendNUIMessage({ type = "device:updated", data = data })
+        return
+    end
     open_phone()
 end)
 
 RegisterNetEvent("sky_phone:device:updated", function(data)
+    if type(data) ~= "table" or type(data.device) ~= "table" or type(data.device.imei) ~= "string" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid device update data.")
+        return
+    end
     device_payload = data
     SendNUIMessage({ type = "device:updated", data = data })
 end)
 
 RegisterNetEvent("sky_phone:device:invalidated", function()
-    open_requested = false
-    device_payload = nil
     TriggerEvent("sky_phone:animation:reset")
-    close_phone()
+    close_phone(false)
+    device_payload = nil
 end)
 
 RegisterNetEvent("sky_phone:device:error", function(error_code)
@@ -669,14 +805,20 @@ RegisterNetEvent("sky_phone:flare:message", function(data)
 end)
 
 RegisterNetEvent("sky_phone:sim:picker", function(data)
+    if type(data) ~= "table" or type(data.number) ~= "string" or type(data.choices) ~= "table" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid SIM picker data.")
+        return
+    end
     sim_picker_open = true
-    SetNuiFocus(true, true)
+    sim_picker_payload = data
+    update_nui_focus()
     SendNUIMessage({ type = "sim:picker", data = data })
 end)
 
 RegisterNetEvent("sky_phone:sim:picker-close", function()
     sim_picker_open = false
-    SetNuiFocus(is_open or notification_focus, is_open or notification_focus)
+    sim_picker_payload = nil
+    update_nui_focus()
     SendNUIMessage({ type = "sim:picker-close" })
 end)
 
@@ -752,13 +894,35 @@ RegisterNetEvent("sky_phone:darkchat:new", function(data)
 end)
 
 RegisterNetEvent("sky_phone:call:incoming", function(data)
-    notification_focus = true
-    SetNuiFocus(true, true)
+    if type(data) ~= "table" or type(data.id) ~= "string" or data.state ~= "ringing" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid incoming call data.")
+        return
+    end
+    active_call_payload = data
+    call_focus = true
+    update_nui_focus()
     TriggerEvent("sky_phone:animation:call", data)
     SendNUIMessage({ type = "call:incoming", data = data })
 end)
 
 RegisterNetEvent("sky_phone:call:state", function(data)
+    if type(data) ~= "table" or type(data.id) ~= "string" or type(data.state) ~= "string" then
+        Bridge.Debug("error", "[sky_phone] Rejected invalid call state data.")
+        return
+    end
+    if data.state == "ringing" or data.state == "connected" then
+        active_call_payload = data
+    end
+    if data.state ~= "ringing" then
+        local focus_changed = call_focus
+        call_focus = false
+        if focus_changed then
+            update_nui_focus()
+        end
+    end
+    if data.state ~= "ringing" and data.state ~= "connected" then
+        active_call_payload = nil
+    end
     if data.state == "connected" and data.channel then
         if not join_call_voice(data.channel) then
             TriggerEvent("sky_phone:device:error", "voice_unavailable")
@@ -784,9 +948,19 @@ AddEventHandler("onResourceStop", function(resource_name)
         return
     end
 
-    if is_open or notification_focus then
-        SetNuiFocus(false, false)
-    end
+    is_open = false
+    open_requested = false
+    notification_focus = false
+    call_focus = false
+    payphone_focus = false
+    camera_active = false
+    camera_nui_focused = true
+    sim_picker_open = false
+    sim_picker_payload = nil
+    active_call_payload = nil
+    activity_suspended = false
+    SetNuiFocusKeepInput(false)
+    SetNuiFocus(false, false)
 
     TriggerEvent("sky_phone:animation:reset")
     leave_call_voice()
diff --git a/sky_phone/source/client/payphones.lua b/sky_phone/source/client/payphones.lua
index d3fb3b4..d59b569 100644
--- a/sky_phone/source/client/payphones.lua
+++ b/sky_phone/source/client/payphones.lua
@@ -6,6 +6,7 @@ local active_call_state = nil
 local active_call_number = nil
 local active_call_elapsed_seconds = 0
 local active_call_elapsed_updated_at = 0
+local active_call_payload = nil
 local call_channel = 0
 local replacement_prop = nil
 local hidden_prop = nil
@@ -360,11 +361,20 @@ local function booth_payload(booth)
     }
 end
 
+local function payphone_open_payload()
+    return {
+        currency = Config.Payphones.Currency,
+        maxNumberLength = Config.Sim.NumberLength,
+        pricePerSecond = Config.Payphones.PricePerSecond,
+        locales = get_locale().Nui.Payphone,
+    }
+end
+
 local function close_payphone()
     local was_open = payphone_open
     payphone_open = false
     if was_open then
-        SetNuiFocus(false, false)
+        TriggerEvent("sky_phone:client:setPayphoneFocus", false)
         SendNUIMessage({ type = "payphone:close" })
     end
     if not active_call_id then
@@ -418,6 +428,7 @@ local function apply_active_call_state(data)
         active_call_elapsed_seconds = 0
         active_call_elapsed_updated_at = 0
     end
+    active_call_payload = data
 end
 
 local function clear_active_call_state()
@@ -426,6 +437,7 @@ local function clear_active_call_state()
     active_call_number = nil
     active_call_elapsed_seconds = 0
     active_call_elapsed_updated_at = 0
+    active_call_payload = nil
     hangup_requested = false
 end
 
@@ -435,48 +447,51 @@ local function open_payphone(booth)
     end
     active_booth = booth
     payphone_open = true
-    SetNuiFocus(true, true)
+    TriggerEvent("sky_phone:client:setPayphoneFocus", true)
     SendNUIMessage({
         type = "payphone:open",
-        data = {
-            currency = Config.Payphones.Currency,
-            maxNumberLength = Config.Sim.NumberLength,
-            pricePerSecond = Config.Payphones.PricePerSecond,
-            locales = get_locale().Nui.Payphone,
-        },
+        data = payphone_open_payload(),
     })
 end
 
 RegisterNUICallback("payphone:dial", function(data, cb)
-    if not payphone_open or not active_booth or active_call_id then
+    if type(data) ~= "table" or not payphone_open or not active_booth or active_call_id then
         cb({ success = false, error = "invalid_request" })
         return
     end
     local payload = booth_payload(active_booth)
-    payload.phoneNumber = type(data) == "table" and data.phoneNumber or nil
+    payload.phoneNumber = data.phoneNumber
     local result = Bridge.Callbacks.Trigger("sky_phone:payphone:dial", payload)
-    local call_started = result and result.success and result.data
+    local call_started = type(result) == "table" and result.success and type(result.data) == "table"
         and (result.data.state == "ringing" or result.data.state == "connected")
     if call_started then
         apply_active_call_state(result.data)
     end
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
     if call_started then
         close_payphone()
         start_call_visuals()
     end
 end)
 
-RegisterNUICallback("payphone:hangup", function(_, cb)
+RegisterNUICallback("payphone:hangup", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if not active_call_id then
         cb({ success = false, error = "call_not_found" })
         return
     end
     local result = Bridge.Callbacks.Trigger("sky_phone:payphone:hangup", { id = active_call_id })
-    cb(result or { success = false, error = "request_failed" })
+    cb(type(result) == "table" and result or { success = false, error = "request_failed" })
 end)
 
-RegisterNUICallback("payphone:close", function(_, cb)
+RegisterNUICallback("payphone:close", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     if active_call_id then
         Bridge.Callbacks.Trigger("sky_phone:payphone:hangup", { id = active_call_id })
     end
@@ -485,7 +500,7 @@ RegisterNUICallback("payphone:close", function(_, cb)
 end)
 
 RegisterNetEvent("sky_phone:payphone:state", function(data)
-    if type(data) ~= "table" then
+    if type(data) ~= "table" or type(data.id) ~= "string" or type(data.state) ~= "string" then
         return
     end
     if data.state == "ringing" or data.state == "connected" then
@@ -506,6 +521,24 @@ RegisterNetEvent("sky_phone:payphone:state", function(data)
     SendNUIMessage({ type = "payphone:state", data = data })
 end)
 
+AddEventHandler("sky_phone:client:nuiReady", function()
+    if payphone_open then
+        TriggerEvent("sky_phone:client:setPayphoneFocus", true)
+        SendNUIMessage({ type = "payphone:open", data = payphone_open_payload() })
+    else
+        TriggerEvent("sky_phone:client:setPayphoneFocus", false)
+        SendNUIMessage({ type = "payphone:close" })
+    end
+    if active_call_payload then
+        local payload = {}
+        for key, value in pairs(active_call_payload) do
+            payload[key] = value
+        end
+        payload.elapsedSeconds = current_call_elapsed_seconds()
+        SendNUIMessage({ type = "payphone:state", data = payload })
+    end
+end)
+
 CreateThread(function()
     while true do
         if not Config.Payphones.Enabled or payphone_open or active_call_id or visuals_ending then
@@ -625,9 +658,7 @@ AddEventHandler("onResourceStop", function(resource_name)
     if resource_name ~= GetCurrentResourceName() then
         return
     end
-    if payphone_open then
-        SetNuiFocus(false, false)
-    end
+    TriggerEvent("sky_phone:client:setPayphoneFocus", false)
     leave_call_voice()
     stop_call_visuals()
     clear_active_call_state()
diff --git a/sky_phone/source/client/radio.lua b/sky_phone/source/client/radio.lua
index 0132f7d..2b087cf 100644
--- a/sky_phone/source/client/radio.lua
+++ b/sky_phone/source/client/radio.lua
@@ -120,7 +120,10 @@ local function join_radio(primary, secondary)
         return approved
     end
 
-    local data = approved.data or {}
+    if type(approved.data) ~= "table" then
+        return { success = false, error = "request_failed" }
+    end
+    local data = approved.data
     local approved_primary = tonumber(data.frequency) or 0
     local approved_secondary = tonumber(data.secondaryFrequency) or 0
     if not Bridge.Radio.Join(approved_primary, approved_secondary) then
@@ -148,27 +151,41 @@ local function leave_radio()
     return request("disconnect")
 end
 
-RegisterNUICallback("radio:get", function(_, cb)
+RegisterNUICallback("radio:get", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = request("get")
-    if result.success then
+    if result.success and type(result.data) == "table" then
         apply_server_state(result.data)
         result.data.volume = current_volume
         result.data.provider = Bridge.Radio.GetProvider()
         result.data.secondarySupported = Bridge.Radio.SupportsSecondary()
+    elseif result.success then
+        result = { success = false, error = "request_failed" }
     end
     cb(result)
 end)
 
 RegisterNUICallback("radio:connect", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(join_radio(data.frequency, data.secondaryFrequency))
 end)
 
-RegisterNUICallback("radio:disconnect", function(_, cb)
+RegisterNUICallback("radio:disconnect", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(leave_radio())
 end)
 
 RegisterNUICallback("radio:set-volume", function(data, cb)
-    local volume = tonumber(data.volume)
+    local volume = type(data) == "table" and tonumber(data.volume) or nil
     if not volume then
         cb({ success = false, error = "invalid_volume" })
         return
@@ -179,6 +196,10 @@ RegisterNUICallback("radio:set-volume", function(data, cb)
 end)
 
 RegisterNUICallback("radio:save-settings", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     local result = request("save-settings", data)
     if result.success then
         apply_server_state({ settings = result.data })
@@ -187,14 +208,25 @@ RegisterNUICallback("radio:save-settings", function(data, cb)
 end)
 
 RegisterNUICallback("radio:save-badge", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(request("save-badge", data))
 end)
 
 RegisterNUICallback("radio:save-display-name", function(data, cb)
+    if type(data) ~= "table" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
     cb(request("save-display-name", data))
 end)
 
 RegisterNetEvent("sky_phone:radio:members", function(data)
+    if type(data) ~= "table" then
+        return
+    end
     local frequency = tonumber(data.frequency)
     local channel_id = frequency == current_primary and 1 or frequency == current_secondary and 2 or nil
     if not channel_id then
diff --git a/sky_phone/source/client/skyride.lua b/sky_phone/source/client/skyride.lua
index abf5862..42240c4 100644
--- a/sky_phone/source/client/skyride.lua
+++ b/sky_phone/source/client/skyride.lua
@@ -88,7 +88,11 @@ end
 for index = 1, #server_callbacks do
     local callback_name = server_callbacks[index]
     RegisterNUICallback(callback_name, function(data, cb)
-        local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data or {})
+        if type(data) ~= "table" then
+            cb({ success = false, error = "invalid_request" })
+            return
+        end
+        local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data)
         if not result then
             cb({ success = false, error = "request_failed" })
             return
diff --git a/sky_phone/source/server/calls.lua b/sky_phone/source/server/calls.lua
index 537306c..b81e731 100644
--- a/sky_phone/source/server/calls.lua
+++ b/sky_phone/source/server/calls.lua
@@ -1024,31 +1024,45 @@ end)
 
 local payphone_models = {}
 for _, model_name in ipairs(Config.Payphones.Props or {}) do
-    payphone_models[model_name] = true
+    if type(model_name) == "string" then
+        payphone_models[model_name] = true
+    end
 end
 
-local function valid_payphone_position(source, data)
-    if type(data) ~= "table" or not payphone_models[data.model] or type(data.coords) ~= "table" then
-        return nil
-    end
-    local x = tonumber(data.coords.x)
-    local y = tonumber(data.coords.y)
-    local z = tonumber(data.coords.z)
-    if not x or not y or not z or x ~= x or y ~= y or z ~= z
-        or math.abs(x) > 10000.0 or math.abs(y) > 10000.0 or math.abs(z) > 2000.0
-    then
-        return nil
-    end
+local payphone_locations, rejected_payphone_locations = SkyPhonePayphones.ValidateLocations(
+    Config.Payphones.Locations,
+    payphone_models
+)
+if Config.Payphones.Enabled and #payphone_locations == 0 then
+    Bridge.Debug(
+        "error",
+        "[sky_phone] Payphones are enabled, but no valid server-owned locations are configured; payphone calls will be rejected.",
+        { always = true }
+    )
+elseif Config.Payphones.Enabled and rejected_payphone_locations > 0 then
+    Bridge.Debug(
+        "warn",
+        "[sky_phone] Ignored %s invalid server-owned payphone location(s).",
+        rejected_payphone_locations,
+        { always = true }
+    )
+end
+
+local function valid_payphone_position(source)
     local ped = GetPlayerPed(source)
     if not ped or ped == 0 then
         return nil
     end
     local player_coords = GetEntityCoords(ped)
-    local booth_coords = vector3(x, y, z)
-    if #(player_coords - booth_coords) > Config.Payphones.ServerValidationDistance then
+    local location = SkyPhonePayphones.FindNearest(
+        payphone_locations,
+        player_coords,
+        Config.Payphones.ServerValidationDistance
+    )
+    if not location then
         return nil
     end
-    return booth_coords, data.model
+    return vector3(location.coords.x, location.coords.y, location.coords.z), location.model
 end
 
 local function payphone_terminal(number, state)
@@ -1064,10 +1078,13 @@ local function payphone_terminal(number, state)
 end
 
 Bridge.Callbacks.Register("sky_phone:payphone:dial", function(source, data)
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
     if not Config.Payphones.Enabled or not SkyPhone.AllowOperation(source, "payphone_dial", 15, 60) then
         return { success = false, error = "rate_limited" }
     end
-    local booth_coords, booth_model = valid_payphone_position(source, data)
+    local booth_coords, booth_model = valid_payphone_position(source)
     if not booth_coords then
         return { success = false, error = "invalid_payphone" }
     end
diff --git a/sky_phone/source/server/payphones.lua b/sky_phone/source/server/payphones.lua
new file mode 100644
index 0000000..3a1fa47
--- /dev/null
+++ b/sky_phone/source/server/payphones.lua
@@ -0,0 +1,105 @@
+SkyPhonePayphones = {}
+
+local maximum_horizontal_coordinate = 10000.0
+local maximum_vertical_coordinate = 2000.0
+
+local function finite_number(value)
+    if type(value) ~= "number" or value ~= value or value == math.huge or value == -math.huge then
+        return nil
+    end
+    return value
+end
+
+local function normalize_coordinates(value, allow_vector)
+    local value_type = type(value)
+    if value_type ~= "table" and (not allow_vector or value_type ~= "vector3") then
+        return nil
+    end
+
+    local x = finite_number(value.x)
+    local y = finite_number(value.y)
+    local z = finite_number(value.z)
+    if not x or not y or not z
+        or math.abs(x) > maximum_horizontal_coordinate
+        or math.abs(y) > maximum_horizontal_coordinate
+        or math.abs(z) > maximum_vertical_coordinate
+    then
+        return nil
+    end
+
+    return { x = x, y = y, z = z }
+end
+
+local function normalize_location(location, allowed_models)
+    if type(location) ~= "table" or type(location.model) ~= "string" or not allowed_models[location.model] then
+        return nil
+    end
+
+    local coords = normalize_coordinates(location.coords, false)
+    if not coords then
+        return nil
+    end
+
+    return {
+        model = location.model,
+        coords = coords,
+    }
+end
+
+function SkyPhonePayphones.ValidateLocations(locations, allowed_models)
+    if type(locations) ~= "table" or type(allowed_models) ~= "table" then
+        return {}, 0
+    end
+
+    local validated = {}
+    local rejected = 0
+    for index, location in pairs(locations) do
+        local valid_index = type(index) == "number" and index >= 1 and index % 1 == 0
+        local normalized = valid_index and normalize_location(location, allowed_models) or nil
+        if normalized then
+            normalized.index = index
+            validated[#validated + 1] = normalized
+        else
+            rejected = rejected + 1
+        end
+    end
+
+    table.sort(validated, function(left, right)
+        return left.index < right.index
+    end)
+    for index = 1, #validated do
+        validated[index].index = nil
+    end
+
+    return validated, rejected
+end
+
+function SkyPhonePayphones.FindNearest(locations, player_coords, maximum_distance)
+    if type(locations) ~= "table" then
+        return nil
+    end
+
+    local coords = normalize_coordinates(player_coords, true)
+    local distance = finite_number(maximum_distance)
+    if not coords or not distance or distance <= 0 then
+        return nil
+    end
+
+    local nearest = nil
+    local nearest_distance_squared = distance * distance
+    for index = 1, #locations do
+        local location = locations[index]
+        if type(location) == "table" and type(location.coords) == "table" then
+            local dx = coords.x - location.coords.x
+            local dy = coords.y - location.coords.y
+            local dz = coords.z - location.coords.z
+            local distance_squared = dx * dx + dy * dy + dz * dz
+            if distance_squared <= nearest_distance_squared then
+                nearest = location
+                nearest_distance_squared = distance_squared
+            end
+        end
+    end
+
+    return nearest
+end
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index 91d0a0f..97c003d 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -914,15 +914,20 @@ function SkyPhone.OpenDeviceForCall(source, imei)
         return false
     end
     local security = load_device_security(imei)
-    if sessions[source] and sessions[source].imei ~= imei then
+    local existing_session = sessions[source]
+    if existing_session and existing_session.imei ~= imei then
         SkyPhoneCompanies.ClearCallAvailability(source)
     end
-    sessions[source] = {
-        imei = imei,
-        slot = matches[1].slot,
-        token = ("%s:%s:%s"):format(imei, tostring(source), tostring(GetGameTimer())),
-        unlocked = security == nil,
-    }
+    if existing_session and existing_session.imei == imei then
+        existing_session.slot = matches[1].slot
+    else
+        sessions[source] = {
+            imei = imei,
+            slot = matches[1].slot,
+            token = ("%s:%s:%s"):format(imei, tostring(source), tostring(GetGameTimer())),
+            unlocked = security == nil,
+        }
+    end
     TriggerClientEvent("sky_phone:device:open", source, bootstrap(source))
     return true
 end
@@ -1075,7 +1080,13 @@ Bridge.Callbacks.Register("sky_phone:device:save", function(source, data)
     if not session then
         return error_response
     end
-    if type(data) ~= "table" or not allowed_device_namespaces[data.namespace] then
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
+    if data.imei ~= session.imei or data.sessionToken ~= session.token then
+        return { success = false, error = "stale_session" }
+    end
+    if not allowed_device_namespaces[data.namespace] then
         return { success = false, error = "invalid_namespace" }
     end
 
diff --git a/sky_phone/source/server/sim.lua b/sky_phone/source/server/sim.lua
index 34bde46..fe6f3c4 100644
--- a/sky_phone/source/server/sim.lua
+++ b/sky_phone/source/server/sim.lua
@@ -406,6 +406,14 @@ Bridge.Callbacks.Register("sky_phone:sim:insert", function(source, data)
     return insert_sim(source, data.imei, data.confirmed == true)
 end)
 
+Bridge.Callbacks.Register("sky_phone:sim:picker-close", function(source)
+    if operation_locks[source] then
+        return { success = false, error = "operation_in_progress" }
+    end
+    pending_insertions[source] = nil
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:sim:eject", function(source)
     if not sim_cards_enabled then
         return { success = false, error = "disabled" }
diff --git a/tests/client_focus.lua b/tests/client_focus.lua
new file mode 100644
index 0000000..f70ae6c
--- /dev/null
+++ b/tests/client_focus.lua
@@ -0,0 +1,67 @@
+dofile("sky_phone/source/client/focus.lua")
+
+local function resolve(overrides)
+    local state = {
+        activity_suspended = false,
+        call_focus = false,
+        camera_active = false,
+        camera_nui_focused = true,
+        is_open = false,
+        notification_focus = false,
+        payphone_focus = false,
+        sim_picker_open = false,
+    }
+    for key, value in pairs(overrides or {}) do
+        state[key] = value
+    end
+    return SkyPhoneFocus.Resolve(state)
+end
+
+local idle = resolve()
+assert(not idle.focused and not idle.keep_input, "idle NUI must release focus and game input override")
+
+local minimized_call = resolve()
+assert(not minimized_call.focused, "a replayed call without an attention claim must stay unfocused")
+
+local incoming_call = resolve({ call_focus = true })
+assert(incoming_call.focused and not incoming_call.keep_input, "incoming call attention must focus the NUI")
+
+local camera_game_input = resolve({
+    camera_active = true,
+    camera_nui_focused = false,
+    is_open = true,
+})
+assert(
+    not camera_game_input.focused and camera_game_input.keep_input,
+    "unfocused camera must own game input over the open phone"
+)
+
+local camera_interrupted_by_call = resolve({
+    call_focus = true,
+    camera_active = true,
+    camera_nui_focused = false,
+    is_open = true,
+})
+assert(
+    camera_interrupted_by_call.focused and not camera_interrupted_by_call.keep_input,
+    "incoming call attention must override unfocused camera input"
+)
+
+local camera_after_connected_call = resolve({
+    call_focus = false,
+    camera_active = true,
+    camera_nui_focused = false,
+    is_open = true,
+})
+assert(
+    not camera_after_connected_call.focused and camera_after_connected_call.keep_input,
+    "connected call without an attention claim must restore unfocused camera input"
+)
+
+local payphone_closed_behind_phone = resolve({ is_open = true, payphone_focus = false })
+assert(payphone_closed_behind_phone.focused, "releasing payphone focus must not clear mobile phone focus")
+
+local suspended = resolve({ activity_suspended = true, call_focus = true, is_open = true })
+assert(not suspended.focused and not suspended.keep_input, "suspended activities must mask every focus claim")
+
+print("Client focus tests passed")
diff --git a/tests/server_payphones.lua b/tests/server_payphones.lua
new file mode 100644
index 0000000..1798a08
--- /dev/null
+++ b/tests/server_payphones.lua
@@ -0,0 +1,39 @@
+dofile("sky_phone/source/server/payphones.lua")
+
+local allowed_models = {
+    prop_phonebox_01a = true,
+    prop_phonebox_04 = true,
+}
+
+local locations, rejected = SkyPhonePayphones.ValidateLocations({
+    { model = "prop_phonebox_01a", coords = { x = 100.0, y = 200.0, z = 30.0 } },
+    { model = "prop_phonebox_04", coords = { x = 105.0, y = 200.0, z = 30.0 } },
+    { model = "not_allowed", coords = { x = 100.0, y = 200.0, z = 30.0 } },
+    { model = "prop_phonebox_01a", coords = { x = "100", y = 200.0, z = 30.0 } },
+    { model = "prop_phonebox_01a", coords = { x = 10001.0, y = 200.0, z = 30.0 } },
+    "malformed",
+}, allowed_models)
+
+assert(#locations == 2, "only strictly valid configured locations must be accepted")
+assert(rejected == 4, "every malformed or disallowed configured location must be reported")
+
+local first = SkyPhonePayphones.FindNearest(locations, { x = 101.0, y = 200.0, z = 30.0 }, 3.0)
+assert(first and first.model == "prop_phonebox_01a", "nearest configured booth must be selected")
+
+local second = SkyPhonePayphones.FindNearest(locations, { x = 104.0, y = 200.0, z = 30.0 }, 3.0)
+assert(second and second.model == "prop_phonebox_04", "another configured booth must be selected by proximity")
+
+assert(
+    not SkyPhonePayphones.FindNearest(locations, { x = 0.0, y = 0.0, z = 0.0 }, 3.0),
+    "a player away from every configured booth must be rejected"
+)
+assert(
+    not SkyPhonePayphones.FindNearest(locations, { x = "100", y = 200.0, z = 30.0 }, 3.0),
+    "malformed player coordinates must be rejected"
+)
+assert(
+    not SkyPhonePayphones.FindNearest(locations, { x = 100.0, y = 200.0, z = 30.0 }, 0.0),
+    "an invalid validation distance must be rejected"
+)
+
+print("Server payphone validation tests passed")

From ff7e00596b114ebd27dcd217e0cad1b493b7cd39 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Wed, 12 Aug 2026 18:59:14 +0200
Subject: [PATCH 39/63] FIX - stabilize CEF media capture and uploads

---
 .../components/MessageAttachmentBubble.vue    |  41 ++-
 frontend/src/components/PhoneMediaCapture.vue | 236 ++++++++++++----
 frontend/src/utils/gameView.test.ts           |  93 ++++++-
 frontend/src/utils/gameView.ts                | 255 ++++++++++++------
 frontend/src/utils/mediaRecorder.test.ts      |  66 +++++
 frontend/src/utils/mediaRecorder.ts           |  62 +++++
 frontend/src/views/apps/CameraApp.vue         |  21 +-
 frontend/src/views/apps/FlipTokApp.vue        | 111 +++++++-
 frontend/src/views/apps/GalleryApp.vue        |  71 ++++-
 frontend/testserver/index.cjs                 |   3 +-
 sky_phone/config/media.lua                    |   4 +-
 sky_phone/source/server/darkchat.lua          |   8 +-
 sky_phone/source/server/db_migrate.lua        |  32 +++
 sky_phone/source/server/media.lua             |  77 ++++--
 sky_phone/source/server/messages.lua          |  11 +-
 15 files changed, 912 insertions(+), 179 deletions(-)
 create mode 100644 frontend/src/utils/mediaRecorder.test.ts
 create mode 100644 frontend/src/utils/mediaRecorder.ts

diff --git a/frontend/src/components/MessageAttachmentBubble.vue b/frontend/src/components/MessageAttachmentBubble.vue
index 729eaed..3db3d83 100644
--- a/frontend/src/components/MessageAttachmentBubble.vue
+++ b/frontend/src/components/MessageAttachmentBubble.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Camera, Pause, Play } from 'lucide-vue-next'
+import { Camera, Pause, Play, TriangleAlert } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
+import { usePhoneStore } from '@/stores/phone'
 import type { SmsMessageType } from '@/types/messages'
 
 type MessageAttachment = {
@@ -11,7 +12,9 @@ type MessageAttachment = {
 }
 
 const props = defineProps<{ message: MessageAttachment }>()
+const phone = usePhoneStore()
 const playing = ref(false)
+const playbackFailed = ref(false)
 const video = ref<HTMLVideoElement>()
 
 const imageStyles: Record<string, string> = {
@@ -55,9 +58,18 @@ async function toggleVideo(): Promise<void> {
     playing.value = !playing.value
     return
   }
-  if (video.value.paused) await video.value.play()
-  else video.value.pause()
-  playing.value = !video.value.paused
+  if (!video.value.paused) {
+    video.value.pause()
+    return
+  }
+  playbackFailed.value = false
+  try {
+    await video.value.play()
+  } catch (error) {
+    playing.value = false
+    playbackFailed.value = true
+    console.error('[Messages] Could not play the attached video.', error)
+  }
 }
 
 function durationLabel(milliseconds: number | null): string {
@@ -85,8 +97,13 @@ function durationLabel(milliseconds: number | null): string {
     v-else-if="message.message_type === 'video'"
     type="button"
     class="messages-attachment messages-attachment--video"
-    :class="{ playing }"
+    :class="{ playing, 'messages-attachment--failed': playbackFailed }"
     :style="{ background }"
+    :aria-label="
+      playbackFailed
+        ? phone.t('Apps.photos.errors.unsupported')
+        : phone.t('Apps.photos.videoAlt')
+    "
     @click="toggleVideo"
   >
     <video
@@ -95,15 +112,25 @@ function durationLabel(milliseconds: number | null): string {
       :src="mediaUrl"
       playsinline
       preload="metadata"
+      @play="playing = true"
+      @pause="playing = false"
       @ended="playing = false"
+      @error="playbackFailed = true"
     />
     <span
-      ><Pause v-if="playing" :size="22" fill="currentColor" /><Play
+      ><TriangleAlert v-if="playbackFailed" :size="22" /><Pause
+        v-else-if="playing"
+        :size="22"
+        fill="currentColor"
+      /><Play
         v-else
         :size="22"
         fill="currentColor"
     /></span>
-    <small>{{ durationLabel(message.media_duration_ms) }}</small>
+    <small v-if="playbackFailed">{{
+      phone.t('Apps.photos.errors.unsupported')
+    }}</small>
+    <small v-else>{{ durationLabel(message.media_duration_ms) }}</small>
   </button>
   <div v-else class="messages-attachment messages-attachment--gif">
     <img
diff --git a/frontend/src/components/PhoneMediaCapture.vue b/frontend/src/components/PhoneMediaCapture.vue
index eeb4c80..b10eaa9 100644
--- a/frontend/src/components/PhoneMediaCapture.vue
+++ b/frontend/src/components/PhoneMediaCapture.vue
@@ -4,6 +4,11 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 import type { UploadReady } from '@/types/media'
 import { createGameView, type GameView } from '@/utils/gameView'
+import {
+  bindMediaRecorderError,
+  setBoundedMapEntry,
+  stopMediaRecorder,
+} from '@/utils/mediaRecorder'
 import { nuiCall } from '@/utils/nui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
@@ -12,6 +17,7 @@ type PendingVideo = { blob: Blob; fileName: string }
 
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const pendingVideos = new Map<string, PendingVideo>()
+const maxPendingVideos = 3
 const captureFps = 30
 const maxCaptureEdge = 720
 const portraitAspect = 3 / 4
@@ -23,12 +29,16 @@ let gameView: GameView | null = null
 let renderFrameId: number | undefined
 let lastRenderAt = 0
 let recorder: MediaRecorder | null = null
+let recordingStarting = false
 let stream: MediaStream | null = null
 let microphoneStream: MediaStream | null = null
 let chunks: RecordingChunk[] = []
 let lastChunkAt = 0
 let lastChunkTimecode: number | null = null
+let recordingStartedAt = 0
+let recordingGeneration = 0
 let flushTimer: number | undefined
+let removeRecorderErrorListener: (() => void) | null = null
 
 function captureDimensions(): { height: number; width: number } {
   return landscape
@@ -54,7 +64,11 @@ function ensureGameView(): GameView {
   if (gameView && !gameView.isLost()) return gameView
   gameView?.dispose()
   const dimensions = captureDimensions()
-  gameView = createGameView(canvasRef.value)
+  gameView = createGameView(canvasRef.value, {
+    onContextRestored: () => {
+      if (recorder?.state === 'recording') startRenderLoop()
+    },
+  })
   gameView.resize(
     dimensions.width,
     dimensions.height,
@@ -93,6 +107,7 @@ function resetRecording(): void {
   chunks = []
   lastChunkAt = 0
   lastChunkTimecode = null
+  recordingStartedAt = 0
 }
 
 function stopTracks(): void {
@@ -103,8 +118,22 @@ function stopTracks(): void {
 }
 
 function cleanupRecording(): void {
-  if (recorder && recorder.state !== 'inactive') recorder.stop()
+  recordingGeneration += 1
+  recordingStarting = false
+  const activeRecorder = recorder
   recorder = null
+  removeRecorderErrorListener?.()
+  removeRecorderErrorListener = null
+  if (activeRecorder) {
+    activeRecorder.ondataavailable = null
+    if (activeRecorder.state !== 'inactive') {
+      try {
+        activeRecorder.stop()
+      } catch (error) {
+        console.error('[Camera] Could not stop the failed media recorder.', error)
+      }
+    }
+  }
   stopTracks()
   if (flushTimer !== undefined) window.clearInterval(flushTimer)
   flushTimer = undefined
@@ -114,7 +143,7 @@ function cleanupRecording(): void {
 }
 
 async function startRecording(data: Record<string, unknown>): Promise<void> {
-  if (recorder) return
+  if (recorder || recordingStarting) return
   if (typeof MediaRecorder === 'undefined') {
     window.postMessage(
       {
@@ -129,7 +158,22 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
   if (Number.isFinite(configuredBitrate) && configuredBitrate > 0) {
     bitrateBps = Math.round(configuredBitrate * 1000)
   }
-  startRenderLoop()
+  try {
+    startRenderLoop()
+  } catch (error) {
+    console.error('[Camera] Could not start game-view recording.', error)
+    cleanupRecording()
+    window.postMessage(
+      {
+        data: { error: 'capture_failed', success: false },
+        type: 'camera:recordError',
+      },
+      '*',
+    )
+    return
+  }
+  recordingStarting = true
+  const generation = ++recordingGeneration
   resetRecording()
   const videoStream = canvasRef.value?.captureStream(captureFps) ?? null
   if (!videoStream) {
@@ -138,15 +182,23 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
   }
   if (data.microphoneEnabled === true) {
     try {
-      microphoneStream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          autoGainControl: true,
-          echoCancellation: true,
-          noiseSuppression: true,
-        },
-      })
+      const acquiredMicrophoneStream =
+        await navigator.mediaDevices.getUserMedia({
+          audio: {
+            autoGainControl: true,
+            echoCancellation: true,
+            noiseSuppression: true,
+          },
+        })
+      if (generation !== recordingGeneration) {
+        acquiredMicrophoneStream.getTracks().forEach((track) => track.stop())
+        videoStream.getTracks().forEach((track) => track.stop())
+        return
+      }
+      microphoneStream = acquiredMicrophoneStream
     } catch {
       videoStream.getTracks().forEach((track) => track.stop())
+      if (generation !== recordingGeneration) return
       cleanupRecording()
       window.postMessage(
         {
@@ -162,16 +214,51 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
     ...videoStream.getVideoTracks(),
     ...(microphoneStream?.getAudioTracks() ?? []),
   ])
+  if (generation !== recordingGeneration) {
+    stopTracks()
+    stopRenderLoop()
+    return
+  }
   const mimeType = [
     'video/webm;codecs=vp8,opus',
     'video/webm;codecs=vp8',
     'video/webm',
   ].find((type) => MediaRecorder.isTypeSupported(type))
-  recorder = new MediaRecorder(stream, {
-    ...(mimeType ? { mimeType } : {}),
-    audioBitsPerSecond: 128_000,
-    videoBitsPerSecond: bitrateBps,
-  })
+  try {
+    recorder = new MediaRecorder(stream, {
+      ...(mimeType ? { mimeType } : {}),
+      audioBitsPerSecond: 128_000,
+      videoBitsPerSecond: bitrateBps,
+    })
+  } catch (error) {
+    console.error('[Camera] Could not create the media recorder.', error)
+    cleanupRecording()
+    window.postMessage(
+      {
+        data: { error: 'unsupported', success: false },
+        type: 'camera:recordError',
+      },
+      '*',
+    )
+    return
+  }
+  const activeRecorder = recorder
+  removeRecorderErrorListener = bindMediaRecorderError(
+    activeRecorder,
+    () =>
+      generation === recordingGeneration && recorder === activeRecorder,
+    (event) => {
+      console.error('[Camera] Media recorder failed while recording.', event)
+      cleanupRecording()
+      window.postMessage(
+        {
+          data: { error: 'capture_failed', success: false },
+          type: 'camera:recordError',
+        },
+        '*',
+      )
+    },
+  )
   recorder.ondataavailable = (event) => {
     if (!event.data.size) return
     const now = Date.now()
@@ -186,7 +273,22 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
     lastChunkAt = now
     chunks.push({ blob: event.data, durationMs })
   }
-  recorder.start()
+  try {
+    recorder.start()
+  } catch (error) {
+    console.error('[Camera] Could not start the media recorder.', error)
+    cleanupRecording()
+    window.postMessage(
+      {
+        data: { error: 'capture_failed', success: false },
+        type: 'camera:recordError',
+      },
+      '*',
+    )
+    return
+  }
+  recordingStartedAt = Date.now()
+  recordingStarting = false
   flushTimer = window.setInterval(() => {
     if (recorder?.state === 'recording') recorder.requestData()
   }, 1000)
@@ -196,37 +298,78 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
 async function stopRecording(data: Record<string, unknown>): Promise<void> {
   const correlationId = String(data.correlationId ?? '')
   if (!recorder || recorder.state === 'inactive' || !correlationId) return
+  const generation = recordingGeneration
+  const activeRecorder = recorder
   postRecordState(false, true)
-  recorder.requestData()
-  await new Promise((resolve) => window.setTimeout(resolve, 120))
-  recorder.stop()
-  await new Promise((resolve) => window.setTimeout(resolve, 120))
   if (flushTimer !== undefined) window.clearInterval(flushTimer)
   flushTimer = undefined
-  stopTracks()
-  recorder = null
-  stopRenderLoop()
-  const durationMs = chunks.reduce((sum, entry) => sum + entry.durationMs, 0)
-  let blob = new Blob(
-    chunks.map((entry) => entry.blob),
-    { type: 'video/webm' },
-  )
-  blob = await (
-    fixWebmDuration as unknown as (
-      source: Blob,
-      duration: number,
-      options: { logger: boolean },
-    ) => Promise<Blob>
-  )(blob, durationMs, { logger: false })
-  resetRecording()
-  pendingVideos.set(correlationId, {
-    blob,
-    fileName: `camera-${correlationId}.webm`,
-  })
-  await nuiCall('media:requestUpload', {
-    correlationId,
-    mediaType: 'video',
-  })
+  const stopErrorListener = removeRecorderErrorListener
+  stopErrorListener?.()
+  if (removeRecorderErrorListener === stopErrorListener) {
+    removeRecorderErrorListener = null
+  }
+  try {
+    await stopMediaRecorder(activeRecorder)
+    if (generation !== recordingGeneration) return
+    const durationMs = Math.max(
+      chunks.reduce((sum, entry) => sum + entry.durationMs, 0),
+      recordingStartedAt ? Date.now() - recordingStartedAt : 0,
+    )
+    let blob = new Blob(
+      chunks.map((entry) => entry.blob),
+      { type: 'video/webm' },
+    )
+    blob = await (
+      fixWebmDuration as unknown as (
+        source: Blob,
+        duration: number,
+        options: { logger: boolean },
+      ) => Promise<Blob>
+    )(blob, durationMs, { logger: false })
+    if (generation !== recordingGeneration) return
+    setBoundedMapEntry(
+      pendingVideos,
+      correlationId,
+      { blob, fileName: `camera-${correlationId}.webm` },
+      maxPendingVideos,
+    )
+    const response = await nuiCall('media:requestUpload', {
+      correlationId,
+      mediaType: 'video',
+    })
+    if (generation !== recordingGeneration) return
+    if (!response.success) {
+      pendingVideos.delete(correlationId)
+      window.postMessage(
+        {
+          data: { correlationId, error: 'request_failed', success: false },
+          type: 'media:uploadResult',
+        },
+        '*',
+      )
+    }
+  } catch (error) {
+    if (generation === recordingGeneration) {
+      console.error('[Camera] Could not finalize the video recording.', error)
+      pendingVideos.delete(correlationId)
+      window.postMessage(
+        {
+          data: { correlationId, error: 'capture_failed', success: false },
+          type: 'media:uploadResult',
+        },
+        '*',
+      )
+    }
+  } finally {
+    if (generation === recordingGeneration || recorder === activeRecorder) {
+      if (recorder === activeRecorder) {
+        recorder = null
+      }
+      stopTracks()
+      stopRenderLoop()
+      resetRecording()
+    }
+  }
 }
 
 async function renderFrames(view: GameView, count: number): Promise<void> {
@@ -381,6 +524,9 @@ function onMessage(event: MessageEvent): void {
     }
   } else if (message.type === 'media:uploadReady') {
     void uploadReady(message.data as UploadReady)
+  } else if (message.type === 'media:uploadResult') {
+    const correlationId = String(message.data?.correlationId ?? '')
+    if (correlationId) pendingVideos.delete(correlationId)
   }
 }
 
diff --git a/frontend/src/utils/gameView.test.ts b/frontend/src/utils/gameView.test.ts
index b218a9c..39112dd 100644
--- a/frontend/src/utils/gameView.test.ts
+++ b/frontend/src/utils/gameView.test.ts
@@ -1,6 +1,6 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
-import { gameViewGeometry } from '@/utils/gameView'
+import { createGameView, gameViewGeometry } from '@/utils/gameView'
 
 describe('gameViewGeometry', () => {
   it('center-crops a widescreen game view for 3:4 portrait output', () => {
@@ -60,3 +60,92 @@ describe('gameViewGeometry', () => {
     ])
   })
 })
+
+describe('createGameView', () => {
+  it('recreates graphics resources and resumes after context restoration', () => {
+    const gl = {
+      ARRAY_BUFFER: 1,
+      CLAMP_TO_EDGE: 2,
+      COLOR_BUFFER_BIT: 4,
+      COMPILE_STATUS: 5,
+      DYNAMIC_DRAW: 6,
+      FLOAT: 7,
+      FRAGMENT_SHADER: 8,
+      LINK_STATUS: 9,
+      MIRRORED_REPEAT: 10,
+      NEAREST: 11,
+      REPEAT: 12,
+      RGBA: 13,
+      STATIC_DRAW: 14,
+      TEXTURE_2D: 15,
+      TEXTURE_MAG_FILTER: 16,
+      TEXTURE_MIN_FILTER: 17,
+      TEXTURE_WRAP_S: 18,
+      TEXTURE_WRAP_T: 19,
+      TRIANGLE_STRIP: 20,
+      UNSIGNED_BYTE: 21,
+      VERTEX_SHADER: 22,
+      attachShader: vi.fn(),
+      bindBuffer: vi.fn(),
+      bindTexture: vi.fn(),
+      bufferData: vi.fn(),
+      clear: vi.fn(),
+      clearColor: vi.fn(),
+      compileShader: vi.fn(),
+      createBuffer: vi.fn(() => ({})),
+      createProgram: vi.fn(() => ({})),
+      createShader: vi.fn(() => ({})),
+      createTexture: vi.fn(() => ({})),
+      deleteBuffer: vi.fn(),
+      deleteProgram: vi.fn(),
+      deleteShader: vi.fn(),
+      deleteTexture: vi.fn(),
+      drawArrays: vi.fn(),
+      enableVertexAttribArray: vi.fn(),
+      finish: vi.fn(),
+      getAttribLocation: vi.fn((_program, name: string) =>
+        name === 'a_position' ? 0 : 1,
+      ),
+      getExtension: vi.fn(() => ({ loseContext: vi.fn() })),
+      getProgramInfoLog: vi.fn(() => ''),
+      getProgramParameter: vi.fn(() => true),
+      getShaderInfoLog: vi.fn(() => ''),
+      getShaderParameter: vi.fn(() => true),
+      getUniformLocation: vi.fn(() => ({})),
+      linkProgram: vi.fn(),
+      shaderSource: vi.fn(),
+      texImage2D: vi.fn(),
+      texParameterf: vi.fn(),
+      uniform1i: vi.fn(),
+      useProgram: vi.fn(),
+      vertexAttribPointer: vi.fn(),
+      viewport: vi.fn(),
+    }
+    const canvas = Object.assign(new EventTarget(), {
+      getContext: () => gl,
+      height: 0,
+      width: 0,
+    }) as unknown as HTMLCanvasElement
+    const restored = vi.fn()
+    vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    vi.spyOn(console, 'info').mockImplementation(() => undefined)
+    const view = createGameView(canvas, { onContextRestored: restored })
+    view.resize(540, 720, 1920, 1080, 2)
+
+    const lost = new Event('webglcontextlost', { cancelable: true })
+    canvas.dispatchEvent(lost)
+    expect(lost.defaultPrevented).toBe(true)
+    expect(view.isLost()).toBe(true)
+
+    canvas.dispatchEvent(new Event('webglcontextrestored'))
+    expect(view.isLost()).toBe(false)
+    expect(restored).toHaveBeenCalledOnce()
+    expect(gl.createProgram).toHaveBeenCalledTimes(2)
+    expect(canvas.width).toBe(540)
+    expect(canvas.height).toBe(720)
+
+    view.render()
+    expect(gl.drawArrays).toHaveBeenCalledOnce()
+    view.dispose()
+  })
+})
diff --git a/frontend/src/utils/gameView.ts b/frontend/src/utils/gameView.ts
index 9dd0ef1..1485c98 100644
--- a/frontend/src/utils/gameView.ts
+++ b/frontend/src/utils/gameView.ts
@@ -31,6 +31,8 @@ export interface GameView {
 }
 
 export interface GameViewOptions {
+  onContextLost?: () => void
+  onContextRestored?: () => void
   preserveDrawingBuffer?: boolean
 }
 
@@ -113,80 +115,180 @@ export function createGameView(
 
   let lost = false
   let disposed = false
+  let program: WebGLProgram | null = null
+  let positionBuffer: WebGLBuffer | null = null
+  let texcoordBuffer: WebGLBuffer | null = null
+  let texture: WebGLTexture | null = null
+  let lastSize: {
+    height: number
+    sourceHeight: number
+    sourceWidth: number
+    width: number
+    zoom: number
+  } | null = null
+
+  const releaseResources = (): void => {
+    if (positionBuffer) gl.deleteBuffer(positionBuffer)
+    if (texcoordBuffer) gl.deleteBuffer(texcoordBuffer)
+    if (texture) gl.deleteTexture(texture)
+    if (program) gl.deleteProgram(program)
+    positionBuffer = null
+    texcoordBuffer = null
+    texture = null
+    program = null
+  }
+
+  const initializeResources = (): void => {
+    releaseResources()
+    const nextProgram = gl.createProgram()
+    if (!nextProgram) throw new Error('game_view_program_unavailable')
+    const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER)
+    const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER)
+    gl.attachShader(nextProgram, vertexShader)
+    gl.attachShader(nextProgram, fragmentShader)
+    gl.linkProgram(nextProgram)
+    gl.deleteShader(vertexShader)
+    gl.deleteShader(fragmentShader)
+    if (!gl.getProgramParameter(nextProgram, gl.LINK_STATUS)) {
+      const error = gl.getProgramInfoLog(nextProgram)
+      gl.deleteProgram(nextProgram)
+      throw new Error(error || 'game_view_program_failed')
+    }
+    gl.useProgram(nextProgram)
+
+    const positionLocation = gl.getAttribLocation(nextProgram, 'a_position')
+    const texcoordLocation = gl.getAttribLocation(nextProgram, 'a_texcoord')
+    if (positionLocation < 0 || texcoordLocation < 0) {
+      gl.deleteProgram(nextProgram)
+      throw new Error('game_view_attributes_unavailable')
+    }
+
+    const nextPositionBuffer = gl.createBuffer()
+    const nextTexcoordBuffer = gl.createBuffer()
+    const nextTexture = gl.createTexture()
+    if (!nextPositionBuffer || !nextTexcoordBuffer || !nextTexture) {
+      if (nextPositionBuffer) gl.deleteBuffer(nextPositionBuffer)
+      if (nextTexcoordBuffer) gl.deleteBuffer(nextTexcoordBuffer)
+      if (nextTexture) gl.deleteTexture(nextTexture)
+      gl.deleteProgram(nextProgram)
+      throw new Error('game_view_resources_unavailable')
+    }
+
+    program = nextProgram
+    positionBuffer = nextPositionBuffer
+    texcoordBuffer = nextTexcoordBuffer
+    texture = nextTexture
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.DYNAMIC_DRAW,
+    )
+    gl.enableVertexAttribArray(positionLocation)
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
+      gl.STATIC_DRAW,
+    )
+    gl.enableVertexAttribArray(texcoordLocation)
+    gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0)
+
+    gl.bindTexture(gl.TEXTURE_2D, texture)
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([0, 0, 0, 255]),
+    )
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+    // CitizenFX watches this exact wrap-mode sequence and replaces the seeded pixel with the live
+    // game backbuffer. These calls are intentionally not redundant.
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+    gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0)
+    gl.clearColor(0, 0, 0, 1)
+  }
+
+  const applySize = (): void => {
+    if (!lastSize || !positionBuffer || !texcoordBuffer) return
+    const geometry = gameViewGeometry(
+      lastSize.sourceWidth,
+      lastSize.sourceHeight,
+      lastSize.width,
+      lastSize.height,
+      lastSize.zoom,
+    )
+    canvas.width = lastSize.width
+    canvas.height = lastSize.height
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, geometry.positions, gl.DYNAMIC_DRAW)
+    gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      geometry.textureCoordinates,
+      gl.DYNAMIC_DRAW,
+    )
+    gl.viewport(0, 0, lastSize.width, lastSize.height)
+  }
+
   const onContextLost = (event: Event) => {
     event.preventDefault()
     lost = true
     console.error('[Camera] Game-view WebGL context lost.')
+    options.onContextLost?.()
+  }
+  const onContextRestored = () => {
+    if (disposed) return
+    try {
+      initializeResources()
+      lost = false
+      applySize()
+      console.info('[Camera] Game-view WebGL context restored.')
+      options.onContextRestored?.()
+    } catch (error) {
+      lost = true
+      console.error('[Camera] Could not restore the game-view WebGL context.', error)
+    }
   }
   canvas.addEventListener(
     'webglcontextlost',
     onContextLost as EventListener,
     false,
   )
-
-  const program = gl.createProgram()
-  if (!program) throw new Error('game_view_program_unavailable')
-  gl.attachShader(program, compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER))
-  gl.attachShader(
-    program,
-    compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER),
+  canvas.addEventListener(
+    'webglcontextrestored',
+    onContextRestored as EventListener,
+    false,
   )
-  gl.linkProgram(program)
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    throw new Error(gl.getProgramInfoLog(program) || 'game_view_program_failed')
+  try {
+    initializeResources()
+  } catch (error) {
+    canvas.removeEventListener(
+      'webglcontextlost',
+      onContextLost as EventListener,
+      false,
+    )
+    canvas.removeEventListener(
+      'webglcontextrestored',
+      onContextRestored as EventListener,
+      false,
+    )
+    releaseResources()
+    throw error
   }
-  gl.useProgram(program)
-
-  const positionLocation = gl.getAttribLocation(program, 'a_position')
-  const texcoordLocation = gl.getAttribLocation(program, 'a_texcoord')
-  if (positionLocation < 0 || texcoordLocation < 0) {
-    throw new Error('game_view_attributes_unavailable')
-  }
-
-  const positionBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
-    gl.DYNAMIC_DRAW,
-  )
-  gl.enableVertexAttribArray(positionLocation)
-  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
-
-  const texcoordBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
-    gl.STATIC_DRAW,
-  )
-  gl.enableVertexAttribArray(texcoordLocation)
-  gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0)
-
-  const texture = gl.createTexture()
-  gl.bindTexture(gl.TEXTURE_2D, texture)
-  gl.texImage2D(
-    gl.TEXTURE_2D,
-    0,
-    gl.RGBA,
-    1,
-    1,
-    0,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
-    new Uint8Array([0, 0, 0, 255]),
-  )
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
-  // CitizenFX watches this exact wrap-mode sequence and replaces the seeded pixel with the live
-  // game backbuffer. These calls are intentionally not redundant.
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)
-  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-  gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0)
-  gl.clearColor(0, 0, 0, 1)
 
   return {
     canvas,
@@ -198,11 +300,18 @@ export function createGameView(
         onContextLost as EventListener,
         false,
       )
+      canvas.removeEventListener(
+        'webglcontextrestored',
+        onContextRestored as EventListener,
+        false,
+      )
+      if (!lost) releaseResources()
       gl.getExtension('WEBGL_lose_context')?.loseContext()
     },
     isLost: () => lost,
     render() {
-      if (disposed || lost) return
+      if (disposed || lost || !program) return
+      gl.useProgram(program)
       gl.clear(gl.COLOR_BUFFER_BIT)
       gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
       gl.finish()
@@ -214,25 +323,15 @@ export function createGameView(
       sourceHeight = window.innerHeight,
       zoom = 1,
     ) {
-      if (disposed || lost) return
-      canvas.width = width
-      canvas.height = height
-      const geometry = gameViewGeometry(
+      lastSize = {
+        height,
         sourceWidth,
         sourceHeight,
         width,
-        height,
         zoom,
-      )
-      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
-      gl.bufferData(gl.ARRAY_BUFFER, geometry.positions, gl.DYNAMIC_DRAW)
-      gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
-      gl.bufferData(
-        gl.ARRAY_BUFFER,
-        geometry.textureCoordinates,
-        gl.DYNAMIC_DRAW,
-      )
-      gl.viewport(0, 0, width, height)
+      }
+      if (disposed || lost) return
+      applySize()
     },
   }
 }
diff --git a/frontend/src/utils/mediaRecorder.test.ts b/frontend/src/utils/mediaRecorder.test.ts
new file mode 100644
index 0000000..d8b0dde
--- /dev/null
+++ b/frontend/src/utils/mediaRecorder.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  bindMediaRecorderError,
+  setBoundedMapEntry,
+  stopMediaRecorder,
+} from '@/utils/mediaRecorder'
+
+class FakeRecorder extends EventTarget {
+  state: RecordingState = 'recording'
+  stop = vi.fn(() => {
+    this.state = 'inactive'
+    this.dispatchEvent(new Event('stop'))
+  })
+}
+
+describe('media recorder lifecycle', () => {
+  it('resolves from the recorder stop event', async () => {
+    const recorder = new FakeRecorder()
+
+    await stopMediaRecorder(recorder as unknown as MediaRecorder)
+
+    expect(recorder.stop).toHaveBeenCalledOnce()
+    expect(recorder.state).toBe('inactive')
+  })
+
+  it('runs recorder error cleanup only for the current generation', () => {
+    const staleRecorder = new FakeRecorder()
+    const currentRecorder = new FakeRecorder()
+    const cleanup = vi.fn()
+    let generation = 1
+    const unbindStale = bindMediaRecorderError(
+      staleRecorder as unknown as MediaRecorder,
+      () => generation === 1,
+      cleanup,
+    )
+
+    generation = 2
+    staleRecorder.dispatchEvent(new Event('error'))
+    expect(cleanup).not.toHaveBeenCalled()
+    unbindStale()
+
+    bindMediaRecorderError(
+      currentRecorder as unknown as MediaRecorder,
+      () => generation === 2,
+      cleanup,
+    )
+    currentRecorder.dispatchEvent(new Event('error'))
+    currentRecorder.dispatchEvent(new Event('error'))
+
+    expect(cleanup).toHaveBeenCalledOnce()
+  })
+
+  it('keeps pending recording buffers bounded and evicts the oldest', () => {
+    const pending = new Map<string, number>()
+
+    setBoundedMapEntry(pending, 'first', 1, 2)
+    setBoundedMapEntry(pending, 'second', 2, 2)
+    setBoundedMapEntry(pending, 'third', 3, 2)
+
+    expect([...pending.entries()]).toEqual([
+      ['second', 2],
+      ['third', 3],
+    ])
+  })
+})
diff --git a/frontend/src/utils/mediaRecorder.ts b/frontend/src/utils/mediaRecorder.ts
new file mode 100644
index 0000000..87d7e04
--- /dev/null
+++ b/frontend/src/utils/mediaRecorder.ts
@@ -0,0 +1,62 @@
+export function bindMediaRecorderError(
+  recorder: MediaRecorder,
+  isCurrent: () => boolean,
+  onError: (event: Event) => void,
+): () => void {
+  let bound = true
+  const handleError = (event: Event): void => {
+    if (!bound || !isCurrent()) return
+    bound = false
+    recorder.removeEventListener('error', handleError)
+    onError(event)
+  }
+  recorder.addEventListener('error', handleError)
+  return () => {
+    if (!bound) return
+    bound = false
+    recorder.removeEventListener('error', handleError)
+  }
+}
+
+export async function stopMediaRecorder(recorder: MediaRecorder): Promise<void> {
+  if (recorder.state === 'inactive') return
+
+  await new Promise<void>((resolve, reject) => {
+    const cleanup = (): void => {
+      recorder.removeEventListener('stop', onStop)
+      recorder.removeEventListener('error', onError)
+    }
+    const onStop = (): void => {
+      cleanup()
+      resolve()
+    }
+    const onError = (): void => {
+      cleanup()
+      reject(new Error('media_recorder_stop_failed'))
+    }
+
+    recorder.addEventListener('stop', onStop, { once: true })
+    recorder.addEventListener('error', onError, { once: true })
+    try {
+      recorder.stop()
+    } catch (error) {
+      cleanup()
+      reject(error)
+    }
+  })
+}
+
+export function setBoundedMapEntry<Key, Value>(
+  entries: Map<Key, Value>,
+  key: Key,
+  value: Value,
+  maximumSize: number,
+): void {
+  entries.delete(key)
+  entries.set(key, value)
+  while (entries.size > Math.max(0, maximumSize)) {
+    const oldest = entries.keys().next()
+    if (oldest.done) break
+    entries.delete(oldest.value)
+  }
+}
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index c009a22..fc5148a 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -53,6 +53,7 @@ const elapsed = ref('00:00')
 const captures = ref<CaptureItem[]>([])
 const latestMedia = ref<PhoneMedia | null>(null)
 const gameCanvas = ref<HTMLCanvasElement | null>(null)
+const gameViewUnavailable = ref(false)
 const noticeText = ref('')
 const videoBitrateKbps = ref(1500)
 let shutterTimer: number | undefined
@@ -291,10 +292,26 @@ function resizeGameView(entry?: ResizeObserverEntry): void {
 
 function startGameView(): void {
   if (isDevelopment || !gameCanvas.value) return
-  gameView = createGameView(gameCanvas.value)
+  try {
+    gameView = createGameView(gameCanvas.value, {
+      onContextRestored: () => {
+        resizeGameView()
+        startGameViewRenderLoop()
+      },
+    })
+  } catch (error) {
+    gameViewUnavailable.value = true
+    console.error('[Camera] Game-view rendering is unavailable.', error)
+    return
+  }
   resizeObserver = new ResizeObserver((entries) => resizeGameView(entries[0]))
   resizeObserver.observe(gameCanvas.value)
   resizeGameView()
+  startGameViewRenderLoop()
+}
+
+function startGameViewRenderLoop(): void {
+  if (renderFrameId !== undefined) return
   const render = () => {
     if (!gameView || gameView.isLost()) {
       renderFrameId = undefined
@@ -434,7 +451,7 @@ onBeforeUnmount(() => {
   >
     <div class="camera-viewport" @wheel.prevent="zoomWithWheel">
       <canvas
-        v-if="!isDevelopment"
+        v-if="!isDevelopment && !gameViewUnavailable"
         ref="gameCanvas"
         class="camera-game-view"
         aria-hidden="true"
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index a79fa4d..fde1c29 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -17,6 +17,7 @@ import {
   ShieldAlert,
   Send,
   Share2,
+  TriangleAlert,
   UserRound,
   Video,
   X,
@@ -116,6 +117,7 @@ const publishing = ref(false)
 const feedback = ref('')
 const likedPulseId = ref<string | null>(null)
 const reactionPulse = ref<{ id: string; kind: 'like' | 'save' } | null>(null)
+const playbackFailedIds = ref(new Set<string>())
 const profileDraft = ref({
   accountType: 'person',
   bio: '',
@@ -250,11 +252,66 @@ async function confirmLogout(): Promise<void> {
 }
 
 function setVideoElement(id: string, element: unknown): void {
-  if (element instanceof HTMLVideoElement) videoElements.set(id, element)
+  if (element instanceof HTMLVideoElement) {
+    videoElements.set(id, element)
+    return
+  }
+  videoElements.delete(id)
+  setPlaybackFailed(id, false)
 }
 
 function setMusicElement(id: string, element: unknown): void {
-  if (element instanceof HTMLAudioElement) musicElements.set(id, element)
+  if (element instanceof HTMLAudioElement) {
+    musicElements.set(id, element)
+    return
+  }
+  musicElements.delete(id)
+}
+
+function setPlaybackFailed(id: string, failed: boolean): void {
+  const next = new Set(playbackFailedIds.value)
+  if (failed) next.add(id)
+  else next.delete(id)
+  playbackFailedIds.value = next
+}
+
+async function playFeedVideo(
+  id: string,
+  element: HTMLVideoElement,
+  showNotice = false,
+): Promise<boolean> {
+  setPlaybackFailed(id, false)
+  try {
+    await element.play()
+  } catch (error) {
+    setPlaybackFailed(id, true)
+    console.error(`[FlipTok] Could not play video ${id}.`, error)
+    if (showNotice) notify(t('errors.video_not_found'))
+    return false
+  }
+
+  const music = musicElements.get(id)
+  if (music) {
+    try {
+      await music.play()
+    } catch (error) {
+      console.error(`[FlipTok] Could not play music for video ${id}.`, error)
+    }
+  }
+  return true
+}
+
+function handleFeedVideoError(id: string, event: Event): void {
+  setPlaybackFailed(id, true)
+  const code = (event.currentTarget as HTMLVideoElement).error?.code
+  console.error(
+    `[FlipTok] Video ${id} could not be decoded or loaded${code ? ` (media error ${code})` : ''}.`,
+  )
+}
+
+function retryPlayback(video: FlipTokVideo): void {
+  const element = videoElements.get(video.id)
+  if (element) void playFeedVideo(video.id, element, true)
 }
 
 function chooseMusicTrack(trackId: string): void {
@@ -305,10 +362,8 @@ function observeVideos(): void {
               otherAudio?.pause()
             }
           })
-          void video.play().catch(() => undefined)
           const id = video.dataset.id
-          const music = id ? musicElements.get(id) : undefined
-          if (music) void music.play().catch(() => undefined)
+          if (id) void playFeedVideo(id, video)
           if (id) void nuiCall('fliptok:view', { id })
         } else {
           video.pause()
@@ -327,8 +382,7 @@ function togglePlayback(video: FlipTokVideo): void {
   if (!element) return
   const music = musicElements.get(video.id)
   if (element.paused) {
-    void element.play()
-    if (music) void music.play().catch(() => undefined)
+    void playFeedVideo(video.id, element, true)
   } else {
     element.pause()
     music?.pause()
@@ -339,6 +393,7 @@ function prepareFeedVideo(
   video: FlipTokVideo,
   element: HTMLVideoElement,
 ): void {
+  setPlaybackFailed(video.id, false)
   element.volume = (Number(video.original_volume) || 0) / 100
   const start = Math.min(
     (Number(video.trim_start_ms) || 0) / 1000,
@@ -943,6 +998,7 @@ onBeforeUnmount(() => {
             @timeupdate="
               enforceVideoTrim(video, $event.target as HTMLVideoElement)
             "
+            @error="handleFeedVideoError(video.id, $event)"
           />
           <audio
             v-if="video.music_url"
@@ -959,6 +1015,17 @@ onBeforeUnmount(() => {
             @click="handleVideoClick(video)"
             @dblclick.prevent="handleVideoDoubleClick(video)"
           />
+          <button
+            v-if="playbackFailedIds.has(video.id)"
+            type="button"
+            class="video-playback-fallback"
+            :aria-label="`${t('errors.video_not_found')} ${phone.t('Common.start')}`"
+            @click.stop="retryPlayback(video)"
+          >
+            <TriangleAlert />
+            <strong>{{ t('errors.video_not_found') }}</strong>
+            <span>{{ phone.t('Common.start') }}</span>
+          </button>
           <Transition name="double-like">
             <Heart
               v-if="likedPulseId === video.id"
@@ -1932,6 +1999,36 @@ onBeforeUnmount(() => {
     rgba(0, 0, 0, 0.74)
   );
 }
+.video-playback-fallback {
+  position: absolute;
+  z-index: 10;
+  top: 50%;
+  left: 50%;
+  width: min(230px, 72%);
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  border: 1px solid rgb(255 255 255 / 24%);
+  border-radius: 18px;
+  padding: 16px;
+  background: rgb(18 18 20 / 88%);
+  color: #fff;
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+.video-playback-fallback svg {
+  width: 28px;
+  height: 28px;
+  color: #ff9f0a;
+}
+.video-playback-fallback strong {
+  font-size: 12px;
+}
+.video-playback-fallback span {
+  color: #64a8ff;
+  font-size: 11px;
+  font-weight: 700;
+}
 .video-copy {
   position: absolute;
   left: 13px;
diff --git a/frontend/src/views/apps/GalleryApp.vue b/frontend/src/views/apps/GalleryApp.vue
index 0539d21..c993d3f 100644
--- a/frontend/src/views/apps/GalleryApp.vue
+++ b/frontend/src/views/apps/GalleryApp.vue
@@ -84,10 +84,13 @@ const imageZoom = ref(1)
 const imagePan = ref({ x: 0, y: 0 })
 const landscapeViewer = ref(false)
 const dragging = ref(false)
+const videoPlaybackError = ref(false)
 const dragStart = ref({ panX: 0, panY: 0, x: 0, y: 0 })
 let observer: IntersectionObserver | null = null
 let toastTimer: number | undefined
 let pendingDeleteCorrelation = ''
+let dragTarget: HTMLElement | null = null
+let dragPointerId: number | null = null
 
 const imageStyle = computed(() => ({
   cursor:
@@ -227,6 +230,7 @@ function openMedia(entry: PhoneMedia): void {
   landscapeViewer.value = false
   phone.setCameraLandscape(false)
   selected.value = entry
+  videoPlaybackError.value = false
   imageZoom.value = 1
   imagePan.value = { x: 0, y: 0 }
 }
@@ -254,6 +258,7 @@ function closeMedia(): void {
   landscapeViewer.value = false
   phone.setCameraLandscape(false)
   selected.value = null
+  videoPlaybackError.value = false
   deleteDialogOpened.value = false
   stopDragging()
 }
@@ -295,6 +300,9 @@ function startDragging(event: PointerEvent): void {
     setZoom(2)
     return
   }
+  dragTarget = event.currentTarget as HTMLElement
+  dragPointerId = event.pointerId
+  dragTarget.setPointerCapture(event.pointerId)
   dragging.value = true
   dragStart.value = {
     panX: imagePan.value.x,
@@ -302,8 +310,6 @@ function startDragging(event: PointerEvent): void {
     x: event.clientX,
     y: event.clientY,
   }
-  window.addEventListener('pointermove', moveImage)
-  window.addEventListener('pointerup', stopDragging)
 }
 
 function moveImage(event: PointerEvent): void {
@@ -316,8 +322,44 @@ function moveImage(event: PointerEvent): void {
 
 function stopDragging(): void {
   dragging.value = false
-  window.removeEventListener('pointermove', moveImage)
-  window.removeEventListener('pointerup', stopDragging)
+  if (
+    dragTarget &&
+    dragPointerId !== null &&
+    dragTarget.hasPointerCapture(dragPointerId)
+  ) {
+    dragTarget.releasePointerCapture(dragPointerId)
+  }
+  dragTarget = null
+  dragPointerId = null
+}
+
+function moveImageWithKeyboard(event: KeyboardEvent): void {
+  if (imageZoom.value <= 1) return
+  const step = event.shiftKey ? 48 : 24
+  const offsets: Partial<Record<string, { x: number; y: number }>> = {
+    ArrowDown: { x: 0, y: -step },
+    ArrowLeft: { x: step, y: 0 },
+    ArrowRight: { x: -step, y: 0 },
+    ArrowUp: { x: 0, y: step },
+  }
+  const offset = offsets[event.key]
+  if (!offset) return
+  event.preventDefault()
+  event.stopPropagation()
+  imagePan.value = {
+    x: imagePan.value.x + offset.x,
+    y: imagePan.value.y + offset.y,
+  }
+}
+
+async function initializeVideo(event: Event): Promise<void> {
+  orientToMedia(event)
+  videoPlaybackError.value = false
+  try {
+    await (event.currentTarget as HTMLVideoElement).play()
+  } catch {
+    // The native controls remain visible when embedded CEF blocks autoplay.
+  }
 }
 
 async function deleteSelected(): Promise<void> {
@@ -569,18 +611,33 @@ onBeforeUnmount(() => {
           :alt="phone.t('Apps.photos.photoAlt')"
           :style="imageStyle"
           draggable="false"
+          tabindex="0"
           @load="orientToMedia"
           @pointerdown="startDragging"
+          @pointermove="moveImage"
+          @pointerup="stopDragging"
+          @pointercancel="stopDragging"
+          @lostpointercapture="stopDragging"
+          @keydown="moveImageWithKeyboard"
           @dblclick="setZoom(imageZoom === 1 ? 2 : 1)"
         />
         <video
           v-else
           :src="selected.url"
           controls
-          autoplay
           playsinline
-          @loadedmetadata="orientToMedia"
+          @loadedmetadata="initializeVideo"
+          @error="videoPlaybackError = true"
         ></video>
+        <k-block
+          v-if="selected.mediaType === 'video' && videoPlaybackError"
+          strong
+          inset
+          class="gallery-error"
+          role="alert"
+        >
+          {{ phone.t('Apps.photos.errors.unsupported') }}
+        </k-block>
       </div>
     </div>
 
@@ -776,6 +833,8 @@ onBeforeUnmount(() => {
   position: absolute;
   top: 50%;
   left: 50%;
+  width: 720px;
+  height: 368px;
   width: 100cqh;
   height: 100cqw;
   transform: translate(-50%, -50%) rotate(90deg);
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index ac29a5d..b888eb3 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -4091,7 +4091,6 @@ function easyShareHistoryForScenario(testScenario) {
 }
 
 app.post('/api/:endpoint', (request, response) => {
-  console.log(`[NUI] ${request.params.endpoint}`, request.body)
   const endpoint = request.params.endpoint
   const testScenario = String(request.body._testScenario ?? '')
   if (lifecycleEndpoints.has(endpoint)) {
@@ -7235,7 +7234,7 @@ app.post('/api/:endpoint', (request, response) => {
             : messageType === 'gif'
               ? 'image/gif'
               : messageType === 'video'
-                ? 'video/mp4'
+                ? 'video/webm'
                 : null,
       media_payload:
         messageType === 'voice'
diff --git a/sky_phone/config/media.lua b/sky_phone/config/media.lua
index 98ced28..0abfc1a 100644
--- a/sky_phone/config/media.lua
+++ b/sky_phone/config/media.lua
@@ -1,11 +1,11 @@
 Config.Media = {
-    GiphyApiKey = "",
+    GiphyApiKeyConvar = "sky_phone_giphy_api_key",
     GifPageSize = 24,
     GifRating = "pg-13",
     UrlMaxLength = 2048,
     AllowedGifHosts = { "giphy.com" },
     FiveManage = {
-        ApiKey = "e4UZ9y39JfkxHoZMAgRUVK6KMQsNCKPJ", -- Dashboard -> Tokens -> create a token with Media access.
+        ApiKeyConvar = "sky_phone_fivemanage_api_key",
         BaseUrl = "https://api.fivemanage.com/api/v3/file",
         RequestTimeoutMs = 10000,
         UploadTimeoutMs = 25000,
diff --git a/sky_phone/source/server/darkchat.lua b/sky_phone/source/server/darkchat.lua
index 8b3ae20..1a4f8ee 100644
--- a/sky_phone/source/server/darkchat.lua
+++ b/sky_phone/source/server/darkchat.lua
@@ -538,12 +538,16 @@ Bridge.Callbacks.Register("sky_phone:darkchat:send", function(source, data)
         media_waveform = voice.waveform
     elseif message_type == "image" or message_type == "video" then
         local media_type = message_type == "image" and "photo" or "video"
-        local media_url, media_error = SkyPhoneMedia.ResolveOwnedMedia(source, data.mediaAssetId, media_type)
+        local media_url, media_error, resolved_mime = SkyPhoneMedia.ResolveOwnedMedia(
+            source,
+            data.mediaAssetId,
+            media_type
+        )
         if not media_url then
             return { success = false, error = media_error }
         end
         media_payload = media_url
-        media_mime = message_type == "image" and "image/jpeg" or "video/mp4"
+        media_mime = resolved_mime
     elseif message_type == "share" then
         local share
         local share_error
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 1cf8125..0f43914 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -377,6 +377,7 @@ local schema = {
             { name = "url", type = "TEXT NOT NULL" },
             { name = "remote_id", type = "VARCHAR(128) NOT NULL" },
             { name = "media_type", type = "ENUM('photo', 'video') NOT NULL" },
+            { name = "mime_type", type = "VARCHAR(120) NULL" },
             { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
         },
         primaryKey = "id",
@@ -2524,6 +2525,37 @@ Bridge.Database.Query([[
     ALTER TABLE `sky_phone_darkchat_messages`
     MODIFY COLUMN `message_type` ENUM('text', 'emoji', 'gif', 'voice', 'image', 'video', 'share', 'system') NOT NULL DEFAULT 'text'
 ]], {})
+Bridge.Database.Query([[
+    UPDATE `sky_phone_media`
+    SET `mime_type` = CASE
+        WHEN `media_type` = 'video' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.webm' THEN 'video/webm'
+        WHEN `media_type` = 'video' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.mp4' THEN 'video/mp4'
+        WHEN `media_type` = 'photo' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.png' THEN 'image/png'
+        WHEN `media_type` = 'photo' AND LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.webp' THEN 'image/webp'
+        WHEN `media_type` = 'photo' AND (
+            LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.jpg'
+            OR LOWER(SUBSTRING_INDEX(`url`, '?', 1)) LIKE '%.jpeg'
+        ) THEN 'image/jpeg'
+        ELSE NULL
+    END
+    WHERE `mime_type` IS NULL OR `mime_type` = ''
+]], {})
+Bridge.Database.Query([[
+    UPDATE `sky_phone_sms_messages` message
+    INNER JOIN `sky_phone_media` media ON media.`url` = message.`media_payload`
+    SET message.`media_mime` = media.`mime_type`
+    WHERE message.`message_type` = 'video'
+        AND media.`mime_type` IN ('video/webm', 'video/mp4')
+        AND (message.`media_mime` IS NULL OR message.`media_mime` <> media.`mime_type`)
+]], {})
+Bridge.Database.Query([[
+    UPDATE `sky_phone_darkchat_messages` message
+    INNER JOIN `sky_phone_media` media ON media.`url` = message.`media_payload`
+    SET message.`media_mime` = media.`mime_type`
+    WHERE message.`message_type` = 'video'
+        AND media.`mime_type` IN ('video/webm', 'video/mp4')
+        AND (message.`media_mime` IS NULL OR message.`media_mime` <> media.`mime_type`)
+]], {})
 Bridge.Database.Query([[
     ALTER TABLE `sky_phone_marketplace_images`
     MODIFY COLUMN `gradient` VARCHAR(2200) NOT NULL
diff --git a/sky_phone/source/server/media.lua b/sky_phone/source/server/media.lua
index c6318b3..b7418da 100644
--- a/sky_phone/source/server/media.lua
+++ b/sky_phone/source/server/media.lua
@@ -3,14 +3,32 @@ SkyPhoneMedia = {}
 
 local pending_uploads = {}
 local pending_deletes = {}
+local allowed_remote_mimes = {
+    photo = {
+        ["image/jpeg"] = true,
+        ["image/png"] = true,
+        ["image/webp"] = true,
+    },
+    video = {
+        ["video/mp4"] = true,
+        ["video/webm"] = true,
+    },
+}
 
 local function media_config()
     return Config.Media.FiveManage
 end
 
+local function media_api_key()
+    local convar = media_config().ApiKeyConvar
+    if type(convar) ~= "string" or convar == "" then
+        return ""
+    end
+    return GetConvar(convar, "")
+end
+
 local function api_configured()
-    local api_key = media_config().ApiKey
-    return type(api_key) == "string" and api_key ~= "" and api_key ~= "YOUR_API_TOKEN"
+    return media_api_key() ~= ""
 end
 
 local function http_request(url, method, body, headers, timeout_ms)
@@ -63,7 +81,7 @@ local function request_presigned_url()
         tostring(config.BaseUrl):gsub("/+$", "") .. "/presigned-url",
         "GET",
         "",
-        { ["Authorization"] = config.ApiKey },
+        { ["Authorization"] = media_api_key() },
         tonumber(config.RequestTimeoutMs) or 10000
     )
     local data, response_error = decode_response(response)
@@ -86,7 +104,7 @@ local function get_remote_file(remote_id)
         ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
         "GET",
         "",
-        { ["Authorization"] = config.ApiKey },
+        { ["Authorization"] = media_api_key() },
         tonumber(config.RequestTimeoutMs) or 10000
     )
     return decode_response(response)
@@ -101,7 +119,7 @@ local function delete_remote_file(remote_id)
         ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
         "DELETE",
         "",
-        { ["Authorization"] = config.ApiKey },
+        { ["Authorization"] = media_api_key() },
         tonumber(config.RequestTimeoutMs) or 10000
     )
     if response.status < 200 or response.status >= 300 then
@@ -153,7 +171,7 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         params[#params + 1] = value
     end
     local rows = Bridge.Database.Query(([[
-        SELECT `url`, `media_type` FROM `sky_phone_media`
+        SELECT `url`, `media_type`, `mime_type` FROM `sky_phone_media`
         WHERE `id` = ? AND %s
         LIMIT 1
     ]]):format(condition), params)
@@ -172,7 +190,7 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         )
         return nil, "invalid_attachment"
     end
-    return media.url
+    return media.url, nil, media.mime_type
 end
 
 local function upload_result(source, correlation_id, success, error_code, media)
@@ -224,18 +242,29 @@ local function verify_remote_upload(state, remote_id, uploaded_url)
     if remote.url ~= uploaded_url and remote.originalUrl ~= uploaded_url then
         return nil, "invalid_upload"
     end
-    local remote_type = tostring(remote.type or remote.mimeType or ""):lower()
+    local remote_mime = tostring(remote.mimeType or ""):lower():match("^%s*([^;%s]+)") or ""
+    local remote_type = tostring(remote.type or ""):lower():match("^%s*([^;%s]+)") or ""
+    if remote_mime == "" and allowed_remote_mimes[state.media_type][remote_type] then
+        remote_mime = remote_type
+    end
+    if remote_type == "" then
+        remote_type = remote_mime
+    end
     if state.media_type == "photo" and remote_type ~= "" and not remote_type:find("image", 1, true) then
         return nil, "invalid_media_type"
     end
     if state.media_type == "video" and remote_type ~= "" and not remote_type:find("video", 1, true) then
         return nil, "invalid_media_type"
     end
+    if remote_mime ~= "" and not allowed_remote_mimes[state.media_type][remote_mime] then
+        return nil, "invalid_media_type"
+    end
     local metadata = parse_metadata(remote.metadata)
     if not metadata or metadata.captureToken ~= state.capture_token then
         return nil, "invalid_upload_token"
     end
     return {
+        mime_type = allowed_remote_mimes[state.media_type][remote_mime] and remote_mime or state.mime_type,
         remote_id = remote_id,
         url = remote.url or uploaded_url,
     }
@@ -255,7 +284,7 @@ Bridge.Callbacks.Register("sky_phone:gallery:list", function(source, data)
     if not owner then
         return error_response
     end
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local limit = math.max(1, math.min(math.floor(tonumber(data.limit) or Config.Media.PageSize), 100))
     local offset = math.max(0, math.floor(tonumber(data.offset) or 0))
     local media_type = data.mediaType
@@ -342,7 +371,7 @@ Bridge.Callbacks.Register("sky_phone:messages:gifs", function(source, data)
     if #query > 60 or offset < 0 or offset > 500 then
         return { success = false, error = "invalid_request" }
     end
-    local api_key = Config.Media.GiphyApiKey
+    local api_key = GetConvar(Config.Media.GiphyApiKeyConvar, "")
     if api_key == "" then
         return { success = false, error = "gif_provider_unconfigured" }
     end
@@ -420,7 +449,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:request-upload", function(data)
     local src = source
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local correlation_id = data.correlationId
     local media_type = data.mediaType
     if type(correlation_id) ~= "string" or #correlation_id > 80
@@ -454,6 +483,9 @@ RegisterNetEvent("sky_phone:media:request-upload", function(data)
         capture_token = capture_token,
         correlation_id = correlation_id,
         media_type = media_type,
+        mime_type = media_type == "video" and "video/webm"
+            or ({ png = "image/png", webp = "image/webp" })[tostring(Config.Media.Photo.Encoding):lower()]
+            or "image/jpeg",
         owner = owner,
         source = src,
     }
@@ -474,7 +506,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:complete-upload", function(data)
     local src = source
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local request_id = data.requestId
     local state = type(request_id) == "string" and pending_uploads[request_id] or nil
     if not state or state.source ~= src or state.completing then
@@ -496,14 +528,14 @@ RegisterNetEvent("sky_phone:media:complete-upload", function(data)
     local result
     if owner.account_id then
         result = Bridge.Database.Query([[
-            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`)
-            VALUES (?, NULL, ?, ?, ?)
-        ]], { owner.account_id, verified.url, verified.remote_id, state.media_type })
+            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `mime_type`)
+            VALUES (?, NULL, ?, ?, ?, ?)
+        ]], { owner.account_id, verified.url, verified.remote_id, state.media_type, verified.mime_type })
     else
         result = Bridge.Database.Query([[
-            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`)
-            VALUES (NULL, ?, ?, ?, ?)
-        ]], { owner.imei, verified.url, verified.remote_id, state.media_type })
+            INSERT INTO `sky_phone_media` (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `mime_type`)
+            VALUES (NULL, ?, ?, ?, ?, ?)
+        ]], { owner.imei, verified.url, verified.remote_id, state.media_type, verified.mime_type })
     end
     pending_uploads[request_id] = nil
     local media_id = type(result) == "number" and result or (type(result) == "table" and tonumber(result.insertId))
@@ -522,7 +554,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:cancel-upload", function(data)
     local src = source
-    local request_id = data and data.requestId
+    local request_id = type(data) == "table" and data.requestId or nil
     local state = type(request_id) == "string" and pending_uploads[request_id] or nil
     if state and state.source == src and not state.completing then
         pending_uploads[request_id] = nil
@@ -532,7 +564,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:fail-upload", function(data)
     local src = source
-    local request_id = data and data.requestId
+    local request_id = type(data) == "table" and data.requestId or nil
     local state = type(request_id) == "string" and pending_uploads[request_id] or nil
     if not state or state.source ~= src or state.completing then
         return
@@ -550,7 +582,7 @@ end)
 
 RegisterNetEvent("sky_phone:media:delete", function(data)
     local src = source
-    data = data or {}
+    data = type(data) == "table" and data or {}
     local correlation_id = data.correlationId
     local media_id = tonumber(data.id)
     if type(correlation_id) ~= "string" or #correlation_id > 80 or not media_id then
@@ -646,6 +678,7 @@ AddEventHandler("playerDropped", function()
 end)
 
 if not api_configured() then
-    print("^3[sky_phone] Camera and Gallery uploads are disabled until Config.Media.FiveManage.ApiKey is set in config/media.lua.^7")
+    print(("^3[sky_phone] Camera and Gallery uploads are disabled until the %s server convar is set.^7")
+        :format(tostring(media_config().ApiKeyConvar)))
 end
 end)
diff --git a/sky_phone/source/server/messages.lua b/sky_phone/source/server/messages.lua
index 6516f0d..f0868a6 100644
--- a/sky_phone/source/server/messages.lua
+++ b/sky_phone/source/server/messages.lua
@@ -32,7 +32,7 @@ local attachment_assets = {
 local attachment_mimes = {
     gif = "image/gif",
     image = "image/jpeg",
-    video = "video/mp4",
+    video = "video/webm",
 }
 
 local function allowed_media_url(value)
@@ -208,7 +208,9 @@ local function validate_attachment(source, device, message_type, data)
         return nil
     end
     local payload = data.mediaAssetId
-    if not valid_attachment_asset(message_type, payload) then
+    local built_in_asset = valid_attachment_asset(message_type, payload)
+    local mime = built_in_asset and attachment_mimes[message_type] or nil
+    if not built_in_asset then
         if message_type == "gif" then
             return nil
         end
@@ -226,7 +228,7 @@ local function validate_attachment(source, device, message_type, data)
             params = { media_id, device.imei }
         end
         local rows = Bridge.Database.Query(([[
-            SELECT `url`, `media_type` FROM `sky_phone_media`
+            SELECT `url`, `media_type`, `mime_type` FROM `sky_phone_media`
             WHERE `id` = ? AND %s
             LIMIT 1
         ]]):format(condition), params)
@@ -241,6 +243,7 @@ local function validate_attachment(source, device, message_type, data)
             return nil
         end
         payload = media.url
+        mime = type(media.mime_type) == "string" and media.mime_type ~= "" and media.mime_type or nil
     end
     local duration = nil
     if message_type == "video" and data.mediaDurationMs ~= nil then
@@ -252,7 +255,7 @@ local function validate_attachment(source, device, message_type, data)
     end
     return {
         duration = duration,
-        mime = attachment_mimes[message_type],
+        mime = mime,
         payload = payload,
     }
 end

From b54839ee7442e83c2b372ecac7b3e18520e01d23 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Wed, 12 Aug 2026 18:59:33 +0200
Subject: [PATCH 40/63] FIX - make phone input and overlays CEF safe

---
 frontend/src/components/AppIcon.vue           |  62 +++++++---
 frontend/src/components/DarkChatSelect.vue    |   5 +-
 frontend/src/components/EasyShareSheet.vue    |  30 +++--
 frontend/src/components/SpringboardWidget.vue |  62 +++++++---
 .../src/components/SpringboardWidgetGrid.vue  |   3 +
 .../components/citymarkt/CityMarktSelect.vue  |   3 +
 frontend/src/utils/homeLayout.test.ts         |  10 ++
 frontend/src/utils/homeLayout.ts              |  30 +++++
 frontend/src/utils/keyboard.test.ts           |  98 +++++++++++++++
 frontend/src/utils/keyboard.ts                |  47 ++++++++
 frontend/src/utils/musicEscape.test.ts        |  38 ++++++
 frontend/src/utils/musicEscape.ts             |  22 ++++
 frontend/src/utils/widgetLayout.test.ts       |  16 +++
 frontend/src/utils/widgetLayout.ts            |  27 +++++
 frontend/src/views/SpringboardView.vue        |  30 +++++
 frontend/src/views/apps/BankingApp.vue        | 113 +++++++++++++-----
 frontend/src/views/apps/CompaniesApp.vue      |   3 +-
 frontend/src/views/apps/CrewLinkApp.vue       |  37 +++++-
 frontend/src/views/apps/DarkChatApp.vue       |   5 +-
 frontend/src/views/apps/FeatherApp.vue        | 101 +++++++++++++++-
 frontend/src/views/apps/FlareApp.vue          |  20 +++-
 frontend/src/views/apps/MapApp.vue            |   3 +-
 frontend/src/views/apps/MessagesApp.vue       |   3 +-
 frontend/src/views/apps/MusicApp.vue          |  74 ++++++++----
 24 files changed, 730 insertions(+), 112 deletions(-)
 create mode 100644 frontend/src/utils/keyboard.test.ts
 create mode 100644 frontend/src/utils/keyboard.ts
 create mode 100644 frontend/src/utils/musicEscape.test.ts
 create mode 100644 frontend/src/utils/musicEscape.ts

diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index 17fb331..8e2da12 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -12,6 +12,10 @@ import { useMarketplaceStore } from '@/stores/marketplace'
 import { useDarkChatStore } from '@/stores/darkchat'
 import { usePhoneStore } from '@/stores/phone'
 import type { PhoneAppDefinition } from '@/types/apps'
+import {
+  reorderDirectionFromKeyboard,
+  type ReorderDirection,
+} from '@/utils/keyboard'
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +37,7 @@ const emit = defineEmits<{
   dragstart: [event: PointerEvent]
   edit: []
   remove: []
+  reorder: [direction: ReorderDirection]
 }>()
 
 const phone = usePhoneStore()
@@ -65,6 +70,8 @@ const suppressClick = ref(false)
 let holdTimer: number | undefined
 let calendarTimer: number | undefined
 let pointerStart = { x: 0, y: 0 }
+let pointerTarget: HTMLElement | null = null
+let pointerId: number | null = null
 
 watch(
   () => props.app.iconImage,
@@ -135,6 +142,9 @@ function clearHold(): void {
 
 function onPointerDown(event: PointerEvent): void {
   if (props.compact || event.button !== 0) return
+  pointerTarget = event.currentTarget as HTMLElement
+  pointerId = event.pointerId
+  pointerTarget.setPointerCapture(pointerId)
   pointerStart = { x: event.clientX, y: event.clientY }
   clearHold()
   if (props.editMode) {
@@ -173,35 +183,48 @@ function beginPointerDrag(event: PointerEvent): void {
       .closest<HTMLElement>('.springboard-page')
       ?.getBoundingClientRect().width ?? 0
   isDragging.value = true
-  window.addEventListener('pointermove', onPointerMove)
-  window.addEventListener('pointerup', onPointerUp)
-  window.addEventListener('pointercancel', cancelPointerDrag)
   emit('dragstart', event)
 }
 
 function onPointerUp(event: PointerEvent): void {
   clearHold()
-  if (!isDragging.value) return
-  suppressClick.value = true
-  emit('dragend', event)
-  isDragging.value = false
-  dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
+  if (isDragging.value) {
+    suppressClick.value = true
+    emit('dragend', event)
+    isDragging.value = false
+    dragOffset.value = { x: 0, y: 0 }
+  }
+  releasePointerCapture()
 }
 
 function cancelPointerDrag(): void {
   clearHold()
-  if (!isDragging.value) return
+  const wasDragging = isDragging.value
   isDragging.value = false
   dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
-  emit('dragcancel')
+  releasePointerCapture()
+  if (wasDragging) emit('dragcancel')
 }
 
-function removeDragListeners(): void {
-  window.removeEventListener('pointermove', onPointerMove)
-  window.removeEventListener('pointerup', onPointerUp)
-  window.removeEventListener('pointercancel', cancelPointerDrag)
+function releasePointerCapture(): void {
+  if (
+    pointerTarget &&
+    pointerId !== null &&
+    pointerTarget.hasPointerCapture(pointerId)
+  ) {
+    pointerTarget.releasePointerCapture(pointerId)
+  }
+  pointerTarget = null
+  pointerId = null
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!props.editMode) return
+  const direction = reorderDirectionFromKeyboard(event)
+  if (!direction) return
+  event.preventDefault()
+  event.stopPropagation()
+  emit('reorder', direction)
 }
 
 onMounted(() => {
@@ -214,7 +237,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   clearHold()
   if (calendarTimer !== undefined) window.clearInterval(calendarTimer)
-  removeDragListeners()
+  releasePointerCapture()
 })
 </script>
 
@@ -234,10 +257,15 @@ onBeforeUnmount(() => {
       type="button"
       :aria-label="getPhoneAppLabel(app, phone.t)"
       :aria-disabled="!app.route"
+      :aria-keyshortcuts="
+        editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
+      "
       @click="launch"
       @contextmenu.prevent
+      @keydown="onKeydown"
       @pointercancel="cancelPointerDrag"
       @pointerdown="onPointerDown"
+      @lostpointercapture="cancelPointerDrag"
       @pointerleave="isDragging || clearHold()"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
diff --git a/frontend/src/components/DarkChatSelect.vue b/frontend/src/components/DarkChatSelect.vue
index 804ae57..baa33d1 100644
--- a/frontend/src/components/DarkChatSelect.vue
+++ b/frontend/src/components/DarkChatSelect.vue
@@ -35,7 +35,10 @@ function closeFromOutside(event: PointerEvent): void {
 }
 
 function closeFromEscape(event: KeyboardEvent): void {
-  if (event.key === 'Escape') opened.value = false
+  if (event.key !== 'Escape' || !opened.value) return
+  event.preventDefault()
+  event.stopPropagation()
+  opened.value = false
 }
 
 onMounted(() => {
diff --git a/frontend/src/components/EasyShareSheet.vue b/frontend/src/components/EasyShareSheet.vue
index 9e83d30..48da343 100644
--- a/frontend/src/components/EasyShareSheet.vue
+++ b/frontend/src/components/EasyShareSheet.vue
@@ -9,7 +9,7 @@ import {
   UserRound,
   X,
 } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { getPhoneApp, getPhoneAppLabel } from '@/config/apps'
@@ -30,6 +30,7 @@ import {
   easyShareDestinationAppIds,
   openEasySharePayload,
 } from '@/utils/easyshare'
+import { consumeEscape } from '@/utils/keyboard'
 
 const phone = usePhoneStore()
 const appStore = useAppStoreStore()
@@ -113,11 +114,8 @@ const shareApps = computed(() =>
       return app ? [{ app, id }] : []
     }),
 )
-const sheetStyle = computed(() => ({
-  transform: easyShare.opened
-    ? `translateY(calc(-100% + ${dragOffset.value}px))`
-    : undefined,
-  transitionDuration: dragging.value ? '0ms' : undefined,
+const hostStyle = computed(() => ({
+  '--easyshare-drag-offset': `${dragOffset.value}px`,
 }))
 
 function label(key: string, params?: Record<string, string>): string {
@@ -155,6 +153,11 @@ function close(): void {
   easyShare.close()
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  if (!easyShare.opened || !consumeEscape(event)) return
+  close()
+}
+
 function beginDrag(event: PointerEvent): void {
   if (!easyShare.opened || event.button !== 0) return
   dragPointerId = event.pointerId
@@ -240,17 +243,22 @@ async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
   close()
   await openEasySharePayload(router, transfer.payload)
 }
+
+onMounted(() => window.addEventListener('keydown', onKeydown, true))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown, true))
 </script>
 
 <template>
   <div
     class="easyshare-host"
-    :class="{ 'easyshare-host--opened': easyShare.opened }"
+    :class="{
+      'easyshare-host--dragging': dragging,
+      'easyshare-host--opened': easyShare.opened,
+    }"
+    :style="hostStyle"
   >
     <k-sheet
       :opened="easyShare.opened"
-      class="easyshare-sheet"
-      :style="sheetStyle"
       @backdropclick="close"
     >
       <div class="easyshare-panel">
@@ -407,7 +415,9 @@ async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
 </template>
 
 <style scoped>
-.easyshare-host{position:absolute;z-index:95;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)}.easyshare-host--opened{pointer-events:auto}.easyshare-sheet{z-index:9500;width:100%;max-width:none}.easyshare-panel{position:relative;max-height:78cqh;overflow:hidden;padding:8px 14px calc(18px + var(--k-safe-area-bottom));border-radius:30px 30px 0 0;color:var(--easyshare-text,#f7f7f7);background:color-mix(in srgb,var(--k-ios-dark-surface-1,#1c1c1e) 92%,transparent);backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45)}.phone-app--light .easyshare-panel{--easyshare-text:#171719;background:color-mix(in srgb,#f2f2f7 93%,transparent)}.easyshare-grabber{width:38px;height:5px;margin:0 auto 10px;border-radius:999px;background:#8e8e9390;cursor:grab;touch-action:none}.easyshare-grabber:active{cursor:grabbing}.easyshare-header{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:11px;padding:5px 2px 14px;border-bottom:1px solid #8e8e9345}.easyshare-header>img,.easyshare-header__fallback{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;object-fit:cover;background:#0a84ff;color:white}.easyshare-header div{min-width:0}.easyshare-header small,.easyshare-header strong,.easyshare-header p{display:block;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.easyshare-header small{font-size:11px;color:#8e8e93}.easyshare-header strong{font-size:17px}.easyshare-header p{margin-top:2px;font-size:12px;color:#a1a1a6}.easyshare-row{display:flex;gap:12px;overflow-x:auto;padding:16px 2px;scrollbar-width:none}.easyshare-row::-webkit-scrollbar{display:none}.easyshare-row+.easyshare-row{border-top:1px solid #8e8e9345}.easyshare-row--people{min-height:114px;align-items:flex-start}.easyshare-person,.easyshare-action{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;text-align:center}.easyshare-person{min-height:98px;gap:14px}.easyshare-person small,.easyshare-action small{position:relative;z-index:3;display:-webkit-box;width:72px;max-height:26px;min-height:26px;overflow:hidden;font-size:11px;line-height:13px;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.easyshare-avatar{position:relative;isolation:isolate;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#6e6e73,#2c2c2e);color:white}.easyshare-avatar>img{position:absolute;z-index:0;inset:0;display:block;width:58px;height:58px;max-width:none;border-radius:50%;clip-path:circle(50% at 50% 50%);object-fit:cover}.easyshare-avatar>b{position:relative;z-index:1;font-size:17px}.easyshare-avatar>i{position:absolute;z-index:2;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid #1c1c1e;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:#34c759;color:white}.easyshare-avatar>i img{width:100%;height:100%;object-fit:cover}.easyshare-action__icon,.easyshare-action__app{width:57px;height:57px;border-radius:15px;display:grid;place-items:center;background:#ffffff20}.easyshare-action__icon svg{width:27px}.easyshare-action__icon--nearby{background:radial-gradient(circle at 50% 70%,#0a84ff 0 15%,#142d59 16% 29%,#0a84ff 30% 35%,#101722 36%);color:white}.easyshare-action__app img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.easyshare-detail{min-height:245px;max-height:56cqh;overflow-y:auto;padding-top:8px}.easyshare-detail__toolbar{height:37px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.easyshare-detail__toolbar>:last-child{justify-self:end}.easyshare-visibility{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:#ffffff14}.easyshare-visibility select{min-width:0;flex:1;border:0;color:inherit;background:transparent;text-align:right}.easyshare-incoming,.easyshare-transfer{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0;padding:12px!important;border-radius:18px!important}.easyshare-incoming div,.easyshare-transfer div{min-width:0}.easyshare-incoming small,.easyshare-transfer small{display:block;color:#a1a1a6}.easyshare-incoming__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.easyshare-incoming__actions :deep(.button){margin:0}.easyshare-transfer{grid-template-columns:1fr auto}.easyshare-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:#8e8e9340}.easyshare-progress i{display:block;height:100%;border-radius:inherit;background:#0a84ff;transition:width .25s ease}.easyshare-targets{display:grid;gap:7px}.easyshare-targets button,.easyshare-history article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:inherit;background:#ffffff10;text-align:left}.easyshare-targets button>span,.easyshare-history article>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{display:block}.easyshare-targets small,.easyshare-history small{color:#a1a1a6;font-size:11px}.easyshare-history{display:grid;gap:7px;padding-top:8px}.easyshare-empty,.easyshare-loading{padding:35px 10px;text-align:center;color:#8e8e93}.easyshare-feedback{margin:8px 0 0;text-align:center;color:#0a84ff;font-size:12px}
+.easyshare-host{position:absolute;z-index:95;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)}.easyshare-host--opened{pointer-events:auto}.easyshare-panel{position:relative;max-height:78cqh;overflow:hidden;padding:8px 14px calc(18px + var(--k-safe-area-bottom));border-radius:30px 30px 0 0;color:var(--easyshare-text,#f7f7f7);background:color-mix(in srgb,var(--k-ios-dark-surface-1,#1c1c1e) 92%,transparent);backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45)}.phone-app--light .easyshare-panel{--easyshare-text:#171719;background:color-mix(in srgb,#f2f2f7 93%,transparent)}.easyshare-grabber{width:38px;height:5px;margin:0 auto 10px;border-radius:999px;background:#8e8e9390;cursor:grab;touch-action:none}.easyshare-grabber:active{cursor:grabbing}.easyshare-header{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:11px;padding:5px 2px 14px;border-bottom:1px solid #8e8e9345}.easyshare-header>img,.easyshare-header__fallback{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;object-fit:cover;background:#0a84ff;color:white}.easyshare-header div{min-width:0}.easyshare-header small,.easyshare-header strong,.easyshare-header p{display:block;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.easyshare-header small{font-size:11px;color:#8e8e93}.easyshare-header strong{font-size:17px}.easyshare-header p{margin-top:2px;font-size:12px;color:#a1a1a6}.easyshare-row{display:flex;gap:12px;overflow-x:auto;padding:16px 2px;scrollbar-width:none}.easyshare-row::-webkit-scrollbar{display:none}.easyshare-row+.easyshare-row{border-top:1px solid #8e8e9345}.easyshare-row--people{min-height:114px;align-items:flex-start}.easyshare-person,.easyshare-action{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;text-align:center}.easyshare-person{min-height:98px;gap:14px}.easyshare-person small,.easyshare-action small{position:relative;z-index:3;display:-webkit-box;width:72px;max-height:26px;min-height:26px;overflow:hidden;font-size:11px;line-height:13px;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.easyshare-avatar{position:relative;isolation:isolate;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#6e6e73,#2c2c2e);color:white}.easyshare-avatar>img{position:absolute;z-index:0;inset:0;display:block;width:58px;height:58px;max-width:none;border-radius:50%;clip-path:circle(50% at 50% 50%);object-fit:cover}.easyshare-avatar>b{position:relative;z-index:1;font-size:17px}.easyshare-avatar>i{position:absolute;z-index:2;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid #1c1c1e;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:#34c759;color:white}.easyshare-avatar>i img{width:100%;height:100%;object-fit:cover}.easyshare-action__icon,.easyshare-action__app{width:57px;height:57px;border-radius:15px;display:grid;place-items:center;background:#ffffff20}.easyshare-action__icon svg{width:27px}.easyshare-action__icon--nearby{background:radial-gradient(circle at 50% 70%,#0a84ff 0 15%,#142d59 16% 29%,#0a84ff 30% 35%,#101722 36%);color:white}.easyshare-action__app img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.easyshare-detail{min-height:245px;max-height:56cqh;overflow-y:auto;padding-top:8px}.easyshare-detail__toolbar{height:37px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.easyshare-detail__toolbar>:last-child{justify-self:end}.easyshare-visibility{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:#ffffff14}.easyshare-visibility select{min-width:0;flex:1;border:0;color:inherit;background:transparent;text-align:right}.easyshare-incoming,.easyshare-transfer{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0;padding:12px!important;border-radius:18px!important}.easyshare-incoming div,.easyshare-transfer div{min-width:0}.easyshare-incoming small,.easyshare-transfer small{display:block;color:#a1a1a6}.easyshare-incoming__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.easyshare-incoming__actions :deep(.button){margin:0}.easyshare-transfer{grid-template-columns:1fr auto}.easyshare-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:#8e8e9340}.easyshare-progress i{display:block;height:100%;border-radius:inherit;background:#0a84ff;transition:width .25s ease}.easyshare-targets{display:grid;gap:7px}.easyshare-targets button,.easyshare-history article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:inherit;background:#ffffff10;text-align:left}.easyshare-targets button>span,.easyshare-history article>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{display:block}.easyshare-targets small,.easyshare-history small{color:#a1a1a6;font-size:11px}.easyshare-history{display:grid;gap:7px;padding-top:8px}.easyshare-empty,.easyshare-loading{padding:35px 10px;text-align:center;color:#8e8e93}.easyshare-feedback{margin:8px 0 0;text-align:center;color:#0a84ff;font-size:12px}
+.easyshare-host :deep(.k-sheet){z-index:9500;width:100%;max-width:none}.easyshare-host--opened :deep(.k-sheet){transform:translateY(calc(-100% + var(--easyshare-drag-offset,0px)))}.easyshare-host--dragging :deep(.k-sheet){transition-duration:0ms}.easyshare-panel{max-height:645px;background:rgb(28 28 30 / 92%)}.phone-app--light .easyshare-panel{background:rgb(242 242 247 / 93%)}.easyshare-detail{max-height:463px}.easyshare-targets button>div,.easyshare-history article>div{min-width:0}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{overflow-wrap:anywhere}
+@supports (container-type: size){.easyshare-panel{max-height:78cqh}.easyshare-detail{max-height:56cqh}}
 .easyshare-action__icon--nearby {
   position: relative;
   overflow: hidden;
diff --git a/frontend/src/components/SpringboardWidget.vue b/frontend/src/components/SpringboardWidget.vue
index f851a42..a69d3d1 100644
--- a/frontend/src/components/SpringboardWidget.vue
+++ b/frontend/src/components/SpringboardWidget.vue
@@ -31,6 +31,10 @@ import { useCallsStore } from '@/stores/calls'
 import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
 import type { WidgetInstance } from '@/types/widgets'
+import {
+  reorderDirectionFromKeyboard,
+  type ReorderDirection,
+} from '@/utils/keyboard'
 import type { WeatherConditionId } from '@/types/weather'
 import { WIDGET_SPANS } from '@/utils/widgetLayout'
 
@@ -50,6 +54,7 @@ const emit = defineEmits<{
   dragstart: [event: PointerEvent]
   menu: []
   remove: []
+  reorder: [direction: ReorderDirection]
 }>()
 
 const phone = usePhoneStore()
@@ -68,6 +73,8 @@ let holdTimer: number | undefined
 let pointerStart = { x: 0, y: 0 }
 let dragStartPage = 0
 let dragPageWidth = 0
+let pointerTarget: HTMLElement | null = null
+let pointerId: number | null = null
 
 const weatherIcons: Record<WeatherConditionId, Component> = {
   sunny: Sun,
@@ -173,6 +180,9 @@ function onPointerDown(event: PointerEvent): void {
   ) {
     return
   }
+  pointerTarget = event.currentTarget as HTMLElement
+  pointerId = event.pointerId
+  pointerTarget.setPointerCapture(pointerId)
   pointerStart = { x: event.clientX, y: event.clientY }
   clearHold()
   if (props.editMode) {
@@ -210,35 +220,48 @@ function beginDrag(event: PointerEvent): void {
       .closest<HTMLElement>('.springboard-page')
       ?.getBoundingClientRect().width ?? 0
   isDragging.value = true
-  window.addEventListener('pointermove', onPointerMove)
-  window.addEventListener('pointerup', onPointerUp)
-  window.addEventListener('pointercancel', cancelDrag)
   emit('dragstart', event)
 }
 
 function onPointerUp(event: PointerEvent): void {
   clearHold()
-  if (!isDragging.value) return
-  suppressClick.value = true
-  emit('dragend', event)
-  isDragging.value = false
-  dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
+  if (isDragging.value) {
+    suppressClick.value = true
+    emit('dragend', event)
+    isDragging.value = false
+    dragOffset.value = { x: 0, y: 0 }
+  }
+  releasePointerCapture()
 }
 
 function cancelDrag(): void {
   clearHold()
-  if (!isDragging.value) return
+  const wasDragging = isDragging.value
   isDragging.value = false
   dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
-  emit('dragcancel')
+  releasePointerCapture()
+  if (wasDragging) emit('dragcancel')
 }
 
-function removeDragListeners(): void {
-  window.removeEventListener('pointermove', onPointerMove)
-  window.removeEventListener('pointerup', onPointerUp)
-  window.removeEventListener('pointercancel', cancelDrag)
+function releasePointerCapture(): void {
+  if (
+    pointerTarget &&
+    pointerId !== null &&
+    pointerTarget.hasPointerCapture(pointerId)
+  ) {
+    pointerTarget.releasePointerCapture(pointerId)
+  }
+  pointerTarget = null
+  pointerId = null
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!props.editMode) return
+  const direction = reorderDirectionFromKeyboard(event)
+  if (!direction) return
+  event.preventDefault()
+  event.stopPropagation()
+  emit('reorder', direction)
 }
 
 function openWidget(): void {
@@ -276,7 +299,7 @@ async function messageContact(phoneNumber: string): Promise<void> {
 
 onBeforeUnmount(() => {
   clearHold()
-  removeDragListeners()
+  releasePointerCapture()
 })
 </script>
 
@@ -300,9 +323,14 @@ onBeforeUnmount(() => {
       :class="`home-widget--${instance.kind}`"
       role="button"
       tabindex="0"
+      :aria-keyshortcuts="
+        editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
+      "
       @click="openWidget"
       @contextmenu.prevent
+      @keydown="onKeydown"
       @keydown.enter="openWidget"
+      @lostpointercapture="cancelDrag"
       @pointercancel="cancelDrag"
       @pointerdown="onPointerDown"
       @pointerleave="isDragging || clearHold()"
diff --git a/frontend/src/components/SpringboardWidgetGrid.vue b/frontend/src/components/SpringboardWidgetGrid.vue
index 70bd954..a11399e 100644
--- a/frontend/src/components/SpringboardWidgetGrid.vue
+++ b/frontend/src/components/SpringboardWidgetGrid.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 import SpringboardWidget from '@/components/SpringboardWidget.vue'
 import { useWidgetsStore } from '@/stores/widgets'
+import type { ReorderDirection } from '@/utils/keyboard'
 import { WIDGET_HOME_ROWS, WIDGET_PAGE_ROWS } from '@/utils/widgetLayout'
 
 const props = defineProps<{
@@ -17,6 +18,7 @@ const emit = defineEmits<{
   dragstart: [id: string, event: PointerEvent]
   menu: [id: string]
   remove: [id: string]
+  reorder: [id: string, direction: ReorderDirection]
 }>()
 const widgets = useWidgetsStore()
 const rows = computed(() =>
@@ -51,6 +53,7 @@ const instances = computed(() =>
       @dragstart="emit('dragstart', instance.id, $event)"
       @menu="emit('menu', instance.id)"
       @remove="emit('remove', instance.id)"
+      @reorder="emit('reorder', instance.id, $event)"
     />
   </div>
 </template>
diff --git a/frontend/src/components/citymarkt/CityMarktSelect.vue b/frontend/src/components/citymarkt/CityMarktSelect.vue
index c673714..4df61b7 100644
--- a/frontend/src/components/citymarkt/CityMarktSelect.vue
+++ b/frontend/src/components/citymarkt/CityMarktSelect.vue
@@ -41,6 +41,9 @@ function select(value: string): void {
 
 function handleKeydown(event: KeyboardEvent): void {
   if (event.key === 'Escape') {
+    if (!isOpen.value) return
+    event.preventDefault()
+    event.stopPropagation()
     isOpen.value = false
     return
   }
diff --git a/frontend/src/utils/homeLayout.test.ts b/frontend/src/utils/homeLayout.test.ts
index 72602c6..e0767f8 100644
--- a/frontend/src/utils/homeLayout.test.ts
+++ b/frontend/src/utils/homeLayout.test.ts
@@ -5,6 +5,7 @@ import {
   createDefaultHomeLayout,
   deleteHomePage,
   HOME_GRID_PAGE_SIZE,
+  homeKeyboardTarget,
   MAX_HOME_GRID_PAGES,
   moveHomeApp,
   parseHomeLayout,
@@ -134,6 +135,15 @@ describe('home layout', () => {
     expect(moved.grid[4]).toBe('notes')
   })
 
+  it('provides bounded keyboard reorder targets without wrapping rows', () => {
+    expect(homeKeyboardTarget(defaults, 'grid', 1, 'right')).toBe(2)
+    expect(homeKeyboardTarget(defaults, 'grid', 3, 'right')).toBeNull()
+    expect(homeKeyboardTarget(defaults, 'grid', 0, 'up')).toBeNull()
+    expect(homeKeyboardTarget(defaults, 'grid', 0, 'down')).toBe(4)
+    expect(homeKeyboardTarget(defaults, 'dock', 1, 'left')).toBe(0)
+    expect(homeKeyboardTarget(defaults, 'dock', 1, 'down')).toBeNull()
+  })
+
   it('shifts occupied grid slots instead of replacing their apps', () => {
     const reordered = moveHomeApp(defaults, 'grid', 2, 'grid', 0)
     expect(reordered.grid.slice(0, 5)).toEqual([
diff --git a/frontend/src/utils/homeLayout.ts b/frontend/src/utils/homeLayout.ts
index 01bb146..6f01235 100644
--- a/frontend/src/utils/homeLayout.ts
+++ b/frontend/src/utils/homeLayout.ts
@@ -1,6 +1,8 @@
 import type { LaunchablePhoneAppId } from '@/types/apps'
+import type { ReorderDirection } from '@/utils/keyboard'
 
 export const HOME_DOCK_CAPACITY = 4
+export const HOME_GRID_COLUMNS = 4
 export const HOME_GRID_PAGE_SIZE = 20
 export const MAX_HOME_GRID_PAGES = 5
 
@@ -304,3 +306,31 @@ export function moveHomeApp(
   source[sourceIndex] = insertIntoSlot(target, targetIndex, appId)
   return next
 }
+
+export function homeKeyboardTarget(
+  layout: HomeLayout,
+  area: HomeArea,
+  sourceIndex: number,
+  direction: ReorderDirection,
+): number | null {
+  const source = layout[area]
+  if (!source[sourceIndex]) return null
+
+  if (area === 'dock') {
+    if (direction !== 'left' && direction !== 'right') return null
+    const targetIndex = sourceIndex + (direction === 'left' ? -1 : 1)
+    return targetIndex >= 0 && targetIndex < source.length ? targetIndex : null
+  }
+
+  const column = sourceIndex % HOME_GRID_COLUMNS
+  if (direction === 'left' && column === 0) return null
+  if (direction === 'right' && column === HOME_GRID_COLUMNS - 1) return null
+  const deltas: Record<ReorderDirection, number> = {
+    down: HOME_GRID_COLUMNS,
+    left: -1,
+    right: 1,
+    up: -HOME_GRID_COLUMNS,
+  }
+  const targetIndex = sourceIndex + deltas[direction]
+  return targetIndex >= 0 && targetIndex < source.length ? targetIndex : null
+}
diff --git a/frontend/src/utils/keyboard.test.ts b/frontend/src/utils/keyboard.test.ts
new file mode 100644
index 0000000..f6b1df9
--- /dev/null
+++ b/frontend/src/utils/keyboard.test.ts
@@ -0,0 +1,98 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  consumeEscape,
+  handleEnterAction,
+  reorderDirectionFromKeyboard,
+} from '@/utils/keyboard'
+
+describe('keyboard interaction', () => {
+  it('does not submit while an IME composition is active', () => {
+    const action = vi.fn()
+    const preventDefault = vi.fn()
+
+    expect(
+      handleEnterAction({ isComposing: true, preventDefault }, action),
+    ).toBe(false)
+    expect(action).not.toHaveBeenCalled()
+    expect(preventDefault).not.toHaveBeenCalled()
+  })
+
+  it('prevents the completed Enter key and runs its action once', () => {
+    const action = vi.fn()
+    const preventDefault = vi.fn()
+
+    expect(
+      handleEnterAction({ isComposing: false, preventDefault }, action),
+    ).toBe(true)
+    expect(preventDefault).toHaveBeenCalledOnce()
+    expect(action).toHaveBeenCalledOnce()
+  })
+
+  it('consumes only an unhandled Escape outside IME composition', () => {
+    const preventDefault = vi.fn()
+    const stopImmediatePropagation = vi.fn()
+
+    expect(
+      consumeEscape({
+        defaultPrevented: false,
+        isComposing: false,
+        key: 'Escape',
+        preventDefault,
+        stopImmediatePropagation,
+      }),
+    ).toBe(true)
+    expect(preventDefault).toHaveBeenCalledOnce()
+    expect(stopImmediatePropagation).toHaveBeenCalledOnce()
+
+    expect(
+      consumeEscape({
+        defaultPrevented: false,
+        isComposing: true,
+        key: 'Escape',
+        preventDefault,
+        stopImmediatePropagation,
+      }),
+    ).toBe(false)
+  })
+
+  it('blocks a second Escape owner on the same event target', () => {
+    const target = new EventTarget()
+    const rootHandler = vi.fn()
+    target.addEventListener('keydown', (event) => {
+      consumeEscape(event as KeyboardEvent)
+    })
+    target.addEventListener('keydown', rootHandler)
+    const event = new Event('keydown', { cancelable: true })
+    Object.defineProperties(event, {
+      isComposing: { value: false },
+      key: { value: 'Escape' },
+    })
+
+    target.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(true)
+    expect(rootHandler).not.toHaveBeenCalled()
+  })
+
+  it('maps only unmodified arrow keys to reorder directions', () => {
+    expect(
+      reorderDirectionFromKeyboard({
+        altKey: false,
+        ctrlKey: false,
+        isComposing: false,
+        key: 'ArrowLeft',
+        metaKey: false,
+      }),
+    ).toBe('left')
+    expect(
+      reorderDirectionFromKeyboard({
+        altKey: false,
+        ctrlKey: true,
+        isComposing: false,
+        key: 'ArrowLeft',
+        metaKey: false,
+      }),
+    ).toBeNull()
+  })
+})
diff --git a/frontend/src/utils/keyboard.ts b/frontend/src/utils/keyboard.ts
new file mode 100644
index 0000000..7d0cbbc
--- /dev/null
+++ b/frontend/src/utils/keyboard.ts
@@ -0,0 +1,47 @@
+export type ReorderDirection = 'down' | 'left' | 'right' | 'up'
+
+export function consumeEscape(
+  event: Pick<
+    KeyboardEvent,
+    | 'defaultPrevented'
+    | 'isComposing'
+    | 'key'
+    | 'preventDefault'
+    | 'stopImmediatePropagation'
+  >,
+): boolean {
+  if (event.key !== 'Escape' || event.isComposing || event.defaultPrevented) {
+    return false
+  }
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  return true
+}
+
+export function handleEnterAction(
+  event: Pick<KeyboardEvent, 'isComposing' | 'preventDefault'>,
+  action: () => unknown,
+): boolean {
+  if (event.isComposing) return false
+  event.preventDefault()
+  void action()
+  return true
+}
+
+export function reorderDirectionFromKeyboard(
+  event: Pick<
+    KeyboardEvent,
+    'altKey' | 'ctrlKey' | 'isComposing' | 'key' | 'metaKey'
+  >,
+): ReorderDirection | null {
+  if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey) {
+    return null
+  }
+  const directions: Partial<Record<string, ReorderDirection>> = {
+    ArrowDown: 'down',
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+    ArrowUp: 'up',
+  }
+  return directions[event.key] ?? null
+}
diff --git a/frontend/src/utils/musicEscape.test.ts b/frontend/src/utils/musicEscape.test.ts
new file mode 100644
index 0000000..47111f2
--- /dev/null
+++ b/frontend/src/utils/musicEscape.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+import { musicEscapeLayer } from '@/utils/musicEscape'
+
+const closedState = {
+  actionMenuOpened: false,
+  activeSheet: false,
+  addMenuOpened: false,
+  confirmDeletePlaylist: false,
+  confirmRemoveTrack: false,
+  playerOpened: false,
+}
+
+describe('music Escape ownership', () => {
+  it('owns Escape while either music popover is open', () => {
+    expect(
+      musicEscapeLayer({ ...closedState, addMenuOpened: true }),
+    ).toBe('menu')
+    expect(
+      musicEscapeLayer({ ...closedState, actionMenuOpened: true }),
+    ).toBe('menu')
+  })
+
+  it('keeps a real form sheet above menus and the player', () => {
+    expect(
+      musicEscapeLayer({
+        ...closedState,
+        activeSheet: true,
+        addMenuOpened: true,
+        playerOpened: true,
+      }),
+    ).toBe('sheet')
+  })
+
+  it('does not claim Escape with no music overlay open', () => {
+    expect(musicEscapeLayer(closedState)).toBeNull()
+  })
+})
diff --git a/frontend/src/utils/musicEscape.ts b/frontend/src/utils/musicEscape.ts
new file mode 100644
index 0000000..b6afd04
--- /dev/null
+++ b/frontend/src/utils/musicEscape.ts
@@ -0,0 +1,22 @@
+export type MusicEscapeLayer =
+  | 'delete-playlist-confirmation'
+  | 'menu'
+  | 'player'
+  | 'remove-track-confirmation'
+  | 'sheet'
+
+export function musicEscapeLayer(state: {
+  actionMenuOpened: boolean
+  activeSheet: boolean
+  addMenuOpened: boolean
+  confirmDeletePlaylist: boolean
+  confirmRemoveTrack: boolean
+  playerOpened: boolean
+}): MusicEscapeLayer | null {
+  if (state.confirmRemoveTrack) return 'remove-track-confirmation'
+  if (state.confirmDeletePlaylist) return 'delete-playlist-confirmation'
+  if (state.activeSheet) return 'sheet'
+  if (state.addMenuOpened || state.actionMenuOpened) return 'menu'
+  if (state.playerOpened) return 'player'
+  return null
+}
diff --git a/frontend/src/utils/widgetLayout.test.ts b/frontend/src/utils/widgetLayout.test.ts
index aac1d6f..38f80a3 100644
--- a/frontend/src/utils/widgetLayout.test.ts
+++ b/frontend/src/utils/widgetLayout.test.ts
@@ -9,6 +9,7 @@ import {
   removeWidget,
   resizeWidget,
   widgetOccupiedCells,
+  widgetKeyboardTarget,
 } from '@/utils/widgetLayout'
 
 describe('widget layout', () => {
@@ -47,6 +48,21 @@ describe('widget layout', () => {
     expect(next.instances).toHaveLength(layout.instances.length)
   })
 
+  it('provides bounded keyboard targets for each widget size', () => {
+    const layout = createDefaultWidgetLayout()
+    const clock = layout.instances.find(
+      (instance) => instance.id === 'home-clock',
+    )!
+    const music = layout.instances.find(
+      (instance) => instance.id === 'home-music',
+    )!
+
+    expect(widgetKeyboardTarget(clock, 'right')).toEqual({ column: 1, row: 0 })
+    expect(widgetKeyboardTarget(clock, 'up')).toBeNull()
+    expect(widgetKeyboardTarget(music, 'right')).toBeNull()
+    expect(widgetKeyboardTarget(music, 'down')).toEqual({ column: 0, row: 3 })
+  })
+
   it('allows a small widget in the center with app cells on both sides', () => {
     const layout = createDefaultWidgetLayout()
     const moved = moveWidget(layout, 'home-clock', 2, 1, 1)
diff --git a/frontend/src/utils/widgetLayout.ts b/frontend/src/utils/widgetLayout.ts
index 71182be..5b6dc54 100644
--- a/frontend/src/utils/widgetLayout.ts
+++ b/frontend/src/utils/widgetLayout.ts
@@ -6,6 +6,7 @@ import type {
   WidgetSettings,
   WidgetSize,
 } from '@/types/widgets'
+import type { ReorderDirection } from '@/utils/keyboard'
 
 export const WIDGET_GRID_COLUMNS = 4
 export const WIDGET_HOME_ROWS = 5
@@ -296,6 +297,32 @@ export function moveWidget(
   return { instances: placed, version: 1 }
 }
 
+export function widgetKeyboardTarget(
+  instance: WidgetInstance,
+  direction: ReorderDirection,
+): { column: number; row: number } | null {
+  const span = WIDGET_SPANS[instance.size]
+  const maximumColumn = WIDGET_GRID_COLUMNS - span.columns
+  const maximumRow = rowsForPage(instance.page) - span.rows
+  const target = {
+    column:
+      instance.column +
+      (direction === 'left' ? -1 : direction === 'right' ? 1 : 0),
+    row:
+      instance.row +
+      (direction === 'up' ? -1 : direction === 'down' ? 1 : 0),
+  }
+  if (
+    target.column < 0 ||
+    target.column > maximumColumn ||
+    target.row < 0 ||
+    target.row > maximumRow
+  ) {
+    return null
+  }
+  return target
+}
+
 export function resizeWidget(
   layout: WidgetLayout,
   id: string,
diff --git a/frontend/src/views/SpringboardView.vue b/frontend/src/views/SpringboardView.vue
index aa02bf4..65331af 100644
--- a/frontend/src/views/SpringboardView.vue
+++ b/frontend/src/views/SpringboardView.vue
@@ -17,13 +17,16 @@ import type { WidgetKind, WidgetSettings, WidgetSize } from '@/types/widgets'
 import {
   deleteHomePage as previewHomePageDelete,
   HOME_GRID_PAGE_SIZE,
+  homeKeyboardTarget,
   MAX_HOME_GRID_PAGES,
   type HomeArea,
 } from '@/utils/homeLayout'
+import type { ReorderDirection } from '@/utils/keyboard'
 import {
   deleteWidgetPage as previewWidgetPageDelete,
   moveWidget as previewWidgetMove,
   WIDGET_GRID_COLUMNS,
+  widgetKeyboardTarget,
   widgetOccupiedCells,
 } from '@/utils/widgetLayout'
 
@@ -515,6 +518,14 @@ function stopWidgetDrag(): void {
   clearWidgetDragPreview()
 }
 
+function reorderWidget(id: string, direction: ReorderDirection): void {
+  const instance = widgets.layout.instances.find((widget) => widget.id === id)
+  if (!instance) return
+  const target = widgetKeyboardTarget(instance, direction)
+  if (!target) return
+  widgets.move(id, instance.page, target.column, target.row)
+}
+
 function removeWidget(id: string): void {
   widgets.remove(id)
   if (widgetActionId.value === id) widgetActionId.value = null
@@ -620,6 +631,21 @@ function stopHomeDrag(): void {
   draggingHomeApp.value = null
 }
 
+function reorderHomeApp(
+  area: HomeArea,
+  sourceIndex: number,
+  direction: ReorderDirection,
+): void {
+  const targetIndex = homeKeyboardTarget(
+    appStore.homeLayout,
+    area,
+    sourceIndex,
+    direction,
+  )
+  if (targetIndex === null) return
+  appStore.moveHomeApp(area, sourceIndex, area, targetIndex)
+}
+
 async function addHomePage(): Promise<void> {
   if (addingHomePage.value) return
   addingHomePage.value = true
@@ -704,6 +730,7 @@ watch(isEditablePage, (visible) => {
             @dragstart="startWidgetDrag"
             @menu="openWidgetMenu"
             @remove="removeWidget"
+            @reorder="reorderWidget"
           />
         </div>
       </section>
@@ -725,6 +752,7 @@ watch(isEditablePage, (visible) => {
           @dragstart="startWidgetDrag"
           @menu="openWidgetMenu"
           @remove="removeWidget"
+          @reorder="reorderWidget"
         />
         <TransitionGroup
           :name="
@@ -750,6 +778,7 @@ watch(isEditablePage, (visible) => {
               @dragstart="startHomeDrag('grid', cell.sourceIndex)"
               @edit="enterEditMode"
               @remove="removeHomeApp(cell.app.id)"
+              @reorder="reorderHomeApp('grid', cell.sourceIndex, $event)"
             />
             <div
               v-else
@@ -946,6 +975,7 @@ watch(isEditablePage, (visible) => {
             @dragstart="startHomeDrag('dock', appIndex)"
             @edit="enterEditMode"
             @remove="removeHomeApp(app.id)"
+            @reorder="reorderHomeApp('dock', appIndex, $event)"
           />
           <div
             v-else
diff --git a/frontend/src/views/apps/BankingApp.vue b/frontend/src/views/apps/BankingApp.vue
index 46c4ce4..25b4c9a 100644
--- a/frontend/src/views/apps/BankingApp.vue
+++ b/frontend/src/views/apps/BankingApp.vue
@@ -40,6 +40,7 @@ import type {
   BankingTransactionKind,
 } from '@/types/banking'
 import type { PhoneContact } from '@/types/phone'
+import { handleEnterAction } from '@/utils/keyboard'
 import { formatPhoneNumber, normalizePhoneNumber } from '@/utils/phone'
 
 type BankingTab = 'home' | 'activity'
@@ -153,7 +154,9 @@ function closeAction(): void {
 
 function updateTarget(event: Event): void {
   if (!(event.target instanceof HTMLInputElement)) {
-    console.error('[banking] Phone number input emitted without an input target.')
+    console.error(
+      '[banking] Phone number input emitted without an input target.',
+    )
     return
   }
   target.value = event.target.value
@@ -163,7 +166,9 @@ function updateTarget(event: Event): void {
 function selectContact(contact: PhoneContact): void {
   target.value = contact.phone_number
   formError.value = ''
-  void nextTick(() => document.getElementById('banking-transfer-amount')?.focus())
+  void nextTick(() =>
+    document.getElementById('banking-transfer-amount')?.focus(),
+  )
 }
 
 function updateAmount(event: Event): void {
@@ -237,6 +242,7 @@ function focusableSheetElements(): HTMLElement[] {
 function handleSheetKeydown(event: KeyboardEvent): void {
   if (event.key === 'Escape') {
     event.preventDefault()
+    event.stopPropagation()
     closeAction()
     return
   }
@@ -258,6 +264,15 @@ function handleSheetKeydown(event: KeyboardEvent): void {
   }
 }
 
+function handleWindowKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || !action.value || event.defaultPrevented) {
+    return
+  }
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  closeAction()
+}
+
 function errorMessage(code: string): string {
   return phone.t(`Apps.banking.errors.${code}`) ===
     `Apps.banking.errors.${code}`
@@ -268,9 +283,8 @@ function errorMessage(code: string): string {
 async function submitAction(): Promise<void> {
   if (!action.value) return
   const parsedAmount = Number(amount.value)
-  const phoneNumber = action.value === 'transfer'
-    ? normalizePhoneNumber(target.value)
-    : undefined
+  const phoneNumber =
+    action.value === 'transfer' ? normalizePhoneNumber(target.value) : undefined
   if (
     !Number.isSafeInteger(parsedAmount) ||
     parsedAmount <= 0 ||
@@ -291,13 +305,17 @@ async function submitAction(): Promise<void> {
   action.value = null
 }
 
-onMounted(() => void banking.load())
+onMounted(() => {
+  window.addEventListener('keydown', handleWindowKeydown)
+  void banking.load()
+})
 
 watch(action, async (currentAction) => {
   if (currentAction) {
-    previousFocus = document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null
+    previousFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null
     await nextTick()
     document.getElementById('banking-transfer-target')?.focus()
     return
@@ -307,6 +325,7 @@ watch(action, async (currentAction) => {
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleWindowKeydown)
   if (wheelRefreshTimeout) clearTimeout(wheelRefreshTimeout)
   previousFocus?.focus()
 })
@@ -379,12 +398,17 @@ onBeforeUnmount(() => {
           </div>
           <strong>{{ formatMoney(banking.overview.bank) }}</strong>
           <div class="banking-balance__trend">
-            <span>{{ formatMoney(totals.incoming - totals.outgoing, true) }}</span>
+            <span>{{
+              formatMoney(totals.incoming - totals.outgoing, true)
+            }}</span>
             {{ phone.t('Apps.banking.recentPeriod') }}
           </div>
         </k-glass>
 
-        <section class="banking-actions" :aria-label="phone.t('Apps.banking.actions')">
+        <section
+          class="banking-actions"
+          :aria-label="phone.t('Apps.banking.actions')"
+        >
           <k-glass
             component="button"
             type="button"
@@ -435,17 +459,27 @@ onBeforeUnmount(() => {
           >
             <k-list inset strong class="banking-transaction-list">
               <k-list-item
-              v-for="transaction in banking.overview.transactions.slice(0, 5)"
-              :key="transaction.id"
+                v-for="transaction in banking.overview.transactions.slice(0, 5)"
+                :key="transaction.id"
                 :subtitle="formatDate(transaction.createdAt)"
                 :title="transactionTitle(transaction)"
               >
                 <template #media>
-                  <component :is="transactionIcons[transaction.kind]" :size="17" />
+                  <component
+                    :is="transactionIcons[transaction.kind]"
+                    :size="17"
+                  />
                 </template>
                 <template #after>
                   <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                    {{
+                      formatMoney(
+                        isIncoming(transaction.kind)
+                          ? transaction.amount
+                          : -transaction.amount,
+                        true,
+                      )
+                    }}
                   </b>
                 </template>
               </k-list-item>
@@ -460,13 +494,18 @@ onBeforeUnmount(() => {
       <template v-else>
         <section class="banking-activity-hero">
           <span>{{ phone.t('Apps.banking.activity') }}</span>
-          <strong>{{ formatMoney(totals.incoming - totals.outgoing, true) }}</strong>
+          <strong>{{
+            formatMoney(totals.incoming - totals.outgoing, true)
+          }}</strong>
           <small>{{ phone.t('Apps.banking.recentPeriod') }}</small>
         </section>
 
         <k-card :content-wrap="false" class="banking-card banking-chart-card">
           <div class="banking-chart-legend">
-            <span><i class="is-incoming"></i>{{ phone.t('Apps.banking.incoming') }}</span>
+            <span
+              ><i class="is-incoming"></i
+              >{{ phone.t('Apps.banking.incoming') }}</span
+            >
             <span><i></i>{{ phone.t('Apps.banking.outgoing') }}</span>
           </div>
           <div class="banking-chart">
@@ -475,14 +514,19 @@ onBeforeUnmount(() => {
               :key="day.date.getTime()"
               class="banking-chart__day"
               role="img"
-              :aria-label="phone.t('Apps.banking.chartDaySummary', {
-                day: day.label,
-                incoming: formatMoney(day.incoming),
-                outgoing: formatMoney(day.outgoing),
-              })"
+              :aria-label="
+                phone.t('Apps.banking.chartDaySummary', {
+                  day: day.label,
+                  incoming: formatMoney(day.incoming),
+                  outgoing: formatMoney(day.outgoing),
+                })
+              "
             >
               <div>
-                <i class="is-incoming" :style="{ height: `${day.incomingHeight}%` }"></i>
+                <i
+                  class="is-incoming"
+                  :style="{ height: `${day.incomingHeight}%` }"
+                ></i>
                 <i :style="{ height: `${day.outgoingHeight}%` }"></i>
               </div>
               <span>{{ day.label }}</span>
@@ -494,7 +538,10 @@ onBeforeUnmount(() => {
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.allTransactions') }}</h2>
           </div>
-          <k-card :content-wrap="false" class="banking-card banking-transaction-card">
+          <k-card
+            :content-wrap="false"
+            class="banking-card banking-transaction-card"
+          >
             <k-list inset strong class="banking-transaction-list">
               <k-list-item
                 v-for="transaction in banking.overview.transactions"
@@ -503,11 +550,21 @@ onBeforeUnmount(() => {
                 :title="transactionTitle(transaction)"
               >
                 <template #media>
-                  <component :is="transactionIcons[transaction.kind]" :size="17" />
+                  <component
+                    :is="transactionIcons[transaction.kind]"
+                    :size="17"
+                  />
                 </template>
                 <template #after>
                   <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                    {{
+                      formatMoney(
+                        isIncoming(transaction.kind)
+                          ? transaction.amount
+                          : -transaction.amount,
+                        true,
+                      )
+                    }}
                   </b>
                 </template>
               </k-list-item>
@@ -553,7 +610,7 @@ onBeforeUnmount(() => {
       </k-toolbar-pane>
     </k-tabbar>
 
-    <k-sheet :opened="Boolean(action)" class="banking-sheet" @backdropclick="closeAction">
+    <k-sheet :opened="Boolean(action)" @backdropclick="closeAction">
       <section
         v-if="action"
         class="banking-sheet__content"
@@ -600,7 +657,7 @@ onBeforeUnmount(() => {
             type="number"
             :value="amount"
             @input="updateAmount"
-            @keydown.enter="submitAction"
+            @keydown.enter="handleEnterAction($event, submitAction)"
           />
         </k-list>
         <div class="banking-contact-picker">
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index 42cfe1a..66c8cf7 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -94,6 +94,7 @@ import type {
   CompanySummary,
 } from '@/types/companies'
 import type { PhoneMedia } from '@/types/media'
+import { handleEnterAction } from '@/utils/keyboard'
 import { nuiCall } from '@/utils/nui'
 
 type CompaniesTab = 'directory' | 'requests' | 'work'
@@ -1764,7 +1765,7 @@ onBeforeUnmount(() => {
           :placeholder="phone.t('Apps.companies.requests.replyPlaceholder')"
           :value="threadDraft"
           @input="threadDraft = messagebarValue($event)"
-          @keydown.enter.exact.prevent="sendThreadMessage"
+          @keydown.enter.exact="handleEnterAction($event, sendThreadMessage)"
         >
           <template #right>
             <k-toolbar-pane class="ios:h-10">
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 9680cd4..bc9962f 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -82,6 +82,7 @@ import type {
 } from '@/types/crewlink'
 import { copyText } from '@/utils/clipboard'
 import { easyShareCrewLinkInviteCode } from '@/utils/easyshare'
+import { consumeEscape, handleEnterAction } from '@/utils/keyboard'
 import { nuiCall } from '@/utils/nui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
@@ -699,7 +700,30 @@ function onCrewLinkMessage(event: MessageEvent): void {
   if (event.data?.type === 'crewlink:changed') void crew.bootstrap()
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  if (
+    !confirmAction.value &&
+    !sheet.value &&
+    !selectedMember.value &&
+    !selectedPing.value
+  ) {
+    return
+  }
+  if (!consumeEscape(event)) return
+
+  if (confirmAction.value) {
+    cancelConfirmation()
+  } else if (sheet.value) {
+    closeSheet()
+  } else if (selectedMember.value) {
+    selectedMember.value = null
+  } else {
+    selectedPing.value = null
+  }
+}
+
 onMounted(async () => {
+  window.addEventListener('keydown', onKeydown, true)
   await crew.bootstrap()
   username.value = crew.profile?.username ?? ''
   openSharedInvite()
@@ -713,6 +737,7 @@ onBeforeUnmount(() => {
   if (liveTimer) window.clearInterval(liveTimer)
   if (toastTimer) window.clearTimeout(toastTimer)
   if (pointerFrame) cancelAnimationFrame(pointerFrame)
+  window.removeEventListener('keydown', onKeydown, true)
   window.removeEventListener('message', onCrewLinkMessage)
 })
 </script>
@@ -756,7 +781,7 @@ onBeforeUnmount(() => {
             maxlength="20"
             outline
             @input="updateValue('username', $event)"
-            @keydown.enter="createProfile"
+            @keydown.enter="handleEnterAction($event, createProfile)"
           />
         </k-list>
         <p v-if="formError" class="crewlink-error" role="alert">{{ formError }}</p>
@@ -1036,7 +1061,7 @@ onBeforeUnmount(() => {
       </k-tabbar>
     </template>
 
-    <k-sheet :opened="Boolean(sheet)" class="crewlink-sheet" @backdropclick="closeSheet">
+    <k-sheet :opened="Boolean(sheet)" @backdropclick="closeSheet">
       <section v-if="sheet" class="crewlink-sheet__content" role="dialog" aria-modal="true">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" :aria-label="phone.t('Common.close')" @click="closeSheet"><X /></k-link>
 
@@ -1051,7 +1076,7 @@ onBeforeUnmount(() => {
 
         <template v-else-if="sheet === 'join-group'">
           <span class="crewlink-sheet__icon"><UserPlus /></span><h2>{{ t('joinWithCode') }}</h2><p>{{ t('joinWithCodeBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-invite-code" :label="t('inviteCode')" :placeholder="t('inviteCodePlaceholder')" :value="inviteCode" maxlength="8" outline @input="updateValue('inviteCode', $event)" @keydown.enter="joinGroup" /></k-list>
+          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-invite-code" :label="t('inviteCode')" :placeholder="t('inviteCodePlaceholder')" :value="inviteCode" maxlength="8" outline @input="updateValue('inviteCode', $event)" @keydown.enter="handleEnterAction($event, joinGroup)" /></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
           <k-button large rounded :disabled="crew.isLoading" @click="joinGroup">{{ t('joinCrew') }}</k-button>
           <template v-if="crew.invitations.length">
@@ -1143,13 +1168,13 @@ onBeforeUnmount(() => {
 
         <template v-else-if="sheet === 'member' && !selectedMember && crew.profile">
           <span class="crewlink-sheet__icon"><UserRound /></span><h2>{{ t('editUsername') }}</h2><p>{{ t('editUsernameBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-username" :label="t('username')" :value="username" maxlength="20" outline @input="updateValue('username', $event)" @keydown.enter="saveProfile" /></k-list>
+          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-username" :label="t('username')" :value="username" maxlength="20" outline @input="updateValue('username', $event)" @keydown.enter="handleEnterAction($event, saveProfile)" /></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p><k-button large rounded @click="saveProfile">{{ phone.t('Common.save') }}</k-button>
         </template>
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedMember && !sheet)" class="crewlink-sheet" @backdropclick="selectedMember = null">
+    <k-sheet :opened="Boolean(selectedMember && !sheet)" @backdropclick="selectedMember = null">
       <section v-if="selectedMember" class="crewlink-sheet__content crewlink-member-preview">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedMember = null"><X /></k-link>
         <span class="crewlink-sheet__avatar" :style="{ '--crew': activeColour }">{{ memberInitials(selectedMember) }}</span><h2>@{{ selectedMember.username }}</h2><p>{{ roleLabel(selectedMember.role) }} · {{ memberStatus(selectedMember) }}</p>
@@ -1157,7 +1182,7 @@ onBeforeUnmount(() => {
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedPing)" class="crewlink-sheet" @backdropclick="selectedPing = null">
+    <k-sheet :opened="Boolean(selectedPing)" @backdropclick="selectedPing = null">
       <section v-if="selectedPing" class="crewlink-sheet__content crewlink-member-preview">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedPing = null"><X /></k-link>
         <span class="crewlink-sheet__icon" :style="{ background: pingColours[selectedPing.type] }"><component :is="pingIcons[selectedPing.type]" /></span><small>{{ t(`pingTypes.${selectedPing.type}`) }}</small><h2>{{ selectedPing.label }}</h2><p>{{ t('sharedBy', { username: selectedPing.creatorUsername }) }} · {{ expiresIn(selectedPing.expiresAt) }}</p>
diff --git a/frontend/src/views/apps/DarkChatApp.vue b/frontend/src/views/apps/DarkChatApp.vue
index 65f4301..664cca8 100644
--- a/frontend/src/views/apps/DarkChatApp.vue
+++ b/frontend/src/views/apps/DarkChatApp.vue
@@ -68,6 +68,7 @@ import type { EasySharePayload } from '@/types/easyshare'
 import type { MediaType, PhoneMedia } from '@/types/media'
 import { copyText } from '@/utils/clipboard'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 
 const VOICE_MAX_DURATION_MS = 60_000
 const VOICE_MAX_BYTES = 270_000
@@ -2332,7 +2333,7 @@ onBeforeUnmount(() => {
               clear-button
               @input="setIdentifier"
               @clear="identifier = ''"
-              @keydown.enter.prevent="requestStart()"
+              @keydown.enter="handleEnterAction($event, requestStart)"
           /></k-list>
           <k-button
             large
@@ -2601,7 +2602,7 @@ onBeforeUnmount(() => {
           :placeholder="t('message')"
           :colors="darkMessagebarColors"
           @input="setDraft"
-          @keydown.enter.exact.prevent="sendText"
+          @keydown.enter.exact="handleEnterAction($event, sendText)"
         >
           <template #left
             ><k-link
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 21c05b7..dbfa5ea 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -279,9 +279,17 @@ function moveMediaPreview(direction: number): void {
 
 function handleMediaPreviewKeydown(event: KeyboardEvent): void {
   if (!mediaPreview.value) return
-  if (event.key === 'Escape') closeMediaPreview()
-  if (event.key === 'ArrowLeft') moveMediaPreview(-1)
-  if (event.key === 'ArrowRight') moveMediaPreview(1)
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    closeMediaPreview()
+  } else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    moveMediaPreview(-1)
+  } else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    moveMediaPreview(1)
+  }
 }
 
 function toast(path: string): void {
@@ -731,11 +739,11 @@ watch(
 onBeforeUnmount(() => {
   if (exploreSearchTimer !== undefined) window.clearTimeout(exploreSearchTimer)
   if (networkSearchTimer !== undefined) window.clearTimeout(networkSearchTimer)
-  window.removeEventListener('keydown', handleMediaPreviewKeydown)
+  window.removeEventListener('keydown', handleMediaPreviewKeydown, true)
 })
 
 onMounted(async () => {
-  window.addEventListener('keydown', handleMediaPreviewKeydown)
+  window.addEventListener('keydown', handleMediaPreviewKeydown, true)
   const selection =
     messageMedia.consumeMany<ComposerContext>('feather:composer')
   const profileSelection =
@@ -4929,4 +4937,87 @@ onMounted(async () => {
   color: inherit;
   background: var(--feather-panel);
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .feather-navbar {
+    --k-navbar-bg-color: rgb(255 255 255 / 91%);
+    border-bottom-color: rgb(127 127 127 / 18%);
+  }
+  :global(.dark) .feather-navbar {
+    --k-navbar-bg-color: rgb(9 13 18 / 91%);
+  }
+  .dark.feather-app .feather-navbar {
+    --k-navbar-bg-color: rgb(0 0 0 / 90%);
+    background: rgb(0 0 0 / 88%);
+  }
+  .feather-app--active .feather-navbar {
+    --k-navbar-bg-color: rgb(18 23 27 / 91%);
+    background: rgb(18 23 27 / 88%);
+  }
+  .feather-app--active.feather-app--light .feather-navbar {
+    --k-navbar-bg-color: rgb(251 251 246 / 91%);
+    background: rgb(251 251 246 / 88%);
+  }
+  .feather-feed-tabs,
+  .feather-explore-head,
+  .feather-activity-head,
+  .feather-trend,
+  .feather-composer__tools,
+  .feather-section-title,
+  .feather-profile,
+  .feather-profile-tabs,
+  .feather-activity,
+  .feather-person {
+    border-color: rgb(127 127 127 / 18%);
+  }
+  .feather-trend:active,
+  .feather-profile__stats button,
+  .feather-report select,
+  .feather-report textarea,
+  .feather-app--active .feather-explore-search :deep(form) {
+    background: rgb(127 127 127 / 7%);
+  }
+  .feather-profile__stats button:active,
+  .feather-thread-reply__comment-target,
+  .feather-thread-title span,
+  .feather-app--active .feather-profile__stats span,
+  .feather-composer-media > header > span,
+  .feather-composer-media > header > b,
+  .feather-app--active .feather-follow-button--pending:hover,
+  .feather-app--active :deep(.feather-follow:hover),
+  .feather-composer-media__actions button:not(:disabled):hover {
+    background: rgb(29 155 240 / 13%);
+  }
+  .feather-report select,
+  .feather-report textarea,
+  .feather-app--active .feather-follow-button--following {
+    border-color: rgb(127 127 127 / 24%);
+  }
+  .feather-app--active :deep(.feather-post-glass),
+  .feather-network-list,
+  .feather-app--active .feather-thread-reply,
+  .feather-profile-suggestion,
+  .feather-edit__identity,
+  .feather-edit__photo,
+  .feather-edit__fields,
+  .feather-connections__tabs,
+  .feather-connections__list {
+    background: var(--feather-panel);
+  }
+  .feather-network-person__bio {
+    color: var(--feather-muted);
+  }
+  .feather-network-person__avatar .feather-avatar,
+  .feather-app--active .feather-follow-button--pending,
+  .feather-app--active .feather-profile__actions :deep(.k-button),
+  .feather-edit__photo-actions :deep(.k-button) {
+    border-color: var(--feather-blue);
+  }
+  .feather-compose-fab,
+  .feather-edit__avatar {
+    border-color: #70c5fa;
+  }
+  .feather-connections__remove {
+    border-color: #f04f65;
+  }
+}
 </style>
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index 6eda1a4..f7dbca5 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -85,6 +85,7 @@ import type { PhoneMedia } from '@/types/media'
 import type { EasySharePayload } from '@/types/easyshare'
 import type { GifSearchResult, SmsAttachmentType } from '@/types/messages'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 
 type FlareTab = 'discover' | 'explore' | 'likes' | 'matches' | 'profile'
 type ExploreMode = 'all' | 'dates' | 'friends' | 'longTerm'
@@ -1145,7 +1146,7 @@ onBeforeUnmount(() => {
         :value="draft"
         :disabled="flare.sending"
         @input="draft = eventValue($event)"
-        @keydown.enter.exact.prevent="sendMessage"
+        @keydown.enter.exact="handleEnterAction($event, sendMessage)"
       >
         <template #left>
           <k-toolbar-pane class="ios:h-10 messages-messagebar__tools">
@@ -1861,7 +1862,7 @@ onBeforeUnmount(() => {
         :aria-modal="choiceOpened ? 'true' : undefined"
         aria-labelledby="flare-choice-sheet-title"
         :inert="!choiceOpened"
-        @keydown.esc="closeChoice"
+        @keydown.esc.stop.prevent="closeChoice"
       >
         <span class="flare-choice-sheet__grabber" aria-hidden="true" />
         <header class="flare-choice-sheet__header">
@@ -3097,4 +3098,19 @@ onBeforeUnmount(() => {
 :global(.phone-app.dark .flare-action) {
   box-shadow: none;
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .flare-navbar {
+    border-bottom-color: rgb(127 127 127 / 18%);
+  }
+  .flare-photo-slot {
+    background: rgb(127 127 127 / 18%);
+  }
+  .flare-photo-grid :deep(.flare-photo-add) {
+    border-color: rgb(127 127 127 / 44%);
+    background: var(--flare-surface);
+  }
+  .flare-choice-sheet__grabber {
+    background: rgb(127 127 127 / 38%);
+  }
+}
 </style>
diff --git a/frontend/src/views/apps/MapApp.vue b/frontend/src/views/apps/MapApp.vue
index 5c6cd23..2667c65 100644
--- a/frontend/src/views/apps/MapApp.vue
+++ b/frontend/src/views/apps/MapApp.vue
@@ -36,6 +36,7 @@ import { useMapStore } from '@/stores/map'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MapMarker, MapMarkerColor } from '@/types/map'
+import { handleEnterAction } from '@/utils/keyboard'
 import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 type MapStyle = 'default' | 'satellite' | 'atlas' | 'roads'
@@ -656,7 +657,7 @@ onBeforeUnmount(() => {
             maxlength="40"
             outline
             @input="updateMarkerLabel"
-            @keydown.enter="saveMarker"
+            @keydown.enter="handleEnterAction($event, saveMarker)"
           />
         </k-list>
         <span class="map-marker-sheet__label">{{
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index d401732..bae7e1f 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -54,6 +54,7 @@ import { useMessagesStore } from '@/stores/messages'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 import { sortContactsByMessageRecency } from '@/utils/messages'
 import type {
   GifSearchResult,
@@ -1496,7 +1497,7 @@ onBeforeUnmount(() => {
       :value="draft"
       :disabled="sending"
       @input="draft = eventValue($event)"
-      @keydown.enter.exact.prevent="sendTextMessage"
+      @keydown.enter.exact="handleEnterAction($event, sendTextMessage)"
     >
       <template #left>
         <k-toolbar-pane class="ios:h-10 messages-messagebar__tools">
diff --git a/frontend/src/views/apps/MusicApp.vue b/frontend/src/views/apps/MusicApp.vue
index 1ac9a67..5de0de9 100644
--- a/frontend/src/views/apps/MusicApp.vue
+++ b/frontend/src/views/apps/MusicApp.vue
@@ -53,6 +53,8 @@ import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MusicPlaylist, MusicTrack } from '@/types/music'
 import { easyShareMusicTarget } from '@/utils/easyshare'
+import { consumeEscape, handleEnterAction } from '@/utils/keyboard'
+import { musicEscapeLayer } from '@/utils/musicEscape'
 
 type MusicTab = 'library' | 'playlists' | 'search'
 type MusicSheet =
@@ -498,6 +500,31 @@ function updateVolume(event: Event): void {
   music.setVolume(Number(eventValue(event)) / 100)
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  const layer = musicEscapeLayer({
+    actionMenuOpened: actionMenuOpened.value,
+    activeSheet: Boolean(activeSheet.value),
+    addMenuOpened: addMenuOpened.value,
+    confirmDeletePlaylist: confirmDeletePlaylist.value,
+    confirmRemoveTrack: confirmRemoveTrack.value,
+    playerOpened: playerOpened.value,
+  })
+  if (!layer) return
+  if (!consumeEscape(event)) return
+
+  if (layer === 'remove-track-confirmation') {
+    cancelRemoveTrack()
+  } else if (layer === 'delete-playlist-confirmation') {
+    confirmDeletePlaylist.value = false
+  } else if (layer === 'sheet') {
+    closeSheet()
+  } else if (layer === 'menu') {
+    dismissMenus()
+  } else if (layer === 'player') {
+    playerOpened.value = false
+  }
+}
+
 watch(
   () => music.playlists,
   () => {
@@ -510,6 +537,7 @@ watch(
 )
 
 onMounted(async () => {
+  window.addEventListener('keydown', onKeydown, true)
   await music.load()
   const target = easyShareMusicTarget(
     route.query.easyShareKind,
@@ -531,6 +559,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   if (playerPickerTimer !== null) window.clearTimeout(playerPickerTimer)
+  window.removeEventListener('keydown', onKeydown, true)
 })
 </script>
 
@@ -1061,12 +1090,12 @@ onBeforeUnmount(() => {
       </k-list>
     </section>
 
-    <k-sheet
-      :opened="Boolean(activeSheet)"
-      class="music-form-sheet"
-      @backdropclick="closeSheet"
-    >
-      <section class="music-sheet-content">
+    <div class="music-form-sheet">
+      <k-sheet
+        :opened="Boolean(activeSheet)"
+        @backdropclick="closeSheet"
+      >
+        <section class="music-sheet-content">
         <header>
           <k-link component="button" @click="closeSheet">{{
             phone.t(
@@ -1089,7 +1118,7 @@ onBeforeUnmount(() => {
               type="url"
               :value="youtubeUrl"
               @input="youtubeUrl = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
             <k-list-input
               :label="phone.t('Apps.music.youtubeTitle')"
@@ -1098,7 +1127,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.youtubeTitlePlaceholder')"
               :value="youtubeTitle"
               @input="youtubeTitle = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
             <k-list-input
               :label="phone.t('Apps.music.youtubeArtist')"
@@ -1107,7 +1136,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.youtubeArtistPlaceholder')"
               :value="youtubeArtist"
               @input="youtubeArtist = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
           </k-list>
           <p v-if="music.error" class="music-form-error" role="alert">
@@ -1256,7 +1285,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.playlistPlaceholder')"
               :value="playlistName"
               @input="playlistName = eventValue($event)"
-              @keydown.enter="submitPlaylist"
+              @keydown.enter="handleEnterAction($event, submitPlaylist)"
             />
           </k-list>
           <p v-if="music.error" class="music-form-error" role="alert">
@@ -1272,15 +1301,16 @@ onBeforeUnmount(() => {
             <template v-else>{{ phone.t('Common.save') }}</template>
           </k-button>
         </template>
-      </section>
-    </k-sheet>
+        </section>
+      </k-sheet>
+    </div>
 
-    <k-sheet
-      :opened="playerOpened"
-      class="music-player-sheet"
-      @backdropclick="playerOpened = false"
-    >
-      <section v-if="music.currentTrack" class="music-player">
+    <div class="music-player-sheet">
+      <k-sheet
+        :opened="playerOpened"
+        @backdropclick="playerOpened = false"
+      >
+        <section v-if="music.currentTrack" class="music-player">
         <header>
           <k-link
             component="button"
@@ -1383,8 +1413,9 @@ onBeforeUnmount(() => {
         <p v-if="music.playbackError" class="music-player-error">
           {{ phone.t('Apps.music.errors.playback_failed') }}
         </p>
-      </section>
-    </k-sheet>
+        </section>
+      </k-sheet>
+    </div>
 
     <k-dialog
       :opened="confirmRemoveTrack"
@@ -1874,6 +1905,7 @@ onBeforeUnmount(() => {
 .music-form-sheet,
 .music-player-sheet {
   --music-accent: #fa2d48;
+  display: contents;
   color: var(--music-label);
 }
 
@@ -1985,7 +2017,7 @@ onBeforeUnmount(() => {
   color: #ff453a !important;
 }
 
-.music-player-sheet {
+.music-player-sheet :deep(.k-sheet) {
   background: rgb(22 22 25 / 96%) !important;
 }
 

From 87ae9902bfda1d0748c278480f8dbb4c3084118f Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Wed, 12 Aug 2026 18:59:48 +0200
Subject: [PATCH 41/63] FIX - add Chrome 103 rendering fallbacks

---
 README.md                                     | 39 ++++++++---
 frontend/src/assets/main.css                  | 68 +++++++++++++------
 frontend/src/components/CustomAppFrame.vue    |  2 +
 .../src/components/MessageContactBubble.vue   |  1 +
 frontend/src/components/SharedContentCard.vue |  1 +
 .../components/feather/FeatherPostCard.vue    | 11 +++
 frontend/src/utils/preferences.test.ts        | 11 +++
 frontend/src/utils/preferences.ts             | 18 +++--
 frontend/src/views/apps/BillingApp.vue        | 25 +++++++
 frontend/src/views/apps/NotesApp.vue          |  3 +-
 frontend/src/views/apps/NumberMergeApp.vue    | 55 +++++++++++----
 frontend/src/views/apps/PhoneApp.vue          |  2 +-
 frontend/src/views/apps/PicstagramApp.vue     |  6 ++
 13 files changed, 188 insertions(+), 54 deletions(-)

diff --git a/README.md b/README.md
index c8019bf..4b8324a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,22 @@
 # sky_phone
 
+## Payphones
+
+Payphone dialing is validated against server-owned booth positions. Vanilla GTA V positions live
+in `sky_phone/config/payphones.lua`; the server compares its own player coordinates with this list
+and does not trust coordinates or models sent by the NUI or client.
+
+For a custom map or MLO, add each booth to `Config.Payphones.Locations` in that server-only file:
+
+```lua
+{ model = "prop_phonebox_01a", coords = { x = 123.45, y = 678.90, z = 21.0 } },
+```
+
+The model must also be present in `Config.Payphones.Props`. Coordinates must be finite Lua numbers
+inside the supported world bounds. Restart `sky_phone` after changing the list. If payphones are
+enabled but the list is empty or contains invalid entries, the server logs a visible warning and
+rejects calls that cannot be matched to a valid configured location.
+
 ## Custom Apps
 
 `sky_phone` erkennt Registrierungen gestarteter Fremd-App-Ressourcen über integrierte
@@ -167,23 +184,25 @@ and restart the resource after updating the configuration.
 - When `Config.Sim.Enabled = true`, two unique, non-stackable inventory items named `sky_phone_sim_registered` and `sky_phone_sim_anonymous`. Their metadata is initialized automatically on first use, so shops and crafting recipes add plain items without supplying a number. These item definitions are not required when SIM cards are disabled.
 - `oxmysql` with MySQL/MariaDB.
 - `pma-voice` when `Config.Calls.VoiceProvider` is set to `"pma"`.
-- A FiveManage V3 Media API token for Camera photo/video uploads and Gallery deletion. Set the
-  server-only `Config.Media.FiveManage.ApiKey` in `sky_phone/config/media.lua`; the token is never
-  sent to NUI because clients receive temporary presigned upload URLs instead.
+- A FiveManage V3 Media API token for Camera photo/video uploads and Gallery deletion. Set it as a
+  server-only convar; the token is never sent to NUI because clients receive temporary presigned
+  upload URLs instead:
+
+```cfg
+set sky_phone_fivemanage_api_key "replace-with-your-media-token"
+```
 - `yaca-voice`, `pma-voice`, or `saltychat` when the Radio app is enabled. `Config.Radio.VoiceProvider = "auto"` selects the first running provider in that order.
 
 ## Messages GIF provider
 
-Configure GIF search in `sky_phone/config/config.lua`:
+Configure GIF search as a server-only convar:
 
-```lua
-Config.Media.GiphyApiKey = "YOUR_GIPHY_API_KEY"
+```cfg
+set sky_phone_giphy_api_key "replace-with-your-giphy-api-key"
 ```
 
-GIPHY provides trending and searched GIFs through a paginated server-side proxy. The shared
-`config.lua` is loaded by both FiveM runtimes, so its values are available to clients even though
-only the server uses the GIPHY key. Photo and video actions in Messages are intentionally inactive
-until their dedicated implementation is available.
+GIPHY provides trending and searched GIFs through a paginated server-side proxy. Only the server
+reads the key. Photo and video actions in Messages use media captured by the Camera app.
 
 Database migrations run automatically. Existing `sky_phone_mail_accounts` installations are renamed to `sky_phone_accounts` while preserving account IDs and mail foreign keys. The migration also creates `sky_phone_character_devices` for persistent non-unique phone mappings and marks automatic SIMs through `sky_phone_sims.is_virtual`. iFruit passwords are intentional in-character credentials and remain plaintext `VARCHAR(64)` values; registration screens warn players never to reuse a real password.
 
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 10e108c..2769c81 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -14,9 +14,13 @@
 .sim-picker {
   position: relative;
   width: min(58vh, 90vw);
-  max-height: 46vh;
-  overflow: clip;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  min-height: 0;
+  overflow: hidden;
   padding: 2.2vh;
+  display: flex;
+  flex-direction: column;
   border: 0.1vh solid rgb(255 255 255 / 12%);
   border-radius: 0.9vh;
   background: #050505;
@@ -56,11 +60,16 @@
 
 .sim-picker__header {
   display: flex;
+  flex: 0 0 auto;
   justify-content: space-between;
   gap: 2vh;
   margin-bottom: 1.6vh;
 }
 
+.sim-picker__header > div {
+  min-width: 0;
+}
+
 .sim-picker__header h1,
 .sim-picker__confirmation h2 {
   margin: 0;
@@ -73,6 +82,7 @@
   margin: 0.45vh 0 0;
   color: #9ca3af;
   font-size: 1.15vh;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__close {
@@ -80,6 +90,8 @@
   place-items: center;
   width: 2.8vh;
   height: 2.8vh;
+  min-width: 32px;
+  min-height: 32px;
   border: 0;
   border-radius: 0.35vh;
   background: #1dd1ce;
@@ -96,10 +108,12 @@
   position: relative;
   z-index: 1;
   display: grid;
+  flex: 1 1 auto;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1vh;
-  max-height: 34vh;
-  overflow: auto;
+  min-height: 0;
+  max-height: 54vh;
+  overflow-y: auto;
 }
 
 .sim-picker__card {
@@ -140,30 +154,34 @@
 }
 
 .sim-picker__details strong {
-  overflow: hidden;
   font-size: 1.2vh;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__details small {
   color: #9ca3af;
   font-size: 0.95vh;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__confirmation {
+  min-height: 0;
+  overflow-y: auto;
   padding: 2vh 0 0;
   text-align: center;
 }
 
 .sim-picker__confirmation > div {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   gap: 1vh;
   margin-top: 2vh;
 }
 
 .sim-picker__confirmation button {
+  min-height: 40px;
+  overflow-wrap: anywhere;
   padding: 0.8vh 1.6vh;
   border: 0.1vh solid rgb(255 255 255 / 18%);
   border-radius: 0.45vh;
@@ -184,6 +202,13 @@
   color: #ff453a;
   font-size: 1vh;
   text-align: center;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 640px) {
+  .sim-picker__cards {
+    grid-template-columns: 1fr;
+  }
 }
 :root {
   font-family:
@@ -205,6 +230,7 @@ body,
   margin: 0;
   overflow: hidden;
   background: transparent !important;
+  pointer-events: none;
   user-select: none;
 }
 button,
@@ -885,13 +911,13 @@ button {
 }
 
 /* DarkChat is intentionally independent from the phone appearance setting. */
-.phone-app:has(.darkchat-page),
-.phone-app:has(.darkchat-page) .phone-app-window,
-.phone-app:has(.darkchat-page) .phone-app-window__content {
+.phone-app--darkchat,
+.phone-app--darkchat .phone-app-window,
+.phone-app--darkchat .phone-app-window__content {
   background: #000 !important;
   color-scheme: dark;
 }
-.phone-app:has(.darkchat-page) .phone-status-bar {
+.phone-app--darkchat .phone-status-bar {
   color: #fff !important;
   --status-bar-color: #fff;
 }
@@ -1592,7 +1618,7 @@ button {
   font-size: 9px;
   white-space: nowrap;
 }
-.darkchat-message:has(.darkchat-reactions) {
+.darkchat-message {
   margin-bottom: 12px;
 }
 .darkchat-replying {
@@ -3714,7 +3740,7 @@ button {
 .clock-world-time {
   margin-top: 8px;
   font-variant-numeric: tabular-nums;
-  font-size: min(76px, 20cqw);
+  font-size: 74px;
   font-weight: 200;
   letter-spacing: -4px;
 }
@@ -3861,7 +3887,7 @@ button {
 .clock-digits {
   margin: 70px 0 54px;
   font-variant-numeric: tabular-nums;
-  font-size: min(52px, 14cqw);
+  font-size: 52px;
   font-weight: 200;
 }
 .clock-sound-menu {
@@ -4242,11 +4268,11 @@ button {
   background: #fff !important;
   color: #111;
 }
-.phone-app:has(.messages-page) .phone-status-bar {
+.phone-app--messages .phone-status-bar {
   color: #080808;
   text-shadow: none;
 }
-.phone-app:has(.messages-page)::before {
+.phone-app--messages::before {
   content: '';
   position: absolute;
   z-index: 60;
@@ -5458,7 +5484,7 @@ button {
   }
 }
 /* iOS 26-style Liquid Glass refinements and complete media pickers. */
-.phone-app:has(.messages-page) {
+.messages-page {
   --ios-glass: rgb(252 252 255 / 70%);
   --ios-glass-strong: rgb(255 255 255 / 86%);
   --ios-glass-border: rgb(255 255 255 / 72%);
@@ -5779,21 +5805,21 @@ button {
 .messages-attachment--video small {
   z-index: 2;
 }
-.messages-attachment--gif:has(img) {
+.messages-attachment--gif {
   background: #e9e9ed;
 }
 
 /* Konsta's k-app dark state drives the complete iOS Messages palette. */
-.phone-app.dark:has(.messages-page) {
+.phone-app.dark .messages-page {
   --ios-glass: rgb(28 28 30 / 76%);
   --ios-glass-strong: rgb(36 36 38 / 90%);
   --ios-glass-border: rgb(255 255 255 / 12%);
   color-scheme: dark;
 }
-.phone-app.dark:has(.messages-page)::before {
+.phone-app--messages.dark::before {
   background: #000;
 }
-.phone-app.dark:has(.messages-page) .phone-status-bar {
+.phone-app--messages.dark .phone-status-bar {
   color: #fff;
   text-shadow: none;
 }
diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
index bc6d973..135be23 100644
--- a/frontend/src/components/CustomAppFrame.vue
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -447,6 +447,8 @@ watch(() => catalog.openRequests[props.app.id], flushOpenRequest, {
   right: auto;
   bottom: auto;
   left: 50%;
+  width: 827px;
+  height: 368px;
   width: 100cqh;
   height: 100cqw;
   transform: translate(-50%, -50%) rotate(90deg);
diff --git a/frontend/src/components/MessageContactBubble.vue b/frontend/src/components/MessageContactBubble.vue
index 0ee78bc..e50fba7 100644
--- a/frontend/src/components/MessageContactBubble.vue
+++ b/frontend/src/components/MessageContactBubble.vue
@@ -81,6 +81,7 @@ const initials = computed(() =>
 
 <style scoped>
 .message-contact-card {
+  width: min(258px, 100%);
   width: min(258px, 72cqw);
   overflow: hidden;
   border: 1px solid rgb(255 255 255 / 48%);
diff --git a/frontend/src/components/SharedContentCard.vue b/frontend/src/components/SharedContentCard.vue
index 8b39709..ab8edfc 100644
--- a/frontend/src/components/SharedContentCard.vue
+++ b/frontend/src/components/SharedContentCard.vue
@@ -93,6 +93,7 @@ watch(
 
 <style scoped>
 .shared-content-card {
+  width: min(262px, 100%);
   width: min(262px, 73cqw);
   overflow: hidden;
   border: 1px solid rgb(60 60 67 / 13%);
diff --git a/frontend/src/components/feather/FeatherPostCard.vue b/frontend/src/components/feather/FeatherPostCard.vue
index 83d18f9..d771b94 100644
--- a/frontend/src/components/feather/FeatherPostCard.vue
+++ b/frontend/src/components/feather/FeatherPostCard.vue
@@ -367,4 +367,15 @@ function relativeTime(timestamp: number): string {
 .feather-actions .is-bookmarked {
   color: #438cf5;
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .feather-post:active {
+    background: rgb(127 127 127 / 4%);
+  }
+  .feather-follow {
+    border-color: var(--feather-blue, #1d9bf0);
+  }
+  .feather-media {
+    border-color: rgb(127 127 127 / 18%);
+  }
+}
 </style>
diff --git a/frontend/src/utils/preferences.test.ts b/frontend/src/utils/preferences.test.ts
index 9ddfb58..5084e7d 100644
--- a/frontend/src/utils/preferences.test.ts
+++ b/frontend/src/utils/preferences.test.ts
@@ -85,6 +85,17 @@ describe('preferences', () => {
     expect(value.settings.screenBrightness).toBe(10)
   })
 
+  it('keeps the phone above the minimum usable scale', () => {
+    const value = parsePhonePreferences(
+      JSON.stringify({
+        version: 1,
+        settings: { phoneScale: 50 },
+      }),
+    )
+
+    expect(value.settings.phoneScale).toBe(75)
+  })
+
   it('preserves safe notification preferences for custom apps', () => {
     const appId = 'example-app' as LaunchablePhoneAppId
     const value = parsePhonePreferences(
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 7ef0550..c586705 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -23,7 +23,7 @@ export const PHONE_FRAME_IDS = [
 export const RINGTONE_IDS = ['skyline', 'horizon', 'pulse'] as const
 export const NOTIFICATION_SOUND_IDS = ['chime', 'signal', 'soft'] as const
 export const WALLPAPER_IDS = ['midnight', 'aurora', 'ember'] as const
-export const PHONE_SCALE_MIN = 50
+export const PHONE_SCALE_MIN = 75
 export const PHONE_SCALE_MAX = 150
 export const PHONE_SCALE_STEP = 5
 
@@ -197,6 +197,10 @@ export function ensureAppNotificationPreferences(
   }
 }
 
+export function clampPhoneScale(value: number): number {
+  return Math.min(PHONE_SCALE_MAX, Math.max(PHONE_SCALE_MIN, value))
+}
+
 export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
   if (!raw) return cloneJsonData(DEFAULT_PHONE_PREFERENCES)
 
@@ -249,11 +253,13 @@ export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
           100,
         ),
         notifications: readNotifications(settings.notifications),
-        phoneScale: readNumber(
-          settings.phoneScale,
-          defaults.phoneScale,
-          PHONE_SCALE_MIN,
-          PHONE_SCALE_MAX,
+        phoneScale: clampPhoneScale(
+          readNumber(
+            settings.phoneScale,
+            defaults.phoneScale,
+            Number.MIN_SAFE_INTEGER,
+            Number.MAX_SAFE_INTEGER,
+          ),
         ),
         ringtone: readChoice(
           settings.ringtone,
diff --git a/frontend/src/views/apps/BillingApp.vue b/frontend/src/views/apps/BillingApp.vue
index d290b24..e637b63 100644
--- a/frontend/src/views/apps/BillingApp.vue
+++ b/frontend/src/views/apps/BillingApp.vue
@@ -1404,6 +1404,31 @@ onBeforeUnmount(() => {
   --k-button-bg-color: var(--billing-blue);
   width: 100%;
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .billing-navbar {
+    --k-navbar-bg-color: rgb(7 9 12 / 90%);
+    background: rgb(7 9 12 / 88%);
+  }
+  .billing-app--light .billing-navbar {
+    --k-navbar-bg-color: rgb(245 247 250 / 91%);
+    background: rgb(245 247 250 / 88%);
+  }
+  .billing-summary__item,
+  .billing-filter-panel,
+  .billing-invoice-card,
+  .billing-list-row,
+  .billing-search :deep(form),
+  .billing-detail__hero,
+  .billing-panel,
+  .billing-note {
+    background: var(--billing-panel);
+  }
+  .billing-detail__hero--paid {
+    background:
+      radial-gradient(circle at 50% 6%, rgb(72 199 111 / 18%), transparent 52%),
+      var(--billing-panel);
+  }
+}
 .billing-toast {
   z-index: 50;
 }
diff --git a/frontend/src/views/apps/NotesApp.vue b/frontend/src/views/apps/NotesApp.vue
index 2a6c55b..a4c600e 100644
--- a/frontend/src/views/apps/NotesApp.vue
+++ b/frontend/src/views/apps/NotesApp.vue
@@ -50,7 +50,8 @@ const deleteActionColors = {
   textMaterial: 'text-red-500',
 }
 const noteBodyStyle: CSSProperties = {
-  height: 'calc(100cqh - 210px)',
+  height: '617px',
+  maxHeight: 'calc(100% - 210px)',
   resize: 'none',
 }
 const currentNote = computed(() =>
diff --git a/frontend/src/views/apps/NumberMergeApp.vue b/frontend/src/views/apps/NumberMergeApp.vue
index c1d6cbf..897c649 100644
--- a/frontend/src/views/apps/NumberMergeApp.vue
+++ b/frontend/src/views/apps/NumberMergeApp.vue
@@ -348,6 +348,11 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 10px;
+}
+
+.number-merge-header > div {
+  min-width: 0;
 }
 
 .number-merge-header span {
@@ -357,6 +362,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-weight: 800;
   letter-spacing: 1.2px;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 }
 
 .number-merge-header h1 {
@@ -364,6 +370,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-size: 28px;
   line-height: 1;
   letter-spacing: -1px;
+  overflow-wrap: anywhere;
 }
 
 .number-merge-header button,
@@ -383,11 +390,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 
 .number-merge-menu {
   height: calc(100% - 55px);
+  min-height: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 13px;
+  overflow-y: auto;
+  padding: 12px 0;
   text-align: center;
 }
 
@@ -401,6 +411,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   border-radius: 29px;
   background: #7e5147;
   box-shadow: 0 17px 30px rgb(93 48 36 / 20%);
+  flex: 0 0 auto;
+  margin-top: auto;
   transform: rotate(-2deg);
 }
 
@@ -418,8 +430,9 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 .number-merge-hero__tile--4 { color: #fff7e4; background: #e96c2c; }
 .number-merge-hero__tile--8 { color: #fff7e4; background: #713c31; }
 
-.number-merge-menu__intro h2 { margin: 0; font-size: 25px; letter-spacing: -0.5px; }
-.number-merge-menu__intro p { max-width: 300px; margin: 6px 0 0; color: #8b675b; font-size: 14px; line-height: 1.45; }
+.number-merge-menu__intro { width: 100%; }
+.number-merge-menu__intro h2 { margin: 0; font-size: 25px; letter-spacing: -0.5px; overflow-wrap: anywhere; }
+.number-merge-menu__intro p { max-width: 300px; margin: 6px auto 0; color: #8b675b; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
 
 .number-merge-records {
   width: 100%;
@@ -429,6 +442,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 }
 
 .number-merge-records div {
+  min-width: 0;
   display: grid;
   gap: 1px;
   padding: 8px;
@@ -443,9 +457,10 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 }
 
-.number-merge-records strong { font-size: 20px; }
+.number-merge-records strong { min-width: 0; overflow-wrap: anywhere; font-size: 20px; }
 
 .number-merge-menu__actions { width: 100%; display: grid; gap: 7px; }
 
@@ -453,11 +468,12 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 .number-merge-secondary,
 .number-merge-danger {
   min-height: 46px;
-  padding: 0 18px;
+  padding: 10px 18px;
   border-radius: 14px;
   font-size: 15px;
   font-weight: 850;
   cursor: pointer;
+  overflow-wrap: anywhere;
 }
 
 .number-merge-primary {
@@ -474,14 +490,17 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 }
 
 .number-merge-how-to {
+  width: 100%;
+  flex: 0 0 auto;
+  margin-bottom: auto;
   padding: 9px 15px;
   border-radius: 14px;
   color: #795549;
   background: rgb(255 255 255 / 28%);
 }
 
-.number-merge-how-to strong { font-size: 13px; text-transform: uppercase; }
-.number-merge-how-to p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; }
+.number-merge-how-to strong { font-size: 13px; text-transform: uppercase; overflow-wrap: anywhere; }
+.number-merge-how-to p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
 .number-merge-how-to div {
   margin: 7px 0 4px;
   color: #a7472d;
@@ -489,7 +508,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   font-weight: 900;
   letter-spacing: -0.2px;
 }
-.number-merge-how-to small { display: block; color: #8b6559; font-size: 11px; line-height: 1.35; }
+.number-merge-how-to small { display: block; color: #8b6559; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
 
 .number-merge-game {
   position: absolute;
@@ -629,7 +648,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 8px;
   padding: 22px;
   border-radius: 20px;
@@ -637,12 +656,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   backdrop-filter: blur(5px);
   color: #fff7ea;
   text-align: center;
+  overflow-y: auto;
 }
 
-.number-merge-overlay > span { color: #ffc75b; font-size: 29px; font-weight: 900; }
-.number-merge-overlay h2 { margin: 0; font-size: 25px; }
-.number-merge-overlay p { margin: -3px 0 4px; color: #e7cabd; font-size: 14px; line-height: 1.4; }
-.number-merge-overlay button { min-width: 160px; }
+.number-merge-overlay > span { margin-top: auto; color: #ffc75b; font-size: 29px; font-weight: 900; }
+.number-merge-overlay h2 { margin: 0; font-size: 25px; overflow-wrap: anywhere; }
+.number-merge-overlay p { margin: -3px 0 4px; color: #e7cabd; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
+.number-merge-overlay button { min-width: min(160px, 100%); }
+.number-merge-overlay .number-merge-link { margin-bottom: auto; }
 .number-merge-overlay .number-merge-secondary { color: #fff1df; background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 13%); }
 
 .number-merge-link {
@@ -677,6 +698,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   inset: 0;
   display: grid;
   place-items: center;
+  min-height: 0;
+  overflow-y: auto;
   padding: 30px;
   background: rgb(54 29 25 / 54%);
   backdrop-filter: blur(6px);
@@ -684,6 +707,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 
 .number-merge-confirm > div {
   width: 100%;
+  max-height: calc(100% - 32px);
+  overflow-y: auto;
   display: grid;
   gap: 9px;
   padding: 21px;
@@ -694,8 +719,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   text-align: center;
 }
 
-.number-merge-confirm h2 { margin: 0; font-size: 21px; }
-.number-merge-confirm p { margin: 0 0 5px; color: #876359; font-size: 14px; line-height: 1.4; }
+.number-merge-confirm h2 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }
+.number-merge-confirm p { margin: 0 0 5px; color: #876359; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
 .number-merge-danger { border: 0; color: #fff; background: #b64f39; }
 
 button:active { transform: scale(0.97); }
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index e0461be..49f69e1 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -3729,7 +3729,7 @@ onBeforeUnmount(() => {
     box-shadow: inset 0 0 0 1px rgba(142, 142, 147, 0.18);
   }
 
-  .phone-recent-row:has(button:hover),
+  .phone-recent-row:hover,
   .phone-my-card:hover,
   .phone-contact-row:hover {
     border-radius: 14px;
diff --git a/frontend/src/views/apps/PicstagramApp.vue b/frontend/src/views/apps/PicstagramApp.vue
index dc7a6d6..96070a0 100644
--- a/frontend/src/views/apps/PicstagramApp.vue
+++ b/frontend/src/views/apps/PicstagramApp.vue
@@ -2852,4 +2852,10 @@ onBeforeUnmount(() => {
     transform: scale(1.28);
   }
 }
+
+@supports not (color: color-mix(in srgb, white, black)) {
+  .ps-activity--unread {
+    background: rgb(10 132 255 / 10%);
+  }
+}
 </style>

From 81d84acb6771e0f5d76e3e57e37cd327356dbfda Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Wed, 12 Aug 2026 19:00:04 +0200
Subject: [PATCH 42/63] FIX - clean up CEF sheet ownership and preview
 lifecycle

---
 frontend/src/App.vue                          |   8 +-
 frontend/src/components/WidgetConfigSheet.vue |  17 +--
 frontend/src/components/WidgetPickerSheet.vue |  17 +--
 frontend/src/views/SpringboardView.vue        |  91 +++++++--------
 frontend/src/views/apps/CompaniesApp.vue      |  28 ++---
 frontend/src/views/apps/DarkChatApp.vue       |  34 +++---
 frontend/src/views/apps/FlareApp.vue          |  12 +-
 frontend/src/views/apps/FlipTokApp.vue        | 104 +++++++++---------
 frontend/src/views/apps/GarageApp.vue         |  13 ++-
 frontend/src/views/apps/MapApp.vue            |  13 ++-
 frontend/src/views/apps/PhoneApp.vue          |  15 +--
 11 files changed, 185 insertions(+), 167 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index bbf35c1..32a428b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1192,7 +1192,13 @@ onMounted(() => {
 watch(
   () => route.params.appId,
   (appId) => {
-    if (typeof appId === 'string' && isPhoneAppId(appId)) {
+    if (
+      phone.isOpen &&
+      phone.device?.imei &&
+      appStore.hydrated &&
+      typeof appId === 'string' &&
+      isPhoneAppId(appId)
+    ) {
       appStore.recordLaunch(appId)
     }
   },
diff --git a/frontend/src/components/WidgetConfigSheet.vue b/frontend/src/components/WidgetConfigSheet.vue
index d10c2ea..0fdae06 100644
--- a/frontend/src/components/WidgetConfigSheet.vue
+++ b/frontend/src/components/WidgetConfigSheet.vue
@@ -69,12 +69,12 @@ watch(
 </script>
 
 <template>
-  <k-sheet
-    :opened="opened"
-    class="widget-config-sheet"
-    :colors="sheetColors"
-    @backdropclick="emit('close')"
-  >
+  <div class="widget-config-sheet">
+    <k-sheet
+      :opened="opened"
+      :colors="sheetColors"
+      @backdropclick="emit('close')"
+    >
     <k-page
       v-if="instance"
       class="widget-config-page"
@@ -183,11 +183,12 @@ watch(
         </section>
       </div>
     </k-page>
-  </k-sheet>
+    </k-sheet>
+  </div>
 </template>
 
 <style scoped>
-:global(.widget-config-sheet) {
+.widget-config-sheet :deep(.k-sheet) {
   z-index: 115;
   height: calc(100% - 22px);
   overflow: hidden;
diff --git a/frontend/src/components/WidgetPickerSheet.vue b/frontend/src/components/WidgetPickerSheet.vue
index d20ef8c..34bc0b7 100644
--- a/frontend/src/components/WidgetPickerSheet.vue
+++ b/frontend/src/components/WidgetPickerSheet.vue
@@ -117,12 +117,12 @@ watch(
 </script>
 
 <template>
-  <k-sheet
-    :opened="opened"
-    class="widget-picker-sheet"
-    :colors="sheetColors"
-    @backdropclick="emit('close')"
-  >
+  <div class="widget-picker-sheet">
+    <k-sheet
+      :opened="opened"
+      :colors="sheetColors"
+      @backdropclick="emit('close')"
+    >
     <k-page
       class="widget-picker-page"
       :class="{ 'widget-picker-page--dark': phone.isDarkMode }"
@@ -206,11 +206,12 @@ watch(
         </p>
       </div>
     </k-page>
-  </k-sheet>
+    </k-sheet>
+  </div>
 </template>
 
 <style scoped>
-:global(.widget-picker-sheet) {
+.widget-picker-sheet :deep(.k-sheet) {
   z-index: 110;
   height: calc(100% - 22px);
   overflow: hidden;
diff --git a/frontend/src/views/SpringboardView.vue b/frontend/src/views/SpringboardView.vue
index 65331af..03b7cb0 100644
--- a/frontend/src/views/SpringboardView.vue
+++ b/frontend/src/views/SpringboardView.vue
@@ -1026,49 +1026,50 @@ watch(isEditablePage, (visible) => {
       </k-button>
     </nav>
 
-    <k-sheet
-      :opened="widgetActionId !== null"
-      class="widget-action-sheet"
-      @backdropclick="widgetActionId = null"
-    >
-      <div class="widget-sheet-handle" />
-      <h3>
-        {{
-          activeWidget
-            ? phone.t(`Home.widgetSystem.${activeWidget.kind}.name`)
-            : phone.t('Home.widgets.label')
-        }}
-      </h3>
-      <k-list inset strong class="widget-action-list">
-        <k-list-item
-          link
-          link-component="button"
-          content-class="w-full"
-          :title="phone.t('Home.widgetSystem.editWidget')"
-          @click="openWidgetConfig"
-        >
-          <template #media><Pencil :size="20" /></template>
-        </k-list-item>
-        <k-list-item
-          link
-          link-component="button"
-          content-class="w-full"
-          class="widget-action-remove"
-          :title="phone.t('Home.widgetSystem.removeWidget')"
-          @click="activeWidget && removeWidget(activeWidget.id)"
-        >
-          <template #media><Trash2 :size="20" /></template>
-        </k-list-item>
-      </k-list>
-      <k-button
-        large
-        rounded
-        class="widget-action-cancel"
-        @click="widgetActionId = null"
+    <div class="widget-action-sheet">
+      <k-sheet
+        :opened="widgetActionId !== null"
+        @backdropclick="widgetActionId = null"
       >
-        {{ phone.t('Common.cancel') }}
-      </k-button>
-    </k-sheet>
+        <div class="widget-sheet-handle" />
+        <h3>
+          {{
+            activeWidget
+              ? phone.t(`Home.widgetSystem.${activeWidget.kind}.name`)
+              : phone.t('Home.widgets.label')
+          }}
+        </h3>
+        <k-list inset strong class="widget-action-list">
+          <k-list-item
+            link
+            link-component="button"
+            content-class="w-full"
+            :title="phone.t('Home.widgetSystem.editWidget')"
+            @click="openWidgetConfig"
+          >
+            <template #media><Pencil :size="20" /></template>
+          </k-list-item>
+          <k-list-item
+            link
+            link-component="button"
+            content-class="w-full"
+            class="widget-action-remove"
+            :title="phone.t('Home.widgetSystem.removeWidget')"
+            @click="activeWidget && removeWidget(activeWidget.id)"
+          >
+            <template #media><Trash2 :size="20" /></template>
+          </k-list-item>
+        </k-list>
+        <k-button
+          large
+          rounded
+          class="widget-action-cancel"
+          @click="widgetActionId = null"
+        >
+          {{ phone.t('Common.cancel') }}
+        </k-button>
+      </k-sheet>
+    </div>
 
     <WidgetPickerSheet
       :opened="widgetPickerOpened"
@@ -1085,7 +1086,11 @@ watch(isEditablePage, (visible) => {
 </template>
 
 <style scoped>
-:global(.widget-action-sheet) {
+.widget-action-sheet {
+  display: contents;
+}
+
+.widget-action-sheet :deep(.k-sheet) {
   z-index: 105;
   padding: 9px 0 30px;
   border-radius: 25px 25px 0 0;
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index 66c8cf7..efe4e4e 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -2167,11 +2167,11 @@ onBeforeUnmount(() => {
       </k-toolbar-pane>
     </k-tabbar>
 
-    <k-sheet
-      :opened="requestSheetOpened"
-      class="companies-sheet"
-      @backdropclick="requestSheetOpened = false"
-    >
+    <div class="companies-sheet">
+      <k-sheet
+        :opened="requestSheetOpened"
+        @backdropclick="requestSheetOpened = false"
+      >
       <section
         v-if="requestSheetOpened && activeCompany"
         ref="requestSheetContent"
@@ -2312,7 +2312,8 @@ onBeforeUnmount(() => {
           <span v-else>{{ phone.t('Apps.companies.composer.send') }}</span>
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-actions
       v-if="workActionsOpened"
@@ -2357,11 +2358,11 @@ onBeforeUnmount(() => {
       </k-actions-group>
     </k-actions>
 
-    <k-sheet
-      :opened="assignmentSheetOpened"
-      class="companies-sheet companies-assignment-sheet"
-      @backdropclick="assignmentSheetOpened = false"
-    >
+    <div class="companies-sheet companies-assignment-sheet">
+      <k-sheet
+        :opened="assignmentSheetOpened"
+        @backdropclick="assignmentSheetOpened = false"
+      >
       <section
         v-if="assignmentSheetOpened"
         class="companies-sheet__content"
@@ -2422,7 +2423,8 @@ onBeforeUnmount(() => {
           {{ phone.t('Apps.companies.assignment.confirm') }}
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-dialog
       :opened="cancelDialogOpened"
@@ -3144,7 +3146,7 @@ onBeforeUnmount(() => {
   background: var(--company-red);
 }
 
-.companies-sheet :deep(> div:last-child) {
+.companies-sheet :deep(.k-sheet) {
   max-height: 88%;
   border-radius: 24px 24px 0 0;
   overflow: hidden;
diff --git a/frontend/src/views/apps/DarkChatApp.vue b/frontend/src/views/apps/DarkChatApp.vue
index 664cca8..67666c8 100644
--- a/frontend/src/views/apps/DarkChatApp.vue
+++ b/frontend/src/views/apps/DarkChatApp.vue
@@ -1789,7 +1789,7 @@ onBeforeUnmount(() => {
   background: rgb(255 255 255 / 8%);
 }
 
-.dc-action-sheet {
+.dc-action-sheet :deep(.k-sheet) {
   max-height: 72%;
   padding: 7px 0 32px;
   overflow-y: auto;
@@ -1798,7 +1798,7 @@ onBeforeUnmount(() => {
   background: #111113;
 }
 
-.dc-selection-sheet {
+.dc-selection-sheet :deep(.k-sheet) {
   z-index: 1300;
   padding-top: 9px;
 }
@@ -2852,12 +2852,12 @@ onBeforeUnmount(() => {
       >
     </k-dialog>
 
-    <k-sheet
-      :opened="Boolean(selectedMessage)"
-      class="dc-action-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="selectedMessage = null"
-    >
+    <div class="dc-action-sheet">
+      <k-sheet
+        :opened="Boolean(selectedMessage)"
+        :colors="darkSheetColors"
+        @backdropclick="selectedMessage = null"
+      >
       <template v-if="selectedMessage">
         <div class="dc-sheet-handle" />
         <div class="dc-reaction-row">
@@ -2935,7 +2935,8 @@ onBeforeUnmount(() => {
           >{{ phone.t('Common.cancel') }}</k-button
         >
       </template>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-dialog
       :opened="reportOpen"
@@ -2982,12 +2983,12 @@ onBeforeUnmount(() => {
       >
     </k-dialog>
 
-    <k-sheet
-      :opened="selectionSheet !== null"
-      class="dc-action-sheet dc-selection-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="selectionSheet = null"
-    >
+    <div class="dc-action-sheet dc-selection-sheet">
+      <k-sheet
+        :opened="selectionSheet !== null"
+        :colors="darkSheetColors"
+        @backdropclick="selectionSheet = null"
+      >
       <div class="dc-sheet-handle" />
       <h3>{{ selectionTitle }}</h3>
       <k-list inset strong class="dc-action-list dc-selection-list">
@@ -3015,7 +3016,8 @@ onBeforeUnmount(() => {
         @click="selectionSheet = null"
         >{{ phone.t('Common.cancel') }}</k-button
       >
-    </k-sheet>
+      </k-sheet>
+    </div>
     <k-toast :opened="Boolean(toast)" position="center" class="dc-toast">{{
       toast
     }}</k-toast>
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index f7dbca5..b3c6abc 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -1848,11 +1848,8 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <k-sheet
-      :opened="choiceOpened"
-      class="flare-choice-sheet"
-      @backdropclick="closeChoice"
-    >
+    <div class="flare-choice-sheet">
+      <k-sheet :opened="choiceOpened" @backdropclick="closeChoice">
       <section
         id="flare-choice-sheet"
         ref="choiceSheetContent"
@@ -1911,7 +1908,8 @@ onBeforeUnmount(() => {
           </k-list-item>
         </k-list>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-dialog :opened="unmatchDialog" @backdropclick="unmatchDialog = false">
       <template #title>{{ phone.t('Apps.flare.unmatchTitle') }}</template>
@@ -2855,7 +2853,7 @@ onBeforeUnmount(() => {
   line-height: 1.45;
 }
 
-:global(.flare-choice-sheet) {
+.flare-choice-sheet :deep(.k-sheet) {
   z-index: 70;
   max-height: min(62%, 420px);
   overflow-y: auto !important;
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index fde1c29..0d70d55 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -1630,13 +1630,12 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <k-sheet
-      v-if="commentsOpen"
-      :opened="commentsOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="commentsOpen = false"
-    >
+    <div v-if="commentsOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="commentsOpen"
+        :colors="darkSheetColors"
+        @backdropclick="commentsOpen = false"
+      >
       <div class="sheet-handle" />
       <div class="comments-sheet">
         <header>
@@ -1698,15 +1697,15 @@ onBeforeUnmount(() => {
           </template>
         </k-messagebar>
       </div>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
-    <k-sheet
-      v-if="actionsOpen"
-      :opened="actionsOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="actionsOpen = false"
-      ><div class="sheet-handle" />
+    <div v-if="actionsOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="actionsOpen"
+        :colors="darkSheetColors"
+        @backdropclick="actionsOpen = false"
+        ><div class="sheet-handle" />
       <div class="action-sheet">
         <k-list inset strong
           ><k-list-item
@@ -1724,15 +1723,15 @@ onBeforeUnmount(() => {
         ><k-button large rounded tonal @click="actionsOpen = false">{{
           t('cancel')
         }}</k-button>
-      </div></k-sheet
-    >
-    <k-sheet
-      v-if="reportSheetOpen"
-      :opened="reportSheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="reportSheetOpen = false"
-    >
+        </div></k-sheet
+      >
+    </div>
+    <div v-if="reportSheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="reportSheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="reportSheetOpen = false"
+      >
       <div class="sheet-handle" />
       <div class="selection-sheet report-sheet">
         <h3>{{ t('report') }}</h3>
@@ -1770,14 +1769,14 @@ onBeforeUnmount(() => {
           t('cancel')
         }}</k-button>
       </div>
-    </k-sheet>
-    <k-sheet
-      v-if="musicSheetOpen"
-      :opened="musicSheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="musicSheetOpen = false"
-    >
+      </k-sheet>
+    </div>
+    <div v-if="musicSheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="musicSheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="musicSheetOpen = false"
+      >
       <div class="sheet-handle" />
       <div class="selection-sheet">
         <h3>{{ t('chooseSound') }}</h3>
@@ -1820,14 +1819,14 @@ onBeforeUnmount(() => {
           t('cancel')
         }}</k-button>
       </div>
-    </k-sheet>
-    <k-sheet
-      v-if="visibilitySheetOpen"
-      :opened="visibilitySheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="visibilitySheetOpen = false"
-      ><div class="sheet-handle" />
+      </k-sheet>
+    </div>
+    <div v-if="visibilitySheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="visibilitySheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="visibilitySheetOpen = false"
+        ><div class="sheet-handle" />
       <div class="selection-sheet">
         <h3>{{ t('whoCanWatch') }}</h3>
         <k-list inset strong
@@ -1853,15 +1852,15 @@ onBeforeUnmount(() => {
         ><k-button large rounded tonal @click="visibilitySheetOpen = false">{{
           t('cancel')
         }}</k-button>
-      </div></k-sheet
-    >
-    <k-sheet
-      v-if="accountTypeSheetOpen"
-      :opened="accountTypeSheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="accountTypeSheetOpen = false"
-      ><div class="sheet-handle" />
+        </div></k-sheet
+      >
+    </div>
+    <div v-if="accountTypeSheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="accountTypeSheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="accountTypeSheetOpen = false"
+        ><div class="sheet-handle" />
       <div class="selection-sheet">
         <h3>{{ t('accountType') }}</h3>
         <k-list inset strong
@@ -1881,8 +1880,9 @@ onBeforeUnmount(() => {
         ><k-button large rounded tonal @click="accountTypeSheetOpen = false">{{
           t('cancel')
         }}</k-button>
-      </div></k-sheet
-    >
+        </div></k-sheet
+      >
+    </div>
     <k-dialog
       :opened="logoutDialogOpen"
       @backdropclick="!logoutSubmitting && (logoutDialogOpen = false)"
@@ -2720,7 +2720,7 @@ onBeforeUnmount(() => {
 .done-button {
   font-weight: 650;
 }
-.fliptok-sheet {
+.fliptok-sheet :deep(.k-sheet) {
   color: #f5f5f7;
 }
 .sheet-handle {
diff --git a/frontend/src/views/apps/GarageApp.vue b/frontend/src/views/apps/GarageApp.vue
index fde43b0..9bb31c1 100644
--- a/frontend/src/views/apps/GarageApp.vue
+++ b/frontend/src/views/apps/GarageApp.vue
@@ -395,11 +395,11 @@ onBeforeUnmount(() => {
       </p>
     </div>
 
-    <k-sheet
-      :opened="Boolean(selectedVehicle)"
-      class="garage-sheet"
-      @backdropclick="selectedVehicle = null"
-    >
+    <div class="garage-sheet">
+      <k-sheet
+        :opened="Boolean(selectedVehicle)"
+        @backdropclick="selectedVehicle = null"
+      >
       <section v-if="selectedVehicle" class="garage-detail">
         <k-link
           component="button"
@@ -499,7 +499,8 @@ onBeforeUnmount(() => {
           <Share2 :size="18" />{{ phone.t('Apps.easyShare.share') }}
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
     <k-dialog
       :opened="Boolean(valetCandidate)"
       class="garage-valet-confirm"
diff --git a/frontend/src/views/apps/MapApp.vue b/frontend/src/views/apps/MapApp.vue
index 2667c65..e628cae 100644
--- a/frontend/src/views/apps/MapApp.vue
+++ b/frontend/src/views/apps/MapApp.vue
@@ -633,11 +633,11 @@ onBeforeUnmount(() => {
       </div>
     </section>
 
-    <k-sheet
-      :opened="Boolean(draftCoords || selectedMarker)"
-      class="map-marker-sheet"
-      @backdropclick="closeMarkerSheet"
-    >
+    <div class="map-marker-sheet">
+      <k-sheet
+        :opened="Boolean(draftCoords || selectedMarker)"
+        @backdropclick="closeMarkerSheet"
+      >
       <section
         v-if="draftCoords"
         class="map-marker-sheet__content"
@@ -740,7 +740,8 @@ onBeforeUnmount(() => {
           </template>
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-toast :opened="Boolean(toastText)" position="center">
       {{ toastText }}
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index 49f69e1..989cf2f 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -1456,11 +1456,11 @@ onBeforeUnmount(() => {
     </template>
   </k-page>
 
-  <k-sheet
-    :opened="editorOpened"
-    class="phone-contact-editor-sheet"
-    @backdropclick="editorOpened = false"
-  >
+  <div class="phone-contact-editor-sheet">
+    <k-sheet
+      :opened="editorOpened"
+      @backdropclick="editorOpened = false"
+    >
     <section
       class="phone-contact-editor"
       :class="{ 'phone-contact-editor--light': !phone.isDarkMode }"
@@ -1629,7 +1629,8 @@ onBeforeUnmount(() => {
         </k-button>
       </div>
     </section>
-  </k-sheet>
+    </k-sheet>
+  </div>
 
   <k-dialog
     :opened="blockDialogOpened"
@@ -3310,7 +3311,7 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.62);
 }
 
-.phone-contact-editor-sheet {
+.phone-contact-editor-sheet :deep(.k-sheet) {
   width: 100%;
   height: calc(100% - 52px);
   max-height: calc(100% - 52px);

From 011b06784657d529669793b13d29f5f3aea5141e Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 12 Aug 2026 21:21:01 +0200
Subject: [PATCH 43/63] ENH - unify social app accounts and profiles

---
 frontend/src/App.vue                          |    6 +
 .../account/AccountLogoutDialog.vue           |   64 +
 .../src/components/account/AppProfileAuth.vue |  391 +++
 .../src/components/account/IfruitAppAuth.vue  |  191 ++
 .../components/citymarkt/CityMarktAuth.vue    |   47 +
 frontend/src/stores/account.test.ts           |   13 +
 frontend/src/stores/app-auth.test.ts          |   53 +
 frontend/src/stores/app-auth.ts               |   78 +
 frontend/src/stores/crewlink.ts               |   27 +-
 frontend/src/stores/phone-locales.test.ts     |   32 +
 frontend/src/stores/phone.ts                  |  137 +-
 frontend/src/types/crewlink.ts                |   10 +-
 frontend/src/views/apps/CityMarktApp.vue      |  133 +-
 frontend/src/views/apps/CrewLinkApp.vue       | 2665 +++++++++++++++--
 frontend/src/views/apps/FeatherApp.vue        |  456 ++-
 frontend/src/views/apps/LocalPagesApp.vue     | 2280 ++++++++++++--
 frontend/src/views/apps/SettingsApp.vue       |    4 +
 frontend/testserver/index.cjs                 |  196 +-
 sky_phone/config/locales/en.lua               |   65 +-
 sky_phone/source/server/crewlink.lua          |   57 +-
 sky_phone/source/server/db_migrate.lua        |    3 +
 sky_phone/source/server/phone.lua             |    1 +
 sky_phone/sql/install.sql                     |    5 +-
 23 files changed, 6117 insertions(+), 797 deletions(-)
 create mode 100644 frontend/src/components/account/AccountLogoutDialog.vue
 create mode 100644 frontend/src/components/account/AppProfileAuth.vue
 create mode 100644 frontend/src/components/account/IfruitAppAuth.vue
 create mode 100644 frontend/src/components/citymarkt/CityMarktAuth.vue
 create mode 100644 frontend/src/stores/app-auth.test.ts
 create mode 100644 frontend/src/stores/app-auth.ts
 create mode 100644 frontend/src/stores/phone-locales.test.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c3c8283..a89889c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -32,6 +32,7 @@ import { useBankingStore } from '@/stores/banking'
 import { useBillingStore } from '@/stores/billing'
 import { useCompaniesStore } from '@/stores/companies'
 import { useAccountStore } from '@/stores/account'
+import { useAppAuthStore } from '@/stores/app-auth'
 import { useMailStore } from '@/stores/mail'
 import { useMessagesStore } from '@/stores/messages'
 import { useDarkChatStore } from '@/stores/darkchat'
@@ -241,6 +242,7 @@ const isDevelopment = import.meta.env.DEV
 
 const phone = usePhoneStore()
 const account = useAccountStore()
+const appAuth = useAppAuthStore()
 const clock = useClockStore()
 const games = useGamesStore()
 const calls = useCallsStore()
@@ -342,6 +344,10 @@ function hydratePhone(payload: PhoneOpenPayload): void {
     notifications.hideDevicePreview(payload.device.imei)
   }
   account.hydrate(payload.account ?? null)
+  appAuth.hydrate(
+    payload.device?.data.appAuth?.payload,
+    payload.account?.email ?? '',
+  )
   notes.hydrate(payload.notes ?? [])
   clock.hydrate(payload.device?.data.alarms?.payload)
   games.hydrate(payload.device?.data.games?.payload)
diff --git a/frontend/src/components/account/AccountLogoutDialog.vue b/frontend/src/components/account/AccountLogoutDialog.vue
new file mode 100644
index 0000000..55ee3ba
--- /dev/null
+++ b/frontend/src/components/account/AccountLogoutDialog.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { kDialog, kDialogButton } from 'konsta/vue'
+
+import { useAppAuthStore, type AppAuthId } from '@/stores/app-auth'
+import { useCrewLinkStore } from '@/stores/crewlink'
+import { useFeatherStore } from '@/stores/feather'
+import { useMarketplaceStore } from '@/stores/marketplace'
+import { usePagesStore } from '@/stores/pages'
+import { usePhoneStore } from '@/stores/phone'
+
+const opened = defineModel<boolean>('opened', { default: false })
+const emit = defineEmits<{ loggedOut: [] }>()
+const props = defineProps<{ appId: AppAuthId; appName: string }>()
+
+const appAuth = useAppAuthStore()
+const crewLink = useCrewLinkStore()
+const feather = useFeatherStore()
+const marketplace = useMarketplaceStore()
+const pages = usePagesStore()
+const phone = usePhoneStore()
+
+function close(): void {
+  opened.value = false
+}
+
+function confirmLogout(): void {
+  appAuth.signOut(props.appId)
+  if (props.appId === 'citymarkt') marketplace.$reset()
+  if (props.appId === 'local-pages') pages.$reset()
+  if (props.appId === 'feather') feather.$reset()
+  if (props.appId === 'crewlink') {
+    crewLink.$reset()
+    crewLink.error = 'not_authenticated'
+  }
+  opened.value = false
+  emit('loggedOut')
+}
+</script>
+
+<template>
+  <k-dialog :opened="opened" @backdropclick="close">
+    <template #title>{{ phone.t('Common.signOutTitle', { app: appName }) }}</template>
+    <p>{{ phone.t('Common.signOutBody', { app: appName }) }}</p>
+    <template #buttons>
+      <k-dialog-button @click="close">
+        {{ phone.t('Common.cancel') }}
+      </k-dialog-button>
+      <k-dialog-button
+        strong
+        class="account-logout-confirm"
+        @click="confirmLogout"
+      >
+        {{ phone.t('Common.signOut') }}
+      </k-dialog-button>
+    </template>
+  </k-dialog>
+</template>
+
+<style scoped>
+.account-logout-confirm {
+  background: #e44760 !important;
+  color: #fff !important;
+}
+</style>
diff --git a/frontend/src/components/account/AppProfileAuth.vue b/frontend/src/components/account/AppProfileAuth.vue
new file mode 100644
index 0000000..c90180b
--- /dev/null
+++ b/frontend/src/components/account/AppProfileAuth.vue
@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import {
+  ArrowRight,
+  Camera,
+  Images,
+  LockKeyhole,
+  Mail,
+  UserRound,
+} from 'lucide-vue-next'
+import {
+  kButton,
+  kGlass,
+  kList,
+  kListInput,
+  kPreloader,
+  kSegmented,
+  kSegmentedButton,
+} from 'konsta/vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    avatarUrl: string | null
+    body: string
+    cameraLabel: string
+    email: string
+    emailLabel: string
+    error: string
+    eyebrow: string
+    galleryLabel: string
+    loginLabel: string
+    maxUsernameLength?: number
+    minUsernameLength?: number
+    mode: 'login' | 'register'
+    pending: boolean
+    registerLabel: string
+    title: string
+    username: string
+    usernameLabel: string
+    usernamePlaceholder?: string
+  }>(),
+  {
+    maxUsernameLength: 40,
+    minUsernameLength: 2,
+    usernamePlaceholder: '',
+  },
+)
+const emit = defineEmits<{
+  camera: []
+  gallery: []
+  submit: []
+  'update:mode': [value: 'login' | 'register']
+  'update:username': [value: string]
+}>()
+
+const canSubmit = computed(() => {
+  const length = props.username.trim().length
+  return Boolean(
+    props.email &&
+      length >= props.minUsernameLength &&
+      length <= props.maxUsernameLength,
+  )
+})
+</script>
+
+<template>
+  <section class="app-profile-auth">
+    <header class="app-profile-auth__hero">
+      <span class="app-profile-auth__mark"><UserRound :size="23" /></span>
+      <div>
+        <small>{{ eyebrow }}</small>
+        <h2>{{ title }}</h2>
+      </div>
+      <p>{{ body }}</p>
+    </header>
+
+    <k-glass class="app-profile-auth__card">
+      <k-segmented raised class="app-profile-auth__mode">
+        <k-segmented-button
+          :active="mode === 'login'"
+          @click="emit('update:mode', 'login')"
+        >
+          {{ loginLabel }}
+        </k-segmented-button>
+        <k-segmented-button
+          :active="mode === 'register'"
+          @click="emit('update:mode', 'register')"
+        >
+          {{ registerLabel }}
+        </k-segmented-button>
+      </k-segmented>
+
+      <div v-if="mode === 'register'" class="app-profile-auth__photo">
+        <span class="app-profile-auth__avatar">
+          <img v-if="avatarUrl" :src="avatarUrl" alt="" />
+          <UserRound v-else :size="28" />
+          <i><Camera :size="11" /></i>
+        </span>
+        <div>
+          <k-button rounded outline @click="emit('gallery')">
+            <Images :size="15" />{{ galleryLabel }}
+          </k-button>
+          <k-button rounded outline @click="emit('camera')">
+            <Camera :size="15" />{{ cameraLabel }}
+          </k-button>
+        </div>
+      </div>
+
+      <div class="app-profile-auth__identity">
+        <span><Mail :size="17" /></span>
+        <div>
+          <small>{{ emailLabel }}</small>
+          <strong>{{ email }}</strong>
+        </div>
+        <LockKeyhole :size="15" />
+      </div>
+
+      <k-list inset strong class="app-profile-auth__fields">
+        <k-list-input
+          input-id="app-profile-auth-username"
+          :label="usernameLabel"
+          :value="username"
+          :maxlength="maxUsernameLength"
+          :placeholder="usernamePlaceholder"
+          autocomplete="username"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
+          outline
+          @input="
+            emit('update:username', ($event.target as HTMLInputElement).value)
+          "
+          @keydown.enter="emit('submit')"
+        />
+      </k-list>
+
+      <div v-if="error" class="app-profile-auth__error" role="alert">
+        {{ error }}
+      </div>
+      <k-button
+        large
+        rounded
+        class="app-profile-auth__submit"
+        :disabled="!canSubmit || pending"
+        @click="emit('submit')"
+      >
+        <k-preloader v-if="pending" />
+        <template v-else>
+          <span>{{ mode === 'login' ? loginLabel : registerLabel }}</span>
+          <ArrowRight :size="18" />
+        </template>
+      </k-button>
+    </k-glass>
+  </section>
+</template>
+
+<style scoped>
+.app-profile-auth {
+  width: 100%;
+  max-width: 320px;
+  margin: auto;
+  padding: 12px 4px 18px;
+  color: inherit;
+  text-align: center;
+}
+.app-profile-auth__hero {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  gap: 0 11px;
+  margin: 0 12px 14px;
+  text-align: left;
+}
+.app-profile-auth__mark {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  grid-row: 1 / span 2;
+  place-items: center;
+  border: 1px solid
+    color-mix(in srgb, var(--auth-accent, #ffd63e) 46%, transparent);
+  border-radius: 15px;
+  color: var(--auth-accent, var(--yellow, #ffd63e));
+  background: color-mix(in srgb, var(--auth-accent, #ffd63e) 14%, transparent);
+  box-shadow: 0 10px 28px
+    color-mix(in srgb, var(--auth-accent, #ffd63e) 16%, transparent);
+}
+.app-profile-auth__hero small {
+  color: var(--auth-accent, var(--yellow, #ffd63e));
+  font-size: 9px;
+  font-weight: 850;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.app-profile-auth__hero h2 {
+  margin: 3px 0 0;
+  color: inherit;
+  font-size: 20px;
+  line-height: 1.08;
+}
+.app-profile-auth__hero p {
+  grid-column: 2;
+  margin: 6px 0 0;
+  color: var(--muted, #9ba4aa);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.app-profile-auth__card {
+  position: relative;
+  display: block;
+  padding: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24px;
+  background: color-mix(in srgb, var(--panel, #20262c) 90%, transparent);
+  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(22px) saturate(1.15);
+}
+.app-profile-auth__card::before {
+  position: absolute;
+  top: -80px;
+  right: -55px;
+  width: 170px;
+  height: 150px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--auth-accent, #ffd63e) 16%, transparent);
+  filter: blur(38px);
+  content: '';
+  pointer-events: none;
+}
+.app-profile-auth__mode {
+  position: relative;
+  z-index: 1;
+  margin: 0 0 12px;
+  padding: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.16);
+}
+.app-profile-auth__photo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 2px 11px;
+  padding: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.035);
+  text-align: left;
+}
+.app-profile-auth__avatar {
+  position: relative;
+  display: grid;
+  width: 66px;
+  height: 66px;
+  flex: none;
+  place-items: center;
+  border: 2px solid
+    color-mix(in srgb, var(--auth-accent, #ffd63e) 58%, transparent);
+  border-radius: 50%;
+  color: var(--auth-accent, var(--yellow, #ffd63e));
+  background: color-mix(
+    in srgb,
+    var(--auth-accent, #ffd63e) 10%,
+    var(--panel, #20262c)
+  );
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
+}
+.app-profile-auth__photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+.app-profile-auth__avatar i {
+  position: absolute;
+  right: -2px;
+  bottom: -1px;
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 2px solid var(--panel, #20262c);
+  border-radius: 50%;
+  color: #fff;
+  background: var(--auth-accent, #ffd63e);
+}
+.app-profile-auth__photo > div {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 6px;
+}
+.app-profile-auth__photo :deep(.k-button) {
+  min-height: 32px;
+  justify-content: flex-start;
+  gap: 6px;
+  border-color: rgba(255, 255, 255, 0.12);
+  color: inherit;
+  background: rgba(255, 255, 255, 0.04);
+  font-size: 11px;
+}
+.app-profile-auth__identity {
+  position: relative;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) 18px;
+  align-items: center;
+  gap: 9px;
+  margin-bottom: 9px;
+  padding: 9px 11px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.045);
+  text-align: left;
+}
+.app-profile-auth__identity > span {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 11px;
+  color: var(--auth-accent, #ffd63e);
+  background: color-mix(in srgb, var(--auth-accent, #ffd63e) 13%, transparent);
+}
+.app-profile-auth__identity div {
+  min-width: 0;
+}
+.app-profile-auth__identity small {
+  display: block;
+  margin-bottom: 1px;
+  color: var(--muted, #9ba4aa);
+  font-size: 9px;
+}
+.app-profile-auth__identity strong {
+  display: block;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.app-profile-auth__identity > svg {
+  color: var(--muted, #9ba4aa);
+}
+.app-profile-auth__fields {
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 11px;
+  margin-left: 0;
+  color: inherit;
+  background: rgba(255, 255, 255, 0.045) !important;
+  text-align: left;
+}
+.app-profile-auth__fields :deep(.text-black) {
+  color: inherit !important;
+}
+.app-profile-auth__fields :deep(.text-xs > div) {
+  background: color-mix(
+    in srgb,
+    var(--panel, #20262c) 94%,
+    transparent
+  ) !important;
+}
+.app-profile-auth__error {
+  margin: -2px 1px 10px;
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 105, 97, 0.22);
+  border-radius: 11px;
+  color: #ff6961;
+  background: rgba(255, 105, 97, 0.08);
+  font-size: 11px;
+}
+.app-profile-auth__submit {
+  --k-button-bg-color: var(--auth-accent, var(--yellow, #ffd63e));
+  --k-button-text-color: #fff;
+  width: 100%;
+  min-height: 44px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 17px;
+  color: #fff !important;
+  background: var(--auth-accent, var(--yellow, #ffd63e)) !important;
+  box-shadow: 0 10px 26px
+    color-mix(in srgb, var(--auth-accent, #ffd63e) 25%, transparent);
+  font-weight: 750;
+}
+.app-profile-auth__submit:disabled {
+  opacity: 0.46;
+}
+</style>
diff --git a/frontend/src/components/account/IfruitAppAuth.vue b/frontend/src/components/account/IfruitAppAuth.vue
new file mode 100644
index 0000000..a206ce9
--- /dev/null
+++ b/frontend/src/components/account/IfruitAppAuth.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import {
+  kButton,
+  kList,
+  kListInput,
+  kPreloader,
+  kSegmented,
+  kSegmentedButton,
+} from 'konsta/vue'
+import { computed, ref } from 'vue'
+
+import { useAccountStore } from '@/stores/account'
+import { useAppAuthStore, type AppAuthId } from '@/stores/app-auth'
+import { usePhoneStore } from '@/stores/phone'
+import {
+  filterMailAddressInput,
+  MAIL_ADDRESS_INPUT_MAX_LENGTH,
+  normalizeMailAddress,
+} from '@/utils/mail'
+
+const props = defineProps<{
+  appId: AppAuthId
+  appName: string
+}>()
+const emit = defineEmits<{ signedIn: [] }>()
+
+const account = useAccountStore()
+const appAuth = useAppAuthStore()
+const phone = usePhoneStore()
+const mode = ref<'login' | 'register'>('login')
+const email = ref(account.email)
+const password = ref('')
+const confirm = ref('')
+const pending = ref(false)
+const error = ref('')
+
+const canSubmit = computed(() => {
+  const normalized = normalizeMailAddress(email.value)
+  const passwordValid = password.value.length >= 6 && password.value.length <= 64
+  return Boolean(
+    normalized &&
+      passwordValid &&
+      (mode.value === 'login' || (confirm.value && confirm.value === password.value)),
+  )
+})
+
+function setMode(next: 'login' | 'register'): void {
+  mode.value = next
+  confirm.value = ''
+  error.value = ''
+}
+
+function updateEmail(event: Event): void {
+  email.value = filterMailAddressInput((event.target as HTMLInputElement).value)
+}
+
+function errorMessage(key?: string): string {
+  const known = [
+    'invalid_email',
+    'invalid_password',
+    'invalid_credentials',
+    'email_taken',
+    'rate_limited',
+  ]
+  return phone.t(
+    `Common.appAuth.errors.${key && known.includes(key) ? key : 'default'}`,
+  )
+}
+
+async function submit(): Promise<void> {
+  if (!canSubmit.value || pending.value) return
+  const normalized = normalizeMailAddress(email.value)
+  if (!normalized) return
+
+  pending.value = true
+  error.value = ''
+  const response =
+    mode.value === 'login'
+      ? await account.login(normalized, password.value)
+      : await account.register(normalized, password.value)
+  pending.value = false
+  if (!response.success || !response.data) {
+    error.value = errorMessage(response.error)
+    return
+  }
+
+  appAuth.signIn(props.appId, response.data.email)
+  password.value = ''
+  confirm.value = ''
+  emit('signedIn')
+}
+</script>
+
+<template>
+  <section class="ifruit-app-auth">
+    <small>{{ phone.t('Common.appAuth.eyebrow') }}</small>
+    <h2>{{ phone.t('Common.appAuth.title', { app: appName }) }}</h2>
+    <p>{{ phone.t('Common.appAuth.body', { app: appName }) }}</p>
+
+    <k-segmented raised class="ifruit-app-auth__mode">
+      <k-segmented-button :active="mode === 'login'" @click="setMode('login')">
+        {{ phone.t('Common.appAuth.login') }}
+      </k-segmented-button>
+      <k-segmented-button :active="mode === 'register'" @click="setMode('register')">
+        {{ phone.t('Common.appAuth.register') }}
+      </k-segmented-button>
+    </k-segmented>
+
+    <k-list inset strong class="ifruit-app-auth__fields">
+      <k-list-input
+        input-id="ifruit-app-auth-email"
+        :label="phone.t('Common.appAuth.email')"
+        :value="email"
+        :maxlength="MAIL_ADDRESS_INPUT_MAX_LENGTH"
+        autocomplete="username"
+        inputmode="email"
+        outline
+        @input="updateEmail"
+      />
+      <k-list-input
+        input-id="ifruit-app-auth-password"
+        :label="phone.t('Common.appAuth.password')"
+        :value="password"
+        type="password"
+        maxlength="64"
+        :autocomplete="mode === 'login' ? 'current-password' : 'new-password'"
+        outline
+        @input="password = ($event.target as HTMLInputElement).value"
+      />
+      <k-list-input
+        v-if="mode === 'register'"
+        input-id="ifruit-app-auth-confirm"
+        :label="phone.t('Common.appAuth.confirm')"
+        :value="confirm"
+        type="password"
+        maxlength="64"
+        autocomplete="new-password"
+        outline
+        @input="confirm = ($event.target as HTMLInputElement).value"
+      />
+    </k-list>
+
+    <p v-if="error" class="ifruit-app-auth__error" role="alert">{{ error }}</p>
+    <k-button large rounded :disabled="!canSubmit || pending" @click="submit">
+      <k-preloader v-if="pending" />
+      <template v-else>
+        {{ phone.t(mode === 'login' ? 'Common.appAuth.loginAction' : 'Common.appAuth.registerAction') }}
+      </template>
+    </k-button>
+  </section>
+</template>
+
+<style scoped>
+.ifruit-app-auth {
+  width: 100%;
+  max-width: 310px;
+  margin: auto;
+  padding: 18px 10px;
+  text-align: center;
+}
+.ifruit-app-auth > small {
+  color: var(--k-color-primary);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.ifruit-app-auth h2 {
+  margin: 6px 0 4px;
+  font-size: 21px;
+}
+.ifruit-app-auth > p {
+  margin: 0 auto 14px;
+  color: #8e8e93;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.ifruit-app-auth__mode {
+  margin: 0 8px 12px;
+}
+.ifruit-app-auth__fields {
+  margin-top: 0;
+  margin-bottom: 12px;
+  text-align: left;
+}
+.ifruit-app-auth .ifruit-app-auth__error {
+  margin: -4px 12px 10px;
+  color: #ff453a;
+  font-size: 11px;
+}
+</style>
diff --git a/frontend/src/components/citymarkt/CityMarktAuth.vue b/frontend/src/components/citymarkt/CityMarktAuth.vue
new file mode 100644
index 0000000..abd7caa
--- /dev/null
+++ b/frontend/src/components/citymarkt/CityMarktAuth.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AppProfileAuth from '@/components/account/AppProfileAuth.vue'
+import { usePhoneStore } from '@/stores/phone'
+
+defineProps<{
+  avatarUrl: string | null
+  email: string
+  error: string
+  mode: 'login' | 'register'
+  pending: boolean
+  username: string
+}>()
+const emit = defineEmits<{
+  camera: []
+  gallery: []
+  submit: []
+  'update:mode': [value: 'login' | 'register']
+  'update:username': [value: string]
+}>()
+
+const phone = usePhoneStore()
+</script>
+
+<template>
+  <AppProfileAuth
+    :avatar-url="avatarUrl"
+    :body="phone.t('Apps.citymarkt.authBody')"
+    :camera-label="phone.t('Apps.citymarkt.takePhoto')"
+    :email="email"
+    :email-label="phone.t('Apps.citymarkt.profileEmail')"
+    :error="error"
+    :eyebrow="phone.t('Apps.citymarkt.authEyebrow')"
+    :gallery-label="phone.t('Apps.citymarkt.chooseGallery')"
+    :login-label="phone.t('Apps.citymarkt.login')"
+    :mode="mode"
+    :pending="pending"
+    :register-label="phone.t('Apps.citymarkt.register')"
+    :title="phone.t('Apps.citymarkt.authTitle')"
+    :username="username"
+    :username-label="phone.t('Apps.citymarkt.authUsername')"
+    @camera="emit('camera')"
+    @gallery="emit('gallery')"
+    @submit="emit('submit')"
+    @update:mode="emit('update:mode', $event)"
+    @update:username="emit('update:username', $event)"
+  />
+</template>
diff --git a/frontend/src/stores/account.test.ts b/frontend/src/stores/account.test.ts
index ed32192..b8eeb62 100644
--- a/frontend/src/stores/account.test.ts
+++ b/frontend/src/stores/account.test.ts
@@ -58,6 +58,19 @@ describe('account store', () => {
     expect(account.devices).toEqual(devices)
   })
 
+  it('clears the linked account after logout', async () => {
+    mockNuiCall.mockResolvedValueOnce({ success: true })
+
+    const account = useAccountStore()
+    account.hydrate({ devices, email: 'alex@ifruit.com' })
+    const success = await account.logout()
+
+    expect(success).toBe(true)
+    expect(account.email).toBe('')
+    expect(account.devices).toEqual([])
+    expect(mockNuiCall).toHaveBeenCalledWith('account:logout')
+  })
+
   it('clears account state after a factory reset', async () => {
     mockNuiCall.mockResolvedValueOnce({ success: true })
 
diff --git a/frontend/src/stores/app-auth.test.ts b/frontend/src/stores/app-auth.test.ts
new file mode 100644
index 0000000..b275e8f
--- /dev/null
+++ b/frontend/src/stores/app-auth.test.ts
@@ -0,0 +1,53 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const saveDeviceNamespace = vi.fn()
+
+vi.mock('@/stores/phone', () => ({
+  usePhoneStore: () => ({ saveDeviceNamespace }),
+}))
+
+import { useAppAuthStore } from '@/stores/app-auth'
+
+describe('app auth store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    saveDeviceNamespace.mockReset()
+  })
+
+  it('keeps each app session independent', () => {
+    const auth = useAppAuthStore()
+    auth.hydrate(
+      {
+        accountEmail: 'demo@ifruit.com',
+        signedIn: ['citymarkt', 'feather'],
+        version: 1,
+      },
+      'demo@ifruit.com',
+    )
+
+    auth.signOut('citymarkt')
+
+    expect(auth.isSignedIn('citymarkt')).toBe(false)
+    expect(auth.isSignedIn('feather')).toBe(true)
+    expect(saveDeviceNamespace).toHaveBeenLastCalledWith('appAuth', {
+      accountEmail: 'demo@ifruit.com',
+      signedIn: ['feather'],
+      version: 1,
+    })
+  })
+
+  it('does not restore sessions belonging to another iFruit account', () => {
+    const auth = useAppAuthStore()
+    auth.hydrate(
+      {
+        accountEmail: 'old@ifruit.com',
+        signedIn: ['citymarkt'],
+        version: 1,
+      },
+      'new@ifruit.com',
+    )
+
+    expect(auth.isSignedIn('citymarkt')).toBe(false)
+  })
+})
diff --git a/frontend/src/stores/app-auth.ts b/frontend/src/stores/app-auth.ts
new file mode 100644
index 0000000..753bdaa
--- /dev/null
+++ b/frontend/src/stores/app-auth.ts
@@ -0,0 +1,78 @@
+import { defineStore } from 'pinia'
+
+import { usePhoneStore } from '@/stores/phone'
+
+export const APP_AUTH_IDS = [
+  'citymarkt',
+  'local-pages',
+  'feather',
+  'crewlink',
+] as const
+
+export type AppAuthId = (typeof APP_AUTH_IDS)[number]
+
+type PersistedAppAuth = {
+  accountEmail: string
+  signedIn: AppAuthId[]
+  version: 1
+}
+
+function emptySessions(): Record<AppAuthId, boolean> {
+  return {
+    citymarkt: false,
+    'local-pages': false,
+    feather: false,
+    crewlink: false,
+  }
+}
+
+export const useAppAuthStore = defineStore('app-auth', {
+  state: () => ({
+    accountEmail: '',
+    sessions: emptySessions(),
+  }),
+  actions: {
+    hydrate(payload: unknown, accountEmail: string): void {
+      this.accountEmail = accountEmail
+      this.sessions = emptySessions()
+      if (!accountEmail || !payload || typeof payload !== 'object') return
+
+      const data = payload as Partial<PersistedAppAuth>
+      if (
+        data.version !== 1 ||
+        data.accountEmail !== accountEmail ||
+        !Array.isArray(data.signedIn)
+      )
+        return
+
+      for (const appId of data.signedIn) {
+        if (APP_AUTH_IDS.includes(appId)) this.sessions[appId] = true
+      }
+    },
+    isSignedIn(appId: AppAuthId): boolean {
+      return Boolean(this.accountEmail && this.sessions[appId])
+    },
+    signIn(appId: AppAuthId, accountEmail: string): void {
+      if (this.accountEmail !== accountEmail) this.sessions = emptySessions()
+      this.accountEmail = accountEmail
+      this.sessions[appId] = true
+      this.persist()
+    },
+    signOut(appId: AppAuthId): void {
+      this.sessions[appId] = false
+      this.persist()
+    },
+    clear(): void {
+      this.accountEmail = ''
+      this.sessions = emptySessions()
+      this.persist()
+    },
+    persist(): void {
+      usePhoneStore().saveDeviceNamespace('appAuth', {
+        accountEmail: this.accountEmail,
+        signedIn: APP_AUTH_IDS.filter((appId) => this.sessions[appId]),
+        version: 1,
+      } satisfies PersistedAppAuth)
+    },
+  },
+})
diff --git a/frontend/src/stores/crewlink.ts b/frontend/src/stores/crewlink.ts
index 0b8ea0e..637a621 100644
--- a/frontend/src/stores/crewlink.ts
+++ b/frontend/src/stores/crewlink.ts
@@ -62,19 +62,28 @@ export const useCrewLinkStore = defineStore('crewlink', {
       }
       return response
     },
-    createProfile(username: string): Promise<NuiResponse<CrewLinkBootstrap>> {
-      return this.request('crewlink:create-profile', { username })
+    createProfile(
+      username: string,
+      avatarMediaId = 0,
+    ): Promise<NuiResponse<CrewLinkBootstrap>> {
+      return this.request('crewlink:create-profile', {
+        avatarMediaId,
+        username,
+      })
     },
     updateProfile(
       username: string,
       mapVisible: boolean,
       overheadVisible: boolean,
+      avatarMediaId?: number | null,
     ): Promise<NuiResponse<CrewLinkBootstrap>> {
-      return this.request('crewlink:update-profile', {
+      const data: Record<string, unknown> = {
         mapVisible,
         overheadVisible,
         username,
-      })
+      }
+      if (avatarMediaId !== undefined) data.avatarMediaId = avatarMediaId
+      return this.request('crewlink:update-profile', data)
     },
     createGroup(
       name: string,
@@ -107,17 +116,15 @@ export const useCrewLinkStore = defineStore('crewlink', {
       return this.request('crewlink:join-code', { code })
     },
     rotateCode(groupId: string): Promise<NuiResponse<{ inviteCode: string }>> {
-      return nuiCall<{ inviteCode: string }>('crewlink:rotate-code', { groupId })
+      return nuiCall<{ inviteCode: string }>('crewlink:rotate-code', {
+        groupId,
+      })
     },
     nearby(): Promise<NuiResponse<CrewLinkNearbyPlayer[]>> {
       return nuiCall<CrewLinkNearbyPlayer[]>('crewlink:nearby')
     },
     inviteNearby(targetSource: number): Promise<NuiResponse> {
-      return this.request(
-        'crewlink:invite-nearby',
-        { targetSource },
-        false,
-      )
+      return this.request('crewlink:invite-nearby', { targetSource }, false)
     },
     respondInvite(
       invitationId: string,
diff --git a/frontend/src/stores/phone-locales.test.ts b/frontend/src/stores/phone-locales.test.ts
new file mode 100644
index 0000000..e3ecfb8
--- /dev/null
+++ b/frontend/src/stores/phone-locales.test.ts
@@ -0,0 +1,32 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { usePhoneStore } from '@/stores/phone'
+
+describe('phone locale fallback', () => {
+  beforeEach(() => {
+    vi.stubGlobal('window', {
+      matchMedia: vi.fn(() => ({ matches: false })),
+    })
+    setActivePinia(createPinia())
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('keeps CityMarkt profile copy translated with a partial server locale', () => {
+    const phone = usePhoneStore()
+    phone.open({ locales: { Apps: { citymarkt: { name: 'CityMarkt' } } } })
+
+    expect(phone.t('Apps.citymarkt.editProfile')).toBe('Edit profile')
+    expect(phone.t('Apps.citymarkt.profileIntro')).toBe(
+      'Your iFruit email stays linked to this profile.',
+    )
+    expect(phone.t('Apps.citymarkt.saveProfile')).toBe('Save profile')
+    expect(phone.t('Apps.citymarkt.addFavorite')).toBe('Add to favorites')
+    expect(phone.t('Apps.citymarkt.removeFavorite')).toBe(
+      'Remove from favorites',
+    )
+  })
+})
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 79a9fc9..2b40dea 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -421,6 +421,26 @@ const defaultLocales: LocaleTree = {
       signInBody:
         'CrewLink uses your private iFruit identity to keep groups and roles available across your phones.',
       openSettings: 'Open iFruit Settings',
+      authEyebrow: 'Private crew network',
+      authTitle: 'Welcome to CrewLink',
+      authBody:
+        'Your iFruit email is linked automatically. Use your CrewLink username to continue.',
+      login: 'Log in',
+      register: 'Register',
+      ifruitEmail: 'iFruit address',
+      gallery: 'Gallery',
+      camera: 'Camera',
+      backToLogin: 'Back to CrewLink login',
+      authErrors: {
+        no_ifruit_account: 'Sign in to your iFruit account in Settings first.',
+        invalid_username: 'Use 3–20 letters, numbers, dots, or underscores.',
+        profile_not_found: 'No CrewLink profile exists for this iFruit email.',
+        profile_exists: 'This iFruit email already has a CrewLink profile.',
+        username_taken: 'That CrewLink username is already taken.',
+        invalid_profile_image: 'Choose a valid photo from this phone.',
+        rate_limited: 'Too many attempts. Try again shortly.',
+        request_failed: 'CrewLink could not complete the request.',
+      },
       welcomeEyebrow: 'Your crew. One signal.',
       welcomeTitle: 'Find your people',
       welcomeBody:
@@ -553,6 +573,9 @@ const defaultLocales: LocaleTree = {
       externalApiBody: 'Approved scripts may add temporary group pings.',
       editUsername: 'Edit Username',
       editUsernameBody: 'Your username is unique across CrewLink.',
+      editProfile: 'Edit CrewLink Profile',
+      editProfileBody: 'Change your username and profile photo.',
+      removeProfilePhoto: 'Remove profile photo',
       profileSaved: 'CrewLink profile saved.',
       deleteGroup: 'Delete Group',
       leaveGroup: 'Leave Group',
@@ -592,6 +615,7 @@ const defaultLocales: LocaleTree = {
         profile_required: 'Create your CrewLink profile first.',
         invalid_username: 'Use 3–20 letters, numbers, dots, or underscores.',
         invalid_profile: 'Check your profile details.',
+        invalid_profile_image: 'Choose a valid photo from this phone.',
         username_taken: 'That CrewLink username is already taken.',
         invalid_group: 'Choose a valid group name and signal colour.',
         group_limit: 'You have reached your group limit.',
@@ -1003,14 +1027,16 @@ const defaultLocales: LocaleTree = {
       done: 'Done',
       authEyebrow: 'Feather network',
       authWelcome: 'Welcome to Feather',
-      authBody: 'One iFruit account. Every conversation, wherever you sign in.',
+      authBody:
+        'Your iFruit email is linked automatically. Use your Feather username to continue.',
       login: 'Log in',
       register: 'Register',
       loginTitle: 'Good to see you again',
-      loginBody: 'Log in with your iFruit address to continue to Feather.',
-      registerTitle: 'Create your iFruit account',
+      loginBody:
+        'Use your Feather username. Your iFruit email is linked automatically.',
+      registerTitle: 'Create your Feather profile',
       registerBody:
-        'Choose an address and secure it with a password. Your Feather profile comes next.',
+        'Choose a username and optional profile photo. No password is needed.',
       email: 'iFruit address',
       emailPlaceholder: 'yourname',
       password: 'Password',
@@ -1020,23 +1046,25 @@ const defaultLocales: LocaleTree = {
       showPassword: 'Show password',
       hidePassword: 'Hide password',
       loginAction: 'Continue to Feather',
-      registerAction: 'Create account',
+      registerAction: 'Create profile',
       noAccount: 'New to Feather?',
       haveAccount: 'Already registered?',
-      registerNow: 'Create an account',
+      registerNow: 'Create a profile',
       loginNow: 'Log in',
       authTrust:
-        'Your credentials are verified by the server and this phone is linked to your iFruit account.',
+        'This Feather session is separate from your other apps and linked to your iFruit email.',
       profileStep: 'Step 2 of 2',
       accountConnected: 'iFruit account connected',
       authErrors: {
-        invalid_email: 'Enter a valid 3–32 character iFruit address.',
-        invalid_password: 'Password must be 6–64 characters.',
-        password_mismatch: 'The passwords do not match.',
-        invalid_credentials: 'The iFruit address or password is incorrect.',
-        email_taken: 'That iFruit address is already registered.',
+        no_ifruit_account: 'Sign in to your iFruit account in Settings first.',
+        invalid_handle: 'Use 3–30 letters, numbers or underscores.',
+        invalid_username: 'That username does not match your Feather profile.',
+        profile_not_found: 'No Feather profile exists for this iFruit email.',
+        already_registered: 'This iFruit email already has a Feather profile.',
+        handle_taken: 'That Feather username is already taken.',
+        invalid_media: 'Choose a valid photo from this phone.',
         rate_limited: 'Too many attempts. Try again in a minute.',
-        default: 'The account request failed. Please try again.',
+        default: 'Feather could not complete the request. Please try again.',
       },
       welcome: 'Find your voice',
       welcomeBody:
@@ -2537,13 +2565,38 @@ const defaultLocales: LocaleTree = {
       photos: 'photos',
       activeListings: 'active listings',
       signInTitle: 'Sign in to iFruit',
-      signInBody:
-        'Use Settings to sign in before selling, saving or messaging.',
+      signInBody: 'Log in to your CityMarkt profile to sell, save or message.',
+      authEyebrow: 'CityMarkt account',
+      authTitle: 'Welcome to CityMarkt',
+      authBody:
+        'Your iFruit email is linked automatically. Use your CityMarkt username to continue.',
+      login: 'Login',
+      register: 'Register',
+      authUsername: 'Username',
+      authErrors: {
+        no_ifruit_account: 'Connect an iFruit account in Settings first.',
+        invalid_username: 'Enter the username of your CityMarkt profile.',
+        profile_not_found: 'No CityMarkt profile exists for this iFruit email.',
+        profile_exists:
+          'A CityMarkt profile already exists. Use Login instead.',
+      },
       noMessages: 'No conversations',
       noMessagesBody: 'Messages about offers will appear here.',
       myListings: 'My listings',
       favorites: 'Favorites',
+      addFavorite: 'Add to favorites',
+      removeFavorite: 'Remove from favorites',
       noProfileListings: 'Nothing here yet',
+      createProfile: 'Create your CityMarkt profile',
+      editProfile: 'Edit profile',
+      profileIntro: 'Your iFruit email stays linked to this profile.',
+      profileEmail: 'iFruit email',
+      displayName: 'Display name',
+      profileBio: 'About you',
+      saveProfile: 'Save profile',
+      cancel: 'Cancel',
+      profileSaved: 'Your profile was saved.',
+      removeProfilePhoto: 'Remove photo',
       phone: 'Phone',
       contactSeller: 'Contact seller',
       messagePlaceholder: 'Hi, is this still available?',
@@ -2683,13 +2736,16 @@ const defaultLocales: LocaleTree = {
       signInBody: 'Sign in to iFruit in Settings to publish and save posts.',
       authEyebrow: 'Local Pages account',
       authWelcome: 'Welcome to Local Pages',
-      authBody: 'Sign in or create an iFruit account to build your local profile.',
+      authBody:
+        'Your iFruit email is linked automatically. Use your Local Pages username to continue.',
       login: 'Sign in',
       register: 'Register',
       loginTitle: 'Continue with iFruit',
-      loginBody: 'Your posts, saved items and profile stay linked to your account.',
+      loginBody:
+        'Your posts, saved items and profile stay linked to your account.',
       registerTitle: 'Create an iFruit account',
-      registerBody: 'Choose your new iFruit address. Your Local Pages profile comes next.',
+      registerBody:
+        'Choose your new iFruit address. Your Local Pages profile comes next.',
       authEmail: 'iFruit address',
       authEmailPlaceholder: 'your.name',
       authPassword: 'Password',
@@ -2705,7 +2761,8 @@ const defaultLocales: LocaleTree = {
       profileEmail: 'iFruit email',
       profileHandle: 'Username',
       profileHandlePlaceholder: 'your.name',
-      profileHandleHint: 'Use 3–24 lowercase letters, numbers, dots or underscores.',
+      profileHandleHint:
+        'Use 3–24 lowercase letters, numbers, dots or underscores.',
       profileBio: 'Bio',
       profileBioPlaceholder: 'Tell the city a little about yourself...',
       profilePhoto: 'Profile photo',
@@ -2751,13 +2808,17 @@ const defaultLocales: LocaleTree = {
         'Review the listing and publish it when you are ready.',
       cityMarktPhotosHint: 'The CityMarkt listing photos will be included.',
       authErrors: {
-        invalid_email: 'Enter a valid 3–32 character iFruit address.',
-        invalid_password: 'Use a password between 6 and 64 characters.',
-        invalid_credentials: 'The iFruit address or password is incorrect.',
-        email_taken: 'This iFruit address is already registered.',
-        password_mismatch: 'The passwords do not match.',
+        no_ifruit_account: 'Sign in to your iFruit account in Settings first.',
+        invalid_username:
+          'Use 3–24 lowercase letters, numbers, dots or underscores.',
+        profile_not_found:
+          'No Local Pages profile exists for this iFruit email.',
+        profile_exists: 'This iFruit email already has a Local Pages profile.',
+        invalid_profile: 'Check your Local Pages username.',
+        invalid_profile_image: 'Choose a valid photo from this phone.',
+        profile_handle_taken: 'This Local Pages username is already taken.',
         rate_limited: 'Too many attempts. Try again shortly.',
-        default: 'The iFruit account request failed.',
+        default: 'Local Pages could not complete the request.',
       },
       errors: {
         profile_required: 'Create your Local Pages profile first.',
@@ -3469,6 +3530,32 @@ const defaultLocales: LocaleTree = {
     send: 'Send',
     start: 'Start',
     stop: 'Stop',
+    signOut: 'Sign Out',
+    signingOut: 'Signing Out...',
+    signOutTitle: 'Sign out of {app}?',
+    signOutBody:
+      'You will only be signed out of {app}. Your other iFruit apps stay signed in.',
+    signOutFailed: 'Could not sign out. Please try again.',
+    appAuth: {
+      eyebrow: 'iFruit account',
+      title: 'Continue to {app}',
+      body: 'Use your iFruit email and password. This login applies only to {app}.',
+      login: 'Login',
+      register: 'Register',
+      email: 'iFruit email',
+      password: 'Password',
+      confirm: 'Confirm password',
+      loginAction: 'Log in',
+      registerAction: 'Create account',
+      errors: {
+        invalid_email: 'Enter a valid iFruit email.',
+        invalid_password: 'Password must be 6–64 characters.',
+        invalid_credentials: 'Email or password is incorrect.',
+        email_taken: 'That iFruit email is already registered.',
+        rate_limited: 'Too many attempts. Try again in a minute.',
+        default: 'The account request failed.',
+      },
+    },
     use: 'Use',
   },
   Notifications: {
diff --git a/frontend/src/types/crewlink.ts b/frontend/src/types/crewlink.ts
index ae54bda..f27f0f5 100644
--- a/frontend/src/types/crewlink.ts
+++ b/frontend/src/types/crewlink.ts
@@ -15,15 +15,12 @@ export type CrewLinkColour =
   | 'green'
   | 'rose'
 
-export type CrewLinkPingType =
-  | 'meeting'
-  | 'danger'
-  | 'help'
-  | 'target'
-  | 'info'
+export type CrewLinkPingType = 'meeting' | 'danger' | 'help' | 'target' | 'info'
 
 export type CrewLinkProfile = {
   activeGroupId: string | null
+  avatarMediaId: number | null
+  avatarUrl: string | null
   id: string
   mapVisible: boolean
   overheadVisible: boolean
@@ -31,6 +28,7 @@ export type CrewLinkProfile = {
 }
 
 export type CrewLinkMember = {
+  avatarUrl?: string | null
   coords?: MapPoint & { z: number }
   id: string
   joinedAt: number
diff --git a/frontend/src/views/apps/CityMarktApp.vue b/frontend/src/views/apps/CityMarktApp.vue
index 6a4c321..f65bbfa 100644
--- a/frontend/src/views/apps/CityMarktApp.vue
+++ b/frontend/src/views/apps/CityMarktApp.vue
@@ -18,6 +18,7 @@ import {
   Inbox,
   Laptop,
   LayoutGrid,
+  LogOut,
   MapPin,
   MessageCircle,
   MoreHorizontal,
@@ -50,7 +51,10 @@ import { useRoute, useRouter } from 'vue-router'
 import CityMarktSelect from '@/components/citymarkt/CityMarktSelect.vue'
 import CityMarktGallery from '@/components/citymarkt/CityMarktGallery.vue'
 import CityMarktOfferCard from '@/components/citymarkt/CityMarktOfferCard.vue'
+import CityMarktAuth from '@/components/citymarkt/CityMarktAuth.vue'
+import AccountLogoutDialog from '@/components/account/AccountLogoutDialog.vue'
 import { useAccountStore } from '@/stores/account'
+import { useAppAuthStore } from '@/stores/app-auth'
 import { useAppStoreStore } from '@/stores/app-store'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { useMarketplaceStore } from '@/stores/marketplace'
@@ -105,7 +109,10 @@ type MediaContext = {
   photos: SelectedPhoto[]
   sellStep: number
 }
-type ProfileMediaContext = { draft: MarketplaceProfileDraft }
+type ProfileMediaContext = {
+  authMode?: 'login' | 'register'
+  draft: MarketplaceProfileDraft
+}
 
 const phone = usePhoneStore()
 const detailActionColors = computed(() => ({
@@ -115,11 +122,15 @@ const detailActionColors = computed(() => ({
 const route = useRoute()
 const router = useRouter()
 const account = useAccountStore()
+const appAuth = useAppAuthStore()
 const appStore = useAppStoreStore()
 const easyShare = useEasyShareStore()
 const marketplace = useMarketplaceStore()
 const messageMedia = useMessageMediaStore()
 const pages = usePagesStore()
+const logoutDialogOpen = ref(false)
+const authMode = ref<'login' | 'register'>('login')
+const authError = ref('')
 const tab = ref<Tab>('discover')
 const screen = ref<Screen>('main')
 const selectedListing = ref<MarketplaceListing | null>(null)
@@ -239,7 +250,7 @@ const tabs = [
   { icon: UserRound, id: 'profile' },
 ] as const
 
-const isAuthenticated = computed(() => account.email !== '')
+const isAuthenticated = computed(() => appAuth.isSignedIn('citymarkt'))
 const localPagesInstalled = computed(
   () =>
     appStore.isInstalled('local-pages') &&
@@ -529,6 +540,80 @@ async function selectTab(next: Tab): Promise<void> {
   }
 }
 
+async function finishAuthentication(): Promise<void> {
+  await marketplace.loadProfile()
+  syncProfileDraft()
+  profileEditing.value = !marketplace.profile?.exists
+  await Promise.all([
+    marketplace.loadOwn(),
+    marketplace.load({ favorites: true }),
+  ])
+  tab.value = 'profile'
+  screen.value = 'main'
+}
+
+function switchAuthMode(mode: 'login' | 'register'): void {
+  authMode.value = mode
+  authError.value = ''
+  profileDraft.value.displayName =
+    mode === 'login'
+      ? (marketplace.profile?.display_name ?? '')
+      : account.email.split('@')[0] ?? ''
+  if (mode === 'login') selectedProfilePhoto.value = null
+}
+
+async function submitCityMarktAuth(): Promise<void> {
+  const username = profileDraft.value.displayName.trim()
+  authError.value = ''
+  if (!account.email) {
+    authError.value = phone.t('Apps.citymarkt.authErrors.no_ifruit_account')
+    return
+  }
+  if (username.length < 2 || username.length > 40) {
+    authError.value = phone.t('Apps.citymarkt.authErrors.invalid_username')
+    return
+  }
+
+  profilePending.value = true
+  await marketplace.loadProfile()
+  if (authMode.value === 'login') {
+    profilePending.value = false
+    if (!marketplace.profile?.exists) {
+      authError.value = phone.t('Apps.citymarkt.authErrors.profile_not_found')
+      return
+    }
+    if (
+      marketplace.profile.display_name.trim().toLocaleLowerCase(phone.lang) !==
+      username.toLocaleLowerCase(phone.lang)
+    ) {
+      authError.value = phone.t('Apps.citymarkt.authErrors.invalid_username')
+      return
+    }
+  } else {
+    if (marketplace.profile?.exists) {
+      profilePending.value = false
+      authError.value = phone.t('Apps.citymarkt.authErrors.profile_exists')
+      return
+    }
+    const response = await marketplace.saveProfile({
+      avatarMediaId:
+        selectedProfilePhoto.value?.id ?? profileDraft.value.avatarMediaId,
+      bio: '',
+      displayName: username,
+    })
+    profilePending.value = false
+    if (!response.success) {
+      authError.value = phone.t(
+        `Apps.citymarkt.errors.${response.error ?? 'default'}`,
+      )
+      return
+    }
+  }
+
+  appAuth.signIn('citymarkt', account.email)
+  await finishAuthentication()
+}
+
 async function openListing(
   item: Pick<MarketplaceListingSummary, 'id'>,
 ): Promise<void> {
@@ -578,9 +663,12 @@ function openProfileMedia(app: 'camera' | 'photos'): void {
     'photo',
     '/apps/citymarkt?profileEdit=1',
     1,
-    { draft: { ...profileDraft.value } } satisfies ProfileMediaContext,
+    {
+      authMode: isAuthenticated.value ? undefined : authMode.value,
+      draft: { ...profileDraft.value },
+    } satisfies ProfileMediaContext,
   )
-  void router.push(app === 'photos' ? '/apps/photos?picker=1' : '/apps/camera?picker=1')
+  void router.push(`/apps/${app}?mediaAttachment=photo`)
 }
 
 function removeProfilePhoto(): void {
@@ -905,11 +993,13 @@ onMounted(async () => {
   }
   if (profileSelection?.context) {
     profileDraft.value = profileSelection.context.draft
+    if (profileSelection.context.authMode)
+      authMode.value = profileSelection.context.authMode
     if (profileSelection.media[0]) {
       selectedProfilePhoto.value = profileSelection.media[0]
       profileDraft.value.avatarMediaId = profileSelection.media[0].id
     }
-    profileEditing.value = true
+    profileEditing.value = isAuthenticated.value
     tab.value = 'profile'
     screen.value = 'main'
   }
@@ -932,6 +1022,8 @@ onMounted(async () => {
     }
     await marketplace.loadCounts()
   } else {
+    await marketplace.loadProfile()
+    switchAuthMode(marketplace.profile?.exists ? 'login' : 'register')
     tab.value = 'profile'
     screen.value = 'main'
   }
@@ -1127,6 +1219,9 @@ onMounted(async () => {
           <UserRound :size="40" />
           <h2>{{ phone.t('Apps.citymarkt.signInTitle') }}</h2>
           <p>{{ phone.t('Apps.citymarkt.signInBody') }}</p>
+          <k-button rounded @click="tab = 'profile'">
+            {{ phone.t('Apps.citymarkt.login') }}
+          </k-button>
         </div>
         <div v-else-if="!marketplace.inquiries.length" class="citymarkt__empty">
           <MessageCircle :size="36" /><strong>{{
@@ -1156,9 +1251,17 @@ onMounted(async () => {
 
       <template v-else-if="tab === 'profile'">
         <div v-if="!isAuthenticated" class="citymarkt__auth">
-          <UserRound :size="40" />
-          <h2>{{ phone.t('Apps.citymarkt.signInTitle') }}</h2>
-          <p>{{ phone.t('Apps.citymarkt.signInBody') }}</p>
+          <CityMarktAuth
+            v-model:mode="authMode"
+            v-model:username="profileDraft.displayName"
+            :avatar-url="selectedProfilePhoto?.url ?? null"
+            :email="account.email"
+            :error="authError"
+            :pending="profilePending"
+            @camera="openProfileMedia('camera')"
+            @gallery="openProfileMedia('photos')"
+            @submit="submitCityMarktAuth"
+          />
         </div>
         <template v-else>
           <section v-if="profileEditing || !marketplace.profile?.exists" class="citymarkt__profile-editor">
@@ -1255,6 +1358,10 @@ onMounted(async () => {
             ></k-glass>
           </div>
           </template>
+          <k-button large rounded outline class="citymarkt__logout" @click="logoutDialogOpen = true">
+            <LogOut :size="17" />
+            {{ phone.t('Common.signOut') }}
+          </k-button>
         </template>
       </template>
     </section>
@@ -1849,6 +1956,11 @@ onMounted(async () => {
         </k-tabbar-link>
       </k-toolbar-pane>
     </k-tabbar>
+    <AccountLogoutDialog
+      v-model:opened="logoutDialogOpen"
+      app-id="citymarkt"
+      :app-name="phone.t('Apps.citymarkt.name')"
+    />
     <Transition name="toast"
       ><div v-if="feedback" class="citymarkt__toast">
         {{ feedback }}
@@ -2503,6 +2615,11 @@ onMounted(async () => {
 .citymarkt__profile-actions button:disabled {
   opacity: .4;
 }
+.citymarkt__logout {
+  width: 100%;
+  margin-top: 12px;
+  color: #ff796f;
+}
 :global(.citymarkt--light) .citymarkt__profile-editor {
   border-color: #00000012;
 }
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 9680cd4..d54e5bd 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -23,6 +23,7 @@ import {
 } from 'konsta/vue'
 import {
   AlertTriangle,
+  Camera,
   Check,
   CircleDot,
   Copy,
@@ -32,7 +33,9 @@ import {
   EyeOff,
   Flag,
   Info,
+  Images,
   LocateFixed,
+  LogOut,
   Map as MapIcon,
   MapPin,
   Navigation,
@@ -52,13 +55,7 @@ import {
   X,
   Zap,
 } from 'lucide-vue-next'
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-} from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import {
@@ -69,9 +66,15 @@ import {
   defaultMapWorldToPercent,
   type MapPoint,
 } from '@/features/map/defaultMapGeometry'
+import AccountLogoutDialog from '@/components/account/AccountLogoutDialog.vue'
+import AppProfileAuth from '@/components/account/AppProfileAuth.vue'
+import { useAccountStore } from '@/stores/account'
+import { useAppAuthStore } from '@/stores/app-auth'
 import { useCrewLinkStore } from '@/stores/crewlink'
 import { useEasyShareStore } from '@/stores/easyshare'
+import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
+import type { PhoneMedia } from '@/types/media'
 import type {
   CrewLinkColour,
   CrewLinkMember,
@@ -92,11 +95,24 @@ type CrewLinkSheet =
   | 'nearby'
   | 'ping'
   | 'edit-group'
+  | 'edit-profile'
   | 'member'
   | null
+type AuthMediaContext = {
+  mode: 'login' | 'register'
+  selectedPhoto: PhoneMedia | null
+  username: string
+}
+type ProfileMediaContext = {
+  selectedPhoto: PhoneMedia | null
+  username: string
+}
 
 const phone = usePhoneStore()
+const account = useAccountStore()
+const appAuth = useAppAuthStore()
 const crew = useCrewLinkStore()
+const messageMedia = useMessageMediaStore()
 const route = useRoute()
 const router = useRouter()
 const mainlandMapUrl = `${import.meta.env.BASE_URL}img/maps/gtav-map.svg`
@@ -104,6 +120,13 @@ const cayoMapUrl = `${import.meta.env.BASE_URL}img/maps/cayo-perico.svg`
 const activeTab = ref<CrewLinkTab>('map')
 const sheet = ref<CrewLinkSheet>(null)
 const username = ref('')
+const authMode = ref<'login' | 'register'>('login')
+const authUsername = ref('')
+const authProfilePhoto = ref<PhoneMedia | null>(null)
+const authPending = ref(false)
+const authError = ref('')
+const selectedProfilePhoto = ref<PhoneMedia | null>(null)
+const profileAvatarRemoved = ref(false)
 const groupName = ref('')
 const groupColour = ref<CrewLinkColour>('cyan')
 const inviteCode = ref('')
@@ -121,10 +144,15 @@ const nearbyPlayers = ref<CrewLinkNearbyPlayer[]>([])
 const selectedMember = ref<CrewLinkMember | null>(null)
 const selectedPing = ref<CrewLinkPing | null>(null)
 const formError = ref('')
+const logoutDialogOpen = ref(false)
 const toastText = ref('')
-const pendingGroupSetting = ref<'allowMemberPings' | 'overheadAllowed' | null>(null)
+const pendingGroupSetting = ref<'allowMemberPings' | 'overheadAllowed' | null>(
+  null,
+)
 const pendingVisibility = ref<'mapVisible' | 'overheadVisible' | null>(null)
-const confirmAction = ref<'delete-group' | 'leave-group' | 'remove-member' | 'transfer-owner' | null>(null)
+const confirmAction = ref<
+  'delete-group' | 'leave-group' | 'remove-member' | 'transfer-owner' | null
+>(null)
 const zoom = ref(1.45)
 const pan = ref<MapPoint>({ x: 0, y: 0 })
 const viewportRef = ref<HTMLElement | null>(null)
@@ -185,18 +213,21 @@ const ownMember = computed(() =>
 const onlineMembers = computed(
   () => activeGroup.value?.members.filter((member) => member.online) ?? [],
 )
-const visibleMapMembers = computed(
-  () => onlineMembers.value.filter((member) => Boolean(member.coords)),
+const visibleMapMembers = computed(() =>
+  onlineMembers.value.filter((member) => Boolean(member.coords)),
 )
 const canCoordinate = computed(
-  () => roleLevels[activeGroup.value?.role ?? 'guest'] >= roleLevels.coordinator,
+  () =>
+    roleLevels[activeGroup.value?.role ?? 'guest'] >= roleLevels.coordinator,
 )
 const canModerate = computed(
   () => roleLevels[activeGroup.value?.role ?? 'guest'] >= roleLevels.moderator,
 )
 const canPing = computed(
-  () =>
-    canModerate.value || Boolean(activeGroup.value?.allowMemberPings),
+  () => canModerate.value || Boolean(activeGroup.value?.allowMemberPings),
+)
+const authUsernameValid = computed(() =>
+  /^[A-Za-z0-9][A-Za-z0-9._]{1,18}[A-Za-z0-9]$/.test(authUsername.value.trim()),
 )
 const canvasStyle = computed(() => ({
   aspectRatio: String(
@@ -223,11 +254,17 @@ const mapCenterCoords = computed(() => {
   return defaultMapPercentToWorld({
     x: Math.min(
       1,
-      Math.max(0, (viewport.left + viewport.width / 2 - canvas.left) / canvas.width),
+      Math.max(
+        0,
+        (viewport.left + viewport.width / 2 - canvas.left) / canvas.width,
+      ),
     ),
     y: Math.min(
       1,
-      Math.max(0, (viewport.top + viewport.height / 2 - canvas.top) / canvas.height),
+      Math.max(
+        0,
+        (viewport.top + viewport.height / 2 - canvas.top) / canvas.height,
+      ),
     ),
   })
 })
@@ -252,6 +289,107 @@ function showToast(message: string): void {
   }, 2400)
 }
 
+function switchAuthMode(mode: 'login' | 'register'): void {
+  authMode.value = mode
+  authProfilePhoto.value = null
+  authUsername.value =
+    mode === 'register'
+      ? (account.email.split('@')[0] ?? '')
+          .replace(/[^a-z0-9._]/gi, '_')
+          .slice(0, 20)
+      : ''
+  authError.value = ''
+}
+
+function authErrorText(code?: string): string {
+  const known = [
+    'invalid_profile_image',
+    'invalid_username',
+    'no_ifruit_account',
+    'profile_exists',
+    'profile_not_found',
+    'rate_limited',
+    'username_taken',
+  ]
+  return t(
+    `authErrors.${code && known.includes(code) ? code : 'request_failed'}`,
+  )
+}
+
+async function submitAuthentication(): Promise<void> {
+  authError.value = ''
+  if (!account.email) {
+    authError.value = authErrorText('no_ifruit_account')
+    return
+  }
+  if (!authUsernameValid.value) {
+    authError.value = authErrorText('invalid_username')
+    return
+  }
+
+  const submittedUsername = authUsername.value.trim()
+  authPending.value = true
+  const loaded = await crew.bootstrap()
+  if (!loaded) {
+    authPending.value = false
+    authError.value = authErrorText(crew.error)
+    return
+  }
+
+  if (authMode.value === 'login') {
+    authPending.value = false
+    if (!crew.profile) {
+      authError.value = authErrorText('profile_not_found')
+      return
+    }
+    if (
+      crew.profile.username.toLowerCase() !== submittedUsername.toLowerCase()
+    ) {
+      authError.value = authErrorText('invalid_username')
+      return
+    }
+  } else {
+    if (crew.profile) {
+      authPending.value = false
+      authError.value = authErrorText('profile_exists')
+      return
+    }
+    const response = await crew.createProfile(
+      submittedUsername,
+      authProfilePhoto.value?.id ?? 0,
+    )
+    authPending.value = false
+    if (!response.success) {
+      authError.value = authErrorText(response.error)
+      return
+    }
+  }
+
+  appAuth.signIn('crewlink', account.email)
+  username.value = crew.profile?.username ?? submittedUsername
+  authUsername.value = ''
+  authProfilePhoto.value = null
+  openSharedInvite()
+}
+
+function openAuthMedia(app: 'camera' | 'photos'): void {
+  messageMedia.begin(
+    'crewlink:auth-avatar',
+    'photo',
+    '/apps/crewlink?auth=register',
+    1,
+    {
+      mode: authMode.value,
+      selectedPhoto: authProfilePhoto.value,
+      username: authUsername.value,
+    } satisfies AuthMediaContext,
+  )
+  void router.push({
+    path: `/apps/${app}`,
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
 function shareProfile(): void {
   const profile = crew.profile
   if (!profile) return
@@ -303,7 +441,10 @@ function updateValue(
 }
 
 function colourValue(colour: CrewLinkColour): string {
-  return colours.find((candidate) => candidate.id === colour)?.value ?? colours[0].value
+  return (
+    colours.find((candidate) => candidate.id === colour)?.value ??
+    colours[0].value
+  )
 }
 
 function roleLabel(role: CrewLinkRole): string {
@@ -314,7 +455,10 @@ function memberInitials(member: CrewLinkMember): string {
   return member.username.slice(0, 2).toUpperCase()
 }
 
-function markerStyle(coords: MapPoint, offset = '-50%'): Record<string, string> {
+function markerStyle(
+  coords: MapPoint,
+  offset = '-50%',
+): Record<string, string> {
   const point = defaultMapWorldToPercent(coords)
   return {
     left: `${point.x * 100}%`,
@@ -331,7 +475,8 @@ function memberStatus(member: CrewLinkMember): string {
 
 function expiresIn(timestamp: number): string {
   const seconds = Math.max(0, Math.ceil((timestamp - Date.now()) / 1000))
-  if (seconds >= 60) return t('expiresMinutes', { count: String(Math.ceil(seconds / 60)) })
+  if (seconds >= 60)
+    return t('expiresMinutes', { count: String(Math.ceil(seconds / 60)) })
   return t('expiresSeconds', { count: String(seconds) })
 }
 
@@ -357,9 +502,42 @@ function closeSheet(): void {
   if (crew.isLoading) return
   sheet.value = null
   selectedMember.value = null
+  selectedProfilePhoto.value = null
+  profileAvatarRemoved.value = false
   formError.value = ''
 }
 
+function editOwnProfile(): void {
+  if (!crew.profile) return
+  username.value = crew.profile.username
+  selectedProfilePhoto.value = null
+  profileAvatarRemoved.value = false
+  formError.value = ''
+  sheet.value = 'edit-profile'
+}
+
+function openProfileMedia(app: 'camera' | 'photos'): void {
+  messageMedia.begin(
+    'crewlink:profile-avatar',
+    'photo',
+    '/apps/crewlink?profileEdit=1',
+    1,
+    {
+      selectedPhoto: selectedProfilePhoto.value,
+      username: username.value,
+    } satisfies ProfileMediaContext,
+  )
+  void router.push({
+    path: `/apps/${app}`,
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
+function removeProfilePhoto(): void {
+  selectedProfilePhoto.value = null
+  profileAvatarRemoved.value = true
+}
+
 async function createProfile(): Promise<void> {
   const response = await crew.createProfile(username.value.trim())
   if (!response.success) {
@@ -371,7 +549,10 @@ async function createProfile(): Promise<void> {
 }
 
 async function createGroup(): Promise<void> {
-  const response = await crew.createGroup(groupName.value.trim(), groupColour.value)
+  const response = await crew.createGroup(
+    groupName.value.trim(),
+    groupColour.value,
+  )
   if (!response.success) {
     formError.value = errorText(response.error)
     return
@@ -405,13 +586,20 @@ async function switchGroup(groupId: string): Promise<void> {
 
 async function saveProfile(): Promise<void> {
   if (!crew.profile) return
+  const avatarMediaId =
+    selectedProfilePhoto.value?.id ??
+    (profileAvatarRemoved.value ? 0 : crew.profile.avatarMediaId)
   const response = await crew.updateProfile(
     username.value.trim(),
     crew.profile.mapVisible,
     crew.profile.overheadVisible,
+    avatarMediaId,
   )
   if (!response.success) formError.value = errorText(response.error)
-  else showToast(t('profileSaved'))
+  else {
+    closeSheet()
+    showToast(t('profileSaved'))
+  }
 }
 
 async function updateVisibility(
@@ -479,9 +667,7 @@ function togglePingAtMapCenter(): void {
 function copyInviteCode(): void {
   if (!activeGroup.value?.inviteCode) return
   showToast(
-    copyText(activeGroup.value.inviteCode)
-      ? t('codeCopied')
-      : errorText(),
+    copyText(activeGroup.value.inviteCode) ? t('codeCopied') : errorText(),
   )
 }
 
@@ -553,12 +739,20 @@ async function performConfirmedAction(): Promise<void> {
   confirmAction.value = null
   if (!activeGroup.value) return
   let response
-  if (action === 'delete-group') response = await crew.deleteGroup(activeGroup.value.id)
-  else if (action === 'leave-group') response = await crew.leave(activeGroup.value.id)
+  if (action === 'delete-group')
+    response = await crew.deleteGroup(activeGroup.value.id)
+  else if (action === 'leave-group')
+    response = await crew.leave(activeGroup.value.id)
   else if (action === 'remove-member' && selectedMember.value) {
-    response = await crew.removeMember(activeGroup.value.id, selectedMember.value.id)
+    response = await crew.removeMember(
+      activeGroup.value.id,
+      selectedMember.value.id,
+    )
   } else if (action === 'transfer-owner' && selectedMember.value) {
-    response = await crew.transferOwner(activeGroup.value.id, selectedMember.value.id)
+    response = await crew.transferOwner(
+      activeGroup.value.id,
+      selectedMember.value.id,
+    )
   }
   if (!response?.success) showToast(errorText(response?.error))
   else {
@@ -599,11 +793,27 @@ async function removePing(ping: CrewLinkPing): Promise<void> {
   }
 }
 
-async function routeTo(coords: { x: number; y: number; z: number }): Promise<void> {
+async function routeTo(coords: {
+  x: number
+  y: number
+  z: number
+}): Promise<void> {
   const response = await nuiCall('map:setWaypoint', { coords })
   showToast(t(response.success ? 'routeSet' : 'errors.request_failed'))
 }
 
+function routeToSelectedMember(): void {
+  if (!selectedMember.value?.coords) return
+  void routeTo(selectedMember.value.coords)
+  selectedMember.value = null
+}
+
+function routeToSelectedPing(): void {
+  if (!selectedPing.value) return
+  void routeTo(selectedPing.value.coords)
+  selectedPing.value = null
+}
+
 function centerOn(coords: MapPoint): void {
   const viewport = viewportRef.value?.getBoundingClientRect()
   const canvas = canvasRef.value
@@ -658,7 +868,10 @@ function centerOwnLocation(): void {
 }
 
 function changeZoom(direction: -1 | 1): void {
-  zoom.value = Math.max(0.85, Math.min(8, zoom.value * (direction > 0 ? 1.32 : 0.76)))
+  zoom.value = Math.max(
+    0.85,
+    Math.min(8, zoom.value * (direction > 0 ? 1.32 : 0.76)),
+  )
 }
 
 function onPointerDown(event: PointerEvent): void {
@@ -700,8 +913,30 @@ function onCrewLinkMessage(event: MessageEvent): void {
 }
 
 onMounted(async () => {
-  await crew.bootstrap()
+  const authSelection = messageMedia.consumeMany<AuthMediaContext>(
+    'crewlink:auth-avatar',
+  )
+  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>(
+    'crewlink:profile-avatar',
+  )
+  if (authSelection) {
+    authMode.value = authSelection.context?.mode ?? 'register'
+    authUsername.value = authSelection.context?.username ?? ''
+    authProfilePhoto.value =
+      authSelection.media[0] ?? authSelection.context?.selectedPhoto ?? null
+  }
+  if (appAuth.isSignedIn('crewlink')) await crew.bootstrap()
   username.value = crew.profile?.username ?? ''
+  if (profileSelection && crew.profile) {
+    username.value = profileSelection.context?.username ?? crew.profile.username
+    selectedProfilePhoto.value =
+      profileSelection.media[0] ??
+      profileSelection.context?.selectedPhoto ??
+      null
+    profileAvatarRemoved.value = false
+    activeTab.value = 'profile'
+    sheet.value = 'edit-profile'
+  }
   openSharedInvite()
   await nextTick()
   fitOnlineMembers()
@@ -719,7 +954,36 @@ onBeforeUnmount(() => {
 
 <template>
   <k-page class="crewlink" :class="{ 'crewlink--dark': phone.isDarkMode }">
-    <template v-if="crew.isLoading && !crew.profile && !crew.error">
+    <template v-if="!appAuth.isSignedIn('crewlink')">
+      <div class="crewlink-onboarding crewlink-auth">
+        <AppProfileAuth
+          :mode="authMode"
+          v-model:username="authUsername"
+          :avatar-url="authProfilePhoto?.url ?? null"
+          :body="t('authBody')"
+          :camera-label="t('camera')"
+          :email="account.email"
+          :email-label="t('ifruitEmail')"
+          :error="authError"
+          :eyebrow="t('authEyebrow')"
+          :gallery-label="t('gallery')"
+          :login-label="t('login')"
+          :max-username-length="20"
+          :min-username-length="3"
+          :pending="authPending"
+          :register-label="t('register')"
+          :title="t('authTitle')"
+          :username-label="t('username')"
+          :username-placeholder="t('usernamePlaceholder')"
+          @camera="openAuthMedia('camera')"
+          @gallery="openAuthMedia('photos')"
+          @submit="submitAuthentication"
+          @update:mode="switchAuthMode"
+        />
+      </div>
+    </template>
+
+    <template v-else-if="crew.isLoading && !crew.profile && !crew.error">
       <div class="crewlink-loading">
         <span class="crewlink-logo"><Radio /></span>
         <k-preloader />
@@ -733,8 +997,8 @@ onBeforeUnmount(() => {
         <small>{{ t('privateNetwork') }}</small>
         <h1>{{ t('signInTitle') }}</h1>
         <p>{{ t('signInBody') }}</p>
-        <k-button large rounded @click="router.push('/apps/settings')">
-          {{ t('openSettings') }}
+        <k-button large rounded @click="appAuth.signOut('crewlink')">
+          {{ t('backToLogin') }}
         </k-button>
       </div>
     </template>
@@ -759,19 +1023,40 @@ onBeforeUnmount(() => {
             @keydown.enter="createProfile"
           />
         </k-list>
-        <p v-if="formError" class="crewlink-error" role="alert">{{ formError }}</p>
-        <k-button large rounded :disabled="crew.isLoading" @click="createProfile">
+        <p v-if="formError" class="crewlink-error" role="alert">
+          {{ formError }}
+        </p>
+        <k-button
+          large
+          rounded
+          :disabled="crew.isLoading"
+          @click="createProfile"
+        >
           <k-preloader v-if="crew.isLoading" />
           <template v-else>{{ t('createProfile') }}</template>
         </k-button>
-        <small class="crewlink-privacy"><ShieldCheck />{{ t('privacyNote') }}</small>
+        <k-button
+          large
+          rounded
+          outline
+          class="crewlink-logout-button"
+          @click="logoutDialogOpen = true"
+        >
+          <LogOut />{{ phone.t('Common.signOut') }}
+        </k-button>
+        <small class="crewlink-privacy"
+          ><ShieldCheck />{{ t('privacyNote') }}</small
+        >
       </div>
     </template>
 
     <template v-else>
       <k-navbar v-if="activeGroup" class="crewlink-navbar" :title="t('name')" />
 
-      <main class="crewlink-content" :class="{ 'crewlink-content--empty': !activeGroup }">
+      <main
+        class="crewlink-content"
+        :class="{ 'crewlink-content--empty': !activeGroup }"
+      >
         <section v-if="!activeGroup" class="crewlink-group-gate">
           <button type="button" @click="openSheet('create-group')">
             <span><Plus /></span>
@@ -781,6 +1066,15 @@ onBeforeUnmount(() => {
             <span><UserPlus /></span>
             <strong>{{ t('joinGroup') }}</strong>
           </button>
+          <k-button
+            large
+            rounded
+            outline
+            class="crewlink-group-gate__logout"
+            @click="logoutDialogOpen = true"
+          >
+            <LogOut />{{ phone.t('Common.signOut') }}
+          </k-button>
         </section>
 
         <template v-else>
@@ -796,8 +1090,11 @@ onBeforeUnmount(() => {
                   v-for="member in onlineMembers.slice(0, 4)"
                   :key="member.id"
                   :style="{ borderColor: activeColour }"
-                >{{ memberInitials(member) }}</span>
-                <i v-if="onlineMembers.length > 4">+{{ onlineMembers.length - 4 }}</i>
+                  >{{ memberInitials(member) }}</span
+                >
+                <i v-if="onlineMembers.length > 4"
+                  >+{{ onlineMembers.length - 4 }}</i
+                >
               </div>
             </div>
 
@@ -810,16 +1107,20 @@ onBeforeUnmount(() => {
               @pointercancel="onPointerUp"
               @wheel="onWheel"
             >
-              <div ref="canvasRef" class="crewlink-map__canvas" :style="canvasStyle">
+              <div
+                ref="canvasRef"
+                class="crewlink-map__canvas"
+                :style="canvasStyle"
+              >
                 <img
-                :src="mainlandMapUrl"
+                  :src="mainlandMapUrl"
                   alt=""
                   class="crewlink-map__mainland"
                   :style="defaultMainlandStyle"
                   draggable="false"
                 />
                 <img
-                :src="cayoMapUrl"
+                  :src="cayoMapUrl"
                   alt=""
                   class="crewlink-map__cayo"
                   :style="defaultCayoStyle"
@@ -831,7 +1132,10 @@ onBeforeUnmount(() => {
                   type="button"
                   class="crewlink-member-marker"
                   :class="{ 'is-self': member.id === crew.profile?.id }"
-                  :style="{ ...markerStyle(member.coords!), ...activeCrewStyle }"
+                  :style="{
+                    ...markerStyle(member.coords!),
+                    ...activeCrewStyle,
+                  }"
                   @pointerdown.stop
                   @click.stop="selectedMember = member"
                 >
@@ -843,7 +1147,10 @@ onBeforeUnmount(() => {
                   :key="ping.id"
                   type="button"
                   class="crewlink-ping-marker"
-                  :style="{ ...markerStyle(ping.coords, '-100%'), '--ping': pingColours[ping.type] }"
+                  :style="{
+                    ...markerStyle(ping.coords, '-100%'),
+                    '--ping': pingColours[ping.type],
+                  }"
                   @pointerdown.stop
                   @click.stop="selectedPing = ping"
                 >
@@ -851,12 +1158,38 @@ onBeforeUnmount(() => {
                   <small>{{ ping.label }}</small>
                 </button>
               </div>
-              <div v-if="pingAtMapCenter" class="crewlink-map-crosshair"><Crosshair /></div>
+              <div v-if="pingAtMapCenter" class="crewlink-map-crosshair">
+                <Crosshair />
+              </div>
               <div class="crewlink-map-controls">
-                <button type="button" :aria-label="t('zoomIn')" @click="changeZoom(1)">+</button>
-                <button type="button" :aria-label="t('zoomOut')" @click="changeZoom(-1)">−</button>
-                <button type="button" :aria-label="t('myLocation')" @click="centerOwnLocation"><LocateFixed /></button>
-                <button type="button" :aria-label="`${t('members')} · ${t('map')}`" @click="fitOnlineMembers"><Users /></button>
+                <button
+                  type="button"
+                  :aria-label="t('zoomIn')"
+                  @click="changeZoom(1)"
+                >
+                  +
+                </button>
+                <button
+                  type="button"
+                  :aria-label="t('zoomOut')"
+                  @click="changeZoom(-1)"
+                >
+                  −
+                </button>
+                <button
+                  type="button"
+                  :aria-label="t('myLocation')"
+                  @click="centerOwnLocation"
+                >
+                  <LocateFixed />
+                </button>
+                <button
+                  type="button"
+                  :aria-label="`${t('members')} · ${t('map')}`"
+                  @click="fitOnlineMembers"
+                >
+                  <Users />
+                </button>
               </div>
               <div class="crewlink-map-legend">
                 <span><i class="is-live"></i>{{ t('status.live') }}</span>
@@ -866,10 +1199,24 @@ onBeforeUnmount(() => {
 
             <div class="crewlink-map-actions">
               <button type="button" @click="activeTab = 'group'">
-                <Users /><span><strong>{{ activeGroup.memberCount }} {{ t(activeGroup.memberCount === 1 ? 'member' : 'members') }}</strong><small>{{ t('openCrew') }}</small></span>
+                <Users /><span
+                  ><strong
+                    >{{ activeGroup.memberCount }}
+                    {{
+                      t(activeGroup.memberCount === 1 ? 'member' : 'members')
+                    }}</strong
+                  ><small>{{ t('openCrew') }}</small></span
+                >
               </button>
-              <button type="button" :disabled="!canPing" @click="openSheet('ping')">
-                <MapPin /><span><strong>{{ t('newPing') }}</strong><small>{{ t('shareLocation') }}</small></span>
+              <button
+                type="button"
+                :disabled="!canPing"
+                @click="openSheet('ping')"
+              >
+                <MapPin /><span
+                  ><strong>{{ t('newPing') }}</strong
+                  ><small>{{ t('shareLocation') }}</small></span
+                >
               </button>
             </div>
           </section>
@@ -879,18 +1226,54 @@ onBeforeUnmount(() => {
               <div class="crewlink-group-hero__signal"><Radio /></div>
               <small>{{ t('activeCrew') }}</small>
               <h1>{{ activeGroup.name }}</h1>
-              <p>{{ t(activeGroup.memberCount === 1 ? 'groupSummarySingle' : 'groupSummary', { online: String(onlineMembers.length), total: String(activeGroup.memberCount) }) }}</p>
+              <p>
+                {{
+                  t(
+                    activeGroup.memberCount === 1
+                      ? 'groupSummarySingle'
+                      : 'groupSummary',
+                    {
+                      online: String(onlineMembers.length),
+                      total: String(activeGroup.memberCount),
+                    },
+                  )
+                }}
+              </p>
               <div>
-                <k-badge class="crewlink-group-badge">{{ roleLabel(activeGroup.role) }}</k-badge>
-                <k-badge class="crewlink-group-badge">{{ t('private') }}</k-badge>
+                <k-badge class="crewlink-group-badge">{{
+                  roleLabel(activeGroup.role)
+                }}</k-badge>
+                <k-badge class="crewlink-group-badge">{{
+                  t('private')
+                }}</k-badge>
               </div>
             </div>
 
             <div class="crewlink-quick-actions">
-              <button v-if="canModerate" type="button" @click="loadNearby"><UserPlus /><span>{{ t('nearby') }}</span></button>
-              <button v-if="activeGroup.inviteCode" type="button" @click="copyInviteCode"><Copy /><span>{{ t('copyCode') }}</span></button>
-              <button v-if="activeGroup.inviteCode" type="button" @click="shareGroupInvite"><Share2 /><span>{{ t('shareInvite') }}</span></button>
-              <button v-if="canCoordinate" type="button" @click="openSheet('edit-group')"><Settings2 /><span>{{ t('manage') }}</span></button>
+              <button v-if="canModerate" type="button" @click="loadNearby">
+                <UserPlus /><span>{{ t('nearby') }}</span>
+              </button>
+              <button
+                v-if="activeGroup.inviteCode"
+                type="button"
+                @click="copyInviteCode"
+              >
+                <Copy /><span>{{ t('copyCode') }}</span>
+              </button>
+              <button
+                v-if="activeGroup.inviteCode"
+                type="button"
+                @click="shareGroupInvite"
+              >
+                <Share2 /><span>{{ t('shareInvite') }}</span>
+              </button>
+              <button
+                v-if="canCoordinate"
+                type="button"
+                @click="openSheet('edit-group')"
+              >
+                <Settings2 /><span>{{ t('manage') }}</span>
+              </button>
             </div>
 
             <template v-if="crew.invitations.length">
@@ -898,16 +1281,36 @@ onBeforeUnmount(() => {
               <div class="crewlink-invitations crewlink-invitations--inline">
                 <k-card v-for="invite in crew.invitations" :key="invite.id">
                   <div class="crewlink-invite-card">
-                    <i :style="{ background: colourValue(invite.colour) }"><Users /></i>
-                    <div><strong>{{ invite.groupName }}</strong><span>{{ t('invitedBy', { username: invite.inviterUsername }) }}</span></div>
-                    <button type="button" @click="respondInvitation(invite.id, false)"><X /></button>
-                    <button type="button" class="is-accept" @click="respondInvitation(invite.id, true)"><Check /></button>
+                    <i :style="{ background: colourValue(invite.colour) }"
+                      ><Users
+                    /></i>
+                    <div>
+                      <strong>{{ invite.groupName }}</strong
+                      ><span>{{
+                        t('invitedBy', { username: invite.inviterUsername })
+                      }}</span>
+                    </div>
+                    <button
+                      type="button"
+                      @click="respondInvitation(invite.id, false)"
+                    >
+                      <X />
+                    </button>
+                    <button
+                      type="button"
+                      class="is-accept"
+                      @click="respondInvitation(invite.id, true)"
+                    >
+                      <Check />
+                    </button>
                   </div>
                 </k-card>
               </div>
             </template>
 
-            <k-block-title class="crewlink-members-title">{{ t(activeGroup.memberCount === 1 ? 'member' : 'members') }}</k-block-title>
+            <k-block-title class="crewlink-members-title">{{
+              t(activeGroup.memberCount === 1 ? 'member' : 'members')
+            }}</k-block-title>
             <k-list inset strong class="crewlink-member-list">
               <k-list-item
                 v-for="member in activeGroup.members"
@@ -915,46 +1318,144 @@ onBeforeUnmount(() => {
                 :link="member.id !== crew.profile?.id && canModerate"
                 @click="selectMember(member)"
               >
-                <template #title><span class="crewlink-member-title">{{ member.username }}</span></template>
-                <template #subtitle><span class="crewlink-member-subtitle">{{ roleLabel(member.role) }} · {{ memberStatus(member) }}</span></template>
+                <template #title
+                  ><span class="crewlink-member-title">{{
+                    member.username
+                  }}</span></template
+                >
+                <template #subtitle
+                  ><span class="crewlink-member-subtitle"
+                    >{{ roleLabel(member.role) }} ·
+                    {{ memberStatus(member) }}</span
+                  ></template
+                >
                 <template #media>
-                  <span class="crewlink-avatar" :style="{ '--crew': activeColour }">{{ memberInitials(member) }}<i :class="{ 'is-online': member.online }"></i></span>
+                  <span
+                    class="crewlink-avatar"
+                    :style="{ '--crew': activeColour }"
+                  >
+                    <img
+                      v-if="member.avatarUrl"
+                      :src="member.avatarUrl"
+                      alt=""
+                    />
+                    <template v-else>{{ memberInitials(member) }}</template>
+                    <i :class="{ 'is-online': member.online }"></i>
+                  </span>
                 </template>
                 <template #after>
-                  <component :is="roleIcons[member.role]" :size="17" :class="`role-${member.role}`" />
+                  <component
+                    :is="roleIcons[member.role]"
+                    :size="17"
+                    :class="`role-${member.role}`"
+                  />
                 </template>
               </k-list-item>
             </k-list>
           </section>
 
-          <section v-show="activeTab === 'pings'" class="crewlink-scroll-tab crewlink-pings-tab">
+          <section
+            v-show="activeTab === 'pings'"
+            class="crewlink-scroll-tab crewlink-pings-tab"
+          >
             <div class="crewlink-section-header">
               <span><MapPin /></span>
-              <div><small>{{ t('liveCoordination') }}</small><h1>{{ t('pings') }}</h1></div>
-              <button v-if="canPing" type="button" @click="openSheet('ping')"><Plus /></button>
+              <div>
+                <small>{{ t('liveCoordination') }}</small>
+                <h1>{{ t('pings') }}</h1>
+              </div>
+              <button v-if="canPing" type="button" @click="openSheet('ping')">
+                <Plus />
+              </button>
             </div>
             <div v-if="activeGroup.pings.length" class="crewlink-ping-list">
-              <k-card v-for="ping in activeGroup.pings" :key="ping.id" :content-wrap="false">
+              <k-card
+                v-for="ping in activeGroup.pings"
+                :key="ping.id"
+                :content-wrap="false"
+              >
                 <article>
-                  <i :style="{ background: pingColours[ping.type] }"><component :is="pingIcons[ping.type]" /></i>
-                  <div><small>{{ t(`pingTypes.${ping.type}`) }} · {{ expiresIn(ping.expiresAt) }}</small><strong>{{ ping.label }}</strong><span>{{ t('sharedBy', { username: ping.creatorUsername }) }}</span></div>
-                  <button type="button" :aria-label="t('setRoute')" @click="routeTo(ping.coords)"><Navigation /></button>
-                  <button v-if="ping.creatorProfileId === crew.profile?.id || canModerate" type="button" :aria-label="phone.t('Common.delete')" @click="removePing(ping)"><Trash2 /></button>
+                  <i :style="{ background: pingColours[ping.type] }"
+                    ><component :is="pingIcons[ping.type]"
+                  /></i>
+                  <div>
+                    <small
+                      >{{ t(`pingTypes.${ping.type}`) }} ·
+                      {{ expiresIn(ping.expiresAt) }}</small
+                    ><strong>{{ ping.label }}</strong
+                    ><span>{{
+                      t('sharedBy', { username: ping.creatorUsername })
+                    }}</span>
+                  </div>
+                  <button
+                    type="button"
+                    :aria-label="t('setRoute')"
+                    @click="routeTo(ping.coords)"
+                  >
+                    <Navigation />
+                  </button>
+                  <button
+                    v-if="
+                      ping.creatorProfileId === crew.profile?.id || canModerate
+                    "
+                    type="button"
+                    :aria-label="phone.t('Common.delete')"
+                    @click="removePing(ping)"
+                  >
+                    <Trash2 />
+                  </button>
                 </article>
               </k-card>
             </div>
             <div v-else class="crewlink-empty-state">
-              <span><CircleDot /></span><h2>{{ t('noPings') }}</h2><p>{{ t('noPingsBody') }}</p>
+              <span><CircleDot /></span>
+              <h2>{{ t('noPings') }}</h2>
+              <p>{{ t('noPingsBody') }}</p>
             </div>
           </section>
 
           <section v-show="activeTab === 'profile'" class="crewlink-scroll-tab">
-            <div class="crewlink-profile-card" :style="{ '--crew': activeColour }">
-              <span>{{ crew.profile.username.slice(0, 2).toUpperCase() }}</span>
-              <div><small>{{ t('yourCrewLinkId') }}</small><h1>@{{ crew.profile.username }}</h1><p>{{ activeGroup.name }} · {{ roleLabel(activeGroup.role) }}</p></div>
+            <div
+              class="crewlink-profile-card"
+              :style="{ '--crew': activeColour }"
+            >
+              <span>
+                <img
+                  v-if="crew.profile.avatarUrl"
+                  :src="crew.profile.avatarUrl"
+                  alt=""
+                />
+                <template v-else>{{
+                  crew.profile.username.slice(0, 2).toUpperCase()
+                }}</template>
+              </span>
+              <div>
+                <small>{{ t('yourCrewLinkId') }}</small>
+                <h1>@{{ crew.profile.username }}</h1>
+                <p>
+                  {{ activeGroup.name }} · {{ roleLabel(activeGroup.role) }}
+                </p>
+              </div>
             </div>
 
             <k-list inset strong>
+              <k-list-item
+                :title="t('editProfile')"
+                :subtitle="t('editProfileBody')"
+                link
+                @click="editOwnProfile"
+              >
+                <template #media>
+                  <span class="crewlink-profile-row-avatar">
+                    <img
+                      v-if="crew.profile.avatarUrl"
+                      :src="crew.profile.avatarUrl"
+                      alt=""
+                    />
+                    <UserRound v-else :size="20" />
+                  </span>
+                </template>
+              </k-list-item>
               <k-list-item
                 link
                 link-component="button"
@@ -967,13 +1468,29 @@ onBeforeUnmount(() => {
 
             <k-block-title>{{ t('privacyVisibility') }}</k-block-title>
             <k-list inset strong>
-              <k-list-item :title="t('shareOnMap')" :subtitle="t('shareOnMapBody')">
+              <k-list-item
+                :title="t('shareOnMap')"
+                :subtitle="t('shareOnMapBody')"
+              >
                 <template #media><MapIcon :size="20" /></template>
-                <template #after><k-toggle :checked="crew.profile.mapVisible" :disabled="pendingVisibility !== null" @click.stop.prevent="updateVisibility('mapVisible')" /></template>
+                <template #after
+                  ><k-toggle
+                    :checked="crew.profile.mapVisible"
+                    :disabled="pendingVisibility !== null"
+                    @click.stop.prevent="updateVisibility('mapVisible')"
+                /></template>
               </k-list-item>
-              <k-list-item :title="t('overheadLabels')" :subtitle="t('overheadLabelsBody')">
+              <k-list-item
+                :title="t('overheadLabels')"
+                :subtitle="t('overheadLabelsBody')"
+              >
                 <template #media><Eye :size="20" /></template>
-                <template #after><k-toggle :checked="crew.profile.overheadVisible" :disabled="pendingVisibility !== null" @click.stop.prevent="updateVisibility('overheadVisible')" /></template>
+                <template #after
+                  ><k-toggle
+                    :checked="crew.profile.overheadVisible"
+                    :disabled="pendingVisibility !== null"
+                    @click.stop.prevent="updateVisibility('overheadVisible')"
+                /></template>
               </k-list-item>
             </k-list>
 
@@ -987,20 +1504,60 @@ onBeforeUnmount(() => {
                 link
                 @click="switchGroup(group.id)"
               >
-                <template #media><span class="crewlink-group-dot" :style="{ background: colourValue(group.colour) }"><Users /></span></template>
-                <template #after><Check v-if="group.id === activeGroup.id" :size="18" :style="{ color: colourValue(group.colour) }" /></template>
+                <template #media
+                  ><span
+                    class="crewlink-group-dot"
+                    :style="{ background: colourValue(group.colour) }"
+                    ><Users /></span
+                ></template>
+                <template #after
+                  ><Check
+                    v-if="group.id === activeGroup.id"
+                    :size="18"
+                    :style="{ color: colourValue(group.colour) }"
+                /></template>
               </k-list-item>
-              <k-list-item :title="t('createAnotherGroup')" link @click="openSheet('create-group')"><template #media><Plus :size="20" /></template></k-list-item>
-              <k-list-item :title="t('joinWithCode')" link @click="openSheet('join-group')"><template #media><UserPlus :size="20" /></template></k-list-item>
+              <k-list-item
+                :title="t('createAnotherGroup')"
+                link
+                @click="openSheet('create-group')"
+                ><template #media><Plus :size="20" /></template
+              ></k-list-item>
+              <k-list-item
+                :title="t('joinWithCode')"
+                link
+                @click="openSheet('join-group')"
+                ><template #media><UserPlus :size="20" /></template
+              ></k-list-item>
             </k-list>
 
             <k-block-title>{{ t('account') }}</k-block-title>
             <k-list inset strong>
-              <k-list-item :title="t('username')" :subtitle="`@${crew.profile.username}`" link @click="username = crew.profile!.username; formError = ''; sheet = 'member'">
-                <template #media><UserRound :size="20" /></template>
+              <k-list-item
+                :title="t('externalApi')"
+                :subtitle="t('externalApiBody')"
+                ><template #media><Sparkles :size="20" /></template
+              ></k-list-item>
+              <k-list-item
+                :title="phone.t('Common.signOut')"
+                class="crewlink-danger-row"
+                link
+                @click="logoutDialogOpen = true"
+              >
+                <template #media><LogOut :size="20" /></template>
               </k-list-item>
-              <k-list-item :title="t('externalApi')" :subtitle="t('externalApiBody')"><template #media><Sparkles :size="20" /></template></k-list-item>
-              <k-list-item :title="activeGroup.isOwner ? t('deleteGroup') : t('leaveGroup')" class="crewlink-danger-row" link @click="confirmAction = activeGroup.isOwner ? 'delete-group' : 'leave-group'">
+              <k-list-item
+                :title="
+                  activeGroup.isOwner ? t('deleteGroup') : t('leaveGroup')
+                "
+                class="crewlink-danger-row"
+                link
+                @click="
+                  confirmAction = activeGroup.isOwner
+                    ? 'delete-group'
+                    : 'leave-group'
+                "
+              >
                 <template #media><Trash2 :size="20" /></template>
               </k-list-item>
             </k-list>
@@ -1018,51 +1575,169 @@ onBeforeUnmount(() => {
         :aria-label="t('navigation')"
       >
         <k-toolbar-pane class="crewlink-tabbar__pane">
-          <k-tabbar-link component="button" :active="activeTab === 'map'" :link-props="{ type: 'button' }" @click="activeTab = 'map'"><template #label>{{ t('map') }}</template><template #icon><k-icon><MapIcon /></k-icon></template></k-tabbar-link>
-          <k-tabbar-link component="button" :active="activeTab === 'group'" :link-props="{ type: 'button' }" @click="activeTab = 'group'"><template #label>{{ t('crew') }}</template><template #icon><k-icon><Users /></k-icon></template></k-tabbar-link>
-          <k-tabbar-link component="button" :active="activeTab === 'pings'" :link-props="{ type: 'button' }" @click="activeTab = 'pings'">
+          <k-tabbar-link
+            component="button"
+            :active="activeTab === 'map'"
+            :link-props="{ type: 'button' }"
+            @click="activeTab = 'map'"
+            ><template #label>{{ t('map') }}</template
+            ><template #icon
+              ><k-icon><MapIcon /></k-icon></template
+          ></k-tabbar-link>
+          <k-tabbar-link
+            component="button"
+            :active="activeTab === 'group'"
+            :link-props="{ type: 'button' }"
+            @click="activeTab = 'group'"
+            ><template #label>{{ t('crew') }}</template
+            ><template #icon
+              ><k-icon><Users /></k-icon></template
+          ></k-tabbar-link>
+          <k-tabbar-link
+            component="button"
+            :active="activeTab === 'pings'"
+            :link-props="{ type: 'button' }"
+            @click="activeTab = 'pings'"
+          >
             <template #label>{{ t('pings') }}</template>
             <template #icon>
               <k-icon>
                 <span class="crewlink-pings-icon">
                   <MapPin />
-                  <k-badge v-if="activeGroup.pings.length" small class="crewlink-pings-badge">{{ activeGroup.pings.length }}</k-badge>
+                  <k-badge
+                    v-if="activeGroup.pings.length"
+                    small
+                    class="crewlink-pings-badge"
+                    >{{ activeGroup.pings.length }}</k-badge
+                  >
                 </span>
               </k-icon>
             </template>
           </k-tabbar-link>
-          <k-tabbar-link component="button" :active="activeTab === 'profile'" :link-props="{ type: 'button' }" @click="activeTab = 'profile'"><template #label>{{ t('profile') }}</template><template #icon><k-icon><UserRound /></k-icon></template></k-tabbar-link>
+          <k-tabbar-link
+            component="button"
+            :active="activeTab === 'profile'"
+            :link-props="{ type: 'button' }"
+            @click="activeTab = 'profile'"
+            ><template #label>{{ t('profile') }}</template
+            ><template #icon
+              ><k-icon><UserRound /></k-icon></template
+          ></k-tabbar-link>
         </k-toolbar-pane>
       </k-tabbar>
     </template>
 
-    <k-sheet :opened="Boolean(sheet)" class="crewlink-sheet" @backdropclick="closeSheet">
-      <section v-if="sheet" class="crewlink-sheet__content" role="dialog" aria-modal="true">
-        <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" :aria-label="phone.t('Common.close')" @click="closeSheet"><X /></k-link>
+    <k-sheet
+      :opened="Boolean(sheet)"
+      class="crewlink-sheet"
+      @backdropclick="closeSheet"
+    >
+      <section
+        v-if="sheet"
+        class="crewlink-sheet__content"
+        role="dialog"
+        aria-modal="true"
+      >
+        <k-link
+          component="button"
+          class="crewlink-sheet__close"
+          :link-props="{ type: 'button' }"
+          :aria-label="phone.t('Common.close')"
+          @click="closeSheet"
+          ><X
+        /></k-link>
 
         <template v-if="sheet === 'create-group'">
-          <span class="crewlink-sheet__icon"><Users /></span><h2>{{ t('createGroup') }}</h2><p>{{ t('createGroupBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-group-name" :label="t('groupName')" :placeholder="t('groupNamePlaceholder')" :value="groupName" maxlength="32" outline @input="updateValue('groupName', $event)" /></k-list>
+          <span class="crewlink-sheet__icon"><Users /></span>
+          <h2>{{ t('createGroup') }}</h2>
+          <p>{{ t('createGroupBody') }}</p>
+          <k-list inset strong class="crewlink-form-list"
+            ><k-list-input
+              input-id="crewlink-group-name"
+              :label="t('groupName')"
+              :placeholder="t('groupNamePlaceholder')"
+              :value="groupName"
+              maxlength="32"
+              outline
+              @input="updateValue('groupName', $event)"
+          /></k-list>
           <span class="crewlink-field-label">{{ t('groupColour') }}</span>
-          <div class="crewlink-colours" role="radiogroup"><button v-for="colour in colours" :key="colour.id" type="button" role="radio" :aria-checked="groupColour === colour.id" :class="{ 'is-active': groupColour === colour.id }" :style="{ background: colour.value }" @click="groupColour = colour.id"><Check /></button></div>
+          <div class="crewlink-colours" role="radiogroup">
+            <button
+              v-for="colour in colours"
+              :key="colour.id"
+              type="button"
+              role="radio"
+              :aria-checked="groupColour === colour.id"
+              :class="{ 'is-active': groupColour === colour.id }"
+              :style="{ background: colour.value }"
+              @click="groupColour = colour.id"
+            >
+              <Check />
+            </button>
+          </div>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button large rounded :disabled="crew.isLoading" @click="createGroup">{{ t('createCrew') }}</k-button>
+          <k-button
+            large
+            rounded
+            :disabled="crew.isLoading"
+            @click="createGroup"
+            >{{ t('createCrew') }}</k-button
+          >
         </template>
 
         <template v-else-if="sheet === 'join-group'">
-          <span class="crewlink-sheet__icon"><UserPlus /></span><h2>{{ t('joinWithCode') }}</h2><p>{{ t('joinWithCodeBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-invite-code" :label="t('inviteCode')" :placeholder="t('inviteCodePlaceholder')" :value="inviteCode" maxlength="8" outline @input="updateValue('inviteCode', $event)" @keydown.enter="joinGroup" /></k-list>
+          <span class="crewlink-sheet__icon"><UserPlus /></span>
+          <h2>{{ t('joinWithCode') }}</h2>
+          <p>{{ t('joinWithCodeBody') }}</p>
+          <k-list inset strong class="crewlink-form-list"
+            ><k-list-input
+              input-id="crewlink-invite-code"
+              :label="t('inviteCode')"
+              :placeholder="t('inviteCodePlaceholder')"
+              :value="inviteCode"
+              maxlength="8"
+              outline
+              @input="updateValue('inviteCode', $event)"
+              @keydown.enter="joinGroup"
+          /></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button large rounded :disabled="crew.isLoading" @click="joinGroup">{{ t('joinCrew') }}</k-button>
+          <k-button
+            large
+            rounded
+            :disabled="crew.isLoading"
+            @click="joinGroup"
+            >{{ t('joinCrew') }}</k-button
+          >
           <template v-if="crew.invitations.length">
-            <k-block-title class="crewlink-join-invitations-title">{{ t('pendingInvitations') }}</k-block-title>
+            <k-block-title class="crewlink-join-invitations-title">{{
+              t('pendingInvitations')
+            }}</k-block-title>
             <div class="crewlink-invitations crewlink-invitations--join">
               <k-card v-for="invite in crew.invitations" :key="invite.id">
                 <div class="crewlink-invite-card">
-                  <i :style="{ background: colourValue(invite.colour) }"><Users /></i>
-                  <div><strong>{{ invite.groupName }}</strong><span>{{ t('invitedBy', { username: invite.inviterUsername }) }}</span></div>
-                  <button type="button" @click="respondInvitation(invite.id, false)"><X /></button>
-                  <button type="button" class="is-accept" @click="respondInvitation(invite.id, true)"><Check /></button>
+                  <i :style="{ background: colourValue(invite.colour) }"
+                    ><Users
+                  /></i>
+                  <div>
+                    <strong>{{ invite.groupName }}</strong
+                    ><span>{{
+                      t('invitedBy', { username: invite.inviterUsername })
+                    }}</span>
+                  </div>
+                  <button
+                    type="button"
+                    @click="respondInvitation(invite.id, false)"
+                  >
+                    <X />
+                  </button>
+                  <button
+                    type="button"
+                    class="is-accept"
+                    @click="respondInvitation(invite.id, true)"
+                  >
+                    <Check />
+                  </button>
                 </div>
               </k-card>
             </div>
@@ -1070,9 +1745,22 @@ onBeforeUnmount(() => {
         </template>
 
         <template v-else-if="sheet === 'nearby'">
-          <span class="crewlink-sheet__icon"><Radio /></span><h2>{{ t('peopleNearby') }}</h2><p>{{ t('peopleNearbyBody', { distance: String(crew.limits?.nearbyDistance ?? 5) }) }}</p>
+          <span class="crewlink-sheet__icon"><Radio /></span>
+          <h2>{{ t('peopleNearby') }}</h2>
+          <p>
+            {{
+              t('peopleNearbyBody', {
+                distance: String(crew.limits?.nearbyDistance ?? 5),
+              })
+            }}
+          </p>
           <k-preloader v-if="crew.isLoading" />
-          <k-list v-else-if="nearbyPlayers.length" inset strong class="crewlink-nearby-list">
+          <k-list
+            v-else-if="nearbyPlayers.length"
+            inset
+            strong
+            class="crewlink-nearby-list"
+          >
             <k-list-item
               v-for="player in nearbyPlayers"
               :key="player.source"
@@ -1084,39 +1772,176 @@ onBeforeUnmount(() => {
               :title="player.username"
               :subtitle="t('metersAway', { distance: String(player.distance) })"
             >
-              <template #media><span class="crewlink-avatar" :style="{ '--crew': activeColour }">{{ player.username.slice(0, 2).toUpperCase() }}</span></template>
-              <template #after><k-button small rounded class="crewlink-nearby-invite" @click="inviteNearby(player)">{{ t('invite') }}</k-button></template>
+              <template #media
+                ><span
+                  class="crewlink-avatar"
+                  :style="{ '--crew': activeColour }"
+                  >{{ player.username.slice(0, 2).toUpperCase() }}</span
+                ></template
+              >
+              <template #after
+                ><k-button
+                  small
+                  rounded
+                  class="crewlink-nearby-invite"
+                  @click="inviteNearby(player)"
+                  >{{ t('invite') }}</k-button
+                ></template
+              >
             </k-list-item>
           </k-list>
-          <div v-else class="crewlink-sheet-empty"><EyeOff /><strong>{{ t('nobodyNearby') }}</strong><span>{{ t('nobodyNearbyBody') }}</span></div>
+          <div v-else class="crewlink-sheet-empty">
+            <EyeOff /><strong>{{ t('nobodyNearby') }}</strong
+            ><span>{{ t('nobodyNearbyBody') }}</span>
+          </div>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button large rounded outline class="crewlink-nearby-rescan" @click="loadNearby"><RefreshCw />{{ t('scanAgain') }}</k-button>
+          <k-button
+            large
+            rounded
+            outline
+            class="crewlink-nearby-rescan"
+            @click="loadNearby"
+            ><RefreshCw />{{ t('scanAgain') }}</k-button
+          >
         </template>
 
         <template v-else-if="sheet === 'ping'">
-          <span class="crewlink-sheet__icon"><MapPin /></span><h2 class="crewlink-ping-title">{{ t('newPing') }}</h2><p class="crewlink-ping-description">{{ t('newPingBody') }}</p>
-          <div class="crewlink-ping-types"><button v-for="(_, type) in pingIcons" :key="type" type="button" :class="{ 'is-active': pingType === type }" :style="{ '--ping': pingColours[type], '--ping-glow': `${pingColours[type]}2e` }" @click="pingType = type"><component :is="pingIcons[type]" /><span>{{ t(`pingTypes.${type}`) }}</span></button></div>
-          <k-list inset strong class="crewlink-form-list crewlink-ping-form"><k-list-input input-id="crewlink-ping-label" input-class="crewlink-ping-label-input" :label="t('pingLabel')" :placeholder="t('pingLabelPlaceholder')" :value="pingLabel" maxlength="48" outline @input="updateValue('pingLabel', $event)" /></k-list>
-          <k-list inset strong class="crewlink-ping-location-list"><k-list-item><template #media><Crosshair :size="22" /></template><template #title><span class="crewlink-ping-location-copy"><strong>{{ t('placeOnMap') }}</strong><small>{{ t('placeOnMapBody') }}</small></span></template><template #after><k-toggle :checked="pingAtMapCenter" @click.stop.prevent="togglePingAtMapCenter" /></template></k-list-item></k-list>
+          <span class="crewlink-sheet__icon"><MapPin /></span>
+          <h2 class="crewlink-ping-title">{{ t('newPing') }}</h2>
+          <p class="crewlink-ping-description">{{ t('newPingBody') }}</p>
+          <div class="crewlink-ping-types">
+            <button
+              v-for="(_, type) in pingIcons"
+              :key="type"
+              type="button"
+              :class="{ 'is-active': pingType === type }"
+              :style="{
+                '--ping': pingColours[type],
+                '--ping-glow': `${pingColours[type]}2e`,
+              }"
+              @click="pingType = type"
+            >
+              <component :is="pingIcons[type]" /><span>{{
+                t(`pingTypes.${type}`)
+              }}</span>
+            </button>
+          </div>
+          <k-list inset strong class="crewlink-form-list crewlink-ping-form"
+            ><k-list-input
+              input-id="crewlink-ping-label"
+              input-class="crewlink-ping-label-input"
+              :label="t('pingLabel')"
+              :placeholder="t('pingLabelPlaceholder')"
+              :value="pingLabel"
+              maxlength="48"
+              outline
+              @input="updateValue('pingLabel', $event)"
+          /></k-list>
+          <k-list inset strong class="crewlink-ping-location-list"
+            ><k-list-item
+              ><template #media><Crosshair :size="22" /></template
+              ><template #title
+                ><span class="crewlink-ping-location-copy"
+                  ><strong>{{ t('placeOnMap') }}</strong
+                  ><small>{{ t('placeOnMapBody') }}</small></span
+                ></template
+              ><template #after
+                ><k-toggle
+                  :checked="pingAtMapCenter"
+                  @click.stop.prevent="
+                    togglePingAtMapCenter
+                  " /></template></k-list-item
+          ></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button large rounded class="crewlink-share-ping" :disabled="crew.isLoading" @click="createPing"><Flag />{{ t('sharePing') }}</k-button>
+          <k-button
+            large
+            rounded
+            class="crewlink-share-ping"
+            :disabled="crew.isLoading"
+            @click="createPing"
+            ><Flag />{{ t('sharePing') }}</k-button
+          >
         </template>
 
         <template v-else-if="sheet === 'edit-group' && activeGroup">
-          <span class="crewlink-sheet__icon"><Settings2 /></span><h2>{{ t('manageCrew') }}</h2><p>{{ t('manageCrewBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-name" :label="t('groupName')" :value="groupName" maxlength="32" outline @input="updateValue('groupName', $event)" /></k-list>
-          <span class="crewlink-field-label">{{ t('groupColour') }}</span><div class="crewlink-colours"><button v-for="colour in colours" :key="colour.id" type="button" :class="{ 'is-active': groupColour === colour.id }" :style="{ background: colour.value }" @click="groupColour = colour.id"><Check /></button></div>
+          <span class="crewlink-sheet__icon"><Settings2 /></span>
+          <h2>{{ t('manageCrew') }}</h2>
+          <p>{{ t('manageCrewBody') }}</p>
+          <k-list inset strong class="crewlink-form-list"
+            ><k-list-input
+              input-id="crewlink-edit-name"
+              :label="t('groupName')"
+              :value="groupName"
+              maxlength="32"
+              outline
+              @input="updateValue('groupName', $event)"
+          /></k-list>
+          <span class="crewlink-field-label">{{ t('groupColour') }}</span>
+          <div class="crewlink-colours">
+            <button
+              v-for="colour in colours"
+              :key="colour.id"
+              type="button"
+              :class="{ 'is-active': groupColour === colour.id }"
+              :style="{ background: colour.value }"
+              @click="groupColour = colour.id"
+            >
+              <Check />
+            </button>
+          </div>
           <k-list inset strong>
-            <k-list-item :title="t('memberPings')" :subtitle="t('memberPingsBody')"><template #after><k-toggle :checked="activeGroup.allowMemberPings" :disabled="pendingGroupSetting !== null" @click.stop.prevent="toggleGroupSetting('allowMemberPings')" /></template></k-list-item>
-            <k-list-item :title="t('allowOverhead')" :subtitle="t('allowOverheadBody')"><template #after><k-toggle :checked="activeGroup.overheadAllowed" :disabled="pendingGroupSetting !== null" @click.stop.prevent="toggleGroupSetting('overheadAllowed')" /></template></k-list-item>
+            <k-list-item
+              :title="t('memberPings')"
+              :subtitle="t('memberPingsBody')"
+              ><template #after
+                ><k-toggle
+                  :checked="activeGroup.allowMemberPings"
+                  :disabled="pendingGroupSetting !== null"
+                  @click.stop.prevent="
+                    toggleGroupSetting('allowMemberPings')
+                  " /></template
+            ></k-list-item>
+            <k-list-item
+              :title="t('allowOverhead')"
+              :subtitle="t('allowOverheadBody')"
+              ><template #after
+                ><k-toggle
+                  :checked="activeGroup.overheadAllowed"
+                  :disabled="pendingGroupSetting !== null"
+                  @click.stop.prevent="
+                    toggleGroupSetting('overheadAllowed')
+                  " /></template
+            ></k-list-item>
           </k-list>
-          <k-card v-if="activeGroup.inviteCode"><div class="crewlink-code-card"><small>{{ t('inviteCode') }}</small><strong>{{ activeGroup.inviteCode }}</strong><button type="button" @click="copyInviteCode"><Copy /></button><button type="button" @click="rotateInviteCode"><RefreshCw /></button></div></k-card>
-          <p v-if="formError" class="crewlink-error">{{ formError }}</p><k-button large rounded @click="saveGroup">{{ phone.t('Common.save') }}</k-button>
+          <k-card v-if="activeGroup.inviteCode"
+            ><div class="crewlink-code-card">
+              <small>{{ t('inviteCode') }}</small
+              ><strong>{{ activeGroup.inviteCode }}</strong
+              ><button type="button" @click="copyInviteCode"><Copy /></button
+              ><button type="button" @click="rotateInviteCode">
+                <RefreshCw />
+              </button></div
+          ></k-card>
+          <p v-if="formError" class="crewlink-error">{{ formError }}</p>
+          <k-button large rounded @click="saveGroup">{{
+            phone.t('Common.save')
+          }}</k-button>
         </template>
 
         <template v-else-if="sheet === 'member' && selectedMember">
-          <span class="crewlink-sheet__avatar" :style="{ '--crew': activeColour }">{{ memberInitials(selectedMember) }}</span><h2>@{{ selectedMember.username }}</h2><p>{{ roleLabel(selectedMember.role) }} · {{ memberStatus(selectedMember) }}</p>
-          <k-block-title class="crewlink-role-title">{{ t('assignRole') }}</k-block-title>
+          <span
+            class="crewlink-sheet__avatar"
+            :style="{ '--crew': activeColour }"
+            >{{ memberInitials(selectedMember) }}</span
+          >
+          <h2>@{{ selectedMember.username }}</h2>
+          <p>
+            {{ roleLabel(selectedMember.role) }} ·
+            {{ memberStatus(selectedMember) }}
+          </p>
+          <k-block-title class="crewlink-role-title">{{
+            t('assignRole')
+          }}</k-block-title>
           <k-list inset strong class="crewlink-role-list">
             <k-list-item
               v-for="role in editableRoles"
@@ -1131,100 +1956,1530 @@ onBeforeUnmount(() => {
               :link="role !== selectedMember.role"
               @click="setMemberRole(role)"
             >
-              <template #media><component :is="roleIcons[role]" :size="20" /></template>
-              <template #after><Check v-if="role === selectedMember.role" :size="18" /></template>
+              <template #media
+                ><component :is="roleIcons[role]" :size="20"
+              /></template>
+              <template #after
+                ><Check v-if="role === selectedMember.role" :size="18"
+              /></template>
             </k-list-item>
           </k-list>
           <div class="crewlink-member-actions">
-            <k-button v-if="activeGroup?.isOwner" large rounded outline @click="confirmAction = 'transfer-owner'"><Crown />{{ t('transferOwnership') }}</k-button>
-            <k-button large rounded tonal class="crewlink-danger-button" @click="confirmAction = 'remove-member'"><Trash2 />{{ t('removeMember') }}</k-button>
+            <k-button
+              v-if="activeGroup?.isOwner"
+              large
+              rounded
+              outline
+              @click="confirmAction = 'transfer-owner'"
+              ><Crown />{{ t('transferOwnership') }}</k-button
+            >
+            <k-button
+              large
+              rounded
+              tonal
+              class="crewlink-danger-button"
+              @click="confirmAction = 'remove-member'"
+              ><Trash2 />{{ t('removeMember') }}</k-button
+            >
           </div>
         </template>
 
-        <template v-else-if="sheet === 'member' && !selectedMember && crew.profile">
-          <span class="crewlink-sheet__icon"><UserRound /></span><h2>{{ t('editUsername') }}</h2><p>{{ t('editUsernameBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-username" :label="t('username')" :value="username" maxlength="20" outline @input="updateValue('username', $event)" @keydown.enter="saveProfile" /></k-list>
-          <p v-if="formError" class="crewlink-error">{{ formError }}</p><k-button large rounded @click="saveProfile">{{ phone.t('Common.save') }}</k-button>
+        <template v-else-if="sheet === 'edit-profile' && crew.profile">
+          <div class="crewlink-profile-editor__avatar">
+            <img
+              v-if="selectedProfilePhoto?.url"
+              :src="selectedProfilePhoto.url"
+              alt=""
+            />
+            <img
+              v-else-if="crew.profile.avatarUrl && !profileAvatarRemoved"
+              :src="crew.profile.avatarUrl"
+              alt=""
+            />
+            <UserRound v-else />
+          </div>
+          <h2>{{ t('editProfile') }}</h2>
+          <p>{{ t('editProfileBody') }}</p>
+          <div class="crewlink-profile-editor__media-actions">
+            <k-button rounded outline @click="openProfileMedia('photos')">
+              <Images :size="16" />{{ t('gallery') }}
+            </k-button>
+            <k-button rounded outline @click="openProfileMedia('camera')">
+              <Camera :size="16" />{{ t('camera') }}
+            </k-button>
+          </div>
+          <k-button
+            v-if="
+              selectedProfilePhoto ||
+              (crew.profile.avatarUrl && !profileAvatarRemoved)
+            "
+            rounded
+            tonal
+            class="crewlink-profile-editor__remove"
+            @click="removeProfilePhoto"
+          >
+            <Trash2 :size="15" />{{ t('removeProfilePhoto') }}
+          </k-button>
+          <k-list inset strong class="crewlink-form-list"
+            ><k-list-input
+              input-id="crewlink-edit-username"
+              :label="t('username')"
+              :value="username"
+              maxlength="20"
+              outline
+              @input="updateValue('username', $event)"
+              @keydown.enter="saveProfile"
+          /></k-list>
+          <p v-if="formError" class="crewlink-error">{{ formError }}</p>
+          <k-button
+            large
+            rounded
+            :disabled="crew.isLoading"
+            @click="saveProfile"
+          >
+            <k-preloader v-if="crew.isLoading" />
+            <template v-else>{{ phone.t('Common.save') }}</template>
+          </k-button>
         </template>
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedMember && !sheet)" class="crewlink-sheet" @backdropclick="selectedMember = null">
-      <section v-if="selectedMember" class="crewlink-sheet__content crewlink-member-preview">
-        <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedMember = null"><X /></k-link>
-        <span class="crewlink-sheet__avatar" :style="{ '--crew': activeColour }">{{ memberInitials(selectedMember) }}</span><h2>@{{ selectedMember.username }}</h2><p>{{ roleLabel(selectedMember.role) }} · {{ memberStatus(selectedMember) }}</p>
-        <k-button v-if="selectedMember.coords" large rounded @click="routeTo(selectedMember.coords); selectedMember = null"><Route />{{ t('setRoute') }}</k-button>
+    <k-sheet
+      :opened="Boolean(selectedMember && !sheet)"
+      class="crewlink-sheet"
+      @backdropclick="selectedMember = null"
+    >
+      <section
+        v-if="selectedMember"
+        class="crewlink-sheet__content crewlink-member-preview"
+      >
+        <k-link
+          component="button"
+          class="crewlink-sheet__close"
+          :link-props="{ type: 'button' }"
+          @click="selectedMember = null"
+          ><X
+        /></k-link>
+        <span
+          class="crewlink-sheet__avatar"
+          :style="{ '--crew': activeColour }"
+        >
+          <img
+            v-if="selectedMember.avatarUrl"
+            :src="selectedMember.avatarUrl"
+            alt=""
+          />
+          <template v-else>{{ memberInitials(selectedMember) }}</template>
+        </span>
+        <h2>@{{ selectedMember.username }}</h2>
+        <p>
+          {{ roleLabel(selectedMember.role) }} ·
+          {{ memberStatus(selectedMember) }}
+        </p>
+        <k-button
+          v-if="selectedMember.coords"
+          large
+          rounded
+          @click="routeToSelectedMember"
+          ><Route />{{ t('setRoute') }}</k-button
+        >
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedPing)" class="crewlink-sheet" @backdropclick="selectedPing = null">
-      <section v-if="selectedPing" class="crewlink-sheet__content crewlink-member-preview">
-        <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedPing = null"><X /></k-link>
-        <span class="crewlink-sheet__icon" :style="{ background: pingColours[selectedPing.type] }"><component :is="pingIcons[selectedPing.type]" /></span><small>{{ t(`pingTypes.${selectedPing.type}`) }}</small><h2>{{ selectedPing.label }}</h2><p>{{ t('sharedBy', { username: selectedPing.creatorUsername }) }} · {{ expiresIn(selectedPing.expiresAt) }}</p>
-        <k-button large rounded @click="routeTo(selectedPing.coords); selectedPing = null"><Navigation />{{ t('setRoute') }}</k-button>
+    <k-sheet
+      :opened="Boolean(selectedPing)"
+      class="crewlink-sheet"
+      @backdropclick="selectedPing = null"
+    >
+      <section
+        v-if="selectedPing"
+        class="crewlink-sheet__content crewlink-member-preview"
+      >
+        <k-link
+          component="button"
+          class="crewlink-sheet__close"
+          :link-props="{ type: 'button' }"
+          @click="selectedPing = null"
+          ><X
+        /></k-link>
+        <span
+          class="crewlink-sheet__icon"
+          :style="{ background: pingColours[selectedPing.type] }"
+          ><component :is="pingIcons[selectedPing.type]" /></span
+        ><small>{{ t(`pingTypes.${selectedPing.type}`) }}</small>
+        <h2>{{ selectedPing.label }}</h2>
+        <p>
+          {{ t('sharedBy', { username: selectedPing.creatorUsername }) }} ·
+          {{ expiresIn(selectedPing.expiresAt) }}
+        </p>
+        <k-button large rounded @click="routeToSelectedPing"
+          ><Navigation />{{ t('setRoute') }}</k-button
+        >
       </section>
     </k-sheet>
 
-    <k-dialog :opened="Boolean(confirmAction)" @backdropclick="cancelConfirmation">
+    <AccountLogoutDialog
+      v-model:opened="logoutDialogOpen"
+      app-id="crewlink"
+      :app-name="t('name')"
+      @logged-out="activeTab = 'map'"
+    />
+
+    <k-dialog
+      :opened="Boolean(confirmAction)"
+      @backdropclick="cancelConfirmation"
+    >
       <template #title>{{ t(`confirm.${confirmAction}.title`) }}</template>
       <p>{{ t(`confirm.${confirmAction}.body`) }}</p>
-      <template #buttons><k-dialog-button class="crewlink-dialog-cancel" type="button" :aria-label="phone.t('Common.cancel')" @click="cancelConfirmation">{{ phone.t('Common.cancel') }}</k-dialog-button><k-dialog-button strong type="button" @click="performConfirmedAction">{{ t('confirmAction') }}</k-dialog-button></template>
+      <template #buttons
+        ><k-dialog-button
+          class="crewlink-dialog-cancel"
+          type="button"
+          :aria-label="phone.t('Common.cancel')"
+          @click="cancelConfirmation"
+          >{{ phone.t('Common.cancel') }}</k-dialog-button
+        ><k-dialog-button
+          strong
+          type="button"
+          @click="performConfirmedAction"
+          >{{ t('confirmAction') }}</k-dialog-button
+        ></template
+      >
     </k-dialog>
 
-    <k-toast :opened="Boolean(toastText)" position="center">{{ toastText }}</k-toast>
+    <k-toast :opened="Boolean(toastText)" position="center">{{
+      toastText
+    }}</k-toast>
   </k-page>
 </template>
 
 <style scoped>
-.crewlink { --cl-bg: #f2f6fa; --cl-surface: rgba(255,255,255,.84); --cl-text: #102034; --cl-muted: #6e7c8d; --k-safe-area-top:46px; --k-safe-area-bottom:25px; position:relative; height:100%; background: var(--cl-bg); color: var(--cl-text); overflow: hidden; }
-.crewlink--dark { --cl-bg: #071018; --cl-surface: rgba(17,29,40,.88); --cl-text: #f3f8fb; --cl-muted: #8fa2b3; }
-.crewlink :deep(.page-content) { background: transparent; }
-.crewlink-navbar { --k-navbar-bg-color: rgba(248,252,255,.78); position:absolute; z-index:20; inset:0 0 auto; backdrop-filter: blur(20px) saturate(1.3); }
-.crewlink--dark .crewlink-navbar { --k-navbar-bg-color: rgba(7,16,24,.8); }
-.crewlink-content { position:absolute; inset:94px 0 calc(80px + var(--k-safe-area-bottom)); overflow:hidden; }
-.crewlink-content--empty { inset:var(--k-safe-area-top) 0 var(--k-safe-area-bottom); }
-.crewlink-scroll-tab { height:100%; overflow-y:auto; padding:14px 11px 34px; }
-.crewlink-loading,.crewlink-onboarding { height:100%; padding:52px 30px 32px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; background:radial-gradient(circle at 50% 32%,rgba(39,217,237,.18),transparent 36%); }
-.crewlink-logo { width:78px; height:78px; border-radius:26px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,#28dbe9,#1d88ff 58%,#7050ef); box-shadow:0 18px 42px rgba(20,137,213,.3); }
-.crewlink-logo svg { width:38px; height:38px; }
-.crewlink-onboarding small { color:#168cbb; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
-.crewlink-onboarding h1 { margin:0; font-size:27px; line-height:1.05; }
-.crewlink-onboarding p { margin:0 0 10px; color:var(--cl-muted); font-size:13px; line-height:1.5; }
-.crewlink-onboarding :deep(.button) { width:100%; }
-.crewlink-orbits { width:170px; height:170px; position:relative; margin-bottom:4px; }
-.crewlink-orbits i { position:absolute; inset:8px; border:1px solid rgba(39,217,237,.22); border-radius:50%; animation:cl-pulse 2.8s infinite; }
-.crewlink-orbits i:nth-child(2){inset:31px;animation-delay:.3s}.crewlink-orbits i:nth-child(3){inset:55px;animation-delay:.6s}
-.crewlink-orbits span { position:absolute; inset:69px; border-radius:18px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,#2ce4ed,#257cff); box-shadow:0 10px 35px rgba(31,162,228,.4); }
-.crewlink-form-list { width:100%; margin:4px 0; }
-.crewlink-privacy { display:flex; gap:5px; align-items:center; color:var(--cl-muted)!important; letter-spacing:0!important; text-transform:none!important; font-weight:500!important; }
-.crewlink-privacy svg { width:14px; }
-.crewlink-group-gate { height:100%; padding:24px; display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:12px; background:radial-gradient(circle at 50% 48%,rgba(39,217,237,.16),transparent 48%); }
-.crewlink-group-gate button { min-width:0; aspect-ratio:1; padding:16px 8px; border:1px solid rgba(39,160,215,.14); border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--cl-text); background:var(--cl-surface); box-shadow:0 14px 32px rgba(11,43,65,.1); }
-.crewlink-group-gate button span { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,#2bdde9,#2e7eff); box-shadow:0 10px 24px rgba(30,150,220,.28); }
-.crewlink-group-gate button:last-child span { background:linear-gradient(145deg,#8b5cf6,#387eff); }
-.crewlink-group-gate button svg { width:25px; height:25px; }
-.crewlink-group-gate button strong { font-size:12px; line-height:1.25; }
-.crewlink-invitations { width:100%; margin-top:18px; text-align:left; }
-.crewlink-join-invitations-title{margin:18px 0 8px!important;text-align:left}.crewlink-invitations--join{display:grid;gap:7px;margin:0}.crewlink-invitations--join :deep(.k-card){margin:0}
-.crewlink-invite-card { display:grid; grid-template-columns:38px 1fr 31px 31px; gap:7px; align-items:center; }
-.crewlink-invite-card>i { width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:white}.crewlink-invite-card>i svg{width:19px}.crewlink-invite-card div{display:flex;flex-direction:column}.crewlink-invite-card div span{font-size:10px;color:var(--cl-muted)}.crewlink-invite-card button{width:29px;height:29px;border:0;border-radius:10px;display:grid;place-items:center;color:#e94662;background:rgba(255,77,103,.12)}.crewlink-invite-card button.is-accept{color:#0aa66d;background:rgba(46,204,126,.14)}.crewlink-invite-card button svg{width:15px}
-.crewlink-map-tab { height:100%; display:flex; flex-direction:column; background:#09131c; }
-.crewlink-map-summary { height:64px; padding:8px 13px; display:flex; align-items:center; justify-content:space-between; color:white; background:linear-gradient(90deg,rgba(6,24,35,.96),rgba(15,41,56,.95)); }
-.crewlink-map-summary>div:first-child{display:grid;grid-template-columns:10px auto auto;align-items:baseline;gap:7px}.crewlink-map-summary strong{font-size:26px;line-height:30px}.crewlink-map-summary small{font-size:14px;font-weight:600;line-height:18px;color:#c0ced8;white-space:nowrap}.crewlink-live-dot{width:9px;height:9px;border-radius:50%;background:#35dc80;box-shadow:0 0 0 4px rgba(53,220,128,.16)}
-.crewlink-online-faces{display:flex;align-items:center}.crewlink-online-faces span{width:27px;height:27px;margin-left:-6px;border:2px solid;border-radius:50%;display:grid;place-items:center;background:#203347;color:white;font-size:8px;font-weight:800}.crewlink-online-faces i{font-size:9px;margin-left:5px;color:#9cb0bf}
-.crewlink-map { position:relative; flex:1; overflow:hidden; touch-action:none; background:#d8e0e4; cursor:grab; }.crewlink-map:active{cursor:grabbing}
-.crewlink-map__canvas{position:absolute;left:50%;top:50%;transform-origin:center;will-change:transform}.crewlink-map__mainland,.crewlink-map__cayo{position:absolute;object-fit:fill;pointer-events:none;user-select:none}
-.crewlink-member-marker,.crewlink-ping-marker{position:absolute;border:0;background:transparent;z-index:4;display:flex;flex-direction:column;align-items:center;transform-origin:center bottom;cursor:pointer}.crewlink-member-marker>span{width:31px;height:31px;border:3px solid white;border-radius:50%;display:grid;place-items:center;color:white;background:var(--crew);box-shadow:0 4px 12px rgba(0,0,0,.35);font-size:9px;font-weight:900}.crewlink-member-marker.is-self>span{box-shadow:0 0 0 5px var(--crew-ring),0 4px 12px rgba(0,0,0,.3)}.crewlink-member-marker small,.crewlink-ping-marker small{padding:2px 5px;margin-top:2px;border-radius:6px;color:white;background:rgba(4,14,23,.82);font-size:7px;font-weight:700;white-space:nowrap}
-.crewlink-ping-marker>svg{width:28px;height:28px;padding:6px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);color:white;background:var(--ping);box-shadow:0 4px 12px rgba(0,0,0,.35)}.crewlink-ping-marker>svg :deep(*){transform:rotate(45deg);transform-origin:center}
-.crewlink-map-controls{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.18)}.crewlink-map-controls button{width:34px;height:34px;border:0;border-bottom:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.9);color:#183044;font-size:19px;display:grid;place-items:center}.crewlink-map-controls svg{width:16px}.crewlink-map-legend{position:absolute;left:10px;bottom:10px;padding:6px 8px;border-radius:10px;display:flex;gap:9px;background:rgba(8,20,30,.78);backdrop-filter:blur(10px);color:white;font-size:8px}.crewlink-map-legend span{display:flex;align-items:center;gap:4px}.crewlink-map-legend i{width:6px;height:6px;border-radius:50%;background:#35dc80}.crewlink-map-legend i.is-hidden{background:#8998a4}.crewlink-map-crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ff4d67}.crewlink-map-crosshair svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px white)}
-.crewlink-map-actions{height:76px;padding:8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#0c1822}.crewlink-map-actions button{border:1px solid rgba(255,255,255,.08);border-radius:15px;display:flex;align-items:center;gap:10px;padding:9px 11px;color:white;background:rgba(255,255,255,.06);text-align:left}.crewlink-map-actions button:disabled{opacity:.4}.crewlink-map-actions svg{width:23px;height:23px;flex:none;color:#28d9e8}.crewlink-map-actions span{display:flex;min-width:0;flex-direction:column;gap:2px}.crewlink-map-actions strong{font-size:15px;line-height:18px;white-space:nowrap}.crewlink-map-actions small{font-size:12px;line-height:15px;color:#a4b4c0;white-space:nowrap}
-.crewlink-group-hero{padding:22px;border-radius:25px;color:white;background:radial-gradient(circle at 82% 18%,var(--crew-aura),transparent 35%),linear-gradient(145deg,#0b2433,#0b1825);box-shadow:0 15px 35px rgba(6,20,31,.2)}.crewlink-group-hero__signal{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--crew);box-shadow:0 0 28px var(--crew-glow)}.crewlink-group-hero__signal svg{width:26px}.crewlink-group-hero>small{display:block;margin-top:17px;font-size:12px;font-weight:600;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:#b5c6d0}.crewlink-group-hero h1{margin:5px 0;font-size:29px;line-height:34px}.crewlink-group-hero p{margin:0 0 14px;font-size:14px;line-height:18px;color:#d0dbe1}.crewlink-group-hero>div:last-child{display:flex;gap:7px}.crewlink-group-hero :deep(.crewlink-group-badge){min-height:24px;padding:4px 8px;font-size:13px}
-.crewlink-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:13px 0 11px}.crewlink-quick-actions button{min-height:64px;border:0;border-radius:15px;padding:11px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--cl-text);background:var(--cl-surface);font-size:12px;font-weight:600;line-height:15px;box-shadow:0 3px 12px rgba(15,40,60,.06)}.crewlink-quick-actions svg{width:22px;height:22px;color:#138fc0}.crewlink-invitations--inline{margin:0}.crewlink-members-title{height:auto!important;min-height:34px;padding-top:8px!important;padding-bottom:6px!important;font-size:16px!important;font-weight:700!important;color:var(--cl-text)!important}.crewlink-member-list :deep(.k-list-item){min-height:70px}.crewlink-member-title{font-size:18px;font-weight:700;line-height:22px}.crewlink-member-subtitle{font-size:14px;line-height:18px;color:var(--cl-muted)}.crewlink-avatar{position:relative;width:43px;height:43px;border-radius:15px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,var(--crew),#273e55);font-size:12px;font-weight:900}.crewlink-avatar i{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border:2px solid white;border-radius:50%;background:#8998a4}.crewlink-avatar i.is-online{background:#35d880}.role-owner{color:#ffb020}.role-coordinator{color:#8b5cf6}.role-moderator{color:#2d9cff}.role-member{color:#22b77a}.role-guest{color:#8998a4}
-.crewlink-section-header{display:flex;align-items:center;gap:13px;margin:5px 2px 16px}.crewlink-section-header>span{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,#27d9ed,#287cff)}.crewlink-section-header>span svg{width:26px;height:26px}.crewlink-section-header div{flex:1}.crewlink-section-header small{font-size:13px;font-weight:700;line-height:16px;color:#29b8e8;text-transform:uppercase;letter-spacing:.09em}.crewlink-section-header h1{margin:2px 0 0;font-size:29px;line-height:34px}.crewlink-section-header button{width:42px;height:42px;border:0;border-radius:14px;display:grid;place-items:center;color:white;background:#168dc2}.crewlink-section-header button svg{width:22px;height:22px}.crewlink-pings-tab{padding-top:12px}.crewlink-pings-tab .crewlink-section-header{margin-bottom:12px}.crewlink-ping-list{display:flex;flex-direction:column;gap:8px}.crewlink-ping-list :deep(.k-card){margin:0}.crewlink-ping-list article{display:grid;grid-template-columns:47px 1fr 32px 32px;gap:9px;align-items:center;padding:11px}.crewlink-ping-list article>i{width:47px;height:47px;border-radius:16px;display:grid;place-items:center;color:white}.crewlink-ping-list article>i svg{width:23px}.crewlink-ping-list article>div{display:flex;flex-direction:column;gap:2px;min-width:0}.crewlink-ping-list small{font-size:11px;line-height:14px;color:var(--cl-muted);text-transform:uppercase}.crewlink-ping-list strong{font-size:15px;line-height:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crewlink-ping-list span{font-size:12px;line-height:15px;color:var(--cl-muted)}.crewlink-ping-list button{border:0;background:transparent;color:#238fbd;display:grid;place-items:center}.crewlink-ping-list button:last-child{color:#ed5268}.crewlink-ping-list button svg{width:20px}.crewlink-empty-state{padding:68px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}.crewlink-empty-state>span{width:70px;height:70px;border-radius:23px;display:grid;place-items:center;color:#168dbd;background:rgba(39,191,230,.12)}.crewlink-empty-state>span svg{width:29px;height:29px}.crewlink-empty-state h2{margin:17px 0 7px;font-size:21px;line-height:26px}.crewlink-empty-state p{max-width:280px;margin:0;color:var(--cl-muted);font-size:14px;line-height:20px}
-.crewlink-profile-card{display:flex;align-items:center;gap:13px;padding:17px;border-radius:23px;color:white;background:linear-gradient(145deg,var(--crew),#183a5a)}.crewlink-profile-card>span{width:54px;height:54px;border:3px solid rgba(255,255,255,.72);border-radius:19px;display:grid;place-items:center;font-size:15px;font-weight:900;background:rgba(8,25,40,.22)}.crewlink-profile-card div{min-width:0}.crewlink-profile-card small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}.crewlink-profile-card h1{margin:2px 0;font-size:19px}.crewlink-profile-card p{margin:0;font-size:10px;opacity:.82}.crewlink-group-dot{width:35px;height:35px;border-radius:13px;display:grid;place-items:center;color:white}.crewlink-group-dot svg{width:18px}.crewlink-danger-row{--k-list-item-title-text-color:#e44760}.crewlink-danger-button{color:#e44760!important}.crewlink-role-title{margin:16px 0 8px!important;padding-inline:4px!important}.crewlink-role-list{margin:0!important}.crewlink-role-list :deep(.crewlink-role-item__content){min-height:68px;align-items:center}.crewlink-role-list :deep(.crewlink-role-item__media){width:28px;margin-right:10px;justify-content:center;color:#9ca8b3}.crewlink-role-list :deep(.crewlink-role-item__inner){min-width:0;padding-top:9px;padding-bottom:9px;text-align:left}.crewlink-role-list :deep(.crewlink-role-item__title){min-height:22px;font-size:14px;line-height:18px}.crewlink-role-list :deep(.crewlink-role-item__title+div){max-width:230px;color:var(--cl-muted);font-size:10px;line-height:14px;text-align:left}.crewlink-role-list :deep(.crewlink-role-item__title svg){color:#aab5bf}.crewlink-member-actions{display:grid;gap:8px;margin-top:12px}.crewlink-member-actions :deep(.k-button){margin-top:0}
-.crewlink-sheet__content{position:relative;max-height:82vh;overflow-y:auto;padding:26px 18px 24px;text-align:center;color:var(--cl-text);background:var(--cl-bg);border-radius:24px 24px 0 0}.crewlink-sheet__close{position:absolute;right:14px;top:12px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:var(--cl-muted);background:rgba(125,145,160,.15)}.crewlink-sheet__close svg{width:17px}.crewlink-sheet__icon,.crewlink-sheet__avatar{width:56px;height:56px;margin:0 auto 9px;border-radius:20px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,#27d9ed,#287cff);box-shadow:0 10px 25px rgba(31,139,205,.22)}.crewlink-sheet__avatar{background:linear-gradient(145deg,var(--crew),#29415a);font-weight:900}.crewlink-sheet__icon svg{width:26px}.crewlink-sheet__content h2{margin:4px 0;font-size:23px;line-height:1.2}.crewlink-sheet__content>p{margin:0 10px 13px;color:var(--cl-muted);font-size:13px;line-height:1.45}.crewlink-sheet__content :deep(.button){width:100%;margin-top:9px;font-size:13px}.crewlink-nearby-list{margin:10px 0 0!important}.crewlink-nearby-list :deep(.crewlink-nearby-item__content){min-height:66px;align-items:center}.crewlink-nearby-list :deep(.crewlink-nearby-item__media){width:38px;margin-right:12px;justify-content:center}.crewlink-nearby-list :deep(.crewlink-nearby-item__inner){min-width:0;padding-top:9px;padding-bottom:9px;text-align:left}.crewlink-nearby-list :deep(.crewlink-nearby-item__title){min-height:22px;gap:8px;font-size:14px;line-height:18px}.crewlink-nearby-list :deep(.crewlink-nearby-item__title+div){color:var(--cl-muted);font-size:10px;line-height:14px;text-align:left}.crewlink-nearby-list :deep(.crewlink-nearby-invite){width:auto;margin-top:0;padding-inline:13px;flex:none}.crewlink-field-label{display:block;margin:8px 0;text-align:left;font-size:12px;font-weight:700;color:var(--cl-muted)}.crewlink-colours{display:flex;justify-content:center;gap:9px;margin:8px 0 14px}.crewlink-colours button{width:35px;height:35px;border:3px solid transparent;border-radius:50%;display:grid;place-items:center;color:white}.crewlink-colours button.is-active{border-color:white;box-shadow:0 0 0 2px currentColor}.crewlink-colours svg{width:15px;opacity:0}.crewlink-colours button.is-active svg{opacity:1}.crewlink-error{color:#df3e58!important;font-size:12px!important;margin:8px!important}.crewlink-sheet-empty{padding:25px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--cl-muted)}.crewlink-sheet-empty svg{width:34px}.crewlink-sheet-empty strong{color:var(--cl-text)}.crewlink-sheet-empty span{font-size:11px}.crewlink-ping-title{font-size:25px!important;line-height:30px!important}.crewlink-sheet__content>.crewlink-ping-description{font-size:14px;line-height:19px}.crewlink-ping-types{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:15px 0}.crewlink-ping-types button{min-width:0;border:1px solid transparent;border-radius:13px;padding:10px 2px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--cl-muted);background:var(--cl-surface);font-size:12px;font-weight:600;line-height:15px}.crewlink-ping-types button.is-active{border-color:var(--ping);color:var(--ping);box-shadow:0 3px 12px var(--ping-glow)}.crewlink-ping-types svg{width:22px;height:22px}.crewlink-ping-form :deep(.k-list-input .text-xs){font-size:14px!important;font-weight:600;line-height:18px}.crewlink-ping-form :deep(.crewlink-ping-label-input){font-size:16px!important;line-height:20px}.crewlink-ping-location-list :deep(.k-list-item){min-height:70px}.crewlink-ping-location-copy{display:flex;flex-direction:column;gap:3px;text-align:left}.crewlink-ping-location-copy strong{font-size:17px;line-height:21px}.crewlink-ping-location-copy small{max-width:205px;color:var(--cl-muted);font-size:14px;line-height:18px}.crewlink-sheet__content :deep(.crewlink-share-ping){font-size:16px}.crewlink-code-card{display:grid;grid-template-columns:1fr auto 30px 30px;align-items:center;gap:5px;text-align:left}.crewlink-code-card small{font-size:9px;color:var(--cl-muted)}.crewlink-code-card strong{font-family:monospace;letter-spacing:.12em}.crewlink-code-card button{border:0;background:transparent;color:#168dbd}.crewlink-code-card svg{width:16px}.crewlink-member-preview{padding-top:34px}.crewlink-tabbar{z-index:20}.crewlink-tabbar :deep(.crewlink-tabbar__inner){width:100%!important;max-width:none!important;padding-inline:4px!important}.crewlink-tabbar :deep(.crewlink-tabbar__pane){width:100%!important;max-width:none!important;gap:2px;padding:0}.crewlink-tabbar :deep(.crewlink-tabbar__pane>.k-link){min-width:0!important;max-width:none!important;flex:1 1 25%!important;padding-inline:2px!important}.crewlink-tabbar :deep(.k-tabbar-link-label){font-size:9px;line-height:11px}.crewlink-tabbar :deep(.k-icon){width:23px;height:23px}.crewlink-tabbar :deep(.badge){position:absolute;top:-3px;right:-7px;font-size:7px}
-.crewlink-pings-icon{position:relative;width:23px;height:23px;display:grid;place-items:center}.crewlink-pings-icon>svg{width:23px;height:23px}.crewlink-tabbar :deep(.crewlink-pings-badge){position:absolute!important;z-index:2;top:-6px!important;right:-9px!important;min-width:15px;height:15px;padding:0 4px;border:2px solid #071018;border-radius:999px;font-size:7px;line-height:11px;pointer-events:none}
-.crewlink-sheet__content :deep(.crewlink-nearby-rescan){margin-top:16px;margin-bottom:10px}
-.crewlink :deep(.crewlink-dialog-cancel){color:#f3f8fb!important;background:#173247!important}
-@keyframes cl-pulse{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.75;transform:scale(1.02)}}
+.crewlink {
+  --cl-bg: #f2f6fa;
+  --cl-surface: rgba(255, 255, 255, 0.84);
+  --cl-text: #102034;
+  --cl-muted: #6e7c8d;
+  --k-safe-area-top: 46px;
+  --k-safe-area-bottom: 25px;
+  position: relative;
+  height: 100%;
+  background: var(--cl-bg);
+  color: var(--cl-text);
+  overflow: hidden;
+}
+.crewlink--dark {
+  --cl-bg: #071018;
+  --cl-surface: rgba(17, 29, 40, 0.88);
+  --cl-text: #f3f8fb;
+  --cl-muted: #8fa2b3;
+}
+.crewlink :deep(.page-content) {
+  background: transparent;
+}
+.crewlink-navbar {
+  --k-navbar-bg-color: rgba(248, 252, 255, 0.78);
+  position: absolute;
+  z-index: 20;
+  inset: 0 0 auto;
+  backdrop-filter: blur(20px) saturate(1.3);
+}
+.crewlink--dark .crewlink-navbar {
+  --k-navbar-bg-color: rgba(7, 16, 24, 0.8);
+}
+.crewlink-content {
+  position: absolute;
+  inset: 94px 0 calc(80px + var(--k-safe-area-bottom));
+  overflow: hidden;
+}
+.crewlink-content--empty {
+  inset: var(--k-safe-area-top) 0 var(--k-safe-area-bottom);
+}
+.crewlink-scroll-tab {
+  height: 100%;
+  overflow-y: auto;
+  padding: 14px 11px 34px;
+}
+.crewlink-loading,
+.crewlink-onboarding {
+  height: 100%;
+  padding: 52px 30px 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 12px;
+  background: radial-gradient(
+    circle at 50% 32%,
+    rgba(39, 217, 237, 0.18),
+    transparent 36%
+  );
+}
+.crewlink-auth {
+  --auth-accent: #20bde0;
+  --panel: rgba(18, 39, 53, 0.92);
+  padding: 60px 18px 30px;
+  color: #f3f8fb;
+  background:
+    radial-gradient(circle at 82% 8%, rgba(39, 217, 237, 0.2), transparent 34%),
+    linear-gradient(180deg, #07131d, #091923);
+  overflow-y: auto;
+}
+.crewlink-auth :deep(.app-profile-auth) {
+  margin: auto;
+}
+.crewlink-logo {
+  width: 78px;
+  height: 78px;
+  border-radius: 26px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: linear-gradient(145deg, #28dbe9, #1d88ff 58%, #7050ef);
+  box-shadow: 0 18px 42px rgba(20, 137, 213, 0.3);
+}
+.crewlink-logo svg {
+  width: 38px;
+  height: 38px;
+}
+.crewlink-onboarding small {
+  color: #168cbb;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.crewlink-onboarding h1 {
+  margin: 0;
+  font-size: 27px;
+  line-height: 1.05;
+}
+.crewlink-onboarding p {
+  margin: 0 0 10px;
+  color: var(--cl-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.crewlink-onboarding :deep(.button) {
+  width: 100%;
+}
+.crewlink-orbits {
+  width: 170px;
+  height: 170px;
+  position: relative;
+  margin-bottom: 4px;
+}
+.crewlink-orbits i {
+  position: absolute;
+  inset: 8px;
+  border: 1px solid rgba(39, 217, 237, 0.22);
+  border-radius: 50%;
+  animation: cl-pulse 2.8s infinite;
+}
+.crewlink-orbits i:nth-child(2) {
+  inset: 31px;
+  animation-delay: 0.3s;
+}
+.crewlink-orbits i:nth-child(3) {
+  inset: 55px;
+  animation-delay: 0.6s;
+}
+.crewlink-orbits span {
+  position: absolute;
+  inset: 69px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: linear-gradient(145deg, #2ce4ed, #257cff);
+  box-shadow: 0 10px 35px rgba(31, 162, 228, 0.4);
+}
+.crewlink-form-list {
+  width: 100%;
+  margin: 4px 0;
+}
+.crewlink-privacy {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  color: var(--cl-muted) !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+  font-weight: 500 !important;
+}
+.crewlink-privacy svg {
+  width: 14px;
+}
+.crewlink-group-gate {
+  height: 100%;
+  padding: 24px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-content: center;
+  gap: 12px;
+  background: radial-gradient(
+    circle at 50% 48%,
+    rgba(39, 217, 237, 0.16),
+    transparent 48%
+  );
+}
+.crewlink-group-gate button {
+  min-width: 0;
+  aspect-ratio: 1;
+  padding: 16px 8px;
+  border: 1px solid rgba(39, 160, 215, 0.14);
+  border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--cl-text);
+  background: var(--cl-surface);
+  box-shadow: 0 14px 32px rgba(11, 43, 65, 0.1);
+}
+.crewlink-group-gate button span {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: linear-gradient(145deg, #2bdde9, #2e7eff);
+  box-shadow: 0 10px 24px rgba(30, 150, 220, 0.28);
+}
+.crewlink-group-gate button:last-child span {
+  background: linear-gradient(145deg, #8b5cf6, #387eff);
+}
+.crewlink-group-gate button svg {
+  width: 25px;
+  height: 25px;
+}
+.crewlink-group-gate button strong {
+  font-size: 12px;
+  line-height: 1.25;
+}
+.crewlink-group-gate :deep(.crewlink-group-gate__logout) {
+  grid-column: 1/-1;
+  width: 100%;
+  min-height: 46px;
+  aspect-ratio: auto;
+  border-color: rgba(228, 71, 96, 0.55);
+  border-radius: 23px;
+  flex-direction: row;
+  color: #e44760;
+}
+.crewlink-logout-button {
+  width: 100%;
+  color: #e44760;
+}
+.crewlink-invitations {
+  width: 100%;
+  margin-top: 18px;
+  text-align: left;
+}
+.crewlink-join-invitations-title {
+  margin: 18px 0 8px !important;
+  text-align: left;
+}
+.crewlink-invitations--join {
+  display: grid;
+  gap: 7px;
+  margin: 0;
+}
+.crewlink-invitations--join :deep(.k-card) {
+  margin: 0;
+}
+.crewlink-invite-card {
+  display: grid;
+  grid-template-columns: 38px 1fr 31px 31px;
+  gap: 7px;
+  align-items: center;
+}
+.crewlink-invite-card > i {
+  width: 38px;
+  height: 38px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  color: white;
+}
+.crewlink-invite-card > i svg {
+  width: 19px;
+}
+.crewlink-invite-card div {
+  display: flex;
+  flex-direction: column;
+}
+.crewlink-invite-card div span {
+  font-size: 10px;
+  color: var(--cl-muted);
+}
+.crewlink-invite-card button {
+  width: 29px;
+  height: 29px;
+  border: 0;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  color: #e94662;
+  background: rgba(255, 77, 103, 0.12);
+}
+.crewlink-invite-card button.is-accept {
+  color: #0aa66d;
+  background: rgba(46, 204, 126, 0.14);
+}
+.crewlink-invite-card button svg {
+  width: 15px;
+}
+.crewlink-map-tab {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #09131c;
+}
+.crewlink-map-summary {
+  height: 64px;
+  padding: 8px 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: white;
+  background: linear-gradient(
+    90deg,
+    rgba(6, 24, 35, 0.96),
+    rgba(15, 41, 56, 0.95)
+  );
+}
+.crewlink-map-summary > div:first-child {
+  display: grid;
+  grid-template-columns: 10px auto auto;
+  align-items: baseline;
+  gap: 7px;
+}
+.crewlink-map-summary strong {
+  font-size: 26px;
+  line-height: 30px;
+}
+.crewlink-map-summary small {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #c0ced8;
+  white-space: nowrap;
+}
+.crewlink-live-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #35dc80;
+  box-shadow: 0 0 0 4px rgba(53, 220, 128, 0.16);
+}
+.crewlink-online-faces {
+  display: flex;
+  align-items: center;
+}
+.crewlink-online-faces span {
+  width: 27px;
+  height: 27px;
+  margin-left: -6px;
+  border: 2px solid;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: #203347;
+  color: white;
+  font-size: 8px;
+  font-weight: 800;
+}
+.crewlink-online-faces i {
+  font-size: 9px;
+  margin-left: 5px;
+  color: #9cb0bf;
+}
+.crewlink-map {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  touch-action: none;
+  background: #d8e0e4;
+  cursor: grab;
+}
+.crewlink-map:active {
+  cursor: grabbing;
+}
+.crewlink-map__canvas {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform-origin: center;
+  will-change: transform;
+}
+.crewlink-map__mainland,
+.crewlink-map__cayo {
+  position: absolute;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
+}
+.crewlink-member-marker,
+.crewlink-ping-marker {
+  position: absolute;
+  border: 0;
+  background: transparent;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform-origin: center bottom;
+  cursor: pointer;
+}
+.crewlink-member-marker > span {
+  width: 31px;
+  height: 31px;
+  border: 3px solid white;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: var(--crew);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  font-size: 9px;
+  font-weight: 900;
+}
+.crewlink-member-marker.is-self > span {
+  box-shadow:
+    0 0 0 5px var(--crew-ring),
+    0 4px 12px rgba(0, 0, 0, 0.3);
+}
+.crewlink-member-marker small,
+.crewlink-ping-marker small {
+  padding: 2px 5px;
+  margin-top: 2px;
+  border-radius: 6px;
+  color: white;
+  background: rgba(4, 14, 23, 0.82);
+  font-size: 7px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.crewlink-ping-marker > svg {
+  width: 28px;
+  height: 28px;
+  padding: 6px;
+  border-radius: 50% 50% 50% 4px;
+  transform: rotate(-45deg);
+  color: white;
+  background: var(--ping);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+}
+.crewlink-ping-marker > svg :deep(*) {
+  transform: rotate(45deg);
+  transform-origin: center;
+}
+.crewlink-map-controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
+}
+.crewlink-map-controls button {
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.9);
+  color: #183044;
+  font-size: 19px;
+  display: grid;
+  place-items: center;
+}
+.crewlink-map-controls svg {
+  width: 16px;
+}
+.crewlink-map-legend {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  padding: 6px 8px;
+  border-radius: 10px;
+  display: flex;
+  gap: 9px;
+  background: rgba(8, 20, 30, 0.78);
+  backdrop-filter: blur(10px);
+  color: white;
+  font-size: 8px;
+}
+.crewlink-map-legend span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.crewlink-map-legend i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #35dc80;
+}
+.crewlink-map-legend i.is-hidden {
+  background: #8998a4;
+}
+.crewlink-map-crosshair {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #ff4d67;
+}
+.crewlink-map-crosshair svg {
+  width: 32px;
+  height: 32px;
+  filter: drop-shadow(0 2px 4px white);
+}
+.crewlink-map-actions {
+  height: 76px;
+  padding: 8px 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  background: #0c1822;
+}
+.crewlink-map-actions button {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 11px;
+  color: white;
+  background: rgba(255, 255, 255, 0.06);
+  text-align: left;
+}
+.crewlink-map-actions button:disabled {
+  opacity: 0.4;
+}
+.crewlink-map-actions svg {
+  width: 23px;
+  height: 23px;
+  flex: none;
+  color: #28d9e8;
+}
+.crewlink-map-actions span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+.crewlink-map-actions strong {
+  font-size: 15px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+.crewlink-map-actions small {
+  font-size: 12px;
+  line-height: 15px;
+  color: #a4b4c0;
+  white-space: nowrap;
+}
+.crewlink-group-hero {
+  padding: 22px;
+  border-radius: 25px;
+  color: white;
+  background:
+    radial-gradient(circle at 82% 18%, var(--crew-aura), transparent 35%),
+    linear-gradient(145deg, #0b2433, #0b1825);
+  box-shadow: 0 15px 35px rgba(6, 20, 31, 0.2);
+}
+.crewlink-group-hero__signal {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  background: var(--crew);
+  box-shadow: 0 0 28px var(--crew-glow);
+}
+.crewlink-group-hero__signal svg {
+  width: 26px;
+}
+.crewlink-group-hero > small {
+  display: block;
+  margin-top: 17px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #b5c6d0;
+}
+.crewlink-group-hero h1 {
+  margin: 5px 0;
+  font-size: 29px;
+  line-height: 34px;
+}
+.crewlink-group-hero p {
+  margin: 0 0 14px;
+  font-size: 14px;
+  line-height: 18px;
+  color: #d0dbe1;
+}
+.crewlink-group-hero > div:last-child {
+  display: flex;
+  gap: 7px;
+}
+.crewlink-group-hero :deep(.crewlink-group-badge) {
+  min-height: 24px;
+  padding: 4px 8px;
+  font-size: 13px;
+}
+.crewlink-quick-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin: 13px 0 11px;
+}
+.crewlink-quick-actions button {
+  min-height: 64px;
+  border: 0;
+  border-radius: 15px;
+  padding: 11px 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  color: var(--cl-text);
+  background: var(--cl-surface);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 15px;
+  box-shadow: 0 3px 12px rgba(15, 40, 60, 0.06);
+}
+.crewlink-quick-actions svg {
+  width: 22px;
+  height: 22px;
+  color: #138fc0;
+}
+.crewlink-invitations--inline {
+  margin: 0;
+}
+.crewlink-members-title {
+  height: auto !important;
+  min-height: 34px;
+  padding-top: 8px !important;
+  padding-bottom: 6px !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+  color: var(--cl-text) !important;
+}
+.crewlink-member-list :deep(.k-list-item) {
+  min-height: 70px;
+}
+.crewlink-member-title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 22px;
+}
+.crewlink-member-subtitle {
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--cl-muted);
+}
+.crewlink-avatar {
+  position: relative;
+  width: 43px;
+  height: 43px;
+  border-radius: 15px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: linear-gradient(145deg, var(--crew), #273e55);
+  font-size: 12px;
+  font-weight: 900;
+}
+.crewlink-avatar i {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 11px;
+  height: 11px;
+  border: 2px solid white;
+  border-radius: 50%;
+  background: #8998a4;
+}
+.crewlink-avatar i.is-online {
+  background: #35d880;
+}
+.role-owner {
+  color: #ffb020;
+}
+.role-coordinator {
+  color: #8b5cf6;
+}
+.role-moderator {
+  color: #2d9cff;
+}
+.role-member {
+  color: #22b77a;
+}
+.role-guest {
+  color: #8998a4;
+}
+.crewlink-section-header {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  margin: 5px 2px 16px;
+}
+.crewlink-section-header > span {
+  width: 52px;
+  height: 52px;
+  border-radius: 17px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: linear-gradient(145deg, #27d9ed, #287cff);
+}
+.crewlink-section-header > span svg {
+  width: 26px;
+  height: 26px;
+}
+.crewlink-section-header div {
+  flex: 1;
+}
+.crewlink-section-header small {
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 16px;
+  color: #29b8e8;
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+}
+.crewlink-section-header h1 {
+  margin: 2px 0 0;
+  font-size: 29px;
+  line-height: 34px;
+}
+.crewlink-section-header button {
+  width: 42px;
+  height: 42px;
+  border: 0;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: #168dc2;
+}
+.crewlink-section-header button svg {
+  width: 22px;
+  height: 22px;
+}
+.crewlink-pings-tab {
+  padding-top: 12px;
+}
+.crewlink-pings-tab .crewlink-section-header {
+  margin-bottom: 12px;
+}
+.crewlink-ping-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.crewlink-ping-list :deep(.k-card) {
+  margin: 0;
+}
+.crewlink-ping-list article {
+  display: grid;
+  grid-template-columns: 47px 1fr 32px 32px;
+  gap: 9px;
+  align-items: center;
+  padding: 11px;
+}
+.crewlink-ping-list article > i {
+  width: 47px;
+  height: 47px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  color: white;
+}
+.crewlink-ping-list article > i svg {
+  width: 23px;
+}
+.crewlink-ping-list article > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.crewlink-ping-list small {
+  font-size: 11px;
+  line-height: 14px;
+  color: var(--cl-muted);
+  text-transform: uppercase;
+}
+.crewlink-ping-list strong {
+  font-size: 15px;
+  line-height: 19px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.crewlink-ping-list span {
+  font-size: 12px;
+  line-height: 15px;
+  color: var(--cl-muted);
+}
+.crewlink-ping-list button {
+  border: 0;
+  background: transparent;
+  color: #238fbd;
+  display: grid;
+  place-items: center;
+}
+.crewlink-ping-list button:last-child {
+  color: #ed5268;
+}
+.crewlink-ping-list button svg {
+  width: 20px;
+}
+.crewlink-empty-state {
+  padding: 68px 22px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.crewlink-empty-state > span {
+  width: 70px;
+  height: 70px;
+  border-radius: 23px;
+  display: grid;
+  place-items: center;
+  color: #168dbd;
+  background: rgba(39, 191, 230, 0.12);
+}
+.crewlink-empty-state > span svg {
+  width: 29px;
+  height: 29px;
+}
+.crewlink-empty-state h2 {
+  margin: 17px 0 7px;
+  font-size: 21px;
+  line-height: 26px;
+}
+.crewlink-empty-state p {
+  max-width: 280px;
+  margin: 0;
+  color: var(--cl-muted);
+  font-size: 14px;
+  line-height: 20px;
+}
+.crewlink-profile-card {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 17px;
+  border-radius: 23px;
+  color: white;
+  background: linear-gradient(145deg, var(--crew), #183a5a);
+}
+.crewlink-profile-card > span {
+  width: 54px;
+  height: 54px;
+  border: 3px solid rgba(255, 255, 255, 0.72);
+  border-radius: 19px;
+  display: grid;
+  place-items: center;
+  font-size: 15px;
+  font-weight: 900;
+  background: rgba(8, 25, 40, 0.22);
+}
+.crewlink-profile-card div {
+  min-width: 0;
+}
+.crewlink-profile-card small {
+  font-size: 8px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.75;
+}
+.crewlink-profile-card h1 {
+  margin: 2px 0;
+  font-size: 19px;
+}
+.crewlink-profile-card p {
+  margin: 0;
+  font-size: 10px;
+  opacity: 0.82;
+}
+.crewlink-group-dot {
+  width: 35px;
+  height: 35px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  color: white;
+}
+.crewlink-group-dot svg {
+  width: 18px;
+}
+.crewlink-danger-row {
+  --k-list-item-title-text-color: #e44760;
+}
+.crewlink-danger-button {
+  color: #e44760 !important;
+}
+.crewlink-role-title {
+  margin: 16px 0 8px !important;
+  padding-inline: 4px !important;
+}
+.crewlink-role-list {
+  margin: 0 !important;
+}
+.crewlink-role-list :deep(.crewlink-role-item__content) {
+  min-height: 68px;
+  align-items: center;
+}
+.crewlink-role-list :deep(.crewlink-role-item__media) {
+  width: 28px;
+  margin-right: 10px;
+  justify-content: center;
+  color: #9ca8b3;
+}
+.crewlink-role-list :deep(.crewlink-role-item__inner) {
+  min-width: 0;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  text-align: left;
+}
+.crewlink-role-list :deep(.crewlink-role-item__title) {
+  min-height: 22px;
+  font-size: 14px;
+  line-height: 18px;
+}
+.crewlink-role-list :deep(.crewlink-role-item__title + div) {
+  max-width: 230px;
+  color: var(--cl-muted);
+  font-size: 10px;
+  line-height: 14px;
+  text-align: left;
+}
+.crewlink-role-list :deep(.crewlink-role-item__title svg) {
+  color: #aab5bf;
+}
+.crewlink-member-actions {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+}
+.crewlink-member-actions :deep(.k-button) {
+  margin-top: 0;
+}
+.crewlink-sheet__content {
+  position: relative;
+  max-height: 82vh;
+  overflow-y: auto;
+  padding: 26px 18px 24px;
+  text-align: center;
+  color: var(--cl-text);
+  background: var(--cl-bg);
+  border-radius: 24px 24px 0 0;
+}
+.crewlink-sheet__close {
+  position: absolute;
+  right: 14px;
+  top: 12px;
+  width: 31px;
+  height: 31px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: var(--cl-muted);
+  background: rgba(125, 145, 160, 0.15);
+}
+.crewlink-sheet__close svg {
+  width: 17px;
+}
+.crewlink-sheet__icon,
+.crewlink-sheet__avatar {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 9px;
+  border-radius: 20px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: linear-gradient(145deg, #27d9ed, #287cff);
+  box-shadow: 0 10px 25px rgba(31, 139, 205, 0.22);
+}
+.crewlink-sheet__avatar {
+  background: linear-gradient(145deg, var(--crew), #29415a);
+  font-weight: 900;
+}
+.crewlink-sheet__icon svg {
+  width: 26px;
+}
+.crewlink-sheet__content h2 {
+  margin: 4px 0;
+  font-size: 23px;
+  line-height: 1.2;
+}
+.crewlink-sheet__content > p {
+  margin: 0 10px 13px;
+  color: var(--cl-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+.crewlink-sheet__content :deep(.button) {
+  width: 100%;
+  margin-top: 9px;
+  font-size: 13px;
+}
+.crewlink-nearby-list {
+  margin: 10px 0 0 !important;
+}
+.crewlink-nearby-list :deep(.crewlink-nearby-item__content) {
+  min-height: 66px;
+  align-items: center;
+}
+.crewlink-nearby-list :deep(.crewlink-nearby-item__media) {
+  width: 38px;
+  margin-right: 12px;
+  justify-content: center;
+}
+.crewlink-nearby-list :deep(.crewlink-nearby-item__inner) {
+  min-width: 0;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  text-align: left;
+}
+.crewlink-nearby-list :deep(.crewlink-nearby-item__title) {
+  min-height: 22px;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 18px;
+}
+.crewlink-nearby-list :deep(.crewlink-nearby-item__title + div) {
+  color: var(--cl-muted);
+  font-size: 10px;
+  line-height: 14px;
+  text-align: left;
+}
+.crewlink-nearby-list :deep(.crewlink-nearby-invite) {
+  width: auto;
+  margin-top: 0;
+  padding-inline: 13px;
+  flex: none;
+}
+.crewlink-field-label {
+  display: block;
+  margin: 8px 0;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--cl-muted);
+}
+.crewlink-colours {
+  display: flex;
+  justify-content: center;
+  gap: 9px;
+  margin: 8px 0 14px;
+}
+.crewlink-colours button {
+  width: 35px;
+  height: 35px;
+  border: 3px solid transparent;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: white;
+}
+.crewlink-colours button.is-active {
+  border-color: white;
+  box-shadow: 0 0 0 2px currentColor;
+}
+.crewlink-colours svg {
+  width: 15px;
+  opacity: 0;
+}
+.crewlink-colours button.is-active svg {
+  opacity: 1;
+}
+.crewlink-error {
+  color: #df3e58 !important;
+  font-size: 12px !important;
+  margin: 8px !important;
+}
+.crewlink-sheet-empty {
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  color: var(--cl-muted);
+}
+.crewlink-sheet-empty svg {
+  width: 34px;
+}
+.crewlink-sheet-empty strong {
+  color: var(--cl-text);
+}
+.crewlink-sheet-empty span {
+  font-size: 11px;
+}
+.crewlink-ping-title {
+  font-size: 25px !important;
+  line-height: 30px !important;
+}
+.crewlink-sheet__content > .crewlink-ping-description {
+  font-size: 14px;
+  line-height: 19px;
+}
+.crewlink-ping-types {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 5px;
+  margin: 15px 0;
+}
+.crewlink-ping-types button {
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: 13px;
+  padding: 10px 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  color: var(--cl-muted);
+  background: var(--cl-surface);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 15px;
+}
+.crewlink-ping-types button.is-active {
+  border-color: var(--ping);
+  color: var(--ping);
+  box-shadow: 0 3px 12px var(--ping-glow);
+}
+.crewlink-ping-types svg {
+  width: 22px;
+  height: 22px;
+}
+.crewlink-ping-form :deep(.k-list-input .text-xs) {
+  font-size: 14px !important;
+  font-weight: 600;
+  line-height: 18px;
+}
+.crewlink-ping-form :deep(.crewlink-ping-label-input) {
+  font-size: 16px !important;
+  line-height: 20px;
+}
+.crewlink-ping-location-list :deep(.k-list-item) {
+  min-height: 70px;
+}
+.crewlink-ping-location-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  text-align: left;
+}
+.crewlink-ping-location-copy strong {
+  font-size: 17px;
+  line-height: 21px;
+}
+.crewlink-ping-location-copy small {
+  max-width: 205px;
+  color: var(--cl-muted);
+  font-size: 14px;
+  line-height: 18px;
+}
+.crewlink-sheet__content :deep(.crewlink-share-ping) {
+  font-size: 16px;
+}
+.crewlink-code-card {
+  display: grid;
+  grid-template-columns: 1fr auto 30px 30px;
+  align-items: center;
+  gap: 5px;
+  text-align: left;
+}
+.crewlink-code-card small {
+  font-size: 9px;
+  color: var(--cl-muted);
+}
+.crewlink-code-card strong {
+  font-family: monospace;
+  letter-spacing: 0.12em;
+}
+.crewlink-code-card button {
+  border: 0;
+  background: transparent;
+  color: #168dbd;
+}
+.crewlink-code-card svg {
+  width: 16px;
+}
+.crewlink-member-preview {
+  padding-top: 34px;
+}
+.crewlink-tabbar {
+  z-index: 20;
+}
+.crewlink-tabbar :deep(.crewlink-tabbar__inner) {
+  width: 100% !important;
+  max-width: none !important;
+  padding-inline: 4px !important;
+}
+.crewlink-tabbar :deep(.crewlink-tabbar__pane) {
+  width: 100% !important;
+  max-width: none !important;
+  gap: 2px;
+  padding: 0;
+}
+.crewlink-tabbar :deep(.crewlink-tabbar__pane > .k-link) {
+  min-width: 0 !important;
+  max-width: none !important;
+  flex: 1 1 25% !important;
+  padding-inline: 2px !important;
+}
+.crewlink-tabbar :deep(.k-tabbar-link-label) {
+  font-size: 9px;
+  line-height: 11px;
+}
+.crewlink-tabbar :deep(.k-icon) {
+  width: 23px;
+  height: 23px;
+}
+.crewlink-tabbar :deep(.badge) {
+  position: absolute;
+  top: -3px;
+  right: -7px;
+  font-size: 7px;
+}
+.crewlink-pings-icon {
+  position: relative;
+  width: 23px;
+  height: 23px;
+  display: grid;
+  place-items: center;
+}
+.crewlink-pings-icon > svg {
+  width: 23px;
+  height: 23px;
+}
+.crewlink-tabbar :deep(.crewlink-pings-badge) {
+  position: absolute !important;
+  z-index: 2;
+  top: -6px !important;
+  right: -9px !important;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 4px;
+  border: 2px solid #071018;
+  border-radius: 999px;
+  font-size: 7px;
+  line-height: 11px;
+  pointer-events: none;
+}
+.crewlink-sheet__content :deep(.crewlink-nearby-rescan) {
+  margin-top: 16px;
+  margin-bottom: 10px;
+}
+.crewlink :deep(.crewlink-dialog-cancel) {
+  color: #f3f8fb !important;
+  background: #173247 !important;
+}
+.crewlink-avatar {
+  overflow: hidden;
+}
+.crewlink-avatar > img,
+.crewlink-profile-card > span img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.crewlink-avatar > i {
+  z-index: 1;
+}
+.crewlink-profile-card > span {
+  overflow: hidden;
+}
+.crewlink-profile-row-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  color: #168dbd;
+  background: rgba(39, 191, 230, 0.12);
+}
+.crewlink-profile-row-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.crewlink-sheet__avatar {
+  overflow: hidden;
+}
+.crewlink-sheet__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.crewlink-profile-editor__avatar {
+  width: 92px;
+  height: 92px;
+  margin: 4px auto 12px;
+  border: 3px solid rgba(39, 217, 237, 0.7);
+  border-radius: 30px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  color: #20bde0;
+  background: var(--cl-surface);
+  box-shadow: 0 12px 30px rgba(17, 137, 189, 0.2);
+}
+.crewlink-profile-editor__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.crewlink-profile-editor__avatar svg {
+  width: 36px;
+  height: 36px;
+}
+.crewlink-profile-editor__media-actions {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin: 4px 0 8px;
+}
+.crewlink-profile-editor__media-actions :deep(.k-button) {
+  min-width: 0;
+  margin-top: 0;
+  gap: 6px;
+}
+.crewlink-profile-editor__remove {
+  width: 100%;
+  margin: 0 0 6px !important;
+  color: #e44760;
+}
+@keyframes cl-pulse {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.96);
+  }
+  50% {
+    opacity: 0.75;
+    transform: scale(1.02);
+  }
+}
 </style>
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 21c05b7..b4ffb59 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -9,20 +9,16 @@ import {
   CheckCircle2,
   ChevronLeft,
   ChevronRight,
-  Eye,
-  EyeOff,
   Feather,
   Home,
   ImagePlus,
   Images,
-  KeyRound,
-  Mail,
+  LogOut,
   MessageCircle,
   PencilLine,
   Plus,
   Search,
   Share2,
-  ShieldCheck,
   Trash2,
   UserPlus,
   UserMinus,
@@ -59,18 +55,16 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import FeatherPostCard from '@/components/feather/FeatherPostCard.vue'
+import AccountLogoutDialog from '@/components/account/AccountLogoutDialog.vue'
+import AppProfileAuth from '@/components/account/AppProfileAuth.vue'
 import { useAccountStore } from '@/stores/account'
+import { useAppAuthStore } from '@/stores/app-auth'
 import { useFeatherStore } from '@/stores/feather'
 import { useEasyShareStore } from '@/stores/easyshare'
 import type { FeatherConnectionMode } from '@/stores/feather'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
 import type { FeatherMedia, FeatherPost, FeatherProfile } from '@/types/feather'
-import {
-  filterMailAddressInput,
-  MAIL_ADDRESS_INPUT_MAX_LENGTH,
-  normalizeMailAddress,
-} from '@/utils/mail'
 
 type Tab = 'home' | 'explore' | 'network' | 'activity' | 'profile'
 type Screen =
@@ -93,9 +87,15 @@ type ProfileMediaContext = {
   editing: { bio: string; displayName: string }
   selectedPhoto: SelectedPhoto | null
 }
+type AuthMediaContext = {
+  mode: 'login' | 'register'
+  selectedPhoto: SelectedPhoto | null
+  username: string
+}
 
 const phone = usePhoneStore()
 const account = useAccountStore()
+const appAuth = useAppAuthStore()
 const feather = useFeatherStore()
 const messageMedia = useMessageMediaStore()
 const route = useRoute()
@@ -107,6 +107,7 @@ const activityView = ref<ActivityView>('all')
 const profileView = ref<ProfileView>('posts')
 const connectionMode = ref<FeatherConnectionMode>('followers')
 const settingsOpen = ref(false)
+const logoutDialogOpen = ref(false)
 const compactMode = ref(false)
 const showSuggestions = ref(true)
 const search = ref('')
@@ -128,11 +129,10 @@ const onboarding = ref({ bio: '', displayName: '', handle: '' })
 const editing = ref({ bio: '', displayName: '' })
 const selectedProfilePhoto = ref<SelectedPhoto | null>(null)
 const authMode = ref<'login' | 'register'>('login')
-const authForm = ref({ confirm: '', email: '', password: '' })
+const authUsername = ref('')
+const authProfilePhoto = ref<SelectedPhoto | null>(null)
 const authBusy = ref(false)
-const authAttempted = ref(false)
 const authError = ref('')
-const authPasswordVisible = ref(false)
 const composeFabColors = {
   activeBgIos: 'active:!bg-[#2778dc] dark:active:!bg-[#2778dc]',
   bgIos: '!bg-[#58a6ff] dark:!bg-[#58a6ff]',
@@ -244,18 +244,9 @@ const navbarTitle = computed(() => {
 const unreadActivities = computed(
   () => feather.activities.filter((item) => !item.read).length,
 )
-const authEmailValid = computed(
-  () => normalizeMailAddress(authForm.value.email) !== null,
-)
-const authPasswordValid = computed(() => {
-  const length = authForm.value.password.length
-  return length >= 6 && length <= 64
-})
-const authConfirmValid = computed(
-  () =>
-    authMode.value === 'login' ||
-    (authForm.value.confirm.length > 0 &&
-      authForm.value.confirm === authForm.value.password),
+const isAuthenticated = computed(() => appAuth.isSignedIn('feather'))
+const authUsernameValid = computed(() =>
+  /^[a-z0-9][a-z0-9_]{1,28}[a-z0-9]$/i.test(authUsername.value.trim()),
 )
 
 function t(path: string, params?: Record<string, string>): string {
@@ -303,13 +294,6 @@ function errorToast(error?: string): void {
   toast(key)
 }
 
-function updateAuthEmail(event: Event): void {
-  const input = event.target as HTMLInputElement
-  const filtered = filterMailAddressInput(input.value)
-  if (input.value !== filtered) input.value = filtered
-  authForm.value.email = filtered
-}
-
 function inputValue(event: Event): string {
   const target = event.target
   if (
@@ -324,55 +308,101 @@ function inputValue(event: Event): string {
 
 function switchAuthMode(mode: 'login' | 'register'): void {
   authMode.value = mode
-  authForm.value.confirm = ''
+  authProfilePhoto.value = null
+  if (mode === 'register') {
+    authUsername.value = (account.email.split('@')[0] ?? '')
+      .replace(/[^a-z0-9_]/gi, '_')
+      .slice(0, 30)
+  } else {
+    authUsername.value = ''
+  }
   authError.value = ''
-  authAttempted.value = false
 }
 
 function authErrorMessage(error?: string): string {
   const known = [
-    'invalid_email',
-    'invalid_password',
-    'invalid_credentials',
-    'email_taken',
+    'already_registered',
+    'handle_taken',
+    'invalid_handle',
+    'invalid_media',
+    'invalid_username',
+    'no_ifruit_account',
+    'profile_not_found',
     'rate_limited',
   ]
   return t(`authErrors.${error && known.includes(error) ? error : 'default'}`)
 }
 
 async function submitAuth(): Promise<void> {
-  authAttempted.value = true
   authError.value = ''
-  if (!authEmailValid.value) {
-    authError.value = t('authErrors.invalid_email')
+  if (!account.email) {
+    authError.value = t('authErrors.no_ifruit_account')
     return
   }
-  if (!authPasswordValid.value) {
-    authError.value = t('authErrors.invalid_password')
-    return
-  }
-  if (!authConfirmValid.value) {
-    authError.value = t('authErrors.password_mismatch')
+  if (!authUsernameValid.value) {
+    authError.value = t('authErrors.invalid_handle')
     return
   }
 
-  const email = normalizeMailAddress(authForm.value.email)
-  if (!email) return
+  const username = authUsername.value.trim().toLowerCase()
   authBusy.value = true
-  const response =
-    authMode.value === 'login'
-      ? await account.login(email, authForm.value.password)
-      : await account.register(email, authForm.value.password)
-  authBusy.value = false
-  if (!response.success) {
-    authError.value = authErrorMessage(response.error)
+  const bootstrapped = await feather.bootstrap()
+  if (!bootstrapped) {
+    authBusy.value = false
+    authError.value = authErrorMessage()
     return
   }
+  if (authMode.value === 'login') {
+    authBusy.value = false
+    if (!feather.onboarded || !feather.profile) {
+      authError.value = t('authErrors.profile_not_found')
+      return
+    }
+    if (feather.profile.handle.toLowerCase() !== username) {
+      authError.value = t('authErrors.invalid_username')
+      return
+    }
+  } else {
+    if (feather.onboarded || feather.profile) {
+      authBusy.value = false
+      authError.value = t('authErrors.already_registered')
+      return
+    }
+    const response = await feather.createProfile({
+      avatarId: authProfilePhoto.value?.id,
+      bio: '',
+      displayName: authUsername.value.trim(),
+      handle: username,
+    })
+    authBusy.value = false
+    if (!response.success) {
+      authError.value = authErrorMessage(response.error)
+      return
+    }
+  }
 
-  authForm.value = { confirm: '', email: '', password: '' }
-  authAttempted.value = false
-  authPasswordVisible.value = false
-  await feather.bootstrap()
+  appAuth.signIn('feather', account.email)
+  authUsername.value = ''
+  authProfilePhoto.value = null
+  if (authMode.value === 'login') await feather.bootstrap()
+}
+
+function openAuthMedia(app: 'camera' | 'photos'): void {
+  messageMedia.begin(
+    'feather:auth-avatar',
+    'photo',
+    '/apps/feather?auth=register',
+    1,
+    {
+      mode: authMode.value,
+      selectedPhoto: authProfilePhoto.value,
+      username: authUsername.value,
+    } satisfies AuthMediaContext,
+  )
+  void router.push({
+    path: `/apps/${app}`,
+    query: { mediaAttachment: 'photo' },
+  })
 }
 
 async function createProfile(): Promise<void> {
@@ -738,8 +768,12 @@ onMounted(async () => {
   window.addEventListener('keydown', handleMediaPreviewKeydown)
   const selection =
     messageMedia.consumeMany<ComposerContext>('feather:composer')
-  const profileSelection =
-    messageMedia.consumeMany<ProfileMediaContext>('feather:profile-avatar')
+  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>(
+    'feather:profile-avatar',
+  )
+  const authSelection = messageMedia.consumeMany<AuthMediaContext>(
+    'feather:auth-avatar',
+  )
   if (selection) {
     if (selection.context) {
       composerBody.value = selection.context.body
@@ -763,6 +797,19 @@ onMounted(async () => {
       }
     }
   }
+  if (authSelection) {
+    if (authSelection.context) {
+      authMode.value = authSelection.context.mode
+      authUsername.value = authSelection.context.username
+      authProfilePhoto.value = authSelection.context.selectedPhoto
+    }
+    if (authSelection.media[0]) {
+      authProfilePhoto.value = {
+        id: authSelection.media[0].id,
+        url: authSelection.media[0].url,
+      }
+    }
+  }
   if (route.query.compose === '1') screen.value = 'composer'
   await feather.bootstrap()
   if (route.query.profileEdit === '1' && feather.profile) screen.value = 'edit'
@@ -790,18 +837,24 @@ onMounted(async () => {
     component="main"
     class="feather-app"
     :class="{
-      'feather-app--active': feather.onboarded,
+      'feather-app--active': feather.onboarded && isAuthenticated,
       'feather-app--home':
-        feather.onboarded && screen === 'main' && tab === 'home',
-      'feather-app--light': feather.onboarded && !phone.isDarkMode,
+        feather.onboarded &&
+        isAuthenticated &&
+        screen === 'main' &&
+        tab === 'home',
+      'feather-app--light': !phone.isDarkMode,
       'feather-app--section':
-        feather.onboarded && screen === 'main' && tab !== 'home',
-      'native-app': feather.onboarded,
+        feather.onboarded &&
+        isAuthenticated &&
+        screen === 'main' &&
+        tab !== 'home',
+      'native-app': feather.onboarded && isAuthenticated,
       'feather-app--compact': compactMode,
     }"
   >
     <kNavbar
-      v-if="feather.onboarded"
+      v-if="feather.onboarded && isAuthenticated"
       class="feather-navbar"
       :left-class="
         screen === 'composer' ? 'feather-navbar__plain-action' : undefined
@@ -874,150 +927,31 @@ onMounted(async () => {
       <span>{{ t('loading') }}</span>
     </div>
 
-    <section v-else-if="!account.email" class="feather-auth">
-      <header class="feather-auth__hero">
-        <div class="feather-welcome__mark"><Feather :size="43" /></div>
-        <div>
-          <span>{{ t('authEyebrow') }}</span>
-          <h1>{{ t('authWelcome') }}</h1>
-          <p>{{ t('authBody') }}</p>
-        </div>
-      </header>
-
-      <form class="feather-auth__card" @submit.prevent="submitAuth">
-        <kSegmented raised class="feather-auth__modes">
-          <kSegmentedButton
-            type="button"
-            :active="authMode === 'login'"
-            @click="switchAuthMode('login')"
-          >
-            {{ t('login') }}
-          </kSegmentedButton>
-          <kSegmentedButton
-            type="button"
-            :active="authMode === 'register'"
-            @click="switchAuthMode('register')"
-          >
-            {{ t('register') }}
-          </kSegmentedButton>
-        </kSegmented>
-
-        <div class="feather-auth__copy">
-          <h2>
-            {{ t(authMode === 'login' ? 'loginTitle' : 'registerTitle') }}
-          </h2>
-          <p>{{ t(authMode === 'login' ? 'loginBody' : 'registerBody') }}</p>
-        </div>
-
-        <kList strong inset class="feather-auth__fields">
-          <kListInput
-            class="relative"
-            :value="authForm.email"
-            :label="t('email')"
-            :placeholder="t('emailPlaceholder')"
-            :maxlength="MAIL_ADDRESS_INPUT_MAX_LENGTH"
-            autocomplete="username"
-            autocapitalize="none"
-            autocorrect="off"
-            inputmode="email"
-            spellcheck="false"
-            :input-class="!authForm.email.includes('@') ? 'pr-20' : undefined"
-            :error="
-              authAttempted && !authEmailValid
-                ? t('authErrors.invalid_email')
-                : ''
-            "
-            @input="updateAuthEmail"
-          >
-            <template #media><Mail :size="19" /></template>
-            <span
-              v-if="!authForm.email.includes('@')"
-              class="feather-auth__domain"
-              >@ifruit.com</span
-            >
-          </kListInput>
-          <kListInput
-            :value="authForm.password"
-            class="relative"
-            :type="authPasswordVisible ? 'text' : 'password'"
-            :label="t('password')"
-            :placeholder="t('passwordPlaceholder')"
-            :maxlength="64"
-            :autocomplete="
-              authMode === 'login' ? 'current-password' : 'new-password'
-            "
-            :error="
-              authAttempted && !authPasswordValid
-                ? t('authErrors.invalid_password')
-                : ''
-            "
-            @input="authForm.password = inputValue($event)"
-          >
-            <template #media><KeyRound :size="19" /></template>
-            <button
-              class="feather-auth__reveal"
-              type="button"
-              :aria-label="
-                t(authPasswordVisible ? 'hidePassword' : 'showPassword')
-              "
-              @click="authPasswordVisible = !authPasswordVisible"
-            >
-              <EyeOff v-if="authPasswordVisible" :size="18" />
-              <Eye v-else :size="18" />
-            </button>
-          </kListInput>
-          <kListInput
-            v-if="authMode === 'register'"
-            :value="authForm.confirm"
-            :type="authPasswordVisible ? 'text' : 'password'"
-            :label="t('confirmPassword')"
-            :placeholder="t('confirmPasswordPlaceholder')"
-            :maxlength="64"
-            autocomplete="new-password"
-            :error="
-              authAttempted && !authConfirmValid
-                ? t('authErrors.password_mismatch')
-                : ''
-            "
-            @input="authForm.confirm = inputValue($event)"
-          >
-            <template #media><ShieldCheck :size="19" /></template>
-          </kListInput>
-        </kList>
-
-        <div v-if="authError" class="feather-auth__error" role="alert">
-          {{ authError }}
-        </div>
-
-        <kButton
-          component="button"
-          type="submit"
-          large
-          rounded
-          :disabled="authBusy"
-          class="feather-primary feather-auth__submit"
-        >
-          <kPreloader v-if="authBusy" />
-          <template v-else>
-            {{ t(authMode === 'login' ? 'loginAction' : 'registerAction') }}
-          </template>
-        </kButton>
-
-        <p class="feather-auth__switch">
-          {{ t(authMode === 'login' ? 'noAccount' : 'haveAccount') }}
-          <button
-            type="button"
-            @click="switchAuthMode(authMode === 'login' ? 'register' : 'login')"
-          >
-            {{ t(authMode === 'login' ? 'registerNow' : 'loginNow') }}
-          </button>
-        </p>
-      </form>
-
-      <div class="feather-auth__trust">
-        <ShieldCheck :size="16" />
-        <span>{{ t('authTrust') }}</span>
-      </div>
+    <section v-else-if="!isAuthenticated" class="feather-auth">
+      <AppProfileAuth
+        :mode="authMode"
+        v-model:username="authUsername"
+        :avatar-url="authProfilePhoto?.url ?? null"
+        :body="t('authBody')"
+        :camera-label="t('takePhoto')"
+        :email="account.email"
+        :email-label="t('email')"
+        :error="authError"
+        :eyebrow="t('authEyebrow')"
+        :gallery-label="t('chooseGallery')"
+        :login-label="t('login')"
+        :max-username-length="30"
+        :min-username-length="3"
+        :pending="authBusy"
+        :register-label="t('register')"
+        :title="t('authWelcome')"
+        :username-label="t('handle')"
+        :username-placeholder="t('handlePlaceholder')"
+        @camera="openAuthMedia('camera')"
+        @gallery="openAuthMedia('photos')"
+        @submit="submitAuth"
+        @update:mode="switchAuthMode"
+      />
     </section>
 
     <section v-else-if="!feather.onboarded" class="feather-onboarding">
@@ -1080,6 +1014,16 @@ onMounted(async () => {
       >
         {{ t('start') }}
       </kButton>
+      <kButton
+        large
+        rounded
+        outline
+        class="feather-onboarding__logout"
+        @click="logoutDialogOpen = true"
+      >
+        <LogOut :size="16" />
+        {{ phone.t('Common.signOut') }}
+      </kButton>
     </section>
 
     <template v-else>
@@ -1234,7 +1178,6 @@ onMounted(async () => {
             <template #media><AlignLeft :size="18" /></template>
           </kListInput>
         </kList>
-
       </section>
 
       <section
@@ -1516,6 +1459,15 @@ onMounted(async () => {
                 <PencilLine :size="15" />
                 <span>{{ t('editProfile') }}</span>
               </kButton>
+              <kButton
+                rounded
+                outline
+                class="feather-profile-action feather-profile-action--logout"
+                @click="logoutDialogOpen = true"
+              >
+                <LogOut :size="15" />
+                <span>{{ phone.t('Common.signOut') }}</span>
+              </kButton>
             </div>
           </div>
         </kGlass>
@@ -2084,6 +2036,12 @@ onMounted(async () => {
       </kFab>
     </template>
 
+    <AccountLogoutDialog
+      v-model:opened="logoutDialogOpen"
+      app-id="feather"
+      :app-name="t('name')"
+    />
+
     <kSheet :opened="settingsOpen" @backdropclick="settingsOpen = false">
       <kBlock strong inset class="feather-settings-sheet">
         <header>
@@ -2219,6 +2177,7 @@ onMounted(async () => {
 .feather-app {
   --feather-blue: #438cf5;
   --feather-blue-dark: #2867d8;
+  --color-primary: var(--feather-blue);
   background: #fff;
   color: #111923;
 }
@@ -2346,12 +2305,16 @@ onMounted(async () => {
   box-shadow: 0 15px 35px rgb(45 111 224 / 25%);
 }
 .feather-auth {
+  --auth-accent: var(--feather-blue);
+  --panel: #18212b;
   min-height: 100%;
   overflow-y: auto;
-  padding: 25px 15px 30px;
+  padding: 68px 15px 34px;
+  color: #f4f7fa;
   background:
-    radial-gradient(circle at 85% 2%, rgb(90 183 255 / 19%), transparent 34%),
-    radial-gradient(circle at 0 37%, rgb(67 140 245 / 9%), transparent 38%);
+    radial-gradient(circle at 85% 5%, rgb(90 183 255 / 18%), transparent 31%),
+    radial-gradient(circle at 0 42%, rgb(67 140 245 / 8%), transparent 36%),
+    #0f151b;
 }
 .feather-auth__hero {
   display: flex;
@@ -2423,31 +2386,41 @@ onMounted(async () => {
 .feather-auth__fields :deep(.k-list-item-media) {
   color: var(--feather-blue);
 }
-.feather-auth__domain,
-.feather-auth__reveal {
-  position: absolute;
-  top: 50%;
-  right: 16px;
-  transform: translateY(-50%);
+.feather-auth__photo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 2px 5px 10px;
+  text-align: left;
 }
-.feather-auth__domain {
-  pointer-events: none;
-  color: #7b8796;
-  font-size: 11px;
-}
-.feather-auth__reveal {
+.feather-auth__photo > span {
   display: grid;
+  width: 62px;
+  height: 62px;
+  flex: none;
   place-items: center;
-  width: 30px;
-  height: 30px;
-  border: 0;
+  overflow: hidden;
   border-radius: 50%;
-  color: #788493;
-  background: transparent;
-}
-.feather-auth__reveal:active {
+  color: var(--feather-blue);
   background: rgb(67 140 245 / 10%);
 }
+.feather-auth__photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.feather-auth__photo > div {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 6px;
+}
+.feather-auth__photo :deep(.k-button) {
+  min-height: 34px;
+  justify-content: flex-start;
+  gap: 6px;
+  font-size: 11px;
+}
 .feather-auth__error {
   margin: 0 4px 10px;
   border-radius: 10px;
@@ -4351,6 +4324,19 @@ onMounted(async () => {
   font-size: 10.5px;
   font-weight: 750;
 }
+.feather-app--active
+  .feather-profile__actions
+  :deep(.feather-profile-action--logout) {
+  grid-column: 1 / -1;
+  border-color: color-mix(in srgb, #f04f65 62%, transparent);
+  color: #f04f65;
+}
+.feather-onboarding__logout {
+  width: 100%;
+  margin-top: 8px;
+  border-color: color-mix(in srgb, #f04f65 62%, transparent);
+  color: #f04f65;
+}
 .feather-app--active .feather-profile-action span {
   min-width: 0;
   overflow: hidden;
diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index 3557f48..da66f1a 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -6,12 +6,10 @@ import {
   ChevronLeft,
   ChevronRight,
   Compass,
-  Eye,
-  EyeOff,
   Heart,
   ImagePlus,
   Images,
-  KeyRound,
+  LogOut,
   Mail,
   MapPin,
   Pencil,
@@ -37,7 +35,10 @@ import { useRoute, useRouter } from 'vue-router'
 
 import CityMarktSelect from '@/components/citymarkt/CityMarktSelect.vue'
 import CityMarktGallery from '@/components/citymarkt/CityMarktGallery.vue'
+import AccountLogoutDialog from '@/components/account/AccountLogoutDialog.vue'
+import AppProfileAuth from '@/components/account/AppProfileAuth.vue'
 import { useAccountStore } from '@/stores/account'
+import { useAppAuthStore } from '@/stores/app-auth'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { useMarketplaceStore } from '@/stores/marketplace'
@@ -46,11 +47,6 @@ import { usePhoneStore } from '@/stores/phone'
 import type { MarketplaceListing } from '@/types/marketplace'
 import type { PagesCategory, PagesPost, PagesProfileDraft } from '@/types/pages'
 import type { PhoneMedia } from '@/types/media'
-import {
-  filterMailAddressInput,
-  MAIL_ADDRESS_INPUT_MAX_LENGTH,
-  normalizeMailAddress,
-} from '@/utils/mail'
 
 type SelectedPhoto = { background: string; id: string }
 type ComposeDraft = {
@@ -62,12 +58,18 @@ type ComposeDraft = {
 }
 type MediaContext = { draft: ComposeDraft; photos: SelectedPhoto[] }
 type ProfileMediaContext = { draft: PagesProfileDraft }
+type AuthMediaContext = {
+  mode: 'login' | 'register'
+  selectedPhoto: PhoneMedia | null
+  username: string
+}
 
 type Screen = 'main' | 'detail' | 'compose'
 type Tab = 'feed' | 'create' | 'profile'
 
 const phone = usePhoneStore()
 const account = useAccountStore()
+const appAuth = useAppAuthStore()
 const messageMedia = useMessageMediaStore()
 const easyShare = useEasyShareStore()
 const marketplace = useMarketplaceStore()
@@ -85,13 +87,18 @@ const feedback = ref('')
 const reactionPending = ref(false)
 const onboardingReady = ref(false)
 const authMode = ref<'login' | 'register'>('login')
-const authForm = ref({ confirm: '', email: '', password: '' })
+const authUsername = ref('')
+const authProfilePhoto = ref<PhoneMedia | null>(null)
 const authPending = ref(false)
-const authPasswordVisible = ref(false)
 const authError = ref('')
 const profileEditing = ref(false)
 const profilePending = ref(false)
-const profileDraft = ref<PagesProfileDraft>({ avatarMediaId: 0, bio: '', handle: '' })
+const logoutDialogOpen = ref(false)
+const profileDraft = ref<PagesProfileDraft>({
+  avatarMediaId: 0,
+  bio: '',
+  handle: '',
+})
 const selectedProfilePhoto = ref<PhoneMedia | null>(null)
 const pickedPhotos = ref<SelectedPhoto[]>([])
 const cityMarktListing = ref<MarketplaceListing | null>(null)
@@ -105,32 +112,60 @@ const draft = ref<ComposeDraft>({
 })
 
 const categoryIds: PagesCategory[] = [
-  'recommendation', 'wanted', 'service', 'event', 'place', 'community', 'citymarkt',
+  'recommendation',
+  'wanted',
+  'service',
+  'event',
+  'place',
+  'community',
+  'citymarkt',
 ]
 const composeCategoryIds = categoryIds.filter((item) => item !== 'citymarkt')
-const districts = ['los_santos', 'vinewood', 'vespucci', 'south_los_santos', 'sandy_shores', 'paleto_bay', 'blaine_county']
+const districts = [
+  'los_santos',
+  'vinewood',
+  'vespucci',
+  'south_los_santos',
+  'sandy_shores',
+  'paleto_bay',
+  'blaine_county',
+]
 const categoryOptions = computed(() => [
   { label: phone.t('Apps.localPages.allCategories'), value: 'all' },
   ...categoryIds.map((value) => ({ label: label('categories', value), value })),
 ])
-const composeCategoryOptions = computed(() => composeCategoryIds.map((value) => ({
-  label: label('categories', value), value,
-})))
-const districtOptions = computed(() => districts.map((value) => ({
-  label: phone.t(`Apps.citymarkt.districts.${value}`), value,
-})))
-const displayedPosts = computed(() => tab.value === 'profile'
-  ? (profileMode.value === 'own' ? pages.ownItems : pages.savedItems)
-  : pages.items)
-const isAuthenticated = computed(() => Boolean(account.email))
-const selectedPhotos = computed(() => draft.value.images
-  .map((id) => pickedPhotos.value.find((photo) => photo.id === id))
-  .filter((photo) => photo !== undefined))
-const selectedImages = computed(() => selectedPhotos.value.map((photo, index) => ({
-  gradient: photo.background,
-  media_id: photo.id,
-  sort_order: index + 1,
-})))
+const composeCategoryOptions = computed(() =>
+  composeCategoryIds.map((value) => ({
+    label: label('categories', value),
+    value,
+  })),
+)
+const districtOptions = computed(() =>
+  districts.map((value) => ({
+    label: phone.t(`Apps.citymarkt.districts.${value}`),
+    value,
+  })),
+)
+const displayedPosts = computed(() =>
+  tab.value === 'profile'
+    ? profileMode.value === 'own'
+      ? pages.ownItems
+      : pages.savedItems
+    : pages.items,
+)
+const isAuthenticated = computed(() => appAuth.isSignedIn('local-pages'))
+const selectedPhotos = computed(() =>
+  draft.value.images
+    .map((id) => pickedPhotos.value.find((photo) => photo.id === id))
+    .filter((photo) => photo !== undefined),
+)
+const selectedImages = computed(() =>
+  selectedPhotos.value.map((photo, index) => ({
+    gradient: photo.background,
+    media_id: photo.id,
+    sort_order: index + 1,
+  })),
+)
 const canPublish = computed(() => {
   const title = draft.value.title.trim().length
   const body = draft.value.body.trim().length
@@ -138,20 +173,26 @@ const canPublish = computed(() => {
 })
 const canSaveProfile = computed(() => {
   const handle = profileDraft.value.handle.trim().toLowerCase()
-  return handle.length >= 3
-    && handle.length <= 24
-    && /^[a-z0-9][a-z0-9._]*[a-z0-9]$/.test(handle)
-    && profileDraft.value.bio.trim().length <= 160
+  return (
+    handle.length >= 3 &&
+    handle.length <= 24 &&
+    /^[a-z0-9][a-z0-9._]*[a-z0-9]$/.test(handle) &&
+    profileDraft.value.bio.trim().length <= 160
+  )
 })
-const profileAvatarUrl = computed(() => selectedProfilePhoto.value?.url
-  ?? (profileDraft.value.avatarMediaId > 0 ? pages.profile?.avatar_url : null))
-const authEmailValid = computed(() => normalizeMailAddress(authForm.value.email) !== null)
-const authPasswordValid = computed(() => {
-  const length = authForm.value.password.length
-  return length >= 6 && length <= 64
+const profileAvatarUrl = computed(
+  () =>
+    selectedProfilePhoto.value?.url ??
+    (profileDraft.value.avatarMediaId > 0 ? pages.profile?.avatar_url : null),
+)
+const authUsernameValid = computed(() => {
+  const username = authUsername.value.trim().toLowerCase()
+  return (
+    username.length >= 3 &&
+    username.length <= 24 &&
+    /^[a-z0-9][a-z0-9._]*[a-z0-9]$/.test(username)
+  )
 })
-const authConfirmValid = computed(() => authMode.value === 'login'
-  || (authForm.value.confirm.length > 0 && authForm.value.confirm === authForm.value.password))
 
 function label(group: string, value: string): string {
   return phone.t(`Apps.localPages.${group}.${value}`)
@@ -162,12 +203,16 @@ function relativeDate(value: number): string {
   const hours = Math.max(1, Math.floor(elapsed / 3_600_000))
   return hours < 24
     ? phone.t('Apps.localPages.hoursAgo', { count: String(hours) })
-    : phone.t('Apps.localPages.daysAgo', { count: String(Math.floor(hours / 24)) })
+    : phone.t('Apps.localPages.daysAgo', {
+        count: String(Math.floor(hours / 24)),
+      })
 }
 
 function showFeedback(key: string): void {
   feedback.value = phone.t(key)
-  window.setTimeout(() => { feedback.value = '' }, 2600)
+  window.setTimeout(() => {
+    feedback.value = ''
+  }, 2600)
 }
 
 async function loadFeed(): Promise<void> {
@@ -210,64 +255,112 @@ async function selectTab(next: Tab): Promise<void> {
   }
 }
 
-function updateAuthEmail(event: Event): void {
-  const input = event.target as HTMLInputElement
-  const filtered = filterMailAddressInput(input.value)
-  if (input.value !== filtered) input.value = filtered
-  authForm.value.email = filtered
-}
-
-function inputValue(event: Event): string {
-  return (event.target as HTMLInputElement).value
-}
-
 function switchAuthMode(mode: 'login' | 'register'): void {
   authMode.value = mode
-  authForm.value.confirm = ''
+  authProfilePhoto.value = null
+  authUsername.value =
+    mode === 'register'
+      ? (account.email.split('@')[0] ?? '')
+          .replace(/[^a-z0-9._]/gi, '_')
+          .slice(0, 24)
+      : ''
   authError.value = ''
 }
 
 function authErrorMessage(error?: string): string {
-  const known = ['invalid_email', 'invalid_password', 'invalid_credentials', 'email_taken', 'rate_limited']
-  return phone.t(`Apps.localPages.authErrors.${error && known.includes(error) ? error : 'default'}`)
+  const known = [
+    'invalid_profile',
+    'invalid_profile_image',
+    'invalid_username',
+    'no_ifruit_account',
+    'profile_exists',
+    'profile_handle_taken',
+    'profile_not_found',
+    'rate_limited',
+  ]
+  return phone.t(
+    `Apps.localPages.authErrors.${error && known.includes(error) ? error : 'default'}`,
+  )
 }
 
 async function submitAuth(): Promise<void> {
   authError.value = ''
-  if (!authEmailValid.value) {
-    authError.value = authErrorMessage('invalid_email')
+  if (!account.email) {
+    authError.value = authErrorMessage('no_ifruit_account')
     return
   }
-  if (!authPasswordValid.value) {
-    authError.value = authErrorMessage('invalid_password')
+  if (!authUsernameValid.value) {
+    authError.value = authErrorMessage('invalid_username')
     return
   }
-  if (!authConfirmValid.value) {
-    authError.value = phone.t('Apps.localPages.authErrors.password_mismatch')
-    return
-  }
-  const email = normalizeMailAddress(authForm.value.email)
-  if (!email) return
+
+  const username = authUsername.value.trim().toLowerCase()
   authPending.value = true
-  const response = authMode.value === 'login'
-    ? await account.login(email, authForm.value.password)
-    : await account.register(email, authForm.value.password)
-  authPending.value = false
-  if (!response.success) {
-    authError.value = authErrorMessage(response.error)
+  const loaded = await pages.loadProfile()
+  if (!loaded || !pages.profile) {
+    authPending.value = false
+    authError.value = authErrorMessage()
     return
   }
-  authForm.value = { confirm: '', email: '', password: '' }
-  authPasswordVisible.value = false
+
+  if (authMode.value === 'login') {
+    authPending.value = false
+    if (!pages.profile.exists) {
+      authError.value = authErrorMessage('profile_not_found')
+      return
+    }
+    if (pages.profile.handle.toLowerCase() !== username) {
+      authError.value = authErrorMessage('invalid_username')
+      return
+    }
+  } else {
+    if (pages.profile.exists) {
+      authPending.value = false
+      authError.value = authErrorMessage('profile_exists')
+      return
+    }
+    const response = await pages.saveProfile({
+      avatarMediaId: authProfilePhoto.value?.id ?? 0,
+      bio: '',
+      handle: username,
+    })
+    authPending.value = false
+    if (!response.success) {
+      authError.value = authErrorMessage(response.error)
+      return
+    }
+  }
+
+  appAuth.signIn('local-pages', account.email)
+  authUsername.value = ''
+  authProfilePhoto.value = null
   await pages.loadProfile()
   ensureBrowserProfile()
   syncProfileDraft()
-  profileEditing.value = !pages.profile?.exists
+  profileEditing.value = false
   tab.value = 'profile'
   screen.value = 'main'
   onboardingReady.value = true
 }
 
+function openAuthMedia(app: 'camera' | 'photos'): void {
+  messageMedia.begin(
+    'local-pages:auth-avatar',
+    'photo',
+    '/apps/local-pages?auth=register',
+    1,
+    {
+      mode: authMode.value,
+      selectedPhoto: authProfilePhoto.value,
+      username: authUsername.value,
+    } satisfies AuthMediaContext,
+  )
+  void router.push({
+    path: `/apps/${app}`,
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
 function syncProfileDraft(): void {
   profileDraft.value = {
     avatarMediaId: pages.profile?.avatar_media_id ?? 0,
@@ -278,12 +371,16 @@ function syncProfileDraft(): void {
 }
 
 function ensureBrowserProfile(): void {
-  const onboardingScenario = new URLSearchParams(window.location.search).get('testScenario')
+  const onboardingScenario = new URLSearchParams(window.location.search).get(
+    'testScenario',
+  )
   if (
     !import.meta.env.DEV ||
-    ['local-pages-onboarding', 'citymarkt-local-pages-account-missing'].includes(
-      onboardingScenario ?? '',
-    ) ||
+    [
+      'local-pages-onboarding',
+      'local-pages-register',
+      'citymarkt-local-pages-account-missing',
+    ].includes(onboardingScenario ?? '') ||
     pages.profile
   )
     return
@@ -318,7 +415,10 @@ function openProfileMedia(app: 'camera' | 'photos'): void {
     1,
     { draft: { ...profileDraft.value } } satisfies ProfileMediaContext,
   )
-  void router.push({ path: `/apps/${app}`, query: { mediaAttachment: 'photo' } })
+  void router.push({
+    path: `/apps/${app}`,
+    query: { mediaAttachment: 'photo' },
+  })
 }
 
 function removeProfilePhoto(): void {
@@ -334,7 +434,8 @@ async function saveProfile(): Promise<void> {
   profilePending.value = true
   try {
     const response = await pages.saveProfile({
-      avatarMediaId: selectedProfilePhoto.value?.id ?? profileDraft.value.avatarMediaId,
+      avatarMediaId:
+        selectedProfilePhoto.value?.id ?? profileDraft.value.avatarMediaId,
       bio: profileDraft.value.bio.trim(),
       handle: profileDraft.value.handle.trim().toLowerCase(),
     })
@@ -391,7 +492,10 @@ function openMediaApp(app: 'camera' | 'photos'): void {
       photos: [...pickedPhotos.value],
     } satisfies MediaContext,
   )
-  void router.push({ path: `/apps/${app}`, query: { mediaAttachment: 'photo' } })
+  void router.push({
+    path: `/apps/${app}`,
+    query: { mediaAttachment: 'photo' },
+  })
 }
 
 async function publish(): Promise<void> {
@@ -412,7 +516,13 @@ async function publish(): Promise<void> {
     showFeedback(`Apps.localPages.errors.${response.error ?? 'default'}`)
     return
   }
-  draft.value = { body: '', category: 'recommendation', district: 'los_santos', images: [], title: '' }
+  draft.value = {
+    body: '',
+    category: 'recommendation',
+    district: 'los_santos',
+    images: [],
+    title: '',
+  }
   pickedPhotos.value = []
   cityMarktListing.value = null
   cityMarktListingId.value = null
@@ -443,22 +553,32 @@ async function react(kind: 'like' | 'save'): Promise<void> {
     showFeedback('Apps.localPages.errors.not_authenticated')
     return
   }
-  const active = kind === 'like' ? !Boolean(selected.value.is_liked) : !Boolean(selected.value.is_saved)
+  const active =
+    kind === 'like'
+      ? !Boolean(selected.value.is_liked)
+      : !Boolean(selected.value.is_saved)
   if (await pages.react(selected.value.id, kind, active)) {
     if (kind === 'like') {
-      selected.value.like_count = Math.max(0, selected.value.like_count + (active ? 1 : -1))
+      selected.value.like_count = Math.max(
+        0,
+        selected.value.like_count + (active ? 1 : -1),
+      )
       selected.value.is_liked = active
     } else selected.value.is_saved = active
   }
 }
 
-async function reactToPost(post: PagesPost, kind: 'like' | 'save'): Promise<void> {
+async function reactToPost(
+  post: PagesPost,
+  kind: 'like' | 'save',
+): Promise<void> {
   if (!isAuthenticated.value) {
     showFeedback('Apps.localPages.errors.not_authenticated')
     return
   }
   if (reactionPending.value) return
-  const active = kind === 'like' ? !Boolean(post.is_liked) : !Boolean(post.is_saved)
+  const active =
+    kind === 'like' ? !Boolean(post.is_liked) : !Boolean(post.is_saved)
   reactionPending.value = true
   try {
     await pages.react(post.id, kind, active)
@@ -477,7 +597,9 @@ async function removePost(): Promise<void> {
 
 function moveGallery(direction: number): void {
   if (!selected.value?.images.length) return
-  galleryIndex.value = (galleryIndex.value + direction + selected.value.images.length) % selected.value.images.length
+  galleryIndex.value =
+    (galleryIndex.value + direction + selected.value.images.length) %
+    selected.value.images.length
 }
 
 function openCityMarktListing(): void {
@@ -504,8 +626,15 @@ function sharePost(post: PagesPost): void {
 }
 
 onMounted(async () => {
-  const selection = messageMedia.consumeMany<MediaContext>('local-pages:compose')
-  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>('local-pages:profile-avatar')
+  const selection = messageMedia.consumeMany<MediaContext>(
+    'local-pages:compose',
+  )
+  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>(
+    'local-pages:profile-avatar',
+  )
+  const authSelection = messageMedia.consumeMany<AuthMediaContext>(
+    'local-pages:auth-avatar',
+  )
   if (selection) {
     if (selection.context) {
       draft.value = selection.context.draft
@@ -513,11 +642,23 @@ onMounted(async () => {
     }
     for (const media of selection.media) {
       const id = String(media.id)
-      if (draft.value.images.includes(id) || draft.value.images.length >= 6) continue
+      if (draft.value.images.includes(id) || draft.value.images.length >= 6)
+        continue
       draft.value.images.push(id)
-      pickedPhotos.value.push({ background: `url(${JSON.stringify(media.url)})`, id })
+      pickedPhotos.value.push({
+        background: `url(${JSON.stringify(media.url)})`,
+        id,
+      })
     }
   }
+  if (authSelection) {
+    if (authSelection.context) {
+      authMode.value = authSelection.context.mode
+      authUsername.value = authSelection.context.username
+      authProfilePhoto.value = authSelection.context.selectedPhoto
+    }
+    if (authSelection.media[0]) authProfilePhoto.value = authSelection.media[0]
+  }
   if (isAuthenticated.value) {
     await pages.loadProfile()
     ensureBrowserProfile()
@@ -530,7 +671,8 @@ onMounted(async () => {
       await loadFeed()
     }
     if (profileSelection) {
-      if (profileSelection.context) profileDraft.value = profileSelection.context.draft
+      if (profileSelection.context)
+        profileDraft.value = profileSelection.context.draft
       if (profileSelection.media[0]) {
         selectedProfilePhoto.value = profileSelection.media[0]
         profileDraft.value.avatarMediaId = profileSelection.media[0].id
@@ -573,7 +715,11 @@ onMounted(async () => {
     if (!listingId || cityMarktListingId.value) screen.value = 'compose'
   }
   const easyShareId = String(route.query.easyShareId ?? '')
-  if (pages.profile?.exists && easyShareId && route.query.easyShareKind === 'post') {
+  if (
+    pages.profile?.exists &&
+    easyShareId &&
+    route.query.easyShareKind === 'post'
+  ) {
     const response = await pages.get(easyShareId)
     if (response.success && response.data) {
       selected.value = response.data
@@ -592,22 +738,41 @@ onMounted(async () => {
     :colors="{ bgIos: 'bg-transparent' }"
   >
     <template v-if="screen === 'main'">
-      <div v-if="!onboardingReady" class="pages__gate-loading">{{ phone.t('Common.loading') }}</div>
+      <div v-if="!onboardingReady" class="pages__gate-loading">
+        {{ phone.t('Common.loading') }}
+      </div>
       <k-navbar
         v-if="onboardingReady && isAuthenticated && pages.profile?.exists"
         class="pages-navbar"
-        :subtitle="phone.t(tab === 'feed' ? 'Apps.localPages.eyebrow' : 'Apps.localPages.name')"
-        :title="phone.t(tab === 'feed' ? 'Apps.localPages.name' : 'Apps.localPages.profile')"
+        :subtitle="
+          phone.t(
+            tab === 'feed' ? 'Apps.localPages.eyebrow' : 'Apps.localPages.name',
+          )
+        "
+        :title="
+          phone.t(
+            tab === 'feed' ? 'Apps.localPages.name' : 'Apps.localPages.profile',
+          )
+        "
       />
 
       <section
         v-if="onboardingReady"
         class="pages__content"
-        :class="{ 'pages__content--gate': !isAuthenticated || !pages.profile?.exists }"
+        :class="{
+          'pages__content--gate': !isAuthenticated || !pages.profile?.exists,
+        }"
       >
         <template v-if="tab === 'feed'">
           <k-glass class="pages-hero-glass">
-            <div class="pages__hero"><div><small>{{ phone.t('Apps.localPages.cityPulse') }}</small><strong>{{ phone.t('Apps.localPages.heroTitle') }}</strong><span>{{ phone.t('Apps.localPages.heroBody') }}</span></div><MapPin :size="40" /></div>
+            <div class="pages__hero">
+              <div>
+                <small>{{ phone.t('Apps.localPages.cityPulse') }}</small
+                ><strong>{{ phone.t('Apps.localPages.heroTitle') }}</strong
+                ><span>{{ phone.t('Apps.localPages.heroBody') }}</span>
+              </div>
+              <MapPin :size="40" />
+            </div>
           </k-glass>
           <k-searchbar
             component="form"
@@ -618,77 +783,123 @@ onMounted(async () => {
             @clear="clearSearch"
             @submit.prevent="loadFeed"
           />
-          <CityMarktSelect :model-value="category" :options="categoryOptions" @change="(value) => { category = value; loadFeed() }" />
+          <CityMarktSelect
+            :model-value="category"
+            :options="categoryOptions"
+            @change="
+              (value) => {
+                category = value
+                loadFeed()
+              }
+            "
+          />
         </template>
 
         <template v-else>
           <section v-if="!isAuthenticated" class="pages__auth">
-            <header class="pages__auth-head">
-              <span><UserRound :size="23" /></span>
-              <div><small>{{ phone.t('Apps.localPages.authEyebrow') }}</small><strong>{{ phone.t('Apps.localPages.authWelcome') }}</strong><p>{{ phone.t('Apps.localPages.authBody') }}</p></div>
-            </header>
-            <div class="pages__auth-modes">
-              <button type="button" :class="{ active: authMode === 'login' }" @click="switchAuthMode('login')">{{ phone.t('Apps.localPages.login') }}</button>
-              <button type="button" :class="{ active: authMode === 'register' }" @click="switchAuthMode('register')">{{ phone.t('Apps.localPages.register') }}</button>
-            </div>
-            <form class="pages__auth-form" @submit.prevent="submitAuth">
-              <div class="pages__auth-copy"><strong>{{ phone.t(authMode === 'login' ? 'Apps.localPages.loginTitle' : 'Apps.localPages.registerTitle') }}</strong><p>{{ phone.t(authMode === 'login' ? 'Apps.localPages.loginBody' : 'Apps.localPages.registerBody') }}</p></div>
-              <label>
-                {{ phone.t('Apps.localPages.authEmail') }}
-                <k-glass class="pages__auth-field">
-                  <Mail :size="16" />
-                  <input :value="authForm.email" :maxlength="MAIL_ADDRESS_INPUT_MAX_LENGTH" autocomplete="username" autocapitalize="none" autocorrect="off" inputmode="email" spellcheck="false" :placeholder="phone.t('Apps.localPages.authEmailPlaceholder')" @input="updateAuthEmail" />
-                  <span v-if="authForm.email && !authForm.email.includes('@')">@ifruit.com</span>
-                </k-glass>
-              </label>
-              <label>
-                {{ phone.t('Apps.localPages.authPassword') }}
-                <k-glass class="pages__auth-field">
-                  <KeyRound :size="16" />
-                  <input :value="authForm.password" :type="authPasswordVisible ? 'text' : 'password'" maxlength="64" :autocomplete="authMode === 'login' ? 'current-password' : 'new-password'" :placeholder="phone.t('Apps.localPages.authPasswordPlaceholder')" @input="authForm.password = inputValue($event)" />
-                  <button type="button" :aria-label="phone.t(authPasswordVisible ? 'Apps.localPages.hidePassword' : 'Apps.localPages.showPassword')" @click="authPasswordVisible = !authPasswordVisible"><EyeOff v-if="authPasswordVisible" :size="16" /><Eye v-else :size="16" /></button>
-                </k-glass>
-              </label>
-              <label v-if="authMode === 'register'">
-                {{ phone.t('Apps.localPages.authConfirmPassword') }}
-                <k-glass class="pages__auth-field">
-                  <KeyRound :size="16" />
-                  <input :value="authForm.confirm" :type="authPasswordVisible ? 'text' : 'password'" maxlength="64" autocomplete="new-password" :placeholder="phone.t('Apps.localPages.authConfirmPlaceholder')" @input="authForm.confirm = inputValue($event)" />
-                </k-glass>
-              </label>
-              <p v-if="authError" class="pages__auth-error">{{ authError }}</p>
-              <k-glass class="pages__auth-submit"><button type="submit" :disabled="authPending">{{ phone.t(authMode === 'login' ? 'Apps.localPages.login' : 'Apps.localPages.register') }}</button></k-glass>
-            </form>
+            <AppProfileAuth
+              :mode="authMode"
+              v-model:username="authUsername"
+              :avatar-url="authProfilePhoto?.url ?? null"
+              :body="phone.t('Apps.localPages.authBody')"
+              :camera-label="phone.t('Apps.localPages.camera')"
+              :email="account.email"
+              :email-label="phone.t('Apps.localPages.profileEmail')"
+              :error="authError"
+              :eyebrow="phone.t('Apps.localPages.authEyebrow')"
+              :gallery-label="phone.t('Apps.localPages.gallery')"
+              :login-label="phone.t('Apps.localPages.login')"
+              :max-username-length="24"
+              :min-username-length="3"
+              :pending="authPending"
+              :register-label="phone.t('Apps.localPages.register')"
+              :title="phone.t('Apps.localPages.authWelcome')"
+              :username-label="phone.t('Apps.localPages.profileHandle')"
+              :username-placeholder="
+                phone.t('Apps.localPages.profileHandlePlaceholder')
+              "
+              @camera="openAuthMedia('camera')"
+              @gallery="openAuthMedia('photos')"
+              @submit="submitAuth"
+              @update:mode="switchAuthMode"
+            />
           </section>
           <template v-else>
-            <section v-if="profileEditing || !pages.profile?.exists" class="pages__profile-editor">
+            <section
+              v-if="profileEditing || !pages.profile?.exists"
+              class="pages__profile-editor"
+            >
               <div class="pages__profile-editor-head">
                 <span><UserRound :size="21" /></span>
                 <div>
-                  <strong>{{ phone.t(pages.profile?.exists ? 'Apps.localPages.editProfile' : 'Apps.localPages.createProfile') }}</strong>
-                  <small>{{ phone.t('Apps.localPages.profileSetupBody') }}</small>
+                  <strong>{{
+                    phone.t(
+                      pages.profile?.exists
+                        ? 'Apps.localPages.editProfile'
+                        : 'Apps.localPages.createProfile',
+                    )
+                  }}</strong>
+                  <small>{{
+                    phone.t('Apps.localPages.profileSetupBody')
+                  }}</small>
                 </div>
               </div>
               <div class="pages__profile-photo-editor">
                 <span class="pages__profile-photo-preview">
-                  <img v-if="profileAvatarUrl" :src="profileAvatarUrl" :alt="phone.t('Apps.localPages.profilePhoto')" />
+                  <img
+                    v-if="profileAvatarUrl"
+                    :src="profileAvatarUrl"
+                    :alt="phone.t('Apps.localPages.profilePhoto')"
+                  />
                   <UserRound v-else :size="30" />
                 </span>
                 <div>
                   <strong>{{ phone.t('Apps.localPages.profilePhoto') }}</strong>
-                  <small>{{ phone.t('Apps.localPages.profilePhotoHint') }}</small>
+                  <small>{{
+                    phone.t('Apps.localPages.profilePhotoHint')
+                  }}</small>
                   <div class="pages__profile-photo-actions">
-                    <k-glass><button type="button" @click="openProfileMedia('camera')"><Camera :size="15" />{{ phone.t('Apps.localPages.camera') }}</button></k-glass>
-                    <k-glass><button type="button" @click="openProfileMedia('photos')"><Images :size="15" />{{ phone.t('Apps.localPages.gallery') }}</button></k-glass>
+                    <k-glass
+                      ><button
+                        type="button"
+                        @click="openProfileMedia('camera')"
+                      >
+                        <Camera :size="15" />{{
+                          phone.t('Apps.localPages.camera')
+                        }}
+                      </button></k-glass
+                    >
+                    <k-glass
+                      ><button
+                        type="button"
+                        @click="openProfileMedia('photos')"
+                      >
+                        <Images :size="15" />{{
+                          phone.t('Apps.localPages.gallery')
+                        }}
+                      </button></k-glass
+                    >
                   </div>
-                  <button v-if="profileAvatarUrl" class="pages__profile-photo-remove" type="button" @click="removeProfilePhoto">{{ phone.t('Apps.localPages.removeProfilePhoto') }}</button>
+                  <button
+                    v-if="profileAvatarUrl"
+                    class="pages__profile-photo-remove"
+                    type="button"
+                    @click="removeProfilePhoto"
+                  >
+                    {{ phone.t('Apps.localPages.removeProfilePhoto') }}
+                  </button>
                 </div>
               </div>
               <label>
                 {{ phone.t('Apps.localPages.profileEmail') }}
-                <k-glass class="pages__profile-field pages__profile-field--readonly">
+                <k-glass
+                  class="pages__profile-field pages__profile-field--readonly"
+                >
                   <Mail :size="16" />
-                  <input :value="pages.profile?.email || account.email" readonly />
+                  <input
+                    :value="pages.profile?.email || account.email"
+                    readonly
+                  />
                 </k-glass>
               </label>
               <label>
@@ -696,55 +907,215 @@ onMounted(async () => {
                 <span>{{ profileDraft.handle.trim().length }}/24</span>
                 <k-glass class="pages__profile-field">
                   <b>@</b>
-                  <input v-model="profileDraft.handle" maxlength="24" :placeholder="phone.t('Apps.localPages.profileHandlePlaceholder')" autocapitalize="none" />
+                  <input
+                    v-model="profileDraft.handle"
+                    maxlength="24"
+                    :placeholder="
+                      phone.t('Apps.localPages.profileHandlePlaceholder')
+                    "
+                    autocapitalize="none"
+                  />
                 </k-glass>
-                <small>{{ phone.t('Apps.localPages.profileHandleHint') }}</small>
+                <small>{{
+                  phone.t('Apps.localPages.profileHandleHint')
+                }}</small>
               </label>
               <label>
                 {{ phone.t('Apps.localPages.profileBio') }}
                 <span>{{ profileDraft.bio.trim().length }}/160</span>
                 <k-glass class="pages__profile-field pages__profile-field--bio">
-                  <textarea v-model="profileDraft.bio" maxlength="160" :placeholder="phone.t('Apps.localPages.profileBioPlaceholder')" />
+                  <textarea
+                    v-model="profileDraft.bio"
+                    maxlength="160"
+                    :placeholder="
+                      phone.t('Apps.localPages.profileBioPlaceholder')
+                    "
+                  />
                 </k-glass>
               </label>
               <div class="pages__profile-actions">
-                <k-glass v-if="pages.profile?.exists" class="pages__profile-action"><button type="button" @click="cancelProfileEdit">{{ phone.t('Apps.localPages.profileCancel') }}</button></k-glass>
-                <k-glass class="pages__profile-action pages__profile-action--save"><button type="button" :disabled="!canSaveProfile || profilePending" @click="saveProfile">{{ phone.t('Apps.localPages.profileSave') }}</button></k-glass>
+                <k-glass
+                  v-if="pages.profile?.exists"
+                  class="pages__profile-action"
+                  ><button type="button" @click="cancelProfileEdit">
+                    {{ phone.t('Apps.localPages.profileCancel') }}
+                  </button></k-glass
+                >
+                <k-glass
+                  class="pages__profile-action pages__profile-action--save"
+                  ><button
+                    type="button"
+                    :disabled="!canSaveProfile || profilePending"
+                    @click="saveProfile"
+                  >
+                    {{ phone.t('Apps.localPages.profileSave') }}
+                  </button></k-glass
+                >
               </div>
             </section>
             <template v-else>
               <k-glass class="pages-profile-glass">
                 <div class="pages__profile">
-                  <span><img v-if="pages.profile.avatar_url" :src="pages.profile.avatar_url" alt="" /><template v-else>{{ pages.profile.handle.charAt(0).toUpperCase() }}</template></span>
-                  <div><small>{{ phone.t('Apps.localPages.localCreator') }}</small><strong>@{{ pages.profile.handle }}</strong><b>{{ pages.profile.post_count }} {{ phone.t('Apps.localPages.posts') }}</b><p v-if="pages.profile.bio">{{ pages.profile.bio }}</p></div>
-                  <button class="pages__profile-edit" type="button" :aria-label="phone.t('Apps.localPages.editProfile')" @click="editProfile"><Pencil :size="15" /></button>
+                  <span
+                    ><img
+                      v-if="pages.profile.avatar_url"
+                      :src="pages.profile.avatar_url"
+                      alt=""
+                    /><template v-else>{{
+                      pages.profile.handle.charAt(0).toUpperCase()
+                    }}</template></span
+                  >
+                  <div>
+                    <small>{{ phone.t('Apps.localPages.localCreator') }}</small
+                    ><strong>@{{ pages.profile.handle }}</strong
+                    ><b
+                      >{{ pages.profile.post_count }}
+                      {{ phone.t('Apps.localPages.posts') }}</b
+                    >
+                    <p v-if="pages.profile.bio">{{ pages.profile.bio }}</p>
+                  </div>
+                  <button
+                    class="pages__profile-edit"
+                    type="button"
+                    :aria-label="phone.t('Apps.localPages.editProfile')"
+                    @click="editProfile"
+                  >
+                    <Pencil :size="15" />
+                  </button>
                 </div>
               </k-glass>
               <k-glass class="pages-segmented-glass">
-                <div class="pages__segmented"><button :class="{ active: profileMode === 'own' }" @click="profileMode = 'own'">{{ phone.t('Apps.localPages.myPosts') }}</button><button :class="{ active: profileMode === 'saved' }" @click="profileMode = 'saved'">{{ phone.t('Apps.localPages.saved') }}</button></div>
+                <div class="pages__segmented">
+                  <button
+                    :class="{ active: profileMode === 'own' }"
+                    @click="profileMode = 'own'"
+                  >
+                    {{ phone.t('Apps.localPages.myPosts') }}</button
+                  ><button
+                    :class="{ active: profileMode === 'saved' }"
+                    @click="profileMode = 'saved'"
+                  >
+                    {{ phone.t('Apps.localPages.saved') }}
+                  </button>
+                </div>
               </k-glass>
             </template>
+            <k-glass class="pages__logout-glass">
+              <button
+                type="button"
+                class="pages__logout"
+                @click="logoutDialogOpen = true"
+              >
+                <LogOut :size="16" />
+                {{ phone.t('Common.signOut') }}
+              </button>
+            </k-glass>
           </template>
         </template>
 
-        <div v-if="pages.isLoading" class="pages__empty">{{ phone.t('Common.loading') }}</div>
-        <div v-else-if="tab === 'feed' || (isAuthenticated && pages.profile?.exists && !profileEditing)" class="pages__feed">
-          <k-glass v-for="post in displayedPosts" :key="post.id" class="pages-post-glass">
+        <div v-if="pages.isLoading" class="pages__empty">
+          {{ phone.t('Common.loading') }}
+        </div>
+        <div
+          v-else-if="
+            tab === 'feed' ||
+            (isAuthenticated && pages.profile?.exists && !profileEditing)
+          "
+          class="pages__feed"
+        >
+          <k-glass
+            v-for="post in displayedPosts"
+            :key="post.id"
+            class="pages-post-glass"
+          >
             <article class="pages__post">
-            <button class="pages__post-open" type="button" @click="openPost(post)">
-              <div class="pages__post-head"><span><img v-if="post.author_avatar" :src="post.author_avatar" alt="" /><template v-else>{{ post.author_name.charAt(0).toUpperCase() }}</template></span><div><strong>@{{ post.author_name }}</strong><small><MapPin :size="10" /> {{ post.district ? phone.t(`Apps.citymarkt.districts.${post.district}`) : phone.t('Apps.localPages.allLosSantos') }} · {{ relativeDate(post.created_at) }}</small></div><i>{{ label('categories', post.category) }}</i></div>
-              <div v-if="post.image" class="pages__cover" :style="{ background: post.image }"><b v-if="post.images.length > 1">1 / {{ post.images.length }}</b></div>
-              <h2>{{ post.title }}</h2><p>{{ post.body }}</p>
-            </button>
-            <div class="pages__post-foot">
-              <button type="button" :class="{ active: post.is_liked }" :disabled="reactionPending" :aria-label="phone.t('Apps.localPages.likes')" @click="reactToPost(post, 'like')"><Heart :size="15" :fill="post.is_liked ? 'currentColor' : 'none'" /> {{ post.like_count }}</button>
-              <span v-if="post.source_type === 'citymarkt'"><Store :size="14" /> CityMarkt</span>
-              <button type="button" :aria-label="phone.t('Apps.easyShare.share')" @click="sharePost(post)"><Share2 :size="15" /> {{ phone.t('Apps.easyShare.share') }}</button>
-              <button type="button" :class="{ active: post.is_saved }" :disabled="reactionPending" :aria-label="phone.t('Apps.localPages.save')" @click="reactToPost(post, 'save')"><Bookmark :size="15" :fill="post.is_saved ? 'currentColor' : 'none'" /> {{ phone.t('Apps.localPages.save') }}</button>
-            </div>
+              <button
+                class="pages__post-open"
+                type="button"
+                @click="openPost(post)"
+              >
+                <div class="pages__post-head">
+                  <span
+                    ><img
+                      v-if="post.author_avatar"
+                      :src="post.author_avatar"
+                      alt=""
+                    /><template v-else>{{
+                      post.author_name.charAt(0).toUpperCase()
+                    }}</template></span
+                  >
+                  <div>
+                    <strong>@{{ post.author_name }}</strong
+                    ><small
+                      ><MapPin :size="10" />
+                      {{
+                        post.district
+                          ? phone.t(`Apps.citymarkt.districts.${post.district}`)
+                          : phone.t('Apps.localPages.allLosSantos')
+                      }}
+                      · {{ relativeDate(post.created_at) }}</small
+                    >
+                  </div>
+                  <i>{{ label('categories', post.category) }}</i>
+                </div>
+                <div
+                  v-if="post.image"
+                  class="pages__cover"
+                  :style="{ background: post.image }"
+                >
+                  <b v-if="post.images.length > 1"
+                    >1 / {{ post.images.length }}</b
+                  >
+                </div>
+                <h2>{{ post.title }}</h2>
+                <p>{{ post.body }}</p>
+              </button>
+              <div class="pages__post-foot">
+                <button
+                  type="button"
+                  :class="{ active: post.is_liked }"
+                  :disabled="reactionPending"
+                  :aria-label="phone.t('Apps.localPages.likes')"
+                  @click="reactToPost(post, 'like')"
+                >
+                  <Heart
+                    :size="15"
+                    :fill="post.is_liked ? 'currentColor' : 'none'"
+                  />
+                  {{ post.like_count }}
+                </button>
+                <span v-if="post.source_type === 'citymarkt'"
+                  ><Store :size="14" /> CityMarkt</span
+                >
+                <button
+                  type="button"
+                  :aria-label="phone.t('Apps.easyShare.share')"
+                  @click="sharePost(post)"
+                >
+                  <Share2 :size="15" /> {{ phone.t('Apps.easyShare.share') }}
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: post.is_saved }"
+                  :disabled="reactionPending"
+                  :aria-label="phone.t('Apps.localPages.save')"
+                  @click="reactToPost(post, 'save')"
+                >
+                  <Bookmark
+                    :size="15"
+                    :fill="post.is_saved ? 'currentColor' : 'none'"
+                  />
+                  {{ phone.t('Apps.localPages.save') }}
+                </button>
+              </div>
             </article>
           </k-glass>
-          <div v-if="!displayedPosts.length" class="pages__empty"><Compass :size="38" /><strong>{{ phone.t('Apps.localPages.noPosts') }}</strong><span>{{ phone.t('Apps.localPages.noPostsBody') }}</span></div>
+          <div v-if="!displayedPosts.length" class="pages__empty">
+            <Compass :size="38" /><strong>{{
+              phone.t('Apps.localPages.noPosts')
+            }}</strong
+            ><span>{{ phone.t('Apps.localPages.noPostsBody') }}</span>
+          </div>
         </div>
       </section>
 
@@ -764,16 +1135,29 @@ onMounted(async () => {
             :link-props="{ class: 'pages-tab-button', type: 'button' }"
             @click="selectTab('feed')"
           >
-            <template #label><span class="pages__tab-label">{{ phone.t('Apps.localPages.discover') }}</span></template>
-            <template #icon><k-icon><Compass :size="20" /></k-icon></template>
+            <template #label
+              ><span class="pages__tab-label">{{
+                phone.t('Apps.localPages.discover')
+              }}</span></template
+            >
+            <template #icon
+              ><k-icon><Compass :size="20" /></k-icon
+            ></template>
           </k-tabbar-link>
           <k-tabbar-link
             component="button"
             :link-props="{ class: 'pages-tab-button', type: 'button' }"
             @click="selectTab('create')"
           >
-            <template #label><span class="pages__tab-label">{{ phone.t('Apps.localPages.create') }}</span></template>
-            <template #icon><span class="pages__tab-icon pages__tab-icon--create"><k-icon><Plus :size="21" /></k-icon></span></template>
+            <template #label
+              ><span class="pages__tab-label">{{
+                phone.t('Apps.localPages.create')
+              }}</span></template
+            >
+            <template #icon
+              ><span class="pages__tab-icon pages__tab-icon--create"
+                ><k-icon><Plus :size="21" /></k-icon></span
+            ></template>
           </k-tabbar-link>
           <k-tabbar-link
             component="button"
@@ -781,8 +1165,14 @@ onMounted(async () => {
             :link-props="{ class: 'pages-tab-button', type: 'button' }"
             @click="selectTab('profile')"
           >
-            <template #label><span class="pages__tab-label">{{ phone.t('Apps.localPages.profile') }}</span></template>
-            <template #icon><k-icon><UserRound :size="20" /></k-icon></template>
+            <template #label
+              ><span class="pages__tab-label">{{
+                phone.t('Apps.localPages.profile')
+              }}</span></template
+            >
+            <template #icon
+              ><k-icon><UserRound :size="20" /></k-icon
+            ></template>
           </k-tabbar-link>
         </k-toolbar-pane>
       </k-tabbar>
@@ -790,25 +1180,115 @@ onMounted(async () => {
 
     <section v-else-if="screen === 'detail' && selected" class="pages__detail">
       <header>
-        <k-glass component="button" type="button" class="pages__detail-control" @click="screen = 'main'">
+        <k-glass
+          component="button"
+          type="button"
+          class="pages__detail-control"
+          @click="screen = 'main'"
+        >
           <ArrowLeft :size="20" />
         </k-glass>
         <strong>{{ phone.t('Apps.localPages.post') }}</strong>
-        <k-glass v-if="selected.is_owner" component="button" type="button" class="pages__detail-control danger" @click="removePost">
+        <k-glass
+          v-if="selected.is_owner"
+          component="button"
+          type="button"
+          class="pages__detail-control danger"
+          @click="removePost"
+        >
           <Trash2 :size="18" />
         </k-glass>
-        <k-glass v-else component="button" type="button" class="pages__detail-control" @click="react('save')">
-          <Bookmark :size="18" :fill="selected.is_saved ? 'currentColor' : 'none'" />
+        <k-glass
+          v-else
+          component="button"
+          type="button"
+          class="pages__detail-control"
+          @click="react('save')"
+        >
+          <Bookmark
+            :size="18"
+            :fill="selected.is_saved ? 'currentColor' : 'none'"
+          />
         </k-glass>
       </header>
       <div class="pages__detail-scroll">
-        <div v-if="selected.images.length" class="pages__gallery" :style="{ background: selected.images[galleryIndex]?.gradient }"><button v-if="selected.images.length > 1" @click="moveGallery(-1)"><ChevronLeft /></button><button v-if="selected.images.length > 1" @click="moveGallery(1)"><ChevronRight /></button><span>{{ galleryIndex + 1 }} / {{ selected.images.length }}</span></div>
-        <article><div class="pages__author"><span><img v-if="selected.author_avatar" :src="selected.author_avatar" alt="" /><template v-else>{{ selected.author_name.charAt(0).toUpperCase() }}</template></span><div><strong>@{{ selected.author_name }}</strong><small>{{ relativeDate(selected.created_at) }}</small></div><i>{{ label('categories', selected.category) }}</i></div><h1>{{ selected.title }}</h1><p>{{ selected.body }}</p><div class="pages__location"><MapPin :size="17" /><div><small>{{ phone.t('Apps.localPages.location') }}</small><strong>{{ selected.district ? phone.t(`Apps.citymarkt.districts.${selected.district}`) : phone.t('Apps.localPages.allLosSantos') }}</strong></div></div><button v-if="selected.source_type === 'citymarkt'" class="pages__market-link" @click="openCityMarktListing"><Store :size="18" /><span><small>{{ phone.t('Apps.localPages.sharedFrom') }}</small><strong>{{ phone.t('Apps.localPages.openCityMarkt') }}</strong></span><b v-if="selected.citymarkt_price">${{ Number(selected.citymarkt_price).toLocaleString() }}</b></button></article>
+        <div
+          v-if="selected.images.length"
+          class="pages__gallery"
+          :style="{ background: selected.images[galleryIndex]?.gradient }"
+        >
+          <button v-if="selected.images.length > 1" @click="moveGallery(-1)">
+            <ChevronLeft /></button
+          ><button v-if="selected.images.length > 1" @click="moveGallery(1)">
+            <ChevronRight /></button
+          ><span>{{ galleryIndex + 1 }} / {{ selected.images.length }}</span>
+        </div>
+        <article>
+          <div class="pages__author">
+            <span
+              ><img
+                v-if="selected.author_avatar"
+                :src="selected.author_avatar"
+                alt=""
+              /><template v-else>{{
+                selected.author_name.charAt(0).toUpperCase()
+              }}</template></span
+            >
+            <div>
+              <strong>@{{ selected.author_name }}</strong
+              ><small>{{ relativeDate(selected.created_at) }}</small>
+            </div>
+            <i>{{ label('categories', selected.category) }}</i>
+          </div>
+          <h1>{{ selected.title }}</h1>
+          <p>{{ selected.body }}</p>
+          <div class="pages__location">
+            <MapPin :size="17" />
+            <div>
+              <small>{{ phone.t('Apps.localPages.location') }}</small
+              ><strong>{{
+                selected.district
+                  ? phone.t(`Apps.citymarkt.districts.${selected.district}`)
+                  : phone.t('Apps.localPages.allLosSantos')
+              }}</strong>
+            </div>
+          </div>
+          <button
+            v-if="selected.source_type === 'citymarkt'"
+            class="pages__market-link"
+            @click="openCityMarktListing"
+          >
+            <Store :size="18" /><span
+              ><small>{{ phone.t('Apps.localPages.sharedFrom') }}</small
+              ><strong>{{
+                phone.t('Apps.localPages.openCityMarkt')
+              }}</strong></span
+            ><b v-if="selected.citymarkt_price"
+              >${{ Number(selected.citymarkt_price).toLocaleString() }}</b
+            >
+          </button>
+        </article>
       </div>
       <k-glass class="pages__detail-actions">
-        <button type="button" :class="{ active: selected.is_liked }" @click="react('like')"><Heart :size="19" :fill="selected.is_liked ? 'currentColor' : 'none'" />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}</button>
-        <button type="button" @click="sharePost(selected)"><Share2 :size="19" />{{ phone.t('Apps.easyShare.share') }}</button>
-        <button type="button" @click="react('save')"><Bookmark :size="19" :fill="selected.is_saved ? 'currentColor' : 'none'" />{{ phone.t('Apps.localPages.save') }}</button>
+        <button
+          type="button"
+          :class="{ active: selected.is_liked }"
+          @click="react('like')"
+        >
+          <Heart
+            :size="19"
+            :fill="selected.is_liked ? 'currentColor' : 'none'"
+          />{{ selected.like_count }} {{ phone.t('Apps.localPages.likes') }}
+        </button>
+        <button type="button" @click="sharePost(selected)">
+          <Share2 :size="19" />{{ phone.t('Apps.easyShare.share') }}
+        </button>
+        <button type="button" @click="react('save')">
+          <Bookmark
+            :size="19"
+            :fill="selected.is_saved ? 'currentColor' : 'none'"
+          />{{ phone.t('Apps.localPages.save') }}
+        </button>
       </k-glass>
     </section>
 
@@ -822,16 +1302,38 @@ onMounted(async () => {
         center-title
         left-class="pages-create-action pages-create-action--close !min-w-[58px] !h-11 !p-0 !rounded-full"
         right-class="pages-create-action pages-create-action--publish !min-w-[58px] !h-11 !p-0 !rounded-full"
-        :title="phone.t(cityMarktListing ? 'Apps.localPages.cityMarktComposeNavTitle' : 'Apps.localPages.shareWithCity')"
-        :subtitle="phone.t(cityMarktListing ? 'Apps.localPages.categories.citymarkt' : 'Apps.localPages.newPost')"
+        :title="
+          phone.t(
+            cityMarktListing
+              ? 'Apps.localPages.cityMarktComposeNavTitle'
+              : 'Apps.localPages.shareWithCity',
+          )
+        "
+        :subtitle="
+          phone.t(
+            cityMarktListing
+              ? 'Apps.localPages.categories.citymarkt'
+              : 'Apps.localPages.newPost',
+          )
+        "
       >
         <template #left>
-          <button class="pages-create-close" type="button" :aria-label="phone.t('Common.close')" @click="closeCompose">
+          <button
+            class="pages-create-close"
+            type="button"
+            :aria-label="phone.t('Common.close')"
+            @click="closeCompose"
+          >
             {{ phone.t('Common.close') }}
           </button>
         </template>
         <template #right>
-          <button class="pages-create-publish" type="button" :disabled="!canPublish" @click="publish">
+          <button
+            class="pages-create-publish"
+            type="button"
+            :disabled="!canPublish"
+            @click="publish"
+          >
             {{ phone.t('Apps.localPages.publish') }}
           </button>
         </template>
@@ -840,28 +1342,87 @@ onMounted(async () => {
         <k-glass v-if="cityMarktListing" class="pages__citymarkt-source">
           <Store :size="19" />
           <span
-            ><strong>{{ phone.t('Apps.localPages.cityMarktComposeTitle') }}</strong
-            ><small>{{ phone.t('Apps.localPages.cityMarktComposeHint') }}</small></span
+            ><strong>{{
+              phone.t('Apps.localPages.cityMarktComposeTitle')
+            }}</strong
+            ><small>{{
+              phone.t('Apps.localPages.cityMarktComposeHint')
+            }}</small></span
           >
         </k-glass>
-        <label>{{ phone.t('Apps.localPages.title') }} <span :class="{ valid: draft.title.trim().length >= 5 }">{{ draft.title.trim().length }}/80 · {{ phone.t('Apps.citymarkt.minimumCharacters', { minimum: '5' }) }}</span><k-glass class="pages__field-glass"><input v-model="draft.title" maxlength="80" :placeholder="phone.t('Apps.localPages.titlePlaceholder')" /></k-glass></label>
-        <label>{{ phone.t('Apps.localPages.body') }} <span :class="{ valid: draft.body.trim().length >= 10 }">{{ draft.body.trim().length }}/1500 · {{ phone.t('Apps.citymarkt.minimumCharacters', { minimum: '10' }) }}</span><k-glass class="pages__field-glass pages__field-glass--textarea"><textarea v-model="draft.body" maxlength="1500" :placeholder="phone.t('Apps.localPages.bodyPlaceholder')" /></k-glass></label>
-        <div class="pages__form-row"><label>{{ phone.t('Apps.localPages.category') }}<CityMarktSelect :model-value="draft.category" :options="composeCategoryOptions" @change="(value) => draft.category = value as typeof draft.category" /></label><label>{{ phone.t('Apps.localPages.location') }}<CityMarktSelect :model-value="draft.district" :options="districtOptions" @change="(value) => draft.district = value" /></label></div>
+        <label
+          >{{ phone.t('Apps.localPages.title') }}
+          <span :class="{ valid: draft.title.trim().length >= 5 }"
+            >{{ draft.title.trim().length }}/80 ·
+            {{
+              phone.t('Apps.citymarkt.minimumCharacters', { minimum: '5' })
+            }}</span
+          ><k-glass class="pages__field-glass"
+            ><input
+              v-model="draft.title"
+              maxlength="80"
+              :placeholder="
+                phone.t('Apps.localPages.titlePlaceholder')
+              " /></k-glass
+        ></label>
+        <label
+          >{{ phone.t('Apps.localPages.body') }}
+          <span :class="{ valid: draft.body.trim().length >= 10 }"
+            >{{ draft.body.trim().length }}/1500 ·
+            {{
+              phone.t('Apps.citymarkt.minimumCharacters', { minimum: '10' })
+            }}</span
+          ><k-glass class="pages__field-glass pages__field-glass--textarea">
+            <textarea
+              v-model="draft.body"
+              maxlength="1500"
+              :placeholder="phone.t('Apps.localPages.bodyPlaceholder')"
+            /></k-glass
+        ></label>
+        <div class="pages__form-row">
+          <label
+            >{{ phone.t('Apps.localPages.category')
+            }}<CityMarktSelect
+              :model-value="draft.category"
+              :options="composeCategoryOptions"
+              @change="
+                (value) => (draft.category = value as typeof draft.category)
+              " /></label
+          ><label
+            >{{ phone.t('Apps.localPages.location')
+            }}<CityMarktSelect
+              :model-value="draft.district"
+              :options="districtOptions"
+              @change="(value) => (draft.district = value)"
+          /></label>
+        </div>
         <section class="pages__photos">
           <ImagePlus :size="30" />
           <h2>{{ phone.t('Apps.citymarkt.addPhotos') }}</h2>
-          <p>{{ phone.t(cityMarktListing ? 'Apps.localPages.cityMarktPhotosHint' : 'Apps.citymarkt.addPhotosBody') }}</p>
+          <p>
+            {{
+              phone.t(
+                cityMarktListing
+                  ? 'Apps.localPages.cityMarktPhotosHint'
+                  : 'Apps.citymarkt.addPhotosBody',
+              )
+            }}
+          </p>
           <div class="pages__photo-actions">
-            <k-glass><button type="button" @click="openMediaApp('photos')">
-              <span><Images :size="20" /></span>
-              <strong>{{ phone.t('Apps.citymarkt.chooseGallery') }}</strong>
-              <small>{{ phone.t('Apps.citymarkt.chooseGalleryBody') }}</small>
-            </button></k-glass>
-            <k-glass><button type="button" @click="openMediaApp('camera')">
-              <span><Camera :size="20" /></span>
-              <strong>{{ phone.t('Apps.citymarkt.takePhotos') }}</strong>
-              <small>{{ phone.t('Apps.citymarkt.takePhotosBody') }}</small>
-            </button></k-glass>
+            <k-glass
+              ><button type="button" @click="openMediaApp('photos')">
+                <span><Images :size="20" /></span>
+                <strong>{{ phone.t('Apps.citymarkt.chooseGallery') }}</strong>
+                <small>{{ phone.t('Apps.citymarkt.chooseGalleryBody') }}</small>
+              </button></k-glass
+            >
+            <k-glass
+              ><button type="button" @click="openMediaApp('camera')">
+                <span><Camera :size="20" /></span>
+                <strong>{{ phone.t('Apps.citymarkt.takePhotos') }}</strong>
+                <small>{{ phone.t('Apps.citymarkt.takePhotosBody') }}</small>
+              </button></k-glass
+            >
           </div>
           <div class="pages__selected-heading">
             <strong>{{ phone.t('Apps.citymarkt.selectedPhotos') }}</strong>
@@ -877,57 +1438,1254 @@ onMounted(async () => {
             :photo-label="phone.t('Apps.citymarkt.photo')"
           />
           <div v-if="selectedImages.length" class="pages__selected-strip">
-            <button v-for="(photo, index) in selectedImages" :key="photo.media_id" type="button" :style="{ background: photo.gradient }" :aria-label="phone.t('Apps.citymarkt.removePhoto', { number: String(index + 1) })" @click="togglePhoto(photo.media_id)"><i>{{ index + 1 }}</i><X :size="12" /></button>
+            <button
+              v-for="(photo, index) in selectedImages"
+              :key="photo.media_id"
+              type="button"
+              :style="{ background: photo.gradient }"
+              :aria-label="
+                phone.t('Apps.citymarkt.removePhoto', {
+                  number: String(index + 1),
+                })
+              "
+              @click="togglePhoto(photo.media_id)"
+            >
+              <i>{{ index + 1 }}</i
+              ><X :size="12" />
+            </button>
           </div>
         </section>
       </div>
     </section>
-    <Transition name="toast"><div v-if="feedback" class="pages__toast">{{ feedback }}</div></Transition>
+    <AccountLogoutDialog
+      v-model:opened="logoutDialogOpen"
+      app-id="local-pages"
+      :app-name="phone.t('Apps.localPages.name')"
+      @logged-out="tab = 'profile'"
+    />
+    <Transition name="toast"
+      ><div v-if="feedback" class="pages__toast">
+        {{ feedback }}
+      </div></Transition
+    >
   </k-page>
 </template>
 
 <style scoped>
-.pages{--yellow:#ffd63e;--ink:#15191d;--panel:#20262c;--muted:#9ba4aa;position:absolute;inset:0;padding:47px 0 24px;overflow:hidden;background:#12171b;color:#f7f7f2;font-family:Inter,system-ui,sans-serif}.pages--light{--panel:#f0f0eb;--muted:#737a7d;background:#fbfbf6;color:#171b1e}.pages button,.pages input,.pages textarea{font:inherit;color:inherit}.pages button{border:0}.pages__header{height:65px;padding:6px 14px;display:grid;grid-template-columns:36px 1fr 36px;align-items:center}.pages__header>button,.pages__detail>header button{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--panel)}.pages__header>div{text-align:center}.pages__header span,.pages__compose header small{display:block;color:var(--yellow);font-size:8px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.pages__header h1{margin:0;font-size:22px;line-height:1.05}.pages__content{height:calc(100% - 65px - 59px);padding:0 13px 18px;overflow-y:auto;scrollbar-width:none}.pages__hero{height:105px;margin-bottom:10px;padding:15px;border-radius:17px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(125deg,#514005,#d99a00);color:#fff7d2;box-shadow:0 8px 22px #0003}.pages__hero div{max-width:210px}.pages__hero small,.pages__hero strong,.pages__hero span{display:block}.pages__hero small{font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.pages__hero strong{margin:2px 0;font-size:18px}.pages__hero span{font-size:9px;line-height:1.35}.pages__hero>svg{color:var(--yellow);filter:drop-shadow(0 4px 6px #0005)}.pages__search{height:39px;margin-bottom:7px;padding:0 8px 0 10px;border-radius:11px;display:flex;align-items:center;gap:7px;background:var(--panel);color:var(--muted)}.pages__search input{min-width:0;flex:1;border:0;outline:0;background:none;font-size:11px}.pages__search button{padding:5px 8px;border-radius:7px;background:var(--yellow);color:#17191a;font-size:9px;font-weight:800}.pages__feed{padding-top:10px;display:flex;flex-direction:column;gap:12px}.pages__post{width:100%;padding:11px;border-radius:16px;text-align:left;background:var(--panel);box-shadow:0 5px 18px #0002}.pages__post-head{display:flex;align-items:center;gap:7px}.pages__post-head>span,.pages__profile>span,.pages__author>span{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#20231f;font-size:13px;font-weight:900}.pages__post-head>div{min-width:0;flex:1}.pages__post-head strong,.pages__post-head small{display:block}.pages__post-head strong{font-size:11px}.pages__post-head small{display:flex;align-items:center;gap:2px;overflow:hidden;color:var(--muted);font-size:8px;white-space:nowrap}.pages__post-head i,.pages__author i{padding:4px 6px;border-radius:7px;background:#ffd63e22;color:var(--yellow);font-size:7px;font-style:normal;font-weight:800}.pages__cover{height:138px;margin:9px 0;border-radius:12px;background-size:cover!important;position:relative}.pages__cover>b{position:absolute;right:7px;bottom:7px;padding:3px 6px;border-radius:6px;background:#111b;color:white;font-size:8px}.pages__cover--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(145deg,#262d32,#1a2024)!important;color:var(--muted);font-size:9px}.pages--light .pages__cover--empty{background:#e7e8e2!important}.pages__post h2{margin:0 0 3px;font-size:14px}.pages__post p{margin:0;display:-webkit-box;overflow:hidden;color:var(--muted);font-size:10px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}.pages__post-foot{margin-top:9px;padding-top:8px;border-top:1px solid #ffffff12;display:flex;align-items:center;gap:13px;color:var(--muted);font-size:9px}.pages__post-foot span{display:flex;align-items:center;gap:4px}.pages__post-foot svg:last-child{margin-left:auto}.pages__empty{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--muted)}.pages__empty strong{font-size:15px}.pages__empty span{max-width:220px;font-size:10px}.pages__profile{margin:3px 0 10px;padding:15px;border-radius:17px;display:flex;align-items:center;gap:10px;background:linear-gradient(125deg,#58450b,#262b2f)}.pages__profile>span{width:48px;height:48px;font-size:19px}.pages__profile small,.pages__profile strong,.pages__profile b{display:block}.pages__profile small{color:var(--yellow);font-size:8px;text-transform:uppercase}.pages__profile strong{font-size:16px}.pages__profile b{color:var(--muted);font-size:9px}.pages__segmented{padding:4px;border-radius:11px;display:flex;background:var(--panel)}.pages__segmented button{flex:1;padding:8px;border-radius:8px;background:none;font-size:10px}.pages__segmented button.active{background:var(--yellow);color:#17191a;font-weight:800}.pages__tabbar{position:absolute;right:0;bottom:22px;left:0;height:59px;padding:5px 35px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff13;background:#151a1eea;backdrop-filter:blur(15px)}.pages--light .pages__tabbar{background:#fbfbf6ec}.pages__tabbar button{width:55px;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;color:var(--muted);font-size:8px}.pages__tabbar button.active{color:var(--yellow)}.pages__tabbar .create span{width:44px;height:36px;margin-top:-17px;border-radius:13px;display:grid;place-items:center;background:var(--yellow);color:#17191a;box-shadow:0 5px 15px #0004}.pages__detail,.pages__compose{position:absolute;inset:0;padding-top:47px;background:#12171b}.pages--light .pages__detail,.pages--light .pages__compose{background:#fbfbf6}.pages__detail>header,.pages__compose>header{height:53px;padding:5px 13px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;gap:8px}.pages__detail>header strong{flex:1;text-align:center;font-size:13px}.pages__detail>header .danger{color:#ff6961}.pages__detail-scroll{height:calc(100% - 105px);padding-bottom:64px;overflow-y:auto}.pages__gallery{height:235px;display:flex;align-items:center;justify-content:space-between;background-size:cover!important;position:relative}.pages__gallery button{width:32px;height:38px;margin:8px;border-radius:10px;display:grid;place-items:center;background:#101820aa;color:#fff}.pages__gallery>span{position:absolute;right:10px;bottom:9px;padding:4px 7px;border-radius:7px;background:#101820bb;color:#fff;font-size:8px}.pages__detail article{padding:13px 15px}.pages__author{display:flex;align-items:center;gap:8px}.pages__author>div{flex:1}.pages__author strong,.pages__author small{display:block}.pages__author strong{font-size:12px}.pages__author small{color:var(--muted);font-size:8px}.pages__detail h1{margin:14px 0 5px;font-size:20px}.pages__detail article>p{margin:0;color:var(--muted);font-size:11px;line-height:1.55;white-space:pre-wrap}.pages__location,.pages__market-link{margin-top:14px;padding:10px;border-radius:12px;display:flex;align-items:center;gap:8px;background:var(--panel)}.pages__location svg{color:var(--yellow)}.pages__location small,.pages__location strong,.pages__market-link small,.pages__market-link strong{display:block}.pages__location small,.pages__market-link small{color:var(--muted);font-size:8px}.pages__location strong,.pages__market-link strong{font-size:10px}.pages__market-link{width:100%;text-align:left}.pages__market-link>svg{color:var(--yellow)}.pages__market-link>span{flex:1}.pages__market-link>b{color:var(--yellow);font-size:11px}.pages__detail-actions{position:absolute;right:12px;bottom:30px;left:12px;height:43px;padding:4px;border-radius:14px;display:flex;gap:5px;background:var(--panel);box-shadow:0 7px 25px #0005}.pages__detail-actions button{flex:1;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:5px;background:none;font-size:10px;font-weight:700}.pages__detail-actions button.active{color:#ff6473}.pages__compose>header>div{min-width:0;flex:1}.pages__compose>header strong{display:block;font-size:12px}.pages__compose>header>button{padding:7px;border-radius:10px;background:var(--panel)}.pages__compose>header>button:last-child{display:flex;align-items:center;gap:4px;background:var(--yellow);color:#17191a;font-size:9px;font-weight:800}.pages__compose>header>button:disabled{opacity:.35}.pages__compose-scroll{height:calc(100% - 53px);padding:15px 14px 35px;overflow-y:auto}.pages__compose-scroll label{display:block;margin-bottom:14px;color:var(--muted);font-size:10px;font-weight:700}.pages__compose-scroll label>span{float:right;color:#ff9c47;font-size:8px}.pages__compose-scroll label>span.valid{color:#59d889}.pages__compose input,.pages__compose textarea{width:100%;margin-top:5px;padding:11px;border:1px solid #ffffff13;border-radius:11px;outline:0;background:var(--panel);font-size:12px}.pages__compose textarea{height:116px;resize:none;line-height:1.45}.pages__form-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.pages__photo-title{margin:5px 0 8px;display:flex;align-items:center;justify-content:space-between}.pages__photo-title strong,.pages__photo-title small{display:block}.pages__photo-title strong,.pages__gallery-label{font-size:12px}.pages__photo-title small{color:var(--muted);font-size:8px}.pages__photo-title button{padding:7px 9px;border-radius:9px;display:flex;align-items:center;gap:4px;background:var(--yellow);color:#17191a;font-size:9px;font-weight:800}.pages__selected{margin-bottom:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pages__selected button,.pages__picker button{aspect-ratio:1;border-radius:10px;background-size:cover!important;position:relative}.pages__selected svg{position:absolute;top:5px;right:5px;padding:3px;box-sizing:content-box;border-radius:50%;background:#12171bcc;color:white}.pages__gallery-label{display:block;margin-bottom:7px}.pages__picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pages__picker button{border:2px solid transparent}.pages__picker button.active{border-color:var(--yellow)}.pages__picker i{width:19px;height:19px;margin:4px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#17191a;font-size:9px;font-style:normal;font-weight:900}.pages__toast{position:absolute;z-index:20;right:17px;bottom:91px;left:17px;padding:11px;border-radius:11px;background:#fff6cf;color:#1b2023;box-shadow:0 8px 30px #0007;font-size:10px;font-weight:800;text-align:center}.toast-enter-active,.toast-leave-active{transition:.2s}.toast-enter-from,.toast-leave-to{transform:translateY(8px);opacity:0}
-.pages__tabbar{height:58px;padding:7px 7px 0;justify-content:space-around;backdrop-filter:blur(18px)}
-.pages--light .pages__tabbar{border-color:#00000012}
-.pages__tabbar button{width:54px;gap:2px}
-.pages__tabbar button>span{position:relative}
-.pages__tabbar .create span{width:37px;height:30px;margin-top:-4px;border-radius:10px;box-shadow:none}
-.pages__header{height:64px;padding:6px 16px 8px;display:flex;align-items:center;justify-content:space-between}
-.pages__header>div{text-align:left}
-.pages__header .pages__brand{display:flex;align-items:center;gap:4px;color:var(--yellow);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
-.pages__header h1{margin:1px 0 0;font-size:25px;line-height:1}
-.pages__content{height:calc(100% - 64px - 58px)}
-.pages__segmented button{min-height:34px;padding:8px 10px;font-size:12px;font-weight:700}
-.pages__post-open{width:100%;padding:0;text-align:left;background:none}.pages__post-foot{gap:6px}.pages__post-foot button{min-height:28px;padding:5px 8px;border-radius:9px;display:flex;align-items:center;gap:4px;background:#ffffff08;color:var(--muted);font-size:9px;font-weight:800}.pages__post-foot button:last-child{margin-left:auto}.pages__post-foot button:first-child.active{background:#ff647318;color:#ff6473}.pages__post-foot button:last-child.active{background:#ffd63e1c;color:var(--yellow)}.pages__post-foot button:disabled{opacity:.55}.pages__post-foot button svg:last-child{margin-left:0}.pages--light .pages__post-foot button{background:#00000008}
-.pages__photos{margin-top:5px}.pages__photos>svg{color:var(--yellow)}.pages__photos>h2{margin:7px 0 3px;font-size:19px}.pages__photos>p{margin:0 0 11px;color:var(--muted);font-size:9px;line-height:1.4}.pages__photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pages__photo-actions>button{min-width:0;padding:11px 9px;border:1px solid #ffffff12;border-radius:14px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--panel)}.pages__photo-actions>button>span{width:34px;height:34px;margin-bottom:8px;border-radius:11px;display:grid;place-items:center;background:#ffd63e1c;color:var(--yellow)}.pages__photo-actions strong{font-size:11px}.pages__photo-actions small{margin-top:2px;color:var(--muted);font-size:8px;line-height:1.35}.pages__selected-heading{margin:15px 1px 7px;display:flex;align-items:center;justify-content:space-between}.pages__selected-heading strong{font-size:12px}.pages__selected-heading span{padding:3px 6px;border-radius:7px;background:var(--panel);color:var(--yellow);font-size:9px;font-weight:900}.pages__selection-gallery{height:142px;border-radius:14px}.pages__selected-strip{margin-top:7px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.pages__selected-strip button{position:relative;width:46px;height:46px;flex:none;border:1px solid #ffffff1d;border-radius:9px;background-position:center!important;background-size:cover!important}.pages__selected-strip button i{position:absolute;left:3px;bottom:3px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#17191a;font-size:7px;font-style:normal;font-weight:900}.pages__selected-strip button svg{position:absolute;top:3px;right:3px;padding:2px;box-sizing:content-box;border-radius:50%;background:#11120fc7;color:#fff}
-.pages__photo-source{position:absolute;z-index:8;inset:47px 0 0;padding:14px 14px 33px;background:#12171b}.pages--light .pages__photo-source{background:#fbfbf6}.pages__photo-source>header{height:52px;display:flex;align-items:center;gap:8px}.pages__photo-source>header>div{min-width:0;flex:1}.pages__photo-source>header small,.pages__photo-source>header strong{display:block}.pages__photo-source>header small{color:var(--yellow);font-size:8px;font-weight:900;text-transform:uppercase}.pages__photo-source>header strong{font-size:18px}.pages__photo-source>header>span{padding:4px 7px;border-radius:8px;background:var(--panel);color:var(--yellow);font-size:8px;font-weight:900}.pages__photo-source>header>button{width:31px;height:31px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--panel)}.pages__photo-picker{max-height:calc(100% - 58px);display:grid;grid-template-columns:repeat(3,1fr);gap:7px;overflow-y:auto;scrollbar-width:none}.pages__photo-picker button{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:11px;background-position:center!important;background-size:cover!important}.pages__photo-picker button.active{border-color:var(--yellow)}.pages__photo-picker i{width:19px;height:19px;margin:5px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#17191a;font-size:9px;font-style:normal;font-weight:900}.pages__capture{height:calc(100% - 52px);display:flex;flex-direction:column;align-items:center}.pages__viewfinder{position:relative;width:100%;min-height:305px;overflow:hidden;border-radius:18px;background-position:center!important;background-size:cover!important;box-shadow:inset 0 0 0 1px #ffffff1c}.pages__viewfinder:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0001,#00000038)}.pages__viewfinder>i{position:absolute;z-index:2;width:25px;height:25px;border-color:#fff;border-style:solid}.pages__viewfinder .corner-tl{top:18px;left:18px;border-width:2px 0 0 2px}.pages__viewfinder .corner-tr{top:18px;right:18px;border-width:2px 2px 0 0}.pages__viewfinder .corner-bl{bottom:18px;left:18px;border-width:0 0 2px 2px}.pages__viewfinder .corner-br{right:18px;bottom:18px;border-width:0 2px 2px 0}.pages__camera-flash{position:absolute;z-index:4;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .12s}.pages__camera-flash.active{opacity:.9}.pages__capture p{max-width:230px;margin:9px 0;color:var(--muted);font-size:8px;text-align:center}.pages__shutter{width:58px;height:58px;padding:0;border:5px solid #f5f5ee;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#17191a;box-shadow:0 0 0 2px #ffffff42}.pages--light .pages__photo-actions>button,.pages--light .pages__selected-strip button{border-color:#00000012}
+.pages {
+  --yellow: #ffd63e;
+  --ink: #15191d;
+  --panel: #20262c;
+  --muted: #9ba4aa;
+  position: absolute;
+  inset: 0;
+  padding: 47px 0 24px;
+  overflow: hidden;
+  background: #12171b;
+  color: #f7f7f2;
+  font-family: Inter, system-ui, sans-serif;
+}
+.pages--light {
+  --panel: #f0f0eb;
+  --muted: #737a7d;
+  background: #fbfbf6;
+  color: #171b1e;
+}
+.pages button,
+.pages input,
+.pages textarea {
+  font: inherit;
+  color: inherit;
+}
+.pages button {
+  border: 0;
+}
+.pages__header {
+  height: 65px;
+  padding: 6px 14px;
+  display: grid;
+  grid-template-columns: 36px 1fr 36px;
+  align-items: center;
+}
+.pages__header > button,
+.pages__detail > header button {
+  width: 34px;
+  height: 34px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: var(--panel);
+}
+.pages__header > div {
+  text-align: center;
+}
+.pages__header span,
+.pages__compose header small {
+  display: block;
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+.pages__header h1 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.05;
+}
+.pages__content {
+  height: calc(100% - 65px - 59px);
+  padding: 0 13px 18px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.pages__hero {
+  height: 105px;
+  margin-bottom: 10px;
+  padding: 15px;
+  border-radius: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: linear-gradient(125deg, #514005, #d99a00);
+  color: #fff7d2;
+  box-shadow: 0 8px 22px #0003;
+}
+.pages__hero div {
+  max-width: 210px;
+}
+.pages__hero small,
+.pages__hero strong,
+.pages__hero span {
+  display: block;
+}
+.pages__hero small {
+  font-size: 8px;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.pages__hero strong {
+  margin: 2px 0;
+  font-size: 18px;
+}
+.pages__hero span {
+  font-size: 9px;
+  line-height: 1.35;
+}
+.pages__hero > svg {
+  color: var(--yellow);
+  filter: drop-shadow(0 4px 6px #0005);
+}
+.pages__search {
+  height: 39px;
+  margin-bottom: 7px;
+  padding: 0 8px 0 10px;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  background: var(--panel);
+  color: var(--muted);
+}
+.pages__search input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: none;
+  font-size: 11px;
+}
+.pages__search button {
+  padding: 5px 8px;
+  border-radius: 7px;
+  background: var(--yellow);
+  color: #17191a;
+  font-size: 9px;
+  font-weight: 800;
+}
+.pages__feed {
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pages__post {
+  width: 100%;
+  padding: 11px;
+  border-radius: 16px;
+  text-align: left;
+  background: var(--panel);
+  box-shadow: 0 5px 18px #0002;
+}
+.pages__post-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.pages__post-head > span,
+.pages__profile > span,
+.pages__author > span {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #20231f;
+  font-size: 13px;
+  font-weight: 900;
+}
+.pages__post-head > div {
+  min-width: 0;
+  flex: 1;
+}
+.pages__post-head strong,
+.pages__post-head small {
+  display: block;
+}
+.pages__post-head strong {
+  font-size: 11px;
+}
+.pages__post-head small {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 8px;
+  white-space: nowrap;
+}
+.pages__post-head i,
+.pages__author i {
+  padding: 4px 6px;
+  border-radius: 7px;
+  background: #ffd63e22;
+  color: var(--yellow);
+  font-size: 7px;
+  font-style: normal;
+  font-weight: 800;
+}
+.pages__cover {
+  height: 138px;
+  margin: 9px 0;
+  border-radius: 12px;
+  background-size: cover !important;
+  position: relative;
+}
+.pages__cover > b {
+  position: absolute;
+  right: 7px;
+  bottom: 7px;
+  padding: 3px 6px;
+  border-radius: 6px;
+  background: #111b;
+  color: white;
+  font-size: 8px;
+}
+.pages__cover--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: linear-gradient(145deg, #262d32, #1a2024) !important;
+  color: var(--muted);
+  font-size: 9px;
+}
+.pages--light .pages__cover--empty {
+  background: #e7e8e2 !important;
+}
+.pages__post h2 {
+  margin: 0 0 3px;
+  font-size: 14px;
+}
+.pages__post p {
+  margin: 0;
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.pages__post-foot {
+  margin-top: 9px;
+  padding-top: 8px;
+  border-top: 1px solid #ffffff12;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  color: var(--muted);
+  font-size: 9px;
+}
+.pages__post-foot span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.pages__post-foot svg:last-child {
+  margin-left: auto;
+}
+.pages__empty {
+  min-height: 230px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-align: center;
+  color: var(--muted);
+}
+.pages__empty strong {
+  font-size: 15px;
+}
+.pages__empty span {
+  max-width: 220px;
+  font-size: 10px;
+}
+.pages__profile {
+  margin: 3px 0 10px;
+  padding: 15px;
+  border-radius: 17px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: linear-gradient(125deg, #58450b, #262b2f);
+}
+.pages__profile > span {
+  width: 48px;
+  height: 48px;
+  font-size: 19px;
+}
+.pages__profile small,
+.pages__profile strong,
+.pages__profile b {
+  display: block;
+}
+.pages__profile small {
+  color: var(--yellow);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+.pages__profile strong {
+  font-size: 16px;
+}
+.pages__profile b {
+  color: var(--muted);
+  font-size: 9px;
+}
+.pages__segmented {
+  padding: 4px;
+  border-radius: 11px;
+  display: flex;
+  background: var(--panel);
+}
+.pages__segmented button {
+  flex: 1;
+  padding: 8px;
+  border-radius: 8px;
+  background: none;
+  font-size: 10px;
+}
+.pages__segmented button.active {
+  background: var(--yellow);
+  color: #17191a;
+  font-weight: 800;
+}
+.pages__tabbar {
+  position: absolute;
+  right: 0;
+  bottom: 22px;
+  left: 0;
+  height: 59px;
+  padding: 5px 35px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid #ffffff13;
+  background: #151a1eea;
+  backdrop-filter: blur(15px);
+}
+.pages--light .pages__tabbar {
+  background: #fbfbf6ec;
+}
+.pages__tabbar button {
+  width: 55px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: none;
+  color: var(--muted);
+  font-size: 8px;
+}
+.pages__tabbar button.active {
+  color: var(--yellow);
+}
+.pages__tabbar .create span {
+  width: 44px;
+  height: 36px;
+  margin-top: -17px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #17191a;
+  box-shadow: 0 5px 15px #0004;
+}
+.pages__detail,
+.pages__compose {
+  position: absolute;
+  inset: 0;
+  padding-top: 47px;
+  background: #12171b;
+}
+.pages--light .pages__detail,
+.pages--light .pages__compose {
+  background: #fbfbf6;
+}
+.pages__detail > header,
+.pages__compose > header {
+  height: 53px;
+  padding: 5px 13px;
+  border-bottom: 1px solid #ffffff12;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pages__detail > header strong {
+  flex: 1;
+  text-align: center;
+  font-size: 13px;
+}
+.pages__detail > header .danger {
+  color: #ff6961;
+}
+.pages__detail-scroll {
+  height: calc(100% - 105px);
+  padding-bottom: 64px;
+  overflow-y: auto;
+}
+.pages__gallery {
+  height: 235px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-size: cover !important;
+  position: relative;
+}
+.pages__gallery button {
+  width: 32px;
+  height: 38px;
+  margin: 8px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: #101820aa;
+  color: #fff;
+}
+.pages__gallery > span {
+  position: absolute;
+  right: 10px;
+  bottom: 9px;
+  padding: 4px 7px;
+  border-radius: 7px;
+  background: #101820bb;
+  color: #fff;
+  font-size: 8px;
+}
+.pages__detail article {
+  padding: 13px 15px;
+}
+.pages__author {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pages__author > div {
+  flex: 1;
+}
+.pages__author strong,
+.pages__author small {
+  display: block;
+}
+.pages__author strong {
+  font-size: 12px;
+}
+.pages__author small {
+  color: var(--muted);
+  font-size: 8px;
+}
+.pages__detail h1 {
+  margin: 14px 0 5px;
+  font-size: 20px;
+}
+.pages__detail article > p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+.pages__location,
+.pages__market-link {
+  margin-top: 14px;
+  padding: 10px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--panel);
+}
+.pages__location svg {
+  color: var(--yellow);
+}
+.pages__location small,
+.pages__location strong,
+.pages__market-link small,
+.pages__market-link strong {
+  display: block;
+}
+.pages__location small,
+.pages__market-link small {
+  color: var(--muted);
+  font-size: 8px;
+}
+.pages__location strong,
+.pages__market-link strong {
+  font-size: 10px;
+}
+.pages__market-link {
+  width: 100%;
+  text-align: left;
+}
+.pages__market-link > svg {
+  color: var(--yellow);
+}
+.pages__market-link > span {
+  flex: 1;
+}
+.pages__market-link > b {
+  color: var(--yellow);
+  font-size: 11px;
+}
+.pages__detail-actions {
+  position: absolute;
+  right: 12px;
+  bottom: 30px;
+  left: 12px;
+  height: 43px;
+  padding: 4px;
+  border-radius: 14px;
+  display: flex;
+  gap: 5px;
+  background: var(--panel);
+  box-shadow: 0 7px 25px #0005;
+}
+.pages__detail-actions button {
+  flex: 1;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: none;
+  font-size: 10px;
+  font-weight: 700;
+}
+.pages__detail-actions button.active {
+  color: #ff6473;
+}
+.pages__compose > header > div {
+  min-width: 0;
+  flex: 1;
+}
+.pages__compose > header strong {
+  display: block;
+  font-size: 12px;
+}
+.pages__compose > header > button {
+  padding: 7px;
+  border-radius: 10px;
+  background: var(--panel);
+}
+.pages__compose > header > button:last-child {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--yellow);
+  color: #17191a;
+  font-size: 9px;
+  font-weight: 800;
+}
+.pages__compose > header > button:disabled {
+  opacity: 0.35;
+}
+.pages__compose-scroll {
+  height: calc(100% - 53px);
+  padding: 15px 14px 35px;
+  overflow-y: auto;
+}
+.pages__compose-scroll label {
+  display: block;
+  margin-bottom: 14px;
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+.pages__compose-scroll label > span {
+  float: right;
+  color: #ff9c47;
+  font-size: 8px;
+}
+.pages__compose-scroll label > span.valid {
+  color: #59d889;
+}
+.pages__compose input,
+.pages__compose textarea {
+  width: 100%;
+  margin-top: 5px;
+  padding: 11px;
+  border: 1px solid #ffffff13;
+  border-radius: 11px;
+  outline: 0;
+  background: var(--panel);
+  font-size: 12px;
+}
+.pages__compose textarea {
+  height: 116px;
+  resize: none;
+  line-height: 1.45;
+}
+.pages__form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 7px;
+}
+.pages__photo-title {
+  margin: 5px 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pages__photo-title strong,
+.pages__photo-title small {
+  display: block;
+}
+.pages__photo-title strong,
+.pages__gallery-label {
+  font-size: 12px;
+}
+.pages__photo-title small {
+  color: var(--muted);
+  font-size: 8px;
+}
+.pages__photo-title button {
+  padding: 7px 9px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--yellow);
+  color: #17191a;
+  font-size: 9px;
+  font-weight: 800;
+}
+.pages__selected {
+  margin-bottom: 12px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+.pages__selected button,
+.pages__picker button {
+  aspect-ratio: 1;
+  border-radius: 10px;
+  background-size: cover !important;
+  position: relative;
+}
+.pages__selected svg {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 3px;
+  box-sizing: content-box;
+  border-radius: 50%;
+  background: #12171bcc;
+  color: white;
+}
+.pages__gallery-label {
+  display: block;
+  margin-bottom: 7px;
+}
+.pages__picker {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+.pages__picker button {
+  border: 2px solid transparent;
+}
+.pages__picker button.active {
+  border-color: var(--yellow);
+}
+.pages__picker i {
+  width: 19px;
+  height: 19px;
+  margin: 4px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #17191a;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 900;
+}
+.pages__toast {
+  position: absolute;
+  z-index: 20;
+  right: 17px;
+  bottom: 91px;
+  left: 17px;
+  padding: 11px;
+  border-radius: 11px;
+  background: #fff6cf;
+  color: #1b2023;
+  box-shadow: 0 8px 30px #0007;
+  font-size: 10px;
+  font-weight: 800;
+  text-align: center;
+}
+.toast-enter-active,
+.toast-leave-active {
+  transition: 0.2s;
+}
+.toast-enter-from,
+.toast-leave-to {
+  transform: translateY(8px);
+  opacity: 0;
+}
+.pages__tabbar {
+  height: 58px;
+  padding: 7px 7px 0;
+  justify-content: space-around;
+  backdrop-filter: blur(18px);
+}
+.pages--light .pages__tabbar {
+  border-color: #00000012;
+}
+.pages__tabbar button {
+  width: 54px;
+  gap: 2px;
+}
+.pages__tabbar button > span {
+  position: relative;
+}
+.pages__tabbar .create span {
+  width: 37px;
+  height: 30px;
+  margin-top: -4px;
+  border-radius: 10px;
+  box-shadow: none;
+}
+.pages__header {
+  height: 64px;
+  padding: 6px 16px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pages__header > div {
+  text-align: left;
+}
+.pages__header .pages__brand {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--yellow);
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.pages__header h1 {
+  margin: 1px 0 0;
+  font-size: 25px;
+  line-height: 1;
+}
+.pages__content {
+  height: calc(100% - 64px - 58px);
+}
+.pages__segmented button {
+  min-height: 34px;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.pages__post-open {
+  width: 100%;
+  padding: 0;
+  text-align: left;
+  background: none;
+}
+.pages__post-foot {
+  gap: 6px;
+}
+.pages__post-foot button {
+  min-height: 28px;
+  padding: 5px 8px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #ffffff08;
+  color: var(--muted);
+  font-size: 9px;
+  font-weight: 800;
+}
+.pages__post-foot button:last-child {
+  margin-left: auto;
+}
+.pages__post-foot button:first-child.active {
+  background: #ff647318;
+  color: #ff6473;
+}
+.pages__post-foot button:last-child.active {
+  background: #ffd63e1c;
+  color: var(--yellow);
+}
+.pages__post-foot button:disabled {
+  opacity: 0.55;
+}
+.pages__post-foot button svg:last-child {
+  margin-left: 0;
+}
+.pages--light .pages__post-foot button {
+  background: #00000008;
+}
+.pages__photos {
+  margin-top: 5px;
+}
+.pages__photos > svg {
+  color: var(--yellow);
+}
+.pages__photos > h2 {
+  margin: 7px 0 3px;
+  font-size: 19px;
+}
+.pages__photos > p {
+  margin: 0 0 11px;
+  color: var(--muted);
+  font-size: 9px;
+  line-height: 1.4;
+}
+.pages__photo-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.pages__photo-actions > button {
+  min-width: 0;
+  padding: 11px 9px;
+  border: 1px solid #ffffff12;
+  border-radius: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  background: var(--panel);
+}
+.pages__photo-actions > button > span {
+  width: 34px;
+  height: 34px;
+  margin-bottom: 8px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: #ffd63e1c;
+  color: var(--yellow);
+}
+.pages__photo-actions strong {
+  font-size: 11px;
+}
+.pages__photo-actions small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 8px;
+  line-height: 1.35;
+}
+.pages__selected-heading {
+  margin: 15px 1px 7px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pages__selected-heading strong {
+  font-size: 12px;
+}
+.pages__selected-heading span {
+  padding: 3px 6px;
+  border-radius: 7px;
+  background: var(--panel);
+  color: var(--yellow);
+  font-size: 9px;
+  font-weight: 900;
+}
+.pages__selection-gallery {
+  height: 142px;
+  border-radius: 14px;
+}
+.pages__selected-strip {
+  margin-top: 7px;
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.pages__selected-strip button {
+  position: relative;
+  width: 46px;
+  height: 46px;
+  flex: none;
+  border: 1px solid #ffffff1d;
+  border-radius: 9px;
+  background-position: center !important;
+  background-size: cover !important;
+}
+.pages__selected-strip button i {
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #17191a;
+  font-size: 7px;
+  font-style: normal;
+  font-weight: 900;
+}
+.pages__selected-strip button svg {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  padding: 2px;
+  box-sizing: content-box;
+  border-radius: 50%;
+  background: #11120fc7;
+  color: #fff;
+}
+.pages__photo-source {
+  position: absolute;
+  z-index: 8;
+  inset: 47px 0 0;
+  padding: 14px 14px 33px;
+  background: #12171b;
+}
+.pages--light .pages__photo-source {
+  background: #fbfbf6;
+}
+.pages__photo-source > header {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pages__photo-source > header > div {
+  min-width: 0;
+  flex: 1;
+}
+.pages__photo-source > header small,
+.pages__photo-source > header strong {
+  display: block;
+}
+.pages__photo-source > header small {
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+.pages__photo-source > header strong {
+  font-size: 18px;
+}
+.pages__photo-source > header > span {
+  padding: 4px 7px;
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+}
+.pages__photo-source > header > button {
+  width: 31px;
+  height: 31px;
+  padding: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--panel);
+}
+.pages__photo-picker {
+  max-height: calc(100% - 58px);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 7px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.pages__photo-picker button {
+  position: relative;
+  aspect-ratio: 1;
+  border: 2px solid transparent;
+  border-radius: 11px;
+  background-position: center !important;
+  background-size: cover !important;
+}
+.pages__photo-picker button.active {
+  border-color: var(--yellow);
+}
+.pages__photo-picker i {
+  width: 19px;
+  height: 19px;
+  margin: 5px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #17191a;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 900;
+}
+.pages__capture {
+  height: calc(100% - 52px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pages__viewfinder {
+  position: relative;
+  width: 100%;
+  min-height: 305px;
+  overflow: hidden;
+  border-radius: 18px;
+  background-position: center !important;
+  background-size: cover !important;
+  box-shadow: inset 0 0 0 1px #ffffff1c;
+}
+.pages__viewfinder:after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #0001, #00000038);
+}
+.pages__viewfinder > i {
+  position: absolute;
+  z-index: 2;
+  width: 25px;
+  height: 25px;
+  border-color: #fff;
+  border-style: solid;
+}
+.pages__viewfinder .corner-tl {
+  top: 18px;
+  left: 18px;
+  border-width: 2px 0 0 2px;
+}
+.pages__viewfinder .corner-tr {
+  top: 18px;
+  right: 18px;
+  border-width: 2px 2px 0 0;
+}
+.pages__viewfinder .corner-bl {
+  bottom: 18px;
+  left: 18px;
+  border-width: 0 0 2px 2px;
+}
+.pages__viewfinder .corner-br {
+  right: 18px;
+  bottom: 18px;
+  border-width: 0 2px 2px 0;
+}
+.pages__camera-flash {
+  position: absolute;
+  z-index: 4;
+  inset: 0;
+  background: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+.pages__camera-flash.active {
+  opacity: 0.9;
+}
+.pages__capture p {
+  max-width: 230px;
+  margin: 9px 0;
+  color: var(--muted);
+  font-size: 8px;
+  text-align: center;
+}
+.pages__shutter {
+  width: 58px;
+  height: 58px;
+  padding: 0;
+  border: 5px solid #f5f5ee;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #17191a;
+  box-shadow: 0 0 0 2px #ffffff42;
+}
+.pages--light .pages__photo-actions > button,
+.pages--light .pages__selected-strip button {
+  border-color: #00000012;
+}
 /* Keep community content readable at the physical phone scale. */
-.pages__header span,.pages__compose header small,.pages__header .pages__brand{font-size:12px}
-.pages__hero{padding:13px 15px;gap:12px}.pages__hero div{min-width:0;max-width:205px}.pages__hero small{font-size:9.5px;line-height:1.1}.pages__hero strong{margin:4px 0 3px;font-size:16px;line-height:1.12}.pages__hero span{font-size:11px;line-height:1.3}.pages__hero>svg{flex:none}
-.pages__search input{font-size:13px}.pages__search button{font-size:12px}
-.pages__post-head strong{font-size:13px}.pages__post-head small{font-size:11.5px}
-.pages__post-head i,.pages__author i{font-size:10.5px}
-.pages__cover>b,.pages__gallery>span{font-size:10.5px}
-.pages__cover--empty,.pages__empty span{font-size:12px}
-.pages__post h2{font-size:16px}.pages__post p{font-size:13px}
-.pages__post-foot,.pages__post-foot button{font-size:11.5px}
-.pages__profile small,.pages__profile b{font-size:11.5px}
-.pages__tabbar button{font-size:10.5px}
-.pages__author strong{font-size:14px}
-.pages__author small,.pages__location small,.pages__market-link small{font-size:11.5px}
-.pages__detail article>p{font-size:13px}
-.pages__location strong,.pages__market-link strong{font-size:13px}.pages__market-link>b{font-size:14px}
-.pages__detail-actions button{font-size:12.5px}
-.pages__compose>header strong{font-size:14px}.pages__compose>header>button:last-child{font-size:12px}
-.pages__compose-scroll label{font-size:12px}.pages__compose-scroll label>span{font-size:10.5px}
-.pages__compose input,.pages__compose textarea{font-size:13px}
-.pages__photo-title strong,.pages__gallery-label,.pages__selected-heading strong{font-size:14px}
-.pages__photo-title small,.pages__photos>p,.pages__photo-actions small,.pages__capture p{font-size:11.5px}
-.pages__photo-title button{font-size:12px}.pages__photo-actions strong{font-size:13px}
-.pages__selected-heading span,.pages__photo-source>header small,.pages__photo-source>header>span{font-size:11px}
-.pages__selected-strip button i,.pages__photo-picker i{font-size:10px}
-.pages__toast{font-size:12px}
+.pages__header span,
+.pages__compose header small,
+.pages__header .pages__brand {
+  font-size: 12px;
+}
+.pages__hero {
+  padding: 13px 15px;
+  gap: 12px;
+}
+.pages__hero div {
+  min-width: 0;
+  max-width: 205px;
+}
+.pages__hero small {
+  font-size: 9.5px;
+  line-height: 1.1;
+}
+.pages__hero strong {
+  margin: 4px 0 3px;
+  font-size: 16px;
+  line-height: 1.12;
+}
+.pages__hero span {
+  font-size: 11px;
+  line-height: 1.3;
+}
+.pages__hero > svg {
+  flex: none;
+}
+.pages__search input {
+  font-size: 13px;
+}
+.pages__search button {
+  font-size: 12px;
+}
+.pages__post-head strong {
+  font-size: 13px;
+}
+.pages__post-head small {
+  font-size: 11.5px;
+}
+.pages__post-head i,
+.pages__author i {
+  font-size: 10.5px;
+}
+.pages__cover > b,
+.pages__gallery > span {
+  font-size: 10.5px;
+}
+.pages__cover--empty,
+.pages__empty span {
+  font-size: 12px;
+}
+.pages__post h2 {
+  font-size: 16px;
+}
+.pages__post p {
+  font-size: 13px;
+}
+.pages__post-foot,
+.pages__post-foot button {
+  font-size: 11.5px;
+}
+.pages__profile small,
+.pages__profile b {
+  font-size: 11.5px;
+}
+.pages__tabbar button {
+  font-size: 10.5px;
+}
+.pages__author strong {
+  font-size: 14px;
+}
+.pages__author small,
+.pages__location small,
+.pages__market-link small {
+  font-size: 11.5px;
+}
+.pages__detail article > p {
+  font-size: 13px;
+}
+.pages__location strong,
+.pages__market-link strong {
+  font-size: 13px;
+}
+.pages__market-link > b {
+  font-size: 14px;
+}
+.pages__detail-actions button {
+  font-size: 12.5px;
+}
+.pages__compose > header strong {
+  font-size: 14px;
+}
+.pages__compose > header > button:last-child {
+  font-size: 12px;
+}
+.pages__compose-scroll label {
+  font-size: 12px;
+}
+.pages__compose-scroll label > span {
+  font-size: 10.5px;
+}
+.pages__compose input,
+.pages__compose textarea {
+  font-size: 13px;
+}
+.pages__photo-title strong,
+.pages__gallery-label,
+.pages__selected-heading strong {
+  font-size: 14px;
+}
+.pages__photo-title small,
+.pages__photos > p,
+.pages__photo-actions small,
+.pages__capture p {
+  font-size: 11.5px;
+}
+.pages__photo-title button {
+  font-size: 12px;
+}
+.pages__photo-actions strong {
+  font-size: 13px;
+}
+.pages__selected-heading span,
+.pages__photo-source > header small,
+.pages__photo-source > header > span {
+  font-size: 11px;
+}
+.pages__selected-strip button i,
+.pages__photo-picker i {
+  font-size: 10px;
+}
+.pages__toast {
+  font-size: 12px;
+}
 .pages {
   --color-primary: var(--yellow);
   position: relative;
@@ -986,6 +2744,22 @@ onMounted(async () => {
 .pages-profile-glass {
   margin: 3px 0 10px;
 }
+.pages__logout-glass {
+  margin: 10px 0;
+  border-radius: 12px;
+}
+.pages__logout {
+  width: 100%;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  background: transparent;
+  color: #ff6b70;
+  font-size: 11px;
+  font-weight: 800;
+}
 .pages__profile {
   margin: 0;
   background: transparent;
@@ -1232,7 +3006,7 @@ onMounted(async () => {
   color: var(--yellow);
   font-size: 9px;
   font-weight: 900;
-  letter-spacing: .06em;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 .pages__auth-head strong {
@@ -1334,7 +3108,7 @@ onMounted(async () => {
   font-weight: 850;
 }
 .pages__auth-submit button:disabled {
-  opacity: .45;
+  opacity: 0.45;
 }
 .pages__profile > div {
   min-width: 0;
@@ -1558,6 +3332,6 @@ onMounted(async () => {
   color: var(--yellow);
 }
 .pages__profile-action button:disabled {
-  opacity: .4;
+  opacity: 0.4;
 }
 </style>
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index f7b1a44..beb175c 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -57,6 +57,7 @@ import {
 import { usePhoneStore } from '@/stores/phone'
 import PhonePasscode from '@/components/PhonePasscode.vue'
 import { useAccountStore } from '@/stores/account'
+import { useAppAuthStore } from '@/stores/app-auth'
 import type {
   LaunchablePhoneAppDefinition,
   LaunchablePhoneAppId,
@@ -132,6 +133,7 @@ const FRAME_PICKER_GAP = 8
 
 const phone = usePhoneStore()
 const account = useAccountStore()
+const appAuth = useAppAuthStore()
 const query = ref('')
 const activeView = ref<SettingsView>('root')
 const selectedNotificationAppId = ref<LaunchablePhoneAppId>('calculator')
@@ -602,6 +604,7 @@ async function submitAccount(): Promise<void> {
 
 async function logoutAccount(): Promise<void> {
   if (!(await account.logout())) accountToast.value = accountError()
+  else appAuth.clear()
 }
 
 function requestRemoveDevice(imei: string): void {
@@ -650,6 +653,7 @@ async function confirmFactoryReset(): Promise<void> {
   factoryResetProgress.value = 100
   factoryResetting.value = false
   if (!success) accountToast.value = accountError()
+  else appAuth.hydrate(undefined, '')
 }
 
 async function confirmSimEject(): Promise<void> {
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 34f8cf6..f2b77f8 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -144,6 +144,8 @@ let mockMapMarkers = [
 ]
 let crewLinkProfile = {
   activeGroupId: 'crewlink-group-night-shift',
+  avatarMediaId: 1,
+  avatarUrl: 'https://picsum.photos/seed/crewlink-skyline/240/240',
   id: 'crewlink-profile-skyline',
   mapVisible: true,
   overheadVisible: false,
@@ -176,6 +178,7 @@ const crewLinkMembers = {
   'crewlink-group-night-shift': [
     {
       coords: { x: -155.2, y: -1005.8, z: 28.4 },
+      avatarUrl: 'https://picsum.photos/seed/crewlink-skyline/240/240',
       id: 'crewlink-profile-skyline',
       joinedAt: Date.now() - 36 * 86400000,
       mapVisible: true,
@@ -350,7 +353,10 @@ const crewLinkLimits = {
 }
 
 function crewLinkBootstrap(testScenario = '') {
-  if (testScenario === 'crewlink-onboarding') {
+  if (
+    testScenario === 'crewlink-onboarding' ||
+    (testScenario === 'crewlink-register' && !crewLinkProfile)
+  ) {
     return { groups: [], invitations: [], profile: null }
   }
   if (testScenario === 'crewlink-empty') {
@@ -1985,6 +1991,14 @@ let calendarEvents = [
   },
 ]
 const deviceData = {
+  appAuth: {
+    payload: {
+      accountEmail: 'demo@ifruit.com',
+      signedIn: ['citymarkt', 'local-pages', 'feather', 'crewlink'],
+      version: 1,
+    },
+    revision: 1,
+  },
   alarms: {
     payload: [
       {
@@ -3881,7 +3895,8 @@ const easyShareCatalog = [
     appId: 'citymarkt',
     copyText: 'Comet Retro Custom in excellent condition.',
     id: 'listing-easyshare-comet',
-    imageUrl: 'https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=900',
+    imageUrl:
+      'https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=900',
     kind: 'link',
     link: 'skyphone://citymarkt/listing/listing-easyshare-comet',
     subtitle: '$84,000',
@@ -3905,7 +3920,8 @@ const easyShareCatalog = [
     appId: 'photos',
     copyText: 'Sunset over Los Santos.',
     id: 3,
-    imageUrl: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=900',
+    imageUrl:
+      'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=900',
     kind: 'photo',
     link: 'skyphone://media/3',
     title: 'Los Santos sunset',
@@ -3960,7 +3976,8 @@ const easyShareCatalog = [
     appId: 'photos',
     copyText: 'Vehicle walkaround video.',
     id: 7,
-    imageUrl: 'https://videos.pexels.com/video-files/3130284/3130284-hd_1920_1080_30fps.mp4',
+    imageUrl:
+      'https://videos.pexels.com/video-files/3130284/3130284-hd_1920_1080_30fps.mp4',
     kind: 'video',
     link: 'skyphone://media/7',
     title: 'Vehicle walkaround',
@@ -4453,6 +4470,10 @@ app.post('/api/:endpoint', (request, response) => {
     }
     crewLinkProfile = {
       activeGroupId: null,
+      avatarMediaId: Number(request.body.avatarMediaId) || null,
+      avatarUrl:
+        mockMedia.find((item) => item.id === Number(request.body.avatarMediaId))
+          ?.url ?? null,
       id: `crewlink-profile-${Date.now()}`,
       mapVisible: true,
       overheadVisible: false,
@@ -4462,8 +4483,25 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'crewlink:update-profile') {
+    const hasAvatarUpdate = request.body.avatarMediaId !== undefined
+    const avatarMediaId = Number(request.body.avatarMediaId) || null
+    const avatar = hasAvatarUpdate
+      ? mockMedia.find(
+          (item) => item.id === avatarMediaId && item.mediaType === 'photo',
+        )
+      : null
+    if (avatarMediaId && !avatar) {
+      response.json({ success: false, error: 'invalid_profile_image' })
+      return
+    }
     crewLinkProfile = {
       ...crewLinkProfile,
+      avatarMediaId: hasAvatarUpdate
+        ? avatarMediaId
+        : crewLinkProfile.avatarMediaId,
+      avatarUrl: hasAvatarUpdate
+        ? (avatar?.url ?? null)
+        : crewLinkProfile.avatarUrl,
       mapVisible: request.body.mapVisible === true,
       overheadVisible: request.body.overheadVisible === true,
       username: String(request.body.username ?? crewLinkProfile.username),
@@ -4471,6 +4509,7 @@ app.post('/api/:endpoint', (request, response) => {
     for (const members of Object.values(crewLinkMembers)) {
       const own = members.find((member) => member.id === crewLinkProfile.id)
       if (own) {
+        own.avatarUrl = crewLinkProfile.avatarUrl
         own.mapVisible = crewLinkProfile.mapVisible
         own.overheadVisible = crewLinkProfile.overheadVisible
         own.username = crewLinkProfile.username
@@ -4718,7 +4757,7 @@ app.post('/api/:endpoint', (request, response) => {
       success: true,
       data: {
         onboarded: featherOnboarded,
-        profile: featherProfiles[0],
+        profile: featherOnboarded ? featherProfiles[0] : null,
         feed: {
           items: empty
             ? []
@@ -4764,6 +4803,22 @@ app.post('/api/:endpoint', (request, response) => {
     featherProfiles[0].display_name = displayName
     featherProfiles[0].handle = handle
     featherProfiles[0].bio = bio
+    const avatar = mockMedia.find(
+      (item) =>
+        item.id === Number(request.body.avatarId) && item.mediaType === 'photo',
+    )
+    if (request.body.avatarId && !avatar) {
+      response.json({ success: false, error: 'invalid_media' })
+      return
+    }
+    featherProfiles[0].avatar_url = avatar?.url ?? null
+    featherPosts
+      .filter((post) => post.profile_id === featherProfiles[0].id)
+      .forEach((post) => {
+        post.avatar_url = featherProfiles[0].avatar_url
+        post.display_name = displayName
+        post.handle = handle
+      })
     featherOnboarded = true
     response.json({ success: true })
     return
@@ -5388,8 +5443,7 @@ app.post('/api/:endpoint', (request, response) => {
       mediaDurationMs: request.body.mediaDurationMs ?? null,
       mediaUrl: messageType === 'text' ? null : mediaUrl,
       messageType,
-      sharePayload:
-        messageType === 'share' ? request.body.sharePayload : null,
+      sharePayload: messageType === 'share' ? request.body.sharePayload : null,
     }
     flareMessages[match.id] ??= []
     flareMessages[match.id].push(message)
@@ -6759,8 +6813,7 @@ app.post('/api/:endpoint', (request, response) => {
       replyToId: request.body.replyToId,
       replyBody: reply?.body,
       reactions: {},
-      sharePayload:
-        messageType === 'share' ? request.body.sharePayload : null,
+      sharePayload: messageType === 'share' ? request.body.sharePayload : null,
       createdAt: new Date().toISOString().slice(0, 19).replace('T', ' '),
       readAt: null,
     }
@@ -6995,15 +7048,69 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'development:bootstrap') {
-    if (testScenario === 'feather-onboarding') featherOnboarded = false
+    authenticated = true
+    linkedAccount = {
+      devices: accountDevices,
+      email: 'demo@ifruit.com',
+      id: 1,
+    }
+    if (
+      testScenario === 'feather-onboarding' ||
+      testScenario === 'feather-register'
+    )
+      featherOnboarded = false
     else featherOnboarded = true
+    pagesOnboardingCompleted = ![
+      'local-pages-onboarding',
+      'local-pages-register',
+      'citymarkt-local-pages-account-missing',
+    ].includes(testScenario)
+    if (testScenario === 'crewlink-register') {
+      crewLinkProfile = null
+    } else {
+      crewLinkProfile = {
+        activeGroupId: 'crewlink-group-night-shift',
+        avatarMediaId: 1,
+        avatarUrl: 'https://picsum.photos/seed/crewlink-skyline/240/240',
+        id: 'crewlink-profile-skyline',
+        mapVisible: true,
+        overheadVisible: false,
+        username: 'Skyline',
+      }
+    }
+    if (testScenario === 'citymarkt-register') {
+      marketplaceProfile = {
+        avatar_media_id: null,
+        avatar_url: null,
+        bio: '',
+        display_name: '',
+        email: linkedAccount?.email ?? 'demo@ifruit.com',
+        exists: false,
+        listing_count: 0,
+      }
+    } else {
+      marketplaceProfile = {
+        avatar_media_id: 1,
+        avatar_url: 'https://picsum.photos/seed/citymarkt-demo-avatar/240/240',
+        bio: 'Fair prices, quick replies, and meetups anywhere in Los Santos.',
+        display_name: 'Skyline Deals',
+        email: linkedAccount?.email ?? 'demo@ifruit.com',
+        exists: true,
+        listing_count: marketplaceListings.filter(
+          (listing) => listing.seller_account_id === 1,
+        ).length,
+      }
+    }
     response.json({
       success: true,
       data: {
-        account: testScenario === 'feather-login' ? null : linkedAccount,
+        account: linkedAccount,
         device: {
           data:
-            testScenario.startsWith('citymarkt-')
+            testScenario.startsWith('citymarkt-') ||
+            testScenario.startsWith('feather-') ||
+            testScenario.startsWith('local-pages-') ||
+            testScenario.startsWith('crewlink-')
               ? {
                   ...deviceData,
                   apps: {
@@ -7012,10 +7119,11 @@ app.post('/api/:endpoint', (request, response) => {
                       ...deviceData.apps.payload,
                       homeLayout: {
                         dock: [],
-                        grid:
-                          testScenario === 'citymarkt-local-pages-missing'
-                            ? []
-                            : ['local-pages'],
+                        grid: testScenario.startsWith('crewlink-')
+                          ? ['crewlink']
+                          : testScenario === 'citymarkt-local-pages-missing'
+                            ? ['citymarkt']
+                            : ['citymarkt', 'local-pages'],
                         hidden:
                           testScenario === 'citymarkt-local-pages-missing'
                             ? ['local-pages']
@@ -7024,6 +7132,31 @@ app.post('/api/:endpoint', (request, response) => {
                       },
                     },
                   },
+                  appAuth: [
+                    'citymarkt-login',
+                    'citymarkt-register',
+                    'feather-login',
+                    'feather-register',
+                    'local-pages-login',
+                    'local-pages-register',
+                    'crewlink-login',
+                    'crewlink-register',
+                  ].includes(testScenario)
+                    ? {
+                        payload: {
+                          accountEmail: linkedAccount?.email ?? '',
+                          signedIn: testScenario.startsWith('feather-')
+                            ? ['citymarkt', 'local-pages', 'crewlink']
+                            : testScenario.startsWith('local-pages-')
+                              ? ['citymarkt', 'feather', 'crewlink']
+                              : testScenario.startsWith('crewlink-')
+                                ? ['citymarkt', 'local-pages', 'feather']
+                                : ['local-pages', 'feather', 'crewlink'],
+                          version: 1,
+                        },
+                        revision: deviceData.appAuth?.revision ?? 0,
+                      }
+                    : deviceData.appAuth,
                 }
               : deviceData,
           imei: '356938035643809',
@@ -7151,11 +7284,11 @@ app.post('/api/:endpoint', (request, response) => {
                 organization: selectedContact.organization ?? null,
                 phone_number: selectedContact.phone_number,
               }
-          : messageType === 'share'
-            ? request.body.sharePayload
-          : isAttachment
-            ? attachmentId
-            : null,
+            : messageType === 'share'
+              ? request.body.sharePayload
+              : isAttachment
+                ? attachmentId
+                : null,
       media_waveform:
         messageType === 'voice' ? request.body.mediaWaveform : null,
       message_type: messageType,
@@ -7575,9 +7708,11 @@ app.post('/api/:endpoint', (request, response) => {
   if (endpoint === 'pages:profile') {
     const email = linkedAccount?.email ?? pagesProfile.email
     const onboarding =
-      ['local-pages-onboarding', 'citymarkt-local-pages-account-missing'].includes(
-        testScenario,
-      ) && !pagesOnboardingCompleted
+      [
+        'local-pages-onboarding',
+        'local-pages-register',
+        'citymarkt-local-pages-account-missing',
+      ].includes(testScenario) && !pagesOnboardingCompleted
     response.json({
       success: true,
       data: {
@@ -7597,9 +7732,12 @@ app.post('/api/:endpoint', (request, response) => {
   if (endpoint === 'pages:profile-save') {
     pagesOnboardingCompleted = true
     const avatarMediaId = Number(request.body.avatarMediaId) || 0
-    const avatarMedia = avatarMediaId > 0
-      ? mockMedia.find((item) => item.id === avatarMediaId && item.mediaType === 'photo')
-      : null
+    const avatarMedia =
+      avatarMediaId > 0
+        ? mockMedia.find(
+            (item) => item.id === avatarMediaId && item.mediaType === 'photo',
+          )
+        : null
     if (avatarMediaId > 0 && !avatarMedia) {
       response.json({ success: false, error: 'invalid_profile_image' })
       return
@@ -7610,7 +7748,9 @@ app.post('/api/:endpoint', (request, response) => {
       bio: String(request.body.bio ?? '').trim(),
       email: linkedAccount?.email ?? pagesProfile.email,
       exists: true,
-      handle: String(request.body.handle ?? '').trim().toLowerCase(),
+      handle: String(request.body.handle ?? '')
+        .trim()
+        .toLowerCase(),
     }
     pagesPosts.forEach((post) => {
       if (post.account_id === 1) post.author_name = pagesProfile.handle
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 76fe035..3334da8 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -69,6 +69,18 @@ Locales["en"] = {
             add = "Add", back = "Back", cancel = "Cancel", clear = "Clear", close = "Close", delete = "Delete", done = "Done", edit = "Edit", home = "Home", loading = "Loading", pause = "Pause", use = "Use",
             phone = "Phone", phoneStatus = "Phone status", reset = "Reset",
             save = "Save", search = "Search", send = "Send", start = "Start", stop = "Stop",
+            signOut = "Sign Out", signingOut = "Signing Out...", signOutTitle = "Sign out of {app}?",
+            signOutBody = "You will only be signed out of {app}. Your other iFruit apps stay signed in.", signOutFailed = "Could not sign out. Please try again.",
+            appAuth = {
+                eyebrow = "iFruit account", title = "Continue to {app}", body = "Use your iFruit email and password. This login applies only to {app}.",
+                login = "Login", register = "Register", email = "iFruit email", password = "Password", confirm = "Confirm password",
+                loginAction = "Log in", registerAction = "Create account",
+                errors = {
+                    invalid_email = "Enter a valid iFruit email.", invalid_password = "Password must be 6–64 characters.",
+                    invalid_credentials = "Email or password is incorrect.", email_taken = "That iFruit email is already registered.",
+                    rate_limited = "Too many attempts. Try again in a minute.", default = "The account request failed.",
+                },
+            },
         },
         ControlCenter = {
             airplaneMode = "Airplane Mode", bluetooth = "Bluetooth", brightness = "Brightness", calculator = "Calculator",
@@ -124,6 +136,15 @@ Locales["en"] = {
             crewlink = {
                 name = "CrewLink", connecting = "Connecting your crew...", privateNetwork = "Private location network",
                 signInTitle = "Connect your iFruit Account", signInBody = "CrewLink uses your private iFruit identity to keep groups and roles available across your phones.", openSettings = "Open iFruit Settings",
+                authEyebrow = "Private crew network", authTitle = "Welcome to CrewLink",
+                authBody = "Your iFruit email is linked automatically. Use your CrewLink username to continue.",
+                login = "Log in", register = "Register", ifruitEmail = "iFruit address", gallery = "Gallery", camera = "Camera", backToLogin = "Back to CrewLink login",
+                authErrors = {
+                    no_ifruit_account = "Sign in to your iFruit account in Settings first.", invalid_username = "Use 3-20 letters, numbers, dots, or underscores.",
+                    profile_not_found = "No CrewLink profile exists for this iFruit email.", profile_exists = "This iFruit email already has a CrewLink profile.",
+                    username_taken = "That CrewLink username is already taken.", invalid_profile_image = "Choose a valid photo from this phone.",
+                    rate_limited = "Too many attempts. Try again shortly.", request_failed = "CrewLink could not complete the request.",
+                },
                 welcomeEyebrow = "Your crew. One signal.", welcomeTitle = "Find your people", welcomeBody = "Choose a private CrewLink username. Only confirmed group members can see your presence and shared location.",
                 username = "CrewLink username", usernamePlaceholder = "e.g. Skyline", createProfile = "Create CrewLink Profile", profileCreated = "Your CrewLink profile is ready.", privacyNote = "Private by design. No public player search.",
                 noGroupEyebrow = "No active crew", noGroupTitle = "Build your private network", noGroupBody = "Create a crew or join friends with a private invitation code.",
@@ -142,7 +163,8 @@ Locales["en"] = {
                 roleDescriptions = { coordinator = "Manage invitations, settings, roles, and pings.", moderator = "Invite nearby users and moderate group pings.", member = "Share presence and create pings when enabled.", guest = "View the active crew without coordination permissions." },
                 manageCrew = "Manage Crew", manageCrewBody = "Update identity, permissions, and invitations.", memberPings = "Member pings", memberPingsBody = "Allow members and guests to create pings.", allowOverhead = "Overhead labels", allowOverheadBody = "Permit nearby opt-in member labels in the world.", groupSaved = "Crew settings saved.",
                 assignRole = "Assign Role", roleUpdated = "Member role updated.", transferOwnership = "Transfer Ownership", removeMember = "Remove from Crew", yourCrewLinkId = "Your CrewLink ID", privacyVisibility = "Privacy & Visibility", shareOnMap = "Share on group map", shareOnMapBody = "Active members can see your live position.", overheadLabels = "Nearby overhead label", overheadLabelsBody = "Show your CrewLink name to nearby opted-in members.",
-                yourGroups = "Your Groups", createAnotherGroup = "Create another group", account = "CrewLink Account", externalApi = "Connected resources", externalApiBody = "Approved scripts may add temporary group pings.", editUsername = "Edit Username", editUsernameBody = "Your username is unique across CrewLink.", profileSaved = "CrewLink profile saved.", deleteGroup = "Delete Group", leaveGroup = "Leave Group", confirmAction = "Confirm",
+                yourGroups = "Your Groups", createAnotherGroup = "Create another group", account = "CrewLink Account", externalApi = "Connected resources", externalApiBody = "Approved scripts may add temporary group pings.", editUsername = "Edit Username", editUsernameBody = "Your username is unique across CrewLink.",
+                editProfile = "Edit CrewLink Profile", editProfileBody = "Change your username and profile photo.", removeProfilePhoto = "Remove profile photo", profileSaved = "CrewLink profile saved.", deleteGroup = "Delete Group", leaveGroup = "Leave Group", confirmAction = "Confirm",
                 confirm = {
                     ["delete-group"] = { title = "Delete this crew?", body = "The group, memberships, invitations, and active pings will be permanently removed." },
                     ["leave-group"] = { title = "Leave this crew?", body = "You will lose access to its members, map, and pings." },
@@ -152,7 +174,7 @@ Locales["en"] = {
                 ["delete-groupDone"] = "Crew deleted.", ["leave-groupDone"] = "You left the crew.", ["remove-memberDone"] = "Member removed.", ["transfer-ownerDone"] = "Ownership transferred.",
                 notifications = { invite = "{actor} invited you to {group}.", member_joined = "{actor} joined {group}.", ping = "{actor} shared '{ping}' with {group}.", role = "Your CrewLink role changed in {group}.", removed = "You were removed from {group}.", default = "Your CrewLink group has an update." },
                 errors = {
-                    not_authenticated = "Sign in to your iFruit Account first.", profile_required = "Create your CrewLink profile first.", invalid_username = "Use 3-20 letters, numbers, dots, or underscores.", invalid_profile = "Check your profile details.", username_taken = "That CrewLink username is already taken.",
+                    not_authenticated = "Sign in to your iFruit Account first.", profile_required = "Create your CrewLink profile first.", invalid_username = "Use 3-20 letters, numbers, dots, or underscores.", invalid_profile = "Check your profile details.", invalid_profile_image = "Choose a valid photo from this phone.", username_taken = "That CrewLink username is already taken.",
                     invalid_group = "Choose a valid group name and signal colour.", group_limit = "You have reached your group limit.", member_limit = "This group has reached its member limit.", group_not_found = "This group is no longer available.", invalid_code = "That invitation code is invalid.", already_member = "You are already a member of this group.", forbidden = "Your current role cannot perform this action.",
                     player_not_nearby = "That player is no longer nearby.", player_unavailable = "That player cannot receive a CrewLink invitation.", invalid_invitation = "This invitation is invalid.", invitation_expired = "This invitation has expired.", invalid_role = "That role cannot be assigned.", owner_must_transfer = "Transfer ownership before leaving this group.",
                     invalid_ping = "Choose a valid ping type, label, and position.", ping_limit = "This crew already has too many active pings.", ping_not_found = "That ping is no longer active.", rate_limited = "Too many CrewLink actions. Try again shortly.", request_failed = "CrewLink is temporarily unavailable.",
@@ -264,19 +286,19 @@ Locales["en"] = {
                 name = "Feather", loading = "Loading Feather", home = "Home", explore = "Explore", activity = "Notifications", activityNav = "Alerts", profile = "Profile", back = "Back",
                 settings = "Settings", settingsEyebrow = "Feather preferences", compactMode = "Compact timeline", compactModeBody = "Show more conversation on the screen.", showSuggestions = "Profile suggestions", showSuggestionsBody = "Show people to follow on your profile.",
                 forYou = "For you", following = "Following", add = "Add", network = "Network", networkTitle = "Find your people", networkBody = "Follow voices from across Los Santos and build a timeline that feels like yours.", networkSearchPlaceholder = "Search names or @usernames", postSearchPlaceholder = "Search posts or #hashtags", searchResults = "Search results", suggestedPeople = "Suggested for you", noPeopleFound = "No people found", noPeopleFoundBody = "Try another name or username.", noSuggestions = "No suggestions yet", noSuggestionsBody = "New Feather accounts will appear here.", all = "All", mentions = "Mentions", media = "Media", trending = "Trending", peopleTab = "People", searchPlaceholder = "Search Feather", search = "Search", cancel = "Cancel", done = "Done",
-                authEyebrow = "Feather network", authWelcome = "Welcome to Feather", authBody = "One iFruit account. Every conversation, wherever you sign in.",
-                login = "Log in", register = "Register", loginTitle = "Good to see you again", loginBody = "Log in with your iFruit address to continue to Feather.",
-                registerTitle = "Create your iFruit account", registerBody = "Choose an address and secure it with a password. Your Feather profile comes next.",
+                authEyebrow = "Feather network", authWelcome = "Welcome to Feather", authBody = "Your iFruit email is linked automatically. Use your Feather username to continue.",
+                login = "Log in", register = "Register", loginTitle = "Good to see you again", loginBody = "Use your Feather username. Your iFruit email is linked automatically.",
+                registerTitle = "Create your Feather profile", registerBody = "Choose a username and optional profile photo. No password is needed.",
                 email = "iFruit address", emailPlaceholder = "yourname", password = "Password", passwordPlaceholder = "6–64 characters",
                 confirmPassword = "Confirm password", confirmPasswordPlaceholder = "Enter it again", showPassword = "Show password", hidePassword = "Hide password",
-                loginAction = "Continue to Feather", registerAction = "Create account", noAccount = "New to Feather?", haveAccount = "Already registered?",
-                registerNow = "Create an account", loginNow = "Log in", authTrust = "Your credentials are verified by the server and this phone is linked to your iFruit account.",
+                loginAction = "Continue to Feather", registerAction = "Create profile", noAccount = "New to Feather?", haveAccount = "Already registered?",
+                registerNow = "Create a profile", loginNow = "Log in", authTrust = "This Feather session is separate from your other apps and linked to your iFruit email.",
                 profileStep = "Step 2 of 2", accountConnected = "iFruit account connected",
                 authErrors = {
-                    invalid_email = "Enter a valid 3–32 character iFruit address.", invalid_password = "Password must be 6–64 characters.",
-                    password_mismatch = "The passwords do not match.", invalid_credentials = "The iFruit address or password is incorrect.",
-                    email_taken = "That iFruit address is already registered.", rate_limited = "Too many attempts. Try again in a minute.",
-                    default = "The account request failed. Please try again.",
+                    no_ifruit_account = "Sign in to your iFruit account in Settings first.", invalid_handle = "Use 3-30 letters, numbers or underscores.", invalid_username = "That username does not match your Feather profile.",
+                    profile_not_found = "No Feather profile exists for this iFruit email.", already_registered = "This iFruit email already has a Feather profile.",
+                    handle_taken = "That Feather username is already taken.", invalid_media = "Choose a valid photo from this phone.",
+                    rate_limited = "Too many attempts. Try again in a minute.", default = "Feather could not complete the request. Please try again.",
                 },
                 welcome = "Find your voice", welcomeBody = "Join the live conversation in Los Santos. Your Feather profile stays linked to your iFruit account.",
                 createProfile = "Create Feather profile", profileDetailsHint = "Choose how people will recognize you.", displayName = "Display name", displayNamePlaceholder = "Your name", handle = "Username", handlePlaceholder = "your_username", handleHint = "3-30 letters, numbers or underscores",
@@ -1197,7 +1219,16 @@ Locales["en"] = {
                 noListingsBody = "Try another search or category.", noDistrict = "No district",
                 free = "Free", negotiablePrice = "${price} negotiable", money = "${price}",
                 hoursAgo = "{count}h ago", daysAgo = "{count}d ago", photos = "photos", activeListings = "active listings",
-                signInTitle = "Sign in to iFruit", signInBody = "Use Settings to sign in before selling, saving or messaging.",
+                signInTitle = "Sign in to iFruit", signInBody = "Log in to your CityMarkt profile to sell, save or message.",
+                authEyebrow = "CityMarkt account", authTitle = "Welcome to CityMarkt",
+                authBody = "Your iFruit email is linked automatically. Use your CityMarkt username to continue.",
+                login = "Login", register = "Register", authUsername = "Username",
+                authErrors = {
+                    no_ifruit_account = "Connect an iFruit account in Settings first.",
+                    invalid_username = "Enter the username of your CityMarkt profile.",
+                    profile_not_found = "No CityMarkt profile exists for this iFruit email.",
+                    profile_exists = "A CityMarkt profile already exists. Use Login instead.",
+                },
                 noMessages = "No conversations", noMessagesBody = "Messages about offers will appear here.",
                 myListings = "My listings", favorites = "Favorites", addFavorite = "Add to favorites", removeFavorite = "Remove from favorites", noProfileListings = "Nothing here yet",
                 createProfile = "Create your CityMarkt profile", editProfile = "Edit profile",
@@ -1254,7 +1285,7 @@ Locales["en"] = {
                 noPosts = "Nothing here yet", noPostsBody = "Be the first to share something with the city.", noPhoto = "No photo attached",
                 signInTitle = "Your Local Pages profile", signInBody = "Sign in to iFruit in Settings to publish and save posts.",
                 authEyebrow = "Local Pages account", authWelcome = "Welcome to Local Pages",
-                authBody = "Sign in or create an iFruit account to build your local profile.", login = "Sign in", register = "Register",
+                authBody = "Your iFruit email is linked automatically. Use your Local Pages username to continue.", login = "Sign in", register = "Register",
                 loginTitle = "Continue with iFruit", loginBody = "Your posts, saved items and profile stay linked to your account.",
                 registerTitle = "Create an iFruit account", registerBody = "Choose your new iFruit address. Your Local Pages profile comes next.",
                 authEmail = "iFruit address", authEmailPlaceholder = "your.name", authPassword = "Password",
@@ -1274,7 +1305,13 @@ Locales["en"] = {
                 cityMarktAppMissing = "Local Pages is not installed", cityMarktInstallHint = "Install Local Pages to share this listing",
                 cityMarktAccountMissing = "Local Pages profile required", cityMarktAccountHint = "Create a Local Pages profile before sharing",
                 cityMarktComposeTitle = "Share CityMarkt listing", cityMarktComposeNavTitle = "Share listing", cityMarktComposeHint = "Review the listing and publish it when you are ready.", cityMarktPhotosHint = "The CityMarkt listing photos will be included.",
-                authErrors = { invalid_email = "Enter a valid 3-32 character iFruit address.", invalid_password = "Use a password between 6 and 64 characters.", invalid_credentials = "The iFruit address or password is incorrect.", email_taken = "This iFruit address is already registered.", password_mismatch = "The passwords do not match.", rate_limited = "Too many attempts. Try again shortly.", default = "The iFruit account request failed." },
+                authErrors = {
+                    no_ifruit_account = "Sign in to your iFruit account in Settings first.", invalid_username = "Use 3-24 lowercase letters, numbers, dots or underscores.",
+                    profile_not_found = "No Local Pages profile exists for this iFruit email.", profile_exists = "This iFruit email already has a Local Pages profile.",
+                    invalid_profile = "Check your Local Pages username.", invalid_profile_image = "Choose a valid photo from this phone.",
+                    profile_handle_taken = "This Local Pages username is already taken.", rate_limited = "Too many attempts. Try again shortly.",
+                    default = "Local Pages could not complete the request.",
+                },
                 errors = { profile_required = "Create your Local Pages profile first.", invalid_profile = "Check your username and bio.", invalid_profile_image = "Choose a valid photo from this phone.", profile_handle_taken = "This username is already taken.", invalid_post = "Add a title and a little more detail.", invalid_images = "Choose valid photos from this phone.", invalid_request = "This action is not valid.", post_not_found = "This post is no longer available.", citymarkt_not_found = "This CityMarkt listing is unavailable.", citymarkt_daily_limit = "You already shared a CityMarkt listing today.", citymarkt_already_shared = "This listing was already shared.", not_authenticated = "Sign in to iFruit first.", rate_limited = "Too many requests. Try again shortly.", request_failed = "The post could not be saved.", default = "Local Pages is temporarily unavailable." },
             },
             map = {
diff --git a/sky_phone/source/server/crewlink.lua b/sky_phone/source/server/crewlink.lua
index 0bb5cfe..7019ffd 100644
--- a/sky_phone/source/server/crewlink.lua
+++ b/sky_phone/source/server/crewlink.lua
@@ -82,6 +82,8 @@ local function profile_dto(row)
     return {
         id = row.id,
         username = row.username,
+        avatarMediaId = row.avatar_media_id and tonumber(row.avatar_media_id) or nil,
+        avatarUrl = row.avatar_url,
         activeGroupId = row.active_group_id,
         mapVisible = tonumber(row.map_visible) == 1,
         overheadVisible = tonumber(row.overhead_visible) == 1,
@@ -94,9 +96,11 @@ local function require_profile(source)
         return nil, error_response
     end
     local rows = Bridge.Database.Query([[
-        SELECT `id`, `account_id`, `username`, `active_group_id`, `map_visible`, `overhead_visible`
-        FROM `sky_phone_crewlink_profiles`
-        WHERE `account_id` = ?
+        SELECT p.`id`, p.`account_id`, p.`username`, p.`avatar_media_id`, p.`active_group_id`,
+            p.`map_visible`, p.`overhead_visible`, avatar.`url` AS `avatar_url`
+        FROM `sky_phone_crewlink_profiles` p
+        LEFT JOIN `sky_phone_media` avatar ON avatar.`id` = p.`avatar_media_id`
+        WHERE p.`account_id` = ?
         LIMIT 1
     ]], { account.id })
     if not rows[1] then
@@ -131,9 +135,10 @@ end
 local function member_dtos(group_id)
     local rows = Bridge.Database.Query([[
         SELECT p.`id`, p.`account_id`, p.`username`, p.`map_visible`, p.`overhead_visible`,
-            m.`role`, UNIX_TIMESTAMP(m.`joined_at`) AS `joined_at`
+            avatar.`url` AS `avatar_url`, m.`role`, UNIX_TIMESTAMP(m.`joined_at`) AS `joined_at`
         FROM `sky_phone_crewlink_memberships` m
         JOIN `sky_phone_crewlink_profiles` p ON p.`id` = m.`profile_id`
+        LEFT JOIN `sky_phone_media` avatar ON avatar.`id` = p.`avatar_media_id`
         WHERE m.`group_id` = ?
         ORDER BY FIELD(m.`role`, 'owner', 'coordinator', 'moderator', 'member', 'guest'), m.`joined_at`
     ]], { group_id })
@@ -141,8 +146,10 @@ local function member_dtos(group_id)
         row.account_id = tonumber(row.account_id)
         row.mapVisible = tonumber(row.map_visible) == 1
         row.overheadVisible = tonumber(row.overhead_visible) == 1
+        row.avatarUrl = row.avatar_url
         row.map_visible = nil
         row.overhead_visible = nil
+        row.avatar_url = nil
         row.joinedAt = (tonumber(row.joined_at) or 0) * 1000
         row.joined_at = nil
     end
@@ -397,8 +404,11 @@ Bridge.Callbacks.Register("sky_phone:crewlink:bootstrap", function(source)
         return error_response
     end
     local rows = Bridge.Database.Query([[
-        SELECT `id`, `account_id`, `username`, `active_group_id`, `map_visible`, `overhead_visible`
-        FROM `sky_phone_crewlink_profiles` WHERE `account_id` = ? LIMIT 1
+        SELECT p.`id`, p.`account_id`, p.`username`, p.`avatar_media_id`, p.`active_group_id`,
+            p.`map_visible`, p.`overhead_visible`, avatar.`url` AS `avatar_url`
+        FROM `sky_phone_crewlink_profiles` p
+        LEFT JOIN `sky_phone_media` avatar ON avatar.`id` = p.`avatar_media_id`
+        WHERE p.`account_id` = ? LIMIT 1
     ]], { account.id })
     if not rows[1] then
         return { success = true, data = { profile = nil, groups = {}, invitations = {} } }
@@ -415,14 +425,22 @@ Bridge.Callbacks.Register("sky_phone:crewlink:create-profile", function(source,
     if not account then
         return error_response
     end
-    local username = valid_username(data and data.username)
+    data = type(data) == "table" and data or {}
+    local username = valid_username(data.username)
     if not username then
         return { success = false, error = "invalid_username" }
     end
+    local avatar_media_id = tonumber(data.avatarMediaId) or 0
+    if avatar_media_id < 0 or avatar_media_id ~= math.floor(avatar_media_id) then
+        return { success = false, error = "invalid_profile_image" }
+    end
+    if avatar_media_id > 0 and not SkyPhoneMedia.ResolveOwnedMedia(source, avatar_media_id, "photo") then
+        return { success = false, error = "invalid_profile_image" }
+    end
     local result = Bridge.Database.Query([[
-        INSERT IGNORE INTO `sky_phone_crewlink_profiles` (`id`, `account_id`, `username`)
-        VALUES (?, ?, ?)
-    ]], { new_id(), account.id, username })
+        INSERT IGNORE INTO `sky_phone_crewlink_profiles` (`id`, `account_id`, `username`, `avatar_media_id`)
+        VALUES (?, ?, ?, NULLIF(?, 0))
+    ]], { new_id(), account.id, username, avatar_media_id })
     if affected_rows(result) ~= 1 then
         return { success = false, error = "username_taken" }
     end
@@ -442,11 +460,26 @@ Bridge.Callbacks.Register("sky_phone:crewlink:update-profile", function(source,
     if not username or type(data.mapVisible) ~= "boolean" or type(data.overheadVisible) ~= "boolean" then
         return { success = false, error = "invalid_profile" }
     end
+    local avatar_media_id = profile.avatar_media_id and tonumber(profile.avatar_media_id) or nil
+    if data.avatarMediaId ~= nil then
+        local submitted_avatar_id = tonumber(data.avatarMediaId)
+        if not submitted_avatar_id or submitted_avatar_id < 0
+            or submitted_avatar_id ~= math.floor(submitted_avatar_id)
+        then
+            return { success = false, error = "invalid_profile_image" }
+        end
+        if submitted_avatar_id > 0
+            and not SkyPhoneMedia.ResolveOwnedMedia(source, submitted_avatar_id, "photo")
+        then
+            return { success = false, error = "invalid_profile_image" }
+        end
+        avatar_media_id = submitted_avatar_id > 0 and submitted_avatar_id or nil
+    end
     local result = Bridge.Database.Query([[
         UPDATE IGNORE `sky_phone_crewlink_profiles`
-        SET `username` = ?, `map_visible` = ?, `overhead_visible` = ?
+        SET `username` = ?, `map_visible` = ?, `overhead_visible` = ?, `avatar_media_id` = ?
         WHERE `id` = ?
-    ]], { username, data.mapVisible and 1 or 0, data.overheadVisible and 1 or 0, profile.id })
+    ]], { username, data.mapVisible and 1 or 0, data.overheadVisible and 1 or 0, avatar_media_id, profile.id })
     if affected_rows(result) ~= 1 and username:lower() ~= tostring(profile.username):lower() then
         return { success = false, error = "username_taken" }
     end
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 1cf8125..8d91d03 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -2098,6 +2098,7 @@ local schema = {
             { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "account_id", type = "BIGINT UNSIGNED NOT NULL" },
             { name = "username", type = "VARCHAR(20) NOT NULL", characterSet = "ascii", collation = "ascii_general_ci" },
+            { name = "avatar_media_id", type = "BIGINT UNSIGNED NULL" },
             { name = "active_group_id", type = "CHAR(36) NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "map_visible", type = "TINYINT(1) NOT NULL DEFAULT 1" },
             { name = "overhead_visible", type = "TINYINT(1) NOT NULL DEFAULT 0" },
@@ -2111,9 +2112,11 @@ local schema = {
         },
         indexes = {
             { name = "idx_sky_phone_crewlink_active", columns = "(`active_group_id`)" },
+            { name = "idx_sky_phone_crewlink_avatar", columns = "(`avatar_media_id`)" },
         },
         foreignKeys = {
             { column = "account_id", references = "`sky_phone_accounts` (`id`) ON DELETE CASCADE" },
+            { column = "avatar_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index 91d0a0f..29ad218 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -24,6 +24,7 @@ local allowed_device_namespaces = {
     notifications = true,
     wallpaper = true,
     alarms = true,
+    appAuth = true,
     apps = true,
     games = true,
     widgets = true,
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 1bf67a1..9605fa6 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -897,6 +897,7 @@ CREATE TABLE IF NOT EXISTS `sky_phone_crewlink_profiles` (
     `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
     `account_id` BIGINT UNSIGNED NOT NULL,
     `username` VARCHAR(20) CHARACTER SET ascii COLLATE ascii_general_ci NOT NULL,
+    `avatar_media_id` BIGINT UNSIGNED NULL,
     `active_group_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NULL,
     `map_visible` TINYINT(1) NOT NULL DEFAULT 1,
     `overhead_visible` TINYINT(1) NOT NULL DEFAULT 0,
@@ -906,7 +907,9 @@ CREATE TABLE IF NOT EXISTS `sky_phone_crewlink_profiles` (
     UNIQUE KEY `uniq_sky_phone_crewlink_account` (`account_id`),
     UNIQUE KEY `uniq_sky_phone_crewlink_username` (`username`),
     KEY `idx_sky_phone_crewlink_active` (`active_group_id`),
-    FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE
+    KEY `idx_sky_phone_crewlink_avatar` (`avatar_media_id`),
+    FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE,
+    FOREIGN KEY (`avatar_media_id`) REFERENCES `sky_phone_media` (`id`) ON DELETE SET NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 CREATE TABLE IF NOT EXISTS `sky_phone_crewlink_groups` (

From ce6393ba072ad65e2c87f180674498182903bb5f Mon Sep 17 00:00:00 2001
From: Dominik <Dominique.Wellisch@t-online.de>
Date: Wed, 12 Aug 2026 23:58:36 +0200
Subject: [PATCH 44/63] ADD - implement Weazel News app

---
 README.md                                     |   20 +
 .../src/assets/img/app-icons/weazel-news.svg  |   19 +
 frontend/src/config/apps.test.ts              |   14 +
 frontend/src/config/apps.ts                   |   16 +
 frontend/src/stores/phone.ts                  |  130 +
 frontend/src/stores/weazel-news.test.ts       |  212 ++
 frontend/src/stores/weazel-news.ts            |  283 ++
 frontend/src/types/apps.ts                    |    1 +
 frontend/src/types/weazel-news.ts             |   76 +
 frontend/src/utils/preferences.ts             |    1 +
 frontend/src/views/apps/weazel-news-app.vue   | 2308 +++++++++++++++++
 frontend/testserver/index.cjs                 |  359 +++
 sky_phone/config/locales/en.lua               |  125 +
 sky_phone/config/weazel_news.lua              |   28 +
 sky_phone/fxmanifest.lua                      |    2 +
 sky_phone/source/client/main.lua              |    7 +
 sky_phone/source/server/db_migrate.lua        |   32 +
 sky_phone/source/server/weazel_news.lua       |  597 +++++
 sky_phone/sql/install.sql                     |   25 +
 19 files changed, 4255 insertions(+)
 create mode 100644 frontend/src/assets/img/app-icons/weazel-news.svg
 create mode 100644 frontend/src/stores/weazel-news.test.ts
 create mode 100644 frontend/src/stores/weazel-news.ts
 create mode 100644 frontend/src/types/weazel-news.ts
 create mode 100644 frontend/src/views/apps/weazel-news-app.vue
 create mode 100644 sky_phone/config/weazel_news.lua
 create mode 100644 sky_phone/source/server/weazel_news.lua

diff --git a/README.md b/README.md
index 4b8324a..5c97335 100644
--- a/README.md
+++ b/README.md
@@ -215,6 +215,26 @@ For a fresh manual database installation, import `sky_phone/sql/install.sql`. It
 
 Framework, inventory, callback, notification, and database integrations live under `sky_phone/source/bridge`. The resource has no dependency on any other Sky resource.
 
+## Weazel News app
+
+The built-in Weazel News app publishes articles for every phone user and exposes its editorial
+desk only to server-authorized jobs. Configure the job-to-minimum-grade map in
+`sky_phone/config/weazel_news.lua`; unlisted jobs remain read-only:
+
+```lua
+AllowedJobs = {
+    weazel = 0,
+    reporter = 2,
+}
+```
+
+Every create, update, and delete request rechecks the player's current framework job and grade on
+the server. Authorized editorial jobs share the newsroom and can manage drafts and published
+articles. Cover images must come from the current phone's Gallery, changes use revision checks, and
+deletion is retained as an audit-safe soft delete. Runtime migration creates
+`sky_phone_weazel_articles` automatically; fresh installations receive the same schema through
+`sky_phone/sql/install.sql`.
+
 ## Radio app
 
 The built-in Radio app supports a primary frequency, volume, recent channels, participant lists, automatic rejoin, join/leave notifications, and an optional service number. YACA and SaltyChat support the configured secondary frequency; PMA Voice exposes one radio channel, so the secondary input is hidden automatically.
diff --git a/frontend/src/assets/img/app-icons/weazel-news.svg b/frontend/src/assets/img/app-icons/weazel-news.svg
new file mode 100644
index 0000000..c98d991
--- /dev/null
+++ b/frontend/src/assets/img/app-icons/weazel-news.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Weazel News">
+  <defs>
+    <linearGradient id="weazel-news-background" x1="18" y1="10" x2="112" y2="122" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717"/>
+      <stop offset="1" stop-color="#050505"/>
+    </linearGradient>
+    <linearGradient id="weazel-news-accent" x1="26" y1="24" x2="103" y2="105" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#ff4a50"/>
+      <stop offset="1" stop-color="#c9101c"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="28" fill="url(#weazel-news-background)"/>
+  <path d="M28 31h72a8 8 0 0 1 8 8v58a8 8 0 0 1-8 8H28a8 8 0 0 1-8-8V39a8 8 0 0 1 8-8Z" fill="#f4f4f1"/>
+  <path d="M20 46h88v-7a8 8 0 0 0-8-8H28a8 8 0 0 0-8 8v7Z" fill="url(#weazel-news-accent)"/>
+  <path d="M31 58h34v26H31z" fill="#181818"/>
+  <path d="M72 59h25M72 68h25M72 77h20M31 92h66" fill="none" stroke="#747474" stroke-width="5" stroke-linecap="round"/>
+  <path d="m38 63 6 16 5-12 5 12 6-16" fill="none" stroke="#f4f4f1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="96" cy="38" r="3" fill="#fff"/>
+</svg>
diff --git a/frontend/src/config/apps.test.ts b/frontend/src/config/apps.test.ts
index 4a76207..09fd166 100644
--- a/frontend/src/config/apps.test.ts
+++ b/frontend/src/config/apps.test.ts
@@ -1,4 +1,6 @@
 import { describe, expect, it } from 'vitest'
+import { Newspaper } from 'lucide-vue-next'
+
 import { isPhoneAppId, PHONE_APPS } from './apps'
 describe('app registry', () => {
   it('has unique ids and routes with the reference dock order', () => {
@@ -58,6 +60,16 @@ describe('app registry', () => {
       labelKey: 'Apps.companies.name',
       route: '/apps/companies',
     })
+    expect(PHONE_APPS.find((app) => app.id === 'weazel-news')).toMatchObject({
+      category: 'social',
+      dockOrder: null,
+      gridOrder: 29,
+      labelKey: 'Apps.weazelNews.name',
+      route: '/apps/weazel-news',
+    })
+    expect(PHONE_APPS.find((app) => app.id === 'weazel-news')?.icon).toBe(
+      Newspaper,
+    )
     expect(PHONE_APPS.find((app) => app.id === 'music')).toMatchObject({
       category: 'utilities',
       gridOrder: 26,
@@ -135,6 +147,7 @@ describe('app registry', () => {
     expect(isPhoneAppId('skyride')).toBe(true)
     expect(isPhoneAppId('music')).toBe(true)
     expect(isPhoneAppId('companies')).toBe(true)
+    expect(isPhoneAppId('weazel-news')).toBe(true)
     expect(
       PHONE_APPS.filter((app) => app.category === 'games').map((app) => app.id),
     ).toEqual([
@@ -151,6 +164,7 @@ describe('app registry', () => {
         (app) => app.id,
       ),
     ).toEqual([
+      'weazel-news',
       'picstagram',
       'feather',
       'fliptok',
diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts
index 4f49726..4052fd4 100644
--- a/frontend/src/config/apps.ts
+++ b/frontend/src/config/apps.ts
@@ -33,6 +33,7 @@ import {
   ReceiptText,
   UsersRound,
   Building2,
+  Newspaper,
 } from 'lucide-vue-next'
 import { defineAsyncComponent, markRaw, shallowReactive } from 'vue'
 
@@ -72,6 +73,7 @@ import musicIcon from '@/assets/img/app-icons/music.svg'
 import featherIcon from '@/assets/img/app-icons/feather.svg'
 import crewLinkIcon from '@/assets/img/app-icons/crewlink.svg'
 import companiesIcon from '@/assets/img/app-icons/companies.svg'
+import weazelNewsIcon from '@/assets/img/app-icons/weazel-news.svg'
 import type {
   BuiltinPhoneAppDefinition,
   BuiltinPhoneAppId,
@@ -83,6 +85,20 @@ import type {
 } from '@/types/apps'
 
 export const PHONE_APPS = shallowReactive<PhoneAppDefinition[]>([
+  {
+    category: 'social',
+    component: markRaw(
+      defineAsyncComponent(() => import('@/views/apps/weazel-news-app.vue')),
+    ),
+    dockOrder: null,
+    gridOrder: 29,
+    icon: markRaw(Newspaper),
+    iconClass: 'app-icon--weazel-news',
+    iconImage: weazelNewsIcon,
+    id: 'weazel-news',
+    labelKey: 'Apps.weazelNews.name',
+    route: '/apps/weazel-news',
+  },
   {
     category: 'utilities',
     component: markRaw(
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 1827834..611035a 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -414,6 +414,136 @@ const defaultLocales: LocaleTree = {
         request_failed: 'EasyShare is temporarily unavailable.',
       },
     },
+    weazelNews: {
+      name: 'Weazel News',
+      brand: 'WEAZEL NEWS',
+      navigation: 'Weazel News navigation',
+      tabs: {
+        home: 'Home',
+        categories: 'Categories',
+        search: 'Search',
+        editorial: 'Editorial',
+      },
+      back: 'Back',
+      retry: 'Try Again',
+      loadMore: 'Load More',
+      home: {
+        eyebrow: 'Los Santos, live',
+        latest: 'Latest News',
+      },
+      categories: {
+        title: 'Categories',
+        subtitle: 'Browse every story from the Weazel News desk.',
+        all: 'All Stories',
+        official: 'Official Notices',
+        events: 'Events & Leisure',
+        jobs: 'Jobs',
+        news: 'News & Events',
+        business: 'Business',
+      },
+      search: {
+        placeholder: 'Search articles...',
+        title: 'Search Weazel News',
+        emptyTitle: 'No Articles Found',
+        emptyBody: 'Try another headline, topic, or category.',
+      },
+      states: {
+        loading: 'Loading Weazel News...',
+        emptyTitle: 'No News Yet',
+        emptyBody:
+          'The Weazel News desk has not published any articles here yet.',
+        errorTitle: 'Weazel News Is Unavailable',
+        readOnlyTitle: 'Read-only Access',
+        readOnlyBody:
+          'Your current job can read Weazel News, but cannot manage articles.',
+        noManagedTitle: 'No Editorial Articles',
+        noManagedBody:
+          'Create an article or change the current editorial filter.',
+      },
+      article: {
+        readMore: 'Read Article',
+        byline: 'By {author}',
+        updated: 'Updated {date}',
+        published: 'Published {date}',
+        coverAlt: 'Cover image for {title}',
+      },
+      editorial: {
+        title: 'Editorial Desk',
+        subtitle: 'Create, publish, and maintain Weazel News articles.',
+        newArticle: 'New Article',
+        published: 'Published',
+        drafts: 'Drafts',
+        all: 'All',
+        jobAccess: 'Signed in as {job}',
+        edit: 'Edit Article',
+        delete: 'Delete Article',
+      },
+      composer: {
+        newTitle: 'New Article',
+        editTitle: 'Edit Article',
+        title: 'Headline',
+        titlePlaceholder: 'Write a clear headline',
+        body: 'Article',
+        bodyPlaceholder: 'Write the full story...',
+        category: 'Category',
+        status: 'Publication Status',
+        cover: 'Cover Image',
+        chooseCover: 'Choose from Gallery',
+        changeCover: 'Change Cover',
+        removeCover: 'Remove Cover',
+        coverAlt: 'Selected article cover',
+        publish: 'Publish Article',
+        saveDraft: 'Save Draft',
+        saveChanges: 'Save Changes',
+        statusPublished: 'Published',
+        statusDraft: 'Draft',
+      },
+      delete: {
+        title: 'Delete Article?',
+        body: 'This article will be removed from Weazel News.',
+        cancel: 'Cancel',
+        confirm: 'Delete',
+      },
+      feedback: {
+        created: 'Article created.',
+        updated: 'Article updated.',
+        deleted: 'Article deleted.',
+      },
+      accessibility: {
+        articleList: 'Weazel News articles',
+        categoryList: 'News categories',
+        editorialList: 'Editorial articles',
+        openArticle: 'Open {title}',
+        openCategory: 'Open {category}',
+        openEditorial: 'Open the editorial desk',
+        newArticle: 'Create a new article',
+        editArticle: 'Edit {title}',
+        deleteArticle: 'Delete {title}',
+        search: 'Search Weazel News',
+        clearSearch: 'Clear article search',
+        coverPreview: 'Article cover preview',
+        removeCover: 'Remove the selected cover image',
+        status: 'Article status: {status}',
+      },
+      errors: {
+        feature_disabled: 'Weazel News is currently disabled.',
+        invalid_article: 'Enter a valid headline, article, and category.',
+        invalid_draft:
+          'Enter a headline and article text before saving the draft.',
+        invalid_publish: 'Enter a headline and article text before publishing.',
+        invalid_request: 'Check the article details and try again.',
+        invalid_image: 'Choose a valid photo from this phone.',
+        invalid_attachment: 'Choose a valid photo from this phone.',
+        not_authorized: 'Your current job cannot manage Weazel News articles.',
+        article_not_found: 'This article is no longer available.',
+        not_found: 'This article is no longer available.',
+        revision_conflict:
+          'This article changed on another device. Reload it and try again.',
+        rate_limited: 'Too many requests. Try again shortly.',
+        request_failed: 'Weazel News could not complete the request.',
+        default: 'Weazel News is temporarily unavailable.',
+      },
+    },
     companies: companiesFallbackLocales,
     crewlink: {
       name: 'CrewLink',
diff --git a/frontend/src/stores/weazel-news.test.ts b/frontend/src/stores/weazel-news.test.ts
new file mode 100644
index 0000000..7eb50f6
--- /dev/null
+++ b/frontend/src/stores/weazel-news.test.ts
@@ -0,0 +1,212 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useWeazelNewsStore } from '@/stores/weazel-news'
+import type {
+  WeazelNewsArticle,
+  WeazelNewsArticleDraft,
+} from '@/types/weazel-news'
+import { nuiCall } from '@/utils/nui'
+
+vi.mock('@/utils/nui', () => ({ nuiCall: vi.fn() }))
+
+const mockNuiCall = vi.mocked(nuiCall)
+
+const article: WeazelNewsArticle = {
+  authorName: 'Jane Doe',
+  body: 'The full article body.',
+  category: 'news',
+  createdAt: 1_754_000_000,
+  excerpt: 'The article excerpt.',
+  id: '7d28b252-0532-4869-9512-e313e34d2fb8',
+  imageMediaId: 12,
+  imageUrl: 'https://media.invalid/weazel/article.webp',
+  publishedAt: 1_754_000_100,
+  revision: 4,
+  status: 'published',
+  title: 'Breaking news',
+  updatedAt: 1_754_000_100,
+}
+
+const draft: WeazelNewsArticleDraft = {
+  body: 'Updated body.',
+  category: 'business',
+  imageMediaId: null,
+  status: 'draft',
+  title: 'Updated headline',
+}
+
+describe('Weazel News store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockNuiCall.mockReset()
+  })
+
+  it('loads the server-owned management context and category counts', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: {
+        canManage: true,
+        categories: [
+          { count: 3, id: 'news' },
+          { count: 1, id: 'jobs' },
+        ],
+        jobGradeLabel: 'Editor',
+        jobLabel: 'Weazel News',
+      },
+      success: true,
+    })
+    const store = useWeazelNewsStore()
+
+    expect(await store.loadContext()).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledWith('weazel-news:context')
+    expect(store.context?.canManage).toBe(true)
+    expect(store.context?.categories[0]).toEqual({ count: 3, id: 'news' })
+  })
+
+  it('loads and deduplicates appended public pages', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({
+        data: { hasMore: true, items: [article] },
+        success: true,
+      })
+      .mockResolvedValueOnce({
+        data: {
+          hasMore: false,
+          items: [
+            { ...article, revision: 5, title: 'Canonical headline' },
+            { ...article, id: 'second-article' },
+          ],
+        },
+        success: true,
+      })
+    const store = useWeazelNewsStore()
+
+    await store.loadPublic({ category: 'news', search: 'breaking' })
+    await store.loadPublic({
+      append: true,
+      category: 'news',
+      search: 'breaking',
+    })
+
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'weazel-news:list', {
+      category: 'news',
+      offset: 0,
+      search: 'breaking',
+    })
+    expect(mockNuiCall).toHaveBeenNthCalledWith(2, 'weazel-news:list', {
+      category: 'news',
+      offset: 1,
+      search: 'breaking',
+    })
+    expect(store.publicItems).toHaveLength(2)
+    expect(store.publicItems[0]?.title).toBe('Canonical headline')
+    expect(store.publicHasMore).toBe(false)
+  })
+
+  it('loads paged management results including drafts', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: { hasMore: false, items: [{ ...article, status: 'draft' }] },
+      success: true,
+    })
+    const store = useWeazelNewsStore()
+
+    expect(
+      await store.loadManaged('draft', { offset: 20, search: 'city' }),
+    ).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledWith('weazel-news:manage-list', {
+      offset: 20,
+      search: 'city',
+      status: 'draft',
+    })
+    expect(store.managedItems[0]?.status).toBe('draft')
+  })
+
+  it('loads a canonical article for public or management detail', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: { article },
+      success: true,
+    })
+    const store = useWeazelNewsStore()
+
+    expect(await store.loadArticle(article.id, true)).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledWith('weazel-news:get', {
+      id: article.id,
+      manage: true,
+    })
+    expect(store.selected).toEqual(article)
+  })
+
+  it('normalizes a direct canonical create response', async () => {
+    const created = { ...article, id: 'created-article', revision: 1 }
+    mockNuiCall.mockResolvedValueOnce({ data: created, success: true })
+    const store = useWeazelNewsStore()
+
+    expect(await store.create({ ...draft, status: 'published' })).toEqual(
+      created,
+    )
+    expect(mockNuiCall).toHaveBeenCalledWith('weazel-news:create', {
+      ...draft,
+      status: 'published',
+    })
+    expect(store.managedItems).toEqual([created])
+    expect(store.publicItems).toEqual([created])
+  })
+
+  it('sends the optimistic revision and applies the canonical update', async () => {
+    const canonical = {
+      ...article,
+      ...draft,
+      excerpt: 'Updated excerpt.',
+      revision: 5,
+      updatedAt: 1_754_100_000,
+    }
+    mockNuiCall.mockResolvedValueOnce({
+      data: { article: canonical },
+      success: true,
+    })
+    const store = useWeazelNewsStore()
+    store.publicItems = [article]
+    store.managedItems = [article]
+    store.selected = article
+
+    expect(await store.update(article, draft)).toEqual(canonical)
+    expect(mockNuiCall).toHaveBeenCalledWith('weazel-news:update', {
+      ...draft,
+      id: article.id,
+      revision: 4,
+    })
+    expect(store.selected).toEqual(canonical)
+    expect(store.managedItems).toEqual([canonical])
+    expect(store.publicItems).toEqual([])
+  })
+
+  it('keeps local articles unchanged after a revision conflict', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      error: 'revision_conflict',
+      success: false,
+    })
+    const store = useWeazelNewsStore()
+    store.managedItems = [article]
+
+    expect(await store.update(article, draft)).toBeNull()
+    expect(store.managedItems).toEqual([article])
+    expect(store.error).toBe('revision_conflict')
+  })
+
+  it('deletes by id and revision only after server confirmation', async () => {
+    mockNuiCall.mockResolvedValueOnce({ success: true })
+    const store = useWeazelNewsStore()
+    store.publicItems = [article]
+    store.managedItems = [article]
+    store.selected = article
+
+    expect(await store.remove(article)).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledWith('weazel-news:delete', {
+      id: article.id,
+      revision: article.revision,
+    })
+    expect(store.publicItems).toEqual([])
+    expect(store.managedItems).toEqual([])
+    expect(store.selected).toBeNull()
+  })
+})
diff --git a/frontend/src/stores/weazel-news.ts b/frontend/src/stores/weazel-news.ts
new file mode 100644
index 0000000..303a8d9
--- /dev/null
+++ b/frontend/src/stores/weazel-news.ts
@@ -0,0 +1,283 @@
+import { defineStore } from 'pinia'
+
+import type {
+  WeazelNewsArticle,
+  WeazelNewsArticleDraft,
+  WeazelNewsArticleResponse,
+  WeazelNewsArticleSummary,
+  WeazelNewsContext,
+  WeazelNewsListResponse,
+  WeazelNewsManagedListOptions,
+  WeazelNewsManageStatus,
+  WeazelNewsPublicListOptions,
+} from '@/types/weazel-news'
+import { nuiCall } from '@/utils/nui'
+
+type ArticleMutationResponse = WeazelNewsArticle | WeazelNewsArticleResponse
+
+function readArticle(
+  data: ArticleMutationResponse | undefined,
+): WeazelNewsArticle | null {
+  if (!data) return null
+  return 'article' in data ? data.article : data
+}
+
+function replaceArticle(
+  items: WeazelNewsArticleSummary[],
+  article: WeazelNewsArticleSummary,
+): WeazelNewsArticleSummary[] {
+  return items.map((item) => (item.id === article.id ? article : item))
+}
+
+function mergeArticles(
+  current: WeazelNewsArticleSummary[],
+  incoming: WeazelNewsArticleSummary[],
+): WeazelNewsArticleSummary[] {
+  const merged = new Map(current.map((article) => [article.id, article]))
+  for (const article of incoming) merged.set(article.id, article)
+  return [...merged.values()]
+}
+
+export const useWeazelNewsStore = defineStore('weazel-news', {
+  state: () => ({
+    context: null as WeazelNewsContext | null,
+    contextError: '',
+    contextLoadSequence: 0,
+    contextLoading: false,
+    detailError: '',
+    detailLoadSequence: 0,
+    detailLoading: false,
+    error: '',
+    loading: false,
+    managedError: '',
+    managedLoadSequence: 0,
+    managedLoading: false,
+    managedHasMore: false,
+    managedItems: [] as WeazelNewsArticleSummary[],
+    mutating: false,
+    publicHasMore: false,
+    publicError: '',
+    publicLoadSequence: 0,
+    publicLoading: false,
+    publicItems: [] as WeazelNewsArticleSummary[],
+    selected: null as WeazelNewsArticle | null,
+  }),
+  actions: {
+    async loadContext(): Promise<boolean> {
+      const requestSequence = ++this.contextLoadSequence
+      this.contextLoading = true
+      this.loading = true
+      const response = await nuiCall<WeazelNewsContext>('weazel-news:context')
+      if (requestSequence !== this.contextLoadSequence) return false
+      this.contextLoading = false
+      this.loading =
+        this.publicLoading || this.managedLoading || this.detailLoading
+      if (!response.success || !response.data) {
+        this.contextError = response.error ?? 'request_failed'
+        this.error = this.contextError
+        return false
+      }
+      this.context = response.data
+      this.contextError = ''
+      this.error = ''
+      return true
+    },
+    async loadPublic(
+      options: WeazelNewsPublicListOptions = {},
+    ): Promise<boolean> {
+      const append = options.append ?? false
+      const requestSequence = ++this.publicLoadSequence
+      this.publicLoading = true
+      this.loading = true
+      const response = await nuiCall<WeazelNewsListResponse>(
+        'weazel-news:list',
+        {
+          category: options.category ?? null,
+          offset: options.offset ?? (append ? this.publicItems.length : 0),
+          search: options.search ?? '',
+        },
+      )
+      if (requestSequence !== this.publicLoadSequence) return false
+      this.publicLoading = false
+      this.loading =
+        this.contextLoading || this.managedLoading || this.detailLoading
+      if (!response.success || !response.data) {
+        this.publicError = response.error ?? 'request_failed'
+        this.error = this.publicError
+        return false
+      }
+      this.publicItems = append
+        ? mergeArticles(this.publicItems, response.data.items)
+        : response.data.items
+      this.publicHasMore = response.data.hasMore
+      this.publicError = ''
+      this.error = ''
+      return true
+    },
+    async loadManaged(
+      status: WeazelNewsManageStatus,
+      options: WeazelNewsManagedListOptions = {},
+    ): Promise<boolean> {
+      const append = options.append ?? false
+      const requestSequence = ++this.managedLoadSequence
+      this.managedLoading = true
+      this.loading = true
+      const response = await nuiCall<WeazelNewsListResponse>(
+        'weazel-news:manage-list',
+        {
+          offset: options.offset ?? (append ? this.managedItems.length : 0),
+          search: options.search ?? '',
+          status,
+        },
+      )
+      if (requestSequence !== this.managedLoadSequence) return false
+      this.managedLoading = false
+      this.loading =
+        this.contextLoading || this.publicLoading || this.detailLoading
+      if (!response.success || !response.data) {
+        this.managedError = response.error ?? 'request_failed'
+        this.error = this.managedError
+        return false
+      }
+      this.managedItems = append
+        ? mergeArticles(this.managedItems, response.data.items)
+        : response.data.items
+      this.managedHasMore = response.data.hasMore
+      this.managedError = ''
+      this.error = ''
+      return true
+    },
+    async loadArticle(id: string, manage = false): Promise<boolean> {
+      const requestSequence = ++this.detailLoadSequence
+      this.detailLoading = true
+      this.loading = true
+      const response = await nuiCall<ArticleMutationResponse>(
+        'weazel-news:get',
+        {
+          id,
+          manage,
+        },
+      )
+      if (requestSequence !== this.detailLoadSequence) return false
+      this.detailLoading = false
+      this.loading =
+        this.contextLoading || this.publicLoading || this.managedLoading
+      const article = response.success ? readArticle(response.data) : null
+      if (!article) {
+        this.detailError = response.error ?? 'request_failed'
+        this.error = this.detailError
+        return false
+      }
+      this.selected = article
+      this.detailError = ''
+      this.publicItems = replaceArticle(this.publicItems, article)
+      this.managedItems = replaceArticle(this.managedItems, article)
+      this.error = ''
+      return true
+    },
+    async create(
+      draft: WeazelNewsArticleDraft,
+    ): Promise<WeazelNewsArticle | null> {
+      this.publicLoadSequence += 1
+      this.managedLoadSequence += 1
+      this.detailLoadSequence += 1
+      this.publicLoading = false
+      this.managedLoading = false
+      this.detailLoading = false
+      this.loading = this.contextLoading
+      this.mutating = true
+      const response = await nuiCall<ArticleMutationResponse>(
+        'weazel-news:create',
+        draft,
+      )
+      this.mutating = false
+      const article = response.success ? readArticle(response.data) : null
+      if (!article) {
+        this.error = response.error ?? 'request_failed'
+        return null
+      }
+      this.selected = article
+      this.managedItems = [
+        article,
+        ...this.managedItems.filter((item) => item.id !== article.id),
+      ]
+      if (article.status === 'published') {
+        this.publicItems = [
+          article,
+          ...this.publicItems.filter((item) => item.id !== article.id),
+        ]
+      }
+      this.error = ''
+      return article
+    },
+    async update(
+      article: WeazelNewsArticle,
+      draft: WeazelNewsArticleDraft,
+    ): Promise<WeazelNewsArticle | null> {
+      this.publicLoadSequence += 1
+      this.managedLoadSequence += 1
+      this.detailLoadSequence += 1
+      this.publicLoading = false
+      this.managedLoading = false
+      this.detailLoading = false
+      this.loading = this.contextLoading
+      this.mutating = true
+      const response = await nuiCall<ArticleMutationResponse>(
+        'weazel-news:update',
+        {
+          ...draft,
+          id: article.id,
+          revision: article.revision,
+        },
+      )
+      this.mutating = false
+      const canonical = response.success ? readArticle(response.data) : null
+      if (!canonical) {
+        this.error = response.error ?? 'request_failed'
+        return null
+      }
+      if (this.selected?.id === canonical.id) this.selected = canonical
+      this.managedItems = replaceArticle(this.managedItems, canonical)
+      this.publicItems =
+        canonical.status === 'published'
+          ? [
+              canonical,
+              ...this.publicItems.filter((item) => item.id !== canonical.id),
+            ].sort(
+              (left, right) =>
+                (right.publishedAt ?? 0) - (left.publishedAt ?? 0),
+            )
+          : this.publicItems.filter((item) => item.id !== canonical.id)
+      this.error = ''
+      return canonical
+    },
+    async remove(article: WeazelNewsArticle): Promise<boolean> {
+      this.publicLoadSequence += 1
+      this.managedLoadSequence += 1
+      this.detailLoadSequence += 1
+      this.publicLoading = false
+      this.managedLoading = false
+      this.detailLoading = false
+      this.loading = this.contextLoading
+      this.mutating = true
+      const response = await nuiCall('weazel-news:delete', {
+        id: article.id,
+        revision: article.revision,
+      })
+      this.mutating = false
+      if (!response.success) {
+        this.error = response.error ?? 'request_failed'
+        return false
+      }
+      this.publicItems = this.publicItems.filter(
+        (item) => item.id !== article.id,
+      )
+      this.managedItems = this.managedItems.filter(
+        (item) => item.id !== article.id,
+      )
+      if (this.selected?.id === article.id) this.selected = null
+      this.error = ''
+      return true
+    },
+  },
+})
diff --git a/frontend/src/types/apps.ts b/frontend/src/types/apps.ts
index a21a28d..27dfb16 100644
--- a/frontend/src/types/apps.ts
+++ b/frontend/src/types/apps.ts
@@ -37,6 +37,7 @@ export type BuiltinPhoneAppId =
   | 'feather'
   | 'crewlink'
   | 'companies'
+  | 'weazel-news'
 
 declare const externalPhoneAppId: unique symbol
 
diff --git a/frontend/src/types/weazel-news.ts b/frontend/src/types/weazel-news.ts
new file mode 100644
index 0000000..6784bfb
--- /dev/null
+++ b/frontend/src/types/weazel-news.ts
@@ -0,0 +1,76 @@
+export const WEAZEL_NEWS_CATEGORY_IDS = [
+  'official',
+  'events',
+  'jobs',
+  'news',
+  'business',
+] as const
+
+export const WEAZEL_NEWS_ARTICLE_STATUSES = ['draft', 'published'] as const
+
+export type WeazelNewsCategoryId = (typeof WEAZEL_NEWS_CATEGORY_IDS)[number]
+
+export type WeazelNewsArticleStatus =
+  (typeof WEAZEL_NEWS_ARTICLE_STATUSES)[number]
+
+export type WeazelNewsManageStatus = 'all' | WeazelNewsArticleStatus
+
+export type WeazelNewsCategorySummary = {
+  count: number
+  id: WeazelNewsCategoryId
+}
+
+export type WeazelNewsArticle = {
+  authorName: string
+  body: string
+  category: WeazelNewsCategoryId
+  createdAt: number
+  excerpt: string
+  id: string
+  imageMediaId?: number | null
+  imageUrl?: string | null
+  publishedAt?: number | null
+  revision: number
+  status: WeazelNewsArticleStatus
+  title: string
+  updatedAt: number
+}
+
+export type WeazelNewsArticleSummary = Omit<WeazelNewsArticle, 'body'>
+
+export type WeazelNewsArticleDraft = {
+  body: string
+  category: WeazelNewsCategoryId
+  imageMediaId: number | null
+  status: WeazelNewsArticleStatus
+  title: string
+}
+
+export type WeazelNewsContext = {
+  canManage: boolean
+  categories: WeazelNewsCategorySummary[]
+  jobGradeLabel?: string
+  jobLabel?: string
+}
+
+export type WeazelNewsListResponse = {
+  hasMore: boolean
+  items: WeazelNewsArticleSummary[]
+}
+
+export type WeazelNewsPublicListOptions = {
+  append?: boolean
+  category?: WeazelNewsCategoryId | null
+  offset?: number
+  search?: string
+}
+
+export type WeazelNewsManagedListOptions = {
+  append?: boolean
+  offset?: number
+  search?: string
+}
+
+export type WeazelNewsArticleResponse = {
+  article: WeazelNewsArticle
+}
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index c586705..605af42 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -87,6 +87,7 @@ const DEFAULT_APP_NOTIFICATIONS: Record<
   'neon-drop': { enabled: true, sounds: true },
   citymarkt: { enabled: true, sounds: true },
   companies: { enabled: true, sounds: true },
+  'weazel-news': { enabled: true, sounds: true },
   'local-pages': { enabled: true, sounds: true },
   picstagram: { enabled: true, sounds: true },
   fliptok: { enabled: true, sounds: true },
diff --git a/frontend/src/views/apps/weazel-news-app.vue b/frontend/src/views/apps/weazel-news-app.vue
new file mode 100644
index 0000000..db706fe
--- /dev/null
+++ b/frontend/src/views/apps/weazel-news-app.vue
@@ -0,0 +1,2308 @@
+<script setup lang="ts">
+import {
+  kButton,
+  kCard,
+  kDialog,
+  kDialogButton,
+  kIcon,
+  kLink,
+  kList,
+  kListInput,
+  kListItem,
+  kNavbar,
+  kNavbarBackLink,
+  kPage,
+  kPreloader,
+  kSearchbar,
+  kSegmented,
+  kSegmentedButton,
+  kSheet,
+  kTabbar,
+  kTabbarLink,
+  kToast,
+  kToolbarPane,
+} from 'konsta/vue'
+import {
+  BriefcaseBusiness,
+  Building2,
+  CalendarDays,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+  House,
+  ImagePlus,
+  LayoutGrid,
+  Megaphone,
+  Newspaper,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+  UserRound,
+  X,
+} from 'lucide-vue-next'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useMessageMediaStore } from '@/stores/messageMedia'
+import { usePhoneStore } from '@/stores/phone'
+import { useWeazelNewsStore } from '@/stores/weazel-news'
+import type {
+  WeazelNewsArticle,
+  WeazelNewsArticleDraft,
+  WeazelNewsArticleSummary,
+  WeazelNewsCategoryId,
+  WeazelNewsManageStatus,
+} from '@/types/weazel-news'
+import { WEAZEL_NEWS_CATEGORY_IDS } from '@/types/weazel-news'
+
+type MainTab = 'home' | 'categories' | 'search' | 'editorial'
+type Screen = 'main' | 'detail' | 'composer'
+type ComposerChoice = 'category' | 'status'
+type ComposerChoiceOption = { label: string; value: string }
+type SelectedCover = { id: number; url: string }
+type ComposerContext = {
+  article: WeazelNewsArticle | null
+  cover: SelectedCover | null
+  draft: WeazelNewsArticleDraft
+  originTab: MainTab
+}
+
+const phone = usePhoneStore()
+const news = useWeazelNewsStore()
+const messageMedia = useMessageMediaStore()
+const route = useRoute()
+const router = useRouter()
+
+const activeTab = ref<MainTab>('home')
+const screen = ref<Screen>('main')
+const detailManaged = ref(false)
+const selectedCategory = ref<WeazelNewsCategoryId | null>(null)
+const searchQuery = ref('')
+const submittedSearchQuery = ref('')
+const searchSubmitted = ref(false)
+const editorialStatus = ref<WeazelNewsManageStatus>('all')
+const editingArticle = ref<WeazelNewsArticle | null>(null)
+const selectedCover = ref<SelectedCover | null>(null)
+const deleteTarget = ref<WeazelNewsArticle | null>(null)
+const deleteDialogOpened = ref(false)
+const composerChoice = ref<ComposerChoice | null>(null)
+const toastOpened = ref(false)
+const toastText = ref('')
+let toastTimer: number | undefined
+
+function emptyDraft(): WeazelNewsArticleDraft {
+  return {
+    body: '',
+    category: 'news',
+    imageMediaId: null,
+    status: 'draft',
+    title: '',
+  }
+}
+
+const draft = ref<WeazelNewsArticleDraft>(emptyDraft())
+
+const categoryIcons = {
+  business: Building2,
+  events: CalendarDays,
+  jobs: BriefcaseBusiness,
+  news: Newspaper,
+  official: Megaphone,
+}
+
+const featuredArticle = computed(() => news.publicItems[0] ?? null)
+const secondaryArticles = computed(() => news.publicItems.slice(1))
+const selectedArticle = computed(() => news.selected)
+const composerChoiceOptions = computed<ComposerChoiceOption[]>(() =>
+  composerChoice.value === 'status'
+    ? [
+        { label: t('composer.statusDraft'), value: 'draft' },
+        { label: t('composer.statusPublished'), value: 'published' },
+      ]
+    : WEAZEL_NEWS_CATEGORY_IDS.map((category) => ({
+        label: categoryLabel(category),
+        value: category,
+      })),
+)
+const composerChoiceLabel = computed(() =>
+  composerChoice.value === 'status'
+    ? t('composer.status')
+    : t('composer.category'),
+)
+const knownErrors = new Set([
+  'feature_disabled',
+  'invalid_article',
+  'invalid_draft',
+  'invalid_publish',
+  'invalid_request',
+  'invalid_image',
+  'invalid_attachment',
+  'not_authorized',
+  'article_not_found',
+  'not_found',
+  'revision_conflict',
+  'rate_limited',
+  'request_failed',
+])
+const activeError = computed(() => {
+  if (screen.value !== 'main') return news.detailError
+  if (activeTab.value === 'editorial') {
+    return news.context ? news.managedError : news.contextError
+  }
+  if (activeTab.value === 'categories') return news.contextError
+  return news.publicError
+})
+const contextualError = computed(() =>
+  phone.t(
+    `Apps.weazelNews.errors.${knownErrors.has(activeError.value) ? activeError.value : 'default'}`,
+  ),
+)
+const currentSurfaceLoading = computed(() => {
+  if (screen.value !== 'main') return news.detailLoading
+  if (activeTab.value === 'editorial') {
+    return news.context ? news.managedLoading : news.contextLoading
+  }
+  if (activeTab.value === 'categories') return news.contextLoading
+  if (activeTab.value === 'search') {
+    return searchSubmitted.value && news.publicLoading
+  }
+  return news.publicLoading
+})
+
+function t(path: string, replacements: Record<string, string> = {}): string {
+  return phone.t(`Apps.weazelNews.${path}`, replacements)
+}
+
+function eventValue(event: Event): string {
+  return (event.target as HTMLInputElement | HTMLTextAreaElement).value
+}
+
+function categoryLabel(category: WeazelNewsCategoryId | null): string {
+  return t(`categories.${category ?? 'all'}`)
+}
+
+function categoryCount(category: WeazelNewsCategoryId): number {
+  return (
+    news.context?.categories.find((entry) => entry.id === category)?.count ?? 0
+  )
+}
+
+function formatDate(timestamp: number | null | undefined): string {
+  if (!timestamp) return ''
+  return new Intl.DateTimeFormat(phone.lang, {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  }).format(new Date(timestamp))
+}
+
+function statusLabel(status: WeazelNewsArticle['status']): string {
+  return t(
+    status === 'published'
+      ? 'composer.statusPublished'
+      : 'composer.statusDraft',
+  )
+}
+
+function showToast(key: string): void {
+  if (toastTimer !== undefined) window.clearTimeout(toastTimer)
+  toastText.value = t(key)
+  toastOpened.value = true
+  toastTimer = window.setTimeout(() => {
+    toastOpened.value = false
+  }, 3000)
+}
+
+function errorKey(code: string): string {
+  return `errors.${knownErrors.has(code) ? code : 'default'}`
+}
+
+async function loadHome(): Promise<void> {
+  await news.loadPublic({ category: selectedCategory.value })
+}
+
+async function selectTab(tab: MainTab): Promise<void> {
+  activeTab.value = tab
+  screen.value = 'main'
+  news.error = ''
+
+  if (tab === 'home') await loadHome()
+  if (tab === 'categories') await news.loadContext()
+  if (tab === 'search' && searchSubmitted.value) await submitSearch()
+  if (tab === 'editorial') await loadEditorial()
+}
+
+async function loadEditorial(): Promise<void> {
+  if (!news.context && !(await news.loadContext())) return
+  if (news.context?.canManage) await news.loadManaged(editorialStatus.value)
+}
+
+async function selectCategory(
+  category: WeazelNewsCategoryId | null,
+): Promise<void> {
+  selectedCategory.value = category
+  activeTab.value = 'home'
+  screen.value = 'main'
+  await loadHome()
+}
+
+async function submitSearch(): Promise<void> {
+  submittedSearchQuery.value = searchQuery.value.trim()
+  searchSubmitted.value = true
+  await news.loadPublic({ search: submittedSearchQuery.value })
+}
+
+async function loadMoreSearch(): Promise<void> {
+  await news.loadPublic({
+    append: true,
+    offset: news.publicItems.length,
+    search: submittedSearchQuery.value,
+  })
+}
+
+function clearSearch(): void {
+  searchQuery.value = ''
+  submittedSearchQuery.value = ''
+  searchSubmitted.value = false
+  news.publicError = ''
+  news.error = ''
+}
+
+async function openArticle(
+  article: WeazelNewsArticleSummary,
+  managed = false,
+): Promise<void> {
+  if (!(await news.loadArticle(article.id, managed))) {
+    showToast(errorKey(news.detailError))
+    return
+  }
+  detailManaged.value = managed
+  screen.value = 'detail'
+}
+
+function closeDetail(): void {
+  screen.value = 'main'
+  news.selected = null
+  if (activeTab.value === 'editorial' && news.context?.canManage) {
+    void news.loadManaged(editorialStatus.value)
+  }
+}
+
+function createArticle(): void {
+  if (!news.context?.canManage) return
+  editingArticle.value = null
+  selectedCover.value = null
+  draft.value = emptyDraft()
+  screen.value = 'composer'
+}
+
+function editArticle(article: WeazelNewsArticle): void {
+  if (!news.context?.canManage) return
+  editingArticle.value = article
+  selectedCover.value =
+    article.imageMediaId && article.imageUrl
+      ? { id: article.imageMediaId, url: article.imageUrl }
+      : null
+  draft.value = {
+    body: article.body,
+    category: article.category,
+    imageMediaId: article.imageMediaId ?? null,
+    status: article.status,
+    title: article.title,
+  }
+  screen.value = 'composer'
+}
+
+function closeComposer(): void {
+  composerChoice.value = null
+  screen.value = editingArticle.value ? 'detail' : 'main'
+}
+
+function selectComposerChoice(option: ComposerChoiceOption): void {
+  if (composerChoice.value === 'category') {
+    draft.value.category = option.value as WeazelNewsCategoryId
+  } else if (composerChoice.value === 'status') {
+    draft.value.status = option.value as WeazelNewsArticleDraft['status']
+  }
+  composerChoice.value = null
+}
+
+function chooseCover(): void {
+  messageMedia.begin(
+    'weazel-news:cover',
+    'photo',
+    '/apps/weazel-news?compose=1',
+    1,
+    {
+      article: editingArticle.value,
+      cover: selectedCover.value,
+      draft: { ...draft.value },
+      originTab: activeTab.value,
+    } satisfies ComposerContext,
+  )
+  void router.push({
+    path: '/apps/photos',
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
+function removeCover(): void {
+  selectedCover.value = null
+  draft.value.imageMediaId = null
+}
+
+async function saveArticle(
+  status?: WeazelNewsArticleDraft['status'],
+): Promise<void> {
+  if (news.mutating) return
+
+  const nextStatus = status ?? draft.value.status
+  const title = draft.value.title.trim()
+  const body = draft.value.body.trim()
+  const titleLength = Array.from(title).length
+  const bodyLength = Array.from(body).length
+
+  if (nextStatus === 'draft' && (titleLength < 1 || bodyLength < 1)) {
+    showToast('errors.invalid_draft')
+    return
+  }
+  if (nextStatus === 'published' && (titleLength < 1 || bodyLength < 1)) {
+    showToast('errors.invalid_publish')
+    return
+  }
+
+  const payload: WeazelNewsArticleDraft = {
+    ...draft.value,
+    body,
+    status: nextStatus,
+    title,
+  }
+  const wasEditing = editingArticle.value !== null
+  const article = editingArticle.value
+    ? await news.update(editingArticle.value, payload)
+    : await news.create(payload)
+
+  if (!article) {
+    showToast(errorKey(news.error))
+    return
+  }
+
+  editingArticle.value = article
+  news.selected = article
+  detailManaged.value = true
+  screen.value = 'detail'
+  showToast(wasEditing ? 'feedback.updated' : 'feedback.created')
+}
+
+function requestDelete(article: WeazelNewsArticle): void {
+  deleteTarget.value = article
+  deleteDialogOpened.value = true
+}
+
+async function confirmDelete(): Promise<void> {
+  const article = deleteTarget.value
+  if (!article) return
+  deleteDialogOpened.value = false
+  if (!(await news.remove(article))) {
+    showToast(errorKey(news.error))
+    return
+  }
+  deleteTarget.value = null
+  news.selected = null
+  screen.value = 'main'
+  activeTab.value = 'editorial'
+  showToast('feedback.deleted')
+  void news.loadManaged(editorialStatus.value)
+}
+
+async function changeEditorialStatus(
+  status: WeazelNewsManageStatus,
+): Promise<void> {
+  editorialStatus.value = status
+  await news.loadManaged(status)
+}
+
+async function loadMoreManaged(): Promise<void> {
+  await news.loadManaged(editorialStatus.value, {
+    append: true,
+    offset: news.managedItems.length,
+  })
+}
+
+async function initialize(): Promise<void> {
+  const selection =
+    messageMedia.consumeMany<ComposerContext>('weazel-news:cover')
+  if (selection?.context) {
+    editingArticle.value = selection.context.article
+    selectedCover.value = selection.context.cover
+    draft.value = selection.context.draft
+    activeTab.value = selection.context.originTab
+    screen.value = 'composer'
+  }
+  const media = selection?.media[0]
+  if (media) {
+    selectedCover.value = { id: media.id, url: media.url }
+    draft.value.imageMediaId = media.id
+  }
+
+  await news.loadContext()
+  await loadHome()
+  if (route.query.compose === '1') {
+    void router.replace('/apps/weazel-news')
+  }
+}
+
+onMounted(() => void initialize())
+
+onBeforeUnmount(() => {
+  if (toastTimer !== undefined) window.clearTimeout(toastTimer)
+})
+</script>
+
+<template>
+  <k-page
+    component="main"
+    class="weazel-app"
+    :class="{ 'weazel-app--light': !phone.isDarkMode }"
+    :colors="{ bgIos: 'bg-transparent' }"
+    :aria-label="t('name')"
+  >
+    <template v-if="screen === 'main'">
+      <k-navbar class="weazel-navbar" :center-title="true">
+        <template #title>
+          <span class="weazel-brand" :aria-label="t('brand')">
+            <span><Newspaper :size="16" :stroke-width="2.4" /></span>
+            <b>{{ t('brand') }}</b>
+          </span>
+        </template>
+      </k-navbar>
+
+      <div class="weazel-scroll">
+        <template v-if="activeTab === 'home'">
+          <header class="weazel-section-heading">
+            <div>
+              <span>{{ t('home.eyebrow') }}</span>
+              <h1>{{ categoryLabel(selectedCategory) }}</h1>
+            </div>
+            <button
+              v-if="selectedCategory"
+              type="button"
+              class="weazel-filter-clear"
+              :aria-label="t('categories.all')"
+              @click="selectCategory(null)"
+            >
+              <X :size="15" />
+            </button>
+          </header>
+
+          <div v-if="currentSurfaceLoading" class="weazel-state">
+            <k-preloader class="text-[#d71920]" />
+            <span>{{ t('states.loading') }}</span>
+          </div>
+          <div v-else-if="activeError" class="weazel-state">
+            <Newspaper :size="34" />
+            <strong>{{ t('states.errorTitle') }}</strong>
+            <span>{{ contextualError }}</span>
+            <k-button rounded small @click="loadHome">{{
+              t('retry')
+            }}</k-button>
+          </div>
+          <div v-else-if="!featuredArticle" class="weazel-state">
+            <FileText :size="34" />
+            <strong>{{ t('states.emptyTitle') }}</strong>
+            <span>{{ t('states.emptyBody') }}</span>
+          </div>
+          <section v-else :aria-label="t('accessibility.articleList')">
+            <k-card :content-wrap="false" class="weazel-feature-card">
+              <button
+                type="button"
+                :aria-label="
+                  t('accessibility.openArticle', {
+                    title: featuredArticle.title,
+                  })
+                "
+                @click="openArticle(featuredArticle)"
+              >
+                <img
+                  v-if="featuredArticle.imageUrl"
+                  :src="featuredArticle.imageUrl"
+                  :alt="t('article.coverAlt', { title: featuredArticle.title })"
+                />
+                <div v-else class="weazel-feature-placeholder">
+                  <span>W</span>
+                  <Newspaper :size="34" />
+                </div>
+                <div class="weazel-feature-copy">
+                  <span>{{ categoryLabel(featuredArticle.category) }}</span>
+                  <h2>{{ featuredArticle.title }}</h2>
+                  <p>{{ featuredArticle.excerpt }}</p>
+                  <small>
+                    {{
+                      t('article.byline', {
+                        author: featuredArticle.authorName,
+                      })
+                    }}
+                    · {{ formatDate(featuredArticle.publishedAt) }}
+                  </small>
+                </div>
+              </button>
+            </k-card>
+
+            <div class="weazel-latest-title">
+              <span>{{ t('home.latest') }}</span>
+              <i></i>
+            </div>
+            <div class="weazel-card-list">
+              <k-card
+                v-for="article in secondaryArticles"
+                :key="article.id"
+                :content-wrap="false"
+                class="weazel-article-card"
+              >
+                <button
+                  type="button"
+                  :aria-label="
+                    t('accessibility.openArticle', { title: article.title })
+                  "
+                  @click="openArticle(article)"
+                >
+                  <div class="weazel-card-copy">
+                    <span>{{ categoryLabel(article.category) }}</span>
+                    <h2>{{ article.title }}</h2>
+                    <p>{{ article.excerpt }}</p>
+                    <small>{{ formatDate(article.publishedAt) }}</small>
+                  </div>
+                  <img
+                    v-if="article.imageUrl"
+                    :src="article.imageUrl"
+                    :alt="t('article.coverAlt', { title: article.title })"
+                  />
+                  <span v-else class="weazel-card-mark">W</span>
+                </button>
+              </k-card>
+            </div>
+            <k-button
+              v-if="news.publicHasMore"
+              class="weazel-load-more"
+              tonal
+              rounded
+              @click="
+                news.loadPublic({
+                  append: true,
+                  category: selectedCategory,
+                  offset: news.publicItems.length,
+                })
+              "
+            >
+              {{ t('loadMore') }}
+            </k-button>
+          </section>
+        </template>
+
+        <template v-else-if="activeTab === 'categories'">
+          <header class="weazel-section-heading">
+            <div>
+              <span>{{ t('name') }}</span>
+              <h1>{{ t('categories.title') }}</h1>
+              <p>{{ t('categories.subtitle') }}</p>
+            </div>
+          </header>
+          <k-list
+            inset
+            strong
+            class="weazel-category-list"
+            :aria-label="t('accessibility.categoryList')"
+          >
+            <k-list-item
+              v-for="category in WEAZEL_NEWS_CATEGORY_IDS"
+              :key="category"
+              link
+              link-component="button"
+              :link-props="{ type: 'button' }"
+              :title="categoryLabel(category)"
+              :after="String(categoryCount(category))"
+              :aria-label="
+                t('accessibility.openCategory', {
+                  category: categoryLabel(category),
+                })
+              "
+              @click="selectCategory(category)"
+            >
+              <template #media>
+                <span class="weazel-category-icon">
+                  <component :is="categoryIcons[category]" :size="19" />
+                </span>
+              </template>
+            </k-list-item>
+          </k-list>
+        </template>
+
+        <template v-else-if="activeTab === 'search'">
+          <header class="weazel-section-heading">
+            <div>
+              <span>{{ t('name') }}</span>
+              <h1>{{ t('search.title') }}</h1>
+            </div>
+          </header>
+          <div class="weazel-search-shell">
+            <k-searchbar
+              component="form"
+              class="weazel-searchbar"
+              input-id="weazel-news-search"
+              :clear-button="false"
+              :value="searchQuery"
+              :placeholder="t('search.placeholder')"
+              :aria-label="t('accessibility.search')"
+              @input="searchQuery = eventValue($event)"
+              @submit.prevent="submitSearch"
+            />
+            <button
+              v-if="searchQuery"
+              type="button"
+              class="weazel-search-clear"
+              :aria-label="t('accessibility.clearSearch')"
+              @click="clearSearch"
+            >
+              <X :size="17" />
+            </button>
+          </div>
+          <label class="weazel-sr-only" for="weazel-news-search">
+            {{ t('accessibility.search') }}
+          </label>
+          <div
+            v-if="currentSurfaceLoading"
+            class="weazel-state weazel-state--compact"
+          >
+            <k-preloader class="text-[#d71920]" />
+            <span>{{ t('states.loading') }}</span>
+          </div>
+          <div
+            v-else-if="activeError"
+            class="weazel-state weazel-state--compact"
+          >
+            <Newspaper :size="34" />
+            <strong>{{ t('states.errorTitle') }}</strong>
+            <span>{{ contextualError }}</span>
+            <k-button rounded small @click="submitSearch">{{
+              t('retry')
+            }}</k-button>
+          </div>
+          <div
+            v-else-if="searchSubmitted && !news.publicItems.length"
+            class="weazel-state weazel-state--compact"
+          >
+            <Search :size="34" />
+            <strong>{{ t('search.emptyTitle') }}</strong>
+            <span>{{ t('search.emptyBody') }}</span>
+          </div>
+          <div v-else-if="searchSubmitted" class="weazel-card-list">
+            <k-card
+              v-for="article in news.publicItems"
+              :key="article.id"
+              :content-wrap="false"
+              class="weazel-article-card"
+            >
+              <button type="button" @click="openArticle(article)">
+                <div class="weazel-card-copy">
+                  <span>{{ categoryLabel(article.category) }}</span>
+                  <h2>{{ article.title }}</h2>
+                  <p>{{ article.excerpt }}</p>
+                  <small>{{ formatDate(article.publishedAt) }}</small>
+                </div>
+                <img v-if="article.imageUrl" :src="article.imageUrl" alt="" />
+                <ChevronRight v-else :size="20" />
+              </button>
+            </k-card>
+          </div>
+          <k-button
+            v-if="
+              searchSubmitted && news.publicHasMore && !currentSurfaceLoading
+            "
+            class="weazel-load-more"
+            tonal
+            rounded
+            @click="loadMoreSearch"
+          >
+            {{ t('loadMore') }}
+          </k-button>
+        </template>
+
+        <template v-else>
+          <header class="weazel-section-heading weazel-editorial-heading">
+            <div>
+              <span>{{ t('name') }}</span>
+              <h1>{{ t('editorial.title') }}</h1>
+              <p>{{ t('editorial.subtitle') }}</p>
+            </div>
+          </header>
+
+          <div
+            v-if="currentSurfaceLoading && !news.context"
+            class="weazel-state"
+          >
+            <k-preloader class="text-[#d71920]" />
+            <span>{{ t('states.loading') }}</span>
+          </div>
+          <div v-else-if="activeError && !news.context" class="weazel-state">
+            <Newspaper :size="34" />
+            <strong>{{ t('states.errorTitle') }}</strong>
+            <span>{{ contextualError }}</span>
+            <k-button rounded small @click="loadEditorial">{{
+              t('retry')
+            }}</k-button>
+          </div>
+          <div v-else-if="!news.context?.canManage" class="weazel-state">
+            <UserRound :size="36" />
+            <strong>{{ t('states.readOnlyTitle') }}</strong>
+            <span>{{ t('states.readOnlyBody') }}</span>
+          </div>
+          <template v-else>
+            <k-card :content-wrap="false" class="weazel-access-card">
+              <div class="weazel-access-content">
+                <span class="weazel-access-avatar">W</span>
+                <div class="weazel-access-identity">
+                  <strong>{{ news.context.jobLabel }}</strong>
+                  <small>{{
+                    t('editorial.jobAccess', {
+                      job:
+                        news.context.jobGradeLabel ||
+                        news.context.jobLabel ||
+                        t('name'),
+                    })
+                  }}</small>
+                </div>
+                <k-button
+                  rounded
+                  small
+                  class="weazel-new-article"
+                  :aria-label="t('accessibility.newArticle')"
+                  @click="createArticle"
+                >
+                  <Plus :size="17" /> {{ t('editorial.newArticle') }}
+                </k-button>
+              </div>
+            </k-card>
+
+            <k-segmented strong rounded class="weazel-editorial-filter">
+              <k-segmented-button
+                v-for="status in [
+                  'all',
+                  'published',
+                  'draft',
+                ] as WeazelNewsManageStatus[]"
+                :key="status"
+                :active="editorialStatus === status"
+                @click="changeEditorialStatus(status)"
+              >
+                {{ t(`editorial.${status === 'draft' ? 'drafts' : status}`) }}
+              </k-segmented-button>
+            </k-segmented>
+
+            <div
+              v-if="currentSurfaceLoading"
+              class="weazel-state weazel-state--compact"
+            >
+              <k-preloader class="text-[#d71920]" />
+            </div>
+            <div
+              v-else-if="activeError"
+              class="weazel-state weazel-state--compact"
+            >
+              <Newspaper :size="34" />
+              <strong>{{ t('states.errorTitle') }}</strong>
+              <span>{{ contextualError }}</span>
+              <k-button rounded small @click="loadEditorial">{{
+                t('retry')
+              }}</k-button>
+            </div>
+            <div
+              v-else-if="!news.managedItems.length"
+              class="weazel-state weazel-state--compact"
+            >
+              <FileText :size="34" />
+              <strong>{{ t('states.noManagedTitle') }}</strong>
+              <span>{{ t('states.noManagedBody') }}</span>
+            </div>
+            <k-list
+              v-else
+              inset
+              strong
+              class="weazel-editorial-list"
+              :aria-label="t('accessibility.editorialList')"
+            >
+              <k-list-item
+                v-for="article in news.managedItems"
+                :key="article.id"
+                link
+                link-component="button"
+                :link-props="{ type: 'button' }"
+                content-class="weazel-editorial-item__content"
+                inner-class="weazel-editorial-item__inner"
+                title-wrap-class="weazel-editorial-item__title-wrap"
+                :title="article.title"
+                :subtitle="`${categoryLabel(article.category)} · ${formatDate(article.updatedAt)}`"
+                @click="openArticle(article, true)"
+              >
+                <template #media>
+                  <span class="weazel-editorial-thumb">
+                    <img
+                      v-if="article.imageUrl"
+                      :src="article.imageUrl"
+                      alt=""
+                    />
+                    <FileText v-else :size="18" />
+                  </span>
+                </template>
+                <template #after>
+                  <span class="weazel-status" :class="`is-${article.status}`">
+                    {{ statusLabel(article.status) }}
+                  </span>
+                </template>
+              </k-list-item>
+            </k-list>
+            <k-button
+              v-if="
+                news.managedItems.length &&
+                news.managedHasMore &&
+                !currentSurfaceLoading
+              "
+              class="weazel-load-more"
+              tonal
+              rounded
+              @click="loadMoreManaged"
+            >
+              {{ t('loadMore') }}
+            </k-button>
+          </template>
+        </template>
+      </div>
+
+      <k-tabbar
+        component="nav"
+        icons
+        labels
+        class="weazel-tabbar"
+        inner-class="weazel-tabbar__inner"
+        :aria-label="t('navigation')"
+      >
+        <k-toolbar-pane class="weazel-tabbar__pane">
+          <k-tabbar-link
+            component="button"
+            class="weazel-tabbar__link"
+            :active="activeTab === 'home'"
+            :link-props="{ type: 'button' }"
+            @click="selectTab('home')"
+          >
+            <template #icon
+              ><k-icon><House :size="22" /></k-icon
+            ></template>
+            <template #label>{{ t('tabs.home') }}</template>
+          </k-tabbar-link>
+          <k-tabbar-link
+            component="button"
+            class="weazel-tabbar__link"
+            :active="activeTab === 'categories'"
+            :link-props="{ type: 'button' }"
+            @click="selectTab('categories')"
+          >
+            <template #icon
+              ><k-icon><LayoutGrid :size="22" /></k-icon
+            ></template>
+            <template #label>{{ t('tabs.categories') }}</template>
+          </k-tabbar-link>
+          <k-tabbar-link
+            component="button"
+            class="weazel-tabbar__link"
+            :active="activeTab === 'search'"
+            :link-props="{ type: 'button' }"
+            @click="selectTab('search')"
+          >
+            <template #icon
+              ><k-icon><Search :size="22" /></k-icon
+            ></template>
+            <template #label>{{ t('tabs.search') }}</template>
+          </k-tabbar-link>
+          <k-tabbar-link
+            component="button"
+            class="weazel-tabbar__link"
+            :active="activeTab === 'editorial'"
+            :link-props="{ type: 'button' }"
+            @click="selectTab('editorial')"
+          >
+            <template #icon
+              ><k-icon><UserRound :size="22" /></k-icon
+            ></template>
+            <template #label>{{ t('tabs.editorial') }}</template>
+          </k-tabbar-link>
+        </k-toolbar-pane>
+      </k-tabbar>
+    </template>
+
+    <template v-else-if="screen === 'detail' && selectedArticle">
+      <k-navbar class="weazel-navbar" :title="t('article.readMore')">
+        <template #left>
+          <k-navbar-back-link
+            component="button"
+            :text="t('back')"
+            @click="closeDetail"
+          />
+        </template>
+        <template v-if="news.context?.canManage && detailManaged" #right>
+          <k-link
+            component="button"
+            icon-only
+            :aria-label="
+              t('accessibility.editArticle', { title: selectedArticle.title })
+            "
+            @click="editArticle(selectedArticle)"
+          >
+            <Pencil :size="19" />
+          </k-link>
+        </template>
+      </k-navbar>
+      <article class="weazel-detail-scroll">
+        <img
+          v-if="selectedArticle.imageUrl"
+          class="weazel-detail-cover"
+          :src="selectedArticle.imageUrl"
+          :alt="t('article.coverAlt', { title: selectedArticle.title })"
+        />
+        <div v-else class="weazel-detail-masthead">
+          <span>W</span><Newspaper :size="38" />
+        </div>
+        <div class="weazel-detail-copy">
+          <span class="weazel-kicker">{{
+            categoryLabel(selectedArticle.category)
+          }}</span>
+          <h1>{{ selectedArticle.title }}</h1>
+          <div class="weazel-byline">
+            <span>{{
+              selectedArticle.authorName.charAt(0).toUpperCase()
+            }}</span>
+            <div>
+              <strong>{{
+                t('article.byline', { author: selectedArticle.authorName })
+              }}</strong>
+              <small>{{
+                t('article.published', {
+                  date: formatDate(
+                    selectedArticle.publishedAt || selectedArticle.updatedAt,
+                  ),
+                })
+              }}</small>
+            </div>
+          </div>
+          <p>{{ selectedArticle.body }}</p>
+        </div>
+        <div
+          v-if="news.context?.canManage && detailManaged"
+          class="weazel-detail-actions"
+        >
+          <k-button rounded tonal @click="editArticle(selectedArticle)">
+            <Pencil :size="18" /> {{ t('editorial.edit') }}
+          </k-button>
+          <k-button
+            rounded
+            tonal
+            class="weazel-danger"
+            @click="requestDelete(selectedArticle)"
+          >
+            <Trash2 :size="18" /> {{ t('editorial.delete') }}
+          </k-button>
+        </div>
+      </article>
+    </template>
+
+    <template v-else-if="screen === 'composer'">
+      <k-navbar
+        class="weazel-navbar"
+        :title="t(editingArticle ? 'composer.editTitle' : 'composer.newTitle')"
+      >
+        <template #left>
+          <k-navbar-back-link
+            component="button"
+            :text="t('back')"
+            @click="closeComposer"
+          />
+        </template>
+      </k-navbar>
+      <div class="weazel-composer-scroll">
+        <section class="weazel-composer-cover">
+          <img
+            v-if="selectedCover"
+            :src="selectedCover.url"
+            :alt="t('composer.coverAlt')"
+          />
+          <div v-else>
+            <ImagePlus :size="34" /><span>{{ t('composer.cover') }}</span>
+          </div>
+          <div class="weazel-cover-actions">
+            <k-button
+              rounded
+              tonal
+              class="weazel-cover-picker"
+              @click="chooseCover"
+            >
+              <ImagePlus aria-hidden="true" />
+              <span class="weazel-cover-picker__label">
+                {{
+                  t(
+                    selectedCover
+                      ? 'composer.changeCover'
+                      : 'composer.chooseCover',
+                  )
+                }}
+              </span>
+            </k-button>
+            <k-button
+              v-if="selectedCover"
+              rounded
+              clear
+              class="weazel-danger weazel-cover-remove"
+              @click="removeCover"
+            >
+              {{ t('composer.removeCover') }}
+            </k-button>
+          </div>
+        </section>
+
+        <k-list nested :dividers="false" class="weazel-composer-list">
+          <k-list-input
+            outline
+            class="weazel-composer-field"
+            input-class="weazel-composer-input"
+            maxlength="160"
+            :label="t('composer.title')"
+            :placeholder="t('composer.titlePlaceholder')"
+            :value="draft.title"
+            @input="draft.title = eventValue($event)"
+          />
+          <k-list-input
+            outline
+            class="weazel-composer-field"
+            type="textarea"
+            maxlength="12000"
+            :label="t('composer.body')"
+            :placeholder="t('composer.bodyPlaceholder')"
+            :value="draft.body"
+            input-class="weazel-composer-input weazel-body-input"
+            @input="draft.body = eventValue($event)"
+          />
+          <k-list-item
+            link
+            link-component="button"
+            :chevron="false"
+            class="weazel-choice-trigger"
+            content-class="weazel-choice-trigger__content"
+            inner-class="weazel-choice-trigger__inner"
+            :link-props="{
+              type: 'button',
+              'aria-haspopup': 'dialog',
+              'aria-expanded': composerChoice === 'category',
+            }"
+            @click="composerChoice = 'category'"
+          >
+            <template #inner>
+              <span class="weazel-choice-trigger__copy">
+                <small>{{ t('composer.category') }}</small>
+                <strong>{{ categoryLabel(draft.category) }}</strong>
+              </span>
+              <ChevronDown
+                class="weazel-choice-trigger__icon"
+                :class="{ 'is-open': composerChoice === 'category' }"
+              />
+            </template>
+          </k-list-item>
+          <k-list-item
+            v-if="editingArticle"
+            link
+            link-component="button"
+            :chevron="false"
+            class="weazel-choice-trigger"
+            content-class="weazel-choice-trigger__content"
+            inner-class="weazel-choice-trigger__inner"
+            :link-props="{
+              type: 'button',
+              'aria-haspopup': 'dialog',
+              'aria-expanded': composerChoice === 'status',
+            }"
+            @click="composerChoice = 'status'"
+          >
+            <template #inner>
+              <span class="weazel-choice-trigger__copy">
+                <small>{{ t('composer.status') }}</small>
+                <strong>{{ statusLabel(draft.status) }}</strong>
+              </span>
+              <ChevronDown
+                class="weazel-choice-trigger__icon"
+                :class="{ 'is-open': composerChoice === 'status' }"
+              />
+            </template>
+          </k-list-item>
+        </k-list>
+
+        <div class="weazel-composer-actions">
+          <template v-if="!editingArticle">
+            <k-button
+              large
+              rounded
+              tonal
+              :disabled="news.mutating"
+              @click="saveArticle('draft')"
+            >
+              {{ t('composer.saveDraft') }}
+            </k-button>
+            <k-button
+              large
+              rounded
+              :disabled="news.mutating"
+              @click="saveArticle('published')"
+            >
+              {{ t('composer.publish') }}
+            </k-button>
+          </template>
+          <k-button
+            v-else
+            large
+            rounded
+            :disabled="news.mutating"
+            @click="saveArticle()"
+          >
+            {{ t('composer.saveChanges') }}
+          </k-button>
+        </div>
+      </div>
+    </template>
+
+    <k-sheet
+      :opened="composerChoice !== null"
+      class="weazel-choice-sheet"
+      @backdropclick="composerChoice = null"
+    >
+      <section
+        v-if="composerChoice"
+        class="weazel-choice-sheet__content"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="composerChoiceLabel"
+      >
+        <div class="weazel-choice-sheet__handle" aria-hidden="true" />
+        <header class="weazel-choice-sheet__header">
+          <h2>{{ composerChoiceLabel }}</h2>
+          <k-link
+            component="button"
+            icon-only
+            class="weazel-choice-sheet__close"
+            :aria-label="phone.t('Common.close')"
+            :link-props="{ type: 'button' }"
+            @click="composerChoice = null"
+          >
+            <X />
+          </k-link>
+        </header>
+        <k-list
+          nested
+          :dividers="false"
+          class="weazel-choice-options"
+          role="listbox"
+        >
+          <k-list-item
+            v-for="option in composerChoiceOptions"
+            :key="option.value"
+            link
+            link-component="button"
+            :chevron="false"
+            :title="option.label"
+            :link-props="{
+              type: 'button',
+              role: 'option',
+              'aria-selected':
+                composerChoice === 'category'
+                  ? option.value === draft.category
+                  : option.value === draft.status,
+            }"
+            class="weazel-choice-option"
+            content-class="weazel-choice-option__content"
+            inner-class="weazel-choice-option__inner"
+            title-wrap-class="weazel-choice-option__title"
+            @click="selectComposerChoice(option)"
+          >
+            <template #after>
+              <Check
+                v-if="
+                  composerChoice === 'category'
+                    ? option.value === draft.category
+                    : option.value === draft.status
+                "
+              />
+            </template>
+          </k-list-item>
+        </k-list>
+      </section>
+    </k-sheet>
+
+    <k-dialog
+      :opened="deleteDialogOpened"
+      @backdropclick="deleteDialogOpened = false"
+    >
+      <template #title>{{ t('delete.title') }}</template>
+      <p>{{ t('delete.body') }}</p>
+      <template #buttons>
+        <k-dialog-button @click="deleteDialogOpened = false">
+          {{ t('delete.cancel') }}
+        </k-dialog-button>
+        <k-dialog-button strong class="text-red-500" @click="confirmDelete">
+          {{ t('delete.confirm') }}
+        </k-dialog-button>
+      </template>
+    </k-dialog>
+
+    <k-toast
+      :opened="toastOpened"
+      position="center"
+      @click="toastOpened = false"
+    >
+      {{ toastText }}
+    </k-toast>
+  </k-page>
+</template>
+
+<style scoped>
+.weazel-app {
+  --weazel-bg: #070707;
+  --weazel-surface: #151515;
+  --weazel-surface-strong: #1d1d1f;
+  --weazel-text: #f5f5f5;
+  --weazel-muted: #929296;
+  --weazel-line: rgb(255 255 255 / 10%);
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: var(--weazel-bg) !important;
+  color: var(--weazel-text);
+}
+
+.weazel-app--light {
+  --weazel-bg: #f4f1ec;
+  --weazel-surface: #fff;
+  --weazel-surface-strong: #ebe7e1;
+  --weazel-text: #121212;
+  --weazel-muted: #69696e;
+  --weazel-line: rgb(0 0 0 / 10%);
+}
+
+.weazel-navbar {
+  --k-safe-area-top: 46px;
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  right: 0;
+  left: 0;
+  color: var(--weazel-text);
+}
+
+.weazel-brand {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--weazel-text);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 21px;
+  letter-spacing: -0.8px;
+}
+
+.weazel-brand > span {
+  width: 25px;
+  height: 25px;
+  display: grid;
+  place-items: center;
+  margin-right: 2px;
+  border-radius: 7px;
+  background: #d71920;
+  color: #fff;
+}
+
+.weazel-brand b {
+  font-weight: 800;
+}
+
+.weazel-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.weazel-scroll,
+.weazel-detail-scroll,
+.weazel-composer-scroll {
+  position: absolute;
+  inset: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 100px 14px 86px;
+  padding: 12.4cqh 1.7cqh 10.6cqh;
+  scrollbar-width: none;
+}
+
+.weazel-detail-scroll,
+.weazel-composer-scroll {
+  padding-bottom: 32px;
+  padding-bottom: 4cqh;
+}
+
+.weazel-scroll::-webkit-scrollbar,
+.weazel-detail-scroll::-webkit-scrollbar,
+.weazel-composer-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.weazel-section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 8px 4px 18px;
+}
+
+.weazel-section-heading span,
+.weazel-kicker,
+.weazel-card-copy > span,
+.weazel-feature-copy > span {
+  color: #d71920;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 1.25px;
+  text-transform: uppercase;
+}
+
+.weazel-section-heading h1 {
+  margin: 2px 0 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 30px;
+  line-height: 1.05;
+  letter-spacing: -1.1px;
+}
+
+.weazel-section-heading p {
+  max-width: 300px;
+  margin: 7px 0 0;
+  color: var(--weazel-muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.weazel-filter-clear {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: var(--weazel-surface-strong);
+  color: var(--weazel-text);
+}
+
+.weazel-state {
+  min-height: 410px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+  padding: 28px;
+  color: var(--weazel-muted);
+  text-align: center;
+}
+
+.weazel-state--compact {
+  min-height: 260px;
+}
+
+.weazel-state strong {
+  color: var(--weazel-text);
+  font-size: 18px;
+}
+
+.weazel-state span {
+  max-width: 270px;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.weazel-feature-card,
+.weazel-article-card,
+.weazel-access-card {
+  overflow: hidden;
+  margin: 0 0 12px !important;
+  border: 1px solid var(--weazel-line);
+  border-radius: 20px !important;
+  background: var(--weazel-surface) !important;
+  box-shadow: 0 12px 28px rgb(0 0 0 / 13%);
+}
+
+.weazel-feature-card button,
+.weazel-article-card button {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+
+.weazel-feature-card img,
+.weazel-feature-placeholder {
+  width: 100%;
+  height: 178px;
+  display: block;
+  object-fit: cover;
+}
+
+.weazel-feature-placeholder,
+.weazel-detail-masthead {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  overflow: hidden;
+  background:
+    linear-gradient(135deg, rgb(215 25 32 / 92%), rgb(76 5 8 / 94%)), #d71920;
+  color: #fff;
+}
+
+.weazel-feature-placeholder::after,
+.weazel-detail-masthead::after {
+  position: absolute;
+  inset: -45%;
+  border: 1px solid rgb(255 255 255 / 18%);
+  content: '';
+  transform: rotate(24deg);
+}
+
+.weazel-feature-placeholder span,
+.weazel-detail-masthead span {
+  font-family: Georgia, serif;
+  font-size: 70px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.weazel-feature-copy {
+  padding: 17px 18px 19px;
+}
+
+.weazel-feature-copy h2,
+.weazel-card-copy h2 {
+  margin: 5px 0 7px;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 22px;
+  line-height: 1.08;
+  letter-spacing: -0.55px;
+}
+
+.weazel-feature-copy p,
+.weazel-card-copy p {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0 0 10px;
+  color: var(--weazel-muted);
+  font-size: 12px;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.weazel-feature-copy small,
+.weazel-card-copy small {
+  color: var(--weazel-muted);
+  font-size: 10px;
+}
+
+.weazel-latest-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 22px 4px 12px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.weazel-latest-title i {
+  height: 1px;
+  flex: 1;
+  background: var(--weazel-line);
+}
+
+.weazel-article-card button {
+  min-height: 132px;
+  display: flex;
+  align-items: stretch;
+}
+
+.weazel-card-copy {
+  min-width: 0;
+  flex: 1;
+  padding: 15px;
+}
+
+.weazel-card-copy h2 {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 17px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weazel-card-copy p {
+  -webkit-line-clamp: 2;
+}
+
+.weazel-article-card img,
+.weazel-card-mark {
+  width: 115px;
+  min-height: 132px;
+  flex: 0 0 115px;
+  object-fit: cover;
+}
+
+.weazel-card-mark {
+  display: grid;
+  place-items: center;
+  background: linear-gradient(145deg, #d71920, #510609);
+  color: #fff;
+  font-family: Georgia, serif;
+  font-size: 48px;
+  font-weight: 900;
+}
+
+.weazel-load-more {
+  width: 100%;
+  margin-top: 6px;
+}
+
+.weazel-category-list,
+.weazel-editorial-list {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+  overflow: hidden;
+  border: 1px solid var(--weazel-line);
+  border-radius: 20px !important;
+  background: var(--weazel-surface) !important;
+}
+
+.weazel-category-icon {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border-radius: 10px;
+  background: rgb(215 25 32 / 14%);
+  color: #d71920;
+}
+
+.weazel-search-shell {
+  position: relative;
+  margin: 0 0 14px;
+}
+
+.weazel-search-clear {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: 14px;
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: 999px;
+  background: var(--weazel-line);
+  color: var(--weazel-muted);
+}
+
+.weazel-access-content {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 7px 8px;
+  gap: 0.9cqh 1cqh;
+  padding: 9px;
+  padding: 1.1cqh;
+}
+
+.weazel-access-card :deep(.k-card-content) {
+  padding: 0 !important;
+}
+
+.weazel-access-identity {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.weazel-access-identity strong {
+  overflow: hidden;
+  font-size: 14px;
+  font-size: 1.73cqh;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weazel-access-card small {
+  overflow: hidden;
+  color: var(--weazel-muted);
+  font-size: 10px;
+  font-size: 1.24cqh;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weazel-access-avatar {
+  width: 38px;
+  width: 4.7cqh;
+  height: 38px;
+  height: 4.7cqh;
+  display: grid;
+  place-items: center;
+  border-radius: 9px;
+  border-radius: 1.1cqh;
+  background: #d71920;
+  color: #fff;
+  font-family: Georgia, serif;
+  font-size: 18px;
+  font-size: 2.23cqh;
+  font-weight: 900;
+}
+
+.weazel-new-article {
+  width: 100%;
+  min-width: 0;
+  height: 34px !important;
+  height: 4.2cqh !important;
+  min-height: 34px;
+  min-height: 4.2cqh;
+  grid-column: 1 / -1;
+  justify-content: center;
+  font-size: 13px;
+  font-size: 1.61cqh;
+  white-space: nowrap;
+}
+
+.weazel-new-article :deep(svg) {
+  width: 16px;
+  width: 1.98cqh;
+  height: 16px;
+  height: 1.98cqh;
+}
+
+.weazel-editorial-filter {
+  margin: 11px 0;
+  margin: 1.36cqh 0;
+}
+
+.weazel-editorial-thumb {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 9px;
+  background: var(--weazel-surface-strong);
+  color: #d71920;
+}
+
+.weazel-editorial-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.weazel-editorial-list :deep(.weazel-editorial-item__content) {
+  min-height: 68px;
+  min-height: 8.42cqh;
+}
+
+.weazel-editorial-list :deep(.weazel-editorial-item__inner) {
+  min-width: 0;
+  padding-top: 8px;
+  padding-top: 1cqh;
+  padding-bottom: 8px;
+  padding-bottom: 1cqh;
+  text-align: left;
+}
+
+.weazel-editorial-list :deep(.weazel-editorial-item__title-wrap) {
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+  gap: 0.74cqh;
+}
+
+.weazel-editorial-list
+  :deep(.weazel-editorial-item__title-wrap > div:first-child) {
+  min-width: 0;
+  display: -webkit-box;
+  overflow: hidden;
+  flex: 1;
+  font-size: 14px;
+  font-size: 1.73cqh;
+  line-height: 1.25;
+  text-align: left;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weazel-editorial-list :deep(.weazel-editorial-item__inner > div:nth-child(2)) {
+  overflow: hidden;
+  color: var(--weazel-muted);
+  font-size: 10px;
+  font-size: 1.24cqh;
+  line-height: 1.3;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weazel-editorial-list
+  :deep(.weazel-editorial-item__title-wrap > div:nth-last-child(2)) {
+  padding-left: 0;
+}
+
+.weazel-editorial-list :deep(.weazel-editorial-item__title-wrap > svg) {
+  width: 14px;
+  width: 1.73cqh;
+  margin-left: 2px;
+  margin-left: 0.25cqh;
+}
+
+.weazel-status {
+  padding: 3px 5px;
+  padding: 0.37cqh 0.62cqh;
+  border-radius: 999px;
+  background: rgb(142 142 147 / 14%);
+  color: var(--weazel-muted);
+  font-size: 9px;
+  font-size: 1.11cqh;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.weazel-status.is-published {
+  background: rgb(52 199 89 / 14%);
+  color: #34c759;
+}
+
+.weazel-tabbar {
+  position: absolute !important;
+  z-index: 20;
+  right: 9px;
+  right: 1.1cqh;
+  bottom: 25px;
+  bottom: 3.1cqh;
+  left: 9px;
+  left: 1.1cqh;
+  width: auto !important;
+  padding: 0 !important;
+  color: var(--weazel-text);
+  overflow: hidden;
+}
+
+.weazel-tabbar :deep(> div:first-child) {
+  height: 100% !important;
+}
+
+.weazel-tabbar :deep(.weazel-tabbar__inner) {
+  width: 100% !important;
+  height: 50px !important;
+  height: 6.2cqh !important;
+  max-width: none !important;
+  gap: 0 !important;
+  padding: 0 3px !important;
+  padding: 0 0.37cqh !important;
+}
+
+.weazel-tabbar :deep(.weazel-tabbar__pane) {
+  width: 100% !important;
+  max-width: none !important;
+  display: grid !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0;
+}
+
+.weazel-tabbar :deep(.weazel-tabbar__link) {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0 !important;
+}
+
+.weazel-tabbar :deep(.weazel-tabbar__link > span) {
+  min-width: 0;
+  gap: 1px;
+  gap: 0.12cqh;
+  padding: 3px 0 !important;
+  padding: 0.37cqh 0 !important;
+}
+
+.weazel-tabbar :deep(.weazel-tabbar__link.k-link) {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.weazel-tabbar :deep(.k-tabbar-link-icon),
+.weazel-tabbar :deep(.k-icon) {
+  width: 22px !important;
+  width: 2.72cqh !important;
+  height: 22px !important;
+  height: 2.72cqh !important;
+}
+
+.weazel-tabbar :deep(.k-tabbar-link-label) {
+  width: 100%;
+  overflow: hidden;
+  font-size: 9.5px;
+  font-size: 1.18cqh;
+  line-height: 1.15;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weazel-tabbar :deep(.text-primary) {
+  color: #d71920 !important;
+}
+
+.weazel-detail-cover,
+.weazel-detail-masthead {
+  width: calc(100% + 30px);
+  height: 240px;
+  margin: 0 -15px;
+  object-fit: cover;
+}
+
+.weazel-detail-copy {
+  padding: 22px 4px 10px;
+}
+
+.weazel-detail-copy h1 {
+  margin: 7px 0 16px;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 31px;
+  line-height: 1.08;
+  letter-spacing: -1px;
+}
+
+.weazel-byline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 0 17px;
+  border-top: 1px solid var(--weazel-line);
+  border-bottom: 1px solid var(--weazel-line);
+}
+
+.weazel-byline > span {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: #d71920;
+  color: #fff;
+  font-weight: 800;
+}
+
+.weazel-byline > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.weazel-byline small {
+  margin-top: 2px;
+  color: var(--weazel-muted);
+  font-size: 10px;
+}
+
+.weazel-detail-copy > p {
+  margin: 22px 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 16px;
+  line-height: 1.68;
+  white-space: pre-wrap;
+}
+
+.weazel-detail-actions,
+.weazel-composer-actions,
+.weazel-cover-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.weazel-detail-actions > *,
+.weazel-composer-actions > * {
+  flex: 1;
+}
+
+.weazel-danger {
+  color: #ff453a !important;
+}
+
+.weazel-composer-cover {
+  overflow: hidden;
+  margin-bottom: 14px;
+  border: 1px solid var(--weazel-line);
+  border-radius: 20px;
+  background: var(--weazel-surface);
+}
+
+.weazel-composer-cover > img,
+.weazel-composer-cover > div:first-child {
+  width: 100%;
+  height: 190px;
+  object-fit: cover;
+}
+
+.weazel-composer-cover > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--weazel-muted);
+}
+
+.weazel-cover-actions {
+  padding: 10px;
+}
+
+.weazel-cover-actions > * {
+  height: 36px !important;
+  height: 4.45cqh !important;
+  min-width: 0;
+  flex: 1 1 0;
+  padding-block: 0 !important;
+}
+
+.weazel-cover-picker {
+  gap: 6px;
+  gap: 0.74cqh;
+  padding-inline: 10px !important;
+  padding-inline: 1.24cqh !important;
+  font-size: 12px !important;
+  font-size: 1.48cqh !important;
+  line-height: 1.15;
+}
+
+.weazel-cover-picker :deep(svg) {
+  width: 16px;
+  width: 1.98cqh;
+  height: 16px;
+  height: 1.98cqh;
+  flex: none;
+}
+
+.weazel-cover-picker__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weazel-cover-remove {
+  padding-inline: 8px !important;
+  padding-inline: 1cqh !important;
+  font-size: 12px !important;
+  font-size: 1.48cqh !important;
+}
+
+.weazel-composer-list {
+  margin: 0 !important;
+  overflow: visible;
+  background: transparent !important;
+}
+
+.weazel-composer-list :deep(.weazel-composer-field) {
+  margin-block: 13px !important;
+  margin-block: 1.61cqh !important;
+}
+
+.weazel-composer-list :deep(.weazel-composer-field > .relative) {
+  margin-inline: 0 !important;
+  padding-inline-start: 0 !important;
+  border-radius: 9px !important;
+  border-radius: 1.11cqh !important;
+}
+
+.weazel-composer-list :deep(.weazel-composer-field > .relative > .w-full) {
+  padding-block: 0 !important;
+  padding-inline-end: 0 !important;
+}
+
+.weazel-composer-list
+  :deep(.weazel-composer-field > .relative > .w-full > .relative) {
+  margin-top: -7px !important;
+  margin-top: -0.87cqh !important;
+  margin-bottom: -7px !important;
+  margin-bottom: -0.87cqh !important;
+}
+
+.weazel-composer-list :deep(.weazel-composer-field .text-xs) {
+  margin-top: -11px !important;
+  margin-top: -1.36cqh !important;
+  font-size: 10px !important;
+  font-size: 1.24cqh !important;
+  line-height: 1.25;
+}
+
+.weazel-composer-list :deep(.weazel-composer-field .text-xs > div) {
+  top: -1px !important;
+  top: -0.12cqh !important;
+  margin: -1px !important;
+  margin: -0.12cqh !important;
+  padding: 2px 4px !important;
+  padding: 0.25cqh 0.5cqh !important;
+}
+
+.weazel-composer-list :deep(.weazel-composer-input) {
+  height: 44px !important;
+  height: 5.45cqh !important;
+  padding-inline: 2px !important;
+  padding-inline: 0.25cqh !important;
+  color: var(--weazel-text);
+  font-size: 13px !important;
+  font-size: 1.61cqh !important;
+  line-height: 1.35;
+}
+
+.weazel-composer-list :deep(.weazel-body-input) {
+  height: 210px !important;
+  height: 26cqh !important;
+  min-height: 210px !important;
+  min-height: 26cqh !important;
+  padding-block: 8px !important;
+  padding-block: 1cqh !important;
+  resize: none;
+}
+
+.weazel-choice-trigger {
+  margin-block: 13px;
+  margin-block: 1.61cqh;
+}
+
+.weazel-composer-list :deep(.weazel-choice-trigger__content) {
+  min-height: 44px;
+  min-height: 5.45cqh;
+  padding-inline: 10px !important;
+  padding-inline: 1.24cqh !important;
+  border: 1px solid var(--weazel-line);
+  border-radius: 9px;
+  border-radius: 1.11cqh;
+  background: var(--weazel-surface);
+}
+
+.weazel-composer-list :deep(.weazel-choice-trigger__inner) {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  gap: 1cqh;
+  padding: 0 !important;
+}
+
+.weazel-choice-trigger__copy {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  gap: 0.25cqh;
+  text-align: left;
+}
+
+.weazel-choice-trigger__copy small {
+  color: var(--weazel-muted);
+  font-size: 10px;
+  font-size: 1.24cqh;
+  line-height: 1.15;
+}
+
+.weazel-choice-trigger__copy strong {
+  overflow: hidden;
+  color: var(--weazel-text);
+  font-size: 13px;
+  font-size: 1.61cqh;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weazel-choice-trigger__icon {
+  width: 16px;
+  width: 1.98cqh;
+  height: 16px;
+  height: 1.98cqh;
+  flex: none;
+  color: var(--weazel-muted);
+  transition: transform 0.18s ease;
+}
+
+.weazel-choice-trigger__icon.is-open {
+  transform: rotate(180deg);
+}
+
+.weazel-choice-sheet {
+  right: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  border-radius: 18px 18px 0 0 !important;
+  border-radius: 2.23cqh 2.23cqh 0 0 !important;
+  background: var(--weazel-surface) !important;
+  color: var(--weazel-text);
+}
+
+.weazel-choice-sheet__content {
+  max-height: 436px;
+  max-height: 54cqh;
+  overflow-y: auto;
+  padding: 6px 10px 20px;
+  padding: 0.74cqh 1.24cqh 2.48cqh;
+  border-radius: 18px 18px 0 0;
+  border-radius: 2.23cqh 2.23cqh 0 0;
+  background: var(--weazel-surface);
+  color: var(--weazel-text);
+  scrollbar-width: none;
+}
+
+.weazel-choice-sheet__content::-webkit-scrollbar {
+  display: none;
+}
+
+.weazel-choice-sheet__handle {
+  width: 34px;
+  width: 4.2cqh;
+  height: 4px;
+  height: 0.5cqh;
+  margin: 0 auto 6px;
+  margin: 0 auto 0.74cqh;
+  border-radius: 999px;
+  background: var(--weazel-line);
+}
+
+.weazel-choice-sheet__header {
+  min-height: 36px;
+  min-height: 4.45cqh;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  gap: 1cqh;
+  padding-inline: 4px;
+  padding-inline: 0.5cqh;
+}
+
+.weazel-choice-sheet__header h2 {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 16px;
+  font-size: 1.98cqh;
+  line-height: 1.15;
+}
+
+.weazel-choice-sheet__close {
+  width: 30px !important;
+  width: 3.71cqh !important;
+  height: 30px !important;
+  height: 3.71cqh !important;
+  min-width: 30px !important;
+  min-width: 3.71cqh !important;
+  padding: 0 !important;
+  border-radius: 999px;
+  background: var(--weazel-surface-strong);
+  color: var(--weazel-muted);
+}
+
+.weazel-choice-sheet__close :deep(svg) {
+  width: 15px;
+  width: 1.86cqh;
+  height: 15px;
+  height: 1.86cqh;
+}
+
+.weazel-choice-options {
+  margin: 5px 0 0 !important;
+  margin: 0.62cqh 0 0 !important;
+}
+
+.weazel-choice-options :deep(.weazel-choice-option__content) {
+  min-height: 40px;
+  min-height: 4.95cqh;
+  padding-inline: 8px !important;
+  padding-inline: 1cqh !important;
+  border-radius: 8px;
+  border-radius: 1cqh;
+}
+
+.weazel-choice-options :deep(.weazel-choice-option__inner) {
+  min-width: 0;
+  padding: 0 !important;
+}
+
+.weazel-choice-options :deep(.weazel-choice-option__title) {
+  min-height: 40px !important;
+  min-height: 4.95cqh !important;
+  font-size: 13px !important;
+  font-size: 1.61cqh !important;
+  line-height: 1.2;
+}
+
+.weazel-choice-options :deep(.weazel-choice-option__title > div:first-child) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weazel-choice-options :deep(.weazel-choice-option__title > div:nth-child(2)) {
+  gap: 2px;
+  gap: 0.25cqh;
+  padding-inline-start: 3px;
+  padding-inline-start: 0.37cqh;
+}
+
+.weazel-choice-options :deep(.weazel-choice-option__title svg) {
+  width: 16px;
+  width: 1.98cqh;
+  height: 16px;
+  height: 1.98cqh;
+  color: #d71920;
+}
+
+.weazel-composer-actions {
+  margin: 16px 0 5px;
+}
+
+.weazel-composer-actions > * {
+  height: 44px !important;
+  height: 5.45cqh !important;
+  padding: 0 8px !important;
+  padding: 0 1cqh !important;
+  font-size: 14px !important;
+  font-size: 1.73cqh !important;
+  line-height: 1.15;
+}
+</style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index f2e8742..e4b0a3f 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -2336,6 +2336,194 @@ let mockMedia = [
     url: 'https://picsum.photos/seed/sky-phone-5/800/600',
   },
 ]
+
+const weazelNewsCategoryIds = ['official', 'events', 'jobs', 'news', 'business']
+let weazelNewsSequence = 8
+let weazelNewsArticles = [
+  {
+    id: '34c0ec54-bfb1-4ad7-81da-000000000001',
+    title: 'Port Authority announces temporary harbor restrictions',
+    body: 'The Port Authority has announced temporary navigation restrictions around the southern harbor while maintenance crews inspect the main shipping channel. Commercial operators should follow marked diversion routes and expect short delays through the afternoon. Emergency traffic will continue without interruption.',
+    excerpt:
+      'Temporary navigation restrictions are in effect around the southern harbor while crews inspect the main shipping channel.',
+    category: 'official',
+    imageUrl: 'https://picsum.photos/seed/weazel-harbor/1200/760',
+    imageMediaId: null,
+    authorName: 'Avery Brooks',
+    createdAt: Date.now() - 35 * 60 * 1000,
+    updatedAt: Date.now() - 28 * 60 * 1000,
+    publishedAt: Date.now() - 30 * 60 * 1000,
+    status: 'published',
+    revision: 2,
+  },
+  {
+    id: '34c0ec54-bfb1-4ad7-81da-000000000002',
+    title: 'Vinewood summer festival opens this weekend',
+    body: "Vinewood Boulevard will welcome food stands, live performers, and classic cars during this weekend's summer festival. Organizers recommend using public parking near the eastern entrance and arriving early for the evening concert. The event is free and runs from noon until late.",
+    excerpt:
+      'Food stands, live performers, and classic cars are coming to Vinewood Boulevard this weekend.',
+    category: 'events',
+    imageUrl: 'https://picsum.photos/seed/weazel-vinewood/1200/760',
+    imageMediaId: null,
+    authorName: 'Maya Chen',
+    createdAt: Date.now() - 2 * 60 * 60 * 1000,
+    updatedAt: Date.now() - 2 * 60 * 60 * 1000,
+    publishedAt: Date.now() - 2 * 60 * 60 * 1000,
+    status: 'published',
+    revision: 1,
+  },
+  {
+    id: '34c0ec54-bfb1-4ad7-81da-000000000003',
+    title: 'City services expand recruitment drive',
+    body: 'Several city departments have opened a coordinated recruitment drive for new staff. Positions are available across emergency response, transport, and public administration. Applicants should review individual department requirements before attending the recruitment office at City Hall.',
+    excerpt:
+      'City departments are recruiting new staff across emergency response, transport, and public administration.',
+    category: 'jobs',
+    imageUrl: null,
+    imageMediaId: null,
+    authorName: 'Jordan Hayes',
+    createdAt: Date.now() - 4 * 60 * 60 * 1000,
+    updatedAt: Date.now() - 3 * 60 * 60 * 1000,
+    publishedAt: Date.now() - 3 * 60 * 60 * 1000,
+    status: 'published',
+    revision: 2,
+  },
+  {
+    id: '34c0ec54-bfb1-4ad7-81da-000000000004',
+    title: 'Traffic returns to normal after Del Perro closure',
+    body: 'Traffic is moving normally again through Del Perro after crews cleared an earlier road obstruction. Police have reopened every lane and removed the temporary diversion signs. Drivers may still encounter brief congestion while the remaining queue disperses.',
+    excerpt:
+      'Every lane through Del Perro has reopened after crews cleared an earlier road obstruction.',
+    category: 'news',
+    imageUrl: 'https://picsum.photos/seed/weazel-del-perro/1200/760',
+    imageMediaId: null,
+    authorName: 'Avery Brooks',
+    createdAt: Date.now() - 7 * 60 * 60 * 1000,
+    updatedAt: Date.now() - 6 * 60 * 60 * 1000,
+    publishedAt: Date.now() - 6 * 60 * 60 * 1000,
+    status: 'published',
+    revision: 3,
+  },
+  {
+    id: '34c0ec54-bfb1-4ad7-81da-000000000005',
+    title: 'Downtown retailers report strong evening trade',
+    body: 'Independent retailers across downtown Los Santos reported stronger evening trade following the launch of extended opening hours. Business owners credited increased foot traffic and a busy restaurant district. The trial will continue through the end of the month before a permanent schedule is considered.',
+    excerpt:
+      'Independent downtown retailers are seeing stronger evening trade during a trial of extended opening hours.',
+    category: 'business',
+    imageUrl: 'https://picsum.photos/seed/weazel-downtown/1200/760',
+    imageMediaId: null,
+    authorName: 'Maya Chen',
+    createdAt: Date.now() - 26 * 60 * 60 * 1000,
+    updatedAt: Date.now() - 25 * 60 * 60 * 1000,
+    publishedAt: Date.now() - 25 * 60 * 60 * 1000,
+    status: 'published',
+    revision: 2,
+  },
+  {
+    id: '34c0ec54-bfb1-4ad7-81da-000000000006',
+    title: 'Interview: preparing for the next racing season',
+    body: 'Local racing teams are preparing new vehicles and reviewing safety procedures before the next sanctioned season begins. Weazel News spoke with organizers about the revised technical checks, route planning, and what spectators can expect at the opening round.',
+    excerpt:
+      'Local racing teams are preparing vehicles and reviewing safety procedures for the next sanctioned season.',
+    category: 'events',
+    imageUrl: 'https://picsum.photos/seed/sky-phone-3/800/600',
+    imageMediaId: 3,
+    authorName: 'Jordan Hayes',
+    createdAt: Date.now() - 55 * 60 * 1000,
+    updatedAt: Date.now() - 12 * 60 * 1000,
+    publishedAt: null,
+    status: 'draft',
+    revision: 4,
+  },
+  {
+    id: '34c0ec54-bfb1-4ad7-81da-000000000007',
+    title: 'Draft briefing for Monday morning',
+    body: 'The editorial desk is collecting confirmed service notices and transport updates for Monday morning. This working draft will be expanded when the final statements arrive from the relevant city departments.',
+    excerpt:
+      'The editorial desk is collecting confirmed service notices and transport updates for Monday morning.',
+    category: 'official',
+    imageUrl: null,
+    imageMediaId: null,
+    authorName: 'Jordan Hayes',
+    createdAt: Date.now() - 18 * 60 * 1000,
+    updatedAt: Date.now() - 8 * 60 * 1000,
+    publishedAt: null,
+    status: 'draft',
+    revision: 2,
+  },
+]
+
+function weazelNewsExcerpt(body) {
+  const normalized = body.replace(/\s+/g, ' ').trim()
+  return normalized.length <= 240
+    ? normalized
+    : `${normalized.slice(0, 237).trimEnd()}...`
+}
+
+function weazelNewsImageUrl(imageMediaId) {
+  if (imageMediaId === null) return null
+  const media = mockMedia.find(
+    (item) => item.id === imageMediaId && item.mediaType === 'photo',
+  )
+  return media?.url ?? null
+}
+
+function validateWeazelNewsDraft(data) {
+  const title = typeof data.title === 'string' ? data.title.trim() : ''
+  const body = typeof data.body === 'string' ? data.body.trim() : ''
+  const status = data.status
+  const minimumTitleLength = 1
+  const minimumBodyLength = 1
+  if (
+    Array.from(title).length < minimumTitleLength ||
+    Array.from(title).length > 160 ||
+    Array.from(body).length < minimumBodyLength ||
+    Array.from(body).length > 12000 ||
+    !weazelNewsCategoryIds.includes(data.category) ||
+    !['draft', 'published'].includes(status)
+  ) {
+    return { error: status === 'draft' ? 'invalid_draft' : 'invalid_publish' }
+  }
+
+  let imageMediaId = null
+  if (data.imageMediaId !== null && data.imageMediaId !== undefined) {
+    imageMediaId = Number(data.imageMediaId)
+    if (
+      !Number.isSafeInteger(imageMediaId) ||
+      !weazelNewsImageUrl(imageMediaId)
+    ) {
+      return { error: 'invalid_attachment' }
+    }
+  }
+
+  return {
+    article: {
+      body,
+      category: data.category,
+      excerpt: weazelNewsExcerpt(body),
+      imageMediaId,
+      imageUrl: weazelNewsImageUrl(imageMediaId),
+      status,
+      title,
+    },
+  }
+}
+
+function pageWeazelNewsArticles(items, data) {
+  const offset = Math.max(0, Math.floor(Number(data.offset) || 0))
+  const requestedLimit = Math.floor(Number(data.limit) || 20)
+  const limit = Math.min(50, Math.max(1, requestedLimit))
+  return {
+    hasMore: offset + limit < items.length,
+    items: items.slice(offset, offset + limit).map((article) => {
+      const summary = { ...article }
+      delete summary.body
+      return summary
+    }),
+  }
+}
+
 const marketplaceInquiries = [
   {
     id: '4903b923-409a-437e-971f-b7a2b10e9e31',
@@ -4111,6 +4299,177 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true })
     return
   }
+  const canManageWeazelNews = testScenario !== 'weazel-readonly'
+  if (endpoint === 'weazel-news:context') {
+    response.json({
+      success: true,
+      data: {
+        canManage: canManageWeazelNews,
+        categories: weazelNewsCategoryIds.map((id) => ({
+          count: weazelNewsArticles.filter(
+            (article) =>
+              article.status === 'published' && article.category === id,
+          ).length,
+          id,
+        })),
+        ...(canManageWeazelNews
+          ? { jobGradeLabel: 'Senior Reporter', jobLabel: 'Weazel News' }
+          : {}),
+      },
+    })
+    return
+  }
+  if (endpoint === 'weazel-news:list') {
+    const category = request.body.category ?? null
+    const search = String(request.body.search ?? '')
+      .trim()
+      .toLowerCase()
+    if (
+      category !== null &&
+      !weazelNewsCategoryIds.includes(String(category))
+    ) {
+      response.json({ success: false, error: 'invalid_request' })
+      return
+    }
+    const items = weazelNewsArticles
+      .filter((article) => article.status === 'published')
+      .filter((article) => category === null || article.category === category)
+      .filter(
+        (article) =>
+          !search ||
+          `${article.title} ${article.body}`.toLowerCase().includes(search),
+      )
+      .sort((left, right) => (right.publishedAt ?? 0) - (left.publishedAt ?? 0))
+    response.json({
+      success: true,
+      data: pageWeazelNewsArticles(items, request.body),
+    })
+    return
+  }
+  if (endpoint === 'weazel-news:get') {
+    if (request.body.manage === true && !canManageWeazelNews) {
+      response.json({ success: false, error: 'not_authorized' })
+      return
+    }
+    const article = weazelNewsArticles.find(
+      (item) =>
+        item.id === request.body.id &&
+        (request.body.manage === true || item.status === 'published'),
+    )
+    response.json(
+      article
+        ? { success: true, data: { article } }
+        : { success: false, error: 'not_found' },
+    )
+    return
+  }
+  if (endpoint === 'weazel-news:manage-list') {
+    if (!canManageWeazelNews) {
+      response.json({ success: false, error: 'not_authorized' })
+      return
+    }
+    const status = String(request.body.status ?? 'all')
+    const search = String(request.body.search ?? '')
+      .trim()
+      .toLowerCase()
+    if (!['all', 'published', 'draft'].includes(status)) {
+      response.json({ success: false, error: 'invalid_request' })
+      return
+    }
+    const items = weazelNewsArticles
+      .filter((article) => status === 'all' || article.status === status)
+      .filter(
+        (article) =>
+          !search ||
+          `${article.title} ${article.body}`.toLowerCase().includes(search),
+      )
+      .sort((left, right) => right.updatedAt - left.updatedAt)
+    response.json({
+      success: true,
+      data: pageWeazelNewsArticles(items, request.body),
+    })
+    return
+  }
+  if (
+    ['weazel-news:create', 'weazel-news:update', 'weazel-news:delete'].includes(
+      endpoint,
+    ) &&
+    !canManageWeazelNews
+  ) {
+    response.json({ success: false, error: 'not_authorized' })
+    return
+  }
+  if (endpoint === 'weazel-news:create') {
+    const validation = validateWeazelNewsDraft(request.body)
+    if (!validation.article) {
+      response.json({ success: false, error: validation.error })
+      return
+    }
+    const now = Date.now()
+    const id = `34c0ec54-bfb1-4ad7-81da-${String(weazelNewsSequence).padStart(12, '0')}`
+    weazelNewsSequence += 1
+    const article = {
+      ...validation.article,
+      authorName: 'Jordan Hayes',
+      createdAt: now,
+      id,
+      publishedAt: validation.article.status === 'published' ? now : null,
+      revision: 1,
+      updatedAt: now,
+    }
+    weazelNewsArticles.unshift(article)
+    response.json({ success: true, data: { article } })
+    return
+  }
+  if (endpoint === 'weazel-news:update') {
+    const index = weazelNewsArticles.findIndex(
+      (article) => article.id === request.body.id,
+    )
+    if (index < 0) {
+      response.json({ success: false, error: 'not_found' })
+      return
+    }
+    const current = weazelNewsArticles[index]
+    if (current.revision !== Number(request.body.revision)) {
+      response.json({ success: false, error: 'revision_conflict' })
+      return
+    }
+    const validation = validateWeazelNewsDraft(request.body)
+    if (!validation.article) {
+      response.json({ success: false, error: validation.error })
+      return
+    }
+    const now = Date.now()
+    const article = {
+      ...current,
+      ...validation.article,
+      publishedAt:
+        validation.article.status === 'published'
+          ? (current.publishedAt ?? now)
+          : null,
+      revision: current.revision + 1,
+      updatedAt: now,
+    }
+    weazelNewsArticles[index] = article
+    response.json({ success: true, data: { article } })
+    return
+  }
+  if (endpoint === 'weazel-news:delete') {
+    const index = weazelNewsArticles.findIndex(
+      (article) => article.id === request.body.id,
+    )
+    if (index < 0) {
+      response.json({ success: false, error: 'not_found' })
+      return
+    }
+    if (weazelNewsArticles[index].revision !== Number(request.body.revision)) {
+      response.json({ success: false, error: 'revision_conflict' })
+      return
+    }
+    weazelNewsArticles.splice(index, 1)
+    response.json({ success: true })
+    return
+  }
   if (endpoint.startsWith('companies:') && testScenario === 'companies-error') {
     response.json({ success: false, error: 'service_unavailable' })
     return
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 347a95d..9db7931 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -138,6 +138,131 @@ Locales["en"] = {
                 unavailableBody = "This custom app could not be loaded. Check that its resource is started, then reopen the app.",
                 close = "Close app",
             },
+            weazelNews = {
+                name = "Weazel News",
+                brand = "WEAZEL NEWS",
+                navigation = "Weazel News navigation",
+                tabs = {
+                    home = "Home",
+                    categories = "Categories",
+                    search = "Search",
+                    editorial = "Editorial",
+                },
+                back = "Back",
+                retry = "Try Again",
+                loadMore = "Load More",
+                home = {
+                    eyebrow = "Los Santos, live",
+                    latest = "Latest News",
+                },
+                categories = {
+                    title = "Categories",
+                    subtitle = "Browse every story from the Weazel News desk.",
+                    all = "All Stories",
+                    official = "Official Notices",
+                    events = "Events & Leisure",
+                    jobs = "Jobs",
+                    news = "News & Events",
+                    business = "Business",
+                },
+                search = {
+                    placeholder = "Search articles...",
+                    title = "Search Weazel News",
+                    emptyTitle = "No Articles Found",
+                    emptyBody = "Try another headline, topic, or category.",
+                },
+                states = {
+                    loading = "Loading Weazel News...",
+                    emptyTitle = "No News Yet",
+                    emptyBody = "The Weazel News desk has not published any articles here yet.",
+                    errorTitle = "Weazel News Is Unavailable",
+                    readOnlyTitle = "Read-only Access",
+                    readOnlyBody = "Your current job can read Weazel News, but cannot manage articles.",
+                    noManagedTitle = "No Editorial Articles",
+                    noManagedBody = "Create an article or change the current editorial filter.",
+                },
+                article = {
+                    readMore = "Read Article",
+                    byline = "By {author}",
+                    updated = "Updated {date}",
+                    published = "Published {date}",
+                    coverAlt = "Cover image for {title}",
+                },
+                editorial = {
+                    title = "Editorial Desk",
+                    subtitle = "Create, publish, and maintain Weazel News articles.",
+                    newArticle = "New Article",
+                    published = "Published",
+                    drafts = "Drafts",
+                    all = "All",
+                    jobAccess = "Signed in as {job}",
+                    edit = "Edit Article",
+                    delete = "Delete Article",
+                },
+                composer = {
+                    newTitle = "New Article",
+                    editTitle = "Edit Article",
+                    title = "Headline",
+                    titlePlaceholder = "Write a clear headline",
+                    body = "Article",
+                    bodyPlaceholder = "Write the full story...",
+                    category = "Category",
+                    status = "Publication Status",
+                    cover = "Cover Image",
+                    chooseCover = "Choose from Gallery",
+                    changeCover = "Change Cover",
+                    removeCover = "Remove Cover",
+                    coverAlt = "Selected article cover",
+                    publish = "Publish Article",
+                    saveDraft = "Save Draft",
+                    saveChanges = "Save Changes",
+                    statusPublished = "Published",
+                    statusDraft = "Draft",
+                },
+                delete = {
+                    title = "Delete Article?",
+                    body = "This article will be removed from Weazel News.",
+                    cancel = "Cancel",
+                    confirm = "Delete",
+                },
+                feedback = {
+                    created = "Article created.",
+                    updated = "Article updated.",
+                    deleted = "Article deleted.",
+                },
+                accessibility = {
+                    articleList = "Weazel News articles",
+                    categoryList = "News categories",
+                    editorialList = "Editorial articles",
+                    openArticle = "Open {title}",
+                    openCategory = "Open {category}",
+                    openEditorial = "Open the editorial desk",
+                    newArticle = "Create a new article",
+                    editArticle = "Edit {title}",
+                    deleteArticle = "Delete {title}",
+                    search = "Search Weazel News",
+                    clearSearch = "Clear article search",
+                    coverPreview = "Article cover preview",
+                    removeCover = "Remove the selected cover image",
+                    status = "Article status: {status}",
+                },
+                errors = {
+                    feature_disabled = "Weazel News is currently disabled.",
+                    invalid_article = "Enter a valid headline, article, and category.",
+                    invalid_draft = "Enter a headline and article text before saving the draft.",
+                    invalid_publish = "Enter a headline and article text before publishing.",
+                    invalid_request = "Check the article details and try again.",
+                    invalid_image = "Choose a valid photo from this phone.",
+                    invalid_attachment = "Choose a valid photo from this phone.",
+                    not_authorized = "Your current job cannot manage Weazel News articles.",
+                    article_not_found = "This article is no longer available.",
+                    not_found = "This article is no longer available.",
+                    revision_conflict = "This article changed on another device. Reload it and try again.",
+                    rate_limited = "Too many requests. Try again shortly.",
+                    request_failed = "Weazel News could not complete the request.",
+                    default = "Weazel News is temporarily unavailable.",
+                },
+            },
             crewlink = {
                 name = "CrewLink", connecting = "Connecting your crew...", privateNetwork = "Private location network",
                 signInTitle = "Connect your iFruit Account", signInBody = "CrewLink uses your private iFruit identity to keep groups and roles available across your phones.", openSettings = "Open iFruit Settings",
diff --git a/sky_phone/config/weazel_news.lua b/sky_phone/config/weazel_news.lua
new file mode 100644
index 0000000..af0ecc0
--- /dev/null
+++ b/sky_phone/config/weazel_news.lua
@@ -0,0 +1,28 @@
+Config.WeazelNews = {
+    Enabled = true,
+    PageSize = 20,
+    MaximumOffset = 10000,
+    SearchMaxLength = 80,
+    DraftTitleMinLength = 1,
+    DraftBodyMinLength = 1,
+    TitleMinLength = 1,
+    TitleMaxLength = 160,
+    BodyMinLength = 1,
+    BodyMaxLength = 12000,
+    ExcerptMaxLength = 240,
+    RateLimits = {
+        Read = 120,
+        Write = 20,
+    },
+    Categories = {
+        "official",
+        "events",
+        "jobs",
+        "news",
+        "business",
+    },
+    -- Framework job name = minimum grade. Every listed job can manage every article.
+    AllowedJobs = {
+        weazel = 0,
+    },
+}
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index e5f67e7..76b7f45 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -51,6 +51,7 @@ server_scripts {
     'config/companies.lua',
     'config/media.lua',
     'config/music.lua',
+    'config/weazel_news.lua',
     'config/locales/*.lua',
     'source/bridge/server/database.lua',
     'source/bridge/server/migrations.lua',
@@ -71,6 +72,7 @@ server_scripts {
     'source/server/payphones.lua',
     'source/server/calls.lua',
     'source/server/media.lua',
+    'source/server/weazel_news.lua',
     'source/server/messages.lua',
     'source/server/easyshare.lua',
     'source/server/darkchat.lua',
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 2e88d41..8f8d109 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -76,6 +76,13 @@ local server_callbacks = {
     "pages:share-citymarkt",
     "pages:react",
     "pages:delete",
+    "weazel-news:context",
+    "weazel-news:list",
+    "weazel-news:get",
+    "weazel-news:manage-list",
+    "weazel-news:create",
+    "weazel-news:update",
+    "weazel-news:delete",
     "fliptok:register",
     "fliptok:login",
     "fliptok:logout",
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 6dfbf02..d15efff 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -2499,6 +2499,38 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_weazel_articles",
+        columns = {
+            { name = "id", type = "CHAR(36) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "title", type = "VARCHAR(160) NOT NULL" },
+            { name = "body", type = "LONGTEXT NOT NULL" },
+            { name = "excerpt", type = "VARCHAR(240) NOT NULL" },
+            { name = "category", type = "ENUM('official','events','jobs','news','business') NOT NULL" },
+            { name = "image_media_id", type = "BIGINT UNSIGNED NULL" },
+            { name = "author_identifier", type = "VARCHAR(80) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "author_name", type = "VARCHAR(120) NOT NULL" },
+            { name = "updated_by_identifier", type = "VARCHAR(80) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "status", type = "ENUM('draft','published') NOT NULL DEFAULT 'draft'" },
+            { name = "revision", type = "INT UNSIGNED NOT NULL DEFAULT 1" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+            { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
+            { name = "published_at", type = "DATETIME NULL" },
+            { name = "deleted_at", type = "DATETIME NULL" },
+            { name = "deleted_by_identifier", type = "VARCHAR(80) NULL", characterSet = "ascii", collation = "ascii_bin" },
+        },
+        primaryKey = "id",
+        indexes = {
+            { name = "idx_sky_phone_weazel_public", columns = "(`status`, `deleted_at`, `published_at`, `id`)" },
+            { name = "idx_sky_phone_weazel_category", columns = "(`category`, `status`, `deleted_at`, `published_at`, `id`)" },
+            { name = "idx_sky_phone_weazel_manage", columns = "(`deleted_at`, `status`, `updated_at`, `id`)" },
+            { name = "idx_sky_phone_weazel_media", columns = "(`image_media_id`)" },
+        },
+        foreignKeys = {
+            { column = "image_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
+        },
+        tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
+    },
 }
 
 Bridge.Database.Migrate("sky_phone", schema)
diff --git a/sky_phone/source/server/weazel_news.lua b/sky_phone/source/server/weazel_news.lua
new file mode 100644
index 0000000..a70f797
--- /dev/null
+++ b/sky_phone/source/server/weazel_news.lua
@@ -0,0 +1,597 @@
+Bridge.Database.AfterMigration("sky_phone", function()
+local config = Config.WeazelNews
+
+if type(config) ~= "table" then
+    error("[sky_phone] Config.WeazelNews must be configured.")
+end
+
+local function require_integer_config(name, minimum, maximum)
+    local value = config[name]
+    if type(value) ~= "number" or value ~= math.floor(value) or value < minimum or value > maximum then
+        error(("[sky_phone] Config.WeazelNews.%s must be an integer between %d and %d."):format(name, minimum, maximum))
+    end
+end
+
+if type(config.Enabled) ~= "boolean" then
+    error("[sky_phone] Config.WeazelNews.Enabled must be true or false.")
+end
+require_integer_config("PageSize", 1, 100)
+require_integer_config("MaximumOffset", 0, 1000000)
+require_integer_config("SearchMaxLength", 1, 256)
+require_integer_config("DraftTitleMinLength", 1, 160)
+require_integer_config("DraftBodyMinLength", 1, 12000)
+require_integer_config("TitleMinLength", 1, 160)
+require_integer_config("TitleMaxLength", 1, 160)
+require_integer_config("BodyMinLength", 1, 12000)
+require_integer_config("BodyMaxLength", 1, 12000)
+require_integer_config("ExcerptMaxLength", 1, 240)
+if config.DraftTitleMinLength > config.TitleMaxLength
+    or config.DraftBodyMinLength > config.BodyMaxLength
+    or config.TitleMinLength > config.TitleMaxLength
+    or config.BodyMinLength > config.BodyMaxLength
+then
+    error("[sky_phone] Weazel News minimum text lengths cannot exceed their maximums.")
+end
+if type(config.RateLimits) ~= "table" then
+    error("[sky_phone] Config.WeazelNews.RateLimits must be a table.")
+end
+for _, name in ipairs({ "Read", "Write" }) do
+    local value = config.RateLimits[name]
+    if type(value) ~= "number" or value ~= math.floor(value) or value < 1 or value > 10000 then
+        error(("[sky_phone] Config.WeazelNews.RateLimits.%s must be an integer between 1 and 10000."):format(name))
+    end
+end
+
+local supported_categories = {
+    official = true,
+    events = true,
+    jobs = true,
+    news = true,
+    business = true,
+}
+if type(config.Categories) ~= "table" then
+    error("[sky_phone] Config.WeazelNews.Categories must be a table.")
+end
+
+local categories = {}
+for _, category in ipairs(config.Categories or {}) do
+    if type(category) ~= "string" or #category < 1 or #category > 32
+        or not category:match("^[%l_]+$") or categories[category]
+    then
+        error(("[sky_phone] Invalid Weazel News category '%s'."):format(tostring(category)))
+    end
+    categories[category] = true
+end
+for category in pairs(supported_categories) do
+    if not categories[category] then
+        error(("[sky_phone] Config.WeazelNews.Categories is missing supported category '%s'."):format(category))
+    end
+end
+for category in pairs(categories) do
+    if not supported_categories[category] then
+        error(("[sky_phone] Config.WeazelNews.Categories contains unsupported category '%s'."):format(category))
+    end
+end
+
+if type(config.AllowedJobs) ~= "table" then
+    error("[sky_phone] Config.WeazelNews.AllowedJobs must be a table.")
+end
+
+for job_name, minimum_grade in pairs(config.AllowedJobs or {}) do
+    if type(job_name) ~= "string" or #job_name < 1 or #job_name > 64
+        or not job_name:match("^[%w_-]+$")
+        or type(minimum_grade) ~= "number" or minimum_grade < 0
+        or minimum_grade ~= math.floor(minimum_grade)
+    then
+        error(("[sky_phone] Invalid Weazel News AllowedJobs entry '%s'."):format(tostring(job_name)))
+    end
+end
+
+local article_summary_columns = [[
+    article.`id`, article.`title`, article.`excerpt`, article.`category`,
+    article.`image_media_id`, media.`url` AS `image_url`, article.`author_name`,
+    article.`status`, article.`revision`,
+    UNIX_TIMESTAMP(article.`created_at`) AS `created_at_unix`,
+    UNIX_TIMESTAMP(article.`updated_at`) AS `updated_at_unix`,
+    UNIX_TIMESTAMP(article.`published_at`) AS `published_at_unix`
+]]
+local article_detail_columns = article_summary_columns .. ", article.`body`"
+
+local function trim(value)
+    if type(value) ~= "string" then
+        return nil
+    end
+    return value:match("^%s*(.-)%s*$")
+end
+
+local function text_length(value)
+    if type(value) ~= "string" then
+        return nil
+    end
+    local success, length = pcall(utf8.len, value)
+    return success and length or nil
+end
+
+local function truncate_text(value, maximum)
+    local length = text_length(value)
+    if not length or length <= maximum then
+        return value
+    end
+    local next_character = utf8.offset(value, maximum + 1)
+    return next_character and value:sub(1, next_character - 1) or value
+end
+
+local function make_excerpt(body)
+    return truncate_text(body:gsub("%s+", " "), config.ExcerptMaxLength)
+end
+
+local function valid_integer(value, minimum, maximum)
+    local number = type(value) == "number" and value or nil
+    if not number or number ~= math.floor(number) or number < minimum or number > maximum then
+        return nil
+    end
+    return number
+end
+
+local function valid_uuid(value)
+    return type(value) == "string"
+        and value:match("^%x%x%x%x%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%x%x%x%x%x%x%x%x$") ~= nil
+end
+
+local function affected_rows(result)
+    if type(result) == "number" then
+        return result
+    end
+    return type(result) == "table" and tonumber(result.affectedRows) or 0
+end
+
+local function require_phone(source, operation, maximum)
+    if not config.Enabled then
+        return nil, { success = false, error = "feature_disabled" }
+    end
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, error_response
+    end
+    if not SkyPhone.AllowOperation(source, "weazel_" .. operation, maximum, 60) then
+        return nil, { success = false, error = "rate_limited" }
+    end
+    return session
+end
+
+local function management_access(source)
+    local job = Bridge.Framework.GetJob(source)
+    local minimum_grade = (config.AllowedJobs or {})[job.name]
+    local grade = tonumber(job.grade) or 0
+    if minimum_grade == nil or grade < minimum_grade then
+        return nil
+    end
+    return {
+        job_label = type(job.label) == "string" and job.label or "",
+        grade_label = type(job.gradeLabel) == "string" and job.gradeLabel or "",
+    }
+end
+
+local function require_manager(source)
+    local access = management_access(source)
+    if not access then
+        return nil, { success = false, error = "not_authorized" }
+    end
+    return access
+end
+
+local function actor_identity(source)
+    local identifier = Bridge.Framework.GetIdentifier(source)
+    if type(identifier) ~= "string" or #identifier < 1 or #identifier > 80 then
+        Bridge.Debug("error", "[sky_phone] Could not resolve a valid Weazel News actor for source %s.", tostring(source))
+        return nil
+    end
+
+    local first_name = trim(Bridge.Framework.GetFirstname(source)) or ""
+    local last_name = trim(Bridge.Framework.GetLastname(source)) or ""
+    local name = trim((first_name .. " " .. last_name))
+    if not name or name == "" then
+        name = trim(GetPlayerName(source)) or "Weazel News"
+    end
+    if not text_length(name) then
+        name = "Weazel News"
+    end
+    return {
+        identifier = identifier,
+        name = truncate_text(name, 120),
+    }
+end
+
+local function article_dto(row)
+    if not row then
+        return nil
+    end
+    local created_at = tonumber(row.created_at_unix)
+    local updated_at = tonumber(row.updated_at_unix)
+    if not created_at or not updated_at then
+        error(("[sky_phone] Weazel News article '%s' has invalid timestamps."):format(tostring(row.id)))
+    end
+    return {
+        id = row.id,
+        title = row.title,
+        body = row.body,
+        excerpt = row.excerpt,
+        category = row.category,
+        imageUrl = row.image_url,
+        imageMediaId = row.image_media_id and tonumber(row.image_media_id) or nil,
+        authorName = row.author_name,
+        createdAt = created_at * 1000,
+        updatedAt = updated_at * 1000,
+        publishedAt = row.published_at_unix and tonumber(row.published_at_unix) * 1000 or nil,
+        status = row.status,
+        revision = tonumber(row.revision) or 1,
+    }
+end
+
+local function load_article(id, include_drafts)
+    local visibility = include_drafts and "" or " AND article.`status` = 'published'"
+    local rows = Bridge.Database.Query(([[
+        SELECT %s
+        FROM `sky_phone_weazel_articles` article
+        LEFT JOIN `sky_phone_media` media ON media.`id` = article.`image_media_id`
+        WHERE article.`id` = ? AND article.`deleted_at` IS NULL%s
+        LIMIT 1
+    ]]):format(article_detail_columns, visibility), { id })
+    return article_dto(rows[1])
+end
+
+local function query_articles(where_clause, parameters, order_clause, offset)
+    local query_parameters = {}
+    for _, value in ipairs(parameters) do
+        query_parameters[#query_parameters + 1] = value
+    end
+    query_parameters[#query_parameters + 1] = config.PageSize + 1
+    query_parameters[#query_parameters + 1] = offset
+
+    local rows = Bridge.Database.Query(([[
+        SELECT %s
+        FROM `sky_phone_weazel_articles` article
+        LEFT JOIN `sky_phone_media` media ON media.`id` = article.`image_media_id`
+        WHERE %s
+        ORDER BY %s
+        LIMIT ? OFFSET ?
+    ]]):format(article_summary_columns, where_clause, order_clause), query_parameters)
+    local has_more = #rows > config.PageSize
+    if has_more then
+        rows[#rows] = nil
+    end
+    local articles = {}
+    for _, row in ipairs(rows) do
+        articles[#articles + 1] = article_dto(row)
+    end
+    return articles, has_more
+end
+
+local function validate_article(source, data, retained_media_id)
+    if type(data) ~= "table" then
+        return nil, "invalid_article"
+    end
+    local title = trim(data.title)
+    local body = trim(data.body)
+    local title_length = text_length(title)
+    local body_length = text_length(body)
+    local status = data.status
+    local minimum_title_length = status == "draft" and config.DraftTitleMinLength or config.TitleMinLength
+    local minimum_body_length = status == "draft" and config.DraftBodyMinLength or config.BodyMinLength
+    if not title_length or title:find("%z") or title_length < minimum_title_length or title_length > config.TitleMaxLength
+        or not body_length or body:find("%z")
+        or body_length < minimum_body_length or body_length > config.BodyMaxLength
+        or not categories[data.category]
+        or (status ~= "draft" and status ~= "published")
+    then
+        return nil, status == "draft" and "invalid_draft" or "invalid_publish"
+    end
+
+    local media_id
+    if data.imageMediaId ~= nil then
+        media_id = valid_integer(data.imageMediaId, 1, 9007199254740991)
+        if not media_id then
+            return nil, "invalid_attachment"
+        end
+        if media_id ~= retained_media_id then
+            local url = SkyPhoneMedia.ResolveOwnedMedia(source, tostring(media_id), "photo")
+            if not url then
+                return nil, "invalid_attachment"
+            end
+        end
+    end
+    return {
+        title = title,
+        body = body,
+        excerpt = make_excerpt(body),
+        category = data.category,
+        image_media_id = media_id,
+        status = status,
+    }
+end
+
+Bridge.Callbacks.Register("sky_phone:weazel-news:context", function(source)
+    local _, error_response = require_phone(source, "read", config.RateLimits.Read)
+    if error_response then
+        return error_response
+    end
+    local access = management_access(source)
+    local counts = Bridge.Database.Query([[
+        SELECT `category`, COUNT(*) AS `count`
+        FROM `sky_phone_weazel_articles`
+        WHERE `status` = 'published' AND `deleted_at` IS NULL
+        GROUP BY `category`
+    ]], {})
+    local counts_by_category = {}
+    for _, row in ipairs(counts) do
+        counts_by_category[row.category] = tonumber(row.count) or 0
+    end
+    local category_context = {}
+    for _, category in ipairs(config.Categories) do
+        category_context[#category_context + 1] = {
+            id = category,
+            count = counts_by_category[category] or 0,
+        }
+    end
+    return {
+        success = true,
+        data = {
+            canManage = access ~= nil,
+            jobLabel = access and access.job_label or nil,
+            jobGradeLabel = access and access.grade_label or nil,
+            categories = category_context,
+        },
+    }
+end)
+
+Bridge.Callbacks.Register("sky_phone:weazel-news:list", function(source, data)
+    local _, error_response = require_phone(source, "read", config.RateLimits.Read)
+    if error_response then
+        return error_response
+    end
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
+    local offset = valid_integer(data.offset or 0, 0, config.MaximumOffset)
+    local search = trim(data.search or "")
+    local search_length = text_length(search)
+    if not offset or not search_length or search_length > config.SearchMaxLength
+        or (data.category ~= nil and not categories[data.category])
+    then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local where = { "article.`status` = 'published'", "article.`deleted_at` IS NULL" }
+    local parameters = {}
+    if data.category then
+        where[#where + 1] = "article.`category` = ?"
+        parameters[#parameters + 1] = data.category
+    end
+    if search ~= "" then
+        where[#where + 1] = "(article.`title` LIKE CONCAT('%', ?, '%') OR article.`body` LIKE CONCAT('%', ?, '%'))"
+        parameters[#parameters + 1] = search
+        parameters[#parameters + 1] = search
+    end
+    local items, has_more = query_articles(
+        table.concat(where, " AND "),
+        parameters,
+        "article.`published_at` DESC, article.`id` DESC",
+        offset
+    )
+    return { success = true, data = { items = items, hasMore = has_more } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:weazel-news:get", function(source, data)
+    local _, error_response = require_phone(source, "read", config.RateLimits.Read)
+    if error_response then
+        return error_response
+    end
+    if type(data) ~= "table" or not valid_uuid(data.id) then
+        return { success = false, error = "invalid_request" }
+    end
+    local include_drafts = data.manage == true
+    if include_drafts then
+        local _, manager_error = require_manager(source)
+        if manager_error then
+            return manager_error
+        end
+    end
+    local article = load_article(data.id, include_drafts)
+    if not article then
+        return { success = false, error = "not_found" }
+    end
+    return { success = true, data = { article = article } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:weazel-news:manage-list", function(source, data)
+    local _, error_response = require_phone(source, "read", config.RateLimits.Read)
+    if error_response then
+        return error_response
+    end
+    local _, manager_error = require_manager(source)
+    if manager_error then
+        return manager_error
+    end
+    if type(data) ~= "table" then
+        return { success = false, error = "invalid_request" }
+    end
+    local status = data.status or "all"
+    local offset = valid_integer(data.offset or 0, 0, config.MaximumOffset)
+    local search = trim(data.search or "")
+    local search_length = text_length(search)
+    if (status ~= "all" and status ~= "published" and status ~= "draft") or not offset
+        or not search_length or search_length > config.SearchMaxLength
+    then
+        return { success = false, error = "invalid_request" }
+    end
+    local where = { "article.`deleted_at` IS NULL" }
+    local parameters = {}
+    if status ~= "all" then
+        where[#where + 1] = "article.`status` = ?"
+        parameters[#parameters + 1] = status
+    end
+    if search ~= "" then
+        where[#where + 1] = "(article.`title` LIKE CONCAT('%', ?, '%') OR article.`body` LIKE CONCAT('%', ?, '%'))"
+        parameters[#parameters + 1] = search
+        parameters[#parameters + 1] = search
+    end
+    local items, has_more = query_articles(
+        table.concat(where, " AND "),
+        parameters,
+        "article.`updated_at` DESC, article.`id` DESC",
+        offset
+    )
+    return { success = true, data = { items = items, hasMore = has_more } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:weazel-news:create", function(source, data)
+    local _, error_response = require_phone(source, "write", config.RateLimits.Write)
+    if error_response then
+        return error_response
+    end
+    local _, manager_error = require_manager(source)
+    if manager_error then
+        return manager_error
+    end
+    local article, validation_error = validate_article(source, data)
+    if not article then
+        return { success = false, error = validation_error }
+    end
+    local actor = actor_identity(source)
+    if not actor then
+        return { success = false, error = "request_failed" }
+    end
+    local ids = Bridge.Database.Query("SELECT UUID() AS `id`", {})
+    local id = ids[1] and ids[1].id
+    if not valid_uuid(id) then
+        error("[sky_phone] Database did not generate a Weazel News article id.")
+    end
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_weazel_articles`
+            (`id`, `title`, `body`, `excerpt`, `category`, `image_media_id`, `author_identifier`,
+                `author_name`, `updated_by_identifier`, `status`, `published_at`)
+        VALUES (?, ?, ?, ?, ?, NULLIF(?, 0), ?, ?, ?, ?, IF(? = 'published', CURRENT_TIMESTAMP, NULL))
+    ]], {
+        id,
+        article.title,
+        article.body,
+        article.excerpt,
+        article.category,
+        article.image_media_id or 0,
+        actor.identifier,
+        actor.name,
+        actor.identifier,
+        article.status,
+        article.status,
+    })
+    local created = load_article(id, true)
+    if not created then
+        error(("[sky_phone] Could not reload created Weazel News article '%s'."):format(id))
+    end
+    return { success = true, data = { article = created } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:weazel-news:update", function(source, data)
+    local _, error_response = require_phone(source, "write", config.RateLimits.Write)
+    if error_response then
+        return error_response
+    end
+    local _, manager_error = require_manager(source)
+    if manager_error then
+        return manager_error
+    end
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    if not revision or not valid_uuid(data.id) then
+        return { success = false, error = "invalid_request" }
+    end
+    local current_rows = Bridge.Database.Query([[
+        SELECT `image_media_id`, `revision`
+        FROM `sky_phone_weazel_articles`
+        WHERE `id` = ? AND `deleted_at` IS NULL
+        LIMIT 1
+    ]], { data.id })
+    local current = current_rows[1]
+    if not current then
+        return { success = false, error = "not_found" }
+    end
+    if tonumber(current.revision) ~= revision then
+        return { success = false, error = "revision_conflict" }
+    end
+    local retained_media_id = current.image_media_id and tonumber(current.image_media_id) or nil
+    local article, validation_error = validate_article(source, data, retained_media_id)
+    if not article then
+        return { success = false, error = validation_error }
+    end
+    local actor = actor_identity(source)
+    if not actor then
+        return { success = false, error = "request_failed" }
+    end
+    local result = Bridge.Database.Query([[
+        UPDATE `sky_phone_weazel_articles`
+        SET `title` = ?, `body` = ?, `excerpt` = ?, `category` = ?, `image_media_id` = NULLIF(?, 0),
+            `published_at` = CASE
+                WHEN ? = 'draft' THEN NULL
+                WHEN `status` = 'draft' THEN CURRENT_TIMESTAMP
+                ELSE `published_at`
+            END,
+            `status` = ?, `updated_by_identifier` = ?, `revision` = `revision` + 1
+        WHERE `id` = ? AND `revision` = ? AND `deleted_at` IS NULL
+    ]], {
+        article.title,
+        article.body,
+        article.excerpt,
+        article.category,
+        article.image_media_id or 0,
+        article.status,
+        article.status,
+        actor.identifier,
+        data.id,
+        revision,
+    })
+    if affected_rows(result) ~= 1 then
+        return { success = false, error = "revision_conflict" }
+    end
+    local updated = load_article(data.id, true)
+    if not updated then
+        error(("[sky_phone] Could not reload updated Weazel News article '%s'."):format(data.id))
+    end
+    return { success = true, data = { article = updated } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:weazel-news:delete", function(source, data)
+    local _, error_response = require_phone(source, "write", config.RateLimits.Write)
+    if error_response then
+        return error_response
+    end
+    local _, manager_error = require_manager(source)
+    if manager_error then
+        return manager_error
+    end
+    local revision = type(data) == "table" and valid_integer(data.revision, 1, 4294967295) or nil
+    if not revision or not valid_uuid(data.id) then
+        return { success = false, error = "invalid_request" }
+    end
+    local actor = actor_identity(source)
+    if not actor then
+        return { success = false, error = "request_failed" }
+    end
+    local result = Bridge.Database.Query([[
+        UPDATE `sky_phone_weazel_articles`
+        SET `deleted_at` = CURRENT_TIMESTAMP, `deleted_by_identifier` = ?, `revision` = `revision` + 1
+        WHERE `id` = ? AND `revision` = ? AND `deleted_at` IS NULL
+    ]], { actor.identifier, data.id, revision })
+    if affected_rows(result) ~= 1 then
+        local rows = Bridge.Database.Query([[
+            SELECT `revision`, `deleted_at`
+            FROM `sky_phone_weazel_articles`
+            WHERE `id` = ?
+            LIMIT 1
+        ]], { data.id })
+        if not rows[1] or rows[1].deleted_at then
+            return { success = false, error = "not_found" }
+        end
+        return { success = false, error = "revision_conflict" }
+    end
+    return { success = true }
+end)
+end)
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 9605fa6..a269887 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -1138,3 +1138,28 @@ CREATE TABLE IF NOT EXISTS `sky_phone_company_audit` (
     KEY `idx_sky_phone_company_audit` (`company_id`,`created_at`,`id`),
     FOREIGN KEY (`company_id`) REFERENCES `sky_phone_company_profiles` (`company_id`) ON DELETE CASCADE
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `sky_phone_weazel_articles` (
+    `id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `title` VARCHAR(160) NOT NULL,
+    `body` LONGTEXT NOT NULL,
+    `excerpt` VARCHAR(240) NOT NULL,
+    `category` ENUM('official','events','jobs','news','business') NOT NULL,
+    `image_media_id` BIGINT UNSIGNED NULL,
+    `author_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `author_name` VARCHAR(120) NOT NULL,
+    `updated_by_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `status` ENUM('draft','published') NOT NULL DEFAULT 'draft',
+    `revision` INT UNSIGNED NOT NULL DEFAULT 1,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    `published_at` DATETIME NULL,
+    `deleted_at` DATETIME NULL,
+    `deleted_by_identifier` VARCHAR(80) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    PRIMARY KEY (`id`),
+    KEY `idx_sky_phone_weazel_public` (`status`,`deleted_at`,`published_at`,`id`),
+    KEY `idx_sky_phone_weazel_category` (`category`,`status`,`deleted_at`,`published_at`,`id`),
+    KEY `idx_sky_phone_weazel_manage` (`deleted_at`,`status`,`updated_at`,`id`),
+    KEY `idx_sky_phone_weazel_media` (`image_media_id`),
+    FOREIGN KEY (`image_media_id`) REFERENCES `sky_phone_media` (`id`) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

From c7ca474e4f51ab178cd7ef4d0a5e47675bb5f7c6 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Thu, 13 Aug 2026 01:55:07 +0200
Subject: [PATCH 45/63] ADD - added Extern Image/Video Import

---
 README.md                                     |  15 +-
 frontend/src/stores/phone.ts                  |  32 +
 frontend/src/types/media.ts                   |  38 +
 frontend/src/utils/media.test.ts              |  12 +
 frontend/src/utils/media.ts                   |  26 +
 frontend/src/views/apps/GalleryApp.vue        | 252 +++++-
 frontend/testserver/index.cjs                 | 119 +++
 sky_phone/config/locales/en.lua               |  16 +
 sky_phone/config/media.lua                    |  44 +-
 sky_phone/fxmanifest.lua                      |   3 +
 sky_phone/source/client/main.lua              |  13 +
 sky_phone/source/server/db_migrate.lua        |  20 +
 sky_phone/source/server/media.lua             |  74 +-
 sky_phone/source/server/media_import.lua      | 725 ++++++++++++++++++
 .../source/server/media_import/fivemanage.lua | 237 ++++++
 .../source/server/media_import/manifest.lua   | 152 ++++
 sky_phone/sql/install.sql                     |   5 +
 17 files changed, 1754 insertions(+), 29 deletions(-)
 create mode 100644 sky_phone/source/server/media_import.lua
 create mode 100644 sky_phone/source/server/media_import/fivemanage.lua
 create mode 100644 sky_phone/source/server/media_import/manifest.lua

diff --git a/README.md b/README.md
index 923633b..1ee12c2 100644
--- a/README.md
+++ b/README.md
@@ -154,8 +154,13 @@ and restart the resource after updating the configuration.
 - `oxmysql` with MySQL/MariaDB.
 - `pma-voice` when `Config.Calls.VoiceProvider` is set to `"pma"`.
 - A FiveManage V3 Media API token for Camera photo/video uploads and Gallery deletion. Set the
-  server-only `Config.Media.FiveManage.ApiKey` in `sky_phone/config/media.lua`; the token is never
-  sent to NUI because clients receive temporary presigned upload URLs instead.
+  server-only value in `sky_phone/config/media.lua`:
+
+  ```lua
+  Config.Media.FiveManage.ApiKey = "replace-with-your-media-token"
+  ```
+
+  The token is never sent to NUI because clients receive temporary presigned upload URLs instead.
 - `yaca-voice`, `pma-voice`, or `saltychat` when the Radio app is enabled. `Config.Radio.VoiceProvider = "auto"` selects the first running provider in that order.
 
 ## Messages GIF provider
@@ -176,7 +181,11 @@ Database migrations run automatically. Existing `sky_phone_mail_accounts` instal
 Camera and Gallery media is stored in `sky_phone_media`. Signed-out captures belong to the current
 IMEI; linking an iFruit account moves those rows into the account gallery so every linked phone sees
 them. Signing out hides cloud media without deleting it. Factory reset removes device-local media
-and attempts to delete its remote FiveManage files, while account-owned media remains in the cloud.
+and attempts to delete only Phone-created remote FiveManage files. Media imported from a website is
+removed locally but never deleted at its source. Register import websites under
+`Config.Media.Import.Websites` in `sky_phone/config/media.lua`; built-in adapters support FiveManage
+files and version-1 JSON manifests. The Gallery import form accepts direct HTTPS image/video links
+only when their hostname matches the selected website's `AllowedMediaHosts`.
 
 For a fresh manual database installation, import `sky_phone/sql/install.sql`. It contains the complete current table, key, index, collation, and foreign-key schema. Runtime migrations remain authoritative for upgrading an existing installation and must stay enabled.
 
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 5751a8e..964747c 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -3106,13 +3106,45 @@ const defaultLocales: LocaleTree = {
       zoomOut: 'Zoom out',
       resetZoom: 'Reset zoom',
       filters: { all: 'All', photos: 'Photos', videos: 'Videos' },
+      import: {
+        action: 'Import',
+        title: 'Import',
+        chooseSource: 'Choose a website',
+        linkTitle: 'Import from Link',
+        linkBody:
+          'Paste a direct link to an image or video from this website.',
+        linkLabel: 'Image or video link',
+        linkPlaceholder: 'https://...',
+        linkCompleted: 'Media imported.',
+        loading: 'Loading media...',
+        emptyTitle: 'No Media',
+        emptyBody: 'This website has no media of this type.',
+        loadMore: 'Load More',
+        alreadyImported: 'Imported',
+        failed: 'Failed',
+        completed: 'Imported {imported} media.',
+        partial: 'Imported {imported} of {total} media.',
+      },
       errors: {
         cancelled: 'The media action was cancelled.',
         capture_failed: 'Unable to capture the game view.',
+        invalid_import_request: 'The import request is invalid.',
+        invalid_import_media: 'This media item cannot be imported.',
         invalid_media_type: 'The media type is invalid.',
         invalid_upload: 'The upload could not be verified.',
         invalid_upload_token: 'The upload session is no longer valid.',
         missing_config: 'Gallery uploads are not configured.',
+        import_media_not_allowed: 'This media item is not allowed.',
+        import_media_too_large: 'This media item is too large.',
+        import_media_unavailable: 'This media item is no longer available.',
+        import_provider_failed: 'The website could not load its media.',
+        import_provider_unauthorized: 'The website credentials are invalid.',
+        import_source_not_found: 'This website is not registered.',
+        import_source_unavailable: 'This website is temporarily unavailable.',
+        invalid_import_url: 'Enter a valid HTTPS media link.',
+        import_url_not_allowed: 'This link is not from the selected website.',
+        import_url_unavailable: 'The linked media could not be reached.',
+        import_size_unavailable: 'The website did not provide the media size.',
         not_found: 'The media item no longer exists.',
         operation_in_progress:
           'Another media operation is already in progress.',
diff --git a/frontend/src/types/media.ts b/frontend/src/types/media.ts
index 03587b0..e39ae62 100644
--- a/frontend/src/types/media.ts
+++ b/frontend/src/types/media.ts
@@ -8,6 +8,44 @@ export type PhoneMedia = {
   url: string
 }
 
+export type MediaImportSource = {
+  id: string
+  label: string
+  mediaTypes: MediaType[]
+}
+
+export type MediaImportSources = {
+  maxSelection: number
+  sources: MediaImportSource[]
+}
+
+export type ExternalMedia = {
+  externalId: string
+  filename: string
+  imported: boolean
+  mediaType: MediaType
+  size: number
+  sourceId: string
+  url: string
+}
+
+export type MediaImportPage = {
+  hasMore: boolean
+  items: ExternalMedia[]
+  page: number
+  total: number
+}
+
+export type MediaImportFailure = {
+  error: string
+  externalId: string
+}
+
+export type MediaImportResult = {
+  failed: MediaImportFailure[]
+  imported: PhoneMedia[]
+}
+
 export type UploadReady = {
   captureToken: string
   correlationId: string
diff --git a/frontend/src/utils/media.test.ts b/frontend/src/utils/media.test.ts
index d444aec..c2fd8de 100644
--- a/frontend/src/utils/media.test.ts
+++ b/frontend/src/utils/media.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import {
   filterMedia,
+  formatMediaSize,
   formatRecordingDuration,
   hasNextMediaPage,
   mediaErrorKey,
@@ -44,8 +45,19 @@ describe('media utilities', () => {
     expect(formatRecordingDuration(3_725_000)).toBe('62:05')
   })
 
+  it('formats imported media sizes with the active locale', () => {
+    expect(formatMediaSize(512, 'en')).toBe('512 B')
+    expect(formatMediaSize(1_572_864, 'en')).toBe('1.5 MB')
+  })
+
   it('maps unknown server failures to the localized default', () => {
     expect(mediaErrorKey('upload_timeout')).toBe('upload_timeout')
+    expect(mediaErrorKey('import_media_too_large')).toBe(
+      'import_media_too_large',
+    )
+    expect(mediaErrorKey('import_url_not_allowed')).toBe(
+      'import_url_not_allowed',
+    )
     expect(mediaErrorKey('private_provider_error')).toBe('request_failed')
   })
 })
diff --git a/frontend/src/utils/media.ts b/frontend/src/utils/media.ts
index 1bc21e3..d38bca8 100644
--- a/frontend/src/utils/media.ts
+++ b/frontend/src/utils/media.ts
@@ -37,14 +37,40 @@ export function formatRecordingDuration(elapsedMs: number): string {
   return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
 }
 
+export function formatMediaSize(bytes: number, locale: string): string {
+  const safeBytes = Math.max(0, bytes)
+  if (safeBytes < 1024) return `${safeBytes} B`
+  const units = ['KB', 'MB', 'GB']
+  let value = safeBytes / 1024
+  let unit = units[0]
+  for (let index = 1; index < units.length && value >= 1024; index += 1) {
+    value /= 1024
+    unit = units[index]
+  }
+  return `${new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)} ${unit}`
+}
+
 export function mediaErrorKey(error?: string): string {
   const known = new Set([
     'cancelled',
     'capture_failed',
     'invalid_media_type',
+    'invalid_import_request',
+    'invalid_import_media',
+    'invalid_import_url',
     'invalid_upload',
     'invalid_upload_token',
     'missing_config',
+    'import_media_not_allowed',
+    'import_media_too_large',
+    'import_media_unavailable',
+    'import_provider_failed',
+    'import_provider_unauthorized',
+    'import_source_not_found',
+    'import_source_unavailable',
+    'import_url_not_allowed',
+    'import_url_unavailable',
+    'import_size_unavailable',
     'not_found',
     'operation_in_progress',
     'owner_changed',
diff --git a/frontend/src/views/apps/GalleryApp.vue b/frontend/src/views/apps/GalleryApp.vue
index c23a1e3..be78d2d 100644
--- a/frontend/src/views/apps/GalleryApp.vue
+++ b/frontend/src/views/apps/GalleryApp.vue
@@ -4,6 +4,9 @@ import {
   kButton,
   kDialog,
   kLink,
+  kList,
+  kListInput,
+  kListItem,
   kNavbar,
   kNavbarBackLink,
   kPage,
@@ -12,13 +15,28 @@ import {
   kSegmentedButton,
   kToast,
 } from 'konsta/vue'
-import { Play, RotateCcw, Trash2, ZoomIn, ZoomOut } from 'lucide-vue-next'
+import {
+  ChevronRight,
+  Globe2,
+  Link2,
+  Play,
+  RotateCcw,
+  Trash2,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-vue-next'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
-import type { DeleteResult, GalleryFilter, PhoneMedia } from '@/types/media'
+import type {
+  DeleteResult,
+  GalleryFilter,
+  MediaImportSource,
+  MediaImportSources,
+  PhoneMedia,
+} from '@/types/media'
 import {
   hasNextMediaPage,
   MEDIA_PAGE_SIZE,
@@ -58,6 +76,12 @@ const fetching = ref(false)
 const hasMore = ref(true)
 const loadError = ref('')
 const selected = ref<PhoneMedia | null>(null)
+const importMode = ref<'form' | 'gallery' | 'sources'>('gallery')
+const importSources = ref<MediaImportSource[]>([])
+const importSource = ref<MediaImportSource | null>(null)
+const importUrl = ref('')
+const importError = ref('')
+const importing = ref(false)
 const deleteDialogOpened = ref(false)
 const cancelButtonColors = {
   fillBgIos: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
@@ -143,6 +167,71 @@ function showToast(text: string): void {
   }, 3000)
 }
 
+async function loadImportSources(): Promise<void> {
+  const response = await nuiCall<MediaImportSources>('media:import:sources')
+  if (!response.success || !response.data) return
+  importSources.value = response.data.sources
+}
+
+function selectImportSource(source: MediaImportSource): void {
+  importSource.value = source
+  importMode.value = 'form'
+  importUrl.value = ''
+  importError.value = ''
+}
+
+function openImport(): void {
+  if (importSources.value.length === 1) {
+    selectImportSource(importSources.value[0])
+    return
+  }
+  importMode.value = 'sources'
+}
+
+function closeImport(): void {
+  importMode.value = 'gallery'
+  importSource.value = null
+  importUrl.value = ''
+  importError.value = ''
+}
+
+function backFromImportForm(): void {
+  if (importSources.value.length > 1) {
+    importMode.value = 'sources'
+    importSource.value = null
+    importUrl.value = ''
+    importError.value = ''
+    return
+  }
+  closeImport()
+}
+
+function updateImportUrl(event: Event): void {
+  importUrl.value = (event.target as HTMLInputElement).value
+  importError.value = ''
+}
+
+async function commitUrlImport(): Promise<void> {
+  const url = importUrl.value.trim()
+  if (!importSource.value || !url || importing.value) return
+  importing.value = true
+  importError.value = ''
+  const response = await nuiCall<PhoneMedia>('media:import:url', {
+    sourceId: importSource.value.id,
+    url,
+  })
+  importing.value = false
+  if (!response.success || !response.data) {
+    importError.value = phone.t(
+      `Apps.photos.errors.${mediaErrorKey(response.error)}`,
+    )
+    return
+  }
+  media.value = mergeMedia(media.value, [response.data])
+  closeImport()
+  showToast(phone.t('Apps.photos.import.linkCompleted'))
+}
+
 function formatDate(timestamp: number): string {
   return new Intl.DateTimeFormat(phone.lang, {
     dateStyle: 'medium',
@@ -358,6 +447,7 @@ watch(hasMore, () => void nextTick().then(observeMore))
 onMounted(() => {
   window.addEventListener('message', onMessage)
   void loadGallery()
+  void loadImportSources()
 })
 
 onBeforeUnmount(() => {
@@ -371,12 +461,105 @@ onBeforeUnmount(() => {
 
 <template>
   <k-page
-    v-if="!selected"
+    v-if="importMode === 'sources'"
+    class="gallery-import-page !pt-[44px]"
+    :aria-label="phone.t('Apps.photos.import.chooseSource')"
+  >
+    <k-navbar :title="phone.t('Apps.photos.import.title')">
+      <template #left>
+        <k-navbar-back-link
+          component="button"
+          :text="phone.t('Common.back')"
+          @click="closeImport"
+        />
+      </template>
+    </k-navbar>
+    <k-block class="gallery-import-intro">
+      {{ phone.t('Apps.photos.import.chooseSource') }}
+    </k-block>
+    <k-list inset strong>
+      <k-list-item
+        v-for="source in importSources"
+        :key="source.id"
+        link
+        :chevron="false"
+        :title="source.label"
+        :subtitle="
+          source.mediaTypes
+            .map((type) =>
+              phone.t(
+                type === 'photo'
+                  ? 'Apps.photos.filters.photos'
+                  : 'Apps.photos.filters.videos',
+              ),
+            )
+            .join(' · ')
+        "
+        @click="selectImportSource(source)"
+      >
+        <template #media><Globe2 :size="22" /></template>
+        <template #after><ChevronRight :size="18" /></template>
+      </k-list-item>
+    </k-list>
+  </k-page>
+
+  <k-page
+    v-else-if="importMode === 'form' && importSource"
+    class="gallery-import-page !pt-[44px]"
+    :aria-label="phone.t('Apps.photos.import.title')"
+  >
+    <k-navbar :title="importSource.label">
+      <template #left>
+        <k-navbar-back-link
+          component="button"
+          :text="phone.t('Common.back')"
+          @click="backFromImportForm"
+        />
+      </template>
+    </k-navbar>
+
+    <div class="gallery-import-form">
+      <div class="gallery-import-form-icon"><Link2 :size="34" /></div>
+      <h2>{{ phone.t('Apps.photos.import.linkTitle') }}</h2>
+      <p>{{ phone.t('Apps.photos.import.linkBody') }}</p>
+      <k-list inset strong class="gallery-import-url-list">
+        <k-list-input
+          outline
+          input-id="gallery-import-url"
+          inputmode="url"
+          maxlength="2048"
+          :error="importError || undefined"
+          :label="phone.t('Apps.photos.import.linkLabel')"
+          :placeholder="phone.t('Apps.photos.import.linkPlaceholder')"
+          type="url"
+          :value="importUrl"
+          @input="updateImportUrl"
+          @keyup.enter="commitUrlImport"
+        />
+      </k-list>
+      <k-button
+        class="gallery-import-submit"
+        large
+        rounded
+        :disabled="!importUrl.trim() || importing"
+        @click="commitUrlImport"
+      >
+        <k-preloader v-if="importing" class="mr-2" />
+        {{ phone.t('Apps.photos.import.action') }}
+      </k-button>
+    </div>
+  </k-page>
+
+  <k-page
+    v-else-if="!selected"
     class="gallery-page !pt-[44px]"
     :aria-label="phone.t('Apps.photos.name')"
   >
-    <k-navbar :title="phone.t('Apps.photos.name')">
-      <template v-if="requestedMessageMedia" #left>
+    <k-navbar
+      v-if="requestedMessageMedia"
+      :title="phone.t('Apps.photos.name')"
+    >
+      <template #left>
         <k-navbar-back-link
           component="button"
           :text="phone.t('Common.back')"
@@ -393,6 +576,17 @@ onBeforeUnmount(() => {
         </k-link>
       </template>
     </k-navbar>
+    <k-navbar
+      v-else
+      :title="phone.t('Apps.photos.name')"
+      right-class="!ms-auto"
+    >
+      <template v-if="importSources.length" #right>
+        <k-link component="button" @click="openImport">
+          {{ phone.t('Apps.photos.import.action') }}
+        </k-link>
+      </template>
+    </k-navbar>
 
     <div class="gallery-content">
       <div v-if="loading" class="gallery-state">
@@ -621,6 +815,54 @@ onBeforeUnmount(() => {
   flex-direction: column;
   overflow: hidden;
 }
+.gallery-import-page {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.gallery-import-intro {
+  margin-bottom: 0;
+  color: #8e8e93;
+}
+.gallery-import-form {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 16px 24px;
+  text-align: center;
+}
+.gallery-import-form-icon {
+  width: 72px;
+  height: 72px;
+  display: grid;
+  place-items: center;
+  border-radius: 22px;
+  background: #0a84ff;
+  color: #fff;
+  box-shadow: 0 10px 28px #0a84ff4d;
+}
+.gallery-import-form h2 {
+  margin: 20px 0 7px;
+  font-size: 21px;
+  font-weight: 700;
+}
+.gallery-import-form p {
+  max-width: 280px;
+  margin: 0;
+  color: #8e8e93;
+  font-size: 13px;
+  line-height: 1.45;
+}
+.gallery-import-url-list {
+  width: 100%;
+  margin-top: 26px;
+}
+.gallery-import-submit {
+  width: calc(100% - 32px);
+  margin-top: 14px;
+}
 .gallery-content {
   min-height: 0;
   flex: 1;
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index f99c22a..debea44 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -2184,6 +2184,52 @@ let mockMedia = [
     url: 'https://picsum.photos/seed/sky-phone-5/800/600',
   },
 ]
+const mockImportSources = [
+  {
+    id: 'media_archive',
+    label: 'Media Archive',
+    mediaTypes: ['photo', 'video'],
+  },
+  { id: 'event_cdn', label: 'Event CDN', mediaTypes: ['photo'] },
+]
+const mockImportMedia = [
+  {
+    externalId: 'archive-photo-1',
+    filename: 'Vespucci Sunset.jpg',
+    imported: false,
+    mediaType: 'photo',
+    size: 2_481_152,
+    sourceId: 'media_archive',
+    url: 'https://picsum.photos/seed/sky-import-1/900/1200',
+  },
+  {
+    externalId: 'archive-photo-2',
+    filename: 'Downtown Meet.jpg',
+    imported: false,
+    mediaType: 'photo',
+    size: 3_114_205,
+    sourceId: 'media_archive',
+    url: 'https://picsum.photos/seed/sky-import-2/1200/900',
+  },
+  {
+    externalId: 'archive-video-1',
+    filename: 'Flower Clip.mp4',
+    imported: false,
+    mediaType: 'video',
+    size: 8_241_152,
+    sourceId: 'media_archive',
+    url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+  },
+  {
+    externalId: 'event-photo-1',
+    filename: 'Opening Night.jpg',
+    imported: false,
+    mediaType: 'photo',
+    size: 1_824_331,
+    sourceId: 'event_cdn',
+    url: 'https://picsum.photos/seed/sky-event-1/900/1200',
+  },
+]
 const marketplaceInquiries = [
   {
     id: '4903b923-409a-437e-971f-b7a2b10e9e31',
@@ -6698,6 +6744,79 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: media })
     return
   }
+  if (endpoint === 'media:import:sources') {
+    response.json({
+      success: true,
+      data: { maxSelection: 10, sources: mockImportSources },
+    })
+    return
+  }
+  if (endpoint === 'media:import:list') {
+    const page = Math.max(1, Number(request.body.page) || 1)
+    const limit = 30
+    const filtered = mockImportMedia.filter(
+      (item) =>
+        item.sourceId === request.body.sourceId &&
+        item.mediaType === request.body.mediaType,
+    )
+    const offset = (page - 1) * limit
+    response.json({
+      success: true,
+      data: {
+        hasMore: offset + limit < filtered.length,
+        items: filtered.slice(offset, offset + limit),
+        page,
+        total: filtered.length,
+      },
+    })
+    return
+  }
+  if (endpoint === 'media:import:commit') {
+    const externalIds = Array.isArray(request.body.externalIds)
+      ? request.body.externalIds
+      : []
+    const imported = []
+    const failed = []
+    for (const externalId of externalIds) {
+      const item = mockImportMedia.find(
+        (candidate) =>
+          candidate.externalId === externalId &&
+          candidate.sourceId === request.body.sourceId,
+      )
+      if (!item) {
+        failed.push({ error: 'import_media_unavailable', externalId })
+        continue
+      }
+      item.imported = true
+      const media = {
+        createdAt: Date.now(),
+        id: Math.max(0, ...mockMedia.map((entry) => Number(entry.id) || 0)) + 1,
+        mediaType: item.mediaType,
+        url: item.url,
+      }
+      mockMedia.unshift(media)
+      imported.push(media)
+    }
+    response.json({ success: true, data: { failed, imported } })
+    return
+  }
+  if (endpoint === 'media:import:url') {
+    const url = String(request.body.url || '').trim()
+    if (!url.startsWith('https://')) {
+      response.json({ success: false, error: 'invalid_import_url' })
+      return
+    }
+    const mediaType = /\.(mp4|webm)(?:[?#]|$)/i.test(url) ? 'video' : 'photo'
+    const media = {
+      createdAt: Date.now(),
+      id: Math.max(0, ...mockMedia.map((entry) => Number(entry.id) || 0)) + 1,
+      mediaType,
+      url,
+    }
+    mockMedia.unshift(media)
+    response.json({ success: true, data: media })
+    return
+  }
   if (endpoint === 'gallery:list') {
     if (request.body.mockState === 'error') {
       response.json({ success: false, error: 'service_unavailable' })
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index f73ecb9..dc64672 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1336,10 +1336,26 @@ Locales["en"] = {
                 deleteBody = "This photo or video will be permanently deleted.", deleted = "Media deleted.",
                 zoomIn = "Zoom in", zoomOut = "Zoom out", resetZoom = "Reset zoom",
                 filters = { all = "All", photos = "Photos", videos = "Videos" },
+                import = {
+                    action = "Import", title = "Import", chooseSource = "Choose a website",
+                    linkTitle = "Import from Link", linkBody = "Paste a direct link to an image or video from this website.",
+                    linkLabel = "Image or video link", linkPlaceholder = "https://...", linkCompleted = "Media imported.",
+                    loading = "Loading media...", emptyTitle = "No Media",
+                    emptyBody = "This website has no media of this type.", loadMore = "Load More",
+                    alreadyImported = "Imported", failed = "Failed", completed = "Imported {imported} media.",
+                    partial = "Imported {imported} of {total} media.",
+                },
                 errors = {
                     cancelled = "The media action was cancelled.", capture_failed = "Unable to capture the game view.",
+                    invalid_import_request = "The import request is invalid.", invalid_import_media = "This media item cannot be imported.",
                     invalid_media_type = "The media type is invalid.", invalid_upload = "The upload could not be verified.",
                     invalid_upload_token = "The upload session is no longer valid.", missing_config = "Gallery uploads are not configured.",
+                    import_media_not_allowed = "This media item is not allowed.", import_media_too_large = "This media item is too large.",
+                    import_media_unavailable = "This media item is no longer available.", import_provider_failed = "The website could not load its media.",
+                    import_provider_unauthorized = "The website credentials are invalid.", import_source_not_found = "This website is not registered.",
+                    import_source_unavailable = "This website is temporarily unavailable.",
+                    invalid_import_url = "Enter a valid HTTPS media link.", import_url_not_allowed = "This link is not from the selected website.",
+                    import_url_unavailable = "The linked media could not be reached.", import_size_unavailable = "The website did not provide the media size.",
                     not_found = "The media item no longer exists.", owner_changed = "The active phone account changed.",
                     operation_in_progress = "Another media operation is already in progress.",
                     rate_limited = "Too many media actions. Try again shortly.", request_failed = "The Gallery request failed.",
diff --git a/sky_phone/config/media.lua b/sky_phone/config/media.lua
index 98ced28..41058e8 100644
--- a/sky_phone/config/media.lua
+++ b/sky_phone/config/media.lua
@@ -5,11 +5,53 @@ Config.Media = {
     UrlMaxLength = 2048,
     AllowedGifHosts = { "giphy.com" },
     FiveManage = {
-        ApiKey = "e4UZ9y39JfkxHoZMAgRUVK6KMQsNCKPJ", -- Dashboard -> Tokens -> create a token with Media access.
+        ApiKey = "", -- Dashboard -> Tokens -> create a token with Media access.
         BaseUrl = "https://api.fivemanage.com/api/v3/file",
         RequestTimeoutMs = 10000,
         UploadTimeoutMs = 25000,
     },
+    Import = {
+        Enabled = true,
+        PageSize = 30,
+        MaxSelection = 10,
+        MaxPhotoBytes = 15 * 1024 * 1024,
+        MaxVideoBytes = 150 * 1024 * 1024,
+        RevalidateAfterSeconds = 3600,
+        ListActionsPerMinute = 60,
+        ImportActionsPerMinute = 20,
+        CandidateTtlSeconds = 300,
+        ManifestCacheSeconds = 30,
+        ManifestMaxBytes = 2 * 1024 * 1024,
+        ManifestMaxItems = 5000,
+        Websites = {
+            {
+                Id = "fivemanage",
+                Label = "FiveManage",
+                Enabled = true,
+                Adapter = "fivemanage",
+                Path = "sky_phone/imports",
+                MediaTypes = { "photo", "video" },
+                -- Direct links entered in Gallery must use one of these hosts or a subdomain.
+                AllowedMediaHosts = { "fivemanage.com" },
+            },
+            --[[
+            {
+                Id = "city_media",
+                Label = "City Media",
+                Enabled = true,
+                Adapter = "manifest",
+                ManifestUrl = "https://media.example.com/sky-phone/media.json",
+                MediaTypes = { "photo", "video" },
+                AllowedMediaHosts = { "media.example.com", "cdn.example.com" },
+                Auth = {
+                    Type = "bearer",
+                    TokenConvar = "sky_phone_city_media_token",
+                },
+                RequiredAce = "sky_phone.import.city_media",
+            },
+            ]]
+        },
+    },
     Photo = {
         Encoding = "jpg",
         Quality = 0.95,
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index cfc540c..06bf654 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -67,6 +67,9 @@ server_scripts {
     'source/server/custom_app_storage.lua',
     'source/server/sim.lua',
     'source/server/calls.lua',
+    'source/server/media_import.lua',
+    'source/server/media_import/fivemanage.lua',
+    'source/server/media_import/manifest.lua',
     'source/server/media.lua',
     'source/server/messages.lua',
     'source/server/darkchat.lua',
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 19867cc..dfdb35a 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -238,6 +238,10 @@ local server_callbacks = {
     "flare:send",
     "gallery:list",
     "media:config",
+    "media:import:sources",
+    "media:import:list",
+    "media:import:commit",
+    "media:import:url",
 }
 
 local function get_locale()
@@ -485,6 +489,15 @@ end)
 for _, callback_name in ipairs(server_callbacks) do
     RegisterNUICallback(callback_name, function(data, cb)
         local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data)
+        if callback_name:match("^media:import:") and (not result or not result.success) then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] NUI callback '%s' failed: %s.",
+                callback_name,
+                tostring(result and result.error or "no server response"),
+                { always = true }
+            )
+        end
         if result then
             cb(result)
             return
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 4729521..8582276 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -377,6 +377,14 @@ local schema = {
             { name = "url", type = "TEXT NOT NULL" },
             { name = "remote_id", type = "VARCHAR(128) NOT NULL" },
             { name = "media_type", type = "ENUM('photo', 'video') NOT NULL" },
+            { name = "origin", type = "ENUM('phone_upload', 'website_import') NOT NULL DEFAULT 'phone_upload'" },
+            {
+                name = "source_id",
+                type = "VARCHAR(64) NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            { name = "verified_at", type = "DATETIME NULL" },
             { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
         },
         primaryKey = "id",
@@ -2436,4 +2444,16 @@ Bridge.Database.EnsureIndex("sky_phone_devices", "uniq_sky_phone_devices_sim", "
 Bridge.Database.Query("UPDATE `sky_phone_contacts` SET `contact_id` = `id` WHERE `contact_id` IS NULL", {})
 Bridge.Database.EnsureIndex("sky_phone_contacts", "uniq_sky_phone_contacts_account_contact", "(`account_id`, `contact_id`)", { unique = true })
 Bridge.Database.EnsureIndex("sky_phone_contacts", "uniq_sky_phone_contacts_device_contact", "(`device_imei`, `contact_id`)", { unique = true })
+Bridge.Database.EnsureIndex(
+    "sky_phone_media",
+    "uniq_sky_phone_media_account_source",
+    "(`account_id`, `source_id`, `remote_id`, `origin`)",
+    { unique = true }
+)
+Bridge.Database.EnsureIndex(
+    "sky_phone_media",
+    "uniq_sky_phone_media_device_source",
+    "(`device_imei`, `source_id`, `remote_id`, `origin`)",
+    { unique = true }
+)
 Bridge.Database.CompleteMigration("sky_phone")
diff --git a/sky_phone/source/server/media.lua b/sky_phone/source/server/media.lua
index 7f9341a..1189817 100644
--- a/sky_phone/source/server/media.lua
+++ b/sky_phone/source/server/media.lua
@@ -1,15 +1,12 @@
 Bridge.Database.AfterMigration("sky_phone", function()
 SkyPhoneMedia = {}
+SkyPhoneMediaImport.Initialize()
 
 local pending_uploads = {}
 local pending_deletes = {}
 
-local function media_config()
-    return Config.Media.FiveManage
-end
-
 local function api_configured()
-    local api_key = media_config().ApiKey
+    local api_key = Config.Media.FiveManage.ApiKey
     return type(api_key) == "string" and api_key ~= "" and api_key ~= "YOUR_API_TOKEN"
 end
 
@@ -58,7 +55,7 @@ local function request_presigned_url()
     if not api_configured() then
         return nil, "missing_config"
     end
-    local config = media_config()
+    local config = Config.Media.FiveManage
     local response = http_request(
         tostring(config.BaseUrl):gsub("/+$", "") .. "/presigned-url",
         "GET",
@@ -81,9 +78,12 @@ local function get_remote_file(remote_id)
     if not api_configured() then
         return nil, "missing_config"
     end
-    local config = media_config()
+    local config = Config.Media.FiveManage
     local response = http_request(
-        ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
+        ("%s/%s"):format(
+            tostring(config.BaseUrl):gsub("/+$", ""),
+            SkyPhoneMediaImport.UrlEncode(remote_id)
+        ),
         "GET",
         "",
         { ["Authorization"] = config.ApiKey },
@@ -96,9 +96,12 @@ local function delete_remote_file(remote_id)
     if not api_configured() then
         return false, "missing_config"
     end
-    local config = media_config()
+    local config = Config.Media.FiveManage
     local response = http_request(
-        ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
+        ("%s/%s"):format(
+            tostring(config.BaseUrl):gsub("/+$", ""),
+            SkyPhoneMediaImport.UrlEncode(remote_id)
+        ),
         "DELETE",
         "",
         { ["Authorization"] = config.ApiKey },
@@ -153,7 +156,9 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         params[#params + 1] = value
     end
     local rows = Bridge.Database.Query(([[
-        SELECT `url`, `media_type` FROM `sky_phone_media`
+        SELECT `url`, `media_type`, `origin`, `source_id`, `remote_id`,
+            UNIX_TIMESTAMP(`verified_at`) AS `verified_at`
+        FROM `sky_phone_media`
         WHERE `id` = ? AND %s
         LIMIT 1
     ]]):format(condition), params)
@@ -172,6 +177,33 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         )
         return nil, "invalid_attachment"
     end
+    if media.origin == "website_import" then
+        local verified_at = tonumber(media.verified_at) or 0
+        local revalidate_after = math.max(
+            1,
+            math.floor(tonumber(Config.Media.Import.RevalidateAfterSeconds) or 3600)
+        )
+        if os.time() - verified_at >= revalidate_after then
+            local refreshed, refresh_error
+            if type(media.remote_id) == "string" and media.remote_id:sub(1, 4) == "url:" then
+                refreshed, refresh_error = SkyPhoneMediaImport.ResolveUrl(media.source_id, media.url)
+            else
+                refreshed, refresh_error = SkyPhoneMediaImport.Resolve(media.source_id, media.remote_id)
+            end
+            if not refreshed then
+                return nil, refresh_error
+            end
+            if refreshed.mediaType ~= media_type then
+                return nil, "import_media_not_allowed"
+            end
+            Bridge.Database.Query([[
+                UPDATE `sky_phone_media`
+                SET `url` = ?, `verified_at` = CURRENT_TIMESTAMP
+                WHERE `id` = ? AND `origin` = 'website_import'
+            ]], { refreshed.url, id })
+            media.url = refreshed.url
+        end
+    end
     return media.url
 end
 
@@ -467,7 +499,7 @@ RegisterNetEvent("sky_phone:media:request-upload", function(data)
         photo = Config.Media.Photo,
         presignedUrl = presigned_url,
         requestId = request_id,
-        uploadTimeoutMs = media_config().UploadTimeoutMs,
+        uploadTimeoutMs = Config.Media.FiveManage.UploadTimeoutMs,
         video = Config.Media.Video,
     })
 end)
@@ -572,7 +604,7 @@ RegisterNetEvent("sky_phone:media:delete", function(data)
         query_params[#query_params + 1] = value
     end
     local rows = Bridge.Database.Query(([[
-        SELECT `id`, `remote_id` FROM `sky_phone_media`
+        SELECT `id`, `remote_id`, `origin` FROM `sky_phone_media`
         WHERE `id` = ? AND %s LIMIT 1
     ]]):format(condition), query_params)
     local row = rows[1]
@@ -585,11 +617,13 @@ RegisterNetEvent("sky_phone:media:delete", function(data)
         return
     end
     pending_deletes[media_id] = src
-    local deleted, delete_error = delete_remote_file(row.remote_id)
-    if not deleted then
-        pending_deletes[media_id] = nil
-        delete_result(src, correlation_id, false, delete_error, media_id)
-        return
+    if row.origin == "phone_upload" then
+        local deleted, delete_error = delete_remote_file(row.remote_id)
+        if not deleted then
+            pending_deletes[media_id] = nil
+            delete_result(src, correlation_id, false, delete_error, media_id)
+            return
+        end
     end
     Bridge.Database.Query(("DELETE FROM `sky_phone_media` WHERE `id` = ? AND %s"):format(condition), query_params)
     pending_deletes[media_id] = nil
@@ -599,7 +633,7 @@ end)
 function SkyPhoneMedia.GetDeviceRemoteIds(imei)
     local rows = Bridge.Database.Query([[
         SELECT `id`, `remote_id` FROM `sky_phone_media`
-        WHERE `account_id` IS NULL AND `device_imei` = ?
+        WHERE `account_id` IS NULL AND `device_imei` = ? AND `origin` = 'phone_upload'
     ]], { imei })
     return rows
 end
@@ -630,6 +664,6 @@ AddEventHandler("playerDropped", function()
 end)
 
 if not api_configured() then
-    print("^3[sky_phone] Camera and Gallery uploads are disabled until Config.Media.FiveManage.ApiKey is set in config/media.lua.^7")
+    print("^3[sky_phone] Camera uploads and FiveManage imports are disabled until Config.Media.FiveManage.ApiKey is set in config/media.lua.^7")
 end
 end)
diff --git a/sky_phone/source/server/media_import.lua b/sky_phone/source/server/media_import.lua
new file mode 100644
index 0000000..4e96a59
--- /dev/null
+++ b/sky_phone/source/server/media_import.lua
@@ -0,0 +1,725 @@
+SkyPhoneMediaImport = {}
+
+local adapters = {}
+local websites = {}
+local import_candidates = {}
+local initialized = false
+local media_types_by_mime = {
+    ["image/gif"] = "photo",
+    ["image/jpeg"] = "photo",
+    ["image/png"] = "photo",
+    ["image/webp"] = "photo",
+    ["video/mp4"] = "video",
+    ["video/quicktime"] = "video",
+    ["video/webm"] = "video",
+}
+
+local function session_owner(source)
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, error_response
+    end
+
+    local device = SkyPhone.LoadDevice(session.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 = session.imei,
+    }
+end
+
+local function owner_condition(owner)
+    if owner.account_id then
+        return "`account_id` = ?", { owner.account_id }
+    end
+
+    return "`account_id` IS NULL AND `device_imei` = ?", { owner.imei }
+end
+
+local function valid_source_id(value)
+    return type(value) == "string"
+        and #value >= 1
+        and #value <= 64
+        and value:match("^[a-z0-9_%-]+$") ~= nil
+end
+
+local function valid_external_id(value)
+    return type(value) == "string"
+        and #value >= 1
+        and #value <= 128
+        and value:match("^[%w_.:%-]+$") ~= nil
+end
+
+local function website_accessible(source, website)
+    return not website.RequiredAce or website.RequiredAce == "" or IsPlayerAceAllowed(source, website.RequiredAce)
+end
+
+local function media_type_set(values)
+    local allowed = {}
+    if type(values) ~= "table" then
+        return allowed
+    end
+
+    for _, value in ipairs(values) do
+        if value == "photo" or value == "video" then
+            allowed[value] = true
+        end
+    end
+    return allowed
+end
+
+local function url_host(value)
+    if type(value) ~= "string" or #value > Config.Media.UrlMaxLength or value:find("%c") then
+        return nil
+    end
+
+    local authority = value:match("^https://([^/%?#]+)")
+    if not authority or authority:find("@", 1, true) then
+        return nil
+    end
+
+    local host = authority:match("^([^:]+)")
+    return host and host:lower() or nil
+end
+
+function SkyPhoneMediaImport.ResponseHeader(headers, name)
+    if type(headers) ~= "table" then
+        return nil
+    end
+    local requested_name = name:lower()
+    for header_name, value in pairs(headers) do
+        if type(header_name) == "string" and header_name:lower() == requested_name then
+            if type(value) == "table" then
+                return value[1]
+            end
+            return value
+        end
+    end
+    return nil
+end
+
+local function allowed_host(website, host)
+    for _, configured_host in ipairs(website.AllowedMediaHosts) do
+        local candidate = type(configured_host) == "string" and configured_host:lower():gsub("^%.", "") or ""
+        if candidate ~= "" and (host == candidate or host:sub(-#candidate - 1) == "." .. candidate) then
+            return true
+        end
+    end
+    return false
+end
+
+local function normalize_media(website, item)
+    if type(item) ~= "table" or not valid_external_id(item.externalId) then
+        return nil, "invalid_import_media"
+    end
+
+    local media_type = item.mediaType
+    if not website._media_types[media_type] then
+        return nil, "import_media_not_allowed"
+    end
+
+    local size = tonumber(item.size)
+    if not size or size <= 0 or size ~= math.floor(size) then
+        return nil, "invalid_import_media"
+    end
+
+    local size_limit = media_type == "photo"
+        and tonumber(Config.Media.Import.MaxPhotoBytes)
+        or tonumber(Config.Media.Import.MaxVideoBytes)
+    if not size_limit or size > size_limit then
+        return nil, "import_media_too_large"
+    end
+
+    local host = url_host(item.url)
+    if not host or not allowed_host(website, host) then
+        return nil, "import_media_not_allowed"
+    end
+
+    local filename = type(item.filename) == "string" and item.filename:match("^%s*(.-)%s*$") or ""
+    if filename == "" then
+        filename = item.externalId
+    elseif #filename > 160 then
+        filename = filename:sub(1, 160)
+    end
+
+    return {
+        externalId = item.externalId,
+        filename = filename,
+        mediaType = media_type,
+        size = size,
+        sourceId = website.Id,
+        url = item.url,
+    }
+end
+
+local function remember_candidate(source, media)
+    local expires_at = os.time() + math.max(
+        30,
+        math.floor(tonumber(Config.Media.Import.CandidateTtlSeconds) or 300)
+    )
+    import_candidates[source] = import_candidates[source] or {}
+    import_candidates[source][media.sourceId] = import_candidates[source][media.sourceId] or {}
+    import_candidates[source][media.sourceId][media.externalId] = expires_at
+end
+
+local function candidate_allowed(source, source_id, external_id)
+    local by_source = import_candidates[source] and import_candidates[source][source_id]
+    local expires_at = by_source and by_source[external_id]
+    if not expires_at or expires_at < os.time() then
+        if by_source then
+            by_source[external_id] = nil
+        end
+        return false
+    end
+    return true
+end
+
+local function validate_website(definition)
+    if type(definition) ~= "table"
+        or definition.Enabled == false
+        or not valid_source_id(definition.Id)
+        or type(definition.Label) ~= "string"
+        or definition.Label == ""
+        or #definition.Label > 64
+        or type(definition.Adapter) ~= "string"
+    then
+        return nil, "invalid_definition"
+    end
+
+    local adapter = adapters[definition.Adapter]
+    if not adapter then
+        return nil, "unknown_adapter"
+    end
+
+    if type(definition.AllowedMediaHosts) ~= "table" or #definition.AllowedMediaHosts < 1 then
+        return nil, "missing_allowed_hosts"
+    end
+
+    local allowed_media_types = media_type_set(definition.MediaTypes)
+    if not allowed_media_types.photo and not allowed_media_types.video then
+        return nil, "missing_media_types"
+    end
+
+    if definition.RequiredAce ~= nil and type(definition.RequiredAce) ~= "string" then
+        return nil, "invalid_required_ace"
+    end
+
+    definition._adapter = adapter
+    definition._media_types = allowed_media_types
+    local valid, validation_error = adapter.Validate(definition)
+    if not valid then
+        return nil, validation_error
+    end
+
+    return definition
+end
+
+local function build_registry()
+    websites = {}
+    local config = Config.Media.Import
+    if not config.Enabled then
+        return
+    end
+
+    for index, definition in ipairs(config.Websites or {}) do
+        local website, website_error = validate_website(definition)
+        if website then
+            if websites[website.Id] then
+                error(("[sky_phone] Duplicate media import website id '%s'."):format(website.Id))
+            end
+            websites[website.Id] = website
+        else
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Media import website at index %s was disabled: %s.",
+                tostring(index),
+                tostring(website_error)
+            )
+        end
+    end
+end
+
+local function find_imported(owner, source_id, items)
+    if #items == 0 then
+        return
+    end
+
+    local condition, params = owner_condition(owner)
+    params[#params + 1] = source_id
+    local placeholders = {}
+    for index, item in ipairs(items) do
+        placeholders[index] = "?"
+        params[#params + 1] = item.externalId
+    end
+
+    local rows = Bridge.Database.Query(([[
+        SELECT `remote_id` FROM `sky_phone_media`
+        WHERE %s AND `origin` = 'website_import' AND `source_id` = ?
+            AND `remote_id` IN (%s)
+    ]]):format(condition, table.concat(placeholders, ", ")), params)
+    local imported = {}
+    for _, row in ipairs(rows) do
+        imported[row.remote_id] = true
+    end
+    for _, item in ipairs(items) do
+        item.imported = imported[item.externalId] or false
+    end
+end
+
+local function select_owned_import(owner, source_id, remote_id)
+    local condition, params = owner_condition(owner)
+    params[#params + 1] = source_id
+    params[#params + 1] = remote_id
+    local rows = Bridge.Database.Query(([[
+        SELECT `id`, `url`, `media_type` AS `mediaType`,
+            UNIX_TIMESTAMP(`created_at`) * 1000 AS `createdAt`
+        FROM `sky_phone_media`
+        WHERE %s AND `origin` = 'website_import'
+            AND `source_id` = ? AND `remote_id` = ?
+        LIMIT 1
+    ]]):format(condition), params)
+    local row = rows[1]
+    if row then
+        row.id = tonumber(row.id)
+        row.createdAt = tonumber(row.createdAt) or 0
+    end
+    return row
+end
+
+local function store_import(owner, media)
+    local existing = select_owned_import(owner, media.sourceId, media.externalId)
+    if existing then
+        Bridge.Database.Query([[
+            UPDATE `sky_phone_media`
+            SET `url` = ?, `media_type` = ?, `verified_at` = CURRENT_TIMESTAMP
+            WHERE `id` = ?
+        ]], { media.url, media.mediaType, existing.id })
+        existing.url = media.url
+        existing.mediaType = media.mediaType
+        return existing
+    end
+
+    local result
+    if owner.account_id then
+        result = Bridge.Database.Query([[
+            INSERT IGNORE INTO `sky_phone_media`
+                (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `origin`, `source_id`, `verified_at`)
+            VALUES (?, NULL, ?, ?, ?, 'website_import', ?, CURRENT_TIMESTAMP)
+        ]], { owner.account_id, media.url, media.externalId, media.mediaType, media.sourceId })
+    else
+        result = Bridge.Database.Query([[
+            INSERT IGNORE INTO `sky_phone_media`
+                (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `origin`, `source_id`, `verified_at`)
+            VALUES (NULL, ?, ?, ?, ?, 'website_import', ?, CURRENT_TIMESTAMP)
+        ]], { owner.imei, media.url, media.externalId, media.mediaType, media.sourceId })
+    end
+
+    local media_id = type(result) == "number" and result or (type(result) == "table" and tonumber(result.insertId))
+    if media_id and media_id < 1 then
+        media_id = nil
+    end
+    if not media_id then
+        local concurrent = select_owned_import(owner, media.sourceId, media.externalId)
+        if concurrent then
+            return concurrent
+        end
+        return nil, "request_failed"
+    end
+
+    return {
+        createdAt = os.time() * 1000,
+        id = media_id,
+        mediaType = media.mediaType,
+        url = media.url,
+    }
+end
+
+function SkyPhoneMediaImport.RegisterAdapter(name, adapter)
+    assert(type(name) == "string" and name ~= "", "Media import adapter name must be a string")
+    assert(type(adapter) == "table", "Media import adapter must be a table")
+    assert(type(adapter.Validate) == "function", "Media import adapter requires Validate")
+    assert(type(adapter.List) == "function", "Media import adapter requires List")
+    assert(type(adapter.Resolve) == "function", "Media import adapter requires Resolve")
+    assert(not adapters[name], ("Media import adapter '%s' is already registered"):format(name))
+    adapters[name] = adapter
+end
+
+function SkyPhoneMediaImport.HttpRequest(url, headers, timeout_ms, method)
+    local request = promise.new()
+    local settled = false
+    local request_method = method or "GET"
+    local request_host = url_host(url) or "invalid-host"
+    PerformHttpRequest(url, function(status, response_body, response_headers, error_data)
+        if settled then
+            return
+        end
+        settled = true
+        local response_status = tonumber(status) or 0
+        if response_status == 0 then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Media import HTTP %s request to '%s' failed: %s.",
+                request_method,
+                request_host,
+                tostring(error_data or "unknown transport error"),
+                { always = true }
+            )
+        elseif response_status >= 400 then
+            Bridge.Debug(
+                "debug",
+                "[sky_phone] Media import HTTP %s request to '%s' returned status %s.",
+                request_method,
+                request_host,
+                tostring(response_status)
+            )
+        end
+        request:resolve({
+            body = response_body or "",
+            error = error_data,
+            headers = response_headers or {},
+            status = response_status,
+        })
+    end, request_method, "", headers or {}, { followLocation = false })
+    SetTimeout(timeout_ms, function()
+        if settled then
+            return
+        end
+        settled = true
+        Bridge.Debug(
+            "warn",
+            "[sky_phone] Media import HTTP %s request to '%s' timed out after %s ms.",
+            request_method,
+            request_host,
+            tostring(timeout_ms),
+            { always = true }
+        )
+        request:resolve({ body = "", error = "request timeout", headers = {}, status = 0 })
+    end)
+    return Citizen.Await(request)
+end
+
+function SkyPhoneMediaImport.ResolveUrl(source_id, url)
+    if not initialized or not valid_source_id(source_id) or type(url) ~= "string" then
+        return nil, "invalid_import_url"
+    end
+
+    local website = websites[source_id]
+    local trimmed_url = url:match("^%s*(.-)%s*$")
+    local host = website and url_host(trimmed_url) or nil
+    if not website or not host or not allowed_host(website, host) then
+        return nil, "import_url_not_allowed"
+    end
+
+    if type(website._adapter.ResolveUrl) == "function" then
+        local item, resolve_error = website._adapter.ResolveUrl(website, trimmed_url)
+        if not item then
+            return nil, resolve_error
+        end
+        return normalize_media(website, item)
+    end
+
+    local response = SkyPhoneMediaImport.HttpRequest(
+        trimmed_url,
+        {},
+        tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000,
+        "HEAD"
+    )
+    if response.status == 0 then
+        return nil, "import_source_unavailable"
+    end
+    if response.status < 200 or response.status >= 300 then
+        return nil, "import_url_unavailable"
+    end
+
+    local content_type = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-type")
+    content_type = type(content_type) == "string" and content_type:lower():match("^%s*([^;%s]+)") or nil
+    local media_type = content_type and media_types_by_mime[content_type] or nil
+    if not media_type or not website._media_types[media_type] then
+        return nil, "import_media_not_allowed"
+    end
+
+    local content_length = tonumber(SkyPhoneMediaImport.ResponseHeader(response.headers, "content-length"))
+    if not content_length or content_length <= 0 or content_length ~= math.floor(content_length) then
+        return nil, "import_size_unavailable"
+    end
+
+    local external_id = ("url:%08x%08x"):format(
+        joaat(trimmed_url) & 0xffffffff,
+        joaat("sky_phone:" .. trimmed_url) & 0xffffffff
+    )
+    local url_path = trimmed_url:match("^https://[^/]+(/[^?#]*)") or ""
+    return normalize_media(website, {
+        externalId = external_id,
+        filename = url_path:match("/([^/]+)$") or external_id,
+        mediaType = media_type,
+        size = content_length,
+        url = trimmed_url,
+    })
+end
+
+function SkyPhoneMediaImport.UrlEncode(value)
+    return tostring(value):gsub("\n", "\r\n"):gsub("([^%w%-_%.~])", function(character)
+        return ("%%%02X"):format(character:byte())
+    end)
+end
+
+function SkyPhoneMediaImport.Resolve(source_id, external_id)
+    if not initialized or not valid_source_id(source_id) or not valid_external_id(external_id) then
+        return nil, "import_source_unavailable"
+    end
+
+    local website = websites[source_id]
+    if not website then
+        return nil, "import_source_unavailable"
+    end
+
+    local item, resolve_error = website._adapter.Resolve(website, external_id)
+    if not item then
+        return nil, resolve_error
+    end
+
+    return normalize_media(website, item)
+end
+
+function SkyPhoneMediaImport.Initialize()
+    assert(not initialized, "Media import was initialized more than once")
+    build_registry()
+    initialized = true
+
+    Bridge.Callbacks.Register("sky_phone:media:import:sources", function(source)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+
+        local sources = {}
+        for _, website in pairs(websites) do
+            if website_accessible(source, website) then
+                local media_types = {}
+                if website._media_types.photo then
+                    media_types[#media_types + 1] = "photo"
+                end
+                if website._media_types.video then
+                    media_types[#media_types + 1] = "video"
+                end
+                sources[#sources + 1] = {
+                    id = website.Id,
+                    label = website.Label,
+                    mediaTypes = media_types,
+                }
+            end
+        end
+        table.sort(sources, function(left, right)
+            return left.label:lower() < right.label:lower()
+        end)
+        return {
+            success = true,
+            data = {
+                maxSelection = math.max(1, math.floor(tonumber(Config.Media.Import.MaxSelection) or 1)),
+                sources = sources,
+            },
+        }
+    end)
+
+    Bridge.Callbacks.Register("sky_phone:media:import:list", function(source, data)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+        if not SkyPhone.AllowOperation(
+            source,
+            "media_import_list",
+            tonumber(Config.Media.Import.ListActionsPerMinute) or 60,
+            60
+        ) then
+            return { success = false, error = "rate_limited" }
+        end
+
+        data = type(data) == "table" and data or {}
+        local website = valid_source_id(data.sourceId) and websites[data.sourceId] or nil
+        local media_type = data.mediaType
+        local page = math.floor(tonumber(data.page) or 1)
+        if not website or not website_accessible(source, website) then
+            return { success = false, error = "import_source_not_found" }
+        end
+        if not website._media_types[media_type] or page < 1 or page > 10000 then
+            return { success = false, error = "invalid_import_request" }
+        end
+
+        local limit = math.max(1, math.min(math.floor(tonumber(Config.Media.Import.PageSize) or 30), 100))
+        local result, list_error = website._adapter.List(website, media_type, page, limit)
+        if not result then
+            return { success = false, error = list_error }
+        end
+        if type(result) ~= "table" or type(result.items) ~= "table" then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Import source '%s' returned an invalid list response.",
+                website.Id
+            )
+            return { success = false, error = "import_provider_failed" }
+        end
+
+        local items = {}
+        for _, item in ipairs(result.items) do
+            local normalized, normalize_error = normalize_media(website, item)
+            if normalized then
+                items[#items + 1] = normalized
+                remember_candidate(source, normalized)
+            else
+                Bridge.Debug(
+                    "warn",
+                    "[sky_phone] Rejected media '%s' from import source '%s': %s.",
+                    tostring(item.externalId),
+                    website.Id,
+                    tostring(normalize_error)
+                )
+            end
+        end
+        find_imported(owner, website.Id, items)
+        return {
+            success = true,
+            data = {
+                hasMore = result.hasMore == true,
+                items = items,
+                page = page,
+                total = math.max(0, math.floor(tonumber(result.total) or #items)),
+            },
+        }
+    end)
+
+    Bridge.Callbacks.Register("sky_phone:media:import:commit", function(source, data)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+        if not SkyPhone.AllowOperation(
+            source,
+            "media_import_commit",
+            tonumber(Config.Media.Import.ImportActionsPerMinute) or 20,
+            60
+        ) then
+            return { success = false, error = "rate_limited" }
+        end
+
+        data = type(data) == "table" and data or {}
+        local website = valid_source_id(data.sourceId) and websites[data.sourceId] or nil
+        if not website or not website_accessible(source, website) then
+            return { success = false, error = "import_source_not_found" }
+        end
+        if type(data.externalIds) ~= "table" then
+            return { success = false, error = "invalid_import_request" }
+        end
+
+        local maximum = math.max(1, math.floor(tonumber(Config.Media.Import.MaxSelection) or 1))
+        if #data.externalIds < 1 or #data.externalIds > maximum then
+            return { success = false, error = "invalid_import_request" }
+        end
+
+        local unique_ids = {}
+        local requested_ids = {}
+        for _, external_id in ipairs(data.externalIds) do
+            if not valid_external_id(external_id) or unique_ids[external_id] then
+                return { success = false, error = "invalid_import_request" }
+            end
+            if not candidate_allowed(source, website.Id, external_id) then
+                return { success = false, error = "invalid_import_request" }
+            end
+            unique_ids[external_id] = true
+            requested_ids[#requested_ids + 1] = external_id
+        end
+
+        local imported = {}
+        local failed = {}
+        for _, external_id in ipairs(requested_ids) do
+            local item, resolve_error = website._adapter.Resolve(website, external_id)
+            local normalized, normalize_error
+            if item then
+                normalized, normalize_error = normalize_media(website, item)
+            end
+            if not normalized then
+                failed[#failed + 1] = {
+                    error = resolve_error or normalize_error or "import_provider_failed",
+                    externalId = external_id,
+                }
+            else
+                local stored, store_error = store_import(owner, normalized)
+                if stored then
+                    imported[#imported + 1] = stored
+                else
+                    failed[#failed + 1] = {
+                        error = store_error or "request_failed",
+                        externalId = external_id,
+                    }
+                end
+            end
+        end
+
+        return {
+            success = true,
+            data = {
+                failed = failed,
+                imported = imported,
+            },
+        }
+    end)
+
+    Bridge.Callbacks.Register("sky_phone:media:import:url", function(source, data)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+        if not SkyPhone.AllowOperation(
+            source,
+            "media_import_url",
+            tonumber(Config.Media.Import.ImportActionsPerMinute) or 20,
+            60
+        ) then
+            return { success = false, error = "rate_limited" }
+        end
+
+        data = type(data) == "table" and data or {}
+        local website = valid_source_id(data.sourceId) and websites[data.sourceId] or nil
+        if not website or not website_accessible(source, website) then
+            return { success = false, error = "import_source_not_found" }
+        end
+        if type(data.url) ~= "string" or #data.url < 1 or #data.url > Config.Media.UrlMaxLength then
+            return { success = false, error = "invalid_import_url" }
+        end
+
+        local normalized, resolve_error = SkyPhoneMediaImport.ResolveUrl(website.Id, data.url)
+        if not normalized then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Media URL import failed for player %s, source '%s', host '%s': %s.",
+                tostring(source),
+                website.Id,
+                tostring(url_host(data.url) or "invalid-host"),
+                tostring(resolve_error),
+                { always = true }
+            )
+            return { success = false, error = resolve_error }
+        end
+        Bridge.Debug(
+            "debug",
+            "[sky_phone] Media URL import resolved for player %s via source '%s' as %s '%s' (%s bytes).",
+            tostring(source),
+            website.Id,
+            normalized.mediaType,
+            normalized.externalId,
+            tostring(normalized.size)
+        )
+        local stored, store_error = store_import(owner, normalized)
+        if not stored then
+            return { success = false, error = store_error or "request_failed" }
+        end
+        return { success = true, data = stored }
+    end)
+
+    AddEventHandler("playerDropped", function()
+        import_candidates[source] = nil
+    end)
+end
diff --git a/sky_phone/source/server/media_import/fivemanage.lua b/sky_phone/source/server/media_import/fivemanage.lua
new file mode 100644
index 0000000..33a14ab
--- /dev/null
+++ b/sky_phone/source/server/media_import/fivemanage.lua
@@ -0,0 +1,237 @@
+local function api_key(website)
+    local value = website.ApiKey or Config.Media.FiveManage.ApiKey
+    if type(value) ~= "string" or value == "" or value == "YOUR_API_TOKEN" then
+        return ""
+    end
+    return value
+end
+
+local function provider_error(response, not_found_error)
+    if response.status == 0 then
+        return "import_source_unavailable"
+    end
+    if response.status == 401 or response.status == 403 then
+        return "import_provider_unauthorized"
+    end
+    if response.status == 404 and not_found_error then
+        return not_found_error
+    end
+    return "import_provider_failed"
+end
+
+local function decode_response(response, not_found_error)
+    if type(response) ~= "table" or response.status < 200 or response.status >= 300 then
+        return nil, provider_error(response or { status = 0 }, not_found_error)
+    end
+
+    local success, decoded = pcall(json.decode, response.body or "")
+    if not success or type(decoded) ~= "table" then
+        return nil, "import_provider_failed"
+    end
+    return decoded
+end
+
+local function media_type(value)
+    local normalized = type(value) == "string" and value:lower() or ""
+    if normalized == "image" or normalized:find("image/", 1, true) == 1 then
+        return "photo"
+    end
+    if normalized == "video" or normalized:find("video/", 1, true) == 1 then
+        return "video"
+    end
+    return nil
+end
+
+local media_extensions = {
+    gif = true,
+    jpeg = true,
+    jpg = true,
+    mov = true,
+    mp4 = true,
+    png = true,
+    webm = true,
+    webp = true,
+}
+
+local function public_file_id(url)
+    local path = type(url) == "string" and url:match("^https://[^/%?#]+(/[^?#]*)") or nil
+    local segment = path and path:match("/([^/]+)$") or nil
+    if not segment or segment == "" or segment:find("%", 1, true) then
+        return nil
+    end
+
+    local extension = segment:match("%.([%w]+)$")
+    if extension and media_extensions[extension:lower()] then
+        segment = segment:sub(1, -#extension - 2)
+    end
+    if #segment < 1 or #segment > 128 or not segment:match("^[%w_%-]+$") then
+        return nil
+    end
+    return segment
+end
+
+local function normalize_file(file)
+    if type(file) ~= "table" then
+        return {}
+    end
+    return {
+        externalId = file.id,
+        filename = file.filename,
+        mediaType = media_type(file.type or file.mimeType),
+        size = file.size,
+        url = file.url,
+    }
+end
+
+local function resolve_file(website, external_id)
+    local provider_url = tostring(website.BaseUrl or Config.Media.FiveManage.BaseUrl):gsub("/+$", "")
+    local response = SkyPhoneMediaImport.HttpRequest(
+        ("%s/%s"):format(provider_url, SkyPhoneMediaImport.UrlEncode(external_id)),
+        { ["Authorization"] = api_key(website) },
+        tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000
+    )
+    local decoded, response_error = decode_response(response, "import_media_unavailable")
+    if not decoded then
+        return nil, response_error
+    end
+
+    local file = type(decoded.data) == "table" and decoded.data or decoded
+    if file.id ~= external_id then
+        return nil, "invalid_import_media"
+    end
+    return normalize_file(file)
+end
+
+local function probe_public_url(website, url)
+    local timeout = tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000
+    local response = SkyPhoneMediaImport.HttpRequest(url, {}, timeout, "HEAD")
+    local content_type = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-type")
+    local content_length = tonumber(SkyPhoneMediaImport.ResponseHeader(response.headers, "content-length"))
+
+    if response.status == 0 or (response.status >= 200 and response.status < 300
+        and (not content_type or not content_length or content_length <= 0))
+    then
+        Bridge.Debug(
+            "debug",
+            "[sky_phone] FiveManage HEAD probe did not provide usable metadata; trying a one-byte range request."
+        )
+        response = SkyPhoneMediaImport.HttpRequest(url, { ["Range"] = "bytes=0-0" }, timeout)
+        content_type = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-type")
+        local content_range = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-range")
+        content_length = type(content_range) == "string" and tonumber(content_range:match("/(%d+)$"))
+            or tonumber(SkyPhoneMediaImport.ResponseHeader(response.headers, "content-length"))
+    end
+
+    if response.status == 0 then
+        return nil, "import_source_unavailable"
+    end
+    if response.status < 200 or response.status >= 300 then
+        Bridge.Debug(
+            "warn",
+            "[sky_phone] FiveManage public URL probe returned HTTP %s.",
+            tostring(response.status),
+            { always = true }
+        )
+        return nil, "import_url_unavailable"
+    end
+
+    local normalized_type = media_type(content_type)
+    if not normalized_type then
+        return nil, "import_media_not_allowed"
+    end
+    if not content_length or content_length <= 0 or content_length ~= math.floor(content_length) then
+        return nil, "import_size_unavailable"
+    end
+
+    local url_path = url:match("^https://[^/]+(/[^?#]*)") or ""
+    local external_id = ("url:%08x%08x"):format(
+        joaat(url) & 0xffffffff,
+        joaat("sky_phone:" .. url) & 0xffffffff
+    )
+    return {
+        externalId = external_id,
+        filename = url_path:match("/([^/]+)$") or external_id,
+        mediaType = normalized_type,
+        size = content_length,
+        url = url,
+    }
+end
+
+SkyPhoneMediaImport.RegisterAdapter("fivemanage", {
+    Validate = function(website)
+        local url = tostring(website.BaseUrl or Config.Media.FiveManage.BaseUrl):gsub("/+$", "")
+        if not url:match("^https://") or #url > Config.Media.UrlMaxLength then
+            return false, "invalid_base_url"
+        end
+        if type(website.Path) ~= "string" or website.Path == "" or #website.Path > 180 then
+            return false, "missing_import_path"
+        end
+        if api_key(website) == "" then
+            return false, "missing_api_key"
+        end
+        return true
+    end,
+
+    List = function(website, requested_type, page, limit)
+        local provider_type = requested_type == "photo" and "image" or "video"
+        local provider_url = tostring(website.BaseUrl or Config.Media.FiveManage.BaseUrl):gsub("/+$", "")
+        local url = ("%s?page=%s&limit=%s&type=%s&path=%s"):format(
+            provider_url,
+            page,
+            limit,
+            provider_type,
+            SkyPhoneMediaImport.UrlEncode(website.Path)
+        )
+        local response = SkyPhoneMediaImport.HttpRequest(
+            url,
+            { ["Authorization"] = api_key(website) },
+            tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000
+        )
+        local decoded, response_error = decode_response(response)
+        if not decoded then
+            return nil, response_error
+        end
+
+        local files = type(decoded.data) == "table" and decoded.data or {}
+        local items = {}
+        for _, file in ipairs(files) do
+            items[#items + 1] = normalize_file(file)
+        end
+        local pagination = type(decoded.pagination) == "table" and decoded.pagination or {}
+        local total = math.max(0, math.floor(tonumber(pagination.total) or #items))
+        local current_page = math.max(1, math.floor(tonumber(pagination.page) or page))
+        local page_limit = math.max(1, math.floor(tonumber(pagination.limit) or limit))
+        return {
+            hasMore = current_page * page_limit < total,
+            items = items,
+            total = total,
+        }
+    end,
+
+    Resolve = resolve_file,
+
+    ResolveUrl = function(website, url)
+        local external_id = public_file_id(url)
+        if external_id then
+            local file, resolve_error = resolve_file(website, external_id)
+            if file then
+                Bridge.Debug(
+                    "debug",
+                    "[sky_phone] FiveManage URL resolved through authenticated metadata for file '%s'.",
+                    external_id
+                )
+                return file
+            end
+            if resolve_error == "import_provider_unauthorized" then
+                return nil, resolve_error
+            end
+            Bridge.Debug(
+                "debug",
+                "[sky_phone] FiveManage metadata lookup for file '%s' failed with '%s'; probing the public URL.",
+                external_id,
+                tostring(resolve_error)
+            )
+        end
+        return probe_public_url(website, url)
+    end,
+})
diff --git a/sky_phone/source/server/media_import/manifest.lua b/sky_phone/source/server/media_import/manifest.lua
new file mode 100644
index 0000000..dbdfbe2
--- /dev/null
+++ b/sky_phone/source/server/media_import/manifest.lua
@@ -0,0 +1,152 @@
+local manifest_cache = {}
+
+local function authentication_headers(website)
+    local auth = website.Auth
+    if not auth or auth.Type == nil or auth.Type == "none" then
+        return {}
+    end
+
+    if auth.Type == "bearer" then
+        return { ["Authorization"] = "Bearer " .. GetConvar(auth.TokenConvar, "") }
+    end
+    return { [auth.Header] = GetConvar(auth.ValueConvar, "") }
+end
+
+local function validate_authentication(auth)
+    if auth == nil then
+        return true
+    end
+    if type(auth) ~= "table" then
+        return false, "invalid_auth"
+    end
+    if auth.Type == nil or auth.Type == "none" then
+        return true
+    end
+    if auth.Type == "bearer" then
+        if type(auth.TokenConvar) ~= "string" or auth.TokenConvar == ""
+            or GetConvar(auth.TokenConvar, "") == ""
+        then
+            return false, "missing_auth_convar"
+        end
+        return true
+    end
+    if auth.Type == "header" then
+        if type(auth.Header) ~= "string" or not auth.Header:match("^[%w%-]+$")
+            or type(auth.ValueConvar) ~= "string" or auth.ValueConvar == ""
+            or GetConvar(auth.ValueConvar, "") == ""
+        then
+            return false, "invalid_header_auth"
+        end
+        return true
+    end
+    return false, "unknown_auth_type"
+end
+
+local function fetch_manifest(website)
+    local now = os.time()
+    local cached = manifest_cache[website.Id]
+    if cached and cached.expires_at > now then
+        return cached.items
+    end
+
+    local response = SkyPhoneMediaImport.HttpRequest(
+        website.ManifestUrl,
+        authentication_headers(website),
+        tonumber(website.RequestTimeoutMs) or 10000
+    )
+    if response.status == 0 then
+        return nil, "import_source_unavailable"
+    end
+    if response.status == 401 or response.status == 403 then
+        return nil, "import_provider_unauthorized"
+    end
+    if response.status < 200 or response.status >= 300 then
+        return nil, "import_provider_failed"
+    end
+
+    local max_bytes = math.max(1024, math.floor(tonumber(Config.Media.Import.ManifestMaxBytes) or 2097152))
+    if #response.body > max_bytes then
+        return nil, "import_provider_failed"
+    end
+
+    local success, decoded = pcall(json.decode, response.body)
+    if not success or type(decoded) ~= "table" or tonumber(decoded.version) ~= 1
+        or type(decoded.items) ~= "table"
+    then
+        return nil, "import_provider_failed"
+    end
+
+    local maximum_items = math.max(1, math.floor(tonumber(Config.Media.Import.ManifestMaxItems) or 5000))
+    if #decoded.items > maximum_items then
+        return nil, "import_provider_failed"
+    end
+
+    local items = {}
+    for _, item in ipairs(decoded.items) do
+        if type(item) == "table" then
+            items[#items + 1] = {
+                externalId = item.id,
+                filename = item.filename,
+                mediaType = item.type,
+                size = item.size,
+                url = item.url,
+            }
+        end
+    end
+    manifest_cache[website.Id] = {
+        expires_at = now + math.max(1, math.floor(tonumber(website.CacheSeconds)
+            or tonumber(Config.Media.Import.ManifestCacheSeconds) or 30)),
+        items = items,
+    }
+    return items
+end
+
+SkyPhoneMediaImport.RegisterAdapter("manifest", {
+    Validate = function(website)
+        if type(website.ManifestUrl) ~= "string"
+            or not website.ManifestUrl:match("^https://")
+            or #website.ManifestUrl > Config.Media.UrlMaxLength
+        then
+            return false, "invalid_manifest_url"
+        end
+        return validate_authentication(website.Auth)
+    end,
+
+    List = function(website, requested_type, page, limit)
+        local manifest, manifest_error = fetch_manifest(website)
+        if not manifest then
+            return nil, manifest_error
+        end
+
+        local matching = {}
+        for _, item in ipairs(manifest) do
+            if item.mediaType == requested_type then
+                matching[#matching + 1] = item
+            end
+        end
+        local first = (page - 1) * limit + 1
+        local last = math.min(#matching, first + limit - 1)
+        local items = {}
+        for index = first, last do
+            items[#items + 1] = matching[index]
+        end
+        return {
+            hasMore = last < #matching,
+            items = items,
+            total = #matching,
+        }
+    end,
+
+    Resolve = function(website, external_id)
+        local manifest, manifest_error = fetch_manifest(website)
+        if not manifest then
+            return nil, manifest_error
+        end
+        for _, item in ipairs(manifest) do
+            if item.externalId == external_id then
+                return item
+            end
+        end
+        return nil, "import_media_unavailable"
+    end,
+})
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 4e4230b..79ecaf0 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -153,8 +153,13 @@ CREATE TABLE IF NOT EXISTS `sky_phone_media` (
     `url` TEXT NOT NULL,
     `remote_id` VARCHAR(128) NOT NULL,
     `media_type` ENUM('photo', 'video') NOT NULL,
+    `origin` ENUM('phone_upload', 'website_import') NOT NULL DEFAULT 'phone_upload',
+    `source_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `verified_at` DATETIME NULL,
     `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`),
+    UNIQUE KEY `uniq_sky_phone_media_account_source` (`account_id`, `source_id`, `remote_id`, `origin`),
+    UNIQUE KEY `uniq_sky_phone_media_device_source` (`device_imei`, `source_id`, `remote_id`, `origin`),
     KEY `idx_sky_phone_media_account` (`account_id`, `created_at`, `id`),
     KEY `idx_sky_phone_media_device` (`device_imei`, `created_at`, `id`),
     FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE,

From f6664bf4cf51446f7a6fece1ad957e8c2d1e444e Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Thu, 13 Aug 2026 01:55:07 +0200
Subject: [PATCH 46/63] ADD - added Extern Image/Video Import

---
 README.md                                     |   6 +-
 frontend/src/stores/phone.ts                  |  32 +
 frontend/src/types/media.ts                   |  38 +
 frontend/src/utils/media.test.ts              |  12 +
 frontend/src/utils/media.ts                   |  26 +
 frontend/src/views/apps/GalleryApp.vue        | 253 +++++-
 frontend/testserver/index.cjs                 | 120 ++-
 sky_phone/config/locales/en.lua               |  16 +
 sky_phone/config/media.lua                    |  42 +
 sky_phone/fxmanifest.lua                      |   3 +
 sky_phone/source/client/main.lua              |  13 +
 sky_phone/source/server/db_migrate.lua        |  20 +
 sky_phone/source/server/media.lua             |  86 +-
 sky_phone/source/server/media_import.lua      | 746 ++++++++++++++++++
 .../source/server/media_import/fivemanage.lua | 240 ++++++
 .../source/server/media_import/manifest.lua   | 153 ++++
 sky_phone/sql/install.sql                     |   6 +
 17 files changed, 1782 insertions(+), 30 deletions(-)
 create mode 100644 sky_phone/source/server/media_import.lua
 create mode 100644 sky_phone/source/server/media_import/fivemanage.lua
 create mode 100644 sky_phone/source/server/media_import/manifest.lua

diff --git a/README.md b/README.md
index 5c97335..8fb71fd 100644
--- a/README.md
+++ b/README.md
@@ -209,7 +209,11 @@ Database migrations run automatically. Existing `sky_phone_mail_accounts` instal
 Camera and Gallery media is stored in `sky_phone_media`. Signed-out captures belong to the current
 IMEI; linking an iFruit account moves those rows into the account gallery so every linked phone sees
 them. Signing out hides cloud media without deleting it. Factory reset removes device-local media
-and attempts to delete its remote FiveManage files, while account-owned media remains in the cloud.
+and attempts to delete only Phone-created remote FiveManage files. Media imported from a website is
+removed locally but never deleted at its source. Register import websites under
+`Config.Media.Import.Websites` in `sky_phone/config/media.lua`; built-in adapters support FiveManage
+files and version-1 JSON manifests. The Gallery import form accepts direct HTTPS image/video links
+only when their hostname matches the selected website's `AllowedMediaHosts`.
 
 For a fresh manual database installation, import `sky_phone/sql/install.sql`. It contains the complete current table, key, index, collation, and foreign-key schema. Runtime migrations remain authoritative for upgrading an existing installation and must stay enabled.
 
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 611035a..8de3c3b 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -3432,13 +3432,45 @@ const defaultLocales: LocaleTree = {
       zoomOut: 'Zoom out',
       resetZoom: 'Reset zoom',
       filters: { all: 'All', photos: 'Photos', videos: 'Videos' },
+      import: {
+        action: 'Import',
+        title: 'Import',
+        chooseSource: 'Choose a website',
+        linkTitle: 'Import from Link',
+        linkBody:
+          'Paste a direct link to an image or video from this website.',
+        linkLabel: 'Image or video link',
+        linkPlaceholder: 'https://...',
+        linkCompleted: 'Media imported.',
+        loading: 'Loading media...',
+        emptyTitle: 'No Media',
+        emptyBody: 'This website has no media of this type.',
+        loadMore: 'Load More',
+        alreadyImported: 'Imported',
+        failed: 'Failed',
+        completed: 'Imported {imported} media.',
+        partial: 'Imported {imported} of {total} media.',
+      },
       errors: {
         cancelled: 'The media action was cancelled.',
         capture_failed: 'Unable to capture the game view.',
+        invalid_import_request: 'The import request is invalid.',
+        invalid_import_media: 'This media item cannot be imported.',
         invalid_media_type: 'The media type is invalid.',
         invalid_upload: 'The upload could not be verified.',
         invalid_upload_token: 'The upload session is no longer valid.',
         missing_config: 'Gallery uploads are not configured.',
+        import_media_not_allowed: 'This media item is not allowed.',
+        import_media_too_large: 'This media item is too large.',
+        import_media_unavailable: 'This media item is no longer available.',
+        import_provider_failed: 'The website could not load its media.',
+        import_provider_unauthorized: 'The website credentials are invalid.',
+        import_source_not_found: 'This website is not registered.',
+        import_source_unavailable: 'This website is temporarily unavailable.',
+        invalid_import_url: 'Enter a valid HTTPS media link.',
+        import_url_not_allowed: 'This link is not from the selected website.',
+        import_url_unavailable: 'The linked media could not be reached.',
+        import_size_unavailable: 'The website did not provide the media size.',
         not_found: 'The media item no longer exists.',
         operation_in_progress:
           'Another media operation is already in progress.',
diff --git a/frontend/src/types/media.ts b/frontend/src/types/media.ts
index 03587b0..e39ae62 100644
--- a/frontend/src/types/media.ts
+++ b/frontend/src/types/media.ts
@@ -8,6 +8,44 @@ export type PhoneMedia = {
   url: string
 }
 
+export type MediaImportSource = {
+  id: string
+  label: string
+  mediaTypes: MediaType[]
+}
+
+export type MediaImportSources = {
+  maxSelection: number
+  sources: MediaImportSource[]
+}
+
+export type ExternalMedia = {
+  externalId: string
+  filename: string
+  imported: boolean
+  mediaType: MediaType
+  size: number
+  sourceId: string
+  url: string
+}
+
+export type MediaImportPage = {
+  hasMore: boolean
+  items: ExternalMedia[]
+  page: number
+  total: number
+}
+
+export type MediaImportFailure = {
+  error: string
+  externalId: string
+}
+
+export type MediaImportResult = {
+  failed: MediaImportFailure[]
+  imported: PhoneMedia[]
+}
+
 export type UploadReady = {
   captureToken: string
   correlationId: string
diff --git a/frontend/src/utils/media.test.ts b/frontend/src/utils/media.test.ts
index d444aec..c2fd8de 100644
--- a/frontend/src/utils/media.test.ts
+++ b/frontend/src/utils/media.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import {
   filterMedia,
+  formatMediaSize,
   formatRecordingDuration,
   hasNextMediaPage,
   mediaErrorKey,
@@ -44,8 +45,19 @@ describe('media utilities', () => {
     expect(formatRecordingDuration(3_725_000)).toBe('62:05')
   })
 
+  it('formats imported media sizes with the active locale', () => {
+    expect(formatMediaSize(512, 'en')).toBe('512 B')
+    expect(formatMediaSize(1_572_864, 'en')).toBe('1.5 MB')
+  })
+
   it('maps unknown server failures to the localized default', () => {
     expect(mediaErrorKey('upload_timeout')).toBe('upload_timeout')
+    expect(mediaErrorKey('import_media_too_large')).toBe(
+      'import_media_too_large',
+    )
+    expect(mediaErrorKey('import_url_not_allowed')).toBe(
+      'import_url_not_allowed',
+    )
     expect(mediaErrorKey('private_provider_error')).toBe('request_failed')
   })
 })
diff --git a/frontend/src/utils/media.ts b/frontend/src/utils/media.ts
index 1bc21e3..d38bca8 100644
--- a/frontend/src/utils/media.ts
+++ b/frontend/src/utils/media.ts
@@ -37,14 +37,40 @@ export function formatRecordingDuration(elapsedMs: number): string {
   return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
 }
 
+export function formatMediaSize(bytes: number, locale: string): string {
+  const safeBytes = Math.max(0, bytes)
+  if (safeBytes < 1024) return `${safeBytes} B`
+  const units = ['KB', 'MB', 'GB']
+  let value = safeBytes / 1024
+  let unit = units[0]
+  for (let index = 1; index < units.length && value >= 1024; index += 1) {
+    value /= 1024
+    unit = units[index]
+  }
+  return `${new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)} ${unit}`
+}
+
 export function mediaErrorKey(error?: string): string {
   const known = new Set([
     'cancelled',
     'capture_failed',
     'invalid_media_type',
+    'invalid_import_request',
+    'invalid_import_media',
+    'invalid_import_url',
     'invalid_upload',
     'invalid_upload_token',
     'missing_config',
+    'import_media_not_allowed',
+    'import_media_too_large',
+    'import_media_unavailable',
+    'import_provider_failed',
+    'import_provider_unauthorized',
+    'import_source_not_found',
+    'import_source_unavailable',
+    'import_url_not_allowed',
+    'import_url_unavailable',
+    'import_size_unavailable',
     'not_found',
     'operation_in_progress',
     'owner_changed',
diff --git a/frontend/src/views/apps/GalleryApp.vue b/frontend/src/views/apps/GalleryApp.vue
index c993d3f..9fd25ce 100644
--- a/frontend/src/views/apps/GalleryApp.vue
+++ b/frontend/src/views/apps/GalleryApp.vue
@@ -4,6 +4,9 @@ import {
   kButton,
   kDialog,
   kLink,
+  kList,
+  kListInput,
+  kListItem,
   kNavbar,
   kNavbarBackLink,
   kPage,
@@ -12,14 +15,30 @@ import {
   kSegmentedButton,
   kToast,
 } from 'konsta/vue'
-import { Play, RotateCcw, Share2, Trash2, ZoomIn, ZoomOut } from 'lucide-vue-next'
+import {
+  ChevronRight,
+  Globe2,
+  Link2,
+  Play,
+  RotateCcw,
+  Share2,
+  Trash2,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-vue-next'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
 import { useEasyShareStore } from '@/stores/easyshare'
-import type { DeleteResult, GalleryFilter, PhoneMedia } from '@/types/media'
+import type {
+  DeleteResult,
+  GalleryFilter,
+  MediaImportSource,
+  MediaImportSources,
+  PhoneMedia,
+} from '@/types/media'
 import {
   hasNextMediaPage,
   MEDIA_PAGE_SIZE,
@@ -60,6 +79,12 @@ const fetching = ref(false)
 const hasMore = ref(true)
 const loadError = ref('')
 const selected = ref<PhoneMedia | null>(null)
+const importMode = ref<'form' | 'gallery' | 'sources'>('gallery')
+const importSources = ref<MediaImportSource[]>([])
+const importSource = ref<MediaImportSource | null>(null)
+const importUrl = ref('')
+const importError = ref('')
+const importing = ref(false)
 const deleteDialogOpened = ref(false)
 const cancelButtonColors = {
   fillBgIos: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
@@ -148,6 +173,71 @@ function showToast(text: string): void {
   }, 3000)
 }
 
+async function loadImportSources(): Promise<void> {
+  const response = await nuiCall<MediaImportSources>('media:import:sources')
+  if (!response.success || !response.data) return
+  importSources.value = response.data.sources
+}
+
+function selectImportSource(source: MediaImportSource): void {
+  importSource.value = source
+  importMode.value = 'form'
+  importUrl.value = ''
+  importError.value = ''
+}
+
+function openImport(): void {
+  if (importSources.value.length === 1) {
+    selectImportSource(importSources.value[0])
+    return
+  }
+  importMode.value = 'sources'
+}
+
+function closeImport(): void {
+  importMode.value = 'gallery'
+  importSource.value = null
+  importUrl.value = ''
+  importError.value = ''
+}
+
+function backFromImportForm(): void {
+  if (importSources.value.length > 1) {
+    importMode.value = 'sources'
+    importSource.value = null
+    importUrl.value = ''
+    importError.value = ''
+    return
+  }
+  closeImport()
+}
+
+function updateImportUrl(event: Event): void {
+  importUrl.value = (event.target as HTMLInputElement).value
+  importError.value = ''
+}
+
+async function commitUrlImport(): Promise<void> {
+  const url = importUrl.value.trim()
+  if (!importSource.value || !url || importing.value) return
+  importing.value = true
+  importError.value = ''
+  const response = await nuiCall<PhoneMedia>('media:import:url', {
+    sourceId: importSource.value.id,
+    url,
+  })
+  importing.value = false
+  if (!response.success || !response.data) {
+    importError.value = phone.t(
+      `Apps.photos.errors.${mediaErrorKey(response.error)}`,
+    )
+    return
+  }
+  media.value = mergeMedia(media.value, [response.data])
+  closeImport()
+  showToast(phone.t('Apps.photos.import.linkCompleted'))
+}
+
 function formatDate(timestamp: number): string {
   return new Intl.DateTimeFormat(phone.lang, {
     dateStyle: 'medium',
@@ -421,6 +511,7 @@ watch(hasMore, () => void nextTick().then(observeMore))
 onMounted(() => {
   window.addEventListener('message', onMessage)
   void loadGallery()
+  void loadImportSources()
 })
 
 onBeforeUnmount(() => {
@@ -434,12 +525,105 @@ onBeforeUnmount(() => {
 
 <template>
   <k-page
-    v-if="!selected"
+    v-if="importMode === 'sources'"
+    class="gallery-import-page !pt-[44px]"
+    :aria-label="phone.t('Apps.photos.import.chooseSource')"
+  >
+    <k-navbar :title="phone.t('Apps.photos.import.title')">
+      <template #left>
+        <k-navbar-back-link
+          component="button"
+          :text="phone.t('Common.back')"
+          @click="closeImport"
+        />
+      </template>
+    </k-navbar>
+    <k-block class="gallery-import-intro">
+      {{ phone.t('Apps.photos.import.chooseSource') }}
+    </k-block>
+    <k-list inset strong>
+      <k-list-item
+        v-for="source in importSources"
+        :key="source.id"
+        link
+        :chevron="false"
+        :title="source.label"
+        :subtitle="
+          source.mediaTypes
+            .map((type) =>
+              phone.t(
+                type === 'photo'
+                  ? 'Apps.photos.filters.photos'
+                  : 'Apps.photos.filters.videos',
+              ),
+            )
+            .join(' · ')
+        "
+        @click="selectImportSource(source)"
+      >
+        <template #media><Globe2 :size="22" /></template>
+        <template #after><ChevronRight :size="18" /></template>
+      </k-list-item>
+    </k-list>
+  </k-page>
+
+  <k-page
+    v-else-if="importMode === 'form' && importSource"
+    class="gallery-import-page !pt-[44px]"
+    :aria-label="phone.t('Apps.photos.import.title')"
+  >
+    <k-navbar :title="importSource.label">
+      <template #left>
+        <k-navbar-back-link
+          component="button"
+          :text="phone.t('Common.back')"
+          @click="backFromImportForm"
+        />
+      </template>
+    </k-navbar>
+
+    <div class="gallery-import-form">
+      <div class="gallery-import-form-icon"><Link2 :size="34" /></div>
+      <h2>{{ phone.t('Apps.photos.import.linkTitle') }}</h2>
+      <p>{{ phone.t('Apps.photos.import.linkBody') }}</p>
+      <k-list inset strong class="gallery-import-url-list">
+        <k-list-input
+          outline
+          input-id="gallery-import-url"
+          inputmode="url"
+          maxlength="2048"
+          :error="importError || undefined"
+          :label="phone.t('Apps.photos.import.linkLabel')"
+          :placeholder="phone.t('Apps.photos.import.linkPlaceholder')"
+          type="url"
+          :value="importUrl"
+          @input="updateImportUrl"
+          @keyup.enter="commitUrlImport"
+        />
+      </k-list>
+      <k-button
+        class="gallery-import-submit"
+        large
+        rounded
+        :disabled="!importUrl.trim() || importing"
+        @click="commitUrlImport"
+      >
+        <k-preloader v-if="importing" class="mr-2" />
+        {{ phone.t('Apps.photos.import.action') }}
+      </k-button>
+    </div>
+  </k-page>
+
+  <k-page
+    v-else-if="!selected"
     class="gallery-page !pt-[44px]"
     :aria-label="phone.t('Apps.photos.name')"
   >
-    <k-navbar :title="phone.t('Apps.photos.name')">
-      <template v-if="requestedMessageMedia" #left>
+    <k-navbar
+      v-if="requestedMessageMedia"
+      :title="phone.t('Apps.photos.name')"
+    >
+      <template #left>
         <k-navbar-back-link
           component="button"
           :text="phone.t('Common.back')"
@@ -456,6 +640,17 @@ onBeforeUnmount(() => {
         </k-link>
       </template>
     </k-navbar>
+    <k-navbar
+      v-else
+      :title="phone.t('Apps.photos.name')"
+      right-class="!ms-auto"
+    >
+      <template v-if="importSources.length" #right>
+        <k-link component="button" @click="openImport">
+          {{ phone.t('Apps.photos.import.action') }}
+        </k-link>
+      </template>
+    </k-navbar>
 
     <div class="gallery-content">
       <div v-if="loading" class="gallery-state">
@@ -708,6 +903,54 @@ onBeforeUnmount(() => {
   flex-direction: column;
   overflow: hidden;
 }
+.gallery-import-page {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.gallery-import-intro {
+  margin-bottom: 0;
+  color: #8e8e93;
+}
+.gallery-import-form {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 16px 24px;
+  text-align: center;
+}
+.gallery-import-form-icon {
+  width: 72px;
+  height: 72px;
+  display: grid;
+  place-items: center;
+  border-radius: 22px;
+  background: #0a84ff;
+  color: #fff;
+  box-shadow: 0 10px 28px #0a84ff4d;
+}
+.gallery-import-form h2 {
+  margin: 20px 0 7px;
+  font-size: 21px;
+  font-weight: 700;
+}
+.gallery-import-form p {
+  max-width: 280px;
+  margin: 0;
+  color: #8e8e93;
+  font-size: 13px;
+  line-height: 1.45;
+}
+.gallery-import-url-list {
+  width: 100%;
+  margin-top: 26px;
+}
+.gallery-import-submit {
+  width: calc(100% - 32px);
+  margin-top: 14px;
+}
 .gallery-content {
   min-height: 0;
   flex: 1;
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index e4b0a3f..4ff3382 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -2336,7 +2336,6 @@ let mockMedia = [
     url: 'https://picsum.photos/seed/sky-phone-5/800/600',
   },
 ]
-
 const weazelNewsCategoryIds = ['official', 'events', 'jobs', 'news', 'business']
 let weazelNewsSequence = 8
 let weazelNewsArticles = [
@@ -2524,6 +2523,52 @@ function pageWeazelNewsArticles(items, data) {
   }
 }
 
+const mockImportSources = [
+  {
+    id: 'media_archive',
+    label: 'Media Archive',
+    mediaTypes: ['photo', 'video'],
+  },
+  { id: 'event_cdn', label: 'Event CDN', mediaTypes: ['photo'] },
+]
+const mockImportMedia = [
+  {
+    externalId: 'archive-photo-1',
+    filename: 'Vespucci Sunset.jpg',
+    imported: false,
+    mediaType: 'photo',
+    size: 2_481_152,
+    sourceId: 'media_archive',
+    url: 'https://picsum.photos/seed/sky-import-1/900/1200',
+  },
+  {
+    externalId: 'archive-photo-2',
+    filename: 'Downtown Meet.jpg',
+    imported: false,
+    mediaType: 'photo',
+    size: 3_114_205,
+    sourceId: 'media_archive',
+    url: 'https://picsum.photos/seed/sky-import-2/1200/900',
+  },
+  {
+    externalId: 'archive-video-1',
+    filename: 'Flower Clip.mp4',
+    imported: false,
+    mediaType: 'video',
+    size: 8_241_152,
+    sourceId: 'media_archive',
+    url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+  },
+  {
+    externalId: 'event-photo-1',
+    filename: 'Opening Night.jpg',
+    imported: false,
+    mediaType: 'photo',
+    size: 1_824_331,
+    sourceId: 'event_cdn',
+    url: 'https://picsum.photos/seed/sky-event-1/900/1200',
+  },
+]
 const marketplaceInquiries = [
   {
     id: '4903b923-409a-437e-971f-b7a2b10e9e31',
@@ -7880,6 +7925,79 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: media })
     return
   }
+  if (endpoint === 'media:import:sources') {
+    response.json({
+      success: true,
+      data: { maxSelection: 10, sources: mockImportSources },
+    })
+    return
+  }
+  if (endpoint === 'media:import:list') {
+    const page = Math.max(1, Number(request.body.page) || 1)
+    const limit = 30
+    const filtered = mockImportMedia.filter(
+      (item) =>
+        item.sourceId === request.body.sourceId &&
+        item.mediaType === request.body.mediaType,
+    )
+    const offset = (page - 1) * limit
+    response.json({
+      success: true,
+      data: {
+        hasMore: offset + limit < filtered.length,
+        items: filtered.slice(offset, offset + limit),
+        page,
+        total: filtered.length,
+      },
+    })
+    return
+  }
+  if (endpoint === 'media:import:commit') {
+    const externalIds = Array.isArray(request.body.externalIds)
+      ? request.body.externalIds
+      : []
+    const imported = []
+    const failed = []
+    for (const externalId of externalIds) {
+      const item = mockImportMedia.find(
+        (candidate) =>
+          candidate.externalId === externalId &&
+          candidate.sourceId === request.body.sourceId,
+      )
+      if (!item) {
+        failed.push({ error: 'import_media_unavailable', externalId })
+        continue
+      }
+      item.imported = true
+      const media = {
+        createdAt: Date.now(),
+        id: Math.max(0, ...mockMedia.map((entry) => Number(entry.id) || 0)) + 1,
+        mediaType: item.mediaType,
+        url: item.url,
+      }
+      mockMedia.unshift(media)
+      imported.push(media)
+    }
+    response.json({ success: true, data: { failed, imported } })
+    return
+  }
+  if (endpoint === 'media:import:url') {
+    const url = String(request.body.url || '').trim()
+    if (!url.startsWith('https://')) {
+      response.json({ success: false, error: 'invalid_import_url' })
+      return
+    }
+    const mediaType = /\.(mp4|webm)(?:[?#]|$)/i.test(url) ? 'video' : 'photo'
+    const media = {
+      createdAt: Date.now(),
+      id: Math.max(0, ...mockMedia.map((entry) => Number(entry.id) || 0)) + 1,
+      mediaType,
+      url,
+    }
+    mockMedia.unshift(media)
+    response.json({ success: true, data: media })
+    return
+  }
   if (endpoint === 'gallery:list') {
     if (request.body.mockState === 'error') {
       response.json({ success: false, error: 'service_unavailable' })
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 9db7931..d623dc5 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1557,10 +1557,26 @@ Locales["en"] = {
                 deleteBody = "This photo or video will be permanently deleted.", deleted = "Media deleted.",
                 zoomIn = "Zoom in", zoomOut = "Zoom out", resetZoom = "Reset zoom",
                 filters = { all = "All", photos = "Photos", videos = "Videos" },
+                import = {
+                    action = "Import", title = "Import", chooseSource = "Choose a website",
+                    linkTitle = "Import from Link", linkBody = "Paste a direct link to an image or video from this website.",
+                    linkLabel = "Image or video link", linkPlaceholder = "https://...", linkCompleted = "Media imported.",
+                    loading = "Loading media...", emptyTitle = "No Media",
+                    emptyBody = "This website has no media of this type.", loadMore = "Load More",
+                    alreadyImported = "Imported", failed = "Failed", completed = "Imported {imported} media.",
+                    partial = "Imported {imported} of {total} media.",
+                },
                 errors = {
                     cancelled = "The media action was cancelled.", capture_failed = "Unable to capture the game view.",
+                    invalid_import_request = "The import request is invalid.", invalid_import_media = "This media item cannot be imported.",
                     invalid_media_type = "The media type is invalid.", invalid_upload = "The upload could not be verified.",
                     invalid_upload_token = "The upload session is no longer valid.", missing_config = "Gallery uploads are not configured.",
+                    import_media_not_allowed = "This media item is not allowed.", import_media_too_large = "This media item is too large.",
+                    import_media_unavailable = "This media item is no longer available.", import_provider_failed = "The website could not load its media.",
+                    import_provider_unauthorized = "The website credentials are invalid.", import_source_not_found = "This website is not registered.",
+                    import_source_unavailable = "This website is temporarily unavailable.",
+                    invalid_import_url = "Enter a valid HTTPS media link.", import_url_not_allowed = "This link is not from the selected website.",
+                    import_url_unavailable = "The linked media could not be reached.", import_size_unavailable = "The website did not provide the media size.",
                     not_found = "The media item no longer exists.", owner_changed = "The active phone account changed.",
                     operation_in_progress = "Another media operation is already in progress.",
                     rate_limited = "Too many media actions. Try again shortly.", request_failed = "The Gallery request failed.",
diff --git a/sky_phone/config/media.lua b/sky_phone/config/media.lua
index 0abfc1a..504570b 100644
--- a/sky_phone/config/media.lua
+++ b/sky_phone/config/media.lua
@@ -10,6 +10,48 @@ Config.Media = {
         RequestTimeoutMs = 10000,
         UploadTimeoutMs = 25000,
     },
+    Import = {
+        Enabled = true,
+        PageSize = 30,
+        MaxSelection = 10,
+        MaxPhotoBytes = 15 * 1024 * 1024,
+        MaxVideoBytes = 150 * 1024 * 1024,
+        RevalidateAfterSeconds = 3600,
+        ListActionsPerMinute = 60,
+        ImportActionsPerMinute = 20,
+        CandidateTtlSeconds = 300,
+        ManifestCacheSeconds = 30,
+        ManifestMaxBytes = 2 * 1024 * 1024,
+        ManifestMaxItems = 5000,
+        Websites = {
+            {
+                Id = "fivemanage",
+                Label = "FiveManage",
+                Enabled = true,
+                Adapter = "fivemanage",
+                Path = "sky_phone/imports",
+                MediaTypes = { "photo", "video" },
+                -- Direct links entered in Gallery must use one of these hosts or a subdomain.
+                AllowedMediaHosts = { "fivemanage.com" },
+            },
+            --[[
+            {
+                Id = "city_media",
+                Label = "City Media",
+                Enabled = true,
+                Adapter = "manifest",
+                ManifestUrl = "https://media.example.com/sky-phone/media.json",
+                MediaTypes = { "photo", "video" },
+                AllowedMediaHosts = { "media.example.com", "cdn.example.com" },
+                Auth = {
+                    Type = "bearer",
+                    TokenConvar = "sky_phone_city_media_token",
+                },
+                RequiredAce = "sky_phone.import.city_media",
+            },
+            ]]
+        },
+    },
     Photo = {
         Encoding = "jpg",
         Quality = 0.95,
diff --git a/sky_phone/fxmanifest.lua b/sky_phone/fxmanifest.lua
index 76b7f45..7cba02f 100644
--- a/sky_phone/fxmanifest.lua
+++ b/sky_phone/fxmanifest.lua
@@ -71,6 +71,9 @@ server_scripts {
     'source/server/sim.lua',
     'source/server/payphones.lua',
     'source/server/calls.lua',
+    'source/server/media_import.lua',
+    'source/server/media_import/fivemanage.lua',
+    'source/server/media_import/manifest.lua',
     'source/server/media.lua',
     'source/server/weazel_news.lua',
     'source/server/messages.lua',
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 8f8d109..f9263d0 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -265,6 +265,10 @@ local server_callbacks = {
     "flare:send",
     "gallery:list",
     "media:config",
+    "media:import:sources",
+    "media:import:list",
+    "media:import:commit",
+    "media:import:url",
 }
 
 local function get_locale()
@@ -637,6 +641,15 @@ for _, callback_name in ipairs(server_callbacks) do
             return
         end
         local result = Bridge.Callbacks.Trigger("sky_phone:" .. callback_name, data)
+        if callback_name:match("^media:import:") and (not result or not result.success) then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] NUI callback '%s' failed: %s.",
+                callback_name,
+                tostring(result and result.error or "no server response"),
+                { always = true }
+            )
+        end
         if type(result) == "table" then
             cb(result)
             return
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index d15efff..d479688 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -378,6 +378,14 @@ local schema = {
             { name = "remote_id", type = "VARCHAR(128) NOT NULL" },
             { name = "media_type", type = "ENUM('photo', 'video') NOT NULL" },
             { name = "mime_type", type = "VARCHAR(120) NULL" },
+            { name = "origin", type = "ENUM('phone_upload', 'website_import') NOT NULL DEFAULT 'phone_upload'" },
+            {
+                name = "source_id",
+                type = "VARCHAR(64) NULL",
+                characterSet = "ascii",
+                collation = "ascii_bin",
+            },
+            { name = "verified_at", type = "DATETIME NULL" },
             { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
         },
         primaryKey = "id",
@@ -2603,4 +2611,16 @@ Bridge.Database.EnsureIndex("sky_phone_devices", "uniq_sky_phone_devices_sim", "
 Bridge.Database.Query("UPDATE `sky_phone_contacts` SET `contact_id` = `id` WHERE `contact_id` IS NULL", {})
 Bridge.Database.EnsureIndex("sky_phone_contacts", "uniq_sky_phone_contacts_account_contact", "(`account_id`, `contact_id`)", { unique = true })
 Bridge.Database.EnsureIndex("sky_phone_contacts", "uniq_sky_phone_contacts_device_contact", "(`device_imei`, `contact_id`)", { unique = true })
+Bridge.Database.EnsureIndex(
+    "sky_phone_media",
+    "uniq_sky_phone_media_account_source",
+    "(`account_id`, `source_id`, `remote_id`, `origin`)",
+    { unique = true }
+)
+Bridge.Database.EnsureIndex(
+    "sky_phone_media",
+    "uniq_sky_phone_media_device_source",
+    "(`device_imei`, `source_id`, `remote_id`, `origin`)",
+    { unique = true }
+)
 Bridge.Database.CompleteMigration("sky_phone")
diff --git a/sky_phone/source/server/media.lua b/sky_phone/source/server/media.lua
index b7418da..f6898f0 100644
--- a/sky_phone/source/server/media.lua
+++ b/sky_phone/source/server/media.lua
@@ -1,5 +1,6 @@
 Bridge.Database.AfterMigration("sky_phone", function()
 SkyPhoneMedia = {}
+SkyPhoneMediaImport.Initialize()
 
 local pending_uploads = {}
 local pending_deletes = {}
@@ -76,7 +77,7 @@ local function request_presigned_url()
     if not api_configured() then
         return nil, "missing_config"
     end
-    local config = media_config()
+    local config = Config.Media.FiveManage
     local response = http_request(
         tostring(config.BaseUrl):gsub("/+$", "") .. "/presigned-url",
         "GET",
@@ -99,9 +100,12 @@ local function get_remote_file(remote_id)
     if not api_configured() then
         return nil, "missing_config"
     end
-    local config = media_config()
+    local config = Config.Media.FiveManage
     local response = http_request(
-        ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
+        ("%s/%s"):format(
+            tostring(config.BaseUrl):gsub("/+$", ""),
+            SkyPhoneMediaImport.UrlEncode(remote_id)
+        ),
         "GET",
         "",
         { ["Authorization"] = media_api_key() },
@@ -114,9 +118,12 @@ local function delete_remote_file(remote_id)
     if not api_configured() then
         return false, "missing_config"
     end
-    local config = media_config()
+    local config = Config.Media.FiveManage
     local response = http_request(
-        ("%s/%s"):format(tostring(config.BaseUrl):gsub("/+$", ""), remote_id),
+        ("%s/%s"):format(
+            tostring(config.BaseUrl):gsub("/+$", ""),
+            SkyPhoneMediaImport.UrlEncode(remote_id)
+        ),
         "DELETE",
         "",
         { ["Authorization"] = media_api_key() },
@@ -171,7 +178,9 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         params[#params + 1] = value
     end
     local rows = Bridge.Database.Query(([[
-        SELECT `url`, `media_type`, `mime_type` FROM `sky_phone_media`
+        SELECT `url`, `media_type`, `mime_type`, `origin`, `source_id`, `remote_id`,
+            UNIX_TIMESTAMP(`verified_at`) AS `verified_at`
+        FROM `sky_phone_media`
         WHERE `id` = ? AND %s
         LIMIT 1
     ]]):format(condition), params)
@@ -190,6 +199,34 @@ function SkyPhoneMedia.ResolveOwnedMedia(source, media_id, media_type)
         )
         return nil, "invalid_attachment"
     end
+    if media.origin == "website_import" then
+        local verified_at = tonumber(media.verified_at) or 0
+        local revalidate_after = math.max(
+            1,
+            math.floor(tonumber(Config.Media.Import.RevalidateAfterSeconds) or 3600)
+        )
+        if os.time() - verified_at >= revalidate_after then
+            local refreshed, refresh_error
+            if type(media.remote_id) == "string" and media.remote_id:sub(1, 4) == "url:" then
+                refreshed, refresh_error = SkyPhoneMediaImport.ResolveUrl(media.source_id, media.url)
+            else
+                refreshed, refresh_error = SkyPhoneMediaImport.Resolve(media.source_id, media.remote_id)
+            end
+            if not refreshed then
+                return nil, refresh_error
+            end
+            if refreshed.mediaType ~= media_type then
+                return nil, "import_media_not_allowed"
+            end
+            Bridge.Database.Query([[
+                UPDATE `sky_phone_media`
+                SET `url` = ?, `mime_type` = ?, `verified_at` = CURRENT_TIMESTAMP
+                WHERE `id` = ? AND `origin` = 'website_import'
+            ]], { refreshed.url, refreshed.mimeType, id })
+            media.url = refreshed.url
+            media.mime_type = refreshed.mimeType
+        end
+    end
     return media.url, nil, media.mime_type
 end
 
@@ -499,7 +536,7 @@ RegisterNetEvent("sky_phone:media:request-upload", function(data)
         photo = Config.Media.Photo,
         presignedUrl = presigned_url,
         requestId = request_id,
-        uploadTimeoutMs = media_config().UploadTimeoutMs,
+        uploadTimeoutMs = Config.Media.FiveManage.UploadTimeoutMs,
         video = Config.Media.Video,
     })
 end)
@@ -604,7 +641,7 @@ RegisterNetEvent("sky_phone:media:delete", function(data)
         query_params[#query_params + 1] = value
     end
     local rows = Bridge.Database.Query(([[
-        SELECT `id`, `remote_id` FROM `sky_phone_media`
+        SELECT `id`, `remote_id`, `origin` FROM `sky_phone_media`
         WHERE `id` = ? AND %s LIMIT 1
     ]]):format(condition), query_params)
     local row = rows[1]
@@ -612,32 +649,35 @@ RegisterNetEvent("sky_phone:media:delete", function(data)
         delete_result(src, correlation_id, false, "not_found", media_id)
         return
     end
-    if pending_deletes[row.remote_id] then
+    local delete_key = row.origin == "phone_upload" and row.remote_id or ("import:%s"):format(media_id)
+    if pending_deletes[delete_key] then
         delete_result(src, correlation_id, false, "operation_in_progress", media_id)
         return
     end
-    pending_deletes[row.remote_id] = src
-    local references = Bridge.Database.Query(
-        "SELECT COUNT(*) AS `count` FROM `sky_phone_media` WHERE `remote_id` = ?",
-        { row.remote_id }
-    )
-    if (tonumber(references[1] and references[1].count) or 0) <= 1 then
-        local deleted, delete_error = delete_remote_file(row.remote_id)
-        if not deleted then
-            pending_deletes[row.remote_id] = nil
-            delete_result(src, correlation_id, false, delete_error, media_id)
-            return
+    pending_deletes[delete_key] = src
+    if row.origin == "phone_upload" then
+        local references = Bridge.Database.Query(
+            "SELECT COUNT(*) AS `count` FROM `sky_phone_media` WHERE `remote_id` = ?",
+            { row.remote_id }
+        )
+        if (tonumber(references[1] and references[1].count) or 0) <= 1 then
+            local deleted, delete_error = delete_remote_file(row.remote_id)
+            if not deleted then
+                pending_deletes[delete_key] = nil
+                delete_result(src, correlation_id, false, delete_error, media_id)
+                return
+            end
         end
     end
     Bridge.Database.Query(("DELETE FROM `sky_phone_media` WHERE `id` = ? AND %s"):format(condition), query_params)
-    pending_deletes[row.remote_id] = nil
+    pending_deletes[delete_key] = nil
     delete_result(src, correlation_id, true, nil, media_id)
 end)
 
 function SkyPhoneMedia.GetDeviceRemoteIds(imei)
     local rows = Bridge.Database.Query([[
         SELECT `id`, `remote_id` FROM `sky_phone_media`
-        WHERE `account_id` IS NULL AND `device_imei` = ?
+        WHERE `account_id` IS NULL AND `device_imei` = ? AND `origin` = 'phone_upload'
     ]], { imei })
     return rows
 end
@@ -678,7 +718,7 @@ AddEventHandler("playerDropped", function()
 end)
 
 if not api_configured() then
-    print(("^3[sky_phone] Camera and Gallery uploads are disabled until the %s server convar is set.^7")
+    print(("^3[sky_phone] Camera uploads and FiveManage imports are disabled until the %s server convar is set.^7")
         :format(tostring(media_config().ApiKeyConvar)))
 end
 end)
diff --git a/sky_phone/source/server/media_import.lua b/sky_phone/source/server/media_import.lua
new file mode 100644
index 0000000..d422847
--- /dev/null
+++ b/sky_phone/source/server/media_import.lua
@@ -0,0 +1,746 @@
+SkyPhoneMediaImport = {}
+
+local adapters = {}
+local websites = {}
+local import_candidates = {}
+local initialized = false
+local media_types_by_mime = {
+    ["image/gif"] = "photo",
+    ["image/jpeg"] = "photo",
+    ["image/png"] = "photo",
+    ["image/webp"] = "photo",
+    ["video/mp4"] = "video",
+    ["video/quicktime"] = "video",
+    ["video/webm"] = "video",
+}
+
+local function session_owner(source)
+    local session, error_response = SkyPhone.RequireSession(source)
+    if not session then
+        return nil, error_response
+    end
+
+    local device = SkyPhone.LoadDevice(session.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 = session.imei,
+    }
+end
+
+local function owner_condition(owner)
+    if owner.account_id then
+        return "`account_id` = ?", { owner.account_id }
+    end
+
+    return "`account_id` IS NULL AND `device_imei` = ?", { owner.imei }
+end
+
+local function valid_source_id(value)
+    return type(value) == "string"
+        and #value >= 1
+        and #value <= 64
+        and value:match("^[a-z0-9_%-]+$") ~= nil
+end
+
+local function valid_external_id(value)
+    return type(value) == "string"
+        and #value >= 1
+        and #value <= 128
+        and value:match("^[%w_.:%-]+$") ~= nil
+end
+
+local function website_accessible(source, website)
+    return not website.RequiredAce or website.RequiredAce == "" or IsPlayerAceAllowed(source, website.RequiredAce)
+end
+
+local function media_type_set(values)
+    local allowed = {}
+    if type(values) ~= "table" then
+        return allowed
+    end
+
+    for _, value in ipairs(values) do
+        if value == "photo" or value == "video" then
+            allowed[value] = true
+        end
+    end
+    return allowed
+end
+
+local function url_host(value)
+    if type(value) ~= "string" or #value > Config.Media.UrlMaxLength or value:find("%c") then
+        return nil
+    end
+
+    local authority = value:match("^https://([^/%?#]+)")
+    if not authority or authority:find("@", 1, true) then
+        return nil
+    end
+
+    local host = authority:match("^([^:]+)")
+    return host and host:lower() or nil
+end
+
+function SkyPhoneMediaImport.ResponseHeader(headers, name)
+    if type(headers) ~= "table" then
+        return nil
+    end
+    local requested_name = name:lower()
+    for header_name, value in pairs(headers) do
+        if type(header_name) == "string" and header_name:lower() == requested_name then
+            if type(value) == "table" then
+                return value[1]
+            end
+            return value
+        end
+    end
+    return nil
+end
+
+local function allowed_host(website, host)
+    for _, configured_host in ipairs(website.AllowedMediaHosts) do
+        local candidate = type(configured_host) == "string" and configured_host:lower():gsub("^%.", "") or ""
+        if candidate ~= "" and (host == candidate or host:sub(-#candidate - 1) == "." .. candidate) then
+            return true
+        end
+    end
+    return false
+end
+
+local function normalize_media(website, item)
+    if type(item) ~= "table" or not valid_external_id(item.externalId) then
+        return nil, "invalid_import_media"
+    end
+
+    local media_type = item.mediaType
+    if not website._media_types[media_type] then
+        return nil, "import_media_not_allowed"
+    end
+
+    local mime_type = type(item.mimeType) == "string"
+        and item.mimeType:lower():match("^%s*([^;%s]+)") or nil
+    if not mime_type or media_types_by_mime[mime_type] ~= media_type then
+        local path = type(item.url) == "string" and item.url:match("^https://[^/]+(/[^?#]*)") or nil
+        local extension = path and path:match("%.([%w]+)$") or nil
+        local mime_by_extension = {
+            gif = "image/gif",
+            jpeg = "image/jpeg",
+            jpg = "image/jpeg",
+            mov = "video/quicktime",
+            mp4 = "video/mp4",
+            png = "image/png",
+            webm = "video/webm",
+            webp = "image/webp",
+        }
+        mime_type = extension and mime_by_extension[extension:lower()] or nil
+    end
+
+    local size = tonumber(item.size)
+    if not size or size <= 0 or size ~= math.floor(size) then
+        return nil, "invalid_import_media"
+    end
+
+    local size_limit = media_type == "photo"
+        and tonumber(Config.Media.Import.MaxPhotoBytes)
+        or tonumber(Config.Media.Import.MaxVideoBytes)
+    if not size_limit or size > size_limit then
+        return nil, "import_media_too_large"
+    end
+
+    local host = url_host(item.url)
+    if not host or not allowed_host(website, host) then
+        return nil, "import_media_not_allowed"
+    end
+
+    local filename = type(item.filename) == "string" and item.filename:match("^%s*(.-)%s*$") or ""
+    if filename == "" then
+        filename = item.externalId
+    elseif #filename > 160 then
+        filename = filename:sub(1, 160)
+    end
+
+    return {
+        externalId = item.externalId,
+        filename = filename,
+        mediaType = media_type,
+        mimeType = mime_type,
+        size = size,
+        sourceId = website.Id,
+        url = item.url,
+    }
+end
+
+local function remember_candidate(source, media)
+    local expires_at = os.time() + math.max(
+        30,
+        math.floor(tonumber(Config.Media.Import.CandidateTtlSeconds) or 300)
+    )
+    import_candidates[source] = import_candidates[source] or {}
+    import_candidates[source][media.sourceId] = import_candidates[source][media.sourceId] or {}
+    import_candidates[source][media.sourceId][media.externalId] = expires_at
+end
+
+local function candidate_allowed(source, source_id, external_id)
+    local by_source = import_candidates[source] and import_candidates[source][source_id]
+    local expires_at = by_source and by_source[external_id]
+    if not expires_at or expires_at < os.time() then
+        if by_source then
+            by_source[external_id] = nil
+        end
+        return false
+    end
+    return true
+end
+
+local function validate_website(definition)
+    if type(definition) ~= "table"
+        or definition.Enabled == false
+        or not valid_source_id(definition.Id)
+        or type(definition.Label) ~= "string"
+        or definition.Label == ""
+        or #definition.Label > 64
+        or type(definition.Adapter) ~= "string"
+    then
+        return nil, "invalid_definition"
+    end
+
+    local adapter = adapters[definition.Adapter]
+    if not adapter then
+        return nil, "unknown_adapter"
+    end
+
+    if type(definition.AllowedMediaHosts) ~= "table" or #definition.AllowedMediaHosts < 1 then
+        return nil, "missing_allowed_hosts"
+    end
+
+    local allowed_media_types = media_type_set(definition.MediaTypes)
+    if not allowed_media_types.photo and not allowed_media_types.video then
+        return nil, "missing_media_types"
+    end
+
+    if definition.RequiredAce ~= nil and type(definition.RequiredAce) ~= "string" then
+        return nil, "invalid_required_ace"
+    end
+
+    definition._adapter = adapter
+    definition._media_types = allowed_media_types
+    local valid, validation_error = adapter.Validate(definition)
+    if not valid then
+        return nil, validation_error
+    end
+
+    return definition
+end
+
+local function build_registry()
+    websites = {}
+    local config = Config.Media.Import
+    if not config.Enabled then
+        return
+    end
+
+    for index, definition in ipairs(config.Websites or {}) do
+        local website, website_error = validate_website(definition)
+        if website then
+            if websites[website.Id] then
+                error(("[sky_phone] Duplicate media import website id '%s'."):format(website.Id))
+            end
+            websites[website.Id] = website
+        else
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Media import website at index %s was disabled: %s.",
+                tostring(index),
+                tostring(website_error)
+            )
+        end
+    end
+end
+
+local function find_imported(owner, source_id, items)
+    if #items == 0 then
+        return
+    end
+
+    local condition, params = owner_condition(owner)
+    params[#params + 1] = source_id
+    local placeholders = {}
+    for index, item in ipairs(items) do
+        placeholders[index] = "?"
+        params[#params + 1] = item.externalId
+    end
+
+    local rows = Bridge.Database.Query(([[
+        SELECT `remote_id` FROM `sky_phone_media`
+        WHERE %s AND `origin` = 'website_import' AND `source_id` = ?
+            AND `remote_id` IN (%s)
+    ]]):format(condition, table.concat(placeholders, ", ")), params)
+    local imported = {}
+    for _, row in ipairs(rows) do
+        imported[row.remote_id] = true
+    end
+    for _, item in ipairs(items) do
+        item.imported = imported[item.externalId] or false
+    end
+end
+
+local function select_owned_import(owner, source_id, remote_id)
+    local condition, params = owner_condition(owner)
+    params[#params + 1] = source_id
+    params[#params + 1] = remote_id
+    local rows = Bridge.Database.Query(([[
+        SELECT `id`, `url`, `media_type` AS `mediaType`, `mime_type` AS `mimeType`,
+            UNIX_TIMESTAMP(`created_at`) * 1000 AS `createdAt`
+        FROM `sky_phone_media`
+        WHERE %s AND `origin` = 'website_import'
+            AND `source_id` = ? AND `remote_id` = ?
+        LIMIT 1
+    ]]):format(condition), params)
+    local row = rows[1]
+    if row then
+        row.id = tonumber(row.id)
+        row.createdAt = tonumber(row.createdAt) or 0
+    end
+    return row
+end
+
+local function store_import(owner, media)
+    local existing = select_owned_import(owner, media.sourceId, media.externalId)
+    if existing then
+        Bridge.Database.Query([[
+            UPDATE `sky_phone_media`
+            SET `url` = ?, `media_type` = ?, `mime_type` = ?, `verified_at` = CURRENT_TIMESTAMP
+            WHERE `id` = ?
+        ]], { media.url, media.mediaType, media.mimeType, existing.id })
+        existing.url = media.url
+        existing.mediaType = media.mediaType
+        existing.mimeType = media.mimeType
+        return existing
+    end
+
+    local result
+    if owner.account_id then
+        result = Bridge.Database.Query([[
+            INSERT IGNORE INTO `sky_phone_media`
+                (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `mime_type`, `origin`, `source_id`, `verified_at`)
+            VALUES (?, NULL, ?, ?, ?, ?, 'website_import', ?, CURRENT_TIMESTAMP)
+        ]], { owner.account_id, media.url, media.externalId, media.mediaType, media.mimeType, media.sourceId })
+    else
+        result = Bridge.Database.Query([[
+            INSERT IGNORE INTO `sky_phone_media`
+                (`account_id`, `device_imei`, `url`, `remote_id`, `media_type`, `mime_type`, `origin`, `source_id`, `verified_at`)
+            VALUES (NULL, ?, ?, ?, ?, ?, 'website_import', ?, CURRENT_TIMESTAMP)
+        ]], { owner.imei, media.url, media.externalId, media.mediaType, media.mimeType, media.sourceId })
+    end
+
+    local media_id = type(result) == "number" and result or (type(result) == "table" and tonumber(result.insertId))
+    if media_id and media_id < 1 then
+        media_id = nil
+    end
+    if not media_id then
+        local concurrent = select_owned_import(owner, media.sourceId, media.externalId)
+        if concurrent then
+            return concurrent
+        end
+        return nil, "request_failed"
+    end
+
+    return {
+        createdAt = os.time() * 1000,
+        id = media_id,
+        mediaType = media.mediaType,
+        url = media.url,
+    }
+end
+
+function SkyPhoneMediaImport.RegisterAdapter(name, adapter)
+    assert(type(name) == "string" and name ~= "", "Media import adapter name must be a string")
+    assert(type(adapter) == "table", "Media import adapter must be a table")
+    assert(type(adapter.Validate) == "function", "Media import adapter requires Validate")
+    assert(type(adapter.List) == "function", "Media import adapter requires List")
+    assert(type(adapter.Resolve) == "function", "Media import adapter requires Resolve")
+    assert(not adapters[name], ("Media import adapter '%s' is already registered"):format(name))
+    adapters[name] = adapter
+end
+
+function SkyPhoneMediaImport.HttpRequest(url, headers, timeout_ms, method)
+    local request = promise.new()
+    local settled = false
+    local request_method = method or "GET"
+    local request_host = url_host(url) or "invalid-host"
+    PerformHttpRequest(url, function(status, response_body, response_headers, error_data)
+        if settled then
+            return
+        end
+        settled = true
+        local response_status = tonumber(status) or 0
+        if response_status == 0 then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Media import HTTP %s request to '%s' failed: %s.",
+                request_method,
+                request_host,
+                tostring(error_data or "unknown transport error"),
+                { always = true }
+            )
+        elseif response_status >= 400 then
+            Bridge.Debug(
+                "debug",
+                "[sky_phone] Media import HTTP %s request to '%s' returned status %s.",
+                request_method,
+                request_host,
+                tostring(response_status)
+            )
+        end
+        request:resolve({
+            body = response_body or "",
+            error = error_data,
+            headers = response_headers or {},
+            status = response_status,
+        })
+    end, request_method, "", headers or {}, { followLocation = false })
+    SetTimeout(timeout_ms, function()
+        if settled then
+            return
+        end
+        settled = true
+        Bridge.Debug(
+            "warn",
+            "[sky_phone] Media import HTTP %s request to '%s' timed out after %s ms.",
+            request_method,
+            request_host,
+            tostring(timeout_ms),
+            { always = true }
+        )
+        request:resolve({ body = "", error = "request timeout", headers = {}, status = 0 })
+    end)
+    return Citizen.Await(request)
+end
+
+function SkyPhoneMediaImport.ResolveUrl(source_id, url)
+    if not initialized or not valid_source_id(source_id) or type(url) ~= "string" then
+        return nil, "invalid_import_url"
+    end
+
+    local website = websites[source_id]
+    local trimmed_url = url:match("^%s*(.-)%s*$")
+    local host = website and url_host(trimmed_url) or nil
+    if not website or not host or not allowed_host(website, host) then
+        return nil, "import_url_not_allowed"
+    end
+
+    if type(website._adapter.ResolveUrl) == "function" then
+        local item, resolve_error = website._adapter.ResolveUrl(website, trimmed_url)
+        if not item then
+            return nil, resolve_error
+        end
+        return normalize_media(website, item)
+    end
+
+    local response = SkyPhoneMediaImport.HttpRequest(
+        trimmed_url,
+        {},
+        tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000,
+        "HEAD"
+    )
+    if response.status == 0 then
+        return nil, "import_source_unavailable"
+    end
+    if response.status < 200 or response.status >= 300 then
+        return nil, "import_url_unavailable"
+    end
+
+    local content_type = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-type")
+    content_type = type(content_type) == "string" and content_type:lower():match("^%s*([^;%s]+)") or nil
+    local media_type = content_type and media_types_by_mime[content_type] or nil
+    if not media_type or not website._media_types[media_type] then
+        return nil, "import_media_not_allowed"
+    end
+
+    local content_length = tonumber(SkyPhoneMediaImport.ResponseHeader(response.headers, "content-length"))
+    if not content_length or content_length <= 0 or content_length ~= math.floor(content_length) then
+        return nil, "import_size_unavailable"
+    end
+
+    local external_id = ("url:%08x%08x"):format(
+        joaat(trimmed_url) & 0xffffffff,
+        joaat("sky_phone:" .. trimmed_url) & 0xffffffff
+    )
+    local url_path = trimmed_url:match("^https://[^/]+(/[^?#]*)") or ""
+    return normalize_media(website, {
+        externalId = external_id,
+        filename = url_path:match("/([^/]+)$") or external_id,
+        mediaType = media_type,
+        mimeType = content_type,
+        size = content_length,
+        url = trimmed_url,
+    })
+end
+
+function SkyPhoneMediaImport.UrlEncode(value)
+    return tostring(value):gsub("\n", "\r\n"):gsub("([^%w%-_%.~])", function(character)
+        return ("%%%02X"):format(character:byte())
+    end)
+end
+
+function SkyPhoneMediaImport.Resolve(source_id, external_id)
+    if not initialized or not valid_source_id(source_id) or not valid_external_id(external_id) then
+        return nil, "import_source_unavailable"
+    end
+
+    local website = websites[source_id]
+    if not website then
+        return nil, "import_source_unavailable"
+    end
+
+    local item, resolve_error = website._adapter.Resolve(website, external_id)
+    if not item then
+        return nil, resolve_error
+    end
+
+    return normalize_media(website, item)
+end
+
+function SkyPhoneMediaImport.Initialize()
+    assert(not initialized, "Media import was initialized more than once")
+    build_registry()
+    initialized = true
+
+    Bridge.Callbacks.Register("sky_phone:media:import:sources", function(source)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+
+        local sources = {}
+        for _, website in pairs(websites) do
+            if website_accessible(source, website) then
+                local media_types = {}
+                if website._media_types.photo then
+                    media_types[#media_types + 1] = "photo"
+                end
+                if website._media_types.video then
+                    media_types[#media_types + 1] = "video"
+                end
+                sources[#sources + 1] = {
+                    id = website.Id,
+                    label = website.Label,
+                    mediaTypes = media_types,
+                }
+            end
+        end
+        table.sort(sources, function(left, right)
+            return left.label:lower() < right.label:lower()
+        end)
+        return {
+            success = true,
+            data = {
+                maxSelection = math.max(1, math.floor(tonumber(Config.Media.Import.MaxSelection) or 1)),
+                sources = sources,
+            },
+        }
+    end)
+
+    Bridge.Callbacks.Register("sky_phone:media:import:list", function(source, data)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+        if not SkyPhone.AllowOperation(
+            source,
+            "media_import_list",
+            tonumber(Config.Media.Import.ListActionsPerMinute) or 60,
+            60
+        ) then
+            return { success = false, error = "rate_limited" }
+        end
+
+        data = type(data) == "table" and data or {}
+        local website = valid_source_id(data.sourceId) and websites[data.sourceId] or nil
+        local media_type = data.mediaType
+        local page = math.floor(tonumber(data.page) or 1)
+        if not website or not website_accessible(source, website) then
+            return { success = false, error = "import_source_not_found" }
+        end
+        if not website._media_types[media_type] or page < 1 or page > 10000 then
+            return { success = false, error = "invalid_import_request" }
+        end
+
+        local limit = math.max(1, math.min(math.floor(tonumber(Config.Media.Import.PageSize) or 30), 100))
+        local result, list_error = website._adapter.List(website, media_type, page, limit)
+        if not result then
+            return { success = false, error = list_error }
+        end
+        if type(result) ~= "table" or type(result.items) ~= "table" then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Import source '%s' returned an invalid list response.",
+                website.Id
+            )
+            return { success = false, error = "import_provider_failed" }
+        end
+
+        local items = {}
+        for _, item in ipairs(result.items) do
+            local normalized, normalize_error = normalize_media(website, item)
+            if normalized then
+                items[#items + 1] = normalized
+                remember_candidate(source, normalized)
+            else
+                Bridge.Debug(
+                    "warn",
+                    "[sky_phone] Rejected media '%s' from import source '%s': %s.",
+                    tostring(item.externalId),
+                    website.Id,
+                    tostring(normalize_error)
+                )
+            end
+        end
+        find_imported(owner, website.Id, items)
+        return {
+            success = true,
+            data = {
+                hasMore = result.hasMore == true,
+                items = items,
+                page = page,
+                total = math.max(0, math.floor(tonumber(result.total) or #items)),
+            },
+        }
+    end)
+
+    Bridge.Callbacks.Register("sky_phone:media:import:commit", function(source, data)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+        if not SkyPhone.AllowOperation(
+            source,
+            "media_import_commit",
+            tonumber(Config.Media.Import.ImportActionsPerMinute) or 20,
+            60
+        ) then
+            return { success = false, error = "rate_limited" }
+        end
+
+        data = type(data) == "table" and data or {}
+        local website = valid_source_id(data.sourceId) and websites[data.sourceId] or nil
+        if not website or not website_accessible(source, website) then
+            return { success = false, error = "import_source_not_found" }
+        end
+        if type(data.externalIds) ~= "table" then
+            return { success = false, error = "invalid_import_request" }
+        end
+
+        local maximum = math.max(1, math.floor(tonumber(Config.Media.Import.MaxSelection) or 1))
+        if #data.externalIds < 1 or #data.externalIds > maximum then
+            return { success = false, error = "invalid_import_request" }
+        end
+
+        local unique_ids = {}
+        local requested_ids = {}
+        for _, external_id in ipairs(data.externalIds) do
+            if not valid_external_id(external_id) or unique_ids[external_id] then
+                return { success = false, error = "invalid_import_request" }
+            end
+            if not candidate_allowed(source, website.Id, external_id) then
+                return { success = false, error = "invalid_import_request" }
+            end
+            unique_ids[external_id] = true
+            requested_ids[#requested_ids + 1] = external_id
+        end
+
+        local imported = {}
+        local failed = {}
+        for _, external_id in ipairs(requested_ids) do
+            local item, resolve_error = website._adapter.Resolve(website, external_id)
+            local normalized, normalize_error
+            if item then
+                normalized, normalize_error = normalize_media(website, item)
+            end
+            if not normalized then
+                failed[#failed + 1] = {
+                    error = resolve_error or normalize_error or "import_provider_failed",
+                    externalId = external_id,
+                }
+            else
+                local stored, store_error = store_import(owner, normalized)
+                if stored then
+                    imported[#imported + 1] = stored
+                else
+                    failed[#failed + 1] = {
+                        error = store_error or "request_failed",
+                        externalId = external_id,
+                    }
+                end
+            end
+        end
+
+        return {
+            success = true,
+            data = {
+                failed = failed,
+                imported = imported,
+            },
+        }
+    end)
+
+    Bridge.Callbacks.Register("sky_phone:media:import:url", function(source, data)
+        local owner, error_response = session_owner(source)
+        if not owner then
+            return error_response
+        end
+        if not SkyPhone.AllowOperation(
+            source,
+            "media_import_url",
+            tonumber(Config.Media.Import.ImportActionsPerMinute) or 20,
+            60
+        ) then
+            return { success = false, error = "rate_limited" }
+        end
+
+        data = type(data) == "table" and data or {}
+        local website = valid_source_id(data.sourceId) and websites[data.sourceId] or nil
+        if not website or not website_accessible(source, website) then
+            return { success = false, error = "import_source_not_found" }
+        end
+        if type(data.url) ~= "string" or #data.url < 1 or #data.url > Config.Media.UrlMaxLength then
+            return { success = false, error = "invalid_import_url" }
+        end
+
+        local normalized, resolve_error = SkyPhoneMediaImport.ResolveUrl(website.Id, data.url)
+        if not normalized then
+            Bridge.Debug(
+                "warn",
+                "[sky_phone] Media URL import failed for player %s, source '%s', host '%s': %s.",
+                tostring(source),
+                website.Id,
+                tostring(url_host(data.url) or "invalid-host"),
+                tostring(resolve_error),
+                { always = true }
+            )
+            return { success = false, error = resolve_error }
+        end
+        Bridge.Debug(
+            "debug",
+            "[sky_phone] Media URL import resolved for player %s via source '%s' as %s '%s' (%s bytes).",
+            tostring(source),
+            website.Id,
+            normalized.mediaType,
+            normalized.externalId,
+            tostring(normalized.size)
+        )
+        local stored, store_error = store_import(owner, normalized)
+        if not stored then
+            return { success = false, error = store_error or "request_failed" }
+        end
+        return { success = true, data = stored }
+    end)
+
+    AddEventHandler("playerDropped", function()
+        import_candidates[source] = nil
+    end)
+end
diff --git a/sky_phone/source/server/media_import/fivemanage.lua b/sky_phone/source/server/media_import/fivemanage.lua
new file mode 100644
index 0000000..4168dc9
--- /dev/null
+++ b/sky_phone/source/server/media_import/fivemanage.lua
@@ -0,0 +1,240 @@
+local function api_key(website)
+    local convar = website.ApiKeyConvar or Config.Media.FiveManage.ApiKeyConvar
+    if type(convar) ~= "string" or convar == "" then
+        return ""
+    end
+    return GetConvar(convar, "")
+end
+
+local function provider_error(response, not_found_error)
+    if response.status == 0 then
+        return "import_source_unavailable"
+    end
+    if response.status == 401 or response.status == 403 then
+        return "import_provider_unauthorized"
+    end
+    if response.status == 404 and not_found_error then
+        return not_found_error
+    end
+    return "import_provider_failed"
+end
+
+local function decode_response(response, not_found_error)
+    if type(response) ~= "table" or response.status < 200 or response.status >= 300 then
+        return nil, provider_error(response or { status = 0 }, not_found_error)
+    end
+
+    local success, decoded = pcall(json.decode, response.body or "")
+    if not success or type(decoded) ~= "table" then
+        return nil, "import_provider_failed"
+    end
+    return decoded
+end
+
+local function media_type(value)
+    local normalized = type(value) == "string" and value:lower() or ""
+    if normalized == "image" or normalized:find("image/", 1, true) == 1 then
+        return "photo"
+    end
+    if normalized == "video" or normalized:find("video/", 1, true) == 1 then
+        return "video"
+    end
+    return nil
+end
+
+local media_extensions = {
+    gif = true,
+    jpeg = true,
+    jpg = true,
+    mov = true,
+    mp4 = true,
+    png = true,
+    webm = true,
+    webp = true,
+}
+
+local function public_file_id(url)
+    local path = type(url) == "string" and url:match("^https://[^/%?#]+(/[^?#]*)") or nil
+    local segment = path and path:match("/([^/]+)$") or nil
+    if not segment or segment == "" or segment:find("%", 1, true) then
+        return nil
+    end
+
+    local extension = segment:match("%.([%w]+)$")
+    if extension and media_extensions[extension:lower()] then
+        segment = segment:sub(1, -#extension - 2)
+    end
+    if #segment < 1 or #segment > 128 or not segment:match("^[%w_%-]+$") then
+        return nil
+    end
+    return segment
+end
+
+local function normalize_file(file)
+    if type(file) ~= "table" then
+        return {}
+    end
+    return {
+        externalId = file.id,
+        filename = file.filename,
+        mediaType = media_type(file.type or file.mimeType),
+        mimeType = file.mimeType or file.type,
+        size = file.size,
+        url = file.url,
+    }
+end
+
+local function resolve_file(website, external_id)
+    local provider_url = tostring(website.BaseUrl or Config.Media.FiveManage.BaseUrl):gsub("/+$", "")
+    local response = SkyPhoneMediaImport.HttpRequest(
+        ("%s/%s"):format(provider_url, SkyPhoneMediaImport.UrlEncode(external_id)),
+        { ["Authorization"] = api_key(website) },
+        tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000
+    )
+    local decoded, response_error = decode_response(response, "import_media_unavailable")
+    if not decoded then
+        return nil, response_error
+    end
+
+    local file = type(decoded.data) == "table" and decoded.data or decoded
+    if file.id ~= external_id then
+        return nil, "invalid_import_media"
+    end
+    return normalize_file(file)
+end
+
+local function probe_public_url(website, url)
+    local timeout = tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000
+    local response = SkyPhoneMediaImport.HttpRequest(url, {}, timeout, "HEAD")
+    local content_type = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-type")
+    local content_length = tonumber(SkyPhoneMediaImport.ResponseHeader(response.headers, "content-length"))
+
+    if response.status == 0 or (response.status >= 200 and response.status < 300
+        and (not content_type or not content_length or content_length <= 0))
+    then
+        Bridge.Debug(
+            "debug",
+            "[sky_phone] FiveManage HEAD probe did not provide usable metadata; trying a one-byte range request."
+        )
+        response = SkyPhoneMediaImport.HttpRequest(url, { ["Range"] = "bytes=0-0" }, timeout)
+        content_type = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-type")
+        local content_range = SkyPhoneMediaImport.ResponseHeader(response.headers, "content-range")
+        content_length = type(content_range) == "string" and tonumber(content_range:match("/(%d+)$"))
+            or tonumber(SkyPhoneMediaImport.ResponseHeader(response.headers, "content-length"))
+    end
+
+    if response.status == 0 then
+        return nil, "import_source_unavailable"
+    end
+    if response.status < 200 or response.status >= 300 then
+        Bridge.Debug(
+            "warn",
+            "[sky_phone] FiveManage public URL probe returned HTTP %s.",
+            tostring(response.status),
+            { always = true }
+        )
+        return nil, "import_url_unavailable"
+    end
+
+    local normalized_type = media_type(content_type)
+    if not normalized_type then
+        return nil, "import_media_not_allowed"
+    end
+    if not content_length or content_length <= 0 or content_length ~= math.floor(content_length) then
+        return nil, "import_size_unavailable"
+    end
+
+    local url_path = url:match("^https://[^/]+(/[^?#]*)") or ""
+    local external_id = ("url:%08x%08x"):format(
+        joaat(url) & 0xffffffff,
+        joaat("sky_phone:" .. url) & 0xffffffff
+    )
+    return {
+        externalId = external_id,
+        filename = url_path:match("/([^/]+)$") or external_id,
+        mediaType = normalized_type,
+        mimeType = type(content_type) == "string"
+            and content_type:lower():match("^%s*([^;%s]+)") or nil,
+        size = content_length,
+        url = url,
+    }
+end
+
+SkyPhoneMediaImport.RegisterAdapter("fivemanage", {
+    Validate = function(website)
+        local url = tostring(website.BaseUrl or Config.Media.FiveManage.BaseUrl):gsub("/+$", "")
+        if not url:match("^https://") or #url > Config.Media.UrlMaxLength then
+            return false, "invalid_base_url"
+        end
+        if type(website.Path) ~= "string" or website.Path == "" or #website.Path > 180 then
+            return false, "missing_import_path"
+        end
+        if api_key(website) == "" then
+            return false, "missing_api_key"
+        end
+        return true
+    end,
+
+    List = function(website, requested_type, page, limit)
+        local provider_type = requested_type == "photo" and "image" or "video"
+        local provider_url = tostring(website.BaseUrl or Config.Media.FiveManage.BaseUrl):gsub("/+$", "")
+        local url = ("%s?page=%s&limit=%s&type=%s&path=%s"):format(
+            provider_url,
+            page,
+            limit,
+            provider_type,
+            SkyPhoneMediaImport.UrlEncode(website.Path)
+        )
+        local response = SkyPhoneMediaImport.HttpRequest(
+            url,
+            { ["Authorization"] = api_key(website) },
+            tonumber(website.RequestTimeoutMs or Config.Media.FiveManage.RequestTimeoutMs) or 10000
+        )
+        local decoded, response_error = decode_response(response)
+        if not decoded then
+            return nil, response_error
+        end
+
+        local files = type(decoded.data) == "table" and decoded.data or {}
+        local items = {}
+        for _, file in ipairs(files) do
+            items[#items + 1] = normalize_file(file)
+        end
+        local pagination = type(decoded.pagination) == "table" and decoded.pagination or {}
+        local total = math.max(0, math.floor(tonumber(pagination.total) or #items))
+        local current_page = math.max(1, math.floor(tonumber(pagination.page) or page))
+        local page_limit = math.max(1, math.floor(tonumber(pagination.limit) or limit))
+        return {
+            hasMore = current_page * page_limit < total,
+            items = items,
+            total = total,
+        }
+    end,
+
+    Resolve = resolve_file,
+
+    ResolveUrl = function(website, url)
+        local external_id = public_file_id(url)
+        if external_id then
+            local file, resolve_error = resolve_file(website, external_id)
+            if file then
+                Bridge.Debug(
+                    "debug",
+                    "[sky_phone] FiveManage URL resolved through authenticated metadata for file '%s'.",
+                    external_id
+                )
+                return file
+            end
+            if resolve_error == "import_provider_unauthorized" then
+                return nil, resolve_error
+            end
+            Bridge.Debug(
+                "debug",
+                "[sky_phone] FiveManage metadata lookup for file '%s' failed with '%s'; probing the public URL.",
+                external_id,
+                tostring(resolve_error)
+            )
+        end
+        return probe_public_url(website, url)
+    end,
+})
diff --git a/sky_phone/source/server/media_import/manifest.lua b/sky_phone/source/server/media_import/manifest.lua
new file mode 100644
index 0000000..4b04666
--- /dev/null
+++ b/sky_phone/source/server/media_import/manifest.lua
@@ -0,0 +1,153 @@
+local manifest_cache = {}
+
+local function authentication_headers(website)
+    local auth = website.Auth
+    if not auth or auth.Type == nil or auth.Type == "none" then
+        return {}
+    end
+
+    if auth.Type == "bearer" then
+        return { ["Authorization"] = "Bearer " .. GetConvar(auth.TokenConvar, "") }
+    end
+    return { [auth.Header] = GetConvar(auth.ValueConvar, "") }
+end
+
+local function validate_authentication(auth)
+    if auth == nil then
+        return true
+    end
+    if type(auth) ~= "table" then
+        return false, "invalid_auth"
+    end
+    if auth.Type == nil or auth.Type == "none" then
+        return true
+    end
+    if auth.Type == "bearer" then
+        if type(auth.TokenConvar) ~= "string" or auth.TokenConvar == ""
+            or GetConvar(auth.TokenConvar, "") == ""
+        then
+            return false, "missing_auth_convar"
+        end
+        return true
+    end
+    if auth.Type == "header" then
+        if type(auth.Header) ~= "string" or not auth.Header:match("^[%w%-]+$")
+            or type(auth.ValueConvar) ~= "string" or auth.ValueConvar == ""
+            or GetConvar(auth.ValueConvar, "") == ""
+        then
+            return false, "invalid_header_auth"
+        end
+        return true
+    end
+    return false, "unknown_auth_type"
+end
+
+local function fetch_manifest(website)
+    local now = os.time()
+    local cached = manifest_cache[website.Id]
+    if cached and cached.expires_at > now then
+        return cached.items
+    end
+
+    local response = SkyPhoneMediaImport.HttpRequest(
+        website.ManifestUrl,
+        authentication_headers(website),
+        tonumber(website.RequestTimeoutMs) or 10000
+    )
+    if response.status == 0 then
+        return nil, "import_source_unavailable"
+    end
+    if response.status == 401 or response.status == 403 then
+        return nil, "import_provider_unauthorized"
+    end
+    if response.status < 200 or response.status >= 300 then
+        return nil, "import_provider_failed"
+    end
+
+    local max_bytes = math.max(1024, math.floor(tonumber(Config.Media.Import.ManifestMaxBytes) or 2097152))
+    if #response.body > max_bytes then
+        return nil, "import_provider_failed"
+    end
+
+    local success, decoded = pcall(json.decode, response.body)
+    if not success or type(decoded) ~= "table" or tonumber(decoded.version) ~= 1
+        or type(decoded.items) ~= "table"
+    then
+        return nil, "import_provider_failed"
+    end
+
+    local maximum_items = math.max(1, math.floor(tonumber(Config.Media.Import.ManifestMaxItems) or 5000))
+    if #decoded.items > maximum_items then
+        return nil, "import_provider_failed"
+    end
+
+    local items = {}
+    for _, item in ipairs(decoded.items) do
+        if type(item) == "table" then
+            items[#items + 1] = {
+                externalId = item.id,
+                filename = item.filename,
+                mediaType = item.type,
+                mimeType = item.mimeType,
+                size = item.size,
+                url = item.url,
+            }
+        end
+    end
+    manifest_cache[website.Id] = {
+        expires_at = now + math.max(1, math.floor(tonumber(website.CacheSeconds)
+            or tonumber(Config.Media.Import.ManifestCacheSeconds) or 30)),
+        items = items,
+    }
+    return items
+end
+
+SkyPhoneMediaImport.RegisterAdapter("manifest", {
+    Validate = function(website)
+        if type(website.ManifestUrl) ~= "string"
+            or not website.ManifestUrl:match("^https://")
+            or #website.ManifestUrl > Config.Media.UrlMaxLength
+        then
+            return false, "invalid_manifest_url"
+        end
+        return validate_authentication(website.Auth)
+    end,
+
+    List = function(website, requested_type, page, limit)
+        local manifest, manifest_error = fetch_manifest(website)
+        if not manifest then
+            return nil, manifest_error
+        end
+
+        local matching = {}
+        for _, item in ipairs(manifest) do
+            if item.mediaType == requested_type then
+                matching[#matching + 1] = item
+            end
+        end
+        local first = (page - 1) * limit + 1
+        local last = math.min(#matching, first + limit - 1)
+        local items = {}
+        for index = first, last do
+            items[#items + 1] = matching[index]
+        end
+        return {
+            hasMore = last < #matching,
+            items = items,
+            total = #matching,
+        }
+    end,
+
+    Resolve = function(website, external_id)
+        local manifest, manifest_error = fetch_manifest(website)
+        if not manifest then
+            return nil, manifest_error
+        end
+        for _, item in ipairs(manifest) do
+            if item.externalId == external_id then
+                return item
+            end
+        end
+        return nil, "import_media_unavailable"
+    end,
+})
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index a269887..d39dc52 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -153,8 +153,14 @@ CREATE TABLE IF NOT EXISTS `sky_phone_media` (
     `url` TEXT NOT NULL,
     `remote_id` VARCHAR(128) NOT NULL,
     `media_type` ENUM('photo', 'video') NOT NULL,
+    `mime_type` VARCHAR(120) NULL,
+    `origin` ENUM('phone_upload', 'website_import') NOT NULL DEFAULT 'phone_upload',
+    `source_id` VARCHAR(64) CHARACTER SET ascii COLLATE ascii_bin NULL,
+    `verified_at` DATETIME NULL,
     `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`),
+    UNIQUE KEY `uniq_sky_phone_media_account_source` (`account_id`, `source_id`, `remote_id`, `origin`),
+    UNIQUE KEY `uniq_sky_phone_media_device_source` (`device_imei`, `source_id`, `remote_id`, `origin`),
     KEY `idx_sky_phone_media_account` (`account_id`, `created_at`, `id`),
     KEY `idx_sky_phone_media_device` (`device_imei`, `created_at`, `id`),
     FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE,

From 6d25423f45fc8c5db81223344e08086844636d72 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:08:37 +0200
Subject: [PATCH 47/63] BLD - enable development-only Vue DevTools

---
 frontend/package.json   |   3 +-
 frontend/pnpm-lock.yaml | 742 ++++++++++++++++++++++++++++++++++++++++
 frontend/vite.config.ts |   7 +-
 3 files changed, 748 insertions(+), 4 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 12fac4a..566a5a6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,6 @@
     "test:browser-mocks": "node testserver/smoke.cjs"
   },
   "dependencies": {
-    "emoji-picker-element-data": "^1.8.0",
     "@tiptap/core": "^3.29.2",
     "@tiptap/extension-placeholder": "^3.29.2",
     "@tiptap/markdown": "^3.29.2",
@@ -23,6 +22,7 @@
     "@tiptap/starter-kit": "^3.29.2",
     "@tiptap/vue-3": "^3.29.2",
     "dompurify": "^3.4.13",
+    "emoji-picker-element-data": "^1.8.0",
     "fix-webm-duration": "^1.0.6",
     "konsta": "~5.2.0",
     "lucide-vue-next": "^0.525.0",
@@ -47,6 +47,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "~5.8.0",
     "vite": "^7.0.0",
+    "vite-plugin-vue-devtools": "^8.2.1",
     "vitest": "^3.2.4",
     "vue-tsc": "^2.2.10"
   }
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 1f4dd36..5588678 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -99,6 +99,9 @@ importers:
       vite:
         specifier: ^7.0.0
         version: 7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
+      vite-plugin-vue-devtools:
+        specifier: ^8.2.1
+        version: 8.2.1(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0))(vue@3.5.40(typescript@5.8.3))
       vitest:
         specifier: ^3.2.4
         version: 3.2.7(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
@@ -108,6 +111,72 @@ importers:
 
 packages:
 
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.8':
+    resolution: {integrity: sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.29.7':
+    resolution: {integrity: sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    resolution: {integrity: sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    resolution: {integrity: sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.29.7':
+    resolution: {integrity: sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    resolution: {integrity: sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-string-parser@7.29.7':
     resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
     engines: {node: '>=6.9.0'}
@@ -116,11 +185,68 @@ packages:
     resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.29.8':
     resolution: {integrity: sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/plugin-proposal-decorators@7.29.7':
+    resolution: {integrity: sha512-EtU0Hi3GvrTqD56xKmZvV/uCXK2ZbwVNPNLAquVItcAZpUhkXwWlo3Fmj0c2LxgSf2I8IDULeAepwNP1OefLXg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-decorators@7.29.7':
+    resolution: {integrity: sha512-9MTTLbF39X6sqM92JPEsoI7++26hjZvzkxKZy64aMhWLH2mPkJ/Q3AV4QLmls3R14FpSpkOwQQfUh962JGQxxg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-attributes@7.29.7':
+    resolution: {integrity: sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-meta@7.10.4':
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.29.7':
+    resolution: {integrity: sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.29.7':
+    resolution: {integrity: sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.8':
+    resolution: {integrity: sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.29.8':
     resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
     engines: {node: '>=6.9.0'}
@@ -369,6 +495,7 @@ packages:
     engines: {node: ^22.20 || ^24.12 || >=25}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -386,6 +513,9 @@ packages:
     resolution: {integrity: sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
   '@rolldown/pluginutils@1.0.1':
     resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
@@ -423,66 +553,79 @@ packages:
     resolution: {integrity: sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.62.4':
     resolution: {integrity: sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.62.4':
     resolution: {integrity: sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.62.4':
     resolution: {integrity: sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.62.4':
     resolution: {integrity: sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.62.4':
     resolution: {integrity: sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.62.4':
     resolution: {integrity: sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.62.4':
     resolution: {integrity: sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.62.4':
     resolution: {integrity: sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.62.4':
     resolution: {integrity: sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.62.4':
     resolution: {integrity: sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.62.4':
     resolution: {integrity: sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.62.4':
     resolution: {integrity: sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.62.4':
     resolution: {integrity: sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==}
@@ -552,24 +695,28 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
     resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
     resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.3.3':
     resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.3.3':
     resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
@@ -891,6 +1038,22 @@ packages:
   '@volar/typescript@2.4.15':
     resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
 
+  '@vue/babel-helper-vue-transform-on@1.5.0':
+    resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
+
+  '@vue/babel-plugin-jsx@1.5.0':
+    resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.5.0':
+    resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@vue/compiler-core@3.5.40':
     resolution: {integrity: sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==}
 
@@ -912,12 +1075,23 @@ packages:
   '@vue/devtools-api@7.7.10':
     resolution: {integrity: sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==}
 
+  '@vue/devtools-core@8.2.1':
+    resolution: {integrity: sha512-s/VfAY9oDTb/kFEWmy461jaFde2MIV1RO/gi1vwM+PAZBZ/Pc2Ndu3BNBdZUze8QDUuyYvElbEEGA83syjJfzA==}
+    peerDependencies:
+      vue: ^3.0.0
+
   '@vue/devtools-kit@7.7.10':
     resolution: {integrity: sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==}
 
+  '@vue/devtools-kit@8.2.1':
+    resolution: {integrity: sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==}
+
   '@vue/devtools-shared@7.7.10':
     resolution: {integrity: sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==}
 
+  '@vue/devtools-shared@8.2.1':
+    resolution: {integrity: sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==}
+
   '@vue/eslint-config-prettier@10.2.0':
     resolution: {integrity: sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==}
     peerDependencies:
@@ -998,6 +1172,10 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansis@4.3.1:
+    resolution: {integrity: sha512-BJ8/l4R5LRE7hW9WdSuGYrLSHi2ynxeFpDFbH0K/CgNeY/tyhk+vO6TYxXC5r5CpUhNVX310xzPsN/H9lCdfOA==}
+    engines: {node: '>=14'}
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -1012,9 +1190,17 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
+  baseline-browser-mapping@2.11.13:
+    resolution: {integrity: sha512-k9HNuUVMlqVjQ9UHzfPjIqiDbWw7WqT1AoT7GL8VwvF3r0ZfArtgiSPAlmupyNquNgOJHTuH4CKYf8ttMTWBTQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   birpc@2.9.0:
     resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
 
+  birpc@4.1.0:
+    resolution: {integrity: sha512-O8L9vALWGqdEe0cG4HJckauw3WeJETlJnDRPUYpgwB7wrU43b/5NGMdVjdVcRo+4ROgd3ih2wha1glDe4HRVgw==}
+
   body-parser@2.3.0:
     resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
     engines: {node: '>=18'}
@@ -1036,6 +1222,15 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  browserslist@4.28.8:
+    resolution: {integrity: sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
   bytes@3.1.2:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
@@ -1056,6 +1251,9 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  caniuse-lite@1.0.30001809:
+    resolution: {integrity: sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==}
+
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -1099,6 +1297,9 @@ packages:
     resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
     engines: {node: '>=18'}
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   cookie-signature@1.2.2:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
@@ -1146,6 +1347,18 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.0:
+    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+    engines: {node: '>=18'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -1164,6 +1377,9 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
+  electron-to-chromium@1.5.405:
+    resolution: {integrity: sha512-bNglH7lPH5l+yHOes7Zr4VqxhOy4BQ9ZBUX4VdoFgxMpzJk7W1ZoO3Vgd9Pxa9PyjQ76sfm2aKH/nzEcCNRlew==}
+
   emoji-picker-element-data@1.8.0:
     resolution: {integrity: sha512-VfRuRJNEDLS1JKlNS4olaqhjX5S1nnZ+ZHG73b/dV8QeZyi0yPruTPEE72EmF6XO3k/9hj3lybMIYMOYXb/57A==}
 
@@ -1182,6 +1398,9 @@ packages:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
+  error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1382,6 +1601,10 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -1463,6 +1686,11 @@ packages:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1475,6 +1703,15 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -1486,6 +1723,10 @@ packages:
     resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
     engines: {node: '>=18'}
 
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1493,6 +1734,9 @@ packages:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
@@ -1500,6 +1744,11 @@ packages:
     resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
 
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -1509,9 +1758,17 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   konsta@5.2.0:
     resolution: {integrity: sha512-afWzSinsEfDU+OI7+ljShPAlZqecJlqDUSQVyvqzFy3PgoON+UQXD+f0k5ZXsQRfKmU5fyznKaHW0k8OK8nBNg==}
     engines: {node: '>= 4.7.0'}
@@ -1555,24 +1812,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -1603,6 +1864,9 @@ packages:
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
   lucide-vue-next@0.525.0:
     resolution: {integrity: sha512-Xf8+x8B2DrnGDV/rxylS+KBp2FIe6ljwDn2JsGTZZvXIfhmm/q+nv8RuGO1OyoMjOVkkz7CqtUqJfwtFPRbB2w==}
     deprecated: Package deprecated. Please use @lucide/vue instead.
@@ -1659,6 +1923,10 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1677,6 +1945,10 @@ packages:
     resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
     engines: {node: '>= 0.6'}
 
+  node-releases@2.0.53:
+    resolution: {integrity: sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==}
+    engines: {node: '>=18'}
+
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -1688,6 +1960,13 @@ packages:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
+  obug@2.1.4:
+    resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
+    engines: {node: '>=12.20.0'}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -1695,6 +1974,10 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  open@11.0.0:
+    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
+    engines: {node: '>=20'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -1742,6 +2025,9 @@ packages:
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
+  perfect-debounce@2.1.0:
+    resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1770,6 +2056,10 @@ packages:
     resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==}
     engines: {node: ^10 || ^12 || >=14}
 
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -1872,6 +2162,10 @@ packages:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
 
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -1881,6 +2175,10 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
   semver@7.8.5:
     resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
     engines: {node: '>=10'}
@@ -1928,6 +2226,10 @@ packages:
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2017,6 +2319,10 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -2057,6 +2363,16 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin-utils@0.3.2:
+    resolution: {integrity: sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==}
+    engines: {node: '>=20.19.0'}
+
+  update-browserslist-db@1.3.1:
+    resolution: {integrity: sha512-ZZ61DsRsOnakl74HAmp3oSN4aXUmEWXf+i/yv0h7tIBfICc3VdrFErQKUUKPgu3AMsTUMbcongALEN4l6GSUrQ==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -2067,11 +2383,42 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vite-dev-rpc@2.0.0:
+    resolution: {integrity: sha512-yKwbTwdHKSD2k/aGqyWpPHepo45OQc8lH3/6IfT4ZqeKE26ooKvi4WIEKzqWav8v+9Is8u1k8q54hvOmqASazA==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0 || ^8.0.0
+
+  vite-hot-client@2.2.0:
+    resolution: {integrity: sha512-76Zs9zrHbH7M7wqeyooGQKdX+yg0pQ0xuQ1PbFp4z5a0Lzn2e5IPFoCswnmqZ4GiwqB4Jo3WcDAMO9jARTJl8w==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0
+
   vite-node@3.2.4:
     resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
+  vite-plugin-inspect@11.4.1:
+    resolution: {integrity: sha512-ShOFe2PURXGvRS5OrgmOLZOCwDTD7dEBVt0tMpFPKb9AsvqXKCRGM8QgKrUbRbJYFXScHvDPpGRd28rYidC0tA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^6.0.0 || ^7.0.0-0 || ^8.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  vite-plugin-vue-devtools@8.2.1:
+    resolution: {integrity: sha512-5JLxXWWCo5lJMw16/xVeNvJ8k2zLwZPf1vITLzya/2IePrCBeGe/p/iAokgXHZpEi39fcYtPXmO8SaKeXmqCAA==}
+    engines: {node: '>=v14.21.3'}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  vite-plugin-vue-inspector@6.0.0:
+    resolution: {integrity: sha512-OpyITJLgZNibxlrik1EmRtvXHDjLRxNPsWkGFTERZs2LgMEdG4W0WoFt5GIgp3a3jRou+eJR8U1zOBk/XQgEbw==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
   vite@7.3.6:
     resolution: {integrity: sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2192,6 +2539,10 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  wsl-utils@0.3.1:
+    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
+    engines: {node: '>=20'}
+
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
@@ -2200,6 +2551,9 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -2214,14 +2568,192 @@ packages:
 
 snapshots:
 
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.8':
+    dependencies:
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.8
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.8
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/traverse': 7.29.8
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.8
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-string-parser@7.29.7': {}
 
   '@babel/helper-validator-identifier@7.29.7': {}
 
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
+
   '@babel/parser@7.29.8':
     dependencies:
       '@babel/types': 7.29.8
 
+  '@babel/plugin-proposal-decorators@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-decorators': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-syntax-decorators@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-attributes@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
+
+  '@babel/traverse@7.29.8':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.29.8':
     dependencies:
       '@babel/helper-string-parser': 7.29.7
@@ -2414,6 +2946,8 @@ snapshots:
 
   '@pkgr/core@0.3.6': {}
 
+  '@polka/url@1.0.0-next.29': {}
+
   '@rolldown/pluginutils@1.0.1': {}
 
   '@rollup/rollup-android-arm-eabi@4.62.4':
@@ -2908,6 +3442,35 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
+  '@vue/babel-helper-vue-transform-on@1.5.0': {}
+
+  '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+      '@vue/babel-helper-vue-transform-on': 1.5.0
+      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.29.7)
+      '@vue/shared': 3.5.40
+    optionalDependencies:
+      '@babel/core': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/parser': 7.29.8
+      '@vue/compiler-sfc': 3.5.40
+    transitivePeerDependencies:
+      - supports-color
+
   '@vue/compiler-core@3.5.40':
     dependencies:
       '@babel/parser': 7.29.8
@@ -2949,6 +3512,12 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.10
 
+  '@vue/devtools-core@8.2.1(vue@3.5.40(typescript@5.8.3))':
+    dependencies:
+      '@vue/devtools-kit': 8.2.1
+      '@vue/devtools-shared': 8.2.1
+      vue: 3.5.40(typescript@5.8.3)
+
   '@vue/devtools-kit@7.7.10':
     dependencies:
       '@vue/devtools-shared': 7.7.10
@@ -2959,10 +3528,19 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.6
 
+  '@vue/devtools-kit@8.2.1':
+    dependencies:
+      '@vue/devtools-shared': 8.2.1
+      birpc: 2.9.0
+      hookable: 5.5.3
+      perfect-debounce: 2.1.0
+
   '@vue/devtools-shared@7.7.10':
     dependencies:
       rfdc: 1.4.1
 
+  '@vue/devtools-shared@8.2.1': {}
+
   '@vue/eslint-config-prettier@10.2.0(eslint@9.39.5(jiti@2.7.0))(prettier@3.5.3)':
     dependencies:
       eslint: 9.39.5(jiti@2.7.0)
@@ -3053,6 +3631,8 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansis@4.3.1: {}
+
   argparse@2.0.1: {}
 
   assertion-error@2.0.1: {}
@@ -3061,8 +3641,12 @@ snapshots:
 
   balanced-match@4.0.4: {}
 
+  baseline-browser-mapping@2.11.13: {}
+
   birpc@2.9.0: {}
 
+  birpc@4.1.0: {}
+
   body-parser@2.3.0:
     dependencies:
       bytes: 3.1.2
@@ -3096,6 +3680,18 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  browserslist@4.28.8:
+    dependencies:
+      baseline-browser-mapping: 2.11.13
+      caniuse-lite: 1.0.30001809
+      electron-to-chromium: 1.5.405
+      node-releases: 2.0.53
+      update-browserslist-db: 1.3.1(browserslist@4.28.8)
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
   bytes@3.1.2: {}
 
   cac@6.7.14: {}
@@ -3112,6 +3708,8 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  caniuse-lite@1.0.30001809: {}
+
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -3156,6 +3754,8 @@ snapshots:
 
   content-type@2.0.0: {}
 
+  convert-source-map@2.0.0: {}
+
   cookie-signature@1.2.2: {}
 
   cookie@0.7.2: {}
@@ -3189,6 +3789,15 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-lazy-prop@3.0.0: {}
+
   depd@2.0.0: {}
 
   detect-libc@2.1.2: {}
@@ -3205,6 +3814,8 @@ snapshots:
 
   ee-first@1.1.1: {}
 
+  electron-to-chromium@1.5.405: {}
+
   emoji-picker-element-data@1.8.0: {}
 
   emoji-regex@8.0.0: {}
@@ -3218,6 +3829,8 @@ snapshots:
 
   entities@7.0.1: {}
 
+  error-stack-parser-es@1.0.5: {}
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -3479,6 +4092,8 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  gensync@1.0.0-beta.2: {}
+
   get-caller-file@2.0.5: {}
 
   get-intrinsic@1.3.0:
@@ -3552,6 +4167,8 @@ snapshots:
 
   ipaddr.js@1.9.1: {}
 
+  is-docker@3.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -3560,32 +4177,50 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
   is-number@7.0.0: {}
 
   is-promise@4.0.0: {}
 
   is-what@5.5.0: {}
 
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isexe@2.0.0: {}
 
   jiti@2.7.0: {}
 
+  js-tokens@4.0.0: {}
+
   js-tokens@9.0.1: {}
 
   js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
 
+  jsesc@3.1.0: {}
+
   json-buffer@3.0.1: {}
 
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@2.2.3: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
+  kolorist@1.8.0: {}
+
   konsta@5.2.0:
     dependencies:
       tailwind-merge: 3.6.0
@@ -3654,6 +4289,10 @@ snapshots:
 
   loupe@3.2.1: {}
 
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
   lucide-vue-next@0.525.0(vue@3.5.40(typescript@5.8.3)):
     dependencies:
       vue: 3.5.40(typescript@5.8.3)
@@ -3697,6 +4336,8 @@ snapshots:
 
   mitt@3.0.1: {}
 
+  mrmime@2.0.1: {}
+
   ms@2.1.3: {}
 
   muggle-string@0.4.1: {}
@@ -3707,6 +4348,8 @@ snapshots:
 
   negotiator@1.0.0: {}
 
+  node-releases@2.0.53: {}
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
@@ -3715,6 +4358,10 @@ snapshots:
 
   object-inspect@1.13.4: {}
 
+  obug@2.1.4: {}
+
+  ohash@2.0.11: {}
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -3723,6 +4370,15 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  open@11.0.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.1.0
+      wsl-utils: 0.3.1
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -3762,6 +4418,8 @@ snapshots:
 
   perfect-debounce@1.0.0: {}
 
+  perfect-debounce@2.1.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
@@ -3786,6 +4444,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  powershell-utils@0.1.0: {}
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.1:
@@ -3943,6 +4603,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  run-applescript@7.1.0: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -3953,6 +4615,8 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  semver@6.3.1: {}
+
   semver@7.8.5: {}
 
   send@1.2.1:
@@ -4020,6 +4684,12 @@ snapshots:
 
   siginfo@2.0.0: {}
 
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   source-map-js@1.2.1: {}
 
   speakingurl@14.0.1: {}
@@ -4089,6 +4759,8 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
+  totalist@3.0.1: {}
+
   tree-kill@1.2.2: {}
 
   ts-api-utils@2.5.0(typescript@5.8.3):
@@ -4124,6 +4796,17 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin-utils@0.3.2:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.5
+
+  update-browserslist-db@1.3.1(browserslist@4.28.8):
+    dependencies:
+      browserslist: 4.28.8
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -4132,6 +4815,16 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vite-dev-rpc@2.0.0(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)):
+    dependencies:
+      birpc: 4.1.0
+      vite: 7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
+      vite-hot-client: 2.2.0(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0))
+
+  vite-hot-client@2.2.0(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)):
+    dependencies:
+      vite: 7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
+
   vite-node@3.2.4(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0):
     dependencies:
       cac: 6.7.14
@@ -4153,6 +4846,48 @@ snapshots:
       - tsx
       - yaml
 
+  vite-plugin-inspect@11.4.1(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)):
+    dependencies:
+      ansis: 4.3.1
+      error-stack-parser-es: 1.0.5
+      obug: 2.1.4
+      ohash: 2.0.11
+      open: 11.0.0
+      perfect-debounce: 2.1.0
+      sirv: 3.0.2
+      unplugin-utils: 0.3.2
+      vite: 7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
+      vite-dev-rpc: 2.0.0(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0))
+
+  vite-plugin-vue-devtools@8.2.1(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0))(vue@3.5.40(typescript@5.8.3)):
+    dependencies:
+      '@vue/devtools-core': 8.2.1(vue@3.5.40(typescript@5.8.3))
+      '@vue/devtools-kit': 8.2.1
+      '@vue/devtools-shared': 8.2.1
+      sirv: 3.0.2
+      vite: 7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
+      vite-plugin-inspect: 11.4.1(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0))
+      vite-plugin-vue-inspector: 6.0.0(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0))
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - supports-color
+      - vue
+
+  vite-plugin-vue-inspector@6.0.0(vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-proposal-decorators': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.29.7)
+      '@vue/compiler-dom': 3.5.40
+      kolorist: 1.8.0
+      magic-string: 0.30.21
+      vite: 7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
+    transitivePeerDependencies:
+      - supports-color
+
   vite@7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0):
     dependencies:
       esbuild: 0.28.1
@@ -4264,10 +4999,17 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  wsl-utils@0.3.1:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
   xml-name-validator@4.0.0: {}
 
   y18n@5.0.8: {}
 
+  yallist@3.1.1: {}
+
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2:
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 298a056..a85b7b7 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -3,8 +3,9 @@ import { fileURLToPath, URL } from 'node:url'
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
-export default defineConfig({
+export default defineConfig(({ command }) => ({
   base: './',
   build: {
     assetsDir: 'assets',
@@ -22,7 +23,7 @@ export default defineConfig({
       },
     },
   },
-  plugins: [tailwindcss(), vue()],
+  plugins: [command === 'serve' && vueDevTools(), tailwindcss(), vue()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
@@ -37,4 +38,4 @@ export default defineConfig({
     // numeric loopback origin. Keep the local UI on the localhost origin.
     host: 'localhost',
   },
-})
+}))

From 6b508adbc992265cc9751a305d8049e04130fc26 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:08:43 +0200
Subject: [PATCH 48/63] ADD - introduce the first-party Sky UI system

---
 frontend/src/main.ts                          |    5 +
 frontend/src/ui/SkyAppPage.vue                |   43 +
 frontend/src/ui/SkyEmptyState.vue             |   41 +
 frontend/src/ui/SkyInfiniteLoader.test.ts     |   37 +
 frontend/src/ui/SkyInfiniteLoader.vue         |  143 ++
 frontend/src/ui/SkyListCard.vue               |   27 +
 frontend/src/ui/SkyNavbar.test.ts             |   61 +
 frontend/src/ui/SkyNavbar.vue                 |   58 +
 frontend/src/ui/SkyScrollArea.vue             |   25 +
 frontend/src/ui/SkyScrollRail.vue             |  176 +++
 frontend/src/ui/SkySection.vue                |   14 +
 frontend/src/ui/SkyTabBar.vue                 |   17 +
 frontend/src/ui/controls.css                  | 1147 +++++++++++++++++
 frontend/src/ui/controls/SkyBadge.vue         |   18 +
 frontend/src/ui/controls/SkyBlock.vue         |   30 +
 frontend/src/ui/controls/SkyBlockTitle.vue    |   18 +
 frontend/src/ui/controls/SkyButton.vue        |   82 ++
 frontend/src/ui/controls/SkyCard.vue          |   23 +
 frontend/src/ui/controls/SkyChip.vue          |   67 +
 frontend/src/ui/controls/SkyField.test.ts     |  115 ++
 frontend/src/ui/controls/SkyField.vue         |  262 ++++
 frontend/src/ui/controls/SkyIcon.vue          |   35 +
 frontend/src/ui/controls/SkyLink.vue          |   63 +
 frontend/src/ui/controls/SkyList.test.ts      |   23 +
 frontend/src/ui/controls/SkyList.vue          |   40 +
 frontend/src/ui/controls/SkyListItem.vue      |  121 ++
 frontend/src/ui/controls/SkyProgress.vue      |   38 +
 frontend/src/ui/controls/SkyRadio.vue         |   86 ++
 frontend/src/ui/controls/SkyRange.test.ts     |   44 +
 frontend/src/ui/controls/SkyRange.vue         |  102 ++
 frontend/src/ui/controls/SkySearchbar.vue     |  107 ++
 frontend/src/ui/controls/SkySegmented.vue     |   23 +
 .../src/ui/controls/SkySegmentedButton.vue    |   34 +
 frontend/src/ui/controls/SkySpinner.vue       |   32 +
 .../src/ui/controls/SkyStatusCard.test.ts     |   34 +
 frontend/src/ui/controls/SkyStatusCard.vue    |   58 +
 frontend/src/ui/controls/SkySurface.vue       |   25 +
 frontend/src/ui/controls/SkyTabButton.vue     |   45 +
 frontend/src/ui/controls/SkyToggle.vue        |   72 ++
 frontend/src/ui/controls/SkyToolbarPane.vue   |   18 +
 frontend/src/ui/controls/index.ts             |   23 +
 .../ui/controls/useComposedFieldValue.test.ts |   49 +
 .../src/ui/controls/useComposedFieldValue.ts  |   46 +
 frontend/src/ui/foundation.css                |  449 +++++++
 frontend/src/ui/index.ts                      |   12 +
 frontend/src/ui/overlays.css                  |  266 ++++
 frontend/src/ui/overlays/SkyActionButton.vue  |   17 +
 frontend/src/ui/overlays/SkyActionGroup.vue   |    3 +
 frontend/src/ui/overlays/SkyActionSheet.vue   |   81 ++
 frontend/src/ui/overlays/SkyDialog.vue        |   64 +
 frontend/src/ui/overlays/SkyDialogButton.vue  |   17 +
 frontend/src/ui/overlays/SkyMessage.vue       |   19 +
 frontend/src/ui/overlays/SkyMessagebar.vue    |   29 +
 frontend/src/ui/overlays/SkyMessages.vue      |    3 +
 frontend/src/ui/overlays/SkyMessagesTitle.vue |    3 +
 frontend/src/ui/overlays/SkySheet.vue         |   80 ++
 frontend/src/ui/overlays/SkyToast.vue         |   21 +
 frontend/src/ui/overlays/index.ts             |   11 +
 .../src/ui/overlays/useOverlayFocusTrap.ts    |  323 +++++
 frontend/src/ui/settings.css                  |  263 ++++
 .../src/ui/settings/SkySettingsGroup.test.ts  |   52 +
 frontend/src/ui/settings/SkySettingsGroup.vue |   50 +
 .../src/ui/settings/SkySettingsIcon.test.ts   |   37 +
 frontend/src/ui/settings/SkySettingsIcon.vue  |   30 +
 .../ui/settings/SkySettingsRangeRow.test.ts   |   64 +
 .../src/ui/settings/SkySettingsRangeRow.vue   |   73 ++
 .../src/ui/settings/SkySettingsRow.test.ts    |  136 ++
 frontend/src/ui/settings/SkySettingsRow.vue   |  213 +++
 frontend/src/ui/settings/index.ts             |    4 +
 frontend/src/ui/tokens.css                    |   56 +
 frontend/src/utils/scrollRail.test.ts         |   90 ++
 frontend/src/utils/scrollRail.ts              |   52 +
 72 files changed, 6045 insertions(+)
 create mode 100644 frontend/src/ui/SkyAppPage.vue
 create mode 100644 frontend/src/ui/SkyEmptyState.vue
 create mode 100644 frontend/src/ui/SkyInfiniteLoader.test.ts
 create mode 100644 frontend/src/ui/SkyInfiniteLoader.vue
 create mode 100644 frontend/src/ui/SkyListCard.vue
 create mode 100644 frontend/src/ui/SkyNavbar.test.ts
 create mode 100644 frontend/src/ui/SkyNavbar.vue
 create mode 100644 frontend/src/ui/SkyScrollArea.vue
 create mode 100644 frontend/src/ui/SkyScrollRail.vue
 create mode 100644 frontend/src/ui/SkySection.vue
 create mode 100644 frontend/src/ui/SkyTabBar.vue
 create mode 100644 frontend/src/ui/controls.css
 create mode 100644 frontend/src/ui/controls/SkyBadge.vue
 create mode 100644 frontend/src/ui/controls/SkyBlock.vue
 create mode 100644 frontend/src/ui/controls/SkyBlockTitle.vue
 create mode 100644 frontend/src/ui/controls/SkyButton.vue
 create mode 100644 frontend/src/ui/controls/SkyCard.vue
 create mode 100644 frontend/src/ui/controls/SkyChip.vue
 create mode 100644 frontend/src/ui/controls/SkyField.test.ts
 create mode 100644 frontend/src/ui/controls/SkyField.vue
 create mode 100644 frontend/src/ui/controls/SkyIcon.vue
 create mode 100644 frontend/src/ui/controls/SkyLink.vue
 create mode 100644 frontend/src/ui/controls/SkyList.test.ts
 create mode 100644 frontend/src/ui/controls/SkyList.vue
 create mode 100644 frontend/src/ui/controls/SkyListItem.vue
 create mode 100644 frontend/src/ui/controls/SkyProgress.vue
 create mode 100644 frontend/src/ui/controls/SkyRadio.vue
 create mode 100644 frontend/src/ui/controls/SkyRange.test.ts
 create mode 100644 frontend/src/ui/controls/SkyRange.vue
 create mode 100644 frontend/src/ui/controls/SkySearchbar.vue
 create mode 100644 frontend/src/ui/controls/SkySegmented.vue
 create mode 100644 frontend/src/ui/controls/SkySegmentedButton.vue
 create mode 100644 frontend/src/ui/controls/SkySpinner.vue
 create mode 100644 frontend/src/ui/controls/SkyStatusCard.test.ts
 create mode 100644 frontend/src/ui/controls/SkyStatusCard.vue
 create mode 100644 frontend/src/ui/controls/SkySurface.vue
 create mode 100644 frontend/src/ui/controls/SkyTabButton.vue
 create mode 100644 frontend/src/ui/controls/SkyToggle.vue
 create mode 100644 frontend/src/ui/controls/SkyToolbarPane.vue
 create mode 100644 frontend/src/ui/controls/index.ts
 create mode 100644 frontend/src/ui/controls/useComposedFieldValue.test.ts
 create mode 100644 frontend/src/ui/controls/useComposedFieldValue.ts
 create mode 100644 frontend/src/ui/foundation.css
 create mode 100644 frontend/src/ui/index.ts
 create mode 100644 frontend/src/ui/overlays.css
 create mode 100644 frontend/src/ui/overlays/SkyActionButton.vue
 create mode 100644 frontend/src/ui/overlays/SkyActionGroup.vue
 create mode 100644 frontend/src/ui/overlays/SkyActionSheet.vue
 create mode 100644 frontend/src/ui/overlays/SkyDialog.vue
 create mode 100644 frontend/src/ui/overlays/SkyDialogButton.vue
 create mode 100644 frontend/src/ui/overlays/SkyMessage.vue
 create mode 100644 frontend/src/ui/overlays/SkyMessagebar.vue
 create mode 100644 frontend/src/ui/overlays/SkyMessages.vue
 create mode 100644 frontend/src/ui/overlays/SkyMessagesTitle.vue
 create mode 100644 frontend/src/ui/overlays/SkySheet.vue
 create mode 100644 frontend/src/ui/overlays/SkyToast.vue
 create mode 100644 frontend/src/ui/overlays/index.ts
 create mode 100644 frontend/src/ui/overlays/useOverlayFocusTrap.ts
 create mode 100644 frontend/src/ui/settings.css
 create mode 100644 frontend/src/ui/settings/SkySettingsGroup.test.ts
 create mode 100644 frontend/src/ui/settings/SkySettingsGroup.vue
 create mode 100644 frontend/src/ui/settings/SkySettingsIcon.test.ts
 create mode 100644 frontend/src/ui/settings/SkySettingsIcon.vue
 create mode 100644 frontend/src/ui/settings/SkySettingsRangeRow.test.ts
 create mode 100644 frontend/src/ui/settings/SkySettingsRangeRow.vue
 create mode 100644 frontend/src/ui/settings/SkySettingsRow.test.ts
 create mode 100644 frontend/src/ui/settings/SkySettingsRow.vue
 create mode 100644 frontend/src/ui/settings/index.ts
 create mode 100644 frontend/src/ui/tokens.css
 create mode 100644 frontend/src/utils/scrollRail.test.ts
 create mode 100644 frontend/src/utils/scrollRail.ts

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index f85ef02..249a09b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -4,5 +4,10 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/main.css'
+import './ui/tokens.css'
+import './ui/foundation.css'
+import './ui/controls.css'
+import './ui/settings.css'
+import './ui/overlays.css'
 
 createApp(App).use(createPinia()).use(router).mount('#app')
diff --git a/frontend/src/ui/SkyAppPage.vue b/frontend/src/ui/SkyAppPage.vue
new file mode 100644
index 0000000..8c3f9da
--- /dev/null
+++ b/frontend/src/ui/SkyAppPage.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    accent?: string
+    accentSoft?: string
+    dark?: boolean
+    label: string
+  }>(),
+  {
+    accent: '',
+    accentSoft: '',
+    dark: false,
+  },
+)
+
+const accentStyle = computed(() =>
+  props.accent || props.accentSoft
+    ? {
+        ...(props.accent ? { '--sky-app-accent': props.accent } : {}),
+        ...(props.accentSoft
+          ? { '--sky-app-accent-soft': props.accentSoft }
+          : {}),
+      }
+    : undefined,
+)
+</script>
+
+<template>
+  <main
+    v-bind="$attrs"
+    class="sky-app-page"
+    :class="{ 'sky-app-page--dark': dark }"
+    :style="accentStyle"
+    :aria-label="label"
+  >
+    <div class="sky-app-page__backdrop" aria-hidden="true"></div>
+    <slot />
+  </main>
+</template>
diff --git a/frontend/src/ui/SkyEmptyState.vue b/frontend/src/ui/SkyEmptyState.vue
new file mode 100644
index 0000000..0175985
--- /dev/null
+++ b/frontend/src/ui/SkyEmptyState.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    body?: string
+    compact?: boolean
+    title?: string
+    tone?: 'danger' | 'neutral'
+  }>(),
+  {
+    body: '',
+    compact: false,
+    title: '',
+    tone: 'neutral',
+  },
+)
+</script>
+
+<template>
+  <section
+    v-bind="$attrs"
+    class="sky-empty-state"
+    :class="[
+      `sky-empty-state--${tone}`,
+      { 'sky-empty-state--compact': compact },
+    ]"
+    :role="tone === 'danger' ? 'alert' : 'status'"
+    :aria-live="tone === 'danger' ? 'assertive' : 'polite'"
+    aria-atomic="true"
+  >
+    <span v-if="$slots.icon" class="sky-empty-state__icon">
+      <slot name="icon" />
+    </span>
+    <strong v-if="title" class="sky-empty-state__title">{{ title }}</strong>
+    <p v-if="body" class="sky-empty-state__body">{{ body }}</p>
+    <div v-if="$slots.actions" class="sky-empty-state__actions">
+      <slot name="actions" />
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/ui/SkyInfiniteLoader.test.ts b/frontend/src/ui/SkyInfiniteLoader.test.ts
new file mode 100644
index 0000000..b0fa13f
--- /dev/null
+++ b/frontend/src/ui/SkyInfiniteLoader.test.ts
@@ -0,0 +1,37 @@
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkyInfiniteLoader from '@/ui/SkyInfiniteLoader.vue'
+
+function renderLoader(error: boolean | string): Promise<string> {
+  const app = createSSRApp(SkyInfiniteLoader, {
+    error,
+    hasMore: false,
+    loading: false,
+    loadingLabel: 'Loading more companies',
+    loadKey: null,
+    retryLabel: 'Try Again',
+  })
+
+  return renderToString(app)
+}
+
+describe('SkyInfiniteLoader error rendering', () => {
+  it('does not Boolean-cast a bound empty error string to true', async () => {
+    const html = await renderLoader('')
+
+    expect(html).not.toContain('sky-infinite-loader__retry')
+    expect(html).not.toContain('Try Again')
+  })
+
+  it.each([true, 'append_failed'])(
+    'renders retry for error %j',
+    async (error) => {
+      const html = await renderLoader(error)
+
+      expect(html).toContain('sky-infinite-loader__retry')
+      expect(html).toContain('Try Again')
+    },
+  )
+})
diff --git a/frontend/src/ui/SkyInfiniteLoader.vue b/frontend/src/ui/SkyInfiniteLoader.vue
new file mode 100644
index 0000000..74a865c
--- /dev/null
+++ b/frontend/src/ui/SkyInfiniteLoader.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  type PropType,
+  ref,
+  watch,
+} from 'vue'
+
+import SkyLink from './controls/SkyLink.vue'
+import SkySpinner from './controls/SkySpinner.vue'
+
+const OBSERVER_ROOT_MARGIN = '0px 0px 140px 0px'
+
+const props = defineProps({
+  error: {
+    default: false,
+    type: [String, Boolean] as PropType<string | boolean>,
+  },
+  hasMore: { required: true, type: Boolean },
+  loading: { required: true, type: Boolean },
+  loadingLabel: { required: true, type: String },
+  loadKey: {
+    default: null,
+    type: [String, Number] as PropType<string | number | null | undefined>,
+  },
+  retryLabel: { required: true, type: String },
+})
+
+const emit = defineEmits<{
+  load: []
+  retry: []
+}>()
+
+const sentinel = ref<HTMLElement | null>(null)
+const hasError = computed(() => Boolean(props.error))
+const isHidden = computed(
+  () => !props.hasMore && !props.loading && !hasError.value,
+)
+const isVisibleState = computed(() => props.loading || hasError.value)
+
+let observer: IntersectionObserver | null = null
+let observedElement: HTMLElement | null = null
+let refreshGeneration = 0
+let hasRequestedKey = false
+let lastRequestedKey: string | number | null | undefined
+
+function requestNextPage(): void {
+  if (!props.hasMore || props.loading || hasError.value) return
+  if (hasRequestedKey && Object.is(lastRequestedKey, props.loadKey)) return
+
+  hasRequestedKey = true
+  lastRequestedKey = props.loadKey
+  emit('load')
+}
+
+function handleIntersections(entries: IntersectionObserverEntry[]): void {
+  const entry = entries.at(-1)
+  if (entry?.isIntersecting) requestNextPage()
+}
+
+function refreshObservation(): void {
+  if (!observer || !sentinel.value) return
+
+  // Re-observing requests a fresh post-layout intersection. A cached `true`
+  // from before new rows were appended could otherwise fetch one page too far.
+  if (observedElement) observer.unobserve(observedElement)
+  observedElement = null
+
+  if (!props.hasMore) return
+
+  observedElement = sentinel.value
+  observer.observe(observedElement)
+}
+
+async function scheduleObservationRefresh(): Promise<void> {
+  const generation = ++refreshGeneration
+  await nextTick()
+
+  if (generation !== refreshGeneration) return
+  refreshObservation()
+}
+
+function retry(): void {
+  if (props.loading || !hasError.value) return
+  emit('retry')
+}
+
+watch(
+  () => [props.hasMore, props.loading, props.error, props.loadKey] as const,
+  ([hasMore]) => {
+    if (!hasMore) {
+      hasRequestedKey = false
+      lastRequestedKey = undefined
+    }
+
+    void scheduleObservationRefresh()
+  },
+  { flush: 'post' },
+)
+
+onMounted(() => {
+  if (typeof IntersectionObserver === 'undefined' || !sentinel.value) return
+
+  const scrollRoot = sentinel.value.closest<HTMLElement>('.sky-scroll-area')
+  observer = new IntersectionObserver(handleIntersections, {
+    root: scrollRoot,
+    rootMargin: OBSERVER_ROOT_MARGIN,
+    threshold: 0,
+  })
+  refreshObservation()
+})
+
+onBeforeUnmount(() => {
+  refreshGeneration += 1
+  observer?.disconnect()
+  observer = null
+  observedElement = null
+})
+</script>
+
+<template>
+  <div
+    ref="sentinel"
+    class="sky-infinite-loader"
+    :class="{ 'sky-infinite-loader--visible': isVisibleState }"
+    :hidden="isHidden"
+    aria-live="polite"
+    :aria-busy="loading || undefined"
+  >
+    <SkySpinner v-if="loading" :label="loadingLabel" :size="18" />
+    <SkyLink
+      v-else-if="hasError"
+      class="sky-infinite-loader__retry"
+      type="button"
+      @click="retry"
+    >
+      {{ retryLabel }}
+    </SkyLink>
+  </div>
+</template>
diff --git a/frontend/src/ui/SkyListCard.vue b/frontend/src/ui/SkyListCard.vue
new file mode 100644
index 0000000..369486b
--- /dev/null
+++ b/frontend/src/ui/SkyListCard.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    inset?: boolean
+    strong?: boolean
+  }>(),
+  {
+    inset: true,
+    strong: true,
+  },
+)
+</script>
+
+<template>
+  <ul
+    v-bind="$attrs"
+    class="sky-list-card"
+    :class="{
+      'sky-list-card--inset': inset,
+      'sky-list-card--strong': strong,
+    }"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/frontend/src/ui/SkyNavbar.test.ts b/frontend/src/ui/SkyNavbar.test.ts
new file mode 100644
index 0000000..8df1210
--- /dev/null
+++ b/frontend/src/ui/SkyNavbar.test.ts
@@ -0,0 +1,61 @@
+import { readFileSync } from 'node:fs'
+
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkyNavbar from '@/ui/SkyNavbar.vue'
+
+const foundationStyles = readFileSync(
+  new URL('./foundation.css', import.meta.url),
+  'utf8',
+)
+
+describe('SkyNavbar', () => {
+  it('keeps the compact centered header as the default', async () => {
+    const html = await renderToString(
+      createSSRApp(SkyNavbar, { title: 'Account' }),
+    )
+
+    expect(html).toContain('sky-navbar--compact')
+    expect(html).toContain('<h1 class="sky-navbar__title">Account</h1>')
+  })
+
+  it('exposes the large-title header without changing heading semantics', async () => {
+    const html = await renderToString(
+      createSSRApp(SkyNavbar, {
+        title: 'Settings',
+        variant: 'large',
+      }),
+    )
+
+    expect(html).toContain('sky-navbar--large')
+    expect(html).toContain('<h1 class="sky-navbar__title">Settings</h1>')
+  })
+
+  it('does not reserve a second navigation row for the large title', () => {
+    const largeNavbarRule = foundationStyles.match(
+      /\.sky-navbar--large\s*\{(?<declarations>[^}]*)\}/,
+    )?.groups?.declarations
+
+    expect(largeNavbarRule).toBeDefined()
+    expect(largeNavbarRule).toContain(
+      'grid-template-rows: var(--sky-navbar-large-title-height)',
+    )
+    expect(largeNavbarRule).not.toContain('var(--sky-navbar-height)')
+  })
+
+  it('exposes the optional surface back affordance for detail screens', async () => {
+    const html = await renderToString(
+      createSSRApp(SkyNavbar, {
+        backAppearance: 'surface',
+        backLabel: 'Back to Settings',
+        showBack: true,
+        title: 'Account',
+      }),
+    )
+
+    expect(html).toContain('sky-navbar__back--surface')
+    expect(html).toContain('aria-label="Back to Settings"')
+  })
+})
diff --git a/frontend/src/ui/SkyNavbar.vue b/frontend/src/ui/SkyNavbar.vue
new file mode 100644
index 0000000..c811aa8
--- /dev/null
+++ b/frontend/src/ui/SkyNavbar.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ChevronLeft } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    backAppearance?: 'plain' | 'surface'
+    backLabel?: string
+    showBack?: boolean
+    showBackText?: boolean
+    title: string
+    variant?: 'compact' | 'large'
+  }>(),
+  {
+    backAppearance: 'plain',
+    backLabel: '',
+    showBack: false,
+    showBackText: false,
+    variant: 'compact',
+  },
+)
+
+const emit = defineEmits<{
+  back: []
+}>()
+
+const accessibleBackLabel = computed(() => props.backLabel || props.title)
+</script>
+
+<template>
+  <header v-bind="$attrs" class="sky-navbar" :class="`sky-navbar--${variant}`">
+    <div class="sky-navbar__left">
+      <slot name="left">
+        <button
+          v-if="showBack"
+          type="button"
+          class="sky-navbar__back"
+          :class="`sky-navbar__back--${backAppearance}`"
+          :aria-label="accessibleBackLabel"
+          @click="emit('back')"
+        >
+          <ChevronLeft :size="26" :stroke-width="2" aria-hidden="true" />
+          <span v-if="showBackText" class="sky-navbar__back-label">
+            {{ backLabel }}
+          </span>
+        </button>
+      </slot>
+    </div>
+
+    <h1 class="sky-navbar__title">{{ title }}</h1>
+
+    <div class="sky-navbar__right">
+      <slot name="right" />
+    </div>
+  </header>
+</template>
diff --git a/frontend/src/ui/SkyScrollArea.vue b/frontend/src/ui/SkyScrollArea.vue
new file mode 100644
index 0000000..66c3b90
--- /dev/null
+++ b/frontend/src/ui/SkyScrollArea.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    as?: string
+    withTabbar?: boolean
+  }>(),
+  {
+    as: 'section',
+    withTabbar: false,
+  },
+)
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+    class="sky-scroll-area"
+    :class="{ 'sky-scroll-area--tabbar': withTabbar }"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/SkyScrollRail.vue b/frontend/src/ui/SkyScrollRail.vue
new file mode 100644
index 0000000..0e85336
--- /dev/null
+++ b/frontend/src/ui/SkyScrollRail.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue'
+
+import { resolveScrollRailWheel } from '@/utils/scrollRail'
+
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    as?: string
+    label?: string
+  }>(),
+  {
+    as: 'div',
+    label: '',
+  },
+)
+
+const DRAG_THRESHOLD_PX = 5
+
+const isDragging = ref(false)
+let activePointerId: number | null = null
+let dragStartClientX = 0
+let dragStartScrollLeft = 0
+let renderedScale = 1
+let suppressNextClick = false
+let clickResetTimer: ReturnType<typeof setTimeout> | undefined
+
+function resetPointerState() {
+  activePointerId = null
+  isDragging.value = false
+}
+
+function scheduleClickReset() {
+  if (clickResetTimer !== undefined) {
+    clearTimeout(clickResetTimer)
+  }
+
+  clickResetTimer = setTimeout(() => {
+    suppressNextClick = false
+    clickResetTimer = undefined
+  }, 0)
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (event.pointerType === 'touch' || !event.isPrimary || event.button !== 0) {
+    return
+  }
+
+  const rail = event.currentTarget as HTMLElement
+  const renderedWidth = rail.getBoundingClientRect().width
+
+  activePointerId = event.pointerId
+  dragStartClientX = event.clientX
+  dragStartScrollLeft = rail.scrollLeft
+  renderedScale =
+    rail.clientWidth > 0 && renderedWidth > 0
+      ? renderedWidth / rail.clientWidth
+      : 1
+  suppressNextClick = false
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (event.pointerId !== activePointerId) {
+    return
+  }
+
+  if ((event.buttons & 1) === 0) {
+    resetPointerState()
+    return
+  }
+
+  const rail = event.currentTarget as HTMLElement
+  const deltaX = (event.clientX - dragStartClientX) / renderedScale
+
+  if (!isDragging.value && Math.abs(deltaX) < DRAG_THRESHOLD_PX) {
+    return
+  }
+
+  if (!isDragging.value) {
+    isDragging.value = true
+    rail.setPointerCapture(event.pointerId)
+  }
+
+  event.preventDefault()
+  rail.scrollLeft = dragStartScrollLeft - deltaX
+}
+
+function finishPointer(event: PointerEvent) {
+  if (event.pointerId !== activePointerId) {
+    return
+  }
+
+  const rail = event.currentTarget as HTMLElement
+  const dragged = isDragging.value
+
+  if (rail.hasPointerCapture(event.pointerId)) {
+    rail.releasePointerCapture(event.pointerId)
+  }
+
+  resetPointerState()
+
+  if (dragged) {
+    suppressNextClick = true
+    scheduleClickReset()
+  }
+}
+
+function handlePointerLeave(event: PointerEvent) {
+  if (event.pointerId === activePointerId && !isDragging.value) {
+    resetPointerState()
+  }
+}
+
+function handleLostPointerCapture(event: PointerEvent) {
+  if (event.pointerId === activePointerId) {
+    resetPointerState()
+  }
+}
+
+function handleClickCapture(event: MouseEvent) {
+  if (!suppressNextClick) {
+    return
+  }
+
+  suppressNextClick = false
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+function handleWheel(event: WheelEvent) {
+  if (event.ctrlKey) return
+
+  const rail = event.currentTarget as HTMLElement
+  const result = resolveScrollRailWheel({
+    clientWidth: rail.clientWidth,
+    deltaMode: event.deltaMode,
+    deltaX: event.deltaX,
+    deltaY: event.deltaY,
+    scrollLeft: rail.scrollLeft,
+    scrollWidth: rail.scrollWidth,
+  })
+
+  if (!result.consumed) return
+
+  rail.scrollLeft = result.scrollLeft
+  event.preventDefault()
+}
+
+onBeforeUnmount(() => {
+  if (clickResetTimer !== undefined) {
+    clearTimeout(clickResetTimer)
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+    class="sky-scroll-rail"
+    :class="{ 'sky-scroll-rail--dragging': isDragging }"
+    role="region"
+    :aria-label="label || undefined"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="finishPointer"
+    @pointercancel="finishPointer"
+    @pointerleave="handlePointerLeave"
+    @lostpointercapture="handleLostPointerCapture"
+    @click.capture="handleClickCapture"
+    @wheel="handleWheel"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/SkySection.vue b/frontend/src/ui/SkySection.vue
new file mode 100644
index 0000000..633d1a4
--- /dev/null
+++ b/frontend/src/ui/SkySection.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <section v-bind="$attrs" class="sky-section">
+    <h2 class="sky-section__title">{{ title }}</h2>
+    <slot />
+  </section>
+</template>
diff --git a/frontend/src/ui/SkyTabBar.vue b/frontend/src/ui/SkyTabBar.vue
new file mode 100644
index 0000000..b4497b6
--- /dev/null
+++ b/frontend/src/ui/SkyTabBar.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <nav v-bind="$attrs" class="sky-tabbar" :aria-label="label">
+    <div class="sky-tabbar__inner">
+      <div class="sky-tabbar__pane">
+        <slot />
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/frontend/src/ui/controls.css b/frontend/src/ui/controls.css
new file mode 100644
index 0000000..e19b726
--- /dev/null
+++ b/frontend/src/ui/controls.css
@@ -0,0 +1,1147 @@
+.sky-button,
+.sky-link,
+.sky-chip,
+.sky-field__clear,
+.sky-list-item__row,
+.sky-searchbar__clear,
+.sky-segmented-button,
+.sky-tab-button {
+  box-sizing: border-box;
+  border: 0;
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sky-button,
+.sky-link,
+.sky-chip,
+.sky-list-item__row,
+.sky-segmented-button,
+.sky-tab-button {
+  min-height: var(--sky-touch-target, 44px);
+}
+
+.sky-button,
+.sky-link,
+.sky-chip,
+.sky-segmented-button,
+.sky-tab-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+}
+
+.sky-button:focus-visible,
+.sky-link:focus-visible,
+.sky-chip:focus-visible,
+.sky-field__clear:focus-visible,
+.sky-list-item__row:focus-visible,
+.sky-segmented-button:focus-visible,
+.sky-tab-button:focus-visible {
+  outline: 2px solid var(--sky-app-accent, #3b82f6);
+  outline-offset: 2px;
+}
+
+.sky-button {
+  min-width: var(--sky-touch-target, 44px);
+  gap: 7px;
+  padding: 0 16px;
+  border: 1px solid transparent;
+  border-radius: var(--sky-radius-control, 12px);
+  background: var(--sky-app-accent, #3b82f6);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.2;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    opacity 140ms ease,
+    transform 100ms ease;
+}
+
+.sky-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.sky-button--secondary {
+  background: var(--sky-surface-muted, #e6e9ee);
+  color: var(--sky-text, #111827);
+}
+
+.sky-button--danger {
+  background: var(--sky-danger, #dc2626);
+}
+
+.sky-button--plain {
+  background: transparent;
+  color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-button--outline {
+  border-color: var(--sky-hairline, rgba(15, 23, 42, 0.14));
+  background: transparent;
+  color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-button--danger.sky-button--outline {
+  border-color: var(--sky-danger, #dc2626);
+  color: var(--sky-danger, #dc2626);
+}
+
+.sky-button--rounded {
+  border-radius: 999px;
+}
+
+.sky-button--large {
+  min-height: 50px;
+  font-size: 15px;
+}
+
+.sky-button--block {
+  width: 100%;
+}
+
+.sky-button--icon-only {
+  width: var(--sky-touch-target, 44px);
+  padding: 0;
+}
+
+.sky-button:disabled,
+.sky-button[aria-disabled='true'],
+.sky-link:disabled,
+.sky-link[aria-disabled='true'],
+.sky-chip:disabled,
+.sky-chip[aria-disabled='true'],
+.sky-tab-button:disabled {
+  cursor: default;
+  opacity: 0.42;
+}
+
+.sky-link {
+  min-width: var(--sky-touch-target, 44px);
+  gap: 6px;
+  padding: 0 8px;
+  border-radius: var(--sky-radius-control, 12px);
+  background: transparent;
+  color: var(--sky-app-accent, #3b82f6);
+  font-size: 14px;
+}
+
+.sky-link:active:not(:disabled) {
+  background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14));
+}
+
+.sky-link--icon-only {
+  width: var(--sky-touch-target, 44px);
+  padding: 0;
+  border-radius: 50%;
+}
+
+.sky-badge {
+  min-width: 18px;
+  min-height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: var(--sky-surface-muted, #e6e9ee);
+  color: var(--sky-muted, #64748b);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.sky-badge--info {
+  background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14));
+  color: var(--sky-app-accent, #2563eb);
+}
+
+.sky-badge--success {
+  background: rgba(5, 150, 105, 0.14);
+  color: var(--sky-success, #059669);
+}
+
+.sky-badge--warning {
+  background: rgba(245, 158, 11, 0.16);
+  color: #b45309;
+}
+
+.sky-badge--danger {
+  background: rgba(220, 38, 38, 0.14);
+  color: var(--sky-danger, #dc2626);
+}
+
+.sky-block {
+  min-width: 0;
+  margin: var(--sky-space-3, 12px) 0;
+}
+
+.sky-block--inset {
+  margin-right: var(--sky-page-gutter, 14px);
+  margin-left: var(--sky-page-gutter, 14px);
+}
+
+.sky-block--strong {
+  padding: var(--sky-space-4, 16px);
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.1));
+  border-radius: var(--sky-radius-card, 16px);
+  background: var(--sky-surface, #ffffff);
+}
+
+.sky-block-title {
+  margin: var(--sky-space-5, 20px) 2px var(--sky-space-2, 8px);
+  padding: 0;
+  color: var(--sky-muted, #64748b);
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 20px;
+}
+
+.sky-card,
+.sky-surface {
+  min-width: 0;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.1));
+  border-radius: var(--sky-radius-card, 16px);
+  background: var(--sky-surface, #ffffff);
+  color: var(--sky-text, #111827);
+}
+
+.sky-card__content {
+  min-width: 0;
+  padding: var(--sky-space-4, 16px);
+}
+
+.sky-status-card {
+  min-width: 0;
+  padding: 14px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sky-space-3, 12px);
+}
+
+.sky-status-card__icon {
+  width: 40px;
+  height: 40px;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  border-radius: var(--sky-radius-control, 12px);
+  background: var(--sky-surface-muted, #e6e9ee);
+  color: var(--sky-muted, #64748b);
+}
+
+.sky-status-card__copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sky-status-card__title,
+.sky-status-card__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-status-card__title {
+  color: var(--sky-text, #111827);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 20px;
+}
+
+.sky-status-card__subtitle {
+  color: var(--sky-muted, #64748b);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.sky-status-card__trailing {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.sky-status-card__indicator {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--sky-muted, #64748b);
+}
+
+.sky-status-card--accent .sky-status-card__icon {
+  background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14));
+  color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-status-card--accent .sky-status-card__indicator {
+  background: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-status-card--success .sky-status-card__icon {
+  background: var(--sky-success-soft, rgba(5, 150, 105, 0.14));
+  color: var(--sky-success, #059669);
+}
+
+.sky-status-card--success .sky-status-card__indicator {
+  background: var(--sky-success, #059669);
+}
+
+.sky-status-card--warning .sky-status-card__icon {
+  background: var(--sky-warning-soft, rgba(245, 158, 11, 0.16));
+  color: var(--sky-warning, #b45309);
+}
+
+.sky-status-card--warning .sky-status-card__indicator {
+  background: var(--sky-warning, #b45309);
+}
+
+.sky-status-card--danger .sky-status-card__icon {
+  background: var(--sky-danger-soft, rgba(220, 38, 38, 0.14));
+  color: var(--sky-danger, #dc2626);
+}
+
+.sky-status-card--danger .sky-status-card__indicator {
+  background: var(--sky-danger, #dc2626);
+}
+
+.sky-surface {
+  padding: var(--sky-space-3, 12px);
+}
+
+.sky-surface--highlight {
+  border-color: var(--sky-app-accent, #3b82f6);
+  background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14));
+}
+
+.sky-chip {
+  min-width: var(--sky-touch-target, 44px);
+  flex: none;
+  gap: 5px;
+  padding: 0 13px;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.1));
+  border-radius: 999px;
+  background: var(--sky-surface-muted, #e6e9ee);
+  color: var(--sky-text, #111827);
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.sky-chip--selected {
+  border-color: var(--sky-app-accent, #3b82f6);
+  background: var(--sky-app-accent, #3b82f6);
+  color: #ffffff;
+}
+
+.sky-icon {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.sky-icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.sky-list {
+  margin: var(--sky-space-3, 12px) 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sky-list--inset {
+  overflow: hidden;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.1));
+  border-radius: var(--sky-radius-card, 16px);
+}
+
+.sky-list--strong,
+.sky-list--inset {
+  background: var(--sky-surface, #ffffff);
+}
+
+.sky-list--nested {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.sky-list--flush {
+  margin: 0;
+}
+
+.sky-list--compact > .sky-list-item > .sky-list-item__row,
+.sky-list--compact > .sky-field {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.sky-list--compact
+  > .sky-field:not(.sky-field--inline):not(.sky-field--outline)
+  .sky-field__label {
+  position: absolute;
+  z-index: 1;
+  top: 9px;
+  left: 12px;
+  margin: 0;
+  pointer-events: none;
+}
+
+.sky-list--compact
+  > .sky-field:not(.sky-field--inline):not(.sky-field--outline)
+  .sky-field__input {
+  padding-top: 14px;
+}
+
+.sky-list--compact
+  > .sky-field:not(.sky-field--inline):not(.sky-field--outline)
+  .sky-field__leading,
+.sky-list--compact
+  > .sky-field:not(.sky-field--inline):not(.sky-field--outline)
+  .sky-field__trailing {
+  transform: translateY(7px);
+}
+
+.sky-list-item,
+.sky-field {
+  position: relative;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sky-list-item + .sky-list-item::before,
+.sky-field + .sky-field::before,
+.sky-list-item + .sky-field::before,
+.sky-field + .sky-list-item::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 12px;
+  left: 12px;
+  height: 1px;
+  content: '';
+  background: var(--sky-hairline, rgba(15, 23, 42, 0.1));
+  pointer-events: none;
+}
+
+.sky-list-item__row {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 10px 12px;
+  background: transparent;
+  color: var(--sky-text, #111827);
+  text-align: left;
+  text-decoration: none;
+}
+
+button.sky-list-item__row,
+a.sky-list-item__row,
+label.sky-list-item__row {
+  cursor: pointer;
+}
+
+.sky-list-item__row:active {
+  background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14));
+}
+
+.sky-list-item--disabled {
+  opacity: 0.45;
+}
+
+.sky-list-item__media,
+.sky-list-item__after {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.sky-list-item__media {
+  color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-list-item__content {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sky-list-item__header {
+  overflow: hidden;
+  color: var(--sky-muted, #64748b);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-list-item__title {
+  overflow: hidden;
+  color: var(--sky-text, #111827);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-list-item__subtitle {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--sky-muted, #64748b);
+  font-size: 12px;
+  line-height: 16px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.sky-list-item__after {
+  max-width: 42%;
+  color: var(--sky-muted, #64748b);
+  font-size: 12px;
+  text-align: right;
+}
+
+.sky-list-item__chevron {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-top: 1.5px solid var(--sky-muted, #64748b);
+  border-right: 1.5px solid var(--sky-muted, #64748b);
+  opacity: 0.65;
+  transform: rotate(45deg);
+}
+
+.sky-field {
+  padding: 10px 12px;
+  background: var(--sky-surface, #ffffff);
+}
+
+.sky-field__label {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--sky-muted, #64748b);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 15px;
+}
+
+.sky-field__control {
+  min-width: 0;
+  min-height: var(--sky-touch-target, 44px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sky-field--outline .sky-field__control {
+  padding: 0 10px;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.14));
+  border-radius: var(--sky-radius-control, 12px);
+}
+
+.sky-field--outline:focus-within .sky-field__control {
+  border-color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-field__input {
+  min-width: 0;
+  min-height: var(--sky-touch-target, 44px);
+  padding: 0;
+  flex: 1;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--sky-text, #111827);
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.sky-field__input::placeholder {
+  color: var(--sky-muted, #64748b);
+  opacity: 0.72;
+}
+
+.sky-field__textarea {
+  min-height: 72px;
+  padding: 10px 0;
+  resize: vertical;
+}
+
+.sky-field__leading,
+.sky-field__trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--sky-muted, #64748b);
+}
+
+.sky-field--has-leading .sky-field__label {
+  padding-left: 28px;
+}
+
+.sky-field__leading {
+  min-width: 20px;
+  justify-content: center;
+  color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-field__clear {
+  width: var(--sky-touch-target, 44px);
+  height: var(--sky-touch-target, 44px);
+  display: grid;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+
+.sky-field__clear > span {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  display: block;
+  border-radius: 50%;
+  background: var(--sky-muted, #64748b);
+}
+
+.sky-field__clear > span::before,
+.sky-field__clear > span::after {
+  width: 9px;
+  height: 1.5px;
+  position: absolute;
+  top: 8px;
+  left: 4.5px;
+  content: '';
+  border-radius: 2px;
+  background: var(--sky-surface, #ffffff);
+}
+
+.sky-field__clear > span::before {
+  transform: rotate(45deg);
+}
+
+.sky-field__clear > span::after {
+  transform: rotate(-45deg);
+}
+
+.sky-field__clear:disabled {
+  cursor: default;
+  opacity: 0.42;
+}
+
+.sky-field__input[type='number'] {
+  appearance: textfield;
+}
+
+.sky-field__input[type='number']::-webkit-inner-spin-button,
+.sky-field__input[type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.sky-field__help,
+.sky-field__error {
+  display: block;
+  margin-top: 5px;
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.sky-field__help {
+  color: var(--sky-muted, #64748b);
+}
+
+.sky-field__error,
+.sky-field--error .sky-field__label {
+  color: var(--sky-danger, #dc2626);
+}
+
+.sky-field--error .sky-field__control {
+  border-color: var(--sky-danger, #dc2626);
+}
+
+.sky-field--disabled {
+  opacity: 0.45;
+}
+
+.sky-searchbar {
+  min-width: 0;
+  min-height: var(--sky-touch-target, 44px);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px 0 13px;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.1));
+  border-radius: var(--sky-radius-control, 12px);
+  background: var(--sky-surface, #ffffff);
+}
+
+.sky-searchbar:focus-within {
+  border-color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-searchbar__icon {
+  width: 14px;
+  height: 14px;
+  position: relative;
+  flex: none;
+  border: 1.6px solid var(--sky-muted, #64748b);
+  border-radius: 50%;
+  opacity: 0.8;
+}
+
+.sky-searchbar__icon::after {
+  width: 6px;
+  height: 1.6px;
+  position: absolute;
+  right: -5px;
+  bottom: -2px;
+  content: '';
+  border-radius: 2px;
+  background: var(--sky-muted, #64748b);
+  transform: rotate(45deg);
+  transform-origin: left center;
+}
+
+.sky-searchbar__input {
+  min-width: 0;
+  min-height: 42px;
+  padding: 0 4px;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  color: var(--sky-text, #111827);
+  font: inherit;
+  font-size: 14px;
+}
+
+.sky-searchbar__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.sky-searchbar__input::placeholder {
+  color: var(--sky-muted, #64748b);
+  opacity: 0.72;
+}
+
+.sky-searchbar__clear {
+  width: var(--sky-touch-target, 44px);
+  height: var(--sky-touch-target, 44px);
+  position: relative;
+  display: grid;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+
+.sky-searchbar__clear > span {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  display: block;
+  border-radius: 50%;
+  background: var(--sky-muted, #64748b);
+}
+
+.sky-searchbar__clear > span::before,
+.sky-searchbar__clear > span::after {
+  width: 9px;
+  height: 1.5px;
+  position: absolute;
+  top: 8px;
+  left: 4.5px;
+  content: '';
+  border-radius: 2px;
+  background: var(--sky-surface, #ffffff);
+}
+
+.sky-searchbar__clear > span::before {
+  transform: rotate(45deg);
+}
+
+.sky-searchbar__clear > span::after {
+  transform: rotate(-45deg);
+}
+
+.sky-searchbar--disabled {
+  opacity: 0.45;
+}
+
+.sky-toggle,
+.sky-radio {
+  min-width: var(--sky-touch-target, 44px);
+  min-height: var(--sky-touch-target, 44px);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  cursor: pointer;
+}
+
+.sky-toggle__input,
+.sky-radio__input {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.sky-toggle__track {
+  width: 42px;
+  height: 24px;
+  position: relative;
+  flex: none;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.14));
+  border-radius: 999px;
+  background: var(--sky-surface-muted, #e6e9ee);
+  transition: background-color 150ms ease;
+}
+
+.sky-toggle__thumb {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
+  transition: transform 150ms ease;
+}
+
+.sky-toggle--checked .sky-toggle__track {
+  border-color: var(--sky-app-accent, #3b82f6);
+  background: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-toggle--checked .sky-toggle__thumb {
+  transform: translateX(18px);
+}
+
+.sky-toggle__input:focus-visible + .sky-toggle__track,
+.sky-radio__input:focus-visible + .sky-radio__mark {
+  outline: 2px solid var(--sky-app-accent, #3b82f6);
+  outline-offset: 2px;
+}
+
+.sky-toggle--disabled,
+.sky-radio--disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.sky-toggle__label,
+.sky-radio__label {
+  color: var(--sky-text, #111827);
+  font-size: 14px;
+}
+
+.sky-radio__mark {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  flex: none;
+  border: 2px solid var(--sky-muted, #64748b);
+  border-radius: 50%;
+  background: var(--sky-surface, #ffffff);
+}
+
+.sky-radio--checked .sky-radio__mark {
+  border-color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-radio--checked .sky-radio__mark::after {
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  content: '';
+  border-radius: 50%;
+  background: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-range {
+  min-width: 0;
+  min-height: var(--sky-touch-target, 44px);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.sky-range--captioned {
+  position: relative;
+}
+
+.sky-range__caption {
+  position: absolute;
+  z-index: 1;
+  top: 2px;
+  left: 0;
+  color: var(--sky-muted, #64748b);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 15px;
+  pointer-events: none;
+}
+
+.sky-range--captioned .sky-range__input {
+  padding-top: 14px;
+}
+
+.sky-range--captioned .sky-range__label {
+  transform: translateY(7px);
+}
+
+.sky-range__input {
+  width: 100%;
+  min-width: 0;
+  height: var(--sky-touch-target, 44px);
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  appearance: none;
+  outline: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.sky-range__input::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--sky-app-accent, #3b82f6) 0,
+    var(--sky-app-accent, #3b82f6) var(--sky-range-progress),
+    var(--sky-surface-muted, #e6e9ee) var(--sky-range-progress),
+    var(--sky-surface-muted, #e6e9ee) 100%
+  );
+}
+
+.sky-range__input::-webkit-slider-thumb {
+  width: 22px;
+  height: 22px;
+  margin-top: -9px;
+  appearance: none;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.14));
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.28);
+}
+
+.sky-range__input:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 3px var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14)),
+    0 1px 5px rgba(15, 23, 42, 0.28);
+}
+
+.sky-range--disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.sky-range--disabled .sky-range__input {
+  cursor: default;
+}
+
+.sky-range__label {
+  color: var(--sky-muted, #64748b);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sky-segmented {
+  min-width: 0;
+  min-height: var(--sky-touch-target, 44px);
+  display: flex;
+  align-items: stretch;
+  gap: 3px;
+  padding: 3px;
+  border: 1px solid var(--sky-hairline, rgba(15, 23, 42, 0.1));
+  border-radius: var(--sky-radius-control, 12px);
+  background: var(--sky-surface-muted, #e6e9ee);
+}
+
+.sky-segmented-button {
+  min-width: 0;
+  min-height: 36px;
+  padding: 0 10px;
+  flex: 1 1 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--sky-muted, #64748b);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.sky-segmented-button--active {
+  background: var(--sky-surface, #ffffff);
+  color: var(--sky-text, #111827);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
+}
+
+.sky-segmented-button:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.sky-spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  display: inline-block;
+  flex: none;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: sky-spinner-turn 700ms linear infinite;
+}
+
+@keyframes sky-spinner-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sky-progress {
+  width: 100%;
+  height: 5px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--sky-surface-muted, #e6e9ee);
+}
+
+.sky-progress__value {
+  height: 100%;
+  display: block;
+  border-radius: inherit;
+  background: var(--sky-app-accent, #3b82f6);
+  transition: width 180ms ease;
+}
+
+.sky-tab-button {
+  min-width: 0;
+  min-height: var(--sky-tabbar-height, 64px);
+  position: relative;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 3px;
+  padding: 6px 4px;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sky-muted, #64748b);
+}
+
+.sky-tab-button--active {
+  color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-tabbar .sky-tab-button {
+  color: var(--sky-muted, #64748b);
+}
+
+.sky-tabbar .sky-tab-button--active {
+  color: var(--sky-app-accent, #3b82f6);
+}
+
+.sky-tab-button:active:not(:disabled) {
+  background: var(--sky-app-accent-soft, rgba(59, 130, 246, 0.14));
+}
+
+.sky-tab-button__icon {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sky-tab-button__label {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-tab-button__icon,
+.sky-tab-button__label {
+  z-index: 1;
+}
+
+.sky-tab-button--active .sky-tab-button__label {
+  font-weight: 750;
+}
+
+.sky-toolbar-pane {
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+}
+
+.sky-visually-hidden {
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sky-button,
+  .sky-progress__value,
+  .sky-toggle__track,
+  .sky-toggle__thumb {
+    transition-duration: 0.01ms;
+  }
+
+  .sky-spinner {
+    animation-duration: 1.5s;
+  }
+}
diff --git a/frontend/src/ui/controls/SkyBadge.vue b/frontend/src/ui/controls/SkyBadge.vue
new file mode 100644
index 0000000..2118426
--- /dev/null
+++ b/frontend/src/ui/controls/SkyBadge.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    tone?: 'danger' | 'info' | 'neutral' | 'success' | 'warning'
+  }>(),
+  {
+    tone: 'neutral',
+  },
+)
+</script>
+
+<template>
+  <span v-bind="$attrs" class="sky-badge" :class="`sky-badge--${tone}`">
+    <slot />
+  </span>
+</template>
diff --git a/frontend/src/ui/controls/SkyBlock.vue b/frontend/src/ui/controls/SkyBlock.vue
new file mode 100644
index 0000000..adf6c65
--- /dev/null
+++ b/frontend/src/ui/controls/SkyBlock.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    component?: 'div' | 'section'
+    inset?: boolean
+    strong?: boolean
+  }>(),
+  {
+    component: 'div',
+    inset: false,
+    strong: false,
+  },
+)
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="$attrs"
+    class="sky-block"
+    :class="{
+      'sky-block--inset': inset,
+      'sky-block--strong': strong,
+    }"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyBlockTitle.vue b/frontend/src/ui/controls/SkyBlockTitle.vue
new file mode 100644
index 0000000..38f6fa6
--- /dev/null
+++ b/frontend/src/ui/controls/SkyBlockTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    component?: 'div' | 'h2' | 'h3'
+  }>(),
+  {
+    component: 'h2',
+  },
+)
+</script>
+
+<template>
+  <component :is="component" v-bind="$attrs" class="sky-block-title">
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyButton.vue b/frontend/src/ui/controls/SkyButton.vue
new file mode 100644
index 0000000..ee3568b
--- /dev/null
+++ b/frontend/src/ui/controls/SkyButton.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    block?: boolean
+    component?: 'a' | 'button'
+    disabled?: boolean
+    href?: string
+    iconOnly?: boolean
+    large?: boolean
+    outline?: boolean
+    rounded?: boolean
+    type?: 'button' | 'reset' | 'submit'
+    variant?: 'danger' | 'plain' | 'primary' | 'secondary'
+  }>(),
+  {
+    block: false,
+    component: 'button',
+    disabled: false,
+    href: undefined,
+    iconOnly: false,
+    large: false,
+    outline: false,
+    rounded: false,
+    type: 'button',
+    variant: 'primary',
+  },
+)
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const elementProps = computed<Record<string, unknown>>(() => {
+  if (props.component === 'a') {
+    return {
+      'aria-disabled': props.disabled || undefined,
+      href: props.disabled ? undefined : props.href,
+      tabindex: props.disabled ? -1 : undefined,
+    }
+  }
+
+  return {
+    disabled: props.disabled,
+    type: props.type,
+  }
+})
+
+function handleClick(event: MouseEvent): void {
+  if (props.disabled) {
+    event.preventDefault()
+    event.stopPropagation()
+    return
+  }
+
+  emit('click', event)
+}
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="{ ...$attrs, ...elementProps }"
+    class="sky-button"
+    :class="[
+      `sky-button--${variant}`,
+      {
+        'sky-button--block': block,
+        'sky-button--icon-only': iconOnly,
+        'sky-button--large': large,
+        'sky-button--outline': outline,
+        'sky-button--rounded': rounded,
+      },
+    ]"
+    @click="handleClick"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyCard.vue b/frontend/src/ui/controls/SkyCard.vue
new file mode 100644
index 0000000..af6b08d
--- /dev/null
+++ b/frontend/src/ui/controls/SkyCard.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    component?: 'article' | 'div' | 'section'
+    contentWrap?: boolean
+  }>(),
+  {
+    component: 'div',
+    contentWrap: true,
+  },
+)
+</script>
+
+<template>
+  <component :is="component" v-bind="$attrs" class="sky-card">
+    <div v-if="contentWrap" class="sky-card__content">
+      <slot />
+    </div>
+    <slot v-else />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyChip.vue b/frontend/src/ui/controls/SkyChip.vue
new file mode 100644
index 0000000..313448a
--- /dev/null
+++ b/frontend/src/ui/controls/SkyChip.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    component?: 'a' | 'button' | 'span'
+    disabled?: boolean
+    href?: string
+    selected?: boolean
+    type?: 'button' | 'reset' | 'submit'
+  }>(),
+  {
+    component: 'button',
+    disabled: false,
+    href: undefined,
+    selected: undefined,
+    type: 'button',
+  },
+)
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const elementProps = computed<Record<string, unknown>>(() => {
+  if (props.component === 'button') {
+    return { disabled: props.disabled, type: props.type }
+  }
+
+  if (props.component === 'a') {
+    return {
+      'aria-disabled': props.disabled || undefined,
+      href: props.disabled ? undefined : props.href,
+      tabindex: props.disabled ? -1 : undefined,
+    }
+  }
+
+  return {}
+})
+
+function handleClick(event: MouseEvent): void {
+  if (props.disabled) {
+    event.preventDefault()
+    event.stopPropagation()
+    return
+  }
+
+  emit('click', event)
+}
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="{ ...$attrs, ...elementProps }"
+    class="sky-chip"
+    :class="{ 'sky-chip--selected': selected }"
+    :aria-pressed="
+      component === 'button' && selected !== undefined ? selected : undefined
+    "
+    @click="handleClick"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyField.test.ts b/frontend/src/ui/controls/SkyField.test.ts
new file mode 100644
index 0000000..35951c6
--- /dev/null
+++ b/frontend/src/ui/controls/SkyField.test.ts
@@ -0,0 +1,115 @@
+import { createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkyField from '@/ui/controls/SkyField.vue'
+
+describe('SkyField numeric constraints', () => {
+  it('forwards min, max, and step to the native input', async () => {
+    const app = createSSRApp(SkyField, {
+      ariaLabel: 'Primary frequency',
+      max: 999.9,
+      min: 0.1,
+      step: 0.1,
+      type: 'number',
+    })
+
+    const html = await renderToString(app)
+    const input = html.match(/<input[^>]+>/)?.[0] ?? ''
+
+    expect(input).toContain('aria-label="Primary frequency"')
+    expect(input).toContain('max="999.9"')
+    expect(input).toContain('min="0.1"')
+    expect(input).toContain('step="0.1"')
+  })
+
+  it('exposes the inline settings layout without changing input semantics', async () => {
+    const app = createSSRApp(SkyField, {
+      label: 'Service number',
+      layout: 'inline',
+      modelValue: '231',
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('sky-field--inline')
+    expect(html).toMatch(/<label[^>]+for="([^"]+)"/)
+    expect(html).toContain('value="231"')
+  })
+
+  it('marks fields with leading media so labels and controls share alignment', async () => {
+    const app = createSSRApp({
+      render: () =>
+        h(
+          SkyField,
+          { label: 'Primary frequency' },
+          { leading: () => h('span', 'icon') },
+        ),
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('sky-field--has-leading')
+    expect(html).toContain('sky-field__leading')
+  })
+
+  it('forwards text-entry hints to the native input', async () => {
+    const app = createSSRApp(SkyField, {
+      autocapitalize: 'none',
+      autocomplete: 'off',
+      autocorrect: 'off',
+      pattern: '[A-Z0-9]+',
+      spellcheck: false,
+      type: 'text',
+    })
+
+    const html = await renderToString(app)
+    const input = html.match(/<input[^>]+>/)?.[0] ?? ''
+
+    expect(input).toContain('autocapitalize="none"')
+    expect(input).toContain('autocomplete="off"')
+    expect(input).toContain('autocorrect="off"')
+    expect(input).toContain('pattern="[A-Z0-9]+"')
+    expect(input).toContain('spellcheck="false"')
+  })
+
+  it('renders an explicitly labelled clear control only for a non-empty value', async () => {
+    const app = createSSRApp(SkyField, {
+      clearButton: true,
+      clearLabel: 'Clear email',
+      modelValue: 'alex@example.com',
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('class="sky-field__clear"')
+    expect(html).toContain('type="button"')
+    expect(html).toContain('aria-label="Clear email"')
+  })
+
+  it('does not expose an unnamed clear control', async () => {
+    const app = createSSRApp(SkyField, {
+      clearButton: true,
+      modelValue: 'alex@example.com',
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).not.toContain('sky-field__clear')
+  })
+
+  it('declares its accessible clear event without changing existing events', () => {
+    const component = SkyField as unknown as { emits: string[] }
+
+    expect(component.emits).toEqual(
+      expect.arrayContaining([
+        'blur',
+        'change',
+        'clear',
+        'focus',
+        'input',
+        'update:modelValue',
+      ]),
+    )
+  })
+})
diff --git a/frontend/src/ui/controls/SkyField.vue b/frontend/src/ui/controls/SkyField.vue
new file mode 100644
index 0000000..eb587d7
--- /dev/null
+++ b/frontend/src/ui/controls/SkyField.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { computed, useId, useSlots, type CSSProperties } from 'vue'
+
+import { useComposedFieldValue } from '@/ui/controls/useComposedFieldValue'
+
+defineOptions({ inheritAttrs: false })
+
+type FieldValue = number | string
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    autocapitalize?:
+      | 'characters'
+      | 'none'
+      | 'off'
+      | 'on'
+      | 'sentences'
+      | 'words'
+    autocomplete?: string
+    autocorrect?: 'off' | 'on'
+    clearButton?: boolean
+    clearLabel?: string
+    disabled?: boolean
+    error?: string
+    help?: string
+    id?: string
+    inputMode?:
+      | 'decimal'
+      | 'email'
+      | 'none'
+      | 'numeric'
+      | 'search'
+      | 'tel'
+      | 'text'
+      | 'url'
+    inputStyle?: CSSProperties
+    label?: string
+    layout?: 'inline' | 'stacked'
+    max?: number | string
+    maxlength?: number | string
+    min?: number | string
+    modelValue?: FieldValue
+    name?: string
+    outline?: boolean
+    pattern?: string
+    placeholder?: string
+    readonly?: boolean
+    required?: boolean
+    rows?: number
+    spellcheck?: boolean
+    step?: number | string
+    type?:
+      | 'datetime-local'
+      | 'email'
+      | 'number'
+      | 'password'
+      | 'search'
+      | 'tel'
+      | 'text'
+      | 'textarea'
+      | 'time'
+      | 'url'
+    value?: FieldValue
+  }>(),
+  {
+    ariaLabel: '',
+    autocapitalize: undefined,
+    autocomplete: undefined,
+    autocorrect: undefined,
+    clearButton: false,
+    clearLabel: '',
+    disabled: false,
+    error: '',
+    help: '',
+    id: undefined,
+    inputMode: undefined,
+    inputStyle: undefined,
+    label: '',
+    layout: 'stacked',
+    max: undefined,
+    maxlength: undefined,
+    min: undefined,
+    modelValue: undefined,
+    name: undefined,
+    outline: false,
+    pattern: undefined,
+    placeholder: '',
+    readonly: false,
+    required: false,
+    rows: 3,
+    spellcheck: undefined,
+    step: undefined,
+    type: 'text',
+    value: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  blur: [event: FocusEvent]
+  change: [event: Event]
+  clear: []
+  focus: [event: FocusEvent]
+  input: [event: Event]
+  'update:modelValue': [value: string]
+}>()
+
+const generatedId = useId()
+const slots = useSlots()
+const inputId = computed(() => props.id || generatedId)
+const helpId = computed(() => `${inputId.value}-help`)
+const errorId = computed(() => `${inputId.value}-error`)
+const effectiveValue = computed(() => props.modelValue ?? props.value ?? '')
+const {
+  clear: clearValue,
+  endComposition,
+  input,
+  localValue,
+  startComposition,
+} = useComposedFieldValue(effectiveValue, (value) =>
+  emit('update:modelValue', value),
+)
+const hasClearButton = computed(
+  () =>
+    props.clearButton &&
+    Boolean(props.clearLabel) &&
+    localValue.value.length > 0,
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.help) ids.push(helpId.value)
+  if (props.error) ids.push(errorId.value)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+function fieldValue(event: Event): string {
+  const target = event.target
+  if (
+    !(target instanceof HTMLInputElement) &&
+    !(target instanceof HTMLTextAreaElement)
+  ) {
+    return ''
+  }
+  return target.value
+}
+
+function handleInput(event: Event): void {
+  const value = fieldValue(event)
+  input(value)
+  emit('input', event)
+}
+
+function handleCompositionEnd(event: CompositionEvent): void {
+  endComposition(fieldValue(event))
+}
+
+function clear(): void {
+  if (props.disabled || props.readonly) return
+  clearValue()
+  emit('clear')
+}
+</script>
+
+<template>
+  <li
+    v-bind="$attrs"
+    class="sky-field"
+    :class="{
+      'sky-field--disabled': disabled,
+      'sky-field--error': Boolean(error),
+      'sky-field--inline': layout === 'inline',
+      'sky-field--outline': outline,
+      'sky-field--has-leading': Boolean(slots.leading),
+    }"
+  >
+    <label v-if="label" class="sky-field__label" :for="inputId">
+      {{ label }}
+    </label>
+    <div class="sky-field__control">
+      <span v-if="$slots.leading" class="sky-field__leading">
+        <slot name="leading" />
+      </span>
+      <textarea
+        v-if="type === 'textarea'"
+        :id="inputId"
+        class="sky-field__input sky-field__textarea"
+        :aria-describedby="describedBy"
+        :aria-invalid="error ? true : undefined"
+        :aria-label="ariaLabel || undefined"
+        :autocapitalize="autocapitalize"
+        :autocorrect="autocorrect"
+        :disabled="disabled"
+        :maxlength="maxlength"
+        :name="name"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :required="required"
+        :rows="rows"
+        :spellcheck="spellcheck"
+        :style="inputStyle"
+        :value="localValue"
+        @blur="emit('blur', $event)"
+        @change="emit('change', $event)"
+        @compositionend="handleCompositionEnd"
+        @compositionstart="startComposition"
+        @focus="emit('focus', $event)"
+        @input="handleInput"
+      />
+      <input
+        v-else
+        :id="inputId"
+        class="sky-field__input"
+        :aria-describedby="describedBy"
+        :aria-invalid="error ? true : undefined"
+        :aria-label="ariaLabel || undefined"
+        :autocapitalize="autocapitalize"
+        :autocomplete="autocomplete"
+        :autocorrect="autocorrect"
+        :disabled="disabled"
+        :inputmode="inputMode"
+        :max="max"
+        :maxlength="maxlength"
+        :min="min"
+        :name="name"
+        :pattern="pattern"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :required="required"
+        :step="step"
+        :spellcheck="spellcheck"
+        :style="inputStyle"
+        :type="type"
+        :value="localValue"
+        @blur="emit('blur', $event)"
+        @change="emit('change', $event)"
+        @compositionend="handleCompositionEnd"
+        @compositionstart="startComposition"
+        @focus="emit('focus', $event)"
+        @input="handleInput"
+      />
+      <span v-if="$slots.trailing" class="sky-field__trailing">
+        <slot name="trailing" />
+      </span>
+      <button
+        v-if="hasClearButton"
+        class="sky-field__clear"
+        type="button"
+        :aria-label="clearLabel"
+        :disabled="disabled || readonly"
+        @pointerdown.prevent
+        @click="clear"
+      >
+        <span aria-hidden="true" />
+      </button>
+    </div>
+    <small v-if="help" :id="helpId" class="sky-field__help">{{ help }}</small>
+    <small v-if="error" :id="errorId" class="sky-field__error" role="alert">
+      {{ error }}
+    </small>
+  </li>
+</template>
diff --git a/frontend/src/ui/controls/SkyIcon.vue b/frontend/src/ui/controls/SkyIcon.vue
new file mode 100644
index 0000000..31ad451
--- /dev/null
+++ b/frontend/src/ui/controls/SkyIcon.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    size?: number | string
+  }>(),
+  {
+    label: '',
+    size: undefined,
+  },
+)
+
+const iconStyle = computed<CSSProperties | undefined>(() => {
+  if (props.size === undefined) return undefined
+  const size = typeof props.size === 'number' ? `${props.size}px` : props.size
+  return { height: size, width: size }
+})
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    class="sky-icon"
+    :style="iconStyle"
+    :aria-hidden="label ? undefined : true"
+    :aria-label="label || undefined"
+    :role="label ? 'img' : undefined"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/src/ui/controls/SkyLink.vue b/frontend/src/ui/controls/SkyLink.vue
new file mode 100644
index 0000000..04333b2
--- /dev/null
+++ b/frontend/src/ui/controls/SkyLink.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    component?: 'a' | 'button'
+    disabled?: boolean
+    href?: string
+    iconOnly?: boolean
+    type?: 'button' | 'reset' | 'submit'
+  }>(),
+  {
+    component: 'button',
+    disabled: false,
+    href: undefined,
+    iconOnly: false,
+    type: 'button',
+  },
+)
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const elementProps = computed<Record<string, unknown>>(() => {
+  if (props.component === 'a') {
+    return {
+      'aria-disabled': props.disabled || undefined,
+      href: props.disabled ? undefined : props.href,
+      tabindex: props.disabled ? -1 : undefined,
+    }
+  }
+
+  return {
+    disabled: props.disabled,
+    type: props.type,
+  }
+})
+
+function handleClick(event: MouseEvent): void {
+  if (props.disabled) {
+    event.preventDefault()
+    event.stopPropagation()
+    return
+  }
+
+  emit('click', event)
+}
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="{ ...$attrs, ...elementProps }"
+    class="sky-link"
+    :class="{ 'sky-link--icon-only': iconOnly }"
+    @click="handleClick"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyList.test.ts b/frontend/src/ui/controls/SkyList.test.ts
new file mode 100644
index 0000000..494714d
--- /dev/null
+++ b/frontend/src/ui/controls/SkyList.test.ts
@@ -0,0 +1,23 @@
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkyList from '@/ui/controls/SkyList.vue'
+
+describe('SkyList', () => {
+  it('exposes compact flush grouping as a reusable list contract', async () => {
+    const app = createSSRApp(SkyList, {
+      density: 'compact',
+      flush: true,
+      inset: true,
+      strong: true,
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('sky-list--compact')
+    expect(html).toContain('sky-list--flush')
+    expect(html).toContain('sky-list--inset')
+    expect(html).toContain('sky-list--strong')
+  })
+})
diff --git a/frontend/src/ui/controls/SkyList.vue b/frontend/src/ui/controls/SkyList.vue
new file mode 100644
index 0000000..ced7ccb
--- /dev/null
+++ b/frontend/src/ui/controls/SkyList.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    component?: 'div' | 'ol' | 'ul'
+    density?: 'compact' | 'regular'
+    flush?: boolean
+    inset?: boolean
+    nested?: boolean
+    strong?: boolean
+  }>(),
+  {
+    component: 'ul',
+    density: 'regular',
+    flush: false,
+    inset: false,
+    nested: false,
+    strong: false,
+  },
+)
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="$attrs"
+    class="sky-list"
+    :class="{
+      'sky-list--inset': inset,
+      'sky-list--nested': nested,
+      'sky-list--strong': strong,
+      'sky-list--compact': density === 'compact',
+      'sky-list--flush': flush,
+    }"
+    :role="component === 'div' ? 'list' : undefined"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyListItem.vue b/frontend/src/ui/controls/SkyListItem.vue
new file mode 100644
index 0000000..8be946f
--- /dev/null
+++ b/frontend/src/ui/controls/SkyListItem.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    after?: number | string
+    ariaLabel?: string
+    disabled?: boolean
+    header?: string
+    href?: string
+    label?: boolean
+    link?: boolean
+    linkComponent?: 'a' | 'button'
+    linkProps?: Record<string, unknown>
+    subtitle?: string
+    title?: string
+  }>(),
+  {
+    after: undefined,
+    ariaLabel: '',
+    disabled: false,
+    header: '',
+    href: undefined,
+    label: false,
+    link: false,
+    linkComponent: 'button',
+    linkProps: () => ({}),
+    subtitle: '',
+    title: '',
+  },
+)
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const rowComponent = computed(() => {
+  if (props.link) return props.linkComponent
+  if (props.label) return 'label'
+  return 'div'
+})
+
+const rowProps = computed<Record<string, unknown>>(() => {
+  if (!props.link) return {}
+
+  if (props.linkComponent === 'a') {
+    return {
+      ...props.linkProps,
+      'aria-disabled': props.disabled || undefined,
+      href: props.disabled ? undefined : props.href,
+      tabindex: props.disabled ? -1 : undefined,
+    }
+  }
+
+  return {
+    ...props.linkProps,
+    disabled: props.disabled,
+    type: props.linkProps.type ?? 'button',
+  }
+})
+
+function handleClick(event: MouseEvent): void {
+  if (props.disabled) {
+    event.preventDefault()
+    event.stopPropagation()
+    return
+  }
+
+  emit('click', event)
+}
+</script>
+
+<template>
+  <li
+    v-bind="$attrs"
+    class="sky-list-item"
+    :class="{
+      'sky-list-item--disabled': disabled,
+      'sky-list-item--label': label,
+      'sky-list-item--link': link,
+    }"
+  >
+    <component
+      :is="rowComponent"
+      v-bind="rowProps"
+      class="sky-list-item__row"
+      :aria-label="ariaLabel || undefined"
+      @click="handleClick"
+    >
+      <span v-if="$slots.media" class="sky-list-item__media">
+        <slot name="media" />
+      </span>
+
+      <span class="sky-list-item__content">
+        <small v-if="header || $slots.header" class="sky-list-item__header">
+          <slot name="header">{{ header }}</slot>
+        </small>
+        <strong v-if="title || $slots.title" class="sky-list-item__title">
+          <slot name="title">{{ title }}</slot>
+        </strong>
+        <span
+          v-if="subtitle || $slots.subtitle"
+          class="sky-list-item__subtitle"
+        >
+          <slot name="subtitle">{{ subtitle }}</slot>
+        </span>
+        <slot />
+      </span>
+
+      <span
+        v-if="after !== undefined || $slots.after"
+        class="sky-list-item__after"
+      >
+        <slot name="after">{{ after }}</slot>
+      </span>
+      <span v-if="link" class="sky-list-item__chevron" aria-hidden="true" />
+    </component>
+  </li>
+</template>
diff --git a/frontend/src/ui/controls/SkyProgress.vue b/frontend/src/ui/controls/SkyProgress.vue
new file mode 100644
index 0000000..c257130
--- /dev/null
+++ b/frontend/src/ui/controls/SkyProgress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    progress?: number
+  }>(),
+  {
+    label: '',
+    progress: 0,
+  },
+)
+
+const normalizedProgress = computed(() =>
+  Math.min(
+    1,
+    Math.max(0, Number.isFinite(props.progress) ? props.progress : 0),
+  ),
+)
+const percentage = computed(() => Math.round(normalizedProgress.value * 100))
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    class="sky-progress"
+    role="progressbar"
+    :aria-label="label || undefined"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :aria-valuenow="percentage"
+  >
+    <span class="sky-progress__value" :style="{ width: `${percentage}%` }" />
+  </div>
+</template>
diff --git a/frontend/src/ui/controls/SkyRadio.vue b/frontend/src/ui/controls/SkyRadio.vue
new file mode 100644
index 0000000..29e221d
--- /dev/null
+++ b/frontend/src/ui/controls/SkyRadio.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+type RadioValue = boolean | number | string
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    checked?: boolean
+    disabled?: boolean
+    modelValue?: RadioValue
+    name?: string
+    value: RadioValue
+  }>(),
+  {
+    ariaLabel: '',
+    checked: false,
+    disabled: false,
+    modelValue: undefined,
+    name: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  change: [event: Event]
+  'update:modelValue': [value: RadioValue]
+}>()
+
+const input = ref<HTMLInputElement | null>(null)
+const labelId = useId()
+const isChecked = computed(() =>
+  props.modelValue === undefined
+    ? props.checked
+    : props.modelValue === props.value,
+)
+
+function handleChange(event: Event): void {
+  if (!(event.target instanceof HTMLInputElement) || !event.target.checked) {
+    return
+  }
+  emit('update:modelValue', props.value)
+  emit('change', event)
+}
+
+function handleClick(event: MouseEvent): void {
+  if (
+    props.disabled ||
+    event.target === input.value ||
+    event.defaultPrevented
+  ) {
+    return
+  }
+  input.value?.click()
+}
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    class="sky-radio"
+    :class="{
+      'sky-radio--checked': isChecked,
+      'sky-radio--disabled': disabled,
+    }"
+    @click="handleClick"
+  >
+    <input
+      ref="input"
+      class="sky-radio__input"
+      type="radio"
+      :aria-label="ariaLabel || undefined"
+      :aria-labelledby="!ariaLabel && $slots.default ? labelId : undefined"
+      :checked="isChecked"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      @change="handleChange"
+    />
+    <span class="sky-radio__mark" aria-hidden="true" />
+    <span v-if="$slots.default" :id="labelId" class="sky-radio__label">
+      <slot />
+    </span>
+  </span>
+</template>
diff --git a/frontend/src/ui/controls/SkyRange.test.ts b/frontend/src/ui/controls/SkyRange.test.ts
new file mode 100644
index 0000000..5612023
--- /dev/null
+++ b/frontend/src/ui/controls/SkyRange.test.ts
@@ -0,0 +1,44 @@
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkyRange from '@/ui/controls/SkyRange.vue'
+
+describe('SkyRange', () => {
+  it('renders a native accessible range with the configured progress', async () => {
+    const app = createSSRApp(SkyRange, {
+      ariaLabel: 'Radio volume',
+      ariaValueText: '25%',
+      max: 100,
+      min: 0,
+      modelValue: 25,
+      step: 1,
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('type="range"')
+    expect(html).toContain('aria-label="Radio volume"')
+    expect(html).toContain('aria-valuetext="25%"')
+    expect(html).toContain('min="0"')
+    expect(html).toContain('max="100"')
+    expect(html).toContain('step="1"')
+    expect(html).toContain('--sky-range-progress:25%')
+  })
+
+  it('integrates an optional caption without replacing the accessible name', async () => {
+    const app = createSSRApp(SkyRange, {
+      ariaLabel: 'Radio volume',
+      caption: 'Volume',
+      modelValue: 64,
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('sky-range--captioned')
+    expect(html).toContain('class="sky-range__caption"')
+    expect(html).toContain('aria-hidden="true"')
+    expect(html).toContain('Volume')
+    expect(html).toContain('aria-label="Radio volume"')
+  })
+})
diff --git a/frontend/src/ui/controls/SkyRange.vue b/frontend/src/ui/controls/SkyRange.vue
new file mode 100644
index 0000000..ab832bb
--- /dev/null
+++ b/frontend/src/ui/controls/SkyRange.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, useId, type CSSProperties } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    ariaValueText?: string
+    caption?: string
+    disabled?: boolean
+    id?: string
+    max?: number
+    min?: number
+    modelValue?: number
+    name?: string
+    step?: number
+    value?: number
+  }>(),
+  {
+    ariaLabel: '',
+    ariaValueText: '',
+    caption: '',
+    disabled: false,
+    id: undefined,
+    max: 100,
+    min: 0,
+    modelValue: undefined,
+    name: undefined,
+    step: 1,
+    value: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  change: [event: Event]
+  input: [event: Event]
+  'update:modelValue': [value: number]
+}>()
+
+const generatedId = useId()
+const inputId = computed(() => props.id || generatedId)
+const effectiveValue = computed(
+  () => props.modelValue ?? props.value ?? props.min,
+)
+const normalizedProgress = computed(() => {
+  const span = props.max - props.min
+  if (span <= 0) return 0
+  return Math.min(
+    100,
+    Math.max(0, ((effectiveValue.value - props.min) / span) * 100),
+  )
+})
+const rangeStyle = computed<CSSProperties>(() => ({
+  '--sky-range-progress': `${normalizedProgress.value}%`,
+}))
+
+function handleInput(event: Event): void {
+  if (!(event.target instanceof HTMLInputElement)) return
+  emit('update:modelValue', event.target.valueAsNumber)
+  emit('input', event)
+}
+</script>
+
+<template>
+  <label
+    v-bind="$attrs"
+    class="sky-range"
+    :class="{
+      'sky-range--captioned': Boolean(caption || $slots.caption),
+      'sky-range--disabled': disabled,
+    }"
+    :for="inputId"
+  >
+    <span
+      v-if="caption || $slots.caption"
+      class="sky-range__caption"
+      aria-hidden="true"
+    >
+      <slot name="caption">{{ caption }}</slot>
+    </span>
+    <input
+      :id="inputId"
+      class="sky-range__input"
+      type="range"
+      :aria-label="ariaLabel || undefined"
+      :aria-valuetext="ariaValueText || undefined"
+      :disabled="disabled"
+      :max="max"
+      :min="min"
+      :name="name"
+      :step="step"
+      :style="rangeStyle"
+      :value="effectiveValue"
+      @change="emit('change', $event)"
+      @input="handleInput"
+    />
+    <span v-if="$slots.default" class="sky-range__label">
+      <slot />
+    </span>
+  </label>
+</template>
diff --git a/frontend/src/ui/controls/SkySearchbar.vue b/frontend/src/ui/controls/SkySearchbar.vue
new file mode 100644
index 0000000..0008cc1
--- /dev/null
+++ b/frontend/src/ui/controls/SkySearchbar.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed, ref, useId, watch } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    clearLabel: string
+    disabled?: boolean
+    id?: string
+    label?: string
+    modelValue?: string
+    name?: string
+    placeholder?: string
+    value?: string
+  }>(),
+  {
+    disabled: false,
+    id: undefined,
+    label: '',
+    modelValue: undefined,
+    name: undefined,
+    placeholder: '',
+    value: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  blur: [event: FocusEvent]
+  change: [event: Event]
+  clear: []
+  focus: [event: FocusEvent]
+  input: [event: Event]
+  'update:modelValue': [value: string]
+}>()
+
+const generatedId = useId()
+const inputId = computed(() => props.id || generatedId)
+const effectiveValue = computed(() => props.modelValue ?? props.value ?? '')
+const localValue = ref(effectiveValue.value)
+const composing = ref(false)
+
+watch(effectiveValue, (value) => {
+  if (!composing.value) localValue.value = value
+})
+
+function handleInput(event: Event): void {
+  if (!(event.target instanceof HTMLInputElement)) return
+  localValue.value = event.target.value
+  emit('update:modelValue', event.target.value)
+  emit('input', event)
+}
+
+function handleCompositionEnd(event: CompositionEvent): void {
+  composing.value = false
+  if (!(event.target instanceof HTMLInputElement)) return
+  localValue.value = event.target.value
+  emit('update:modelValue', event.target.value)
+}
+
+function clear(): void {
+  if (props.disabled) return
+  localValue.value = ''
+  emit('update:modelValue', '')
+  emit('clear')
+}
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    class="sky-searchbar"
+    :class="{ 'sky-searchbar--disabled': disabled }"
+  >
+    <label v-if="label" class="sky-visually-hidden" :for="inputId">
+      {{ label }}
+    </label>
+    <span class="sky-searchbar__icon" aria-hidden="true" />
+    <input
+      :id="inputId"
+      class="sky-searchbar__input"
+      type="search"
+      :aria-label="label || placeholder || undefined"
+      autocomplete="off"
+      :disabled="disabled"
+      :name="name"
+      :placeholder="placeholder"
+      :value="localValue"
+      @blur="emit('blur', $event)"
+      @change="emit('change', $event)"
+      @compositionend="handleCompositionEnd"
+      @compositionstart="composing = true"
+      @focus="emit('focus', $event)"
+      @input="handleInput"
+    />
+    <button
+      v-if="localValue"
+      class="sky-searchbar__clear"
+      type="button"
+      :aria-label="clearLabel"
+      :disabled="disabled"
+      @click="clear"
+    >
+      <span aria-hidden="true" />
+    </button>
+  </div>
+</template>
diff --git a/frontend/src/ui/controls/SkySegmented.vue b/frontend/src/ui/controls/SkySegmented.vue
new file mode 100644
index 0000000..8c113c2
--- /dev/null
+++ b/frontend/src/ui/controls/SkySegmented.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    ariaLabel?: string
+  }>(),
+  {
+    ariaLabel: '',
+  },
+)
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    class="sky-segmented"
+    role="group"
+    :aria-label="ariaLabel || undefined"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/ui/controls/SkySegmentedButton.vue b/frontend/src/ui/controls/SkySegmentedButton.vue
new file mode 100644
index 0000000..57f8787
--- /dev/null
+++ b/frontend/src/ui/controls/SkySegmentedButton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    active?: boolean
+    disabled?: boolean
+    type?: 'button' | 'reset' | 'submit'
+  }>(),
+  {
+    active: false,
+    disabled: false,
+    type: 'button',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    v-bind="$attrs"
+    class="sky-segmented-button"
+    :class="{ 'sky-segmented-button--active': active }"
+    :aria-pressed="active"
+    :disabled="disabled"
+    :type="type"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/frontend/src/ui/controls/SkySpinner.vue b/frontend/src/ui/controls/SkySpinner.vue
new file mode 100644
index 0000000..5eb37b0
--- /dev/null
+++ b/frontend/src/ui/controls/SkySpinner.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    size?: number | string
+  }>(),
+  {
+    label: '',
+    size: 20,
+  },
+)
+
+const spinnerStyle = computed<CSSProperties>(() => {
+  const size = typeof props.size === 'number' ? `${props.size}px` : props.size
+  return { height: size, width: size }
+})
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    class="sky-spinner"
+    :style="spinnerStyle"
+    :aria-hidden="label ? undefined : true"
+    :aria-label="label || undefined"
+    :role="label ? 'status' : undefined"
+  />
+</template>
diff --git a/frontend/src/ui/controls/SkyStatusCard.test.ts b/frontend/src/ui/controls/SkyStatusCard.test.ts
new file mode 100644
index 0000000..f07213c
--- /dev/null
+++ b/frontend/src/ui/controls/SkyStatusCard.test.ts
@@ -0,0 +1,34 @@
+import { createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkyStatusCard from '@/ui/controls/SkyStatusCard.vue'
+
+describe('SkyStatusCard', () => {
+  it('renders a textual live status with a semantic tone and indicator', async () => {
+    const app = createSSRApp({
+      render: () =>
+        h(
+          SkyStatusCard,
+          {
+            indicator: true,
+            ariaLive: 'polite',
+            subtitle: 'Yaca',
+            title: 'Connected to 120.5 MHz',
+            tone: 'success',
+          },
+          { icon: () => h('svg', { 'aria-hidden': 'true' }) },
+        ),
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('role="status"')
+    expect(html).toContain('aria-live="polite"')
+    expect(html).toContain('aria-atomic="true"')
+    expect(html).toContain('sky-status-card--success')
+    expect(html).toContain('sky-status-card__indicator')
+    expect(html).toContain('Connected to 120.5 MHz')
+    expect(html).toContain('Yaca')
+  })
+})
diff --git a/frontend/src/ui/controls/SkyStatusCard.vue b/frontend/src/ui/controls/SkyStatusCard.vue
new file mode 100644
index 0000000..46e6675
--- /dev/null
+++ b/frontend/src/ui/controls/SkyStatusCard.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import SkyCard from './SkyCard.vue'
+
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    ariaLive?: 'assertive' | 'off' | 'polite'
+    indicator?: boolean
+    subtitle?: string
+    title: string
+    tone?: 'accent' | 'danger' | 'neutral' | 'success' | 'warning'
+  }>(),
+  {
+    ariaLive: 'off',
+    indicator: false,
+    subtitle: '',
+    tone: 'neutral',
+  },
+)
+</script>
+
+<template>
+  <SkyCard
+    v-bind="$attrs"
+    :content-wrap="false"
+    class="sky-status-card"
+    :class="`sky-status-card--${tone}`"
+    :role="ariaLive === 'off' ? undefined : 'status'"
+    :aria-atomic="ariaLive === 'off' ? undefined : true"
+    :aria-live="ariaLive === 'off' ? undefined : ariaLive"
+  >
+    <span v-if="$slots.icon" class="sky-status-card__icon">
+      <slot name="icon" />
+    </span>
+
+    <span class="sky-status-card__copy">
+      <strong class="sky-status-card__title">
+        <slot name="title">{{ title }}</slot>
+      </strong>
+      <small
+        v-if="subtitle || $slots.subtitle"
+        class="sky-status-card__subtitle"
+      >
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </small>
+    </span>
+
+    <span v-if="$slots.trailing" class="sky-status-card__trailing">
+      <slot name="trailing" />
+    </span>
+    <span
+      v-else-if="indicator"
+      class="sky-status-card__indicator"
+      aria-hidden="true"
+    />
+  </SkyCard>
+</template>
diff --git a/frontend/src/ui/controls/SkySurface.vue b/frontend/src/ui/controls/SkySurface.vue
new file mode 100644
index 0000000..b79f1c9
--- /dev/null
+++ b/frontend/src/ui/controls/SkySurface.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    component?: 'div' | 'section'
+    highlight?: boolean
+  }>(),
+  {
+    component: 'div',
+    highlight: false,
+  },
+)
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="$attrs"
+    class="sky-surface"
+    :class="{ 'sky-surface--highlight': highlight }"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/SkyTabButton.vue b/frontend/src/ui/controls/SkyTabButton.vue
new file mode 100644
index 0000000..1f7c363
--- /dev/null
+++ b/frontend/src/ui/controls/SkyTabButton.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    active?: boolean
+    ariaLabel?: string
+    disabled?: boolean
+    label?: string
+    type?: 'button' | 'reset' | 'submit'
+  }>(),
+  {
+    active: false,
+    ariaLabel: '',
+    disabled: false,
+    label: '',
+    type: 'button',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    v-bind="$attrs"
+    class="sky-tab-button"
+    :class="{ 'sky-tab-button--active': active }"
+    :aria-current="active ? 'page' : undefined"
+    :aria-label="ariaLabel || undefined"
+    :disabled="disabled"
+    :type="type"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="$slots.icon" class="sky-tab-button__icon">
+      <slot name="icon" />
+    </span>
+    <span v-if="label || $slots.label" class="sky-tab-button__label">
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <slot />
+  </button>
+</template>
diff --git a/frontend/src/ui/controls/SkyToggle.vue b/frontend/src/ui/controls/SkyToggle.vue
new file mode 100644
index 0000000..f9dbc13
--- /dev/null
+++ b/frontend/src/ui/controls/SkyToggle.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    ariaDescribedby?: string
+    ariaLabelledby?: string
+    checked?: boolean
+    disabled?: boolean
+    id?: string
+    modelValue?: boolean
+    name?: string
+  }>(),
+  {
+    ariaLabel: '',
+    ariaDescribedby: '',
+    ariaLabelledby: '',
+    checked: false,
+    disabled: false,
+    id: undefined,
+    modelValue: undefined,
+    name: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  change: [event: Event]
+  'update:modelValue': [value: boolean]
+}>()
+
+const isChecked = computed(() => props.modelValue ?? props.checked)
+
+function handleChange(event: Event): void {
+  if (!(event.target instanceof HTMLInputElement)) return
+  emit('update:modelValue', event.target.checked)
+  emit('change', event)
+}
+</script>
+
+<template>
+  <label
+    v-bind="$attrs"
+    class="sky-toggle"
+    :class="{
+      'sky-toggle--checked': isChecked,
+      'sky-toggle--disabled': disabled,
+    }"
+  >
+    <input
+      :id="id"
+      class="sky-toggle__input"
+      type="checkbox"
+      :aria-describedby="ariaDescribedby || undefined"
+      role="switch"
+      :aria-label="ariaLabel || undefined"
+      :aria-labelledby="ariaLabelledby || undefined"
+      :checked="isChecked"
+      :disabled="disabled"
+      :name="name"
+      @change="handleChange"
+    />
+    <span class="sky-toggle__track" aria-hidden="true">
+      <span class="sky-toggle__thumb" />
+    </span>
+    <span v-if="$slots.default" class="sky-toggle__label">
+      <slot />
+    </span>
+  </label>
+</template>
diff --git a/frontend/src/ui/controls/SkyToolbarPane.vue b/frontend/src/ui/controls/SkyToolbarPane.vue
new file mode 100644
index 0000000..ba8f8e0
--- /dev/null
+++ b/frontend/src/ui/controls/SkyToolbarPane.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    component?: 'div' | 'nav'
+  }>(),
+  {
+    component: 'div',
+  },
+)
+</script>
+
+<template>
+  <component :is="component" v-bind="$attrs" class="sky-toolbar-pane">
+    <slot />
+  </component>
+</template>
diff --git a/frontend/src/ui/controls/index.ts b/frontend/src/ui/controls/index.ts
new file mode 100644
index 0000000..adb00d4
--- /dev/null
+++ b/frontend/src/ui/controls/index.ts
@@ -0,0 +1,23 @@
+export { default as SkyBadge } from './SkyBadge.vue'
+export { default as SkyBlock } from './SkyBlock.vue'
+export { default as SkyBlockTitle } from './SkyBlockTitle.vue'
+export { default as SkyButton } from './SkyButton.vue'
+export { default as SkyCard } from './SkyCard.vue'
+export { default as SkyChip } from './SkyChip.vue'
+export { default as SkyField } from './SkyField.vue'
+export { default as SkyIcon } from './SkyIcon.vue'
+export { default as SkyLink } from './SkyLink.vue'
+export { default as SkyList } from './SkyList.vue'
+export { default as SkyListItem } from './SkyListItem.vue'
+export { default as SkyProgress } from './SkyProgress.vue'
+export { default as SkyRadio } from './SkyRadio.vue'
+export { default as SkyRange } from './SkyRange.vue'
+export { default as SkySearchbar } from './SkySearchbar.vue'
+export { default as SkySegmented } from './SkySegmented.vue'
+export { default as SkySegmentedButton } from './SkySegmentedButton.vue'
+export { default as SkySpinner } from './SkySpinner.vue'
+export { default as SkyStatusCard } from './SkyStatusCard.vue'
+export { default as SkySurface } from './SkySurface.vue'
+export { default as SkyTabButton } from './SkyTabButton.vue'
+export { default as SkyToggle } from './SkyToggle.vue'
+export { default as SkyToolbarPane } from './SkyToolbarPane.vue'
diff --git a/frontend/src/ui/controls/useComposedFieldValue.test.ts b/frontend/src/ui/controls/useComposedFieldValue.test.ts
new file mode 100644
index 0000000..8f793b5
--- /dev/null
+++ b/frontend/src/ui/controls/useComposedFieldValue.test.ts
@@ -0,0 +1,49 @@
+import { computed, nextTick, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+
+import { useComposedFieldValue } from '@/ui/controls/useComposedFieldValue'
+
+describe('useComposedFieldValue', () => {
+  it('does not overwrite active IME composition from external state', async () => {
+    const externalValue = ref('before')
+    const updates: string[] = []
+    const field = useComposedFieldValue(
+      computed(() => externalValue.value),
+      (value) => updates.push(value),
+    )
+
+    field.startComposition()
+    field.input('composing')
+    externalValue.value = 'external'
+    await nextTick()
+
+    expect(field.localValue.value).toBe('composing')
+
+    field.endComposition('completed')
+
+    expect(field.localValue.value).toBe('completed')
+    expect(updates).toEqual(['composing', 'completed'])
+  })
+
+  it('resumes controlled updates after composition and clears explicitly', async () => {
+    const externalValue = ref('before')
+    const updates: string[] = []
+    const field = useComposedFieldValue(
+      computed(() => externalValue.value),
+      (value) => updates.push(value),
+    )
+
+    field.startComposition()
+    field.endComposition('completed')
+    externalValue.value = 'after'
+    await nextTick()
+
+    expect(field.localValue.value).toBe('after')
+
+    field.clear()
+
+    expect(field.composing.value).toBe(false)
+    expect(field.localValue.value).toBe('')
+    expect(updates.at(-1)).toBe('')
+  })
+})
diff --git a/frontend/src/ui/controls/useComposedFieldValue.ts b/frontend/src/ui/controls/useComposedFieldValue.ts
new file mode 100644
index 0000000..d51062e
--- /dev/null
+++ b/frontend/src/ui/controls/useComposedFieldValue.ts
@@ -0,0 +1,46 @@
+import { ref, watch, type ComputedRef, type Ref } from 'vue'
+
+type FieldValue = number | string
+
+export interface ComposedFieldValue {
+  clear: () => void
+  composing: Ref<boolean>
+  endComposition: (value: string) => void
+  input: (value: string) => void
+  localValue: Ref<string>
+  startComposition: () => void
+}
+
+export function useComposedFieldValue(
+  effectiveValue: ComputedRef<FieldValue>,
+  update: (value: string) => void,
+): ComposedFieldValue {
+  const localValue = ref(String(effectiveValue.value))
+  const composing = ref(false)
+
+  watch(effectiveValue, (value) => {
+    if (!composing.value) localValue.value = String(value)
+  })
+
+  function setValue(value: string): void {
+    localValue.value = value
+    update(value)
+  }
+
+  return {
+    clear: () => {
+      composing.value = false
+      setValue('')
+    },
+    composing,
+    endComposition: (value) => {
+      composing.value = false
+      setValue(value)
+    },
+    input: setValue,
+    localValue,
+    startComposition: () => {
+      composing.value = true
+    },
+  }
+}
diff --git a/frontend/src/ui/foundation.css b/frontend/src/ui/foundation.css
new file mode 100644
index 0000000..cd568ff
--- /dev/null
+++ b/frontend/src/ui/foundation.css
@@ -0,0 +1,449 @@
+.sky-app-page {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--sky-bg);
+  color: var(--sky-text);
+}
+
+.sky-app-page__backdrop {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background: var(--sky-bg);
+  pointer-events: none;
+}
+
+.sky-navbar {
+  position: relative;
+  z-index: 10;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: calc(var(--sky-safe-area-top) + var(--sky-navbar-height));
+  padding: var(--sky-safe-area-top) var(--sky-page-gutter) 12px;
+  display: grid;
+  grid-template-columns:
+    minmax(var(--sky-touch-target), 1fr)
+    minmax(0, 2fr)
+    minmax(var(--sky-touch-target), 1fr);
+  align-items: center;
+  flex: none;
+  color: var(--sky-text);
+}
+
+.sky-navbar__left,
+.sky-navbar__right {
+  min-width: 0;
+  min-height: var(--sky-navbar-height);
+  display: flex;
+  align-items: center;
+}
+
+.sky-navbar__left {
+  justify-content: flex-start;
+}
+
+.sky-navbar__right {
+  justify-content: flex-end;
+}
+
+.sky-navbar__title {
+  min-width: 0;
+  margin: 0;
+  padding: 0 var(--sky-space-1);
+  overflow: hidden;
+  color: var(--sky-text);
+  font-size: var(--sky-font-title);
+  font-weight: 650;
+  line-height: var(--sky-navbar-height);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-navbar__back {
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: var(--sky-touch-target);
+  min-height: var(--sky-touch-target);
+  margin: 0;
+  padding: 0 var(--sky-space-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sky-space-1);
+  border: 0;
+  border-radius: var(--sky-radius-control);
+  appearance: none;
+  color: var(--sky-app-accent);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sky-navbar__back-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-navbar button,
+.sky-navbar a {
+  min-width: var(--sky-touch-target);
+  min-height: var(--sky-touch-target);
+}
+
+.sky-navbar button:active,
+.sky-navbar a:active {
+  background: var(--sky-app-accent-soft);
+}
+
+.sky-navbar__back--surface {
+  width: var(--sky-touch-target);
+  max-width: var(--sky-touch-target);
+  padding: 0;
+  justify-content: center;
+  border: 1px solid var(--sky-hairline);
+  border-radius: 50%;
+  background: var(--sky-surface);
+  color: var(--sky-text);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
+}
+
+.sky-navbar--large {
+  min-height: calc(
+    var(--sky-safe-area-top) + var(--sky-navbar-large-title-height)
+  );
+  padding-right: var(--sky-page-gutter);
+  padding-bottom: 12px;
+  padding-left: var(--sky-page-gutter);
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: var(--sky-navbar-large-title-height);
+  grid-template-areas: 'title right';
+  align-items: end;
+}
+
+.sky-navbar--large .sky-navbar__left {
+  display: none;
+}
+
+.sky-navbar--large .sky-navbar__title {
+  grid-area: title;
+  padding: 0;
+  font-size: var(--sky-font-large-title);
+  font-weight: 700;
+  line-height: 36px;
+  text-align: left;
+}
+
+.sky-navbar--large .sky-navbar__right {
+  grid-area: right;
+}
+
+.sky-scroll-area {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--sky-page-space) var(--sky-page-gutter)
+    calc(var(--sky-safe-area-bottom) + var(--sky-page-space));
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+  scrollbar-width: none;
+}
+
+.sky-scroll-area--tabbar {
+  padding-bottom: calc(
+    var(--sky-safe-area-bottom) + var(--sky-tabbar-height) + var(--sky-space-3)
+  );
+}
+
+.sky-scroll-area::-webkit-scrollbar {
+  display: none;
+}
+
+.sky-infinite-loader {
+  box-sizing: border-box;
+  width: 100%;
+  height: 1px;
+  min-width: 0;
+  margin: 0;
+  display: grid;
+  place-items: center;
+  color: var(--sky-app-accent);
+}
+
+.sky-infinite-loader[hidden] {
+  display: none;
+}
+
+.sky-infinite-loader--visible {
+  height: auto;
+  min-height: var(--sky-touch-target);
+  margin: var(--sky-space-1) 0;
+}
+
+.sky-infinite-loader__retry.sky-link {
+  min-height: var(--sky-touch-target);
+  padding: 0 var(--sky-space-2);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sky-app-accent);
+  font-weight: 600;
+}
+
+.sky-infinite-loader__retry.sky-link:active:not(:disabled) {
+  background: transparent;
+  opacity: 0.62;
+}
+
+.sky-scroll-rail {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: calc(var(--sky-space-1) / 2) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sky-space-2);
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  touch-action: pan-x;
+  scrollbar-width: none;
+  cursor: grab;
+}
+
+.sky-scroll-rail > * {
+  flex: 0 0 auto;
+}
+
+.sky-scroll-rail::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.sky-scroll-rail--dragging,
+.sky-scroll-rail--dragging * {
+  user-select: none;
+  cursor: grabbing;
+}
+
+.sky-section {
+  min-width: 0;
+  margin: 0 0 var(--sky-space-4);
+}
+
+.sky-section__title {
+  margin: var(--sky-space-5) var(--sky-space-1) var(--sky-space-2);
+  padding: 0;
+  color: var(--sky-muted);
+  font-size: var(--sky-font-body);
+  font-weight: 600;
+  line-height: var(--sky-space-5);
+}
+
+.sky-list-card {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  color: var(--sky-text);
+  list-style: none;
+}
+
+.sky-list-card--inset {
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+}
+
+.sky-list-card--strong {
+  background: var(--sky-surface);
+}
+
+.sky-list-card > li {
+  min-width: 0;
+  color: var(--sky-text);
+}
+
+.sky-list-card > li + li {
+  border-top: 1px solid var(--sky-hairline);
+}
+
+.sky-list-card button,
+.sky-list-card a,
+.sky-list-card label {
+  min-height: var(--sky-touch-target);
+}
+
+.sky-empty-state {
+  box-sizing: border-box;
+  min-height: 240px;
+  margin: var(--sky-space-3) 0;
+  padding: var(--sky-space-6) var(--sky-space-5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sky-space-2);
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+  background: var(--sky-surface);
+  color: var(--sky-muted);
+  text-align: center;
+}
+
+.sky-empty-state--compact {
+  min-height: 150px;
+  padding: var(--sky-space-5);
+}
+
+.sky-empty-state--danger .sky-empty-state__icon {
+  color: var(--sky-danger);
+}
+
+.sky-empty-state__icon {
+  min-height: 36px;
+  display: grid;
+  place-items: center;
+  color: var(--sky-muted);
+}
+
+.sky-empty-state__title {
+  color: var(--sky-text);
+  font-size: var(--sky-font-title);
+  font-weight: 650;
+  line-height: 21px;
+}
+
+.sky-empty-state__body {
+  max-width: 270px;
+  margin: 0;
+  color: var(--sky-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sky-empty-state__actions {
+  width: 100%;
+  margin-top: var(--sky-space-1);
+}
+
+.sky-empty-state__actions button,
+.sky-empty-state__actions a {
+  width: 100%;
+  min-height: var(--sky-touch-target);
+}
+
+.sky-tabbar {
+  position: absolute;
+  z-index: 20;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  min-height: calc(var(--sky-tabbar-height) + var(--sky-safe-area-bottom));
+  padding-bottom: var(--sky-safe-area-bottom);
+  border-top: 1px solid var(--sky-hairline);
+  background: var(--sky-surface);
+  color: var(--sky-text);
+}
+
+.sky-tabbar__inner,
+.sky-tabbar__pane {
+  width: 100%;
+  min-width: 0;
+  min-height: var(--sky-tabbar-height);
+}
+
+.sky-tabbar__pane {
+  display: flex;
+  align-items: stretch;
+}
+
+.sky-tabbar__pane > button,
+.sky-tabbar__pane > a {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--sky-tabbar-height);
+  margin: 0;
+  padding: var(--sky-space-1) var(--sky-space-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  appearance: none;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sky-tabbar__pane > button:active,
+.sky-tabbar__pane > a:active {
+  background: var(--sky-app-accent-soft);
+}
+
+.sky-tabbar__pane > button > span,
+.sky-tabbar__pane > a > span {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.sky-tabbar__pane > button > span > span:last-child,
+.sky-tabbar__pane > a > span > span:last-child {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 13px;
+  text-overflow: ellipsis;
+}
+
+.sky-navbar button:focus-visible,
+.sky-navbar a:focus-visible,
+.sky-list-card button:focus-visible,
+.sky-list-card a:focus-visible,
+.sky-list-card input:focus-visible,
+.sky-list-card select:focus-visible,
+.sky-list-card textarea:focus-visible,
+.sky-empty-state button:focus-visible,
+.sky-empty-state a:focus-visible,
+.sky-tabbar button:focus-visible,
+.sky-tabbar a:focus-visible {
+  outline: 2px solid var(--sky-app-accent);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sky-scroll-rail {
+    scroll-behavior: auto !important;
+  }
+
+  .sky-app-page *,
+  .sky-app-page *::before,
+  .sky-app-page *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
diff --git a/frontend/src/ui/index.ts b/frontend/src/ui/index.ts
new file mode 100644
index 0000000..9155b50
--- /dev/null
+++ b/frontend/src/ui/index.ts
@@ -0,0 +1,12 @@
+export { default as SkyAppPage } from './SkyAppPage.vue'
+export { default as SkyEmptyState } from './SkyEmptyState.vue'
+export { default as SkyInfiniteLoader } from './SkyInfiniteLoader.vue'
+export { default as SkyListCard } from './SkyListCard.vue'
+export { default as SkyNavbar } from './SkyNavbar.vue'
+export { default as SkyScrollArea } from './SkyScrollArea.vue'
+export { default as SkyScrollRail } from './SkyScrollRail.vue'
+export { default as SkySection } from './SkySection.vue'
+export { default as SkyTabBar } from './SkyTabBar.vue'
+export * from './controls'
+export * from './overlays'
+export * from './settings'
diff --git a/frontend/src/ui/overlays.css b/frontend/src/ui/overlays.css
new file mode 100644
index 0000000..07add69
--- /dev/null
+++ b/frontend/src/ui/overlays.css
@@ -0,0 +1,266 @@
+.sky-sheet,
+.sky-action-sheet,
+.sky-dialog {
+  position: absolute;
+  z-index: var(--sky-overlay-layer, 80);
+  inset: 0;
+}
+
+.sky-overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  background: rgba(0, 0, 0, 0.48);
+}
+
+.sky-sheet__panel,
+.sky-action-sheet__panel {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-height: 88%;
+  overflow: auto;
+  border: 1px solid var(--sky-hairline);
+  border-bottom: 0;
+  border-radius: var(--sky-radius-sheet) var(--sky-radius-sheet) 0 0;
+  background: var(--sky-surface);
+  color: var(--sky-text);
+  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22);
+}
+
+.sky-action-sheet__panel {
+  padding: var(--sky-space-2) var(--sky-page-gutter)
+    calc(var(--sky-safe-area-bottom) + var(--sky-space-2));
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sky-action-group {
+  overflow: hidden;
+  margin-top: var(--sky-space-2);
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+  background: var(--sky-surface);
+}
+
+.sky-action-button {
+  width: 100%;
+  min-height: 52px;
+  border: 0;
+  border-bottom: 1px solid var(--sky-hairline);
+  padding: 10px 16px;
+  color: var(--sky-app-accent);
+  background: transparent;
+  font: inherit;
+  font-size: 16px;
+}
+
+.sky-action-button:last-child {
+  border-bottom: 0;
+}
+
+.sky-action-button--bold {
+  font-weight: 700;
+}
+
+.sky-dialog {
+  display: grid;
+  place-items: center;
+  padding: var(--sky-page-gutter);
+}
+
+.sky-dialog__panel {
+  position: relative;
+  z-index: 1;
+  width: min(280px, 90%);
+  overflow: hidden;
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+  background: var(--sky-surface);
+  color: var(--sky-text);
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
+}
+
+.sky-sheet__panel:focus,
+.sky-action-sheet__panel:focus,
+.sky-dialog__panel:focus {
+  outline: none;
+}
+
+.sky-dialog__content {
+  padding: 20px 18px 16px;
+  text-align: center;
+}
+
+.sky-dialog__content h2 {
+  margin: 0 0 6px;
+  font-size: 17px;
+  line-height: 22px;
+}
+
+.sky-dialog__content p {
+  margin: 0;
+  color: var(--sky-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sky-dialog__buttons {
+  display: flex;
+  border-top: 1px solid var(--sky-hairline);
+}
+
+.sky-dialog-button {
+  min-width: 0;
+  min-height: 48px;
+  flex: 1;
+  border: 0;
+  border-right: 1px solid var(--sky-hairline);
+  color: var(--sky-app-accent);
+  background: transparent;
+  font: inherit;
+}
+
+.sky-dialog-button:last-child {
+  border-right: 0;
+}
+
+.sky-dialog-button--strong {
+  font-weight: 700;
+}
+
+.sky-toast {
+  position: absolute;
+  z-index: 100;
+  right: 50%;
+  max-width: calc(100% - 40px);
+  border: 1px solid var(--sky-hairline);
+  border-radius: 999px;
+  padding: 10px 16px;
+  color: var(--sky-text);
+  background: var(--sky-surface);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26);
+  font-size: 13px;
+  transform: translateX(50%);
+}
+
+.sky-toast--top {
+  top: calc(var(--sky-safe-area-top) + var(--sky-space-4));
+}
+
+.sky-toast--center {
+  top: 50%;
+  transform: translate(50%, -50%);
+}
+
+.sky-toast--bottom {
+  bottom: calc(var(--sky-safe-area-bottom) + var(--sky-space-5));
+}
+
+.sky-messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sky-space-2);
+  padding: var(--sky-space-2) 0;
+}
+
+.sky-messages-title {
+  margin: 8px 0;
+  color: var(--sky-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.sky-message {
+  max-width: 82%;
+  align-self: flex-start;
+}
+
+.sky-message--sent {
+  align-self: flex-end;
+}
+
+.sky-message__name,
+.sky-message time {
+  display: block;
+  margin: 0 6px 3px;
+  color: var(--sky-muted);
+  font-size: 10px;
+}
+
+.sky-message p {
+  margin: 0;
+  border-radius: 16px 16px 16px 5px;
+  padding: 9px 12px;
+  background: var(--sky-surface-muted);
+  color: var(--sky-text);
+  font-size: 13px;
+  line-height: 18px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.sky-message--sent p {
+  border-radius: 16px 16px 5px;
+  background: var(--sky-app-accent);
+  color: #ffffff;
+}
+
+.sky-message time {
+  margin-top: 3px;
+}
+
+.sky-message--sent time {
+  text-align: right;
+}
+
+.sky-messagebar {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sky-space-2);
+  border-top: 1px solid var(--sky-hairline);
+  padding: 8px var(--sky-page-gutter)
+    calc(var(--sky-safe-area-bottom) + var(--sky-space-2));
+  background: var(--sky-surface);
+}
+
+.sky-messagebar textarea {
+  min-width: 0;
+  min-height: 40px;
+  max-height: 100px;
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--sky-hairline);
+  border-radius: 18px;
+  padding: 9px 12px;
+  color: var(--sky-text);
+  background: var(--sky-surface-muted);
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.sky-messagebar__right {
+  min-width: var(--sky-touch-target);
+  min-height: var(--sky-touch-target);
+  display: grid;
+  place-items: center;
+}
+
+.sky-action-button:focus-visible,
+.sky-dialog-button:focus-visible,
+.sky-messagebar textarea:focus-visible {
+  outline: 2px solid var(--sky-app-accent);
+  outline-offset: -2px;
+}
+
+.sky-action-button:disabled,
+.sky-dialog-button:disabled,
+.sky-messagebar textarea:disabled {
+  opacity: 0.45;
+}
diff --git a/frontend/src/ui/overlays/SkyActionButton.vue b/frontend/src/ui/overlays/SkyActionButton.vue
new file mode 100644
index 0000000..90e0782
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyActionButton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ bold?: boolean; disabled?: boolean }>(), {
+  bold: false,
+  disabled: false,
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="sky-action-button"
+    :class="{ 'sky-action-button--bold': bold }"
+    :disabled="disabled"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/frontend/src/ui/overlays/SkyActionGroup.vue b/frontend/src/ui/overlays/SkyActionGroup.vue
new file mode 100644
index 0000000..c125778
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyActionGroup.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="sky-action-group"><slot /></div>
+</template>
diff --git a/frontend/src/ui/overlays/SkyActionSheet.vue b/frontend/src/ui/overlays/SkyActionSheet.vue
new file mode 100644
index 0000000..7bc423f
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyActionSheet.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { nextTick, ref, toRef, watch } from 'vue'
+import { useOverlayFocusTrap } from './useOverlayFocusTrap'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    ariaDescribedby?: string
+    ariaLabel?: string
+    ariaLabelledby?: string
+    ariaModal?: boolean | 'false' | 'true'
+    label?: string
+    opened: boolean
+    role?: 'alertdialog' | 'dialog' | 'none' | 'presentation'
+    tabindex?: number | string
+  }>(),
+  {
+    ariaModal: true,
+    tabindex: -1,
+  },
+)
+const emit = defineEmits<{
+  backdropclick: []
+  escape: [event: KeyboardEvent]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
+const inferredRole = ref<'alertdialog' | 'dialog' | 'none' | 'presentation'>()
+
+watch(
+  [toRef(props, 'opened'), toRef(props, 'role')],
+  async ([opened]) => {
+    inferredRole.value = undefined
+    if (!opened) return
+
+    await nextTick()
+    if (!props.opened || !panel.value) return
+
+    const nestedDialog = panel.value.querySelector(
+      '[role="dialog"], [role="alertdialog"]',
+    )
+    inferredRole.value = props.role ?? (nestedDialog ? undefined : 'dialog')
+  },
+  { immediate: true, flush: 'post' },
+)
+
+useOverlayFocusTrap({
+  onEscape: (event) => emit('escape', event),
+  opened: toRef(props, 'opened'),
+  panel,
+  root,
+})
+</script>
+
+<template>
+  <div v-if="opened" ref="root" v-bind="$attrs" class="sky-action-sheet">
+    <div
+      class="sky-overlay-backdrop"
+      aria-hidden="true"
+      @click="emit('backdropclick')"
+    ></div>
+    <div
+      ref="panel"
+      class="sky-action-sheet__panel"
+      :role="inferredRole"
+      :aria-modal="
+        inferredRole === 'dialog' || inferredRole === 'alertdialog'
+          ? ariaModal
+          : undefined
+      "
+      :aria-label="inferredRole ? ariaLabel || label || undefined : undefined"
+      :aria-labelledby="inferredRole ? ariaLabelledby : undefined"
+      :aria-describedby="inferredRole ? ariaDescribedby : undefined"
+      :tabindex="tabindex"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/ui/overlays/SkyDialog.vue b/frontend/src/ui/overlays/SkyDialog.vue
new file mode 100644
index 0000000..4844a91
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyDialog.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, toRef, useId } from 'vue'
+import { useOverlayFocusTrap } from './useOverlayFocusTrap'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    ariaModal?: boolean | 'false' | 'true'
+    content?: string
+    opened: boolean
+    role?: 'alertdialog' | 'dialog'
+    tabindex?: number | string
+    title: string
+  }>(),
+  {
+    ariaModal: true,
+    role: 'dialog',
+    tabindex: -1,
+  },
+)
+const emit = defineEmits<{
+  backdropclick: []
+  escape: [event: KeyboardEvent]
+}>()
+
+const titleId = useId()
+const contentId = useId()
+const root = ref<HTMLElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
+
+useOverlayFocusTrap({
+  onEscape: (event) => emit('escape', event),
+  opened: toRef(props, 'opened'),
+  panel,
+  root,
+})
+</script>
+
+<template>
+  <div v-if="opened" ref="root" v-bind="$attrs" class="sky-dialog">
+    <div
+      class="sky-overlay-backdrop"
+      aria-hidden="true"
+      @click="emit('backdropclick')"
+    ></div>
+    <section
+      ref="panel"
+      class="sky-dialog__panel"
+      :role="role"
+      :aria-modal="ariaModal"
+      :aria-labelledby="titleId"
+      :aria-describedby="content ? contentId : undefined"
+      :tabindex="tabindex"
+    >
+      <div class="sky-dialog__content">
+        <h2 :id="titleId">{{ title }}</h2>
+        <p v-if="content" :id="contentId">{{ content }}</p>
+        <slot />
+      </div>
+      <div class="sky-dialog__buttons"><slot name="buttons" /></div>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/ui/overlays/SkyDialogButton.vue b/frontend/src/ui/overlays/SkyDialogButton.vue
new file mode 100644
index 0000000..9adb937
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyDialogButton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ disabled?: boolean; strong?: boolean }>(), {
+  disabled: false,
+  strong: false,
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="sky-dialog-button"
+    :class="{ 'sky-dialog-button--strong': strong }"
+    :disabled="disabled"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/frontend/src/ui/overlays/SkyMessage.vue b/frontend/src/ui/overlays/SkyMessage.vue
new file mode 100644
index 0000000..effa8a7
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyMessage.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    name?: string
+    text: string
+    textFooter?: string
+    type?: 'received' | 'sent'
+  }>(),
+  { name: '', textFooter: '', type: 'received' },
+)
+</script>
+
+<template>
+  <article class="sky-message" :class="`sky-message--${type}`">
+    <small v-if="name" class="sky-message__name">{{ name }}</small>
+    <p>{{ text }}</p>
+    <time v-if="textFooter">{{ textFooter }}</time>
+  </article>
+</template>
diff --git a/frontend/src/ui/overlays/SkyMessagebar.vue b/frontend/src/ui/overlays/SkyMessagebar.vue
new file mode 100644
index 0000000..7ad7529
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyMessagebar.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{ disabled?: boolean; placeholder?: string; value?: string }>(),
+  { disabled: false, placeholder: '', value: '' },
+)
+
+defineEmits<{
+  input: [event: Event]
+  keydown: [event: KeyboardEvent]
+}>()
+</script>
+
+<template>
+  <div v-bind="$attrs" class="sky-messagebar">
+    <textarea
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :value="value"
+      rows="1"
+      @input="$emit('input', $event)"
+      @keydown="$emit('keydown', $event)"
+    ></textarea>
+    <div v-if="$slots.right" class="sky-messagebar__right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/ui/overlays/SkyMessages.vue b/frontend/src/ui/overlays/SkyMessages.vue
new file mode 100644
index 0000000..bf45f69
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyMessages.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="sky-messages"><slot /></div>
+</template>
diff --git a/frontend/src/ui/overlays/SkyMessagesTitle.vue b/frontend/src/ui/overlays/SkyMessagesTitle.vue
new file mode 100644
index 0000000..d7b4099
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyMessagesTitle.vue
@@ -0,0 +1,3 @@
+<template>
+  <p class="sky-messages-title"><slot /></p>
+</template>
diff --git a/frontend/src/ui/overlays/SkySheet.vue b/frontend/src/ui/overlays/SkySheet.vue
new file mode 100644
index 0000000..4bbbb1b
--- /dev/null
+++ b/frontend/src/ui/overlays/SkySheet.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { nextTick, ref, toRef, watch } from 'vue'
+import { useOverlayFocusTrap } from './useOverlayFocusTrap'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    ariaDescribedby?: string
+    ariaLabel?: string
+    ariaLabelledby?: string
+    ariaModal?: boolean | 'false' | 'true'
+    opened: boolean
+    role?: 'alertdialog' | 'dialog' | 'none' | 'presentation'
+    tabindex?: number | string
+  }>(),
+  {
+    ariaModal: true,
+    tabindex: -1,
+  },
+)
+const emit = defineEmits<{
+  backdropclick: []
+  escape: [event: KeyboardEvent]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
+const inferredRole = ref<'alertdialog' | 'dialog' | 'none' | 'presentation'>()
+
+watch(
+  [toRef(props, 'opened'), toRef(props, 'role')],
+  async ([opened]) => {
+    inferredRole.value = undefined
+    if (!opened) return
+
+    await nextTick()
+    if (!props.opened || !panel.value) return
+
+    const nestedDialog = panel.value.querySelector(
+      '[role="dialog"], [role="alertdialog"]',
+    )
+    inferredRole.value = props.role ?? (nestedDialog ? undefined : 'dialog')
+  },
+  { immediate: true, flush: 'post' },
+)
+
+useOverlayFocusTrap({
+  onEscape: (event) => emit('escape', event),
+  opened: toRef(props, 'opened'),
+  panel,
+  root,
+})
+</script>
+
+<template>
+  <div v-if="opened" ref="root" v-bind="$attrs" class="sky-sheet">
+    <div
+      class="sky-overlay-backdrop"
+      aria-hidden="true"
+      @click="emit('backdropclick')"
+    ></div>
+    <div
+      ref="panel"
+      class="sky-sheet__panel"
+      :role="inferredRole"
+      :aria-modal="
+        inferredRole === 'dialog' || inferredRole === 'alertdialog'
+          ? ariaModal
+          : undefined
+      "
+      :aria-label="inferredRole ? ariaLabel : undefined"
+      :aria-labelledby="inferredRole ? ariaLabelledby : undefined"
+      :aria-describedby="inferredRole ? ariaDescribedby : undefined"
+      :tabindex="tabindex"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/ui/overlays/SkyToast.vue b/frontend/src/ui/overlays/SkyToast.vue
new file mode 100644
index 0000000..c308059
--- /dev/null
+++ b/frontend/src/ui/overlays/SkyToast.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{ opened: boolean; position?: 'bottom' | 'center' | 'top' }>(),
+  { position: 'bottom' },
+)
+</script>
+
+<template>
+  <div
+    v-if="opened"
+    v-bind="$attrs"
+    class="sky-toast"
+    :class="`sky-toast--${position}`"
+    role="status"
+    aria-live="polite"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/ui/overlays/index.ts b/frontend/src/ui/overlays/index.ts
new file mode 100644
index 0000000..2962b02
--- /dev/null
+++ b/frontend/src/ui/overlays/index.ts
@@ -0,0 +1,11 @@
+export { default as SkyActionButton } from './SkyActionButton.vue'
+export { default as SkyActionGroup } from './SkyActionGroup.vue'
+export { default as SkyActionSheet } from './SkyActionSheet.vue'
+export { default as SkyDialog } from './SkyDialog.vue'
+export { default as SkyDialogButton } from './SkyDialogButton.vue'
+export { default as SkyMessage } from './SkyMessage.vue'
+export { default as SkyMessagebar } from './SkyMessagebar.vue'
+export { default as SkyMessages } from './SkyMessages.vue'
+export { default as SkyMessagesTitle } from './SkyMessagesTitle.vue'
+export { default as SkySheet } from './SkySheet.vue'
+export { default as SkyToast } from './SkyToast.vue'
diff --git a/frontend/src/ui/overlays/useOverlayFocusTrap.ts b/frontend/src/ui/overlays/useOverlayFocusTrap.ts
new file mode 100644
index 0000000..684ec2c
--- /dev/null
+++ b/frontend/src/ui/overlays/useOverlayFocusTrap.ts
@@ -0,0 +1,323 @@
+import { nextTick, onBeforeUnmount, watch, type Ref } from 'vue'
+
+interface OverlayStackEntry {
+  hadInertAttribute: boolean
+  id: symbol
+  onEscape: (event: KeyboardEvent) => void
+  panel: HTMLElement
+  previousAriaHidden: string | null
+  previousFocus: HTMLElement | null
+  root: HTMLElement
+}
+
+interface OverlayFocusTrapOptions {
+  onEscape: (event: KeyboardEvent) => void
+  opened: Readonly<Ref<boolean>>
+  panel: Readonly<Ref<HTMLElement | null>>
+  root: Readonly<Ref<HTMLElement | null>>
+}
+
+const focusableSelector = [
+  'a[href]',
+  'area[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'iframe',
+  'object',
+  'embed',
+  '[contenteditable]:not([contenteditable="false"])',
+  '[tabindex]',
+].join(',')
+
+const overlayStack: OverlayStackEntry[] = []
+let documentListenerAttached = false
+
+function isVisible(element: HTMLElement): boolean {
+  const style = window.getComputedStyle(element)
+
+  return (
+    style.display !== 'none' &&
+    style.visibility !== 'hidden' &&
+    element.getClientRects().length > 0 &&
+    !element.closest('[aria-hidden="true"], [inert]')
+  )
+}
+
+function canReceiveFocus(element: HTMLElement): boolean {
+  return (
+    element.isConnected &&
+    !element.matches(':disabled') &&
+    !element.hasAttribute('hidden') &&
+    isVisible(element)
+  )
+}
+
+function getTabbableElements(root: HTMLElement): HTMLElement[] {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(focusableSelector),
+  ).filter((element) => element.tabIndex >= 0 && canReceiveFocus(element))
+}
+
+function focusElement(element: HTMLElement | null): boolean {
+  if (!element || !canReceiveFocus(element)) return false
+
+  element.focus({ preventScroll: true })
+  return document.activeElement === element
+}
+
+function focusFirstElement(entry: OverlayStackEntry): void {
+  const preferred = entry.root.querySelector<HTMLElement>(
+    '[data-sky-autofocus], [autofocus]',
+  )
+
+  if (focusElement(preferred)) return
+
+  const firstTabbable = getTabbableElements(entry.root)[0]
+  if (focusElement(firstTabbable)) return
+
+  focusElement(entry.panel)
+}
+
+function trapTabKey(entry: OverlayStackEntry, event: KeyboardEvent): void {
+  const tabbable = getTabbableElements(entry.root)
+
+  if (tabbable.length === 0) {
+    event.preventDefault()
+    event.stopPropagation()
+    focusElement(entry.panel)
+    return
+  }
+
+  const activeElement = document.activeElement
+  const first = tabbable[0]
+  const last = tabbable[tabbable.length - 1]
+  const focusIsInside =
+    activeElement instanceof Node && entry.root.contains(activeElement)
+
+  if (!focusIsInside) {
+    event.preventDefault()
+    event.stopPropagation()
+    focusElement(event.shiftKey ? last : first)
+    return
+  }
+
+  const activeIndex = tabbable.indexOf(activeElement as HTMLElement)
+
+  if (activeIndex < 0) {
+    event.preventDefault()
+    event.stopPropagation()
+    focusElement(event.shiftKey ? last : first)
+    return
+  }
+
+  if (event.shiftKey && activeElement === first) {
+    event.preventDefault()
+    event.stopPropagation()
+    focusElement(last)
+    return
+  }
+
+  if (!event.shiftKey && activeElement === last) {
+    event.preventDefault()
+    event.stopPropagation()
+    focusElement(first)
+  }
+}
+
+function restoreOverlayAccessibility(entry: OverlayStackEntry): void {
+  entry.root.style.removeProperty('--sky-overlay-layer')
+
+  if (entry.previousAriaHidden === null) {
+    entry.root.removeAttribute('aria-hidden')
+  } else {
+    entry.root.setAttribute('aria-hidden', entry.previousAriaHidden)
+  }
+
+  if (entry.hadInertAttribute) {
+    entry.root.setAttribute('inert', '')
+  } else {
+    entry.root.removeAttribute('inert')
+  }
+}
+
+function syncOverlayStack(): void {
+  const topIndex = overlayStack.length - 1
+
+  overlayStack.forEach((entry, index) => {
+    entry.root.style.setProperty('--sky-overlay-layer', String(80 + index))
+
+    if (index === topIndex) {
+      if (entry.previousAriaHidden === null) {
+        entry.root.removeAttribute('aria-hidden')
+      } else {
+        entry.root.setAttribute('aria-hidden', entry.previousAriaHidden)
+      }
+
+      if (entry.hadInertAttribute) {
+        entry.root.setAttribute('inert', '')
+      } else {
+        entry.root.removeAttribute('inert')
+      }
+      return
+    }
+
+    entry.root.setAttribute('aria-hidden', 'true')
+    entry.root.setAttribute('inert', '')
+  })
+}
+
+function handleDocumentKeydown(event: KeyboardEvent): void {
+  const topOverlay = overlayStack[overlayStack.length - 1]
+  if (!topOverlay) return
+
+  if (event.key === 'Escape') {
+    if (event.isComposing) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    topOverlay.onEscape(event)
+    return
+  }
+
+  if (event.key === 'Tab') trapTabKey(topOverlay, event)
+}
+
+function syncDocumentListener(): void {
+  if (typeof document === 'undefined') return
+
+  const shouldAttach = overlayStack.length > 0
+
+  if (shouldAttach && !documentListenerAttached) {
+    document.addEventListener('keydown', handleDocumentKeydown, true)
+    documentListenerAttached = true
+    return
+  }
+
+  if (!shouldAttach && documentListenerAttached) {
+    document.removeEventListener('keydown', handleDocumentKeydown, true)
+    documentListenerAttached = false
+  }
+}
+
+function currentFocus(): HTMLElement | null {
+  const activeElement = document.activeElement
+
+  if (
+    !(activeElement instanceof HTMLElement) ||
+    activeElement === document.body ||
+    activeElement === document.documentElement
+  ) {
+    return null
+  }
+
+  return activeElement
+}
+
+function registerOverlay(
+  root: HTMLElement,
+  panel: HTMLElement,
+  onEscape: (event: KeyboardEvent) => void,
+): () => void {
+  const entry: OverlayStackEntry = {
+    hadInertAttribute: root.hasAttribute('inert'),
+    id: Symbol('sky-overlay'),
+    onEscape,
+    panel,
+    previousAriaHidden: root.getAttribute('aria-hidden'),
+    previousFocus: currentFocus(),
+    root,
+  }
+
+  overlayStack.push(entry)
+  syncDocumentListener()
+  focusFirstElement(entry)
+  syncOverlayStack()
+
+  let registered = true
+
+  return () => {
+    if (!registered) return
+    registered = false
+
+    const index = overlayStack.findIndex(
+      (candidate) => candidate.id === entry.id,
+    )
+    if (index < 0) return
+
+    const wasTopOverlay = index === overlayStack.length - 1
+    const overlayAbove = overlayStack[index + 1]
+
+    overlayStack.splice(index, 1)
+    restoreOverlayAccessibility(entry)
+    syncOverlayStack()
+    syncDocumentListener()
+
+    if (!wasTopOverlay) {
+      if (
+        overlayAbove &&
+        entry.previousFocus &&
+        overlayAbove.previousFocus &&
+        entry.root.contains(overlayAbove.previousFocus)
+      ) {
+        overlayAbove.previousFocus = entry.previousFocus
+      }
+      return
+    }
+
+    const nextTopOverlay = overlayStack[overlayStack.length - 1]
+    if (nextTopOverlay) {
+      if (
+        entry.previousFocus &&
+        nextTopOverlay.root.contains(entry.previousFocus) &&
+        focusElement(entry.previousFocus)
+      ) {
+        return
+      }
+
+      focusFirstElement(nextTopOverlay)
+      return
+    }
+
+    focusElement(entry.previousFocus)
+  }
+}
+
+export function useOverlayFocusTrap(options: OverlayFocusTrapOptions): void {
+  let activation = 0
+  let unregister: (() => void) | undefined
+
+  const stopWatching = watch(
+    options.opened,
+    async (opened) => {
+      activation += 1
+      const currentActivation = activation
+
+      if (!opened) {
+        unregister?.()
+        unregister = undefined
+        return
+      }
+
+      await nextTick()
+
+      if (currentActivation !== activation || !options.opened.value) return
+
+      const root = options.root.value
+      const panel = options.panel.value
+      if (!root || !panel) return
+
+      unregister?.()
+      unregister = registerOverlay(root, panel, options.onEscape)
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  onBeforeUnmount(() => {
+    activation += 1
+    stopWatching()
+    unregister?.()
+    unregister = undefined
+  })
+}
diff --git a/frontend/src/ui/settings.css b/frontend/src/ui/settings.css
new file mode 100644
index 0000000..a5752f7
--- /dev/null
+++ b/frontend/src/ui/settings.css
@@ -0,0 +1,263 @@
+.sky-settings-group {
+  min-width: 0;
+  margin: 0 0 var(--sky-space-5);
+}
+
+.sky-settings-group__title {
+  margin: var(--sky-space-5) var(--sky-space-3) 7px;
+  padding: 0;
+  color: var(--sky-muted);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.sky-settings-group__list {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--sky-radius-card);
+  background: var(--sky-surface);
+  color: var(--sky-text);
+  list-style: none;
+}
+
+.sky-settings-group__footer {
+  margin: 7px var(--sky-space-3) 0;
+  color: var(--sky-muted);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.sky-settings-row,
+.sky-settings-range-row,
+.sky-settings-group__list > .sky-field {
+  position: relative;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  list-style: none;
+}
+
+.sky-settings-group__list > li + li::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 14px;
+  left: 14px;
+  height: 1px;
+  content: '';
+  background: var(--sky-hairline);
+  pointer-events: none;
+}
+
+.sky-settings-group__list
+  > .sky-settings-row--has-media
+  + .sky-settings-row::before,
+.sky-settings-group__list
+  > .sky-settings-row
+  + .sky-settings-row--has-media::before {
+  left: 50px;
+}
+
+.sky-settings-row__frame,
+.sky-settings-range-row__frame {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 52px;
+  margin: 0;
+  padding: 8px 14px;
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  border: 0;
+  border-radius: 0;
+  appearance: none;
+  background: transparent;
+  color: var(--sky-text);
+  font: inherit;
+  text-align: left;
+  -webkit-tap-highlight-color: transparent;
+}
+
+button.sky-settings-row__frame {
+  cursor: pointer;
+}
+
+button.sky-settings-row__frame:active:not(:disabled) {
+  background: var(--sky-surface-muted);
+}
+
+button.sky-settings-row__frame:focus-visible {
+  outline: 2px solid var(--sky-app-accent);
+  outline-offset: -2px;
+}
+
+.sky-settings-row--toggle .sky-settings-row__frame {
+  padding-top: var(--sky-space-1);
+  padding-bottom: var(--sky-space-1);
+}
+
+.sky-settings-row__leading,
+.sky-settings-row__accessory,
+.sky-settings-row__trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.sky-settings-row__leading {
+  width: 25px;
+  color: var(--sky-app-accent);
+}
+
+.sky-settings-row__content {
+  min-width: 0;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sky-settings-row__title {
+  min-width: 0;
+  color: inherit;
+  font-size: 15px;
+  font-weight: 450;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+
+label.sky-settings-row__title {
+  cursor: pointer;
+}
+
+.sky-settings-row__description {
+  color: var(--sky-muted);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.sky-settings-row__accessory {
+  min-width: 0;
+  gap: 4px;
+  color: var(--sky-muted);
+}
+
+.sky-settings-row__value {
+  max-width: 126px;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-settings-row__chevron {
+  opacity: 0.62;
+}
+
+.sky-settings-row__check {
+  color: var(--sky-app-accent);
+}
+
+.sky-settings-row--accent .sky-settings-row__title,
+.sky-settings-row--action.sky-settings-row--default .sky-settings-row__title {
+  color: var(--sky-app-accent);
+}
+
+.sky-settings-row--danger .sky-settings-row__title {
+  color: var(--sky-danger);
+}
+
+.sky-settings-row--disabled,
+.sky-settings-row--pending,
+.sky-settings-range-row--disabled {
+  opacity: 0.46;
+}
+
+.sky-settings-range-row__frame {
+  padding-top: var(--sky-space-1);
+  padding-bottom: var(--sky-space-1);
+}
+
+.sky-settings-group--compact .sky-settings-row__frame,
+.sky-settings-group--compact .sky-settings-range-row__frame {
+  min-height: 48px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.sky-settings-range-row .sky-range {
+  width: 100%;
+}
+
+.sky-settings-icon {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 7px;
+  background: var(--sky-settings-icon-color, var(--sky-app-accent));
+  color: #ffffff;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 35%),
+    0 1px 2px rgb(0 0 0 / 25%);
+}
+
+.sky-settings-icon > svg {
+  width: 17px;
+  height: 17px;
+  display: block;
+}
+
+.sky-settings-group__list > .sky-field {
+  min-height: 52px;
+  padding: var(--sky-space-1) 14px;
+}
+
+.sky-settings-group__list > .sky-field .sky-field__label {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sky-settings-group__list > .sky-field .sky-field__input {
+  font-size: 15px;
+}
+
+.sky-settings-group__list > .sky-field--inline {
+  display: grid;
+  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
+  align-items: center;
+  column-gap: 12px;
+}
+
+.sky-settings-group__list > .sky-field--inline .sky-field__label {
+  margin: 0;
+  color: var(--sky-text);
+  font-size: 15px;
+  font-weight: 450;
+  line-height: 20px;
+}
+
+.sky-settings-group__list > .sky-field--inline .sky-field__control {
+  justify-content: flex-end;
+}
+
+.sky-settings-group__list > .sky-field--inline .sky-field__input {
+  text-align: right;
+}
+
+.sky-settings-group__list > .sky-field--inline .sky-field__help,
+.sky-settings-group__list > .sky-field--inline .sky-field__error {
+  grid-column: 1 / -1;
+}
diff --git a/frontend/src/ui/settings/SkySettingsGroup.test.ts b/frontend/src/ui/settings/SkySettingsGroup.test.ts
new file mode 100644
index 0000000..7a5a45d
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsGroup.test.ts
@@ -0,0 +1,52 @@
+import { createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkySettingsGroup from '@/ui/settings/SkySettingsGroup.vue'
+import SkySettingsRow from '@/ui/settings/SkySettingsRow.vue'
+
+describe('SkySettingsGroup', () => {
+  it('connects its heading and footer to the settings section', async () => {
+    const app = createSSRApp({
+      render: () =>
+        h(
+          SkySettingsGroup,
+          {
+            footer: 'Used when reconnecting to the channel.',
+            title: 'Connection',
+          },
+          {
+            default: () =>
+              h(SkySettingsRow, {
+                kind: 'value',
+                title: 'Status',
+                value: 'Ready',
+              }),
+          },
+        ),
+    })
+
+    const html = await renderToString(app)
+    const titleId = html.match(/<h2 id="([^"]+)"/)?.[1]
+    const footerId = html.match(/<p id="([^"]+)"/)?.[1]
+
+    expect(titleId).toBeTruthy()
+    expect(footerId).toBeTruthy()
+    expect(html).toContain(`aria-labelledby="${titleId}"`)
+    expect(html).toContain(`aria-describedby="${footerId}"`)
+    expect(html).toContain('<ul class="sky-settings-group__list">')
+    expect(html).not.toContain('sky-list--inset')
+  })
+
+  it('uses an explicit accessible name when no heading is shown', async () => {
+    const app = createSSRApp(SkySettingsGroup, {
+      ariaLabel: 'Profile actions',
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('aria-label="Profile actions"')
+    expect(html).not.toContain('<h2')
+    expect(html).not.toContain('sky-settings-group__footer')
+  })
+})
diff --git a/frontend/src/ui/settings/SkySettingsGroup.vue b/frontend/src/ui/settings/SkySettingsGroup.vue
new file mode 100644
index 0000000..690d56d
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsGroup.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed, useId, useSlots } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    density?: 'compact' | 'regular'
+    footer?: string
+    title?: string
+  }>(),
+  {
+    ariaLabel: '',
+    density: 'regular',
+    footer: '',
+    title: '',
+  },
+)
+
+const slots = useSlots()
+const generatedId = useId()
+const titleId = `${generatedId}-title`
+const footerId = `${generatedId}-footer`
+const hasTitle = computed(() => Boolean(props.title || slots.header))
+const hasFooter = computed(() => Boolean(props.footer || slots.footer))
+</script>
+
+<template>
+  <section
+    v-bind="$attrs"
+    class="sky-settings-group"
+    :class="`sky-settings-group--${density}`"
+    :aria-label="!hasTitle && ariaLabel ? ariaLabel : undefined"
+    :aria-labelledby="hasTitle ? titleId : undefined"
+    :aria-describedby="hasFooter ? footerId : undefined"
+  >
+    <h2 v-if="hasTitle" :id="titleId" class="sky-settings-group__title">
+      <slot name="header">{{ title }}</slot>
+    </h2>
+
+    <ul class="sky-settings-group__list">
+      <slot />
+    </ul>
+
+    <p v-if="hasFooter" :id="footerId" class="sky-settings-group__footer">
+      <slot name="footer">{{ footer }}</slot>
+    </p>
+  </section>
+</template>
diff --git a/frontend/src/ui/settings/SkySettingsIcon.test.ts b/frontend/src/ui/settings/SkySettingsIcon.test.ts
new file mode 100644
index 0000000..924c9cb
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsIcon.test.ts
@@ -0,0 +1,37 @@
+import { createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkySettingsIcon from '@/ui/settings/SkySettingsIcon.vue'
+
+describe('SkySettingsIcon', () => {
+  it('renders its icon slot as a decorative colored tile by default', async () => {
+    const app = createSSRApp({
+      render: () =>
+        h(
+          SkySettingsIcon,
+          { color: '#007aff' },
+          { default: () => h('svg', { class: 'wifi-icon' }) },
+        ),
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('class="sky-settings-icon"')
+    expect(html).toContain('--sky-settings-icon-color:#007aff')
+    expect(html).toContain('aria-hidden="true"')
+    expect(html).toContain('wifi-icon')
+  })
+
+  it('can expose a meaningful icon when it is not redundant with row copy', async () => {
+    const app = createSSRApp(SkySettingsIcon, {
+      ariaLabel: 'Connected network',
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('role="img"')
+    expect(html).toContain('aria-label="Connected network"')
+    expect(html).not.toContain('aria-hidden="true"')
+  })
+})
diff --git a/frontend/src/ui/settings/SkySettingsIcon.vue b/frontend/src/ui/settings/SkySettingsIcon.vue
new file mode 100644
index 0000000..529770c
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    color?: string
+  }>(),
+  {
+    ariaLabel: '',
+    color: 'var(--sky-app-accent)',
+  },
+)
+
+const iconStyle = computed<CSSProperties>(() => ({
+  '--sky-settings-icon-color': props.color,
+}))
+</script>
+
+<template>
+  <span
+    class="sky-settings-icon"
+    :style="iconStyle"
+    :role="ariaLabel ? 'img' : undefined"
+    :aria-label="ariaLabel || undefined"
+    :aria-hidden="ariaLabel ? undefined : true"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/src/ui/settings/SkySettingsRangeRow.test.ts b/frontend/src/ui/settings/SkySettingsRangeRow.test.ts
new file mode 100644
index 0000000..9e9b2a6
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsRangeRow.test.ts
@@ -0,0 +1,64 @@
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkySettingsRangeRow from '@/ui/settings/SkySettingsRangeRow.vue'
+
+describe('SkySettingsRangeRow', () => {
+  it('renders a semantic list row and forwards the native range contract', async () => {
+    const app = createSSRApp(SkySettingsRangeRow, {
+      ariaValueText: '75 percent',
+      max: 100,
+      min: 25,
+      modelValue: 75,
+      step: 5,
+      title: 'Brightness',
+      valueLabel: '75%',
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('<li')
+    expect(html).toContain('class="sky-settings-range-row"')
+    expect(html).toContain('type="range"')
+    expect(html).toContain('aria-label="Brightness"')
+    expect(html).toContain('aria-valuetext="75 percent"')
+    expect(html).toContain('min="25"')
+    expect(html).toContain('max="100"')
+    expect(html).toContain('step="5"')
+    expect(html).toContain('75%')
+  })
+
+  it('uses the effective numeric value as its default visible label', async () => {
+    const app = createSSRApp(SkySettingsRangeRow, {
+      title: 'Scale',
+      value: 1.25,
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toMatch(/class="sky-range__label">.*1\.25.*<\/span>/)
+    expect(html).not.toContain('aria-valuetext=')
+  })
+
+  it('uses the formatted visible label as the accessible value fallback', async () => {
+    const app = createSSRApp(SkySettingsRangeRow, {
+      modelValue: 0.75,
+      title: 'Scale',
+      valueLabel: '75%',
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('aria-valuetext="75%"')
+    expect(html).toMatch(/class="sky-range__label">.*75%.*<\/span>/)
+  })
+
+  it('exposes input, change, and numeric model update events', () => {
+    const component = SkySettingsRangeRow as unknown as { emits: string[] }
+
+    expect(component.emits).toEqual(
+      expect.arrayContaining(['change', 'input', 'update:modelValue']),
+    )
+  })
+})
diff --git a/frontend/src/ui/settings/SkySettingsRangeRow.vue b/frontend/src/ui/settings/SkySettingsRangeRow.vue
new file mode 100644
index 0000000..8019199
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsRangeRow.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import SkyRange from '@/ui/controls/SkyRange.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    ariaValueText?: string
+    disabled?: boolean
+    max?: number
+    min?: number
+    modelValue?: number
+    step?: number
+    title: string
+    value?: number
+    valueLabel?: string
+  }>(),
+  {
+    ariaValueText: '',
+    disabled: false,
+    max: 100,
+    min: 0,
+    modelValue: undefined,
+    step: 1,
+    value: undefined,
+    valueLabel: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  change: [event: Event]
+  input: [event: Event]
+  'update:modelValue': [value: number]
+}>()
+
+const effectiveValue = computed(
+  () => props.modelValue ?? props.value ?? props.min,
+)
+const visibleValue = computed(
+  () => props.valueLabel ?? String(effectiveValue.value),
+)
+const accessibleValue = computed(
+  () => props.ariaValueText || props.valueLabel || '',
+)
+</script>
+
+<template>
+  <li
+    v-bind="$attrs"
+    class="sky-settings-range-row"
+    :class="{ 'sky-settings-range-row--disabled': disabled }"
+  >
+    <div class="sky-settings-range-row__frame">
+      <SkyRange
+        :aria-label="title"
+        :aria-value-text="accessibleValue"
+        :caption="title"
+        :disabled="disabled"
+        :max="max"
+        :min="min"
+        :model-value="effectiveValue"
+        :step="step"
+        @change="emit('change', $event)"
+        @input="emit('input', $event)"
+        @update:model-value="emit('update:modelValue', $event)"
+      >
+        {{ visibleValue }}
+      </SkyRange>
+    </div>
+  </li>
+</template>
diff --git a/frontend/src/ui/settings/SkySettingsRow.test.ts b/frontend/src/ui/settings/SkySettingsRow.test.ts
new file mode 100644
index 0000000..504842e
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsRow.test.ts
@@ -0,0 +1,136 @@
+import { createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkySettingsRow from '@/ui/settings/SkySettingsRow.vue'
+
+async function renderRow(props: Record<string, unknown>): Promise<string> {
+  return renderToString(createSSRApp(SkySettingsRow, props))
+}
+
+describe('SkySettingsRow', () => {
+  it('renders navigation as a full-row button with value and chevron', async () => {
+    const html = await renderRow({
+      kind: 'navigation',
+      title: 'Private address',
+      value: 'Static',
+    })
+
+    expect(html).toContain('<button')
+    expect(html).toContain('type="button"')
+    expect(html).toContain('sky-settings-row__value')
+    expect(html).toContain('sky-settings-row__chevron')
+    expect(html).toContain('Static')
+  })
+
+  it('marks a selected choice without adding a chevron', async () => {
+    const html = await renderRow({
+      kind: 'choice',
+      selected: true,
+      title: 'System',
+    })
+
+    expect(html).toContain('aria-pressed="true"')
+    expect(html).toContain('sky-settings-row__check')
+    expect(html).not.toContain('sky-settings-row__chevron')
+  })
+
+  it('labels the native switch from the row copy', async () => {
+    const html = await renderRow({
+      description: 'Reconnect after restarting the phone.',
+      kind: 'toggle',
+      modelValue: true,
+      title: 'Automatic rejoin',
+    })
+    const titleId = html.match(/<label id="([^"]+)"/)?.[1]
+    const descriptionId = html.match(/<span id="([^"]+)"/)?.[1]
+    const input = html.match(/<input[^>]+role="switch"[^>]*>/)?.[0] ?? ''
+
+    expect(titleId).toBeTruthy()
+    expect(descriptionId).toBeTruthy()
+    expect(input).toContain(`aria-labelledby="${titleId}"`)
+    expect(input).toContain(`aria-describedby="${descriptionId}"`)
+    expect(input).toContain('checked')
+  })
+
+  it('keeps the labelled switch mounted and disabled while pending', async () => {
+    const html = await renderRow({
+      kind: 'toggle',
+      modelValue: true,
+      pending: true,
+      title: 'Automatic rejoin',
+    })
+    const input = html.match(/<input[^>]+role="switch"[^>]*>/)?.[0] ?? ''
+
+    expect(html).toContain('sky-spinner')
+    expect(input).toContain('disabled')
+    expect(input).toContain('aria-labelledby=')
+  })
+
+  it('renders destructive actions as buttons with the danger tone', async () => {
+    const html = await renderRow({
+      kind: 'action',
+      title: 'Remove',
+      tone: 'danger',
+    })
+
+    expect(html).toContain('<button')
+    expect(html).toContain('sky-settings-row--danger')
+    expect(html).not.toContain('sky-settings-row__chevron')
+  })
+
+  it('keeps value and chevron when navigation supplies custom trailing content', async () => {
+    const app = createSSRApp({
+      render: () =>
+        h(
+          SkySettingsRow,
+          {
+            kind: 'navigation',
+            title: 'Wi-Fi',
+            value: 'Connected',
+          },
+          {
+            trailing: () => h('span', { class: 'network-strength' }, 'Strong'),
+          },
+        ),
+    })
+    const html = await renderToString(app)
+
+    expect(html).toContain('Connected')
+    expect(html).toContain('network-strength')
+    expect(html).toContain('sky-settings-row__chevron')
+
+    const labelledBy = html.match(/aria-labelledby="([^"]+)"/)?.[1] ?? ''
+    const valueId = html.match(
+      /<span id="([^"]+)" class="sky-settings-row__value"/,
+    )?.[1]
+    const trailingId = html.match(
+      /<span id="([^"]+)" class="sky-settings-row__trailing"/,
+    )?.[1]
+
+    expect(valueId).toBeTruthy()
+    expect(trailingId).toBeTruthy()
+    expect(labelledBy).toContain(valueId ?? '')
+    expect(labelledBy).toContain(trailingId ?? '')
+  })
+
+  it.each(['custom', 'value'] as const)(
+    'renders the trailing slot for %s rows',
+    async (kind) => {
+      const app = createSSRApp({
+        render: () =>
+          h(
+            SkySettingsRow,
+            { kind, title: 'Status' },
+            {
+              trailing: () => h('span', { class: 'status-accessory' }, 'Ready'),
+            },
+          ),
+      })
+      const html = await renderToString(app)
+
+      expect(html).toContain('status-accessory')
+      expect(html).toContain('Ready')
+    },
+  )
+})
diff --git a/frontend/src/ui/settings/SkySettingsRow.vue b/frontend/src/ui/settings/SkySettingsRow.vue
new file mode 100644
index 0000000..91602f0
--- /dev/null
+++ b/frontend/src/ui/settings/SkySettingsRow.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { Check, ChevronRight } from 'lucide-vue-next'
+import { computed, useId, useSlots } from 'vue'
+
+import SkySpinner from '@/ui/controls/SkySpinner.vue'
+import SkyToggle from '@/ui/controls/SkyToggle.vue'
+
+defineOptions({ inheritAttrs: false })
+
+type SettingsRowKind =
+  | 'action'
+  | 'choice'
+  | 'custom'
+  | 'navigation'
+  | 'toggle'
+  | 'value'
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    description?: string
+    disabled?: boolean
+    kind?: SettingsRowKind
+    modelValue?: boolean
+    name?: string
+    pending?: boolean
+    selected?: boolean
+    title: string
+    tone?: 'accent' | 'danger' | 'default'
+    value?: number | string
+  }>(),
+  {
+    ariaLabel: '',
+    description: '',
+    disabled: false,
+    kind: 'value',
+    modelValue: false,
+    name: undefined,
+    pending: false,
+    selected: false,
+    tone: 'default',
+    value: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  activate: [event: MouseEvent]
+  'update:modelValue': [value: boolean]
+}>()
+
+const slots = useSlots()
+const generatedId = useId()
+const titleId = `${generatedId}-title`
+const descriptionId = `${generatedId}-description`
+const toggleId = `${generatedId}-toggle`
+const valueId = `${generatedId}-value`
+const trailingId = `${generatedId}-trailing`
+const isInteractive = computed(() =>
+  ['action', 'choice', 'navigation'].includes(props.kind),
+)
+const rowComponent = computed(() => (isInteractive.value ? 'button' : 'div'))
+const hasDescription = computed(() =>
+  Boolean(props.description || slots.description),
+)
+const hasValue = computed(
+  () => props.value !== undefined && String(props.value).length > 0,
+)
+const hasFreeTrailing = computed(
+  () =>
+    Boolean(slots.trailing) &&
+    ['custom', 'navigation', 'value'].includes(props.kind),
+)
+const labelledBy = computed(() => {
+  if (props.ariaLabel) return undefined
+  const ids = [titleId]
+  if (hasValue.value) ids.push(valueId)
+  if (hasFreeTrailing.value) ids.push(trailingId)
+  return ids.join(' ')
+})
+
+function handleActivate(event: MouseEvent): void {
+  if (props.disabled || props.pending || !isInteractive.value) return
+  emit('activate', event)
+}
+
+function updateToggle(value: boolean): void {
+  if (props.disabled || props.pending) return
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <li
+    v-bind="$attrs"
+    class="sky-settings-row"
+    :class="[
+      `sky-settings-row--${kind}`,
+      `sky-settings-row--${tone}`,
+      {
+        'sky-settings-row--disabled': disabled,
+        'sky-settings-row--has-media': Boolean($slots.leading),
+        'sky-settings-row--pending': pending,
+        'sky-settings-row--selected': selected,
+      },
+    ]"
+  >
+    <div
+      v-if="kind === 'toggle'"
+      class="sky-settings-row__frame"
+      :aria-busy="pending || undefined"
+    >
+      <span v-if="$slots.leading" class="sky-settings-row__leading">
+        <slot name="leading" />
+      </span>
+
+      <span class="sky-settings-row__content">
+        <label :id="titleId" class="sky-settings-row__title" :for="toggleId">
+          <slot name="title">{{ title }}</slot>
+        </label>
+        <span
+          v-if="hasDescription"
+          :id="descriptionId"
+          class="sky-settings-row__description"
+        >
+          <slot name="description">{{ description }}</slot>
+        </span>
+      </span>
+
+      <span class="sky-settings-row__accessory">
+        <SkySpinner v-if="pending" :size="18" />
+        <SkyToggle
+          :id="toggleId"
+          :model-value="modelValue"
+          :name="name"
+          :disabled="disabled || pending"
+          :aria-labelledby="titleId"
+          :aria-describedby="hasDescription ? descriptionId : undefined"
+          @update:model-value="updateToggle"
+        />
+      </span>
+    </div>
+
+    <component
+      :is="rowComponent"
+      v-else
+      class="sky-settings-row__frame"
+      :type="isInteractive ? 'button' : undefined"
+      :disabled="isInteractive ? disabled || pending : undefined"
+      :aria-label="ariaLabel || undefined"
+      :aria-labelledby="labelledBy"
+      :aria-describedby="hasDescription ? descriptionId : undefined"
+      :aria-pressed="kind === 'choice' ? selected : undefined"
+      :aria-busy="pending || undefined"
+      @click="handleActivate"
+    >
+      <span v-if="$slots.leading" class="sky-settings-row__leading">
+        <slot name="leading" />
+      </span>
+
+      <span class="sky-settings-row__content">
+        <span :id="titleId" class="sky-settings-row__title">
+          <slot name="title">{{ title }}</slot>
+        </span>
+        <span
+          v-if="hasDescription"
+          :id="descriptionId"
+          class="sky-settings-row__description"
+        >
+          <slot name="description">{{ description }}</slot>
+        </span>
+      </span>
+
+      <span
+        v-if="
+          pending ||
+          hasValue ||
+          hasFreeTrailing ||
+          kind === 'choice' ||
+          kind === 'navigation'
+        "
+        class="sky-settings-row__accessory"
+      >
+        <SkySpinner v-if="pending" :size="18" />
+        <template v-else>
+          <span v-if="hasValue" :id="valueId" class="sky-settings-row__value">
+            <slot name="value">{{ value }}</slot>
+          </span>
+          <span
+            v-if="hasFreeTrailing"
+            :id="trailingId"
+            class="sky-settings-row__trailing"
+          >
+            <slot name="trailing" />
+          </span>
+          <Check
+            v-if="kind === 'choice' && selected"
+            class="sky-settings-row__check"
+            :size="20"
+            :stroke-width="2.25"
+            aria-hidden="true"
+          />
+          <ChevronRight
+            v-if="kind === 'navigation'"
+            class="sky-settings-row__chevron"
+            :size="18"
+            :stroke-width="2"
+            aria-hidden="true"
+          />
+        </template>
+      </span>
+    </component>
+  </li>
+</template>
diff --git a/frontend/src/ui/settings/index.ts b/frontend/src/ui/settings/index.ts
new file mode 100644
index 0000000..3c66582
--- /dev/null
+++ b/frontend/src/ui/settings/index.ts
@@ -0,0 +1,4 @@
+export { default as SkySettingsGroup } from './SkySettingsGroup.vue'
+export { default as SkySettingsIcon } from './SkySettingsIcon.vue'
+export { default as SkySettingsRangeRow } from './SkySettingsRangeRow.vue'
+export { default as SkySettingsRow } from './SkySettingsRow.vue'
diff --git a/frontend/src/ui/tokens.css b/frontend/src/ui/tokens.css
new file mode 100644
index 0000000..41bd736
--- /dev/null
+++ b/frontend/src/ui/tokens.css
@@ -0,0 +1,56 @@
+:root {
+  --sky-safe-area-top: 58px;
+  --sky-safe-area-bottom: 25px;
+  --sky-page-gutter: 14px;
+  --sky-page-space: 12px;
+  --sky-navbar-height: 44px;
+  --sky-navbar-large-title-height: 52px;
+  --sky-tabbar-height: 64px;
+  --sky-touch-target: 44px;
+  --sky-space-1: 4px;
+  --sky-space-2: 8px;
+  --sky-space-3: 12px;
+  --sky-space-4: 16px;
+  --sky-space-5: 20px;
+  --sky-space-6: 24px;
+  --sky-radius-control: 12px;
+  --sky-radius-card: 16px;
+  --sky-radius-sheet: 24px;
+  --sky-font-caption: 12px;
+  --sky-font-body: 15px;
+  --sky-font-title: 17px;
+  --sky-font-large-title: 28px;
+}
+
+.sky-app-page {
+  --sky-app-accent: #3b82f6;
+  --sky-app-accent-soft: rgba(59, 130, 246, 0.14);
+  --sky-bg: #f2f4f7;
+  --sky-surface: #ffffff;
+  --sky-surface-muted: #e6e9ee;
+  --sky-text: #111827;
+  --sky-muted: #64748b;
+  --sky-hairline: rgba(15, 23, 42, 0.1);
+  --sky-danger: #dc2626;
+  --sky-danger-soft: rgba(220, 38, 38, 0.14);
+  --sky-success: #059669;
+  --sky-success-soft: rgba(5, 150, 105, 0.14);
+  --sky-warning: #b45309;
+  --sky-warning-soft: rgba(245, 158, 11, 0.16);
+}
+
+.sky-app-page--dark {
+  --sky-app-accent-soft: rgba(96, 165, 250, 0.17);
+  --sky-bg: #08080a;
+  --sky-surface: #1c1c1e;
+  --sky-surface-muted: #2c2c2e;
+  --sky-text: #f5f5f7;
+  --sky-muted: #98989f;
+  --sky-hairline: rgba(255, 255, 255, 0.1);
+  --sky-danger: #ff453a;
+  --sky-danger-soft: rgba(255, 69, 58, 0.16);
+  --sky-success: #30d158;
+  --sky-success-soft: rgba(48, 209, 88, 0.14);
+  --sky-warning: #ffd60a;
+  --sky-warning-soft: rgba(255, 214, 10, 0.16);
+}
diff --git a/frontend/src/utils/scrollRail.test.ts b/frontend/src/utils/scrollRail.test.ts
new file mode 100644
index 0000000..48300a3
--- /dev/null
+++ b/frontend/src/utils/scrollRail.test.ts
@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  resolveScrollRailWheel,
+  SCROLL_RAIL_DELTA_MODE_LINE,
+  SCROLL_RAIL_DELTA_MODE_PAGE,
+  SCROLL_RAIL_DELTA_MODE_PIXEL,
+  SCROLL_RAIL_LINE_HEIGHT,
+} from '@/utils/scrollRail'
+
+const baseInput = {
+  clientWidth: 300,
+  deltaMode: SCROLL_RAIL_DELTA_MODE_PIXEL,
+  deltaX: 0,
+  deltaY: 0,
+  scrollLeft: 100,
+  scrollWidth: 700,
+}
+
+describe('horizontal scroll rail wheel behavior', () => {
+  it('maps a vertical mouse wheel to horizontal movement', () => {
+    expect(resolveScrollRailWheel({ ...baseInput, deltaY: 120 })).toEqual({
+      consumed: true,
+      scrollLeft: 220,
+    })
+    expect(resolveScrollRailWheel({ ...baseInput, deltaY: -60 })).toEqual({
+      consumed: true,
+      scrollLeft: 40,
+    })
+  })
+
+  it('uses the dominant trackpad axis without adding both deltas', () => {
+    expect(
+      resolveScrollRailWheel({ ...baseInput, deltaX: 80, deltaY: 12 }),
+    ).toEqual({ consumed: true, scrollLeft: 180 })
+  })
+
+  it('normalizes line and page wheel deltas', () => {
+    expect(
+      resolveScrollRailWheel({
+        ...baseInput,
+        deltaMode: SCROLL_RAIL_DELTA_MODE_LINE,
+        deltaY: 2,
+      }).scrollLeft,
+    ).toBe(100 + 2 * SCROLL_RAIL_LINE_HEIGHT)
+    expect(
+      resolveScrollRailWheel({
+        ...baseInput,
+        deltaMode: SCROLL_RAIL_DELTA_MODE_PAGE,
+        deltaY: 1,
+      }).scrollLeft,
+    ).toBe(400)
+  })
+
+  it('clamps movement and releases the wheel at either edge', () => {
+    expect(resolveScrollRailWheel({ ...baseInput, deltaY: -500 })).toEqual({
+      consumed: true,
+      scrollLeft: 0,
+    })
+    expect(
+      resolveScrollRailWheel({ ...baseInput, scrollLeft: 0, deltaY: -40 }),
+    ).toEqual({ consumed: false, scrollLeft: 0 })
+    expect(
+      resolveScrollRailWheel({
+        ...baseInput,
+        scrollLeft: 400,
+        deltaY: 40,
+      }),
+    ).toEqual({ consumed: false, scrollLeft: 400 })
+    expect(
+      resolveScrollRailWheel({
+        ...baseInput,
+        scrollLeft: 400.75,
+        deltaY: 40,
+      }),
+    ).toEqual({ consumed: false, scrollLeft: 400.75 })
+  })
+
+  it('does not consume the wheel when the rail has no overflow', () => {
+    expect(
+      resolveScrollRailWheel({
+        ...baseInput,
+        clientWidth: 300,
+        scrollLeft: 0,
+        scrollWidth: 300,
+        deltaY: 80,
+      }),
+    ).toEqual({ consumed: false, scrollLeft: 0 })
+  })
+})
diff --git a/frontend/src/utils/scrollRail.ts b/frontend/src/utils/scrollRail.ts
new file mode 100644
index 0000000..93022ce
--- /dev/null
+++ b/frontend/src/utils/scrollRail.ts
@@ -0,0 +1,52 @@
+export const SCROLL_RAIL_DELTA_MODE_PIXEL = 0
+export const SCROLL_RAIL_DELTA_MODE_LINE = 1
+export const SCROLL_RAIL_DELTA_MODE_PAGE = 2
+export const SCROLL_RAIL_LINE_HEIGHT = 16
+
+export interface ScrollRailWheelInput {
+  clientWidth: number
+  deltaMode: number
+  deltaX: number
+  deltaY: number
+  scrollLeft: number
+  scrollWidth: number
+}
+
+export interface ScrollRailWheelResult {
+  consumed: boolean
+  scrollLeft: number
+}
+
+export function resolveScrollRailWheel({
+  clientWidth,
+  deltaMode,
+  deltaX,
+  deltaY,
+  scrollLeft,
+  scrollWidth,
+}: ScrollRailWheelInput): ScrollRailWheelResult {
+  const maxScrollLeft = Math.max(0, scrollWidth - clientWidth)
+  if (maxScrollLeft === 0) {
+    return { consumed: false, scrollLeft: 0 }
+  }
+
+  const boundedScrollLeft = Math.min(maxScrollLeft, Math.max(0, scrollLeft))
+
+  let delta = Math.abs(deltaY) >= Math.abs(deltaX) ? deltaY : deltaX
+  if (deltaMode === SCROLL_RAIL_DELTA_MODE_LINE) {
+    delta *= SCROLL_RAIL_LINE_HEIGHT
+  } else if (deltaMode === SCROLL_RAIL_DELTA_MODE_PAGE) {
+    delta *= clientWidth
+  }
+
+  const nextScrollLeft = Math.min(
+    maxScrollLeft,
+    Math.max(0, boundedScrollLeft + delta),
+  )
+  const consumed = Math.abs(nextScrollLeft - boundedScrollLeft) >= 0.5
+
+  return {
+    consumed,
+    scrollLeft: consumed ? nextScrollLeft : scrollLeft,
+  }
+}

From 9edf1405d95dea0f929c299f828c2fd7d614fe39 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:10 +0200
Subject: [PATCH 49/63] ENH - align Sky Cloud branding and app copy

---
 README.md                              | 31 ++++----
 frontend/src/stores/phone.ts           | 97 ++++++++++++++------------
 sky_phone/config/locales/en.lua        | 82 +++++++++++-----------
 sky_phone/source/server/db_migrate.lua |  2 +-
 sky_phone/source/server/testdata.lua   |  2 +-
 5 files changed, 112 insertions(+), 102 deletions(-)

diff --git a/README.md b/README.md
index 8fb71fd..31342c3 100644
--- a/README.md
+++ b/README.md
@@ -85,13 +85,13 @@ existing playlist entries can no longer resolve the track.
 
 Players can add public YouTube video links to their own library. Metadata is requested through
 YouTube's oEmbed endpoint on the server, while playback uses the embedded YouTube player only on
-that player's NUI. Personal songs and playlists are stored per linked iFruit account, or per phone
+that player's NUI. Personal songs and playlists are stored per linked Sky Cloud account, or per phone
 IMEI while signed out, in the `sky_phone_music_*` tables. Limits and rate controls are configured in
 `config/music.lua`.
 
 ## FlipTok accounts
 
-FlipTok profiles use their own username and password login. Registration requires a linked iFruit
+FlipTok profiles use their own username and password login. Registration requires a linked Sky Cloud
 account once so an existing creator profile, videos, followers, and verification can be claimed
 without data loss. Login sessions are stored per phone IMEI and survive resource or server restarts;
 signing out removes only that device session.
@@ -106,7 +106,7 @@ set sky_phone_fliptok_password_pepper "replace-with-a-long-random-secret"
 Passwords are stored as salted hashes. The pepper is read server-side from the convar and is never
 included in the NUI bundle.
 
-Standalone FiveM phone built with Vue 3, TypeScript, Pinia, Vue Router, Konsta UI 5, and Tailwind CSS 4. The phone opens through the usable item; `/phone` is disabled unless `Config.Phone.DevelopmentCommand` is enabled explicitly. Phone identity and SIM-card behavior are selected independently through `Config.Phone.Unique` and `Config.Sim.Enabled`.
+Standalone FiveM phone built with Vue 3, TypeScript, Pinia, Vue Router, the Sky-owned FiveM UI system, and Tailwind CSS 4. Konsta UI remains only for screens that have not yet completed their migration. The phone opens through the usable item; `/phone` is disabled unless `Config.Phone.DevelopmentCommand` is enabled explicitly. Phone identity and SIM-card behavior are selected independently through `Config.Phone.Unique` and `Config.Sim.Enabled`.
 
 ### Ingame test data
 
@@ -114,7 +114,7 @@ On development servers, enable `Config.TestData.Enabled` and run `/phonetestdata
 owns the phone. The command creates or refreshes idempotent, player-scoped fixtures for contacts,
 calls, messages, mail, notes, gallery, banking history, billing, calendar, map markers, music, radio,
 EasyShare, CityMarkt, Local Pages, Picstagram, FlipTok, Feather, Flare, DarkChat, CrewLink, SkyRide,
-and company requests. It also creates a linked iFruit account and a registered SIM when the selected
+and company requests. It also creates a linked Sky Cloud account and a registered SIM when the selected
 phone does not have them yet. Reopen the phone after the command completes.
 
 Garage and Housing intentionally continue to use the real configured provider data. Apps without
@@ -122,7 +122,7 @@ persistent content, such as Calculator, Camera, Clock, Weather, Settings, and Pa
 database fixtures. Set `Config.TestData.AdminOnly = true` to restrict the command to the configured
 framework admin groups, and disable the feature outside development environments.
 
-An iFruit account is optional. Unlinked devices retain local settings, alarms, media, apps, notes, contacts, and recent calls. Linking from Mail or Settings moves local data into an empty cloud account; an existing cloud dataset wins over local contacts and recents. Signing out keeps an editable local snapshot without deleting cloud data.
+A Sky Cloud account is optional. Unlinked devices retain local settings, alarms, media, apps, notes, contacts, and recent calls. Linking from Mail or Settings moves local data into an empty Sky Cloud account; an existing Sky Cloud dataset wins over local contacts and recents. Signing out keeps an editable local snapshot without deleting Sky Cloud data.
 
 ## Phone identity and SIM modes
 
@@ -136,7 +136,7 @@ Config.Sim.Enabled = true
 For backwards compatibility, an omitted switch is also treated as `true`.
 
 With `Config.Phone.Unique = true`, every phone item is one transferable physical Device. Its unique
-15-digit IMEI is stored in item metadata, so its settings, PIN, local app data, linked iFruit
+15-digit IMEI is stored in item metadata, so its settings, PIN, local app data, linked Sky Cloud
 account, and installed SIM travel with that item. The item must be non-stackable.
 
 With `Config.Phone.Unique = false`, the server assigns each framework character one persistent
@@ -204,16 +204,17 @@ set sky_phone_giphy_api_key "replace-with-your-giphy-api-key"
 GIPHY provides trending and searched GIFs through a paginated server-side proxy. Only the server
 reads the key. Photo and video actions in Messages use media captured by the Camera app.
 
-Database migrations run automatically. Existing `sky_phone_mail_accounts` installations are renamed to `sky_phone_accounts` while preserving account IDs and mail foreign keys. The migration also creates `sky_phone_character_devices` for persistent non-unique phone mappings and marks automatic SIMs through `sky_phone_sims.is_virtual`. iFruit passwords are intentional in-character credentials and remain plaintext `VARCHAR(64)` values; registration screens warn players never to reuse a real password.
+Database migrations run automatically. Existing `sky_phone_mail_accounts` installations are renamed to `sky_phone_accounts` while preserving account IDs and mail foreign keys. The migration also creates `sky_phone_character_devices` for persistent non-unique phone mappings and marks automatic SIMs through `sky_phone_sims.is_virtual`. Sky Cloud passwords are intentional in-character credentials and remain plaintext `VARCHAR(64)` values; registration screens warn players never to reuse a real password.
 
 Camera and Gallery media is stored in `sky_phone_media`. Signed-out captures belong to the current
-IMEI; linking an iFruit account moves those rows into the account gallery so every linked phone sees
-them. Signing out hides cloud media without deleting it. Factory reset removes device-local media
-and attempts to delete only Phone-created remote FiveManage files. Media imported from a website is
-removed locally but never deleted at its source. Register import websites under
-`Config.Media.Import.Websites` in `sky_phone/config/media.lua`; built-in adapters support FiveManage
-files and version-1 JSON manifests. The Gallery import form accepts direct HTTPS image/video links
-only when their hostname matches the selected website's `AllowedMediaHosts`.
+IMEI; linking a Sky Cloud account moves those rows into the account gallery so every linked phone sees
+them. Signing out hides Sky Cloud media without deleting it. Factory reset removes device-local media
+and attempts to delete only remote FiveManage files created by `sky_phone`; account-owned media
+remains in Sky Cloud. Media imported from a website is removed locally but never deleted at its
+source. Register import websites under `Config.Media.Import.Websites` in
+`sky_phone/config/media.lua`; built-in adapters support FiveManage files and version-1 JSON
+manifests. The Gallery import form accepts direct HTTPS image/video links only when their hostname
+matches the selected website's `AllowedMediaHosts`.
 
 For a fresh manual database installation, import `sky_phone/sql/install.sql`. It contains the complete current table, key, index, collation, and foreign-key schema. Runtime migrations remain authoritative for upgrading an existing installation and must stay enabled.
 
@@ -249,7 +250,7 @@ Radio profiles are stored in `sky_phone_radio_profiles`. Runtime migration creat
 
 Inventory metadata has no framework-wide standard: providers differ in export names, callback payloads, slot handling, and whether metadata is called `metadata` or `info`. For that reason, `sky_phone` uses explicit provider adapters instead of guessing exports at runtime. Every supported adapter implements slot lookup, item lookup, metadata replacement, capacity handling, add/remove operations, and usable-item registration. Providers without a separate capacity export use their authoritative add operation as the final capacity gate. Phone item metadata is authoritative only when `Config.Phone.Unique = true`; in non-unique mode the persistent character mapping is authoritative instead.
 
-When physical SIMs are enabled and a SIM is ejected or replaced, the returned inventory item is rebuilt from the authoritative `sky_phone_sims` row. Its metadata contains `sim_metadata_version`, `sim_id`, `phone_number`, `formatted_number`, and `sim_type`. Registered SIMs additionally contain `firstname`, `lastname`, `birthdate`, and `registered_at`. The internal framework owner identifier remains database-only. Inserting the item again resolves the SIM by `sim_id`; contacts and device/cloud data remain attached to their existing Device or cloud persistence instead of being copied into inventory metadata. Automatically created virtual SIMs remain database-only and never become inventory items.
+When physical SIMs are enabled and a SIM is ejected or replaced, the returned inventory item is rebuilt from the authoritative `sky_phone_sims` row. Its metadata contains `sim_metadata_version`, `sim_id`, `phone_number`, `formatted_number`, and `sim_type`. Registered SIMs additionally contain `firstname`, `lastname`, `birthdate`, and `registered_at`. The internal framework owner identifier remains database-only. Inserting the item again resolves the SIM by `sim_id`; contacts and device/Sky Cloud data remain attached to their existing Device or Sky Cloud persistence instead of being copied into inventory metadata. Automatically created virtual SIMs remain database-only and never become inventory items.
 
 For `ox_inventory`, configure the phone with `stack = false` when `Config.Phone.Unique = true`; it may use `stack = true` in non-unique mode. Physical SIM items always use `stack = false` and are only needed when `Config.Sim.Enabled = true`. Every usable item should use `consume = 0`. Do not configure a client event or export. Ox then completes its normal server-authoritative use flow and emits `ox_inventory:usedItem`; the bridge resolves the authoritative slot again and only opens the matching Device or SIM. A client export would return before Ox calls `useItem` and therefore prevent `ox_inventory:usedItem` from being emitted.
 
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 8de3c3b..b7e4fd3 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -549,10 +549,10 @@ const defaultLocales: LocaleTree = {
       name: 'CrewLink',
       connecting: 'Connecting your crew...',
       privateNetwork: 'Private location network',
-      signInTitle: 'Connect your iFruit Account',
+      signInTitle: 'Connect your Sky Cloud account',
       signInBody:
-        'CrewLink uses your private iFruit identity to keep groups and roles available across your phones.',
-      openSettings: 'Open iFruit Settings',
+        'CrewLink uses your private Sky Cloud identity to keep groups and roles available across your phones.',
+      openSettings: 'Open Sky Cloud settings',
       authEyebrow: 'Private crew network',
       authTitle: 'Welcome to CrewLink',
       authBody:
@@ -564,7 +564,7 @@ const defaultLocales: LocaleTree = {
       camera: 'Camera',
       backToLogin: 'Back to CrewLink login',
       authErrors: {
-        no_ifruit_account: 'Sign in to your iFruit account in Settings first.',
+        no_ifruit_account: 'Sign in to your Sky Cloud account in Settings first.',
         invalid_username: 'Use 3–20 letters, numbers, dots, or underscores.',
         profile_not_found: 'No CrewLink profile exists for this iFruit email.',
         profile_exists: 'This iFruit email already has a CrewLink profile.',
@@ -743,7 +743,7 @@ const defaultLocales: LocaleTree = {
         default: 'Your CrewLink group has an update.',
       },
       errors: {
-        not_authenticated: 'Sign in to your iFruit Account first.',
+        not_authenticated: 'Sign in to your Sky Cloud account first.',
         profile_required: 'Create your CrewLink profile first.',
         invalid_username: 'Use 3–20 letters, numbers, dots, or underscores.',
         invalid_profile: 'Check your profile details.',
@@ -773,7 +773,7 @@ const defaultLocales: LocaleTree = {
       name: 'Flare',
       signInTitle: 'Sign in to Flare',
       signInBody:
-        'Flare profiles and matches are linked to your private iFruit account.',
+        'Flare profiles and matches are linked to your private Sky Cloud account.',
       createProfile: 'Create your profile',
       welcome: 'Find your spark',
       welcomeBody: 'Build a profile and meet people across Los Santos.',
@@ -947,7 +947,7 @@ const defaultLocales: LocaleTree = {
         'Sign in to continue with your photos, stories, follows, and saved posts.',
       registerBody: 'Create a private Picstagram login for your photo profile.',
       registrationHint:
-        'An iFruit account is required once to create and own a Picstagram profile.',
+        'A Sky Cloud account is required once to create and own a Picstagram profile.',
       displayName: 'Name',
       username: 'Username',
       password: 'Password',
@@ -1096,7 +1096,7 @@ const defaultLocales: LocaleTree = {
         invalid_password: 'Password must be 8–72 characters.',
         invalid_credentials: 'Username or password is incorrect.',
         already_registered:
-          'This iFruit account already owns a Picstagram profile.',
+          'This Sky Cloud account already owns a Picstagram profile.',
         handle_taken: 'This username is already taken.',
         post_not_found: 'This post is unavailable.',
         story_not_found: 'This story is unavailable.',
@@ -1112,7 +1112,7 @@ const defaultLocales: LocaleTree = {
         not_authorized: 'You are not allowed to do that.',
         report_not_found: 'This report is no longer open.',
         rate_limited: 'Too many actions. Try again shortly.',
-        not_authenticated: 'Sign in to iFruit first.',
+        not_authenticated: 'Sign in to Sky Cloud first.',
         picstagram_not_authenticated: 'Sign in to Picstagram first.',
         request_failed: 'The request failed.',
         default: 'Picstagram could not complete the request.',
@@ -1184,11 +1184,11 @@ const defaultLocales: LocaleTree = {
       registerNow: 'Create a profile',
       loginNow: 'Log in',
       authTrust:
-        'This Feather session is separate from your other apps and linked to your iFruit email.',
+        'Your Feather profile is linked to your Sky Cloud account through your iFruit email.',
       profileStep: 'Step 2 of 2',
-      accountConnected: 'iFruit account connected',
+      accountConnected: 'Sky Cloud account connected',
       authErrors: {
-        no_ifruit_account: 'Sign in to your iFruit account in Settings first.',
+        no_ifruit_account: 'Sign in to your Sky Cloud account in Settings first.',
         invalid_handle: 'Use 3–30 letters, numbers or underscores.',
         invalid_username: 'That username does not match your Feather profile.',
         profile_not_found: 'No Feather profile exists for this iFruit email.',
@@ -1200,7 +1200,7 @@ const defaultLocales: LocaleTree = {
       },
       welcome: 'Find your voice',
       welcomeBody:
-        'Join the live conversation in Los Santos. Your Feather profile stays linked to your iFruit account.',
+        'Join the live conversation in Los Santos. Your Feather profile stays linked to your Sky Cloud account.',
       createProfile: 'Create Feather profile',
       profileDetailsHint: 'Choose how people will recognize you.',
       displayName: 'Display name',
@@ -1313,7 +1313,7 @@ const defaultLocales: LocaleTree = {
         quote: 'quoted your feather',
       },
       errors: {
-        accountRequired: 'Sign in to iFruit in Settings first.',
+        accountRequired: 'Sign in to Sky Cloud in Settings first.',
         invalidHandle: 'Use 3–30 letters, numbers or underscores.',
         handleTaken: 'That handle is already taken.',
         invalidPost: 'Write something or attach a photo.',
@@ -1422,7 +1422,7 @@ const defaultLocales: LocaleTree = {
       passwordPlaceholder: 'At least 8 characters',
       confirmPasswordPlaceholder: 'Enter password again',
       registrationHint:
-        'An iFruit account is required once to create and own a FlipTok profile.',
+        'A Sky Cloud account is required once to create and own a FlipTok profile.',
       accountDetails: 'Account details',
       profileDetails: 'Profile details',
       account: 'Account',
@@ -1461,11 +1461,11 @@ const defaultLocales: LocaleTree = {
         invalid_password: 'Password must be 8–72 characters.',
         invalid_credentials: 'Username or password is incorrect.',
         already_registered:
-          'This iFruit account already owns a registered FlipTok profile.',
+          'This Sky Cloud account already owns a registered FlipTok profile.',
         handle_taken: 'This username is already taken.',
         video_not_found: 'This video is unavailable.',
         rate_limited: 'Too many actions. Try again shortly.',
-        not_authenticated: 'Sign in to iFruit first.',
+        not_authenticated: 'Sign in to Sky Cloud first.',
         blocked: 'This account is blocked.',
         not_authorized: 'You do not have moderation access.',
         report_not_found: 'This report is no longer open.',
@@ -1477,7 +1477,7 @@ const defaultLocales: LocaleTree = {
       newMessage: 'New DarkChat message from {sender}',
       privateNotification: 'New DarkChat message',
       signInBody:
-        'DarkChat identities are linked to your private iFruit account.',
+        'DarkChat identities are linked to your private Sky Cloud account.',
       signInHint: 'Sign in through Settings to continue.',
       security: 'Security',
       privateNetwork: 'Private invitation-only network',
@@ -1573,7 +1573,7 @@ const defaultLocales: LocaleTree = {
       microphoneUnavailable: 'The microphone is unavailable.',
       recordingTooLarge: 'The voice message is too large.',
       errors: {
-        not_authenticated: 'Sign in to your iFruit account first.',
+        not_authenticated: 'Sign in to your Sky Cloud account first.',
         invalid_dark_id: 'Enter a valid Dark-ID or invitation code.',
         profile_not_found: 'This private identity was not found.',
         self_chat: 'You cannot message your own identity.',
@@ -2320,13 +2320,15 @@ const defaultLocales: LocaleTree = {
     },
     house: {
       name: 'House',
-      subtitle: 'Homes and access',
-      myHomes: 'My Homes',
+      subtitle: 'Manage homes and access',
+      myHomes: 'Your Homes',
       properties: 'Properties',
       owned: 'Owned',
       shared: 'Shared with you',
       locked: 'Locked',
       unlocked: 'Unlocked',
+      lockDoor: 'Lock Door',
+      unlockDoor: 'Unlock Door',
       owner: 'Owner',
       keyholder: 'Key holder',
       openDetails: 'Open property details',
@@ -2336,13 +2338,13 @@ const defaultLocales: LocaleTree = {
       offlineBody:
         'Start a supported housing resource or review Config.Housing.',
       unavailable: 'Homes unavailable',
-      empty: 'No Homes',
-      emptyBody: 'Owned homes and homes shared with you will appear here.',
+      empty: 'No homes yet',
+      emptyBody: 'Homes you own or can access will appear here automatically.',
       provider: 'Housing data · {system}',
       access: 'Access',
       status: 'Status',
-      actions: 'Controls',
-      setWaypoint: 'Directions',
+      actions: 'Quick Actions',
+      setWaypoint: 'Get Directions',
       viewCamera: 'View Camera',
       garage: 'Garage',
       garageEnabled: 'Enabled',
@@ -2696,7 +2698,7 @@ const defaultLocales: LocaleTree = {
       daysAgo: '{count}d ago',
       photos: 'photos',
       activeListings: 'active listings',
-      signInTitle: 'Sign in to iFruit',
+      signInTitle: 'Sign in to Sky Cloud',
       signInBody: 'Log in to your CityMarkt profile to sell, save or message.',
       authEyebrow: 'CityMarkt account',
       authTitle: 'Welcome to CityMarkt',
@@ -2706,7 +2708,7 @@ const defaultLocales: LocaleTree = {
       register: 'Register',
       authUsername: 'Username',
       authErrors: {
-        no_ifruit_account: 'Connect an iFruit account in Settings first.',
+        no_ifruit_account: 'Connect a Sky Cloud account in Settings first.',
         invalid_username: 'Enter the username of your CityMarkt profile.',
         profile_not_found: 'No CityMarkt profile exists for this iFruit email.',
         profile_exists:
@@ -2732,7 +2734,7 @@ const defaultLocales: LocaleTree = {
       phone: 'Phone',
       contactSeller: 'Contact seller',
       messagePlaceholder: 'Hi, is this still available?',
-      signInToMessage: 'Sign in to your iFruit account to send a message.',
+      signInToMessage: 'Sign in to your Sky Cloud account to send a message.',
       edit: 'Edit',
       makeActive: 'Make active',
       markSold: 'Mark sold',
@@ -2829,7 +2831,7 @@ const defaultLocales: LocaleTree = {
         blocked: 'Messages are blocked between these accounts.',
         already_reported: 'You already reported this listing.',
         rate_limited: 'Too many requests. Try again shortly.',
-        not_authenticated: 'Sign in to your iFruit account first.',
+        not_authenticated: 'Sign in to your Sky Cloud account first.',
         conflict: 'The listing changed. Open it again.',
         request_failed: 'CityMarkt is temporarily unavailable.',
         default: 'The CityMarkt request failed.',
@@ -2865,19 +2867,19 @@ const defaultLocales: LocaleTree = {
       noPostsBody: 'Be the first to share something with the city.',
       noPhoto: 'No photo attached',
       signInTitle: 'Your Local Pages profile',
-      signInBody: 'Sign in to iFruit in Settings to publish and save posts.',
+      signInBody: 'Sign in to Sky Cloud in Settings to publish and save posts.',
       authEyebrow: 'Local Pages account',
       authWelcome: 'Welcome to Local Pages',
       authBody:
         'Your iFruit email is linked automatically. Use your Local Pages username to continue.',
       login: 'Sign in',
       register: 'Register',
-      loginTitle: 'Continue with iFruit',
+      loginTitle: 'Continue with Sky Cloud',
       loginBody:
         'Your posts, saved items and profile stay linked to your account.',
-      registerTitle: 'Create an iFruit account',
+      registerTitle: 'Create your Local Pages profile',
       registerBody:
-        'Choose your new iFruit address. Your Local Pages profile comes next.',
+        'Choose a username and optional profile photo. Your iFruit email stays linked.',
       authEmail: 'iFruit address',
       authEmailPlaceholder: 'your.name',
       authPassword: 'Password',
@@ -2940,7 +2942,7 @@ const defaultLocales: LocaleTree = {
         'Review the listing and publish it when you are ready.',
       cityMarktPhotosHint: 'The CityMarkt listing photos will be included.',
       authErrors: {
-        no_ifruit_account: 'Sign in to your iFruit account in Settings first.',
+        no_ifruit_account: 'Sign in to your Sky Cloud account in Settings first.',
         invalid_username:
           'Use 3–24 lowercase letters, numbers, dots or underscores.',
         profile_not_found:
@@ -2964,7 +2966,7 @@ const defaultLocales: LocaleTree = {
         citymarkt_not_found: 'This CityMarkt listing is unavailable.',
         citymarkt_daily_limit: 'You already shared a CityMarkt listing today.',
         citymarkt_already_shared: 'This listing was already shared.',
-        not_authenticated: 'Sign in to iFruit first.',
+        not_authenticated: 'Sign in to Sky Cloud first.',
         rate_limited: 'Too many requests. Try again shortly.',
         request_failed: 'The post could not be saved.',
         default: 'Local Pages is temporarily unavailable.',
@@ -3099,7 +3101,7 @@ const defaultLocales: LocaleTree = {
       today: 'Today',
       calendars: 'Calendars',
       calendar: 'Calendar',
-      calendarName: 'iFruit',
+      calendarName: 'Sky Cloud',
       searchPlaceholder: 'Search events',
       previousMonth: 'Previous month',
       nextMonth: 'Next month',
@@ -3123,9 +3125,9 @@ const defaultLocales: LocaleTree = {
       noEvents: 'Nothing planned',
       noEventsBody:
         'This day is still free. Add an event whenever you are ready.',
-      signInTitle: 'Your iFruit calendar',
+      signInTitle: 'Your Sky Cloud calendar',
       signInBody:
-        'Sign in to iFruit in Settings to sync appointments and receive reminders.',
+        'Sign in to Sky Cloud in Settings to sync appointments and receive reminders.',
       reminderNotification: 'Upcoming: {title}',
       views: {
         compact: 'Compact',
@@ -3147,7 +3149,7 @@ const defaultLocales: LocaleTree = {
         invalid_range: 'This calendar period is invalid.',
         conflict: 'This event changed on another phone. Open it again.',
         rate_limited: 'Too many changes. Try again shortly.',
-        not_authenticated: 'Sign in to your iFruit account first.',
+        not_authenticated: 'Sign in to your Sky Cloud account first.',
         request_failed: 'Calendar is temporarily unavailable.',
         default: 'The calendar request failed.',
       },
@@ -3235,7 +3237,7 @@ const defaultLocales: LocaleTree = {
       email: 'Email',
       password: 'Password',
       confirmPassword: 'Confirm password',
-      accountEyebrow: 'Your iFruit account',
+      accountEyebrow: 'Your Sky Cloud account',
       emailPlaceholder: 'name@ifruit.com',
       passwordPlaceholder: 'Enter password',
       passwordWarning:
@@ -3255,6 +3257,10 @@ const defaultLocales: LocaleTree = {
       messagePlaceholder: 'Write a message...',
       search: 'Search mail',
       messages: 'messages',
+      select: 'Select',
+      selectedCount: '{count} Selected',
+      deleteSelected: 'Delete Selected',
+      selectionLimit: 'You can select up to {count} messages at once.',
       noMessageContent: 'No message content',
       noMail: 'No Mail',
       noMailBody: 'Messages in this mailbox will appear here.',
@@ -3491,12 +3497,12 @@ const defaultLocales: LocaleTree = {
       wallpaper: 'Wallpaper',
       on: 'On',
       off: 'Off',
-      accountName: 'iFruit Account',
+      accountName: 'Sky Cloud',
       accountDetail: 'Important Data & Cloud',
       accountLocalDetail: 'Not signed in',
-      accountCloudDetail: 'Important data syncs through iFruit Cloud',
+      accountCloudDetail: 'Important data syncs through Sky Cloud',
       accountLoginBody:
-        'Sign in to keep your important data safe. Without an iFruit Account, it will be lost with the phone.',
+        'Sign in to keep your important data safe. Without a Sky Cloud account, it will be lost with the phone.',
       accountInformation: 'Account Information',
       accountStatus: 'Account Status',
       accountStatusValue: 'Active',
@@ -3564,7 +3570,7 @@ const defaultLocales: LocaleTree = {
       thisDevice: 'This Phone',
       removeDevice: 'Remove Device',
       removeDeviceBody:
-        'Enter your iFruit password to remove this device from the account.',
+        'Enter your Sky Cloud password to remove this device from the account.',
       signOut: 'Sign Out',
       factoryReset: 'Erase All Content and Settings',
       factoryResetBody:
@@ -3573,7 +3579,7 @@ const defaultLocales: LocaleTree = {
       factoryResetWarning: 'Do not turn off this phone. This takes 60 seconds.',
       passcode: {
         description:
-          'A passcode protects the contents of this phone. It stays with the device when the SIM or iFruit account changes.',
+          'A passcode protects the contents of this phone. It stays with the device when the SIM or Sky Cloud account changes.',
         status: 'Passcode',
         codeLength: 'Code Length',
         sixDigit: '6-Digit Code',
@@ -3724,6 +3730,7 @@ const defaultLocales: LocaleTree = {
   },
   Notifications: {
     clearAll: 'Clear All',
+    clear: 'Clear',
     now: 'now',
     open: 'Open notification',
   },
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index d623dc5..89fd77f 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -2,7 +2,7 @@ Locales["en"] = {
     CommandDescription = "Open your phone.",
     TestData = {
         CommandDescription = "Create or refresh test content in every data-driven phone app.",
-        Success = "Test content is ready. Your iFruit login is {email}. Reopen the phone to refresh every app.",
+        Success = "Test content is ready. Your Sky Cloud login is {email}. Reopen the phone to refresh every app.",
         Failed = "Test content could not be created. Check the server console for details.",
     },
     FlipTokCommand = {
@@ -94,7 +94,7 @@ Locales["en"] = {
             open = "Open Control Center", play = "Play", previous = "Previous track", quickActions = "Quick actions",
             timer = "Timer", unmuteRingtone = "Unmute ringtone and notifications", volume = "Volume", wifi = "Wi-Fi",
         },
-        Notifications = { clearAll = "Clear All", now = "now", open = "Open notification" },
+        Notifications = { clearAll = "Clear All", clear = "Clear", now = "now", open = "Open notification" },
         LockScreen = {
             label = "Lock Screen", flashlight = "Flashlight", camera = "Camera", swipeUp = "Swipe up to open",
             passcode = {
@@ -265,12 +265,12 @@ Locales["en"] = {
             },
             crewlink = {
                 name = "CrewLink", connecting = "Connecting your crew...", privateNetwork = "Private location network",
-                signInTitle = "Connect your iFruit Account", signInBody = "CrewLink uses your private iFruit identity to keep groups and roles available across your phones.", openSettings = "Open iFruit Settings",
+                signInTitle = "Connect your Sky Cloud account", signInBody = "CrewLink uses your private Sky Cloud identity to keep groups and roles available across your phones.", openSettings = "Open Sky Cloud settings",
                 authEyebrow = "Private crew network", authTitle = "Welcome to CrewLink",
                 authBody = "Your iFruit email is linked automatically. Use your CrewLink username to continue.",
                 login = "Log in", register = "Register", ifruitEmail = "iFruit address", gallery = "Gallery", camera = "Camera", backToLogin = "Back to CrewLink login",
                 authErrors = {
-                    no_ifruit_account = "Sign in to your iFruit account in Settings first.", invalid_username = "Use 3-20 letters, numbers, dots, or underscores.",
+                    no_ifruit_account = "Sign in to your Sky Cloud account in Settings first.", invalid_username = "Use 3-20 letters, numbers, dots, or underscores.",
                     profile_not_found = "No CrewLink profile exists for this iFruit email.", profile_exists = "This iFruit email already has a CrewLink profile.",
                     username_taken = "That CrewLink username is already taken.", invalid_profile_image = "Choose a valid photo from this phone.",
                     rate_limited = "Too many attempts. Try again shortly.", request_failed = "CrewLink could not complete the request.",
@@ -304,14 +304,14 @@ Locales["en"] = {
                 ["delete-groupDone"] = "Crew deleted.", ["leave-groupDone"] = "You left the crew.", ["remove-memberDone"] = "Member removed.", ["transfer-ownerDone"] = "Ownership transferred.",
                 notifications = { invite = "{actor} invited you to {group}.", member_joined = "{actor} joined {group}.", ping = "{actor} shared '{ping}' with {group}.", role = "Your CrewLink role changed in {group}.", removed = "You were removed from {group}.", default = "Your CrewLink group has an update." },
                 errors = {
-                    not_authenticated = "Sign in to your iFruit Account first.", profile_required = "Create your CrewLink profile first.", invalid_username = "Use 3-20 letters, numbers, dots, or underscores.", invalid_profile = "Check your profile details.", invalid_profile_image = "Choose a valid photo from this phone.", username_taken = "That CrewLink username is already taken.",
+                    not_authenticated = "Sign in to your Sky Cloud account first.", profile_required = "Create your CrewLink profile first.", invalid_username = "Use 3-20 letters, numbers, dots, or underscores.", invalid_profile = "Check your profile details.", invalid_profile_image = "Choose a valid photo from this phone.", username_taken = "That CrewLink username is already taken.",
                     invalid_group = "Choose a valid group name and signal colour.", group_limit = "You have reached your group limit.", member_limit = "This group has reached its member limit.", group_not_found = "This group is no longer available.", invalid_code = "That invitation code is invalid.", already_member = "You are already a member of this group.", forbidden = "Your current role cannot perform this action.",
                     player_not_nearby = "That player is no longer nearby.", player_unavailable = "That player cannot receive a CrewLink invitation.", invalid_invitation = "This invitation is invalid.", invitation_expired = "This invitation has expired.", invalid_role = "That role cannot be assigned.", owner_must_transfer = "Transfer ownership before leaving this group.",
                     invalid_ping = "Choose a valid ping type, label, and position.", ping_limit = "This crew already has too many active pings.", ping_not_found = "That ping is no longer active.", rate_limited = "Too many CrewLink actions. Try again shortly.", request_failed = "CrewLink is temporarily unavailable.",
                 },
             },
             flare = {
-                name = "Flare", signInTitle = "Sign in to Flare", signInBody = "Flare profiles and matches are linked to your private iFruit account.",
+                name = "Flare", signInTitle = "Sign in to Flare", signInBody = "Flare profiles and matches are linked to your private Sky Cloud account.",
                 createProfile = "Create your profile", welcome = "Find your spark", welcomeBody = "Build a profile and meet people across Los Santos.",
                 photo = "Profile photo", profilePhotos = "Profile photos", profilePhotosBody = "Choose up to six photos from Gallery. Your first photo is shown first.", addPhotos = "Add photos", choosePhotos = "Choose from Gallery", primaryPhoto = "Main", removePhoto = "Remove photo {number}",
                 yourName = "Your name", namePlaceholder = "What should people call you?", age = "Age", bio = "About you", bioPlaceholder = "A short line that starts a conversation...",
@@ -349,7 +349,7 @@ Locales["en"] = {
                 createAccount = "Create Profile", logout = "Sign Out", signingOut = "Signing Out...",
                 loginBody = "Sign in to continue with your photos, stories, follows, and saved posts.",
                 registerBody = "Create a private Picstagram login for your photo profile.",
-                registrationHint = "An iFruit account is required once to create and own a Picstagram profile.",
+                registrationHint = "A Sky Cloud account is required once to create and own a Picstagram profile.",
                 displayName = "Name", username = "Username", password = "Password",
                 confirmPassword = "Confirm password", passwordsMismatch = "The passwords do not match.",
                 displayNamePlaceholder = "Your name", usernamePlaceholder = "username",
@@ -399,7 +399,7 @@ Locales["en"] = {
                     invalid_handle = "Use 3–24 letters, numbers, dots, or underscores.",
                     invalid_display_name = "Enter a display name.", invalid_password = "Password must be 8–72 characters.",
                     invalid_credentials = "Username or password is incorrect.",
-                    already_registered = "This iFruit account already owns a Picstagram profile.",
+                    already_registered = "This Sky Cloud account already owns a Picstagram profile.",
                     handle_taken = "This username is already taken.", post_not_found = "This post is unavailable.",
                     story_not_found = "This story is unavailable.", profile_not_found = "This profile is unavailable.",
                     request_not_found = "This follow request is no longer open.", profile_unavailable = "This profile is unavailable.",
@@ -407,7 +407,7 @@ Locales["en"] = {
                     invalid_report = "Choose a valid report reason.", invalid_search = "Enter a valid search.",
                     invalid_cursor = "The feed changed. Refresh and try again.", invalid_status = "This action is not available.",
                     not_authorized = "You are not allowed to do that.", report_not_found = "This report is no longer open.",
-                    rate_limited = "Too many actions. Try again shortly.", not_authenticated = "Sign in to iFruit first.",
+                    rate_limited = "Too many actions. Try again shortly.", not_authenticated = "Sign in to Sky Cloud first.",
                     picstagram_not_authenticated = "Sign in to Picstagram first.", request_failed = "The request failed.",
                     default = "Picstagram could not complete the request."
                 },
@@ -422,15 +422,15 @@ Locales["en"] = {
                 email = "iFruit address", emailPlaceholder = "yourname", password = "Password", passwordPlaceholder = "6–64 characters",
                 confirmPassword = "Confirm password", confirmPasswordPlaceholder = "Enter it again", showPassword = "Show password", hidePassword = "Hide password",
                 loginAction = "Continue to Feather", registerAction = "Create profile", noAccount = "New to Feather?", haveAccount = "Already registered?",
-                registerNow = "Create a profile", loginNow = "Log in", authTrust = "This Feather session is separate from your other apps and linked to your iFruit email.",
-                profileStep = "Step 2 of 2", accountConnected = "iFruit account connected",
+                registerNow = "Create a profile", loginNow = "Log in", authTrust = "Your Feather profile is linked to your Sky Cloud account through your iFruit email.",
+                profileStep = "Step 2 of 2", accountConnected = "Sky Cloud account connected",
                 authErrors = {
-                    no_ifruit_account = "Sign in to your iFruit account in Settings first.", invalid_handle = "Use 3-30 letters, numbers or underscores.", invalid_username = "That username does not match your Feather profile.",
+                    no_ifruit_account = "Sign in to your Sky Cloud account in Settings first.", invalid_handle = "Use 3-30 letters, numbers or underscores.", invalid_username = "That username does not match your Feather profile.",
                     profile_not_found = "No Feather profile exists for this iFruit email.", already_registered = "This iFruit email already has a Feather profile.",
                     handle_taken = "That Feather username is already taken.", invalid_media = "Choose a valid photo from this phone.",
                     rate_limited = "Too many attempts. Try again in a minute.", default = "Feather could not complete the request. Please try again.",
                 },
-                welcome = "Find your voice", welcomeBody = "Join the live conversation in Los Santos. Your Feather profile stays linked to your iFruit account.",
+                welcome = "Find your voice", welcomeBody = "Join the live conversation in Los Santos. Your Feather profile stays linked to your Sky Cloud account.",
                 createProfile = "Create Feather profile", profileDetailsHint = "Choose how people will recognize you.", displayName = "Display name", displayNamePlaceholder = "Your name", handle = "Username", handlePlaceholder = "your_username", handleHint = "3-30 letters, numbers or underscores",
                 bio = "Bio", bioPlaceholder = "What should people know about you?", start = "Join Feather", chooseAvatar = "Choose profile photo", changeAvatar = "Change photo",
                 newPost = "New feather", reply = "Reply", replyingTo = "Replying to @{handle}", quote = "Quote", post = "Post", posting = "Posting...",
@@ -446,7 +446,7 @@ Locales["en"] = {
                 reasons = { spam = "Spam", harassment = "Harassment", dangerous = "Dangerous content", illegal = "Illegal content", other = "Other" },
                 noActivity = "No activity yet", activityBody = "Likes, replies and new followers will appear here.",
                 activityKinds = { like = "liked your feather", reply = "replied to your feather", follow = "followed you", quote = "quoted your feather" },
-                errors = { accountRequired = "Sign in to iFruit in Settings first.", invalidHandle = "Use 3–30 letters, numbers or underscores.", handleTaken = "That handle is already taken.", invalidPost = "Write something or attach a photo.", generic = "Something went wrong. Please try again." },
+                errors = { accountRequired = "Sign in to Sky Cloud in Settings first.", invalidHandle = "Use 3–30 letters, numbers or underscores.", handleTaken = "That handle is already taken.", invalidPost = "Write something or attach a photo.", generic = "Something went wrong. Please try again." },
                 notifications = { default = "You have new activity.", like = "{actor} liked your feather.", reply = "{actor} replied to your feather.", follow = "{actor} followed you.", quote = "{actor} quoted your feather." },
             },
             fliptok = {
@@ -470,17 +470,17 @@ Locales["en"] = {
                 loginBody = "Sign in to continue with your videos, follows, and saved posts.", registerBody = "Create a private FlipTok login for this profile.",
                 password = "Password", confirmPassword = "Confirm password", passwordsMismatch = "The passwords do not match.",
                 displayNamePlaceholder = "Your name", usernamePlaceholder = "username", passwordPlaceholder = "At least 8 characters", confirmPasswordPlaceholder = "Enter password again",
-                registrationHint = "An iFruit account is required once to create and own a FlipTok profile.",
+                registrationHint = "A Sky Cloud account is required once to create and own a FlipTok profile.",
                 accountDetails = "Account details", profileDetails = "Profile details", account = "Account",
                 signOutTitle = "Sign out of FlipTok?", signOutBody = "Your profile and videos stay online. This phone will return to the FlipTok sign-in screen.", signingOut = "Signing Out...",
                 accountTypes = { person = "Person", business = "Business", organization = "Organization", media = "Media", event = "Event" },
                 activityKinds = { like = "liked your video", comment = "commented on your video", follow = "started following you", verified = "verification changed" },
                 notifications = { like = "{actor} liked your video.", comment = "{actor} commented on your video.", follow = "{actor} started following you.", verified = "Your FlipTok account is now verified.", default = "You have new FlipTok activity." },
-                errors = { invalid_video = "Check the video details.", invalid_media = "Choose a video from this phone.", invalid_comment = "Enter a valid comment.", comments_disabled = "Comments are disabled.", invalid_profile = "Check your profile details.", invalid_handle = "Use 3–24 letters, numbers, dots, or underscores.", invalid_display_name = "Enter a display name.", invalid_password = "Password must be 8–72 characters.", invalid_credentials = "Username or password is incorrect.", already_registered = "This iFruit account already owns a registered FlipTok profile.", handle_taken = "This username is already taken.", video_not_found = "This video is unavailable.", blocked = "This account is blocked.", not_authorized = "You do not have moderation access.", report_not_found = "This report is no longer open.", rate_limited = "Too many actions. Try again shortly.", not_authenticated = "Sign in to iFruit first.", default = "FlipTok could not complete the request." },
+                errors = { invalid_video = "Check the video details.", invalid_media = "Choose a video from this phone.", invalid_comment = "Enter a valid comment.", comments_disabled = "Comments are disabled.", invalid_profile = "Check your profile details.", invalid_handle = "Use 3–24 letters, numbers, dots, or underscores.", invalid_display_name = "Enter a display name.", invalid_password = "Password must be 8–72 characters.", invalid_credentials = "Username or password is incorrect.", already_registered = "This Sky Cloud account already owns a registered FlipTok profile.", handle_taken = "This username is already taken.", video_not_found = "This video is unavailable.", blocked = "This account is blocked.", not_authorized = "You do not have moderation access.", report_not_found = "This report is no longer open.", rate_limited = "Too many actions. Try again shortly.", not_authenticated = "Sign in to Sky Cloud first.", default = "FlipTok could not complete the request." },
             },
             darkchat = {
                 name = "DarkChat", newMessage = "New DarkChat message from {sender}", privateNotification = "New DarkChat message",
-                signInBody = "DarkChat identities are linked to your private iFruit account.", signInHint = "Sign in through Settings to continue.",
+                signInBody = "DarkChat identities are linked to your private Sky Cloud account.", signInHint = "Sign in through Settings to continue.",
                 security = "Security", privateNetwork = "Private invitation-only network", noResults = "No Results", noResultsBody = "Try another alias or Dark-ID.",
                 noChats = "No Private Chats", noChatsBody = "Connect with a Dark-ID or invitation code. There is no public search.", newChat = "New Chat",
                 connectPrivately = "Connect privately", newChatBody = "Enter an exact Dark-ID or invitation code. Unknown identities require confirmation.", darkIdOrInvite = "Dark-ID or invitation code", continue = "Continue", contacts = "DarkChat Contacts", shareIdentity = "Tap to share your private identity",
@@ -496,7 +496,7 @@ Locales["en"] = {
                 reportUser = "Report User", reportSpam = "Spam", reportHarassment = "Harassment", reportThreats = "Threats", reportIllegal = "Illegal content", reportOther = "Other", reportDetails = "Optional details", submitReport = "Submit Report", reported = "Report submitted",
                 microphoneUnavailable = "The microphone is unavailable.", recordingTooLarge = "The voice message is too large.",
                 errors = {
-                    not_authenticated = "Sign in to your iFruit account first.", invalid_dark_id = "Enter a valid Dark-ID or invitation code.", profile_not_found = "This private identity was not found.", self_chat = "You cannot message your own identity.", conversation_not_found = "This conversation is unavailable.", blocked = "Messages are blocked in this conversation.", invalid_message = "Enter a valid message.", invalid_gif = "This GIF is invalid.", invalid_voice = "This voice message is invalid.", invalid_attachment = "This photo or video is unavailable.", invalid_profile = "Check your alias and privacy settings.", rate_limited = "Too many requests. Try again shortly.", gif_provider_unconfigured = "GIF search is not configured.", gif_provider_unauthorized = "The GIF provider key is invalid.", gif_provider_rate_limited = "GIF search is busy. Try again shortly.", gif_provider_failed = "GIFs are temporarily unavailable.", default = "DarkChat could not complete the request.",
+                    not_authenticated = "Sign in to your Sky Cloud account first.", invalid_dark_id = "Enter a valid Dark-ID or invitation code.", profile_not_found = "This private identity was not found.", self_chat = "You cannot message your own identity.", conversation_not_found = "This conversation is unavailable.", blocked = "Messages are blocked in this conversation.", invalid_message = "Enter a valid message.", invalid_gif = "This GIF is invalid.", invalid_voice = "This voice message is invalid.", invalid_attachment = "This photo or video is unavailable.", invalid_profile = "Check your alias and privacy settings.", rate_limited = "Too many requests. Try again shortly.", gif_provider_unconfigured = "GIF search is not configured.", gif_provider_unauthorized = "The GIF provider key is invalid.", gif_provider_rate_limited = "GIF search is busy. Try again shortly.", gif_provider_failed = "GIFs are temporarily unavailable.", default = "DarkChat could not complete the request.",
                 },
             },
             messages = {
@@ -1110,14 +1110,14 @@ Locales["en"] = {
                 },
             },
              house = {
-                name = "House", subtitle = "Homes and access", myHomes = "My Homes",
+                name = "House", subtitle = "Manage homes and access", myHomes = "Your Homes",
                 properties = "Properties", owned = "Owned", shared = "Shared with you",
-                locked = "Locked", unlocked = "Unlocked", owner = "Owner", keyholder = "Key holder",
+                locked = "Locked", unlocked = "Unlocked", lockDoor = "Lock Door", unlockDoor = "Unlock Door", owner = "Owner", keyholder = "Key holder",
                 openDetails = "Open property details", tryAgain = "Try Again", refresh = "Refresh",
                 offline = "House is offline", offlineBody = "Start a supported housing resource or review Config.Housing.",
-                unavailable = "Homes unavailable", empty = "No Homes", emptyBody = "Owned homes and homes shared with you will appear here.",
+                unavailable = "Homes unavailable", empty = "No homes yet", emptyBody = "Homes you own or can access will appear here automatically.",
                 provider = "Housing data · {system}", access = "Access", status = "Status",
-                actions = "Controls", setWaypoint = "Directions", viewCamera = "View Camera",
+                actions = "Quick Actions", setWaypoint = "Get Directions", viewCamera = "View Camera",
                 garage = "Garage", garageEnabled = "Enabled", garageDisabled = "Unavailable",
                 storedVehicles = "{count} stored", camera = "Camera", cameraAvailable = "Ready", cameraUnavailable = "Unavailable",
                 keys = "Keys", manageKeys = "Manage Keys", addKey = "Add Key", revokeKey = "Revoke",
@@ -1250,7 +1250,7 @@ Locales["en"] = {
                 },
             },
             calendar = {
-                name = "Calendar", today = "Today", calendars = "Calendars", calendar = "Calendar", calendarName = "iFruit",
+                name = "Calendar", today = "Today", calendars = "Calendars", calendar = "Calendar", calendarName = "Sky Cloud",
                 searchPlaceholder = "Search events", previousMonth = "Previous month", nextMonth = "Next month",
                 eyebrow = "Your time. Clearly planned.", schedule = "Schedule", event = "Event", appointment = "Appointment",
                 newEvent = "New event", editEvent = "Edit event", deleteEvent = "Delete event", details = "Event details",
@@ -1258,8 +1258,8 @@ Locales["en"] = {
                 reminder = "Reminder", reminderNotification = "Upcoming: {title}", note = "Note",
                 notePlaceholder = "Add details, an address or anything to remember...", noEvents = "Nothing planned",
                 noEventsBody = "This day is still free. Add an event whenever you are ready.",
-                signInTitle = "Your iFruit calendar",
-                signInBody = "Sign in to iFruit in Settings to sync appointments and receive reminders.",
+                signInTitle = "Your Sky Cloud calendar",
+                signInBody = "Sign in to Sky Cloud in Settings to sync appointments and receive reminders.",
                 views = { compact = "Compact", stacked = "Stacked", details = "Details", list = "List" },
                 reminders = {
                     none = "No reminder", atStart = "At start time", tenMinutes = "10 minutes before",
@@ -1270,7 +1270,7 @@ Locales["en"] = {
                     invalid_range = "This calendar period is invalid.",
                     conflict = "This event changed on another phone. Open it again.",
                     rate_limited = "Too many changes. Try again shortly.",
-                    not_authenticated = "Sign in to your iFruit account first.",
+                    not_authenticated = "Sign in to your Sky Cloud account first.",
                     request_failed = "Calendar is temporarily unavailable.", default = "The calendar request failed.",
                 },
             },
@@ -1298,12 +1298,14 @@ Locales["en"] = {
                 name = "Mail", login = "Sign In", register = "Create Account", registerLink = "Register", loginTitle = "iFruit Mail",
                 loginBody = "Sign in to use your shared iFruit mailbox.", registerBody = "Choose your new @ifruit.com address.",
                 localPart = "Email address", email = "Email", password = "Password", confirmPassword = "Confirm password",
-                accountEyebrow = "Your iFruit account", emailPlaceholder = "name@ifruit.com", passwordPlaceholder = "Enter password",
+                accountEyebrow = "Your Sky Cloud account", emailPlaceholder = "name@ifruit.com", passwordPlaceholder = "Enter password",
                 passwordWarning = "Use an in-character password. Do not reuse a real-world password.",
                 mailboxes = "Mailboxes", inbox = "Inbox", sent = "Sent", drafts = "Drafts", trash = "Trash",
                 compose = "New Message", recipients = "To", recipientHint = "Separate up to 10 addresses with commas.",
                 recipientPlaceholder = "name@ifruit.com", subject = "Subject", subjectPlaceholder = "What's this about?",
                 body = "Message", messagePlaceholder = "Write a message...", search = "Search mail", messages = "messages",
+                select = "Select", selectedCount = "{count} Selected", deleteSelected = "Delete Selected",
+                selectionLimit = "You can select up to {count} messages at once.",
                 noMessageContent = "No message content", noMail = "No Mail",
                 noMailBody = "Messages in this mailbox will appear here.", noResults = "No Results",
                 noResultsBody = "Try a different search.", untitled = "(no subject)", loadMore = "Load More",
@@ -1349,12 +1351,12 @@ Locales["en"] = {
                 noListingsBody = "Try another search or category.", noDistrict = "No district",
                 free = "Free", negotiablePrice = "${price} negotiable", money = "${price}",
                 hoursAgo = "{count}h ago", daysAgo = "{count}d ago", photos = "photos", activeListings = "active listings",
-                signInTitle = "Sign in to iFruit", signInBody = "Log in to your CityMarkt profile to sell, save or message.",
+                signInTitle = "Sign in to Sky Cloud", signInBody = "Log in to your CityMarkt profile to sell, save or message.",
                 authEyebrow = "CityMarkt account", authTitle = "Welcome to CityMarkt",
                 authBody = "Your iFruit email is linked automatically. Use your CityMarkt username to continue.",
                 login = "Login", register = "Register", authUsername = "Username",
                 authErrors = {
-                    no_ifruit_account = "Connect an iFruit account in Settings first.",
+                    no_ifruit_account = "Connect a Sky Cloud account in Settings first.",
                     invalid_username = "Enter the username of your CityMarkt profile.",
                     profile_not_found = "No CityMarkt profile exists for this iFruit email.",
                     profile_exists = "A CityMarkt profile already exists. Use Login instead.",
@@ -1367,7 +1369,7 @@ Locales["en"] = {
                 cancel = "Cancel", profileSaved = "Your profile was saved.", chooseGallery = "Gallery",
                 takePhoto = "Camera", removeProfilePhoto = "Remove photo",
                 phone = "Phone", contactSeller = "Contact seller", messagePlaceholder = "Hi, is this still available?",
-                signInToMessage = "Sign in to your iFruit account to send a message.",
+                signInToMessage = "Sign in to your Sky Cloud account to send a message.",
                 edit = "Edit", makeActive = "Make active", markSold = "Mark sold", remove = "Remove",
                 createListing = "Create listing", editListing = "Edit listing", save = "Save", step = "Step {current} of {total}", next = "Next", previous = "Back", publish = "Publish",
                 addPhotos = "Add photos", addPhotosBody = "Choose up to six photos. The first becomes the cover.",
@@ -1397,7 +1399,7 @@ Locales["en"] = {
                     offer_not_allowed = "You cannot make an offer right now.", offer_not_actionable = "This offer can no longer be changed.",
                     offer_conflict = "The offer changed. Please try again.",
                     blocked = "Messages are blocked between these accounts.", already_reported = "You already reported this listing.",
-                    rate_limited = "Too many requests. Try again shortly.", not_authenticated = "Sign in to your iFruit account first.",
+                    rate_limited = "Too many requests. Try again shortly.", not_authenticated = "Sign in to your Sky Cloud account first.",
                     invalid_profile = "Enter a display name between 2 and 40 characters.",
                     invalid_profile_image = "Choose a valid photo from this phone.",
                     profile_required = "Create your CityMarkt profile first.",
@@ -1413,11 +1415,11 @@ Locales["en"] = {
                 categories = { recommendation = "Recommended", wanted = "Wanted", service = "Service", event = "Event", place = "Place", community = "Community", citymarkt = "CityMarkt" },
                 discover = "Discover", create = "Post", profile = "Profile", post = "Post", posts = "posts",
                 noPosts = "Nothing here yet", noPostsBody = "Be the first to share something with the city.", noPhoto = "No photo attached",
-                signInTitle = "Your Local Pages profile", signInBody = "Sign in to iFruit in Settings to publish and save posts.",
+                signInTitle = "Your Local Pages profile", signInBody = "Sign in to Sky Cloud in Settings to publish and save posts.",
                 authEyebrow = "Local Pages account", authWelcome = "Welcome to Local Pages",
                 authBody = "Your iFruit email is linked automatically. Use your Local Pages username to continue.", login = "Sign in", register = "Register",
-                loginTitle = "Continue with iFruit", loginBody = "Your posts, saved items and profile stay linked to your account.",
-                registerTitle = "Create an iFruit account", registerBody = "Choose your new iFruit address. Your Local Pages profile comes next.",
+                loginTitle = "Continue with Sky Cloud", loginBody = "Your posts, saved items and profile stay linked to your account.",
+                registerTitle = "Create your Local Pages profile", registerBody = "Choose a username and optional profile photo. Your iFruit email stays linked.",
                 authEmail = "iFruit address", authEmailPlaceholder = "your.name", authPassword = "Password",
                 authPasswordPlaceholder = "At least 6 characters", authConfirmPassword = "Confirm password",
                 authConfirmPlaceholder = "Enter the password again", showPassword = "Show password", hidePassword = "Hide password",
@@ -1436,13 +1438,13 @@ Locales["en"] = {
                 cityMarktAccountMissing = "Local Pages profile required", cityMarktAccountHint = "Create a Local Pages profile before sharing",
                 cityMarktComposeTitle = "Share CityMarkt listing", cityMarktComposeNavTitle = "Share listing", cityMarktComposeHint = "Review the listing and publish it when you are ready.", cityMarktPhotosHint = "The CityMarkt listing photos will be included.",
                 authErrors = {
-                    no_ifruit_account = "Sign in to your iFruit account in Settings first.", invalid_username = "Use 3-24 lowercase letters, numbers, dots or underscores.",
+                    no_ifruit_account = "Sign in to your Sky Cloud account in Settings first.", invalid_username = "Use 3-24 lowercase letters, numbers, dots or underscores.",
                     profile_not_found = "No Local Pages profile exists for this iFruit email.", profile_exists = "This iFruit email already has a Local Pages profile.",
                     invalid_profile = "Check your Local Pages username.", invalid_profile_image = "Choose a valid photo from this phone.",
                     profile_handle_taken = "This Local Pages username is already taken.", rate_limited = "Too many attempts. Try again shortly.",
                     default = "Local Pages could not complete the request.",
                 },
-                errors = { profile_required = "Create your Local Pages profile first.", invalid_profile = "Check your username and bio.", invalid_profile_image = "Choose a valid photo from this phone.", profile_handle_taken = "This username is already taken.", invalid_post = "Add a title and a little more detail.", invalid_images = "Choose valid photos from this phone.", invalid_request = "This action is not valid.", post_not_found = "This post is no longer available.", citymarkt_not_found = "This CityMarkt listing is unavailable.", citymarkt_daily_limit = "You already shared a CityMarkt listing today.", citymarkt_already_shared = "This listing was already shared.", not_authenticated = "Sign in to iFruit first.", rate_limited = "Too many requests. Try again shortly.", request_failed = "The post could not be saved.", default = "Local Pages is temporarily unavailable." },
+                errors = { profile_required = "Create your Local Pages profile first.", invalid_profile = "Check your username and bio.", invalid_profile_image = "Choose a valid photo from this phone.", profile_handle_taken = "This username is already taken.", invalid_post = "Add a title and a little more detail.", invalid_images = "Choose valid photos from this phone.", invalid_request = "This action is not valid.", post_not_found = "This post is no longer available.", citymarkt_not_found = "This CityMarkt listing is unavailable.", citymarkt_daily_limit = "You already shared a CityMarkt listing today.", citymarkt_already_shared = "This listing was already shared.", not_authenticated = "Sign in to Sky Cloud first.", rate_limited = "Too many requests. Try again shortly.", request_failed = "The post could not be saved.", default = "Local Pages is temporarily unavailable." },
             },
             map = {
                 name = "Map", controls = "Map controls", currentLocation = "Current Location",
@@ -1592,9 +1594,9 @@ Locales["en"] = {
             },
             settings = {
                 name = "Settings", searchPlaceholder = "Search", airplaneMode = "Airplane Mode", streamerMode = "Streamer Mode",
-                wallpaper = "Wallpaper", on = "On", off = "Off", accountName = "iFruit Account",
+                wallpaper = "Wallpaper", on = "On", off = "Off", accountName = "Sky Cloud",
                 accountDetail = "Important Data & Cloud", accountLocalDetail = "Not signed in",
-                accountCloudDetail = "Important data syncs through iFruit Cloud", accountLoginBody = "Sign in to keep your important data safe. Without an iFruit Account, it will be lost with the phone.",
+                accountCloudDetail = "Important data syncs through Sky Cloud", accountLoginBody = "Sign in to keep your important data safe. Without a Sky Cloud account, it will be lost with the phone.",
                 accountInformation = "Account Information", accountStatus = "Account Status", accountStatusValue = "Active",
                 accountStorage = "Cloud Storage", accountStorageValue = "On Device", accountPurchases = "Media & Purchases",
                 accountPurchasesValue = "Available", notifications = "Notifications", sounds = "Sounds & Haptics",
@@ -1616,11 +1618,11 @@ Locales["en"] = {
                 imei = "IMEI", linkedDevices = "Linked Devices", thisDevice = "This Phone", removeDevice = "Remove Device",
                 simCard = "SIM Card", simNumber = "Phone Number", simType = "SIM Type", registeredSim = "Registered",
                 anonymousSim = "Anonymous", noSim = "No SIM", ejectSim = "Eject SIM", ejectSimBody = "Return this SIM card to your inventory?",
-                removeDeviceBody = "Enter your iFruit password to remove this device from the account.", signOut = "Sign Out",
+                removeDeviceBody = "Enter your Sky Cloud password to remove this device from the account.", signOut = "Sign Out",
                 factoryReset = "Erase All Content and Settings", factoryResetBody = "This removes the account and all local data from this phone. Cloud data and the IMEI remain.",
                 factoryResetProgress = "Erasing iFruit Phone", factoryResetWarning = "Do not turn off this phone. This takes 60 seconds.",
                 passcode = {
-                    description = "A passcode protects the contents of this phone. It stays with the device when the SIM or iFruit account changes.",
+                    description = "A passcode protects the contents of this phone. It stays with the device when the SIM or Sky Cloud account changes.",
                     status = "Passcode", codeLength = "Code Length", sixDigit = "6-Digit Code", fourDigit = "4-Digit Code",
                     turnOn = "Turn Passcode On", turnOff = "Turn Passcode Off", change = "Change Passcode",
                     enterNew = "Enter New Passcode", confirmNew = "Verify New Passcode", enterCurrent = "Enter Current Passcode",
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index d479688..723c7ae 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -12,7 +12,7 @@ end
 if account_tables.sky_phone_mail_accounts and not account_tables.sky_phone_accounts then
     Bridge.Database.Query("RENAME TABLE `sky_phone_mail_accounts` TO `sky_phone_accounts`", {})
 elseif account_tables.sky_phone_mail_accounts and account_tables.sky_phone_accounts then
-    error("[sky_phone] Both legacy and current iFruit account tables exist; refusing an ambiguous migration.")
+    error("[sky_phone] Both legacy and current Sky Cloud account tables exist; refusing an ambiguous migration.")
 end
 
 local schema = {
diff --git a/sky_phone/source/server/testdata.lua b/sky_phone/source/server/testdata.lua
index 49864b7..990d9e2 100644
--- a/sky_phone/source/server/testdata.lua
+++ b/sky_phone/source/server/testdata.lua
@@ -869,7 +869,7 @@ local function seed_for_source(source)
         )
         account = rows[1]
         if not account then
-            error("[sky_phone] Test data found a device with a missing iFruit account.")
+            error("[sky_phone] Test data found a device with a missing Sky Cloud account.")
         end
         account.id = tonumber(account.id)
     else

From ac5033811b1313038c368ff4f41c3fcc9f1e51a5 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:14 +0200
Subject: [PATCH 50/63] ENH - migrate Settings to Sky UI

---
 .../views/apps/SettingsApp.contract.test.ts   |   21 +
 frontend/src/views/apps/SettingsApp.vue       | 1736 ++++++++---------
 2 files changed, 847 insertions(+), 910 deletions(-)
 create mode 100644 frontend/src/views/apps/SettingsApp.contract.test.ts

diff --git a/frontend/src/views/apps/SettingsApp.contract.test.ts b/frontend/src/views/apps/SettingsApp.contract.test.ts
new file mode 100644
index 0000000..669692b
--- /dev/null
+++ b/frontend/src/views/apps/SettingsApp.contract.test.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(
+  new URL('./SettingsApp.vue', import.meta.url),
+  'utf8',
+)
+
+describe('SettingsApp Sky UI contract', () => {
+  it('uses the first-party settings surface without direct Konsta markup', () => {
+    expect(source).not.toContain("from 'konsta/vue'")
+    expect(source).not.toMatch(/<\/?k-[a-z]/)
+    expect(source).toContain('<SkyAppPage')
+    expect(source).toContain('<SkyNavbar')
+    expect(source).toContain(":variant=\"activeView === 'root' ? 'large' : 'compact'\"")
+    expect(source).toContain('<SkyScrollArea')
+    expect(source).toContain('<SkySettingsGroup')
+    expect(source).toContain('<SkySettingsRow')
+  })
+})
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index beb175c..fbb387b 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -1,27 +1,4 @@
 <script setup lang="ts">
-import {
-  kBlock,
-  kBlockTitle,
-  kButton,
-  kDialog,
-  kDialogButton,
-  kLink,
-  kList,
-  kListButton,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPopover,
-  kPreloader,
-  kRange,
-  kSearchbar,
-  kSegmented,
-  kSegmentedButton,
-  kToast,
-  kToggle,
-} from 'konsta/vue'
 import {
   BellRing,
   Bluetooth,
@@ -68,6 +45,27 @@ import {
 } from '@/utils/mail'
 import { nuiCall } from '@/utils/nui'
 import { formatPhoneNumber } from '@/utils/phone'
+import {
+  SkyAppPage,
+  SkyBlock,
+  SkyButton,
+  SkyDialog,
+  SkyDialogButton,
+  SkyField,
+  SkyLink,
+  SkyNavbar,
+  SkyProgress,
+  SkyScrollArea,
+  SkySearchbar,
+  SkySegmented,
+  SkySegmentedButton,
+  SkySettingsGroup,
+  SkySettingsIcon,
+  SkySettingsRangeRow,
+  SkySettingsRow,
+  SkySpinner,
+  SkyToast,
+} from '@/ui'
 import {
   APPEARANCE_MODE_IDS,
   GRAPHICS_MODE_IDS,
@@ -115,21 +113,6 @@ type PasscodeFlow =
   | null
 
 const FACTORY_RESET_DURATION_MS = 60_000
-const FACTORY_RESET_CIRCUMFERENCE = 2 * Math.PI * 48
-const FRAME_PICKER_WIDTH = 240
-const FRAME_PICKER_COLUMN_COUNT = 3
-const FRAME_PICKER_SWATCH_SIZE = 40
-const FRAME_PICKER_GRID_GAP = 20
-const FRAME_PICKER_PADDING = 20
-const FRAME_PICKER_ROW_COUNT = Math.ceil(
-  PHONE_FRAME_IDS.length / FRAME_PICKER_COLUMN_COUNT,
-)
-const FRAME_PICKER_HEIGHT =
-  FRAME_PICKER_PADDING * 2 +
-  FRAME_PICKER_ROW_COUNT * FRAME_PICKER_SWATCH_SIZE +
-  Math.max(0, FRAME_PICKER_ROW_COUNT - 1) * FRAME_PICKER_GRID_GAP
-const FRAME_PICKER_INSET = 8
-const FRAME_PICKER_GAP = 8
 
 const phone = usePhoneStore()
 const account = useAccountStore()
@@ -138,14 +121,7 @@ const query = ref('')
 const activeView = ref<SettingsView>('root')
 const selectedNotificationAppId = ref<LaunchablePhoneAppId>('calculator')
 const settingsPage = ref<ComponentPublicInstance | null>(null)
-const framePickerButton = ref<ComponentPublicInstance | null>(null)
 const framePickerOpened = ref(false)
-const framePickerTarget = computed(
-  () => framePickerButton.value?.$el as HTMLElement | undefined,
-)
-const framePickerPortalTarget = computed(() =>
-  framePickerTarget.value?.closest<HTMLElement>('.phone-screen'),
-)
 const accountMode = ref<'login' | 'register'>('login')
 const accountEmail = ref('')
 const accountPassword = ref('')
@@ -166,9 +142,6 @@ const resetOpened = ref(false)
 const simEjectOpened = ref(false)
 const factoryResetting = ref(false)
 const factoryResetProgress = ref(0)
-const factoryResetDashOffset = computed(
-  () => FACTORY_RESET_CIRCUMFERENCE * (1 - factoryResetProgress.value / 100),
-)
 const selectedFrameColor = computed(
   () => PHONE_FRAME_COLORS[phone.preferences.settings.frame],
 )
@@ -318,10 +291,6 @@ function matchesSearch(key: string): boolean {
   )
 }
 
-function updateSearch(event: Event): void {
-  query.value = (event.target as HTMLInputElement).value
-}
-
 function openView(view: SubmenuView): void {
   if (view === 'security') {
     passcodeLength.value = phone.security.length ?? 6
@@ -350,8 +319,8 @@ function scrollPageToTop(): void {
   })
 }
 
-function toggleRootSetting(key: RootToggleKey): void {
-  phone.setPreference(key, !phone.preferences.settings[key])
+function setRootSetting(key: RootToggleKey, value: boolean): void {
+  phone.setPreference(key, value)
 }
 
 function resetPasscodeInput(): void {
@@ -470,12 +439,9 @@ function updateNumberPreference(
     | 'phoneScale'
     | 'ringtoneVolume'
     | 'screenBrightness',
-  event: Event,
+  value: number,
 ): void {
-  phone.setPreference(
-    key,
-    Number.parseInt((event.target as HTMLInputElement).value, 10),
-  )
+  phone.setPreference(key, value)
 }
 
 function selectAppearanceMode(mode: AppearanceMode): void {
@@ -491,52 +457,6 @@ function selectFrame(frame: PhoneFrameId): void {
   framePickerOpened.value = false
 }
 
-function openFramePicker(): void {
-  const target = framePickerTarget.value
-  const screen = framePickerPortalTarget.value
-  if (!target || !screen) {
-    console.error('Unable to position the Settings frame color picker')
-    return
-  }
-
-  const screenRect = screen.getBoundingClientRect()
-  const targetRect = target.getBoundingClientRect()
-  const screenScale = screenRect.width / screen.offsetWidth
-  const targetLeft = (targetRect.left - screenRect.left) / screenScale
-  const targetTop = (targetRect.top - screenRect.top) / screenScale
-  const targetWidth = targetRect.width / screenScale
-  const targetHeight = targetRect.height / screenScale
-  const desiredLeft = targetLeft + targetWidth / 2 - FRAME_PICKER_WIDTH / 2
-  const aboveTop = targetTop - FRAME_PICKER_HEIGHT - FRAME_PICKER_GAP
-  const desiredTop =
-    aboveTop >= FRAME_PICKER_INSET
-      ? aboveTop
-      : targetTop + targetHeight + FRAME_PICKER_GAP
-
-  screen.style.setProperty(
-    '--settings-frame-picker-left',
-    `${Math.max(
-      FRAME_PICKER_INSET,
-      Math.min(
-        desiredLeft,
-        screen.offsetWidth - FRAME_PICKER_WIDTH - FRAME_PICKER_INSET,
-      ),
-    )}px`,
-  )
-  screen.style.setProperty(
-    '--settings-frame-picker-top',
-    `${Math.max(
-      FRAME_PICKER_INSET,
-      Math.min(
-        desiredTop,
-        screen.offsetHeight - FRAME_PICKER_HEIGHT - FRAME_PICKER_INSET,
-      ),
-    )}px`,
-  )
-
-  framePickerOpened.value = true
-}
-
 function selectRingtone(ringtone: RingtoneId): void {
   phone.setPreference('ringtone', ringtone)
 }
@@ -545,10 +465,6 @@ function selectNotificationSound(sound: NotificationSoundId): void {
   phone.setPreference('notificationSound', sound)
 }
 
-function eventValue(event: Event): string {
-  return (event.target as HTMLInputElement).value
-}
-
 function updateAccountEmail(event: Event): void {
   const input = event.target as HTMLInputElement
   const original = input.value
@@ -674,158 +590,138 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
-    ref="settingsPage"
-    :class="['!pb-[24px]', { '!pt-[44px]': activeView !== 'root' }]"
+  <SkyAppPage
+    class="settings-app"
+    accent="#0a84ff"
+    accent-soft="rgba(10, 132, 255, 0.16)"
+    :dark="phone.isDarkMode"
+    :label="phone.t('Apps.settings.name')"
   >
-    <template v-if="activeView === 'root'">
-      <k-navbar
-        large
-        transparent
-        :title="phone.t('Apps.settings.name')"
-        class="top-0 sticky"
-      >
-        <template #subnavbar>
-          <k-searchbar
-            :value="query"
+    <SkyNavbar
+      :title="
+        activeView === 'root' ? phone.t('Apps.settings.name') : activeTitle
+      "
+      :variant="activeView === 'root' ? 'large' : 'compact'"
+      :show-back="activeView !== 'root'"
+      back-appearance="surface"
+      :back-label="phone.t('Apps.settings.back')"
+      @back="goBack"
+    >
+      <template #right>
+        <SkyLink
+          v-if="activeView === 'account' && !account.email"
+          @click="accountMode = accountMode === 'login' ? 'register' : 'login'"
+        >
+          {{
+            phone.t(
+              accountMode === 'login'
+                ? 'Apps.mail.registerLink'
+                : 'Apps.mail.login',
+            )
+          }}
+        </SkyLink>
+      </template>
+    </SkyNavbar>
+
+    <SkyScrollArea ref="settingsPage" class="settings-content">
+      <template v-if="activeView === 'root'">
+        <div class="settings-search" role="search">
+          <SkySearchbar
+            v-model="query"
+            :clear-label="phone.t('Common.clear')"
+            :label="phone.t('Apps.settings.searchPlaceholder')"
             :placeholder="phone.t('Apps.settings.searchPlaceholder')"
-            @input="updateSearch"
-            @clear="query = ''"
           />
-        </template>
-      </k-navbar>
+        </div>
 
-      <k-list strong inset>
-        <k-list-item
-          link
-          :title="phone.t('Apps.settings.accountName')"
-          :subtitle="phone.t('Apps.settings.accountDetail')"
-          @click="openView('account')"
-        >
-          <template #media>
-            <UserRound class="w-9 h-9 text-primary" />
-          </template>
-        </k-list-item>
-      </k-list>
-
-      <k-list v-if="visibleToggleRows.length" strong inset>
-        <k-list-item
-          v-for="row in visibleToggleRows"
-          :key="row.key"
-          :title="phone.t(`Apps.settings.${row.key}`)"
-          title-font-size-ios="text-[16px]"
-          title-wrap-class="whitespace-nowrap"
-        >
-          <template #media>
-            <span
-              class="flex h-7 w-7 shrink-0 items-center justify-center rounded-[7px] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_1px_2px_rgba(0,0,0,0.25)]"
-              :style="{ backgroundColor: row.iconColor }"
-            >
-              <component :is="row.icon" :size="17" :stroke-width="2.25" />
-            </span>
-          </template>
-          <template #after>
-            <k-toggle
-              :checked="phone.preferences.settings[row.key]"
-              :aria-label="phone.t(`Apps.settings.toggle.${row.key}`)"
-              @change="toggleRootSetting(row.key)"
-            />
-          </template>
-        </k-list-item>
-      </k-list>
-
-      <k-list v-if="visibleServiceRows.length" strong inset>
-        <k-list-item
-          v-for="row in visibleServiceRows"
-          :key="row.key"
-          link
-          :title="phone.t(`Apps.settings.${row.key}`)"
-          title-font-size-ios="text-[16px]"
-          title-wrap-class="whitespace-nowrap"
-          @click="openView(row.view)"
-        >
-          <template #media>
-            <span
-              class="flex h-7 w-7 shrink-0 items-center justify-center rounded-[7px] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_1px_2px_rgba(0,0,0,0.25)]"
-              :style="{ backgroundColor: row.iconColor }"
-            >
-              <component :is="row.icon" :size="17" :stroke-width="2.25" />
-            </span>
-          </template>
-        </k-list-item>
-      </k-list>
-
-      <k-list v-if="visiblePreferenceRows.length" strong inset>
-        <k-list-item
-          v-for="row in visiblePreferenceRows"
-          :key="row.key"
-          link
-          :title="phone.t(`Apps.settings.${row.key}`)"
-          title-font-size-ios="text-[16px]"
-          title-wrap-class="whitespace-nowrap"
-          @click="openView(row.view)"
-        >
-          <template #media>
-            <span
-              class="flex h-7 w-7 shrink-0 items-center justify-center rounded-[7px] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_1px_2px_rgba(0,0,0,0.25)]"
-              :style="{ backgroundColor: row.iconColor }"
-            >
-              <component :is="row.icon" :size="17" :stroke-width="2.25" />
-            </span>
-          </template>
-          <template v-if="row.key === 'security' || row.key === 'focus'" #after>
-            {{
-              phone.t(
-                (row.key === 'security' && phone.security.enabled) ||
-                  (row.key === 'focus' && phone.preferences.settings.focusMode)
-                  ? 'Apps.settings.on'
-                  : 'Apps.settings.off',
-              )
-            }}
-          </template>
-        </k-list-item>
-      </k-list>
-    </template>
-
-    <template v-else>
-      <k-navbar
-        :title="activeTitle"
-        :class="[
-          'settings-detail-navbar sticky z-20',
-          { 'settings-detail-navbar--dark': phone.isDarkMode },
-        ]"
-      >
-        <template #left>
-          <k-navbar-back-link
-            component="button"
-            :show-text="false"
-            :text="phone.t('Apps.settings.back')"
-            :aria-label="phone.t('Apps.settings.back')"
-            @click="goBack"
-          />
-        </template>
-        <template #right>
-          <k-link
-            v-if="activeView === 'account' && !account.email"
-            component="button"
-            @click="
-              accountMode = accountMode === 'login' ? 'register' : 'login'
-            "
+        <SkySettingsGroup :aria-label="phone.t('Apps.settings.accountName')">
+          <SkySettingsRow
+            kind="navigation"
+            :title="phone.t('Apps.settings.accountName')"
+            :description="phone.t('Apps.settings.accountDetail')"
+            @activate="openView('account')"
           >
-            {{
-              phone.t(
-                accountMode === 'login'
-                  ? 'Apps.mail.registerLink'
-                  : 'Apps.mail.login',
-              )
-            }}
-          </k-link>
-        </template>
-      </k-navbar>
+            <template #leading>
+              <SkySettingsIcon color="#8e8e93">
+                <UserRound aria-hidden="true" />
+              </SkySettingsIcon>
+            </template>
+          </SkySettingsRow>
+        </SkySettingsGroup>
 
-      <template v-if="activeView === 'account'">
+        <SkySettingsGroup
+          v-if="visibleToggleRows.length"
+          :aria-label="phone.t('Apps.settings.name')"
+        >
+          <SkySettingsRow
+            v-for="row in visibleToggleRows"
+            :key="row.key"
+            kind="toggle"
+            :model-value="phone.preferences.settings[row.key]"
+            :title="phone.t('Apps.settings.' + row.key)"
+            @update:model-value="setRootSetting(row.key, $event)"
+          >
+            <template #leading>
+              <SkySettingsIcon :color="row.iconColor">
+                <component :is="row.icon" aria-hidden="true" />
+              </SkySettingsIcon>
+            </template>
+          </SkySettingsRow>
+        </SkySettingsGroup>
+
+        <SkySettingsGroup
+          v-if="visibleServiceRows.length"
+          :aria-label="phone.t('Apps.settings.notifications')"
+        >
+          <SkySettingsRow
+            v-for="row in visibleServiceRows"
+            :key="row.key"
+            kind="navigation"
+            :title="phone.t('Apps.settings.' + row.key)"
+            @activate="openView(row.view)"
+          >
+            <template #leading>
+              <SkySettingsIcon :color="row.iconColor">
+                <component :is="row.icon" aria-hidden="true" />
+              </SkySettingsIcon>
+            </template>
+          </SkySettingsRow>
+        </SkySettingsGroup>
+
+        <SkySettingsGroup
+          v-if="visiblePreferenceRows.length"
+          :aria-label="phone.t('Apps.settings.name')"
+        >
+          <SkySettingsRow
+            v-for="row in visiblePreferenceRows"
+            :key="row.key"
+            kind="navigation"
+            :title="phone.t('Apps.settings.' + row.key)"
+            :value="
+              row.key === 'security' || row.key === 'focus'
+                ? phone.t(
+                    (row.key === 'security' && phone.security.enabled) ||
+                      (row.key === 'focus' &&
+                        phone.preferences.settings.focusMode)
+                      ? 'Apps.settings.on'
+                      : 'Apps.settings.off',
+                  )
+                : undefined
+            "
+            @activate="openView(row.view)"
+          >
+            <template #leading>
+              <SkySettingsIcon :color="row.iconColor">
+                <component :is="row.icon" aria-hidden="true" />
+              </SkySettingsIcon>
+            </template>
+          </SkySettingsRow>
+        </SkySettingsGroup>
+      </template>
+
+      <template v-else-if="activeView === 'account'">
         <template v-if="!account.email">
-          <k-block-title>
+          <SkyBlock class="settings-copy">
             {{
               phone.t(
                 accountMode === 'login'
@@ -833,11 +729,12 @@ onBeforeUnmount(() => {
                   : 'Apps.mail.passwordWarning',
               )
             }}
-          </k-block-title>
-          <k-list>
-            <k-list-input
-              class="relative"
-              :value="accountEmail"
+          </SkyBlock>
+
+          <SkySettingsGroup :aria-label="phone.t('Apps.settings.accountName')">
+            <SkyField
+              id="sky-cloud-email"
+              :model-value="accountEmail"
               :label="
                 phone.t(
                   accountMode === 'login'
@@ -845,59 +742,47 @@ onBeforeUnmount(() => {
                     : 'Apps.mail.localPart',
                 )
               "
-              outline
-              floating-label
-              :input-class="accountMode === 'register' ? 'pr-20' : undefined"
               autocomplete="username"
               autocapitalize="none"
               autocorrect="off"
-              inputmode="email"
+              input-mode="email"
               :maxlength="MAIL_ADDRESS_INPUT_MAX_LENGTH"
               pattern="[A-Za-z0-9@._-]*"
-              spellcheck="false"
+              :spellcheck="false"
               :clear-button="accountMode === 'login'"
+              :clear-label="phone.t('Common.clear')"
               @input="updateAccountEmail"
               @clear="accountEmail = ''"
             >
-              <span
-                v-if="accountMode === 'register'"
-                class="pointer-events-none absolute right-8 top-1/2 -translate-y-1/2 text-sm opacity-50"
-              >
-                @ifruit.com
-              </span>
-            </k-list-input>
-            <k-list-input
+              <template v-if="accountMode === 'register'" #trailing>
+                <span class="settings-account-suffix">@ifruit.com</span>
+              </template>
+            </SkyField>
+            <SkyField
+              id="sky-cloud-password"
+              v-model="accountPassword"
               type="password"
-              :value="accountPassword"
               :label="phone.t('Apps.mail.password')"
-              outline
-              floating-label
               autocomplete="current-password"
-              @input="accountPassword = eventValue($event)"
-            >
-              <template #media><KeyRound :size="20" /></template>
-            </k-list-input>
-            <k-list-input
+            />
+            <SkyField
               v-if="accountMode === 'register'"
+              id="sky-cloud-confirm-password"
+              v-model="accountConfirm"
               type="password"
-              :value="accountConfirm"
               :label="phone.t('Apps.mail.confirmPassword')"
-              outline
-              floating-label
               autocomplete="new-password"
-              @input="accountConfirm = eventValue($event)"
-            >
-              <template #media><KeyRound :size="20" /></template>
-            </k-list-input>
-          </k-list>
-          <k-block>
-            <k-button
+            />
+          </SkySettingsGroup>
+
+          <div class="settings-primary-action">
+            <SkyButton
+              block
               large
-              rounded
               :disabled="accountSubmitting"
               @click="submitAccount"
             >
-              <k-preloader v-if="accountSubmitting" />
+              <SkySpinner v-if="accountSubmitting" :size="18" />
               <template v-else>
                 {{
                   phone.t(
@@ -907,93 +792,111 @@ onBeforeUnmount(() => {
                   )
                 }}
               </template>
-            </k-button>
-          </k-block>
+            </SkyButton>
+          </div>
         </template>
 
         <template v-else>
-          <k-list strong inset>
-            <k-list-item
+          <SkySettingsGroup :aria-label="account.email">
+            <SkySettingsRow
               :title="account.email"
-              :subtitle="phone.t('Apps.settings.accountCloudDetail')"
+              :description="phone.t('Apps.settings.accountCloudDetail')"
             >
-              <template #media>
-                <UserRound class="w-12 h-12 text-primary" />
+              <template #leading>
+                <SkySettingsIcon color="#0a84ff">
+                  <UserRound aria-hidden="true" />
+                </SkySettingsIcon>
               </template>
-            </k-list-item>
-          </k-list>
+            </SkySettingsRow>
+          </SkySettingsGroup>
 
-          <k-block-title>{{
-            phone.t('Apps.settings.linkedDevices')
-          }}</k-block-title>
-          <k-list strong inset>
-            <k-list-item
-              v-for="device in account.devices"
-              :key="device.imei"
-              :title="device.device_name"
-              :subtitle="device.imei"
-              :after="
-                device.current ? phone.t('Apps.settings.thisDevice') : undefined
-              "
-            >
-              <template #media><Smartphone :size="22" /></template>
-              <template v-if="!device.current" #footer>
-                <k-list-button @click="requestRemoveDevice(device.imei)">
-                  {{ phone.t('Apps.settings.removeDevice') }}
-                </k-list-button>
-              </template>
-            </k-list-item>
-          </k-list>
+          <SkySettingsGroup :title="phone.t('Apps.settings.linkedDevices')">
+            <template v-for="device in account.devices" :key="device.imei">
+              <SkySettingsRow
+                :title="device.device_name"
+                :description="device.imei"
+                :value="
+                  device.current
+                    ? phone.t('Apps.settings.thisDevice')
+                    : undefined
+                "
+              >
+                <template #leading>
+                  <Smartphone :size="20" aria-hidden="true" />
+                </template>
+              </SkySettingsRow>
+              <SkySettingsRow
+                v-if="!device.current"
+                kind="action"
+                tone="danger"
+                :title="phone.t('Apps.settings.removeDevice')"
+                @activate="requestRemoveDevice(device.imei)"
+              />
+            </template>
+          </SkySettingsGroup>
 
-          <k-list strong inset>
-            <k-list-button @click="logoutAccount">
-              {{ phone.t('Apps.settings.signOut') }}
-            </k-list-button>
-          </k-list>
+          <SkySettingsGroup :aria-label="phone.t('Apps.settings.signOut')">
+            <SkySettingsRow
+              kind="action"
+              tone="danger"
+              :title="phone.t('Apps.settings.signOut')"
+              @activate="logoutAccount"
+            />
+          </SkySettingsGroup>
         </template>
       </template>
 
       <template v-else-if="activeView === 'security'">
-        <k-block class="text-sm leading-5 opacity-70">
+        <SkyBlock class="settings-copy">
           {{ phone.t('Apps.settings.passcode.description') }}
-        </k-block>
+        </SkyBlock>
 
         <template v-if="!phone.security.enabled">
-          <k-block-title>{{
-            phone.t('Apps.settings.passcode.codeLength')
-          }}</k-block-title>
-          <k-block>
-            <k-segmented strong rounded>
-              <k-segmented-button
-                :active="passcodeLength === 6"
-                @click="passcodeLength = 6"
+          <SkySettingsGroup
+            :title="phone.t('Apps.settings.passcode.codeLength')"
+          >
+            <li class="settings-segmented-row">
+              <SkySegmented
+                :aria-label="phone.t('Apps.settings.passcode.codeLength')"
               >
-                {{ phone.t('Apps.settings.passcode.sixDigit') }}
-              </k-segmented-button>
-              <k-segmented-button
-                :active="passcodeLength === 4"
-                @click="passcodeLength = 4"
-              >
-                {{ phone.t('Apps.settings.passcode.fourDigit') }}
-              </k-segmented-button>
-            </k-segmented>
-          </k-block>
-          <k-list strong inset>
-            <k-list-button @click="beginSetPasscode">
-              {{ phone.t('Apps.settings.passcode.turnOn') }}
-            </k-list-button>
-          </k-list>
+                <SkySegmentedButton
+                  :active="passcodeLength === 6"
+                  @click="passcodeLength = 6"
+                >
+                  {{ phone.t('Apps.settings.passcode.sixDigit') }}
+                </SkySegmentedButton>
+                <SkySegmentedButton
+                  :active="passcodeLength === 4"
+                  @click="passcodeLength = 4"
+                >
+                  {{ phone.t('Apps.settings.passcode.fourDigit') }}
+                </SkySegmentedButton>
+              </SkySegmented>
+            </li>
+          </SkySettingsGroup>
+
+          <SkySettingsGroup
+            :aria-label="phone.t('Apps.settings.passcode.turnOn')"
+          >
+            <SkySettingsRow
+              kind="action"
+              :title="phone.t('Apps.settings.passcode.turnOn')"
+              @activate="beginSetPasscode"
+            />
+          </SkySettingsGroup>
         </template>
 
         <template v-else>
-          <k-list strong inset>
-            <k-list-item
+          <SkySettingsGroup
+            :aria-label="phone.t('Apps.settings.passcode.status')"
+          >
+            <SkySettingsRow
               :title="phone.t('Apps.settings.passcode.status')"
-              :after="phone.t('Apps.settings.on')"
+              :value="phone.t('Apps.settings.on')"
             />
-            <k-list-item
+            <SkySettingsRow
               :title="phone.t('Apps.settings.passcode.codeLength')"
-              :after="
+              :value="
                 phone.t(
                   phone.security.length === 4
                     ? 'Apps.settings.passcode.fourDigit'
@@ -1001,63 +904,73 @@ onBeforeUnmount(() => {
                 )
               "
             />
-          </k-list>
-          <k-block-title>{{
-            phone.t('Apps.settings.passcode.codeLength')
-          }}</k-block-title>
-          <k-block>
-            <k-segmented strong rounded>
-              <k-segmented-button
-                :active="passcodeLength === 6"
-                @click="passcodeLength = 6"
+          </SkySettingsGroup>
+
+          <SkySettingsGroup
+            :title="phone.t('Apps.settings.passcode.codeLength')"
+          >
+            <li class="settings-segmented-row">
+              <SkySegmented
+                :aria-label="phone.t('Apps.settings.passcode.codeLength')"
               >
-                {{ phone.t('Apps.settings.passcode.sixDigit') }}
-              </k-segmented-button>
-              <k-segmented-button
-                :active="passcodeLength === 4"
-                @click="passcodeLength = 4"
-              >
-                {{ phone.t('Apps.settings.passcode.fourDigit') }}
-              </k-segmented-button>
-            </k-segmented>
-          </k-block>
-          <k-list strong inset>
-            <k-list-button @click="beginChangePasscode">
-              {{ phone.t('Apps.settings.passcode.change') }}
-            </k-list-button>
-            <k-list-button class="!text-red-500" @click="beginDisablePasscode">
-              {{ phone.t('Apps.settings.passcode.turnOff') }}
-            </k-list-button>
-          </k-list>
+                <SkySegmentedButton
+                  :active="passcodeLength === 6"
+                  @click="passcodeLength = 6"
+                >
+                  {{ phone.t('Apps.settings.passcode.sixDigit') }}
+                </SkySegmentedButton>
+                <SkySegmentedButton
+                  :active="passcodeLength === 4"
+                  @click="passcodeLength = 4"
+                >
+                  {{ phone.t('Apps.settings.passcode.fourDigit') }}
+                </SkySegmentedButton>
+              </SkySegmented>
+            </li>
+          </SkySettingsGroup>
+
+          <SkySettingsGroup :aria-label="phone.t('Apps.settings.security')">
+            <SkySettingsRow
+              kind="action"
+              :title="phone.t('Apps.settings.passcode.change')"
+              @activate="beginChangePasscode"
+            />
+            <SkySettingsRow
+              kind="action"
+              tone="danger"
+              :title="phone.t('Apps.settings.passcode.turnOff')"
+              @activate="beginDisablePasscode"
+            />
+          </SkySettingsGroup>
         </template>
       </template>
 
       <template v-else-if="activeView === 'notifications'">
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :aria-label="phone.t('Apps.settings.notifications')">
+          <SkySettingsRow
             v-for="app in notificationApps"
             :key="app.id"
-            link
+            kind="navigation"
             :title="getPhoneAppLabel(app, phone.t)"
-            :after="
+            :value="
               phone.t(
                 phone.preferences.settings.notifications[app.id].enabled
                   ? 'Apps.settings.on'
                   : 'Apps.settings.off',
               )
             "
-            @click="openNotificationApp(app)"
+            @activate="openNotificationApp(app)"
           >
-            <template #media>
+            <template #leading>
               <img
-                class="w-8 h-8 object-contain"
+                class="settings-app-icon"
                 :src="app.iconImage"
                 alt=""
                 draggable="false"
               />
             </template>
-          </k-list-item>
-        </k-list>
+          </SkySettingsRow>
+        </SkySettingsGroup>
       </template>
 
       <template
@@ -1065,285 +978,226 @@ onBeforeUnmount(() => {
           activeView === 'notification-detail' && selectedNotificationApp
         "
       >
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup
+          :aria-label="getPhoneAppLabel(selectedNotificationApp, phone.t)"
+        >
+          <SkySettingsRow
             :title="getPhoneAppLabel(selectedNotificationApp, phone.t)"
           >
-            <template #media>
+            <template #leading>
               <img
-                class="w-12 h-12 object-contain"
+                class="settings-app-icon"
                 :src="selectedNotificationApp.iconImage"
                 alt=""
                 draggable="false"
               />
             </template>
-          </k-list-item>
-        </k-list>
-        <k-list strong inset>
-          <k-list-item :title="phone.t('Apps.settings.allowNotifications')">
-            <template #after>
-              <k-toggle
-                :checked="
-                  phone.preferences.settings.notifications[
-                    selectedNotificationApp.id
-                  ].enabled
-                "
-                :aria-label="
-                  phone.t('Apps.settings.toggle.notifications', {
-                    app: getPhoneAppLabel(selectedNotificationApp, phone.t),
-                  })
-                "
-                @change="
-                  phone.setAppNotification(
-                    selectedNotificationApp.id,
-                    'enabled',
-                    !phone.preferences.settings.notifications[
-                      selectedNotificationApp.id
-                    ].enabled,
-                  )
-                "
-              />
-            </template>
-          </k-list-item>
-          <k-list-item :title="phone.t('Apps.settings.notificationSounds')">
-            <template #after>
-              <k-toggle
-                :disabled="
-                  !phone.preferences.settings.notifications[
-                    selectedNotificationApp.id
-                  ].enabled
-                "
-                :checked="
-                  phone.preferences.settings.notifications[
-                    selectedNotificationApp.id
-                  ].sounds
-                "
-                :aria-label="
-                  phone.t('Apps.settings.toggle.notificationSounds', {
-                    app: getPhoneAppLabel(selectedNotificationApp, phone.t),
-                  })
-                "
-                @change="
-                  phone.setAppNotification(
-                    selectedNotificationApp.id,
-                    'sounds',
-                    !phone.preferences.settings.notifications[
-                      selectedNotificationApp.id
-                    ].sounds,
-                  )
-                "
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+          </SkySettingsRow>
+        </SkySettingsGroup>
+
+        <SkySettingsGroup :aria-label="phone.t('Apps.settings.notifications')">
+          <SkySettingsRow
+            kind="toggle"
+            :model-value="
+              phone.preferences.settings.notifications[
+                selectedNotificationApp.id
+              ].enabled
+            "
+            :title="phone.t('Apps.settings.allowNotifications')"
+            @update:model-value="
+              phone.setAppNotification(
+                selectedNotificationApp.id,
+                'enabled',
+                $event,
+              )
+            "
+          />
+          <SkySettingsRow
+            kind="toggle"
+            :disabled="
+              !phone.preferences.settings.notifications[
+                selectedNotificationApp.id
+              ].enabled
+            "
+            :model-value="
+              phone.preferences.settings.notifications[
+                selectedNotificationApp.id
+              ].sounds
+            "
+            :title="phone.t('Apps.settings.notificationSounds')"
+            @update:model-value="
+              phone.setAppNotification(
+                selectedNotificationApp.id,
+                'sounds',
+                $event,
+              )
+            "
+          />
+        </SkySettingsGroup>
       </template>
 
       <template v-else-if="activeView === 'sounds'">
-        <k-block-title>
-          {{ phone.t('Apps.settings.ringtoneVolume') }} ·
-          {{ phone.preferences.settings.ringtoneVolume }}%
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item>
-            <template #inner>
-              <k-range
-                class="w-full"
-                :value="phone.preferences.settings.ringtoneVolume"
-                :min="0"
-                :max="100"
-                :aria-label="phone.t('Apps.settings.ringtoneVolume')"
-                @input="updateNumberPreference('ringtoneVolume', $event)"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+        <SkySettingsGroup :aria-label="phone.t('Apps.settings.sounds')">
+          <SkySettingsRangeRow
+            :model-value="phone.preferences.settings.ringtoneVolume"
+            :title="phone.t('Apps.settings.ringtoneVolume')"
+            :value-label="phone.preferences.settings.ringtoneVolume + '%'"
+            :aria-value-text="phone.preferences.settings.ringtoneVolume + '%'"
+            :min="0"
+            :max="100"
+            @update:model-value="
+              updateNumberPreference('ringtoneVolume', $event)
+            "
+          />
+          <SkySettingsRangeRow
+            :model-value="phone.preferences.settings.notificationVolume"
+            :title="phone.t('Apps.settings.notificationVolume')"
+            :value-label="phone.preferences.settings.notificationVolume + '%'"
+            :aria-value-text="
+              phone.preferences.settings.notificationVolume + '%'
+            "
+            :min="0"
+            :max="100"
+            @update:model-value="
+              updateNumberPreference('notificationVolume', $event)
+            "
+          />
+        </SkySettingsGroup>
 
-        <k-block-title>
-          {{ phone.t('Apps.settings.notificationVolume') }} ·
-          {{ phone.preferences.settings.notificationVolume }}%
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item>
-            <template #inner>
-              <k-range
-                class="w-full"
-                :value="phone.preferences.settings.notificationVolume"
-                :min="0"
-                :max="100"
-                :aria-label="phone.t('Apps.settings.notificationVolume')"
-                @input="updateNumberPreference('notificationVolume', $event)"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
-
-        <k-block-title>{{ phone.t('Apps.settings.ringtone') }}</k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :title="phone.t('Apps.settings.ringtone')">
+          <SkySettingsRow
             v-for="ringtone in RINGTONE_IDS"
             :key="ringtone"
-            link
-            :chevron="false"
-            :title="phone.t(`Apps.settings.ringtones.${ringtone}`)"
-            @click="selectRingtone(ringtone)"
-          >
-            <template #after>
-              <Check
-                v-if="phone.preferences.settings.ringtone === ringtone"
-                class="w-5 h-5 text-primary"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+            kind="choice"
+            :selected="phone.preferences.settings.ringtone === ringtone"
+            :title="phone.t('Apps.settings.ringtones.' + ringtone)"
+            @activate="selectRingtone(ringtone)"
+          />
+        </SkySettingsGroup>
 
-        <k-block-title>
-          {{ phone.t('Apps.settings.notificationSound') }}
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :title="phone.t('Apps.settings.notificationSound')">
+          <SkySettingsRow
             v-for="sound in NOTIFICATION_SOUND_IDS"
             :key="sound"
-            link
-            :chevron="false"
-            :title="phone.t(`Apps.settings.notificationSoundsList.${sound}`)"
-            @click="selectNotificationSound(sound)"
-          >
-            <template #after>
-              <Check
-                v-if="phone.preferences.settings.notificationSound === sound"
-                class="w-5 h-5 text-primary"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+            kind="choice"
+            :selected="phone.preferences.settings.notificationSound === sound"
+            :title="phone.t('Apps.settings.notificationSoundsList.' + sound)"
+            @activate="selectNotificationSound(sound)"
+          />
+        </SkySettingsGroup>
       </template>
 
       <template v-else-if="activeView === 'connectivity'">
-        <k-block-title>{{
-          phone.t('Apps.settings.connections')
-        }}</k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup
+          :title="phone.t('Apps.settings.connections')"
+          :footer="phone.t('Apps.settings.connectivityDescription')"
+        >
+          <SkySettingsRow
             v-for="row in connectivityRows"
             :key="row.key"
-            :title="phone.t(`Apps.settings.${row.key}`)"
+            kind="toggle"
+            :disabled="phone.preferences.settings.airplaneMode"
+            :model-value="phone.preferences.settings[row.preferenceKey]"
+            :title="phone.t('Apps.settings.' + row.key)"
+            @update:model-value="setRootSetting(row.preferenceKey, $event)"
           >
-            <template #media>
-              <span
-                class="settings-row-icon"
-                :style="{ backgroundColor: row.iconColor }"
-              >
-                <component :is="row.icon" :size="17" :stroke-width="2.25" />
-              </span>
+            <template #leading>
+              <SkySettingsIcon :color="row.iconColor">
+                <component :is="row.icon" aria-hidden="true" />
+              </SkySettingsIcon>
             </template>
-            <template #after>
-              <k-toggle
-                :checked="phone.preferences.settings[row.preferenceKey]"
-                :disabled="phone.preferences.settings.airplaneMode"
-                :aria-label="
-                  phone.t(`Apps.settings.toggle.${row.preferenceKey}`)
-                "
-                @change="toggleRootSetting(row.preferenceKey)"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
-        <k-block class="text-sm leading-5 opacity-60">
-          {{ phone.t('Apps.settings.connectivityDescription') }}
-        </k-block>
+          </SkySettingsRow>
+        </SkySettingsGroup>
       </template>
 
       <template v-else-if="activeView === 'focus'">
-        <k-list strong inset>
-          <k-list-item :title="phone.t('Apps.settings.focusMode')">
-            <template #media>
-              <span class="settings-row-icon bg-[#5856d6]">
-                <Moon :size="17" :stroke-width="2.25" />
-              </span>
+        <SkySettingsGroup
+          :footer="phone.t('Apps.settings.focusDescription')"
+          :aria-label="phone.t('Apps.settings.focusMode')"
+        >
+          <SkySettingsRow
+            kind="toggle"
+            :model-value="phone.preferences.settings.focusMode"
+            :title="phone.t('Apps.settings.focusMode')"
+            @update:model-value="setRootSetting('focusMode', $event)"
+          >
+            <template #leading>
+              <SkySettingsIcon color="#5856d6">
+                <Moon aria-hidden="true" />
+              </SkySettingsIcon>
             </template>
-            <template #after>
-              <k-toggle
-                :checked="phone.preferences.settings.focusMode"
-                :aria-label="phone.t('Apps.settings.toggle.focusMode')"
-                @change="toggleRootSetting('focusMode')"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
-        <k-block class="text-sm leading-5 opacity-60">
-          {{ phone.t('Apps.settings.focusDescription') }}
-        </k-block>
+          </SkySettingsRow>
+        </SkySettingsGroup>
       </template>
 
       <template v-else-if="activeView === 'general'">
-        <k-block-title>
-          {{ phone.t('Apps.settings.notificationDuration') }} ·
-          {{
-            phone.t('Apps.settings.seconds', {
-              seconds: String(
-                phone.preferences.settings.notificationDurationSeconds,
-              ),
-            })
-          }}
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item>
-            <template #inner>
-              <k-range
-                class="w-full"
-                :value="phone.preferences.settings.notificationDurationSeconds"
-                :min="3"
-                :max="30"
-                :step="1"
-                :aria-label="phone.t('Apps.settings.notificationDuration')"
-                @input="
-                  updateNumberPreference('notificationDurationSeconds', $event)
-                "
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+        <SkySettingsGroup
+          :aria-label="phone.t('Apps.settings.notificationDuration')"
+        >
+          <SkySettingsRangeRow
+            :model-value="
+              phone.preferences.settings.notificationDurationSeconds
+            "
+            :title="phone.t('Apps.settings.notificationDuration')"
+            :value-label="
+              phone.t('Apps.settings.seconds', {
+                seconds: String(
+                  phone.preferences.settings.notificationDurationSeconds,
+                ),
+              })
+            "
+            :aria-value-text="
+              phone.t('Apps.settings.seconds', {
+                seconds: String(
+                  phone.preferences.settings.notificationDurationSeconds,
+                ),
+              })
+            "
+            :min="3"
+            :max="30"
+            :step="1"
+            @update:model-value="
+              updateNumberPreference('notificationDurationSeconds', $event)
+            "
+          />
+        </SkySettingsGroup>
 
-        <k-block-title>{{ phone.t('Apps.settings.about') }}</k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :title="phone.t('Apps.settings.about')">
+          <SkySettingsRow
             :title="phone.t('Apps.settings.deviceName')"
-            :after="phone.t('Apps.settings.deviceNameValue')"
+            :value="phone.t('Apps.settings.deviceNameValue')"
           />
-          <k-list-item
+          <SkySettingsRow
             :title="phone.t('Apps.settings.softwareVersion')"
-            after="0.1.0"
+            value="0.1.0"
           />
-          <k-list-item
+          <SkySettingsRow
             :title="phone.t('Apps.settings.language')"
-            :after="phone.t('Apps.settings.languageValue')"
+            :value="phone.t('Apps.settings.languageValue')"
           />
-          <k-list-item
+          <SkySettingsRow
             :title="phone.t('Apps.settings.localStorage')"
-            :after="phone.t('Apps.settings.localStorageValue')"
+            :value="phone.t('Apps.settings.localStorageValue')"
           />
-        </k-list>
+        </SkySettingsGroup>
 
-        <k-block-title>{{
-          phone.t('Apps.settings.deviceInformation')
-        }}</k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :title="phone.t('Apps.settings.deviceInformation')">
+          <SkySettingsRow
             :title="phone.t('Apps.settings.imei')"
-            :after="phone.device?.imei ?? '—'"
+            :value="phone.device?.imei ?? '—'"
           />
-          <k-list-item
+          <SkySettingsRow
             :title="phone.t('Apps.settings.simNumber')"
-            :after="
+            :value="
               phone.device?.sim
                 ? formatPhoneNumber(phone.device.sim.number)
                 : phone.t('Apps.settings.noSim')
             "
           />
-          <k-list-item
+          <SkySettingsRow
             v-if="phone.device?.sim?.removable"
             :title="phone.t('Apps.settings.simType')"
-            :after="
+            :value="
               phone.t(
                 phone.device.sim.type === 'registered'
                   ? 'Apps.settings.registeredSim'
@@ -1351,345 +1205,407 @@ onBeforeUnmount(() => {
               )
             "
           />
-          <k-list-button
+          <SkySettingsRow
             v-if="phone.device?.sim?.removable"
-            @click="simEjectOpened = true"
+            kind="action"
+            tone="danger"
+            :title="phone.t('Apps.settings.ejectSim')"
+            @activate="simEjectOpened = true"
+          />
+          <SkySettingsRow
+            kind="action"
+            tone="danger"
+            :title="phone.t('Apps.settings.factoryReset')"
+            @activate="resetOpened = true"
           >
-            {{ phone.t('Apps.settings.ejectSim') }}
-          </k-list-button>
-          <k-list-button @click="resetOpened = true">
-            <RotateCcw :size="18" />
-            {{ phone.t('Apps.settings.factoryReset') }}
-          </k-list-button>
-        </k-list>
+            <template #leading>
+              <RotateCcw :size="18" aria-hidden="true" />
+            </template>
+          </SkySettingsRow>
+        </SkySettingsGroup>
       </template>
 
       <template v-else-if="activeView === 'appearance'">
-        <k-block-title>
-          {{ phone.t('Apps.settings.graphicsMode') }}
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :title="phone.t('Apps.settings.graphicsMode')">
+          <SkySettingsRow
             v-for="mode in GRAPHICS_MODE_IDS"
             :key="mode"
-            link
-            :chevron="false"
-            :title="phone.t(`Apps.settings.${mode}Mode`)"
-            :subtitle="phone.t(`Apps.settings.${mode}ModeDescription`)"
-            @click="selectGraphicsMode(mode)"
-          >
-            <template #after>
-              <Check
-                v-if="phone.preferences.settings.graphicsMode === mode"
-                class="w-5 h-5 text-primary"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+            kind="choice"
+            :selected="phone.preferences.settings.graphicsMode === mode"
+            :title="phone.t('Apps.settings.' + mode + 'Mode')"
+            :description="phone.t('Apps.settings.' + mode + 'ModeDescription')"
+            @activate="selectGraphicsMode(mode)"
+          />
+        </SkySettingsGroup>
 
-        <k-block-title>
-          {{ phone.t('Apps.settings.appearanceMode') }}
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :title="phone.t('Apps.settings.appearanceMode')">
+          <SkySettingsRow
             v-for="mode in APPEARANCE_MODE_IDS"
             :key="mode"
-            link
-            :chevron="false"
-            :title="phone.t(`Apps.settings.${mode}`)"
-            @click="selectAppearanceMode(mode)"
-          >
-            <template #after>
-              <Check
-                v-if="phone.preferences.settings.appearanceMode === mode"
-                class="w-5 h-5 text-primary"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+            kind="choice"
+            :selected="phone.preferences.settings.appearanceMode === mode"
+            :title="phone.t('Apps.settings.' + mode)"
+            @activate="selectAppearanceMode(mode)"
+          />
+        </SkySettingsGroup>
 
-        <k-block-title>
-          {{ phone.t('Apps.settings.screenBrightness') }} ·
-          {{ phone.preferences.settings.screenBrightness }}%
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item>
-            <template #inner>
-              <div class="flex w-full items-center gap-3">
-                <Sun :size="16" class="shrink-0 opacity-55" />
-                <k-range
-                  class="w-full"
-                  :value="phone.preferences.settings.screenBrightness"
-                  :min="10"
-                  :max="100"
-                  :aria-label="phone.t('Apps.settings.screenBrightness')"
-                  @input="updateNumberPreference('screenBrightness', $event)"
-                />
-                <Sun :size="23" class="shrink-0" />
-              </div>
-            </template>
-          </k-list-item>
-        </k-list>
+        <SkySettingsGroup
+          :aria-label="phone.t('Apps.settings.screenBrightness')"
+        >
+          <SkySettingsRangeRow
+            :model-value="phone.preferences.settings.screenBrightness"
+            :title="phone.t('Apps.settings.screenBrightness')"
+            :value-label="phone.preferences.settings.screenBrightness + '%'"
+            :aria-value-text="phone.preferences.settings.screenBrightness + '%'"
+            :min="10"
+            :max="100"
+            @update:model-value="
+              updateNumberPreference('screenBrightness', $event)
+            "
+          />
+        </SkySettingsGroup>
 
-        <k-block-title>
-          {{ phone.t('Apps.settings.phoneScale') }} ·
-          {{ phone.preferences.settings.phoneScale }}%
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item>
-            <template #inner>
-              <k-range
-                class="w-full"
-                :value="phone.preferences.settings.phoneScale"
-                :min="PHONE_SCALE_MIN"
-                :max="PHONE_SCALE_MAX"
-                :step="PHONE_SCALE_STEP"
-                :aria-label="phone.t('Apps.settings.phoneScale')"
-                @input="updateNumberPreference('phoneScale', $event)"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+        <SkySettingsGroup :aria-label="phone.t('Apps.settings.phoneScale')">
+          <SkySettingsRangeRow
+            :model-value="phone.preferences.settings.phoneScale"
+            :title="phone.t('Apps.settings.phoneScale')"
+            :value-label="phone.preferences.settings.phoneScale + '%'"
+            :aria-value-text="phone.preferences.settings.phoneScale + '%'"
+            :min="PHONE_SCALE_MIN"
+            :max="PHONE_SCALE_MAX"
+            :step="PHONE_SCALE_STEP"
+            @update:model-value="updateNumberPreference('phoneScale', $event)"
+          />
+        </SkySettingsGroup>
 
-        <k-block-title>{{ phone.t('Apps.settings.phoneFrame') }}</k-block-title>
-        <k-list strong inset>
-          <k-list-item
-            ref="framePickerButton"
-            link
+        <SkySettingsGroup :title="phone.t('Apps.settings.phoneFrame')">
+          <SkySettingsRow
+            kind="navigation"
             :title="phone.t('Apps.settings.phoneFrame')"
-            @click="openFramePicker"
+            @activate="framePickerOpened = true"
           >
-            <template #after>
+            <template #trailing>
               <span
-                class="h-7 w-7 rounded-full border border-black/15 shadow-sm"
+                class="settings-frame-swatch"
                 :style="{ background: selectedFrameColor }"
                 aria-hidden="true"
               />
             </template>
-          </k-list-item>
-        </k-list>
-
-        <Teleport v-if="framePickerPortalTarget" :to="framePickerPortalTarget">
-          <k-popover
-            :opened="framePickerOpened"
-            :class="[
-              'settings-frame-popover !absolute !z-[200] !left-[var(--settings-frame-picker-left)] !top-[var(--settings-frame-picker-top)]',
-              {
-                dark: phone.isDarkMode,
-                'phone-app--light': !phone.isDarkMode,
-                [`phone-app--${phone.preferences.settings.graphicsMode}`]: true,
-              },
-            ]"
-            @backdropclick="framePickerOpened = false"
-          >
-            <div
-              class="grid grid-cols-3 gap-5 p-5"
-              role="group"
-              :aria-label="phone.t('Apps.settings.phoneFrame')"
-            >
-              <button
-                v-for="frame in PHONE_FRAME_IDS"
-                :key="frame"
-                type="button"
-                class="h-10 w-10 rounded-full border border-black/15 shadow-sm"
-                :style="{ background: PHONE_FRAME_COLORS[frame] }"
-                :aria-label="phone.t(`Apps.settings.frames.${frame}`)"
-                :aria-pressed="phone.preferences.settings.frame === frame"
-                @click="selectFrame(frame)"
-              />
-            </div>
-          </k-popover>
-        </Teleport>
+          </SkySettingsRow>
+        </SkySettingsGroup>
       </template>
 
       <template v-else-if="activeView === 'wallpaper'">
-        <k-block-title>
-          {{ phone.t('Apps.settings.wallpaperPicker') }}
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item
+        <SkySettingsGroup :title="phone.t('Apps.settings.wallpaperPicker')">
+          <SkySettingsRow
             v-for="wallpaper in WALLPAPER_IDS"
             :key="wallpaper"
-            link
-            :chevron="false"
-            :title="phone.t(`Apps.settings.wallpapers.${wallpaper}`)"
-            @click="phone.setWallpaper(wallpaper)"
-          >
-            <template #after>
-              <Check
-                v-if="phone.preferences.settings.wallpaper === wallpaper"
-                class="w-5 h-5 text-primary"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
+            kind="choice"
+            :selected="phone.preferences.settings.wallpaper === wallpaper"
+            :title="phone.t('Apps.settings.wallpapers.' + wallpaper)"
+            @activate="phone.setWallpaper(wallpaper)"
+          />
+        </SkySettingsGroup>
       </template>
-    </template>
-  </k-page>
+    </SkyScrollArea>
 
-  <PhonePasscode
-    v-if="passcodeFlow"
-    :busy="passcodeBusy"
-    :error="passcodeError"
-    :length="passcodeLength"
-    :reset-key="passcodeResetKey"
-    :subtitle="phone.t('Apps.settings.passcode.screenSubtitle')"
-    :title="passcodeTitle"
-    @cancel="cancelPasscodeFlow"
-    @complete="submitSettingsPasscode"
-  />
+    <PhonePasscode
+      v-if="passcodeFlow"
+      :busy="passcodeBusy"
+      :error="passcodeError"
+      :length="passcodeLength"
+      :reset-key="passcodeResetKey"
+      :subtitle="phone.t('Apps.settings.passcode.screenSubtitle')"
+      :title="passcodeTitle"
+      @cancel="cancelPasscodeFlow"
+      @complete="submitSettingsPasscode"
+    />
 
-  <div
-    v-if="factoryResetting"
-    class="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-black px-8 text-center text-white"
-  >
     <div
-      class="relative flex h-28 w-28 items-center justify-center"
-      role="progressbar"
-      :aria-label="phone.t('Apps.settings.factoryResetProgress')"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      :aria-valuenow="Math.floor(factoryResetProgress)"
+      v-if="factoryResetting"
+      class="settings-reset-overlay"
+      aria-live="polite"
     >
-      <svg
-        class="h-28 w-28 -rotate-90"
-        viewBox="0 0 112 112"
-        aria-hidden="true"
-      >
-        <circle
-          cx="56"
-          cy="56"
-          r="48"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="6"
-          class="text-white/15"
+      <div class="settings-reset-progress">
+        <strong>{{ Math.floor(factoryResetProgress) }}%</strong>
+        <SkyProgress
+          :label="phone.t('Apps.settings.factoryResetProgress')"
+          :progress="factoryResetProgress / 100"
         />
-        <circle
-          cx="56"
-          cy="56"
-          r="48"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="6"
-          stroke-linecap="round"
-          :stroke-dasharray="FACTORY_RESET_CIRCUMFERENCE"
-          :stroke-dashoffset="factoryResetDashOffset"
-          class="text-white"
-        />
-      </svg>
-      <span class="absolute text-xl font-semibold tabular-nums">
-        {{ Math.floor(factoryResetProgress) }}%
-      </span>
+      </div>
+      <h2>{{ phone.t('Apps.settings.factoryResetProgress') }}</h2>
+      <p>{{ phone.t('Apps.settings.factoryResetWarning') }}</p>
     </div>
-    <h2 class="mt-8 text-xl font-semibold">
-      {{ phone.t('Apps.settings.factoryResetProgress') }}
-    </h2>
-    <p class="mt-3 max-w-64 text-sm leading-5 text-white/55">
-      {{ phone.t('Apps.settings.factoryResetWarning') }}
-    </p>
-  </div>
 
-  <k-dialog
-    :opened="removeDeviceOpened"
-    @backdropclick="removeDeviceOpened = false"
-  >
-    <template #title>{{ phone.t('Apps.settings.removeDevice') }}</template>
-    <p>{{ phone.t('Apps.settings.removeDeviceBody') }}</p>
-    <k-list>
-      <k-list-input
-        type="password"
-        :value="removeDevicePassword"
-        :label="phone.t('Apps.mail.password')"
-        @input="removeDevicePassword = eventValue($event)"
-      />
-    </k-list>
-    <template #buttons>
-      <k-dialog-button @click="removeDeviceOpened = false">
-        {{ phone.t('Common.cancel') }}
-      </k-dialog-button>
-      <k-dialog-button strong @click="confirmRemoveDevice">
-        {{ phone.t('Apps.settings.removeDevice') }}
-      </k-dialog-button>
-    </template>
-  </k-dialog>
+    <SkyDialog
+      :opened="framePickerOpened"
+      :title="phone.t('Apps.settings.phoneFrame')"
+      @backdropclick="framePickerOpened = false"
+      @escape="framePickerOpened = false"
+    >
+      <div
+        class="settings-frame-grid"
+        role="group"
+        :aria-label="phone.t('Apps.settings.phoneFrame')"
+      >
+        <button
+          v-for="frame in PHONE_FRAME_IDS"
+          :key="frame"
+          type="button"
+          class="settings-frame-choice"
+          :class="{
+            'settings-frame-choice--selected':
+              phone.preferences.settings.frame === frame,
+          }"
+          :aria-label="phone.t('Apps.settings.frames.' + frame)"
+          :aria-pressed="phone.preferences.settings.frame === frame"
+          @click="selectFrame(frame)"
+        >
+          <span
+            class="settings-frame-choice__swatch"
+            :style="{ background: PHONE_FRAME_COLORS[frame] }"
+            aria-hidden="true"
+          />
+          <Check
+            v-if="phone.preferences.settings.frame === frame"
+            :size="17"
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      <template #buttons>
+        <SkyDialogButton @click="framePickerOpened = false">
+          {{ phone.t('Common.cancel') }}
+        </SkyDialogButton>
+      </template>
+    </SkyDialog>
 
-  <k-dialog
-    v-if="phone.device?.sim?.removable"
-    :opened="simEjectOpened"
-    @backdropclick="simEjectOpened = false"
-  >
-    <template #title>{{ phone.t('Apps.settings.ejectSim') }}</template>
-    <p>{{ phone.t('Apps.settings.ejectSimBody') }}</p>
-    <template #buttons>
-      <k-dialog-button @click="simEjectOpened = false">{{
-        phone.t('Common.cancel')
-      }}</k-dialog-button>
-      <k-dialog-button strong @click="confirmSimEject">{{
-        phone.t('Apps.settings.ejectSim')
-      }}</k-dialog-button>
-    </template>
-  </k-dialog>
+    <SkyDialog
+      :opened="removeDeviceOpened"
+      :title="phone.t('Apps.settings.removeDevice')"
+      :content="phone.t('Apps.settings.removeDeviceBody')"
+      @backdropclick="removeDeviceOpened = false"
+      @escape="removeDeviceOpened = false"
+    >
+      <SkySettingsGroup :aria-label="phone.t('Apps.mail.password')">
+        <SkyField
+          v-model="removeDevicePassword"
+          type="password"
+          :label="phone.t('Apps.mail.password')"
+          autocomplete="current-password"
+        />
+      </SkySettingsGroup>
+      <template #buttons>
+        <SkyDialogButton @click="removeDeviceOpened = false">
+          {{ phone.t('Common.cancel') }}
+        </SkyDialogButton>
+        <SkyDialogButton
+          class="settings-dialog-button--danger"
+          strong
+          @click="confirmRemoveDevice"
+        >
+          {{ phone.t('Apps.settings.removeDevice') }}
+        </SkyDialogButton>
+      </template>
+    </SkyDialog>
 
-  <k-dialog :opened="resetOpened" @backdropclick="resetOpened = false">
-    <template #title>{{ phone.t('Apps.settings.factoryReset') }}</template>
-    <p>{{ phone.t('Apps.settings.factoryResetBody') }}</p>
-    <template #buttons>
-      <k-dialog-button @click="resetOpened = false">
-        {{ phone.t('Common.cancel') }}
-      </k-dialog-button>
-      <k-dialog-button strong @click="confirmFactoryReset">
-        {{ phone.t('Common.reset') }}
-      </k-dialog-button>
-    </template>
-  </k-dialog>
+    <SkyDialog
+      v-if="phone.device?.sim?.removable"
+      :opened="simEjectOpened"
+      :title="phone.t('Apps.settings.ejectSim')"
+      :content="phone.t('Apps.settings.ejectSimBody')"
+      @backdropclick="simEjectOpened = false"
+      @escape="simEjectOpened = false"
+    >
+      <template #buttons>
+        <SkyDialogButton @click="simEjectOpened = false">
+          {{ phone.t('Common.cancel') }}
+        </SkyDialogButton>
+        <SkyDialogButton
+          class="settings-dialog-button--danger"
+          strong
+          @click="confirmSimEject"
+        >
+          {{ phone.t('Apps.settings.ejectSim') }}
+        </SkyDialogButton>
+      </template>
+    </SkyDialog>
 
-  <k-toast
-    :opened="Boolean(accountToast)"
-    position="center"
-    @click="accountToast = ''"
-  >
-    {{ accountToast }}
-  </k-toast>
+    <SkyDialog
+      :opened="resetOpened"
+      :title="phone.t('Apps.settings.factoryReset')"
+      :content="phone.t('Apps.settings.factoryResetBody')"
+      @backdropclick="resetOpened = false"
+      @escape="resetOpened = false"
+    >
+      <template #buttons>
+        <SkyDialogButton @click="resetOpened = false">
+          {{ phone.t('Common.cancel') }}
+        </SkyDialogButton>
+        <SkyDialogButton
+          class="settings-dialog-button--danger"
+          strong
+          @click="confirmFactoryReset"
+        >
+          {{ phone.t('Common.reset') }}
+        </SkyDialogButton>
+      </template>
+    </SkyDialog>
+
+    <SkyToast
+      :opened="Boolean(accountToast)"
+      position="center"
+      @click="accountToast = ''"
+    >
+      {{ accountToast }}
+    </SkyToast>
+  </SkyAppPage>
 </template>
 
 <style scoped>
-.settings-row-icon {
-  display: flex;
+.settings-search {
+  margin-bottom: var(--sky-space-4);
+}
+
+.settings-content {
+  padding-top: var(--sky-space-2);
+}
+
+.settings-copy {
+  margin: 0 var(--sky-space-1) var(--sky-space-4);
+  color: var(--sky-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.settings-primary-action {
+  margin-bottom: var(--sky-space-5);
+}
+
+.settings-account-suffix {
+  color: var(--sky-muted);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.settings-segmented-row {
+  min-width: 0;
+  padding: var(--sky-space-2) var(--sky-space-3);
+  list-style: none;
+}
+
+.settings-app-icon {
+  width: 32px;
+  height: 32px;
+  display: block;
+  object-fit: contain;
+}
+
+.settings-frame-swatch {
   width: 28px;
   height: 28px;
-  flex-shrink: 0;
+  display: block;
+  flex: none;
+  border: 1px solid var(--sky-hairline);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
+}
+
+.settings-frame-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 52px);
+  justify-content: center;
+  gap: var(--sky-space-2);
+  margin-top: var(--sky-space-4);
+}
+
+.settings-frame-choice {
+  width: 52px;
+  height: 52px;
+  position: relative;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: var(--sky-radius-control);
+  background: transparent;
+  color: #ffffff;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.settings-frame-choice:focus-visible {
+  outline: 2px solid var(--sky-app-accent);
+  outline-offset: 1px;
+}
+
+.settings-frame-choice:active {
+  background: var(--sky-app-accent-soft);
+}
+
+.settings-frame-choice__swatch {
+  width: 40px;
+  height: 40px;
+  display: block;
+  border: 1px solid var(--sky-hairline);
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
+}
+
+.settings-frame-choice > svg {
+  position: absolute;
+}
+
+.settings-frame-choice--selected .settings-frame-choice__swatch {
+  box-shadow:
+    0 0 0 2px var(--sky-surface),
+    0 0 0 4px var(--sky-app-accent);
+}
+
+.settings-reset-overlay {
+  position: absolute;
+  z-index: 100;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  border-radius: 7px;
-  color: #fff;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 35%),
-    0 1px 2px rgb(0 0 0 / 25%);
+  padding: var(--sky-space-6);
+  background: #000000;
+  color: #ffffff;
+  text-align: center;
 }
 
-.settings-detail-navbar {
-  top: 0 !important;
-  background: rgb(248 248 248 / 94%);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+.settings-reset-progress {
+  width: min(240px, 80%);
 }
 
-.settings-detail-navbar::before {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  left: 0;
-  height: 44px;
-  background: rgb(248 248 248);
-  content: '';
+.settings-reset-progress strong {
+  display: block;
+  margin-bottom: var(--sky-space-3);
+  font-size: 28px;
+  font-variant-numeric: tabular-nums;
 }
 
-.settings-detail-navbar--dark {
-  background: rgb(0 0 0 / 94%);
+.settings-reset-overlay h2 {
+  margin: var(--sky-space-5) 0 0;
+  font-size: 20px;
 }
 
-.settings-detail-navbar--dark::before {
-  background: #000;
+.settings-reset-overlay p {
+  max-width: 270px;
+  margin: var(--sky-space-2) 0 0;
+  color: rgb(255 255 255 / 62%);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.settings-dialog-button--danger {
+  color: var(--sky-danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .settings-frame-choice {
+    transition: none;
+  }
 }
 </style>

From 2cf15c70be14a8f8d300dbeaecfd2ca5f96a6ff1 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:19 +0200
Subject: [PATCH 51/63] ENH - migrate Radio to Sky UI

---
 frontend/src/assets/img/app-icons/radio.svg  |  15 -
 frontend/src/assets/img/app-icons/radio.webp | Bin 0 -> 20858 bytes
 frontend/src/config/apps.ts                  |   2 +-
 frontend/src/stores/radio.test.ts            | 279 ++++++++
 frontend/src/stores/radio.ts                 |  23 +-
 frontend/src/views/apps/RadioApp.vue         | 678 +++++++++----------
 6 files changed, 611 insertions(+), 386 deletions(-)
 delete mode 100644 frontend/src/assets/img/app-icons/radio.svg
 create mode 100644 frontend/src/assets/img/app-icons/radio.webp
 create mode 100644 frontend/src/stores/radio.test.ts

diff --git a/frontend/src/assets/img/app-icons/radio.svg b/frontend/src/assets/img/app-icons/radio.svg
deleted file mode 100644
index 001fab2..0000000
--- a/frontend/src/assets/img/app-icons/radio.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
-  <defs>
-    <linearGradient id="radio-bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#0a84ff"/>
-      <stop offset="1" stop-color="#0056b3"/>
-    </linearGradient>
-  </defs>
-  <rect width="120" height="120" rx="26" fill="url(#radio-bg)"/>
-  <g transform="translate(60 60)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round">
-    <path d="M0-10V-38"/>
-    <circle cx="0" cy="-40" r="3" fill="#fff" stroke="none"/>
-    <rect x="-22" y="-10" width="44" height="48" rx="6"/>
-    <path d="M-10 4H10M-10 12H10M-10 20H10M18-26c10 6 10 20 0 26M24-30c14 10 14 28 0 38"/>
-  </g>
-</svg>
diff --git a/frontend/src/assets/img/app-icons/radio.webp b/frontend/src/assets/img/app-icons/radio.webp
new file mode 100644
index 0000000000000000000000000000000000000000..bbce3fad008dd7e9847f2cc1fc18cb89171c2b77
GIT binary patch
literal 20858
zcmV()K;OSoNk&F;Q2+o}MM6+kP&goFQ2+qYWC5K4DgXii0zN$+jYOg$p{67fX{f*l
ziDNUwtW)~4Dcv6|-FevYKr2d==m^_s>uS?rAKqJbYqe+Qq@?mMi=P$oZ{<(iU-&$+
z_pkY0Zr*$Qzx%)NKagKG|L}VM{>}dH{@=K7>&N`>?moL;vp)bob3H|V$$#DdVeaex
z)BjKU4|QMGKg@sT|7ZT!<OBI%_rLp|*8lZC|NE-{dH<*X+uSetkNB_qUb>&R-wglT
zKjVJpdsct!_5lCO>H*YWAN@V?C($RxbaK+)YMP>a=kl-fe>MIr_gBDc+q?AO8|)YS
z&q80#|E1{v*iT>|=l|P(-1`;a^Y=gd9>AZ=f3bh!{`L7m^3(sX`)^6#SO4($8UBU+
z>;9*&N3gHnKV-k#(cPR?aL`6pKJ`fj2uOKvRxy!ylNPmBTVj-HCnV?+|DVwOwGxMd
zX-UJ%=Jb&29z`RYvFWP*JL^Dgc{B;g7#8sXlv^|@`hN(~*$lfP;p2=gEchXL#g28u
zWl2!^HbR#3Z@HYN<Yn0SH1byRDM8B{F(DRIa~d4iD(uPAf>J1y$^{SuCSkx0CNT(P
zt>jYReeG=R)BgCdrA7<$`;jJj2=$t=Iq{ONW0`n~KZ^}tGxefcJ(A!KoZ^Iy+Hx`=
z0vyPL@5H`-@@+3qq)X3O3pA3YL0oN{Av0uW2HD{XA^H|haeCwb^Wb>2u-MQr!F@{#
zbxJGxuXM7JEkiR{VdY<XC4*v#i@5p0)K{Dzn^u7elxk3Ur3*KSxORI>VZQ-+^Z$%0
zO^1IWu8lRu*6-oiVpga0(Nzk4-qW&r^JAw;R$W6`cRn&Jn}kni-IWydZq^ncSU+b%
ztpu*)RM=@R|LM<GzRUEvCqII1?h^eVdtDmv@X9q@-#<QQ`@^B-x>7Z&Qh~vh3;<dd
zE-4VwWZC0T_sNO^+9wd~s;n!kM0alK^!2j300x=^OMJS;f3$+7L7*wpYNLmZAE#{f
zMriHsuyXA5hT3xx_<f?@K_JG89H6RPf{ViThzMsU3+hnL%b@%}H&>iI&)p7X3P(zF
zU_H|CTY>x3<0OoO3c^i#S}+&ZYrs!bH_7i>jOB(0j6N_<X4QYz32)%|0iLyAZ#c{Y
zKiB`QtRA1<_1i0LOU+-E)JsnFU1kDd7b@!$K3s@q-lmh2T3M+(u{b|dN7qclv>@jk
zJT%WosB_0cktXp0d42~V=l$Pk%gACGNX<n2P@l@F4?4IO?j@O)jd2J{NL2Ro<0rS5
zmfKfvO**5+?P>h5&*b(n5|@kf1Dx>tfE){u*qx1zdpfgZk7Rj1WRt78ckn^xp#2zT
zWJRg2l`}xsTXwQGkJlkFmjY}u)D-!}cBk_Yy!f(57wn0GmjBW%YLW2S|AYGClrS|p
z6^Qd|K~Bm-AC<hOpt)i27VXnOpT!%nv8nHgx8cXC*{S3V>q}**2SA!2s9@|fw#?aC
zYEt`A*&L33KUAQ29+4kn{m{gZK>5i;DFY{NWtk)LE10073oa$*WIB87NkU*j6Z%62
z&q=-%3eKO4htrEXn|`a+?pQgEQTg3xv!|UtzZ!NP%O+W-Z1-1D8W!iD?f<424rCgO
z4G6t9w${|xYj@8$i(ty-1!9ZTKKk4z5bZ=TpWqtPM)aVmGaP<;8K=DROUJ@?JI-@Y
zy2K?6wEjLCeLzmM@+%$-36u=S*2$vO2Bou??0Hz#ml8W{I={ZxkvK}ozVcwWxs-6$
z9-{C%-q@Vvm5l4!({3diy!WPB#)?hYNAn~;hC0+H=8$K}@@>T%w3+SAcMuunDH!fF
zg?7?_9Z5CCfPnS~CStH_vS71N&2~V`HHwC#DW#pB+F#(`KSEL29XSY6UPZ`_X%V5M
z^sfy|pOEts^ZV!cM$te<ozUO>x*fUv67HO7sPT7$L86UJ_-@DZfC?AB4fXS%V+Zm%
zv(w4mfC3}i+OSz{bYc8@eKWwqrpW3IeKpUpt|1NCZq~jSAtgos@9D#%uLFQJ8eqTq
z4G%wDo+AQfz~>5y2!5KM37-S>wAI&WpC8y1xNrAQ7dEGjIo{uO%ao_Qg&zB$JLBW;
zOPm{C{&i$>%XP=X`+CzwoF#o+F{H%86Jj+(K?~cnMv(26TBEZeZlOiFSU0pkXsj+}
zrnHQ>yV9-bXKFuCR;9OIFTQshn=ZT?XI<p~?yD|W2FpL)w(#a$89B~4hq+ynOmct8
z5RoOM=^O<Dm@pwpj?5fcxmGp;QHU&rTjGXQtQBhN5%sD%k~N$!mi8(38+=86kHIh~
zEX+P!r|HYw`G?K02oBcLF}!L?$}IRhvPeEM^_=<@5uXNrfLrigcs(~cQoHIy6_6vO
zU+z06&$*L2Sj|4f;)Yi|%hOh0K-AOvNRj(9I6;WGp3U1C<g%R)1Qai-WhH2ETu5Pv
z;V*d27RFr?J~C;`4wFkl1-ZOVU$r9EruU>nxz~{p+T%{H%L^eS(^rK<CNJVw{KiGL
zCQw`?JsXEFXBLNaMv?fz4T*FN)EdtDCW|Ot*x@>HidZ|f-{dC$j`B?p^<v@6&UQrJ
zckAMCByFQ3?U~`;@?%Hq?T9q1q|im6EE+L-P2kSV>BlJbr_{ECAAjK7=Rb+BH+t70
zNG!kmzrZCdfG%l`$D{E3S~mTmNsT=~{3!kLjxIRy<bVZOo?F5#^08n8_%Nh*0}`;#
zjjrC|B*X4>I1~C^JA9de2H$q^@?2;?apcDvRx?3omn<g*;P0PfrTd`H+Z5%{FHh~A
zmvI9CVzQX=JRw+=22%B7yGUA&pVm)<xjx`Y;~KyIz52HH`VYG7U<iT7aj`im#d7<t
zPF*uEMbbfQU$~ccgb5waRLIouS;90qg}tQxs3UpYdO@i{=hZ-G*OjXGAOHXV|Nq)p
z2R$0uk>`}6*b6G3@`W8@t@Ul6`=g?|2aPaws4Zg_01BY>|Nr;}0DD6ZZ_f4*|NsC0
z|NsC0HB@7ZB%3gMSTQi!HAKy^j)`V|&5Ge2(iKiHI|hypSgT~+*j{<yqxwS8_^ilP
zaXHi*0)Os8I=}PX|NsC0|9O+28?KOHbq$E8PEXzjHW#4=YTXh}$*TmB#(pzP=qkP-
z&@wVi1B<Y;(}+V9gogbtF8gwT_?Hx?oa8=z8<_nW*HT&=2Y>(ahF8aVO#QL{|NBq>
z|Nr=(K`<p)2nJ664d>@!I+IpvzxPWWSU!fFI6#23s?{-VmV?=DU&}KAS4?MSxn@Pz
z6XYi?y~mZOHQZe-Dz@Q5#|f-A)A-j(XP<9Hke24wh`tRUn#ikHw5Fg`4M<xs;-lV=
zlN#8fR}~NCQJe;P;@dQ>??{NKl_hx|Vgvy!-)Q+2r)}bHCrgPZe^xCl)Oo&H!)_a{
zAxx%i5V;`Qx^)r0ejy~`V-}qI4_vaiO(mGFdz4@Fr)*)+{uECV5QUO$+3S4nfBcx)
z*Kkk#?EQTzJ!Ru60Qw&>g=@Y&9J-6*&!vtW<7Tw|=Ny>0nL={tWVDJs>ZXMz$Y&Cq
zv3iaWHqQcBd@V6&CfbhT&b#3e(c}TwG%LRaKUP2g{rq*wA(E=GE*I86|B-Sw7fdmx
zejRg>)*P~AgHpP_M1QURnU5A1`)alCcm2~A`NG=I+Ngn~o^HGD8ZMQ6E~{pFUytmB
zf798&E;;!B;Z33y2|pI%_F4{BwL7TQVznp20zZ<c?Ps^_{m1+~(Jhi(TIlW_U-s$&
zmG@I-{ESQ=;upG{kswrWtb{ALKlwJLax;Jb(*OYe_%rVR_;~-GKj(?Cb!WR~4=Gy)
zZL;1UU`tj!-MbivWNqLTSB92xY##A8R&DxiEg<5Jt%V?w005ICD{xsm-ZLzQnA{Qq
zPlr}FF7|+R;0nek(FJgcGCYq4I2_Zo&*?=bcrHHW3C7pD?i4U|g|Z_=00-CBqeOMp
z%^(TaUI6!<c3^zHDLw=Vxw4SYB>lT9sq3+T)I~%q#KOn`@s$t++`PuwH<`NkT+S3Y
zG;Wn}CC8HU<u-0oAd}1u^Gz>b^Zp^x7>Q52L&)9l%r7g}wAP-;J{Xz?AxRtH^Hl>b
z6`qKxCZMT#lSj0+s<l77^8Jg|N00{oDUO^{IWjzwPq*B1WO$_sd0iYH`@?|idp?S8
zxQHZa93G-fbX;3)V;>NyY3{oN9=WbcowtRgajj7VVsPIcE=`LE^z@ox1q3;BO2s?Z
zr&&PJx2<MD9+Z4Cs}8|L;isCU(trRvG>#2p4{4|~%xY^{gR5Q!K8#<dk*|S+;m$@!
zZG1=vN#(?HlN>L8>?f&o40w(PFFguYw^sf*QwdAs<m_9%0@c=x?2lHw+OZ1n<aRB>
zt}9im`ii;G$f#w!HfbBW*gddu@*N&7dpGXnGect)+4`Z`Tr4v3xoK8l<;e8)V0ING
zi)e6?rfV-PjmQB|%u5^u*#Zu{T9s8s%Z6xQT6bc`#ig2>J1p_Z*;_I&6SN(`fLA2k
zZkUsV&2cXXMkRG6u$14Ob^L2>y|bT1vfu7-uPn8G0-Gv6uZECB5p&3c1^#{KutZ^-
z?S?=A0pBLo!CSS`0&U7VCK#X;rmOwyh8bNGqNT9yki^#Fq%Gkui(`w+n!%tzfAH85
z;g;yiuIGl`{K^eke-ylSUtZr$ypZa-Q3oW|scRBZx>#X_1px>^*5RGJX}?}#K!wsR
zY|W*S8<yWAgo@QM%RAFUaD)YbdwKL1<C;3`FOI-ok(h{4fX=Qfv0>w(ro6z-fj@!#
zj}8Y(5>9jRMqZKL)Qc_~dmJF9L_Xu|cAi|Vd?4WQ7E=}^oRMw>&%=WuB(l2|=S6al
z;M_;cgW^++s57VoP`2)%PdhHd(}5~EbsPcy=v)=G4nl9Vb^aS=E|cu)m$}eI{W00$
zE++kx6>dPn@qha>fQGt~DKbIz`;h`yk+2?{Um=oY2?zD?ala(!UV^1o3NsF9X=+@l
zf-(>OE_D*duq1cn1eSZLQ|yy^GJ19<&5gY`3eux9x;JMOh&feqxn_d6^j11W7bbT!
zMzH8w@f2Ql$!&!*yjBF<gqB+1LEvQoH^slJYJd%N%kacTbQ}l-9FRT9$6Vls)jWA6
z0dfRdRr=a*yL6@XnEPr!RiF>k3J73f>g*lZYyE}zg5WD#wVm}aejei$d1jWExgOGm
zPf(wLmra;)I!!q@yt(uqAH|*7x(0hZ^i;zmpD~!!8|h&dwk`dBv$np1e*s;?)-ofd
za}!{v>`2~6FY_z<93ue#4G3zLXIN~X#T$Ex2G%RRI1!S~fhTEGEE0aq!%2D%O7W9d
zS>r~@R$$g$%+-$6`%RbPf@+&C%Uh&v3r6L{bxr}j7p#!da$)muY(ci=J5Mi;=VdUr
z`4teq^rXr)tCAgwIzX=hz)B|t+{)05n<=rIFc8)52ZWabNu$ikb>OSyNk35?Wme0y
zm&&<!_Hg3k*%V&NFX-md7Y?|rd$P1}RlUoptrkFlj*&MiP@j<)4gvBSA(dX}pXx_t
z8;z0R#&p|3-oXS}*u9DK&}8N;Q5rqLz9!_4qYA{%U&ux}qd-k;EDHIUe3AU_%jCzU
z)tcKR&lOjlqJiZC`-E$-Y(8ouzB-c+NGKUwAEcD9Uu<_X^1+u3?pd9Wn2Fahgf+Q6
zBRq9b4Bf38D{VpNz1CJ8cKVkoi|<wlXQ$k;W)E_!btNLHI#{;|cj81b6<+{su+~j2
z*E{EHPa4revlrf3cBCKg6g5^{@J84+r@yU3A%iABhE8T&pV&BdtlJty&!L*#E5;0d
z&YQ7nW|n;tQYQ8sB${q1;a^SMkGl%q?1~jHKXZbaw;AGJc+~0x(n{%6S(M|l2}-MW
zky5kv6B;<<0l%eICcoR%u=U5i5|*ot3c0r(%P^Z56q|w#YUwdg4Q19auU2F@BCPIi
zPGiabiB9lFD1~D+vwo`)hZ1&Is|f>vLFm{hCh?(fPWajWtxsQy7WCq4TE#N9k5Xl6
zwVLE~vn^g>ctxRac4dK&S5I($&2_JeL>I*wW!=K47db(+>-b5J>xy5)WVU0sPwVhK
zO71D~rn8r$ZUXU8`PAxQCdCaSZpkG)+d3^+M+!DVlvNb6ObOCc2zaIoC-}_S15QD5
z4A#LC#d=b2Uwnr8Udsxxr_4!kYgc6Kj+Pw{6MW>*%HtLPfsYx+<@mQRz)<4aE5!lK
zVnj>53AXG(Ey%61{!VjEyu&JR(mo`xJ@QKGk9pA$xxI%xrjNq^8tifxHeeW}S;s$5
z+R|h^4E_3XAL2B&W=+t3IEIckW4H|6K&W|x6-ZG2lg1%HN}HGr69r!EU-~$2p#?nx
ztgTKyY3rH~m3r-n!aAAjQ}*h8XX!G@B-t(CmYrr_Xb|p@A{;Hrf;V?SadellmJOD)
z>aTMsAe#x>^n&1!iaBf%K4HA|MI1lsX3#r`oxY3}?kxkC@0rdXot8vcdsdN(hm4DB
z<b1csi9ys4PAdN0O#S;hfHtsQj?#zoYWq4lHp5_lOFli)-34jxGaK39yFtNUn3^=%
z;98S%>r0QB!z=_{S}{5{V+fByhIzmp!4fMH>}3gvo0P_Bi{L9G+mDXds+bDQF3Lyz
zwE4_(5y!pT@11;h8>moaB%vFdhZ-zIb$>%OF;TW~GP%gfW6kpHZs;FQ7ba~oFU1g#
z6ecK-AFNL(wYuFxD1h;};wJfp67?dl){?xH^qjzZVj_1^!Yt5A%+G+)-Z27^;Lujf
zrHn7I;*?1p>9eWt<aTe@&$7IKWTMpIxg%U7LMz$t{;73SU!+pFhhEuJ`q~CtG562D
zz@QC=J>QMF&`M_q^B6}F?epvILHGeW>G2BPA~#SO7^D*E3pO5wH&o{M&9vS>C^{Y@
z-c#s?F0E%Wv@FgEQdlqja$4kMj>bR1lu4&ylj~)8(w6z`fZ#T}O8B!J6|lbL|D2@J
z?5L?nOy>!Pr9ZSq>!f_mCP&HK9aE;~UqKVt^gO*<LfWexk;V09JtM#VH6ru$9lETy
z{KhS1cBx-e4_6IWx)zBY%}6C?qAXWMS?b{8hCO~)#rgTXyhzK$$yrmpoObiZ&;6j}
zPyW~Tu+`5WNLE`gC{A|I5cL9ac!l-i58gM=(HlEG+LZ@kqrxzb1g>E(oB_N1U=^5x
z$(*AKvPB=#*exvO<Ud%biH^@f%PaU>TcttNgAl(is`ybZDKNSrnqX|gauI00Do$KL
z!X%U|x7*3h&-m9<@F)mU{J!74a}>_y79O5p@%iia2N3Qahp*4{6;F=kcpg^5vhPNX
zd{{lp7A^9+FCySnxGsR+L}jxWx+h|@zx+}%(u)Suz#OQps5gT4+flFIyEq?|ABz(-
zqY3Z0;G5r}et1e2N^9qHX^$_QB<*T@sQVDt*d~Ud5MA1LwrG7D$cV=9O<Sp1WZlFQ
z?$Pn3=osXGW~2Qe{cbtUTzIUGE*d|sl@rz@K*kLJp5zO3uVA+@V0ob6!HpR|wFzR;
zS&{b2=qkneQt}c8x^-!$mD(AMDzl8<xgbN%tf~ukz!amPyU>rjJ15;*jZ)-Jx)CQI
zTbgJd6tdakw`PsGHc?A9Mj5Ynt&S9_G9@7-qIu!%!&1VPc@KsRn4}H}3wwgfKBo1>
zOFPZqOn16cE|%2_3FDRWuNw7=kgFj+1VF=K1*b$`_GbFh707**w&WfO7u*><-65zN
z{9u~9F9*goyE4Tc8RL2!6%g8~UQ9`L*Ml_^brYDVP~g=8e23T7xt6iux#LVN*^RY^
z1n8^vu|qR^D^KAzx$jJ4(j7Z4mw<yB({G4??TGPdLD#ze-q4n|Zma-N2QHsI?G!bO
zBg}uxK31nV;b;3h?NJ=>wn04)8<b;#HIjg(Tm`*Y?N+bi@JH5VRq)k%vLtms2-_Yi
z_MyH<)0T(7RdxXHgW8a59l$dXbw|I9TWNc|scvmSc&o@q94S`l_Nt&wEzl{XKcYjU
z!Wz_8%|R1~2vRr+X@TLqov{&Dmg4(HN+3d1A|lidot@YrA6K3%)*x>VDS)P@A~b5;
zJ;s$vp5iR+e<c5$A{GDgPf?xz&4^*A#!d_n_5Qr2BJAG2^qS$RiOV#U8aS=`#Kh<{
z`5jFaf245vJwxN$4$Q~DXCHI<)mhfAfME?n&XR~x<A{CzVDu3%Kem^_=nUbyD)6lw
z8(=Ceox8=h8#h@EKq1I?Rc@H=`-z$sy&ivl8b$d;LFItt;T*##D++xs3CV^x#8YGq
z{Fb<4S;t<Idb{2SR(KEg6ID;JlQ^_}svin{@;7&V>PG?%>>6s}Q~lc5z}s?FM>ksE
z`45Rxr7mkIZyyUmR$Jn9Ayhtf{S>%kfdL8^<tuWAb+-LO(2)HvHBjYWYwUMH)g!|B
zeZNpTk*n|$nGq-E+ijn3@|x~&tBDI+E6?p}BR;#wr&$}A>dkxIYP$B4C1FS>+spb;
zR>4}eW1;6wY|=_T4=d>TiNIEQ`VNJfEHf=B-nv_oQKIuyZNOAyl)_*U<JH)V3>@1x
zZ{k+#)7dT0YqiNKK{|tjAM-I55{cJrZ*2YV-XMs|y*If23#}9JE49>~e)_okut*~0
zuuJ}!Hl;!Ie);s?btmt9Ym&#uQU0QRCUb0BYH?!dxSMB|!6MUBP<Tma{7JnYeCFqA
zSxpDptKnv>H(6pOdCfg$2d<Mu%{cX6sT<H;_KBJggZA?(Z_q>@4ILZr-xV{yO?90L
z=VpfZFAJ8cKSCSMOGNaojrAz<K_&SmS|H>(N78eN0kR~EoQ>D85fz5iG5+1OU&C)_
z0o>hv@|<Ow>5^Y4atRQ?&=Sg1b1$iE(6)R@fYK^6WTuXq7`Rop54jK(NCI@lE>J@K
z$m0gen!e-sZu75&(K8BSdMCr>6}WEvBk9hEp))G*3_)RgbXujW&4uz#npVO^As1`+
z4?>Jm^>#v-rQC`;yUo{Y$LHIYL+0!`FIWypY3>2+UGz(?0wJ{1^@z|44mTWQUd2Ml
zLsNedp9znQ`NC}!od^#WxEiDTjQuY{5B?HE9Z@3dPlcmb14t&&xv7@oF(yGZL-pZ<
z+Eu<c(p3NE`+sMo(Liu%wd1qzi1!cdSmrkv))Eef=r`wrSX+6Mx~?YGGL6-*5@%5T
z({J-@xA&_&M5Ox+rNg5~6g+CbfiH8g<lA}-nEN*kRLIR;?jeW@_Tt3#i!``UQnKsx
zh%@yRb_?q*85&Zw5`7vOKP$S!MOtHl3B%)E+6SW&Ez<2Gu{LoDlB|>PhqONGO13f6
z7_ew(N~h3!h?wa^mc&5{S6hOjLpt{uy=uV7Bl7esY&JeH%*Z|M)|rs(dK<e~H*rP|
z7}_J;N)<Fp0cQ6#QH{8*9%}^#(seRZ`COIKPmL6-eNj$f7p{Y}XvFXWmnj*c!voTc
zO(Pl$BW^4wKo+=GlDj1X-ek;P8;&LPlD!JSx|d+asCI>Z7RLG~Qu)kAAr&=i?t;DX
zkj9>(Hh@O2ulImdV$yl#d4R^?fxC?ET3WgSqeQQws$8x^cIU+fkCT3kEQ><&1ZaYZ
ze#2S_C=xnCK3GTyT$6xs?QhIezmD+Fo^Dd>3hM6se%F3-m)%yrehgih;27cy+>zW_
zgcI9tCjZg7@#7ISw?IeOd@l&|3v5yR`b_V^<=)>{J>nqd^Tn9&<M6G8Uhe_YWN)JZ
zVzW+hXH0YM3ZL?YUXn&nTRecoHDJGn=*#a?^m$<~O^mbfZNo89lnsr#wn;dyY)Ja|
zAvhVZ22UFA%YbWm?OG`qdQsZA9^|XAvcpuwpK_U5wx8NYT<k@B&h>2HJ%2-fW?Zd5
z*FU6sAt!)i(b$mu)kWKiLI_UDi8x!9`**D!;%%+36}qGDx{{%;ruooomZ}WIB{R_g
z(FB}1py#8`u|rPoAz;}rs{yw4EVFSH3N<3otBmdBvF^!GBn&;ygq?yzwZLI@smnIe
z1cuTTPsKuy!@uA&)ve$mvB!K{;2zNM;~3Z~)LAG0i9;cai*M5;R!|PX#}rgHi5NpR
z6geaJAx)N3)dOjox`yXD)8-zEb#!)f;Md=|cKszTGsXNWv>`{PI-<YQ6U?mI-@HJ-
zw(VDsVVYH%o4@r3k>{5>M9FG*nUzh;f4$cXb6X|gdvCy{DwsM!9QFSz2F~Ztk8gg@
z98W!DCw@a&J3-sa^%w&*&YVFh<HT(9XI;PA@fZKc&L_kd;02um*;ahSA}z7_&>f?}
z(RFaZY8>M*wQWyMqjIjpBxrfshBp01PqlHGrq-3=G9@K^61JvFt5u&AweXoTZ-j)O
zhjhaGflWa0@VGNW)Vj`uv~*nls0tNtd(Iz7STBl_O8bEExbSyYw#nuGjBUZiI5G<V
z3%`*LBBmty?E9wXXsSOc3T<XDZ&P!&IoyMWx_>f3C6DJ<k*Pp80k@~A@p}>_eskr<
zuP$K1Tp~)(b0i~Tdh3d%>3&lo4I<3vHcIA$*GADrZ}Cg}^SV1-7Btd1SjAA>)WAe|
z&UNV9?x{I^F}|GxN_+?xs+&M;5gM$u+rl;Daf!M_<cps1+yd{=^3bp)RXmD^>$Kvm
zed-N-VQV<=@7C9`p1d&{88f}Nxz@YBrqM8m_v()o(-FboMXW~zF)$z*;RFtJY*idU
z><W@E{xur0&24%L)b(HON+M~&J<$^k9_ez`u}mb_{qoeSHr!-miVuUCL?G(gF=y|!
z`tnD&q&U$dJ9pa#u%*MIFkg7n0dl0g9Xa5JEQ(_VX3<h*A$KO__C$L6VH6*pb^R<<
zEl!_ltk}zb1V0p;opN?~tF=;*7z|JUlFS2yJkBRTVkDZNP|z@mp^St^Oy$EDg<iGF
z%TzT*r;tVYHb<UHT>-Pw_R%^`%@Az(IXp(x(_Bk(00JSU4BiShs?0-1*8)jznr8RU
z^?od9al2Q*;vq3Ijj;8-**h;NK}U^e^LaQ4jM$x~1R-c7zk^h%thruNp}6-6$i&O&
z?T87N{LGU2)J5eG{0Z&823O@3d^fm&yQ=Glc?sy<{yP$_qO|S!-Fvlb+_pfl#T}Ns
zk{;18nNO8!RjjHXpV9o*0FY;cJv*IigUlUbp)V~fPyqbN=vvpB0KOkGorj98HGBn&
zx4tI*1E2JSUQG-kk*Xd?=xvRemiTjGqbud_{1`Bdel35mw4jK;8+<qe3Bn7N`pAs;
zy=wlW8Tyy7Ng;OOh!Ob!L&y#fp$p&(eSgkmS9LhP0e_$(^V?_%qol2=*Gq_y@+)mi
z^cf(OR!~s6wP{`>I~UXAXRjli!QI(<CPc$HrCcKtFekURs16{`cw?mrM2PWnEX0?u
zv+C;p0SMP(Pt#`A;^j{!AKa9v5QXM4wq1}9>ALd5xeZOP(@igloTXf)0q+Qg1aUDN
z)Il5!$sQ~V-JPsgujWpy%ybWVyx%S0$qa9NY)=N_Q0gRgI_4-DHVI>niVZ6)Kp9?_
zqMo7~;KJ$0Ua84j)*p=!E+;Q{GUc|zv0Wz8opY}IAHZY7u8;1&=cWhHQ@^MnS(*Y1
zSOL$7JuqTVQ@~WM)uPzz@hTf_mkprr(l`;tE7w?#ZO|*m(L50icn_GFpVDNO-PG%+
zGui+NbbE5B(Gj7>YS_YV12G>9BK~*7qor-3*7=@r!|Vy8rXTa~h+yWwj&3$p9jA}D
zV9yrR$0!XFEtN`0fKRcx_6Fxg__dw9ssiHur>{25TnhK6HmO!X?JCGf$tM2^o8_ll
z^=OJ`_bWJFK6#|+zi(xka2uPOc!rx025P~mf0oi3qKR^l?U9ufaAKW{-;hh00u9TR
z_D3KtbHw{wOv#xR5W~)vC<Zar4FjjXNQP}&DixV05?J=@vuNGaq-q9S{XczNB$*Vm
z+E$zVMY0+*$#_9wMN4CgfCs`6M<KGuuC(#U-CwLWSXcgxD4(TXKRo4e4qZBbyT(B>
zsAS1(&Pw|z+{pTPWken(fwK$`%oXT(xGF&#{;(`U>1Fy^Ww5NS!s{m`%+N&pkeS0x
zU9)tbU?ke4%l1Cq3xEF$qYfo9n#a)a(!O&O&ETT$gqm(=za5-curBNhkV6;5D1}!V
zg=!gS$pOn3t~xjfoa!5+7<Mm0h_+x{rV@&FHA-nLJ2VEs*{(+f7-V4b6=msMMCrSO
zYLi9Fq-n++Xz&uJ@=*BR-nNH3<|h3MB<n3+Tg#aDxJ~+^qq<Le7TK154Qr<_1}$eC
zyugdCo{lxlFA^D8AR=<DBs*6l^Q76r7nKYAR4hS0>?tm)&s^S+Nm|V;C5f!l9_rs8
zADp_Y37SivKV?N-?Z2a6BCuwMkr#wud(+R@X6|e*%b6R=p=G8hn-q}v2MD`%@CJz<
zb1#tHPyep#_;Bv4VU^isJr-MD=H+La1lw}t?>Ul+XqEV}q>}f^c`j4?Y0pYD{`cem
zm1Wd|Ni3qZ1?<VaPqAe)f{Ok&o5PK3Kl!^uZm#&xoO)NI(Sn~1yxhK548(+ru~duj
zc_B{Ql*l&HslWJm8CI}vCl~0?z+f48_UrPdhCZ+VL?`z*M^~pVB409<<a~U{*)rsq
z*@7*K6T{xQ9p~11la_S-GY`F0?((;tQf`Q$#)L*0NBCPy_6+AQ4jW`nPX1?xh`I^~
z9$q|3zR)1kXPZgQDM#^GAE%T*xu5FfNFUhCpRlLRmayG}?S9|zVEqbcRh$uf^5*mY
zm?3oy$O=u#P#B=LlYg9PLZyBXtPNn{#I7+qR5F38GJvut0!KhuypD|FpgJ8S({`oX
zL6wV;$9&CS%vfIwsO#FiBX(V4Cg&rH9afv)h3NS;n_3}h4o||;xg?rNm8Ey##Raq&
z?WB9m9cSMM$8^*tjOI?Z`Ot+$S*kwO(>(e<Dn+rb{#p|={H2}zExf*Az)cYB*M1$V
zq@PnPNI=qffDDe_*!8jUXg%-y4l#fl0c!^JXxV2mZ->?`2!7r);X4HF^D`nWPc?)~
ze^J+3{@o-O>*vaw8OC3zl{Ob+gY&YeF-9L**mWF(*A$93%p-|5A+XGxJ?Tx{0AnMi
z29e2{z=$mq_x^n6UAY|&$WCR<aL~{EWoy|D*L^P`%|l%FMO%ISte!=>A9}*|d3^v$
zQ*j{tYV*|h*z5!7uXH3Rw~lihMb0Ne+wUO&p!j-QmesJ<7^pHqaR61&J+$maVgx(b
z#a_5}tmCQgAqjh-G)#(X6fHTxV%=+h`5-yl8(&f60ycO|SJrsRguk9b6@8WK{s_D6
zhbOTLJVrTa&qJBsu<mYF)M}4TTOyA9PG?Qh5g(fi<59S4dc_KATc}Rdgy+nGL`(ck
zX96hI6HiAF5Qt;b0Jjo~doPxHZY9G)P_Ue~-Kt~>jNnz^MSmCO7<2%vQ>q}Xzbd`;
zkOqyF*5NzD2^oKv$E=Bd&|$(8t}Q$Q2l6_tIOgT!MeR#)yC%KCn<*$11&30o8_E20
zs9AFlg#$Rkj7;~RV`~*jJ~)PTR>I{_AZaiAKN})ourU~S<Zg<{8>SK*Es|zN2|y6~
zpmtGvD(~x~Ec6#7cnOp0qXOubviyD7nEv!WXNy_V=(<3ZC)Gau;vYaj>Ovx5L@OPM
z%iL4EAkOl)7iXOo_&K(API1OtG*@9jC7_gQh{(%WWnN*Hx#3uaj5TBqK0p5jt_IAe
z3{Lo{3M(j58Vlrw3{S$_t4Ni#stMjp8$Ka=`_=OJMe1=5!Z*Jo+Zo??3OYmW{b<9;
zQ2)1q)U(ttXe6Lpn0S<UiS+|y=;f=zbkw`SOHxB$BN?<2bN^tG7m&AzUIDwS!uk?-
z1>batL}-&<ck#WjGxWja?Ut0v>7Cb9Xd);v5IPMjFHn@wAqCSA{$2gQNEo-QO!2h=
z2G@O47YLjU-zAxXY4(IiC3_IBduJBXu%lDX%2cHZuzQ||U-#P$ucEmZeZW#{E`xKy
z3HO4JZ#VdlLHTK247U~s#9ici=R(=C?I>4bRrQ$)TO}eC4@ftz1!Yg0!w7BJhSyD`
zn<LPx!)R@aOw18trQ&kobP*yJCw<&7x*W+t)=J&<|LZnVCaH%|UndW2JNg#GDI9_O
zA&Le1^E)z$RH#;4miUj0yD!sD&hN*~6pz$}nQ89U>QaB<YiCrjzs`9kt*UkLlvJmq
z$A~^49G2_H^&25AE-zh(1PWav7amK}kJhGmZ%VVWl}U-}sM^0Smk;Tu=T2SnQ$}af
zPoUiy3i&pp$-OxiuhQXEpS%>x<*u&C6m2c(O)qby$j<}YxPb2(6Rf$Q75}N{BixaX
zHcxx)<N!eAiwya$WFI_l94}-sY8I+jAHNznRXf^=j`nqDxJAZzL=%DMLB%t~)paUj
zbr=<$aMe<zEFhB&_=@uCRd0>gV{-+0QX@mNW|=)4(N9`)SU0w~5RxI|fJB~|vl~@`
z)u!I=@X!2sXy?2JbTXyS;VKJEdWMf(P5dye5>Zf4t@5(L2!mk7XL?pd>aSrpO(Lc8
zN3&ADd6j14moJVzPRh=P1vk(jY2*dm_)<g$?`W1q5J}4GP8Sllc%<AJXaa!j#4Lij
z{rY=fkqjB$K8jhF6`04Z!;ONI0UYH^>gmZmPCkFsE6&Jsog<$M1`Bz=KaQHL=L^-O
z&%Fua&?hja9bOeq*8mFP2VZ(1Mcfv&lELeJE^k(#(|kxr5@Ne`#eLkLfnJ|47Hd%D
zd`>%L>xoaf$&J|7X1lpUa|G*$Ky;WDTJV%Z+;JjR6sNuPc`3kR+`XSsN01f|=7-HO
z&*7|z><gQd)OfvHfNDQ}ZS|jmz%!}cMnAx9v-9LU-~ZK`+kUU<2mH#t^|5bAM^=2}
zN%UqwiaI-}?Z^<&3sz|=^c&{<>TV$&cIr&oxcI34dZUx@{i8FEtxo1gFG#JLtaiRo
zbq}L33mY&mQ%PQlr7Q%VY4;YyfsvVFI6LLFV2>u$l)hxS9LgI2Y-ce9A;dWYt(%?C
zicd640^JK73Z7(iOyl^E5YIArC<?hG&}9Gd5Z-vLes8%)J=j2fH*`$qOZys=ospl?
z-XTN{D&k{25#51~gjQzad`ZghP)u(_5#I0TAL^;dokW++31G29pbZ}_9^J3~5(oqi
zo%}Jl+L^joJpcgHMVFlD@rfa`lcoXUy{~F?E^SWJVG+II?q(l@nl-JF#Z{(J4~lHl
zkiHaIdA$y^yaQQJ^x>S|(PHeSu_N;(R|_)nBwkPeZE}X6KAkHS1s4xHF)sR0?gbnZ
zbOUYEW5Wxeg+H>KX}5bg)}v=n^^b;!^&j`L(vn|}VvzTk!dTbC@$;O*oxKejMH4-u
zvI(NG$0R6}D_`u+ePpmNK<cq-R=X+a`sZ<LFI17uA@SQbU=dpQ;ez)4_p5TV$mnQW
z8{-(gm89@b0X?AYSJg{K>8@mAyb4#3x&e;$g-p&NtQR`s-->{611OE=3jERE70>(S
zoAXvDOEM7L>K3>!bMEI;P4)73C*zu>Q@Zpxbw}8-C6Uh<Lu4G%P78jTzt8pHi(60H
zN?u7DvO@~8Cs%7qto~X&G4*wT6|io`^t^%bV;*Nh-^5tZvVGn`GD)cpx!uV3xBri)
zYvos3{Gkax9xfp&N#OeCnU8lp>CA-ZvfVwN(E$NnTq6l&I(TJ9Eo`lfjwF-@VWOO|
zmWwSS0RVcRt@F!Q;)WT2c&$qSeBTv00ad#=iw&ji8VcI;J-2CtL+a0}4%znT_A<X`
zQwN|ih)ALvNtVEthJ!XQ`%b-HHseAz;RAX_$L3xd*f+R@C4Ci!dbYMqRf-3l<Rk5?
zsfFUXzXK5XcZeq7QN&>mhL!a6=gG<o5Jq|=AH8!nH{XzR47U3h{<EdvN1>kneWs7I
zO{6h`CPue>n!s!pba1dX8N=`vBs#J`lcgr+fYK#=F~|*48ZP|N1Y$bzuh0#AC@Ns|
zQ0E40<PCEzaEb6uEnS*EM1VbX<WPP6t!%HOK9l_H7LD%`+YI_?m5~H1hntZDFiVkH
zuAQ?Wh(iit7Q6T=gdTL?<Na5x%1CREOtBF34aV$k$cdRlTMHTYLf8o#uZj{Gp93n9
z(fOC49DA3}r7Wf9@N&mfQVAU;&Tel@+YXy0)lbB!l*&nQ-C`Y`A$EEhtVZvlXWNvh
zO7kq3mw3!&Nejp=y6QvE6&dqT=U;x7ExGL+d_O2v3JSYf7nV`MkJV&&bWQk7qGv`#
z)q>_nHqby7N3m)-(T*0B!w;KG5(ZHIQmGtX-6ch4dDB?JJKrT|ndM_L8y`=wCO|jy
z)6l8@ih|(+NU3*9Ecvn_d5gu6=5ite@VpF214>T`;Jst&W7iI_{<bNQrT!2fx;)lM
zevFlIhrln#JtGdUTrO?r$@{FfISOl+WTSixY_hh=BRAh*Pa{>T<3q=7;8ruFACWdj
zSR?E0Tk^mL@E?Xw=z@yq)Heb~+?@zhtbr3LT%V!=!3@)FTHqYbxfEKT*!sEy9z)RA
z`kmuA7*0z=>QRpWR4<PWHEi>i@chNoSzu3u%5qItA}BmWqZuZLYn#M>R5-tVuEwY*
z9E=4l57g=Ae5PmrN)D^{<;DXj>1po}S`BJF<A2`ZnN8Bb5S*c{13H@FQ5RKh{jRlG
z%mA%HF*U}p%07aKHAU1H!xBPo^65`B3l<YP47A;nRjzd41kLfa<@-n!h7_HY*w-gt
zMZHyvM(vpLyI$*h-HZ&q%#&3-dk=s0<?~4;OE)3w#lpZfKJrBaf=6)Z3?%AUQ+k+4
zC$kn|<WD?qQ-x*V>))*^+Js>LT2}QCCw9(0bOJL*TL?8Yf{Ce?MnGBU+_cvYGobsk
zSo}#(JUDsCE<j8ldTmDCm}yu_9LDQqzB2dA0hJ?-hLG%FargB^a>=Mb-1u7XqS9a^
z;5pWYQ;oR^;K?}F*Tc{Fb+C<rDB9g&IDzOU7du?w60{&_a4v{VdpFG|L=-nDCVL<3
zWoO>cve!)8<x1B)fXZo4*8;ppp2n|ms`DQ-h<fJ5s;tuJ&ya6t!?P`^8%eCh$>*3l
z2I;?JB7AR5+{N?cphc{+;MG@%`j*Boy=X~uZ<g{rpEg8ynUWv}I@#yzfv3nBq|IbT
zsD4CA{McY4CT$Ubo?e7Q+QZ$Q$*Qy#2}$~MWazj7SYpX*SXlCc+eaG!c@ziU!A_I}
zI64Upvd^`PY@^z8b4SU`dB3{Y5l**KpS=$n(G|qyL>hv#b-GLQ-{a)nk2Z_U&cfSx
zhmb8c4DzbjepT+E`?K-8J{@JSU%4QJvXn$``_03XIuP~sGua5ijs*RL^OK^l-MWN?
zbwDXbRtdvsY4FaRkuF&lA4SB@A*5Tko1n($sz-~#l<38a5kv##2!7g<o{z+@*1XO-
zb;3R!5v^cf3C7=yaYWJ*L4U2_Dw#fzPsymdtE=ZF7`OyF)2S8fJ}D+SngXWAmsAV~
zN*uC1$z?0c7CBX;lFfpj1iVskCyjZhP;!T5DTT|;*gO%sr)fB$mf1z=*rXL&wB<d&
z04vcTK$MU?cPYsf3d;de&h=o7pj6JM*Ez!c0yNta%PdWlydgR2*HW;rG<GF<2o(Q3
zIY#6Gz@6Y8o>~j!|2jxL;082C=4T067&K?*++NUj8k8W1f%iElS4`9y%XD|xdm2jx
zIw+4>51NWIID)RFBQSUkHA2qDNPSbAB*YiKY;}CG(SC(oq_?~7q-GL--78+@7%9gw
z+TAZ$e%36Tzp_E`*BViYZ0J<M2sixsUN+nmdGe#CM+`h!(;L1ywqEo5PmtR%{w?p%
z1zp&Pj=g`>O<qG7c=+`~HkTI9ZABp^h2+WAz8j*R!zuP!k6Te#BLpq`fr?p{&4`gD
zCLGD7LM0Z2r&yaz(%@muAi_yq%FFzRMag|LeDxo+eB4d(m{}X#NkCUJEZf6#JGfGc
zRHltrgF8yPB@xP9d*EzbOT6L|>PoTOPj+NK==eM1AL%qX-o_#{E!$D<pnV+ugu8rs
zyu?lr@VV|VCo#^i9QlqotBKax*vwq9GF51TrN*cX&*dvXmycpSt(Zi(@ZrPFg_j^N
zMMqYYkFp2aiRfKcr>6#JHkL1AtvgCaeH5sX_%u65@O~~DJ<XONQ`|Op(I>Uo@~JmR
zX*z^$N>S#VBwS&JeVu?o-4g8Zy)aO$Vq-u><2E>-X?YrACV)!nNtkj`;!nD;$w+yd
z5DXzIY09;FtWRS!(MJRG(w_tt`ysNlQ#anhY+6tA46!^A-LAIZ+lb0)^x_(8z6v&f
z<6djBJyI~mlmY{^(4my|<Q#x`%!8JC28sBIfd}Zk!O9Z~AQIYIAjYy`s+?dpU`BL$
zMW8r<cy=Guja-w(yi(m~o3#t4pud9l5>DMeaBCi?;eY3P9vvM!X6lV?$}yo=tPLz#
zNDE2{aw9OXX>7Atjs1v!(I|!o>%2SCgP<m)K9l>9wu)sP&G%<voUh$}av+TA^q6&S
zeC-n_F;meiM29AG-n}t#-ZZH~iEbE$niQ8KLiWy4UhLnDH3<t9UEj7VpAy?x!&oJR
z-@uE{dXBnX^{Xu8E7bB;$mMqO`$&Gs>;NUG65#bmJ)Q%wn53^f6kN?vPVtMr+o==D
z@R@bZFk5Ug4#1>DiA;5>nw%>L)NQ>PaKdED(*-jR5X*s4cED%jj5A#WIioHW`Q|1Q
zC9{WaO5`G50ZRg8l-+3o=7kVuva1thvWN}MxTqc-s}>bd>AKrC7-iuQ%0@bu{_fJT
zgLoLo(f!NNCqDPQGbtc?LTW(sc<V|nFg9c#62FN~{utAOX*9w3WrFh>@J|**O^V(3
zU*V~Rt^IeXYSnn1ekg^i%05c!KuP7Ru~EM(!EA+9yPxij<`lTo@p~q*#_$`+R9q|O
zno<{=_hi^DM){j6Boaqa(y<#!AU1Mb-wtOp2wog%v(5ff1do9oFe!}?=K~5b4l8Tf
zul4gpwQP0DJTBj6W89z7x=Oeh3TEDgBf)C)uJ#vYO0qqxh6K_%S)6&f^cOpc=CdF2
z1npAx-GRK@8dY(ZAh-gz8j^$4A~+$3?f_SbI)h80;Pv1ZBL(q2C54_3cWXE+bVM`M
z-Ji&hAIxpN0=`*|_QbL{JuG|GPhx|Q!F5zE{B;(A(Q9T3NM>brBO5V1RclE9fHIk=
z!1yq~H$8!?(y%}_5{$!40bg}x0}_!)_oY&<YCQ?m<m8vm>1k$MH-3ox%U7IMv2^{|
zW)mEX^C$}Ap3yxUsDd;~3J(=uj6XEj88nL(E;0X;__BPEQJ#`&%qZ}xXpY9EgkW$*
z38CC2{tQf}S}3}1;q}Jbi)TIR-!ZS7>p>o~EW(9L^dHRYp38^untwZ%?>7jj<q8NT
zxvfDP!i5FLX!mgbk{a%@nx5T8+jD7FvJ%mM+`y>DSf+*ox8=!xsUG{*DBD9^<HFGr
z4o(rQ6|$FXHrjm>o^uTqj3m5f757@STdqKPCWO;s47_gD#hAw<F~N|F;Xo~pO^f}~
z-OTpk^WE0!Bvf%JUpE=iDgA?yHoadHZq-vnb9M#e#ncv$qI89a)1E_M2|!@FX+1TL
z(xf>FvE_SltT{5Y479dWXD8Vi@3{_494ku1BU09w>G7VbZK|qeNTLlFXpMUD)wTEa
zhkG-7mis|)E~45W=RZ4bw?3Y7rgNgs`0CH_!OK2h?y9wcJG6bhFb-Y{;Zir@Eca0C
zwq;fv*`JOp<HbE`nxNmx)fs<SeLA_>qeMc$RYkQxA7lAT!{(5W4nDA75jA|vu|*Xz
ztb8IVZI)DArT*$4a<+aHZ(Z3ex>@Se_Y3JrEP)Jp=-2aqcmfNDK~*0c{7*Sx8Qn(E
zxxSx85CT6l+#PCXkRJI55Zi6RgZlzUWVqeNmD!b9`n6a9iX-gjXFMw`?TTZEKxed@
zg=`}gr*43IXJ|(L(qCPDE5de#2r~bbBBquO;c*8*Y|5TZEh-)l7L0z=+AlG2{zCzB
zTJ56k-eS3gLhfxIYcB9{3ddEAluzcXUy+2zm{yByk@V87jwGO`L~l+B)D6F<%Y@@3
zW*wO4F{Gg>9YjguLhtfc8xzmdHK=tF6EQ%veApcZ`ah^+B3R%q2^FzjBQ5O~VdLx-
z9c(>6zQJ_-UYLn~aOqeA?W0-CFj6^|`O8)1{Bz9L?Qj#)++3G8uiV=$zA1BVA%_oc
z6G@TRfeJWwgKEu%f2*^+&!LYcHap!BGk#24*3P1Oh7;-c37Dv2bT@0@ng(@MSq4sA
zoHcYkYXK9JHnooId|lE@p&YxauOS$@SNxu8p~<!Hh>Pxcx4=URQ0<N$f@K_IR$UR7
zv{b9E+!Q+Qm-al`?G{t@3CwMxAAG12fZh>FYXg|Gkmb>TX#fmG1Z?Lk7Rh{`P3y<0
z4ic~gy2???yLo!@lAKV1HthI%qJn9dsZ2@ogm=O_1R$1xcvLzC3@W1=KDR)kC5DnV
zd(wESy$I@myLkv!<KcYVPm`%d7Fs%R9j7L;j_Cyz_3cP2X}M3T^R`i><`h>SA_zcH
z7@2t~11c}o(aIdXKR4-E(+JKvB0uL8t{a#y7;GoS=z!dWG)lT3!#B+!3_)p0Zv3cK
zN*pdIGn8J~ITrg+2=47-?35T{#6Nx&!`tl|0D4#0zjQM<i+z;Ye4_l0uZZ9N_P#cL
zQ{L~fd$E^N395@@eqV%XB!F=)tw9A}*<d@G%vJzy&JUF#CX{1+S;E||A6Q_Fr68!t
z9a%?A;u+;#g135j8jIDiUBr(mLR5JBK?uX-=lMVM(*QCLUP?L(j@WDnsx;i7Ttd2<
zR`u(+C{uErFT+_`P!Hj?Lm%nvCD_M4KoI})XTtSJwQf@4!Xa>rEa<|g;nJf6v*9~c
zs))Am&89u&jUxb8%Iwx7CE*Gs>kW~E4)CvKa$6AtyM+X~^#$uCu9B#Korx7TJM#)o
zsud586GWA3Zy4c3drm+*7iX%H-Z7rh4OfwG7LbDCGvNsp%b}R2{V|hLi=G<#H44GO
zdfH!@6jkN|I2qm5-1{k_Nlb@xZVG0C#9`jeCLX>(jFUlaEWDAVk;D2Eo8dv3NMv-o
ze&2qu3Eq0T>iiDVA0~-r$)!Nd=)Pr7$JziCr6O6Cw~B9_D(V)DXn|6TsL@~C!5NDZ
z@B(%vbevxRtE8=8GHnk#bvG^<^MN+MjXUz20S#R95pa3^<nwyBBZ%TqkZ{we0)~0=
zz98G^P4}qzPSWX+@=TH98&&`bBgB4>?VA>R@{qE55r<cIRvFI0*+!|3+8I>jn6q;C
z^IPkI#CeR8S4({vxdk1E_^w*gzw3hhGT6?;`^ropq>fDPGgZ(e@PISnGEeZjeP+Wa
zXV8t|12dY!-J2O%jx)oWmsC!4Ep<bS;c?C7zzhx8@^g1Ly!OGf94@+-RHjGjd5jPl
z5<zkx6$qSCCjfmWN3RaOoY@b1U$9}{XJqlZk%aAhf7M?ny@{{Tz^OyPOiZnG<bVzJ
zxW>XO*+Sr1Fo;SVnobA($r*qiY?m#(NgSH@RGd|O44R0-Lw{&^o%K#L1}saxs4CA{
z2U>{W0>4s-gD&0`)A9qNLq58Ejj=W)mYd^9Bnavc5x}my`Bm4A#_JmaS`nr0G|M@r
zx=bc0foygs%S{M)&t{enhJ=2^vQ?*$JZ}bX)Yok&C#I2-tRUvk4r@5X-n9unX8UM8
z$QB}HCOUpRW4@={whrUiUdnb1B?YYaHx8*iId)i-5e?>Fr=%%8T^W3inlXJkQ^Rf&
zUPiIJPZj<5*=-ZFa)qL#Om4MTinB_n5i|G=%|g`l;NiA**>2fzuVJaX9V3Ud(^f|d
zT63#Z2<NnJwzzg72GwD$gR9u5f5BWB1g|~2UsBnZXmf1Xh*OtBlA@uu6gmGqLfM@J
z{|3M-v=Uh(hofnshQQvG6;RUD_n4BT_hq|bw3RX>EL)4vnxK}cNDvdeI$#d|#ap&J
zSA-^q_O<~6KVHcyE1I+OAD}pNE%u_r*#t2aY%7$(uyvk8#9DG@emO5LSu&D>dRuas
z1{+Upsb4*fVF)5G>ttXX;%r#^9WnT|+fRT4KghgeRVZmu!=8t*R6I;WC$EFL-8?}k
zH160jECQeBYNcvhySEPHNM@*MYC*H2dn0c2d_1FNLz>QGb^I`V@G8#>JCYN>p}|sx
z0T<4|Fv4GH5kwFYbCL~lMP_E5P=bz(*9<3=;;!V|-)_0*^SP($`w~{Av@J^weS1ba
zl}HaEf#RFEUX9_oL2N)3-6$1144tSsVF6)w4(1j&^HGN7o9AJK{?y^U)nTHW9Vy2D
z=RS`*KS*BYL`NB?&>)rY3ltR~za)M$#ioV8dkiAc0B$%5VfwzKXp570*Y^K+!i2t)
zOJ$0T7Bg6Otv}TEtiCx>`E6Yv(_*ulp><oZ9kez|GNdv*!Q6b?WedaHL}9Uuveh)x
zXiX|E-aPg4p&aDH&$2e+6)rit!P-)nz&yotMKE{fJ(EEVgzTJepd)8+gz~Q**j}E0
z<2au=4h?_dc-P_JVVDvPIEL@L=|kcs{=wg^#vBnV!Xm`OP|(es+6CWU#J3)9Sswu%
zv+=h{Hm``0jeJyo9y(bTdo@-biHU0H68Bdq5+6#>9&$42vDx*ga|me|^Ix{fcu8MU
zh<?t&|IF;3mI<JN?P|Dh8pZHX)*Hu@V{?$<7>(}$z>O<zD~M&#G|+Ks;=yI9N_jX>
zLBbrL0P4syZ+dO5N5IAT29j>TEH{dm<w&0acD?R)9BIs3Vc2B<1yfY;qLqc@I^F@)
zMjr4XA@3Idu~AKi^xLsBgSNekXsSPNnwU$iS8)m|u*w$W%*QRbgG1HfAIfmOw5vGS
zBZ^>PO`4f^T?EimQb@?InW2r%zp!@IW(DnJLvy&^m}I+Xz)+yvlY01iCr43)?SVD4
zCsN6n7n}BT0H@)`uqDg@*;HsSy<;1NkT%61Tp98ptKwQnflY?y=lZAYo7BOf;RZF&
zo@mNghJX>uv<;J`R?^^tO6Qsr%FgJcPJ**DbzK3FU-<D2)U8L)#KbZ9?Uckr>}Y<=
zKw_cvSeeG;wclpj$f&K+tr0wD>n{j}umJ^qi`AdKK2HyKz>vR{o;2@$2;*qdXiy#c
zx<?BadRctA3-Aw__`S_pU>Z?(?a-zKf+<STB^7-H*SY!y%lAz!^-Y0i+Shy1ohEA@
zW=))KX3`X%y6;uo+^^}yS}J<5g>+E=6jftdbtO_hfN106h!Ad2Zggl3{zi6xwcEam
ztpdYhyxY2BwifNuKUZ=H^%m5>4YtacVw{#{dacp1stVB2loY^>W+N30<x(6{v<ZP0
z1FtP+L4{(IEggo%_^Fa(N-^Sx*M;cDbF}>-yTD78<ix9^=flmy+_&7@6&qeh6>ou9
zTTyO?$GYP^lO+_|9)D;VU2<gP^dAdT({>2dVz6$WSlrd|6m%s@_^2ue=gNlmvD%H0
z0D7LWYSH5r%N~N@xb)oMp3!7sTN=~PwW@Y76gEZ>uPHpWo&8xN{~yoZO$_JTenA<;
z{HG8+qW&r#(a!ixblc1DutHU;rEXY3OtaA&4z1oaS~RSjV{rb6!OPtEl>q~S9pgf&
z*l2_*{5t;`G=`Q-j-2<&Z4+$9&iKx|H8~pQYKhc|<(EksNL~6IyVEKe4Zz%5)~jT-
z1e@`!RNUIw>7@gH(ss&8eTYj?ScnlRMNAE*GuVPEAWjuv|3h%#HBO#Hkw32;>G_A>
z{+Y$G+2QI_?%fbv2fSShs=ZfdAn9Mm!ZC#$&q$=`{>(hwWWRnpYXg5>m>&egOy<+#
zVQ7zGOq42*BAUat`u^*v<6pWf>A!iMzYh~d_X>axW&iIt=MVc$K1sOIG4Zv)Si>?}
z9u20(a_k7oN*dOCiO$%l1>k6*zqwViF4ueo(2Z<M`X^m$mxt`}il}gA)cS6A51VY3
z&!A^^fp1$kPXxeD#u1pZiaq?oagT<R__>HdMcS7GH@Vt`LZ57_Rw$7n@M2LJp;GN4
zV;4i3sg34#hu`L3Va4bS<ogGq%*=~wedj2#1EH1bB!F|?^AURBRGvy+A8MC}-cG8v
z-8TUUuJ7h|d3&MFUAFuWgC4n+z3@lt(4d-d2#vb_0><^LaNpbfjZ*Ewsph>v+?a3c
zM`}}HMuDWjOHTWgD3mcR3gu~F*u>e*VPYBw#dmqdRa>+OGznTC1fFmXhufRTzuC3E
zh;)sFuMDPF#x~^V){dDe3KU6#n)^2X1G$jWP~kC?n>ITQ+qmr`yoKp5X=6L^$h=ZU
zbU%{k6Y4S%H)jlL(g`jS^h|fRZ|vKaV3%b64t}to-~G#P+ETTXAaepxDylQ^@TGqW
zA?|b;iE!eF2J|hgb!7)Q)imNU=pdS$`~5w6ZX|?h59?52mvtzDQta9p=j)~ePM(bs
zL@Ix@4rW8Pdw^}}cPc2){8!kv`Y0X<C8^6d_n-1hPID%Y>A67RqU%|602@SvD_rYN
z+{us)md<quG%uC+<sE``|L^l@4^LW$N&9UBXqaG(kqpOsH)q&+a4WaxWeepbV%^y!
zrfv!*(S2~U`hsS1=z8bKl&E+9Ty@^kf3oqUj3+P~JT2R{f@-new1Kj7P5gVd)ERqd
zq8EV2$0Ht?u#a}kg(Aa%2l>3ib3#g*gZkz_kp}8&rOht2%e#b@H$%lN-m%i_T4T(L
zL*c29)wZho&4WX8op3cPD_e&@1igH%D^L2cq3!DZ#h$>67oorO*|3<OZEeoQi6rjN
z*FYM{IRvU&>xd>Y8X}MQblpnvKY5A@^nb1azsr@>9Ll42$2kaUXmZ=mBbr!}H>Lz9
zqSL+2J@qL+2q%*3rU7sgLI#K&R0IQ>Q->LJfmnyCnNnt4E^<7vL>Cqe(PQH6@)>#&
zsx^2D`;cTr?jf>pq|}3FOuy|(*yONYz=)}M&+4>5zr|HjE3aJj%p;zAKaJbuxh9`z
z<!N_>6%~qF*g#cJ_RzI|nq0;n2JxPyZRMn2pr=L=-NaFGNcp<zK$+-yv2dBpW;r8Z
zOZnJEkURHMaQSQ7G7a%Q+h3yjAi(m}qdRaKg)Rt&!scqe7kj9332)HZrdy&Xzc3zL
z!&?TNTNisZBt;~a8@95!yo@YT&nsR&5^BPl5+voLTeJWgrNuYdupTmx?Pk}PWBoZY
zw(@Z#7euG<>7InbI8%kYO@I`jRku7fm&kIyIo>gLL)VI0E&U9r9OTo)VNl;PVpd=<
z?K6ZkoJUsaHhl5YN7`^ZLPv*h3wFu%EEL;oc@)}}uM9u3uW_Qa-<TjQ@6h1pQSRx{
zA@fP+-vn)eubtFLB$mrisZiXWC_Mu}mtUqZm%ppt*Kt-cS{(g;ZB@Rea~0{}71Jk<
z95`e@8Ed<`cgi?|)Z#AG#O8|nsyt?o%3Bcl`Hm4`;yQWDfp%9?o!Z!WlI9%v+Prll
zmJhj|>={MeVd%c&vc%W<g4Vh^X4pV)D4c<!Fzek|%*&s$$BzLF97Toi;oswV%v1=t
z!&vprA9>%*x1V~1XIE|0{y<_fP~1+Auq5;y1SB68zQU6M_iw<~#$68veG->3U8GCj
z?IyJuURA3ge3si_k?VK@M47F*=}mT2&h9aXeD2i)zq_s`ut-dLTF+i@x{<c{p7!A_
z5L^7jfw6!uIAO@kn1a;F`Q^uQ@pc2fHRHks-=++~E3aD%BHSVov0VZp7B+5@5etul
zG0>8Wb;{mWV+-OdzPjj%!Hy*tAQ4bdF-v(P==d8&skksPW9Vy5)niA|JfKCyAo&>v
zv_i15p~yyZM8B(c#NPL{0GXd_wY^nJBQfgMBVuHdJKx0ioR($lC>s0=GL#Bs6*ES#
z-z(MF#7$}$bPH<}WEw*Tc_vW6X#iiSx8bJyArPD+e_S(AnDFpD9$&wxO}ktywfI!H
zRBNlr3o7HPUkM!CF(?w{dYlU@5vyL*B7g6}oU=4rkn5Ry8GN1z*r}iKEaoqcRD6Wv
zH=k3`-&yi)W<z7Wjwj)l=HkeNn!diyYfLt|0+A#e?8~y}flO`~9giI0dDLAxX+sDu
zVyg|w*fB6!2yb?`r+dpRZwIyt4GNz%$KqfY`9xb?RKFqP&me`h+L^J%3lwsGq>@ac
zq1~7^qgx>EH8b4RT<>2{a0SQ;f?327_bk&tY;$&SjnjoyE*9uD;U7o&3V0>Otj8r|
zgD&6lzxms48$0TsFiey9ZgmNz)&#FG;}KyeSEA#7@GpNBDFWbYb*`31kO{5xTx!m}
zTQ>j_A&G&6TVL2ZbW(!T8ck;B0MZ99{b3Z}5I{IZ9aiAdCyB^8qQAL{d$d6Q-8*Od
zIPA4<nj;+8zpQ~5cNg}gG(G;7$nDn=IrJ#`hG%T<`-O!IAzxgJ!<+yCC{b#{w^$8;
zsV7zlI8u$m@ENO=n9zB1_JE_7G1eVg^vjBMYIIcM0*JwSna$pt_b|}^S}{_$Y1d#q
z-f5So4TJ+Jy71;1-jXDCg;Q3vX(QcF<^Q_bg$PD1MYum`-79BdWkuQY(iB5*6cGI<
zJ}%@<E;wumMvr?75gs?sc4lY;R0z|ZTAop*oMptYnd1rvOCfZmub!jYv8=EjKM=v|
zI<+-FeD~jk^AT-|u0jv6#g+20pHjFEx|x^u<miWLB)ZvNrYo}NkC@2a5l1A<y}DM?
zG^KrSC<R}$+5zjnUpznv0qShXi=G18(m(P|estRmUXyl>h2u~)6qqJ&g5A=7d}@~t
zYCvVVcJAC)d@%?&AZKSa_LO9;1e;3K4vfmdiishqGci8_ibI^HqQ*2Ue>$8Vl8u62
zA7d6O3KCBcE&*<(so*!Nn4#Rf^kU?_VcaI$`ktRcp$vM~)4EoK^h0^&z<uHpK?5>$
zsS{h)Y!KL)v#;rmyUuq_A9u!RV+r>m9lu-!P!;in@qWs1*8s8Z5+M@+yHxg?0n}r*
zr-Hp_=;A2K3q;&q+BH2I3Cj%BXEAH@J}AAk&2nn$MkAQv|54^~mVmL#$3p5qz?}qx
zVy?A3tj34oU`>g;cK|?=$c>Z(j(1!zY9E0j!1dVsWeo$M(?bDPrv4xC)rb1_s=k5}
zhmOTrB6)Z~=&l-J!+{DiAfRaPK)ncfyu{GxWO4vP&{Z#n`796%DGFlwuEXbpxNwz9
zKn?a$!yWc;G3Ig`vzLGx)FHjbl70e`0Rn4`Dj_rcRW&QIf1ExkdDenRXq-gE=Fokm
zmYwUXb?qRNxj~t;c`T5tU@rL^3{QHu1t6`)xucst%Eu9Asd-|QTv2bV`WA1Dqn?M~
zpBgNg-XCbP$mJ(nuNk&Bw!q>?6SCYWD*W<2;y$W2Z%a4$n%#gMR=1ipXP&-~nd<D4
z>w0;+YAOJ9MUa4A0TI^=4GTh>MmJGLK&_2f9@YPSIV{C&oqHKN#+g*_!WK+o`jeM2
VYvGVG%Ctw&?_s6$Lq%=s002J%yiEWA

literal 0
HcmV?d00001

diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts
index 4052fd4..9cd0a33 100644
--- a/frontend/src/config/apps.ts
+++ b/frontend/src/config/apps.ts
@@ -47,7 +47,7 @@ import mapIcon from '@/assets/img/app-icons/map.webp'
 import messagesIcon from '@/assets/img/app-icons/sms.webp'
 import darkChatIcon from '@/assets/img/app-icons/darkchat.webp'
 import notesIcon from '@/assets/img/app-icons/notes.webp'
-import radioIcon from '@/assets/img/app-icons/radio.svg'
+import radioIcon from '@/assets/img/app-icons/radio.webp'
 import photosIcon from '@/assets/img/app-icons/gallery.webp'
 import phoneIcon from '@/assets/img/app-icons/phone.webp'
 import settingsIcon from '@/assets/img/app-icons/settings.svg'
diff --git a/frontend/src/stores/radio.test.ts b/frontend/src/stores/radio.test.ts
new file mode 100644
index 0000000..8af3358
--- /dev/null
+++ b/frontend/src/stores/radio.test.ts
@@ -0,0 +1,279 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useRadioStore } from '@/stores/radio'
+import type { RadioData } from '@/types/radio'
+import { nuiCall } from '@/utils/nui'
+
+vi.mock('@/utils/nui', () => ({ nuiCall: vi.fn() }))
+
+const mockNuiCall = vi.mocked(nuiCall)
+const radioData: RadioData = {
+  badge: '231',
+  badgeEnabled: true,
+  badgeMaxLength: 8,
+  connected: false,
+  displayName: 'Unit 21',
+  displayNameAllowed: true,
+  displayNameEnabled: true,
+  displayNameMaxLength: 32,
+  frequency: 0,
+  frequencyMax: 999.9,
+  frequencyMin: 0.1,
+  frequencyStep: 0.1,
+  history: [{ primary: 120.5, secondary: 130.7 }],
+  members: [],
+  provider: 'yaca',
+  secondaryFrequency: 0,
+  secondarySupported: true,
+  settings: { autoRejoin: false, notifications: true },
+  volume: 50,
+}
+
+describe('radio store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockNuiCall.mockReset()
+  })
+
+  it('hydrates the complete server-authoritative radio state', async () => {
+    mockNuiCall.mockResolvedValueOnce({ data: radioData, success: true })
+    const radio = useRadioStore()
+
+    await radio.load()
+
+    expect(radio.data).toMatchObject(radioData)
+    expect(radio.error).toBe('')
+    expect(mockNuiCall).toHaveBeenCalledWith('radio:get')
+  })
+
+  it('sends both selected channels and applies the accepted connection', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: {
+        connected: true,
+        frequency: 120.5,
+        secondaryFrequency: 130.7,
+      },
+      success: true,
+    })
+    const radio = useRadioStore()
+
+    expect(await radio.connect(120.5, 130.7)).toBe(true)
+    expect(radio.data.connected).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledWith('radio:connect', {
+      frequency: 120.5,
+      secondaryFrequency: 130.7,
+    })
+  })
+
+  it('keeps the current connection when disconnect is rejected', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      error: 'voice_unavailable',
+      success: false,
+    })
+    const radio = useRadioStore()
+    radio.data.connected = true
+    radio.data.frequency = 120.5
+
+    await radio.disconnect()
+
+    expect(radio.data.connected).toBe(true)
+    expect(radio.data.frequency).toBe(120.5)
+    expect(radio.error).toBe('voice_unavailable')
+    expect(radio.isLoading).toBe(false)
+  })
+
+  it('rolls an optimistic setting change back after server rejection', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      error: 'invalid_setting',
+      success: false,
+    })
+    const radio = useRadioStore()
+
+    await radio.saveSetting('autoRejoin', true)
+
+    expect(radio.data.settings.autoRejoin).toBe(false)
+    expect(radio.error).toBe('invalid_setting')
+  })
+
+  it('ignores a stale volume response that arrives after the newest value', async () => {
+    let resolveFirst!: (value: {
+      data: { volume: number }
+      success: true
+    }) => void
+    let resolveSecond!: (value: {
+      data: { volume: number }
+      success: true
+    }) => void
+    mockNuiCall
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveFirst = resolve
+          }),
+      )
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveSecond = resolve
+          }),
+      )
+    const radio = useRadioStore()
+
+    const first = radio.setVolume(25)
+    const second = radio.setVolume(75)
+    resolveSecond({ data: { volume: 75 }, success: true })
+    await second
+    resolveFirst({ data: { volume: 25 }, success: true })
+    await first
+
+    expect(radio.data.volume).toBe(75)
+  })
+
+  it('applies canonical profile values accepted by the server', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({ data: { badge: 'A_1' }, success: true })
+      .mockResolvedValueOnce({
+        data: { displayName: 'Unit Seven' },
+        success: true,
+      })
+    const radio = useRadioStore()
+
+    expect(await radio.saveBadge('a_1')).toBe(true)
+    expect(await radio.saveDisplayName('  Unit Seven  ')).toBe(true)
+
+    expect(radio.data.badge).toBe('A_1')
+    expect(radio.data.displayName).toBe('Unit Seven')
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'radio:save-badge', {
+      badge: 'a_1',
+    })
+    expect(mockNuiCall).toHaveBeenNthCalledWith(2, 'radio:save-display-name', {
+      displayName: '  Unit Seven  ',
+    })
+  })
+
+  it('keeps the authoritative profile value when saving is rejected', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      error: 'rate_limited',
+      success: false,
+    })
+    const radio = useRadioStore()
+    radio.data.badge = '231'
+
+    expect(await radio.saveBadge('232')).toBe(false)
+
+    expect(radio.data.badge).toBe('231')
+    expect(radio.error).toBe('rate_limited')
+  })
+
+  it('ignores stale badge responses after a newer save', async () => {
+    let resolveFirst!: (value: {
+      data: { badge: string }
+      success: true
+    }) => void
+    let resolveSecond!: (value: {
+      data: { badge: string }
+      success: true
+    }) => void
+    mockNuiCall
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveFirst = resolve
+          }),
+      )
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveSecond = resolve
+          }),
+      )
+    const radio = useRadioStore()
+
+    const first = radio.saveBadge('231')
+    const second = radio.saveBadge('232')
+    resolveSecond({ data: { badge: '232' }, success: true })
+    await second
+    resolveFirst({ data: { badge: '231' }, success: true })
+    await first
+
+    expect(radio.data.badge).toBe('232')
+  })
+
+  it('ignores stale display-name responses after a newer save', async () => {
+    let resolveFirst!: (value: {
+      data: { displayName: string }
+      success: true
+    }) => void
+    let resolveSecond!: (value: {
+      data: { displayName: string }
+      success: true
+    }) => void
+    mockNuiCall
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveFirst = resolve
+          }),
+      )
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveSecond = resolve
+          }),
+      )
+    const radio = useRadioStore()
+
+    const first = radio.saveDisplayName('Unit One')
+    const second = radio.saveDisplayName('Unit Two')
+    resolveSecond({ data: { displayName: 'Unit Two' }, success: true })
+    await second
+    resolveFirst({ data: { displayName: 'Unit One' }, success: true })
+    await first
+
+    expect(radio.data.displayName).toBe('Unit Two')
+  })
+
+  it('merges setting responses per key without clobbering another toggle', async () => {
+    let resolveAutoRejoin!: (value: {
+      data: RadioData['settings']
+      success: true
+    }) => void
+    let resolveNotifications!: (value: {
+      data: RadioData['settings']
+      success: true
+    }) => void
+    mockNuiCall
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveAutoRejoin = resolve
+          }),
+      )
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveNotifications = resolve
+          }),
+      )
+    const radio = useRadioStore()
+
+    const autoRejoin = radio.saveSetting('autoRejoin', true)
+    const notifications = radio.saveSetting('notifications', true)
+    resolveNotifications({
+      data: { autoRejoin: false, notifications: true },
+      success: true,
+    })
+    await notifications
+    resolveAutoRejoin({
+      data: { autoRejoin: true, notifications: false },
+      success: true,
+    })
+    await autoRejoin
+
+    expect(radio.data.settings).toEqual({
+      autoRejoin: true,
+      notifications: true,
+    })
+  })
+})
diff --git a/frontend/src/stores/radio.ts b/frontend/src/stores/radio.ts
index 6f1fe3d..b259535 100644
--- a/frontend/src/stores/radio.ts
+++ b/frontend/src/stores/radio.ts
@@ -30,6 +30,13 @@ export const useRadioStore = defineStore('radio', () => {
   const data = reactive<RadioData>(structuredClone(defaults))
   const error = ref('')
   const isLoading = ref(false)
+  const settingRequestIds: Record<keyof RadioSettings, number> = {
+    autoRejoin: 0,
+    notifications: 0,
+  }
+  let badgeRequestId = 0
+  let displayNameRequestId = 0
+  let volumeRequestId = 0
 
   function apply(next: Partial<RadioData>): void {
     Object.assign(data, next)
@@ -61,10 +68,12 @@ export const useRadioStore = defineStore('radio', () => {
   }
 
   async function disconnect(): Promise<void> {
+    isLoading.value = true
     error.value = ''
     const response = await nuiCall('radio:disconnect')
     if (!response.success) {
       error.value = response.error ?? 'request_failed'
+      isLoading.value = false
       return
     }
     apply({
@@ -73,13 +82,16 @@ export const useRadioStore = defineStore('radio', () => {
       members: [],
       secondaryFrequency: 0,
     })
+    isLoading.value = false
   }
 
   async function setVolume(volume: number): Promise<void> {
+    const requestId = ++volumeRequestId
     data.volume = volume
     const response = await nuiCall<{ volume: number }>('radio:set-volume', {
       volume,
     })
+    if (requestId !== volumeRequestId) return
     if (response.success && response.data) data.volume = response.data.volume
   }
 
@@ -87,35 +99,42 @@ export const useRadioStore = defineStore('radio', () => {
     key: keyof RadioSettings,
     value: boolean,
   ): Promise<void> {
+    const requestId = ++settingRequestIds[key]
     const previous = data.settings[key]
     data.settings[key] = value
     const response = await nuiCall<RadioSettings>('radio:save-settings', {
       key,
       value,
     })
-    if (response.success && response.data) data.settings = response.data
-    else {
+    if (requestId !== settingRequestIds[key]) return
+    if (response.success && response.data) {
+      data.settings[key] = response.data[key]
+    } else {
       data.settings[key] = previous
       error.value = response.error ?? 'request_failed'
     }
   }
 
   async function saveBadge(badge: string): Promise<boolean> {
+    const requestId = ++badgeRequestId
     error.value = ''
     const response = await nuiCall<{ badge: string }>('radio:save-badge', {
       badge,
     })
+    if (requestId !== badgeRequestId) return true
     if (response.success && response.data) data.badge = response.data.badge
     else error.value = response.error ?? 'request_failed'
     return response.success
   }
 
   async function saveDisplayName(displayName: string): Promise<boolean> {
+    const requestId = ++displayNameRequestId
     error.value = ''
     const response = await nuiCall<{ displayName: string }>(
       'radio:save-display-name',
       { displayName },
     )
+    if (requestId !== displayNameRequestId) return true
     if (response.success && response.data)
       data.displayName = response.data.displayName
     else error.value = response.error ?? 'request_failed'
diff --git a/frontend/src/views/apps/RadioApp.vue b/frontend/src/views/apps/RadioApp.vue
index ea762d9..8658fdb 100644
--- a/frontend/src/views/apps/RadioApp.vue
+++ b/frontend/src/views/apps/RadioApp.vue
@@ -1,20 +1,4 @@
 <script setup lang="ts">
-import {
-  kBlock,
-  kBlockTitle,
-  kButton,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kPage,
-  kPreloader,
-  kRange,
-  kSegmented,
-  kSegmentedButton,
-  kToast,
-  kToggle,
-} from 'konsta/vue'
 import {
   Clock3,
   RadioTower,
@@ -23,11 +7,30 @@ import {
   Users,
   Volume2,
 } from 'lucide-vue-next'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { usePhoneStore } from '@/stores/phone'
 import { useRadioStore } from '@/stores/radio'
 import type { RadioHistoryEntry } from '@/types/radio'
+import {
+  SkyAppPage,
+  SkyButton,
+  SkyEmptyState,
+  SkyField,
+  SkyList,
+  SkyListItem,
+  SkyNavbar,
+  SkyRange,
+  SkyScrollArea,
+  SkySection,
+  SkySegmented,
+  SkySegmentedButton,
+  SkySettingsGroup,
+  SkySettingsRow,
+  SkySpinner,
+  SkyStatusCard,
+  SkyToast,
+} from '@/ui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type RadioTab = 'radio' | 'settings'
@@ -40,9 +43,11 @@ const secondaryInput = ref('')
 const badgeInput = ref('')
 const displayNameInput = ref('')
 const feedback = ref('')
+const volumeInput = ref(50)
 const now = ref(Date.now())
 const memberSnapshotAt = ref(Date.now())
 let clockHandle: number | null = null
+let feedbackHandle: number | null = null
 
 const statusText = computed(() => {
   if (!radio.data.connected) return phone.t('Apps.radio.disconnected')
@@ -54,9 +59,11 @@ const statusText = computed(() => {
   })
 })
 
-function eventValue(event: Event): string {
-  return (event.target as HTMLInputElement).value
-}
+const providerText = computed(() => {
+  const provider = radio.data.provider
+  if (!provider) return phone.t('Apps.radio.noProvider')
+  return provider.replace(/^./, (character) => character.toLocaleUpperCase())
+})
 
 function parseFrequency(value: string): number {
   return Number.parseFloat(value.replace(',', '.'))
@@ -66,6 +73,15 @@ function errorText(code: string): string {
   return phone.t(`Apps.radio.errors.${code || 'default'}`)
 }
 
+function showFeedback(message: string): void {
+  if (feedbackHandle !== null) window.clearTimeout(feedbackHandle)
+  feedback.value = message
+  feedbackHandle = window.setTimeout(() => {
+    feedback.value = ''
+    feedbackHandle = null
+  }, 2500)
+}
+
 async function connect(
   primary = parseFrequency(primaryInput.value),
   secondary = parseFrequency(secondaryInput.value) || 0,
@@ -74,6 +90,7 @@ async function connect(
     radio.error = 'invalid_frequency'
     return
   }
+
   const connected = await radio.connect(primary, secondary)
   if (connected) {
     memberSnapshotAt.value = Date.now()
@@ -88,6 +105,10 @@ async function disconnect(): Promise<void> {
   await radio.disconnect()
 }
 
+function saveVolume(): void {
+  void radio.setVolume(volumeInput.value)
+}
+
 function connectHistory(entry: RadioHistoryEntry): void {
   primaryInput.value = String(entry.primary)
   secondaryInput.value = entry.secondary ? String(entry.secondary) : ''
@@ -127,29 +148,40 @@ function normalizedDisplayName(): string {
   return clean
 }
 
-async function saveRadioProfile(): Promise<void> {
-  if (radio.data.displayNameEnabled && radio.data.displayNameAllowed) {
-    const displayNameSaved = await radio.saveDisplayName(
-      normalizedDisplayName(),
-    )
-    if (!displayNameSaved) {
-      feedback.value = errorText(radio.error)
-      window.setTimeout(() => (feedback.value = ''), 2500)
-      return
-    }
+async function saveDisplayNameSetting(): Promise<void> {
+  if (!radio.data.displayNameEnabled || !radio.data.displayNameAllowed) return
+
+  const displayName = normalizedDisplayName()
+  if (displayName === radio.data.displayName) return
+
+  const saved = await radio.saveDisplayName(displayName)
+  if (displayNameInput.value !== displayName) return
+
+  if (!saved) {
+    displayNameInput.value = radio.data.displayName
+    showFeedback(errorText(radio.error))
+    return
   }
 
-  if (radio.data.badgeEnabled) {
-    const badgeSaved = await radio.saveBadge(normalizedBadge())
-    if (!badgeSaved) {
-      feedback.value = errorText(radio.error)
-      window.setTimeout(() => (feedback.value = ''), 2500)
-      return
-    }
+  displayNameInput.value = radio.data.displayName
+}
+
+async function saveBadgeSetting(): Promise<void> {
+  if (!radio.data.badgeEnabled) return
+
+  const badge = normalizedBadge()
+  if (badge === radio.data.badge) return
+
+  const saved = await radio.saveBadge(badge)
+  if (badgeInput.value !== badge) return
+
+  if (!saved) {
+    badgeInput.value = radio.data.badge
+    showFeedback(errorText(radio.error))
+    return
   }
 
-  feedback.value = phone.t('Apps.radio.profileSaved')
-  window.setTimeout(() => (feedback.value = ''), 2500)
+  badgeInput.value = radio.data.badge
 }
 
 function onMessage(event: MessageEvent): void {
@@ -160,6 +192,11 @@ function onMessage(event: MessageEvent): void {
   }
 }
 
+watch(
+  () => radio.data.volume,
+  (volume) => (volumeInput.value = volume),
+)
+
 onMounted(async () => {
   window.addEventListener('message', onMessage)
   clockHandle = window.setInterval(() => (now.value = Date.now()), 1000)
@@ -167,399 +204,304 @@ onMounted(async () => {
   memberSnapshotAt.value = Date.now()
   badgeInput.value = radio.data.badge
   displayNameInput.value = radio.data.displayName
+  volumeInput.value = radio.data.volume
   if (radio.data.frequency) primaryInput.value = String(radio.data.frequency)
-  if (radio.data.secondaryFrequency)
+  if (radio.data.secondaryFrequency) {
     secondaryInput.value = String(radio.data.secondaryFrequency)
+  }
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('message', onMessage)
-  if (clockHandle) window.clearInterval(clockHandle)
+  if (clockHandle !== null) window.clearInterval(clockHandle)
+  if (feedbackHandle !== null) window.clearTimeout(feedbackHandle)
 })
 </script>
 
 <template>
-  <k-page component="main" class="radio-app">
-    <k-navbar :title="phone.t('Apps.radio.name')">
-      <template #subnavbar>
-        <k-segmented :key="tab" strong rounded class="radio-tabs">
-          <k-segmented-button :active="tab === 'radio'" @click="tab = 'radio'">
-            <RadioTower :size="17" />
-            {{ phone.t('Apps.radio.tabs.radio') }}
-          </k-segmented-button>
-          <k-segmented-button
-            :active="tab === 'settings'"
-            @click="tab = 'settings'"
-          >
-            <Settings :size="17" />
-            {{ phone.t('Apps.radio.tabs.settings') }}
-          </k-segmented-button>
-        </k-segmented>
-      </template>
-    </k-navbar>
+  <SkyAppPage
+    class="radio-app"
+    accent="#0a84ff"
+    accent-soft="rgba(10, 132, 255, 0.16)"
+    :dark="phone.isDarkMode"
+    :label="phone.t('Apps.radio.name')"
+  >
+    <SkyNavbar :title="phone.t('Apps.radio.name')" />
 
-    <div v-if="radio.isLoading && !radio.data.provider" class="radio-loading">
-      <k-preloader />
-      {{ phone.t('Common.loading') }}
+    <div class="radio-tab-switcher">
+      <SkySegmented class="radio-tabs" :aria-label="phone.t('Apps.radio.name')">
+        <SkySegmentedButton :active="tab === 'radio'" @click="tab = 'radio'">
+          <RadioTower :size="16" aria-hidden="true" />
+          {{ phone.t('Apps.radio.tabs.radio') }}
+        </SkySegmentedButton>
+        <SkySegmentedButton
+          :active="tab === 'settings'"
+          @click="tab = 'settings'"
+        >
+          <Settings :size="16" aria-hidden="true" />
+          {{ phone.t('Apps.radio.tabs.settings') }}
+        </SkySegmentedButton>
+      </SkySegmented>
     </div>
 
-    <template v-else-if="tab === 'radio'">
-      <k-block class="radio-status" strong inset>
-        <Signal :size="22" :class="{ 'radio-online': radio.data.connected }" />
-        <div>
-          <strong>{{ statusText }}</strong>
-          <small>{{
-            radio.data.provider ?? phone.t('Apps.radio.noProvider')
-          }}</small>
-        </div>
-        <i :class="{ 'radio-status-dot--online': radio.data.connected }"></i>
-      </k-block>
+    <SkyScrollArea class="radio-content">
+      <div v-if="radio.isLoading && !radio.data.provider" class="radio-loading">
+        <SkySpinner :label="phone.t('Common.loading')" />
+        <span>{{ phone.t('Common.loading') }}</span>
+      </div>
 
-      <k-block-title>{{ phone.t('Apps.radio.channel') }}</k-block-title>
-      <k-list strong inset>
-        <k-list-input
-          type="number"
-          :label="phone.t('Apps.radio.primaryFrequency')"
-          :placeholder="phone.t('Apps.radio.frequencyPlaceholder')"
-          :min="radio.data.frequencyMin"
-          :max="radio.data.frequencyMax"
-          :step="radio.data.frequencyStep"
-          :value="primaryInput"
-          @input="primaryInput = eventValue($event)"
+      <template v-else-if="tab === 'radio'">
+        <SkyStatusCard
+          :title="statusText"
+          :subtitle="providerText"
+          :tone="radio.data.connected ? 'success' : 'neutral'"
+          aria-live="polite"
+          indicator
         >
-          <template #after>{{ phone.t('Apps.radio.mhz') }}</template>
-        </k-list-input>
-        <k-list-input
-          v-if="radio.data.secondarySupported"
-          type="number"
-          :label="phone.t('Apps.radio.secondaryFrequency')"
-          :placeholder="phone.t('Apps.radio.optional')"
-          :min="radio.data.frequencyMin"
-          :max="radio.data.frequencyMax"
-          :step="radio.data.frequencyStep"
-          :value="secondaryInput"
-          @input="secondaryInput = eventValue($event)"
-        >
-          <template #after>{{ phone.t('Apps.radio.mhz') }}</template>
-        </k-list-input>
-        <k-list-item :title="phone.t('Apps.radio.volume')">
-          <template #media><Volume2 :size="20" /></template>
-          <template #inner>
-            <div class="radio-volume">
-              <k-range
-                :value="radio.data.volume"
+          <template #icon>
+            <Signal :size="22" aria-hidden="true" />
+          </template>
+        </SkyStatusCard>
+
+        <SkySection :title="phone.t('Apps.radio.channel')">
+          <SkyList density="compact" flush inset strong>
+            <SkyField
+              v-model="primaryInput"
+              type="number"
+              input-mode="decimal"
+              :label="phone.t('Apps.radio.primaryFrequency')"
+              :placeholder="phone.t('Apps.radio.frequencyPlaceholder')"
+              :min="radio.data.frequencyMin"
+              :max="radio.data.frequencyMax"
+              :step="radio.data.frequencyStep"
+            >
+              <template #leading>
+                <RadioTower :size="20" aria-hidden="true" />
+              </template>
+              <template #trailing>
+                <span class="radio-unit">{{ phone.t('Apps.radio.mhz') }}</span>
+              </template>
+            </SkyField>
+            <SkyField
+              v-if="radio.data.secondarySupported"
+              v-model="secondaryInput"
+              type="number"
+              input-mode="decimal"
+              :label="phone.t('Apps.radio.secondaryFrequency')"
+              :placeholder="phone.t('Apps.radio.optional')"
+              :min="radio.data.frequencyMin"
+              :max="radio.data.frequencyMax"
+              :step="radio.data.frequencyStep"
+            >
+              <template #leading>
+                <RadioTower :size="20" aria-hidden="true" />
+              </template>
+              <template #trailing>
+                <span class="radio-unit">{{ phone.t('Apps.radio.mhz') }}</span>
+              </template>
+            </SkyField>
+            <SkyListItem>
+              <template #media>
+                <Volume2 :size="20" aria-hidden="true" />
+              </template>
+              <SkyRange
+                id="radio-volume"
+                v-model="volumeInput"
+                :aria-label="phone.t('Apps.radio.volume')"
+                :aria-value-text="`${volumeInput}%`"
+                :caption="phone.t('Apps.radio.volume')"
                 :min="0"
                 :max="100"
                 :step="1"
-                :aria-label="phone.t('Apps.radio.volume')"
-                @input="radio.setVolume(Number(eventValue($event)))"
-              />
-              <span>{{ radio.data.volume }}%</span>
-            </div>
-          </template>
-        </k-list-item>
-      </k-list>
+                @change="saveVolume"
+              >
+                <output for="radio-volume">{{ volumeInput }}%</output>
+              </SkyRange>
+            </SkyListItem>
+          </SkyList>
 
-      <k-block inset class="radio-action-block">
-        <k-button
-          v-if="!radio.data.connected"
-          large
-          rounded
-          :disabled="radio.isLoading"
-          @click="connect()"
-        >
-          {{ phone.t('Apps.radio.connect') }}
-        </k-button>
-        <k-button
-          v-else
-          large
-          rounded
-          class="radio-disconnect"
-          @click="disconnect"
-        >
-          {{ phone.t('Apps.radio.disconnect') }}
-        </k-button>
-        <p v-if="radio.error" class="radio-error">
-          {{ errorText(radio.error) }}
-        </p>
-      </k-block>
+          <div class="radio-primary-action">
+            <SkyButton
+              v-if="!radio.data.connected"
+              block
+              large
+              :disabled="radio.isLoading"
+              @click="connect()"
+            >
+              {{ phone.t('Apps.radio.connect') }}
+            </SkyButton>
+            <SkyButton
+              v-else
+              block
+              large
+              variant="danger"
+              :disabled="radio.isLoading"
+              @click="disconnect"
+            >
+              {{ phone.t('Apps.radio.disconnect') }}
+            </SkyButton>
+            <p v-if="radio.error" class="radio-error" role="alert">
+              {{ errorText(radio.error) }}
+            </p>
+          </div>
+        </SkySection>
 
-      <template v-if="radio.data.connected">
-        <k-block-title>
-          <Users :size="16" />
-          {{
+        <SkySection
+          v-if="radio.data.connected"
+          :title="
             phone.t('Apps.radio.members', {
               count: String(radio.data.members.length),
             })
-          }}
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item
-            v-for="member in radio.data.members"
-            :key="member.id"
-            :title="member.name"
-            :subtitle="formatDuration(member.joinTime)"
-            :after="member.rank || String(member.rankNumber || '')"
-          />
-          <k-list-item
+          "
+        >
+          <SkyEmptyState
             v-if="!radio.data.members.length"
+            compact
             :title="phone.t('Apps.radio.noMembers')"
-          />
-        </k-list>
+          >
+            <template #icon>
+              <Users :size="32" aria-hidden="true" />
+            </template>
+          </SkyEmptyState>
+          <SkyList v-else inset strong>
+            <SkyListItem
+              v-for="member in radio.data.members"
+              :key="member.id"
+              :title="member.name"
+              :subtitle="formatDuration(member.joinTime)"
+              :after="member.rank || String(member.rankNumber || '')"
+            />
+          </SkyList>
+        </SkySection>
+
+        <SkySection v-else :title="phone.t('Apps.radio.history')">
+          <SkyEmptyState
+            v-if="!radio.data.history.length"
+            compact
+            :title="phone.t('Apps.radio.noHistory')"
+          >
+            <template #icon>
+              <Clock3 :size="32" aria-hidden="true" />
+            </template>
+          </SkyEmptyState>
+          <SkyList v-else inset strong>
+            <SkyListItem
+              v-for="entry in radio.data.history"
+              :key="`${entry.primary}-${entry.secondary}`"
+              link
+              :title="`${entry.primary}${entry.secondary ? ` / ${entry.secondary}` : ''} ${phone.t('Apps.radio.mhz')}`"
+              @click="connectHistory(entry)"
+            />
+          </SkyList>
+        </SkySection>
       </template>
 
       <template v-else>
-        <k-block-title>
-          <Clock3 :size="16" />
-          {{ phone.t('Apps.radio.history') }}
-        </k-block-title>
-        <k-list strong inset>
-          <k-list-item
-            v-for="entry in radio.data.history"
-            :key="`${entry.primary}-${entry.secondary}`"
-            link
-            :title="`${entry.primary}${entry.secondary ? ` / ${entry.secondary}` : ''} ${phone.t('Apps.radio.mhz')}`"
-            @click="connectHistory(entry)"
-          />
-          <k-list-item
-            v-if="!radio.data.history.length"
-            :title="phone.t('Apps.radio.noHistory')"
-          />
-        </k-list>
-      </template>
-    </template>
-
-    <template v-else>
-      <template v-if="radio.data.displayNameEnabled">
-        <k-block-title class="radio-settings-title">
-          {{ phone.t('Apps.radio.displayName') }}
-        </k-block-title>
-        <k-list strong inset class="radio-settings-list">
-          <k-list-input
+        <SkySettingsGroup
+          v-if="radio.data.displayNameEnabled"
+          :title="phone.t('Apps.radio.displayName')"
+          :footer="
+            phone.t(
+              radio.data.displayNameAllowed
+                ? 'Apps.radio.displayNameDescription'
+                : 'Apps.radio.displayNameNotAllowed',
+            )
+          "
+        >
+          <SkyField
+            v-model="displayNameInput"
             type="text"
-            :disabled="!radio.data.displayNameAllowed"
+            :aria-label="phone.t('Apps.radio.displayName')"
+            :readonly="!radio.data.displayNameAllowed"
             :maxlength="radio.data.displayNameMaxLength"
             :placeholder="phone.t('Apps.radio.displayNamePlaceholder')"
-            :value="displayNameInput"
-            @input="displayNameInput = eventValue($event)"
+            @change="saveDisplayNameSetting"
           />
-        </k-list>
-        <k-block class="radio-hint-block">
-          <p class="radio-setting-hint">
-            {{
-              phone.t(
-                radio.data.displayNameAllowed
-                  ? 'Apps.radio.displayNameDescription'
-                  : 'Apps.radio.displayNameNotAllowed',
-              )
-            }}
-          </p>
-        </k-block>
-      </template>
+        </SkySettingsGroup>
 
-      <template v-if="radio.data.badgeEnabled">
-        <k-block-title class="radio-settings-title">
-          {{ phone.t('Apps.radio.badge') }}
-        </k-block-title>
-        <k-list strong inset class="radio-settings-list">
-          <k-list-input
+        <SkySettingsGroup
+          v-if="radio.data.badgeEnabled"
+          :title="phone.t('Apps.radio.badge')"
+        >
+          <SkyField
+            v-model="badgeInput"
             type="text"
+            :aria-label="phone.t('Apps.radio.badge')"
             :maxlength="radio.data.badgeMaxLength"
             :placeholder="phone.t('Apps.radio.badgePlaceholder')"
-            :value="badgeInput"
-            @input="
-              badgeInput = eventValue($event).replace(/[^A-Za-z0-9_-]/g, '')
-            "
+            @input="badgeInput = badgeInput.replace(/[^A-Za-z0-9_-]/g, '')"
+            @change="saveBadgeSetting"
           />
-        </k-list>
+        </SkySettingsGroup>
+
+        <SkySettingsGroup :title="phone.t('Apps.radio.otherSettings')">
+          <SkySettingsRow
+            kind="toggle"
+            :model-value="radio.data.settings.autoRejoin"
+            :title="phone.t('Apps.radio.autoRejoin')"
+            :description="phone.t('Apps.radio.autoRejoinDescription')"
+            @update:model-value="radio.saveSetting('autoRejoin', $event)"
+          />
+          <SkySettingsRow
+            kind="toggle"
+            :model-value="radio.data.settings.notifications"
+            :title="phone.t('Apps.radio.radioNotifications')"
+            :description="phone.t('Apps.radio.notificationsDescription')"
+            @update:model-value="radio.saveSetting('notifications', $event)"
+          />
+        </SkySettingsGroup>
       </template>
+    </SkyScrollArea>
 
-      <k-block
-        v-if="
-          radio.data.badgeEnabled ||
-          (radio.data.displayNameEnabled && radio.data.displayNameAllowed)
-        "
-        inset
-        class="radio-action-block radio-profile-action"
-      >
-        <k-button rounded large @click="saveRadioProfile">
-          {{ phone.t('Common.save') }}
-        </k-button>
-      </k-block>
-
-      <k-block-title class="radio-settings-title">
-        {{ phone.t('Apps.radio.otherSettings') }}
-      </k-block-title>
-      <k-list strong inset class="radio-settings-list">
-        <k-list-item
-          class="radio-setting-row"
-          :title="phone.t('Apps.radio.autoRejoin')"
-          :subtitle="phone.t('Apps.radio.autoRejoinDescription')"
-        >
-          <template #after>
-            <k-toggle
-              :checked="radio.data.settings.autoRejoin"
-              @change="
-                radio.saveSetting('autoRejoin', !radio.data.settings.autoRejoin)
-              "
-            />
-          </template>
-        </k-list-item>
-        <k-list-item
-          class="radio-setting-row"
-          :title="phone.t('Apps.radio.radioNotifications')"
-          :subtitle="phone.t('Apps.radio.notificationsDescription')"
-        >
-          <template #after>
-            <k-toggle
-              :checked="radio.data.settings.notifications"
-              @change="
-                radio.saveSetting(
-                  'notifications',
-                  !radio.data.settings.notifications,
-                )
-              "
-            />
-          </template>
-        </k-list-item>
-      </k-list>
-    </template>
-
-    <k-toast
+    <SkyToast
       :opened="Boolean(feedback)"
       position="center"
       @click="feedback = ''"
     >
       {{ feedback }}
-    </k-toast>
-  </k-page>
+    </SkyToast>
+  </SkyAppPage>
 </template>
 
 <style scoped>
-.radio-app {
-  --radio-blue: #0a84ff;
-  overflow-y: auto;
-  padding-bottom: 34px;
+.radio-tab-switcher {
+  padding: 4px var(--sky-page-gutter) 8px;
+  flex: none;
 }
 
-.radio-tabs :deep(button) {
-  align-items: center;
-  display: flex;
+.radio-tabs :deep(.sky-segmented-button) {
   gap: 6px;
-  justify-content: center;
+}
+
+.radio-content {
+  padding-top: 4px;
 }
 
 .radio-loading {
-  align-items: center;
-  display: flex;
-  gap: 10px;
-  justify-content: center;
   min-height: 240px;
-}
-
-.radio-status {
-  align-items: center;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: auto 1fr auto;
-  margin-top: 18px;
-}
-
-.radio-status div {
   display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.radio-status small {
-  color: var(--k-color-subtitle, #8e8e93);
-  margin-top: 2px;
-  text-transform: capitalize;
-}
-
-.radio-status i {
-  background: #c7c7cc;
-  border-radius: 50%;
-  height: 10px;
-  width: 10px;
-}
-
-.radio-status .radio-status-dot--online {
-  background: #30d158;
-}
-
-.radio-online {
-  color: #30d158;
-}
-
-.radio-volume {
   align-items: center;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: 1fr 44px;
-  width: 100%;
+  justify-content: center;
+  gap: 10px;
+  color: var(--sky-muted);
+  font-size: 14px;
 }
 
-.radio-volume span {
-  color: var(--k-color-subtitle, #8e8e93);
-  font-variant-numeric: tabular-nums;
-  text-align: right;
+.radio-unit {
+  color: var(--sky-muted);
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.radio-action-block {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.radio-setting-hint {
-  color: inherit;
-  font-size: 16px;
-  font-weight: 450;
-  line-height: 1.45;
-  margin: 0;
-  opacity: 0.82;
-}
-
-.radio-hint-block {
-  margin-bottom: 0;
-  margin-top: 8px;
-}
-
-.radio-settings-title {
-  margin-bottom: 6px;
-  margin-top: 16px;
-}
-
-.radio-settings-list {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.radio-profile-action {
-  margin-bottom: 0;
+.radio-primary-action {
   margin-top: 12px;
 }
 
-.radio-setting-row :deep(.text-sm) {
-  font-size: 15px;
-  line-height: 1.35;
-}
-
 .radio-error {
-  color: #ff3b30;
-  font-size: 13px;
-  margin: 10px 4px 0;
+  margin: 9px 4px 0;
+  color: var(--sky-danger);
+  font-size: 12px;
+  line-height: 16px;
   text-align: center;
 }
-
-.radio-disconnect {
-  background: #ff3b30 !important;
-  color: #fff !important;
-}
-
-:deep(.k-block-title) {
-  align-items: center;
-  display: flex;
-  gap: 6px;
-}
 </style>

From 32e49928ef0cc9a3080896d7562cdb11431fb7c8 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:26 +0200
Subject: [PATCH 52/63] ENH - migrate Companies to Sky UI

---
 frontend/src/stores/companies.test.ts    |  217 ++-
 frontend/src/stores/companies.ts         |  153 +-
 frontend/src/views/apps/CompaniesApp.vue | 1917 ++++++++++------------
 3 files changed, 1230 insertions(+), 1057 deletions(-)

diff --git a/frontend/src/stores/companies.test.ts b/frontend/src/stores/companies.test.ts
index 2a49e89..1ceb335 100644
--- a/frontend/src/stores/companies.test.ts
+++ b/frontend/src/stores/companies.test.ts
@@ -5,10 +5,12 @@ import { useCompaniesStore } from '@/stores/companies'
 import type {
   Company,
   CompanyDirectoryFilters,
+  CompanyDirectoryPage,
   CompanyRequest,
+  CompanyRequestPage,
   CompanySummary,
 } from '@/types/companies'
-import { nuiCall } from '@/utils/nui'
+import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 vi.mock('@/utils/nui', () => ({ nuiCall: vi.fn() }))
 
@@ -84,6 +86,17 @@ const filters: CompanyDirectoryFilters = {
   sort: 'relevance',
 }
 
+function deferred<T>(): {
+  promise: Promise<T>
+  resolve: (value: T) => void
+} {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((resolvePromise) => {
+    resolve = resolvePromise
+  })
+  return { promise, resolve }
+}
+
 describe('companies store', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
@@ -132,6 +145,208 @@ describe('companies store', () => {
     })
   })
 
+  it('ignores an older directory response after the filters change', async () => {
+    const firstResponse = deferred<NuiResponse<CompanyDirectoryPage>>()
+    const secondResponse = deferred<NuiResponse<CompanyDirectoryPage>>()
+    mockNuiCall
+      .mockReturnValueOnce(firstResponse.promise)
+      .mockReturnValueOnce(secondResponse.promise)
+    const store = useCompaniesStore()
+    const searchedFilters = { ...filters, search: 'medical' }
+    const medical = {
+      ...summary,
+      id: 'medical',
+      name: 'Los Santos Medical',
+    }
+
+    const firstLoad = store.loadCompanies(filters)
+    const secondLoad = store.loadCompanies(searchedFilters)
+    secondResponse.resolve({
+      data: { categories: [], companies: [medical], nextCursor: null },
+      success: true,
+    })
+
+    await expect(secondLoad).resolves.toBe(true)
+    firstResponse.resolve({
+      data: { categories: [], companies: [summary], nextCursor: null },
+      success: true,
+    })
+
+    await expect(firstLoad).resolves.toBe(false)
+    expect(store.directory).toEqual([medical])
+    expect(store.directoryFilters).toEqual(searchedFilters)
+    expect(store.directoryLoading).toBe(false)
+  })
+
+  it('ignores an older customer request response after the list changes', async () => {
+    const firstResponse = deferred<NuiResponse<CompanyRequestPage>>()
+    const secondResponse = deferred<NuiResponse<CompanyRequestPage>>()
+    mockNuiCall
+      .mockReturnValueOnce(firstResponse.promise)
+      .mockReturnValueOnce(secondResponse.promise)
+    const store = useCompaniesStore()
+    const closedRequest = { ...request, id: 'request-closed' }
+
+    const firstLoad = store.loadMyRequests('open')
+    const secondLoad = store.loadMyRequests('closed')
+    secondResponse.resolve({
+      data: { nextCursor: null, requests: [closedRequest], unreadCount: 1 },
+      success: true,
+    })
+
+    await expect(secondLoad).resolves.toBe(true)
+    firstResponse.resolve({
+      data: { nextCursor: null, requests: [request], unreadCount: 7 },
+      success: true,
+    })
+
+    await expect(firstLoad).resolves.toBe(false)
+    expect(store.myRequests).toEqual([closedRequest])
+    expect(store.myRequestsList).toBe('closed')
+    expect(store.customerUnreadCount).toBe(1)
+    expect(store.myRequestsLoading).toBe(false)
+  })
+
+  it('keeps directory data and its initial error when an append fails', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({
+        error: 'temporarily_unavailable',
+        success: false,
+      })
+      .mockResolvedValueOnce({
+        data: {
+          categories: [],
+          companies: [
+            { ...summary, id: 'medical', name: 'Los Santos Medical' },
+          ],
+          nextCursor: null,
+        },
+        success: true,
+      })
+    const store = useCompaniesStore()
+    store.directory = [summary]
+    store.directoryError = 'initial_error'
+    store.directoryFilters = { ...filters }
+    store.directoryNextCursor = 'page-2'
+
+    expect(await store.loadCompanies(filters, true)).toBe(false)
+    expect(store.directory).toEqual([summary])
+    expect(store.directoryNextCursor).toBe('page-2')
+    expect(store.directoryError).toBe('initial_error')
+    expect(store.directoryAppendError).toBe('temporarily_unavailable')
+
+    expect(await store.loadCompanies(filters, true)).toBe(true)
+    expect(store.directory.map((item) => item.id)).toEqual([
+      'police',
+      'medical',
+    ])
+    expect(store.directoryError).toBe('initial_error')
+    expect(store.directoryAppendError).toBe('')
+  })
+
+  it('keeps customer requests and their initial error when an append fails', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({
+        error: 'temporarily_unavailable',
+        success: false,
+      })
+      .mockResolvedValueOnce({
+        data: {
+          nextCursor: null,
+          requests: [{ ...request, id: 'request-2' }],
+          unreadCount: 2,
+        },
+        success: true,
+      })
+    const store = useCompaniesStore()
+    store.customerUnreadCount = 1
+    store.myRequests = [request]
+    store.myRequestsError = 'initial_error'
+    store.myRequestsList = 'open'
+    store.myRequestsNextCursor = 'page-2'
+
+    expect(await store.loadMyRequests('open', true)).toBe(false)
+    expect(store.myRequests).toEqual([request])
+    expect(store.myRequestsNextCursor).toBe('page-2')
+    expect(store.customerUnreadCount).toBe(1)
+    expect(store.myRequestsError).toBe('initial_error')
+    expect(store.myRequestsAppendError).toBe('temporarily_unavailable')
+
+    expect(await store.loadMyRequests('open', true)).toBe(true)
+    expect(store.myRequests.map((item) => item.id)).toEqual([
+      'request-1',
+      'request-2',
+    ])
+    expect(store.customerUnreadCount).toBe(2)
+    expect(store.myRequestsError).toBe('initial_error')
+    expect(store.myRequestsAppendError).toBe('')
+  })
+
+  it('invalidates an in-flight customer page when the device scope is cleared', async () => {
+    const response = deferred<NuiResponse<CompanyRequestPage>>()
+    mockNuiCall.mockReturnValueOnce(response.promise)
+    const store = useCompaniesStore()
+    store.bindDeviceScope('device-a', 'sim-a')
+    store.myRequests = [request]
+    store.myRequestsList = 'open'
+    store.myRequestsNextCursor = 'page-2'
+
+    const load = store.loadMyRequests('open', true)
+    store.resetDeviceScope()
+    response.resolve({
+      data: {
+        nextCursor: null,
+        requests: [{ ...request, id: 'request-stale' }],
+        unreadCount: 8,
+      },
+      success: true,
+    })
+
+    await expect(load).resolves.toBe(false)
+    expect(store.myRequests).toEqual([])
+    expect(store.customerUnreadCount).toBe(0)
+    expect(store.myRequestsLoaded).toBe(false)
+    expect(store.myRequestsLoadingMore).toBe(false)
+  })
+
+  it('guards directory appends by loading state, cursor and exact filters', async () => {
+    const store = useCompaniesStore()
+    store.directoryFilters = { ...filters }
+    store.directoryNextCursor = 'page-2'
+    store.directoryLoading = true
+
+    expect(await store.loadCompanies(filters, true)).toBe(false)
+    store.directoryLoading = false
+    expect(
+      await store.loadCompanies({ ...filters, categoryId: 'public' }, true),
+    ).toBe(false)
+    store.directoryNextCursor = null
+    expect(await store.loadCompanies(filters, true)).toBe(false)
+    store.directoryNextCursor = 'page-2'
+    store.directoryLoadingMore = true
+    expect(await store.loadCompanies(filters, true)).toBe(false)
+
+    expect(mockNuiCall).not.toHaveBeenCalled()
+  })
+
+  it('guards customer appends by loading state, cursor and exact list', async () => {
+    const store = useCompaniesStore()
+    store.myRequestsList = 'open'
+    store.myRequestsNextCursor = 'page-2'
+    store.myRequestsLoading = true
+
+    expect(await store.loadMyRequests('open', true)).toBe(false)
+    store.myRequestsLoading = false
+    expect(await store.loadMyRequests('closed', true)).toBe(false)
+    store.myRequestsNextCursor = null
+    expect(await store.loadMyRequests('open', true)).toBe(false)
+    store.myRequestsNextCursor = 'page-2'
+    store.myRequestsLoadingMore = true
+    expect(await store.loadMyRequests('open', true)).toBe(false)
+
+    expect(mockNuiCall).not.toHaveBeenCalled()
+  })
+
   it('uses server-provided unread counts for the app badge', async () => {
     mockNuiCall.mockResolvedValueOnce({
       data: {
diff --git a/frontend/src/stores/companies.ts b/frontend/src/stores/companies.ts
index 4e46162..e2297da 100644
--- a/frontend/src/stores/companies.ts
+++ b/frontend/src/stores/companies.ts
@@ -35,6 +35,20 @@ function mergeById<T extends { id: string }>(current: T[], incoming: T[]): T[] {
   return [...merged.values()]
 }
 
+function sameDirectoryFilters(
+  current: CompanyDirectoryFilters,
+  requested: CompanyDirectoryFilters,
+): boolean {
+  return (
+    current.acceptsRequests === requested.acceptsRequests &&
+    current.availability === requested.availability &&
+    current.categoryId === requested.categoryId &&
+    current.hasLocation === requested.hasLocation &&
+    current.search === requested.search &&
+    current.sort === requested.sort
+  )
+}
+
 export const useCompaniesStore = defineStore('companies', {
   state: () => ({
     categories: [] as CompanyDirectoryPage['categories'],
@@ -49,11 +63,13 @@ export const useCompaniesStore = defineStore('companies', {
       search: '',
       sort: 'relevance',
     } as CompanyDirectoryFilters,
+    directoryAppendError: '',
     directoryError: '',
     directoryLoaded: false,
     directoryLoading: false,
     directoryLoadingMore: false,
     directoryNextCursor: null as string | null,
+    directoryRequestGeneration: 0,
     deviceScopeKey: '',
     deviceScopeVersion: 0,
     members: [] as CompanyMember[],
@@ -61,12 +77,14 @@ export const useCompaniesStore = defineStore('companies', {
     mutationError: '',
     mutating: false,
     myRequests: [] as CompanyRequestSummary[],
+    myRequestsAppendError: '',
     myRequestsList: 'open' as CompanyRequestList,
     myRequestsError: '',
     myRequestsLoaded: false,
     myRequestsLoading: false,
     myRequestsLoadingMore: false,
     myRequestsNextCursor: null as string | null,
+    myRequestsRequestGeneration: 0,
     request: null as CompanyRequest | null,
     requestError: '',
     requestLoading: false,
@@ -151,38 +169,67 @@ export const useCompaniesStore = defineStore('companies', {
       filters: CompanyDirectoryFilters,
       append = false,
     ): Promise<boolean> {
-      if (append && (!this.directoryNextCursor || this.directoryLoadingMore)) {
+      const requestFilters = { ...filters }
+      if (
+        append &&
+        (this.directoryLoading ||
+          this.directoryLoadingMore ||
+          !this.directoryNextCursor ||
+          !sameDirectoryFilters(this.directoryFilters, requestFilters))
+      ) {
         return false
       }
-      if (append) this.directoryLoadingMore = true
-      else this.directoryLoading = true
+      if (append) {
+        this.directoryLoadingMore = true
+      } else {
+        this.directoryRequestGeneration += 1
+        this.directoryLoading = true
+        this.directoryLoadingMore = false
+        this.directoryAppendError = ''
+        this.directoryError = ''
+        this.directoryFilters = requestFilters
+      }
       this.directoryLoaded = true
-      this.directoryFilters = { ...filters }
+      const requestGeneration = this.directoryRequestGeneration
+      const requestCursor = append ? this.directoryNextCursor : null
       const response = await nuiCall<CompanyDirectoryPage>('companies:list', {
-        acceptsRequests: filters.acceptsRequests,
-        availability: filters.availability,
-        categoryId: filters.categoryId,
-        cursor: append ? this.directoryNextCursor : null,
-        hasLocation: filters.hasLocation,
-        search: filters.search,
-        sort: filters.sort,
+        acceptsRequests: requestFilters.acceptsRequests,
+        availability: requestFilters.availability,
+        categoryId: requestFilters.categoryId,
+        cursor: requestCursor,
+        hasLocation: requestFilters.hasLocation,
+        search: requestFilters.search,
+        sort: requestFilters.sort,
       })
-      this.directoryLoading = false
-      this.directoryLoadingMore = false
-      if (!response.success || !response.data) {
-        this.directoryError = response.error ?? 'request_failed'
-        if (!append) {
-          this.directory = []
-          this.directoryNextCursor = null
+      const isCurrentRequest =
+        requestGeneration === this.directoryRequestGeneration &&
+        sameDirectoryFilters(this.directoryFilters, requestFilters)
+      if (!isCurrentRequest) {
+        if (requestGeneration === this.directoryRequestGeneration) {
+          if (append) this.directoryLoadingMore = false
+          else this.directoryLoading = false
         }
         return false
       }
+      if (append) this.directoryLoadingMore = false
+      else this.directoryLoading = false
+      if (!response.success || !response.data) {
+        if (append) {
+          this.directoryAppendError = response.error ?? 'request_failed'
+          return false
+        }
+        this.directoryError = response.error ?? 'request_failed'
+        this.directory = []
+        this.directoryNextCursor = null
+        return false
+      }
       this.categories = response.data.categories ?? this.categories
       this.directory = append
         ? mergeById(this.directory, response.data.companies)
         : response.data.companies
       this.directoryNextCursor = response.data.nextCursor
-      this.directoryError = ''
+      if (append) this.directoryAppendError = ''
+      else this.directoryError = ''
       return true
     },
     async loadCompany(companyId: string): Promise<boolean> {
@@ -206,37 +253,64 @@ export const useCompaniesStore = defineStore('companies', {
     ): Promise<boolean> {
       if (
         append &&
-        (!this.myRequestsNextCursor || this.myRequestsLoadingMore)
+        (this.myRequestsLoading ||
+          this.myRequestsLoadingMore ||
+          !this.myRequestsNextCursor ||
+          list !== this.myRequestsList)
       ) {
         return false
       }
-      if (append) this.myRequestsLoadingMore = true
-      else this.myRequestsLoading = true
+      if (append) {
+        this.myRequestsLoadingMore = true
+      } else {
+        this.myRequestsRequestGeneration += 1
+        this.myRequestsLoading = true
+        this.myRequestsLoadingMore = false
+        this.myRequestsAppendError = ''
+        this.myRequestsError = ''
+        this.myRequestsList = list
+      }
       this.myRequestsLoaded = true
-      this.myRequestsList = list
       const deviceScopeVersion = this.deviceScopeVersion
+      const requestGeneration = this.myRequestsRequestGeneration
+      const requestCursor = append ? this.myRequestsNextCursor : null
       const response = await nuiCall<CompanyRequestPage>(
         'companies:my-requests',
         {
-          cursor: append ? this.myRequestsNextCursor : null,
+          cursor: requestCursor,
           list,
         },
       )
-      this.myRequestsLoading = false
-      this.myRequestsLoadingMore = false
-      if (deviceScopeVersion !== this.deviceScopeVersion) return false
+      const isCurrentRequest =
+        deviceScopeVersion === this.deviceScopeVersion &&
+        requestGeneration === this.myRequestsRequestGeneration &&
+        list === this.myRequestsList
+      if (!isCurrentRequest) {
+        if (
+          deviceScopeVersion === this.deviceScopeVersion &&
+          requestGeneration === this.myRequestsRequestGeneration
+        ) {
+          if (append) this.myRequestsLoadingMore = false
+          else this.myRequestsLoading = false
+        }
+        return false
+      }
+      if (append) this.myRequestsLoadingMore = false
+      else this.myRequestsLoading = false
       if (!response.success || !response.data) {
+        if (append) {
+          this.myRequestsAppendError = response.error ?? 'request_failed'
+          return false
+        }
         this.myRequestsError = response.error ?? 'request_failed'
-        if (!append) {
-          this.myRequests = []
-          this.myRequestsNextCursor = null
-          if (
-            response.error === 'anonymous_sim' ||
-            response.error === 'device_not_found' ||
-            response.error === 'no_sim'
-          ) {
-            this.customerUnreadCount = 0
-          }
+        this.myRequests = []
+        this.myRequestsNextCursor = null
+        if (
+          response.error === 'anonymous_sim' ||
+          response.error === 'device_not_found' ||
+          response.error === 'no_sim'
+        ) {
+          this.customerUnreadCount = 0
         }
         return false
       }
@@ -245,7 +319,8 @@ export const useCompaniesStore = defineStore('companies', {
         : response.data.requests
       this.myRequestsNextCursor = response.data.nextCursor
       this.customerUnreadCount = Math.max(0, response.data.unreadCount)
-      this.myRequestsError = ''
+      if (append) this.myRequestsAppendError = ''
+      else this.myRequestsError = ''
       return true
     },
     async loadRequest(requestId: string): Promise<boolean> {
@@ -524,8 +599,10 @@ export const useCompaniesStore = defineStore('companies', {
     },
     resetDeviceScope(): void {
       this.deviceScopeVersion += 1
+      this.myRequestsRequestGeneration += 1
       this.customerUnreadCount = 0
       this.myRequests = []
+      this.myRequestsAppendError = ''
       this.myRequestsError = ''
       this.myRequestsLoaded = false
       this.myRequestsLoading = false
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index efe4e4e..ab8f39d 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -1,42 +1,47 @@
 <script setup lang="ts">
 import {
-  kActions,
-  kActionsButton,
-  kActionsGroup,
-  kBadge,
-  kBlock,
-  kBlockTitle,
-  kButton,
-  kCard,
-  kChip,
-  kDialog,
-  kDialogButton,
-  kGlass,
-  kIcon,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kMessage,
-  kMessagebar,
-  kMessages,
-  kMessagesTitle,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kProgressbar,
-  kRadio,
-  kSearchbar,
-  kSegmented,
-  kSegmentedButton,
-  kSheet,
-  kTabbar,
-  kTabbarLink,
-  kToast,
-  kToggle,
-  kToolbarPane,
-} from 'konsta/vue'
+  SkyActionSheet,
+  SkyActionButton,
+  SkyActionGroup,
+  SkyBadge,
+  SkyBlock,
+  SkyBlockTitle,
+  SkyButton,
+  SkyCard,
+  SkyChip,
+  SkyDialog,
+  SkyDialogButton,
+  SkyEmptyState,
+  SkySurface,
+  SkyIcon,
+  SkyInfiniteLoader,
+  SkyLink,
+  SkyList,
+  SkyListCard,
+  SkyField,
+  SkyListItem,
+  SkyMessage,
+  SkyMessagebar,
+  SkyMessages,
+  SkyMessagesTitle,
+  SkySpinner,
+  SkyProgress,
+  SkyRadio,
+  SkySearchbar,
+  SkySegmented,
+  SkySegmentedButton,
+  SkyAppPage,
+  SkyNavbar,
+  SkyScrollArea,
+  SkyScrollRail,
+  SkySection,
+  SkySheet,
+  SkyTabButton,
+  SkyTabBar,
+  SkyToast,
+  SkyToggle,
+  SkyToolbarPane,
+} from '@/ui'
 import {
   BadgeCheck,
   BriefcaseBusiness,
@@ -183,9 +188,6 @@ const directoryFilters = computed<CompanyDirectoryFilters>(() => ({
   search: search.value.trim(),
   sort: 'relevance',
 }))
-const availableCompanies = computed(() =>
-  companies.directory.filter((company) => company.availability === 'available'),
-)
 const filtersActive = computed(
   () => Boolean(search.value.trim()) || Boolean(selectedCategory.value),
 )
@@ -354,6 +356,15 @@ function companyInitials(company: CompanySummary): string {
     .toUpperCase()
 }
 
+function companySubtitle(company: CompanySummary): string {
+  return [
+    company.location?.district,
+    company.serviceSummary || company.description,
+  ]
+    .filter(Boolean)
+    .join(' · ')
+}
+
 function categoryLabel(categoryId: string, fallback: string): string {
   const key = `Apps.companies.categories.${categoryId}`
   const translated = phone.t(key)
@@ -395,9 +406,12 @@ function eventLabel(event: CompanyRequestEvent): string {
 }
 
 function resetDirectoryFilters(): void {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+    searchTimer = undefined
+  }
   search.value = ''
   selectedCategory.value = null
-  void companies.loadCompanies(directoryFilters.value)
 }
 
 function queueDirectoryLoad(): void {
@@ -916,8 +930,17 @@ async function reloadConflict(): Promise<void> {
   if (companies.request) await companies.loadRequest(companies.request.id)
 }
 
-watch(search, queueDirectoryLoad)
-watch(selectedCategory, () => companies.loadCompanies(directoryFilters.value))
+watch([search, selectedCategory], ([, category], [, previousCategory]) => {
+  if (category === previousCategory) {
+    queueDirectoryLoad()
+    return
+  }
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+    searchTimer = undefined
+  }
+  void companies.loadCompanies(directoryFilters.value)
+})
 watch(requestList, () => {
   if (activeTab.value === 'requests')
     void companies.loadMyRequests(requestList.value)
@@ -927,6 +950,7 @@ watch(requestSheetOpened, async (opened) => {
   await nextTick()
   requestSheetContent.value?.scrollTo({ top: 0 })
 })
+
 watch(
   () => route.query.requestId,
   async (requestId) => {
@@ -1000,179 +1024,131 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
-    component="main"
+  <SkyAppPage
     class="companies-app"
-    :class="{ 'companies-app--dark': phone.isDarkMode }"
-    :colors="{ bgIos: 'bg-transparent' }"
-    :aria-label="phone.t('Apps.companies.name')"
+    :dark="phone.isDarkMode"
+    :label="phone.t('Apps.companies.name')"
   >
-    <div class="companies-backdrop" aria-hidden="true"></div>
-
-    <k-navbar :title="navbarTitle" class="companies-navbar">
-      <template v-if="screen !== 'root'" #left>
-        <k-navbar-back-link
-          :text="phone.t('Apps.companies.back')"
-          :show-text="false"
-          @click="goBack"
-        />
-      </template>
+    <SkyNavbar
+      :title="navbarTitle"
+      :show-back="screen !== 'root'"
+      :back-label="phone.t('Apps.companies.back')"
+      @back="goBack"
+    >
       <template
         v-if="
           screen === 'request' && requestOrigin === 'work' && companies.request
         "
         #right
       >
-        <k-link
+        <SkyLink
           component="button"
           icon-only
           :aria-label="phone.t('Apps.companies.actions')"
-          :link-props="{ type: 'button' }"
+          type="button"
           @click="workActionsOpened = true"
         >
           <MoreHorizontal :size="24" />
-        </k-link>
+        </SkyLink>
       </template>
-    </k-navbar>
+    </SkyNavbar>
 
-    <section
+    <SkyScrollArea
       v-if="screen === 'root' && activeTab === 'directory'"
       class="companies-content companies-directory"
+      with-tabbar
     >
       <div class="companies-search-wrap">
-        <k-searchbar
+        <SkySearchbar
           :value="search"
+          :clear-label="phone.t('Apps.companies.directory.resetFilters')"
           :placeholder="phone.t('Apps.companies.directory.searchPlaceholder')"
-          :disable-button="true"
           @input="search = eventValue($event)"
           @clear="search = ''"
         />
       </div>
 
-      <div
+      <SkyScrollRail
         class="companies-chip-row"
-        :aria-label="phone.t('Apps.companies.directory.categories')"
+        :label="phone.t('Apps.companies.directory.categories')"
       >
-        <k-chip
+        <SkyChip
           component="button"
           type="button"
-          :class="{ 'is-selected': selectedCategory === null }"
+          :selected="selectedCategory === null"
           @click="selectCategory(null)"
         >
           {{ phone.t('Apps.companies.directory.allCategories') }}
-        </k-chip>
-        <k-chip
+        </SkyChip>
+        <SkyChip
           v-for="category in companies.categories"
           :key="category.id"
           component="button"
           type="button"
-          :class="{ 'is-selected': selectedCategory === category.id }"
+          :selected="selectedCategory === category.id"
           @click="selectCategory(category.id)"
         >
           {{ categoryLabel(category.id, category.name) }}
-        </k-chip>
-      </div>
+        </SkyChip>
+      </SkyScrollRail>
 
-      <k-block
+      <SkyEmptyState
         v-if="companies.directoryLoading"
-        inset
-        strong
-        class="companies-state"
+        :title="phone.t('Apps.companies.loading.directory')"
       >
-        <k-preloader />
-        <span>{{ phone.t('Apps.companies.loading.directory') }}</span>
-      </k-block>
-      <k-block
+        <template #icon><SkySpinner /></template>
+      </SkyEmptyState>
+      <SkyEmptyState
         v-else-if="companies.directoryError"
-        inset
-        strong
-        class="companies-state"
+        tone="danger"
+        :title="phone.t('Apps.companies.states.directoryError')"
+        :body="errorText(companies.directoryError)"
       >
-        <CircleAlert :size="34" />
-        <strong>{{ phone.t('Apps.companies.states.directoryError') }}</strong>
-        <p>{{ errorText(companies.directoryError) }}</p>
-        <k-button rounded @click="companies.loadCompanies(directoryFilters)">
-          <RefreshCw :size="16" />
-          {{ phone.t('Apps.companies.tryAgain') }}
-        </k-button>
-      </k-block>
-      <k-block
-        v-else-if="!companies.directory.length"
-        inset
-        strong
-        class="companies-state"
-      >
-        <Building2 :size="36" />
-        <strong>
-          {{
-            phone.t(
-              filtersActive
-                ? 'Apps.companies.states.noResults'
-                : 'Apps.companies.states.noCompanies',
-            )
-          }}
-        </strong>
-        <p>
-          {{
-            phone.t(
-              filtersActive
-                ? 'Apps.companies.states.noResultsBody'
-                : 'Apps.companies.states.noCompaniesBody',
-            )
-          }}
-        </p>
-        <k-button v-if="filtersActive" rounded @click="resetDirectoryFilters">
-          {{ phone.t('Apps.companies.directory.resetFilters') }}
-        </k-button>
-      </k-block>
-      <template v-else>
-        <template v-if="availableCompanies.length">
-          <k-block-title>{{
-            phone.t('Apps.companies.directory.availableSection')
-          }}</k-block-title>
-          <div class="companies-featured-row">
-            <k-card
-              v-for="company in availableCompanies.slice(0, 4)"
-              :key="`available-${company.id}`"
-              component="button"
-              type="button"
-              class="company-feature-card"
-              @click="openCompany(company.id)"
-            >
-              <span class="company-logo company-logo--small">
-                <img
-                  v-if="company.logoUrl"
-                  :src="company.logoUrl"
-                  :alt="company.name"
-                />
-                <span v-else>{{ companyInitials(company) }}</span>
-              </span>
-              <strong>{{ company.name }}</strong>
-              <span>{{
-                company.location?.district ??
-                categoryLabel(company.categoryId, company.categoryName)
-              }}</span>
-              <k-badge :class="statusClass(company.availability)">
-                {{
-                  phone.t(`Apps.companies.availability.${company.availability}`)
-                }}
-              </k-badge>
-            </k-card>
-          </div>
+        <template #icon><CircleAlert :size="34" /></template>
+        <template #actions>
+          <SkyButton rounded @click="companies.loadCompanies(directoryFilters)">
+            <RefreshCw :size="16" />
+            {{ phone.t('Apps.companies.tryAgain') }}
+          </SkyButton>
         </template>
-
-        <k-block-title>{{
-          phone.t('Apps.companies.directory.allCompanies')
-        }}</k-block-title>
-        <k-list inset strong class="company-list">
-          <k-list-item
+      </SkyEmptyState>
+      <SkyEmptyState
+        v-else-if="!companies.directory.length"
+        :title="
+          phone.t(
+            filtersActive
+              ? 'Apps.companies.states.noResults'
+              : 'Apps.companies.states.noCompanies',
+          )
+        "
+        :body="
+          phone.t(
+            filtersActive
+              ? 'Apps.companies.states.noResultsBody'
+              : 'Apps.companies.states.noCompaniesBody',
+          )
+        "
+      >
+        <template #icon><Building2 :size="36" /></template>
+        <template v-if="filtersActive" #actions>
+          <SkyButton rounded @click="resetDirectoryFilters">
+            {{ phone.t('Apps.companies.directory.resetFilters') }}
+          </SkyButton>
+        </template>
+      </SkyEmptyState>
+      <SkySection
+        v-else
+        :title="phone.t('Apps.companies.directory.allCompanies')"
+      >
+        <SkyListCard class="company-list">
+          <SkyListItem
             v-for="company in companies.directory"
             :key="company.id"
             link
             link-component="button"
             :link-props="{ type: 'button' }"
             :title="company.name"
-            :subtitle="company.serviceSummary || company.description"
+            :subtitle="companySubtitle(company)"
             @click="openCompany(company.id)"
           >
             <template #media>
@@ -1187,101 +1163,89 @@ onBeforeUnmount(() => {
             </template>
             <template #after>
               <span class="company-row-after">
-                <k-badge :class="statusClass(company.availability)">
+                <SkyBadge :class="statusClass(company.availability)">
                   {{
                     phone.t(
                       `Apps.companies.availability.${company.availability}`,
                     )
                   }}
-                </k-badge>
-                <small>{{
-                  company.location?.district ??
-                  categoryLabel(company.categoryId, company.categoryName)
-                }}</small>
+                </SkyBadge>
               </span>
             </template>
-          </k-list-item>
-        </k-list>
-        <k-button
-          v-if="companies.directoryNextCursor"
-          outline
-          rounded
-          class="companies-load-more"
-          :disabled="companies.directoryLoadingMore"
-          @click="companies.loadCompanies(directoryFilters, true)"
-        >
-          <k-preloader v-if="companies.directoryLoadingMore" />
-          <span v-else>{{ phone.t('Apps.companies.loadMore') }}</span>
-        </k-button>
-      </template>
-    </section>
+          </SkyListItem>
+        </SkyListCard>
+        <SkyInfiniteLoader
+          :has-more="Boolean(companies.directoryNextCursor)"
+          :loading="companies.directoryLoadingMore"
+          :error="companies.directoryAppendError"
+          :load-key="companies.directoryNextCursor"
+          :loading-label="phone.t('Apps.companies.loading.directory')"
+          :retry-label="phone.t('Apps.companies.tryAgain')"
+          @load="companies.loadCompanies(directoryFilters, true)"
+          @retry="companies.loadCompanies(directoryFilters, true)"
+        />
+      </SkySection>
+    </SkyScrollArea>
 
-    <section
+    <SkyScrollArea
       v-else-if="screen === 'root' && activeTab === 'requests'"
       class="companies-content"
+      with-tabbar
     >
       <div class="companies-segment-wrap">
-        <k-segmented strong rounded>
-          <k-segmented-button
+        <SkySegmented>
+          <SkySegmentedButton
             :active="requestList === 'open'"
             @click="requestList = 'open'"
           >
             {{ phone.t('Apps.companies.requests.open') }}
-          </k-segmented-button>
-          <k-segmented-button
+          </SkySegmentedButton>
+          <SkySegmentedButton
             :active="requestList === 'closed'"
             @click="requestList = 'closed'"
           >
             {{ phone.t('Apps.companies.requests.closed') }}
-          </k-segmented-button>
-        </k-segmented>
+          </SkySegmentedButton>
+        </SkySegmented>
       </div>
 
-      <k-block
+      <SkyEmptyState
         v-if="companies.myRequestsLoading"
-        inset
-        strong
-        class="companies-state"
+        :title="phone.t('Apps.companies.loading.requests')"
       >
-        <k-preloader />
-        <span>{{ phone.t('Apps.companies.loading.requests') }}</span>
-      </k-block>
-      <k-block
+        <template #icon><SkySpinner /></template>
+      </SkyEmptyState>
+      <SkyEmptyState
         v-else-if="companies.myRequestsError"
-        inset
-        strong
-        class="companies-state"
+        tone="danger"
+        :title="phone.t('Apps.companies.states.requestsError')"
+        :body="errorText(companies.myRequestsError)"
       >
-        <CircleAlert :size="34" />
-        <strong>{{ phone.t('Apps.companies.states.requestsError') }}</strong>
-        <p>{{ errorText(companies.myRequestsError) }}</p>
-        <k-button rounded @click="companies.loadMyRequests(requestList)">
-          {{ phone.t('Apps.companies.tryAgain') }}
-        </k-button>
-      </k-block>
-      <k-block
+        <template #icon><CircleAlert :size="34" /></template>
+        <template #actions>
+          <SkyButton rounded @click="companies.loadMyRequests(requestList)">
+            {{ phone.t('Apps.companies.tryAgain') }}
+          </SkyButton>
+        </template>
+      </SkyEmptyState>
+      <SkyEmptyState
         v-else-if="!companies.myRequests.length"
-        inset
-        strong
-        class="companies-state"
-      >
-        <ClipboardList :size="36" />
-        <strong>{{
+        :title="
           phone.t(
             `Apps.companies.states.no${requestList === 'open' ? 'Open' : 'Closed'}Requests`,
           )
-        }}</strong>
-        <p>{{ phone.t('Apps.companies.states.noRequestsBody') }}</p>
-        <k-button
-          v-if="requestList === 'open'"
-          rounded
-          @click="selectTab('directory')"
-        >
-          {{ phone.t('Apps.companies.requests.findCompany') }}
-        </k-button>
-      </k-block>
-      <k-list v-else inset strong class="company-request-list">
-        <k-list-item
+        "
+        :body="phone.t('Apps.companies.states.noRequestsBody')"
+      >
+        <template #icon><ClipboardList :size="36" /></template>
+        <template v-if="requestList === 'open'" #actions>
+          <SkyButton rounded @click="selectTab('directory')">
+            {{ phone.t('Apps.companies.requests.findCompany') }}
+          </SkyButton>
+        </template>
+      </SkyEmptyState>
+      <SkyListCard v-else class="company-request-list">
+        <SkyListItem
           v-for="item in companies.myRequests"
           :key="item.id"
           link
@@ -1299,66 +1263,66 @@ onBeforeUnmount(() => {
           </template>
           <template #after>
             <span class="request-row-after">
-              <k-badge v-if="item.unreadCount" class="is-unread">{{
+              <SkyBadge v-if="item.unreadCount" class="is-unread">{{
                 item.unreadCount
-              }}</k-badge>
-              <k-badge :class="statusClass(item.status)">
+              }}</SkyBadge>
+              <SkyBadge :class="statusClass(item.status)">
                 {{ phone.t(`Apps.companies.requestStatuses.${item.status}`) }}
-              </k-badge>
+              </SkyBadge>
             </span>
           </template>
-        </k-list-item>
-      </k-list>
-      <k-button
-        v-if="companies.myRequestsNextCursor"
-        outline
-        rounded
-        class="companies-load-more"
-        :disabled="companies.myRequestsLoadingMore"
-        @click="companies.loadMyRequests(requestList, true)"
-      >
-        {{ phone.t('Apps.companies.loadMore') }}
-      </k-button>
-    </section>
+        </SkyListItem>
+      </SkyListCard>
+      <SkyInfiniteLoader
+        v-if="
+          !companies.myRequestsLoading &&
+          !companies.myRequestsError &&
+          companies.myRequests.length
+        "
+        :has-more="Boolean(companies.myRequestsNextCursor)"
+        :loading="companies.myRequestsLoadingMore"
+        :error="companies.myRequestsAppendError"
+        :load-key="companies.myRequestsNextCursor"
+        :loading-label="phone.t('Apps.companies.loading.requests')"
+        :retry-label="phone.t('Apps.companies.tryAgain')"
+        @load="companies.loadMyRequests(requestList, true)"
+        @retry="companies.loadMyRequests(requestList, true)"
+      />
+    </SkyScrollArea>
 
-    <section
+    <SkyScrollArea
       v-else-if="screen === 'root' && activeTab === 'work'"
       class="companies-content companies-work"
+      with-tabbar
     >
-      <k-block
+      <SkyEmptyState
         v-if="companies.workContextLoading"
-        inset
-        strong
-        class="companies-state"
+        :title="phone.t('Apps.companies.loading.work')"
       >
-        <k-preloader />
-        <span>{{ phone.t('Apps.companies.loading.work') }}</span>
-      </k-block>
-      <k-block
+        <template #icon><SkySpinner /></template>
+      </SkyEmptyState>
+      <SkyEmptyState
         v-else-if="companies.workContextError"
-        inset
-        strong
-        class="companies-state"
+        tone="danger"
+        :title="phone.t('Apps.companies.states.workError')"
+        :body="errorText(companies.workContextError)"
       >
-        <CircleAlert :size="34" />
-        <strong>{{ phone.t('Apps.companies.states.workError') }}</strong>
-        <p>{{ errorText(companies.workContextError) }}</p>
-        <k-button rounded @click="selectTab('work')">
-          {{ phone.t('Apps.companies.tryAgain') }}
-        </k-button>
-      </k-block>
-      <k-block
+        <template #icon><CircleAlert :size="34" /></template>
+        <template #actions>
+          <SkyButton rounded @click="selectTab('work')">
+            {{ phone.t('Apps.companies.tryAgain') }}
+          </SkyButton>
+        </template>
+      </SkyEmptyState>
+      <SkyEmptyState
         v-else-if="!companies.workContext?.authorized"
-        inset
-        strong
-        class="companies-state"
+        :title="phone.t('Apps.companies.work.notAuthorized')"
+        :body="phone.t('Apps.companies.work.notAuthorizedBody')"
       >
-        <BriefcaseBusiness :size="38" />
-        <strong>{{ phone.t('Apps.companies.work.notAuthorized') }}</strong>
-        <p>{{ phone.t('Apps.companies.work.notAuthorizedBody') }}</p>
-      </k-block>
+        <template #icon><BriefcaseBusiness :size="38" /></template>
+      </SkyEmptyState>
       <template v-else-if="companies.workContext && workCompany">
-        <k-card class="work-identity-card">
+        <SkyCard class="work-identity-card">
           <span class="company-logo company-logo--large">
             <img
               v-if="workCompany.logoUrl"
@@ -1374,112 +1338,111 @@ onBeforeUnmount(() => {
               phone.t(`Apps.companies.roles.${companies.workContext.role}`)
             }}</span>
           </span>
-          <k-badge :class="statusClass(workCompany.availability)">
+          <SkyBadge :class="statusClass(workCompany.availability)">
             {{
               phone.t(`Apps.companies.availability.${workCompany.availability}`)
             }}
-          </k-badge>
-        </k-card>
+          </SkyBadge>
+        </SkyCard>
 
-        <k-block-title>{{
-          phone.t('Apps.companies.work.publicAvailability')
-        }}</k-block-title>
-        <k-segmented strong rounded class="availability-segmented">
-          <k-segmented-button
-            v-for="availability in availabilityValues"
-            :key="availability"
-            :active="workCompany.availability === availability"
-            :disabled="
-              !companies.workContext.permissions.canSetAvailability ||
-              companies.mutating
-            "
-            @click="setCompanyAvailability(availability)"
-          >
-            {{ phone.t(`Apps.companies.availability.${availability}`) }}
-          </k-segmented-button>
-        </k-segmented>
+        <section class="work-control-card">
+          <SkyBlockTitle>{{
+            phone.t('Apps.companies.work.publicAvailability')
+          }}</SkyBlockTitle>
+          <SkySegmented class="availability-segmented">
+            <SkySegmentedButton
+              v-for="availability in availabilityValues"
+              :key="availability"
+              :active="workCompany.availability === availability"
+              :disabled="
+                !companies.workContext.permissions.canSetAvailability ||
+                companies.mutating
+              "
+              @click="setCompanyAvailability(availability)"
+            >
+              {{ phone.t(`Apps.companies.availability.${availability}`) }}
+            </SkySegmentedButton>
+          </SkySegmented>
 
-        <k-list inset strong>
-          <k-list-item
-            v-if="companies.workContext.permissions.canTakeCalls"
-            :title="phone.t('Apps.companies.work.takeCalls')"
-            :subtitle="phone.t('Apps.companies.work.takeCallsBody')"
-          >
-            <template #media><PhoneCall :size="20" /></template>
-            <template #after>
-              <k-toggle
-                :checked="companies.workContext.callAvailable"
-                :disabled="companies.mutating"
-                :aria-label="phone.t('Apps.companies.work.takeCalls')"
-                @change="toggleCallAvailability"
-              />
-            </template>
-          </k-list-item>
-          <k-list-item
-            v-if="companies.workContext.role === 'manager'"
-            link
-            link-component="button"
-            :link-props="{ type: 'button' }"
-            :title="phone.t('Apps.companies.manager.title')"
-            :subtitle="phone.t('Apps.companies.manager.subtitle')"
-            @click="openManager"
-          >
-            <template #media><Settings2 :size="20" /></template>
-          </k-list-item>
-        </k-list>
+          <SkyList inset strong class="work-action-list">
+            <SkyListItem
+              v-if="companies.workContext.permissions.canTakeCalls"
+              :title="phone.t('Apps.companies.work.takeCalls')"
+              :subtitle="phone.t('Apps.companies.work.takeCallsBody')"
+            >
+              <template #media><PhoneCall :size="20" /></template>
+              <template #after>
+                <SkyToggle
+                  :checked="companies.workContext.callAvailable"
+                  :disabled="companies.mutating"
+                  :aria-label="phone.t('Apps.companies.work.takeCalls')"
+                  @change="toggleCallAvailability"
+                />
+              </template>
+            </SkyListItem>
+            <SkyListItem
+              v-if="companies.workContext.role === 'manager'"
+              link
+              link-component="button"
+              :link-props="{ type: 'button' }"
+              :title="phone.t('Apps.companies.manager.title')"
+              :subtitle="phone.t('Apps.companies.manager.subtitle')"
+              @click="openManager"
+            >
+              <template #media><Settings2 :size="20" /></template>
+            </SkyListItem>
+          </SkyList>
+        </section>
 
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.work.overview')
-        }}</k-block-title>
+        }}</SkyBlockTitle>
         <div class="work-metrics">
-          <k-glass :highlight="false" class="work-metric">
+          <SkySurface :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.new }}</strong>
             <span>{{ phone.t('Apps.companies.work.metrics.new') }}</span>
-          </k-glass>
-          <k-glass :highlight="false" class="work-metric">
+          </SkySurface>
+          <SkySurface :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.assigned }}</strong>
             <span>{{ phone.t('Apps.companies.work.metrics.assigned') }}</span>
-          </k-glass>
-          <k-glass :highlight="false" class="work-metric">
+          </SkySurface>
+          <SkySurface :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.waiting }}</strong>
             <span>{{ phone.t('Apps.companies.work.metrics.waiting') }}</span>
-          </k-glass>
-          <k-glass :highlight="false" class="work-metric">
+          </SkySurface>
+          <SkySurface :highlight="false" class="work-metric">
             <strong>{{ companies.workContext.metrics.completedToday }}</strong>
             <span>{{
               phone.t('Apps.companies.work.metrics.completedToday')
             }}</span>
-          </k-glass>
+          </SkySurface>
         </div>
       </template>
-    </section>
+    </SkyScrollArea>
 
-    <section
+    <SkyScrollArea
       v-else-if="screen === 'company'"
       class="companies-content company-profile"
     >
-      <k-block
+      <SkyEmptyState
         v-if="companies.directoryLoading && !activeCompany"
-        inset
-        strong
-        class="companies-state"
+        :title="phone.t('Apps.companies.loading.profile')"
       >
-        <k-preloader />
-        <span>{{ phone.t('Apps.companies.loading.profile') }}</span>
-      </k-block>
-      <k-block
+        <template #icon><SkySpinner /></template>
+      </SkyEmptyState>
+      <SkyEmptyState
         v-else-if="companies.directoryError || !activeCompany"
-        inset
-        strong
-        class="companies-state"
+        tone="danger"
+        :title="phone.t('Apps.companies.states.profileError')"
+        :body="errorText(companies.directoryError)"
       >
-        <CircleAlert :size="34" />
-        <strong>{{ phone.t('Apps.companies.states.profileError') }}</strong>
-        <p>{{ errorText(companies.directoryError) }}</p>
-        <k-button rounded @click="goBack">{{
-          phone.t('Apps.companies.back')
-        }}</k-button>
-      </k-block>
+        <template #icon><CircleAlert :size="34" /></template>
+        <template #actions>
+          <SkyButton rounded @click="goBack">
+            {{ phone.t('Apps.companies.back') }}
+          </SkyButton>
+        </template>
+      </SkyEmptyState>
       <template v-else>
         <div
           class="company-cover"
@@ -1498,7 +1461,7 @@ onBeforeUnmount(() => {
             <span v-else>{{ companyInitials(activeCompany) }}</span>
           </span>
         </div>
-        <k-block class="company-profile-heading">
+        <SkyBlock class="company-profile-heading">
           <span class="company-profile-heading__eyebrow">
             {{
               categoryLabel(
@@ -1513,13 +1476,13 @@ onBeforeUnmount(() => {
             />
           </span>
           <h1>{{ activeCompany.name }}</h1>
-          <k-badge :class="statusClass(activeCompany.availability)">
+          <SkyBadge :class="statusClass(activeCompany.availability)">
             {{
               phone.t(
                 `Apps.companies.availability.${activeCompany.availability}`,
               )
             }}
-          </k-badge>
+          </SkyBadge>
           <small>
             {{
               phone.t('Apps.companies.profile.updated', {
@@ -1528,9 +1491,9 @@ onBeforeUnmount(() => {
             }}
           </small>
           <p>{{ activeCompany.description }}</p>
-        </k-block>
+        </SkyBlock>
 
-        <k-card v-if="activeCompany.announcement" class="company-announcement">
+        <SkyCard v-if="activeCompany.announcement" class="company-announcement">
           <Megaphone :size="20" />
           <span>
             <strong>{{
@@ -1538,32 +1501,32 @@ onBeforeUnmount(() => {
             }}</strong>
             <span>{{ activeCompany.announcement.body }}</span>
           </span>
-        </k-card>
+        </SkyCard>
 
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.profile.location')
-        }}</k-block-title>
-        <k-list inset strong>
-          <k-list-item
+        }}</SkyBlockTitle>
+        <SkyList inset strong>
+          <SkyListItem
             v-if="activeCompany.location"
             :title="activeCompany.location.label"
             :subtitle="`${activeCompany.location.address} · ${activeCompany.location.district}`"
           >
             <template #media><MapPin :size="20" /></template>
-          </k-list-item>
-          <k-list-item
+          </SkyListItem>
+          <SkyListItem
             v-else
             :title="phone.t('Apps.companies.profile.noLocation')"
           >
             <template #media><MapPin :size="20" /></template>
-          </k-list-item>
-        </k-list>
+          </SkyListItem>
+        </SkyList>
 
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.profile.hours')
-        }}</k-block-title>
-        <k-list inset strong>
-          <k-list-item
+        }}</SkyBlockTitle>
+        <SkyList inset strong>
+          <SkyListItem
             v-for="hours in activeCompany.hours"
             :key="hours.day"
             :title="phone.t(`Apps.companies.days.${weekdayKeys[hours.day]}`)"
@@ -1574,18 +1537,18 @@ onBeforeUnmount(() => {
             "
           >
             <template #media><Clock3 :size="19" /></template>
-          </k-list-item>
-          <k-list-item
+          </SkyListItem>
+          <SkyListItem
             v-if="!activeCompany.hours.length"
             :title="phone.t('Apps.companies.profile.byAvailability')"
           />
-        </k-list>
+        </SkyList>
 
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.profile.services')
-        }}</k-block-title>
-        <k-list inset strong>
-          <k-list-item
+        }}</SkyBlockTitle>
+        <SkyList inset strong>
+          <SkyListItem
             v-for="service in activeCompany.services.filter(
               (item) => item.active,
             )"
@@ -1594,21 +1557,21 @@ onBeforeUnmount(() => {
             :subtitle="service.description"
             :after="service.priceText ?? undefined"
           />
-          <k-list-item
+          <SkyListItem
             v-if="!activeCompany.services.some((service) => service.active)"
             :title="phone.t('Apps.companies.profile.noServices')"
           />
-        </k-list>
+        </SkyList>
 
-        <k-glass :highlight="false" class="company-profile-actions">
-          <k-button
+        <SkySurface :highlight="false" class="company-profile-actions">
+          <SkyButton
             rounded
             :disabled="!activeCompany.canCall || !activeCompany.phoneNumber"
             @click="callNumber(activeCompany.phoneNumber)"
           >
             <Phone :size="17" />{{ phone.t('Apps.companies.profile.call') }}
-          </k-button>
-          <k-button
+          </SkyButton>
+          <SkyButton
             rounded
             outline
             :disabled="!activeCompany.canMessage || !activeCompany.phoneNumber"
@@ -1617,16 +1580,16 @@ onBeforeUnmount(() => {
             <MessageCircle :size="17" />{{
               phone.t('Apps.companies.profile.message')
             }}
-          </k-button>
-          <k-button
+          </SkyButton>
+          <SkyButton
             rounded
             outline
             :disabled="!activeCompany.location"
             @click="setRoute(activeCompany)"
           >
             <MapPin :size="17" />{{ phone.t('Apps.companies.profile.route') }}
-          </k-button>
-          <k-button
+          </SkyButton>
+          <SkyButton
             rounded
             :disabled="!activeCompany.acceptsRequests"
             @click="openRequestComposer(activeCompany)"
@@ -1634,54 +1597,51 @@ onBeforeUnmount(() => {
             <ClipboardList :size="17" />{{
               phone.t('Apps.companies.profile.request')
             }}
-          </k-button>
-          <k-button rounded outline @click="shareCompany(activeCompany)">
+          </SkyButton>
+          <SkyButton rounded outline @click="shareCompany(activeCompany)">
             <Share2 :size="17" />{{ phone.t('Apps.easyShare.share') }}
-          </k-button>
-        </k-glass>
+          </SkyButton>
+        </SkySurface>
       </template>
-    </section>
+    </SkyScrollArea>
 
-    <section
+    <SkyScrollArea
       v-else-if="screen === 'request'"
       class="companies-content request-thread"
     >
-      <k-block
+      <SkyEmptyState
         v-if="companies.requestLoading"
-        inset
-        strong
-        class="companies-state"
+        :title="phone.t('Apps.companies.loading.request')"
       >
-        <k-preloader />
-        <span>{{ phone.t('Apps.companies.loading.request') }}</span>
-      </k-block>
-      <k-block
+        <template #icon><SkySpinner /></template>
+      </SkyEmptyState>
+      <SkyEmptyState
         v-else-if="companies.requestError || !companies.request"
-        inset
-        strong
-        class="companies-state"
+        tone="danger"
+        :title="phone.t('Apps.companies.states.requestError')"
+        :body="errorText(companies.requestError)"
       >
-        <CircleAlert :size="34" />
-        <strong>{{ phone.t('Apps.companies.states.requestError') }}</strong>
-        <p>{{ errorText(companies.requestError) }}</p>
-        <k-button rounded @click="goBack">{{
-          phone.t('Apps.companies.back')
-        }}</k-button>
-      </k-block>
+        <template #icon><CircleAlert :size="34" /></template>
+        <template #actions>
+          <SkyButton rounded @click="goBack">
+            {{ phone.t('Apps.companies.back') }}
+          </SkyButton>
+        </template>
+      </SkyEmptyState>
       <template v-else>
         <div class="request-thread-scroll">
-          <k-card class="request-summary-card">
+          <SkyCard class="request-summary-card">
             <span>
               <small>{{ companies.request.companyName }}</small>
               <strong>{{ companies.request.subject }}</strong>
             </span>
-            <k-badge :class="statusClass(companies.request.status)">
+            <SkyBadge :class="statusClass(companies.request.status)">
               {{
                 phone.t(
                   `Apps.companies.requestStatuses.${companies.request.status}`,
                 )
               }}
-            </k-badge>
+            </SkyBadge>
             <p>{{ companies.request.description }}</p>
             <span class="request-summary-card__meta">
               {{
@@ -1690,7 +1650,7 @@ onBeforeUnmount(() => {
               }}
               · {{ formatDate(companies.request.createdAt) }}
             </span>
-          </k-card>
+          </SkyCard>
 
           <div
             v-if="companies.request.media.length"
@@ -1708,9 +1668,9 @@ onBeforeUnmount(() => {
             />
           </div>
 
-          <k-block-title>{{
+          <SkyBlockTitle>{{
             phone.t('Apps.companies.requests.timeline')
-          }}</k-block-title>
+          }}</SkyBlockTitle>
           <div class="request-timeline">
             <div v-for="event in companies.request.events" :key="event.id">
               <span><Check :size="12" /></span>
@@ -1721,14 +1681,14 @@ onBeforeUnmount(() => {
             </div>
           </div>
 
-          <k-block-title>{{
+          <SkyBlockTitle>{{
             phone.t('Apps.companies.requests.conversation')
-          }}</k-block-title>
-          <k-messages class="company-messages">
-            <k-messages-title v-if="!companies.request.messages.length">
+          }}</SkyBlockTitle>
+          <SkyMessages class="company-messages">
+            <SkyMessagesTitle v-if="!companies.request.messages.length">
               {{ phone.t('Apps.companies.requests.noMessages') }}
-            </k-messages-title>
-            <k-message
+            </SkyMessagesTitle>
+            <SkyMessage
               v-for="message in companies.request.messages"
               :key="message.id"
               :type="message.isMine ? 'sent' : 'received'"
@@ -1736,18 +1696,18 @@ onBeforeUnmount(() => {
               :text="message.body"
               :text-footer="formatDate(message.createdAt)"
             />
-          </k-messages>
+          </SkyMessages>
 
           <div class="request-thread-actions">
-            <k-button
+            <SkyButton
               v-if="companies.request.actions.canCall"
               outline
               rounded
               @click="callRequestParty"
             >
               <Phone :size="16" />{{ phone.t('Apps.companies.requests.call') }}
-            </k-button>
-            <k-button
+            </SkyButton>
+            <SkyButton
               v-if="companies.request.actions.canCancel"
               outline
               rounded
@@ -1755,10 +1715,10 @@ onBeforeUnmount(() => {
               @click="cancelDialogOpened = true"
             >
               <X :size="16" />{{ phone.t('Apps.companies.requests.cancel') }}
-            </k-button>
+            </SkyButton>
           </div>
         </div>
-        <k-messagebar
+        <SkyMessagebar
           v-if="companies.request.actions.canReply"
           class="company-messagebar"
           :disabled="companies.mutating"
@@ -1768,28 +1728,28 @@ onBeforeUnmount(() => {
           @keydown.enter.exact="handleEnterAction($event, sendThreadMessage)"
         >
           <template #right>
-            <k-toolbar-pane class="ios:h-10">
-              <k-link
+            <SkyToolbarPane class="ios:h-10">
+              <SkyLink
                 component="button"
                 icon-only
                 :disabled="!canSendThreadMessage"
                 :aria-label="phone.t('Apps.companies.requests.sendReply')"
-                :link-props="{ type: 'button' }"
+                type="button"
                 @click="sendThreadMessage"
               >
                 <Send :size="22" />
-              </k-link>
-            </k-toolbar-pane>
+              </SkyLink>
+            </SkyToolbarPane>
           </template>
-        </k-messagebar>
+        </SkyMessagebar>
       </template>
-    </section>
+    </SkyScrollArea>
 
-    <section
+    <SkyScrollArea
       v-else-if="screen === 'manager' && workCompany"
       class="companies-content manager-screen"
     >
-      <k-card class="manager-intro">
+      <SkyCard class="manager-intro">
         <Settings2 :size="24" />
         <span>
           <strong>{{ workCompany.name }}</strong>
@@ -1799,13 +1759,13 @@ onBeforeUnmount(() => {
             })
           }}</span>
         </span>
-      </k-card>
+      </SkyCard>
 
-      <k-block-title>{{
+      <SkyBlockTitle>{{
         phone.t('Apps.companies.manager.availability')
-      }}</k-block-title>
-      <k-segmented strong rounded class="availability-segmented">
-        <k-segmented-button
+      }}</SkyBlockTitle>
+      <SkySegmented class="availability-segmented">
+        <SkySegmentedButton
           v-for="availability in availabilityValues"
           :key="availability"
           :active="workCompany.availability === availability"
@@ -1816,16 +1776,16 @@ onBeforeUnmount(() => {
           @click="setCompanyAvailability(availability)"
         >
           {{ phone.t(`Apps.companies.availability.${availability}`) }}
-        </k-segmented-button>
-      </k-segmented>
+        </SkySegmentedButton>
+      </SkySegmented>
 
       <template v-if="companies.workContext?.permissions.canManageProfile">
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.manager.profile')
-        }}</k-block-title>
+        }}</SkyBlockTitle>
         <div class="manager-media-grid">
-          <k-button
-            tonal
+          <SkyButton
+            variant="secondary"
             rounded
             large
             class="manager-media-button"
@@ -1839,9 +1799,9 @@ onBeforeUnmount(() => {
             />
             <span v-else><ImagePlus :size="22" /></span>
             <small>{{ phone.t('Apps.companies.manager.chooseCover') }}</small>
-          </k-button>
-          <k-button
-            tonal
+          </SkyButton>
+          <SkyButton
+            variant="secondary"
             rounded
             large
             class="manager-media-button"
@@ -1855,11 +1815,10 @@ onBeforeUnmount(() => {
             />
             <span v-else><ImagePlus :size="22" /></span>
             <small>{{ phone.t('Apps.companies.manager.chooseLogo') }}</small>
-          </k-button>
+          </SkyButton>
         </div>
-        <k-list inset strong class="manager-form-list">
-          <k-list-input
-            outline
+        <SkyList inset strong class="manager-form-list">
+          <SkyField
             type="textarea"
             maxlength="500"
             :label="phone.t('Apps.companies.manager.description')"
@@ -1869,44 +1828,40 @@ onBeforeUnmount(() => {
             :value="profileDraft.description"
             @input="profileDraft.description = eventValue($event)"
           />
-          <k-list-input
-            outline
+          <SkyField
             type="tel"
             readonly
             :label="phone.t('Apps.companies.manager.phoneNumber')"
-            :info="phone.t('Apps.companies.manager.phoneNumberManaged')"
+            :help="phone.t('Apps.companies.manager.phoneNumberManaged')"
             :value="
               workCompany.phoneNumber ??
               phone.t('Apps.companies.manager.noPhoneNumber')
             "
           />
-          <k-list-input
-            outline
+          <SkyField
             maxlength="80"
             :label="phone.t('Apps.companies.manager.locationLabel')"
             :value="profileDraft.locationLabel"
             @input="profileDraft.locationLabel = eventValue($event)"
           />
-          <k-list-input
-            outline
+          <SkyField
             maxlength="120"
             :label="phone.t('Apps.companies.manager.address')"
             :value="profileDraft.address"
             @input="profileDraft.address = eventValue($event)"
           />
-          <k-list-input
-            outline
+          <SkyField
             maxlength="80"
             :label="phone.t('Apps.companies.manager.district')"
             :value="profileDraft.district"
             @input="profileDraft.district = eventValue($event)"
           />
-          <k-list-item
+          <SkyListItem
             :title="phone.t('Apps.companies.manager.acceptRequests')"
             :subtitle="phone.t('Apps.companies.manager.acceptRequestsBody')"
           >
             <template #after>
-              <k-toggle
+              <SkyToggle
                 :checked="profileDraft.acceptsRequests"
                 :aria-label="phone.t('Apps.companies.manager.acceptRequests')"
                 @change="
@@ -1914,9 +1869,9 @@ onBeforeUnmount(() => {
                 "
               />
             </template>
-          </k-list-item>
-        </k-list>
-        <k-button
+          </SkyListItem>
+        </SkyList>
+        <SkyButton
           outline
           rounded
           class="manager-location"
@@ -1926,118 +1881,113 @@ onBeforeUnmount(() => {
           <Compass :size="16" />{{
             phone.t('Apps.companies.manager.useCurrentLocation')
           }}
-        </k-button>
+        </SkyButton>
         <small v-if="profileCoords" class="manager-location-status">
           {{ phone.t('Apps.companies.manager.locationReady') }}
         </small>
-        <k-button
+        <SkyButton
           rounded
           class="manager-save"
           :disabled="companies.mutating"
           @click="saveProfile"
         >
           {{ phone.t('Apps.companies.manager.saveProfile') }}
-        </k-button>
+        </SkyButton>
       </template>
 
       <template v-if="companies.workContext?.permissions.canManageHours">
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.manager.hours')
-        }}</k-block-title>
-        <k-card
+        }}</SkyBlockTitle>
+        <SkyCard
           v-for="(hours, index) in hoursDraft"
           :key="hours.day"
           class="manager-hours-card"
           :content-wrap="false"
         >
-          <k-list nested>
-            <k-list-item
+          <SkyList nested>
+            <SkyListItem
               :title="phone.t(`Apps.companies.days.${weekdayKeys[hours.day]}`)"
             >
               <template #after>
-                <k-toggle
+                <SkyToggle
                   :checked="!hours.isClosed"
                   :aria-label="phone.t('Apps.companies.manager.dayOpen')"
                   @change="hours.isClosed = !hours.isClosed"
                 />
               </template>
-            </k-list-item>
+            </SkyListItem>
             <template v-if="!hours.isClosed">
-              <k-list-input
-                outline
+              <SkyField
                 type="time"
                 :label="phone.t('Apps.companies.manager.opensAt')"
-                :value="hours.opensAt"
+                :value="hours.opensAt ?? ''"
                 @input="updateHour(index, 'opensAt', $event)"
               />
-              <k-list-input
-                outline
+              <SkyField
                 type="time"
                 :label="phone.t('Apps.companies.manager.closesAt')"
-                :value="hours.closesAt"
+                :value="hours.closesAt ?? ''"
                 @input="updateHour(index, 'closesAt', $event)"
               />
             </template>
-          </k-list>
-        </k-card>
-        <k-button
+          </SkyList>
+        </SkyCard>
+        <SkyButton
           rounded
           class="manager-save"
           :disabled="companies.mutating"
           @click="saveHours"
         >
           {{ phone.t('Apps.companies.manager.saveHours') }}
-        </k-button>
+        </SkyButton>
       </template>
 
       <template v-if="companies.workContext?.permissions.canManageServices">
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.manager.services')
-        }}</k-block-title>
-        <k-card
+        }}</SkyBlockTitle>
+        <SkyCard
           v-for="(service, index) in servicesDraft"
           :key="`${service.id}-${index}`"
           class="manager-service-card"
           :content-wrap="false"
         >
-          <k-list nested>
-            <k-list-input
-              outline
+          <SkyList nested>
+            <SkyField
               maxlength="80"
               :label="phone.t('Apps.companies.manager.serviceTitle')"
               :value="service.title"
               @input="updateService(index, 'title', $event)"
             />
-            <k-list-input
-              outline
+            <SkyField
               maxlength="240"
               :label="phone.t('Apps.companies.manager.serviceDescription')"
               :value="service.description"
               @input="updateService(index, 'description', $event)"
             />
-            <k-list-input
-              outline
+            <SkyField
               maxlength="40"
               :label="phone.t('Apps.companies.manager.priceText')"
               :value="service.priceText ?? ''"
               @input="updateService(index, 'priceText', $event)"
             />
-            <k-list-item
+            <SkyListItem
               :title="phone.t('Apps.companies.manager.serviceActive')"
             >
               <template #after>
-                <k-toggle
+                <SkyToggle
                   :checked="service.active"
                   :aria-label="phone.t('Apps.companies.manager.serviceActive')"
                   @change="service.active = !service.active"
                 />
               </template>
-            </k-list-item>
-            <k-list-item
+            </SkyListItem>
+            <SkyListItem
               :title="phone.t('Apps.companies.manager.serviceRequests')"
             >
               <template #after>
-                <k-toggle
+                <SkyToggle
                   :checked="service.acceptsRequests"
                   :aria-label="
                     phone.t('Apps.companies.manager.serviceRequests')
@@ -2045,9 +1995,9 @@ onBeforeUnmount(() => {
                   @change="service.acceptsRequests = !service.acceptsRequests"
                 />
               </template>
-            </k-list-item>
-          </k-list>
-          <k-button
+            </SkyListItem>
+          </SkyList>
+          <SkyButton
             outline
             rounded
             class="manager-remove"
@@ -2056,28 +2006,27 @@ onBeforeUnmount(() => {
             <Trash2 :size="15" />{{
               phone.t('Apps.companies.manager.removeService')
             }}
-          </k-button>
-        </k-card>
-        <k-button outline rounded class="manager-save" @click="addService">
+          </SkyButton>
+        </SkyCard>
+        <SkyButton outline rounded class="manager-save" @click="addService">
           <Plus :size="16" />{{ phone.t('Apps.companies.manager.addService') }}
-        </k-button>
-        <k-button
+        </SkyButton>
+        <SkyButton
           rounded
           class="manager-save"
           :disabled="companies.mutating"
           @click="saveServices"
         >
           {{ phone.t('Apps.companies.manager.saveServices') }}
-        </k-button>
+        </SkyButton>
       </template>
 
       <template v-if="companies.workContext?.permissions.canManageAnnouncement">
-        <k-block-title>{{
+        <SkyBlockTitle>{{
           phone.t('Apps.companies.manager.announcement')
-        }}</k-block-title>
-        <k-list inset strong class="manager-form-list">
-          <k-list-input
-            outline
+        }}</SkyBlockTitle>
+        <SkyList inset strong class="manager-form-list">
+          <SkyField
             type="textarea"
             maxlength="280"
             :label="phone.t('Apps.companies.manager.announcementText')"
@@ -2087,15 +2036,14 @@ onBeforeUnmount(() => {
             :value="announcementDraft.body"
             @input="announcementDraft.body = eventValue($event)"
           />
-          <k-list-input
-            outline
+          <SkyField
             type="datetime-local"
             :label="phone.t('Apps.companies.manager.expiresAt')"
             :value="announcementDraft.expiresAt"
             @input="announcementDraft.expiresAt = eventValue($event)"
           />
-        </k-list>
-        <k-button
+        </SkyList>
+        <SkyButton
           rounded
           class="manager-save"
           :disabled="companies.mutating"
@@ -2104,242 +2052,236 @@ onBeforeUnmount(() => {
           <Megaphone :size="16" />{{
             phone.t('Apps.companies.manager.publish')
           }}
-        </k-button>
+        </SkyButton>
       </template>
-    </section>
+    </SkyScrollArea>
 
-    <k-tabbar
+    <SkyTabBar
       v-if="screen === 'root'"
-      component="nav"
-      icons
-      labels
-      class="companies-tabbar bottom-0 left-0 fixed"
-      :aria-label="phone.t('Apps.companies.navigation')"
+      class="companies-tabbar"
+      :label="phone.t('Apps.companies.navigation')"
     >
-      <k-toolbar-pane>
-        <k-tabbar-link
-          component="button"
-          :active="activeTab === 'directory'"
-          :link-props="{ type: 'button' }"
-          @click="selectTab('directory')"
-        >
-          <template #label>{{
-            phone.t('Apps.companies.tabs.directory')
-          }}</template>
-          <template #icon
-            ><k-icon><Compass class="w-7 h-7" /></k-icon
-          ></template>
-        </k-tabbar-link>
-        <k-tabbar-link
-          component="button"
-          :active="activeTab === 'requests'"
-          :link-props="{ type: 'button' }"
-          @click="selectTab('requests')"
-        >
-          <template #label>{{
-            phone.t('Apps.companies.tabs.requests')
-          }}</template>
-          <template #icon>
-            <span class="companies-tab-icon">
-              <k-icon><ClipboardList class="w-7 h-7" /></k-icon>
-              <k-badge v-if="companies.customerUnreadCount">{{
-                companies.customerUnreadCount
-              }}</k-badge>
-            </span>
-          </template>
-        </k-tabbar-link>
-        <k-tabbar-link
-          component="button"
-          :active="activeTab === 'work'"
-          :link-props="{ type: 'button' }"
-          @click="selectTab('work')"
-        >
-          <template #label>{{ phone.t('Apps.companies.tabs.work') }}</template>
-          <template #icon>
-            <span class="companies-tab-icon">
-              <k-icon><BriefcaseBusiness class="w-7 h-7" /></k-icon>
-              <k-badge v-if="companies.workUnreadCount">{{
-                companies.workUnreadCount
-              }}</k-badge>
-            </span>
-          </template>
-        </k-tabbar-link>
-      </k-toolbar-pane>
-    </k-tabbar>
+      <SkyTabButton
+        :active="activeTab === 'directory'"
+        type="button"
+        @click="selectTab('directory')"
+      >
+        <template #label>{{
+          phone.t('Apps.companies.tabs.directory')
+        }}</template>
+        <template #icon
+          ><SkyIcon><Compass class="w-7 h-7" /></SkyIcon
+        ></template>
+      </SkyTabButton>
+      <SkyTabButton
+        :active="activeTab === 'requests'"
+        type="button"
+        @click="selectTab('requests')"
+      >
+        <template #label>{{
+          phone.t('Apps.companies.tabs.requests')
+        }}</template>
+        <template #icon>
+          <span class="companies-tab-icon">
+            <SkyIcon><ClipboardList class="w-7 h-7" /></SkyIcon>
+            <SkyBadge v-if="companies.customerUnreadCount">{{
+              companies.customerUnreadCount
+            }}</SkyBadge>
+          </span>
+        </template>
+      </SkyTabButton>
+      <SkyTabButton
+        :active="activeTab === 'work'"
+        type="button"
+        @click="selectTab('work')"
+      >
+        <template #label>{{ phone.t('Apps.companies.tabs.work') }}</template>
+        <template #icon>
+          <span class="companies-tab-icon">
+            <SkyIcon><BriefcaseBusiness class="w-7 h-7" /></SkyIcon>
+            <SkyBadge v-if="companies.workUnreadCount">{{
+              companies.workUnreadCount
+            }}</SkyBadge>
+          </span>
+        </template>
+      </SkyTabButton>
+    </SkyTabBar>
 
     <div class="companies-sheet">
-      <k-sheet
+      <SkySheet
         :opened="requestSheetOpened"
+        :aria-label="phone.t('Apps.companies.composer.title')"
         @backdropclick="requestSheetOpened = false"
+        @escape="requestSheetOpened = false"
       >
-      <section
-        v-if="requestSheetOpened && activeCompany"
-        ref="requestSheetContent"
-        class="companies-sheet__content"
-        role="dialog"
-        aria-modal="true"
-      >
-        <header>
-          <span><ClipboardList :size="23" /></span>
-          <div>
-            <small>{{ activeCompany.name }}</small>
-            <h2>{{ phone.t('Apps.companies.composer.title') }}</h2>
-          </div>
-          <k-link
-            component="button"
-            icon-only
-            :aria-label="phone.t('Apps.companies.close')"
-            :link-props="{ type: 'button' }"
-            @click="requestSheetOpened = false"
-          >
-            <X :size="19" />
-          </k-link>
-        </header>
-        <k-progressbar :progress="requestProgress" />
-        <k-block-title class="composer-service-title">{{
-          phone.t('Apps.companies.composer.chooseService')
-        }}</k-block-title>
-        <k-list inset strong class="composer-service-list">
-          <k-list-item
-            v-for="service in activeCompany.services.filter(
-              (item) => item.active && item.acceptsRequests,
-            )"
-            :key="service.id"
-            label
-            :title="service.title"
-            :subtitle="service.description"
-            title-font-size-ios="text-[15px]"
-            title-font-size-material="text-[15px]"
-            media-class="!py-2.5 !me-3"
-            inner-class="!py-2.5 !pe-safe-3"
-            title-wrap-class="!min-h-5"
-          >
-            <template #media>
-              <k-radio
-                name="company-request-service"
-                :value="service.id"
-                :checked="requestServiceId === service.id"
-                @change="requestServiceId = service.id"
-              />
-            </template>
-            <template v-if="service.priceText" #after>
-              <span class="composer-service-price">{{
-                service.priceText
-              }}</span>
-            </template>
-          </k-list-item>
-        </k-list>
-        <k-list inset strong class="composer-form-list">
-          <k-list-input
-            outline
-            maxlength="100"
-            :label="phone.t('Apps.companies.composer.subject')"
-            :placeholder="phone.t('Apps.companies.composer.subjectPlaceholder')"
-            :value="requestSubject"
-            :input-style="{ height: '38px' }"
-            @input="requestSubject = eventValue($event)"
-          />
-          <k-list-input
-            outline
-            type="textarea"
-            maxlength="1200"
-            :label="phone.t('Apps.companies.composer.description')"
-            :placeholder="
-              phone.t('Apps.companies.composer.descriptionPlaceholder')
-            "
-            :value="requestDescription"
-            :input-style="{
-              height: '72px',
-              lineHeight: '20px',
-              paddingBottom: '8px',
-              paddingTop: '8px',
-              resize: 'none',
-            }"
-            @input="requestDescription = eventValue($event)"
-          />
-        </k-list>
-        <k-card class="composer-contact-card">
-          <Phone :size="18" />
-          <span>
-            <strong>{{ phone.t('Apps.companies.composer.contact') }}</strong>
-            <span v-if="phone.device?.sim?.registered">
-              {{
-                phone.t('Apps.companies.composer.registeredSim', {
-                  number: maskedPhoneNumber(phone.device.sim.number),
-                })
-              }}
-            </span>
-            <span v-else>{{
-              phone.t('Apps.companies.composer.registeredSimRequired')
-            }}</span>
-          </span>
-        </k-card>
-        <k-button
-          outline
-          rounded
-          :disabled="requestMedia.length >= 3"
-          @click="chooseRequestMedia"
+        <section
+          v-if="requestSheetOpened && activeCompany"
+          ref="requestSheetContent"
+          class="companies-sheet__content"
         >
-          <ImagePlus :size="17" />
-          {{
-            phone.t('Apps.companies.composer.addPhotos', {
-              count: String(requestMedia.length),
-            })
-          }}
-        </k-button>
-        <div v-if="requestMedia.length" class="composer-media-strip">
-          <span v-for="media in requestMedia" :key="media.id">
-            <img
-              :src="media.url"
-              :alt="phone.t('Apps.companies.composer.selectedPhoto')"
-            />
-            <k-button
-              rounded
-              :aria-label="phone.t('Apps.companies.composer.removePhoto')"
-              @click="removeRequestMedia(media.id)"
+          <header>
+            <span><ClipboardList :size="23" /></span>
+            <div>
+              <small>{{ activeCompany.name }}</small>
+              <h2>{{ phone.t('Apps.companies.composer.title') }}</h2>
+            </div>
+            <SkyLink
+              component="button"
+              icon-only
+              :aria-label="phone.t('Apps.companies.close')"
+              type="button"
+              @click="requestSheetOpened = false"
             >
-              <X :size="13" />
-            </k-button>
-          </span>
-        </div>
-        <k-button
-          large
-          rounded
-          :disabled="!canSubmitRequest || companies.mutating"
-          @click="submitRequest"
-        >
-          <k-preloader v-if="companies.mutating" />
-          <span v-else>{{ phone.t('Apps.companies.composer.send') }}</span>
-        </k-button>
-      </section>
-      </k-sheet>
+              <X :size="19" />
+            </SkyLink>
+          </header>
+          <SkyProgress
+            :label="phone.t('Apps.companies.composer.review')"
+            :progress="requestProgress"
+          />
+          <SkyBlockTitle class="composer-service-title">{{
+            phone.t('Apps.companies.composer.chooseService')
+          }}</SkyBlockTitle>
+          <SkyList inset strong class="composer-service-list">
+            <SkyListItem
+              v-for="service in activeCompany.services.filter(
+                (item) => item.active && item.acceptsRequests,
+              )"
+              :key="service.id"
+              label
+              :title="service.title"
+              :subtitle="service.description"
+            >
+              <template #media>
+                <SkyRadio
+                  name="company-request-service"
+                  :value="service.id"
+                  :checked="requestServiceId === service.id"
+                  @change="requestServiceId = service.id"
+                />
+              </template>
+              <template v-if="service.priceText" #after>
+                <span class="composer-service-price">{{
+                  service.priceText
+                }}</span>
+              </template>
+            </SkyListItem>
+          </SkyList>
+          <SkyList inset strong class="composer-form-list">
+            <SkyField
+              outline
+              maxlength="100"
+              :label="phone.t('Apps.companies.composer.subject')"
+              :placeholder="
+                phone.t('Apps.companies.composer.subjectPlaceholder')
+              "
+              :value="requestSubject"
+              :input-style="{ height: '38px' }"
+              @input="requestSubject = eventValue($event)"
+            />
+            <SkyField
+              outline
+              type="textarea"
+              maxlength="1200"
+              :label="phone.t('Apps.companies.composer.description')"
+              :placeholder="
+                phone.t('Apps.companies.composer.descriptionPlaceholder')
+              "
+              :value="requestDescription"
+              :input-style="{
+                height: '72px',
+                lineHeight: '20px',
+                paddingBottom: '8px',
+                paddingTop: '8px',
+                resize: 'none',
+              }"
+              @input="requestDescription = eventValue($event)"
+            />
+          </SkyList>
+          <SkyCard class="composer-contact-card">
+            <Phone :size="18" />
+            <span>
+              <strong>{{ phone.t('Apps.companies.composer.contact') }}</strong>
+              <span v-if="phone.device?.sim?.registered">
+                {{
+                  phone.t('Apps.companies.composer.registeredSim', {
+                    number: maskedPhoneNumber(phone.device.sim.number),
+                  })
+                }}
+              </span>
+              <span v-else>{{
+                phone.t('Apps.companies.composer.registeredSimRequired')
+              }}</span>
+            </span>
+          </SkyCard>
+          <SkyButton
+            outline
+            rounded
+            :disabled="requestMedia.length >= 3"
+            @click="chooseRequestMedia"
+          >
+            <ImagePlus :size="17" />
+            {{
+              phone.t('Apps.companies.composer.addPhotos', {
+                count: String(requestMedia.length),
+              })
+            }}
+          </SkyButton>
+          <div v-if="requestMedia.length" class="composer-media-strip">
+            <span v-for="media in requestMedia" :key="media.id">
+              <img
+                :src="media.url"
+                :alt="phone.t('Apps.companies.composer.selectedPhoto')"
+              />
+              <SkyButton
+                rounded
+                :aria-label="phone.t('Apps.companies.composer.removePhoto')"
+                @click="removeRequestMedia(media.id)"
+              >
+                <X :size="13" />
+              </SkyButton>
+            </span>
+          </div>
+          <SkyButton
+            large
+            rounded
+            :disabled="!canSubmitRequest || companies.mutating"
+            @click="submitRequest"
+          >
+            <SkySpinner v-if="companies.mutating" />
+            <span v-else>{{ phone.t('Apps.companies.composer.send') }}</span>
+          </SkyButton>
+        </section>
+      </SkySheet>
     </div>
 
-    <k-actions
+    <SkyActionSheet
       v-if="workActionsOpened"
       :opened="workActionsOpened"
+      :label="phone.t('Apps.companies.actions')"
       @backdropclick="workActionsOpened = false"
+      @escape="workActionsOpened = false"
     >
-      <k-actions-group v-if="companies.request">
-        <k-actions-button
+      <SkyActionGroup v-if="companies.request">
+        <SkyActionButton
           v-if="companies.request.actions.canClaim"
           @click="claimActiveRequest"
         >
           {{ phone.t('Apps.companies.workActions.claim') }}
-        </k-actions-button>
-        <k-actions-button
+        </SkyActionButton>
+        <SkyActionButton
           v-if="companies.request.actions.canAssign"
           @click="openAssignment"
         >
           {{ phone.t('Apps.companies.workActions.assign') }}
-        </k-actions-button>
-        <k-actions-button
+        </SkyActionButton>
+        <SkyActionButton
           v-if="companies.request.actions.canCall"
           @click="callRequestParty"
         >
           {{ phone.t('Apps.companies.workActions.callCustomer') }}
-        </k-actions-button>
-        <k-actions-button
+        </SkyActionButton>
+        <SkyActionButton
           v-for="status in companies.request.actions.allowedStatuses"
           :key="status"
           @click="updateActiveRequestStatus(status)"
@@ -2349,207 +2291,157 @@ onBeforeUnmount(() => {
               status: phone.t(`Apps.companies.requestStatuses.${status}`),
             })
           }}
-        </k-actions-button>
-      </k-actions-group>
-      <k-actions-group>
-        <k-actions-button bold @click="workActionsOpened = false">
+        </SkyActionButton>
+      </SkyActionGroup>
+      <SkyActionGroup>
+        <SkyActionButton bold @click="workActionsOpened = false">
           {{ phone.t('Apps.companies.close') }}
-        </k-actions-button>
-      </k-actions-group>
-    </k-actions>
+        </SkyActionButton>
+      </SkyActionGroup>
+    </SkyActionSheet>
 
     <div class="companies-sheet companies-assignment-sheet">
-      <k-sheet
+      <SkySheet
         :opened="assignmentSheetOpened"
+        :aria-label="phone.t('Apps.companies.assignment.title')"
         @backdropclick="assignmentSheetOpened = false"
+        @escape="assignmentSheetOpened = false"
       >
-      <section
-        v-if="assignmentSheetOpened"
-        class="companies-sheet__content"
-        role="dialog"
-        aria-modal="true"
-      >
-        <header>
-          <span><UsersRound :size="23" /></span>
-          <div>
-            <h2>{{ phone.t('Apps.companies.assignment.title') }}</h2>
-          </div>
-          <k-link
-            component="button"
-            icon-only
-            :aria-label="phone.t('Apps.companies.close')"
-            :link-props="{ type: 'button' }"
-            @click="assignmentSheetOpened = false"
+        <section v-if="assignmentSheetOpened" class="companies-sheet__content">
+          <header>
+            <span><UsersRound :size="23" /></span>
+            <div>
+              <h2>{{ phone.t('Apps.companies.assignment.title') }}</h2>
+            </div>
+            <SkyLink
+              component="button"
+              icon-only
+              :aria-label="phone.t('Apps.companies.close')"
+              type="button"
+              @click="assignmentSheetOpened = false"
+            >
+              <X :size="19" />
+            </SkyLink>
+          </header>
+          <SkyEmptyState v-if="companies.membersLoading" compact>
+            <template #icon><SkySpinner /></template>
+          </SkyEmptyState>
+          <SkyListCard v-else>
+            <SkyListItem
+              v-for="member in companies.members"
+              :key="member.id"
+              label
+              :title="memberName(member.name)"
+              :subtitle="`${member.role} · ${phone.t(`Apps.companies.assignment.${member.online ? 'online' : 'offline'}`)}`"
+            >
+              <template #media
+                ><span class="member-avatar"><UserRound :size="18" /></span
+              ></template>
+              <template #after>
+                <SkyRadio
+                  name="company-member"
+                  :value="member.id"
+                  :checked="selectedMemberId === member.id"
+                  :disabled="!member.online"
+                  @change="selectedMemberId = member.id"
+                />
+              </template>
+            </SkyListItem>
+          </SkyListCard>
+          <SkyButton
+            large
+            rounded
+            :disabled="!selectedMemberId || companies.mutating"
+            @click="assignActiveRequest"
           >
-            <X :size="19" />
-          </k-link>
-        </header>
-        <k-block
-          v-if="companies.membersLoading"
-          inset
-          strong
-          class="companies-state companies-state--compact"
-        >
-          <k-preloader />
-        </k-block>
-        <k-list v-else inset strong>
-          <k-list-item
-            v-for="member in companies.members"
-            :key="member.id"
-            label
-            :title="memberName(member.name)"
-            :subtitle="`${member.role} · ${phone.t(`Apps.companies.assignment.${member.online ? 'online' : 'offline'}`)}`"
-          >
-            <template #media
-              ><span class="member-avatar"><UserRound :size="18" /></span
-            ></template>
-            <template #after>
-              <k-radio
-                name="company-member"
-                :value="member.id"
-                :checked="selectedMemberId === member.id"
-                :disabled="!member.online"
-                @change="selectedMemberId = member.id"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
-        <k-button
-          large
-          rounded
-          :disabled="!selectedMemberId || companies.mutating"
-          @click="assignActiveRequest"
-        >
-          {{ phone.t('Apps.companies.assignment.confirm') }}
-        </k-button>
-      </section>
-      </k-sheet>
+            {{ phone.t('Apps.companies.assignment.confirm') }}
+          </SkyButton>
+        </section>
+      </SkySheet>
     </div>
 
-    <k-dialog
+    <SkyDialog
       :opened="cancelDialogOpened"
       :title="phone.t('Apps.companies.requests.cancelTitle')"
       :content="phone.t('Apps.companies.requests.cancelBody')"
       @backdropclick="cancelDialogOpened = false"
+      @escape="cancelDialogOpened = false"
     >
       <template #buttons>
-        <k-dialog-button @click="cancelDialogOpened = false">
+        <SkyDialogButton @click="cancelDialogOpened = false">
           {{ phone.t('Apps.companies.requests.keep') }}
-        </k-dialog-button>
-        <k-dialog-button
+        </SkyDialogButton>
+        <SkyDialogButton
           strong
           :disabled="companies.mutating"
           @click="cancelActiveRequest"
         >
           {{ phone.t('Apps.companies.requests.cancelConfirm') }}
-        </k-dialog-button>
+        </SkyDialogButton>
       </template>
-    </k-dialog>
+    </SkyDialog>
 
-    <k-dialog
+    <SkyDialog
       :opened="conflictDialogOpened"
       :title="phone.t('Apps.companies.conflict.title')"
       :content="phone.t('Apps.companies.conflict.body')"
       @backdropclick="conflictDialogOpened = false"
+      @escape="conflictDialogOpened = false"
     >
       <template #buttons>
-        <k-dialog-button @click="conflictDialogOpened = false">
+        <SkyDialogButton @click="conflictDialogOpened = false">
           {{ phone.t('Apps.companies.close') }}
-        </k-dialog-button>
-        <k-dialog-button strong @click="reloadConflict">
+        </SkyDialogButton>
+        <SkyDialogButton strong @click="reloadConflict">
           {{ phone.t('Apps.companies.conflict.reload') }}
-        </k-dialog-button>
+        </SkyDialogButton>
       </template>
-    </k-dialog>
+    </SkyDialog>
 
-    <k-toast
+    <SkyToast
       :opened="toastOpened"
       position="center"
       @click="toastOpened = false"
     >
       {{ toastText }}
-    </k-toast>
-  </k-page>
+    </SkyToast>
+  </SkyAppPage>
 </template>
 
 <style scoped>
 .companies-app {
-  --company-blue: #3b82f6;
+  --company-blue: var(--sky-app-accent);
   --company-cyan: #38bdf8;
   --company-green: #22c55e;
   --company-orange: #f59e0b;
   --company-red: #ef4444;
-  --k-safe-area-top: 46px;
-  --k-safe-area-bottom: 25px;
-  position: relative;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  color: #111827;
-}
-
-.companies-app--dark {
-  color: #f8fafc;
-}
-
-.companies-backdrop {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at 12% 4%, rgb(56 189 248 / 16%), transparent 30%),
-    radial-gradient(circle at 88% 34%, rgb(59 130 246 / 13%), transparent 32%),
-    linear-gradient(180deg, #eff7ff 0%, #f6f8fb 45%, #eef2f7 100%);
-}
-
-.companies-app--dark .companies-backdrop {
-  background:
-    radial-gradient(circle at 12% 4%, rgb(56 189 248 / 13%), transparent 30%),
-    radial-gradient(circle at 88% 34%, rgb(59 130 246 / 11%), transparent 32%),
-    linear-gradient(180deg, #07111f 0%, #0b1220 52%, #111827 100%);
-}
-
-.companies-content {
-  position: relative;
-  z-index: 1;
-  min-height: 0;
-  padding: 10px 10px calc(var(--k-safe-area-bottom) + 88px);
-  flex: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-}
-
-.companies-navbar {
-  flex: none;
-}
-
-.companies-content::-webkit-scrollbar,
-.companies-chip-row::-webkit-scrollbar,
-.companies-featured-row::-webkit-scrollbar {
-  display: none;
+  --company-surface: var(--sky-surface);
+  --company-surface-muted: var(--sky-surface-muted);
+  --company-border: var(--sky-hairline);
+  --company-text: var(--sky-text);
+  --company-muted: var(--sky-muted);
 }
 
 .companies-search-wrap {
-  margin: 0 -4px 8px;
+  margin: 0 0 8px;
 }
 
 .companies-chip-row {
-  display: flex;
-  gap: 7px;
-  padding: 2px 2px 9px;
-  overflow-x: auto;
-  scrollbar-width: none;
+  gap: 6px;
+  scroll-snap-type: x proximity;
 }
 
-.companies-chip-row :deep(.k-chip) {
+.companies-chip-row :deep(.sky-chip) {
+  min-width: auto;
+  min-height: 38px;
   flex: none;
+  padding: 0 12px;
+  font-size: 12px;
+  scroll-snap-align: start;
   white-space: nowrap;
 }
 
-.companies-chip-row :deep(.is-selected) {
+.companies-chip-row :deep(.sky-chip--selected) {
   color: white;
   background: linear-gradient(135deg, var(--company-blue), var(--company-cyan));
 }
@@ -2560,112 +2452,42 @@ onBeforeUnmount(() => {
 .composer-contact-card,
 .company-announcement {
   margin: 0 0 12px;
-  border: 1px solid rgb(255 255 255 / 58%);
+  border: 1px solid var(--company-border);
   border-radius: 18px;
-  background: rgb(255 255 255 / 68%);
-  box-shadow: 0 12px 30px rgb(24 56 93 / 8%);
-  backdrop-filter: blur(18px) saturate(140%);
-  -webkit-backdrop-filter: blur(18px) saturate(140%);
-}
-
-.companies-app--dark .work-identity-card,
-.companies-app--dark .manager-intro,
-.companies-app--dark .request-summary-card,
-.companies-app--dark .composer-contact-card,
-.companies-app--dark .company-announcement {
-  border-color: rgb(255 255 255 / 8%);
-  background: rgb(20 30 46 / 70%);
-}
-
-.companies-state {
-  min-height: 260px;
-  margin: 14px 6px;
-  padding: 36px 22px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 9px;
-  color: #64748b;
-  text-align: center;
-}
-
-.companies-state strong {
-  color: inherit;
-  font-size: 16px;
-}
-
-.companies-state p {
-  max-width: 260px;
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.companies-state--compact {
-  min-height: 150px;
-  padding: 20px;
-}
-
-.companies-featured-row {
-  display: flex;
-  gap: 9px;
-  padding: 0 2px 4px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.company-feature-card {
-  width: 145px;
-  min-width: 145px;
-  margin: 0;
-  text-align: left;
-}
-
-.company-feature-card :deep(> *) {
-  padding: 12px;
-  display: grid;
-  gap: 6px;
-}
-
-.company-feature-card strong {
-  overflow: hidden;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.company-feature-card :deep(> *) > span {
-  color: #64748b;
-  font-size: 10px;
+  background: var(--company-surface);
+  box-shadow: none;
 }
 
 .company-list,
 .company-request-list {
-  margin-top: 6px;
+  margin: 0 !important;
 }
 
-.company-list :deep(.k-list-item > button),
-.company-request-list :deep(.k-list-item > button) {
+.company-list :deep(.sky-list-item__row),
+.company-request-list :deep(.sky-list-item__row) {
   width: 100%;
   text-align: left;
 }
 
-.companies-content :deep(.k-block-title) {
-  margin-bottom: 10px;
+.companies-content :deep(.sky-block-title) {
+  margin: 18px 0 8px !important;
+  padding: 0 2px !important;
+  color: var(--company-muted);
+  font-size: 15px;
+  line-height: 20px;
 }
 
 .company-logo {
-  width: 42px;
-  height: 42px;
+  width: 44px;
+  height: 44px;
   display: grid;
   flex: none;
   place-items: center;
   overflow: hidden;
-  border-radius: 13px;
+  border-radius: 12px;
   color: white;
-  background: linear-gradient(145deg, var(--company-blue), var(--company-cyan));
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%);
+  background: var(--company-blue);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
   font-size: 13px;
   font-weight: 800;
 }
@@ -2693,7 +2515,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 4px;
+  gap: 3px;
 }
 
 .company-row-after small {
@@ -2705,48 +2527,76 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
-:deep(.k-badge) {
+.company-list :deep(.sky-list-item__row),
+.company-request-list :deep(.sky-list-item__row) {
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+
+.company-list :deep(.sky-list-item__title),
+.company-request-list :deep(.sky-list-item__title) {
+  min-height: 22px;
+  align-items: flex-start;
+  font-size: 15px;
+  line-height: 20px;
+}
+
+.company-list :deep(.sky-list-item__subtitle),
+.company-request-list :deep(.sky-list-item__subtitle) {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--company-muted);
+  font-size: 12px;
+  line-height: 16px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+:deep(.sky-badge) {
   min-width: 0;
   border-radius: 999px;
   font-size: 8px;
   line-height: 1.2;
 }
 
-:deep(.k-badge.is-available),
-:deep(.k-badge.is-completed) {
+:deep(.sky-badge.is-available),
+:deep(.sky-badge.is-completed) {
   color: #047857;
   background: #d1fae5;
 }
 
-:deep(.k-badge.is-busy),
-:deep(.k-badge.is-waiting-customer) {
+:deep(.sky-badge.is-busy),
+:deep(.sky-badge.is-waiting-customer) {
   color: #b45309;
   background: #fef3c7;
 }
 
-:deep(.k-badge.is-closed),
-:deep(.k-badge.is-cancelled) {
+:deep(.sky-badge.is-closed),
+:deep(.sky-badge.is-cancelled) {
   color: #b91c1c;
   background: #fee2e2;
 }
 
-:deep(.k-badge.is-new),
-:deep(.k-badge.is-assigned),
-:deep(.k-badge.is-in-progress),
-:deep(.k-badge.is-unread) {
+:deep(.sky-badge.is-new),
+:deep(.sky-badge.is-assigned),
+:deep(.sky-badge.is-in-progress),
+:deep(.sky-badge.is-unread) {
   color: #1d4ed8;
   background: #dbeafe;
 }
 
-.companies-load-more,
 .manager-save {
-  width: calc(100% - 20px);
-  margin: 14px 10px 4px;
+  width: 100%;
+  margin: 14px 0 4px;
 }
 
 .companies-segment-wrap,
 .availability-segmented {
-  margin: 4px 6px 14px;
+  margin: 0 0 14px;
+}
+
+.companies-segment-wrap {
+  margin-bottom: 12px;
 }
 
 .company-request-icon,
@@ -2757,7 +2607,7 @@ onBeforeUnmount(() => {
   place-items: center;
   border-radius: 12px;
   color: var(--company-blue);
-  background: rgb(59 130 246 / 13%);
+  background: rgba(59, 130, 246, 0.13);
 }
 
 .work-identity-card :deep(> *),
@@ -2769,6 +2619,15 @@ onBeforeUnmount(() => {
   gap: 11px;
 }
 
+.work-identity-card {
+  margin-bottom: 18px;
+}
+
+.work-identity-card :deep(> *) {
+  min-height: 72px;
+  padding: 13px 14px;
+}
+
 .work-identity-card :deep(> *) > span:nth-child(2),
 .manager-intro :deep(> *) > span,
 .composer-contact-card :deep(> *) > span,
@@ -2799,26 +2658,44 @@ onBeforeUnmount(() => {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
-  margin: 0 5px 14px;
+  margin: 0 0 14px;
+}
+
+.work-control-card > :deep(.sky-block-title) {
+  margin-top: 0 !important;
+}
+
+.work-action-list {
+  margin: 0 !important;
+}
+
+.work-action-list :deep(.sky-list-item__subtitle) {
+  color: var(--company-muted);
+  font-size: 12px;
+  line-height: 16px;
+  text-align: left;
 }
 
 .work-metric {
   margin: 0;
-  padding: 15px 16px;
+  min-height: 72px;
+  padding: 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 2px;
+  border: 1px solid var(--company-border);
   border-radius: 16px;
+  background: var(--company-surface);
 }
 
 .work-metrics strong {
   color: var(--company-blue);
-  font-size: 24px;
+  font-size: 22px;
 }
 
 .work-metrics span {
-  color: #64748b;
-  font-size: 10px;
+  color: var(--company-muted);
+  font-size: 11px;
 }
 
 .company-cover {
@@ -2828,7 +2705,7 @@ onBeforeUnmount(() => {
   align-items: flex-end;
   padding: 14px;
   background:
-    linear-gradient(180deg, transparent, rgb(15 23 42 / 48%)),
+    linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.48)),
     linear-gradient(135deg, #1d4ed8, #38bdf8 58%, #67e8f9);
   background-position: center;
   background-size: cover;
@@ -2837,7 +2714,7 @@ onBeforeUnmount(() => {
 .company-logo--hero {
   width: 66px;
   height: 66px;
-  border: 3px solid rgb(255 255 255 / 88%);
+  border: 3px solid rgba(255, 255, 255, 0.88);
   border-radius: 20px;
   font-size: 18px;
 }
@@ -2876,25 +2753,25 @@ onBeforeUnmount(() => {
 }
 
 .company-profile {
-  padding-bottom: calc(var(--k-safe-area-bottom) + 24px);
+  padding-bottom: calc(var(--sky-safe-area-bottom) + 24px);
 }
 
-.company-profile > :deep(.k-block-title) {
+.company-profile > :deep(.sky-block-title) {
   margin-top: 18px;
   margin-bottom: 6px;
 }
 
-.company-profile > :deep(.k-list) {
+.company-profile > :deep(.sky-list) {
   margin-top: 8px;
   margin-bottom: 10px;
 }
 
-.companies-app--dark .company-profile-heading p,
-.companies-app--dark .work-identity-card small,
-.companies-app--dark .manager-intro span span,
-.companies-app--dark .composer-contact-card span span,
-.companies-app--dark .company-announcement span span,
-.companies-app--dark .work-metrics span {
+.companies-app.sky-app-page--dark .company-profile-heading p,
+.companies-app.sky-app-page--dark .work-identity-card small,
+.companies-app.sky-app-page--dark .manager-intro span span,
+.companies-app.sky-app-page--dark .composer-contact-card span span,
+.companies-app.sky-app-page--dark .company-announcement span span,
+.companies-app.sky-app-page--dark .work-metrics span {
   color: #94a3b8;
 }
 
@@ -2910,12 +2787,12 @@ onBeforeUnmount(() => {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 7px;
-  border: 1px solid rgb(255 255 255 / 45%);
+  border: 1px solid rgba(255, 255, 255, 0.45);
   border-radius: 20px;
 }
 
-.companies-app--dark .company-profile-actions {
-  border-color: rgb(255 255 255 / 8%);
+.companies-app.sky-app-page--dark .company-profile-actions {
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
 .request-thread {
@@ -2981,7 +2858,7 @@ onBeforeUnmount(() => {
   scroll-snap-align: start;
   border-radius: 14px;
   object-fit: cover;
-  background: rgb(148 163 184 / 20%);
+  background: rgba(148, 163, 184, 0.2);
 }
 
 .request-timeline {
@@ -3002,7 +2879,7 @@ onBeforeUnmount(() => {
   left: 10px;
   width: 1px;
   content: '';
-  background: rgb(59 130 246 / 28%);
+  background: rgba(59, 130, 246, 0.28);
 }
 
 .request-timeline > div > span {
@@ -3052,13 +2929,11 @@ onBeforeUnmount(() => {
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgb(255 255 255 / 86%);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: var(--company-surface);
 }
 
-.companies-app--dark .company-messagebar {
-  background: rgb(15 23 42 / 88%);
+.companies-app.sky-app-page--dark .company-messagebar {
+  background: var(--company-surface);
 }
 
 .manager-screen {
@@ -3069,7 +2944,7 @@ onBeforeUnmount(() => {
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
   gap: 9px;
-  margin: 0 10px 12px;
+  margin: 0 0 14px;
 }
 
 .manager-media-button {
@@ -3079,7 +2954,7 @@ onBeforeUnmount(() => {
   position: relative;
   display: grid;
   place-items: center;
-  border: 1px solid rgb(148 163 184 / 30%);
+  border: 1px solid rgba(148, 163, 184, 0.3);
   padding: 0;
 }
 
@@ -3098,7 +2973,7 @@ onBeforeUnmount(() => {
   border-radius: 8px;
   padding: 4px 6px;
   color: white;
-  background: rgb(15 23 42 / 72%);
+  background: rgba(15, 23, 42, 0.72);
   font-size: 9px;
   font-weight: 700;
   text-overflow: ellipsis;
@@ -3106,8 +2981,8 @@ onBeforeUnmount(() => {
 }
 
 .manager-location {
-  width: calc(100% - 20px);
-  margin: 0 10px 4px;
+  width: 100%;
+  margin: 0 0 4px;
 }
 
 .manager-location-status {
@@ -3123,6 +2998,11 @@ onBeforeUnmount(() => {
   margin-bottom: 10px;
 }
 
+.manager-form-list {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
 .manager-hours-card,
 .manager-service-card {
   border-radius: 18px;
@@ -3138,7 +3018,12 @@ onBeforeUnmount(() => {
   display: inline-flex;
 }
 
-.companies-tab-icon :deep(.k-badge) {
+.companies-tabbar {
+  z-index: 25;
+  padding-inline: 0 !important;
+}
+
+.companies-tab-icon :deep(.sky-badge) {
   position: absolute;
   top: -5px;
   right: -10px;
@@ -3146,7 +3031,7 @@ onBeforeUnmount(() => {
   background: var(--company-red);
 }
 
-.companies-sheet :deep(.k-sheet) {
+.companies-sheet :deep(.sky-sheet__panel) {
   max-height: 88%;
   border-radius: 24px 24px 0 0;
   overflow: hidden;
@@ -3202,7 +3087,7 @@ onBeforeUnmount(() => {
   margin-left: 8px;
 }
 
-.composer-service-list :deep(.k-list-item .text-sm) {
+.composer-service-list :deep(.sky-list-item__subtitle) {
   overflow: hidden;
   font-size: 11px;
   line-height: 1.3;
@@ -3210,7 +3095,7 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
-.composer-service-list :deep(.k-radio > i) {
+.composer-service-list :deep(.sky-radio__mark) {
   width: 20px;
   height: 20px;
 }
@@ -3228,7 +3113,7 @@ onBeforeUnmount(() => {
   margin-left: 8px;
 }
 
-.composer-form-list :deep(.k-list-input) {
+.composer-form-list :deep(.sky-field) {
   margin-top: 8px;
   margin-bottom: 8px;
 }
@@ -3258,7 +3143,7 @@ onBeforeUnmount(() => {
   object-fit: cover;
 }
 
-.composer-media-strip :deep(.k-button) {
+.composer-media-strip :deep(.sky-button) {
   position: absolute;
   top: 3px;
   right: 3px;
@@ -3267,14 +3152,10 @@ onBeforeUnmount(() => {
   height: 24px;
   padding: 0;
   color: white;
-  background: rgb(15 23 42 / 82%);
+  background: rgba(15, 23, 42, 0.82);
 }
 
 @media (max-width: 330px) {
-  .companies-content {
-    padding-inline: 7px;
-  }
-
   .company-profile-actions {
     grid-template-columns: 1fr;
   }

From 5253d1d2f3c4a23aa42fff325a383407321abe3d Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:30 +0200
Subject: [PATCH 53/63] ENH - redesign the House experience

---
 frontend/src/views/apps/HouseApp.vue | 439 ++++++++++++++++++++++-----
 1 file changed, 357 insertions(+), 82 deletions(-)

diff --git a/frontend/src/views/apps/HouseApp.vue b/frontend/src/views/apps/HouseApp.vue
index 2016aa3..9fdec76 100644
--- a/frontend/src/views/apps/HouseApp.vue
+++ b/frontend/src/views/apps/HouseApp.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
+  kBlockTitle,
   kButton,
   kCard,
   kDialog,
   kDialogButton,
-  kGlass,
   kLink,
   kList,
   kListItem,
@@ -18,7 +18,6 @@ import {
   Camera,
   CarFront,
   Check,
-  ChevronRight,
   House,
   KeyRound,
   LocateFixed,
@@ -56,6 +55,12 @@ const isRefreshing = ref(false)
 const pullDistance = ref(0)
 
 const pullThreshold = 56
+const housePrimaryButtonColors = {
+  fillBgIos: 'bg-[#f47a38] active:bg-[#d86129]',
+  fillBgMaterial: 'bg-[#f47a38] active:bg-[#d86129]',
+  fillTextIos: 'text-white',
+  fillTextMaterial: 'text-white',
+}
 let pullStartY = 0
 let isPulling = false
 let wheelRefreshTimeout: ReturnType<typeof setTimeout> | undefined
@@ -66,6 +71,9 @@ const ownedCount = computed(
     properties.value.filter((property) => property.access === 'owner').length,
 )
 const sharedCount = computed(() => properties.value.length - ownedCount.value)
+const lockedCount = computed(
+  () => properties.value.filter((property) => property.locked).length,
+)
 const selectedProperty = computed(
   () =>
     properties.value.find(
@@ -198,6 +206,18 @@ function accessLabel(property: HousingProperty): string {
   )
 }
 
+function propertySubtitle(property: HousingProperty): string {
+  const details = [accessLabel(property)]
+  if (property.garage?.enabled) {
+    details.push(
+      phone.t('Apps.house.storedVehicles', {
+        count: String(property.garage.storedVehicles),
+      }),
+    )
+  }
+  return details.join(' · ')
+}
+
 function shareProperty(property: HousingProperty): void {
   easyShare.open({
     appId: 'house',
@@ -236,7 +256,11 @@ onBeforeUnmount(() => {
       <span class="house-state__icon"><WifiOff :size="30" /></span>
       <strong>{{ phone.t('Apps.house.unavailable') }}</strong>
       <p>{{ translatedError(housing.error) }}</p>
-      <k-button rounded @click="housing.load()">
+      <k-button
+        rounded
+        :colors="housePrimaryButtonColors"
+        @click="housing.load()"
+      >
         {{ phone.t('Apps.house.tryAgain') }}
       </k-button>
     </div>
@@ -245,7 +269,11 @@ onBeforeUnmount(() => {
       <span class="house-state__icon"><Router :size="31" /></span>
       <strong>{{ phone.t('Apps.house.offline') }}</strong>
       <p>{{ phone.t('Apps.house.offlineBody') }}</p>
-      <k-button rounded @click="housing.load()">
+      <k-button
+        rounded
+        :colors="housePrimaryButtonColors"
+        @click="housing.load()"
+      >
         {{ phone.t('Apps.house.tryAgain') }}
       </k-button>
     </div>
@@ -267,15 +295,19 @@ onBeforeUnmount(() => {
       >
         <k-preloader />
       </div>
-      <k-glass :highlight="false" class="house-hero">
-        <div class="house-hero__title">
-          <span>
-            <small>{{ phone.t('Apps.house.myHomes') }}</small>
-            <strong>{{ properties.length }}</strong>
-          </span>
-          <i><House :size="28" /></i>
-        </div>
-        <div class="house-summary">
+      <section v-if="properties.length" class="house-properties">
+        <header class="house-properties__heading">
+          <div>
+            <small>{{ phone.t('Apps.house.properties') }}</small>
+            <h1>{{ phone.t('Apps.house.myHomes') }}</h1>
+          </div>
+          <span class="house-properties__count">{{ properties.length }}</span>
+        </header>
+
+        <div
+          class="house-overview"
+          :aria-label="phone.t('Apps.house.myHomes')"
+        >
           <span
             ><b>{{ ownedCount }}</b
             >{{ phone.t('Apps.house.owned') }}</span
@@ -285,35 +317,33 @@ onBeforeUnmount(() => {
             >{{ phone.t('Apps.house.shared') }}</span
           >
           <span
-            ><b>{{ properties.filter((property) => property.locked).length }}</b
+            ><b>{{ lockedCount }}</b
             >{{ phone.t('Apps.house.locked') }}</span
           >
         </div>
-      </k-glass>
 
-      <section v-if="properties.length" class="house-properties">
-        <h2>{{ phone.t('Apps.house.properties') }}</h2>
-        <k-glass
+        <k-list inset strong class="house-property-list">
+          <k-list-item
           v-for="property in properties"
           :key="property.id"
-          :highlight="false"
-          component="button"
-          type="button"
-          class="house-property"
+          link
+          chevron
+          :title="property.name"
+          :subtitle="propertySubtitle(property)"
           :aria-label="`${phone.t('Apps.house.openDetails')}: ${property.name}`"
           @click="selectedPropertyId = property.id"
-        >
-          <span class="house-property__icon"><House :size="31" /></span>
-          <span class="house-property__content">
-            <strong>{{ property.name }}</strong>
-            <small><UserRound :size="12" />{{ accessLabel(property) }}</small>
-            <span class="house-property__chips">
-              <i
+          >
+            <template #media>
+              <span class="house-property__icon"><House :size="21" /></span>
+            </template>
+            <template #after>
+              <span
                 v-if="property.capabilities.lock"
+                class="house-property__status"
                 :class="{ 'is-locked': property.locked }"
               >
-                <Lock v-if="property.locked" :size="11" />
-                <LockOpen v-else :size="11" />
+                <Lock v-if="property.locked" :size="13" />
+                <LockOpen v-else :size="13" />
                 {{
                   phone.t(
                     property.locked
@@ -321,32 +351,26 @@ onBeforeUnmount(() => {
                       : 'Apps.house.unlocked',
                   )
                 }}
-              </i>
-              <i v-if="property.capabilities.cctv"
-                ><Camera :size="11" />{{ phone.t('Apps.house.camera') }}</i
-              >
-              <i v-if="property.garage?.enabled"
-                ><CarFront :size="11" />{{ property.garage.storedVehicles }}</i
-              >
-            </span>
-          </span>
-          <ChevronRight :size="18" />
-        </k-glass>
+              </span>
+            </template>
+          </k-list-item>
+        </k-list>
       </section>
 
-      <k-card v-else class="house-empty">
-        <House :size="38" />
-        <strong>{{ phone.t('Apps.house.empty') }}</strong>
+      <section v-else class="house-empty">
+        <span class="house-empty__icon"><House :size="32" /></span>
+        <small>{{ phone.t('Apps.house.myHomes') }}</small>
+        <h1>{{ phone.t('Apps.house.empty') }}</h1>
         <p>{{ phone.t('Apps.house.emptyBody') }}</p>
-      </k-card>
-
-      <p class="house-provider">
-        {{
-          phone.t('Apps.house.provider', {
-            system: housing.overview.provider ?? '',
-          })
-        }}
-      </p>
+        <k-button
+          inline
+          rounded
+          :colors="housePrimaryButtonColors"
+          @click="refresh"
+        >
+          {{ phone.t('Apps.house.refresh') }}
+        </k-button>
+      </section>
     </div>
 
     <k-sheet
@@ -365,7 +389,7 @@ onBeforeUnmount(() => {
           <X :size="18" />
         </k-link>
 
-        <span class="house-detail__mark"><House :size="46" /></span>
+        <span class="house-detail__mark"><House :size="29" /></span>
         <small>{{ accessLabel(selectedProperty) }}</small>
         <h2>{{ selectedProperty.name }}</h2>
         <span
@@ -389,6 +413,7 @@ onBeforeUnmount(() => {
           large
           rounded
           class="house-lock-button"
+          :colors="housePrimaryButtonColors"
           :disabled="isPending('toggle_lock', selectedProperty)"
           @click="runCommand('toggle_lock', selectedProperty)"
         >
@@ -397,48 +422,56 @@ onBeforeUnmount(() => {
           {{
             phone.t(
               selectedProperty.locked
-                ? 'Apps.house.unlocked'
-                : 'Apps.house.locked',
+                ? 'Apps.house.unlockDoor'
+                : 'Apps.house.lockDoor',
             )
           }}
         </k-button>
 
-        <h3>{{ phone.t('Apps.house.actions') }}</h3>
-        <div class="house-actions">
-          <k-glass
-            :highlight="false"
-            component="button"
-            type="button"
+        <k-block-title>{{ phone.t('Apps.house.actions') }}</k-block-title>
+        <k-list inset strong class="house-action-list">
+          <k-list-item
+            link
+            chevron
+            :title="phone.t('Apps.house.setWaypoint')"
             :disabled="isPending('set_waypoint', selectedProperty)"
             @click="runCommand('set_waypoint', selectedProperty)"
           >
-            <LocateFixed :size="23" />
-            <span>{{ phone.t('Apps.house.setWaypoint') }}</span>
-          </k-glass>
-          <k-glass
-            :highlight="false"
-            component="button"
-            type="button"
+            <template #media><LocateFixed :size="19" /></template>
+          </k-list-item>
+          <k-list-item
+            :link="selectedProperty.capabilities.cctv"
+            :chevron="selectedProperty.capabilities.cctv"
+            :title="phone.t('Apps.house.viewCamera')"
+            :subtitle="
+              phone.t(
+                selectedProperty.capabilities.cctv
+                  ? 'Apps.house.cameraAvailable'
+                  : 'Apps.house.cameraUnavailable',
+              )
+            "
             :disabled="
               !selectedProperty.capabilities.cctv ||
               isPending('open_cctv', selectedProperty)
             "
-            @click="runCommand('open_cctv', selectedProperty)"
+            @click="
+              selectedProperty.capabilities.cctv &&
+              runCommand('open_cctv', selectedProperty)
+            "
           >
-            <Camera :size="23" />
-            <span>{{ phone.t('Apps.house.viewCamera') }}</span>
-          </k-glass>
-          <k-glass
-            :highlight="false"
-            component="button"
-            type="button"
+            <template #media><Camera :size="19" /></template>
+          </k-list-item>
+          <k-list-item
+            link
+            chevron
+            :title="phone.t('Apps.easyShare.share')"
             @click="shareProperty(selectedProperty)"
           >
-            <Share2 :size="23" />
-            <span>{{ phone.t('Apps.easyShare.share') }}</span>
-          </k-glass>
-        </div>
+            <template #media><Share2 :size="19" /></template>
+          </k-list-item>
+        </k-list>
 
+        <k-block-title>{{ phone.t('Apps.house.status') }}</k-block-title>
         <k-list inset strong class="house-facts">
           <k-list-item
             :title="phone.t('Apps.house.access')"
@@ -1038,4 +1071,246 @@ onBeforeUnmount(() => {
   color: var(--house-muted);
   font-size: 11px;
 }
+
+/* Native, task-first House layout. These overrides intentionally replace the
+   old dashboard treatment while preserving the existing detail interactions. */
+.house-page {
+  --house-bg: #f2f2f7;
+  --house-panel: #ffffff;
+  --house-text: #161619;
+  --house-muted: #6f6f78;
+  background: var(--house-bg);
+}
+:global(.phone-app.dark .house-page) {
+  --house-bg: #000000;
+  --house-panel: #1c1c1e;
+  --house-text: #fafafa;
+  --house-muted: #a1a1aa;
+  background: var(--house-bg);
+}
+.house-navbar {
+  --k-navbar-bg-color: var(--house-bg);
+}
+.house-scroll {
+  padding: 0 0 46px;
+  overscroll-behavior: contain;
+}
+.house-state {
+  padding: 42px 28px 86px;
+}
+.house-state__icon {
+  width: 62px;
+  height: 62px;
+  margin-bottom: 16px;
+  border-radius: 19px;
+  box-shadow: 0 8px 24px #00000014;
+}
+.house-state strong {
+  font-size: 20px;
+  line-height: 1.2;
+}
+.house-state p {
+  margin: 8px 0 20px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.house-properties {
+  padding-top: 14px;
+}
+.house-properties__heading {
+  margin: 0 21px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.house-properties__heading small,
+.house-properties__heading h1 {
+  display: block;
+}
+.house-properties__heading small {
+  color: var(--house-muted);
+  font-size: 12px;
+  line-height: 1.2;
+}
+.house-properties__heading h1 {
+  margin: 2px 0 0;
+  font-size: 25px;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+.house-properties__count {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--house-accent);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 750;
+}
+.house-overview {
+  margin: 0 16px 20px;
+  padding: 12px 6px;
+  border-radius: 18px;
+  display: flex;
+  background: var(--house-panel);
+}
+.house-overview span {
+  min-width: 0;
+  flex: 1;
+  padding: 0 8px;
+  color: var(--house-muted);
+  font-size: 11px;
+  line-height: 1.25;
+}
+.house-overview span + span {
+  border-left: 1px solid #8e8e9338;
+}
+.house-overview b {
+  display: block;
+  margin-bottom: 2px;
+  color: var(--house-text);
+  font-size: 17px;
+  line-height: 1;
+}
+.house-property-list {
+  margin: 0 16px !important;
+}
+.house-property__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: var(--house-accent);
+}
+.house-property__status {
+  padding: 4px 7px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #e8f8ed;
+  color: #267c42;
+  font-size: 10px;
+  font-weight: 700;
+}
+.house-property__status.is-locked {
+  background: #fff0e7;
+  color: #c8522b;
+}
+:global(.phone-app.dark .house-property__status) {
+  background: #2a4b35;
+  color: #8ce1a7;
+}
+:global(.phone-app.dark .house-property__status.is-locked) {
+  background: #5a3023;
+  color: #ffb392;
+}
+.house-empty {
+  min-height: calc(100% - 16px);
+  margin: 0;
+  padding: 34px 31px 90px;
+  justify-content: center;
+}
+.house-empty__icon {
+  width: 68px;
+  height: 68px;
+  margin-bottom: 16px;
+  border-radius: 21px;
+  display: grid;
+  place-items: center;
+  background: var(--house-accent);
+  color: #fff;
+  box-shadow: 0 10px 30px #f47a383d;
+}
+.house-empty > small {
+  color: var(--house-accent);
+  font-size: 11px;
+  font-weight: 750;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.house-empty h1 {
+  margin: 5px 0 0;
+  color: var(--house-text);
+  font-size: 22px;
+  line-height: 1.2;
+}
+.house-empty p,
+.house-keys__empty p {
+  margin: 8px 0 20px;
+  max-width: 260px;
+  font-size: 13px;
+  line-height: 1.42;
+}
+.house-detail {
+  height: 620px;
+  padding: 18px 0 42px;
+}
+.house-detail__mark {
+  width: 58px;
+  height: 58px;
+  margin: 8px auto 10px;
+  border-radius: 18px;
+  background: var(--house-accent);
+}
+.house-detail > small {
+  font-size: 11px;
+  font-weight: 750;
+}
+.house-detail h2 {
+  margin: 3px 32px 8px;
+  font-size: 22px;
+  line-height: 1.2;
+}
+.house-detail__status {
+  font-size: 11px;
+}
+.house-lock-button {
+  width: calc(100% - 32px);
+  margin: 0 16px 20px;
+}
+.house-detail :deep(.k-block-title) {
+  margin-top: 18px;
+  margin-bottom: 7px;
+  padding: 0 20px;
+  color: var(--house-muted);
+  text-align: left;
+}
+.house-action-list,
+.house-facts {
+  margin: 0 16px !important;
+  text-align: left;
+}
+.house-action-list svg {
+  color: var(--house-accent);
+}
+.house-keys {
+  padding: 0 16px;
+}
+.house-keys header {
+  margin: 20px 4px 8px;
+}
+.house-keys header small {
+  font-size: 11px;
+}
+.house-keys header strong {
+  font-size: 16px;
+}
+.house-candidates {
+  height: 620px;
+  padding: 21px 14px 35px;
+}
+.house-candidates h2 {
+  margin: 8px 0 5px;
+}
+.house-candidates > p {
+  margin: 0 auto 16px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.house-revoke-copy {
+  font-size: 13px;
+  line-height: 1.4;
+}
 </style>

From 0c702b4c6c504fa61775f506a0f4cabc2553ee23 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:34 +0200
Subject: [PATCH 54/63] ENH - refine the SkyRide interface

---
 frontend/src/views/apps/SkyRideApp.vue | 152 +++++++++++++++++++++----
 1 file changed, 128 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/apps/SkyRideApp.vue b/frontend/src/views/apps/SkyRideApp.vue
index d7968d7..9903bac 100644
--- a/frontend/src/views/apps/SkyRideApp.vue
+++ b/frontend/src/views/apps/SkyRideApp.vue
@@ -733,6 +733,7 @@ onBeforeUnmount(() => {
     <div class="skyride-ambient" aria-hidden="true"></div>
     <k-navbar
       class="skyride-navbar"
+      title-class="skyride-navbar__title"
       :title="phone.t('Apps.skyride.name')"
       :subtitle="phone.t(`Apps.skyride.mode.${mode}`)"
     />
@@ -1810,13 +1811,14 @@ onBeforeUnmount(() => {
           </div>
           <k-link
             component="button"
+            class="skyride-sheet__close"
             :link-props="{ type: 'button' }"
             :aria-label="phone.t('Common.close')"
             @click="locationTarget = null"
             ><X :size="20"
           /></k-link>
         </div>
-        <k-list inset strong>
+        <k-list inset strong class="skyride-sheet-list">
           <k-list-item
             link
             :title="phone.t('Apps.skyride.currentLocation')"
@@ -1832,8 +1834,10 @@ onBeforeUnmount(() => {
             ><template #media><MapPin :size="19" /></template
           ></k-list-item>
         </k-list>
-        <k-block-title>{{ phone.t('Apps.skyride.savedPlaces') }}</k-block-title>
-        <k-list inset strong>
+        <k-block-title class="skyride-sheet-section-title">{{
+          phone.t('Apps.skyride.savedPlaces')
+        }}</k-block-title>
+        <k-list inset strong class="skyride-sheet-list skyride-saved-list">
           <k-list-item
             v-for="location in skyride.quickLocations"
             :key="location.id ?? location.label"
@@ -2001,6 +2005,23 @@ onBeforeUnmount(() => {
   color: var(--ride-text);
 }
 
+.skyride-navbar :deep(.skyride-navbar__title) {
+  color: var(--ride-text);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: -0.25px;
+}
+
+.skyride-navbar :deep(.skyride-navbar__title > div) {
+  margin-top: 1px;
+  color: var(--ride-muted);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 14px;
+  opacity: 1;
+}
+
 .skyride-mode {
   z-index: 21;
   position: relative;
@@ -2012,6 +2033,12 @@ onBeforeUnmount(() => {
   width: 100%;
 }
 
+.skyride-mode :deep(button) {
+  min-height: 38px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
 .skyride-scroll {
   position: absolute;
   z-index: 2;
@@ -2261,16 +2288,19 @@ onBeforeUnmount(() => {
 .skyride-ride-status-card p {
   margin: 0;
   color: var(--ride-muted);
-  font-size: 12px;
+  font-size: 13px;
+  line-height: 18px;
 }
 
 .skyride-heading h1,
 .skyride-ride-status-card h1,
 .skyride-screen-title h1 {
   margin: 2px 0 0;
-  font-size: 23px;
-  line-height: 1.08;
-  letter-spacing: -0.5px;
+  color: var(--ride-text);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: -0.55px;
 }
 
 .skyride-heading__icon,
@@ -2327,8 +2357,13 @@ onBeforeUnmount(() => {
 }
 
 .skyride-custom-block-title {
-  margin: 18px 4px 10px !important;
+  height: auto !important;
+  margin: 20px 4px 10px !important;
   padding: 0 !important;
+  color: var(--ride-muted) !important;
+  font-size: 15px !important;
+  font-weight: 650 !important;
+  line-height: 20px !important;
 }
 
 .skyride-quick-card,
@@ -2387,11 +2422,11 @@ onBeforeUnmount(() => {
 .skyride-quick-card {
   display: flex;
   width: 100%;
-  min-height: 68px;
+  min-height: 64px;
   align-items: center;
   justify-content: flex-start;
-  gap: 9px;
-  padding: 12px;
+  gap: 10px;
+  padding: 11px 13px;
   color: inherit;
   text-align: left;
 }
@@ -2405,9 +2440,9 @@ onBeforeUnmount(() => {
   display: -webkit-box;
   min-width: 0;
   overflow: hidden;
-  font-size: 12px;
+  font-size: 12.5px;
   font-weight: 650;
-  line-height: 1.18;
+  line-height: 16px;
   overflow-wrap: anywhere;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -2415,7 +2450,11 @@ onBeforeUnmount(() => {
 
 .skyride-primary {
   width: calc(100% - 4px);
+  min-height: 50px;
   margin: 4px 2px 0;
+  gap: 5px;
+  font-size: 16px;
+  font-weight: 650;
 }
 
 .skyride-primary :deep(svg) {
@@ -2749,7 +2788,8 @@ onBeforeUnmount(() => {
 .skyride-request-card span,
 .skyride-history-card span {
   color: var(--ride-muted);
-  font-size: 11px;
+  font-size: 12px;
+  line-height: 16px;
 }
 
 .skyride-driver-metrics :deep(.k-card) {
@@ -2790,6 +2830,12 @@ onBeforeUnmount(() => {
   flex-direction: column;
 }
 
+.skyride-request-card__top > div > span,
+.skyride-history-card__header > div > span {
+  font-size: 11px;
+  line-height: 15px;
+}
+
 .skyride-request-route,
 .skyride-history-route {
   display: grid;
@@ -2805,6 +2851,8 @@ onBeforeUnmount(() => {
 .skyride-request-route span,
 .skyride-history-route span {
   overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -2932,11 +2980,6 @@ onBeforeUnmount(() => {
   -webkit-backdrop-filter: blur(26px);
 }
 
-.skyride-tabbar :deep(.k-tabbar-link-label) {
-  font-size: 9px;
-  line-height: 1.1;
-}
-
 .skyride-tabbar :deep(.skyride-tabbar__inner) {
   width: 100% !important;
   max-width: none !important;
@@ -2952,11 +2995,26 @@ onBeforeUnmount(() => {
 .skyride-tab-pane :deep(> .k-link) {
   flex: 1 1 20%;
   min-width: 0 !important;
-  padding-inline: 4px !important;
+  min-height: 58px;
+  padding-inline: 3px !important;
   border-radius: 999px;
   outline: none;
 }
 
+.skyride-tab-pane :deep(> .k-link > span > span:last-child) {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 13px;
+  text-overflow: ellipsis;
+}
+
+.skyride-tab-pane :deep(> .k-link .k-tabbar-link-icon) {
+  width: 26px;
+  height: 26px;
+}
+
 .skyride-sheet__content {
   max-height: 74vh;
   overflow-y: auto;
@@ -2985,15 +3043,61 @@ onBeforeUnmount(() => {
 .skyride-sheet__title span,
 .skyride-rating-label {
   color: var(--ride-muted);
-  font-size: 10px;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 14px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.65px;
 }
 
 .skyride-sheet__title h2,
 .skyride-rating h2 {
-  margin: 2px 0 0;
-  font-size: 21px;
+  margin: 3px 0 0;
+  color: var(--ride-text);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 27px;
+  letter-spacing: -0.35px;
+}
+
+.skyride-sheet__close {
+  display: grid;
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  margin-right: -8px;
+  place-items: center;
+  border-radius: 50%;
+}
+
+.skyride-sheet-list {
+  margin-block: 0 !important;
+}
+
+.skyride-sheet-list :deep(.text-\[17px\]) {
+  color: var(--ride-text);
+  font-size: 16px;
+  line-height: 21px;
+}
+
+.skyride-sheet-list :deep(.text-sm) {
+  color: var(--ride-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.skyride-sheet-section-title {
+  height: auto !important;
+  margin: 22px 4px 10px !important;
+  padding: 0 !important;
+  color: var(--ride-muted) !important;
+  font-size: 15px !important;
+  font-weight: 650 !important;
+  line-height: 20px !important;
+}
+
+.skyride-saved-list {
+  margin-bottom: 4px !important;
 }
 
 .skyride-rating {

From a98b3b0c98546d4b99b2fe27d35a34be76376449 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:40 +0200
Subject: [PATCH 55/63] ENH - add swipe-to-clear lock-screen notifications

---
 frontend/src/assets/main.css                 |  69 ++++--
 frontend/src/components/PhoneLockScreen.vue  | 223 ++++++++++++++++---
 frontend/src/utils/notificationSwipe.test.ts |  31 +++
 frontend/src/utils/notificationSwipe.ts      |  46 ++++
 4 files changed, 317 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/utils/notificationSwipe.test.ts
 create mode 100644 frontend/src/utils/notificationSwipe.ts

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 2769c81..ee5b045 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -734,17 +734,65 @@ button {
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
 }
+.lock-screen__notification-row {
+  position: relative;
+  overflow: hidden;
+  min-height: 76px;
+  border-radius: 18px;
+  background: transparent;
+  isolation: isolate;
+}
+.lock-screen__notification-clear {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  width: 76px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  border: 0;
+  padding: 0;
+  color: #fff;
+  background: #ff3b30;
+  font-size: 10px;
+  font-weight: 650;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease-out;
+}
+.lock-screen__notification-row.is-action-visible {
+  background: #ff3b30;
+}
+.lock-screen__notification-row.is-action-visible
+  .lock-screen__notification-clear {
+  opacity: 1;
+}
 .lock-screen__notification {
   position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: 42px minmax(0, 1fr);
   gap: 10px;
-  min-height: 72px;
+  width: 100%;
+  min-height: 76px;
   border-radius: 18px;
-  padding: 11px 38px 11px 11px;
+  padding: 11px;
   color: #fff;
-  background-color: rgb(28 28 32 / 72%);
+  background-color: rgb(38 36 40 / 76%);
   text-shadow: 0 1px 3px #0009;
+  touch-action: pan-y;
+  transform: translate3d(var(--notification-swipe), 0, 0);
+  transition: transform 0.28s cubic-bezier(0.22, 0.78, 0.24, 1);
+  will-change: transform;
+  backdrop-filter: blur(22px) saturate(1.18);
+  -webkit-backdrop-filter: blur(22px) saturate(1.18);
+}
+.lock-screen__notification-row.is-swiping .lock-screen__notification {
+  transition: none;
 }
 .phone-notification.is-actionable {
   cursor: pointer;
@@ -800,21 +848,6 @@ button {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-.lock-screen__notification-close {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: grid;
-  width: 24px;
-  height: 24px;
-  place-items: center;
-  border: 0;
-  border-radius: 50%;
-  padding: 0;
-  color: #fff;
-  background: #0007;
-  cursor: pointer;
-}
 .lock-screen__footer {
   position: absolute;
   z-index: 3;
diff --git a/frontend/src/components/PhoneLockScreen.vue b/frontend/src/components/PhoneLockScreen.vue
index f7e7a78..d1dd7c4 100644
--- a/frontend/src/components/PhoneLockScreen.vue
+++ b/frontend/src/components/PhoneLockScreen.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
 import { kFab, kGlass } from 'konsta/vue'
-import { Camera, Flashlight, LockKeyhole, X } from 'lucide-vue-next'
+import { Camera, Flashlight, LockKeyhole, Trash2 } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import PhoneStatusIndicators from '@/components/PhoneStatusIndicators.vue'
 import { getPhoneApp } from '@/config/apps'
 import type { PhoneNotification } from '@/stores/notifications'
 import { usePhoneStore } from '@/stores/phone'
+import {
+  clampNotificationSwipeOffset,
+  NOTIFICATION_SWIPE_ACTION_WIDTH,
+  resolveNotificationSwipeAxis,
+  shouldRevealNotificationAction,
+  type NotificationSwipeAxis,
+} from '@/utils/notificationSwipe'
 import { nuiCall } from '@/utils/nui'
 import type { PhonePreferencesV1 } from '@/utils/preferences'
 
@@ -29,6 +36,9 @@ const now = ref(new Date())
 const dragOffset = ref(0)
 const dragging = ref(false)
 const flashlightActive = ref(false)
+const revealedNotificationId = ref<string | null>(null)
+const swipingNotificationId = ref<string | null>(null)
+const notificationSwipeOffset = ref(0)
 const shortcutColors = {
   bgIos: 'bg-ios-light-glass dark:bg-ios-dark-glass',
   activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
@@ -37,6 +47,12 @@ const shortcutColors = {
 let pointerStart = 0
 let pointerStartedAt = 0
 let clockTicker: number | undefined
+let notificationPointerId: number | null = null
+let notificationPointerStartX = 0
+let notificationPointerStartY = 0
+let notificationPointerStartedAt = 0
+let notificationSwipeAxis: NotificationSwipeAxis | null = null
+let suppressNotificationClickUntil = 0
 
 const date = computed(() =>
   new Intl.DateTimeFormat(phone.lang, {
@@ -83,9 +99,130 @@ function onPointerDown(event: PointerEvent): void {
 }
 
 function openNotification(notification: PhoneNotification): void {
+  if (performance.now() <= suppressNotificationClickUntil) return
+  if (revealedNotificationId.value === notification.id) {
+    closeNotificationAction()
+    return
+  }
   if (notification.route) emit('openNotification', notification)
 }
 
+function notificationOffset(notificationId: string): number {
+  if (swipingNotificationId.value === notificationId)
+    return notificationSwipeOffset.value
+  return revealedNotificationId.value === notificationId
+    ? -NOTIFICATION_SWIPE_ACTION_WIDTH
+    : 0
+}
+
+function notificationStyle(notificationId: string): Record<string, string> {
+  return {
+    '--notification-swipe': `${notificationOffset(notificationId)}px`,
+  }
+}
+
+function closeNotificationAction(): void {
+  revealedNotificationId.value = null
+  swipingNotificationId.value = null
+  notificationSwipeOffset.value = 0
+}
+
+function beginNotificationSwipe(
+  notificationId: string,
+  event: PointerEvent,
+): void {
+  if (props.preview || event.button !== 0) return
+
+  if (
+    revealedNotificationId.value &&
+    revealedNotificationId.value !== notificationId
+  ) {
+    revealedNotificationId.value = null
+  }
+
+  notificationPointerId = event.pointerId
+  notificationPointerStartX = event.clientX
+  notificationPointerStartY = event.clientY
+  notificationPointerStartedAt = performance.now()
+  notificationSwipeAxis = null
+  swipingNotificationId.value = notificationId
+  notificationSwipeOffset.value =
+    revealedNotificationId.value === notificationId
+      ? -NOTIFICATION_SWIPE_ACTION_WIDTH
+      : 0
+}
+
+function moveNotificationSwipe(
+  notificationId: string,
+  event: PointerEvent,
+): void {
+  if (
+    swipingNotificationId.value !== notificationId ||
+    notificationPointerId !== event.pointerId
+  ) {
+    return
+  }
+
+  const deltaX = event.clientX - notificationPointerStartX
+  const deltaY = event.clientY - notificationPointerStartY
+  notificationSwipeAxis ??= resolveNotificationSwipeAxis(deltaX, deltaY)
+
+  if (notificationSwipeAxis === 'vertical') {
+    swipingNotificationId.value = null
+    notificationSwipeOffset.value = 0
+    return
+  }
+  if (notificationSwipeAxis !== 'horizontal') return
+
+  const target = event.currentTarget as HTMLElement
+  if (!target.hasPointerCapture(event.pointerId))
+    target.setPointerCapture(event.pointerId)
+  event.preventDefault()
+
+  const startingOffset =
+    revealedNotificationId.value === notificationId
+      ? -NOTIFICATION_SWIPE_ACTION_WIDTH
+      : 0
+  notificationSwipeOffset.value = clampNotificationSwipeOffset(
+    startingOffset + deltaX,
+  )
+}
+
+function finishNotificationSwipe(
+  notificationId: string,
+  event: PointerEvent,
+): void {
+  if (
+    swipingNotificationId.value !== notificationId ||
+    notificationPointerId !== event.pointerId
+  ) {
+    return
+  }
+
+  const elapsed = Math.max(1, performance.now() - notificationPointerStartedAt)
+  const velocityX = (event.clientX - notificationPointerStartX) / elapsed
+  const wasHorizontal = notificationSwipeAxis === 'horizontal'
+  if (wasHorizontal) {
+    suppressNotificationClickUntil = performance.now() + 120
+    revealedNotificationId.value = shouldRevealNotificationAction(
+      notificationSwipeOffset.value,
+      velocityX,
+    )
+      ? notificationId
+      : null
+  }
+
+  swipingNotificationId.value = null
+  notificationSwipeOffset.value = 0
+  notificationPointerId = null
+  notificationSwipeAxis = null
+}
+
+function dismissNotification(notificationId: string): void {
+  closeNotificationAction()
+  emit('dismissNotification', notificationId)
+}
+
 function onPointerMove(event: PointerEvent): void {
   if (!dragging.value) return
   dragOffset.value = Math.min(0, event.clientY - pointerStart)
@@ -193,46 +330,64 @@ onBeforeUnmount(() => {
       >
         {{ phone.t('Notifications.clearAll') }}
       </button>
-      <k-glass
+      <div
         v-for="notification in props.notifications"
         :key="notification.id"
-        class="lock-screen__notification"
-        :class="{ 'is-actionable': !!notification.route }"
-        :highlight="false"
-        :role="notification.route ? 'button' : undefined"
-        :tabindex="notification.route ? 0 : undefined"
-        :aria-label="
-          notification.route ? phone.t('Notifications.open') : undefined
-        "
-        @click="openNotification(notification)"
-        @keydown.enter.prevent="openNotification(notification)"
-        @keydown.space.prevent="openNotification(notification)"
+        class="lock-screen__notification-row"
+        :class="{
+          'is-revealed': revealedNotificationId === notification.id,
+          'is-swiping': swipingNotificationId === notification.id,
+          'is-action-visible': notificationOffset(notification.id) < -0.5,
+        }"
+        :style="notificationStyle(notification.id)"
       >
-        <img
-          v-if="getPhoneApp(notification.appId)?.iconImage"
-          :src="getPhoneApp(notification.appId)?.iconImage"
-          alt=""
-          class="lock-screen__notification-icon"
-        />
-        <div class="lock-screen__notification-copy">
-          <div class="lock-screen__notification-heading">
-            <strong>{{ notification.title }}</strong>
-            <span>{{ phone.t('Notifications.now') }}</span>
-          </div>
-          <small v-if="notification.subtitle">{{
-            notification.subtitle
-          }}</small>
-          <p>{{ notification.text }}</p>
-        </div>
         <button
-          class="lock-screen__notification-close"
+          class="lock-screen__notification-clear"
           type="button"
-          :aria-label="phone.t('Common.close')"
-          @click.stop="emit('dismissNotification', notification.id)"
+          :tabindex="revealedNotificationId === notification.id ? 0 : -1"
+          :aria-hidden="revealedNotificationId !== notification.id"
+          :aria-label="phone.t('Notifications.clear')"
+          @click.stop="dismissNotification(notification.id)"
         >
-          <X :size="14" aria-hidden="true" />
+          <Trash2 :size="18" :stroke-width="1.8" aria-hidden="true" />
+          <span>{{ phone.t('Notifications.clear') }}</span>
         </button>
-      </k-glass>
+        <k-glass
+          class="lock-screen__notification"
+          :class="{ 'is-actionable': !!notification.route }"
+          :highlight="false"
+          :role="notification.route ? 'button' : undefined"
+          :tabindex="notification.route ? 0 : undefined"
+          :aria-label="
+            notification.route ? phone.t('Notifications.open') : undefined
+          "
+          @click="openNotification(notification)"
+          @keydown.enter.prevent="openNotification(notification)"
+          @keydown.space.prevent="openNotification(notification)"
+          @keydown.delete.prevent="dismissNotification(notification.id)"
+          @pointerdown.stop="beginNotificationSwipe(notification.id, $event)"
+          @pointermove.stop="moveNotificationSwipe(notification.id, $event)"
+          @pointerup.stop="finishNotificationSwipe(notification.id, $event)"
+          @pointercancel.stop="finishNotificationSwipe(notification.id, $event)"
+        >
+          <img
+            v-if="getPhoneApp(notification.appId)?.iconImage"
+            :src="getPhoneApp(notification.appId)?.iconImage"
+            alt=""
+            class="lock-screen__notification-icon"
+          />
+          <div class="lock-screen__notification-copy">
+            <div class="lock-screen__notification-heading">
+              <strong>{{ notification.title }}</strong>
+              <span>{{ phone.t('Notifications.now') }}</span>
+            </div>
+            <small v-if="notification.subtitle">{{
+              notification.subtitle
+            }}</small>
+            <p>{{ notification.text }}</p>
+          </div>
+        </k-glass>
+      </div>
     </section>
 
     <div v-if="!preview" class="lock-screen__footer">
diff --git a/frontend/src/utils/notificationSwipe.test.ts b/frontend/src/utils/notificationSwipe.test.ts
new file mode 100644
index 0000000..0378e5d
--- /dev/null
+++ b/frontend/src/utils/notificationSwipe.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  clampNotificationSwipeOffset,
+  NOTIFICATION_SWIPE_ACTION_WIDTH,
+  resolveNotificationSwipeAxis,
+  shouldRevealNotificationAction,
+} from '@/utils/notificationSwipe'
+
+describe('lock-screen notification swipe gestures', () => {
+  it('waits for a clear horizontal or vertical direction', () => {
+    expect(resolveNotificationSwipeAxis(5, 2)).toBeNull()
+    expect(resolveNotificationSwipeAxis(-24, 5)).toBe('horizontal')
+    expect(resolveNotificationSwipeAxis(-10, 18)).toBe('vertical')
+  })
+
+  it('only allows a resisted swipe to the left', () => {
+    expect(clampNotificationSwipeOffset(40)).toBe(0)
+    expect(clampNotificationSwipeOffset(-60)).toBe(-60)
+    expect(clampNotificationSwipeOffset(-240)).toBeGreaterThan(
+      -NOTIFICATION_SWIPE_ACTION_WIDTH - 17,
+    )
+  })
+
+  it('reveals clear after enough distance or a deliberate flick', () => {
+    expect(shouldRevealNotificationAction(-41, -0.2)).toBe(false)
+    expect(shouldRevealNotificationAction(-42, -0.2)).toBe(true)
+    expect(shouldRevealNotificationAction(-20, -0.5)).toBe(true)
+    expect(shouldRevealNotificationAction(-12, -0.8)).toBe(false)
+  })
+})
diff --git a/frontend/src/utils/notificationSwipe.ts b/frontend/src/utils/notificationSwipe.ts
new file mode 100644
index 0000000..5e2278d
--- /dev/null
+++ b/frontend/src/utils/notificationSwipe.ts
@@ -0,0 +1,46 @@
+export type NotificationSwipeAxis = 'horizontal' | 'vertical'
+
+export const NOTIFICATION_SWIPE_ACTION_WIDTH = 76
+export const NOTIFICATION_SWIPE_AXIS_LOCK = 8
+export const NOTIFICATION_SWIPE_TRIGGER = 42
+
+export function resolveNotificationSwipeAxis(
+  deltaX: number,
+  deltaY: number,
+): NotificationSwipeAxis | null {
+  const horizontalDistance = Math.abs(deltaX)
+  const verticalDistance = Math.abs(deltaY)
+  if (
+    Math.max(horizontalDistance, verticalDistance) <
+    NOTIFICATION_SWIPE_AXIS_LOCK
+  ) {
+    return null
+  }
+
+  return horizontalDistance > verticalDistance * 1.15
+    ? 'horizontal'
+    : 'vertical'
+}
+
+export function clampNotificationSwipeOffset(deltaX: number): number {
+  if (deltaX >= 0) return 0
+
+  const distance = Math.abs(deltaX)
+  const resistedDistance =
+    distance <= NOTIFICATION_SWIPE_ACTION_WIDTH
+      ? distance
+      : NOTIFICATION_SWIPE_ACTION_WIDTH +
+        (distance - NOTIFICATION_SWIPE_ACTION_WIDTH) * 0.16
+
+  return -Math.min(resistedDistance, NOTIFICATION_SWIPE_ACTION_WIDTH + 16)
+}
+
+export function shouldRevealNotificationAction(
+  offset: number,
+  velocityX: number,
+): boolean {
+  return (
+    offset <= -NOTIFICATION_SWIPE_TRIGGER ||
+    (offset <= -18 && velocityX <= -0.45)
+  )
+}

From cd28c640732c0ac31f58a95c74a1e33897794963 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 03:10:45 +0200
Subject: [PATCH 56/63] ENH - add Mail selection and batch deletion

---
 frontend/src/stores/mail.test.ts    |  68 +++
 frontend/src/stores/mail.ts         |  16 +
 frontend/src/types/mail.ts          |   6 +-
 frontend/src/views/apps/MailApp.vue | 750 +++++++++++++++++-----------
 frontend/testserver/index.cjs       |  47 +-
 frontend/testserver/smoke.cjs       |  68 ++-
 sky_phone/config/config.lua         |   2 +
 sky_phone/source/client/main.lua    |   1 +
 sky_phone/source/server/mail.lua    | 169 +++++++
 9 files changed, 838 insertions(+), 289 deletions(-)

diff --git a/frontend/src/stores/mail.test.ts b/frontend/src/stores/mail.test.ts
index 17e7a3a..4436b54 100644
--- a/frontend/src/stores/mail.test.ts
+++ b/frontend/src/stores/mail.test.ts
@@ -86,6 +86,74 @@ describe('mail store', () => {
     })
   })
 
+  it('deletes selected mail in one batch and reloads the remaining entries', async () => {
+    const remaining = listItem(3)
+    mockNuiCall
+      .mockResolvedValueOnce({ success: true })
+      .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({
+        data: { hasMore: false, items: [remaining], offset: 0 },
+        success: true,
+      })
+
+    const mail = useMailStore()
+    mail.folder = 'sent'
+    mail.search = 'plans'
+    mail.items = [listItem(1), listItem(2), remaining]
+
+    const success = await mail.deleteMany([1, 2])
+
+    expect(success).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledTimes(3)
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'mail:delete-many', {
+      folder: 'sent',
+      ids: [1, 2],
+    })
+    expect(mockNuiCall).toHaveBeenNthCalledWith(2, 'mail:counts')
+    expect(mockNuiCall).toHaveBeenNthCalledWith(3, 'mail:list', {
+      folder: 'sent',
+      offset: 0,
+      search: 'plans',
+    })
+    expect(mail.items.map((item) => item.id)).toEqual([3])
+  })
+
+  it('does not refresh a cleared session after a batch delete returns', async () => {
+    let resolveDelete!: (response: NuiResponse) => void
+    mockNuiCall.mockReturnValueOnce(
+      new Promise<NuiResponse>((resolve) => {
+        resolveDelete = resolve
+      }),
+    )
+    const mail = useMailStore()
+
+    const deletion = mail.deleteMany([1, 2])
+    await mail.bootstrap('')
+    resolveDelete({ success: true })
+
+    expect(await deletion).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledTimes(1)
+  })
+
+  it('sends the mail read state with the server contract field', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({ success: true })
+      .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({
+        data: { hasMore: false, items: [listItem(2)], offset: 0 },
+        success: true,
+      })
+    const mail = useMailStore()
+
+    expect(await mail.mutateEntry('mail:set-read', 2, { read: true })).toBe(
+      true,
+    )
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'mail:set-read', {
+      id: 2,
+      read: true,
+    })
+  })
+
   it('logs out the active session and resets mailbox state', async () => {
     mockNuiCall
       .mockResolvedValueOnce({
diff --git a/frontend/src/stores/mail.ts b/frontend/src/stores/mail.ts
index 01a4c5b..d9ac1e8 100644
--- a/frontend/src/stores/mail.ts
+++ b/frontend/src/stores/mail.ts
@@ -209,6 +209,21 @@ export const useMailStore = defineStore('mail', () => {
     return response.success
   }
 
+  async function deleteMany(ids: Array<number | string>): Promise<boolean> {
+    const activeFolder = folder.value
+    const session = sessionGeneration
+    const response = await nuiCall('mail:delete-many', {
+      folder: activeFolder,
+      ids,
+    })
+    if (!response.success || session !== sessionGeneration) {
+      return response.success
+    }
+
+    await Promise.all([refreshCounts(), loadFolder(folder.value, search.value)])
+    return true
+  }
+
   async function emptyTrash(): Promise<boolean> {
     const response = await nuiCall('mail:empty-trash')
     if (response.success) {
@@ -222,6 +237,7 @@ export const useMailStore = defineStore('mail', () => {
     bootstrap,
     counts,
     deleteDraft,
+    deleteMany,
     emptyTrash,
     folder,
     hasMore,
diff --git a/frontend/src/types/mail.ts b/frontend/src/types/mail.ts
index 2815d2a..87010da 100644
--- a/frontend/src/types/mail.ts
+++ b/frontend/src/types/mail.ts
@@ -1,3 +1,5 @@
+import type { DatabaseDateValue } from '@/utils/date'
+
 export type MailFolder = 'inbox' | 'sent' | 'drafts' | 'trash'
 
 export type MailCounts = {
@@ -10,7 +12,7 @@ export type MailCounts = {
 
 export type MailListItem = {
   body?: string
-  created_at: string
+  created_at: DatabaseDateValue
   folder?: 'inbox' | 'sent'
   id: number | string
   is_read?: boolean
@@ -33,7 +35,7 @@ export type MailMessage = MailListItem & {
 
 export type MailDraft = {
   body: string
-  created_at: string
+  created_at: DatabaseDateValue
   id: string
   recipients: string[]
   subject: string
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index 40fa532..493f544 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -1,7 +1,20 @@
 <script setup lang="ts">
-import { kDialog, kDialogButton, kPage, kPreloader, kToast } from 'konsta/vue'
+import {
+  kDialog,
+  kDialogButton,
+  kFab,
+  kLink,
+  kNavbar,
+  kNavbarBackLink,
+  kPage,
+  kPreloader,
+  kToast,
+  kToolbar,
+  kToolbarPane,
+} from 'konsta/vue'
 import {
   ArrowLeft,
+  Check,
   ChevronRight,
   FileText,
   Forward,
@@ -46,6 +59,7 @@ import {
   mailPlainText,
   parseMailRecipients,
 } from '@/utils/mail'
+import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
 import {
   clampMailSwipeOffset,
   resolveMailSwipeAction,
@@ -74,6 +88,7 @@ type MailSwipeState = {
 }
 
 const MAIL_SWIPE_COMMIT_ANIMATION_MS = 180
+const MAIL_DELETE_BATCH_SIZE = 50
 
 const phone = usePhoneStore()
 const mail = useMailStore()
@@ -96,6 +111,9 @@ const toastText = ref('')
 const emptyTrashOpened = ref(false)
 const swipeState = ref<MailSwipeState | null>(null)
 const ignoredRowClick = ref<string | null>(null)
+const selecting = ref(false)
+const selectedItemKeys = ref<string[]>([])
+const deletingSelected = ref(false)
 let draftTimer: ReturnType<typeof setTimeout> | undefined
 let ignoredRowClickTimer: ReturnType<typeof setTimeout> | undefined
 let searchTimer: ReturnType<typeof setTimeout> | undefined
@@ -103,6 +121,11 @@ let toastTimer: ReturnType<typeof setTimeout> | undefined
 
 const authenticated = computed(() => Boolean(mail.accountEmail))
 const folderTitle = computed(() => phone.t(`Apps.mail.${mail.folder}`))
+const selectedItems = computed(() =>
+  mail.items.filter((item) =>
+    selectedItemKeys.value.includes(mailItemKey(item)),
+  ),
+)
 const canSend = computed(
   () =>
     Boolean(parseMailRecipients(recipientText.value)) &&
@@ -178,14 +201,9 @@ function updateRecipientText(event: Event): void {
   recipientText.value = filteredEventValue(event, filterMailRecipientInput)
 }
 
-function parseDate(value: string): Date | null {
-  const date = new Date(value.replace(' ', 'T'))
-  return Number.isNaN(date.getTime()) ? null : date
-}
-
-function formatDate(value: string): string {
-  const date = parseDate(value)
-  if (!date) return value
+function formatDate(value: DatabaseDateValue): string {
+  const date = parseDatabaseDate(value)
+  if (Number.isNaN(date.getTime())) return String(value)
   return new Intl.DateTimeFormat(phone.lang, {
     day: 'numeric',
     hour: '2-digit',
@@ -195,9 +213,9 @@ function formatDate(value: string): string {
   }).format(date)
 }
 
-function formatListDate(value: string): string {
-  const date = parseDate(value)
-  if (!date) return value
+function formatListDate(value: DatabaseDateValue): string {
+  const date = parseDatabaseDate(value)
+  if (Number.isNaN(date.getTime())) return String(value)
   const today = new Date()
   if (date.toDateString() === today.toDateString()) {
     return new Intl.DateTimeFormat(phone.lang, {
@@ -252,11 +270,57 @@ function mailRowClasses(item: MailListItem): Record<string, boolean> {
     'is-committing-delete': active && state.committing === 'delete',
     'is-committing-read': active && state.committing === 'read',
     'is-dragging': active && state.axis === 'horizontal' && !state.committing,
+    'is-selected': isMailSelected(item),
   }
 }
 
+function isMailSelected(item: MailListItem): boolean {
+  return selectedItemKeys.value.includes(mailItemKey(item))
+}
+
+function clearMailSelection(): void {
+  selecting.value = false
+  selectedItemKeys.value = []
+  swipeState.value = null
+}
+
+function toggleMailSelection(): void {
+  if (deletingSelected.value) return
+  if (selecting.value) {
+    clearMailSelection()
+    return
+  }
+  selecting.value = true
+  selectedItemKeys.value = []
+  swipeState.value = null
+}
+
+function toggleMailItemSelection(item: MailListItem): void {
+  const itemKey = mailItemKey(item)
+  if (selectedItemKeys.value.includes(itemKey)) {
+    selectedItemKeys.value = selectedItemKeys.value.filter(
+      (key) => key !== itemKey,
+    )
+    return
+  }
+  if (selectedItemKeys.value.length >= MAIL_DELETE_BATCH_SIZE) {
+    showToast(
+      phone.t('Apps.mail.selectionLimit', {
+        count: String(MAIL_DELETE_BATCH_SIZE),
+      }),
+    )
+    return
+  }
+  selectedItemKeys.value = [...selectedItemKeys.value, itemKey]
+}
+
 function beginMailSwipe(item: MailListItem, event: PointerEvent): void {
-  if (!event.isPrimary || event.button !== 0 || swipeState.value?.committing) {
+  if (
+    selecting.value ||
+    !event.isPrimary ||
+    event.button !== 0 ||
+    swipeState.value?.committing
+  ) {
     return
   }
 
@@ -272,6 +336,7 @@ function beginMailSwipe(item: MailListItem, event: PointerEvent): void {
 }
 
 function moveMailSwipe(item: MailListItem, event: PointerEvent): void {
+  if (selecting.value) return
   const state = swipeState.value
   if (
     !state ||
@@ -310,7 +375,7 @@ async function executeSwipeAction(
   action: MailSwipeAction,
 ): Promise<boolean> {
   if (action === 'read') {
-    return mail.mutateEntry('mail:set-read', Number(item.id), { isRead: true })
+    return mail.mutateEntry('mail:set-read', Number(item.id), { read: true })
   }
 
   if (mail.folder === 'drafts') {
@@ -342,6 +407,7 @@ async function commitMailSwipe(
 }
 
 function endMailSwipe(item: MailListItem, event: PointerEvent): void {
+  if (selecting.value) return
   const state = swipeState.value
   if (
     !state ||
@@ -382,6 +448,10 @@ function cancelMailSwipe(item: MailListItem, event: PointerEvent): void {
 }
 
 function handleMailRowClick(item: MailListItem): void {
+  if (selecting.value) {
+    toggleMailItemSelection(item)
+    return
+  }
   const itemKey = mailItemKey(item)
   if (ignoredRowClick.value === itemKey) {
     ignoredRowClick.value = null
@@ -444,6 +514,7 @@ async function signOut(): Promise<void> {
 }
 
 async function openFolder(folder: MailFolder): Promise<void> {
+  clearMailSelection()
   if (!(await mail.loadFolder(folder))) {
     showToast(errorText())
     return
@@ -594,6 +665,7 @@ async function mutateSelected(
 
 function updateSearch(event: Event): void {
   const value = eventValue(event)
+  if (selecting.value) clearMailSelection()
   if (searchTimer) clearTimeout(searchTimer)
   searchTimer = setTimeout(() => {
     void mail.loadFolder(mail.folder, value)
@@ -605,16 +677,39 @@ async function confirmEmptyTrash(): Promise<void> {
   if (!(await mail.emptyTrash())) showToast(errorText())
 }
 
+function clearMailSearch(): void {
+  if (selecting.value) clearMailSelection()
+  void mail.loadFolder(mail.folder, '')
+}
+
+async function deleteSelectedMessages(): Promise<void> {
+  if (deletingSelected.value || !selectedItems.value.length) return
+
+  deletingSelected.value = true
+  const deleted = await mail.deleteMany(
+    selectedItems.value.map((item) => item.id),
+  )
+  deletingSelected.value = false
+  if (!deleted) {
+    showToast(errorText())
+    return
+  }
+  clearMailSelection()
+}
+
 function goBack(): void {
-  if (screen.value === 'list') screen.value = 'folders'
-  else if (screen.value === 'message') screen.value = 'list'
+  if (deletingSelected.value) return
+  if (screen.value === 'list') {
+    clearMailSelection()
+    screen.value = 'folders'
+  } else if (screen.value === 'message') screen.value = 'list'
 }
 
 function onMailEvent(event: MessageEvent<MailEvent>): void {
   if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data.type === 'mail:changed' && event.data.data?.counts) {
     mail.setCounts(event.data.data.counts)
-    if (screen.value === 'list') {
+    if (screen.value === 'list' && !deletingSelected.value) {
       void mail.loadFolder(mail.folder, mail.search)
     }
   }
@@ -625,6 +720,17 @@ watch([recipientText, subject, body], () => {
   scheduleDraftSave()
 })
 
+watch(
+  () => mail.items.map((item) => mailItemKey(item)),
+  (visibleItemKeys) => {
+    if (!selecting.value) return
+    const visible = new Set(visibleItemKeys)
+    selectedItemKeys.value = selectedItemKeys.value.filter((key) =>
+      visible.has(key),
+    )
+  },
+)
+
 onMounted(() => window.addEventListener('message', onMailEvent))
 
 onBeforeUnmount(() => {
@@ -812,14 +918,15 @@ onBeforeUnmount(() => {
         </div>
       </main>
 
-      <button
+      <k-fab
+        component="button"
         class="mail-compose-fab"
         type="button"
         :aria-label="phone.t('Apps.mail.compose')"
         @click="beginCompose()"
       >
-        <SquarePen :size="24" />
-      </button>
+        <template #icon><SquarePen :size="22" /></template>
+      </k-fab>
     </div>
   </k-page>
 
@@ -830,27 +937,40 @@ onBeforeUnmount(() => {
   >
     <div class="mail-screen">
       <header class="mail-header mail-header--list">
-        <button
-          class="mail-icon-button"
-          type="button"
+        <k-link
+          component="button"
+          icon-only
+          class="mail-header__back"
           :aria-label="phone.t('Apps.mail.mailboxes')"
           @click="goBack"
         >
           <ArrowLeft :size="21" />
-        </button>
-        <button
-          v-if="mail.folder === 'trash' && mail.items.length"
-          class="mail-header__text"
-          type="button"
-          @click="emptyTrashOpened = true"
-        >
-          {{ phone.t('Apps.mail.emptyTrash') }}
-        </button>
+        </k-link>
+        <div v-if="mail.items.length" class="mail-header__actions">
+          <k-link
+            v-if="mail.folder === 'trash' && !selecting"
+            component="button"
+            @click="emptyTrashOpened = true"
+          >
+            {{ phone.t('Apps.mail.emptyTrash') }}
+          </k-link>
+          <k-link
+            component="button"
+            :disabled="deletingSelected"
+            @click="toggleMailSelection"
+          >
+            {{ phone.t(selecting ? 'Common.done' : 'Apps.mail.select') }}
+          </k-link>
+        </div>
         <span v-else />
         <div class="mail-header__title">
-          <small
-            >{{ mail.items.length }} {{ phone.t('Apps.mail.messages') }}</small
-          >
+          <small>{{
+            selecting
+              ? phone.t('Apps.mail.selectedCount', {
+                  count: String(selectedItems.length),
+                })
+              : `${mail.items.length} ${phone.t('Apps.mail.messages')}`
+          }}</small>
           <h1>{{ folderTitle }}</h1>
         </div>
         <label class="mail-search">
@@ -864,7 +984,7 @@ onBeforeUnmount(() => {
             v-if="mail.search"
             type="button"
             :aria-label="phone.t('Common.close')"
-            @click="mail.loadFolder(mail.folder, '')"
+            @click="clearMailSearch"
           >
             <X :size="14" />
           </button>
@@ -897,14 +1017,19 @@ onBeforeUnmount(() => {
               class="mail-row"
               :class="{
                 'mail-row--unread': mail.folder === 'inbox' && !item.is_read,
+                'mail-row--selecting': selecting,
               }"
               type="button"
+              :aria-pressed="selecting ? isMailSelected(item) : undefined"
               @click="handleMailRowClick(item)"
             >
               <span
-                v-if="mail.folder === 'inbox' && !item.is_read"
+                v-if="!selecting && mail.folder === 'inbox' && !item.is_read"
                 class="mail-row__unread"
               />
+              <span v-if="selecting" class="mail-row__selection">
+                <Check v-if="isMailSelected(item)" :size="14" />
+              </span>
               <span
                 class="mail-avatar"
                 :class="{ 'mail-avatar--draft': mail.folder === 'drafts' }"
@@ -956,14 +1081,41 @@ onBeforeUnmount(() => {
         </div>
       </main>
 
-      <button
+      <k-fab
+        v-if="!selecting"
+        component="button"
         class="mail-compose-fab"
         type="button"
         :aria-label="phone.t('Apps.mail.compose')"
         @click="beginCompose()"
       >
-        <SquarePen :size="21" />
-      </button>
+        <template #icon><SquarePen :size="21" /></template>
+      </k-fab>
+      <k-toolbar
+        v-else
+        class="mail-selection-toolbar"
+        inner-class="mail-selection-toolbar__inner"
+        :outline="false"
+      >
+        <k-toolbar-pane class="mail-selection-toolbar__pane">
+          <span>
+            {{
+              phone.t('Apps.mail.selectedCount', {
+                count: String(selectedItems.length),
+              })
+            }}
+          </span>
+          <k-link
+            component="button"
+            :disabled="deletingSelected || !selectedItems.length"
+            @click="deleteSelectedMessages"
+          >
+            <k-preloader v-if="deletingSelected" />
+            <Trash2 v-else :size="18" />
+            {{ phone.t('Apps.mail.deleteSelected') }}
+          </k-link>
+        </k-toolbar-pane>
+      </k-toolbar>
     </div>
   </k-page>
 
@@ -973,25 +1125,26 @@ onBeforeUnmount(() => {
     :aria-label="selectedMessage.subject"
   >
     <div class="mail-screen">
-      <header class="mail-header mail-header--compact">
-        <button
-          class="mail-icon-button"
-          type="button"
-          :aria-label="folderTitle"
-          @click="goBack"
-        >
-          <ArrowLeft :size="21" />
-        </button>
-        <span class="mail-header__compact-title">{{ folderTitle }}</span>
-        <button
-          class="mail-icon-button"
-          type="button"
-          :aria-label="phone.t('Apps.mail.compose')"
-          @click="beginCompose()"
-        >
-          <SquarePen :size="19" />
-        </button>
-      </header>
+      <k-navbar class="mail-navbar" :title="folderTitle">
+        <template #left>
+          <k-navbar-back-link
+            component="button"
+            :text="folderTitle"
+            :aria-label="folderTitle"
+            @click="goBack"
+          />
+        </template>
+        <template #right>
+          <k-link
+            component="button"
+            icon-only
+            :aria-label="phone.t('Apps.mail.compose')"
+            @click="beginCompose()"
+          >
+            <SquarePen :size="20" />
+          </k-link>
+        </template>
+      </k-navbar>
 
       <article class="mail-message">
         <div class="mail-message__sender">
@@ -1019,95 +1172,127 @@ onBeforeUnmount(() => {
         </div>
       </article>
 
-      <footer class="mail-action-bar">
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.easyShare.share')"
-          @click="shareMessage"
-        >
-          <Share2 :size="20" />
-        </button>
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.mail.reply')"
-          @click="composeReply(false)"
-        >
-          <Reply :size="20" />
-        </button>
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.mail.replyAll')"
-          @click="composeReply(true)"
-        >
-          <ReplyAll :size="20" />
-        </button>
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.mail.forward')"
-          @click="composeForward"
-        >
-          <Forward :size="20" />
-        </button>
-        <button
-          v-if="selectedMessage.trashed_at"
-          type="button"
-          :aria-label="phone.t('Apps.mail.restore')"
-          @click="mutateSelected('mail:restore')"
-        >
-          <RotateCcw :size="20" />
-        </button>
-        <button
-          v-else
-          class="mail-action-bar__danger"
-          type="button"
-          :aria-label="phone.t('Apps.mail.moveToTrash')"
-          @click="mutateSelected('mail:trash')"
-        >
-          <Trash2 :size="20" />
-        </button>
-        <button
-          v-if="selectedMessage.trashed_at"
-          class="mail-action-bar__danger"
-          type="button"
-          :aria-label="phone.t('Apps.mail.deleteForever')"
-          @click="mutateSelected('mail:delete-forever')"
-        >
-          <Trash2 :size="20" />
-        </button>
-        <button
-          v-else
-          type="button"
-          :aria-label="phone.t('Apps.mail.markUnread')"
-          @click="mutateSelected('mail:set-read', { isRead: false })"
-        >
-          <MailOpen :size="20" />
-        </button>
-      </footer>
+      <k-toolbar
+        class="mail-action-bar"
+        inner-class="mail-action-bar__inner"
+        :outline="false"
+      >
+        <k-toolbar-pane class="mail-action-bar__pane">
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.easyShare.share')"
+            @click="shareMessage"
+          >
+            <Share2 :size="20" />
+          </k-link>
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.reply')"
+            @click="composeReply(false)"
+          >
+            <Reply :size="20" />
+          </k-link>
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.replyAll')"
+            @click="composeReply(true)"
+          >
+            <ReplyAll :size="20" />
+          </k-link>
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.forward')"
+            @click="composeForward"
+          >
+            <Forward :size="20" />
+          </k-link>
+          <k-link
+            v-if="selectedMessage.trashed_at"
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.restore')"
+            @click="mutateSelected('mail:restore')"
+          >
+            <RotateCcw :size="20" />
+          </k-link>
+          <k-link
+            v-else
+            component="button"
+            icon-only
+            class="mail-action-bar__danger"
+            type="button"
+            :aria-label="phone.t('Apps.mail.moveToTrash')"
+            @click="mutateSelected('mail:trash')"
+          >
+            <Trash2 :size="20" />
+          </k-link>
+          <k-link
+            v-if="selectedMessage.trashed_at"
+            component="button"
+            icon-only
+            class="mail-action-bar__danger"
+            type="button"
+            :aria-label="phone.t('Apps.mail.deleteForever')"
+            @click="mutateSelected('mail:delete-forever')"
+          >
+            <Trash2 :size="20" />
+          </k-link>
+          <k-link
+            v-else
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.markUnread')"
+            @click="mutateSelected('mail:set-read', { read: false })"
+          >
+            <MailOpen :size="20" />
+          </k-link>
+        </k-toolbar-pane>
+      </k-toolbar>
     </div>
   </k-page>
 
   <k-page v-else-if="screen === 'compose'" class="mail-page">
     <div class="mail-screen mail-compose">
-      <header class="mail-header mail-header--compose">
-        <button
-          class="mail-icon-button mail-icon-button--large"
-          type="button"
-          :aria-label="phone.t('Common.cancel')"
-          @click="closeCompose"
-        >
-          <X :size="22" />
-        </button>
-        <h1>{{ phone.t('Apps.mail.compose') }}</h1>
-        <button
-          class="mail-icon-button mail-icon-button--large mail-icon-button--send"
-          type="button"
-          :disabled="!canSend"
-          :aria-label="phone.t('Common.send')"
-          @click="sendMessage"
-        >
-          <Send :size="20" />
-        </button>
-      </header>
+      <k-navbar
+        class="mail-navbar mail-compose__navbar"
+        left-class="mail-compose__nav-side mail-compose__nav-side--left"
+        right-class="mail-compose__nav-side mail-compose__nav-side--right"
+        title-class="mail-compose__nav-title"
+        :title="phone.t('Apps.mail.compose')"
+      >
+        <template #left>
+          <k-link
+            component="button"
+            class="mail-compose__nav-action"
+            type="button"
+            @click="closeCompose"
+          >
+            {{ phone.t('Common.cancel') }}
+          </k-link>
+        </template>
+        <template #right>
+          <k-link
+            component="button"
+            class="mail-compose__nav-action"
+            type="button"
+            :disabled="!canSend"
+            :aria-label="phone.t('Common.send')"
+            @click="sendMessage"
+          >
+            {{ phone.t('Common.send') }}
+          </k-link>
+        </template>
+      </k-navbar>
 
       <div class="mail-compose__fields">
         <label>
@@ -1286,38 +1471,10 @@ button {
   cursor: pointer;
 }
 
-.mail-icon-button {
-  display: grid;
+.mail-header__back {
   width: 38px;
   height: 38px;
-  place-items: center;
-  border: 1px solid #ffffff20;
-  border-radius: 50%;
-  background: #242426e8;
-  color: #f5f5f7;
-  box-shadow: inset 0 1px #ffffff18;
-  cursor: pointer;
-  transition:
-    transform 160ms cubic-bezier(0.22, 0.8, 0.3, 1),
-    border-color 160ms ease,
-    background-color 160ms ease,
-    color 160ms ease,
-    box-shadow 160ms ease;
-}
-
-.mail-icon-button:disabled {
-  color: #68686d;
-  cursor: default;
-}
-
-.mail-icon-button--large {
-  width: 44px;
-  height: 44px;
-}
-
-.mail-icon-button--send:not(:disabled) {
-  border-color: #0a84ff55;
-  background: var(--mail-blue);
+  color: var(--mail-blue);
 }
 
 .mail-folders {
@@ -1380,8 +1537,24 @@ button {
   grid-template-columns: 1fr 1fr;
 }
 
-.mail-header--list .mail-header__text {
+.mail-header--list > .mail-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   justify-self: end;
+  white-space: nowrap;
+}
+
+.mail-header__actions :deep(.k-link) {
+  border: 0;
+  padding: 4px 0;
+  background: transparent;
+  color: var(--mail-blue);
+  font-size: 12px;
+}
+
+.mail-header__actions :deep(.k-link:disabled) {
+  opacity: 0.4;
 }
 
 .mail-search {
@@ -1500,6 +1673,31 @@ button {
   will-change: transform;
 }
 
+.mail-row--selecting {
+  grid-template-columns: 26px 48px minmax(0, 1fr) 15px;
+  gap: 9px;
+  padding-left: 11px;
+}
+
+.mail-row-shell.is-selected .mail-row {
+  background: #0a84ff1c;
+}
+
+.mail-row__selection {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 1.5px solid #636366;
+  border-radius: 50%;
+  color: #fff;
+}
+
+.mail-row-shell.is-selected .mail-row__selection {
+  border-color: var(--mail-blue);
+  background: var(--mail-blue);
+}
+
 .mail-row-shell.is-dragging .mail-row {
   transition: none;
 }
@@ -1617,25 +1815,45 @@ button {
   z-index: 8;
   right: 17px;
   bottom: 32px;
-  display: grid;
-  width: 52px;
-  height: 52px;
-  place-items: center;
-  border: 1px solid #ffffff24;
-  border-radius: 50%;
-  background: #2c2c2ef0;
-  color: var(--mail-blue);
-  box-shadow:
-    0 8px 24px #000a,
-    inset 0 1px #ffffff24;
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  cursor: pointer;
-  transition:
-    transform 180ms cubic-bezier(0.22, 0.8, 0.3, 1),
-    border-color 180ms ease,
-    background-color 180ms ease,
-    box-shadow 180ms ease;
+}
+
+.mail-selection-toolbar {
+  position: absolute;
+  z-index: 8;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.mail-selection-toolbar :deep(.mail-selection-toolbar__inner) {
+  width: 100%;
+  max-width: 330px;
+}
+
+.mail-selection-toolbar :deep(.mail-selection-toolbar__pane) {
+  width: 100%;
+  gap: 14px;
+  padding: 0 7px 0 15px;
+}
+
+.mail-selection-toolbar :deep(.mail-selection-toolbar__pane > span) {
+  overflow: hidden;
+  color: #f5f5f7;
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-selection-toolbar :deep(.k-link) {
+  gap: 6px;
+  color: #ff453a;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.mail-selection-toolbar :deep(.k-link:disabled) {
+  opacity: 0.4;
 }
 
 .mail-loading,
@@ -1674,21 +1892,42 @@ button {
   color: var(--mail-blue);
 }
 
-.mail-header--compact {
-  grid-template-columns: 44px 1fr 44px;
-  border-bottom: 1px solid var(--mail-border);
+.mail-navbar {
+  --k-safe-area-top: 46px;
+  color: #f5f5f7;
 }
 
-.mail-header__compact-title {
+.mail-navbar :deep(.k-link) {
+  color: var(--mail-blue);
+}
+
+.mail-navbar :deep(.k-link:disabled) {
+  opacity: 0.4;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-side--left) {
+  margin-right: 12px;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-side--right) {
+  margin-left: 12px;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-title) {
+  max-width: 112px;
   overflow: hidden;
-  font-size: 14px;
-  font-weight: 650;
   text-overflow: ellipsis;
-  white-space: nowrap;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-action) {
+  min-width: 54px;
+  justify-content: center;
+  padding-right: 10px;
+  padding-left: 10px;
 }
 
 .mail-message {
-  height: calc(100% - 102px);
+  height: calc(100% - 90px);
   overflow-y: auto;
   padding: 18px 18px 104px;
   user-select: text;
@@ -1741,43 +1980,27 @@ button {
 .mail-action-bar {
   position: absolute;
   z-index: 7;
-  right: 12px;
-  bottom: 25px;
-  left: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding: 8px;
-  border: 1px solid #ffffff24;
-  border-radius: 24px;
-  background: #242426e8;
-  box-shadow:
-    0 9px 28px #000b,
-    inset 0 1px #ffffff1f;
-  backdrop-filter: blur(22px) saturate(160%);
-  -webkit-backdrop-filter: blur(22px) saturate(160%);
+  right: 0;
+  bottom: 0;
+  left: 0;
   animation: mail-action-bar-enter 320ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
 }
 
-.mail-action-bar button {
-  position: relative;
-  display: grid;
-  width: 42px;
-  height: 36px;
-  place-items: center;
-  border: 0;
-  border-radius: 12px;
-  background: transparent;
-  color: #f5f5f7;
-  cursor: pointer;
-  transition:
-    transform 160ms cubic-bezier(0.22, 0.8, 0.3, 1),
-    color 160ms ease,
-    background-color 160ms ease,
-    box-shadow 160ms ease;
+.mail-action-bar :deep(.mail-action-bar__inner) {
+  width: 100%;
+  max-width: 340px;
 }
 
-.mail-action-bar button::after {
+.mail-action-bar :deep(.mail-action-bar__pane) {
+  width: 100%;
+}
+
+.mail-action-bar :deep(.k-link) {
+  position: relative;
+  color: #f5f5f7;
+}
+
+.mail-action-bar :deep(.k-link::after) {
   position: absolute;
   bottom: calc(100% + 9px);
   left: 50%;
@@ -1799,20 +2022,13 @@ button {
   white-space: nowrap;
 }
 
-.mail-action-bar button:active,
-.mail-compose-fab:active,
-.mail-icon-button:active {
-  transform: scale(0.9);
-}
-
-.mail-action-bar button:focus-visible,
-.mail-compose-fab:focus-visible,
-.mail-icon-button:focus-visible {
+.mail-action-bar :deep(.k-link:focus-visible),
+.mail-compose-fab:focus-visible {
   outline: 2px solid var(--mail-blue);
   outline-offset: 2px;
 }
 
-.mail-action-bar button:focus-visible::after {
+.mail-action-bar :deep(.k-link:focus-visible::after) {
   opacity: 1;
   transform: translate(-50%, 0) scale(1);
 }
@@ -1823,56 +2039,20 @@ button {
     background: #ffffff0b;
   }
 
-  .mail-icon-button:not(:disabled):hover {
-    border-color: #0a84ff66;
-    background: #343438f2;
-    color: #fff;
-    box-shadow:
-      0 5px 16px #0007,
-      inset 0 1px #ffffff2b;
-    transform: translateY(-1px) scale(1.04);
-  }
-
-  .mail-compose-fab:hover {
-    border-color: #0a84ff70;
-    background: #343438fa;
-    box-shadow:
-      0 11px 28px #000b,
-      0 0 0 4px #0a84ff18,
-      inset 0 1px #ffffff30;
-    transform: translateY(-2px) scale(1.05);
-  }
-
-  .mail-action-bar button:hover {
-    background: #0a84ff26;
+  .mail-action-bar :deep(.k-link:hover) {
     color: #64b5ff;
-    box-shadow: inset 0 0 0 1px #0a84ff35;
-    transform: translateY(-2px) scale(1.06);
   }
 
-  .mail-action-bar button.mail-action-bar__danger:hover {
-    background: #ff453a24;
+  .mail-action-bar :deep(.mail-action-bar__danger:hover) {
     color: #ff6961;
-    box-shadow: inset 0 0 0 1px #ff453a35;
   }
 
-  .mail-action-bar button:hover::after {
+  .mail-action-bar :deep(.k-link:hover::after) {
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
   }
 }
 
-.mail-header--compose {
-  grid-template-columns: 52px 1fr 52px;
-  padding-bottom: 12px;
-}
-
-.mail-header--compose h1 {
-  margin: 0;
-  font-size: 19px;
-  font-weight: 700;
-}
-
 .mail-compose__fields {
   border-top: 1px solid var(--mail-border);
 }
@@ -2144,11 +2324,13 @@ button {
 
   .mail-row,
   .mail-row-action,
-  .mail-action-bar button,
   .mail-compose-fab,
-  .mail-icon-button,
   .mail-folder-row {
     transition-duration: 0.01ms;
   }
+
+  .mail-action-bar :deep(.k-link) {
+    transition-duration: 0.01ms;
+  }
 }
 </style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 4ff3382..a429e4a 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -1389,7 +1389,9 @@ const accountDevices = [
 const messages = [
   {
     body: '## Welcome to iFruit Mail\n\nYour shared mailbox is **ready to use**.\n\n- Send formatted messages\n- Keep drafts on every linked device\n- Reply without losing the conversation\n\n> Tip: use the small formatting bar while composing.',
-    created_at: '2026-08-04 11:30:00',
+    // Database dates may cross the NUI boundary as Unix timestamps.
+    // Keep one received message numeric so the browser preview covers that contract.
+    created_at: Date.parse('2026-08-04T11:30:00'),
     folder: 'inbox',
     id: 1,
     is_read: false,
@@ -7064,7 +7066,13 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'housing:overview') {
-    response.json({ success: true, data: mockHousingOverview })
+    response.json({
+      success: true,
+      data:
+        testScenario === 'house-empty'
+          ? { ...mockHousingOverview, properties: [] }
+          : mockHousingOverview,
+    })
     return
   }
   if (endpoint === 'housing:key-candidates') {
@@ -9003,6 +9011,41 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: { id: 'mock-sent-message' } })
     return
   }
+  if (endpoint === 'mail:delete-many') {
+    const { folder, ids } = request.body
+    if (
+      !['drafts', 'inbox', 'sent', 'trash'].includes(folder) ||
+      !Array.isArray(ids)
+    ) {
+      response.json({ success: false, error: 'invalid_request' })
+      return
+    }
+
+    const selectedIds = new Set(ids.map(String))
+    if (folder === 'drafts') {
+      if (draft && selectedIds.has(String(draft.id))) draft = null
+    } else if (folder === 'trash') {
+      for (let index = messages.length - 1; index >= 0; index -= 1) {
+        const message = messages[index]
+        if (message.trashed_at && selectedIds.has(String(message.id))) {
+          messages.splice(index, 1)
+        }
+      }
+    } else {
+      for (const message of messages) {
+        if (
+          message.folder === folder &&
+          !message.trashed_at &&
+          selectedIds.has(String(message.id))
+        ) {
+          message.trashed_at = '2026-08-04 12:00:00'
+        }
+      }
+    }
+
+    response.json({ success: true })
+    return
+  }
   if (endpoint === 'mail:trash' || endpoint === 'mail:restore') {
     const message = messages.find((item) => item.id === Number(request.body.id))
     if (message)
diff --git a/frontend/testserver/smoke.cjs b/frontend/testserver/smoke.cjs
index 46897c5..ae28ef5 100644
--- a/frontend/testserver/smoke.cjs
+++ b/frontend/testserver/smoke.cjs
@@ -297,7 +297,73 @@ async function verifyStatefulActions(baseUrl) {
     true,
   )
   assert.equal(storedDraft.subject, 'Browser test mail')
-  await expectSuccess(baseUrl, 'mail:delete-draft', { id: draft.id })
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'drafts',
+    ids: [draft.id],
+  })
+  const drafts = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'drafts' },
+    true,
+  )
+  assert.equal(drafts.items.length, 0, 'mail:delete-many kept selected draft')
+
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'inbox',
+    ids: [1],
+  })
+  const inbox = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'inbox' },
+    true,
+  )
+  assert(
+    inbox.items.some((message) => message.id === 2),
+    'mail:delete-many removed a non-selected inbox message',
+  )
+  const trash = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'trash' },
+    true,
+  )
+  assert(
+    trash.items.some((message) => message.id === 1),
+    'mail:delete-many did not move selected inbox mail to trash',
+  )
+
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'sent',
+    ids: [3],
+  })
+  const sent = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'sent' },
+    true,
+  )
+  assert.equal(sent.items.length, 0, 'mail:delete-many kept selected sent mail')
+
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'trash',
+    ids: [1],
+  })
+  const remainingTrash = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'trash' },
+    true,
+  )
+  assert(
+    !remainingTrash.items.some((message) => message.id === 1),
+    'mail:delete-many kept permanently deleted trash mail',
+  )
+  assert(
+    remainingTrash.items.some((message) => message.id === 4),
+    'mail:delete-many removed non-selected trash mail',
+  )
 }
 
 async function main() {
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 355fe30..faace7f 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -240,6 +240,8 @@ Config.Mail = {
     MaxRecipients = 10,
     PageSize = 50,
     AuthAttemptsPerMinute = 5,
+    DeleteBatchSize = 50,
+    DeleteRequestsPerMinute = 12,
 }
 
 Config.Banking = {
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index f9263d0..8167d77 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -44,6 +44,7 @@ local server_callbacks = {
     "mail:get-draft",
     "mail:save-draft",
     "mail:delete-draft",
+    "mail:delete-many",
     "mail:send",
     "mail:set-read",
     "mail:trash",
diff --git a/sky_phone/source/server/mail.lua b/sky_phone/source/server/mail.lua
index f68a9e6..45337d9 100644
--- a/sky_phone/source/server/mail.lua
+++ b/sky_phone/source/server/mail.lua
@@ -1,5 +1,13 @@
 Bridge.Database.AfterMigration("sky_phone", function()
 
+local MAX_SAFE_INTEGER = 9007199254740991
+local DELETE_FOLDERS = {
+    drafts = true,
+    inbox = true,
+    sent = true,
+    trash = true,
+}
+
 local function trim(value)
     if type(value) ~= "string" then
         return nil
@@ -91,6 +99,79 @@ local function normalize_recipients(values, strict)
     return recipients
 end
 
+local function normalize_delete_ids(folder, values)
+    if type(values) ~= "table" then
+        return nil
+    end
+
+    local input_count = 0
+    for key in pairs(values) do
+        if type(key) ~= "number"
+            or key < 1
+            or key > Config.Mail.DeleteBatchSize
+            or key ~= math.floor(key)
+        then
+            return nil
+        end
+        input_count = input_count + 1
+    end
+    if input_count == 0 or input_count > Config.Mail.DeleteBatchSize then
+        return nil
+    end
+
+    local ids = {}
+    local seen = {}
+    for index = 1, input_count do
+        local value = values[index]
+        if value == nil then
+            return nil
+        end
+
+        local id
+        if folder == "drafts" then
+            if type(value) ~= "string"
+                or not value:match(
+                    "^%x%x%x%x%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%x%x%x%x%x%x%x%x$"
+                )
+            then
+                return nil
+            end
+            id = value:lower()
+        else
+            if type(value) ~= "number"
+                or value ~= value
+                or value < 1
+                or value > MAX_SAFE_INTEGER
+                or value ~= math.floor(value)
+            then
+                return nil
+            end
+            id = value
+        end
+
+        if not seen[id] then
+            seen[id] = true
+            ids[#ids + 1] = id
+        end
+    end
+
+    return ids
+end
+
+local function make_placeholders(count)
+    local placeholders = {}
+    for index = 1, count do
+        placeholders[index] = "?"
+    end
+    return table.concat(placeholders, ", ")
+end
+
+local function append_values(target, values)
+    for index = 1, #values do
+        target[#target + 1] = values[index]
+    end
+end
+
 local function require_session(source)
     return SkyPhone.RequireAccount(source)
 end
@@ -562,6 +643,94 @@ Bridge.Callbacks.Register("sky_phone:mail:delete-forever", function(source, data
     return { success = true }
 end)
 
+Bridge.Callbacks.Register("sky_phone:mail:delete-many", function(source, data)
+    local session, error_response = require_session(source)
+    if not session then
+        return error_response
+    end
+    if not SkyPhone.AllowOperation(source, "mail_delete_many", Config.Mail.DeleteRequestsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+
+    data = validate_payload(source, "delete-many", data)
+    if not data then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local folder = data.folder
+    if type(folder) ~= "string" or not DELETE_FOLDERS[folder] then
+        return { success = false, error = "invalid_folder" }
+    end
+
+    local ids = normalize_delete_ids(folder, data.ids)
+    if not ids then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local placeholders = make_placeholders(#ids)
+    if folder == "drafts" then
+        local parameters = { session.id }
+        append_values(parameters, ids)
+        Bridge.Database.Query(([[
+            DELETE FROM `sky_phone_mail_drafts`
+            WHERE `account_id` = ? AND `id` IN (%s)
+        ]]):format(placeholders), parameters)
+    elseif folder == "inbox" or folder == "sent" then
+        local parameters = { session.id, folder }
+        append_values(parameters, ids)
+        Bridge.Database.Query(([[
+            UPDATE `sky_phone_mail_entries` SET `trashed_at` = CURRENT_TIMESTAMP
+            WHERE `account_id` = ? AND `folder` = ? AND `trashed_at` IS NULL
+                AND `id` IN (%s)
+        ]]):format(placeholders), parameters)
+    else
+        local orphan_parameters = { session.id }
+        append_values(orphan_parameters, ids)
+        orphan_parameters[#orphan_parameters + 1] = session.id
+        append_values(orphan_parameters, ids)
+
+        local delete_parameters = { session.id }
+        append_values(delete_parameters, ids)
+
+        local statements = {
+            {
+                query = ([[
+                    DELETE m
+                    FROM `sky_phone_mail_messages` m
+                    JOIN `sky_phone_mail_entries` target ON target.`message_id` = m.`id`
+                    WHERE target.`account_id` = ? AND target.`trashed_at` IS NOT NULL
+                        AND target.`id` IN (%s)
+                        AND NOT EXISTS (
+                            SELECT 1
+                            FROM `sky_phone_mail_entries` remaining
+                            WHERE remaining.`message_id` = m.`id`
+                                AND NOT (
+                                    remaining.`account_id` = ?
+                                    AND remaining.`trashed_at` IS NOT NULL
+                                    AND remaining.`id` IN (%s)
+                                )
+                        )
+                ]]):format(placeholders, placeholders),
+                params = orphan_parameters,
+            },
+            {
+                query = ([[
+                    DELETE FROM `sky_phone_mail_entries`
+                    WHERE `account_id` = ? AND `trashed_at` IS NOT NULL
+                        AND `id` IN (%s)
+                ]]):format(placeholders),
+                params = delete_parameters,
+            },
+        }
+        if not Bridge.Database.Transaction(statements) then
+            return { success = false, error = "request_failed" }
+        end
+    end
+
+    broadcast_mailbox_changed(session.id)
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:mail:empty-trash", function(source)
     local session, error_response = require_session(source)
     if not session then

From 64a6e58577917c6538d6ea88c91ef6335eefe17a Mon Sep 17 00:00:00 2001
From: Dominik <Dominique.Wellisch@t-online.de>
Date: Thu, 13 Aug 2026 03:14:50 +0200
Subject: [PATCH 57/63] Add SendNotification export for LB compatibility

Implement SendNotification compatibility for lb-phone: validate app IDs, normalize and validate title/content, check provider/registered apps and reserved IDs, and dispatch a notification NUI message. Register the export and a compatibility alias. Update client tests to assert successful delivery to bundled apps and proper rejection for unknown app IDs.
---
 sky_phone/source/client/custom_app_compat.lua | 71 +++++++++++++++++++
 tests/custom_app_compat_client.lua            | 20 ++++++
 2 files changed, 91 insertions(+)

diff --git a/sky_phone/source/client/custom_app_compat.lua b/sky_phone/source/client/custom_app_compat.lua
index 57ec252..1d5a89f 100644
--- a/sky_phone/source/client/custom_app_compat.lua
+++ b/sky_phone/source/client/custom_app_compat.lua
@@ -388,6 +388,75 @@ local function close_phone_app(options)
     return core.CloseActive(owner_resource)
 end
 
+local function normalize_lb_notification_text(value, maximum_length, error_code)
+    if type(value) ~= "string" then
+        return nil, error_code
+    end
+
+    local normalized = value:match("^%s*(.-)%s*$")
+    if normalized == "" or #normalized > maximum_length then
+        return nil, error_code
+    end
+    return normalized
+end
+
+local function send_lb_notification(data)
+    local owner_resource, owner_error = get_calling_resource("SendNotification")
+    if not owner_resource then
+        return false, owner_error
+    end
+    if type(data) ~= "table" then
+        return false, "invalid_notification"
+    end
+
+    local app_id = data.app or data.identifier
+    local valid_app_id, app_id_error = SkyPhoneApps.ValidateAppId(app_id)
+    if not valid_app_id then
+        return false, app_id_error
+    end
+
+    local registered_record = provider_apps[app_id]
+    if registered_record then
+        local record, record_error = get_provider_app(owner_resource, app_id, {
+            [providers.lb] = true,
+        })
+        if not record then
+            return false, record_error
+        end
+    elseif not SkyPhoneApps.ReservedAppIds[app_id] then
+        return false, "app_not_found"
+    end
+
+    local title, title_error = normalize_lb_notification_text(
+        data.title,
+        128,
+        "invalid_notification_title"
+    )
+    if not title then
+        return false, title_error
+    end
+
+    local content, content_error = normalize_lb_notification_text(
+        data.content or data.message or data.text,
+        512,
+        "invalid_notification_text"
+    )
+    if not content then
+        return false, content_error
+    end
+
+    SendNUIMessage({
+        type = "notification:show",
+        data = {
+            appId = app_id,
+            route = "/apps/" .. app_id,
+            text = content,
+            title = title,
+        },
+    })
+    return true
+end
+
 local function register_high_server_app(owner_resource, definition, revision)
     if type(owner_resource) ~= "string"
         or type(definition) ~= "table"
@@ -570,9 +639,11 @@ exports("getCustomApps", get_quasar_apps)
 exports("OpenPhoneApp", open_quasar_app)
 exports("OpenApp", open_phone_app)
 exports("CloseApp", close_phone_app)
+exports("SendNotification", send_lb_notification)
 
 SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "OpenApp", open_phone_app)
 SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "CloseApp", close_phone_app)
+SkyPhoneCompatibility.RegisterExportAlias("lb-phone", "SendNotification", send_lb_notification)
 
 SkyPhoneCompatibility.RegisterExportAlias("17mov_Phone", "AddApplication", add_17mov_application)
 SkyPhoneCompatibility.RegisterExportAlias("17mov_Phone", "RemoveApplication", remove_17mov_application)
diff --git a/tests/custom_app_compat_client.lua b/tests/custom_app_compat_client.lua
index cd548fb..2b45a36 100644
--- a/tests/custom_app_compat_client.lua
+++ b/tests/custom_app_compat_client.lua
@@ -121,6 +121,7 @@ local lb_remove_custom_app = get_alias_export("lb-phone", "RemoveCustomApp")
 local lb_send_custom_app_message = get_alias_export("lb-phone", "SendCustomAppMessage")
 local lb_open_app = get_alias_export("lb-phone", "OpenApp")
 local lb_close_app = get_alias_export("lb-phone", "CloseApp")
+local lb_send_notification = get_alias_export("lb-phone", "SendNotification")
 local mov_add_application = get_alias_export("17mov_Phone", "AddApplication")
 local mov_remove_application = get_alias_export("17mov_Phone", "RemoveApplication")
 local mov_send_app_message = get_alias_export("17mov_Phone", "SendAppMessage")
@@ -158,6 +159,25 @@ for resource_name in pairs(expected_provider_resources) do
 end
 assert(yseries_get_data_loaded(), "YSeries must see the compatibility provider as loaded")
 
+invoking_resource = "sky_base"
+assert(lb_send_notification({
+    app = "calendar",
+    title = "Hospital",
+    content = "Your appointment has been confirmed.",
+}), "LB notifications for bundled phone apps must be accepted")
+local lb_notification_message = nui_messages[#nui_messages]
+assert(lb_notification_message.type == "notification:show", "LB notifications must reach the phone notification UI")
+assert(lb_notification_message.data.appId == "calendar", "LB notifications must preserve the target app")
+assert(lb_notification_message.data.route == "/apps/calendar", "LB notifications must link to the target app")
+assert(lb_notification_message.data.text == "Your appointment has been confirmed.", "LB notification content must be preserved")
+
+local unknown_notification_success, unknown_notification_error = lb_send_notification({
+    app = "unknown-provider-app",
+    title = "Hospital",
+    content = "Unknown target",
+})
+assert(not unknown_notification_success and unknown_notification_error == "app_not_found", "LB notifications must reject unknown app IDs")
+
 invoking_resource = "lb_app"
 local lifecycle_response_delivered = false
 local install_hook_after_response = false

From c4d59265a75d48baecef9ecbc373f52a501f1505 Mon Sep 17 00:00:00 2001
From: Alec Schitzkat <alecschitzkat@icloud.com>
Date: Thu, 13 Aug 2026 03:27:32 +0200
Subject: [PATCH 58/63] ENH - Adjust app dock and page indicator positioning

Adjust the vertical offsets for the app dock and page indicator to refine their placement within the UI.
---
 frontend/src/assets/main.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index ee5b045..8863b60 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -2469,7 +2469,7 @@ button {
 .app-dock {
   position: absolute;
   z-index: 8;
-  bottom: 43px;
+  bottom: 30px;
   left: 15px;
   right: 15px;
   height: 82px;
@@ -2520,7 +2520,7 @@ button {
 }
 .page-indicator {
   position: absolute;
-  bottom: 132px;
+  bottom: 122px;
   left: 0;
   right: 0;
   height: 14px;

From 545a6322abec6d00e566e10cf10ec4365b782844 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 04:31:01 +0200
Subject: [PATCH 59/63] ADD - introduce Sky widget frame

---
 frontend/src/ui/SkyWidgetFrame.test.ts | 40 +++++++++++++++++++++++++
 frontend/src/ui/SkyWidgetFrame.vue     | 29 ++++++++++++++++++
 frontend/src/ui/foundation.css         | 41 ++++++++++++++++++++++++++
 frontend/src/ui/index.ts               |  1 +
 frontend/src/ui/tokens.css             |  5 ++++
 5 files changed, 116 insertions(+)
 create mode 100644 frontend/src/ui/SkyWidgetFrame.test.ts
 create mode 100644 frontend/src/ui/SkyWidgetFrame.vue

diff --git a/frontend/src/ui/SkyWidgetFrame.test.ts b/frontend/src/ui/SkyWidgetFrame.test.ts
new file mode 100644
index 0000000..63f7a79
--- /dev/null
+++ b/frontend/src/ui/SkyWidgetFrame.test.ts
@@ -0,0 +1,40 @@
+import { readFileSync } from 'node:fs'
+
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { describe, expect, it } from 'vitest'
+
+import SkyWidgetFrame from '@/ui/SkyWidgetFrame.vue'
+
+const foundationStyles = readFileSync(
+  new URL('./foundation.css', import.meta.url),
+  'utf8',
+)
+
+describe('SkyWidgetFrame', () => {
+  it('reserves a separate app-style label row below the widget surface', async () => {
+    const html = await renderToString(
+      createSSRApp(SkyWidgetFrame, { label: 'Weather', size: 'small' }),
+    )
+
+    expect(html).toContain('sky-widget-frame--small')
+    expect(html).toContain('sky-widget-frame__surface')
+    expect(html).toContain('sky-widget-frame__label')
+    expect(html).toContain('Weather')
+    expect(foundationStyles).toContain('var(--sky-widget-label-height);')
+    expect(foundationStyles).toContain('var(--sky-widget-label-gap)')
+  })
+
+  it('keeps gallery previews unlabelled when requested', async () => {
+    const html = await renderToString(
+      createSSRApp(SkyWidgetFrame, {
+        label: 'Music',
+        showLabel: false,
+        size: 'medium',
+      }),
+    )
+
+    expect(html).toContain('sky-widget-frame--unlabelled')
+    expect(html).not.toContain('sky-widget-frame__label')
+  })
+})
diff --git a/frontend/src/ui/SkyWidgetFrame.vue b/frontend/src/ui/SkyWidgetFrame.vue
new file mode 100644
index 0000000..17cb1f9
--- /dev/null
+++ b/frontend/src/ui/SkyWidgetFrame.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string
+    showLabel?: boolean
+    size: 'small' | 'medium' | 'large'
+  }>(),
+  {
+    showLabel: true,
+  },
+)
+</script>
+
+<template>
+  <div
+    class="sky-widget-frame"
+    :class="[
+      `sky-widget-frame--${size}`,
+      { 'sky-widget-frame--unlabelled': !showLabel },
+    ]"
+  >
+    <div class="sky-widget-frame__surface">
+      <slot />
+    </div>
+    <span v-if="showLabel" class="sky-widget-frame__label" aria-hidden="true">
+      {{ label }}
+    </span>
+  </div>
+</template>
diff --git a/frontend/src/ui/foundation.css b/frontend/src/ui/foundation.css
index cd568ff..d136e5a 100644
--- a/frontend/src/ui/foundation.css
+++ b/frontend/src/ui/foundation.css
@@ -242,6 +242,47 @@
   cursor: grabbing;
 }
 
+.sky-widget-frame {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows:
+    minmax(0, 1fr)
+    var(--sky-widget-label-height);
+  gap: var(--sky-widget-label-gap);
+}
+
+.sky-widget-frame--unlabelled {
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
+}
+
+.sky-widget-frame__surface {
+  min-width: 0;
+  min-height: 0;
+}
+
+.sky-widget-frame__label {
+  min-width: 0;
+  height: var(--sky-widget-label-height);
+  overflow: hidden;
+  color: var(--sky-widget-label-color, #fff);
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
+  font-size: 11.5px;
+  font-weight: 500;
+  letter-spacing: -0.15px;
+  line-height: var(--sky-widget-label-height);
+  text-align: center;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 4px rgb(0 0 0 / 72%);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 .sky-section {
   min-width: 0;
   margin: 0 0 var(--sky-space-4);
diff --git a/frontend/src/ui/index.ts b/frontend/src/ui/index.ts
index 9155b50..6aefd8c 100644
--- a/frontend/src/ui/index.ts
+++ b/frontend/src/ui/index.ts
@@ -7,6 +7,7 @@ export { default as SkyScrollArea } from './SkyScrollArea.vue'
 export { default as SkyScrollRail } from './SkyScrollRail.vue'
 export { default as SkySection } from './SkySection.vue'
 export { default as SkyTabBar } from './SkyTabBar.vue'
+export { default as SkyWidgetFrame } from './SkyWidgetFrame.vue'
 export * from './controls'
 export * from './overlays'
 export * from './settings'
diff --git a/frontend/src/ui/tokens.css b/frontend/src/ui/tokens.css
index 41bd736..7d4c16e 100644
--- a/frontend/src/ui/tokens.css
+++ b/frontend/src/ui/tokens.css
@@ -20,6 +20,11 @@
   --sky-font-body: 15px;
   --sky-font-title: 17px;
   --sky-font-large-title: 28px;
+  --sky-widget-label-gap: 5px;
+  --sky-widget-label-height: 15px;
+  --sky-widget-radius-small: 23px;
+  --sky-widget-radius-medium: 25px;
+  --sky-widget-radius-large: 28px;
 }
 
 .sky-app-page {

From fd7eaf688778fe5e4a6659de6ceb9c32620f7b0e Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 04:31:08 +0200
Subject: [PATCH 60/63] ENH - add widget home labels

---
 frontend/src/config/widgets.test.ts | 18 ++++++++++++++++++
 frontend/src/config/widgets.ts      |  7 +++++++
 frontend/src/types/widgets.ts       |  1 +
 3 files changed, 26 insertions(+)
 create mode 100644 frontend/src/config/widgets.test.ts

diff --git a/frontend/src/config/widgets.test.ts b/frontend/src/config/widgets.test.ts
new file mode 100644
index 0000000..7a75b0a
--- /dev/null
+++ b/frontend/src/config/widgets.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { WIDGET_REGISTRY_BY_KIND } from '@/config/widgets'
+import type { WidgetKind } from '@/types/widgets'
+
+describe('widget registry home labels', () => {
+  it.each<[WidgetKind, string]>([
+    ['clock', 'Apps.clock.name'],
+    ['date', 'Apps.calendar.name'],
+    ['weather', 'Apps.weather.name'],
+    ['music', 'Apps.music.name'],
+    ['wallet', 'Apps.banking.name'],
+    ['transactions', 'Apps.banking.name'],
+    ['contacts', 'Apps.phone.name'],
+  ])('uses the host app label for %s', (kind, labelKey) => {
+    expect(WIDGET_REGISTRY_BY_KIND.get(kind)?.homeLabelKey).toBe(labelKey)
+  })
+})
diff --git a/frontend/src/config/widgets.ts b/frontend/src/config/widgets.ts
index 783b460..02c983a 100644
--- a/frontend/src/config/widgets.ts
+++ b/frontend/src/config/widgets.ts
@@ -6,6 +6,7 @@ export const WIDGET_REGISTRY: WidgetDefinition[] = [
     configurable: true,
     defaultSize: 'small',
     descriptionKey: 'Home.widgetSystem.clock.description',
+    homeLabelKey: 'Apps.clock.name',
     kind: 'clock',
     labelKey: 'Home.widgetSystem.clock.name',
     supportedSizes: ['small', 'medium'],
@@ -15,6 +16,7 @@ export const WIDGET_REGISTRY: WidgetDefinition[] = [
     configurable: false,
     defaultSize: 'small',
     descriptionKey: 'Home.widgetSystem.date.description',
+    homeLabelKey: 'Apps.calendar.name',
     kind: 'date',
     labelKey: 'Home.widgetSystem.date.name',
     supportedSizes: ['small', 'medium'],
@@ -24,6 +26,7 @@ export const WIDGET_REGISTRY: WidgetDefinition[] = [
     configurable: false,
     defaultSize: 'medium',
     descriptionKey: 'Home.widgetSystem.weather.description',
+    homeLabelKey: 'Apps.weather.name',
     kind: 'weather',
     labelKey: 'Home.widgetSystem.weather.name',
     supportedSizes: ['small', 'medium', 'large'],
@@ -33,6 +36,7 @@ export const WIDGET_REGISTRY: WidgetDefinition[] = [
     configurable: false,
     defaultSize: 'medium',
     descriptionKey: 'Home.widgetSystem.music.description',
+    homeLabelKey: 'Apps.music.name',
     kind: 'music',
     labelKey: 'Home.widgetSystem.music.name',
     supportedSizes: ['medium', 'large'],
@@ -42,6 +46,7 @@ export const WIDGET_REGISTRY: WidgetDefinition[] = [
     configurable: true,
     defaultSize: 'small',
     descriptionKey: 'Home.widgetSystem.wallet.description',
+    homeLabelKey: 'Apps.banking.name',
     kind: 'wallet',
     labelKey: 'Home.widgetSystem.wallet.name',
     supportedSizes: ['small', 'medium'],
@@ -51,6 +56,7 @@ export const WIDGET_REGISTRY: WidgetDefinition[] = [
     configurable: false,
     defaultSize: 'medium',
     descriptionKey: 'Home.widgetSystem.transactions.description',
+    homeLabelKey: 'Apps.banking.name',
     kind: 'transactions',
     labelKey: 'Home.widgetSystem.transactions.name',
     supportedSizes: ['medium', 'large'],
@@ -60,6 +66,7 @@ export const WIDGET_REGISTRY: WidgetDefinition[] = [
     configurable: true,
     defaultSize: 'medium',
     descriptionKey: 'Home.widgetSystem.contacts.description',
+    homeLabelKey: 'Apps.phone.name',
     kind: 'contacts',
     labelKey: 'Home.widgetSystem.contacts.name',
     supportedSizes: ['medium', 'large'],
diff --git a/frontend/src/types/widgets.ts b/frontend/src/types/widgets.ts
index e654af6..cd70a9b 100644
--- a/frontend/src/types/widgets.ts
+++ b/frontend/src/types/widgets.ts
@@ -35,6 +35,7 @@ export type WidgetDefinition = {
   configurable: boolean
   defaultSize: WidgetSize
   descriptionKey: string
+  homeLabelKey: string
   kind: WidgetKind
   labelKey: string
   supportedSizes: WidgetSize[]

From 0d23169a9ce855e58f1a5bd7bfe1c8586abb9291 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 04:31:18 +0200
Subject: [PATCH 61/63] FIX - bind preview server to one loopback address

---
 frontend/vite.config.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index a85b7b7..0c130de 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -34,8 +34,8 @@ export default defineConfig(({ command }) => ({
       allow: [fileURLToPath(new URL('.', import.meta.url))],
       strict: false,
     },
-    // YouTube rejects otherwise valid embeds when the dev page uses the
-    // numeric loopback origin. Keep the local UI on the localhost origin.
-    host: 'localhost',
+    // Bind one loopback family so strictPort also rejects a second dev server.
+    // Open the UI through localhost so embeds still receive that page origin.
+    host: '127.0.0.1',
   },
 }))

From a814979d4bcb36d523a2a096b96748ecdd340f7f Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Thu, 13 Aug 2026 10:16:55 +0200
Subject: [PATCH 62/63] FIX - refine app authentication layouts

---
 .../src/components/account/AppProfileAuth.vue | 25 ++++++++++++++++++-
 frontend/src/views/apps/CityMarktApp.vue      | 12 +++++++--
 frontend/src/views/apps/CrewLinkApp.vue       |  3 ++-
 frontend/src/views/apps/LocalPagesApp.vue     |  5 +++-
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/account/AppProfileAuth.vue b/frontend/src/components/account/AppProfileAuth.vue
index c90180b..7c8df13 100644
--- a/frontend/src/components/account/AppProfileAuth.vue
+++ b/frontend/src/components/account/AppProfileAuth.vue
@@ -77,12 +77,20 @@ const canSubmit = computed(() => {
     <k-glass class="app-profile-auth__card">
       <k-segmented raised class="app-profile-auth__mode">
         <k-segmented-button
+          class="app-profile-auth__mode-button app-profile-auth__mode-button--login"
+          :class="{
+            'app-profile-auth__mode-button--active': mode === 'login',
+          }"
           :active="mode === 'login'"
           @click="emit('update:mode', 'login')"
         >
           {{ loginLabel }}
         </k-segmented-button>
         <k-segmented-button
+          class="app-profile-auth__mode-button app-profile-auth__mode-button--register"
+          :class="{
+            'app-profile-auth__mode-button--active': mode === 'register',
+          }"
           :active="mode === 'register'"
           @click="emit('update:mode', 'register')"
         >
@@ -158,7 +166,7 @@ const canSubmit = computed(() => {
 .app-profile-auth {
   width: 100%;
   max-width: 320px;
-  margin: auto;
+  margin: 0 auto;
   padding: 12px 4px 18px;
   color: inherit;
   text-align: center;
@@ -238,6 +246,21 @@ const canSubmit = computed(() => {
   border-radius: 14px;
   background: rgba(0, 0, 0, 0.16);
 }
+.app-profile-auth__mode :deep(.app-profile-auth__mode-button) {
+  border-radius: 3px;
+}
+.app-profile-auth__mode
+  :deep(
+    .app-profile-auth__mode-button--login.app-profile-auth__mode-button--active
+  ) {
+  border-radius: 10px 3px 3px 10px;
+}
+.app-profile-auth__mode
+  :deep(
+    .app-profile-auth__mode-button--register.app-profile-auth__mode-button--active
+  ) {
+  border-radius: 3px 10px 10px 3px;
+}
 .app-profile-auth__photo {
   display: flex;
   align-items: center;
diff --git a/frontend/src/views/apps/CityMarktApp.vue b/frontend/src/views/apps/CityMarktApp.vue
index f65bbfa..2211135 100644
--- a/frontend/src/views/apps/CityMarktApp.vue
+++ b/frontend/src/views/apps/CityMarktApp.vue
@@ -1042,7 +1042,7 @@ onMounted(async () => {
     :colors="{ bgIos: 'bg-transparent' }"
   >
     <k-navbar
-      v-if="screen === 'main' && onboardingReady"
+      v-if="screen === 'main' && onboardingReady && isAuthenticated"
       class="citymarkt-navbar"
       :subtitle="
         phone.t(
@@ -1059,7 +1059,11 @@ onMounted(async () => {
     />
 
     <div v-if="!onboardingReady" class="citymarkt__gate-loading">{{ phone.t('Common.loading') }}</div>
-    <section v-if="screen === 'main' && onboardingReady" class="citymarkt__content">
+    <section
+      v-if="screen === 'main' && onboardingReady"
+      class="citymarkt__content"
+      :class="{ 'citymarkt__content--auth': !isAuthenticated }"
+    >
       <template v-if="tab === 'discover' || tab === 'search'">
         <k-searchbar
           component="form"
@@ -2759,4 +2763,8 @@ onMounted(async () => {
   color: #171816;
   box-shadow: 0 4px 12px #00000030;
 }
+
+.citymarkt__content--auth {
+  padding: 68px 18px 34px;
+}
 </style>
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 6d2c5b1..8c7e347 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -2238,6 +2238,7 @@ onBeforeUnmount(() => {
   --auth-accent: #20bde0;
   --panel: rgba(18, 39, 53, 0.92);
   padding: 60px 18px 30px;
+  justify-content: flex-start;
   color: #f3f8fb;
   background:
     radial-gradient(circle at 82% 8%, rgba(39, 217, 237, 0.2), transparent 34%),
@@ -2245,7 +2246,7 @@ onBeforeUnmount(() => {
   overflow-y: auto;
 }
 .crewlink-auth :deep(.app-profile-auth) {
-  margin: auto;
+  margin: 0 auto;
 }
 .crewlink-logo {
   width: 78px;
diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index da66f1a..9794e3f 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -1000,7 +1000,10 @@ onMounted(async () => {
                 </div>
               </k-glass>
             </template>
-            <k-glass class="pages__logout-glass">
+            <k-glass
+              v-if="!profileEditing && pages.profile?.exists"
+              class="pages__logout-glass"
+            >
               <button
                 type="button"
                 class="pages__logout"

From 90909e41f2c0f6f4e2a826f3ea6f4d0eb90d15ab Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Thu, 13 Aug 2026 11:06:03 +0200
Subject: [PATCH 63/63] ENH - improve CrewLink map coordination

---
 frontend/src/stores/phone.ts            |   9 +-
 frontend/src/views/apps/CrewLinkApp.vue | 514 +++++++++++++++++++-----
 sky_phone/config/locales/en.lua         |   2 +-
 3 files changed, 418 insertions(+), 107 deletions(-)

diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index b7e4fd3..4f22fba 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -653,12 +653,13 @@ const defaultLocales: LocaleTree = {
       routeSet: 'GPS route set.',
       pingCreated: 'Ping shared with your crew.',
       pingRemoved: 'Ping removed.',
-      newPingBody:
-        'Share your current position or place the ping at the center of the map.',
+      newPingBody: 'Choose a point on the map, then add a label and ping type.',
       pingLabel: 'Ping label',
       pingLabelPlaceholder: 'e.g. Meet at the garage',
-      placeOnMap: 'Use map center',
-      placeOnMapBody: 'Otherwise your current position is used.',
+      placeOnMap: 'Place ping on map',
+      placeOnMapBody: 'Move the map until the crosshair marks the exact spot.',
+      positionSelected: 'Position selected · tap to change',
+      addHere: 'Place Here',
       sharePing: 'Share Ping',
       pingTypes: {
         meeting: 'Meet',
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 8c7e347..7dd0964 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -37,12 +37,14 @@ import {
   LocateFixed,
   LogOut,
   Map as MapIcon,
+  MapPinned,
   MapPin,
   Navigation,
   Plus,
   Radio,
   RefreshCw,
   Route,
+  Satellite,
   Settings2,
   Share2,
   Shield,
@@ -90,6 +92,7 @@ import { nuiCall } from '@/utils/nui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type CrewLinkTab = 'map' | 'group' | 'pings' | 'profile'
+type CrewLinkMapStyle = 'default' | 'satellite' | 'atlas' | 'roads'
 type CrewLinkSheet =
   | 'create-group'
   | 'join-group'
@@ -116,9 +119,49 @@ const crew = useCrewLinkStore()
 const messageMedia = useMessageMediaStore()
 const route = useRoute()
 const router = useRouter()
-const mainlandMapUrl = `${import.meta.env.BASE_URL}img/maps/gtav-map.svg`
+const mapStyle = ref<CrewLinkMapStyle>('default')
+const mapAspect = ref(
+  defaultMapCoordinates.width / defaultMapCoordinates.height,
+)
+const mapMaxZoom = ref(8)
 const cayoMapUrl = `${import.meta.env.BASE_URL}img/maps/cayo-perico.svg`
+const mapBounds = {
+  minX: -4096,
+  maxX: 4096,
+  minY: -4096,
+  maxY: 4096,
+}
+const mapOrigin = { x: -336.8, y: -1412.2 }
+const mapScale = { x: -2340 / -1548.1, y: 291 / 189.3 }
+const mapStyles = [
+  { id: 'default' as const, icon: MapPinned },
+  { id: 'satellite' as const, icon: Satellite },
+  { id: 'atlas' as const, icon: MapIcon },
+  { id: 'roads' as const, icon: Route },
+]
+const activeMapStyle = computed(
+  () => mapStyles.find((style) => style.id === mapStyle.value) ?? mapStyles[0],
+)
+const mapImageUrl = computed(() => {
+  const filename =
+    mapStyle.value === 'default'
+      ? 'gtav-map.svg'
+      : mapStyle.value === 'roads'
+        ? 'map_roads_4096.webp'
+        : mapStyle.value === 'atlas'
+          ? 'map_atlas_4096.webp'
+          : 'map_satellite_4096.webp'
+  return `${import.meta.env.BASE_URL}img/maps/${filename}`
+})
 const activeTab = ref<CrewLinkTab>('map')
+const headerTitle = computed(() =>
+  activeTab.value === 'map'
+    ? t('name')
+    : t(activeTab.value === 'group' ? 'crew' : activeTab.value),
+)
+const headerSubtitle = computed(() =>
+  activeTab.value === 'map' ? t('liveCoordination') : t('name'),
+)
 const sheet = ref<CrewLinkSheet>(null)
 const username = ref('')
 const authMode = ref<'login' | 'register'>('login')
@@ -140,7 +183,8 @@ const sharedInviteCode = ref(
 )
 const pingType = ref<CrewLinkPingType>('meeting')
 const pingLabel = ref('')
-const pingAtMapCenter = ref(false)
+const placingPing = ref(false)
+const pingCoords = ref<MapPoint | null>(null)
 const nearbyPlayers = ref<CrewLinkNearbyPlayer[]>([])
 const selectedMember = ref<CrewLinkMember | null>(null)
 const selectedPing = ref<CrewLinkPing | null>(null)
@@ -160,6 +204,7 @@ const viewportRef = ref<HTMLElement | null>(null)
 const canvasRef = ref<HTMLElement | null>(null)
 const isPointerDown = ref(false)
 const pointerStart = { x: 0, y: 0, panX: 0, panY: 0 }
+const pointerLatest = { x: 0, y: 0 }
 let liveTimer: number | undefined
 let toastTimer: number | undefined
 let pointerFrame: number | undefined
@@ -231,10 +276,8 @@ const authUsernameValid = computed(() =>
   /^[A-Za-z0-9][A-Za-z0-9._]{1,18}[A-Za-z0-9]$/.test(authUsername.value.trim()),
 )
 const canvasStyle = computed(() => ({
-  aspectRatio: String(
-    defaultMapCoordinates.width / defaultMapCoordinates.height,
-  ),
-  transform: `translate(-50%, -50%) translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value})`,
+  aspectRatio: String(mapAspect.value),
+  transform: `translate3d(-50%, -50%, 0) translate3d(${pan.value.x}px, ${pan.value.y}px, 0) scale(${zoom.value})`,
   width: 'max(128%, 128vh)',
 }))
 const activeColour = computed(
@@ -252,7 +295,7 @@ const mapCenterCoords = computed(() => {
   const viewport = viewportRef.value?.getBoundingClientRect()
   const canvas = canvasRef.value?.getBoundingClientRect()
   if (!viewport || !canvas) return null
-  return defaultMapPercentToWorld({
+  return mapPercentToWorld({
     x: Math.min(
       1,
       Math.max(
@@ -270,6 +313,78 @@ const mapCenterCoords = computed(() => {
   })
 })
 
+function mapToWorld(coords: MapPoint): MapPoint {
+  return {
+    x: coords.x / mapScale.x + mapOrigin.x,
+    y: coords.y / mapScale.y + mapOrigin.y,
+  }
+}
+
+function mapWorldToPercent(coords: MapPoint): MapPoint {
+  if (mapStyle.value === 'default') return defaultMapWorldToPercent(coords)
+  const world = mapToWorld(coords)
+  return {
+    x: Math.min(
+      1,
+      Math.max(
+        0,
+        (world.x - mapBounds.minX) / (mapBounds.maxX - mapBounds.minX),
+      ),
+    ),
+    y: Math.min(
+      1,
+      Math.max(
+        0,
+        (mapBounds.maxY - world.y) / (mapBounds.maxY - mapBounds.minY),
+      ),
+    ),
+  }
+}
+
+function mapPercentToWorld(point: MapPoint): MapPoint {
+  if (mapStyle.value === 'default') return defaultMapPercentToWorld(point)
+  const projected = {
+    x: mapBounds.minX + point.x * (mapBounds.maxX - mapBounds.minX),
+    y: mapBounds.maxY - point.y * (mapBounds.maxY - mapBounds.minY),
+  }
+  return {
+    x: (projected.x - mapOrigin.x) * mapScale.x,
+    y: (projected.y - mapOrigin.y) * mapScale.y,
+  }
+}
+
+function cycleMapStyle(): void {
+  const currentIndex = mapStyles.findIndex(
+    (style) => style.id === mapStyle.value,
+  )
+  mapStyle.value = mapStyles[(currentIndex + 1) % mapStyles.length].id
+}
+
+async function onMapImageLoad(event: Event): Promise<void> {
+  const image = event.target as HTMLImageElement
+  const loadedStyle = mapStyle.value
+  mapAspect.value =
+    loadedStyle === 'default'
+      ? defaultMapCoordinates.width / defaultMapCoordinates.height
+      : image.naturalWidth / image.naturalHeight
+
+  await nextTick()
+  if (!image.isConnected || mapStyle.value !== loadedStyle) return
+
+  mapMaxZoom.value =
+    loadedStyle === 'default'
+      ? 8
+      : Math.max(
+          0.85,
+          Math.min(
+            8,
+            image.naturalWidth / Math.max(1, image.offsetWidth),
+            image.naturalHeight / Math.max(1, image.offsetHeight),
+          ),
+        )
+  if (zoom.value > mapMaxZoom.value) setZoomAt(mapMaxZoom.value)
+}
+
 function t(path: string, replacements: Record<string, string> = {}): string {
   return phone.t(`Apps.crewlink.${path}`, replacements)
 }
@@ -460,11 +575,13 @@ function markerStyle(
   coords: MapPoint,
   offset = '-50%',
 ): Record<string, string> {
-  const point = defaultMapWorldToPercent(coords)
+  const point = mapWorldToPercent(coords)
+  const canvasWidth = canvasRef.value?.offsetWidth ?? 0
+  const canvasHeight = canvasRef.value?.offsetHeight ?? 0
   return {
-    left: `${point.x * 100}%`,
-    top: `${point.y * 100}%`,
-    transform: `translate(-50%, ${offset}) scale(${1 / zoom.value})`,
+    left: `calc(50% + ${pan.value.x + (point.x - 0.5) * canvasWidth * zoom.value}px)`,
+    top: `calc(50% + ${pan.value.y + (point.y - 0.5) * canvasHeight * zoom.value}px)`,
+    transform: `translate(-50%, ${offset})`,
   }
 }
 
@@ -492,7 +609,7 @@ function openSheet(next: CrewLinkSheet): void {
   } else if (next === 'ping') {
     pingType.value = 'meeting'
     pingLabel.value = ''
-    pingAtMapCenter.value = false
+    pingCoords.value = null
   } else if (next === 'edit-group' && activeGroup.value) {
     groupName.value = activeGroup.value.name
     groupColour.value = activeGroup.value.colour
@@ -501,6 +618,7 @@ function openSheet(next: CrewLinkSheet): void {
 
 function closeSheet(): void {
   if (crew.isLoading) return
+  if (sheet.value === 'ping') pingCoords.value = null
   sheet.value = null
   selectedMember.value = null
   selectedProfilePhoto.value = null
@@ -661,8 +779,37 @@ async function toggleGroupSetting(
   }
 }
 
-function togglePingAtMapCenter(): void {
-  pingAtMapCenter.value = !pingAtMapCenter.value
+function startPingPlacement(): void {
+  sheet.value = null
+  formError.value = ''
+  pingType.value = 'meeting'
+  pingLabel.value = ''
+  pingCoords.value = null
+  placingPing.value = true
+  activeTab.value = 'map'
+}
+
+function resumePingPlacement(): void {
+  sheet.value = null
+  formError.value = ''
+  placingPing.value = true
+  activeTab.value = 'map'
+}
+
+function cancelPingPlacement(): void {
+  placingPing.value = false
+  pingCoords.value = null
+}
+
+function confirmPingPlacement(): void {
+  const center = mapCenterCoords.value
+  if (!center) {
+    showToast(errorText())
+    return
+  }
+  pingCoords.value = { x: center.x, y: center.y }
+  placingPing.value = false
+  sheet.value = 'ping'
 }
 
 function copyInviteCode(): void {
@@ -768,11 +915,14 @@ function cancelConfirmation(): void {
 }
 
 async function createPing(): Promise<void> {
-  const center = pingAtMapCenter.value ? mapCenterCoords.value : null
+  if (!pingCoords.value) {
+    formError.value = errorText()
+    return
+  }
   const response = await crew.createPing(
     pingType.value,
     pingLabel.value.trim(),
-    center ? { x: center.x, y: center.y, z: 0 } : undefined,
+    { x: pingCoords.value.x, y: pingCoords.value.y, z: 0 },
   )
   if (!response.success) {
     formError.value = errorText(response.error)
@@ -819,8 +969,8 @@ function centerOn(coords: MapPoint): void {
   const viewport = viewportRef.value?.getBoundingClientRect()
   const canvas = canvasRef.value
   if (!viewport || !canvas) return
-  const point = defaultMapWorldToPercent(coords)
-  const nextZoom = 3.8
+  const point = mapWorldToPercent(coords)
+  const nextZoom = Math.min(3.8, mapMaxZoom.value)
   zoom.value = nextZoom
   pan.value = {
     x: (0.5 - point.x) * canvas.offsetWidth * nextZoom,
@@ -832,7 +982,7 @@ function fitOnlineMembers(): void {
   const viewport = viewportRef.value
   const canvas = canvasRef.value
   const points = visibleMapMembers.value.map((member) =>
-    defaultMapWorldToPercent(member.coords!),
+    mapWorldToPercent(member.coords!),
   )
   if (!viewport || !canvas || !points.length) return
 
@@ -845,7 +995,7 @@ function fitOnlineMembers(): void {
   const nextZoom = Math.max(
     1.25,
     Math.min(
-      5,
+      mapMaxZoom.value,
       (viewport.clientWidth - 90) / horizontalSpan,
       (viewport.clientHeight - 120) / verticalSpan,
     ),
@@ -868,11 +1018,27 @@ function centerOwnLocation(): void {
   else showToast(t('locationUnavailable'))
 }
 
+function setZoomAt(nextZoom: number, clientX?: number, clientY?: number): void {
+  const viewport = viewportRef.value?.getBoundingClientRect()
+  const currentZoom = zoom.value
+  const clampedZoom = Math.max(0.85, Math.min(mapMaxZoom.value, nextZoom))
+  if (!viewport || clampedZoom === currentZoom) return
+
+  const anchorX = clientX ?? viewport.left + viewport.width / 2
+  const anchorY = clientY ?? viewport.top + viewport.height / 2
+  const offsetX = anchorX - (viewport.left + viewport.width / 2)
+  const offsetY = anchorY - (viewport.top + viewport.height / 2)
+  const scale = clampedZoom / currentZoom
+
+  pan.value = {
+    x: offsetX - (offsetX - pan.value.x) * scale,
+    y: offsetY - (offsetY - pan.value.y) * scale,
+  }
+  zoom.value = clampedZoom
+}
+
 function changeZoom(direction: -1 | 1): void {
-  zoom.value = Math.max(
-    0.85,
-    Math.min(8, zoom.value * (direction > 0 ? 1.32 : 0.76)),
-  )
+  setZoomAt(zoom.value * (direction > 0 ? 1.25 : 0.8))
 }
 
 function onPointerDown(event: PointerEvent): void {
@@ -882,30 +1048,48 @@ function onPointerDown(event: PointerEvent): void {
   pointerStart.y = event.clientY
   pointerStart.panX = pan.value.x
   pointerStart.panY = pan.value.y
+  pointerLatest.x = event.clientX
+  pointerLatest.y = event.clientY
   ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
 }
 
 function onPointerMove(event: PointerEvent): void {
   if (!isPointerDown.value) return
-  const deltaX = event.clientX - pointerStart.x
-  const deltaY = event.clientY - pointerStart.y
-  if (pointerFrame) cancelAnimationFrame(pointerFrame)
+  pointerLatest.x = event.clientX
+  pointerLatest.y = event.clientY
+  if (pointerFrame) return
   pointerFrame = requestAnimationFrame(() => {
     pointerFrame = undefined
     pan.value = {
-      x: pointerStart.panX + deltaX,
-      y: pointerStart.panY + deltaY,
+      x: pointerStart.panX + pointerLatest.x - pointerStart.x,
+      y: pointerStart.panY + pointerLatest.y - pointerStart.y,
     }
   })
 }
 
-function onPointerUp(): void {
+function onPointerUp(event: PointerEvent): void {
   isPointerDown.value = false
+  const target = event.currentTarget as HTMLElement
+  if (target.hasPointerCapture(event.pointerId)) {
+    target.releasePointerCapture(event.pointerId)
+  }
 }
 
 function onWheel(event: WheelEvent): void {
   event.preventDefault()
-  changeZoom(event.deltaY > 0 ? -1 : 1)
+  const viewportHeight = viewportRef.value?.clientHeight ?? 1
+  const pixelDelta =
+    event.deltaMode === 1
+      ? event.deltaY * 16
+      : event.deltaMode === 2
+        ? event.deltaY * viewportHeight
+        : event.deltaY
+  const limitedDelta = Math.max(-120, Math.min(120, pixelDelta))
+  setZoomAt(
+    zoom.value * Math.exp(-limitedDelta * 0.0018),
+    event.clientX,
+    event.clientY,
+  )
 }
 
 function onCrewLinkMessage(event: MessageEvent): void {
@@ -918,7 +1102,8 @@ function onKeydown(event: KeyboardEvent): void {
     !confirmAction.value &&
     !sheet.value &&
     !selectedMember.value &&
-    !selectedPing.value
+    !selectedPing.value &&
+    !placingPing.value
   ) {
     return
   }
@@ -930,8 +1115,10 @@ function onKeydown(event: KeyboardEvent): void {
     closeSheet()
   } else if (selectedMember.value) {
     selectedMember.value = null
-  } else {
+  } else if (selectedPing.value) {
     selectedPing.value = null
+  } else {
+    cancelPingPlacement()
   }
 }
 
@@ -1076,11 +1263,19 @@ onBeforeUnmount(() => {
     </template>
 
     <template v-else>
-      <k-navbar v-if="activeGroup" class="crewlink-navbar" :title="t('name')" />
+      <k-navbar
+        v-if="activeGroup"
+        class="crewlink-navbar"
+        :subtitle="headerSubtitle"
+        :title="headerTitle"
+      />
 
       <main
         class="crewlink-content"
-        :class="{ 'crewlink-content--empty': !activeGroup }"
+        :class="{
+          'crewlink-content--empty': !activeGroup,
+          'crewlink-content--placing': placingPing,
+        }"
       >
         <section v-if="!activeGroup" class="crewlink-group-gate">
           <button type="button" @click="openSheet('create-group')">
@@ -1138,58 +1333,69 @@ onBeforeUnmount(() => {
                 :style="canvasStyle"
               >
                 <img
-                  :src="mainlandMapUrl"
+                  :src="mapImageUrl"
                   alt=""
                   class="crewlink-map__mainland"
-                  :style="defaultMainlandStyle"
+                  :class="{
+                    'crewlink-map__mainland--default': mapStyle === 'default',
+                  }"
+                  :style="
+                    mapStyle === 'default' ? defaultMainlandStyle : undefined
+                  "
                   draggable="false"
+                  @load="onMapImageLoad"
                 />
                 <img
+                  v-if="mapStyle === 'default'"
                   :src="cayoMapUrl"
                   alt=""
                   class="crewlink-map__cayo"
                   :style="defaultCayoStyle"
                   draggable="false"
                 />
-                <button
-                  v-for="member in visibleMapMembers"
-                  :key="member.id"
-                  type="button"
-                  class="crewlink-member-marker"
-                  :class="{ 'is-self': member.id === crew.profile?.id }"
-                  :style="{
-                    ...markerStyle(member.coords!),
-                    ...activeCrewStyle,
-                  }"
-                  @pointerdown.stop
-                  @click.stop="selectedMember = member"
-                >
-                  <span>{{ memberInitials(member) }}</span>
-                  <small>{{ member.username }}</small>
-                </button>
-                <button
-                  v-for="ping in activeGroup.pings"
-                  :key="ping.id"
-                  type="button"
-                  class="crewlink-ping-marker"
-                  :style="{
-                    ...markerStyle(ping.coords, '-100%'),
-                    '--ping': pingColours[ping.type],
-                  }"
-                  @pointerdown.stop
-                  @click.stop="selectedPing = ping"
-                >
-                  <component :is="pingIcons[ping.type]" />
-                  <small>{{ ping.label }}</small>
-                </button>
               </div>
-              <div v-if="pingAtMapCenter" class="crewlink-map-crosshair">
+              <button
+                v-for="member in visibleMapMembers"
+                :key="member.id"
+                type="button"
+                class="crewlink-member-marker"
+                :class="{ 'is-self': member.id === crew.profile?.id }"
+                :style="{
+                  ...markerStyle(member.coords!),
+                  ...activeCrewStyle,
+                }"
+                @pointerdown.stop
+                @click.stop="selectedMember = member"
+              >
+                <span>
+                  <img v-if="member.avatarUrl" :src="member.avatarUrl" alt="" />
+                  <template v-else>{{ memberInitials(member) }}</template>
+                </span>
+                <small>{{ member.username }}</small>
+              </button>
+              <button
+                v-for="ping in activeGroup.pings"
+                :key="ping.id"
+                type="button"
+                class="crewlink-ping-marker"
+                :style="{
+                  ...markerStyle(ping.coords, '-100%'),
+                  '--ping': pingColours[ping.type],
+                }"
+                @pointerdown.stop
+                @click.stop="selectedPing = ping"
+              >
+                <component :is="pingIcons[ping.type]" />
+                <small>{{ ping.label }}</small>
+              </button>
+              <div v-if="placingPing" class="crewlink-map-crosshair">
                 <Crosshair />
               </div>
               <div class="crewlink-map-controls">
                 <button
                   type="button"
                   :aria-label="t('zoomIn')"
+                  @pointerdown.stop
                   @click="changeZoom(1)"
                 >
                   +
@@ -1197,6 +1403,7 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   :aria-label="t('zoomOut')"
+                  @pointerdown.stop
                   @click="changeZoom(-1)"
                 >
                   −
@@ -1204,6 +1411,7 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   :aria-label="t('myLocation')"
+                  @pointerdown.stop
                   @click="centerOwnLocation"
                 >
                   <LocateFixed />
@@ -1211,18 +1419,42 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   :aria-label="`${t('members')} · ${t('map')}`"
+                  @pointerdown.stop
                   @click="fitOnlineMembers"
                 >
                   <Users />
                 </button>
+                <button
+                  type="button"
+                  :aria-label="`${phone.t('Apps.map.switchStyle')}: ${phone.t(`Apps.map.styles.${mapStyle}`)}`"
+                  @pointerdown.stop
+                  @click="cycleMapStyle"
+                >
+                  <component :is="activeMapStyle.icon" />
+                </button>
               </div>
-              <div class="crewlink-map-legend">
+              <div v-if="!placingPing" class="crewlink-map-legend">
                 <span><i class="is-live"></i>{{ t('status.live') }}</span>
                 <span><i class="is-hidden"></i>{{ t('status.hidden') }}</span>
               </div>
             </div>
 
-            <div class="crewlink-map-actions">
+            <div v-if="placingPing" class="crewlink-ping-placement">
+              <div>
+                <strong>{{ t('placeOnMap') }}</strong>
+                <small>{{ t('placeOnMapBody') }}</small>
+              </div>
+              <div>
+                <k-button rounded outline @click="cancelPingPlacement">
+                  {{ phone.t('Common.cancel') }}
+                </k-button>
+                <k-button rounded @click="confirmPingPlacement">
+                  <MapPin />{{ t('addHere') }}
+                </k-button>
+              </div>
+            </div>
+
+            <div v-else class="crewlink-map-actions">
               <button type="button" @click="activeTab = 'group'">
                 <Users /><span
                   ><strong
@@ -1236,7 +1468,7 @@ onBeforeUnmount(() => {
               <button
                 type="button"
                 :disabled="!canPing"
-                @click="openSheet('ping')"
+                @click="startPingPlacement"
               >
                 <MapPin /><span
                   ><strong>{{ t('newPing') }}</strong
@@ -1389,7 +1621,7 @@ onBeforeUnmount(() => {
                 <small>{{ t('liveCoordination') }}</small>
                 <h1>{{ t('pings') }}</h1>
               </div>
-              <button v-if="canPing" type="button" @click="openSheet('ping')">
+              <button v-if="canPing" type="button" @click="startPingPlacement">
                 <Plus />
               </button>
             </div>
@@ -1591,7 +1823,7 @@ onBeforeUnmount(() => {
       </main>
 
       <k-tabbar
-        v-if="activeGroup"
+        v-if="activeGroup && !placingPing"
         component="nav"
         icons
         labels
@@ -1858,21 +2090,17 @@ onBeforeUnmount(() => {
               outline
               @input="updateValue('pingLabel', $event)"
           /></k-list>
-          <k-list inset strong class="crewlink-ping-location-list"
-            ><k-list-item
-              ><template #media><Crosshair :size="22" /></template
-              ><template #title
-                ><span class="crewlink-ping-location-copy"
-                  ><strong>{{ t('placeOnMap') }}</strong
-                  ><small>{{ t('placeOnMapBody') }}</small></span
-                ></template
-              ><template #after
-                ><k-toggle
-                  :checked="pingAtMapCenter"
-                  @click.stop.prevent="
-                    togglePingAtMapCenter
-                  " /></template></k-list-item
-          ></k-list>
+          <k-list inset strong class="crewlink-ping-location-list">
+            <k-list-item
+              :title="t('placeOnMap')"
+              :subtitle="t('positionSelected')"
+              link
+              @click="resumePingPlacement"
+            >
+              <template #media><Crosshair :size="22" /></template>
+              <template #after><MapPinned :size="19" /></template>
+            </k-list-item>
+          </k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
           <k-button
             large
@@ -2196,18 +2424,26 @@ onBeforeUnmount(() => {
   background: transparent;
 }
 .crewlink-navbar {
-  --k-navbar-bg-color: rgba(248, 252, 255, 0.78);
+  --k-safe-area-top: 46px;
   position: absolute;
   z-index: 20;
-  inset: 0 0 auto;
-  backdrop-filter: blur(20px) saturate(1.3);
+  top: 0;
+  right: 0;
+  left: 0;
 }
-.crewlink--dark .crewlink-navbar {
-  --k-navbar-bg-color: rgba(7, 16, 24, 0.8);
+.crewlink-navbar::after {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  height: 22px;
+  background: linear-gradient(var(--cl-bg), transparent);
+  content: '';
+  pointer-events: none;
 }
 .crewlink-content {
   position: absolute;
-  inset: 94px 0 calc(80px + var(--k-safe-area-bottom));
+  inset: 0;
   overflow: hidden;
 }
 .crewlink-content--empty {
@@ -2216,7 +2452,7 @@ onBeforeUnmount(() => {
 .crewlink-scroll-tab {
   height: 100%;
   overflow-y: auto;
-  padding: 14px 11px 34px;
+  padding: 108px 11px 112px;
 }
 .crewlink-loading,
 .crewlink-onboarding {
@@ -2454,10 +2690,15 @@ onBeforeUnmount(() => {
 }
 .crewlink-map-tab {
   height: 100%;
+  padding-top: 94px;
+  padding-bottom: calc(80px + var(--k-safe-area-bottom));
   display: flex;
   flex-direction: column;
   background: #09131c;
 }
+.crewlink-content--placing .crewlink-map-tab {
+  padding-bottom: var(--k-safe-area-bottom);
+}
 .crewlink-map-summary {
   height: 64px;
   padding: 8px 13px;
@@ -2542,6 +2783,12 @@ onBeforeUnmount(() => {
   pointer-events: none;
   user-select: none;
 }
+.crewlink-map__mainland:not(.crewlink-map__mainland--default) {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .crewlink-member-marker,
 .crewlink-ping-marker {
   position: absolute;
@@ -2561,12 +2808,18 @@ onBeforeUnmount(() => {
   border-radius: 50%;
   display: grid;
   place-items: center;
+  overflow: hidden;
   color: white;
   background: var(--crew);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
   font-size: 9px;
   font-weight: 900;
 }
+.crewlink-member-marker > span img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .crewlink-member-marker.is-self > span {
   box-shadow:
     0 0 0 5px var(--crew-ring),
@@ -2599,6 +2852,7 @@ onBeforeUnmount(() => {
 }
 .crewlink-map-controls {
   position: absolute;
+  z-index: 8;
   right: 10px;
   top: 10px;
   display: flex;
@@ -2650,15 +2904,64 @@ onBeforeUnmount(() => {
 }
 .crewlink-map-crosshair {
   position: absolute;
+  z-index: 7;
   left: 50%;
   top: 50%;
+  width: 48px;
+  height: 48px;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
   transform: translate(-50%, -50%);
   color: #ff4d67;
+  background: rgba(8, 20, 30, 0.28);
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.42),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
 }
 .crewlink-map-crosshair svg {
-  width: 32px;
-  height: 32px;
-  filter: drop-shadow(0 2px 4px white);
+  width: 28px;
+  height: 28px;
+  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.72));
+}
+.crewlink-ping-placement {
+  min-height: 112px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 9px;
+  color: white;
+  background: #0c1822;
+}
+.crewlink-ping-placement > div:first-child {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+.crewlink-ping-placement strong {
+  font-size: 14px;
+  line-height: 18px;
+}
+.crewlink-ping-placement small {
+  color: #a4b4c0;
+  font-size: 10px;
+  line-height: 13px;
+}
+.crewlink-ping-placement > div:last-child {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.crewlink-ping-placement :deep(.k-button) {
+  min-height: 44px;
+}
+.crewlink-ping-placement svg {
+  width: 16px;
+  height: 16px;
 }
 .crewlink-map-actions {
   height: 76px;
@@ -2898,9 +3201,6 @@ onBeforeUnmount(() => {
   width: 22px;
   height: 22px;
 }
-.crewlink-pings-tab {
-  padding-top: 12px;
-}
 .crewlink-pings-tab .crewlink-section-header {
   margin-bottom: 12px;
 }
@@ -3350,6 +3650,16 @@ onBeforeUnmount(() => {
 .crewlink-tabbar {
   z-index: 20;
 }
+.crewlink-tabbar::before {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  height: 24px;
+  background: linear-gradient(transparent, var(--cl-bg));
+  content: '';
+  pointer-events: none;
+}
 .crewlink-tabbar :deep(.crewlink-tabbar__inner) {
   width: 100% !important;
   max-width: none !important;
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 89fd77f..af7e0b3 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -286,7 +286,7 @@ Locales["en"] = {
                 nearby = "Nearby", copyCode = "Copy code", shareInvite = "Invite by message", shareInviteTitle = "Join {group} on CrewLink", shareInviteBody = "Use invitation code {code} to join {group}.", manage = "Manage", refresh = "Refresh", codeCopied = "Invitation code copied.", codeRotated = "A new invitation code is active.",
                 peopleNearby = "People Nearby", peopleNearbyBody = "Only CrewLink users within {distance} meters appear here.", metersAway = "{distance} m away", invite = "Invite", inviteSent = "Invitation sent to @{username}.", nobodyNearby = "Nobody in range", nobodyNearbyBody = "Move closer to another CrewLink user and scan again.", scanAgain = "Scan Again",
                 liveCoordination = "Live coordination", noPings = "No active pings", noPingsBody = "Share a meeting point, warning, or target with your crew.", expiresMinutes = "{count} min left", expiresSeconds = "{count} sec left", sharedBy = "Shared by @{username}", setRoute = "Set Route", routeSet = "GPS route set.", pingCreated = "Ping shared with your crew.", pingRemoved = "Ping removed.",
-                newPingBody = "Share your current position or place the ping at the center of the map.", pingLabel = "Ping label", pingLabelPlaceholder = "e.g. Meet at the garage", placeOnMap = "Use map center", placeOnMapBody = "Otherwise your current position is used.", sharePing = "Share Ping",
+                newPingBody = "Choose a point on the map, then add a label and ping type.", pingLabel = "Ping label", pingLabelPlaceholder = "e.g. Meet at the garage", placeOnMap = "Place ping on map", placeOnMapBody = "Move the map until the crosshair marks the exact spot.", positionSelected = "Position selected · tap to change", addHere = "Place Here", sharePing = "Share Ping",
                 pingTypes = { meeting = "Meet", danger = "Danger", help = "Help", target = "Target", info = "Info" },
                 status = { live = "Live", hidden = "Location hidden", offline = "Offline" },
                 roles = { owner = "Owner", coordinator = "Coordinator", moderator = "Moderator", member = "Member", guest = "Guest" },