Show Claude icon in terminal header while Claude Code is active (wavetermdev#3046)

This updates the terminal shell-integration badge so it reflects Claude
Code activity instead of always rendering the generic AI icon. When the
active shell command is Claude Code, the header now shows the Claude
logo.

- **Terminal shell-integration badge**
- Updated `getShellIntegrationIconButton()` to render the Claude logo
while Claude Code is the active running command.
- Kept the existing shell-integration states and messaging intact for
non-Claude commands.

- **Claude Code detection**
- Added command detection for Claude Code in the OSC shell-integration
flow.
- Tracks active Claude sessions on `TermWrap`, including initial
runtime-info hydration and command lifecycle transitions.
- Handles common invocation forms, including direct binary paths and
commands wrapped by env var assignments / `env`.

- **UI rendering**
- Added `@lobehub/icons` and used its `Claude` icon in the terminal
header path.
- Reused the existing icon-button rendering contract by passing a React
node for the icon where needed.

- **Focused coverage**
- Added a small unit test for Claude command detection to lock in the
supported command forms.

```ts
const claudeCodeActive = get(this.termRef.current.claudeCodeActiveAtom);
const icon = claudeCodeActive ? React.createElement(TermClaudeIcon) : "sparkles";
```

- **screenshot**
- ![Claude terminal header
badge](https://github.com/user-attachments/assets/4b53f671-8432-4878-b2d2-e3afeba7814f)

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 Send tasks to Copilot coding agent from
[Slack](https://gh.io/cca-slack-docs) and
[Teams](https://gh.io/cca-teams-docs) to turn conversations into code.
Copilot posts an update in your thread when it's finished.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
Co-authored-by: sawka <mike@commandline.dev>

Author: 2 people

frontend/app/asset/claude-color.svg

@@ -10,7 +10,7 @@ import { waveEventSubscribe } from "@/app/store/wps";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { makeFeBlockRouteId } from "@/app/store/wshrouter";
 import { DefaultRouter, TabRpcClient } from "@/app/store/wshrpcutil";
-import { TerminalView } from "@/app/view/term/term";
+import { TermClaudeIcon, TerminalView } from "@/app/view/term/term";
 import { TermWshClient } from "@/app/view/term/term-wsh";
 import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
 import {
@@ -422,10 +422,12 @@ export class TermViewModel implements ViewModel {
             return null;
         }
         const shellIntegrationStatus = get(this.termRef.current.shellIntegrationStatusAtom);
+        const claudeCodeActive = get(this.termRef.current.claudeCodeActiveAtom);
+        const icon = claudeCodeActive ? React.createElement(TermClaudeIcon) : "sparkles";
         if (shellIntegrationStatus == null) {
             return {
                 elemtype: "iconbutton",
-                icon: "sparkles",
+                icon,
                 className: "text-muted",
                 title: "No shell integration — Wave AI unable to run commands.",
                 noAction: true,
@@ -434,14 +436,16 @@ export class TermViewModel implements ViewModel {
         if (shellIntegrationStatus === "ready") {
             return {
                 elemtype: "iconbutton",
-                icon: "sparkles",
+                icon,
                 className: "text-accent",
                 title: "Shell ready — Wave AI can run commands in this terminal.",
                 noAction: true,
             };
         }
         if (shellIntegrationStatus === "running-command") {
-            let title = "Shell busy — Wave AI unable to run commands while another command is running.";
+            let title = claudeCodeActive
+                ? "Claude Code Detected"
+                : "Shell busy — Wave AI unable to run commands while another command is running.";
 
             if (this.termRef.current) {
                 const inAltBuffer = this.termRef.current.terminal?.buffer?.active?.type === "alternate";
@@ -454,7 +458,7 @@ export class TermViewModel implements ViewModel {
 
             return {
                 elemtype: "iconbutton",
-                icon: "sparkles",
+                icon,
                 className: "text-warning",
                 title: title,
                 noAction: true,

frontend/app/view/term/term-model.ts

@@ -1,3 +1,4 @@
+import ClaudeColorSvg from "@/app/asset/claude-color.svg";
 import { Search, useSearch } from "@/app/element/search";
 import { ContextMenuModel } from "@/app/store/contextmenu";
 import { useTabModel } from "@/app/store/tab-model";
@@ -23,6 +24,16 @@ interface TerminalViewProps {
     model: TermViewModel;
 }
 
+const TermClaudeIcon = React.memo(() => {
+    return (
+        <div className="[&_svg]:w-[15px] [&_svg]:h-[15px]" aria-hidden="true">
+            <ClaudeColorSvg />
+        </div>
+    );
+});
+
+TermClaudeIcon.displayName = "TermClaudeIcon";
+
 const TermResyncHandler = React.memo(({ model }: TerminalViewProps) => {
     const connStatus = jotai.useAtomValue(model.connStatus);
     const [lastConnStatus, setLastConnStatus] = React.useState<ConnStatus>(connStatus);
@@ -561,4 +572,4 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
     );
 };
 
-export { TerminalView };
+export { TermClaudeIcon, TerminalView };

frontend/app/view/term/term.tsx

@@ -43,6 +43,7 @@ import {
     handleOsc16162Command,
     handleOsc52Command,
     handleOsc7Command,
+    isClaudeCodeCommand,
 } from "./termwrap-osc";
 
 export { cleanupOsc7DebounceForTab };
@@ -96,6 +97,7 @@ export class TermWrap {
     promptMarkers: TermTypes.IMarker[] = [];
     shellIntegrationStatusAtom: jotai.PrimitiveAtom<"ready" | "running-command" | null>;
     lastCommandAtom: jotai.PrimitiveAtom<string | null>;
+    claudeCodeActiveAtom: jotai.PrimitiveAtom<boolean>;
     nodeModel: BlockNodeModel;
     onShellIntegrationStatusChange?: () => void;
     pendingTermSize: TermSize | null = null;
@@ -134,6 +136,7 @@ export class TermWrap {
         this.promptMarkers = [];
         this.shellIntegrationStatusAtom = jotai.atom(null) as jotai.PrimitiveAtom<"ready" | "running-command" | null>;
         this.lastCommandAtom = jotai.atom(null) as jotai.PrimitiveAtom<string | null>;
+        this.claudeCodeActiveAtom = jotai.atom(false);
         this.terminal = new Terminal(options);
         this.fitAddon = new FitAddon();
         this.fitAddon.noScrollbar = PLATFORM === PlatformMacOS;
@@ -197,10 +200,20 @@ export class TermWrap {
             return result;
         });
         this.terminal.parser.registerOscHandler(52, (data: string) => {
-            return handleOsc52Command(data, this.blockId, this.loaded, this);
+            try {
+                return handleOsc52Command(data, this.blockId, this.loaded, this);
+            } catch (e) {
+                console.error("[termwrap] osc 52 handler error", this.blockId, e);
+                return false;
+            }
         });
         this.terminal.parser.registerOscHandler(16162, (data: string) => {
-            return handleOsc16162Command(data, this.blockId, this.loaded, this);
+            try {
+                return handleOsc16162Command(data, this.blockId, this.loaded, this);
+            } catch (e) {
+                console.error("[termwrap] osc 16162 handler error", this.blockId, e);
+                return false;
+            }
         });
         let lastTitle: string | null = null;
         this.terminal.onTitleChange((title: string) => {
@@ -413,16 +426,19 @@ export class TermWrap {
             const rtInfo = await RpcApi.GetRTInfoCommand(TabRpcClient, {
                 oref: WOS.makeORef("block", this.blockId),
             });
+            let shellState: ShellIntegrationStatus = null;
 
             if (rtInfo && rtInfo["shell:integration"]) {
-                const shellState = rtInfo["shell:state"] as ShellIntegrationStatus;
+                shellState = rtInfo["shell:state"] as ShellIntegrationStatus;
                 this.setShellIntegrationStatus(shellState || null);
             } else {
                 this.setShellIntegrationStatus(null);
             }
 
             const lastCmd = rtInfo ? rtInfo["shell:lastcmd"] : null;
+            const isCC = shellState === "running-command" && isClaudeCodeCommand(lastCmd);
             globalStore.set(this.lastCommandAtom, lastCmd || null);
+            globalStore.set(this.claudeCodeActiveAtom, isCC);
         } catch (e) {
             console.log("Error loading runtime info:", e);
         }