+
{innerContent}
);
diff --git a/frontend/app/tab/tabcontextmenu.ts b/frontend/app/tab/tabcontextmenu.ts
new file mode 100644
index 0000000000..5f70bc9b9b
--- /dev/null
+++ b/frontend/app/tab/tabcontextmenu.ts
@@ -0,0 +1,110 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { getOrefMetaKeyAtom, globalStore, recordTEvent } from "@/app/store/global";
+import { TabRpcClient } from "@/app/store/wshrpcutil";
+import { fireAndForget } from "@/util/util";
+import { makeORef } from "../store/wos";
+import type { TabEnv } from "./tab";
+
+const FlagColors: { label: string; value: string }[] = [
+ { label: "Green", value: "#58C142" },
+ { label: "Teal", value: "#00FFDB" },
+ { label: "Blue", value: "#429DFF" },
+ { label: "Purple", value: "#BF55EC" },
+ { label: "Red", value: "#FF453A" },
+ { label: "Orange", value: "#FF9500" },
+ { label: "Yellow", value: "#FFE900" },
+];
+
+export function buildTabBarContextMenu(env: TabEnv): ContextMenuItem[] {
+ const currentTabBar = globalStore.get(env.getSettingsKeyAtom("app:tabbar")) ?? "top";
+ const tabBarSubmenu: ContextMenuItem[] = [
+ {
+ label: "Top",
+ type: "checkbox",
+ checked: currentTabBar === "top",
+ click: () => fireAndForget(() => env.rpc.SetConfigCommand(TabRpcClient, { "app:tabbar": "top" })),
+ },
+ {
+ label: "Left",
+ type: "checkbox",
+ checked: currentTabBar === "left",
+ click: () => fireAndForget(() => env.rpc.SetConfigCommand(TabRpcClient, { "app:tabbar": "left" })),
+ },
+ ];
+ return [{ label: "Tab Bar Position", type: "submenu", submenu: tabBarSubmenu }];
+}
+
+export function buildTabContextMenu(
+ id: string,
+ renameRef: React.RefObject<(() => void) | null>,
+ onClose: (event: React.MouseEvent
| null) => void,
+ env: TabEnv
+): ContextMenuItem[] {
+ const menu: ContextMenuItem[] = [];
+ menu.push(
+ { label: "Rename Tab", click: () => renameRef.current?.() },
+ {
+ label: "Copy TabId",
+ click: () => fireAndForget(() => navigator.clipboard.writeText(id)),
+ },
+ { type: "separator" }
+ );
+ const tabORef = makeORef("tab", id);
+ const currentFlagColor = globalStore.get(getOrefMetaKeyAtom(tabORef, "tab:flagcolor")) ?? null;
+ const flagSubmenu: ContextMenuItem[] = [
+ {
+ label: "None",
+ type: "checkbox",
+ checked: currentFlagColor == null,
+ click: () =>
+ fireAndForget(() =>
+ env.rpc.SetMetaCommand(TabRpcClient, { oref: tabORef, meta: { "tab:flagcolor": null } })
+ ),
+ },
+ ...FlagColors.map((fc) => ({
+ label: fc.label,
+ type: "checkbox" as const,
+ checked: currentFlagColor === fc.value,
+ click: () =>
+ fireAndForget(() =>
+ env.rpc.SetMetaCommand(TabRpcClient, { oref: tabORef, meta: { "tab:flagcolor": fc.value } })
+ ),
+ })),
+ ];
+ menu.push({ label: "Flag Tab", type: "submenu", submenu: flagSubmenu }, { type: "separator" });
+ const fullConfig = globalStore.get(env.atoms.fullConfigAtom);
+ const bgPresets: string[] = [];
+ for (const key in fullConfig?.presets ?? {}) {
+ if (key.startsWith("bg@") && fullConfig.presets[key] != null) {
+ bgPresets.push(key);
+ }
+ }
+ bgPresets.sort((a, b) => {
+ const aOrder = fullConfig.presets[a]["display:order"] ?? 0;
+ const bOrder = fullConfig.presets[b]["display:order"] ?? 0;
+ return aOrder - bOrder;
+ });
+ if (bgPresets.length > 0) {
+ const submenu: ContextMenuItem[] = [];
+ const oref = makeORef("tab", id);
+ for (const presetName of bgPresets) {
+ // preset cannot be null (filtered above)
+ const preset = fullConfig.presets[presetName];
+ submenu.push({
+ label: preset["display:name"] ?? presetName,
+ click: () =>
+ fireAndForget(async () => {
+ await env.rpc.SetMetaCommand(TabRpcClient, { oref, meta: preset });
+ env.rpc.ActivityCommand(TabRpcClient, { settabtheme: 1 }, { noresponse: true });
+ recordTEvent("action:settabtheme");
+ }),
+ });
+ }
+ menu.push({ label: "Backgrounds", type: "submenu", submenu }, { type: "separator" });
+ }
+ menu.push(...buildTabBarContextMenu(env), { type: "separator" });
+ menu.push({ label: "Close Tab", click: () => onClose(null) });
+ return menu;
+}
diff --git a/frontend/app/tab/updatebanner.tsx b/frontend/app/tab/updatebanner.tsx
index 5150c7e338..b589558281 100644
--- a/frontend/app/tab/updatebanner.tsx
+++ b/frontend/app/tab/updatebanner.tsx
@@ -2,11 +2,19 @@
// SPDX-License-Identifier: Apache-2.0
import { Tooltip } from "@/element/tooltip";
-import { useWaveEnv } from "@/app/waveenv/waveenv";
-import { TabBarEnv } from "./tabbarenv";
+import { WaveEnv, WaveEnvSubset, useWaveEnv } from "@/app/waveenv/waveenv";
import { useAtomValue } from "jotai";
import { memo, useCallback } from "react";
+type UpdateBannerEnv = WaveEnvSubset<{
+ electron: {
+ installAppUpdate: WaveEnv["electron"]["installAppUpdate"];
+ };
+ atoms: {
+ updaterStatusAtom: WaveEnv["atoms"]["updaterStatusAtom"];
+ };
+}>;
+
function getUpdateStatusMessage(status: string): string {
switch (status) {
case "ready":
@@ -21,7 +29,7 @@ function getUpdateStatusMessage(status: string): string {
}
const UpdateStatusBannerComponent = () => {
- const env = useWaveEnv();
+ const env = useWaveEnv();
const appUpdateStatus = useAtomValue(env.atoms.updaterStatusAtom);
const updateStatusMessage = getUpdateStatusMessage(appUpdateStatus);
diff --git a/frontend/app/tab/vtab.tsx b/frontend/app/tab/vtab.tsx
index b6c3a29a54..7edd7b0f45 100644
--- a/frontend/app/tab/vtab.tsx
+++ b/frontend/app/tab/vtab.tsx
@@ -19,29 +19,37 @@ export interface VTabItem {
interface VTabProps {
tab: VTabItem;
active: boolean;
+ showDivider?: boolean;
isDragging: boolean;
isReordering: boolean;
onSelect: () => void;
onClose?: () => void;
onRename?: (newName: string) => void;
+ onContextMenu?: (event: React.MouseEvent) => void;
onDragStart: (event: React.DragEvent) => void;
onDragOver: (event: React.DragEvent) => void;
onDrop: (event: React.DragEvent) => void;
onDragEnd: () => void;
+ onHoverChanged?: (isHovered: boolean) => void;
+ renameRef?: React.RefObject<(() => void) | null>;
}
export function VTab({
tab,
active,
+ showDivider = true,
isDragging,
isReordering,
onSelect,
onClose,
onRename,
+ onContextMenu,
onDragStart,
onDragOver,
onDrop,
onDragEnd,
+ onHoverChanged,
+ renameRef,
}: VTabProps) {
const [originalName, setOriginalName] = useState(tab.name);
const [isEditable, setIsEditable] = useState(false);
@@ -100,6 +108,10 @@ export function VTab({
}, RenameFocusDelayMs);
}, [isReordering, onRename, selectEditableText]);
+ if (renameRef != null) {
+ renameRef.current = startRename;
+ }
+
const handleBlur = () => {
if (!editableRef.current) {
return;
@@ -134,36 +146,48 @@ export function VTab({
return (
{
event.stopPropagation();
startRename();
}}
+ onContextMenu={onContextMenu}
onDragStart={onDragStart}
onDragOver={onDragOver}
onDrop={onDrop}
onDragEnd={onDragEnd}
+ onMouseEnter={() => onHoverChanged?.(true)}
+ onMouseLeave={() => onHoverChanged?.(false)}
className={cn(
- "group relative flex h-9 w-full cursor-pointer items-center border-b border-border/70 pl-2 text-sm transition-colors select-none",
+ "group relative flex h-9 w-full shrink-0 cursor-pointer items-center pl-3 text-xs transition-colors select-none",
"whitespace-nowrap",
- active
- ? "bg-accent/20 text-primary"
- : isReordering
- ? "bg-transparent text-secondary"
- : "bg-transparent text-secondary hover:bg-hover",
+ active ? "text-primary" : isReordering ? "text-secondary" : "text-secondary hover:text-primary",
isDragging && "opacity-50"
)}
>
+ {active && (
+
+ )}
+ {!active && !isReordering && (
+
+ )}
+
{
diff --git a/frontend/app/tab/vtabbar.tsx b/frontend/app/tab/vtabbar.tsx
index 0634645789..f8cbc751fb 100644
--- a/frontend/app/tab/vtabbar.tsx
+++ b/frontend/app/tab/vtabbar.tsx
@@ -1,40 +1,92 @@
// Copyright 2026, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
+import { Tooltip } from "@/app/element/tooltip";
import { getTabBadgeAtom } from "@/app/store/badge";
import { makeORef } from "@/app/store/wos";
import { TabRpcClient } from "@/app/store/wshrpcutil";
import { useWaveEnv } from "@/app/waveenv/waveenv";
+import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
import { validateCssColor } from "@/util/color-validator";
import { cn, fireAndForget } from "@/util/util";
import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { buildTabBarContextMenu, buildTabContextMenu } from "./tabcontextmenu";
+import { UpdateStatusBanner } from "./updatebanner";
import { VTab, VTabItem } from "./vtab";
import { VTabBarEnv } from "./vtabbarenv";
+import { WorkspaceSwitcher } from "./workspaceswitcher";
export type { VTabItem } from "./vtab";
+const VTabBarAIButton = memo(() => {
+ const env = useWaveEnv
();
+ const aiPanelOpen = useAtomValue(WorkspaceLayoutModel.getInstance().panelVisibleAtom);
+ const hideAiButton = useAtomValue(env.getSettingsKeyAtom("app:hideaibutton"));
+
+ const onClick = () => {
+ const currentVisible = WorkspaceLayoutModel.getInstance().getAIPanelVisible();
+ WorkspaceLayoutModel.getInstance().setAIPanelVisible(!currentVisible);
+ };
+
+ if (hideAiButton) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+});
+VTabBarAIButton.displayName = "VTabBarAIButton";
+
+const MacOSHeader = memo(() => {
+ const env = useWaveEnv();
+ const isFullScreen = useAtomValue(env.atoms.isFullScreen);
+ return (
+ <>
+ {!isFullScreen && (
+
+ )}
+
+
+
+
+
+
+
+
+ );
+});
+MacOSHeader.displayName = "MacOSHeader";
+
interface VTabBarProps {
workspace: Workspace;
- width?: number;
className?: string;
}
-function clampWidth(width?: number): number {
- if (width == null) {
- return 220;
- }
- if (width < 100) {
- return 100;
- }
- if (width > 400) {
- return 400;
- }
- return width;
-}
-
interface VTabWrapperProps {
tabId: string;
active: boolean;
+ showDivider: boolean;
isDragging: boolean;
isReordering: boolean;
hoverResetVersion: number;
@@ -46,11 +98,13 @@ interface VTabWrapperProps {
onDragOver: (event: React.DragEvent) => void;
onDrop: (event: React.DragEvent) => void;
onDragEnd: () => void;
+ onHoverChanged: (isHovered: boolean) => void;
}
function VTabWrapper({
tabId,
active,
+ showDivider,
isDragging,
isReordering,
hoverResetVersion,
@@ -61,10 +115,12 @@ function VTabWrapper({
onDragOver,
onDrop,
onDragEnd,
+ onHoverChanged,
}: VTabWrapperProps) {
const env = useWaveEnv();
const [tabData] = env.wos.useWaveObjectValue(makeORef("tab", tabId));
const badges = useAtomValue(getTabBadgeAtom(tabId, env));
+ const renameRef = useRef<(() => void) | null>(null);
const rawFlagColor = tabData?.meta?.["tab:flagcolor"];
let flagColor: string | null = null;
@@ -84,28 +140,43 @@ function VTabWrapper({
flagColor,
};
+ const handleContextMenu = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const menu = buildTabContextMenu(tabId, renameRef, () => onClose(), env);
+ env.showContextMenu(menu, e);
+ },
+ [tabId, onClose, env]
+ );
+
return (
);
}
-export function VTabBar({ workspace, width, className }: VTabBarProps) {
+export function VTabBar({ workspace, className }: VTabBarProps) {
const env = useWaveEnv();
const activeTabId = useAtomValue(env.atoms.staticTabId);
const reinitVersion = useAtomValue(env.atoms.reinitVersion);
+ const documentHasFocus = useAtomValue(env.atoms.documentHasFocus);
const tabIds = workspace?.tabids ?? [];
const [orderedTabIds, setOrderedTabIds] = useState(tabIds);
@@ -113,8 +184,14 @@ export function VTabBar({ workspace, width, className }: VTabBarProps) {
const [dropIndex, setDropIndex] = useState(null);
const [dropLineTop, setDropLineTop] = useState(null);
const [hoverResetVersion, setHoverResetVersion] = useState(0);
+ const [hoveredTabId, setHoveredTabId] = useState(null);
+ const [isNewTabHovered, setIsNewTabHovered] = useState(false);
const dragSourceRef = useRef(null);
const didResetHoverForDragRef = useRef(false);
+ const scrollContainerRef = useRef(null);
+ const scrollAnimFrameRef = useRef(null);
+ const scrollDirectionRef = useRef(0);
+ const scrollSpeedRef = useRef(0);
useEffect(() => {
setOrderedTabIds(tabIds);
@@ -126,9 +203,75 @@ export function VTabBar({ workspace, width, className }: VTabBarProps) {
}
}, [reinitVersion]);
- const barWidth = useMemo(() => clampWidth(width), [width]);
+ useEffect(() => {
+ if (activeTabId == null || scrollContainerRef.current == null) {
+ return;
+ }
+ const el = scrollContainerRef.current.querySelector(`[data-tabid="${activeTabId}"]`);
+ el?.scrollIntoView({ block: "nearest" });
+ }, [activeTabId]);
+
+ useEffect(() => {
+ if (!documentHasFocus || activeTabId == null || scrollContainerRef.current == null) {
+ return;
+ }
+ const el = scrollContainerRef.current.querySelector(`[data-tabid="${activeTabId}"]`);
+ el?.scrollIntoView({ block: "nearest" });
+ }, [documentHasFocus]);
+
+ const stopScrollLoop = useCallback(() => {
+ if (scrollAnimFrameRef.current != null) {
+ cancelAnimationFrame(scrollAnimFrameRef.current);
+ scrollAnimFrameRef.current = null;
+ }
+ scrollDirectionRef.current = 0;
+ }, []);
+
+ const startScrollLoop = useCallback(() => {
+ if (scrollAnimFrameRef.current != null) {
+ return;
+ }
+ const loop = () => {
+ const container = scrollContainerRef.current;
+ if (container == null || scrollDirectionRef.current === 0) {
+ scrollAnimFrameRef.current = null;
+ return;
+ }
+ container.scrollTop += scrollDirectionRef.current * scrollSpeedRef.current;
+ scrollAnimFrameRef.current = requestAnimationFrame(loop);
+ };
+ scrollAnimFrameRef.current = requestAnimationFrame(loop);
+ }, []);
+
+ const updateScrollFromDragY = useCallback(
+ (clientY: number) => {
+ const container = scrollContainerRef.current;
+ if (container == null) {
+ return;
+ }
+ const EdgeZone = 60;
+ const MaxScrollSpeed = 12;
+ const rect = container.getBoundingClientRect();
+ const relY = clientY - rect.top;
+ const height = rect.height;
+ if (relY < EdgeZone) {
+ scrollDirectionRef.current = -1;
+ scrollSpeedRef.current = MaxScrollSpeed * (1 - relY / EdgeZone);
+ startScrollLoop();
+ } else if (relY > height - EdgeZone) {
+ scrollDirectionRef.current = 1;
+ scrollSpeedRef.current = MaxScrollSpeed * (1 - (height - relY) / EdgeZone);
+ startScrollLoop();
+ } else {
+ scrollDirectionRef.current = 0;
+ stopScrollLoop();
+ }
+ },
+ [startScrollLoop, stopScrollLoop]
+ );
const clearDragState = () => {
+ stopScrollLoop();
if (dragSourceRef.current != null && !didResetHoverForDragRef.current) {
didResetHoverForDragRef.current = true;
setHoverResetVersion((version) => version + 1);
@@ -160,18 +303,28 @@ export function VTabBar({ workspace, width, className }: VTabBarProps) {
fireAndForget(() => env.rpc.UpdateWorkspaceTabIdsCommand(TabRpcClient, workspace.oid, nextTabIds));
};
+ const handleTabBarContextMenu = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ const menu = buildTabBarContextMenu(env);
+ env.showContextMenu(menu, e);
+ },
+ [env]
+ );
+
return (
+ {env.isMacOS() &&
}
{
event.preventDefault();
+ updateScrollFromDragY(event.clientY);
if (event.target === event.currentTarget) {
setDropIndex(orderedTabIds.length);
setDropLineTop(event.currentTarget.scrollHeight);
@@ -185,61 +338,68 @@ export function VTabBar({ workspace, width, className }: VTabBarProps) {
clearDragState();
}}
>
- {orderedTabIds.map((tabId, index) => (
-
env.electron.setActiveTab(tabId)}
- onClose={() => fireAndForget(() => env.electron.closeTab(workspace.oid, tabId, false))}
- onRename={(newName) =>
- fireAndForget(() => env.rpc.UpdateTabNameCommand(TabRpcClient, tabId, newName))
- }
- onDragStart={(event) => {
- didResetHoverForDragRef.current = false;
- dragSourceRef.current = tabId;
- event.dataTransfer.effectAllowed = "move";
- event.dataTransfer.setData("text/plain", tabId);
- setDragTabId(tabId);
- setDropIndex(index);
- setDropLineTop(event.currentTarget.offsetTop);
- }}
- onDragOver={(event) => {
- event.preventDefault();
- const rect = event.currentTarget.getBoundingClientRect();
- const relativeY = event.clientY - rect.top;
- const midpoint = event.currentTarget.offsetHeight / 2;
- const insertBefore = relativeY < midpoint;
- setDropIndex(insertBefore ? index : index + 1);
- setDropLineTop(
- insertBefore
- ? event.currentTarget.offsetTop
- : event.currentTarget.offsetTop + event.currentTarget.offsetHeight
- );
- }}
- onDrop={(event) => {
- event.preventDefault();
- if (dropIndex != null) {
- reorder(dropIndex);
+ {orderedTabIds.map((tabId, index) => {
+ const isActive = tabId === activeTabId;
+ const isHovered = tabId === hoveredTabId;
+ const isLast = index === orderedTabIds.length - 1;
+ const nextTabId = orderedTabIds[index + 1];
+ const isNextActive = nextTabId === activeTabId;
+ const isNextHovered = nextTabId === hoveredTabId;
+ return (
+
- ))}
-
+ isDragging={dragTabId === tabId}
+ isReordering={dragTabId != null}
+ hoverResetVersion={hoverResetVersion}
+ index={index}
+ onSelect={() => env.electron.setActiveTab(tabId)}
+ onClose={() => fireAndForget(() => env.electron.closeTab(workspace.oid, tabId, false))}
+ onRename={(newName) =>
+ fireAndForget(() => env.rpc.UpdateTabNameCommand(TabRpcClient, tabId, newName))
+ }
+ onDragStart={(event) => {
+ didResetHoverForDragRef.current = false;
+ dragSourceRef.current = tabId;
+ event.dataTransfer.effectAllowed = "move";
+ event.dataTransfer.setData("text/plain", tabId);
+ setDragTabId(tabId);
+ setDropIndex(index);
+ setDropLineTop(event.currentTarget.offsetTop);
+ }}
+ onDragOver={(event) => {
+ event.preventDefault();
+ const rect = event.currentTarget.getBoundingClientRect();
+ const relativeY = event.clientY - rect.top;
+ const midpoint = event.currentTarget.offsetHeight / 2;
+ const insertBefore = relativeY < midpoint;
+ setDropIndex(insertBefore ? index : index + 1);
+ setDropLineTop(
+ insertBefore
+ ? event.currentTarget.offsetTop
+ : event.currentTarget.offsetTop + event.currentTarget.offsetHeight
+ );
+ }}
+ onDrop={(event) => {
+ event.preventDefault();
+ if (dropIndex != null) {
+ reorder(dropIndex);
+ }
+ clearDragState();
+ }}
+ onDragEnd={clearDragState}
+ onHoverChanged={(isHovered) => setHoveredTabId(isHovered ? tabId : null)}
+ />
+ );
+ })}
{dragTabId != null && dropIndex != null && dropLineTop != null && (
)}
+
-
+ {!(showLeftTabBar && isMacOS()) &&
}
+ {showLeftTabBar && isMacOS() &&
}
-
-
+
+
+
+ {showLeftTabBar && }
+
+
+
+
+
+
-
-
+
+
{tabId === "" ? (
No Active Tab
) : (
-
+
)}
diff --git a/frontend/builder/builder-workspace.tsx b/frontend/builder/builder-workspace.tsx
index 94a06fad83..aab14ff458 100644
--- a/frontend/builder/builder-workspace.tsx
+++ b/frontend/builder/builder-workspace.tsx
@@ -97,7 +97,7 @@ const BuilderWorkspace = memo(() => {
-
+
diff --git a/frontend/preview/previews/vtabbar.preview.tsx b/frontend/preview/previews/vtabbar.preview.tsx
index a814291573..90b7907be2 100644
--- a/frontend/preview/previews/vtabbar.preview.tsx
+++ b/frontend/preview/previews/vtabbar.preview.tsx
@@ -4,52 +4,123 @@
import { loadBadges, LoadBadgesEnv } from "@/app/store/badge";
import { VTabBar } from "@/app/tab/vtabbar";
import { VTabBarEnv } from "@/app/tab/vtabbarenv";
-import { useWaveEnv } from "@/app/waveenv/waveenv";
-import { TabBarMockEnvProvider, TabBarMockWorkspaceId } from "@/preview/mock/tabbar-mock";
-import { useAtomValue } from "jotai";
-import { useEffect, useState } from "react";
+import { useWaveEnv, WaveEnvContext } from "@/app/waveenv/waveenv";
+import { MockWaveEnv } from "@/preview/mock/mockwaveenv";
+import { makeTabBarMockEnv, TabBarMockWorkspaceId } from "@/preview/mock/tabbar-mock";
+import { PlatformLinux, PlatformMacOS, PlatformWindows } from "@/util/platformutil";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect, useMemo, useRef, useState } from "react";
export function VTabBarPreview() {
- const [width, setWidth] = useState(220);
+ const baseEnv = useWaveEnv();
+ const envRef = useRef(null);
+ const [platform, setPlatform] = useState(PlatformMacOS);
+
+ const tabEnv = useMemo(() => makeTabBarMockEnv(baseEnv, envRef, platform), [platform]);
+
return (
-
-
-
+
+
+
);
}
type VTabBarPreviewInnerProps = {
- width: number;
- setWidth: (width: number) => void;
+ platform: NodeJS.Platform;
+ setPlatform: (platform: NodeJS.Platform) => void;
};
-function VTabBarPreviewInner({ width, setWidth }: VTabBarPreviewInnerProps) {
+function VTabBarPreviewInner({ platform, setPlatform }: VTabBarPreviewInnerProps) {
const env = useWaveEnv();
const loadBadgesEnv = useWaveEnv();
+ const [hideAiButton, setHideAiButton] = useState(false);
+ const [isFullScreen, setIsFullScreen] = useAtom(env.atoms.isFullScreen);
+ const [fullConfig, setFullConfig] = useAtom(env.atoms.fullConfigAtom);
+ const [updaterStatus, setUpdaterStatus] = useAtom(env.atoms.updaterStatusAtom);
+ const [width, setWidth] = useState(220);
const workspace = useAtomValue(env.wos.getWaveObjectAtom(`workspace:${TabBarMockWorkspaceId}`));
useEffect(() => {
loadBadges(loadBadgesEnv);
}, []);
+ useEffect(() => {
+ setFullConfig((prev) => ({
+ ...(prev ?? ({} as FullConfigType)),
+ settings: {
+ ...(prev?.settings ?? {}),
+ "app:hideaibutton": hideAiButton,
+ },
+ }));
+ }, [hideAiButton, setFullConfig]);
+
return (
-
-
-
Width: {width}px
-
setWidth(Number(event.target.value))}
- className="w-full cursor-pointer"
- />
-
- Drag tabs to reorder. Names, badges, and close buttons remain single-line.
-
+
+
+
+
+
+
+
-
- {workspace != null &&
}
+
+
+
+ {workspace != null && }
+
);
diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts
index ddcb4a63e7..3dede74071 100644
--- a/frontend/types/gotypes.d.ts
+++ b/frontend/types/gotypes.d.ts
@@ -1121,6 +1121,7 @@ declare global {
"bg:blendmode"?: string;
"bg:bordercolor"?: string;
"bg:activebordercolor"?: string;
+ "layout:vtabbarwidth"?: number;
"waveai:panelopen"?: boolean;
"waveai:panelwidth"?: number;
"waveai:model"?: string;
@@ -1305,6 +1306,7 @@ declare global {
"app:disablectrlshiftarrows"?: boolean;
"app:disablectrlshiftdisplay"?: boolean;
"app:focusfollowscursor"?: string;
+ "app:tabbar"?: string;
"feature:waveappbuilder"?: boolean;
"ai:*"?: boolean;
"ai:preset"?: string;
diff --git a/frontend/util/platformutil.ts b/frontend/util/platformutil.ts
index ded79d3394..92fc240b0a 100644
--- a/frontend/util/platformutil.ts
+++ b/frontend/util/platformutil.ts
@@ -1,15 +1,28 @@
-// Copyright 2025, Command Line Inc.
+// Copyright 2026, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
export const PlatformMacOS = "darwin";
export const PlatformWindows = "win32";
export const PlatformLinux = "linux";
export let PLATFORM: NodeJS.Platform = PlatformMacOS;
+export let MacOSVersion: string = null;
export function setPlatform(platform: NodeJS.Platform) {
PLATFORM = platform;
}
+export function setMacOSVersion(version: string) {
+ MacOSVersion = version;
+}
+
+export function isMacOSTahoeOrLater(): boolean {
+ if (!isMacOS() || MacOSVersion == null) {
+ return false;
+ }
+ const major = parseInt(MacOSVersion.split(".")[0], 10);
+ return major >= 16;
+}
+
export function isMacOS(): boolean {
return PLATFORM == PlatformMacOS;
}
diff --git a/frontend/util/util.ts b/frontend/util/util.ts
index 2e5a3b5a13..8c2d330580 100644
--- a/frontend/util/util.ts
+++ b/frontend/util/util.ts
@@ -1,4 +1,4 @@
-// Copyright 2025, Command Line Inc.
+// Copyright 2026, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0s
import base64 from "base64-js";
@@ -108,7 +108,7 @@ function jsonDeepEqual(v1: any, v2: any): boolean {
if (keys1.length !== keys2.length) {
return false;
}
- for (let key of keys1) {
+ for (const key of keys1) {
if (!jsonDeepEqual(v1[key], v2[key])) {
return false;
}
diff --git a/frontend/wave.ts b/frontend/wave.ts
index a2ecb8a426..20ee2ba97a 100644
--- a/frontend/wave.ts
+++ b/frontend/wave.ts
@@ -32,6 +32,7 @@ import { activeTabIdAtom } from "@/store/tab-model";
import * as WOS from "@/store/wos";
import { loadFonts } from "@/util/fontutil";
import { setKeyUtilPlatform } from "@/util/keyutil";
+import { isMacOS, setMacOSVersion } from "@/util/platformutil";
import { createElement } from "react";
import { createRoot } from "react-dom/client";
@@ -159,13 +160,17 @@ async function initWave(initOpts: WaveInitOpts) {
const globalWS = initWshrpc(makeTabRouteId(initOpts.tabId));
(window as any).globalWS = globalWS;
(window as any).TabRpcClient = TabRpcClient;
- await loadConnStatus();
- await loadBadges();
- initGlobalWaveEventSubs(initOpts);
- subscribeToConnEvents();
// ensures client/window/workspace are loaded into the cache before rendering
try {
+ await loadConnStatus();
+ await loadBadges();
+ initGlobalWaveEventSubs(initOpts);
+ subscribeToConnEvents();
+ if (isMacOS()) {
+ const macOSVersion = await RpcApi.MacOSVersionCommand(TabRpcClient);
+ setMacOSVersion(macOSVersion);
+ }
const [_client, waveWindow, initialTab] = await Promise.all([
WOS.loadAndPinWaveObject
(WOS.makeORef("client", initOpts.clientId)),
WOS.loadAndPinWaveObject(WOS.makeORef("window", initOpts.windowId)),
diff --git a/pkg/waveobj/metaconsts.go b/pkg/waveobj/metaconsts.go
index bf348023ac..7028d050be 100644
--- a/pkg/waveobj/metaconsts.go
+++ b/pkg/waveobj/metaconsts.go
@@ -98,6 +98,8 @@ const (
MetaKey_BgBorderColor = "bg:bordercolor"
MetaKey_BgActiveBorderColor = "bg:activebordercolor"
+ MetaKey_LayoutVTabBarWidth = "layout:vtabbarwidth"
+
MetaKey_WaveAiPanelOpen = "waveai:panelopen"
MetaKey_WaveAiPanelWidth = "waveai:panelwidth"
MetaKey_WaveAiModel = "waveai:model"
diff --git a/pkg/waveobj/wtypemeta.go b/pkg/waveobj/wtypemeta.go
index adda079c1f..027ff3eff2 100644
--- a/pkg/waveobj/wtypemeta.go
+++ b/pkg/waveobj/wtypemeta.go
@@ -100,6 +100,9 @@ type MetaTSType struct {
BgBorderColor string `json:"bg:bordercolor,omitempty"` // frame:bordercolor
BgActiveBorderColor string `json:"bg:activebordercolor,omitempty"` // frame:activebordercolor
+ // for workspace
+ LayoutVTabBarWidth int `json:"layout:vtabbarwidth,omitempty"`
+
// for tabs+waveai
WaveAiPanelOpen bool `json:"waveai:panelopen,omitempty"`
WaveAiPanelWidth int `json:"waveai:panelwidth,omitempty"`
diff --git a/pkg/wconfig/defaultconfig/settings.json b/pkg/wconfig/defaultconfig/settings.json
index ab10987fc9..8ed6af7235 100644
--- a/pkg/wconfig/defaultconfig/settings.json
+++ b/pkg/wconfig/defaultconfig/settings.json
@@ -4,6 +4,7 @@
"ai:maxtokens": 4000,
"ai:timeoutms": 60000,
"app:defaultnewblock": "term",
+ "app:tabbar": "top",
"app:confirmquit": true,
"app:hideaibutton": false,
"app:disablectrlshiftarrows": false,
diff --git a/pkg/wconfig/metaconsts.go b/pkg/wconfig/metaconsts.go
index 084dab1793..8195495ad2 100644
--- a/pkg/wconfig/metaconsts.go
+++ b/pkg/wconfig/metaconsts.go
@@ -17,6 +17,7 @@ const (
ConfigKey_AppDisableCtrlShiftArrows = "app:disablectrlshiftarrows"
ConfigKey_AppDisableCtrlShiftDisplay = "app:disablectrlshiftdisplay"
ConfigKey_AppFocusFollowsCursor = "app:focusfollowscursor"
+ ConfigKey_AppTabBar = "app:tabbar"
ConfigKey_FeatureWaveAppBuilder = "feature:waveappbuilder"
diff --git a/pkg/wconfig/settingsconfig.go b/pkg/wconfig/settingsconfig.go
index 17aafa6685..b1b10d977f 100644
--- a/pkg/wconfig/settingsconfig.go
+++ b/pkg/wconfig/settingsconfig.go
@@ -68,6 +68,7 @@ type SettingsType struct {
AppDisableCtrlShiftArrows bool `json:"app:disablectrlshiftarrows,omitempty"`
AppDisableCtrlShiftDisplay bool `json:"app:disablectrlshiftdisplay,omitempty"`
AppFocusFollowsCursor string `json:"app:focusfollowscursor,omitempty" jsonschema:"enum=off,enum=on,enum=term"`
+ AppTabBar string `json:"app:tabbar,omitempty" jsonschema:"enum=top,enum=left"`
FeatureWaveAppBuilder bool `json:"feature:waveappbuilder,omitempty"`
diff --git a/pkg/wshrpc/wshclient/wshclient.go b/pkg/wshrpc/wshclient/wshclient.go
index 110e1695ef..103089144e 100644
--- a/pkg/wshrpc/wshclient/wshclient.go
+++ b/pkg/wshrpc/wshclient/wshclient.go
@@ -615,6 +615,12 @@ func ListAllEditableAppsCommand(w *wshutil.WshRpc, opts *wshrpc.RpcOpts) ([]wshr
return resp, err
}
+// command "macosversion", wshserver.MacOSVersionCommand
+func MacOSVersionCommand(w *wshutil.WshRpc, opts *wshrpc.RpcOpts) (string, error) {
+ resp, err := sendRpcRequestCallHelper[string](w, "macosversion", nil, opts)
+ return resp, err
+}
+
// command "makedraftfromlocal", wshserver.MakeDraftFromLocalCommand
func MakeDraftFromLocalCommand(w *wshutil.WshRpc, data wshrpc.CommandMakeDraftFromLocalData, opts *wshrpc.RpcOpts) (*wshrpc.CommandMakeDraftFromLocalRtnData, error) {
resp, err := sendRpcRequestCallHelper[*wshrpc.CommandMakeDraftFromLocalRtnData](w, "makedraftfromlocal", data, opts)
diff --git a/pkg/wshrpc/wshrpctypes.go b/pkg/wshrpc/wshrpctypes.go
index 8ddff8128b..2fee3e392e 100644
--- a/pkg/wshrpc/wshrpctypes.go
+++ b/pkg/wshrpc/wshrpctypes.go
@@ -83,6 +83,7 @@ type WshRpcInterface interface {
DebugTermCommand(ctx context.Context, data CommandDebugTermData) (*CommandDebugTermRtnData, error)
BlocksListCommand(ctx context.Context, data BlocksListRequest) ([]BlocksListEntry, error)
WaveInfoCommand(ctx context.Context) (*WaveInfoData, error)
+ MacOSVersionCommand(ctx context.Context) (string, error)
WshActivityCommand(ct context.Context, data map[string]int) error
ActivityCommand(ctx context.Context, data ActivityUpdate) error
RecordTEventCommand(ctx context.Context, data telemetrydata.TEvent) error
diff --git a/pkg/wshrpc/wshserver/wshserver.go b/pkg/wshrpc/wshserver/wshserver.go
index 670c949f2e..b9d320f697 100644
--- a/pkg/wshrpc/wshserver/wshserver.go
+++ b/pkg/wshrpc/wshserver/wshserver.go
@@ -878,6 +878,10 @@ func (ws *WshServer) WaveInfoCommand(ctx context.Context) (*wshrpc.WaveInfoData,
}, nil
}
+func (ws *WshServer) MacOSVersionCommand(ctx context.Context) (string, error) {
+ return wavebase.ClientMacOSVersion(), nil
+}
+
// BlocksListCommand returns every block visible in the requested
// scope (current workspace by default).
func (ws *WshServer) BlocksListCommand(
diff --git a/schema/settings.json b/schema/settings.json
index 348c937dac..5213fed365 100644
--- a/schema/settings.json
+++ b/schema/settings.json
@@ -43,6 +43,13 @@
"term"
]
},
+ "app:tabbar": {
+ "type": "string",
+ "enum": [
+ "top",
+ "left"
+ ]
+ },
"feature:waveappbuilder": {
"type": "boolean"
},