diff --git a/apps/web/src/components/chat/message-part-blocks.tsx b/apps/web/src/components/chat/message-part-blocks.tsx
index 60563a16..b0d67151 100644
--- a/apps/web/src/components/chat/message-part-blocks.tsx
+++ b/apps/web/src/components/chat/message-part-blocks.tsx
@@ -1,4 +1,27 @@
+import type { ReactNode } from "react";
 import { RotateCw } from "@/components/ui";
+import { cn } from "@/lib/ui/cn";
+
+export function MessageStatusShell({
+  children,
+  tone = "neutral",
+}: {
+  children: ReactNode;
+  tone?: "danger" | "neutral";
+}) {
+  return (
+    <div className="cc-fade-in overflow-hidden rounded-[20px] border-2 border-border bg-background p-0.5">
+      <div
+        className={cn(
+          "rounded-[16px] bg-gradient-to-b to-background px-4 py-3.5",
+          tone === "danger" ? "from-danger-bg" : "from-bg-secondary",
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
 
 export function ErrorRecoveryBlock({
   message,
@@ -8,8 +31,8 @@ export function ErrorRecoveryBlock({
   onContinue?: (() => void) | undefined;
 }) {
   return (
-    <div className="cc-fade-in overflow-hidden rounded-[20px] border-2 border-border bg-background p-0.5">
-      <div className="flex min-h-[68px] items-center gap-4 rounded-[16px] bg-gradient-to-b from-danger-bg to-background px-4 py-3.5">
+    <MessageStatusShell tone="danger">
+      <div className="flex min-h-10 items-center gap-4">
         <p className="min-w-0 flex-1 text-[14px] text-danger-fg leading-5">{message}</p>
         {onContinue ? (
           <button
@@ -22,7 +45,7 @@ export function ErrorRecoveryBlock({
           </button>
         ) : null}
       </div>
-    </div>
+    </MessageStatusShell>
   );
 }
 
diff --git a/apps/web/src/components/chat/message-parts.tsx b/apps/web/src/components/chat/message-parts.tsx
index 1d89c751..85e29485 100644
--- a/apps/web/src/components/chat/message-parts.tsx
+++ b/apps/web/src/components/chat/message-parts.tsx
@@ -22,6 +22,7 @@ import {
   DataBlock,
   ErrorRecoveryBlock,
   errorRecoveryMessage,
+  MessageStatusShell,
 } from "@/components/chat/message-part-blocks";
 import type { MessagePart } from "@/components/chat/message-parts.types";
 import {
@@ -210,21 +211,23 @@ function SkillCreatedSummaryBlock({ name }: { name: string }) {
 
 function ModelFallbackBlock({ data }: { data: ModelFallbackData }) {
   return (
-    <div className="cc-fade-in rounded-[14px] border border-thread-border bg-[var(--thread-code-bg)] p-3 text-[11px] text-thread-text-secondary">
-      <div className="mb-1 text-[10px] text-thread-text-muted">model fallback</div>
-      <div className="text-thread-text-primary">
-        Switched from {data.fromModel} to {data.toModel}
-      </div>
-      <div className="mt-1 text-[10px] text-thread-text-muted">
-        Reason: {fallbackReasonLabel(data.reason)}
+    <MessageStatusShell>
+      <div className="text-[11px] text-thread-text-secondary">
+        <div className="mb-1 text-[10px] text-thread-text-muted">model fallback</div>
+        <div className="text-thread-text-primary">
+          Switched from {data.fromModel} to {data.toModel}
+        </div>
+        <div className="mt-1 text-[10px] text-thread-text-muted">
+          Reason: {fallbackReasonLabel(data.reason)}
+        </div>
+        <Link
+          className="mt-2 inline-block text-[11px] text-thread-accent underline-offset-4 hover:underline"
+          href="/models#api-keys"
+        >
+          Open Models &amp; Keys
+        </Link>
       </div>
-      <Link
-        className="mt-2 inline-block text-[11px] text-thread-accent underline-offset-4 hover:underline"
-        href="/models#api-keys"
-      >
-        Open Models &amp; Keys
-      </Link>
-    </div>
+    </MessageStatusShell>
   );
 }