From 299649738ef3e5b5ebf015466f0d3c4571b44a1b Mon Sep 17 00:00:00 2001
From: kuannnn <kuanthedev@gmail.com>
Date: Sat, 28 Mar 2026 04:47:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(pwa):=20audit=20fixes=20=E2=80=94=20safe-ar?=
 =?UTF-8?q?ea,=20SW=20lifecycle,=20badge,=20tap=20highlight,=20update=20ba?=
 =?UTF-8?q?nner,=20precache?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add safe-top to all full-screen overlays (PlanMode, DiffViewer, ChatView PlanViewer)
- Add safe-top to SessionsView drill-down header + swipe-back via pushState
- Move safe-top to ChatView outer container (persists when header hides)
- Add skipWaiting + clients.claim for immediate SW updates
- Create monochrome 96x96 badge icon for Android notifications
- Add -webkit-tap-highlight-color: transparent for dark theme
- Show SW update banner on all views, not just SessionsView
- Fix precache duplicates with specific glob patterns (18→16 entries)
- Add safe-bottom to ChatView saveToast
- Fix stale poll interval comment (10s→3s)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 public/badge-96x96.png          | Bin 0 -> 434 bytes
 src/App.tsx                     |  61 ++++++++++++++++++--------------
 src/components/ChatView.tsx     |   4 +--
 src/components/DiffViewer.tsx   |   2 +-
 src/components/PlanMode.tsx     |   2 +-
 src/components/SessionsView.tsx |   2 +-
 src/hooks/useSessions.ts        |  21 +++++++++--
 src/index.css                   |   1 +
 src/sw.ts                       |   8 ++++-
 vite.config.ts                  |   2 +-
 10 files changed, 67 insertions(+), 36 deletions(-)
 create mode 100644 public/badge-96x96.png

diff --git a/public/badge-96x96.png b/public/badge-96x96.png
new file mode 100644
index 0000000000000000000000000000000000000000..946ecccabd8bcb0061d37ec6c89116fe5369d0d4
GIT binary patch
literal 434
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGoY)RhkE)4%caKYZ?lNlHo(>+}r
zLn`LHy}8l%u!9KOgYu3hBUa`V1}--aX#*zd4NaRlXHR%@fI*U>a~ji2jSLy?n}I^V
zEl+(fef}dZ?vMBL&BBa8gQ4I|_}bFY@3~fwL(BSOBW>^Z1Wq~3sW6ja5|p_4)}ypu
zDe1OUed)3DZ*yZcmrAbekK20f+jqT1`=8I(tg`B6{&uBW==Yn)mJg&jkag-XN!;Kw
zQ@@h?Y{%c+*{%%NeHcz2s}e2r>lU8pB>p@ng=f0Jfn=9Ga+c-RHC}q&0Y;1}+Q}ko
zx9TZBT3Y(TPD!p$=ew+6IcKrG(xc6$b=phc^sSkiondbmd{*T8F`+3y^W1i_mt5Un
zeQ4A3Dc?1J{Wu<cK7F_5wLhLr5<%JLs%Hjy{d&KhMOD~gQzT13mCKP|Etg(5-g=oP
vc)(QH0cahR*yR1gJ!i6sI4n>Y7<Q=ak1#x7F3iVx2qfs~>gTe~DWM4f3y`M6

literal 0
HcmV?d00001

diff --git a/src/App.tsx b/src/App.tsx
index d3a0536..8fb82ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -231,47 +231,62 @@ export function App() {
 
   const isOffline = !deviceOnline || serverOnline === false;
 
+  const updateBanner = swUpdateAvailable && (
+    <div className="fixed bottom-6 left-4 right-4 bg-surface border border-accent/30 rounded-md px-4 py-3 flex items-center justify-between z-50 shadow-lg safe-bottom">
+      <span className="text-sm text-text font-mono">New version available</span>
+      <div className="flex gap-2">
+        <button onClick={() => window.location.reload()} className="text-sm font-medium text-accent hover:text-accent-light cursor-pointer">Refresh</button>
+        <button onClick={() => setSwUpdateAvailable(false)} className="text-sm text-text-dim hover:text-text cursor-pointer">Later</button>
+      </div>
+    </div>
+  );
+
   // Splash screen while first health check is pending
   if (serverOnline === null) {
     return (
-      <div className="min-h-screen bg-bg flex items-center justify-center">
-        <LoadingAnimation size="lg" label="Connecting..." />
-      </div>
+      <>
+        <div className="min-h-screen bg-bg flex items-center justify-center">
+          <LoadingAnimation size="lg" label="Connecting..." />
+        </div>
+        {updateBanner}
+      </>
     );
   }
 
   // Offline screen
   if (isOffline) {
-    return <OfflineView onRetry={checkHealth} />;
+    return <><OfflineView onRetry={checkHealth} />{updateBanner}</>;
   }
 
   if (!authed) {
-    return <LoginView onLogin={handleLogin} />;
+    return <><LoginView onLogin={handleLogin} />{updateBanner}</>;
   }
 
   if (view.name === 'newchat') {
     return (
-      <NewChatView
-        cwd={view.cwd}
-        onStartChat={startChat}
-        onBack={backToSessions}
-      />
+      <>
+        <NewChatView cwd={view.cwd} onStartChat={startChat} onBack={backToSessions} />
+        {updateBanner}
+      </>
     );
   }
 
   if (view.name === 'settings') {
-    return <SettingsView onBack={() => setView({ name: 'sessions' })} />;
+    return <><SettingsView onBack={() => setView({ name: 'sessions' })} />{updateBanner}</>;
   }
 
   if (view.name === 'chat') {
     return (
-      <ChatView
-        sessionId={view.sessionId}
-        cwd={view.cwd}
-        initialPrompt={view.initialPrompt}
-        adapter={view.adapter}
-        onBack={backToSessions}
-      />
+      <>
+        <ChatView
+          sessionId={view.sessionId}
+          cwd={view.cwd}
+          initialPrompt={view.initialPrompt}
+          adapter={view.adapter}
+          onBack={backToSessions}
+        />
+        {updateBanner}
+      </>
     );
   }
 
@@ -285,15 +300,7 @@ export function App() {
         onInstall={handleInstall}
         onDismissInstall={dismissInstall}
       />
-      {swUpdateAvailable && (
-        <div className="fixed bottom-6 left-4 right-4 bg-surface border border-accent/30 rounded-md px-4 py-3 flex items-center justify-between z-50 shadow-lg">
-          <span className="text-sm text-text font-mono">New version available</span>
-          <div className="flex gap-2">
-            <button onClick={() => window.location.reload()} className="text-sm font-medium text-accent hover:text-accent-light cursor-pointer">Refresh</button>
-            <button onClick={() => setSwUpdateAvailable(false)} className="text-sm text-text-dim hover:text-text cursor-pointer">Later</button>
-          </div>
-        </div>
-      )}
+      {updateBanner}
     </>
   );
 }
diff --git a/src/components/ChatView.tsx b/src/components/ChatView.tsx
index 576270d..44cd8ca 100644
--- a/src/components/ChatView.tsx
+++ b/src/components/ChatView.tsx
@@ -27,7 +27,7 @@ function PlanViewer({ plan }: { plan: string }) {
   if (expanded) {
     return (
       <div className="fixed inset-0 bg-bg z-50 flex flex-col">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0 safe-top">
           <Badge>PLAN</Badge>
           <Button variant="ghost" size="icon" onClick={() => setExpanded(false)}>
             <X className="w-5 h-5" />
@@ -567,7 +567,7 @@ export function ChatView({
 
       {/* Save-as-instruction toast */}
       {saveToast && (
-        <div className="fixed bottom-20 left-4 right-4 bg-surface border border-border rounded-xl p-3 flex items-center justify-between z-30">
+        <div className="fixed bottom-20 left-4 right-4 bg-surface border border-border rounded-xl p-3 flex items-center justify-between z-30 safe-bottom">
           <span className="text-sm text-text-dim">存成常用？</span>
           <button
             className="text-sm text-accent font-medium px-3 py-1 rounded-md hover:bg-accent/10"
diff --git a/src/components/DiffViewer.tsx b/src/components/DiffViewer.tsx
index 071d090..ca92549 100644
--- a/src/components/DiffViewer.tsx
+++ b/src/components/DiffViewer.tsx
@@ -8,7 +8,7 @@ export function DiffViewer({ filePath, oldString, newString, onClose }: {
   const newLines = newString.split('\n');
   return (
     <div className="fixed inset-0 bg-bg z-50 flex flex-col">
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0 safe-top">
         <div className="flex items-center gap-3 overflow-hidden">
           <Button variant="ghost" size="icon" onClick={onClose}>
             <X className="size-4" />
diff --git a/src/components/PlanMode.tsx b/src/components/PlanMode.tsx
index a636de8..5d76739 100644
--- a/src/components/PlanMode.tsx
+++ b/src/components/PlanMode.tsx
@@ -55,7 +55,7 @@ export function PlanMode({ input, onApprove, onApproveYolo, onReject, onSendFeed
   if (showFull) {
     return (
       <div className="fixed inset-0 bg-bg z-50 flex flex-col">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0 safe-top">
           <Badge className="font-mono">PLAN</Badge>
           <Button variant="ghost" size="icon" onClick={() => setShowFull(false)}>
             <X className="size-4" />
diff --git a/src/components/SessionsView.tsx b/src/components/SessionsView.tsx
index d345450..d68a318 100644
--- a/src/components/SessionsView.tsx
+++ b/src/components/SessionsView.tsx
@@ -132,7 +132,7 @@ export function SessionsView({
   if (selectedProjectDir) {
     return (
       <div className="min-h-screen bg-bg flex flex-col">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0 safe-top">
           <div className="flex items-center gap-2 min-w-0">
             <Button
               variant="ghost"
diff --git a/src/hooks/useSessions.ts b/src/hooks/useSessions.ts
index 3fe657c..8fc9989 100644
--- a/src/hooks/useSessions.ts
+++ b/src/hooks/useSessions.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { api } from '../lib/api';
 import { STORAGE } from '../lib/storage-keys';
 
@@ -39,7 +39,7 @@ export function useSessions() {
     }
   }, []);
 
-  // Poll every 10s when Active tab is selected
+  // Poll every 3s when Active tab is selected
   useEffect(() => {
     if (activeTab !== 'active') return;
     fetchActiveSessions();
@@ -86,11 +86,28 @@ export function useSessions() {
     setSelectedProjectDir(dir);
     if (dir) {
       localStorage.setItem(STORAGE.PROJECT_DIR, dir);
+      // Push history so back navigation (swipe-back, back button) returns to project list
+      window.history.pushState({ selectProject: dir }, '', '/');
     } else {
       localStorage.removeItem(STORAGE.PROJECT_DIR);
     }
   }, []);
 
+  // Clear project selection on back navigation (swipe-back, back button)
+  const selectedProjectDirRef = useRef(selectedProjectDir);
+  selectedProjectDirRef.current = selectedProjectDir;
+
+  useEffect(() => {
+    const handlePopState = (e: PopStateEvent) => {
+      if (!e.state?.selectProject && selectedProjectDirRef.current) {
+        setSelectedProjectDir(null);
+        localStorage.removeItem(STORAGE.PROJECT_DIR);
+      }
+    };
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
   return {
     sessions: filteredSessions,
     projects,
diff --git a/src/index.css b/src/index.css
index e982baa..258dc06 100644
--- a/src/index.css
+++ b/src/index.css
@@ -28,6 +28,7 @@ body {
   font-family: var(--font-mono);
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
   overscroll-behavior: none;
 }
 
diff --git a/src/sw.ts b/src/sw.ts
index d9934e6..ba486e8 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -8,6 +8,12 @@ declare const self: ServiceWorkerGlobalScope;
 // Precache static assets (injected by vite-plugin-pwa at build time)
 precacheAndRoute(self.__WB_MANIFEST);
 
+// Skip waiting + claim so updates take effect immediately
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
 // Cache stable API responses — show last-known data when offline.
 // Exclude volatile real-time endpoints (messages, active sessions, reviews).
 registerRoute(
@@ -52,7 +58,7 @@ self.addEventListener('push', (event) => {
     return self.registration.showNotification(payload.title, {
       body: payload.body,
       icon: '/pwa-192x192.png',
-      badge: '/pwa-192x192.png',
+      badge: '/badge-96x96.png',
       tag: payload.tag || payload.data?.sessionId || 'default',
       data: payload.data,
     });
diff --git a/vite.config.ts b/vite.config.ts
index 2af6a16..dee71df 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -39,7 +39,7 @@ export default defineConfig({
         categories: ['developer-tools', 'productivity'],
       },
       injectManifest: {
-        globPatterns: ['**/*.{js,css,html,ico,svg,woff2}', '*.png', 'mascot/*.png'],
+        globPatterns: ['**/*.{js,css,html,ico,svg,woff2}', 'favicon-*.png', 'apple-touch-icon.png', 'badge-*.png', 'mascot/*.png'],
       },
     }),
   ],