zen: go

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

@@ -140,6 +140,22 @@
     }
   }
 
+  [data-slot="beta-notice"] {
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-bg-surface);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+    margin-top: var(--space-3);
+
+    a {
+      color: var(--color-accent);
+      text-decoration: none;
+    }
+  }
+
   [data-slot="other-message"] {
     font-size: var(--font-size-sm);
     color: var(--color-text-muted);

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

@@ -11,6 +11,7 @@ import { withActor } from "~/context/auth.withActor"
 import { queryBillingInfo } from "../../common"
 import styles from "./lite-section.module.css"
 import { useI18n } from "~/context/i18n"
+import { useLanguage } from "~/context/language"
 
 const queryLiteSubscription = query(async (workspaceID: string) => {
   "use server"
@@ -135,6 +136,7 @@ const setLiteUseBalance = action(async (form: FormData) => {
 export function LiteSection() {
   const params = useParams()
   const i18n = useI18n()
+  const language = useLanguage()
   const lite = createAsync(() => queryLiteSubscription(params.id!))
   const sessionAction = useAction(createSessionUrl)
   const sessionSubmission = useSubmission(createSessionUrl)
@@ -181,6 +183,13 @@ export function LiteSection() {
                 </button>
               </div>
             </div>
+            <div data-slot="beta-notice">
+              {i18n.t("workspace.lite.subscription.selectProvider")}{" "}
+              <a href={language.route("/docs/providers/#opencode-go")} target="_blank" rel="noopener noreferrer">
+                {i18n.t("common.learnMore")}
+              </a>
+              .
+            </div>
             <div data-slot="usage">
               <div data-slot="usage-item">
                 <div data-slot="usage-header">