Active client visible everywhere · sidebar quick-switch · scoped recents · brain completeness

Your ask: when a client is selected, every option in the sidebar should
work according to that same client. Tools already auto-read the active
brain (smart-fill + cross-client switch already wired), but a few
surfaces never advertised which client was actually active and a few
others showed cross-client data when they shouldn't. Fixed across the
board.

Sidebar — persistent active-client block + quick-switch
- New block sits between the AdForge brand header and the nav list,
  visible on every page.
- When a client is active: orange brain icon + "ACTIVE CLIENT" caption
  + client name. Click expands a dropdown listbox of every saved
  client with the live one checkmarked. Picking from the list calls
  setActiveBrainId() + dispatches ados:active-brain-changed, which
  the rest of the app (GeneratorShell, dashboard, last-generated
  pill) already listens to — so all open forms reset and re-fill
  from the new brain instantly.
- Dropdown footer: "+ Add new client" → /brand/new and "Manage all
  clients →" → /brand for power-user shortcuts.
- When no client is set: the same block becomes an outlined CTA
  card with a Plus icon → /brand/new. Makes the empty state
  unmissable.
- A subtle caption under the block reads "every tool below uses
  this client's brand brain" so the relationship is explicit.

Dashboard recent generations · scoped to active client
- listAds() now receives { brand_id: getActiveBrainId() } when a
  client is set. Section heading gets a "· scoped to active client"
  micro-label so the scoping is visible.
- Live-updates on ados:active-brain-changed and ados:brains-changed
  so switching the active client immediately refreshes the recents.

Last-generated pill · respects active client
- The "● last: Campaign Kit" pill in PageHeader was showing the
  most-recent asset across ALL clients. Now hides itself when the
  pinned asset's brand_id doesn't match the current active brain —
  it stays accurate to the client the user is actually working on.
- Live-updates on ados:active-brain-changed and ados:brains-changed.

Brand-completeness indicator on each /brand client card
- New "brain N/12" pill in each card's metadata strip:
    · green when ≥9 fields filled
    · live-orange when 5-8 (okay)
    · neg-red when <5 (thin — most generators will fall back to
      generic copy for some surfaces)
- Tooltip explains why: "Generators read every field — thin brains
  produce more generic copy."
- Counts the 12 brand-defining fields: business_name, industry,
  niche, USP, tone, audience_who, pain_points, desires, key_benefits,
  products, platforms, content_pillars.

Verified: typecheck + 43 tests + build all green.

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

Author: IamRamgarhia

app/brand/page.tsx

@@ -149,6 +149,10 @@ function BrandInner() {
           <div className="space-y-2 stagger">
             {brains.map((b) => {
               const isActive = b.id === activeBrandId;
+              // Brain-completeness signal: how many of the 12 brand-defining fields
+              // are filled? Below 50% means most generators will fall back to
+              // generic copy for at least some surfaces.
+              const completeness = brainCompleteness(b);
               return (
                 <div
                   key={b.id}
@@ -182,6 +186,15 @@ function BrandInner() {
                       <span className="text-[10px] font-mono uppercase tracking-ui-mega text-ink-subtle">
                         updated {new Date(b.updated_at).toLocaleDateString()}
                       </span>
+                      <span className="text-[10px] text-ink-faint">·</span>
+                      <span
+                        className={`text-[10px] font-mono uppercase tracking-ui-mega ${
+                          completeness.tone === "good" ? "text-pos" : completeness.tone === "okay" ? "text-live" : "text-neg"
+                        }`}
+                        title={`${completeness.filled} of ${completeness.total} brand fields filled. Generators read every field — thin brains produce more generic copy.`}
+                      >
+                        brain {completeness.filled}/{completeness.total}
+                      </span>
                     </div>
                     <div className={`font-display italic text-xl ${isActive ? "text-live" : "text-ink"}`}>
                       {b.name || b.business_name}
@@ -254,3 +267,27 @@ function BrandInner() {
     </div>
   );
 }
+
+/**
+ * Rough brain-completeness rating. Counts how many of the 12 generator-defining
+ * fields are populated and buckets into good (≥9) / okay (5-8) / thin (<5).
+ * Used by the client cards on /brand so users can see at-a-glance which
+ * clients have skinny brains.
+ */
+function brainCompleteness(b: BrandBrain): { filled: number; total: number; tone: "good" | "okay" | "thin" } {
+  const filled =
+    (b.business_name ? 1 : 0) +
+    (b.industry ? 1 : 0) +
+    (b.niche ? 1 : 0) +
+    (b.usp ? 1 : 0) +
+    (b.tone ? 1 : 0) +
+    (b.audience_who ? 1 : 0) +
+    (b.audience_pain_points?.length ? 1 : 0) +
+    (b.audience_desires?.length ? 1 : 0) +
+    (b.key_benefits?.length ? 1 : 0) +
+    (b.products?.length ? 1 : 0) +
+    (b.platforms?.length ? 1 : 0) +
+    (b.content_pillars?.length ? 1 : 0);
+  const total = 12;
+  return { filled, total, tone: filled >= 9 ? "good" : filled >= 5 ? "okay" : "thin" };
+}

app/page.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { Sparkles, Brain, History, Settings, Rocket, Target, FileBarChart, Activity, ClipboardList, BookOpen, Hash, ImageIcon, Search, GitBranch, Calendar } from "lucide-react";
 import { PageHeader } from "@/components/PageHeader";
 import { FeatureTour } from "@/components/FeatureTour";
-import { hasAnyKeyConfigured, isOnboarded } from "@/lib/settings";
+import { hasAnyKeyConfigured, isOnboarded, getActiveBrainId } from "@/lib/settings";
 import { listBrains, listAds, type GeneratedAd } from "@/lib/storage";
 import type { BrandBrain } from "@/lib/brand-brain";
 
@@ -39,18 +39,35 @@ export default function Dashboard() {
   const router = useRouter();
   const [brains, setBrains] = useState<BrandBrain[]>([]);
   const [recent, setRecent] = useState<GeneratedAd[]>([]);
+  const [activeBrainId, setActiveBrainIdState] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (!hasAnyKeyConfigured() || !isOnboarded()) {
       router.replace("/setup");
       return;
     }
-    Promise.all([listBrains(), listAds()]).then(([b, a]) => {
-      setBrains(b);
-      setRecent(a.slice(0, 6));
-      setLoading(false);
-    });
+    const load = () => {
+      const active = getActiveBrainId();
+      setActiveBrainIdState(active);
+      // Scope recent generations to the active client when one is selected —
+      // every other "active client" surface in the app does the same, so the
+      // dashboard's recent list shouldn't be the one place showing other
+      // clients' work.
+      Promise.all([listBrains(), listAds(active ? { brand_id: active } : undefined)]).then(([b, a]) => {
+        setBrains(b);
+        setRecent(a.slice(0, 6));
+        setLoading(false);
+      });
+    };
+    load();
+    const onChange = () => load();
+    window.addEventListener("ados:brains-changed", onChange);
+    window.addEventListener("ados:active-brain-changed", onChange);
+    return () => {
+      window.removeEventListener("ados:brains-changed", onChange);
+      window.removeEventListener("ados:active-brain-changed", onChange);
+    };
   }, [router]);
 
   if (loading) return null;
@@ -117,7 +134,14 @@ export default function Dashboard() {
 
       <section className="mt-10 stagger">
         <div className="flex items-center justify-between mb-3 hairline pb-2">
-          <h2 className="text-[13px] font-semibold uppercase tracking-wider text-ink">Recent generations</h2>
+          <h2 className="text-[13px] font-semibold uppercase tracking-wider text-ink">
+            Recent generations
+            {activeBrainId ? (
+              <span className="ml-2 text-[10px] font-mono uppercase tracking-ui-wide text-live normal-case">
+                · scoped to active client
+              </span>
+            ) : null}
+          </h2>
           <Link href="/history" className="text-[12px] font-medium uppercase tracking-wide text-live hover:underline">
             view all →
           </Link>

components/PageHeader.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { BrandSwitcher } from "./BrandSwitcher";
 import { LiveDot } from "./LiveDot";
 import { getLastGenerated, type LastGenerated } from "@/lib/next-steps";
+import { getActiveBrainId } from "@/lib/settings";
 
 interface Props {
   scope: string; // e.g. "google/rsa"
@@ -43,17 +44,30 @@ export function PageHeader({ scope, title, subtitle, showLive, actions }: Props)
  */
 function LastGeneratedPill() {
   const [last, setLast] = useState<LastGenerated | null>(null);
+  const [activeBrandId, setActiveBrandId] = useState<string | null>(null);
   useEffect(() => {
-    setLast(getLastGenerated());
-    const refresh = () => setLast(getLastGenerated());
+    const refresh = () => {
+      setLast(getLastGenerated());
+      setActiveBrandId(getActiveBrainId());
+    };
+    refresh();
     window.addEventListener("ados:last-generated-changed", refresh);
+    window.addEventListener("ados:active-brain-changed", refresh);
+    window.addEventListener("ados:brains-changed", refresh);
     window.addEventListener("storage", refresh);
     return () => {
       window.removeEventListener("ados:last-generated-changed", refresh);
+      window.removeEventListener("ados:active-brain-changed", refresh);
+      window.removeEventListener("ados:brains-changed", refresh);
       window.removeEventListener("storage", refresh);
     };
   }, []);
   if (!last) return null;
+  // Hide the pill when the most recent asset belongs to a different client than
+  // the one currently active — otherwise the header advertises a client the
+  // user just switched away from. The asset is still in History, just not
+  // pinned here for the wrong context.
+  if (activeBrandId && last.brand_id && last.brand_id !== activeBrandId) return null;
   return (
     <Link
       href={`/history?focus=${encodeURIComponent(last.id)}`}

components/Sidebar.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import {
   ChevronRight,
+  ChevronDown,
   Sparkles,
   Facebook,
   Search as SearchIcon,
@@ -18,10 +19,16 @@ import {
   GraduationCap,
   Database,
   Lock,
+  Brain,
+  Plus,
+  Check,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { NAV_GROUPS } from "./nav-config";
+import { listBrains } from "@/lib/storage";
+import { getActiveBrainId, setActiveBrainId } from "@/lib/settings";
+import type { BrandBrain } from "@/lib/brand-brain";
 
 // Lucide doesn't ship a Google-G icon by default; use SearchIcon as the closest
 // semantic fit (Google = search ads in this app). Same for TikTok → Music2.
@@ -48,6 +55,37 @@ export function Sidebar() {
     return init;
   });
 
+  // Active-client tracking: every tool in the sidebar reads the active brain,
+  // so the sidebar shows which brain that is + lets the user quick-switch.
+  const [brains, setBrains] = useState<BrandBrain[]>([]);
+  const [activeBrandId, setActiveBrandIdState] = useState<string | null>(null);
+  const [switcherOpen, setSwitcherOpen] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+    const load = async () => {
+      const list = await listBrains();
+      if (!mounted) return;
+      setBrains(list);
+      setActiveBrandIdState(getActiveBrainId());
+    };
+    load();
+    const onChange = () => load();
+    window.addEventListener("ados:brains-changed", onChange);
+    window.addEventListener("ados:active-brain-changed", onChange);
+    return () => {
+      mounted = false;
+      window.removeEventListener("ados:brains-changed", onChange);
+      window.removeEventListener("ados:active-brain-changed", onChange);
+    };
+  }, []);
+
+  function pickBrand(id: string) {
+    setActiveBrainId(id);
+    setActiveBrandIdState(id);
+    setSwitcherOpen(false);
+  }
+
   // Auto-expand the group containing the current path so users never have a
   // hidden active item.
   useEffect(() => {
@@ -62,6 +100,8 @@ export function Sidebar() {
     });
   }, [path]);
 
+  const activeBrand = brains.find((b) => b.id === activeBrandId);
+
   return (
     <aside
       className={cn(
@@ -94,6 +134,100 @@ export function Sidebar() {
         </Link>
       </div>
 
+      {/* Active-client block — persistent reminder of which brain every tool
+          below this point will use. Click to quick-switch between saved clients;
+          no client yet → CTA into the onboarding flow. */}
+      <div className="border-b border-base-700/60 px-3 py-3 relative">
+        {activeBrand ? (
+          <>
+            <button
+              onClick={() => setSwitcherOpen((o) => !o)}
+              className="w-full flex items-center gap-2.5 group text-left"
+              aria-expanded={switcherOpen}
+              aria-haspopup="listbox"
+            >
+              <div className="shrink-0 h-7 w-7 grid place-items-center bg-live/20 border border-live/40 rounded-sm">
+                <Brain size={12} className="text-live" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-[9px] font-mono uppercase tracking-ui-mega text-ink-faint leading-none">active client</div>
+                <div className="text-[13px] text-ink font-medium truncate leading-tight mt-0.5">
+                  {activeBrand.name || activeBrand.business_name}
+                </div>
+              </div>
+              <ChevronDown size={12} className={cn("text-ink-faint shrink-0 transition-transform", switcherOpen && "rotate-180")} />
+            </button>
+
+            {switcherOpen ? (
+              <div className="absolute left-2 right-2 top-full mt-1 z-40 bg-base-900 border border-base-600 shadow-2xl animate-fade-up max-h-[60vh] overflow-y-auto">
+                <div className="px-3 py-2 border-b border-base-700/60 text-[9px] font-mono uppercase tracking-ui-mega text-ink-faint">
+                  switch active client
+                </div>
+                <ul role="listbox" className="py-1">
+                  {brains.map((b) => {
+                    const isActive = b.id === activeBrandId;
+                    return (
+                      <li key={b.id}>
+                        <button
+                          onClick={() => pickBrand(b.id)}
+                          role="option"
+                          aria-selected={isActive}
+                          className={cn(
+                            "w-full text-left px-3 py-2 text-[13px] flex items-center gap-2 transition-colors",
+                            isActive ? "bg-live/10 text-live" : "text-ink-muted hover:bg-base-800 hover:text-ink"
+                          )}
+                        >
+                          {isActive ? <Check size={11} className="shrink-0" /> : <span className="w-[11px] shrink-0" />}
+                          <div className="flex-1 min-w-0">
+                            <div className="truncate">{b.name || b.business_name}</div>
+                            {b.industry ? (
+                              <div className="text-[10px] font-mono uppercase tracking-ui-wide text-ink-faint truncate">{b.industry}</div>
+                            ) : null}
+                          </div>
+                        </button>
+                      </li>
+                    );
+                  })}
+                </ul>
+                <div className="border-t border-base-700/60 p-1">
+                  <Link
+                    href="/brand/new"
+                    onClick={() => setSwitcherOpen(false)}
+                    className="flex items-center gap-2 px-3 py-2 text-[12px] text-live hover:bg-live/10 transition-colors"
+                  >
+                    <Plus size={11} /> Add new client
+                  </Link>
+                  <Link
+                    href="/brand"
+                    onClick={() => setSwitcherOpen(false)}
+                    className="flex items-center gap-2 px-3 py-2 text-[12px] text-ink-muted hover:text-ink hover:bg-base-800 transition-colors"
+                  >
+                    Manage all clients →
+                  </Link>
+                </div>
+              </div>
+            ) : null}
+
+            <p className="text-[9px] font-mono uppercase tracking-ui-wide text-ink-subtle mt-2 leading-relaxed">
+              every tool below uses this client's brand brain
+            </p>
+          </>
+        ) : (
+          <Link
+            href="/brand/new"
+            className="flex items-center gap-2.5 group p-1.5 rounded-sm border border-live/40 bg-live/[0.04] hover:bg-live/10 transition-colors"
+          >
+            <div className="shrink-0 h-7 w-7 grid place-items-center bg-base-900 border border-live/40 rounded-sm">
+              <Plus size={12} className="text-live" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-[9px] font-mono uppercase tracking-ui-mega text-live leading-none">no client yet</div>
+              <div className="text-[12px] text-ink leading-tight mt-0.5">Add your first client →</div>
+            </div>
+          </Link>
+        )}
+      </div>
+
       {/* Nav */}
       <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-1 sidebar-nav">
         {NAV_GROUPS.map((g) => {