fix remount issue

Author: sawka

tsunami/app/tsunamiapp.go

@@ -264,11 +264,12 @@ func (c *clientImpl) fullRender() (*rpctypes.VDomBackendUpdate, error) {
 		renderedVDom = makeNullVDom()
 	}
 	return &rpctypes.VDomBackendUpdate{
-		Type:     "backendupdate",
-		Ts:       time.Now().UnixMilli(),
-		ServerId: c.ServerId,
-		HasWork:  len(c.Root.EffectWorkQueue) > 0,
-		Opts:     c.makeBackendOpts(),
+		Type:       "backendupdate",
+		Ts:         time.Now().UnixMilli(),
+		ServerId:   c.ServerId,
+		HasWork:    len(c.Root.EffectWorkQueue) > 0,
+		FullUpdate: true,
+		Opts:       c.makeBackendOpts(),
 		RenderUpdates: []rpctypes.VDomRenderUpdate{
 			{UpdateType: "root", VDom: renderedVDom},
 		},
@@ -285,10 +286,11 @@ func (c *clientImpl) incrementalRender() (*rpctypes.VDomBackendUpdate, error) {
 		renderedVDom = makeNullVDom()
 	}
 	return &rpctypes.VDomBackendUpdate{
-		Type:     "backendupdate",
-		Ts:       time.Now().UnixMilli(),
-		ServerId: c.ServerId,
-		Opts:     c.makeBackendOpts(),
+		Type:       "backendupdate",
+		Ts:         time.Now().UnixMilli(),
+		ServerId:   c.ServerId,
+		FullUpdate: false,
+		Opts:       c.makeBackendOpts(),
 		RenderUpdates: []rpctypes.VDomRenderUpdate{
 			{UpdateType: "root", VDom: renderedVDom},
 		},

tsunami/frontend/src/app.tsx

@@ -1,34 +1,16 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useState, useEffect } from "react";
 import { TsunamiModel } from "@/model/tsunami-model";
 import { VDomView } from "./vdom";
 
-function App() {
-    const [remountKey, setRemountKey] = useState(0);
-    const [model, setModel] = useState(() => {
-        const newModel = new TsunamiModel();
-        newModel.remountCallback = () => {
-            setRemountKey(prev => prev + 1);
-        };
-        return newModel;
-    });
-
-    useEffect(() => {
-        // Create a new model when remount key changes
-        if (remountKey > 0) {
-            const newModel = new TsunamiModel();
-            newModel.remountCallback = () => {
-                setRemountKey(prev => prev + 1);
-            };
-            setModel(newModel);
-        }
-    }, [remountKey]);
+// Global model instance
+const globalModel = new TsunamiModel();
 
+function App() {
     return (
         <div className="min-h-screen bg-background text-foreground">
-            <VDomView key={remountKey} model={model} />
+            <VDomView model={globalModel} />
         </div>
     );
 }

tsunami/frontend/src/model/tsunami-model.tsx

@@ -85,7 +85,6 @@ export class TsunamiModel {
     clientId: string;
     serverId: string;
     viewRef: React.RefObject<HTMLDivElement> = { current: null };
-    remountCallback: (() => void) | null = null;
     vdomRoot: jotai.PrimitiveAtom<VDomElem> = jotai.atom();
     atoms: Map<string, AtomContainer> = new Map(); // key is atomname
     refs: Map<string, RefContainer> = new Map(); // key is refid
@@ -486,11 +485,35 @@ export class TsunamiModel {
     }
 
     handleStateSync(update: VDomBackendUpdate, idMap: Map<string, VDomElem>) {
-        if (update.statesync == null) {
-            return;
-        }
-        for (let sync of update.statesync) {
-            this.setAtomValue(sync.atom, sync.value, true, idMap);
+        if (update.fullupdate) {
+            if (update.statesync == null) {
+                this.atoms.clear();
+                return;
+            }
+
+            const sentAtoms = new Set<string>();
+            for (let sync of update.statesync) {
+                sentAtoms.add(sync.atom);
+                this.setAtomValue(sync.atom, sync.value, true, idMap);
+            }
+
+            const atomsToRemove: string[] = [];
+            for (let atomName of this.atoms.keys()) {
+                if (!sentAtoms.has(atomName)) {
+                    atomsToRemove.push(atomName);
+                }
+            }
+
+            for (let atomName of atomsToRemove) {
+                this.atoms.delete(atomName);
+            }
+        } else {
+            if (update.statesync == null) {
+                return;
+            }
+            for (let sync of update.statesync) {
+                this.setAtomValue(sync.atom, sync.value, true, idMap);
+            }
         }
     }
 
@@ -562,13 +585,11 @@ export class TsunamiModel {
             return;
         }
 
-        // Check if serverId is changing and trigger remount if needed
+        // Check if serverId is changing and reset if needed
         if (this.serverId != null && this.serverId !== update.serverid) {
-            // Server ID changed - need to remount the entire app
-            if (this.remountCallback) {
-                this.remountCallback();
-            }
-            return;
+            // Server ID changed - reset the model state
+            this.reset();
+            this.setupServerEventSource();
         }
 
         this.serverId = update.serverid;

tsunami/frontend/src/types/vdom.d.ts

@@ -22,6 +22,7 @@ type VDomBackendUpdate = {
     serverid: string;
     opts?: VDomBackendOpts;
     haswork?: boolean;
+    fullupdate?: boolean;
     renderupdates?: VDomRenderUpdate[];
     transferelems?: VDomTransferElem[];
     statesync?: VDomStateSync[];

tsunami/rpctypes/protocoltypes.go

@@ -51,6 +51,7 @@ type VDomBackendUpdate struct {
 	ServerId      string                  `json:"serverid"`
 	Opts          *VDomBackendOpts        `json:"opts,omitempty"`
 	HasWork       bool                    `json:"haswork,omitempty"`
+	FullUpdate    bool                    `json:"fullupdate,omitempty"`
 	RenderUpdates []VDomRenderUpdate      `json:"renderupdates,omitempty"`
 	TransferElems []VDomTransferElem      `json:"transferelems,omitempty"`
 	StateSync     []VDomStateSync         `json:"statesync,omitempty"`