diff --git a/idea.md b/idea.md
new file mode 100644
index 0000000000..c955710a90
--- /dev/null
+++ b/idea.md
@@ -0,0 +1,772 @@
+# Proposal: `langchain deploy` for TypeScript-native agent deployment
+
+## Executive summary
+
+TypeScript developers should be able to deploy LangChain and LangGraph agents with the same feeling they get from Vite, Next.js, or Astro: write a typed config file, add extension packages, run one command, and get a production-ready deployment.
+
+The proposed primitive is a TypeScript deployment compiler and CLI that lives in the LangChain ecosystem:
+
+```ts
+// langchain.config.ts
+import { defineDeployment } from "langchain/deploy";
+import { discord } from "@langchain/deploy-discord";
+import { web } from "@langchain/deploy-web";
+
+export default defineDeployment({
+  agents: {
+    support: "./src/agents/support.ts",
+    research: "./src/agents/research.ts:graph",
+  },
+  extensions: [
+    web({ agent: "support" }),
+    discord({ agent: "support", route: "/discord" }),
+  ],
+});
+```
+
+Under the hood, this does not require a new LangSmith runtime. It compiles into the artifacts LangSmith Deployment already supports today:
+
+- A `langgraph.json` file with `graphs`, `env`, `node_version`, `http.app`, `store`, `checkpointer`, `webhooks`, and other supported fields.
+- A generated Hono app that aggregates all extension routes into the single `http.app` entrypoint LangSmith already accepts.
+- Optional generated wrapper modules for intuitive agent paths that omit the `:exportName` suffix.
+- CLI calls to the existing LangGraph TypeScript CLI for `dev`, `build`, `dockerfile`, `up`, and `deploy`.
+
+The product idea is not "a new hosting platform." It is "deployment ergonomics for the hosting platform LangSmith already has."
+
+## What LangSmith Deployment supports today
+
+Current LangSmith Deployment has the right primitives, but they are exposed at a low level:
+
+- Applications are described by `langgraph.json`.
+- A deployment can contain multiple graphs under the `graphs` key.
+- TypeScript deployments use `node_version: 20` and graph paths such as `./src/graph.ts:graph`.
+- `.env` files are already supported through the `env` key, and the deploy CLI also reads API keys from `.env`.
+- Cloud deployments can be created or updated with `langgraph deploy`.
+- Local development works with `npx @langchain/langgraph-cli dev`.
+- Docker images can be built with `npx @langchain/langgraph-cli build`.
+- Custom TypeScript routes are supported by exporting a Hono app and pointing `http.app` at it.
+- Agent Server already exposes durable runs, threads, assistants, streaming, stores, webhooks, MCP, A2A, CORS, route toggles, and deployment logs.
+
+The missing piece is not capability. The missing piece is a developer-facing composition layer.
+
+Today, if a TypeScript developer wants multiple custom endpoints or integrations, they must hand-write an `app.ts`, import every integration directly, manually wire the routes, keep `langgraph.json` in sync, remember the Hono conventions, and understand how `http.app` interacts with deployment. That is workable for advanced users, but it is not an ecosystem primitive.
+
+## The primitive
+
+Call the primitive **LangChain Deploy**.
+
+It has three parts:
+
+1. `defineDeployment()` for typed deployment configuration.
+2. `defineExtension()` for reusable extension packages.
+3. `langchain deploy` for generating artifacts and delegating to the existing LangGraph CLI.
+
+This gives TypeScript developers a first-class deploy experience while preserving LangSmith's existing deployment model.
+
+## Design principles
+
+- Compile to current infrastructure. The package should emit `langgraph.json`, Hono route code, and optional wrapper files. It should not require Agent Server features that do not exist.
+- Keep the escape hatch. Developers can still provide raw `langgraph` config, a custom Hono app, Dockerfile lines, or direct CLI flags.
+- Make the common path small. A one-agent deployment should need a config file and one command.
+- Make extension authors powerful but bounded. Extensions can add custom routes, UI assets, webhook handlers, CORS settings, environment requirements, and generated files. They should not replace the Agent Server runtime.
+- Treat agents as named resources. Extension code should get typed graph or assistant names from the deployment context, then use the existing LangGraph SDK client.
+- Prefer generation over magic. Generated artifacts should be inspectable and committed or ignored depending on project preference.
+
+## Developer experience
+
+### Create a deployment
+
+```bash
+npm create langchain-agent
+cd my-agent
+npm run deploy:dev
+```
+
+The generated project contains:
+
+```txt
+my-agent/
+  langchain.config.ts
+  package.json
+  .env
+  src/
+    agents/
+      support.ts
+```
+
+The initial config is small:
+
+```ts
+import { defineDeployment } from "langchain/deploy";
+
+export default defineDeployment({
+  agents: {
+    support: "./src/agents/support.ts",
+  },
+});
+```
+
+`"./src/agents/support.ts"` is intentionally nicer than `./src/agents/support.ts:graph`. The compiler can generate a wrapper module when a file uses a default export, or resolve a named export when one is provided:
+
+```ts
+export default graph;
+```
+
+becomes:
+
+```json
+{
+  "graphs": {
+    "support": "./.langchain/generated/agents/support.ts:graph"
+  }
+}
+```
+
+If the developer wants exact control, they can write:
+
+```ts
+export default defineDeployment({
+  agents: {
+    support: "./src/agents/support.ts:supportGraph",
+  },
+});
+```
+
+### Add extensions
+
+Extensions feel like Vite plugins:
+
+```ts
+import { defineDeployment } from "langchain/deploy";
+import { discord } from "@langchain/deploy-discord";
+import { web } from "@langchain/deploy-web";
+import { slack } from "@acme/langchain-deploy-slack";
+
+export default defineDeployment({
+  agents: {
+    support: "./src/agents/support.ts",
+    research: "./src/agents/research.ts",
+  },
+  extensions: [
+    web({
+      agent: "support",
+      title: "Support agent",
+      route: "/",
+    }),
+    discord({
+      agent: "support",
+      route: "/discord",
+    }),
+    slack({
+      agent: "research",
+      route: "/slack/events",
+    }),
+  ],
+});
+```
+
+The developer does not create `app.ts`. The compiler creates one generated Hono app and registers it through `http.app`.
+
+### Deploy by environment
+
+```ts
+export default defineDeployment({
+  agents: {
+    support: "./src/agents/support.ts",
+  },
+  targets: {
+    dev: {
+      name: "support-agent-dev",
+      type: "dev",
+      env: ".env",
+    },
+    production: {
+      name: "support-agent",
+      type: "prod",
+      env: ".env.production",
+      hostUrl: "https://api.host.langchain.com",
+    },
+  },
+});
+```
+
+Then:
+
+```bash
+langchain deploy --target dev
+langchain deploy --target production
+langchain deploy logs --target production --follow
+```
+
+This maps to current CLI behavior:
+
+- `name` maps to `--name` or `LANGSMITH_DEPLOYMENT_NAME`.
+- `type` maps to `--deployment-type`.
+- `hostUrl` maps to `LANGGRAPH_HOST_URL`.
+- `env` maps to the generated `langgraph.json` `env` field.
+- The generated config path is passed with `-c`.
+
+## Generated artifacts
+
+Given:
+
+```ts
+export default defineDeployment({
+  agents: {
+    support: "./src/agents/support.ts",
+  },
+  extensions: [
+    web({ agent: "support" }),
+    discord({ agent: "support", route: "/discord" }),
+  ],
+});
+```
+
+The compiler writes:
+
+```txt
+.langchain/
+  generated/
+    langgraph.dev.json
+    app.ts
+    agents/
+      support.ts
+    manifest.json
+    types.d.ts
+```
+
+`langgraph.dev.json`:
+
+```json
+{
+  "$schema": "https://langgra.ph/schema.json",
+  "node_version": "20",
+  "dependencies": ["."],
+  "graphs": {
+    "support": "./.langchain/generated/agents/support.ts:graph"
+  },
+  "env": ".env",
+  "http": {
+    "app": "./.langchain/generated/app.ts:app"
+  }
+}
+```
+
+`app.ts`:
+
+```ts
+import { Hono } from "hono";
+import { createDeploymentContext } from "langchain/deploy/runtime";
+import extension0 from "@langchain/deploy-web";
+import extension1 from "@langchain/deploy-discord";
+
+export const app = new Hono();
+
+const ctx = createDeploymentContext({
+  app,
+  agents: {
+    support: {
+      id: "support",
+    },
+  },
+});
+
+extension0.setup(ctx, { agent: "support" });
+extension1.setup(ctx, { agent: "support", route: "/discord" });
+```
+
+The important trick: LangSmith only sees one Hono app. The developer sees many extensions.
+
+## Extension API
+
+An extension is a typed factory that receives options and returns hooks.
+
+```ts
+import { defineExtension } from "langchain/deploy";
+import { Client } from "@langchain/langgraph-sdk";
+
+export default function discord(options: DiscordOptions) {
+  return defineExtension({
+    name: "@langchain/deploy-discord",
+
+    config(ctx) {
+      ctx.requireEnv("DISCORD_PUBLIC_KEY");
+      ctx.requireEnv("DISCORD_BOT_TOKEN");
+    },
+
+    setup(ctx) {
+      ctx.route.post(options.route ?? "/discord", async (c) => {
+        const event = await c.req.json();
+        const client = new Client(ctx.clientOptions(c));
+
+        const result = await client.runs.wait(null, options.agent, {
+          input: {
+            messages: [
+              {
+                role: "user",
+                content: event.message,
+              },
+            ],
+          },
+          raiseError: true,
+        });
+
+        return c.json(result);
+      });
+    },
+  });
+}
+```
+
+The API should feel familiar to Vite users but map to deployment concepts:
+
+```ts
+type DeploymentExtension = {
+  name: string;
+  enforce?: "pre" | "post";
+  apply?: "dev" | "build" | "deploy" | ((target: DeploymentTarget) => boolean);
+
+  config?: (ctx: ConfigContext) => void | Partial<DeploymentConfig>;
+  configResolved?: (ctx: ResolvedConfigContext) => void;
+  generate?: (ctx: GenerateContext) => void | Promise<void>;
+  setup?: (ctx: RuntimeContext) => void;
+};
+```
+
+### Extension capabilities
+
+Extensions can use current LangSmith infrastructure in these ways:
+
+- Add Hono routes to the generated app.
+- Add route-local middleware for the routes they own.
+- Add static assets or generated UI bundles served by Hono routes.
+- Declare required environment variables.
+- Add `http.cors` settings.
+- Add `webhooks` policy.
+- Add `store` and `checkpointer` configuration.
+- Add `dockerfile_lines` for OS-level dependencies.
+- Emit generated files that are included in the project dependency.
+- Expose LangGraph SDK client configuration for invoking deployed agents through the Agent Server API.
+
+Extensions should not depend on unavailable runtime hooks. For example, TypeScript custom routes are supported today through Hono, but Python-only middleware and lifespan features should not be presented as TypeScript extension capabilities unless Agent Server adds that support.
+
+## Agent access from extensions
+
+Extensions should use the existing LangGraph TypeScript SDK instead of a new deployment-specific agent interface.
+
+```ts
+import { Client } from "@langchain/langgraph-sdk";
+
+export default defineExtension({
+  name: "my-extension",
+
+  setup(ctx) {
+    // `ctx` is the runtime context passed to this extension by the
+    // generated deployment app. It is not a global variable.
+    ctx.route.post("/ask", async (c) => {
+      const client = new Client(ctx.clientOptions(c));
+      const thread = client.threads.stream({ assistantId: ctx.agents.support });
+
+      await thread.run.start({
+        input: {
+          messages: [{ role: "user", content: "hello" }],
+        },
+      });
+
+      const output = await thread.output;
+      await thread.close();
+
+      return c.json(output);
+    });
+  },
+});
+```
+
+Here, `"support"` is the graph ID from the `agents` map. Agent Server already treats graph IDs as default assistant IDs, and the SDK already exposes the concepts extension authors need: assistants, threads, runs, streaming, store access, and configuration.
+
+The deployment primitive should only provide the missing context required to construct the SDK client inside generated Hono routes:
+
+```ts
+type RuntimeContext = {
+  route: Hono;
+  agents: {
+    support: "support";
+    research: "research";
+  };
+  clientOptions(c?: HonoContext): ConstructorParameters<typeof Client>[0];
+};
+```
+
+For real-time routes and UI extensions, extension authors can use the SDK's recommended thread-centric streaming API:
+
+```ts
+const client = new Client(ctx.clientOptions(c));
+const thread = client.threads.stream({ assistantId: ctx.agents.support });
+
+await thread.run.start({
+  input: {
+    messages: [{ role: "user", content: "hello" }],
+  },
+});
+
+for await (const message of thread.messages) {
+  // Forward tokens to a browser, Discord interaction, Slack response, etc.
+}
+
+await thread.close();
+```
+
+For webhook-style or background integrations, authors can use non-streaming SDK methods such as `client.runs.create(...)`, `client.runs.wait(...)`, and `client.threads.create(...)`.
+
+Implementation options:
+
+- For local dev, `ctx.clientOptions(c)` can derive the current server origin from the Hono request and point `@langchain/langgraph-sdk` at the local dev server.
+- For deployed routes, `ctx.clientOptions(c)` can point the SDK at the same deployment URL when available, or use relative Agent Server endpoints when the runtime supports it.
+- The context should not re-expose SDK methods. It should make `new Client(...)` easy and type-safe.
+- Do not use `RemoteGraph` to call the same deployment from inside a graph. Existing docs warn against same-deployment `RemoteGraph` composition because it can cause resource exhaustion. Route handlers should use the Agent Server run APIs.
+
+This is already possible by hand today. The primitive packages the setup and keeps extension code aligned with the first-party SDK.
+
+## CLI
+
+The CLI should be a thin, friendly wrapper around the existing LangGraph CLI.
+
+```bash
+langchain deploy dev
+langchain deploy build
+langchain deploy dockerfile Dockerfile
+langchain deploy up
+langchain deploy --target production
+langchain deploy logs --target production --follow
+langchain deploy doctor
+```
+
+### `langchain deploy dev`
+
+Generates artifacts and runs:
+
+```bash
+npx @langchain/langgraph-cli dev -c .langchain/generated/langgraph.dev.json
+```
+
+### `langchain deploy build`
+
+Generates artifacts and runs:
+
+```bash
+npx @langchain/langgraph-cli build -c .langchain/generated/langgraph.production.json -t <tag>
+```
+
+### `langchain deploy`
+
+Generates artifacts and runs:
+
+```bash
+npx @langchain/langgraph-cli deploy -c .langchain/generated/langgraph.production.json --name <name> --deployment-type <type>
+```
+
+### `langchain deploy doctor`
+
+Validates the project before the slow deployment path:
+
+- Confirms every agent path resolves.
+- Confirms graph exports are usable.
+- Confirms extension names are unique.
+- Confirms route collisions.
+- Confirms required environment variables exist for the selected target.
+- Warns if a custom route shadows an Agent Server route.
+- Warns if an extension adds Dockerfile lines that require Docker for local builds.
+- Prints the generated `langgraph.json` path.
+
+This is a major developer-experience win because most deployment failures today are configuration or packaging mistakes.
+
+## Config shape
+
+```ts
+type LangChainDeploymentConfig = {
+  agents: Record<string, AgentEntry>;
+  extensions?: ExtensionInstance[];
+  targets?: Record<string, DeploymentTarget>;
+
+  env?: true | string | Record<string, string>;
+  nodeVersion?: 20;
+  apiVersion?: string;
+
+  http?: {
+    cors?: CorsConfig;
+    configurableHeaders?: HeaderPolicy;
+    loggingHeaders?: HeaderPolicy;
+    enableCustomRouteAuth?: boolean;
+    disableMeta?: boolean;
+    disableAssistants?: boolean;
+    disableRuns?: boolean;
+    disableThreads?: boolean;
+    disableStore?: boolean;
+    disableUi?: boolean;
+    disableMcp?: boolean;
+    disableA2a?: boolean;
+    disableWebhooks?: boolean;
+    mountPrefix?: string;
+  };
+
+  store?: StoreConfig;
+  checkpointer?: CheckpointerConfig;
+  webhooks?: WebhooksConfig;
+  dockerfileLines?: string[];
+
+  raw?: Record<string, unknown>;
+};
+```
+
+The `raw` escape hatch lets advanced users pass through LangGraph configuration fields before the wrapper supports first-class types.
+
+## Environment model
+
+By default:
+
+```ts
+defineDeployment({
+  agents: {
+    support: "./src/agents/support.ts",
+  },
+});
+```
+
+compiles with:
+
+```json
+{
+  "env": ".env"
+}
+```
+
+if `.env` exists.
+
+For multiple targets:
+
+```ts
+defineDeployment({
+  targets: {
+    dev: { env: ".env" },
+    staging: { env: ".env.staging" },
+    production: { env: ".env.production" },
+  },
+});
+```
+
+Each target gets a generated `langgraph.<target>.json`.
+
+Secrets remain normal LangSmith deployment environment variables. The primitive can read `.env` for local dev and CLI deploys, but it should not invent a separate secrets store. If a team uses the LangSmith UI to manage production secrets, the target can set:
+
+```ts
+production: {
+  name: "support-agent",
+  type: "prod",
+  env: false,
+}
+```
+
+## Extension examples
+
+Extensions should be described as packaged deployment capabilities, not as thin option bags. Each extension owns a small slice of the generated Hono app and uses the LangGraph SDK to talk to one or more deployed agents. The developer configures intent: which agent, which route, and which integration-specific options. The extension handles the repeated deployment plumbing.
+
+### Custom web UI
+
+```ts
+web({
+  agent: "support",
+  route: "/",
+  title: "Support agent",
+  theme: {
+    accent: "#1C3D5A",
+  },
+});
+```
+
+What it does:
+
+- Serves a small chat UI from the same Agent Server deployment.
+- Opens a streaming route that calls `client.threads.stream({ assistantId: "support" })`.
+- Handles thread creation, message submission, token streaming, interrupt display, and final state rendering.
+- Adds any required static assets to the generated deployment output.
+
+Why this is helpful:
+
+Without the extension, a developer has to create a frontend bundle, serve it from Hono, define an API route, instantiate the LangGraph SDK client, stream events, and keep that custom app wired into `langgraph.json`. With the extension, a working UI is attached to the deployed agent with one config entry. The route and agent are explicit, so the compiler can catch route conflicts and invalid agent names.
+
+### Discord
+
+```ts
+discord({
+  agent: "support",
+  route: "/discord/interactions",
+});
+```
+
+What it does:
+
+- Adds the endpoint Discord calls for interaction events.
+- Declares required environment variables such as the Discord public key and bot token.
+- Verifies the incoming request, converts a Discord message into the agent's input format, calls the configured agent with the LangGraph SDK, and formats the response for Discord.
+- Optionally maps Discord channel or user IDs to LangGraph thread IDs so conversations stay stateful.
+
+Why this is helpful:
+
+Discord integration has a lot of boilerplate that is unrelated to agent logic: request verification, response deadlines, thread mapping, retries, and route setup. The deployment config makes the binding obvious: Discord events at `/discord/interactions` go to the `support` agent. The extension author packages the operational details once, and every agent developer reuses the same deployment behavior.
+
+### WhatsApp or Twilio
+
+```ts
+twilioWhatsApp({
+  agent: "support",
+  route: "/twilio/whatsapp",
+});
+```
+
+What it does:
+
+- Adds the webhook endpoint Twilio calls for inbound WhatsApp messages.
+- Declares required Twilio credentials and webhook verification settings.
+- Converts inbound messages into LangGraph run input.
+- Uses the SDK to continue a thread for that phone number or start a stateless run.
+- Returns TwiML or calls Twilio's API to send an async response.
+
+Why this is helpful:
+
+The deployment becomes the integration backend. The developer does not need a separate Express app, serverless function, or queue just to connect Twilio to the agent. The extension can standardize phone-number-to-thread mapping while still letting the developer choose which deployed agent handles the conversation.
+
+### Agent-to-app API
+
+```ts
+api({
+  routes: {
+    "/api/ask": {
+      agent: "support",
+      input: z.object({ message: z.string() }),
+      stream: true,
+    },
+  },
+});
+```
+
+What it does:
+
+- Adds a public or private HTTP endpoint for an application frontend.
+- Validates request bodies with the provided schema.
+- Converts the validated body into agent input.
+- Streams the result or returns a final JSON response using the SDK.
+- Can generate a typed client helper for the app that calls `/api/ask`.
+
+Why this is helpful:
+
+Many teams do not want to expose raw Agent Server endpoints directly to their product frontend. They want an application-specific API such as `/api/ask`, `/api/triage`, or `/api/search`. This extension gives them that route without hiding LangSmith. It is still just a Hono route over Agent Server runs, but the repetitive validation and streaming glue are generated from a typed declaration.
+
+### Deploy-time policy
+
+```ts
+policy({
+  disableDocsInProduction: true,
+  requireWebhookHttps: true,
+  corsOrigins: ["https://app.example.com"],
+});
+```
+
+What it does:
+
+- Applies deployment configuration that already exists in `langgraph.json`.
+- Sets production CORS rules.
+- Disables metadata or docs routes for production targets.
+- Restricts webhook destinations to HTTPS or approved domains.
+- Fails `langchain deploy doctor` if a target violates the policy.
+
+Why this is helpful:
+
+These settings are easy to forget because they are not part of the agent's graph code. A policy extension lets a platform team publish deployment standards once and have every agent project apply them consistently. It compiles to existing `http` and `webhooks` configuration, so it does not require new LangSmith infrastructure.
+
+## Why this is compelling
+
+This creates a marketplace-shaped extension surface without creating a new platform surface.
+
+Vite became powerful because framework authors could package conventions as plugins. Next.js became approachable because routing, build output, and deployment conventions are encoded into the framework. LangSmith already has the runtime for durable agents, but TypeScript developers still need to assemble deployment details manually.
+
+LangChain Deploy can make the unit of sharing "an agent deployment extension":
+
+- `@langchain/deploy-web`
+- `@langchain/deploy-discord`
+- `@langchain/deploy-slack`
+- `@langchain/deploy-whatsapp`
+- `@langchain/deploy-twilio`
+- `@langchain/deploy-auth0`
+- `@langchain/deploy-openapi`
+- `@langchain/deploy-admin`
+
+Each package is just TypeScript, Hono routes, generated files, and current LangSmith config. That means the ecosystem can move quickly without waiting for new Agent Server primitives.
+
+## What should be out of scope
+
+- A new runtime separate from Agent Server.
+- A second deployment backend.
+- A custom secrets manager.
+- A new graph execution model.
+- Same-deployment `RemoteGraph` composition from inside graph execution.
+- TypeScript middleware or lifespan claims beyond what Agent Server supports for TypeScript custom routes.
+- Automatic production secret upload unless the existing Control Plane API supports it directly.
+
+## Implementation plan
+
+### Phase 1: Compiler and CLI
+
+- Add `defineDeployment()` and config types.
+- Load `langchain.config.ts` with a TS runtime or bundler.
+- Generate `langgraph.json`.
+- Generate wrappers for default-export agents.
+- Detect `.env`.
+- Delegate `dev`, `build`, `up`, and `deploy` to the LangGraph CLI.
+- Add `doctor`.
+
+### Phase 2: Extension runtime
+
+- Add `defineExtension()`.
+- Generate one Hono `app.ts`.
+- Add route registration, env requirements, route collision detection, and target-aware `apply`.
+- Add `ctx.clientOptions()` and typed `ctx.agents` so extensions can construct `@langchain/langgraph-sdk` clients directly.
+- Ship `@langchain/deploy-web` as the reference extension.
+
+### Phase 3: Ecosystem
+
+- Publish extension authoring docs.
+- Add templates for Discord, Slack, WhatsApp, and custom UI extensions.
+- Add a gallery of extension packages.
+- Add generated type declarations for route and agent names.
+
+### Phase 4: LangSmith UI integration
+
+- Surface generated manifest metadata in deployment details if supported.
+- Show extension names and routes in build logs or deployment metadata.
+- Link custom routes from the deployment page.
+
+This phase should remain optional. The core value does not depend on LangSmith UI changes.
+
+## Open questions
+
+- Should the package live at `langchain/deploy`, `@langchain/deploy`, or inside `@langchain/langgraph-cli`?
+- Should generated artifacts be committed, ignored, or configurable?
+- Should extension route order follow Vite-style `enforce`, array order only, or both?
+- Should the default agent export convention prefer `default`, `graph`, or require explicit symbols in strict mode?
+- Can Agent Server expose an officially supported in-process helper for custom routes to create runs without HTTP loopback?
+- Should the CLI support GitHub-based deployments, or only local build and deploy flows at first?
+- Should production `.env` loading be opt-in to avoid accidental secret inclusion in generated artifacts?
+
+## The pitch
+
+LangSmith Deployment already has the runtime. LangChain Deploy would provide the product-shaped developer interface.
+
+The mental model becomes:
+
+```txt
+agents + extensions + targets => LangSmith deployment artifacts
+```
+
+For a TypeScript developer, that is a much stronger primitive than "write `langgraph.json`, write one custom Hono app, wire every integration by hand, then remember the right CLI flags."
+
+It makes LangSmith Deployment feel native to the TypeScript ecosystem while staying honest about what the platform can run today.
diff --git a/pipeline/core/builder.py b/pipeline/core/builder.py
index 3d07a0e871..4e0b420ef3 100644
--- a/pipeline/core/builder.py
+++ b/pipeline/core/builder.py
@@ -199,6 +199,10 @@ def _add_suggested_edits_link(self, content: str, input_path: Path) -> str:
             if relative_path.parts == ("index.mdx",):
                 return content
 
+            # Snippet files are imported into other pages — never append page footers.
+            if "snippets" in relative_path.parts:
+                return content
+
             # Construct the GitHub URLs
             edit_url = (
                 f"https://github.com/langchain-ai/docs/edit/main/src/{relative_path}"
diff --git a/pipeline/preprocessors/link_map.py b/pipeline/preprocessors/link_map.py
index be28766772..5317230ba0 100644
--- a/pipeline/preprocessors/link_map.py
+++ b/pipeline/preprocessors/link_map.py
@@ -479,7 +479,15 @@ class LinkMap(TypedDict):
             "ls.logFeedback": "https://reference.langchain.com/javascript/modules/langsmith.vitest.html#logFeedback",
             "Client.listExamples": "https://reference.langchain.com/javascript/classes/langsmith.client.Client.html#listexamples",
             "Example": "https://reference.langchain.com/javascript/interfaces/langsmith.Example.html",
+            "HITLRequest": "https://reference.langchain.com/javascript/langchain/index/HITLRequest",
+            "MessageMetadata": "https://reference.langchain.com/javascript/langchain-react/MessageMetadata",
+            "SubagentDiscoverySnapshot": "https://reference.langchain.com/javascript/langchain-react/SubagentDiscoverySnapshot",
+            "SubgraphDiscoverySnapshot": "https://reference.langchain.com/javascript/langchain-react/SubgraphDiscoverySnapshot",
+            "SubmissionQueueEntry": "https://reference.langchain.com/javascript/langchain-react/SubmissionQueueEntry",
             "useStream": "https://reference.langchain.com/javascript/langchain-react/index/useStream",
+            "injectStream": "https://reference.langchain.com/javascript/langchain-angular/injectStream",
+            "client.runs.cancel": "https://reference.langchain.com/javascript/langchain-langgraph-sdk/client/RunsClient/cancel",
+            "ThreadStateJS": "https://reference.langchain.com/javascript/langchain-langgraph-sdk/index/ThreadState",
         },
     },
     {
@@ -534,10 +542,13 @@ class LinkMap(TypedDict):
             "wrapGemini": "functions/langsmith.wrappers_gemini.wrapGemini.html",
             # LangGraph SDK references
             "Auth": "langchain-langgraph-sdk/auth/Auth",
+            "client.runs.cancel": "langchain-langgraph-sdk/client/RunsClient/cancel",
             "client.runs.stream": "classes/_langchain_langgraph-sdk.client.RunsClient.html#stream",
             "client.runs.wait": "classes/_langchain_langgraph-sdk.client.RunsClient.html#wait",
             "client.threads.get_history": "classes/_langchain_langgraph-sdk.client.ThreadsClient.html#getHistory",
             "client.threads.update_state": "classes/_langchain_langgraph-sdk.client.ThreadsClient.html#updateState",
+            "ThreadState": "langchain-langgraph-sdk/index/ThreadState",
+            "ThreadStateJS": "langchain-langgraph-sdk/index/ThreadState",
             # LangGraph checkpoint references
             "BaseCheckpointSaver": "langchain-langgraph/index/BaseCheckpointSaver",
             "BaseStore": "langchain-core/stores/BaseStore",
@@ -591,6 +602,7 @@ class LinkMap(TypedDict):
             "createSummarizationMiddleware": "deepagents/middleware/createSummarizationMiddleware",
             "TodoListMiddleware": "langchain/index/todoListMiddleware",
             "HumanInTheLoopMiddleware": "langchain/middleware/humanInTheLoopMiddleware",
+            "HITLRequest": "langchain/index/HITLRequest",
             "AnthropicPromptCachingMiddleware": "langchain/index/anthropicPromptCachingMiddleware",
             "SummarizationMiddleware": "langchain/index/summarizationMiddleware",
             "createMiddleware": "langchain/index/createMiddleware",
@@ -672,7 +684,12 @@ class LinkMap(TypedDict):
             "listRuns": "langsmith/client/Client/listRuns",
             "Client.listExamples": "classes/langsmith.client.Client.html#listexamples",
             "Example": "langchain-core/prompts/Example",
+            "MessageMetadata": "langchain-react/MessageMetadata",
+            "SubagentDiscoverySnapshot": "langchain-react/SubagentDiscoverySnapshot",
+            "SubgraphDiscoverySnapshot": "langchain-react/SubgraphDiscoverySnapshot",
+            "SubmissionQueueEntry": "langchain-react/SubmissionQueueEntry",
             "useStream": "langchain-react/index/useStream",
+            "injectStream": "langchain-angular/injectStream",
         },
     },
     {
diff --git a/src/code-samples/langchain/middleware-dynamic-prompt.ts b/src/code-samples/langchain/middleware-dynamic-prompt.ts
index 6a880d6c22..be374e1b81 100644
--- a/src/code-samples/langchain/middleware-dynamic-prompt.ts
+++ b/src/code-samples/langchain/middleware-dynamic-prompt.ts
@@ -20,7 +20,7 @@ const agent = createAgent({
 
 // :remove-start:
 import { FakeListChatModel } from "@langchain/core/utils/testing";
-import type { BaseMessage } from "@langchain/core/messages";
+import type { BaseMessage } from "langchain";
 
 function flattenMessageContent(content: unknown): string {
   if (typeof content === "string") return content;
diff --git a/src/oss/deepagents/frontend/overview.mdx b/src/oss/deepagents/frontend/overview.mdx
index 88778b8c51..0f493699fe 100644
--- a/src/oss/deepagents/frontend/overview.mdx
+++ b/src/oss/deepagents/frontend/overview.mdx
@@ -3,11 +3,22 @@ title: Overview
 description: Build UIs that display real-time subagent streams, task progress, and sandbox for Deep Agents
 ---
 
-Build frontends that visualize deep agent workflows in real time. These patterns show how to render subagent progress, task planning, streaming content, and IDE-like sandbox experiences from agents created with `createDeepAgent`.
+Build frontends that visualize deep agent workflows in real time. These patterns
+show how to render subagent progress, task planning, streaming content, and
+IDE-like sandbox experiences from agents created with `createDeepAgent`.
+
+Deep agents are most useful when the UI makes delegation visible. Instead of
+showing a single opaque assistant bubble, the LangChain SDKs expose the
+coordinator, subagent discovery, custom state, and sandbox-backed artifacts so
+users can inspect how a long-running task is being decomposed and completed.
+
+<Note>
+These patterns use the v1 frontend SDK packages. If you are using earlier versions, see the migration guides for [React](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-react/docs/v1-migration.md), [Vue](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-vue/docs/v1-migration.md), [Svelte](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-svelte/docs/v1-migration.md), and [Angular](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-angular/docs/v1-migration.md).
+</Note>
 
 ## Architecture
 
-Deep Agents use a coordinator-worker architecture. The main agent plans tasks and delegates to specialized subagents, each running in isolation. On the frontend, `useStream` surfaces both the coordinator's messages and each subagent's streaming state.
+Deep Agents use a coordinator-worker architecture. The main agent plans tasks and delegates to specialized subagents, each running in isolation. On the frontend, the v1 stream handle surfaces coordinator messages on the root stream and exposes subagent discovery snapshots for scoped subagent views.
 
 ```mermaid
 %%{
@@ -20,11 +31,15 @@ Deep Agents use a coordinator-worker architecture. The main agent plans tasks an
 }%%
 graph LR
   FRONTEND["useStream()"]
+  SELECTORS["selector helpers"]
   BACKEND["createDeepAgent()"]
   SUB1["Subagent A"]
   SUB2["Subagent B"]
 
   BACKEND --"stream"--> FRONTEND
+  FRONTEND --"scope by subagent"--> SELECTORS
+  SELECTORS --> SUB1
+  SELECTORS --> SUB2
   FRONTEND --"submit"--> BACKEND
   BACKEND --"delegate"--> SUB1
   BACKEND --"delegate"--> SUB2
@@ -34,7 +49,7 @@ graph LR
   classDef blueHighlight fill:#E5F4FF,stroke:#006DDD,color:#030710;
   classDef greenHighlight fill:#F6FFDB,stroke:#6E8900,color:#2E3900;
   classDef purpleHighlight fill:#EBD0F0,stroke:#885270,color:#441E33;
-  class FRONTEND blueHighlight;
+  class FRONTEND,SELECTORS blueHighlight;
   class BACKEND greenHighlight;
   class SUB1,SUB2 purpleHighlight;
 ```
@@ -66,7 +81,7 @@ import { createDeepAgent } from "deepagents";
 
 const agent = createDeepAgent({
   tools: [getWeather],
-  system: "You are a helpful assistant",
+  systemPrompt: "You are a helpful assistant",
   subagents: [
     {
       name: "researcher",
@@ -78,7 +93,7 @@ const agent = createDeepAgent({
 
 :::
 
-On the frontend, connect with `useStream` the same way as with `createAgent`. Deep agent patterns use additional `useStream` features like `stream.subagents`, `stream.values.todos`, and `filterSubagentMessages` to render subagent-specific UIs.
+On the frontend, connect with @[`useStream`] the same way as with `createAgent`. Pass a [type parameter](/oss/langchain/frontend/overview) for type-safe stream state. Deep agent patterns use `stream.subagents`, selector helpers such as `useMessages(stream, subagent)`, and custom state values like `stream.values.todos` to render subagent-specific UIs.
 
 ```ts
 import { useStream } from "@langchain/react";
@@ -91,10 +106,26 @@ function App() {
 
   // Deep agent state beyond messages
   const todos = stream.values?.todos;
-  const subagents = stream.subagents;
+  const subagents = [...stream.subagents.values()];
 }
 ```
 
+## What the SDK exposes
+
+Deep agent UIs usually need more than the final answer. The frontend SDK gives
+you structured projections for the parts of the run users care about:
+
+| Projection | Use it for |
+| --- | --- |
+| `stream.messages` | The coordinator conversation and final synthesis. |
+| `stream.subagents` | Live discovery of specialist workers, including status and task metadata. |
+| `stream.values` | Shared state such as todos, plans, report sections, sandbox metadata, or any custom key your agent writes. |
+| Tool-call state | Rendering filesystem, search, browser, or domain tools as cards with progress and results. |
+| Interrupts | Pausing delegated work for user approval or missing input without losing the run state. |
+
+This lets you build interfaces that feel closer to an IDE, task board, or
+workflow monitor than a plain chat transcript.
+
 ## Patterns
 
 <CardGroup cols={3}>
@@ -115,3 +146,7 @@ The [LangChain frontend patterns](/oss/langchain/frontend/overview), including
 markdown messages, tool calling, and human-in-the-loop, all work with deep
 agents too. Deep Agents are built on the same LangGraph runtime, so
 `useStream` provides the same core API.
+
+For lower-level graph visualizations, see the
+[LangGraph frontend patterns](/oss/langgraph/frontend/overview). They show how
+to map graph nodes and state keys directly to UI components.
diff --git a/src/oss/deepagents/frontend/sandbox.mdx b/src/oss/deepagents/frontend/sandbox.mdx
index 71f819d91b..ec26a0bee9 100644
--- a/src/oss/deepagents/frontend/sandbox.mdx
+++ b/src/oss/deepagents/frontend/sandbox.mdx
@@ -10,15 +10,20 @@ write, and execute code in an isolated environment, then exposes the sandbox
 filesystem through a custom API server so the frontend can display files in
 real time as the agent works.
 
+This page covers the **three-panel UI** (file tree, code viewer, and chat) and
+the **custom API routes** that expose the sandbox filesystem to it. For sandbox
+providers, lifecycle scoping, seeding files, secrets, deployment, and production
+`useStream` configuration, see [Going to production](/oss/deepagents/going-to-production).
+
 import { PatternEmbed } from "/snippets/pattern-embed.jsx";
 
 <PatternEmbed pattern="deep-agent-ide" minHeight={700} />
 
 ## Architecture
 
-The sandbox pattern has three layers:
+This setup has three parts:
 
-1. **A deep agent with a sandbox backend:** The agent gets filesystem tools
+1. **Deep agent with a sandbox backend:** The agent gets filesystem tools
    (`read_file`, `write_file`, `edit_file`, `execute`) automatically from the
    sandbox
 
@@ -36,7 +41,7 @@ The sandbox pattern has three layers:
 
 :::
 
-3. **IDE frontend:** A three-panel layout (file tree, code/diff viewer, chat)
+3. **Three-panel frontend:** A file tree, code/diff viewer, and chat panel
    that syncs files in real time as the agent makes changes
 
 ```mermaid
@@ -55,7 +60,7 @@ graph LR
   SANDBOX["Sandbox"]
 
   UI --"useStream()"--> AGENT
-  UI --"/api/sandbox/:threadId/*"--> API
+  UI --"/sandbox/:threadId/*"--> API
   AGENT --"read/write/execute"--> SANDBOX
   API --"ls / read"--> SANDBOX
 
@@ -71,19 +76,15 @@ graph LR
 
 ## Sandbox lifecycle
 
-Before diving into the code, it's important to understand how sandboxes are
-scoped. The scoping strategy determines who shares a sandbox, how long it
-lives, and how it's resolved at runtime.
-
-### Thread-scoped sandbox (recommended)
+Choose how long a sandbox lives and who shares it before wiring the frontend.
+See [Sandbox lifecycle](/oss/deepagents/going-to-production#lifecycle) for thread-scoped
+vs assistant-scoped sandboxes, async [graph factory](/langsmith/graph-rebuild)
+setup, TTL behavior, and SDK invocation examples.
 
-Each LangGraph thread gets its own sandbox. The sandbox ID is stored in the
-thread's metadata and resolved at runtime via `getConfig()`.
-This is the recommended approach for most applications:
-
-- Conversations are isolated — file changes in one thread don't affect another
-- Sandbox state persists across page reloads (same thread = same sandbox)
-- Cleanup is straightforward: when a thread is deleted, its sandbox can be too
+This guide uses **thread-scoped sandboxes** by default. The frontend and
+custom API server both resolve the sandbox from the LangGraph
+[thread](/langsmith/use-threads) ID. That keeps conversations isolated and
+lets page reloads reconnect to the same environment when you [persist the thread ID](#thread-creation).
 
 ```mermaid
 sequenceDiagram
@@ -96,7 +97,7 @@ sequenceDiagram
     FE->>LG: POST /threads
     LG-->>FE: threadId
 
-    FE->>HTTP: GET /api/sandbox/:threadId/tree
+    FE->>HTTP: GET /sandbox/:threadId/tree
     HTTP->>LG: threads.get(threadId) → metadata.sandbox_id
     alt No sandbox yet
         HTTP->>SB: LangSmithSandbox.create()
@@ -112,188 +113,79 @@ sequenceDiagram
     LG->>SB: connect to same sandbox
 ```
 
-### Agent-scoped sandbox
-
-All threads under the same assistant share a single sandbox. Useful for
-persistent project environments where you want changes to carry across
-conversations:
-
-:::python
-
-```python
-from langgraph.config import get_config
-
-def get_sandbox_backend_for_assistant():
-    config = get_config()
-    assistant_id = config.get("metadata", {}).get("assistant_id")
-    return get_or_create_sandbox_for_assistant(assistant_id)
-```
-
-:::
-
-:::js
-
-```ts
-import { getConfig } from "@langchain/langgraph";
-
-function getSandboxBackendForAssistant() {
-  const config = getConfig();
-  const assistantId = config.metadata?.assistant_id;
-  return getOrCreateSandboxForAssistant(assistantId);
-}
-```
-
-:::
+For [multi-tenant](/oss/deepagents/going-to-production#multi-tenancy) apps,
+scope sandboxes by user or assistant in your backend factory instead. For
+demos without LangGraph threads, pass a client-generated session ID in the
+API URL. The session ID does not persist across browser sessions.
 
-### User-scoped sandbox
+## Connect the agent and API server
 
-Each user gets their own sandbox across all threads. Requires custom
-authentication and user identification:
+Configure the deep agent with a [sandbox backend](/oss/deepagents/sandboxes)
+as described in [Execution environment](/oss/deepagents/going-to-production#execution-environment).
+The agent gets filesystem tools and an `execute` tool automatically; no extra
+tool configuration is needed.
 
-:::python
+Building this UI adds one requirement on top of the production setup: a
+**custom API server** which runs outside the agent graph, so both the agent
+backend and your file-browsing routes must resolve the **same sandbox** for
+each thread. Store the sandbox ID on thread metadata and share a single
+lookup function between them.
 
-```python
-from langgraph.config import get_config
-
-def get_sandbox_backend_for_user():
-    config = get_config()
-    user_id = config.get("configurable", {}).get("user_id")
-    return get_or_create_sandbox_for_user(user_id)
-```
-
-:::
+### Resolve the sandbox from thread metadata
 
 :::js
 
-```ts
-import { getConfig } from "@langchain/langgraph";
-
-function getSandboxBackendForUser() {
-  const config = getConfig();
-  const userId = config.configurable?.user_id;
-  return getOrCreateSandboxForUser(userId);
-}
-```
-
-:::
-
-### Session-scoped sandbox (client-side)
-
-For simpler apps without LangGraph threads, the frontend can generate a
-session ID and pass it directly. This approach doesn't persist across
-browser sessions and is best for demos or prototyping:
-
-:::python
-
-```python
-import uuid
-import urllib.parse
-import urllib.request
-
-session_id = str(uuid.uuid4())
-query = urllib.parse.urlencode({"sessionId": session_id})
-urllib.request.urlopen(f"http://localhost:2024/api/sandbox/tree?{query}")
-```
-
-:::
-
-:::js
+Define `getOrCreateSandboxForThread` in a shared module. Both the agent graph
+factory and the custom API routes import it:
 
 ```ts
-const sessionId = crypto.randomUUID();
-fetch(`/api/sandbox/tree?sessionId=${sessionId}`);
-```
-
-:::
-
-The rest of this guide uses **thread-scoped sandboxes** as the primary example.
-
-## Setting up the agent
-
-### Choose a sandbox provider
+// src/api/utils.ts
+import { Client } from "@langchain/langgraph-sdk";
+import { LangSmithSandbox } from "deepagents";
+import { SandboxClient } from "langsmith/sandbox";
 
-:::python
-
-Deep Agents supports multiple [sandbox providers](/oss/integrations/sandboxes). Any provider that implements the `SandboxBackendProtocol` works:
-
-```python
-from deepagents import create_deep_agent
-from deepagents.sandbox import LangSmithSandbox  # or DaytonaSandbox, etc.
-
-sandbox = LangSmithSandbox.create()
-agent = create_deep_agent(model="google_genai:gemini-3.5-flash", backend=sandbox)
-```
-
-:::
-
-:::js
-
-Deep Agents supports multiple sandbox providers. Any provider that implements the `SandboxBackendProtocol` works:
-
-```ts
-import { createDeepAgent, LangSmithSandbox } from "deepagents";
-
-const sandbox = await LangSmithSandbox.create();
-
-export const agent = createDeepAgent({
-  model: "google_genai:gemini-3.5-flash",
-  backend: sandbox,
-  systemPrompt: "You are an expert developer working on a project in /app.",
-});
-```
-
-:::
-
-The agent automatically gets filesystem tools (`read_file`, `write_file`,
-`edit_file`, `ls`, `glob`, `grep`) and an `execute` tool for running shell
-commands. No tool configuration needed.
-
-### Resolve a sandbox per thread
-
-Instead of creating a sandbox at module level (which would be shared across
-all threads and may expire), resolve the sandbox per-thread at runtime. The sandbox reads `thread_id` from the LangGraph config via `getConfig()`:
-
-:::js
-
-```ts
-import { createDeepAgent, LangSmithSandbox } from "deepagents";
-import { getConfig } from "@langchain/langgraph";
-
-async function getOrCreateSandboxForThread(threadId: string): Promise<LangSmithSandbox> {
-  // Check thread metadata for existing sandbox_id
+export async function getOrCreateSandboxForThread(threadId: string) {
   const client = new Client({ apiUrl: "http://localhost:2024" });
   const thread = await client.threads.get(threadId);
   const sandboxId = thread.metadata?.sandbox_id;
 
   if (sandboxId) {
-    // Reconnect to existing sandbox
-    return new LangSmithSandbox({
-      sandbox: await new SandboxClient().getSandbox(sandboxId),
-    });
+    const existing = await new SandboxClient().getSandbox(sandboxId);
+    if (existing.status === "ready") {
+      return new LangSmithSandbox({ sandbox: existing });
+    }
   }
 
-  // Create new sandbox and store ID in thread metadata
   const sandbox = await LangSmithSandbox.create({ templateName: "my-template" });
-  await seedSandbox(sandbox);
+  await seedSandbox(sandbox);  // See File transfers below
   await client.threads.update(threadId, { metadata: { sandbox_id: sandbox.id } });
   return sandbox;
 }
+```
 
-// Create a sandbox that resolves per-thread at runtime
-const sandbox = new LangSmithSandbox({
-  resolve: async () => {
-    const config = getConfig();
-    const threadId = config.configurable?.thread_id;
-    if (!threadId) throw new Error("No thread_id — agent must run on a thread");
-    return getOrCreateSandboxForThread(threadId);
-  },
-});
+Wire the agent as an async [graph factory](/langsmith/graph-rebuild) that reads
+`thread_id` from the run config and passes the resolved backend to
+`createDeepAgent`:
 
-export const agent = createDeepAgent({
-  model: "google_genai:gemini-3.5-flash",
-  backend: sandbox,
-  systemPrompt: "You are an expert developer working on a project in /app.",
-});
+```ts
+// src/agents/deep-agent-ide.ts
+import { createDeepAgent } from "deepagents";
+import type { LangGraphRunnableConfig } from "@langchain/langgraph";
+
+import { getOrCreateSandboxForThread } from "../api/utils.js";
+
+export async function agent(config: LangGraphRunnableConfig) {
+  const threadId = config.configurable?.thread_id;
+  if (!threadId) throw new Error("No thread_id — agent must run on a thread");
+
+  const backend = await getOrCreateSandboxForThread(threadId);
+
+  return createDeepAgent({
+    model: "google_genai:gemini-3.5-flash",
+    backend,
+    systemPrompt: "You are an expert developer working on a project in /app.",
+  });
+}
 ```
 
 :::
@@ -307,7 +199,7 @@ from langgraph.config import get_config
 
 
 def get_or_create_sandbox_for_thread(thread_id: str) -> LangSmithSandbox:
-    # Look up or create sandbox based on thread_id
+    # Look up sandbox_id from thread metadata, create if missing, seed files
     ...
 
 
@@ -325,38 +217,26 @@ agent = create_deep_agent(
 
 :::
 
-### Seed the sandbox
+<Note>
+  Similar to the example in [Going to production](/oss/deepagents/going-to-production#lifecycle), the
+  agent is an async graph factory invoked on each run. Store the sandbox ID on
+  thread metadata so custom `http.app` routes can call the same
+  `getOrCreateSandboxForThread` helper. Going to production uses provider label
+  lookup instead when the LangGraph SDK is the only entry point.
+</Note>
 
-Before the agent runs, populate the sandbox with your project files using
-`uploadFiles`:
+### Seed project files
 
-<Info>
-  For **LangSmith** sandboxes, the container image and resource limits come from a
-  [sandbox snapshot](/langsmith/sandbox-snapshots). Pass `templateName` when creating
-:::python
-  the sandbox (see `get_or_create_sandbox_for_thread` above). `upload_files` seeds or updates
-:::
-:::js
-  the sandbox (see `getOrCreateSandboxForThread` above). `uploadFiles` seeds or updates
-:::
-  project files at runtime on top of that image.
-</Info>
-
-```ts
-const SEED_FILES: Record<string, string> = {
-  "package.json": JSON.stringify({ name: "my-app", version: "1.0.0" }, null, 2),
-  "src/index.js": 'console.log("Hello");',
-};
-
-const encoder = new TextEncoder();
-await sandbox.uploadFiles(
-  Object.entries(SEED_FILES).map(([path, content]) => [`/app/${path}`, encoder.encode(content)]),
-);
-```
+Before the agent runs, upload starter files with `uploadFiles` /
+`upload_files`. See [File transfers](/oss/deepagents/going-to-production#file-transfers)
+for seeding patterns, provider examples, and syncing
+[memories](/oss/deepagents/memory) or [skills](/oss/deepagents/skills) into
+the sandbox. For LangSmith sandboxes, pass `templateName` from a
+[sandbox snapshot](/langsmith/sandbox-snapshots) when creating the container.
 
 <Tip>
-  Run `sandbox.execute("cd /app && npm install")` after uploading `package.json` to install
-  dependencies before the agent starts.
+  Run `sandbox.execute("cd /app && npm install")` after uploading
+  `package.json` so dependencies are ready before the first agent turn.
 </Tip>
 
 ## Adding the file browsing API
@@ -383,11 +263,9 @@ The sandbox API endpoints use the thread ID as a URL path parameter. This
 ensures the frontend always accesses the correct sandbox for the current
 :::python
 conversation, using the same `get_or_create_sandbox_for_thread` function as the
-:::
-:::js
+::::::js
 conversation, using the same `getOrCreateSandboxForThread` function as the
-:::
-agent's backend:
+:::agent's backend:
 
 :::js
 
@@ -398,7 +276,7 @@ import { getOrCreateSandboxForThread } from "./utils.js";
 
 export const app = new Hono();
 
-app.get("/api/sandbox/:threadId/tree", async (c) => {
+app.get("/sandbox/:threadId/tree", async (c) => {
   const threadId = c.req.param("threadId");
   const rootPath = c.req.query("filePath") || "/app";
 
@@ -424,7 +302,7 @@ app.get("/api/sandbox/:threadId/tree", async (c) => {
   return c.json({ path: rootPath, entries, sandboxId: sandbox.id });
 });
 
-app.get("/api/sandbox/:threadId/file", async (c) => {
+app.get("/sandbox/:threadId/file", async (c) => {
   const threadId = c.req.param("threadId");
   const filePath = c.req.query("filePath");
   if (!filePath) return c.json({ error: "filePath is required" }, 400);
@@ -450,14 +328,14 @@ from utils import get_or_create_sandbox_for_thread
 
 app = FastAPI()
 
-@app.get("/api/sandbox/{thread_id}/tree")
+@app.get("/sandbox/{thread_id}/tree")
 async def list_tree(
     thread_id: str = Path(...),
-    path: str = Query("/app"),
+    filePath: str = Query("/app"),
 ):
     sandbox = await get_or_create_sandbox_for_thread(thread_id)
     result = await sandbox.aexecute(
-        f"find {path} -printf '%y\\t%s\\t%p\\n' 2>/dev/null | sort"
+        f"find {filePath} -printf '%y\\t%s\\t%p\\n' 2>/dev/null | sort"
     )
     entries = []
     for line in result.output.strip().split("\n"):
@@ -470,16 +348,16 @@ async def list_tree(
             "path": full_path,
             "size": int(size_str),
         })
-    return {"path": path, "entries": entries, "sandbox_id": sandbox.id}
+    return {"path": filePath, "entries": entries, "sandboxId": sandbox.id}
 
-@app.get("/api/sandbox/{thread_id}/file")
+@app.get("/sandbox/{thread_id}/file")
 async def read_file(
     thread_id: str = Path(...),
-    path: str = Query(...),
+    filePath: str = Query(...),
 ):
     sandbox = await get_or_create_sandbox_for_thread(thread_id)
-    results = await sandbox.adownload_files([path])
-    return {"path": path, "content": results[0].content.decode()}
+    results = await sandbox.adownload_files([filePath])
+    return {"path": filePath, "content": results[0].content.decode()}
 ```
 
 :::
@@ -499,7 +377,10 @@ async def read_file(
 ### Configure `langgraph.json`
 
 Register both the agent graph and the API server. The `http.app` field tells
-the LangGraph platform to serve your custom routes alongside the default ones:
+the LangGraph platform to serve your custom routes alongside the default ones.
+See [application structure](/oss/langgraph/application-structure) and
+[LangSmith Deployments](/oss/deepagents/going-to-production#langsmith-deployments)
+for the full set of `langgraph.json` options.
 
 :::js
 
@@ -507,7 +388,7 @@ the LangGraph platform to serve your custom routes alongside the default ones:
 {
   "node_version": "22",
   "graphs": {
-    "coding_agent": "./src/agents/my-agent.ts:agent"
+    "deep_agent_ide": "./src/agents/deep-agent-ide.ts:agent"
   },
   "env": ".env",
   "http": {
@@ -523,7 +404,7 @@ the LangGraph platform to serve your custom routes alongside the default ones:
 ```json
 {
   "graphs": {
-    "coding_agent": "./src/agents/my_agent.py:agent"
+    "deep_agent_ide": "./src/agents/my_agent.py:agent"
   },
   "env": ".env",
   "http": {
@@ -546,9 +427,18 @@ local development with `langgraph dev`, that's `http://localhost:2024`.
 ## Building the frontend
 
 The frontend has three panels: a file tree sidebar, a code/diff viewer, and a
-chat panel. It uses `useStream` for the agent conversation and the custom API
+chat panel. It uses @[`useStream`] for the agent conversation and the custom API
 endpoints for file browsing.
 
+For production deployment, point `apiUrl` at your
+[LangSmith Deployment](/langsmith/deployment), enable
+`reconnectOnMount` and `fetchStateHistory`, and pass a stable
+`thread_id` on each run. See
+[Frontend](/oss/deepagents/going-to-production#frontend) in
+[Going to production](/oss/deepagents/going-to-production) for those settings
+and for [invoking the agent](/oss/deepagents/going-to-production#invoking-the-agent)
+with `thread_id` and runtime `context`.
+
 ### Thread creation
 
 Create a LangGraph thread when the page loads and persist its ID in
@@ -570,7 +460,7 @@ function IDEPreview() {
 
   const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
-    assistantId: "coding_agent",
+    assistantId: "deep_agent_ide",
     threadId,
     onThreadId: updateThreadId,
   });
@@ -592,7 +482,6 @@ fresh thread (and sandbox):
 
 ```tsx
 function handleNewThread() {
-  stream.switchThread(null);
   updateThreadId(null);
 }
 ```
@@ -608,7 +497,7 @@ const AGENT_URL = "http://localhost:2024";
 
 async function fetchTree(threadId: string): Promise<FileEntry[]> {
   const res = await fetch(
-    `${AGENT_URL}/api/sandbox/${encodeURIComponent(threadId)}/tree?filePath=/app`,
+    `${AGENT_URL}/sandbox/${encodeURIComponent(threadId)}/tree?filePath=/app`,
   );
   const data = await res.json();
   return data.entries.filter((e: FileEntry) => !e.path.includes("node_modules"));
@@ -616,7 +505,7 @@ async function fetchTree(threadId: string): Promise<FileEntry[]> {
 
 async function fetchFile(threadId: string, path: string): Promise<string | null> {
   const res = await fetch(
-    `${AGENT_URL}/api/sandbox/${encodeURIComponent(threadId)}/file?filePath=${encodeURIComponent(path)}`,
+    `${AGENT_URL}/sandbox/${encodeURIComponent(threadId)}/file?filePath=${encodeURIComponent(path)}`,
   );
   const data = await res.json();
   return data.content ?? null;
@@ -641,7 +530,7 @@ const FILE_MUTATING_TOOLS = new Set(["write_file", "edit_file", "execute"]);
 export function IDEPreview() {
   const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
-    assistantId: "coding_agent",
+    assistantId: "deep_agent_ide",
   });
 
   const processedIds = useRef(new Set<string>());
@@ -669,9 +558,9 @@ export function IDEPreview() {
       processedIds.current.add(id);
 
       if (call.name === "write_file" || call.name === "edit_file") {
-        refreshSingleFile(call.args.path);
+        refreshSingleFile(call.args.path ?? call.args.file_path);
       } else if (call.name === "execute") {
-        refreshAllFiles();
+        refreshTreeAndFiles();
       }
     }
   }, [stream.messages]);
@@ -689,7 +578,7 @@ const processedIds = new Set<string>();
 
 const stream = useStream<typeof myAgent>({
   apiUrl: AGENT_URL,
-  assistantId: "coding_agent",
+  assistantId: "deep_agent_ide",
 });
 
 watch(
@@ -716,16 +605,16 @@ watch(
       processedIds.add(id);
 
       if (call.name === "write_file" || call.name === "edit_file") {
-        refreshSingleFile(call.args.path);
+        refreshSingleFile(call.args.path ?? call.args.file_path);
       } else if (call.name === "execute") {
-        refreshAllFiles();
+        refreshTreeAndFiles();
       }
     }
   },
   { deep: true },
 );
 </script>
-````
+```
 
 ```svelte Svelte
 <script lang="ts">
@@ -735,13 +624,13 @@ watch(
   const FILE_MUTATING_TOOLS = new Set(["write_file", "edit_file", "execute"]);
   const processedIds = new Set<string>();
 
-  const { messages, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
-    assistantId: "coding_agent",
+    assistantId: "deep_agent_ide",
   });
 
   $effect(() => {
-    const msgs = $messages;
+    const msgs = stream.messages;
     const toolCallMap = new Map();
     for (const msg of msgs) {
       if (AIMessage.isInstance(msg)) {
@@ -763,9 +652,9 @@ watch(
       processedIds.add(id);
 
       if (call.name === "write_file" || call.name === "edit_file") {
-        refreshSingleFile(call.args.path);
+        refreshSingleFile(call.args.path ?? call.args.file_path);
       } else if (call.name === "execute") {
-        refreshAllFiles();
+        refreshTreeAndFiles();
       }
     }
   });
@@ -774,7 +663,7 @@ watch(
 
 ```ts Angular
 import { Component, effect } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 import { ToolMessage, AIMessage } from "langchain";
 
 const FILE_MUTATING_TOOLS = new Set(["write_file", "edit_file", "execute"]);
@@ -784,9 +673,9 @@ const FILE_MUTATING_TOOLS = new Set(["write_file", "edit_file", "execute"]);
   template: `<!-- ... -->`,
 })
 export class IdePreviewComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
-    assistantId: "coding_agent",
+    assistantId: "deep_agent_ide",
   });
 
   private processedIds = new Set<string>();
@@ -815,9 +704,9 @@ export class IdePreviewComponent {
         this.processedIds.add(id);
 
         if (call.name === "write_file" || call.name === "edit_file") {
-          this.refreshSingleFile(call.args.path);
+          this.refreshSingleFile(call.args.path ?? call.args.file_path);
         } else if (call.name === "execute") {
-          this.refreshAllFiles();
+          this.refreshTreeAndFiles();
         }
       }
     });
@@ -910,36 +799,6 @@ function ChangedFilesSummary({ changedFiles, files, originalFiles, onSelect }) {
 }
 ```
 
-## The three-panel layout
-
-The IDE layout arranges three panels side by side:
-
-| Panel       | Width         | Purpose                                     |
-| ----------- | ------------- | ------------------------------------------- |
-| File tree   | Fixed (208px) | Browse sandbox files, see change indicators |
-| Code / Diff | Flexible      | View file content or unified diff           |
-| Chat        | Fixed (320px) | Interact with the agent                     |
-
-```tsx
-<div className="flex h-screen">
-  <div className="w-52 shrink-0">
-    <FileTree />
-    <ChangedFilesSummary />
-  </div>
-
-  <CodePanel /* flex-1 */ />
-
-  <div className="w-80 shrink-0">
-    <ChatPanel />
-  </div>
-</div>
-```
-
-The file tree shows VS Code-style icons (using
-[`@iconify-json/vscode-icons`](https://www.npmjs.com/package/@iconify-json/vscode-icons))
-and amber dots on modified files. Selecting a modified file automatically
-switches to the diff tab.
-
 ## Use cases
 
 A sandbox is the right choice when:
@@ -955,24 +814,50 @@ A sandbox is the right choice when:
 
 ## Best practices
 
-- **Use thread-scoped sandboxes** for production apps. Store the sandbox ID in
-  thread metadata and resolve it via `getConfig()` at runtime. This avoids
-  module-level state and keeps sandboxes isolated per conversation.
-- **Share `getOrCreateSandboxForThread`** between the agent backend and the
-  API server. Both should resolve the sandbox the same way — via thread
-  metadata — so there's a single source of truth with no in-memory caches.
+Frontend-specific:
+
 - **Persist `threadId` in `sessionStorage`** so page reloads reconnect to the
   same thread and sandbox instead of creating new ones.
-- **Sync files on every relevant tool call**, not just when the run finishes. This
-  makes the IDE feel live. Watch for `write_file`, `edit_file`, and `execute`
+- **Sync files on every relevant tool call**, not just when the run finishes. Watch for `write_file`, `edit_file`, and `execute`
   tool messages and refresh immediately.
 - **Default to diff view for changed files**. When a user clicks a file that
   was modified by the agent, show the diff first — that's what they care about.
 - **Show compact tool results for read-only operations**. Instead of dumping
   the full output of `read_file` in the chat, show a one-liner like
   `Read router.js L1-42`. Reserve the full output display for mutating tools.
-- **Seed the sandbox with a real project**. Starting from an empty sandbox is
-  disorienting. Upload a working starter project so users (and the agent) have
-  context immediately.
 - **Filter `node_modules` from the file tree**. Nobody wants to browse
   thousands of dependency files. Filter them out when fetching the tree.
+
+For backends and sandboxes:
+
+- **Use thread-scoped sandboxes** for production apps. See
+  [Sandbox lifecycle](/oss/deepagents/going-to-production#lifecycle).
+- **Share sandbox resolution** between the agent backend and the API server via
+  thread metadata so both resolve the same environment with no in-memory caches.
+- **Seed the sandbox with a real project**. See
+  [File transfers](/oss/deepagents/going-to-production#file-transfers).
+- **Keep secrets out of the sandbox**. Use the
+  [sandbox auth proxy](/oss/deepagents/going-to-production#managing-secrets)
+  instead of environment variables or file uploads for API keys.
+- **Add guardrails before launch**. Configure
+  [rate limits](/oss/deepagents/going-to-production#rate-limiting),
+  [error handling](/oss/deepagents/going-to-production#handling-errors), and
+  [data privacy](/oss/deepagents/going-to-production#data-privacy) middleware
+  for autonomous coding agents.
+
+## Related
+
+<CardGroup cols={2}>
+  <Card title="Going to production" icon="rocket" href="/oss/deepagents/going-to-production">
+    Deploy the agent with persistent sandboxes, auth, guardrails, and production `useStream` settings.
+  </Card>
+  <Card title="Sandboxes" icon="box" href="/oss/deepagents/sandboxes">
+    Sandbox providers, security model, and file transfer APIs.
+  </Card>
+  <Card title="Frontend overview" icon="layout" href="/oss/deepagents/frontend/overview">
+    Other deep agent UI patterns: subagent streaming, todo lists, and custom state.
+  </Card>
+  <Card title="Application structure" icon="file-code" href="/oss/langgraph/application-structure">
+    Full `langgraph.json` reference, including custom `http.app` routes.
+  </Card>
+</CardGroup>
diff --git a/src/oss/deepagents/frontend/subagent-streaming.mdx b/src/oss/deepagents/frontend/subagent-streaming.mdx
index 348601515c..3ec664fce1 100644
--- a/src/oss/deepagents/frontend/subagent-streaming.mdx
+++ b/src/oss/deepagents/frontend/subagent-streaming.mdx
@@ -5,64 +5,54 @@ description: Display specialist subagents with streaming content, progress track
 
 When a coordinator agent spawns specialist subagents (a researcher, an
 analyst, a writer), you need to render the orchestrator's messages separately
-from each subagent's streaming output. Set `filterSubagentMessages: true` in
-`useStream` to cleanly split these two streams, then use
-`getSubagentsByMessage` to attach each subagent's progress card to the
-coordinator message that triggered it.
+from each subagent's streaming output. The v1 SDK keeps coordinator messages on
+the root stream and exposes subagents as discovery snapshots. Pass a snapshot to
+selector hooks or composables such as `useMessages(stream, subagent)` to render
+the specialist's scoped stream.
+
+This is where the LangChain frontend SDKs go beyond a flat chat transcript:
+subagents are first-class stream entities with their own status, messages,
+tool-call metadata, and results. Your UI can show delegation, progress, errors,
+and final synthesis without asking users to read interleaved tokens from every
+worker.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="deep-agent-subagent-cards" />
 
-## Why filter subagent messages
+## Why selector-based subagent streams
 
-Without filtering, every token produced by every subagent appears interleaved
-in the coordinator's message stream, making it unreadable. With
-`filterSubagentMessages: true`:
+The root stream stays focused on the coordinator conversation:
 
 - `stream.messages` contains only the coordinator's messages
-- Each subagent's content is accessible through `stream.subagents` and
-  `stream.getSubagentsByMessage`
+- `stream.subagents` contains discovery snapshots with identity, namespace, and status
+- Each subagent's messages, tool calls, and values are read with selector helpers
 - The UI stays clean: the coordinator's reasoning is separate from the
   specialists' work
 
 This separation lets you render the orchestrator's messages in one place and
-attach each subagent's progress card exactly where it belongs: beneath the
-coordinator message that spawned it.
-
-## Setting up useStream
-
-Always set `filterSubagentMessages: true`. This removes subagent tokens from
-the main message stream so you can render the coordinator's messages and
-subagent output independently.
-
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
+mount subagent cards only when the user needs to see specialist work.
 
-:::js
+For large tasks, this also keeps the UI scalable. Users can skim the
+coordinator's high-level plan, expand only the specialist work they care about,
+and still retain the full subagent trace for debugging, audit, or replay.
 
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
+## Setting up `useStream`
 
-```ts
-import type { myAgent } from "./agent";
-```
+No extra stream options are required. Point the stream at your deep agent,
+render coordinator messages from `stream.messages`, and use `stream.subagents`
+to mount cards for active specialists. In chat layouts, index subagents by the
+tool-call ID that spawned them so each card appears under the coordinator turn
+Point the stream at your deep agent, render coordinator messages from `stream.messages`, and use `stream.subagents` to mount cards for active specialists. In chat layouts, index subagents by the
+tool-call ID that spawned them so each card appears under the coordinator turn that delegated the work.
 
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
 import { useStream } from "@langchain/react";
+import { AIMessage, HumanMessage } from "langchain";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -70,18 +60,31 @@ export function DeepAgentChat() {
   const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "deep_agent_subagent_cards",
-    filterSubagentMessages: true,
   });
+  const subagents = [...stream.subagents.values()];
+  const subagentsByCallId = new Map(subagents.map((s) => [s.id, s]));
 
   return (
     <div>
-      {stream.messages.map((msg) => (
-        <MessageWithSubagents
-          key={msg.id}
-          message={msg}
-          subagents={stream.getSubagentsByMessage(msg.id)}
-        />
-      ))}
+      {stream.messages.map((msg) => {
+        const turnSubagents = AIMessage.isInstance(msg)
+          ? (msg.tool_calls ?? [])
+              .map((tc) => subagentsByCallId.get(tc.id ?? ""))
+              .filter((s): s is NonNullable<typeof s> => !!s)
+          : [];
+
+        return (
+          <div key={msg.id}>
+            {HumanMessage.isInstance(msg) && <HumanBubble>{msg.text}</HumanBubble>}
+            {AIMessage.isInstance(msg) && msg.text.trim() && (
+              <AIBubble>{msg.text}</AIBubble>
+            )}
+            {turnSubagents.map((subagent) => (
+              <SubagentCard key={subagent.id} stream={stream} subagent={subagent} />
+            ))}
+          </div>
+        );
+      })}
     </div>
   );
 }
@@ -89,25 +92,48 @@ export function DeepAgentChat() {
 
 ```vue Vue
 <script setup lang="ts">
+import { computed } from "vue";
 import { useStream } from "@langchain/vue";
+import { AIMessage, HumanMessage } from "langchain";
 
 const AGENT_URL = "http://localhost:2024";
 
 const stream = useStream<typeof myAgent>({
   apiUrl: AGENT_URL,
   assistantId: "deep_agent_subagent_cards",
-  filterSubagentMessages: true,
 });
+
+const subagentsByCallId = computed(
+  () => new Map([...stream.subagents.value.values()].map((s) => [s.id, s]))
+);
+
+function subagentsForMessage(msg: unknown) {
+  if (!AIMessage.isInstance(msg)) return [];
+  return (msg.tool_calls ?? [])
+    .map((tc) => subagentsByCallId.value.get(tc.id ?? ""))
+    .filter(Boolean);
+}
 </script>
 
 <template>
   <div>
-    <MessageWithSubagents
+    <div
       v-for="msg in stream.messages.value"
       :key="msg.id"
-      :message="msg"
-      :subagents="stream.getSubagentsByMessage(msg.id)"
-    />
+    >
+      <HumanBubble v-if="HumanMessage.isInstance(msg)">
+        {{ msg.text }}
+      </HumanBubble>
+      <AIBubble v-else-if="AIMessage.isInstance(msg) && msg.text.trim()">
+        {{ msg.text }}
+      </AIBubble>
+      <SubagentCard
+        v-for="subagent in subagentsForMessage(msg)"
+        :key="subagent.id"
+        :stream="stream"
+        :subagent="subagent"
+      />
+    </div>
   </div>
 </template>
 ```
@@ -118,26 +144,25 @@ const stream = useStream<typeof myAgent>({
 
   const AGENT_URL = "http://localhost:2024";
 
-  const { messages, getSubagentsByMessage, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "deep_agent_subagent_cards",
-    filterSubagentMessages: true,
   });
 </script>
 
 <div>
-  {#each $messages as msg (msg.id)}
-    <MessageWithSubagents
-      message={msg}
-      subagents={getSubagentsByMessage(msg.id)}
-    />
+  {#each stream.messages as msg (msg.id)}
+    <Message {msg} />
+  {/each}
+  {#each [...stream.subagents.values()] as subagent (subagent.id)}
+    <SubagentCard {stream} {subagent} />
   {/each}
 </div>
 ```
 
 ```ts Angular
-import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { Component, computed } from "@angular/core";
+import { injectStream } from "@langchain/angular";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -145,33 +170,34 @@ const AGENT_URL = "http://localhost:2024";
   selector: "app-deep-agent-chat",
   template: `
     @for (msg of stream.messages(); track msg.id) {
-      <app-message-with-subagents
-        [message]="msg"
-        [subagents]="stream.getSubagentsByMessage(msg.id)"
-      />
+      <app-message [message]="msg" />
+    }
+    @for (subagent of subagents(); track subagent.id) {
+      <app-subagent-card [stream]="stream" [subagent]="subagent" />
     }
   `,
 })
 export class DeepAgentChatComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "deep_agent_subagent_cards",
-    filterSubagentMessages: true,
   });
+
+  subagents = computed(() => [...this.stream.subagents().values()]);
 }
 ```
 </CodeGroup>
 
-## Submitting with subgraph streaming
+## Submitting messages
 
-When submitting a message, enable subgraph streaming and set an appropriate
-recursion limit. Deep agent workflows often involve multiple layers of nested
-subagraphs, so a higher recursion limit prevents premature termination:
+Submit messages through the root stream. Deep agent workflows often involve
+multiple layers of nested subgraphs, so set an appropriate recursion limit if
+your agent can delegate deeply:
 
 ```ts
 stream.submit(
   { messages: [{ type: "human", content: text }] },
-  { streamSubgraphs: true }
+  { config: { recursion_limit: 100 } }
 );
 ```
 
@@ -181,87 +207,50 @@ most multi-expert setups. You can override this via `config.recursion_limit` if
 needed.
 </Note>
 
-## The SubagentStreamInterface
-
-Each subagent exposes a `SubagentStreamInterface` with metadata about the
-subagent's task, status, and timing:
-
-```ts
-interface SubagentStreamInterface {
-  id: string;
-  status: "pending" | "running" | "complete" | "error";
-  messages: BaseMessage[];
-  result: string | undefined;
-  toolCall: {
-    id: string;
-    name: string;
-    args: {
-      description: string;
-      subagent_type: string;
-      [key: string]: unknown;
-    };
-  };
-  startedAt: number | undefined;
-  completedAt: number | undefined;
-}
-```
-
-| Property | Description |
-| --- | --- |
-| `id` | Unique identifier for this subagent instance |
-| `status` | Lifecycle state: `pending` → `running` → `complete` or `error` |
-| `messages` | The subagent's own message stream, updated in real time |
-| `result` | The final output text, available only when `status` is `"complete"` |
-| `toolCall` | The tool call that spawned this subagent, including task metadata |
-| `toolCall.args.description` | The task description the coordinator assigned to this subagent |
-| `toolCall.args.subagent_type` | The type or name of the specialist (e.g., `"researcher"`, `"analyst"`) |
-| `startedAt` | Timestamp when the subagent began executing |
-| `completedAt` | Timestamp when the subagent finished |
+## The SubagentDiscoverySnapshot
 
-## Linking subagents to messages
+Each @[SubagentDiscoverySnapshot] is a lightweight discovery record for a
+subagent running inside the thread. It tells your UI that a subagent exists,
+where it sits in the subagent tree, and what lifecycle state it is in.
 
-The `getSubagentsByMessage` method returns the subagents spawned by a specific
-AI message. This lets you render subagent cards directly beneath the
-coordinator message that triggered them:
-
-```ts
-const turnSubagents = stream.getSubagentsByMessage(msg.id);
-```
-
-This returns an array of `SubagentStreamInterface` objects. If the message
-didn't spawn any subagents, it returns an empty array.
+The snapshot does **not** include the subagent's streamed messages or tool calls.
+Instead, pass the snapshot to selector hooks such as
+`useMessages(stream, subagent)` or `useToolCalls(stream, subagent)`. These hooks
+use the snapshot namespace to subscribe to the subagent's stream primitives only
+when the corresponding card or panel is mounted.
 
 ## Building the SubagentCard
 
-Each subagent card shows the specialist's name, task description, streaming
-content or final result, and timing information:
+Each subagent card shows the specialist's name, status, streaming content, and
+tool calls. Use selector hooks to subscribe to the subagent namespace:
 
 ```tsx
-import { AIMessage } from "@langchain/core/messages";
+import { useState } from "react";
+import { AIMessage } from "langchain";
+import {
+  useMessages,
+  useToolCalls,
+  type AnyStream,
+  type SubagentDiscoverySnapshot,
+} from "@langchain/react";
 
 function SubagentCard({
+  stream,
   subagent,
 }: {
-  subagent: SubagentStreamInterface;
+  stream: AnyStream;
+  subagent: SubagentDiscoverySnapshot;
 }) {
   const [expanded, setExpanded] = useState(true);
+  const messages = useMessages(stream, subagent);
+  const toolCalls = useToolCalls(stream, subagent);
 
-  const title =
-    subagent.toolCall?.args?.subagent_type ?? `Agent ${subagent.id}`;
-  const description = subagent.toolCall?.args?.description ?? "";
-
-  const lastAIMessage = subagent.messages
+  const lastAIMessage = messages
     .filter(AIMessage.isInstance)
     .at(-1);
 
   const displayContent =
-    subagent.status === "complete"
-      ? subagent.result
-      : typeof lastAIMessage?.content === "string"
-        ? lastAIMessage.content
-        : "";
-
-  const elapsed = getElapsedTime(subagent.startedAt, subagent.completedAt);
+    lastAIMessage?.text ?? subagent.output ?? "";
 
   return (
     <div className="rounded-lg border bg-white shadow-sm">
@@ -272,14 +261,13 @@ function SubagentCard({
         <div className="flex items-center gap-3">
           <StatusIcon status={subagent.status} />
           <div>
-            <h4 className="font-semibold capitalize">{title}</h4>
-            <p className="text-xs text-gray-500">{description}</p>
+            <h4 className="font-semibold capitalize">{subagent.name}</h4>
+            <p className="text-xs text-gray-500">
+              {toolCalls.length} tool call{toolCalls.length === 1 ? "" : "s"}
+            </p>
           </div>
         </div>
         <div className="flex items-center gap-2">
-          {elapsed && (
-            <span className="text-xs text-gray-400">{elapsed}</span>
-          )}
           <StatusBadge status={subagent.status} />
         </div>
       </button>
@@ -297,51 +285,6 @@ function SubagentCard({
     </div>
   );
 }
-
-function getElapsedTime(
-  startedAt: number | undefined,
-  completedAt: number | undefined
-): string | null {
-  if (!startedAt) return null;
-  const end = completedAt ?? Date.now();
-  const seconds = Math.round((end - startedAt) / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
-}
-```
-
-## Status icons and badges
-
-Consistent visual indicators help users parse subagent status at a glance:
-
-```tsx
-function StatusIcon({ status }: { status: SubagentStreamInterface["status"] }) {
-  switch (status) {
-    case "pending":
-      return <span className="text-gray-400">○</span>;
-    case "running":
-      return <span className="animate-spin text-blue-500">◉</span>;
-    case "complete":
-      return <span className="text-green-500">✓</span>;
-    case "error":
-      return <span className="text-red-500">✕</span>;
-  }
-}
-
-function StatusBadge({ status }: { status: SubagentStreamInterface["status"] }) {
-  const styles = {
-    pending: "bg-gray-100 text-gray-600",
-    running: "bg-blue-100 text-blue-700",
-    complete: "bg-green-100 text-green-700",
-    error: "bg-red-100 text-red-700",
-  };
-
-  return (
-    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${styles[status]}`}>
-      {status}
-    </span>
-  );
-}
 ```
 
 ## Progress tracking
@@ -352,7 +295,7 @@ Show a progress bar and counter so users know how many subagents have finished:
 function SubagentProgress({
   subagents,
 }: {
-  subagents: SubagentStreamInterface[];
+  subagents: SubagentDiscoverySnapshot[];
 }) {
   const completed = subagents.filter((s) => s.status === "complete").length;
   const total = subagents.length;
@@ -379,126 +322,57 @@ function SubagentProgress({
 
 ## Rendering messages with subagent cards
 
-The key layout pattern is to render each coordinator message, and if that message
-spawned subagents, render their cards immediately below it:
+The key layout pattern is to render coordinator messages from the root stream
+and attach subagent cards to the AI message whose tool call spawned them:
 
 ```tsx
-function MessageWithSubagents({
-  message,
-  subagents,
-}: {
-  message: BaseMessage;
-  subagents: SubagentStreamInterface[];
-}) {
-  if (message.type === "human") {
-    return <HumanMessage content={message.content} />;
-  }
+function DeepAgentLayout({ stream }: { stream: AnyStream }) {
+  const subagents = [...stream.subagents.values()];
+  const subagentsByCallId = new Map(subagents.map((s) => [s.id, s]));
 
   return (
     <div className="space-y-3">
-      {message.content && (
-        <div className="prose prose-sm max-w-none">
-          {message.content}
-        </div>
-      )}
-
-      {subagents.length > 0 && (
-        <div className="ml-4 space-y-3 border-l-2 border-blue-200 pl-4">
-          <SubagentProgress subagents={subagents} />
-          {subagents.map((subagent) => (
-            <SubagentCard key={subagent.id} subagent={subagent} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-```
-
-## Synthesis indicator
-
-After all subagents complete, the coordinator takes time to synthesize their
-results into a final response. Show a clear indicator during this phase:
-
-```tsx
-function SynthesisIndicator({
-  subagents,
-  isLoading,
-}: {
-  subagents: SubagentStreamInterface[];
-  isLoading: boolean;
-}) {
-  const allComplete =
-    subagents.length > 0 &&
-    subagents.every((s) => s.status === "complete" || s.status === "error");
-
-  if (!allComplete || !isLoading) return null;
-
-  return (
-    <div className="flex items-center gap-2 rounded-lg bg-purple-50 px-4 py-2 text-sm text-purple-700">
-      <span className="animate-spin">⟳</span>
-      Synthesizing results from {subagents.length} subagent
-      {subagents.length !== 1 ? "s" : ""}...
+      {stream.messages.map((message) => {
+        const turnSubagents = AIMessage.isInstance(message)
+          ? (message.tool_calls ?? [])
+              .map((tc) => subagentsByCallId.get(tc.id ?? ""))
+              .filter((s): s is SubagentDiscoverySnapshot => !!s)
+          : [];
+
+        return (
+          <div key={message.id}>
+            <Message message={message} />
+            {turnSubagents.length > 0 && (
+              <div className="ml-4 space-y-3 border-l-2 border-blue-200 pl-4">
+                <SubagentProgress subagents={subagents} />
+                {turnSubagents.map((subagent) => (
+                  <SubagentCard key={subagent.id} stream={stream} subagent={subagent} />
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }
 ```
 
-<Tip>
-The synthesis phase can take several seconds for complex multi-expert
-workflows. A clear "Synthesizing results..." indicator prevents users from
-thinking the agent has stalled.
-</Tip>
-
-## Debug unfiltered output
-
-During development, you can temporarily set `filterSubagentMessages: false` to
-see the raw, interleaved output from all subagents in the main message stream.
-This is useful for verifying that subagent tokens are flowing correctly, but
-should not be used in production UIs.
-
-## Use cases
-
-Deep agent subagent cards are the right choice when your agent workflow
-involves:
-
-- **Deep research** where a coordinator dispatches researchers to investigate
-  different facets of a question, then synthesizes their findings
-- **Multi-expert analysis** such as domain specialists (legal, financial, technical)
-  each contribute their perspective
-- **Complex task decomposition** where a planner breaks a large task into subtasks
-  and assigns each to a specialist worker
-- **Code review pipelines** where separate agents handle security review, style
-  checking, performance analysis, and documentation review
-
-## Accessing the full subagents map
-
-Beyond per-message lookup, you can access all subagents at once through
-`stream.subagents`:
-
-```ts
-const allSubagents = [...stream.subagents.values()];
-const running = allSubagents.filter((s) => s.status === "running");
-const completed = allSubagents.filter((s) => s.status === "complete");
-const errors = allSubagents.filter((s) => s.status === "error");
-```
-
-This is useful for building global progress indicators or dashboards that
-summarize all subagent activity regardless of which coordinator message spawned
-them.
+You can combine inline cards with a global subagent view: index subagents by
+the coordinator tool call that spawned them for transcript cards, and use
+`stream.subagents` for a persistent sidebar that summarizes all active workers.
+That gives users both local context and a bird's-eye view of the whole run.
 
 ## Best practices
 
-- **Always set `filterSubagentMessages: true`**. Unfiltered streams produce an
-  unreadable interleaving of coordinator and subagent tokens.
-- **Show task descriptions**. The `toolCall.args.description` field tells users
-  exactly what each subagent was asked to do. Always display this prominently.
+- **Mount selectors only where needed**. Scoped messages and tool calls stream
+  when a card calls `useMessages(stream, subagent)` or `useToolCalls(stream, subagent)`.
+- **Show specialist names**. `subagent.name` tells users which worker is active.
 - **Use collapsible cards**. In workflows with 5+ subagents, auto-collapse
   completed cards so users can focus on active work.
-- **Display timing data**. Showing how long each subagent took helps users
-  understand performance characteristics and identify bottlenecks.
-- **Set an appropriate recursion limit**. Deep agent workflows with nested
-  subgraphs need higher limits than the default 25. Start with 100.
+- **Override recursion only when needed**. Deep Agents sets a high default
+  recursion limit; pass `config.recursion_limit` only for unusually deep custom
+  workflows.
 - **Handle errors per subagent**. One subagent failing shouldn't crash the
   entire UI. Show the error in that subagent's card while others continue
   running.
diff --git a/src/oss/deepagents/frontend/todo-list.mdx b/src/oss/deepagents/frontend/todo-list.mdx
index af0792affe..72213b2f93 100644
--- a/src/oss/deepagents/frontend/todo-list.mdx
+++ b/src/oss/deepagents/frontend/todo-list.mdx
@@ -12,16 +12,17 @@ the agent works through its plan. It's a progress dashboard built on the same
 not just message bubbles.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="deep-agent-todo-list" />
 
 ## How it works
 
-In a LangGraph agent, state isn't limited to messages. You can define **custom
-state keys** that hold arbitrary data. In this case, a `todos` array. As the
-agent executes its plan, it updates each todo's status from `"pending"` to
-`"in_progress"` to `"completed"`. The `useStream` hook exposes these custom
-state values via `stream.values`, and your UI renders them reactively.
+Deep agents include a built-in **`todos` state** that tracks task progress as
+the agent works through its plan. As the agent executes, it updates each
+todo's status from `"pending"` to `"in_progress"` to `"completed"`. The
+@[`useStream`] hook exposes this state via `stream.values.todos`, and your UI
+renders it reactively.
 
 The flow looks like this:
 
@@ -32,41 +33,12 @@ The flow looks like this:
 4. `stream.values.todos` updates in real time as the agent progresses
 5. Your UI re-renders the todo list with current statuses
 
-## Setting up useStream
+## Setting up `useStream`
 
-No special configuration is needed. Point `useStream` at your agent and
+No special configuration is needed. Point @[`useStream`] at your agent and
 read the `todos` from `stream.values`.
 
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values, including custom state keys like `todos`. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface TodoItem {
-  title: string;
-  status: "pending" | "in_progress" | "completed";
-  description?: string;
-}
-
-interface AgentState {
-  messages: BaseMessage[];
-  todos: TodoItem[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
@@ -126,17 +98,17 @@ const todos = computed(() => stream.values.value?.todos ?? []);
 
   const AGENT_URL = "http://localhost:2024";
 
-  const { messages, values, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "deep_agent_todo_list",
   });
 
-  $: todos = $values?.todos ?? [];
+  const todos = $derived(stream.values?.todos ?? []);
 </script>
 
 <div>
   <TodoList {todos} />
-  {#each $messages as msg (msg.id)}
+  {#each stream.messages as msg (msg.id)}
     <Message message={msg} />
   {/each}
 </div>
@@ -144,7 +116,7 @@ const todos = computed(() => stream.values.value?.todos ?? []);
 
 ```ts Angular
 import { Component, computed } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -160,7 +132,7 @@ const AGENT_URL = "http://localhost:2024";
   `,
 })
 export class TodoAgentComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "deep_agent_todo_list",
   });
@@ -170,25 +142,6 @@ export class TodoAgentComponent {
 ```
 </CodeGroup>
 
-## The Todo interface
-
-Each todo in the array has a simple structure:
-
-```ts
-interface Todo {
-  status: "pending" | "in_progress" | "completed";
-  content: string;
-}
-```
-
-| Property | Description |
-| --- | --- |
-| `status` | The current state of this task. Options: `pending` (not started), `in_progress` (agent is working on it), `completed` (done) |
-| `content` | A human-readable description of what the task involves |
-
-The agent populates this array when it creates its plan, then updates individual
-items as it executes each step.
-
 ## Building the TodoList component
 
 The todo list renders each item with a status icon, color coding, and visual
@@ -356,72 +309,6 @@ Show the todo list only when `todos.length > 0`. Before the agent creates its
 plan, there's nothing to display. Showing an empty component wastes space.
 </Tip>
 
-## Custom state beyond todos
-
-This pattern demonstrates a powerful principle: `stream.values` can expose
-**any custom state** your agent defines, not just messages. The `todos` array is
-just one example. You could use the same approach for:
-
-- **Progress metrics**: `stream.values.progress` with numeric completion data
-- **Generated artifacts**: `stream.values.document` with a structured document
-  the agent is building
-- **Decision logs**: `stream.values.decisions` tracking every choice the agent
-  made
-- **Resource lists**: `stream.values.sources` with links and references the
-  agent found
-
-```ts
-// Any custom state key your agent defines is accessible
-const document = stream.values?.document;
-const sources = stream.values?.sources ?? [];
-const confidence = stream.values?.confidence_score;
-```
-
-<Info>
-Custom state keys are defined in your LangGraph graph's state schema. The
-`useStream` hook automatically includes them in `stream.values` without any additional
-client-side configuration.
-</Info>
-
-## Animating transitions
-
-Todo status transitions happen in real time, and smooth animations make these
-changes feel polished rather than jarring:
-
-```tsx
-function TodoItem({ todo }: { todo: Todo }) {
-  return (
-    <li
-      className={`
-        flex items-start gap-3 rounded-md border px-3 py-2
-        transition-all duration-300 ease-in-out
-        ${getStatusStyles(todo.status)}
-      `}
-    >
-      <span
-        className={`
-          mt-0.5 text-lg leading-none transition-colors duration-300
-          ${getIconStyles(todo.status)}
-        `}
-      >
-        {getStatusIcon(todo.status)}
-      </span>
-      <span
-        className={`
-          text-sm transition-all duration-300
-          ${todo.status === "completed" ? "line-through opacity-60" : ""}
-        `}
-      >
-        {todo.content}
-      </span>
-    </li>
-  );
-}
-```
-
-The `transition-all duration-300` classes ensure that color changes,
-strikethrough, and opacity shifts all animate smoothly.
-
 ## Use cases
 
 The todo list pattern fits any scenario where an agent executes a structured
diff --git a/src/oss/deepagents/going-to-production.mdx b/src/oss/deepagents/going-to-production.mdx
index 237af9b2c1..c7391b953a 100644
--- a/src/oss/deepagents/going-to-production.mdx
+++ b/src/oss/deepagents/going-to-production.mdx
@@ -1039,7 +1039,7 @@ For the complete list of available middleware, see [prebuilt middleware](/oss/la
 
 ## Frontend
 
-Deep Agents use [`useStream`](/oss/langchain/frontend/overview) to connect your UI to the agent backend. `useStream` is a frontend hook (available for React, Vue, Svelte, and Angular) that streams messages, subagent progress, and custom state from your agent in real time.
+Deep Agents use [`useStream`](/oss/langchain/frontend/overview) to connect your UI to the agent backend. @[`useStream`] is a frontend hook (available for React, Vue, Svelte, and Angular) that streams messages, subagent progress, and custom state from your agent in real time.
 
 Locally, `useStream` points at `http://localhost:2024`. In production, point it at your [LangSmith Deployment](/langsmith/deployment) and configure reconnection so users don't lose progress if their connection drops.
 
diff --git a/src/oss/deepagents/streaming.mdx b/src/oss/deepagents/streaming.mdx
index 6fabcadbb0..1dca3faa1d 100644
--- a/src/oss/deepagents/streaming.mdx
+++ b/src/oss/deepagents/streaming.mdx
@@ -936,5 +936,5 @@ See the [LangGraph streaming docs](/oss/langgraph/streaming#stream-output-format
 ## Related
 
 - [Subagents](/oss/deepagents/subagents)—Configure and use subagents with Deep Agents
-- [Frontend streaming](/oss/deepagents/streaming/frontend)—Build React UIs with `useStream` for Deep Agents
+- [Frontend streaming](/oss/deepagents/streaming/frontend)—Build React UIs with @[`useStream`] for Deep Agents
 - [LangChain Event Streaming](/oss/langchain/event-streaming)—General streaming concepts with LangChain agents
diff --git a/src/oss/langchain/frontend/branching-chat.mdx b/src/oss/langchain/frontend/branching-chat.mdx
index 1de775715f..ae4c0c832b 100644
--- a/src/oss/langchain/frontend/branching-chat.mdx
+++ b/src/oss/langchain/frontend/branching-chat.mdx
@@ -1,66 +1,43 @@
 ---
 title: Branching chat
-description: Edit messages, regenerate responses, and navigate conversation branches
+description: Edit messages and regenerate responses by forking from checkpoints
 ---
 
 Conversations with AI agents are rarely linear. You may want to rephrase a
-question, regenerate a response you didn't like, or explore a completely
-different conversational path without losing your previous work. Branching chat
-brings version-control semantics to your chat UI. Every edit creates a new
-branch, and you can freely navigate between them.
+question, regenerate a response you didn't like, or explore a different
+conversational path without losing the checkpoint history. Branching chat uses
+LangGraph checkpoints as fork points: every edit or regeneration submits a new
+run from the selected message's parent checkpoint.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
 
 <PatternEmbed pattern="branching-chat" />
 
 import RequiresLanggraphServer from '/snippets/oss/requires-langgraph-server.mdx';
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <RequiresLanggraphServer />
 
 ## What is branching chat?
 
-Branching chat treats a conversation as a tree rather than a list. Each message
-is a node, and editing a message or regenerating a response creates a **fork**
-from that point. The original path is preserved as a sibling branch, so users
-can switch back and forth between different conversation trajectories.
+Branching chat treats a conversation as a checkpointed timeline rather than a
+flat list. Each message has metadata that points to the checkpoint before that
+message was created. Editing a message or regenerating a response submits a new
+run from that checkpoint.
 
 Key capabilities:
 
-- **Edit any user message:** rewrite a previous prompt and re-run the agent
-  from that point
-- **Regenerate any AI response:** ask the agent to produce a different answer
-  for the same input
-- **Navigate branches:** switch between different versions of the conversation
-  using per-message branch controls
+- **Edit any user message:** rewrite a previous prompt and re-run the agent from that point
+- **Regenerate any AI response:** ask the agent to produce a different answer for the same input
+- **Inspect history:** use the LangGraph client to load checkpoints when you need a branch timeline
 
-## Set up useStream with history
+## Set up stream metadata
 
-To enable branching, pass `fetchStateHistory: true` so that `useStream`
-retrieves checkpoint metadata needed for branch operations.
+Use the root stream for messages, then read per-message checkpoint metadata in
+the component that renders each message. The metadata includes the parent
+checkpoint ID to fork from.
 
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
@@ -71,25 +48,14 @@ const AGENT_URL = "http://localhost:2024";
 export function Chat() {
   const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
-    assistantId: "branching_chat",
-    fetchStateHistory: true,
+    assistantId: "simple_agent",
   });
 
   return (
     <div>
-      {stream.messages.map((msg) => {
-        const metadata = stream.getMessagesMetadata(msg);
-        return (
-          <Message
-            key={msg.id}
-            message={msg}
-            metadata={metadata}
-            onEdit={(text) => handleEdit(stream, msg, metadata, text)}
-            onRegenerate={() => handleRegenerate(stream, metadata)}
-            onBranchSwitch={(id) => stream.setBranch(id)}
-          />
-        );
-      })}
+      {stream.messages.map((msg) => (
+        <MessageWithForkControls key={msg.id} stream={stream} message={msg} />
+      ))}
     </div>
   );
 }
@@ -103,38 +69,17 @@ const AGENT_URL = "http://localhost:2024";
 
 const stream = useStream<typeof myAgent>({
   apiUrl: AGENT_URL,
-  assistantId: "branching_chat",
-  fetchStateHistory: true,
+  assistantId: "simple_agent",
 });
-
-function handleEdit(msg: any, metadata: any, text: string) {
-  const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-  if (!checkpoint) return;
-
-  stream.submit(
-    { messages: [{ ...msg, content: text }] },
-    { checkpoint }
-  );
-}
-
-function handleRegenerate(metadata: any) {
-  const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-  if (!checkpoint) return;
-
-  stream.submit(undefined, { checkpoint });
-}
 </script>
 
 <template>
   <div>
-    <Message
+    <MessageWithForkControls
       v-for="msg in stream.messages.value"
       :key="msg.id"
+      :stream="stream"
       :message="msg"
-      :metadata="stream.getMessagesMetadata(msg)"
-      @edit="(text) => handleEdit(msg, stream.getMessagesMetadata(msg), text)"
-      @regenerate="handleRegenerate(stream.getMessagesMetadata(msg))"
-      @branch-switch="(id) => stream.setBranch(id)"
     />
   </div>
 </template>
@@ -146,39 +91,17 @@ function handleRegenerate(metadata: any) {
 
   const AGENT_URL = "http://localhost:2024";
 
-  const { messages, getMessagesMetadata, setBranch, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
-    assistantId: "branching_chat",
-    fetchStateHistory: true,
+    assistantId: "simple_agent",
   });
-
-  function handleEdit(msg: any, metadata: any, text: string) {
-    const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-    if (!checkpoint) return;
-
-    submit(
-      { messages: [{ ...msg, content: text }] },
-      { checkpoint }
-    );
-  }
-
-  function handleRegenerate(metadata: any) {
-    const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-    if (!checkpoint) return;
-
-    submit(undefined, { checkpoint });
-  }
 </script>
 
 <div>
-  {#each $messages as msg (msg.id)}
-    {@const metadata = getMessagesMetadata(msg)}
+  {#each stream.messages as msg (msg.id)}
     <Message
       message={msg}
-      {metadata}
-      onEdit={(text) => handleEdit(msg, metadata, text)}
-      onRegenerate={() => handleRegenerate(metadata)}
-      onBranchSwitch={(id) => setBranch(id)}
+      {stream}
     />
   {/each}
 </div>
@@ -186,7 +109,7 @@ function handleRegenerate(metadata: any) {
 
 ```ts Angular
 import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -196,122 +119,137 @@ const AGENT_URL = "http://localhost:2024";
     @for (msg of stream.messages(); track msg.id) {
       <app-message
         [message]="msg"
-        [metadata]="stream.getMessagesMetadata(msg)"
-        (edit)="handleEdit(msg, stream.getMessagesMetadata(msg), $event)"
-        (regenerate)="handleRegenerate(stream.getMessagesMetadata(msg))"
-        (branchSwitch)="stream.setBranch($event)"
+        [stream]="stream"
       />
     }
   `,
 })
 export class ChatComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
-    assistantId: "branching_chat",
-    fetchStateHistory: true,
+    assistantId: "simple_agent",
   });
-
-  handleEdit(msg: any, metadata: any, text: string) {
-    const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-    if (!checkpoint) return;
-
-    this.stream.submit(
-      { messages: [{ ...msg, content: text }] },
-      { checkpoint }
-    );
-  }
-
-  handleRegenerate(metadata: any) {
-    const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-    if (!checkpoint) return;
-
-    this.stream.submit(undefined, { checkpoint });
-  }
 }
 ```
 </CodeGroup>
 
 ## Understand message metadata
 
-The `getMessagesMetadata(msg)` function returns branch information for each
-message:
+The `useMessageMetadata(stream, messageId)` helper returns @[MessageMetadata]
+for one message. Use it in the component that renders each message so the
+metadata stays scoped to that message ID:
 
-```ts
-interface MessageMetadata {
-  branch: string;
-  branchOptions: string[];
-  firstSeenState: {
-    parent_checkpoint: Checkpoint | null;
-  };
+```tsx
+import type { BaseMessage } from "langchain";
+import { useState } from "react";
+import { useMessageMetadata, useStream } from "@langchain/react";
+
+function Chat() {
+  const stream = useStream<typeof myAgent>({
+    apiUrl: AGENT_URL,
+    assistantId: "simple_agent",
+  });
+
+  return stream.messages.map((message) => (
+    <MessageWithForkControls
+      key={message.id}
+      stream={stream}
+      message={message}
+    />
+  ));
 }
-```
 
-| Property | Description |
-| --- | --- |
-| `branch` | The branch ID of this specific message version |
-| `branchOptions` | Array of all branch IDs available for this message position |
-| `firstSeenState.parent_checkpoint` | The checkpoint just before this message. Use it as the fork point for edits and regenerations |
+function MessageWithForkControls({
+  stream,
+  message,
+}: {
+  stream: ReturnType<typeof useStream>;
+  message: BaseMessage;
+}) {
+  const metadata = useMessageMetadata(stream, message.id);
+  const checkpointId = metadata?.parentCheckpointId;
+  const [editedText, setEditedText] = useState(message.text);
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (!checkpointId) return;
+
+        stream.submit(
+          { messages: [{ type: "human", content: editedText }] },
+          { forkFrom: { checkpointId } }
+        );
+      }}
+    >
+      <textarea
+        value={editedText}
+        onChange={(event) => setEditedText(event.target.value)}
+      />
+      <button disabled={!checkpointId || editedText === message.text}>
+        Submit edited branch
+      </button>
+    </form>
+  );
+}
+```
 
-When a message has only one version, `branchOptions` contains a single entry.
-After an edit or regeneration, new branch IDs are added to `branchOptions`,
-and you can navigate between them.
+`parentCheckpointId` is the checkpoint just before the message. Use it as the
+fork point for edits and regenerations.
 
 ## Edit a message
 
-To edit a user message and create a new branch:
+To edit a user message and fork the conversation:
 
-1. Get the `parent_checkpoint` from the message's metadata
-2. Submit the edited message with that checkpoint
-3. The agent re-runs from that point, creating a new branch
+1. Get `parentCheckpointId` from the message's metadata
+2. Submit the edited message with `forkFrom: { checkpointId }`
+3. The agent re-runs from that point
 
 ```ts
 function handleEdit(
   stream: ReturnType<typeof useStream>,
   originalMsg: HumanMessage,
-  metadata: MessageMetadata,
+  metadata: MessageMetadata | undefined,
   newText: string
 ) {
-  const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-  if (!checkpoint) return;
+  if (!metadata?.parentCheckpointId) return;
 
   stream.submit(
     {
-      messages: [{ ...originalMsg, content: newText }],
+      messages: [{ type: "human", content: newText }],
     },
-    { checkpoint }
+    { forkFrom: { checkpointId: metadata.parentCheckpointId } }
   );
 }
 ```
 
 After the edit:
 
-- The message's `branchOptions` gains a new entry
-- The view switches to the new branch automatically
 - The agent re-runs from the fork point with the updated message
-- The original version is preserved and accessible via the branch switcher
+- The original path remains available in the thread history
 
 ## Regenerate a response
 
 To regenerate an AI response without changing the input:
 
 1. Get the `parent_checkpoint` from the AI message's metadata
-2. Submit with `undefined` input and the parent checkpoint
-3. The agent produces a fresh response, creating a new branch
+2. Submit with empty input and `forkFrom: { checkpointId }`
+3. The agent produces a fresh response from that point
 
 ```ts
 function handleRegenerate(
   stream: ReturnType<typeof useStream>,
-  metadata: MessageMetadata
+  metadata: MessageMetadata | undefined
 ) {
-  const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-  if (!checkpoint) return;
+  if (!metadata?.parentCheckpointId) return;
 
-  stream.submit(undefined, { checkpoint });
+  stream.submit(undefined, {
+    forkFrom: { checkpointId: metadata.parentCheckpointId },
+  });
 }
 ```
 
-Each regeneration creates a new branch for the AI message at that position.
-Users can then use the branch switcher to compare different responses.
+Each regeneration creates a new path for the AI message at that position.
 
 <Tip>
 Regeneration is useful for non-deterministic agents. Since LLM outputs vary
@@ -319,68 +257,11 @@ with temperature, regenerating the same prompt often produces meaningfully
 different responses.
 </Tip>
 
-## Build a branch switcher
-
-When a message has multiple branches, show a compact inline control with the
-current version index and navigation arrows:
-
-```tsx
-function BranchSwitcher({
-  metadata,
-  onSwitch,
-}: {
-  metadata: MessageMetadata;
-  onSwitch: (branchId: string) => void;
-}) {
-  const { branch, branchOptions } = metadata;
-
-  if (branchOptions.length <= 1) return null;
-
-  const currentIndex = branchOptions.indexOf(branch);
-  const hasPrev = currentIndex > 0;
-  const hasNext = currentIndex < branchOptions.length - 1;
-
-  return (
-    <div className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
-      <button
-        disabled={!hasPrev}
-        onClick={() => onSwitch(branchOptions[currentIndex - 1])}
-        className="hover:text-gray-900 disabled:opacity-30"
-        aria-label="Previous version"
-      >
-        ◀
-      </button>
-      <span className="min-w-[3ch] text-center">
-        {currentIndex + 1}/{branchOptions.length}
-      </span>
-      <button
-        disabled={!hasNext}
-        onClick={() => onSwitch(branchOptions[currentIndex + 1])}
-        className="hover:text-gray-900 disabled:opacity-30"
-        aria-label="Next version"
-      >
-        ▶
-      </button>
-    </div>
-  );
-}
-```
-
-When the user clicks a branch arrow, call `stream.setBranch(branchId)` to
-switch the conversation view to that branch. This is instant since all branch
-data is already loaded via `fetchStateHistory: true`.
-
-<Note>
-Switching branches affects not only the target message but also all subsequent
-messages. If you switch to a different version of message 3, messages 4, 5, 6,
-etc. will also update to reflect the conversation that followed that version.
-</Note>
-
 ## How branching works under the hood
 
 LangGraph persists every state transition as a **checkpoint**. When you submit
-with a `checkpoint` parameter, the backend forks from that point instead of
-appending to the current conversation. The result is a tree structure:
+with `forkFrom`, the backend starts a new execution path from that point instead
+of appending to the current conversation. The result is a tree structure:
 
 ```
 User: "What is React?"
@@ -394,218 +275,22 @@ User: "Tell me about JSX" (edited from branch A)
   └─ AI: "JSX is a syntax extension..."
 ```
 
-Each branch is an independent path through the conversation tree. Switching
-branches updates the displayed messages but does not delete any data. All
-branches persist in the checkpoint store.
-
-## Complete message component
-
-Here is a full component that combines message display, editing, regeneration,
-and branch switching:
-
-```tsx
-function MessageWithBranching({
-  message,
-  metadata,
-  stream,
-}: {
-  message: BaseMessage;
-  metadata: MessageMetadata;
-  stream: ReturnType<typeof useStream>;
-}) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editText, setEditText] = useState(message.content as string);
-
-  const isHuman = message._getType() === "human";
-  const isAI = message._getType() === "ai";
-  const hasBranches = metadata.branchOptions.length > 1;
-
-  return (
-    <div className="group relative py-2">
-      {isEditing ? (
-        <EditForm
-          text={editText}
-          onChange={setEditText}
-          onSave={() => {
-            handleEdit(stream, message as HumanMessage, metadata, editText);
-            setIsEditing(false);
-          }}
-          onCancel={() => {
-            setEditText(message.content as string);
-            setIsEditing(false);
-          }}
-        />
-      ) : (
-        <>
-          <div className={isHuman ? "text-right" : "text-left"}>
-            <div
-              className={
-                isHuman
-                  ? "inline-block rounded-lg bg-blue-600 px-4 py-2 text-white"
-                  : "inline-block rounded-lg bg-gray-100 px-4 py-2"
-              }
-            >
-              {message.content as string}
-            </div>
-          </div>
-
-          <div className="mt-1 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
-            {isHuman && (
-              <button
-                className="text-xs text-gray-400 hover:text-gray-700"
-                onClick={() => setIsEditing(true)}
-              >
-                Edit
-              </button>
-            )}
-
-            {isAI && (
-              <button
-                className="text-xs text-gray-400 hover:text-gray-700"
-                onClick={() =>
-                  handleRegenerate(stream, metadata)
-                }
-              >
-                Regenerate
-              </button>
-            )}
-
-            {hasBranches && (
-              <BranchSwitcher
-                metadata={metadata}
-                onSwitch={(id) => stream.setBranch(id)}
-              />
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-function EditForm({
-  text,
-  onChange,
-  onSave,
-  onCancel,
-}: {
-  text: string;
-  onChange: (text: string) => void;
-  onSave: () => void;
-  onCancel: () => void;
-}) {
-  return (
-    <div className="space-y-2">
-      <textarea
-        className="w-full rounded-lg border p-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
-        value={text}
-        onChange={(e) => onChange(e.target.value)}
-        rows={3}
-      />
-      <div className="flex gap-2">
-        <button
-          className="rounded bg-blue-600 px-4 py-1.5 text-sm text-white hover:bg-blue-700"
-          onClick={onSave}
-        >
-          Save & Rerun
-        </button>
-        <button
-          className="rounded border px-4 py-1.5 text-sm hover:bg-gray-50"
-          onClick={onCancel}
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-```
-
-## Combine with optimistic updates
-
-Combine branching with optimistic updates for a seamless editing experience. When the user saves an edit, optimistically show the updated message before the server responds:
-
-```ts
-function handleEditOptimistic(
-  stream: ReturnType<typeof useStream>,
-  originalMsg: HumanMessage,
-  metadata: MessageMetadata,
-  newText: string
-) {
-  const checkpoint = metadata.firstSeenState?.parent_checkpoint;
-  if (!checkpoint) return;
-
-  const updatedMsg = { ...originalMsg, content: newText };
-
-  stream.submit(
-    { messages: [updatedMsg] },
-    {
-      checkpoint,
-      optimisticValues: (prev) => {
-        if (!prev?.messages) return { messages: [updatedMsg] };
-
-        const idx = prev.messages.findIndex((m) => m.id === originalMsg.id);
-        if (idx === -1) return prev;
-
-        return {
-          ...prev,
-          messages: [...prev.messages.slice(0, idx), updatedMsg],
-        };
-      },
-    }
-  );
-}
-```
-
-## Add keyboard navigation
-
-For power users, add keyboard shortcuts to navigate branches:
-
-```tsx
-useEffect(() => {
-  function handleKeyDown(e: KeyboardEvent) {
-    if (!focusedMessageMetadata) return;
-
-    const { branch, branchOptions } = focusedMessageMetadata;
-    const idx = branchOptions.indexOf(branch);
-
-    if (e.altKey && e.key === "ArrowLeft" && idx > 0) {
-      stream.setBranch(branchOptions[idx - 1]);
-    }
-    if (e.altKey && e.key === "ArrowRight" && idx < branchOptions.length - 1) {
-      stream.setBranch(branchOptions[idx + 1]);
-    }
-  }
-
-  window.addEventListener("keydown", handleKeyDown);
-  return () => window.removeEventListener("keydown", handleKeyDown);
-}, [focusedMessageMetadata, stream]);
-```
-
-<Tip>
-`Alt + ←` / `Alt + →` is a natural mapping for branch navigation since it
-mirrors browser back/forward navigation.
-</Tip>
+Each path is persisted in the checkpoint store. Use
+`stream.client.threads.getHistory(threadId)` when you want to build a separate
+timeline view across checkpoints.
 
 ## Best practices
 
-- **Always enable `fetchStateHistory`**: without it, `getMessagesMetadata`
-  cannot return branch information.
-- **Only show the branch switcher when there are multiple branches**: a
-  `1/1` indicator adds clutter without value.
-- **Show branch controls on hover**: branch navigation arrows and edit buttons
-  should appear on hover to keep the UI clean.
-- **Keep the branch switcher compact**: it sits inline with message controls
-  and should not dominate the UI.
-- **Preserve scroll position**: when switching branches, try to keep the
-  viewport anchored to the message that changed.
-- **Indicate the active branch**: use subtle visual cues (e.g., a colored dot
-  or branch label) so users know which branch they're viewing.
+- **Read metadata near the message**: call `useMessageMetadata` in the component
+  that renders the message controls.
+- **Show fork controls on hover**: edit and regenerate buttons should appear on
+  hover to keep the UI clean.
+- **Refresh history on demand**: call `client.threads.getHistory()` only when
+  rendering a timeline or after a fork settles.
 - **Disable controls while streaming**: don't allow edits or regeneration
   while the agent is actively streaming a response. Check `stream.isLoading`
   before enabling these actions.
 - **Preserve edit text on cancel**: if the user starts editing, then cancels,
   reset the textarea to the original message content.
-- **Test with deep branch trees**: users who edit and regenerate frequently
-  can create many branches. Ensure the branch switcher and data handling
-  remain performant.
+- **Test with deep checkpoint trees**: users who edit and regenerate frequently
+  can create many paths. Ensure timeline rendering remains performant.
diff --git a/src/oss/langchain/frontend/generative-ui.mdx b/src/oss/langchain/frontend/generative-ui.mdx
index 8aa779d5f4..7108967222 100644
--- a/src/oss/langchain/frontend/generative-ui.mdx
+++ b/src/oss/langchain/frontend/generative-ui.mdx
@@ -46,6 +46,13 @@ const catalog = defineCatalog(schema, {
         padding: z.enum(["sm", "md", "lg"]).optional(),
       }),
     },
+    Stack: {
+      description: "Layout children vertically or horizontally with consistent spacing",
+      props: z.object({
+        direction: z.enum(["vertical", "horizontal"]).optional(),
+        gap: z.enum(["sm", "md", "lg"]).optional(),
+      }),
+    },
     TextInput: {
       description: "A text input field with optional label and placeholder",
       props: z.object({
@@ -91,6 +98,11 @@ const { registry } = defineRegistry(catalog, {
         {children}
       </div>
     ),
+    Stack: ({ props, children }) => (
+      <div className={`stack stack-${props.direction ?? "vertical"} gap-${props.gap ?? "md"}`}>
+        {children}
+      </div>
+    ),
     TextInput: ({ props }) => (
       <div>
         {props.label && <label>{props.label}</label>}
@@ -118,6 +130,8 @@ const { registry } = defineRegistry(catalog, {
         props.title ? h("h2", null, props.title) : null,
         children,
       ]),
+    Stack: ({ props, children }) =>
+      h("div", { class: `stack stack-${props.direction ?? "vertical"} gap-${props.gap ?? "md"}` }, children),
     TextInput: ({ props }) =>
       h("div", null, [
         props.label ? h("label", null, props.label) : null,
@@ -142,7 +156,7 @@ with your agent's assistant ID, then extract the spec from the AI message's
 
 ```tsx React
 import { useStream } from "@langchain/react";
-import { AIMessage } from "@langchain/core/messages";
+import { AIMessage } from "langchain";
 
 function GenerativeUI() {
   const stream = useStream<typeof myAgent>({
@@ -160,7 +174,7 @@ function GenerativeUI() {
 ```vue Vue
 <script setup lang="ts">
 import { useStream } from "@langchain/vue";
-import { AIMessage } from "@langchain/core/messages";
+import { AIMessage } from "langchain";
 import { computed } from "vue";
 
 const stream = useStream<typeof myAgent>({
@@ -176,29 +190,29 @@ const rawSpec = computed(() => aiMessage.value?.tool_calls?.[0]?.args);
 ```svelte Svelte
 <script lang="ts">
   import { useStream } from "@langchain/svelte";
-  import { AIMessage } from "@langchain/core/messages";
+  import { AIMessage } from "langchain";
 
-  const { messages, isLoading } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
     assistantId: "generative_ui",
   });
 
-  const aiMessage = $derived($messages.find((m) => AIMessage.isInstance(m)));
+  const aiMessage = $derived(stream.messages.find((m) => AIMessage.isInstance(m)));
   const rawSpec = $derived(aiMessage?.tool_calls?.[0]?.args);
 </script>
 ```
 
 ```ts Angular
 import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
-import { AIMessage } from "@langchain/core/messages";
+import { injectStream } from "@langchain/angular";
+import { AIMessage } from "langchain";
 
 @Component({
   selector: "app-generative-ui",
   template: `...`,
 })
 export class GenerativeUIComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
     assistantId: "generative_ui",
   });
diff --git a/src/oss/langchain/frontend/human-in-the-loop.mdx b/src/oss/langchain/frontend/human-in-the-loop.mdx
index 3acf133ece..9eab55120e 100644
--- a/src/oss/langchain/frontend/human-in-the-loop.mdx
+++ b/src/oss/langchain/frontend/human-in-the-loop.mdx
@@ -9,7 +9,13 @@ irreversible operation, you need a human to review and approve the action first.
 The Human-in-the-Loop (HITL) pattern lets your agent pause execution, present
 the pending action to the user, and resume only after explicit approval.
 
+Because HITL is built on LangGraph interrupts and checkpoints, the pause is
+durable. A user can refresh the page, a reviewer can answer from a different
+component, and the agent still resumes from the exact point where execution
+stopped instead of replaying the whole run.
+
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="human-in-the-loop" />
 
@@ -19,37 +25,26 @@ LangGraph agents support **interrupts**, explicit pause points where the agent
 yields control back to the client. When the agent hits an interrupt:
 
 1. The agent stops executing and emits an interrupt payload
-2. The `useStream` hook surfaces the interrupt via `stream.interrupt`
+2. The @[`useStream`] hook surfaces the interrupt via `stream.interrupt`
 3. Your UI renders a review card with approve/reject/edit options
 4. The user makes a decision
 5. Your code calls `stream.submit()` with a resume command
 6. The agent picks up where it left off
 
-## Setting up useStream for HITL
-
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
+The frontend SDK keeps the interrupt alongside the rest of the thread state, so
+your UI can render it wherever it makes sense: inline in the transcript, in a
+review queue, in an admin dashboard, or in a modal that blocks the next user
+action until the decision is made.
 
-:::
+## Setting up `useStream`
 
-:::js
+Connect @[`useStream`] to your human-in-the-loop agent. When the graph hits an
+interrupt, the hook exposes the pending payload on `stream.interrupt`. Render an
+approval card while that value is set, then resume the run with
+`stream.submit(null, { command: { resume: response } })` after the user
+approves, rejects, or edits the action.
 
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
@@ -121,30 +116,30 @@ function handleRespond(response: HITLResponse) {
 
   const AGENT_URL = "http://localhost:2024";
 
-  const { messages, interrupt, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "human_in_the_loop",
   });
 
   function handleRespond(response: HITLResponse) {
-    submit(null, { command: { resume: response } });
+    stream.submit(null, { command: { resume: response } });
   }
 </script>
 
 <div>
-  {#each $messages as msg (msg.id)}
+  {#each stream.messages as msg (msg.id)}
     <Message message={msg} />
   {/each}
 
-  {#if $interrupt}
-    <ApprovalCard interrupt={$interrupt} onRespond={handleRespond} />
+  {#if stream.interrupt}
+    <ApprovalCard interrupt={stream.interrupt} onRespond={handleRespond} />
   {/if}
 </div>
 ```
 
 ```ts Angular
 import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 import type { HITLResponse } from "langchain";
 
 const AGENT_URL = "http://localhost:2024";
@@ -164,7 +159,7 @@ const AGENT_URL = "http://localhost:2024";
   `,
 })
 export class ChatComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "human_in_the_loop",
   });
@@ -178,7 +173,7 @@ export class ChatComponent {
 
 ## The interrupt payload
 
-When the agent pauses, `stream.interrupt` contains a `HITLRequest` with the
+When the agent pauses, `stream.interrupt` contains a @[HITLRequest] with the
 following structure:
 
 ```ts
@@ -188,7 +183,7 @@ interface HITLRequest {
 }
 
 interface ActionRequest {
-  action: string;
+  name: string;
   args: Record<string, unknown>;
   description?: string;
 }
@@ -201,7 +196,7 @@ interface ReviewConfig {
 | Property | Description |
 | --- | --- |
 | `actionRequests` | Array of pending actions the agent wants to perform |
-| `actionRequests[].action` | The action name (e.g. `"send_email"`, `"delete_record"`) |
+| `actionRequests[].name` | The action name (e.g. `"send_email"`, `"delete_record"`) |
 | `actionRequests[].args` | Structured arguments for the action |
 | `actionRequests[].description` | Optional human-readable description of what the action does |
 | `reviewConfigs` | Per-action configuration controlling which decisions are allowed |
@@ -217,7 +212,7 @@ The user confirms the action should proceed as-is:
 
 ```ts
 const response: HITLResponse = {
-  decision: "approve",
+  decisions: [{ type: "approve" }],
 };
 
 stream.submit(null, { command: { resume: response } });
@@ -229,8 +224,12 @@ The user denies the action with an optional reason:
 
 ```ts
 const response: HITLResponse = {
-  decision: "reject",
-  reason: "The email tone is too aggressive. Please revise.",
+  decisions: [
+    {
+      type: "reject",
+      message: "The email tone is too aggressive. Please revise.",
+    },
+  ],
 };
 
 stream.submit(null, { command: { resume: response } });
@@ -248,12 +247,19 @@ The user modifies the action's arguments before approving:
 
 ```ts
 const response: HITLResponse = {
-  decision: "edit",
-  args: {
-    ...originalArgs,
-    subject: "Updated subject line",
-    body: "Revised email body with softer language.",
-  },
+  decisions: [
+    {
+      type: "edit",
+      editedAction: {
+        name: actionRequest.name,
+        args: {
+          ...actionRequest.args,
+          subject: "Updated subject line",
+          body: "Revised email body with softer language.",
+        },
+      },
+    },
+  ],
 };
 
 stream.submit(null, { command: { resume: response } });
@@ -265,8 +271,7 @@ The user provides a direct reply for "ask user" style tools. The `message` becom
 
 ```ts
 const response: HITLResponse = {
-  decision: "respond",
-  message: "Blue.",
+  decisions: [{ type: "respond", message: "Blue." }],
 };
 
 stream.submit(null, { command: { resume: response } });
@@ -278,140 +283,42 @@ Use `respond` when the tool is intentionally a placeholder for human input — f
 
 ## Building the ApprovalCard
 
-Here is a full approval card component that handles all four decision types:
+Here is the decision wiring used by the approval cards. The UI can split each
+action into its own card, but the resume payload is a single `HITLResponse`
+with one decision per pending action:
 
 ```tsx
-function ApprovalCard({
-  interrupt,
-  onRespond,
-}: {
-  interrupt: { value: HITLRequest };
-  onRespond: (response: HITLResponse) => void;
-}) {
-  const request = interrupt.value;
-  const [editedArgs, setEditedArgs] = useState(
-    request.actionRequests[0]?.args ?? {}
-  );
-  const [rejectReason, setRejectReason] = useState("");
-  const [respondMessage, setRespondMessage] = useState("");
-  const [mode, setMode] = useState<"review" | "edit" | "reject" | "respond">("review");
-
-  const action = request.actionRequests[0];
-  const config = request.reviewConfigs[0];
-
-  if (!action || !config) return null;
-
-  return (
-    <div className="rounded-lg border-2 border-amber-300 bg-amber-50 p-4">
-      <h3 className="font-semibold text-amber-800">Action Review Required</h3>
-      <p className="mt-1 text-sm text-amber-700">
-        {action.description ?? `The agent wants to perform: ${action.action}`}
-      </p>
-
-      <div className="mt-3 rounded bg-white p-3 font-mono text-sm">
-        <pre>{JSON.stringify(action.args, null, 2)}</pre>
-      </div>
-
-      {mode === "review" && (
-        <div className="mt-4 flex gap-2">
-          {config.allowedDecisions.includes("approve") && (
-            <button
-              className="rounded bg-green-600 px-4 py-2 text-white"
-              onClick={() => onRespond({ decision: "approve" })}
-            >
-              Approve
-            </button>
-          )}
-          {config.allowedDecisions.includes("reject") && (
-            <button
-              className="rounded bg-red-600 px-4 py-2 text-white"
-              onClick={() => setMode("reject")}
-            >
-              Reject
-            </button>
-          )}
-          {config.allowedDecisions.includes("edit") && (
-            <button
-              className="rounded bg-blue-600 px-4 py-2 text-white"
-              onClick={() => setMode("edit")}
-            >
-              Edit
-            </button>
-          )}
-          {config.allowedDecisions.includes("respond") && (
-            <button
-              className="rounded bg-purple-600 px-4 py-2 text-white"
-              onClick={() => setMode("respond")}
-            >
-              Respond
-            </button>
-          )}
-        </div>
-      )}
-
-      {mode === "reject" && (
-        <div className="mt-4 space-y-2">
-          <textarea
-            className="w-full rounded border p-2"
-            placeholder="Reason for rejection..."
-            value={rejectReason}
-            onChange={(e) => setRejectReason(e.target.value)}
-          />
-          <button
-            className="rounded bg-red-600 px-4 py-2 text-white"
-            onClick={() =>
-              onRespond({ decision: "reject", reason: rejectReason })
-            }
-          >
-            Confirm Rejection
-          </button>
-        </div>
-      )}
+async function approveAll() {
+  const resume: HITLResponse = {
+    decisions: actionRequests.map(() => ({ type: "approve" })),
+  };
+  await stream.submit(null, { command: { resume } });
+}
 
-      {mode === "edit" && (
-        <div className="mt-4 space-y-2">
-          <textarea
-            className="w-full rounded border p-2 font-mono text-sm"
-            value={JSON.stringify(editedArgs, null, 2)}
-            onChange={(e) => {
-              try {
-                setEditedArgs(JSON.parse(e.target.value));
-              } catch {
-                // allow invalid JSON while editing
-              }
-            }}
-          />
-          <button
-            className="rounded bg-blue-600 px-4 py-2 text-white"
-            onClick={() =>
-              onRespond({ decision: "edit", args: editedArgs })
-            }
-          >
-            Submit Edits
-          </button>
-        </div>
-      )}
+async function rejectOne(index: number, message: string) {
+  const resume: HITLResponse = {
+    decisions: actionRequests.map((_, i) =>
+      i === index
+        ? { type: "reject", message }
+        : { type: "reject", message: "Rejected along with other actions" },
+    ),
+  };
+  await stream.submit(null, { command: { resume } });
+}
 
-      {mode === "respond" && (
-        <div className="mt-4 space-y-2">
-          <textarea
-            className="w-full rounded border p-2"
-            placeholder="Your response..."
-            value={respondMessage}
-            onChange={(e) => setRespondMessage(e.target.value)}
-          />
-          <button
-            className="rounded bg-purple-600 px-4 py-2 text-white"
-            onClick={() =>
-              onRespond({ decision: "respond", message: respondMessage })
-            }
-          >
-            Send Response
-          </button>
-        </div>
-      )}
-    </div>
-  );
+async function editOne(index: number, editedArgs: Record<string, unknown>) {
+  const originalAction = actionRequests[index];
+  const resume: HITLResponse = {
+    decisions: actionRequests.map((_, i) =>
+      i === index
+        ? {
+            type: "edit",
+            editedAction: { name: originalAction.name, args: editedArgs },
+          }
+        : { type: "approve" },
+    ),
+  };
+  await stream.submit(null, { command: { resume } });
 }
 ```
 
@@ -420,12 +327,13 @@ function ApprovalCard({
 After the user makes a decision, the full cycle looks like this:
 
 1. Call `stream.submit(null, { command: { resume: hitlResponse } })`
-2. The `useStream` hook sends the resume command to the LangGraph backend
-3. The agent receives the `HITLResponse` and continues execution. The HITL response may be one of:
-    - `"approve"`: The agent continues executing the next action
-    - `"reject"`: The agent receives the rejection reasoning and decides its next step
-    - `"edit"`: The agent runs the tool with the edited arguments
-    - `"respond"`: The human's message is returned directly as the tool result without executing the tool
+2. The @[`useStream`] hook sends the resume command to the LangGraph backend
+3. The agent receives the `HITLResponse` and continues execution. Each entry in
+   `decisions` may be one of:
+    - `{ type: "approve" }`: The agent continues executing the action
+    - `{ type: "reject", message }`: The agent receives the rejection message and decides its next step
+    - `{ type: "edit", editedAction }`: The agent runs the tool with edited arguments
+    - `{ type: "respond", message }`: The human's message is returned directly as the tool result without executing the tool
 4. The `interrupt` property resets to `null` as the agent resumes streaming
 
 <Tip>
@@ -434,17 +342,6 @@ agent might ask for approval to search, then ask again before sending an email
 with the results. Each interrupt is handled independently.
 </Tip>
 
-## Common use cases
-
-| Use Case | Action | Review Config |
-| --- | --- | --- |
-| Email sending | `send_email` | `["approve", "reject", "edit"]` |
-| Database writes | `update_record` | `["approve", "reject"]` |
-| Financial transactions | `transfer_funds` | `["approve", "reject"]` |
-| File deletion | `delete_files` | `["approve", "reject"]` |
-| API calls to external services | `call_api` | `["approve", "reject", "edit"]` |
-| Collecting user input | `ask_user` | `["respond"]` |
-
 ## Handling multiple pending actions
 
 An interrupt can contain multiple `actionRequests` when the agent wants to
@@ -457,9 +354,9 @@ function MultiActionReview({
   onRespond,
 }: {
   interrupt: { value: HITLRequest };
-  onRespond: (responses: HITLResponse[]) => void;
+  onRespond: (response: HITLResponse) => void;
 }) {
-  const [decisions, setDecisions] = useState<Record<number, HITLResponse>>({});
+  const [decisions, setDecisions] = useState<Record<number, HITLResponse["decisions"][number]>>({});
   const request = interrupt.value;
 
   const allDecided =
@@ -481,9 +378,9 @@ function MultiActionReview({
         <button
           className="rounded bg-green-600 px-4 py-2 text-white"
           onClick={() =>
-            onRespond(
-              request.actionRequests.map((_, i) => decisions[i])
-            )
+            onRespond({
+              decisions: request.actionRequests.map((_, i) => decisions[i]),
+            })
           }
         >
           Submit All Decisions
@@ -505,7 +402,7 @@ Keep these guidelines in mind when implementing HITL workflows:
 - **Validate edited args**. When users edit action arguments, validate the
   JSON structure before sending. Show inline errors for malformed input.
 - **Persist the interrupt state**. If the user refreshes the page, the
-  interrupt should still be visible. `useStream` handles this via the thread's
+  interrupt should still be visible. @[`useStream`] handles this via the thread's
   checkpoint.
 - **Log all decisions**. For audit trails, log every approve/reject/edit
   decision with timestamps and the user who made the decision.
diff --git a/src/oss/langchain/frontend/integrations/ai-elements.mdx b/src/oss/langchain/frontend/integrations/ai-elements.mdx
index 931a8dbc09..72bffbefa8 100644
--- a/src/oss/langchain/frontend/integrations/ai-elements.mdx
+++ b/src/oss/langchain/frontend/integrations/ai-elements.mdx
@@ -24,7 +24,7 @@ import { ExampleEmbed } from "/snippets/example-embed.jsx"
 Install AI Elements components via the CLI. They're added as editable source files into your project:
 
 ```bash
-npm install @langchain/react @ai-elements/react
+npm install @langchain/react
 npx ai-elements@latest add conversation message prompt-input tool reasoning suggestion
 ```
 
@@ -34,7 +34,7 @@ Render AI Elements components directly from `stream.messages`. Each LangChain `B
 
 ```tsx
 import { useStream } from "@langchain/react";
-import { HumanMessage, AIMessage } from "@langchain/core/messages";
+import { HumanMessage, AIMessage } from "langchain";
 
 import {
   Conversation,
@@ -66,10 +66,27 @@ import {
   PromptInputSubmit,
 } from "@/components/ai-elements/prompt-input";
 
+function getReasoningText(msg: AIMessage) {
+  return msg.contentBlocks.find((block) => block.type === "reasoning")?.reasoning ?? "";
+}
+
+function getTextContent(msg: AIMessage) {
+  return msg.text;
+}
+
+function getToolCalls(msg: AIMessage) {
+  return (msg.tool_calls ?? []).map((tc) => ({
+    id: tc.id,
+    name: tc.name,
+    args: tc.args,
+    state: "input-available" as const,
+  }));
+}
+
 export function Chat() {
   const stream = useStream({
     apiUrl: "http://localhost:2024",
-    assistantId: "agent",
+    assistantId: "ai_elements",
   });
 
   return (
@@ -80,7 +97,7 @@ export function Chat() {
             if (HumanMessage.isInstance(msg)) {
               return (
                 <Message key={i} from="user">
-                  <MessageContent>{msg.content as string}</MessageContent>
+                  <MessageContent>{msg.text}</MessageContent>
                 </Message>
               );
             }
@@ -142,6 +159,6 @@ export function Chat() {
 ## Best practices
 
 - **Edit source files freely:** components ship in your project, not as an external package dependency, so you can change anything without forking
-- **Use `MessageResponse` for streaming:** it handles streamed partial tokens correctly; avoid rendering raw `msg.content` directly during streaming
+- **Use `MessageResponse` for streaming:** it handles streamed partial tokens correctly; avoid rendering raw message content directly during streaming
 - **Wrap in `Conversation`:** the `Conversation` component manages scroll behaviour so new messages auto-scroll into view
 - **Gate on `isInstance`:** use `HumanMessage.isInstance(msg)` and `AIMessage.isInstance(msg)` rather than checking `msg.getType()` for proper TypeScript narrowing
diff --git a/src/oss/langchain/frontend/integrations/assistant-ui.mdx b/src/oss/langchain/frontend/integrations/assistant-ui.mdx
index b1e22286fe..694051cbb0 100644
--- a/src/oss/langchain/frontend/integrations/assistant-ui.mdx
+++ b/src/oss/langchain/frontend/integrations/assistant-ui.mdx
@@ -3,7 +3,7 @@ title: assistant-ui
 description: Headless React AI chat framework with a full runtime layer, bridged to useStream
 ---
 
-[assistant-ui](https://www.assistant-ui.com/) is a headless React UI framework for AI chat. It provides a full runtime layer—thread management, message branching, attachment handling—that connects to `useStream` via the `useExternalStoreRuntime` adapter.
+[assistant-ui](https://www.assistant-ui.com/) is a headless React UI framework for AI chat. It provides a full runtime layer—thread management, message branching, attachment handling—that connects to @[`useStream`] via the `useExternalStoreRuntime` adapter.
 
 import { ExampleEmbed } from "/snippets/example-embed.jsx"
 
@@ -15,7 +15,7 @@ import { ExampleEmbed } from "/snippets/example-embed.jsx"
 
 ## How it works
 
-1. **Stream with `useStream`** — connect to your agent and get reactive messages, loading state, and submit/cancel callbacks
+1. **Stream with @[`useStream`]** — connect to your agent and get reactive messages, loading state, and submit/cancel callbacks
 2. **Adapt with `useExternalStoreRuntime`** — bridge `stream.messages` into assistant-ui's runtime format by converting `BaseMessage[]` to `ThreadMessageLike[]`
 3. **Provide the runtime** — wrap your UI in `AssistantRuntimeProvider` and render any assistant-ui thread component
 
@@ -25,7 +25,7 @@ import { ExampleEmbed } from "/snippets/example-embed.jsx"
 bun add @assistant-ui/react @assistant-ui/react-markdown
 ```
 
-## Wiring useStream
+## Wiring `useStream`
 
 The `useExternalStoreRuntime` adapter bridges `stream.messages` into the assistant-ui runtime. Pass it to `AssistantRuntimeProvider` and render any thread component:
 
@@ -43,7 +43,7 @@ import { Thread } from "@assistant-ui/react";
 export function Chat() {
   const stream = useStream({
     apiUrl: "http://localhost:2024",
-    assistantId: "agent",
+    assistantId: "claude",
   });
 
   const onNew = useCallback(
@@ -83,7 +83,7 @@ export function Chat() {
 `toThreadMessages` maps LangChain `BaseMessage[]` to the `ThreadMessageLike[]` format assistant-ui expects. Handle each message type — human, AI, and tool — and convert content blocks, tool calls, and reasoning tokens:
 
 ```tsx expandable
-import { AIMessage, HumanMessage, ToolMessage } from "@langchain/core/messages";
+import { AIMessage, HumanMessage, ToolMessage, type BaseMessage } from "langchain";
 import type { ThreadMessageLike } from "@assistant-ui/react";
 
 export function toThreadMessages(messages: BaseMessage[]): ThreadMessageLike[] {
@@ -93,14 +93,14 @@ export function toThreadMessages(messages: BaseMessage[]): ThreadMessageLike[] {
     if (HumanMessage.isInstance(msg)) {
       result.push({
         role: "user",
-        content: [{ type: "text", text: getTextContent(msg.content) }],
+        content: [{ type: "text", text: msg.text }],
       });
     } else if (AIMessage.isInstance(msg)) {
       const parts: ThreadMessageLike["content"] = [];
 
       // Reasoning tokens
-      const reasoning = getReasoningText(msg);
-      if (reasoning) parts.push({ type: "reasoning", reasoning });
+      const reasoning = msg.contentBlocks.find((block) => block.type === "reasoning")?.reasoning;
+      if (reasoning) parts.push({ type: "reasoning", text: reasoning });
 
       // Tool calls
       for (const tc of msg.tool_calls ?? []) {
@@ -113,7 +113,7 @@ export function toThreadMessages(messages: BaseMessage[]): ThreadMessageLike[] {
       }
 
       // Text response
-      const text = getTextContent(msg.content);
+      const text = msg.text;
       if (text) parts.push({ type: "text", text });
 
       result.push({ role: "assistant", content: parts });
@@ -126,7 +126,7 @@ export function toThreadMessages(messages: BaseMessage[]): ThreadMessageLike[] {
             part.type === "tool-call" &&
             part.toolCallId === msg.tool_call_id
           ) {
-            (part as { result?: string }).result = getTextContent(msg.content);
+            (part as { result?: string }).result = msg.text;
           }
         }
       }
@@ -164,5 +164,5 @@ function CustomThread() {
 
 - **Memoise message conversion:** wrap `toThreadMessages(stream.messages)` in `useMemo` to avoid re-running the conversion on every render
 - **Handle attachments:** use `CompositeAttachmentAdapter` with `SimpleImageAttachmentAdapter` for image uploads; extend with custom adapters for files
-- **Use branching:** assistant-ui has built-in message branching support via `MessageBranch`; edit a message to regenerate from that point
-- **Thread persistence:** `useStream` with `fetchStateHistory: true` and `reconnectOnMount: true` gives assistant-ui access to the full thread history on page load
+- **Use branching:** assistant-ui has built-in message branching support via `MessageBranch`; pair edits with `useMessageMetadata` and `forkFrom` when you need LangGraph checkpoint forks
+- **Thread persistence:** persist `threadId` with `onThreadId` and pass it back into @[`useStream`] on page load so assistant-ui reconnects to the same thread
diff --git a/src/oss/langchain/frontend/integrations/openui.mdx b/src/oss/langchain/frontend/integrations/openui.mdx
index dbd4e8d391..3b168fef07 100644
--- a/src/oss/langchain/frontend/integrations/openui.mdx
+++ b/src/oss/langchain/frontend/integrations/openui.mdx
@@ -104,9 +104,7 @@ const SYSTEM_PROMPT = openuiLibrary.prompt({ ... });
 export function App() {
   const stream = useStream({
     apiUrl: import.meta.env.VITE_LANGGRAPH_API_URL ?? "/api/langgraph",
-    assistantId: "my_agent",
-    reconnectOnMount: true,
-    fetchStateHistory: true,
+    assistantId: "openui",
   });
 
   const handleSubmit = useCallback(
@@ -147,7 +145,7 @@ function MessageList({ messages, isLoading }) {
 
   return messages.map((msg, i) => {
     if (AIMessage.isInstance(msg)) {
-      const text = typeof msg.content === "string" ? msg.content : "";
+      const text = msg.text;
       return (
         <Renderer
           key={msg.id ?? i}
@@ -190,7 +188,7 @@ With hoisting enabled (recommended), the `root` line is written first so the pag
 
 ## Progressive rendering utilities
 
-Wiring `useStream` to `Renderer` directly causes results in re-rendering on every streaming token and produces hundreds of no-op re-parses per response. This causes chart components to crash when their data hasn't arrived yet. The utilities below solve these problems:
+Wiring @[`useStream`] to `Renderer` directly causes results in re-rendering on every streaming token and produces hundreds of no-op re-parses per response. This causes chart components to crash when their data hasn't arrived yet. The utilities below solve these problems:
 
 | Problem | Solution |
 | --- | --- |
@@ -458,7 +456,7 @@ export function MessageList({ messages, isLoading, onSubmit }) {
       return (
         <div key={msg.id ?? i} className="flex justify-end">
           <div className="user-bubble">
-            {typeof msg.content === "string" ? msg.content : ""}
+            {msg.text}
           </div>
         </div>
       );
@@ -466,7 +464,7 @@ export function MessageList({ messages, isLoading, onSubmit }) {
 
     if (msg.getType() === "ai") {
       const raw = sanitizeIdentifiers(
-        stripCodeFence(typeof msg.content === "string" ? msg.content : ""),
+        stripCodeFence(msg.text),
       );
       if (!raw) return null;
       return (
diff --git a/src/oss/langchain/frontend/integrations/overview.mdx b/src/oss/langchain/frontend/integrations/overview.mdx
index 3285986f97..68a7242792 100644
--- a/src/oss/langchain/frontend/integrations/overview.mdx
+++ b/src/oss/langchain/frontend/integrations/overview.mdx
@@ -3,7 +3,7 @@ title: Overview
 description: Connect useStream to any React UI component library or generative UI framework
 ---
 
-@[`useStream`] is UI-agnostic. It returns plain reactive state with messages, tool calls, loading flags, and thread history that you wire to any visual layer you choose. These pages show how different libraries integrate with LangChain frontends, each with a different philosophy for building AI chat and generative UI.
+@[`useStream`] is UI-agnostic. It returns plain reactive state with messages, tool calls, loading flags, values, and thread metadata that you wire to any visual layer you choose. These pages show how different libraries integrate with LangChain frontends, each with a different philosophy for building AI chat and generative UI.
 
 ## Integrations
 
diff --git a/src/oss/langchain/frontend/join-rejoin.mdx b/src/oss/langchain/frontend/join-rejoin.mdx
index 163e401209..40c15fd37a 100644
--- a/src/oss/langchain/frontend/join-rejoin.mdx
+++ b/src/oss/langchain/frontend/join-rejoin.mdx
@@ -10,6 +10,7 @@ import { PatternEmbed } from "/snippets/pattern-embed.jsx"
 <PatternEmbed pattern="join-rejoin" />
 
 import RequiresLanggraphServer from '/snippets/oss/requires-langgraph-server.mdx';
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <RequiresLanggraphServer />
 
@@ -29,70 +30,68 @@ The join/rejoin pattern involves three key mechanisms:
 
 | Method / Option | Purpose |
 |---|---|
-| `stream.stop()` | Disconnect the client from the stream without stopping the agent |
-| `stream.joinStream(runId)` | Reconnect to an existing stream by its run ID |
-| `onDisconnect: "continue"` | Submit option that tells the server to keep running after client disconnects |
-| `streamResumable: true` | Submit option that enables the stream to be rejoined later |
+| `threadId` | Bind the stream to the LangGraph thread you want to observe |
+| `onThreadId` | Persist newly-created thread IDs so a remount can reconnect |
+| `stream.disconnect()` | Leave the stream client-side while the agent keeps running server-side |
+| Remount with the same `threadId` | Reattach to in-flight work for that thread |
 
 <Note>
-`stream.stop()` is fundamentally different from cancelling a run. Stopping only disconnects the **client**. The agent continues processing server-side. To actually cancel the agent's execution, you would use interrupt or cancel mechanisms instead.
+**Join/rejoin uses `stream.disconnect()`, not `stream.stop()`.** By default, `stream.stop()` **cancels the active run**: it disconnects the client *and* cancels the run on the server. For join/rejoin, call `stream.disconnect()` (alias for `stop({ cancel: false })`) so the agent continues processing while you are away.
+
+To cancel execution explicitly from app code, use `stream.stop()` or @[`client.runs.cancel`].
 </Note>
 
 ## Setting up `useStream`
 
-The key setup step is capturing the `run_id` from the `onCreated` callback so you can rejoin later.
-
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
+The key setup step is persisting `threadId`. When the component remounts with
+the same thread ID, the stream attaches to the thread's current state and any
+in-flight run.
 
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 
 ```tsx React
 import { useStream } from "@langchain/react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 function Chat() {
-  const [savedRunId, setSavedRunId] = useState<string | null>(null);
+  const [connected, setConnected] = useState(true);
+  const [mountKey, setMountKey] = useState(0);
+  const [threadId, setThreadId] = useState<string | null>(
+    () => sessionStorage.getItem("activeThreadId"),
+  );
 
   const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
     assistantId: "join_rejoin",
-    onCreated(run) {
-      setSavedRunId(run.run_id);
+    threadId,
+    onThreadId(id) {
+      setThreadId(id);
+      if (id) sessionStorage.setItem("activeThreadId", id);
     },
   });
 
-  const isConnected = stream.isLoading;
+  const disconnect = useCallback(() => {
+    void stream.disconnect();
+    setConnected(false);
+  }, [stream]);
+
+  const rejoin = useCallback(() => {
+    setMountKey((key) => key + 1);
+    setConnected(true);
+  }, []);
 
   return (
-    <div>
-      <ConnectionStatus connected={isConnected} />
+    <div key={mountKey}>
+      <ConnectionStatus connected={connected} />
       <MessageList messages={stream.messages} />
       <ChatControls
         stream={stream}
-        savedRunId={savedRunId}
-        isConnected={isConnected}
+        threadId={threadId}
+        connected={connected}
+        onDisconnect={disconnect}
+        onRejoin={rejoin}
       />
     </div>
   );
@@ -102,29 +101,43 @@ function Chat() {
 ```vue Vue
 <script setup lang="ts">
 import { useStream } from "@langchain/vue";
-import { ref, computed } from "vue";
+import { ref } from "vue";
 
-const savedRunId = ref<string | null>(null);
+const connected = ref(true);
+const mountKey = ref(0);
+const threadId = ref<string | null>(sessionStorage.getItem("activeThreadId"));
 
 const stream = useStream<typeof myAgent>({
   apiUrl: "http://localhost:2024",
   assistantId: "join_rejoin",
-  onCreated(run) {
-    savedRunId.value = run.run_id;
+  threadId,
+  onThreadId(id) {
+    threadId.value = id;
+    if (id) sessionStorage.setItem("activeThreadId", id);
   },
 });
 
-const isConnected = computed(() => stream.isLoading.value);
+function disconnect() {
+  void stream.disconnect();
+  connected.value = false;
+}
+
+function rejoin() {
+  mountKey.value += 1;
+  connected.value = true;
+}
 </script>
 
 <template>
-  <div>
-    <ConnectionStatus :connected="isConnected" />
+  <div :key="mountKey">
+    <ConnectionStatus :connected="connected" />
     <MessageList :messages="stream.messages" />
     <ChatControls
       :stream="stream"
-      :savedRunId="savedRunId"
-      :isConnected="isConnected"
+      :threadId="threadId"
+      :connected="connected"
+      @disconnect="disconnect"
+      @rejoin="rejoin"
     />
   </div>
 </template>
@@ -134,313 +147,140 @@ const isConnected = computed(() => stream.isLoading.value);
 <script lang="ts">
   import { useStream } from "@langchain/svelte";
 
-  let savedRunId: string | null = null;
+  let connected = $state(true);
+  let mountKey = $state(0);
+  let threadId = $state<string | null>(sessionStorage.getItem("activeThreadId"));
 
-  const { messages, isLoading, submit, stop, joinStream } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
     assistantId: "join_rejoin",
-    onCreated(run) {
-      savedRunId = run.run_id;
+    threadId: () => threadId,
+    onThreadId(id) {
+      threadId = id;
+      if (id) sessionStorage.setItem("activeThreadId", id);
     },
   });
+
+  function disconnect() {
+    void stream.disconnect();
+    connected = false;
+  }
+
+  function rejoin() {
+    mountKey += 1;
+    connected = true;
+  }
 </script>
 
-<div>
-  <ConnectionStatus connected={$isLoading} />
-  <MessageList messages={$messages} />
+<div key={mountKey}>
+  <ConnectionStatus {connected} />
+  <MessageList messages={stream.messages} />
   <ChatControls
-    {savedRunId}
-    isConnected={$isLoading}
-    on:disconnect={() => stop()}
-    on:rejoin={() => joinStream(savedRunId)}
+    {threadId}
+    {connected}
+    onDisconnect={disconnect}
+    onRejoin={rejoin}
   />
 </div>
 ```
 
 ```ts Angular
 import { Component, signal } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 
 @Component({
   selector: "app-chat",
   template: `
-    <connection-status [connected]="stream.isLoading()" />
+    <connection-status [connected]="connected()" />
     <message-list [messages]="stream.messages()" />
     <chat-controls
       [stream]="stream"
-      [savedRunId]="savedRunId()"
-      [isConnected]="stream.isLoading()"
+      [threadId]="threadId()"
+      [connected]="connected()"
+      (disconnect)="disconnect()"
+      (rejoin)="rejoin()"
     />
   `,
 })
 export class ChatComponent {
-  savedRunId = signal<string | null>(null);
+  threadId = signal<string | null>(sessionStorage.getItem("activeThreadId"));
+  connected = signal(true);
+  mountKey = signal(0);
 
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
     assistantId: "join_rejoin",
-    onCreated: (run) => {
-      this.savedRunId.set(run.run_id);
+    threadId: this.threadId,
+    onThreadId: (id) => {
+      this.threadId.set(id);
+      if (id) sessionStorage.setItem("activeThreadId", id);
     },
   });
+
+  disconnect() {
+    void this.stream.disconnect();
+    this.connected.set(false);
+  }
+
+  rejoin() {
+    this.mountKey.update((key) => key + 1);
+    this.connected.set(true);
+  }
 }
 ```
 
 </CodeGroup>
 
-## Submitting with resumable options
+## Submitting messages
 
-When you submit a message, pass `onDisconnect: "continue"` and `streamResumable: true` to enable the join/rejoin flow:
+Submit messages normally. The thread ID binding is what allows a later remount
+to reconnect to the same conversation:
 
 ```ts
-stream.submit(
-  { messages: [{ type: "human", content: text }] },
-  {
-    onDisconnect: "continue",
-    streamResumable: true,
-  }
-);
+stream.submit({ messages: [{ type: "human", content: text }] });
 ```
 
-| Option | Default | Description |
-|---|---|---|
-| `onDisconnect` | `"cancel"` | What happens when the client disconnects. `"continue"` keeps the agent running; `"cancel"` stops it. |
-| `streamResumable` | `false` | When `true`, the server retains the stream state so a client can rejoin later. |
-
-<Tip>
-Always use both options together. Setting `onDisconnect: "continue"` without `streamResumable: true` means the agent keeps running but you cannot rejoin the stream to see its output.
-</Tip>
-
 ## Disconnecting from a stream
 
-Call `stream.stop()` to disconnect the client. The agent continues processing server-side.
+Call `stream.disconnect()` to leave the stream without cancelling the run. The agent continues processing server-side.
 
 ```ts
-stream.stop();
+await stream.disconnect();
+// equivalent to: await stream.stop({ cancel: false })
 ```
 
-After calling `stop()`:
+Do **not** use `stream.stop()` here — by default it cancels the run on the server.
+
+After calling `disconnect()`:
 - `stream.isLoading` becomes `false`
+- Your own `connected` flag should also become `false`
 - The message list retains all messages received up to the disconnect point
 - The agent continues running on the server
 - No new messages are received until you rejoin
 
 ## Rejoining a stream
 
-Call `stream.joinStream(runId)` with the saved run ID to reconnect:
+Remount the stream consumer with the saved thread ID to reconnect. In React, the
+demo bumps a `mountKey`; in other frameworks, use the equivalent remount or
+conditional-render pattern:
 
 ```ts
-stream.joinStream(savedRunId);
+setMountKey((key) => key + 1);
+setConnected(true);
 ```
 
 After rejoining:
-- `stream.isLoading` becomes `true` again
+- `connected` becomes `true`
 - Any messages generated while disconnected are delivered
 - New streaming messages resume in real-time
-- If the agent has already finished, you receive the final state immediately
-
-## Building a connection status indicator
-
-A visual indicator helps users understand whether they are actively receiving updates from the agent.
-
-```tsx
-function ConnectionStatus({ connected }: { connected: boolean }) {
-  return (
-    <div className="connection-status">
-      <span
-        className={`status-dot ${connected ? "connected" : "disconnected"}`}
-      />
-      <span className="status-text">
-        {connected ? "Connected" : "Disconnected"}
-      </span>
-    </div>
-  );
-}
-```
-
-Style the indicator with a green/red dot:
-
-```css
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-  margin-right: 6px;
-}
-
-.status-dot.connected {
-  background-color: #22c55e;
-  box-shadow: 0 0 4px #22c55e;
-}
-
-.status-dot.disconnected {
-  background-color: #ef4444;
-  box-shadow: 0 0 4px #ef4444;
-}
-```
-
-## Disconnect and rejoin controls
-
-Provide explicit buttons for disconnecting and rejoining so users have full control:
-
-```tsx
-function ChatControls({ stream, savedRunId, isConnected }) {
-  const [input, setInput] = useState("");
-
-  const handleSend = () => {
-    if (!input.trim()) return;
-    stream.submit(
-      { messages: [{ type: "human", content: input.trim() }] },
-      { onDisconnect: "continue", streamResumable: true }
-    );
-    setInput("");
-  };
-
-  return (
-    <div className="controls">
-      <div className="input-row">
-        <input
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Type a message..."
-          onKeyDown={(e) => e.key === "Enter" && handleSend()}
-        />
-        <button onClick={handleSend}>Send</button>
-      </div>
-
-      <div className="stream-controls">
-        {isConnected ? (
-          <button onClick={() => stream.stop()} className="disconnect-btn">
-            Disconnect
-          </button>
-        ) : (
-          savedRunId && (
-            <button
-              onClick={() => stream.joinStream(savedRunId)}
-              className="rejoin-btn"
-            >
-              Rejoin stream
-            </button>
-          )
-        )}
-      </div>
-    </div>
-  );
-}
-```
-
-## Persisting the run ID
-
-For cross-session rejoin (e.g., the user closes the browser and returns later), persist the run ID to storage:
-
-```ts
-const stream = useStream<typeof myAgent>({
-  apiUrl: "http://localhost:2024",
-  assistantId: "join_rejoin",
-  onCreated(run) {
-    localStorage.setItem("activeRunId", run.run_id);
-  },
-});
-
-// On page load, check for an active run
-const existingRunId = localStorage.getItem("activeRunId");
-if (existingRunId) {
-  stream.joinStream(existingRunId);
-}
-```
-
-<Info>
-Persisted run IDs should be cleaned up when a run completes. Listen for the stream to finish and remove the stored ID to avoid attempting to rejoin completed runs.
-</Info>
-
-## Error handling
-
-Rejoining can fail if the run has expired, been deleted, or if the server has restarted. Handle these cases gracefully:
-
-```ts
-try {
-  stream.joinStream(savedRunId);
-} catch (error) {
-  console.error("Failed to rejoin stream:", error);
-  // Clear stale run ID and inform the user
-  setSavedRunId(null);
-  localStorage.removeItem("activeRunId");
-}
-```
-
-## Complete example
-
-```tsx
-function JoinRejoinChat() {
-  const [savedRunId, setSavedRunId] = useState<string | null>(null);
-  const [input, setInput] = useState("");
-
-  const stream = useStream<typeof myAgent>({
-    apiUrl: "http://localhost:2024",
-    assistantId: "join_rejoin",
-    onCreated(run) {
-      setSavedRunId(run.run_id);
-    },
-  });
-
-  const isConnected = stream.isLoading;
-
-  const handleSend = () => {
-    if (!input.trim()) return;
-    stream.submit(
-      { messages: [{ type: "human", content: input.trim() }] },
-      { onDisconnect: "continue", streamResumable: true }
-    );
-    setInput("");
-  };
-
-  return (
-    <div className="chat-container">
-      <header>
-        <h2>Join & Rejoin Demo</h2>
-        <ConnectionStatus connected={isConnected} />
-      </header>
-
-      <div className="messages">
-        {stream.messages.map((msg, i) => (
-          <MessageBubble key={i} message={msg} />
-        ))}
-      </div>
-
-      <div className="controls">
-        <form onSubmit={(e) => { e.preventDefault(); handleSend(); }}>
-          <input
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Type a message..."
-          />
-          <button type="submit">Send</button>
-        </form>
-
-        <div className="stream-actions">
-          {isConnected ? (
-            <button onClick={() => stream.stop()}>
-              Disconnect
-            </button>
-          ) : (
-            savedRunId && (
-              <button onClick={() => stream.joinStream(savedRunId)}>
-                Rejoin stream
-              </button>
-            )
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-```
+- If the agent is still running, `stream.isLoading` becomes `true`; if it has
+  already finished, you receive the final state immediately
 
 ## Best practices
 
-- **Always save the run ID**: without it, rejoining is impossible. Use both component state and persistent storage for resilience.
+- **Use `disconnect()` for join/rejoin, `stop()` to cancel**: navigating away or backgrounding the app should call `stream.disconnect()`. A user-facing "Stop" or "Cancel" button should call `stream.stop()` (or @[`client.runs.cancel`]).
+- **Always save the thread ID**: without it, rejoining is impossible. Use both component state and persistent storage for resilience.
 - **Show clear connection state**: users should always know whether they are receiving live updates or viewing a snapshot.
 - **Auto-rejoin on visibility change**: use the Page Visibility API to automatically rejoin when the user returns to the tab.
 - **Set reasonable timeouts**: if a rejoin attempt takes too long, fall back to fetching the thread history instead.
-- **Clean up completed runs**: remove persisted run IDs when the agent finishes to avoid stale rejoin attempts.
+- **Clean up stale threads**: remove persisted thread IDs when the user starts over or the backend reports that the thread is unavailable.
diff --git a/src/oss/langchain/frontend/markdown-messages.mdx b/src/oss/langchain/frontend/markdown-messages.mdx
index 45413dda8d..d4d2a4f27c 100644
--- a/src/oss/langchain/frontend/markdown-messages.mdx
+++ b/src/oss/langchain/frontend/markdown-messages.mdx
@@ -10,6 +10,7 @@ markdown in real time as it streams from the agent, across all major frontend
 frameworks.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="markdown-messages" />
 
@@ -17,7 +18,7 @@ import { PatternEmbed } from "/snippets/pattern-embed.jsx"
 
 The rendering pipeline has three steps:
 
-1. **Receive:** `useStream` accumulates the streamed text into `msg.text` on
+1. **Receive:** @[`useStream`] accumulates the streamed text into `msg.text` on
    each AI message, updating reactively as new tokens arrive.
 2. **Parse:** A markdown parser converts the raw text to HTML (or a React
    element tree). This runs on every update but is fast enough for chat-length
@@ -25,39 +26,17 @@ The rendering pipeline has three steps:
 3. **Render:** The parsed output is rendered into the DOM. React uses virtual
    DOM diffing; Vue and Svelte use `v-html` / `{@html}` with sanitized HTML.
 
-## Setting up useStream
+## Setting up `useStream`
 
 The markdown pattern uses a simple chat agent with no special configuration.
-Wire up `useStream` with your agent URL and assistant ID.
+Wire up @[`useStream`] with your agent URL and assistant ID.
 
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
 import { useStream } from "@langchain/react";
-import { AIMessage, HumanMessage } from "@langchain/core/messages";
+import { AIMessage, HumanMessage } from "langchain";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -85,7 +64,7 @@ export function Chat() {
 ```vue Vue
 <script setup lang="ts">
 import { useStream } from "@langchain/vue";
-import { AIMessage, HumanMessage } from "@langchain/core/messages";
+import { AIMessage, HumanMessage } from "langchain";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -108,18 +87,18 @@ const stream = useStream<typeof myAgent>({
 ```svelte Svelte
 <script lang="ts">
   import { useStream } from "@langchain/svelte";
-  import { AIMessage, HumanMessage } from "@langchain/core/messages";
+  import { AIMessage, HumanMessage } from "langchain";
 
   const AGENT_URL = "http://localhost:2024";
 
-  const { messages, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "simple_agent",
   });
 </script>
 
 <div>
-  {#each $messages as msg (msg.id)}
+  {#each stream.messages as msg (msg.id)}
     {#if AIMessage.isInstance(msg)}
       <Markdown content={msg.text} />
     {:else if HumanMessage.isInstance(msg)}
@@ -131,7 +110,7 @@ const stream = useStream<typeof myAgent>({
 
 ```ts Angular
 import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -144,7 +123,7 @@ const AGENT_URL = "http://localhost:2024";
   `,
 })
 export class ChatComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "simple_agent",
   });
@@ -309,62 +288,6 @@ on each token is sufficient. Only optimize if you observe janky scrolling or
 dropped frames with very long messages.
 </Info>
 
-## Styling markdown content
-
-Apply styles to the `.markdown-content` class to control the appearance of
-rendered markdown. These are the essential styles:
-
-```css
-.markdown-content p {
-  margin: 0.4em 0;
-}
-
-.markdown-content ul,
-.markdown-content ol {
-  margin: 0.4em 0;
-  padding-left: 1.4em;
-}
-
-.markdown-content pre {
-  overflow-x: auto;
-  border-radius: 0.375rem;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0.5rem;
-  font-size: 0.75rem;
-}
-
-.markdown-content code {
-  border-radius: 0.25rem;
-  background: rgba(0, 0, 0, 0.08);
-  padding: 0.125rem 0.25rem;
-  font-size: 0.75rem;
-}
-
-.markdown-content blockquote {
-  margin: 0.4em 0;
-  padding-left: 0.75em;
-  border-left: 3px solid currentColor;
-  opacity: 0.8;
-}
-
-.markdown-content table {
-  border-collapse: collapse;
-  margin: 0.4em 0;
-}
-
-.markdown-content th,
-.markdown-content td {
-  border: 1px solid #e5e7eb;
-  padding: 0.25em 0.5em;
-}
-```
-
-<Tip>
-Keep markdown styles compact for chat bubbles. Chat messages are smaller than
-blog posts, so use tighter margins and smaller font sizes than a typical prose
-stylesheet.
-</Tip>
-
 ## Best practices
 
 - **Always sanitize:** when using `v-html`, `{@html}`, or `[innerHTML]`,
diff --git a/src/oss/langchain/frontend/message-queues.mdx b/src/oss/langchain/frontend/message-queues.mdx
index a441444041..05e8f50c2b 100644
--- a/src/oss/langchain/frontend/message-queues.mdx
+++ b/src/oss/langchain/frontend/message-queues.mdx
@@ -3,13 +3,14 @@ title: Message queues
 description: Queue multiple messages and manage them while the agent processes sequentially
 ---
 
-Message queuing lets users send multiple messages in rapid succession without waiting for the agent to finish processing the current one. Each message is enqueued server-side and processed sequentially, giving you full visibility and control over the pending queue.
+Message queuing lets users send multiple messages in rapid succession without waiting for the agent to finish processing the current one. Each message is accepted immediately, queued for the active thread, and processed sequentially, giving you full visibility and control over the pending work.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
 
 <PatternEmbed pattern="message-queues" />
 
 import RequiresLanggraphServer from '/snippets/oss/requires-langgraph-server.mdx';
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <RequiresLanggraphServer />
 
@@ -24,20 +25,28 @@ In a typical chat interface, users must wait for the agent to finish responding
 
 Message queuing solves this by accepting all submissions immediately and processing them in order.
 
+This is an agent UX primitive rather than a cosmetic chat feature. The SDK keeps
+track of the queue as part of the stream controller, so your UI can show pending
+work, cancel stale requests, and keep the composer active while the current run
+continues.
+
 ## How it works
 
-Under the hood, LangGraph uses `multitaskStrategy: "enqueue"` to manage concurrent submissions. When a message is submitted while the agent is already processing, it gets added to a server-side queue. Once the current run completes, the next queued message is picked up automatically.
+Pass `multitaskStrategy: "enqueue"` when you want a submission to wait behind
+the currently running request. While the agent is processing, queued submissions
+are added to the active thread's queue. Once the current run completes, the
+next queued message is dispatched automatically.
 
-The `useStream` hook exposes a `queue` property that provides real-time visibility into pending messages:
+Read queue state with the companion queue helper for your framework:
 
 | Property | Type | Description |
 |---|---|---|
-| `queue.entries` | `QueueEntry[]` | Array of all pending queue entries |
+| `queue.entries` | `SubmissionQueueEntry[]` | Array of all pending queue entries |
 | `queue.size` | `number` | Number of entries currently in the queue |
 | `queue.cancel(id)` | `(id: string) => Promise<void>` | Cancel a specific queued entry by ID |
 | `queue.clear()` | `() => Promise<void>` | Cancel all queued entries |
 
-Each `QueueEntry` object contains:
+Each @[SubmissionQueueEntry] object contains:
 
 | Field | Type | Description |
 |---|---|---|
@@ -48,40 +57,26 @@ Each `QueueEntry` object contains:
 
 ## Setting up `useStream`
 
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
+Connect @[`useStream`] to your agent, then pair it with the submission queue
+helper for your framework. Call `stream.submit()` to send messages while a run
+is in progress; pass `multitaskStrategy: "enqueue"` on submissions that should
+wait behind the active request. Read `queue.entries` and `queue.size` to render
+pending work, and use `queue.cancel()` or `queue.clear()` to remove items before
+they start processing.
 
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 
 ```tsx React
-import { useStream } from "@langchain/react";
+import { useStream, useSubmissionQueue } from "@langchain/react";
 
 function Chat() {
   const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
-    assistantId: "message_queue",
+    assistantId: "simple_agent",
   });
+  const queue = useSubmissionQueue(stream);
 
   const handleSubmit = (text: string) => {
     stream.submit({
@@ -89,14 +84,13 @@ function Chat() {
     });
   };
 
-  // Access queue state
-  const pendingCount = stream.queue.size;
-  const entries = stream.queue.entries;
+  const pendingCount = queue.size;
+  const entries = queue.entries;
 
   return (
     <div>
       <MessageList messages={stream.messages} />
-      {pendingCount > 0 && <QueueList entries={entries} queue={stream.queue} />}
+      {pendingCount > 0 && <QueueList entries={entries} queue={queue} />}
       <ChatInput onSubmit={handleSubmit} />
     </div>
   );
@@ -105,12 +99,14 @@ function Chat() {
 
 ```vue Vue
 <script setup lang="ts">
-import { useStream } from "@langchain/vue";
+import { useStream, useSubmissionQueue } from "@langchain/vue";
+import { computed } from "vue";
 
 const stream = useStream<typeof myAgent>({
   apiUrl: "http://localhost:2024",
-  assistantId: "message_queue",
+  assistantId: "simple_agent",
 });
+const queue = useSubmissionQueue(stream);
 
 function handleSubmit(text: string) {
   stream.submit({
@@ -118,15 +114,14 @@ function handleSubmit(text: string) {
   });
 }
 
-// Access queue state via .value in script
-const pendingCount = computed(() => stream.queue.value.size);
-const entries = computed(() => stream.queue.value.entries);
+const pendingCount = computed(() => queue.size.value);
+const entries = computed(() => queue.entries.value);
 </script>
 
 <template>
   <div>
     <MessageList :messages="stream.messages" />
-    <QueueList v-if="stream.queue.size > 0" :entries="stream.queue.entries" :queue="stream.queue" />
+    <QueueList v-if="pendingCount > 0" :entries="entries" :queue="queue" />
     <ChatInput @submit="handleSubmit" />
   </div>
 </template>
@@ -134,24 +129,25 @@ const entries = computed(() => stream.queue.value.entries);
 
 ```svelte Svelte
 <script lang="ts">
-  import { useStream } from "@langchain/svelte";
+  import { useStream, useSubmissionQueue } from "@langchain/svelte";
 
-  const { messages, submit, queue } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
-    assistantId: "message_queue",
+    assistantId: "simple_agent",
   });
+  const queue = useSubmissionQueue(stream);
 
   function handleSubmit(text: string) {
-    submit({
+    stream.submit({
       messages: [{ type: "human", content: text }],
     });
   }
 </script>
 
 <div>
-  <MessageList messages={$messages} />
-  {#if $queue.size > 0}
-    <QueueList entries={$queue.entries} queue={$queue} />
+  <MessageList messages={stream.messages} />
+  {#if queue.size > 0}
+    <QueueList entries={queue.entries} {queue} />
   {/if}
   <ChatInput on:submit={(e) => handleSubmit(e.detail)} />
 </div>
@@ -159,23 +155,24 @@ const entries = computed(() => stream.queue.value.entries);
 
 ```ts Angular
 import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream, injectSubmissionQueue } from "@langchain/angular";
 
 @Component({
   selector: "app-chat",
   template: `
     <message-list [messages]="stream.messages()" />
-    @if (stream.queue().size > 0) {
-      <queue-list [entries]="stream.queue().entries" [queue]="stream.queue()" />
+    @if (queue.size() > 0) {
+      <queue-list [entries]="queue.entries()" [queue]="queue" />
     }
     <chat-input (onSubmit)="handleSubmit($event)" />
   `,
 })
 export class ChatComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
-    assistantId: "message_queue",
+    assistantId: "simple_agent",
   });
+  queue = injectSubmissionQueue(this.stream);
 
   handleSubmit(text: string) {
     this.stream.submit({
@@ -201,7 +198,7 @@ function QueueList({ entries, queue }) {
       </div>
       <ul className="queue-entries">
         {entries.map((entry) => {
-          const text = entry.values?.messages?.[0]?.content ?? "Unknown";
+          const text = entry.values?.messages?.at(-1)?.content ?? "Pending...";
           return (
             <li key={entry.id} className="queue-entry">
               <span className="queue-text">{text}</span>
@@ -262,7 +259,7 @@ stream.submit(
   { messages: [{ type: "human", content: "What is quantum computing?" }] },
   {
     onCreated(run) {
-      console.log("Run created:", run.run_id);
+      console.log("Run created:", run.runId);
       // Chain a follow-up
       stream.submit({
         messages: [{ type: "human", content: "Give me a simple analogy." }],
@@ -277,16 +274,19 @@ immediately, and the follow-up is queued behind it.
 
 ## Starting a new thread
 
-When a user wants to begin a fresh conversation, use `switchThread(null)` to create a new thread. This clears the current message history and queue.
+When a user wants to begin a fresh conversation, update the reactive `threadId`
+that you pass into the stream. Passing `null` clears the current thread binding;
+the next submission creates a new thread.
 
 <CodeGroup>
 
 ```tsx React
 function NewThreadButton() {
-  const stream = useStream<typeof myAgent>({ /* ... */ });
+  const [threadId, setThreadId] = useState<string | null>(null);
+  const stream = useStream<typeof myAgent>({ threadId, onThreadId: setThreadId });
 
   return (
-    <button onClick={() => stream.switchThread(null)}>
+    <button onClick={() => setThreadId(null)}>
       New conversation
     </button>
   );
@@ -295,92 +295,43 @@ function NewThreadButton() {
 
 ```vue Vue
 <script setup lang="ts">
-const stream = useStream<typeof myAgent>({ /* ... */ });
+const threadId = ref<string | null>(null);
+const stream = useStream<typeof myAgent>({
+  threadId,
+  onThreadId: (id) => (threadId.value = id),
+});
 </script>
 
 <template>
-  <button @click="stream.switchThread(null)">New conversation</button>
+  <button @click="threadId = null">New conversation</button>
 </template>
 ```
 
 ```svelte Svelte
 <script lang="ts">
-  const { switchThread } = useStream<typeof myAgent>({ /* ... */ });
+  let threadId = $state<string | null>(null);
+  const stream = useStream<typeof myAgent>({
+    threadId: () => threadId,
+    onThreadId: (id) => (threadId = id),
+  });
 </script>
 
-<button on:click={() => switchThread(null)}>New conversation</button>
+<button onclick={() => (threadId = null)}>New conversation</button>
 ```
 
 ```ts Angular
-stream = useStream<typeof myAgent>({ /* ... */ });
+threadId = signal<string | null>(null);
+stream = injectStream<typeof myAgent>({
+  threadId: this.threadId,
+  onThreadId: (id) => this.threadId.set(id),
+});
 
 // In template:
-// <button (click)="stream.switchThread(null)">New conversation</button>
+// <button (click)="threadId.set(null)">New conversation</button>
 ```
 
 </CodeGroup>
 
-## Complete example
-
-Putting it all together, here is a full chat component with queue management:
-
-```tsx
-function QueueChat() {
-  const stream = useStream<typeof myAgent>({
-    apiUrl: "http://localhost:2024",
-    assistantId: "message_queue",
-  });
-
-  const [input, setInput] = useState("");
-
-  const handleSubmit = () => {
-    if (!input.trim()) return;
-    stream.submit({
-      messages: [{ type: "human", content: input.trim() }],
-    });
-    setInput("");
-  };
-
-  return (
-    <div className="chat-container">
-      <header>
-        <h2>Queue Chat</h2>
-        <button onClick={() => stream.switchThread(null)}>New thread</button>
-      </header>
-
-      <div className="messages">
-        {stream.messages.map((msg, i) => (
-          <MessageBubble key={i} message={msg} />
-        ))}
-        {stream.isLoading && <TypingIndicator />}
-      </div>
-
-      {stream.queue.size > 0 && (
-        <div className="queue-panel">
-          <strong>Queued ({stream.queue.size})</strong>
-          <button onClick={() => stream.queue.clear()}>Clear all</button>
-          {stream.queue.entries.map((entry) => (
-            <div key={entry.id} className="queue-item">
-              <span>{entry.values?.messages?.[0]?.content}</span>
-              <button onClick={() => stream.queue.cancel(entry.id)}>×</button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
-        <input
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Type a message (you can send multiple!)"
-        />
-        <button type="submit">Send</button>
-      </form>
-    </div>
-  );
-}
-```
-
 ## Best practices
 
 - **Limit queue size**: While there is no hard client-side limit on queue size,
diff --git a/src/oss/langchain/frontend/overview.mdx b/src/oss/langchain/frontend/overview.mdx
index e3a08a6aae..216d81ce61 100644
--- a/src/oss/langchain/frontend/overview.mdx
+++ b/src/oss/langchain/frontend/overview.mdx
@@ -3,11 +3,24 @@ title: Overview
 description: Build generative UIs with real-time streaming from LangChain agents
 ---
 
-Build rich, interactive frontends for agents created with `createAgent`. These patterns cover everything from basic message rendering to advanced workflows like human-in-the-loop approval and time travel debugging.
+Build rich, interactive frontends for agents created with `createAgent`. These
+patterns cover everything from basic message rendering to advanced workflows
+like human-in-the-loop approval, queued submissions, durable stream rejoin, and
+time travel debugging.
+
+LangChain frontend SDKs are built for **agent applications**, not only
+token-streaming chatbots. The same hook that renders messages also exposes the
+agent's durable thread state, tool-call lifecycle, interrupts, checkpoint
+history, and custom state values, so your UI can become a control plane for
+long-running agent work.
+
+<Note>
+These patterns use the v1 frontend SDK packages. If you are using an earlier version, see the migration guides for [React](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-react/docs/v1-migration.md), [Vue](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-vue/docs/v1-migration.md), [Svelte](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-svelte/docs/v1-migration.md), and [Angular](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-angular/docs/v1-migration.md).
+</Note>
 
 ## Architecture
 
-Every pattern follows the same architecture: a `createAgent` backend streams state to a frontend via the `useStream` hook.
+Every pattern follows the same architecture: a `createAgent` backend streams state to a frontend via the SDK stream API.
 
 ```mermaid
 %%{
@@ -31,7 +44,26 @@ graph LR
   class BACKEND greenHighlight;
 ```
 
-On the backend, `createAgent` produces a compiled LangGraph graph that exposes a streaming API. On the frontend, the `useStream` hook connects to that API and provides reactive state — messages, tool calls, interrupts, history, and more — that you render with any framework.
+On the backend, `createAgent` produces a compiled LangGraph graph that exposes a streaming API. On the frontend, the stream handle connects to that API and provides reactive state — messages, tool calls, interrupts, values, and thread metadata — that you render with any framework.
+
+## Why use the LangChain frontend SDKs?
+
+Most AI UI libraries help you append streamed text to a chat transcript.
+LangChain's SDKs expose the richer runtime semantics that production agents
+need:
+
+| Capability | What it enables in your UI |
+| --- | --- |
+| **Durable threads** | Reload a page, switch devices, or rejoin a run without losing the conversation state. |
+| **Typed agent state** | Render any state key, not just messages: todos, pipeline outputs, citations, sandbox files, metrics, or custom business objects. |
+| **Tool-call lifecycle** | Show pending, completed, and failed tool calls as purpose-built UI cards instead of raw JSON. |
+| **Interrupts** | Pause execution for human approval, edits, or missing information, then resume from the exact point where the agent stopped. |
+| **Checkpoints** | Build edit, retry, branch, audit, and time-travel flows from persisted state snapshots. |
+| **Nested execution** | Visualize deep agents, subagents, and graph nodes without flattening everything into one unreadable stream. |
+| **Framework-native reactivity** | Use the same protocol from React, Vue, Svelte, or Angular while keeping idiomatic hooks, composables, stores, or signals. |
+
+These primitives let you design UIs where users can inspect, steer, pause,
+resume, and fork agent work while it is happening.
 
 <CodeGroup>
 
@@ -110,15 +142,68 @@ function Chat() {
 
 </CodeGroup>
 
-`useStream` is available for React, Vue, Svelte, and Angular:
+React, Vue, and Svelte use `useStream`. Angular uses `injectStream`:
+
+```ts
+import { useStream } from "@langchain/react";      // React
+import { useStream } from "@langchain/vue";        // Vue
+import { useStream } from "@langchain/svelte";     // Svelte
+import { injectStream } from "@langchain/angular"; // Angular
+```
+
+## Type inference
+
+Pass a type parameter to @[`useStream`] (or @[`injectStream`] in Angular) for type-safe access to `stream.messages`, `stream.toolCalls`, `stream.interrupt`, `stream.values`, and other reactive state.
+
+:::python
+
+Define a TypeScript interface that matches your agent's state schema and pass it as the type parameter:
 
 ```ts
-import { useStream } from "@langchain/react";   // React
-import { useStream } from "@langchain/vue";      // Vue
-import { useStream } from "@langchain/svelte";   // Svelte
-import { useStream } from "@langchain/angular";  // Angular
+import type { BaseMessage } from "langchain";
+
+interface AgentState {
+  messages: BaseMessage[];
+}
+
+const stream = useStream<AgentState>({
+  apiUrl: "http://localhost:2024",
+  assistantId: "agent",
+});
 ```
 
+Use the graph name from `langgraph.json` as `assistantId`. In the pattern examples throughout this guide, replace `typeof myAgent` with your interface name (for example, `AgentState`).
+
+If your agent exposes custom state keys, extend the interface:
+
+```ts
+import type { BaseMessage, Todo } from "langchain";
+
+interface AgentState {
+  messages: BaseMessage[];
+  todos: Todo[];
+}
+```
+
+:::
+
+:::js
+
+Import your agent and pass `typeof myAgent` as the type parameter. TypeScript infers the state schema from the compiled graph:
+
+```ts
+import type { myAgent } from "./agent";
+
+const stream = useStream<typeof myAgent>({
+  apiUrl: "http://localhost:2024",
+  assistantId: "agent",
+});
+```
+
+Custom state keys are inferred automatically, no manual interface required.
+
+:::
+
 ## Patterns
 
 ### Render messages and output
@@ -171,9 +256,25 @@ import { useStream } from "@langchain/angular";  // Angular
   </Card>
 </CardGroup>
 
+## Choosing a frontend pattern
+
+Start from the UX question your application needs to answer:
+
+| If users need to... | Start with |
+| --- | --- |
+| Understand what the agent is doing | [Tool calling](/oss/langchain/frontend/tool-calling) and [reasoning tokens](/oss/langchain/frontend/reasoning-tokens) |
+| Safely approve sensitive actions | [Human-in-the-loop](/oss/langchain/frontend/human-in-the-loop) |
+| Send work while a run is active | [Message queues](/oss/langchain/frontend/message-queues) |
+| Leave and come back to long-running work | [Join & rejoin streams](/oss/langchain/frontend/join-rejoin) |
+| Edit or retry from an earlier turn | [Branching chat](/oss/langchain/frontend/branching-chat) and [time travel](/oss/langchain/frontend/time-travel) |
+| Render state as an application, not a chat | [Structured output](/oss/langchain/frontend/structured-output), [generative UI](/oss/langchain/frontend/generative-ui), and [Deep Agents frontend patterns](/oss/deepagents/frontend/overview) |
+
 ## Integrations
 
-`useStream` is UI-agnostic. Use it to any component library or generative UI framework.
+The stream API is UI-agnostic. Use it with any component library or generative UI
+framework. Component libraries can own the presentation layer while LangChain's
+SDK owns the agent runtime state, resumability, interrupts, and checkpoint
+semantics underneath.
 
 <CardGroup cols={3}>
   <Card title="AI Elements" icon="package" href="/oss/langchain/frontend/integrations/ai-elements">
diff --git a/src/oss/langchain/frontend/reasoning-tokens.mdx b/src/oss/langchain/frontend/reasoning-tokens.mdx
index 3207e25021..d19660e1d1 100644
--- a/src/oss/langchain/frontend/reasoning-tokens.mdx
+++ b/src/oss/langchain/frontend/reasoning-tokens.mdx
@@ -3,9 +3,10 @@ title: Reasoning tokens
 description: Display model thinking and reasoning processes in collapsible blocks
 ---
 
-Reasoning tokens expose the internal thought process of advanced models like OpenAI's o1/o3 and Anthropic's Claude with extended thinking. These models produce structured content blocks that separate reasoning from the final answer, letting you build UIs that show *how* the model arrived at its response.
+Reasoning tokens expose the internal thought process of advanced models like OpenAI's GPT-5 and Anthropic's Claude with extended thinking. These models produce structured content blocks that separate reasoning from the final answer, letting you build UIs that show *how* the model arrived at its response.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="reasoning-tokens" />
 
@@ -43,7 +44,7 @@ Not all models produce reasoning tokens. This pattern applies specifically to mo
 The `contentBlocks` array on an `AIMessage` contains all blocks in the order they were generated. Filter them by `type` to separate reasoning from text:
 
 ```ts
-import { AIMessage } from "@langchain/core/messages";
+import { AIMessage } from "langchain";
 
 function extractBlocks(msg: AIMessage) {
   const reasoningBlocks = msg.contentBlocks
@@ -65,35 +66,20 @@ A single message may contain multiple reasoning blocks (e.g., if the model pause
 
 ## Accessing messages from `useStream`
 
-:::python
+Connect @[`useStream`] to your reasoning-capable agent and iterate
+`stream.messages` in your chat UI. Branch on `HumanMessage.isInstance` and
+`AIMessage.isInstance`, then pass each assistant message to a component that
+reads `contentBlocks` and separates reasoning from text. Set `isStreaming` on
+the last message while `stream.isLoading` is true so thinking blocks update as
+tokens arrive.
 
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 
 ```tsx React
 import { useStream } from "@langchain/react";
-import { AIMessage, HumanMessage } from "@langchain/core/messages";
+import { AIMessage, HumanMessage } from "langchain";
 
 function Chat() {
   const stream = useStream<typeof myAgent>({
@@ -105,7 +91,7 @@ function Chat() {
     <div className="messages">
       {stream.messages.map((msg, i) => {
         if (HumanMessage.isInstance(msg)) {
-          return <HumanBubble key={i} text={msg.content} />;
+          return <HumanBubble key={i} text={msg.text} />;
         }
         if (AIMessage.isInstance(msg)) {
           return (
@@ -126,7 +112,7 @@ function Chat() {
 ```vue Vue
 <script setup lang="ts">
 import { useStream } from "@langchain/vue";
-import { AIMessage, HumanMessage } from "@langchain/core/messages";
+import { AIMessage, HumanMessage } from "langchain";
 
 const stream = useStream<typeof myAgent>({
   apiUrl: "http://localhost:2024",
@@ -136,12 +122,12 @@ const stream = useStream<typeof myAgent>({
 
 <template>
   <div class="messages">
-    <template v-for="(msg, i) in stream.messages" :key="i">
-      <HumanBubble v-if="HumanMessage.isInstance(msg)" :text="msg.content" />
+    <template v-for="(msg, i) in stream.messages.value" :key="i">
+      <HumanBubble v-if="HumanMessage.isInstance(msg)" :text="msg.text" />
       <AIResponse
         v-else-if="AIMessage.isInstance(msg)"
         :message="msg"
-        :isStreaming="stream.isLoading && i === stream.messages.length - 1"
+        :isStreaming="stream.isLoading.value && i === stream.messages.value.length - 1"
       />
     </template>
   </div>
@@ -151,22 +137,22 @@ const stream = useStream<typeof myAgent>({
 ```svelte Svelte
 <script lang="ts">
   import { useStream } from "@langchain/svelte";
-  import { AIMessage, HumanMessage } from "@langchain/core/messages";
+  import { AIMessage, HumanMessage } from "langchain";
 
-  const { messages, isLoading, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
     assistantId: "reasoning",
   });
 </script>
 
 <div class="messages">
-  {#each $messages as msg, i}
+  {#each stream.messages as msg, i}
     {#if HumanMessage.isInstance(msg)}
-      <HumanBubble text={msg.content} />
+      <HumanBubble text={msg.text} />
     {:else if AIMessage.isInstance(msg)}
       <AIResponse
         message={msg}
-        isStreaming={$isLoading && i === $messages.length - 1}
+        isStreaming={stream.isLoading && i === stream.messages.length - 1}
       />
     {/if}
   {/each}
@@ -175,8 +161,8 @@ const stream = useStream<typeof myAgent>({
 
 ```ts Angular
 import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
-import { AIMessage, HumanMessage } from "@langchain/core/messages";
+import { injectStream } from "@langchain/angular";
+import { AIMessage, HumanMessage } from "langchain";
 
 @Component({
   selector: "app-chat",
@@ -184,7 +170,7 @@ import { AIMessage, HumanMessage } from "@langchain/core/messages";
     <div class="messages">
       @for (msg of stream.messages(); track $index) {
         @if (isHuman(msg)) {
-          <human-bubble [text]="msg.content" />
+          <human-bubble [text]="msg.text" />
         } @else if (isAI(msg)) {
           <ai-response
             [message]="msg"
@@ -196,7 +182,7 @@ import { AIMessage, HumanMessage } from "@langchain/core/messages";
   `,
 })
 export class ChatComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
     assistantId: "reasoning",
   });
@@ -264,83 +250,6 @@ function ThinkingBubble({
 }
 ```
 
-### Styling the ThinkingBubble
-
-Differentiate reasoning blocks from regular messages with a distinct visual treatment:
-
-```css
-.thinking-bubble {
-  background-color: #f8f5ff;
-  border: 1px solid #e2d9f3;
-  border-radius: 8px;
-  padding: 12px;
-  margin: 8px 0;
-  font-size: 0.9em;
-}
-
-.thinking-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  background: none;
-  border: none;
-  width: 100%;
-  text-align: left;
-  color: #6b21a8;
-  font-weight: 500;
-}
-
-.thinking-content {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid #e2d9f3;
-  white-space: pre-wrap;
-  color: #4a4a4a;
-  line-height: 1.5;
-}
-
-.thinking-preview {
-  margin-top: 4px;
-  color: #9ca3af;
-  font-style: italic;
-  font-size: 0.85em;
-}
-
-.chevron {
-  margin-left: auto;
-  transition: transform 0.2s;
-}
-
-.chevron.expanded {
-  transform: rotate(90deg);
-}
-```
-
-## Streaming indicator for reasoning
-
-While the model is still generating reasoning tokens, show an animated indicator to communicate that thinking is in progress:
-
-```css
-.thinking-spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid #e2d9f3;
-  border-top-color: #6b21a8;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-```
-
-<Tip>
-During streaming, keep the ThinkingBubble collapsed by default and show only the spinner. Expanding mid-stream can cause layout jitter as new tokens arrive. Let users expand after the reasoning phase completes.
-</Tip>
-
 ## Rendering the complete AI response
 
 Combine the `ThinkingBubble` and a standard text bubble into a single `AIResponse` component:
diff --git a/src/oss/langchain/frontend/structured-output.mdx b/src/oss/langchain/frontend/structured-output.mdx
index 84408c6b9d..a5e761cce5 100644
--- a/src/oss/langchain/frontend/structured-output.mdx
+++ b/src/oss/langchain/frontend/structured-output.mdx
@@ -6,6 +6,7 @@ description: Render structured agent responses with custom UI components instead
 Structured output lets the agent return typed, machine-readable data instead of plain text. Instead of rendering a single string, you get a structured object you can map to any UI: cards, tables, charts, step-by-step breakdowns, or domain-specific renderers.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="structured-output-latex" />
 
@@ -32,39 +33,20 @@ The agent accomplishes this by calling a "structured output" tool whose argument
 
 Define a TypeScript type for the structured data the agent returns. The shape of this schema determines how you render the UI.
 
-Here's an example for a recipe assistant:
+The following is the math-solution schema used by the embedded demo:
 
 ```ts
-interface Ingredient {
-  name: string;
-  amount: string;
-  unit: string;
-}
-
-interface RecipeStep {
-  instruction: string;
-  duration?: string;
-}
-
-interface Recipe {
-  title: string;
-  description: string;
-  servings: number;
-  ingredients: Ingredient[];
-  steps: RecipeStep[];
-  totalTime: string;
+interface MathSolution {
+  problem: string; // The original math problem
+  steps: {
+    explanation: string;
+    latex: string; // Optional display math for this step
+  }[]; // Step-by-step derivation
+  finalAnswer: string; // Plain-text final answer
+  finalAnswerLatex: string; // LaTeX representation of the final answer
 }
 ```
 
-| Field | Type | Description |
-|---|---|---|
-| `title` | `string` | Name of the recipe |
-| `description` | `string` | Short summary of the dish |
-| `servings` | `number` | Number of servings |
-| `ingredients` | `Ingredient[]` | List of ingredients with amounts and units |
-| `steps` | `RecipeStep[]` | Ordered preparation steps |
-| `totalTime` | `string` | Estimated total preparation and cooking time |
-
 Your schema can be anything. The pattern works the same way regardless of shape.
 
 ## Extract structured output from messages
@@ -72,14 +54,11 @@ Your schema can be anything. The pattern works the same way regardless of shape.
 The structured output lives in the `tool_calls` array of the last `AIMessage`. Extract it by finding the AI message and accessing the first tool call's arguments:
 
 ```ts
-import { AIMessage } from "@langchain/core/messages";
+import { AIMessage } from "langchain";
 
 function extractStructuredOutput<T>(messages: any[]): T | null {
-  const aiMessages = messages.filter(AIMessage.isInstance);
-  if (aiMessages.length === 0) return null;
-
-  const lastAI = aiMessages[aiMessages.length - 1];
-  const toolCall = lastAI.tool_calls?.[0];
+  const aiMessage = messages.find(AIMessage.isInstance);
+  const toolCall = aiMessage?.tool_calls?.[0];
   if (!toolCall) return null;
 
   return toolCall.args as T;
@@ -92,53 +71,37 @@ The structured output tool call may not have `args` populated until the agent fi
 
 ## Set up `useStream`
 
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
+Connect @[`useStream`] to your structured-output agent, then read
+`stream.messages` and extract the typed payload from the latest @[`AIMessage`]
+tool call. Render your custom UI once `args` is complete, show a loading state
+while `stream.isLoading` is true (tool arguments may stream in gradually), and
+use `stream.submit()` to send the next prompt.
 
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 
 ```tsx React
 import { useStream } from "@langchain/react";
-import { AIMessage } from "@langchain/core/messages";
+import { AIMessage } from "langchain";
 
-function RecipeChat() {
+function MathSolutionChat() {
   const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
-    assistantId: "recipe_assistant",
+    assistantId: "structured_output_latex",
   });
 
-  const recipe = extractStructuredOutput<Recipe>(stream.messages);
+  const solution = extractStructuredOutput<MathSolution>(stream.messages);
 
   return (
     <div>
-      {!recipe && !stream.isLoading && (
+      {!solution && !stream.isLoading && (
         <PromptInput onSubmit={(text) =>
           stream.submit({ messages: [{ type: "human", content: text }] })
         } />
       )}
       {stream.isLoading && <LoadingIndicator />}
-      {recipe && <RecipeCard recipe={recipe} />}
+      {solution && <SolutionCard solution={solution} />}
     </div>
   );
 }
@@ -147,16 +110,16 @@ function RecipeChat() {
 ```vue Vue
 <script setup lang="ts">
 import { useStream } from "@langchain/vue";
-import { AIMessage } from "@langchain/core/messages";
+import { AIMessage } from "langchain";
 import { computed } from "vue";
 
 const stream = useStream<typeof myAgent>({
   apiUrl: "http://localhost:2024",
-  assistantId: "recipe_assistant",
+  assistantId: "structured_output_latex",
 });
 
-const recipe = computed(() =>
-  extractStructuredOutput<Recipe>(stream.messages.value)
+const solution = computed(() =>
+  extractStructuredOutput<MathSolution>(stream.messages.value)
 );
 
 function handleSubmit(text: string) {
@@ -166,9 +129,9 @@ function handleSubmit(text: string) {
 
 <template>
   <div>
-    <PromptInput v-if="!recipe && !stream.isLoading" @submit="handleSubmit" />
+    <PromptInput v-if="!solution && !stream.isLoading" @submit="handleSubmit" />
     <LoadingIndicator v-if="stream.isLoading" />
-    <RecipeCard v-if="recipe" :recipe="recipe" />
+    <SolutionCard v-if="solution" :solution="solution" />
   </div>
 </template>
 ```
@@ -176,59 +139,59 @@ function handleSubmit(text: string) {
 ```svelte Svelte
 <script lang="ts">
   import { useStream } from "@langchain/svelte";
-  import { AIMessage } from "@langchain/core/messages";
+  import { AIMessage } from "langchain";
 
-  const { messages, isLoading, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
-    assistantId: "recipe_assistant",
+    assistantId: "structured_output_latex",
   });
 
-  $: recipe = extractStructuredOutput<Recipe>($messages);
+  const solution = $derived(extractStructuredOutput<MathSolution>(stream.messages));
 
   function handleSubmit(text: string) {
-    submit({ messages: [{ type: "human", content: text }] });
+    stream.submit({ messages: [{ type: "human", content: text }] });
   }
 </script>
 
 <div>
-  {#if !recipe && !$isLoading}
+  {#if !solution && !stream.isLoading}
     <PromptInput on:submit={(e) => handleSubmit(e.detail)} />
   {/if}
-  {#if $isLoading}
+  {#if stream.isLoading}
     <LoadingIndicator />
   {/if}
-  {#if recipe}
-    <RecipeCard {recipe} />
+  {#if solution}
+    <SolutionCard {solution} />
   {/if}
 </div>
 ```
 
 ```ts Angular
 import { Component, computed } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 
 @Component({
-  selector: "app-recipe-chat",
+  selector: "app-math-solution-chat",
   template: `
-    @if (!recipe() && !stream.isLoading()) {
+    @if (!solution() && !stream.isLoading()) {
       <prompt-input (onSubmit)="handleSubmit($event)" />
     }
     @if (stream.isLoading()) {
       <loading-indicator />
     }
-    @if (recipe()) {
-      <recipe-card [recipe]="recipe()" />
+    @if (solution()) {
+      <solution-card [solution]="solution()" />
     }
   `,
 })
-export class RecipeChatComponent {
-  stream = useStream<typeof myAgent>({
+export class MathSolutionChatComponent {
+  stream = injectStream<typeof myAgent>({
     apiUrl: "http://localhost:2024",
-    assistantId: "recipe_assistant",
+    assistantId: "structured_output_latex",
   });
 
-  recipe = computed(() =>
-    extractStructuredOutput<Recipe>(this.stream.messages())
+  solution = computed(() =>
+    extractStructuredOutput<MathSolution>(this.stream.messages())
   );
 
   handleSubmit(text: string) {
@@ -248,59 +211,29 @@ appropriate UI element. This is the core of the pattern: turning structured
 data into a purpose-built interface.
 
 ```tsx
-function RecipeCard({ recipe }: { recipe: Recipe }) {
+function LatexBlock({ latex }: { latex: string }) {
+  return <div className="latex-block">{latex}</div>; // Render with KaTeX or MathJax.
+}
+
+function SolutionCard({ solution }: { solution: MathSolution }) {
   return (
-    <div className="recipe-card">
-      <div className="recipe-header">
-        <h3>{recipe.title}</h3>
-        <p className="recipe-description">{recipe.description}</p>
-        <div className="recipe-meta">
-          <span>{recipe.servings} servings</span>
-          <span>{recipe.totalTime}</span>
-        </div>
-      </div>
-
-      <div className="recipe-ingredients">
-        <h4>Ingredients</h4>
-        <ul>
-          {recipe.ingredients.map((ing, i) => (
-            <li key={i}>
-              <strong>{ing.amount} {ing.unit}</strong> {ing.name}
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      <div className="recipe-steps">
-        <h4>Instructions</h4>
-        {recipe.steps.map((step, i) => (
-          <div key={i} className="step">
-            <div className="step-number">Step {i + 1}</div>
-            <p className="step-instruction">{step.instruction}</p>
-            {step.duration && (
-              <span className="step-duration">{step.duration}</span>
-            )}
-          </div>
+    <div className="solution-card">
+      <h3>{solution.problem}</h3>
+      <ol>
+        {solution.steps.map((step, i) => (
+          <li key={i}>
+            <span>{step.explanation}</span>
+            {step.latex && <LatexBlock latex={step.latex} />}
+          </li>
         ))}
-      </div>
+      </ol>
+      <strong>{solution.finalAnswer}</strong>
+      {solution.finalAnswerLatex && <LatexBlock latex={solution.finalAnswerLatex} />}
     </div>
   );
 }
 ```
 
-The same approach works for any domain. Map each field to the UI element that best represents it:
-
-| Data type | Rendering strategy |
-|---|---|
-| Plain text | Paragraphs, headings, list items |
-| Numbers/metrics | Stat cards, progress bars, badges |
-| Arrays | Lists, tables, grids |
-| Nested objects | Nested cards, accordion sections |
-| Markdown | Markdown renderer (e.g. `react-markdown`) |
-| LaTeX/math | KaTeX or MathJax |
-| Dates/times | Formatted timestamps, relative time |
-| URLs | Links, embedded previews |
-
 ## Handle partial streaming data
 
 During streaming, the tool call arguments may be incomplete JSON. Guard against this in your extraction logic:
@@ -330,10 +263,10 @@ function extractStructuredOutput<T>(
 Use the `requiredFields` parameter to wait until critical fields are populated before rendering:
 
 ```ts
-const recipe = extractStructuredOutput<Recipe>(stream.messages, [
-  "title",
-  "ingredients",
+const solution = extractStructuredOutput<MathSolution>(stream.messages, [
+  "problem",
   "steps",
+  "finalAnswer",
 ]);
 ```
 
@@ -342,39 +275,28 @@ const recipe = extractStructuredOutput<Recipe>(stream.messages, [
 Rather than waiting for the complete structured output, render fields as they arrive. This gives users immediate feedback while the agent is still generating:
 
 ```tsx
-function ProgressiveRecipeCard({ messages }: { messages: any[] }) {
-  const partial = extractStructuredOutput<Partial<Recipe>>(messages);
+function ProgressiveSolutionCard({ messages }: { messages: any[] }) {
+  const partial = extractStructuredOutput<Partial<MathSolution>>(messages);
   if (!partial) return null;
 
   return (
-    <div className="recipe-card">
-      {partial.title && <h3>{partial.title}</h3>}
-      {partial.description && <p>{partial.description}</p>}
-
-      {partial.ingredients && partial.ingredients.length > 0 && (
-        <div className="recipe-ingredients">
-          <h4>Ingredients</h4>
-          <ul>
-            {partial.ingredients.map((ing, i) => (
-              <li key={i}>
-                {ing.amount} {ing.unit} {ing.name}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
+    <div className="solution-card">
+      {partial.problem && <h3>{partial.problem}</h3>}
 
       {partial.steps && partial.steps.length > 0 && (
-        <div className="recipe-steps">
-          <h4>Instructions</h4>
+        <div className="solution-steps">
+          <h4>Steps</h4>
           {partial.steps.map((step, i) => (
             <div key={i} className="step">
               <div className="step-number">Step {i + 1}</div>
-              <p>{step.instruction}</p>
+              <p>{step.explanation}</p>
+              {step.latex && <LatexBlock latex={step.latex} />}
             </div>
           ))}
         </div>
       )}
+
+      {partial.finalAnswer && <strong>{partial.finalAnswer}</strong>}
     </div>
   );
 }
@@ -382,24 +304,10 @@ function ProgressiveRecipeCard({ messages }: { messages: any[] }) {
 
 <Tip>
 Progressive rendering works well when the schema has a natural top-to-bottom
-order: title, then description, then details. The agent typically generates
-fields in schema order, so the UI fills in naturally.
+order: problem, then derivation steps, then final answer. The agent typically
+generates fields in schema order, so the UI fills in naturally.
 </Tip>
 
-## Reset and re-submit
-
-To let the user submit a new query after viewing a result, add a button that starts a new thread:
-
-```tsx
-{recipe && (
-  <button onClick={() => stream.switchThread(null)}>
-    Start over
-  </button>
-)}
-```
-
-This clears the current conversation and lets the user begin a fresh interaction.
-
 ## Best practices
 
 - **Validate before rendering**: always check that required fields exist before rendering, since streaming may deliver partial data
diff --git a/src/oss/langchain/frontend/time-travel.mdx b/src/oss/langchain/frontend/time-travel.mdx
index f9b132e225..83a730c849 100644
--- a/src/oss/langchain/frontend/time-travel.mdx
+++ b/src/oss/langchain/frontend/time-travel.mdx
@@ -14,13 +14,14 @@ import { PatternEmbed } from "/snippets/pattern-embed.jsx"
 <PatternEmbed pattern="time-travel" />
 
 import RequiresLanggraphServer from '/snippets/oss/requires-langgraph-server.mdx';
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <RequiresLanggraphServer />
 
 ## How checkpoints work
 
 LangGraph persists agent state after every node execution. Each persisted state
-is a `ThreadState` object that captures:
+is a @[ThreadState][ThreadStateJS] object that captures:
 
 - **checkpoint**: metadata identifying this specific snapshot (ID, timestamp)
 - **values**: the full agent state at this point (messages, custom keys)
@@ -31,57 +32,46 @@ This creates a linear timeline of every decision the agent made, every tool it
 called, and every response it produced. Your UI can render this timeline and let
 users jump to any point.
 
-## Setting up useStream
+## Setting up `useStream`
 
-Enable checkpoint history by passing `fetchStateHistory: true` to `useStream`.
-This tells the hook to load the full checkpoint timeline for the current thread.
+Create the stream for your agent, then fetch checkpoint history explicitly from
+the LangGraph client for the active thread. Resuming from a checkpoint uses
+`forkFrom: { checkpointId }`.
 
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
 import { useStream } from "@langchain/react";
+import { useEffect, useState } from "react";
 
 const AGENT_URL = "http://localhost:2024";
 
 export function TimeTravelChat() {
+  const [threadId, setThreadId] = useState<string | null>(null);
+  const [history, setHistory] = useState<ThreadState[]>([]);
   const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "time_travel",
-    fetchStateHistory: true,
+    threadId,
+    onThreadId: setThreadId,
   });
 
-  const history = stream.history ?? [];
+  useEffect(() => {
+    if (!threadId || stream.isLoading) return;
+    stream.client.threads.getHistory(threadId).then(setHistory);
+  }, [stream.client, threadId, stream.isLoading]);
+
+  function resumeFrom(cp: ThreadState) {
+    stream.submit({}, {
+      forkFrom: { checkpointId: cp.checkpoint.checkpoint_id },
+    });
+  }
 
   return (
     <div className="flex h-screen">
       <ChatPanel messages={stream.messages} />
-      <TimelineSidebar
-        history={history}
-        onSelect={(cp) => stream.submit(null, { checkpoint: cp.checkpoint })}
-      />
+      <TimelineSidebar history={history} onSelect={resumeFrom} />
     </div>
   );
 }
@@ -90,20 +80,34 @@ export function TimeTravelChat() {
 ```vue Vue
 <script setup lang="ts">
 import { useStream } from "@langchain/vue";
-import { computed } from "vue";
+import { ref, watch } from "vue";
 
 const AGENT_URL = "http://localhost:2024";
+const threadId = ref<string | null>(null);
+const history = ref<ThreadState[]>([]);
 
 const stream = useStream<typeof myAgent>({
   apiUrl: AGENT_URL,
   assistantId: "time_travel",
-  fetchStateHistory: true,
+  threadId,
+  onThreadId: (id) => (threadId.value = id),
 });
 
-const history = computed(() => stream.history.value ?? []);
+watch(
+  [threadId, stream.isLoading],
+  async ([id, isLoading]) => {
+    if (isLoading) return;
+    history.value = id
+      ? ((await stream.client.threads.getHistory(id)) as ThreadState[])
+      : [];
+  },
+  { immediate: true },
+);
 
 function resumeFrom(cp: ThreadState) {
-  stream.submit(null, { checkpoint: cp.checkpoint });
+  stream.submit({}, {
+    forkFrom: { checkpointId: cp.checkpoint.checkpoint_id },
+  });
 }
 </script>
 
@@ -120,27 +124,43 @@ function resumeFrom(cp: ThreadState) {
   import { useStream } from "@langchain/svelte";
 
   const AGENT_URL = "http://localhost:2024";
+  let threadId = $state<string | null>(null);
+  let history = $state<ThreadState[]>([]);
 
-  const { messages, history, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "time_travel",
-    fetchStateHistory: true,
+    threadId: () => threadId,
+    onThreadId: (id) => (threadId = id),
+  });
+
+  $effect(() => {
+    if (!threadId) {
+      history = [];
+      return;
+    }
+    if (stream.isLoading) return;
+    stream.client.threads.getHistory(threadId).then((states) => {
+      history = states as ThreadState[];
+    });
   });
 
   function resumeFrom(cp: ThreadState) {
-    submit(null, { checkpoint: cp.checkpoint });
+    stream.submit({}, {
+      forkFrom: { checkpointId: cp.checkpoint.checkpoint_id },
+    });
   }
 </script>
 
 <div class="flex h-screen">
-  <ChatPanel messages={$messages} />
-  <TimelineSidebar history={$history ?? []} onSelect={resumeFrom} />
+  <ChatPanel messages={stream.messages} />
+  <TimelineSidebar {history} onSelect={resumeFrom} />
 </div>
 ```
 
 ```ts Angular
-import { Component, computed } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { Component, effect, signal } from "@angular/core";
+import { injectStream } from "@langchain/angular";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -157,49 +177,38 @@ const AGENT_URL = "http://localhost:2024";
   `,
 })
 export class TimeTravelChatComponent {
-  stream = useStream<typeof myAgent>({
+  threadId = signal<string | null>(null);
+  history = signal<ThreadState[]>([]);
+
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "time_travel",
-    fetchStateHistory: true,
+    threadId: this.threadId,
+    onThreadId: (id) => this.threadId.set(id),
   });
 
-  history = computed(() => this.stream.history() ?? []);
+  constructor() {
+    effect(() => {
+      if (this.stream.isLoading()) return;
+      void this.refreshHistory(this.threadId());
+    });
+  }
+
+  async refreshHistory(id: string | null) {
+    this.history.set(id
+      ? ((await this.stream.client.threads.getHistory(id)) as ThreadState[])
+      : []);
+  }
 
   resumeFrom(cp: ThreadState) {
-    this.stream.submit(null, { checkpoint: cp.checkpoint });
+    this.stream.submit({}, {
+      forkFrom: { checkpointId: cp.checkpoint.checkpoint_id },
+    });
   }
 }
 ```
 </CodeGroup>
 
-## The ThreadState object
-
-Each entry in the `history` array is a `ThreadState` representing one checkpoint
-in the timeline:
-
-```ts
-interface ThreadState {
-  checkpoint: {
-    checkpoint_id: string;
-    checkpoint_ns: string;
-  };
-  values: Record<string, unknown>;
-  tasks: Array<{
-    id: string;
-    name: string;
-    interrupts?: unknown[];
-  }>;
-  next: string[];
-}
-```
-
-| Property | Description |
-| --- | --- |
-| `checkpoint` | Identifies this snapshot. Pass it to `submit` to resume from here |
-| `values` | The complete agent state at this point, including `messages` and any custom state keys |
-| `tasks` | The graph nodes that ran at this checkpoint, including their names and any interrupts |
-| `next` | Names of nodes scheduled to execute after this checkpoint |
-
 ## Building a checkpoint timeline
 
 The timeline sidebar shows every checkpoint as a clickable entry. Each entry
@@ -308,10 +317,12 @@ experience.
 
 The core of time travel is the ability to **resume execution from any prior
 checkpoint**. When a user selects a checkpoint, call `submit` with `null` input
-and pass the checkpoint reference:
+and pass the checkpoint ID:
 
 ```ts
-stream.submit(null, { checkpoint: selectedCheckpoint.checkpoint });
+stream.submit({}, {
+  forkFrom: { checkpointId: selectedCheckpoint.checkpoint.checkpoint_id },
+});
 ```
 
 This tells LangGraph to:
@@ -337,16 +348,22 @@ timeline on the right:
 
 ```tsx
 function TimeTravelLayout() {
+  const [threadId, setThreadId] = useState<string | null>(null);
+  const [history, setHistory] = useState<ThreadState[]>([]);
   const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "time_travel",
-    fetchStateHistory: true,
+    threadId,
+    onThreadId: setThreadId,
   });
 
   const [selectedCheckpoint, setSelectedCheckpoint] =
     useState<ThreadState | null>(null);
 
-  const history = stream.history ?? [];
+  useEffect(() => {
+    if (!threadId || stream.isLoading) return;
+    stream.client.threads.getHistory(threadId).then(setHistory);
+  }, [stream.client, threadId, stream.isLoading]);
 
   return (
     <div className="flex h-screen">
@@ -372,7 +389,9 @@ function TimeTravelLayout() {
           selected={selectedCheckpoint}
           onSelect={setSelectedCheckpoint}
           onResume={(cp) =>
-            stream.submit(null, { checkpoint: cp.checkpoint })
+            stream.submit({}, {
+              forkFrom: { checkpointId: cp.checkpoint.checkpoint_id },
+            })
           }
         />
         {selectedCheckpoint && (
diff --git a/src/oss/langchain/frontend/tool-calling.mdx b/src/oss/langchain/frontend/tool-calling.mdx
index bb1ac7f68c..bf62d974dc 100644
--- a/src/oss/langchain/frontend/tool-calling.mdx
+++ b/src/oss/langchain/frontend/tool-calling.mdx
@@ -10,6 +10,7 @@ structured, type-safe UI cards for every tool call your agent makes, complete
 with loading states and error handling.
 
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="tool-calling" />
 
@@ -23,38 +24,16 @@ When a LangGraph agent decides it needs external data, it emits one or more
 - **id**: a unique identifier linking the call to its result
 
 The agent runtime executes the tool, and the result comes back as a
-`ToolMessage`. The `useStream` hook unifies all of this into a single
+`ToolMessage`. The @[`useStream`] hook unifies all of this into a single
 `toolCalls` array you can render directly.
 
-## Setting up useStream
+## Setting up `useStream`
 
-The first step is wiring up `useStream` to your agent backend. The hook returns
+The first step is wiring up @[`useStream`] to your agent backend. The hook returns
 reactive state including a `toolCalls` array that updates in real time as the
 agent streams.
 
-:::python
-
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-}
-```
-
-:::
-
-:::js
-
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
-
-```ts
-import type { myAgent } from "./agent";
-```
-
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
@@ -108,22 +87,22 @@ const stream = useStream<typeof myAgent>({
 
   const AGENT_URL = "http://localhost:2024";
 
-  const { messages, toolCalls, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "tool_calling",
   });
 </script>
 
 <div>
-  {#each $messages as msg (msg.id)}
-    <Message message={msg} toolCalls={$toolCalls} />
+  {#each stream.messages as msg (msg.id)}
+    <Message message={msg} toolCalls={stream.toolCalls} />
   {/each}
 </div>
 ```
 
 ```ts Angular
 import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { injectStream } from "@langchain/angular";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -136,7 +115,7 @@ const AGENT_URL = "http://localhost:2024";
   `,
 })
 export class ChatComponent {
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "tool_calling",
   });
@@ -144,35 +123,45 @@ export class ChatComponent {
 ```
 </CodeGroup>
 
-## The ToolCallWithResult type
+## The AssembledToolCall type
 
-Each entry in the `toolCalls` array is a `ToolCallWithResult` object:
+Each entry in the `toolCalls` array is an `AssembledToolCall` object:
 
 ```ts
-interface ToolCallWithResult {
-  call: {
-    id: string;
-    name: string;
-    args: Record<string, unknown>;
-  };
-  result: ToolMessage | undefined;
-  state: "pending" | "completed" | "error";
+interface AssembledToolCall<
+  TName extends string = string,
+  TInput = unknown,
+  TOutput = unknown,
+> {
+  name: TName;
+  callId: string;
+  id: string;
+  namespace: string[];
+  input: TInput;
+  args: TInput;
+  output: TOutput | null;
+  status: "running" | "finished" | "error";
+  error: string | undefined;
 }
 ```
 
 | Property | Description |
 | --- | --- |
-| `call.id` | Unique ID matching the AI message's `tool_calls` entry |
-| `call.name` | The name of the tool (e.g. `"get_weather"`) |
-| `call.args` | Structured arguments the agent passed to the tool |
-| `result` | The `ToolMessage` response, available once the tool finishes |
-| `state` | Lifecycle state: `"pending"` while running, `"completed"` on success, `"error"` on failure |
+| `name` | The name of the tool (e.g. `"get_weather"`) |
+| `callId` | Unique ID matching the AI message's `tool_calls` entry |
+| `id` | Alias for `callId`, matching message-level tool calls |
+| `namespace` | Namespace where the tool call was emitted |
+| `input` | Structured arguments the agent passed to the tool |
+| `args` | Alias for `input`, matching message-level tool calls |
+| `output` | Tool output after a successful call, or `null` while running or after an error |
+| `status` | Lifecycle state: `"running"`, `"finished"`, or `"error"` |
+| `error` | Error details when the tool call fails |
 
 ## Filtering tool calls per message
 
 An AI message may trigger multiple tool calls, and your chat may contain many AI
 messages. To render the right tool cards under each message, filter by matching
-`call.id` against the message's `tool_calls` array:
+`callId` against the message's `tool_calls` array:
 
 ```tsx
 function Message({
@@ -180,17 +169,17 @@ function Message({
   toolCalls,
 }: {
   message: AIMessage;
-  toolCalls: ToolCallWithResult[];
+  toolCalls: AssembledToolCall[];
 }) {
   const messageToolCalls = toolCalls.filter((tc) =>
-    message.tool_calls?.find((t) => t.id === tc.call.id)
+    message.tool_calls?.find((t) => t.id === tc.callId)
   );
 
   return (
     <div>
-      <p>{message.content}</p>
+      <p>{message.text}</p>
       {messageToolCalls.map((tc) => (
-        <ToolCard key={tc.call.id} toolCall={tc} />
+        <ToolCard key={tc.callId} toolCall={tc} />
       ))}
     </div>
   );
@@ -200,27 +189,27 @@ function Message({
 ## Building specialized tool cards
 
 Rather than dumping raw JSON, build dedicated UI components for each tool. Use
-`call.name` to select the right card:
+`name` to select the right card:
 
 ```tsx
-function ToolCard({ toolCall }: { toolCall: ToolCallWithResult }) {
-  if (toolCall.state === "pending") {
-    return <LoadingCard name={toolCall.call.name} />;
+function ToolCard({ toolCall }: { toolCall: AssembledToolCall }) {
+  if (toolCall.status === "running") {
+    return <LoadingCard name={toolCall.name} />;
   }
 
-  if (toolCall.state === "error") {
-    return <ErrorCard name={toolCall.call.name} error={toolCall.result} />;
+  if (toolCall.status === "error") {
+    return <ErrorCard name={toolCall.name} error={toolCall.error} />;
   }
 
-  switch (toolCall.call.name) {
+  switch (toolCall.name) {
     case "get_weather":
-      return <WeatherCard args={toolCall.call.args} result={toolCall.result} />;
+      return <WeatherCard input={toolCall.input} output={toolCall.output} />;
     case "calculator":
       return (
-        <CalculatorCard args={toolCall.call.args} result={toolCall.result} />
+        <CalculatorCard input={toolCall.input} output={toolCall.output} />
       );
     case "web_search":
-      return <SearchCard args={toolCall.call.args} result={toolCall.result} />;
+      return <SearchCard input={toolCall.input} output={toolCall.output} />;
     default:
       return <GenericToolCard toolCall={toolCall} />;
   }
@@ -231,22 +220,20 @@ function ToolCard({ toolCall }: { toolCall: ToolCallWithResult }) {
 
 ```tsx
 function WeatherCard({
-  args,
-  result,
+  input,
+  output,
 }: {
-  args: { location: string };
-  result: ToolMessage;
+  input: { location: string };
+  output: { temperature: number; condition: string };
 }) {
-  const data = JSON.parse(result.content as string);
-
   return (
     <div className="rounded-lg border p-4">
       <div className="flex items-center gap-2">
         <CloudIcon />
-        <h3 className="font-semibold">{args.location}</h3>
+        <h3 className="font-semibold">{input.location}</h3>
       </div>
-      <div className="mt-2 text-3xl font-bold">{data.temperature}°F</div>
-      <p className="text-muted-foreground">{data.condition}</p>
+      <div className="mt-2 text-3xl font-bold">{output.temperature}°F</div>
+      <p className="text-muted-foreground">{output.condition}</p>
     </div>
   );
 }
@@ -266,12 +253,12 @@ function LoadingCard({ name }: { name: string }) {
   );
 }
 
-function ErrorCard({ name, error }: { name: string; error?: ToolMessage }) {
+function ErrorCard({ name, error }: { name: string; error?: unknown }) {
   return (
     <div className="rounded-lg border border-red-300 bg-red-50 p-4">
       <h3 className="font-semibold text-red-700">Error in {name}</h3>
       <p className="text-sm text-red-600">
-        {error?.content ?? "Tool execution failed"}
+        {String(error ?? "Tool execution failed")}
       </p>
     </div>
   );
@@ -296,7 +283,7 @@ const getWeather = tool(async ({ location }) => { /* ... */ }, {
 });
 
 type WeatherToolCall = ToolCallFromTool<typeof getWeather>;
-// WeatherToolCall.call.args is now { location: string }
+// WeatherToolCall.input and WeatherToolCall.args are now { location: string }
 ```
 
 <Tip>
@@ -306,7 +293,7 @@ changes, your UI components will flag type errors immediately.
 
 ## Rendering tool calls inline with streaming text
 
-Tool calls often arrive interleaved with streamed text. The `useStream` hook
+Tool calls often arrive interleaved with streamed text. The @[`useStream`] hook
 keeps `toolCalls` in sync with the stream, so pending cards appear as soon as
 the agent emits the call, before the tool has finished executing.
 
@@ -317,29 +304,29 @@ This means users see:
 3. The card updates to show the result once the tool completes
 
 <Note>
-Tool calls update in place. The same `call.id` transitions from `"pending"` to
-`"completed"` (or `"error"`), so your UI re-renders the same component
+Tool calls update in place. The same `callId` transitions from `"running"` to
+`"finished"` (or `"error"`), so your UI re-renders the same component
 with new state.
 </Note>
 
 ## Handling multiple concurrent tool calls
 
 Agents can invoke several tools in parallel. The `toolCalls` array will contain
-multiple entries with `state: "pending"` simultaneously. Each resolves
+multiple entries with `status: "running"` simultaneously. Each resolves
 independently, so your UI should handle partial completion gracefully:
 
 ```tsx
-function ToolCallList({ toolCalls }: { toolCalls: ToolCallWithResult[] }) {
-  const pending = toolCalls.filter((tc) => tc.state === "pending");
-  const completed = toolCalls.filter((tc) => tc.state === "completed");
+function ToolCallList({ toolCalls }: { toolCalls: AssembledToolCall[] }) {
+  const pending = toolCalls.filter((tc) => tc.status === "running");
+  const completed = toolCalls.filter((tc) => tc.status === "finished");
 
   return (
     <div className="space-y-2">
       {completed.map((tc) => (
-        <ToolCard key={tc.call.id} toolCall={tc} />
+        <ToolCard key={tc.callId} toolCall={tc} />
       ))}
       {pending.map((tc) => (
-        <LoadingCard key={tc.call.id} name={tc.call.name} />
+        <LoadingCard key={tc.callId} name={tc.name} />
       ))}
     </div>
   );
@@ -350,10 +337,10 @@ function ToolCallList({ toolCalls }: { toolCalls: ToolCallWithResult[] }) {
 
 Follow these guidelines when building tool call UIs:
 
-- **Always handle all three states**: `pending`, `completed`, and `error`.
+- **Always handle all three states**: `running`, `finished`, and `error`.
   Users should never see a blank card.
-- **Parse results safely**. Tool results arrive as strings. Wrap
-  `JSON.parse()` in a try/catch and show a fallback on parse failure.
+- **Validate results safely**. Tool outputs are typed as `unknown` until you
+  narrow them for a specific card.
 - **Provide a generic fallback**. Not every tool needs a bespoke card. Render
   a collapsible JSON view for unknown tool names.
 - **Show the tool name and args during loading**. Users want to know *what*
diff --git a/src/oss/langchain/streaming.mdx b/src/oss/langchain/streaming.mdx
index 318405f007..0c593de966 100644
--- a/src/oss/langchain/streaming.mdx
+++ b/src/oss/langchain/streaming.mdx
@@ -1127,7 +1127,7 @@ See the [LangGraph streaming docs](/oss/langgraph/streaming#stream-output-format
 
 ## Related
 
-- [Frontend streaming](/oss/langchain/streaming/frontend)—Build React UIs with `useStream` for real-time agent interactions
+- [Frontend streaming](/oss/langchain/streaming/frontend)—Build React UIs with @[`useStream`] for real-time agent interactions
 - [Streaming with chat models](/oss/langchain/models#stream)—Stream tokens directly from a chat model without using an agent or graph
 - [Reasoning with chat models](/oss/langchain/models#reasoning)—Configure and access reasoning output from chat models
 - [Standard content blocks](/oss/langchain/messages#standard-content-blocks)—Understand the normalized content block format used for reasoning, text, and other content types
diff --git a/src/oss/langgraph/frontend/graph-execution.mdx b/src/oss/langgraph/frontend/graph-execution.mdx
index f781f333e1..b8ce6d8c52 100644
--- a/src/oss/langgraph/frontend/graph-execution.mdx
+++ b/src/oss/langgraph/frontend/graph-execution.mdx
@@ -10,7 +10,13 @@ for each node, showing its status, streaming its content in real time, and
 tracking completion across the entire workflow. Users see exactly what the agent
 is doing, which step it's on, and what each step produced.
 
+This pattern is especially useful for production agents because it turns graph
+structure into product UX. Instead of treating the run as a single assistant
+response, you can expose the same checkpoints, node names, state keys, and
+stream metadata that LangGraph uses internally.
+
 import { PatternEmbed } from "/snippets/pattern-embed.jsx"
+import UseStreamTypeInference from '/snippets/oss/use-stream-type-inference.mdx';
 
 <PatternEmbed pattern="graph-execution-cards" />
 
@@ -24,54 +30,38 @@ task. For example, a research pipeline might have:
 3. **Analyze**: draw conclusions from the research
 4. **Synthesize**: produce a final, polished response
 
-Each node writes its output to a specific key in the graph's state. By mapping
-these node names and state keys to UI components, you can create a visual
-representation of the entire pipeline.
+Each node writes its output to a specific key in the graph's state. On the
+frontend, you don't need to hardcode that mapping as @[`useStream`] discovers
+each node as it runs via `stream.subgraphs` and exposes a
+@[`SubgraphDiscoverySnapshot`] for every observed step:
 
 ```ts
-const PIPELINE_NODES = [
-  { name: "classify", stateKey: "classification", label: "Classify" },
-  { name: "do_research", stateKey: "research", label: "Research" },
-  { name: "analyze", stateKey: "analysis", label: "Analyze" },
-  { name: "synthesize", stateKey: "synthesis", label: "Synthesize" },
-];
-
-const PIPELINE_NODE_NAMES = new Set(PIPELINE_NODES.map((n) => n.name));
-```
-
-## Setting up useStream
-
-Wire up `useStream` as usual. The key properties you'll use are `messages`
-(for streaming content routing), `values` (for completed node outputs), and
-`getMessagesMetadata` (for identifying which node produced each token).
-
-:::python
+// Nodes are discovered automatically — no hardcoded list needed
+const graphNodes = [...stream.subgraphs.values()];
 
-Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values, including custom state keys for each pipeline node. In the examples below, replace `typeof myAgent` with your interface name:
-
-```ts
-import type { BaseMessage } from "@langchain/core/messages";
-
-interface AgentState {
-  messages: BaseMessage[];
-  classification: string;
-  research: string;
-  analysis: string;
-  synthesis: string;
-}
+// Each snapshot carries the node name and current status
+graphNodes.forEach((node) => {
+  console.log(node.nodeName, node.status); // "classify", "running"
+});
 ```
 
-:::
+Use `node.nodeName` for labels in the progress bar and card headers. Pass each
+snapshot to `useMessages(stream, node)` to render node-scoped streaming content
+without coupling the UI to graph state key names.
 
-:::js
+This mapping becomes the contract between your graph and your UI. Backend
+authors can add, rename, or reorder nodes intentionally, while frontend authors
+decide how each state key should be visualized: a status badge, markdown panel,
+table, chart, trace view, or approval card.
 
-Import your agent and pass `typeof myAgent` as a type parameter to `useStream` for type-safe access to state values:
+## Setting up `useStream`
 
-```ts
-import type { myAgent } from "./agent";
-```
+Wire up @[`useStream`] as usual. The key properties you'll use are `messages`
+(for the conversation) and `subgraphs` (for the graph nodes discovered in the
+current run). Pass each discovered subgraph snapshot to a selector to read the
+messages scoped to that node.
 
-:::
+<UseStreamTypeInference />
 
 <CodeGroup>
 ```tsx React
@@ -84,16 +74,12 @@ export function PipelineChat() {
     apiUrl: AGENT_URL,
     assistantId: "graph_execution_cards",
   });
+  const graphNodes = [...stream.subgraphs.values()];
 
   return (
     <div>
-      <PipelineProgress nodes={PIPELINE_NODES} values={stream.values} />
-      <NodeCardList
-        nodes={PIPELINE_NODES}
-        messages={stream.messages}
-        values={stream.values}
-        getMetadata={stream.getMessagesMetadata}
-      />
+      <PipelineProgress nodes={graphNodes} isLoading={stream.isLoading} />
+      <NodeCardList nodes={graphNodes} stream={stream} isLoading={stream.isLoading} />
     </div>
   );
 }
@@ -113,12 +99,14 @@ const stream = useStream<typeof myAgent>({
 
 <template>
   <div>
-    <PipelineProgress :nodes="PIPELINE_NODES" :values="stream.values.value" />
+    <PipelineProgress
+      :nodes="[...stream.subgraphs.value.values()]"
+      :is-loading="stream.isLoading.value"
+    />
     <NodeCardList
-      :nodes="PIPELINE_NODES"
-      :messages="stream.messages.value"
-      :values="stream.values.value"
-      :get-metadata="stream.getMessagesMetadata"
+      :nodes="[...stream.subgraphs.value.values()]"
+      :stream="stream"
+      :is-loading="stream.isLoading.value"
     />
   </div>
 </template>
@@ -130,26 +118,25 @@ const stream = useStream<typeof myAgent>({
 
   const AGENT_URL = "http://localhost:2024";
 
-  const { messages, values, getMessagesMetadata, submit } = useStream<typeof myAgent>({
+  const stream = useStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "graph_execution_cards",
   });
 </script>
 
 <div>
-  <PipelineProgress nodes={PIPELINE_NODES} values={$values} />
+  <PipelineProgress nodes={[...stream.subgraphs.values()]} isLoading={stream.isLoading} />
   <NodeCardList
-    nodes={PIPELINE_NODES}
-    messages={$messages}
-    values={$values}
-    getMetadata={getMessagesMetadata}
+    nodes={[...stream.subgraphs.values()]}
+    {stream}
+    isLoading={stream.isLoading}
   />
 </div>
 ```
 
 ```ts Angular
-import { Component } from "@angular/core";
-import { useStream } from "@langchain/angular";
+import { Component, computed } from "@angular/core";
+import { injectStream } from "@langchain/angular";
 
 const AGENT_URL = "http://localhost:2024";
 
@@ -158,86 +145,66 @@ const AGENT_URL = "http://localhost:2024";
   template: `
     <div>
       <app-pipeline-progress
-        [nodes]="PIPELINE_NODES"
-        [values]="stream.values()"
+        [nodes]="graphNodes()"
+        [isLoading]="stream.isLoading()"
       />
       <app-node-card-list
-        [nodes]="PIPELINE_NODES"
-        [messages]="stream.messages()"
-        [values]="stream.values()"
-        [getMetadata]="stream.getMessagesMetadata"
+        [nodes]="graphNodes()"
+        [stream]="stream"
+        [isLoading]="stream.isLoading()"
       />
     </div>
   `,
 })
 export class PipelineChatComponent {
-  PIPELINE_NODES = PIPELINE_NODES;
-
-  stream = useStream<typeof myAgent>({
+  stream = injectStream<typeof myAgent>({
     apiUrl: AGENT_URL,
     assistantId: "graph_execution_cards",
   });
+
+  graphNodes = computed(() => [...this.stream.subgraphs().values()]);
 }
 ```
 </CodeGroup>
 
 ## Routing streaming tokens to nodes
 
-As the agent streams, each message is annotated with metadata that identifies
-which graph node produced it. Use `getMessagesMetadata` to extract the
-`langgraph_node` value and route tokens to the correct card:
+As the graph streams, each discovered subgraph snapshot identifies the node it
+belongs to. Pass that snapshot to a selector hook or composable to read the
+messages scoped to that node:
 
-```ts
-function getStreamingContent(
-  messages: BaseMessage[],
-  getMetadata: (msg: BaseMessage) => MessageMetadata | undefined
-): Record<string, string> {
-  const content: Record<string, string> = {};
-
-  for (const message of messages) {
-    if (message.type !== "ai") continue;
-
-    const metadata = getMetadata(message);
-    const node = metadata?.streamMetadata?.langgraph_node;
-
-    if (node && PIPELINE_NODE_NAMES.has(node)) {
-      content[node] = typeof message.content === "string"
-        ? message.content
-        : "";
-    }
-  }
-
-  return content;
+```tsx
+import { AIMessage } from "langchain";
+import { useMessages, type AnyStream, type SubgraphDiscoverySnapshot } from "@langchain/react";
+
+function NodeCard({
+  node,
+  stream,
+}: {
+  node: SubgraphDiscoverySnapshot;
+  stream: AnyStream;
+}) {
+  const messages = useMessages(stream, node);
+  const lastAIMessage = messages.find(AIMessage.isInstance);
+  const streamingContent = lastAIMessage?.text ?? "";
+
+  return <NodeCardBody node={node} content={streamingContent} />;
 }
 ```
 
-This gives you a map from node name to its current streaming content. As tokens
-arrive, the corresponding card updates in real time.
-
-<Note>
-The `streamMetadata.langgraph_node` field is set automatically by LangGraph.
-You don't need any special configuration on the backend. Just stream messages
-as usual, and the metadata is included.
-</Note>
+The first mounted selector opens a scoped subscription for that node namespace.
+When the node card unmounts, the subscription is released automatically.
 
 ## Determining node status
 
-Each node can be in one of four states: not started, streaming, complete, or
-idle. You derive the status from two sources: the streaming content map (for
-active nodes) and `stream.values` (for completed nodes):
+Each discovered node carries its current status. Use `node.status` directly;
+the discovery snapshot reports `"pending"`, `"running"`, `"complete"`, or
+`"error"`:
 
 ```ts
-type NodeStatus = "idle" | "streaming" | "complete";
-
-function getNodeStatus(
-  node: { name: string; stateKey: string },
-  streamingContent: Record<string, string>,
-  values: Record<string, unknown>
-): NodeStatus {
-  if (values?.[node.stateKey]) return "complete";
-  if (streamingContent[node.name]) return "streaming";
-  return "idle";
-}
+type NodeStatus = SubgraphDiscoverySnapshot["status"];
+
+const status: NodeStatus = node.status;
 ```
 
 ## Building the pipeline progress bar
@@ -248,29 +215,32 @@ entire pipeline. Each step is a labeled segment that fills in as nodes complete:
 ```tsx
 function PipelineProgress({
   nodes,
-  values,
-  streamingContent,
+  isLoading,
 }: {
-  nodes: typeof PIPELINE_NODES;
-  values: Record<string, unknown>;
-  streamingContent: Record<string, string>;
+  nodes: SubgraphDiscoverySnapshot[];
+  isLoading: boolean;
 }) {
+  const firstIncompleteIdx = nodes.findIndex((node) => node.status !== "complete");
+
   return (
     <div className="flex items-center gap-1">
       {nodes.map((node, i) => {
-        const status = getNodeStatus(node, streamingContent, values);
+        const isRunning =
+          isLoading && node.status !== "complete" && firstIncompleteIdx === i;
         const colors = {
-          idle: "bg-gray-200 text-gray-500",
-          streaming: "bg-blue-400 text-white animate-pulse",
+          pending: "bg-gray-200 text-gray-500",
+          running: "bg-blue-400 text-white animate-pulse",
           complete: "bg-green-500 text-white",
+          error: "bg-red-500 text-white",
         };
+        const status = isRunning ? "running" : node.status;
 
         return (
-          <div key={node.name} className="flex items-center">
+          <div key={node.id} className="flex items-center">
             <div
               className={`rounded-full px-3 py-1 text-xs font-medium ${colors[status]}`}
             >
-              {node.label}
+              {node.nodeName}
             </div>
             {i < nodes.length - 1 && (
               <div
@@ -295,92 +265,72 @@ final), and a collapsible body for long outputs:
 ```tsx
 function NodeCard({
   node,
-  status,
-  streamingContent,
-  completedContent,
+  stream,
 }: {
-  node: { name: string; stateKey: string; label: string };
-  status: NodeStatus;
-  streamingContent: string | undefined;
-  completedContent: unknown;
+  node: SubgraphDiscoverySnapshot;
+  stream: AnyStream;
 }) {
-  const [collapsed, setCollapsed] = useState(false);
-
-  const displayContent =
-    status === "complete"
-      ? formatContent(completedContent)
-      : streamingContent ?? "";
+  const [open, setOpen] = useState(node.status === "running");
+  const messages = useMessages(stream, node);
+  const lastAIMessage = messages.find(AIMessage.isInstance);
 
-  const statusBadge = {
-    idle: { text: "Waiting", className: "bg-gray-100 text-gray-600" },
-    streaming: {
-      text: "Running",
-      className: "bg-blue-100 text-blue-700 animate-pulse",
-    },
-    complete: { text: "Done", className: "bg-green-100 text-green-700" },
-  };
-
-  const badge = statusBadge[status];
+  useEffect(() => {
+    if (node.status === "running") setOpen(true);
+    if (node.status === "complete") setOpen(false);
+  }, [node.status]);
 
   return (
     <div className="rounded-lg border bg-white shadow-sm">
       <button
-        onClick={() => setCollapsed(!collapsed)}
+        onClick={() => setOpen(!open)}
         className="flex w-full items-center justify-between p-4"
       >
         <div className="flex items-center gap-3">
-          <h3 className="font-semibold">{node.label}</h3>
-          <span
-            className={`rounded-full px-2 py-0.5 text-xs font-medium ${badge.className}`}
-          >
-            {badge.text}
-          </span>
+          <h3 className="font-semibold">{node.nodeName}</h3>
+          <StatusBadge status={node.status} />
         </div>
-        <ChevronIcon direction={collapsed ? "down" : "up"} />
+        <span className={open ? "rotate-90" : ""}>▶</span>
       </button>
 
-      {!collapsed && displayContent && (
+      {open && (
         <div className="border-t px-4 py-3">
           <div className="prose prose-sm max-w-none">
-            {displayContent}
-            {status === "streaming" && (
-              <span className="inline-block h-4 w-1 animate-pulse bg-blue-500" />
-            )}
+            {lastAIMessage?.text?.trim()
+              ? <Markdown>{lastAIMessage.text}</Markdown>
+              : <p className="italic text-gray-500">Processing...</p>}
           </div>
         </div>
       )}
     </div>
   );
 }
-
-function formatContent(value: unknown): string {
-  if (typeof value === "string") return value;
-  if (value == null) return "";
-  return JSON.stringify(value, null, 2);
-}
 ```
 
 ## Streaming vs. completed content
 
-There are two sources of content for each node, and picking the right one
-matters for a smooth UX:
+The node card reads scoped messages for both streaming and final content. This
+avoids assuming that a graph node name matches the state key it writes to (for
+example, `do_research` writes to `research` in the playground graph):
 
 | Source | When to use |
 | --- | --- |
-| `streamingContent[node.name]` | While the node is actively streaming, this contains tokens as they arrive |
-| `stream.values[node.stateKey]` | After the node completes, this contains the final, committed output |
+| `useMessages(stream, node)` | Render node-scoped streaming and final messages |
+| `stream.values` | Read whole-graph state such as the final `synthesis` field, using the actual state key |
+
+The pattern is: show the most recent scoped AI message in the node card, and
+use `stream.values` only when you intentionally need a graph state field.
 
-The pattern is: show streaming content for live updates, fall back to the
-committed state value once the node is done.
+Because scoped messages are tied to the producing node, the UI can support
+parallel graph paths without guessing from message order. Each card updates from
+the stream events that belong to its node, and completed values remain available
+through `stream.values`.
 
 ```ts
-for (const node of PIPELINE_NODES) {
-  const status = getNodeStatus(node, streamingContent, stream.values);
+function NodeContent({ stream, node }: { stream: AnyStream; node: SubgraphDiscoverySnapshot }) {
+  const messages = useMessages(stream, node);
+  const content = messages.find(AIMessage.isInstance)?.text ?? "";
 
-  const content =
-    status === "streaming"
-      ? streamingContent[node.name]
-      : stream.values?.[node.stateKey];
+  return <Markdown>{content}</Markdown>;
 }
 ```
 
@@ -398,30 +348,23 @@ rendering:
 ```tsx
 function NodeCardList({
   nodes,
-  messages,
-  values,
-  getMetadata,
+  stream,
+  isLoading,
 }: {
-  nodes: typeof PIPELINE_NODES;
-  messages: BaseMessage[];
-  values: Record<string, unknown>;
-  getMetadata: (msg: BaseMessage) => MessageMetadata | undefined;
+  nodes: SubgraphDiscoverySnapshot[];
+  stream: AnyStream;
+  isLoading: boolean;
 }) {
-  const streamingContent = getStreamingContent(messages, getMetadata);
+  const firstIncompleteIdx = nodes.findIndex((node) => node.status !== "complete");
 
   return (
     <div className="space-y-3">
-      {nodes.map((node) => {
-        const status = getNodeStatus(node, streamingContent, values);
-        return (
-          <NodeCard
-            key={node.name}
-            node={node}
-            status={status}
-            streamingContent={streamingContent[node.name]}
-            completedContent={values?.[node.stateKey]}
-          />
-        );
+      {nodes.map((node, i) => {
+        const isComplete = node.status === "complete";
+        const isRunning = isLoading && !isComplete && firstIncompleteIdx === i;
+        if (!isComplete && !isRunning) return null;
+
+        return <NodeCard key={node.id} node={node} stream={stream} />;
       })}
     </div>
   );
@@ -445,16 +388,11 @@ matters:
 ## Handling dynamic pipelines
 
 Not all graphs have a fixed set of nodes. Some pipelines add or skip nodes
-based on the input. Handle this by checking which state keys actually have
-values:
+based on the input. The discovery map contains only nodes observed for the
+current thread:
 
 ```ts
-const activeNodes = PIPELINE_NODES.filter(
-  (node) =>
-    streamingContent[node.name] ||
-    values?.[node.stateKey] ||
-    node.name === currentNode
-);
+const activeNodes = [...stream.subgraphs.values()];
 ```
 
 This ensures your UI only shows cards for nodes that are relevant to the
@@ -462,17 +400,21 @@ current execution, avoiding empty placeholder cards.
 
 <Info>
 If your graph has conditional branching (e.g., skip "Research" for simple
-factual queries), the skipped nodes will never appear in the streaming content
-or state values. Your pipeline progress bar should reflect this by dimming or
-hiding skipped steps.
+factual queries), skipped nodes will not appear in `stream.subgraphs`. Your
+pipeline progress bar can render discovered nodes only or dim expected nodes
+that have no matching snapshot.
 </Info>
 
 ## Best practices
 
-- **Define nodes declaratively**. Keep your `PIPELINE_NODES` array as a single
-  source of truth that maps node names, state keys, and display labels.
-- **Prefer streaming content for active nodes**. It gives users immediate
-  feedback. Only fall back to committed state values after the node completes.
+- **Discover nodes from the stream**. Render cards from `stream.subgraphs`
+  rather than hardcoding expected nodes; conditional or skipped steps won't
+  appear until they run.
+- **Treat state keys as UI contracts**. Decide which graph outputs should be
+  stable enough for the frontend to render, and keep those keys documented next
+  to the graph definition.
+- **Use scoped messages for node cards**. They work while a node is streaming
+  and after it completes, without coupling UI cards to state key names.
 - **Auto-collapse completed nodes**. In long pipelines, auto-collapse finished
   cards so users can focus on the currently active step.
 - **Show estimated timing**. If you have historical data on how long each node
diff --git a/src/oss/langgraph/frontend/overview.md b/src/oss/langgraph/frontend/overview.md
index 144013cd63..9f8810cc29 100644
--- a/src/oss/langgraph/frontend/overview.md
+++ b/src/oss/langgraph/frontend/overview.md
@@ -3,11 +3,23 @@ title: Overview
 description: Render LangGraph agents to the frontend
 ---
 
-Build frontends that visualize LangGraph pipelines in real time. These patterns show how to render multi-step graph execution with per-node status and streaming content from custom `StateGraph` workflows.
+Build frontends that visualize LangGraph pipelines in real time. These patterns
+show how to render multi-step graph execution with per-node status and streaming
+content from custom `StateGraph` workflows.
+
+LangGraph's frontend advantage is that the UI can follow the same structure as
+the graph. Nodes, state keys, checkpoints, interrupts, subgraphs, and streamed
+messages are all visible runtime concepts, so you can build interfaces that
+explain what the system is doing instead of hiding execution behind one
+assistant message.
+
+<Note>
+These patterns use the v1 frontend SDK packages. If you are using an earlier version, see the migration guides for [React](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-react/docs/v1-migration.md), [Vue](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-vue/docs/v1-migration.md), [Svelte](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-svelte/docs/v1-migration.md), and [Angular](https://github.com/langchain-ai/langgraphjs/blob/main/libs/sdk-angular/docs/v1-migration.md).
+</Note>
 
 ## Architecture
 
-LangGraph graphs are composed of named nodes connected by edges. Each node executes a step (classify, research, analyze, synthesize) and writes output to a specific state key. On the frontend, `useStream` provides reactive access to node outputs, streaming tokens, and graph metadata so you can map each node to a UI card.
+LangGraph graphs are composed of named nodes connected by edges. Each node executes a step (classify, research, analyze, synthesize) and writes output to a specific state key. On the frontend, the SDK stream handle provides reactive access to node outputs, streaming tokens, and discovered subgraphs so you can map each node to a UI card.
 
 ```mermaid
 %%{
@@ -48,15 +60,18 @@ class State(MessagesState):
     classification: str
     research: str
     analysis: str
+    synthesis: str
 
 graph = StateGraph(State)
 graph.add_node("classify", classify_node)
-graph.add_node("research", research_node)
+graph.add_node("do_research", research_node)
 graph.add_node("analyze", analyze_node)
+graph.add_node("synthesize", synthesize_node)
 graph.add_edge(START, "classify")
-graph.add_edge("classify", "research")
-graph.add_edge("research", "analyze")
-graph.add_edge("analyze", END)
+graph.add_edge("classify", "do_research")
+graph.add_edge("do_research", "analyze")
+graph.add_edge("analyze", "synthesize")
+graph.add_edge("synthesize", END)
 
 app = graph.compile()
 ```
@@ -66,30 +81,36 @@ app = graph.compile()
 :::js
 
 ```ts
-import { StateGraph, StateSchema, MessagesValue, START, END } from "@langchain/langgraph";
-import * as z from "zod";
-
-const State = new StateSchema({
-  messages: MessagesValue,
-  classification: z.string(),
-  research: z.string(),
-  analysis: z.string(),
+import { Annotation, MessagesAnnotation, StateGraph, START, END } from "@langchain/langgraph";
+
+const State = Annotation.Root({
+  ...MessagesAnnotation.spec,
+  classification: Annotation<string>(),
+  research: Annotation<string>(),
+  analysis: Annotation<string>(),
+  synthesis: Annotation<string>(),
 });
 
 const graph = new StateGraph(State)
   .addNode("classify", classifyNode)
-  .addNode("research", researchNode)
+  .addNode("do_research", researchNode)
   .addNode("analyze", analyzeNode)
+  .addNode("synthesize", synthesizeNode)
   .addEdge(START, "classify")
-  .addEdge("classify", "research")
-  .addEdge("research", "analyze")
-  .addEdge("analyze", END)
+  .addEdge("classify", "do_research")
+  .addEdge("do_research", "analyze")
+  .addEdge("analyze", "synthesize")
+  .addEdge("synthesize", END)
   .compile();
 ```
 
 :::
 
-On the frontend, `useStream` exposes `stream.values` for completed node outputs and `getMessagesMetadata` for identifying which node produced each streaming token.
+On the frontend, @[`useStream`] exposes `stream.subgraphs` for graph-node discovery
+and selector helpers such as `useMessages(stream, node)` for node-scoped
+streaming content. `stream.values` still holds the full graph state when you
+need fields such as the final `synthesis`. Angular uses the same stream API
+shape through @[`injectStream`].
 
 ```ts
 import { useStream } from "@langchain/react";
@@ -103,9 +124,28 @@ function Pipeline() {
   const classification = stream.values?.classification;
   const research = stream.values?.research;
   const analysis = stream.values?.analysis;
+  const graphNodes = [...stream.subgraphs.values()];
 }
 ```
 
+## What makes this different from a chat stream
+
+Custom graphs often power product workflows: research pipelines, approval flows,
+data pipelines, data enrichment, code review, planning, and multi-step analysis. The
+frontend SDK lets you render these workflows using graph-native signals:
+
+| Runtime concept | Frontend UX |
+| --- | --- |
+| **Named nodes** | One card, timeline step, or status badge per graph node. |
+| **State keys** | Dedicated UI regions for typed outputs such as classification, sources, analysis, and final synthesis. |
+| **Streaming metadata** | Route partial messages to the node that produced them. |
+| **Checkpoints** | Inspect or resume from prior graph states for debugging and auditability. |
+| **Interrupts** | Pause a node for human input, approval, or correction, then continue. |
+| **Subgraphs** | Reveal nested execution only when the user needs more detail. |
+
+Because the SDK exposes these concepts directly, you can scale from a simple
+chat panel to a full workflow debugger without changing the backend protocol.
+
 ## Patterns
 
 <CardGroup cols={2}>
@@ -116,4 +156,4 @@ function Pipeline() {
 
 ## Related patterns
 
-The [LangChain frontend patterns](/oss/langchain/frontend/overview)—markdown messages, tool calling, optimistic updates, and more—work with any LangGraph graph. The `useStream` hook provides the same core API whether you use `createAgent`, `createDeepAgent`, or a custom `StateGraph`.
+The [LangChain frontend patterns](/oss/langchain/frontend/overview)—markdown messages, tool calling, human-in-the-loop, resumable streams, and time travel—work with any LangGraph graph. The stream API provides the same core data model whether you use `createAgent`, `createDeepAgent`, or a custom `StateGraph`.
diff --git a/src/oss/langgraph/streaming.mdx b/src/oss/langgraph/streaming.mdx
index e865a303f7..814a3058ad 100644
--- a/src/oss/langgraph/streaming.mdx
+++ b/src/oss/langgraph/streaming.mdx
@@ -1028,7 +1028,7 @@ for await (const [mode, chunk] of await graph.stream(
 
 #### Use tool progress in React with `useStream`
 
-The `useStream` hook from `@langchain/langgraph-sdk/react` exposes a `toolProgress` array when you include `"tools"` in your stream modes. Each entry is a `ToolProgress` object that tracks the current state of a running tool:
+The @[`useStream`] hook from `@langchain/langgraph-sdk/react` exposes a `toolProgress` array when you include `"tools"` in your stream modes. Each entry is a `ToolProgress` object that tracks the current state of a running tool:
 
 | Field | Description |
 |-------|-------------|
diff --git a/src/playground.mdx b/src/playground.mdx
index c693bd78e7..e0de184a89 100644
--- a/src/playground.mdx
+++ b/src/playground.mdx
@@ -244,7 +244,7 @@ noindex: true
 
         <CardGroup cols={1}>
         <Card title="ai-elements" icon="package" href="https://ui-patterns.langchain.com/ai-elements/" cta="Open preview" target="_blank">
-            Headless, composable React components for building AI chat UIs. Uses `useStream` under the hood with full shadcn/ui compatibility.
+            Headless, composable React components for building AI chat UIs. Uses @[`useStream`] under the hood with full shadcn/ui compatibility.
 
             - Scroll-sticky conversation container
             - Streaming code blocks with syntax highlighting
diff --git a/src/snippets/oss/use-stream-type-inference.mdx b/src/snippets/oss/use-stream-type-inference.mdx
new file mode 100644
index 0000000000..bbfdfdd37b
--- /dev/null
+++ b/src/snippets/oss/use-stream-type-inference.mdx
@@ -0,0 +1,3 @@
+<Info>
+The code examples use `useStream<typeof myAgent>` for type-safe stream state. See Type inference for [Python](/oss/python/langchain/frontend/overview#type-inference) or [JavaScript](/oss/javascript/langchain/frontend/overview#type-inference) backends.
+</Info>