feat: @-mention a browser tab so the agent works in it

apps/mobile/scripts/sync-context-chip-icons.mjs

@@ -39,6 +39,7 @@ const lucideIcons = [
   "git-pull-request-arrow",
   "git-pull-request-closed",
   "git-pull-request-draft",
+  "globe",
   "image",
   "message-circle",
   "messages-square",

apps/mobile/src/components/ComposerContextSheet.tsx

@@ -324,6 +324,12 @@ export function ComposerContextSheet(props: {
                 ) : null}
               </View>
             ) : null}
+            {record.kind === "browser-tab" ? (
+              <View className="gap-3">
+                <ContextField label="Browser tab" value={record.title} />
+                {record.url ? <ContextField label="URL" value={record.url} code /> : null}
+              </View>
+            ) : null}
             {record.kind === "skill" ? (
               <View className="gap-3">
                 <ContextField label="Skill" value={record.name} />

apps/mobile/src/features/browser/BrowserPreviewRouteScreen.tsx

@@ -87,7 +87,19 @@ function BrowserPreviewScreen({
   const [canControl, setCanControl] = useState(false);
   const streamRef = useRef<PreviewStreamRef>(null);
   const { tabs, loaded } = useThreadServerBrowserTabs({ environmentId, threadId, enabled: true });
-  const tab = tabs.find((entry) => entry.tabId === selectedTabId) ?? latestBrowserTab(tabs);
+  // A tab mention can outlive its tab; opening another tab in its place would mislead.
+  const [initialTabState, setInitialTabState] = useState<"pending" | "open" | "closed">(
+    initialTabId === null ? "open" : "pending",
+  );
+  let initialTabStatus = initialTabState;
+  if (initialTabStatus === "pending" && loaded) {
+    initialTabStatus = tabs.some((entry) => entry.tabId === initialTabId) ? "open" : "closed";
+    setInitialTabState(initialTabStatus);
+  }
+  const tab =
+    initialTabStatus === "closed"
+      ? undefined
+      : (tabs.find((entry) => entry.tabId === selectedTabId) ?? latestBrowserTab(tabs));
   const pdfUri =
     tab?.navStatus._tag === "Success" ? previewPdfAssetUrl(tab.navStatus.url, httpBaseUrl) : null;
   const tabId = tab?.tabId ?? null;
@@ -98,6 +110,12 @@ function BrowserPreviewScreen({
   useEffect(() => {
     if (focused && loaded && tabs.length === 0) onClose();
   }, [focused, loaded, tabs.length, onClose]);
+  const hasTabs = tabs.length > 0;
+  useEffect(() => {
+    if (initialTabStatus !== "closed" || !hasTabs) return;
+    Dialog.alert("Tab closed", "This browser tab is no longer open.");
+    onClose();
+  }, [initialTabStatus, hasTabs, onClose]);
   const onPictureInPicture = useCallback((state: PreviewPictureInPictureState, detail?: string) => {
     setPictureInPicture({ supported: state.supported, active: state.active });
     if (detail) Dialog.alert("Picture in picture is unavailable", detail);

apps/mobile/src/features/threads/ComposerCommandPopover.tsx

@@ -1,3 +1,4 @@
+import type { ComposerBrowserTabItem } from "@t3tools/client-runtime/composerBrowserTabItems";
 import {
   resolveProviderSkillSourceKind,
   type ProviderSkillSourceKind,
@@ -40,6 +41,7 @@ export type ComposerCommandItem =
       readonly label: string;
       readonly description: string;
     }
+  | ComposerBrowserTabItem
   | {
       readonly id: string;
       readonly type: "slash-command";
@@ -110,6 +112,8 @@ function itemIcon(item: ComposerCommandItem): AppSymbolName | null {
       return null;
     case "thread":
       return "text.bubble";
+    case "browser-tab":
+      return "globe";
   }
 }
 

apps/mobile/src/features/threads/ThreadComposer.tsx

@@ -63,6 +63,7 @@ import {
 import { appAtomRegistry } from "../../state/atom-registry";
 import type { ComposerDocumentAttachment } from "../../lib/composerContext";
 import { useProject, useThreadShells } from "../../state/entities";
+import { useThreadServerBrowserTabs } from "../../state/preview";
 import { scopeProjectRef } from "@t3tools/client-runtime/environment";
 
 import { AppText as Text } from "../../components/ui/AppText";
@@ -560,6 +561,11 @@ export const ThreadComposer = function ThreadComposer(props: ThreadComposerProps
     ownerKey: composerDraftKey,
     environmentId: props.environmentId,
     threadShells: useThreadShells(),
+    browserTabs: useThreadServerBrowserTabs({
+      environmentId: props.environmentId,
+      threadId: props.selectedThread.id,
+      enabled: props.serverConfig?.environment.capabilities.serverBrowser === true,
+    }).tabs,
     currentThreadId: props.selectedThread.id,
     projectCwd: props.projectCwd,
     pullRequestProjectId: props.serverConfig?.environment.capabilities.pullRequests

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -1895,6 +1895,14 @@ function UserMessageContent(props: UserMessageContentProps) {
       });
       return;
     }
+    if (record?.kind === "browser-tab" && "tabId" in record) {
+      navigation.navigate("ThreadBrowserPreview", {
+        environmentId: String(record.environmentId),
+        threadId: String(record.threadId),
+        tabId: record.tabId,
+      });
+      return;
+    }
     const document = composerDocumentAttachmentRecord(record);
     if (document) {
       navigation.navigate("ThreadAttachment", {

apps/mobile/src/features/threads/use-composer-command-menu.ts

@@ -1,16 +1,24 @@
 import * as Dialog from "../../components/ui/Dialog";
 import type {
+  BrowserTabContextRecord,
   EnvironmentId,
+  PreviewSessionSnapshot,
   ProjectId,
   ProviderInteractionMode,
   ServerProvider,
+  ThreadContextRecord,
   ThreadId,
   ThreadPullRequestLink,
 } from "@t3tools/contracts";
+import {
+  browserTabContextRecord,
+  matchComposerBrowserTabItems,
+} from "@t3tools/client-runtime/composerBrowserTabItems";
 import { matchComposerThreadItems } from "@t3tools/client-runtime/composerThreadItems";
 import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/models";
 
 const EMPTY_THREAD_SHELLS: ReadonlyArray<EnvironmentThreadShell> = [];
+const EMPTY_BROWSER_TABS: ReadonlyArray<PreviewSessionSnapshot> = [];
 import { COMPOSER_CONTEXT_MAX_RECORDS } from "@t3tools/contracts";
 import { formatComposerContextReference } from "@t3tools/shared/composerContextReferences";
 import { pullRequestComposerContext, threadComposerContext } from "../../lib/composerContext";
@@ -180,6 +188,7 @@ export function useComposerCommandMenu({
   ownerKey,
   environmentId,
   threadShells = EMPTY_THREAD_SHELLS,
+  browserTabs = EMPTY_BROWSER_TABS,
   currentThreadId = null,
   projectCwd,
   pullRequestProjectId = null,
@@ -198,6 +207,7 @@ export function useComposerCommandMenu({
   readonly ownerKey: string | null;
   readonly environmentId: EnvironmentId | null;
   readonly threadShells?: ReadonlyArray<EnvironmentThreadShell>;
+  readonly browserTabs?: ReadonlyArray<PreviewSessionSnapshot>;
   readonly currentThreadId?: ThreadId | null;
   readonly projectCwd: string | null;
   readonly pullRequestProjectId?: ProjectId | null;
@@ -445,6 +455,9 @@ export function useComposerCommandMenu({
           })
         : [];
       return [
+        ...(environmentId && currentThreadId
+          ? matchComposerBrowserTabItems({ sessions: browserTabs, query: trigger.query })
+          : []),
         ...threadItems,
         ...pathSearch.entries.map((entry) => {
           const parts = entry.path.split("/");
@@ -463,6 +476,34 @@ export function useComposerCommandMenu({
     return [];
   })();
 
+  const insertLinkedContext = (
+    trigger: ComposerTrigger,
+    ownerKey: string,
+    record: ThreadContextRecord | BrowserTabContextRecord,
+  ) => {
+    const existing = getComposerDraftSnapshot(ownerKey).context?.records ?? [];
+    const alreadyAttached = existing.some((entry) => entry.contextId === record.contextId);
+    if (!alreadyAttached && existing.length >= COMPOSER_CONTEXT_MAX_RECORDS) {
+      Dialog.alert("Too many context items", "Remove some context from the draft and try again.");
+      return;
+    }
+    const result = replaceTextRange(
+      draftMessage,
+      trigger.rangeStart,
+      trigger.rangeEnd,
+      `${formatComposerContextReference(record)} `,
+    );
+    onChangeDraftMessage(result.text);
+    if (!alreadyAttached) {
+      const draft = getComposerDraftSnapshot(ownerKey);
+      setComposerDraftContext(ownerKey, {
+        version: 1,
+        records: [...(draft.context?.records ?? []), record],
+      });
+    }
+    setSelection({ start: result.cursor, end: result.cursor });
+  };
+
   const onSelect = (item: ComposerCommandItem) => {
     if (!trigger) return;
     if (item.type === "thread") {
@@ -473,28 +514,16 @@ export function useComposerCommandMenu({
           candidate.id === item.thread.threadId,
       );
       if (!shell) return;
-      const record = threadComposerContext(item.thread, shell.title);
-      const existing = getComposerDraftSnapshot(ownerKey).context?.records ?? [];
-      const alreadyAttached = existing.some((entry) => entry.contextId === record.contextId);
-      if (!alreadyAttached && existing.length >= COMPOSER_CONTEXT_MAX_RECORDS) {
-        Dialog.alert("Too many context items", "Remove some context from the draft and try again.");
-        return;
-      }
-      const result = replaceTextRange(
-        draftMessage,
-        trigger.rangeStart,
-        trigger.rangeEnd,
-        `${formatComposerContextReference(record)} `,
+      insertLinkedContext(trigger, ownerKey, threadComposerContext(item.thread, shell.title));
+      return;
+    }
+    if (item.type === "browser-tab") {
+      if (!ownerKey || trigger.kind !== "path" || !environmentId || !currentThreadId) return;
+      insertLinkedContext(
+        trigger,
+        ownerKey,
+        browserTabContextRecord({ environmentId, threadId: currentThreadId }, item.tab),
       );
-      onChangeDraftMessage(result.text);
-      if (!alreadyAttached) {
-        const draft = getComposerDraftSnapshot(ownerKey);
-        setComposerDraftContext(ownerKey, {
-          version: 1,
-          records: [...(draft.context?.records ?? []), record],
-        });
-      }
-      setSelection({ start: result.cursor, end: result.cursor });
       return;
     }
     if (item.type === "pull-request") {

apps/mobile/src/lib/composerChipPresentation.ts

@@ -43,6 +43,7 @@ const CONTEXT_CHIP_PRESENTATIONS = {
     accent: "#009c96",
     icon: "messages-square",
   },
+  "browser-tab": { accent: "#7c9128", icon: "globe" },
 } as const satisfies Record<string, ContextChipPresentation>;
 
 const CHIP_CONTRAST = 5;

apps/mobile/src/lib/contextChipIcons.generated.ts

@@ -7,6 +7,7 @@ export const CONTEXT_CHIP_ICON_SOURCES = {
   "git-pull-request-arrow": require("../../assets/context-chip-icons/git-pull-request-arrow.png"),
   "git-pull-request-closed": require("../../assets/context-chip-icons/git-pull-request-closed.png"),
   "git-pull-request-draft": require("../../assets/context-chip-icons/git-pull-request-draft.png"),
+  globe: require("../../assets/context-chip-icons/globe.png"),
   image: require("../../assets/context-chip-icons/image.png"),
   "message-circle": require("../../assets/context-chip-icons/message-circle.png"),
   "messages-square": require("../../assets/context-chip-icons/messages-square.png"),

apps/web/src/components/BrowserTabContextChip.tsx

@@ -0,0 +1,57 @@
+import type { BrowserTabContextRecord } from "@t3tools/contracts";
+import { useNavigate } from "@tanstack/react-router";
+import { GlobeIcon } from "lucide-react";
+
+import { useFaviconForThreadUrl } from "~/browserFaviconStore";
+import { useThreadPreviewState } from "~/previewStateStore";
+import { useRightPanelStore } from "~/rightPanelStore";
+import { ContextChip, ContextChipLabel } from "./ContextChip";
+import { FaviconImage } from "./preview/PreviewFaviconIcon";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
+
+export function BrowserTabContextChip(props: {
+  record: Pick<BrowserTabContextRecord, "environmentId" | "threadId" | "tabId" | "title" | "url">;
+  copyMarkdown?: string;
+}) {
+  const { environmentId, threadId, tabId } = props.record;
+  const threadRef = { environmentId, threadId };
+  const session = useThreadPreviewState(threadRef).sessions[tabId];
+  const liveUrl = session && session.navStatus._tag !== "Idle" ? session.navStatus.url : null;
+  const liveTitle =
+    session && session.navStatus._tag !== "Idle" ? session.navStatus.title.trim() : "";
+  const url = liveUrl ?? props.record.url;
+  const title = liveTitle || props.record.title;
+  const favicon = useFaviconForThreadUrl(threadRef, url ?? "");
+  const navigate = useNavigate();
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <ContextChip
+            kind="browser-tab"
+            {...(session ? {} : { state: "unresolved" as const })}
+            render={<button type="button" disabled={!session} />}
+            onClick={() => {
+              // A chip pasted into another thread still points at the tab's own thread.
+              useRightPanelStore.getState().openBrowser(threadRef, tabId);
+              void navigate({ to: "/$environmentId/$threadId", params: threadRef });
+            }}
+            aria-label={`Browser tab, ${title}`}
+            data-markdown-copy={props.copyMarkdown}
+          >
+            <FaviconImage
+              sources={[favicon]}
+              fallback={<GlobeIcon />}
+              className="size-[1.17em] self-center rounded-sm object-contain"
+            />
+            <ContextChipLabel>{title}</ContextChipLabel>
+          </ContextChip>
+        }
+      />
+      <TooltipPopup side="top">
+        {session ? "Show in browser" : "Tab closed"}
+        {url ? <div className="max-w-80 truncate text-muted-foreground">{url}</div> : null}
+      </TooltipPopup>
+    </Tooltip>
+  );
+}

apps/web/src/components/ChatView.logic.test.ts

@@ -1061,7 +1061,7 @@ describe("snapshotComposerSend", () => {
       sendableTerminalContexts: [live],
       previewAnnotations: [],
       reviewComments: [],
-      threadContexts: [],
+      linkedContexts: [],
     });
 
     expect(snapshot.terminalContexts).toEqual([live]);

apps/web/src/components/ChatView.logic.ts

@@ -38,7 +38,6 @@ import {
   type ServerProvider,
   type ScopedProjectRef,
   type ScopedThreadRef,
-  type ThreadContextRecord,
   type ThreadId,
   type ThreadLinkedPullRequest,
   type RunId,
@@ -89,6 +88,7 @@ import {
   previewAnnotationContextLabel,
   reviewCommentContextLabel,
   terminalContextReference,
+  type LinkedContextRecord,
 } from "../lib/composerContextRecords";
 import { serializeLegacyContextMessage } from "@t3tools/shared/composerContextLegacySend";
 import type { ComposerDispatchMode } from "@t3tools/client-runtime/state/composer-dispatch";
@@ -1269,7 +1269,7 @@ export interface PlanFollowUpComposerSnapshot {
   readonly terminalContexts: ReadonlyArray<TerminalContextDraft>;
   readonly reviewComments: ReadonlyArray<ReviewCommentContext>;
   readonly previewAnnotations: ReadonlyArray<PreviewAnnotationPayload>;
-  readonly threadContexts: ReadonlyArray<ThreadContextRecord>;
+  readonly linkedContexts: ReadonlyArray<LinkedContextRecord>;
 }
 
 export function restorePlanFollowUpComposer(input: {
@@ -1278,7 +1278,7 @@ export function restorePlanFollowUpComposer(input: {
   readonly writeTerminalContexts: (contexts: ReadonlyArray<TerminalContextDraft>) => void;
   readonly writeReviewComments: (comments: ReadonlyArray<ReviewCommentContext>) => void;
   readonly writePreviewAnnotations: (annotations: ReadonlyArray<PreviewAnnotationPayload>) => void;
-  readonly writeThreadContexts: (records: ReadonlyArray<ThreadContextRecord>) => void;
+  readonly writeLinkedContexts: (records: ReadonlyArray<LinkedContextRecord>) => void;
   readonly resetCursor: (options: {
     cursor: number;
     prompt: string;
@@ -1289,7 +1289,7 @@ export function restorePlanFollowUpComposer(input: {
   input.writeTerminalContexts(input.snapshot.terminalContexts);
   input.writeReviewComments(input.snapshot.reviewComments);
   input.writePreviewAnnotations(input.snapshot.previewAnnotations);
-  input.writeThreadContexts(input.snapshot.threadContexts);
+  input.writeLinkedContexts(input.snapshot.linkedContexts);
   input.resetCursor({
     cursor: collapseExpandedComposerCursor(input.snapshot.prompt, input.snapshot.prompt.length),
     prompt: input.snapshot.prompt,
@@ -1448,7 +1448,7 @@ export interface ComposerSendContents {
   readonly sendableTerminalContexts: ReadonlyArray<TerminalContextDraft>;
   readonly previewAnnotations: ReadonlyArray<PreviewAnnotationPayload>;
   readonly reviewComments: ReadonlyArray<ReviewCommentContext>;
-  readonly threadContexts: ReadonlyArray<ThreadContextRecord>;
+  readonly linkedContexts: ReadonlyArray<LinkedContextRecord>;
 }
 
 /**
@@ -1467,7 +1467,7 @@ export function snapshotComposerSend(contents: ComposerSendContents) {
     terminalContexts,
     previewAnnotations: [...contents.previewAnnotations],
     reviewComments: [...contents.reviewComments],
-    threadContexts: [...contents.threadContexts],
+    linkedContexts: [...contents.linkedContexts],
     messageText: contents.terminalContexts
       .filter((context) => !terminalContexts.includes(context))
       .reduce(