update tab bar, change flag to be a flag, resort badges

wavetermdev · sawka · Mar 9, 2026 · Feb 19, 2026 · Feb 20, 2026 · Mar 2, 2026
commit 897f2d4a6193dcdca6cd7468e24b7761ddbbe2a1
diff --git a/frontend/app/app.tsx b/frontend/app/app.tsx
@@ -237,7 +237,7 @@ const BadgeAutoClearing = () => {
             prevFocusedBlockIdRef.current !== focusedBlockId || prevDocHasFocusRef.current !== documentHasFocus;
         prevFocusedBlockIdRef.current = focusedBlockId;
         prevDocHasFocusRef.current = documentHasFocus;
-        const delay = focusSwitched ? 1000 : 3000;
+        const delay = focusSwitched ? 500 : 3000;
         const timeoutId = setTimeout(() => {
             if (!document.hasFocus()) {
                 return;
@@ -257,7 +257,7 @@ const BadgeAutoClearing = () => {
         }
         const focusSwitched = prevTabDocHasFocusRef.current !== documentHasFocus;
         prevTabDocHasFocusRef.current = documentHasFocus;
-        const delay = focusSwitched ? 1000 : 3000;
+        const delay = focusSwitched ? 500 : 3000;
         const timeoutId = setTimeout(() => {
             if (!document.hasFocus()) {
                 return;

diff --git a/frontend/app/store/badge.ts b/frontend/app/store/badge.ts
@@ -113,13 +113,7 @@ function getTabBadgeAtom(tabId: string): Atom<Badge[]> {
         if (tabBadge != null) {
             badges.push(tabBadge);
         }
-        badges.sort((a, b) => {
-            if (a.priority !== b.priority) {
-                return b.priority - a.priority;
-            }
-            return b.badgeid < a.badgeid ? -1 : b.badgeid > a.badgeid ? 1 : 0;
-        });
-        return badges;
+        return sortBadgesForTab(badges);
     });
     TabBadgeAtomCache.set(tabId, rtn);
     return rtn;
@@ -197,6 +191,24 @@ function setupBadgesSubscription() {
     });
 }
 
+function sortBadges(badges: Badge[]): Badge[] {
+    return [...badges].sort((a, b) => {
+        if (a.priority !== b.priority) {
+            return b.priority - a.priority;
+        }
+        return b.badgeid < a.badgeid ? -1 : b.badgeid > a.badgeid ? 1 : 0;
+    });
+}
+
+function sortBadgesForTab(badges: Badge[]): Badge[] {
+    return [...badges].sort((a, b) => {
+        if (a.priority !== b.priority) {
+            return b.priority - a.priority;
+        }
+        return a.badgeid < b.badgeid ? -1 : a.badgeid > b.badgeid ? 1 : 0;
+    });
+}
+
 export {
     clearAllBadges,
     clearBadgeById,
@@ -209,4 +221,6 @@ export {
     loadBadges,
     setBadge,
     setupBadgesSubscription,
+    sortBadges,
+    sortBadgesForTab,
 };
diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss
@@ -4,7 +4,7 @@
 .tab {
     position: absolute;
     width: 130px;
-    height: calc(100% - 1px);
+    height: calc(100% - 3px);
     padding: 0 0 0 0;
     box-sizing: border-box;
     font-weight: bold;
@@ -45,7 +45,8 @@
         }
 
         .name {
-            color: var(--main-text-color);
+            color: rgba(255, 255, 255, 1);
+            font-weight: 600;
         }
 
         & + .tab::after,

diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
@@ -1,7 +1,7 @@
 // Copyright 2026, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { getTabBadgeAtom } from "@/app/store/badge";
+import { getTabBadgeAtom, sortBadgesForTab } from "@/app/store/badge";
 import { atoms, getOrefMetaKeyAtom, globalStore, recordTEvent, refocusNode } from "@/app/store/global";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
@@ -11,7 +11,8 @@ import { validateCssColor } from "@/util/color-validator";
 import { fireAndForget, makeIconClass } from "@/util/util";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { v7 as uuidv7 } from "uuid";
 import { ObjectService } from "../store/services";
 import { makeORef, useWaveObjectValue } from "../store/wos";
 import "./tab.scss";
@@ -37,14 +38,24 @@ interface TabVProps {
 
 interface TabBadgesProps {
     badges?: Badge[] | null;
+    flagColor?: string | null;
 }
 
-function TabBadges({ badges }: TabBadgesProps) {
-    if (!badges?.[0]) {
+function TabBadges({ badges, flagColor }: TabBadgesProps) {
+    const flagBadgeId = useMemo(() => uuidv7(), []);
+    const allBadges = useMemo(() => {
+        const base = badges ?? [];
+        if (!flagColor) {
+            return base;
+        }
+        const flagBadge: Badge = { icon: "flag", color: flagColor, priority: 0, badgeid: flagBadgeId };
+        return sortBadgesForTab([...base, flagBadge]);
+    }, [badges, flagColor, flagBadgeId]);
+    if (!allBadges[0]) {
         return null;
     }
-    const firstBadge = badges[0];
-    const extraBadges = badges.slice(1, 3);
+    const firstBadge = allBadges[0];
+    const extraBadges = allBadges.slice(1, 3);
     return (
         <div className="tab-indicator pointer-events-none flex items-center">
             <i
@@ -202,12 +213,6 @@ const TabV = forwardRef<HTMLDivElement, TabVProps>((props, ref) => {
             data-tab-id={tabId}
         >
             <div className="tab-inner">
-                {flagColor && (
-                    <div
-                        className="pointer-events-none absolute bottom-0 left-0 right-0 rounded-b-[6px]"
-                        style={{ height: "3px", backgroundColor: flagColor, opacity: active ? 1 : 0.6 }}
-                    />
-                )}
                 <div
                     ref={editableRef}
                     className={clsx("name", { focused: isEditable })}
@@ -219,7 +224,7 @@ const TabV = forwardRef<HTMLDivElement, TabVProps>((props, ref) => {
                 >
                     {tabName}
                 </div>
-                <TabBadges badges={badges} />
+                <TabBadges badges={badges} flagColor={flagColor} />
                 <Button
                     className="ghost grey close"
                     onClick={onClose}
@@ -266,15 +271,13 @@ function buildTabContextMenu(
             label: "None",
             type: "checkbox",
             checked: currentFlagColor == null,
-            click: () =>
-                fireAndForget(() => ObjectService.UpdateObjectMeta(tabORef, { "tab:flagcolor": null })),
+            click: () => fireAndForget(() => ObjectService.UpdateObjectMeta(tabORef, { "tab:flagcolor": null })),
         },
         ...FlagColors.map((fc) => ({
             label: fc.label,
             type: "checkbox" as const,
             checked: currentFlagColor === fc.value,
-            click: () =>
-                fireAndForget(() => ObjectService.UpdateObjectMeta(tabORef, { "tab:flagcolor": fc.value })),
+            click: () => fireAndForget(() => ObjectService.UpdateObjectMeta(tabORef, { "tab:flagcolor": fc.value })),
         })),
     ];
     menu.push({ label: "Flag Tab", type: "submenu", submenu: flagSubmenu }, { type: "separator" });

diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tab-bar-wrapper {
-    padding-top: 6px;
+    padding-top: 3px;
     position: relative;
     user-select: none;
     display: flex;
@@ -11,6 +11,9 @@
     width: 100vw;
     -webkit-app-region: drag;
     height: max(33px, calc(33px * var(--zoomfactor-inv)));
+    backdrop-filter: blur(20px);
+    background: rgba(0, 0, 0, 0.35);
+    flex-shrink: 0;
 
     button {
         -webkit-app-region: no-drag;
@@ -27,6 +30,7 @@
         flex-direction: row;
         height: 27px;
         -webkit-app-region: no-drag;
+        margin-bottom: 1px;
     }
 
     .pinned-tab-spacer {
@@ -48,6 +52,7 @@
     .add-tab {
         padding: 0 10px;
         height: 27px;
+        margin-bottom: 2px;
     }
 
     // Customize scrollbar styles

diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
@@ -61,13 +61,12 @@ const WaveAIButton = memo(({ divRef }: { divRef?: React.RefObject<HTMLDivElement
             content="Toggle Wave AI Panel"
             placement="bottom"
             hideOnClick
-            divClassName={`flex h-[26px] px-1.5 justify-end items-center rounded-md mr-1 box-border cursor-pointer bg-hover hover:bg-hoverbg transition-colors text-[12px] ${aiPanelOpen ? "text-accent" : "text-secondary"}`}
+            divClassName={`flex h-[22px] px-3.5 justify-end mb-1 items-center rounded-md mr-1 box-border cursor-pointer bg-hover hover:bg-hoverbg transition-colors text-[12px] ${aiPanelOpen ? "text-accent" : "text-secondary"}`}
             divStyle={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
             divOnClick={onClick}
             divRef={divRef}
         >
             <i className="fa fa-sparkles" />
-            <span className="font-bold ml-1 -top-px font-mono">AI</span>
         </Tooltip>
     );
 });
@@ -645,7 +644,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     }
 
     // Calculate window drag right width
-    let windowDragRightWidth = 6;
+    let windowDragRightWidth = 12;
     if (isWindows()) {
         if (zoomFactor > 0) {
             windowDragRightWidth = 139 / zoomFactor;
@@ -683,7 +682,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                 placement="bottom"
                 hideOnClick
                 divRef={workspaceSwitcherRef}
-                divClassName="flex items-center h-full"
+                divClassName="flex items-center"
             >
                 <WorkspaceSwitcher />
             </Tooltip>

diff --git a/frontend/app/tab/workspaceswitcher.scss b/frontend/app/tab/workspaceswitcher.scss
@@ -3,13 +3,14 @@
 
 .workspace-switcher-button {
     display: flex;
-    height: 26px;
+    height: 22px;
     padding: 0px 12px;
     justify-content: flex-end;
     align-items: center;
     gap: 12px;
     border-radius: 6px;
     margin-right: 6px;
+    margin-bottom: 4px;
     box-sizing: border-box;
     background-color: rgb(from var(--main-text-color) r g b / 0.1) !important;