wavetermdev · somatothing · Mar 24, 2026 · Mar 24, 2026 · Mar 24, 2026 · Mar 25, 2026
diff --git a/.github/workflows/deploy-docsite.yml b/.github/workflows/deploy-docsite.yml
@@ -52,6 +52,9 @@ jobs:
                   timeout_minutes: 5
             - name: Build docsite
               run: task docsite:build:public
+            - name: Build preview app
+              run: npx --no-install vite build --base /${{ github.event.repository.name }}/preview/ --outDir ../../docs/build/preview
+              working-directory: frontend/preview
             - name: Upload Build Artifact
               # Only upload the build artifact when pushed to the main branch
               if: github.event_name == 'push' && github.ref == 'refs/heads/main'

diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
@@ -35,6 +35,7 @@ import { atom, useAtomValue } from "jotai";
 import { memo, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { QuickTipsViewModel } from "../view/quicktipsview/quicktipsview";
 import { WaveConfigViewModel } from "../view/waveconfig/waveconfig-model";
+import { WIDGET_REGISTRY_ENTRIES } from "@/widgets/index";
 import "./block.scss";
 import { BlockEnv } from "./blockenv";
 import { BlockFrame } from "./blockframe";
@@ -54,6 +55,10 @@ BlockRegistry.set("launcher", LauncherViewModel);
 BlockRegistry.set("tsunami", TsunamiViewModel);
 BlockRegistry.set("aifilediff", AiFileDiffViewModel);
 BlockRegistry.set("waveconfig", WaveConfigViewModel);
+// Register financial/DeFi widgets (defined in frontend/widgets/)
+for (const [viewType, cls] of WIDGET_REGISTRY_ENTRIES) {
+    BlockRegistry.set(viewType, cls);
+}
 
 function makeViewModel(
     blockId: string,

diff --git a/frontend/preview/index.html b/frontend/preview/index.html
@@ -5,13 +5,13 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="color-scheme" content="dark" />
         <title>Wave Preview Server</title>
-        <link rel="icon" type="image/png" href="/logos/wave-logo-256.png" />
-        <link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css" />
-        <link rel="stylesheet" href="/fontawesome/css/brands.min.css" />
-        <link rel="stylesheet" href="/fontawesome/css/solid.min.css" />
-        <link rel="stylesheet" href="/fontawesome/css/sharp-solid.min.css" />
-        <link rel="stylesheet" href="/fontawesome/css/sharp-regular.min.css" />
-        <link rel="stylesheet" href="/fontawesome/css/custom-icons.min.css" />
+        <link rel="icon" type="image/png" href="./logos/wave-logo-256.png" />
+        <link rel="stylesheet" href="./fontawesome/css/fontawesome.min.css" />
+        <link rel="stylesheet" href="./fontawesome/css/brands.min.css" />
+        <link rel="stylesheet" href="./fontawesome/css/solid.min.css" />
+        <link rel="stylesheet" href="./fontawesome/css/sharp-solid.min.css" />
+        <link rel="stylesheet" href="./fontawesome/css/sharp-regular.min.css" />
+        <link rel="stylesheet" href="./fontawesome/css/custom-icons.min.css" />
     </head>
     <body class="init" data-colorscheme="dark">
         <div id="main" class="flex flex-col w-full h-full"></div>

diff --git a/frontend/preview/mock/mockwaveenv.ts b/frontend/preview/mock/mockwaveenv.ts
@@ -22,6 +22,16 @@ export const PreviewWorkspaceId = crypto.randomUUID();
 export const PreviewClientId = crypto.randomUUID();
 export const WebBlockId = crypto.randomUUID();
 export const SysinfoBlockId = crypto.randomUUID();
+export const TradingAlgoBotBlockId = crypto.randomUUID();
+export const ArbitrageBotBlockId = crypto.randomUUID();
+export const DeFiLendingBlockId = crypto.randomUUID();
+export const FlashLoanBlockId = crypto.randomUUID();
+export const AmmLiquidityBlockId = crypto.randomUUID();
+export const CodeEditorBlockId = crypto.randomUUID();
+export const ContainersBlockId = crypto.randomUUID();
+export const ShellWorkflowBlockId = crypto.randomUUID();
+export const MLModelBlockId = crypto.randomUUID();
+export const WidgetBuilderBlockId = crypto.randomUUID();
 
 // What works "out of the box" in the mock environment (no MockEnv overrides needed):
 //
@@ -388,7 +398,7 @@ export function makeMockWaveEnv(mockEnv?: MockEnv): MockWaveEnv {
             oid: PreviewTabId,
             version: 1,
             name: "Preview Tab",
-            blockids: [WebBlockId, SysinfoBlockId],
+            blockids: [WebBlockId, SysinfoBlockId, TradingAlgoBotBlockId, ArbitrageBotBlockId, DeFiLendingBlockId, FlashLoanBlockId, AmmLiquidityBlockId, CodeEditorBlockId, ContainersBlockId, ShellWorkflowBlockId, MLModelBlockId, WidgetBuilderBlockId],
             meta: {},
         } as Tab,
         [`block:${WebBlockId}`]: {
@@ -410,6 +420,66 @@ export function makeMockWaveEnv(mockEnv?: MockEnv): MockWaveEnv {
                 "graph:numpoints": 90,
             },
         } as Block,
+        [`block:${TradingAlgoBotBlockId}`]: {
+            otype: "block",
+            oid: TradingAlgoBotBlockId,
+            version: 1,
+            meta: { view: "tradingalgobot" },
+        } as Block,
+        [`block:${ArbitrageBotBlockId}`]: {
+            otype: "block",
+            oid: ArbitrageBotBlockId,
+            version: 1,
+            meta: { view: "arbitragebot" },
+        } as Block,
+        [`block:${DeFiLendingBlockId}`]: {
+            otype: "block",
+            oid: DeFiLendingBlockId,
+            version: 1,
+            meta: { view: "defilending" },
+        } as Block,
+        [`block:${FlashLoanBlockId}`]: {
+            otype: "block",
+            oid: FlashLoanBlockId,
+            version: 1,
+            meta: { view: "flashloan" },
+        } as Block,
+        [`block:${AmmLiquidityBlockId}`]: {
+            otype: "block",
+            oid: AmmLiquidityBlockId,
+            version: 1,
+            meta: { view: "ammliquidity" },
+        } as Block,
+        [`block:${CodeEditorBlockId}`]: {
+            otype: "block",
+            oid: CodeEditorBlockId,
+            version: 1,
+            meta: { view: "codeeditor" },
+        } as Block,
+        [`block:${ContainersBlockId}`]: {
+            otype: "block",
+            oid: ContainersBlockId,
+            version: 1,
+            meta: { view: "containers" },
+        } as Block,
+        [`block:${ShellWorkflowBlockId}`]: {
+            otype: "block",
+            oid: ShellWorkflowBlockId,
+            version: 1,
+            meta: { view: "shellworkflow" },
+        } as Block,
+        [`block:${MLModelBlockId}`]: {
+            otype: "block",
+            oid: MLModelBlockId,
+            version: 1,
+            meta: { view: "mlmodel" },
+        } as Block,
+        [`block:${WidgetBuilderBlockId}`]: {
+            otype: "block",
+            oid: WidgetBuilderBlockId,
+            version: 1,
+            meta: { view: "widgetbuilder" },
+        } as Block,
     };
     const defaultAtoms: Partial<GlobalAtomsType> = {
         uiContext: atom({ windowid: PreviewWindowId, activetabid: PreviewTabId } as UIContext),

diff --git a/frontend/preview/previews/defi-widgets.preview.tsx b/frontend/preview/previews/defi-widgets.preview.tsx
@@ -0,0 +1,124 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Block } from "@/app/block/block";
+import * as React from "react";
+import { makeMockNodeModel } from "../mock/mock-node-model";
+import {
+    AmmLiquidityBlockId,
+    ArbitrageBotBlockId,
+    CodeEditorBlockId,
+    ContainersBlockId,
+    DeFiLendingBlockId,
+    FlashLoanBlockId,
+    MLModelBlockId,
+    ShellWorkflowBlockId,
+    TradingAlgoBotBlockId,
+    WidgetBuilderBlockId,
+} from "../mock/mockwaveenv";
+
+type WidgetEntry = {
+    label: string;
+    blockId: string;
+    width: string;
+    height: string;
+};
+
+const WIDGETS: WidgetEntry[] = [
+    {
+        label: "Trading Algobot — Hyperliquid + ONNX/Joblib ML",
+        blockId: TradingAlgoBotBlockId,
+        width: "1100px",
+        height: "640px",
+    },
+    {
+        label: "Arbitrage Bot — Triangular Arb on Arbitrum + ML",
+        blockId: ArbitrageBotBlockId,
+        width: "1100px",
+        height: "580px",
+    },
+    {
+        label: "DeFi Lending — Supply / Borrow / Collateral Swap Repay + ML",
+        blockId: DeFiLendingBlockId,
+        width: "1100px",
+        height: "640px",
+    },
+    {
+        label: "Flash Loan — Arbitrage Portfolio Rebalancer",
+        blockId: FlashLoanBlockId,
+        width: "1100px",
+        height: "620px",
+    },
+    {
+        label: "AMM Liquidity Pools — Uniswap V3 / Camelot / Curve / Balancer",
+        blockId: AmmLiquidityBlockId,
+        width: "1100px",
+        height: "640px",
+    },
+    {
+        label: "Code Editor — AI-Assisted, Multi-Language + Autocompletion",
+        blockId: CodeEditorBlockId,
+        width: "1100px",
+        height: "660px",
+    },
+    {
+        label: "Containers — Docker/K8s Manager with Logs, Metrics, Shell Exec",
+        blockId: ContainersBlockId,
+        width: "1100px",
+        height: "640px",
+    },
+    {
+        label: "Shell Workflows — Programmable Button-Triggered Pipelines",
+        blockId: ShellWorkflowBlockId,
+        width: "1100px",
+        height: "640px",
+    },
+    {
+        label: "ML Model — Training / Eval / Retrain (GBM, LR, NN, RF, NumpyLogistics) + ONNX/Joblib",
+        blockId: MLModelBlockId,
+        width: "1100px",
+        height: "680px",
+    },
+    {
+        label: "Widget Builder — AI Chat + Storage + DB Query + HTTP Station",
+        blockId: WidgetBuilderBlockId,
+        width: "1100px",
+        height: "660px",
+    },
+];
+
+function WidgetPreviewBlock({ entry }: { entry: WidgetEntry }) {
+    const nodeModel = React.useMemo(
+        () =>
+            makeMockNodeModel({
+                nodeId: `preview-${entry.blockId}-node`,
+                blockId: entry.blockId,
+                innerRect: { width: entry.width, height: entry.height },
+            }),
+        [entry.blockId]
+    );
+
+    return (
+        <div className="flex w-full max-w-[1160px] flex-col gap-2 px-6">
+            <div className="text-xs text-muted font-mono">{entry.label}</div>
+            <div className="rounded-md border border-border bg-panel p-4">
+                <div style={{ height: entry.height, width: "100%" }}>
+                    <Block preview={false} nodeModel={nodeModel} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default function DeFiWidgetsPreview() {
+    return (
+        <div className="flex flex-col gap-12 py-8 items-center w-full">
+            <div className="text-sm text-foreground font-mono font-semibold">
+                DeFi / Financial + Platform Widgets — Preview
+            </div>
+            {WIDGETS.map((entry) => (
+                <WidgetPreviewBlock key={entry.blockId} entry={entry} />
+            ))}
+        </div>
+    );
+}