feat(ui): add UI scale selector (100% / 110% / 125%)

Three-level zoom control in sidebar footer. Uses CSS zoom property,
persisted to localStorage via Zustand store. Applied on mount via
AppLayout useEffect.

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

frontend/src/components/layout/AppLayout.tsx

@@ -1,14 +1,20 @@
-import { type ReactNode } from 'react'
+import { type ReactNode, useEffect } from 'react'
 import { Sidebar } from './Sidebar'
 import { ShortcutsDialog } from './ShortcutsDialog'
 import { CommandPalette } from '@/components/command-palette/CommandPalette'
 import { Toaster } from '@/components/ui/toast'
+import { useUIStore } from '@/lib/store'
 
 interface AppLayoutProps {
   children: ReactNode
 }
 
 export function AppLayout({ children }: AppLayoutProps) {
+  // Apply persisted UI scale on mount
+  const uiScale = useUIStore((s) => s.uiScale)
+  useEffect(() => {
+    document.documentElement.style.zoom = `${uiScale}%`
+  }, [uiScale])
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       <a

frontend/src/components/layout/Sidebar.tsx

@@ -91,6 +91,8 @@ export function Sidebar() {
     setSelectedTenantId,
     theme,
     setTheme,
+    uiScale,
+    setUIScale,
   } = useUIStore()
   const { connectionState } = useEventStreamContext()
   const routerState = useRouterState()
@@ -418,6 +420,23 @@ export function Sidebar() {
                 <LogOut className="h-3 w-3" />
               </button>
             </div>
+            {/* Scale selector */}
+            <div className="flex items-center gap-px rounded-[var(--radius-control)] border border-border-subtle overflow-hidden mb-1">
+              {([100, 110, 125] as const).map((s) => (
+                <button
+                  key={s}
+                  onClick={() => setUIScale(s)}
+                  className={cn(
+                    'flex-1 text-[8px] py-px text-center transition-[background-color,color] duration-[50ms]',
+                    uiScale === s
+                      ? 'bg-accent-soft text-text-primary font-medium'
+                      : 'text-text-muted hover:text-text-secondary',
+                  )}
+                >
+                  {s}%
+                </button>
+              ))}
+            </div>
             {/* Connection + version row */}
             <div className="flex items-center gap-1.5">
               <span

frontend/src/lib/store.ts

@@ -2,17 +2,21 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { applyTheme } from './theme'
 
+type UIScale = 100 | 110 | 125
+
 interface UIState {
   selectedTenantId: string | null
   sidebarCollapsed: boolean
   mobileSidebarOpen: boolean
   theme: 'dark' | 'light'
+  uiScale: UIScale
 
   setSelectedTenantId: (id: string | null) => void
   setSidebarCollapsed: (collapsed: boolean) => void
   toggleSidebar: () => void
   setMobileSidebarOpen: (open: boolean) => void
   setTheme: (theme: 'dark' | 'light') => void
+  setUIScale: (scale: UIScale) => void
 }
 
 export const useUIStore = create<UIState>()(
@@ -22,6 +26,7 @@ export const useUIStore = create<UIState>()(
       sidebarCollapsed: false,
       mobileSidebarOpen: false,
       theme: 'dark',
+      uiScale: 100,
 
       setSelectedTenantId: (id) => set({ selectedTenantId: id }),
       setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
@@ -31,6 +36,10 @@ export const useUIStore = create<UIState>()(
         applyTheme(theme)
         set({ theme })
       },
+      setUIScale: (scale) => {
+        document.documentElement.style.zoom = `${scale}%`
+        set({ uiScale: scale })
+      },
     }),
     {
       name: 'tod-ui-state',
@@ -38,6 +47,7 @@ export const useUIStore = create<UIState>()(
         sidebarCollapsed: state.sidebarCollapsed,
         theme: state.theme,
         selectedTenantId: state.selectedTenantId,
+        uiScale: state.uiScale,
       }),
     },
   ),