tui: add warning icon to permission requests for better visibility

Adds a visual warning indicator to permission request dialogs to make

them more noticeable and help users understand when the agent needs

approval to use tools. Also improves the layout with consistent

spacing and icon alignment.

1 files changed, 24 insertions, 7 deletions

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index 2cfa286d2..bfcedde83 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -767,7 +767,7 @@
     gap: 16px;
     flex: 1;
     min-height: 0;
-    padding: 8px 8px 0;
+    padding: 12px 12px 0;
     background-color: var(--surface-raised-stronger-non-alpha);
     border-radius: 12px;
     box-shadow: var(--shadow-xs-border);
@@ -777,11 +777,28 @@
   }
 
   [data-slot="permission-header"] {
-    display: flex;
+    padding: 0;
+  }
+
+  [data-slot="permission-row"] {
+    display: grid;
+    grid-template-columns: 20px 1fr;
+    column-gap: 8px;
+    align-items: start;
+  }
+
+  [data-slot="permission-row"][data-variant="header"] {
     align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 0 10px;
+  }
+
+  [data-slot="permission-icon"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  [data-slot="permission-icon"] [data-component="icon"] {
+    color: var(--icon-warning-base);
   }
 
   [data-slot="permission-header-title"] {
@@ -807,7 +824,7 @@
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     color: var(--text-weak);
-    padding: 0 10px;
+    padding: 0;
   }
 
   [data-slot="permission-patterns"] {
@@ -816,7 +833,7 @@
     gap: 6px;
     margin-top: 8px;
     margin-bottom: 16px;
-    padding: 1px 10px 8px;
+    padding: 1px 0 8px;
     flex: 1;
     min-height: 0;
     overflow-y: auto;