- {headerElem}
+ {noHeader || {headerElem} }
{preview ? previewElem : children}
{preview || viewModel == null || !connModalOpen ? null : (
diff --git a/frontend/app/store/global.ts b/frontend/app/store/global.ts
index 8bfe03f01..0ee5ce87e 100644
--- a/frontend/app/store/global.ts
+++ b/frontend/app/store/global.ts
@@ -10,7 +10,11 @@ import {
newLayoutNode,
} from "@/layout/index";
import { getLayoutModelForStaticTab } from "@/layout/lib/layoutModelHooks";
-import { LayoutTreeSplitHorizontalAction, LayoutTreeSplitVerticalAction } from "@/layout/lib/types";
+import {
+ LayoutTreeReplaceNodeAction,
+ LayoutTreeSplitHorizontalAction,
+ LayoutTreeSplitVerticalAction,
+} from "@/layout/lib/types";
import { getWebServerEndpoint } from "@/util/endpoints";
import { fetch } from "@/util/fetchutil";
import { deepCompareReturnPrev, getPrefixedSettings, isBlank } from "@/util/util";
@@ -447,6 +451,25 @@ async function createBlock(blockDef: BlockDef, magnified = false, ephemeral = fa
return blockId;
}
+async function replaceBlock(blockId: string, blockDef: BlockDef): Promise
+ {/* Hidden input for search */}
+ setSearchTerm(e.target.value)}
+ className="sr-only"
+ aria-label="Search widgets"
+ />
+
+ {/* Logo */}
+ {showLogo && (
+
+ );
+};
+
+export default LauncherView;
diff --git a/frontend/app/view/view-prompt.md b/frontend/app/view/view-prompt.md
new file mode 100644
index 000000000..4a7f2ad5a
--- /dev/null
+++ b/frontend/app/view/view-prompt.md
@@ -0,0 +1,239 @@
+# Wave Terminal ViewModel Guide
+
+## Overview
+
+Wave Terminal uses a modular ViewModel system to define interactive blocks. Each block has a **ViewModel**, which manages its metadata, configuration, and state using **Jotai atoms**. The ViewModel also specifies a **React component (ViewComponent)** that renders the block.
+
+### Key Concepts
+
+1. **ViewModel Structure**
+
+ - Implements the `ViewModel` interface.
+ - Defines:
+ - `viewType`: Unique block type identifier.
+ - `viewIcon`, `viewName`, `viewText`: Atoms for UI metadata.
+ - `preIconButton`, `endIconButtons`: Atoms for action buttons.
+ - `blockBg`: Atom for background styling.
+ - `manageConnection`, `noPadding`, `searchAtoms`.
+ - `viewComponent`: React component rendering the block.
+ - Lifecycle methods like `dispose()`, `giveFocus()`, `keyDownHandler()`.
+
+2. **ViewComponent Structure**
+
+ - A **React function component** implementing `ViewComponentProps
+ 
+
+ )}
+
+ {/* Grid of widgets */}
+
+ {filteredWidgets.map((widget, index) => (
+
+
+ {/* Search instructions */}
+ model.handleWidgetSelect(widget)}
+ title={widget.description || widget.label}
+ className={clsx(
+ "flex flex-col items-center justify-center cursor-pointer rounded-md p-2 text-center",
+ "transition-colors duration-150",
+ index === selectedIndex
+ ? "bg-white/20 text-white"
+ : "bg-white/5 hover:bg-white/10 text-secondary hover:text-white"
+ )}
+ style={{
+ width: finalTileWidth,
+ height: finalTileHeight,
+ }}
+ >
+
+ ))}
+
+
+
+ {gridLayout.showLabel && !isBlank(widget.label) && (
+
+ {widget.label}
+
+ )}
+
+ {filteredWidgets.length === 0 ? (
+ No widgets found. Press Escape to clear search.
+ ) : (
+
+ {searchTerm == "" ? "Type to Filter" : "Searching " + '"' + searchTerm + '"'}, Enter to Launch,
+ {searchTerm == "" ? "Arrow Keys to Navigate" : null}
+
+ )}
+
+ Hello, World!
;
+};
+
+export { HelloWorldModel };
+
+```
+
+## Instructions to AI
+
+1. Generate a new **ViewModel** class for a block, following the structure above.
+2. Generate a corresponding **ViewComponent**.
+3. Use **Jotai atoms** to store all dynamic state.
+4. Ensure the ViewModel defines **header elements** (`viewText`, `viewIcon`, `endIconButtons`).
+5. Export the view model (to be registered in the BlockRegistry)
+6. Use existing metadata patterns for config and settings.
+
+## Other Notes
+
+- The types you see above don't need to be imported, they are global types (custom.d.ts)
+
+**Output Format:**
+
+- TypeScript code defining the **ViewModel**.
+- TypeScript code defining the **ViewComponent**.
+- Ensure alignment with the patterns in `waveai.tsx`, `preview.tsx`, `sysinfo.tsx`, and `term.tsx`.
diff --git a/frontend/layout/lib/layoutTree.ts b/frontend/layout/lib/layoutTree.ts
index e60771acf..74fcad5f3 100644
--- a/frontend/layout/lib/layoutTree.ts
+++ b/frontend/layout/lib/layoutTree.ts
@@ -450,6 +450,9 @@ export function replaceNode(layoutState: LayoutTreeState, action: LayoutTreeRepl
newNode.size = targetNode.size;
parent.children[index] = newNode;
}
+ if (action.focused) {
+ layoutState.focusedNodeId = newNode.id;
+ }
layoutState.generation++;
}
@@ -473,8 +476,6 @@ export function splitHorizontal(layoutState: LayoutTreeState, action: LayoutTree
const insertIndex = position === "before" ? index : index + 1;
// Directly splice in the new node instead of calling addChildAt (which may flatten nodes)
parent.children.splice(insertIndex, 0, newNode);
- // Rebalance sizes equally (or use your own logic)
- parent.children.forEach((child) => (child.size = 1));
} else {
// Otherwise, if no parent or parent's flexDirection is not Row, we need to wrap
// Create a new group node with horizontal layout.
@@ -482,7 +483,6 @@ export function splitHorizontal(layoutState: LayoutTreeState, action: LayoutTree
const groupNode = newLayoutNode(FlexDirection.Row, targetNode.size, [targetNode], undefined);
// Now decide the ordering based on the "position"
groupNode.children = position === "before" ? [newNode, targetNode] : [targetNode, newNode];
- groupNode.children.forEach((child) => (child.size = 1));
if (parent) {
const index = parent.children.findIndex((child) => child.id === targetNodeId);
if (index === -1) {
@@ -520,13 +520,11 @@ export function splitVertical(layoutState: LayoutTreeState, action: LayoutTreeSp
const insertIndex = position === "before" ? index : index + 1;
// For vertical splits in an already vertical parent, splice directly.
parent.children.splice(insertIndex, 0, newNode);
- parent.children.forEach((child) => (child.size = 1));
} else {
// Wrap target node in a new vertical group.
// Create group node with an initial children array so that validation passes.
const groupNode = newLayoutNode(FlexDirection.Column, targetNode.size, [targetNode], undefined);
groupNode.children = position === "before" ? [newNode, targetNode] : [targetNode, newNode];
- groupNode.children.forEach((child) => (child.size = 1));
if (parent) {
const index = parent.children.findIndex((child) => child.id === targetNodeId);
if (index === -1) {
diff --git a/frontend/layout/lib/types.ts b/frontend/layout/lib/types.ts
index 1c8fa1f1d..d250fa74e 100644
--- a/frontend/layout/lib/types.ts
+++ b/frontend/layout/lib/types.ts
@@ -195,6 +195,7 @@ export interface LayoutTreeReplaceNodeAction extends LayoutTreeAction {
type: LayoutTreeActionType.ReplaceNode;
targetNodeId: string;
newNode: LayoutNode;
+ focused?: boolean;
}
// SplitHorizontal: split the current block horizontally.
diff --git a/frontend/types/custom.d.ts b/frontend/types/custom.d.ts
index d0e8fbc92..70a777761 100644
--- a/frontend/types/custom.d.ts
+++ b/frontend/types/custom.d.ts
@@ -282,6 +282,8 @@ declare global {
// Background styling metadata for the block.
blockBg?: jotai.Atom