From 6c3139ebe6cf53aac10f824180c4e0cf77dcf217 Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Fri, 14 Nov 2025 16:19:07 -0800
Subject: [PATCH] better ux for thinkingmode control (more responsive, less
 likely to overlap message)

---
 frontend/app/aipanel/aimessage.tsx     |  2 +-
 frontend/app/aipanel/aipanel.tsx       |  2 +-
 frontend/app/aipanel/aipanelheader.tsx |  2 +-
 frontend/app/aipanel/thinkingmode.tsx  | 10 ++++++++--
 frontend/tailwindsetup.css             |  1 +
 package-lock.json                      |  4 ++--
 6 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/app/aipanel/aimessage.tsx b/frontend/app/aipanel/aimessage.tsx
index f3a1f91c9c..e6fb70ce11 100644
--- a/frontend/app/aipanel/aimessage.tsx
+++ b/frontend/app/aipanel/aimessage.tsx
@@ -223,7 +223,7 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
                 className={cn(
                     "px-2 rounded-lg [&>*:first-child]:!mt-0",
                     message.role === "user"
-                        ? "py-2 bg-accent-800 text-white max-w-[calc(90%-10px)]"
+                        ? "py-2 bg-accent-800 text-white max-w-[calc(100%-50px)] @w450:max-w-[calc(100%-105px)]"
                         : "min-w-[min(100%,500px)]"
                 )}
             >
diff --git a/frontend/app/aipanel/aipanel.tsx b/frontend/app/aipanel/aipanel.tsx
index 3008404889..79ae04fcc1 100644
--- a/frontend/app/aipanel/aipanel.tsx
+++ b/frontend/app/aipanel/aipanel.tsx
@@ -464,7 +464,7 @@ const AIPanelComponentInner = memo(() => {
             ref={containerRef}
             data-waveai-panel="true"
             className={cn(
-                "bg-gray-900 flex flex-col relative",
+                "@container bg-gray-900 flex flex-col relative",
                 model.inBuilder ? "mt-0 h-full" : "mt-1 h-[calc(100%-4px)]",
                 (isDragOver || isReactDndDragOver) && "bg-gray-800 border-accent",
                 isFocused ? "border-2 border-accent" : "border-2 border-transparent"
diff --git a/frontend/app/aipanel/aipanelheader.tsx b/frontend/app/aipanel/aipanelheader.tsx
index d6b5d43cb2..a2c4d586c2 100644
--- a/frontend/app/aipanel/aipanelheader.tsx
+++ b/frontend/app/aipanel/aipanelheader.tsx
@@ -16,7 +16,7 @@ export const AIPanelHeader = memo(() => {
     };
 
     return (
-        <div className="@container py-2 pl-3 pr-1 @xs:p-2 @xs:pl-4 border-b border-gray-600 flex items-center justify-between min-w-0">
+        <div className="py-2 pl-3 pr-1 @xs:p-2 @xs:pl-4 border-b border-gray-600 flex items-center justify-between min-w-0">
             <h2 className="text-white text-sm @xs:text-lg font-semibold flex items-center gap-2 flex-shrink-0 whitespace-nowrap">
                 <i className="fa fa-sparkles text-accent"></i>
                 Wave AI
diff --git a/frontend/app/aipanel/thinkingmode.tsx b/frontend/app/aipanel/thinkingmode.tsx
index cb69a50939..99cc85bc6e 100644
--- a/frontend/app/aipanel/thinkingmode.tsx
+++ b/frontend/app/aipanel/thinkingmode.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { atoms } from "@/app/store/global";
+import { cn } from "@/util/util";
 import { useAtomValue } from "jotai";
 import { memo, useRef, useState } from "react";
 import { WaveAIModel } from "./waveai-model";
@@ -64,11 +65,16 @@ export const ThinkingLevelDropdown = memo(() => {
         <div className="relative" ref={dropdownRef}>
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 rounded transition-colors cursor-pointer border border-gray-600/50"
+                className={cn(
+                    "group flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300 hover:text-white rounded transition-colors cursor-pointer border border-gray-600/50",
+                    isOpen ? "bg-gray-700" : "bg-gray-800/50 hover:bg-gray-700"
+                )}
                 title={`Thinking: ${currentMetadata.name}`}
             >
                 <i className={`fa ${currentMetadata.icon} text-[10px]`}></i>
-                <span className="text-[11px]">{currentMetadata.name}</span>
+                <span className={`text-[11px] ${isOpen ? "inline" : "hidden group-hover:inline @w450:inline"}`}>
+                    {currentMetadata.name}
+                </span>
                 <i className="fa fa-chevron-down text-[8px]"></i>
             </button>
 
diff --git a/frontend/tailwindsetup.css b/frontend/tailwindsetup.css
index a0963065d0..cf400b209c 100644
--- a/frontend/tailwindsetup.css
+++ b/frontend/tailwindsetup.css
@@ -65,6 +65,7 @@
     --ansi-brightcyan: #b7b8cb;
     --ansi-brightwhite: #f0f0f0;
 
+    --container-w450: 450px;
     --container-xs: 300px;
     --container-xxs: 200px;
     --container-tiny: 120px;
diff --git a/package-lock.json b/package-lock.json
index ec70442dd7..6a62724f7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "waveterm",
-    "version": "0.12.2",
+    "version": "0.12.3-beta.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "waveterm",
-            "version": "0.12.2",
+            "version": "0.12.3-beta.1",
             "hasInstallScript": true,
             "license": "Apache-2.0",
             "workspaces": [