@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/hooks/useChatActivity.ts

@@ -0,0 +1,24 @@
+import { useEffect, useSyncExternalStore } from "react";
+import type { ActiveTurn } from "../types/daemon";
+import {
+  readChatActivity,
+  seedActiveTurn,
+  setChatVisible,
+  subscribeChatActivity,
+} from "../lib/chat-activity";
+
+export function useChatActivity(key: string | null, active?: ActiveTurn | null) {
+  useEffect(() => { seedActiveTurn(key, active); }, [key, active]);
+  return useSyncExternalStore(
+    subscribeChatActivity,
+    () => readChatActivity(key),
+    () => readChatActivity(key),
+  );
+}
+
+export function useChatVisibility(key: string | null) {
+  useEffect(() => {
+    setChatVisible(key, true);
+    return () => setChatVisible(key, false);
+  }, [key]);
+}

package/src/interfaces/web/src/hooks/useInbox.ts

@@ -1,12 +1,34 @@
+import { useCallback } from "react";
 import useSWR from "swr";
 import { Inbox, type InboxRow } from "../lib/api/inbox";
+import { useLiveMessages } from "./useLiveMessages";
 
-/** Every agent as a conversation, most recent first, super-agent pinned. */
-export function useInbox(includeEmpty = false) {
+/**
+ * Every conversation, most recent first, super-agent pinned.
+ *
+ * Every channel by default. It used to scope to `web`, which meant the inbox
+ * and the phone could only ever show one of the places a conversation actually
+ * happens — a WhatsApp contact or a Telegram thread was answered and then
+ * invisible. With no filter the daemon returns one row per (agent, channel),
+ * which is what lets the list group by channel instead of mixing them.
+ *
+ * Pass a channel to scope back to one (and get one row per agent again).
+ */
+export function useInbox(includeEmpty = false, channel: string | null = null) {
   const { data, error, isLoading, mutate } = useSWR<InboxRow[]>(
-    `/api/inbox?include_empty=${includeEmpty ? 1 : 0}`,
-    () => Inbox.list(includeEmpty),
+    `/api/inbox?include_empty=${includeEmpty ? 1 : 0}&channel=${channel ?? ""}`,
+    () => Inbox.list(includeEmpty, channel ?? undefined),
+    // The live feed below is what makes this list move in real time. The poll
+    // stays as the floor for when the socket cannot connect at all (a proxy
+    // that drops upgrades, a token that has not landed yet) — a list that is
+    // 15s stale is a slow inbox; one that never updates is a broken one.
     { refreshInterval: 15_000 },
   );
+
+  // ANY message anywhere reorders this list — a new row, a new preview, a new
+  // timestamp — so there is nothing to match on: revalidate and let the daemon
+  // say what the list is now.
+  useLiveMessages(useCallback(() => { void mutate(); }, [mutate]));
+
   return { rows: data ?? [], error, isLoading, mutate };
 }

package/src/interfaces/web/src/hooks/useLiveMessages.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+import { subscribeLive, type LiveEvent } from "../lib/live";
+
+/**
+ * React binding for the live feed (lib/live.ts): call `onEvents` whenever the
+ * daemon reports that a conversation moved.
+ *
+ * The callback is held in a ref, so a screen that rebuilds it every render —
+ * most of them do — does not resubscribe on every render. The socket itself is
+ * shared by the whole panel and outlives any one component.
+ */
+export function useLiveMessages(onEvents: (events: LiveEvent[]) => void): void {
+  const latest = useRef(onEvents);
+  latest.current = onEvents;
+  useEffect(() => subscribeLive((events) => latest.current(events)), []);
+}

package/src/interfaces/web/src/hooks/useOllamaModels.ts

@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useState } from "react";
+import { Engines } from "../lib/api/engines";
+
+// Ollama has no curated catalog: the models are whatever the user pulled onto
+// that machine. So we ask the server. If it does not answer we fall back to the
+// last list we saw (cached per provider slug) and, failing that, offer nothing —
+// the field stays free-text either way.
+
+interface Cached { models: string[]; ts: number }
+
+const KEY = (slug: string) => `apx.ollama_models.${slug}`;
+
+function readCache(slug: string): string[] {
+  try {
+    const raw = localStorage.getItem(KEY(slug));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as Cached;
+    return Array.isArray(parsed?.models) ? parsed.models : [];
+  } catch { return []; }
+}
+
+function writeCache(slug: string, models: string[]) {
+  try { localStorage.setItem(KEY(slug), JSON.stringify({ models, ts: Date.now() } satisfies Cached)); } catch { /* quota / private mode */ }
+}
+
+export interface OllamaProbeTarget { slug: string; base_url?: string }
+
+export interface OllamaProbe {
+  /** Models the server reported, or the cached ones when it is unreachable. */
+  models: Record<string, string[]>;
+  /** true = the server answered on this pass. Absent while still probing. */
+  online: Record<string, boolean | undefined>;
+}
+
+/**
+ * Probe every Ollama provider once per changed target set. Returns its live
+ * model list plus whether the server actually answered, so callers can both
+ * populate a dropdown and tell "connected" from "configured".
+ */
+export function useOllamaModels(targets: OllamaProbeTarget[]): OllamaProbe {
+  // Stable identity so the effect does not refire on every parent render.
+  const key = targets.map((tg) => `${tg.slug}|${tg.base_url || ""}`).sort().join(",");
+  const list = useMemo(() => targets, [key]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const [models, setModels] = useState<Record<string, string[]>>({});
+  const [online, setOnline] = useState<Record<string, boolean | undefined>>({});
+
+  useEffect(() => {
+    let alive = true;
+    if (list.length === 0) { setModels({}); setOnline({}); return; }
+
+    // Show the cache immediately; the probe overwrites it when it lands.
+    setModels(Object.fromEntries(list.map((tg) => [tg.slug, readCache(tg.slug)])));
+
+    (async () => {
+      const nextModels: Record<string, string[]> = {};
+      const nextOnline: Record<string, boolean> = {};
+      await Promise.all(list.map(async (tg) => {
+        try {
+          const r = await Engines.models({ engine: "ollama", slug: tg.slug, base_url: tg.base_url });
+          const got = Array.isArray(r.models) ? r.models : [];
+          nextModels[tg.slug] = got;
+          nextOnline[tg.slug] = true;
+          writeCache(tg.slug, got);
+        } catch {
+          nextModels[tg.slug] = readCache(tg.slug);
+          nextOnline[tg.slug] = false;
+        }
+      }));
+      if (!alive) return;
+      setModels(nextModels);
+      setOnline(nextOnline);
+    })();
+
+    return () => { alive = false; };
+  }, [list]);
+
+  return { models, online };
+}

package/src/interfaces/web/src/hooks/useRecorder.ts

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { t } from "../i18n";
+
+/**
+ * Voice notes in the browser.
+ *
+ * One recorder, three states: idle → recording → a File you can attach. The
+ * container is whatever this browser will actually produce — Chromium records
+ * Opus in WebM, Safari records AAC in MP4 — and the extension follows it, so
+ * the daemon stores the result as audio rather than as a video with no picture.
+ */
+
+interface Container {
+  mime: string;
+  ext: string;
+}
+
+const CONTAINERS: Container[] = [
+  { mime: "audio/webm;codecs=opus", ext: ".weba" },
+  { mime: "audio/webm", ext: ".weba" },
+  { mime: "audio/ogg;codecs=opus", ext: ".ogg" },
+  { mime: "audio/mp4", ext: ".m4a" },
+];
+
+function pickContainer(): Container {
+  if (typeof MediaRecorder === "undefined") return { mime: "", ext: ".weba" };
+  for (const c of CONTAINERS) {
+    try {
+      if (MediaRecorder.isTypeSupported(c.mime)) return c;
+    } catch {
+      /* isTypeSupported throws on some old builds; try the next one */
+    }
+  }
+  return { mime: "", ext: ".weba" };
+}
+
+/** Whether this page is allowed to open a microphone at all. getUserMedia is
+ *  gated on a secure context, so the panel served over plain http:// on a LAN
+ *  address has no mic — worth saying out loud instead of failing silently. */
+export function canRecord(): boolean {
+  return typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && typeof MediaRecorder !== "undefined";
+}
+
+export interface Recording {
+  file: File;
+  seconds: number;
+}
+
+export interface RecorderApi {
+  recording: boolean;
+  /** Whole seconds elapsed, for the timer. */
+  seconds: number;
+  /** Rolling loudness, newest last, each 0..1 — the little waveform. */
+  levels: number[];
+  error: string | null;
+  start: () => Promise<void>;
+  /** Stop and keep what was recorded. Null when nothing usable came out. */
+  stop: () => Promise<Recording | null>;
+  /** Stop and throw it away. */
+  cancel: () => void;
+}
+
+const BARS = 28;
+
+export function useRecorder(): RecorderApi {
+  const [recording, setRecording] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const [levels, setLevels] = useState<number[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const streamRef = useRef<MediaStream | null>(null);
+  const recRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+  const audioCtxRef = useRef<AudioContext | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const keepRef = useRef(true);
+  const startedAtRef = useRef(0);
+
+  // Everything this hook opened, closed in one place: the tracks (so the
+  // browser's recording indicator goes away), the meter loop and the timer.
+  const teardown = useCallback(() => {
+    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    rafRef.current = null;
+    if (timerRef.current) clearInterval(timerRef.current);
+    timerRef.current = null;
+    streamRef.current?.getTracks().forEach((tr) => tr.stop());
+    streamRef.current = null;
+    audioCtxRef.current?.close().catch(() => {});
+    audioCtxRef.current = null;
+  }, []);
+
+  useEffect(() => () => teardown(), [teardown]);
+
+  const start = useCallback(async () => {
+    setError(null);
+    if (!canRecord()) {
+      setError(t("chat_ui.rec_insecure"));
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true },
+      });
+      streamRef.current = stream;
+      const container = pickContainer();
+      const rec = new MediaRecorder(stream, container.mime ? { mimeType: container.mime } : undefined);
+      chunksRef.current = [];
+      keepRef.current = true;
+      rec.ondataavailable = (e) => {
+        if (e.data && e.data.size) chunksRef.current.push(e.data);
+      };
+      recRef.current = rec;
+      rec.start(250);
+      startedAtRef.current = Date.now();
+      setSeconds(0);
+      setLevels([]);
+      setRecording(true);
+
+      timerRef.current = setInterval(
+        () => setSeconds(Math.floor((Date.now() - startedAtRef.current) / 1000)),
+        250,
+      );
+
+      // The bars: RMS of the raw waveform, sampled per frame. Cosmetic, and it
+      // is the only feedback that the mic is actually picking anything up.
+      try {
+        const Ctx = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+        const ctx = new Ctx();
+        audioCtxRef.current = ctx;
+        const analyser = ctx.createAnalyser();
+        analyser.fftSize = 1024;
+        ctx.createMediaStreamSource(stream).connect(analyser);
+        const buf = new Uint8Array(analyser.fftSize);
+        let frame = 0;
+        const tick = () => {
+          rafRef.current = requestAnimationFrame(tick);
+          // ~10 bars a second: one per 6 frames, so the strip scrolls at a
+          // readable pace instead of blurring.
+          if (frame++ % 6) return;
+          analyser.getByteTimeDomainData(buf);
+          let sum = 0;
+          for (const v of buf) {
+            const d = (v - 128) / 128;
+            sum += d * d;
+          }
+          const rms = Math.sqrt(sum / buf.length);
+          setLevels((prev) => [...prev, Math.min(1, rms * 3)].slice(-BARS));
+        };
+        tick();
+      } catch {
+        /* no meter on this browser; the timer still says it is recording */
+      }
+    } catch (e) {
+      teardown();
+      setRecording(false);
+      const name = (e as Error)?.name;
+      setError(name === "NotAllowedError" ? t("chat_ui.rec_denied") : t("chat_ui.rec_failed"));
+    }
+  }, [teardown]);
+
+  const finish = useCallback(
+    (keep: boolean) =>
+      new Promise<Recording | null>((resolve) => {
+        const rec = recRef.current;
+        keepRef.current = keep;
+        if (!rec || rec.state === "inactive") {
+          teardown();
+          setRecording(false);
+          return resolve(null);
+        }
+        const elapsed = Math.max(1, Math.round((Date.now() - startedAtRef.current) / 1000));
+        rec.onstop = () => {
+          const parts = chunksRef.current;
+          chunksRef.current = [];
+          recRef.current = null;
+          const type = rec.mimeType || pickContainer().mime || "audio/webm";
+          teardown();
+          setRecording(false);
+          setLevels([]);
+          if (!keepRef.current || !parts.length) return resolve(null);
+          const ext = CONTAINERS.find((c) => type.startsWith(c.mime.split(";")[0]))?.ext || ".weba";
+          const blob = new Blob(parts, { type: type.split(";")[0] });
+          const stamp = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
+          resolve({ file: new File([blob], `voice-${stamp}${ext}`, { type: blob.type }), seconds: elapsed });
+        };
+        rec.stop();
+      }),
+    [teardown],
+  );
+
+  const stop = useCallback(() => finish(true), [finish]);
+  const cancel = useCallback(() => {
+    void finish(false);
+  }, [finish]);
+
+  return { recording, seconds, levels, error, start, stop, cancel };
+}

package/src/interfaces/web/src/hooks/useTokenBootstrap.ts

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
-import { getToken, setToken, http, HttpError, Pair } from "../lib/api";
+import { apiUrl, recoverConnection } from "../lib/net";
+import { getToken, setToken, http, HttpError, Pair, Net } from "../lib/api";
+import { loadEnginePresets } from "../components/settings/providers/typeStyles";
 import { STORAGE } from "../constants";
 import { deviceLabel } from "../lib/device";
 
@@ -55,13 +57,21 @@ export function useTokenBootstrap(): AuthState {
   useEffect(() => {
     let cancelled = false;
     (async () => {
-      // 1. Is the daemon even up?
+      // 1. Is the daemon even up — at THIS address?
+      //
+      // An installed app launches at whatever URL it was installed from, and
+      // that URL is a promise the network cannot always keep: off the Wi-Fi,
+      // or with Tailscale down, it is simply gone. Before reporting the daemon
+      // as unreachable, try the other addresses it told us about.
       try {
-        const probe = await fetch("/api/health");
+        const probe = await fetch(apiUrl("/api/health"));
         if (!probe.ok) throw new Error(`HTTP ${probe.status}`);
       } catch (e) {
-        if (!cancelled) setState({ status: "error", reason: String(e) });
-        return;
+        const recovered = await recoverConnection();
+        if (recovered === null) {
+          if (!cancelled) setState({ status: "error", reason: String(e) });
+          return;
+        }
       }
 
       // 2a. Scan-to-login: `#pair=<pairing_id>` from a QR. Confirm the nonce
@@ -83,6 +93,8 @@ export function useTokenBootstrap(): AuthState {
           // confirm left the device with no way to retry: the nonce was spent
           // and the link that carried it was already gone from the URL.
           history.replaceState(null, "", window.location.pathname + window.location.search);
+          void loadEnginePresets();
+          void Net.endpoints().catch(() => {});
           setState({ status: "ok" });
           return;
         } catch {
@@ -107,7 +119,7 @@ export function useTokenBootstrap(): AuthState {
 
       // 3. Loopback endpoint — only succeeds on local same-origin requests.
       try {
-        const t = await fetch("/api/admin/web-token");
+        const t = await fetch(apiUrl("/api/admin/web-token"));
         if (t.ok) {
           const body = await t.json();
           if (body?.token) {
@@ -126,6 +138,11 @@ export function useTokenBootstrap(): AuthState {
       // 5. Validate the token with one cheap authenticated call.
       try {
         await http.get("/api/projects");
+        // Authenticated at last — now the shared model catalog can load.
+        void loadEnginePresets();
+        // And now the daemon's other addresses can be cached, which is what
+        // makes the failover above possible the NEXT time this address dies.
+        void Net.endpoints().catch(() => {});
         if (!cancelled) setState({ status: "ok" });
       } catch (e) {
         if (e instanceof HttpError && (e.status === 401 || e.status === 403)) {