From 1af9682804eeb50a5b57a417da1add10b2b1ec66 Mon Sep 17 00:00:00 2001
From: guantw <guantianwei@gmail.com>
Date: Mon, 7 Sep 2026 18:43:14 +0800
Subject: [PATCH] fix(web-ui): make approval commands fully readable

Display permission resources on a separate wrapping, keyboard-scrollable row while preserving the composer's width constraints. Keep approval actions visible for long commands and allow long risk text to wrap.
---
 .../components/ChatInputApprovalBand.scss     | 17 +++++++++-------
 .../components/ChatInputApprovalBand.tsx      | 20 ++++++++++---------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss
index 9e4bde19ed..e2e1eb3344 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss
@@ -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;
@@ -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 {
@@ -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);
 
diff --git a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx
index b1e5a8b613..4bcf0c3304 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx
@@ -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')
@@ -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 })}
@@ -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 ? (