release: v0.15.8

Co-authored-by: Matt Gillard <matt-github@gillard.biz>

STATS.md

@@ -110,3 +110,5 @@
 | 2025-10-14 | 505,130 (+13,005) | 429,286 (+10,541) | 934,416 (+23,546) |
 | 2025-10-15 | 512,717 (+7,587)  | 439,290 (+10,004) | 952,007 (+17,591) |
 | 2025-10-16 | 517,719 (+5,002)  | 447,137 (+7,847)  | 964,856 (+12,849) |
+| 2025-10-17 | 526,239 (+8,520)  | 457,467 (+10,330) | 983,706 (+18,850) |
+| 2025-10-18 | 531,564 (+5,325)  | 465,272 (+7,805)  | 996,836 (+13,130) |

bun.lock

@@ -37,7 +37,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "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.7",
+      "version": "0.15.8",
       "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.7",
+      "version": "0.15.8",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -107,20 +107,11 @@
         "@tsconfig/node22": "22.0.2",
       },
     },
-    "packages/css": {
-      "name": "@opencode-ai/css",
-      "version": "0.15.7",
-      "dependencies": {
-        "@tailwindcss/vite": "catalog:",
-        "tailwindcss": "catalog:",
-      },
-    },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "dependencies": {
         "@kobalte/core": "catalog:",
-        "@opencode-ai/css": "workspace:*",
         "@opencode-ai/sdk": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
         "@shikijs/transformers": "3.9.2",
@@ -138,9 +129,9 @@
         "remeda": "catalog:",
         "shiki": "3.9.2",
         "solid-js": "catalog:",
-        "solid-list": "0.3.0",
+        "solid-list": "catalog:",
         "tailwindcss": "catalog:",
-        "virtua": "0.42.3",
+        "virtua": "catalog:",
       },
       "devDependencies": {
         "@tailwindcss/vite": "catalog:",
@@ -156,7 +147,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "22.0.0",
@@ -172,7 +163,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -234,7 +225,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -254,7 +245,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.81.0",
         "@tsconfig/node22": "catalog:",
@@ -265,7 +256,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -278,15 +269,20 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "dependencies": {
         "@kobalte/core": "catalog:",
-        "@opencode-ai/css": "workspace:*",
         "@solidjs/meta": "catalog:",
+        "luxon": "catalog:",
         "remeda": "catalog:",
         "solid-js": "catalog:",
+        "solid-list": "catalog:",
+        "virtua": "catalog:",
       },
       "devDependencies": {
+        "@tailwindcss/vite": "catalog:",
+        "@types/bun": "catalog:",
+        "tailwindcss": "catalog:",
         "typescript": "catalog:",
         "vite": "catalog:",
         "vite-plugin-solid": "catalog:",
@@ -294,7 +290,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "0.15.7",
+      "version": "0.15.8",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
@@ -355,8 +351,10 @@
     "luxon": "3.6.1",
     "remeda": "2.26.0",
     "solid-js": "1.9.9",
+    "solid-list": "0.3.0",
     "tailwindcss": "4.1.11",
     "typescript": "5.8.2",
+    "virtua": "0.42.3",
     "vite": "7.1.4",
     "vite-plugin-solid": "2.11.8",
     "zod": "4.1.8",
@@ -856,8 +854,6 @@
 
     "@opencode-ai/console-resource": ["@opencode-ai/console-resource@workspace:packages/console/resource"],
 
-    "@opencode-ai/css": ["@opencode-ai/css@workspace:packages/css"],
-
     "@opencode-ai/desktop": ["@opencode-ai/desktop@workspace:packages/desktop"],
 
     "@opencode-ai/function": ["@opencode-ai/function@workspace:packages/function"],
@@ -3694,7 +3690,7 @@
 
     "named-placeholders/lru-cache": ["lru-cache@7.18.3", "", {}, "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA=="],
 
-    "nitropack/c12": ["c12@3.3.0", "", { "dependencies": { "chokidar": "^4.0.3", "confbox": "^0.2.2", "defu": "^6.1.4", "dotenv": "^17.2.2", "exsolve": "^1.0.7", "giget": "^2.0.0", "jiti": "^2.5.1", "ohash": "^2.0.11", "pathe": "^2.0.3", "perfect-debounce": "^2.0.0", "pkg-types": "^2.3.0", "rc9": "^2.1.2" }, "peerDependencies": { "magicast": "^0.3.5" }, "optionalPeers": ["magicast"] }, "sha512-K9ZkuyeJQeqLEyqldbYLG3wjqwpw4BVaAqvmxq3GYKK0b1A/yYQdIcJxkzAOWcNVWhJpRXAPfZFueekiY/L8Dw=="],
+    "nitropack/c12": ["c12@3.3.1", "", { "dependencies": { "chokidar": "^4.0.3", "confbox": "^0.2.2", "defu": "^6.1.4", "dotenv": "^17.2.3", "exsolve": "^1.0.7", "giget": "^2.0.0", "jiti": "^2.6.1", "ohash": "^2.0.11", "pathe": "^2.0.3", "perfect-debounce": "^2.0.0", "pkg-types": "^2.3.0", "rc9": "^2.1.2" }, "peerDependencies": { "magicast": "^0.3.5" }, "optionalPeers": ["magicast"] }, "sha512-LcWQ01LT9tkoUINHgpIOv3mMs+Abv7oVCrtpMRi1PaapVEpWoMga5WuT7/DqFTu7URP9ftbOmimNw1KNIGh9DQ=="],
 
     "nitropack/globby": ["globby@15.0.0", "", { "dependencies": { "@sindresorhus/merge-streams": "^4.0.0", "fast-glob": "^3.3.3", "ignore": "^7.0.5", "path-type": "^6.0.0", "slash": "^5.1.0", "unicorn-magic": "^0.3.0" } }, "sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw=="],
 
@@ -4102,8 +4098,6 @@
 
     "axios/form-data/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
-    "bl/buffer/ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
-
     "body-parser/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
     "c12/pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],

install

@@ -96,6 +96,7 @@ download_and_install() {
     curl -# -L -o "$filename" "$url"
     unzip -q "$filename"
     mv opencode "$INSTALL_DIR"
+    chmod 755 "${INSTALL_DIR}/opencode"
     cd .. && rm -rf opencodetmp
 }
 

package.json

@@ -37,7 +37,9 @@
       "zod": "4.1.8",
       "remeda": "2.26.0",
       "solid-js": "1.9.9",
+      "solid-list": "0.3.0",
       "tailwindcss": "4.1.11",
+      "virtua": "0.42.3",
       "vite": "7.1.4",
       "vite-plugin-solid": "2.11.8"
     }

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.7"
+    "version": "0.15.8"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",

packages/console/app/src/component/header.tsx

@@ -4,11 +4,9 @@ import { A, createAsync } from "@solidjs/router"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { github } from "~/lib/github"
-import { queryIsLoggedIn } from "~/routes/workspace/common"
 
 export function Header(props: { zen?: boolean }) {
   const githubData = createAsync(() => github())
-  const isLoggedIn = createAsync(() => queryIsLoggedIn())
   const starCount = createMemo(() =>
     githubData()?.stars
       ? new Intl.NumberFormat("en-US", {
@@ -41,7 +39,7 @@ export function Header(props: { zen?: boolean }) {
           <li>
             <Switch>
               <Match when={props.zen}>
-                <a href="/auth">{isLoggedIn() ? "Workspace" : "Login"}</a>
+                <a href="/auth">Login</a>
               </Match>
               <Match when={!props.zen}>
                 <A href="/zen">Zen</A>
@@ -112,7 +110,7 @@ export function Header(props: { zen?: boolean }) {
                 <li>
                   <Switch>
                     <Match when={props.zen}>
-                      <a href="/auth">{isLoggedIn() ? "Workspace" : "Login"}</a>
+                      <a href="/auth">Login</a>
                     </Match>
                     <Match when={!props.zen}>
                       <A href="/zen">Zen</A>

packages/console/app/src/context/auth.ts

@@ -1,5 +1,5 @@
 import { getRequestEvent } from "solid-js/web"
-import { and, Database, eq, inArray, sql } from "@opencode-ai/console-core/drizzle/index.js"
+import { and, Database, eq, inArray, isNull, sql } from "@opencode-ai/console-core/drizzle/index.js"
 import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
 import { redirect } from "@solidjs/router"
 import { Actor } from "@opencode-ai/console-core/actor.js"
@@ -56,7 +56,13 @@ export const getActor = async (workspace?: string): Promise<Actor.Info> => {
         tx
           .select()
           .from(UserTable)
-          .where(and(eq(UserTable.workspaceID, workspace), inArray(UserTable.accountID, accounts)))
+          .where(
+            and(
+              eq(UserTable.workspaceID, workspace),
+              isNull(UserTable.timeDeleted),
+              inArray(UserTable.accountID, accounts),
+            ),
+          )
           .limit(1)
           .execute()
           .then((x) => x[0]),

packages/console/app/src/routes/auth/index.ts

@@ -1,30 +1,11 @@
-import { Actor } from "@opencode-ai/console-core/actor.js"
-import { and, Database, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js"
-import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
-import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
 import { redirect } from "@solidjs/router"
 import type { APIEvent } from "@solidjs/start/server"
-import { withActor } from "~/context/auth.withActor"
+import { getLastSeenWorkspaceID } from "../workspace/common"
 
 export async function GET(input: APIEvent) {
   try {
-    const workspaces = await withActor(async () => {
-      const actor = Actor.assert("account")
-      return Database.transaction(async (tx) =>
-        tx
-          .select({ id: WorkspaceTable.id })
-          .from(UserTable)
-          .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
-          .where(
-            and(
-              eq(UserTable.accountID, actor.properties.accountID),
-              isNull(UserTable.timeDeleted),
-              isNull(WorkspaceTable.timeDeleted),
-            ),
-          ),
-      )
-    })
-    return redirect(`/workspace/${workspaces[0].id}`)
+    const workspaceID = await getLastSeenWorkspaceID()
+    return redirect(`/workspace/${workspaceID}`)
   } catch {
     return redirect("/auth/authorize")
   }

packages/console/app/src/routes/workspace-picker.tsx

@@ -23,7 +23,13 @@ const getWorkspaces = query(async () => {
         })
         .from(UserTable)
         .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
-        .where(and(eq(UserTable.accountID, Actor.account()), isNull(WorkspaceTable.timeDeleted))),
+        .where(
+          and(
+            eq(UserTable.accountID, Actor.account()),
+            isNull(WorkspaceTable.timeDeleted),
+            isNull(UserTable.timeDeleted),
+          ),
+        ),
     )
   })
 }, "workspaces")

packages/console/app/src/routes/workspace/[id].css

@@ -16,38 +16,110 @@
   justify-content: flex-end;
 }
 
-[data-component="workspace-nav-items"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
+/* Desktop Navigation */
+[data-component="nav-desktop"] {
+  display: block;
 
-  [data-nav-button] {
-    padding: var(--space-3) var(--space-4);
-    border-radius: var(--border-radius-sm);
-    color: var(--color-text-muted);
-    text-decoration: none;
-    font-size: var(--font-size-sm);
-    font-weight: 500;
-    transition: all 0.15s ease;
+  @media (max-width: 48rem) {
+    display: none;
+  }
 
-    &:hover {
-      color: var(--color-text);
+  [data-component="workspace-nav-items"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+
+    [data-nav-button] {
+      padding: var(--space-3) var(--space-4);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      transition: all 0.15s ease;
+
+      &:hover {
+        color: var(--color-text);
+      }
+
+      &.active {
+        color: var(--color-text);
+        font-weight: 700;
+        position: relative;
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: calc(-1 * var(--space-0-5));
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          background-color: var(--color-text);
+          border-radius: 0 2px 2px 0;
+        }
+      }
     }
+  }
+}
 
-    &.active {
-      color: var(--color-text);
-      font-weight: 700;
+/* Mobile Navigation */
+[data-component="nav-mobile"] {
+  display: none;
+
+  @media (max-width: 48rem) {
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [data-component="workspace-nav-items"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: max-content;
+    height: 100%;
+
+    [data-nav-button] {
+      padding: var(--space-2) var(--space-3);
+      padding-bottom: calc(var(--space-2) + 4px);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      transition: all 0.15s ease;
+      white-space: nowrap;
+      flex-shrink: 0;
       position: relative;
 
-      &::before {
-        content: '';
-        position: absolute;
-        left: calc(-1 * var(--space-0-5));
-        top: 0;
-        bottom: 0;
-        width: 2px;
-        background-color: var(--color-text);
-        border-radius: 0 2px 2px 0;
+      &:hover {
+        color: var(--color-text);
+      }
+
+      &.active {
+        color: var(--color-text);
+        font-weight: 700;
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background-color: var(--color-text);
+          border-radius: 2px 2px 0 0;
+        }
       }
     }
   }
@@ -221,5 +293,16 @@
     border-right: none;
     border-bottom: 1px solid var(--color-border);
     padding: var(--space-4);
+    justify-content: flex-start;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-shrink: 0;
+    min-height: fit-content;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
-}
+}

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

@@ -6,29 +6,54 @@ import "./[id].css"
 export default function WorkspaceLayout(props: RouteSectionProps) {
   const params = useParams()
   const userInfo = createAsync(() => querySessionInfo(params.id))
+
   return (
     <main data-page="workspace">
       <div data-component="workspace-container">
         <nav data-component="workspace-nav">
-          <div data-component="workspace-nav-items">
-            <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
-              Zen
-            </A>
-            <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
-              API Keys
-            </A>
-            <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
-              Members
-            </A>
-            <Show when={userInfo()?.isAdmin}>
-              <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
-                Billing
+          <nav data-component="nav-desktop">
+            <div data-component="workspace-nav-items">
+              <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+                Zen
               </A>
-              <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
-                Settings
+              <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
+                API Keys
               </A>
-            </Show>
-          </div>
+              <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
+                Members
+              </A>
+              <Show when={userInfo()?.isAdmin}>
+                <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                  Billing
+                </A>
+                <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                  Settings
+                </A>
+              </Show>
+            </div>
+          </nav>
+
+          <nav data-component="nav-mobile">
+            <div data-component="workspace-nav-items">
+              <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+                Zen
+              </A>
+              <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
+                API Keys
+              </A>
+              <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
+                Members
+              </A>
+              <Show when={userInfo()?.isAdmin}>
+                <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                  Billing
+                </A>
+                <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                  Settings
+                </A>
+              </Show>
+            </div>
+          </nav>
         </nav>
         <div data-component="workspace-content">{props.children}</div>
       </div>

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

@@ -22,6 +22,22 @@
     }
   }
 
+  [data-slot="beta-notice"] {
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-bg-surface);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+    margin-bottom: var(--space-3);
+
+    a {
+      color: var(--color-accent);
+      text-decoration: none;
+    }
+  }
+
   [data-slot="create-form"] {
     display: flex;
     flex-direction: column;
@@ -81,7 +97,7 @@
       display: flex;
       gap: var(--space-2);
 
-      >button[type="reset"] {
+      > button[type="reset"] {
         align-self: flex-start;
       }
     }
@@ -207,7 +223,6 @@
     }
 
     @media (max-width: 40rem) {
-
       th,
       td {
         padding: var(--space-2) var(--space-3);
@@ -217,8 +232,7 @@
       th {
         &:nth-child(3)
 
-        /* Date */
-          {
+        /* Date */ {
           display: none;
         }
       }
@@ -226,11 +240,10 @@
       td {
         &:nth-child(3)
 
-        /* Date */
-          {
+        /* Date */ {
           display: none;
         }
       }
     }
   }
-}
+}

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

@@ -253,6 +253,13 @@ export function MemberSection() {
           </Show>
         </div>
       </div>
+      <div data-slot="beta-notice">
+        Workspaces are free for teams during the beta.{" "}
+        <a href="/docs/zen/#for-teams" target="_blank" rel="noopener noreferrer">
+          Learn more
+        </a>
+        .
+      </div>
       <Show when={store.show}>
         <form action={inviteMember} method="post" data-slot="create-form">
           <div data-slot="input-row">

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

@@ -3,6 +3,10 @@ import { Actor } from "@opencode-ai/console-core/actor.js"
 import { action, query } from "@solidjs/router"
 import { withActor } from "~/context/auth.withActor"
 import { Billing } from "@opencode-ai/console-core/billing.js"
+import { User } from "@opencode-ai/console-core/user.js"
+import { and, Database, desc, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js"
+import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
+import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
 
 export function formatDateForTable(date: Date) {
   const options: Intl.DateTimeFormatOptions = {
@@ -30,17 +34,28 @@ export function formatDateUTC(date: Date) {
   return date.toLocaleDateString("en-US", options)
 }
 
-export const queryIsLoggedIn = query(async () => {
+export async function getLastSeenWorkspaceID() {
   "use server"
-  return withActor(() => {
-    try {
-      Actor.assert("account")
-      return true
-    } catch {
-      return false
-    }
+  return withActor(async () => {
+    const actor = Actor.assert("account")
+    return Database.use(async (tx) =>
+      tx
+        .select({ id: WorkspaceTable.id })
+        .from(UserTable)
+        .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
+        .where(
+          and(
+            eq(UserTable.accountID, actor.properties.accountID),
+            isNull(UserTable.timeDeleted),
+            isNull(WorkspaceTable.timeDeleted),
+          ),
+        )
+        .orderBy(desc(UserTable.timeSeen))
+        .limit(1)
+        .then((x) => x[0]?.id),
+    )
   })
-}, "isLoggedIn.get")
+}
 
 export const querySessionInfo = query(async (workspaceID: string) => {
   "use server"

packages/console/app/src/routes/zen/index.tsx

@@ -1,5 +1,5 @@
 import "./index.css"
-import { createAsync } from "@solidjs/router"
+import { createAsync, query, redirect } from "@solidjs/router"
 import { Title, Meta, Link } from "@solidjs/meta"
 import { HttpHeader } from "@solidjs/start"
 import zenLogoLight from "../../asset/zen-ornate-light.svg"
@@ -16,10 +16,16 @@ import { Faq } from "~/component/faq"
 import { Legal } from "~/component/legal"
 import { Footer } from "~/component/footer"
 import { Header } from "~/component/header"
-import { queryIsLoggedIn } from "~/routes/workspace/common"
+import { getLastSeenWorkspaceID } from "../workspace/common"
+
+const checkLoggedIn = query(async () => {
+  "use server"
+  const workspaceID = await getLastSeenWorkspaceID()
+  if (workspaceID) throw redirect(`/workspace/${workspaceID}`)
+}, "checkLoggedIn.get")
 
 export default function Home() {
-  const isLoggedIn = createAsync(() => queryIsLoggedIn())
+  createAsync(() => checkLoggedIn())
   return (
     <main data-page="zen">
       <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
@@ -105,7 +111,7 @@ export default function Home() {
                 </div>
               </div>
               <a href="/auth">
-                <span>{isLoggedIn() ? "Go to workspace " : "Get started with Zen "}</span>
+                <span>Get started with Zen </span>
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"

packages/console/core/migrations/0036_slimy_energizer.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `account` ADD PRIMARY KEY(`id`);--> statement-breakpoint
+ALTER TABLE `auth` ADD PRIMARY KEY(`id`);

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

@@ -0,0 +1,969 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "5470c8b4-296d-47bd-85a7-88cfd3b71434",
+  "prevId": "10169105-4545-4894-838b-004c0a42c584",
+  "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_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

@@ -253,6 +253,13 @@
       "when": 1760666253896,
       "tag": "0035_narrow_blindfold",
       "breakpoints": true
+    },
+    {
+      "idx": 36,
+      "version": "5",
+      "when": 1760668952329,
+      "tag": "0036_slimy_energizer",
+      "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.7",
+  "version": "0.15.8",
   "private": true,
   "type": "module",
   "dependencies": {

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

@@ -1,7 +1,11 @@
-import { mysqlTable, uniqueIndex, varchar } from "drizzle-orm/mysql-core"
+import { mysqlTable, primaryKey } from "drizzle-orm/mysql-core"
 import { id, timestamps } from "../drizzle/types"
 
-export const AccountTable = mysqlTable("account", {
-  id: id(),
-  ...timestamps,
-})
+export const AccountTable = mysqlTable(
+  "account",
+  {
+    id: id(),
+    ...timestamps,
+  },
+  (table) => [primaryKey({ columns: [table.id] })],
+)

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

@@ -1,4 +1,4 @@
-import { index, mysqlEnum, mysqlTable, uniqueIndex, varchar } from "drizzle-orm/mysql-core"
+import { index, mysqlEnum, mysqlTable, primaryKey, uniqueIndex, varchar } from "drizzle-orm/mysql-core"
 import { id, timestamps, ulid } from "../drizzle/types"
 
 export const AuthProvider = ["email", "github", "google"] as const
@@ -12,5 +12,9 @@ export const AuthTable = mysqlTable(
     subject: varchar("subject", { length: 255 }).notNull(),
     accountID: ulid("account_id").notNull(),
   },
-  (table) => [uniqueIndex("provider").on(table.provider, table.subject), index("account_id").on(table.accountID)],
+  (table) => [
+    primaryKey({ columns: [table.id] }),
+    uniqueIndex("provider").on(table.provider, table.subject),
+    index("account_id").on(table.accountID),
+  ],
 )

packages/console/function/package.json

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

packages/console/function/src/auth.ts

@@ -134,6 +134,7 @@ export default {
         if (!subject) throw new Error("No subject found")
 
         if (Resource.App.stage !== "production" && !email.endsWith("@anoma.ly")) {
+          throw new Error("Invalid email")
         }
 
         // Get account

packages/console/mail/package.json

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

packages/css/.gitignore

@@ -1,34 +0,0 @@
-# dependencies (bun install)
-node_modules
-
-# output
-out
-dist
-*.tgz
-
-# code coverage
-coverage
-*.lcov
-
-# logs
-logs
-_.log
-report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# caches
-.eslintcache
-.cache
-*.tsbuildinfo
-
-# IntelliJ based IDEs
-.idea
-
-# Finder (MacOS) folder config
-.DS_Store

packages/css/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "@opencode-ai/css",
-  "version": "0.15.7",
-  "type": "module",
-  "exports": {
-    ".": "./src/index.css",
-    "./*": "./src/*",
-    "./fonts/*": "./src/assets/fonts/*"
-  },
-  "scripts": {
-    "dev": "bun run dev.ts",
-    "generate:tailwind": "bun run script/colors.ts"
-  },
-  "dependencies": {
-    "tailwindcss": "catalog:",
-    "@tailwindcss/vite": "catalog:"
-  }
-}

packages/css/src/index.css

@@ -1,14 +0,0 @@
-@layer theme, base, components, utilities;
-
-@import "./color.css" layer(theme);
-@import "./theme.css" layer(theme);
-
-@import "./base.css" layer(base);
-
-@import "./components/button.css" layer(components);
-@import "./components/icon.css" layer(components);
-@import "./components/select.css" layer(components);
-@import "./components/tabs.css" layer(components);
-@import "./components/tooltip.css" layer(components);
-
-@import "./utilities.css" layer(utilities);

packages/css/src/tailwind.css

@@ -1,12 +0,0 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-@import "./index.css";
-
-@theme {
-  --shadow-*: initial;
-  --shadow-xs-border-selected: var(--shadow-xs-border-selected);
-}
-
-@import "./tailwind-colors.css";

packages/css/src/utilities.css

@@ -1,37 +0,0 @@
-:root {
-  interpolate-size: allow-keywords;
-
-  [data-popper-positioner] {
-    pointer-events: none;
-  }
-
-  ::selection {
-    background-color: color-mix(in srgb, var(--color-primary) 33%, transparent);
-    /* background-color: var(--color-primary); */
-    /* color: var(--color-background); */
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--theme-background-panel);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--theme-border-subtle);
-    border-radius: 6px;
-  }
-
-  * {
-    scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel);
-  }
-}
-
-.no-scrollbar {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  & {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}

packages/desktop/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full bg-background-weak">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -7,15 +7,15 @@
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.svg" />
     <title>OpenCode</title>
   </head>
-  <body class="h-full overscroll-none select-none">
-    <script>
-      ;(function () {
-        const savedTheme = localStorage.getItem("theme") || "opencode"
-        const savedDarkMode = localStorage.getItem("darkMode") !== "false"
-        document.documentElement.setAttribute("data-theme", savedTheme)
-        document.documentElement.setAttribute("data-dark", savedDarkMode.toString())
-      })()
-    </script>
+  <body class="overscroll-none select-none text-12-regular">
+    <!-- <script> -->
+    <!--   ;(function () { -->
+    <!--     const savedTheme = localStorage.getItem("theme") || "opencode" -->
+    <!--     const savedDarkMode = localStorage.getItem("darkMode") !== "false" -->
+    <!--     document.documentElement.setAttribute("data-theme", savedTheme) -->
+    <!--     document.documentElement.setAttribute("data-dark", savedDarkMode.toString()) -->
+    <!--   })() -->
+    <!-- </script> -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script src="/src/index.tsx" type="module"></script>

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/desktop",
-  "version": "0.15.7",
+  "version": "0.15.8",
   "description": "",
   "type": "module",
   "scripts": {
@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "@kobalte/core": "catalog:",
-    "@opencode-ai/css": "workspace:*",
     "@opencode-ai/sdk": "workspace:*",
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/event-bus": "1.1.2",
@@ -42,9 +41,9 @@
     "remeda": "catalog:",
     "solid-js": "catalog:",
     "shiki": "3.9.2",
-    "solid-list": "0.3.0",
+    "solid-list": "catalog:",
     "tailwindcss": "catalog:",
-    "virtua": "0.42.3"
+    "virtua": "catalog:"
   },
   "prettier": {
     "semi": false,

packages/desktop/src/components/markdown.tsx

@@ -16,7 +16,7 @@ export function Markdown(props: { text: string; class?: string }) {
   )
   return (
     <div
-      class={`min-w-0 max-w-full text-xs overflow-auto no-scrollbar prose ${props.class ?? ""}`}
+      class={`min-w-0 max-w-full overflow-auto no-scrollbar text-14-regular text-text-base ${props.class ?? ""}`}
       innerHTML={html()}
     />
   )

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

@@ -0,0 +1,48 @@
+import { Component, createMemo } from "solid-js"
+
+interface ProgressCircleProps {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+export const ProgressCircle: Component<ProgressCircleProps> = (props) => {
+  // --- Set default values for props ---
+  const size = () => props.size || 16
+  const strokeWidth = () => props.strokeWidth || 3
+
+  // --- Constants for SVG calculation ---
+  const viewBoxSize = 16
+  const center = viewBoxSize / 2
+  const radius = () => center - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+
+  // --- Reactive Calculation for the progress offset ---
+  const offset = createMemo(() => {
+    const clampedPercentage = Math.max(0, Math.min(100, props.percentage || 0))
+    const progress = clampedPercentage / 100
+    return circumference() * (1 - progress)
+  })
+
+  return (
+    <svg
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      fill="none"
+      class="transform -rotate-90"
+    >
+      <circle cx={center} cy={center} r={radius()} class="stroke-border-weak-base" stroke-width={strokeWidth()} />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        class="stroke-border-active"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+        style={{ transition: "stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1)" }}
+      />
+    </svg>
+  )
+}

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

@@ -187,7 +187,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   return (
     <div
       classList={{
-        "size-full max-w-xl bg-surface-base border border-border-base": true,
+        "size-full max-w-xl bg-surface-raised-stronger-non-alpha border border-border-strong-base": true,
         "rounded-2xl overflow-clip focus-within:shadow-xs-border-selected": true,
         [props.class ?? ""]: !!props.class,
       }}

packages/desktop/src/components/session-list.tsx

@@ -1,38 +0,0 @@
-import { useSync, useLocal } from "@/context"
-import { Tooltip } from "@opencode-ai/ui"
-import { DateTime } from "luxon"
-import { VList } from "virtua/solid"
-
-export default function SessionList() {
-  const sync = useSync()
-  const local = useLocal()
-  return (
-    <VList data={sync.data.session} class="no-scrollbar p-3">
-      {(session) => (
-        <Tooltip placement="right" value={session.title} class="w-full min-w-0">
-          <button
-            data-active={local.session.active()?.id === session.id}
-            class="group w-full min-w-0 text-left truncate justify-start text-xs my-0.5 cursor-pointer
-                   flex flex-col gap-1 rounded-md p-2 border-[0.5px] border-transparent
-                   hover:not-data-[active=true]:bg-background-panel
-                   data-[active=true]:bg-background-element data-[active=true]:border-border-subtle"
-            onClick={() => local.session.setActive(session.id)}
-          >
-            <div class="flex gap-1 items-center">
-              <div
-                classList={{
-                  "text-text/80 min-w-0 grow truncate": true,
-                  "group-data-[active=true]:text-text!": true,
-                }}
-              >
-                {session.title}
-              </div>
-              <div class="shrink-0 text-text-muted/60">{DateTime.fromMillis(session.time.updated).toRelative()}</div>
-            </div>
-            <span class="text-text-muted truncate">{session.share?.url}</span>
-          </button>
-        </Tooltip>
-      )}
-    </VList>
-  )
-}

packages/desktop/src/components/session-timeline.tsx

@@ -1,7 +1,7 @@
 import { useLocal, useSync } from "@/context"
-import { Icon } from "@opencode-ai/ui"
+import { Icon, Tooltip } from "@opencode-ai/ui"
 import { Collapsible } from "@/ui"
-import type { Part, ToolPart } from "@opencode-ai/sdk"
+import type { AssistantMessage, Part, ToolPart } from "@opencode-ai/sdk"
 import { DateTime } from "luxon"
 import {
   createSignal,
@@ -21,6 +21,8 @@ import { Markdown } from "./markdown"
 import { Code } from "./code"
 import { createElementSize } from "@solid-primitives/resize-observer"
 import { createScrollPosition } from "@solid-primitives/scroll"
+import { ProgressCircle } from "./progress-circle"
+import { pipe, sumBy } from "remeda"
 
 function Part(props: ParentProps & ComponentProps<"div">) {
   const [local, others] = splitProps(props, ["class", "classList", "children"])
@@ -33,7 +35,7 @@ function Part(props: ParentProps & ComponentProps<"div">) {
       }}
       {...others}
     >
-      <p class="text-xs leading-4 text-left text-text-muted/60 font-medium">{local.children}</p>
+      <p class="text-12-medium text-left">{local.children}</p>
     </div>
   )
 }
@@ -45,8 +47,8 @@ function CollapsiblePart(props: { title: ParentProps["children"] } & ParentProps
         <Part>{props.title}</Part>
       </Collapsible.Trigger>
       <Collapsible.Content>
-        <p class="flex-auto py-1 text-xs min-w-0 text-pretty">
-          <span class="text-text-muted/60 break-words">{props.children}</span>
+        <p class="flex-auto min-w-0 text-pretty">
+          <span class="text-12-medium text-text-weak break-words">{props.children}</span>
         </p>
       </Collapsible.Content>
     </Collapsible>
@@ -66,7 +68,7 @@ function ReadToolPart(props: { part: ToolPart }) {
           const path = state().input["filePath"] as string
           return (
             <Part class="cursor-pointer" onClick={() => local.file.open(path)}>
-              <span class="text-text-muted">Read</span> {getFilename(path)}
+              <span class="">Read</span> {getFilename(path)}
             </Part>
           )
         }}
@@ -75,9 +77,9 @@ function ReadToolPart(props: { part: ToolPart }) {
         {(state) => (
           <div>
             <Part>
-              <span class="text-text-muted">Read</span> {getFilename(state().input["filePath"] as string)}
+              <span class="">Read</span> {getFilename(state().input["filePath"] as string)}
             </Part>
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
           </div>
         )}
       </Match>
@@ -95,10 +97,9 @@ function EditToolPart(props: { part: ToolPart }) {
       <Match when={props.part.state.status === "completed" && props.part.state}>
         {(state) => (
           <CollapsiblePart
-            defaultOpen
             title={
               <>
-                <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
+                <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
               </>
             }
           >
@@ -111,11 +112,11 @@ function EditToolPart(props: { part: ToolPart }) {
           <CollapsiblePart
             title={
               <>
-                <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
+                <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
               </>
             }
           >
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
           </CollapsiblePart>
         )}
       </Match>
@@ -135,7 +136,7 @@ function WriteToolPart(props: { part: ToolPart }) {
           <CollapsiblePart
             title={
               <>
-                <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
+                <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
               </>
             }
           >
@@ -147,9 +148,9 @@ function WriteToolPart(props: { part: ToolPart }) {
         {(state) => (
           <div>
             <Part>
-              <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
+              <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
             </Part>
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
           </div>
         )}
       </Match>
@@ -170,7 +171,7 @@ function BashToolPart(props: { part: ToolPart }) {
             defaultOpen
             title={
               <>
-                <span class="text-text-muted">Run command:</span> {state().input["command"]}
+                <span class="">Run command:</span> {state().input["command"]}
               </>
             }
           >
@@ -183,11 +184,11 @@ function BashToolPart(props: { part: ToolPart }) {
           <CollapsiblePart
             title={
               <>
-                <span class="text-text-muted">Shell</span> {state().input["command"]}
+                <span class="">Shell</span> {state().input["command"]}
               </>
             }
           >
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
           </CollapsiblePart>
         )}
       </Match>
@@ -210,7 +211,7 @@ function ToolPart(props: { part: ToolPart }) {
   // patch
   // task
   return (
-    <div class="min-w-0 flex-auto text-xs">
+    <div class="min-w-0 flex-auto text-12-medium">
       <Switch
         fallback={
           <span>
@@ -243,7 +244,32 @@ export default function SessionTimeline(props: { session: string; class?: string
   const size = createElementSize(root)
   const scroll = createScrollPosition(scrollElement)
 
-  onMount(() => sync.session.sync(props.session))
+  const valid = (part: Part) => {
+    if (!part) return false
+    switch (part.type) {
+      case "step-start":
+      case "step-finish":
+      case "file":
+      case "patch":
+        return false
+      case "text":
+        return !part.synthetic
+      case "reasoning":
+        return part.text.trim()
+      case "tool":
+        switch (part.tool) {
+          case "todoread":
+          case "todowrite":
+          case "list":
+          case "grep":
+            return false
+        }
+        return true
+      default:
+        return true
+    }
+  }
+
   const session = createMemo(() => sync.session.get(props.session))
   const messages = createMemo(() => sync.data.message[props.session] ?? [])
   const working = createMemo(() => {
@@ -253,6 +279,45 @@ export default function SessionTimeline(props: { session: string; class?: string
     return !last.time.completed
   })
 
+  const cost = createMemo(() => {
+    const total = pipe(
+      messages(),
+      sumBy((x) => (x.role === "assistant" ? x.cost : 0)),
+    )
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(total)
+  })
+
+  const last = createMemo(() => {
+    return messages().findLast((x) => x.role === "assistant") as AssistantMessage
+  })
+
+  const model = createMemo(() => {
+    if (!last()) return
+    const model = sync.data.provider.find((x) => x.id === last().providerID)?.models[last().modelID]
+    return model
+  })
+
+  const tokens = createMemo(() => {
+    if (!last()) return
+    const tokens = last().tokens
+    const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
+    return new Intl.NumberFormat("en-US", {
+      notation: "compact",
+      compactDisplay: "short",
+    }).format(total)
+  })
+
+  const context = createMemo(() => {
+    if (!last()) return
+    if (!model()?.limit.context) return 0
+    const tokens = last().tokens
+    const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
+    return Math.round((total / model()!.limit.context) * 100)
+  })
+
   const getScrollParent = (el: HTMLElement | null): HTMLElement | undefined => {
     let p = el?.parentElement
     while (p && p !== document.body) {
@@ -294,23 +359,6 @@ export default function SessionTimeline(props: { session: string; class?: string
     lastScrollY = scroll.y
   })
 
-  const valid = (part: Part) => {
-    if (!part) return false
-    switch (part.type) {
-      case "step-start":
-      case "step-finish":
-      case "file":
-      case "patch":
-        return false
-      case "text":
-        return !part.synthetic
-      case "reasoning":
-        return part.text.trim()
-      default:
-        return true
-    }
-  }
-
   const duration = (part: Part) => {
     switch (part.type) {
       default:
@@ -334,57 +382,66 @@ export default function SessionTimeline(props: { session: string; class?: string
     <div
       ref={setRoot}
       classList={{
-        "p-4 select-text flex flex-col gap-y-1": true,
+        "select-text flex flex-col text-text-weak": true,
         [props.class ?? ""]: !!props.class,
       }}
     >
-      <ul role="list" class="flex flex-col gap-1">
+      <div class="py-1.5 px-10 flex justify-end items-center self-stretch">
+        <div class="flex items-center gap-6">
+          <Tooltip value={`${tokens()} Tokens`} class="flex items-center gap-1.5">
+            <Show when={context()}>
+              <ProgressCircle percentage={context()!} />
+            </Show>
+            <div class="text-14-regular text-text-weak text-right">{context()}%</div>
+          </Tooltip>
+          <div class="text-14-regular text-text-strong text-right">{cost()}</div>
+        </div>
+      </div>
+      <ul role="list" class="flex flex-col gap-6 items-start self-stretch px-10 pt-2 pb-6">
         <For each={messages()}>
           {(message) => (
-            <For each={sync.data.part[message.id]?.filter(valid)}>
-              {(part) => (
-                <li class="group/li">
-                  <Switch fallback={<div class="flex-auto min-w-0 text-xs mt-1 text-left">{part.type}</div>}>
-                    <Match when={part.type === "text" && part}>
-                      {(part) => (
-                        <Switch>
-                          <Match when={message.role === "user"}>
-                            <div class="w-full flex flex-col items-end justify-stretch gap-y-1.5 min-w-0 mt-5 group-first/li:mt-0">
-                              <p class="w-full rounded-md p-3 ring-1 ring-text/15 ring-inset text-xs bg-background-panel">
-                                <span class="font-medium text-text whitespace-pre-wrap break-words">{part().text}</span>
-                              </p>
-                              <p class="text-xs text-text-muted">
-                                {DateTime.fromMillis(message.time.created).toRelative()} ·{" "}
-                                {sync.data.config.username ?? "user"}
-                              </p>
-                            </div>
-                          </Match>
-                          <Match when={message.role === "assistant"}>
-                            <Markdown text={sync.sanitize(part().text)} class="text-text mt-1" />
-                          </Match>
-                        </Switch>
-                      )}
-                    </Match>
-                    <Match when={part.type === "reasoning" && part}>
-                      {(part) => (
-                        <CollapsiblePart
-                          title={
-                            <Switch fallback={<span class="text-text-muted">Thinking</span>}>
-                              <Match when={part().time.end}>
-                                <span class="text-text-muted">Thought</span> for {duration(part())}s
-                              </Match>
-                            </Switch>
-                          }
-                        >
-                          <Markdown text={part().text} />
-                        </CollapsiblePart>
-                      )}
-                    </Match>
-                    <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
-                  </Switch>
-                </li>
-              )}
-            </For>
+            <div class="flex flex-col gap-1 justify-center items-start self-stretch">
+              <For each={sync.data.part[message.id]?.filter(valid)}>
+                {(part) => (
+                  <li class="group/li">
+                    <Switch fallback={<div class="">{part.type}</div>}>
+                      <Match when={part.type === "text" && part}>
+                        {(part) => (
+                          <Switch>
+                            <Match when={message.role === "user"}>
+                              <div class="w-fit flex items-center px-3 py-1 rounded-md bg-surface-weak">
+                                <span class="text-14-regular text-text-strong whitespace-pre-wrap break-words">
+                                  {part().text}
+                                </span>
+                              </div>
+                            </Match>
+                            <Match when={message.role === "assistant"}>
+                              <Markdown text={sync.sanitize(part().text)} />
+                            </Match>
+                          </Switch>
+                        )}
+                      </Match>
+                      <Match when={part.type === "reasoning" && part}>
+                        {(part) => (
+                          <CollapsiblePart
+                            title={
+                              <Switch fallback={<span class="text-text-weak">Thinking</span>}>
+                                <Match when={part().time.end}>
+                                  <span class="text-12-medium text-text-weak">Thought</span> for {duration(part())}s
+                                </Match>
+                              </Switch>
+                            }
+                          >
+                            <Markdown text={part().text} />
+                          </CollapsiblePart>
+                        )}
+                      </Match>
+                      <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
+                    </Switch>
+                  </li>
+                )}
+              </For>
+            </div>
           )}
         </For>
       </ul>

packages/desktop/src/context/sync.tsx

@@ -1,4 +1,4 @@
-import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode } from "@opencode-ai/sdk"
+import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode, Project } from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { createContext, createMemo, Show, useContext, type ParentProps } from "solid-js"
 import { useSDK, useEvent } from "@/context"
@@ -9,6 +9,7 @@ function init() {
     ready: boolean
     provider: Provider[]
     agent: Agent[]
+    project: Project
     config: Config
     path: Path
     session: Session[]
@@ -21,6 +22,7 @@ function init() {
     node: FileNode[]
     changes: File[]
   }>({
+    project: { id: "", worktree: "", time: { created: 0, initialized: 0 } },
     config: {},
     path: { state: "", config: "", worktree: "", directory: "" },
     ready: false,
@@ -96,6 +98,7 @@ function init() {
   const sdk = useSDK()
 
   const load = {
+    project: () => sdk.project.current().then((x) => setStore("project", x.data!)),
     provider: () => sdk.config.providers().then((x) => setStore("provider", x.data!.providers)),
     path: () => sdk.path.get().then((x) => setStore("path", x.data!)),
     agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),

packages/desktop/src/index.css

@@ -1 +1 @@
-@import "@opencode-ai/css/tailwind.css";
+@import "@opencode-ai/ui/styles/tailwind";

packages/desktop/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { Icon, Tooltip } from "@opencode-ai/ui"
+import { Button, Icon, List, Tooltip } from "@opencode-ai/ui"
 import { FileIcon, IconButton } from "@/ui"
 import FileTree from "@/components/file-tree"
 import EditorPane from "@/components/editor-pane"
@@ -6,12 +6,12 @@ import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
 import { SelectDialog } from "@/components/select-dialog"
 import { useSync, useSDK, useLocal } from "@/context"
 import type { LocalFile, TextSelection } from "@/context/local"
-import SessionList from "@/components/session-list"
 import SessionTimeline from "@/components/session-timeline"
-import PromptForm, { type PromptContentPart, type PromptSubmitValue } from "@/components/prompt-form"
+import { type PromptContentPart, type PromptSubmitValue } from "@/components/prompt-form"
 import { createStore } from "solid-js/store"
 import { getDirectory, getFilename } from "@/utils"
 import { PromptInput } from "@/components/prompt-input"
+import { DateTime } from "luxon"
 
 export default function Page() {
   const local = useLocal()
@@ -225,14 +225,51 @@ export default function Page() {
   )
 
   return (
-    <div class="relative h-screen flex flex-col bg-background-weak">
-      <header class="hidden h-12 shrink-0 bg-background-base border-b border-border-weak-base"></header>
+    <div class="relative h-screen flex flex-col">
+      <header class="hidden h-12 shrink-0 bg-background-strong border-b border-border-weak-base"></header>
       <main class="h-[calc(100vh-0rem)] flex">
-        <div class="shrink-0 w-70">
-          <SessionList />
+        <div class="shrink-0 w-70 p-1.5 bg-background-weak border-r border-border-weak-base flex flex-col items-start gap-1.5">
+          <div class="flex flex-col items-start self-stretch px-3 py-1">
+            <span class="text-12-medium overflow-hidden text-ellipsis">{sync.data.path.directory}</span>
+          </div>
+          <div class="flex flex-col items-start gap-4 self-stretch flex-1">
+            <div class="px-3 py-1.5 w-full">
+              <Button class="w-full" size="large">
+                New Session
+              </Button>
+            </div>
+            <List
+              data={sync.data.session}
+              key={(x) => x.id}
+              onSelect={(s) => local.session.setActive(s?.id)}
+              onHover={(s) => (!!s ? sync.session.sync(s?.id) : undefined)}
+            >
+              {(session) => (
+                <Tooltip placement="right" value={session.title}>
+                  <div>
+                    <div class="flex items-center self-stretch gap-6">
+                      <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
+                        {session.title}
+                      </span>
+                      <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
+                        {DateTime.fromMillis(session.time.updated).toRelative()}
+                      </span>
+                    </div>
+                    <div class="flex justify-between items-center self-stretch">
+                      <span class="text-12-regular text-text-weak">2 files changed</span>
+                      <div class="flex gap-2 justify-end items-center">
+                        <span class="text-12-mono text-right text-text-diff-add-base">+43</span>
+                        <span class="text-12-mono text-right text-text-diff-delete-base">-2</span>
+                      </div>
+                    </div>
+                  </div>
+                </Tooltip>
+              )}
+            </List>
+          </div>
         </div>
-        <div class="relative grid grid-cols-2">
-          <div class="min-w-0 overflow-y-auto no-scrollbar flex justify-center">
+        <div class="relative grid grid-cols-2 bg-background-base">
+          <div class="pt-1.5 min-w-0 overflow-y-auto no-scrollbar flex justify-center">
             <Show when={local.session.active()}>
               {(activeSession) => <SessionTimeline session={activeSession().id} class="w-full" />}
             </Show>

packages/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/function",
-  "version": "0.15.7",
+  "version": "0.15.8",
   "$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.7",
+  "version": "0.15.8",
   "name": "opencode",
   "type": "module",
   "private": true,

packages/opencode/src/cli/error.ts

@@ -10,8 +10,9 @@ export function FormatError(input: unknown) {
       `Config file at ${input.data.path} is not valid JSON(C)` + (input.data.message ? `: ${input.data.message}` : "")
     )
   }
-  if (Config.DirectoryError.isInstance(input))
-    return `Directory "${input.data.dir}" in ${input.data.path} is not valid. Did you mean "${input.data.suggestion}"?`
+  if (Config.ConfigDirectoryTypoError.isInstance(input)) {
+    return `Directory "${input.data.dir}" in ${input.data.path} is not valid. Use "${input.data.suggestion}" instead. This is a common typo.`
+  }
   if (Config.InvalidError.isInstance(input))
     return [
       `Config file at ${input.data.path} is invalid` + (input.data.message ? `: ${input.data.message}` : ""),

packages/opencode/src/config/config.ts

@@ -129,7 +129,7 @@ export namespace Config {
       }),
     )
     for (const item of invalid) {
-      throw new DirectoryError({
+      throw new ConfigDirectoryTypoError({
         path: dir,
         dir: item,
         suggestion: item.substring(0, item.length - 1),
@@ -721,8 +721,8 @@ export namespace Config {
     }),
   )
 
-  export const DirectoryError = NamedError.create(
-    "ConfigDirectoryError",
+  export const ConfigDirectoryTypoError = NamedError.create(
+    "ConfigDirectoryTypoError",
     z.object({
       path: z.string(),
       dir: z.string(),

packages/opencode/src/provider/provider.ts

@@ -121,8 +121,11 @@ export namespace Provider {
             }
             case "ap": {
               const isAustraliaRegion = ["ap-southeast-2", "ap-southeast-4"].includes(region)
-              if (isAustraliaRegion && modelID.startsWith("anthropic.claude-sonnet-4-5")) {
-                modelID = `au.${modelID}`
+              if (isAustraliaRegion && ["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),
@@ -270,31 +273,31 @@ export namespace Provider {
           cost:
             !model.cost && !existing?.cost
               ? {
-                  input: 0,
-                  output: 0,
-                  cache_read: 0,
-                  cache_write: 0,
-                }
+                input: 0,
+                output: 0,
+                cache_read: 0,
+                cache_write: 0,
+              }
               : {
-                  cache_read: 0,
-                  cache_write: 0,
-                  ...existing?.cost,
-                  ...model.cost,
-                },
+                cache_read: 0,
+                cache_write: 0,
+                ...existing?.cost,
+                ...model.cost,
+              },
           options: {
             ...existing?.options,
             ...model.options,
           },
           limit: model.limit ??
             existing?.limit ?? {
-              context: 0,
-              output: 0,
-            },
+            context: 0,
+            output: 0,
+          },
           modalities: model.modalities ??
             existing?.modalities ?? {
-              input: ["text"],
-              output: ["text"],
-            },
+            input: ["text"],
+            output: ["text"],
+          },
           provider: model.provider ?? existing?.provider,
         }
         if (model.id && model.id !== modelID) {

packages/opencode/src/server/server.ts

@@ -59,9 +59,7 @@ const ERRORS = {
     description: "Not found",
     content: {
       "application/json": {
-        schema: resolver(
-          Storage.NotFoundError.Schema
-        )
+        schema: resolver(Storage.NotFoundError.Schema),
       },
     },
   },
@@ -87,12 +85,9 @@ export namespace Server {
         })
         if (err instanceof NamedError) {
           let status: ContentfulStatusCode
-          if (err instanceof Storage.NotFoundError)
-            status = 404
-          else if (err instanceof Provider.ModelNotFoundError)
-            status = 400
-          else
-            status = 500
+          if (err instanceof Storage.NotFoundError) status = 404
+          else if (err instanceof Provider.ModelNotFoundError) status = 400
+          else status = 500
           return c.json(err.toObject(), { status })
         }
         const message = err instanceof Error && err.stack ? err.stack : err.toString()

packages/opencode/src/session/compaction.ts

@@ -1,4 +1,4 @@
-import { streamText, type ModelMessage } from "ai"
+import { streamText, type ModelMessage, LoadAPIKeyError } from "ai"
 import { Session } from "."
 import { Identifier } from "../id/id"
 import { Instance } from "../project/instance"
@@ -13,6 +13,8 @@ import { SessionPrompt } from "./prompt"
 import { Flag } from "../flag/flag"
 import { Token } from "../util/token"
 import { Log } from "../util/log"
+import { SessionLock } from "./lock"
+import { NamedError } from "../util/error"
 
 export namespace SessionCompaction {
   const log = Log.create({ service: "session.compaction" })
@@ -82,7 +84,11 @@ export namespace SessionCompaction {
     }
   }
 
-  export async function run(input: { sessionID: string; providerID: string; modelID: string }) {
+  export async function run(input: { sessionID: string; providerID: string; modelID: string; signal?: AbortSignal }) {
+    if (!input.signal) SessionLock.assertUnlocked(input.sessionID)
+    await using lock = input.signal === undefined ? SessionLock.acquire({ sessionID: input.sessionID }) : undefined
+    const signal = input.signal ?? lock!.signal
+
     await Session.update(input.sessionID, (draft) => {
       draft.time.compacting = Date.now()
     })
@@ -122,6 +128,7 @@ export namespace SessionCompaction {
         created: Date.now(),
       },
     })) as MessageV2.Assistant
+
     const part = (await Session.updatePart({
       type: "text",
       sessionID: input.sessionID,
@@ -133,13 +140,18 @@ export namespace SessionCompaction {
       },
     })) as MessageV2.TextPart
 
-    let summaryText = ""
     const stream = streamText({
       maxRetries: 10,
       model: model.language,
       providerOptions: {
         [model.npm === "@ai-sdk/openai" ? "openai" : model.providerID]: model.info.options,
       },
+      abortSignal: signal,
+      onError(error) {
+        log.error("stream error", {
+          error,
+        })
+      },
       messages: [
         ...system.map(
           (x): ModelMessage => ({
@@ -160,38 +172,88 @@ export namespace SessionCompaction {
       ],
     })
 
-    for await (const value of stream.fullStream) {
-      switch (value.type) {
-        case "text-delta":
-          summaryText += value.text
-          await Session.updatePart({
-            ...part,
-            text: summaryText,
-          })
-          break
-        case "text-end":
-          part.text = summaryText
-          await Session.updatePart({
-            ...part,
-          })
-          break
-        case "finish": {
-          const usage = Session.getUsage({ model: model.info, usage: value.totalUsage, metadata: undefined })
-          msg.cost += usage.cost
-          msg.tokens = usage.tokens
-          msg.summary = true
-          msg.time.completed = Date.now()
-          await Session.updateMessage(msg)
-          part.time!.end = Date.now()
-          await Session.updatePart(part)
-          break
+    try {
+      for await (const value of stream.fullStream) {
+        signal.throwIfAborted()
+        switch (value.type) {
+          case "text-delta":
+            part.text += value.text
+            if (value.providerMetadata) part.metadata = value.providerMetadata
+            if (part.text) await Session.updatePart(part)
+            continue
+          case "text-end": {
+            part.text = part.text.trimEnd()
+            part.time = {
+              start: Date.now(),
+              end: Date.now(),
+            }
+            if (value.providerMetadata) part.metadata = value.providerMetadata
+            await Session.updatePart(part)
+            continue
+          }
+          case "finish-step": {
+            const usage = Session.getUsage({
+              model: model.info,
+              usage: value.usage,
+              metadata: value.providerMetadata,
+            })
+            msg.cost += usage.cost
+            msg.tokens = usage.tokens
+            await Session.updateMessage(msg)
+            continue
+          }
+          case "error":
+            throw value.error
+          default:
+            continue
         }
       }
+    } catch (e) {
+      log.error("compaction error", {
+        error: e,
+      })
+      switch (true) {
+        case e instanceof DOMException && e.name === "AbortError":
+          msg.error = new MessageV2.AbortedError(
+            { message: e.message },
+            {
+              cause: e,
+            },
+          ).toObject()
+          break
+        case MessageV2.OutputLengthError.isInstance(e):
+          msg.error = e
+          break
+        case LoadAPIKeyError.isInstance(e):
+          msg.error = new MessageV2.AuthError(
+            {
+              providerID: model.providerID,
+              message: e.message,
+            },
+            { cause: e },
+          ).toObject()
+          break
+        case e instanceof Error:
+          msg.error = new NamedError.Unknown({ message: e.toString() }, { cause: e }).toObject()
+          break
+        default:
+          msg.error = new NamedError.Unknown({ message: JSON.stringify(e) }, { cause: e })
+      }
+      Bus.publish(Session.Event.Error, {
+        sessionID: input.sessionID,
+        error: msg.error,
+      })
     }
 
-    Bus.publish(Event.Compacted, {
-      sessionID: input.sessionID,
-    })
+    msg.time.completed = Date.now()
+
+    if (!msg.error || MessageV2.AbortedError.isInstance(msg.error)) {
+      msg.summary = true
+      Bus.publish(Event.Compacted, {
+        sessionID: input.sessionID,
+      })
+    }
+    await Session.updateMessage(msg)
 
     return {
       info: msg,

packages/opencode/src/session/prompt.ts

@@ -211,6 +211,7 @@ export namespace SessionPrompt {
           sessionID: input.sessionID,
           model: model.info,
           providerID: model.providerID,
+          signal: abort.signal,
         }),
         (messages) => insertReminders({ messages, agent }),
       )
@@ -339,7 +340,12 @@ export namespace SessionPrompt {
     }
   }
 
-  async function getMessages(input: { sessionID: string; model: ModelsDev.Model; providerID: string }) {
+  async function getMessages(input: {
+    sessionID: string
+    model: ModelsDev.Model
+    providerID: string
+    signal: AbortSignal
+  }) {
     let msgs = await Session.messages(input.sessionID).then(MessageV2.filterSummarized)
     const lastAssistant = msgs.findLast((msg) => msg.info.role === "assistant")
     if (
@@ -353,6 +359,7 @@ export namespace SessionPrompt {
         sessionID: input.sessionID,
         providerID: input.providerID,
         modelID: input.model.id,
+        signal: input.signal,
       })
       const resumeMsgID = Identifier.ascending("message")
       const resumeMsg = {

packages/plugin/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "0.15.7",
+  "version": "0.15.8",
   "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.7",
+  "version": "0.15.8",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",

packages/slack/package.json

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

packages/ui/package.json

@@ -1,24 +1,33 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.15.7",
+  "version": "0.15.8",
   "type": "module",
   "exports": {
     ".": "./src/components/index.ts",
-    "./*": "./src/components/*"
+    "./*": "./src/components/*.tsx",
+    "./styles": "./src/styles/index.css",
+    "./styles/tailwind": "./src/styles/tailwind/index.css",
+    "./fonts/*": "./src/assets/fonts/*"
   },
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "generate:tailwind": "bun run script/tailwind.ts"
   },
   "devDependencies": {
+    "@types/bun": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
-    "vite-plugin-solid": "catalog:"
+    "vite-plugin-solid": "catalog:",
+    "tailwindcss": "catalog:",
+    "@tailwindcss/vite": "catalog:"
   },
   "dependencies": {
-    "remeda": "catalog:",
-    "solid-js": "catalog:",
-    "@solidjs/meta": "catalog:",
     "@kobalte/core": "catalog:",
-    "@opencode-ai/css": "workspace:*"
+    "@solidjs/meta": "catalog:",
+    "remeda": "catalog:",
+    "luxon": "catalog:",
+    "virtua": "catalog:",
+    "solid-js": "catalog:",
+    "solid-list": "catalog:"
   }
 }

packages/ui/script/tailwind.ts

@@ -1,10 +1,5 @@
 #!/usr/bin/env bun
 
-// read lines from colors.txt
-// parse each line into a color name and hex value
-// create a css variable for each color
-// NOTE: only use Bun file APIs here
-
 const colors = await Bun.file(import.meta.dir + "/colors.txt").text()
 
 const variables = []
@@ -25,7 +20,4 @@ const output = `
 }
 `
 
-// write to src/tailwind-colors.css
-Bun.file(import.meta.dir + "/../src/tailwind-colors.css").write(output.trim())
-
-// Bun.file(import.meta.dir + "../src/tailwind-colors.css").write(output.trim())
+await Bun.file(import.meta.dir + "/../src/styles/tailwind/colors.css").write(output.trim())

packages/ui/src/components/button.css

@@ -5,13 +5,9 @@
   justify-content: center;
   border-style: solid;
   border-width: 1px;
-  border-radius: var(--radius-md);
-  font-size: var(--text-base);
-  line-height: var(--text-base--line-height);
-  font-weight: var(--font-weight-normal);
+  border-radius: 6px;
   text-decoration: none;
   user-select: none;
-  gap: calc(var(--spacing) * 0.5);
 
   &[data-variant="primary"] {
     border-color: var(--border-base);
@@ -33,10 +29,16 @@
   }
 
   &[data-variant="secondary"] {
-    border-color: var(--border-base);
-    background-color: var(--surface-base);
+    border-color: var(--border-weak-base);
+    background-color: var(--button-secondary-base);
     color: var(--text-strong);
 
+    /* shadow-xs */
+    box-shadow:
+      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);
+
     &:hover:not(:disabled) {
       border-color: var(--border-hover);
       background-color: var(--surface-hover);
@@ -70,15 +72,25 @@
   }
 
   &[data-size="normal"] {
-    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3);
-    font-size: var(--text-xs);
-    line-height: var(--text-sm--line-height);
+    padding: 0 6px 0 6px;
+
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-large);
+    gap: calc(var(--spacing) * 0.5);
   }
 
   &[data-size="large"] {
-    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
+    height: 32px;
+    padding: 0 8px 0 6px;
+    gap: 8px;
+
+    /* text-12-medium */
+    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); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
   }
 
   &:disabled {

packages/ui/src/components/fonts.tsx

@@ -1,20 +1,20 @@
 import { Style, Link } from "@solidjs/meta"
-import geist from "@opencode-ai/css/fonts/geist.woff2"
-import geistMono from "@opencode-ai/css/fonts/geist-mono.woff2"
+import geist from "../assets/fonts/geist.woff2"
+import geistMono from "../assets/fonts/geist-mono.woff2"
 
 export const Fonts = () => {
   return (
     <>
       <Style>{`
         @font-face {
-          font-family: "geist";
+          font-family: "Geist";
           src: url("${geist}") format("woff2-variations");
           font-display: swap;
           font-style: normal;
           font-weight: 100 900;
         }
         @font-face {
-          font-family: "geist-fallback";
+          font-family: "Geist Fallback";
           src: local("Arial");
           size-adjust: 100%;
           ascent-override: 97%;
@@ -22,14 +22,14 @@ export const Fonts = () => {
           line-gap-override: 1%;
         }
         @font-face {
-          font-family: "geist-mono";
+          font-family: "Geist Mono";
           src: url("${geistMono}") format("woff2-variations");
           font-display: swap;
           font-style: normal;
           font-weight: 100 900;
         }
         @font-face {
-          font-family: "geist-mono-fallback";
+          font-family: "Geist Mono Fallback";
           src: local("Courier New");
           size-adjust: 100%;
           ascent-override: 97%;

packages/ui/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./button"
 export * from "./icon"
 export * from "./fonts"
+export * from "./list"
 export * from "./select"
 export * from "./tabs"
 export * from "./tooltip"

packages/ui/src/components/list.css

@@ -0,0 +1,30 @@
+[data-component="list"] {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  /* Hide scrollbar */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  [data-slot="item"] {
+    cursor: pointer;
+    width: 100%;
+    padding: 4px 12px;
+    text-align: left;
+
+    border-radius: 6px;
+    transition: background-color 0.2s ease-in-out;
+
+    &[data-active="true"] {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+}

packages/ui/src/components/list.tsx

@@ -0,0 +1,78 @@
+import { ComponentProps, createEffect, createSignal, type JSX } from "solid-js"
+import { VirtualizerHandle, VList } from "virtua/solid"
+import { createList } from "solid-list"
+import { createStore } from "solid-js/store"
+
+export interface ListProps<T> {
+  data: T[]
+  children: (x: T) => JSX.Element
+  key: (x: T) => string
+  current?: T
+  onSelect?: (value: T | undefined) => void
+  onHover?: (value: T | undefined) => void
+  class?: ComponentProps<"div">["class"]
+}
+
+export function List<T>(props: ListProps<T>) {
+  const [virtualizer, setVirtualizer] = createSignal<VirtualizerHandle | undefined>(undefined)
+  const [store, setStore] = createStore({
+    mouseActive: false,
+  })
+  const list = createList({
+    items: () => props.data.map(props.key),
+    initialActive: props.current ? props.key(props.current) : undefined,
+    loop: true,
+  })
+  // const resetSelection = () => {
+  //   if (props.data.length === 0) return
+  //   list.setActive(props.key(props.data[0]))
+  // }
+  const handleSelect = (item: T) => {
+    props.onSelect?.(item)
+  }
+
+  const handleKey = (e: KeyboardEvent) => {
+    setStore("mouseActive", false)
+
+    if (e.key === "Enter") {
+      e.preventDefault()
+      const selected = props.data.find((x) => props.key(x) === list.active())
+      if (selected) handleSelect(selected)
+    } else {
+      list.onKeyDown(e)
+    }
+  }
+
+  createEffect(() => {
+    if (store.mouseActive || props.data.length === 0) return
+    const index = props.data.findIndex((x) => props.key(x) === list.active())
+    props.onHover?.(props.data[index])
+    if (index === 0) {
+      virtualizer()?.scrollTo(0)
+      return
+    }
+    // virtualizer()?.scrollTo(list.active())
+    // const element = virtualizer()?.querySelector(`[data-key="${list.active()}"]`)
+    // element?.scrollIntoView({ block: "nearest", behavior: "smooth" })
+  })
+
+  return (
+    <VList data-component="list" ref={setVirtualizer} data={props.data} onKeyDown={handleKey} class={props.class}>
+      {(item) => (
+        <button
+          data-slot="item"
+          data-key={props.key(item)}
+          data-active={props.key(item) === list.active()}
+          onClick={() => handleSelect(item)}
+          onMouseMove={(e) => {
+            e.currentTarget.focus()
+            setStore("mouseActive", true)
+            list.setActive(props.key(item))
+          }}
+        >
+          {props.children(item)}
+        </button>
+      )}
+    </VList>
+  )
+}

packages/ui/src/components/select.css

@@ -1,5 +1,7 @@
 [data-component="select"] {
   [data-slot="trigger"] {
+    padding: 0 4px 0 8px;
+
     [data-slot="value"] {
       overflow: hidden;
       text-overflow: ellipsis;

packages/ui/src/components/style.css

@@ -1,2 +0,0 @@
-/* re-exporting for convenience */
-@import "@opencode-ai/css";

packages/ui/src/components/tabs.css

@@ -7,7 +7,7 @@
   border-style: solid;
   border-radius: var(--radius-sm);
   border-color: var(--border-weak-base);
-  background-color: var(--background-weaker);
+  background-color: var(--background-stronger);
   overflow: clip;
 
   & [data-slot="list"] {
@@ -31,7 +31,7 @@
       flex-grow: 1;
       height: 100%;
       border-bottom: 1px solid var(--border-weak-base);
-      background-color: var(--background-weak);
+      background-color: var(--background-base);
       border-top-right-radius: var(--radius-sm);
     }
 

packages/ui/src/components/tooltip.css

@@ -6,18 +6,24 @@
 [data-component="tooltip"] {
   z-index: 1000;
   max-width: 320px;
-  border-radius: var(--radius-md);
-  background-color: var(--surface-base);
-  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
-  font-size: var(--text-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-base);
+  border-radius: 12px;
+  background-color: var(--surface-float-base);
+  color: var(--white);
+  padding: 2px 12px 2px 12px;
   box-shadow: var(--shadow-md);
   pointer-events: none !important;
   transition: all 150ms ease-out;
   transform: translate3d(0, 0, 0);
   transform-origin: var(--kb-tooltip-content-transform-origin);
 
+  /* text-14-regular */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+
   &[data-expanded] {
     opacity: 1;
     transform: translate3d(0, 0, 0);

packages/ui/src/components/tooltip.tsx

@@ -30,13 +30,13 @@ export function Tooltip(props: TooltipProps) {
 
   return (
     <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
-      <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger">
+      <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
         {c()}
       </KobalteTooltip.Trigger>
       <KobalteTooltip.Portal>
-        <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement} class={local.class}>
+        <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement}>
           {typeof others.value === "function" ? others.value() : others.value}
-          <KobalteTooltip.Arrow data-slot="arrow" size={18} />
+          {/* <KobalteTooltip.Arrow data-slot="arrow" size={18} /> */}
         </KobalteTooltip.Content>
       </KobalteTooltip.Portal>
     </KobalteTooltip>

packages/ui/src/demo.tsx

@@ -1,8 +1,8 @@
 import type { Component } from "solid-js"
-import { Button, Select, Tabs, Tooltip, Fonts } from "./components"
+import { Button, Select, Tabs, Tooltip, Fonts, List } from "./components"
 import "./index.css"
 
-const App: Component = () => {
+const Demo: Component = () => {
   const Content = (props: { dark?: boolean }) => (
     <div class={`${props.dark ? "dark" : ""}`}>
       <h3>Buttons</h3>
@@ -111,6 +111,12 @@ const App: Component = () => {
           <Button variant="primary">Dynamic Tooltip</Button>
         </Tooltip>
       </section>
+      <h3>List</h3>
+      <section style={{ height: "300px" }}>
+        <List data={["Item 1", "Item 2", "Item 3"]} key={(x) => x}>
+          {(x) => <div>{x}</div>}
+        </List>
+      </section>
     </div>
   )
 
@@ -125,4 +131,4 @@ const App: Component = () => {
   )
 }
 
-export default App
+export default Demo

packages/ui/src/index.css

@@ -1,4 +1,4 @@
-@import "@opencode-ai/css";
+@import "./styles/index.css";
 
 :root {
   body {
@@ -9,14 +9,12 @@
   main {
     display: flex;
     flex-direction: row;
-    height: 100vh;
     overflow-x: hidden;
   }
   main > div {
     flex: 1;
     padding: 2rem;
     min-width: 0;
-    overflow-y: auto;
     overflow-x: hidden;
     display: flex;
     flex-direction: column;

packages/ui/src/index.tsx

@@ -2,7 +2,7 @@
 import { render } from "solid-js/web"
 import { MetaProvider } from "@solidjs/meta"
 
-import App from "./app"
+import Demo from "./demo"
 
 const root = document.getElementById("root")
 
@@ -15,7 +15,7 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 render(
   () => (
     <MetaProvider>
-      <App />
+      <Demo />
     </MetaProvider>
   ),
   root!,

packages/ui/src/styles/base.css

@@ -27,12 +27,12 @@
 
 html,
 :host {
-  line-height: 1.5; /* 1 */
+  line-height: var(--line-height-large); /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   tab-size: 4; /* 3 */
-  font-family: var(--font-sans); /* 4 */
-  font-feature-settings: var(--font-sans--font-feature-settings, normal); /* 5 */
-  font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
+  font-family: var(--font-family-sans); /* 4 */
+  font-feature-settings: var(--font-family-sans--font-feature-settings, normal); /* 5 */
+  font-variation-settings: var(--font-family-sans--font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
@@ -101,9 +101,9 @@ code,
 kbd,
 samp,
 pre {
-  font-family: var(--font-mono); /* 1 */
-  font-feature-settings: var(--font-mono--font-feature-settings, normal); /* 2 */
-  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 3 */
+  font-family: var(--font-family-mono); /* 1 */
+  font-feature-settings: var(--font-family-mono--font-feature-settings, normal); /* 2 */
+  font-variation-settings: var(--font-family-mono--font-variation-settings, normal); /* 3 */
   font-size: 1em; /* 4 */
 }
 

packages/ui/src/styles/index.css

@@ -0,0 +1,15 @@
+@layer theme, base, components, utilities;
+
+@import "./colors.css" layer(theme);
+@import "./theme.css" layer(theme);
+
+@import "./base.css" layer(base);
+
+@import "../components/button.css" layer(components);
+@import "../components/icon.css" layer(components);
+@import "../components/list.css" layer(components);
+@import "../components/select.css" layer(components);
+@import "../components/tabs.css" layer(components);
+@import "../components/tooltip.css" layer(components);
+
+@import "./utilities.css" layer(utilities);

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

@@ -217,4 +217,4 @@
   --color-markdown-image-text: var(--markdown-image-text);
   --color-markdown-code-block: var(--markdown-code-block);
   --color-border-color: var(--border-color);
-}
+}

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

@@ -0,0 +1,49 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "./utilities.css";
+
+@import "../index.css";
+
+@theme {
+  --*: initial;
+
+  --spacing: 0.25rem;
+  /* --spacing: var(--spacing); */
+
+  --font-sans: var(--font-family-sans);
+  --font-sans--font-feature-settings: var(--font-family-sans--font-feature-settings);
+  --font-mono: var(--font-family-mono);
+  --font-mono--font-feature-settings: var(--font-family-mono--font-feature-settings);
+
+  --text-sm: var(--font-size-small);
+  --text-base: var(--font-size-base);
+  --text-lg: var(--font-size-large);
+  --text-xl: var(--font-size-x-large);
+
+  --font-weight-regular: var(--font-weight-regular);
+  --font-weight-medium: var(--font-weight-medium);
+
+  --leading-lg: var(--line-height-large);
+  --leading-xl: var(--line-height-x-large);
+  --leading-2xl: var(--line-height-2x-large);
+
+  --tracking-normal: var(--letter-spacing-normal);
+  --tracking-tight: var(--letter-spacing-tight);
+  --tracking-tightest: var(--letter-spacing-tightest);
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  --shadow-xs: var(--shadow-xs);
+  --shadow-md: var(--shadow-md);
+  --shadow-xs-border-selected: var(--shadow-xs-border-selected);
+}
+
+@import "./colors.css";

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

@@ -0,0 +1,9 @@
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

packages/ui/src/styles/theme.css

@@ -1,27 +1,22 @@
 :root {
-  --font-sans:
-    geist, geist-fallback, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
-  --font-sans--font-feature-settings: "ss02" 1;
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono:
-    geist-mono, geist-mono-fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  --font-mono--font-feature-settings: "ss02" 1;
+  --font-family-sans: "Geist", "Geist Fallback";
+  --font-family-sans--font-feature-settings: "ss03" 1;
+  --font-family-mono: "Geist Mono", "Geist Mono Fallback";
+  --font-family-mono--font-feature-settings: "ss02" 1;
 
-  --size-12: 12;
-  --size-14: 14;
-  --size-16: 16;
-  --size-20: 20;
-  --weight-regular: 400;
-  --weight-medium: 500;
-  --line-height-lg: 20;
-  --line-height-xl: 24;
-  --line-height-2xl: 30;
+  --font-size-small: 12px;
+  --font-size-base: 14px;
+  --font-size-large: 16px;
+  --font-size-x-large: 20px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --line-height-large: 20px;
+  --line-height-x-large: 24px;
+  --line-height-2x-large: 30px;
   --letter-spacing-normal: 0;
   --letter-spacing-tight: -0.1599999964237213;
   --letter-spacing-tightest: -0.3199999928474426;
-  --paragraph-spacing-0: 0;
+  --paragraph-spacing-base: 0;
 
   --spacing: 0.25rem;
 
@@ -45,56 +40,6 @@
   --container-6xl: 72rem;
   --container-7xl: 80rem;
 
-  /* --text-xs: 0.75rem; */
-  /* --text-xs--line-height: calc(1 / 0.75); */
-  /* --text-sm: 0.875rem; */
-  /* --text-sm--line-height: calc(1.25 / 0.875); */
-  /* --text-base: 1rem; */
-  /* --text-base--line-height: calc(1.5 / 1); */
-  /* --text-lg: 1.125rem; */
-  /* --text-lg--line-height: calc(1.75 / 1.125); */
-  /* --text-xl: 1.25rem; */
-  /* --text-xl--line-height: calc(1.75 / 1.25); */
-  /* --text-2xl: 1.5rem; */
-  /* --text-2xl--line-height: calc(2 / 1.5); */
-  /* --text-3xl: 1.875rem; */
-  /* --text-3xl--line-height: calc(2.25 / 1.875); */
-  /* --text-4xl: 2.25rem; */
-  /* --text-4xl--line-height: calc(2.5 / 2.25); */
-  /* --text-5xl: 3rem; */
-  /* --text-5xl--line-height: 1; */
-  /* --text-6xl: 3.75rem; */
-  /* --text-6xl--line-height: 1; */
-  /* --text-7xl: 4.5rem; */
-  /* --text-7xl--line-height: 1; */
-  /* --text-8xl: 6rem; */
-  /* --text-8xl--line-height: 1; */
-  /* --text-9xl: 8rem; */
-  /* --text-9xl--line-height: 1; */
-
-  --font-weight-thin: 100;
-  --font-weight-extralight: 200;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-  --font-weight-black: 900;
-
-  /* --tracking-tighter: -0.05em; */
-  /* --tracking-tight: -0.025em; */
-  /* --tracking-normal: 0em; */
-  /* --tracking-wide: 0.025em; */
-  /* --tracking-wider: 0.05em; */
-  /* --tracking-widest: 0.1em; */
-  /**/
-  /* --leading-tight: 1.25; */
-  /* --leading-snug: 1.375; */
-  /* --leading-normal: 1.5; */
-  /* --leading-relaxed: 1.625; */
-  /* --leading-loose: 2; */
-
   --radius-xs: 0.125rem;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
@@ -104,35 +49,14 @@
   --radius-3xl: 1.5rem;
   --radius-4xl: 2rem;
 
+  --shadow-xs:
+    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-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:
     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-2xs: 0 1px rgb(0 0 0 / 0.05); */
-  /* --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); */
-  /* --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); */
-  /* --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */
-  /* --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); */
-  /* --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); */
-  /* --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); */
-
-  /* --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); */
-  /* --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); */
-  /* --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); */
-  /**/
-  /* --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); */
-  /* --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); */
-  /* --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); */
-  /* --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); */
-  /* --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); */
-  /* --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); */
-  /**/
-  /* --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); */
-  /* --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); */
-  /* --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); */
-  /* --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); */
-  /* --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); */
 }
 
 :root {
@@ -142,8 +66,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);
   --base2: var(--smoke-light-alpha-2);
   --base3: var(--smoke-light-alpha-2);
   --surface-inset-base: var(--smoke-light-alpha-3);
@@ -180,9 +104,9 @@
   --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-3);
   --surface-diff-unchanged-base: #ffffff00;
-  --surface-diff-hidden-base: var(--blue-light-3);
   --surface-diff-hidden-weak: var(--blue-light-2);
   --surface-diff-hidden-weaker: var(--blue-light-1);
   --surface-diff-hidden-strong: var(--blue-light-5);
@@ -209,6 +133,7 @@
   --text-strong: var(--smoke-light-12);
   --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-warning-base: var(--smoke-dark-alpha-11);
   --text-on-info-base: var(--smoke-dark-alpha-11);
@@ -226,6 +151,7 @@
   --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: var(--smoke-light-2);
   --border-base: var(--smoke-light-alpha-7);
   --border-hover: var(--smoke-light-alpha-8);
   --border-active: var(--smoke-light-alpha-9);
@@ -241,7 +167,7 @@
   --border-strong-focus: var(--smoke-light-alpha-7);
   --border-weak-hover: var(--smoke-light-alpha-6);
   --border-weak-active: var(--smoke-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-6);
+  --border-weak-selected: var(--cobalt-light-alpha-4);
   --border-weak-disabled: var(--smoke-light-alpha-6);
   --border-weak-focus: var(--smoke-light-alpha-7);
   --border-interactive-base: var(--cobalt-light-7);
@@ -298,9 +224,7 @@
   --icon-on-brand-base: var(--smoke-light-alpha-11);
   --icon-on-brand-hover: var(--smoke-light-alpha-12);
   --icon-on-brand-selected: var(--smoke-light-alpha-12);
-  --icon-on-interactive-base: var(--smoke-light-alpha-9);
-  --icon-on-interactive-hover: var(--smoke-light-alpha-10);
-  --icon-on-interactive-selected: var(--smoke-light-alpha-11);
+  --icon-on-interactive-base: var(--smoke-light-1);
   --icon-agent-plan-base: var(--purple-light-9);
   --icon-agent-docs-base: var(--amber-light-9);
   --icon-agent-ask-base: var(--cyan-light-9);
@@ -323,45 +247,45 @@
   --icon-diff-delete-base: var(--ember-light-9);
   --icon-diff-delete-hover: var(--ember-light-10);
   --icon-diff-delete-active: var(--ember-light-11);
-  --syntax-comment: #ffffff;
-  --syntax-string: #ffffff;
-  --syntax-keyword: #ffffff;
-  --syntax-function: #ffffff;
-  --syntax-number: #ffffff;
-  --syntax-operator: #ffffff;
-  --syntax-variable: #ffffff;
-  --syntax-type: #ffffff;
-  --syntax-constant: #ffffff;
-  --syntax-punctuation: #ffffff;
-  --syntax-success: #ffffff;
-  --syntax-warning: #ffffff;
-  --syntax-critical: #ffffff;
-  --syntax-info: #ffffff;
-  --markdown-heading: #ffffff;
-  --markdown-text: #ffffff;
-  --markdown-link: #ffffff;
-  --markdown-link-text: #ffffff;
-  --markdown-code: #ffffff;
-  --markdown-block-quote: #ffffff;
-  --markdown-emph: #ffffff;
-  --markdown-strong: #ffffff;
-  --markdown-horizontal-rule: #ffffff;
-  --markdown-list-item: #ffffff;
-  --markdown-list-enumeration: #ffffff;
-  --markdown-image: #ffffff;
-  --markdown-image-text: #ffffff;
-  --markdown-code-block: #ffffff;
+  --syntax-comment: #8a8a8a;
+  --syntax-string: #d68c27;
+  --syntax-keyword: #3b7dd8;
+  --syntax-function: #d1383d;
+  --syntax-number: #3d9a57;
+  --syntax-operator: #d68c27;
+  --syntax-variable: #b0851f;
+  --syntax-type: #318795;
+  --syntax-constant: #953170;
+  --syntax-punctuation: #1a1a1a;
+  --syntax-success: var(--apple-dark-10);
+  --syntax-warning: var(--amber-light-10);
+  --syntax-critical: var(--ember-dark-9);
+  --syntax-info: var(--lilac-dark-11);
+  --markdown-heading: #d68c27;
+  --markdown-text: #1a1a1a;
+  --markdown-link: #3b7dd8;
+  --markdown-link-text: #318795;
+  --markdown-code: #3d9a57;
+  --markdown-block-quote: #b0851f;
+  --markdown-emph: #b0851f;
+  --markdown-strong: #d68c27;
+  --markdown-horizontal-rule: #8a8a8a;
+  --markdown-list-item: #3b7dd8;
+  --markdown-list-enumeration: #318795;
+  --markdown-image: #3b7dd8;
+  --markdown-image-text: #318795;
+  --markdown-code-block: #1a1a1a;
   --border-color: #ffffff;
 
-  .dark {
+  @media (prefers-color-scheme: dark) {
     /* OC-1-Dark */
     color-scheme: dark;
     --background-base: var(--smoke-dark-1);
     --background-weak: #201d1d;
     --background-strong: #151313;
     --background-stronger: #201c1c;
-    --base: var(--smoke-dark-alpha-2);
     --surface-base: var(--smoke-dark-alpha-3);
+    --base: var(--smoke-dark-alpha-2);
     --base2: var(--smoke-dark-alpha-2);
     --base3: var(--smoke-dark-alpha-2);
     --surface-inset-base: #0e0b0b7f;
@@ -372,14 +296,14 @@
     --surface-float-base: var(--smoke-dark-1);
     --surface-float-base-hover: var(--smoke-dark-2);
     --surface-raised-base-hover: var(--smoke-dark-alpha-4);
-    --surface-raised-strong: var(--smoke-dark-alpha-5);
+    --surface-raised-strong: var(--smoke-dark-alpha-4);
     --surface-raised-strong-hover: var(--smoke-dark-alpha-6);
     --surface-raised-stronger: var(--smoke-dark-alpha-6);
     --surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
     --surface-weak: var(--smoke-dark-alpha-5);
     --surface-weaker: var(--smoke-dark-alpha-6);
     --surface-strong: var(--smoke-dark-alpha-7);
-    --surface-raised-stronger-non-alpha: var(--smoke-dark-5);
+    --surface-raised-stronger-non-alpha: var(--smoke-dark-4);
     --surface-brand-base: var(--yuzu-light-9);
     --surface-brand-hover: var(--yuzu-light-10);
     --surface-interactive-base: var(--cobalt-light-3);
@@ -398,9 +322,9 @@
     --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-dark-2);
     --surface-diff-skip-base: var(--smoke-dark-alpha-2);
     --surface-diff-unchanged-base: var(--smoke-dark-1);
-    --surface-diff-hidden-base: var(--blue-dark-2);
     --surface-diff-hidden-weak: var(--blue-dark-1);
     --surface-diff-hidden-weaker: var(--blue-dark-3);
     --surface-diff-hidden-strong: var(--blue-dark-5);
@@ -427,6 +351,7 @@
     --text-strong: var(--smoke-dark-alpha-12);
     --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-warning-base: var(--smoke-dark-alpha-11);
     --text-on-info-base: var(--smoke-dark-alpha-11);
@@ -444,6 +369,7 @@
     --text-on-brand-weaker: var(--smoke-dark-alpha-8);
     --text-on-brand-strong: var(--smoke-dark-alpha-12);
     --button-secondary-base: var(--smoke-dark-6);
+    --button-secondary-base-hover: var(--smoke-dark-5);
     --border-base: var(--smoke-dark-alpha-7);
     --border-hover: var(--smoke-dark-alpha-8);
     --border-active: var(--smoke-dark-alpha-9);
@@ -459,7 +385,7 @@
     --border-strong-focus: var(--smoke-dark-alpha-8);
     --border-weak-hover: var(--smoke-dark-alpha-7);
     --border-weak-active: var(--smoke-dark-alpha-8);
-    --border-weak-selected: var(--cobalt-dark-alpha-6);
+    --border-weak-selected: var(--cobalt-dark-alpha-3);
     --border-weak-disabled: var(--smoke-dark-alpha-6);
     --border-weak-focus: var(--smoke-dark-alpha-8);
     --border-interactive-base: var(--cobalt-light-7);
@@ -516,9 +442,7 @@
     --icon-on-brand-base: var(--smoke-light-alpha-11);
     --icon-on-brand-hover: var(--smoke-light-alpha-12);
     --icon-on-brand-selected: var(--smoke-light-alpha-12);
-    --icon-on-interactive-base: var(--smoke-dark-alpha-9);
-    --icon-on-interactive-hover: var(--smoke-dark-alpha-10);
-    --icon-on-interactive-selected: var(--smoke-dark-alpha-11);
+    --icon-on-interactive-base: var(--smoke-dark-12);
     --icon-agent-plan-base: var(--purple-dark-9);
     --icon-agent-docs-base: var(--amber-dark-9);
     --icon-agent-ask-base: var(--cyan-dark-9);
@@ -541,34 +465,34 @@
     --icon-diff-delete-base: var(--ember-dark-9);
     --icon-diff-delete-hover: var(--ember-dark-10);
     --icon-diff-delete-active: var(--ember-dark-11);
-    --syntax-comment: #ffffff;
-    --syntax-string: #ffffff;
-    --syntax-keyword: #ffffff;
-    --syntax-function: #ffffff;
-    --syntax-number: #ffffff;
-    --syntax-operator: #ffffff;
-    --syntax-variable: #ffffff;
-    --syntax-type: #ffffff;
-    --syntax-constant: #ffffff;
-    --syntax-punctuation: #ffffff;
-    --syntax-success: #ffffff;
-    --syntax-warning: #ffffff;
-    --syntax-critical: #ffffff;
-    --syntax-info: #ffffff;
-    --markdown-heading: #ffffff;
-    --markdown-text: #ffffff;
-    --markdown-link: #ffffff;
-    --markdown-link-text: #ffffff;
-    --markdown-code: #ffffff;
-    --markdown-block-quote: #ffffff;
-    --markdown-emph: #ffffff;
-    --markdown-strong: #ffffff;
-    --markdown-horizontal-rule: #ffffff;
-    --markdown-list-item: #ffffff;
-    --markdown-list-enumeration: #ffffff;
-    --markdown-image: #ffffff;
-    --markdown-image-text: #ffffff;
-    --markdown-code-block: #ffffff;
+    --syntax-comment: #808080;
+    --syntax-string: #9d7cd8;
+    --syntax-keyword: #fab283;
+    --syntax-function: #e06c75;
+    --syntax-number: #7fd88f;
+    --syntax-operator: #f5a742;
+    --syntax-variable: #e5c07b;
+    --syntax-type: #56b6c2;
+    --syntax-constant: #c2569a;
+    --syntax-punctuation: #eeeeee;
+    --syntax-success: var(--apple-dark-10);
+    --syntax-warning: var(--amber-dark-10);
+    --syntax-critical: var(--ember-dark-10);
+    --syntax-info: var(--lilac-dark-10);
+    --markdown-heading: #9d7cd8;
+    --markdown-text: #eeeeee;
+    --markdown-link: #fab283;
+    --markdown-link-text: #56b6c2;
+    --markdown-code: #7fd88f;
+    --markdown-block-quote: #e5c07b;
+    --markdown-emph: #e5c07b;
+    --markdown-strong: #f5a742;
+    --markdown-horizontal-rule: #808080;
+    --markdown-list-item: #fab283;
+    --markdown-list-enumeration: #56b6c2;
+    --markdown-image: #fab283;
+    --markdown-image-text: #56b6c2;
+    --markdown-code-block: #eeeeee;
     --border-color: #ffffff;
   }
 }

packages/ui/src/styles/utilities.css

@@ -0,0 +1,109 @@
+:root {
+  interpolate-size: allow-keywords;
+
+  [data-popper-positioner] {
+    pointer-events: none;
+  }
+
+  ::selection {
+    background-color: color-mix(in srgb, var(--color-primary) 33%, transparent);
+    /* background-color: var(--color-primary); */
+    /* color: var(--color-background); */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--theme-background-panel);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--theme-border-subtle);
+    border-radius: 6px;
+  }
+
+  * {
+    scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel);
+  }
+}
+
+.no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+.text-12-regular {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-12-medium {
+  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); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-12-mono {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-14-regular {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-x-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-14-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-14-mono {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-16-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-large);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-x-large); /* 150% */
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.text-20-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-x-large);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-x-large); /* 120% */
+  letter-spacing: var(--letter-spacing-tightest);
+}

packages/web/package.json

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

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

@@ -132,6 +132,51 @@ All our models are hosted in the US. Our providers follow a zero-retention polic
 
 ---
 
+## For Teams
+
+Zen also works great for teams. You can invite teammates, assign roles, curate
+the models your team uses, and more.
+
+:::note
+Workspaces are currently free for teams as a part of the beta.
+:::
+
+Managing your workspace is currently free for teams as a part of the beta. We'll be
+sharing more details on the pricing soon.
+
+---
+
+### Roles
+
+You can invite teammates to your workspace and assign roles:
+
+- **Admin**: Manage models, members, API keys, and billing
+- **Member**: Manage only their own API keys
+
+Admins can also set monthly spending limits for each member to keep costs under control.
+
+---
+
+### Model access
+
+Admins can enable or disable specific models for the workspace. Requests made to a disabled model will return an error.
+
+This is useful for cases where you want to disable the use of a model that
+collects data.
+
+---
+
+### Bring your own key
+
+You can use your own OpenAI or Anthropic API keys while still accessing other models in Zen.
+
+When you use your own keys, tokens are billed directly by the provider, not by Zen.
+
+For example, your organization might already have a key for OpenAI or Anthropic
+and you want to use that instead of the one that Zen provides.
+
+---
+
 ## Goals
 
 We created OpenCode Zen to:

sdks/vscode/package.json

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