run formatter

2026-01-07 09:54:56 +01:00 · 2025-05-31 14:41:00 -04:00
parent 6df19f1828
commit 3b746162d2
52 changed files with 1376 additions and 1390 deletions
--- a/packages/web/src/components/CodeBlock.tsx
+++ b/packages/web/src/components/CodeBlock.tsx
@@ -6,7 +6,7 @@ import {
  createResource,
 } from "solid-js"
 import { codeToHtml } from "shiki"
-import { transformerNotationDiff } from '@shikijs/transformers'
+import { transformerNotationDiff } from "@shikijs/transformers"

 interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
  code: string
@@ -20,12 +20,10 @@ function CodeBlock(props: CodeBlockProps) {
    return (await codeToHtml(local.code, {
      lang: local.lang || "text",
      themes: {
-        light: 'github-light',
-        dark: 'github-dark',
+        light: "github-light",
+        dark: "github-dark",
      },
-      transformers: [
-        transformerNotationDiff(),
-      ],
+      transformers: [transformerNotationDiff()],
    })) as string
  })

@@ -39,9 +37,7 @@ function CodeBlock(props: CodeBlockProps) {
    }
  })

-  return (
-    <div ref={containerRef} {...rest}></div>
-  )
+  return <div ref={containerRef} {...rest}></div>
 }

 export default CodeBlock
--- a/packages/web/src/components/DiffView.tsx
+++ b/packages/web/src/components/DiffView.tsx
@@ -31,11 +31,7 @@ const DiffView: Component<DiffViewProps> = (props) => {
        diffRows.push({
          left: chunk.removed ? line : chunk.added ? "" : line,
          right: chunk.added ? line : chunk.removed ? "" : line,
-          type: chunk.added
-            ? "added"
-            : chunk.removed
-              ? "removed"
-              : "unchanged",
+          type: chunk.added ? "added" : chunk.removed ? "removed" : "unchanged",
        })
      }
    }
--- a/packages/web/src/components/Share.tsx
+++ b/packages/web/src/components/Share.tsx
@@ -12,11 +12,7 @@ import {
  createSignal,
 } from "solid-js"
 import { DateTime } from "luxon"
-import {
-  IconOpenAI,
-  IconGemini,
-  IconAnthropic,
-} from "./icons/custom"
+import { IconOpenAI, IconGemini, IconAnthropic } from "./icons/custom"
 import {
  IconCpuChip,
  IconSparkles,
@@ -31,8 +27,12 @@ import styles from "./share.module.css"
 import { type UIMessage } from "ai"
 import { createStore, reconcile } from "solid-js/store"

-type Status = "disconnected" | "connecting" | "connected" | "error" | "reconnecting"
-
+type Status =
+  | "disconnected"
+  | "connecting"
+  | "connected"
+  | "error"
+  | "reconnecting"

 type SessionMessage = UIMessage<{
  time: {
@@ -40,23 +40,26 @@ type SessionMessage = UIMessage<{
    completed?: number
  }
  assistant?: {
-    modelID: string;
-    providerID: string;
-    cost: number;
+    modelID: string
+    providerID: string
+    cost: number
    tokens: {
-      input: number;
-      output: number;
-      reasoning: number;
-    };
-  };
-  sessionID: string
-  tool: Record<string, {
-    properties: Record<string, any>
-    time: {
-      start: number
-      end: number
+      input: number
+      output: number
+      reasoning: number
    }
-  }>
+  }
+  sessionID: string
+  tool: Record<
+    string,
+    {
+      properties: Record<string, any>
+      time: {
+        start: number
+        end: number
+      }
+    }
+  >
 }>

 type SessionInfo = {
@@ -65,48 +68,47 @@ type SessionInfo = {
 }

 function getFileType(path: string) {
-  return path.split('.').pop()
+  return path.split(".").pop()
 }

 // Converts `{a:{b:{c:1}}` to `[['a.b.c', 1]]`
 function flattenToolArgs(obj: any, prefix: string = ""): Array<[string, any]> {
-  const entries: Array<[string, any]> = [];
+  const entries: Array<[string, any]> = []

  for (const [key, value] of Object.entries(obj)) {
-    const path = prefix ? `${prefix}.${key}` : key;
+    const path = prefix ? `${prefix}.${key}` : key

-    if (
-      value !== null &&
-      typeof value === "object" &&
-      !Array.isArray(value)
-    ) {
-      entries.push(...flattenToolArgs(value, path));
-    }
-    else {
-      entries.push([path, value]);
+    if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+      entries.push(...flattenToolArgs(value, path))
+    } else {
+      entries.push([path, value])
    }
  }

-  return entries;
+  return entries
 }

 function getStatusText(status: [Status, string?]): string {
  switch (status[0]) {
-    case "connected": return "Connected"
-    case "connecting": return "Connecting..."
-    case "disconnected": return "Disconnected"
-    case "reconnecting": return "Reconnecting..."
-    case "error": return status[1] || "Error"
-    default: return "Unknown"
+    case "connected":
+      return "Connected"
+    case "connecting":
+      return "Connecting..."
+    case "disconnected":
+      return "Disconnected"
+    case "reconnecting":
+      return "Reconnecting..."
+    case "error":
+      return status[1] || "Error"
+    default:
+      return "Unknown"
  }
 }

-function ProviderIcon(props: { provider: string, size?: number }) {
+function ProviderIcon(props: { provider: string; size?: number }) {
  const size = props.size || 16
  return (
-    <Switch fallback={
-      <IconSparkles width={size} height={size} />
-    }>
+    <Switch fallback={<IconSparkles width={size} height={size} />}>
      <Match when={props.provider === "openai"}>
        <IconOpenAI width={size} height={size} />
      </Match>
@@ -132,15 +134,11 @@ function ResultsButton(props: ResultsButtonProps) {
      data-element-button-more
      {...rest}
    >
-      <span>
-        {local.results ? "Hide results" : "Show results"}
-      </span>
+      <span>{local.results ? "Hide results" : "Show results"}</span>
      <span data-button-icon>
        <Show
          when={local.results}
-          fallback={
-            <IconChevronRight width={10} height={10} />
-          }
+          fallback={<IconChevronRight width={10} height={10} />}
        >
          <IconChevronDown width={10} height={10} />
        </Show>
@@ -187,16 +185,16 @@ function TextPart(props: TextPartProps) {
      data-expanded={expanded() || local.expand === true}
      {...rest}
    >
-      <pre ref={el => (preEl = el)}>{local.text}</pre>
-      {overflowed() &&
+      <pre ref={(el) => (preEl = el)}>{local.text}</pre>
+      {overflowed() && (
        <button
          type="button"
          data-element-button-text
-          onClick={() => setExpanded(e => !e)}
+          onClick={() => setExpanded((e) => !e)}
        >
          {expanded() ? "Show less" : "Show more"}
        </button>
-      }
+      )}
    </div>
  )
 }
@@ -205,13 +203,13 @@ function PartFooter(props: { time: number }) {
  return (
    <span
      data-part-footer
-      title={
-        DateTime.fromMillis(props.time).toLocaleString(
-          DateTime.DATETIME_FULL_WITH_SECONDS
-        )
-      }
+      title={DateTime.fromMillis(props.time).toLocaleString(
+        DateTime.DATETIME_FULL_WITH_SECONDS,
+      )}
    >
-      {DateTime.fromMillis(props.time).toLocaleString(DateTime.TIME_WITH_SECONDS)}
+      {DateTime.fromMillis(props.time).toLocaleString(
+        DateTime.TIME_WITH_SECONDS,
+      )}
    </span>
  )
 }
@@ -226,8 +224,12 @@ export default function Share(props: { api: string }) {
  }>({
    messages: {},
  })
-  const messages = createMemo(() => Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)))
-  const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>(["disconnected", "Disconnected"])
+  const messages = createMemo(() =>
+    Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)),
+  )
+  const [connectionStatus, setConnectionStatus] = createSignal<
+    [Status, string?]
+  >(["disconnected", "Disconnected"])

  onMount(() => {
    const apiUrl = props.api
@@ -326,7 +328,10 @@ export default function Share(props: { api: string }) {
    const result: string[][] = []
    for (const msg of messages()) {
      if (msg.role === "assistant" && msg.metadata?.assistant) {
-        result.push([msg.metadata.assistant.providerID, msg.metadata.assistant.modelID])
+        result.push([
+          msg.metadata.assistant.providerID,
+          msg.metadata.assistant.modelID,
+        ])
      }
    }
    return result
@@ -339,7 +344,7 @@ export default function Share(props: { api: string }) {
        input: 0,
        output: 0,
        reasoning: 0,
-      }
+      },
    }
    for (const msg of messages()) {
      const assistant = msg.metadata?.assistant
@@ -366,39 +371,39 @@ export default function Share(props: { api: string }) {
          <ul data-section="stats">
            <li>
              <span data-element-label>Cost</span>
-              {metrics().cost !== undefined ?
+              {metrics().cost !== undefined ? (
                <span>${metrics().cost.toFixed(2)}</span>
-                :
+              ) : (
                <span data-placeholder>&mdash;</span>
-              }
+              )}
            </li>
            <li>
              <span data-element-label>Input Tokens</span>
-              {metrics().tokens.input ?
+              {metrics().tokens.input ? (
                <span>{metrics().tokens.input}</span>
-                :
+              ) : (
                <span data-placeholder>&mdash;</span>
-              }
+              )}
            </li>
            <li>
              <span data-element-label>Output Tokens</span>
-              {metrics().tokens.output ?
+              {metrics().tokens.output ? (
                <span>{metrics().tokens.output}</span>
-                :
+              ) : (
                <span data-placeholder>&mdash;</span>
-              }
+              )}
            </li>
            <li>
              <span data-element-label>Reasoning Tokens</span>
-              {metrics().tokens.reasoning ?
+              {metrics().tokens.reasoning ? (
                <span>{metrics().tokens.reasoning}</span>
-                :
+              ) : (
                <span data-placeholder>&mdash;</span>
-              }
+              )}
            </li>
          </ul>
          <ul data-section="stats" data-section-models>
-            {models().length > 0 ?
+            {models().length > 0 ? (
              <For each={Array.from(models())}>
                {([provider, model]) => (
                  <li>
@@ -409,27 +414,29 @@ export default function Share(props: { api: string }) {
                  </li>
                )}
              </For>
-              :
+            ) : (
              <li>
                <span data-element-label>Models</span>
                <span data-placeholder>&mdash;</span>
              </li>
-            }
+            )}
          </ul>
          <div data-section="date">
-            {messages().length > 0 && messages()[0].metadata?.time.created ?
-              <span title={
-                DateTime.fromMillis(
-                  messages()[0].metadata?.time.created || 0
-                ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)
-              }>
+            {messages().length > 0 && messages()[0].metadata?.time.created ? (
+              <span
+                title={DateTime.fromMillis(
+                  messages()[0].metadata?.time.created || 0,
+                ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+              >
                {DateTime.fromMillis(
-                  messages()[0].metadata?.time.created || 0
+                  messages()[0].metadata?.time.created || 0,
                ).toLocaleString(DateTime.DATE_MED)}
              </span>
-              :
-              <span data-element-label data-placeholder>Started at &mdash;</span>
-            }
+            ) : (
+              <span data-element-label data-placeholder>
+                Started at &mdash;
+              </span>
+            )}
          </div>
        </div>
      </div>
@@ -444,27 +451,32 @@ export default function Share(props: { api: string }) {
              {(msg, msgIndex) => (
                <For each={msg.parts}>
                  {(part, partIndex) => {
-                    if (part.type === "step-start" && (partIndex() > 0 || !msg.metadata?.assistant)) return null
+                    if (
+                      part.type === "step-start" &&
+                      (partIndex() > 0 || !msg.metadata?.assistant)
+                    )
+                      return null

                    const [results, showResults] = createSignal(false)
-                    const isLastPart = createMemo(() =>
-                      (messages().length === msgIndex() + 1)
-                      && (msg.parts.length === partIndex() + 1)
+                    const isLastPart = createMemo(
+                      () =>
+                        messages().length === msgIndex() + 1 &&
+                        msg.parts.length === partIndex() + 1,
                    )
-                    const time = msg.metadata?.time.completed
-                      || msg.metadata?.time.created
-                      || 0
+                    const time =
+                      msg.metadata?.time.completed ||
+                      msg.metadata?.time.created ||
+                      0
                    return (
                      <Switch>
-                        { /* User text */}
-                        <Match when={
-                          msg.role === "user" && part.type === "text" && part
-                        }>
-                          {part =>
-                            <div
-                              data-section="part"
-                              data-part-type="user-text"
-                            >
+                        {/* User text */}
+                        <Match
+                          when={
+                            msg.role === "user" && part.type === "text" && part
+                          }
+                        >
+                          {(part) => (
+                            <div data-section="part" data-part-type="user-text">
                              <div data-section="decoration">
                                <div>
                                  <IconUserCircle width={18} height={18} />
@@ -480,21 +492,22 @@ export default function Share(props: { api: string }) {
                                <PartFooter time={time} />
                              </div>
                            </div>
-                          }
+                          )}
                        </Match>
-                        { /* AI text */}
-                        <Match when={
-                          msg.role === "assistant"
-                          && part.type === "text"
-                          && part
-                        }>
-                          {part =>
-                            <div
-                              data-section="part"
-                              data-part-type="ai-text"
-                            >
+                        {/* AI text */}
+                        <Match
+                          when={
+                            msg.role === "assistant" &&
+                            part.type === "text" &&
+                            part
+                          }
+                        >
+                          {(part) => (
+                            <div data-section="part" data-part-type="ai-text">
                              <div data-section="decoration">
-                                <div><IconSparkles width={18} height={18} /></div>
+                                <div>
+                                  <IconSparkles width={18} height={18} />
+                                </div>
                                <div></div>
                              </div>
                              <div data-section="content">
@@ -505,19 +518,18 @@ export default function Share(props: { api: string }) {
                                <PartFooter time={time} />
                              </div>
                            </div>
-                          }
+                          )}
                        </Match>
-                        { /* AI model */}
-                        <Match when={
-                          msg.role === "assistant"
-                          && part.type === "step-start"
-                          && msg.metadata?.assistant
-                        }>
-                          {assistant =>
-                            <div
-                              data-section="part"
-                              data-part-type="ai-model"
-                            >
+                        {/* AI model */}
+                        <Match
+                          when={
+                            msg.role === "assistant" &&
+                            part.type === "step-start" &&
+                            msg.metadata?.assistant
+                          }
+                        >
+                          {(assistant) => (
+                            <div data-section="part" data-part-type="ai-model">
                              <div data-section="decoration">
                                <div>
                                  <ProviderIcon
@@ -542,15 +554,17 @@ export default function Share(props: { api: string }) {
                                </div>
                              </div>
                            </div>
-                          }
+                          )}
                        </Match>
-                        { /* System text */}
-                        <Match when={
-                          msg.role === "system"
-                          && part.type === "text"
-                          && part
-                        }>
-                          {part =>
+                        {/* System text */}
+                        <Match
+                          when={
+                            msg.role === "system" &&
+                            part.type === "text" &&
+                            part
+                          }
+                        >
+                          {(part) => (
                            <div
                              data-section="part"
                              data-part-type="system-text"
@@ -575,16 +589,18 @@ export default function Share(props: { api: string }) {
                                <PartFooter time={time} />
                              </div>
                            </div>
-                          }
+                          )}
                        </Match>
-                        { /* Edit tool */}
-                        <Match when={
-                          msg.role === "assistant"
-                          && part.type === "tool-invocation"
-                          && part.toolInvocation.toolName === "edit"
-                          && part
-                        }>
-                          {part => {
+                        {/* Edit tool */}
+                        <Match
+                          when={
+                            msg.role === "assistant" &&
+                            part.type === "tool-invocation" &&
+                            part.toolInvocation.toolName === "edit" &&
+                            part
+                          }
+                        >
+                          {(part) => {
                            const args = part().toolInvocation.args
                            const filePath = args.filePath
                            return (
@@ -618,20 +634,25 @@ export default function Share(props: { api: string }) {
                            )
                          }}
                        </Match>
-                        { /* Tool call */}
-                        <Match when={
-                          msg.role === "assistant"
-                          && part.type === "tool-invocation"
-                          && part
-                        }>
-                          {part =>
+                        {/* Tool call */}
+                        <Match
+                          when={
+                            msg.role === "assistant" &&
+                            part.type === "tool-invocation" &&
+                            part
+                          }
+                        >
+                          {(part) => (
                            <div
                              data-section="part"
                              data-part-type="tool-fallback"
                            >
                              <div data-section="decoration">
                                <div>
-                                  <IconWrenchScrewdriver width={18} height={18} />
+                                  <IconWrenchScrewdriver
+                                    width={18}
+                                    height={18}
+                                  />
                                </div>
                                <div></div>
                              </div>
@@ -641,27 +662,32 @@ export default function Share(props: { api: string }) {
                                    {part().toolInvocation.toolName}
                                  </span>
                                  <div data-part-tool-args>
-                                    <For each={
-                                      flattenToolArgs(part().toolInvocation.args)
-                                    }>
-                                      {([name, value]) =>
+                                    <For
+                                      each={flattenToolArgs(
+                                        part().toolInvocation.args,
+                                      )}
+                                    >
+                                      {([name, value]) => (
                                        <>
                                          <div></div>
                                          <div>{name}</div>
                                          <div>{value}</div>
                                        </>
-                                      }
+                                      )}
                                    </For>
                                  </div>
                                  <Switch>
-                                    <Match when={
-                                      part().toolInvocation.state === "result"
-                                      && part().toolInvocation.result
-                                    }>
+                                    <Match
+                                      when={
+                                        part().toolInvocation.state ===
+                                          "result" &&
+                                        part().toolInvocation.result
+                                      }
+                                    >
                                      <div data-part-tool-result>
                                        <ResultsButton
                                          results={results()}
-                                          onClick={() => showResults(e => !e)}
+                                          onClick={() => showResults((e) => !e)}
                                        />
                                        <Show when={results()}>
                                          <TextPart
@@ -673,9 +699,11 @@ export default function Share(props: { api: string }) {
                                        </Show>
                                      </div>
                                    </Match>
-                                    <Match when={
-                                      part().toolInvocation.state === "call"
-                                    }>
+                                    <Match
+                                      when={
+                                        part().toolInvocation.state === "call"
+                                      }
+                                    >
                                      <TextPart
                                        data-size="sm"
                                        data-color="dimmed"
@@ -687,20 +715,27 @@ export default function Share(props: { api: string }) {
                                <PartFooter time={time} />
                              </div>
                            </div>
-                          }
+                          )}
                        </Match>
-                        { /* Fallback */}
+                        {/* Fallback */}
                        <Match when={true}>
-                          <div
-                            data-section="part"
-                            data-part-type="fallback"
-                          >
+                          <div data-section="part" data-part-type="fallback">
                            <div data-section="decoration">
                              <div>
-                                <Switch fallback={
-                                  <IconWrenchScrewdriver width={16} height={16} />
-                                }>
-                                  <Match when={msg.role === "assistant" && part.type !== "tool-invocation"}>
+                                <Switch
+                                  fallback={
+                                    <IconWrenchScrewdriver
+                                      width={16}
+                                      height={16}
+                                    />
+                                  }
+                                >
+                                  <Match
+                                    when={
+                                      msg.role === "assistant" &&
+                                      part.type !== "tool-invocation"
+                                    }
+                                  >
                                    <IconSparkles width={18} height={18} />
                                  </Match>
                                  <Match when={msg.role === "system"}>
@@ -718,7 +753,9 @@ export default function Share(props: { api: string }) {
                                <span data-element-label data-part-title>
                                  {part.type}
                                </span>
-                                <TextPart text={JSON.stringify(part, null, 2)} />
+                                <TextPart
+                                  text={JSON.stringify(part, null, 2)}
+                                />
                              </div>
                              <PartFooter time={time} />
                            </div>
@@ -767,6 +804,6 @@ export default function Share(props: { api: string }) {
          </Show>
        </div>
      </div>
-    </main >
+    </main>
  )
 }
--- a/packages/web/src/components/diffview.module.css
+++ b/packages/web/src/components/diffview.module.css
@@ -7,7 +7,7 @@
 }

 .column {
- display: flex;
+  display: flex;
  flex-direction: column;
  overflow-x: auto;
  min-width: 0;
--- a/packages/web/src/components/icons/custom.tsx
+++ b/packages/web/src/components/icons/custom.tsx
@@ -3,20 +3,35 @@ import { type JSX } from "solid-js"
 // https://icones.js.org/collection/ri?s=openai&icon=ri:openai-fill
 export function IconOpenAI(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
-    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z" /></svg>
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"
+      />
+    </svg>
  )
 }

 // https://icones.js.org/collection/ri?s=anthropic&icon=ri:anthropic-fill
 export function IconAnthropic(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
-    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.765 5h-3.308l5.923 15h3.23zM7.226 5L1.38 20h3.308l1.307-3.154h6.154l1.23 3.077h3.309L10.688 5zm-.308 9.077l2-5.308l2.077 5.308z" /></svg>
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M16.765 5h-3.308l5.923 15h3.23zM7.226 5L1.38 20h3.308l1.307-3.154h6.154l1.23 3.077h3.309L10.688 5zm-.308 9.077l2-5.308l2.077 5.308z"
+      />
+    </svg>
  )
 }

 // https://icones.js.org/collection/ri?s=gemini&icon=ri:gemini-fill
 export function IconGemini(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
-    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12.024c-6.437.388-11.59 5.539-11.977 11.976h-.047C11.588 17.563 6.436 12.412 0 12.024v-.047C6.437 11.588 11.588 6.437 11.976 0h.047c.388 6.437 5.54 11.588 11.977 11.977z" /></svg>
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M24 12.024c-6.437.388-11.59 5.539-11.977 11.976h-.047C11.588 17.563 6.436 12.412 0 12.024v-.047C6.437 11.588 11.588 6.437 11.976 0h.047c.388 6.437 5.54 11.588 11.977 11.977z"
+      />
+    </svg>
  )
 }
--- a/packages/web/src/components/icons/index.tsx
+++ b/packages/web/src/components/icons/index.tsx
@@ -21,7 +21,7 @@ export function IconAcademicCap(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconAdjustmentsHorizontal(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -42,7 +42,7 @@ export function IconAdjustmentsHorizontal(
  )
 }
 export function IconAdjustmentsVertical(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -63,7 +63,7 @@ export function IconAdjustmentsVertical(
  )
 }
 export function IconArchiveBoxArrowDown(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -84,7 +84,7 @@ export function IconArchiveBoxArrowDown(
  )
 }
 export function IconArchiveBoxXMark(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -124,7 +124,7 @@ export function IconArchiveBox(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowDownCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -164,7 +164,7 @@ export function IconArrowDownLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowDownOnSquareStack(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -185,7 +185,7 @@ export function IconArrowDownOnSquareStack(
  )
 }
 export function IconArrowDownOnSquare(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -263,7 +263,7 @@ export function IconArrowDown(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowLeftCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -284,7 +284,7 @@ export function IconArrowLeftCircle(
  )
 }
 export function IconArrowLeftOnRectangle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -400,7 +400,7 @@ export function IconArrowLongUp(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowPathRoundedSquare(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -440,7 +440,7 @@ export function IconArrowPath(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowRightCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -461,7 +461,7 @@ export function IconArrowRightCircle(
  )
 }
 export function IconArrowRightOnRectangle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -539,7 +539,7 @@ export function IconArrowSmallLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowSmallRight(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -579,7 +579,7 @@ export function IconArrowSmallUp(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowTopRightOnSquare(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -600,7 +600,7 @@ export function IconArrowTopRightOnSquare(
  )
 }
 export function IconArrowTrendingDown(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -621,7 +621,7 @@ export function IconArrowTrendingDown(
  )
 }
 export function IconArrowTrendingUp(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -680,7 +680,7 @@ export function IconArrowUpLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowUpOnSquareStack(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -701,7 +701,7 @@ export function IconArrowUpOnSquareStack(
  )
 }
 export function IconArrowUpOnSquare(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -817,7 +817,7 @@ export function IconArrowUturnLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowUturnRight(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -857,7 +857,7 @@ export function IconArrowUturnUp(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconArrowsPointingIn(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -878,7 +878,7 @@ export function IconArrowsPointingIn(
  )
 }
 export function IconArrowsPointingOut(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -899,7 +899,7 @@ export function IconArrowsPointingOut(
  )
 }
 export function IconArrowsRightLeft(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1040,7 +1040,7 @@ export function IconBars2(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconBars3BottomLeft(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1061,7 +1061,7 @@ export function IconBars3BottomLeft(
  )
 }
 export function IconBars3BottomRight(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1082,7 +1082,7 @@ export function IconBars3BottomRight(
  )
 }
 export function IconBars3CenterLeft(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1507,7 +1507,7 @@ export function IconBugAnt(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconBuildingLibrary(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1528,7 +1528,7 @@ export function IconBuildingLibrary(
  )
 }
 export function IconBuildingOffice2(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1568,7 +1568,7 @@ export function IconBuildingOffice(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconBuildingStorefront(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1776,7 +1776,7 @@ export function IconChartPie(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconChatBubbleBottomCenterText(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1797,7 +1797,7 @@ export function IconChatBubbleBottomCenterText(
  )
 }
 export function IconChatBubbleBottomCenter(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1818,7 +1818,7 @@ export function IconChatBubbleBottomCenter(
  )
 }
 export function IconChatBubbleLeftEllipsis(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1839,7 +1839,7 @@ export function IconChatBubbleLeftEllipsis(
  )
 }
 export function IconChatBubbleLeftRight(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1879,7 +1879,7 @@ export function IconChatBubbleLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconChatBubbleOvalLeftEllipsis(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1900,7 +1900,7 @@ export function IconChatBubbleOvalLeftEllipsis(
  )
 }
 export function IconChatBubbleOvalLeft(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1978,7 +1978,7 @@ export function IconCheck(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconChevronDoubleDown(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -1999,7 +1999,7 @@ export function IconChevronDoubleDown(
  )
 }
 export function IconChevronDoubleLeft(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2020,7 +2020,7 @@ export function IconChevronDoubleLeft(
  )
 }
 export function IconChevronDoubleRight(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2041,7 +2041,7 @@ export function IconChevronDoubleRight(
  )
 }
 export function IconChevronDoubleUp(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2176,7 +2176,7 @@ export function IconCircleStack(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconClipboardDocumentCheck(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2197,7 +2197,7 @@ export function IconClipboardDocumentCheck(
  )
 }
 export function IconClipboardDocumentList(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2218,7 +2218,7 @@ export function IconClipboardDocumentList(
  )
 }
 export function IconClipboardDocument(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2334,7 +2334,7 @@ export function IconCloud(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconCodeBracketSquare(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2464,7 +2464,7 @@ export function IconCommandLine(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconComputerDesktop(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2523,7 +2523,7 @@ export function IconCreditCard(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconCubeTransparent(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2563,7 +2563,7 @@ export function IconCube(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconCurrencyBangladeshi(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2679,7 +2679,7 @@ export function IconCurrencyYen(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconCursorArrowRays(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2700,7 +2700,7 @@ export function IconCursorArrowRays(
  )
 }
 export function IconCursorArrowRipple(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2721,7 +2721,7 @@ export function IconCursorArrowRipple(
  )
 }
 export function IconDevicePhoneMobile(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2761,7 +2761,7 @@ export function IconDeviceTablet(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconDocumentArrowDown(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2782,7 +2782,7 @@ export function IconDocumentArrowDown(
  )
 }
 export function IconDocumentArrowUp(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2803,7 +2803,7 @@ export function IconDocumentArrowUp(
  )
 }
 export function IconDocumentChartBar(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2843,7 +2843,7 @@ export function IconDocumentCheck(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconDocumentDuplicate(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2864,7 +2864,7 @@ export function IconDocumentDuplicate(
  )
 }
 export function IconDocumentMagnifyingGlass(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2961,7 +2961,7 @@ export function IconDocument(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconEllipsisHorizontalCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -2982,7 +2982,7 @@ export function IconEllipsisHorizontalCircle(
  )
 }
 export function IconEllipsisHorizontal(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3017,7 +3017,7 @@ export function IconEllipsisHorizontal(
  )
 }
 export function IconEllipsisVertical(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3103,7 +3103,7 @@ export function IconEnvelopeSolid(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconExclamationCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3124,7 +3124,7 @@ export function IconExclamationCircle(
  )
 }
 export function IconExclamationTriangle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3330,7 +3330,7 @@ export function IconFlag(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconFolderArrowDown(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3567,7 +3567,7 @@ export function IconGlobeAmericas(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconGlobeAsiaAustralia(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3588,7 +3588,7 @@ export function IconGlobeAsiaAustralia(
  )
 }
 export function IconGlobeEuropeAfrica(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3818,7 +3818,7 @@ export function IconInbox(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconInformationCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -3991,7 +3991,7 @@ export function IconLockOpen(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconMagnifyingGlassCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4012,7 +4012,7 @@ export function IconMagnifyingGlassCircle(
  )
 }
 export function IconMagnifyingGlassMinus(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4033,7 +4033,7 @@ export function IconMagnifyingGlassMinus(
  )
 }
 export function IconMagnifyingGlassPlus(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4054,7 +4054,7 @@ export function IconMagnifyingGlassPlus(
  )
 }
 export function IconMagnifyingGlass(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4424,7 +4424,7 @@ export function IconPencil(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconPhoneArrowDownLeft(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4445,7 +4445,7 @@ export function IconPhoneArrowDownLeft(
  )
 }
 export function IconPhoneArrowUpRight(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4663,7 +4663,7 @@ export function IconPower(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconPresentationChartBar(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4684,7 +4684,7 @@ export function IconPresentationChartBar(
  )
 }
 export function IconPresentationChartLine(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -4832,7 +4832,7 @@ export function IconQrCode(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconQuestionMarkCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -5133,7 +5133,7 @@ export function IconShieldCheck(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconShieldExclamation(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -5780,7 +5780,7 @@ export function IconVariable(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconVideoCameraSlash(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -5838,7 +5838,7 @@ export function IconViewColumns(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconViewfinderCircle(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
@@ -5916,7 +5916,7 @@ export function IconWindow(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  )
 }
 export function IconWrenchScrewdriver(
-  props: JSX.SvgSVGAttributes<SVGSVGElement>
+  props: JSX.SvgSVGAttributes<SVGSVGElement>,
 ) {
  return (
    <svg
--- a/packages/web/src/components/share.module.css
+++ b/packages/web/src/components/share.module.css
@@ -84,11 +84,21 @@
    span:first-child {
      color: var(--sl-color-divider);

-      &[data-status="connected"] { color: var(--sl-color-green); }
-      &[data-status="connecting"] { color: var(--sl-color-orange); }
-      &[data-status="disconnected"] { color: var(--sl-color-divider); }
-      &[data-status="reconnecting"] { color: var(--sl-color-orange); }
-      &[data-status="error"] { color: var(--sl-color-red); }
+      &[data-status="connected"] {
+        color: var(--sl-color-green);
+      }
+      &[data-status="connecting"] {
+        color: var(--sl-color-orange);
+      }
+      &[data-status="disconnected"] {
+        color: var(--sl-color-divider);
+      }
+      &[data-status="reconnecting"] {
+        color: var(--sl-color-orange);
+      }
+      &[data-status="error"] {
+        color: var(--sl-color-red);
+      }
    }
  }

@@ -106,7 +116,7 @@
      font-size: 0.875rem;

      span[data-placeholder] {
-          color: var(--sl-color-text-dimmed);
+        color: var(--sl-color-text-dimmed);
      }
    }
  }
@@ -215,16 +225,15 @@
      max-width: 100%;
      gap: 0.25rem 0.375rem;

-
-      & > div:nth-child(3n+1) {
+      & > 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) {
+      & > div:nth-child(3n + 2),
+      & > div:nth-child(3n + 3) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -232,7 +241,7 @@
        line-height: 1.5;
      }

-      & > div:nth-child(3n+3) {
+      & > div:nth-child(3n + 3) {
        padding-left: 0.125rem;
        color: var(--sl-color-text-dimmed);
      }