@agent-native/core 0.79.27 → 0.80.0

package/corpus/core/src/client/frame-protocol.ts

@@ -84,6 +84,10 @@ export interface PresentationModeMessage {
   data: { active: boolean };
 }
 
+export interface DesignCloseMessage {
+  type: "design:close";
+}
+
 export type AppToFrameMessage =
   | AppReadyMessage
   | SubmitChatMessage
@@ -97,7 +101,8 @@ export type AppToFrameMessage =
   | EnterStyleEditingMessage
   | EnterTextEditingMessage
   | ExitSelectionModeMessage
-  | PresentationModeMessage;
+  | PresentationModeMessage
+  | DesignCloseMessage;
 
 // ---------------------------------------------------------------------------
 // Messages FROM frame TO app
@@ -138,13 +143,23 @@ export interface SidebarModeMessage {
   };
 }
 
+export interface DesignInitMessage {
+  type: "design:init";
+  data: {
+    previewUrl: string;
+    themeVars?: Record<string, string>;
+    context?: { projectId?: string; branchId?: string; orgId?: string };
+  };
+}
+
 export type FrameToAppMessage =
   | FrameOriginMessage
   | ChatRunningMessage
   | UserInfoMessage
   | CodeCompleteMessage
   | SidebarModeMessage
-  | PresentationModeMessage;
+  | PresentationModeMessage
+  | DesignInitMessage;
 
 // ---------------------------------------------------------------------------
 // All message types

package/corpus/core/src/client/rich-markdown-editor/RegistryBlockNode.tsx

@@ -344,7 +344,7 @@ export function RegistryBlockNodeView(props: NodeViewProps) {
               data-plan-interactive
               aria-label={`Edit ${spec.label}`}
               onClick={() => setPanelOpen(true)}
-              className="an-block-edit-trigger flex size-7 items-center justify-center rounded-md border border-border bg-background/85 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-muted hover:text-foreground focus-visible:opacity-100 data-[visible=true]:opacity-100"
+              className="an-block-edit-trigger flex size-7 items-center justify-center rounded-md border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-muted hover:text-foreground focus-visible:opacity-100 data-[visible=true]:opacity-100"
               data-visible={panelOpen || shellHovered}
             >
               <IconPencil className="size-4" />
@@ -485,7 +485,7 @@ export function LegacyJsonEditSurface({
       data-plan-interactive
       aria-label={`Edit ${block.title ?? "block"}`}
       onClick={() => onOpenChange(true)}
-      className="an-block-edit-trigger flex size-7 items-center justify-center rounded-md border border-border bg-background/85 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-muted hover:text-foreground focus-visible:opacity-100 data-[visible=true]:opacity-100"
+      className="an-block-edit-trigger flex size-7 items-center justify-center rounded-md border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-muted hover:text-foreground focus-visible:opacity-100 data-[visible=true]:opacity-100"
       data-visible={selected || open}
     >
       <IconPencil className="size-4" />

package/corpus/core/src/client/sharing/ShareButton.tsx

@@ -47,6 +47,8 @@ export interface ShareButtonProps {
   variant?: "compact" | "label";
   /** Optional trigger style. Defaults to the Google-Docs-style "Share" label. */
   trigger?: "label" | "icon";
+  /** Hide the visibility/share glyph in the label trigger. */
+  hideTriggerIcon?: boolean;
   /** Optional className applied to the trigger button. */
   triggerClassName?: string;
   /** Notified when the share popover opens or closes. Hosts that render the
@@ -154,7 +156,7 @@ const BUTTON_GHOST_ICON = cn(
   "h-7 w-7 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
 );
 const SHARE_POPOVER_SURFACE =
-  "border-[hsl(var(--sidebar-border,var(--border)))] bg-[hsl(var(--sidebar-background,var(--popover)))]";
+  "border border-border bg-popover text-popover-foreground";
 const MEMBER_SUGGESTION_LIMIT = 25;
 const MEMBER_SEARCH_DEBOUNCE_MS = 140;
 
@@ -311,6 +313,7 @@ export function ShareButton(props: ShareButtonProps) {
       : currentVisibility === "org"
         ? IconBuilding
         : IconLock;
+  const showTriggerIcon = iconOnly || !props.hideTriggerIcon;
   const TriggerIcon = iconOnly ? IconShare3 : VisibilityIcon;
 
   return (
@@ -324,14 +327,16 @@ export function ShareButton(props: ShareButtonProps) {
           )}
           aria-label={iconOnly ? "Share" : undefined}
         >
-          {loaded || iconOnly ? (
-            <TriggerIcon size={16} strokeWidth={1.75} />
-          ) : (
-            <span
-              aria-hidden
-              className="inline-block h-4 w-4 rounded-sm bg-muted animate-pulse"
-            />
-          )}
+          {showTriggerIcon ? (
+            loaded || iconOnly ? (
+              <TriggerIcon size={16} strokeWidth={1.75} />
+            ) : (
+              <span
+                aria-hidden
+                className="inline-block h-4 w-4 rounded-sm bg-muted animate-pulse"
+              />
+            )
+          ) : null}
           {!iconOnly && <span>Share</span>}
         </button>
       </PopoverTrigger>
@@ -1029,7 +1034,7 @@ function AdvancedAccessPopover({
             disabled={!canManage || control.pending}
             onClick={onToggle}
             className={cn(
-              "flex w-full items-start gap-3 rounded-md border border-border/70 bg-background px-3 py-2.5 text-start transition-colors hover:bg-accent/45 disabled:cursor-not-allowed disabled:opacity-60",
+              "flex w-full items-start gap-3 rounded-md border border-border/70 bg-card px-3 py-2.5 text-start transition-colors hover:bg-accent/45 disabled:cursor-not-allowed disabled:opacity-60",
               control.checked && "border-border bg-accent/35 text-foreground",
             )}
           >
@@ -1042,7 +1047,7 @@ function AdvancedAccessPopover({
             >
               <span
                 className={cn(
-                  "ml-0.5 size-4 rounded-full bg-background shadow-sm transition-transform",
+                  "ml-0.5 size-4 rounded-full bg-popover shadow-sm transition-transform",
                   control.checked && "translate-x-4",
                 )}
               />
@@ -1210,7 +1215,7 @@ function MemberAutocomplete({
             }}
             onKeyDown={handleKeyDown}
             autoComplete="off"
-            className="h-9 w-full min-w-0 rounded-md border border-input bg-background ps-8 pe-8 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+            className="h-9 w-full min-w-0 rounded-md border border-input bg-card ps-8 pe-8 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
           />
           {search.isLoading ? (
             <IconLoader2
@@ -1355,13 +1360,13 @@ function CopyLinkField({
         <input
           readOnly
           value={value}
-          className="h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground outline-none"
+          className="h-9 min-w-0 flex-1 rounded-md border border-input bg-card px-3 text-sm text-muted-foreground outline-none"
           onFocus={(event) => event.currentTarget.select()}
         />
         <button
           type="button"
           onClick={handleCopy}
-          className="inline-flex h-9 shrink-0 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground hover:bg-accent"
+          className="inline-flex h-9 shrink-0 items-center gap-2 rounded-md border border-input bg-card px-3 text-sm font-medium text-foreground hover:bg-accent"
         >
           {copied ? <IconCheck size={15} /> : <IconCopy size={15} />}
           {copied ? "Copied" : "Copy"}
@@ -1439,7 +1444,7 @@ function RoleSelect(props: {
               )
             : cn(
                 BUTTON_BASE,
-                "h-9 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                "h-9 px-3 border border-input bg-card hover:bg-accent hover:text-accent-foreground",
               )
         }
         aria-label="Role"

package/corpus/core/src/client/use-agent-engine-configured.ts

@@ -14,6 +14,83 @@ export interface UseAgentEngineConfiguredResult {
   state: AgentEngineConfiguredState;
 }
 
+export interface FetchAgentEngineConfiguredStateOptions {
+  missingFallback?: boolean;
+  timeoutMs?: number;
+}
+
+const DEFAULT_STATUS_CHECK_TIMEOUT_MS = 2500;
+
+async function fetchStatusJson(
+  path: string,
+  timeoutMs: number,
+): Promise<unknown | null> {
+  const controller =
+    typeof AbortController !== "undefined" ? new AbortController() : null;
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  const timeout = new Promise<null>((resolve) => {
+    timeoutId = setTimeout(() => {
+      controller?.abort();
+      resolve(null);
+    }, timeoutMs);
+  });
+
+  const request = fetch(
+    agentNativePath(path),
+    controller ? { signal: controller.signal } : undefined,
+  )
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null)
+    .finally(() => {
+      if (timeoutId !== undefined) clearTimeout(timeoutId);
+    });
+
+  return Promise.race([request, timeout]);
+}
+
+function hasConfiguredFlag(value: unknown): value is { configured: boolean } {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "configured" in value &&
+    typeof (value as { configured?: unknown }).configured === "boolean"
+  );
+}
+
+export async function fetchAgentEngineConfiguredState(
+  enabled = true,
+  options?: FetchAgentEngineConfiguredStateOptions,
+): Promise<AgentEngineConfiguredState> {
+  if (!enabled) return "configured";
+
+  const timeoutMs =
+    typeof options?.timeoutMs === "number" && options.timeoutMs > 0
+      ? options.timeoutMs
+      : DEFAULT_STATUS_CHECK_TIMEOUT_MS;
+  const [envKeys, builderStatus, engineStatus] = await Promise.all([
+    fetchStatusJson("/_agent-native/env-status", timeoutMs),
+    fetchStatusJson("/_agent-native/builder/status", timeoutMs),
+    fetchStatusJson("/_agent-native/agent-engine/status", timeoutMs),
+  ]);
+
+  // All three failed — likely a flaky network; keep the caller in unknown
+  // unless this check is reacting to an explicit missing-key stream event.
+  if (envKeys == null && builderStatus == null && engineStatus == null) {
+    return options?.missingFallback ? "missing" : "unknown";
+  }
+
+  const keys = (envKeys ?? []) as Array<{
+    key: string;
+    configured: boolean;
+  }>;
+  const llmKeys = keys.filter((k) => PROVIDER_ENV_VAR_SET.has(k.key));
+  const anyConfigured =
+    llmKeys.some((k) => k.configured) ||
+    (hasConfiguredFlag(builderStatus) && builderStatus.configured) ||
+    (hasConfiguredFlag(engineStatus) && engineStatus.configured);
+  return anyConfigured ? "configured" : "missing";
+}
+
 /**
  * Shared "can the agent run?" gate — the single source of truth for the sidebar
  * composer and app prompt boxes. Checks the env-key / Builder / BYOK status
@@ -29,37 +106,12 @@ export function useAgentEngineConfigured(
   useEffect(() => {
     let cancelled = false;
     const check = async (options?: { missingFallback?: boolean }) => {
-      if (!enabled) {
-        setState("configured");
-        return;
-      }
-      const [envKeys, builderStatus, engineStatus] = await Promise.all([
-        fetch(agentNativePath("/_agent-native/env-status"))
-          .then((r) => (r.ok ? r.json() : null))
-          .catch(() => null),
-        fetch(agentNativePath("/_agent-native/builder/status"))
-          .then((r) => (r.ok ? r.json() : null))
-          .catch(() => null),
-        fetch(agentNativePath("/_agent-native/agent-engine/status"))
-          .then((r) => (r.ok ? r.json() : null))
-          .catch(() => null),
-      ]);
+      const nextState = await fetchAgentEngineConfiguredState(enabled, options);
       if (cancelled) return;
-      // All three failed — likely a flaky network; keep the current state.
-      if (envKeys == null && builderStatus == null && engineStatus == null) {
-        if (options?.missingFallback) setState("missing");
+      if (nextState === "unknown") {
         return;
       }
-      const keys = (envKeys ?? []) as Array<{
-        key: string;
-        configured: boolean;
-      }>;
-      const llmKeys = keys.filter((k) => PROVIDER_ENV_VAR_SET.has(k.key));
-      const anyConfigured =
-        llmKeys.some((k) => k.configured) ||
-        builderStatus?.configured === true ||
-        engineStatus?.configured === true;
-      setState(anyConfigured ? "configured" : "missing");
+      setState(nextState);
     };
     const onConfiguredChanged = () => {
       void check();

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

@@ -30,6 +30,13 @@ import { createBuilderEngine } from "../agent/engine/builder-engine.js";
 import { appStateGet } from "../application-state/store.js";
 import { getOrgContext } from "../org/context.js";
 import { transcribeWithBuilder } from "../transcription/builder-transcription.js";
+import {
+  applyVoiceContextReplacements,
+  buildVoiceGuidanceBlock,
+  parseVoiceContextPack,
+  voiceContextTermsOnly,
+  type VoiceContextPack,
+} from "../voice/index.js";
 import { getSession } from "./auth.js";
 import {
   resolveHasBuilderPrivateKey,
@@ -146,6 +153,20 @@ export function createTranscribeVoiceHandler() {
           Buffer.from(instructionsPart.data).toString("utf8"),
         )
       : undefined;
+    const voiceContextPart = parts?.find(
+      (p) => p.name === "voiceContext" || p.name === "contextPack",
+    );
+    const voiceContext = voiceContextPart?.data
+      ? parseVoiceContextPack(
+          Buffer.from(voiceContextPart.data).toString("utf8"),
+        )
+      : undefined;
+    const voiceGuidance = buildVoiceGuidanceBlock({
+      instructions,
+      contextPack: voiceContextTermsOnly(voiceContext),
+    });
+    const applyVoiceContext = (value: string) =>
+      applyVoiceContextReplacements(value, voiceContext).trim();
 
     // Resolve provider preference. Per-request "provider" form field takes
     // precedence (the desktop client sends it on every dictation press),
@@ -220,7 +241,7 @@ export function createTranscribeVoiceHandler() {
     // does not want audio uploaded to any external provider. The client
     // shouldn't hit this endpoint when "browser" is selected; this is a
     // defense-in-depth refusal.
-    if (providerPref === "browser") {
+    if (providerPref === "browser" && !transcriptText) {
       setResponseStatus(event, 400);
       return {
         error:
@@ -238,7 +259,8 @@ export function createTranscribeVoiceHandler() {
       return await cleanupTranscriptText({
         event,
         text: transcriptText,
-        instructions,
+        instructions: voiceGuidance,
+        contextPack: voiceContext,
         providerPref,
         hasBuilderPrivateKey,
         withRequestContext,
@@ -282,9 +304,9 @@ export function createTranscribeVoiceHandler() {
           mimeType: mime,
           apiKey: geminiKey,
           language: language || undefined,
-          instructions,
+          instructions: voiceGuidance,
         });
-        const trimmed = text.trim();
+        const trimmed = applyVoiceContext(text);
         if (!trimmed) {
           setResponseStatus(event, 502);
           return { error: "Gemini returned an empty transcript." };
@@ -318,9 +340,9 @@ export function createTranscribeVoiceHandler() {
               ? BUILDER_GEMINI_TRANSCRIPTION_MODEL
               : undefined,
           language: language || undefined,
-          instructions,
+          instructions: voiceGuidance,
         });
-        return { text: (result.text ?? "").trim() };
+        return { text: applyVoiceContext(result.text ?? "") };
       } catch (err) {
         const message = (err as Error)?.message ?? String(err);
         if (message.includes("credits exhausted")) {
@@ -352,7 +374,8 @@ export function createTranscribeVoiceHandler() {
         audioBytes,
         mime,
         language,
-        instructions,
+        instructions: voiceGuidance,
+        contextPack: voiceContext,
       });
     }
 
@@ -368,9 +391,9 @@ export function createTranscribeVoiceHandler() {
           mimeType: mime,
           model: BUILDER_GEMINI_TRANSCRIPTION_MODEL,
           language: language || undefined,
-          instructions,
+          instructions: voiceGuidance,
         });
-        return { text: (result.text ?? "").trim() };
+        return { text: applyVoiceContext(result.text ?? "") };
       } catch (err) {
         const message = (err as Error)?.message ?? String(err);
         // Surface 402 (credits exhausted) as a 402 so the client can show
@@ -395,9 +418,9 @@ export function createTranscribeVoiceHandler() {
             mimeType: mime,
             apiKey: geminiKey,
             language: language || undefined,
-            instructions,
+            instructions: voiceGuidance,
           });
-          const trimmed = text.trim();
+          const trimmed = applyVoiceContext(text);
           if (trimmed) {
             console.log(`[transcribe-voice] Gemini → ${trimmed.length} chars`);
             return { text: trimmed };
@@ -465,7 +488,8 @@ export function createTranscribeVoiceHandler() {
       audioBytes,
       mime,
       language,
-      instructions,
+      instructions: voiceGuidance,
+      contextPack: voiceContext,
     });
   });
 }
@@ -484,6 +508,7 @@ async function callWhisperCompat({
   mime,
   language,
   instructions,
+  contextPack,
 }: {
   event: H3Event;
   provider: {
@@ -496,6 +521,7 @@ async function callWhisperCompat({
   mime: string;
   language?: string;
   instructions?: string;
+  contextPack?: VoiceContextPack;
 }): Promise<{ text: string } | { error: string }> {
   const ext = pickExtension(mime);
   const filename = `composer-voice.${ext}`;
@@ -531,7 +557,12 @@ async function callWhisperCompat({
       };
     }
     const data = (await res.json()) as { text?: string };
-    return { text: (data.text ?? "").trim() };
+    return {
+      text: applyVoiceContextReplacements(
+        (data.text ?? "").trim(),
+        contextPack,
+      ).trim(),
+    };
   } catch (err) {
     setResponseStatus(event, 502);
     return {
@@ -549,6 +580,7 @@ async function cleanupTranscriptText({
   event,
   text,
   instructions,
+  contextPack,
   providerPref,
   hasBuilderPrivateKey,
   withRequestContext,
@@ -557,6 +589,7 @@ async function cleanupTranscriptText({
   event: H3Event;
   text: string;
   instructions?: string;
+  contextPack?: VoiceContextPack;
   providerPref?: string;
   hasBuilderPrivateKey: () => Promise<boolean>;
   withRequestContext: <T>(fn: () => Promise<T>) => Promise<T>;
@@ -564,9 +597,11 @@ async function cleanupTranscriptText({
 }): Promise<{ text: string } | { error: string }> {
   const original = text.trim();
   if (!original) return { text: "" };
+  const finalizeText = (value: string) =>
+    applyVoiceContextReplacements(value || original, contextPack).trim();
 
   if (providerPref === "browser") {
-    return { text: original };
+    return { text: finalizeText(original) };
   }
 
   if (providerPref === "builder" || providerPref === "builder-gemini") {
@@ -581,7 +616,7 @@ async function cleanupTranscriptText({
       const cleaned = await withRequestContext(() =>
         cleanupWithBuilder({ text: original, instructions }),
       );
-      return { text: cleaned || original };
+      return { text: finalizeText(cleaned || original) };
     } catch (err) {
       setResponseStatus(event, 502);
       return {
@@ -605,7 +640,7 @@ async function cleanupTranscriptText({
         apiKey: geminiKey,
         instructions,
       });
-      return { text: cleaned || original };
+      return { text: finalizeText(cleaned || original) };
     } catch (err) {
       setResponseStatus(event, 502);
       return {
@@ -631,7 +666,7 @@ async function cleanupTranscriptText({
         apiKey,
         instructions,
       });
-      return { text: cleaned || original };
+      return { text: finalizeText(cleaned || original) };
     } catch (err) {
       setResponseStatus(event, 502);
       return {
@@ -645,7 +680,7 @@ async function cleanupTranscriptText({
       const cleaned = await withRequestContext(() =>
         cleanupWithBuilder({ text: original, instructions }),
       );
-      if (cleaned) return { text: cleaned };
+      if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
       // Fall through to BYOK providers, then raw text.
     }
@@ -659,7 +694,7 @@ async function cleanupTranscriptText({
         apiKey: geminiKey,
         instructions,
       });
-      if (cleaned) return { text: cleaned };
+      if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
       // Fall through.
     }
@@ -674,7 +709,7 @@ async function cleanupTranscriptText({
         apiKey: groqKey,
         instructions,
       });
-      if (cleaned) return { text: cleaned };
+      if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
       // Fall through.
     }
@@ -689,13 +724,13 @@ async function cleanupTranscriptText({
         apiKey: openaiKey,
         instructions,
       });
-      if (cleaned) return { text: cleaned };
+      if (cleaned) return { text: finalizeText(cleaned) };
     } catch {
       // Fall through.
     }
   }
 
-  return { text: original };
+  return { text: finalizeText(original) };
 }
 
 async function cleanupWithBuilder({

package/corpus/core/src/shared/mcp-embed-headers.ts

@@ -87,6 +87,27 @@ export function isAgentNativeFirstPartyAppOrigin(
   }
 }
 
+export function isBuilderIoEmbedOrigin(
+  origin: string | null | undefined,
+): boolean {
+  if (!origin) return false;
+  try {
+    const url = new URL(origin);
+    const hostname = url.hostname.toLowerCase();
+    return (
+      url.protocol === "https:" &&
+      !url.username &&
+      !url.password &&
+      (hostname === "builder.io" ||
+        hostname.endsWith(".builder.io") ||
+        hostname === "builder.my" ||
+        hostname.endsWith(".builder.my"))
+    );
+  } catch {
+    return false;
+  }
+}
+
 export function isMcpEmbedCorsOrigin(
   origin: string | null | undefined,
 ): boolean {
@@ -96,7 +117,8 @@ export function isMcpEmbedCorsOrigin(
     isClaudeMcpContentOrigin(origin) ||
     isChatGptMcpSandboxOrigin(origin) ||
     isMcpProductHostOrigin(origin) ||
-    isAgentNativeFirstPartyAppOrigin(origin)
+    isAgentNativeFirstPartyAppOrigin(origin) ||
+    isBuilderIoEmbedOrigin(origin)
   );
 }
 

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

@@ -59,6 +59,8 @@
   --agent-native-card-surface: hsl(var(--card));
   --agent-native-raised-border: hsl(var(--border));
   --agent-native-raised-radius: 8px;
+  --agent-native-raised-outline: inset 0 0 0 1px
+    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);
   background: var(--agent-native-lower-surface);
@@ -111,6 +113,21 @@
   background: var(--agent-native-lower-surface) !important;
 }
 
+.agent-layout-left-drawer[data-collapsed] {
+  overflow: clip;
+  width: var(--agent-layout-left-drawer-width, auto);
+  will-change: width;
+  transition: width 260ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.agent-layout-left-drawer[data-collapsed="true"] {
+  width: var(--agent-layout-left-drawer-collapsed-width, 3.5rem);
+}
+
+.agent-layout-left-drawer[data-collapsed="false"] {
+  width: var(--agent-layout-left-drawer-expanded-width, 14rem);
+}
+
 .agent-layout-left-drawer .bg-sidebar {
   background: var(--agent-native-lower-surface) !important;
 }
@@ -196,23 +213,23 @@
   .agent-layout-shell > .agent-sidebar-shell > .agent-sidebar-main-surface {
     border-start-start-radius: var(--agent-native-raised-radius);
     border-end-start-radius: var(--agent-native-raised-radius);
-    border-inline-start: 1px solid var(--agent-native-raised-border);
-    border-inline-end: 1px solid var(--agent-native-raised-border);
-    box-shadow: var(--agent-native-raised-shadow-left);
+    box-shadow:
+      var(--agent-native-raised-outline), var(--agent-native-raised-shadow-left);
   }
 
   .agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="right"] {
     border-start-end-radius: var(--agent-native-raised-radius);
     border-end-end-radius: var(--agent-native-raised-radius);
-    border-inline-end: 1px solid var(--agent-native-raised-border);
-    box-shadow: var(--agent-native-raised-shadow-right);
+    box-shadow:
+      var(--agent-native-raised-outline),
+      var(--agent-native-raised-shadow-right);
   }
 
   .agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="left"] {
     border-start-start-radius: var(--agent-native-raised-radius);
     border-end-start-radius: var(--agent-native-raised-radius);
-    border-inline-start: 1px solid var(--agent-native-raised-border);
-    box-shadow: var(--agent-native-raised-shadow-left);
+    box-shadow:
+      var(--agent-native-raised-outline), var(--agent-native-raised-shadow-left);
   }
 }
 
@@ -291,6 +308,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .agent-layout-left-drawer[data-collapsed],
   .agent-sidebar-panel[data-agent-sidebar-animation],
   .agent-sidebar-panel[data-agent-sidebar-animation="desktop"]
     > .agent-sidebar-panel-inner,
@@ -560,6 +578,37 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
+  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
+    .agent-thinking-indicator__text {
+      color: transparent;
+      background: linear-gradient(
+        90deg,
+        hsl(var(--muted-foreground) / 0.7) 0%,
+        hsl(var(--muted-foreground) / 0.7) 36%,
+        hsl(var(--foreground) / 0.95) 50%,
+        hsl(var(--muted-foreground) / 0.78) 64%,
+        hsl(var(--muted-foreground) / 0.7) 100%
+      );
+      background-size: 14rem 100%;
+      background-position: 0 0;
+      background-repeat: repeat;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: agent-thinking-shine 2.6s linear infinite;
+    }
+  }
+
+  @keyframes agent-thinking-shine {
+    0% {
+      background-position: 0 0;
+    }
+
+    100% {
+      background-position: 14rem 0;
+    }
+  }
+
   @supports (view-transition-name: agent-native-chat) {
     .agent-native-chat-view-transition {
       contain: layout;