run formatter

11 files changed, 372 insertions, 320 deletions

diff --git a/packages/web/src/components/CodeBlock.tsx b/packages/web/src/components/CodeBlock.tsx
index 17559ece1..f410ab070 100644
--- 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
diff --git a/packages/web/src/components/DiffView.tsx b/packages/web/src/components/DiffView.tsx
index 44feef140..4e864e06b 100644
--- 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",
         })
       }
     }
diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx
index ac75a3cf7..f4b89e1f5 100644
--- 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;
-    };
-  };
+      input: number
+      output: number
+      reasoning: number
+    }
+  }
   sessionID: string
-  tool: Record<string, {
-    properties: Record<string, any>
-    time: {
-      start: number
-      end: number
+  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;
-
-    if (
-      value !== null &&
-      typeof value === "object" &&
-      !Array.isArray(value)
-    ) {
-      entries.push(...flattenToolArgs(value, path));
-    }
-    else {
-      entries.push([path, value]);
+    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])
     }
   }
 
-  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>
   )
 }
diff --git a/packages/web/src/components/diffview.module.css b/packages/web/src/components/diffview.module.css
index 1a0e6c523..e92bd61fc 100644
--- 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;
diff --git a/packages/web/src/components/icons/custom.tsx b/packages/web/src/components/icons/custom.tsx
index f016b83cf..be5576718 100644
--- 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>
   )
 }
diff --git a/packages/web/src/components/icons/index.tsx b/packages/web/src/components/icons/index.tsx
index 9603925d5..a788d8f47 100644
--- 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
diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css
index 5d1dab1bf..2f70cd12b 100644
--- 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);
       }
diff --git a/packages/web/src/content.config.ts b/packages/web/src/content.config.ts
index d9ee8c9d1..d61471487 100644
--- a/packages/web/src/content.config.ts
+++ b/packages/web/src/content.config.ts
@@ -1,7 +1,7 @@
-import { defineCollection } from 'astro:content';
-import { docsLoader } from '@astrojs/starlight/loaders';
-import { docsSchema } from '@astrojs/starlight/schema';
+import { defineCollection } from "astro:content"
+import { docsLoader } from "@astrojs/starlight/loaders"
+import { docsSchema } from "@astrojs/starlight/schema"
 
 export const collections = {
-	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
-};
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+}
diff --git a/packages/web/src/content/docs/docs/cli.mdx b/packages/web/src/content/docs/docs/cli.mdx
index 44a56e1fb..af1016152 100644
--- a/packages/web/src/content/docs/docs/cli.mdx
+++ b/packages/web/src/content/docs/docs/cli.mdx
@@ -20,21 +20,21 @@ Or start with a specific working directory.
 opencode -c /path/to/project
 ```
 
-## Flags 
+## Flags
 
 The OpenCode CLI takes the following flags.
 
-| Flag | Short | Description |
-| -- | -- | -- |
-| `--help` | `-h`  | Display help |
-| `--debug` | `-d`  | Enable debug mode |
-| `--cwd` | `-c`  | Set current working directory |
-| `--prompt` | `-p`  | Run a single prompt in non-interactive mode |
+| Flag              | Short | Description                                              |
+| ----------------- | ----- | -------------------------------------------------------- |
+| `--help`          | `-h`  | Display help                                             |
+| `--debug`         | `-d`  | Enable debug mode                                        |
+| `--cwd`           | `-c`  | Set current working directory                            |
+| `--prompt`        | `-p`  | Run a single prompt in non-interactive mode              |
 | `--output-format` | `-f`  | Output format for non-interactive mode, `text` or `json` |
-| `--quiet` | `-q`  | Hide spinner in non-interactive mode |
-| `--verbose` |       | Display logs to stderr in non-interactive mode |
-| `--allowedTools` |       | Restrict the agent to only use specified tools |
-| `--excludedTools` |       | Prevent the agent from using specified tools |
+| `--quiet`         | `-q`  | Hide spinner in non-interactive mode                     |
+| `--verbose`       |       | Display logs to stderr in non-interactive mode           |
+| `--allowedTools`  |       | Restrict the agent to only use specified tools           |
+| `--excludedTools` |       | Prevent the agent from using specified tools             |
 
 ## Non-interactive
 
diff --git a/packages/web/src/content/docs/docs/config.mdx b/packages/web/src/content/docs/docs/config.mdx
index 288f194c5..9617612d0 100644
--- a/packages/web/src/content/docs/docs/config.mdx
+++ b/packages/web/src/content/docs/docs/config.mdx
@@ -73,16 +73,15 @@ The config file has the following structure.
 
 For the providers, you can also specify the keys using environment variables.
 
-| Environment Variable       | Models   |
-| -------------------------- | ----------- |
-| `ANTHROPIC_API_KEY`        | Claude |
-| `OPENAI_API_KEY`           | OpenAI |
-| `GEMINI_API_KEY`           | Google Gemini |
-| `GROQ_API_KEY`             | Groq |
-| `AWS_ACCESS_KEY_ID`        | Amazon Bedrock |
-| `AWS_SECRET_ACCESS_KEY`    | Amazon Bedrock |
-| `AWS_REGION`               | Amazon Bedrock |
-| `AZURE_OPENAI_ENDPOINT`    | Azure OpenAI |
+| Environment Variable       | Models                                     |
+| -------------------------- | ------------------------------------------ |
+| `ANTHROPIC_API_KEY`        | Claude                                     |
+| `OPENAI_API_KEY`           | OpenAI                                     |
+| `GEMINI_API_KEY`           | Google Gemini                              |
+| `GROQ_API_KEY`             | Groq                                       |
+| `AWS_ACCESS_KEY_ID`        | Amazon Bedrock                             |
+| `AWS_SECRET_ACCESS_KEY`    | Amazon Bedrock                             |
+| `AWS_REGION`               | Amazon Bedrock                             |
+| `AZURE_OPENAI_ENDPOINT`    | Azure OpenAI                               |
 | `AZURE_OPENAI_API_KEY`     | Azure OpenAI, optional when using Entra ID |
-| `AZURE_OPENAI_API_VERSION` | Azure OpenAI |
-
+| `AZURE_OPENAI_API_VERSION` | Azure OpenAI                               |
diff --git a/packages/web/src/content/docs/docs/themes.mdx b/packages/web/src/content/docs/docs/themes.mdx
index e691a22e7..a177ea3bc 100644
--- a/packages/web/src/content/docs/docs/themes.mdx
+++ b/packages/web/src/content/docs/docs/themes.mdx
@@ -55,14 +55,14 @@ You can create your own custom theme by setting the `theme: custom` and providin
 
 You can define any of the following color keys in your `customTheme`.
 
-| Type | Color keys |
-| --- | --- |
-| Base colors | `primary`, `secondary`, `accent` |
-| Status colors | `error`, `warning`, `success`, `info` |
-| Text colors | `text`, `textMuted`, `textEmphasized` |
+| Type              | Color keys                                              |
+| ----------------- | ------------------------------------------------------- |
+| Base colors       | `primary`, `secondary`, `accent`                        |
+| Status colors     | `error`, `warning`, `success`, `info`                   |
+| Text colors       | `text`, `textMuted`, `textEmphasized`                   |
 | Background colors | `background`, `backgroundSecondary`, `backgroundDarker` |
-| Border colors | `borderNormal`, `borderFocused`, `borderDim` |
-| Diff view colors | `diffAdded`, `diffRemoved`, `diffContext`, etc. |
+| Border colors     | `borderNormal`, `borderFocused`, `borderDim`            |
+| Diff view colors  | `diffAdded`, `diffRemoved`, `diffContext`, etc.         |
 
 You don't need to define all the color keys. Any undefined colors will fall back to the default `opencode` theme colors.