@agent-native/core 0.120.1 → 0.120.3

package/src/client/agent-page/AgentTabsPage.tsx

@@ -5,6 +5,7 @@ import {
   IconExternalLink,
   IconFolder,
   IconHistory,
+  IconHelpCircle,
   IconHierarchy2,
   IconNotes,
   IconPlugConnected,
@@ -421,7 +422,19 @@ interface AccessUrls {
   agentCardUrl: string;
 }
 
-function CopyField({ label, value }: { label: string; value: string }) {
+export const AGENT_ACCESS_DOCS_HREF = {
+  mcp: "https://agent-native.com/docs/mcp-protocol",
+  a2a: "https://agent-native.com/docs/a2a-protocol",
+} as const;
+
+interface CopyFieldProps {
+  label: string;
+  value: string;
+  docsHref?: string;
+  docsLabel?: string;
+}
+
+function CopyField({ label, value, docsHref, docsLabel }: CopyFieldProps) {
   const [copied, setCopied] = useState(false);
   const copy = async () => {
     try {
@@ -435,8 +448,20 @@ function CopyField({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex min-w-0 items-center gap-2 rounded-md border border-border bg-muted/20 p-2">
       <div className="min-w-0 flex-1">
-        <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+        <div className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
           {label}
+          {docsHref && (
+            <a
+              href={docsHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={docsLabel ?? `Open ${label} documentation`}
+              title={docsLabel ?? `Open ${label} documentation`}
+              className="inline-flex size-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <IconHelpCircle className="size-3" />
+            </a>
+          )}
         </div>
         <code className="mt-1 block truncate text-xs text-foreground">
           {value}
@@ -530,9 +555,19 @@ function AccessTab({
       <div className="space-y-6">
         {urls ? (
           <>
-            <CopyField label="MCP URL" value={urls.mcpUrl} />
+            <CopyField
+              label="MCP URL"
+              value={urls.mcpUrl}
+              docsHref={AGENT_ACCESS_DOCS_HREF.mcp}
+              docsLabel="Open MCP documentation"
+            />
             {agentCardAvailable && (
-              <CopyField label="A2A agent card" value={urls.agentCardUrl} />
+              <CopyField
+                label="A2A agent card"
+                value={urls.agentCardUrl}
+                docsHref={AGENT_ACCESS_DOCS_HREF.a2a}
+                docsLabel="Open A2A documentation"
+              />
             )}
             <section className="space-y-3 border-t border-border/70 pt-6">
               <div>

package/src/client/analytics.ts

@@ -14,6 +14,7 @@ import {
   installErrorCapture,
   type CapturedExceptionEvent,
 } from "./error-capture.js";
+import { isDynamicImportFailureMessage } from "./route-chunk-recovery.js";
 import type {
   SessionReplayOptions,
   SessionReplayStartResult,
@@ -677,6 +678,18 @@ function shouldDropBrowserSentryNoise(event: Sentry.Event): boolean {
     typeof event.tags?.url === "string" ? event.tags.url : undefined;
   const requestUrl = (event.request?.url ?? taggedUrl ?? "").toLowerCase();
   const isDocsPage = isAgentNativeDocsUrl(requestUrl);
+  // React Router's stale-chunk recovery handles these failures by reloading
+  // the page. Keep the external Sentry stream aligned with first-party
+  // capture, which already drops the prevented browser event.
+  if (
+    exceptionValues.some((value) =>
+      isDynamicImportFailureMessage(
+        `${value.type ?? ""}: ${value.value ?? ""}`,
+      ),
+    )
+  ) {
+    return true;
+  }
   // A server-owned run can emit an expected run_timeout while handing off to
   // its continuation. AssistantChat retries these transitions automatically;
   // only locally timed-out or ultimately unrecoverable runs should create a

package/src/client/error-capture.ts

@@ -383,7 +383,7 @@ function shouldIgnoreAutoCapturedError(normalized: {
     /\binjectScriptAdjust\.js\b/i.test(stack);
   if (
     hasExtensionFrame &&
-    /^(?:TypeError:\s*)?Failed to fetch$/i.test(message)
+    /^(?:TypeError:\s*)?Failed to fetch(?:\s*\([^)]*\))?$/i.test(message)
   ) {
     return true;
   }
@@ -614,6 +614,10 @@ export function installErrorCapture(
   if (runtime.config.captureGlobalErrors) {
     const onError = (event: ErrorEvent) => {
       try {
+        // Route-chunk recovery and other host listeners may intentionally
+        // prevent a browser error after handling it. Respect that decision so
+        // the same transient failure is not stored as an application issue.
+        if (event.defaultPrevented) return;
         const normalized = normalizeGlobalErrorEvent(event);
         if (shouldIgnoreAutoCapturedError(normalized)) return;
         // Global errors are already logged by the session replay recorder, so
@@ -639,6 +643,7 @@ export function installErrorCapture(
   if (runtime.config.captureUnhandledRejections) {
     const onRejection = (event: PromiseRejectionEvent) => {
       try {
+        if (event.defaultPrevented) return;
         const reason = event?.reason;
         const normalized = normalizeCapturedError(reason);
         if (!normalized.type || normalized.type === "Error") {

package/src/client/extensions/ExtensionsListPage.tsx

@@ -99,7 +99,14 @@ function CreateToolInput({ className }: { className?: string }) {
   );
 }
 
-export function ExtensionsListPage() {
+export interface ExtensionsListPageProps {
+  /** Skip the standalone extensions navigation state when embedded in Settings. */
+  embedded?: boolean;
+}
+
+export function ExtensionsListPage({
+  embedded = false,
+}: ExtensionsListPageProps = {}) {
   const t = useT();
   const [showCreate, setShowCreate] = useState(false);
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
@@ -111,12 +118,13 @@ export function ExtensionsListPage() {
   );
 
   useEffect(() => {
+    if (embedded) return;
     fetch(agentNativePath("/_agent-native/application-state/navigation"), {
       method: "PUT",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ view: "extensions" }),
     }).catch(() => {});
-  }, []);
+  }, [embedded]);
 
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -189,11 +197,23 @@ export function ExtensionsListPage() {
   };
 
   return (
-    <div className="flex h-full w-full flex-col">
-      <header className="flex h-12 items-center justify-between border-b px-4 shrink-0">
-        <div className="flex items-center gap-2">
-          <h1 className="text-sm font-semibold">{t("extensions.title")}</h1>
-        </div>
+    <div
+      className={cn(
+        "flex w-full flex-col",
+        embedded ? "min-h-[28rem]" : "h-full",
+      )}
+    >
+      <header
+        className={cn(
+          "flex h-12 items-center justify-between px-4 shrink-0",
+          !embedded && "border-b",
+        )}
+      >
+        {!embedded ? (
+          <div className="flex items-center gap-2">
+            <h1 className="text-sm font-semibold">{t("extensions.title")}</h1>
+          </div>
+        ) : null}
         <div className="flex items-center gap-2">
           <Popover open={showCreate} onOpenChange={setShowCreate}>
             <PopoverTrigger asChild>
@@ -244,7 +264,7 @@ export function ExtensionsListPage() {
               </DropdownMenuCheckboxItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <AgentToggleButton />
+          {!embedded ? <AgentToggleButton /> : null}
         </div>
       </header>
 

package/src/client/extensions/agent-native-extension-runtime.ts

@@ -127,7 +127,7 @@ const defaultThemeCss = `
   --border: 217.2 32.6% 17.5%;
   --primary: 217.2 91.2% 59.8%;
   --primary-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 210 40% 98%;
 }
 html, body {

package/src/client/navigation/index.ts

@@ -15,9 +15,11 @@ export {
   type UseSemanticNavigationStateResult,
 } from "../route-state.js";
 export {
+  COMMAND_MENU_OPEN_EVENT,
   CommandMenu,
   openAgentSidebar,
   openAgentSettings,
+  openCommandMenu,
   submitToAgent,
   useCommandMenuShortcut,
   type CommandMenuProps,

package/src/client/org/OrgSwitcher.tsx

@@ -102,7 +102,7 @@ const APP_SUBMENU_CONTENT_CLASS =
   "z-50 w-72 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 
 const SWITCHER_BUTTON_CLASS =
-  "flex w-full items-center gap-2 rounded-md border border-border/70 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
+  "flex w-full items-center gap-2 rounded-md border-0 bg-accent/50 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
 
 const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings#organization";
 const DEFAULT_PROFILE_PATH = "/settings#account";
@@ -151,33 +151,29 @@ function AppMenuLink({
   onNavigate: () => void;
 }) {
   const Icon = appMenuIcon(app);
+  const description =
+    app.status === "pending"
+      ? "Building"
+      : app.description?.trim() ||
+        (app.isDispatch ? "Workspace hub" : `${app.name} workspace`);
   return (
     <a
       href={app.href}
       onClick={onNavigate}
-      className={`flex items-center gap-2 rounded-sm px-2.5 py-2 text-xs outline-none hover:bg-accent focus:bg-accent ${
-        app.isDispatch ? "border border-primary/20 bg-primary/5" : ""
-      }`}
+      className="flex items-center gap-2 rounded-sm px-2.5 py-2 text-xs outline-none hover:bg-accent focus:bg-accent"
     >
-      <span
-        className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${
-          app.isDispatch
-            ? "bg-primary text-primary-foreground"
-            : "bg-muted text-muted-foreground"
-        }`}
-      >
+      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
         <Icon className="h-3.5 w-3.5" />
       </span>
       <span className="min-w-0 flex-1">
         <span className="block truncate font-medium text-foreground">
           {app.name}
         </span>
-        <span className="block truncate text-[11px] text-muted-foreground">
-          {app.isDispatch
-            ? "Main hub"
-            : app.status === "pending"
-              ? "Building"
-              : "Open app"}
+        <span
+          className="block truncate text-[11px] text-muted-foreground"
+          title={description}
+        >
+          {description}
         </span>
       </span>
       <IconArrowUpRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
@@ -187,14 +183,12 @@ function AppMenuLink({
 
 function AppsSubmenu({
   apps,
-  isWorkspace,
   isLoading,
   dispatchHref,
   dispatchAllAppsHref,
   onNavigate,
 }: {
   apps: OrgSwitcherAppLink[];
-  isWorkspace: boolean;
   isLoading: boolean;
   dispatchHref: string;
   dispatchAllAppsHref: string;
@@ -241,17 +235,6 @@ function AppsSubmenu({
           collisionPadding={12}
           className={APP_SUBMENU_CONTENT_CLASS}
         >
-          <div className="px-2.5 py-1.5">
-            <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-              {isWorkspace ? "Workspace apps" : "Default apps"}
-            </div>
-            <div className="mt-0.5 text-[11px] text-muted-foreground">
-              {isWorkspace
-                ? "Dispatch is the workspace hub."
-                : "Dispatch is the home base."}
-            </div>
-          </div>
-
           <AppMenuLink app={dispatchApp} onNavigate={onNavigate} />
 
           {visibleNonDispatch.length > 0 && (
@@ -269,7 +252,7 @@ function AppsSubmenu({
                 onClick={onNavigate}
                 className="flex items-center gap-2 rounded-sm px-2.5 py-1.5 text-xs text-foreground outline-none hover:bg-accent focus:bg-accent"
               >
-                <IconMessageCircle className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <IconApps className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                 <span className="flex-1">
                   {`View ${remainingCount} more in Dispatch`}
                 </span>
@@ -549,7 +532,6 @@ export function OrgSwitcher({
               <div className="my-1 h-px bg-border" />
               <AppsSubmenu
                 apps={appLinks.apps}
-                isWorkspace={appLinks.isWorkspace}
                 isLoading={appLinks.isLoading}
                 dispatchHref={appLinks.dispatchHref}
                 dispatchAllAppsHref={appLinks.dispatchAllAppsHref}

package/src/client/settings/ExtensionsSettingsContent.tsx

@@ -0,0 +1,24 @@
+import { IconLoader2 } from "@tabler/icons-react";
+import { lazy, Suspense } from "react";
+
+const ExtensionsListPage = lazy(() =>
+  import("../extensions/ExtensionsListPage.js").then((module) => ({
+    default: module.ExtensionsListPage,
+  })),
+);
+
+export function ExtensionsSettingsContent() {
+  return (
+    <div className="mx-auto w-full max-w-5xl">
+      <Suspense
+        fallback={
+          <div className="flex min-h-[28rem] items-center justify-center text-muted-foreground">
+            <IconLoader2 className="size-5 animate-spin" aria-label="Loading" />
+          </div>
+        }
+      >
+        <ExtensionsListPage embedded />
+      </Suspense>
+    </div>
+  );
+}

package/src/client/settings/SettingsPanel.tsx

@@ -29,6 +29,7 @@ import {
   IconGauge,
   IconApps,
   IconUsersGroup,
+  IconTool,
 } from "@tabler/icons-react";
 import React, {
   Suspense,
@@ -67,6 +68,7 @@ import {
 import { AgentsSection } from "./AgentsSection.js";
 import { AutomationsSection } from "./AutomationsSection.js";
 import { DemoModeSection } from "./DemoModeSection.js";
+import { ExtensionsSettingsContent } from "./ExtensionsSettingsContent.js";
 import { SecretsSection } from "./SecretsSection.js";
 import {
   SettingsSection,
@@ -3037,6 +3039,14 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
           />
         ),
       },
+      {
+        id: "extensions",
+        label: "Extensions",
+        icon: IconTool,
+        group: "workspace",
+        keywords: "extensions widgets mini apps tools sandboxed apps",
+        content: <ExtensionsSettingsContent />,
+      },
     ];
   }, [baseProps]);
 }

package/src/deploy/build.ts

@@ -3708,6 +3708,9 @@ export default bundle;
       "process.env.AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID": JSON.stringify(
         process.env.GA_MEASUREMENT_ID?.trim() || "",
       ),
+      "process.env.AGENT_NATIVE_BUILD_GTM_CONTAINER_ID": JSON.stringify(
+        process.env.GTM_CONTAINER_ID?.trim() || "",
+      ),
       "process.env.AGENT_NATIVE_BUILD_DEPLOY_CONTEXT": JSON.stringify(
         process.env.CONTEXT?.trim() || "",
       ),

package/src/extensions/theme.ts

@@ -92,7 +92,7 @@ export function getThemeVars(_isDark?: boolean): string {
   --muted-foreground: 240 5% 64.9%;
   --accent: 240 3.7% 15.9%;
   --accent-foreground: 0 0% 98%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 240 3.7% 15.9%;
   --input: 240 3.7% 15.9%;

package/src/localization/default-messages.ts

@@ -172,6 +172,7 @@ const messages = {
       workspaceControlPlane: "Workspace control plane",
       workspaceSubtitle_one: "Workspace · {{count}} app",
       workspaceSubtitle_other: "Workspace · {{count}} apps",
+      search: "Search",
       chats: "Chats",
       newChat: "New chat",
       newDispatchChat: "New Dispatch chat",
@@ -310,6 +311,7 @@ const messages = {
     newTerminal: "New terminal",
     panelOptions: "Agent panel options",
     collapseSidebar: "Collapse sidebar",
+    expandSidebar: "Expand sidebar",
     hideChats: "Hide chats",
     allChats: "All chats",
     settings: "Settings",

package/src/server/analytics.ts

@@ -2,16 +2,21 @@
  * Opt-in analytics injection for SSR streams.
  * Supported environment variables:
  * - `GA_MEASUREMENT_ID` — Google Analytics 4 measurement ID
+ * - `GTM_CONTAINER_ID` — Google Tag Manager web container ID
  *
  * Netlify configuration-file env vars are build-time only for serverless
  * functions, so the Vite/Nitro build paths also bake this public value into
  * SSR bundles.
  *
  * Amplitude and Sentry are initialized client-side via their npm packages
- * (see `packages/core/src/client/analytics.ts`). Only GA requires script
- * tag injection because the gtag.js loader must be a `<script src>`.
+ * (see `packages/core/src/client/analytics.ts`). GTM and GA require script
+ * tag injection because their loaders must be `<script>` elements.
  *
- * When set, the corresponding script tags are injected before `</head>`.
+ * When GTM is set, its head bootstrap is injected before `</head>` and its
+ * noscript fallback immediately after `<body>`. GTM takes precedence over GA
+ * so pageviews are not double-counted; configure the GA tag inside GTM.
+ * When only GA is set, the corresponding script tags are injected before
+ * `</head>`.
  * When not set, the stream passes through untouched (zero overhead).
  *
  * Usage in entry.server.tsx:
@@ -22,6 +27,7 @@
  */
 
 declare const __AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID__: string | undefined;
+declare const __AGENT_NATIVE_BUILD_GTM_CONTAINER_ID__: string | undefined;
 
 function normalizeMeasurementId(value: string | undefined): string | null {
   const trimmed = value?.trim();
@@ -34,6 +40,25 @@ function getViteBakedGaMeasurementId(): string | undefined {
     : undefined;
 }
 
+function normalizeContainerId(value: string | undefined): string | null {
+  const trimmed = value?.trim().toUpperCase();
+  return trimmed && /^GTM-[A-Z0-9]+$/.test(trimmed) ? trimmed : null;
+}
+
+function getViteBakedGtmContainerId(): string | undefined {
+  return typeof __AGENT_NATIVE_BUILD_GTM_CONTAINER_ID__ === "string"
+    ? __AGENT_NATIVE_BUILD_GTM_CONTAINER_ID__
+    : undefined;
+}
+
+function getGtmContainerId(): string | null {
+  return (
+    normalizeContainerId(process.env.GTM_CONTAINER_ID) ||
+    normalizeContainerId(process.env.AGENT_NATIVE_BUILD_GTM_CONTAINER_ID) ||
+    normalizeContainerId(getViteBakedGtmContainerId())
+  );
+}
+
 function getGaMeasurementId(): string | null {
   return (
     normalizeMeasurementId(process.env.GA_MEASUREMENT_ID) ||
@@ -74,6 +99,37 @@ function getGaScript(): string | null {
   );
 }
 
+function getGtmHeadScript(containerId: string): string {
+  const jsId = JSON.stringify(containerId);
+  return `<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer',${jsId});</script>`;
+}
+
+function getGtmBodyFallback(containerId: string): string {
+  const src = encodeURIComponent(containerId);
+  return `<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${src}" height="0" width="0" style="display:none;visibility:hidden" title="Google Tag Manager"></iframe></noscript>`;
+}
+
+type AnalyticsInjection = {
+  head: string;
+  body: string;
+};
+
+function getAnalyticsInjection(): AnalyticsInjection | null {
+  const containerId = getGtmContainerId();
+  if (containerId) {
+    return {
+      head: getGtmHeadScript(containerId),
+      body: getGtmBodyFallback(containerId),
+    };
+  }
+
+  const gaScript = getGaScript();
+  return gaScript ? { head: gaScript, body: "" } : null;
+}
+
+const HEAD_CLOSE_PATTERN = /<\/head>/i;
+const BODY_OPEN_PATTERN = /<body\b[^>]*>/i;
+
 /**
  * Add the configured analytics scripts to a complete HTML document.
  *
@@ -82,38 +138,111 @@ function getGaScript(): string | null {
  * auth guard and need the same injection path.
  */
 export function injectAnalyticsIntoHtml(html: string): string {
-  const script = getGaScript();
-  if (!script) return html;
-  const headCloseIdx = html.indexOf("</head>");
-  if (headCloseIdx === -1) return html;
-  return html.slice(0, headCloseIdx) + script + html.slice(headCloseIdx);
+  const injection = getAnalyticsInjection();
+  if (!injection) return html;
+
+  const headCloseMatch = HEAD_CLOSE_PATTERN.exec(html);
+  if (!headCloseMatch || headCloseMatch.index === undefined) return html;
+
+  let output =
+    html.slice(0, headCloseMatch.index) +
+    injection.head +
+    html.slice(headCloseMatch.index);
+
+  if (injection.body) {
+    const bodyOpenMatch = BODY_OPEN_PATTERN.exec(output);
+    if (bodyOpenMatch && bodyOpenMatch.index !== undefined) {
+      const bodyEnd = bodyOpenMatch.index + bodyOpenMatch[0].length;
+      output =
+        output.slice(0, bodyEnd) + injection.body + output.slice(bodyEnd);
+    }
+  }
+
+  return output;
 }
 
-export function wrapWithAnalytics(body: ReadableStream): ReadableStream {
-  const scripts = [getGaScript()].filter(Boolean).join("");
-  if (!scripts) return body;
+export function wrapWithAnalytics(
+  body: ReadableStream<Uint8Array>,
+): ReadableStream<Uint8Array> {
+  const injection = getAnalyticsInjection();
+  if (!injection) return body;
 
   const decoder = new TextDecoder();
   const encoder = new TextEncoder();
-  let injected = false;
+  let pending = "";
+  let headInjected = false;
+  let bodyInjected = !injection.body;
 
   return body.pipeThrough(
-    new TransformStream({
+    new TransformStream<Uint8Array, Uint8Array>({
       transform(chunk, controller) {
-        if (injected) {
-          controller.enqueue(chunk);
-          return;
+        pending += decoder.decode(chunk, { stream: true });
+
+        if (!headInjected) {
+          const headCloseMatch = HEAD_CLOSE_PATTERN.exec(pending);
+          if (!headCloseMatch || headCloseMatch.index === undefined) return;
+
+          const headEnd = headCloseMatch.index + headCloseMatch[0].length;
+          controller.enqueue(
+            encoder.encode(
+              pending.slice(0, headCloseMatch.index) +
+                injection.head +
+                pending.slice(headCloseMatch.index, headEnd),
+            ),
+          );
+          pending = pending.slice(headEnd);
+          headInjected = true;
         }
-        const text = decoder.decode(chunk, { stream: true });
-        const headCloseIdx = text.indexOf("</head>");
-        if (headCloseIdx !== -1) {
-          const modified =
-            text.slice(0, headCloseIdx) + scripts + text.slice(headCloseIdx);
-          controller.enqueue(encoder.encode(modified));
-          injected = true;
-        } else {
-          controller.enqueue(chunk);
+
+        if (!bodyInjected) {
+          const bodyOpenMatch = BODY_OPEN_PATTERN.exec(pending);
+          if (!bodyOpenMatch || bodyOpenMatch.index === undefined) return;
+
+          const bodyEnd = bodyOpenMatch.index + bodyOpenMatch[0].length;
+          controller.enqueue(
+            encoder.encode(pending.slice(0, bodyEnd) + injection.body),
+          );
+          pending = pending.slice(bodyEnd);
+          bodyInjected = true;
         }
+
+        if (pending) {
+          controller.enqueue(encoder.encode(pending));
+          pending = "";
+        }
+      },
+      flush(controller) {
+        pending += decoder.decode();
+
+        if (!headInjected) {
+          const headCloseMatch = HEAD_CLOSE_PATTERN.exec(pending);
+          if (headCloseMatch && headCloseMatch.index !== undefined) {
+            const headEnd = headCloseMatch.index + headCloseMatch[0].length;
+            controller.enqueue(
+              encoder.encode(
+                pending.slice(0, headCloseMatch.index) +
+                  injection.head +
+                  pending.slice(headCloseMatch.index, headEnd),
+              ),
+            );
+            pending = pending.slice(headEnd);
+            headInjected = true;
+          }
+        }
+
+        if (headInjected && !bodyInjected) {
+          const bodyOpenMatch = BODY_OPEN_PATTERN.exec(pending);
+          if (bodyOpenMatch && bodyOpenMatch.index !== undefined) {
+            const bodyEnd = bodyOpenMatch.index + bodyOpenMatch[0].length;
+            controller.enqueue(
+              encoder.encode(pending.slice(0, bodyEnd) + injection.body),
+            );
+            pending = pending.slice(bodyEnd);
+            bodyInjected = true;
+          }
+        }
+
+        if (pending) controller.enqueue(encoder.encode(pending));
       },
     }),
   );