@agentprojectcontext/apx 1.24.0 → 1.27.1

package/src/interfaces/web/src/components/RobyBubble.tsx

@@ -0,0 +1,213 @@
+// "Chat con Roby" sheet — the super-agent (APX-level agent, persona from
+// identity.json) reachable from anywhere. The launcher now lives in the left
+// rail (below Settings); this component only owns the Sheet + conversation.
+// Open state is lifted to the App shell and passed in via props.
+//
+// Wraps the streaming super-agent endpoint
+// (POST /projects/0/super-agent/chat/stream, project id 0 = base). The
+// conversation is persisted to localStorage so it survives refresh and route
+// changes — the *same* thread until "Nuevo chat". Tool activity is rendered
+// inline (collapsible args + results) so you can see exactly what Roby does.
+
+import { useEffect, useRef, useState } from "react";
+import { Bot, Plus } from "lucide-react";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./ui/sheet";
+import { Button } from "./ui/button";
+import { ChatInput } from "./ui/chat-input";
+import { ModelPicker } from "./chat/ModelPicker";
+import { MessageList } from "./chat/MessageList";
+import { ContextBar } from "./chat/ContextBar";
+import { applyStreamEvent, textOf, type ChatMsg } from "../hooks/useChat";
+import { SuperAgent } from "../lib/api";
+import { STORAGE } from "../constants";
+import { useToast } from "./Toast";
+import { t } from "../i18n";
+import type { ChatStreamEvent, ConversationMessage } from "../types/daemon";
+
+// Load any persisted conversation, dropping half-finished (pending) turns.
+function loadStored(): ChatMsg[] {
+  try {
+    const raw = localStorage.getItem(STORAGE.robyChat);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as ChatMsg[];
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((m) => m && Array.isArray(m.parts) && !m.pending);
+  } catch {
+    return [];
+  }
+}
+
+export function RobyBubble({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const toast = useToast();
+  const [msgs, setMsgs] = useState<ChatMsg[]>(loadStored);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [model, setModel] = useState("");
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Persist the settled conversation (skip pending turns).
+  useEffect(() => {
+    const settled = msgs.filter((m) => !m.pending);
+    try {
+      if (settled.length) localStorage.setItem(STORAGE.robyChat, JSON.stringify(settled));
+      else localStorage.removeItem(STORAGE.robyChat);
+    } catch {
+      /* storage full / unavailable — non-fatal */
+    }
+  }, [msgs]);
+
+  const newChat = () => {
+    if (busy) return;
+    setMsgs([]);
+    setDraft("");
+    try {
+      localStorage.removeItem(STORAGE.robyChat);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  // Abort any in-flight stream on unmount.
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  const stop = () => {
+    abortRef.current?.abort();
+    setBusy(false);
+  };
+
+  const patchLast = (fn: (m: ChatMsg) => ChatMsg) =>
+    setMsgs((curr) => {
+      const copy = [...curr];
+      const last = copy[copy.length - 1];
+      if (last?.role === "assistant") copy[copy.length - 1] = fn(last);
+      return copy;
+    });
+
+  const send = async () => {
+    const prompt = draft.trim();
+    if (!prompt || busy) return;
+    const now = new Date().toISOString();
+    const history: ConversationMessage[] = msgs
+      .filter((m) => !m.pending)
+      .map((m) => ({ role: m.role, content: textOf(m) }));
+    setMsgs((curr) => [
+      ...curr,
+      { role: "user", parts: [{ kind: "text", text: prompt }], ts: now },
+      { role: "assistant", parts: [], ts: now, pending: true },
+    ]);
+    setDraft("");
+    setBusy(true);
+
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+    let errored = false;
+
+    const onEvent = (ev: ChatStreamEvent) => {
+      if (ev?.type === "error") {
+        errored = true;
+        toast.error(ev.error || "error");
+        setMsgs((curr) => {
+          const copy = [...curr];
+          const last = copy[copy.length - 1];
+          if (last?.role === "assistant" && last.pending) copy.pop();
+          return copy;
+        });
+        return;
+      }
+      patchLast((m) => applyStreamEvent(m, ev));
+    };
+
+    try {
+      await SuperAgent.stream(
+        0,
+        { prompt, previousMessages: history, model: model || undefined, channel: "web_sidebar" },
+        onEvent,
+        ctrl.signal,
+      );
+      patchLast((m) => ({ ...m, pending: false }));
+    } catch (e) {
+      if (ctrl.signal.aborted) {
+        patchLast((m) => ({
+          ...m,
+          pending: false,
+          parts: [...m.parts, { kind: "text", text: t("project.chat.stopped_marker") }],
+        }));
+      } else if (!errored) {
+        toast.error((e as Error).message);
+        setMsgs((curr) => {
+          const copy = [...curr];
+          const last = copy[copy.length - 1];
+          if (last?.role === "assistant" && last.pending) copy.pop();
+          return copy;
+        });
+      }
+    } finally {
+      if (abortRef.current === ctrl) abortRef.current = null;
+      setBusy(false);
+    }
+  };
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.info(t("project.chat.copied"));
+    } catch {
+      /* ignore */
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="flex w-full flex-col gap-0 p-0 sm:max-w-xl data-[side=right]:sm:max-w-xl"
+      >
+        <SheetHeader className="pr-12">
+          <SheetTitle className="flex items-center gap-2">
+            <Bot size={18} /> {t("roby.title")}
+            <span className="text-xs font-normal text-muted-fg">{t("roby.badge")}</span>
+          </SheetTitle>
+          <SheetDescription>{t("roby.desc")}</SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto">
+          {msgs.length === 0 ? (
+            <p className="mt-6 text-center text-sm text-muted-fg">{t("roby.empty")}</p>
+          ) : (
+            <MessageList msgs={msgs} onCopy={copyToClipboard} />
+          )}
+        </div>
+
+        <ContextBar msgs={msgs} />
+
+        <div className="border-t border-border p-3">
+          <ChatInput
+            value={draft}
+            onValueChange={setDraft}
+            onSubmit={() => void send()}
+            onStop={stop}
+            busy={busy}
+            placeholder={t("roby.placeholder")}
+            footer={<ModelPicker value={model} onChange={setModel} disabled={busy} />}
+          />
+          <div className="mt-1.5 flex justify-end">
+            <Button
+              size="xs"
+              variant="ghost"
+              onClick={newChat}
+              disabled={busy || msgs.length === 0}
+            >
+              <Plus className="size-3" /> {t("roby.new_chat")}
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/interfaces/web/src/components/Section.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+interface SectionProps {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+export function Section({ title, description, action, className, children }: SectionProps) {
+  return (
+    <section className={cn("rounded-xl border border-border bg-card p-5", className)}>
+      <header className="mb-4 flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+          {description && <p className="mt-0.5 text-sm text-muted-fg">{description}</p>}
+        </div>
+        {action}
+      </header>
+      <div>{children}</div>
+    </section>
+  );
+}
+
+export function Kbd({ children }: { children: ReactNode }) {
+  return (
+    <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-muted-fg">
+      {children}
+    </kbd>
+  );
+}
+
+export function StatusDot({ ok }: { ok: boolean | null }) {
+  return (
+    <span
+      className={cn(
+        "inline-block size-2 rounded-full",
+        ok === null ? "bg-muted-fg" : ok ? "bg-emerald-500" : "bg-red-500"
+      )}
+    />
+  );
+}

package/src/interfaces/web/src/components/TelegramChannelDialog.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { Button, Dialog, Field, Input, Switch } from "./ui";
+import { useToast } from "./Toast";
+import { Telegram } from "../lib/api";
+import { t } from "../i18n";
+import { secretHint } from "../lib/secrets";
+import type { TelegramChannel } from "../types/daemon";
+
+interface Props {
+  channel: TelegramChannel | null;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
+  const toast = useToast();
+  const [busy, setBusy] = useState(false);
+  const [draft, setDraft] = useState<TelegramChannel>({ name: "" });
+
+  useEffect(() => {
+    if (channel) setDraft({ ...channel, bot_token: "" });
+    else setDraft({ name: "" });
+  }, [channel?.name]);
+
+  const submit = async () => {
+    if (!draft.name?.trim()) { toast.error("name requerido"); return; }
+    setBusy(true);
+    try {
+      const isExisting = channel && channel.name !== "";
+      if (isExisting && channel?.name === draft.name) {
+        await Telegram.channels.patch(channel.name, draft);
+      } else {
+        await Telegram.channels.upsert(draft);
+      }
+      toast.success("Canal guardado.");
+      onSaved();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <Dialog
+      open={!!channel}
+      onClose={onClose}
+      title={channel?.name ? `Editar canal: ${channel.name}` : "Nuevo canal de Telegram"}
+      description="POST /telegram/channels (upsert) — PATCH /telegram/channels/:name (parcial)."
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={submit} loading={busy}>{t("common.save")}</Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <Field label="name (slug interno)">
+          <Input value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} disabled={!!channel?.name} />
+        </Field>
+        <Field label="bot_token" hint={channel?.bot_token ? secretHint(channel.bot_token) : "Token del BotFather. Se guarda en ~/.apx/config.json."}>
+          <Input
+            type="password"
+            value={draft.bot_token || ""}
+            onChange={(e) => setDraft({ ...draft, bot_token: e.target.value })}
+            placeholder={channel?.bot_token ? secretHint(channel.bot_token) : ""}
+          />
+        </Field>
+        <Field label="chat_id">
+          <Input value={draft.chat_id || ""} onChange={(e) => setDraft({ ...draft, chat_id: e.target.value })} />
+        </Field>
+        <Field label="project" hint="Slug o id del proyecto al que pinear este canal (opcional).">
+          <Input value={draft.project || ""} onChange={(e) => setDraft({ ...draft, project: e.target.value })} />
+        </Field>
+        <Field label="route_to_agent" hint="Agente que contesta; vacío = super-agent APX.">
+          <Input value={draft.route_to_agent || ""} onChange={(e) => setDraft({ ...draft, route_to_agent: e.target.value })} />
+        </Field>
+        <Field
+          label="owner_user_id"
+          hint="user_id de Telegram del dueño de este canal. Override del rol global a 'owner' acá. Si lo dejás vacío, el primer mensaje privado lo reclama."
+        >
+          <Input
+            value={draft.owner_user_id != null ? String(draft.owner_user_id) : ""}
+            onChange={(e) => {
+              const raw = e.target.value.trim();
+              setDraft({ ...draft, owner_user_id: raw === "" ? undefined : /^\d+$/.test(raw) ? Number(raw) : raw });
+            }}
+            placeholder="889721252"
+          />
+        </Field>
+        <Switch
+          checked={!!draft.respond_with_engine}
+          onChange={(v) => setDraft({ ...draft, respond_with_engine: v })}
+          label="Responder con engine (no echo)"
+        />
+      </div>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/TelegramSendDialog.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { Button, Dialog, Field, Textarea } from "./ui";
+import { useToast } from "./Toast";
+import { Telegram } from "../lib/api";
+import { t } from "../i18n";
+import type { TelegramChannel } from "../types/daemon";
+
+interface Props {
+  channel: TelegramChannel | null;
+  onClose: () => void;
+}
+
+export function TelegramSendDialog({ channel, onClose }: Props) {
+  const toast = useToast();
+  const [text, setText] = useState(t("admin.telegram_default_message"));
+  const [busy, setBusy] = useState(false);
+
+  const submit = async () => {
+    if (!text.trim() || !channel) return;
+    setBusy(true);
+    try {
+      await Telegram.send({ text, channel: channel.name });
+      toast.success("Mensaje enviado.");
+      onClose();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <Dialog
+      open={!!channel}
+      onClose={onClose}
+      title={channel ? `${t("admin.telegram_send_test_title")} ${channel.name}` : ""}
+      description={channel ? `chat_id: ${channel.chat_id || "—"}` : ""}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={submit} loading={busy}>Enviar</Button>
+        </>
+      }
+    >
+      <Field label="Texto">
+        <Textarea rows={4} value={text} onChange={(e) => setText(e.target.value)} />
+      </Field>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/Toast.tsx

@@ -0,0 +1,84 @@
+// Minimal toast system: a context provider + portal-free fixed container.
+// Exposes a `toast()` helper that any component can use without prop-drilling.
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+type ToastKind = "success" | "error" | "info";
+interface ToastItem {
+  id: number;
+  kind: ToastKind;
+  message: string;
+}
+
+interface ToastCtx {
+  show: (kind: ToastKind, message: string) => void;
+  success: (message: string) => void;
+  error:   (message: string) => void;
+  info:    (message: string) => void;
+}
+
+const Ctx = createContext<ToastCtx | null>(null);
+
+let nextId = 1;
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [items, setItems] = useState<ToastItem[]>([]);
+
+  const show = useCallback((kind: ToastKind, message: string) => {
+    const id = nextId++;
+    setItems((prev) => [...prev, { id, kind, message }]);
+    setTimeout(() => {
+      setItems((prev) => prev.filter((t) => t.id !== id));
+    }, 4500);
+  }, []);
+
+  const api = useMemo<ToastCtx>(() => ({
+    show,
+    success: (m) => show("success", m),
+    error:   (m) => show("error", m),
+    info:    (m) => show("info", m),
+  }), [show]);
+
+  // Expose globally so even non-React code (api error handlers) can fire.
+  useEffect(() => {
+    (window as any).__apxToast = api;
+    return () => { delete (window as any).__apxToast; };
+  }, [api]);
+
+  return (
+    <Ctx.Provider value={api}>
+      {children}
+      <div className="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2">
+        {items.map((t) => (
+          <div
+            key={t.id}
+            className={cn(
+              "pointer-events-auto overflow-hidden rounded-lg border bg-card px-3 py-2 text-sm shadow-lg",
+              t.kind === "success" && "border-emerald-500/40",
+              t.kind === "error"   && "border-destructive/60",
+              t.kind === "info"    && "border-border"
+            )}
+          >
+            <div className="flex items-start gap-2">
+              <span
+                className={cn(
+                  "mt-1 size-2 shrink-0 rounded-full",
+                  t.kind === "success" && "bg-emerald-500",
+                  t.kind === "error"   && "bg-destructive",
+                  t.kind === "info"    && "bg-sky-500"
+                )}
+              />
+              <span className="flex-1 break-words">{t.message}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Ctx.Provider>
+  );
+}
+
+export function useToast(): ToastCtx {
+  const v = useContext(Ctx);
+  if (!v) throw new Error("useToast must be used inside <ToastProvider>");
+  return v;
+}

package/src/interfaces/web/src/components/UiSelect.tsx

@@ -0,0 +1,74 @@
+import type { ElementType } from "react";
+import { cn } from "../lib/cn";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+
+export interface UiSelectOption {
+  value: string;
+  label: string;
+  icon?: ElementType;
+  description?: string;
+}
+
+// Thin, app-friendly wrapper over the base-ui Select primitive so call sites
+// can pass a simple { value, onChange, options } API instead of the compound
+// parts. Use this everywhere instead of a native <select>.
+export function UiSelect({
+  value,
+  onChange,
+  options,
+  placeholder = "— elegir —",
+  disabled,
+  className,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  options: UiSelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <Select value={value} onValueChange={(v) => onChange((v as string) ?? "")} disabled={disabled}>
+      <SelectTrigger className={cn("h-9 w-full", className)}>
+        {/* Show the option's label in the trigger, not the raw value key. */}
+        <SelectValue placeholder={placeholder}>
+          {(val) => options.find((o) => o.value === val)?.label ?? (val as string)}
+        </SelectValue>
+      </SelectTrigger>
+      {/* side=bottom + alignItemWithTrigger=false → dropdown sits BELOW the
+          trigger (not overlapping it). p-1.5 gives breathing room. */}
+      <SelectContent
+        side="bottom"
+        sideOffset={6}
+        align="start"
+        alignItemWithTrigger={false}
+        className="max-w-[min(20rem,var(--available-width))] p-1.5"
+      >
+        {options.map((o) => {
+          const Icon = o.icon;
+          return (
+            <SelectItem key={o.value} value={o.value}>
+              <span className="flex min-w-0 items-center gap-2">
+                {Icon ? <Icon className="size-4 shrink-0 text-muted-fg" /> : null}
+                {o.description ? (
+                  <span className="flex min-w-0 flex-col leading-tight">
+                    <span className="truncate font-medium">{o.label}</span>
+                    <span className="truncate text-[11px] text-muted-fg">{o.description}</span>
+                  </span>
+                ) : (
+                  <span className="truncate">{o.label}</span>
+                )}
+              </span>
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/interfaces/web/src/components/chat/Composer.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { ChatInput } from "../ui/chat-input";
+import { ModelPicker } from "./ModelPicker";
+import { t } from "../../i18n";
+
+interface Props {
+  onSend: (text: string) => void | Promise<void>;
+  onStop: () => void;
+  streaming: boolean;
+  /** Selected model override ("" = Auto). Omit to hide the picker. */
+  model?: string;
+  onModelChange?: (m: string) => void;
+}
+
+export function Composer({ onSend, onStop, streaming, model, onModelChange }: Props) {
+  const [text, setText] = useState("");
+
+  const submit = () => {
+    const v = text.trim();
+    if (!v) return;
+    setText("");
+    void onSend(v);
+  };
+
+  return (
+    <div className="border-t border-border bg-card/60 p-3">
+      <ChatInput
+        value={text}
+        onValueChange={setText}
+        onSubmit={submit}
+        onStop={onStop}
+        busy={streaming}
+        placeholder={t("project.chat.placeholder")}
+        maxRows={12}
+        footer={
+          onModelChange ? (
+            <ModelPicker value={model || ""} onChange={onModelChange} disabled={streaming} />
+          ) : undefined
+        }
+      />
+    </div>
+  );
+}