diff --git a/apps/web/app/components/browser/desktop-view.tsx b/apps/web/app/components/browser/desktop-view.tsx
new file mode 100644
index 00000000..a7b6040f
--- /dev/null
+++ b/apps/web/app/components/browser/desktop-view.tsx
@@ -0,0 +1,209 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import type { SiteListItem } from "@umt/contracts";
+import { Hand, Image as ImageIcon, LoaderCircle, Monitor, Power, RotateCw, Undo2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useBrowserControl, useCloseBrowserSession, useSiteBrowserSession } from "~/api/browser.ts";
+import { LoadingState } from "~/components/console/empty-state.tsx";
+import { StatusBadge, type StatusTone } from "~/components/console/status-badge.tsx";
+import { Button } from "~/components/ui/button.tsx";
+import { apiData, errorMessage } from "~/lib/api.ts";
+import { qk } from "~/lib/query-keys.ts";
+import { CONTROLLER_LABEL, holderName, waitingText } from "./coords.ts";
+import { SiteOriginView } from "./site-origin-view.tsx";
+
+// 原站视图桌面模式(docs/design/webtop-remote-browser.md §5.7):iframe 嵌浏览器桌面(Selkies),
+// 画面就是 Agent 正在驱动的同一个浏览器窗口。键鼠权限由服务端按人工租约决定:未接管只能看,接管后可直接点和输入。
+// 桌面不可用(旧镜像 / 未配置)或当前不是安全上下文(HTTP)时回退截图模式,并说明原因。
+
+interface DesktopStatus {
+  available: boolean;
+  reason: string | null;
+  role: "controller" | "viewer";
+  leaseExpiresAt: string | null;
+  path: string;
+  requiresSecureContext: true;
+}
+
+function useDesktopStatus(sessionId: string | null) {
+  return useQuery({
+    queryKey: qk.sub("browser", "desktop", sessionId ?? ""),
+    queryFn: ({ signal }) =>
+      apiData<DesktopStatus>("/browser/desktop/{id}/_status", { pathParams: { id: sessionId ?? "" }, signal }),
+    enabled: !!sessionId,
+    refetchInterval: 10_000,
+    retry: false,
+  });
+}
+
+const CONTROLLER_TONE: Record<string, StatusTone> = {
+  automation: "neutral",
+  human: "success",
+  waiting: "warning",
+  closed: "neutral",
+};
+
+type Mode = "auto" | "screenshot";
+
+/** 原站视图 Tab:能用桌面模式就用,否则截图模式 */
+export function SiteOriginPanel({ site }: { site: SiteListItem }) {
+  const session = useSiteBrowserSession(site.id);
+  const s = session.data ?? null;
+  const status = useDesktopStatus(s && s.controller !== "closed" ? s.id : null);
+  const [mode, setMode] = useState<Mode>("auto");
+  const [secure, setSecure] = useState(true);
+  useEffect(() => setSecure(window.isSecureContext), []);
+
+  const desktop = status.data;
+  const canDesktop = !!desktop?.available && secure;
+  if (s && status.isPending && s.controller !== "closed") return <LoadingState rows={4} />;
+  if (!s || !canDesktop || mode === "screenshot") {
+    let note: string | null = null;
+    if (s && desktop && !desktop.available && desktop.reason) note = `桌面模式不可用：${desktop.reason}。`;
+    else if (s && desktop?.available && !secure) note = "桌面模式需要通过 HTTPS 访问控制台，当前使用截图模式。";
+    return (
+      <div className="space-y-3">
+        {note || (canDesktop && mode === "screenshot") ? (
+          <div className="flex flex-wrap items-center gap-2 text-caption text-muted-foreground">
+            {note ? <span>{note}</span> : null}
+            {canDesktop ? (
+              <Button variant="outline" size="xs" className="ml-auto" onClick={() => setMode("auto")}>
+                <Monitor />
+                桌面模式
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+        <SiteOriginView site={site} />
+      </div>
+    );
+  }
+  return <DesktopView site={site} status={desktop} onScreenshotMode={() => setMode("screenshot")} />;
+}
+
+function DesktopView({
+  site,
+  status,
+  onScreenshotMode,
+}: {
+  site: SiteListItem;
+  status: DesktopStatus;
+  onScreenshotMode: () => void;
+}) {
+  const session = useSiteBrowserSession(site.id);
+  const s = session.data ?? null;
+  const control = useBrowserControl(site.id);
+  const close = useCloseBrowserSession(site.id);
+  const qc = useQueryClient();
+  const refreshRole = () => void qc.invalidateQueries({ queryKey: qk.sub("browser", "desktop") });
+  const [reloadKey, setReloadKey] = useState(0);
+  const [loaded, setLoaded] = useState(false);
+
+  // 控制权变化(接管 / 交还 / 过期)后重连,Selkies 按新口令认证;服务端也会主动断开旧连接
+  const role = status.role;
+  const prevRole = useRef(role);
+  useEffect(() => {
+    if (prevRole.current !== role) {
+      prevRole.current = role;
+      setLoaded(false);
+      setReloadKey((k) => k + 1);
+    }
+  }, [role]);
+
+  if (!s) return <LoadingState rows={4} />;
+  const human = s.controller === "human";
+  const mine = role === "controller";
+  const busy = control.acquire.isPending || control.release.isPending;
+  const waiting = waitingText(s.waitingReason);
+  const leaseHolder = s.lease ? holderName(s.lease.holder) : null;
+  const conn: { tone: StatusTone; text: string } = loaded
+    ? mine
+      ? { tone: "success", text: "已连接，可操作" }
+      : { tone: "success", text: "已连接，只读" }
+    : { tone: "neutral", text: "连接中" };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <StatusBadge tone={conn.tone}>{conn.text}</StatusBadge>
+        <StatusBadge tone={CONTROLLER_TONE[s.controller] ?? "neutral"}>
+          当前控制：{CONTROLLER_LABEL[s.controller]}
+          {human && leaseHolder ? `(${leaseHolder})` : ""}
+        </StatusBadge>
+        {waiting ? <StatusBadge tone="warning">{waiting}</StatusBadge> : null}
+        <div className="ml-auto flex flex-wrap items-center gap-2">
+          {human && mine ? (
+            <Button
+              size="sm"
+              disabled={busy}
+              onClick={() =>
+                control.release.mutate(s.id, {
+                  onSuccess: () => {
+                    refreshRole();
+                    toast.success("已交还，Agent 会重新读取页面");
+                  },
+                  onError: (e) => toast.error(errorMessage(e)),
+                })
+              }
+            >
+              <Undo2 />
+              交还
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              disabled={busy || s.controller === "closed" || human}
+              onClick={() =>
+                control.acquire.mutate(s.id, { onSuccess: refreshRole, onError: (e) => toast.error(errorMessage(e)) })
+              }
+            >
+              {busy ? <LoaderCircle className="animate-spin" /> : <Hand />}
+              接管
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setLoaded(false);
+              setReloadKey((k) => k + 1);
+            }}
+          >
+            <RotateCw />
+            重新连接
+          </Button>
+          <Button variant="outline" size="sm" onClick={onScreenshotMode}>
+            <ImageIcon />
+            截图模式
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={close.isPending}
+            onClick={() => close.mutate(s.id, { onError: (e) => toast.error(errorMessage(e)) })}
+          >
+            <Power />
+            <span className="sr-only sm:not-sr-only">关闭会话</span>
+          </Button>
+        </div>
+      </div>
+
+      <p className="text-caption text-muted-foreground">
+        {mine
+          ? "直接在画面里点击和输入。中文、日文用本机输入法输入；复制粘贴用 Ctrl+C / Ctrl+V。"
+          : "只读观看，Agent 可能正在操作。需要自己点或输入时先接管。"}
+      </p>
+
+      <div className="pg-slab relative min-w-0 overflow-hidden rounded-xl">
+        <iframe
+          key={reloadKey}
+          title="浏览器桌面"
+          src={status.path}
+          onLoad={() => setLoaded(true)}
+          allow="clipboard-read; clipboard-write; fullscreen; keyboard-map"
+          className="block aspect-[1280/900] w-full border-0 bg-scrim"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/routes/console/sites.$siteId.tsx b/apps/web/app/routes/console/sites.$siteId.tsx
index 8d18c7c1..031b2989 100644
--- a/apps/web/app/routes/console/sites.$siteId.tsx
+++ b/apps/web/app/routes/console/sites.$siteId.tsx
@@ -19,7 +19,7 @@ import { useInventory } from "~/api/inventory.ts";
 import { type ReleaseFilters, useSiteReleases } from "~/api/releases.ts";
 import { snapshotStale, useSites, useSnapshotSite } from "~/api/sites.ts";
 import { openAgentDrawer } from "~/components/agent/agent-store.ts";
-import { SiteOriginView } from "~/components/browser/site-origin-view.tsx";
+import { SiteOriginPanel } from "~/components/browser/desktop-view.tsx";
 import { DetailSection } from "~/components/console/detail-sheet.tsx";
 import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
 import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
@@ -421,7 +421,7 @@ export default function SiteWorkbenchPage() {
           </div>
         </TabsContent>
 
-        <TabsContent value="origin">{s ? <SiteOriginView site={s} /> : <LoadingState rows={4} />}</TabsContent>
+        <TabsContent value="origin">{s ? <SiteOriginPanel site={s} /> : <LoadingState rows={4} />}</TabsContent>
 
         <TabsContent value="snapshots">
           <div className="space-y-8">