diff --git a/apps/electron/src/renderer/App.tsx b/apps/electron/src/renderer/App.tsx
index 382f6d337..e53cf1ab5 100644
--- a/apps/electron/src/renderer/App.tsx
+++ b/apps/electron/src/renderer/App.tsx
@@ -18,6 +18,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'
@@ -2501,6 +2502,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 f0fd6b792..16df3e502 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 fc688771e..f885915eb 100644
--- a/apps/electron/src/renderer/lib/local-storage.ts
+++ b/apps/electron/src/renderer/lib/local-storage.ts
@@ -65,6 +65,7 @@ export const KEYS = {
conversationWidth: 'conversation-width', // Chat reading-column width: comfortable | wide | full
chatTextSize: 'chat-text-size', // Scale conversation text without resizing the app chrome
highContrast: 'high-contrast', // Raise contrast of borders, dividers, and muted text 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 f3a56c5c2..aaba97ce8 100644
--- a/apps/electron/src/renderer/main.tsx
+++ b/apps/electron/src/renderer/main.tsx
@@ -10,6 +10,7 @@ import { ReduceMotionProvider } from './context/ReduceMotionContext'
import { ConversationWidthProvider } from './context/ConversationWidthContext'
import { ChatTextSizeProvider } from './context/ChatTextSizeContext'
import { HighContrastProvider } from './context/HighContrastContext'
+import { ZoomProvider } from './context/ZoomContext'
import { windowWorkspaceIdAtom } from './atoms/sessions'
import { Toaster } from '@/components/ui/sonner'
import { PetWindowController } from '@/components/pet/PetWindowController'
@@ -114,9 +115,11 @@ function Root() {
-
-
-
+
+
+
+
+
diff --git a/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx b/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx
index 83df1c6fd..1a365f2ac 100644
--- a/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx
+++ b/apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx
@@ -18,9 +18,11 @@ import { useReduceMotion } from '@/context/ReduceMotionContext'
import { useConversationWidth } from '@/context/ConversationWidthContext'
import { useChatTextSize, type ChatTextSize } from '@/context/ChatTextSizeContext'
import { useHighContrast } from '@/context/HighContrastContext'
+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'
@@ -145,6 +147,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()
// Conversation width (renderer-only preference, persisted in localStorage)
const { conversationWidth, setConversationWidth } = useConversationWidth()
@@ -434,6 +437,58 @@ export default function AppearanceSettingsPage() {
onCheckedChange={setHighContrast}
testId="high-contrast-toggle"
/>
+
+
+
+
+ {zoomPercent}%
+
+
+
+