refactor: decouple icon rendering from hardcoded component imports

ui/desktop/src/App.tsx

@@ -39,6 +39,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import { useConfig } from './components/ConfigContext';
 import { ModelAndProviderProvider } from './components/ModelAndProviderContext';
 import { ThemeProvider } from './contexts/ThemeContext';
+import { GlyphProvider } from './contexts/GlyphContext';
 import PermissionSettingsView from './components/settings/permission/PermissionSetting';
 
 import ExtensionsView, { ExtensionsViewOptions } from './components/extensions/ExtensionsView';
@@ -702,13 +703,15 @@ export function AppInner() {
 export default function App() {
   return (
     <ThemeProvider>
-      <ModelAndProviderProvider>
-        <HashRouter>
-          <AppInner />
-        </HashRouter>
-        <AnnouncementModal />
-        <TelemetryOptOutModal controlled={false} />
-      </ModelAndProviderProvider>
+      <GlyphProvider>
+        <ModelAndProviderProvider>
+          <HashRouter>
+            <AppInner />
+          </HashRouter>
+          <AnnouncementModal />
+          <TelemetryOptOutModal controlled={false} />
+        </ModelAndProviderProvider>
+      </GlyphProvider>
     </ThemeProvider>
   );
 }

ui/desktop/src/components/FlyingBird.tsx

@@ -1,29 +1,37 @@
 import { useState, useEffect } from 'react';
-import { Bird1, Bird2, Bird3, Bird4, Bird5, Bird6 } from './icons';
+import { useGlyphPack } from '../contexts/GlyphContext';
 
 interface FlyingBirdProps {
   className?: string;
   cycleInterval?: number; // milliseconds between bird frame changes
 }
 
-const birdFrames = [Bird1, Bird2, Bird3, Bird4, Bird5, Bird6];
-
 export default function FlyingBird({ className = '', cycleInterval = 150 }: FlyingBirdProps) {
+  const { pack } = useGlyphPack();
+  const frames = pack.AnimationFrames;
   const [currentFrameIndex, setCurrentFrameIndex] = useState(0);
 
   useEffect(() => {
+    if (!frames) return;
     const interval = setInterval(() => {
-      setCurrentFrameIndex((prevIndex) => (prevIndex + 1) % birdFrames.length);
+      setCurrentFrameIndex((prevIndex) => (prevIndex + 1) % frames.length);
     }, cycleInterval);
-
     return () => clearInterval(interval);
-  }, [cycleInterval]);
+  }, [cycleInterval, frames]);
 
-  const CurrentFrame = birdFrames[currentFrameIndex];
+  if (frames) {
+    const CurrentFrame = frames[currentFrameIndex];
+    return (
+      <div className={`transition-opacity duration-75 ${className}`}>
+        <CurrentFrame className="w-4 h-4" />
+      </div>
+    );
+  }
 
+  // Fallback: static glyph for packs without frame animation
   return (
     <div className={`transition-opacity duration-75 ${className}`}>
-      <CurrentFrame className="w-4 h-4" />
+      <pack.StaticGlyph className="w-4 h-4" />
     </div>
   );
 }

ui/desktop/src/components/GooseLogo.tsx

@@ -1,5 +1,6 @@
-import { Goose, Rain } from './icons/Goose';
+import { Rain } from './icons/Goose';
 import { cn } from '../utils';
+import { useGlyphPack } from '../contexts/GlyphContext';
 
 interface GooseLogoProps {
   className?: string;
@@ -12,6 +13,8 @@ export default function GooseLogo({
   size = 'default',
   hover = true,
 }: GooseLogoProps) {
+  const { pack } = useGlyphPack();
+
   const sizes = {
     default: {
       frame: 'w-16 h-16',
@@ -43,7 +46,7 @@ export default function GooseLogo({
           hover && 'opacity-0 group-hover/with-hover:opacity-100'
         )}
       />
-      <Goose className={cn(currentSize.goose, 'absolute left-0 bottom-0 z-2')} />
+      <pack.StaticGlyph className={cn(currentSize.goose, 'absolute left-0 bottom-0 z-2')} />
     </div>
   );
 }

ui/desktop/src/components/WelcomeGooseLogo.tsx

@@ -1,13 +1,16 @@
-import { Goose, Rain } from './icons/Goose';
+import { Rain } from './icons/Goose';
+import { useGlyphPack } from '../contexts/GlyphContext';
 
 export default function WelcomeGooseLogo({ className = '' }) {
+  const { pack } = useGlyphPack();
+
   return (
     <div className={`${className} relative overflow-hidden`}>
       <div className="absolute inset-0 flex items-center justify-center">
         <Rain className="w-full h-full scale-[2.5] opacity-0 group-hover/logo:opacity-100 transition-all duration-300 z-1" />
       </div>
       <div className="absolute inset-0 flex items-center justify-center">
-        <Goose className="w-full h-full z-2" />
+        <pack.StaticGlyph className="w-full h-full z-2" />
       </div>
     </div>
   );

ui/desktop/src/contexts/GlyphContext.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import type { GlyphPack } from '../packs/types';
+import { goosePack } from '../packs/goose';
+import { getPackById } from '../packs/registry';
+
+interface GlyphContextValue {
+  pack: GlyphPack;
+  setPackId: (id: string) => void;
+}
+
+const GlyphContext = createContext<GlyphContextValue>({
+  pack: goosePack,
+  setPackId: () => {},
+});
+
+export function useGlyphPack(): GlyphContextValue {
+  return useContext(GlyphContext);
+}
+
+interface GlyphProviderProps {
+  children: React.ReactNode;
+}
+
+export function GlyphProvider({ children }: GlyphProviderProps) {
+  const [packId, setPackIdState] = useState<string>(
+    () => localStorage.getItem('glyphPack') || 'goose'
+  );
+
+  const pack = getPackById(packId) ?? goosePack;
+
+  const setPackId = useCallback((id: string) => {
+    localStorage.setItem('glyphPack', id);
+    setPackIdState(id);
+  }, []);
+
+  return (
+    <GlyphContext.Provider value={{ pack, setPackId }}>
+      {children}
+    </GlyphContext.Provider>
+  );
+}

ui/desktop/src/packs/goose.ts

@@ -0,0 +1,17 @@
+import { Goose } from '../components/icons/Goose';
+import { Bird1 } from '../components/icons/Bird1';
+import { Bird2 } from '../components/icons/Bird2';
+import { Bird3 } from '../components/icons/Bird3';
+import { Bird4 } from '../components/icons/Bird4';
+import { Bird5 } from '../components/icons/Bird5';
+import { Bird6 } from '../components/icons/Bird6';
+import type { GlyphPack } from './types';
+
+export const goosePack: GlyphPack = {
+  id: 'goose',
+  name: 'Goose',
+  emoji: '🪿',
+  description: 'The original.',
+  StaticGlyph: Goose,
+  AnimationFrames: [Bird1, Bird2, Bird3, Bird4, Bird5, Bird6],
+};

ui/desktop/src/packs/registry.ts

@@ -0,0 +1,10 @@
+import type { GlyphPack } from './types';
+import { goosePack } from './goose';
+
+export const allPacks: GlyphPack[] = [goosePack];
+
+const packMap = new Map(allPacks.map((p) => [p.id, p]));
+
+export function getPackById(id: string): GlyphPack | undefined {
+  return packMap.get(id);
+}

ui/desktop/src/packs/types.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react';
+
+/** Props accepted by all glyph components — matches existing icon conventions */
+export interface GlyphProps {
+  className?: string;
+}
+
+export interface GlyphPack {
+  id: string;
+  name: string;
+  emoji: string;
+  description: string;
+  /** Static icon used in sidebar logo, welcome screen, etc. */
+  StaticGlyph: ComponentType<GlyphProps>;
+  /** Frame-based animation components (goose uses Bird1–6). If absent, StaticGlyph is used. */
+  AnimationFrames?: ComponentType<GlyphProps>[];
+}