Design a fully working, production-grade inline Context Selection feature inside the existing Superfuel Workflow page (dark theme). The page must match the screenshot exactly: left sidebar, a header with the workflow title “Add Competitor Keywords to the Bullet Points,” and a numbered vertical list of workflow steps. Add a fully functional Select Context button on Step 1 (“Get ASIN from Context”) that expands an inline Context Selection Panel beneath Step 1 (not a separate page or full-screen drawer). The panel must support three tabs: Manual Input, Search & Filters, Saved Contexts. Use the Superfuel x shadcn style: Inter font, 8px grid, dark palette (background #0B0C0F, panel #131417, borders #2B2C2F, text #E6E6E6, secondary text #A0A3A8, accent #2563EB), 8px radii, subtle shadows, and 150ms ease motion. All copy must match the tone: concise, factual, and technical.

Behavioral requirements (must be implemented in the prototype):
• Clicking Select Context expands the inline panel with a slide-down animation and traps focus inside. • The panel contains three tabs: Manual Input, Search & Filters, Saved Contexts. State must persist between tab switches (local temp state). • Manual Input: multiline textarea accepts comma/space/newline separated ASINs or CSV upload. Clicking Parse & Preview validates ASINs with regex [A-Z0-9]{10}, deduplicates, and calls a mocked endpoint POST /api/products/validate-asins which returns valid/invalid lists and sample product details. The preview shows first 50 products in a scrollable grid of cards (image 64x64, title 2 lines, ASIN monospace, metric chips Sales(30d)/CVR/AdClicks). Each card has checkbox for include/exclude. Provide Select All / Deselect All. If valid count > 50 show “Preview shows first 50 of N valid products” and a “Select all matching (N)” toggle. • Search & Filters: a command-style search input (debounced 300ms) calls GET /api/products/search?q= and renders dropdown suggestions; allow picking multiple results. Provide Quick Filter chips: Top 10% by Sales (30d), Bottom 5% CVR (30d), Sales = 0 (30d); clicking a chip calls POST /api/products/preview-by-filter and returns count + sample. Provide a compact Custom Filter Builder (Metric, Condition, Value, Time range) allowing multiple rows with AND/OR; “Preview Matching Products” button calls preview endpoint. • Saved Contexts: GET /api/contexts returns saved contexts. Each card shows name, count, last used, thumbnail cluster and actions Apply/Edit/Delete. Applying closes panel and updates Step 1 subtitle. • Footer inside panel: sticky summary left (“Selected: X products” or “All matching — N products”) and right: Save as Context checkbox + name input (when checked), Cancel, and Apply Selection CTA. • Safety: if selected count > 500 show inline soft warning. If > 5,000 require modal that asks user to type CONFIRM before Apply continues. • On Apply Selection: if preview-only, POST /api/workflows/:id/apply-context with explicit ASIN list; if all-matching, send filterDef and estimatedCount. Panel collapses and Step 1 subtitle updates to: e.g., “Context: 142 products selected (Saved as ‘Top Sellers 30D’)”. Show toast success. • Accessibility: keyboard navigation, ESC to close, ARIA live region announces parse/preview counts, focus management, and visible focus ring (#2563EB). • All endpoints are mocked in the prototype with example JSON provided below. Provide skeleton loading states, invalid ASIN UI, CSV upload errors, and “no matches” states.

Screens to generate and wire:
1. Workflow page default (Select Context button visible)
2. Panel expanded (Search & Filters default or Saved Contexts if user has saved)
3. Manual Input pre-parse and post-parse preview state (valid/invalid details)
4. Search & Filters: quick chip preview and custom builder preview
5. Saved Contexts list and empty states
6. Product preview grid with selection interactions
7. Sticky footer normal / soft warning / hard confirmation modal
8. After apply: Step 1 collapsed showing updated subtitle + edit icon
9. Error states: CSV missing ASIN, network timeout, zero matches

Prototype must be interactive: expand/collapse, tab switching, textarea parsing, CSV upload simulation, search suggestions, preview card selection, select-all toggle, save context flow, safety modal, apply selection (mocked API call), and success toast. Add keyboard flows and ARIA attributes. Use realistic sample data for ~50 products. Export generated screens and provide a shareable prototype link.

⸻

2) Mock API responses & sample data (copy into your prototype mocking layer)

Use this JSON for endpoints. Keep it locally as /mock-data/products.json and wire the endpoints to return appropriate parts.

sample products.json (50 items, truncated example for brevity; include more in implementation): [
{"asin":"B08PP5MSVB","title":"Runner Pro Shoe - Blue","image":"https://via.placeholder.com/64","metrics":{"sales_30":1423,"cvr_30":0.18,"clicks_30":921}},
{"asin":"B09XYZ1234","title":"Trail Grip Shoe - Black","image":"https://via.placeholder.com/64","metrics":{"sales_30":543,"cvr_30":0.12,"clicks_30":320}},
{"asin":"B07ABC9876","title":"Daily Comfort Sneaker","image":"https://via.placeholder.com/64","metrics":{"sales_30":12,"cvr_30":0.02,"clicks_30":4}},
...
]POST /api/products/validate-asins request: { asins: ["B08PP5MSVB","B09XYZ1234",...] }
response:{ "valid": [{"asin":"B08PP5MSVB","title":"Runner Pro Shoe - Blue","image":"...","metrics":{...}}, ...],
"invalid": [{"asin":"B000XXX","reason":"Malformed ASIN"}, {"asin":"B09NOTINCAT","reason":"Not in your catalog"}],
"total_valid_count": 1320
}GET /api/products/search?q=shoe&page=1
response:{ "total": 234, "sample": [ {asin, title, image, metrics}, ... ] }POST /api/products/preview-by-filter request: { filterDef: { rules:[{metric:"sales", op:"top_percent", value:10, time:30}], logic:"AND" } }
response:GET /api/contexts[{ "id":"CTX_1","name":"Top Sellers 30D","count":423,"updated":"2025-10-12","thumbs":["...","...","..."], "type":"filter","payload":{...} }]POST /api/workflows/WF_1/apply-context request either:
• preview-only: { type:"manual", asins:[...], count: N }
• filter: { type:"filter", filterDef:{...}, estimatedCount: N }
response: { status:"ok", appliedCount: N }

⸻

3) Next.js + shadcn prototype scaffold (quick dev plan)

Files & components to implement (summary):
• /pages/workflow/[id].tsx — renders existing workflow page, steps, and Select Context button.
• /components/ContextPanel/ContextPanel.tsx — the inline panel and tab manager.
• /components/ContextPanel/ManualTab.tsx — textarea, CSV upload, parse logic (client chunking), preview grid.
• /components/ContextPanel/FilterTab.tsx — search, quick chips, custom builder, preview call.
• /components/ContextPanel/SavedTab.tsx — list and apply behavior.
• /components/ProductCard.tsx — preview card states (selected, hover, disabled).
• /lib/mockApi.ts — simple mocked endpoints using local JSON and timeouts to simulate network.
• /styles/theme.ts — tokens for the dark palette and shadcn integration.

Important implementation notes:
• Use React Query to drive mock API calls and handle loading/error states.
• For CSV parsing, use PapaParse and chunk into 100 ASIN groups for validation.
• For “Select all matching,” do not fetch all ASINs — send only filterDef to server on apply.
• Use local state to store temporary selection; on Apply, clear temp state and update workflow step metadata.
• Implement the safety modal logic on the client before calling apply API.

Mock server behavior:
• For preview endpoints, return sample of up to 50 products and total estimating the real count.
• For validate-asins, return valid and invalid lists, with total_valid_count representing full size (simulate uploaded large lists).

Deployment:
• Run locally: npm run dev. Provide README with commands.
• Include a static JSON file with 50–200 products for demo.

⸻

4) Figma frames + wiring map (for DeepSite → Figma handoff)

Frame names:
• WF_SelectContext_Default
• WF_SelectContext_Panel_Open
• WF_Manual_PreParse
• WF_Manual_PostParse
• WF_Filter_Chips
• WF_Filter_CustomBuilder
• WF_SavedContexts_Empty
• WF_SavedContexts_List
• WF_Preview_Grid
• WF_Footer_Normal
• WF_Footer_Warning
• WF_Modal_SoftConfirm
• WF_Modal_HardConfirm
• WF_Applied_Summary

Component naming:
• SC.Step.Row / SC.Button.SelectContext / SC.Panel.Header / SC.Tabs / SC.Tab.Manual / SC.Card.ProductPreview / SC.Footer.SelectionBar / SC.Modal.Confirm

Prototype wiring:
• SelectContext button → animate open WF_SelectContext_Panel_Open
• Tab switches → reveal corresponding frames
• Parse → transition to WF_Manual_PostParse state (mocked)
• Quick chip click → WF_Filter_Chips → show WF_Preview_Grid
• Click Apply → run modal if thresholds, then collapse to WF_Applied_Summary

Include micro-interactions: hover lifts, focus ring outline, toast messages.

⸻

5) Acceptance Criteria & QA checklist

Critical behaviors to verify in prototype:
• Clicking Select Context expands inline panel (animation, focus trap).
• Tab switching preserves input state.
• Manual parse validates ASINs, dedupes, lists invalid with reasons.
• Preview grid shows up to 50 items, checkboxes toggle individually and Select All works.
• Search dropdown returns suggestions and selecting them marks preview selection.
• Quick filter chips call preview endpoint and display sample + total.
• Select All Matching toggle sets selection scope and shows warning for >500.
• Save as Context works (mock POST), saved contexts appear in Saved tab.
• Apply Selection either sends asins or filterDef correctly and collapses panel.
• Safety modals show soft/hard confirmations at correct thresholds and block apply until confirmed.
• Keyboard navigation and ARIA live region announce counts.
• Edge cases: CSV missing ASIN, network timeout, no matches, >10k ASIN upload handled.

Testing flows:
• Manual small list (5 ASINs) → parse → preview → apply.
• Manu

README.md

@@ -1,10 +1,13 @@
 ---
 title: Context Selector Pro Flow
-emoji: 🌖
-colorFrom: pink
-colorTo: pink
+colorFrom: blue
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,291 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Superfuel | Add Competitor Keywords Workflow</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-[#0B0C0F] text-[#E6E6E6] font-inter">
+    <div class="flex h-screen">
+        <!-- Left Sidebar -->
+        <div class="w-64 bg-[#131417] border-r border-[#2B2C2F] p-4">
+            <div class="flex items-center mb-8">
+                <i data-feather="zap" class="text-[#2563EB] mr-2"></i>
+                <h2 class="font-semibold">Superfuel</h2>
+            </div>
+            <nav>
+                <ul class="space-y-2">
+                    <li class="flex items-center p-2 rounded hover:bg-[#1E1F23]">
+                        <i data-feather="home" class="w-4 h-4 mr-2 text-[#A0A3A8]"></i>
+                        <span>Dashboard</span>
+                    </li>
+                    <li class="flex items-center p-2 rounded bg-[#1E1F23]">
+                        <i data-feather="layers" class="w-4 h-4 mr-2 text-[#2563EB]"></i>
+                        <span class="font-medium">Workflows</span>
+                    </li>
+                    <li class="flex items-center p-2 rounded hover:bg-[#1E1F23]">
+                        <i data-feather="database" class="w-4 h-4 mr-2 text-[#A0A3A8]"></i>
+                        <span>Data Sources</span>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex-1 overflow-auto">
+            <header class="border-b border-[#2B2C2F] p-4">
+                <h1 class="text-xl font-semibold">Add Competitor Keywords to the Bullet Points</h1>
+            </header>
+
+            <main class="p-6 max-w-4xl mx-auto">
+                <div class="space-y-6">
+                    <!-- Step 1 -->
+                    <div class="bg-[#131417] rounded-lg border border-[#2B2C2F] overflow-hidden">
+                        <div class="p-4 flex items-start">
+                            <div class="bg-[#2563EB] text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div>
+                            <div class="flex-1">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <h3 class="font-medium">Get ASIN from Context</h3>
+                                        <p class="text-sm text-[#A0A3A8] mt-1">Context: Not selected</p>
+                                    </div>
+                                    <button id="selectContextBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 ease-in-out">
+                                        Select Context
+                                    </button>
+                                </div>
+
+                                <!-- Context Selection Panel (Initially hidden) -->
+                                <div id="contextPanel" class="mt-4 hidden">
+                                    <div class="bg-[#1A1C21] rounded-lg border border-[#2B2C2F] overflow-hidden">
+                                        <!-- Tabs -->
+                                        <div class="flex border-b border-[#2B2C2F]">
+                                            <button data-tab="manual" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-[#22242A] active-tab">
+                                                Manual Input
+                                            </button>
+                                            <button data-tab="search" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-[#22242A]">
+                                                Search & Filters
+                                            </button>
+                                            <button data-tab="saved" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-[#22242A]">
+                                                Saved Contexts
+                                            </button>
+                                        </div>
+
+                                        <!-- Tab Content -->
+                                        <div class="p-4">
+                                            <!-- Manual Input Tab -->
+                                            <div id="manualTab" class="tab-content">
+                                                <div class="space-y-4">
+                                                    <div>
+                                                        <label class="block text-sm font-medium mb-1">Enter ASINs (comma, space, or newline separated)</label>
+                                                        <textarea id="asinInput" class="w-full bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-2 text-sm h-32" placeholder="B08PP5MSVB, B09XYZ1234..."></textarea>
+                                                    </div>
+                                                    <div class="flex items-center">
+                                                        <span class="text-sm text-[#A0A3A8]">or</span>
+                                                        <button class="ml-2 text-sm text-[#2563EB] hover:underline">Upload CSV file</button>
+                                                    </div>
+                                                    <button id="parseBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium">
+                                                        Parse & Preview
+                                                    </button>
+                                                </div>
+
+                                                <!-- Preview Section (Initially hidden) -->
+                                                <div id="previewSection" class="mt-4 hidden">
+                                                    <div class="flex justify-between items-center mb-3">
+                                                        <h4 class="font-medium">Preview (50 of <span id="totalValidCount">0</span> valid products)</h4>
+                                                        <div class="flex items-center space-x-2">
+                                                            <button id="selectAllBtn" class="text-sm text-[#2563EB] hover:underline">Select All</button>
+                                                            <button id="deselectAllBtn" class="text-sm text-[#2563EB] hover:underline">Deselect All</button>
+                                                        </div>
+                                                    </div>
+                                                    
+                                                    <div id="previewGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-96 overflow-y-auto">
+                                                        <!-- Product cards will be inserted here -->
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Search & Filters Tab (Initially hidden) -->
+                                            <div id="searchTab" class="tab-content hidden">
+                                                <div class="space-y-4">
+                                                    <div>
+                                                        <label class="block text-sm font-medium mb-1">Search products</label>
+                                                        <div class="relative">
+                                                            <input type="text" class="w-full bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-2 text-sm" placeholder="Search by title, brand, or ASIN...">
+                                                            <i data-feather="search" class="absolute right-2 top-2.5 text-[#A0A3A8] w-4 h-4"></i>
+                                                        </div>
+                                                    </div>
+                                                    
+                                                    <div>
+                                                        <h4 class="text-sm font-medium mb-2">Quick Filters</h4>
+                                                        <div class="flex flex-wrap gap-2">
+                                                            <button class="chip-btn bg-[#1E1F23] hover:bg-[#22242A] px-3 py-1 rounded-full text-sm border border-[#2B2C2F]">
+                                                                Top 10% by Sales (30d)
+                                                            </button>
+                                                            <button class="chip-btn bg-[#1E1F23] hover:bg-[#22242A] px-3 py-1 rounded-full text-sm border border-[#2B2C2F]">
+                                                                Bottom 5% CVR (30d)
+                                                            </button>
+                                                            <button class="chip-btn bg-[#1E1F23] hover:bg-[#22242A] px-3 py-1 rounded-full text-sm border border-[#2B2C2F]">
+                                                                Sales = 0 (30d)
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    
+                                                    <div>
+                                                        <h4 class="text-sm font-medium mb-2">Custom Filters</h4>
+                                                        <div class="bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-3 space-y-3">
+                                                            <div class="flex items-center space-x-2">
+                                                                <select class="bg-[#131417] border border-[#2B2C2F] rounded-md p-1.5 text-sm flex-1">
+                                                                    <option>Sales (30d)</option>
+                                                                    <option>CVR (30d)</option>
+                                                                    <option>Ad Clicks (30d)</option>
+                                                                </select>
+                                                                <select class="bg-[#131417] border border-[#2B2C2F] rounded-md p-1.5 text-sm w-24">
+                                                                    <option>=</option>
+                                                                    <option>></option>
+                                                                    <option><</option>
+                                                                    <option>Top %</option>
+                                                                    <option>Bottom %</option>
+                                                                </select>
+                                                                <input type="text" class="bg-[#131417] border border-[#2B2C2F] rounded-md p-1.5 text-sm w-16">
+                                                                <button class="text-[#A0A3A8] hover:text-[#E6E6E6]">
+                                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                                                </button>
+                                                            </div>
+                                                            <button class="text-sm text-[#2563EB] hover:underline flex items-center">
+                                                                <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Condition
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    
+                                                    <button class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium mt-2">
+                                                        Preview Matching Products
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                                            <!-- Saved Contexts Tab (Initially hidden) -->
+                                            <div id="savedTab" class="tab-content hidden">
+                                                <div class="space-y-3">
+                                                    <p class="text-sm text-[#A0A3A8]">No saved contexts yet. Create one by saving a selection.</p>
+                                                    
+                                                    <!-- Example saved context card -->
+                                                    <div class="bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-3 hidden">
+                                                        <div class="flex justify-between">
+                                                            <div>
+                                                                <h4 class="font-medium">Top Sellers 30D</h4>
+                                                                <p class="text-sm text-[#A0A3A8]">423 products • Last used Oct 12, 2025</p>
+                                                            </div>
+                                                            <div class="flex space-x-2">
+                                                                <button class="text-[#A0A3A8] hover:text-[#E6E6E6]">
+                                                                    <i data-feather="edit-2" class="w-4 h-4"></i>
+                                                                </button>
+                                                                <button class="text-[#A0A3A8] hover:text-[#E6E6E6]">
+                                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                        <div class="flex mt-2 space-x-1">
+                                                            <div class="w-8 h-8 bg-[#2B2C2F] rounded"></div>
+                                                            <div class="w-8 h-8 bg-[#2B2C2F] rounded"></div>
+                                                            <div class="w-8 h-8 bg-[#2B2C2F] rounded"></div>
+                                                        </div>
+                                                        <button class="mt-3 w-full bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium">
+                                                            Apply
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Footer -->
+                                        <div class="bg-[#1A1C21] border-t border-[#2B2C2F] p-3 sticky bottom-0">
+                                            <div class="flex justify-between items-center">
+                                                <div class="text-sm">
+                                                    <span id="selectedCountText">Selected: 0 products</span>
+                                                </div>
+                                                <div class="flex items-center space-x-3">
+                                                    <div class="flex items-center">
+                                                        <input type="checkbox" id="saveContextCheckbox" class="mr-2">
+                                                        <label for="saveContextCheckbox" class="text-sm">Save as</label>
+                                                        <input type="text" id="contextNameInput" class="ml-2 bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-1 text-sm w-40 hidden">
+                                                    </div>
+                                                    <button class="text-sm px-3 py-1.5 rounded-md border border-[#2B2C2F] hover:bg-[#22242A]">
+                                                        Cancel
+                                                    </button>
+                                                    <button id="applySelectionBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium">
+                                                        Apply Selection
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Step 2 -->
+                    <div class="bg-[#131417] rounded-lg border border-[#2B2C2F]">
+                        <div class="p-4 flex items-start">
+                            <div class="bg-[#2B2C2F] text-[#A0A3A8] rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div>
+                            <div>
+                                <h3 class="font-medium">Extract competitor bullet points</h3>
+                                <p class="text-sm text-[#A0A3A8] mt-1">Configure extraction settings</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Step 3 -->
+                    <div class="bg-[#131417] rounded-lg border border-[#2B2C2F]">
+                        <div class="p-4 flex items-start">
+                            <div class="bg-[#2B2C2F] text-[#A0A3A8] rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div>
+                            <div>
+                                <h3 class="font-medium">Add keywords to your bullet points</h3>
+                                <p class="text-sm text-[#A0A3A8] mt-1">Select target ASINs and configure insertion</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <!-- Toast Notification (Hidden by default) -->
+    <div id="toast" class="fixed bottom-4 right-4 bg-[#131417] border border-[#2B2C2F] rounded-md p-3 shadow-lg hidden">
+        <div class="flex items-center">
+            <i data-feather="check-circle" class="text-green-500 mr-2"></i>
+            <span id="toastMessage">Context applied successfully</span>
+        </div>
+    </div>
+
+    <!-- Confirmation Modal (Hidden by default) -->
+    <div id="confirmModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-[#131417] rounded-lg border border-[#2B2C2F] p-6 max-w-md w-full">
+            <h3 class="font-medium text-lg mb-3">Confirm Large Selection</h3>
+            <p class="text-sm text-[#A0A3A8] mb-4">You're about to apply a selection of <span id="modalCount">5,000</span> products. This may take a while to process.</p>
+            <div class="mb-4">
+                <label class="block text-sm font-medium mb-1">Type "CONFIRM" to continue</label>
+                <input type="text" id="confirmInput" class="w-full bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-2 text-sm">
+            </div>
+            <div class="flex justify-end space-x-3">
+                <button id="cancelConfirmBtn" class="text-sm px-3 py-1.5 rounded-md border border-[#2B2C2F] hover:bg-[#22242A]">
+                    Cancel
+                </button>
+                <button id="proceedConfirmBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium disabled:opacity-50" disabled>
+                    Proceed
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,307 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Mock product data
+    const mockProducts = [
+        {"asin":"B08PP5MSVB","title":"Runner Pro Shoe - Blue","image":"https://via.placeholder.com/64","metrics":{"sales_30":1423,"cvr_30":0.18,"clicks_30":921}},
+        {"asin":"B09XYZ1234","title":"Trail Grip Shoe - Black","image":"https://via.placeholder.com/64","metrics":{"sales_30":543,"cvr_30":0.12,"clicks_30":320}},
+        {"asin":"B07ABC9876","title":"Daily Comfort Sneaker","image":"https://via.placeholder.com/64","metrics":{"sales_30":12,"cvr_30":0.02,"clicks_30":4}},
+        {"asin":"B0A1B2C3D4","title":"Performance Running Shorts","image":"https://via.placeholder.com/64","metrics":{"sales_30":876,"cvr_30":0.15,"clicks_30":421}},
+        {"asin":"B0D5E6F7G8","title":"Athletic Compression Socks","image":"https://via.placeholder.com/64","metrics":{"sales_30":321,"cvr_30":0.08,"clicks_30":154}},
+        {"asin":"B0H9I8J7K6","title":"Yoga Mat - Extra Thick","image":"https://via.placeholder.com/64","metrics":{"sales_30":654,"cvr_30":0.22,"clicks_30":298}},
+        {"asin":"B0L1M2N3O4","title":"Adjustable Dumbbell Set","image":"https://via.placeholder.com/64","metrics":{"sales_30":432,"cvr_30":0.14,"clicks_30":187}},
+        {"asin":"B0P5Q6R7S8","title":"Foam Roller - High Density","image":"https://via.placeholder.com/64","metrics":{"sales_30":189,"cvr_30":0.07,"clicks_30":92}},
+        {"asin":"B0T9U8V7W6","title":"Resistance Bands Set","image":"https://via.placeholder.com/64","metrics":{"sales_30":567,"cvr_30":0.19,"clicks_30":301}},
+        {"asin":"B0X1Y2Z3A4","title":"Jump Rope - Weighted","image":"https://via.placeholder.com/64","metrics":{"sales_30":234,"cvr_30":0.11,"clicks_30":123}}
+    ];
+
+    // DOM Elements
+    const selectContextBtn = document.getElementById('selectContextBtn');
+    const contextPanel = document.getElementById('contextPanel');
+    const parseBtn = document.getElementById('parseBtn');
+    const asinInput = document.getElementById('asinInput');
+    const previewSection = document.getElementById('previewSection');
+    const previewGrid = document.getElementById('previewGrid');
+    const totalValidCount = document.getElementById('totalValidCount');
+    const selectAllBtn = document.getElementById('selectAllBtn');
+    const deselectAllBtn = document.getElementById('deselectAllBtn');
+    const selectedCountText = document.getElementById('selectedCountText');
+    const applySelectionBtn = document.getElementById('applySelectionBtn');
+    const saveContextCheckbox = document.getElementById('saveContextCheckbox');
+    const contextNameInput = document.getElementById('contextNameInput');
+    const tabButtons = document.querySelectorAll('.tab-btn');
+    const tabContents = document.querySelectorAll('.tab-content');
+    const toast = document.getElementById('toast');
+    const confirmModal = document.getElementById('confirmModal');
+    const modalCount = document.getElementById('modalCount');
+    const confirmInput = document.getElementById('confirmInput');
+    const cancelConfirmBtn = document.getElementById('cancelConfirmBtn');
+    const proceedConfirmBtn = document.getElementById('proceedConfirmBtn');
+
+    // State
+    let selectedProducts = [];
+    let currentTab = 'manual';
+
+    // Event Listeners
+    selectContextBtn.addEventListener('click', toggleContextPanel);
+    parseBtn.addEventListener('click', parseAsins);
+    selectAllBtn.addEventListener('click', selectAllProducts);
+    deselectAllBtn.addEventListener('click', deselectAllProducts);
+    applySelectionBtn.addEventListener('click', applySelection);
+    saveContextCheckbox.addEventListener('change', toggleSaveContextInput);
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => switchTab(button.dataset.tab));
+    });
+
+    confirmInput.addEventListener('input', checkConfirmation);
+    cancelConfirmBtn.addEventListener('click', closeConfirmModal);
+    proceedConfirmBtn.addEventListener('click', confirmAndApply);
+
+    // Functions
+    function toggleContextPanel() {
+        contextPanel.classList.toggle('hidden');
+        if (!contextPanel.classList.contains('hidden')) {
+            // Focus first input when panel opens
+            if (currentTab === 'manual') {
+                asinInput.focus();
+            }
+        }
+    }
+
+    function switchTab(tabName) {
+        currentTab = tabName;
+        
+        // Update tab button states
+        tabButtons.forEach(button => {
+            if (button.dataset.tab === tabName) {
+                button.classList.add('active-tab');
+            } else {
+                button.classList.remove('active-tab');
+            }
+        });
+        
+        // Show/hide tab contents
+        tabContents.forEach(content => {
+            if (content.id === `${tabName}Tab`) {
+                content.classList.remove('hidden');
+            } else {
+                content.classList.add('hidden');
+            }
+        });
+    }
+
+    function parseAsins() {
+        const asinsText = asinInput.value.trim();
+        
+        if (!asinsText) {
+            return;
+        }
+        
+        // Simulate API call
+        setTimeout(() => {
+            // Validate ASINs (mock)
+            const validProducts = mockProducts.slice(0, 10); // Just show first 10 for demo
+            const totalCount = 142; // Mock total count
+            
+            // Update UI
+            renderProductPreview(validProducts);
+            totalValidCount.textContent = totalCount;
+            previewSection.classList.remove('hidden');
+            
+            // Update selected count
+            updateSelectedCount();
+        }, 300);
+    }
+
+    function renderProductPreview(products) {
+        previewGrid.innerHTML = '';
+        
+        products.forEach(product => {
+            const productCard = document.createElement('div');
+            productCard.className = 'product-card bg-[#1E1F23] rounded-md p-3 cursor-pointer';
+            productCard.dataset.asin = product.asin;
+            
+            productCard.innerHTML = `
+                <div class="flex">
+                    <div class="flex-shrink-0 mr-3">
+                        <img src="${product.image}" alt="${product.title}" class="w-16 h-16 object-cover rounded">
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <h4 class="text-sm font-medium truncate-2-lines" title="${product.title}">${product.title}</h4>
+                        <div class="flex items-center mt-1">
+                            <span class="bg-[#131417] text-xs px-1.5 py-0.5 rounded font-mono">${product.asin}</span>
+                        </div>
+                        <div class="flex flex-wrap gap-1.5 mt-2">
+                            <span class="bg-[#1A1C21] text-xs px-1.5 py-0.5 rounded">Sales: ${product.metrics.sales_30}</span>
+                            <span class="bg-[#1A1C21] text-xs px-1.5 py-0.5 rounded">CVR: ${(product.metrics.cvr_30 * 100).toFixed(1)}%</span>
+                            <span class="bg-[#1A1C21] text-xs px-1.5 py-0.5 rounded">Clicks: ${product.metrics.clicks_30}</span>
+                        </div>
+                    </div>
+                    <div class="ml-2 flex-shrink-0">
+                        <input type="checkbox" class="product-checkbox" data-asin="${product.asin}">
+                    </div>
+                </div>
+            `;
+            
+            // Add event listeners
+            const checkbox = productCard.querySelector('.product-checkbox');
+            checkbox.addEventListener('change', () => toggleProductSelection(product.asin, checkbox.checked));
+            
+            productCard.addEventListener('click', (e) => {
+                if (e.target.tagName !== 'INPUT') {
+                    checkbox.checked = !checkbox.checked;
+                    toggleProductSelection(product.asin, checkbox.checked);
+                }
+            });
+            
+            previewGrid.appendChild(productCard);
+        });
+    }
+
+    function toggleProductSelection(asin, isSelected) {
+        if (isSelected && !selectedProducts.includes(asin)) {
+            selectedProducts.push(asin);
+        } else if (!isSelected) {
+            selectedProducts = selectedProducts.filter(a => a !== asin);
+        }
+        
+        // Update UI
+        updateSelectedCount();
+        highlightSelectedCards();
+    }
+
+    function selectAllProducts() {
+        const checkboxes = document.querySelectorAll('.product-checkbox');
+        checkboxes.forEach(checkbox => {
+            checkbox.checked = true;
+            if (!selectedProducts.includes(checkbox.dataset.asin)) {
+                selectedProducts.push(checkbox.dataset.asin);
+            }
+        });
+        
+        updateSelectedCount();
+        highlightSelectedCards();
+    }
+
+    function deselectAllProducts() {
+        const checkboxes = document.querySelectorAll('.product-checkbox');
+        checkboxes.forEach(checkbox => {
+            checkbox.checked = false;
+        });
+        
+        selectedProducts = [];
+        updateSelectedCount();
+        highlightSelectedCards();
+    }
+
+    function highlightSelectedCards() {
+        const productCards = document.querySelectorAll('.product-card');
+        productCards.forEach(card => {
+            if (selectedProducts.includes(card.dataset.asin)) {
+                card.classList.add('selected');
+            } else {
+                card.classList.remove('selected');
+            }
+        });
+    }
+
+    function updateSelectedCount() {
+        const count = selectedProducts.length;
+        selectedCountText.textContent = `Selected: ${count} product${count !== 1 ? 's' : ''}`;
+        
+        // Show warning if count is large
+        if (count > 500) {
+            selectedCountText.innerHTML += ` <span class="text-yellow-400">(Large selection)</span>`;
+        }
+    }
+
+    function toggleSaveContextInput() {
+        if (saveContextCheckbox.checked) {
+            contextNameInput.classList.remove('hidden');
+            contextNameInput.focus();
+        } else {
+            contextNameInput.classList.add('hidden');
+        }
+    }
+
+    function applySelection() {
+        const count = selectedProducts.length;
+        
+        if (count === 0) {
+            showToast('Please select at least one product');
+            return;
+        }
+        
+        if (count > 5000) {
+            showConfirmModal(count);
+            return;
+        }
+        
+        if (count > 500) {
+            // Soft warning - just proceed
+            proceedWithApply();
+        } else {
+            proceedWithApply();
+        }
+    }
+
+    function showConfirmModal(count) {
+        modalCount.textContent = count.toLocaleString();
+        confirmModal.classList.remove('hidden');
+        confirmInput.value = '';
+        proceedConfirmBtn.disabled = true;
+    }
+
+    function closeConfirmModal() {
+        confirmModal.classList.add('hidden');
+    }
+
+    function checkConfirmation() {
+        proceedConfirmBtn.disabled = confirmInput.value.trim().toUpperCase() !== 'CONFIRM';
+    }
+
+    function confirmAndApply() {
+        closeConfirmModal();
+        proceedWithApply();
+    }
+
+    function proceedWithApply() {
+        const contextName = saveContextCheckbox.checked ? contextNameInput.value.trim() : null;
+        
+        // Simulate API call
+        setTimeout(() => {
+            // Update step 1 subtitle
+            const subtitle = document.querySelector('#contextPanel + div p');
+            subtitle.textContent = `Context: ${selectedProducts.length} product${selectedProducts.length !== 1 ? 's' : ''} selected`;
+            if (contextName) {
+                subtitle.textContent += ` (Saved as "${contextName}")`;
+            }
+            
+            // Close panel
+            contextPanel.classList.add('hidden');
+            
+            // Show success toast
+            showToast('Context applied successfully');
+            
+            // Reset selection for next time
+            selectedProducts = [];
+            asinInput.value = '';
+            previewSection.classList.add('hidden');
+            saveContextCheckbox.checked = false;
+            contextNameInput.classList.add('hidden');
+            contextNameInput.value = '';
+        }, 500);
+    }
+
+    function showToast(message) {
+        const toastMessage = document.getElementById('toastMessage');
+        toastMessage.textContent = message;
+        toast.classList.remove('hidden');
+        
+        setTimeout(() => {
+            toast.classList.add('hidden');
+        }, 3000);
+    }
+
+    // Initialize
+    switchTab('manual');
+});

style.css

@@ -1,28 +1,91 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Animation for panel */
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#contextPanel {
+    animation: slideDown 150ms ease-out forwards;
+}
+
+/* Tab styling */
+.tab-btn {
+    transition: all 150ms ease;
+}
+
+.tab-btn.active-tab {
+    border-bottom-color: #2563EB;
+    color: #E6E6E6;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Product card styling */
+.product-card {
+    transition: all 150ms ease;
+    border: 1px solid #2B2C2F;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.product-card:hover {
+    border-color: #2563EB;
+    transform: translateY(-2px);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.product-card.selected {
+    border-color: #2563EB;
+    background-color: rgba(37, 99, 235, 0.08);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Chip buttons */
+.chip-btn {
+    transition: all 150ms ease;
 }
+
+.chip-btn:hover {
+    border-color: #2563EB;
+    color: #E6E6E6;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1E1F23;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #2B2C2F;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #3B3C3F;
+}
+
+/* Focus styles */
+button:focus, input:focus, textarea:focus, select:focus {
+    outline: 2px solid #2563EB;
+    outline-offset: 2px;
+}