@agentprojectcontext/apx 1.25.0 → 1.27.2

package/src/overlay/renderer.js

@@ -1,371 +0,0 @@
-// APX Overlay renderer — chat UI logic.
-// Runs in the Electron BrowserWindow (renderer process).
-// Communicates with main process via window.apx (contextBridge).
-
-(() => {
-  "use strict";
-
-  // ── DOM refs ──────────────────────────────────────────────────────────
-  const $messages   = document.getElementById("messages");
-  const $emptyState = document.getElementById("empty-state");
-  const $liveBar    = document.getElementById("live-bar");
-  const $liveText   = document.getElementById("live-text");
-  const $statusText = document.getElementById("status-text");
-  const $connBadge  = document.getElementById("conn-badge");
-  const $btnClose   = document.getElementById("btn-close");
-  const $hintBar    = document.getElementById("hint-bar");
-
-  // Show the actual configured shortcut in the hint bar and empty state
-  window.apx?.getShortcut?.().then(shortcut => {
-    if (!shortcut) return;
-    const label = shortcut
-      .replace("CommandOrControl", window.apx.platform === "darwin" ? "⌘" : "Ctrl")
-      .replace("Command", "⌘")
-      .replace("Control", "Ctrl")
-      .replace("Shift", "⇧")
-      .replace("Option", "⌥")
-      .replace("Alt", "Alt")
-      .replace(/\+/g, "");
-    const hint = document.getElementById("shortcut-hint");
-    if (hint) hint.textContent = label;
-    const emptyHint = document.getElementById("empty-shortcut-hint");
-    if (emptyHint) emptyHint.textContent = label;
-  }).catch(() => {});
-
-  // ── State ─────────────────────────────────────────────────────────────
-  let isRecording    = false;
-  let isStreaming    = false;
-  let isCancelled    = false;
-  let liveAccum      = "";       // accumulated live transcription
-  let mediaRecorder  = null;
-  let audioStream    = null;
-  let streamingBubble = null;   // current streaming agent bubble element
-  let currentExchangeStart = 0; // index in allMessages for current exchange
-  let allMessages    = [];       // { role, content, el }
-  let whisperPollTimer = null;  // timer for model-loading poll
-
-  // ── Recording ─────────────────────────────────────────────────────────
-
-  window.apx?.onRecordingStart(async () => {
-    isRecording = true;
-    isCancelled = false;
-    liveAccum   = "";
-    setStatus("Recording…");
-    showLiveBar(true);
-
-    // Check if whisper model is loaded; if not, show loading state while mic starts
-    let whisperReady = false;
-    try {
-      const status = await window.apx.checkWhisperReady();
-      whisperReady = status?.ready === true;
-    } catch {}
-
-    if (!whisperReady) {
-      setLiveText("Cargando modelo…");
-      // Poll until model is loaded, then switch to Listening...
-      whisperPollTimer = setInterval(async () => {
-        if (!isRecording) { clearInterval(whisperPollTimer); whisperPollTimer = null; return; }
-        try {
-          const s = await window.apx.checkWhisperReady();
-          if (s?.ready) {
-            clearInterval(whisperPollTimer);
-            whisperPollTimer = null;
-            if (isRecording) setLiveText("Listening…");
-          }
-        } catch {}
-      }, 1500);
-    }
-
-    startMic();
-  });
-
-  window.apx?.onRecordingStop(() => {
-    isRecording = false;
-    if (whisperPollTimer) { clearInterval(whisperPollTimer); whisperPollTimer = null; }
-    stopMic();
-    // liveAccum already contains the transcription — send it
-    const text = liveAccum.trim();
-    if (text && !isCancelled) {
-      commitUserMessage(text);
-    } else {
-      showLiveBar(false);
-      setStatus("Ready");
-    }
-  });
-
-  // ── Mic capture ───────────────────────────────────────────────────────
-
-  async function startMic() {
-    try {
-      audioStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
-      const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus")
-        ? "audio/webm;codecs=opus"
-        : "audio/ogg;codecs=opus";
-      const format = mimeType.includes("webm") ? "webm" : "ogg";
-
-      mediaRecorder = new MediaRecorder(audioStream, { mimeType, audioBitsPerSecond: 32000 });
-
-      mediaRecorder.ondataavailable = async (e) => {
-        if (!e.data || e.data.size < 200) return; // skip nearly-empty chunks
-        if (!isRecording && !liveAccum) return;
-
-        const buf = await e.data.arrayBuffer();
-        const result = await window.apx.transcribeChunk(buf, format, "auto");
-        if (result?.ok && result.text?.trim()) {
-          liveAccum = (liveAccum + " " + result.text).trim();
-          $liveText.textContent = liveAccum || "Listening…";
-        }
-      };
-
-      // Send a chunk every 2.5 seconds while recording
-      mediaRecorder.start(2500);
-    } catch (e) {
-      setStatus("Mic error: " + e.message);
-      showLiveBar(false);
-      isRecording = false;
-    }
-  }
-
-  function stopMic() {
-    try { mediaRecorder?.stop(); } catch {}
-    try { audioStream?.getTracks().forEach(t => t.stop()); } catch {}
-    mediaRecorder = null;
-    audioStream   = null;
-  }
-
-  // ── Send message flow ─────────────────────────────────────────────────
-
-  async function commitUserMessage(text) {
-    showLiveBar(false);
-    hideEmptyState();
-
-    // Record where this exchange begins
-    currentExchangeStart = allMessages.length;
-
-    // Render user bubble
-    const userBubble = addBubble("user", text);
-    allMessages.push({ role: "user", content: text, el: userBubble });
-
-    // Start streaming agent bubble
-    streamingBubble = addBubble("agent", "");
-    streamingBubble.classList.add("streaming");
-    const agentEntry = { role: "agent", content: "", el: streamingBubble };
-    allMessages.push(agentEntry);
-
-    isStreaming = true;
-    setStatus("Thinking…");
-    scrollToBottom();
-
-    // Send to daemon via IPC
-    try {
-      const history = buildHistory();
-      await window.apx.sendMessage(text, history);
-    } catch (e) {
-      finalizeAgentBubble("Error: " + e.message, true);
-    }
-  }
-
-  function buildHistory() {
-    // Last N turns excluding the current in-progress exchange
-    return allMessages
-      .slice(0, currentExchangeStart)
-      .slice(-20)
-      .map(m => ({ role: m.role === "agent" ? "assistant" : m.role, content: m.content }));
-  }
-
-  // ── Daemon events ─────────────────────────────────────────────────────
-
-  window.apx?.onDaemonEvent((msg) => {
-    switch (msg.type) {
-      case "thinking":
-        setStatus("Thinking…");
-        break;
-
-      case "token":
-        if (streamingBubble && !isCancelled) {
-          const entry = allMessages[allMessages.length - 1];
-          if (entry) entry.content += msg.text;
-          appendToken(streamingBubble, msg.text);
-          scrollToBottom();
-        }
-        break;
-
-      case "tool_start":
-        addToolPill(msg.name, false);
-        setStatus(`Running ${msg.name}…`);
-        break;
-
-      case "tool_done":
-        updateToolPill(msg.name, true);
-        setStatus("Thinking…");
-        break;
-
-      case "done": {
-        const finalText = msg.text || streamingBubble?.dataset.content || "";
-        finalizeAgentBubble(finalText);
-        setStatus("Ready");
-        break;
-      }
-
-      case "error":
-        finalizeAgentBubble(msg.message || "Unknown error", true);
-        setStatus("Error");
-        break;
-
-      case "cancelled":
-        if (streamingBubble) {
-          streamingBubble.classList.remove("streaming");
-          if (!streamingBubble.dataset.content) {
-            streamingBubble.closest(".bubble-row")?.remove();
-            allMessages.pop();
-          }
-        }
-        streamingBubble = null;
-        isStreaming = false;
-        setStatus("Cancelled");
-        setTimeout(() => setStatus("Ready"), 2000);
-        break;
-    }
-  });
-
-  window.apx?.onDaemonConnected(() => {
-    $connBadge.classList.remove("show");
-  });
-  window.apx?.onDaemonDisconnected(() => {
-    $connBadge.classList.add("show");
-  });
-
-  // ── Bubble helpers ────────────────────────────────────────────────────
-
-  function addBubble(role, text) {
-    const row = document.createElement("div");
-    row.className = `bubble-row ${role}`;
-
-    const bub = document.createElement("div");
-    bub.className = "bubble";
-    bub.dataset.content = text;
-    if (text) bub.textContent = text;
-
-    row.appendChild(bub);
-    $messages.appendChild(row);
-    return bub;
-  }
-
-  function appendToken(bubbleEl, token) {
-    bubbleEl.dataset.content = (bubbleEl.dataset.content || "") + token;
-    // Re-render full text (handles whitespace/newlines correctly)
-    bubbleEl.textContent = bubbleEl.dataset.content;
-  }
-
-  function finalizeAgentBubble(text, isError = false) {
-    if (!streamingBubble) return;
-    streamingBubble.classList.remove("streaming");
-    if (isError) streamingBubble.classList.add("error");
-    const finalContent = text || streamingBubble.dataset.content || "";
-    streamingBubble.textContent = finalContent;
-    streamingBubble.dataset.content = finalContent;
-
-    // Update allMessages entry
-    const entry = allMessages[allMessages.length - 1];
-    if (entry && entry.role === "agent") entry.content = finalContent;
-
-    streamingBubble = null;
-    isStreaming = false;
-    scrollToBottom();
-  }
-
-  // Tool pills appear between bubbles
-  let activePills = {}; // name → pill element
-
-  function addToolPill(name, done) {
-    const pill = document.createElement("div");
-    pill.className = "tool-pill";
-    pill.dataset.tool = name;
-    pill.innerHTML = done
-      ? `<span class="check">✓</span><span>${name}</span>`
-      : `<div class="spinner"></div><span>${name}</span>`;
-    // Insert before the streaming agent bubble row
-    if (streamingBubble) {
-      const row = streamingBubble.closest(".bubble-row");
-      $messages.insertBefore(pill, row);
-    } else {
-      $messages.appendChild(pill);
-    }
-    activePills[name] = pill;
-    scrollToBottom();
-  }
-
-  function updateToolPill(name, done) {
-    const pill = activePills[name];
-    if (!pill) return;
-    if (done) {
-      pill.innerHTML = `<span class="check">✓</span><span>${name}</span>`;
-    }
-  }
-
-  // ── Live bar ──────────────────────────────────────────────────────────
-
-  function showLiveBar(show) {
-    if (show) {
-      $liveBar.classList.add("active");
-      $liveText.textContent = "Listening…";
-    } else {
-      $liveBar.classList.remove("active");
-      $liveText.textContent = "Listening…";
-    }
-  }
-
-  function setLiveText(text) {
-    $liveText.textContent = text;
-  }
-
-  // ── Misc UI ───────────────────────────────────────────────────────────
-
-  function hideEmptyState() {
-    $emptyState?.remove();
-  }
-
-  function setStatus(text) {
-    if ($statusText) $statusText.textContent = text;
-  }
-
-  function scrollToBottom() {
-    $messages.scrollTop = $messages.scrollHeight;
-  }
-
-  // ── Keyboard handling ─────────────────────────────────────────────────
-
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      if (isRecording) {
-        // Cancel recording without sending
-        isCancelled = true;
-        isRecording = false;
-        stopMic();
-        showLiveBar(false);
-        setStatus("Cancelled");
-        setTimeout(() => setStatus("Ready"), 1500);
-        window.apx?.cancel();
-      } else if (isStreaming) {
-        // Interrupt agent response (keeps user bubble, clears streaming)
-        isCancelled = true;
-        window.apx?.cancel();
-        // finalizeAgentBubble called on "cancelled" event from daemon
-      } else {
-        // Close overlay
-        window.apx?.close();
-      }
-    }
-  });
-
-  // Close button
-  $btnClose?.addEventListener("click", () => {
-    if (isStreaming) {
-      isCancelled = true;
-      window.apx?.cancel();
-    }
-    window.apx?.close();
-  });
-
-})();

package/src/overlay/style.css

@@ -1,250 +0,0 @@
-/* APX Overlay — transparent floating chat */
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-:root {
-  --bg-window:  rgba(18, 18, 22, 0.72);
-  --bg-user:    rgba(99, 102, 241, 0.85);
-  --bg-agent:   rgba(30, 32, 40, 0.88);
-  --bg-tool:    rgba(50, 55, 70, 0.75);
-  --text-main:  #f0f0f5;
-  --text-dim:   rgba(200, 200, 220, 0.6);
-  --text-user:  #ffffff;
-  --accent:     #818cf8;
-  --red:        #f87171;
-  --green:      #4ade80;
-  --radius:     16px;
-  --radius-sm:  8px;
-  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-html, body {
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  color: var(--text-main);
-  font-family: var(--font);
-  font-size: 14px;
-  line-height: 1.5;
-  overflow: hidden;
-  user-select: none;
-  -webkit-app-region: no-drag;
-}
-
-/* ─── Root layout ──────────────────────────────────────────────────── */
-
-#app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: var(--bg-window);
-  border-radius: 18px;
-  border: 1px solid rgba(255,255,255,0.08);
-  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
-  overflow: hidden;
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-}
-
-/* ─── Header bar ───────────────────────────────────────────────────── */
-
-#header {
-  display: flex;
-  align-items: center;
-  padding: 10px 14px;
-  gap: 8px;
-  -webkit-app-region: drag;
-  flex-shrink: 0;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-}
-#header .logo {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  color: var(--accent);
-  text-transform: uppercase;
-  -webkit-app-region: no-drag;
-}
-#header .status {
-  flex: 1;
-  font-size: 11px;
-  color: var(--text-dim);
-  -webkit-app-region: no-drag;
-}
-#header .btn-close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-dim);
-  padding: 2px 6px;
-  border-radius: 6px;
-  font-size: 15px;
-  line-height: 1;
-  -webkit-app-region: no-drag;
-  transition: color 0.15s, background 0.15s;
-}
-#header .btn-close:hover { color: var(--red); background: rgba(248,113,113,0.12); }
-
-/* ─── Messages area ────────────────────────────────────────────────── */
-
-#messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 12px 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  scroll-behavior: smooth;
-}
-#messages::-webkit-scrollbar { width: 4px; }
-#messages::-webkit-scrollbar-track { background: transparent; }
-#messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
-
-/* ─── Bubble base ──────────────────────────────────────────────────── */
-
-.bubble-row {
-  display: flex;
-  flex-direction: column;
-  max-width: 84%;
-}
-.bubble-row.user  { align-self: flex-end; align-items: flex-end; }
-.bubble-row.agent { align-self: flex-start; align-items: flex-start; }
-
-.bubble {
-  padding: 9px 13px;
-  border-radius: var(--radius);
-  font-size: 13.5px;
-  line-height: 1.55;
-  word-break: break-word;
-  white-space: pre-wrap;
-  position: relative;
-}
-.bubble-row.user  .bubble {
-  background: var(--bg-user);
-  color: var(--text-user);
-  border-bottom-right-radius: 5px;
-}
-.bubble-row.agent .bubble {
-  background: var(--bg-agent);
-  color: var(--text-main);
-  border-bottom-left-radius: 5px;
-  min-width: 60px;
-}
-
-/* Streaming cursor */
-.bubble.streaming::after {
-  content: "▋";
-  display: inline-block;
-  animation: blink 0.8s step-end infinite;
-  color: var(--accent);
-  margin-left: 2px;
-}
-@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
-
-/* ─── Tool pill ────────────────────────────────────────────────────── */
-
-.tool-pill {
-  align-self: center;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--bg-tool);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 20px;
-  padding: 4px 12px;
-  font-size: 11.5px;
-  color: var(--text-dim);
-}
-.tool-pill .spinner {
-  width: 10px; height: 10px;
-  border: 1.5px solid rgba(255,255,255,0.2);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
-  flex-shrink: 0;
-}
-.tool-pill .check { color: var(--green); font-size: 11px; }
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* ─── Live transcription bar ───────────────────────────────────────── */
-
-#live-bar {
-  display: none;
-  padding: 10px 14px;
-  border-top: 1px solid rgba(255,255,255,0.06);
-  flex-shrink: 0;
-}
-#live-bar.active { display: flex; align-items: center; gap: 10px; }
-
-.rec-dot {
-  width: 8px; height: 8px;
-  border-radius: 50%;
-  background: var(--red);
-  flex-shrink: 0;
-  animation: pulse 1.2s ease-in-out infinite;
-}
-@keyframes pulse {
-  0%,100% { transform: scale(1); opacity: 1; }
-  50%      { transform: scale(1.4); opacity: 0.6; }
-}
-
-#live-text {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-main);
-  min-height: 18px;
-  font-style: italic;
-  opacity: 0.85;
-}
-
-/* ─── Bottom hint bar ──────────────────────────────────────────────── */
-
-#hint-bar {
-  padding: 6px 14px;
-  font-size: 10.5px;
-  color: var(--text-dim);
-  display: flex;
-  gap: 14px;
-  border-top: 1px solid rgba(255,255,255,0.04);
-  flex-shrink: 0;
-}
-.hint kbd {
-  background: rgba(255,255,255,0.08);
-  border-radius: 3px;
-  padding: 0 4px;
-  font-family: inherit;
-  font-size: 10px;
-}
-
-/* ─── States ───────────────────────────────────────────────────────── */
-
-#empty-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  color: var(--text-dim);
-  font-size: 13px;
-}
-#empty-state .icon { font-size: 28px; opacity: 0.5; }
-
-/* Disconnected indicator */
-#conn-badge {
-  display: none;
-  position: absolute;
-  top: 10px; right: 40px;
-  width: 7px; height: 7px;
-  border-radius: 50%;
-  background: var(--red);
-}
-#conn-badge.show { display: block; }
-
-/* Error bubble */
-.bubble.error {
-  background: rgba(248,113,113,0.18);
-  border: 1px solid rgba(248,113,113,0.35);
-  color: var(--red);
-  font-size: 12px;
-}