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/Banner.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { X } from "lucide-react";
+
+type BannerTone = "accent" | "warning";
+
+const TONES: Record<BannerTone, { bar: string; icon: string; action: string }> = {
+  accent: { bar: "bg-accent/15 border-accent/30", icon: "text-accent", action: "bg-accent text-accent-fg" },
+  warning: { bar: "bg-amber-500/15 border-amber-500/30", icon: "text-amber-500", action: "bg-amber-500 text-black" },
+};
+
+// Shared top-of-app notification bar. VersionBanner and DemoBanner are thin wrappers over this;
+// a future news-ticker variant can build on the same shell (rotating content as children).
+export default function Banner({
+  tone,
+  icon: Icon,
+  children,
+  action,
+  onDismiss,
+  dismissTitle,
+}: {
+  tone: BannerTone;
+  icon: LucideIcon;
+  children: ReactNode;
+  action?: { label: string; onClick: () => void };
+  onDismiss?: () => void;
+  dismissTitle?: string;
+}) {
+  const c = TONES[tone];
+  return (
+    <div className={`shrink-0 flex items-center gap-2 px-4 py-2 text-sm border-b text-fg ${c.bar}`}>
+      <Icon className={`w-4 h-4 shrink-0 ${c.icon}`} />
+      <span className="min-w-0">{children}</span>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className={`ml-1 px-2.5 py-1 rounded-lg font-semibold hover:opacity-90 transition ${c.action}`}
+        >
+          {action.label}
+        </button>
+      )}
+      {onDismiss && (
+        <button
+          onClick={onDismiss}
+          title={dismissTitle}
+          className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+}