Skip to content

fix(web-ui): make approval commands fully readable #2874

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
bobleer merged 1 commit into from
Sep 7, 2026
+21 −16
Merged

fix(web-ui): make approval commands fully readable #2874

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
17 changes: 10 additions & 7 deletions src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
flex-direction: column;
gap: 5px;
box-sizing: border-box;
// The composer centers its children, so constrain the band before truncating
// The composer centers its children, so constrain the band before laying out
// long resources; otherwise its intrinsic width can exceed the composer.
width: 100%;
min-width: 0;
Expand Down Expand Up @@ -42,13 +42,15 @@
color: var(--openbitfun-color-content-secondary);
}

// The resource is the part worth the remaining width: which file, which
// command. Identity and owner are context and yield first.
&__resource {
// Keep the full command readable without letting it widen the composer or
// push the approval actions out of view. Only the resource body scrolls.
.openbitfun-chat-input-approval__resource {
flex: none;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: min(160px, 25vh);
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}

&__owner {
Expand All @@ -75,6 +77,7 @@

&__note {
margin: 0;
overflow-wrap: anywhere;
color: var(--openbitfun-color-status-warning-content);
font-size: var(--openbitfun-type-flow-support-font-size);

Expand Down
20 changes: 11 additions & 9 deletions src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export const ChatInputApprovalBand: React.FC<ChatInputApprovalBandProps> = ({
}
};

const resourceSummary = request.resources.join(', ');
const resourceSummary = request.resources.join('\n');
const answersAll = effectiveScope === 'all';
const allowLabel = answersAll
? t('permission.allowCurrentAndFollowing')
Expand Down Expand Up @@ -195,14 +195,6 @@ export const ChatInputApprovalBand: React.FC<ChatInputApprovalBandProps> = ({
{permissionActionLabel(request.action, t)}
</span>
<span className="openbitfun-chat-input-approval__separator" aria-hidden>·</span>
<CopyableTextPreview
as="code"
text={resourceSummary}
emptyText=""
className="openbitfun-chat-input-approval__resource copyable-text-preview--theme-font"
tooltipContent={request.resources.join('\n') || undefined}
tooltipPlacement="top"
/>
{request.delegation ? (
<span className="openbitfun-chat-input-approval__owner">
{t('permission.subagentOwner', { subagent: request.delegation.subagentType })}
Expand All @@ -222,6 +214,16 @@ export const ChatInputApprovalBand: React.FC<ChatInputApprovalBandProps> = ({
) : null}
</div>

<CopyableTextPreview
as="code"
text={resourceSummary}
emptyText=""
className="openbitfun-chat-input-approval__resource copyable-text-preview--theme-font"
tooltipContent={resourceSummary || undefined}
tooltipPlacement="top"
tabIndex={0}
/>

{/* The risk is the reason to read the band at all, so it keeps its own
line rather than hiding in a tooltip. */}
{error ? (
Expand Down
Loading