styles share

packages/web/src/components/Share.tsx

@@ -201,7 +201,7 @@ function TextPart(props: TextPartProps) {
 
   return (
     <div
-      data-element-message-text
+      class={styles["message-text"]}
       data-highlight={local.highlight}
       data-expanded={expanded() || local.expand === true}
       {...rest}
@@ -222,10 +222,11 @@ function TextPart(props: TextPartProps) {
 
 interface TerminalPartProps extends JSX.HTMLAttributes<HTMLDivElement> {
   text: string
+  desc?: string
   expand?: boolean
 }
 function TerminalPart(props: TerminalPartProps) {
-  const [local, rest] = splitProps(props, ["text", "expand"])
+  const [local, rest] = splitProps(props, ["text", "desc", "expand"])
   const [expanded, setExpanded] = createSignal(false)
   const [overflowed, setOverflowed] = createSignal(false)
   let preEl: HTMLElement | undefined
@@ -251,12 +252,12 @@ function TerminalPart(props: TerminalPartProps) {
 
   return (
     <div
-      data-element-message-terminal
+      class={styles["message-terminal"]}
       data-expanded={expanded() || local.expand === true}
       {...rest}
     >
       <div data-section="body">
-        <div data-section="header"></div>
+        <div data-section="header"><span>{local.desc}</span></div>
         <div data-section="content">
           <CodeBlock
             lang="ansi"
@@ -541,7 +542,11 @@ export default function Share(props: { api: string }) {
                 onClick={() => showSystemPrompt((e) => !e)}
               >
                 <span>
-                  {showingSystemPrompt() ? "Hide system prompt" : "Show system prompt"}
+                  {
+                    showingSystemPrompt()
+                      ? "Hide system prompt"
+                      : "Show system prompt"
+                  }
                 </span>
                 <span data-button-icon>
                   <Show
@@ -553,7 +558,11 @@ export default function Share(props: { api: string }) {
                 </span>
               </button>
               <Show when={showingSystemPrompt()}>
-                <TextPart data-size="sm" expand text={data().system.join("\n")} />
+                <TextPart
+                  expand
+                  data-size="sm"
+                  text={data().system.join("\n").trim()}
+                />
               </Show>
             </div>
           </div>
@@ -766,8 +775,8 @@ export default function Share(props: { api: string }) {
                           {(part) => {
                             const metadata = createMemo(() => msg.metadata?.tool[part().toolInvocation.toolCallId])
 
-                            const id = part().toolInvocation.toolCallId
                             const command = part().toolInvocation.args.command
+                            const desc = part().toolInvocation.args.description
                             const stdout = metadata()?.stdout
                             const result = stdout || (part().toolInvocation.state === "result" && part().toolInvocation.result)
 
@@ -791,6 +800,7 @@ export default function Share(props: { api: string }) {
                                 <div data-section="content">
                                   <div data-part-tool-body>
                                     <TerminalPart
+                                      desc={desc}
                                       data-size="sm"
                                       text={command + (result ? `\n${result}` : "")}
                                     />

packages/web/src/components/share.module.css

@@ -198,106 +198,107 @@
   [data-section="part"] {
     display: flex;
     gap: 0.625rem;
-  }
-
-  [data-section="decoration"] {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-    align-items: center;
-    justify-content: flex-start;
 
-    div:first-child {
+    & > [data-section="decoration"] {
       flex: 0 0 auto;
-      width: 18px;
-      opacity: 0.65;
-      svg {
-        color: var(--sl-color-text-secondary);
-        display: block;
-      }
-    }
-
-    div:last-child {
-      width: 3px;
-      height: 100%;
-      border-radius: 1px;
-      background-color: var(--sl-color-hairline);
-    }
-  }
-
-  [data-section="content"] {
-    padding: 0 0 0.375rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-
-    [data-part-tool-body] {
       display: flex;
       flex-direction: column;
-      gap: 0.375rem;
-    }
-
-    span[data-part-title] {
-      line-height: 18px;
-      font-size: 0.75rem;
+      gap: 0.625rem;
+      align-items: center;
+      justify-content: flex-start;
 
-      b {
-        font-weight: 500;
+      div:first-child {
+        flex: 0 0 auto;
+        width: 18px;
+        opacity: 0.65;
+        svg {
+          color: var(--sl-color-text-secondary);
+          display: block;
+        }
       }
 
-      &[data-size="md"] {
-        font-size: 0.875rem;
+      div:last-child {
+        width: 3px;
+        height: 100%;
+        border-radius: 1px;
+        background-color: var(--sl-color-hairline);
       }
     }
 
-    span[data-part-footer] {
-      align-self: flex-start;
-      font-size: 0.75rem;
-      color: var(--sl-color-text-dimmed);
-    }
+    & > [data-section="content"] {
+      min-width: 0;
+      padding: 0 0 0.375rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
 
-    span[data-part-model] {
-      line-height: 1.5;
-    }
+      [data-part-tool-body] {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+      }
 
-    [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;
+      span[data-part-title] {
+        line-height: 18px;
+        font-size: 0.75rem;
 
-      & > div:nth-child(3n + 1) {
-        width: 8px;
-        height: 2px;
-        border-radius: 1px;
-        background: var(--sl-color-divider);
+        b {
+          font-weight: 500;
+        }
+
+        &[data-size="md"] {
+          font-size: 0.875rem;
+        }
       }
 
-      & > div:nth-child(3n + 2),
-      & > div:nth-child(3n + 3) {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      span[data-part-footer] {
+        align-self: flex-start;
         font-size: 0.75rem;
+        color: var(--sl-color-text-dimmed);
+      }
+
+      span[data-part-model] {
         line-height: 1.5;
       }
 
-      & > div:nth-child(3n + 3) {
-        padding-left: 0.125rem;
-        color: var(--sl-color-text-dimmed);
+      [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);
+        }
       }
-    }
 
-    [data-part-tool-result] {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.5rem;
+      [data-part-tool-result] {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
 
-      button {
-        font-size: 0.75rem;
+        button {
+          font-size: 0.75rem;
+        }
       }
     }
   }
@@ -329,7 +330,7 @@
   }
 }
 
-[data-element-message-text] {
+.message-text {
   background-color: var(--sl-color-bg-surface);
   padding: 0.5rem calc(0.5rem + 3px);
   border-radius: 0.25rem;
@@ -396,21 +397,35 @@
   }
 }
 
-[data-element-message-terminal] {
+.message-terminal {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
 
-  [data-section="body"] {
+  & > [data-section="body"] {
     border: 1px solid var(--sl-color-divider);
     border-radius: 0.25rem;
+    max-width: 100%;
 
     [data-section="header"] {
       position: relative;
       border-bottom: 1px solid var(--sl-color-divider);
       width: 100%;
-      height: 25px;
+      height: 1.625rem;
+      text-align: center;
+      padding: 0 0.75rem 0 3.25rem;
+
+      & > span {
+        max-width: min(100%, 140ch);
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        line-height: 1.625rem;
+        font-size: 0.75rem;
+        text-overflow: ellipsis;
+        color: var(--sl-color-text-dimmed);
+      }
 
       &::before {
         content: '';