feat: BrandLogo component, insight cards on home screen, theme token overrides

BrandLogo: new component that renders whitelabel logo (as img) or falls
back to the Goose SVG. Replaces hardcoded <Goose /> in SessionsInsights,
BaseChat watermark, ProviderGuard welcome, LocalModelSetup, and
TelemetryOptOutModal. ProviderGuard now shows 'Welcome to {appName}'.

InsightCards: new shared component for rich starter prompt cards inspired
by the Pulse dashboard mockups. Cards show label, description, icon, and
action link. Used on home screen (SessionsInsights) and in-chat
(PopularChatTopics). Triggered when starterPrompts have descriptions.

Home screen sections: new homeScreen config (showStats, showRecentChats,
showInsightCards) controls which sections appear. Defaults preserve
current behavior. Managerbot config hides stats, shows insight cards.

Theme overrides: applyThemeTokens() now applies whitelabel theme
overrides (light/dark/base) on top of base tokens. Enables custom
colors and fonts without modifying theme-tokens.ts.

Types: added WhiteLabelHomeScreen, WhiteLabelTheme, extended
WhiteLabelStarterPrompt with description and action fields.

Author: michaelneale

ui/desktop/src/components/BaseChat.tsx

@@ -40,7 +40,7 @@ import CreateRecipeFromSessionModal from './recipes/CreateRecipeFromSessionModal
 import { toastSuccess } from '../toasts';
 import { Recipe } from '../recipe';
 import { useAutoSubmit } from '../hooks/useAutoSubmit';
-import { Goose } from './icons';
+import BrandLogo from './BrandLogo';
 import EnvironmentBadge from './GooseSidebar/EnvironmentBadge';
 
 const CurrentModelContext = createContext<{ model: string; mode: string } | null>(null);
@@ -399,10 +399,7 @@ export default function BaseChat({
               rel="noopener noreferrer"
               className="no-drag flex flex-row items-center gap-1 hover:opacity-80 transition-opacity"
             >
-              <Goose className="size-5 goose-icon-animation" />
-              <span className="text-sm leading-none text-text-secondary -translate-y-px">
-                goose
-              </span>
+              <BrandLogo size="sm" />
             </a>
             <EnvironmentBadge className="translate-y-px" />
           </div>

ui/desktop/src/components/BrandLogo.tsx

@@ -0,0 +1,24 @@
+import { Goose } from './icons/Goose';
+import { useWhiteLabel } from '../whitelabel/WhiteLabelContext';
+
+interface BrandLogoProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const SIZE_MAP = {
+  sm: 'size-5',
+  md: 'size-8',
+  lg: 'size-10',
+};
+
+export default function BrandLogo({ className, size = 'md' }: BrandLogoProps) {
+  const { branding } = useWhiteLabel();
+  const sizeClass = SIZE_MAP[size];
+
+  if (branding.logo) {
+    return <img src={branding.logo} alt={branding.appName} className={className ?? sizeClass} />;
+  }
+
+  return <Goose className={className ?? sizeClass} />;
+}

ui/desktop/src/components/Hub.tsx

@@ -75,7 +75,7 @@ export default function Hub({
   return (
     <div className="flex flex-col h-full min-h-0 bg-background-secondary">
       <div className="flex-1 flex flex-col min-h-[45vh] overflow-hidden mb-0.5 relative">
-        <SessionInsights />
+        <SessionInsights onInsightClick={(prompt) => handleSubmit({ msg: prompt, images: [] })} />
         {isCreatingSession && (
           <div className="absolute bottom-1 left-4 z-20 pointer-events-none">
             <LoadingGoose chatState={ChatState.LoadingConversation} />

ui/desktop/src/components/LocalModelSetup.tsx

@@ -10,7 +10,7 @@ import {
 } from '../api';
 import { toastService } from '../toasts';
 import { trackOnboardingSetupFailed } from '../utils/analytics';
-import { Goose } from './icons';
+import BrandLogo from './BrandLogo';
 
 interface LocalModelSetupProps {
   onSuccess: () => void;
@@ -179,7 +179,7 @@ export function LocalModelSetup({ onSuccess, onCancel }: LocalModelSetupProps) {
       {/* Header */}
       <div className="text-left space-y-3">
         <div className="origin-bottom-left goose-icon-animation">
-          <Goose className="size-6 sm:size-8" />
+          <BrandLogo size="md" />
         </div>
         <h1 className="text-2xl sm:text-4xl font-light">Run Locally</h1>
         <p className="text-text-muted text-base sm:text-lg">

ui/desktop/src/components/PopularChatTopics.tsx

@@ -1,92 +1,50 @@
 import React from 'react';
-import {
-  FolderTree,
-  MessageSquare,
-  Code,
-  BookOpen,
-  Terminal,
-  Zap,
-  Search,
-  FileText,
-  LayoutDashboard,
-  CalendarCheck,
-  type LucideIcon,
-} from 'lucide-react';
+import { FolderTree, MessageSquare, Code } from 'lucide-react';
 import { useWhiteLabel } from '../whitelabel/WhiteLabelContext';
+import { InsightCards } from './sessions/InsightCards';
 
 interface PopularChatTopicsProps {
   append: (text: string) => void;
 }
 
-interface ChatTopic {
+interface DefaultTopic {
   id: string;
   icon: React.ReactNode;
-  description: string;
+  label: string;
   prompt: string;
 }
 
-const ICON_MAP: Record<string, LucideIcon> = {
-  'folder-tree': FolderTree,
-  'message-square': MessageSquare,
-  code: Code,
-  'book-open': BookOpen,
-  terminal: Terminal,
-  zap: Zap,
-  search: Search,
-  'file-text': FileText,
-  'layout-dashboard': LayoutDashboard,
-  'calendar-check': CalendarCheck,
-};
-
-const DEFAULT_TOPICS: ChatTopic[] = [
+const DEFAULT_TOPICS: DefaultTopic[] = [
   {
     id: 'organize-photos',
     icon: <FolderTree className="w-5 h-5" />,
-    description: 'Organize the photos on my desktop into neat little folders by subject matter',
+    label: 'Organize the photos on my desktop into neat little folders by subject matter',
     prompt: 'Organize the photos on my desktop into neat little folders by subject matter',
   },
   {
     id: 'government-forms',
     icon: <MessageSquare className="w-5 h-5" />,
-    description:
+    label:
       'Describe in detail how various forms of government works and rank each by units of geese',
     prompt:
       'Describe in detail how various forms of government works and rank each by units of geese',
   },
   {
     id: 'tamagotchi-game',
     icon: <Code className="w-5 h-5" />,
-    description:
-      'Develop a tamagotchi game that lives on my computer and follows a pixelated styling',
+    label: 'Develop a tamagotchi game that lives on my computer and follows a pixelated styling',
     prompt: 'Develop a tamagotchi game that lives on my computer and follows a pixelated styling',
   },
 ];
 
-function useTopics(): ChatTopic[] {
-  const { branding } = useWhiteLabel();
-
-  if (!branding.starterPrompts || branding.starterPrompts.length === 0) {
-    return DEFAULT_TOPICS;
-  }
-
-  return branding.starterPrompts.map((sp, i) => {
-    const IconComponent = ICON_MAP[sp.icon] ?? Code;
-    return {
-      id: `starter-${i}`,
-      icon: <IconComponent className="w-5 h-5" />,
-      description: sp.label,
-      prompt: sp.prompt,
-    };
-  });
-}
-
-export default function PopularChatTopics({ append }: PopularChatTopicsProps) {
-  const topics = useTopics();
-
-  const handleTopicClick = (prompt: string) => {
-    append(prompt);
-  };
-
+/** Simple list layout — default goose starter prompts */
+function TopicList({
+  topics,
+  onSelect,
+}: {
+  topics: DefaultTopic[];
+  onSelect: (prompt: string) => void;
+}) {
   return (
     <div className="absolute bottom-0 left-0 p-6 max-w-md">
       <h3 className="text-text-secondary text-sm mb-1">Popular chat topics</h3>
@@ -95,20 +53,20 @@ export default function PopularChatTopics({ append }: PopularChatTopicsProps) {
           <div
             key={topic.id}
             className="flex items-center justify-between py-1.5 hover:bg-background-secondary rounded-md cursor-pointer transition-colors"
-            onClick={() => handleTopicClick(topic.prompt)}
+            onClick={() => onSelect(topic.prompt)}
           >
             <div className="flex items-center gap-3 flex-1 min-w-0">
               <div className="flex-shrink-0 text-text-secondary">{topic.icon}</div>
               <div className="flex-1 min-w-0">
-                <p className="text-text-primary text-sm leading-tight">{topic.description}</p>
+                <p className="text-text-primary text-sm leading-tight">{topic.label}</p>
               </div>
             </div>
             <div className="flex-shrink-0 ml-4">
               <button
                 className="text-sm text-text-secondary hover:text-text-primary transition-colors cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation();
-                  handleTopicClick(topic.prompt);
+                  onSelect(topic.prompt);
                 }}
               >
                 Start
@@ -120,3 +78,17 @@ export default function PopularChatTopics({ append }: PopularChatTopicsProps) {
     </div>
   );
 }
+
+export default function PopularChatTopics({ append }: PopularChatTopicsProps) {
+  const { branding } = useWhiteLabel();
+
+  if (branding.starterPrompts && branding.starterPrompts.length > 0) {
+    return (
+      <div className="p-6">
+        <InsightCards prompts={branding.starterPrompts} onSelect={append} heading="Topics" />
+      </div>
+    );
+  }
+
+  return <TopicList topics={DEFAULT_TOPICS} onSelect={append} />;
+}

ui/desktop/src/components/ProviderGuard.tsx

@@ -21,7 +21,9 @@ import {
   trackOnboardingSetupFailed,
 } from '../utils/analytics';
 
-import { Goose, OpenRouter, Tetrate, ChatGPT } from './icons';
+import { OpenRouter, Tetrate, ChatGPT } from './icons';
+import BrandLogo from './BrandLogo';
+import { useWhiteLabel } from '../whitelabel/WhiteLabelContext';
 
 interface ProviderGuardProps {
   didSelectProvider: boolean;
@@ -31,6 +33,7 @@ interface ProviderGuardProps {
 export default function ProviderGuard({ didSelectProvider, children }: ProviderGuardProps) {
   const { read, upsert } = useConfig();
   const navigate = useNavigate();
+  const { branding } = useWhiteLabel();
   const [isChecking, setIsChecking] = useState(true);
   const [hasProvider, setHasProvider] = useState(false);
   const [showFirstTimeSetup, setShowFirstTimeSetup] = useState(false);
@@ -331,13 +334,15 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
               <div className="text-left mb-8 sm:mb-12">
                 <div className="space-y-3 sm:space-y-4">
                   <div className="origin-bottom-left goose-icon-animation">
-                    <Goose className="size-6 sm:size-8" />
+                    <BrandLogo size="md" />
                   </div>
-                  <h1 className="text-2xl sm:text-4xl font-light text-left">Welcome to Goose</h1>
+                  <h1 className="text-2xl sm:text-4xl font-light text-left">
+                    Welcome to {branding.appName}
+                  </h1>
                 </div>
                 <p className="text-text-secondary text-base sm:text-lg mt-4 sm:mt-6">
-                  Since it’s your first time here, let’s get you set up with an AI provider so goose
-                  can work its magic.
+                  Since it&apos;s your first time here, let&apos;s get you set up with an AI
+                  provider.
                 </p>
               </div>
 

ui/desktop/src/components/TelemetryOptOutModal.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { BaseModal } from './ui/BaseModal';
 import { Button } from './ui/button';
-import { Goose } from './icons/Goose';
+import BrandLogo from './BrandLogo';
 import { TELEMETRY_UI_ENABLED } from '../updates';
 import { toastService } from '../toasts';
 import { useConfig } from './ConfigContext';
@@ -103,7 +103,7 @@ export default function TelemetryOptOutModal(props: TelemetryOptOutModalProps) {
     >
       <div className="px-2 py-3">
         <div className="flex justify-center mb-4">
-          <Goose className="size-10 text-text-primary" />
+          <BrandLogo size="lg" />
         </div>
         <h2 className="text-2xl font-regular dark:text-white text-gray-900 text-center mb-3">
           Help improve goose

ui/desktop/src/components/sessions/InsightCards.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  Code,
+  BarChart,
+  Users,
+  Package,
+  MapPin,
+  ShieldCheck,
+  TrendingUp,
+  Clock,
+  AlertTriangle,
+  FolderTree,
+  MessageSquare,
+  BookOpen,
+  Terminal,
+  Zap,
+  Search,
+  FileText,
+  LayoutDashboard,
+  CalendarCheck,
+  type LucideIcon,
+} from 'lucide-react';
+import type { WhiteLabelStarterPrompt } from '../../whitelabel/types';
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  'folder-tree': FolderTree,
+  'message-square': MessageSquare,
+  code: Code,
+  'book-open': BookOpen,
+  terminal: Terminal,
+  zap: Zap,
+  search: Search,
+  'file-text': FileText,
+  'layout-dashboard': LayoutDashboard,
+  'calendar-check': CalendarCheck,
+  'bar-chart': BarChart,
+  users: Users,
+  package: Package,
+  'map-pin': MapPin,
+  'shield-check': ShieldCheck,
+  'trending-up': TrendingUp,
+  clock: Clock,
+  'alert-triangle': AlertTriangle,
+};
+
+function getIcon(name: string, className = 'w-4 h-4'): React.ReactNode {
+  const Icon = ICON_MAP[name] ?? Code;
+  return <Icon className={className} />;
+}
+
+interface InsightCardsProps {
+  prompts: WhiteLabelStarterPrompt[];
+  onSelect: (prompt: string) => void;
+  heading?: string;
+}
+
+export function InsightCards({ prompts, onSelect, heading = 'Insights' }: InsightCardsProps) {
+  return (
+    <div className="bg-background-primary rounded-2xl p-6">
+      <h3 className="text-sm text-text-secondary mb-3">{heading}</h3>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+        {prompts.map((sp, i) => (
+          <button
+            key={`insight-${i}`}
+            className="flex flex-col gap-2 p-4 rounded-xl bg-background-secondary hover:bg-background-tertiary border border-border-primary transition-colors text-left cursor-pointer"
+            onClick={() => onSelect(sp.prompt)}
+          >
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm font-medium text-text-primary">{sp.label}</span>
+              <span className="text-text-secondary flex-shrink-0 ml-2">
+                {getIcon(sp.icon, 'w-4 h-4')}
+              </span>
+            </div>
+            {sp.description && (
+              <p className="text-xs text-text-secondary leading-relaxed line-clamp-2">
+                {sp.description}
+              </p>
+            )}
+            <span className="text-xs text-text-info hover:underline">
+              {sp.action ?? 'Review →'}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}