@agentprojectcontext/apx 1.15.5 → 1.16.0

package/src/overlay/renderer.js

@@ -0,0 +1,371 @@
+// 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

@@ -0,0 +1,250 @@
+/* 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;
+}

package/src/tui/_shims/cli-error.ts

@@ -0,0 +1,6 @@
+export function FormatError(_error: unknown): string | undefined {
+  return undefined
+}
+export function FormatUnknownError(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}

package/src/tui/_shims/cli-logo.ts

@@ -0,0 +1,18 @@
+export type LogoShape = { left: string[]; right: string[] }
+
+export const logo: LogoShape = {
+  left: [
+    "  __   ____  _  _  ",
+    " /__\\ (  _ )( \\/ ) ",
+    "/ _ \\  ) __/  )  ( ",
+    "\\___/  (__) (__/\\_)",
+  ],
+  right: [
+    "  __   ____  _  _  ",
+    " / _\\ (  _ \\( \\/ ) ",
+    "/    \\ )___/ )  /  ",
+    "\\_/\\_/(__)  (__/   ",
+  ],
+}
+
+export const go = logo

package/src/tui/_shims/cli-ui.ts

@@ -0,0 +1 @@
+export const UI: Record<string, unknown> = {}

package/src/tui/_shims/config-console-state.ts

@@ -0,0 +1,7 @@
+export type ConsoleState = {
+  switchableOrgCount: number
+  activeOrgName?: string
+}
+export const emptyConsoleState: ConsoleState = {
+  switchableOrgCount: 0,
+}

package/src/tui/_shims/core-any.ts

@@ -0,0 +1,30 @@
+// Catch-all shim for any unmapped @opencode-ai/core/* imports
+import os from "os"
+import path from "path"
+export default {}
+const _apxStateDir = path.join(os.homedir(), ".apx", "tui-state")
+export const Global: any = {
+  Path: {
+    state: _apxStateDir,
+    config: path.join(os.homedir(), ".apx"),
+    data: _apxStateDir,
+    cache: path.join(os.homedir(), ".apx", "cache"),
+  },
+}
+export const AppFileSystem: any = {}
+export const Flock: any = {}
+export const Glob: any = {}
+export const Npm: any = {}
+export const Observability: any = {}
+export const PositiveInt: any = {}
+export const InstallationVersion: any = {}
+export const InstallationChannel: any = {}
+export const InstallationLocal: any = {}
+export const makeRuntime: any = () => ({})
+export const ensureProcessMetadata: any = () => {}
+export type DeepMutable<T> = T
+export const Schema: any = {}
+export const Context: any = {}
+export const Effect: any = {}
+export const Fiber: any = {}
+export const Layer: any = {}

package/src/tui/_shims/core-binary.ts

@@ -0,0 +1,13 @@
+export const Binary = {
+  search<T>(arr: T[], id: string, fn: (item: T) => string): { found: boolean; index: number } {
+    let lo = 0, hi = arr.length
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1
+      const v = fn(arr[mid])
+      if (v === id) return { found: true, index: mid }
+      if (v < id) lo = mid + 1
+      else hi = mid
+    }
+    return { found: false, index: lo }
+  },
+}