feat: add PWA support with manifest, service worker, and icons

Adds vite-plugin-pwa (Workbox) for installable PWA experience:
- Web app manifest with brand colors, icons, standalone display mode
- Service worker with NetworkFirst for /api/* and CacheFirst for static assets
- 192x192, 512x512, and 180x180 apple-touch-icon PNGs generated from brand gradient
- PWA meta tags in index.html for iOS and Android home screen installation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

generate-pwa-icons.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+// Generates solid-color PNG icons for PWA manifest using only Node built-ins.
+const zlib = require('zlib');
+const fs = require('fs');
+const path = require('path');
+
+function u32be(n) {
+  const b = Buffer.alloc(4);
+  b.writeUInt32BE(n, 0);
+  return b;
+}
+
+function crc32(buf) {
+  let c = 0xFFFFFFFF;
+  const t = [];
+  for (let n = 0; n < 256; n++) {
+    let v = n;
+    for (let k = 0; k < 8; k++) v = (v & 1) ? (0xEDB88320 ^ (v >>> 1)) : (v >>> 1);
+    t[n] = v;
+  }
+  for (let i = 0; i < buf.length; i++) c = (c >>> 8) ^ t[(c ^ buf[i]) & 0xFF];
+  return (c ^ 0xFFFFFFFF) >>> 0;
+}
+
+function chunk(type, data) {
+  const tb = Buffer.from(type, 'ascii');
+  return Buffer.concat([u32be(data.length), tb, data, u32be(crc32(Buffer.concat([tb, data])))]);
+}
+
+function makePNG(w, h, topR, topG, topB, botR, botG, botB) {
+  const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+  const ihdr = chunk('IHDR', Buffer.concat([u32be(w), u32be(h), Buffer.from([8, 2, 0, 0, 0])]));
+
+  const rows = [];
+  for (let y = 0; y < h; y++) {
+    const t = y / (h - 1);
+    const r = Math.round(topR + (botR - topR) * t);
+    const g = Math.round(topG + (botG - topG) * t);
+    const b = Math.round(topB + (botB - topB) * t);
+    const row = Buffer.alloc(1 + w * 3);
+    row[0] = 0;
+    for (let x = 0; x < w; x++) { row[1 + x*3] = r; row[2 + x*3] = g; row[3 + x*3] = b; }
+    rows.push(row);
+  }
+  const idat = chunk('IDAT', zlib.deflateSync(Buffer.concat(rows)));
+  const iend = chunk('IEND', Buffer.alloc(0));
+  return Buffer.concat([sig, ihdr, idat, iend]);
+}
+
+// Brand gradient: #1e40af → #1e3a5f (top to bottom)
+const [tR, tG, tB] = [0x1e, 0x40, 0xaf];
+const [bR, bG, bB] = [0x1e, 0x3a, 0x5f];
+
+const out = path.join(__dirname, 'ui/public');
+fs.writeFileSync(path.join(out, 'pwa-192x192.png'), makePNG(192, 192, tR, tG, tB, bR, bG, bB));
+fs.writeFileSync(path.join(out, 'pwa-512x512.png'), makePNG(512, 512, tR, tG, tB, bR, bG, bB));
+fs.writeFileSync(path.join(out, 'apple-touch-icon.png'), makePNG(180, 180, tR, tG, tB, bR, bG, bB));
+console.log('PWA icons written to ui/public/');

ui/index.html

@@ -4,7 +4,13 @@
     <meta charset="UTF-8">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="32x32">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#1e40af">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-title" content="AlphaForge">
     <meta name="description" content="AlphaForge — AI-Powered Trading Intelligence. Autonomous paper trading with GPT-4o driven market analysis.">
     <title>AlphaForge</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">

ui/package.json

@@ -36,6 +36,7 @@
     "oxlint": "~1.60.0",
     "typescript": "~6.0.0",
     "vite": "^8.0.8",
+    "vite-plugin-pwa": "^1.3.0",
     "vite-plugin-vue-devtools": "^8.1.1",
     "vue-tsc": "^3.2.6"
   },

ui/vite.config.ts

@@ -4,6 +4,7 @@ import path from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -12,6 +13,48 @@ export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'favicon.ico', 'apple-touch-icon.png'],
+      manifest: {
+        name: 'AlphaForge',
+        short_name: 'AlphaForge',
+        description: 'AI-Powered autonomous paper trading intelligence',
+        theme_color: '#1e40af',
+        background_color: '#f3f4f6',
+        display: 'standalone',
+        start_url: '/',
+        scope: '/',
+        icons: [
+          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
+          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
+        ],
+      },
+      workbox: {
+        navigateFallback: '/index.html',
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^.*\/api\/.*/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              networkTimeoutSeconds: 10,
+              cacheableResponse: { statuses: [0, 200] },
+            },
+          },
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-cache',
+              cacheableResponse: { statuses: [0, 200] },
+            },
+          },
+        ],
+      },
+    }),
   ],
   resolve: {
     alias: {