@voltro/cli 0.33.0 → 0.34.0

package/templates/apps/frontend-collab/src/pages/page.test.tsx

@@ -1,55 +1,69 @@
 // @vitest-environment jsdom
 //
-// `/` — the collaborative editor. It binds `useSubscription('app',
-// 'documents.list')` + two `useMutation`s ('documents.create',
-// 'documents.setBody') from @voltro/client, which we mock so the render is
-// deterministic. `@voltro/local-first` is NOT mocked — the editor's real local
-// CRDT handle decodes the seeded body and turns keystrokes into encoded updates,
-// which is the behaviour worth asserting.
-
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+// `/` — the collaborative editor, driven through `makeVoltroTestClient`
+// (`@voltro/testing/client`) rather than a hand-rolled `vi.mock('@voltro/client')`.
+//
+// WHY THE HARNESS HERE and not a mock. This page is stateful: a local CRDT
+// handle in a ref, seeded from the server body, folding every INCOMING body
+// back in. A `vi.mock` can return one snapshot per mount, so the fold —
+// the whole point of the page — was untestable, and the suite that replaced
+// this one never pushed a second value into a mounted tree. `setSubscription`
+// is a real server delta, so the last case below asserts convergence.
+//
+// Two other things fall out of it: the real `@voltro/client` hooks run (so a
+// change in their loading/error semantics is caught here instead of being
+// re-implemented by the mock), and the page can be imported statically —
+// `await import('./page')` only existed to sequence around `vi.mock`'s hoist.
+//
+// `@voltro/local-first` is NOT faked either: the editor's real CRDT handle
+// decodes the seeded body and turns keystrokes into encoded updates, which is
+// the behaviour worth asserting.
+
+import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { act, createElement, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { I18nProvider } from '@voltro/i18n'
-import { crdtText } from '@voltro/local-first'
+import { crdtText, type CrdtState } from '@voltro/local-first'
+import { makeVoltroTestClient, type VoltroTestClient } from '@voltro/testing/client'
 import enCatalog from '../locales/en'
+import IndexPage from './page'
 
-interface SubState {
-  data: unknown
-  revision?: number
-  error?: unknown
-}
-
-const useSubscription = vi.fn<() => SubState>()
-const createMutate = vi.fn<(input: unknown) => Promise<unknown>>()
-const setBodyMutate = vi.fn<(input: unknown) => Promise<unknown>>()
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
 
-// useMutation is called once per tag — dispatch to the right mock by tag.
-const useMutation = vi.fn((_api: unknown, tag: unknown) =>
-  tag === 'documents.create'
-    ? { mutate: createMutate, pending: false, error: undefined, data: undefined }
-    : { mutate: setBodyMutate, pending: false, error: undefined, data: undefined },
-)
+const LIST = 'documents.list'
 
-vi.mock('@voltro/client', () => ({
-  useSubscription: (...a: unknown[]) => useSubscription(...(a as [])),
-  useMutation: (...a: unknown[]) => useMutation(...(a as Parameters<typeof useMutation>)),
-}))
+let container: HTMLDivElement
+let root: Root
+let client: VoltroTestClient
 
-const { default: IndexPage } = await import('./page')
+/** A CRDT state holding `text`, from a fresh document. */
+const bodyWith = (text: string): CrdtState => crdtText().insert(0, text).encode()
 
-;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+/** A REMOTE edit derived from `base`, so merging it back converges instead of
+ *  interleaving two independently-created runs of the same characters. */
+const remoteEditOf = (base: CrdtState, at: number, insert: string): CrdtState =>
+  crdtText().merge(base).insert(at, insert).encode()
 
-let container: HTMLDivElement
-let root: Root
+const docRow = (over: Partial<{ id: string; title: string; body: CrdtState | null }> = {}) => ({
+  id: over.id ?? 'doc_1',
+  title: over.title ?? 'Shared document',
+  body: over.body ?? null,
+  tenantId: 'acme',
+  createdAt: new Date(0),
+})
 
-const render = (node: ReactNode): void => {
+const render = (): void => {
   container = document.createElement('div')
   document.body.appendChild(container)
   act(() => {
     root = createRoot(container)
     root.render(
-      createElement(I18nProvider, { locale: 'en', messages: enCatalog, defaultLocale: 'en', children: node }),
+      createElement(I18nProvider, {
+        locale: 'en',
+        messages: enCatalog,
+        defaultLocale: 'en',
+        children: createElement(client.Provider, null, createElement(IndexPage) as ReactNode),
+      }),
     )
   })
 }
@@ -62,26 +76,20 @@ const setTextarea = (el: HTMLTextAreaElement, value: string): void => {
   })
 }
 
-// A real encoded CRDT body seeded with `text`, exactly what the subscription
-// streams for a document that already has content.
-const bodyWith = (text: string): Uint8Array => crdtText().insert(0, text).encode()
-
-const docRow = (over: Partial<{ id: string; title: string; body: Uint8Array | null }> = {}) => ({
-  id: over.id ?? 'doc_1',
-  title: over.title ?? 'Shared document',
-  body: over.body ?? null,
-  tenantId: 'acme',
-  createdAt: new Date(0),
-})
+const textarea = (): HTMLTextAreaElement => container.querySelector('textarea') as HTMLTextAreaElement
+
+/** The harness with both writes wired. Handlers return void; the assertions
+ *  read `client.calls`, which records tag + input in order. */
+const harness = (subscriptions: Readonly<Record<string, unknown>> = {}): VoltroTestClient =>
+  makeVoltroTestClient({
+    subscriptions,
+    mutations: {
+      'documents.create': () => undefined,
+      'documents.setBody': () => undefined,
+    },
+  })
 
-beforeEach(() => {
-  useSubscription.mockReset()
-  createMutate.mockReset()
-  createMutate.mockResolvedValue(undefined)
-  setBodyMutate.mockReset()
-  setBodyMutate.mockResolvedValue(undefined)
-  useMutation.mockClear()
-})
+beforeEach(() => { client = harness() })
 
 afterEach(() => {
   if (root) act(() => root.unmount())
@@ -90,24 +98,25 @@ afterEach(() => {
 })
 
 describe('collab editor — subscription states', () => {
-  test('shows the loading hint before the first snapshot (data undefined)', () => {
-    useSubscription.mockReturnValue({ data: undefined, revision: -1 })
-    render(createElement(IndexPage))
+  test('shows the loading hint before the first snapshot', () => {
+    // A tag with NO fixture is the harness's cold state — the real thing a
+    // component sees before the first delta arrives.
+    render()
     expect(container.textContent).toContain('loading…')
     expect(container.querySelector('textarea')).toBeNull()
   })
 
   test('shows the empty state + create button once a snapshot arrives with no documents', () => {
-    useSubscription.mockReturnValue({ data: [], revision: 0 })
-    render(createElement(IndexPage))
+    client = harness({ [LIST]: [] })
+    render()
     expect(container.textContent).toContain('No document yet')
     expect(container.querySelector('button')).not.toBeNull()
     expect(container.querySelector('textarea')).toBeNull()
   })
 
   test('renders the error banner when the subscription errors', () => {
-    useSubscription.mockReturnValue({ data: undefined, error: 'boom', revision: -1 })
-    render(createElement(IndexPage))
+    render()
+    act(() => { client.failSubscription(LIST, 'boom') })
     expect(container.textContent).toContain('subscription error')
     expect(container.textContent).toContain('boom')
   })
@@ -115,36 +124,71 @@ describe('collab editor — subscription states', () => {
 
 describe('collab editor — create', () => {
   test('clicking Create document calls documents.create with the tenant + a title', async () => {
-    useSubscription.mockReturnValue({ data: [], revision: 0 })
-    render(createElement(IndexPage))
+    client = harness({ [LIST]: [] })
+    render()
     const button = container.querySelector('button') as HTMLButtonElement
     await act(async () => {
       button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
     })
-    expect(createMutate).toHaveBeenCalledTimes(1)
-    expect(createMutate).toHaveBeenCalledWith({ tenantId: 'acme', title: 'Shared document' })
+    expect(client.calls).toEqual([
+      { kind: 'mutation', tag: 'documents.create', input: { tenantId: 'acme', title: 'Shared document' } },
+    ])
   })
 })
 
 describe('collab editor — editing a document', () => {
   test('binds the textarea to the decoded CRDT body', () => {
-    useSubscription.mockReturnValue({ data: [docRow({ body: bodyWith('Hello') })], revision: 3 })
-    render(createElement(IndexPage))
-    const textarea = container.querySelector('textarea') as HTMLTextAreaElement
-    expect(textarea).not.toBeNull()
-    expect(textarea.value).toBe('Hello')
+    client = harness({ [LIST]: [docRow({ body: bodyWith('Hello') })] })
+    render()
+    expect(textarea()).not.toBeNull()
+    expect(textarea().value).toBe('Hello')
     expect(container.textContent).toContain('Shared document')
   })
 
   test('typing sends an encoded CRDT update via documents.setBody', () => {
-    useSubscription.mockReturnValue({ data: [docRow({ body: bodyWith('Hello') })], revision: 3 })
-    render(createElement(IndexPage))
-    const textarea = container.querySelector('textarea') as HTMLTextAreaElement
-    setTextarea(textarea, 'Hello!')
-
-    expect(setBodyMutate).toHaveBeenCalledTimes(1)
-    const arg = setBodyMutate.mock.calls[0]![0] as { id: string; update: unknown }
-    expect(arg.id).toBe('doc_1')
-    expect(arg.update).toBeInstanceOf(Uint8Array)
+    client = harness({ [LIST]: [docRow({ body: bodyWith('Hello') })] })
+    render()
+    setTextarea(textarea(), 'Hello!')
+
+    expect(client.calls).toHaveLength(1)
+    const call = client.calls[0]!
+    expect(call.tag).toBe('documents.setBody')
+    const input = call.input as { id: string; update: unknown }
+    expect(input.id).toBe('doc_1')
+    expect(input.update).toBeInstanceOf(Uint8Array)
+  })
+
+  // The case the hand-rolled mock could not express, and the page's whole
+  // reason to exist: a body edited in ANOTHER tab arrives as a delta, and the
+  // local handle folds it in without remounting the editor.
+  test('a remote edit pushed by the server converges into the open editor', () => {
+    const base = bodyWith('Hello')
+    client = harness({ [LIST]: [docRow({ body: base })] })
+    render()
+    expect(textarea().value).toBe('Hello')
+
+    act(() => {
+      client.setSubscription(LIST, [docRow({ body: remoteEditOf(base, 5, ' world') })])
+    })
+
+    expect(textarea().value).toBe('Hello world')
+    // A fold is not a write — nothing is echoed back to the server.
+    expect(client.calls).toEqual([])
+  })
+
+  test('a local edit survives a concurrent remote edit — both are in the merged text', () => {
+    const base = bodyWith('Hello')
+    client = harness({ [LIST]: [docRow({ body: base })] })
+    render()
+    setTextarea(textarea(), 'Hello!')
+    expect(textarea().value).toBe('Hello!')
+
+    // The other tab branched from the SAME base and appended elsewhere.
+    act(() => {
+      client.setSubscription(LIST, [docRow({ body: remoteEditOf(base, 0, 'Oh, ') })])
+    })
+
+    expect(textarea().value).toContain('Oh, ')
+    expect(textarea().value).toContain('!')
   })
 })

package/templates/apps/frontend-contact/package.json

@@ -15,21 +15,23 @@
   },
   "dependencies": {
     "@effect/platform": "^0.97.0",
-    "@voltro/cli": "0.33.0",
-    "@voltro/client": "0.33.0",
-    "@voltro/env": "0.33.0",
-    "@voltro/i18n": "0.33.0",
-    "@voltro/serverless": "0.33.0",
-    "@voltro/web": "0.33.0",
+    "@voltro/cli": "0.34.0",
+    "@voltro/client": "0.34.0",
+    "@voltro/env": "0.34.0",
+    "@voltro/i18n": "0.34.0",
+    "@voltro/serverless": "0.34.0",
+    "@voltro/web": "0.34.0",
     "effect": "^3.22.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.33.0",
+    "@voltro/devtools": "0.34.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.0",
     "typescript": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "vitest": "^4.1.10"
   }
 }

package/templates/apps/frontend-dashboard/package.json

@@ -12,20 +12,22 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.33.0",
-    "@voltro/client": "0.33.0",
-    "@voltro/env": "0.33.0",
-    "@voltro/i18n": "0.33.0",
-    "@voltro/ui-shadcn": "0.33.0",
-    "@voltro/web": "0.33.0",
+    "@voltro/cli": "0.34.0",
+    "@voltro/client": "0.34.0",
+    "@voltro/env": "0.34.0",
+    "@voltro/i18n": "0.34.0",
+    "@voltro/ui-shadcn": "0.34.0",
+    "@voltro/web": "0.34.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.33.0",
+    "@voltro/devtools": "0.34.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.0",
     "typescript": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "vitest": "^4.1.10"
   }
 }

package/templates/apps/frontend-docs/package.json

@@ -12,20 +12,22 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.33.0",
-    "@voltro/client": "0.33.0",
-    "@voltro/env": "0.33.0",
-    "@voltro/i18n": "0.33.0",
-    "@voltro/ui-shadcn": "0.33.0",
-    "@voltro/web": "0.33.0",
+    "@voltro/cli": "0.34.0",
+    "@voltro/client": "0.34.0",
+    "@voltro/env": "0.34.0",
+    "@voltro/i18n": "0.34.0",
+    "@voltro/ui-shadcn": "0.34.0",
+    "@voltro/web": "0.34.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.33.0",
+    "@voltro/devtools": "0.34.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.0",
     "typescript": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "vitest": "^4.1.10"
   }
 }

package/templates/apps/frontend-i18n/package.json

@@ -12,19 +12,21 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.33.0",
-    "@voltro/client": "0.33.0",
-    "@voltro/env": "0.33.0",
-    "@voltro/i18n": "0.33.0",
-    "@voltro/web": "0.33.0",
+    "@voltro/cli": "0.34.0",
+    "@voltro/client": "0.34.0",
+    "@voltro/env": "0.34.0",
+    "@voltro/i18n": "0.34.0",
+    "@voltro/web": "0.34.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.33.0",
+    "@voltro/devtools": "0.34.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.0",
     "typescript": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "vitest": "^4.1.10"
   }
 }

package/templates/apps/frontend-landing/package.json

@@ -12,20 +12,22 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@voltro/cli": "0.33.0",
-    "@voltro/client": "0.33.0",
-    "@voltro/env": "0.33.0",
-    "@voltro/i18n": "0.33.0",
-    "@voltro/ui-shadcn": "0.33.0",
-    "@voltro/web": "0.33.0",
+    "@voltro/cli": "0.34.0",
+    "@voltro/client": "0.34.0",
+    "@voltro/env": "0.34.0",
+    "@voltro/i18n": "0.34.0",
+    "@voltro/ui-shadcn": "0.34.0",
+    "@voltro/web": "0.34.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.33.0",
+    "@voltro/devtools": "0.34.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.0",
     "typescript": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "vitest": "^4.1.10"
   }
 }

package/templates/apps/frontend-portal/package.json

@@ -12,21 +12,23 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@{{projectName}}/api": "0.33.0",
-    "@voltro/cli": "0.33.0",
-    "@voltro/client": "0.33.0",
-    "@voltro/env": "0.33.0",
-    "@voltro/i18n": "0.33.0",
-    "@voltro/ui-shadcn": "0.33.0",
-    "@voltro/web": "0.33.0",
+    "@{{projectName}}/api": "0.34.0",
+    "@voltro/cli": "0.34.0",
+    "@voltro/client": "0.34.0",
+    "@voltro/env": "0.34.0",
+    "@voltro/i18n": "0.34.0",
+    "@voltro/ui-shadcn": "0.34.0",
+    "@voltro/web": "0.34.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.33.0",
+    "@voltro/devtools": "0.34.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.0",
     "typescript": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "vitest": "^4.1.10"
   }
 }

package/templates/apps/frontend-saas/app.config.ts

@@ -11,7 +11,9 @@
 //     `renderMode: 'ssr'` so the gate runs per request.
 //
 // The pages read the api live with `useSubscription` and write with
-// `useMutation` / `useAction`; the auth forms POST to the api's `/auth/*`.
+// `useMutation` / `useAction` — imported from `src/lib/api.ts`, which binds them
+// ONCE to this api's generated procedure map so every tag and every input/output
+// type is checked by the compiler. The auth forms POST to the api's `/auth/*`.
 import { defineEnv, envVar } from '@voltro/env'
 
 // Public, build-time env (baked into the bundle; read via `publicEnv`).
@@ -35,11 +37,13 @@ export default {
   // grow the app to more languages.
   locales:       ['en', 'de'] as const,
   defaultLocale: 'en'         as const,
-  // The api this dashboard consumes. The NAME ('app') is the lookup key the
-  // hooks + the loader's `query` use: `useSubscription('app', 'projects.list')`,
-  // `useMutation('app', 'projects.create')`, `query('session.me', {})`. Its
-  // port is auto-discovered from the api's own app.config.ts, and codegen pulls
-  // its typed rpc surface (including the plugins' `billing.*` / `/auth`).
+  // The api this dashboard consumes. The NAME ('app') is the lookup key — spelled
+  // ONCE, in `src/lib/api.ts`'s `createHooks<AppProcedures>('app')`, and then
+  // never again: pages call `useSubscription('projects.list')` /
+  // `useMutation('projects.create')`. (A loader still names the tag itself:
+  // `query('session.me', {})`.) The api's port is auto-discovered from its own
+  // app.config.ts, and codegen pulls its typed rpc surface (including the
+  // plugins' `billing.*` / `/auth`) into that same map.
   apis: {
     app: { package: '@{{projectName}}/api' },
   },

package/templates/apps/frontend-saas/package.json

@@ -12,21 +12,23 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@{{projectName}}/api": "0.33.0",
-    "@voltro/cli": "0.33.0",
-    "@voltro/client": "0.33.0",
-    "@voltro/env": "0.33.0",
-    "@voltro/i18n": "0.33.0",
-    "@voltro/ui-shadcn": "0.33.0",
-    "@voltro/web": "0.33.0",
+    "@{{projectName}}/api": "0.34.0",
+    "@voltro/cli": "0.34.0",
+    "@voltro/client": "0.34.0",
+    "@voltro/env": "0.34.0",
+    "@voltro/i18n": "0.34.0",
+    "@voltro/ui-shadcn": "0.34.0",
+    "@voltro/web": "0.34.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.33.0",
+    "@voltro/devtools": "0.34.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.0",
     "typescript": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "vitest": "^4.1.10"
   }
 }

package/templates/apps/frontend-saas/src/lib/api.ts

@@ -1,37 +1,32 @@
-// The row + payload shapes this dashboard reads off the api, kept LOCAL so the
-// pages are self-contained. They mirror the api's descriptor outputs
-// (`projects.list`, `invites.list`, `billing.subscription`); you can also
-// `import type` them from the api package — a type-only cross-app import is
-// browser-safe.
+// The TYPED hook surface for the `app` api — bound ONCE, here, and imported by
+// every page instead of `@voltro/client`.
+//
+// `AppProcedures` is emitted by codegen into the api's `rpcGroup.generated.ts`:
+// a type-level map of every rpc tag (the app's own AND the plugins', e.g.
+// `billing.*`) to the descriptor behind it. Feeding it to `createHooks` makes
+// the tag a literal union and the input/output types INFER:
+//
+//     const { data } = useSubscription('projects.list')   // rows, typed
+//     const create   = useMutation('projects.create')     // input + output typed
+//
+// So the row shapes this file used to declare by hand are gone. They were a
+// MIRROR of the api's descriptor outputs, kept in sync by nobody: the old
+// `useSubscription<ReadonlyArray<Project>>('app', 'projects.list')` asserted a
+// type nothing checked against the server, and a typo'd tag only showed up at
+// runtime. Both are compile errors now.
+//
+// `'app'` is the key this web app gave the api in `app.config.ts` → `apis`.
+// `import type` is erased, so the binding costs the browser bundle nothing.
+import { createHooks } from '@voltro/client'
+import type { AppProcedures } from '@{{projectName}}/api/rpcGroup'
 
-export interface Project {
-  readonly id: string
-  readonly name: string
-  readonly tenantId: string
-  readonly createdAt: string | Date
-}
-
-export interface Invite {
-  readonly id: string
-  readonly email: string
-  readonly status: string
-  readonly tenantId: string
-  readonly createdAt: string | Date
-}
-
-// `billing.subscription` streams `{ subscription: … | null }` — null before the
-// tenant has any subscription row (they're on the implicit free plan).
-export interface SubscriptionState {
-  readonly subscription: {
-    readonly plan: string
-    readonly status: string
-    readonly quantity: number
-    readonly currentPeriodEnd: string | null
-    readonly cancelAt: string | null
-  } | null
-}
+// Destructured on purpose — `react-hooks/rules-of-hooks` only treats a member
+// call as a hook when the object is PascalCase, so top-level `useX` identifiers
+// are what keep the React lint rules working at every call site.
+export const { useSubscription, useMutation, useAction } = createHooks<AppProcedures>('app')
 
-// The caller's resolved identity, from `session.me`. The SSR gate reads it.
+// The caller's resolved identity, from `session.me`. The SSR gate reads it, and
+// a LOADER is not a hook — it calls `ctx.query` — so this shape stays hand-written.
 export interface Identity {
   readonly type: string
   readonly id: string | null

package/templates/apps/frontend-saas/src/pages/dashboard/billing/page.tsx

@@ -6,10 +6,9 @@
 // row yet means the tenant is on the implicit free plan.
 import type { ReactNode } from 'react'
 import type { PageMeta } from '@voltro/web'
-import { useSubscription, useAction } from '@voltro/client'
 import { T, useT } from '@voltro/i18n'
 import { getCatalog } from '../../../locales/index'
-import type { SubscriptionState } from '../../../lib/api'
+import { useAction, useSubscription } from '../../../lib/api'
 
 export const renderMode = 'ssr' as const
 
@@ -17,13 +16,13 @@ export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
   title: getCatalog(locale)['meta.billing.title'],
 })
 
-interface CheckoutInput { plan: string; successUrl: string; cancelUrl: string }
-interface SeatsInput { quantity: number }
-
 export default function Billing(): ReactNode {
-  const { data } = useSubscription<SubscriptionState>('app', 'billing.subscription')
-  const checkout = useAction<CheckoutInput, { url: string }>('app', 'billing.startCheckout')
-  const seats = useAction<SeatsInput, unknown>('app', 'billing.changeSeats')
+  // `billing.*` is contributed by @voltro/plugin-billing and lands in the same
+  // generated map as the app's own procedures, so a plugin route is typed here
+  // exactly like a hand-written one — no local Checkout/Seats input mirrors.
+  const { data } = useSubscription('billing.subscription')
+  const checkout = useAction('billing.startCheckout')
+  const seats = useAction('billing.changeSeats')
 
   const sub = data?.subscription ?? null
   const planLabel = useT('billing.plan.free')