Skip to content

fix(web): show tooltips for composer environment and workspace controls #11787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maria-rcks merged 1 commit into from
Sep 16, 2026
Merged

fix(web): show tooltips for composer environment and workspace controls #11787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 24 additions & 10 deletions apps/web/src/components/BranchToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import {
MenuTrigger,
} from "./ui/menu";
import { Separator } from "./ui/separator";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
import { ComposerSurface } from "./chat/ComposerSurface";
import { composerFloatingLayerProps } from "./chat/composerEventScope";
import { measureRestingComposerControls } from "./chat/restingComposerControlsMeasurement";
Expand Down Expand Up @@ -136,22 +137,35 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
? resolveEnvModeLabel("worktree")
: resolveCurrentWorkspaceLabel(activeWorktreePath);
const isLocked = envLocked || envModeLocked;
const workspaceIcon = (
<Tooltip>
<TooltipTrigger render={<span className="inline-flex shrink-0" />}>
<WorkspaceIcon className={cn("size-3 shrink-0", showEnvironmentIndicator && "mx-0!")} />
</TooltipTrigger>
<TooltipPopup>{workspaceLabel}</TooltipPopup>
</Tooltip>
);
const icon = showEnvironmentIndicator ? (
// Button's base styles apply `-mx-0.5` to descendant SVGs, which eats 4px
// out of whatever gap we set. mx-0! cancels that so gap-0.5 reads as 2px.
<span className="inline-flex shrink-0 items-center gap-0.5">
{autoEnvironmentLabel ? (
<ScaleIcon className="size-3 shrink-0 mx-0!" aria-hidden="true" />
) : (
<EnvironmentMachineIcon
kind={activeEnvironment?.machine ?? "server"}
className="size-3 shrink-0 mx-0!"
/>
)}
<WorkspaceIcon className="size-3 shrink-0 mx-0!" />
<Tooltip>
<TooltipTrigger render={<span className="inline-flex shrink-0" />}>
{autoEnvironmentLabel ? (
<ScaleIcon className="size-3 shrink-0 mx-0!" aria-hidden="true" />
) : (
<EnvironmentMachineIcon
kind={activeEnvironment?.machine ?? "server"}
className="size-3 shrink-0 mx-0!"
/>
)}
</TooltipTrigger>
<TooltipPopup>{autoEnvironmentLabel ?? activeEnvironment?.label ?? "Run on"}</TooltipPopup>
</Tooltip>
{workspaceIcon}
</span>
) : (
<WorkspaceIcon className="size-3 shrink-0" />
workspaceIcon
);
const triggerContent = (
<>
Expand Down
96 changes: 56 additions & 40 deletions apps/web/src/components/BranchToolbarEnvModeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
SelectTrigger,
SelectValue,
} from "./ui/select";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";

const PREVIOUS_WORKTREE_SELECT_VALUE = "previous-worktree";

Expand Down Expand Up @@ -51,27 +52,31 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe

if (envLocked) {
return (
<span
className="inline-flex h-7 min-w-0 items-center gap-1 border border-transparent px-[calc(--spacing(2)-1px)] font-normal text-muted-foreground/70 text-xs sm:h-6"
data-composer-context-control
>
{activeWorktreePath ? (
<FolderGitIcon className="size-3 shrink-0" />
) : (
<FolderIcon className="size-3 shrink-0" />
)}
<span
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
<Tooltip>
<TooltipTrigger
render={<span />}
className="inline-flex h-7 min-w-0 items-center gap-1 border border-transparent px-[calc(--spacing(2)-1px)] font-normal text-muted-foreground/70 text-xs sm:h-6"
data-composer-context-control
>
{activeWorktreePath ? (
<FolderGitIcon className="size-3 shrink-0" />
) : (
<FolderIcon className="size-3 shrink-0" />
)}
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
>
{resolveLockedWorkspaceLabel(activeWorktreePath)}
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
{resolveLockedWorkspaceLabel(activeWorktreePath)}
</span>
</span>
</span>
</span>
</TooltipTrigger>
<TooltipPopup>{resolveLockedWorkspaceLabel(activeWorktreePath)}</TooltipPopup>
</Tooltip>
);
}

Expand All @@ -88,33 +93,44 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
}}
items={envModeItems}
>
<SelectTrigger
variant="ghost"
size="xs"
className="min-w-0 shrink font-normal text-xs!"
aria-label="Workspace"
data-composer-shortcut="composer.workspace"
data-composer-context-control
>
{effectiveEnvMode === "worktree" ? (
<FolderGit2Icon className="size-3" />
) : activeWorktreePath ? (
<FolderGitIcon className="size-3" />
) : (
<FolderIcon className="size-3" />
)}
<span
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
<Tooltip>
<TooltipTrigger
render={
<SelectTrigger
variant="ghost"
size="xs"
className="min-w-0 shrink font-normal text-xs!"
aria-label="Workspace"
data-composer-shortcut="composer.workspace"
data-composer-context-control
/>
}
>
{effectiveEnvMode === "worktree" ? (
<FolderGit2Icon className="size-3" />
) : activeWorktreePath ? (
<FolderGitIcon className="size-3" />
) : (
<FolderIcon className="size-3" />
)}
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
>
<SelectValue />
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
<SelectValue />
</span>
</span>
</span>
</SelectTrigger>
</TooltipTrigger>
<TooltipPopup>
{effectiveEnvMode === "worktree"
? resolveEnvModeLabel("worktree")
: resolveCurrentWorkspaceLabel(activeWorktreePath)}
</TooltipPopup>
</Tooltip>
<SelectPopup alignItemWithTrigger={false} {...composerFloatingLayerProps}>
<SelectGroup>
<SelectGroupLabel>Workspace</SelectGroupLabel>
Expand Down
92 changes: 52 additions & 40 deletions apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
SelectTrigger,
SelectValue,
} from "./ui/select";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";

interface BranchToolbarEnvironmentSelectorProps {
autoEnvironmentLabel?: string | undefined;
Expand Down Expand Up @@ -58,26 +59,30 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
// only thing in the strip.
if (envLocked || onEnvironmentChange === undefined) {
return (
<span
className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-[calc(--spacing(2)-1px)] font-normal text-muted-foreground/70 text-xs sm:h-6"
data-composer-context-control
>
<EnvironmentMachineIcon
kind={activeEnvironment?.machine ?? "server"}
className="size-3 shrink-0"
/>
<span
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
<Tooltip>
<TooltipTrigger
render={<span />}
className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-[calc(--spacing(2)-1px)] font-normal text-muted-foreground/70 text-xs sm:h-6"
data-composer-context-control
>
<EnvironmentMachineIcon
kind={activeEnvironment?.machine ?? "server"}
className="size-3 shrink-0"
/>
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
>
{activeEnvironment?.label ?? "Run on"}
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
{activeEnvironment?.label ?? "Run on"}
</span>
</span>
</span>
</span>
</TooltipTrigger>
<TooltipPopup>{activeEnvironment?.label ?? "Run on"}</TooltipPopup>
</Tooltip>
);
}

Expand All @@ -90,34 +95,41 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
}
items={environmentItems}
>
<SelectTrigger
variant="ghost"
size="xs"
className="min-w-0 max-w-full font-normal text-xs!"
aria-label="Run on"
data-composer-shortcut="composer.host"
data-composer-context-control
>
{autoEnvironmentLabel ? (
<ScaleIcon className="size-3 shrink-0" aria-hidden="true" />
) : (
<EnvironmentMachineIcon
kind={activeEnvironment?.machine ?? "server"}
className="size-3 shrink-0"
/>
)}
<span
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
<Tooltip>
<TooltipTrigger
render={
<SelectTrigger
variant="ghost"
size="xs"
className="min-w-0 max-w-full font-normal text-xs!"
aria-label="Run on"
data-composer-shortcut="composer.host"
data-composer-context-control
/>
}
>
{autoEnvironmentLabel ? (
<ScaleIcon className="size-3 shrink-0" aria-hidden="true" />
) : (
<EnvironmentMachineIcon
kind={activeEnvironment?.machine ?? "server"}
className="size-3 shrink-0"
/>
)}
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
>
<SelectValue />
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
<SelectValue />
</span>
</span>
</span>
</SelectTrigger>
</TooltipTrigger>
<TooltipPopup>{autoEnvironmentLabel ?? activeEnvironment?.label ?? "Run on"}</TooltipPopup>
</Tooltip>
<SelectPopup alignItemWithTrigger={false} {...composerFloatingLayerProps}>
<SelectGroup>
<SelectGroupLabel>Run on</SelectGroupLabel>
Expand Down
Loading