Merge branch 'dev' of https://github.com/sst/opencode into dev

packages/console/app/.gitignore

@@ -23,6 +23,9 @@ app.config.timestamp_*.js
 # Temp
 gitignore
 
+# Generated files
+public/sitemap.xml
+
 # System Files
 .DS_Store
 Thumbs.db

packages/console/app/package.json

@@ -5,9 +5,9 @@
     "typecheck": "tsgo --noEmit",
     "dev": "vinxi dev --host 0.0.0.0",
     "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",
+    "build": "./script/generate-sitemap.ts && vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
     "start": "vinxi start",
-    "version": "1.0.23"
+    "version": "1.0.55"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",

packages/console/app/script/generate-sitemap.ts

@@ -0,0 +1,103 @@
+#!/usr/bin/env bun
+import { readdir, writeFile } from "fs/promises"
+import { join, dirname } from "path"
+import { fileURLToPath } from "url"
+import { config } from "../src/config.js"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const BASE_URL = config.baseUrl
+const PUBLIC_DIR = join(__dirname, "../public")
+const ROUTES_DIR = join(__dirname, "../src/routes")
+const DOCS_DIR = join(__dirname, "../../../web/src/content/docs")
+
+interface SitemapEntry {
+  url: string
+  priority: number
+  changefreq: string
+}
+
+async function getMainRoutes(): Promise<SitemapEntry[]> {
+  const routes: SitemapEntry[] = []
+
+  // Add main static routes
+  const staticRoutes = [
+    { path: "/", priority: 1.0, changefreq: "daily" },
+    { path: "/enterprise", priority: 0.8, changefreq: "weekly" },
+    { path: "/brand", priority: 0.6, changefreq: "monthly" },
+    { path: "/zen", priority: 0.8, changefreq: "weekly" },
+  ]
+
+  for (const route of staticRoutes) {
+    routes.push({
+      url: `${BASE_URL}${route.path}`,
+      priority: route.priority,
+      changefreq: route.changefreq,
+    })
+  }
+
+  return routes
+}
+
+async function getDocsRoutes(): Promise<SitemapEntry[]> {
+  const routes: SitemapEntry[] = []
+
+  try {
+    const files = await readdir(DOCS_DIR)
+
+    for (const file of files) {
+      if (!file.endsWith(".mdx")) continue
+
+      const slug = file.replace(".mdx", "")
+      const path = slug === "index" ? "/docs/" : `/docs/${slug}`
+
+      routes.push({
+        url: `${BASE_URL}${path}`,
+        priority: slug === "index" ? 0.9 : 0.7,
+        changefreq: "weekly",
+      })
+    }
+  } catch (error) {
+    console.error("Error reading docs directory:", error)
+  }
+
+  return routes
+}
+
+function generateSitemapXML(entries: SitemapEntry[]): string {
+  const urls = entries
+    .map(
+      (entry) => `  <url>
+    <loc>${entry.url}</loc>
+    <changefreq>${entry.changefreq}</changefreq>
+    <priority>${entry.priority}</priority>
+  </url>`,
+    )
+    .join("\n")
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>`
+}
+
+async function main() {
+  console.log("Generating sitemap...")
+
+  const mainRoutes = await getMainRoutes()
+  const docsRoutes = await getDocsRoutes()
+
+  const allRoutes = [...mainRoutes, ...docsRoutes]
+
+  console.log(`Found ${mainRoutes.length} main routes`)
+  console.log(`Found ${docsRoutes.length} docs routes`)
+  console.log(`Total: ${allRoutes.length} routes`)
+
+  const xml = generateSitemapXML(allRoutes)
+
+  const outputPath = join(PUBLIC_DIR, "sitemap.xml")
+  await writeFile(outputPath, xml, "utf-8")
+
+  console.log(`✓ Sitemap generated at ${outputPath}`)
+}
+
+main()

packages/console/app/src/app.tsx

@@ -12,7 +12,7 @@ export default function App() {
       root={(props) => (
         <MetaProvider>
           <Title>opencode</Title>
-          <Meta name="description" content="opencode - The AI coding agent built for the terminal." />
+          <Meta name="description" content="OpenCode - The AI coding agent built for the terminal." />
           <Suspense>{props.children}</Suspense>
         </MetaProvider>
       )}

packages/console/app/src/component/dropdown.css

@@ -77,4 +77,4 @@
       background-color: var(--color-accent-alpha);
     }
   }
-}
+}

packages/console/app/src/component/modal.css

@@ -63,4 +63,4 @@
     font-weight: 600;
     color: var(--color-text);
   }
-}
+}

packages/console/app/src/config.ts

@@ -2,6 +2,9 @@
  * Application-wide constants and configuration
  */
 export const config = {
+  // Base URL
+  baseUrl: "https://opencode.ai",
+
   // GitHub
   github: {
     repoUrl: "https://github.com/sst/opencode",

packages/console/app/src/lib/github.ts

@@ -7,10 +7,7 @@ export const github = query(async () => {
     "User-Agent":
       "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36",
   }
-  const apiBaseUrl = config.github.repoUrl.replace(
-    "https://github.com/",
-    "https://api.github.com/repos/",
-  )
+  const apiBaseUrl = config.github.repoUrl.replace("https://github.com/", "https://api.github.com/repos/")
   try {
     const [meta, releases, contributors] = await Promise.all([
       fetch(apiBaseUrl, { headers }).then((res) => res.json()),

packages/console/app/src/routes/brand/index.css

@@ -264,7 +264,7 @@
   [data-component="brand-content"] {
     padding: 4rem 5rem;
 
-    h2 {
+    h1 {
       font-size: 1.5rem;
       font-weight: 500;
       color: var(--color-text-strong);
@@ -299,7 +299,6 @@
       transition: all 0.2s ease;
       text-decoration: none;
 
-
       &:hover:not(:disabled) {
         background: var(--color-background-strong-hover);
       }
@@ -385,23 +384,21 @@
         0 1px 2px -1px rgba(19, 16, 16, 0.12);
 
       @media (max-width: 40rem) {
-        box-shadow:
-          0 0 0 1px rgba(19, 16, 16, 0.16)
+        box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.16);
       }
 
-
       &:hover {
         background: var(--color-background);
       }
 
       &:active {
         transform: scale(0.98);
-        box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.08), 0 6px 8px -8px rgba(19, 16, 16, 0.50);
+        box-shadow:
+          0 0 0 1px rgba(19, 16, 16, 0.08),
+          0 6px 8px -8px rgba(19, 16, 16, 0.5);
       }
     }
 
-
-
     @media (max-width: 60rem) {
       padding: 2rem 1.5rem;
     }

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

@@ -1,6 +1,7 @@
 import "./index.css"
-import { Title, Meta } from "@solidjs/meta"
+import { Title, Meta, Link } from "@solidjs/meta"
 import { Header } from "~/component/header"
+import { config } from "~/config"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
 import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
@@ -53,26 +54,21 @@ export default function Brand() {
   return (
     <main data-page="enterprise">
       <Title>OpenCode | Brand</Title>
+      <Link rel="canonical" href={`${config.baseUrl}/brand`} />
       <Meta name="description" content="OpenCode brand guidelines" />
       <div data-component="container">
         <Header />
 
         <div data-component="content">
           <section data-component="brand-content">
-            <h2>Brand guidelines</h2>
+            <h1>Brand guidelines</h1>
             <p>Resources and assets to help you work with the OpenCode brand.</p>
             <button
               data-component="download-button"
               onClick={() => downloadFile(brandAssets, "opencode-brand-assets.zip")}
             >
               Download all assets
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                   stroke="currentColor"
@@ -88,13 +84,7 @@ export default function Brand() {
                 <div data-component="actions">
                   <button onClick={() => downloadFile(logoLightPng, "opencode-logo-light.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -105,13 +95,7 @@ export default function Brand() {
                   </button>
                   <button onClick={() => downloadFile(logoLightSvg, "opencode-logo-light.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -127,13 +111,7 @@ export default function Brand() {
                 <div data-component="actions">
                   <button onClick={() => downloadFile(logoDarkPng, "opencode-logo-dark.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -144,13 +122,7 @@ export default function Brand() {
                   </button>
                   <button onClick={() => downloadFile(logoDarkSvg, "opencode-logo-dark.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -164,17 +136,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkLight} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -183,17 +147,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() => downloadFile(wordmarkLightSvg, "opencode-wordmark-light.svg")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkLightSvg, "opencode-wordmark-light.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -207,17 +163,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkDark} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() => downloadFile(wordmarkDarkPng, "opencode-wordmark-dark.png")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkDarkPng, "opencode-wordmark-dark.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -226,17 +174,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() => downloadFile(wordmarkDarkSvg, "opencode-wordmark-dark.svg")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkDarkSvg, "opencode-wordmark-dark.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -250,19 +190,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkSimpleLight} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -271,19 +201,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleLightSvg, "opencode-wordmark-simple-light.svg")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleLightSvg, "opencode-wordmark-simple-light.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -297,19 +217,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkSimpleDark} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -318,19 +228,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleDarkSvg, "opencode-wordmark-simple-dark.svg")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleDarkSvg, "opencode-wordmark-simple-dark.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"

packages/console/app/src/routes/desktop-feedback.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@solidjs/router"
+
+export async function GET() {
+  return redirect("https://discord.gg/h5TNnkFVNy")
+}

packages/console/app/src/routes/enterprise/index.css

@@ -287,7 +287,7 @@
   }
 
   [data-component="enterprise-column-1"] {
-    h2 {
+    h1 {
       font-size: 1.5rem;
       font-weight: 500;
       color: var(--color-text-strong);

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

@@ -1,6 +1,7 @@
 import "./index.css"
-import { Title, Meta } from "@solidjs/meta"
+import { Title, Meta, Link } from "@solidjs/meta"
 import { createSignal, Show } from "solid-js"
+import { config } from "~/config"
 import { Header } from "~/component/header"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
@@ -54,6 +55,7 @@ export default function Enterprise() {
   return (
     <main data-page="enterprise">
       <Title>OpenCode | Enterprise solutions for your organisation</Title>
+      <Link rel="canonical" href={`${config.baseUrl}/enterprise`} />
       <Meta name="description" content="Contact OpenCode for enterprise solutions" />
       <div data-component="container">
         <Header />
@@ -62,41 +64,28 @@ export default function Enterprise() {
           <section data-component="enterprise-content">
             <div data-component="enterprise-columns">
               <div data-component="enterprise-column-1">
-                <h2>Your code is yours</h2>
+                <h1>Your code is yours</h1>
                 <p>
-                  OpenCode operates securely inside your organization with no data or context stored
-                  and no licensing restrictions or ownership claims. Start a trial with your team,
-                  then deploy it across your organization by integrating it with your SSO and
-                  internal AI gateway.
+                  OpenCode operates securely inside your organization with no data or context stored and no licensing
+                  restrictions or ownership claims. Start a trial with your team, then deploy it across your
+                  organization by integrating it with your SSO and internal AI gateway.
                 </p>
                 <p>Let us know and how we can help.</p>
 
                 <Show when={false}>
                   <div data-component="testimonial">
                     <div data-component="quotation">
-                      <svg
-                        width="20"
-                        height="17"
-                        viewBox="0 0 20 17"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
+                      <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path
                           d="M19.4118 0L16.5882 9.20833H20V17H12.2353V10.0938L16 0H19.4118ZM7.17647 0L4.35294 9.20833H7.76471V17H0V10.0938L3.76471 0H7.17647Z"
                           fill="currentColor"
                         />
                       </svg>
                     </div>
-                    Thanks to OpenCode, we found a way to create software to track all our assets —
-                    even the imaginary ones.
+                    Thanks to OpenCode, we found a way to create software to track all our assets — even the imaginary
+                    ones.
                     <div data-component="testimonial-logo">
-                      <svg
-                        width="80"
-                        height="79"
-                        viewBox="0 0 80 79"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
+                      <svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path
                           fill-rule="evenodd"
                           clip-rule="evenodd"
@@ -213,11 +202,7 @@ export default function Enterprise() {
                     </button>
                   </form>
 
-                  {showSuccess() && (
-                    <div data-component="success-message">
-                      Message sent, we'll be in touch soon.
-                    </div>
-                  )}
+                  {showSuccess() && <div data-component="success-message">Message sent, we'll be in touch soon.</div>}
                 </div>
               </div>
             </div>
@@ -230,31 +215,29 @@ export default function Enterprise() {
             <ul>
               <li>
                 <Faq question="What is OpenCode Enterprise?">
-                  OpenCode Enterprise is for organizations that want to ensure that their code and
-                  data never leaves their infrastructure. It can do this by using a centralized
-                  config that integrates with your SSO and internal AI gateway.
+                  OpenCode Enterprise is for organizations that want to ensure that their code and data never leaves
+                  their infrastructure. It can do this by using a centralized config that integrates with your SSO and
+                  internal AI gateway.
                 </Faq>
               </li>
               <li>
                 <Faq question="How do I get started with OpenCode Enterprise?">
-                  Simply start with an internal trial with your team. OpenCode by default does not
-                  store your code or context data, making it easy to get started. Then contact us to
-                  discuss pricing and implementation options.
+                  Simply start with an internal trial with your team. OpenCode by default does not store your code or
+                  context data, making it easy to get started. Then contact us to discuss pricing and implementation
+                  options.
                 </Faq>
               </li>
               <li>
                 <Faq question="How does enterprise pricing work?">
-                  We offer per-seat enterprise pricing. If you have your own LLM gateway, we do not
-                  charge for tokens used. For further details, contact us for a custom quote based
-                  on your organization's needs.
+                  We offer per-seat enterprise pricing. If you have your own LLM gateway, we do not charge for tokens
+                  used. For further details, contact us for a custom quote based on your organization's needs.
                 </Faq>
               </li>
               <li>
                 <Faq question="Is my data secure with OpenCode Enterprise?">
-                  Yes. OpenCode does not store your code or context data. All processing happens
-                  locally or through direct API calls to your AI provider. With central config and
-                  SSO integration, your data remains secure within your organization's
-                  infrastructure.
+                  Yes. OpenCode does not store your code or context data. All processing happens locally or through
+                  direct API calls to your AI provider. With central config and SSO integration, your data remains
+                  secure within your organization's infrastructure.
                 </Faq>
               </li>
             </ul>

packages/console/app/src/routes/index.css

@@ -479,7 +479,7 @@ body {
       border-bottom: 1px solid var(--color-border-weak);
     }
 
-    strong {
+    h1 {
       font-size: 28px;
       color: var(--color-text-strong);
       font-weight: 500;

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

@@ -13,146 +13,144 @@ export async function POST(input: APIEvent) {
     input.request.headers.get("stripe-signature")!,
     Resource.STRIPE_WEBHOOK_SECRET.value,
   )
-
   console.log(body.type, JSON.stringify(body, null, 2))
-  if (body.type === "customer.updated") {
-    // check default payment method changed
-    const prevInvoiceSettings = body.data.previous_attributes?.invoice_settings ?? {}
-    if (!("default_payment_method" in prevInvoiceSettings)) return
 
-    const customerID = body.data.object.id
-    const paymentMethodID = body.data.object.invoice_settings.default_payment_method as string
+  return (async () => {
+    if (body.type === "customer.updated") {
+      // check default payment method changed
+      const prevInvoiceSettings = body.data.previous_attributes?.invoice_settings ?? {}
+      if (!("default_payment_method" in prevInvoiceSettings)) return "ignored"
 
-    if (!customerID) throw new Error("Customer ID not found")
-    if (!paymentMethodID) throw new Error("Payment method ID not found")
+      const customerID = body.data.object.id
+      const paymentMethodID = body.data.object.invoice_settings.default_payment_method as string
 
-    const paymentMethod = await Billing.stripe().paymentMethods.retrieve(paymentMethodID)
-    await Database.use(async (tx) => {
-      await tx
-        .update(BillingTable)
-        .set({
-          paymentMethodID,
-          paymentMethodLast4: paymentMethod.card?.last4 ?? null,
-          paymentMethodType: paymentMethod.type,
-        })
-        .where(eq(BillingTable.customerID, customerID))
-    })
-  }
-  if (body.type === "checkout.session.completed") {
-    const workspaceID = body.data.object.metadata?.workspaceID
-    const customerID = body.data.object.customer as string
-    const paymentID = body.data.object.payment_intent as string
-    const invoiceID = body.data.object.invoice as string
-    const amount = body.data.object.amount_total
+      if (!customerID) throw new Error("Customer ID not found")
+      if (!paymentMethodID) throw new Error("Payment method ID not found")
 
-    if (!workspaceID) throw new Error("Workspace ID not found")
-    if (!customerID) throw new Error("Customer ID not found")
-    if (!amount) throw new Error("Amount not found")
-    if (!paymentID) throw new Error("Payment ID not found")
-    if (!invoiceID) throw new Error("Invoice ID not found")
-
-    await Actor.provide("system", { workspaceID }, async () => {
-      const customer = await Billing.get()
-      if (customer?.customerID && customer.customerID !== customerID)
-        throw new Error("Customer ID mismatch")
-
-      // set customer metadata
-      if (!customer?.customerID) {
-        await Billing.stripe().customers.update(customerID, {
-          metadata: {
-            workspaceID,
-          },
-        })
-      }
-
-      // get payment method for the payment intent
-      const paymentIntent = await Billing.stripe().paymentIntents.retrieve(paymentID, {
-        expand: ["payment_method"],
-      })
-      const paymentMethod = paymentIntent.payment_method
-      if (!paymentMethod || typeof paymentMethod === "string")
-        throw new Error("Payment method not expanded")
-
-      const oldBillingInfo = await Database.use((tx) =>
-        tx
-          .select({
-            customerID: BillingTable.customerID,
-          })
-          .from(BillingTable)
-          .where(eq(BillingTable.workspaceID, workspaceID))
-          .then((rows) => rows[0]),
-      )
-
-      await Database.transaction(async (tx) => {
+      const paymentMethod = await Billing.stripe().paymentMethods.retrieve(paymentMethodID)
+      await Database.use(async (tx) => {
         await tx
           .update(BillingTable)
           .set({
-            balance: sql`${BillingTable.balance} + ${centsToMicroCents(Billing.CHARGE_AMOUNT)}`,
-            customerID,
-            paymentMethodID: paymentMethod.id,
+            paymentMethodID,
             paymentMethodLast4: paymentMethod.card?.last4 ?? null,
             paymentMethodType: paymentMethod.type,
-            // enable reload if first time enabling billing
-            ...(oldBillingInfo?.customerID
-              ? {}
-              : {
-                  reload: true,
-                  reloadError: null,
-                  timeReloadError: null,
-                }),
           })
-          .where(eq(BillingTable.workspaceID, workspaceID))
-        await tx.insert(PaymentTable).values({
-          workspaceID,
-          id: Identifier.create("payment"),
-          amount: centsToMicroCents(Billing.CHARGE_AMOUNT),
-          paymentID,
-          invoiceID,
-          customerID,
+          .where(eq(BillingTable.customerID, customerID))
+      })
+    }
+    if (body.type === "checkout.session.completed") {
+      const workspaceID = body.data.object.metadata?.workspaceID
+      const amountInCents = body.data.object.metadata?.amount && parseInt(body.data.object.metadata?.amount)
+      const customerID = body.data.object.customer as string
+      const paymentID = body.data.object.payment_intent as string
+      const invoiceID = body.data.object.invoice as string
+
+      if (!workspaceID) throw new Error("Workspace ID not found")
+      if (!customerID) throw new Error("Customer ID not found")
+      if (!amountInCents) throw new Error("Amount not found")
+      if (!paymentID) throw new Error("Payment ID not found")
+      if (!invoiceID) throw new Error("Invoice ID not found")
+
+      await Actor.provide("system", { workspaceID }, async () => {
+        const customer = await Billing.get()
+        if (customer?.customerID && customer.customerID !== customerID) throw new Error("Customer ID mismatch")
+
+        // set customer metadata
+        if (!customer?.customerID) {
+          await Billing.stripe().customers.update(customerID, {
+            metadata: {
+              workspaceID,
+            },
+          })
+        }
+
+        // get payment method for the payment intent
+        const paymentIntent = await Billing.stripe().paymentIntents.retrieve(paymentID, {
+          expand: ["payment_method"],
+        })
+        const paymentMethod = paymentIntent.payment_method
+        if (!paymentMethod || typeof paymentMethod === "string") throw new Error("Payment method not expanded")
+
+        await Database.transaction(async (tx) => {
+          await tx
+            .update(BillingTable)
+            .set({
+              balance: sql`${BillingTable.balance} + ${centsToMicroCents(amountInCents)}`,
+              customerID,
+              paymentMethodID: paymentMethod.id,
+              paymentMethodLast4: paymentMethod.card?.last4 ?? null,
+              paymentMethodType: paymentMethod.type,
+              // enable reload if first time enabling billing
+              ...(customer?.customerID
+                ? {}
+                : {
+                    reload: true,
+                    reloadError: null,
+                    timeReloadError: null,
+                  }),
+            })
+            .where(eq(BillingTable.workspaceID, workspaceID))
+          await tx.insert(PaymentTable).values({
+            workspaceID,
+            id: Identifier.create("payment"),
+            amount: centsToMicroCents(amountInCents),
+            paymentID,
+            invoiceID,
+            customerID,
+          })
         })
       })
+    }
+    if (body.type === "charge.refunded") {
+      const customerID = body.data.object.customer as string
+      const paymentIntentID = body.data.object.payment_intent as string
+      if (!customerID) throw new Error("Customer ID not found")
+      if (!paymentIntentID) throw new Error("Payment ID not found")
+
+      const workspaceID = await Database.use((tx) =>
+        tx
+          .select({
+            workspaceID: BillingTable.workspaceID,
+          })
+          .from(BillingTable)
+          .where(eq(BillingTable.customerID, customerID))
+          .then((rows) => rows[0]?.workspaceID),
+      )
+      if (!workspaceID) throw new Error("Workspace ID not found")
+
+      const amount = await Database.use((tx) =>
+        tx
+          .select({
+            amount: PaymentTable.amount,
+          })
+          .from(PaymentTable)
+          .where(and(eq(PaymentTable.paymentID, paymentIntentID), eq(PaymentTable.workspaceID, workspaceID)))
+          .then((rows) => rows[0]?.amount),
+      )
+      if (!amount) throw new Error("Payment not found")
+
+      await Database.transaction(async (tx) => {
+        await tx
+          .update(PaymentTable)
+          .set({
+            timeRefunded: new Date(body.created * 1000),
+          })
+          .where(and(eq(PaymentTable.paymentID, paymentIntentID), eq(PaymentTable.workspaceID, workspaceID)))
+
+        await tx
+          .update(BillingTable)
+          .set({
+            balance: sql`${BillingTable.balance} - ${amount}`,
+          })
+          .where(eq(BillingTable.workspaceID, workspaceID))
+      })
+    }
+  })()
+    .then((message) => {
+      return Response.json({ message: message ?? "done" }, { status: 200 })
     })
-  }
-  if (body.type === "charge.refunded") {
-    const customerID = body.data.object.customer as string
-    const paymentIntentID = body.data.object.payment_intent as string
-    if (!customerID) throw new Error("Customer ID not found")
-    if (!paymentIntentID) throw new Error("Payment ID not found")
-
-    const workspaceID = await Database.use((tx) =>
-      tx
-        .select({
-          workspaceID: BillingTable.workspaceID,
-        })
-        .from(BillingTable)
-        .where(eq(BillingTable.customerID, customerID))
-        .then((rows) => rows[0]?.workspaceID),
-    )
-    if (!workspaceID) throw new Error("Workspace ID not found")
-
-    await Database.transaction(async (tx) => {
-      await tx
-        .update(PaymentTable)
-        .set({
-          timeRefunded: new Date(body.created * 1000),
-        })
-        .where(
-          and(
-            eq(PaymentTable.paymentID, paymentIntentID),
-            eq(PaymentTable.workspaceID, workspaceID),
-          ),
-        )
-
-      await tx
-        .update(BillingTable)
-        .set({
-          balance: sql`${BillingTable.balance} - ${centsToMicroCents(Billing.CHARGE_AMOUNT)}`,
-        })
-        .where(eq(BillingTable.workspaceID, workspaceID))
+    .catch((error: any) => {
+      return Response.json({ message: error.message }, { status: 500 })
     })
-  }
-
-  console.log("finished handling")
-
-  return Response.json("ok", { status: 200 })
 }

packages/console/app/src/routes/temp.tsx

@@ -79,19 +79,17 @@ export default function Home() {
               <strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
             </li>
             <li>
-              <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a>{" "}
-              provided by opencode <label>New</label>
+              <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a> provided by opencode{" "}
+              <label>New</label>
             </li>
             <li>
               <strong>Multi-session</strong> Start multiple agents in parallel on the same project
             </li>
             <li>
-              <strong>Shareable links</strong> Share a link to any sessions for reference or to
-              debug
+              <strong>Shareable links</strong> Share a link to any sessions for reference or to debug
             </li>
             <li>
-              <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max
-              account
+              <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
             </li>
             <li>
               <strong>Use any model</strong> Supports 75+ LLM providers through{" "}

packages/console/app/src/routes/user-menu.css

@@ -14,4 +14,4 @@
       color: var(--color-danger);
     }
   }
-}
+}

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

@@ -71,4 +71,4 @@
       color: var(--color-text-muted);
     }
   }
-}
+}

packages/console/app/src/routes/workspace.css

@@ -104,4 +104,4 @@
       }
     }
   }
-}
+}

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

@@ -71,6 +71,57 @@
       flex: 1;
     }
 
+    [data-slot="add-balance-form-container"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+    }
+
+    [data-slot="add-balance-form"] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--space-3);
+
+      label {
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+        color: var(--color-text-muted);
+        white-space: nowrap;
+      }
+
+      input[data-component="input"] {
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+          box-shadow: 0 0 0 3px var(--color-accent-alpha);
+        }
+
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
+      }
+
+      [data-slot="form-actions"] {
+        display: flex;
+        gap: var(--space-2);
+      }
+    }
+
+    [data-slot="form-error"] {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+    }
+
     [data-slot="credit-card"] {
       padding: var(--space-2) var(--space-4);
       background-color: var(--color-bg-surface);
@@ -131,4 +182,4 @@
     padding: var(--space-4);
     min-width: 150px;
   }
-}
+}

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

@@ -1,24 +1,86 @@
-import { action, useParams, useAction, createAsync, useSubmission } from "@solidjs/router"
-import { createMemo, Match, Show, Switch } from "solid-js"
+import { action, useParams, useAction, createAsync, useSubmission, json } from "@solidjs/router"
+import { createMemo, Match, Show, Switch, createEffect } from "solid-js"
+import { createStore } from "solid-js/store"
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { withActor } from "~/context/auth.withActor"
 import { IconCreditCard, IconStripe } from "~/component/icon"
 import styles from "./billing-section.module.css"
-import { createCheckoutUrl, queryBillingInfo } from "../../common"
+import { createCheckoutUrl, formatBalance, queryBillingInfo } from "../../common"
 
 const createSessionUrl = action(async (workspaceID: string, returnUrl: string) => {
   "use server"
-  return withActor(() => Billing.generateSessionUrl({ returnUrl }), workspaceID)
+  return json(
+    await withActor(
+      () =>
+        Billing.generateSessionUrl({ returnUrl })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({
+            error: e.message as string,
+            data: undefined,
+          })),
+      workspaceID,
+    ),
+    { revalidate: queryBillingInfo.key },
+  )
 }, "sessionUrl")
 
 export function BillingSection() {
   const params = useParams()
   // ORIGINAL CODE - COMMENTED OUT FOR TESTING
-  const balanceInfo = createAsync(() => queryBillingInfo(params.id))
-  const createCheckoutUrlAction = useAction(createCheckoutUrl)
-  const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
-  const createSessionUrlAction = useAction(createSessionUrl)
-  const createSessionUrlSubmission = useSubmission(createSessionUrl)
+  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const checkoutAction = useAction(createCheckoutUrl)
+  const checkoutSubmission = useSubmission(createCheckoutUrl)
+  const sessionAction = useAction(createSessionUrl)
+  const sessionSubmission = useSubmission(createSessionUrl)
+  const [store, setStore] = createStore({
+    showAddBalanceForm: false,
+    addBalanceAmount: billingInfo()?.reloadAmount.toString() ?? "",
+    checkoutRedirecting: false,
+    sessionRedirecting: false,
+  })
+
+  createEffect(() => {
+    const info = billingInfo()
+    if (info) {
+      setStore("addBalanceAmount", info.reloadAmount.toString())
+    }
+  })
+  const balance = createMemo(() => formatBalance(billingInfo()?.balance ?? 0))
+
+  async function onClickCheckout() {
+    const amount = parseInt(store.addBalanceAmount)
+    const baseUrl = window.location.href
+
+    const checkout = await checkoutAction(params.id, amount, baseUrl, baseUrl)
+    if (checkout && checkout.data) {
+      setStore("checkoutRedirecting", true)
+      window.location.href = checkout.data
+    }
+  }
+
+  async function onClickSession() {
+    const baseUrl = window.location.href
+    const sessionUrl = await sessionAction(params.id, baseUrl)
+    if (sessionUrl && sessionUrl.data) {
+      setStore("sessionRedirecting", true)
+      window.location.href = sessionUrl.data
+    }
+  }
+
+  function showAddBalanceForm() {
+    while (true) {
+      checkoutSubmission.clear()
+      if (!checkoutSubmission.result) break
+    }
+    setStore({
+      showAddBalanceForm: true,
+    })
+  }
+
+  function hideAddBalanceForm() {
+    setStore("showAddBalanceForm", false)
+    checkoutSubmission.clear()
+  }
 
   // DUMMY DATA FOR TESTING - UNCOMMENT ONE OF THE SCENARIOS BELOW
 
@@ -72,97 +134,104 @@ export function BillingSection() {
   //   timeReloadError: null as Date | null
   // })
 
-  const balanceAmount = createMemo(() => {
-    return ((balanceInfo()?.balance ?? 0) / 100000000).toFixed(2)
-  })
-
   return (
     <section class={styles.root}>
       <div data-slot="section-title">
         <h2>Billing</h2>
         <p>
-          Manage payments methods. <a href="mailto:contact@anoma.ly">Contact us</a> if you have any
-          questions.
+          Manage payments methods. <a href="mailto:contact@anoma.ly">Contact us</a> if you have any questions.
         </p>
       </div>
       <div data-slot="section-content">
         <div data-slot="balance-display">
           <div data-slot="balance-amount">
-            <span data-slot="balance-value">
-              ${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}
-            </span>
+            <span data-slot="balance-value">${balance()}</span>
             <span data-slot="balance-label">Current Balance</span>
           </div>
-          <Show when={balanceInfo()?.customerID}>
+          <Show when={billingInfo()?.customerID}>
             <div data-slot="balance-right-section">
-              <button
-                data-color="primary"
-                disabled={createCheckoutUrlSubmission.pending}
-                onClick={async () => {
-                  const baseUrl = window.location.href
-                  const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
-                  if (checkoutUrl) {
-                    window.location.href = checkoutUrl
-                  }
-                }}
+              <Show
+                when={!store.showAddBalanceForm}
+                fallback={
+                  <div data-slot="add-balance-form-container">
+                    <div data-slot="add-balance-form">
+                      <label>Add $</label>
+                      <input
+                        data-component="input"
+                        type="number"
+                        min={billingInfo()?.reloadAmountMin.toString()}
+                        step="1"
+                        value={store.addBalanceAmount}
+                        onInput={(e) => {
+                          setStore("addBalanceAmount", e.currentTarget.value)
+                          checkoutSubmission.clear()
+                        }}
+                        placeholder="Enter amount"
+                      />
+                      <div data-slot="form-actions">
+                        <button data-color="ghost" type="button" onClick={() => hideAddBalanceForm()}>
+                          Cancel
+                        </button>
+                        <button
+                          data-color="primary"
+                          type="button"
+                          disabled={!store.addBalanceAmount || checkoutSubmission.pending || store.checkoutRedirecting}
+                          onClick={onClickCheckout}
+                        >
+                          {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Add"}
+                        </button>
+                      </div>
+                    </div>
+                    <Show when={checkoutSubmission.result && (checkoutSubmission.result as any).error}>
+                      {(err: any) => <div data-slot="form-error">{err()}</div>}
+                    </Show>
+                  </div>
+                }
               >
-                {createCheckoutUrlSubmission.pending ? "Loading..." : "Add Balance"}
-              </button>
+                <button data-color="primary" onClick={() => showAddBalanceForm()}>
+                  Add Balance
+                </button>
+              </Show>
               <div data-slot="credit-card">
                 <div data-slot="card-icon">
                   <Switch fallback={<IconCreditCard style={{ width: "24px", height: "24px" }} />}>
-                    <Match when={balanceInfo()?.paymentMethodType === "link"}>
+                    <Match when={billingInfo()?.paymentMethodType === "link"}>
                       <IconStripe style={{ width: "24px", height: "24px" }} />
                     </Match>
                   </Switch>
                 </div>
                 <div data-slot="card-details">
                   <Switch>
-                    <Match when={balanceInfo()?.paymentMethodType === "card"}>
-                      <Show
-                        when={balanceInfo()?.paymentMethodLast4}
-                        fallback={<span data-slot="number">----</span>}
-                      >
+                    <Match when={billingInfo()?.paymentMethodType === "card"}>
+                      <Show when={billingInfo()?.paymentMethodLast4} fallback={<span data-slot="number">----</span>}>
                         <span data-slot="secret">••••</span>
-                        <span data-slot="number">{balanceInfo()?.paymentMethodLast4}</span>
+                        <span data-slot="number">{billingInfo()?.paymentMethodLast4}</span>
                       </Show>
                     </Match>
-                    <Match when={balanceInfo()?.paymentMethodType === "link"}>
+                    <Match when={billingInfo()?.paymentMethodType === "link"}>
                       <span data-slot="type">Linked to Stripe</span>
                     </Match>
                   </Switch>
                 </div>
                 <button
                   data-color="ghost"
-                  disabled={createSessionUrlSubmission.pending}
-                  onClick={async () => {
-                    const baseUrl = window.location.href
-                    const sessionUrl = await createSessionUrlAction(params.id, baseUrl)
-                    if (sessionUrl) {
-                      window.location.href = sessionUrl
-                    }
-                  }}
+                  disabled={sessionSubmission.pending || store.sessionRedirecting}
+                  onClick={onClickSession}
                 >
-                  {createSessionUrlSubmission.pending ? "Loading..." : "Manage"}
+                  {sessionSubmission.pending || store.sessionRedirecting ? "Loading..." : "Manage"}
                 </button>
               </div>
             </div>
           </Show>
         </div>
-        <Show when={!balanceInfo()?.customerID}>
+        <Show when={!billingInfo()?.customerID}>
           <button
             data-slot="enable-billing-button"
             data-color="primary"
-            disabled={createCheckoutUrlSubmission.pending}
-            onClick={async () => {
-              const baseUrl = window.location.href
-              const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
-              if (checkoutUrl) {
-                window.location.href = checkoutUrl
-              }
-            }}
+            disabled={checkoutSubmission.pending || store.checkoutRedirecting}
+            onClick={onClickCheckout}
           >
-            {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable Billing"}
+            {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Enable Billing"}
           </button>
         </Show>
       </div>

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

@@ -93,4 +93,4 @@
     margin: 0;
     line-height: 1.4;
   }
-}
+}

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

@@ -1,16 +1,10 @@
-import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { json, action, useParams, createAsync, useSubmission } from "@solidjs/router"
 import { createEffect, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { withActor } from "~/context/auth.withActor"
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import styles from "./monthly-limit-section.module.css"
-
-const getBillingInfo = query(async (workspaceID: string) => {
-  "use server"
-  return withActor(async () => {
-    return await Billing.get()
-  }, workspaceID)
-}, "billing.get")
+import { queryBillingInfo } from "../../common"
 
 const setMonthlyLimit = action(async (form: FormData) => {
   "use server"
@@ -28,7 +22,7 @@ const setMonthlyLimit = action(async (form: FormData) => {
           .catch((e) => ({ error: e.message as string })),
       workspaceID,
     ),
-    { revalidate: getBillingInfo.key },
+    { revalidate: queryBillingInfo.key },
   )
 }, "billing.setMonthlyLimit")
 
@@ -36,7 +30,7 @@ export function MonthlyLimitSection() {
   const params = useParams()
   const submission = useSubmission(setMonthlyLimit)
   const [store, setStore] = createStore({ show: false })
-  const balanceInfo = createAsync(() => getBillingInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id))
 
   let input: HTMLInputElement
 
@@ -68,13 +62,13 @@ export function MonthlyLimitSection() {
     <section class={styles.root}>
       <div data-slot="section-title">
         <h2>Monthly Limit</h2>
-        <p>Set a monthly spending limit for your account.</p>
+        <p>Set a monthly usage limit for your account.</p>
       </div>
       <div data-slot="section-content">
         <div data-slot="balance">
           <div data-slot="amount">
-            {balanceInfo()?.monthlyLimit ? <span data-slot="currency">$</span> : null}
-            <span data-slot="value">{balanceInfo()?.monthlyLimit ?? "-"}</span>
+            {billingInfo()?.monthlyLimit ? <span data-slot="currency">$</span> : null}
+            <span data-slot="value">{billingInfo()?.monthlyLimit ?? "-"}</span>
           </div>
           <Show
             when={!store.show}
@@ -106,15 +100,15 @@ export function MonthlyLimitSection() {
             }
           >
             <button data-color="primary" onClick={() => show()}>
-              {balanceInfo()?.monthlyLimit ? "Edit Limit" : "Set Limit"}
+              {billingInfo()?.monthlyLimit ? "Edit Limit" : "Set Limit"}
             </button>
           </Show>
         </div>
-        <Show when={balanceInfo()?.monthlyLimit} fallback={<p data-slot="usage-status">No spending limit set.</p>}>
+        <Show when={billingInfo()?.monthlyLimit} fallback={<p data-slot="usage-status">No usage limit set.</p>}>
           <p data-slot="usage-status">
             Current usage for {new Date().toLocaleDateString("en-US", { month: "long", timeZone: "UTC" })} is $
             {(() => {
-              const dateLastUsed = balanceInfo()?.timeMonthlyUsageUpdated
+              const dateLastUsed = billingInfo()?.timeMonthlyUsageUpdated
               if (!dateLastUsed) return "0"
 
               const current = new Date().toLocaleDateString("en-US", {
@@ -128,7 +122,7 @@ export function MonthlyLimitSection() {
                 timeZone: "UTC",
               })
               if (current !== lastUsed) return "0"
-              return ((balanceInfo()?.monthlyUsage ?? 0) / 100000000).toFixed(2)
+              return ((billingInfo()?.monthlyUsage ?? 0) / 100000000).toFixed(2)
             })()}
             .
           </p>

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

@@ -34,6 +34,206 @@
     }
   }
 
+  [data-slot="create-form"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    margin-top: var(--space-4);
+
+    [data-slot="form-field"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+
+      [data-slot="field-label"] {
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+        color: var(--color-text-muted);
+      }
+
+      [data-slot="toggle-container"] {
+        display: flex;
+        align-items: center;
+      }
+
+      input[data-component="input"] {
+        flex: 1;
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        font-family: var(--font-mono);
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+        }
+
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
+      }
+    }
+
+    [data-slot="input-row"] {
+      display: flex;
+      flex-direction: row;
+      gap: var(--space-3);
+
+      @media (max-width: 40rem) {
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+    }
+
+    [data-slot="input-field"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      flex: 1;
+
+      p {
+        line-height: 1.2;
+        margin: 0;
+        color: var(--color-text-muted);
+        font-size: var(--font-size-sm);
+      }
+
+      input[data-component="input"] {
+        flex: 1;
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+        min-width: 0;
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+          box-shadow: 0 0 0 3px var(--color-accent-alpha);
+        }
+
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          background-color: var(--color-bg-surface);
+        }
+      }
+
+      [data-slot="field-with-connector"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+
+        [data-slot="field-connector"] {
+          font-size: var(--font-size-sm);
+          color: var(--color-text-muted);
+          white-space: nowrap;
+        }
+
+        input[data-component="input"] {
+          flex: 1;
+          min-width: 80px;
+        }
+      }
+    }
+
+    [data-slot="form-actions"] {
+      display: flex;
+      gap: var(--space-2);
+      margin-top: var(--space-1);
+    }
+
+    [data-slot="form-error"] {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+      margin-top: calc(var(--space-1) * -1);
+    }
+
+    [data-slot="model-toggle-label"] {
+      position: relative;
+      display: inline-block;
+      width: 2.5rem;
+      height: 1.5rem;
+      cursor: pointer;
+
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      span {
+        position: absolute;
+        inset: 0;
+        background-color: #ccc;
+        border: 1px solid #bbb;
+        border-radius: 1.5rem;
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0.125rem;
+          width: 1.25rem;
+          height: 1.25rem;
+          background-color: white;
+          border: 1px solid #ddd;
+          border-radius: 50%;
+          transform: translateY(-50%);
+          transition: all 0.3s ease;
+        }
+      }
+
+      input:checked + span {
+        background-color: #21ad0e;
+        border-color: #148605;
+
+        &::before {
+          transform: translateX(1rem) translateY(-50%);
+        }
+      }
+
+      &:hover span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+      }
+
+      input:checked:hover + span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
+      }
+
+      &:has(input:disabled) {
+        cursor: not-allowed;
+      }
+
+      input:disabled + span {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+
   [data-slot="reload-error"] {
     display: flex;
     align-items: center;
@@ -54,7 +254,8 @@
       gap: var(--space-2);
       margin: 0;
       flex-shrink: 0;
+      padding: 0;
+      border: none;
     }
   }
 }
-

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

@@ -1,17 +1,19 @@
-import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
-import { Show } from "solid-js"
+import { json, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { createEffect, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { withActor } from "~/context/auth.withActor"
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { Database, eq } from "@opencode-ai/console-core/drizzle/index.js"
 import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js"
 import styles from "./reload-section.module.css"
+import { queryBillingInfo } from "../../common"
 
 const reload = action(async (form: FormData) => {
   "use server"
   const workspaceID = form.get("workspaceID")?.toString()
   if (!workspaceID) return { error: "Workspace ID is required" }
   return json(await withActor(() => Billing.reload(), workspaceID), {
-    revalidate: getBillingInfo.key,
+    revalidate: queryBillingInfo.key,
   })
 }, "billing.reload")
 
@@ -20,12 +22,27 @@ const setReload = action(async (form: FormData) => {
   const workspaceID = form.get("workspaceID")?.toString()
   if (!workspaceID) return { error: "Workspace ID is required" }
   const reloadValue = form.get("reload")?.toString() === "true"
+  const amountStr = form.get("reloadAmount")?.toString()
+  const triggerStr = form.get("reloadTrigger")?.toString()
+
+  const reloadAmount = amountStr && amountStr.trim() !== "" ? parseInt(amountStr) : null
+  const reloadTrigger = triggerStr && triggerStr.trim() !== "" ? parseInt(triggerStr) : null
+
+  if (reloadValue) {
+    if (reloadAmount === null || reloadAmount < Billing.RELOAD_AMOUNT_MIN)
+      return { error: `Reload amount must be at least $${Billing.RELOAD_AMOUNT_MIN}` }
+    if (reloadTrigger === null || reloadTrigger < Billing.RELOAD_TRIGGER_MIN)
+      return { error: `Balance trigger must be at least $${Billing.RELOAD_TRIGGER_MIN}` }
+  }
+
   return json(
     await Database.use((tx) =>
       tx
         .update(BillingTable)
         .set({
           reload: reloadValue,
+          ...(reloadAmount !== null ? { reloadAmount } : {}),
+          ...(reloadTrigger !== null ? { reloadTrigger } : {}),
           ...(reloadValue
             ? {
                 reloadError: null,
@@ -35,22 +52,43 @@ const setReload = action(async (form: FormData) => {
         })
         .where(eq(BillingTable.workspaceID, workspaceID)),
     ),
-    { revalidate: getBillingInfo.key },
+    { revalidate: queryBillingInfo.key },
   )
 }, "billing.setReload")
 
-const getBillingInfo = query(async (workspaceID: string) => {
-  "use server"
-  return withActor(async () => {
-    return await Billing.get()
-  }, workspaceID)
-}, "billing.get")
-
 export function ReloadSection() {
   const params = useParams()
-  const balanceInfo = createAsync(() => getBillingInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id))
   const setReloadSubmission = useSubmission(setReload)
   const reloadSubmission = useSubmission(reload)
+  const [store, setStore] = createStore({
+    show: false,
+    reload: false,
+    reloadAmount: "",
+    reloadTrigger: "",
+  })
+
+  createEffect(() => {
+    if (!setReloadSubmission.pending && setReloadSubmission.result && !(setReloadSubmission.result as any).error) {
+      setStore("show", false)
+    }
+  })
+
+  function show() {
+    while (true) {
+      setReloadSubmission.clear()
+      if (!setReloadSubmission.result) break
+    }
+    const info = billingInfo()!
+    setStore("show", true)
+    setStore("reload", info.reload ? true : true)
+    setStore("reloadAmount", info.reloadAmount.toString())
+    setStore("reloadTrigger", info.reloadTrigger.toString())
+  }
+
+  function hide() {
+    setStore("show", false)
+  }
 
   return (
     <section class={styles.root}>
@@ -58,44 +96,102 @@ export function ReloadSection() {
         <h2>Auto Reload</h2>
         <div data-slot="title-row">
           <Show
-            when={balanceInfo()?.reload}
+            when={billingInfo()?.reload}
             fallback={
-              <p>Auto reload is disabled. Enable to automatically reload when balance is low.</p>
+              <p>
+                Auto reload is <b>disabled</b>. Enable to automatically reload when balance is low.
+              </p>
             }
           >
             <p>
-              We'll automatically reload <b>$20</b> (+$1.23 processing fee) when it reaches{" "}
-              <b>$5</b>.
+              Auto reload is <b>enabled</b>. We'll reload <b>${billingInfo()?.reloadAmount}</b> (+$1.23 processing fee)
+              when balance reaches <b>${billingInfo()?.reloadTrigger}</b>.
             </p>
           </Show>
-          <form action={setReload} method="post" data-slot="create-form">
-            <input type="hidden" name="workspaceID" value={params.id} />
-            <input type="hidden" name="reload" value={balanceInfo()?.reload ? "false" : "true"} />
-            <button data-color="primary" type="submit" disabled={setReloadSubmission.pending}>
-              <Show
-                when={balanceInfo()?.reload}
-                fallback={setReloadSubmission.pending ? "Enabling..." : "Enable"}
-              >
-                {setReloadSubmission.pending ? "Disabling..." : "Disable"}
-              </Show>
-            </button>
-          </form>
+          <button data-color="primary" type="button" onClick={() => show()}>
+            {billingInfo()?.reload ? "Edit" : "Enable"}
+          </button>
         </div>
       </div>
-      <div data-slot="section-content">
-        <Show when={balanceInfo()?.reload && balanceInfo()?.reloadError}>
+      <Show when={store.show}>
+        <form action={setReload} method="post" data-slot="create-form">
+          <div data-slot="form-field">
+            <label>
+              <span data-slot="field-label">Enable Auto Reload</span>
+              <div data-slot="toggle-container">
+                <label data-slot="model-toggle-label">
+                  <input
+                    type="checkbox"
+                    name="reload"
+                    value="true"
+                    checked={store.reload}
+                    onChange={(e) => setStore("reload", e.currentTarget.checked)}
+                  />
+                  <span></span>
+                </label>
+              </div>
+            </label>
+          </div>
+
+          <div data-slot="input-row">
+            <div data-slot="input-field">
+              <p>Reload $</p>
+              <input
+                data-component="input"
+                name="reloadAmount"
+                type="number"
+                min={billingInfo()?.reloadAmountMin.toString()}
+                step="1"
+                value={store.reloadAmount}
+                onInput={(e) => setStore("reloadAmount", e.currentTarget.value)}
+                placeholder={billingInfo()?.reloadAmount.toString()}
+                disabled={!store.reload}
+              />
+            </div>
+            <div data-slot="input-field">
+              <p>When balance reaches $</p>
+              <input
+                data-component="input"
+                name="reloadTrigger"
+                type="number"
+                min={billingInfo()?.reloadTriggerMin.toString()}
+                step="1"
+                value={store.reloadTrigger}
+                onInput={(e) => setStore("reloadTrigger", e.currentTarget.value)}
+                placeholder={billingInfo()?.reloadTrigger.toString()}
+                disabled={!store.reload}
+              />
+            </div>
+          </div>
+
+          <Show when={setReloadSubmission.result && (setReloadSubmission.result as any).error}>
+            {(err: any) => <div data-slot="form-error">{err()}</div>}
+          </Show>
+          <input type="hidden" name="workspaceID" value={params.id} />
+          <div data-slot="form-actions">
+            <button type="button" data-color="ghost" onClick={() => hide()}>
+              Cancel
+            </button>
+            <button type="submit" data-color="primary" disabled={setReloadSubmission.pending}>
+              {setReloadSubmission.pending ? "Saving..." : "Save"}
+            </button>
+          </div>
+        </form>
+      </Show>
+      <Show when={billingInfo()?.reload && billingInfo()?.reloadError}>
+        <div data-slot="section-content">
           <div data-slot="reload-error">
             <p>
               Reload failed at{" "}
-              {balanceInfo()?.timeReloadError!.toLocaleString("en-US", {
+              {billingInfo()?.timeReloadError!.toLocaleString("en-US", {
                 month: "short",
                 day: "numeric",
                 hour: "numeric",
                 minute: "2-digit",
                 second: "2-digit",
               })}
-              . Reason: {balanceInfo()?.reloadError?.replace(/\.$/, "")}. Please update your payment
-              method and try again.
+              . Reason: {billingInfo()?.reloadError?.replace(/\.$/, "")}. Please update your payment method and try
+              again.
             </p>
             <form action={reload} method="post" data-slot="create-form">
               <input type="hidden" name="workspaceID" value={params.id} />
@@ -104,8 +200,8 @@ export function ReloadSection() {
               </button>
             </form>
           </div>
-        </Show>
-      </div>
+        </div>
+      </Show>
     </section>
   )
 }

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

@@ -1,22 +1,32 @@
+import { Show, createMemo } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createAsync, useParams, useAction, useSubmission } from "@solidjs/router"
 import { NewUserSection } from "./new-user-section"
 import { UsageSection } from "./usage-section"
 import { ModelSection } from "./model-section"
 import { ProviderSection } from "./provider-section"
 import { IconLogo } from "~/component/icon"
-import { createAsync, useParams, useAction, useSubmission } from "@solidjs/router"
-import { querySessionInfo, queryBillingInfo, createCheckoutUrl } from "../common"
-import { Show, createMemo } from "solid-js"
+import { querySessionInfo, queryBillingInfo, createCheckoutUrl, formatBalance } from "../common"
 
 export default function () {
   const params = useParams()
   const userInfo = createAsync(() => querySessionInfo(params.id))
   const billingInfo = createAsync(() => queryBillingInfo(params.id))
-  const createCheckoutUrlAction = useAction(createCheckoutUrl)
-  const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
-
-  const balanceAmount = createMemo(() => {
-    return ((billingInfo()?.balance ?? 0) / 100000000).toFixed(2)
+  const checkoutAction = useAction(createCheckoutUrl)
+  const checkoutSubmission = useSubmission(createCheckoutUrl)
+  const [store, setStore] = createStore({
+    checkoutRedirecting: false,
   })
+  const balance = createMemo(() => formatBalance(billingInfo()?.balance ?? 0))
+
+  async function onClickCheckout() {
+    const baseUrl = window.location.href
+    const checkout = await checkoutAction(params.id, billingInfo()!.reloadAmount, baseUrl, baseUrl)
+    if (checkout && checkout.data) {
+      setStore("checkoutRedirecting", true)
+      window.location.href = checkout.data
+    }
+  }
 
   return (
     <div data-page="workspace-[id]">
@@ -38,21 +48,15 @@ export default function () {
                   <button
                     data-color="primary"
                     data-size="sm"
-                    disabled={createCheckoutUrlSubmission.pending}
-                    onClick={async () => {
-                      const baseUrl = window.location.href
-                      const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
-                      if (checkoutUrl) {
-                        window.location.href = checkoutUrl
-                      }
-                    }}
+                    disabled={checkoutSubmission.pending || store.checkoutRedirecting}
+                    onClick={onClickCheckout}
                   >
-                    {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable billing"}
+                    {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Enable billing"}
                   </button>
                 }
               >
                 <span data-slot="balance">
-                  Current balance <b>${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b>
+                  Current balance <b>${balance()}</b>
                 </span>
               </Show>
             </span>

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

@@ -171,7 +171,6 @@
     }
 
     @media (max-width: 40rem) {
-
       th,
       td {
         padding: var(--space-2) var(--space-3);
@@ -181,8 +180,7 @@
       th {
         &:nth-child(3)
 
-        /* Date */
-          {
+        /* Date */ {
           display: none;
         }
       }
@@ -190,11 +188,10 @@
       td {
         &:nth-child(3)
 
-        /* Date */
-          {
+        /* Date */ {
           display: none;
         }
       }
     }
   }
-}
+}

packages/console/app/src/routes/workspace/[id]/members/role-dropdown.css

@@ -69,4 +69,4 @@
       }
     }
   }
-}
+}

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

@@ -5,15 +5,7 @@ import { withActor } from "~/context/auth.withActor"
 import { ZenData } from "@opencode-ai/console-core/model.js"
 import styles from "./model-section.module.css"
 import { querySessionInfo } from "../common"
-import {
-  IconAlibaba,
-  IconAnthropic,
-  IconMoonshotAI,
-  IconOpenAI,
-  IconStealth,
-  IconXai,
-  IconZai,
-} from "~/component/icon"
+import { IconAlibaba, IconAnthropic, IconMoonshotAI, IconOpenAI, IconStealth, IconXai, IconZai } from "~/component/icon"
 
 const getModelLab = (modelId: string) => {
   if (modelId.startsWith("claude")) return "Anthropic"
@@ -31,6 +23,7 @@ const getModelsInfo = query(async (workspaceID: string) => {
     return {
       all: Object.entries(ZenData.list().models)
         .filter(([id, _model]) => !["claude-3-5-haiku", "minimax-m2"].includes(id))
+        .filter(([id, _model]) => !id.startsWith("an-"))
         .sort(([_idA, modelA], [_idB, modelB]) => modelA.name.localeCompare(modelB.name))
         .map(([id, model]) => ({ id, name: model.name })),
       disabled: await Model.listDisabled(),
@@ -75,8 +68,7 @@ export function ModelSection() {
       <div data-slot="section-title">
         <h2>Models</h2>
         <p>
-          Manage which models workspace members can access.{" "}
-          <a href="/docs/zen#pricing ">Learn more</a>.
+          Manage which models workspace members can access. <a href="/docs/zen#pricing ">Learn more</a>.
         </p>
       </div>
       <div data-slot="models-list">

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

@@ -140,4 +140,4 @@
       }
     }
   }
-}
+}

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

@@ -128,7 +128,6 @@
     }
 
     @media (max-width: 40rem) {
-
       th,
       td {
         padding: var(--space-2) var(--space-3);
@@ -136,4 +135,4 @@
       }
     }
   }
-}
+}

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

@@ -22,7 +22,9 @@ const removeProvider = action(async (form: FormData) => {
   if (!provider) return { error: "Provider is required" }
   const workspaceID = form.get("workspaceID")?.toString()
   if (!workspaceID) return { error: "Workspace ID is required" }
-  return json(await withActor(() => Provider.remove({ provider }), workspaceID), { revalidate: listProviders.key })
+  return json(await withActor(() => Provider.remove({ provider }), workspaceID), {
+    revalidate: listProviders.key,
+  })
 }, "provider.remove")
 
 const saveProvider = action(async (form: FormData) => {

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

@@ -31,7 +31,7 @@
       margin: 0;
     }
 
-    >button {
+    > button {
       align-self: flex-start;
     }
   }
@@ -80,7 +80,7 @@
       }
     }
 
-    >button[type="reset"] {
+    > button[type="reset"] {
       align-self: flex-start;
     }
 
@@ -91,4 +91,4 @@
       margin-top: calc(var(--space-1) * -1);
     }
   }
-}
+}

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

@@ -1,6 +1,6 @@
 import { Resource } from "@opencode-ai/console-resource"
 import { Actor } from "@opencode-ai/console-core/actor.js"
-import { action, query } from "@solidjs/router"
+import { action, json, 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"
@@ -34,6 +34,11 @@ export function formatDateUTC(date: Date) {
   return date.toLocaleDateString("en-US", options)
 }
 
+export function formatBalance(amount: number) {
+  const balance = ((amount ?? 0) / 100000000).toFixed(2)
+  return balance === "-0.00" ? "0.00" : balance
+}
+
 export async function getLastSeenWorkspaceID() {
   "use server"
   return withActor(async () => {
@@ -62,23 +67,40 @@ export const querySessionInfo = query(async (workspaceID: string) => {
   return withActor(() => {
     return {
       isAdmin: Actor.userRole() === "admin",
-      isBeta:
-        Resource.App.stage === "production"
-          ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y"
-          : true,
+      isBeta: Resource.App.stage === "production" ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y" : true,
     }
   }, workspaceID)
 }, "session.get")
 
 export const createCheckoutUrl = action(
-  async (workspaceID: string, successUrl: string, cancelUrl: string) => {
+  async (workspaceID: string, amount: number, successUrl: string, cancelUrl: string) => {
     "use server"
-    return withActor(() => Billing.generateCheckoutUrl({ successUrl, cancelUrl }), workspaceID)
+    return json(
+      await withActor(
+        () =>
+          Billing.generateCheckoutUrl({ amount, successUrl, cancelUrl })
+            .then((data) => ({ error: undefined, data }))
+            .catch((e) => ({
+              error: e.message as string,
+              data: undefined,
+            })),
+        workspaceID,
+      ),
+    )
   },
   "checkoutUrl",
 )
 
 export const queryBillingInfo = query(async (workspaceID: string) => {
   "use server"
-  return withActor(() => Billing.get(), workspaceID)
+  return withActor(async () => {
+    const billing = await Billing.get()
+    return {
+      ...billing,
+      reloadAmount: billing.reloadAmount ?? Billing.RELOAD_AMOUNT,
+      reloadAmountMin: Billing.RELOAD_AMOUNT_MIN,
+      reloadTrigger: billing.reloadTrigger ?? Billing.RELOAD_TRIGGER,
+      reloadTriggerMin: Billing.RELOAD_TRIGGER_MIN,
+    }
+  }, workspaceID)
 }, "billing.get")

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

@@ -277,7 +277,7 @@ body {
       margin-bottom: 24px;
     }
 
-    strong {
+    h1 {
       font-size: 28px;
       color: var(--color-text-strong);
       font-weight: 500;

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

@@ -3,6 +3,7 @@ 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"
+import { config } from "~/config"
 import zenLogoDark from "../../asset/zen-ornate-dark.svg"
 import compareVideo from "../../asset/lander/opencode-comparison-min.mp4"
 import compareVideoPoster from "../../asset/lander/opencode-comparison-poster.png"
@@ -30,6 +31,7 @@ export default function Home() {
     <main data-page="zen">
       <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
       <Title>OpenCode Zen | A curated set of reliable optimized models for coding agents</Title>
+      <Link rel="canonical" href={`${config.baseUrl}/zen`} />
       <Link rel="icon" type="image/svg+xml" href="/favicon-zen.svg" />
       <Meta property="og:image" content="/social-share-zen.png" />
       <Meta name="twitter:image" content="/social-share-zen.png" />
@@ -42,7 +44,7 @@ export default function Home() {
             <div data-slot="hero-copy">
               <img data-slot="zen logo light" src={zenLogoLight} alt="zen logo light" />
               <img data-slot="zen logo dark" src={zenLogoDark} alt="zen logo dark" />
-              <strong>Reliable optimized models for coding agents</strong>
+              <h1>Reliable optimized models for coding agents</h1>
               <p>
                 Zen gives you access to a curated set of AI models that OpenCode has tested and benchmarked specifically
                 for coding agents. No need to worry about inconsistent performance and quality, use validated models

packages/console/app/src/routes/zen/util/error.ts

@@ -3,3 +3,4 @@ export class CreditsError extends Error {}
 export class MonthlyLimitError extends Error {}
 export class UserLimitError extends Error {}
 export class ModelError extends Error {}
+export class RateLimitError extends Error {}

packages/console/app/src/routes/zen/util/handler.ts

@@ -12,18 +12,14 @@ import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
 import { ModelTable } from "@opencode-ai/console-core/schema/model.sql.js"
 import { ProviderTable } from "@opencode-ai/console-core/schema/provider.sql.js"
 import { logger } from "./logger"
-import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError } from "./error"
-import {
-  createBodyConverter,
-  createStreamPartConverter,
-  createResponseConverter,
-} from "./provider/provider"
+import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError, RateLimitError } from "./error"
+import { createBodyConverter, createStreamPartConverter, createResponseConverter } from "./provider/provider"
 import { anthropicHelper } from "./provider/anthropic"
 import { openaiHelper } from "./provider/openai"
 import { oaCompatHelper } from "./provider/openai-compatible"
+import { createRateLimiter } from "./rateLimiter"
 
 type ZenData = Awaited<ReturnType<typeof ZenData.list>>
-type Model = ZenData["models"][string]
 
 export async function handler(
   input: APIEvent,
@@ -32,6 +28,10 @@ export async function handler(
     parseApiKey: (headers: Headers) => string | undefined
   },
 ) {
+  type AuthInfo = Awaited<ReturnType<typeof authenticate>>
+  type ModelInfo = Awaited<ReturnType<typeof validateModel>>
+  type ProviderInfo = Awaited<ReturnType<typeof selectProvider>>
+
   const FREE_WORKSPACES = [
     "wrk_01K46JDFR0E75SG2Q8K172KF3Y", // frank
     "wrk_01K6W1A3VE0KMNVSCQT43BG2SX", // opencode bench
@@ -39,6 +39,7 @@ export async function handler(
 
   try {
     const body = await input.request.json()
+    const ip = input.request.headers.get("x-real-ip") ?? ""
     logger.metric({
       is_tream: !!body.stream,
       session: input.request.headers.get("x-opencode-session"),
@@ -46,13 +47,11 @@ export async function handler(
     })
     const zenData = ZenData.list()
     const modelInfo = validateModel(zenData, body.model)
-    const providerInfo = selectProvider(
-      zenData,
-      modelInfo,
-      input.request.headers.get("x-real-ip") ?? "",
-    )
+    const providerInfo = selectProvider(zenData, modelInfo, ip)
     const authInfo = await authenticate(modelInfo, providerInfo)
-    validateBilling(modelInfo, authInfo)
+    const rateLimiter = createRateLimiter(modelInfo.id, modelInfo.rateLimit, ip)
+    await rateLimiter?.check()
+    validateBilling(authInfo, modelInfo)
     validateModelSettings(authInfo)
     updateProviderKey(authInfo, providerInfo)
     logger.metric({ provider: providerInfo.id })
@@ -67,7 +66,7 @@ export async function handler(
       }),
     )
     logger.debug("REQUEST URL: " + reqUrl)
-    logger.debug("REQUEST: " + reqBody)
+    logger.debug("REQUEST: " + reqBody.substring(0, 300) + "...")
     const res = await fetch(reqUrl, {
       method: "POST",
       headers: (() => {
@@ -92,9 +91,6 @@ export async function handler(
       }
     }
     logger.debug("STATUS: " + res.status + " " + res.statusText)
-    if (res.status === 400 || res.status === 503) {
-      logger.debug("RESPONSE: " + (await res.text()))
-    }
 
     // Handle non-streaming response
     if (!body.stream) {
@@ -103,6 +99,7 @@ export async function handler(
       const body = JSON.stringify(responseConverter(json))
       logger.metric({ response_length: body.length })
       logger.debug("RESPONSE: " + body)
+      await rateLimiter?.track()
       await trackUsage(authInfo, modelInfo, providerInfo, json.usage)
       await reload(authInfo)
       return new Response(body, {
@@ -131,6 +128,7 @@ export async function handler(
                   response_length: responseLength,
                   "timestamp.last_byte": Date.now(),
                 })
+                await rateLimiter?.track()
                 const usage = usageParser.retrieve()
                 if (usage) {
                   await trackUsage(authInfo, modelInfo, providerInfo, usage)
@@ -205,6 +203,15 @@ export async function handler(
         { status: 401 },
       )
 
+    if (error instanceof RateLimitError)
+      return new Response(
+        JSON.stringify({
+          type: "error",
+          error: { type: error.constructor.name, message: error.message },
+        }),
+        { status: 429 },
+      )
+
     return new Response(
       JSON.stringify({
         type: "error",
@@ -229,12 +236,8 @@ export async function handler(
     return { id: modelId, ...modelData }
   }
 
-  function selectProvider(
-    zenData: ZenData,
-    model: Awaited<ReturnType<typeof validateModel>>,
-    ip: string,
-  ) {
-    const providers = model.providers
+  function selectProvider(zenData: ZenData, modelInfo: ModelInfo, ip: string) {
+    const providers = modelInfo.providers
       .filter((provider) => !provider.disabled)
       .flatMap((provider) => Array<typeof provider>(provider.weight ?? 1).fill(provider))
 
@@ -247,26 +250,22 @@ export async function handler(
       throw new ModelError(`Provider ${provider.id} not supported`)
     }
 
-    const format = zenData.providers[provider.id].format
-
     return {
       ...provider,
       ...zenData.providers[provider.id],
-      ...(format === "anthropic"
-        ? anthropicHelper
-        : format === "openai"
-          ? openaiHelper
-          : oaCompatHelper),
+      ...(() => {
+        const format = zenData.providers[provider.id].format
+        if (format === "anthropic") return anthropicHelper
+        if (format === "openai") return openaiHelper
+        return oaCompatHelper
+      })(),
     }
   }
 
-  async function authenticate(
-    model: Awaited<ReturnType<typeof validateModel>>,
-    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
-  ) {
+  async function authenticate(modelInfo: ModelInfo, providerInfo: ProviderInfo) {
     const apiKey = opts.parseApiKey(input.request.headers)
     if (!apiKey) {
-      if (model.allowAnonymous) return
+      if (modelInfo.allowAnonymous) return
       throw new AuthError("Missing API key.")
     }
 
@@ -281,6 +280,7 @@ export async function handler(
             monthlyLimit: BillingTable.monthlyLimit,
             monthlyUsage: BillingTable.monthlyUsage,
             timeMonthlyUsageUpdated: BillingTable.timeMonthlyUsageUpdated,
+            reloadTrigger: BillingTable.reloadTrigger,
           },
           user: {
             id: UserTable.id,
@@ -296,20 +296,11 @@ export async function handler(
         .from(KeyTable)
         .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, KeyTable.workspaceID))
         .innerJoin(BillingTable, eq(BillingTable.workspaceID, KeyTable.workspaceID))
-        .innerJoin(
-          UserTable,
-          and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)),
-        )
-        .leftJoin(
-          ModelTable,
-          and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, model.id)),
-        )
+        .innerJoin(UserTable, and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)))
+        .leftJoin(ModelTable, and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, modelInfo.id)))
         .leftJoin(
           ProviderTable,
-          and(
-            eq(ProviderTable.workspaceID, KeyTable.workspaceID),
-            eq(ProviderTable.provider, providerInfo.id),
-          ),
+          and(eq(ProviderTable.workspaceID, KeyTable.workspaceID), eq(ProviderTable.provider, providerInfo.id)),
         )
         .where(and(eq(KeyTable.key, apiKey), isNull(KeyTable.timeDeleted)))
         .then((rows) => rows[0]),
@@ -332,11 +323,11 @@ export async function handler(
     }
   }
 
-  function validateBilling(model: Model, authInfo: Awaited<ReturnType<typeof authenticate>>) {
+  function validateBilling(authInfo: AuthInfo, modelInfo: ModelInfo) {
     if (!authInfo) return
     if (authInfo.provider?.credentials) return
     if (authInfo.isFree) return
-    if (model.allowAnonymous) return
+    if (modelInfo.allowAnonymous) return
 
     const billing = authInfo.billing
     if (!billing.paymentMethodID)
@@ -380,39 +371,24 @@ export async function handler(
     }
   }
 
-  function validateModelSettings(authInfo: Awaited<ReturnType<typeof authenticate>>) {
+  function validateModelSettings(authInfo: AuthInfo) {
     if (!authInfo) return
     if (authInfo.isDisabled) throw new ModelError("Model is disabled")
   }
 
-  function updateProviderKey(
-    authInfo: Awaited<ReturnType<typeof authenticate>>,
-    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
-  ) {
+  function updateProviderKey(authInfo: AuthInfo, providerInfo: ProviderInfo) {
     if (!authInfo) return
     if (!authInfo.provider?.credentials) return
     providerInfo.apiKey = authInfo.provider.credentials
   }
 
-  async function trackUsage(
-    authInfo: Awaited<ReturnType<typeof authenticate>>,
-    modelInfo: ReturnType<typeof validateModel>,
-    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
-    usage: any,
-  ) {
-    const {
-      inputTokens,
-      outputTokens,
-      reasoningTokens,
-      cacheReadTokens,
-      cacheWrite5mTokens,
-      cacheWrite1hTokens,
-    } = providerInfo.normalizeUsage(usage)
+  async function trackUsage(authInfo: AuthInfo, modelInfo: ModelInfo, providerInfo: ProviderInfo, usage: any) {
+    const { inputTokens, outputTokens, reasoningTokens, cacheReadTokens, cacheWrite5mTokens, cacheWrite1hTokens } =
+      providerInfo.normalizeUsage(usage)
 
     const modelCost =
       modelInfo.cost200K &&
-      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) >
-        200_000
+      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) > 200_000
         ? modelInfo.cost200K
         : modelInfo.cost
 
@@ -463,8 +439,7 @@ export async function handler(
 
     if (!authInfo) return
 
-    const cost =
-      authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
+    const cost = authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
     await Database.transaction(async (tx) => {
       await tx.insert(UsageTable).values({
         workspaceID: authInfo.workspaceID,
@@ -504,9 +479,7 @@ export async function handler(
             `,
           timeMonthlyUsageUpdated: sql`now()`,
         })
-        .where(
-          and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)),
-        )
+        .where(and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)))
     })
 
     await Database.use((tx) =>
@@ -517,7 +490,7 @@ export async function handler(
     )
   }
 
-  async function reload(authInfo: Awaited<ReturnType<typeof authenticate>>) {
+  async function reload(authInfo: AuthInfo) {
     if (!authInfo) return
     if (authInfo.isFree) return
     if (authInfo.provider?.credentials) return
@@ -532,11 +505,11 @@ export async function handler(
           and(
             eq(BillingTable.workspaceID, authInfo.workspaceID),
             eq(BillingTable.reload, true),
-            lt(BillingTable.balance, centsToMicroCents(Billing.CHARGE_THRESHOLD)),
-            or(
-              isNull(BillingTable.timeReloadLockedTill),
-              lt(BillingTable.timeReloadLockedTill, sql`now()`),
+            lt(
+              BillingTable.balance,
+              centsToMicroCents((authInfo.billing.reloadTrigger ?? Billing.RELOAD_TRIGGER) * 100),
             ),
+            or(isNull(BillingTable.timeReloadLockedTill), lt(BillingTable.timeReloadLockedTill, sql`now()`)),
           ),
         ),
     )

packages/console/app/src/routes/zen/util/provider/anthropic.ts

@@ -98,7 +98,10 @@ export function fromAnthropicRequest(body: any): CommonRequest {
       typeof (src as any).media_type === "string" &&
       typeof (src as any).data === "string"
     )
-      return { type: "image_url", image_url: { url: `data:${(src as any).media_type};base64,${(src as any).data}` } }
+      return {
+        type: "image_url",
+        image_url: { url: `data:${(src as any).media_type};base64,${(src as any).data}` },
+      }
     return undefined
   }
 
@@ -165,7 +168,11 @@ export function fromAnthropicRequest(body: any): CommonRequest {
         .filter((t: any) => t && typeof t === "object" && "input_schema" in t)
         .map((t: any) => ({
           type: "function",
-          function: { name: (t as any).name, description: (t as any).description, parameters: (t as any).input_schema },
+          function: {
+            name: (t as any).name,
+            description: (t as any).description,
+            parameters: (t as any).input_schema,
+          },
         }))
     : undefined
 
@@ -452,7 +459,12 @@ export function toAnthropicResponse(resp: CommonResponse) {
         } catch {
           input = (tc as any).function.arguments
         }
-        content.push({ type: "tool_use", id: (tc as any).id, name: (tc as any).function.name, input })
+        content.push({
+          type: "tool_use",
+          id: (tc as any).id,
+          name: (tc as any).function.name,
+          input,
+        })
       }
     }
   }
@@ -511,13 +523,22 @@ export function fromAnthropicChunk(chunk: string): CommonChunk | string {
   if (json.type === "content_block_start") {
     const cb = json.content_block
     if (cb?.type === "text") {
-      out.choices.push({ index: json.index ?? 0, delta: { role: "assistant", content: "" }, finish_reason: null })
+      out.choices.push({
+        index: json.index ?? 0,
+        delta: { role: "assistant", content: "" },
+        finish_reason: null,
+      })
     } else if (cb?.type === "tool_use") {
       out.choices.push({
         index: json.index ?? 0,
         delta: {
           tool_calls: [
-            { index: json.index ?? 0, id: cb.id, type: "function", function: { name: cb.name, arguments: "" } },
+            {
+              index: json.index ?? 0,
+              id: cb.id,
+              type: "function",
+              function: { name: cb.name, arguments: "" },
+            },
           ],
         },
         finish_reason: null,
@@ -532,7 +553,9 @@ export function fromAnthropicChunk(chunk: string): CommonChunk | string {
     } else if (d?.type === "input_json_delta") {
       out.choices.push({
         index: json.index ?? 0,
-        delta: { tool_calls: [{ index: json.index ?? 0, function: { arguments: d.partial_json } }] },
+        delta: {
+          tool_calls: [{ index: json.index ?? 0, function: { arguments: d.partial_json } }],
+        },
         finish_reason: null,
       })
     }

packages/console/app/src/routes/zen/util/provider/openai-compatible.ts

@@ -532,7 +532,9 @@ export function toOaCompatibleChunk(chunk: CommonChunk): string {
       total_tokens: chunk.usage.total_tokens,
       ...(chunk.usage.prompt_tokens_details?.cached_tokens
         ? {
-            prompt_tokens_details: { cached_tokens: chunk.usage.prompt_tokens_details.cached_tokens },
+            prompt_tokens_details: {
+              cached_tokens: chunk.usage.prompt_tokens_details.cached_tokens,
+            },
           }
         : {}),
     }

packages/console/app/src/routes/zen/util/provider/openai.ts

@@ -77,7 +77,10 @@ export function fromOpenaiRequest(body: any): CommonRequest {
       typeof (s as any).media_type === "string" &&
       typeof (s as any).data === "string"
     )
-      return { type: "image_url", image_url: { url: `data:${(s as any).media_type};base64,${(s as any).data}` } }
+      return {
+        type: "image_url",
+        image_url: { url: `data:${(s as any).media_type};base64,${(s as any).data}` },
+      }
     return undefined
   }
 
@@ -153,7 +156,11 @@ export function fromOpenaiRequest(body: any): CommonRequest {
     }
 
     if ((m as any).role === "tool") {
-      msgs.push({ role: "tool", tool_call_id: (m as any).tool_call_id, content: (m as any).content })
+      msgs.push({
+        role: "tool",
+        tool_call_id: (m as any).tool_call_id,
+        content: (m as any).content,
+      })
       continue
     }
   }
@@ -210,7 +217,10 @@ export function toOpenaiRequest(body: CommonRequest) {
       typeof (s as any).media_type === "string" &&
       typeof (s as any).data === "string"
     )
-      return { type: "input_image", image_url: { url: `data:${(s as any).media_type};base64,${(s as any).data}` } }
+      return {
+        type: "input_image",
+        image_url: { url: `data:${(s as any).media_type};base64,${(s as any).data}` },
+      }
     return undefined
   }
 
@@ -498,7 +508,9 @@ export function fromOpenaiChunk(chunk: string): CommonChunk | string {
     if (typeof name === "string" && name.length > 0) {
       out.choices.push({
         index: 0,
-        delta: { tool_calls: [{ index: 0, id, type: "function", function: { name, arguments: "" } }] },
+        delta: {
+          tool_calls: [{ index: 0, id, type: "function", function: { name, arguments: "" } }],
+        },
         finish_reason: null,
       })
     }
@@ -555,7 +567,12 @@ export function toOpenaiChunk(chunk: CommonChunk): string {
   const model = chunk.model
 
   if (d.content) {
-    const data = { id, type: "response.output_text.delta", delta: d.content, response: { id, model } }
+    const data = {
+      id,
+      type: "response.output_text.delta",
+      delta: d.content,
+      response: { id, model },
+    }
     return `event: response.output_text.delta\ndata: ${JSON.stringify(data)}`
   }
 
@@ -565,7 +582,13 @@ export function toOpenaiChunk(chunk: CommonChunk): string {
         const data = {
           type: "response.output_item.added",
           output_index: 0,
-          item: { id: tc.id, type: "function_call", name: tc.function.name, call_id: tc.id, arguments: "" },
+          item: {
+            id: tc.id,
+            type: "function_call",
+            name: tc.function.name,
+            call_id: tc.id,
+            arguments: "",
+          },
         }
         return `event: response.output_item.added\ndata: ${JSON.stringify(data)}`
       }
@@ -593,7 +616,11 @@ export function toOpenaiChunk(chunk: CommonChunk): string {
         }
       : undefined
 
-    const data: any = { id, type: "response.completed", response: { id, model, ...(usage ? { usage } : {}) } }
+    const data: any = {
+      id,
+      type: "response.completed",
+      response: { id, model, ...(usage ? { usage } : {}) },
+    }
     return `event: response.completed\ndata: ${JSON.stringify(data)}`
   }
 

packages/console/app/src/routes/zen/util/rateLimiter.ts

@@ -0,0 +1,35 @@
+import { Resource } from "@opencode-ai/console-resource"
+import { RateLimitError } from "./error"
+import { logger } from "./logger"
+
+export function createRateLimiter(model: string, limit: number | undefined, ip: string) {
+  if (!limit) return
+
+  const now = Date.now()
+  const currKey = `usage:${ip}:${model}:${buildYYYYMMDDHH(now)}`
+  const prevKey = `usage:${ip}:${model}:${buildYYYYMMDDHH(now - 3_600_000)}`
+  let currRate: number
+  let prevRate: number
+
+  return {
+    track: async () => {
+      await Resource.GatewayKv.put(currKey, currRate + 1, { expirationTtl: 3600 })
+    },
+    check: async () => {
+      const values = await Resource.GatewayKv.get([currKey, prevKey])
+      const prevValue = values?.get(prevKey)
+      const currValue = values?.get(currKey)
+      prevRate = prevValue ? parseInt(prevValue) : 0
+      currRate = currValue ? parseInt(currValue) : 0
+      logger.debug(`rate limit ${model} prev/curr: ${prevRate}/${currRate}`)
+      if (prevRate + currRate >= limit) throw new RateLimitError(`Rate limit exceeded. Please try again later.`)
+    },
+  }
+}
+
+function buildYYYYMMDDHH(timestamp: number) {
+  return new Date(timestamp)
+    .toISOString()
+    .replace(/[^0-9]/g, "")
+    .substring(0, 10)
+}

packages/console/app/src/routes/zen/v1/models.ts

@@ -50,10 +50,7 @@ export async function GET(input: APIEvent) {
         })
         .from(KeyTable)
         .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, KeyTable.workspaceID))
-        .leftJoin(
-          ModelTable,
-          and(eq(ModelTable.workspaceID, KeyTable.workspaceID), isNull(ModelTable.timeDeleted)),
-        )
+        .leftJoin(ModelTable, and(eq(ModelTable.workspaceID, KeyTable.workspaceID), isNull(ModelTable.timeDeleted)))
         .where(and(eq(KeyTable.key, apiKey), isNull(KeyTable.timeDeleted)))
         .then((rows) => rows.map((row) => row.model)),
     )

packages/console/app/sst-env.d.ts

@@ -6,4 +6,4 @@
 /// <reference path="../../../sst-env.d.ts" />
 
 import "sst"
-export {}
+export {}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,17 +473,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -504,10 +486,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -599,10 +578,7 @@
       "indexes": {
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         }
       },
@@ -610,10 +586,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -670,9 +643,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -680,9 +651,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -699,4 +668,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,17 +473,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -504,10 +486,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -599,10 +578,7 @@
       "indexes": {
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         }
       },
@@ -610,10 +586,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -670,9 +643,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -680,9 +651,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -699,4 +668,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,17 +473,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -504,10 +486,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -592,10 +571,7 @@
       "indexes": {
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         }
       },
@@ -603,10 +579,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -663,9 +636,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -673,9 +644,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -692,4 +661,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,17 +473,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -504,10 +486,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -599,10 +578,7 @@
       "indexes": {
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         }
       },
@@ -610,10 +586,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -670,9 +643,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -680,9 +651,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -699,4 +668,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,17 +473,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -504,10 +486,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -613,18 +592,12 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         }
       },
@@ -632,10 +605,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -692,9 +662,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -702,9 +670,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -721,4 +687,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,17 +473,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -504,10 +486,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -613,32 +592,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -646,10 +615,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -706,9 +672,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -716,9 +680,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -735,4 +697,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,17 +473,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -504,10 +486,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -599,32 +578,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -632,10 +601,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -692,9 +658,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -702,9 +666,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -721,4 +683,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -493,17 +480,12 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         },
         "name": {
           "name": "name",
-          "columns": [
-            "workspace_id",
-            "name"
-          ],
+          "columns": ["workspace_id", "name"],
           "isUnique": true
         }
       },
@@ -511,10 +493,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -606,32 +585,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -639,10 +608,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -699,9 +665,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -709,9 +673,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -728,4 +690,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -493,9 +480,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -503,10 +488,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -598,32 +580,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -631,10 +603,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -691,9 +660,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -701,9 +668,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -720,4 +685,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -479,9 +466,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -489,10 +474,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -584,32 +566,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -617,10 +589,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -677,9 +646,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -687,9 +654,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -706,4 +671,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -479,9 +466,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -489,10 +474,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -584,32 +566,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -617,10 +589,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -677,9 +646,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -687,9 +654,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -706,4 +671,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -479,9 +466,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -489,10 +474,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -605,32 +587,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -638,10 +610,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -698,9 +667,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -708,9 +675,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -727,4 +692,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -479,9 +466,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -489,10 +474,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -549,10 +531,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -560,10 +539,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -676,32 +652,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -709,10 +675,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -769,9 +732,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -779,9 +740,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -798,4 +757,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -398,10 +388,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -479,9 +466,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -489,10 +474,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -549,10 +531,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -560,10 +539,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -627,10 +603,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -638,10 +611,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -754,32 +724,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -787,10 +747,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -847,9 +804,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -857,9 +812,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -876,4 +829,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -180,9 +178,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -190,10 +186,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -280,10 +273,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -405,10 +395,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -486,9 +473,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -496,10 +481,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -556,10 +538,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -567,10 +546,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -634,10 +610,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -645,10 +618,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -761,32 +731,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -794,10 +754,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -854,9 +811,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -864,9 +819,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -883,4 +836,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -187,9 +185,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -197,10 +193,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -287,10 +280,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -412,10 +402,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -493,9 +480,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -503,10 +488,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -563,10 +545,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -574,10 +553,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -641,10 +617,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -652,10 +625,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -768,32 +738,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -801,10 +761,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -861,9 +818,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -871,9 +826,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -890,4 +843,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -48,9 +48,7 @@
       "indexes": {
         "email": {
           "name": "email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": true
         }
       },
@@ -117,10 +115,7 @@
       "indexes": {
         "provider": {
           "name": "provider",
-          "columns": [
-            "provider",
-            "subject"
-          ],
+          "columns": ["provider", "subject"],
           "isUnique": true
         }
       },
@@ -257,9 +252,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -267,10 +260,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -357,10 +347,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -482,10 +469,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -563,9 +547,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -573,10 +555,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -633,10 +612,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -644,10 +620,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -711,10 +684,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -722,10 +692,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -838,32 +805,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -871,10 +828,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -931,9 +885,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -941,9 +893,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -960,4 +910,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -102,17 +102,12 @@
       "indexes": {
         "provider": {
           "name": "provider",
-          "columns": [
-            "provider",
-            "subject"
-          ],
+          "columns": ["provider", "subject"],
           "isUnique": true
         },
         "account_id": {
           "name": "account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         }
       },
@@ -249,9 +244,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -259,10 +252,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -349,10 +339,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -474,10 +461,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -555,9 +539,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -565,10 +547,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -625,10 +604,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -636,10 +612,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -703,10 +676,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -714,10 +684,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -830,32 +797,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -863,10 +820,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -923,9 +877,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -933,9 +885,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -952,4 +902,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -43,9 +43,7 @@
       "compositePrimaryKeys": {
         "account_id_pk": {
           "name": "account_id_pk",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -109,17 +107,12 @@
       "indexes": {
         "provider": {
           "name": "provider",
-          "columns": [
-            "provider",
-            "subject"
-          ],
+          "columns": ["provider", "subject"],
           "isUnique": true
         },
         "account_id": {
           "name": "account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         }
       },
@@ -127,9 +120,7 @@
       "compositePrimaryKeys": {
         "auth_id_pk": {
           "name": "auth_id_pk",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -263,9 +254,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -273,10 +262,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -363,10 +349,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -488,10 +471,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -569,9 +549,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -579,10 +557,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -639,10 +614,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -650,10 +622,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -717,10 +686,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -728,10 +694,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -844,32 +807,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -877,10 +830,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -937,9 +887,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -947,9 +895,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -966,4 +912,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -43,9 +43,7 @@
       "compositePrimaryKeys": {
         "account_id_pk": {
           "name": "account_id_pk",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -109,17 +107,12 @@
       "indexes": {
         "provider": {
           "name": "provider",
-          "columns": [
-            "provider",
-            "subject"
-          ],
+          "columns": ["provider", "subject"],
           "isUnique": true
         },
         "account_id": {
           "name": "account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         }
       },
@@ -127,9 +120,7 @@
       "compositePrimaryKeys": {
         "auth_id_pk": {
           "name": "auth_id_pk",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -277,9 +268,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -287,10 +276,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -377,10 +363,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -502,10 +485,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -583,9 +563,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -593,10 +571,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -653,10 +628,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -664,10 +636,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -731,10 +700,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -742,10 +708,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -858,32 +821,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -891,10 +844,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -951,9 +901,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -961,9 +909,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -980,4 +926,4 @@
     "tables": {},
     "indexes": {}
   }
-}
+}

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

@@ -269,4 +269,4 @@
       "breakpoints": true
     }
   ]
-}
+}

packages/console/core/package.json

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

packages/console/core/script/lookup-user.ts

@@ -8,22 +8,15 @@ if (!email) {
   process.exit(1)
 }
 
-const authData = await printTable("Auth", (tx) =>
-  tx.select().from(AuthTable).where(eq(AuthTable.subject, email)),
-)
+const authData = await printTable("Auth", (tx) => tx.select().from(AuthTable).where(eq(AuthTable.subject, email)))
 if (authData.length === 0) {
   console.error("User not found")
   process.exit(1)
 }
 
-await printTable("Auth", (tx) =>
-  tx.select().from(AuthTable).where(eq(AuthTable.accountID, authData[0].accountID)),
-)
+await printTable("Auth", (tx) => tx.select().from(AuthTable).where(eq(AuthTable.accountID, authData[0].accountID)))
 
-function printTable(
-  title: string,
-  callback: (tx: Database.TxOrDb) => Promise<any[]>,
-): Promise<any[]> {
+function printTable(title: string, callback: (tx: Database.TxOrDb) => Promise<any[]>): Promise<any[]> {
   return Database.use(async (tx) => {
     const data = await callback(tx)
     console.log(`== ${title} ==`)

packages/console/core/script/reset-db.ts

@@ -8,14 +8,6 @@ import { KeyTable } from "../src/schema/key.sql.js"
 
 if (Resource.App.stage !== "frank") throw new Error("This script is only for frank")
 
-for (const table of [
-  AccountTable,
-  BillingTable,
-  KeyTable,
-  PaymentTable,
-  UsageTable,
-  UserTable,
-  WorkspaceTable,
-]) {
+for (const table of [AccountTable, BillingTable, KeyTable, PaymentTable, UsageTable, UserTable, WorkspaceTable]) {
   await Database.use((tx) => tx.delete(table))
 }

packages/console/core/script/update-models.ts

@@ -7,7 +7,6 @@ import { ZenData } from "../src/model"
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
 const models = await $`bun sst secret list`.cwd(root).text()
-console.log("models", models)
 
 // read the line starting with "ZEN_MODELS"
 const oldValue1 = models

packages/console/core/src/billing.ts

@@ -10,13 +10,12 @@ import { centsToMicroCents } from "./util/price"
 import { User } from "./user"
 
 export namespace Billing {
-  export const CHARGE_NAME = "opencode credits"
-  export const CHARGE_FEE_NAME = "processing fee"
-  export const CHARGE_AMOUNT = 2000 // $20
-  export const CHARGE_AMOUNT_DOLLAR = 20
-  export const CHARGE_FEE = 123 // Stripe fee 4.4% + $0.30
-  export const CHARGE_THRESHOLD_DOLLAR = 5
-  export const CHARGE_THRESHOLD = 500 // $5
+  export const ITEM_CREDIT_NAME = "opencode credits"
+  export const ITEM_FEE_NAME = "processing fee"
+  export const RELOAD_AMOUNT = 20
+  export const RELOAD_AMOUNT_MIN = 10
+  export const RELOAD_TRIGGER = 5
+  export const RELOAD_TRIGGER_MIN = 5
   export const stripe = () =>
     new Stripe(Resource.STRIPE_SECRET_KEY.value, {
       apiVersion: "2025-03-31.basil",
@@ -33,6 +32,8 @@ export namespace Billing {
           paymentMethodLast4: BillingTable.paymentMethodLast4,
           balance: BillingTable.balance,
           reload: BillingTable.reload,
+          reloadAmount: BillingTable.reloadAmount,
+          reloadTrigger: BillingTable.reloadTrigger,
           monthlyLimit: BillingTable.monthlyLimit,
           monthlyUsage: BillingTable.monthlyUsage,
           timeMonthlyUsageUpdated: BillingTable.timeMonthlyUsageUpdated,
@@ -67,17 +68,28 @@ export namespace Billing {
     )
   }
 
+  export const calculateFeeInCents = (x: number) => {
+    // math: x = total - (total * 0.044 + 0.30)
+    // math: x = total * (1-0.044) - 0.30
+    // math: (x + 0.30) / 0.956 = total
+    return Math.round(((x + 30) / 0.956) * 0.044 + 30)
+  }
+
   export const reload = async () => {
-    const { customerID, paymentMethodID } = await Database.use((tx) =>
+    const billing = await Database.use((tx) =>
       tx
         .select({
           customerID: BillingTable.customerID,
           paymentMethodID: BillingTable.paymentMethodID,
+          reloadAmount: BillingTable.reloadAmount,
         })
         .from(BillingTable)
         .where(eq(BillingTable.workspaceID, Actor.workspace()))
         .then((rows) => rows[0]),
     )
+    const customerID = billing.customerID
+    const paymentMethodID = billing.paymentMethodID
+    const amountInCents = (billing.reloadAmount ?? Billing.RELOAD_AMOUNT) * 100
     const paymentID = Identifier.create("payment")
     let invoice
     try {
@@ -89,18 +101,18 @@ export namespace Billing {
         currency: "usd",
       })
       await Billing.stripe().invoiceItems.create({
-        amount: Billing.CHARGE_AMOUNT,
+        amount: amountInCents,
         currency: "usd",
         customer: customerID!,
-        description: CHARGE_NAME,
         invoice: draft.id!,
+        description: ITEM_CREDIT_NAME,
       })
       await Billing.stripe().invoiceItems.create({
-        amount: Billing.CHARGE_FEE,
+        amount: calculateFeeInCents(amountInCents),
         currency: "usd",
         customer: customerID!,
-        description: CHARGE_FEE_NAME,
         invoice: draft.id!,
+        description: ITEM_FEE_NAME,
       })
       await Billing.stripe().invoices.finalizeInvoice(draft.id!)
       invoice = await Billing.stripe().invoices.pay(draft.id!, {
@@ -128,7 +140,7 @@ export namespace Billing {
       await tx
         .update(BillingTable)
         .set({
-          balance: sql`${BillingTable.balance} + ${centsToMicroCents(CHARGE_AMOUNT)}`,
+          balance: sql`${BillingTable.balance} + ${centsToMicroCents(amountInCents)}`,
           reloadError: null,
           timeReloadError: null,
         })
@@ -136,7 +148,7 @@ export namespace Billing {
       await tx.insert(PaymentTable).values({
         workspaceID: Actor.workspace(),
         id: paymentID,
-        amount: centsToMicroCents(CHARGE_AMOUNT),
+        amount: centsToMicroCents(amountInCents),
         invoiceID: invoice.id!,
         paymentID: invoice.payments?.data[0].payment.payment_intent as string,
         customerID,
@@ -159,13 +171,19 @@ export namespace Billing {
     z.object({
       successUrl: z.string(),
       cancelUrl: z.string(),
+      amount: z.number().optional(),
     }),
     async (input) => {
       const user = Actor.assert("user")
-      const { successUrl, cancelUrl } = input
+      const { successUrl, cancelUrl, amount } = input
+
+      if (amount !== undefined && amount < Billing.RELOAD_AMOUNT_MIN) {
+        throw new Error(`Amount must be at least $${Billing.RELOAD_AMOUNT_MIN}`)
+      }
 
       const email = await User.getAuthEmail(user.properties.userID)
       const customer = await Billing.get()
+      const amountInCents = (amount ?? customer.reloadAmount ?? Billing.RELOAD_AMOUNT) * 100
       const session = await Billing.stripe().checkout.sessions.create({
         mode: "payment",
         billing_address_collection: "required",
@@ -173,20 +191,16 @@ export namespace Billing {
           {
             price_data: {
               currency: "usd",
-              product_data: {
-                name: CHARGE_NAME,
-              },
-              unit_amount: CHARGE_AMOUNT,
+              product_data: { name: ITEM_CREDIT_NAME },
+              unit_amount: amountInCents,
             },
             quantity: 1,
           },
           {
             price_data: {
               currency: "usd",
-              product_data: {
-                name: CHARGE_FEE_NAME,
-              },
-              unit_amount: CHARGE_FEE,
+              product_data: { name: ITEM_FEE_NAME },
+              unit_amount: calculateFeeInCents(amountInCents),
             },
             quantity: 1,
           },
@@ -218,6 +232,7 @@ export namespace Billing {
         },
         metadata: {
           workspaceID: Actor.workspace(),
+          amount: amountInCents.toString(),
         },
         success_url: successUrl,
         cancel_url: cancelUrl,

packages/console/core/src/model.ts

@@ -24,6 +24,7 @@ export namespace ZenData {
     cost: ModelCostSchema,
     cost200K: ModelCostSchema.optional(),
     allowAnonymous: z.boolean().optional(),
+    rateLimit: z.number().optional(),
     providers: z.array(
       z.object({
         id: z.string(),
@@ -60,9 +61,7 @@ export namespace Model {
   export const enable = fn(z.object({ model: z.string() }), ({ model }) => {
     Actor.assertAdmin()
     return Database.use((db) =>
-      db
-        .delete(ModelTable)
-        .where(and(eq(ModelTable.workspaceID, Actor.workspace()), eq(ModelTable.model, model))),
+      db.delete(ModelTable).where(and(eq(ModelTable.workspaceID, Actor.workspace()), eq(ModelTable.model, model))),
     )
   })
 

packages/console/core/sst-env.d.ts

@@ -6,99 +6,108 @@
 import "sst"
 declare module "sst" {
   export interface Resource {
-    "ADMIN_SECRET": {
-      "type": "sst.sst.Secret"
-      "value": string
+    ADMIN_SECRET: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "AUTH_API_URL": {
-      "type": "sst.sst.Linkable"
-      "value": string
+    AUTH_API_URL: {
+      type: "sst.sst.Linkable"
+      value: string
     }
-    "AWS_SES_ACCESS_KEY_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    AWS_SES_ACCESS_KEY_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "AWS_SES_SECRET_ACCESS_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    AWS_SES_SECRET_ACCESS_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Console": {
-      "type": "sst.cloudflare.SolidStart"
-      "url": string
+    CLOUDFLARE_API_TOKEN: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Database": {
-      "database": string
-      "host": string
-      "password": string
-      "port": number
-      "type": "sst.sst.Linkable"
-      "username": string
+    CLOUDFLARE_DEFAULT_ACCOUNT_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Desktop": {
-      "type": "sst.cloudflare.StaticSite"
-      "url": string
+    Console: {
+      type: "sst.cloudflare.SolidStart"
+      url: string
     }
-    "EMAILOCTOPUS_API_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Database: {
+      database: string
+      host: string
+      password: string
+      port: number
+      type: "sst.sst.Linkable"
+      username: string
     }
-    "GITHUB_APP_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Desktop: {
+      type: "sst.cloudflare.StaticSite"
+      url: string
     }
-    "GITHUB_APP_PRIVATE_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    EMAILOCTOPUS_API_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GITHUB_CLIENT_ID_CONSOLE": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_APP_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GITHUB_CLIENT_SECRET_CONSOLE": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_APP_PRIVATE_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GOOGLE_CLIENT_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_CLIENT_ID_CONSOLE: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "HONEYCOMB_API_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_CLIENT_SECRET_CONSOLE: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "STRIPE_SECRET_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GOOGLE_CLIENT_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "STRIPE_WEBHOOK_SECRET": {
-      "type": "sst.sst.Linkable"
-      "value": string
+    HONEYCOMB_API_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Web": {
-      "type": "sst.cloudflare.Astro"
-      "url": string
+    STRIPE_SECRET_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "ZEN_MODELS1": {
-      "type": "sst.sst.Secret"
-      "value": string
+    STRIPE_WEBHOOK_SECRET: {
+      type: "sst.sst.Linkable"
+      value: string
     }
-    "ZEN_MODELS2": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Web: {
+      type: "sst.cloudflare.Astro"
+      url: string
+    }
+    ZEN_MODELS1: {
+      type: "sst.sst.Secret"
+      value: string
+    }
+    ZEN_MODELS2: {
+      type: "sst.sst.Secret"
+      value: string
     }
   }
 }
-// cloudflare 
-import * as cloudflare from "@cloudflare/workers-types";
+// cloudflare
+import * as cloudflare from "@cloudflare/workers-types"
 declare module "sst" {
   export interface Resource {
-    "Api": cloudflare.Service
-    "AuthApi": cloudflare.Service
-    "AuthStorage": cloudflare.KVNamespace
-    "Bucket": cloudflare.R2Bucket
-    "LogProcessor": cloudflare.Service
+    Api: cloudflare.Service
+    AuthApi: cloudflare.Service
+    AuthStorage: cloudflare.KVNamespace
+    Bucket: cloudflare.R2Bucket
+    GatewayKv: cloudflare.KVNamespace
+    LogProcessor: cloudflare.Service
   }
 }
 
 import "sst"
-export {}
+export {}

packages/console/function/package.json

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

packages/console/function/sst-env.d.ts

@@ -6,99 +6,108 @@
 import "sst"
 declare module "sst" {
   export interface Resource {
-    "ADMIN_SECRET": {
-      "type": "sst.sst.Secret"
-      "value": string
+    ADMIN_SECRET: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "AUTH_API_URL": {
-      "type": "sst.sst.Linkable"
-      "value": string
+    AUTH_API_URL: {
+      type: "sst.sst.Linkable"
+      value: string
     }
-    "AWS_SES_ACCESS_KEY_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    AWS_SES_ACCESS_KEY_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "AWS_SES_SECRET_ACCESS_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    AWS_SES_SECRET_ACCESS_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Console": {
-      "type": "sst.cloudflare.SolidStart"
-      "url": string
+    CLOUDFLARE_API_TOKEN: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Database": {
-      "database": string
-      "host": string
-      "password": string
-      "port": number
-      "type": "sst.sst.Linkable"
-      "username": string
+    CLOUDFLARE_DEFAULT_ACCOUNT_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Desktop": {
-      "type": "sst.cloudflare.StaticSite"
-      "url": string
+    Console: {
+      type: "sst.cloudflare.SolidStart"
+      url: string
     }
-    "EMAILOCTOPUS_API_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Database: {
+      database: string
+      host: string
+      password: string
+      port: number
+      type: "sst.sst.Linkable"
+      username: string
     }
-    "GITHUB_APP_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Desktop: {
+      type: "sst.cloudflare.StaticSite"
+      url: string
     }
-    "GITHUB_APP_PRIVATE_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    EMAILOCTOPUS_API_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GITHUB_CLIENT_ID_CONSOLE": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_APP_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GITHUB_CLIENT_SECRET_CONSOLE": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_APP_PRIVATE_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GOOGLE_CLIENT_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_CLIENT_ID_CONSOLE: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "HONEYCOMB_API_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_CLIENT_SECRET_CONSOLE: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "STRIPE_SECRET_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GOOGLE_CLIENT_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "STRIPE_WEBHOOK_SECRET": {
-      "type": "sst.sst.Linkable"
-      "value": string
+    HONEYCOMB_API_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Web": {
-      "type": "sst.cloudflare.Astro"
-      "url": string
+    STRIPE_SECRET_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "ZEN_MODELS1": {
-      "type": "sst.sst.Secret"
-      "value": string
+    STRIPE_WEBHOOK_SECRET: {
+      type: "sst.sst.Linkable"
+      value: string
     }
-    "ZEN_MODELS2": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Web: {
+      type: "sst.cloudflare.Astro"
+      url: string
+    }
+    ZEN_MODELS1: {
+      type: "sst.sst.Secret"
+      value: string
+    }
+    ZEN_MODELS2: {
+      type: "sst.sst.Secret"
+      value: string
     }
   }
 }
-// cloudflare 
-import * as cloudflare from "@cloudflare/workers-types";
+// cloudflare
+import * as cloudflare from "@cloudflare/workers-types"
 declare module "sst" {
   export interface Resource {
-    "Api": cloudflare.Service
-    "AuthApi": cloudflare.Service
-    "AuthStorage": cloudflare.KVNamespace
-    "Bucket": cloudflare.R2Bucket
-    "LogProcessor": cloudflare.Service
+    Api: cloudflare.Service
+    AuthApi: cloudflare.Service
+    AuthStorage: cloudflare.KVNamespace
+    Bucket: cloudflare.R2Bucket
+    GatewayKv: cloudflare.KVNamespace
+    LogProcessor: cloudflare.Service
   }
 }
 
 import "sst"
-export {}
+export {}

packages/console/mail/package.json

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

packages/console/mail/sst-env.d.ts

@@ -6,4 +6,4 @@
 /// <reference path="../../../sst-env.d.ts" />
 
 import "sst"
-export {}
+export {}

packages/console/resource/package.json

@@ -13,6 +13,9 @@
     }
   },
   "devDependencies": {
-    "@tsconfig/node22": "22.0.2"
+    "@cloudflare/workers-types": "catalog:",
+    "@tsconfig/node22": "22.0.2",
+    "@types/node": "catalog:",
+    "cloudflare": "5.2.0"
   }
 }

packages/console/resource/resource.node.ts

@@ -1 +1,58 @@
-export { Resource } from "sst"
+import type { KVNamespaceListOptions, KVNamespaceListResult, KVNamespacePutOptions } from "@cloudflare/workers-types"
+import { Resource as ResourceBase } from "sst"
+import Cloudflare from "cloudflare"
+
+export const Resource = new Proxy(
+  {},
+  {
+    get(_target, prop: keyof typeof ResourceBase) {
+      const value = ResourceBase[prop]
+      // @ts-ignore
+      if ("type" in value && value.type === "sst.cloudflare.Kv") {
+        const client = new Cloudflare({
+          apiToken: ResourceBase.CLOUDFLARE_API_TOKEN.value,
+        })
+        // @ts-ignore
+        const namespaceId = value.namespaceId
+        const accountId = ResourceBase.CLOUDFLARE_DEFAULT_ACCOUNT_ID.value
+        return {
+          get: (k: string | string[]) => {
+            const isMulti = Array.isArray(k)
+            return client.kv.namespaces
+              .bulkGet(namespaceId, {
+                keys: Array.isArray(k) ? k : [k],
+                account_id: accountId,
+              })
+              .then((result) => (isMulti ? new Map(Object.entries(result?.values ?? {})) : result?.values?.[k]))
+          },
+          put: (k: string, v: string, opts?: KVNamespacePutOptions) =>
+            client.kv.namespaces.values.update(namespaceId, k, {
+              account_id: accountId,
+              value: v,
+              expiration: opts?.expiration,
+              expiration_ttl: opts?.expirationTtl,
+              metadata: opts?.metadata,
+            }),
+          delete: (k: string) =>
+            client.kv.namespaces.values.delete(namespaceId, k, {
+              account_id: accountId,
+            }),
+          list: (opts?: KVNamespaceListOptions): Promise<KVNamespaceListResult<unknown, string>> =>
+            client.kv.namespaces.keys
+              .list(namespaceId, {
+                account_id: accountId,
+                prefix: opts?.prefix ?? undefined,
+              })
+              .then((result) => {
+                return {
+                  keys: result.result,
+                  list_complete: true,
+                  cacheStatus: null,
+                }
+              }),
+        }
+      }
+      return value
+    },
+  },
+) as Record<string, any>

packages/console/resource/sst-env.d.ts

@@ -6,99 +6,108 @@
 import "sst"
 declare module "sst" {
   export interface Resource {
-    "ADMIN_SECRET": {
-      "type": "sst.sst.Secret"
-      "value": string
+    ADMIN_SECRET: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "AUTH_API_URL": {
-      "type": "sst.sst.Linkable"
-      "value": string
+    AUTH_API_URL: {
+      type: "sst.sst.Linkable"
+      value: string
     }
-    "AWS_SES_ACCESS_KEY_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    AWS_SES_ACCESS_KEY_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "AWS_SES_SECRET_ACCESS_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    AWS_SES_SECRET_ACCESS_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Console": {
-      "type": "sst.cloudflare.SolidStart"
-      "url": string
+    CLOUDFLARE_API_TOKEN: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Database": {
-      "database": string
-      "host": string
-      "password": string
-      "port": number
-      "type": "sst.sst.Linkable"
-      "username": string
+    CLOUDFLARE_DEFAULT_ACCOUNT_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Desktop": {
-      "type": "sst.cloudflare.StaticSite"
-      "url": string
+    Console: {
+      type: "sst.cloudflare.SolidStart"
+      url: string
     }
-    "EMAILOCTOPUS_API_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Database: {
+      database: string
+      host: string
+      password: string
+      port: number
+      type: "sst.sst.Linkable"
+      username: string
     }
-    "GITHUB_APP_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Desktop: {
+      type: "sst.cloudflare.StaticSite"
+      url: string
     }
-    "GITHUB_APP_PRIVATE_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    EMAILOCTOPUS_API_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GITHUB_CLIENT_ID_CONSOLE": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_APP_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GITHUB_CLIENT_SECRET_CONSOLE": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_APP_PRIVATE_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "GOOGLE_CLIENT_ID": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_CLIENT_ID_CONSOLE: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "HONEYCOMB_API_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GITHUB_CLIENT_SECRET_CONSOLE: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "STRIPE_SECRET_KEY": {
-      "type": "sst.sst.Secret"
-      "value": string
+    GOOGLE_CLIENT_ID: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "STRIPE_WEBHOOK_SECRET": {
-      "type": "sst.sst.Linkable"
-      "value": string
+    HONEYCOMB_API_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "Web": {
-      "type": "sst.cloudflare.Astro"
-      "url": string
+    STRIPE_SECRET_KEY: {
+      type: "sst.sst.Secret"
+      value: string
     }
-    "ZEN_MODELS1": {
-      "type": "sst.sst.Secret"
-      "value": string
+    STRIPE_WEBHOOK_SECRET: {
+      type: "sst.sst.Linkable"
+      value: string
     }
-    "ZEN_MODELS2": {
-      "type": "sst.sst.Secret"
-      "value": string
+    Web: {
+      type: "sst.cloudflare.Astro"
+      url: string
+    }
+    ZEN_MODELS1: {
+      type: "sst.sst.Secret"
+      value: string
+    }
+    ZEN_MODELS2: {
+      type: "sst.sst.Secret"
+      value: string
     }
   }
 }
-// cloudflare 
-import * as cloudflare from "@cloudflare/workers-types";
+// cloudflare
+import * as cloudflare from "@cloudflare/workers-types"
 declare module "sst" {
   export interface Resource {
-    "Api": cloudflare.Service
-    "AuthApi": cloudflare.Service
-    "AuthStorage": cloudflare.KVNamespace
-    "Bucket": cloudflare.R2Bucket
-    "LogProcessor": cloudflare.Service
+    Api: cloudflare.Service
+    AuthApi: cloudflare.Service
+    AuthStorage: cloudflare.KVNamespace
+    Bucket: cloudflare.R2Bucket
+    GatewayKv: cloudflare.KVNamespace
+    LogProcessor: cloudflare.Service
   }
 }
 
 import "sst"
-export {}
+export {}

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/desktop",
-  "version": "1.0.23",
+  "version": "1.0.55",
   "description": "",
   "type": "module",
   "scripts": {
@@ -31,6 +31,7 @@
     "@solid-primitives/event-bus": "1.1.2",
     "@solid-primitives/resize-observer": "2.1.3",
     "@solid-primitives/scroll": "2.1.3",
+    "@solid-primitives/storage": "4.3.3",
     "@solidjs/meta": "catalog:",
     "@solidjs/router": "0.15.3",
     "@thisbeyond/solid-dnd": "0.7.5",
@@ -45,9 +46,5 @@
     "solid-list": "catalog:",
     "tailwindcss": "catalog:",
     "virtua": "catalog:"
-  },
-  "prettier": {
-    "semi": false,
-    "printWidth": 120
   }
 }

packages/desktop/src/components/code.tsx

@@ -1,846 +0,0 @@
-import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "shiki"
-import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js"
-import { useLocal, type TextSelection } from "@/context/local"
-import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
-import { useShiki } from "@opencode-ai/ui"
-
-type DefinedSelection = Exclude<TextSelection, undefined>
-
-interface Props extends ComponentProps<"div"> {
-  code: string
-  path: string
-}
-
-export function Code(props: Props) {
-  const ctx = useLocal()
-  const highlighter = useShiki()
-  const [local, others] = splitProps(props, ["class", "classList", "code", "path"])
-  const lang = createMemo(() => {
-    const ext = getFileExtension(local.path)
-    if (ext in bundledLanguages) return ext
-    return "text"
-  })
-
-  let container: HTMLDivElement | undefined
-  let isProgrammaticSelection = false
-
-  const ranges = createMemo<DefinedSelection[]>(() => {
-    const items = ctx.context.all() as Array<{ type: "file"; path: string; selection?: DefinedSelection }>
-    const result: DefinedSelection[] = []
-    for (const item of items) {
-      if (item.path !== local.path) continue
-      const selection = item.selection
-      if (!selection) continue
-      result.push(selection)
-    }
-    return result
-  })
-
-  const createLineNumberTransformer = (selections: DefinedSelection[]): ShikiTransformer => {
-    const highlighted = new Set<number>()
-    for (const selection of selections) {
-      const startLine = selection.startLine
-      const endLine = selection.endLine
-      const start = Math.max(1, Math.min(startLine, endLine))
-      const end = Math.max(start, Math.max(startLine, endLine))
-      const count = end - start + 1
-      if (count <= 0) continue
-      const values = Array.from({ length: count }, (_, index) => start + index)
-      for (const value of values) highlighted.add(value)
-    }
-    return {
-      name: "line-number-highlight",
-      line(node, index) {
-        if (!highlighted.has(index)) return
-        this.addClassToHast(node, "line-number-highlight")
-        const children = node.children
-        if (!Array.isArray(children)) return
-        for (const child of children) {
-          if (!child || typeof child !== "object") continue
-          const element = child as { type?: string; properties?: { className?: string[] } }
-          if (element.type !== "element") continue
-          const className = element.properties?.className
-          if (!Array.isArray(className)) continue
-          const matches = className.includes("diff-oldln") || className.includes("diff-newln")
-          if (!matches) continue
-          if (className.includes("line-number-highlight")) continue
-          className.push("line-number-highlight")
-        }
-      },
-    }
-  }
-
-  const [html] = createResource(
-    () => ranges(),
-    async (activeRanges) => {
-      if (!highlighter.getLoadedLanguages().includes(lang())) {
-        await highlighter.loadLanguage(lang() as BundledLanguage)
-      }
-      return highlighter.codeToHtml(local.code || "", {
-        lang: lang() && lang() in bundledLanguages ? lang() : "text",
-        theme: "opencode",
-        transformers: [transformerUnifiedDiff(), transformerDiffGroups(), createLineNumberTransformer(activeRanges)],
-      }) as string
-    },
-  )
-
-  onMount(() => {
-    if (!container) return
-
-    let ticking = false
-    const onScroll = () => {
-      if (!container) return
-      // if (ctx.file.active()?.path !== local.path) return
-      if (ticking) return
-      ticking = true
-      requestAnimationFrame(() => {
-        ticking = false
-        ctx.file.scroll(local.path, container!.scrollTop)
-      })
-    }
-
-    const onSelectionChange = () => {
-      if (!container) return
-      if (isProgrammaticSelection) return
-      // if (ctx.file.active()?.path !== local.path) return
-      const d = getSelectionInContainer(container)
-      if (!d) return
-      const p = ctx.file.node(local.path)?.selection
-      if (p && p.startLine === d.sl && p.endLine === d.el && p.startChar === d.sch && p.endChar === d.ech) return
-      ctx.file.select(local.path, { startLine: d.sl, startChar: d.sch, endLine: d.el, endChar: d.ech })
-    }
-
-    const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
-    const onKeyDown = (e: KeyboardEvent) => {
-      // if (ctx.file.active()?.path !== local.path) return
-      const ae = document.activeElement as HTMLElement | undefined
-      const tag = (ae?.tagName || "").toLowerCase()
-      const inputFocused = !!ae && (tag === "input" || tag === "textarea" || ae.isContentEditable)
-      if (inputFocused) return
-      if (e.getModifierState(MOD) && e.key.toLowerCase() === "a") {
-        e.preventDefault()
-        if (!container) return
-        const element = container.querySelector("code") as HTMLElement | undefined
-        if (!element) return
-        const lines = Array.from(element.querySelectorAll(".line"))
-        if (!lines.length) return
-        const r = document.createRange()
-        const last = lines[lines.length - 1]
-        r.selectNodeContents(last)
-        const lastLen = r.toString().length
-        ctx.file.select(local.path, { startLine: 1, startChar: 0, endLine: lines.length, endChar: lastLen })
-      }
-    }
-
-    container.addEventListener("scroll", onScroll)
-    document.addEventListener("selectionchange", onSelectionChange)
-    document.addEventListener("keydown", onKeyDown)
-
-    onCleanup(() => {
-      container?.removeEventListener("scroll", onScroll)
-      document.removeEventListener("selectionchange", onSelectionChange)
-      document.removeEventListener("keydown", onKeyDown)
-    })
-  })
-
-  // Restore scroll position from store when content is ready
-  createEffect(() => {
-    const content = html()
-    if (!container || !content) return
-    const top = ctx.file.node(local.path)?.scrollTop
-    if (top !== undefined && container.scrollTop !== top) container.scrollTop = top
-  })
-
-  // Sync selection from store -> DOM
-  createEffect(() => {
-    const content = html()
-    if (!container || !content) return
-    // if (ctx.file.active()?.path !== local.path) return
-    const codeEl = container.querySelector("code") as HTMLElement | undefined
-    if (!codeEl) return
-    const target = ctx.file.node(local.path)?.selection
-    const current = getSelectionInContainer(container)
-    const sel = window.getSelection()
-    if (!sel) return
-    if (!target) {
-      if (current) {
-        isProgrammaticSelection = true
-        sel.removeAllRanges()
-        queueMicrotask(() => {
-          isProgrammaticSelection = false
-        })
-      }
-      return
-    }
-    const matches = !!(
-      current &&
-      current.sl === target.startLine &&
-      current.sch === target.startChar &&
-      current.el === target.endLine &&
-      current.ech === target.endChar
-    )
-    if (matches) return
-    const lines = Array.from(codeEl.querySelectorAll(".line"))
-    if (lines.length === 0) return
-    let sIdx = Math.max(0, target.startLine - 1)
-    let eIdx = Math.max(0, target.endLine - 1)
-    let sChar = Math.max(0, target.startChar || 0)
-    let eChar = Math.max(0, target.endChar || 0)
-    if (sIdx > eIdx || (sIdx === eIdx && sChar > eChar)) {
-      const ti = sIdx
-      sIdx = eIdx
-      eIdx = ti
-      const tc = sChar
-      sChar = eChar
-      eChar = tc
-    }
-    if (eChar === 0 && eIdx > sIdx) {
-      eIdx = eIdx - 1
-      eChar = Number.POSITIVE_INFINITY
-    }
-    if (sIdx >= lines.length) return
-    if (eIdx >= lines.length) eIdx = lines.length - 1
-    const s = getNodeOffsetInLine(lines[sIdx], sChar) ?? { node: lines[sIdx], offset: 0 }
-    const e = getNodeOffsetInLine(lines[eIdx], eChar) ?? { node: lines[eIdx], offset: lines[eIdx].childNodes.length }
-    const range = document.createRange()
-    range.setStart(s.node, s.offset)
-    range.setEnd(e.node, e.offset)
-    isProgrammaticSelection = true
-    sel.removeAllRanges()
-    sel.addRange(range)
-    queueMicrotask(() => {
-      isProgrammaticSelection = false
-    })
-  })
-
-  // Build/toggle split layout and apply folding (both unified and split)
-  createEffect(() => {
-    const content = html()
-    if (!container || !content) return
-    const view = ctx.file.view(local.path)
-
-    const pres = Array.from(container.querySelectorAll<HTMLPreElement>("pre"))
-    if (pres.length === 0) return
-    const originalPre = pres[0]
-
-    const split = container.querySelector<HTMLElement>(".diff-split")
-    if (view === "diff-split") {
-      applySplitDiff(container)
-      const next = container.querySelector<HTMLElement>(".diff-split")
-      if (next) next.style.display = ""
-      originalPre.style.display = "none"
-    } else {
-      if (split) split.style.display = "none"
-      originalPre.style.display = ""
-    }
-
-    const expanded = ctx.file.folded(local.path)
-    if (view === "diff-split") {
-      const left = container.querySelector<HTMLElement>(".diff-split pre:nth-child(1) code")
-      const right = container.querySelector<HTMLElement>(".diff-split pre:nth-child(2) code")
-      if (left)
-        applyDiffFolding(left, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "left" })
-      if (right)
-        applyDiffFolding(right, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "right" })
-    } else {
-      const code = container.querySelector<HTMLElement>("pre code")
-      if (code)
-        applyDiffFolding(code, 3, {
-          expanded,
-          onExpand: (key) => ctx.file.unfold(local.path, key),
-        })
-    }
-  })
-
-  // Highlight groups + scroll coupling
-  const clearHighlights = () => {
-    if (!container) return
-    container.querySelectorAll<HTMLElement>(".diff-selected").forEach((el) => el.classList.remove("diff-selected"))
-  }
-
-  const applyHighlight = (idx: number, scroll?: boolean) => {
-    if (!container) return
-    const view = ctx.file.view(local.path)
-    if (view === "raw") return
-
-    clearHighlights()
-
-    const nodes: HTMLElement[] = []
-    if (view === "diff-split") {
-      const left = container.querySelector<HTMLElement>(".diff-split pre:nth-child(1) code")
-      const right = container.querySelector<HTMLElement>(".diff-split pre:nth-child(2) code")
-      if (left)
-        nodes.push(...Array.from(left.querySelectorAll<HTMLElement>(`[data-chgrp="${idx}"][data-diff="remove"]`)))
-      if (right)
-        nodes.push(...Array.from(right.querySelectorAll<HTMLElement>(`[data-chgrp="${idx}"][data-diff="add"]`)))
-    } else {
-      const code = container.querySelector<HTMLElement>("pre code")
-      if (code) nodes.push(...Array.from(code.querySelectorAll<HTMLElement>(`[data-chgrp="${idx}"]`)))
-    }
-
-    for (const n of nodes) n.classList.add("diff-selected")
-    if (scroll && nodes.length) nodes[0].scrollIntoView({ block: "center", behavior: "smooth" })
-  }
-
-  const countGroups = () => {
-    if (!container) return 0
-    const code = container.querySelector<HTMLElement>("pre code")
-    if (!code) return 0
-    const set = new Set<string>()
-    for (const el of Array.from(code.querySelectorAll<HTMLElement>(".diff-line[data-chgrp]"))) {
-      const v = el.getAttribute("data-chgrp")
-      if (v != undefined) set.add(v)
-    }
-    return set.size
-  }
-
-  let lastIdx: number | undefined = undefined
-  let lastView: string | undefined
-  let lastContent: string | undefined
-  let lastRawIdx: number | undefined = undefined
-  createEffect(() => {
-    const content = html()
-    if (!container || !content) return
-    const view = ctx.file.view(local.path)
-    const raw = ctx.file.changeIndex(local.path)
-    if (raw === undefined) return
-    const total = countGroups()
-    if (total <= 0) return
-    const next = ((raw % total) + total) % total
-
-    const navigated = lastRawIdx !== undefined && lastRawIdx !== raw
-
-    if (next !== raw) {
-      ctx.file.setChangeIndex(local.path, next)
-      applyHighlight(next, true)
-    } else {
-      if (lastView !== view || lastContent !== content) applyHighlight(next)
-      if ((lastIdx !== undefined && lastIdx !== next) || navigated) applyHighlight(next, true)
-    }
-
-    lastRawIdx = raw
-    lastIdx = next
-    lastView = view
-    lastContent = content
-  })
-
-  return (
-    <div
-      ref={(el) => {
-        container = el
-      }}
-      innerHTML={html()}
-      class="
-          font-mono text-xs tracking-wide overflow-y-auto h-full
-          [&]:[counter-reset:line]
-          [&_pre]:focus-visible:outline-none
-          [&_pre]:overflow-x-auto [&_pre]:no-scrollbar
-          [&_code]:min-w-full [&_code]:inline-block 
-          [&_.tab]:relative
-          [&_.tab::before]:content['⇥']
-          [&_.tab::before]:absolute
-          [&_.tab::before]:opacity-0
-          [&_.space]:relative
-          [&_.space::before]:content-['·']
-          [&_.space::before]:absolute
-          [&_.space::before]:opacity-0
-          [&_.line]:inline-block [&_.line]:w-full
-          [&_.line]:hover:bg-background-element
-          [&_.line::before]:sticky [&_.line::before]:left-0
-          [&_.line::before]:w-12 [&_.line::before]:pr-4
-          [&_.line::before]:z-10
-          [&_.line::before]:bg-background-panel
-          [&_.line::before]:text-text-muted/60
-          [&_.line::before]:text-right [&_.line::before]:inline-block
-          [&_.line::before]:select-none
-          [&_.line::before]:[counter-increment:line]
-          [&_.line::before]:content-[counter(line)]
-          [&_.line-number-highlight]:bg-accent/20
-          [&_.line-number-highlight::before]:bg-accent/40!
-          [&_.line-number-highlight::before]:text-background-panel!
-          [&_code.code-diff_.line::before]:content-['']
-          [&_code.code-diff_.line::before]:w-0
-          [&_code.code-diff_.line::before]:pr-0
-          [&_.diff-split_code.code-diff::before]:w-10
-          [&_.diff-split_.diff-newln]:left-0
-          [&_.diff-oldln]:sticky [&_.diff-oldln]:left-0
-          [&_.diff-oldln]:w-10 [&_.diff-oldln]:pr-2
-          [&_.diff-oldln]:z-40
-          [&_.diff-oldln]:text-text-muted/60
-          [&_.diff-oldln]:text-right [&_.diff-oldln]:inline-block
-          [&_.diff-oldln]:select-none
-          [&_.diff-oldln]:bg-background-panel
-          [&_.diff-newln]:sticky [&_.diff-newln]:left-10
-          [&_.diff-newln]:w-10 [&_.diff-newln]:pr-2
-          [&_.diff-newln]:z-40
-          [&_.diff-newln]:text-text-muted/60
-          [&_.diff-newln]:text-right [&_.diff-newln]:inline-block
-          [&_.diff-newln]:select-none
-          [&_.diff-newln]:bg-background-panel
-          [&_.diff-add]:bg-success/20!
-          [&_.diff-add.diff-selected]:bg-success/50!
-          [&_.diff-add_.diff-oldln]:bg-success!
-          [&_.diff-add_.diff-oldln]:text-background-panel!
-          [&_.diff-add_.diff-newln]:bg-success!
-          [&_.diff-add_.diff-newln]:text-background-panel!
-          [&_.diff-remove]:bg-error/20!
-          [&_.diff-remove.diff-selected]:bg-error/50!
-          [&_.diff-remove_.diff-newln]:bg-error!
-          [&_.diff-remove_.diff-newln]:text-background-panel!
-          [&_.diff-remove_.diff-oldln]:bg-error!
-          [&_.diff-remove_.diff-oldln]:text-background-panel!
-          [&_.diff-sign]:inline-block [&_.diff-sign]:px-2 [&_.diff-sign]:select-none
-          [&_.diff-blank]:bg-background-element
-          [&_.diff-blank_.diff-oldln]:bg-background-element
-          [&_.diff-blank_.diff-newln]:bg-background-element
-          [&_.diff-collapsed]:block! [&_.diff-collapsed]:w-full [&_.diff-collapsed]:relative
-          [&_.diff-collapsed]:select-none
-          [&_.diff-collapsed]:bg-info/20 [&_.diff-collapsed]:hover:bg-info/40!
-          [&_.diff-collapsed]:text-info/80 [&_.diff-collapsed]:hover:text-info
-          [&_.diff-collapsed]:text-xs
-          [&_.diff-collapsed_.diff-oldln]:bg-info!
-          [&_.diff-collapsed_.diff-newln]:bg-info!
-        "
-      classList={{
-        ...(local.classList || {}),
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    ></div>
-  )
-}
-
-function transformerUnifiedDiff(): ShikiTransformer {
-  const kinds = new Map<number, string>()
-  const meta = new Map<number, { old?: number; new?: number; sign?: string }>()
-  let isDiff = false
-
-  return {
-    name: "unified-diff",
-    preprocess(input) {
-      kinds.clear()
-      meta.clear()
-      isDiff = false
-
-      const ls = input.split(/\r?\n/)
-      const out: Array<string> = []
-      let oldNo = 0
-      let newNo = 0
-      let inHunk = false
-
-      for (let i = 0; i < ls.length; i++) {
-        const s = ls[i]
-
-        const m = s.match(/^@@\s*-(\d+)(?:,(\d+))?\s+\+(\d+)(?:,(\d+))?\s*@@/)
-        if (m) {
-          isDiff = true
-          inHunk = true
-          oldNo = parseInt(m[1], 10)
-          newNo = parseInt(m[3], 10)
-          continue
-        }
-
-        if (
-          /^diff --git /.test(s) ||
-          /^Index: /.test(s) ||
-          /^--- /.test(s) ||
-          /^\+\+\+ /.test(s) ||
-          /^[=]{3,}$/.test(s) ||
-          /^\*{3,}$/.test(s) ||
-          /^\\ No newline at end of file$/.test(s)
-        ) {
-          isDiff = true
-          continue
-        }
-
-        if (!inHunk) {
-          out.push(s)
-          continue
-        }
-
-        if (/^\+/.test(s)) {
-          out.push(s)
-          const ln = out.length
-          kinds.set(ln, "add")
-          meta.set(ln, { new: newNo, sign: "+" })
-          newNo++
-          continue
-        }
-
-        if (/^-/.test(s)) {
-          out.push(s)
-          const ln = out.length
-          kinds.set(ln, "remove")
-          meta.set(ln, { old: oldNo, sign: "-" })
-          oldNo++
-          continue
-        }
-
-        if (/^ /.test(s)) {
-          out.push(s)
-          const ln = out.length
-          kinds.set(ln, "context")
-          meta.set(ln, { old: oldNo, new: newNo })
-          oldNo++
-          newNo++
-          continue
-        }
-
-        // fallback in hunks
-        out.push(s)
-      }
-
-      return out.join("\n").trimEnd()
-    },
-    code(node) {
-      if (isDiff) this.addClassToHast(node, "code-diff")
-    },
-    pre(node) {
-      if (isDiff) this.addClassToHast(node, "code-diff")
-    },
-    line(node, line) {
-      if (!isDiff) return
-      const kind = kinds.get(line)
-      if (!kind) return
-
-      const m = meta.get(line) || {}
-
-      this.addClassToHast(node, "diff-line")
-      this.addClassToHast(node, `diff-${kind}`)
-      node.properties = node.properties || {}
-      ;(node.properties as any)["data-diff"] = kind
-      if (m.old != undefined) (node.properties as any)["data-old"] = String(m.old)
-      if (m.new != undefined) (node.properties as any)["data-new"] = String(m.new)
-
-      const oldSpan = {
-        type: "element",
-        tagName: "span",
-        properties: { className: ["diff-oldln"] },
-        children: [{ type: "text", value: m.old != undefined ? String(m.old) : " " }],
-      }
-      const newSpan = {
-        type: "element",
-        tagName: "span",
-        properties: { className: ["diff-newln"] },
-        children: [{ type: "text", value: m.new != undefined ? String(m.new) : " " }],
-      }
-
-      if (kind === "add" || kind === "remove" || kind === "context") {
-        const first = (node.children && (node.children as any[])[0]) as any
-        if (first && first.type === "element" && first.children && first.children.length > 0) {
-          const t = first.children[0]
-          if (t && t.type === "text" && typeof t.value === "string" && t.value.length > 0) {
-            const ch = t.value[0]
-            if (ch === "+" || ch === "-" || ch === " ") t.value = t.value.slice(1)
-          }
-        }
-      }
-
-      const signSpan = {
-        type: "element",
-        tagName: "span",
-        properties: { className: ["diff-sign"] },
-        children: [{ type: "text", value: (m as any).sign || " " }],
-      }
-
-      // @ts-expect-error hast typing across versions
-      node.children = [oldSpan, newSpan, signSpan, ...(node.children || [])]
-    },
-  }
-}
-
-function transformerDiffGroups(): ShikiTransformer {
-  let group = -1
-  let inGroup = false
-  return {
-    name: "diff-groups",
-    pre() {
-      group = -1
-      inGroup = false
-    },
-    line(node) {
-      const props = (node.properties || {}) as any
-      const kind = props["data-diff"] as string | undefined
-      if (kind === "add" || kind === "remove") {
-        if (!inGroup) {
-          group += 1
-          inGroup = true
-        }
-        ;(node.properties as any)["data-chgrp"] = String(group)
-      } else {
-        inGroup = false
-      }
-    },
-  }
-}
-
-function applyDiffFolding(
-  root: HTMLElement,
-  context = 3,
-  options?: { expanded?: string[]; onExpand?: (key: string) => void; side?: "left" | "right" },
-) {
-  if (!root.classList.contains("code-diff")) return
-
-  // Cleanup: unwrap previous collapsed blocks and remove toggles
-  const blocks = Array.from(root.querySelectorAll<HTMLElement>(".diff-collapsed-block"))
-  for (const block of blocks) {
-    const p = block.parentNode
-    if (!p) {
-      block.remove()
-      continue
-    }
-    while (block.firstChild) p.insertBefore(block.firstChild, block)
-    block.remove()
-  }
-  const toggles = Array.from(root.querySelectorAll<HTMLElement>(".diff-collapsed"))
-  for (const t of toggles) t.remove()
-
-  const lines = Array.from(root.querySelectorAll<HTMLElement>(".diff-line"))
-  if (lines.length === 0) return
-
-  const n = lines.length
-  const isChange = lines.map((l) => l.dataset["diff"] === "add" || l.dataset["diff"] === "remove")
-  const isContext = lines.map((l) => l.dataset["diff"] === "context")
-  if (!isChange.some(Boolean)) return
-
-  const visible = new Array(n).fill(false) as boolean[]
-  for (let i = 0; i < n; i++) if (isChange[i]) visible[i] = true
-  for (let i = 0; i < n; i++) {
-    if (isChange[i]) {
-      const s = Math.max(0, i - context)
-      const e = Math.min(n - 1, i + context)
-      for (let j = s; j <= e; j++) if (isContext[j]) visible[j] = true
-    }
-  }
-
-  type Range = { start: number; end: number }
-  const ranges: Range[] = []
-  let i = 0
-  while (i < n) {
-    if (!visible[i] && isContext[i]) {
-      let j = i
-      while (j + 1 < n && !visible[j + 1] && isContext[j + 1]) j++
-      ranges.push({ start: i, end: j })
-      i = j + 1
-    } else {
-      i++
-    }
-  }
-
-  for (const r of ranges) {
-    const start = lines[r.start]
-    const end = lines[r.end]
-    const count = r.end - r.start + 1
-    const minCollapse = 20
-    if (count < minCollapse) {
-      continue
-    }
-
-    // Wrap the entire collapsed chunk (including trailing newline) so it takes no space
-    const block = document.createElement("span")
-    block.className = "diff-collapsed-block"
-    start.parentElement?.insertBefore(block, start)
-
-    let cur: Node | undefined = start
-    while (cur) {
-      const next: Node | undefined = cur.nextSibling || undefined
-      block.appendChild(cur)
-      if (cur === end) {
-        // Also move the newline after the last line into the block
-        if (next && next.nodeType === Node.TEXT_NODE && (next.textContent || "").startsWith("\n")) {
-          block.appendChild(next)
-        }
-        break
-      }
-      cur = next
-    }
-
-    block.style.display = "none"
-    const row = document.createElement("span")
-    row.className = "line diff-collapsed"
-    row.setAttribute("data-kind", "collapsed")
-    row.setAttribute("data-count", String(count))
-    row.setAttribute("tabindex", "0")
-    row.setAttribute("role", "button")
-
-    const oldln = document.createElement("span")
-    oldln.className = "diff-oldln"
-    oldln.textContent = " "
-
-    const newln = document.createElement("span")
-    newln.className = "diff-newln"
-    newln.textContent = " "
-
-    const sign = document.createElement("span")
-    sign.className = "diff-sign"
-    sign.textContent = "…"
-
-    const label = document.createElement("span")
-    label.textContent = `show ${count} unchanged line${count > 1 ? "s" : ""}`
-
-    const key = `o${start.dataset["old"] || ""}-${end.dataset["old"] || ""}:n${start.dataset["new"] || ""}-${end.dataset["new"] || ""}`
-
-    const show = (record = true) => {
-      if (record) options?.onExpand?.(key)
-      const p = block.parentNode
-      if (p) {
-        while (block.firstChild) p.insertBefore(block.firstChild, block)
-        block.remove()
-      }
-      row.remove()
-    }
-
-    row.addEventListener("click", () => show(true))
-    row.addEventListener("keydown", (ev) => {
-      if (ev.key === "Enter" || ev.key === " ") {
-        ev.preventDefault()
-        show(true)
-      }
-    })
-
-    block.parentElement?.insertBefore(row, block)
-    if (!options?.side || options.side === "left") row.appendChild(oldln)
-    if (!options?.side || options.side === "right") row.appendChild(newln)
-    row.appendChild(sign)
-    row.appendChild(label)
-
-    if (options?.expanded && options.expanded.includes(key)) {
-      show(false)
-    }
-  }
-}
-
-function applySplitDiff(container: HTMLElement) {
-  const pres = Array.from(container.querySelectorAll<HTMLPreElement>("pre"))
-  if (pres.length === 0) return
-  const originalPre = pres[0]
-  const originalCode = originalPre.querySelector("code") as HTMLElement | undefined
-  if (!originalCode || !originalCode.classList.contains("code-diff")) return
-
-  // Rebuild split each time to match current content
-  const existing = container.querySelector<HTMLElement>(".diff-split")
-  if (existing) existing.remove()
-
-  const grid = document.createElement("div")
-  grid.className = "diff-split grid grid-cols-2 gap-x-6"
-
-  const makeColumn = () => {
-    const pre = document.createElement("pre")
-    pre.className = originalPre.className
-    const code = document.createElement("code")
-    code.className = originalCode.className
-    pre.appendChild(code)
-    return { pre, code }
-  }
-
-  const left = makeColumn()
-  const right = makeColumn()
-
-  // Helpers
-  const cloneSide = (line: HTMLElement, side: "old" | "new"): HTMLElement => {
-    const clone = line.cloneNode(true) as HTMLElement
-    const oldln = clone.querySelector(".diff-oldln")
-    const newln = clone.querySelector(".diff-newln")
-    if (side === "old") {
-      if (newln) newln.remove()
-    } else {
-      if (oldln) oldln.remove()
-    }
-    return clone
-  }
-
-  const blankLine = (side: "old" | "new", kind: "add" | "remove"): HTMLElement => {
-    const span = document.createElement("span")
-    span.className = "line diff-line diff-blank"
-    span.setAttribute("data-diff", kind)
-    const ln = document.createElement("span")
-    ln.className = side === "old" ? "diff-oldln" : "diff-newln"
-    ln.textContent = " "
-    span.appendChild(ln)
-    return span
-  }
-
-  const lines = Array.from(originalCode.querySelectorAll<HTMLElement>(".diff-line"))
-  let i = 0
-  while (i < lines.length) {
-    const cur = lines[i]
-    const kind = cur.dataset["diff"]
-
-    if (kind === "context") {
-      left.code.appendChild(cloneSide(cur, "old"))
-      left.code.appendChild(document.createTextNode("\n"))
-      right.code.appendChild(cloneSide(cur, "new"))
-      right.code.appendChild(document.createTextNode("\n"))
-      i++
-      continue
-    }
-
-    if (kind === "remove") {
-      // Batch consecutive removes and following adds, then pair
-      const removes: HTMLElement[] = []
-      const adds: HTMLElement[] = []
-      let j = i
-      while (j < lines.length && lines[j].dataset["diff"] === "remove") {
-        removes.push(lines[j])
-        j++
-      }
-      let k = j
-      while (k < lines.length && lines[k].dataset["diff"] === "add") {
-        adds.push(lines[k])
-        k++
-      }
-
-      const pairs = Math.min(removes.length, adds.length)
-      for (let p = 0; p < pairs; p++) {
-        left.code.appendChild(cloneSide(removes[p], "old"))
-        left.code.appendChild(document.createTextNode("\n"))
-        right.code.appendChild(cloneSide(adds[p], "new"))
-        right.code.appendChild(document.createTextNode("\n"))
-      }
-      for (let p = pairs; p < removes.length; p++) {
-        left.code.appendChild(cloneSide(removes[p], "old"))
-        left.code.appendChild(document.createTextNode("\n"))
-        right.code.appendChild(blankLine("new", "remove"))
-        right.code.appendChild(document.createTextNode("\n"))
-      }
-      for (let p = pairs; p < adds.length; p++) {
-        left.code.appendChild(blankLine("old", "add"))
-        left.code.appendChild(document.createTextNode("\n"))
-        right.code.appendChild(cloneSide(adds[p], "new"))
-        right.code.appendChild(document.createTextNode("\n"))
-      }
-
-      i = k
-      continue
-    }
-
-    if (kind === "add") {
-      // Run of adds not preceded by removes
-      const adds: HTMLElement[] = []
-      let j = i
-      while (j < lines.length && lines[j].dataset["diff"] === "add") {
-        adds.push(lines[j])
-        j++
-      }
-      for (let p = 0; p < adds.length; p++) {
-        left.code.appendChild(blankLine("old", "add"))
-        left.code.appendChild(document.createTextNode("\n"))
-        right.code.appendChild(cloneSide(adds[p], "new"))
-        right.code.appendChild(document.createTextNode("\n"))
-      }
-      i = j
-      continue
-    }
-
-    // Any other kind: mirror as context
-    left.code.appendChild(cloneSide(cur, "old"))
-    left.code.appendChild(document.createTextNode("\n"))
-    right.code.appendChild(cloneSide(cur, "new"))
-    right.code.appendChild(document.createTextNode("\n"))
-    i++
-  }
-
-  grid.appendChild(left.pre)
-  grid.appendChild(right.pre)
-  container.appendChild(grid)
-}

packages/desktop/src/components/file-tree.tsx

@@ -77,7 +77,7 @@ export default function FileTree(props: {
                 <Collapsible
                   class="w-full"
                   forceMount={false}
-                  open={local.file.node(node.path)?.expanded}
+                  // open={local.file.node(node.path)?.expanded}
                   onOpenChange={(open) => (open ? local.file.expand(node.path) : local.file.collapse(node.path))}
                 >
                   <Collapsible.Trigger>
@@ -85,7 +85,7 @@ export default function FileTree(props: {
                       <Collapsible.Arrow class="text-text-muted/60 ml-1" />
                       <FileIcon
                         node={node}
-                        expanded={local.file.node(node.path).expanded}
+                        // expanded={local.file.node(node.path).expanded}
                         class="text-text-muted/60 -ml-1"
                       />
                     </Node>

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

@@ -70,9 +70,8 @@ export function MessageProgress(props: { assistantMessages: () => AssistantMessa
 
   const lastPart = createMemo(() => resolvedParts().slice(-1)?.at(0))
   const rawStatus = createMemo(() => {
-    const defaultStatus = "Working..."
     const last = lastPart()
-    if (!last) return defaultStatus
+    if (!last) return undefined
 
     if (last.type === "tool") {
       switch (last.tool) {
@@ -102,7 +101,7 @@ export function MessageProgress(props: { assistantMessages: () => AssistantMessa
     } else if (last.type === "text") {
       return "Gathering thoughts..."
     }
-    return defaultStatus
+    return undefined
   })
 
   const [status, setStatus] = createSignal(rawStatus())
@@ -111,11 +110,11 @@ export function MessageProgress(props: { assistantMessages: () => AssistantMessa
 
   createEffect(() => {
     const newStatus = rawStatus()
-    if (newStatus === status()) return
+    if (newStatus === status() || !newStatus) return
 
     const timeSinceLastChange = Date.now() - lastStatusChange
 
-    if (timeSinceLastChange >= 1000) {
+    if (timeSinceLastChange >= 1500) {
       setStatus(newStatus)
       lastStatusChange = Date.now()
       if (statusTimeout) {
@@ -145,7 +144,7 @@ export function MessageProgress(props: { assistantMessages: () => AssistantMessa
       {/*   )} */}
       {/* </Show> */}
       <div class="flex items-center gap-x-5 pl-3 border border-transparent text-text-base">
-        <Spinner /> <span class="text-12-medium">{status()}</span>
+        <Spinner /> <span class="text-12-medium">{status() ?? "Considering next steps..."}</span>
       </div>
       <Show when={eligibleItems().length > 0}>
         <div

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

@@ -1,51 +1,41 @@
-import { Button, Icon, IconButton, Select, SelectDialog } from "@opencode-ai/ui"
+import { Button, Icon, IconButton, Select, SelectDialog, Tooltip } from "@opencode-ai/ui"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
-import { createEffect, on, Component, createMemo, Show, For, onMount, onCleanup } from "solid-js"
+import { createEffect, on, Component, Show, For, onMount, onCleanup, Switch, Match } from "solid-js"
 import { createStore } from "solid-js/store"
 import { FileIcon } from "@/ui"
 import { getDirectory, getFilename } from "@/utils"
 import { createFocusSignal } from "@solid-primitives/active-element"
-import { TextSelection, useLocal } from "@/context/local"
+import { useLocal } from "@/context/local"
 import { DateTime } from "luxon"
-
-interface PartBase {
-  content: string
-  start: number
-  end: number
-}
-
-export interface TextPart extends PartBase {
-  type: "text"
-}
-
-export interface FileAttachmentPart extends PartBase {
-  type: "file"
-  path: string
-  selection?: TextSelection
-}
-
-export type ContentPart = TextPart | FileAttachmentPart
+import { ContentPart, DEFAULT_PROMPT, isPromptEqual, Prompt, useSession } from "@/context/session"
+import { useSDK } from "@/context/sdk"
+import { useNavigate } from "@solidjs/router"
+import { useSync } from "@/context/sync"
 
 interface PromptInputProps {
-  onSubmit: (parts: ContentPart[]) => void
   class?: string
   ref?: (el: HTMLDivElement) => void
 }
 
 export const PromptInput: Component<PromptInputProps> = (props) => {
+  const navigate = useNavigate()
+  const sdk = useSDK()
+  const sync = useSync()
   const local = useLocal()
+  const session = useSession()
   let editorRef!: HTMLDivElement
 
-  const defaultParts = [{ type: "text", content: "", start: 0, end: 0 } as const]
   const [store, setStore] = createStore<{
-    contentParts: ContentPart[]
     popoverIsOpen: boolean
   }>({
-    contentParts: defaultParts,
     popoverIsOpen: false,
   })
 
-  const isEmpty = createMemo(() => isEqual(store.contentParts, defaultParts))
+  createEffect(() => {
+    session.id
+    editorRef.focus()
+  })
+
   const isFocused = createFocusSignal(() => editorRef)
 
   const handlePaste = (event: ClipboardEvent) => {
@@ -71,14 +61,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   })
 
+  const handleFileSelect = (path: string | undefined) => {
+    if (!path) return
+    addPart({ type: "file", path, content: "@" + getFilename(path), start: 0, end: 0 })
+    setStore("popoverIsOpen", false)
+  }
+
   const { flat, active, onInput, onKeyDown, refetch } = useFilteredList<string>({
     items: local.file.searchFilesAndDirectories,
     key: (x) => x,
-    onSelect: (path) => {
-      if (!path) return
-      addPart({ type: "file", path, content: "@" + getFilename(path), start: 0, end: 0 })
-      setStore("popoverIsOpen", false)
-    },
+    onSelect: handleFileSelect,
   })
 
   createEffect(() => {
@@ -88,10 +80,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   createEffect(
     on(
-      () => store.contentParts,
+      () => session.prompt.current(),
       (currentParts) => {
         const domParts = parseFromDOM()
-        if (isEqual(currentParts, domParts)) return
+        if (isPromptEqual(currentParts, domParts)) return
 
         const selection = window.getSelection()
         let cursorPosition: number | null = null
@@ -122,8 +114,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     ),
   )
 
-  const parseFromDOM = (): ContentPart[] => {
-    const newParts: ContentPart[] = []
+  createEffect(
+    on(
+      () => session.prompt.cursor(),
+      (cursor) => {
+        if (cursor === undefined) return
+        queueMicrotask(() => setCursorPosition(editorRef, cursor))
+      },
+    ),
+  )
+
+  const parseFromDOM = (): Prompt => {
+    const newParts: Prompt = []
     let position = 0
     editorRef.childNodes.forEach((node) => {
       if (node.nodeType === Node.TEXT_NODE) {
@@ -150,7 +152,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         }
       }
     })
-    if (newParts.length === 0) newParts.push(...defaultParts)
+    if (newParts.length === 0) newParts.push(...DEFAULT_PROMPT)
     return newParts
   }
 
@@ -167,12 +169,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       setStore("popoverIsOpen", false)
     }
 
-    setStore("contentParts", rawParts)
+    session.prompt.set(rawParts, cursorPosition)
   }
 
   const addPart = (part: ContentPart) => {
     const cursorPosition = getCursorPosition(editorRef)
-    const rawText = store.contentParts.map((p) => p.content).join("")
+    const prompt = session.prompt.current()
+    const rawText = prompt.map((p) => p.content).join("")
     const textBeforeCursor = rawText.substring(0, cursorPosition)
     const atMatch = textBeforeCursor.match(/@(\S*)$/)
 
@@ -198,7 +201,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       parts: nextParts,
       inserted,
       cursorPositionAfter,
-    } = store.contentParts.reduce(
+    } = prompt.reduce(
       (acc, item) => {
         if (acc.inserted) {
           acc.parts.push({ ...item, start: acc.runningIndex, end: acc.runningIndex + item.content.length })
@@ -257,7 +260,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     )
 
     if (!inserted) {
-      const baseParts = store.contentParts.filter((item) => !(item.type === "text" && item.content === ""))
+      const baseParts = prompt.filter((item) => !(item.type === "text" && item.content === ""))
       const runningIndex = baseParts.reduce((sum, p) => sum + p.content.length, 0)
       const appendedAcc = { parts: [...baseParts] as ContentPart[], runningIndex }
       if (part.type === "text") {
@@ -270,20 +273,27 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           end: appendedAcc.runningIndex + part.content.length,
         })
       }
-      const next = appendedAcc.parts.length > 0 ? appendedAcc.parts : defaultParts
-      setStore("contentParts", next)
-      setStore("popoverIsOpen", false)
+      const next = appendedAcc.parts.length > 0 ? appendedAcc.parts : DEFAULT_PROMPT
       const nextCursor = rawText.length + part.content.length
+      session.prompt.set(next, nextCursor)
+      setStore("popoverIsOpen", false)
       queueMicrotask(() => setCursorPosition(editorRef, nextCursor))
       return
     }
 
-    setStore("contentParts", nextParts)
+    session.prompt.set(nextParts, cursorPositionAfter)
     setStore("popoverIsOpen", false)
 
     queueMicrotask(() => setCursorPosition(editorRef, cursorPositionAfter))
   }
 
+  const abort = () =>
+    sdk.client.session.abort({
+      path: {
+        id: session.id!,
+      },
+    })
+
   const handleKeyDown = (event: KeyboardEvent) => {
     if (store.popoverIsOpen && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) {
       onKeyDown(event)
@@ -293,14 +303,100 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (event.key === "Enter" && !event.shiftKey) {
       handleSubmit(event)
     }
+    if (event.key === "Escape") {
+      if (store.popoverIsOpen) {
+        setStore("popoverIsOpen", false)
+      } else if (session.working()) {
+        abort()
+      }
+    }
   }
 
-  const handleSubmit = (event: Event) => {
+  const handleSubmit = async (event: Event) => {
     event.preventDefault()
-    if (store.contentParts.length > 0) {
-      props.onSubmit([...store.contentParts])
-      setStore("contentParts", defaultParts)
+    const prompt = session.prompt.current()
+    const text = prompt.map((part) => part.content).join("")
+    if (text.trim().length === 0) {
+      if (session.working()) abort()
+      return
     }
+
+    let existing = session.info()
+    if (!existing) {
+      const created = await sdk.client.session.create()
+      existing = created.data ?? undefined
+      if (existing) navigate(`/session/${existing.id}`)
+    }
+    if (!existing) return
+
+    // if (!session.id) {
+    // session.layout.setOpenedTabs(
+    // session.layout.copyTabs("", session.id)
+    // }
+
+    const toAbsolutePath = (path: string) => (path.startsWith("/") ? path : sync.absolute(path))
+    const attachments = prompt.filter((part) => part.type === "file")
+
+    // const activeFile = local.context.active()
+    // if (activeFile) {
+    //   registerAttachment(
+    //     activeFile.path,
+    //     activeFile.selection,
+    //     activeFile.name ?? formatAttachmentLabel(activeFile.path, activeFile.selection),
+    //   )
+    // }
+
+    // for (const contextFile of local.context.all()) {
+    //   registerAttachment(
+    //     contextFile.path,
+    //     contextFile.selection,
+    //     formatAttachmentLabel(contextFile.path, contextFile.selection),
+    //   )
+    // }
+
+    const attachmentParts = attachments.map((attachment) => {
+      const absolute = toAbsolutePath(attachment.path)
+      const query = attachment.selection
+        ? `?start=${attachment.selection.startLine}&end=${attachment.selection.endLine}`
+        : ""
+      return {
+        type: "file" as const,
+        mime: "text/plain",
+        url: `file://${absolute}${query}`,
+        filename: getFilename(attachment.path),
+        source: {
+          type: "file" as const,
+          text: {
+            value: attachment.content,
+            start: attachment.start,
+            end: attachment.end,
+          },
+          path: absolute,
+        },
+      }
+    })
+
+    session.layout.setActiveTab(undefined)
+    session.messages.setActive(undefined)
+    session.prompt.set(DEFAULT_PROMPT, 0)
+
+    sdk.client.session.prompt({
+      path: { id: existing.id },
+      body: {
+        agent: local.agent.current()!.name,
+        model: {
+          modelID: local.model.current()!.id,
+          providerID: local.model.current()!.provider.id,
+        },
+        parts: [
+          {
+            type: "text",
+            text,
+          },
+          ...attachmentParts,
+        ],
+      },
+    })
   }
 
   return (
@@ -310,11 +406,12 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           <Show when={flat().length > 0} fallback={<div class="text-text-weak px-2">No matching files</div>}>
             <For each={flat()}>
               {(i) => (
-                <div
+                <button
                   classList={{
                     "w-full flex items-center justify-between rounded-md": true,
                     "bg-surface-raised-base-hover": active() === i,
                   }}
+                  onClick={() => handleFileSelect(i)}
                 >
                   <div class="flex items-center gap-x-2 grow min-w-0">
                     <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
@@ -326,7 +423,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     </div>
                   </div>
                   <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0"></div>
-                </div>
+                </button>
               )}
             </For>
           </Show>
@@ -354,7 +451,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               "[&>[data-type=file]]:text-icon-info-active": true,
             }}
           />
-          <Show when={isEmpty()}>
+          <Show when={!session.prompt.dirty()}>
             <div class="absolute top-0 left-0 p-3 text-14-regular text-text-weak pointer-events-none">
               Plan and build anything
             </div>
@@ -419,29 +516,39 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               )}
             </SelectDialog>
           </div>
-          <IconButton type="submit" disabled={isEmpty()} icon="arrow-up" variant="primary" />
+          <Tooltip
+            placement="top"
+            value={
+              <Switch>
+                <Match when={session.working()}>
+                  <div class="flex items-center gap-2">
+                    <span>Stop</span>
+                    <span class="text-icon-base text-12-medium text-[10px]!">ESC</span>
+                  </div>
+                </Match>
+                <Match when={true}>
+                  <div class="flex items-center gap-2">
+                    <span>Send</span>
+                    <Icon name="enter" size="small" class="text-icon-base" />
+                  </div>
+                </Match>
+              </Switch>
+            }
+          >
+            <IconButton
+              type="submit"
+              disabled={!session.prompt.dirty() && !session.working()}
+              icon={session.working() ? "stop" : "arrow-up"}
+              variant="primary"
+              class="rounded-full"
+            />
+          </Tooltip>
         </div>
       </form>
     </div>
   )
 }
 
-function isEqual(arrA: ContentPart[], arrB: ContentPart[]): boolean {
-  if (arrA.length !== arrB.length) return false
-  for (let i = 0; i < arrA.length; i++) {
-    const partA = arrA[i]
-    const partB = arrB[i]
-    if (partA.type !== partB.type) return false
-    if (partA.type === "text" && partA.content !== (partB as TextPart).content) {
-      return false
-    }
-    if (partA.type === "file" && partA.path !== (partB as FileAttachmentPart).path) {
-      return false
-    }
-  }
-  return true
-}
-
 function getCursorPosition(parent: HTMLElement): number {
   const selection = window.getSelection()
   if (!selection || selection.rangeCount === 0) return 0

packages/desktop/src/components/theme.json

@@ -1,558 +0,0 @@
-{
-  "colors": {
-    "actionBar.toggledBackground": "var(--surface-raised-base)",
-    "activityBarBadge.background": "var(--surface-brand-base)",
-    "checkbox.border": "var(--border-base)",
-    "editor.background": "transparent",
-    "editor.foreground": "var(--text-base)",
-    "editor.inactiveSelectionBackground": "var(--surface-raised-base)",
-    "editor.selectionHighlightBackground": "var(--border-active)",
-    "editorIndentGuide.activeBackground1": "var(--border-weak-base)",
-    "editorIndentGuide.background1": "var(--border-weak-base)",
-    "input.placeholderForeground": "var(--text-weak)",
-    "list.activeSelectionIconForeground": "var(--text-base)",
-    "list.dropBackground": "var(--surface-raised-base)",
-    "menu.background": "var(--surface-base)",
-    "menu.border": "var(--border-base)",
-    "menu.foreground": "var(--text-base)",
-    "menu.selectionBackground": "var(--surface-interactive-base)",
-    "menu.separatorBackground": "var(--border-base)",
-    "ports.iconRunningProcessForeground": "var(--icon-success-base)",
-    "sideBarSectionHeader.background": "transparent",
-    "sideBarSectionHeader.border": "var(--border-weak-base)",
-    "sideBarTitle.foreground": "var(--text-weak)",
-    "statusBarItem.remoteBackground": "var(--surface-success-base)",
-    "statusBarItem.remoteForeground": "var(--text-base)",
-    "tab.lastPinnedBorder": "var(--border-weak-base)",
-    "tab.selectedBackground": "var(--surface-raised-base)",
-    "tab.selectedForeground": "var(--text-weak)",
-    "terminal.inactiveSelectionBackground": "var(--surface-raised-base)",
-    "widget.border": "var(--border-base)"
-  },
-  "displayName": "opencode",
-  "name": "opencode",
-  "semanticHighlighting": true,
-  "semanticTokenColors": {
-    "customLiteral": "var(--syntax-function)",
-    "newOperator": "var(--syntax-operator)",
-    "numberLiteral": "var(--syntax-number)",
-    "stringLiteral": "var(--syntax-string)"
-  },
-  "tokenColors": [
-    {
-      "scope": [
-        "meta.embedded",
-        "source.groovy.embedded",
-        "string meta.image.inline.markdown",
-        "variable.legacy.builtin.python"
-      ],
-      "settings": {
-        "foreground": "var(--text-base)"
-      }
-    },
-    {
-      "scope": "emphasis",
-      "settings": {
-        "fontStyle": "italic"
-      }
-    },
-    {
-      "scope": "strong",
-      "settings": {
-        "fontStyle": "bold"
-      }
-    },
-    {
-      "scope": "header",
-      "settings": {
-        "foreground": "var(--markdown-heading)"
-      }
-    },
-    {
-      "scope": "comment",
-      "settings": {
-        "foreground": "var(--syntax-comment)"
-      }
-    },
-    {
-      "scope": "constant.language",
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": [
-        "constant.numeric",
-        "variable.other.enummember",
-        "keyword.operator.plus.exponent",
-        "keyword.operator.minus.exponent"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-number)"
-      }
-    },
-    {
-      "scope": "constant.regexp",
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": "entity.name.tag",
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": ["entity.name.tag.css", "entity.name.tag.less"],
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": "entity.other.attribute-name",
-      "settings": {
-        "foreground": "var(--syntax-variable)"
-      }
-    },
-    {
-      "scope": [
-        "entity.other.attribute-name.class.css",
-        "source.css entity.other.attribute-name.class",
-        "entity.other.attribute-name.id.css",
-        "entity.other.attribute-name.parent-selector.css",
-        "entity.other.attribute-name.parent.less",
-        "source.css entity.other.attribute-name.pseudo-class",
-        "entity.other.attribute-name.pseudo-element.css",
-        "source.css.less entity.other.attribute-name.id",
-        "entity.other.attribute-name.scss"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": "invalid",
-      "settings": {
-        "foreground": "var(--syntax-critical)"
-      }
-    },
-    {
-      "scope": "markup.underline",
-      "settings": {
-        "fontStyle": "underline"
-      }
-    },
-    {
-      "scope": "markup.bold",
-      "settings": {
-        "fontStyle": "bold",
-        "foreground": "var(--markdown-strong)"
-      }
-    },
-    {
-      "scope": "markup.heading",
-      "settings": {
-        "fontStyle": "bold",
-        "foreground": "var(--theme-markdown-heading)"
-      }
-    },
-    {
-      "scope": "markup.italic",
-      "settings": {
-        "fontStyle": "italic"
-      }
-    },
-    {
-      "scope": "markup.strikethrough",
-      "settings": {
-        "fontStyle": "strikethrough"
-      }
-    },
-    {
-      "scope": "markup.inserted",
-      "settings": {
-        "foreground": "var(--text-diff-add-base)"
-      }
-    },
-    {
-      "scope": "markup.deleted",
-      "settings": {
-        "foreground": "var(--text-diff-delete-base)"
-      }
-    },
-    {
-      "scope": "markup.changed",
-      "settings": {
-        "foreground": "var(--text-base)"
-      }
-    },
-    {
-      "scope": "punctuation.definition.quote.begin.markdown",
-      "settings": {
-        "foreground": "var(--markdown-block-quote)"
-      }
-    },
-    {
-      "scope": "punctuation.definition.list.begin.markdown",
-      "settings": {
-        "foreground": "var(--markdown-list-enumeration)"
-      }
-    },
-    {
-      "scope": "markup.inline.raw",
-      "settings": {
-        "foreground": "var(--markdown-code)"
-      }
-    },
-    {
-      "scope": "punctuation.definition.tag",
-      "settings": {
-        "foreground": "var(--syntax-punctuation)"
-      }
-    },
-    {
-      "scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": "meta.preprocessor.string",
-      "settings": {
-        "foreground": "var(--syntax-string)"
-      }
-    },
-    {
-      "scope": "meta.preprocessor.numeric",
-      "settings": {
-        "foreground": "var(--syntax-number)"
-      }
-    },
-    {
-      "scope": "meta.structure.dictionary.key.python",
-      "settings": {
-        "foreground": "var(--syntax-variable)"
-      }
-    },
-    {
-      "scope": "meta.diff.header",
-      "settings": {
-        "foreground": "var(--text-weak)"
-      }
-    },
-    {
-      "scope": "storage",
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": "storage.type",
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": ["storage.modifier", "keyword.operator.noexcept"],
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": ["string", "meta.embedded.assembly"],
-      "settings": {
-        "foreground": "var(--syntax-string)"
-      }
-    },
-    {
-      "scope": "string.tag",
-      "settings": {
-        "foreground": "var(--syntax-string)"
-      }
-    },
-    {
-      "scope": "string.value",
-      "settings": {
-        "foreground": "var(--syntax-string)"
-      }
-    },
-    {
-      "scope": "string.regexp",
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": [
-        "punctuation.definition.template-expression.begin",
-        "punctuation.definition.template-expression.end",
-        "punctuation.section.embedded"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": ["meta.template.expression"],
-      "settings": {
-        "foreground": "var(--text-base)"
-      }
-    },
-    {
-      "scope": [
-        "support.type.vendored.property-name",
-        "support.type.property-name",
-        "source.css variable",
-        "source.coffee.embedded"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-variable)"
-      }
-    },
-    {
-      "scope": "keyword",
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": "keyword.control",
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": "keyword.operator",
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": [
-        "keyword.operator.new",
-        "keyword.operator.expression",
-        "keyword.operator.cast",
-        "keyword.operator.sizeof",
-        "keyword.operator.alignof",
-        "keyword.operator.typeid",
-        "keyword.operator.alignas",
-        "keyword.operator.instanceof",
-        "keyword.operator.logical.python",
-        "keyword.operator.wordlike"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": "keyword.other.unit",
-      "settings": {
-        "foreground": "var(--syntax-number)"
-      }
-    },
-    {
-      "scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": "support.function.git-rebase",
-      "settings": {
-        "foreground": "var(--syntax-variable)"
-      }
-    },
-    {
-      "scope": "constant.sha.git-rebase",
-      "settings": {
-        "foreground": "var(--syntax-number)"
-      }
-    },
-    {
-      "scope": ["storage.modifier.import.java", "variable.language.wildcard.java", "storage.modifier.package.java"],
-      "settings": {
-        "foreground": "var(--text-base)"
-      }
-    },
-    {
-      "scope": "variable.language",
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": [
-        "entity.name.function",
-        "support.function",
-        "support.constant.handlebars",
-        "source.powershell variable.other.member",
-        "entity.name.operator.custom-literal"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-function)"
-      }
-    },
-    {
-      "scope": [
-        "support.class",
-        "support.type",
-        "entity.name.type",
-        "entity.name.namespace",
-        "entity.other.attribute",
-        "entity.name.scope-resolution",
-        "entity.name.class",
-        "storage.type.numeric.go",
-        "storage.type.byte.go",
-        "storage.type.boolean.go",
-        "storage.type.string.go",
-        "storage.type.uintptr.go",
-        "storage.type.error.go",
-        "storage.type.rune.go",
-        "storage.type.cs",
-        "storage.type.generic.cs",
-        "storage.type.modifier.cs",
-        "storage.type.variable.cs",
-        "storage.type.annotation.java",
-        "storage.type.generic.java",
-        "storage.type.java",
-        "storage.type.object.array.java",
-        "storage.type.primitive.array.java",
-        "storage.type.primitive.java",
-        "storage.type.token.java",
-        "storage.type.groovy",
-        "storage.type.annotation.groovy",
-        "storage.type.parameters.groovy",
-        "storage.type.generic.groovy",
-        "storage.type.object.array.groovy",
-        "storage.type.primitive.array.groovy",
-        "storage.type.primitive.groovy"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-type)"
-      }
-    },
-    {
-      "scope": [
-        "meta.type.cast.expr",
-        "meta.type.new.expr",
-        "support.constant.math",
-        "support.constant.dom",
-        "support.constant.json",
-        "entity.other.inherited-class",
-        "punctuation.separator.namespace.ruby"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-type)"
-      }
-    },
-    {
-      "scope": [
-        "keyword.control",
-        "source.cpp keyword.operator.new",
-        "keyword.operator.delete",
-        "keyword.other.using",
-        "keyword.other.directive.using",
-        "keyword.other.operator",
-        "entity.name.operator"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": [
-        "variable",
-        "meta.definition.variable.name",
-        "support.variable",
-        "entity.name.variable",
-        "constant.other.placeholder"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-variable)"
-      }
-    },
-    {
-      "scope": ["variable.other.constant", "variable.other.enummember"],
-      "settings": {
-        "foreground": "var(--syntax-variable)"
-      }
-    },
-    {
-      "scope": ["meta.object-literal.key"],
-      "settings": {
-        "foreground": "var(--syntax-variable)"
-      }
-    },
-    {
-      "scope": [
-        "support.constant.property-value",
-        "support.constant.font-name",
-        "support.constant.media-type",
-        "support.constant.media",
-        "constant.other.color.rgb-value",
-        "constant.other.rgb-value",
-        "support.constant.color"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-string)"
-      }
-    },
-    {
-      "scope": [
-        "punctuation.definition.group.regexp",
-        "punctuation.definition.group.assertion.regexp",
-        "punctuation.definition.character-class.regexp",
-        "punctuation.character.set.begin.regexp",
-        "punctuation.character.set.end.regexp",
-        "keyword.operator.negation.regexp",
-        "support.other.parenthesis.regexp"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-string)"
-      }
-    },
-    {
-      "scope": [
-        "constant.character.character-class.regexp",
-        "constant.other.character-class.set.regexp",
-        "constant.other.character-class.regexp",
-        "constant.character.set.regexp"
-      ],
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": "keyword.operator.quantifier.regexp",
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": ["constant.character", "constant.other.option"],
-      "settings": {
-        "foreground": "var(--syntax-keyword)"
-      }
-    },
-    {
-      "scope": "constant.character.escape",
-      "settings": {
-        "foreground": "var(--syntax-operator)"
-      }
-    },
-    {
-      "scope": "entity.name.label",
-      "settings": {
-        "foreground": "var(--text-weak)"
-      }
-    }
-  ],
-  "type": "dark"
-}

packages/desktop/src/context/local.tsx

@@ -5,6 +5,7 @@ import type { FileContent, FileNode, Model, Provider, File as FileStatus } from
 import { createSimpleContext } from "./helper"
 import { useSDK } from "./sdk"
 import { useSync } from "./sync"
+import { makePersisted } from "@solid-primitives/storage"
 
 export type LocalFile = FileNode &
   Partial<{
@@ -195,18 +196,10 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     const file = (() => {
       const [store, setStore] = createStore<{
         node: Record<string, LocalFile>
-        // opened: string[]
-        // active?: string
       }>({
         node: Object.fromEntries(sync.data.node.map((x) => [x.path, x])),
-        // opened: [],
       })
 
-      // const active = createMemo(() => {
-      //   if (!store.active) return undefined
-      //   return store.node[store.active]
-      // })
-      // const opened = createMemo(() => store.opened.map((x) => store.node[x]))
       const changeset = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
       const changes = createMemo(() => Array.from(changeset()).sort((a, b) => a.localeCompare(b)))
 
@@ -247,18 +240,18 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         return false
       }
 
-      const resetNode = (path: string) => {
-        setStore("node", path, {
-          loaded: undefined,
-          pinned: undefined,
-          content: undefined,
-          selection: undefined,
-          scrollTop: undefined,
-          folded: undefined,
-          view: undefined,
-          selectedChange: undefined,
-        })
-      }
+      // const resetNode = (path: string) => {
+      //   setStore("node", path, {
+      //     loaded: undefined,
+      //     pinned: undefined,
+      //     content: undefined,
+      //     selection: undefined,
+      //     scrollTop: undefined,
+      //     folded: undefined,
+      //     view: undefined,
+      //     selectedChange: undefined,
+      //   })
+      // }
 
       const relative = (path: string) => path.replace(sync.data.path.directory + "/", "")
 
@@ -333,31 +326,21 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       sdk.event.listen((e) => {
         const event = e.details
         switch (event.type) {
-          case "message.part.updated":
-            const part = event.properties.part
-            if (part.type === "tool" && part.state.status === "completed") {
-              switch (part.tool) {
-                case "read":
-                  break
-                case "edit":
-                  // load(part.state.input["filePath"] as string)
-                  break
-                default:
-                  break
-              }
-            }
-            break
           case "file.watcher.updated":
-            // setTimeout(sync.load.changes, 1000)
-            // const relativePath = relative(event.properties.file)
-            // if (relativePath.startsWith(".git/")) return
-            // load(relativePath)
+            const relativePath = relative(event.properties.file)
+            if (relativePath.startsWith(".git/")) return
+            load(relativePath)
             break
         }
       })
 
       return {
-        node: (path: string) => store.node[path],
+        node: async (path: string) => {
+          if (!store.node[path]) {
+            await init(path)
+          }
+          return store.node[path]
+        },
         update: (path: string, node: LocalFile) => setStore("node", path, reconcile(node)),
         open,
         load,
@@ -417,121 +400,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         searchFiles,
         searchFilesAndDirectories,
         relative,
-        // active,
-        // opened,
-        // close(path: string) {
-        //   setStore("opened", (opened) => opened.filter((x) => x !== path))
-        //   if (store.active === path) {
-        //     const index = store.opened.findIndex((f) => f === path)
-        //     const previous = store.opened[Math.max(0, index - 1)]
-        //     setStore("active", previous)
-        //   }
-        //   resetNode(path)
-        // },
-        // move(path: string, to: number) {
-        //   const index = store.opened.findIndex((f) => f === path)
-        //   if (index === -1) return
-        //   setStore(
-        //     "opened",
-        //     produce((opened) => {
-        //       opened.splice(to, 0, opened.splice(index, 1)[0])
-        //     }),
-        //   )
-        //   setStore("node", path, "pinned", true)
-        // },
-      }
-    })()
-
-    const session = (() => {
-      const [store, setStore] = createStore<{
-        active?: string
-        tabs: Record<
-          string,
-          {
-            active?: string
-            opened: string[]
-          }
-        >
-      }>({
-        tabs: {
-          "": {
-            opened: [],
-          },
-        },
-      })
-
-      const active = createMemo(() => {
-        if (!store.active) return undefined
-        return sync.session.get(store.active)
-      })
-
-      createEffect(() => {
-        if (!store.active) return
-        sync.session.sync(store.active)
-
-        if (!store.tabs[store.active]) {
-          setStore("tabs", store.active, {
-            opened: [],
-          })
-        }
-      })
-
-      const tabs = createMemo(() => store.tabs[store.active ?? ""])
-
-      return {
-        active,
-        setActive(sessionId: string | undefined) {
-          setStore("active", sessionId)
-        },
-        clearActive() {
-          setStore("active", undefined)
-        },
-        tabs,
-        copyTabs(from: string, to: string) {
-          setStore("tabs", to, {
-            opened: store.tabs[from]?.opened ?? [],
-          })
-        },
-        setActiveTab(tab: string | undefined) {
-          setStore("tabs", store.active ?? "", "active", tab)
-        },
-        async open(tab: string) {
-          if (tab !== "chat") {
-            await file.open(tab)
-          }
-          if (!tabs()?.opened?.includes(tab)) {
-            setStore("tabs", store.active ?? "", "opened", [...(tabs()?.opened ?? []), tab])
-          }
-          setStore("tabs", store.active ?? "", "active", tab)
-        },
-        close(tab: string) {
-          batch(() => {
-            if (!tabs()) return
-            setStore("tabs", store.active ?? "", {
-              active: tabs()!.active,
-              opened: tabs()!.opened.filter((x) => x !== tab),
-            })
-            if (tabs()!.active === tab) {
-              const index = tabs()!.opened.findIndex((f) => f === tab)
-              const previous = tabs()!.opened[Math.max(0, index - 1)]
-              setStore("tabs", store.active ?? "", "active", previous)
-            }
-          })
-        },
-        move(tab: string, to: number) {
-          if (!tabs()) return
-          const index = tabs()!.opened.findIndex((f) => f === tab)
-          if (index === -1) return
-          setStore(
-            "tabs",
-            store.active ?? "",
-            "opened",
-            produce((opened) => {
-              opened.splice(to, 0, opened.splice(index, 1)[0])
-            }),
-          )
-          // setStore("node", path, "pinned", true)
-        },
       }
     })()
 
@@ -589,12 +457,60 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       }
     })()
 
+    const layout = (() => {
+      const [store, setStore] = makePersisted(
+        createStore({
+          sidebar: {
+            opened: true,
+            width: 240,
+          },
+          review: {
+            state: "closed" as "open" | "closed" | "tab",
+          },
+        }),
+        {
+          name: "default-layout",
+        },
+      )
+
+      return {
+        sidebar: {
+          opened: createMemo(() => store.sidebar.opened),
+          open() {
+            setStore("sidebar", "opened", true)
+          },
+          close() {
+            setStore("sidebar", "opened", false)
+          },
+          toggle() {
+            setStore("sidebar", "opened", (x) => !x)
+          },
+          width: createMemo(() => store.sidebar.width),
+          resize(width: number) {
+            setStore("sidebar", "width", width)
+          },
+        },
+        review: {
+          state: createMemo(() => store.review?.state ?? "closed"),
+          open() {
+            setStore("review", "state", "open")
+          },
+          close() {
+            setStore("review", "state", "closed")
+          },
+          tab() {
+            setStore("review", "state", "tab")
+          },
+        },
+      }
+    })()
+
     const result = {
       model,
       agent,
       file,
-      session,
       context,
+      layout,
     }
     return result
   },

packages/desktop/src/context/session.tsx

@@ -0,0 +1,217 @@
+import { createStore, produce } from "solid-js/store"
+import { createSimpleContext } from "./helper"
+import { batch, createEffect, createMemo } from "solid-js"
+import { useSync } from "./sync"
+import { makePersisted } from "@solid-primitives/storage"
+import { TextSelection, useLocal } from "./local"
+import { pipe, sumBy } from "remeda"
+import { AssistantMessage } from "@opencode-ai/sdk"
+
+export const { use: useSession, provider: SessionProvider } = createSimpleContext({
+  name: "Session",
+  init: (props: { sessionId?: string }) => {
+    const sync = useSync()
+    const local = useLocal()
+
+    const [store, setStore] = makePersisted(
+      createStore<{
+        prompt: Prompt
+        cursorPosition?: number
+        messageId?: string
+        tabs: {
+          active?: string
+          opened: string[]
+        }
+      }>({
+        prompt: [{ type: "text", content: "", start: 0, end: 0 }],
+        tabs: {
+          opened: [],
+        },
+      }),
+      {
+        name: props.sessionId ?? "new-session",
+      },
+    )
+
+    createEffect(() => {
+      if (!props.sessionId) return
+      sync.session.sync(props.sessionId)
+    })
+
+    const info = createMemo(() => (props.sessionId ? sync.session.get(props.sessionId) : undefined))
+    const messages = createMemo(() => (props.sessionId ? (sync.data.message[props.sessionId] ?? []) : []))
+    const userMessages = createMemo(() =>
+      messages()
+        .filter((m) => m.role === "user")
+        .sort((a, b) => b.id.localeCompare(a.id)),
+    )
+    const lastUserMessage = createMemo(() => {
+      return userMessages()?.at(0)
+    })
+    const activeMessage = createMemo(() => {
+      if (!store.messageId) return lastUserMessage()
+      return userMessages()?.find((m) => m.id === store.messageId)
+    })
+    const working = createMemo(() => {
+      if (!props.sessionId) return false
+      const last = lastUserMessage()
+      if (!last) return false
+      const assistantMessages = sync.data.message[props.sessionId]?.filter(
+        (m) => m.role === "assistant" && m.parentID == last?.id,
+      ) as AssistantMessage[]
+      const error = assistantMessages?.find((m) => m?.error)?.error
+      return !last?.summary?.body && !error
+    })
+
+    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(
+      () => messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage,
+    )
+    const model = createMemo(() =>
+      last() ? sync.data.provider.find((x) => x.id === last().providerID)?.models[last().modelID] : undefined,
+    )
+    const diffs = createMemo(() => (props.sessionId ? (sync.data.session_diff[props.sessionId] ?? []) : []))
+
+    const tokens = createMemo(() => {
+      if (!last()) return
+      const tokens = last().tokens
+      return tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
+    })
+
+    const context = createMemo(() => {
+      const total = tokens()
+      const limit = model()?.limit.context
+      if (!total || !limit) return 0
+      return Math.round((total / limit) * 100)
+    })
+
+    return {
+      id: props.sessionId,
+      info,
+      working,
+      diffs,
+      prompt: {
+        current: createMemo(() => store.prompt),
+        cursor: createMemo(() => store.cursorPosition),
+        dirty: createMemo(() => !isPromptEqual(store.prompt, DEFAULT_PROMPT)),
+        set(prompt: Prompt, cursorPosition?: number) {
+          batch(() => {
+            setStore("prompt", prompt)
+            if (cursorPosition !== undefined) setStore("cursorPosition", cursorPosition)
+          })
+        },
+      },
+      messages: {
+        all: messages,
+        user: userMessages,
+        last: lastUserMessage,
+        active: activeMessage,
+        setActive(id: string | undefined) {
+          setStore("messageId", id)
+        },
+      },
+      usage: {
+        tokens,
+        cost,
+        context,
+      },
+      layout: {
+        tabs: store.tabs,
+        setActiveTab(tab: string | undefined) {
+          setStore("tabs", "active", tab)
+        },
+        setOpenedTabs(tabs: string[]) {
+          setStore("tabs", "opened", tabs)
+        },
+        async openTab(tab: string) {
+          if (tab === "chat") {
+            setStore("tabs", "active", undefined)
+            return
+          }
+          if (tab.startsWith("file://")) {
+            await local.file.open(tab.replace("file://", ""))
+          }
+          if (tab !== "review") {
+            if (!store.tabs.opened.includes(tab)) {
+              setStore("tabs", "opened", [...store.tabs.opened, tab])
+            }
+          }
+          setStore("tabs", "active", tab)
+        },
+        closeTab(tab: string) {
+          batch(() => {
+            setStore(
+              "tabs",
+              "opened",
+              store.tabs.opened.filter((x) => x !== tab),
+            )
+            if (store.tabs.active === tab) {
+              const index = store.tabs.opened.findIndex((f) => f === tab)
+              const previous = store.tabs.opened[Math.max(0, index - 1)]
+              setStore("tabs", "active", previous)
+            }
+          })
+        },
+        moveTab(tab: string, to: number) {
+          const index = store.tabs.opened.findIndex((f) => f === tab)
+          if (index === -1) return
+          setStore(
+            "tabs",
+            "opened",
+            produce((opened) => {
+              opened.splice(to, 0, opened.splice(index, 1)[0])
+            }),
+          )
+          // setStore("node", path, "pinned", true)
+        },
+      },
+    }
+  },
+})
+
+interface PartBase {
+  content: string
+  start: number
+  end: number
+}
+
+export interface TextPart extends PartBase {
+  type: "text"
+}
+
+export interface FileAttachmentPart extends PartBase {
+  type: "file"
+  path: string
+  selection?: TextSelection
+}
+
+export type ContentPart = TextPart | FileAttachmentPart
+export type Prompt = ContentPart[]
+
+export const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
+
+export function isPromptEqual(promptA: Prompt, promptB: Prompt): boolean {
+  if (promptA.length !== promptB.length) return false
+  for (let i = 0; i < promptA.length; i++) {
+    const partA = promptA[i]
+    const partB = promptB[i]
+    if (partA.type !== partB.type) return false
+    if (partA.type === "text" && partA.content !== (partB as TextPart).content) {
+      return false
+    }
+    if (partA.type === "file" && partA.path !== (partB as FileAttachmentPart).path) {
+      return false
+    }
+  }
+  return true
+}

packages/desktop/src/context/sync.tsx

@@ -9,7 +9,8 @@ import type {
   File,
   FileNode,
   Project,
-  Command,
+  FileDiff,
+  Todo,
 } from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { createMemo } from "solid-js"
@@ -28,6 +29,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       config: Config
       path: Path
       session: Session[]
+      session_diff: {
+        [sessionID: string]: FileDiff[]
+      }
+      todo: {
+        [sessionID: string]: Todo[]
+      }
+      limit: number
       message: {
         [sessionID: string]: Message[]
       }
@@ -44,6 +52,9 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       agent: [],
       provider: [],
       session: [],
+      session_diff: {},
+      todo: {},
+      limit: 10,
       message: {},
       part: {},
       node: [],
@@ -68,6 +79,12 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           )
           break
         }
+        case "session.diff":
+          setStore("session_diff", event.properties.sessionID, event.properties.diff)
+          break
+        case "todo.updated":
+          setStore("todo", event.properties.sessionID, event.properties.todos)
+          break
         case "message.updated": {
           const messages = store.message[event.properties.info.sessionID]
           if (!messages) {
@@ -118,12 +135,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       path: () => sdk.client.path.get().then((x) => setStore("path", x.data!)),
       agent: () => sdk.client.app.agents().then((x) => setStore("agent", x.data ?? [])),
       session: () =>
-        sdk.client.session.list().then((x) =>
-          setStore(
-            "session",
-            (x.data ?? []).slice().sort((a, b) => a.id.localeCompare(b.id)),
-          ),
-        ),
+        sdk.client.session.list().then((x) => {
+          const sessions = (x.data ?? [])
+            .slice()
+            .sort((a, b) => a.id.localeCompare(b.id))
+            .slice(0, store.limit)
+          setStore("session", sessions)
+        }),
       config: () => sdk.client.config.get().then((x) => setStore("config", x.data!)),
       changes: () => sdk.client.file.status().then((x) => setStore("changes", x.data!)),
       node: () => sdk.client.file.list({ query: { path: "/" } }).then((x) => setStore("node", x.data!)),
@@ -167,22 +185,19 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           if (match.found) return store.session[match.index]
           return undefined
         },
-        async sync(sessionID: string, isRetry = false) {
-          const [session, messages] = await Promise.all([
-            sdk.client.session.get({ path: { id: sessionID } }),
-            sdk.client.session.messages({ path: { id: sessionID } }),
+        async sync(sessionID: string, _isRetry = false) {
+          const [session, messages, todo, diff] = await Promise.all([
+            sdk.client.session.get({ path: { id: sessionID }, throwOnError: true }),
+            sdk.client.session.messages({ path: { id: sessionID }, query: { limit: 100 } }),
+            sdk.client.session.todo({ path: { id: sessionID } }),
+            sdk.client.session.diff({ path: { id: sessionID } }),
           ])
-
-          // If no messages and this might be a new session, retry after a delay
-          if (!isRetry && messages.data!.length === 0) {
-            setTimeout(() => this.sync(sessionID, true), 500)
-            return
-          }
-
           setStore(
             produce((draft) => {
               const match = Binary.search(draft.session, sessionID, (s) => s.id)
-              draft.session[match.index] = session.data!
+              if (match.found) draft.session[match.index] = session.data!
+              if (!match.found) draft.session.splice(match.index, 0, session.data!)
+              draft.todo[sessionID] = todo.data ?? []
               draft.message[sessionID] = messages
                 .data!.map((x) => x.info)
                 .slice()
@@ -193,9 +208,15 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
                   .map(sanitizePart)
                   .sort((a, b) => a.id.localeCompare(b.id))
               }
+              draft.session_diff[sessionID] = diff.data ?? []
             }),
           )
         },
+        fetch: async (count = 10) => {
+          setStore("limit", (x) => x + count)
+          await load.session()
+        },
+        more: createMemo(() => store.session.length === store.limit),
       },
       load,
       absolute,

packages/desktop/src/index.tsx

@@ -3,18 +3,22 @@ import "@/index.css"
 import { render } from "solid-js/web"
 import { Router, Route } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
-import { Fonts, ShikiProvider, MarkedProvider } from "@opencode-ai/ui"
+import { Fonts, MarkedProvider } from "@opencode-ai/ui"
 import { SDKProvider } from "./context/sdk"
 import { SyncProvider } from "./context/sync"
 import { LocalProvider } from "./context/local"
-import Home from "@/pages"
+import Layout from "@/pages/layout"
+import SessionLayout from "@/pages/session-layout"
+import Session from "@/pages/session"
 
 const host = import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "127.0.0.1"
 const port = import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"
 
 const url =
   new URLSearchParams(document.location.search).get("url") ||
-  (location.hostname.includes("opencode.ai") ? `http://${host}:${port}` : "/")
+  (location.hostname.includes("opencode.ai") || location.hostname.includes("localhost")
+    ? `http://${host}:${port}`
+    : "/")
 
 const root = document.getElementById("root")
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
@@ -25,22 +29,22 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 
 render(
   () => (
-    <ShikiProvider>
-      <MarkedProvider>
-        <SDKProvider url={url}>
-          <SyncProvider>
-            <LocalProvider>
-              <MetaProvider>
-                <Fonts />
-                <Router>
-                  <Route path="/" component={Home} />
-                </Router>
-              </MetaProvider>
-            </LocalProvider>
-          </SyncProvider>
-        </SDKProvider>
-      </MarkedProvider>
-    </ShikiProvider>
+    <MarkedProvider>
+      <SDKProvider url={url}>
+        <SyncProvider>
+          <LocalProvider>
+            <MetaProvider>
+              <Fonts />
+              <Router root={Layout}>
+                <Route path={["/", "/session"]} component={SessionLayout}>
+                  <Route path="/:id?" component={Session} />
+                </Route>
+              </Router>
+            </MetaProvider>
+          </LocalProvider>
+        </SyncProvider>
+      </SDKProvider>
+    </MarkedProvider>
   ),
   root!,
 )

packages/desktop/src/pages/index.tsx

@@ -1,857 +0,0 @@
-import {
-  Button,
-  List,
-  SelectDialog,
-  Tooltip,
-  IconButton,
-  Tabs,
-  Icon,
-  Accordion,
-  Diff,
-  Collapsible,
-  DiffChanges,
-  Message,
-  Typewriter,
-  Card,
-  Code,
-} from "@opencode-ai/ui"
-import { FileIcon } from "@/ui"
-import FileTree from "@/components/file-tree"
-import { MessageProgress } from "@/components/message-progress"
-import { For, onCleanup, onMount, Show, Match, Switch, createSignal, createEffect, createMemo } from "solid-js"
-import { useLocal, type LocalFile } from "@/context/local"
-import { createStore } from "solid-js/store"
-import { getDirectory, getFilename } from "@/utils"
-import { ContentPart, PromptInput } from "@/components/prompt-input"
-import { DateTime } from "luxon"
-import {
-  DragDropProvider,
-  DragDropSensors,
-  DragOverlay,
-  SortableProvider,
-  closestCenter,
-  createSortable,
-  useDragDropContext,
-} from "@thisbeyond/solid-dnd"
-import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
-import type { JSX } from "solid-js"
-import { useSync } from "@/context/sync"
-import { useSDK } from "@/context/sdk"
-import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
-import { Markdown } from "@opencode-ai/ui"
-import { Spinner } from "@/components/spinner"
-
-export default function Page() {
-  const local = useLocal()
-  const sync = useSync()
-  const sdk = useSDK()
-  const [store, setStore] = createStore({
-    clickTimer: undefined as number | undefined,
-    fileSelectOpen: false,
-  })
-  let inputRef!: HTMLDivElement
-  let messageScrollElement!: HTMLDivElement
-  const [activeItem, setActiveItem] = createSignal<string | undefined>(undefined)
-
-  const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
-
-  onMount(() => {
-    document.addEventListener("keydown", handleKeyDown)
-  })
-
-  onCleanup(() => {
-    document.removeEventListener("keydown", handleKeyDown)
-  })
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.getModifierState(MOD) && event.shiftKey && event.key.toLowerCase() === "p") {
-      event.preventDefault()
-      return
-    }
-    if (event.getModifierState(MOD) && event.key.toLowerCase() === "p") {
-      event.preventDefault()
-      setStore("fileSelectOpen", true)
-      return
-    }
-
-    const focused = document.activeElement === inputRef
-    if (focused) {
-      if (event.key === "Escape") {
-        inputRef?.blur()
-      }
-      return
-    }
-
-    // if (local.file.active()) {
-    //   const active = local.file.active()!
-    //   if (event.key === "Enter" && active.selection) {
-    //     local.context.add({
-    //       type: "file",
-    //       path: active.path,
-    //       selection: { ...active.selection },
-    //     })
-    //     return
-    //   }
-    //
-    //   if (event.getModifierState(MOD)) {
-    //     if (event.key.toLowerCase() === "a") {
-    //       return
-    //     }
-    //     if (event.key.toLowerCase() === "c") {
-    //       return
-    //     }
-    //   }
-    // }
-
-    if (event.key.length === 1 && event.key !== "Unidentified" && !(event.ctrlKey || event.metaKey)) {
-      inputRef?.focus()
-    }
-  }
-
-  const resetClickTimer = () => {
-    if (!store.clickTimer) return
-    clearTimeout(store.clickTimer)
-    setStore("clickTimer", undefined)
-  }
-
-  const startClickTimer = () => {
-    const newClickTimer = setTimeout(() => {
-      setStore("clickTimer", undefined)
-    }, 300)
-    setStore("clickTimer", newClickTimer as unknown as number)
-  }
-
-  const handleFileClick = async (file: LocalFile) => {
-    if (store.clickTimer) {
-      resetClickTimer()
-      local.file.update(file.path, { ...file, pinned: true })
-    } else {
-      local.file.open(file.path)
-      startClickTimer()
-    }
-  }
-
-  // const navigateChange = (dir: 1 | -1) => {
-  //   const active = local.file.active()
-  //   if (!active) return
-  //   const current = local.file.changeIndex(active.path)
-  //   const next = current === undefined ? (dir === 1 ? 0 : -1) : current + dir
-  //   local.file.setChangeIndex(active.path, next)
-  // }
-
-  const handleTabChange = (path: string) => {
-    local.session.setActiveTab(path)
-    if (path === "chat") return
-    local.session.open(path)
-  }
-
-  const handleTabClose = (file: LocalFile) => {
-    local.session.close(file.path)
-  }
-
-  const handleDragStart = (event: unknown) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    setActiveItem(id)
-  }
-
-  const handleDragOver = (event: DragEvent) => {
-    const { draggable, droppable } = event
-    if (draggable && droppable) {
-      const currentFiles = local.session.tabs()?.opened.map((file) => file)
-      const fromIndex = currentFiles?.indexOf(draggable.id.toString())
-      const toIndex = currentFiles?.indexOf(droppable.id.toString())
-      if (fromIndex !== toIndex && toIndex !== undefined) {
-        local.session.move(draggable.id.toString(), toIndex)
-      }
-    }
-  }
-
-  const handleDragEnd = () => {
-    setActiveItem(undefined)
-  }
-
-  // const scrollDiffItem = (element: HTMLElement) => {
-  //   element.scrollIntoView({ block: "start", behavior: "instant" })
-  // }
-
-  const handleDiffTriggerClick = (event: MouseEvent) => {
-    // disabling scroll to diff for now
-    return
-    // const target = event.currentTarget as HTMLElement
-    // queueMicrotask(() => {
-    //   if (target.getAttribute("aria-expanded") !== "true") return
-    //   const item = target.closest('[data-slot="accordion-item"]') as HTMLElement | null
-    //   if (!item) return
-    //   scrollDiffItem(item)
-    // })
-  }
-
-  const handlePromptSubmit = async (parts: ContentPart[]) => {
-    const existingSession = local.session.active()
-    let session = existingSession
-    if (!session) {
-      const created = await sdk.client.session.create()
-      session = created.data ?? undefined
-    }
-    if (!session) return
-
-    local.session.setActive(session.id)
-    if (!existingSession) {
-      local.session.copyTabs("", session.id)
-    }
-    local.session.setActiveTab(undefined)
-    const toAbsolutePath = (path: string) => (path.startsWith("/") ? path : sync.absolute(path))
-
-    const text = parts.map((part) => part.content).join("")
-    const attachments = parts.filter((part) => part.type === "file")
-
-    // const activeFile = local.context.active()
-    // if (activeFile) {
-    //   registerAttachment(
-    //     activeFile.path,
-    //     activeFile.selection,
-    //     activeFile.name ?? formatAttachmentLabel(activeFile.path, activeFile.selection),
-    //   )
-    // }
-
-    // for (const contextFile of local.context.all()) {
-    //   registerAttachment(
-    //     contextFile.path,
-    //     contextFile.selection,
-    //     formatAttachmentLabel(contextFile.path, contextFile.selection),
-    //   )
-    // }
-
-    const attachmentParts = attachments.map((attachment) => {
-      const absolute = toAbsolutePath(attachment.path)
-      const query = attachment.selection
-        ? `?start=${attachment.selection.startLine}&end=${attachment.selection.endLine}`
-        : ""
-      return {
-        type: "file" as const,
-        mime: "text/plain",
-        url: `file://${absolute}${query}`,
-        filename: getFilename(attachment.path),
-        source: {
-          type: "file" as const,
-          text: {
-            value: attachment.content,
-            start: attachment.start,
-            end: attachment.end,
-          },
-          path: absolute,
-        },
-      }
-    })
-
-    await sdk.client.session.prompt({
-      path: { id: session.id },
-      body: {
-        agent: local.agent.current()!.name,
-        model: {
-          modelID: local.model.current()!.id,
-          providerID: local.model.current()!.provider.id,
-        },
-        parts: [
-          {
-            type: "text",
-            text,
-          },
-          ...attachmentParts,
-        ],
-      },
-    })
-  }
-
-  const handleNewSession = () => {
-    local.session.setActive(undefined)
-    inputRef?.focus()
-  }
-
-  const TabVisual = (props: { file: LocalFile }): JSX.Element => {
-    return (
-      <div class="flex items-center gap-x-1.5">
-        <FileIcon node={props.file} class="grayscale-100 group-data-[selected]/tab:grayscale-0" />
-        <span
-          classList={{
-            "text-14-medium": true,
-            "text-primary": !!props.file.status?.status,
-            italic: !props.file.pinned,
-          }}
-        >
-          {props.file.name}
-        </span>
-        <span class="hidden opacity-70">
-          <Switch>
-            <Match when={props.file.status?.status === "modified"}>
-              <span class="text-primary">M</span>
-            </Match>
-            <Match when={props.file.status?.status === "added"}>
-              <span class="text-success">A</span>
-            </Match>
-            <Match when={props.file.status?.status === "deleted"}>
-              <span class="text-error">D</span>
-            </Match>
-          </Switch>
-        </span>
-      </div>
-    )
-  }
-
-  const SortableTab = (props: {
-    file: LocalFile
-    onTabClick: (file: LocalFile) => void
-    onTabClose: (file: LocalFile) => void
-  }): JSX.Element => {
-    const sortable = createSortable(props.file.path)
-
-    return (
-      // @ts-ignore
-      <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
-        <Tooltip value={props.file.path} placement="bottom" class="h-full">
-          <div class="relative h-full">
-            <Tabs.Trigger
-              value={props.file.path}
-              class="group/tab pl-3 pr-1"
-              onClick={() => props.onTabClick(props.file)}
-            >
-              <TabVisual file={props.file} />
-              <IconButton
-                icon="close"
-                class="mt-0.5 opacity-0 text-text-muted/60 group-data-[selected]/tab:opacity-100
-                       group-data-[selected]/tab:text-text group-data-[selected]/tab:hover:bg-border-subtle
-                       hover:opacity-100 group-hover/tab:opacity-100"
-                variant="ghost"
-                onClick={() => props.onTabClose(props.file)}
-              />
-            </Tabs.Trigger>
-          </div>
-        </Tooltip>
-      </div>
-    )
-  }
-
-  const ConstrainDragYAxis = (): JSX.Element => {
-    const context = useDragDropContext()
-    if (!context) return <></>
-    const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
-    const transformer: Transformer = {
-      id: "constrain-y-axis",
-      order: 100,
-      callback: (transform) => ({ ...transform, y: 0 }),
-    }
-    onDragStart((event) => {
-      const id = getDraggableId(event)
-      if (!id) return
-      addTransformer("draggables", id, transformer)
-    })
-    onDragEnd((event) => {
-      const id = getDraggableId(event)
-      if (!id) return
-      removeTransformer("draggables", id, transformer.id)
-    })
-    return <></>
-  }
-
-  const getDraggableId = (event: unknown): string | undefined => {
-    if (typeof event !== "object" || event === null) return undefined
-    if (!("draggable" in event)) return undefined
-    const draggable = (event as { draggable?: { id?: unknown } }).draggable
-    if (!draggable) return undefined
-    return typeof draggable.id === "string" ? draggable.id : undefined
-  }
-
-  return (
-    <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="w-70 shrink-0 bg-background-weak border-r border-border-weak-base flex flex-col items-start">
-          <div class="h-10 flex items-center self-stretch px-5 border-b border-border-weak-base">
-            <span class="text-14-regular overflow-hidden text-ellipsis">{getFilename(sync.data.path.directory)}</span>
-          </div>
-          <div class="flex flex-col items-start gap-4 self-stretch flex-1 py-4 px-3">
-            <Button class="w-full" size="large" onClick={handleNewSession} icon="edit-small-2">
-              New Session
-            </Button>
-            <List
-              data={sync.data.session}
-              key={(x) => x.id}
-              current={local.session.active()}
-              onSelect={(s) => local.session.setActive(s?.id)}
-              onHover={(s) => (!!s ? sync.session.sync(s?.id) : undefined)}
-            >
-              {(session) => {
-                const diffs = createMemo(() => session.summary?.diffs ?? [])
-                const filesChanged = createMemo(() => diffs().length)
-                const updated = DateTime.fromMillis(session.time.updated)
-                return (
-                  <Tooltip placement="right" value={session.title}>
-                    <div>
-                      <div class="flex items-center self-stretch gap-6 justify-between">
-                        <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">
-                          {Math.abs(updated.diffNow().as("seconds")) < 60
-                            ? "Now"
-                            : updated
-                                .toRelative({ style: "short", unit: ["days", "hours", "minutes"] })
-                                ?.replace(" ago", "")
-                                ?.replace(/ days?/, "d")
-                                ?.replace(" min.", "m")
-                                ?.replace(" hr.", "h")}
-                        </span>
-                      </div>
-                      <div class="flex justify-between items-center self-stretch">
-                        <span class="text-12-regular text-text-weak">{`${filesChanged() || "No"} file${filesChanged() !== 1 ? "s" : ""} changed`}</span>
-                        <DiffChanges diff={diffs()} />
-                      </div>
-                    </div>
-                  </Tooltip>
-                )
-              }}
-            </List>
-          </div>
-        </div>
-        <div class="relative bg-background-base w-full h-full overflow-x-hidden">
-          <DragDropProvider
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            onDragOver={handleDragOver}
-            collisionDetector={closestCenter}
-          >
-            <DragDropSensors />
-            <ConstrainDragYAxis />
-            <Tabs value={local.session.tabs()?.active ?? "chat"} onChange={handleTabChange}>
-              <div class="sticky top-0 shrink-0 flex">
-                <Tabs.List>
-                  <Tabs.Trigger value="chat" class="flex gap-x-4 items-center">
-                    <div>Chat</div>
-                    {/* <Tooltip value={`${local.session.tokens() ?? 0} Tokens`} class="flex items-center gap-1.5"> */}
-                    {/*   <ProgressCircle percentage={local.session.context() ?? 0} /> */}
-                    {/*   <div class="text-14-regular text-text-weak text-right">{local.session.context() ?? 0}%</div> */}
-                    {/* </Tooltip> */}
-                  </Tabs.Trigger>
-                  {/* <Tabs.Trigger value="review">Review</Tabs.Trigger> */}
-                  <SortableProvider ids={local.session.tabs()?.opened ?? []}>
-                    <For each={local.session.tabs()?.opened ?? []}>
-                      {(file) => (
-                        <SortableTab
-                          file={local.file.node(file)}
-                          onTabClick={handleFileClick}
-                          onTabClose={handleTabClose}
-                        />
-                      )}
-                    </For>
-                  </SortableProvider>
-                  <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
-                    <IconButton
-                      icon="plus-small"
-                      variant="ghost"
-                      iconSize="large"
-                      onClick={() => setStore("fileSelectOpen", true)}
-                    />
-                  </div>
-                </Tabs.List>
-              </div>
-              <Tabs.Content value="chat" class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
-                <div class="relative px-6 pt-12 max-w-2xl w-full mx-auto flex flex-col flex-1 min-h-0">
-                  <Show
-                    when={local.session.active()}
-                    fallback={
-                      <div class="flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
-                        <div class="text-20-medium text-text-weaker">New session</div>
-                        <div class="flex justify-center items-center gap-3">
-                          <Icon name="folder" size="small" />
-                          <div class="text-12-medium text-text-weak">
-                            {getDirectory(sync.data.path.directory)}
-                            <span class="text-text-strong">{getFilename(sync.data.path.directory)}</span>
-                          </div>
-                        </div>
-                        <div class="flex justify-center items-center gap-3">
-                          <Icon name="pencil-line" size="small" />
-                          <div class="text-12-medium text-text-weak">
-                            Last modified&nbsp;
-                            <span class="text-text-strong">
-                              {DateTime.fromMillis(sync.data.project.time.created).toRelative()}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    }
-                  >
-                    {(session) => {
-                      const [store, setStore] = createStore<{
-                        messageId?: string
-                      }>()
-
-                      const messages = createMemo(() => sync.data.message[session().id] ?? [])
-                      const userMessages = createMemo(() =>
-                        messages()
-                          .filter((m) => m.role === "user")
-                          .sort((a, b) => b.id.localeCompare(a.id)),
-                      )
-                      const lastUserMessage = createMemo(() => {
-                        return userMessages()?.at(0)
-                      })
-                      const activeMessage = createMemo(() => {
-                        if (!store.messageId) return lastUserMessage()
-                        return userMessages()?.find((m) => m.id === store.messageId)
-                      })
-
-                      return (
-                        <div class="pt-3 flex flex-col flex-1 min-h-0">
-                          <div class="flex-1 min-h-0">
-                            <Show when={userMessages().length > 1}>
-                              <ul
-                                role="list"
-                                class="absolute right-full mr-8 hidden w-60 shrink-0 @7xl:flex flex-col items-start gap-1"
-                              >
-                                <For each={userMessages()}>
-                                  {(message) => {
-                                    const diffs = createMemo(() => message.summary?.diffs ?? [])
-                                    const assistantMessages = createMemo(() => {
-                                      return sync.data.message[session().id]?.filter(
-                                        (m) => m.role === "assistant" && m.parentID == message.id,
-                                      ) as AssistantMessageType[]
-                                    })
-                                    const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
-                                    const working = createMemo(() => !message.summary?.body && !error())
-
-                                    return (
-                                      <li class="group/li flex items-center self-stretch">
-                                        <button
-                                          class="flex items-center self-stretch w-full gap-x-2 py-1 cursor-default"
-                                          onClick={() => setStore("messageId", message.id)}
-                                        >
-                                          <Switch>
-                                            <Match when={working()}>
-                                              <Spinner class="text-text-base shrink-0 w-[18px] aspect-square" />
-                                            </Match>
-                                            <Match when={true}>
-                                              <DiffChanges diff={diffs()} variant="bars" />
-                                            </Match>
-                                          </Switch>
-                                          <div
-                                            data-active={activeMessage()?.id === message.id}
-                                            classList={{
-                                              "text-14-regular text-text-weak whitespace-nowrap truncate min-w-0": true,
-                                              "text-text-weak data-[active=true]:text-text-strong group-hover/li:text-text-base": true,
-                                            }}
-                                          >
-                                            <Show when={message.summary?.title} fallback="New message">
-                                              {message.summary?.title}
-                                            </Show>
-                                          </div>
-                                        </button>
-                                      </li>
-                                    )
-                                  }}
-                                </For>
-                              </ul>
-                            </Show>
-                            <div ref={messageScrollElement} class="grow min-w-0 h-full overflow-y-auto no-scrollbar">
-                              <For each={userMessages()}>
-                                {(message) => {
-                                  const isActive = createMemo(() => activeMessage()?.id === message.id)
-                                  const [titled, setTitled] = createSignal(!!message.summary?.title)
-                                  const assistantMessages = createMemo(() => {
-                                    return sync.data.message[session().id]?.filter(
-                                      (m) => m.role === "assistant" && m.parentID == message.id,
-                                    ) as AssistantMessageType[]
-                                  })
-                                  const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
-                                  const [completed, setCompleted] = createSignal(!!message.summary?.body || !!error())
-                                  const [expanded, setExpanded] = createSignal(false)
-                                  const parts = createMemo(() => sync.data.part[message.id])
-                                  const title = createMemo(() => message.summary?.title)
-                                  const summary = createMemo(() => message.summary?.body)
-                                  const diffs = createMemo(() => message.summary?.diffs ?? [])
-                                  const hasToolPart = createMemo(() =>
-                                    assistantMessages()
-                                      ?.flatMap((m) => sync.data.part[m.id])
-                                      .some((p) => p?.type === "tool"),
-                                  )
-                                  const working = createMemo(() => !summary() && !error())
-
-                                  // allowing time for the animations to finish
-                                  createEffect(() => {
-                                    title()
-                                    setTimeout(() => setTitled(!!title()), 10_000)
-                                  })
-                                  createEffect(() => {
-                                    const complete = !!summary() || !!error()
-                                    setTimeout(() => setCompleted(complete), 1200)
-                                  })
-
-                                  return (
-                                    <Show when={isActive()}>
-                                      <div
-                                        data-message={message.id}
-                                        class="flex flex-col items-start self-stretch gap-8 pb-50"
-                                      >
-                                        {/* Title */}
-                                        <div class="py-2 flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10">
-                                          <div class="w-full text-14-medium text-text-strong">
-                                            <Show
-                                              when={titled()}
-                                              fallback={
-                                                <Typewriter
-                                                  as="h1"
-                                                  text={title()}
-                                                  class="overflow-hidden text-ellipsis min-w-0 text-nowrap"
-                                                />
-                                              }
-                                            >
-                                              <h1 class="overflow-hidden text-ellipsis min-w-0 text-nowrap">
-                                                {title()}
-                                              </h1>
-                                            </Show>
-                                          </div>
-                                        </div>
-                                        <div class="-mt-8">
-                                          <Message message={message} parts={parts()} />
-                                        </div>
-                                        {/* Summary */}
-                                        <Show when={completed()}>
-                                          <div class="w-full flex flex-col gap-6 items-start self-stretch">
-                                            <div class="flex flex-col items-start gap-1 self-stretch">
-                                              <h2 class="text-12-medium text-text-weak">
-                                                <Switch>
-                                                  <Match when={diffs().length}>Summary</Match>
-                                                  <Match when={true}>Response</Match>
-                                                </Switch>
-                                              </h2>
-                                              <Show when={summary()}>
-                                                {(summary) => (
-                                                  <Markdown
-                                                    classList={{ "[&>*]:fade-up-text": !diffs().length }}
-                                                    text={summary()}
-                                                  />
-                                                )}
-                                              </Show>
-                                            </div>
-                                            <Accordion class="w-full" multiple>
-                                              <For each={diffs()}>
-                                                {(diff) => (
-                                                  <Accordion.Item value={diff.file}>
-                                                    <Accordion.Header>
-                                                      <Accordion.Trigger onClick={handleDiffTriggerClick}>
-                                                        <div class="flex items-center justify-between w-full gap-5">
-                                                          <div class="grow flex items-center gap-5 min-w-0">
-                                                            <FileIcon
-                                                              node={{ path: diff.file, type: "file" }}
-                                                              class="shrink-0 size-4"
-                                                            />
-                                                            <div class="flex grow min-w-0">
-                                                              <Show when={diff.file.includes("/")}>
-                                                                <span class="text-text-base truncate-start">
-                                                                  {getDirectory(diff.file)}&lrm;
-                                                                </span>
-                                                              </Show>
-                                                              <span class="text-text-strong shrink-0">
-                                                                {getFilename(diff.file)}
-                                                              </span>
-                                                            </div>
-                                                          </div>
-                                                          <div class="shrink-0 flex gap-4 items-center justify-end">
-                                                            <DiffChanges diff={diff} />
-                                                            <Icon name="chevron-grabber-vertical" size="small" />
-                                                          </div>
-                                                        </div>
-                                                      </Accordion.Trigger>
-                                                    </Accordion.Header>
-                                                    <Accordion.Content>
-                                                      <Diff
-                                                        before={{
-                                                          name: diff.file!,
-                                                          contents: diff.before!,
-                                                        }}
-                                                        after={{
-                                                          name: diff.file!,
-                                                          contents: diff.after!,
-                                                        }}
-                                                      />
-                                                    </Accordion.Content>
-                                                  </Accordion.Item>
-                                                )}
-                                              </For>
-                                            </Accordion>
-                                          </div>
-                                        </Show>
-                                        <Show when={error() && !expanded()}>
-                                          <Card variant="error" class="text-text-on-critical-base">
-                                            {error()?.data?.message as string}
-                                          </Card>
-                                        </Show>
-                                        {/* Response */}
-                                        <div class="w-full">
-                                          <Switch>
-                                            <Match when={!completed()}>
-                                              <MessageProgress
-                                                assistantMessages={assistantMessages}
-                                                done={!working()}
-                                              />
-                                            </Match>
-                                            <Match when={completed() && hasToolPart()}>
-                                              <Collapsible variant="ghost" open={expanded()} onOpenChange={setExpanded}>
-                                                <Collapsible.Trigger class="text-text-weak hover:text-text-strong">
-                                                  <div class="flex items-center gap-1 self-stretch">
-                                                    <div class="text-12-medium">
-                                                      <Switch>
-                                                        <Match when={expanded()}>Hide details</Match>
-                                                        <Match when={!expanded()}>Show details</Match>
-                                                      </Switch>
-                                                    </div>
-                                                    <Collapsible.Arrow />
-                                                  </div>
-                                                </Collapsible.Trigger>
-                                                <Collapsible.Content>
-                                                  <div class="w-full flex flex-col items-start self-stretch gap-3">
-                                                    <For each={assistantMessages()}>
-                                                      {(assistantMessage) => {
-                                                        const parts = createMemo(
-                                                          () => sync.data.part[assistantMessage.id],
-                                                        )
-                                                        return <Message message={assistantMessage} parts={parts()} />
-                                                      }}
-                                                    </For>
-                                                    <Show when={error()}>
-                                                      <Card variant="error" class="text-text-on-critical-base">
-                                                        {error()?.data?.message as string}
-                                                      </Card>
-                                                    </Show>
-                                                  </div>
-                                                </Collapsible.Content>
-                                              </Collapsible>
-                                            </Match>
-                                          </Switch>
-                                        </div>
-                                      </div>
-                                    </Show>
-                                  )
-                                }}
-                              </For>
-                            </div>
-                          </div>
-                        </div>
-                      )
-                    }}
-                  </Show>
-                </div>
-              </Tabs.Content>
-              {/* <Tabs.Content value="review" class="select-text"></Tabs.Content> */}
-              <For each={local.session.tabs()?.opened}>
-                {(file) => (
-                  <Tabs.Content value={file} class="select-text">
-                    {(() => {
-                      {
-                        /* const view = local.file.view(file) */
-                      }
-                      {
-                        /* const showRaw = view === "raw" || !file.content?.diff */
-                      }
-                      {
-                        /* const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "") */
-                      }
-                      const node = local.file.node(file)
-                      return (
-                        <Code
-                          file={{ name: node.path, contents: node.content?.content ?? "" }}
-                          disableFileHeader
-                          overflow="scroll"
-                          class="pt-3 pb-40"
-                        />
-                      )
-                    })()}
-                  </Tabs.Content>
-                )}
-              </For>
-            </Tabs>
-            <DragOverlay>
-              {(() => {
-                const id = activeItem()
-                if (!id) return null
-                const draggedFile = local.file.node(id)
-                if (!draggedFile) return null
-                return (
-                  <div class="relative px-3 h-10 flex items-center bg-background-base border-x border-border-weak-base border-b border-b-transparent">
-                    <TabVisual file={draggedFile} />
-                  </div>
-                )
-              })()}
-            </DragOverlay>
-          </DragDropProvider>
-          <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
-            <PromptInput
-              ref={(el) => {
-                inputRef = el
-              }}
-              onSubmit={handlePromptSubmit}
-            />
-          </div>
-          <div class="hidden shrink-0 w-56 p-2 h-full overflow-y-auto">
-            <FileTree path="" onFileClick={handleFileClick} />
-          </div>
-          <div class="hidden shrink-0 w-56 p-2">
-            <Show
-              when={local.file.changes().length}
-              fallback={<div class="px-2 text-xs text-text-muted">No changes</div>}
-            >
-              <ul class="">
-                <For each={local.file.changes()}>
-                  {(path) => (
-                    <li>
-                      <button
-                        onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })}
-                        class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 hover:bg-background-element"
-                      >
-                        <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" />
-                        <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span>
-                        <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0">
-                          {getDirectory(path)}
-                        </span>
-                      </button>
-                    </li>
-                  )}
-                </For>
-              </ul>
-            </Show>
-          </div>
-        </div>
-      </main>
-      <Show when={store.fileSelectOpen}>
-        <SelectDialog
-          defaultOpen
-          title="Select file"
-          placeholder="Search files"
-          emptyMessage="No files found"
-          items={local.file.searchFiles}
-          key={(x) => x}
-          onOpenChange={(open) => setStore("fileSelectOpen", open)}
-          onSelect={(x) => (x ? local.session.open(x) : undefined)}
-        >
-          {(i) => (
-            <div
-              classList={{
-                "w-full flex items-center justify-between rounded-md": true,
-              }}
-            >
-              <div class="flex items-center gap-x-2 grow min-w-0">
-                <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
-                <div class="flex items-center text-14-regular">
-                  <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
-                    {getDirectory(i)}
-                  </span>
-                  <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
-                </div>
-              </div>
-              <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0"></div>
-            </div>
-          )}
-        </SelectDialog>
-      </Show>
-    </div>
-  )
-}

packages/desktop/src/pages/layout.tsx

@@ -0,0 +1,121 @@
+import { Button, Tooltip, DiffChanges, IconButton } from "@opencode-ai/ui"
+import { createMemo, For, ParentProps, Show } from "solid-js"
+import { DateTime } from "luxon"
+import { useSync } from "@/context/sync"
+import { A, useParams } from "@solidjs/router"
+import { useLocal } from "@/context/local"
+
+export default function Layout(props: ParentProps) {
+  const params = useParams()
+  const sync = useSync()
+  const local = useLocal()
+
+  return (
+    <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>
+      <div class="h-[calc(100vh-0rem)] flex">
+        <div
+          classList={{
+            "@container w-14 pb-4 shrink-0 bg-background-weak": true,
+            "flex flex-col items-start self-stretch justify-between": true,
+            "border-r border-border-weak-base": true,
+            "w-70": local.layout.sidebar.opened(),
+          }}
+        >
+          <div class="flex flex-col justify-center items-start gap-4 self-stretch py-2 overflow-hidden mx-auto @[4rem]:mx-0">
+            <div class="h-8 shrink-0 flex items-center self-stretch px-3">
+              <Tooltip placement="right" value="Collapse sidebar">
+                <IconButton icon="layout-left" variant="ghost" size="large" onClick={local.layout.sidebar.toggle} />
+              </Tooltip>
+            </div>
+            <div class="w-full px-3">
+              <Button as={A} href="/session" class="hidden @[4rem]:flex w-full" size="large" icon="edit-small-2">
+                New Session
+              </Button>
+              <Tooltip placement="right" value="New session">
+                <IconButton as={A} href="/session" icon="edit-small-2" size="large" class="@[4rem]:hidden" />
+              </Tooltip>
+            </div>
+            <div class="hidden @[4rem]:flex size-full overflow-y-auto no-scrollbar flex-col flex-1 px-3">
+              <nav class="w-full">
+                <For each={sync.data.session}>
+                  {(session) => {
+                    const updated = createMemo(() => DateTime.fromMillis(session.time.updated))
+                    return (
+                      <A
+                        data-active={session.id === params.id}
+                        href={`/session/${session.id}`}
+                        class="group/session focus:outline-none cursor-default"
+                      >
+                        <Tooltip placement="right" value={session.title}>
+                          <div
+                            class="w-full mb-1.5 px-3 py-1 rounded-md 
+                               group-data-[active=true]/session:bg-surface-raised-base-hover
+                               group-hover/session:bg-surface-raised-base-hover
+                               group-focus/session:bg-surface-raised-base-hover"
+                          >
+                            <div class="flex items-center self-stretch gap-6 justify-between">
+                              <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">
+                                {Math.abs(updated().diffNow().as("seconds")) < 60
+                                  ? "Now"
+                                  : updated()
+                                      .toRelative({ style: "short", unit: ["days", "hours", "minutes"] })
+                                      ?.replace(" ago", "")
+                                      ?.replace(/ days?/, "d")
+                                      ?.replace(" min.", "m")
+                                      ?.replace(" hr.", "h")}
+                              </span>
+                            </div>
+                            <div class="flex justify-between items-center self-stretch">
+                              <span class="text-12-regular text-text-weak">{`${session.summary?.files || "No"} file${session.summary?.files !== 1 ? "s" : ""} changed`}</span>
+                              <Show when={session.summary}>{(summary) => <DiffChanges changes={summary()} />}</Show>
+                            </div>
+                          </div>
+                        </Tooltip>
+                      </A>
+                    )
+                  }}
+                </For>
+              </nav>
+              <Show when={sync.session.more()}>
+                <button
+                  class="shrink-0 self-start p-3 text-12-medium text-text-weak hover:text-text-strong"
+                  onClick={() => sync.session.fetch()}
+                >
+                  Show more
+                </button>
+              </Show>
+            </div>
+          </div>
+          <div class="flex flex-col items-start shrink-0 px-3 py-1 mx-auto @[4rem]:mx-0">
+            <Button
+              as={"a"}
+              href="https://opencode.ai/desktop-feedback"
+              target="_blank"
+              class="hidden @[4rem]:flex w-full text-12-medium text-text-base stroke-[1.5px]"
+              variant="ghost"
+              icon="speech-bubble"
+            >
+              Share feedback
+            </Button>
+            <Tooltip placement="right" value="Share feedback">
+              <IconButton
+                as={"a"}
+                href="https://opencode.ai/desktop-feedback"
+                target="_blank"
+                icon="speech-bubble"
+                variant="ghost"
+                size="large"
+                class="@[4rem]:hidden stroke-[1.5px]"
+              />
+            </Tooltip>
+          </div>
+        </div>
+        <main class="size-full overflow-x-hidden">{props.children}</main>
+      </div>
+    </div>
+  )
+}

packages/desktop/src/pages/session-layout.tsx

@@ -0,0 +1,12 @@
+import { Show, type ParentProps } from "solid-js"
+import { SessionProvider } from "@/context/session"
+import { useParams } from "@solidjs/router"
+
+export default function Layout(props: ParentProps) {
+  const params = useParams()
+  return (
+    <Show when={params.id || true} keyed>
+      <SessionProvider sessionId={params.id}>{props.children}</SessionProvider>
+    </Show>
+  )
+}

packages/desktop/src/pages/session.tsx

@@ -0,0 +1,899 @@
+import {
+  SelectDialog,
+  IconButton,
+  Tabs,
+  Icon,
+  Accordion,
+  Diff,
+  Collapsible,
+  DiffChanges,
+  Message,
+  Typewriter,
+  Card,
+  Code,
+  Tooltip,
+  ProgressCircle,
+  Button,
+} from "@opencode-ai/ui"
+import { FileIcon } from "@/ui"
+import { MessageProgress } from "@/components/message-progress"
+import {
+  For,
+  onCleanup,
+  onMount,
+  Show,
+  Match,
+  Switch,
+  createSignal,
+  createEffect,
+  createMemo,
+  createResource,
+} from "solid-js"
+import { useLocal, type LocalFile } from "@/context/local"
+import { createStore } from "solid-js/store"
+import { getDirectory, getFilename } from "@/utils"
+import { PromptInput } from "@/components/prompt-input"
+import { DateTime } from "luxon"
+import {
+  DragDropProvider,
+  DragDropSensors,
+  DragOverlay,
+  SortableProvider,
+  closestCenter,
+  createSortable,
+  useDragDropContext,
+} from "@thisbeyond/solid-dnd"
+import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
+import type { JSX } from "solid-js"
+import { useSync } from "@/context/sync"
+import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
+import { Markdown } from "@opencode-ai/ui"
+import { Spinner } from "@/components/spinner"
+import { useSession } from "@/context/session"
+
+export default function Page() {
+  const local = useLocal()
+  const sync = useSync()
+  const session = useSession()
+  const [store, setStore] = createStore({
+    clickTimer: undefined as number | undefined,
+    fileSelectOpen: false,
+    activeDraggable: undefined as string | undefined,
+  })
+  let inputRef!: HTMLDivElement
+  let messageScrollElement!: HTMLDivElement
+
+  const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKeyDown)
+  })
+
+  onCleanup(() => {
+    document.removeEventListener("keydown", handleKeyDown)
+  })
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.getModifierState(MOD) && event.shiftKey && event.key.toLowerCase() === "p") {
+      event.preventDefault()
+      return
+    }
+    if (event.getModifierState(MOD) && event.key.toLowerCase() === "p") {
+      event.preventDefault()
+      setStore("fileSelectOpen", true)
+      return
+    }
+
+    const focused = document.activeElement === inputRef
+    if (focused) {
+      if (event.key === "Escape") {
+        inputRef?.blur()
+      }
+      return
+    }
+
+    // if (local.file.active()) {
+    //   const active = local.file.active()!
+    //   if (event.key === "Enter" && active.selection) {
+    //     local.context.add({
+    //       type: "file",
+    //       path: active.path,
+    //       selection: { ...active.selection },
+    //     })
+    //     return
+    //   }
+    //
+    //   if (event.getModifierState(MOD)) {
+    //     if (event.key.toLowerCase() === "a") {
+    //       return
+    //     }
+    //     if (event.key.toLowerCase() === "c") {
+    //       return
+    //     }
+    //   }
+    // }
+
+    if (event.key.length === 1 && event.key !== "Unidentified" && !(event.ctrlKey || event.metaKey)) {
+      inputRef?.focus()
+    }
+  }
+
+  const resetClickTimer = () => {
+    if (!store.clickTimer) return
+    clearTimeout(store.clickTimer)
+    setStore("clickTimer", undefined)
+  }
+
+  const startClickTimer = () => {
+    const newClickTimer = setTimeout(() => {
+      setStore("clickTimer", undefined)
+    }, 300)
+    setStore("clickTimer", newClickTimer as unknown as number)
+  }
+
+  const handleTabClick = async (tab: string) => {
+    if (store.clickTimer) {
+      resetClickTimer()
+      // local.file.update(file.path, { ...file, pinned: true })
+    } else {
+      if (tab.startsWith("file://")) {
+        local.file.open(tab.replace("file://", ""))
+      }
+      startClickTimer()
+    }
+  }
+
+  const handleDragStart = (event: unknown) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    setStore("activeDraggable", id)
+  }
+
+  const handleDragOver = (event: DragEvent) => {
+    const { draggable, droppable } = event
+    if (draggable && droppable) {
+      const currentTabs = session.layout.tabs.opened
+      const fromIndex = currentTabs?.indexOf(draggable.id.toString())
+      const toIndex = currentTabs?.indexOf(droppable.id.toString())
+      if (fromIndex !== toIndex && toIndex !== undefined) {
+        session.layout.moveTab(draggable.id.toString(), toIndex)
+      }
+    }
+  }
+
+  const handleDragEnd = () => {
+    setStore("activeDraggable", undefined)
+  }
+
+  const FileVisual = (props: { file: LocalFile }): JSX.Element => {
+    return (
+      <div class="flex items-center gap-x-1.5">
+        <FileIcon node={props.file} class="grayscale-100 group-data-[selected]/tab:grayscale-0" />
+        <span
+          classList={{
+            "text-14-medium": true,
+            "text-primary": !!props.file.status?.status,
+            italic: !props.file.pinned,
+          }}
+        >
+          {props.file.name}
+        </span>
+        <span class="hidden opacity-70">
+          <Switch>
+            <Match when={props.file.status?.status === "modified"}>
+              <span class="text-primary">M</span>
+            </Match>
+            <Match when={props.file.status?.status === "added"}>
+              <span class="text-success">A</span>
+            </Match>
+            <Match when={props.file.status?.status === "deleted"}>
+              <span class="text-error">D</span>
+            </Match>
+          </Switch>
+        </span>
+      </div>
+    )
+  }
+
+  const SortableTab = (props: {
+    tab: string
+    onTabClick: (tab: string) => void
+    onTabClose: (tab: string) => void
+  }): JSX.Element => {
+    const sortable = createSortable(props.tab)
+
+    const [file] = createResource(
+      () => props.tab,
+      async (tab) => {
+        if (tab.startsWith("file://")) {
+          return local.file.node(tab.replace("file://", ""))
+        }
+        return undefined
+      },
+    )
+
+    return (
+      // @ts-ignore
+      <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
+        <div class="relative h-full">
+          <Tabs.Trigger value={props.tab} class="group/tab pl-3 pr-1" onClick={() => props.onTabClick(props.tab)}>
+            <Switch>
+              <Match when={file()}>{(f) => <FileVisual file={f()} />}</Match>
+            </Switch>
+            <IconButton
+              icon="close"
+              class="mt-0.5 opacity-0 group-data-[selected]/tab:opacity-100
+                     hover:bg-transparent
+                     hover:opacity-100 group-hover/tab:opacity-100"
+              variant="ghost"
+              onClick={() => props.onTabClose(props.tab)}
+            />
+          </Tabs.Trigger>
+        </div>
+      </div>
+    )
+  }
+
+  const ConstrainDragYAxis = (): JSX.Element => {
+    const context = useDragDropContext()
+    if (!context) return <></>
+    const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
+    const transformer: Transformer = {
+      id: "constrain-y-axis",
+      order: 100,
+      callback: (transform) => ({ ...transform, y: 0 }),
+    }
+    onDragStart((event) => {
+      const id = getDraggableId(event)
+      if (!id) return
+      addTransformer("draggables", id, transformer)
+    })
+    onDragEnd((event) => {
+      const id = getDraggableId(event)
+      if (!id) return
+      removeTransformer("draggables", id, transformer.id)
+    })
+    return <></>
+  }
+
+  const getDraggableId = (event: unknown): string | undefined => {
+    if (typeof event !== "object" || event === null) return undefined
+    if (!("draggable" in event)) return undefined
+    const draggable = (event as { draggable?: { id?: unknown } }).draggable
+    if (!draggable) return undefined
+    return typeof draggable.id === "string" ? draggable.id : undefined
+  }
+
+  return (
+    <div class="relative bg-background-base size-full overflow-x-hidden">
+      <DragDropProvider
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragOver={handleDragOver}
+        collisionDetector={closestCenter}
+      >
+        <DragDropSensors />
+        <ConstrainDragYAxis />
+        <Tabs value={session.layout.tabs.active ?? "chat"} onChange={session.layout.openTab}>
+          <div class="sticky top-0 shrink-0 flex">
+            <Tabs.List>
+              <Tabs.Trigger value="chat" class="flex gap-x-4 items-center">
+                <div>Chat</div>
+                <Tooltip
+                  value={`${new Intl.NumberFormat("en-US", {
+                    notation: "compact",
+                    compactDisplay: "short",
+                  }).format(session.usage.tokens() ?? 0)} Tokens`}
+                  class="flex items-center gap-1.5"
+                >
+                  <ProgressCircle percentage={session.usage.context() ?? 0} />
+                  <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
+                </Tooltip>
+              </Tabs.Trigger>
+              <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
+                <Tabs.Trigger value="review" class="flex gap-3 items-center group/tab pr-1">
+                  <Show when={session.diffs()}>
+                    <DiffChanges changes={session.diffs()} variant="bars" />
+                  </Show>
+                  <div class="flex items-center gap-1.5">
+                    <div>Review</div>
+                    <Show when={session.info()?.summary?.files}>
+                      <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
+                        {session.info()?.summary?.files ?? 0}
+                      </div>
+                    </Show>
+                    <IconButton
+                      icon="close"
+                      class="mt-0.5 -ml-1 opacity-0 group-data-[selected]/tab:opacity-100
+                             hover:bg-transparent hover:opacity-100 group-hover/tab:opacity-100"
+                      variant="ghost"
+                      onClick={local.layout.review.close}
+                    />
+                  </div>
+                </Tabs.Trigger>
+              </Show>
+              <SortableProvider ids={session.layout.tabs.opened ?? []}>
+                <For each={session.layout.tabs.opened ?? []}>
+                  {(tab) => <SortableTab tab={tab} onTabClick={handleTabClick} onTabClose={session.layout.closeTab} />}
+                </For>
+              </SortableProvider>
+              <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
+                <Tooltip value="Open file" class="flex items-center">
+                  <IconButton
+                    icon="plus-small"
+                    variant="ghost"
+                    iconSize="large"
+                    onClick={() => setStore("fileSelectOpen", true)}
+                  />
+                </Tooltip>
+              </div>
+            </Tabs.List>
+          </div>
+          <Tabs.Content value="chat" class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
+            <div
+              classList={{
+                "w-full grid flex-1 min-h-0": true,
+                "grid-cols-2": local.layout.review.state() === "open",
+              }}
+            >
+              <div class="relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 max-w-2xl mx-auto">
+                <Switch>
+                  <Match when={session.id}>
+                    <div class="h-8 flex shrink-0 self-stretch items-center justify-end">
+                      <Show when={local.layout.review.state() === "closed" && session.diffs().length}>
+                        <Button icon="layout-right" onClick={local.layout.review.open}>
+                          Review
+                        </Button>
+                      </Show>
+                    </div>
+                    <div
+                      classList={{
+                        "flex-1 min-h-0 pb-20": true,
+                        "flex items-start justify-start": local.layout.review.state() === "open",
+                      }}
+                    >
+                      <Show when={session.messages.user().length > 1}>
+                        <ul
+                          role="list"
+                          classList={{
+                            "mr-8 shrink-0 flex flex-col items-start": true,
+                            "absolute right-full w-60 @7xl:gap-2": true, // local.layout.review.state() !== "open",
+                            "": local.layout.review.state() === "open",
+                          }}
+                        >
+                          <For each={session.messages.user()}>
+                            {(message) => {
+                              const assistantMessages = createMemo(() => {
+                                if (!session.id) return []
+                                return sync.data.message[session.id]?.filter(
+                                  (m) => m.role === "assistant" && m.parentID == message.id,
+                                ) as AssistantMessageType[]
+                              })
+                              const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
+                              const working = createMemo(() => !message.summary?.body && !error())
+
+                              const handleClick = () => session.messages.setActive(message.id)
+
+                              return (
+                                <li
+                                  classList={{
+                                    "group/li flex items-center self-stretch justify-end": true,
+                                    "@7xl:justify-start": local.layout.review.state() !== "open",
+                                  }}
+                                >
+                                  <Tooltip
+                                    placement="right"
+                                    gutter={8}
+                                    value={
+                                      <div class="flex items-center gap-2">
+                                        <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                                        {message.summary?.title}
+                                      </div>
+                                    }
+                                  >
+                                    <button
+                                      data-active={session.messages.active()?.id === message.id}
+                                      onClick={handleClick}
+                                      classList={{
+                                        "group/tick flex items-center justify-start h-2 w-8 -mr-3": true,
+                                        "data-[active=true]:[&>div]:bg-icon-strong-base data-[active=true]:[&>div]:w-full": true,
+                                        "@7xl:hidden": local.layout.review.state() !== "open",
+                                      }}
+                                    >
+                                      <div class="h-px w-5 bg-icon-base group-hover/tick:w-full group-hover/tick:bg-icon-strong-base" />
+                                    </button>
+                                  </Tooltip>
+                                  <button
+                                    classList={{
+                                      "hidden items-center self-stretch w-full gap-x-2 cursor-default": true,
+                                      "@7xl:flex": local.layout.review.state() !== "open",
+                                    }}
+                                    onClick={handleClick}
+                                  >
+                                    <Switch>
+                                      <Match when={working()}>
+                                        <Spinner class="text-text-base shrink-0 w-[18px] aspect-square" />
+                                      </Match>
+                                      <Match when={true}>
+                                        <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                                      </Match>
+                                    </Switch>
+                                    <div
+                                      data-active={session.messages.active()?.id === message.id}
+                                      classList={{
+                                        "text-14-regular text-text-weak whitespace-nowrap truncate min-w-0": true,
+                                        "text-text-weak data-[active=true]:text-text-strong group-hover/li:text-text-base": true,
+                                      }}
+                                    >
+                                      <Show when={message.summary?.title} fallback="New message">
+                                        {message.summary?.title}
+                                      </Show>
+                                    </div>
+                                  </button>
+                                </li>
+                              )
+                            }}
+                          </For>
+                        </ul>
+                      </Show>
+                      <div ref={messageScrollElement} class="grow w-full min-w-0 h-full overflow-y-auto no-scrollbar">
+                        <For each={session.messages.user()}>
+                          {(message) => {
+                            const isActive = createMemo(() => session.messages.active()?.id === message.id)
+                            const [titled, setTitled] = createSignal(!!message.summary?.title)
+                            const assistantMessages = createMemo(() => {
+                              if (!session.id) return []
+                              return sync.data.message[session.id]?.filter(
+                                (m) => m.role === "assistant" && m.parentID == message.id,
+                              ) as AssistantMessageType[]
+                            })
+                            const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
+                            const [completed, setCompleted] = createSignal(!!message.summary?.body || !!error())
+                            const [detailsExpanded, setDetailsExpanded] = createSignal(false)
+                            const parts = createMemo(() => sync.data.part[message.id])
+                            const hasToolPart = createMemo(() =>
+                              assistantMessages()
+                                ?.flatMap((m) => sync.data.part[m.id])
+                                .some((p) => p?.type === "tool"),
+                            )
+                            const working = createMemo(() => !message.summary?.body && !error())
+
+                            // allowing time for the animations to finish
+                            createEffect(() => {
+                              const title = message.summary?.title
+                              setTimeout(() => setTitled(!!title), 10_000)
+                            })
+                            createEffect(() => {
+                              const summary = message.summary?.body
+                              const complete = !!summary || !!error()
+                              setTimeout(() => setCompleted(complete), 1200)
+                            })
+
+                            return (
+                              <Show when={isActive()}>
+                                <div
+                                  data-message={message.id}
+                                  class="flex flex-col items-start self-stretch gap-8 pb-20"
+                                >
+                                  {/* Title */}
+                                  <div class="flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10 pb-1">
+                                    <div class="w-full text-14-medium text-text-strong">
+                                      <Show
+                                        when={titled()}
+                                        fallback={
+                                          <Typewriter
+                                            as="h1"
+                                            text={message.summary?.title}
+                                            class="overflow-hidden text-ellipsis min-w-0 text-nowrap"
+                                          />
+                                        }
+                                      >
+                                        <h1 class="overflow-hidden text-ellipsis min-w-0 text-nowrap">
+                                          {message.summary?.title}
+                                        </h1>
+                                      </Show>
+                                    </div>
+                                  </div>
+                                  <div class="-mt-9">
+                                    <Message message={message} parts={parts()} />
+                                  </div>
+                                  {/* Summary */}
+                                  <Show when={completed()}>
+                                    <div class="w-full flex flex-col gap-6 items-start self-stretch">
+                                      <div class="flex flex-col items-start gap-1 self-stretch">
+                                        <h2 class="text-12-medium text-text-weak">
+                                          <Switch>
+                                            <Match when={message.summary?.diffs?.length}>Summary</Match>
+                                            <Match when={true}>Response</Match>
+                                          </Switch>
+                                        </h2>
+                                        <Show when={message.summary?.body}>
+                                          {(summary) => (
+                                            <Markdown
+                                              classList={{
+                                                "text-14-regular": !!message.summary?.diffs?.length,
+                                                "[&>*]:fade-up-text": !message.summary?.diffs?.length,
+                                              }}
+                                              text={summary()}
+                                            />
+                                          )}
+                                        </Show>
+                                      </div>
+                                      <Accordion class="w-full" multiple>
+                                        <For each={message.summary?.diffs ?? []}>
+                                          {(diff) => (
+                                            <Accordion.Item value={diff.file}>
+                                              <Accordion.Header>
+                                                <Accordion.Trigger>
+                                                  <div class="flex items-center justify-between w-full gap-5">
+                                                    <div class="grow flex items-center gap-5 min-w-0">
+                                                      <FileIcon
+                                                        node={{ path: diff.file, type: "file" }}
+                                                        class="shrink-0 size-4"
+                                                      />
+                                                      <div class="flex grow min-w-0">
+                                                        <Show when={diff.file.includes("/")}>
+                                                          <span class="text-text-base truncate-start">
+                                                            {getDirectory(diff.file)}&lrm;
+                                                          </span>
+                                                        </Show>
+                                                        <span class="text-text-strong shrink-0">
+                                                          {getFilename(diff.file)}
+                                                        </span>
+                                                      </div>
+                                                    </div>
+                                                    <div class="shrink-0 flex gap-4 items-center justify-end">
+                                                      <DiffChanges changes={diff} />
+                                                      <Icon name="chevron-grabber-vertical" size="small" />
+                                                    </div>
+                                                  </div>
+                                                </Accordion.Trigger>
+                                              </Accordion.Header>
+                                              <Accordion.Content class="max-h-[360px] overflow-y-auto no-scrollbar">
+                                                <Diff
+                                                  before={{
+                                                    name: diff.file!,
+                                                    contents: diff.before!,
+                                                  }}
+                                                  after={{
+                                                    name: diff.file!,
+                                                    contents: diff.after!,
+                                                  }}
+                                                />
+                                              </Accordion.Content>
+                                            </Accordion.Item>
+                                          )}
+                                        </For>
+                                      </Accordion>
+                                    </div>
+                                  </Show>
+                                  <Show when={error() && !detailsExpanded()}>
+                                    <Card variant="error" class="text-text-on-critical-base">
+                                      {error()?.data?.message as string}
+                                    </Card>
+                                  </Show>
+                                  {/* Response */}
+                                  <div class="w-full">
+                                    <Switch>
+                                      <Match when={!completed()}>
+                                        <MessageProgress assistantMessages={assistantMessages} done={!working()} />
+                                      </Match>
+                                      <Match when={completed() && hasToolPart()}>
+                                        <Collapsible
+                                          variant="ghost"
+                                          open={detailsExpanded()}
+                                          onOpenChange={setDetailsExpanded}
+                                        >
+                                          <Collapsible.Trigger class="text-text-weak hover:text-text-strong">
+                                            <div class="flex items-center gap-1 self-stretch">
+                                              <div class="text-12-medium">
+                                                <Switch>
+                                                  <Match when={detailsExpanded()}>Hide details</Match>
+                                                  <Match when={!detailsExpanded()}>Show details</Match>
+                                                </Switch>
+                                              </div>
+                                              <Collapsible.Arrow />
+                                            </div>
+                                          </Collapsible.Trigger>
+                                          <Collapsible.Content>
+                                            <div class="w-full flex flex-col items-start self-stretch gap-3">
+                                              <For each={assistantMessages()}>
+                                                {(assistantMessage) => {
+                                                  const parts = createMemo(() => sync.data.part[assistantMessage.id])
+                                                  return <Message message={assistantMessage} parts={parts()} />
+                                                }}
+                                              </For>
+                                              <Show when={error()}>
+                                                <Card variant="error" class="text-text-on-critical-base">
+                                                  {error()?.data?.message as string}
+                                                </Card>
+                                              </Show>
+                                            </div>
+                                          </Collapsible.Content>
+                                        </Collapsible>
+                                      </Match>
+                                    </Switch>
+                                  </div>
+                                </div>
+                              </Show>
+                            )
+                          }}
+                        </For>
+                      </div>
+                    </div>
+                  </Match>
+                  <Match when={true}>
+                    <div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
+                      <div class="text-20-medium text-text-weaker">New session</div>
+                      <div class="flex justify-center items-center gap-3">
+                        <Icon name="folder" size="small" />
+                        <div class="text-12-medium text-text-weak">
+                          {getDirectory(sync.data.path.directory)}
+                          <span class="text-text-strong">{getFilename(sync.data.path.directory)}</span>
+                        </div>
+                      </div>
+                      <div class="flex justify-center items-center gap-3">
+                        <Icon name="pencil-line" size="small" />
+                        <div class="text-12-medium text-text-weak">
+                          Last modified&nbsp;
+                          <span class="text-text-strong">
+                            {DateTime.fromMillis(sync.data.project.time.created).toRelative()}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </Match>
+                </Switch>
+                <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
+                  <PromptInput
+                    ref={(el) => {
+                      inputRef = el
+                    }}
+                  />
+                </div>
+              </div>
+              <Show when={local.layout.review.state() === "open"}>
+                <div
+                  classList={{
+                    "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 border-l border-border-weak-base": true,
+                  }}
+                >
+                  <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch">
+                    <div class="flex items-center gap-x-3">
+                      <Tooltip value="Close">
+                        <IconButton icon="align-right" variant="ghost" onClick={local.layout.review.close} />
+                      </Tooltip>
+                      <Tooltip value="Open in tab">
+                        <IconButton
+                          icon="expand"
+                          variant="ghost"
+                          onClick={() => {
+                            local.layout.review.tab()
+                            session.layout.setActiveTab("review")
+                          }}
+                        />
+                      </Tooltip>
+                    </div>
+                  </div>
+                  <div class="text-14-medium text-text-strong">All changes</div>
+                  <div class="h-full pb-40 overflow-y-auto no-scrollbar">
+                    <Accordion class="w-full" multiple>
+                      <For each={session.diffs()}>
+                        {(diff) => (
+                          <Accordion.Item value={diff.file} defaultOpen>
+                            <Accordion.Header>
+                              <Accordion.Trigger>
+                                <div class="flex items-center justify-between w-full gap-5">
+                                  <div class="grow flex items-center gap-5 min-w-0">
+                                    <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
+                                    <div class="flex grow min-w-0">
+                                      <Show when={diff.file.includes("/")}>
+                                        <span class="text-text-base truncate-start">
+                                          {getDirectory(diff.file)}&lrm;
+                                        </span>
+                                      </Show>
+                                      <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
+                                    </div>
+                                  </div>
+                                  <div class="shrink-0 flex gap-4 items-center justify-end">
+                                    <DiffChanges changes={diff} />
+                                    <Icon name="chevron-grabber-vertical" size="small" />
+                                  </div>
+                                </div>
+                              </Accordion.Trigger>
+                            </Accordion.Header>
+                            <Accordion.Content>
+                              <Diff
+                                before={{
+                                  name: diff.file!,
+                                  contents: diff.before!,
+                                }}
+                                after={{
+                                  name: diff.file!,
+                                  contents: diff.after!,
+                                }}
+                              />
+                            </Accordion.Content>
+                          </Accordion.Item>
+                        )}
+                      </For>
+                    </Accordion>
+                  </div>
+                </div>
+              </Show>
+            </div>
+          </Tabs.Content>
+          <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
+            <Tabs.Content value="review" class="select-text">
+              <div
+                classList={{
+                  "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0": true,
+                }}
+              >
+                <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch sticky top-0 bg-background-stronger z-100">
+                  <div class="flex items-center gap-x-3"></div>
+                </div>
+                <div class="text-14-medium text-text-strong">All changes</div>
+                <div class="h-full pb-40 overflow-y-auto no-scrollbar">
+                  <Accordion class="w-full" multiple>
+                    <For each={session.diffs()}>
+                      {(diff) => (
+                        <Accordion.Item value={diff.file} defaultOpen>
+                          <Accordion.Header>
+                            <Accordion.Trigger>
+                              <div class="flex items-center justify-between w-full gap-5">
+                                <div class="grow flex items-center gap-5 min-w-0">
+                                  <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
+                                  <div class="flex grow min-w-0">
+                                    <Show when={diff.file.includes("/")}>
+                                      <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
+                                    </Show>
+                                    <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
+                                  </div>
+                                </div>
+                                <div class="shrink-0 flex gap-4 items-center justify-end">
+                                  <DiffChanges changes={diff} />
+                                  <Icon name="chevron-grabber-vertical" size="small" />
+                                </div>
+                              </div>
+                            </Accordion.Trigger>
+                          </Accordion.Header>
+                          <Accordion.Content>
+                            <Diff
+                              diffStyle="split"
+                              before={{
+                                name: diff.file!,
+                                contents: diff.before!,
+                              }}
+                              after={{
+                                name: diff.file!,
+                                contents: diff.after!,
+                              }}
+                            />
+                          </Accordion.Content>
+                        </Accordion.Item>
+                      )}
+                    </For>
+                  </Accordion>
+                </div>
+              </div>
+            </Tabs.Content>
+          </Show>
+          <For each={session.layout.tabs.opened}>
+            {(tab) => {
+              const [file] = createResource(
+                () => tab,
+                async (tab) => {
+                  if (tab.startsWith("file://")) {
+                    return local.file.node(tab.replace("file://", ""))
+                  }
+                  return undefined
+                },
+              )
+              return (
+                <Tabs.Content value={tab} class="select-text mt-3">
+                  <Switch>
+                    <Match when={file()}>
+                      {(f) => (
+                        <Code
+                          file={{ name: f().path, contents: f().content?.content ?? "" }}
+                          overflow="scroll"
+                          class="pb-40"
+                        />
+                      )}
+                    </Match>
+                  </Switch>
+                </Tabs.Content>
+              )
+            }}
+          </For>
+        </Tabs>
+        <DragOverlay>
+          <Show when={store.activeDraggable}>
+            {(draggedFile) => {
+              const [file] = createResource(
+                () => draggedFile(),
+                async (tab) => {
+                  if (tab.startsWith("file://")) {
+                    return local.file.node(tab.replace("file://", ""))
+                  }
+                  return undefined
+                },
+              )
+              return (
+                <div class="relative px-3 h-10 flex items-center bg-background-base border-x border-border-weak-base border-b border-b-transparent">
+                  <Show when={file()}>{(f) => <FileVisual file={f()} />}</Show>
+                </div>
+              )
+            }}
+          </Show>
+        </DragOverlay>
+      </DragDropProvider>
+      <Show when={session.layout.tabs.active}>
+        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
+          <PromptInput
+            ref={(el) => {
+              inputRef = el
+            }}
+          />
+        </div>
+      </Show>
+      <div class="hidden shrink-0 w-56 p-2 h-full overflow-y-auto">
+        {/* <FileTree path="" onFileClick={ handleTabClick} /> */}
+      </div>
+      <div class="hidden shrink-0 w-56 p-2">
+        <Show when={local.file.changes().length} fallback={<div class="px-2 text-xs text-text-muted">No changes</div>}>
+          <ul class="">
+            <For each={local.file.changes()}>
+              {(path) => (
+                <li>
+                  <button
+                    onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })}
+                    class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 hover:bg-background-element"
+                  >
+                    <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" />
+                    <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span>
+                    <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0">
+                      {getDirectory(path)}
+                    </span>
+                  </button>
+                </li>
+              )}
+            </For>
+          </ul>
+        </Show>
+      </div>
+      <Show when={store.fileSelectOpen}>
+        <SelectDialog
+          defaultOpen
+          title="Select file"
+          placeholder="Search files"
+          emptyMessage="No files found"
+          items={local.file.searchFiles}
+          key={(x) => x}
+          onOpenChange={(open) => setStore("fileSelectOpen", open)}
+          onSelect={(x) => (x ? session.layout.openTab("file://" + x) : undefined)}
+        >
+          {(i) => (
+            <div
+              classList={{
+                "w-full flex items-center justify-between rounded-md": true,
+              }}
+            >
+              <div class="flex items-center gap-x-2 grow min-w-0">
+                <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
+                <div class="flex items-center text-14-regular">
+                  <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                    {getDirectory(i)}
+                  </span>
+                  <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
+                </div>
+              </div>
+              <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0"></div>
+            </div>
+          )}
+        </SelectDialog>
+      </Show>
+    </div>
+  )
+}

packages/desktop/src/sst-env.d.ts

@@ -2,9 +2,7 @@
 /* tslint:disable */
 /* eslint-disable */
 /// <reference types="vite/client" />
-interface ImportMetaEnv {
-
-}
+interface ImportMetaEnv {}
 interface ImportMeta {
   readonly env: ImportMetaEnv
-}
+}

packages/desktop/sst-env.d.ts

@@ -6,4 +6,4 @@
 /// <reference path="../../sst-env.d.ts" />
 
 import "sst"
-export {}
+export {}

packages/extensions/zed/LICENSE

@@ -0,0 +1 @@
+../../../LICENSE

packages/extensions/zed/extension.toml

@@ -0,0 +1,36 @@
+id = "opencode"
+name = "OpenCode"
+description = "The AI coding agent built for the terminal"
+version = "1.0.55"
+schema_version = 1
+authors = ["Anomaly"]
+repository = "https://github.com/sst/opencode"
+
+[agent_servers.opencode]
+name = "OpenCode"
+icon = "./icons/opencode.svg"
+
+[agent_servers.opencode.targets.darwin-aarch64]
+archive = "https://github.com/sst/opencode/releases/download/v1.0.55/opencode-darwin-arm64.zip"
+cmd = "./opencode"
+args = ["acp"]
+
+[agent_servers.opencode.targets.darwin-x86_64]
+archive = "https://github.com/sst/opencode/releases/download/v1.0.55/opencode-darwin-x64.zip"
+cmd = "./opencode"
+args = ["acp"]
+
+[agent_servers.opencode.targets.linux-aarch64]
+archive = "https://github.com/sst/opencode/releases/download/v1.0.55/opencode-linux-arm64.zip"
+cmd = "./opencode"
+args = ["acp"]
+
+[agent_servers.opencode.targets.linux-x86_64]
+archive = "https://github.com/sst/opencode/releases/download/v1.0.55/opencode-linux-x64.zip"
+cmd = "./opencode"
+args = ["acp"]
+
+[agent_servers.opencode.targets.windows-x86_64]
+archive = "https://github.com/sst/opencode/releases/download/v1.0.55/opencode-windows-x64.zip"
+cmd = "./opencode.exe"
+args = ["acp"]

packages/extensions/zed/icons/opencode.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 14H3V2H13V14ZM10.5 4.4H5.5V11.6H10.5V4.4Z" fill="#C4CAD4"/>
+</svg>

packages/function/package.json

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