From b46450031007ac14a372627e8fa7261ef5be65fb Mon Sep 17 00:00:00 2001
From: bot-hermes <bot-hermes@buzzbee.dev>
Date: Mon, 7 Sep 2026 21:27:53 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20PWA=20improvements=20=E2=80=94=20clean?=
 =?UTF-8?q?=20up=20SW,=20fix=20chin=20bar,=20add=20shortcuts,=20improve=20?=
 =?UTF-8?q?mobile=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove dead precache manifest from SW (no fetch handler to consume it)
- Set empty globPatterns in vite-plugin-pwa config
- Fix bottom chin bar padding: use scaled safe-area token instead of raw inset
- Add 'New Session' PWA shortcut (client + server manifest)
- Add PWA meta tags to mobile.html (manifest, Apple icons, theme-color)
- Fix static site.webmanifest: add id/scope, correct description
- Remove duplicate apple-mobile-web-app-title from index.html
- Move SW registration to module scope (earlier, no window.load delay)
- Update manifest route tests for new shortcut order
---
 packages/ui/src/styles/mobile.css             |  2 +-
 packages/web/index.html                       |  8 +++++-
 packages/web/mobile.html                      | 26 +++++++++++++++++++
 packages/web/public/site.webmanifest          |  4 ++-
 .../lib/opencode/pwa-manifest-routes.js       |  7 +++++
 .../lib/opencode/pwa-manifest-routes.test.js  |  7 +++++
 packages/web/src/main.tsx                     | 21 +++++++--------
 packages/web/src/sw.ts                        | 15 ++++-------
 packages/web/vite.config.ts                   |  6 ++---
 9 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index 22b0dcd5..d8b380c0 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -716,7 +716,7 @@
   }
 
   :root:not(.oc-capacitor-app):not(.oc-browser-keyboard-open) .oc-mobile-composer {
-    padding-bottom: calc(0.75rem + max(16px, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0px)))) !important;
+    padding-bottom: calc(0.75rem + var(--oc-safe-area-bottom-visual, 0px)) !important;
   }
 
   /* Fullscreen composer: ChatInput pins the form to the visual viewport from
diff --git a/packages/web/index.html b/packages/web/index.html
index 750acd52..a7b7ffdd 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -192,6 +192,13 @@
 
       const buildShortcuts = (recentSessions) => {
         const shortcuts = [
+          {
+            name: 'New Session',
+            short_name: 'New',
+            description: 'Start a new coding session',
+            url: `${baseUrl}/`,
+            icons: [{ src: `${baseUrl}/pwa-192.png`, sizes: '192x192', type: 'image/png' }],
+          },
           {
             name: 'Appearance Settings',
             short_name: 'Settings',
@@ -427,7 +434,6 @@
     <title>OpenChamber - AI Coding Assistant</title>
     <meta name="description" content="Web interface companion for OpenCode AI coding agent" />
     <meta name="application-name" content="OpenChamber" />
-    <meta name="apple-mobile-web-app-title" content="OpenChamber" />
 
     <!-- Inline CSS for loading screen and Nerd Fonts (before Tailwind loads) -->
     <style>
diff --git a/packages/web/mobile.html b/packages/web/mobile.html
index 907e8c41..376c6715 100644
--- a/packages/web/mobile.html
+++ b/packages/web/mobile.html
@@ -5,6 +5,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>OpenChamber Mobile</title>
 
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16" />
+    <link rel="mask-icon" href="/favicon.svg" color="#edb449" />
+
+    <!-- Apple touch icon - PNG format required for iOS PWA support -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
+    <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
+
+    <!-- Web app manifest -->
+    <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials" />
+
+    <!-- Theme color -->
+    <meta name="theme-color" content="#151313" />
+    <meta name="theme-color" content="#151313" media="(prefers-color-scheme: dark)" />
+
+    <!-- iOS Safari PWA styling -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="OpenChamber" />
+
+    <meta name="description" content="Web interface companion for OpenCode AI coding agent" />
+    <meta name="application-name" content="OpenChamber" />
+
     <script>
       // Blocking script: resolve the theme and paint the correct background BEFORE first
       // paint. Without this the WebView shows its default (light) canvas until React mounts
diff --git a/packages/web/public/site.webmanifest b/packages/web/public/site.webmanifest
index 7caf52bf..6838df83 100644
--- a/packages/web/public/site.webmanifest
+++ b/packages/web/public/site.webmanifest
@@ -1,8 +1,10 @@
 {
   "name": "OpenChamber",
   "short_name": "OpenChamber",
-  "description": "OpenChamber desktop companion for the OpenCode AI coding agent",
+  "description": "Web interface companion for OpenCode AI coding agent",
+  "id": "/",
   "start_url": "/",
+  "scope": "/",
   "display": "standalone",
   "background_color": "#151313",
   "theme_color": "#edb449",
diff --git a/packages/web/server/lib/opencode/pwa-manifest-routes.js b/packages/web/server/lib/opencode/pwa-manifest-routes.js
index 8350abc0..88dddcb1 100644
--- a/packages/web/server/lib/opencode/pwa-manifest-routes.js
+++ b/packages/web/server/lib/opencode/pwa-manifest-routes.js
@@ -237,6 +237,13 @@ export const registerPwaManifestRoute = (app, dependencies) => {
         { src: '/favicon-16.png', sizes: '16x16', type: 'image/png' },
       ],
       shortcuts: [
+        {
+          name: 'New Session',
+          short_name: 'New',
+          description: 'Start a new coding session',
+          url: '/',
+          icons: [{ src: '/pwa-192.png', sizes: '192x192', type: 'image/png' }],
+        },
         {
           name: 'Appearance Settings',
           short_name: 'Settings',
diff --git a/packages/web/server/lib/opencode/pwa-manifest-routes.test.js b/packages/web/server/lib/opencode/pwa-manifest-routes.test.js
index 64f0a613..91a3f45a 100644
--- a/packages/web/server/lib/opencode/pwa-manifest-routes.test.js
+++ b/packages/web/server/lib/opencode/pwa-manifest-routes.test.js
@@ -65,6 +65,13 @@ describe('PWA manifest route', () => {
       const manifest = JSON.parse(res.body);
       expect(fetchCalls).toHaveLength(2);
       expect(manifest.shortcuts).toEqual([
+        {
+          name: 'New Session',
+          short_name: 'New',
+          description: 'Start a new coding session',
+          url: '/',
+          icons: [{ src: '/pwa-192.png', sizes: '192x192', type: 'image/png' }],
+        },
         {
           name: 'Appearance Settings',
           short_name: 'Settings',
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index 4dd0d7a9..5e255850 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -63,17 +63,16 @@ const runWhenDocumentCanRegisterServiceWorker = (task: () => void): void => {
 };
 
 const registerPwaServiceWorker = (): void => {
-  runWhenDocumentCanRegisterServiceWorker(() => {
-    try {
-      registerSW({
-        onRegisterError(error: unknown) {
-          console.warn('[PWA] service worker registration skipped:', error);
-        },
-      });
-    } catch (error) {
-      console.warn('[PWA] service worker registration skipped:', error);
-    }
-  });
+  if (!canUseServiceWorker()) return;
+  try {
+    registerSW({
+      onRegisterError(error: unknown) {
+        console.warn('[PWA] service worker registration skipped:', error);
+      },
+    });
+  } catch (error) {
+    console.warn('[PWA] service worker registration skipped:', error);
+  }
 };
 
 const unregisterDevelopmentServiceWorkers = (): void => {
diff --git a/packages/web/src/sw.ts b/packages/web/src/sw.ts
index 3583d41b..1c4bf997 100644
--- a/packages/web/src/sw.ts
+++ b/packages/web/src/sw.ts
@@ -1,16 +1,11 @@
 /// <reference lib="webworker" />
 
-// NOTE: keep the Workbox injection point so vite-plugin-pwa can build.
-// We intentionally do not use Workbox runtime helpers here: iOS Safari can be
-// fragile with more complex SW bundles. For push notifications we only need a
-// minimal SW.
+// Minimal service worker: push notifications and click routing only.
+// No fetch handler, no precache — the app relies on the server for assets
+// and the event pipeline handles reconnection. iOS Safari is fragile with
+// complex SW bundles, so we keep this as lean as possible.
 
-declare const self: ServiceWorkerGlobalScope & {
-  __WB_MANIFEST: Array<string | { url: string; revision?: string }>;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const __precacheManifest = self.__WB_MANIFEST;
+declare const self: ServiceWorkerGlobalScope;
 
 type PushPayload = {
   title?: string;
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index 5fbae619..0d103580 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -73,10 +73,10 @@ export default defineConfig({
       injectRegister: false,
       manifest: false,
       injectManifest: {
-        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2,ttf,otf,eot}'],
-        // iOS Safari/PWA is much more reliable with a classic (non-module) SW bundle.
+        // No precache — the SW has no fetch handler. Only the IIFE bundle
+        // is produced so vite-plugin-pwa can build the registration script.
+        globPatterns: [],
         rollupFormat: 'iife',
-        // We already keep a custom manifest in index.html
         injectionPoint: undefined,
       },
       devOptions: {