zen: add usage section

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}/usage`} activeClass="active" data-nav-button>
+                {i18n.t("workspace.nav.usage")}
+              </A>
               <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
                 {i18n.t("workspace.nav.apiKeys")}
               </A>
@@ -41,6 +44,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}/usage`} activeClass="active" data-nav-button>
+                {i18n.t("workspace.nav.usage")}
+              </A>
               <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
                 {i18n.t("workspace.nav.apiKeys")}
               </A>

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

@@ -2,10 +2,8 @@ import { Match, Show, Switch, 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 { GraphSection } from "./graph-section"
 import { IconLogo } from "~/component/icon"
 import { querySessionInfo, queryBillingInfo, createCheckoutUrl, formatBalance } from "../common"
 import { useI18n } from "~/context/i18n"
@@ -73,14 +71,10 @@ export default function () {
 
       <div data-slot="sections">
         <NewUserSection />
-        <Show when={userInfo()?.isAdmin}>
-          <GraphSection />
-        </Show>
         <ModelSection />
         <Show when={userInfo()?.isAdmin}>
           <ProviderSection />
         </Show>
-        <UsageSection />
       </div>
     </div>
   )

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

@@ -0,0 +1,21 @@
+import { Show } from "solid-js"
+import { createAsync, useParams } from "@solidjs/router"
+import { GraphSection } from "./graph-section"
+import { UsageSection } from "./usage-section"
+import { querySessionInfo } from "../../common"
+
+export default function () {
+  const params = useParams()
+  const user = createAsync(() => querySessionInfo(params.id!))
+
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <Show when={user()?.isAdmin}>
+          <GraphSection />
+        </Show>
+        <UsageSection />
+      </div>
+    </div>
+  )
+}

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

@@ -1,7 +1,7 @@
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { createAsync, query, useParams } from "@solidjs/router"
 import { createMemo, For, Show, Switch, Match, createEffect, createSignal } from "solid-js"
-import { formatDateUTC, formatDateForTable } from "../common"
+import { formatDateUTC, formatDateForTable } from "../../common"
 import { withActor } from "~/context/auth.withActor"
 import { IconChevronLeft, IconChevronRight, IconBreakdown } from "~/component/icon"
 import styles from "./usage-section.module.css"