feat(go): referral support (#28345)

Co-authored-by: Jack <jack@anoma.ly>
2026-05-19 17:51:39 +02:00 · 2026-05-19 17:51:39 +02:00 · b32f071502
commit b32f071502
parent 512e34af83
54 changed files with 20809 additions and 206 deletions
--- a/packages/console/app/src/routes/auth/[...callback].ts
+++ b/packages/console/app/src/routes/auth/[...callback].ts
@ -1,9 +1,11 @@
 import { redirect } from "@solidjs/router"
 import type { APIEvent } from "@solidjs/start/server"
+import { Referral } from "@opencode-ai/console-core/referral.js"
 import { AuthClient } from "~/context/auth"
 import { useAuthSession } from "~/context/auth"
 import { i18n } from "~/i18n"
 import { localeFromRequest, route } from "~/lib/language"
+import { clearReferralCookie, referralCodeFromCookieHeader } from "~/lib/referral-invite"

 export async function GET(input: APIEvent) {
  const url = new URL(input.request.url)
@ -17,6 +19,7 @@ export async function GET(input: APIEvent) {
    if (result.err) throw new Error(result.err.message)
    const decoded = AuthClient.decode(result.tokens.access, {} as any)
    if (decoded.err) throw new Error(decoded.err.message)
+    const referralCode = referralCodeFromCookieHeader(input.request.headers.get("cookie"))
    const session = await useAuthSession()
    const id = decoded.subject.properties.accountID
    await session.update((value) => {
@ -32,8 +35,15 @@ export async function GET(input: APIEvent) {
        current: id,
      }
    })
+    if (decoded.subject.properties.newAccount && referralCode) {
+      await Referral.createFromAccount({ accountID: id, referralCode }).catch((error) => {
+        console.error("Referral create failed", error)
+      })
+    }
    const next = url.pathname === "/auth/callback" ? "/auth" : url.pathname.replace("/auth/callback", "")
-    return redirect(route(locale, next))
+    const response = redirect(route(locale, next))
+    if (referralCode) response.headers.append("set-cookie", clearReferralCookie())
+    return response
  } catch (e: any) {
    return new Response(
      JSON.stringify({
--- a/packages/console/app/src/routes/black.css
+++ b/packages/console/app/src/routes/black.css
@ -701,64 +701,6 @@
        }
      }

-      [data-slot="workspace-picker"] {
-        [data-slot="workspace-list"] {
-          width: 100%;
-          padding: 0;
-          margin: 0;
-          list-style: none;
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 8px;
-          align-self: stretch;
-          outline: none;
-          overflow-y: auto;
-          max-height: 240px;
-          scrollbar-width: none;
-
-          &::-webkit-scrollbar {
-            display: none;
-          }
-
-          [data-slot="workspace-item"] {
-            width: 100%;
-            display: flex;
-            padding: 8px 12px;
-            align-items: center;
-            gap: 8px;
-            align-self: stretch;
-            cursor: pointer;
-
-            [data-slot="selected-icon"] {
-              visibility: hidden;
-              color: rgba(255, 255, 255, 0.39);
-              font-family: "IBM Plex Mono", monospace;
-              font-size: 16px;
-              font-style: normal;
-              font-weight: 400;
-              line-height: 160%;
-            }
-
-            span:last-child {
-              color: rgba(255, 255, 255, 0.92);
-              font-size: 16px;
-              font-style: normal;
-              font-weight: 400;
-              line-height: 160%;
-            }
-
-            &:hover,
-            &[data-active="true"] {
-              background: #161616;
-
-              [data-slot="selected-icon"] {
-                visibility: visible;
-              }
-            }
-          }
-        }
-      }
    }
  }

@ -839,3 +781,64 @@
    }
  }
 }
+
+[data-component="black-workspace-picker-modal"] {
+  font-family: var(--font-mono);
+
+  [data-slot="workspace-list"] {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+    outline: none;
+    overflow-y: auto;
+    max-height: 240px;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [data-slot="workspace-item"] {
+    width: 100%;
+    display: flex;
+    padding: 8px 12px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    cursor: pointer;
+
+    [data-slot="selected-icon"] {
+      visibility: hidden;
+      color: rgba(255, 255, 255, 0.39);
+      font-family: "IBM Plex Mono", monospace;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 160%;
+    }
+
+    span:last-child {
+      color: rgba(255, 255, 255, 0.92);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 160%;
+    }
+
+    &:hover,
+    &[data-active="true"] {
+      background: #161616;
+
+      [data-slot="selected-icon"] {
+        visibility: visible;
+      }
+    }
+  }
+}
--- a/packages/console/app/src/routes/black/subscribe/[plan].tsx
+++ b/packages/console/app/src/routes/black/subscribe/[plan].tsx
@ -444,8 +444,13 @@ export default function BlackSubscribe() {
        </div>

        {/* Workspace picker modal */}
-        <Modal open={showWorkspacePicker() ?? false} onClose={() => {}} title={i18n.t("black.workspace.selectPlan")}>
-          <div data-slot="workspace-picker">
+        <Modal
+          open={showWorkspacePicker() ?? false}
+          onClose={() => {}}
+          title={i18n.t("black.workspace.selectPlan")}
+          variant="black"
+        >
+          <div data-component="black-workspace-picker-modal" data-slot="workspace-picker">
            <ul
              ref={listRef}
              data-slot="workspace-list"
--- a/packages/console/app/src/routes/go/index.tsx
+++ b/packages/console/app/src/routes/go/index.tsx
@ -1,5 +1,5 @@
 import "./index.css"
-import { createAsync, query } from "@solidjs/router"
+import { createAsync, query, useLocation } from "@solidjs/router"
 import { Title, Meta } from "@solidjs/meta"
 import { For, createMemo, createSignal, onCleanup, onMount } from "solid-js"
 //import { HttpHeader } from "@solidjs/start"
@ -224,8 +224,15 @@ function LimitsGraph(props: { href: string }) {
 }

 export default function Home() {
+  const location = useLocation()
  const workspaceID = createAsync(() => checkLoggedIn())
-  const subscribeUrl = createMemo(() => (workspaceID() ? `/workspace/${workspaceID()}/go` : "/auth"))
+  const referralCode = createMemo(() => new URLSearchParams(location.search).get("ref") ?? undefined)
+  const subscribeUrl = createMemo(() => {
+    const code = referralCode()
+    const referral = code ? `?ref=${encodeURIComponent(code)}` : ""
+    if (workspaceID()) return `/workspace/${workspaceID()}/go${referral}`
+    return `/auth${referral}`
+  })
  const i18n = useI18n()
  const language = useLanguage()
  return (
--- a/packages/console/app/src/routes/stripe/webhook.ts
+++ b/packages/console/app/src/routes/stripe/webhook.ts
@ -9,7 +9,7 @@ import { Actor } from "@opencode-ai/console-core/actor.js"
 import { Resource } from "@opencode-ai/console-resource"
 import { LiteData } from "@opencode-ai/console-core/lite.js"
 import { BlackData } from "@opencode-ai/console-core/black.js"
-import { User } from "@opencode-ai/console-core/user.js"
+import { Referral } from "@opencode-ai/console-core/referral.js"

 export async function POST(input: APIEvent) {
  const body = await Billing.stripe().webhooks.constructEventAsync(
@ -174,6 +174,13 @@ export async function POST(input: APIEvent) {
              }
            }
          })
+
+          await Referral.completeFromLiteSubscription({
+            workspaceID,
+            userID,
+          }).catch((error) => {
+            console.error("Referral sync failed", error)
+          })
        })
      }
    }
--- a/packages/console/app/src/routes/workspace-picker.css
+++ b/packages/console/app/src/routes/workspace-picker.css
@ -34,6 +34,10 @@
      background-color: var(--color-bg-surface);
    }
  }
+}
+
+[data-component="workspace-create-modal"] {
+  width: 100%;

  [data-slot="create-form"] {
    width: 100%;
--- a/packages/console/app/src/routes/workspace-picker.tsx
+++ b/packages/console/app/src/routes/workspace-picker.tsx
@ -1,6 +1,5 @@
 import { query, useParams, action, createAsync, redirect, useSubmission } from "@solidjs/router"
-import { For, createEffect } from "solid-js"
-import { createStore } from "solid-js/store"
+import { For, createEffect, createSignal } from "solid-js"
 import { withActor } from "~/context/auth.withActor"
 import { Actor } from "@opencode-ai/console-core/actor.js"
 import { and, Database, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js"
@ -51,9 +50,7 @@ export function WorkspacePicker() {
  const i18n = useI18n()
  const workspaces = createAsync(() => getWorkspaces())
  const submission = useSubmission(createWorkspace)
-  const [store, setStore] = createStore({
-    showForm: false,
-  })
+  const [showForm, setShowForm] = createSignal(false)
  let inputRef: HTMLInputElement | undefined

  const currentWorkspace = () => {
@ -61,12 +58,8 @@ export function WorkspacePicker() {
    return ws ? ws.name : i18n.t("workspace.select")
  }

-  const handleWorkspaceNew = () => {
-    setStore("showForm", true)
-  }
-
  createEffect(() => {
-    if (store.showForm && inputRef) {
+    if (showForm() && inputRef) {
      setTimeout(() => inputRef?.focus(), 0)
    }
  })
@ -79,7 +72,7 @@ export function WorkspacePicker() {
  // Reset signals when workspace ID changes
  createEffect(() => {
    params.id
-    setStore("showForm", false)
+    setShowForm(false)
  })

  return (
@ -92,32 +85,34 @@ export function WorkspacePicker() {
            </DropdownItem>
          )}
        </For>
-        <button data-slot="create-item" type="button" onClick={() => handleWorkspaceNew()}>
+        <button data-slot="create-item" type="button" onClick={() => setShowForm(true)}>
          {i18n.t("workspace.createNew")}
        </button>
      </Dropdown>

-      <Modal open={store.showForm} onClose={() => setStore("showForm", false)} title={i18n.t("workspace.modal.title")}>
-        <form data-slot="create-form" action={createWorkspace} method="post">
-          <div data-slot="create-input-group">
-            <input
-              ref={inputRef}
-              data-slot="create-input"
-              type="text"
-              name="workspaceName"
-              placeholder={i18n.t("workspace.modal.placeholder")}
-              required
-            />
-            <div data-slot="button-group">
-              <button type="button" data-color="ghost" onClick={() => setStore("showForm", false)}>
-                {i18n.t("common.cancel")}
-              </button>
-              <button type="submit" data-color="primary" disabled={submission.pending}>
-                {submission.pending ? i18n.t("common.creating") : i18n.t("common.create")}
-              </button>
+      <Modal open={showForm()} onClose={() => setShowForm(false)} title={i18n.t("workspace.modal.title")}>
+        <div data-component="workspace-create-modal">
+          <form data-slot="create-form" action={createWorkspace} method="post">
+            <div data-slot="create-input-group">
+              <input
+                ref={inputRef}
+                data-slot="create-input"
+                type="text"
+                name="workspaceName"
+                placeholder={i18n.t("workspace.modal.placeholder")}
+                required
+              />
+              <div data-slot="button-group">
+                <button type="button" data-color="ghost" onClick={() => setShowForm(false)}>
+                  {i18n.t("common.cancel")}
+                </button>
+                <button type="submit" data-color="primary" disabled={submission.pending}>
+                  {submission.pending ? i18n.t("common.creating") : i18n.t("common.create")}
+                </button>
+              </div>
            </div>
-          </div>
-        </form>
+          </form>
+        </div>
      </Modal>
    </div>
  )
--- a/packages/console/app/src/routes/workspace.css
+++ b/packages/console/app/src/routes/workspace.css
@ -25,6 +25,7 @@

    &:disabled {
      opacity: 0.5;
+      cursor: not-allowed;
      transform: none;
    }

--- a/packages/console/app/src/routes/workspace/[id]/billing/black-section.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/billing/black-section.tsx
@ -13,6 +13,7 @@ import styles from "./black-section.module.css"
 import waitlistStyles from "./black-waitlist-section.module.css"
 import { useI18n } from "~/context/i18n"
 import { formError } from "~/lib/form-error"
+import { blackResetTimeKeys, formatResetTime } from "~/lib/format-reset-time"

 const querySubscription = query(async (workspaceID: string) => {
  "use server"
@ -52,20 +53,6 @@ const querySubscription = query(async (workspaceID: string) => {
  }, workspaceID)
 }, "subscription.get")

-function formatResetTime(seconds: number, i18n: ReturnType<typeof useI18n>) {
-  const days = Math.floor(seconds / 86400)
-  if (days >= 1) {
-    const hours = Math.floor((seconds % 86400) / 3600)
-    return `${days} ${days === 1 ? i18n.t("workspace.black.time.day") : i18n.t("workspace.black.time.days")} ${hours} ${hours === 1 ? i18n.t("workspace.black.time.hour") : i18n.t("workspace.black.time.hours")}`
-  }
-  const hours = Math.floor(seconds / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
-  if (hours >= 1)
-    return `${hours} ${hours === 1 ? i18n.t("workspace.black.time.hour") : i18n.t("workspace.black.time.hours")} ${minutes} ${minutes === 1 ? i18n.t("workspace.black.time.minute") : i18n.t("workspace.black.time.minutes")}`
-  if (minutes === 0) return i18n.t("workspace.black.time.fewSeconds")
-  return `${minutes} ${minutes === 1 ? i18n.t("workspace.black.time.minute") : i18n.t("workspace.black.time.minutes")}`
-}
-
 const cancelWaitlist = action(async (workspaceID: string) => {
  "use server"
  return json(
@ -209,7 +196,7 @@ export function BlackSection() {
                </div>
                <span data-slot="reset-time">
                  {i18n.t("workspace.black.subscription.resetsIn")}{" "}
-                  {formatResetTime(sub().rollingUsage.resetInSec, i18n)}
+                  {formatResetTime(sub().rollingUsage.resetInSec, i18n, blackResetTimeKeys)}
                </span>
              </div>
              <div data-slot="usage-item">
@ -222,7 +209,7 @@ export function BlackSection() {
                </div>
                <span data-slot="reset-time">
                  {i18n.t("workspace.black.subscription.resetsIn")}{" "}
-                  {formatResetTime(sub().weeklyUsage.resetInSec, i18n)}
+                  {formatResetTime(sub().weeklyUsage.resetInSec, i18n, blackResetTimeKeys)}
                </span>
              </div>
            </div>
--- a/packages/console/app/src/routes/workspace/[id]/go/index.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/go/index.tsx
@ -1,11 +1,16 @@
+import { createAsync, useParams } from "@solidjs/router"
+import { Show } from "solid-js"
 import { IconGo } from "~/component/icon"
+import { GoReferralSection, queryGoReferral } from "~/component/go-referral"
 import { useI18n } from "~/context/i18n"
 import { useLanguage } from "~/context/language"
 import { LiteSection } from "./lite-section"

 export default function () {
+  const params = useParams()
  const i18n = useI18n()
  const language = useLanguage()
+  const referral = createAsync(() => queryGoReferral(params.id!))

  return (
    <div data-page="workspace-[id]">
@ -24,6 +29,13 @@ export default function () {

      <div data-slot="sections">
        <LiteSection />
+        <Show when={referral()} fallback={<section>{i18n.t("workspace.lite.loading")}</section>}>
+          {(summary) => (
+            <Show when={summary().hasActiveGo || summary().rewards.length > 0}>
+              <GoReferralSection workspaceID={params.id!} summary={summary()} />
+            </Show>
+          )}
+        </Show>
      </div>
    </div>
  )
--- a/packages/console/app/src/routes/workspace/[id]/go/lite-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/go/lite-section.module.css
@ -212,6 +212,9 @@
    gap: 4px;
  }

+}
+
+.paymentMethodModal {
  [data-slot="modal-actions"] {
    display: flex;
    gap: var(--space-3);
--- a/packages/console/app/src/routes/workspace/[id]/go/lite-section.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/go/lite-section.tsx
@ -14,10 +14,11 @@ import styles from "./lite-section.module.css"
 import { useI18n } from "~/context/i18n"
 import { useLanguage } from "~/context/language"
 import { formError } from "~/lib/form-error"
+import { formatResetTime, liteResetTimeKeys } from "~/lib/format-reset-time"

 import { IconAlipay, IconUpi } from "~/component/icon"

-const queryLiteSubscription = query(async (workspaceID: string) => {
+export const queryLiteSubscription = query(async (workspaceID: string) => {
  "use server"
  return withActor(async () => {
    const row = await Database.use((tx) =>
@ -67,20 +68,6 @@ const queryLiteSubscription = query(async (workspaceID: string) => {
  }, workspaceID)
 }, "lite.subscription.get")

-function formatResetTime(seconds: number, i18n: ReturnType<typeof useI18n>) {
-  const days = Math.floor(seconds / 86400)
-  if (days >= 1) {
-    const hours = Math.floor((seconds % 86400) / 3600)
-    return `${days} ${days === 1 ? i18n.t("workspace.lite.time.day") : i18n.t("workspace.lite.time.days")} ${hours} ${hours === 1 ? i18n.t("workspace.lite.time.hour") : i18n.t("workspace.lite.time.hours")}`
-  }
-  const hours = Math.floor(seconds / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
-  if (hours >= 1)
-    return `${hours} ${hours === 1 ? i18n.t("workspace.lite.time.hour") : i18n.t("workspace.lite.time.hours")} ${minutes} ${minutes === 1 ? i18n.t("workspace.lite.time.minute") : i18n.t("workspace.lite.time.minutes")}`
-  if (minutes === 0) return i18n.t("workspace.lite.time.fewSeconds")
-  return `${minutes} ${minutes === 1 ? i18n.t("workspace.lite.time.minute") : i18n.t("workspace.lite.time.minutes")}`
-}
-
 const createLiteCheckoutUrl = action(
  async (workspaceID: string, successUrl: string, cancelUrl: string, method?: "alipay" | "upi") => {
    "use server"
@ -140,6 +127,25 @@ const setLiteUseBalance = action(async (form: FormData) => {
  )
 }, "setLiteUseBalance")

+function LiteUsageItem(props: { label: string; usage: { usagePercent: number; resetInSec: number } }) {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="usage-item">
+      <div data-slot="usage-header">
+        <span data-slot="usage-label">{props.label}</span>
+        <span data-slot="usage-value">{props.usage.usagePercent}%</span>
+      </div>
+      <div data-slot="progress">
+        <div data-slot="progress-bar" style={{ width: `${props.usage.usagePercent}%` }} />
+      </div>
+      <span data-slot="reset-time">
+        {i18n.t("workspace.lite.subscription.resetsIn")} {formatResetTime(props.usage.resetInSec, i18n, liteResetTimeKeys)}
+      </span>
+    </div>
+  )
+}
+
 export function LiteSection() {
  const params = useParams()
  const i18n = useI18n()
@ -207,44 +213,9 @@ export function LiteSection() {
              .
            </div>
            <div data-slot="usage">
-              <div data-slot="usage-item">
-                <div data-slot="usage-header">
-                  <span data-slot="usage-label">{i18n.t("workspace.lite.subscription.rollingUsage")}</span>
-                  <span data-slot="usage-value">{sub().rollingUsage.usagePercent}%</span>
-                </div>
-                <div data-slot="progress">
-                  <div data-slot="progress-bar" style={{ width: `${sub().rollingUsage.usagePercent}%` }} />
-                </div>
-                <span data-slot="reset-time">
-                  {i18n.t("workspace.lite.subscription.resetsIn")}{" "}
-                  {formatResetTime(sub().rollingUsage.resetInSec, i18n)}
-                </span>
-              </div>
-              <div data-slot="usage-item">
-                <div data-slot="usage-header">
-                  <span data-slot="usage-label">{i18n.t("workspace.lite.subscription.weeklyUsage")}</span>
-                  <span data-slot="usage-value">{sub().weeklyUsage.usagePercent}%</span>
-                </div>
-                <div data-slot="progress">
-                  <div data-slot="progress-bar" style={{ width: `${sub().weeklyUsage.usagePercent}%` }} />
-                </div>
-                <span data-slot="reset-time">
-                  {i18n.t("workspace.lite.subscription.resetsIn")} {formatResetTime(sub().weeklyUsage.resetInSec, i18n)}
-                </span>
-              </div>
-              <div data-slot="usage-item">
-                <div data-slot="usage-header">
-                  <span data-slot="usage-label">{i18n.t("workspace.lite.subscription.monthlyUsage")}</span>
-                  <span data-slot="usage-value">{sub().monthlyUsage.usagePercent}%</span>
-                </div>
-                <div data-slot="progress">
-                  <div data-slot="progress-bar" style={{ width: `${sub().monthlyUsage.usagePercent}%` }} />
-                </div>
-                <span data-slot="reset-time">
-                  {i18n.t("workspace.lite.subscription.resetsIn")}{" "}
-                  {formatResetTime(sub().monthlyUsage.resetInSec, i18n)}
-                </span>
-              </div>
+              <LiteUsageItem label={i18n.t("workspace.lite.subscription.rollingUsage")} usage={sub().rollingUsage} />
+              <LiteUsageItem label={i18n.t("workspace.lite.subscription.weeklyUsage")} usage={sub().weeklyUsage} />
+              <LiteUsageItem label={i18n.t("workspace.lite.subscription.monthlyUsage")} usage={sub().monthlyUsage} />
            </div>
            <form action={setLiteUseBalance} method="post" data-slot="setting-row">
              <p>{i18n.t("workspace.lite.subscription.useBalance")}</p>
@ -330,31 +301,33 @@ export function LiteSection() {
            onClose={() => setStore("showModal", false)}
            title={i18n.t("workspace.lite.promo.selectMethod")}
          >
-            <div data-slot="modal-actions">
-              <button
-                type="button"
-                data-slot="method-button"
-                data-color="ghost"
-                disabled={checkoutSubmission.pending || busy()}
-                onClick={() => onClickSubscribe("alipay")}
-              >
-                <Show when={store.loading !== "alipay"}>
-                  <IconAlipay style={{ width: "24px", height: "24px" }} />
-                </Show>
-                {store.loading === "alipay" ? i18n.t("workspace.lite.promo.subscribing") : "Alipay"}
-              </button>
-              <button
-                type="button"
-                data-slot="method-button"
-                data-color="ghost"
-                disabled={checkoutSubmission.pending || busy()}
-                onClick={() => onClickSubscribe("upi")}
-              >
-                <Show when={store.loading !== "upi"}>
-                  <IconUpi style={{ width: "auto", height: "16px" }} />
-                </Show>
-                {store.loading === "upi" ? i18n.t("workspace.lite.promo.subscribing") : "UPI"}
-              </button>
+            <div class={styles.paymentMethodModal}>
+              <div data-slot="modal-actions">
+                <button
+                  type="button"
+                  data-slot="method-button"
+                  data-color="ghost"
+                  disabled={checkoutSubmission.pending || busy()}
+                  onClick={() => onClickSubscribe("alipay")}
+                >
+                  <Show when={store.loading !== "alipay"}>
+                    <IconAlipay style={{ width: "24px", height: "24px" }} />
+                  </Show>
+                  {store.loading === "alipay" ? i18n.t("workspace.lite.promo.subscribing") : "Alipay"}
+                </button>
+                <button
+                  type="button"
+                  data-slot="method-button"
+                  data-color="ghost"
+                  disabled={checkoutSubmission.pending || busy()}
+                  onClick={() => onClickSubscribe("upi")}
+                >
+                  <Show when={store.loading !== "upi"}>
+                    <IconUpi style={{ width: "auto", height: "16px" }} />
+                  </Show>
+                  {store.loading === "upi" ? i18n.t("workspace.lite.promo.subscribing") : "UPI"}
+                </button>
+              </div>
            </div>
          </Modal>
        </section>