zen: add Go page

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

@@ -205,7 +205,7 @@ function LimitsGraph(props: { href: string }) {
 
 export default function Home() {
   const workspaceID = createAsync(() => checkLoggedIn())
-  const subscribeUrl = createMemo(() => (workspaceID() ? `/workspace/${workspaceID()}/billing` : "/auth"))
+  const subscribeUrl = createMemo(() => (workspaceID() ? `/workspace/${workspaceID()}/go` : "/auth"))
   const i18n = useI18n()
   const language = useLanguage()
   return (

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

@@ -19,6 +19,9 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
               <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
                 {i18n.t("workspace.nav.zen")}
               </A>
+              <A href={`/workspace/${params.id}/go`} activeClass="active" data-nav-button>
+                {i18n.t("workspace.nav.go")}
+              </A>
               <A href={`/workspace/${params.id}/usage`} activeClass="active" data-nav-button>
                 {i18n.t("workspace.nav.usage")}
               </A>
@@ -44,6 +47,9 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
               <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
                 {i18n.t("workspace.nav.zen")}
               </A>
+              <A href={`/workspace/${params.id}/go`} activeClass="active" data-nav-button>
+                {i18n.t("workspace.nav.go")}
+              </A>
               <A href={`/workspace/${params.id}/usage`} activeClass="active" data-nav-button>
                 {i18n.t("workspace.nav.usage")}
               </A>

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

@@ -3,7 +3,6 @@ import { BillingSection } from "./billing-section"
 import { ReloadSection } from "./reload-section"
 import { PaymentSection } from "./payment-section"
 import { BlackSection } from "./black-section"
-import { LiteSection } from "./lite-section"
 import { createMemo, Show } from "solid-js"
 import { createAsync, useParams } from "@solidjs/router"
 import { queryBillingInfo, querySessionInfo } from "../../common"
@@ -21,9 +20,6 @@ export default function () {
           <Show when={isBlack()}>
             <BlackSection />
           </Show>
-          <Show when={!isBlack()}>
-            <LiteSection />
-          </Show>
           <BillingSection />
           <Show when={billingInfo()?.customerID}>
             <ReloadSection />

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

@@ -0,0 +1,11 @@
+import { LiteSection } from "./lite-section"
+
+export default function () {
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <LiteSection />
+      </div>
+    </div>
+  )
+}

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

@@ -1,6 +1,6 @@
 import { action, useParams, useAction, useSubmission, json, query, createAsync } from "@solidjs/router"
 import { createStore } from "solid-js/store"
-import { Show } from "solid-js"
+import { createMemo, Show } from "solid-js"
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { Database, eq, and, isNull } from "@opencode-ai/console-core/drizzle/index.js"
 import { BillingTable, LiteTable } from "@opencode-ai/console-core/schema/billing.sql.js"
@@ -138,6 +138,8 @@ export function LiteSection() {
   const params = useParams()
   const i18n = useI18n()
   const language = useLanguage()
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
+  const isBlack = createMemo(() => billingInfo()?.subscriptionID || billingInfo()?.timeSubscriptionBooked)
   const lite = createAsync(() => queryLiteSubscription(params.id!))
   const sessionAction = useAction(createSessionUrl)
   const sessionSubmission = useSubmission(createSessionUrl)
@@ -166,11 +168,19 @@ export function LiteSection() {
 
   return (
     <>
-      <Show when={lite() && lite()!.mine && lite()!}>
+      <Show when={isBlack()}>
+        <section class={styles.root}>
+          <div data-slot="section-title">
+            <h2>{i18n.t("workspace.lite.title")}</h2>
+          </div>
+          <p data-slot="other-message">{i18n.t("workspace.lite.black.message")}</p>
+        </section>
+      </Show>
+      <Show when={!isBlack() && lite() && lite()!.mine && lite()!}>
         {(sub) => (
           <section class={styles.root}>
             <div data-slot="section-title">
-              <h2>{i18n.t("workspace.lite.subscription.title")}</h2>
+              <h2>{i18n.t("workspace.lite.title")}</h2>
               <div data-slot="title-row">
                 <p>{i18n.t("workspace.lite.subscription.message")}</p>
                 <button
@@ -248,18 +258,18 @@ export function LiteSection() {
           </section>
         )}
       </Show>
-      <Show when={lite() && !lite()!.mine}>
+      <Show when={!isBlack() && lite() && !lite()!.mine}>
         <section class={styles.root}>
           <div data-slot="section-title">
-            <h2>{i18n.t("workspace.lite.other.title")}</h2>
+            <h2>{i18n.t("workspace.lite.title")}</h2>
           </div>
           <p data-slot="other-message">{i18n.t("workspace.lite.other.message")}</p>
         </section>
       </Show>
-      <Show when={lite() === null}>
+      <Show when={!isBlack() && lite() === null}>
         <section class={styles.root}>
           <div data-slot="section-title">
-            <h2>{i18n.t("workspace.lite.promo.title")}</h2>
+            <h2>{i18n.t("workspace.lite.title")}</h2>
           </div>
           <p data-slot="promo-description">{i18n.t("workspace.lite.promo.description")}</p>
           <h3 data-slot="promo-models-title">{i18n.t("workspace.lite.promo.modelsTitle")}</h3>