@stacksjs/defaults 0.70.362 → 0.70.365

package/ai/skills/stacks-browse/SKILL.md

@@ -101,6 +101,7 @@ Extracts headings, links (`text -> href`), buttons, forms (action + field count)
 bun storage/framework/defaults/ai/skills/stacks-browse/scripts/browse.ts scenario <url> \
   --step '{"action":"click","selector":"button[data-open]"}' \
   --step '{"action":"focus","selector":"input[name=name]"}' \
+  --step '{"action":"evaluate","expression":"window.__stxDevtools?.stats()"}' \
   --step '{"action":"fill","selector":"input[name=name]","value":"Example"}' \
   --step '{"action":"click","selector":"button[type=submit]"}' \
   --step '{"action":"assert","selector":"main","text":"Saved"}' \
@@ -108,7 +109,7 @@ bun storage/framework/defaults/ai/skills/stacks-browse/scripts/browse.ts scenari
   --out storage/framework/runtime/shots/scenario.png
 ```
 
-Steps run in order within one isolated browser page, preserving reactive STX state and SPA navigation. Supported actions are `click`, `fill`, `focus`, `press`, `wait`, and `assert`. Each step is a JSON object passed through a repeatable `--step` flag. Click and focus steps may include `text` to select the matching control from their CSS selector. The command reports every completed step, the final URL and page text, console messages, console exceptions, failed requests, and an optional screenshot. It exits nonzero when the scenario assertion, browser console, or network fails.
+Steps run in order within one isolated browser page, preserving reactive STX state and SPA navigation. Supported actions are `click`, `fill`, `focus`, `press`, `wait`, `evaluate`, and `assert`. Each step is a JSON object passed through a repeatable `--step` flag. Click and focus steps may include `text` to select the matching control from their CSS selector. They scroll matched controls into view before interacting, including controls inside horizontal overflow regions. Evaluate steps run a JavaScript expression in the isolated page and return its serialized value, which is useful for inspecting STX signals and DevTools state between interactions. The command reports every completed step, the final URL and page text, console messages, console exceptions, failed requests, and an optional screenshot. It exits nonzero when the scenario assertion, evaluation, browser console, or network fails.
 Use `{"action":"assert","selector":"...","absent":true}` to verify that an element is missing or hidden after an interaction.
 Use `{"action":"assert","selector":"button","text":"Save","focused":true}` to verify keyboard focus and focus restoration.
 

package/ai/skills/stacks-browse/scripts/browse.ts

@@ -523,7 +523,7 @@ function parseViewport(value: string | undefined): { w: number, h: number } {
   return { w, h }
 }
 
-type ScenarioAction = 'assert' | 'click' | 'fill' | 'focus' | 'press' | 'wait'
+type ScenarioAction = 'assert' | 'click' | 'evaluate' | 'fill' | 'focus' | 'press' | 'wait'
 
 interface ScenarioStep {
   action: ScenarioAction
@@ -531,6 +531,7 @@ interface ScenarioStep {
   text?: string
   absent?: boolean
   focused?: boolean
+  expression?: string
   value?: string
   key?: string
   ms?: number
@@ -550,7 +551,7 @@ function parseScenarioStep(value: string): ScenarioStep {
     throw new TypeError('Each scenario step must be a JSON object.')
 
   const step = parsed as Record<string, unknown>
-  if (!['assert', 'click', 'fill', 'focus', 'press', 'wait'].includes(String(step.action)))
+  if (!['assert', 'click', 'evaluate', 'fill', 'focus', 'press', 'wait'].includes(String(step.action)))
     throw new TypeError(`Unsupported scenario action: ${String(step.action)}`)
 
   const action = step.action as ScenarioAction
@@ -558,6 +559,8 @@ function parseScenarioStep(value: string): ScenarioStep {
     throw new TypeError(`Scenario action "${action}" requires a selector.`)
   if (action === 'fill' && typeof step.value !== 'string')
     throw new TypeError('Scenario action "fill" requires a string value.')
+  if (action === 'evaluate' && typeof step.expression !== 'string')
+    throw new TypeError('Scenario action "evaluate" requires an expression.')
   if (step.absent !== undefined && (action !== 'assert' || typeof step.absent !== 'boolean'))
     throw new TypeError('Scenario "absent" is a boolean supported only by assert actions.')
   if (step.focused !== undefined && (action !== 'assert' || typeof step.focused !== 'boolean'))
@@ -584,6 +587,17 @@ async function runScenarioStep(cdp: Cdp, step: ScenarioStep): Promise<Record<str
     return { action: step.action, key, ok: true }
   }
 
+  if (step.action === 'evaluate') {
+    const result = await cdp.send('Runtime.evaluate', {
+      expression: step.expression,
+      returnByValue: true,
+      awaitPromise: true,
+    })
+    if (result.exceptionDetails)
+      throw new Error(result.exceptionDetails.exception?.description || result.exceptionDetails.text || 'Evaluation failed')
+    return { action: step.action, value: result.result?.value, ok: true }
+  }
+
   const result = await cdp.send('Runtime.evaluate', {
     expression: `(() => {
       const step = ${JSON.stringify(step)}
@@ -598,6 +612,8 @@ async function runScenarioStep(cdp: Cdp, step: ScenarioStep): Promise<Record<str
       if (!element)
         return { ok: false, error: 'Element not found', selector: step.selector }
 
+      if (step.action === 'click' || step.action === 'focus')
+        element.scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' })
       const rect = element.getBoundingClientRect()
       const style = getComputedStyle(element)
       const visible = rect.width > 0 && rect.height > 0 && style.visibility !== 'hidden' && style.display !== 'none'
@@ -612,6 +628,8 @@ async function runScenarioStep(cdp: Cdp, step: ScenarioStep): Promise<Record<str
       if (step.action === 'click') {
         if (element.disabled || element.getAttribute('aria-disabled') === 'true')
           return { ok: false, error: 'Element is disabled', selector: step.selector }
+        if (rect.right <= 0 || rect.bottom <= 0 || rect.left >= innerWidth || rect.top >= innerHeight)
+          return { ok: false, error: 'Element could not be scrolled into the viewport', selector: step.selector }
       }
       else if (step.action === 'focus') {
         if (typeof element.focus !== 'function')

package/ai/skills/stacks-dashboard/SKILL.md

@@ -153,6 +153,9 @@ is hidden. Do not create separate `/deployments/scripts` or
 - Use `tag="a"` whenever `href` is reactive, for example
   `<Button tag="a" :href="detailsPath()">Open details</Button>`. Server rendering
   cannot infer an anchor from a client-only reactive URL.
+- When a submit action lives in a shared Modal footer, give the form a stable
+  `id` and associate the action with `<Button type="submit" form="form-id">`.
+  Do not duplicate the footer inside the form or use script-driven submission.
 - Prefer component events and named slots over string callback props or
   `data-action` markers. A `data-action` attribute is only valid when an active
   host integration consumes that exact action.
@@ -325,6 +328,7 @@ the canonical primary action style across the dashboard.
 </Button>
 
 <Button :loading="saving()" type="submit">Save changes</Button>
+<Button :loading="saving()" type="submit" form="settings-form">Save from modal footer</Button>
 <Button variant="secondary" @click="close">Cancel</Button>
 <Button :loading="deleting()" variant="danger" @click="destroy">Delete</Button>
 <Button tag="a" :href="exportHref()" :download="exportFilename()">Export</Button>

package/app/Actions/Auth/LogoutAction.ts

@@ -1,5 +1,5 @@
 import { Action } from '@stacksjs/actions'
-import { Auth } from '@stacksjs/auth'
+import { Auth, clearAuthCookie } from '@stacksjs/auth'
 import { response } from '@stacksjs/router'
 
 export default new Action({
@@ -7,10 +7,17 @@ export default new Action({
   description: 'Logout from the application',
   method: 'POST',
   async handle() {
+    // `Auth.logout()` resolves the token from the Authorization header or the
+    // auth cookie, so this revokes the session either way.
     await Auth.logout()
 
-    return response.json({
-      message: 'Successfully logged out',
-    })
+    // Clearing is separate from revoking, and both are needed. Revoking alone
+    // leaves the browser sending a dead cookie on every request; clearing alone
+    // leaves a copied cookie valid for the token's whole lifetime, which would
+    // make "log out on a shared computer" mean only "hide the key".
+    return response.json(
+      { message: 'Successfully logged out' },
+      { headers: { 'Set-Cookie': clearAuthCookie() } },
+    )
   },
 })

package/app/Actions/Auth/LogoutAllAction.ts

@@ -1,5 +1,5 @@
 import { Action } from '@stacksjs/actions'
-import { revokeAllTokens, sessionDestroyAll } from '@stacksjs/auth'
+import { clearAuthCookie, revokeAllTokens, sessionDestroyAll } from '@stacksjs/auth'
 import { response } from '@stacksjs/router'
 
 export default new Action({
@@ -21,8 +21,12 @@ export default new Action({
     await revokeAllTokens(Number(user.id))
     await sessionDestroyAll(Number(user.id))
 
-    return response.json({
-      message: 'Successfully logged out from all devices',
-    })
+    // This device included: its cookie carries one of the tokens just revoked,
+    // so leaving it in place means the browser keeps presenting a dead
+    // credential on every request.
+    return response.json(
+      { message: 'Successfully logged out from all devices' },
+      { headers: { 'Set-Cookie': clearAuthCookie() } },
+    )
   },
 })

package/app/Actions/Dashboard/Models/ModelShowAction.ts

@@ -3,7 +3,7 @@ import { Action } from '@stacksjs/actions'
 import { response as routerResponse } from '@stacksjs/router'
 import { loadModelIfExists, safeGet } from '../../../../resources/functions/dashboard/data'
 import { dashboardOperationalError } from '../dashboard-response'
-import { isValidModelSlug, type ModelCreateField, type ModelWriteCapabilities, modelCreateFields, modelSchemaColumns, modelWriteCapabilities, slugToPascal } from './model-write'
+import { isValidModelSlug, type ModelCreateField, type ModelWriteCapabilities, modelCreateFields, modelSchemaColumns, modelWritableColumns, modelWriteCapabilities, slugToPascal } from './model-write'
 
 /**
  * `GET /api/dashboard/models/{slug}` (stacksjs/stacks#1838).
@@ -53,6 +53,7 @@ interface ResponseShape {
   writable: boolean
   writeCapabilities: ModelWriteCapabilities
   createFields: ModelCreateField[]
+  updateColumns: string[]
   error: string | null
 }
 
@@ -214,6 +215,7 @@ export default new Action({
       writable: false,
       writeCapabilities: { create: false, update: false, destroy: false },
       createFields: [],
+      updateColumns: [],
       error: null,
     }
 
@@ -296,6 +298,7 @@ export default new Action({
     response.writeCapabilities = modelWriteCapabilities(Model)
     response.writable = Object.values(response.writeCapabilities).some(Boolean)
     response.createFields = response.writeCapabilities.create ? modelCreateFields(Model) : []
+    response.updateColumns = response.writeCapabilities.update ? modelWritableColumns(Model) : []
     response.displayColumns = response.columns.filter(col => !col.startsWith('_'))
     response.columnMeta = response.displayColumns.map(name => ({
       name,

package/app/Actions/Dashboard/Models/model-write.ts

@@ -204,6 +204,11 @@ export function modelCreateFields(Model: any): ModelCreateField[] {
   })
 }
 
+/** Physical database columns accepted by the model's generic update API. */
+export function modelWritableColumns(Model: any): string[] {
+  return modelCreateFields(Model).map(field => snakeCase(field.name))
+}
+
 function normalizeModelValue(type: ModelCreateField['type'], value: unknown): unknown {
   if (type === 'number') {
     if (value === '' || value === null || value === undefined)

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.70.362",
+  "version": "0.70.365",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.362",
+  "version": "0.70.365",
   "description": "The complete managed Stacks application scaffold, including runtime defaults, AI guidance, editor metadata, and npm-backed project support files.",
   "author": "Chris Breuer",
   "license": "MIT",

package/resources/components/Buttons/Counter.stx

@@ -24,5 +24,5 @@ document.querySelector('[data-counter]')?.addEventListener('click', function() {
   if (countEl) {
     countEl.textContent = parseInt(countEl.textContent || '0') + 1
   }
-}
+})
 </script>

package/resources/components/Buttons/ToggleDark.stx

@@ -7,5 +7,5 @@
 <script client>
 document.querySelector('[data-toggle-dark]')?.addEventListener('click', function() {
   document.documentElement.classList.toggle('dark')
-}
+})
 </script>

package/resources/components/Dashboard/App/RequestDetailsDialog.stx

@@ -0,0 +1,42 @@
+<script client>
+interface RequestRow {
+  id: number
+  method: string
+  path: string
+  status: number
+  durationMs: number
+  ipAddress: string
+  memoryUsageMb: number
+  userAgent: string
+  errorMessage: string
+  createdAt: string
+}
+
+const request = useReactiveProp('request', null as RequestRow | null)
+const emit = defineEmits()
+
+function formatDate(value: string | undefined): string {
+  if (!value)
+    return 'Unknown'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
+}
+</script>
+
+<Modal
+  :isOpen="Boolean(request())"
+  :title="request() ? 'Request #' + request()?.id : 'Request details'"
+  size="lg"
+  @close="emit('close')"
+>
+  <p class="mb-5 break-all font-mono text-neutral-500 text-sm dark:text-neutral-400">{{ request()?.method }} {{ request()?.path }}</p>
+  <dl class="grid gap-4 grid-cols-1 sm:grid-cols-2 text-sm">
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Status</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ request()?.status }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Duration</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ request()?.durationMs?.toFixed(1) || '0.0' }} ms</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">IP address</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ request()?.ipAddress || 'Not recorded' }}</dd></div>
+    <div><dt class="text-neutral-500 dark:text-neutral-400">Memory usage</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ request()?.memoryUsageMb || 0 }} MB</dd></div>
+    <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">Recorded</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ formatDate(request()?.createdAt) }}</dd></div>
+    <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">User agent</dt><dd class="mt-1 break-words text-neutral-900 dark:text-white">{{ request()?.userAgent || 'Not recorded' }}</dd></div>
+    <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">Error</dt><dd class="mt-1 break-words text-neutral-900 dark:text-white">{{ request()?.errorMessage || 'No error recorded' }}</dd></div>
+  </dl>
+</Modal>

package/resources/components/Dashboard/App/RequestsOverview.stx

@@ -229,25 +229,5 @@ onMount(() => {
     </div>
   </Card>
 
-  <div :if="selectedRequest()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/50 dashboard-modal-layer" @click.self="closeInspector">
-    <div role="dialog" aria-modal="true" aria-labelledby="request-detail-title" class="p-6 max-w-2xl w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
-      <div class="flex gap-4 items-start justify-between">
-        <div>
-          <h2 id="request-detail-title" class="font-semibold text-lg text-neutral-900 dark:text-white">Request #{{ selectedRequest()?.id }}</h2>
-          <p class="mt-1 break-all font-mono text-neutral-500 text-sm dark:text-neutral-400">{{ selectedRequest()?.method }} {{ selectedRequest()?.path }}</p>
-        </div>
-        <Button variant="ghost" iconOnly ariaLabel="Close request details" @click="closeInspector">
-          <span class="h-5 w-5 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-      <dl class="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-6 text-sm">
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Status</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.status }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Duration</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.durationMs.toFixed(1) }} ms</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">IP address</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.ipAddress || 'Not recorded' }}</dd></div>
-        <div><dt class="text-neutral-500 dark:text-neutral-400">Memory usage</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.memoryUsageMb || 0 }} MB</dd></div>
-        <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">User agent</dt><dd class="mt-1 break-words text-neutral-900 dark:text-white">{{ selectedRequest()?.userAgent || 'Not recorded' }}</dd></div>
-        <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">Error</dt><dd class="mt-1 break-words text-neutral-900 dark:text-white">{{ selectedRequest()?.errorMessage || 'No error recorded' }}</dd></div>
-      </dl>
-    </div>
-  </div>
+  <RequestDetailsDialog :request="selectedRequest()" @close="closeInspector" />
 </div>

package/resources/components/Dashboard/Auth/AccessTokenCreateDialog.stx

@@ -0,0 +1,155 @@
+<script client>
+interface ScopeOption {
+  name: string
+  description: string
+}
+
+interface TokenDraft {
+  name: string
+  scopes: string[]
+  expiresInMinutes: number
+}
+
+const availableScopes: ScopeOption[] = [
+  { name: 'read', description: 'Read application resources' },
+  { name: 'write', description: 'Create and update resources' },
+  { name: 'delete', description: 'Delete application resources' },
+  { name: 'deploy', description: 'Run deployment operations' },
+  { name: 'admin', description: 'Use administrative operations' },
+]
+
+const open = useReactiveProp('open', false)
+const busy = useReactiveProp('busy', false)
+const createdToken = useReactiveProp('createdToken', '')
+const message = useReactiveProp('message', '')
+const error = useReactiveProp('error', '')
+const tokenName = state('')
+const expiryMinutes = state('10080')
+const selectedScopes = state<string[]>(['read'])
+const localError = state('')
+const copied = state(false)
+const emit = defineEmits()
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    tokenName.set('')
+    expiryMinutes.set('10080')
+    selectedScopes.set(['read'])
+    localError.set('')
+    copied.set(false)
+  }
+  wasOpen = isOpen
+})
+
+function toggleScope(event: Event, scope: string): void {
+  const enabled = (event.target as HTMLInputElement).checked
+  selectedScopes.set(enabled
+    ? [...new Set([...selectedScopes(), scope])]
+    : selectedScopes().filter(item => item !== scope))
+}
+
+function submit(): void {
+  localError.set('')
+  if (!tokenName().trim()) {
+    localError.set('Enter a name for this token.')
+    return
+  }
+  if (selectedScopes().length === 0) {
+    localError.set('Select at least one scope.')
+    return
+  }
+
+  const draft: TokenDraft = {
+    name: tokenName().trim(),
+    scopes: [...selectedScopes()],
+    expiresInMinutes: Number(expiryMinutes()),
+  }
+  emit('submit', draft)
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+async function copyToken(): Promise<void> {
+  localError.set('')
+  try {
+    await globalThis.navigator.clipboard.writeText(createdToken())
+    copied.set(true)
+  }
+  catch {
+    localError.set('Clipboard access is unavailable. Select and copy the token manually.')
+  }
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  title="Create Access Token"
+  description="Grant only the scopes this integration needs."
+  :closable="!busy()"
+  @close="close"
+>
+  <div :if="createdToken()" class="space-y-4">
+    <div role="status" class="px-4 py-3 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 rounded-lg dark:border-amber-900">
+      {{ message() }}
+    </div>
+    <label class="block">
+      <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">New token</span>
+      <textarea readonly rows="4" aria-label="New access token" class="block mt-2 p-3 w-full font-mono text-neutral-900 text-xs dark:text-white bg-neutral-50 dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700">{{ createdToken() }}</textarea>
+    </label>
+  </div>
+
+  <form :if="!createdToken()" id="access-token-create-form" class="space-y-5" @submit.prevent="submit">
+    <label class="block">
+      <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Token name</span>
+      <input x-model="tokenName" name="name" type="text" maxlength="255" required placeholder="CI deployment" class="block mt-2 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
+    </label>
+
+    <label class="block">
+      <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Expires after</span>
+      <select x-model="expiryMinutes" name="expires_in_minutes" class="block mt-2 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
+        <option value="60">1 hour</option>
+        <option value="1440">1 day</option>
+        <option value="10080">7 days</option>
+        <option value="43200">30 days</option>
+      </select>
+    </label>
+
+    <fieldset>
+      <legend class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Scopes</legend>
+      <div class="grid gap-2 grid-cols-1 sm:grid-cols-2 mt-2">
+        <label :for="scope in availableScopes" class="flex gap-3 items-start p-3 border border-neutral-200 rounded-lg dark:border-neutral-700">
+          <input name="scopes" type="checkbox" :value="scope.name" :checked="selectedScopes().includes(scope.name)" class="mt-0.5 h-4 w-4 text-blue-600 rounded" @change="toggleScope($event, scope.name)">
+          <span>
+            <span class="block font-medium text-neutral-900 text-sm dark:text-white">{{ scope.name }}</span>
+            <span class="block mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">{{ scope.description }}</span>
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </form>
+
+  <div :if="localError() || error()" role="alert" class="mt-4 px-3 py-2 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-lg">
+    {{ localError() || error() }}
+  </div>
+
+  <template #footer>
+    <div :if="createdToken()" class="flex gap-2 justify-end w-full">
+      <Button variant="secondary" @click="close">Done</Button>
+      <Button @click="copyToken">
+        <span class="h-4 w-4 i-hugeicons-copy-01"></span>
+        {{ copied() ? 'Copied' : 'Copy Token' }}
+      </Button>
+    </div>
+    <div :if="!createdToken()" class="flex gap-2 justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button type="submit" form="access-token-create-form" :loading="busy()">
+        {{ busy() ? 'Creating...' : 'Create Token' }}
+      </Button>
+    </div>
+  </template>
+</Modal>