From 1ad2fec073ebc5d5d40a46af217ac6e910a3bc02 Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Mon, 2 Nov 2026 15:10:22 +0700
Subject: [PATCH] fix(preview): say why an outside site shows blank, with Open
 tab beside it

YouTube, Google and login pages refuse framing and the browser draws a
broken-page icon; the hint lived only in the empty state. A page not on this
machine now gets a strip under the address bar with Open tab. The refused-
address toast says what is allowed in plain words.
---
 client/src/components/lanes/UrlPreview.tsx    | 27 ++++++++++++++++---
 .../lanes/__tests__/UrlPreview.test.tsx       | 14 +++++++++-
 client/src/i18n/locales/en/lanes.json         |  4 ++-
 client/src/i18n/locales/vi/lanes.json         |  4 ++-
 docs/LANES.md                                 |  2 +-
 5 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/client/src/components/lanes/UrlPreview.tsx b/client/src/components/lanes/UrlPreview.tsx
index ddae9917..5f756cc3 100644
--- a/client/src/components/lanes/UrlPreview.tsx
+++ b/client/src/components/lanes/UrlPreview.tsx
@@ -7,7 +7,9 @@
  * `normalizePreviewUrl` refuses the dashboard's origin and anything but
  * http(s), and the sandbox leaves out top navigation so a page cannot move
  * the dashboard away. A site that forbids framing (most login pages) shows
- * blank; that is the browser's rule, so the way out is the Open button. The
+ * blank or as the browser's broken-page icon; that is the browser's rule and
+ * cannot be read from here, so any page not on this machine gets a strip
+ * saying so with the Open button beside it. The
  * last address is remembered per workspace in localStorage (a viewer
  * convenience, never the server's).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -16,7 +18,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ExternalLink, Globe, RotateCw } from "lucide-react";
-import { normalizePreviewUrl } from "../../lib/openInPreview";
+import { isLoopbackUrl, normalizePreviewUrl } from "../../lib/openInPreview";
 import { isSubmitEnter } from "../../lib/keys";
 import { toast } from "../../lib/toast";
 
@@ -80,6 +82,7 @@ export function UrlPreview({
     }
   }
 
+  const openTab = () => url && window.open(url, "_blank", "noopener,noreferrer");
   const portList = Object.entries(ports ?? {}).filter(([, p]) => Number.isInteger(p) && p > 0);
   const btn =
     "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:opacity-40 disabled:hover:bg-transparent";
@@ -115,13 +118,31 @@ export function UrlPreview({
           type="button"
           className={btn}
           disabled={!url}
-          onClick={() => url && window.open(url, "_blank", "noopener,noreferrer")}
+          onClick={openTab}
           title={t("preview.openTab")}
           aria-label={t("preview.openTab")}
         >
           <ExternalLink className="h-3.5 w-3.5" />
         </button>
       </div>
+      {url && !isLoopbackUrl(url) && (
+        // An outside site: most refuse to be framed, and a refusal cannot be
+        // detected from here — so say it, with the way out beside it.
+        <div
+          data-testid="url-preview-blocked-hint"
+          className="flex shrink-0 items-center gap-2 border-b border-border bg-surface-2 px-2 py-1.5 text-[11px] text-fg-secondary"
+        >
+          <span className="min-w-0 flex-1">{t("preview.blockedHint")}</span>
+          <button
+            type="button"
+            onClick={openTab}
+            className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 font-medium text-accent hover:bg-surface-4"
+          >
+            <ExternalLink className="h-3 w-3" />
+            {t("preview.openTabShort")}
+          </button>
+        </div>
+      )}
       {url ? (
         <iframe
           key={`${url}#${reload}`}
diff --git a/client/src/components/lanes/__tests__/UrlPreview.test.tsx b/client/src/components/lanes/__tests__/UrlPreview.test.tsx
index b2e2c075..c9e2607e 100644
--- a/client/src/components/lanes/__tests__/UrlPreview.test.tsx
+++ b/client/src/components/lanes/__tests__/UrlPreview.test.tsx
@@ -2,7 +2,8 @@
  * @file UrlPreview.test.tsx
  * @description The Preview tab: port chips before a page is open, the
  * address bar opening a page in a sandboxed frame without top navigation,
- * a link's request opening its page, and the dashboard's own origin refused.
+ * a link's request opening its page, the dashboard's own origin refused, and
+ * the framing-refusal strip shown for an outside site only.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -36,6 +37,17 @@ describe("UrlPreview", () => {
     );
   });
 
+  it("warns that an outside site may refuse to be framed, never for a local page", () => {
+    render(<UrlPreview laneId={4} ports={{}} request={null} />);
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "localhost:3000" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.queryByTestId("url-preview-blocked-hint")).toBeNull();
+    fireEvent.change(input, { target: { value: "https://youtube.com" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.getByTestId("url-preview-blocked-hint")).toBeTruthy();
+  });
+
   it("opens a link's request", () => {
     render(
       <UrlPreview laneId={3} ports={{}} request={{ url: "http://localhost:5173/", nonce: 1 }} />
diff --git a/client/src/i18n/locales/en/lanes.json b/client/src/i18n/locales/en/lanes.json
index 67b32822..46ce8b3a 100644
--- a/client/src/i18n/locales/en/lanes.json
+++ b/client/src/i18n/locales/en/lanes.json
@@ -390,9 +390,11 @@
   "preview.address": "Page address",
   "preview.reload": "Reload",
   "preview.openTab": "Open in a browser tab",
-  "preview.badUrl": "Only an http(s) page other than the dashboard can be previewed",
+  "preview.badUrl": "Can't open that address — only an http(s) page other than AgentHub itself.",
   "preview.empty": "Type an address, or click a localhost link in the chat or terminal.",
   "preview.loginHint": "A blank page? The site may forbid embedding or need a login — open it in a browser tab.",
+  "preview.blockedHint": "Sites like YouTube, Google or a login page refuse to show inside another page. A blank page or a broken-page icon means that — open it in a browser tab.",
+  "preview.openTabShort": "Open tab",
   "replay.placeholder": "Message to continue this session…",
   "replay.hint": "Sending resumes the session in a free pane.",
   "replay.send": "Send",
diff --git a/client/src/i18n/locales/vi/lanes.json b/client/src/i18n/locales/vi/lanes.json
index ca0a81f9..6faefac5 100644
--- a/client/src/i18n/locales/vi/lanes.json
+++ b/client/src/i18n/locales/vi/lanes.json
@@ -390,9 +390,11 @@
   "preview.address": "Địa chỉ trang",
   "preview.reload": "Tải lại",
   "preview.openTab": "Mở trong tab trình duyệt",
-  "preview.badUrl": "Chỉ xem được trang http(s) khác với dashboard",
+  "preview.badUrl": "Không mở được địa chỉ này — chỉ mở được trang http(s), không phải chính AgentHub.",
   "preview.empty": "Nhập địa chỉ, hoặc bấm một link localhost trong chat hay terminal.",
   "preview.loginHint": "Trang trắng? Trang có thể chặn nhúng hoặc cần đăng nhập — hãy mở trong tab trình duyệt.",
+  "preview.blockedHint": "Các trang như YouTube, Google hay trang đăng nhập không cho hiện bên trong trang khác. Thấy trang trắng hoặc biểu tượng lỗi là vì vậy — hãy mở trong tab trình duyệt.",
+  "preview.openTabShort": "Mở tab",
   "replay.placeholder": "Nhắn để tiếp tục session này…",
   "replay.hint": "Gửi tin sẽ resume session trong một pane trống.",
   "replay.send": "Gửi",
diff --git a/docs/LANES.md b/docs/LANES.md
index 2be0fce8..460bb6ff 100644
--- a/docs/LANES.md
+++ b/docs/LANES.md
@@ -416,7 +416,7 @@ The dashboard web UI merges workspaces and runs into a single **Workspace** page
 - **Tabs** — the session view's console is a tab bar (`client/src/components/run/ConsoleTabs.tsx`) over the workspace's live tmux sessions — at most ten, its slots 0–9: slot 0 is the workspace's `agenthub-lane-<id>` (its `run_id`), slots 1–9 are `agenthub-lane-<id>-<slot>`. Every tab is a **combo**: a group of one to four split panes, each session in exactly one tab (`PaneGroups` in `client/src/lib/paneLayout.ts`). A one-pane tab shows its AI tool's icon and name (or **Terminal**); a combo tab shows every pane's icon and name, and the most urgent state dot. The active tab is the one on screen and its focused pane is the URL's `?run=`, so the Changes panel and Analyst follow it. A click shows a tab; **Ctrl/Cmd+click** on a one-pane tab or a `+` item brings it into the tab on screen, in the same order as a join below (a full tab — four panes — opens it as a tab of its own instead), and a one-pane tab dragged onto a pane joins that tab there. Any tab drags along the bar to reorder it; a pane's header dragged onto the bar takes that pane out into a tab of its own at that place. Dropped on the MIDDLE of another tab (it highlights), a tab — or a pane's header — joins that tab instead, in a fixed order: the second pane goes to the right (left | right), the third under the right pane, the fourth under the left pane (2×2) — the new pane always splits the BIGGEST one by the tree's shape (dragged dividers ignored, a tie goes to the later pane), so a three-pane tab of any shape fills its one missing quarter; a drop that would pass four panes reorders instead (`joinGroup`). A pane drag (a pane's header, or a one-pane tab) held over another tab for 0.6 s opens that tab (`SPRING_MS`), so the pane can be dropped on any edge of that tab's panes instead of the fixed join order; on a bar wider than the screen, dragging near either end scrolls it. Every live session stays mounted and those of other tabs are hidden with CSS, so switching tabs never drops a terminal. A tab's **×** stops every session in it (`DELETE /api/run/<runId>`, after a confirm when one is an AI tool); with no tab left it moves to the home. The **+** menu opens a new tab in the first free slot, which the server picks (`slot: "auto"`, under the workspace lock): **New terminal** (your own default shell in the workspace folder — `POST /api/lanes/:id/start {slot, shell: true}`, recorded as tool `shell`; it is not an agent, so the workspace's `run_id`/`status` are left alone), each installed, enabled AI tool (started bare, on its default model, no prompt), and **Agent settings…** (Settings → Agents). With ten sessions open **+** is disabled. EVERY tab is bound to the sidebar's selection — unless Settings → Appearance → **Tabs from every workspace** is on (`agenthub.workspace.allTabs`, `client/src/lib/workspaceTabs.ts`, synced to the account): then the bar holds every workspace's live sessions, each tab named `<workspace> · <session>`, a combo may mix workspaces, and focusing a pane selects its workspace (`?lane=` follows `?run=`, so the Changes panel and the sidebar follow too). Those tabs are stored once, under `all` in `agenthub.workspace.paneLayout`, their leaves `paneKey`s (lane id × 10 + slot); a split's **New terminal** starts in the target pane's own workspace. A tab has no header of its own (no title, no **Active runs** list, no **New run**): other sessions are opened from the sidebar or the home's Recents. (The old fixed 1/2/4 split layout and its `agenthub.workspace.splitView` key are gone; **Split panes** replaces them.) **Settings** opened on a workspace — the sidebar's Settings, the `+` menu's Agent settings, any Settings link inside it — is one more tab at the bar's end (`?settings=<section>` beside `lane` and `run`, `client/src/lib/settingsLink.ts`): the Settings pages (`SettingsHub` with a `section`), shown instead of the panes, which stay mounted behind them, kept until the tab's X and reopened on the section it was on. Off a workspace a Settings link still opens the `/settings` page.
 
 - **Split panes** — the console splits like VS Code (`client/src/components/run/PaneGrid.tsx`, model in `client/src/lib/paneLayout.ts`): one binary tree of splits PER TAB, each side by side or stacked at a ratio, whose leaves are the workspace's slots — at most four panes in a tab, a session never shown twice. **Ctrl/Cmd+click** a one-pane tab, a `+` item or a sidebar session row brings it into the tab on screen at the 2×2 grid's next place — the same order as a tab join, whichever pane is focused (the intent rides on the navigation's state, never in the URL); with more than one pane each gets a slim header: **drag** it (or a tab) onto another pane — its edge splits there, its middle swaps the two (a session from another tab takes the pane's place and that one moves to a tab of its own) —; while the drag lasts the moved pane is dimmed, the drag shows a small chip with its name, and the drop preview says what will happen (*Place on the left*, *Swap places*…, `dropAction`), its **▾** shows another live session in it (swapping with the pane that showed it), **Split right / Split down** puts a not-shown session or a **New terminal** beside it, its **⤡** takes the pane out of this tab into a tab of its own (its session keeps running), and its **×** (also in the header's right-click menu) stops just that pane's session — the same `DELETE /api/run/<runId>` and AI-tool confirm as a tab's **×** — without taking it out first. A session dropped or swapped in from another tab leaves that tab. Dividers drag (or move by arrow keys) between 10% and 90%. Clicking in (or tabbing into) a pane focuses it, `?run=` follows — so the right panel, Analyst and the sidebar read the focused session — and the keyboard goes with it: only the focused pane's terminal takes it when it appears. A pane closes when its terminal reports that its session ended (exited, closed from another browser); the run list itself only prunes a remembered layout on a workspace's first read, and a pane opened here whose session never got listed — one empty read, which the server returns on any tmux error, never wipes a split. A session ending while the home or a replay is shown only closes its pane; the URL stays. The tabs and their layouts are a viewer preference kept per workspace in `localStorage` (`agenthub.workspace.paneLayout`, `{groups, active}`; a stored pre-tab single layout reads as one tab), never on the server. Every pane is an absolutely placed sibling keyed by its slot, so splitting, swapping or resizing never re-parents — and so never remounts — a live terminal; the session view itself fills the page edge to edge, its tab bar and the right panel's activity bar one header strip.
-- **Preview** — the session view's right panel has two tabs, **Changes** and **Preview** (`client/src/components/lanes/UrlPreview.tsx`). Preview shows a web page by address — before one is open, the workspace's bound ports are offered as `localhost:<port>` chips — with Reload and **Open in a browser tab**; the last address is remembered per workspace in this browser (`agenthub.preview.url.<id>`). Every link follows one rule (`client/src/lib/openInPreview.ts`): a chat link, bare URL or terminal link to `localhost`/`127.0.0.1`/`0.0.0.0`/`[::1]` opens in Preview while a session view is open and the dashboard itself is opened on this machine; any other link, and any Ctrl/Cmd click, opens a browser tab. The page runs on its own origin (the dashboard's own is refused) with no top navigation. A site that forbids embedding — most login pages — shows blank; open it in a browser tab.
+- **Preview** — the session view's right panel has two tabs, **Changes** and **Preview** (`client/src/components/lanes/UrlPreview.tsx`). Preview shows a web page by address — before one is open, the workspace's bound ports are offered as `localhost:<port>` chips — with Reload and **Open in a browser tab**; the last address is remembered per workspace in this browser (`agenthub.preview.url.<id>`). Every link follows one rule (`client/src/lib/openInPreview.ts`): a chat link, bare URL or terminal link to `localhost`/`127.0.0.1`/`0.0.0.0`/`[::1]` opens in Preview while a session view is open and the dashboard itself is opened on this machine; any other link, and any Ctrl/Cmd click, opens a browser tab. The page runs on its own origin (the dashboard's own is refused) with no top navigation. A site that forbids embedding — YouTube, Google, most login pages — shows blank or a broken-page icon; any page not on this machine gets a strip under the address bar saying so, with **Open tab** beside it.
 - **Workspace grid** — one card per workspace, 1 column, 2 at `md`, 3 at `xl`. Each card carries the workspace id, liveness dot and status, title, declared stage and time-on-stage, the `auto:` chip when detection leads, the kind and CI tags, the working-copy facts from `GET /api/lanes/:id/git`, and the action row. The needs-you message (`needs_action`) is on the workspace list tile only — the detail card no longer repeats it as a banner.
 
 Run history is per workspace, queryable via `GET /api/run/history?laneId=<n>`.