ignore: zen

packages/console/app/src/component/workspace/billing-section.tsx

@@ -174,11 +174,18 @@ export function BillingSection() {
           </div>
         </div>
         <div data-slot="usage">
-          <Show when={!balanceInfo()?.reload && !(balanceAmount() === "0.00" || balanceAmount() === "-0.00")}>
-            <p>
-              You have <b data-slot="value">${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b> remaining in
-              your account. You can continue using the API with your remaining balance.
-            </p>
+          <Show when={!balanceInfo()?.reload}>
+            <Show
+              when={!(balanceAmount() === "0.00" || balanceAmount() === "-0.00")}
+              fallback={
+                <p>We'll load <b>$20</b> (+$1.23 processing fee) and reload it when it reaches <b>$5</b>.</p>
+              }
+            >
+              <p>
+                You have <b data-slot="value">${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b> remaining in
+                your account. You can continue using the API with your remaining balance.
+              </p>
+            </Show>
           </Show>
           <Show when={balanceInfo()?.reload && !balanceInfo()?.reloadError}>
             <p>

packages/console/app/src/component/workspace/payment-section.tsx

@@ -95,7 +95,6 @@ export function PaymentSection() {
                             }
                           }}
                           data-slot="receipt-button"
-                          style="cursor: pointer;"
                         >
                           view
                         </button>

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

@@ -1,8 +1,4 @@
 import "./[id].css"
-import { Billing } from "@opencode/console-core/billing.js"
-import { query, useParams, createAsync } from "@solidjs/router"
-import { Show } from "solid-js"
-import { withActor } from "~/context/auth.withActor"
 import { MonthlyLimitSection } from "~/component/workspace/monthly-limit-section"
 import { NewUserSection } from "~/component/workspace/new-user-section"
 import { BillingSection } from "~/component/workspace/billing-section"
@@ -10,17 +6,7 @@ import { PaymentSection } from "~/component/workspace/payment-section"
 import { UsageSection } from "~/component/workspace/usage-section"
 import { KeySection } from "~/component/workspace/key-section"
 
-const getBillingInfo = query(async (workspaceID: string) => {
-  "use server"
-  return withActor(async () => {
-    return await Billing.get()
-  }, workspaceID)
-}, "billing.get")
-
 export default function () {
-  const params = useParams()
-  const balanceInfo = createAsync(() => getBillingInfo(params.id))
-
   return (
     <div data-page="workspace-[id]">
       <section data-component="title-section">
@@ -38,10 +24,7 @@ export default function () {
         <NewUserSection />
         <KeySection />
         <BillingSection />
-        <Show when={true}>
-          {/*<Show when={balanceInfo()?.reload}>*/}
-          <MonthlyLimitSection />
-        </Show>
+        <MonthlyLimitSection />
         <UsageSection />
         <PaymentSection />
       </div>