release: v0.15.31

This ghost style is placeholder for now until we style this properly with an icon and all the states.

STATS.md

@@ -125,3 +125,4 @@
 | 2025-10-29 | 606,259 (+10,483) | 542,064 (+9,626)  | 1,148,323 (+20,109) |
 | 2025-10-30 | 613,746 (+7,487)  | 542,064 (+0)      | 1,155,810 (+7,487)  |
 | 2025-10-30 | 617,846 (+4,100)  | 555,026 (+12,962) | 1,172,872 (+17,062) |
+| 2025-10-31 | 626,612 (+8,766)  | 564,579 (+9,553)  | 1,191,191 (+18,319) |

bun.lock

@@ -37,7 +37,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -64,7 +64,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -88,7 +88,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -109,7 +109,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -148,7 +148,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "22.0.0",
@@ -164,7 +164,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -232,7 +232,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -252,7 +252,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.81.0",
         "@tsconfig/node22": "catalog:",
@@ -263,7 +263,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -276,7 +276,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -306,7 +306,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "0.15.30",
+      "version": "0.15.31",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",

install

@@ -10,10 +10,14 @@ NC='\033[0m' # No Color
 
 requested_version=${VERSION:-}
 
-os=$(uname -s | tr '[:upper:]' '[:lower:]')
-if [[ "$os" == "darwin" ]]; then
-    os="darwin"
-fi
+raw_os=$(uname -s)
+os=$(echo "$raw_os" | tr '[:upper:]' '[:lower:]')
+# Normalize various Unix-like identifiers
+case "$raw_os" in
+  Darwin*) os="darwin" ;;
+  Linux*) os="linux" ;;
+  MINGW*|MSYS*|CYGWIN*) os="windows" ;;
+ esac
 arch=$(uname -m)
 
 if [[ "$arch" == "aarch64" ]]; then

packages/console/app/package.json

@@ -7,7 +7,7 @@
     "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
     "build": "vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
     "start": "vinxi start",
-    "version": "0.15.30"
+    "version": "0.15.31"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",

packages/console/app/src/routes/stripe/webhook.ts

@@ -53,7 +53,8 @@ export async function POST(input: APIEvent) {
 
     await Actor.provide("system", { workspaceID }, async () => {
       const customer = await Billing.get()
-      if (customer?.customerID && customer.customerID !== customerID) throw new Error("Customer ID mismatch")
+      if (customer?.customerID && customer.customerID !== customerID)
+        throw new Error("Customer ID mismatch")
 
       // set customer metadata
       if (!customer?.customerID) {
@@ -69,7 +70,18 @@ export async function POST(input: APIEvent) {
         expand: ["payment_method"],
       })
       const paymentMethod = paymentIntent.payment_method
-      if (!paymentMethod || typeof paymentMethod === "string") throw new Error("Payment method not expanded")
+      if (!paymentMethod || typeof paymentMethod === "string")
+        throw new Error("Payment method not expanded")
+
+      const oldBillingInfo = await Database.use((tx) =>
+        tx
+          .select({
+            customerID: BillingTable.customerID,
+          })
+          .from(BillingTable)
+          .where(eq(BillingTable.workspaceID, workspaceID))
+          .then((rows) => rows[0]),
+      )
 
       await Database.transaction(async (tx) => {
         await tx
@@ -80,9 +92,16 @@ export async function POST(input: APIEvent) {
             paymentMethodID: paymentMethod.id,
             paymentMethodLast4: paymentMethod.card?.last4 ?? null,
             paymentMethodType: paymentMethod.type,
-            reload: true,
-            reloadError: null,
-            timeReloadError: null,
+            // enable reload if first time enabling billing
+            ...(oldBillingInfo?.customerID
+              ? {}
+              : {
+                  reload: true,
+                  reloadTrigger: Billing.CHARGE_THRESHOLD_DOLLAR,
+                  reloadAmount: Billing.CHARGE_AMOUNT_DOLLAR,
+                  reloadError: null,
+                  timeReloadError: null,
+                }),
           })
           .where(eq(BillingTable.workspaceID, workspaceID))
         await tx.insert(PaymentTable).values({
@@ -119,7 +138,12 @@ export async function POST(input: APIEvent) {
         .set({
           timeRefunded: new Date(body.created * 1000),
         })
-        .where(and(eq(PaymentTable.paymentID, paymentIntentID), eq(PaymentTable.workspaceID, workspaceID)))
+        .where(
+          and(
+            eq(PaymentTable.paymentID, paymentIntentID),
+            eq(PaymentTable.workspaceID, workspaceID),
+          ),
+        )
 
       await tx
         .update(BillingTable)

packages/console/app/src/routes/workspace/[id]/billing/billing-section.module.css

@@ -4,9 +4,6 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--space-4);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
 
     p {
       color: var(--color-danger);
@@ -24,27 +21,65 @@
     }
   }
 
-  [data-slot="payment"] {
+  [data-slot="section-content"] {
     display: flex;
     flex-direction: column;
     gap: var(--space-3);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-    min-width: 14.5rem;
-    width: fit-content;
+  }
+
+  [data-slot="balance-display"] {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
 
     @media (max-width: 30rem) {
-      width: 100%;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-2);
+    }
+
+    [data-slot="balance-amount"] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: var(--space-4);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      background-color: var(--color-bg-surface);
+      align-self: stretch;
+
+      [data-slot="balance-label"] {
+        font-size: var(--font-size-sm);
+        color: var(--color-text-muted);
+        margin-top: var(--space-2);
+        font-weight: 400;
+      }
+
+      [data-slot="balance-value"] {
+        font-size: var(--font-size-2xl);
+        font-weight: 600;
+        color: var(--color-text);
+      }
+    }
+
+    [data-slot="balance-right-section"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+      flex: 1;
     }
 
     [data-slot="credit-card"] {
-      padding: var(--space-3-5) var(--space-4);
+      padding: var(--space-2) var(--space-4);
       background-color: var(--color-bg-surface);
       border-radius: var(--border-radius-sm);
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      gap: var(--space-3);
+      min-width: 150px;
+      align-self: flex-start;
 
       [data-slot="card-icon"] {
         display: flex;
@@ -56,19 +91,19 @@
         display: flex;
         align-items: baseline;
         gap: var(--space-1);
+        flex: 1;
+        justify-content: flex-end;
 
         [data-slot="secret"] {
-          position: relative;
-          bottom: 2px;
-          font-size: var(--font-size-lg);
+          font-size: var(--font-size-sm);
           color: var(--color-text-muted);
           font-weight: 400;
         }
 
         [data-slot="number"] {
-          font-size: var(--font-size-3xl);
+          font-size: var(--font-size-sm);
           font-weight: 500;
-          color: var(--color-text);
+          color: var(--color-text-muted);
         }
 
         [data-slot="type"] {
@@ -77,41 +112,23 @@
           color: var(--color-text-muted);
         }
       }
+
+      button {
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
     }
 
-    [data-slot="button-row"] {
-      display: flex;
-      gap: var(--space-2);
-      align-items: center;
-
-      @media (max-width: 30rem) {
-        flex-direction: column;
-
-        >button {
-          width: 100%;
-        }
-      }
-
-      [data-slot="create-form"] {
-        margin: 0;
-      }
-
-      /* Make Enable Billing button full width when it's the only button */
-      >button {
-        flex: 1;
-      }
+    button {
+      align-self: flex-start;
+      white-space: nowrap;
+      flex-shrink: 0;
     }
   }
 
-  [data-slot="usage"] {
-    p {
-      font-size: var(--font-size-sm);
-      line-height: 1.5;
-      color: var(--color-text-secondary);
-
-      b {
-        font-weight: 600;
-      }
-    }
+  [data-slot="enable-billing-button"] {
+    align-self: flex-start;
+    padding: var(--space-4);
+    min-width: 150px;
   }
 }

packages/console/app/src/routes/workspace/[id]/billing/billing-section.tsx

@@ -1,60 +1,24 @@
-import { json, query, action, useParams, useAction, createAsync, useSubmission } from "@solidjs/router"
+import { action, useParams, useAction, createAsync, useSubmission } from "@solidjs/router"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { withActor } from "~/context/auth.withActor"
 import { IconCreditCard, IconStripe } from "~/component/icon"
 import styles from "./billing-section.module.css"
-import { Database, eq } from "@opencode-ai/console-core/drizzle/index.js"
-import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js"
-import { createCheckoutUrl } from "../../common"
-
-const reload = action(async (form: FormData) => {
-  "use server"
-  const workspaceID = form.get("workspaceID")?.toString()
-  if (!workspaceID) return { error: "Workspace ID is required" }
-  return json(await withActor(() => Billing.reload(), workspaceID), { revalidate: getBillingInfo.key })
-}, "billing.reload")
-
-const setReload = action(async (form: FormData) => {
-  "use server"
-  const workspaceID = form.get("workspaceID")?.toString()
-  if (!workspaceID) return { error: "Workspace ID is required" }
-  const reload = form.get("reload")?.toString() === "true"
-  return json(
-    await Database.use((tx) =>
-      tx
-        .update(BillingTable)
-        .set({
-          reload,
-        })
-        .where(eq(BillingTable.workspaceID, workspaceID)),
-    ),
-    { revalidate: getBillingInfo.key },
-  )
-}, "billing.setReload")
+import { createCheckoutUrl, queryBillingInfo } from "../../common"
 
 const createSessionUrl = action(async (workspaceID: string, returnUrl: string) => {
   "use server"
   return withActor(() => Billing.generateSessionUrl({ returnUrl }), workspaceID)
 }, "sessionUrl")
 
-const getBillingInfo = query(async (workspaceID: string) => {
-  "use server"
-  return withActor(async () => {
-    return await Billing.get()
-  }, workspaceID)
-}, "billing.get")
-
 export function BillingSection() {
   const params = useParams()
   // ORIGINAL CODE - COMMENTED OUT FOR TESTING
-  const balanceInfo = createAsync(() => getBillingInfo(params.id))
+  const balanceInfo = createAsync(() => queryBillingInfo(params.id))
   const createCheckoutUrlAction = useAction(createCheckoutUrl)
   const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
   const createSessionUrlAction = useAction(createSessionUrl)
   const createSessionUrlSubmission = useSubmission(createSessionUrl)
-  const setReloadSubmission = useSubmission(setReload)
-  const reloadSubmission = useSubmission(reload)
 
   // DUMMY DATA FOR TESTING - UNCOMMENT ONE OF THE SCENARIOS BELOW
 
@@ -112,143 +76,95 @@ export function BillingSection() {
     return ((balanceInfo()?.balance ?? 0) / 100000000).toFixed(2)
   })
 
-  const hasBalance = createMemo(() => {
-    return (balanceInfo()?.balance ?? 0) > 0 && balanceAmount() !== "0.00"
-  })
-
   return (
     <section class={styles.root}>
       <div data-slot="section-title">
         <h2>Billing</h2>
         <p>
-          Manage payments methods. <a href="mailto:contact@anoma.ly">Contact us</a> if you have any questions.
+          Manage payments methods. <a href="mailto:contact@anoma.ly">Contact us</a> if you have any
+          questions.
         </p>
       </div>
       <div data-slot="section-content">
-        <Show when={balanceInfo()?.reloadError}>
-          <div data-slot="reload-error">
-            <p>
-              Reload failed at{" "}
-              {balanceInfo()?.timeReloadError!.toLocaleString("en-US", {
-                month: "short",
-                day: "numeric",
-                hour: "numeric",
-                minute: "2-digit",
-                second: "2-digit",
-              })}
-              . Reason: {balanceInfo()?.reloadError?.replace(/\.$/, "")}. Please update your payment method and try
-              again.
-            </p>
-            <form action={reload} method="post" data-slot="create-form">
-              <input type="hidden" name="workspaceID" value={params.id} />
-              <button data-color="primary" type="submit" disabled={reloadSubmission.pending}>
-                {reloadSubmission.pending ? "Reloading..." : "Reload"}
-              </button>
-            </form>
+        <div data-slot="balance-display">
+          <div data-slot="balance-amount">
+            <span data-slot="balance-value">
+              ${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}
+            </span>
+            <span data-slot="balance-label">Current Balance</span>
           </div>
-        </Show>
-        <div data-slot="payment">
-          <div data-slot="credit-card">
-            <div data-slot="card-icon">
-              <Switch fallback={<IconCreditCard style={{ width: "32px", height: "32px" }} />}>
-                <Match when={balanceInfo()?.paymentMethodType === "link"}>
-                  <IconStripe style={{ width: "32px", height: "32px" }} />
-                </Match>
-              </Switch>
-            </div>
-            <div data-slot="card-details">
-              <Switch
-                fallback={
-                  <Show when={balanceInfo()?.paymentMethodLast4} fallback={<span data-slot="number">----</span>}>
-                    <span data-slot="secret">••••</span>
-                    <span data-slot="number">{balanceInfo()?.paymentMethodLast4}</span>
-                  </Show>
-                }
-              >
-                <Match when={balanceInfo()?.paymentMethodType === "link"}>
-                  <span data-slot="type">Linked to Stripe</span>
-                </Match>
-              </Switch>
-            </div>
-          </div>
-          <div data-slot="button-row">
-            <Show
-              when={balanceInfo()?.reload}
-              fallback={
-                <Show
-                  when={hasBalance()}
-                  fallback={
-                    <button
-                      data-color="primary"
-                      disabled={createCheckoutUrlSubmission.pending}
-                      onClick={async () => {
-                        const baseUrl = window.location.href
-                        const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
-                        if (checkoutUrl) {
-                          window.location.href = checkoutUrl
-                        }
-                      }}
-                    >
-                      {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable Billing"}
-                    </button>
-                  }
-                >
-                  <form action={setReload} method="post" data-slot="create-form">
-                    <input type="hidden" name="workspaceID" value={params.id} />
-                    <input type="hidden" name="reload" value="true" />
-                    <button data-color="primary" type="submit" disabled={setReloadSubmission.pending}>
-                      {setReloadSubmission.pending ? "Enabling..." : "Enable Billing"}
-                    </button>
-                  </form>
-                </Show>
-              }
-            >
+          <Show when={balanceInfo()?.customerID}>
+            <div data-slot="balance-right-section">
               <button
                 data-color="primary"
-                disabled={createSessionUrlSubmission.pending}
+                disabled={createCheckoutUrlSubmission.pending}
                 onClick={async () => {
                   const baseUrl = window.location.href
-                  const sessionUrl = await createSessionUrlAction(params.id, baseUrl)
-                  if (sessionUrl) {
-                    window.location.href = sessionUrl
+                  const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
+                  if (checkoutUrl) {
+                    window.location.href = checkoutUrl
                   }
                 }}
               >
-                {createSessionUrlSubmission.pending ? "Loading..." : "Manage Payment Methods"}
+                {createCheckoutUrlSubmission.pending ? "Loading..." : "Add Balance"}
               </button>
-              <form action={setReload} method="post" data-slot="create-form">
-                <input type="hidden" name="workspaceID" value={params.id} />
-                <input type="hidden" name="reload" value="false" />
-                <button data-color="ghost" type="submit" disabled={setReloadSubmission.pending}>
-                  {setReloadSubmission.pending ? "Disabling..." : "Disable"}
+              <div data-slot="credit-card">
+                <div data-slot="card-icon">
+                  <Switch fallback={<IconCreditCard style={{ width: "24px", height: "24px" }} />}>
+                    <Match when={balanceInfo()?.paymentMethodType === "link"}>
+                      <IconStripe style={{ width: "24px", height: "24px" }} />
+                    </Match>
+                  </Switch>
+                </div>
+                <div data-slot="card-details">
+                  <Switch>
+                    <Match when={balanceInfo()?.paymentMethodType === "card"}>
+                      <Show
+                        when={balanceInfo()?.paymentMethodLast4}
+                        fallback={<span data-slot="number">----</span>}
+                      >
+                        <span data-slot="secret">••••</span>
+                        <span data-slot="number">{balanceInfo()?.paymentMethodLast4}</span>
+                      </Show>
+                    </Match>
+                    <Match when={balanceInfo()?.paymentMethodType === "link"}>
+                      <span data-slot="type">Linked to Stripe</span>
+                    </Match>
+                  </Switch>
+                </div>
+                <button
+                  data-color="ghost"
+                  disabled={createSessionUrlSubmission.pending}
+                  onClick={async () => {
+                    const baseUrl = window.location.href
+                    const sessionUrl = await createSessionUrlAction(params.id, baseUrl)
+                    if (sessionUrl) {
+                      window.location.href = sessionUrl
+                    }
+                  }}
+                >
+                  {createSessionUrlSubmission.pending ? "Loading..." : "Manage"}
                 </button>
-              </form>
-            </Show>
-          </div>
+              </div>
+            </div>
+          </Show>
         </div>
-        <div data-slot="usage">
-          <Show when={!balanceInfo()?.reload}>
-            <Show
-              when={hasBalance()}
-              fallback={
-                <p>
-                  We'll load <b>$20</b> (+$1.23 processing fee) and reload it when it reaches <b>$5</b>.
-                </p>
+        <Show when={!balanceInfo()?.customerID}>
+          <button
+            data-slot="enable-billing-button"
+            data-color="primary"
+            disabled={createCheckoutUrlSubmission.pending}
+            onClick={async () => {
+              const baseUrl = window.location.href
+              const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
+              if (checkoutUrl) {
+                window.location.href = checkoutUrl
               }
-            >
-              <p>
-                You have <b data-slot="value">${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b> remaining in
-                your account. You can continue using the API with your remaining balance.
-              </p>
-            </Show>
-          </Show>
-          <Show when={balanceInfo()?.reload && !balanceInfo()?.reloadError}>
-            <p>
-              Your current balance is <b data-slot="value">${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b>
-              . We'll automatically reload <b>$20</b> (+$1.23 processing fee) when it reaches <b>$5</b>.
-            </p>
-          </Show>
-        </div>
+            }}
+          >
+            {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable Billing"}
+          </button>
+        </Show>
       </div>
     </section>
   )

packages/console/app/src/routes/workspace/[id]/billing/index.tsx

@@ -1,21 +1,26 @@
 import { MonthlyLimitSection } from "./monthly-limit-section"
 import { BillingSection } from "./billing-section"
+import { ReloadSection } from "./reload-section"
 import { PaymentSection } from "./payment-section"
 import { Show } from "solid-js"
 import { createAsync, useParams } from "@solidjs/router"
-import { querySessionInfo } from "../../common"
+import { queryBillingInfo, querySessionInfo } from "../../common"
 
 export default function () {
   const params = useParams()
   const userInfo = createAsync(() => querySessionInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id))
 
   return (
     <div data-page="workspace-[id]">
       <div data-slot="sections">
         <Show when={userInfo()?.isAdmin}>
           <BillingSection />
-          <MonthlyLimitSection />
-          <PaymentSection />
+          <Show when={billingInfo()?.customerID}>
+            <ReloadSection />
+            <MonthlyLimitSection />
+            <PaymentSection />
+          </Show>
         </Show>
       </div>
     </div>

packages/console/app/src/routes/workspace/[id]/billing/reload-section.module.css

@@ -0,0 +1,60 @@
+.root {
+  [data-slot="title-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  [data-slot="section-content"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  [data-slot="setting-row"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+
+    p {
+      flex: 1;
+      font-size: var(--font-size-sm);
+      line-height: 1.5;
+      color: var(--color-text-secondary);
+      margin: 0;
+
+      b {
+        font-weight: 600;
+      }
+    }
+
+    [data-slot="create-form"] {
+      margin: 0;
+    }
+  }
+
+  [data-slot="reload-error"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin-top: var(--space-4);
+
+    p {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+      margin: 0;
+      flex: 1;
+    }
+
+    [data-slot="create-form"] {
+      display: flex;
+      gap: var(--space-2);
+      margin: 0;
+      flex-shrink: 0;
+    }
+  }
+}
+

packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx

@@ -0,0 +1,113 @@
+import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { Show } from "solid-js"
+import { withActor } from "~/context/auth.withActor"
+import { Billing } from "@opencode-ai/console-core/billing.js"
+import { Database, eq } from "@opencode-ai/console-core/drizzle/index.js"
+import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js"
+import styles from "./reload-section.module.css"
+
+const reload = action(async (form: FormData) => {
+  "use server"
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(await withActor(() => Billing.reload(), workspaceID), {
+    revalidate: getBillingInfo.key,
+  })
+}, "billing.reload")
+
+const setReload = action(async (form: FormData) => {
+  "use server"
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const reloadValue = form.get("reload")?.toString() === "true"
+  return json(
+    await Database.use((tx) =>
+      tx
+        .update(BillingTable)
+        .set({
+          reload: reloadValue,
+          ...(reloadValue
+            ? {
+                reloadTrigger: Billing.CHARGE_THRESHOLD_DOLLAR,
+                reloadAmount: Billing.CHARGE_AMOUNT_DOLLAR,
+                reloadError: null,
+                timeReloadError: null,
+              }
+            : {}),
+        })
+        .where(eq(BillingTable.workspaceID, workspaceID)),
+    ),
+    { revalidate: getBillingInfo.key },
+  )
+}, "billing.setReload")
+
+const getBillingInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    return await Billing.get()
+  }, workspaceID)
+}, "billing.get")
+
+export function ReloadSection() {
+  const params = useParams()
+  const balanceInfo = createAsync(() => getBillingInfo(params.id))
+  const setReloadSubmission = useSubmission(setReload)
+  const reloadSubmission = useSubmission(reload)
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Auto Reload</h2>
+        <div data-slot="title-row">
+          <Show
+            when={balanceInfo()?.reload}
+            fallback={
+              <p>Auto reload is disabled. Enable to automatically reload when balance is low.</p>
+            }
+          >
+            <p>
+              We'll automatically reload <b>$20</b> (+$1.23 processing fee) when it reaches{" "}
+              <b>$5</b>.
+            </p>
+          </Show>
+          <form action={setReload} method="post" data-slot="create-form">
+            <input type="hidden" name="workspaceID" value={params.id} />
+            <input type="hidden" name="reload" value={balanceInfo()?.reload ? "false" : "true"} />
+            <button data-color="primary" type="submit" disabled={setReloadSubmission.pending}>
+              <Show
+                when={balanceInfo()?.reload}
+                fallback={setReloadSubmission.pending ? "Enabling..." : "Enable"}
+              >
+                {setReloadSubmission.pending ? "Disabling..." : "Disable"}
+              </Show>
+            </button>
+          </form>
+        </div>
+      </div>
+      <div data-slot="section-content">
+        <Show when={balanceInfo()?.reload && balanceInfo()?.reloadError}>
+          <div data-slot="reload-error">
+            <p>
+              Reload failed at{" "}
+              {balanceInfo()?.timeReloadError!.toLocaleString("en-US", {
+                month: "short",
+                day: "numeric",
+                hour: "numeric",
+                minute: "2-digit",
+                second: "2-digit",
+              })}
+              . Reason: {balanceInfo()?.reloadError?.replace(/\.$/, "")}. Please update your payment
+              method and try again.
+            </p>
+            <form action={reload} method="post" data-slot="create-form">
+              <input type="hidden" name="workspaceID" value={params.id} />
+              <button data-color="ghost" type="submit" disabled={reloadSubmission.pending}>
+                {reloadSubmission.pending ? "Retrying..." : "Retry"}
+              </button>
+            </form>
+          </div>
+        </Show>
+      </div>
+    </section>
+  )
+}

packages/console/app/src/routes/workspace/common.tsx

@@ -62,15 +62,21 @@ export const querySessionInfo = query(async (workspaceID: string) => {
   return withActor(() => {
     return {
       isAdmin: Actor.userRole() === "admin",
-      isBeta: Resource.App.stage === "production" ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y" : true,
+      isBeta:
+        Resource.App.stage === "production"
+          ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y"
+          : true,
     }
   }, workspaceID)
 }, "session.get")
 
-export const createCheckoutUrl = action(async (workspaceID: string, successUrl: string, cancelUrl: string) => {
-  "use server"
-  return withActor(() => Billing.generateCheckoutUrl({ successUrl, cancelUrl }), workspaceID)
-}, "checkoutUrl")
+export const createCheckoutUrl = action(
+  async (workspaceID: string, successUrl: string, cancelUrl: string) => {
+    "use server"
+    return withActor(() => Billing.generateCheckoutUrl({ successUrl, cancelUrl }), workspaceID)
+  },
+  "checkoutUrl",
+)
 
 export const queryBillingInfo = query(async (workspaceID: string) => {
   "use server"

packages/console/core/migrations/0037_messy_jackal.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `billing` ADD `reload_trigger` int;--> statement-breakpoint
+ALTER TABLE `billing` ADD `reload_amount` int;

packages/console/core/migrations/meta/0037_snapshot.json

@@ -0,0 +1,983 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "8b7fa839-a088-408e-84a4-1a07325c0290",
+  "prevId": "5470c8b4-296d-47bd-85a7-88cfd3b71434",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "account_id_pk": {
+          "name": "account_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "auth": {
+      "name": "auth",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "enum('email','github','google')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "subject": {
+          "name": "subject",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "provider": {
+          "name": "provider",
+          "columns": [
+            "provider",
+            "subject"
+          ],
+          "isUnique": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "auth_id_pk": {
+          "name": "auth_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_type": {
+          "name": "payment_method_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_trigger": {
+          "name": "reload_trigger",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_amount": {
+          "name": "reload_amount",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key_id": {
+          "name": "key_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "model": {
+      "name": "model",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "model_workspace_model": {
+          "name": "model_workspace_model",
+          "columns": [
+            "workspace_id",
+            "model"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "model_workspace_id_id_pk": {
+          "name": "model_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "provider": {
+      "name": "provider",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentials": {
+          "name": "credentials",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "workspace_provider": {
+          "name": "workspace_provider",
+          "columns": [
+            "workspace_id",
+            "provider"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "provider_workspace_id_id_pk": {
+          "name": "provider_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_account_id": {
+          "name": "user_account_id",
+          "columns": [
+            "workspace_id",
+            "account_id"
+          ],
+          "isUnique": true
+        },
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        },
+        "global_account_id": {
+          "name": "global_account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        },
+        "global_email": {
+          "name": "global_email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}

packages/console/core/migrations/meta/_journal.json

@@ -260,6 +260,13 @@
       "when": 1760668952329,
       "tag": "0036_slimy_energizer",
       "breakpoints": true
+    },
+    {
+      "idx": 37,
+      "version": "5",
+      "when": 1761928273807,
+      "tag": "0037_messy_jackal",
+      "breakpoints": true
     }
   ]
 }

packages/console/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "private": true,
   "type": "module",
   "dependencies": {

packages/console/core/src/billing.ts

@@ -13,7 +13,9 @@ export namespace Billing {
   export const CHARGE_NAME = "opencode credits"
   export const CHARGE_FEE_NAME = "processing fee"
   export const CHARGE_AMOUNT = 2000 // $20
+  export const CHARGE_AMOUNT_DOLLAR = 20
   export const CHARGE_FEE = 123 // Stripe fee 4.4% + $0.30
+  export const CHARGE_THRESHOLD_DOLLAR = 5
   export const CHARGE_THRESHOLD = 500 // $5
   export const stripe = () =>
     new Stripe(Resource.STRIPE_SECRET_KEY.value, {
@@ -142,17 +144,6 @@ export namespace Billing {
     })
   }
 
-  export const disableReload = async () => {
-    return await Database.use((tx) =>
-      tx
-        .update(BillingTable)
-        .set({
-          reload: false,
-        })
-        .where(eq(BillingTable.workspaceID, Actor.workspace())),
-    )
-  }
-
   export const setMonthlyLimit = fn(z.number(), async (input) => {
     return await Database.use((tx) =>
       tx

packages/console/core/src/schema/billing.sql.ts

@@ -16,6 +16,8 @@ export const BillingTable = mysqlTable(
     monthlyUsage: bigint("monthly_usage", { mode: "number" }),
     timeMonthlyUsageUpdated: utc("time_monthly_usage_updated"),
     reload: boolean("reload"),
+    reloadTrigger: int("reload_trigger"),
+    reloadAmount: int("reload_amount"),
     reloadError: varchar("reload_error", { length: 255 }),
     timeReloadError: utc("time_reload_error"),
     timeReloadLockedTill: utc("time_reload_locked_till"),

packages/console/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-function",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/console/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-mail",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "dependencies": {
     "@jsx-email/all": "2.2.3",
     "@jsx-email/cli": "1.4.3",

packages/desktop/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.svg" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
     <title>OpenCode</title>
   </head>
   <body class="antialiased overscroll-none select-none text-12-regular">

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/desktop",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "description": "",
   "type": "module",
   "scripts": {

packages/desktop/public/favicon.svg

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.svg

packages/desktop/src/assets/favicon.svg

@@ -1,5 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="600" height="600" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M115 180H300V420H115V180ZM253.75 229.044H161.25V370.405H253.75V229.044Z" fill="white"/>
-<path d="M346.25 180H485V229.044H392.5V370.405H485V419.449H346.25V180Z" fill="white"/>
-</svg>

packages/desktop/src/components/message-progress.tsx

@@ -0,0 +1,82 @@
+import { For, Match, Switch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { Part } from "@opencode-ai/ui"
+import { useSync } from "@/context/sync"
+import type { AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
+
+export function MessageProgress(props: { assistantMessages: () => AssistantMessageType[] }) {
+  const sync = useSync()
+  const items = createMemo(() => props.assistantMessages().flatMap((m) => sync.data.part[m.id]))
+
+  const finishedItems = createMemo(() => [
+    "",
+    "",
+    "Loading...",
+    ...items().filter(
+      (p) =>
+        p?.type === "text" ||
+        (p?.type === "reasoning" && p.time?.end) ||
+        (p?.type === "tool" && p.state.status === "completed"),
+    ),
+    "",
+  ])
+
+  const MINIMUM_DELAY = 400
+  const [visibleCount, setVisibleCount] = createSignal(1)
+
+  createEffect(() => {
+    const total = finishedItems().length
+    if (total > visibleCount()) {
+      const timer = setTimeout(() => {
+        setVisibleCount((prev) => prev + 1)
+      }, MINIMUM_DELAY)
+      onCleanup(() => clearTimeout(timer))
+    } else if (total < visibleCount()) {
+      setVisibleCount(total)
+    }
+  })
+
+  const translateY = createMemo(() => {
+    const total = visibleCount()
+    if (total < 2) return "0px"
+    return `-${(total - 2) * 40 - 8}px`
+  })
+
+  return (
+    <div
+      class="h-30 overflow-hidden pointer-events-none 
+             mask-alpha mask-t-from-33% mask-t-from-background-base mask-t-to-transparent
+             mask-b-from-90% mask-b-from-background-base mask-b-to-transparent"
+    >
+      <div
+        class="w-full flex flex-col items-start self-stretch gap-2 py-8
+               transform transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
+        style={{ transform: `translateY(${translateY()})` }}
+      >
+        <For each={finishedItems()}>
+          {(part) => {
+            if (typeof part === "string") return <div class="h-8 flex items-center w-full">{part}</div>
+            const message = createMemo(() => sync.data.message[part.sessionID].find((m) => m.id === part.messageID))
+            return (
+              <div class="h-8 flex items-center w-full">
+                <Switch>
+                  <Match when={part.type === "text" && part}>
+                    {(p) => (
+                      <div
+                        textContent={p().text}
+                        class="text-12-regular text-text-base whitespace-nowrap truncate w-full"
+                      />
+                    )}
+                  </Match>
+                  <Match when={part.type === "reasoning" && part}>
+                    {(p) => <Part message={message()!} part={p()} />}
+                  </Match>
+                  <Match when={part.type === "tool" && part}>{(p) => <Part message={message()!} part={p()} />}</Match>
+                </Switch>
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}

packages/desktop/src/components/prompt-input.tsx

@@ -365,6 +365,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               current={local.agent.current().name}
               onSelect={local.agent.set}
               class="capitalize"
+              variant="ghost"
             />
             <SelectDialog
               title="Select model"

packages/desktop/src/components/spinner.tsx

@@ -0,0 +1,39 @@
+import { ComponentProps, For } from "solid-js"
+
+export function Spinner(props: { class?: string; classList?: ComponentProps<"div">["classList"] }) {
+  const squares = Array.from({ length: 16 }, (_, i) => ({
+    id: i,
+    x: (i % 4) * 4,
+    y: Math.floor(i / 4) * 4,
+    delay: Math.random() * 3,
+    duration: 2 + Math.random() * 2,
+  }))
+
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      classList={{
+        "size-4": true,
+        ...(props.classList ?? {}),
+        [props.class ?? ""]: !!props.class,
+      }}
+      fill="currentColor"
+    >
+      <For each={squares}>
+        {(square) => (
+          <rect
+            x={square.x}
+            y={square.y}
+            width="3"
+            height="3"
+            rx="1"
+            style={{
+              animation: `pulse-opacity ${square.duration}s ease-in-out infinite`,
+              "animation-delay": `${square.delay}s`,
+            }}
+          />
+        )}
+      </For>
+    </svg>
+  )
+}

packages/desktop/src/context/sync.tsx

@@ -124,7 +124,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
     const absolute = (path: string) => (store.path.directory + "/" + path).replace("//", "/")
     const sanitizePart = (part: Part) => {
       if (part.type === "tool") {
-        if (part.state.status === "completed") {
+        if (part.state.status === "completed" || part.state.status === "error") {
           for (const key in part.state.metadata) {
             if (typeof part.state.metadata[key] === "string") {
               part.state.metadata[key] = sanitize(part.state.metadata[key] as string)
@@ -135,6 +135,9 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
               part.state.input[key] = sanitize(part.state.input[key] as string)
             }
           }
+          if ("error" in part.state) {
+            part.state.error = sanitize(part.state.error as string)
+          }
         }
       }
       return part

packages/desktop/src/pages/index.tsx

@@ -13,9 +13,11 @@ import {
   DiffChanges,
   ProgressCircle,
   Message,
+  Typewriter,
 } from "@opencode-ai/ui"
 import { FileIcon } from "@/ui"
 import FileTree from "@/components/file-tree"
+import { MessageProgress } from "@/components/message-progress"
 import { For, onCleanup, onMount, Show, Match, Switch, createSignal, createEffect, createMemo } from "solid-js"
 import { useLocal, type LocalFile } from "@/context/local"
 import { createStore } from "solid-js/store"
@@ -38,6 +40,7 @@ import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
 import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
 import { Markdown } from "@opencode-ai/ui"
+import { Spinner } from "@/components/spinner"
 
 export default function Page() {
   const local = useLocal()
@@ -52,10 +55,11 @@ export default function Page() {
   const [activeItem, setActiveItem] = createSignal<string | undefined>(undefined)
 
   createEffect(() => {
-    if (!local.session.activeMessage()) return
-    if (!messageScrollElement) return
-    const element = messageScrollElement.querySelector(`[data-message="${local.session.activeMessage()?.id}"]`)
-    element?.scrollIntoView({ block: "start", behavior: "instant" })
+    // Set first message as active if none selected
+    const userMessages = local.session.userMessages()
+    if (userMessages.length > 0 && !local.session.activeMessage()) {
+      local.session.setActiveMessage(userMessages[0].id)
+    }
   })
 
   const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
@@ -544,22 +548,31 @@ export default function Page() {
                               <For each={local.session.userMessages()}>
                                 {(message) => {
                                   const diffs = createMemo(() => message.summary?.diffs ?? [])
-
+                                  const working = createMemo(() => !message.summary?.title)
                                   return (
-                                    <li
-                                      class="group/li flex items-center gap-x-2 py-1 self-stretch cursor-default"
-                                      onClick={() => local.session.setActiveMessage(message.id)}
-                                    >
-                                      <DiffChanges diff={diffs()} variant="bars" />
-                                      <div
-                                        data-active={local.session.activeMessage()?.id === message.id}
-                                        classList={{
-                                          "text-14-regular text-text-weak whitespace-nowrap truncate min-w-0": true,
-                                          "text-text-weak data-[active=true]:text-text-strong group-hover/li:text-text-base": true,
-                                        }}
+                                    <li class="group/li flex items-center self-stretch">
+                                      <button
+                                        class="flex items-center self-stretch w-full gap-x-2 py-1 cursor-default"
+                                        onClick={() => local.session.setActiveMessage(message.id)}
                                       >
-                                        {message.summary?.title ?? local.session.getMessageText(message)}
-                                      </div>
+                                        <Switch>
+                                          <Match when={working()}>
+                                            <Spinner class="text-text-base shrink-0 w-[18px] aspect-square" />
+                                          </Match>
+                                          <Match when={true}>
+                                            <DiffChanges diff={diffs()} variant="bars" />
+                                          </Match>
+                                        </Switch>
+                                        <div
+                                          data-active={local.session.activeMessage()?.id === message.id}
+                                          classList={{
+                                            "text-14-regular text-text-weak whitespace-nowrap truncate min-w-0": true,
+                                            "text-text-weak data-[active=true]:text-text-strong group-hover/li:text-text-base": true,
+                                          }}
+                                        >
+                                          {message.summary?.title ?? local.session.getMessageText(message)}
+                                        </div>
+                                      </button>
                                     </li>
                                   )
                                 }}
@@ -567,48 +580,61 @@ export default function Page() {
                             </ul>
                           </Show>
                           <div ref={messageScrollElement} class="grow min-w-0 h-full overflow-y-auto no-scrollbar">
-                            <div class="flex flex-col items-start gap-50 pb-50">
-                              <For each={local.session.userMessages()}>
-                                {(message) => {
-                                  const [expanded, setExpanded] = createSignal(false)
-                                  const parts = createMemo(() => sync.data.part[message.id])
-                                  const prompt = createMemo(() => local.session.getMessageText(message))
-                                  const title = createMemo(() => message.summary?.title)
-                                  const summary = createMemo(() => message.summary?.body)
-                                  const assistantMessages = createMemo(() => {
-                                    return sync.data.message[activeSession().id]?.filter(
-                                      (m) => m.role === "assistant" && m.parentID == message.id,
-                                    ) as AssistantMessageType[]
-                                  })
-                                  const working = createMemo(() => !summary())
+                            <For each={local.session.userMessages()}>
+                              {(message) => {
+                                const isActive = createMemo(() => local.session.activeMessage()?.id === message.id)
+                                const [initialized, setInitialized] = createSignal(!!message.summary?.title)
+                                const [expanded, setExpanded] = createSignal(false)
+                                const parts = createMemo(() => sync.data.part[message.id])
+                                const title = createMemo(() => message.summary?.title)
+                                const summary = createMemo(() => message.summary?.body)
+                                const diffs = createMemo(() => message.summary?.diffs ?? [])
+                                const assistantMessages = createMemo(() => {
+                                  return sync.data.message[activeSession().id]?.filter(
+                                    (m) => m.role === "assistant" && m.parentID == message.id,
+                                  ) as AssistantMessageType[]
+                                })
+                                const hasToolPart = createMemo(() =>
+                                  assistantMessages()
+                                    ?.flatMap((m) => sync.data.part[m.id])
+                                    .some((p) => p.type === "tool"),
+                                )
+                                const working = createMemo(() => !summary())
+                                createEffect(() => {
+                                  setTimeout(() => setInitialized(!!title()), 10_000)
+                                })
 
-                                  return (
+                                return (
+                                  <Show when={isActive()}>
                                     <div
                                       data-message={message.id}
-                                      class="flex flex-col items-start self-stretch gap-8 min-h-screen"
+                                      class="flex flex-col items-start self-stretch gap-8 pb-50"
                                     >
                                       {/* Title */}
                                       <div class="py-2 flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10">
-                                        <h1 class="text-14-medium text-text-strong overflow-hidden text-ellipsis min-w-0">
-                                          {title() ?? prompt()}
-                                        </h1>
-                                      </div>
-                                      <Show when={title}>
-                                        <div class="-mt-8">
-                                          <Message message={message} parts={parts()} />
+                                        <div class="text-14-medium text-text-strong overflow-hidden text-ellipsis min-w-0">
+                                          <Show when={initialized()} fallback={<Typewriter as="h1" text={title()} />}>
+                                            <h1>{title()}</h1>
+                                          </Show>
                                         </div>
-                                      </Show>
+                                      </div>
+                                      <div class="-mt-8">
+                                        <Message message={message} parts={parts()} />
+                                      </div>
                                       {/* Summary */}
                                       <Show when={!working()}>
                                         <div class="w-full flex flex-col gap-6 items-start self-stretch">
                                           <div class="flex flex-col items-start gap-1 self-stretch">
-                                            <h2 class="text-12-medium text-text-weak">Summary</h2>
-                                            <Show when={summary()}>
-                                              <Markdown text={summary()!} />
-                                            </Show>
+                                            <h2 class="text-12-medium text-text-weak">
+                                              <Switch>
+                                                <Match when={diffs().length}>Summary</Match>
+                                                <Match when={true}>Response</Match>
+                                              </Switch>
+                                            </h2>
+                                            <Show when={summary()}>{(summary) => <Markdown text={summary()} />}</Show>
                                           </div>
                                           <Accordion class="w-full" multiple>
-                                            <For each={message.summary?.diffs || []}>
+                                            <For each={diffs()}>
                                               {(diff) => (
                                                 <Accordion.Item value={diff.file}>
                                                   <Accordion.Header>
@@ -659,87 +685,9 @@ export default function Page() {
                                       <div class="w-full">
                                         <Switch>
                                           <Match when={working()}>
-                                            {(_) => {
-                                              const items = createMemo(() =>
-                                                assistantMessages().flatMap((m) => sync.data.part[m.id]),
-                                              )
-                                              const finishedItems = createMemo(() =>
-                                                items().filter(
-                                                  (p) =>
-                                                    (p?.type === "text" && p.time?.end) ||
-                                                    (p?.type === "reasoning" && p.time?.end) ||
-                                                    (p?.type === "tool" && p.state.status === "completed"),
-                                                ),
-                                              )
-
-                                              const MINIMUM_DELAY = 800
-                                              const [visibleCount, setVisibleCount] = createSignal(1)
-
-                                              createEffect(() => {
-                                                const total = finishedItems().length
-                                                if (total > visibleCount()) {
-                                                  const timer = setTimeout(() => {
-                                                    setVisibleCount((prev) => prev + 1)
-                                                  }, MINIMUM_DELAY)
-                                                  onCleanup(() => clearTimeout(timer))
-                                                } else if (total < visibleCount()) {
-                                                  setVisibleCount(total)
-                                                }
-                                              })
-
-                                              const translateY = createMemo(() => {
-                                                const total = visibleCount()
-                                                if (total < 2) return "0px"
-                                                return `-${(total - 2) * 48 - 8}px`
-                                              })
-
-                                              return (
-                                                <div class="flex flex-col gap-3">
-                                                  <div
-                                                    class="h-36 overflow-hidden pointer-events-none 
-                                                           mask-alpha mask-y-from-66% mask-y-from-background-base mask-y-to-transparent"
-                                                  >
-                                                    <div
-                                                      class="w-full flex flex-col items-start self-stretch gap-2 py-10
-                                                             transform transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
-                                                      style={{ transform: `translateY(${translateY()})` }}
-                                                    >
-                                                      <For each={finishedItems()}>
-                                                        {(part) => {
-                                                          const message = createMemo(() =>
-                                                            sync.data.message[part.sessionID].find(
-                                                              (m) => m.id === part.messageID,
-                                                            ),
-                                                          )
-                                                          return (
-                                                            <div class="h-10 flex items-center w-full">
-                                                              <Switch>
-                                                                <Match when={part.type === "text" && part}>
-                                                                  {(p) => (
-                                                                    <div
-                                                                      textContent={p().text}
-                                                                      class="text-12-regular text-text-base whitespace-nowrap truncate w-full"
-                                                                    />
-                                                                  )}
-                                                                </Match>
-                                                                <Match when={part.type === "reasoning" && part}>
-                                                                  {(p) => <Part message={message()!} part={p()} />}
-                                                                </Match>
-                                                                <Match when={part.type === "tool" && part}>
-                                                                  {(p) => <Part message={message()!} part={p()} />}
-                                                                </Match>
-                                                              </Switch>
-                                                            </div>
-                                                          )
-                                                        }}
-                                                      </For>
-                                                    </div>
-                                                  </div>
-                                                </div>
-                                              )
-                                            }}
+                                            <MessageProgress assistantMessages={assistantMessages} />
                                           </Match>
-                                          <Match when={!working()}>
+                                          <Match when={!working() && hasToolPart()}>
                                             <Collapsible variant="ghost" open={expanded()} onOpenChange={setExpanded}>
                                               <Collapsible.Trigger class="text-text-weak hover:text-text-strong">
                                                 <div class="flex items-center gap-1 self-stretch">
@@ -769,10 +717,10 @@ export default function Page() {
                                         </Switch>
                                       </div>
                                     </div>
-                                  )
-                                }}
-                              </For>
-                            </div>
+                                  </Show>
+                                )
+                              }}
+                            </For>
                           </div>
                         </div>
                       </div>

packages/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/function",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/opencode/package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "name": "opencode",
   "type": "module",
   "private": true,

packages/opencode/src/config/config.ts

@@ -86,7 +86,7 @@ export namespace Config {
       result.agent = mergeDeep(result.agent, await loadMode(dir))
       result.plugin.push(...(await loadPlugin(dir)))
     }
-    await Promise.all(promises)
+    await Promise.allSettled(promises)
 
     // Migrate deprecated mode field to agent field
     for (const [name, mode] of Object.entries(result.mode)) {

packages/opencode/src/provider/models.ts

@@ -35,7 +35,7 @@ export namespace ModelsDev {
         })
         .optional(),
       experimental: z.boolean().optional(),
-      status: z.enum(["alpha", "beta"]).optional(),
+      status: z.enum(["alpha", "beta", "deprecated"]).optional(),
       options: z.record(z.string(), z.any()),
       headers: z.record(z.string(), z.string()).optional(),
       provider: z.object({ npm: z.string() }).optional(),

packages/opencode/src/provider/provider.ts

@@ -78,12 +78,18 @@ export namespace Provider {
       }
     },
     "amazon-bedrock": async () => {
-      if (!process.env["AWS_PROFILE"] && !process.env["AWS_ACCESS_KEY_ID"] && !process.env["AWS_BEARER_TOKEN_BEDROCK"])
+      if (
+        !process.env["AWS_PROFILE"] &&
+        !process.env["AWS_ACCESS_KEY_ID"] &&
+        !process.env["AWS_BEARER_TOKEN_BEDROCK"]
+      )
         return { autoload: false }
 
       const region = process.env["AWS_REGION"] ?? "us-east-1"
 
-      const { fromNodeProviderChain } = await import(await BunProc.install("@aws-sdk/credential-providers"))
+      const { fromNodeProviderChain } = await import(
+        await BunProc.install("@aws-sdk/credential-providers")
+      )
       return {
         autoload: true,
         options: {
@@ -118,9 +124,13 @@ export namespace Provider {
                 "eu-south-1",
                 "eu-south-2",
               ].some((r) => region.includes(r))
-              const modelRequiresPrefix = ["claude", "nova-lite", "nova-micro", "llama3", "pixtral"].some((m) =>
-                modelID.includes(m),
-              )
+              const modelRequiresPrefix = [
+                "claude",
+                "nova-lite",
+                "nova-micro",
+                "llama3",
+                "pixtral",
+              ].some((m) => modelID.includes(m))
               if (regionRequiresPrefix && modelRequiresPrefix) {
                 modelID = `${regionPrefix}.${modelID}`
               }
@@ -130,13 +140,15 @@ export namespace Provider {
               const isAustraliaRegion = ["ap-southeast-2", "ap-southeast-4"].includes(region)
               if (
                 isAustraliaRegion &&
-                ["anthropic.claude-sonnet-4-5", "anthropic.claude-haiku"].some((m) => modelID.includes(m))
+                ["anthropic.claude-sonnet-4-5", "anthropic.claude-haiku"].some((m) =>
+                  modelID.includes(m),
+                )
               ) {
                 regionPrefix = "au"
                 modelID = `${regionPrefix}.${modelID}`
               } else {
-                const modelRequiresPrefix = ["claude", "nova-lite", "nova-micro", "nova-pro"].some((m) =>
-                  modelID.includes(m),
+                const modelRequiresPrefix = ["claude", "nova-lite", "nova-micro", "nova-pro"].some(
+                  (m) => modelID.includes(m),
                 )
                 if (modelRequiresPrefix) {
                   regionPrefix = "apac"
@@ -174,8 +186,12 @@ export namespace Provider {
       }
     },
     "google-vertex": async () => {
-      const project = process.env["GOOGLE_CLOUD_PROJECT"] ?? process.env["GCP_PROJECT"] ?? process.env["GCLOUD_PROJECT"]
-      const location = process.env["GOOGLE_CLOUD_LOCATION"] ?? process.env["VERTEX_LOCATION"] ?? "us-east5"
+      const project =
+        process.env["GOOGLE_CLOUD_PROJECT"] ??
+        process.env["GCP_PROJECT"] ??
+        process.env["GCLOUD_PROJECT"]
+      const location =
+        process.env["GOOGLE_CLOUD_LOCATION"] ?? process.env["VERTEX_LOCATION"] ?? "us-east5"
       const autoload = Boolean(project)
       if (!autoload) return { autoload: false }
       return {
@@ -191,8 +207,12 @@ export namespace Provider {
       }
     },
     "google-vertex-anthropic": async () => {
-      const project = process.env["GOOGLE_CLOUD_PROJECT"] ?? process.env["GCP_PROJECT"] ?? process.env["GCLOUD_PROJECT"]
-      const location = process.env["GOOGLE_CLOUD_LOCATION"] ?? process.env["VERTEX_LOCATION"] ?? "us-east5"
+      const project =
+        process.env["GOOGLE_CLOUD_PROJECT"] ??
+        process.env["GCP_PROJECT"] ??
+        process.env["GCLOUD_PROJECT"]
+      const location =
+        process.env["GOOGLE_CLOUD_LOCATION"] ?? process.env["VERTEX_LOCATION"] ?? "us-east5"
       const autoload = Boolean(project)
       if (!autoload) return { autoload: false }
       return {
@@ -223,7 +243,13 @@ export namespace Provider {
     } = {}
     const models = new Map<
       string,
-      { providerID: string; modelID: string; info: ModelsDev.Model; language: LanguageModel; npm?: string }
+      {
+        providerID: string
+        modelID: string
+        info: ModelsDev.Model
+        language: LanguageModel
+        npm?: string
+      }
     >()
     const sdk = new Map<number, SDK>()
     // Maps `${provider}/${key}` to the provider’s actual model ID for custom aliases.
@@ -355,7 +381,10 @@ export namespace Provider {
       const auth = await Auth.get(providerID)
       if (!auth) continue
       if (!plugin.auth.loader) continue
-      const options = await plugin.auth.loader(() => Auth.get(providerID) as any, database[plugin.auth.provider])
+      const options = await plugin.auth.loader(
+        () => Auth.get(providerID) as any,
+        database[plugin.auth.provider],
+      )
       mergeProvider(plugin.auth.provider, options ?? {}, "custom")
     }
 
@@ -370,12 +399,15 @@ export namespace Provider {
           // Filter out blacklisted models
           .filter(
             ([modelID]) =>
-              modelID !== "gpt-5-chat-latest" && !(providerID === "openrouter" && modelID === "openai/gpt-5-chat"),
+              modelID !== "gpt-5-chat-latest" &&
+              !(providerID === "openrouter" && modelID === "openai/gpt-5-chat"),
           )
           // Filter out experimental models
           .filter(
             ([, model]) =>
-              (!model.experimental && model.status !== "alpha") || Flag.OPENCODE_ENABLE_EXPERIMENTAL_MODELS,
+              ((!model.experimental && model.status !== "alpha") ||
+                Flag.OPENCODE_ENABLE_EXPERIMENTAL_MODELS) &&
+              model.status !== "deprecated",
           ),
       )
       provider.info.models = filteredModels
@@ -421,7 +453,9 @@ export namespace Provider {
       // In addition, Bun's dynamic import logic does not support subpath imports,
       // so we patch the import path to load directly from `dist`.
       const modPath =
-        provider.id === "google-vertex-anthropic" ? `${installedPath}/dist/anthropic/index.mjs` : installedPath
+        provider.id === "google-vertex-anthropic"
+          ? `${installedPath}/dist/anthropic/index.mjs`
+          : installedPath
       const mod = await import(modPath)
       if (options["timeout"] !== undefined && options["timeout"] !== null) {
         // Only override fetch if user explicitly sets timeout
@@ -518,7 +552,14 @@ export namespace Provider {
 
     const provider = await state().then((state) => state.providers[providerID])
     if (!provider) return
-    let priority = ["claude-haiku-4-5", "claude-haiku-4.5", "3-5-haiku", "3.5-haiku", "gemini-2.5-flash", "gpt-5-nano"]
+    let priority = [
+      "claude-haiku-4-5",
+      "claude-haiku-4.5",
+      "3-5-haiku",
+      "3.5-haiku",
+      "gemini-2.5-flash",
+      "gpt-5-nano",
+    ]
     // claude-haiku-4.5 is considered a premium model in github copilot, we shouldn't use premium requests for title gen
     if (providerID === "github-copilot") {
       priority = priority.filter((m) => m !== "claude-haiku-4.5")

packages/plugin/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",

packages/sdk/js/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/sdk",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",

packages/sdk/js/src/gen/types.gen.ts

@@ -426,7 +426,7 @@ export type Config = {
             output: Array<"text" | "audio" | "image" | "video" | "pdf">
           }
           experimental?: boolean
-          status?: "alpha" | "beta"
+          status?: "alpha" | "beta" | "deprecated"
           options?: {
             [key: string]: unknown
           }
@@ -990,7 +990,7 @@ export type Model = {
     output: Array<"text" | "audio" | "image" | "video" | "pdf">
   }
   experimental?: boolean
-  status?: "alpha" | "beta"
+  status?: "alpha" | "beta" | "deprecated"
   options: {
     [key: string]: unknown
   }

packages/slack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/slack",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "type": "module",
   "scripts": {
     "dev": "bun run src/index.ts",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "type": "module",
   "exports": {
     ".": "./src/components/index.ts",

packages/ui/script/colors.txt

@@ -2,8 +2,8 @@
 --background-weak: var(--smoke-light-3);
 --background-strong: var(--smoke-light-1);
 --background-stronger: #FCFCFC;
---base: var(--smoke-light-alpha-2);
 --surface-base: var(--smoke-light-alpha-2);
+--base: var(--smoke-light-alpha-2);
 --surface-base-hover: #0500000F;
 --surface-base-active: var(--smoke-light-alpha-3);
 --surface-base-interactive-active: var(--cobalt-light-alpha-3);
@@ -17,6 +17,7 @@
 --surface-float-base: var(--smoke-dark-1);
 --surface-float-base-hover: var(--smoke-dark-2);
 --surface-raised-base-hover: var(--smoke-light-alpha-2);
+--surface-raised-base-active: var(--smoke-light-alpha-3);
 --surface-raised-strong: var(--smoke-light-1);
 --surface-raised-strong-hover: var(--white);
 --surface-raised-stronger: var(--white);
@@ -43,8 +44,8 @@
 --surface-info-base: var(--lilac-light-3);
 --surface-info-weak: var(--lilac-light-2);
 --surface-info-strong: var(--lilac-light-9);
---surface-diff-hidden-base: var(--blue-light-3);
 --surface-diff-skip-base: var(--smoke-light-2);
+--surface-diff-hidden-base: var(--blue-light-3);
 --surface-diff-unchanged-base: #FFFFFF00;
 --surface-diff-hidden-weak: var(--blue-light-2);
 --surface-diff-hidden-weaker: var(--blue-light-1);
@@ -74,19 +75,22 @@
 --text-on-brand-base: var(--smoke-light-alpha-11);
 --text-on-interactive-base: var(--smoke-light-1);
 --text-on-interactive-weak: var(--smoke-dark-alpha-11);
---text-on-success-base: var(--smoke-dark-alpha-11);
+--text-on-success-base: var(--apple-light-10);
+--text-on-critical-base: var(--ember-light-10);
+--text-on-critical-weak: var(--ember-light-8);
+--text-on-critical-strong: var(--ember-light-12);
 --text-on-warning-base: var(--smoke-dark-alpha-11);
 --text-on-info-base: var(--smoke-dark-alpha-11);
 --text-diff-add-base: var(--mint-light-11);
---text-diff-delete-base: var(--ember-light-11);
+--text-diff-delete-base: var(--ember-light-10);
 --text-diff-delete-strong: var(--ember-light-12);
 --text-diff-add-strong: var(--mint-light-12);
 --text-on-info-weak: var(--smoke-dark-alpha-9);
 --text-on-info-strong: var(--smoke-dark-alpha-12);
 --text-on-warning-weak: var(--smoke-dark-alpha-9);
 --text-on-warning-strong: var(--smoke-dark-alpha-12);
---text-on-success-weak: var(--smoke-dark-alpha-9);
---text-on-success-strong: var(--smoke-dark-alpha-12);
+--text-on-success-weak: var(--apple-light-6);
+--text-on-success-strong: var(--apple-light-12);
 --text-on-brand-weak: var(--smoke-light-alpha-9);
 --text-on-brand-weaker: var(--smoke-light-alpha-8);
 --text-on-brand-strong: var(--smoke-light-alpha-12);
@@ -134,19 +138,19 @@
 --icon-selected: var(--smoke-light-12);
 --icon-disabled: var(--smoke-light-8);
 --icon-focus: var(--smoke-light-12);
---icon-weak-base: var(--smoke-light-7);
 --icon-invert-base: #FFFFFF;
+--icon-weak-base: var(--smoke-light-7);
 --icon-weak-hover: var(--smoke-light-8);
 --icon-weak-active: var(--smoke-light-9);
 --icon-weak-selected: var(--smoke-light-10);
 --icon-weak-disabled: var(--smoke-light-6);
 --icon-weak-focus: var(--smoke-light-9);
 --icon-strong-base: var(--smoke-light-12);
---icon-strong-hover: var(--smoke-light-12);
---icon-strong-active: var(--smoke-light-12);
---icon-strong-selected: var(--smoke-light-12);
+--icon-strong-hover: #151313;
+--icon-strong-active: #020202;
+--icon-strong-selected: #020202;
 --icon-strong-disabled: var(--smoke-light-8);
---icon-strong-focus: var(--smoke-light-12);
+--icon-strong-focus: #020202;
 --icon-brand-base: var(--smoke-light-12);
 --icon-interactive-base: var(--cobalt-light-9);
 --icon-success-base: var(--apple-light-7);
@@ -155,9 +159,9 @@
 --icon-warning-base: var(--amber-light-7);
 --icon-warning-hover: var(--amber-light-8);
 --icon-warning-active: var(--amber-light-11);
---icon-critical-base: var(--ember-light-7);
---icon-critical-hover: var(--ember-light-8);
---icon-critical-active: var(--ember-light-11);
+--icon-critical-base: var(--ember-light-10);
+--icon-critical-hover: var(--ember-light-11);
+--icon-critical-active: var(--ember-light-12);
 --icon-info-base: var(--lilac-light-7);
 --icon-info-hover: var(--lilac-light-8);
 --icon-info-active: var(--lilac-light-11);
@@ -184,9 +188,8 @@
 --icon-diff-add-base: var(--mint-light-11);
 --icon-diff-add-hover: var(--mint-light-12);
 --icon-diff-add-active: var(--mint-light-12);
---icon-diff-delete-base: var(--ember-light-9);
---icon-diff-delete-hover: var(--ember-light-10);
---icon-diff-delete-active: var(--ember-light-11);
+--icon-diff-delete-base: var(--ember-light-10);
+--icon-diff-delete-hover: var(--ember-light-11);
 --syntax-comment: #8A8A8A;
 --syntax-string: #D68C27;
 --syntax-keyword: #3B7DD8;
@@ -222,3 +225,5 @@
 --border-weaker-selected: var(--cobalt-light-alpha-4);
 --border-weaker-disabled: var(--smoke-light-alpha-2);
 --border-weaker-focus: var(--smoke-light-alpha-6);
+--button-ghost-hover: var(--smoke-light-alpha-2);
+--button-ghost-hover2: var(--smoke-light-alpha-3);

packages/ui/src/assets/favicon/favicon.svg

@@ -0,0 +1,18 @@
+<svg width='300' height='300' viewBox='0 0 300 300' fill='none' xmlns='http://www.w3.org/2000/svg'>
+  <style>
+    /* Light mode colors (default) */
+    .inner-square { fill: #CFCECD; }
+    .outer-path { fill: #211E1E; }
+
+    /* Dark mode colors */
+    @media (prefers-color-scheme: dark) {
+    .inner-square { fill: #4B4646; }
+    .outer-path { fill: #F1ECEC; }
+    }
+  </style>
+  <g>
+    <path class="inner-square" d='M194 215.5H106V127.5H194V215.5Z' />
+    <path class="outer-path" d='M194 83.5H106V215.5H194V83.5ZM238 259.5H62V39.5H238V259.5Z' />
+  </g>
+</svg>
+

packages/ui/src/assets/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "OpenCode",
+  "short_name": "OpenCode",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

packages/ui/src/components/button.css

@@ -7,6 +7,7 @@
   border-radius: 6px;
   text-decoration: none;
   user-select: none;
+  outline: none;
 
   &[data-variant="primary"] {
     border-color: var(--border-base);
@@ -28,22 +29,26 @@
   }
 
   &[data-variant="secondary"] {
-    border-color: var(--border-weak-base);
+    border: transparent;
     background-color: var(--button-secondary-base);
     color: var(--text-strong);
-    box-shadow: var(--shadow-xs);
+    box-shadow: var(--shadow-xs-border);
 
     &:hover:not(:disabled) {
-      border-color: var(--border-hover);
-      background-color: var(--surface-hover);
+      background-color: var(--button-secondary-hover);
     }
     &:active:not(:disabled) {
-      border-color: var(--border-active);
-      background-color: var(--surface-active);
+      background-color: var(--button-secondary-base);
     }
     &:focus:not(:disabled) {
-      border-color: var(--border-focus);
-      background-color: var(--surface-focus);
+      background-color: var(--button-secondary-base);
+    }
+    &:focus-visible:not(:active) {
+      background-color: var(--button-secondary-base);
+      box-shadow: var(--shadow-xs-border-focus);
+    }
+    &:focus-visible:active {
+      box-shadow: none;
     }
 
     [data-slot="icon"] {

packages/ui/src/components/diff-changes.tsx

@@ -16,16 +16,6 @@ export function DiffChanges(props: { diff: FileDiff | FileDiff[]; variant?: "def
   )
   const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
 
-  const countLines = (text: string) => {
-    if (!text) return 0
-    return text.split("\n").length
-  }
-
-  const totalBeforeLines = createMemo(() => {
-    if (!Array.isArray(props.diff)) return countLines(props.diff.before || "")
-    return props.diff.reduce((acc, diff) => acc + countLines(diff.before || ""), 0)
-  })
-
   const blockCounts = createMemo(() => {
     const TOTAL_BLOCKS = 5
 

packages/ui/src/components/favicon.tsx

@@ -0,0 +1,19 @@
+import { Link, Meta } from "@solidjs/meta"
+import favicon96 from "../assets/favicon/favicon-96x96.png"
+import faviconSvg from "../assets/favicon/favicon.svg"
+import faviconIco from "../assets/favicon/favicon.ico"
+import appleTouchIcon from "../assets/favicon/apple-touch-icon.png"
+import siteWebmanifest from "../assets/favicon/site.webmanifest"
+
+export const Favicon = () => {
+  return (
+    <>
+      <Link rel="icon" type="image/svg+xml" href={faviconSvg} />
+      <Link rel="icon" type="image/png" href={favicon96} sizes="96x96" />
+      <Link rel="shortcut icon" href={faviconIco} />
+      <Link rel="apple-touch-icon" sizes="180x180" href={appleTouchIcon} />
+      <Meta name="apple-mobile-web-app-title" content="OpenCode" />
+      <Link rel="manifest" href={siteWebmanifest} />
+    </>
+  )
+}

packages/ui/src/components/index.ts

@@ -9,6 +9,7 @@ export * from "./diff-changes"
 export * from "./icon"
 export * from "./icon-button"
 export * from "./input"
+export * from "./favicon"
 export * from "./fonts"
 export * from "./list"
 export * from "./markdown"
@@ -19,6 +20,7 @@ export * from "./select-dialog"
 export * from "./tabs"
 export * from "./basic-tool"
 export * from "./tooltip"
+export * from "./typewriter"
 
 export * from "../context/helper"
 export * from "../context/shiki"

packages/ui/src/components/markdown.css

@@ -4,6 +4,7 @@
   overflow: auto;
   scrollbar-width: none;
   color: var(--text-base);
+  text-wrap: pretty;
 
   /* text-14-regular */
   font-family: var(--font-family-sans);
@@ -34,4 +35,10 @@
     margin-top: 16px;
     margin-bottom: 16px;
   }
+
+  hr {
+    margin-top: 8px;
+    margin-bottom: 16px;
+    border-color: var(--border-weaker-base);
+  }
 }

packages/ui/src/components/message-part.css

@@ -29,28 +29,33 @@
 
 [data-component="tool-error"] {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: 8px;
 
-  [data-slot="icon"] {
-    color: var(--icon-critical-active);
+  [data-slot="tool-error-icon"] {
+    color: var(--icon-critical-base);
+    margin-top: 4px;
   }
 
-  [data-slot="content"] {
+  [data-slot="tool-error-content"] {
     display: flex;
-    align-items: center;
+    align-items: start;
     gap: 8px;
   }
 
-  [data-slot="title"] {
+  [data-slot="tool-error-title"] {
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    color: var(--ember-light-11);
-    text-transform: capitalize;
+    color: var(--text-on-critical-base);
+    white-space: nowrap;
+  }
+
+  [data-slot="tool-error-message"] {
+    color: var(--text-on-critical-weak);
   }
 }
 

packages/ui/src/components/message-part.tsx

@@ -151,15 +151,17 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
             return (
               <Card variant="error">
                 <div data-component="tool-error">
-                  <Icon name="circle-ban-sign" size="small" data-slot="icon" />
+                  <Icon name="circle-ban-sign" size="small" data-slot="tool-error-icon" />
                   <Switch>
-                    <Match when={title}>
-                      <div data-slot="content">
-                        <div data-slot="title">{title}</div>
-                        <span>{rest.join(": ")}</span>
+                    <Match when={title && title.length < 30}>
+                      <div data-slot="tool-error-content">
+                        <div data-slot="tool-error-title">{title}</div>
+                        <span data-slot="tool-error-message">{rest.join(": ")}</span>
                       </div>
                     </Match>
-                    <Match when={true}>{cleaned}</Match>
+                    <Match when={true}>
+                      <span data-slot="tool-error-message">{cleaned}</span>
+                    </Match>
                   </Switch>
                 </div>
               </Card>

packages/ui/src/components/typewriter.css

@@ -0,0 +1,14 @@
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.blinking-cursor {
+  animation: blink 1s step-end infinite;
+}

packages/ui/src/components/typewriter.tsx

@@ -0,0 +1,54 @@
+import { createEffect, Show, type ValidComponent } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+
+export const Typewriter = <T extends ValidComponent = "p">(props: {
+  text?: string
+  class?: string
+  as?: T
+}) => {
+  const [store, setStore] = createStore({
+    typing: false,
+    displayed: "",
+    cursor: true,
+  })
+
+  createEffect(() => {
+    const text = props.text
+    if (!text) return
+
+    let i = 0
+    setStore("typing", true)
+    setStore("displayed", "")
+    setStore("cursor", true)
+
+    const getTypingDelay = () => {
+      const random = Math.random()
+      if (random < 0.05) return 150 + Math.random() * 100
+      if (random < 0.15) return 80 + Math.random() * 60
+      return 30 + Math.random() * 50
+    }
+
+    const type = () => {
+      if (i < text.length) {
+        setStore("displayed", text.slice(0, i + 1))
+        i++
+        setTimeout(type, getTypingDelay())
+      } else {
+        setStore("typing", false)
+        setTimeout(() => setStore("cursor", false), 2000)
+      }
+    }
+
+    setTimeout(type, 200)
+  })
+
+  return (
+    <Dynamic component={props.as || "p"} class={props.class}>
+      {store.displayed}
+      <Show when={store.cursor}>
+        <span classList={{ "blinking-cursor": !store.typing }}>│</span>
+      </Show>
+    </Dynamic>
+  )
+}

packages/ui/src/styles/animations.css

@@ -0,0 +1,13 @@
+:root {
+  --animate-pulse: pulse-opacity 2s ease-in-out infinite;
+}
+
+@keyframes pulse-opacity {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}

packages/ui/src/styles/index.css

@@ -25,5 +25,7 @@
 @import "../components/select-dialog.css" layer(components);
 @import "../components/tabs.css" layer(components);
 @import "../components/tooltip.css" layer(components);
+@import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);
+@import "./animations.css" layer(utilities);

packages/ui/src/styles/tailwind/colors.css

@@ -7,8 +7,8 @@
   --color-background-weak: var(--background-weak);
   --color-background-strong: var(--background-strong);
   --color-background-stronger: var(--background-stronger);
-  --color-base: var(--base);
   --color-surface-base: var(--surface-base);
+  --color-base: var(--base);
   --color-surface-base-hover: var(--surface-base-hover);
   --color-surface-base-active: var(--surface-base-active);
   --color-surface-base-interactive-active: var(--surface-base-interactive-active);
@@ -22,6 +22,7 @@
   --color-surface-float-base: var(--surface-float-base);
   --color-surface-float-base-hover: var(--surface-float-base-hover);
   --color-surface-raised-base-hover: var(--surface-raised-base-hover);
+  --color-surface-raised-base-active: var(--surface-raised-base-active);
   --color-surface-raised-strong: var(--surface-raised-strong);
   --color-surface-raised-strong-hover: var(--surface-raised-strong-hover);
   --color-surface-raised-stronger: var(--surface-raised-stronger);
@@ -48,8 +49,8 @@
   --color-surface-info-base: var(--surface-info-base);
   --color-surface-info-weak: var(--surface-info-weak);
   --color-surface-info-strong: var(--surface-info-strong);
-  --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
   --color-surface-diff-skip-base: var(--surface-diff-skip-base);
+  --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
   --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
   --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
   --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
@@ -80,6 +81,9 @@
   --color-text-on-interactive-base: var(--text-on-interactive-base);
   --color-text-on-interactive-weak: var(--text-on-interactive-weak);
   --color-text-on-success-base: var(--text-on-success-base);
+  --color-text-on-critical-base: var(--text-on-critical-base);
+  --color-text-on-critical-weak: var(--text-on-critical-weak);
+  --color-text-on-critical-strong: var(--text-on-critical-strong);
   --color-text-on-warning-base: var(--text-on-warning-base);
   --color-text-on-info-base: var(--text-on-info-base);
   --color-text-diff-add-base: var(--text-diff-add-base);
@@ -139,8 +143,8 @@
   --color-icon-selected: var(--icon-selected);
   --color-icon-disabled: var(--icon-disabled);
   --color-icon-focus: var(--icon-focus);
-  --color-icon-weak-base: var(--icon-weak-base);
   --color-icon-invert-base: var(--icon-invert-base);
+  --color-icon-weak-base: var(--icon-weak-base);
   --color-icon-weak-hover: var(--icon-weak-hover);
   --color-icon-weak-active: var(--icon-weak-active);
   --color-icon-weak-selected: var(--icon-weak-selected);
@@ -191,7 +195,6 @@
   --color-icon-diff-add-active: var(--icon-diff-add-active);
   --color-icon-diff-delete-base: var(--icon-diff-delete-base);
   --color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
-  --color-icon-diff-delete-active: var(--icon-diff-delete-active);
   --color-syntax-comment: var(--syntax-comment);
   --color-syntax-string: var(--syntax-string);
   --color-syntax-keyword: var(--syntax-keyword);
@@ -227,4 +230,6 @@
   --color-border-weaker-selected: var(--border-weaker-selected);
   --color-border-weaker-disabled: var(--border-weaker-disabled);
   --color-border-weaker-focus: var(--border-weaker-focus);
+  --color-button-ghost-hover: var(--button-ghost-hover);
+  --color-button-ghost-hover2: var(--button-ghost-hover2);
 }

packages/ui/src/styles/tailwind/index.css

@@ -64,6 +64,8 @@
   --shadow-xs: var(--shadow-xs);
   --shadow-md: var(--shadow-md);
   --shadow-xs-border-selected: var(--shadow-xs-border-selected);
+
+  --animate-pulse: var(--animate-pulse);
 }
 
 @import "./colors.css";

packages/ui/src/styles/theme.css

@@ -55,10 +55,23 @@
   --shadow-md:
     0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12),
     0 1px 2px -1px rgba(19, 16, 16, 0.12);
-  --shadow-xs-border-selected:
+  --shadow-xs-border:
+    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.20)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06),
+    0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-xs-border-select:
     0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
     0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
     0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+  --shadow-xs-border-focus:
+    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.20)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.25),
+    0 1px 2px 0 rgba(19, 16, 16, 0.08),
+    0 1px 3px 0 rgba(19, 16, 16, 0.12),
+    0 0 0 2px var(--background-weak, #F1F0F0),
+    0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
+
 
   --text-mix-blend-mode: multiply;
 }
@@ -114,9 +127,9 @@
   --surface-info-base: var(--lilac-light-3);
   --surface-info-weak: var(--lilac-light-2);
   --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-unchanged-base: #ffffff00;
   --surface-diff-skip-base: var(--smoke-light-2);
   --surface-diff-hidden-base: var(--blue-light-3);
+  --surface-diff-unchanged-base: #ffffff00;
   --surface-diff-hidden-weak: var(--blue-light-2);
   --surface-diff-hidden-weaker: var(--blue-light-1);
   --surface-diff-hidden-strong: var(--blue-light-5);
@@ -145,7 +158,10 @@
   --text-on-brand-base: var(--smoke-light-alpha-11);
   --text-on-interactive-base: var(--smoke-light-1);
   --text-on-interactive-weak: var(--smoke-dark-alpha-11);
-  --text-on-success-base: var(--smoke-dark-alpha-11);
+  --text-on-success-base: var(--apple-light-10);
+  --text-on-critical-base: var(--ember-light-10);
+  --text-on-critical-weak: var(--ember-light-8);
+  --text-on-critical-strong: var(--ember-light-12);
   --text-on-warning-base: var(--smoke-dark-alpha-11);
   --text-on-info-base: var(--smoke-dark-alpha-11);
   --text-diff-add-base: var(--mint-light-11);
@@ -156,13 +172,13 @@
   --text-on-info-strong: var(--smoke-dark-alpha-12);
   --text-on-warning-weak: var(--smoke-dark-alpha-9);
   --text-on-warning-strong: var(--smoke-dark-alpha-12);
-  --text-on-success-weak: var(--smoke-dark-alpha-9);
-  --text-on-success-strong: var(--smoke-dark-alpha-12);
+  --text-on-success-weak: var(--apple-light-6);
+  --text-on-success-strong: var(--apple-light-12);
   --text-on-brand-weak: var(--smoke-light-alpha-9);
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
   --text-on-brand-strong: var(--smoke-light-alpha-12);
   --button-secondary-base: #fdfcfc;
-  --button-secondary-base-hover: #faf9f9;
+  --button-secondary-hover: #fafafa;
   --border-base: var(--smoke-light-alpha-7);
   --border-hover: var(--smoke-light-alpha-8);
   --border-active: var(--smoke-light-alpha-9);
@@ -226,9 +242,9 @@
   --icon-warning-base: var(--amber-light-7);
   --icon-warning-hover: var(--amber-light-8);
   --icon-warning-active: var(--amber-light-11);
-  --icon-critical-base: var(--ember-light-7);
-  --icon-critical-hover: var(--ember-light-8);
-  --icon-critical-active: var(--ember-light-11);
+  --icon-critical-base: var(--ember-light-10);
+  --icon-critical-hover: var(--ember-light-11);
+  --icon-critical-active: var(--ember-light-12);
   --icon-info-base: var(--lilac-light-7);
   --icon-info-hover: var(--lilac-light-8);
   --icon-info-active: var(--lilac-light-11);
@@ -346,9 +362,9 @@
     --surface-info-base: var(--lilac-light-3);
     --surface-info-weak: var(--lilac-light-2);
     --surface-info-strong: var(--lilac-light-9);
-    --surface-diff-unchanged-base: var(--smoke-dark-1);
     --surface-diff-skip-base: var(--smoke-dark-alpha-1);
     --surface-diff-hidden-base: var(--blue-dark-2);
+    --surface-diff-unchanged-base: var(--smoke-dark-1);
     --surface-diff-hidden-weak: var(--blue-dark-1);
     --surface-diff-hidden-weaker: var(--blue-dark-3);
     --surface-diff-hidden-strong: var(--blue-dark-5);
@@ -377,7 +393,10 @@
     --text-on-brand-base: var(--smoke-dark-alpha-11);
     --text-on-interactive-base: var(--smoke-dark-12);
     --text-on-interactive-weak: var(--smoke-dark-alpha-11);
-    --text-on-success-base: var(--smoke-dark-alpha-11);
+    --text-on-success-base: var(--apple-dark-9);
+    --text-on-critical-base: var(--ember-dark-9);
+    --text-on-critical-weak: var(--ember-dark-8);
+    --text-on-critical-strong: var(--ember-dark-12);
     --text-on-warning-base: var(--smoke-dark-alpha-11);
     --text-on-info-base: var(--smoke-dark-alpha-11);
     --text-diff-add-base: var(--mint-dark-11);
@@ -388,13 +407,13 @@
     --text-on-info-strong: var(--smoke-dark-alpha-12);
     --text-on-warning-weak: var(--smoke-dark-alpha-9);
     --text-on-warning-strong: var(--smoke-dark-alpha-12);
-    --text-on-success-weak: var(--smoke-dark-alpha-9);
-    --text-on-success-strong: var(--smoke-dark-alpha-12);
+    --text-on-success-weak: var(--apple-dark-8);
+    --text-on-success-strong: var(--apple-dark-12);
     --text-on-brand-weak: var(--smoke-dark-alpha-9);
     --text-on-brand-weaker: var(--smoke-dark-alpha-8);
     --text-on-brand-strong: var(--smoke-dark-alpha-12);
     --button-secondary-base: var(--smoke-dark-4);
-    --button-secondary-base-hover: #2a2727;
+    --button-secondary-hover: #2A2727;
     --border-base: var(--smoke-dark-alpha-7);
     --border-hover: var(--smoke-dark-alpha-8);
     --border-active: var(--smoke-dark-alpha-9);
@@ -458,9 +477,9 @@
     --icon-warning-base: var(--amber-dark-7);
     --icon-warning-hover: var(--amber-dark-8);
     --icon-warning-active: var(--amber-dark-11);
-    --icon-critical-base: var(--ember-dark-7);
-    --icon-critical-hover: var(--ember-dark-8);
-    --icon-critical-active: var(--ember-dark-11);
+    --icon-critical-base: var(--ember-dark-9);
+    --icon-critical-hover: var(--ember-dark-11);
+    --icon-critical-active: var(--ember-dark-12);
     --icon-info-base: var(--lilac-dark-7);
     --icon-info-hover: var(--lilac-dark-8);
     --icon-info-active: var(--lilac-dark-11);

packages/ui/src/styles/utilities.css

@@ -48,71 +48,6 @@
   border-width: 0;
 }
 
-.scroller {
-  /* --fade-height: 1.5rem; */
-  /**/
-  /* --mask-top: linear-gradient(to bottom, transparent, black var(--fade-height)); */
-  /* --mask-bottom: linear-gradient(to top, transparent, black var(--fade-height)); */
-  /**/
-  /* mask-image: var(--mask-top), var(--mask-bottom); */
-  /* mask-repeat: no-repeat; */
-  /* mask-size: 100% var(--fade-height); */
-
-  animation: scroll-fade linear;
-  animation-timeline: scroll(self);
-}
-
-/* Define the keyframes for the mask.
-  These percentages now map to scroll positions:
-  0% = Scrolled to the top
-  100% = Scrolled to the bottom
-*/
-@keyframes scroll-fade {
-  /* At the very top (0% scroll) */
-  0% {
-    mask-image: linear-gradient(
-      to bottom,
-      black 90%,
-      /* Opaque, but start fade to bottom */ transparent 100%
-    );
-  }
-
-  /* A small amount scrolled (e.g., 5%)
-    This is where the top fade should be fully visible.
-  */
-  5% {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 10%,
-      /* Fade-in top */ black 90%,
-      /* Fade-out bottom */ transparent 100%
-    );
-  }
-
-  /* Nearing the bottom (e.g., 95%)
-    The bottom fade should start disappearing.
-  */
-  95% {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 10%,
-      /* Fade-in top */ black 90%,
-      /* Fade-out bottom */ transparent 100%
-    );
-  }
-
-  /* At the very bottom (100% scroll) */
-  100% {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 10% /* Opaque, but start fade from top */
-    );
-  }
-}
-
 .truncate-start {
   text-overflow: ellipsis;
   overflow: hidden;

packages/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/web",
   "type": "module",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "scripts": {
     "dev": "astro dev",
     "dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",

sdks/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "opencode",
   "displayName": "opencode",
   "description": "opencode for VS Code",
-  "version": "0.15.30",
+  "version": "0.15.31",
   "publisher": "sst-dev",
   "repository": {
     "type": "git",