ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Studio: keep the permission pill label when composer pills collapse (#7231)

Browse source 
With 5 or more pills active the composer collapses every pill to an
icon, which hid the Bypass permissions label behind a small glyph.
Exempt the permission pill via data-keep-label so it always shows its
label, with the collapsed icons lining up to its right. Since the pill
is never icon-only now, drop the compact-mode fallthrough in the glyph
off switch so it works while the other pills are collapsed.
This commit is contained in:
Michael Han 2026-07-18 23:15:13 -07:00 • committed by GitHub
commit c2cf2b4a1e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

13
studio/frontend/src/features/chat/permission-mode-select.tsx
View file

@ -278,28 +278,23 @@ export function PermissionModeComposerPill({
data-pill-label={active.label}
data-active={fullAccess ? "true" : "false"}
data-variant={fullAccess ? "danger" : undefined}
data-keep-label="true"
aria-label="Permission level for tool calls"
title={`${active.label}: ${active.description}`}
>
{/* The icon doubles as an off switch (mirrors the MCP pill): hover
swaps it to an X; clicking it turns bypass permissions Off (no
prompts, sandbox on) without opening the menu. In compact
icon-only mode the glyph is the whole button, so clicks fall
through and open the menu instead. */}
prompts, sandbox on) without opening the menu. data-keep-label
exempts this pill from compact icon-only mode, so the off switch
stays clickable even while the other pills are collapsed. */}
<span
role="button"
aria-label="Turn off bypass permissions"
tabIndex={-1}
onPointerDown={(e) => {
if (e.currentTarget.closest('[data-pill-compact="true"]')) {
return;
}
e.stopPropagation();
}}
onClick={(e) => {
if (e.currentTarget.closest('[data-pill-compact="true"]')) {
return;
}
e.stopPropagation();
setPermissionMode("off");
}}

4
studio/frontend/src/index.css
View file

@ -1467,7 +1467,9 @@ html[data-chat-font] .aui-root {
}
/* With more than 4 tools on, drop pill labels to icons only to cut clutter.
Compare keeps its label via data-keep-label. */
Compare and the bypass-permissions pill keep their labels via
data-keep-label; the permission pill sits before the collapsed icons, so
they line up to its right. */
[data-pill-compact="true"]
.composer-pill-btn:not([data-keep-label])
> span:not(.composer-pill-glyph) {