feat(pet): remove the pet's chat

Each question started a full AI session (a heavy process on a shared server, and one of a member's 4). A click on the pet now opens its window (PetPanel): its name (rename), a pat, and the status strip. PetChat, its off-screen terminal, its AI hand-off and its strings are gone; the window is where the pet's own care comes next.
2026-11-03 12:08:14 +07:00
parent 70d7cf30c2
commit aa7f1b1c60
11 changed files with 103 additions and 866 deletions
@@ -1,595 +0,0 @@
 /**
 * @file PetChat.tsx
 * @description The pet's chat window — its whole UI: clicking the pet opens
 * it. Above the conversation sits what the pet knows (`info`: live / waiting /
 * errored, the sessions that need you, Mute, Clear alerts — `SagiInfo.tsx`).
 * Before a chat runs, a question the pet can answer itself (`onLocal`: status,
 * who are you…) is answered right here; anything else — and every message once
 * a chat runs — goes to the AI: the first message starts a
 * session of the user's DEFAULT AI tool (`agenthub.defaultTool`, Claude or
 * Codex — the two with a readable transcript) in the "Sagi" workspace, in its
 * first free tab (`startInFreeTabDetailed`), and the conversation is shown as
 * chat bubbles read from the session's transcript. Follow-ups are typed into
 * that session's pane through a terminal attached OFF-SCREEN (`TerminalView`
 * in a fixed box left of the viewport — `submitToRun` needs a mounted,
 * attached pane, exactly like the workspace's own Chat view), so nothing new
 * reaches the server. A menu the CLI asks with (a permission or trust prompt)
 * is read off that pane and answered with `PaneMenuCard`. The chat is kept in
 * `localStorage` (`agenthub.pet.chat`) while its pane lives, so closing and
 * reopening the window continues it; **New chat** STOPS that session (kills
 * its pane and archives it, asking first only mid-reply), **Open in workspace**
 * opens its pane there. Opening never resumes an ended session: once the pane
 * is gone, the next message starts a new one.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
 import { useCallback, useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { ArrowUp, ExternalLink, Loader2, SquarePen, Wrench, X } from "lucide-react";
 import { api } from "../../lib/api";
 import type { TranscriptMessage } from "../../lib/types";
 import { readDefaultMode, readDefaultTool } from "../../lib/sessionDefaults";
 import {
  answerRunMenu,
  chooseRunOption,
  interruptRun,
  readRunMenu,
  stepRunMenu,
  submitToRun,
  type PaneMenu,
 } from "../../lib/panePaste";
 import { isSubmitEnter } from "../../lib/keys";
 import { confirmDialog } from "../../lib/confirm";
 import { toast } from "../../lib/toast";
 import { startInFreeTabDetailed } from "../lanes/startSession";
 import { TerminalView } from "../run/TerminalView";
 import { PaneMenuCard } from "../run/PaneChat";
 import { MarkdownContent } from "../conversation/MarkdownContent";
 /** Tools whose session the chat can read back (a transcript AgentHub parses). */
 export const PET_CHAT_TOOLS = new Set(["claude", "codex"]);
 const CHAT_KEY = "agenthub.pet.chat";
 const POLL_MS = 1500;
 const MENU_POLL_MS = 700;
 // A follow-up waits this long for the off-screen pane to attach.
 const SEND_TRIES = 20;
 const SEND_RETRY_MS = 250;
 /** The session the chat is talking to. */
 export interface PetChatRef {
  laneId: number;
  runId: string;
  tool: string;
 }
 export function readPetChat(): PetChatRef | null {
  try {
    const v = JSON.parse(localStorage.getItem(CHAT_KEY) ?? "null") as Partial<PetChatRef> | null;
    if (
      v &&
      typeof v.laneId === "number" &&
      typeof v.runId === "string" &&
      typeof v.tool === "string"
    )
      return { laneId: v.laneId, runId: v.runId, tool: v.tool };
  } catch {
    /* unreadable: no chat */
  }
  return null;
 }
 function writePetChat(ref: PetChatRef | null) {
  try {
    if (ref) localStorage.setItem(CHAT_KEY, JSON.stringify(ref));
    else localStorage.removeItem(CHAT_KEY);
  } catch {
    /* best-effort */
  }
 }
 /** The tool a new chat starts: the user's default, when the chat can show it. */
 export function petChatTool(): string | null {
  const tool = readDefaultTool() ?? "claude";
  return PET_CHAT_TOOLS.has(tool) ? tool : null;
 }
 type Line =
  | { key: string; role: "user" | "assistant"; text: string }
  | { key: string; role: "tools"; names: string[] };
 /** A human line's text: Claude Code's own injected lines (`<command-…>`,
 *  `<system-reminder>`…) are not something the user said. */
 const humanText = (m: TranscriptMessage) =>
  m.content
    .filter((c) => c.type === "text" && c.text)
    .map((c) => c.text!.trim())
    .filter((t) => t && !t.startsWith("<"))
    .join("\n\n");
 /** The transcript as chat lines: the user's words, the assistant's prose, and
 *  each run of tool calls between them folded into one chip. */
 export function chatLines(messages: TranscriptMessage[]): Line[] {
  const out: Line[] = [];
  messages.forEach((m, i) => {
    const sender = m.sender ?? m.type;
    if (sender === "user") {
      const text = humanText(m);
      if (text) out.push({ key: `u${i}`, role: "user", text });
      return;
    }
    if (m.type !== "assistant") return;
    m.content.forEach((c, j) => {
      if (c.type === "text" && c.text?.trim()) {
        out.push({ key: `a${i}-${j}`, role: "assistant", text: c.text.trim() });
      } else if (c.type === "tool_use" && c.name) {
        const last = out[out.length - 1];
        if (last?.role === "tools") last.names.push(c.name);
        else out.push({ key: `t${i}-${j}`, role: "tools", names: [c.name] });
      }
    });
  });
  return out;
 }
 /** Still working: the last line is the user's, or an assistant turn not ended. */
 function isBusy(messages: TranscriptMessage[]): boolean {
  for (let i = messages.length - 1; i >= 0; i--) {
    const m = messages[i]!;
    const sender = m.sender ?? m.type;
    if (m.type === "assistant") return m.stop_reason !== undefined && m.stop_reason !== "end_turn";
    if (sender === "user" && humanText(m)) return true;
  }
  return false;
 }
 /** "Read ×2 · Bash" */
 function toolSummary(names: string[]): string {
  const counts = new Map<string, number>();
  names.forEach((n) => counts.set(n, (counts.get(n) ?? 0) + 1));
  return [...counts].map(([n, c]) => (c > 1 ? `${n} ×${c}` : n)).join(" · ");
 }
 /** What the container made of a message: an answer the pet gives itself, or
 *  `handled` (it took the message elsewhere); null sends it to the AI. */
 export type PetLocalReply = { answer: string } | { handled: true } | null;
 interface PetChatProps {
  /** The pet's shown name, for the header and greeting. */
  name: string;
  /** Shown in place of the plain name (the rename button). */
  title?: ReactNode;
  /** Extra header buttons, before Open in workspace (the pat heart). */
  headerActions?: ReactNode;
  /** Under the header: what the pet knows (status, sessions that need you). */
  info?: ReactNode;
  /** Asked first while no chat runs. */
  onLocal?: (text: string) => PetLocalReply;
  onClose: () => void;
  /** Opens the chat's pane in its workspace. */
  onOpenWorkspace: (laneId: number, runId: string) => void;
  /** The thinking mood while a reply is being written. */
  onBusy?: (busy: boolean) => void;
 }
 export function PetChat({
  name,
  title,
  headerActions,
  info,
  onLocal,
  onClose,
  onOpenWorkspace,
  onBusy,
 }: PetChatProps) {
  const { t } = useTranslation("settings");
  const [chat, setChat] = useState<PetChatRef | null>(readPetChat);
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [messages, setMessages] = useState<TranscriptMessage[]>([]);
  // Sent but not in the transcript yet.
  const [pending, setPending] = useState<string | null>(null);
  const [starting, setStarting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [draft, setDraft] = useState("");
  const [menu, setMenu] = useState<PaneMenu | null>(null);
  // The pet's own answers, given before any chat ran.
  const [local, setLocal] = useState<Line[]>([]);
  const listRef = useRef<HTMLDivElement>(null);
  const remember = (ref: PetChatRef | null) => {
    writePetChat(ref);
    setChat(ref);
    setSessionId(null);
    setMessages([]);
    setMenu(null);
  };
  // A remembered chat whose pane is gone is over: forget it, the next message starts anew.
  useEffect(() => {
    if (!chat) return;
    let live = true;
    const check = () =>
      api.run
        .get(chat.runId)
        .then((h) => {
          if (!live) return;
          if (h.status !== "running") remember(null);
          else if (h.sessionId) setSessionId(h.sessionId);
        })
        .catch(() => live && remember(null));
    void check();
    // Codex learns its session only after a while; Claude's is known at start.
    const timer = window.setInterval(() => {
      if (!sessionId) void check();
    }, POLL_MS);
    return () => {
      live = false;
      window.clearInterval(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chat?.runId, sessionId]);
  // The conversation, polled while the window is open.
  useEffect(() => {
    if (!sessionId) return;
    let live = true;
    const load = () =>
      api.sessions
        .transcript(sessionId, { limit: 60 })
        .then((r) => {
          if (!live) return;
          setMessages((prev) =>
            prev.length === r.messages.length &&
            JSON.stringify(prev[prev.length - 1]) ===
              JSON.stringify(r.messages[r.messages.length - 1])
              ? prev
              : r.messages
          );
        })
        .catch(() => undefined); // not started yet: the next poll asks again
    void load();
    const timer = window.setInterval(load, POLL_MS);
    return () => {
      live = false;
      window.clearInterval(timer);
    };
  }, [sessionId]);
  // A menu the CLI shows in the pane (permission, trust, a question).
  useEffect(() => {
    if (!chat) return;
    const read = () =>
      setMenu((prev) => {
        const next = readRunMenu(chat.runId);
        return JSON.stringify(next) === JSON.stringify(prev) ? prev : next;
      });
    const timer = window.setInterval(read, MENU_POLL_MS);
    return () => window.clearInterval(timer);
  }, [chat]);
  const lines = [...local, ...chatLines(messages)];
  // The pending line shows until the transcript has it.
  useEffect(() => {
    if (pending && lines.some((l) => l.role === "user" && l.text === pending.trim()))
      setPending(null);
  }, [lines, pending]);
  const busy = starting || !!pending || isBusy(messages);
  useEffect(() => onBusy?.(busy), [busy, onBusy]);
  useEffect(() => () => onBusy?.(false), [onBusy]);
  // Keep the newest in sight.
  useEffect(() => {
    const el = listRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [lines.length, pending, busy, menu]);
  const send = useCallback(
    async (text: string) => {
      const prompt = text.trim();
      if (!prompt || starting) return;
      setError(null);
      if (!chat && onLocal) {
        const reply = onLocal(prompt);
        if (reply && "handled" in reply) return;
        if (reply) {
          const n = Date.now();
          setLocal((prev) => [
            ...prev,
            { key: `lu${n}`, role: "user", text: prompt },
            { key: `la${n}`, role: "assistant", text: reply.answer },
          ]);
          return;
        }
      }
      setPending(prompt);
      if (chat) {
        // Typed into the attached pane; it may still be attaching.
        for (let i = 0; i < SEND_TRIES; i++) {
          if (submitToRun(chat.runId, prompt)) return;
          await new Promise((r) => setTimeout(r, SEND_RETRY_MS));
        }
        setPending(null);
        setDraft(prompt);
        setError(t("sagi.chat.notSent"));
        return;
      }
      const tool = petChatTool() ?? "claude";
      setStarting(true);
      try {
        const { lane } = await api.lanes.ensure({ title: "Sagi" });
        const r = await startInFreeTabDetailed(lane.id, {
          prompt,
          ...(tool !== lane.tool ? { tool } : {}),
          ...(tool === "claude" ? { permissionMode: readDefaultMode({ safe: true }) } : {}),
        });
        remember({ laneId: r.laneId, runId: r.runId, tool });
      } catch (err) {
        setPending(null);
        setDraft(prompt);
        setError(
          t("sagi.startFailed", { error: err instanceof Error ? err.message : String(err) })
        );
      } finally {
        setStarting(false);
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [chat, starting, t, onLocal]
  );
  // New chat: the old one's session is stopped, not left running unseen —
  // asking first only while it is still writing a reply.
  const newChat = async () => {
    if (chat) {
      if (
        busy &&
        !(await confirmDialog({
          title: t("sagi.chat.endTitle"),
          message: t("sagi.chat.endBody"),
          confirmLabel: t("sagi.chat.endConfirm"),
          destructive: true,
        }))
      )
        return;
      try {
        await api.run.kill(chat.runId, { archive: true });
      } catch (err) {
        toast.error(err);
        return;
      }
    }
    remember(null);
    setLocal([]);
    setPending(null);
    setError(null);
  };
  const submit = (e?: FormEvent) => {
    e?.preventDefault();
    if (!draft.trim()) return;
    const text = draft;
    setDraft("");
    void send(text);
  };
  const toolLabel = chat?.tool ?? petChatTool() ?? "claude";
  const empty = lines.length === 0 && !pending;
  return (
    <div
      className="pet-chat flex h-[30rem] max-h-[calc(100vh-6rem)] w-80 flex-col overflow-hidden rounded-3xl border border-border-light shadow-2xl animate-slide-up"
      role="dialog"
      aria-label={t("sagi.chat.label", { name })}
    >
      {/* header */}
      <div className="pet-chat-head flex items-center gap-1 px-2 py-2">
        <span className="pl-1.5 text-base leading-none" aria-hidden>
          🐾
        </span>
        <div className="min-w-0 flex-1 px-1">
          {title ?? <div className="truncate text-sm font-semibold text-fg-primary">{name}</div>}
          <div className="flex items-center gap-1 text-[10px] uppercase tracking-wider text-fg-muted">
            <span
              className={`inline-block h-1.5 w-1.5 rounded-full ${
                busy
                  ? "animate-pulse bg-status-warning"
                  : chat
                    ? "bg-status-success"
                    : "bg-fg-muted"
              }`}
              aria-hidden
            />
            {busy ? t("sagi.chat.typing") : toolLabel}
          </div>
        </div>
        {headerActions}
        {chat && (
          <IconButton
            label={t("sagi.chat.openWorkspace")}
            onClick={() => onOpenWorkspace(chat.laneId, chat.runId)}
          >
            <ExternalLink size={15} />
          </IconButton>
        )}
        <IconButton
          label={t("sagi.chat.new")}
          onClick={() => void newChat()}
          disabled={(!chat && !local.length) || starting}
        >
          <SquarePen size={15} />
        </IconButton>
        <IconButton label={t("sagi.chat.close", { name })} onClick={onClose}>
          <X size={16} />
        </IconButton>
      </div>
      {info}
      {/* conversation */}
      <div ref={listRef} className="flex-1 space-y-2 overflow-y-auto px-3 py-3">
        {empty && (
          <div className="flex h-full flex-col items-center justify-center gap-2 px-4 text-center">
            <span className="text-3xl" aria-hidden>
              🐾
            </span>
            <p className="text-sm font-medium text-fg-primary">
              {t("sagi.chat.emptyTitle", { name })}
            </p>
            <p className="text-xs text-fg-muted">{t("sagi.chat.emptyHint", { tool: toolLabel })}</p>
          </div>
        )}
        {lines.map((l) =>
          l.role === "tools" ? (
            <div key={l.key} className="flex justify-start">
              <span className="pet-chat-tools inline-flex max-w-[85%] items-center gap-1 truncate rounded-full px-2 py-0.5 text-[10px] text-fg-muted">
                <Wrench size={10} className="shrink-0" aria-hidden />
                <span className="truncate">{toolSummary(l.names)}</span>
              </span>
            </div>
          ) : l.role === "user" ? (
            <div key={l.key} className="flex justify-end">
              <div className="max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-accent-solid px-3 py-2 text-sm text-white shadow-sm">
                {l.text}
              </div>
            </div>
          ) : (
            <div key={l.key} className="flex justify-start">
              <div className="pet-chat-reply max-w-[90%] break-words rounded-2xl rounded-bl-md px-3 py-2 text-sm text-fg-primary shadow-sm">
                <MarkdownContent text={l.text} dense prose />
              </div>
            </div>
          )
        )}
        {pending && (
          <div className="flex justify-end">
            <div className="max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-accent-solid px-3 py-2 text-sm text-white opacity-70 shadow-sm">
              {pending}
            </div>
          </div>
        )}
        {busy && !menu && (
          <div className="flex justify-start" aria-label={t("sagi.chat.typing")}>
            <div className="pet-chat-reply flex gap-1 rounded-2xl rounded-bl-md px-3 py-3 shadow-sm">
              <span className="pet-chat-dot" />
              <span className="pet-chat-dot" />
              <span className="pet-chat-dot" />
            </div>
          </div>
        )}
        {starting && (
          <p className="flex items-center justify-center gap-1.5 text-[11px] text-fg-muted">
            <Loader2 size={12} className="animate-spin" aria-hidden />
            {t("sagi.chat.starting", { tool: toolLabel })}
          </p>
        )}
        {chat && !sessionId && !starting && (
          <p className="text-center text-[11px] text-fg-muted">{t("sagi.chat.notStarted")}</p>
        )}
      </div>
      {error && (
        <p className="mx-3 mb-1 rounded-lg bg-status-danger/10 px-2 py-1 text-[11px] text-status-danger">
          {error}
        </p>
      )}
      {/* prompt, or the question the CLI asks */}
      <div className="pet-chat-foot px-2.5 py-2.5">
        {menu && chat ? (
          <div className="max-h-56 overflow-y-auto">
            <PaneMenuCard
              menu={menu}
              onChoose={(i) => {
                if (chooseRunOption(chat.runId, menu, i)) setMenu(null);
                else setError(t("sagi.chat.notSent"));
              }}
              onAnswer={(text) => {
                if (answerRunMenu(chat.runId, menu, text)) setMenu(null);
                else setError(t("sagi.chat.notSent"));
              }}
              onStep={(dir) => {
                if (!stepRunMenu(chat.runId, dir)) setError(t("sagi.chat.notSent"));
              }}
              onCancel={() => {
                if (interruptRun(chat.runId)) setMenu(null);
                else setError(t("sagi.chat.notSent"));
              }}
            />
          </div>
        ) : (
          <form onSubmit={submit} className="flex items-end gap-1.5">
            <textarea
              rows={1}
              autoFocus
              className="max-h-28 min-h-[2.25rem] flex-1 resize-none rounded-2xl border border-border bg-surface-1 px-3.5 py-2 text-sm text-fg-primary placeholder-fg-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/30"
              placeholder={t("sagi.chat.placeholder", { name })}
              aria-label={t("sagi.chat.placeholder", { name })}
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => {
                if (isSubmitEnter(e) && !e.shiftKey) {
                  e.preventDefault();
                  submit();
                } else if (e.key === "Escape") {
                  e.stopPropagation();
                  e.nativeEvent.stopImmediatePropagation();
                  onClose();
                }
              }}
            />
            <button
              type="submit"
              disabled={!draft.trim() || starting}
              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent-solid text-white shadow-sm transition-opacity hover:opacity-90 disabled:opacity-40"
              aria-label={t("sagi.panel.send")}
            >
              <ArrowUp size={16} />
            </button>
          </form>
        )}
      </div>
      {/* The chat's pane, attached off-screen: the only way a follow-up or a
          menu answer reaches it. A real size, so tmux does not shrink the pane. */}
      {chat && (
        <div className="pet-chat-term" aria-hidden>
          <TerminalView
            runId={chat.runId}
            wsBaseUrl={window.location.origin.replace(/^http/, "ws")}
            autoFocus={false}
            // The pane ended: the conversation stays on screen, the next
            // message starts a new session.
            onExit={() => {
              writePetChat(null);
              setChat(null);
            }}
          />
        </div>
      )}
    </div>
  );
 }
 function IconButton({
  label,
  onClick,
  disabled,
  children,
 }: {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  children: React.ReactNode;
 }) {
  return (
    <button
      type="button"
      className="rounded-full p-1.5 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
      onClick={onClick}
      disabled={disabled}
      aria-label={label}
      title={label}
    >
      {children}
    </button>
  );
 }
@@ -0,0 +1,60 @@
 /**
 * @file PetPanel.tsx
 * @description The pet's window — clicking the pet opens it: its name (which
 * the user can rename), a pat button, and what the pet knows (`info`: live /
 * waiting / errored, the sessions that need you, Mute, Clear alerts —
 * `SagiInfo.tsx`). The pet no longer chats: it started a full AI session per
 * question, a heavy process on a shared server, so the chat was removed
 * (v2.8.68); this window is where the pet's own care comes next.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 export function PetPanel({
  name,
  title,
  headerActions,
  info,
  onClose,
 }: {
  name: string;
  /** The name line (a rename button); plain text without it. */
  title?: ReactNode;
  /** Buttons before Close (the pat). */
  headerActions?: ReactNode;
  /** What the pet knows (`SagiInfo`). */
  info: ReactNode;
  onClose: () => void;
 }) {
  const { t } = useTranslation("settings");
  return (
    <div
      className="pet-chat flex max-h-[calc(100vh-6rem)] w-80 flex-col overflow-hidden rounded-3xl border border-border-light shadow-2xl animate-slide-up"
      role="dialog"
      aria-label={t("sagi.panel.label", { name })}
    >
      <div className="pet-chat-head flex items-center gap-1 px-2 py-2">
        <span className="pl-1.5 text-base leading-none" aria-hidden>
          🐾
        </span>
        <div className="min-w-0 flex-1 px-1">
          {title ?? <div className="truncate text-sm font-semibold text-fg-primary">{name}</div>}
        </div>
        {headerActions}
        <button
          type="button"
          className="rounded-full p-1.5 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary"
          onClick={onClose}
          aria-label={t("sagi.panel.close", { name })}
          title={t("sagi.panel.close", { name })}
        >
          <X size={16} />
        </button>
      </div>
      <div className="overflow-y-auto">{info}</div>
    </div>
  );
 }
@@ -5,9 +5,8 @@
 *   enabled; `Sagi` gates on the same preference itself, and the body (brain,
 *   tick, WS reducer) runs only while it is on. Persists across routes and
 *   shares the single WebSocket.
- *   Clicking the pet opens its chat window (`PetChat`), which is its whole UI:
+ *   Clicking the pet opens its window (`PetPanel`): its name, a pat, and the
- *   the status strip (`SagiInfo`) sits on top, a question the pet can answer
+ *   status strip (`SagiInfo`). The pet no longer chats (v2.8.68).
 *   itself is answered there, anything else goes to the AI.
 *   Owns the open/closed chat state, the ⌘B / Esc shortcuts, reduced-motion
 *   detection, and route navigation. Reactive personality + status/Ask come
 *   from useSagiBrain; the avatar is draggable (AssistiveTouch-style) via
@@ -15,10 +14,7 @@
 *   bubble/panel render in a self-clamping flyout so
 *   they never spill off any screen edge regardless of where the mascot is docked.
 *
- *   The "do the job" path: an unmatched question is the chat's — it starts a
+ *   ⌘B/Ctrl+B is taken only while the mascot is shown and focus is not
 *   session of the default AI tool in the "Sagi" workspace; a default tool the
 *   chat cannot read back starts there and its session view opens
 *   (`/workspace?lane=<id>&run=<runId>`) — no new LLM backend. ⌘B/Ctrl+B is taken only while the mascot is shown and focus is not
 *   in an editable field (a terminal's Ctrl+B is tmux's prefix).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
@@ -91,15 +87,12 @@ import { PetNameButton, SagiInfo } from "./SagiInfo";
 import { useSagiBrain } from "./useSagiBrain";
 import { useSagiPosition } from "./useSagiPosition";
 import { useSagiEnabled } from "./SagiMount";
 import { matchIntent } from "./intents";
 import { petName, sagiPrefs } from "./prefs";
 import type { SagiSubject } from "./brain";
 import { api } from "../../lib/api";
 import { readDefaultTool } from "../../lib/sessionDefaults";
 import { startInFreeTabDetailed } from "../lanes/startSession";
 import { workspaceHref } from "../SessionRowMenu";
 import { Heart } from "lucide-react";
-import { PetChat, petChatTool, type PetLocalReply } from "./PetChat";
+import { PetPanel } from "./PetPanel";
 // Stroking: this many left/right turns of the pointer over the pet, within
 // STROKE_MS and with no button held, is a pat; then a pause before the next.
@@ -229,7 +222,7 @@ function SagiBody() {
  // The name it goes by: the user's nickname, the pet's own, else Sagi.
  const [name, setName] = useState(() => petName(sagiPrefs.getPet()));
  const [size, setSize] = useState(() => sagiPrefs.getSize());
-  // The chat window (PetChat.tsx): the pet's whole UI.
+  // The pet's window (PetPanel.tsx).
  const [open, setOpen] = useState(false);
  // The right-click pet menu (`PetMenu.tsx`).
  const [menu, setMenu] = useState(false);
@@ -340,43 +333,6 @@ function SagiBody() {
    [brain, navigate]
  );
  // Asked by the chat before any session runs.
  const onLocal = useCallback(
    (query: string): PetLocalReply => {
      const result = matchIntent(query, brain.status, { name, attention: brain.attention });
      if (result.kind === "answer") {
        if (result.moment) brain.playMoment(result.moment);
        return { answer: result.text };
      }
      // A question the pet cannot answer: the chat starts a session of the
      // default AI tool and shows it as chat.
      if (petChatTool()) return null;
      // A default tool the chat cannot read back (not Claude/Codex): start it
      // in the "Sagi" workspace and open its pane there, as before.
      const prompt = result.prompt;
      brain.setThinking(true);
      (async () => {
        try {
          const { lane } = await api.lanes.ensure({ title: "Sagi" });
          const tool = readDefaultTool();
          const r = await startInFreeTabDetailed(lane.id, {
            prompt,
            ...(tool && tool !== lane.tool ? { tool } : {}),
          });
          navigate(`/workspace?lane=${r.laneId}&run=${encodeURIComponent(r.runId)}`);
          setOpen(false);
        } catch (err) {
          const msg = err instanceof Error ? err.message : String(err);
          brain.setBubble(t("sagi.startFailed", { error: msg }));
        } finally {
          brain.setThinking(false);
        }
      })();
      return { handled: true };
    },
    [brain, navigate, t, name]
  );
  // Stroke the pet (move the pointer back and forth over it) to pat it.
  const stroke = useRef({ dir: 0, x: 0, turns: [] as number[], until: 0 });
  const onStroke = (e: React.PointerEvent) => {
@@ -398,8 +354,6 @@ function SagiBody() {
    s.dir = dir;
  };
  const onBusy = useCallback((b: boolean) => brain.setThinking(b), [brain.setThinking]);
  const anchor: Anchor = {
    left: place.left,
    top: place.top,
@@ -412,11 +366,10 @@ function SagiBody() {
  return (
    <>
      {/* Beside the pet, riding along with it mid-drag too (SagiFlyout follows
-          it 1:1). Closing unmounts it; its chat is remembered, so reopening
+          it 1:1). */}
          re-attaches the same session. */}
      {open && (
        <SagiFlyout anchor={anchor} beside>
-          <PetChat
+          <PetPanel
            name={name}
            title={
              <PetNameButton
@@ -449,13 +402,7 @@ function SagiBody() {
                defaultOpen={brain.attention.length > 0}
              />
            }
            onLocal={onLocal}
            onClose={() => setOpen(false)}
            onOpenWorkspace={(laneId, runId) => {
              navigate(`/workspace?lane=${laneId}&run=${encodeURIComponent(runId)}`);
              setOpen(false);
            }}
            onBusy={onBusy}
          />
        </SagiFlyout>
      )}
@@ -1,6 +1,6 @@
 /**
 * @file SagiInfo.tsx
- * @description What the pet knows, shown inside its chat window (`PetChat`):
+ * @description What the pet knows, shown inside its window (`PetPanel`):
 *   the name you rename by clicking it (`PetNameButton`), and a status strip
 *   (`SagiInfo`) — live / waiting / errored counts and the connection state
 *   always in sight, and on expanding, the sessions that need the user, by
@@ -118,8 +118,8 @@ export function SagiInfo({
        className="flex w-full items-center gap-1.5 rounded-lg text-left"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
-        aria-label={t("sagi.chat.status")}
+        aria-label={t("sagi.panel.status")}
-        title={t("sagi.chat.status")}
+        title={t("sagi.panel.status")}
      >
        <StatChip
          icon={Radio}
@@ -1,46 +0,0 @@
 /**
 * @file PetChat.test.ts
 * @description Unit tests for the pet chat's transcript-to-bubbles folding (`chatLines`).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
 import { describe, it, expect } from "vitest";
 import { chatLines } from "../PetChat";
 import type { TranscriptMessage } from "../../../lib/types";
 const msg = (m: Partial<TranscriptMessage>): TranscriptMessage =>
  ({ type: "user", timestamp: null, content: [], ...m }) as TranscriptMessage;
 describe("chatLines", () => {
  it("keeps the user's words and the assistant's prose, folding tool calls into one chip", () => {
    const lines = chatLines([
      msg({ type: "user", sender: "user", content: [{ type: "text", text: "hi" }] }),
      msg({
        type: "assistant",
        content: [
          { type: "thinking", text: "hmm" },
          { type: "tool_use", name: "Read" },
        ],
      }),
      msg({ type: "user", sender: "tool", content: [{ type: "tool_result", output: "x" }] }),
      msg({
        type: "assistant",
        content: [
          { type: "tool_use", name: "Read" },
          { type: "text", text: "hello!" },
        ],
      }),
    ]);
    expect(lines.map((l) => (l.role === "tools" ? l.names : l.text))).toEqual([
      "hi",
      ["Read", "Read"],
      "hello!",
    ]);
  });
  it("drops Claude Code's own injected lines", () => {
    const lines = chatLines([
      msg({ sender: "user", content: [{ type: "text", text: "<command-name>/clear</command-name>" }] }),
    ]);
    expect(lines).toEqual([]);
  });
 });
@@ -1,6 +1,6 @@
 /**
 * @file Sagi.test.tsx
- * @description Render tests for the Sagi companion component — mounting, mood rendering, the ⌘B chat toggle (the chat window is the pet's whole UI: status strip, local answers, New chat stopping the old session), and accessibility attributes.
+ * @description Render tests for the Sagi companion component — mounting, mood rendering, the ⌘B window toggle (the pet's window: name, pat, status strip — the pet no longer chats), and accessibility attributes.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
@@ -18,7 +18,6 @@ import { useSagiPosition } from "../useSagiPosition";
 import { MemoryRouter } from "react-router-dom";
 import { Sagi } from "../Sagi";
 import { eventBus } from "../../../lib/eventBus";
 import { api } from "../../../lib/api";
 import type { WSMessage, Session } from "../../../lib/types";
 function renderSagi() {
@@ -55,16 +54,15 @@ describe("Sagi widget", () => {
    expect(screen.getByRole("img", { name: /sagi/i })).toBeInTheDocument();
  });
-  it("opens the chat on click and answers a local status question there", () => {
+  it("opens its window on click — status, no chat box", () => {
    renderSagi();
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const panel = screen.getByRole("dialog", { name: /chat with sagi/i });
+    const panel = screen.getByRole("dialog", { name: /pet sagi/i });
-    expect(panel).toBeInTheDocument();
+    expect(within(panel).getByText("live")).toBeInTheDocument();
-
+    expect(within(panel).queryByRole("textbox")).toBeNull();
-    const input = within(panel).getByLabelText(/ask sagi anything/i);
+    expect(within(panel).queryByRole("button", { name: /new chat/i })).toBeNull();
-    fireEvent.change(input, { target: { value: "status" } });
+    fireEvent.click(within(panel).getByRole("button", { name: /close sagi/i }));
-    fireEvent.submit(input.closest("form")!);
+    expect(screen.queryByRole("dialog")).toBeNull();
    expect(within(panel).getByText(/live ·/i)).toBeInTheDocument();
  });
  it("toggles open/closed with Cmd/Ctrl+B and closes with Esc", () => {
@@ -89,7 +87,7 @@ describe("Sagi widget", () => {
    expect(within(btn).getByText("1")).toBeInTheDocument();
  });
-  it("names the errored session in its bubble and in the chat", () => {
+  it("names the errored session in its bubble and in its window", () => {
    renderSagi();
    act(() => {
      eventBus.publish({
@@ -102,7 +100,7 @@ describe("Sagi widget", () => {
    expect(within(bubble).getByText("Fix login")).toBeInTheDocument();
    expect(within(bubble).getByRole("button", { name: "Open" })).toBeInTheDocument();
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const panel = screen.getByRole("dialog", { name: /chat with sagi/i });
+    const panel = screen.getByRole("dialog", { name: /pet sagi/i });
    expect(within(panel).getByText("Needs you")).toBeInTheDocument();
    expect(within(panel).getByRole("button", { name: /Fix login/ })).toBeInTheDocument();
  });
@@ -122,54 +120,17 @@ describe("Sagi widget", () => {
    expect(JSON.parse(localStorage.getItem("agenthub.pet.dismissedErrors")!)).toEqual(["a"]);
  });
-  it("renames the pet from the chat header", () => {
+  it("renames the pet from its window header", () => {
    renderSagi();
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
    fireEvent.click(screen.getByRole("button", { name: /rename sagi/i }));
    const input = screen.getByLabelText("Pet name");
    fireEvent.change(input, { target: { value: "Mochi" } });
    fireEvent.keyDown(input, { key: "Enter" });
-    expect(screen.getByRole("dialog", { name: /chat with mochi/i })).toBeInTheDocument();
+    expect(screen.getByRole("dialog", { name: /pet mochi/i })).toBeInTheDocument();
    expect(screen.getByLabelText(/ask mochi anything/i)).toBeInTheDocument();
  });
-  it("hands a question it cannot answer to the AI", () => {
+  it("a pat shows its reaction on the pet even while its window is open", () => {
    localStorage.setItem("agenthub.defaultTool", "claude");
    const ensure = vi.spyOn(api.lanes, "ensure").mockReturnValue(new Promise(() => {}));
    renderSagi();
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
    const chat = screen.getByRole("dialog", { name: /chat with sagi/i });
    const input = within(chat).getByLabelText(/ask sagi anything/i);
    fireEvent.change(input, { target: { value: "write me a haiku" } });
    fireEvent.submit(input.closest("form")!);
    expect(within(chat).getByText("write me a haiku")).toBeInTheDocument();
    expect(ensure).toHaveBeenCalledWith({ title: "Sagi" });
    ensure.mockRestore();
  });
  it("reopens the remembered chat, and New chat stops its session", async () => {
    localStorage.setItem(
      "agenthub.pet.chat",
      JSON.stringify({ laneId: 7, runId: "agenthub-lane-7-1", tool: "claude" })
    );
    const get = vi
      .spyOn(api.run, "get")
      .mockReturnValue(new Promise(() => {}) as ReturnType<typeof api.run.get>);
    const kill = vi.spyOn(api.run, "kill").mockResolvedValue({ ok: true });
    renderSagi();
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
    expect(screen.getByRole("button", { name: /open in workspace/i })).toBeInTheDocument();
    await act(async () => {
      fireEvent.click(screen.getByRole("button", { name: /new chat/i }));
    });
    expect(kill).toHaveBeenCalledWith("agenthub-lane-7-1", { archive: true });
    expect(localStorage.getItem("agenthub.pet.chat")).toBeNull();
    expect(screen.queryByRole("button", { name: /open in workspace/i })).not.toBeInTheDocument();
    get.mockRestore();
    kill.mockRestore();
  });
  it("a pat shows its reaction on the pet even while the chat is open", () => {
    renderSagi();
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
    fireEvent.click(screen.getByRole("button", { name: /pat sagi/i }));
@@ -187,14 +148,14 @@ describe("Sagi widget", () => {
    expect(pet.querySelector(".sagi-reaction-text")).not.toBeNull();
  });
-  it("reflects the live count in the chat status", () => {
+  it("reflects the live count in its status", () => {
    renderSagi();
    act(() => {
      eventBus.publish(sessionMsg("a", "active"));
      eventBus.publish(sessionMsg("b", "active"));
    });
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const panel = screen.getByRole("dialog", { name: /chat with sagi/i });
+    const panel = screen.getByRole("dialog", { name: /pet sagi/i });
    // The "live" stat chip shows value 2 next to its label.
    const liveChip = within(panel).getByText("live").closest("span.rounded-full")! as HTMLElement;
    expect(within(liveChip).getByText("2")).toBeInTheDocument();
@@ -208,7 +169,7 @@ describe("Sagi widget", () => {
      eventBus.publish({ ...sessionMsg("theirs-err", "error"), mine: false });
    });
    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const panel = screen.getByRole("dialog", { name: /chat with sagi/i });
+    const panel = screen.getByRole("dialog", { name: /pet sagi/i });
    const liveChip = within(panel).getByText("live").closest("span.rounded-full")! as HTMLElement;
    expect(within(liveChip).getByText("1")).toBeInTheDocument();
    expect(screen.queryByText(/theirs/)).toBeNull();
@@ -220,7 +181,7 @@ describe("Sagi widget", () => {
    expect(screen.queryByRole("button", { name: /open sagi companion/i })).not.toBeInTheDocument();
  });
-  it("a tap (no movement) still opens the chat", () => {
+  it("a tap (no movement) still opens its window", () => {
    renderSagi();
    const btn = screen.getByRole("button", { name: /open sagi companion/i });
    act(() => {
@@ -228,7 +189,7 @@ describe("Sagi widget", () => {
      fireEvent.pointerUp(btn, { clientX: 990, clientY: 700 });
    });
    fireEvent.click(btn);
-    expect(screen.getByRole("dialog", { name: /chat with sagi/i })).toBeInTheDocument();
+    expect(screen.getByRole("dialog", { name: /pet sagi/i })).toBeInTheDocument();
  });
  it("dragging snaps to an edge, persists position, and does not open the panel", () => {
@@ -257,7 +218,7 @@ describe("Sagi widget", () => {
      fireEvent.pointerUp(btn, { clientX: 992, clientY: 701 });
    });
    fireEvent.click(btn);
-    expect(screen.getByRole("dialog", { name: /chat with sagi/i })).toBeInTheDocument();
+    expect(screen.getByRole("dialog", { name: /pet sagi/i })).toBeInTheDocument();
    // No position was persisted because no real drag happened.
    expect(localStorage.getItem("agent-dashboard-sagi-pos")).toBeNull();
  });
@@ -529,13 +529,10 @@
  z-index: 42;
 }
-/* ════════ the pet's chat window (PetChat.tsx) ════════ */
+/* ════════ the pet's window (PetPanel.tsx) ════════ */
-/* The reference's soft gradient, in the theme's own accent rather than a fixed
+/* A tint of the theme's accent at the top fading into the surface, so it
-   colour: a tint of the accent at the top fading into the surface, so it
+   reads in every light and dark theme. */
   reads in every light and dark theme. Replies sit on the plain surface like
   the reference's white bubbles; the user's own are accent-solid (white text
   is only ever on accent-solid). */
 .pet-chat {
  background: linear-gradient(
    180deg,
@@ -547,61 +544,6 @@
 .pet-chat-head {
  border-bottom: 1px solid color-mix(in srgb, rgb(var(--accent)) 18%, transparent);
 }
 .pet-chat-reply {
  background: rgb(var(--surface-0));
  border: 1px solid color-mix(in srgb, rgb(var(--accent)) 12%, transparent);
 }
 .pet-chat-tools {
  background: color-mix(in srgb, rgb(var(--surface-0)) 70%, transparent);
  border: 1px dashed color-mix(in srgb, rgb(var(--accent)) 25%, transparent);
 }
 .pet-chat-foot {
  background: rgb(var(--surface-0));
  border-top: 1px solid rgb(var(--border) / 0.6);
 }
 /* Three bouncing dots while a reply is written. */
 .pet-chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgb(var(--accent));
  opacity: 0.5;
  animation: pet-chat-dot 1.2s ease-in-out infinite;
 }
 .pet-chat-dot:nth-child(2) {
  animation-delay: 0.15s;
 }
 .pet-chat-dot:nth-child(3) {
  animation-delay: 0.3s;
 }
@keyframes pet-chat-dot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-4px);
    opacity: 0.9;
  }
 }
 /* The chat's terminal, attached but off-screen. It keeps a real size (so tmux
   does not shrink the pane to fit it) and a non-zero box (so the paste
   registry counts it as on screen). */
 .pet-chat-term {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 760px;
  height: 460px;
  pointer-events: none;
 }
@media (prefers-reduced-motion: reduce) {
  .pet-chat-dot {
    animation: none;
  }
 }
 /* ════════ a pat's reaction, drawn on the pet itself ════════ */
@@ -45,7 +45,6 @@
      "mute": "Mute",
      "unmute": "Unmute",
      "clearAlerts": "Clear alerts",
      "send": "Send",
      "rename": "Click to rename {{name}}",
      "renameLabel": "Pet name",
      "renameHint": "Enter to save · empty = default name",
@@ -53,13 +52,15 @@
      "attention": "Needs you",
      "attentionError": "errored",
      "attentionWaiting": "waiting on you",
-      "attentionMore": "+{{count}} more in Sessions"
+      "attentionMore": "+{{count}} more in Sessions",
      "label": "Pet {{name}}",
      "close": "Close {{name}}",
      "status": "Status — click to show the sessions that need you"
    },
    "bubbleDismiss": "Dismiss",
    "open": "Open {{name}} companion",
    "closeAvatar": "Close {{name}}",
    "avatarTitle": "{{name}} — Ctrl/⌘+B · drag or arrow keys to move · stroke to pat · right-click for pets",
    "startFailed": "Couldn't start that session: {{error}}",
    "bubbleOpen": "Open",
    "bubbleMore": "{{list}} +{{count}} more",
    "notify": {
@@ -174,23 +175,6 @@
      "watching": ["on the prowl 👀", "watching your sessions 😼", "eyes peeled 🐾"],
      "sleeping": ["zzz… 💤", "wake me if something happens 😴", "curled up, all calm 🐈"],
      "idle": ["all quiet 😺", "ready when you are 🐾", "just vibing ✨"]
    },
    "chat": {
      "label": "Chat with {{name}}",
      "close": "Close {{name}}",
      "new": "New chat",
      "status": "Status — click to show the sessions that need you",
      "endTitle": "End this chat?",
      "endBody": "It is still writing a reply. A new chat stops this session.",
      "endConfirm": "Stop and start new",
      "openWorkspace": "Open in workspace",
      "typing": "typing…",
      "placeholder": "Ask {{name}} anything…",
      "emptyTitle": "Hi! I'm {{name}} 🐾",
      "emptyHint": "Ask me anything — I'll get {{tool}} to answer right here.",
      "starting": "Starting {{tool}}…",
      "notStarted": "Waiting for the session to start — if it asks something, open it in the workspace.",
      "notSent": "Couldn't reach the session's terminal — try again, or open it in the workspace."
    }
  },
  "pricing": {
@@ -45,7 +45,6 @@
      "mute": "Tắt tiếng",
      "unmute": "Bật tiếng",
      "clearAlerts": "Xoá cảnh báo",
      "send": "Gửi",
      "rename": "Bấm để đổi tên {{name}}",
      "renameLabel": "Tên pet",
      "renameHint": "Enter để lưu · để trống = tên mặc định",
@@ -53,13 +52,15 @@
      "attention": "Cần bạn xem",
      "attentionError": "bị lỗi",
      "attentionWaiting": "đang chờ bạn",
-      "attentionMore": "+{{count}} phiên khác trong Phiên"
+      "attentionMore": "+{{count}} phiên khác trong Phiên",
      "label": "Pet {{name}}",
      "close": "Đóng {{name}}",
      "status": "Trạng thái — bấm để xem các phiên cần bạn"
    },
    "bubbleDismiss": "Đóng",
    "open": "Mở trợ lý {{name}}",
    "closeAvatar": "Đóng {{name}}",
    "avatarTitle": "{{name}} — Ctrl/⌘+B · kéo hoặc dùng phím mũi tên để di chuyển · vuốt qua lại để xoa đầu · chuột phải để chọn pet",
    "startFailed": "Không khởi động được phiên: {{error}}",
    "bubbleOpen": "Mở",
    "bubbleMore": "{{list}} và {{count}} phiên khác",
    "notify": {
@@ -162,23 +163,6 @@
      "watching": ["đang tuần tra 👀", "đang canh các phiên của bạn 😼", "mắt mở to 🐾"],
      "sleeping": ["zzz… 💤", "có gì thì gọi mình dậy nhé 😴", "cuộn tròn, mọi thứ yên ổn 🐈"],
      "idle": ["yên ắng quá 😺", "sẵn sàng khi bạn cần 🐾", "chill thôi ✨"]
    },
    "chat": {
      "label": "Trò chuyện với {{name}}",
      "close": "Đóng {{name}}",
      "new": "Cuộc trò chuyện mới",
      "status": "Trạng thái — bấm để xem các phiên cần bạn",
      "endTitle": "Kết thúc chat này?",
      "endBody": "Nó vẫn đang trả lời. Chat mới sẽ dừng phiên này.",
      "endConfirm": "Dừng và bắt đầu mới",
      "openWorkspace": "Mở trong workspace",
      "typing": "đang trả lời…",
      "placeholder": "Hỏi {{name}} bất cứ điều gì…",
      "emptyTitle": "Chào bạn! Mình là {{name}} 🐾",
      "emptyHint": "Hỏi gì cũng được — mình sẽ nhờ {{tool}} trả lời ngay tại đây.",
      "starting": "Đang khởi động {{tool}}…",
      "notStarted": "Đang chờ phiên khởi động — nếu nó hỏi gì, hãy mở trong workspace.",
      "notSent": "Không gửi được tới terminal của phiên — thử lại, hoặc mở trong workspace."
    }
  },
  "pricing": {
@@ -3493,7 +3493,7 @@ POST   /api/pets/featured/:id         Download a FEATURED pet from codex-pets.ne
 DELETE /api/pets/:id                  Delete a pet (its folder under the data dir)
 ```
-The mascot (Sagi) can wear a pet: right-click it for **Hide pet**, **Size** (48–250 px), **Choose pet** (Sagi, the featured pets, your own — deletable), **Upload your own…**, **Import .codex-pet bundle…**, **Find more on codex-pets.net** and **Pet settings…**, which opens the pet block of **Settings → Appearance** (`/settings/appearance#pet`, `client/src/components/settings/PetSettings.tsx`; the old `/settings/pet` redirects there): show/hide, speech bubbles, size with a live preview, and the same choose / download / upload / import / delete as a grid. The menu and the page share `components/Sagi/usePets.ts`. Which pet is worn (with its display name, which the mascot goes by) and its size are viewer preferences in `localStorage` (`agenthub.pet`, `agenthub.pet.size`); a name the user types by clicking it in the mascot's chat window header is `agenthub.pet.names` (`{ [petId]: name }`, empty = the pet's own); the pets live on the server, one folder each under `<data dir>/pets/<id>/` with a `meta.json` AgentHub writes.
+The mascot (Sagi) no longer chats (v2.8.68): a click opens its window — its name, a pat and the status of your sessions. It can wear a pet: right-click it for **Hide pet**, **Size** (48–250 px), **Choose pet** (Sagi, the featured pets, your own — deletable), **Upload your own…**, **Import .codex-pet bundle…**, **Find more on codex-pets.net** and **Pet settings…**, which opens the pet block of **Settings → Appearance** (`/settings/appearance#pet`, `client/src/components/settings/PetSettings.tsx`; the old `/settings/pet` redirects there): show/hide, speech bubbles, size with a live preview, and the same choose / download / upload / import / delete as a grid. The menu and the page share `components/Sagi/usePets.ts`. Which pet is worn (with its display name, which the mascot goes by) and its size are viewer preferences in `localStorage` (`agenthub.pet`, `agenthub.pet.size`); a name the user types by clicking it in the mascot's window header is `agenthub.pet.names` (`{ [petId]: name }`, empty = the pet's own); the pets live on the server, one folder each under `<data dir>/pets/<id>/` with a `meta.json` AgentHub writes.
 A **Codex pet** is the `.codex-pet.zip` format Codex Desktop uses (the bundles shared on codex-pets.net and in `mileson/codex-pets`): `pet.json` (`id`, `displayName`, `description`, `spritesheetPath`) and `spritesheet.webp`, a 1536×1872 atlas of 8 columns × 9 rows of 192×208 frames — idle, run right, run left, waving, jumping, failed, waiting, running, review, with 6/8/8/4/5/8/6/6/6 frames — or a v2 atlas (`spriteVersionNumber: 2`, 1536×2288, 11 rows) whose rows 9–10 add 16 gaze poses, 22.5° apart clockwise from straight up. The mascot plays the row of its mood (an agent working → running, waiting for you → waiting, an error → failed, a finished turn → jumping, a live session at rest → review, idle/asleep → idle), and on an event it plays a moment over the mood (a new session → waving, a finish or a pat → jumping, a new subagent → review, a session waiting on you → waiting, an error → failed); dragged it runs left or right with the drag (and along the glide to its edge), hovered it waves, and a v2 pet at idle turns toward the pointer (back to idle 2 s after the pointer rests). Frames play at Codex's own timings (`codex-rs/tui/src/pets/model.rs`: e.g. running 120 ms a frame, its last 220 ms); idle plays at the drawn pace (280/110/110/140/140/320 ms), a sleeping pet at Codex's 6× slower one. Waving, jumping, failed and review are moments — they play three times and settle into idle; running, waiting and the run rows loop. Only the two files are read, at the archive root or one folder deep; an entry's size is checked from the zip's directory before it is inflated; the sheet must be a WebP of exactly one of those sizes (`400 EBADPET` otherwise). An uploaded image is shown still and bobs; SVG is refused because an SVG served from the dashboard's origin runs script.