v2 overhaul: PWA, GitHub Pages deploy, custom dialog, markdown export

- Live demo: GitHub Pages auto-deploy via CI on every push to main.
  vite.config.js switched to base: './' so dist/ ships unchanged to
  any subdirectory deploy (Pages, S3, Netlify, Vercel).
- PWA: manifest.webmanifest + offline-first service worker
  (cache-first for same-origin GET, network fallback). Installable
  to home screen on iPad.
- Custom <dialog> modal system (src/dialog.js + dialog.css) replaces
  native confirm()/alert(). Focus-trapped, Esc-closes, themed to match.
- Save-status indicator pill in toolbar ("Saved · 3s ago") with
  onSave listeners + 15s refresh ticker.
- Markdown export of full deck (steps + cards + checklist) alongside
  the existing JSON export. HTML-to-MD conversion preserves headings,
  lists, blockquotes, and highlight spans.
- Brutalist house-style README with light/dark hero banners,
  OG + Twitter cards, theme-color meta, inline SVG favicon, CI badge.
- CI workflow: vite build + dist sanity check + Pages artifact +
  deploy job, all gated on main pushes.

Author: hatimhtm

.github/workflows/ci.yml

@@ -0,0 +1,69 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    name: Vite build
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+
+      - name: Install
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Confirm artifacts
+        run: |
+          test -f dist/index.html
+          test -f dist/manifest.webmanifest
+          test -f dist/sw.js
+          test -d dist/assets
+          echo "Bundle size: $(du -sh dist | cut -f1)"
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+          retention-days: 14
+
+      - name: Upload Pages artifact
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    name: Deploy to GitHub Pages
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -6,7 +6,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ScriptDeck | Conversation Script Runner</title>
     <meta name="description"
-        content="Configurable step-by-step conversation script runner with response cards, rebuttals, and session analytics.">
+        content="Keyboard-first conversation script runner — multi-step decks, categorised response cards, call timer, session analytics. Offline-first PWA.">
+    <meta name="theme-color" content="#2563EB">
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="ScriptDeck — Conversation Script Runner">
+    <meta property="og:description" content="Step-by-step script runner with response cards, timer, and session analytics. Offline-first.">
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="ScriptDeck — Conversation Script Runner">
+    <meta name="twitter:description" content="Step-by-step script runner with response cards, timer, and session analytics.">
+
+    <!-- Favicon — inline SVG gradient S -->
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%232563EB'/%3E%3Cstop offset='1' stop-color='%2393C5FD'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3Ctext x='32' y='44' font-family='Inter,sans-serif' font-size='34' font-weight='800' fill='white' text-anchor='middle'%3ES%3C/text%3E%3C/svg%3E">
+
+    <!-- PWA -->
+    <link rel="manifest" href="manifest.webmanifest">
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -15,7 +31,7 @@
         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap"
         rel="stylesheet">
 
-    <!-- Icons -->
+    <!-- Icons — pinned for reproducibility -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
 
     <!-- Styles -->
@@ -25,6 +41,7 @@
     <link rel="stylesheet" href="/src/styles/script.css">
     <link rel="stylesheet" href="/src/styles/rebuttals.css">
     <link rel="stylesheet" href="/src/styles/sidebar.css">
+    <link rel="stylesheet" href="/src/styles/dialog.css">
 </head>
 
 <body data-theme="light">
@@ -48,14 +65,18 @@
         </div>
 
         <div class="toolbar-right">
-            <button id="editBtn" class="icon-btn" title="Edit Script">
+            <span id="saveIndicator" class="save-indicator" aria-live="polite" title="Auto-save status">
+                <i class="fa-solid fa-cloud-check"></i><span id="saveLabel">Saved</span>
+            </span>
+            <div class="toolbar-divider"></div>
+            <button id="editBtn" class="icon-btn" title="Edit Script (E)">
                 <i class="fa-solid fa-pen"></i>
                 <span>Edit Script</span>
             </button>
-            <button id="undoBtn" class="icon-btn disabled" title="Undo">
+            <button id="undoBtn" class="icon-btn disabled" title="Undo (⌘Z)">
                 <i class="fa-solid fa-rotate-left"></i>
             </button>
-            <button id="redoBtn" class="icon-btn disabled" title="Redo">
+            <button id="redoBtn" class="icon-btn disabled" title="Redo (⌘⇧Z)">
                 <i class="fa-solid fa-rotate-right"></i>
             </button>
             <div class="toolbar-divider"></div>
@@ -69,9 +90,12 @@
             <button id="importBtn" class="icon-btn" title="Load Script JSON">
                 <i class="fa-solid fa-file-import"></i>
             </button>
-            <button id="exportBtn" class="icon-btn" title="Export Script JSON">
+            <button id="exportBtn" class="icon-btn" title="Export as JSON">
                 <i class="fa-solid fa-file-export"></i>
             </button>
+            <button id="exportMdBtn" class="icon-btn" title="Export as Markdown">
+                <i class="fa-solid fa-file-lines"></i>
+            </button>
             <button id="themeBtn" class="icon-btn" title="Toggle Theme">
                 <i class="fa-solid fa-moon"></i>
             </button>
@@ -165,6 +189,15 @@ <h3><i class="fa-solid fa-clock-rotate-left"></i> Session History</h3>
 
     <!-- App Entry -->
     <script type="module" src="/src/main.js"></script>
+
+    <!-- Service Worker (offline-first) -->
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('sw.js').catch(() => { });
+            });
+        }
+    </script>
 </body>
 
-</html>
+</html>

assets-readme/hero-banner-dark.svg

@@ -0,0 +1,25 @@
+{
+  "name": "ScriptDeck — Conversation Script Runner",
+  "short_name": "ScriptDeck",
+  "description": "Keyboard-first conversation script runner — steps, response cards, session analytics, all offline.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#F8FAFC",
+  "theme_color": "#2563EB",
+  "icons": [
+    {
+      "src": "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='1'><stop offset='0' stop-color='%232563EB'/><stop offset='1' stop-color='%2393C5FD'/></linearGradient></defs><rect width='192' height='192' rx='40' fill='url(%23g)'/><text x='96' y='130' font-family='Helvetica' font-size='110' font-weight='900' fill='white' text-anchor='middle'>S</text></svg>",
+      "sizes": "192x192",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='1'><stop offset='0' stop-color='%232563EB'/><stop offset='1' stop-color='%2393C5FD'/></linearGradient></defs><rect width='512' height='512' rx='110' fill='url(%23g)'/><text x='256' y='350' font-family='Helvetica' font-size='300' font-weight='900' fill='white' text-anchor='middle'>S</text></svg>",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

assets-readme/hero-banner.svg

@@ -0,0 +1,41 @@
+/* ScriptDeck — Service Worker
+ * Caches the app shell so the deck works without network after first load.
+ * Strategy: cache-first for same-origin GET, network-fallback, ignore others.
+ */
+
+const CACHE = 'scriptdeck-v1';
+
+self.addEventListener('install', (e) => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (e) => {
+    e.waitUntil(
+        caches.keys().then((keys) =>
+            Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
+        )
+    );
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', (e) => {
+    const req = e.request;
+    if (req.method !== 'GET') return;
+    const url = new URL(req.url);
+    if (url.origin !== self.location.origin) return;
+
+    e.respondWith(
+        caches.match(req).then((cached) => {
+            const network = fetch(req)
+                .then((res) => {
+                    if (res && res.ok && res.type === 'basic') {
+                        const copy = res.clone();
+                        caches.open(CACHE).then((c) => c.put(req, copy));
+                    }
+                    return res;
+                })
+                .catch(() => cached);
+            return cached || network;
+        })
+    );
+});