@stacksjs/defaults 0.70.358 → 0.70.363

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,16 +109,16 @@ 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.
 
 ### Crawl (whole-site browser audit)
 ```bash
-bun storage/framework/defaults/ai/skills/stacks-browse/scripts/browse.ts crawl <url> [--viewport 1280x900] [--max 500] [--path /extra-route] [--settle 350] [--progress]
+bun storage/framework/defaults/ai/skills/stacks-browse/scripts/browse.ts crawl <url> [--viewport 1280x900] [--max 500] [--path /extra-route] [--settle 350] [--progress] [--summary]
 ```
-Uses a fresh isolated page target per route, relaunching Chromium if its DevTools
-session exits during a long audit, while
+Uses a fresh isolated page target per route, waits for each target to fully close,
+and relaunches Chromium if its DevTools session or target lifecycle fails during a long audit, while
 following every same-origin link it discovers.
 The viewport is deterministic and defaults to `1280x900`; pass `--viewport 768x1024`
 to repeat the same route audit at a tablet breakpoint.
@@ -125,7 +126,8 @@ Each page is checked for a non-200 document, console exceptions, failed
 requests, and horizontal overflow. Repeat `--path` to seed routes that are not
 linked from the starting page. The command prints every crawled path and exits
 nonzero when any page fails. Add `--progress` to stream each completed page
-during a long audit.
+during a long audit. Add `--summary` to report totals and compact failure
+diagnostics without printing every visited path or overflowing element.
 
 ## Stacks-Specific QA
 

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

@@ -264,12 +264,38 @@ async function createPage(port: number): Promise<BrowserPage> {
   }
 }
 
-async function closePage(port: number, page: BrowserPage): Promise<void> {
-  page.cdp.close()
+async function closePage(port: number, page: BrowserPage): Promise<boolean> {
   try {
-    await fetch(`http://127.0.0.1:${port}/json/close/${encodeURIComponent(page.targetId)}`)
+    const response = await fetch(`http://127.0.0.1:${port}/json/close/${encodeURIComponent(page.targetId)}`)
+    if (!response.ok) {
+      page.cdp.close()
+      return false
+    }
+  }
+  catch {
+    page.cdp.close()
+    return false
+  }
+  page.cdp.close()
+
+  // Chromium acknowledges target closure before every renderer/helper has
+  // actually left the target list. Creating the next target immediately can
+  // accumulate closing renderers across a large crawl, eventually dropping
+  // Network and Runtime events. Wait for the target to disappear so each route
+  // starts with the isolation the command promises.
+  for (let attempt = 0; attempt < 40; attempt++) {
+    try {
+      const targets = await (await fetch(`http://127.0.0.1:${port}/json/list`)).json() as any[]
+      if (!targets.some(target => target.id === page.targetId))
+        return true
+    }
+    catch {
+      return false
+    }
+    await Bun.sleep(25)
   }
-  catch { /* the target or browser may already have closed */ }
+
+  return false
 }
 
 function kill(s: Session): void {
@@ -497,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
@@ -505,6 +531,7 @@ interface ScenarioStep {
   text?: string
   absent?: boolean
   focused?: boolean
+  expression?: string
   value?: string
   key?: string
   ms?: number
@@ -524,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
@@ -532,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'))
@@ -558,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)}
@@ -572,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'
@@ -586,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')
@@ -864,7 +908,11 @@ async function main() {
         }
       }
       const replacePage = async (): Promise<void> => {
-        await closePage(session.port, browserPage)
+        const closed = await closePage(session.port, browserPage)
+        if (!closed) {
+          kill(session)
+          session = await launch()
+        }
         browserPage = await createReplacementPage()
         cdp = browserPage.cdp
       }
@@ -1019,6 +1067,16 @@ async function main() {
         || page.consoleErrors.length > 0
         || page.failedRequests.length > 0
         || page.horizontalOverflowPx > 0)
+      const summaryOnly = Boolean(flags.summary)
+      const reportedFailures = summaryOnly
+        ? failures.map(page => ({
+            path: page.path,
+            status: page.status,
+            consoleErrorCount: page.consoleErrors.length,
+            failedRequestCount: page.failedRequests.length,
+            horizontalOverflowPx: page.horizontalOverflowPx,
+          }))
+        : failures
       console.log(JSON.stringify({
         start: start.href,
         browser: session.browser,
@@ -1026,8 +1084,9 @@ async function main() {
         crawled: pages.length,
         remaining: queue.length,
         max,
-        paths: pages.map(page => page.path),
-        failures,
+        failureCount: failures.length,
+        ...(!summaryOnly ? { paths: pages.map(page => page.path) } : {}),
+        failures: reportedFailures,
       }, null, 2))
       if (failures.length > 0)
         process.exitCode = 1

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/AI/AskAction.ts

@@ -1,16 +1,15 @@
+import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions'
 import { ask } from '@stacksjs/ai'
+import { log } from '@stacksjs/logging'
+import { response } from '@stacksjs/router'
 import { schema } from '@stacksjs/validation'
 
-// TODO: this should have been auto-generated
-interface Request {
-  question: string
-}
-
 export default new Action({
   name: 'AiAskAction',
   description: 'Ask AI',
   method: 'POST',
+  apiResponse: true,
 
   validations: {
     question: {
@@ -19,22 +18,18 @@ export default new Action({
     },
   },
 
-  async handle(request: Request) {
-    try {
-      const question = request.question
-
-      console.log(`Question received: ${question}`)
+  async handle(request: RequestInstance) {
+    await request.validate()
+    const question = String(request.get('question') || '').trim()
 
-      return {
+    try {
+      return response.json({
         data: await ask(question),
-      }
+      })
     }
     catch (error) {
-      console.error('Error:', error)
-
-      return {
-        error: 'An error occurred while processing your request.',
-      }
+      log.error('[ai] Ask request failed', { error })
+      return response.json({ message: 'The AI provider could not answer the question.' }, 502)
     }
   },
 })

package/app/Actions/AI/SummaryAction.ts

@@ -1,16 +1,15 @@
+import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions'
 import { summarize } from '@stacksjs/ai'
+import { log } from '@stacksjs/logging'
+import { response } from '@stacksjs/router'
 import { schema } from '@stacksjs/validation'
 
-// TODO: this should have been auto-generated
-interface Request {
-  text: string
-}
-
 export default new Action({
   name: 'AiSummaryAction',
   description: 'Summary AI',
   method: 'POST',
+  apiResponse: true,
 
   validations: {
     text: {
@@ -19,22 +18,18 @@ export default new Action({
     },
   },
 
-  async handle(request: Request) {
-    try {
-      const text = request.text
-
-      console.log(`Text received: ${text}`)
+  async handle(request: RequestInstance) {
+    await request.validate()
+    const text = String(request.get('text') || '').trim()
 
-      return {
+    try {
+      return response.json({
         data: await summarize(text),
-      }
+      })
     }
     catch (error) {
-      console.error('Error:', error)
-
-      return {
-        error: 'An error occurred while processing your request.',
-      }
+      log.error('[ai] Summary request failed', { error })
+      return response.json({ message: 'The AI provider could not summarize the text.' }, 502)
     }
   },
 })

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/app/Actions/LogAction.ts

@@ -1,15 +1,16 @@
+import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions'
 import { log } from '@stacksjs/logging'
+import { response } from '@stacksjs/router'
 import { schema } from '@stacksjs/validation'
 
-interface Request {
-  message: string
-  level: 'info' | 'warn' | 'error'
-}
+type LogLevel = 'info' | 'warn' | 'error'
 
 export default new Action({
   name: 'Dummy Logger',
   description: 'This action is used to demo how to POST to a server and upon success, log a message.',
+  method: 'POST',
+  apiResponse: true,
 
   // the request object is optional, but if it is provided, it will be used for validation
   validations: {
@@ -29,14 +30,13 @@ export default new Action({
     },
   },
 
-  // handle(request: { message: string, level: 'info' | 'warn' | 'error' }) {
-  handle(request?: Request) {
-    if (!request)
-      return 'No request was provided.'
+  async handle(request: RequestInstance) {
+    await request.validate()
 
-    // TODO: need to validate with ts-validation
-    log[request.level](request.message)
+    const message = String(request.get('message') || '').trim()
+    const level = String(request.get('level')) as LogLevel
+    log[level](message)
 
-    return `Logged "${request.message}" at "${request.level}" level`
+    return response.json({ level, message: `Logged at ${level} level.` })
   },
 })

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.70.358",
+  "version": "0.70.363",
   "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.358",
+  "version": "0.70.363",
   "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>