styling tool calls

1 files changed, 55 insertions, 5 deletions

diff --git a/app/packages/web/src/components/share.module.css b/app/packages/web/src/components/share.module.css
index a6964dd51..1c0681623 100644
--- a/app/packages/web/src/components/share.module.css
+++ b/app/packages/web/src/components/share.module.css
@@ -122,7 +122,7 @@
 
   [data-section="part"] {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.625rem;
   }
 
   [data-section="decoration"] {
@@ -151,14 +151,18 @@
   }
 
   [data-section="content"] {
-    padding: 1px 0 0.375rem;
+    padding: 0 0 0.375rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 
     span[data-part-title] {
-      padding-top: 2px;
+      line-height: 18px;
       font-size: 0.75rem;
+
+      &[data-size="md"] {
+        font-size: 0.875rem;
+      }
     }
 
     span[data-part-footer] {
@@ -170,6 +174,37 @@
     span[data-part-model] {
       line-height: 1.5;
     }
+
+    [data-part-tool-args] {
+      display: inline-grid;
+      align-items: center;
+      grid-template-columns: max-content max-content minmax(0, 1fr);
+      max-width: 100%;
+      gap: 0.25rem 0.375rem;
+
+
+      & > div:nth-child(3n+1) {
+        width: 8px;
+        height: 2px;
+        border-radius: 1px;
+        background: var(--sl-color-divider);
+      }
+
+      & > div:nth-child(3n+2),
+      & > div:nth-child(3n+3) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 0.75rem;
+        line-height: 1.5;
+      }
+
+      & > div:nth-child(3n+3) {
+        padding-left: 0.125rem;
+        color: var(--sl-color-text-dimmed);
+      }
+
+    }
   }
 }
 
@@ -180,7 +215,6 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  color: var(--sl-color-text);
   gap: 1rem;
 
   pre {
@@ -188,6 +222,19 @@
     font-size: 0.875rem;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
+    color: var(--sl-color-text);
+  }
+
+  &[data-size="sm"] {
+    pre {
+      font-size: 0.75rem;
+    }
+  }
+
+  &[data-color="dimmed"] {
+    pre {
+      color: var(--sl-color-text-dimmed);
+    }
   }
 
   button {
@@ -198,7 +245,10 @@
 
   &[data-highlight="true"] {
     background-color: var(--sl-color-blue-high);
-    color: var(--sl-color-text-invert);
+
+    pre {
+      color: var(--sl-color-text-invert);
+    }
 
     button {
       opacity: 0.85;