feat: add multi-agent beta remote office support (#62)

* Remote openclaw connection enabled and agent added * 2 worlds connected * Performance improvement * Performance improvements * Added documentation * feat(office): add multi-agent beta remote office support Add a second-office beta that can mirror remote Claw3D presence or derive remote gateway presence so teams can visualize and message agents across instances. Harden the new remote flows, document setup, and keep the branch green with full validation. Made-with: Cursor --------- Co-authored-by: iamlukethedev <iamlukethedev@users.noreply.github.com> Co-authored-by: iamlukethedev <lucas.guilherme@smartwayslfl.com>
2026-03-25 11:14:20 -05:00
parent 1185f7a9f0
commit a202cdc80f
31 changed files with 4326 additions and 467 deletions
@@ -0,0 +1,144 @@
+import {
+  memo,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+
+export type RemoteAgentChatMessage = {
+  id: string;
+  role: "user" | "system";
+  text: string;
+  timestampMs: number;
+};
+
+type RemoteAgentChatPanelProps = {
+  agentName: string;
+  canSend: boolean;
+  sending: boolean;
+  draft: string;
+  error: string | null;
+  messages: RemoteAgentChatMessage[];
+  disabledReason?: string | null;
+  onDraftChange: (value: string) => void;
+  onSend: (message: string) => void;
+};
+
+const formatTimestamp = (timestampMs: number) =>
+  new Intl.DateTimeFormat(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(new Date(timestampMs));
+
+export const RemoteAgentChatPanel = memo(function RemoteAgentChatPanel({
+  agentName,
+  canSend,
+  sending,
+  draft,
+  error,
+  messages,
+  disabledReason,
+  onDraftChange,
+  onSend,
+}: RemoteAgentChatPanelProps) {
+  const [draftValue, setDraftValue] = useState(draft);
+  const feedRef = useRef<HTMLDivElement | null>(null);
+  const sendDisabled = !canSend || sending || !draftValue.trim();
+  const helperText = useMemo(() => {
+    if (disabledReason?.trim()) return disabledReason.trim();
+    if (sending) return "Forwarding your message to the remote gateway.";
+    return "Text-only relay. Remote replies are not mirrored here yet.";
+  }, [disabledReason, sending]);
+
+  useEffect(() => {
+    setDraftValue(draft);
+  }, [draft]);
+
+  useEffect(() => {
+    if (!feedRef.current) return;
+    feedRef.current.scrollTop = feedRef.current.scrollHeight;
+  }, [messages, sending]);
+
+  const handleSend = () => {
+    const trimmed = draftValue.trim();
+    if (!trimmed || sendDisabled) return;
+    onSend(trimmed);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || event.shiftKey) return;
+    event.preventDefault();
+    handleSend();
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col bg-[#0e0a04]">
+      <div className="border-b border-white/10 px-4 py-3">
+        <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-300/70">
+          Remote Agent
+        </div>
+        <div className="mt-1 text-sm font-medium text-white">{agentName}</div>
+        <div className="mt-2 font-mono text-[11px] text-white/45">{helperText}</div>
+      </div>
+
+      <div ref={feedRef} className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
+        {messages.length === 0 ? (
+          <div className="rounded border border-dashed border-white/10 bg-black/10 px-3 py-3 font-mono text-[11px] text-white/35">
+            Send a plain-text note to this remote agent.
+          </div>
+        ) : (
+          messages.map((message) => (
+            <div
+              key={message.id}
+              className={`max-w-[85%] rounded px-3 py-2 ${
+                message.role === "user"
+                  ? "ml-auto bg-cyan-500/15 text-cyan-50"
+                  : "bg-white/6 text-white/80"
+              }`}
+            >
+              <div className="whitespace-pre-wrap break-words text-[13px] leading-5">
+                {message.text}
+              </div>
+              <div className="mt-2 font-mono text-[10px] text-white/35">
+                {formatTimestamp(message.timestampMs)}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="border-t border-white/10 px-4 py-3">
+        {error ? (
+          <div className="mb-3 rounded border border-red-500/35 bg-red-500/10 px-3 py-2 font-mono text-[11px] text-red-100">
+            {error}
+          </div>
+        ) : null}
+        <textarea
+          value={draftValue}
+          onChange={(event) => {
+            const nextValue = event.target.value;
+            setDraftValue(nextValue);
+            onDraftChange(nextValue);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Message the remote agent."
+          className="min-h-[92px] w-full resize-none rounded border border-white/10 bg-black/20 px-3 py-2 text-sm text-white outline-none transition focus:border-cyan-400/50"
+        />
+        <div className="mt-3 flex items-center justify-between gap-3">
+          <div className="font-mono text-[10px] text-white/35">Enter sends. Shift+Enter adds a line.</div>
+          <button
+            type="button"
+            onClick={handleSend}
+            disabled={sendDisabled}
+            className="rounded border border-cyan-400/40 bg-cyan-500/10 px-3 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-cyan-100 transition hover:border-cyan-300/60 hover:bg-cyan-500/15 disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            {sending ? "Sending..." : "Send"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
@@ -1,5 +1,6 @@
 "use client";

+import { useState } from "react";
 import { CURATED_ELEVENLABS_VOICES } from "@/lib/voiceReply/catalog";

 type SettingsPanelProps = {
@@ -10,6 +11,18 @@ type SettingsPanelProps = {
  officeTitle: string;
  officeTitleLoaded: boolean;
  onOfficeTitleChange: (title: string) => void;
+  remoteOfficeEnabled: boolean;
+  remoteOfficeSourceKind: "presence_endpoint" | "openclaw_gateway";
+  remoteOfficeLabel: string;
+  remoteOfficePresenceUrl: string;
+  remoteOfficeGatewayUrl: string;
+  remoteOfficeTokenConfigured: boolean;
+  onRemoteOfficeEnabledChange: (enabled: boolean) => void;
+  onRemoteOfficeSourceKindChange: (kind: "presence_endpoint" | "openclaw_gateway") => void;
+  onRemoteOfficeLabelChange: (label: string) => void;
+  onRemoteOfficePresenceUrlChange: (url: string) => void;
+  onRemoteOfficeGatewayUrlChange: (url: string) => void;
+  onRemoteOfficeTokenChange: (token: string) => void;
  voiceRepliesEnabled: boolean;
  voiceRepliesVoiceId: string | null;
  voiceRepliesSpeed: number;
@@ -28,6 +41,18 @@ export function SettingsPanel({
  officeTitle,
  officeTitleLoaded,
  onOfficeTitleChange,
+  remoteOfficeEnabled,
+  remoteOfficeSourceKind,
+  remoteOfficeLabel,
+  remoteOfficePresenceUrl,
+  remoteOfficeGatewayUrl,
+  remoteOfficeTokenConfigured,
+  onRemoteOfficeEnabledChange,
+  onRemoteOfficeSourceKindChange,
+  onRemoteOfficeLabelChange,
+  onRemoteOfficePresenceUrlChange,
+  onRemoteOfficeGatewayUrlChange,
+  onRemoteOfficeTokenChange,
  voiceRepliesEnabled,
  voiceRepliesVoiceId,
  voiceRepliesSpeed,
@@ -42,6 +67,7 @@ export function SettingsPanel({
    ? gatewayStatus.charAt(0).toUpperCase() + gatewayStatus.slice(1)
    : "Unknown";
  const gatewayDisconnectDisabled = gatewayStatus !== "connected";
+  const [remoteOfficeTokenDraft, setRemoteOfficeTokenDraft] = useState("");

  return (
    <div className="px-4 py-4">
@@ -99,6 +125,189 @@ export function SettingsPanel({
          </button>
        </div>
      </div>
+      <div className="mt-3 rounded-lg border border-cyan-500/10 bg-black/20 px-4 py-3">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="text-[11px] font-medium text-white">Remote office</div>
+            <div className="mt-1 text-[10px] text-white/75">
+              Attach a second read-only office from either another Claw3D or a remote OpenClaw gateway.
+            </div>
+          </div>
+          <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-cyan-200/70">
+            {remoteOfficeEnabled ? "Enabled" : "Disabled"}
+          </span>
+        </div>
+        <div className="ui-settings-row mt-3 flex min-h-[72px] items-center justify-between gap-6 rounded-lg border border-cyan-500/10 bg-black/15 px-4 py-3">
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              role="switch"
+              aria-label="Remote office"
+              aria-checked={remoteOfficeEnabled}
+              className={`ui-switch self-center ${remoteOfficeEnabled ? "ui-switch--on" : ""}`}
+              onClick={() => onRemoteOfficeEnabledChange(!remoteOfficeEnabled)}
+            >
+              <span className="ui-switch-thumb" />
+            </button>
+            <div className="flex flex-col">
+              <span className="text-[11px] font-medium text-white">Show second office</span>
+              <span className="text-[10px] text-white/80">
+                Remote agents stay visible but non-interactive.
+              </span>
+            </div>
+          </div>
+          <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-cyan-200/70">
+            {remoteOfficeTokenConfigured ? "Token set" : "No token"}
+          </span>
+        </div>
+        <div className="mt-3 grid gap-3">
+          <div>
+            <div className="mb-1 text-[10px] uppercase tracking-[0.14em] text-cyan-100/65">
+              Source type
+            </div>
+            <select
+              value={remoteOfficeSourceKind}
+              onChange={(event) =>
+                onRemoteOfficeSourceKindChange(
+                  event.target.value as "presence_endpoint" | "openclaw_gateway"
+                )
+              }
+              className="w-full rounded-md border border-cyan-500/10 bg-black/25 px-3 py-2 text-[11px] text-cyan-100 outline-none transition-colors focus:border-cyan-400/30"
+            >
+              <option value="presence_endpoint">Remote Claw3D presence endpoint</option>
+              <option value="openclaw_gateway">Remote OpenClaw gateway</option>
+            </select>
+            <div className="mt-1 text-[10px] text-white/50">
+              Use a presence endpoint when the other machine runs Claw3D. Use gateway mode when the other machine only runs OpenClaw.
+            </div>
+          </div>
+          <div>
+            <div className="mb-1 text-[10px] uppercase tracking-[0.14em] text-cyan-100/65">
+              Label
+            </div>
+            <input
+              type="text"
+              value={remoteOfficeLabel}
+              maxLength={48}
+              onChange={(event) => onRemoteOfficeLabelChange(event.target.value)}
+              placeholder="Remote Office"
+              className="w-full rounded-md border border-cyan-500/10 bg-black/25 px-3 py-2 text-[11px] uppercase tracking-[0.14em] text-cyan-100 outline-none transition-colors placeholder:text-cyan-100/30 focus:border-cyan-400/30"
+            />
+          </div>
+          {remoteOfficeSourceKind === "presence_endpoint" ? (
+            <>
+              <div>
+                <div className="mb-1 text-[10px] uppercase tracking-[0.14em] text-cyan-100/65">
+                  Presence URL
+                </div>
+                <input
+                  type="url"
+                  value={remoteOfficePresenceUrl}
+                  onChange={(event) => onRemoteOfficePresenceUrlChange(event.target.value)}
+                  placeholder="https://other-office.example.com/api/office/presence"
+                  className="w-full rounded-md border border-cyan-500/10 bg-black/25 px-3 py-2 text-[11px] text-cyan-100 outline-none transition-colors placeholder:text-cyan-100/30 focus:border-cyan-400/30"
+                />
+                <div className="mt-1 text-[10px] text-white/50">
+                  Studio polls this endpoint server-side when the other machine is also running Claw3D.
+                </div>
+              </div>
+              <div>
+                <div className="mb-1 text-[10px] uppercase tracking-[0.14em] text-cyan-100/65">
+                  Optional token
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="password"
+                    value={remoteOfficeTokenDraft}
+                    onChange={(event) => setRemoteOfficeTokenDraft(event.target.value)}
+                    placeholder={remoteOfficeTokenConfigured ? "Token configured. Enter a new one to replace it." : "Enter token"}
+                    className="min-w-0 flex-1 rounded-md border border-cyan-500/10 bg-black/25 px-3 py-2 text-[11px] text-cyan-100 outline-none transition-colors placeholder:text-cyan-100/30 focus:border-cyan-400/30"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onRemoteOfficeTokenChange(remoteOfficeTokenDraft);
+                      setRemoteOfficeTokenDraft("");
+                    }}
+                    className="rounded-md border border-cyan-500/20 bg-cyan-500/10 px-3 py-2 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-100 transition-colors hover:border-cyan-400/40 hover:bg-cyan-500/15"
+                  >
+                    Save
+                  </button>
+                  {remoteOfficeTokenConfigured ? (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onRemoteOfficeTokenChange("");
+                        setRemoteOfficeTokenDraft("");
+                      }}
+                      className="rounded-md border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-[10px] font-medium uppercase tracking-[0.14em] text-rose-100 transition-colors hover:border-rose-400/40 hover:bg-rose-500/15"
+                    >
+                      Clear
+                    </button>
+                  ) : null}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div>
+                <div className="mb-1 text-[10px] uppercase tracking-[0.14em] text-cyan-100/65">
+                  Gateway URL
+                </div>
+                <input
+                  type="text"
+                  value={remoteOfficeGatewayUrl}
+                  onChange={(event) => onRemoteOfficeGatewayUrlChange(event.target.value)}
+                  placeholder="wss://remote-gateway.example.com"
+                  className="w-full rounded-md border border-cyan-500/10 bg-black/25 px-3 py-2 text-[11px] text-cyan-100 outline-none transition-colors placeholder:text-cyan-100/30 focus:border-cyan-400/30"
+                />
+                <div className="mt-1 text-[10px] text-white/50">
+                  Claw3D connects from the browser directly to the remote OpenClaw gateway and derives a read-only presence snapshot.
+                </div>
+              </div>
+              <div>
+                <div className="mb-1 text-[10px] uppercase tracking-[0.14em] text-cyan-100/65">
+                  Shared gateway token
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="password"
+                    value={remoteOfficeTokenDraft}
+                    onChange={(event) => setRemoteOfficeTokenDraft(event.target.value)}
+                    placeholder={remoteOfficeTokenConfigured ? "Token configured. Enter a new one to replace it." : "Enter token"}
+                    className="min-w-0 flex-1 rounded-md border border-cyan-500/10 bg-black/25 px-3 py-2 text-[11px] text-cyan-100 outline-none transition-colors placeholder:text-cyan-100/30 focus:border-cyan-400/30"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onRemoteOfficeTokenChange(remoteOfficeTokenDraft);
+                      setRemoteOfficeTokenDraft("");
+                    }}
+                    className="rounded-md border border-cyan-500/20 bg-cyan-500/10 px-3 py-2 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-100 transition-colors hover:border-cyan-400/40 hover:bg-cyan-500/15"
+                  >
+                    Save
+                  </button>
+                  {remoteOfficeTokenConfigured ? (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onRemoteOfficeTokenChange("");
+                        setRemoteOfficeTokenDraft("");
+                      }}
+                      className="rounded-md border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-[10px] font-medium uppercase tracking-[0.14em] text-rose-100 transition-colors hover:border-rose-400/40 hover:bg-rose-500/15"
+                    >
+                      Clear
+                    </button>
+                  ) : null}
+                </div>
+                <div className="mt-1 text-[10px] text-white/50">
+                  Optional. Browser-based remote presence and messaging can work without it when the remote gateway already allows your Control UI origin.
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
      <div className="mt-3 rounded-lg border border-cyan-500/10 bg-black/20 px-4 py-3">
        <div className="flex items-start justify-between gap-3">
          <div>
@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { OfficeLayoutSnapshot } from "@/lib/office/layoutSnapshot";
+
+type UseRemoteOfficeLayoutParams = {
+  enabled: boolean;
+  presenceUrl: string;
+  pollIntervalMs?: number;
+};
+
+type UseRemoteOfficeLayoutResult = {
+  loaded: boolean;
+  error: string | null;
+  snapshot: OfficeLayoutSnapshot | null;
+};
+
+export const useRemoteOfficeLayout = ({
+  enabled,
+  presenceUrl,
+  pollIntervalMs = 10_000,
+}: UseRemoteOfficeLayoutParams): UseRemoteOfficeLayoutResult => {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [snapshot, setSnapshot] = useState<OfficeLayoutSnapshot | null>(null);
+  const active = enabled && presenceUrl.trim().length > 0;
+  const requestUrl = useMemo(() => {
+    if (!active) return "";
+    const searchParams = new URLSearchParams({ source: "remote" });
+    return `/api/office/layout?${searchParams.toString()}`;
+  }, [active]);
+
+  useEffect(() => {
+    if (!active || !requestUrl) return;
+    let cancelled = false;
+    let intervalId: number | null = null;
+    const loadSnapshot = async () => {
+      try {
+        const response = await fetch(requestUrl, { cache: "no-store" });
+        const payload = (await response.json()) as
+          | { snapshot: OfficeLayoutSnapshot | null }
+          | { error?: string };
+        if (!response.ok) {
+          const errorMessage =
+            typeof payload === "object" &&
+            payload !== null &&
+            "error" in payload &&
+            typeof payload.error === "string"
+              ? payload.error
+              : "Failed to load remote office layout.";
+          throw new Error(errorMessage);
+        }
+        if (cancelled) return;
+        if (
+          typeof payload === "object" &&
+          payload !== null &&
+          "snapshot" in payload
+        ) {
+          setSnapshot(payload.snapshot ?? null);
+        }
+        setError(null);
+      } catch (loadError) {
+        if (cancelled) return;
+        setError(
+          loadError instanceof Error
+            ? loadError.message
+            : "Failed to load remote office layout.",
+        );
+      } finally {
+        if (!cancelled) {
+          setLoaded(true);
+        }
+      }
+    };
+    void loadSnapshot();
+    intervalId = window.setInterval(() => {
+      void loadSnapshot();
+    }, Math.max(2_500, pollIntervalMs));
+    return () => {
+      cancelled = true;
+      if (intervalId !== null) {
+        window.clearInterval(intervalId);
+      }
+    };
+  }, [active, pollIntervalMs, requestUrl]);
+
+  return {
+    loaded: active ? loaded : false,
+    error: active ? error : null,
+    snapshot: active ? snapshot : null,
+  };
+};
@@ -0,0 +1,275 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import type {
+  SummaryPreviewSnapshot,
+  SummaryStatusSnapshot,
+} from "@/features/agents/state/runtimeEventBridge";
+import {
+  buildAgentMainSessionKey,
+  GatewayClient,
+  isGatewayDisconnectLikeError,
+} from "@/lib/gateway/GatewayClient";
+import { buildOfficePresenceSnapshotFromGateway } from "@/lib/office/gatewayPresence";
+import type { OfficePresenceSnapshot } from "@/lib/office/presence";
+
+type UseRemoteOfficePresenceParams = {
+  enabled: boolean;
+  sourceKind: "presence_endpoint" | "openclaw_gateway";
+  presenceUrl: string;
+  gatewayUrl: string;
+  pollIntervalMs?: number;
+};
+
+type UseRemoteOfficePresenceResult = {
+  error: string | null;
+  loaded: boolean;
+  snapshot: OfficePresenceSnapshot | null;
+};
+
+const normalizeRemoteGatewayUrl = (value: string) => {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  try {
+    const parsed = new URL(trimmed);
+    if (parsed.protocol === "http:") {
+      return `ws://${parsed.host}${parsed.pathname}${parsed.search}${parsed.hash}`;
+    }
+    if (parsed.protocol === "https:") {
+      return `wss://${parsed.host}${parsed.pathname}${parsed.search}${parsed.hash}`;
+    }
+    return trimmed;
+  } catch {
+    return trimmed;
+  }
+};
+
+export const useRemoteOfficePresence = ({
+  enabled,
+  sourceKind,
+  presenceUrl,
+  gatewayUrl,
+  pollIntervalMs = 5_000,
+}: UseRemoteOfficePresenceParams): UseRemoteOfficePresenceResult => {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [snapshot, setSnapshot] = useState<OfficePresenceSnapshot | null>(null);
+  const successLoggedRef = useRef(false);
+  const lastLoggedErrorRef = useRef<string | null>(null);
+  const normalizedGatewayUrl = useMemo(
+    () => normalizeRemoteGatewayUrl(gatewayUrl),
+    [gatewayUrl],
+  );
+  const active =
+    enabled &&
+    (sourceKind === "presence_endpoint"
+      ? presenceUrl.trim().length > 0
+      : normalizedGatewayUrl.length > 0);
+  const requestUrl = useMemo(() => {
+    if (!active || sourceKind !== "presence_endpoint") return "";
+    const searchParams = new URLSearchParams({ source: "remote" });
+    return `/api/office/presence?${searchParams.toString()}`;
+  }, [active, sourceKind]);
+
+  useEffect(() => {
+    if (!active) return;
+    console.info("[remote-office] Starting presence polling.", {
+      sourceKind,
+      configuredPresenceUrl: presenceUrl,
+      configuredGatewayUrl: normalizedGatewayUrl,
+      requestUrl,
+      pollIntervalMs,
+    });
+    let cancelled = false;
+    let intervalId: number | null = null;
+    let gatewayClient: GatewayClient | null = null;
+    let gatewayConnected = false;
+    let loadInFlight = false;
+    const loadFromPresenceEndpoint = async () => {
+      try {
+        const response = await fetch(requestUrl, { cache: "no-store" });
+        const payload = (await response.json()) as
+          | OfficePresenceSnapshot
+          | { error?: string };
+        if (!response.ok) {
+          const errorMessage =
+            typeof payload === "object" &&
+            payload !== null &&
+            "error" in payload &&
+            typeof payload.error === "string"
+              ? payload.error
+              : "Failed to load remote office presence.";
+          throw new Error(
+            errorMessage
+          );
+        }
+        if (cancelled) return;
+        setSnapshot(payload as OfficePresenceSnapshot);
+        setError(null);
+        if (!successLoggedRef.current) {
+          const resolvedSnapshot = payload as OfficePresenceSnapshot;
+          console.info("[remote-office] Presence polling succeeded.", {
+            configuredPresenceUrl: presenceUrl,
+            agentCount: resolvedSnapshot.agents.length,
+            timestamp: resolvedSnapshot.timestamp,
+          });
+          successLoggedRef.current = true;
+          lastLoggedErrorRef.current = null;
+        }
+      } catch (loadError) {
+        if (cancelled) return;
+        const message =
+          loadError instanceof Error
+            ? loadError.message
+            : "Failed to load remote office presence.";
+        setError(message);
+        if (lastLoggedErrorRef.current !== message) {
+          console.warn("[remote-office] Presence polling failed.", {
+            configuredPresenceUrl: presenceUrl,
+            error: message,
+          });
+          lastLoggedErrorRef.current = message;
+          successLoggedRef.current = false;
+        }
+      } finally {
+        if (!cancelled) {
+          setLoaded(true);
+        }
+      }
+    };
+    const loadFromGateway = async () => {
+      if (loadInFlight) {
+        console.debug("[remote-office] Skipping overlapping gateway poll.", {
+          configuredGatewayUrl: normalizedGatewayUrl,
+        });
+        return;
+      }
+      loadInFlight = true;
+      try {
+        if (!gatewayClient) {
+          gatewayClient = new GatewayClient();
+          console.info("[remote-office] Created remote gateway client.", {
+            configuredGatewayUrl: normalizedGatewayUrl,
+          });
+        }
+        if (!gatewayConnected) {
+          console.info("[remote-office] Connecting to remote gateway.", {
+            configuredGatewayUrl: normalizedGatewayUrl,
+          });
+          await gatewayClient.connect({
+            gatewayUrl: normalizedGatewayUrl,
+          });
+          gatewayConnected = true;
+          console.info("[remote-office] Remote gateway connected.", {
+            configuredGatewayUrl: normalizedGatewayUrl,
+          });
+        }
+        console.info("[remote-office] Requesting remote gateway agents list.", {
+          configuredGatewayUrl: normalizedGatewayUrl,
+        });
+        const agentsResult = (await gatewayClient.call("agents.list", {})) as {
+          mainKey?: string;
+          agents?: Array<{ id?: string; name?: string; identity?: { name?: string } }>;
+        };
+        console.info("[remote-office] Remote gateway agents list loaded.", {
+          configuredGatewayUrl: normalizedGatewayUrl,
+          agentCount: Array.isArray(agentsResult.agents) ? agentsResult.agents.length : 0,
+        });
+        console.info("[remote-office] Requesting remote gateway status.", {
+          configuredGatewayUrl: normalizedGatewayUrl,
+        });
+        const statusSummary = (await gatewayClient.call(
+          "status",
+          {}
+        )) as SummaryStatusSnapshot;
+        console.info("[remote-office] Remote gateway status loaded.", {
+          configuredGatewayUrl: normalizedGatewayUrl,
+          byAgentCount: Array.isArray(statusSummary.sessions?.byAgent)
+            ? statusSummary.sessions?.byAgent.length
+            : 0,
+        });
+        const remoteAgentIds = Array.isArray(agentsResult.agents)
+          ? agentsResult.agents
+              .map((agent) => (typeof agent.id === "string" ? agent.id.trim() : ""))
+              .filter((agentId) => agentId.length > 0)
+          : [];
+        const sessionKeys = remoteAgentIds.map((agentId) =>
+          buildAgentMainSessionKey(agentId, agentsResult.mainKey?.trim() || "main"),
+        );
+        const previewSnapshot =
+          sessionKeys.length > 0
+            ? ((await gatewayClient.call("sessions.preview", {
+                keys: sessionKeys,
+                limit: 8,
+                maxChars: 240,
+              })) as SummaryPreviewSnapshot)
+            : null;
+        const nextSnapshot = buildOfficePresenceSnapshotFromGateway({
+          agentsResult,
+          helloSnapshot: gatewayClient.getLastHello()?.snapshot,
+          statusSummary,
+          previewSnapshot,
+          workspaceId: "remote-gateway",
+        });
+        if (cancelled) return;
+        setSnapshot(nextSnapshot);
+        setError(null);
+        if (!successLoggedRef.current) {
+          console.info("[remote-office] Gateway presence polling succeeded.", {
+            configuredGatewayUrl: normalizedGatewayUrl,
+            agentCount: nextSnapshot.agents.length,
+            timestamp: nextSnapshot.timestamp,
+          });
+          successLoggedRef.current = true;
+          lastLoggedErrorRef.current = null;
+        }
+      } catch (loadError) {
+        if (cancelled) return;
+        const message =
+          loadError instanceof Error
+            ? loadError.message
+            : "Failed to load remote gateway presence.";
+        setError(message);
+        if (isGatewayDisconnectLikeError(loadError)) {
+          gatewayConnected = false;
+          gatewayClient?.disconnect();
+          gatewayClient = null;
+        }
+        if (lastLoggedErrorRef.current !== message) {
+          console.warn("[remote-office] Gateway presence polling failed.", {
+            configuredGatewayUrl: normalizedGatewayUrl,
+            error: message,
+          });
+          lastLoggedErrorRef.current = message;
+          successLoggedRef.current = false;
+        }
+      } finally {
+        loadInFlight = false;
+        if (!cancelled) {
+          setLoaded(true);
+        }
+      }
+    };
+    const loadSnapshot =
+      sourceKind === "presence_endpoint" ? loadFromPresenceEndpoint : loadFromGateway;
+    void loadSnapshot();
+    intervalId = window.setInterval(() => {
+      void loadSnapshot();
+    }, Math.max(1_000, pollIntervalMs));
+    return () => {
+      cancelled = true;
+      successLoggedRef.current = false;
+      lastLoggedErrorRef.current = null;
+      gatewayClient?.disconnect();
+      if (intervalId !== null) {
+        window.clearInterval(intervalId);
+      }
+    };
+  }, [active, normalizedGatewayUrl, pollIntervalMs, presenceUrl, requestUrl, sourceKind]);
+
+  return {
+    error: active ? error : null,
+    loaded: active ? loaded : false,
+    snapshot: active ? snapshot : null,
+  };
+};
@@ -15,6 +15,8 @@ import type { OfficeAgent } from "@/features/retro-office/core/types";
 import { GatewayConnectScreen } from "@/features/agents/components/GatewayConnectScreen";
 import { useAgentStore, type AgentState } from "@/features/agents/state/store";
 import {
+  GatewayClient,
+  buildAgentMainSessionKey,
  useGatewayConnection,
  type EventFrame,
  isSameSessionKey,
@@ -52,6 +54,10 @@ import {
 } from "@/lib/text/message-extract";
 import { resolveOfficeIntentSnapshot } from "@/lib/office/deskDirectives";
 import { AgentChatPanel } from "@/features/agents/components/AgentChatPanel";
+import {
+  RemoteAgentChatPanel,
+  type RemoteAgentChatMessage,
+} from "@/features/office/components/RemoteAgentChatPanel";
 import {
  AgentEditorModal,
  type AgentEditorSection,
@@ -107,6 +113,8 @@ import { InboxPanel } from "@/features/office/components/panels/InboxPanel";
 import { PlaybooksPanel } from "@/features/office/components/panels/PlaybooksPanel";
 import { SkillsMarketplaceModal } from "@/features/office/components/panels/SkillsMarketplaceModal";
 import { useOfficeSkillTriggers } from "@/features/office/hooks/useOfficeSkillTriggers";
+import { useRemoteOfficePresence } from "@/features/office/hooks/useRemoteOfficePresence";
+import { useRemoteOfficeLayout } from "@/features/office/hooks/useRemoteOfficeLayout";
 import { useOfficeSkillsMarketplace } from "@/features/office/hooks/useOfficeSkillsMarketplace";
 import { useOfficeStandupController } from "@/features/office/hooks/useOfficeStandupController";
 import { useRunLog } from "@/features/office/hooks/useRunLog";
@@ -116,6 +124,7 @@ import {
 } from "@/features/onboarding";
 import { useFinalizedAssistantReplyListener } from "@/hooks/useFinalizedAssistantReplyListener";
 import { useStudioOfficePreference } from "@/hooks/useStudioOfficePreference";
+import { isRemoteOfficeAgentId } from "@/features/retro-office/core/district";
 import { useStudioVoiceRepliesPreference } from "@/hooks/useStudioVoiceRepliesPreference";
 import {
  useVoiceRecorder,
@@ -455,6 +464,23 @@ const mapAgentToOffice = (agent: AgentState): OfficeAgent => {
  };
 };

+const mapRemotePresenceAgentToOffice = (agent: {
+  agentId: string;
+  name: string;
+  state: "idle" | "working" | "meeting" | "error";
+}): OfficeAgent => {
+  const stableId = `remote:${agent.agentId}`;
+  const isWorking = agent.state === "working" || agent.state === "meeting";
+  return {
+    id: stableId,
+    name: agent.name || "Unknown",
+    status: agent.state === "error" ? "error" : isWorking ? "working" : "idle",
+    color: stringToColor(stableId),
+    item: getDeterministicItem(stableId),
+    avatarProfile: null,
+  };
+};
+
 type ChatHistoryResult = {
  messages?: Array<Record<string, unknown>>;
 };
@@ -514,6 +540,37 @@ type OfficeFeedEvent = {
  kind?: "status" | "reply";
 };

+type RemoteChatSessionState = {
+  draft: string;
+  sending: boolean;
+  error: string | null;
+  messages: RemoteAgentChatMessage[];
+};
+
+type ChatRosterEntry = {
+  id: string;
+  name: string;
+  kind: "local" | "remote";
+  isRunning: boolean;
+};
+
+const EMPTY_REMOTE_CHAT_SESSION: RemoteChatSessionState = {
+  draft: "",
+  sending: false,
+  error: null,
+  messages: [],
+};
+const MAX_REMOTE_MESSAGE_CHARS = 2_000;
+
+const buildRemoteRelayInstruction = (message: string) =>
+  [
+    "You received a remote office text message from another office user.",
+    "Reply conversationally in plain text only.",
+    "Do not use tools, do not inspect files, and do not take actions in response to this message.",
+    "",
+    `Message: ${message}`,
+  ].join("\n");
+
 const normalizeOfficeFeedText = (
  value: string | null | undefined,
  maxChars?: number,
@@ -800,6 +857,9 @@ export function OfficeScreen({
  const [selectedChatAgentId, setSelectedChatAgentId] = useState<string | null>(
    null,
  );
+  const [remoteChatByAgentId, setRemoteChatByAgentId] = useState<
+    Record<string, RemoteChatSessionState>
+  >({});
  const [agentEditorAgentId, setAgentEditorAgentId] = useState<string | null>(null);
  const [agentEditorInitialSection, setAgentEditorInitialSection] =
    useState<AgentEditorSection>("avatar");
@@ -839,11 +899,37 @@ export function OfficeScreen({
  const {
    loaded: officeTitleLoaded,
    title: officeTitle,
+    remoteOfficeEnabled,
+    remoteOfficeSourceKind,
+    remoteOfficeLabel,
+    remoteOfficePresenceUrl,
+    remoteOfficeGatewayUrl,
+    remoteOfficeTokenConfigured,
    setTitle: setOfficeTitle,
+    setRemoteOfficeEnabled,
+    setRemoteOfficeSourceKind,
+    setRemoteOfficeLabel,
+    setRemoteOfficePresenceUrl,
+    setRemoteOfficeGatewayUrl,
+    setRemoteOfficeToken,
  } = useStudioOfficePreference({
    gatewayUrl,
    settingsCoordinator,
  });
+  const {
+    error: remoteOfficeError,
+    loaded: remoteOfficeLoaded,
+    snapshot: remoteOfficeSnapshot,
+  } = useRemoteOfficePresence({
+    enabled: remoteOfficeEnabled,
+    sourceKind: remoteOfficeSourceKind,
+    presenceUrl: remoteOfficePresenceUrl,
+    gatewayUrl: remoteOfficeGatewayUrl,
+  });
+  const { snapshot: remoteOfficeLayoutSnapshot } = useRemoteOfficeLayout({
+    enabled: remoteOfficeEnabled,
+    presenceUrl: remoteOfficePresenceUrl,
+  });
  const {
    loaded: voiceRepliesLoaded,
    preference: voiceRepliesPreference,
@@ -2059,6 +2145,11 @@ export function OfficeScreen({
    }
  }, [chatOpen, selectedChatAgentId, state.agents]);

+  const remoteChatAgentIds = useMemo(
+    () => (remoteOfficeSnapshot?.agents ?? []).map((agent) => `remote:${agent.agentId}`),
+    [remoteOfficeSnapshot],
+  );
+
  const chatController = useChatInteractionController({
    client,
    status,
@@ -2078,6 +2169,7 @@ export function OfficeScreen({
    ? (state.agents.find((agent) => agent.agentId === selectedChatAgentId) ??
      null)
    : null;
+  const selectedLocalChatAgentId = focusedChatAgent?.agentId ?? null;
  const agentEditorAgent = agentEditorAgentId
    ? (state.agents.find((agent) => agent.agentId === agentEditorAgentId) ?? null)
    : null;
@@ -2087,8 +2179,9 @@ export function OfficeScreen({
  useEffect(() => {
    if (!selectedChatAgentId) return;
    if (state.agents.some((agent) => agent.agentId === selectedChatAgentId)) return;
+    if (remoteChatAgentIds.includes(selectedChatAgentId)) return;
    setSelectedChatAgentId(null);
-  }, [selectedChatAgentId, state.agents]);
+  }, [remoteChatAgentIds, selectedChatAgentId, state.agents]);

  useEffect(() => {
    if (!agentEditorAgentId) return;
@@ -2129,7 +2222,7 @@ export function OfficeScreen({
    client,
    status,
    agents: state.agents,
-    preferredAgentId: selectedChatAgentId,
+    preferredAgentId: selectedLocalChatAgentId,
    onSkillActivityStart: handleMarketplaceGymStart,
    onSkillActivityEnd: handleMarketplaceGymEnd,
  });
@@ -2611,10 +2704,125 @@ export function OfficeScreen({
    (agentId: string) => {
      setSelectedChatAgentId(agentId);
      setChatOpen(true);
-      dispatch({ type: "selectAgent", agentId });
+      if (!isRemoteOfficeAgentId(agentId)) {
+        dispatch({ type: "selectAgent", agentId });
+      }
    },
    [dispatch],
  );
+  const updateRemoteChatSession = useCallback(
+    (
+      agentId: string,
+      updater: (session: RemoteChatSessionState) => RemoteChatSessionState,
+    ) => {
+      setRemoteChatByAgentId((previous) => {
+        const current = previous[agentId] ?? EMPTY_REMOTE_CHAT_SESSION;
+        return {
+          ...previous,
+          [agentId]: updater(current),
+        };
+      });
+    },
+    [],
+  );
+  const handleRemoteAgentChatSend = useCallback(
+    async (agentId: string, message: string) => {
+      const trimmed = message.trim();
+      if (!trimmed) return;
+      if (trimmed.length > MAX_REMOTE_MESSAGE_CHARS) {
+        updateRemoteChatSession(agentId, (session) => ({
+          ...session,
+          sending: false,
+          error: `Remote message must be ${MAX_REMOTE_MESSAGE_CHARS} characters or fewer.`,
+        }));
+        return;
+      }
+      const remoteAgentId = isRemoteOfficeAgentId(agentId)
+        ? agentId.slice("remote:".length)
+        : agentId;
+      const sentAt = Date.now();
+      updateRemoteChatSession(agentId, (session) => ({
+        ...session,
+        draft: "",
+        sending: true,
+        error: null,
+        messages: [
+          ...session.messages,
+          {
+            id: randomUUID(),
+            role: "user",
+            text: trimmed,
+            timestampMs: sentAt,
+          },
+        ],
+      }));
+      const remoteClient = new GatewayClient();
+      try {
+        await remoteClient.connect({
+          gatewayUrl: remoteOfficeGatewayUrl,
+        });
+        const agentsResult = (await remoteClient.call("agents.list", {})) as {
+          mainKey?: string;
+          agents?: Array<{ id?: string; name?: string }>;
+        };
+        const remoteAgents = Array.isArray(agentsResult.agents)
+          ? agentsResult.agents
+          : [];
+        if (remoteAgents.length === 0) {
+          throw new Error("Remote agent list is unavailable right now.");
+        }
+        if (!remoteAgents.some((entry) => (entry.id?.trim() ?? "") === remoteAgentId)) {
+          throw new Error("Remote agent is no longer available.");
+        }
+        const sessionKey = buildAgentMainSessionKey(
+          remoteAgentId,
+          agentsResult.mainKey?.trim() || "main",
+        );
+        await remoteClient.call("chat.send", {
+          sessionKey,
+          message: buildRemoteRelayInstruction(trimmed),
+          deliver: false,
+          idempotencyKey: randomUUID(),
+        });
+        updateRemoteChatSession(agentId, (session) => ({
+          ...session,
+          sending: false,
+          error: null,
+          messages: [
+            ...session.messages,
+            {
+              id: randomUUID(),
+              role: "system",
+              text: "Delivered to the remote agent.",
+              timestampMs: Date.now(),
+            },
+          ],
+        }));
+      } catch (error) {
+        const messageText =
+          error instanceof Error
+            ? error.message
+            : "Failed to deliver the remote office message.";
+        updateRemoteChatSession(agentId, (session) => ({
+          ...session,
+          sending: false,
+          error: messageText,
+          messages: [
+            ...session.messages,
+            {
+              id: randomUUID(),
+              role: "system",
+              text: `Delivery failed: ${messageText}`,
+              timestampMs: Date.now(),
+            },
+          ],
+        }));
+      } finally {
+        remoteClient.disconnect();
+      }
+    },
+    [remoteOfficeGatewayUrl, updateRemoteChatSession],
+  );

  const lastStandupTriggerKeyRef = useRef<string | null>(null);
  const triggerStandupMeeting = useCallback(
@@ -2660,6 +2868,10 @@ export function OfficeScreen({
      stopVoiceReplyPlayback();
      const trimmed = message.trim();
      if (!trimmed) return;
+      if (isRemoteOfficeAgentId(agentId)) {
+        await handleRemoteAgentChatSend(agentId, trimmed);
+        return;
+      }

      const intentSnapshot = resolveOfficeIntentSnapshot(trimmed);
      setOpenClawLogEntries((previous) => {
@@ -2792,6 +3004,7 @@ export function OfficeScreen({
    [
      chatController,
      dispatch,
+      handleRemoteAgentChatSend,
      phoneCallByAgentId,
      stopVoiceReplyPlayback,
      textMessageByAgentId,
@@ -3061,6 +3274,68 @@ export function OfficeScreen({

    return lines.join("\n");
  }, [state.agents]);
+  const remoteOfficeAgents = useMemo(
+    () =>
+      (remoteOfficeSnapshot?.agents ?? []).map((agent) =>
+        mapRemotePresenceAgentToOffice(agent)
+      ),
+    [remoteOfficeSnapshot]
+  );
+  const chatRosterEntries = useMemo<ChatRosterEntry[]>(
+    () => [
+      ...state.agents.map((agent) => ({
+        id: agent.agentId,
+        name: agent.name || agent.agentId,
+        kind: "local" as const,
+        isRunning: agent.status === "running",
+      })),
+      ...remoteOfficeAgents.map((agent) => ({
+        id: agent.id,
+        name: agent.name || agent.id,
+        kind: "remote" as const,
+        isRunning: agent.status === "working",
+      })),
+    ],
+    [remoteOfficeAgents, state.agents],
+  );
+  const focusedRemoteChatTarget = selectedChatAgentId
+    ? (remoteOfficeAgents.find((agent) => agent.id === selectedChatAgentId) ?? null)
+    : null;
+  const focusedRemoteChatState = focusedRemoteChatTarget
+    ? (remoteChatByAgentId[focusedRemoteChatTarget.id] ?? EMPTY_REMOTE_CHAT_SESSION)
+    : null;
+  const allVisibleAgents = useMemo(
+    () => [...officeAgents, ...remoteOfficeAgents],
+    [officeAgents, remoteOfficeAgents],
+  );
+  const remoteOfficeVisible =
+    remoteOfficeEnabled &&
+    (remoteOfficeSourceKind === "presence_endpoint"
+      ? remoteOfficePresenceUrl.trim().length > 0
+      : remoteOfficeGatewayUrl.trim().length > 0);
+  const remoteOfficeStatusText = !remoteOfficeVisible
+    ? "Remote office disabled."
+    : remoteOfficeError
+      ? remoteOfficeError
+      : !remoteOfficeLoaded
+        ? "Loading remote office."
+        : remoteOfficeAgents.length > 0
+          ? `${remoteOfficeAgents.length} agents visible.`
+          : remoteOfficeSourceKind === "openclaw_gateway"
+            ? "Connected to remote gateway. No agents visible yet."
+          : remoteOfficeTokenConfigured
+            ? "Connected. No agents visible yet."
+            : "No agents visible yet.";
+  const remoteMessagingAvailable =
+    remoteOfficeSourceKind === "openclaw_gateway" &&
+    remoteOfficeGatewayUrl.trim().length > 0;
+  const remoteMessagingDisabledReason = remoteMessagingAvailable
+    ? null
+    : remoteOfficeSourceKind !== "openclaw_gateway"
+      ? "Remote messaging currently works only with the remote gateway source."
+      : remoteOfficeGatewayUrl.trim().length === 0
+      ? "Remote messaging requires a remote gateway URL in office settings."
+      : "Remote messaging is unavailable until the remote gateway is configured.";
  const normalizedOpenClawConsoleSearch = openClawConsoleSearch
    .trim()
    .toLowerCase();
@@ -3237,92 +3512,111 @@ export function OfficeScreen({

  return (
    <main className="h-full w-full overflow-hidden bg-black">
-      <RetroOffice3D
-        agents={officeAgents}
-        animationState={officeAnimationState}
-        deskAssignmentByDeskUid={deskAssignmentByDeskUid}
-        githubReviewAgentId={githubReviewAgentId}
-        qaTestingAgentId={qaTestingAgentId}
-        phoneBoothAgentId={activePhoneBoothAgentId}
-        phoneCallScenario={activePhoneCallScenario}
-        smsBoothAgentId={activeSmsBoothAgentId}
-        textMessageScenario={activeTextMessageScenario}
-        monitorAgentId={monitorAgentId}
-        monitorByAgentId={monitorByAgentId}
-        githubSkill={githubSkill}
-        officeTitle={officeTitle}
-        officeTitleLoaded={officeTitleLoaded}
-        voiceRepliesEnabled={voiceRepliesEnabled}
-        voiceRepliesVoiceId={voiceRepliesVoiceId}
-        voiceRepliesSpeed={voiceRepliesSpeed}
-        voiceRepliesLoaded={voiceRepliesLoaded}
-        onOfficeTitleChange={setOfficeTitle}
-        onVoiceRepliesToggle={setVoiceRepliesEnabled}
-        onVoiceRepliesVoiceChange={setVoiceRepliesVoiceId}
-        onVoiceRepliesSpeedChange={setVoiceRepliesSpeed}
-        onVoiceRepliesPreview={(voiceId, voiceName) => {
-          void previewVoiceReply({
-            text: `Hi, how can I help you? My name is ${voiceName}.`,
-            provider: voiceRepliesPreference.provider,
-            voiceId,
-            speed: voiceRepliesSpeed,
-          });
-        }}
-        atmAnalytics={{
-          client,
-          status,
-          agents: state.agents,
-          gatewayUrl,
-          settingsCoordinator,
-        }}
-        onGatewayDisconnect={disconnect}
-        onOpenOnboarding={handleOpenOnboarding}
-        feedEvents={feedEvents}
-        gatewayStatus={status}
-        runCountByAgentId={runCountByAgentId}
-        lastSeenByAgentId={lastSeenByAgentId}
-        standupMeeting={standupController.meeting}
-        standupAutoOpenBoard={standupController.openBoardByDefault}
-        onStandupArrivalsChange={(arrivedAgentIds) => {
-          void standupController.reportArrivals(arrivedAgentIds);
-        }}
-        onStandupStartRequested={() => {
-          if (
-            !standupController.meeting ||
-            standupController.meeting.phase === "complete"
-          ) {
-            void standupController.startMeeting("manual");
-          }
-        }}
-        onMonitorSelect={(agentId) => {
-          setMonitorAgentId(agentId);
-          if (agentId) {
-            setSelectedChatAgentId(agentId);
-            dispatch({ type: "selectAgent", agentId });
-          }
-        }}
-        onAddAgent={handleOpenCreateAgentWizard}
-        onAgentEdit={(agentId) => {
-          openAgentEditor(agentId, "avatar");
-        }}
-        onAgentDelete={(agentId) => {
-          void handleDeleteAgent(agentId);
-        }}
-        onDeskAssignmentChange={handleDeskAssignmentChange}
-        onDeskAssignmentsReset={handleDeskAssignmentsReset}
-        onGithubReviewDismiss={() => {
-          handleGithubReviewDismiss();
-        }}
-        onQaLabDismiss={() => {
-          handleQaDismiss();
-        }}
-        onPhoneCallSpeak={handlePhoneCallSpeak}
-        onPhoneCallComplete={handlePhoneCallComplete}
-        onTextMessageComplete={handleTextMessageComplete}
-        onOpenGithubSkillSetup={() => {
-          setMarketplaceOpen(true);
-        }}
-      />
+      <section className="relative h-full min-h-0 min-w-0 overflow-hidden">
+        <RetroOffice3D
+          agents={allVisibleAgents}
+          animationState={officeAnimationState}
+          deskAssignmentByDeskUid={deskAssignmentByDeskUid}
+          githubReviewAgentId={githubReviewAgentId}
+          qaTestingAgentId={qaTestingAgentId}
+          phoneBoothAgentId={activePhoneBoothAgentId}
+          phoneCallScenario={activePhoneCallScenario}
+          smsBoothAgentId={activeSmsBoothAgentId}
+          textMessageScenario={activeTextMessageScenario}
+          monitorAgentId={monitorAgentId}
+          monitorByAgentId={monitorByAgentId}
+          githubSkill={githubSkill}
+          officeTitle={officeTitle}
+          officeTitleLoaded={officeTitleLoaded}
+          remoteOfficeEnabled={remoteOfficeEnabled}
+          remoteOfficeSourceKind={remoteOfficeSourceKind}
+          remoteOfficeLabel={remoteOfficeLabel}
+          remoteOfficePresenceUrl={remoteOfficePresenceUrl}
+          remoteOfficeGatewayUrl={remoteOfficeGatewayUrl}
+          remoteOfficeStatusText={remoteOfficeStatusText}
+          remoteLayoutSnapshot={remoteOfficeLayoutSnapshot}
+          remoteOfficeTokenConfigured={remoteOfficeTokenConfigured}
+          voiceRepliesEnabled={voiceRepliesEnabled}
+          voiceRepliesVoiceId={voiceRepliesVoiceId}
+          voiceRepliesSpeed={voiceRepliesSpeed}
+          voiceRepliesLoaded={voiceRepliesLoaded}
+          onOfficeTitleChange={setOfficeTitle}
+          onRemoteOfficeEnabledChange={setRemoteOfficeEnabled}
+          onRemoteOfficeSourceKindChange={setRemoteOfficeSourceKind}
+          onRemoteOfficeLabelChange={setRemoteOfficeLabel}
+          onRemoteOfficePresenceUrlChange={setRemoteOfficePresenceUrl}
+          onRemoteOfficeGatewayUrlChange={setRemoteOfficeGatewayUrl}
+          onRemoteOfficeTokenChange={setRemoteOfficeToken}
+          onVoiceRepliesToggle={setVoiceRepliesEnabled}
+          onVoiceRepliesVoiceChange={setVoiceRepliesVoiceId}
+          onVoiceRepliesSpeedChange={setVoiceRepliesSpeed}
+          onVoiceRepliesPreview={(voiceId, voiceName) => {
+            void previewVoiceReply({
+              text: `Hi, how can I help you? My name is ${voiceName}.`,
+              provider: voiceRepliesPreference.provider,
+              voiceId,
+              speed: voiceRepliesSpeed,
+            });
+          }}
+          atmAnalytics={{
+            client,
+            status,
+            agents: state.agents,
+            gatewayUrl,
+            settingsCoordinator,
+          }}
+          onGatewayDisconnect={disconnect}
+          onOpenOnboarding={handleOpenOnboarding}
+          feedEvents={feedEvents}
+          gatewayStatus={status}
+          runCountByAgentId={runCountByAgentId}
+          lastSeenByAgentId={lastSeenByAgentId}
+          standupMeeting={standupController.meeting}
+          standupAutoOpenBoard={standupController.openBoardByDefault}
+          onStandupArrivalsChange={(arrivedAgentIds) => {
+            void standupController.reportArrivals(arrivedAgentIds);
+          }}
+          onStandupStartRequested={() => {
+            if (
+              !standupController.meeting ||
+              standupController.meeting.phase === "complete"
+            ) {
+              void standupController.startMeeting("manual");
+            }
+          }}
+          onMonitorSelect={(agentId) => {
+            setMonitorAgentId(agentId);
+            if (agentId && !isRemoteOfficeAgentId(agentId)) {
+              setSelectedChatAgentId(agentId);
+              dispatch({ type: "selectAgent", agentId });
+            }
+          }}
+          onAgentChatSelect={(agentId) => {
+            handleOpenAgentChat(agentId);
+          }}
+          onAddAgent={handleOpenCreateAgentWizard}
+          onAgentEdit={(agentId) => {
+            openAgentEditor(agentId, "avatar");
+          }}
+          onAgentDelete={(agentId) => {
+            void handleDeleteAgent(agentId);
+          }}
+          onDeskAssignmentChange={handleDeskAssignmentChange}
+          onDeskAssignmentsReset={handleDeskAssignmentsReset}
+          onGithubReviewDismiss={() => {
+            handleGithubReviewDismiss();
+          }}
+          onQaLabDismiss={() => {
+            handleQaDismiss();
+          }}
+          onPhoneCallSpeak={handlePhoneCallSpeak}
+          onPhoneCallComplete={handlePhoneCallComplete}
+          onTextMessageComplete={handleTextMessageComplete}
+          onOpenGithubSkillSetup={() => {
+            setMarketplaceOpen(true);
+          }}
+        />
+      </section>

      {showEmptyFleetBanner ? (
        <div className="pointer-events-none fixed left-1/2 top-16 z-40 w-full max-w-xl -translate-x-1/2 px-4">
@@ -3683,23 +3977,23 @@ export function OfficeScreen({
                  Agents
                </span>
                <span className="font-mono text-[10px] text-white/40">
-                  {state.agents.length}
+                  {chatRosterEntries.length}
                </span>
              </div>
              <div className="flex-1 overflow-y-auto">
-                {state.agents.length === 0 ? (
+                {chatRosterEntries.length === 0 ? (
                  <div className="px-3 py-4 font-mono text-[11px] text-white/30">
                    No agents.
                  </div>
                ) : (
-                  state.agents.map((agent) => {
-                    const isSelected = agent.agentId === selectedChatAgentId;
-                    const isRunning = agent.status === "running";
+                  chatRosterEntries.map((agent) => {
+                    const isSelected = agent.id === selectedChatAgentId;
+                    const isRunning = agent.isRunning;
                    return (
                      <button
-                        key={agent.agentId}
+                        key={agent.id}
                        type="button"
-                        onClick={() => handleOpenAgentChat(agent.agentId)}
+                        onClick={() => handleOpenAgentChat(agent.id)}
                        className={`flex w-full items-center gap-2 px-3 py-2.5 text-left transition-colors ${
                          isSelected
                            ? "bg-white/10 text-white"
@@ -3710,7 +4004,15 @@ export function OfficeScreen({
                          className={`h-1.5 w-1.5 shrink-0 rounded-full ${isRunning ? "bg-emerald-400" : "bg-white/20"}`}
                        />
                        <span className="min-w-0 flex-1 truncate font-mono text-[11px]">
-                          {agent.name || agent.agentId}
+                          {agent.name}
+                        </span>
+                        {agent.kind === "remote" ? (
+                          <span className="shrink-0 font-mono text-[9px] uppercase tracking-[0.14em] text-cyan-300/60">
+                            Remote
+                          </span>
+                        ) : null}
+                        <span className="sr-only">
+                          {agent.kind === "remote" ? "Remote agent" : "Local agent"}
                        </span>
                      </button>
                    );
@@ -3780,6 +4082,26 @@ export function OfficeScreen({
                  }
                  onVoiceSend={handleVoiceSend}
                />
+              ) : focusedRemoteChatTarget && focusedRemoteChatState ? (
+                <RemoteAgentChatPanel
+                  agentName={focusedRemoteChatTarget.name}
+                  canSend={remoteMessagingAvailable}
+                  sending={focusedRemoteChatState.sending}
+                  draft={focusedRemoteChatState.draft}
+                  error={focusedRemoteChatState.error}
+                  messages={focusedRemoteChatState.messages}
+                  disabledReason={remoteMessagingDisabledReason}
+                  onDraftChange={(value) => {
+                    updateRemoteChatSession(focusedRemoteChatTarget.id, (session) => ({
+                      ...session,
+                      draft: value,
+                      error: null,
+                    }));
+                  }}
+                  onSend={(message) => {
+                    void handleChatSend(focusedRemoteChatTarget.id, "", message);
+                  }}
+                />
              ) : (
                <div className="flex flex-1 items-center justify-center font-mono text-[12px] text-white/30">
                  Select an agent to chat.