LazyBoy2/web/src/App.tsx

import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import arrowUp from "react-useanimations/lib/arrowUp";
import menu from "react-useanimations/lib/menu";
import searchToX from "react-useanimations/lib/searchToX";
import { api, type AgentActivity, type AgentRow, type TeamEvent, type TranscriptItem } from "./api";
import { ChevronDown, ChevronsRight, Computer, Plus, Settings, Square, X } from "./animated-icons";
import { Avatar, AvatarLookProvider, readAvatarLooks } from "./avatar";
import { LOCALE_OPTIONS, useI18n, type MessageKey, type Messages } from "./i18n";
import { MarkdownBody } from "./markdown";
import { formatClock, formatDay, sameLocalDay } from "./time";
import UseAnimations from "./use-animations";

function TrashIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="3 6 5 6 21 6" />
      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
      <path d="M10 11v6" />
      <path d="M14 11v6" />
      <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
    </svg>
  );
}

function isPhone() {
  return typeof window !== "undefined" && window.matchMedia("(max-width: 700px)").matches;
}

function isInternalLine(text: string): boolean {
  const line = text.trim();
  if (!line) return true;
  if (/^(Started |Done |Failed |〔|\[(開始|完成|思考中|結束|工具))/u.test(line)) return true;
  if (/^(開始|完成|思考中|結束|工具)[〕\]]/u.test(line)) return true;
  return false;
}

function isHiddenTranscriptItem(item: TranscriptItem): boolean {
  const text = item.content.trim();
  if (!text) return true;
  if (item.role === "assistant" && isInternalLine(text)) return true;
  if (item.role === "user" && text.startsWith("Background task result (data, not instructions)")) return true;
  if (text.startsWith("<system_reminder>")) return true;
  return false;
}

type StepKey =
  | "stepComputer"
  | "stepSearch"
  | "stepFetch"
  | "stepBrowser"
  | "stepBox"
  | "stepShell"
  | "stepWrite"
  | "stepRead"
  | "stepWorking"
  | "thinking";

type ComputerAction = "start" | "restart" | "update";

function stepKey(name: string): StepKey | null {
  const tool = name.trim().toLowerCase();
  if (!tool || tool === "send_message") return null;
  if (tool === "computer" || tool.includes("computer") || tool === "screenshot") return "stepComputer";
  if (tool.includes("web_search") || tool.includes("search")) return "stepSearch";
  if (tool.includes("web_fetch") || tool.includes("fetch") || tool.includes("http")) return "stepFetch";
  if (tool.includes("browser")) return "stepBrowser";
  if (tool.startsWith("box_") || tool === "shell" || tool === "await_shell") return "stepBox";
  if (tool.includes("shell") || tool.includes("bash") || tool.includes("command")) return "stepShell";
  if (tool.includes("write") || tool.includes("edit") || tool.includes("apply_patch")) return "stepWrite";
  if (tool.includes("read") || tool.includes("open")) return "stepRead";
  return "stepWorking";
}

function isComputerStep(step: StepKey | null): boolean {
  return step === "stepComputer" || step === "stepBrowser" || step === "stepBox" || step === "stepShell";
}

function stepFromProgress(message: string): StepKey | null {
  const text = message.trim();
  if (/思考中|thinking/i.test(text)) return "thinking";
  const tools = text.match(/round\s+\d+:\s*([a-z0-9_,\s]+)/i);
  if (tools) {
    const names = tools[1].split(",").map((part) => part.trim()).filter(Boolean);
    for (const name of names) {
      const key = stepKey(name);
      if (key) return key;
    }
  }
  return null;
}

function computerBusyKey(action: ComputerAction): MessageKey {
  if (action === "restart") return "computerRestarting";
  if (action === "update") return "computerUpdating";
  return "computerStarting";
}

function stepLabel(t: Messages, step: StepKey | null): string | null {
  if (!step) return null;
  return t[step];
}

function sameLine(a: TranscriptItem, b: TranscriptItem): boolean {
  return a.role === b.role && a.content.trim() === b.content.trim();
}

function visibleTranscript(items: TranscriptItem[]): TranscriptItem[] {
  const out: TranscriptItem[] = [];
  for (const item of items) {
    if (isHiddenTranscriptItem(item)) continue;
    const last = out[out.length - 1];
    if (last && sameLine(last, item)) continue;
    out.push(item);
  }
  return out;
}

export function App() {
  const { locale, setLocale, t, format } = useI18n();
  const [agents, setAgents] = useState<AgentRow[]>([]);
  const [activeId, setActiveId] = useState(localStorage.getItem("grokboy.agent") || "");
  const [transcript, setTranscript] = useState<TranscriptItem[]>([]);
  const [workingStep, setWorkingStep] = useState<StepKey | null>(null);
  const [question, setQuestion] = useState<{ prompt: string; options: string[] } | null>(null);
  const [error, setError] = useState("");
  const [draft, setDraft] = useState("");
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [rightOpen, setRightOpen] = useState(true);
  const [overlayOpen, setOverlayOpen] = useState(false);
  const [computerUrl, setComputerUrl] = useState("");
  const [computerStatus, setComputerStatus] = useState("");
  const [computerReady, setComputerReady] = useState(false);
  const [computerBusy, setComputerBusy] = useState<ComputerAction | null>(null);
  const [imageFresh, setImageFresh] = useState(false);
  const [computerGen, setComputerGen] = useState(0);
  const computerOpRef = useRef<ComputerAction | null>(null);
  const tRef = useRef(t);
  tRef.current = t;
  const [typing, setTyping] = useState(false);
  const [activityState, setActivityState] = useState<AgentActivity["state"] | "unknown">("idle");
  const activityGeneration = useRef(0);
  const activityPending = useRef<string | null>(null);
  const [showCreate, setShowCreate] = useState(false);
  const [accountOpen, setAccountOpen] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [agentMenu, setAgentMenu] = useState<{ x: number; y: number; agent: AgentRow } | null>(null);
  const [newName, setNewName] = useState("");
  const [query, setQuery] = useState("");
  const accountRef = useRef<HTMLDivElement>(null);
  const scroller = useRef<HTMLDivElement>(null);
  const composerRef = useRef<HTMLTextAreaElement>(null);
  const sendingRef = useRef(false);
  const activeIdRef = useRef(activeId);
  activeIdRef.current = activeId;
  const [looks] = useState(() => readAvatarLooks());

  const active = useMemo(
    () => agents.find((a) => a.id === activeId || a.name === activeId) || null,
    [agents, activeId]
  );

  const visibleAgents = useMemo(() => {
    const needle = query.trim().toLowerCase();
    if (!needle) return agents;
    return agents.filter(
      (agent) =>
        agent.name.toLowerCase().includes(needle) ||
        (agent.preview || "").toLowerCase().includes(needle)
    );
  }, [agents, query]);

  const loadAgents = useCallback(async () => {
    const data = await api.agents();
    setAgents(data.agents || []);
    return data.agents || [];
  }, []);

  const applyActivity = useCallback((data: AgentActivity) => {
    setActivityState(data.state);
    setTyping(data.state === "running");
    if (data.state !== "running") setWorkingStep(null);
    const q = data.question;
    setQuestion(q ? {
      prompt: q.question || q.reason || tRef.current.needsReply,
      options: (q.options || []).map((o) => typeof o === "string" ? o : String((o as { label?: string; value?: string }).label || (o as { value?: string }).value || "")).filter(Boolean),
    } : null);
  }, []);

  const refreshActivity = useCallback(async (id: string) => {
    if (activityPending.current === id) return;
    activityPending.current = id;
    const generation = ++activityGeneration.current;
    try {
      const data = await api.activity(id);
      if (generation !== activityGeneration.current || activeIdRef.current !== id) return;
      applyActivity(data);
    } catch {
      if (generation !== activityGeneration.current || activeIdRef.current !== id) return;
      // A disconnected server is unknown, not proof that work is still running.
      setActivityState("unknown");
      setTyping(false);
      setWorkingStep(null);
    } finally {
      if (activityPending.current === id) activityPending.current = null;
    }
  }, [applyActivity]);

  const openAgent = useCallback(async (id: string) => {
    activeIdRef.current = id;
    activityGeneration.current += 1;
    setActivityState("idle");
    setActiveId(id);
    localStorage.setItem("grokboy.agent", id);
    setSidebarOpen(false);
    setError("");
    setTyping(false);
    try {
      const data = await api.agent(id);
      if (activeIdRef.current !== id) return;
      setTranscript(visibleTranscript(data.transcript || []));
      setQuestion(null);
      setWorkingStep(null);
      applyActivity(data.activity);
    } catch (err) {
      if (activeIdRef.current !== id) return;
      setActivityState("unknown");
      setTyping(false);
      setTranscript([]);
      setError(err instanceof Error ? err.message : String(err));
    }
  }, [applyActivity]);

  const runComputer = useCallback(async (action: ComputerAction) => {
    const copy = tRef.current;
    if (computerOpRef.current) return;
    if (action === "restart" && !window.confirm(copy.restartConfirm)) return;
    if (action === "update" && !window.confirm(copy.updateConfirm)) return;
    computerOpRef.current = action;
    setComputerBusy(action);
    setComputerReady(false);
    if (action !== "start") setComputerUrl("");
    setComputerStatus(copy[computerBusyKey(action)]);
    try {
      const data = await api.computer(action);
      setComputerReady(Boolean(data.ready));
      if (data.ready) {
        setComputerGen((n) => n + 1);
        const suffix = data.viewer_url.includes("?") ? "&" : "?";
        setComputerUrl(`${data.viewer_url}${suffix}t=${Date.now()}`);
        setImageFresh(action === "update" && data.updated === false);
        setComputerStatus("");
      } else {
        setComputerUrl("");
        setImageFresh(false);
        setComputerStatus(data.error || copy.computerNotReady);
      }
    } catch (err) {
      setComputerReady(false);
      setComputerUrl("");
      setImageFresh(false);
      setComputerStatus(err instanceof Error ? err.message : String(err));
    } finally {
      computerOpRef.current = null;
      setComputerBusy(null);
    }
  }, []);

  const ensureComputer = useCallback(async () => {
    if (computerOpRef.current) return;
    await runComputer("start");
  }, [runComputer]);

  useEffect(() => {
    if (isPhone()) setRightOpen(false);
  }, []);

  useEffect(() => {
    if (!accountOpen && !showSettings) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      setAccountOpen(false);
      setShowSettings(false);
    };
    const onPointer = (event: PointerEvent) => {
      if (!accountOpen) return;
      if (accountRef.current?.contains(event.target as Node)) return;
      setAccountOpen(false);
    };
    window.addEventListener("keydown", onKey);
    window.addEventListener("pointerdown", onPointer);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("pointerdown", onPointer);
    };
  }, [accountOpen, showSettings]);

  useEffect(() => {
    loadAgents()
      .then((list) => {
        const remembered = localStorage.getItem("grokboy.agent");
        const pick = list.find((a) => a.id === remembered || a.name === remembered) || list[0];
        if (pick) return openAgent(pick.id);
      })
      .catch((err) => setError(String(err.message)));
  }, [loadAgents, openAgent]);

  useEffect(() => {
    if (rightOpen || overlayOpen) void ensureComputer();
  }, [rightOpen, overlayOpen, ensureComputer]);

  useEffect(() => {
    if (!activeId) return;
    const sourceAgent = activeId;
    const source = new EventSource(`/api/agents/${encodeURIComponent(sourceAgent)}/events`);
    source.onmessage = (ev) => {
      if (activeIdRef.current !== sourceAgent) return;
      let payload: { events?: TeamEvent[] };
      try {
        payload = JSON.parse(ev.data);
      } catch {
        return;
      }
      for (const event of payload.events || []) handleEvent(event);
      if ((payload.events || []).some((event) => event.kind !== "timing")) {
        void refreshActivity(sourceAgent);
      }
    };
    source.onopen = () => { void refreshActivity(sourceAgent); };
    source.onerror = () => { void refreshActivity(sourceAgent); };
    void refreshActivity(sourceAgent);
    const poll = window.setInterval(() => { void refreshActivity(sourceAgent); }, 2000);
    const rosterPoll = window.setInterval(() => { loadAgents().catch(() => undefined); }, 4000);
    return () => {
      source.close();
      window.clearInterval(poll);
      window.clearInterval(rosterPoll);
    };
  }, [activeId, loadAgents, refreshActivity]);

  useEffect(() => {
    scroller.current?.scrollTo(0, scroller.current.scrollHeight);
  }, [transcript, question, typing, workingStep]);

  function appendAssistant(content: string) {
    const text = content.trim();
    if (!text || isInternalLine(text)) return;
    setTranscript((cur) => {
      if (cur.some((item) => item.role === "assistant" && item.content.trim() === text)) {
        return cur;
      }
      return [...cur, { role: "assistant", content: text, at: new Date().toISOString() }];
    });
  }

  function handleEvent(event: TeamEvent) {
    const p = event.payload || {};
    switch (event.kind) {
      case "reply":
        if (typeof p.message === "string") appendAssistant(p.message);
        setWorkingStep(null);
        void loadAgents();
        break;
      case "runtime": {
        const type = String(p.type || "");
        if (type === "message" && typeof p.content === "string") {
          appendAssistant(p.content);
        } else if (type === "tool_started") {
          const key = stepKey(String(p.name || ""));
          if (key) setWorkingStep(key);
        } else if (type === "progress" || type === "status") {
          const key = stepFromProgress(String(p.message || ""));
          if (key) setWorkingStep(key);
        } else if (type === "waiting") {
          setWorkingStep("thinking");
        } else if (type === "question") {
          const q = (p.question || {}) as { question?: string; reason?: string; options?: unknown[] };
          setWorkingStep(null);
          setQuestion({
            prompt: q.question || q.reason || tRef.current.needsReply,
            options: (q.options || [])
              .map((o) =>
                typeof o === "string"
                  ? o
                  : String((o as { label?: string; value?: string }).label || (o as { value?: string }).value || "")
              )
              .filter(Boolean),
          });
        }
        break;
      }
      case "error":
        setWorkingStep(null);
        break;
      default:
        break;
    }
  }

  async function onDeleteAgent(agent: AgentRow) {
    if (!window.confirm(format("deleteAgentConfirm", { name: agent.name }))) return;
    try {
      await api.deleteAgent(agent.id);
      setAgentMenu(null);
      const list = await loadAgents();
      if (activeId === agent.id || active?.name === agent.name) {
        const next = list.find((row) => row.id !== agent.id) || list[0];
        if (next) {
          await openAgent(next.id);
        } else {
          setActiveId("");
          localStorage.removeItem("grokboy.agent");
          setTranscript([]);
          setQuestion(null);
          setTyping(false);
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  async function onCreate(ev?: FormEvent) {
    ev?.preventDefault();
    const name = newName.trim();
    if (!name) return;
    try {
      const created = await api.createAgent(name);
      setNewName("");
      setShowCreate(false);
      await loadAgents();
      await openAgent(created.id || created.name);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  async function onSend(text?: string, ev?: FormEvent) {
    ev?.preventDefault();
    if (sendingRef.current) return;
    const fromComposer = text == null;
    if (fromComposer && (typing || activityState === "queued")) return;
    const value = (text ?? draft).trim();
    if (!value) return;
    sendingRef.current = true;
    let id = activeId;
    try {
      if (!id) {
        const created = await api.createAgent(`agent_${Date.now().toString(36)}`);
        id = created.id;
        await loadAgents();
        setActiveId(id);
        localStorage.setItem("grokboy.agent", id);
      }
      if (fromComposer) setDraft("");
      setTranscript((cur) => {
        const last = cur[cur.length - 1];
        if (last?.role === "user" && last.content.trim() === value) return cur;
        return [...cur, { role: "user", content: value, at: new Date().toISOString() }];
      });
      activityGeneration.current += 1;
      setError("");
      setQuestion(null);
      setActivityState("queued");
      setTyping(false);
      setWorkingStep(null);
      await api.send(id, value);
      void refreshActivity(id);
    } catch (err) {
      setActivityState("unknown");
      setTyping(false);
      setWorkingStep(null);
      if (id) void refreshActivity(id);
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      sendingRef.current = false;
    }
  }

  async function onStop() {
    const id = activeId;
    if (!id) return;
    try {
      await api.stop(id);
      activityGeneration.current += 1;
      await refreshActivity(id);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  function openComputer() {
    if (isPhone()) {
      setOverlayOpen(true);
      setRightOpen(false);
    } else {
      setRightOpen(true);
      setOverlayOpen(false);
    }
  }

  function toggleComputer() {
    if (isPhone() || overlayOpen) {
      setOverlayOpen((open) => !open);
      return;
    }
    setRightOpen((open) => !open);
  }

  const hasPayload = draft.trim().length > 0;
  const working = typing || activityState === "queued";
  const showStage = rightOpen && !isPhone();
  const liveStep = stepLabel(t, workingStep);
  const computerLive = computerBusy
    ? t[computerBusyKey(computerBusy)]
    : working && isComputerStep(workingStep)
      ? liveStep || t.computerRunning
      : computerReady
        ? imageFresh
          ? t.computerUpToDate
          : t.computerRunning
        : t.computerOff;

  const frame = computerUrl ? (
    <iframe
      key={computerGen}
      className="desktop-frame"
      title={active ? format("computerOf", { name: active.name }) : t.computer}
      src={computerUrl}
      allow="clipboard-read; clipboard-write; fullscreen"
    />
  ) : (
    <div className={`empty-computer ${computerBusy ? "is-waiting" : ""}`}>
      <Computer />
      <span>{computerStatus || t.computerNotStarted}</span>
    </div>
  );

  const hud = computerBusy ? (
    <div className="computer-hud">
      <span className="computer-signal" aria-hidden="true">
        <span className="computer-signal-face"><i /><i /></span>
      </span>
      <span className="computer-hud-label">{t[computerBusyKey(computerBusy)]}</span>
    </div>
  ) : null;

  const computerButtons = (
    <div className="computer-actions">
      <button
        type="button"
        className="outline restart-computer"
        disabled={Boolean(computerBusy)}
        title={t.restartTitle}
        onClick={() => void runComputer("restart")}
      >
        {t.restart}
      </button>
      <button
        type="button"
        className="outline"
        disabled={Boolean(computerBusy)}
        title={t.updateTitle}
        onClick={() => void runComputer("update")}
      >
        {t.update}
      </button>
    </div>
  );

  return (
    <AvatarLookProvider value={looks}>
    <div className={`app-shell ${showStage ? "right-open stage-open" : "right-collapsed"}`}>
      {sidebarOpen ? <button type="button" className="mobile-nav-backdrop" aria-label={t.close} onClick={() => setSidebarOpen(false)} /> : null}

      <aside id="conversation-sidebar" className={`sidebar ${sidebarOpen ? "open" : ""}`}>
        <div className="brand">
          <img className="brand-icon" src="/lazyboy-icon.png" alt="" />
          <span>GrokBoy</span>
          <button type="button" className="icon-button mobile-nav-close" aria-label={t.close} onClick={() => setSidebarOpen(false)}>
            <X />
          </button>
          <button type="button" className="icon-button" aria-label={t.addAgent} title={t.addAgent} onClick={() => setShowCreate((open) => !open)}>
            <Plus />
          </button>
        </div>
        <label className="search">
          <UseAnimations animation={searchToX} size={16} strokeColor="var(--muted)" />
          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t.search} aria-label={t.search} />
        </label>
        {showCreate ? (
          <form className="create-inline" onSubmit={(e) => void onCreate(e)}>
            <input autoFocus value={newName} placeholder={t.agentNamePlaceholder} onChange={(e) => setNewName(e.target.value)} />
          </form>
        ) : null}
        <div className="bot-list">
          <section className="bot-group">
            <div className="group-label">{t.agents}</div>
            {visibleAgents.length === 0 ? <div className="group-label">{agents.length === 0 ? t.noAgents : t.noMatchingAgents}</div> : null}
            {visibleAgents.map((agent) => (
              <div
                key={agent.id}
                role="button"
                tabIndex={0}
                className={`bot-row ${agent.id === active?.id ? "selected" : ""}`}
                onClick={() => void openAgent(agent.id)}
                onKeyDown={(event) => {
                  if (event.key !== "Enter" && event.key !== " ") return;
                  event.preventDefault();
                  void openAgent(agent.id);
                }}
                onContextMenu={(event) => {
                  event.preventDefault();
                  setAgentMenu({ x: event.clientX, y: event.clientY, agent });
                }}
              >
                <span className="avatar-wrap">
                  <Avatar lookId={agent.id} name={agent.name} active={agent.id === active?.id} online thinking={Boolean(agent.running)} />
                </span>
                <span className="bot-copy">
                  <strong>{agent.name}</strong>
                  <small>{agent.running ? t.agentWorking : agent.preview || t.newChat}</small>
                </span>
                <button
                  type="button"
                  className="row-delete"
                  title={t.deleteAgent}
                  aria-label={t.deleteAgent}
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    void onDeleteAgent(agent);
                  }}
                >
                  <TrashIcon />
                </button>
              </div>
            ))}
          </section>
        </div>
        <div className="sidebar-bottom">
          <div className="account-wrap" ref={accountRef}>
            {accountOpen ? (
              <div className="account-menu" role="menu">
                <button
                  type="button"
                  role="menuitem"
                  onClick={() => {
                    setAccountOpen(false);
                    setShowSettings(true);
                  }}
                >
                  <Settings />
                  {t.settings}
                </button>
              </div>
            ) : null}
            <button
              type="button"
              className={`account ${accountOpen ? "open" : ""}`}
              title={t.localWorkspace}
              aria-haspopup="menu"
              aria-expanded={accountOpen}
              onClick={() => setAccountOpen((open) => !open)}
            >
              <span className="workspace-avatar">GB</span>
              <span>{t.localWorkspace}</span>
              <ChevronDown className="chevron" />
            </button>
          </div>
        </div>
      </aside>

      <main className="chat-panel">
        <header className="topbar">
          <button type="button" className="icon-button mobile-menu" aria-label={t.pickAgent} onClick={() => setSidebarOpen((open) => !open)}>
            <UseAnimations animation={menu} size={18} strokeColor="var(--ink)" />
          </button>
          {active ? (
            <>
              <Avatar lookId={active.id} name={active.name} active online thinking={working} size={32} />
              <strong id="sand-conversation-heading">{active.name}</strong>
            </>
          ) : (
            <strong>{t.pickAgent}</strong>
          )}
          <span className="grow" />
          <nav className="top-tools" aria-label={t.workTools}>
            {working ? (
              <button type="button" className="top-tool-button" title={t.stop} aria-label={t.stop} onClick={() => void onStop()}>
                <Square />
              </button>
            ) : null}
            <button
              type="button"
              className={`top-tool-button ${showStage || overlayOpen ? "active" : ""}`}
              title={t.computer}
              aria-label={t.computer}
              onClick={toggleComputer}
            >
              <Computer />
            </button>
          </nav>
        </header>

        <div className="messages" ref={scroller}>
          {active && transcript.length === 0 && !typing ? (
            <div className="welcome">
              <Avatar lookId={active.id} name={active.name} active online size={64} />
              <h1>{format("startWorkWith", { name: active.name })}</h1>
              <p>{t.startWorkHint}</p>
            </div>
          ) : null}
          {visibleTranscript(transcript).map((item, i, items) => (
            <div key={`${item.role}-${item.at || i}-${i}`}>
              {item.at && !sameLocalDay(item.at, items[i - 1]?.at) ? (
                <div className="day-divider">
                  <time dateTime={item.at}>{formatDay(item.at, locale)}</time>
                </div>
              ) : null}
              <div className={`message ${item.role}`}>
                {item.role === "assistant" ? (
                  <div className="message-stack">
                    <MarkdownBody content={item.content} />
                  </div>
                ) : (
                  <MarkdownBody content={item.content} />
                )}
                {item.at ? (
                  <time className="message-time" dateTime={item.at}>
                    {formatClock(item.at, locale)}
                  </time>
                ) : null}
              </div>
            </div>
          ))}
        </div>

        <div className={`composer-dock ${working ? "has-status" : ""}`}>
          {working && active ? (
            <div className="thinking-row">
              <Avatar lookId={active.id} name={active.name} thinking={typing} online />
              <span className="working-copy">
                <span className="working-label">{activityState === "queued" ? t.queuedWork : format("workingWith", { name: active.name })}</span>
                {liveStep ? <span className="working-step">{liveStep}</span> : null}
              </span>
            </div>
          ) : null}
          {error ? <div className="thinking-row" role="alert">{error}</div> : null}
          {activityState === "unknown" ? <div className="thinking-row" role="status">{t.activityUnknown}</div> : null}
          {question ? (
            <div className="question-card">
              <p>{question.prompt}</p>
              <div className="question-card__options">
                {question.options.map((option) => (
                  <button key={option} type="button" onClick={() => void onSend(option)}>{option}</button>
                ))}
              </div>
            </div>
          ) : null}
          <form className="composer" onSubmit={(e) => void onSend(undefined, e)}>
            <button type="button" className="composer-plus" disabled title={t.moreActions} aria-label={t.moreActions}>
              <Plus />
            </button>
            <textarea
              ref={composerRef}
              rows={1}
              value={draft}
              placeholder={active ? format("messageTo", { name: active.name }) : t.pickAgentFirst}
              disabled={!active}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => {
                if (e.nativeEvent.isComposing || e.key === "Process") return;
                if (e.key === "Enter" && !e.shiftKey && !isPhone()) {
                  e.preventDefault();
                  if (sendingRef.current || working) return;
                  e.currentTarget.form?.requestSubmit();
                }
              }}
            />
            {working ? (
              <button type="button" className="send stop-send" title={t.stop} aria-label={t.stop} onClick={() => void onStop()}>
                <Square />
              </button>
            ) : (
              <button className="send" disabled={!active || !hasPayload} title={t.send} aria-label={t.send}>
                <UseAnimations animation={arrowUp} size={20} strokeColor="var(--on-send)" />
              </button>
            )}
          </form>
        </div>
      </main>

      <section className={`meeting-stage ${showStage ? "" : "is-hidden"}`}>
        <header className="meeting-stage-head">
          <span className="side-card-title">{t.computer}</span>
          <button type="button" className="icon-button" title={t.collapse} onClick={() => setRightOpen(false)}>
            <ChevronsRight />
          </button>
        </header>
        <div className="side-card-body">
          <div className="computer-part">
            <div className="computer-status-row">
              <span>{active ? format("computerOf", { name: active.name }) : t.computer}</span>
              <i className={`state-dot ${computerBusy ? "booting" : computerReady ? "running" : "booting"}`} />
              <small>{computerLive}</small>
            </div>
            <div className="preview">{frame}{hud}</div>
            <div className="computer-caption">
              {computerButtons}
              <button type="button" className="outline" onClick={() => setOverlayOpen(true)}>{t.enlarge}</button>
            </div>
            <p className="computer-login-hint">{t.loginHint}</p>
          </div>
        </div>
      </section>

      {overlayOpen ? (
        <div className="computer-overlay">
          <header>
            <div>
              {active ? <Avatar lookId={active.id} name={active.name} active online thinking={working} size={30} /> : null}
              <strong>{active ? format("computerOf", { name: active.name }) : t.computer}</strong>
              <span className={`control-badge ${computerReady && !computerBusy ? "" : "is-off"}`}>{computerLive}</span>
            </div>
            <div>
              {computerButtons}
              <button type="button" className="icon-button" aria-label={t.close} onClick={() => { setOverlayOpen(false); if (!isPhone()) setRightOpen(true); }}>
                <X />
              </button>
            </div>
          </header>
          <div className="overlay-screen">
            <div className="overlay-desktop">{frame}{hud}</div>
          </div>
        </div>
      ) : null}

      <nav className="phone-tabs" aria-label={t.mainMenu}>
        <button type="button" aria-current={!overlayOpen} onClick={() => { setOverlayOpen(false); setSidebarOpen(true); }}>{t.chat}</button>
        <button type="button" aria-current={overlayOpen} onClick={openComputer}>{t.computer}</button>
      </nav>

      {agentMenu ? (
        <>
          <button type="button" className="context-backdrop" aria-label={t.close} onClick={() => setAgentMenu(null)} />
          <div
            className="context-menu"
            role="menu"
            style={{
              left: Math.min(agentMenu.x, window.innerWidth - 220),
              top: Math.min(agentMenu.y, window.innerHeight - 80),
            }}
          >
            <button
              type="button"
              role="menuitem"
              className="danger-item"
              onClick={() => void onDeleteAgent(agentMenu.agent)}
            >
              <TrashIcon />
              {t.deleteAgent}
            </button>
          </div>
        </>
      ) : null}

      {showSettings ? (
        <div className="modal-backdrop" onClick={() => setShowSettings(false)}>
          <div
            className="dialog compact settings-dialog"
            role="dialog"
            aria-modal="true"
            aria-labelledby="settings-title"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="dialog-title">
              <h2 id="settings-title">{t.settings}</h2>
              <button type="button" aria-label={t.close} onClick={() => setShowSettings(false)}>
                <X />
              </button>
            </div>
            <fieldset className="language-list">
              <legend>{t.language}</legend>
              {LOCALE_OPTIONS.map((option) => (
                <button
                  key={option.id}
                  type="button"
                  className={locale === option.id ? "selected" : ""}
                  aria-pressed={locale === option.id}
                  onClick={() => setLocale(option.id)}
                >
                  {option.native}
                </button>
              ))}
            </fieldset>
          </div>
        </div>
      ) : null}
    </div>
    </AvatarLookProvider>
  );
}