Add standalone preview for the aifilediff block view (#3063)

Copilot · sawka · web-flow · commit 10fdf42377ea · 2026-03-14T17:41:04.000-07:00
This adds a `frontend/preview` entry for `aifilediff.tsx`, following the same full-block preview pattern used by `sysinfo`. The preview renders the real block/view stack with mock Wave objects and a mocked diff RPC response so the file diff UI can be exercised in isolation. - **Preview wiring** - Added `frontend/preview/previews/aifilediff.preview.tsx` - Creates a mock workspace/tab/block for an `aifilediff` block - Renders the real `Block` component so header, sizing, and Monaco diff layout behave like an actual block view - **Mock diff data** - Added `frontend/preview/previews/aifilediff.preview-util.ts` - Provides default original/modified file contents and a helper to build the mock `WaveAIGetToolDiffCommand` response - Uses a realistic file path and code sample so the diff viewer is immediately useful in preview mode - **View integration cleanup** - Updated `frontend/app/view/aifilediff/aifilediff.tsx` to read RPC/WOS from the injected `waveEnv` - This keeps the view compatible with the preview server’s mock environment instead of depending on the global runtime path - **Focused preview coverage** - Added `frontend/preview/previews/aifilediff.preview.test.ts` - Covers the helper that encodes mock diff payloads consumed by the preview - **Example** ```tsx rpc: { WaveAIGetToolDiffCommand: async (_client, data) => { if ( data.chatid !== DefaultAiFileDiffChatId || data.toolcallid !== DefaultAiFileDiffToolCallId ) { return null; } return makeMockAiFileDiffResponse(); }, } ``` - **screenshot** ![aifilediff preview](https://github.com/user-attachments/assets/1957f76e-244e-4202-ad4e-181320d67f3a)  --- 🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. [Learn more about Advanced Security.](https://gh.io/cca-advanced-security) --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
diff --git a/frontend/app/view/aifilediff/aifilediff.tsx b/frontend/app/view/aifilediff/aifilediff.tsx
@@ -3,9 +3,9 @@
 
 import type { BlockNodeModel } from "@/app/block/blocktypes";
 import type { TabModel } from "@/app/store/tab-model";
-import { RpcApi } from "@/app/store/wshclientapi";
 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 { base64ToString } from "@/util/util";
 import * as jotai from "jotai";
@@ -17,10 +17,18 @@ type DiffData = {
     fileName: string;
 };
 
+export type AiFileDiffEnv = WaveEnvSubset<{
+    rpc: {
+        WaveAIGetToolDiffCommand: WaveEnv["rpc"]["WaveAIGetToolDiffCommand"];
+    };
+    wos: WaveEnv["wos"];
+}>;
+
 export class AiFileDiffViewModel implements ViewModel {
     blockId: string;
     nodeModel: BlockNodeModel;
     tabModel: TabModel;
+    env: AiFileDiffEnv;
     viewType = "aifilediff";
     blockAtom: jotai.Atom<Block>;
     diffDataAtom: jotai.PrimitiveAtom<DiffData | null>;
@@ -30,11 +38,12 @@ export class AiFileDiffViewModel implements ViewModel {
     viewName: jotai.Atom<string>;
     viewText: jotai.Atom<string>;
 
-    constructor({ blockId, nodeModel, tabModel }: ViewModelInitType) {
+    constructor({ blockId, nodeModel, tabModel, waveEnv }: ViewModelInitType) {
         this.blockId = blockId;
         this.nodeModel = nodeModel;
         this.tabModel = tabModel;
-        this.blockAtom = WOS.getWaveObjectAtom<Block>(`block:${blockId}`);
+        this.env = waveEnv as AiFileDiffEnv;
+        this.blockAtom = this.env.wos.getWaveObjectAtom<Block>(`block:${blockId}`);
         this.diffDataAtom = jotai.atom(null) as jotai.PrimitiveAtom<DiffData | null>;
         this.errorAtom = jotai.atom(null) as jotai.PrimitiveAtom<string | null>;
         this.loadingAtom = jotai.atom<boolean>(true);
@@ -76,7 +85,7 @@ function AiFileDiffView({ blockId, model }: ViewComponentProps<AiFileDiffViewMod
             }
 
             try {
-                const result = await RpcApi.WaveAIGetToolDiffCommand(TabRpcClient, {
+                const result = await model.env.rpc.WaveAIGetToolDiffCommand(TabRpcClient, {
                     chatid: chatId,
                     toolcallid: toolCallId,
                 });
diff --git a/frontend/preview/previews/aifilediff.preview-util.ts b/frontend/preview/previews/aifilediff.preview-util.ts
@@ -0,0 +1,37 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { stringToBase64 } from "@/util/util";
+
+export const DefaultAiFileDiffChatId = "preview-aifilediff-chat";
+export const DefaultAiFileDiffToolCallId = "preview-aifilediff-toolcall";
+export const DefaultAiFileDiffFileName = "src/lib/greeting.ts";
+
+export const DefaultAiFileDiffOriginal = `export function greet(name: string) {
+    return "Hello " + name;
+}
+
+export function greetAll(names: string[]) {
+    return names.map(greet).join("\\n");
+}
+`;
+
+export const DefaultAiFileDiffModified = `export function greet(name: string) {
+    const normalizedName = name.trim() || "friend";
+    return \`Hello, \${normalizedName}!\`;
+}
+
+export function greetAll(names: string[]) {
+    return names.map(greet).join("\\n");
+}
+`;
+
+export function makeMockAiFileDiffResponse(
+    original = DefaultAiFileDiffOriginal,
+    modified = DefaultAiFileDiffModified
+): CommandWaveAIGetToolDiffRtnData {
+    return {
+        originalcontents64: stringToBase64(original),
+        modifiedcontents64: stringToBase64(modified),
+    };
+}
diff --git a/frontend/preview/previews/aifilediff.preview.test.ts b/frontend/preview/previews/aifilediff.preview.test.ts
@@ -0,0 +1,26 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { base64ToString } from "@/util/util";
+import { describe, expect, it } from "vitest";
+import {
+    DefaultAiFileDiffModified,
+    DefaultAiFileDiffOriginal,
+    makeMockAiFileDiffResponse,
+} from "./aifilediff.preview-util";
+
+describe("aifilediff preview helpers", () => {
+    it("encodes the default diff content for the mock rpc response", () => {
+        const response = makeMockAiFileDiffResponse();
+
+        expect(base64ToString(response.originalcontents64)).toBe(DefaultAiFileDiffOriginal);
+        expect(base64ToString(response.modifiedcontents64)).toBe(DefaultAiFileDiffModified);
+    });
+
+    it("accepts custom original and modified content", () => {
+        const response = makeMockAiFileDiffResponse("before", "after");
+
+        expect(base64ToString(response.originalcontents64)).toBe("before");
+        expect(base64ToString(response.modifiedcontents64)).toBe("after");
+    });
+});
diff --git a/frontend/preview/previews/aifilediff.preview.tsx b/frontend/preview/previews/aifilediff.preview.tsx
@@ -0,0 +1,145 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Block } from "@/app/block/block";
+import { globalStore } from "@/app/store/jotaiStore";
+import { getTabModelByTabId, TabModelContext } from "@/app/store/tab-model";
+import { useWaveEnv, WaveEnvContext } from "@/app/waveenv/waveenv";
+import type { NodeModel } from "@/layout/index";
+import { atom } from "jotai";
+import * as React from "react";
+import { applyMockEnvOverrides, MockWaveEnv } from "../mock/mockwaveenv";
+import {
+    DefaultAiFileDiffChatId,
+    DefaultAiFileDiffFileName,
+    DefaultAiFileDiffToolCallId,
+    makeMockAiFileDiffResponse,
+} from "./aifilediff.preview-util";
+
+const PreviewWorkspaceId = "preview-aifilediff-workspace";
+const PreviewTabId = "preview-aifilediff-tab";
+const PreviewNodeId = "preview-aifilediff-node";
+const PreviewBlockId = "preview-aifilediff-block";
+
+function makeMockWorkspace(): Workspace {
+    return {
+        otype: "workspace",
+        oid: PreviewWorkspaceId,
+        version: 1,
+        name: "Preview Workspace",
+        tabids: [PreviewTabId],
+        activetabid: PreviewTabId,
+        meta: {},
+    } as Workspace;
+}
+
+function makeMockTab(): Tab {
+    return {
+        otype: "tab",
+        oid: PreviewTabId,
+        version: 1,
+        name: "AI File Diff Preview",
+        blockids: [PreviewBlockId],
+        meta: {},
+    } as Tab;
+}
+
+function makeMockBlock(): Block {
+    return {
+        otype: "block",
+        oid: PreviewBlockId,
+        version: 1,
+        meta: {
+            view: "aifilediff",
+            file: DefaultAiFileDiffFileName,
+            "aifilediff:chatid": DefaultAiFileDiffChatId,
+            "aifilediff:toolcallid": DefaultAiFileDiffToolCallId,
+        },
+    } as Block;
+}
+
+function makePreviewNodeModel(): NodeModel {
+    const isFocusedAtom = atom(true);
+    const isMagnifiedAtom = atom(false);
+
+    return {
+        additionalProps: atom({} as any),
+        innerRect: atom({ width: "1000px", height: "640px" }),
+        blockNum: atom(1),
+        numLeafs: atom(1),
+        nodeId: PreviewNodeId,
+        blockId: PreviewBlockId,
+        addEphemeralNodeToLayout: () => {},
+        animationTimeS: atom(0),
+        isResizing: atom(false),
+        isFocused: isFocusedAtom,
+        isMagnified: isMagnifiedAtom,
+        anyMagnified: atom(false),
+        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 },
+    };
+}
+
+function AiFileDiffPreviewInner() {
+    const baseEnv = useWaveEnv();
+    const nodeModel = React.useMemo(() => makePreviewNodeModel(), []);
+
+    const env = React.useMemo<MockWaveEnv>(() => {
+        const mockWaveObjs: Record<string, WaveObj> = {
+            [`workspace:${PreviewWorkspaceId}`]: makeMockWorkspace(),
+            [`tab:${PreviewTabId}`]: makeMockTab(),
+            [`block:${PreviewBlockId}`]: makeMockBlock(),
+        };
+
+        return applyMockEnvOverrides(baseEnv, {
+            tabId: PreviewTabId,
+            mockWaveObjs,
+            atoms: {
+                workspaceId: atom(PreviewWorkspaceId),
+                staticTabId: atom(PreviewTabId),
+            },
+            rpc: {
+                WaveAIGetToolDiffCommand: async (_client, data) => {
+                    if (
+                        data.chatid !== DefaultAiFileDiffChatId ||
+                        data.toolcallid !== DefaultAiFileDiffToolCallId
+                    ) {
+                        return null;
+                    }
+                    return makeMockAiFileDiffResponse();
+                },
+            },
+        });
+    }, [baseEnv]);
+
+    const tabModel = React.useMemo(() => getTabModelByTabId(PreviewTabId, env), [env]);
+
+    return (
+        <WaveEnvContext.Provider value={env}>
+            <TabModelContext.Provider value={tabModel}>
+                <div className="flex w-full max-w-[1120px] flex-col gap-2 px-6 py-6">
+                    <div className="text-xs text-muted font-mono">full aifilediff block (mock WOS + mock WaveAI diff RPC)</div>
+                    <div className="rounded-md border border-border bg-panel p-4">
+                        <div className="h-[720px]">
+                            <Block preview={false} nodeModel={nodeModel} />
+                        </div>
+                    </div>
+                </div>
+            </TabModelContext.Provider>
+        </WaveEnvContext.Provider>
+    );
+}
+
+export function AiFileDiffPreview() {
+    return <AiFileDiffPreviewInner />;
+}
