AI button, panel width, other UI

Author: sawka

frontend/app/aipanel/aipanelheader.tsx

@@ -49,7 +49,7 @@ export const AIPanelHeader = memo(({ onClose, model }: AIPanelHeaderProps) => {
                 {onClose && (
                     <button
                         onClick={onClose}
-                        className="text-gray-400 hover:text-white cursor-pointer transition-colors p-1 rounded flex-shrink-0 ml-1"
+                        className="text-gray-400 hover:text-white cursor-pointer transition-colors p-1 rounded flex-shrink-0 ml-1 focus:outline-none"
                         title="Close AI Panel"
                     >
                         <i className="fa fa-xmark"></i>

frontend/app/tab/tabbar.tsx

@@ -3,6 +3,7 @@
 
 import { Button } from "@/app/element/button";
 import { modalsModel } from "@/app/store/modalmodel";
+import { workspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
 import { WindowDrag } from "@/element/windowdrag";
 import { deleteLayoutModelForTab } from "@/layout/index";
 import { atoms, createTab, getApi, globalStore, isDev, setActiveTab } from "@/store/global";
@@ -164,7 +165,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const osInstanceRef = useRef<OverlayScrollbars>(null);
     const draggerLeftRef = useRef<HTMLDivElement>(null);
     const workspaceSwitcherRef = useRef<HTMLDivElement>(null);
-    const devLabelRef = useRef<HTMLDivElement>(null);
     const appMenuButtonRef = useRef<HTMLDivElement>(null);
     const tabWidthRef = useRef<number>(TAB_DEFAULT_WIDTH);
     const scrollableRef = useRef<boolean>(false);
@@ -232,16 +232,14 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         const configErrorWidth = configErrorButtonRef.current?.getBoundingClientRect().width ?? 0;
         const appMenuButtonWidth = appMenuButtonRef.current?.getBoundingClientRect().width ?? 0;
         const workspaceSwitcherWidth = workspaceSwitcherRef.current?.getBoundingClientRect().width ?? 0;
-        const devLabelWidth = devLabelRef.current?.getBoundingClientRect().width ?? 0;
 
         const nonTabElementsWidth =
             windowDragLeftWidth +
             addBtnWidth +
             updateStatusLabelWidth +
             configErrorWidth +
             appMenuButtonWidth +
-            workspaceSwitcherWidth +
-            devLabelWidth;
+            workspaceSwitcherWidth;
         const spaceForTabs = tabbarWrapperWidth - nonTabElementsWidth;
 
         const numberOfTabs = tabIds.length;
@@ -635,10 +633,19 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         getApi().showContextMenu(workspace.oid);
     }
 
+    function onSparklesClick() {
+        const currentVisible = workspaceLayoutModel.getAIPanelVisible();
+        workspaceLayoutModel.setAIPanelVisible(!currentVisible);
+    }
+
     const tabsWrapperWidth = tabIds.length * tabWidthRef.current;
-    const devLabel = isDev() ? (
-        <div ref={devLabelRef} className="dev-label">
-            <i className="fa fa-brands fa-dev fa-fw" />
+    const waveaiButton = isDev() ? (
+        <div
+            className="flex h-[26px] px-3 justify-end items-center gap-3 rounded-md mr-1 box-border text-accent cursor-pointer bg-hover hover:bg-hoverbg transition-colors"
+            style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+            onClick={onSparklesClick}
+        >
+            <i className="fa fa-sparkles" />
         </div>
     ) : undefined;
     const appMenuButton =
@@ -658,7 +665,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         <div ref={tabbarWrapperRef} className="tab-bar-wrapper">
             <WindowDrag ref={draggerLeftRef} className="left" />
             {appMenuButton}
-            {devLabel}
+            {waveaiButton}
             <WorkspaceSwitcher ref={workspaceSwitcherRef} />
             <div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
                 <div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: `${tabsWrapperWidth}px` }}>

frontend/app/tab/workspaceswitcher.scss

@@ -9,7 +9,7 @@
     align-items: center;
     gap: 12px;
     border-radius: 6px;
-    margin-right: 13px;
+    margin-right: 6px;
     box-sizing: border-box;
     background-color: rgb(from var(--main-text-color) r g b / 0.1) !important;
 

frontend/app/workspace/widgets.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Tooltip } from "@/app/element/tooltip";
-import { NotificationPopover } from "@/app/notification/notificationpopover";
 import { ContextMenuModel } from "@/app/store/contextmenu";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
@@ -106,12 +105,12 @@ const Widgets = memo(() => {
 
         if (normalHeight > containerHeight - gracePeriod) {
             newMode = "compact";
-            
+
             // Calculate total widget count for supercompact check
             const totalWidgets = (widgets?.length || 0) + (showHelp ? 2 : 0);
             const minHeightPerWidget = 32;
             const requiredHeight = totalWidgets * minHeightPerWidget;
-            
+
             if (requiredHeight > containerHeight) {
                 newMode = "supercompact";
             }
@@ -194,7 +193,9 @@ const Widgets = memo(() => {
                 {mode === "supercompact" ? (
                     <>
                         <div className="grid grid-cols-2 gap-0 w-full">
-                            {widgets?.map((data, idx) => <Widget key={`widget-${idx}`} widget={data} mode={mode} />)}
+                            {widgets?.map((data, idx) => (
+                                <Widget key={`widget-${idx}`} widget={data} mode={mode} />
+                            ))}
                         </div>
                         <div className="flex-grow" />
                         {showHelp ? (
@@ -206,7 +207,9 @@ const Widgets = memo(() => {
                     </>
                 ) : (
                     <>
-                        {widgets?.map((data, idx) => <Widget key={`widget-${idx}`} widget={data} mode={mode} />)}
+                        {widgets?.map((data, idx) => (
+                            <Widget key={`widget-${idx}`} widget={data} mode={mode} />
+                        ))}
                         <div className="flex-grow" />
                         {showHelp ? (
                             <>
@@ -216,7 +219,14 @@ const Widgets = memo(() => {
                         ) : null}
                     </>
                 )}
-                {isDev() ? <NotificationPopover /> : null}
+                {isDev() ? (
+                    <div
+                        className="dev-label flex justify-center items-center w-full py-1 text-accent text-[30px]"
+                        title="Running Wave Dev Build"
+                    >
+                        <i className="fa fa-brands fa-dev fa-fw" />
+                    </div>
+                ) : null}
             </div>
 
             <div
@@ -233,9 +243,15 @@ const Widgets = memo(() => {
                         <Widget key="measurement-help" widget={helpWidget} mode="normal" />
                     </>
                 ) : null}
-                {isDev() ? <NotificationPopover /> : null}
+                {isDev() ? (
+                    <div
+                        className="dev-label flex justify-center items-center w-full py-1 text-accent text-[30px]"
+                        title="Running Wave Dev Build"
+                    >
+                        <i className="fa fa-brands fa-dev fa-fw" />
+                    </div>
+                ) : null}
             </div>
-
         </>
     );
 });

frontend/app/workspace/workspace-layout-model.ts

@@ -1,16 +1,15 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { isDev } from "@/store/global";
-import { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizable-panels";
-import * as jotai from "jotai";
 import { getTabMetaKeyAtom } from "@/app/store/global";
+import { globalStore } from "@/app/store/jotaiStore";
+import * as WOS from "@/app/store/wos";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
-import * as WOS from "@/app/store/wos";
-import { globalStore } from "@/app/store/jotaiStore";
-import { atoms } from "@/store/global";
+import { atoms, isDev } from "@/store/global";
+import * as jotai from "jotai";
 import { debounce } from "lodash-es";
+import { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizable-panels";
 
 const AIPANEL_DEFAULTWIDTH = 300;
 const AIPANEL_MINWIDTH = 250;
@@ -21,17 +20,17 @@ class WorkspaceLayoutModel {
     panelGroupRef: ImperativePanelGroupHandle | null;
     inResize: boolean;
     private aiPanelVisible: boolean;
-    private aiPanelWidth: number;
+    private aiPanelWidth: number | null;
     private debouncedPersistWidth: (width: number) => void;
     private initialized: boolean = false;
-    
+
     constructor() {
         this.aiPanelRef = null;
         this.panelGroupRef = null;
         this.inResize = false;
         this.aiPanelVisible = isDev();
-        this.aiPanelWidth = AIPANEL_DEFAULTWIDTH;
-        
+        this.aiPanelWidth = null;
+
         this.debouncedPersistWidth = debounce((width: number) => {
             try {
                 RpcApi.SetMetaCommand(TabRpcClient, {
@@ -43,15 +42,15 @@ class WorkspaceLayoutModel {
             }
         }, 300);
     }
-    
+
     private initializeFromTabMeta(): void {
         if (this.initialized) return;
         this.initialized = true;
-        
+
         try {
             const savedVisible = globalStore.get(this.getPanelOpenAtom());
             const savedWidth = globalStore.get(this.getPanelWidthAtom());
-            
+
             if (savedVisible != null) {
                 this.aiPanelVisible = savedVisible;
             }
@@ -62,15 +61,15 @@ class WorkspaceLayoutModel {
             console.warn("Failed to initialize from tab meta:", e);
         }
     }
-    
+
     private getTabId(): string {
         return globalStore.get(atoms.staticTabId);
     }
-    
+
     private getPanelOpenAtom(): jotai.Atom<boolean> {
         return getTabMetaKeyAtom(this.getTabId(), "waveai:panelopen");
     }
-    
+
     private getPanelWidthAtom(): jotai.Atom<number> {
         return getTabMetaKeyAtom(this.getTabId(), "waveai:panelwidth");
     }
@@ -133,6 +132,9 @@ class WorkspaceLayoutModel {
 
     getAIPanelWidth(): number {
         this.initializeFromTabMeta();
+        if (this.aiPanelWidth == null) {
+            this.aiPanelWidth = Math.max(AIPANEL_DEFAULTWIDTH, window.innerWidth / 3);
+        }
         return this.aiPanelWidth;
     }