update AppOpts, simplify, working on build and tw.css...

Author: sawka

tsunami/app/tsunamiapp.go

@@ -27,6 +27,7 @@ import (
 
 const TsunamiListenAddrEnvVar = "TSUNAMI_LISTENADDR"
 const DefaultListenAddr = "localhost:0"
+const DefaultComponentName = "App"
 
 type SSEvent struct {
 	Event string
@@ -37,8 +38,6 @@ type AppOpts struct {
 	Title                string // window title
 	CloseOnCtrlC         bool
 	GlobalKeyboardEvents bool
-	GlobalStyles         []byte
-	RootComponentName    string // defaults to "App"
 }
 
 type Client struct {
@@ -47,11 +46,11 @@ type Client struct {
 	Root               *comp.RootElem
 	RootElem           *vdom.VDomElem
 	CurrentClientId    string
+	ServerId           string
 	IsDone             bool
 	DoneReason         string
 	DoneCh             chan struct{}
 	SSEventCh          chan SSEvent
-	Opts               rpctypes.VDomBackendOpts
 	GlobalEventHandler func(client *Client, event vdom.VDomEvent)
 	GlobalStylesOption *FileHandlerOption
 	UrlHandlerMux      *mux.Router
@@ -65,6 +64,8 @@ func MakeClient(appOpts AppOpts) *Client {
 		DoneCh:        make(chan struct{}),
 		SSEventCh:     make(chan SSEvent, 100),
 		UrlHandlerMux: mux.NewRouter(),
+		ServerId:      uuid.New().String(),
+		RootElem:      vdom.E(DefaultComponentName),
 	}
 	client.SetAppOpts(appOpts)
 	return client
@@ -114,27 +115,27 @@ func (c *Client) SetAppOpts(appOpts AppOpts) {
 	c.Lock.Lock()
 	defer c.Lock.Unlock()
 
-	if appOpts.RootComponentName == "" {
-		appOpts.RootComponentName = "App"
-	}
-
 	c.AppOpts = appOpts
+}
+
+func getFaviconPath() string {
+	if staticFS != nil {
+		faviconNames := []string{"favicon.ico", "favicon.png", "favicon.svg", "favicon.gif", "favicon.jpg"}
+		for _, name := range faviconNames {
+			if _, err := staticFS.Open(name); err == nil {
+				return "/static/" + name
+			}
+		}
+	}
+	return "/wave-logo-256.png"
+}
 
-	// Update the VDomBackendOpts
-	c.Opts.CloseOnCtrlC = appOpts.CloseOnCtrlC
-	c.Opts.GlobalKeyboardEvents = appOpts.GlobalKeyboardEvents
-	c.Opts.Title = appOpts.Title
-
-	// Update RootElem if component name changed
-	c.RootElem = vdom.E(appOpts.RootComponentName)
-
-	// Update global styles
-	if len(appOpts.GlobalStyles) > 0 {
-		c.Opts.GlobalStyles = true
-		c.GlobalStylesOption = &FileHandlerOption{Data: appOpts.GlobalStyles, MimeType: "text/css"}
-	} else {
-		c.Opts.GlobalStyles = false
-		c.GlobalStylesOption = nil
+func (c *Client) makeBackendOpts() *rpctypes.VDomBackendOpts {
+	return &rpctypes.VDomBackendOpts{
+		Title:                c.AppOpts.Title,
+		CloseOnCtrlC:         c.AppOpts.CloseOnCtrlC,
+		GlobalKeyboardEvents: c.AppOpts.GlobalKeyboardEvents,
+		FaviconPath:          getFaviconPath(),
 	}
 }
 
@@ -275,10 +276,11 @@ func (c *Client) fullRender() (*rpctypes.VDomBackendUpdate, error) {
 		renderedVDom = makeNullVDom()
 	}
 	return &rpctypes.VDomBackendUpdate{
-		Type:    "backendupdate",
-		Ts:      time.Now().UnixMilli(),
-		HasWork: len(c.Root.EffectWorkQueue) > 0,
-		Opts:    &c.Opts,
+		Type:     "backendupdate",
+		Ts:       time.Now().UnixMilli(),
+		ServerId: c.ServerId,
+		HasWork:  len(c.Root.EffectWorkQueue) > 0,
+		Opts:     c.makeBackendOpts(),
 		RenderUpdates: []rpctypes.VDomRenderUpdate{
 			{UpdateType: "root", VDom: renderedVDom},
 		},
@@ -295,8 +297,9 @@ func (c *Client) incrementalRender() (*rpctypes.VDomBackendUpdate, error) {
 		renderedVDom = makeNullVDom()
 	}
 	return &rpctypes.VDomBackendUpdate{
-		Type: "backendupdate",
-		Ts:   time.Now().UnixMilli(),
+		Type:     "backendupdate",
+		Ts:       time.Now().UnixMilli(),
+		ServerId: c.ServerId,
 		RenderUpdates: []rpctypes.VDomRenderUpdate{
 			{UpdateType: "root", VDom: renderedVDom},
 		},

tsunami/build/build.go

@@ -4,7 +4,10 @@ import (
 	"fmt"
 	"log"
 	"os"
+	"os/exec"
 	"path/filepath"
+	"regexp"
+	"strconv"
 	"strings"
 )
 
@@ -13,6 +16,81 @@ type BuildOpts struct {
 	Verbose bool
 }
 
+func verifyEnvironment(verbose bool) error {
+	// Check if go is in PATH
+	goPath, err := exec.LookPath("go")
+	if err != nil {
+		return fmt.Errorf("go command not found in PATH: %w", err)
+	}
+
+	// Run go version command
+	cmd := exec.Command(goPath, "version")
+	output, err := cmd.Output()
+	if err != nil {
+		return fmt.Errorf("failed to run 'go version': %w", err)
+	}
+
+	// Parse go version output and check for 1.21+
+	versionStr := strings.TrimSpace(string(output))
+	if verbose {
+		log.Printf("Found %s", versionStr)
+	}
+
+	// Extract version like "go1.21.0" from output
+	versionRegex := regexp.MustCompile(`go1\.(\d+)`)
+	matches := versionRegex.FindStringSubmatch(versionStr)
+	if len(matches) < 2 {
+		return fmt.Errorf("unable to parse go version from: %s", versionStr)
+	}
+
+	minor, err := strconv.Atoi(matches[1])
+	if err != nil || minor < 21 {
+		return fmt.Errorf("go version 1.21 or higher required, found: %s", versionStr)
+	}
+
+	// Check if npx is in PATH
+	_, err = exec.LookPath("npx")
+	if err != nil {
+		return fmt.Errorf("npx command not found in PATH: %w", err)
+	}
+
+	if verbose {
+		log.Printf("Found npx in PATH")
+	}
+
+	// Check Tailwind CSS version
+	tailwindCmd := exec.Command("npx", "@tailwindcss/cli")
+	tailwindOutput, err := tailwindCmd.CombinedOutput()
+	if err != nil {
+		return fmt.Errorf("failed to run 'npx @tailwindcss/cli': %w", err)
+	}
+
+	tailwindStr := strings.TrimSpace(string(tailwindOutput))
+	lines := strings.Split(tailwindStr, "\n")
+	if len(lines) == 0 {
+		return fmt.Errorf("no output from tailwindcss command")
+	}
+
+	firstLine := lines[0]
+	if verbose {
+		log.Printf("Found %s", firstLine)
+	}
+
+	// Check for v4 (format: "≈ tailwindcss v4.1.12")
+	tailwindRegex := regexp.MustCompile(`tailwindcss v(\d+)`)
+	matches = tailwindRegex.FindStringSubmatch(firstLine)
+	if len(matches) < 2 {
+		return fmt.Errorf("unable to parse tailwindcss version from: %s", firstLine)
+	}
+
+	majorVersion, err := strconv.Atoi(matches[1])
+	if err != nil || majorVersion != 4 {
+		return fmt.Errorf("tailwindcss v4 required, found: %s", firstLine)
+	}
+
+	return nil
+}
+
 func verifyTsunamiDir(dir string) error {
 	if dir == "" {
 		return fmt.Errorf("directory path cannot be empty")
@@ -53,6 +131,10 @@ func verifyTsunamiDir(dir string) error {
 }
 
 func TsunamiBuild(opts BuildOpts) error {
+	if err := verifyEnvironment(opts.Verbose); err != nil {
+		return err
+	}
+
 	if err := verifyTsunamiDir(opts.Dir); err != nil {
 		return err
 	}

tsunami/demo/todo/main-todo.go tsunami/demo/todo/app.gotsunami/demo/todo/main-todo.go renamed to tsunami/demo/todo/app.go

@@ -9,14 +9,10 @@ import (
 	"github.com/wavetermdev/waveterm/tsunami/vdom"
 )
 
-//go:embed tw.css
-var styleCSS []byte
-
 func init() {
 	// Set up the default client with embedded Tailwind styles and ctrl-c handling
 	app.SetAppOpts(app.AppOpts{
 		CloseOnCtrlC: true,
-		GlobalStyles: styleCSS,
 		Title:        "Todo App (Tsunami Demo)",
 	})
 }

tsunami/frontend/index.html

@@ -2,11 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tsunami App</title>
   </head>
-  <body>
+  <body className="bg-background text-primary">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

tsunami/frontend/src/app.tsx

@@ -1,15 +1,34 @@
 // 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";
 
-const globalModel = new TsunamiModel();
-
 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]);
+
     return (
         <div className="min-h-screen bg-background text-foreground">
-            <VDomView model={globalModel} />
+            <VDomView key={remountKey} model={model} />
         </div>
     );
 }

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

@@ -83,7 +83,9 @@ function annotateEvent(event: VDomEvent, propName: string, reactEvent: React.Syn
 
 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
@@ -108,6 +110,7 @@ export class TsunamiModel {
     globalVersion: jotai.PrimitiveAtom<number> = jotai.atom(0);
     hasBackendWork: boolean = false;
     noPadding: jotai.PrimitiveAtom<boolean>;
+    cachedFaviconPath: string | null = null;
 
     constructor() {
         this.clientId = getOrCreateClientId();
@@ -531,10 +534,46 @@ export class TsunamiModel {
         }
     }
 
+    updateFavicon(faviconPath: string | null) {
+        if (faviconPath === this.cachedFaviconPath) {
+            return;
+        }
+        
+        this.cachedFaviconPath = faviconPath;
+        
+        let existingFavicon = document.querySelector('link[rel="icon"]') as HTMLLinkElement;
+        
+        if (faviconPath) {
+            if (existingFavicon) {
+                existingFavicon.href = faviconPath;
+            } else {
+                const link = document.createElement('link');
+                link.rel = 'icon';
+                link.href = faviconPath;
+                document.head.appendChild(link);
+            }
+        } else {
+            if (existingFavicon) {
+                existingFavicon.remove();
+            }
+        }
+    }
+
     handleBackendUpdate(update: VDomBackendUpdate) {
         if (update == null) {
             return;
         }
+        
+        // Check if serverId is changing and trigger remount 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;
+        }
+        
+        this.serverId = update.serverid;
         getDefaultStore().set(this.contextActive, true);
         const idMap = new Map<string, VDomElem>();
         const vdomRoot = getDefaultStore().get(this.vdomRoot);
@@ -543,6 +582,9 @@ export class TsunamiModel {
             if (update.opts.title && update.opts.title.trim() !== "") {
                 document.title = update.opts.title;
             }
+            if (update.opts.faviconpath !== undefined) {
+                this.updateFavicon(update.opts.faviconpath);
+            }
         }
         makeVDomIdMap(vdomRoot, idMap);
         this.handleRenderUpdates(update, idMap);

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

@@ -12,14 +12,15 @@ type VDomAsyncInitiationRequest = {
 type VDomBackendOpts = {
     closeonctrlc?: boolean;
     globalkeyboardevents?: boolean;
-    globalstyles?: boolean;
     title?: string;
+    faviconpath?: string;
 };
 
 // vdom.VDomBackendUpdate
 type VDomBackendUpdate = {
     type: "backendupdate";
     ts: number;
+    serverid: string;
     opts?: VDomBackendOpts;
     haswork?: boolean;
     renderupdates?: VDomRenderUpdate[];