based on this code can you design complete working prototype...
Prompt
based on this code can you design complete working prototype??? <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tab Harbor β Complete Browser Tab Extension Plan</title> <style> :root { --bg: #07111f; --surface: #0d1a2b; --surface-2: #12243a; --text: #edf5ff; --muted: #a9bad0; --accent: #63e6be; --accent-2: #74c0fc; --warning: #ffd166; --danger: #ff7b7b; --border: #28415d; --code: #08101c; --shadow: 0 16px 45px rgba(0,0,0,.25); } @media (prefers-color-scheme: light) { :root { --bg: #f4f8fc; --surface: #ffffff; --surface-2: #edf4fb; --text: #102033; --muted: #50647b; --border: #cedcea; --code: #eef4fa; --shadow: 0 14px 35px rgba(24,55,85,.10); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at 90% 0%, rgba(116,192,252,.13), transparent 30rem), var(--bg); color: var(--text); font: 15px/1.5 Inter, system-ui, sans-serif; } a { color: var(--accent-2); } h1, h2, h3, h4 { line-height: 1.2; scroll-margin-top: 20px; } h1 { font-size: clamp(2rem, 5vw, 3.8rem); margin: .2em 0; letter-spacing: -.04em; } h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-top: 1.8rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; } p, li { color: var(--muted); } strong, th { color: var(--text); } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } code { background: var(--code); border: 1px solid var(--border); padding: .1rem .3rem; border-radius: 4px; color: var(--accent); } pre { overflow: auto; padding: .8rem; background: var(--code); border: 1px solid var(--border); border-radius: 8px; color: #cfe3f7; font-size: .85rem; } .wrap { width: min(1140px, calc(100% - 32px)); margin: auto; } header { padding: 40px 0 20px; } .eyebrow { color: var(--accent); border: 1px solid rgba(99,230,190,.4); background: rgba(99,230,190,.08); padding: .25rem .6rem; border-radius: 999px; font-weight: 700; text-transform: uppercase; font-size: .75rem; } .callout { margin: 1rem 0; padding: .8rem 1rem; border-left: 4px solid var(--warning); background: rgba(255,209,102,.08); border-radius: 6px; } .callout.danger { border-color: var(--danger); background: rgba(255,123,123,.08); } .callout.good { border-color: var(--accent); background: rgba(99,230,190,.07); } .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .card { background: linear-gradient(145deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; box-shadow: var(--shadow); } .card h3, .card h4 { margin-top: 0; } .metric { font-size: 1.8rem; color: var(--accent); font-weight: 800; } nav { background: var(--surface); border: 1px solid var(--border); padding: .8rem; border-radius: 10px; display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; } nav a { text-decoration: none; font-size: .9rem; } section { margin: 1rem 0; padding: 1.2rem; background: rgba(13,26,43,.28); border: 1px solid var(--border); border-radius: 12px; } table { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .9rem; display: block; overflow-x: auto; } th, td { border: 1px solid var(--border); text-align: left; padding: .6rem; min-width: 120px; } th { background: var(--surface-2); } td { color: var(--muted); } .yes { color: var(--accent); font-weight: 700; } .partial { color: var(--warning); font-weight: 700; } .no { color: var(--danger); font-weight: 700; } .flow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; } .flow span { padding: .5rem .7rem; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; font-weight: 600; font-size: .85rem; } </style> </head> <body> <header class="wrap"> <span class="eyebrow">Product & Engineering Plan</span> <h1>Tab Harbor</h1> <p>Local-first browser extension converting fragile live tabs into a durable, searchable workspace. Reduces resource pressure, preserves sessions, and enables transactional crash recovery.</p> <div class="grid grid-4"> <div class="card"><div class="metric">4</div><strong>Core Problems</strong><p>RAM usage, loss, navigation friction.</p></div> <div class="card"><div class="metric">3</div><strong>Storage Layers</strong><p>Journal, snapshots, local DB.</p></div> <div class="card"><div class="metric">0</div><strong>Required Site Access</strong><p>No blanket page reading.</p></div> <div class="card"><div class="metric">1</div><strong>Unified UI</strong><p>Search, switch, archive, restore.</p></div> </div> <div class="callout danger"> <strong>Engineering Reality:</strong> Extensions cannot guarantee zero bugs, prevent OS crashes, recover pre-install data, or run on Chrome Android. The objective is measurable reliability, graceful degradation, and transactional recovery. </div> </header> <main class="wrap"> <nav aria-label="Contents"> <a href="#scope">1. Scope</a> <a href="#mapping">2. Solutions</a> <a href="#features">3. Features</a> <a href="#architecture">4. Architecture</a> <a href="#data">5. Data Model</a> <a href="#recovery">6. Recovery</a> <a href="#platforms">7. Platforms</a> </nav> <section id="scope"> <h2>1. Scope & Principles</h2> <div class="grid grid-2"> <div class="card"><h4>Durable by Default</h4><p>Record changes automatically in an append-only event journal.</p></div> <div class="card"><h4>Local First</h4><p>Offline-first functionality. Optional end-to-end encrypted sync.</p></div> <div class="card"><h4>Virtualize, Don't Hoard</h4><p>Convert stale live tabs into lightweight archived records.</p></div> <div class="card"><h4>Least Privilege</h4><p>No access to page bodies, cookies, or forms by default.</p></div> </div> </section> <section id="mapping"> <h2>2. Complaint-to-Solution Map</h2> <table> <thead><tr><th>Issue</th><th>Root Cause</th><th>Tab Harbor Solution</th><th>Limits</th></tr></thead> <tbody> <tr><td>High RAM/CPU</td><td>Too many active renderers</td><td>Auto-sleep, duplicate detection, workspace parking</td><td>Cannot fix browser memory leaks</td></tr> <tr><td>Glitched tab switching</td><td>Overloaded tab strips</td><td>Command palette, MRU switching, virtual lists</td><td>Discarded tabs require network load time</td></tr> <tr><td>Tab loss on crash/update</td><td>Fragile session files</td><td>Append-only journal, frequent snapshots, reconciliation</td><td>Cannot restore tabs lost prior to install</td></tr> <tr><td>Ineffective search</td><td>Native UI limitations</td><td>Fuzzy title/URL search, tags, domain filters</td><td>Cannot inject UI into native tab bar</td></tr> </tbody> </table> </section> <section id="features"> <h2>3. Product Modules</h2> <div class="grid grid-2"> <div class="card"> <h3>Session Guardian & Sleep Manager</h3> <ul> <li>Records window/tab changes continuously.</li> <li>Discards inactive tabs via official <code>tabs.discard</code> API.</li> <li>Never sleeps active, audible, pinned, or protected tabs.</li> <li>Provides non-destructive recovery review after crashes.</li> </ul> </div> <div class="card"> <h3>Tab Vault & Switcher</h3> <ul> <li>Parks live tabs into durable IndexedDB records.</li> <li>Fuzzy search across live, sleeping, and archived tabs.</li> <li>Keyboard-first Command Palette (<code>Alt+Shift+K</code>).</li> <li>Bulk actions with progress state, cancellation, and undo.</li> </ul> </div> </div> </section> <section id="architecture"> <h2>4. Technical Architecture</h2> <div class="flow"> <span>Tab Events</span> → <span>Background Worker</span> → <span>Write-Ahead Journal</span> → <span>IndexedDB</span> → <span>UI Views</span> </div> <pre> tab-harbor/ βββ apps/ (background, popup, dashboard, recovery) βββ core/ (domain, storage, journal, search, policies) βββ adapters/ (chromium, firefox, safari) βββ tests/ (unit, integration, fault-injection) </pre> </section> <section id="data"> <h2>5. Data Model</h2> <pre> TabRecord { id: UUID, browserTabId?: number, workspaceId: UUID, url: string, title: string, faviconUrl?: string, state: "live" | "sleeping" | "archived" | "trash", pinned: boolean, protected: boolean, audible: boolean, createdAt: timestamp, lastSeenAt: timestamp, revision: number } JournalEvent { sequence: integer, type: string, payload: JSON, timestamp: number } Snapshot { id: UUID, sequenceThrough: integer, manifest: JSON, checksum: string } </pre> </section> <section id="recovery"> <h2>6. Recovery & Transactional Integrity</h2> <div class="callout good"> <strong>Core Invariant:</strong> A live tab is never closed until its archive record is safely committed to IndexedDB storage. </div> <ol> <li><strong>Pre-operation:</strong> Take state snapshot before any bulk action.</li> <li><strong>Persist:</strong> Write archive records with unique <code>operationId</code>.</li> <li><strong>Execute:</strong> Close live tabs in small, controlled batches.</li> <li><strong>Resume:</strong> Replay journal events on failure; auto-detect uncompleted jobs.</li> </ol> </section> <section id="platforms"> <h2>7. Platform Compatibility Matrix</h2> <table> <thead><tr><th>Platform</th><th>Support Level</th><th>Session Capture</th><th>Sleep API</th></tr></thead> <tbody> <tr><td>Chrome / Edge / Chromium</td><td class="yes">Full</td><td class="yes">Yes</td><td class="yes">Yes</td></tr> <tr><td>Firefox Desktop</td><td class="yes">Full</td><td class="yes">Yes</td><td class="yes">Yes</td></tr> <tr><td>Safari macOS</td><td class="partial">Port Required</td><td class="partial">Capability Tested</td><td class="partial">Version Dependent</td></tr> <tr><td>Chrome Android</td><td class="no">Unsupported</td><td class="no">No</td><td class="no">No Extension Engine</td></tr> </tbody> </table> </section> </main> </body> </html>
A system prompt was added to support web rendering
