big format

packages/web/src/components/Share.tsx

@@ -1,4 +1,14 @@
-import { For, Show, onMount, Suspense, onCleanup, createMemo, createSignal, SuspenseList, createEffect } from "solid-js"
+import {
+  For,
+  Show,
+  onMount,
+  Suspense,
+  onCleanup,
+  createMemo,
+  createSignal,
+  SuspenseList,
+  createEffect,
+} from "solid-js"
 import { DateTime } from "luxon"
 import { createStore, reconcile, unwrap } from "solid-js/store"
 import { IconArrowDown } from "./icons"
@@ -66,8 +76,13 @@ export default function Share(props: { id: string; api: string; info: Session.In
     },
     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",
+  ])
   createEffect(() => {
     console.log(unwrap(store))
   })
@@ -330,7 +345,9 @@ export default function Share(props: { id: string; api: string; info: Session.In
             </ul>
             <div
               data-component="header-time"
-              title={DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+              title={DateTime.fromMillis(data().created || 0).toLocaleString(
+                DateTime.DATETIME_FULL_WITH_SECONDS,
+              )}
             >
               {DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_MED)}
             </div>
@@ -352,7 +369,10 @@ export default function Share(props: { id: string; api: string; info: Session.In
                         if (x.type === "text" && x.synthetic === true) return false
                         if (x.type === "tool" && x.tool === "todoread") return false
                         if (x.type === "text" && !x.text) return false
-                        if (x.type === "tool" && (x.state.status === "pending" || x.state.status === "running"))
+                        if (
+                          x.type === "tool" &&
+                          (x.state.status === "pending" || x.state.status === "running")
+                        )
                           return false
                         return true
                       }),
@@ -364,7 +384,8 @@ export default function Share(props: { id: string; api: string; info: Session.In
                           {(part, partIndex) => {
                             const last = createMemo(
                               () =>
-                                data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1,
+                                data().messages.length === msgIndex() + 1 &&
+                                filteredParts().length === partIndex() + 1,
                             )
 
                             onMount(() => {
@@ -381,7 +402,9 @@ export default function Share(props: { id: string; api: string; info: Session.In
                               }
                             })
 
-                            return <Part last={last()} part={part} index={partIndex()} message={msg} />
+                            return (
+                              <Part last={last()} part={part} index={partIndex()} message={msg} />
+                            )
                           }}
                         </For>
                       </Suspense>
@@ -406,7 +429,11 @@ export default function Share(props: { id: string; api: string; info: Session.In
                     </li>
                     <li>
                       <span data-element-label>Input Tokens</span>
-                      {data().tokens.input ? <span>{data().tokens.input}</span> : <span data-placeholder>&mdash;</span>}
+                      {data().tokens.input ? (
+                        <span>{data().tokens.input}</span>
+                      ) : (
+                        <span data-placeholder>&mdash;</span>
+                      )}
                     </li>
                     <li>
                       <span data-element-label>Output Tokens</span>
@@ -560,7 +587,8 @@ export function fromV1(v1: Message.Info): MessageWithParts {
                   }
                 }
 
-                const { title, time, ...metadata } = v1.metadata.tool[part.toolInvocation.toolCallId]
+                const { title, time, ...metadata } =
+                  v1.metadata.tool[part.toolInvocation.toolCallId]
                 if (part.toolInvocation.state === "call") {
                   return {
                     status: "running",

packages/web/src/components/icons/index.tsx

@@ -4418,7 +4418,14 @@ export function IconMultiSelect(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
 }
 export function IconSettings(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
-    <svg {...props} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      {...props}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g clip-path="url(#clip0_1256_16163)">
         <path
           fill-rule="evenodd"

packages/web/src/components/share/common.tsx

@@ -10,7 +10,12 @@ export function AnchorIcon(props: AnchorProps) {
   const [copied, setCopied] = createSignal(false)
 
   return (
-    <div {...rest} data-element-anchor title="Link to this message" data-status={copied() ? "copied" : ""}>
+    <div
+      {...rest}
+      data-element-anchor
+      title="Link to this message"
+      data-status={copied() ? "copied" : ""}
+    >
       <a
         href={`#${local.id}`}
         onClick={(e) => {

packages/web/src/components/share/content-code.tsx

@@ -26,7 +26,11 @@ export function ContentCode(props: Props) {
   )
   return (
     <Suspense>
-      <div innerHTML={html()} class={style.root} data-flush={props.flush === true ? true : undefined} />
+      <div
+        innerHTML={html()}
+        class={style.root}
+        data-flush={props.flush === true ? true : undefined}
+      />
     </Suspense>
   )
 }

packages/web/src/components/share/content-diff.tsx

@@ -124,7 +124,9 @@ export function ContentDiff(props: Props) {
       // Collect consecutive modified/removed/added rows
       while (
         i < currentRows.length &&
-        (currentRows[i].type === "modified" || currentRows[i].type === "removed" || currentRows[i].type === "added")
+        (currentRows[i].type === "modified" ||
+          currentRows[i].type === "removed" ||
+          currentRows[i].type === "added")
       ) {
         const row = currentRows[i]
         if (row.left && (row.type === "removed" || row.type === "modified")) {
@@ -162,10 +164,16 @@ export function ContentDiff(props: Props) {
       <div data-component="desktop">
         {rows().map((r) => (
           <div data-component="diff-row" data-type={r.type}>
-            <div data-slot="before" data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}>
+            <div
+              data-slot="before"
+              data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}
+            >
               <ContentCode code={r.left} flush lang={props.lang} />
             </div>
-            <div data-slot="after" data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}>
+            <div
+              data-slot="after"
+              data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}
+            >
               <ContentCode code={r.right} lang={props.lang} flush />
             </div>
           </div>
@@ -176,7 +184,11 @@ export function ContentDiff(props: Props) {
         {mobileRows().map((block) => (
           <div data-component="diff-block" data-type={block.type}>
             {block.lines.map((line) => (
-              <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
+              <div
+                data-diff-type={
+                  block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""
+                }
+              >
                 <ContentCode code={line} lang={props.lang} flush />
               </div>
             ))}

packages/web/src/components/share/copy-button.tsx

@@ -21,7 +21,11 @@ export function CopyButton(props: CopyButtonProps) {
   return (
     <div data-component="copy-button" class={styles.root}>
       <button type="button" onClick={handleCopyClick} data-copied={copied() ? true : undefined}>
-        {copied() ? <IconCheckCircle width={16} height={16} /> : <IconClipboard width={16} height={16} />}
+        {copied() ? (
+          <IconCheckCircle width={16} height={16} />
+        ) : (
+          <IconClipboard width={16} height={16} />
+        )}
       </button>
     </div>
   )

packages/web/src/components/share/part.tsx

@@ -1,6 +1,15 @@
 import map from "lang-map"
 import { DateTime } from "luxon"
-import { For, Show, Match, Switch, type JSX, createMemo, createSignal, type ParentProps } from "solid-js"
+import {
+  For,
+  Show,
+  Match,
+  Switch,
+  type JSX,
+  createMemo,
+  createSignal,
+  type ParentProps,
+} from "solid-js"
 import {
   IconHashtag,
   IconSparkles,
@@ -19,7 +28,14 @@ import {
   IconMagnifyingGlass,
   IconDocumentMagnifyingGlass,
 } from "../icons"
-import { IconMeta, IconRobot, IconOpenAI, IconGemini, IconAnthropic, IconBrain } from "../icons/custom"
+import {
+  IconMeta,
+  IconRobot,
+  IconOpenAI,
+  IconGemini,
+  IconAnthropic,
+  IconBrain,
+} from "../icons/custom"
 import { ContentCode } from "./content-code"
 import { ContentDiff } from "./content-diff"
 import { ContentText } from "./content-text"
@@ -79,7 +95,11 @@ export function Part(props: PartProps) {
                 <IconPaperClip width={18} height={18} />
               </Match>
               <Match
-                when={props.part.type === "step-start" && props.message.role === "assistant" && props.message.modelID}
+                when={
+                  props.part.type === "step-start" &&
+                  props.message.role === "assistant" &&
+                  props.message.modelID
+                }
               >
                 {(model) => <ProviderIcon model={model()} size={18} />}
               </Match>
@@ -147,7 +167,9 @@ export function Part(props: PartProps) {
                   DateTime.DATETIME_FULL_WITH_SECONDS,
                 )}
               >
-                {DateTime.fromMillis(props.message.time.completed).toLocaleString(DateTime.DATETIME_MED)}
+                {DateTime.fromMillis(props.message.time.completed).toLocaleString(
+                  DateTime.DATETIME_MED,
+                )}
               </Footer>
             )}
           </div>
@@ -343,7 +365,10 @@ function getShikiLang(filename: string) {
   return type ? (overrides[type] ?? type) : "plaintext"
 }
 
-function getDiagnostics(diagnosticsByFile: Record<string, Diagnostic[]>, currentFile: string): JSX.Element[] {
+function getDiagnostics(
+  diagnosticsByFile: Record<string, Diagnostic[]>,
+  currentFile: string,
+): JSX.Element[] {
   const result: JSX.Element[] = []
 
   if (diagnosticsByFile === undefined || diagnosticsByFile[currentFile] === undefined) return result
@@ -397,7 +422,9 @@ export function TodoWriteTool(props: ToolProps) {
     completed: 2,
   }
   const todos = createMemo(() =>
-    ((props.state.input?.todos ?? []) as Todo[]).slice().sort((a, b) => priority[a.status] - priority[b.status]),
+    ((props.state.input?.todos ?? []) as Todo[])
+      .slice()
+      .sort((a, b) => priority[a.status] - priority[b.status]),
   )
   const starting = () => todos().every((t: Todo) => t.status === "pending")
   const finished = () => todos().every((t: Todo) => t.status === "completed")
@@ -439,13 +466,23 @@ export function GrepTool(props: ToolProps) {
         <Switch>
           <Match when={props.state.metadata?.matches && props.state.metadata?.matches > 0}>
             <ResultsButton
-              showCopy={props.state.metadata?.matches === 1 ? "1 match" : `${props.state.metadata?.matches} matches`}
+              showCopy={
+                props.state.metadata?.matches === 1
+                  ? "1 match"
+                  : `${props.state.metadata?.matches} matches`
+              }
             >
               <ContentText expand compact text={props.state.output} />
             </ResultsButton>
           </Match>
           <Match when={props.state.output}>
-            <ContentText expand compact text={props.state.output} data-size="sm" data-color="dimmed" />
+            <ContentText
+              expand
+              compact
+              text={props.state.output}
+              data-size="sm"
+              data-color="dimmed"
+            />
           </Match>
         </Switch>
       </div>
@@ -505,7 +542,9 @@ export function WebFetchTool(props: ToolProps) {
 }
 
 export function ReadTool(props: ToolProps) {
-  const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd))
+  const filePath = createMemo(() =>
+    stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd),
+  )
 
   return (
     <>
@@ -522,7 +561,10 @@ export function ReadTool(props: ToolProps) {
           </Match>
           <Match when={typeof props.state.metadata?.preview === "string"}>
             <ResultsButton showCopy="Show preview" hideCopy="Hide preview">
-              <ContentCode lang={getShikiLang(filePath() || "")} code={props.state.metadata?.preview} />
+              <ContentCode
+                lang={getShikiLang(filePath() || "")}
+                code={props.state.metadata?.preview}
+              />
             </ResultsButton>
           </Match>
           <Match when={typeof props.state.metadata?.preview !== "string" && props.state.output}>
@@ -537,8 +579,12 @@ export function ReadTool(props: ToolProps) {
 }
 
 export function WriteTool(props: ToolProps) {
-  const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd))
-  const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath))
+  const filePath = createMemo(() =>
+    stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd),
+  )
+  const diagnostics = createMemo(() =>
+    getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath),
+  )
 
   return (
     <>
@@ -558,7 +604,10 @@ export function WriteTool(props: ToolProps) {
           </Match>
           <Match when={props.state.input?.content}>
             <ResultsButton showCopy="Show contents" hideCopy="Hide contents">
-              <ContentCode lang={getShikiLang(filePath() || "")} code={props.state.input?.content} />
+              <ContentCode
+                lang={getShikiLang(filePath() || "")}
+                code={props.state.input?.content}
+              />
             </ResultsButton>
           </Match>
         </Switch>
@@ -568,8 +617,12 @@ export function WriteTool(props: ToolProps) {
 }
 
 export function EditTool(props: ToolProps) {
-  const filePath = createMemo(() => stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd))
-  const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath))
+  const filePath = createMemo(() =>
+    stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd),
+  )
+  const diagnostics = createMemo(() =>
+    getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath),
+  )
 
   return (
     <>
@@ -586,7 +639,10 @@ export function EditTool(props: ToolProps) {
           </Match>
           <Match when={props.state.metadata?.diff}>
             <div data-component="diff">
-              <ContentDiff diff={props.state.metadata?.diff} lang={getShikiLang(filePath() || "")} />
+              <ContentDiff
+                diff={props.state.metadata?.diff}
+                lang={getShikiLang(filePath() || "")}
+              />
             </div>
           </Match>
         </Switch>
@@ -619,7 +675,11 @@ export function GlobTool(props: ToolProps) {
         <Match when={props.state.metadata?.count && props.state.metadata?.count > 0}>
           <div data-component="tool-result">
             <ResultsButton
-              showCopy={props.state.metadata?.count === 1 ? "1 result" : `${props.state.metadata?.count} results`}
+              showCopy={
+                props.state.metadata?.count === 1
+                  ? "1 result"
+                  : `${props.state.metadata?.count} results`
+              }
             >
               <ContentText expand compact text={props.state.output} />
             </ResultsButton>
@@ -642,7 +702,12 @@ function ResultsButton(props: ResultsButtonProps) {
 
   return (
     <>
-      <button type="button" data-component="button-text" data-more onClick={() => setShow((e) => !e)}>
+      <button
+        type="button"
+        data-component="button-text"
+        data-more
+        onClick={() => setShow((e) => !e)}
+      >
         <span>{show() ? props.hideCopy || "Hide results" : props.showCopy || "Show results"}</span>
         <span data-slot="icon">
           <Show when={show()} fallback={<IconChevronRight width={11} height={11} />}>
@@ -668,7 +733,11 @@ function Footer(props: ParentProps<{ title: string }>) {
 }
 
 function ToolFooter(props: { time: number }) {
-  return props.time > MIN_DURATION && <Footer title={`${props.time}ms`}>{formatDuration(props.time)}</Footer>
+  return (
+    props.time > MIN_DURATION && (
+      <Footer title={`${props.time}ms`}>{formatDuration(props.time)}</Footer>
+    )
+  )
 }
 
 function TaskTool(props: ToolProps) {
@@ -709,7 +778,13 @@ export function FallbackTool(props: ToolProps) {
         <Match when={props.state.output}>
           <div data-component="tool-result">
             <ResultsButton>
-              <ContentText expand compact text={props.state.output} data-size="sm" data-color="dimmed" />
+              <ContentText
+                expand
+                compact
+                text={props.state.output}
+                data-size="sm"
+                data-color="dimmed"
+              />
             </ResultsButton>
           </div>
         </Match>

packages/web/src/content/docs/1-0.mdx

@@ -16,13 +16,14 @@ The new TUI works like the old one since it connects to the same opencode server
 You should not be autoupgraded to 1.0 if you are currently using a previous
 version. However some older versions of OpenCode always grab latest.
 
-
 To upgrade manually, run
+
 ```bash
 $ opencode upgrade 1.0.0
 ```
 
 To downgrade back to 0.x, run
+
 ```bash
 $ opencode upgrade 0.15.31
 ```

packages/web/src/content/docs/index.mdx

@@ -42,26 +42,10 @@ You can also install it with the following commands:
 - **Using Node.js**
 
   <Tabs>
-    <TabItem label="npm">
-      ```bash
-      npm install -g opencode-ai
-      ```
-    </TabItem>
-    <TabItem label="Bun">
-      ```bash
-      bun install -g opencode-ai
-      ```
-    </TabItem>
-    <TabItem label="pnpm">
-      ```bash
-      pnpm install -g opencode-ai
-      ```
-    </TabItem>
-    <TabItem label="Yarn">
-      ```bash
-      yarn global add opencode-ai
-      ```
-    </TabItem>
+    <TabItem label="npm">```bash npm install -g opencode-ai ```</TabItem>
+    <TabItem label="Bun">```bash bun install -g opencode-ai ```</TabItem>
+    <TabItem label="pnpm">```bash pnpm install -g opencode-ai ```</TabItem>
+    <TabItem label="Yarn">```bash yarn global add opencode-ai ```</TabItem>
   </Tabs>
 
 - **Using Homebrew on macOS and Linux**

packages/web/src/content/docs/permissions.mdx

@@ -187,4 +187,3 @@ permission:
 
 Only analyze code and suggest changes.
 ```
-

packages/web/src/content/docs/rules.mdx

@@ -107,7 +107,11 @@ The recommended approach is to use the `instructions` field in `opencode.json`:
 ```json title="opencode.json"
 {
   "$schema": "https://opencode.ai/config.json",
-  "instructions": ["docs/development-standards.md", "test/testing-guidelines.md", "packages/*/AGENTS.md"]
+  "instructions": [
+    "docs/development-standards.md",
+    "test/testing-guidelines.md",
+    "packages/*/AGENTS.md"
+  ]
 }
 ```
 

packages/web/src/content/docs/troubleshooting.mdx

@@ -90,8 +90,8 @@ If you encounter `ProviderModelNotFoundError` you are most likely incorrectly
 referencing a model somewhere.
 Models should be referenced like so: `<providerId>/<modelId>`
 
-
 Examples:
+
 - `openai/gpt-4.1`
 - `openrouter/google/gemini-2.5-flash`
 - `opencode/kimi-k2`

packages/web/src/styles/custom.css

@@ -30,8 +30,6 @@
   --sl-color-divider: var(--sl-color-gray-5);
 }
 
-
-
 body {
   color: var(--color-text) !important;
   font-size: 14px !important;
@@ -60,7 +58,6 @@ body {
     --color-border-weak: hsl(0, 4%, 23%);
 
     --color-icon: hsl(10, 3%, 43%);
-
   }
 }
 
@@ -145,7 +142,7 @@ a[aria-current="page"] {
   font-weight: 600 !important;
 }
 
-ul.top-level a[aria-current="page"] > span  {
+ul.top-level a[aria-current="page"] > span {
   color: var(--color-text-strong) !important;
 }
 
@@ -163,7 +160,6 @@ ul.top-level a[aria-current="page"] > span  {
   font-weight: 600 !important;
 }
 
-
 .top-level li a {
   border-radius: 0;
   width: 100%;
@@ -221,13 +217,16 @@ site-search > button span {
   }
 }
 
-
-
 site-search > button > kbd {
   font-size: 14px !important;
 }
 
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
   color: var(--color-text-strong) !important;
 }
 
@@ -263,7 +262,8 @@ strong {
   font-weight: 500 !important;
 }
 
-ul, ol {
+ul,
+ol {
   list-style: none !important;
   padding: 0 !important;
 }
@@ -280,7 +280,8 @@ ul, ol {
   color: var(--color-text-strong) !important;
 }
 
-body > .page > header, :root[data-has-sidebar] body > .page > header {
+body > .page > header,
+:root[data-has-sidebar] body > .page > header {
   background: var(--color-background) !important;
   padding: 24px !important;
 }
@@ -303,7 +304,6 @@ body > .page > header, :root[data-has-sidebar] body > .page > header {
   max-width: 100% !important;
 }
 
-
 nav.sidebar .sl-container ul li a,
 div.right-sidebar .sl-container ul li a {
   padding: 4px 24px !important;
@@ -317,7 +317,7 @@ div.right-sidebar .sl-container ul li a:hover {
   background: var(--color-background-weak);
 
   @media (prefers-color-scheme: dark) {
-    background: var(--color-background-weak)
+    background: var(--color-background-weak);
   }
 }
 
@@ -326,14 +326,12 @@ div.right-sidebar .sl-container ul li ul li {
   padding: 4px 12px 0 12px !important;
 }
 
-
 nav.sidebar .sl-container ul li a[aria-current="true"],
 div.right-sidebar .sl-container ul li a[aria-current="true"] {
   color: var(--color-text-strong) !important;
   opacity: 100%;
 }
 
-
 h2#starlight__on-this-page {
   font-size: 14px !important;
   color: var(--color-text-strong) !important;
@@ -375,7 +373,6 @@ nav.sidebar ul.top-level > li > details > summary .group-label > span {
 .expressive-code {
   margin: 0.75rem 0 3rem 0 !important;
   border-radius: 6px;
-
 }
 
 .expressive-code figure {
@@ -386,8 +383,6 @@ nav.sidebar ul.top-level > li > details > summary .group-label > span {
   box-shadow: none;
 }
 
-
-
 @media (prefers-color-scheme: dark) {
   .shiki,
   .shiki span {