From 7f9880c09719b1484ae2ed7598153fb00455c782 Mon Sep 17 00:00:00 2001
From: Cooper Maruyama <me@cooperm.com>
Date: Fri, 29 May 2026 15:08:33 -0700
Subject: [PATCH] refactor(frontend): move backend mirrors to viewmodel

---
 .../03-evolutions-origin-branch/up.sql        |   3 -
 .../widget/controls/bootstrap-config.tsx      |   5 +-
 .../widget/controls/build-head-button.tsx     |   4 +-
 .../components/widget/evolve-flow.stories.tsx |  21 ++-
 .../widget/history/analyze-history-button.tsx |   3 +-
 .../history/discard-uncommitted-dialog.tsx    |   5 +-
 .../history/history-restore-item-button.tsx   |   4 +-
 .../widget/layout/debug-overlay.tsx           |   7 +-
 .../widget/layout/git-status-debug.tsx        |   4 +-
 .../src/components/widget/layout/header.tsx   |   6 +-
 .../widget/layout/merge-section.tsx           |   3 +-
 .../external-build-detected.stories.tsx       |  12 +-
 .../notifications/external-build-detected.tsx |   4 +-
 .../uncommitted-changes-detected.tsx          |   3 +-
 .../unsummarized-changes-detected.tsx         |   3 +-
 .../promptinput/begin-evolve-warning.tsx      |   5 +-
 .../widget/promptinput/homebrew-badge.tsx     |   3 +-
 .../widget/promptinput/prompt-input.tsx       |   5 +-
 .../promptinput/system-defaults-cta.tsx       |  12 +-
 .../components/widget/steps/evolve-step.tsx   |   3 +-
 .../components/widget/steps/history-step.tsx  |   4 +-
 apps/native/src/components/widget/utils.ts    |  19 ++-
 .../src/components/widget/widget.stories.tsx  |   6 +-
 .../src/components/widget/widget.test.tsx     |  24 ++--
 apps/native/src/components/widget/widget.tsx  |  23 ++-
 apps/native/src/hooks/use-apply.ts            |  15 +-
 apps/native/src/hooks/use-darwin-config.ts    |   6 +-
 apps/native/src/hooks/use-evolve.ts           |  19 +--
 apps/native/src/hooks/use-git-operations.ts   |  12 +-
 apps/native/src/hooks/use-history-card.ts     |   4 +-
 apps/native/src/hooks/use-history-restore.ts  |   7 +-
 apps/native/src/hooks/use-history.ts          |   9 +-
 apps/native/src/hooks/use-homebrew-diff.ts    |   9 +-
 apps/native/src/hooks/use-queue-summarizer.ts |  47 -------
 apps/native/src/hooks/use-rollback.ts         |  13 +-
 apps/native/src/hooks/use-summary.ts          |  10 +-
 apps/native/src/hooks/use-watcher.ts          |  67 ---------
 .../src/hooks/use-widget-initialization.ts    |   3 +-
 .../src/stores/__mocks__/widget-store.ts      |   4 +-
 apps/native/src/stores/ui-state.test.ts       |  58 ++++++++
 apps/native/src/stores/ui-state.ts            | 133 ++++++++++++++++++
 apps/native/src/stores/view-model.ts          | 103 ++++++++++++++
 apps/native/src/stores/widget-store.impl.ts   |  55 +-------
 apps/native/src/stores/widget-store.test.ts   |  11 +-
 apps/native/src/utils/widget-test-helpers.ts  |   8 +-
 apps/native/src/viewmodel/change-map.ts       |  17 +++
 apps/native/src/viewmodel/evolve.ts           |  15 ++
 apps/native/src/viewmodel/git.ts              |  36 +++++
 apps/native/src/viewmodel/history.ts          |  11 ++
 apps/native/src/viewmodel/index.ts            |  35 +++++
 apps/native/src/viewmodel/viewmodel.test.ts   | 124 ++++++++++++++++
 51 files changed, 728 insertions(+), 294 deletions(-)
 delete mode 100644 apps/native/src-tauri/migrations/03-evolutions-origin-branch/up.sql
 delete mode 100644 apps/native/src/hooks/use-queue-summarizer.ts
 delete mode 100644 apps/native/src/hooks/use-watcher.ts
 create mode 100644 apps/native/src/stores/ui-state.test.ts
 create mode 100644 apps/native/src/stores/ui-state.ts
 create mode 100644 apps/native/src/stores/view-model.ts
 create mode 100644 apps/native/src/viewmodel/change-map.ts
 create mode 100644 apps/native/src/viewmodel/evolve.ts
 create mode 100644 apps/native/src/viewmodel/git.ts
 create mode 100644 apps/native/src/viewmodel/history.ts
 create mode 100644 apps/native/src/viewmodel/index.ts
 create mode 100644 apps/native/src/viewmodel/viewmodel.test.ts

diff --git a/apps/native/src-tauri/migrations/03-evolutions-origin-branch/up.sql b/apps/native/src-tauri/migrations/03-evolutions-origin-branch/up.sql
deleted file mode 100644
index ef5999d13..000000000
--- a/apps/native/src-tauri/migrations/03-evolutions-origin-branch/up.sql
+++ /dev/null
@@ -1,3 +0,0 @@
--- Legacy databases created before rusqlite_migration used `evolutions.branch`.
--- The Rust hook for this migration performs the conditional column repair.
-SELECT 1;
diff --git a/apps/native/src/components/widget/controls/bootstrap-config.tsx b/apps/native/src/components/widget/controls/bootstrap-config.tsx
index f6c8a4ad7..6a961369a 100644
--- a/apps/native/src/components/widget/controls/bootstrap-config.tsx
+++ b/apps/native/src/components/widget/controls/bootstrap-config.tsx
@@ -3,6 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useDarwinConfig } from "@/hooks/use-darwin-config";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
 import { AlertCircle, GitCommit, Sparkles } from "lucide-react";
@@ -18,7 +19,7 @@ export function BootstrapConfig({ label, onSuccess }: BootstrapConfigProps) {
   const [localError, setLocalError] = useState<string | null>(null);
   const { bootstrap, isBootstrapping } = useDarwinConfig();
   const configDir = useWidgetStore((state) => state.configDir);
-  const gitStatus = useWidgetStore((state) => state.gitStatus);
+  const gitStatus = useViewModel((state) => state.git);
   const [flakeExists, setFlakeExists] = useState(false);
 
   useEffect(() => {
@@ -111,4 +112,4 @@ export function BootstrapConfig({ label, onSuccess }: BootstrapConfigProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/native/src/components/widget/controls/build-head-button.tsx b/apps/native/src/components/widget/controls/build-head-button.tsx
index 16871d888..38803a5f3 100644
--- a/apps/native/src/components/widget/controls/build-head-button.tsx
+++ b/apps/native/src/components/widget/controls/build-head-button.tsx
@@ -1,7 +1,7 @@
 import { Wrench } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { useWidgetStore } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 import { useApply } from "@/hooks/use-apply";
 
 interface BuildHeadButtonProps {
@@ -9,7 +9,7 @@ interface BuildHeadButtonProps {
 }
 
 export function BuildHeadButton({ isRestoring = false }: BuildHeadButtonProps) {
-  const uncommittedChanges = useWidgetStore((s) => (s.gitStatus?.files?.length ?? 0) > 0);
+  const uncommittedChanges = useViewModel((s) => (s.git?.files?.length ?? 0) > 0);
   const { handleHistoryBuild } = useApply();
 
   return (
diff --git a/apps/native/src/components/widget/evolve-flow.stories.tsx b/apps/native/src/components/widget/evolve-flow.stories.tsx
index bd99f062e..312d1a427 100644
--- a/apps/native/src/components/widget/evolve-flow.stories.tsx
+++ b/apps/native/src/components/widget/evolve-flow.stories.tsx
@@ -1,5 +1,6 @@
 // @ts-nocheck - Storybook 10 alpha types have inference issues (resolves to `never`)
 import preview from "#storybook/preview";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import type { EvolveEvent } from "@/stores/widget-store";
 import type { SemanticChangeMap, EvolveState, GitStatus, Change } from "@/ipc/types";
@@ -158,7 +159,13 @@ const mockEvolveEvents: EvolveEvent[] = [
 
 function WidgetWithState({ storeState }: { storeState: Record<string, unknown> }) {
   useEffect(() => {
-    useWidgetStore.setState(storeState);
+    const { evolveState, gitStatus, changeMap, ...widgetState } = storeState;
+    useWidgetStore.setState(widgetState);
+    useViewModel.setState({
+      evolve: (evolveState as EvolveState | undefined) ?? null,
+      git: (gitStatus as GitStatus | undefined) ?? null,
+      changeMap: (changeMap as SemanticChangeMap | undefined) ?? null,
+    });
   }, [storeState]);
 
   return <DarwinWidget />;
@@ -168,8 +175,8 @@ function AnimatedEvolveFlow() {
   const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([]);
 
   useEffect(() => {
+    useViewModel.setState({ evolve: evolveStateBegin });
     useWidgetStore.setState({
-      evolveState: evolveStateBegin,
       evolvePrompt: "Add system monitoring tools like htop and btop",
     });
 
@@ -195,19 +202,21 @@ function AnimatedEvolveFlow() {
     // Phase 2: Evolution complete -> show review step with changes
     const completionTime = 800 + mockEvolveEvents[mockEvolveEvents.length - 1].timestampMs + 1500;
     const t2 = setTimeout(() => {
+      useViewModel.setState({
+        evolve: evolveStateEvolve,
+        git: mockGitStatus,
+        changeMap: mockChangeMap,
+      });
       useWidgetStore.setState({
         isGenerating: false,
-        evolveState: evolveStateEvolve,
-        gitStatus: mockGitStatus,
-        changeMap: mockChangeMap,
       });
     }, completionTime);
     timeoutsRef.current.push(t2);
 
     // Phase 3: Transition to merge step
     const t3 = setTimeout(() => {
+      useViewModel.setState({ evolve: evolveStateMerge });
       useWidgetStore.setState({
-        evolveState: evolveStateMerge,
         commitMessageSuggestion: "feat: add system monitoring tools (htop, btop, bottom, bandwhich, procs)",
       });
     }, completionTime + 5000);
diff --git a/apps/native/src/components/widget/history/analyze-history-button.tsx b/apps/native/src/components/widget/history/analyze-history-button.tsx
index 339fc9100..7bd491653 100644
--- a/apps/native/src/components/widget/history/analyze-history-button.tsx
+++ b/apps/native/src/components/widget/history/analyze-history-button.tsx
@@ -1,12 +1,13 @@
 import { Button } from "@/components/ui/button";
 import { AnalyzeButton } from "@/components/widget/summaries/analyze-button";
 import { useHistory } from "@/hooks/use-history";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { Dna, Square } from "lucide-react";
 
 // Generates commit (if need be) and summary metadata for history items that are missing it.
 export function AnalyzeHistoryButton() {
-  const history = useWidgetStore((state) => state.history);
+  const history = useViewModel((state) => state.history);
   const analyzingSize = useWidgetStore(
     (state) => state.analyzingHistoryForHashes.size,
   );
diff --git a/apps/native/src/components/widget/history/discard-uncommitted-dialog.tsx b/apps/native/src/components/widget/history/discard-uncommitted-dialog.tsx
index 7d864d8af..d9c0b6a94 100644
--- a/apps/native/src/components/widget/history/discard-uncommitted-dialog.tsx
+++ b/apps/native/src/components/widget/history/discard-uncommitted-dialog.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/dialog";
 import { ConfigDirBadge } from "@/components/widget/badges/config-dir-badge";
 import { useRollback } from "@/hooks/use-rollback";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { toast } from "sonner";
 
@@ -17,14 +18,14 @@ interface DiscardUncommittedDialogProps {
 }
 
 export function DiscardUncommittedDialog({ open, onOpenChange }: DiscardUncommittedDialogProps) {
-  const gitStatus = useWidgetStore((s) => s.gitStatus);
+  const gitStatus = useViewModel((s) => s.git);
   const configDir = useWidgetStore((s) => s.configDir);
   const files = gitStatus?.files ?? [];
   const { handleRollback } = useRollback();
 
   const handleDiscard = async () => {
     await handleRollback();
-    const remaining = useWidgetStore.getState().gitStatus?.files?.length ?? 1;
+    const remaining = useViewModel.getState().git?.files?.length ?? 1;
     if (remaining === 0) {
       toast.success("Changes discarded");
       onOpenChange(false);
diff --git a/apps/native/src/components/widget/history/history-restore-item-button.tsx b/apps/native/src/components/widget/history/history-restore-item-button.tsx
index b7a89f986..b135030a4 100644
--- a/apps/native/src/components/widget/history/history-restore-item-button.tsx
+++ b/apps/native/src/components/widget/history/history-restore-item-button.tsx
@@ -1,7 +1,7 @@
 import { Loader2, RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { useWidgetStore } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 
 interface HistoryRestoreItemButtonProps {
   hash: string;
@@ -14,7 +14,7 @@ export function HistoryRestoreItemButton({
   isRestoring = false,
   onRequestRestore,
 }: HistoryRestoreItemButtonProps) {
-  const uncommittedChanges = useWidgetStore((s) => (s.gitStatus?.files?.length ?? 0) > 0);
+  const uncommittedChanges = useViewModel((s) => (s.git?.files?.length ?? 0) > 0);
 
   return (
     <Button
diff --git a/apps/native/src/components/widget/layout/debug-overlay.tsx b/apps/native/src/components/widget/layout/debug-overlay.tsx
index cbfba214e..3b2fc729d 100644
--- a/apps/native/src/components/widget/layout/debug-overlay.tsx
+++ b/apps/native/src/components/widget/layout/debug-overlay.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
+import { useViewModel } from "@/stores/view-model";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
 import { useState } from "react";
 import { GitStatusDebug } from "@/components/widget/layout/git-status-debug";
 
@@ -9,7 +10,7 @@ import { GitStatusDebug } from "@/components/widget/layout/git-status-debug";
  * Debug overlay for development - shows current widget state
  */
 export function DebugOverlay() {
-  const evolveState = useWidgetStore((s) => s.evolveState);
+  const evolveState = useViewModel((s) => s.evolve);
   const [visible, setVisible] = useState(true);
 
   if (!visible) {
@@ -47,7 +48,7 @@ export function DebugOverlay() {
       </div>
       <button
         className="pointer-events-auto rounded bg-black/80 px-2 py-1 font-mono text-xs text-rose-400/60 hover:text-rose-400"
-        onClick={() => tauriAPI.evolveState.clear().then((s) => useWidgetStore.getState().setEvolveState(s))}
+        onClick={() => tauriAPI.evolveState.clear().then(mirrorEvolveState)}
         style={{ backdropFilter: "blur(4px)" }}
         type="button"
       >
diff --git a/apps/native/src/components/widget/layout/git-status-debug.tsx b/apps/native/src/components/widget/layout/git-status-debug.tsx
index cefa12604..92840403a 100644
--- a/apps/native/src/components/widget/layout/git-status-debug.tsx
+++ b/apps/native/src/components/widget/layout/git-status-debug.tsx
@@ -9,7 +9,7 @@
 // - Do not add fields that are not on the GitStatus type.
 
 import { useState } from "react";
-import { useWidgetStore } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 
 function Bool({ label, value }: { label: string; value: boolean | undefined }) {
   if (value === undefined || !value) {
@@ -44,7 +44,7 @@ function FieldRow({ label, display, full }: { label: string; display: string; fu
 
 export function GitStatusDebug() {
   const [expanded, setExpanded] = useState(false);
-  const gitStatus = useWidgetStore((s) => s.gitStatus);
+  const gitStatus = useViewModel((s) => s.git);
 
   if (!gitStatus) {
     return (
diff --git a/apps/native/src/components/widget/layout/header.tsx b/apps/native/src/components/widget/layout/header.tsx
index 6ec6f1425..8814e662d 100644
--- a/apps/native/src/components/widget/layout/header.tsx
+++ b/apps/native/src/components/widget/layout/header.tsx
@@ -6,6 +6,7 @@ import { Clock, FolderTree, Settings, MessageSquarePlus } from "lucide-react";
 import { APP_NAME } from "../../../../shared/constants";
 import { useWidgetStore } from "@/stores/widget-store";
 import { computeCurrentStep } from "@/components/widget/utils";
+import { useViewModel } from "@/stores/view-model";
 
 export function Header() {
   const setSettingsOpen = useWidgetStore((s) => s.setSettingsOpen);
@@ -21,7 +22,10 @@ export function Header() {
   // Flash the feedback icon when an error occurs (subscribe to detect all changes)
   useEffect(() => {
     return useWidgetStore.subscribe((state, prevState) => {
-      const step = computeCurrentStep(state);
+      const step = computeCurrentStep({
+        ...state,
+        evolveState: useViewModel.getState().evolve,
+      });
       if (step !== "setup" && state.error && state.error !== prevState.error) {
         setIsPulsing(true);
         setTimeout(() => setIsPulsing(false), 2000);
diff --git a/apps/native/src/components/widget/layout/merge-section.tsx b/apps/native/src/components/widget/layout/merge-section.tsx
index 8b7728bb7..99261eaac 100644
--- a/apps/native/src/components/widget/layout/merge-section.tsx
+++ b/apps/native/src/components/widget/layout/merge-section.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useGitOperations } from "@/hooks/use-git-operations";
 import { useSummary } from "@/hooks/use-summary";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { GitMerge, Loader2 } from "lucide-react";
 import { useEffect } from "react";
@@ -12,7 +13,7 @@ export function MergeSection() {
   const isProcessing = useWidgetStore((s) => s.isProcessing);
   const processingAction = useWidgetStore((s) => s.processingAction);
   const commitMessageSuggestion = useWidgetStore((s) => s.commitMessageSuggestion);
-  const changeMap = useWidgetStore((s) => s.changeMap);
+  const changeMap = useViewModel((s) => s.changeMap);
 
   const { handleCommit } = useGitOperations();
   const { generateCommitMessage } = useSummary();
diff --git a/apps/native/src/components/widget/notifications/external-build-detected.stories.tsx b/apps/native/src/components/widget/notifications/external-build-detected.stories.tsx
index 91490b18e..46becb2cb 100644
--- a/apps/native/src/components/widget/notifications/external-build-detected.stories.tsx
+++ b/apps/native/src/components/widget/notifications/external-build-detected.stories.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck - Storybook 10 alpha types have inference issues (resolves to `never`)
 import preview from "#storybook/preview";
 import type { EvolveState } from "@/stores/widget-store";
-import { useWidgetStore } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 import { fn } from "storybook/test";
 import { useEffect } from "react";
 import { ExternalBuildDetected } from "@/components/widget/notifications/external-build-detected";
@@ -47,9 +47,13 @@ function setup({
   evolveState: EvolveState | null;
 }) {
   useEffect(() => {
-    const store = useWidgetStore.getState();
-    store.setExternalBuildDetected(externalBuildDetected);
-    store.setEvolveState(evolveState);
+    useViewModel.setState((state) => ({
+      evolve: evolveState,
+      build: {
+        ...state.build,
+        externalBuildDetected,
+      },
+    }));
   }, [externalBuildDetected, evolveState]);
 
   return (
diff --git a/apps/native/src/components/widget/notifications/external-build-detected.tsx b/apps/native/src/components/widget/notifications/external-build-detected.tsx
index 851b1751a..748abb588 100644
--- a/apps/native/src/components/widget/notifications/external-build-detected.tsx
+++ b/apps/native/src/components/widget/notifications/external-build-detected.tsx
@@ -3,11 +3,11 @@
 import { useState } from "react";
 import { Hammer } from "lucide-react";
 import { Spinner } from "@/components/ui/spinner";
-import { useWidgetStore } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 import { useApply } from "@/hooks/use-apply";
 
 export function ExternalBuildDetected() {
-  const externalBuildDetected = useWidgetStore((s) => s.externalBuildDetected);
+  const externalBuildDetected = useViewModel((s) => s.build.externalBuildDetected);
   const { handleManualBuildConfirm } = useApply();
   const [isPending, setIsPending] = useState(false);
 
diff --git a/apps/native/src/components/widget/notifications/uncommitted-changes-detected.tsx b/apps/native/src/components/widget/notifications/uncommitted-changes-detected.tsx
index 7ff4f8976..4740a9d2e 100644
--- a/apps/native/src/components/widget/notifications/uncommitted-changes-detected.tsx
+++ b/apps/native/src/components/widget/notifications/uncommitted-changes-detected.tsx
@@ -1,6 +1,7 @@
 import type { RefObject } from "react";
 import { Eraser } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { ConfigDirBadge } from "@/components/widget/badges/config-dir-badge";
 import { Button } from "@/components/ui/button";
@@ -16,7 +17,7 @@ export function UncommittedChangesDetected({
   isFlashing,
   onOpenDialog,
 }: UncommittedChangesDetectedProps) {
-  const gitStatus = useWidgetStore((s) => s.gitStatus);
+  const gitStatus = useViewModel((s) => s.git);
   const configDir = useWidgetStore((s) => s.configDir);
   const fileCount = gitStatus?.files?.length ?? 0;
 
diff --git a/apps/native/src/components/widget/notifications/unsummarized-changes-detected.tsx b/apps/native/src/components/widget/notifications/unsummarized-changes-detected.tsx
index e7a724dd1..a19855773 100644
--- a/apps/native/src/components/widget/notifications/unsummarized-changes-detected.tsx
+++ b/apps/native/src/components/widget/notifications/unsummarized-changes-detected.tsx
@@ -2,11 +2,12 @@
 
 import { ConfigDirBadge } from "@/components/widget/badges/config-dir-badge";
 import { AnalyzeCurrentButton } from "@/components/widget/summaries/analyze-current-button";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 
 export function UnsummarizedChangesDetected() {
   const configDir = useWidgetStore((s) => s.configDir);
-  const changeMap = useWidgetStore((s) => s.changeMap);
+  const changeMap = useViewModel((s) => s.changeMap);
   if (!changeMap) return null;
   const hasUnsummarized = changeMap?.unsummarizedHashes.length
   if (!hasUnsummarized) return null
diff --git a/apps/native/src/components/widget/promptinput/begin-evolve-warning.tsx b/apps/native/src/components/widget/promptinput/begin-evolve-warning.tsx
index 6e0e620b3..f96db7d9b 100644
--- a/apps/native/src/components/widget/promptinput/begin-evolve-warning.tsx
+++ b/apps/native/src/components/widget/promptinput/begin-evolve-warning.tsx
@@ -14,6 +14,7 @@ import { ConfigDirBadge } from "@/components/widget/badges/config-dir-badge";
 import { useEvolve } from "@/hooks/use-evolve";
 import { useGitOperations } from "@/hooks/use-git-operations";
 import { useRollback } from "@/hooks/use-rollback";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { Loader2, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -28,7 +29,7 @@ interface BeginEvolveWarningProps {
 type BuildCheckStatus = "checking" | "passed" | "failed";
 
 export function BeginEvolveWarning({ open, onOpenChange, handleEvolve }: BeginEvolveWarningProps) {
-  const gitStatus = useWidgetStore((s) => s.gitStatus);
+  const gitStatus = useViewModel((s) => s.git);
   const evolvePrompt = useWidgetStore((s) => s.evolvePrompt);
   const configDir = useWidgetStore((s) => s.configDir);
   const files = gitStatus?.files ?? [];
@@ -57,7 +58,7 @@ export function BeginEvolveWarning({ open, onOpenChange, handleEvolve }: BeginEv
 
   const handleDiscard = async () => {
     await handleRollback();
-    const newFiles = useWidgetStore.getState().gitStatus?.files?.length ?? 1;
+    const newFiles = useViewModel.getState().git?.files?.length ?? 1;
     if (newFiles === 0) {
       toast.success("Changes discarded");
     } else {
diff --git a/apps/native/src/components/widget/promptinput/homebrew-badge.tsx b/apps/native/src/components/widget/promptinput/homebrew-badge.tsx
index 7e16bf15b..008b870be 100644
--- a/apps/native/src/components/widget/promptinput/homebrew-badge.tsx
+++ b/apps/native/src/components/widget/promptinput/homebrew-badge.tsx
@@ -8,6 +8,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { countDiffItems, useHomebrewDiff } from "@/hooks/use-homebrew-diff";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { Package } from "lucide-react";
 
@@ -17,7 +18,7 @@ import { Package } from "lucide-react";
  * the working tree is clean, and there are packages not yet in config.
  */
 export function HomebrewBadge() {
-  const evolveState = useWidgetStore((s) => s.evolveState);
+  const evolveState = useViewModel((s) => s.evolve);
   const prefsLoaded = useWidgetStore((s) => s.prefsLoaded);
   const scanHomebrewOnStartup = useWidgetStore((s) => s.scanHomebrewOnStartup);
   const shouldScan = prefsLoaded && scanHomebrewOnStartup;
diff --git a/apps/native/src/components/widget/promptinput/prompt-input.tsx b/apps/native/src/components/widget/promptinput/prompt-input.tsx
index a5e7f651b..a578f62ee 100644
--- a/apps/native/src/components/widget/promptinput/prompt-input.tsx
+++ b/apps/native/src/components/widget/promptinput/prompt-input.tsx
@@ -14,6 +14,7 @@ import { PromptHistoryBadge } from "@/components/widget/promptinput/prompt-histo
 import { SystemDefaultsCTA } from "@/components/widget/promptinput/system-defaults-cta";
 import { useEvolve } from "@/hooks/use-evolve";
 import { getProviderConfigInvalidReason } from "@/lib/ai-provider-validation";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
 import { ArrowUpIcon } from "lucide-react";
@@ -29,8 +30,8 @@ export function PromptInput() {
   const setEvolvePrompt = useWidgetStore((s) => s.setEvolvePrompt);
   const isProcessing = useWidgetStore((s) => s.isProcessing);
   const processingAction = useWidgetStore((s) => s.processingAction);
-  const evolveState = useWidgetStore((s) => s.evolveState);
-  const gitStatus = useWidgetStore((s) => s.gitStatus);
+  const evolveState = useViewModel((s) => s.evolve);
+  const gitStatus = useViewModel((s) => s.git);
   const settingsOpen = useWidgetStore((s) => s.settingsOpen);
   const setSettingsOpen = useWidgetStore((s) => s.setSettingsOpen);
   const { handleEvolve, evolveFromManual } = useEvolve();
diff --git a/apps/native/src/components/widget/promptinput/system-defaults-cta.tsx b/apps/native/src/components/widget/promptinput/system-defaults-cta.tsx
index 4eeeea720..445f90665 100644
--- a/apps/native/src/components/widget/promptinput/system-defaults-cta.tsx
+++ b/apps/native/src/components/widget/promptinput/system-defaults-cta.tsx
@@ -9,6 +9,10 @@ import {
 import { useWidgetStore } from "@/stores/widget-store";
 import type { SystemDefault, SystemDefaultsScan } from "@/ipc/types";
 import { tauriAPI } from "@/ipc/api";
+import { useViewModel } from "@/stores/view-model";
+import { mirrorChangeMapState } from "@/viewmodel/change-map";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
+import { mirrorGitState } from "@/viewmodel/git";
 import { Monitor, X } from "lucide-react";
 import { useEffect, useState } from "react";
 
@@ -42,7 +46,7 @@ function formatValue(value: string): string {
  * Appears in the prompt badge row when non-default settings are detected.
  */
 export function SystemDefaultsCTA() {
-  const evolveState = useWidgetStore((s) => s.evolveState);
+  const evolveState = useViewModel((s) => s.evolve);
   const [scan, setScan] = useState<SystemDefaultsScan | null>(null);
   const [applying, setApplying] = useState(false);
   const [open, setOpen] = useState(false);
@@ -79,9 +83,9 @@ export function SystemDefaultsCTA() {
 
     try {
       const result = await tauriAPI.scanner.applyDefaults(defaults);
-      useWidgetStore.getState().setEvolveState(result.evolveState);
-      useWidgetStore.getState().setChangeMap(result.changeMap);
-      useWidgetStore.getState().setGitStatus(result.gitStatus);
+      mirrorEvolveState(result.evolveState);
+      mirrorChangeMapState(result.changeMap);
+      mirrorGitState(result.gitStatus);
       // Invalidate recommended prompt — settings changed
       useWidgetStore.getState().setRecommendedPrompt(undefined);
     } catch (e: unknown) {
diff --git a/apps/native/src/components/widget/steps/evolve-step.tsx b/apps/native/src/components/widget/steps/evolve-step.tsx
index 8bf580fcd..a787861d2 100644
--- a/apps/native/src/components/widget/steps/evolve-step.tsx
+++ b/apps/native/src/components/widget/steps/evolve-step.tsx
@@ -36,11 +36,10 @@ export function EvolveStep() {
         </ConfirmButton>
         <ConfirmButton
           size="sm"
-          className="bg-teal-600 hover:bg-teal-500 text-white"
+          className="bg-primary"
           confirmPrefKey="confirmBuild"
           onConfirm={handleApply}
           message="Rebuild with these configuration changes?"
-          color="teal"
         >
           <Wrench className="h-3.5 w-3.5" />
           Build & Test
diff --git a/apps/native/src/components/widget/steps/history-step.tsx b/apps/native/src/components/widget/steps/history-step.tsx
index a45d86fd5..1ac7d2377 100644
--- a/apps/native/src/components/widget/steps/history-step.tsx
+++ b/apps/native/src/components/widget/steps/history-step.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useHistory } from "@/hooks/use-history";
-import { useWidgetStore } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 import { useHistoryRestore, PREVIEW_ITEM_HASH } from "@/hooks/use-history-restore";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { HistoryDayLabel } from "@/components/widget/history/history-day-label";
@@ -11,7 +11,7 @@ import { DiscardUncommittedDialog } from "@/components/widget/history/discard-un
 
 export function HistoryStep() {
   const { loadHistory } = useHistory();
-  const history = useWidgetStore((state) => state.history);
+  const history = useViewModel((state) => state.history);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const [isFlashing, setIsFlashing] = useState(false);
diff --git a/apps/native/src/components/widget/utils.ts b/apps/native/src/components/widget/utils.ts
index 001261b27..81bdf38a9 100644
--- a/apps/native/src/components/widget/utils.ts
+++ b/apps/native/src/components/widget/utils.ts
@@ -1,8 +1,23 @@
 import { filesystemViewEnabled } from "@/lib/flags";
-import type { WidgetState, WidgetStep } from "@/stores/widget-store";
+import type { EvolveState, PermissionsState } from "@/ipc/types";
+import type { WidgetStep } from "@/stores/widget-store";
 import { FilePen, FilePlus, FileX, FileCode, type LucideIcon } from "lucide-react";
 
-export function computeCurrentStep(state: WidgetState): WidgetStep {
+type CurrentStepState = {
+  configDir: string;
+  host: string;
+  hosts: string[];
+  permissionsChecked: boolean;
+  permissionsState: PermissionsState | null;
+  nixInstalled: boolean | null;
+  darwinRebuildAvailable: boolean | null;
+  isBootstrapping: boolean;
+  showHistory: boolean;
+  showFilesystem: boolean;
+  evolveState: EvolveState | null;
+};
+
+export function computeCurrentStep(state: CurrentStepState): WidgetStep {
   const hasConfigDir = !!state.configDir;
   const hasHost = !!state.host && state.hosts.includes(state.host);
   const permissionsCheckedAndIncomplete =
diff --git a/apps/native/src/components/widget/widget.stories.tsx b/apps/native/src/components/widget/widget.stories.tsx
index 4333bed0d..681069a0d 100644
--- a/apps/native/src/components/widget/widget.stories.tsx
+++ b/apps/native/src/components/widget/widget.stories.tsx
@@ -1,6 +1,7 @@
 // @ts-nocheck - Storybook 10 alpha types have inference issues (resolves to `never`)
 import preview from "#storybook/preview";
 import type { EvolveEvent, GitStatus } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import type { SemanticChangeMap } from "@/ipc/types";
 import type React from "react";
@@ -222,8 +223,8 @@ function StoryWidget({ storeState }: { storeState?: StoreState }) {
     if (storeState?.configDir !== undefined) store.setConfigDir(storeState.configDir);
     if (storeState?.hosts !== undefined) store.setHosts(storeState.hosts);
     if (storeState?.host !== undefined) store.setHost(storeState.host);
-    if (storeState?.gitStatus !== undefined) store.setGitStatus(storeState.gitStatus);
-    if (storeState?.changeMap !== undefined) store.setChangeMap(storeState.changeMap);
+    if (storeState?.gitStatus !== undefined) useViewModel.setState({ git: storeState.gitStatus });
+    if (storeState?.changeMap !== undefined) useViewModel.setState({ changeMap: storeState.changeMap });
     if (storeState?.evolvePrompt !== undefined) store.setEvolvePrompt(storeState.evolvePrompt);
     if (storeState?.isProcessing !== undefined)
       store.setProcessing(storeState.isProcessing, storeState.processingAction || null);
@@ -658,4 +659,3 @@ export const OnboardingWithPermissions = meta.story({
     ),
   ],
 });
-
diff --git a/apps/native/src/components/widget/widget.test.tsx b/apps/native/src/components/widget/widget.test.tsx
index d148e526a..7229cb44e 100644
--- a/apps/native/src/components/widget/widget.test.tsx
+++ b/apps/native/src/components/widget/widget.test.tsx
@@ -1,3 +1,4 @@
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 import { render } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -63,7 +64,7 @@ describe("DarwinWidget", () => {
     store.setConfigDir("/Users/test/nixmac");
     store.setHosts(["Test-MacBook"]);
     store.setHost("Test-MacBook");
-    store.setGitStatus(null);
+    useViewModel.setState({ git: null });
     store.setEvolvePrompt("");
     store.setProcessing(false);
     store.setGenerating(false);
@@ -87,16 +88,17 @@ describe("DarwinWidget", () => {
   });
 
   it("renders evolving step with git changes", () => {
-    const store = useWidgetStore.getState();
-    store.setGitStatus({
-      files: [{ path: "test.nix", changeType: "edited" }],
-      branch: null,
-      diff: "",
-      additions: 0,
-      deletions: 0,
-      headCommitHash: null,
-      cleanHead: false,
-      changes: [],
+    useViewModel.setState({
+      git: {
+        files: [{ path: "test.nix", changeType: "edited" }],
+        branch: null,
+        diff: "",
+        additions: 0,
+        deletions: 0,
+        headCommitHash: null,
+        cleanHead: false,
+        changes: [],
+      },
     });
 
     const { container } = render(<DarwinWidget />);
diff --git a/apps/native/src/components/widget/widget.tsx b/apps/native/src/components/widget/widget.tsx
index 3cb66a31a..7ecd127bf 100644
--- a/apps/native/src/components/widget/widget.tsx
+++ b/apps/native/src/components/widget/widget.tsx
@@ -32,13 +32,12 @@ import { usePermissions } from "@/hooks/use-permissions";
 import { usePrefs } from "@/hooks/use-prefs";
 import { usePromptHistory } from "@/hooks/use-prompt-history";
 import { useTrayEvents } from "@/hooks/use-tray-events";
-import { useQueueSummarizer } from "@/hooks/use-queue-summarizer";
-import { useWatcher } from "@/hooks/use-watcher";
 import { loadConfig, loadHosts, loadEvolveState } from "@/hooks/use-widget-initialization";
 import { useSummary } from "@/hooks/use-summary";
 import { markBootStage } from "@/lib/boot-diagnostics";
 import { useCurrentStep, useWidgetStore } from "@/stores/widget-store";
 import { UpdateBanner } from "@/components/widget/layout/update-banner";
+import { startViewModelSync } from "@/viewmodel";
 import { setupErrorTestHelpers } from "@/utils/error-test-helpers";
 import { setupWidgetTestHelpers } from "@/utils/widget-test-helpers";
 import { useEffect } from "react";
@@ -56,8 +55,6 @@ export function DarwinWidget() {
   const { checkPermissions } = usePermissions();
   const { loadPrefs } = usePrefs();
   const { refreshPromptHistory } = usePromptHistory();
-  const { startWatching } = useWatcher();
-  const { queueForSummaries } = useQueueSummarizer();
   const { findChangeMap } = useSummary();
 
   // Set up panic handler to catch Rust crashes and show feedback dialog
@@ -107,6 +104,9 @@ export function DarwinWidget() {
 
   // Load initial data once on mount, then start watching for changes
   useEffect(() => {
+    let cancelled = false;
+    let stopViewModelSync: (() => void) | null = null;
+
     (async () => {
       try {
         await checkPermissions();
@@ -118,14 +118,25 @@ export function DarwinWidget() {
         await loadPrefs();
         await findChangeMap();
         refreshPromptHistory();
+
+        const stop = await startViewModelSync();
+        if (cancelled) {
+          stop();
+        } else {
+          stopViewModelSync = stop;
+        }
       } catch (e: unknown) {
         useWidgetStore.getState().setError((e as Error)?.message || String(e));
       }
 
+      if (cancelled) return;
       surfaceRecoveryReport();
-      startWatching();
-      queueForSummaries();
     })();
+
+    return () => {
+      cancelled = true;
+      stopViewModelSync?.();
+    };
   }, []);
 
   // Routing mechanism
diff --git a/apps/native/src/hooks/use-apply.ts b/apps/native/src/hooks/use-apply.ts
index c9b2fbe37..f1aa6e562 100644
--- a/apps/native/src/hooks/use-apply.ts
+++ b/apps/native/src/hooks/use-apply.ts
@@ -1,6 +1,9 @@
 import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
 import { useRebuildStream } from "@/hooks/use-rebuild-stream";
+import { useViewModel } from "@/stores/view-model";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
+import { mirrorGitState } from "@/viewmodel/git";
 
 /**
  * Hook for the apply/rebuild operation.
@@ -19,12 +22,12 @@ export function useApply() {
       onSuccess: async () => {
         try {
           const result = await tauriAPI.darwin.finalizeApply();
-          useWidgetStore.getState().setExternalBuildDetected(false);
+          mirrorGitState(useViewModel.getState().git, false);
           if (result?.gitStatus) {
-            useWidgetStore.getState().setGitStatus(result.gitStatus);
+            mirrorGitState(result.gitStatus);
           }
           if (result?.evolveState) {
-            useWidgetStore.getState().setEvolveState(result.evolveState);
+            mirrorEvolveState(result.evolveState);
           }
         } catch (e) {
           console.error("Failed to finalize apply:", e);
@@ -47,12 +50,12 @@ export function useApply() {
   const handleManualBuildConfirm = async () => {
     try {
       const result = await tauriAPI.darwin.finalizeApply();
-      useWidgetStore.getState().setExternalBuildDetected(false);
+      mirrorGitState(useViewModel.getState().git, false);
       if (result?.gitStatus) {
-        useWidgetStore.getState().setGitStatus(result.gitStatus);
+        mirrorGitState(result.gitStatus);
       }
       if (result?.evolveState) {
-        useWidgetStore.getState().setEvolveState(result.evolveState);
+        mirrorEvolveState(result.evolveState);
       }
     } catch (e) {
       console.error("Failed to finalize manual build:", e);
diff --git a/apps/native/src/hooks/use-darwin-config.ts b/apps/native/src/hooks/use-darwin-config.ts
index 4ff84e27d..3623e0340 100644
--- a/apps/native/src/hooks/use-darwin-config.ts
+++ b/apps/native/src/hooks/use-darwin-config.ts
@@ -1,13 +1,15 @@
 import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
 import type { SetDirResult } from "@/ipc/types";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
+import { mirrorGitState } from "@/viewmodel/git";
 
 const applyDirResult = async (result: SetDirResult) => {
   const store = useWidgetStore.getState();
   store.setConfigDir(result.dir);
   if (result.evolveState) {
-    store.setEvolveState(result.evolveState);
-    store.setGitStatus(null);
+    mirrorEvolveState(result.evolveState);
+    mirrorGitState(null);
     store.setHost("");
     try {
       await tauriAPI.config.setHostAttr("");
diff --git a/apps/native/src/hooks/use-evolve.ts b/apps/native/src/hooks/use-evolve.ts
index 6a04af73c..075ad9ef3 100644
--- a/apps/native/src/hooks/use-evolve.ts
+++ b/apps/native/src/hooks/use-evolve.ts
@@ -4,6 +4,10 @@ import { EVOLVE_EVENT_CHANNEL } from "@/lib/constants";
 import { tauriAPI, ipcRenderer } from "@/ipc/api";
 import type { EvolveEvent } from "@/ipc/types";
 import { formatDurationMs } from "@/lib/utils";
+import { useViewModel } from "@/stores/view-model";
+import { mirrorChangeMapState } from "@/viewmodel/change-map";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
+import { mirrorGitState } from "@/viewmodel/git";
 import { toast } from "sonner";
 
 /**
@@ -37,12 +41,10 @@ const refreshPromptHistory = async (prompt?: string) => {
 };
 
 const findChangeMap = async (): Promise<void> => {
-  const { setChangeMap, setSummaryAvailable } = useWidgetStore.getState();
   try {
     const map = await tauriAPI.summarizedChanges.findChangeMap();
     if (map) {
-      setChangeMap(map);
-      setSummaryAvailable(map.groups.length > 0 || map.singles.length > 0);
+      mirrorChangeMapState(map);
     }
   } catch (e) {
     console.error("[SemanticChangeMap] error", e);
@@ -61,9 +63,10 @@ const handleEvolve = async () => {
   store.setProcessing(true, "evolve");
   store.setGenerating(true);
   store.setError(null);
-  store.setExternalBuildDetected(false);
+  mirrorGitState(useViewModel.getState().git, false);
   store.clearEvolveEvents();
   store.clearLogs();
+  mirrorChangeMapState(null);
   store.setConversationalResponse(null);
   store.setEvolutionTelemetry(null);
   store.appendLog(`\n> Evolving: "${store.evolvePrompt}"\n`);
@@ -96,17 +99,15 @@ const handleEvolve = async () => {
 
     if (isConversational) {
       useWidgetStore.getState().setConversationalResponse(result.conversationalResponse ?? null);
-    } else {
-      store.setSummaryAvailable(true);
     }
     if (result?.gitStatus) {
-      useWidgetStore.getState().setGitStatus(result.gitStatus);
+      mirrorGitState(result.gitStatus);
     }
     if (result?.evolveState) {
-      useWidgetStore.getState().setEvolveState(result.evolveState);
+      mirrorEvolveState(result.evolveState);
     }
     if (!isConversational && result?.changeMap) {
-      useWidgetStore.getState().setChangeMap(result.changeMap);
+      mirrorChangeMapState(result.changeMap);
     }
 
     store.setEvolvePrompt("");
diff --git a/apps/native/src/hooks/use-git-operations.ts b/apps/native/src/hooks/use-git-operations.ts
index ad0e2fb95..210866dae 100644
--- a/apps/native/src/hooks/use-git-operations.ts
+++ b/apps/native/src/hooks/use-git-operations.ts
@@ -1,6 +1,9 @@
 import { loadHosts } from "@/hooks/use-widget-initialization";
 import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
+import { mirrorChangeMapState } from "@/viewmodel/change-map";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
+import { mirrorGitState } from "@/viewmodel/git";
 import { toast } from "sonner";
 
 /**
@@ -33,7 +36,7 @@ export const refreshGitStatus = async (options?: { cache?: boolean }) => {
       ? await tauriAPI.git.statusAndCache()
       : await tauriAPI.git.status();
 
-    useWidgetStore.getState().setGitStatus(status);
+    mirrorGitState(status);
 
     return status;
   } catch (e: unknown) {
@@ -52,7 +55,7 @@ export const refreshGitStatus = async (options?: { cache?: boolean }) => {
 const getInitialStatus = async () => {
   try {
     const currentStatus = await tauriAPI.git.statusAndCache();
-    useWidgetStore.getState().setGitStatus(currentStatus);
+    mirrorGitState(currentStatus);
   } catch (e: unknown) {
     const msg = (e as Error)?.message || String(e);
     useWidgetStore.getState().setError(msg);
@@ -85,9 +88,8 @@ const handleCommit = async ({ message }: { message: string }) => {
     useWidgetStore.getState().appendLog("✓ Committed successfully\n");
     useWidgetStore.getState().setError(null);
     toast.success("Committed successfully");
-    useWidgetStore.getState().clearPreview();
-    useWidgetStore.getState().setChangeMap(null);
-    useWidgetStore.getState().setEvolveState(result.evolveState);
+    mirrorChangeMapState(null);
+    mirrorEvolveState(result.evolveState);
     await refreshGitStatus();
   } catch (e: unknown) {
     const msg = (e as Error)?.message || String(e);
diff --git a/apps/native/src/hooks/use-history-card.ts b/apps/native/src/hooks/use-history-card.ts
index fb234ea66..9b21520be 100644
--- a/apps/native/src/hooks/use-history-card.ts
+++ b/apps/native/src/hooks/use-history-card.ts
@@ -4,7 +4,7 @@ import type { HistoryItem } from "@/ipc/types";
 import { cn } from "@/lib/utils";
 import { buildColorMap } from "@/components/widget/utils";
 import type { ColorMap } from "@/components/widget/utils";
-import { useWidgetStore } from "@/stores/widget-store";
+import { useViewModel } from "@/stores/view-model";
 
 type ActionType = "current" | "base" | "build" | "restore" | "preview";
 
@@ -19,7 +19,7 @@ interface UseHistoryCardResult {
 
 export function useHistoryCard(item: HistoryItem, isPreview = false): UseHistoryCardResult {
   const [expanded, setExpanded] = useState(false);
-  const isHead = useWidgetStore((s) => s.gitStatus?.headCommitHash === item.hash);
+  const isHead = useViewModel((s) => s.git?.headCommitHash === item.hash);
 
   const colorMap = item.changeMap ? buildColorMap(item.changeMap) : new Map();
 
diff --git a/apps/native/src/hooks/use-history-restore.ts b/apps/native/src/hooks/use-history-restore.ts
index 37fc958ce..1f4c7bf47 100644
--- a/apps/native/src/hooks/use-history-restore.ts
+++ b/apps/native/src/hooks/use-history-restore.ts
@@ -4,6 +4,8 @@ import { useRebuildStream } from "@/hooks/use-rebuild-stream";
 import { useHistory } from "@/hooks/use-history";
 import { tauriAPI } from "@/ipc/api";
 import type { HistoryItem } from "@/ipc/types";
+import { useViewModel } from "@/stores/view-model";
+import { mirrorGitState } from "@/viewmodel/git";
 
 // Sentinel hash used to identify the frontend-only preview item.
 export const PREVIEW_ITEM_HASH = "n1xm4c0";
@@ -192,8 +194,7 @@ export function useHistoryRestore(
 ): HistoryRestoreResult {
   const { loadHistory } = useHistory();
   const setProcessing = useWidgetStore((state) => state.setProcessing);
-  const setGitStatus = useWidgetStore((state) => state.setGitStatus);
-  const gitStatus = useWidgetStore((state) => state.gitStatus);
+  const gitStatus = useViewModel((state) => state.git);
   const { triggerRebuild } = useRebuildStream();
 
   const [restoringHash, setRestoringHash] = useState<string | null>(null);
@@ -246,7 +247,7 @@ export function useHistoryRestore(
         context: "rollback",
         onSuccess: async () => {
           const result = await tauriAPI.darwin.finalizeRestore(hash);
-          setGitStatus(result);
+          mirrorGitState(result);
           await loadHistory();
         },
         onFailure: async () => {
diff --git a/apps/native/src/hooks/use-history.ts b/apps/native/src/hooks/use-history.ts
index 9c0245401..8bf4455f7 100644
--- a/apps/native/src/hooks/use-history.ts
+++ b/apps/native/src/hooks/use-history.ts
@@ -1,16 +1,13 @@
 import { tauriAPI } from "@/ipc/api";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
 
 const loadHistory = async () => {
-  const store = useWidgetStore.getState();
-  store.setHistoryLoading(true);
   try {
     const items = await tauriAPI.history.get();
-    useWidgetStore.getState().setHistory(items);
+    useViewModel.setState({ history: items });
   } catch (e) {
     console.error("[useHistory] get failed:", e);
-  } finally {
-    useWidgetStore.getState().setHistoryLoading(false);
   }
 };
 
@@ -30,7 +27,7 @@ const analyzeMany = async (hashes: string[]) => {
   for (const hash of hashes) {
     const store = useWidgetStore.getState();
     if (!store.analyzingHistoryForHashes.has(hash)) break;
-    const item = store.history.find((h) => h.hash === hash);
+    const item = useViewModel.getState().history.find((h) => h.hash === hash);
     if (item?.changeMap && item.unsummarizedHashes.length === 0) {
       store.removeAnalyzingHistoryHash(hash);
       continue;
diff --git a/apps/native/src/hooks/use-homebrew-diff.ts b/apps/native/src/hooks/use-homebrew-diff.ts
index 51bebff3e..592010485 100644
--- a/apps/native/src/hooks/use-homebrew-diff.ts
+++ b/apps/native/src/hooks/use-homebrew-diff.ts
@@ -3,6 +3,9 @@
 import { tauriAPI } from "@/ipc/api";
 import { useWidgetStore } from "@/stores/widget-store";
 import type { HomebrewState } from "@/ipc/types";
+import { mirrorChangeMapState } from "@/viewmodel/change-map";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
+import { mirrorGitState } from "@/viewmodel/git";
 import { useCallback, useEffect, useState } from "react";
 
 const TWENTY_MINUTES_SECS = 20 * 60;
@@ -55,9 +58,9 @@ export function useHomebrewDiff(enabled = true) {
     store.setProcessing(true, "apply");
     try {
       const result = await tauriAPI.homebrew.applyDiff(diff);
-      store.setEvolveState(result.evolveState);
-      store.setChangeMap(result.changeMap);
-      store.setGitStatus(result.gitStatus);
+      mirrorEvolveState(result.evolveState);
+      mirrorChangeMapState(result.changeMap);
+      mirrorGitState(result.gitStatus);
       store.setRecommendedPrompt(undefined);
       // Clear so we re-fetch on next render (the watcher will also advance the step).
       setDiff(null);
diff --git a/apps/native/src/hooks/use-queue-summarizer.ts b/apps/native/src/hooks/use-queue-summarizer.ts
deleted file mode 100644
index 7fcc592be..000000000
--- a/apps/native/src/hooks/use-queue-summarizer.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useHistory } from "@/hooks/use-history";
-import { useWidgetStore } from "@/stores/widget-store";
-import { ipcRenderer } from "@/ipc/api";
-import type { SummarizerUpdateEvent } from "@/ipc/types";
-import { useRef } from "react";
-
-/**
- * Hook that subscribes to summarizer:update events emitted by the
- * queue_summarizer background service after each model call completes.
- */
-export function useQueueSummarizer() {
-  const { loadHistory } = useHistory();
-  const unlistenRef = useRef<(() => void) | null>(null);
-  const isSubscribingRef = useRef(false);
-
-  const queueForSummaries = () => {
-    if (unlistenRef.current || isSubscribingRef.current) return;
-    isSubscribingRef.current = true;
-
-    const sub = ipcRenderer.on<SummarizerUpdateEvent>(
-      "summarizer:update",
-      (event) => {
-        const store = useWidgetStore.getState();
-        const map = event.payload.semanticMap;
-        store.setChangeMap(map);
-        if (store.showHistory) {
-          loadHistory();
-        }
-      },
-    );
-
-    sub.then((unlisten) => {
-      unlistenRef.current = unlisten;
-      isSubscribingRef.current = false;
-    });
-  };
-
-  const unqueueForSummaries = () => {
-    isSubscribingRef.current = false;
-    if (unlistenRef.current) {
-      unlistenRef.current();
-      unlistenRef.current = null;
-    }
-  };
-
-  return { queueForSummaries, unqueueForSummaries };
-}
diff --git a/apps/native/src/hooks/use-rollback.ts b/apps/native/src/hooks/use-rollback.ts
index 079fc290e..7e23cdc47 100644
--- a/apps/native/src/hooks/use-rollback.ts
+++ b/apps/native/src/hooks/use-rollback.ts
@@ -2,6 +2,9 @@ import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
 import { useRebuildStream } from "@/hooks/use-rebuild-stream";
 import { useSummary } from "@/hooks/use-summary";
+import { useViewModel } from "@/stores/view-model";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
+import { mirrorGitState } from "@/viewmodel/git";
 
 /**
  * Hook for discarding changes and restoring the working tree to its pre-evolution state.
@@ -12,15 +15,15 @@ export function useRollback() {
 
   const handleRollback = async () => {
     const store = useWidgetStore.getState();
-    const wasCommittable = store.evolveState?.committable === true;
+    const wasCommittable = useViewModel.getState().evolve?.committable === true;
 
     store.setProcessing(true, "cancel");
     store.appendLog("\n> Discarding changes...\n");
 
     try {
       const result = await tauriAPI.darwin.rollbackErase();
-      store.setGitStatus(result.gitStatus);
-      store.setEvolveState(result.evolveState);
+      mirrorGitState(result.gitStatus);
+      mirrorEvolveState(result.evolveState);
       store.setEvolvePrompt("");
       store.appendLog("✓ Changes discarded\n");
 
@@ -34,10 +37,10 @@ export function useRollback() {
               result.rollbackChangesetId,
             );
             if (finalResult?.gitStatus) {
-              useWidgetStore.getState().setGitStatus(finalResult.gitStatus);
+              mirrorGitState(finalResult.gitStatus);
             }
             if (finalResult?.evolveState) {
-              useWidgetStore.getState().setEvolveState(finalResult.evolveState);
+              mirrorEvolveState(finalResult.evolveState);
             }
             await findChangeMap();
           },
diff --git a/apps/native/src/hooks/use-summary.ts b/apps/native/src/hooks/use-summary.ts
index e12cc0779..45a8e8dbe 100644
--- a/apps/native/src/hooks/use-summary.ts
+++ b/apps/native/src/hooks/use-summary.ts
@@ -1,16 +1,15 @@
 import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
+import { mirrorChangeMapState } from "@/viewmodel/change-map";
 
 /**
  * Hook for fetching and managing the AI-generated summary of changes.
  */
 const findChangeMap = async (): Promise<void> => {
-  const { setChangeMap, setSummaryAvailable } = useWidgetStore.getState();
   try {
     const map = await tauriAPI.summarizedChanges.findChangeMap();
     if (map) {
-      setChangeMap(map);
-      setSummaryAvailable(map.groups.length > 0 || map.singles.length > 0);
+      mirrorChangeMapState(map);
     }
   } catch (e) {
     console.error("[SemanticChangeMap] error", e);
@@ -29,12 +28,11 @@ const generateCommitMessage = async () => {
 };
 
 const generateCurrentSummary = async () => {
-  const { setSummarizing, setChangeMap, setSummaryAvailable } = useWidgetStore.getState();
+  const { setSummarizing } = useWidgetStore.getState();
   setSummarizing(true);
   try {
     const map = await tauriAPI.summarizedChanges.summarizeCurrent();
-    setChangeMap(map);
-    setSummaryAvailable(map.groups.length > 0 || map.singles.length > 0);
+    mirrorChangeMapState(map);
   } finally {
     setSummarizing(false);
   }
diff --git a/apps/native/src/hooks/use-watcher.ts b/apps/native/src/hooks/use-watcher.ts
deleted file mode 100644
index dc8685f78..000000000
--- a/apps/native/src/hooks/use-watcher.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useWidgetStore } from "@/stores/widget-store";
-import type { WatcherEvent } from "@/ipc/types";
-import { ipcRenderer } from "@/ipc/api";
-import { useRef } from "react";
-import { useHistory } from "@/hooks/use-history";
-
-/**
- * Hook that provides a function to start watching git status changes.
- * Call startWatching() after initialization to subscribe to backend events.
- */
-export function useWatcher() {
-  const { loadHistory } = useHistory();
-  const unlistenRef = useRef<(() => void) | null>(null);
-  const isSubscribingRef = useRef(false);
-
-  const startWatching = () => {
-    // Avoid duplicate subscriptions (check both active and pending)
-    if (unlistenRef.current || isSubscribingRef.current) return;
-    isSubscribingRef.current = true;
-
-    const gitStatusSub = ipcRenderer.on<WatcherEvent>(
-      "git:status-changed",
-      (event) => {
-        const { error, gitStatus, changeMap, evolveState, externalBuildDetected } = event.payload;
-
-        if (error) {
-          useWidgetStore.getState().setError(error);
-          if (error.includes("is not a git repository")) {
-            useWidgetStore.getState().setHosts([]);
-          }
-          return;
-        }
-
-        const store = useWidgetStore.getState();
-        if (!store.isProcessing && !store.isGenerating) {
-          store.setGitStatus(gitStatus ?? null);
-          if (changeMap) {
-            store.setChangeMap(changeMap);
-          }
-          if (evolveState) {
-            store.setEvolveState(evolveState);
-          }
-          store.setExternalBuildDetected(externalBuildDetected);
-          if (store.showHistory) {
-            loadHistory();
-          }
-        }
-      }
-    );
-
-    // Store unlisten for cleanup
-    gitStatusSub.then((unlisten) => {
-      unlistenRef.current = unlisten;
-      isSubscribingRef.current = false;
-    });
-  };
-
-  const stopWatching = () => {
-    isSubscribingRef.current = false;
-    if (unlistenRef.current) {
-      unlistenRef.current();
-      unlistenRef.current = null;
-    }
-  };
-
-  return { startWatching, stopWatching };
-}
diff --git a/apps/native/src/hooks/use-widget-initialization.ts b/apps/native/src/hooks/use-widget-initialization.ts
index 493885e43..1881bddeb 100644
--- a/apps/native/src/hooks/use-widget-initialization.ts
+++ b/apps/native/src/hooks/use-widget-initialization.ts
@@ -1,5 +1,6 @@
 import { useWidgetStore } from "@/stores/widget-store";
 import { tauriAPI } from "@/ipc/api";
+import { mirrorEvolveState } from "@/viewmodel/evolve";
 
 
 type Config = {
@@ -24,7 +25,7 @@ export async function loadConfig() {
 export async function loadEvolveState() {
   try {
     const evolveState = await tauriAPI.evolveState.get();
-    useWidgetStore.getState().setEvolveState(evolveState);
+    mirrorEvolveState(evolveState);
   } catch {
     // Non-fatal — evolve state defaults to Begin if unavailable.
   }
diff --git a/apps/native/src/stores/__mocks__/widget-store.ts b/apps/native/src/stores/__mocks__/widget-store.ts
index 28ad5c1cb..da2a80f85 100644
--- a/apps/native/src/stores/__mocks__/widget-store.ts
+++ b/apps/native/src/stores/__mocks__/widget-store.ts
@@ -118,8 +118,10 @@ export function createWidgetStore(initialState?: Partial<WidgetState>) {
 export const useWidgetStore = createWidgetStore();
 
 import { computeCurrentStep } from "@/components/widget/utils";
+import { useViewModel } from "@/stores/view-model";
 import type { WidgetStep } from "@/stores/widget-store.impl";
 
 export function useCurrentStep(): WidgetStep {
-  return useWidgetStore((state) => computeCurrentStep(state));
+  const evolveState = useViewModel((state) => state.evolve);
+  return useWidgetStore((state) => computeCurrentStep({ ...state, evolveState }));
 }
diff --git a/apps/native/src/stores/ui-state.test.ts b/apps/native/src/stores/ui-state.test.ts
new file mode 100644
index 000000000..416d23483
--- /dev/null
+++ b/apps/native/src/stores/ui-state.test.ts
@@ -0,0 +1,58 @@
+import { FeedbackType } from "@/types/feedback";
+import { beforeEach, describe, expect, it } from "vitest";
+import { initialUiState, useUiState } from "./ui-state";
+
+describe("useUiState", () => {
+  beforeEach(() => {
+    useUiState.setState(initialUiState);
+  });
+
+  it("keeps UI-only defaults outside the backend view model", () => {
+    const state = useUiState.getState();
+
+    expect(state.settingsOpen).toBe(false);
+    expect(state.settingsActiveTab).toBeNull();
+    expect(state.showHistory).toBe(false);
+    expect(state.showFilesystem).toBe(false);
+    expect(state.feedbackOpen).toBe(false);
+    expect(state.error).toBeNull();
+    expect(state.evolvePrompt).toBe("");
+    expect(state.isProcessing).toBe(false);
+    expect(state.consoleLogs).toBe("");
+    expect(state.analyzingHistoryForHashes.size).toBe(0);
+  });
+
+  it("updates modal, processing, feedback, and log state through UI setters", () => {
+    const state = useUiState.getState();
+
+    state.setSettingsOpen(true, "developer");
+    state.setProcessing(true, "evolve");
+    state.openFeedback(FeedbackType.Bug, "broken");
+    state.appendLog("first");
+    state.appendLog(" second");
+
+    const next = useUiState.getState();
+    expect(next.settingsOpen).toBe(true);
+    expect(next.settingsActiveTab).toBe("developer");
+    expect(next.isProcessing).toBe(true);
+    expect(next.processingAction).toBe("evolve");
+    expect(next.feedbackOpen).toBe(true);
+    expect(next.feedbackTypeOverride).toBe(FeedbackType.Bug);
+    expect(next.feedbackInitialText).toBe("broken");
+    expect(next.consoleLogs).toBe("first second");
+  });
+
+  it("updates analyzing history hashes immutably", () => {
+    const before = useUiState.getState().analyzingHistoryForHashes;
+
+    useUiState.getState().addAnalyzingHistoryHash("abc");
+    const afterAdd = useUiState.getState().analyzingHistoryForHashes;
+    useUiState.getState().removeAnalyzingHistoryHash("abc");
+    const afterRemove = useUiState.getState().analyzingHistoryForHashes;
+
+    expect(afterAdd).not.toBe(before);
+    expect(afterAdd.has("abc")).toBe(true);
+    expect(afterRemove).not.toBe(afterAdd);
+    expect(afterRemove.has("abc")).toBe(false);
+  });
+});
diff --git a/apps/native/src/stores/ui-state.ts b/apps/native/src/stores/ui-state.ts
new file mode 100644
index 000000000..31483aaa7
--- /dev/null
+++ b/apps/native/src/stores/ui-state.ts
@@ -0,0 +1,133 @@
+// UI state — ephemeral widget-level state that does NOT come from Rust.
+//
+// This store owns transient UI concerns: which panel is open, loading flags,
+// the current evolve prompt text, console log output, and processing state.
+// Data that originates from the Rust backend (git status, evolve state,
+// change maps) lives in the ViewModel store instead.
+//
+// The split prevents Rust-driven state updates from clobbering local UI
+// concerns (e.g. closing a settings panel just because git status changed).
+
+import { FeedbackType } from "@/types/feedback";
+import { create } from "zustand";
+
+export type SettingsTab = "general" | "api-keys" | "ai-models" | "preferences" | "tuning" | "developer";
+type ProcessingAction = "evolve" | "apply" | "merge" | "cancel" | null;
+
+/**
+ * @todo This needs a pass to determine how much of this is redundant
+ */
+export type UiStateValues = {
+  settingsOpen: boolean;
+  settingsActiveTab: SettingsTab | null;
+  showHistory: boolean;
+  showFilesystem: boolean;
+  filesystemTargetSection: string | null;
+  feedbackOpen: boolean;
+  feedbackTypeOverride: FeedbackType | null;
+  feedbackInitialText: string | null;
+  panicDetails: {
+    message: string;
+    location?: string;
+    backtrace?: string;
+    timestamp: string;
+  } | null;
+  error: string | null;
+  editingFile: string | null;
+  evolvePrompt: string;
+  isProcessing: boolean;
+  processingAction: ProcessingAction;
+  isSummarizing: boolean;
+  isGenerating: boolean;
+  consoleLogs: string;
+  analyzingHistoryForHashes: Set<string>;
+};
+
+/**
+ * @todo This needs a pass to determine how much of this is redundant
+ */
+type UiStateActions = {
+  setSettingsOpen: (open: boolean, tab?: SettingsTab | null) => void;
+  setShowHistory: (show: boolean) => void;
+  setShowFilesystem: (show: boolean, section?: string | null) => void;
+  setFeedbackOpen: (open: boolean) => void;
+  setFeedbackTypeOverride: (type: FeedbackType | null) => void;
+  openFeedback: (type?: FeedbackType, initialText?: string) => void;
+  setPanicDetails: (details: UiStateValues["panicDetails"]) => void;
+  setError: (error: string | null) => void;
+  setEditingFile: (file: string | null) => void;
+  setEvolvePrompt: (prompt: string) => void;
+  setProcessing: (isProcessing: boolean, action?: ProcessingAction) => void;
+  setSummarizing: (summarizing: boolean) => void;
+  setGenerating: (generating: boolean) => void;
+  appendLog: (text: string) => void;
+  clearLogs: () => void;
+  addAnalyzingHistoryHash: (hash: string) => void;
+  removeAnalyzingHistoryHash: (hash: string) => void;
+};
+
+export type UiState = UiStateValues & UiStateActions;
+
+export const initialUiState: UiStateValues = {
+  settingsOpen: false,
+  settingsActiveTab: null,
+  showHistory: false,
+  showFilesystem: false,
+  filesystemTargetSection: null,
+  feedbackOpen: false,
+  feedbackTypeOverride: null,
+  feedbackInitialText: null,
+  panicDetails: null,
+  error: null,
+  editingFile: null,
+  evolvePrompt: "",
+  isProcessing: false,
+  processingAction: null,
+  isSummarizing: false,
+  isGenerating: false,
+  consoleLogs: "",
+  analyzingHistoryForHashes: new Set<string>(),
+};
+
+/**
+ * @todo This needs a pass to determine how much of this is redundant
+ */
+export const useUiState = create<UiState>()((set) => ({
+  ...initialUiState,
+  setSettingsOpen: (settingsOpen, tab) =>
+    set({ settingsOpen, settingsActiveTab: tab ?? null }),
+  setShowHistory: (showHistory) => set({ showHistory }),
+  setShowFilesystem: (showFilesystem, section = null) =>
+    set({ showFilesystem, filesystemTargetSection: showFilesystem ? section : null }),
+  setFeedbackOpen: (feedbackOpen) => set({ feedbackOpen }),
+  setFeedbackTypeOverride: (feedbackTypeOverride) => set({ feedbackTypeOverride }),
+  openFeedback: (type, initialText) =>
+    set({
+      feedbackOpen: true,
+      feedbackTypeOverride: type ?? null,
+      feedbackInitialText: initialText ?? null,
+    }),
+  setPanicDetails: (panicDetails) => set({ panicDetails }),
+  setError: (error) => set({ error }),
+  setEditingFile: (editingFile) => set({ editingFile }),
+  setEvolvePrompt: (evolvePrompt) => set({ evolvePrompt }),
+  setProcessing: (isProcessing, action = null) =>
+    set({
+      isProcessing,
+      processingAction: isProcessing ? action : null,
+    }),
+  setSummarizing: (isSummarizing) => set({ isSummarizing }),
+  setGenerating: (isGenerating) => set({ isGenerating }),
+  appendLog: (text) => set((state) => ({ consoleLogs: state.consoleLogs + text })),
+  clearLogs: () => set({ consoleLogs: "" }),
+  addAnalyzingHistoryHash: (hash) =>
+    set((state) => ({
+      analyzingHistoryForHashes: new Set([...state.analyzingHistoryForHashes, hash]),
+    })),
+  removeAnalyzingHistoryHash: (hash) =>
+    set((state) => {
+      const next = new Set(state.analyzingHistoryForHashes);
+      next.delete(hash);
+      return { analyzingHistoryForHashes: next };
+    }),
+}));
diff --git a/apps/native/src/stores/view-model.ts b/apps/native/src/stores/view-model.ts
new file mode 100644
index 000000000..78b9388f8
--- /dev/null
+++ b/apps/native/src/stores/view-model.ts
@@ -0,0 +1,103 @@
+// Zustand ViewModel — read-optimized projection of Rust state.
+//
+// IMPORTANT: DO NOT CREATE SETTERS ON THIS STATE. Setters create a path for UI
+// state to become inconsistent with the source of truth (Rust state).
+//
+// This store holds a denormalized, query-friendly snapshot of the data that
+// the Rust backend pushes via Tauri events. Components read from it directly
+// instead of making IPC calls on every render.
+//
+// The `viewmodel/` modules are the only writers for Rust-owned slices:
+// they hydrate through commands, then mirror backend events into this store.
+//
+// `evolveActions` are thin IPC wrappers stored here so that the EvolutionView
+// slice can call them without importing the API layer directly.
+//
+
+import { tauriAPI } from "@/ipc/api";
+import type {
+  EvolutionTelemetry,
+  EvolveEvent,
+  EvolveState,
+  GitStatus,
+  HistoryItem,
+  PermissionsState,
+  SemanticChangeMap,
+} from "@/ipc/types";
+import { create } from "zustand";
+
+type BuildView = {
+  externalBuildDetected: boolean;
+};
+
+type RebuildView = {
+  isRunning: boolean;
+};
+
+type NixView = {
+  installed: boolean | null;
+  installing: boolean;
+};
+
+type DarwinRebuildView = {
+  available: boolean | null;
+  prefetching: boolean;
+};
+
+type EvolutionView = {
+  events: EvolveEvent[];
+  telemetry: EvolutionTelemetry | null;
+  conversationalResponse: string | null;
+};
+
+type EvolveActions = {
+  start: (description: string) => Promise<void>;
+  cancel: () => Promise<void>;
+  answer: (answer: string) => Promise<void>;
+};
+
+export type ViewModel = {
+  evolve: EvolveState | null;
+  git: GitStatus | null;
+  build: BuildView;
+  changeMap: SemanticChangeMap | null;
+  history: HistoryItem[];
+  rebuild: RebuildView;
+  permissions: PermissionsState | null;
+  nix: NixView;
+  darwinRebuild: DarwinRebuildView;
+  evolution: EvolutionView;
+  evolveActions: EvolveActions;
+};
+
+export const useViewModel = create<ViewModel>()(() => ({
+  evolve: null,
+  git: null,
+  build: {
+    externalBuildDetected: false,
+  },
+  changeMap: null,
+  history: [],
+  rebuild: {
+    isRunning: false,
+  },
+  permissions: null,
+  nix: {
+    installed: null,
+    installing: false,
+  },
+  darwinRebuild: {
+    available: null,
+    prefetching: false,
+  },
+  evolution: {
+    events: [],
+    telemetry: null,
+    conversationalResponse: null,
+  },
+  evolveActions: {
+    start: (description) => tauriAPI.darwin.evolve(description).then(() => undefined),
+    cancel: () => tauriAPI.darwin.evolveCancel().then(() => undefined),
+    answer: (answer) => tauriAPI.darwin.evolveAnswer(answer).then(() => undefined),
+  },
+}));
diff --git a/apps/native/src/stores/widget-store.impl.ts b/apps/native/src/stores/widget-store.impl.ts
index c8cd06522..891f225c9 100644
--- a/apps/native/src/stores/widget-store.impl.ts
+++ b/apps/native/src/stores/widget-store.impl.ts
@@ -1,15 +1,12 @@
 import { computeCurrentStep } from "@/components/widget/utils";
+import { useViewModel } from "@/stores/view-model";
 import { FeedbackType } from "@/types/feedback";
 import type {
   EvolutionTelemetry,
   EvolveEvent,
-  EvolveState,
   FileDiffContents,
-  GitStatus,
-  HistoryItem,
   PermissionsState,
   RecommendedPrompt,
-  SemanticChangeMap,
   UpdateChannel,
 } from "@/ipc/types";
 import { create } from "zustand";
@@ -31,7 +28,7 @@ export type {
 /**
  * Widget step state - updated by useEffect based on app state.
  */
-export type SettingsTab = "general" | "api-keys" | "ai-models" | "preferences" | "developer";
+export type SettingsTab = "general" | "api-keys" | "ai-models" | "preferences" | "tuning" | "developer";
 export type WidgetStep = "permissions" | "nix-setup" | "setup" | "begin" | "evolve" | "commit" | "manualEvolve" | "manualCommit" | "history" | "filesystem";
 type ProcessingAction = "evolve" | "apply" | "merge" | "cancel" | null;
 export type ConfirmPrefKey = "confirmBuild" | "confirmClear" | "confirmRollback";
@@ -89,13 +86,8 @@ export interface WidgetState {
   darwinRebuildAvailable: boolean | null; // null = not checked yet
   darwinRebuildPrefetching: boolean;
 
-  // Evolve state derived from backend source of truth
-  evolveState: EvolveState | null;
-  externalBuildDetected: boolean;
-
-  // Git (from backend)
-  gitStatus: GitStatus | null;
   fileDiffContents: Record<string, FileDiffContents>;
+
   // Evolution
   evolvePrompt: string;
   isProcessing: boolean;
@@ -105,8 +97,6 @@ export interface WidgetState {
   conversationalResponse: string | null;
   evolutionTelemetry: EvolutionTelemetry | null;
 
-  changeMap: SemanticChangeMap | null;
-
   // Commit message suggestion (generated on merge screen)
   commitMessageSuggestion: string | null;
 
@@ -116,13 +106,9 @@ export interface WidgetState {
   // Console
   consoleLogs: string;
 
-  // History
-  history: HistoryItem[];
-  historyLoading: boolean;
   analyzingHistoryForHashes: Set<string>;
 
   // UI
-  summaryAvailable: boolean;
   isSummarizing: boolean;
   isGenerating: boolean;
   settingsOpen: boolean;
@@ -191,13 +177,9 @@ interface WidgetActions {
   setNixDownloadProgress: (progress: { downloaded: number; total: number } | null) => void;
   setDarwinRebuildAvailable: (available: boolean | null) => void;
   setDarwinRebuildPrefetching: (prefetching: boolean) => void;
-  setEvolveState: (state: EvolveState | null) => void;
-  setExternalBuildDetected: (detected: boolean) => void;
-  setGitStatus: (status: GitStatus | null) => void;
   setFileDiffContents: (contents: Record<string, FileDiffContents>) => void;
   setEvolvePrompt: (prompt: string) => void;
   setProcessing: (isProcessing: boolean, action?: ProcessingAction) => void;
-  setChangeMap: (map: SemanticChangeMap | null) => void;
   setSettingsOpen: (open: boolean, tab?: SettingsTab | null) => void;
   setPrefsLoaded: (loaded: boolean) => void;
   setShowHistory: (show: boolean) => void;
@@ -212,12 +194,9 @@ interface WidgetActions {
     details: { message: string; location?: string; backtrace?: string; timestamp: string } | null,
   ) => void;
   setPromptHistory: (history: string[]) => void;
-  setSummaryAvailable: (available: boolean) => void;
   setRecommendedPrompt: (prompt: RecommendedPrompt | null | undefined) => void;
 
   // History
-  setHistory: (history: HistoryItem[]) => void;
-  setHistoryLoading: (loading: boolean) => void;
   addAnalyzingHistoryHash: (hash: string) => void;
   removeAnalyzingHistoryHash: (hash: string) => void;
 
@@ -236,7 +215,6 @@ interface WidgetActions {
   // Client-side state (NOT from server)
   setSummarizing: (summarizing: boolean) => void;
   setGenerating: (generating: boolean) => void;
-  clearPreview: () => void;
   setFeedbackTypeOverride: (type: FeedbackType | null) => void;
   openFeedback: (type?: FeedbackType, initialText?: string) => void;
 
@@ -300,12 +278,6 @@ const initialWidgetState: WidgetState = {
   darwinRebuildAvailable: null,
   darwinRebuildPrefetching: false,
 
-  // Routing state
-  evolveState: null,
-  externalBuildDetected: false,
-
-  // Git
-  gitStatus: null,
   fileDiffContents: {},
 
   // Evolution
@@ -317,14 +289,8 @@ const initialWidgetState: WidgetState = {
   conversationalResponse: null,
   evolutionTelemetry: null,
 
-  // History
-  history: [],
-  historyLoading: false,
   analyzingHistoryForHashes: new Set<string>(),
 
-  changeMap: null,
-  summaryAvailable: false,
-
   // Commit message suggestion
   commitMessageSuggestion: null,
 
@@ -397,9 +363,6 @@ export function createWidgetStore(initialState?: Partial<WidgetState>) {
     setConfigDir: (configDir) => set({ configDir }),
     setHosts: (hosts) => set({ hosts }),
     setHost: (host) => set({ host }),
-    setEvolveState: (evolveState) => set({ evolveState: evolveState }),
-    setExternalBuildDetected: (externalBuildDetected) => set({ externalBuildDetected }),
-    setGitStatus: (gitStatus) => set({ gitStatus }),
     setFileDiffContents: (fileDiffContents) => set({ fileDiffContents }),
     setEvolvePrompt: (evolvePrompt) => set({ evolvePrompt }),
     setProcessing: (isProcessing, action = null) =>
@@ -407,8 +370,6 @@ export function createWidgetStore(initialState?: Partial<WidgetState>) {
         isProcessing,
         processingAction: isProcessing ? action : null,
       }),
-    setChangeMap: (changeMap) => set({ changeMap }),
-    setSummaryAvailable: (summaryAvailable) => set({ summaryAvailable }),
     setBoolPref: (key: BoolPrefKey, value: boolean) => set({ [key]: value }),
     initConfirmPrefs: (prefs) =>
       set({
@@ -420,8 +381,6 @@ export function createWidgetStore(initialState?: Partial<WidgetState>) {
     setDeveloperMode: (value) => set({ developerMode: value }),
     setPinnedVersion: (value) => set({ pinnedVersion: value }),
     setUpdateChannel: (value) => set({ updateChannel: value }),
-    setHistory: (history) => set({ history }),
-    setHistoryLoading: (historyLoading) => set({ historyLoading }),
     addAnalyzingHistoryHash: (hash) =>
       set((state) => ({
         analyzingHistoryForHashes: new Set([...state.analyzingHistoryForHashes, hash]),
@@ -461,11 +420,6 @@ export function createWidgetStore(initialState?: Partial<WidgetState>) {
     setDarwinRebuildPrefetching: (darwinRebuildPrefetching) => set({ darwinRebuildPrefetching }),
     setSummarizing: (isSummarizing) => set({ isSummarizing }),
     setGenerating: (isGenerating) => set({ isGenerating }),
-    clearPreview: () =>
-      set({
-        changeMap: null,
-        summaryAvailable: false,
-      }),
 
     // Console
     appendLog: (text) => set((state) => ({ consoleLogs: state.consoleLogs + text })),
@@ -553,5 +507,6 @@ export const useWidgetStore = createWidgetStore();
  * Uses a selector so components only re-render when the step actually changes.
  */
 export function useCurrentStep(): WidgetStep {
-  return useWidgetStore((state) => computeCurrentStep(state));
+  const evolveState = useViewModel((state) => state.evolve);
+  return useWidgetStore((state) => computeCurrentStep({ ...state, evolveState }));
 }
diff --git a/apps/native/src/stores/widget-store.test.ts b/apps/native/src/stores/widget-store.test.ts
index c8e074a9f..c9e30b21f 100644
--- a/apps/native/src/stores/widget-store.test.ts
+++ b/apps/native/src/stores/widget-store.test.ts
@@ -1,4 +1,4 @@
-import type { EvolveEvent, GitStatus } from "@/ipc/types";
+import type { EvolveEvent } from "@/ipc/types";
 import { describe, expect, it } from "vitest";
 import {
   createWidgetStore,
@@ -91,15 +91,6 @@ describe("widget store — simple setters", () => {
     expect(store.getState().error).toBeNull();
   });
 
-  it("setGitStatus stores the provided git status", () => {
-    const store = createWidgetStore();
-    const gitStatus: GitStatus = {
-      hasChanges: true,
-      files: [],
-    } as unknown as GitStatus;
-    store.getState().setGitStatus(gitStatus);
-    expect(store.getState().gitStatus).toBe(gitStatus);
-  });
 });
 
 // ---------------------------------------------------------------------------
diff --git a/apps/native/src/utils/widget-test-helpers.ts b/apps/native/src/utils/widget-test-helpers.ts
index 43d0abe2d..6253a40fa 100644
--- a/apps/native/src/utils/widget-test-helpers.ts
+++ b/apps/native/src/utils/widget-test-helpers.ts
@@ -5,7 +5,9 @@
 
 import { refreshGitStatus } from "@/hooks/use-git-operations";
 import { loadEvolveState } from "@/hooks/use-widget-initialization";
+import { useViewModel } from "@/stores/view-model";
 import { useWidgetStore } from "@/stores/widget-store";
+import { mirrorChangeMapState } from "@/viewmodel/change-map";
 
 interface WidgetTestHelpers {
   /**
@@ -23,7 +25,7 @@ interface WidgetTestHelpers {
    */
   getPromptHistory: () => string[];
   /**
-   * Returns the current changeMap from the store serialized as JSON, for
+   * Returns the current change map serialized as JSON, for
    * comparison across browser.execute boundaries.
    */
   getChangeMap: () => string;
@@ -55,7 +57,7 @@ export function setupWidgetTestHelpers() {
       return [...(useWidgetStore.getState().promptHistory ?? [])];
     },
     getChangeMap: () => {
-      return JSON.stringify(useWidgetStore.getState().changeMap);
+      return JSON.stringify(useViewModel.getState().changeMap);
     },
     resetForTest: () => {
       const state = useWidgetStore.getState();
@@ -65,7 +67,7 @@ export function setupWidgetTestHelpers() {
       state.clearEvolveEvents();
       state.setConversationalResponse(null);
       state.setCommitMessageSuggestion(null);
-      state.setChangeMap(null);
+      mirrorChangeMapState(null);
       state.setError(null);
       state.clearRebuild();
     },
diff --git a/apps/native/src/viewmodel/change-map.ts b/apps/native/src/viewmodel/change-map.ts
new file mode 100644
index 000000000..bca94c090
--- /dev/null
+++ b/apps/native/src/viewmodel/change-map.ts
@@ -0,0 +1,17 @@
+import { tauriAPI, ipcRenderer } from "@/ipc/api";
+import type { SemanticChangeMap } from "@/ipc/types";
+import { useViewModel } from "@/stores/view-model";
+import { refreshHistorySnapshot } from "./history";
+
+export function mirrorChangeMapState(changeMap: SemanticChangeMap | null): void {
+  useViewModel.setState({ changeMap });
+}
+
+export async function startChangeMapSync(): Promise<() => void> {
+  mirrorChangeMapState(await tauriAPI.summarizedChanges.findChangeMap());
+
+  return ipcRenderer.on<SemanticChangeMap>("change_map_changed", (event) => {
+    mirrorChangeMapState(event.payload);
+    void refreshHistorySnapshot();
+  });
+}
diff --git a/apps/native/src/viewmodel/evolve.ts b/apps/native/src/viewmodel/evolve.ts
new file mode 100644
index 000000000..154ccad7f
--- /dev/null
+++ b/apps/native/src/viewmodel/evolve.ts
@@ -0,0 +1,15 @@
+import { tauriAPI, ipcRenderer } from "@/ipc/api";
+import type { EvolveState } from "@/ipc/types";
+import { useViewModel } from "@/stores/view-model";
+
+export function mirrorEvolveState(evolve: EvolveState | null): void {
+  useViewModel.setState({ evolve });
+}
+
+export async function startEvolveSync(): Promise<() => void> {
+  mirrorEvolveState(await tauriAPI.evolveState.get());
+
+  return ipcRenderer.on<EvolveState>("evolve_state_changed", (event) => {
+    mirrorEvolveState(event.payload);
+  });
+}
diff --git a/apps/native/src/viewmodel/git.ts b/apps/native/src/viewmodel/git.ts
new file mode 100644
index 000000000..793f02e94
--- /dev/null
+++ b/apps/native/src/viewmodel/git.ts
@@ -0,0 +1,36 @@
+import { tauriAPI, ipcRenderer } from "@/ipc/api";
+import type { GitState, GitStatus } from "@/ipc/types";
+import { useUiState } from "@/stores/ui-state";
+import { useViewModel } from "@/stores/view-model";
+import { refreshHistorySnapshot } from "./history";
+
+export function mirrorGitState(git: GitStatus | null, externalBuildDetected = false): void {
+  useViewModel.setState((state) => ({
+    git,
+    build: {
+      ...state.build,
+      externalBuildDetected,
+    },
+  }));
+}
+
+export async function startGitSync(): Promise<() => void> {
+  mirrorGitState(await tauriAPI.git.status());
+
+  const [stateUnlisten, errorUnlisten] = await Promise.all([
+    ipcRenderer.on<GitState>("git_state_changed", (event) => {
+      const { gitStatus, externalBuildDetected } = event.payload;
+      mirrorGitState(gitStatus, externalBuildDetected);
+      void refreshHistorySnapshot();
+    }),
+    ipcRenderer.on<string>("git_state_error", (event) => {
+      const error = event.payload;
+      useUiState.getState().setError(error);
+    }),
+  ]);
+
+  return () => {
+    stateUnlisten();
+    errorUnlisten();
+  };
+}
diff --git a/apps/native/src/viewmodel/history.ts b/apps/native/src/viewmodel/history.ts
new file mode 100644
index 000000000..1304398e1
--- /dev/null
+++ b/apps/native/src/viewmodel/history.ts
@@ -0,0 +1,11 @@
+import { tauriAPI } from "@/ipc/api";
+import { useViewModel } from "@/stores/view-model";
+
+export async function refreshHistorySnapshot(): Promise<void> {
+  try {
+    const items = await tauriAPI.history.get();
+    useViewModel.setState({ history: items });
+  } catch (error) {
+    console.error("[viewmodel] history refresh failed:", error);
+  }
+}
diff --git a/apps/native/src/viewmodel/index.ts b/apps/native/src/viewmodel/index.ts
new file mode 100644
index 000000000..fe34ab6de
--- /dev/null
+++ b/apps/native/src/viewmodel/index.ts
@@ -0,0 +1,35 @@
+// View-model sync shim layer.
+//
+// This module bridges Rust-emitted Tauri events to Zustand stores. Each
+// sub-module (`evolve`, `git`, `change-map`) listens for a specific event,
+// hydrates through the matching command, then mirrors payloads into the
+// read-optimized ViewModel. UI-only reactions, such as surfacing an error
+// string, go through `useUiState`.
+//
+// `startViewModelSync()` is called once on app mount; the returned cleanup
+// function tears down all listeners on unmount.
+
+import { startChangeMapSync } from "./change-map";
+import { startEvolveSync } from "./evolve";
+import { startGitSync } from "./git";
+
+export async function startViewModelSync(): Promise<() => void> {
+  const unlisteners: Array<() => void> = [];
+
+  try {
+    unlisteners.push(await startEvolveSync());
+    unlisteners.push(await startGitSync());
+    unlisteners.push(await startChangeMapSync());
+
+    return () => {
+      for (const unlisten of unlisteners) {
+        unlisten();
+      }
+    };
+  } catch (error) {
+    for (const unlisten of unlisteners) {
+      unlisten();
+    }
+    throw error;
+  }
+}
diff --git a/apps/native/src/viewmodel/viewmodel.test.ts b/apps/native/src/viewmodel/viewmodel.test.ts
new file mode 100644
index 000000000..15571f861
--- /dev/null
+++ b/apps/native/src/viewmodel/viewmodel.test.ts
@@ -0,0 +1,124 @@
+import type {
+  EvolveState,
+  GitState,
+  GitStatus,
+  SemanticChangeMap,
+} from "@/ipc/types";
+import { useUiState, initialUiState } from "@/stores/ui-state";
+import { useViewModel } from "@/stores/view-model";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { startChangeMapSync } from "./change-map";
+import { startEvolveSync } from "./evolve";
+import { startGitSync } from "./git";
+
+const apiMocks = vi.hoisted(() => ({
+  listeners: new Map<string, (event: { payload: unknown }) => void>(),
+  unlisten: vi.fn(),
+  evolveState: {} as EvolveState,
+  gitStatus: {} as GitStatus,
+  changeMap: {} as SemanticChangeMap,
+}));
+
+vi.mock("@/ipc/api", () => ({
+  tauriAPI: {
+    darwin: {
+      evolve: vi.fn(),
+      evolveAnswer: vi.fn(),
+      evolveCancel: vi.fn(),
+    },
+    evolveState: {
+      get: vi.fn(() => Promise.resolve(apiMocks.evolveState)),
+    },
+    git: {
+      status: vi.fn(() => Promise.resolve(apiMocks.gitStatus)),
+    },
+    summarizedChanges: {
+      findChangeMap: vi.fn(() => Promise.resolve(apiMocks.changeMap)),
+    },
+    history: {
+      get: vi.fn(() => Promise.resolve([])),
+    },
+  },
+  ipcRenderer: {
+    on: vi.fn((channel: string, listener: (event: { payload: unknown }) => void) => {
+      apiMocks.listeners.set(channel, listener);
+      return Promise.resolve(apiMocks.unlisten);
+    }),
+  },
+}));
+
+describe("view model sync", () => {
+  beforeEach(() => {
+    apiMocks.listeners.clear();
+    apiMocks.unlisten.mockClear();
+    apiMocks.evolveState = { step: "begin" } as unknown as EvolveState;
+    apiMocks.gitStatus = { hasChanges: false, files: [] } as unknown as GitStatus;
+    apiMocks.changeMap = { groups: [], singles: [] } as unknown as SemanticChangeMap;
+
+    useViewModel.setState({
+      evolve: null,
+      git: null,
+      build: { externalBuildDetected: false },
+      changeMap: null,
+    });
+    useUiState.setState({ ...initialUiState });
+  });
+
+  it("hydrates and mirrors the evolve slice", async () => {
+    const stop = await startEvolveSync();
+
+    expect(useViewModel.getState().evolve).toBe(apiMocks.evolveState);
+
+    const next = { step: "commit" } as unknown as EvolveState;
+    apiMocks.listeners.get("evolve_state_changed")?.({ payload: next });
+
+    expect(useViewModel.getState().evolve).toBe(next);
+
+    stop();
+    expect(apiMocks.unlisten).toHaveBeenCalledTimes(1);
+  });
+
+  it("hydrates git and mirrors git slice events", async () => {
+    const stop = await startGitSync();
+
+    expect(useViewModel.getState().git).toBe(apiMocks.gitStatus);
+
+    const gitStatus = { hasChanges: true, files: [] } as unknown as GitStatus;
+    const event: GitState = {
+      gitStatus,
+      externalBuildDetected: true,
+    };
+
+    apiMocks.listeners.get("git_state_changed")?.({ payload: event });
+
+    expect(useViewModel.getState().git).toBe(gitStatus);
+    expect(useViewModel.getState().build.externalBuildDetected).toBe(true);
+
+    stop();
+    expect(apiMocks.unlisten).toHaveBeenCalledTimes(2);
+  });
+
+  it("hydrates and mirrors git errors into UI state", async () => {
+    const stop = await startGitSync();
+
+    apiMocks.listeners.get("git_state_error")?.({ payload: "not a git repository" });
+
+    expect(useUiState.getState().error).toBe("not a git repository");
+
+    stop();
+  });
+
+  it("hydrates and mirrors the change-map slice", async () => {
+    const stop = await startChangeMapSync();
+
+    expect(useViewModel.getState().changeMap).toBe(apiMocks.changeMap);
+
+    const changeMap = { groups: [{}], singles: [] } as unknown as SemanticChangeMap;
+    apiMocks.listeners.get("change_map_changed")?.({ payload: changeMap });
+
+    expect(useViewModel.getState().changeMap).toBe(changeMap);
+
+    stop();
+    expect(apiMocks.unlisten).toHaveBeenCalledTimes(1);
+  });
+});