chore(app): tool args cleanup

packages/ui/src/components/basic-tool.css

@@ -36,12 +36,12 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    white-space: nowrap;
+    min-width: 0;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   [data-slot="basic-tool-tool-title"] {
+    flex-shrink: 0;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
@@ -56,6 +56,11 @@
   }
 
   [data-slot="basic-tool-tool-subtitle"] {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
@@ -66,6 +71,11 @@
   }
 
   [data-slot="basic-tool-tool-arg"] {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;

packages/ui/src/components/collapsible.css

@@ -38,14 +38,12 @@
     }
 
     [data-slot="collapsible-arrow"] {
+      flex-shrink: 0;
       width: 24px;
       height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-
-      /* [data-slot="collapsible-arrow-icon"] { */
-      /* } */
     }
   }
 

packages/ui/src/components/message-part.tsx

@@ -639,7 +639,7 @@ ToolRegistry.register({
 ToolRegistry.register({
   name: "grep",
   render(props) {
-    const args = []
+    const args: string[] = []
     if (props.input.pattern) args.push("pattern=" + props.input.pattern)
     if (props.input.include) args.push("include=" + props.input.include)
     return (