@agent-native/core 0.87.0 → 0.90.1

package/corpus/core/src/server/transcribe-voice.ts

@@ -53,7 +53,14 @@ const OPENAI_MODEL = "whisper-1";
 const OPENAI_CHAT_URL = "https://api.openai.com/v1/chat/completions";
 const OPENAI_CLEANUP_MODEL = "gpt-5.4-mini";
 const MAX_AUDIO_BYTES = 25 * 1024 * 1024; // Whisper hard limit.
-const MAX_TRANSCRIPT_CHARS = 40_000;
+// Hard cap for the dictation-cleanup text path (`sanitizeTranscriptText`
+// below). This endpoint has no `task` field — it's always the Hold-Fn
+// dictation cleanup pass — but a long session (many minutes across
+// multiple pause-triggered final segments) can still exceed a tight cap.
+// 150k gives real headroom for a long dictation session while still
+// bounding worst-case request size; truncation (when it does happen) keeps
+// both ends of the text instead of silently dropping the tail.
+const MAX_TRANSCRIPT_CHARS = 150_000;
 // Public Builder transcription model id. The Builder gateway maps this to
 // Gemini 3.1 Flash-Lite.
 const BUILDER_GEMINI_TRANSCRIPTION_MODEL = "gemini-3-1-flash-lite";
@@ -117,6 +124,39 @@ function isSameOriginRequest(event: H3Event): boolean {
   return true;
 }
 
+/**
+ * Derive an AbortSignal that fires when the client disconnects mid-request
+ * (e.g. the desktop client's own 8s ceiling firing before a provider call's
+ * longer timeout). Without this, an abandoned client connection leaves the
+ * server-side provider fetch running for its full timeout, burning provider
+ * quota/cost on a response nobody will read. `req.on("close", ...)` fires on
+ * abnormal/early disconnect in Node's http server; a stray fire after normal
+ * completion is a harmless no-op since the response has already been sent.
+ * Returns undefined if the underlying Node request isn't available (e.g. a
+ * non-Node adapter), so callers fall back to their existing timeout-only
+ * signal.
+ */
+function clientDisconnectSignal(event: H3Event): AbortSignal | undefined {
+  const req = event.node?.req as
+    | (NodeJS.EventEmitter & { on?: (...args: any[]) => void })
+    | undefined;
+  if (!req?.on) return undefined;
+  const controller = new AbortController();
+  req.on("close", () => controller.abort());
+  return controller.signal;
+}
+
+/** Combine a provider call's own timeout signal with the request's optional
+ * client-disconnect signal so either one aborts the upstream fetch. */
+function withClientAbort(
+  timeoutSignal: AbortSignal,
+  clientAbortSignal?: AbortSignal,
+): AbortSignal {
+  return clientAbortSignal
+    ? AbortSignal.any([timeoutSignal, clientAbortSignal])
+    : timeoutSignal;
+}
+
 export function createTranscribeVoiceHandler() {
   return defineEventHandler(async (event: H3Event) => {
     if (getMethod(event) !== "POST") {
@@ -128,6 +168,12 @@ export function createTranscribeVoiceHandler() {
       return { error: "Cross-origin request rejected" };
     }
 
+    // One client-disconnect signal per request, threaded into every
+    // provider-fetch AbortController below via AbortSignal.any so a client
+    // giving up early aborts the same upstream fetch instead of leaving it
+    // running for its full timeout.
+    const clientAbort = clientDisconnectSignal(event);
+
     const parts = await readMultipartFormData(event).catch(() => null);
     const audio = parts?.find((p) => p.name === "audio");
     const textPart = parts?.find((p) => p.name === "text");
@@ -265,6 +311,7 @@ export function createTranscribeVoiceHandler() {
         hasBuilderPrivateKey,
         withRequestContext,
         resolveApiKey,
+        clientAbortSignal: clientAbort,
       });
     }
 
@@ -305,6 +352,7 @@ export function createTranscribeVoiceHandler() {
           apiKey: geminiKey,
           language: language || undefined,
           instructions: voiceGuidance,
+          clientAbortSignal: clientAbort,
         });
         const trimmed = applyVoiceContext(text);
         if (!trimmed) {
@@ -376,6 +424,7 @@ export function createTranscribeVoiceHandler() {
         language,
         instructions: voiceGuidance,
         contextPack: voiceContext,
+        clientAbortSignal: clientAbort,
       });
     }
 
@@ -419,6 +468,7 @@ export function createTranscribeVoiceHandler() {
             apiKey: geminiKey,
             language: language || undefined,
             instructions: voiceGuidance,
+            clientAbortSignal: clientAbort,
           });
           const trimmed = applyVoiceContext(text);
           if (trimmed) {
@@ -490,6 +540,7 @@ export function createTranscribeVoiceHandler() {
       language,
       instructions: voiceGuidance,
       contextPack: voiceContext,
+      clientAbortSignal: clientAbort,
     });
   });
 }
@@ -509,6 +560,7 @@ async function callWhisperCompat({
   language,
   instructions,
   contextPack,
+  clientAbortSignal,
 }: {
   event: H3Event;
   provider: {
@@ -522,6 +574,7 @@ async function callWhisperCompat({
   language?: string;
   instructions?: string;
   contextPack?: VoiceContextPack;
+  clientAbortSignal?: AbortSignal;
 }): Promise<{ text: string } | { error: string }> {
   const ext = pickExtension(mime);
   const filename = `composer-voice.${ext}`;
@@ -544,7 +597,7 @@ async function callWhisperCompat({
       method: "POST",
       headers: { Authorization: `Bearer ${provider.apiKey}` },
       body: form,
-      signal: controller.signal,
+      signal: withClientAbort(controller.signal, clientAbortSignal),
     });
     if (!res.ok) {
       const text = await res.text().catch(() => "");
@@ -585,6 +638,7 @@ async function cleanupTranscriptText({
   hasBuilderPrivateKey,
   withRequestContext,
   resolveApiKey,
+  clientAbortSignal,
 }: {
   event: H3Event;
   text: string;
@@ -594,6 +648,7 @@ async function cleanupTranscriptText({
   hasBuilderPrivateKey: () => Promise<boolean>;
   withRequestContext: <T>(fn: () => Promise<T>) => Promise<T>;
   resolveApiKey: (key: string) => Promise<string | undefined>;
+  clientAbortSignal?: AbortSignal;
 }): Promise<{ text: string } | { error: string }> {
   const original = text.trim();
   if (!original) return { text: "" };
@@ -614,7 +669,7 @@ async function cleanupTranscriptText({
     }
     try {
       const cleaned = await withRequestContext(() =>
-        cleanupWithBuilder({ text: original, instructions }),
+        cleanupWithBuilder({ text: original, instructions, clientAbortSignal }),
       );
       return { text: finalizeText(cleaned || original) };
     } catch (err) {
@@ -639,6 +694,7 @@ async function cleanupTranscriptText({
         text: original,
         apiKey: geminiKey,
         instructions,
+        clientAbortSignal,
       });
       return { text: finalizeText(cleaned || original) };
     } catch (err) {
@@ -665,6 +721,7 @@ async function cleanupTranscriptText({
         text: original,
         apiKey,
         instructions,
+        clientAbortSignal,
       });
       return { text: finalizeText(cleaned || original) };
     } catch (err) {
@@ -678,7 +735,7 @@ async function cleanupTranscriptText({
   if (await hasBuilderPrivateKey()) {
     try {
       const cleaned = await withRequestContext(() =>
-        cleanupWithBuilder({ text: original, instructions }),
+        cleanupWithBuilder({ text: original, instructions, clientAbortSignal }),
       );
       if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
@@ -693,6 +750,7 @@ async function cleanupTranscriptText({
         text: original,
         apiKey: geminiKey,
         instructions,
+        clientAbortSignal,
       });
       if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
@@ -708,6 +766,7 @@ async function cleanupTranscriptText({
         text: original,
         apiKey: groqKey,
         instructions,
+        clientAbortSignal,
       });
       if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
@@ -723,6 +782,7 @@ async function cleanupTranscriptText({
         text: original,
         apiKey: openaiKey,
         instructions,
+        clientAbortSignal,
       });
       if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
@@ -736,9 +796,11 @@ async function cleanupTranscriptText({
 async function cleanupWithBuilder({
   text,
   instructions,
+  clientAbortSignal,
 }: {
   text: string;
   instructions?: string;
+  clientAbortSignal?: AbortSignal;
 }): Promise<string> {
   const engine = createBuilderEngine();
   const controller = new AbortController();
@@ -757,7 +819,7 @@ async function cleanupWithBuilder({
         },
       ],
       tools: [],
-      abortSignal: controller.signal,
+      abortSignal: withClientAbort(controller.signal, clientAbortSignal),
       maxOutputTokens: Math.min(4096, Math.max(512, text.length * 2)),
       temperature: 0,
     })) {
@@ -784,10 +846,12 @@ async function cleanupWithGemini({
   text,
   apiKey,
   instructions,
+  clientAbortSignal,
 }: {
   text: string;
   apiKey: string;
   instructions?: string;
+  clientAbortSignal?: AbortSignal;
 }): Promise<string> {
   const controller = new AbortController();
   const timeout = setTimeout(() => controller.abort(), 8_000);
@@ -809,7 +873,7 @@ async function cleanupWithGemini({
         ],
         generationConfig: { temperature: 0 },
       }),
-      signal: controller.signal,
+      signal: withClientAbort(controller.signal, clientAbortSignal),
     });
     if (!res.ok) {
       const body = await res.text().catch(() => "");
@@ -835,11 +899,13 @@ async function cleanupWithChatProvider({
   text,
   apiKey,
   instructions,
+  clientAbortSignal,
 }: {
   provider: "openai" | "groq";
   text: string;
   apiKey: string;
   instructions?: string;
+  clientAbortSignal?: AbortSignal;
 }): Promise<string> {
   const controller = new AbortController();
   const timeout = setTimeout(() => controller.abort(), 8_000);
@@ -861,7 +927,7 @@ async function cleanupWithChatProvider({
         ],
         temperature: 0,
       }),
-      signal: controller.signal,
+      signal: withClientAbort(controller.signal, clientAbortSignal),
     });
     if (!res.ok) {
       const body = await res.text().catch(() => "");
@@ -896,7 +962,23 @@ function sanitizeInstructions(value: string): string | undefined {
 function sanitizeTranscriptText(value: string): string | undefined {
   const trimmed = value.replace(/\0/g, "").trim();
   if (!trimmed) return undefined;
-  return trimmed.slice(0, MAX_TRANSCRIPT_CHARS);
+  if (trimmed.length <= MAX_TRANSCRIPT_CHARS) return trimmed;
+  // Truncate the middle rather than the tail — losing the end of a long
+  // dictation silently (previous behavior) is worse than losing the middle,
+  // since users notice a cut-off ending immediately but rarely proofread
+  // the entire cleaned output against the original.
+  console.warn(
+    `[transcribe-voice] transcript truncated: ${trimmed.length} chars exceeds ${MAX_TRANSCRIPT_CHARS} cap`,
+  );
+  const marker = "\n[... transcript truncated ...]\n";
+  const keepChars = MAX_TRANSCRIPT_CHARS - marker.length;
+  const headChars = Math.floor((keepChars * 2) / 3);
+  const tailChars = keepChars - headChars;
+  return (
+    trimmed.slice(0, headChars) +
+    marker +
+    trimmed.slice(trimmed.length - tailChars)
+  );
 }
 
 function buildCleanupSystemPrompt(instructions?: string): string {
@@ -959,12 +1041,14 @@ async function transcribeWithGemini({
   apiKey,
   language,
   instructions,
+  clientAbortSignal,
 }: {
   audioBytes: Uint8Array;
   mimeType: string;
   apiKey: string;
   language?: string;
   instructions?: string;
+  clientAbortSignal?: AbortSignal;
 }): Promise<string> {
   const base64 = uint8ArrayToBase64(audioBytes);
   const prompt = buildGeminiTranscriptionPrompt({ language, instructions });
@@ -996,7 +1080,7 @@ async function transcribeWithGemini({
         // creative reinterpretation.
         generationConfig: { temperature: 0 },
       }),
-      signal: controller.signal,
+      signal: withClientAbort(controller.signal, clientAbortSignal),
     });
     if (!res.ok) {
       const body = await res.text().catch(() => "");

package/corpus/core/src/shared/agent-readable-resource.ts

@@ -0,0 +1,111 @@
+import {
+  AGENT_ACCESS_PARAM,
+  buildAgentAccessApiUrl,
+  buildAgentAccessUrl,
+  toAgentAccessUrl,
+  type AgentAccessUrlOptions,
+} from "./agent-access.js";
+
+export const AGENT_READABLE_RESOURCE_SCRIPT_TYPE =
+  "application/agent-native+json";
+export const AGENT_READABLE_RESOURCE_PAYLOAD_TYPE =
+  "agent-native.resource.discovery";
+
+export interface AgentReadableResourceDiscovery {
+  type: typeof AGENT_READABLE_RESOURCE_PAYLOAD_TYPE;
+  resourceType: string;
+  resourceId: string;
+  title?: string;
+  url?: string;
+  contextUrl: string;
+  expiresAt?: string;
+  instructions?: string;
+}
+
+export interface BuildAgentReadableResourceDiscoveryOptions extends AgentAccessUrlOptions {
+  resourceType: string;
+  resourceId: string;
+  title?: string | null;
+  path?: string | null;
+  contextEndpoint: string;
+  token?: string | null;
+  expiresAt?: string | null;
+  instructions?: string | null;
+}
+
+export function safeJsonForHtml(value: unknown): string {
+  return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (char) => {
+    switch (char) {
+      case "<":
+        return "\\u003c";
+      case ">":
+        return "\\u003e";
+      case "&":
+        return "\\u0026";
+      case "\u2028":
+        return "\\u2028";
+      case "\u2029":
+        return "\\u2029";
+      default:
+        return char;
+    }
+  });
+}
+
+export function buildAgentReadableResourceDiscovery({
+  resourceType,
+  resourceId,
+  title,
+  path,
+  contextEndpoint,
+  token,
+  expiresAt,
+  instructions,
+  origin,
+  basePath,
+  tokenParam = AGENT_ACCESS_PARAM,
+}: BuildAgentReadableResourceDiscoveryOptions): AgentReadableResourceDiscovery {
+  return {
+    type: AGENT_READABLE_RESOURCE_PAYLOAD_TYPE,
+    resourceType,
+    resourceId,
+    ...(title ? { title } : {}),
+    ...(path
+      ? {
+          url: token
+            ? buildAgentAccessUrl({
+                path,
+                token,
+                origin,
+                basePath,
+                tokenParam,
+              })
+            : toAgentAccessUrl(path, { origin, basePath }),
+        }
+      : {}),
+    contextUrl: buildAgentAccessApiUrl({
+      endpoint: contextEndpoint,
+      resourceId,
+      token,
+      origin,
+      basePath,
+      tokenParam,
+    }),
+    ...(expiresAt ? { expiresAt } : {}),
+    ...(instructions ? { instructions } : {}),
+  };
+}
+
+export function renderAgentReadableResourceDiscoveryScript(
+  discovery: AgentReadableResourceDiscovery,
+  options: { id?: string } = {},
+): string {
+  const id = options.id ? ` id="${escapeHtmlAttribute(options.id)}"` : "";
+  return `<script type="${AGENT_READABLE_RESOURCE_SCRIPT_TYPE}"${id}>${safeJsonForHtml(
+    discovery,
+  )}</script>`;
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value.replace(/[&"]/g, (char) => (char === "&" ? "&amp;" : "&quot;"));
+}

package/corpus/core/src/shared/index.ts

@@ -72,3 +72,12 @@ export {
   type AgentAccessResourceScope,
   type AgentAccessUrlOptions,
 } from "./agent-access.js";
+export {
+  AGENT_READABLE_RESOURCE_PAYLOAD_TYPE,
+  AGENT_READABLE_RESOURCE_SCRIPT_TYPE,
+  buildAgentReadableResourceDiscovery,
+  renderAgentReadableResourceDiscoveryScript,
+  safeJsonForHtml,
+  type AgentReadableResourceDiscovery,
+  type BuildAgentReadableResourceDiscoveryOptions,
+} from "./agent-readable-resource.js";

package/corpus/core/src/sharing/actions/create-agent-resource-link.ts

@@ -0,0 +1,91 @@
+import { z } from "zod";
+
+import { defineAction } from "../../action.js";
+import {
+  buildAgentAccessApiUrl,
+  buildAgentAccessUrl,
+  createScopedAgentAccessGrant,
+} from "../../server/agent-access.js";
+import { getConfiguredAppBasePath } from "../../server/app-base-path.js";
+import {
+  getRequestContext,
+  getRequestUserEmail,
+} from "../../server/request-context.js";
+import { ForbiddenError, resolveAccess } from "../access.js";
+import { requireShareableResource } from "../registry.js";
+
+function appOrigin(): string {
+  const origin =
+    getRequestContext()?.requestOrigin ||
+    process.env.APP_URL ||
+    process.env.BETTER_AUTH_URL ||
+    "http://localhost:3000";
+  try {
+    return new URL(origin).origin;
+  } catch {
+    return "http://localhost:3000";
+  }
+}
+
+export default defineAction({
+  description:
+    "Create a temporary, read-only, agent-readable link for a registered shareable resource. The token is scoped to exactly one resource and does not change the resource visibility.",
+  schema: z.object({
+    resourceType: z.string().describe("Shareable resource type"),
+    resourceId: z.string().describe("Resource ID"),
+  }),
+  readOnly: true,
+  run: async (args) => {
+    const reg = requireShareableResource(args.resourceType);
+    const agentReadable = reg.agentReadable;
+    if (!agentReadable) {
+      throw new ForbiddenError(
+        `${reg.displayName} does not expose an agent-readable context endpoint.`,
+      );
+    }
+
+    const access = await resolveAccess(args.resourceType, args.resourceId);
+    if (!access) {
+      throw new ForbiddenError(
+        `No access to ${args.resourceType} ${args.resourceId}`,
+      );
+    }
+
+    const pagePath =
+      agentReadable.getPagePath?.(access.resource) ??
+      reg.getResourcePath?.(access.resource);
+    const contextPath = agentReadable.getContextPath(access.resource);
+    if (!pagePath || !contextPath) {
+      throw new ForbiddenError(`${reg.displayName} is not agent-readable yet.`);
+    }
+
+    const grant = createScopedAgentAccessGrant({
+      resourceKind: agentReadable.resourceKind,
+      resourceId: args.resourceId,
+      viewerEmail: getRequestUserEmail() || undefined,
+      ttlSeconds: agentReadable.ttlSeconds,
+    });
+    const origin = appOrigin();
+    const basePath = getConfiguredAppBasePath();
+
+    return {
+      resourceType: args.resourceType,
+      resourceId: args.resourceId,
+      url: buildAgentAccessUrl({
+        path: pagePath,
+        origin,
+        basePath,
+        token: grant.token,
+      }),
+      contextUrl: buildAgentAccessApiUrl({
+        endpoint: contextPath,
+        resourceId: args.resourceId,
+        origin,
+        basePath,
+        token: grant.token,
+      }),
+      expiresAt: grant.expiresAt,
+      ttlSeconds: grant.ttlSeconds,
+    };
+  },
+});

package/corpus/core/src/sharing/registry.ts

@@ -105,6 +105,25 @@ export interface ShareableResourceRegistration {
    * Default: `false`.
    */
   ownerAccessIgnoresOrg?: boolean;
+  /**
+   * Optional external-agent read handoff. When set, the framework-level
+   * `create-agent-resource-link` action can mint a short-lived, read-only
+   * `agent_access` URL for this resource. The context endpoint is owned by the
+   * template so it can expose the same intentionally shareable shape as the
+   * public page, not a generic raw database row.
+   */
+  agentReadable?:
+    | false
+    | {
+        /** Token scope. Include the app name to avoid cross-app collisions. */
+        resourceKind: string;
+        /** App-relative JSON endpoint that accepts `id` + `agent_access`. */
+        getContextPath: (resource: any) => string | undefined;
+        /** Optional override for the page URL. Defaults to getResourcePath. */
+        getPagePath?: (resource: any) => string | undefined;
+        /** Optional override for the default two-hour token lifetime. */
+        ttlSeconds?: number;
+      };
 }
 
 // Stash the registry on globalThis so it survives SSR bundle duplication.

package/corpus/core/src/styles/agent-native.css

@@ -41,6 +41,16 @@
    zoom-in/out, slide-in-from-*, spin-in, etc.). */
 @import "tw-animate-css";
 
+:root {
+  --agent-native-viewport-height: 100vh;
+}
+
+@supports (height: 100dvh) {
+  :root {
+    --agent-native-viewport-height: 100dvh;
+  }
+}
+
 /* Shared shell depth.
    Use these classes on app layouts that have a persistent left nav:
 
@@ -63,6 +73,8 @@
     var(--agent-native-raised-border);
   --agent-native-raised-shadow-left: -1px 0 3px rgb(0 0 0 / 0.018);
   --agent-native-raised-shadow-right: 1px 0 3px rgb(0 0 0 / 0.018);
+  height: var(--agent-native-viewport-height);
+  min-height: 0;
   background: var(--agent-native-lower-surface);
 }
 
@@ -90,16 +102,6 @@
       hsl(var(--sidebar-background, var(--background))) 94%,
       black
     );
-    --agent-native-raised-surface: color-mix(
-      in srgb,
-      hsl(var(--background)) 78%,
-      hsl(var(--muted)) 22%
-    );
-    --agent-native-card-surface: color-mix(
-      in srgb,
-      var(--agent-native-raised-surface) 88%,
-      hsl(var(--muted)) 12%
-    );
   }
 }
 
@@ -167,43 +169,45 @@
   container: agent-native-main / inline-size;
 }
 
-.agent-layout-shell
-  :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
-  > :first-child
-  > :where(header, div).border-b,
-.agent-layout-shell
-  :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
-  > :where(header, div).border-b,
-.agent-layout-shell
-  .agent-layout-left-drawer
-  > :where(header, div).border-b:first-child,
-.agent-layout-shell
-  .agent-layout-left-drawer
-  > :first-child
-  > :where(header, div).border-b,
-.agent-layout-shell .agent-native-shell-topbar {
-  border-bottom-color: transparent !important;
-}
+@media (min-width: 768px) {
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :first-child
+    > :where(header, div).border-b,
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :where(header, div).border-b,
+  .agent-layout-shell
+    .agent-layout-left-drawer
+    > :where(header, div).border-b:first-child,
+  .agent-layout-shell
+    .agent-layout-left-drawer
+    > :first-child
+    > :where(header, div).border-b,
+  .agent-layout-shell .agent-native-shell-topbar {
+    border-bottom-color: transparent !important;
+  }
 
-.agent-layout-shell
-  :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
-  > :first-child
-  > :where(header, div).border-b,
-.agent-layout-shell
-  :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
-  > :where(header, div).border-b {
-  background-color: var(--agent-native-raised-surface) !important;
-}
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :first-child
+    > :where(header, div).border-b,
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :where(header, div).border-b {
+    background-color: var(--agent-native-raised-surface) !important;
+  }
 
-.agent-layout-shell
-  :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
-  > :first-child
-  > :where(header, div).border-b.h-12,
-.agent-layout-shell
-  :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
-  > :where(header, div).border-b.h-12 {
-  min-height: 4rem;
-  height: 4rem;
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :first-child
+    > :where(header, div).border-b.h-12,
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :where(header, div).border-b.h-12 {
+    min-height: 4rem;
+    height: 4rem;
+  }
 }
 
 .dark
@@ -699,6 +703,14 @@
   width: 100%;
 }
 
+/* Plan-mode callout pill: lives inside .agent-composer-stack directly above
+   the composer. Matching .agent-composer-area's own width keeps the pill
+   visually attached to (and right-aligned with) the composer instead of the
+   full pane, whether the pane is a narrow sidebar or a wide centered page. */
+.agent-plan-mode-callout {
+  width: 100%;
+}
+
 [data-agent-empty-state="centered"] {
   justify-content: center;
 }