mongotokyo 1.0.8

package/src/renderer/overlay/overlay.css

@@ -0,0 +1,147 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --mono: 'JetBrains Mono', monospace;
+  /* Darker text for readability but still faint */
+  --text-color: rgba(0, 0, 0, 0.5); 
+  --accent: rgba(0, 0, 0, 0.2);
+}
+
+html, body {
+  width: 100vw;
+  height: 100vh;
+  background: transparent;
+  overflow: hidden;
+  font-family: var(--mono);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ─── Loading Dot ─── */
+#loadingDot {
+  position: fixed;
+  bottom: 8px;
+  right: 8px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0;
+}
+#loadingDot.visible {
+  opacity: 1;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.05; }
+  50%       { opacity: 0.25; }
+}
+
+/* ─── Error Dot ─── */
+#errorDot {
+  position: fixed;
+  bottom: 8px;
+  right: 8px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgba(255, 0, 0, 0.4); /* Faint red */
+  opacity: 0;
+  pointer-events: none;
+}
+#errorDot.visible {
+  opacity: 1;
+}
+
+/* ─── Answer Panel ─── */
+#answerPanel {
+  position: fixed;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: auto; /* Enable scrolling */
+}
+#answerPanel.visible { opacity: 1; }
+
+#answerLines {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  align-items: flex-end;
+}
+
+/* ─── Answer Lines (MCQ) ─── */
+.answer-line {
+  font-size: 8px;
+  color: var(--text-color);
+  background: transparent;
+  text-align: right;
+}
+
+/* ─── DSA Code Block (Tiny & Scrollable) ─── */
+.code-block {
+  width: 300px; /* Slightly wider */
+  max-height: 45px; /* Exactly ~3 lines of 10px text */
+  background: rgba(255, 255, 255, 0.02); /* Very subtle background */
+  overflow-y: auto; /* Vertical scroll only */
+  overflow-x: hidden;
+  scrollbar-width: none; 
+  position: relative;
+  border-radius: 4px;
+}
+.code-block::-webkit-scrollbar {
+  display: none; /* Hide scrollbar Chrome/Safari */
+}
+
+.copy-btn {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  font-family: var(--mono);
+  font-size: 8px;
+  color: var(--text-color);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--accent);
+  border-radius: 3px;
+  padding: 1px 5px;
+  cursor: pointer;
+  opacity: 0.4;
+  transition: opacity 0.2s;
+  z-index: 100;
+}
+.copy-btn:hover {
+  opacity: 0.8;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.code-pre {
+  font-family: var(--mono);
+  font-size: 10px; /* Readable proper font */
+  line-height: 1.4;
+  color: var(--text-color);
+  white-space: pre-wrap;
+  word-break: break-word;
+  text-align: left;
+  padding: 4px;
+  margin-top: 0; 
+  background: transparent;
+}
+
+/* ─── Saved Toast ─── */
+#savedToast {
+  position: fixed;
+  bottom: 8px;
+  right: 8px;
+  font-size: 7px;
+  color: var(--text-color);
+  opacity: 0;
+}
+#savedToast.visible { opacity: 1; }

package/src/renderer/overlay/overlay.js

@@ -0,0 +1,180 @@
+const api = window.electronAPI;
+
+// ─── Elements ──────────────────────────────────────────────────────────────────
+const loadingDot   = document.getElementById('loadingDot');
+const answerPanel  = document.getElementById('answerPanel');
+const answerLines  = document.getElementById('answerLines');
+const savedToast   = document.getElementById('savedToast');
+const errorDot     = document.getElementById('errorDot');
+
+// ─── State ─────────────────────────────────────────────────────────────────────
+let isHidden = false;
+let savedToastTimer = null;
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+function showLoading() {
+  loadingDot.classList.add('visible');
+  errorDot.classList.remove('visible');
+}
+
+function showError() {
+  loadingDot.classList.remove('visible');
+  errorDot.classList.add('visible');
+  setTimeout(() => errorDot.classList.remove('visible'), 4000);
+}
+
+function hideAll() {
+  loadingDot.classList.remove('visible');
+  errorDot.classList.remove('visible');
+  answerPanel.classList.remove('visible');
+  savedToast.classList.remove('visible');
+}
+
+function flashSavedToast(folderName) {
+  if (savedToastTimer) clearTimeout(savedToastTimer);
+  savedToast.textContent = `✓ Saved → ${folderName}`;
+  savedToast.classList.add('visible');
+  savedToastTimer = setTimeout(() => {
+    savedToast.classList.remove('visible');
+  }, 4000);
+}
+
+function showAnswerPanel() {
+  if (!isHidden) {
+    answerPanel.classList.add('visible');
+  }
+}
+
+// ─── Render Answer ──────────────────────────────────────────────────────────────
+function renderAnswer(data) {
+  loadingDot.classList.remove('visible');
+  answerLines.innerHTML = '';
+
+  const type = data.type || '';
+
+  if (type === 'web') {
+    // MERN/Web: just show a saved toast, files are on Desktop
+    const name = data.questionName || 'WebProject';
+    flashSavedToast(name);
+
+  } else if (type === 'dsa') {
+    // DSA: render code on screen in faint style
+    renderDSACode(data);
+
+  } else if (type === 'mcq') {
+    // MCQ: render answers list
+    renderMCQAnswers(data.answers || []);
+
+  } else if (type === 'mixed') {
+    // Mixed: could have both MCQ answers and code
+    if (data.files && data.files.length > 0) {
+      renderDSACode(data);
+    }
+    if (data.answers && data.answers.length > 0) {
+      renderMCQAnswers(data.answers);
+    }
+  }
+}
+
+// ─── DSA Code Renderer ─────────────────────────────────────────────────────────
+function renderDSACode(data) {
+  answerLines.innerHTML = '';
+
+  // Render each file (usually just one for DSA)
+  (data.files || []).forEach((file) => {
+    if (!file.content) return;
+
+    const block = document.createElement('div');
+    block.className = 'code-block';
+
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'copy-btn';
+    copyBtn.textContent = 'Copy';
+    copyBtn.onclick = () => {
+      navigator.clipboard.writeText(file.content);
+      copyBtn.textContent = 'Copied!';
+      setTimeout(() => { copyBtn.textContent = 'Copy'; }, 1000);
+    };
+    block.appendChild(copyBtn);
+
+    const pre = document.createElement('pre');
+    pre.className = 'code-pre';
+    
+    // Ensure content is a string joined by newlines, not commas
+    let content = file.content;
+    if (Array.isArray(content)) {
+      content = content.join('\n');
+    }
+    pre.textContent = content;
+    block.appendChild(pre);
+
+    answerLines.appendChild(block);
+  });
+
+  showAnswerPanel();
+}
+
+// ─── MCQ Renderer ──────────────────────────────────────────────────────────────
+function renderMCQAnswers(answers) {
+  if (answers.length === 0) return;
+
+  answers.forEach((item, i) => {
+    const line = document.createElement('div');
+    line.className = 'answer-line';
+    // Only show the answer itself (e.g., "A" or "Heap")
+    line.textContent = item.answer || '?';
+    answerLines.appendChild(line);
+  });
+
+  showAnswerPanel();
+}
+
+// ─── IPC Listeners ─────────────────────────────────────────────────────────────
+api.onStatus(({ type }) => {
+  if (type === 'loading') {
+    showLoading();
+  } else if (type === 'idle') {
+    hideAll();
+  } else if (type === 'error') {
+    showError();
+  } else if (type === 'info') {
+    // Optional: show a tiny brief indicator for mouse mode
+  }
+});
+
+api.onAnswer((data) => renderAnswer(data));
+
+api.onClear(() => {
+  hideAll();
+  answerLines.innerHTML = '';
+});
+
+// ─── Mouse Interaction logic handled by Ctrl+Shift+M ───────────────────────────
+
+
+// ─── Panic (` key) ─────────────────────────────────────────────────────────────
+api.onPanic((state) => {
+  if (state === 'hide') {
+    isHidden = true;
+    answerPanel.classList.remove('visible');
+    savedToast.classList.remove('visible');
+  } else if (state === 'show') {
+    isHidden = false;
+    if (answerLines.children.length > 0) {
+      answerPanel.classList.add('visible');
+    }
+  }
+});
+
+// ─── Toggle Text (Ctrl+Shift+H) ────────────────────────────────────────────────
+api.onToggleText(() => {
+  if (answerPanel.classList.contains('visible')) {
+    answerPanel.classList.remove('visible');
+    isHidden = true;
+  } else {
+    isHidden = false;
+    if (answerLines.children.length > 0) {
+      answerPanel.classList.add('visible');
+    }
+  }
+});

package/src/renderer/selector/selector.css

@@ -0,0 +1,54 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.35);
+  cursor: crosshair;
+  overflow: hidden;
+  user-select: none;
+}
+
+.crosshair-h {
+  position: fixed;
+  left: 0; right: 0;
+  height: 1px;
+  background: rgba(124, 106, 247, 0.5);
+  pointer-events: none;
+  top: -999px;
+  transition: top 0s;
+}
+
+.crosshair-v {
+  position: fixed;
+  top: 0; bottom: 0;
+  width: 1px;
+  background: rgba(124, 106, 247, 0.5);
+  pointer-events: none;
+  left: -999px;
+}
+
+.selection-box {
+  position: fixed;
+  border: 2px solid #7c6af7;
+  background: rgba(124, 106, 247, 0.08);
+  box-shadow: 0 0 0 1px rgba(124,106,247,0.3), inset 0 0 20px rgba(124,106,247,0.05);
+  display: none;
+  pointer-events: none;
+}
+
+.coords-tip {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(10,10,18,0.9);
+  color: #94a3b8;
+  font-family: 'Inter', 'Segoe UI', sans-serif;
+  font-size: 12px;
+  padding: 6px 16px;
+  border-radius: 20px;
+  border: 1px solid rgba(255,255,255,0.08);
+  white-space: nowrap;
+  pointer-events: none;
+}

package/src/renderer/selector/selector.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Select Region</title>
+  <link rel="stylesheet" href="selector.css" />
+</head>
+<body>
+  <div class="crosshair-h"></div>
+  <div class="crosshair-v"></div>
+  <div class="selection-box" id="selectionBox"></div>
+  <div class="coords-tip" id="coordsTip">Click and drag to select region · ESC to cancel</div>
+  <script src="selector.js"></script>
+</body>
+</html>

package/src/renderer/selector/selector.js

@@ -0,0 +1,74 @@
+const api = window.electronAPI;
+
+const selBox   = document.getElementById('selectionBox');
+const tip      = document.getElementById('coordsTip');
+const crossH   = document.querySelector('.crosshair-h');
+const crossV   = document.querySelector('.crosshair-v');
+
+let startX = 0, startY = 0;
+let isDragging = false;
+
+// Move crosshairs with mouse
+document.addEventListener('mousemove', (e) => {
+  crossH.style.top = e.clientY + 'px';
+  crossV.style.left = e.clientX + 'px';
+
+  if (isDragging) {
+    const x = Math.min(e.clientX, startX);
+    const y = Math.min(e.clientY, startY);
+    const w = Math.abs(e.clientX - startX);
+    const h = Math.abs(e.clientY - startY);
+
+    selBox.style.left   = x + 'px';
+    selBox.style.top    = y + 'px';
+    selBox.style.width  = w + 'px';
+    selBox.style.height = h + 'px';
+
+    tip.textContent = `${Math.round(w)} × ${Math.round(h)} px · Release to capture`;
+  }
+});
+
+document.addEventListener('mousedown', (e) => {
+  if (e.button !== 0) return;
+  isDragging = true;
+  startX = e.clientX;
+  startY = e.clientY;
+
+  selBox.style.left   = startX + 'px';
+  selBox.style.top    = startY + 'px';
+  selBox.style.width  = '0px';
+  selBox.style.height = '0px';
+  selBox.style.display = 'block';
+});
+
+document.addEventListener('mouseup', (e) => {
+  if (!isDragging) return;
+  isDragging = false;
+
+  const x = Math.min(e.clientX, startX);
+  const y = Math.min(e.clientY, startY);
+  const w = Math.abs(e.clientX - startX);
+  const h = Math.abs(e.clientY - startY);
+
+  if (w < 20 || h < 20) {
+    // Too small, cancel
+    api.cancelSelection();
+    return;
+  }
+
+  // Use devicePixelRatio for HiDPI screens
+  const dpr = window.devicePixelRatio || 1;
+  api.sendRegion({
+    x: x * dpr,
+    y: y * dpr,
+    width: w * dpr,
+    height: h * dpr
+  });
+});
+
+// Cancel on Escape
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    api.cancelSelection();
+  }
+});

package/src/renderer/setup/setup.css

@@ -0,0 +1,236 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+  --bg: rgba(8, 8, 16, 0.96);
+  --surface: rgba(255,255,255,0.04);
+  --surface-hover: rgba(255,255,255,0.07);
+  --border: rgba(255,255,255,0.08);
+  --accent: #7c6af7;
+  --green: #34d399;
+  --yellow: #fbbf24;
+  --text: #e2e8f0;
+  --text-dim: #94a3b8;
+  --text-muted: #64748b;
+  --radius: 16px;
+}
+
+html, body {
+  width: 100%; height: 100%;
+  background: transparent;
+  font-family: 'Inter', 'Segoe UI', sans-serif;
+  color: var(--text);
+  overflow: hidden;
+}
+
+.window {
+  width: 100%; height: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  backdrop-filter: blur(32px);
+  -webkit-backdrop-filter: blur(32px);
+  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(124,106,247,0.12);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Header */
+.header {
+  padding: 28px 28px 20px;
+  text-align: center;
+  border-bottom: 1px solid var(--border);
+  -webkit-app-region: drag;
+  background: linear-gradient(180deg, rgba(124,106,247,0.07) 0%, transparent 100%);
+}
+
+.header-icon { font-size: 36px; margin-bottom: 8px; }
+
+.header-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #fff 0%, #7c6af7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 6px;
+}
+
+.header-sub {
+  font-size: 12.5px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+/* Body */
+.setup-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+  -webkit-app-region: no-drag;
+}
+
+.setup-body::-webkit-scrollbar { width: 4px; }
+.setup-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+/* Info banner */
+.info-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(124,106,247,0.07);
+  border: 1px solid rgba(124,106,247,0.2);
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 11.5px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin-bottom: 18px;
+}
+
+.info-icon { font-size: 16px; flex-shrink: 0; }
+
+/* Fields */
+.fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
+
+.field-group { display: flex; flex-direction: column; gap: 6px; }
+
+.field-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-dim);
+}
+
+.provider-badge {
+  width: 20px; height: 20px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; font-weight: 700;
+  flex-shrink: 0;
+}
+
+.provider-badge.gemini     { background: rgba(52,211,153,0.2); color: var(--green); }
+.provider-badge.groq       { background: rgba(124,106,247,0.2); color: var(--accent); }
+.provider-badge.openrouter { background: rgba(251,191,36,0.2); color: var(--yellow); }
+.provider-badge.openai     { background: rgba(255,255,255,0.1); color: #fff; }
+
+.badge {
+  font-size: 9px;
+  padding: 2px 6px;
+  border-radius: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-left: auto;
+}
+
+.badge.free { background: rgba(52,211,153,0.12); color: var(--green); border: 1px solid rgba(52,211,153,0.25); }
+.badge.paid { background: rgba(251,191,36,0.12); color: var(--yellow); border: 1px solid rgba(251,191,36,0.25); }
+
+.input-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.key-input {
+  flex: 1;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 9px 12px;
+  color: var(--text);
+  font-size: 12.5px;
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.key-input:focus { border-color: var(--accent); }
+.key-input::placeholder { color: var(--text-muted); }
+
+.eye-btn {
+  width: 34px; height: 34px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.eye-btn:hover { background: var(--surface-hover); }
+
+.get-key-link {
+  font-size: 10.5px;
+  color: var(--accent);
+  text-decoration: none;
+  margin-left: 28px;
+  opacity: 0.8;
+  transition: opacity 0.15s;
+}
+
+.get-key-link:hover { opacity: 1; }
+
+/* Notes */
+.storage-note {
+  font-size: 10.5px;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 10px 0 6px;
+  line-height: 1.6;
+}
+
+.storage-note code {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--text-dim);
+  background: var(--surface);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+.error-msg {
+  font-size: 11.5px;
+  color: #f87171;
+  text-align: center;
+  padding: 8px;
+  background: rgba(248,113,113,0.08);
+  border: 1px solid rgba(248,113,113,0.2);
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.hidden { display: none !important; }
+
+/* Save button */
+.save-btn {
+  width: 100%;
+  padding: 12px;
+  background: linear-gradient(135deg, #7c6af7, #5b47e0);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 13.5px;
+  font-weight: 600;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: opacity 0.15s, transform 0.1s;
+  box-shadow: 0 4px 20px rgba(124,106,247,0.4);
+  margin-top: 8px;
+}
+
+.save-btn:hover { opacity: 0.9; transform: translateY(-1px); }
+.save-btn:active { transform: translateY(0); }
+.btn-arrow { font-size: 16px; }