Updates to prepare for v0.12 launch (#2434)

Documentation Updates (removing AI Widget Information / deprecation)
Hover effect on tool calls shows which widget is effected
Remove AI Widget from sidebar unless there is customized presets
Backend now provides blockid (if available) to frontend for tool calls

Author: sawka

docs/docs/ai-presets.mdx

@@ -3,6 +3,10 @@ sidebar_position: 3.6
 id: "ai-presets"
 title: "AI Presets"
 ---
+:::warning Deprecation Notice
+The AI Widget and its presets are being replaced by [Wave AI](./waveai.mdx). Please refer to the Wave AI documentation for the latest AI features and configuration options.
+:::
+
 
 ![AI Presets Menu](./img/ai-presets.png#right)
 

docs/docs/customization.mdx

@@ -81,6 +81,4 @@ wsh setbg --print "#ff0000"
 
 For more advanced customization options including gradients, colors, and saving your own background presets, check out our [Background Configuration](/presets#background-configurations) documentation.
 
-## Presets
 
-For more advanced customization, to set up multiple AI models, and your own tab backgrounds, check out our [Presets Documentation](./presets).

docs/docs/faq.mdx

@@ -6,12 +6,6 @@ title: "FAQ"
 
 # FAQ
 
-### How do I configure Wave to use different AI models/providers?
-
-Wave supports various AI providers including local LLMs (via Ollama), Azure OpenAI, Anthropic's Claude, and Perplexity. The recommended way to configure these is through AI presets, which let you set up and easily switch between different providers and models.
-
-See our [AI Presets documentation](/ai-presets) for detailed setup instructions for each provider.
-
 ### How do I enable Claude Code support with Shift+Enter?
 
 Wave supports Claude Code and similar AI coding tools that expect Shift+Enter to send an escape sequence + newline (`\u001b\n`) instead of a regular carriage return. This can be enabled using the `term:shiftenternewline` configuration setting.

docs/docs/gettingstarted.mdx

@@ -90,7 +90,7 @@ You can also download installers directly from our [Downloads page](https://www.
 ### Tabs and Blocks
 
 - **Tabs**: Like browser tabs, these help organize your work. Create new tabs with <Kbd k="Cmd:t"/>.
-- **Blocks**: The building blocks of Wave. Each block can be a terminal, web browser, file preview, AI chat, or other widget.
+- **Blocks**: The building blocks of Wave. Each block can be a terminal, web browser, file preview, or other widget.
 - **Layout**: Blocks can be dragged, dropped, and resized to create your ideal layout.
 
 ### Key Features
@@ -152,7 +152,7 @@ You can also download installers directly from our [Downloads page](https://www.
 - Explore [Key Bindings](./keybindings) to work more efficiently
 - Learn about [Tab Layouts](./layout) to organize your workspace
 - Set up [Custom Widgets](./customwidgets) for quick access to your tools
-- Configure [AI Presets](./ai-presets) to use your preferred AI models
+- Configure [Wave AI](./waveai) to use your preferred AI models
 - Check out [Configuration](./config) for detailed customization options
 
 ## Getting Help

docs/docs/index.mdx

@@ -19,6 +19,12 @@ Check out [Getting Started](./gettingstarted) for installation instructions.
 ![Wave Screenshot](./img/wave-screenshot.webp)
 
 <CardGroup>
+  <Card
+    href="./waveai"
+    icon="fa-sparkles"
+    title="Wave AI"
+    description="Context-aware terminal assistant with access to terminal output, widgets, and filesystem."
+  />
   <Card
     href="./customization"
     icon="fa-paintbrush"
@@ -80,8 +86,6 @@ Other References:
 
 ## Roadmap
 
-Wave is constantly improving! Our roadmap will be continuously updated with our goals for each release. You can find it [here](https://github.com/wavetermdev/waveterm/blob/main/ROADMAP.md).
-
 Want to provide input to our future releases? Connect with us on [Discord](https://discord.gg/XfvZ334gwU) or open a [Feature Request](https://github.com/wavetermdev/waveterm/issues/new/choose)!
 
 ## Links

docs/docs/keybindings.mdx

@@ -81,9 +81,11 @@ Chords are shown with a + between the keys. You have 2 seconds to hit the 2nd ch
 
 ## WaveAI Keybindings
 
-| Key              | Function      |
-| ---------------- | ------------- |
-| <Kbd k="Cmd:l"/> | Clear AI Chat |
+| Key                     | Function                |
+| ----------------------- | ----------------------- |
+| <Kbd k="Cmd:Shift:a"/>  | Toggle WaveAI panel     |
+| <Kbd k="Ctrl:Shift:0"/> | Focus WaveAI input      |
+| <Kbd k="Cmd:k"/>        | Clear AI Chat           |
 
 ## Terminal Keybindings
 

docs/docs/presets.mdx

@@ -6,9 +6,8 @@ title: "Presets"
 
 # Presets
 
-Wave's preset system allows you to save and apply multiple configuration settings at once. Presets can be used in two different scenarios:
+Wave's preset system allows you to save and apply multiple configuration settings at once. Presets are used for:
 
-- AI models: Configure different AI providers and models (see [AI Presets](/ai-presets))
 - Tab backgrounds: Apply visual styles to your tabs
 
 ## Managing Presets
@@ -18,14 +17,14 @@ You can store presets in two locations:
 - `~/.config/waveterm/presets.json`: Main presets file
 - `~/.config/waveterm/presets/`: Directory for organizing presets into separate files
 
-All presets are aggregated regardless of which file they're in, so you can use the `presets` directory to organize them (e.g., `presets/bg.json`, `presets/ai.json`).
+All presets are aggregated regardless of which file they're in, so you can use the `presets` directory to organize them (e.g., `presets/bg.json`).
 
 :::info
 You can easily edit your presets using the built-in editor:
 
 ```bash
 wsh editconfig presets.json        # Edit main presets file
-wsh editconfig presets/ai.json     # Edit AI presets
+wsh editconfig presets/bg.json     # Edit background presets
 ```
 
 :::
@@ -47,7 +46,6 @@ Presets follow this format:
 
 The `preset-type` determines where the preset appears in Wave's interface:
 
-- `ai`: Appears in the models dropdown in the "Wave AI" widget header (see [AI Presets](/ai-presets))
 - `bg`: Appears in the "Backgrounds" submenu when right-clicking a tab
 
 ### Common Keys
@@ -58,19 +56,9 @@ The `preset-type` determines where the preset appears in Wave's interface:
 | display:order | float  | Controls the order in the menu (optional) |
 
 :::info
-When a preset is applied, it overrides the default configuration values for that tab or block. Using `bg:*` or `ai:*` will clear any previously overridden values, setting them back to defaults. It's recommended to include these keys in your presets to ensure a clean slate.
+When a preset is applied, it overrides the default configuration values for that tab or block. Using `bg:*` will clear any previously overridden values, setting them back to defaults. It's recommended to include this key in your presets to ensure a clean slate.
 :::
 
-## AI Presets
-
-For configuring AI providers and models, see our dedicated [AI Presets](/ai-presets) documentation. It covers setting up presets for:
-
-- Local LLMs via Ollama
-- Azure OpenAI
-- Anthropic's Claude
-- Perplexity
-- And more
-
 ## Background Presets
 
 Wave's background system harnesses the full power of CSS backgrounds, letting you create rich visual effects through the "background" attribute. You can apply solid colors, gradients (both linear and radial), images, and even blend multiple elements together.

frontend/app/aipanel/aimessage.tsx

@@ -1,11 +1,12 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { BlockModel } from "@/app/block/block-model";
 import { WaveStreamdown } from "@/app/element/streamdown";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { cn } from "@/util/util";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import { getFileIcon } from "./ai-utils";
 import { WaveUIMessage, WaveUIMessagePart } from "./aitypes";
 import { WaveAIModel } from "./waveai-model";
@@ -201,6 +202,8 @@ interface AIToolUseProps {
 const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
     const toolData = part.data;
     const [userApprovalOverride, setUserApprovalOverride] = useState<string | null>(null);
+    const highlightTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const highlightedBlockIdRef = useRef<string | null>(null);
 
     const statusIcon = toolData.status === "completed" ? "✓" : toolData.status === "error" ? "✗" : "•";
     const statusColor =
@@ -222,6 +225,14 @@ const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
         return () => clearInterval(interval);
     }, [isStreaming, effectiveApproval, toolData.toolcallid]);
 
+    useEffect(() => {
+        return () => {
+            if (highlightTimeoutRef.current) {
+                clearTimeout(highlightTimeoutRef.current);
+            }
+        };
+    }, []);
+
     const handleApprove = () => {
         setUserApprovalOverride("user-approved");
         RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
@@ -238,8 +249,47 @@ const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
         });
     };
 
+    const handleMouseEnter = () => {
+        if (!toolData.blockid) return;
+
+        if (highlightTimeoutRef.current) {
+            clearTimeout(highlightTimeoutRef.current);
+        }
+
+        highlightedBlockIdRef.current = toolData.blockid;
+        BlockModel.getInstance().setBlockHighlight({
+            blockId: toolData.blockid,
+            icon: "sparkles",
+        });
+
+        highlightTimeoutRef.current = setTimeout(() => {
+            if (highlightedBlockIdRef.current === toolData.blockid) {
+                BlockModel.getInstance().setBlockHighlight(null);
+                highlightedBlockIdRef.current = null;
+            }
+        }, 2000);
+    };
+
+    const handleMouseLeave = () => {
+        if (!toolData.blockid) return;
+
+        if (highlightTimeoutRef.current) {
+            clearTimeout(highlightTimeoutRef.current);
+            highlightTimeoutRef.current = null;
+        }
+
+        if (highlightedBlockIdRef.current === toolData.blockid) {
+            BlockModel.getInstance().setBlockHighlight(null);
+            highlightedBlockIdRef.current = null;
+        }
+    };
+
     return (
-        <div className={cn("flex items-start gap-2 p-2 rounded bg-gray-800 border border-gray-700", statusColor)}>
+        <div
+            className={cn("flex items-start gap-2 p-2 rounded bg-gray-800 border border-gray-700", statusColor)}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
             <span className="font-bold">{statusIcon}</span>
             <div className="flex-1">
                 <div className="font-semibold">{toolData.toolname}</div>

frontend/app/aipanel/aitypes.ts

@@ -17,6 +17,7 @@ type WaveUIDataTypes = {
         status: "pending" | "error" | "completed";
         errormessage?: string;
         approval?: "needs-approval" | "user-approved" | "user-denied" | "auto-approved" | "timeout";
+        blockid?: string;
     };
 };
 

frontend/app/block/block-model.ts

@@ -0,0 +1,51 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { globalStore } from "@/app/store/jotaiStore";
+import * as jotai from "jotai";
+
+export interface BlockHighlightType {
+    blockId: string;
+    icon: string;
+}
+
+export class BlockModel {
+    private static instance: BlockModel | null = null;
+    private blockHighlightAtomCache = new Map<string, jotai.Atom<BlockHighlightType | null>>();
+
+    blockHighlightAtom: jotai.PrimitiveAtom<BlockHighlightType> = jotai.atom(null) as jotai.PrimitiveAtom<BlockHighlightType>;
+
+    private constructor() {
+        // Empty for now
+    }
+
+    getBlockHighlightAtom(blockId: string): jotai.Atom<BlockHighlightType | null> {
+        let atom = this.blockHighlightAtomCache.get(blockId);
+        if (!atom) {
+            atom = jotai.atom((get) => {
+                const highlight = get(this.blockHighlightAtom);
+                if (highlight?.blockId === blockId) {
+                    return highlight;
+                }
+                return null;
+            });
+            this.blockHighlightAtomCache.set(blockId, atom);
+        }
+        return atom;
+    }
+
+    setBlockHighlight(highlight: BlockHighlightType | null) {
+        globalStore.set(this.blockHighlightAtom, highlight);
+    }
+
+    static getInstance(): BlockModel {
+        if (!BlockModel.instance) {
+            BlockModel.instance = new BlockModel();
+        }
+        return BlockModel.instance;
+    }
+
+    static resetInstance(): void {
+        BlockModel.instance = null;
+    }
+}