update deprecation banner: info style, scrollable on chat, shown in settings content area

- Change alert from warning (yellow) to info (blue) styling
- Move banner inside chat scroll container so it scrolls away
- Render banner in settings page content area (not above sidebar)
- Make banner dismissable on all pages
- Update text to "v2.0.0", buttons side-by-side with primary export button
- Add "Learn more" secondary button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Patrick-Erichsen

gui/src/components/DeprecationBanner.tsx

@@ -1,5 +1,6 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { useContext, useState } from "react";
+import { vscButtonBackground, vscButtonForeground } from ".";
 import { IdeMessengerContext } from "../context/IdeMessenger";
 import { varWithFallback } from "../styles/theme";
 import { getLocalStorage, setLocalStorage } from "../util/localStorage";
@@ -34,11 +35,11 @@ export function DeprecationBanner({
   };
 
   return (
-    <div className="px-4 pt-4">
+    <div className="px-4 py-4">
       <div
-        className="border-warning relative rounded-md border-[0.5px] border-solid px-3 py-2.5 shadow-sm"
+        className="border-info relative rounded-md border-[0.5px] border-solid px-3 py-2.5 shadow-sm"
         style={{
-          backgroundColor: `color-mix(in srgb, ${varWithFallback("warning")} 20%, transparent)`,
+          backgroundColor: `color-mix(in srgb, ${varWithFallback("info")} 20%, transparent)`,
         }}
       >
         {dismissable && (
@@ -49,22 +50,28 @@ export function DeprecationBanner({
             <XMarkIcon className="h-3.5 w-3.5" />
           </button>
         )}
-        <div className="flex flex-col gap-2.5 text-xs">
+        <div className="flex flex-col gap-1.5 text-xs">
           <p className={dismissable ? "pr-5" : ""}>
-            Configuration management in Continue is moving local.{" "}
-            <span
+            Extension configuration is local only as of v2.0.0
+          </p>
+          <div className="flex gap-2">
+            <button
               onClick={() => ideMessenger.post("openUrl", REPO_URL)}
-              className="cursor-pointer underline hover:brightness-125"
+              className="border-description text-foreground flex-1 cursor-pointer rounded border-[0.5px] border-solid bg-transparent px-2 py-1 text-[11px] font-medium hover:brightness-125"
             >
-              Learn more here
-            </span>
-          </p>
-          <button
-            onClick={() => ideMessenger.post("openUrl", EXPORT_URL)}
-            className="border-description text-foreground w-full rounded border-[0.5px] border-solid bg-transparent px-3 py-1.5 text-xs font-medium hover:brightness-125"
-          >
-            Download your Hub configurations
-          </button>
+              Learn more
+            </button>
+            <button
+              onClick={() => ideMessenger.post("openUrl", EXPORT_URL)}
+              className="flex-1 cursor-pointer rounded border-none px-2 py-1 text-[11px] font-medium hover:brightness-125"
+              style={{
+                backgroundColor: vscButtonBackground,
+                color: vscButtonForeground,
+              }}
+            >
+              Export cloud configs
+            </button>
+          </div>
         </div>
       </div>
     </div>

gui/src/components/Layout.tsx

@@ -15,7 +15,6 @@ import { saveCurrentSession } from "../redux/thunks/session";
 import { fontSize, isMetaEquivalentKeyPressed } from "../util";
 import { ROUTES } from "../util/navigation";
 import { FatalErrorIndicator } from "./config/FatalErrorNotice";
-import { DeprecationBanner } from "./DeprecationBanner";
 import TextDialog from "./dialogs";
 import { GenerateRuleDialog } from "./GenerateRuleDialog";
 import { useMainEditor } from "./mainInput/TipTapEditor";
@@ -229,8 +228,6 @@ const Layout = () => {
               message={dialogMessage}
             />
 
-            <DeprecationBanner dismissable={isHome} />
-
             <GridDiv>
               <Outlet />
               {/* The fatal error for chat is shown below input */}

gui/src/pages/config/index.tsx

@@ -6,6 +6,7 @@ import { TabGroup } from "../../components/ui/TabGroup";
 import { useNavigationListener } from "../../hooks/useNavigationListener";
 import { bottomTabSections, getAllTabs, topTabSections } from "./configTabs";
 import { CliInstallBanner } from "../../components/CliInstallBanner";
+import { DeprecationBanner } from "../../components/DeprecationBanner";
 import { AccountDropdown } from "./features/account/AccountDropdown";
 
 function ConfigPage() {
@@ -79,6 +80,7 @@ function ConfigPage() {
 
         {/* Tab Content for larger screens (md and above) */}
         <div className="thin-scrollbar relative hidden flex-1 overflow-y-auto sm:block">
+          <DeprecationBanner dismissable={true} />
           <div className="space-y-6 px-4 py-4">
             {allTabs.find((tab) => tab.id === activeTab)?.component}
           </div>

gui/src/pages/gui/Chat.tsx

@@ -47,6 +47,7 @@ import { useStore } from "react-redux";
 import { CliInstallBanner } from "../../components/CliInstallBanner";
 import FeedbackDialog from "../../components/dialogs/FeedbackDialog";
 
+import { DeprecationBanner } from "../../components/DeprecationBanner";
 import { FatalErrorIndicator } from "../../components/config/FatalErrorNotice";
 import InlineErrorMessage from "../../components/mainInput/InlineErrorMessage";
 import { resolveEditorContent } from "../../components/mainInput/TipTapEditor/utils/resolveEditorContent";
@@ -391,6 +392,7 @@ export function Chat() {
         ref={stepsDivRef}
         className={`overflow-y-scroll pt-[8px] ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "flex-1" : ""}`}
       >
+        <DeprecationBanner dismissable={true} />
         {highlights}
         {history
           .filter((item) => item.message.role !== "system")