Promote dev to master: Mail app, Browser redesign, optional Store apps, agent screenshot, canvas + restart fixes

desktop/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-switch": "^1.3.0",
     "@radix-ui/react-tabs": "^1.1.14",
     "@radix-ui/react-tooltip": "^1.2.9",
+    "@tldraw/assets": "4.5.12",
     "@tldraw/tldraw": "^4.5.10",
     "@tsparticles/engine": "^3.9.1",
     "@tsparticles/react": "^3.0.0",
@@ -42,6 +43,7 @@
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.500.0",
     "mathjs": "^15.2.0",
+    "modern-screenshot": "^4.7.0",
     "motion": "^12.40.0",
     "plyr": "^3.8.4",
     "react": "^19.2.7",

desktop/src/App.tsx

@@ -24,6 +24,7 @@ import { LoginScreen } from "@/components/LoginScreen";
 import { NotificationToasts } from "@/components/NotificationToast";
 import { NotificationCentre } from "@/components/NotificationCentre";
 import { useNotificationStore } from "@/stores/notification-store";
+import { useServerNotifications } from "@/hooks/use-server-notifications";
 import { TaosAssistantPanel } from "@/components/TaosAssistantPanel";
 import { useTaosAgentStore } from "@/stores/taos-agent-store";
 import { InstallPromptBanner } from "@/shell/InstallPromptBanner";
@@ -189,6 +190,10 @@ export function App() {
 
   useSessionPersistence();
 
+  // Sync the persistent backend notification feed into the bell (desktop and
+  // mobile both render NotificationCentre under this component).
+  useServerNotifications();
+
   // Re-apply the persisted active theme on app boot so a reload keeps the
   // user's chosen theme app-wide (not only when Settings is opened).
   useEffect(() => {

desktop/src/apps/BrowserApp/AddressBar.tsx

@@ -266,7 +266,7 @@ export function AddressBar({ windowId }: AddressBarProps) {
             setSelectedIndex((i) => Math.max(i - 1, -1));
           }
         }}
-        className={`w-full bg-shell-bg-deep text-shell-text px-2 py-0.5 rounded text-xs border border-shell-border-subtle focus:border-accent focus:outline-none ${
+        className={`w-full bg-transparent text-[13px] text-shell-text placeholder:text-shell-text-tertiary focus:outline-none ${
           activeTab?.readerAvailable && activeTab.url !== "about:blank"
             ? "pr-14"
             : activeTab?.readerAvailable || activeTab?.url !== "about:blank"

desktop/src/apps/BrowserApp/AgentPresencePill.test.tsx

@@ -134,7 +134,7 @@ describe("AgentPresencePill", () => {
     );
     await waitFor(() => {
       const btn = screen.getByRole("button");
-      expect(btn.className).toContain("bg-shell-hover");
+      expect(btn.className).toContain("bg-accent-glow");
     });
   });
 

desktop/src/apps/BrowserApp/AgentPresencePill.tsx

@@ -125,8 +125,8 @@ export function AgentPresencePill({
       aria-expanded={panelIsOpen}
       onClick={() => togglePanel(windowId, tabId, firstAgentId)}
       className={[
-        "flex items-center relative p-0.5 rounded-full border border-shell-border-subtle",
-        panelIsOpen ? "bg-shell-hover" : "bg-shell-bg-deep hover:bg-shell-hover",
+        "flex items-center relative h-[32px] px-1.5 rounded-full border border-accent-line transition-colors",
+        panelIsOpen ? "bg-accent-glow" : "bg-accent-soft hover:bg-accent-glow",
       ].join(" ")}
     >
       {/* Stacked avatars */}

desktop/src/apps/BrowserApp/BrowserApp.tsx

@@ -1,14 +1,16 @@
 /**
  * BrowserApp v2 — top-level container.
  *
- * Mounted by WindowContent for each browser window. Composes:
- *   - Chrome      (browser-specific nav row + profile chip)
- *   - TabStrip    (compact tab strip with embedded AddressBar in active tab)
- *   - AddressBar  (URL input + suggest popover) — for now rendered ABOVE
- *                 TabStrip; PR 5 may move it inside the active tab per
- *                 the Q8 layout A "compact unified bar" mockup.
+ * Mounted by WindowContent for each browser window. Composes (top to bottom):
+ *   - TabStrip    (tab strip + Proxy/Streamed engine toggle)
+ *   - Chrome      (toolbar: nav buttons, pill omnibox with AddressBar, agent
+ *                  presence pill, settings, profile chip)
+ *   - BookmarksBar
  *   - TabRenderer (iframe pool + discard scheduler)
  *
+ * On mobile, a single bottom bar hosts the window switcher, the AddressBar
+ * omnibox, and the tab overview.
+ *
  * On mount, auto-creates the window entry in browser-store with the
  * default profile if it doesn't exist. Idempotent — preserves any
  * existing entry (e.g. restored by useSessionPersistence on app boot).
@@ -119,21 +121,23 @@ export function BrowserApp({ windowId }: BrowserAppProps) {
           )}
         </div>
 
-        <div className="flex items-center gap-1 px-2 py-1 bg-shell-surface border-t border-shell-border-subtle">
+        <div className="flex items-center gap-1 px-2 py-1 bg-shell-surface border-t border-shell-border">
           <button
             type="button"
             aria-label="Browser windows"
             onClick={() => setWindowChooserOpen(true)}
-            className="p-1.5 rounded hover:bg-shell-hover"
+            className="p-1.5 rounded hover:bg-white/[0.06]"
           >
             <Layers size={14} />
           </button>
-          <AddressBar windowId={windowId} />
+          <div className="flex flex-1 min-w-0 items-center h-9 px-3 rounded-full bg-shell-bg-deep border border-shell-border focus-within:border-accent/40">
+            <AddressBar windowId={windowId} />
+          </div>
           <button
             type="button"
             aria-label="Tab overview"
             onClick={() => setTabOverviewOpen(true)}
-            className="p-1.5 rounded hover:bg-shell-hover"
+            className="p-1.5 rounded hover:bg-white/[0.06]"
           >
             <ListChecks size={14} />
           </button>
@@ -145,12 +149,9 @@ export function BrowserApp({ windowId }: BrowserAppProps) {
 
   return (
     <div className="relative flex flex-col h-full bg-shell-bg overflow-hidden">
+      <TabStrip windowId={windowId} />
       <Chrome windowId={windowId} />
-      <div className="flex items-center gap-1 px-2 py-1 bg-shell-surface border-b border-shell-border-subtle">
-        <AddressBar windowId={windowId} />
-      </div>
       <BookmarksBar windowId={windowId} profileId={win.profileId} />
-      <TabStrip windowId={windowId} />
       <TabRenderer windowId={windowId} />
       {findOpen && (
         <FindInPage

desktop/src/apps/BrowserApp/BrowserModeToggle.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { BrowserModeToggle } from "./BrowserModeToggle";
+import { useBrowserStore } from "@/stores/browser-store";
+
+const originalFetch = global.fetch;
+const WIN_ID = "win-1";
+
+function activeTabId() {
+  return useBrowserStore.getState().getWindow(WIN_ID)!.activeTabId;
+}
+
+beforeEach(() => {
+  useBrowserStore.setState({ windows: {} });
+  useBrowserStore.getState().createWindow(WIN_ID, "personal");
+  const tabId = activeTabId();
+  useBrowserStore.getState().navigateTab(WIN_ID, tabId, "https://example.com/");
+});
+
+afterEach(() => {
+  global.fetch = originalFetch;
+  vi.restoreAllMocks();
+  cleanup();
+});
+
+describe("BrowserModeToggle - segmented engine control", () => {
+  it("renders Proxy and Streamed radios with Proxy selected by default", () => {
+    render(<BrowserModeToggle windowId={WIN_ID} />);
+    const proxy = screen.getByRole("radio", { name: /proxy browser/i });
+    const streamed = screen.getByRole("radio", { name: /streamed browser/i });
+    expect(proxy.getAttribute("aria-checked")).toBe("true");
+    expect(streamed.getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("marks Streamed selected when the active tab has a liveSession", () => {
+    useBrowserStore.getState().setTabLiveSession(WIN_ID, activeTabId(), {
+      nekoUrl: "http://neko.local:8080/room",
+      streamToken: "tok-1",
+    });
+    render(<BrowserModeToggle windowId={WIN_ID} />);
+    expect(
+      screen.getByRole("radio", { name: /streamed browser/i }).getAttribute("aria-checked"),
+    ).toBe("true");
+  });
+
+  it("clicking Streamed posts a session and sets liveSession on a running response", async () => {
+    global.fetch = vi.fn().mockResolvedValueOnce({
+      ok: true,
+      status: 201,
+      json: async () => ({
+        session: {
+          id: "sess-1",
+          status: "running",
+          neko_url: "http://neko.local:8080/room",
+          stream_token: "tok-xyz",
+        },
+      }),
+    } as Response);
+
+    const tabId = activeTabId();
+    render(<BrowserModeToggle windowId={WIN_ID} />);
+    fireEvent.click(screen.getByRole("radio", { name: /streamed browser/i }));
+
+    await waitFor(() => {
+      const tab = useBrowserStore
+        .getState()
+        .getWindow(WIN_ID)!
+        .tabs.find((t) => t.id === tabId);
+      expect(tab?.liveSession).toEqual({
+        nekoUrl: "http://neko.local:8080/room",
+        streamToken: "tok-xyz",
+      });
+    });
+  });
+
+  it("clicking Proxy clears an existing liveSession", () => {
+    const tabId = activeTabId();
+    useBrowserStore.getState().setTabLiveSession(WIN_ID, tabId, {
+      nekoUrl: "http://neko.local:8080/room",
+      streamToken: "tok-1",
+    });
+    render(<BrowserModeToggle windowId={WIN_ID} />);
+    fireEvent.click(screen.getByRole("radio", { name: /proxy browser/i }));
+    const tab = useBrowserStore
+      .getState()
+      .getWindow(WIN_ID)!
+      .tabs.find((t) => t.id === tabId);
+    expect(tab?.liveSession).toBeUndefined();
+  });
+
+  it("shows a gate hint when the host has no capable node (409)", async () => {
+    global.fetch = vi.fn().mockResolvedValueOnce({
+      ok: false,
+      status: 409,
+      json: async () => ({ error: "no_capable_node" }),
+    } as Response);
+
+    render(<BrowserModeToggle windowId={WIN_ID} />);
+    fireEvent.click(screen.getByRole("radio", { name: /streamed browser/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert").textContent).toMatch(
+        /streamed browser needs a more capable device/i,
+      );
+    });
+  });
+});