anomalyco · Harsha754-ml · Jul 19, 2026 · Jul 19, 2026
diff --git a/bun.lock b/bun.lock
@@ -44,6 +44,7 @@
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-plugin-icons-spritesheet": "3.0.1",
+    "vite-plugin-pwa": "0.21.1",
     "vite-plugin-solid": "catalog:"
   },
   "dependencies": {

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="theme-color" content="#080808">
+  <title>OpenCode - Offline</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background-color: #080808;
+      color: #fafafa;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      text-align: center;
+    }
+
+    .container {
+      max-width: 400px;
+      width: 100%;
+    }
+
+    .logo {
+      width: 80px;
+      height: 80px;
+      margin: 0 auto 24px;
+      opacity: 0.6;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: #fafafa;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: #a0a0a0;
+      margin-bottom: 32px;
+      line-height: 1.5;
+    }
+
+    .icon {
+      font-size: 48px;
+      margin-bottom: 24px;
+      opacity: 0.8;
+    }
+
+    .message {
+      font-size: 16px;
+      color: #d0d0d0;
+      margin-bottom: 32px;
+      line-height: 1.6;
+    }
+
+    .retry-button {
+      background-color: #3b82f6;
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      width: 100%;
+      max-width: 200px;
+    }
+
+    .retry-button:hover {
+      background-color: #2563eb;
+    }
+
+    .retry-button:active {
+      background-color: #1d4ed8;
+    }
+
+    .help-text {
+      font-size: 12px;
+      color: #808080;
+      margin-top: 24px;
+      line-height: 1.5;
+    }
+
+    @media (prefers-color-scheme: light) {
+      body {
+        background-color: #fafafa;
+        color: #080808;
+      }
+
+      h1 {
+        color: #080808;
+      }
+
+      .subtitle {
+        color: #666666;
+      }
+
+      .message {
+        color: #333333;
+      }
+
+      .help-text {
+        color: #999999;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <svg class="logo" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="100" height="100" rx="20" fill="#1a1a1a"/>
+      <path d="M30 70V30L50 50L70 30V70" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+    <h1>OpenCode</h1>
+    <p class="subtitle">AI-powered development tool</p>
+
+    <div class="icon">📡</div>
+
+    <p class="message">
+      You're currently offline. Please check your internet connection and try again.
+    </p>
+
+    <button class="retry-button" onclick="window.location.reload()">
+      Try Again
+    </button>
+
+    <p class="help-text">
+      OpenCode requires an internet connection to connect to your development server and AI services.
+    </p>
+  </div>
+</body>
+</html>
@@ -68,6 +68,7 @@ import { createSessionLineage } from "@/pages/session/session-lineage"
 
 import { SessionPage, SessionRouteErrorBoundary, TargetSessionRouteContent } from "@/pages/session"
 import { NewHome, LegacyHome } from "@/pages/home"
+import { PwaInstallBanner } from "@/components/pwa-install-banner"
 
 const NewSession = lazy(() => import("@/pages/new-session"))
 
@@ -572,6 +573,7 @@ export function AppInterface(props: {
                 <Routes serverScoped={props.serverScoped} />
               </Dynamic>
             </Show>
+            <PwaInstallBanner />
           </ConnectionGate>
         </SettingsProvider>
       </GlobalProvider>

@@ -0,0 +1,149 @@
+import { createSignal, onCleanup, onMount, Show } from "solid-js"
+import { usePlatform } from "@/context/platform"
+
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[]
+  readonly userChoice: Promise<{
+    outcome: "accepted" | "dismissed"
+    platform: string
+  }>
+  prompt(): Promise<void>
+}
+
+declare global {
+  interface WindowEventMap {
+    beforeinstallprompt: BeforeInstallPromptEvent
+    appinstalled: Event
+  }
+}
+
+export function PwaInstallBanner() {
+  const platform = usePlatform()
+  const [deferredPrompt, setDeferredPrompt] = createSignal<BeforeInstallPromptEvent | null>(null)
+  const [showBanner, setShowBanner] = createSignal(false)
+  const [isInstalled, setIsInstalled] = createSignal(false)
+
+  onMount(() => {
+    if (platform.platform !== "web") return
+
+    const handleBeforeInstallPrompt = (e: BeforeInstallPromptEvent) => {
+      e.preventDefault()
+      setDeferredPrompt(e)
+      setShowBanner(true)
+    }
+
+    const handleAppInstalled = () => {
+      setIsInstalled(true)
+      setShowBanner(false)
+      setDeferredPrompt(null)
+    }
+
+    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
+    window.addEventListener("appinstalled", handleAppInstalled)
+
+    onCleanup(() => {
+      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
+      window.removeEventListener("appinstalled", handleAppInstalled)
+    })
+  })
+
+  const handleInstall = async () => {
+    const prompt = deferredPrompt()
+    if (!prompt) return
+
+    await prompt.prompt()
+const { outcome } = await prompt.userChoice
+
+setShowBanner(false)
+setDeferredPrompt(null)
+if (outcome === "accepted") setIsInstalled(true)
+
+  const handleDismiss = () => {
+    setShowBanner(false)
+    setDeferredPrompt(null)
+  }
+
+  return (
+    <Show when={showBanner() && !isInstalled()}>
+      <div class="fixed bottom-4 left-4 right-4 z-50 sm:left-auto sm:right-4 sm:w-80">
+        <div class="rounded-lg bg-v2-background-bg-base p-4 shadow-[var(--v2-elevation-floating)] border border-v2-border-border-muted">
+          <div class="flex items-start gap-3">
+            <div class="flex-shrink-0">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                class="text-v2-text-text-base"
+              >
+                <path
+                  d="M12 2L2 7L12 12L22 7L12 2Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M2 17L12 22L22 17"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M2 12L12 17L22 12"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+            <div class="flex-1 min-w-0">
+              <p class="text-[13px] font-[530] text-v2-text-text-base">
+                Install OpenCode
+              </p>
+              <p class="text-[13px] font-[440] text-v2-text-text-muted mt-1">
+                Add to your home screen for quick access
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={handleDismiss}
+              class="flex-shrink-0 p-1 rounded hover:bg-v2-surface-surface-hover transition-colors"
+              aria-label="Dismiss"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                class="text-v2-text-text-muted"
+              >
+                <path d="M4.25 11.75L11.75 4.25M11.75 11.75L4.25 4.25" stroke="currentColor" />
+              </svg>
+            </button>
+          </div>
+          <div class="mt-3 flex gap-2">
+            <button
+              type="button"
+              onClick={handleInstall}
+              class="flex-1 px-3 py-2 bg-v2-accent-accent text-white text-[13px] font-[530] rounded hover:bg-v2-accent-accent-hover transition-colors"
+            >
+              Install
+            </button>
+            <button
+              type="button"
+              onClick={handleDismiss}
+              class="px-3 py-2 text-[13px] font-[530] text-v2-text-text-muted hover:bg-v2-surface-surface-hover rounded transition-colors"
+            >
+              Not now
+            </button>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}