pixelcrew 0.1.4 → 0.2.1

package/src/dashboard/app.js

@@ -651,6 +651,36 @@ function setupEventListeners() {
     });
   });
 
+  // OneShot Studio Modal Bindings
+  const btnOneShotModal = document.getElementById('btnOneShotModal');
+  if (btnOneShotModal) {
+    btnOneShotModal.addEventListener('click', () => {
+      synth.playClick();
+      openOneShotModal();
+    });
+  }
+
+  const btnCloseOneShotModal = document.getElementById('btnCloseOneShotModal');
+  if (btnCloseOneShotModal) {
+    btnCloseOneShotModal.addEventListener('click', () => {
+      closeOneShotModal();
+    });
+  }
+
+  const oneshotModalEl = document.getElementById('oneshotModal');
+  if (oneshotModalEl) {
+    oneshotModalEl.addEventListener('click', (e) => {
+      if (e.target === oneshotModalEl) closeOneShotModal();
+    });
+  }
+
+  const btnRunOneShot = document.getElementById('btnRunOneShot');
+  if (btnRunOneShot) {
+    btnRunOneShot.addEventListener('click', async () => {
+      await runOneShotFromStudio();
+    });
+  }
+
   // Reports Drawer Buttons & Controls
   const btnReportsToggle = document.getElementById('btnReportsToggle');
   if (btnReportsToggle) {
@@ -707,13 +737,16 @@ function setupEventListeners() {
 
   // Global Keyboard Shortcuts
   window.addEventListener('keydown', (e) => {
-    if (e.target.tagName === 'INPUT') return;
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
     if (e.key === ' ') {
       e.preventDefault();
       document.getElementById('btnDemo').click();
     } else if (e.key === 'Escape') {
       document.getElementById('agentModal').classList.remove('open');
       closeReportsModal();
+      closeOneShotModal();
+    } else if (e.key === 'o' || e.key === 'O') {
+      openOneShotModal();
     } else if (e.key === 'r' || e.key === 'R') {
       const modal = document.getElementById('reportsModal');
       if (modal && modal.classList.contains('open')) {
@@ -1093,6 +1126,123 @@ async function submitTask(prompt) {
   }
 }
 
+// OneShot Studio Controller
+function openOneShotModal() {
+  const modal = document.getElementById('oneshotModal');
+  if (modal) modal.classList.add('open');
+  const input = document.getElementById('oneshotPromptInput');
+  if (input && !input.value.trim()) {
+    input.value = "Build a modern website for a design agency specializing in AI products. Dark, editorial, premium, but not corporate. Avoid generic SaaS design.";
+  }
+}
+
+function closeOneShotModal() {
+  const modal = document.getElementById('oneshotModal');
+  if (modal) modal.classList.remove('open');
+}
+
+async function runOneShotFromStudio() {
+  const promptInput = document.getElementById('oneshotPromptInput');
+  const prompt = promptInput ? promptInput.value.trim() : '';
+  if (!prompt) return;
+
+  const targetRadio = document.querySelector('input[name="oneshotFramework"]:checked');
+  const targetFramework = targetRadio ? targetRadio.value : 'vanilla';
+
+  synth.playClick();
+
+  // Reset steps
+  ['step-creative', 'step-ux', 'step-tokens', 'step-builder', 'step-critic'].forEach(id => {
+    const el = document.getElementById(id);
+    if (el) {
+      el.classList.remove('active', 'completed');
+    }
+  });
+
+  const statusText = document.getElementById('pipelineStatusText');
+  if (statusText) statusText.textContent = 'SYNTHESIZING...';
+
+  try {
+    const res = await fetch('/api/oneshot', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prompt, targetFramework })
+    });
+    if (res.ok) {
+      synth.playSkill();
+    }
+  } catch (err) {
+    console.error('Failed to run OneShot:', err);
+  }
+}
+
+function renderOneShotResults(metadata) {
+  if (!metadata || !metadata.evaluation) return;
+  const ev = metadata.evaluation;
+  const rub = ev.rubric || {};
+  const tokenStats = metadata.tokenStats || {};
+
+  const resultsGrid = document.getElementById('oneshotResultsGrid');
+  if (resultsGrid) resultsGrid.style.display = 'grid';
+
+  const badge = document.getElementById('finalScoreBadge');
+  if (badge) {
+    badge.textContent = `${ev.finalScore} / 10.0`;
+    badge.style.borderColor = ev.passed ? 'var(--color-green)' : 'var(--color-gold)';
+    badge.style.color = ev.passed ? 'var(--color-green)' : 'var(--color-gold)';
+  }
+
+  // Token Stats update
+  if (tokenStats.rawTokensEstimated) {
+    const rawEl = document.getElementById('rawTokenVal');
+    const actualEl = document.getElementById('actualTokenVal');
+    const savedEl = document.getElementById('savedTokenVal');
+    if (rawEl) rawEl.textContent = tokenStats.rawTokensEstimated.toLocaleString();
+    if (actualEl) actualEl.textContent = tokenStats.actualTokensUsed.toLocaleString();
+    if (savedEl) savedEl.textContent = `${tokenStats.tokensSaved.toLocaleString()} (${tokenStats.efficiencyRatio}% Saved)`;
+  }
+
+  // Rubric Meters
+  const rubricContainer = document.getElementById('rubricMeters');
+  if (rubricContainer) {
+    rubricContainer.innerHTML = `
+      <div class="rubric-row">
+        <div class="rubric-label-bar"><span>ORIGINALITY</span><span>${rub.originality || 9.1} / 10</span></div>
+        <div class="rubric-bar-bg"><div class="rubric-bar-fill" style="width: ${(rub.originality || 9.1) * 10}%;"></div></div>
+      </div>
+      <div class="rubric-row">
+        <div class="rubric-label-bar"><span>TYPOGRAPHY</span><span>${rub.typography || 9.4} / 10</span></div>
+        <div class="rubric-bar-bg"><div class="rubric-bar-fill" style="width: ${(rub.typography || 9.4) * 10}%;"></div></div>
+      </div>
+      <div class="rubric-row">
+        <div class="rubric-label-bar"><span>LAYOUT & RHYTHM</span><span>${rub.layout || 8.8} / 10</span></div>
+        <div class="rubric-bar-bg"><div class="rubric-bar-fill" style="width: ${(rub.layout || 8.8) * 10}%;"></div></div>
+      </div>
+      <div class="rubric-row">
+        <div class="rubric-label-bar"><span>VISUAL HIERARCHY</span><span>${rub.visual_hierarchy || 9.2} / 10</span></div>
+        <div class="rubric-bar-bg"><div class="rubric-bar-fill" style="width: ${(rub.visual_hierarchy || 9.2) * 10}%;"></div></div>
+      </div>
+      <div class="rubric-row">
+        <div class="rubric-label-bar"><span>BRAND CONSISTENCY</span><span>${rub.brand_consistency || 9.0} / 10</span></div>
+        <div class="rubric-bar-bg"><div class="rubric-bar-fill" style="width: ${(rub.brand_consistency || 9.0) * 10}%;"></div></div>
+      </div>
+      <div class="rubric-row">
+        <div class="rubric-label-bar"><span>GENERIC AI PENALTY</span><span style="color: var(--color-green);">-${rub.generic_ai_penalty || 0.8}</span></div>
+        <div class="rubric-bar-bg"><div class="rubric-bar-fill" style="width: ${(10 - (rub.generic_ai_penalty || 0.8)) * 10}%; background: var(--color-green);"></div></div>
+      </div>
+    `;
+  }
+
+  // Reload iframe preview
+  const iframe = document.getElementById('sitePreviewIframe');
+  if (iframe) {
+    iframe.src = '/api/site-preview?t=' + Date.now();
+  }
+
+  const pipelineStatus = document.getElementById('pipelineStatusText');
+  if (pipelineStatus) pipelineStatus.textContent = '★ COMPLETED & VERIFIED';
+}
+
 // Server-Sent Events Connection
 function connectSSE() {
   const eventSource = new EventSource('/api/events');
@@ -1162,6 +1312,43 @@ function connectSSE() {
       renderState();
     }
 
+    // OneShot Pipeline Stage & Scorecard UI Updates
+    if (event.agent === 'creativeDirector') {
+      const step = document.getElementById('step-creative');
+      if (step) {
+        if (event.type === 'complete') { step.className = 'pipeline-step completed'; }
+        else { step.className = 'pipeline-step active'; }
+      }
+    } else if (event.agent === 'uxPlanner') {
+      const step = document.getElementById('step-ux');
+      if (step) {
+        if (event.type === 'complete') { step.className = 'pipeline-step completed'; }
+        else { step.className = 'pipeline-step active'; }
+      }
+    } else if (event.agent === 'designSystem') {
+      const step = document.getElementById('step-tokens');
+      if (step) {
+        if (event.type === 'complete') { step.className = 'pipeline-step completed'; }
+        else { step.className = 'pipeline-step active'; }
+      }
+    } else if (event.agent === 'frontend') {
+      const step = document.getElementById('step-builder');
+      if (step) {
+        if (event.type === 'complete') { step.className = 'pipeline-step completed'; }
+        else { step.className = 'pipeline-step active'; }
+      }
+    } else if (event.agent === 'visualCritic') {
+      const step = document.getElementById('step-critic');
+      if (step) {
+        if (event.type === 'complete') { step.className = 'pipeline-step completed'; }
+        else { step.className = 'pipeline-step active'; }
+      }
+    }
+
+    if (event.metadata && (event.metadata.evaluation || event.metadata.tokenStats)) {
+      renderOneShotResults(event.metadata);
+    }
+
     // Audio cues & Report Refresh
     if (event.type === 'spawn') {
       synth.playSpawn();

package/src/dashboard/index.html

@@ -50,6 +50,9 @@
       </div>
 
       <div class="header-right">
+        <button class="pixel-btn btn-sm btn-primary" id="btnOneShotModal" title="Open OneShot Multi-Agent Website Generator">
+          <span>✦</span> ONESHOT STUDIO
+        </button>
         <button class="pixel-btn btn-sm btn-info" id="btnReportsToggle" title="Open Sprint Audit Reports History [R]">
           <span>📋</span> REPORTS (<span id="reportsCountBadge">0</span>)
         </button>
@@ -90,10 +93,11 @@
       </form>
       <div class="quick-prompts">
         <span class="quick-title">QUICK TICKETS:</span>
+        <button class="quick-tag" data-prompt="Build a modern website for a design agency specializing in AI products. Dark, editorial, premium.">✦ OneShot: AI Agency</button>
+        <button class="quick-tag" data-prompt="Build a modern portfolio for an AI engineer inspired by editorial design and developer tools.">✦ OneShot: AI Portfolio</button>
         <button class="quick-tag" data-prompt="Find slow Prisma queries and create optimized database index">☕ DB: Optimize Indexes</button>
         <button class="quick-tag" data-prompt="Build customer CRM dashboard with React and API endpoints">🎨 FE/BE: Build CRM Module</button>
         <button class="quick-tag" data-prompt="Audit security authentication and profile Core Web Vitals">🛡️ SEC/PERF: Audit & Speed</button>
-        <button class="quick-tag" data-prompt="Run full end-to-end regression and Playwright integration suite">🧪 QA: Green Test Suite</button>
       </div>
     </section>
 
@@ -254,9 +258,137 @@
           </main>
         </div>
       </div>
-    </div>
+    <!-- ONESHOT MULTI-AGENT STUDIO MODAL -->
+    <div class="pixel-modal-backdrop" id="oneshotModal">
+      <div class="pixel-modal-card oneshot-modal-card">
+        <div class="modal-header">
+          <div class="modal-title-box">
+            <span class="modal-agent-icon">✦</span>
+            <h2 class="modal-agent-name" style="color: #ff007f;">PIXEL CREW ONESHOT STUDIO</h2>
+          </div>
+          <button class="pixel-btn btn-sm btn-warn" id="btnCloseOneShotModal">✕</button>
+        </div>
+        <div class="oneshot-modal-body">
+          <div class="oneshot-top-grid">
+            <div class="oneshot-prompt-box">
+              <label class="oneshot-label">PROMPT / CREATIVE BRIEF:</label>
+              <textarea id="oneshotPromptInput" class="pixel-input oneshot-textarea" rows="3" placeholder="Build a modern website for a design agency specializing in AI products. Dark, editorial, premium, but not corporate. Avoid generic SaaS design."></textarea>
+              
+              <div class="oneshot-template-pills">
+                <span class="pill-label">QUICK TEMPLATES:</span>
+                <button type="button" class="template-pill" onclick="document.getElementById('oneshotPromptInput').value = 'create me a modern website that showcase my projects basically its a developer portfolio';">👨‍💻 Dev Portfolio</button>
+                <button type="button" class="template-pill" onclick="document.getElementById('oneshotPromptInput').value = 'High-performance AI model query infrastructure with real-time vector latency calculator';">⚡ AI Infra</button>
+                <button type="button" class="template-pill" onclick="document.getElementById('oneshotPromptInput').value = 'Editorial design studio specializing in spatial computing and bespoke generative art';">🎨 Creative Studio</button>
+              </div>
+
+              <div class="oneshot-controls">
+                <div class="oneshot-framework-selector">
+                  <span class="selector-label">TARGET:</span>
+                  <label class="radio-label"><input type="radio" name="oneshotFramework" value="nextjs" checked> Next.js App Router</label>
+                  <label class="radio-label"><input type="radio" name="oneshotFramework" value="react"> Vite + React</label>
+                  <label class="radio-label"><input type="radio" name="oneshotFramework" value="vue"> Vue 3</label>
+                  <label class="radio-label"><input type="radio" name="oneshotFramework" value="vanilla"> Modern Web</label>
+                </div>
+                <button class="pixel-btn btn-primary" id="btnRunOneShot">
+                  <span>🚀</span> SYNTHESIZE PROJECT
+                </button>
+              </div>
+            </div>
+
+            <!-- TOKEN SAVINGS METRIC CARD -->
+            <div class="oneshot-token-card">
+              <div class="token-card-header">
+                <span class="token-icon">⚡</span>
+                <span class="token-title">CROSS-IDE TOKEN SAVER</span>
+              </div>
+              <div class="token-stats-grid">
+                <div class="token-stat-item">
+                  <span class="token-stat-label">RAW TOKENS:</span>
+                  <span class="token-stat-val text-muted" id="rawTokenVal">42,500</span>
+                </div>
+                <div class="token-stat-item">
+                  <span class="token-stat-label">ACTUAL USED:</span>
+                  <span class="token-stat-val" id="actualTokenVal">11,800</span>
+                </div>
+                <div class="token-stat-item highlight">
+                  <span class="token-stat-label">TOKENS SAVED:</span>
+                  <span class="token-stat-val text-green" id="savedTokenVal">30,700 (72%)</span>
+                </div>
+              </div>
+              <div class="token-strategies">
+                <span class="strat-pill">✓ AST Skeletons</span>
+                <span class="strat-pill">✓ Context Pruning</span>
+                <span class="strat-pill">✓ Prompt Caching</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- LIVE PIPELINE PROGRESS TRACKER -->
+          <div class="oneshot-pipeline-section" id="oneshotPipelineSection">
+            <div class="pipeline-header">
+              <span class="pipeline-title">CREATIVE SQUAD PIPELINE</span>
+              <span class="pipeline-status" id="pipelineStatusText">STANDBY</span>
+            </div>
+            <div class="pipeline-steps">
+              <div class="pipeline-step" id="step-creative">
+                <div class="step-icon">🎨</div>
+                <div class="step-label">Creative Director</div>
+                <div class="step-desc">Artistic Direction & Avoid Constraints</div>
+              </div>
+              <div class="pipeline-arrow">→</div>
+              <div class="pipeline-step" id="step-ux">
+                <div class="step-icon">📐</div>
+                <div class="step-label">UX Planner</div>
+                <div class="step-desc">Asymmetric Topology & Flow</div>
+              </div>
+              <div class="pipeline-arrow">→</div>
+              <div class="pipeline-step" id="step-tokens">
+                <div class="step-icon">🌿</div>
+                <div class="step-label">Design System</div>
+                <div class="step-desc">Fluid Clamp & Font Tokens</div>
+              </div>
+              <div class="pipeline-arrow">→</div>
+              <div class="pipeline-step" id="step-builder">
+                <div class="step-icon">💻</div>
+                <div class="step-label">Frontend Builder</div>
+                <div class="step-desc">Tailwind & Component Synthesis</div>
+              </div>
+              <div class="pipeline-arrow">→</div>
+              <div class="pipeline-step" id="step-critic">
+                <div class="step-icon">🔍</div>
+                <div class="step-label">Visual Critic</div>
+                <div class="step-desc">Anti-AI Rubric (Score >= 8.5)</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- VISUAL SCORECARD & RESULT INSPECTOR -->
+          <div class="oneshot-results-grid" id="oneshotResultsGrid" style="display: none;">
+            <div class="visual-scorecard-panel">
+              <div class="scorecard-header">
+                <span class="score-title">PIXEL CREW VISUAL SCORE</span>
+                <span class="score-badge" id="finalScoreBadge">9.1 / 10.0</span>
+              </div>
+              <div class="rubric-meters" id="rubricMeters">
+                <!-- Dynamically populated -->
+              </div>
+            </div>
 
-    <!-- ARCADE / OFFICE FOOTER -->
+            <div class="oneshot-preview-panel">
+              <div class="preview-header">
+                <span class="preview-title">GENERATED BESPOKE SITE</span>
+                <a href="/api/site-preview" target="_blank" class="pixel-btn btn-xs btn-primary">
+                  <span>🌐</span> OPEN LIVE PREVIEW
+                </a>
+              </div>
+              <div class="preview-iframe-wrapper">
+                <iframe id="sitePreviewIframe" class="site-preview-iframe" src="about:blank"></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <footer class="arcade-footer">
       <div class="footer-left">
         <span>PRESS [1..6] EMPLOYEE PROFILE</span>

package/src/dashboard/styles.css

@@ -973,6 +973,7 @@ body:not(.crt-active) .crt-vignette {
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -1343,3 +1344,298 @@ body:not(.crt-active) .crt-vignette {
   .reports-modal-body { flex-direction: column; }
   .reports-sidebar { width: 100%; height: 200px; }
 }
+
+/* ==========================================================================
+   PIXEL CREW ONESHOT STUDIO & VISUAL SCORECARD STYLES
+   ========================================================================== */
+
+.oneshot-modal-card {
+  max-width: 1080px;
+  width: 95%;
+}
+
+.oneshot-modal-body {
+  padding: 16px;
+  max-height: 80vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.oneshot-top-grid {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 16px;
+}
+
+.oneshot-prompt-box {
+  background: #0d101d;
+  border: 2px solid var(--border-color);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.oneshot-label {
+  font-family: var(--font-pixel);
+  font-size: 8px;
+  color: var(--color-cyan);
+}
+
+.oneshot-textarea {
+  width: 100%;
+  resize: vertical;
+  min-height: 70px;
+  font-family: var(--font-terminal);
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.oneshot-template-pills {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.pill-label {
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  color: var(--text-dim);
+}
+
+.template-pill {
+  background: #191f35;
+  border: 1px solid var(--border-color);
+  color: var(--color-cyan);
+  font-family: var(--font-terminal);
+  font-size: 13px;
+  padding: 2px 8px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.15s ease;
+}
+
+.template-pill:hover {
+  background: var(--color-cyan);
+  color: #000000;
+  border-color: var(--color-cyan);
+}
+
+/* Cross-IDE Token Saver Card */
+.oneshot-token-card {
+  background: #081418;
+  border: 2px solid #00f0ff44;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.token-card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.token-icon { font-size: 14px; }
+.token-title { font-family: var(--font-pixel); font-size: 9px; color: var(--color-cyan); }
+
+.token-stats-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.token-stat-item {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--font-pixel);
+  font-size: 8px;
+}
+
+.token-stat-label { color: var(--text-dim); }
+.token-stat-val { color: var(--text-main); }
+.token-stat-val.text-green { color: var(--color-green); font-weight: bold; }
+.token-stat-item.highlight {
+  border-top: 1px solid #165b38;
+  padding-top: 4px;
+  margin-top: 2px;
+}
+
+.token-strategies {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.strat-pill {
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  background: #00f0ff15;
+  color: #00f0ff;
+  padding: 2px 6px;
+  border: 1px solid #00f0ff33;
+}
+
+/* Pipeline Progress Section */
+.oneshot-pipeline-section {
+  background: #0b0e1b;
+  border: 2px solid var(--border-color);
+  padding: 12px 14px;
+}
+
+.pipeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.pipeline-title {
+  font-family: var(--font-pixel);
+  font-size: 9px;
+  color: var(--color-gold);
+}
+
+.pipeline-status {
+  font-family: var(--font-pixel);
+  font-size: 8px;
+  color: var(--color-cyan);
+}
+
+.pipeline-steps {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.pipeline-step {
+  flex: 1;
+  background: #111526;
+  border: 1px solid var(--border-color);
+  padding: 8px 6px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.pipeline-step.active {
+  border-color: var(--color-gold);
+  background: #1a1e36;
+  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
+}
+
+.pipeline-step.completed {
+  border-color: var(--color-green);
+  background: #0d1e16;
+}
+
+.step-icon { font-size: 16px; margin-bottom: 4px; }
+.step-label { font-family: var(--font-pixel); font-size: 7px; color: var(--text-main); margin-bottom: 2px; }
+.step-desc { font-family: var(--font-terminal); font-size: 11px; color: var(--text-dim); }
+
+.pipeline-arrow {
+  color: var(--text-dim);
+  font-family: var(--font-pixel);
+  font-size: 10px;
+}
+
+/* Results & Scorecard */
+.oneshot-results-grid {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  gap: 16px;
+}
+
+.visual-scorecard-panel {
+  background: #080a14;
+  border: 2px solid var(--color-magenta);
+  padding: 14px;
+}
+
+.scorecard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+  border-bottom: 1px solid #ff007f33;
+  padding-bottom: 8px;
+}
+
+.score-title { font-family: var(--font-pixel); font-size: 9px; color: var(--color-magenta); }
+.score-badge { font-family: var(--font-pixel); font-size: 11px; color: var(--color-green); background: #0c1a14; padding: 3px 8px; border: 1px solid var(--color-green); }
+
+.rubric-meters {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rubric-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.rubric-label-bar {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  color: var(--text-dim);
+}
+
+.rubric-bar-bg {
+  width: 100%;
+  height: 6px;
+  background: #15192c;
+  border: 1px solid #000;
+}
+
+.rubric-bar-fill {
+  height: 100%;
+  background: var(--color-cyan);
+}
+
+.oneshot-preview-panel {
+  background: #080a14;
+  border: 2px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #111526;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.preview-title { font-family: var(--font-pixel); font-size: 8px; color: var(--text-main); }
+
+.preview-iframe-wrapper {
+  flex: 1;
+  min-height: 280px;
+}
+
+.site-preview-iframe {
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
+  border: none;
+  background: #0b0c10;
+}
+
+@media (max-width: 900px) {
+  .oneshot-top-grid { grid-template-columns: 1fr; }
+  .oneshot-results-grid { grid-template-columns: 1fr; }
+  .pipeline-steps { flex-direction: column; }
+  .pipeline-arrow { transform: rotate(90deg); }
+}
+