diff --git a/apps/electron/src/renderer/App.tsx b/apps/electron/src/renderer/App.tsx
index 8392407f8..cfc83116b 100644
--- a/apps/electron/src/renderer/App.tsx
+++ b/apps/electron/src/renderer/App.tsx
@@ -17,6 +17,7 @@ import { OnboardingWizard, ReauthScreen } from '@/components/onboarding'
import { WorkspacePicker } from '@/components/workspace'
import { ResetConfirmationDialog } from '@/components/ResetConfirmationDialog'
import { CommandPalette } from '@/components/CommandPalette'
+import { ZoomHotkeys } from '@/components/ZoomHotkeys'
import { SplashScreen } from '@/components/SplashScreen'
import { TooltipProvider } from '@craft-agent/ui'
import { FocusProvider } from '@/context/FocusContext'
@@ -2500,6 +2501,9 @@ export default function App() {
{/* Global command palette (⌘K / Ctrl+K) — search and run any action */}
+ {/* Interface zoom shortcuts (⌘+ / ⌘- / ⌘0) wired to the action registry */}
+
+
{/* Splash screen overlay - fades out when fully ready */}
{showSplash && (
> = {
'nav.goForwardAlt': 'shortcuts.action.goForward',
'view.toggleSidebar': 'shortcuts.action.toggleSidebar',
'view.toggleFocusMode': 'shortcuts.action.toggleFocusMode',
+ 'view.zoomIn': 'shortcuts.action.zoomIn',
+ 'view.zoomOut': 'shortcuts.action.zoomOut',
+ 'view.zoomReset': 'shortcuts.action.zoomReset',
'navigator.selectAll': 'shortcuts.action.selectAll',
'navigator.clearSelection': 'shortcuts.action.clearSelection',
'panel.focusNext': 'shortcuts.action.focusNextPanel',
diff --git a/apps/electron/src/renderer/actions/definitions.ts b/apps/electron/src/renderer/actions/definitions.ts
index 82ecf3521..8f095fdc9 100644
--- a/apps/electron/src/renderer/actions/definitions.ts
+++ b/apps/electron/src/renderer/actions/definitions.ts
@@ -143,6 +143,27 @@ export const actions = {
defaultHotkey: 'mod+.',
category: 'View',
},
+ 'view.zoomIn': {
+ id: 'view.zoomIn',
+ label: 'Zoom In',
+ description: 'Scale the whole interface up',
+ defaultHotkey: 'mod+=',
+ category: 'View',
+ },
+ 'view.zoomOut': {
+ id: 'view.zoomOut',
+ label: 'Zoom Out',
+ description: 'Scale the whole interface down',
+ defaultHotkey: 'mod+-',
+ category: 'View',
+ },
+ 'view.zoomReset': {
+ id: 'view.zoomReset',
+ label: 'Reset Zoom',
+ description: 'Reset the interface zoom to 100%',
+ defaultHotkey: 'mod+0',
+ category: 'View',
+ },
// ═══════════════════════════════════════════
// Navigator (scoped — active entity list in middle panel)
diff --git a/apps/electron/src/renderer/components/ZoomHotkeys.tsx b/apps/electron/src/renderer/components/ZoomHotkeys.tsx
new file mode 100644
index 000000000..27121fe60
--- /dev/null
+++ b/apps/electron/src/renderer/components/ZoomHotkeys.tsx
@@ -0,0 +1,23 @@
+/**
+ * ZoomHotkeys
+ *
+ * Bridges the interface-zoom preference to the action registry so the standard
+ * desktop zoom shortcuts (⌘+ / ⌘- / ⌘0) and their Command Palette entries drive
+ * `ZoomProvider`. Renders nothing — it only registers handlers.
+ *
+ * Must be mounted inside both `ZoomProvider` (for `useZoom`) and
+ * `ActionRegistryProvider` (for `useAction`).
+ */
+
+import { useZoom } from '@/context/ZoomContext'
+import { useAction } from '@/actions'
+
+export function ZoomHotkeys() {
+ const { zoomIn, zoomOut, resetZoom } = useZoom()
+
+ useAction('view.zoomIn', zoomIn)
+ useAction('view.zoomOut', zoomOut)
+ useAction('view.zoomReset', resetZoom)
+
+ return null
+}
diff --git a/apps/electron/src/renderer/context/ZoomContext.tsx b/apps/electron/src/renderer/context/ZoomContext.tsx
new file mode 100644
index 000000000..9b04ec19a
--- /dev/null
+++ b/apps/electron/src/renderer/context/ZoomContext.tsx
@@ -0,0 +1,140 @@
+/**
+ * ZoomContext
+ *
+ * App-wide "interface zoom" preference — scales the whole renderer (sidebar,
+ * navigator, chat, settings, dialogs) up or down, like the ⌘+ / ⌘- / ⌘0 zoom
+ * in Claude Desktop, VS Code, and other desktop apps.
+ *
+ * The zoom factor is one of a fixed set of Chrome-like steps and is applied by
+ * setting `document.documentElement.style.zoom` — a Chromium-native property
+ * that scales the entire tree, including portalled dialogs rendered into
+ * ``. At 100% the inline style is cleared so the DOM stays clean.
+ *
+ * The preference is persisted in `localStorage` (renderer-only, no backend),
+ * mirroring the other lightweight UI prefs in `lib/local-storage.ts` and the
+ * merged `ReduceMotionProvider`.
+ */
+
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ useCallback,
+ useMemo,
+ type ReactNode,
+} from 'react'
+import * as storage from '@/lib/local-storage'
+
+/** Discrete zoom steps (factors), mirroring a browser's zoom ladder. */
+export const ZOOM_STEPS: readonly number[] = [0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2]
+
+/** The neutral / "actual size" factor. */
+export const DEFAULT_ZOOM = 1
+
+interface ZoomContextType {
+ /** Current zoom factor (e.g. 1 = 100%, 1.1 = 110%). */
+ zoom: number
+ /** Whole-number percentage for display (e.g. 110). */
+ zoomPercent: number
+ /** Step up to the next larger factor (no-op at the max). */
+ zoomIn: () => void
+ /** Step down to the next smaller factor (no-op at the min). */
+ zoomOut: () => void
+ /** Return to 100%. */
+ resetZoom: () => void
+ /** Whether a larger step is available. */
+ canZoomIn: boolean
+ /** Whether a smaller step is available. */
+ canZoomOut: boolean
+}
+
+const ZoomContext = createContext(null)
+
+/** Clamp an arbitrary stored value onto the nearest valid step. */
+function normalizeZoom(value: number): number {
+ if (!Number.isFinite(value)) return DEFAULT_ZOOM
+ let nearest = ZOOM_STEPS[0]
+ let bestDelta = Math.abs(value - nearest)
+ for (const step of ZOOM_STEPS) {
+ const delta = Math.abs(value - step)
+ if (delta < bestDelta) {
+ nearest = step
+ bestDelta = delta
+ }
+ }
+ return nearest
+}
+
+/** Reflect the factor onto so the whole renderer scales. */
+function applyZoom(factor: number): void {
+ const root = document.documentElement
+ if (factor === DEFAULT_ZOOM) {
+ root.style.removeProperty('zoom')
+ } else {
+ root.style.zoom = String(factor)
+ }
+}
+
+export function ZoomProvider({ children }: { children: ReactNode }) {
+ const [zoom, setZoomState] = useState(() =>
+ normalizeZoom(storage.get(storage.KEYS.zoomLevel, DEFAULT_ZOOM)),
+ )
+
+ // Keep the DOM in sync (also covers the initial value on mount).
+ useEffect(() => {
+ applyZoom(zoom)
+ }, [zoom])
+
+ const setZoom = useCallback((factor: number) => {
+ const next = normalizeZoom(factor)
+ setZoomState(next)
+ storage.set(storage.KEYS.zoomLevel, next)
+ applyZoom(next)
+ }, [])
+
+ const zoomIn = useCallback(() => {
+ setZoomState((current) => {
+ const idx = ZOOM_STEPS.indexOf(normalizeZoom(current))
+ const next = ZOOM_STEPS[Math.min(idx + 1, ZOOM_STEPS.length - 1)]
+ storage.set(storage.KEYS.zoomLevel, next)
+ applyZoom(next)
+ return next
+ })
+ }, [])
+
+ const zoomOut = useCallback(() => {
+ setZoomState((current) => {
+ const idx = ZOOM_STEPS.indexOf(normalizeZoom(current))
+ const next = ZOOM_STEPS[Math.max(idx - 1, 0)]
+ storage.set(storage.KEYS.zoomLevel, next)
+ applyZoom(next)
+ return next
+ })
+ }, [])
+
+ const resetZoom = useCallback(() => setZoom(DEFAULT_ZOOM), [setZoom])
+
+ const value = useMemo(() => {
+ const idx = ZOOM_STEPS.indexOf(zoom)
+ return {
+ zoom,
+ zoomPercent: Math.round(zoom * 100),
+ zoomIn,
+ zoomOut,
+ resetZoom,
+ canZoomIn: idx < ZOOM_STEPS.length - 1,
+ canZoomOut: idx > 0,
+ }
+ }, [zoom, zoomIn, zoomOut, resetZoom])
+
+ return {children}
+}
+
+export function useZoom(): ZoomContextType {
+ const ctx = useContext(ZoomContext)
+ if (!ctx) {
+ throw new Error('useZoom must be used within a ZoomProvider')
+ }
+ return ctx
+}
diff --git a/apps/electron/src/renderer/lib/local-storage.ts b/apps/electron/src/renderer/lib/local-storage.ts
index 4d6446afd..150578608 100644
--- a/apps/electron/src/renderer/lib/local-storage.ts
+++ b/apps/electron/src/renderer/lib/local-storage.ts
@@ -53,6 +53,7 @@ export const KEYS = {
// Appearance
showConnectionIcons: 'show-connection-icons',
reduceMotion: 'reduce-motion', // Minimize animations/transitions app-wide
+ zoomLevel: 'zoom-level', // Interface zoom factor (⌘+/⌘-/⌘0), scales the whole renderer
// What's New
whatsNewLastSeenVersion: 'whats-new-last-seen-version',
diff --git a/apps/electron/src/renderer/main.tsx b/apps/electron/src/renderer/main.tsx
index 14729366d..79d8bd525 100644
--- a/apps/electron/src/renderer/main.tsx
+++ b/apps/electron/src/renderer/main.tsx
@@ -7,6 +7,7 @@ import { Provider as JotaiProvider, useAtomValue } from 'jotai'
import App from './App'
import { ThemeProvider } from './context/ThemeContext'
import { ReduceMotionProvider } from './context/ReduceMotionContext'
+import { ZoomProvider } from './context/ZoomContext'
import { windowWorkspaceIdAtom } from './atoms/sessions'
import { Toaster } from '@/components/ui/sonner'
import { PetWindowController } from '@/components/pet/PetWindowController'
@@ -108,9 +109,11 @@ function Root() {
return (
-
-
-
+
+
+
+
+
)
diff --git a/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx b/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx
index 4da9ba24c..193104053 100644
--- a/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx
+++ b/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx
@@ -15,9 +15,11 @@ import { HeaderMenu } from '@/components/ui/HeaderMenu'
import { EditPopover, EditButton, getEditConfig } from '@/components/ui/EditPopover'
import { useTheme } from '@/context/ThemeContext'
import { useReduceMotion } from '@/context/ReduceMotionContext'
+import { useZoom } from '@/context/ZoomContext'
+import { Button } from '@/components/ui/button'
import { useAppShellContext } from '@/context/AppShellContext'
import { routes } from '@/lib/navigate'
-import { FolderOpen, Monitor, RefreshCw, Sun, Moon } from 'lucide-react'
+import { FolderOpen, Monitor, RefreshCw, Sun, Moon, Minus, Plus, RotateCcw } from 'lucide-react'
import type { DetailsPageMeta } from '@/lib/navigation-registry'
import type { ToolIconMapping } from '../../../shared/types'
@@ -142,6 +144,7 @@ export default function AppearanceSettingsPage() {
// Reduce motion toggle (renderer-only preference, persisted in localStorage)
const { reduceMotion, setReduceMotion } = useReduceMotion()
+ const { zoomPercent, zoomIn, zoomOut, resetZoom, canZoomIn, canZoomOut } = useZoom()
// Pet companion settings + custom pets (synced via shared Jotai atoms)
const {
@@ -387,6 +390,58 @@ export default function AppearanceSettingsPage() {
onCheckedChange={setReduceMotion}
testId="reduce-motion-toggle"
/>
+
+
+
+
+ {zoomPercent}%
+
+
+
+