@agentprojectcontext/apx 1.25.0 → 1.27.2

package/src/interfaces/web/src/components/voice/VoiceSttCard.tsx

@@ -0,0 +1,72 @@
+import { Field } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { WHISPER_MODELS, type TranscriptionConfig } from "../../lib/api/voice";
+
+// STT (speech-to-text) configuration. Persisted under config.transcription.
+// The actual capture happens in the deck overlay / Telegram / CLI; here the
+// owner just picks the backend + (for local whisper) the model + language.
+
+interface Props {
+  config: TranscriptionConfig;
+  onPatch: (set: Record<string, unknown>, unset?: string[]) => void;
+  busy?: boolean;
+}
+
+const PROVIDER_OPTIONS = [
+  { value: "auto", label: "Automático (local, luego OpenAI)" },
+  { value: "local", label: "Local — faster-whisper (offline)" },
+  { value: "openai", label: "OpenAI — Whisper-1 (cloud)" },
+];
+
+const LANG_OPTIONS = [
+  { value: "auto", label: "Auto-detectar" },
+  { value: "es", label: "Español" },
+  { value: "en", label: "Inglés" },
+  { value: "pt", label: "Portugués" },
+  { value: "fr", label: "Francés" },
+  { value: "it", label: "Italiano" },
+  { value: "de", label: "Alemán" },
+];
+
+export function VoiceSttCard({ config, onPatch, busy }: Props) {
+  const provider = config.provider || "auto";
+  const local = config.local || {};
+  const model = local.model || "small";
+  const language = local.language || "auto";
+  const usesLocal = provider !== "openai";
+
+  return (
+    <div className="space-y-3">
+      <Field label="Motor de transcripción" hint="Local usa faster-whisper (requiere python3 + faster-whisper). OpenAI usa la key de engines.openai.">
+        <UiSelect
+          value={provider}
+          onChange={(v) => onPatch({ "transcription.provider": v })}
+          options={PROVIDER_OPTIONS}
+          disabled={busy}
+          className="max-w-md"
+        />
+      </Field>
+
+      {usesLocal && (
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <Field label="Modelo local (whisper)" hint="Más grande = más preciso y más lento.">
+            <UiSelect
+              value={model}
+              onChange={(v) => onPatch({ "transcription.local.model": v })}
+              options={WHISPER_MODELS.map((m) => ({ value: m, label: m }))}
+              disabled={busy}
+            />
+          </Field>
+          <Field label="Idioma" hint='Para español, fijá "Español" mejora la precisión.'>
+            <UiSelect
+              value={language}
+              onChange={(v) => onPatch({ "transcription.local.language": v })}
+              options={LANG_OPTIONS}
+              disabled={busy}
+            />
+          </Field>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/voice/VoiceTestCard.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { Play, Square, Volume2 } from "lucide-react";
+import { Button, Field, Input, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { useTtsPlayer } from "./useTtsPlayer";
+import { Voice, TTS_PROVIDER_META, type TtsEngineInfo, type TtsMode, type TtsSayResult } from "../../lib/api/voice";
+
+// "Decir esto" tester. Lets you pick which engine to synthesize with (overriding
+// the saved default) and add a free-text speaking-style instruction, then plays
+// the resulting audio in-browser via /tts/say. Style only affects engines that
+// support it (today: Gemini); other engines ignore it.
+
+interface Props {
+  engines: TtsEngineInfo[];
+  /** Saved single-mode default ("auto" = use the chain/router). */
+  defaultProvider: string;
+  mode: TtsMode;
+}
+
+export function VoiceTestCard({ engines, defaultProvider, mode }: Props) {
+  const toast = useToast();
+  const { play, stop, playing, loading: playLoading } = useTtsPlayer();
+  const [text, setText] = useState("Hola, soy APX. Esto es una prueba de voz.");
+  // "" = use the saved default; otherwise force a specific engine.
+  const [engine, setEngine] = useState("");
+  const [style, setStyle] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [last, setLast] = useState<TtsSayResult | null>(null);
+
+  const defaultLabel =
+    mode === "single" && defaultProvider && defaultProvider !== "auto"
+      ? `Por defecto (${TTS_PROVIDER_META[defaultProvider]?.name || defaultProvider})`
+      : "Por defecto (cadena)";
+
+  const options = [
+    { value: "", label: defaultLabel },
+    ...engines.map((e) => ({
+      value: e.id,
+      label: `${TTS_PROVIDER_META[e.id]?.name || e.id}${e.available ? "" : " · no disponible"}`,
+    })),
+  ];
+
+  const say = async () => {
+    const t = text.trim();
+    if (!t) {
+      toast.error("Escribí algo para decir.");
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await Voice.say({
+        text: t,
+        provider: engine || undefined,
+        style: style.trim() || undefined,
+      });
+      setLast(res);
+      await play(res.audio_path);
+    } catch (e) {
+      toast.error((e as Error).message || "No se pudo sintetizar.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Field label="Motor" hint="Override del por defecto para probar.">
+          <UiSelect value={engine} onChange={setEngine} options={options} />
+        </Field>
+        <Field label="Estilo (solo Gemini)" hint="Cómo querés que hable. Vacío = sin estilo.">
+          <Input
+            value={style}
+            onChange={(e) => setStyle(e.target.value)}
+            placeholder="hablá en tono alegre y enérgico"
+            data-testid="voice-test-style"
+          />
+        </Field>
+      </div>
+      <Field label="Texto a decir">
+        <Textarea
+          rows={2}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Escribí lo que querés que diga…"
+          data-testid="voice-test-input"
+        />
+      </Field>
+      <div className="flex items-center gap-2">
+        <Button variant="primary" onClick={say} loading={busy} disabled={playLoading} data-testid="voice-test-say">
+          <Volume2 className="size-4" /> Decir esto
+        </Button>
+        {playing ? (
+          <Button variant="secondary" onClick={stop} data-testid="voice-test-stop">
+            <Square className="size-4" /> Parar
+          </Button>
+        ) : last ? (
+          <Button variant="secondary" onClick={() => play(last.audio_path)} loading={playLoading} data-testid="voice-test-replay">
+            <Play className="size-4" /> Repetir
+          </Button>
+        ) : null}
+        {last && (
+          <span className="text-xs text-muted-fg">
+            Motor: <strong>{last.provider}</strong>
+            {last.duration_s ? ` · ${last.duration_s.toFixed(1)}s` : ""}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/voice/useTtsPlayer.ts

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fetchTtsAudioUrl } from "../../lib/api/voice";
+
+// Small player hook: fetches a sandboxed /voice/tts blob (auth bearer) for an
+// absolute audio_path and plays it in an <audio> element. Revokes the object
+// URL on the next play / unmount so blobs don't leak.
+export function useTtsPlayer() {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const urlRef = useRef<string | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const cleanup = useCallback(() => {
+    if (urlRef.current) {
+      URL.revokeObjectURL(urlRef.current);
+      urlRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+      cleanup();
+    };
+  }, [cleanup]);
+
+  const play = useCallback(async (audioPath: string) => {
+    setLoading(true);
+    try {
+      cleanup();
+      const url = await fetchTtsAudioUrl(audioPath);
+      urlRef.current = url;
+      if (!audioRef.current) {
+        audioRef.current = new Audio();
+      }
+      const el = audioRef.current;
+      el.src = url;
+      el.onended = () => setPlaying(false);
+      el.onerror = () => setPlaying(false);
+      await el.play();
+      setPlaying(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [cleanup]);
+
+  const stop = useCallback(() => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+    }
+    setPlaying(false);
+  }, []);
+
+  return { play, stop, playing, loading };
+}

package/src/interfaces/web/src/constants/index.ts

@@ -0,0 +1,91 @@
+// Centralised constants. Nothing in src/components or src/screens should
+// hard-code a route, a poll interval, or a magic number — they import from
+// here. Adding a new tunable? Put it here first.
+
+export const DAEMON = {
+  /** Localhost daemon URL — used when the SPA is opened on the same host. */
+  defaultPort: 7430,
+} as const;
+
+/** SWR refresh intervals (ms). Tuned for "feels live" without thrashing. */
+export const REFRESH = {
+  health: 5_000,
+  projects: 15_000,
+  telegramStatus: 8_000,
+  routines: 10_000,
+  pairList: 12_000,
+} as const;
+
+/** Local-storage keys. */
+export const STORAGE = {
+  theme: "apx.theme",
+  token: "apx.token",
+  sidebarCollapsed: "apx.sidebar.collapsed",
+  language: "apx.lang",
+  robyChat: "apx.roby.chat",
+} as const;
+
+/** Tailwind class tokens reused across components. */
+export const UI = {
+  cardClass: "rounded-xl border border-border bg-card",
+  inputClass:
+    "w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm outline-none focus:border-ring focus:ring-1 focus:ring-ring",
+  sectionTitleClass: "text-lg font-semibold tracking-tight",
+} as const;
+
+/** Auth bypass — the SPA reads `#token=<hex>` on first paint. */
+export const URL_TOKEN_FRAGMENT_KEY = "token";
+
+/** Default polling for chat — used when stream falls back. */
+export const CHAT = {
+  maxBufferChars: 200_000,
+} as const;
+
+/** Engine ids the web knows about. The daemon's /engines returns the truth;
+ *  this is the order we present them in dropdowns. */
+export const ENGINE_ORDER = [
+  "anthropic",
+  "openai",
+  "gemini",
+  "groq",
+  "openrouter",
+  "ollama",
+  "mock",
+] as const;
+
+/** Permission modes accepted by the super-agent. Must match
+ *  src/core/agent/permission-modes.js on the daemon. */
+export const PERMISSION_MODES = ["total", "automatico", "permiso"] as const;
+export type PermissionMode = (typeof PERMISSION_MODES)[number];
+
+/** Routine kinds — must match src/host/daemon/routines.js. */
+export const ROUTINE_KINDS = [
+  "heartbeat",
+  "exec_agent",
+  "super_agent",
+  "telegram",
+  "shell",
+] as const;
+export type RoutineKind = (typeof ROUTINE_KINDS)[number];
+
+/** Project icon palette — used by Sidebar avatars. */
+export const PROJECT_TONES = ["sky", "violet", "emerald", "amber", "rose", "indigo", "teal", "fuchsia"] as const;
+export type ProjectTone = (typeof PROJECT_TONES)[number];
+
+/** Brand assets served from /public/logo and /public/favicon. */
+export const LOGO = {
+  icon: {
+    light: "/logo/logo_only_white.webp",
+    dark: "/logo/logo_only_dark.webp",
+  },
+  full: {
+    light: "/logo/logo_white.webp",
+    dark: "/logo/logo_dark.webp",
+  },
+  vertical: {
+    light: "/logo/logo_vertical_white.webp",
+    dark: "/logo/logo_vertical_dark.webp",
+  },
+} as const;
+
+export type LogoVariant = keyof typeof LOGO;

package/src/interfaces/web/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

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

@@ -0,0 +1,276 @@
+import { useCallback, useRef, useState } from "react";
+import { SuperAgent, Agents } from "../lib/api";
+import type { ChatStreamEvent, ChatUsage, ConversationMessage } from "../types/daemon";
+
+export type ToolStatus = "running" | "done" | "error" | "deduped";
+
+export interface ToolPart {
+  kind: "tool";
+  id: string;
+  tool: string;
+  args?: Record<string, unknown>;
+  result?: unknown;
+  status: ToolStatus;
+}
+
+export interface TextPart {
+  kind: "text";
+  text: string;
+}
+
+export type ChatPart = TextPart | ToolPart;
+
+export interface ChatMsg {
+  role: "user" | "assistant";
+  /** Ordered parts of the turn: interleaved assistant text and tool calls. */
+  parts: ChatPart[];
+  ts: string;
+  pending?: boolean;
+  /** Model that produced an assistant turn (after routing). */
+  model?: string;
+  /** Token accounting from the `final` event. */
+  usage?: ChatUsage;
+  /** Operational notes (engine fallbacks, retries, suppressions). */
+  notes?: string[];
+}
+
+export interface SendOptions {
+  /** Empty / undefined → Auto (router decides). Forwarded as body.model. */
+  model?: string;
+  /** When set, talk to a project agent (non-streaming) instead of Roby. */
+  agentSlug?: string;
+}
+
+export interface UseChatResult {
+  msgs: ChatMsg[];
+  send: (text: string, opts?: SendOptions) => Promise<void>;
+  stop: () => void;
+  clear: () => void;
+  streaming: boolean;
+}
+
+/** Concatenate the text parts of a message (for clipboard / history). */
+export function textOf(msg: ChatMsg): string {
+  return msg.parts
+    .filter((p): p is TextPart => p.kind === "text")
+    .map((p) => p.text)
+    .join("\n\n")
+    .trim();
+}
+
+const userPart = (text: string): ChatPart[] => [{ kind: "text", text }];
+
+function isErrorResult(result: unknown): boolean {
+  if (!result || typeof result !== "object") return false;
+  const r = result as Record<string, unknown>;
+  return "error" in r && !!r.error;
+}
+
+/**
+ * Pure reducer: apply one NDJSON stream event to an assistant turn and return
+ * the next turn. Every surface that consumes the super-agent stream (ChatTab,
+ * the floating Roby sheet) uses this so the rich rendering — interleaved text,
+ * collapsible tool calls, routing notes, usage — stays identical everywhere.
+ *
+ * The `error` and stream-close events are NOT handled here (callers decide how
+ * to surface failures and finalise `pending`); everything that mutates the
+ * turn's content lives here.
+ */
+export function applyStreamEvent(turn: ChatMsg, ev: ChatStreamEvent): ChatMsg {
+  const withNote = (note: string): ChatMsg => ({ ...turn, notes: [...(turn.notes || []), note] });
+  switch (ev.type) {
+    case "model_start":
+      return ev.model ? { ...turn, model: ev.model } : turn;
+    case "model_routed": {
+      const next = ev.model ? { ...turn, model: ev.model } : turn;
+      return ev.from_fallback
+        ? { ...next, notes: [...(next.notes || []), `routing fell back → ${ev.model}`] }
+        : next;
+    }
+    case "engine_failed":
+      return withNote(`engine ${ev.model || "?"} failed → ${ev.retry_with || "retry"}`);
+    case "model_retry":
+      return withNote(`retry (${ev.reason || "?"})`);
+    case "tools_suppressed":
+      return withNote(`tools suppressed: ${(ev.tools || []).join(", ")}`);
+    case "assistant_text":
+      return ev.text ? { ...turn, parts: [...turn.parts, { kind: "text", text: ev.text }] } : turn;
+    case "tool_start":
+      return ev.trace
+        ? {
+            ...turn,
+            parts: [
+              ...turn.parts,
+              {
+                kind: "tool",
+                id: ev.trace.id,
+                tool: ev.trace.tool,
+                args: ev.trace.args,
+                status: "running",
+              },
+            ],
+          }
+        : turn;
+    case "tool_deduped":
+      return ev.trace
+        ? {
+            ...turn,
+            parts: turn.parts.map((p) =>
+              p.kind === "tool" && p.id === ev.trace!.id ? { ...p, status: "deduped" } : p,
+            ),
+          }
+        : turn;
+    case "tool_result":
+      if (!ev.trace) return turn;
+      {
+        const errored = isErrorResult(ev.trace.result);
+        return {
+          ...turn,
+          parts: turn.parts.map((p) =>
+            p.kind === "tool" && p.id === ev.trace!.id
+              ? {
+                  ...p,
+                  result: ev.trace!.result,
+                  status: errored ? "error" : p.status === "deduped" ? "deduped" : "done",
+                }
+              : p,
+          ),
+        };
+      }
+    case "final":
+      return {
+        ...turn,
+        pending: false,
+        usage: ev.result?.usage ?? turn.usage,
+        model: turn.model ?? ev.result?.name,
+        parts:
+          ev.result?.text && !turn.parts.some((p) => p.kind === "text")
+            ? [...turn.parts, { kind: "text", text: ev.result.text }]
+            : turn.parts,
+      };
+    default: {
+      // Raw-delta engines (no assistant_text) — append to the trailing text.
+      const piece = ev.delta || ev.content || "";
+      if (!piece) return turn;
+      const parts = [...turn.parts];
+      const last = parts[parts.length - 1];
+      if (last && last.kind === "text") parts[parts.length - 1] = { ...last, text: last.text + piece };
+      else parts.push({ kind: "text", text: piece });
+      return { ...turn, parts };
+    }
+  }
+}
+
+/**
+ * Single source of truth for the project chat. For Roby (super-agent) it
+ * consumes the NDJSON event stream and builds a rich, opencode-style turn:
+ * interleaved assistant text and tool calls (with args + results), plus model
+ * routing notes and token usage. For a named project agent it falls back to
+ * the blocking `Agents.chat` call (those are direct LLM calls with no tools).
+ */
+export function useChat(pid: string, onError?: (msg: string) => void): UseChatResult {
+  const [msgs, setMsgs] = useState<ChatMsg[]>([]);
+  const [streaming, setStreaming] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const convoRef = useRef<string | undefined>(undefined);
+
+  // Mutate the trailing assistant turn in place.
+  const patchLast = useCallback((fn: (m: ChatMsg) => ChatMsg) => {
+    setMsgs((curr) => {
+      const copy = [...curr];
+      const last = copy[copy.length - 1];
+      if (last && last.role === "assistant") copy[copy.length - 1] = fn(last);
+      return copy;
+    });
+  }, []);
+
+  const applyEvent = useCallback(
+    (ev: ChatStreamEvent) => {
+      if (ev.type === "error") {
+        onError?.(ev.error || "stream error");
+        return;
+      }
+      patchLast((m) => applyStreamEvent(m, ev));
+    },
+    [patchLast, onError],
+  );
+
+  const send = useCallback(
+    async (text: string, opts: SendOptions = {}) => {
+      const trimmed = text.trim();
+      if (!trimmed || streaming) return;
+      const nowIso = () => new Date().toISOString();
+      const history: ConversationMessage[] = msgs.map((m) => ({
+        role: m.role,
+        content: textOf(m),
+      }));
+
+      setMsgs((curr) => [
+        ...curr,
+        { role: "user", parts: userPart(trimmed), ts: nowIso() },
+        { role: "assistant", parts: [], ts: nowIso(), pending: true },
+      ]);
+      setStreaming(true);
+
+      // ── Project agent: blocking call, single text part, no tools. ──────────
+      if (opts.agentSlug) {
+        try {
+          const out = await Agents.chat(pid, opts.agentSlug, {
+            prompt: trimmed,
+            conversation_id: convoRef.current,
+          });
+          convoRef.current = out.conversation_id;
+          patchLast((m) => ({
+            ...m,
+            pending: false,
+            model: out.engine,
+            parts: [{ kind: "text", text: out.text }],
+          }));
+        } catch (e) {
+          onError?.((e as Error)?.message || "fallo");
+          setMsgs((curr) => curr.filter((_, i) => i !== curr.length - 1));
+        } finally {
+          setStreaming(false);
+        }
+        return;
+      }
+
+      // ── Roby (super-agent): NDJSON event stream with tools. ────────────────
+      const ctrl = new AbortController();
+      abortRef.current = ctrl;
+      try {
+        await SuperAgent.stream(
+          pid,
+          { prompt: trimmed, previousMessages: history, model: opts.model || undefined, channel: "web" },
+          applyEvent,
+          ctrl.signal,
+        );
+        patchLast((m) => ({ ...m, pending: false }));
+      } catch (e) {
+        if (ctrl.signal.aborted) {
+          patchLast((m) => ({
+            ...m,
+            pending: false,
+            parts: [...m.parts, { kind: "text", text: "[detenido]" }],
+          }));
+        } else {
+          onError?.((e as Error)?.message || "stream falló");
+          setMsgs((curr) => curr.filter((_, i) => i !== curr.length - 1));
+        }
+      } finally {
+        setStreaming(false);
+        abortRef.current = null;
+      }
+    },
+    [pid, msgs, streaming, applyEvent, patchLast, onError],
+  );
+
+  const stop = useCallback(() => abortRef.current?.abort(), []);
+  const clear = useCallback(() => {
+    if (streaming) return;
+    convoRef.current = undefined;
+    setMsgs([]);
+  }, [streaming]);
+
+  return { msgs, send, stop, clear, streaming };
+}

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

@@ -0,0 +1,12 @@
+import useSWR from "swr";
+import { Health } from "../lib/api";
+import { REFRESH } from "../constants";
+
+export function useDaemonStatus() {
+  const { data, error, isLoading } = useSWR(
+    "/health",
+    () => Health.get(),
+    { refreshInterval: REFRESH.health },
+  );
+  return { health: data, error, isLoading, isUp: !error && !!data };
+}

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

@@ -0,0 +1,12 @@
+import useSWR from "swr";
+import { Pair } from "../lib/api";
+import { REFRESH } from "../constants";
+
+export function useDevices() {
+  const { data, error, isLoading, mutate } = useSWR(
+    "/pair/list",
+    () => Pair.list(),
+    { refreshInterval: REFRESH.pairList },
+  );
+  return { clients: data?.clients || [], error, isLoading, mutate };
+}

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

@@ -0,0 +1,10 @@
+import useSWR from "swr";
+import { Engines } from "../lib/api";
+
+export function useEngines() {
+  const { data, error, isLoading, mutate } = useSWR(
+    "/engines",
+    () => Engines.list(),
+  );
+  return { engines: data?.engines || [], error, isLoading, mutate };
+}