ignore: share page polish

1 files changed, 52 insertions, 67 deletions

diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css
index 927d3be4b..4f2711120 100644
--- a/packages/web/src/components/share.module.css
+++ b/packages/web/src/components/share.module.css
@@ -5,6 +5,10 @@
   gap: 2.5rem;
   line-height: 1;
 
+  --sm-tool-width: 28rem;
+  --md-tool-width: 40rem;
+  --lg-tool-width: 56rem;
+
   --term-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2016'%20preserveAspectRatio%3D'xMidYMid%20meet'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'8'%20r%3D'8'%2F%3E%3C%2Fsvg%3E");
 }
 
@@ -37,7 +41,7 @@
 
 [data-element-label] {
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.5px;
   color: var(--sl-color-text-dimmed);
 }
 
@@ -164,30 +168,6 @@
       }
     }
   }
-  [data-section="system-prompt"] {
-    display: flex;
-    gap: 0.3125rem;
-
-    [data-section="icon"] {
-      flex: 0 0 auto;
-      color: var(--sl-color-text-dimmed);
-      opacity: 0.85;
-      svg {
-        display: block;
-      }
-    }
-
-    [data-section="content"] {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    button {
-      line-height: 1rem;
-      font-size: 0.875rem;
-    }
-  }
 }
 
 .parts {
@@ -227,6 +207,7 @@
     }
 
     & > [data-section="content"] {
+      flex: 1 1 auto;
       min-width: 0;
       padding: 0 0 0.375rem;
       display: flex;
@@ -236,21 +217,29 @@
       [data-part-tool-body] {
         display: flex;
         flex-direction: column;
+        align-items: flex-start;
         gap: 0.375rem;
       }
 
-      span[data-part-title] {
+      [data-part-title] {
         line-height: 18px;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
+        color: var(--sl-color-text-secondary);
+        max-wdith: var(--sm-tool-width);
+
+        display: flex;
+        align-items: flex-start;
+        gap: 0.375rem;
+
+        span[data-element-label] {
+          color: var(--sl-color-text-secondary);
+        }
 
         b {
+        color: var(--sl-color-text);
           word-break: break-all;
           font-weight: 500;
         }
-
-        &[data-size="md"] {
-          font-size: 0.875rem;
-        }
       }
 
       span[data-part-footer] {
@@ -267,7 +256,7 @@
         display: inline-grid;
         align-items: center;
         grid-template-columns: max-content max-content minmax(0, 1fr);
-        max-width: 100%;
+        max-width: var(--md-tool-width);
         gap: 0.25rem 0.375rem;
 
         & > div:nth-child(3n + 1) {
@@ -279,16 +268,14 @@
 
         & > 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);
+          word-break: break-word;
+          color: var(--sl-color-text-secondary);
         }
       }
 
@@ -302,6 +289,11 @@
           font-size: 0.75rem;
         }
       }
+
+      [data-part-tool-edit] {
+        width: 100%;
+        max-width: var(--lg-tool-width);
+      }
     }
   }
 
@@ -325,16 +317,6 @@
     & > [data-section="content"] > [data-part-tool-body] {
       gap: 0.5rem;
     }
-    [data-part-title] {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-
-      b {
-        color: var(--sl-color-text);
-        word-break: break-all;
-      }
-    }
   }
 
   [data-part-type="tool-grep"] {
@@ -342,16 +324,6 @@
       > [data-section="content"] > [data-part-tool-body] {
       gap: 0.5rem;
     }
-    [data-part-title] {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-
-      b {
-        color: var(--sl-color-text);
-        word-break: break-all;
-      }
-    }
   }
 
   [data-part-type="tool-write"],
@@ -359,7 +331,9 @@
   [data-part-type="tool-fetch"] {
     [data-part-tool-result] {
       [data-part-tool-code] {
+        width: var(--md-tool-width);
         border: 1px solid var(--sl-color-divider);
+        background-color: var(--sl-color-bg-surface);
         border-radius: 0.25rem;
         padding: 0.5rem calc(0.5rem + 3px);
 
@@ -372,8 +346,6 @@
       }
     }
   }
-  [data-part-type="tool-edit"] {
-  }
 }
 
 .message-text {
@@ -384,6 +356,8 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 1rem;
+  align-self: flex-start;
+  max-width: var(--md-tool-width);
 
   &[data-size="sm"] {
     pre {
@@ -411,7 +385,7 @@
     font-size: 0.75rem;
   }
 
-  &[data-highlight="true"] {
+  &[data-invert="true"] {
     background-color: var(--sl-color-blue-high);
 
     pre {
@@ -428,6 +402,10 @@
     }
   }
 
+  &[data-highlight="true"] {
+    background-color: var(--sl-color-blue-low);
+  }
+
   &[data-expanded="true"] {
     pre {
       display: block;
@@ -450,6 +428,7 @@
   gap: 0.5rem;
 
   & > [data-section="body"] {
+    width: var(--sm-tool-width);
     border: 1px solid var(--sl-color-divider);
     border-radius: 0.25rem;
     max-width: 100%;
@@ -460,7 +439,7 @@
       width: 100%;
       height: 1.625rem;
       text-align: center;
-      padding: 0 0.75rem 0 3.25rem;
+      padding: 0 3.25rem;
 
       & > span {
         max-width: min(100%, 140ch);
@@ -491,12 +470,10 @@
 
   [data-section="content"] {
     padding: 0.5rem calc(0.5rem + 3px);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
 
     pre {
+      --shiki-dark-bg: var(--sl-color-bg) !important;
+      background-color: var(--sl-color-bg) !important;
       line-height: 1.6;
       font-size: 0.75rem;
       white-space: pre-wrap;
@@ -533,6 +510,8 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 1rem;
+  align-self: flex-start;
+  max-width: var(--md-tool-width);
 
   button {
     flex: 0 0 auto;
@@ -540,6 +519,10 @@
     font-size: 0.75rem;
   }
 
+  &[data-highlight="true"] {
+    background-color: var(--sl-color-blue-low);
+  }
+
   &[data-expanded="true"] {
     [data-elment-markdown] {
       display: block;
@@ -566,6 +549,7 @@
   list-style-type: none;
   padding: 0;
   margin: 0;
+  width: var(--sm-tool-width);
   border: 1px solid var(--sl-color-divider);
   border-radius: 0.25rem;
 
@@ -577,6 +561,7 @@
     padding: 0.375rem 0.625rem 0.375rem 1.75rem;
     border-bottom: 1px solid var(--sl-color-divider);
     line-height: 1.5;
+    word-break: break-word;
 
     &:last-child {
       border-bottom: none;
@@ -614,9 +599,9 @@
       }
     }
     &[data-status="completed"] {
-      color: var(--sl-color-text-dimmed);
+      color: var(--sl-color-text-secondary);
 
-      & > span { border-color: var(--sl-color-hairline); }
+      & > span { border-color: var(--sl-color-green-low); }
       & > span::before {
         content: "";
         position: absolute;
@@ -624,7 +609,7 @@
         left: 2px;
         width: calc(0.75rem - 2px - 4px);
         height: calc(0.75rem - 2px - 4px);
-        box-shadow: inset 1rem 1rem var(--sl-color-divider);
+        box-shadow: inset 1rem 1rem var(--sl-color-green);
 
         transform-origin: bottom left;
         clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);