refactor(banner): extract reusable Banner base for VersionBanner + DemoBanner

Both top-of-app bars shared the same shell (icon + content + border-b bar);
factor it into a tone-driven Banner with optional action/dismiss. The
version/demo logic stays in the wrappers. Leaves a clean extension point for
a future news-ticker variant.

frontend/src/components/VersionBanner.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Sparkles, X } from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { FRONTEND_VERSION, SEEN_VERSION_KEY } from "../lib/version";
+import Banner from "./Banner";
 
 // Eye-catching, dismissible bar shown once after the running build's version changes
 // (compares the baked frontend version to the last one the user acknowledged).
@@ -19,25 +20,20 @@ export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
   }
 
   return (
-    <div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-accent/15 border-b border-accent/30 text-fg">
-      <Sparkles className="w-4 h-4 text-accent shrink-0" />
-      <span className="min-w-0">{t("header.banner.updated", { version: FRONTEND_VERSION })}</span>
-      <button
-        onClick={() => {
+    <Banner
+      tone="accent"
+      icon={Sparkles}
+      action={{
+        label: t("header.banner.releaseNotes"),
+        onClick: () => {
           onOpen();
           markSeen();
-        }}
-        className="ml-1 px-2.5 py-1 rounded-lg font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
-      >
-        {t("header.banner.releaseNotes")}
-      </button>
-      <button
-        onClick={markSeen}
-        title={t("header.banner.dismiss")}
-        className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
-      >
-        <X className="w-4 h-4" />
-      </button>
-    </div>
+        },
+      }}
+      onDismiss={markSeen}
+      dismissTitle={t("header.banner.dismiss")}
+    >
+      {t("header.banner.updated", { version: FRONTEND_VERSION })}
+    </Banner>
   );
 }