big simplifications to the preview mocks for rendering blocks (#3082)

sawka · web-flow · commit 4ee003aeebc0 · 2026-03-18T18:49:36.000-07:00
diff --git a/.kilocode/skills/create-view/SKILL.md b/.kilocode/skills/create-view/SKILL.md
@@ -110,7 +110,8 @@ Create a new file for your view model (e.g., `frontend/app/view/myview/myview-mo
 
 ```typescript
 import { BlockNodeModel } from "@/app/block/blocktypes";
-import { WOS, globalStore, useBlockAtom } from "@/store/global";
+import { globalStore } from "@/app/store/jotaiStore";
+import { WOS, useBlockAtom } from "@/store/global";
 import * as jotai from "jotai";
 import { MyView } from "./myview";
 
diff --git a/aiprompts/newview.md b/aiprompts/newview.md
@@ -104,7 +104,8 @@ Create a new file for your view model (e.g., `frontend/app/view/myview/myview-mo
 
 ```typescript
 import { BlockNodeModel } from "@/app/block/blocktypes";
-import { WOS, globalStore, useBlockAtom } from "@/store/global";
+import { globalStore } from "@/app/store/jotaiStore";
+import { WOS, useBlockAtom } from "@/store/global";
 import * as jotai from "jotai";
 import { MyView } from "./myview";
 
diff --git a/frontend/app/app.tsx b/frontend/app/app.tsx
@@ -9,13 +9,14 @@ import {
 } from "@/app/store/badge";
 import { ClientModel } from "@/app/store/client-model";
 import { GlobalModel } from "@/app/store/global-model";
+import { globalStore } from "@/app/store/jotaiStore";
 import { getTabModelByTabId, TabModelContext } from "@/app/store/tab-model";
 import { WaveEnvContext } from "@/app/waveenv/waveenv";
 import { makeWaveEnvImpl } from "@/app/waveenv/waveenvimpl";
 import { Workspace } from "@/app/workspace/workspace";
 import { getLayoutModelForStaticTab } from "@/layout/index";
 import { ContextMenuModel } from "@/store/contextmenu";
-import { atoms, createBlock, getSettingsPrefixAtom, globalStore } from "@/store/global";
+import { atoms, createBlock, getSettingsPrefixAtom } from "@/store/global";
 import { appHandleKeyDown, keyboardMouseDownHandler } from "@/store/keymodel";
 import { getElemAsStr } from "@/util/focusutil";
 import * as keyutil from "@/util/keyutil";
diff --git a/frontend/app/modals/modalsrenderer.tsx b/frontend/app/modals/modalsrenderer.tsx
@@ -5,7 +5,8 @@ import { NewInstallOnboardingModal } from "@/app/onboarding/onboarding";
 import { CurrentOnboardingVersion } from "@/app/onboarding/onboarding-common";
 import { UpgradeOnboardingModal } from "@/app/onboarding/onboarding-upgrade";
 import { ClientModel } from "@/app/store/client-model";
-import { atoms, globalPrimaryTabStartup, globalStore } from "@/store/global";
+import { globalStore } from "@/app/store/jotaiStore";
+import { atoms, globalPrimaryTabStartup } from "@/store/global";
 import { modalsModel } from "@/store/modalmodel";
 import * as jotai from "jotai";
 import { useEffect } from "react";
diff --git a/frontend/app/view/aifilediff/aifilediff.tsx b/frontend/app/view/aifilediff/aifilediff.tsx
@@ -6,7 +6,7 @@ import type { TabModel } from "@/app/store/tab-model";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { DiffViewer } from "@/app/view/codeeditor/diffviewer";
 import type { WaveEnv, WaveEnvSubset } from "@/app/waveenv/waveenv";
-import { globalStore, WOS } from "@/store/global";
+import { globalStore } from "@/store/jotaiStore";
 import { base64ToString } from "@/util/util";
 import * as jotai from "jotai";
 import { useEffect } from "react";
diff --git a/frontend/app/view/preview/preview-edit.tsx b/frontend/app/view/preview/preview-edit.tsx
@@ -1,14 +1,14 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { globalStore } from "@/app/store/jotaiStore";
 import { tryReinjectKey } from "@/app/store/keymodel";
 import { CodeEditor } from "@/app/view/codeeditor/codeeditor";
-import { globalStore } from "@/store/global";
 import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
 import { fireAndForget } from "@/util/util";
 import { useAtomValue, useSetAtom } from "jotai";
-import * as monaco from "monaco-editor";
 import type * as MonacoTypes from "monaco-editor";
+import * as monaco from "monaco-editor";
 import { useEffect } from "react";
 import type { SpecializedViewProps } from "./preview";
 
diff --git a/frontend/app/view/preview/preview-markdown.tsx b/frontend/app/view/preview/preview-markdown.tsx
@@ -1,8 +1,9 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { globalStore } from "@/app/store/jotaiStore";
 import { Markdown } from "@/element/markdown";
-import { getOverrideConfigAtom, globalStore } from "@/store/global";
+import { getOverrideConfigAtom } from "@/store/global";
 import { useAtomValue } from "jotai";
 import { useEffect, useMemo } from "react";
 import type { SpecializedViewProps } from "./preview";
diff --git a/frontend/app/view/preview/preview-model.tsx b/frontend/app/view/preview/preview-model.tsx
@@ -3,9 +3,10 @@
 
 import { BlockNodeModel } from "@/app/block/blocktypes";
 import { ContextMenuModel } from "@/app/store/contextmenu";
+import { globalStore } from "@/app/store/jotaiStore";
 import type { TabModel } from "@/app/store/tab-model";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
-import { getOverrideConfigAtom, globalStore, refocusNode } from "@/store/global";
+import { getOverrideConfigAtom, refocusNode } from "@/store/global";
 import * as WOS from "@/store/wos";
 import { goHistory, goHistoryBack, goHistoryForward } from "@/util/historyutil";
 import { checkKeyPressed } from "@/util/keyutil";
diff --git a/frontend/app/view/preview/preview-streaming.tsx b/frontend/app/view/preview/preview-streaming.tsx
@@ -3,7 +3,7 @@
 
 import { Button } from "@/app/element/button";
 import { CenteredDiv } from "@/app/element/quickelems";
-import { globalStore } from "@/store/global";
+import { globalStore } from "@/app/store/jotaiStore";
 import { getWebServerEndpoint } from "@/util/endpoints";
 import { formatRemoteUri } from "@/util/waveutil";
 import { useAtomValue } from "jotai";
diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { CenteredDiv } from "@/app/element/quickelems";
+import { globalStore } from "@/app/store/jotaiStore";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { BlockHeaderSuggestionControl } from "@/app/suggestion/suggestion";
 import { useWaveEnv } from "@/app/waveenv/waveenv";
-import { globalStore } from "@/store/global";
 import { isBlank, makeConnRoute } from "@/util/util";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { memo, useEffect } from "react";
diff --git a/frontend/app/view/term/term.tsx b/frontend/app/view/term/term.tsx
@@ -6,12 +6,13 @@ import type { BlockNodeModel } from "@/app/block/blocktypes";
 import { NullErrorBoundary } from "@/app/element/errorboundary";
 import { Search, useSearch } from "@/app/element/search";
 import { ContextMenuModel } from "@/app/store/contextmenu";
+import { globalStore } from "@/app/store/jotaiStore";
 import { useTabModel } from "@/app/store/tab-model";
 import { waveEventSubscribeSingle } from "@/app/store/wps";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import type { TermViewModel } from "@/app/view/term/term-model";
-import { atoms, getOverrideConfigAtom, getSettingsPrefixAtom, globalStore, WOS } from "@/store/global";
+import { atoms, getOverrideConfigAtom, getSettingsPrefixAtom, WOS } from "@/store/global";
 import { fireAndForget, useAtomValueSafe } from "@/util/util";
 import { computeBgStyleFromMeta } from "@/util/waveutil";
 import { ISearchOptions } from "@xterm/addon-search";
diff --git a/frontend/app/view/waveai/waveai.tsx b/frontend/app/view/waveai/waveai.tsx
@@ -6,13 +6,14 @@ import { Button } from "@/app/element/button";
 import { Markdown } from "@/app/element/markdown";
 import { TypingIndicator } from "@/app/element/typingindicator";
 import { ClientModel } from "@/app/store/client-model";
+import { globalStore } from "@/app/store/jotaiStore";
 import type { TabModel } from "@/app/store/tab-model";
 import { RpcResponseHelper, WshClient } from "@/app/store/wshclient";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { makeFeBlockRouteId } from "@/app/store/wshrouter";
 import { DefaultRouter, TabRpcClient } from "@/app/store/wshrpcutil";
 import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
-import { atoms, createBlock, fetchWaveFile, getApi, globalStore, WOS } from "@/store/global";
+import { atoms, createBlock, fetchWaveFile, getApi, WOS } from "@/store/global";
 import { BlockService, ObjectService } from "@/store/services";
 import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
 import { fireAndForget, isBlank, makeIconClass, mergeMeta } from "@/util/util";
diff --git a/frontend/app/view/webview/webview.tsx b/frontend/app/view/webview/webview.tsx
@@ -3,6 +3,7 @@
 
 import { BlockNodeModel } from "@/app/block/blocktypes";
 import { Search, useSearch } from "@/app/element/search";
+import { globalStore } from "@/app/store/jotaiStore";
 import { getSimpleControlShiftAtom } from "@/app/store/keymodel";
 import type { TabModel } from "@/app/store/tab-model";
 import { makeORef } from "@/app/store/wos";
@@ -14,7 +15,7 @@ import {
 } from "@/app/suggestion/suggestion";
 import { MockBoundary } from "@/app/waveenv/mockboundary";
 import { useWaveEnv } from "@/app/waveenv/waveenv";
-import { globalStore, openLink } from "@/store/global";
+import { openLink } from "@/store/global";
 import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
 import { fireAndForget, useAtomValueSafe } from "@/util/util";
 import clsx from "clsx";
diff --git a/frontend/builder/app-selection-modal.tsx b/frontend/builder/app-selection-modal.tsx
@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FlexiModal } from "@/app/modals/modal";
+import { globalStore } from "@/app/store/jotaiStore";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
-import { atoms, getApi, globalStore } from "@/store/global";
+import { atoms, getApi } from "@/store/global";
 import * as WOS from "@/store/wos";
 import { formatRelativeTime } from "@/util/util";
 import { useEffect, useState } from "react";
diff --git a/frontend/builder/builder-app.tsx b/frontend/builder/builder-app.tsx
@@ -1,10 +1,11 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { ModalsRenderer } from "@/app/modals/modalsrenderer";
+import { globalStore } from "@/app/store/jotaiStore";
 import { AppSelectionModal } from "@/builder/app-selection-modal";
 import { BuilderWorkspace } from "@/builder/builder-workspace";
-import { ModalsRenderer } from "@/app/modals/modalsrenderer";
-import { atoms, globalStore, isDev } from "@/store/global";
+import { atoms, isDev } from "@/store/global";
 import { appHandleKeyDown } from "@/store/keymodel";
 import * as keyutil from "@/util/keyutil";
 import { isBlank } from "@/util/util";
diff --git a/frontend/preview/mock/mock-node-model.ts b/frontend/preview/mock/mock-node-model.ts
@@ -0,0 +1,45 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { globalStore } from "@/app/store/jotaiStore";
+import type { NodeModel } from "@/layout/index";
+import { atom } from "jotai";
+
+export type MockNodeModelOpts = {
+    nodeId: string;
+    blockId: string;
+    innerRect?: { width: string; height: string };
+    numLeafs?: number;
+};
+
+export function makeMockNodeModel(opts: MockNodeModelOpts): NodeModel {
+    const isFocusedAtom = atom(true);
+    const isMagnifiedAtom = atom(false);
+
+    return {
+        additionalProps: atom({} as any),
+        innerRect: atom(opts.innerRect ?? { width: "1000px", height: "640px" }),
+        blockNum: atom(1),
+        numLeafs: atom(opts.numLeafs ?? 1),
+        nodeId: opts.nodeId,
+        blockId: opts.blockId,
+        addEphemeralNodeToLayout: () => {},
+        animationTimeS: atom(0),
+        isResizing: atom(false),
+        isFocused: isFocusedAtom,
+        isMagnified: isMagnifiedAtom,
+        anyMagnified: atom((get) => get(isMagnifiedAtom)),
+        isEphemeral: atom(false),
+        ready: atom(true),
+        disablePointerEvents: atom(false),
+        toggleMagnify: () => {
+            globalStore.set(isMagnifiedAtom, !globalStore.get(isMagnifiedAtom));
+        },
+        focusNode: () => {
+            globalStore.set(isFocusedAtom, true);
+        },
+        onClose: () => {},
+        dragHandleRef: { current: null },
+        displayContainerRef: { current: null },
+    };
+}
diff --git a/frontend/preview/mock/mockwaveenv.ts b/frontend/preview/mock/mockwaveenv.ts
diff --git a/frontend/preview/mock/use-rpc-override.ts b/frontend/preview/mock/use-rpc-override.ts
diff --git a/frontend/preview/preview.tsx b/frontend/preview/preview.tsx
diff --git a/frontend/preview/previews/aifilediff.preview.tsx b/frontend/preview/previews/aifilediff.preview.tsx
diff --git a/frontend/preview/previews/sysinfo.preview.tsx b/frontend/preview/previews/sysinfo.preview.tsx
diff --git a/frontend/preview/previews/web.preview.tsx b/frontend/preview/previews/web.preview.tsx
