ignore: share error styles

2 files changed, 93 insertions, 62 deletions

diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx
index ff2d4e825..3d392d886 100644
--- a/packages/web/src/components/Share.tsx
+++ b/packages/web/src/components/Share.tsx
@@ -172,13 +172,29 @@ function flattenToolArgs(obj: any, prefix: string = ""): Array<[string, any]> {
   return entries
 }
 
-export function getDiagnostics(
+function formatErrorString(error: string): JSX.Element {
+  const errorMarker = "Error: "
+  const startsWithError = error.startsWith(errorMarker)
+
+  return startsWithError ? (
+    <p>
+      <span data-color="red" data-marker="label" data-separator>
+        Error
+      </span>
+      <span>{error.slice(errorMarker.length)}</span>
+    </p>
+  ) : (
+    <p><span data-color="dimmed">{error}</span></p>
+  )
+}
+
+function getDiagnostics(
   diagnosticsByFile: Record<string, Diagnostic[]>,
   currentFile: string
-): string[] {
+): JSX.Element[] {
   // Return a flat array of error diagnostics, in the format:
-  // "ERROR [65:20] Property 'x' does not exist on type 'Y'"
-  const result: string[] = []
+  // "Error [65:20] Property 'x' does not exist on type 'Y'"
+  const result: JSX.Element[] = []
 
   if (
     diagnosticsByFile === undefined || diagnosticsByFile[currentFile] === undefined
@@ -192,7 +208,15 @@ export function getDiagnostics(
       const line = d.range.start.line + 1 // 1-based
       const column = d.range.start.character + 1 // 1-based
 
-      result.push(`\x1b[31mERROR\x1b[0m \x1b[2m[${line}:${column}]\x1b[0m ${d.message}`)
+      result.push(
+        <p>
+          <span data-color="red" data-marker="label">Error</span>
+          <span data-color="dimmed" data-separator>
+            [{line}:{column}]
+          </span>
+          <span>{d.message}</span>
+        </p>
+      )
     }
   }
 
@@ -324,46 +348,44 @@ function TextPart(props: TextPartProps) {
   )
 }
 
-interface LspPartProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  text: string
+interface ErrorPartProps extends JSX.HTMLAttributes<HTMLDivElement> {
   expand?: boolean
 }
-function LspPart(props: LspPartProps) {
-  const [local, rest] = splitProps(props, ["text", "expand"])
+function ErrorPart(props: ErrorPartProps) {
+  const [local, rest] = splitProps(props, ["expand", "children"])
   const [expanded, setExpanded] = createSignal(false)
   const [overflowed, setOverflowed] = createSignal(false)
   let preEl: HTMLElement | undefined
 
   function checkOverflow() {
-    if (!preEl) return
-
-    const code = preEl.getElementsByTagName("code")[0]
-
-    if (code && !local.expand) {
-      setOverflowed(preEl.clientHeight < code.offsetHeight)
+    if (preEl && !local.expand) {
+      setOverflowed(preEl.scrollHeight > preEl.clientHeight + 1)
     }
   }
 
   onMount(() => {
+    checkOverflow()
     window.addEventListener("resize", checkOverflow)
   })
 
+  createEffect(() => {
+    local.children
+    setTimeout(checkOverflow, 0)
+  })
+
   onCleanup(() => {
     window.removeEventListener("resize", checkOverflow)
   })
 
   return (
     <div
-      class={styles["message-lsp"]}
+      class={styles["message-error"]}
       data-expanded={expanded() || local.expand === true}
       {...rest}
     >
-      <CodeBlock
-        lang="ansi"
-        code={local.text}
-        onRendered={checkOverflow}
-        ref={(el) => (preEl = el)}
-      />
+      <div data-section="content" ref={(el) => (preEl = el)}>
+        {local.children}
+      </div>
       {((!local.expand && overflowed()) || expanded()) && (
         <button
           type="button"
@@ -512,6 +534,7 @@ export default function Share(props: {
   info: SessionInfo
   messages: Record<string, SessionMessage>
 }) {
+  let hasScrolled = false
   const id = props.id
 
   const anchorId = createMemo<string | null>(() => {
@@ -586,8 +609,9 @@ export default function Share(props: {
             const [, messageID] = splits
             setStore("messages", messageID, reconcile(d.content))
 
-            if (messageID === anchorId()) {
+            if (!hasScrolled && messageID === anchorId()) {
               scrollToAnchor(window.location.hash.slice(1))
+              hasScrolled = true
             }
           }
         } catch (error) {
@@ -1241,12 +1265,9 @@ export default function Share(props: {
                                     <Switch>
                                       <Match when={hasError()}>
                                         <div data-part-tool-result>
-                                          <TextPart
-                                            expand
-                                            text={toolData()?.result}
-                                            data-size="sm"
-                                            data-color="dimmed"
-                                          />
+                                          <ErrorPart>
+                                            {formatErrorString(toolData()?.result)}
+                                          </ErrorPart>
                                         </div>
                                       </Match>
                                       <Match when={preview()}>
@@ -1339,19 +1360,14 @@ export default function Share(props: {
                                       <b>{filePath()}</b>
                                     </div>
                                     <Show when={diagnostics().length > 0}>
-                                      <LspPart
-                                        text={diagnostics().join("\n\n")}
-                                      />
+                                      <ErrorPart>{diagnostics()}</ErrorPart>
                                     </Show>
                                     <Switch>
                                       <Match when={hasError()}>
                                         <div data-part-tool-result>
-                                          <TextPart
-                                            expand
-                                            text={toolData()?.result}
-                                            data-size="sm"
-                                            data-color="dimmed"
-                                          />
+                                          <ErrorPart>
+                                            {formatErrorString(toolData()?.result)}
+                                          </ErrorPart>
                                         </div>
                                       </Match>
                                       <Match when={content()}>
@@ -1429,12 +1445,9 @@ export default function Share(props: {
                                     <Switch>
                                       <Match when={hasError()}>
                                         <div data-part-tool-result>
-                                          <TextPart
-                                            expand
-                                            data-size="sm"
-                                            data-color="dimmed"
-                                            text={message()}
-                                          />
+                                          <ErrorPart>
+                                            {formatErrorString(message())}
+                                          </ErrorPart>
                                         </div>
                                       </Match>
                                       <Match when={diff()}>
@@ -1448,9 +1461,7 @@ export default function Share(props: {
                                       </Match>
                                     </Switch>
                                     <Show when={diagnostics().length > 0}>
-                                      <LspPart
-                                        text={diagnostics().join("\n\n")}
-                                      />
+                                      <ErrorPart>{diagnostics()}</ErrorPart>
                                     </Show>
                                   </div>
                                   <ToolFooter time={toolData()?.duration || 0} />
@@ -1601,12 +1612,9 @@ export default function Share(props: {
                                     <Switch>
                                       <Match when={hasError()}>
                                         <div data-part-tool-result>
-                                          <TextPart
-                                            expand
-                                            text={toolData()?.result}
-                                            data-size="sm"
-                                            data-color="dimmed"
-                                          />
+                                          <ErrorPart>
+                                            {formatErrorString(toolData()?.result)}
+                                          </ErrorPart>
                                         </div>
                                       </Match>
                                       <Match when={toolData()?.result}>
diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css
index bcac00544..b216dbaf0 100644
--- a/packages/web/src/components/share.module.css
+++ b/packages/web/src/components/share.module.css
@@ -421,7 +421,7 @@
   }
 }
 
-.message-lsp {
+.message-error {
   background-color: var(--sl-color-bg-surface);
   padding: 0.5rem calc(0.5rem + 3px);
   border-radius: 0.25rem;
@@ -432,24 +432,47 @@
   align-self: flex-start;
   max-width: var(--md-tool-width);
 
-    padding: 0.5rem calc(0.5rem + 3px);
-
-    pre {
-      --shiki-dark-bg: var(--sl-color-bg-surface) !important;
-      background-color: var(--sl-color-bg-surface) !important;
-      line-height: 1.4;
+  [data-section="content"] {
+    p {
+      margin-bottom: 0.5rem;
+      line-height: 1.5;
       font-size: 0.75rem;
       white-space: pre-wrap;
       word-break: break-word;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      span {
+        margin-right: 0.25rem;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      span[data-color="red"] {
+        color: var(--sl-color-red);
+      }
+      span[data-color="dimmed"] {
+        color: var(--sl-color-text-dimmed);
+      }
+      span[data-marker="label"] {
+        text-transform: uppercase;
+        letter-spacing: -0.5px;
+      }
+      span[data-separator] {
+        margin-right: 0.375rem;
+      }
     }
+  }
 
   &[data-expanded="true"] {
-    pre {
+    [data-section="content"] {
       display: block;
     }
   }
   &[data-expanded="false"] {
-    pre {
+    [data-section="content"] {
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 7;