<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BridgeContext</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="popup-container">
<header>
<div class="header-top-row">
<h1>BridgeContext</h1>
<div class="header-user-actions">
<!-- Cloud features removed for local-first focus -->
</div>
</div>
<div class="header-action-row">
<button id="popup-capture-btn" class="bridge-main-btn" style="flex: 1;">Bridge Context</button>
</div>
<div class="shuttle-tray">
<button class="web-shuttle-btn" data-target="gpt" title="Shuttle to ChatGPT">GPT</button>
<button class="web-shuttle-btn" data-target="claude" title="Shuttle to Claude">Claude</button>
<button class="web-shuttle-btn" data-target="gemini" title="Shuttle to Gemini">Gemini</button>
</div>
</header>
<div class="tabs">
<div class="tab active" data-tab="memory">My Memory</div>
</div>
<main id="tab-memory">
<!-- Search Bar -->
<div class="search-container">
<input type="text" id="search-input" class="search-input"
placeholder="🔍 Search contexts by name, description, or content..." autocomplete="off" />
<div id="search-results-count" class="search-results-count"></div>
</div>
<div class="section-title">Your Context Packs</div>
<div id="packs-list">
<!-- Packs will be loaded here -->
<div class="loading">Loading your memory...</div>
</div>
<button id="add-pack-btn" class="primary-btn">
<span>+</span> New Context Pack
</button>
<div class="portability-row">
<button id="export-btn" class="secondary-btn">Export</button>
<button id="import-btn" class="secondary-btn">Import</button>
<button id="redeem-btn" class="secondary-btn">Redeem</button>
</div>
<input type="file" id="import-file" style="display: none;" accept=".json">
</main>
<footer>
<div id="usage-stats" class="usage-stats">
<div class="stats-loading">Loading stats...</div>
</div>
<div class="footer-links">
<span class="version-tag">v1.5.0 (Local-First)</span>
</div>
</footer>
<!-- Context Pack Modal (Create/Edit) -->
<div id="pack-modal" class="modal-overlay" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3 id="pack-modal-title">New Context Pack</h3>
<button id="close-pack-modal" class="close-btn">✕</button>
</div>
<div class="modal-body">
<input type="text" id="pack-name-input" placeholder="Pack Name (e.g. My Coding Style)" class="input-field" />
<input type="text" id="pack-desc-input" placeholder="Description (e.g. For React projects)"
class="input-field" />
<!-- Tags Input -->
<div class="tags-input-container">
<div id="selected-tags" class="selected-tags"></div>
<input type="text" id="pack-tags-input" placeholder="Add tags (e.g. React, Python, Work)..."
class="input-field" autocomplete="off" />
<div id="tag-suggestions" class="tag-suggestions"></div>
</div>
<textarea id="pack-data-input" placeholder="Paste your context data here..." class="input-field"
style="height: 120px; resize: none; font-family: monospace; font-size: 11px;"></textarea>
<div style="display: flex; gap: 8px;">
<button id="save-pack-btn" class="primary-btn">Save Context</button>
<button id="delete-pack-btn" class="secondary-btn"
style="flex: 0 0 40px; border-color: #fecaca; color: #dc2626; display: none;">🗑️</button>
</div>
</div>
</div>
</div>
<!-- Toast Notification -->
<div id="toast" class="toast">Action Successful</div>
</div>
<script src="storage.js"></script>
<script src="analytics.js"></script>
<script src="popup.js"></script>
</body>
</html>
