@stacksjs/defaults 0.75.264 → 0.75.267

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

@@ -37,6 +37,8 @@ A candidate is validated with `--version` before use, so a dead wrapper (e.g. a
 shim pointing at an uninstalled `.app`) is skipped automatically. If none launch, it tells
 you to `brew install --cask chromium` or set `BROWSE_BROWSER`.
 
+Startup waits up to 15 seconds for the running browser's valid DevTools port. An exited process or expired deadline fails launch; page readiness and scenario assertions have separate budgets.
+
 ## Default Stacks dev URLs
 
 - Frontend: `http://localhost:3000`

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

@@ -174,6 +174,28 @@ class Cdp {
 
 interface Session { proc: ReturnType<typeof spawn>, port: number, userDataDir: string, browser: string }
 
+export async function waitForBrowserPort(proc: { exitCode: number | null }, portFile: string, timeoutMs: number): Promise<number | null> {
+  if (!Number.isSafeInteger(timeoutMs) || timeoutMs <= 0 || timeoutMs > 30_000)
+    throw new TypeError('Browser startup timeout must be an integer between 1 and 30000.')
+  const deadline = performance.now() + timeoutMs
+  while (performance.now() < deadline && proc.exitCode === null) {
+    try {
+      const line = readFileSync(portFile, 'utf8').split('\n')[0]?.trim()
+      const port = Number(line)
+      if (Number.isInteger(port) && port > 0 && port <= 65535) {
+        if (performance.now() >= deadline || proc.exitCode !== null) return null
+        return port
+      }
+    }
+    catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error
+    }
+    const remaining = deadline - performance.now()
+    if (remaining > 0) await Bun.sleep(Math.min(50, remaining))
+  }
+  return null
+}
+
 async function tryLaunch(browser: string): Promise<Session | null> {
   const userDataDir = join(tmpdir(), `stacks-browse-${process.pid}-${Math.floor(Number(process.hrtime.bigint() % 1000000n))}`)
   mkdirSync(userDataDir, { recursive: true })
@@ -196,18 +218,19 @@ async function tryLaunch(browser: string): Promise<Session | null> {
 
   // Chromium writes the chosen port to <user-data-dir>/DevToolsActivePort.
   const portFile = join(userDataDir, 'DevToolsActivePort')
-  for (let i = 0; i < 80; i++) {
-    if (existsSync(portFile)) {
-      const line = readFileSync(portFile, 'utf8').split('\n')[0]?.trim()
-      if (line)
-        return { proc, port: Number(line), userDataDir, browser }
+  let port: number | null = null
+  try {
+    port = await waitForBrowserPort(proc, portFile, 15_000)
+    if (port !== null) return { proc, port, userDataDir, browser }
+  }
+  finally {
+    if (port === null) {
+      try { proc.kill() }
+      catch { /* ignore */ }
+      try { rmSync(userDataDir, { recursive: true, force: true }) }
+      catch { /* a failed launch must not mask the next browser candidate */ }
     }
-    await Bun.sleep(50)
   }
-  try { proc.kill() }
-  catch { /* ignore */ }
-  try { rmSync(userDataDir, { recursive: true, force: true }) }
-  catch { /* a failed launch must not mask the next browser candidate */ }
   return null
 }
 

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

@@ -508,6 +508,38 @@ History is chronological, with `has_more` and a `before` message-id cursor.
 Receipts acknowledge only messages through the id actually displayed.
 `MessagingError.status` provides safe HTTP statuses for application handlers.
 
+### Attachments
+
+`send(id, body, retryKey, attachments?)` records files the application has
+already stored. The trait keeps a reference, never bytes: `file` is the
+application's own name for the upload (a disk path, a bucket key, an id), and
+`type`, `size`, `width` and `height` are optional. Resolving and authorizing
+the file stays with the application, so a disk, a bucket and a CDN look the
+same from here.
+
+```ts
+import type { DirectMessageAttachment } from '@stacksjs/chat'
+
+const photo: DirectMessageAttachment = { file: upload.key, type: 'image/jpeg', size: upload.size, width: 1200, height: 900 }
+await messenger.send(thread.id, '', retryKey, [photo])
+```
+
+- A photo with no caption is a message: `body` may be empty when there is at
+  least one attachment, and only then.
+- `message.attachments` is always an array, `[]` for text. Rows written before
+  the column existed read as `[]`.
+- A retry key covers the attachments too. The same key with a different file
+  is a different message and returns 409, rather than silently keeping the
+  first photo.
+- At most 10 attachments, 4000 characters once serialised. Keys the trait does
+  not know are dropped, so the column cannot become a second message body.
+- The column is `chat_messages.attachments`, added by `buddy migrate` to a
+  database created before it. A database that has not migrated yet still sends
+  text.
+- Notification previews are the application's to word: `onMessageSent`
+  receives the message with its attachments, so a photo with no caption can
+  read as "Sent a photo" rather than as an empty line.
+
 For the UI, STX ships `ChatInbox`, `ChatMessage`, and `ChatUnreadBadge` in
 `@stacksjs/components`. Browser stores import `createChat` from
 `@stacksjs/components/chat` and inject their authenticated HTTP transport.

package/ai/skills/stacks-native/CATALOG.md

@@ -18,10 +18,10 @@ Browser runtime bindings are documented separately in `stacks-auto-imports`.
 | `@stacksjs/api` | [`stacks-api`](../stacks-api/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/api/src/index.ts) | 9 |
 | `@stacksjs/arrays` | [`stacks-arrays`](../stacks-arrays/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/arrays/src/index.ts) | 6 |
 | `@stacksjs/audio` | [`stacks-audio`](../stacks-audio/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/audio/src/index.ts) | 2 |
-| `@stacksjs/auth` | [`stacks-auth`](../stacks-auth/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/index.ts) | 119 |
+| `@stacksjs/auth` | [`stacks-auth`](../stacks-auth/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/index.ts) | 120 |
 | `@stacksjs/browser` | [`stacks-browser`](../stacks-browser/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/browser/src/index.ts) | 8 |
 | `@stacksjs/browser-extension` | [`stacks-browser-extension`](../stacks-browser-extension/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/browser-extension/src/index.ts) | 7 |
-| `@stacksjs/buddy` | [`stacks-buddy`](../stacks-buddy/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/src/index.ts) | 162 |
+| `@stacksjs/buddy` | [`stacks-buddy`](../stacks-buddy/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/src/index.ts) | 164 |
 | `@stacksjs/build` | [`stacks-build`](../stacks-build/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/build/src/index.ts) | 3 |
 | `@stacksjs/cache` | [`stacks-cache`](../stacks-cache/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/cache/src/index.ts) | 14 |
 | `@stacksjs/calendar-api` | [`stacks-calendar`](../stacks-calendar/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/calendar-api/src/index.ts) | 2 |
@@ -65,7 +65,7 @@ Browser runtime bindings are documented separately in `stacks-auto-imports`.
 | `@stacksjs/newsletter` | [`stacks-newsletter`](../stacks-newsletter/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/newsletter/src/index.ts) | 7 |
 | `@stacksjs/notifications` | [`stacks-notifications`](../stacks-notifications/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/notifications/src/index.ts) | 16 |
 | `@stacksjs/objects` | [`stacks-objects`](../stacks-objects/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/objects/src/index.ts) | 4 |
-| `@stacksjs/orm` | [`stacks-orm`](../stacks-orm/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/index.ts) | 71 |
+| `@stacksjs/orm` | [`stacks-orm`](../stacks-orm/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/index.ts) | 72 |
 | `@stacksjs/pagination` | [`stacks-pagination`](../stacks-pagination/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/pagination/src/index.ts) | 0 |
 | `@stacksjs/path` | [`stacks-path`](../stacks-path/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/path/src/index.ts) | 13 |
 | `@stacksjs/payments` | [`stacks-payments`](../stacks-payments/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/payments/src/index.ts) | 28 |
@@ -79,7 +79,7 @@ Browser runtime bindings are documented separately in `stacks-auto-imports`.
 | `@stacksjs/scheduler` | [`stacks-scheduler`](../stacks-scheduler/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/scheduler/src/index.ts) | 14 |
 | `@stacksjs/search-engine` | [`stacks-search-engine`](../stacks-search-engine/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/search-engine/src/index.ts) | 10 |
 | `@stacksjs/security` | [`stacks-security`](../stacks-security/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/security/src/index.ts) | 11 |
-| `@stacksjs/server` | [`stacks-server`](../stacks-server/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/index.ts) | 25 |
+| `@stacksjs/server` | [`stacks-server`](../stacks-server/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/index.ts) | 26 |
 | `@stacksjs/shell` | [`stacks-shell`](../stacks-shell/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/shell/src/index.ts) | 1 |
 | `@stacksjs/sites` | [`stacks-sites`](../stacks-sites/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/sites/src/index.ts) | 3 |
 | `@stacksjs/skills` | [`stacks-skills`](../stacks-skills/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/skills/src/index.ts) | 1 |
@@ -185,7 +185,7 @@ Declared runtime exports: `DEFAULT_ROLE_PACKS`, `createBqbRbacStore`, `generateT
 
 Local source modules: [src/authentication.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/authentication.ts), [src/authenticator.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/authenticator.ts), [src/authorizable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/authorizable.ts), [src/browser-session.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/browser-session.ts), [src/client.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/client.ts), [src/cookie-auth.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/cookie-auth.ts), [src/credential-user.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/credential-user.ts), [src/email-verification.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/email-verification.ts), [src/gate.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/gate.ts), [src/magic-link.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/magic-link.ts), [src/middleware.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/middleware.ts), [src/oauth-authorization-codes.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-authorization-codes.ts), [src/oauth-authorization-endpoint.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-authorization-endpoint.ts), [src/oauth-authorization-requests.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-authorization-requests.ts), [src/oauth-authorization-response.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-authorization-response.ts), [src/oauth-authorization.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-authorization.ts), [src/oauth-browser-session.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-browser-session.ts), [src/oauth-client-registration.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-client-registration.ts), [src/oauth-consent.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-consent.ts), [src/oauth-delegated-access.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-delegated-access.ts), [src/oauth-dynamic-registration.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-dynamic-registration.ts), [src/oauth-grants.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-grants.ts), [src/oauth-introspection.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-introspection.ts), [src/oauth-metadata.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-metadata.ts), [src/oauth-pkce.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-pkce.ts), [src/oauth-protected-resource.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-protected-resource.ts), [src/oauth-provider.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-provider.ts), [src/oauth-pruning.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-pruning.ts), [src/oauth-revocation.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-revocation.ts), [src/oauth-server.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-server.ts), [src/oauth-token-endpoint.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-token-endpoint.ts), [src/oauth-token-exchange.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-token-exchange.ts), [src/oauth-token-request.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-token-request.ts), [src/oauth-token-response.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/oauth-token-response.ts), [src/page-gate.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/page-gate.ts), [src/passkey.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/passkey.ts), [src/passkeys.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/passkeys.ts), [src/password/reset.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/password/reset.ts), [src/permissions.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/permissions.ts), [src/policy.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/policy.ts), [src/rate-limiter.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/rate-limiter.ts), [src/rbac-seed.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/rbac-seed.ts), [src/rbac-store-bqb.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/rbac-store-bqb.ts), [src/rbac.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/rbac.ts), [src/referrals.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/referrals.ts), [src/register.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/register.ts), [src/request-token.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/request-token.ts), [src/session-auth.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/session-auth.ts), [src/session-handoff.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/session-handoff.ts), [src/socials.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/socials.ts), [src/team.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/team.ts), [src/tokens.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/tokens.ts), [src/two-factor.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/two-factor.ts), [src/user.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/user.ts).
 
-Evidence directory: [119 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
+Evidence directory: [120 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
 
 ### @stacksjs/browser
 
@@ -215,7 +215,7 @@ Read the entrypoint and package export map for re-exported or type-only surfaces
 
 Local source modules: [src/commands/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/src/commands/index.ts).
 
-Evidence directory: [162 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
+Evidence directory: [164 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
 
 ### @stacksjs/build
 
@@ -633,7 +633,7 @@ Declared runtime exports: `Activity`, `AnalyticsEvent`, `Auction`, `AuctionItem`
 
 Local source modules: [src/auto-crud.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/auto-crud.ts), [src/batch-loader.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/batch-loader.ts), [src/db.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/db.ts), [src/define-model.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/define-model.ts), [src/extend-model.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/extend-model.ts), [src/gdpr/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/gdpr/index.ts), [src/generate-database-schema.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/generate-database-schema.ts), [src/locked-row.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/locked-row.ts), [src/messaging.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/messaging.ts), [src/model-types.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/model-types.ts), [src/ownership.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/ownership.ts), [src/paginator-request.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/paginator-request.ts), [src/row-token.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/row-token.ts), [src/subquery.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/subquery.ts), [src/traits/audit.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/audit.ts), [src/traits/billable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/billable.ts), [src/traits/categorizable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/categorizable.ts), [src/traits/commentable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/commentable.ts), [src/traits/likeable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/likeable.ts), [src/traits/taggable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/taggable.ts), [src/transaction.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/transaction.ts), [src/types.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/types.ts), [src/utils/encrypted.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/utils/encrypted.ts), [src/utils/prunable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/utils/prunable.ts).
 
-Evidence directory: [71 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
+Evidence directory: [72 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
 
 ### @stacksjs/pagination
 
@@ -763,7 +763,7 @@ Declared runtime exports: `server`.
 
 Local source modules: [src/config.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/config.ts), [src/controllers/base.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/controllers/base.ts), [src/imports.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/imports.ts), [src/maintenance.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/maintenance.ts), [src/proxy.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/proxy.ts), [src/redirects.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/redirects.ts), [src/rewrites.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/rewrites.ts), [src/security-headers.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/security-headers.ts), [src/shadowed-defaults.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/src/shadowed-defaults.ts).
 
-Evidence directory: [25 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
+Evidence directory: [26 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/server/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
 
 ### @stacksjs/shell
 

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.264",
+  "version": "0.75.267",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.264",
+  "version": "0.75.267",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.264",
-    "@stacksjs/sanitizer": "0.2.663",
-    "@stacksjs/stx": "0.2.663",
+    "@stacksjs/mobile": "0.75.267",
+    "@stacksjs/sanitizer": "0.2.664",
+    "@stacksjs/stx": "0.2.664",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 
@@ -67,29 +69,75 @@ const filteredRequests = derived(() => {
   })
 })
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Unknown'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
-}
-
-function statusClass(status: number): string {
+/**
+ * Pill colours by tone rather than by value, so every status code and every
+ * method the table has not named still lands on a colour, as the hand-rolled
+ * pills did.
+ */
+function statusTone(status: number): string {
   if (status >= 500)
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+    return 'server'
   if (status >= 400)
-    return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+    return 'client'
   if (status >= 300)
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
-  return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
+    return 'redirect'
+  return 'ok'
 }
 
-function methodClass(method: string): string {
+function methodTone(method: string): string {
   if (method === 'GET')
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+    return 'read'
   if (method === 'DELETE')
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
-  return 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40'
+    return 'delete'
+  return 'write'
+}
+
+const COLUMNS = [
+  {
+    key: 'methodTone',
+    label: 'Method',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'method',
+    badgeClasses: {
+      read: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
+      delete: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      write: 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40',
+    },
+  },
+  { key: 'path', label: 'Path', sortable: true, class: 'max-w-md font-mono text-neutral-800 text-xs truncate dark:text-neutral-200' },
+  {
+    key: 'statusTone',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'status',
+    badgeClasses: {
+      server: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      client: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+      redirect: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
+      ok: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+    },
+  },
+  { key: 'durationMs', label: 'Duration (ms)', type: 'number' as const, sortable: true, align: 'right' as const, class: 'font-mono whitespace-nowrap' },
+  { key: 'ipAddress', label: 'Client', sortable: true, emptyText: 'Not recorded' },
+  { key: 'createdAt', label: 'Recorded', type: 'datetime' as const, sortable: true, align: 'right' as const, emptyText: 'Unknown', class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'inspect', label: 'Inspect request', icon: 'i-hugeicons-view' },
+]
+
+const requestRows = derived(() => filteredRequests().map(request => ({
+  ...request,
+  methodTone: methodTone(request.method),
+  statusTone: statusTone(request.status),
+  durationMs: Math.round(request.durationMs * 10) / 10,
+})))
+
+function handleRowAction(payload: { action: string, row: RequestRow }): void {
+  if (payload.action === 'inspect')
+    inspectRequest(payload.row)
 }
 
 function inspectRequest(request: RequestRow): void {
@@ -184,49 +232,18 @@ onMount(() => {
       </div>
     </div>
 
-    <div :if="loading()" class="flex items-center justify-center py-16 text-neutral-500 text-sm dark:text-neutral-400">
-      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-      Loading request records...
-    </div>
-
-    <EmptyState
-      :if="!loading() && !loadError() && filteredRequests().length === 0"
-      icon="i-hugeicons-global"
-      :title="search() || methodFilter() !== 'all' || statusFilter() !== 'all' ? 'No matching requests' : 'No requests recorded'"
-      description="Request records appear after the application writes to the Request model."
+    <Table
+      :columns="COLUMNS"
+      :data="requestRows()"
+      :loading="loading()"
+      :row-actions="ROW_ACTIONS"
+      action-label-key="path"
+      paginated
+      :page-size="25"
+      :empty-title="search() || methodFilter() !== 'all' || statusFilter() !== 'all' ? 'No matching requests' : 'No requests recorded'"
+      empty-description="Request records appear after the application writes to the Request model."
+      @row-action="handleRowAction"
     />
-
-    <div :if="!loading() && filteredRequests().length > 0" class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
-          <tr>
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Request</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Duration</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Client</th>
-            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Recorded</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Details</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
-          <tr :for="request in filteredRequests()">
-            <td class="pl-5 pr-4 py-3.5">
-              <div class="flex gap-2 items-center">
-                <span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + methodClass(request.method)">{{ request.method }}</span>
-                <code class="max-w-md text-neutral-800 text-xs truncate dark:text-neutral-200">{{ request.path }}</code>
-              </div>
-            </td>
-            <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + statusClass(request.status)">{{ request.status }}</span></td>
-            <td class="px-4 py-3.5 font-mono text-neutral-600 text-right text-xs whitespace-nowrap dark:text-neutral-300">{{ request.durationMs.toFixed(1) }} ms</td>
-            <td class="px-4 py-3.5 text-neutral-500 text-xs dark:text-neutral-400">{{ request.ipAddress || 'Not recorded' }}</td>
-            <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(request.createdAt) }}</td>
-            <td class="pr-5 py-3.5 text-right">
-              <Button variant="ghost" size="sm" @click="inspectRequest(request)">Inspect</Button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
   </Card>
 
   <RequestDetailsDialog :request="selectedRequest()" @close="closeInspector" />

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 
@@ -44,9 +46,7 @@ const page = derived(() => mode() === 'actions'
       empty: 'No Action modules were found.',
       scaffold: 'buddy make:action MyAction',
       icon: 'i-hugeicons-energy',
-      detailLabel: 'Method',
       note: 'Application files override matching framework defaults.',
-      showOrigin: true,
       stats: [
         { key: 'total', label: 'Total Actions' },
         { key: 'application', label: 'Application Overrides' },
@@ -60,9 +60,7 @@ const page = derived(() => mode() === 'actions'
       empty: 'No command files in app/Commands.',
       scaffold: 'buddy make:command my-command',
       icon: 'i-hugeicons-command-line',
-      detailLabel: 'Aliases and options',
       note: 'Every file in app/Commands is a command. The optional app/Commands.ts only orders, aliases or disables them.',
-      showOrigin: false,
       stats: [
         { key: 'total', label: 'Commands' },
         { key: 'registered', label: 'Registry Entries' },
@@ -90,13 +88,6 @@ function statValue(key: string): number {
   return Number(stats()[key] || 0)
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Unknown'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
-}
-
 function formatAliases(item: SourceItem): string {
   return item.aliases?.length ? item.aliases.join(', ') : 'None'
 }
@@ -105,14 +96,67 @@ function formatOptions(item: SourceItem): string {
   return item.options?.length ? item.options.join(', ') : 'None'
 }
 
-function methodClass(method = 'ANY'): string {
+/** Read-only methods, writes, and the catch-all, as the hand-rolled pill coloured them. */
+function methodTone(method = 'ANY'): string {
   if (['GET', 'HEAD', 'OPTIONS'].includes(method))
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+    return 'read'
   if (method === 'ANY')
-    return 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800'
-  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+    return 'any'
+  return 'write'
 }
 
+const NAME_COLUMN = { key: 'name', label: 'Name', sortable: true, subtitleKey: 'description', class: 'font-medium text-neutral-900 dark:text-white' }
+const PATH_COLUMN = { key: 'path', label: 'Path', sortable: true, class: 'font-mono text-neutral-600 text-xs dark:text-neutral-300' }
+const MODIFIED_COLUMN = { key: 'modifiedAt', label: 'Modified', type: 'datetime' as const, sortable: true, align: 'right' as const, emptyText: 'Unknown', class: 'whitespace-nowrap' }
+
+/**
+ * Actions show a method and where the file comes from. Commands have one
+ * root, so their second column is what can be typed instead.
+ */
+const COLUMNS_BY_MODE = {
+  actions: [
+    NAME_COLUMN,
+    {
+      key: 'methodTone',
+      label: 'Method',
+      type: 'badge' as const,
+      sortable: true,
+      badgeLabelKey: 'methodLabel',
+      badgeClasses: {
+        read: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
+        any: 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800',
+        write: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+      },
+    },
+    {
+      key: 'origin',
+      label: 'Origin',
+      type: 'badge' as const,
+      sortable: true,
+      badgeClasses: {
+        Application: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+        Framework: 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800',
+      },
+    },
+    PATH_COLUMN,
+    MODIFIED_COLUMN,
+  ],
+  commands: [
+    NAME_COLUMN,
+    { key: 'aliasesLabel', label: 'Aliases', sortable: true, subtitleKey: 'optionsLabel', class: 'text-neutral-700 text-xs dark:text-neutral-300' },
+    PATH_COLUMN,
+    MODIFIED_COLUMN,
+  ],
+}
+
+const itemRows = derived(() => filteredItems().map(item => ({
+  ...item,
+  methodTone: methodTone(item.method),
+  methodLabel: item.method || 'ANY',
+  aliasesLabel: `Aliases: ${formatAliases(item)}`,
+  optionsLabel: `Options: ${formatOptions(item)}`,
+})))
+
 async function loadInventory(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -205,50 +249,15 @@ onMount(() => {
       </label>
     </div>
 
-    <div :if="loading()" class="flex items-center justify-center py-16 text-neutral-500 text-sm dark:text-neutral-400">
-      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-      Reading source files...
-    </div>
-
-    <EmptyState
-      :if="!loading() && !loadError() && filteredItems().length === 0"
-      :icon="page().icon"
-      :title="search() ? 'No matching source files' : page().empty"
-      :description="search() ? 'Try a different name, path, method, or alias.' : 'Use the scaffold command to add one through the native framework workflow.'"
+    <Table
+      :columns="COLUMNS_BY_MODE[mode()]"
+      :data="itemRows()"
+      :loading="loading()"
+      row-key="path"
+      paginated
+      :page-size="25"
+      :empty-title="search() ? 'No matching source files' : page().empty"
+      :empty-description="search() ? 'Try a different name, path, method, or alias.' : 'Use the scaffold command to add one through the native framework workflow.'"
     />
-
-    <div :if="!loading() && filteredItems().length > 0" class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
-          <tr>
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">{{ page().detailLabel }}</th>
-            <th :if="page().showOrigin" class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Origin</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Path</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Modified</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
-          <tr :for="item in filteredItems()">
-            <td class="pl-5 pr-4 py-3.5">
-              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ item.name }}</p>
-              <p class="mt-0.5 max-w-md text-neutral-500 text-xs dark:text-neutral-400">{{ item.description }}</p>
-            </td>
-            <td class="px-4 py-3.5">
-              <span :if="mode() === 'actions'" :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + methodClass(item.method)">{{ item.method || 'ANY' }}</span>
-              <div :if="mode() === 'commands'" class="space-y-1 text-xs">
-                <p class="text-neutral-700 dark:text-neutral-300"><span class="text-neutral-500 dark:text-neutral-400">Aliases:</span> {{ formatAliases(item) }}</p>
-                <p class="text-neutral-700 dark:text-neutral-300"><span class="text-neutral-500 dark:text-neutral-400">Options:</span> {{ formatOptions(item) }}</p>
-              </div>
-            </td>
-            <td :if="page().showOrigin" class="px-4 py-3.5">
-              <span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + (item.origin === 'Application' ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40' : 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800')">{{ item.origin }}</span>
-            </td>
-            <td class="px-4 py-3.5 font-mono text-neutral-600 text-xs dark:text-neutral-300">{{ item.path }}</td>
-            <td class="pr-5 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(item.modifiedAt) }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
   </Card>
 </div>

package/resources/components/Dashboard/Infrastructure/DnsDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type {
   DashboardDnsDomain,
@@ -61,10 +63,40 @@ function typeColor(type: string): string {
   return 'bg-rose-500'
 }
 
+const TYPE_BADGE = 'font-mono font-semibold text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+
+const COLUMNS = [
+  {
+    key: 'type',
+    label: 'Type',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: { A: TYPE_BADGE, AAAA: TYPE_BADGE, CNAME: TYPE_BADGE, MX: TYPE_BADGE, TXT: TYPE_BADGE },
+  },
+  { key: 'name', label: 'Name', sortable: true, class: 'font-mono text-neutral-900 whitespace-nowrap dark:text-white' },
+  { key: 'value', label: 'Value', sortable: true, emptyText: 'Not set', class: 'max-w-md font-mono truncate' },
+  { key: 'ttlLabel', label: 'TTL', class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'inspect', label: 'Inspect', icon: 'i-hugeicons-view' },
+]
+
+const recordRows = derived(() => filteredRecords().map((record, index) => ({
+  ...record,
+  rowId: `${record.type}:${record.name}:${index}`,
+  ttlLabel: ttlLabel(record),
+})))
+
 function inspectRecord(record: DashboardDnsRecord): void {
   selectedRecord.set(record)
 }
 
+function handleRowAction(payload: { action: string, row: DashboardDnsRecord }): void {
+  if (payload.action === 'inspect')
+    inspectRecord(payload.row)
+}
+
 function closeRecord(): void {
   selectedRecord.set(null)
 }
@@ -202,34 +234,20 @@ onMount(() => {
       </div>
     </div>
 
-    <div :if="loading()" class="flex items-center justify-center mt-4 py-16 text-neutral-500 text-sm dark:text-neutral-400 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-      Loading DNS configuration...
-    </div>
-
-    <EmptyState :if="!loading() && !loadError() && filteredRecords().length === 0" icon="i-hugeicons-internet" :title="records().length ? 'No matching DNS records' : 'No DNS records configured'" :description="records().length ? 'Adjust the search or record type filter.' : 'Add records to config/dns.ts, then refresh this page.'" />
-
-    <div :if="!loading() && filteredRecords().length > 0" class="overflow-x-auto mt-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <table class="min-w-full divide-neutral-200 divide-y dark:divide-neutral-700">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/70">
-          <tr>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Type</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Name</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Value</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">TTL</th>
-            <th scope="col" class="px-5 py-3"><span class="sr-only">Actions</span></th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-800">
-          <tr :for="record in filteredRecords()" class="hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
-            <td class="px-5 py-4"><span class="inline-flex px-2 py-1 font-mono font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ record.type }}</span></td>
-            <td class="px-5 py-4 font-mono text-neutral-900 text-sm whitespace-nowrap dark:text-white">{{ record.name }}</td>
-            <td class="px-5 py-4 max-w-md font-mono text-neutral-500 text-sm truncate dark:text-neutral-400">{{ record.value || 'Not set' }}</td>
-            <td class="px-5 py-4 text-neutral-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ ttlLabel(record) }}</td>
-            <td class="px-5 py-4 text-right"><Button variant="ghost" size="sm" @click="inspectRecord(record)">Inspect</Button></td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="mt-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <Table
+        :columns="COLUMNS"
+        :data="recordRows()"
+        :loading="loading()"
+        :row-actions="ROW_ACTIONS"
+        action-label-key="name"
+        row-key="rowId"
+        paginated
+        :page-size="25"
+        :empty-title="records().length ? 'No matching DNS records' : 'No DNS records configured'"
+        :empty-description="records().length ? 'Adjust the search or record type filter.' : 'Add records to config/dns.ts, then refresh this page.'"
+        @row-action="handleRowAction"
+      />
     </div>
   </section>
 

package/resources/components/Dashboard/Releases/ReleaseDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { ReleaseRecord, ReleaseSummary } from '../../../../app/Actions/Dashboard/Releases/release-records'
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -41,27 +43,30 @@ function formatNumber(value: number): string {
   return new Intl.NumberFormat().format(value)
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const parsed = new Date(value)
-  if (Number.isNaN(parsed.getTime()))
-    return value
-  return new Intl.DateTimeFormat(undefined, {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(parsed)
-}
+const COLUMNS = [
+  { key: 'version', label: 'Version', sortable: true, subtitleKey: 'notes', class: 'font-semibold text-gray-900 dark:text-white' },
+  { key: 'type', label: 'Type', sortable: true, class: 'capitalize' },
+  {
+    key: 'statusKey',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'status',
+    badgeClasses: {
+      published: 'capitalize text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30',
+      scheduled: 'capitalize text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30',
+      draft: 'capitalize text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30',
+    },
+  },
+  { key: 'downloads', label: 'Downloads', type: 'number' as const, sortable: true, align: 'right' as const, class: 'font-mono' },
+  { key: 'author', label: 'Author', sortable: true, emptyText: 'Not recorded' },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
 
-function statusClass(value: string): string {
-  if (value === 'published')
-    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30'
-  if (value === 'scheduled')
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30'
-  if (value === 'draft')
-    return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30'
-  return 'text-gray-700 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700'
-}
+const releaseRows = derived(() => rows().map(release => ({
+  ...release,
+  statusKey: release.status.toLowerCase(),
+})))
 
 async function loadReleases(): Promise<void> {
   isLoading.set(true)
@@ -141,47 +146,16 @@ onMount(() => {
       </div>
     </div>
 
-    <div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-      <div :if="isLoading()" class="flex items-center justify-center p-8 text-gray-500 text-sm dark:text-neutral-400">
-        <span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
-        Loading releases
-      </div>
-      <div :else-if="rows().length === 0" class="p-8 text-center">
-        <div class="mx-auto h-8 w-8 text-gray-400 i-hugeicons-right-to-left-list-number"></div>
-        <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No release records found</p>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create releases through your application workflow and they will appear here.</p>
-      </div>
-      <div :else class="overflow-x-auto">
-        <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-          <thead class="bg-gray-50 dark:bg-neutral-900/50">
-            <tr>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Version</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Type</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Status</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Downloads</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Author</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Created</th>
-            </tr>
-          </thead>
-          <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
-            <template :for="release in rows()" :key="release.id">
-              <tr>
-                <td class="px-4 py-3">
-                  <p class="font-semibold text-gray-900 text-sm dark:text-white">{{ release.version }}</p>
-                  <p :if="release.notes" class="mt-1 max-w-md text-gray-500 text-xs truncate dark:text-neutral-400">{{ release.notes }}</p>
-                </td>
-                <td class="px-4 py-3 capitalize text-gray-600 text-sm dark:text-neutral-300">{{ release.type }}</td>
-                <td class="px-4 py-3">
-                  <span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(release.status)">{{ release.status }}</span>
-                </td>
-                <td class="px-4 py-3 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ formatNumber(release.downloads) }}</td>
-                <td class="px-4 py-3 text-gray-600 text-sm dark:text-neutral-300">{{ release.author || 'Not recorded' }}</td>
-                <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(release.createdAt) }}</td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
+    <div class="bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <Table
+        :columns="COLUMNS"
+        :data="releaseRows()"
+        :loading="isLoading()"
+        paginated
+        :page-size="25"
+        empty-title="No release records found"
+        empty-description="Create releases through your application workflow and they will appear here."
+      />
     </div>
   </section>
 </div>

package/resources/components/Dashboard/Teams/TeamPeopleDashboard.stx

@@ -1,4 +1,4 @@
-@import('../UI/Button', '../UI/ConfirmDialog')
+@import('../UI/Button', '../UI/ConfirmDialog', '../UI/Table')
 
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -53,8 +53,6 @@ const memberToRemove = state<TeamMember | null>(null)
 const invitationToRevoke = state<TeamInvitation | null>(null)
 
 const teamId = derived(() => Number(route.params.id))
-const hasMembers = derived(() => members().length > 0)
-const hasInvitations = derived(() => invitations().length > 0)
 
 function roleLabel(role: string): string {
   return role.charAt(0).toUpperCase() + role.slice(1)
@@ -65,24 +63,64 @@ function memberCountLabel(): string {
   return `${count} team ${count === 1 ? 'member' : 'members'}`
 }
 
-function statusClass(status: string): string {
-  if (status === 'active' || status === 'sent')
-    return 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400'
-  if (status === 'suspended' || status === 'failed')
-    return 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400'
-  if (status === 'expired')
-    return 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
-  return 'bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300'
+/**
+ * One palette for member status and invitation delivery, keyed by value, so
+ * a status the server adds later still reads, in the neutral pill.
+ */
+const STATUS_CLASSES = {
+  active: 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400',
+  sent: 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400',
+  suspended: 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400',
+  failed: 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400',
+  expired: 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
 }
 
-function formatDate(value: string | null): string {
-  if (!value)
-    return 'Not available'
-  const date = new Date(value.replace(' ', 'T'))
-  return Number.isNaN(date.getTime())
-    ? value
-    : date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
-}
+/**
+ * The member and role columns are slotted: the first for its avatar, the
+ * second because an owner's role is fixed and everyone else's is a select.
+ */
+const MEMBER_COLUMNS = [
+  { key: 'name', label: 'Member', sortable: true, slotted: true },
+  { key: 'role', label: 'Role', sortable: true, slotted: true },
+  { key: 'status', label: 'Status', type: 'badge' as const, sortable: true, badgeLabelKey: 'statusLabel', badgeClasses: STATUS_CLASSES },
+]
+
+/**
+ * An owner can be neither suspended nor removed. Anyone else is offered the
+ * opposite of their current state, and every status but `active` reads as
+ * one to activate, as the hand-rolled button did.
+ */
+const MEMBER_ACTIONS = [
+  { action: 'suspend', label: 'Suspend', icon: 'i-hugeicons-pause', class: 'text-amber-500', when: { key: 'statusAction', equals: 'suspend' } },
+  { action: 'activate', label: 'Activate', icon: 'i-hugeicons-play', class: 'text-green-500', when: { key: 'statusAction', equals: 'activate' } },
+  { action: 'remove', label: 'Remove', icon: 'i-hugeicons-delete-02', class: 'text-red-500', when: { key: 'removable', equals: true } },
+]
+
+const INVITATION_COLUMNS = [
+  { key: 'email', label: 'Recipient', sortable: true, class: 'text-neutral-900 dark:text-neutral-100' },
+  { key: 'roleLabel', label: 'Role', sortable: true },
+  { key: 'deliveryStatus', label: 'Delivery', type: 'badge' as const, sortable: true, badgeLabelKey: 'deliveryLabel', badgeClasses: STATUS_CLASSES },
+  { key: 'expiresAt', label: 'Expires', type: 'date' as const, sortable: true, emptyText: 'Not available' },
+]
+
+const INVITATION_ACTIONS = [
+  { action: 'resend', label: 'Resend invitation to', icon: 'i-hugeicons-mail-send-01' },
+  { action: 'revoke', label: 'Revoke invitation to', icon: 'i-hugeicons-cancel-01', class: 'text-red-500' },
+]
+
+const memberRows = derived(() => members().map(member => ({
+  ...member,
+  initial: member.name.charAt(0).toUpperCase(),
+  statusLabel: roleLabel(member.status),
+  statusAction: member.role === 'owner' ? 'none' : member.status === 'active' ? 'suspend' : 'activate',
+  removable: member.role !== 'owner',
+})))
+
+const invitationRows = derived(() => invitations().map(invitation => ({
+  ...invitation,
+  roleLabel: roleLabel(invitation.role),
+  deliveryLabel: roleLabel(invitation.deliveryStatus),
+})))
 
 async function fetchPeople(): Promise<void> {
   isLoading.set(true)
@@ -233,6 +271,20 @@ async function revokeInvitation(): Promise<void> {
   }
 }
 
+function handleMemberAction(payload: { action: string, row: TeamMember }): void {
+  if (payload.action === 'remove')
+    memberToRemove.set(payload.row)
+  else
+    void toggleMemberStatus(payload.row)
+}
+
+function handleInvitationAction(payload: { action: string, row: TeamInvitation }): void {
+  if (payload.action === 'resend')
+    void resendInvitation(payload.row)
+  else if (payload.action === 'revoke')
+    invitationToRevoke.set(payload.row)
+}
+
 onMount(() => {
   fetchPeople()
 })
@@ -307,79 +359,48 @@ onMount(() => {
       </div>
     </div>
 
-    <div :show="isLoading()" class="px-6 py-10 text-center text-neutral-500 text-sm dark:text-neutral-400">Loading members...</div>
-    <div :show="!isLoading() && !hasMembers()" class="px-6 py-10 text-center text-neutral-500 text-sm dark:text-neutral-400">No members have joined this team yet.</div>
-
-    <div :show="!isLoading() && hasMembers()" class="overflow-x-auto">
-      <table class="min-w-full divide-neutral-200 divide-y dark:divide-neutral-800">
-        <thead class="bg-neutral-50/80 dark:bg-neutral-950/50">
-          <tr>
-            <th scope="col" class="px-6 py-3 font-medium text-left text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Member</th>
-            <th scope="col" class="px-6 py-3 font-medium text-left text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Role</th>
-            <th scope="col" class="px-6 py-3 font-medium text-left text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Status</th>
-            <th scope="col" class="px-6 py-3 font-medium text-neutral-500 text-right text-xs tracking-wide uppercase dark:text-neutral-400">Actions</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-200 divide-y dark:divide-neutral-800">
-          <template :for="member in members">
-            <tr>
-              <td class="px-6 py-4">
-                <div class="flex gap-3 items-center">
-                  <div class="flex items-center justify-center shrink-0 h-9 w-9 font-semibold text-blue-700 text-sm dark:text-blue-300 bg-blue-50 dark:bg-blue-500/10 rounded-full">
-                    {{ member.name.charAt(0).toUpperCase() }}
-                  </div>
-                  <div>
-                    <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ member.name }}</p>
-                    <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">{{ member.email }}</p>
-                  </div>
-                </div>
-              </td>
-              <td class="px-6 py-4">
-                <span :show="member.role === 'owner'" class="text-neutral-700 text-sm dark:text-neutral-300">Owner</span>
-                <select
-                  :show="member.role !== 'owner'"
-                  :value="member.role"
-                  :aria-label="'Role for ' + member.name"
-                  :disabled="busyMemberId() === member.id"
-                  class="px-2.5 h-8 text-neutral-800 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700"
-                  @change="updateMemberRole(member, $event)"
-                >
-                  <option value="admin">Admin</option>
-                  <option value="member">Member</option>
-                  <option value="viewer">Viewer</option>
-                </select>
-              </td>
-              <td class="px-6 py-4">
-                <span class="inline-flex px-2 py-1 font-medium text-xs rounded-full" :class="statusClass(member.status)">
-                  {{ roleLabel(member.status) }}
-                </span>
-              </td>
-              <td class="px-6 py-4">
-                <div :show="member.role !== 'owner'" class="flex gap-2 items-center justify-end">
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    :loading="busyMemberId() === member.id"
-                    :disabled="busyMemberId() === member.id"
-                    @click="toggleMemberStatus(member)"
-                  >
-                    {{ member.status === 'active' ? 'Suspend' : 'Activate' }}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    :disabled="busyMemberId() === member.id"
-                    @click="memberToRemove.set(member)"
-                  >
-                    Remove
-                  </Button>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
+    <Table
+      :columns="MEMBER_COLUMNS"
+      :data="memberRows()"
+      :loading="isLoading()"
+      :row-actions="MEMBER_ACTIONS"
+      action-label-key="name"
+      busy-key="id"
+      :busy-value="busyMemberId()"
+      paginated
+      :page-size="25"
+      empty-title="No members yet"
+      empty-description="No members have joined this team yet."
+      @row-action="handleMemberAction"
+    >
+      <template #cell="{ row, column }">
+        <template :if="column.key === 'name'">
+          <div class="flex gap-3 items-center">
+            <div class="flex items-center justify-center shrink-0 h-9 w-9 font-semibold text-blue-700 text-sm dark:text-blue-300 bg-blue-50 dark:bg-blue-500/10 rounded-full">{{ row.initial }}</div>
+            <div>
+              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ row.name }}</p>
+              <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">{{ row.email }}</p>
+            </div>
+          </div>
+        </template>
+        <template :if="column.key === 'role' && row.role === 'owner'">
+          <span class="text-neutral-700 text-sm dark:text-neutral-300">Owner</span>
+        </template>
+        <template :if="column.key === 'role' && row.role !== 'owner'">
+          <select
+            :value="row.role"
+            :aria-label="'Role for ' + row.name"
+            :disabled="busyMemberId() === row.id"
+            class="px-2.5 h-8 text-neutral-800 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700"
+            @change="updateMemberRole(row, $event)"
+          >
+            <option value="admin">Admin</option>
+            <option value="member">Member</option>
+            <option value="viewer">Viewer</option>
+          </select>
+        </template>
+      </template>
+    </Table>
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200/70 rounded-xl dark:border-neutral-800">
@@ -388,57 +409,20 @@ onMount(() => {
       <p class="mt-0.5 text-neutral-500 text-sm dark:text-neutral-400">Track delivery, resend links, or revoke access before acceptance.</p>
     </div>
 
-    <div :show="isLoading()" class="px-6 py-10 text-center text-neutral-500 text-sm dark:text-neutral-400">Loading invitations...</div>
-    <div :show="!isLoading() && !hasInvitations()" class="px-6 py-10 text-center text-neutral-500 text-sm dark:text-neutral-400">No pending invitations.</div>
-
-    <div :show="hasInvitations()" class="overflow-x-auto">
-      <table class="min-w-full divide-neutral-200 divide-y dark:divide-neutral-800">
-        <thead class="bg-neutral-50/80 dark:bg-neutral-950/50">
-          <tr>
-            <th scope="col" class="px-6 py-3 font-medium text-left text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Recipient</th>
-            <th scope="col" class="px-6 py-3 font-medium text-left text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Role</th>
-            <th scope="col" class="px-6 py-3 font-medium text-left text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Delivery</th>
-            <th scope="col" class="px-6 py-3 font-medium text-left text-neutral-500 text-xs tracking-wide uppercase dark:text-neutral-400">Expires</th>
-            <th scope="col" class="px-6 py-3 font-medium text-neutral-500 text-right text-xs tracking-wide uppercase dark:text-neutral-400">Actions</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-200 divide-y dark:divide-neutral-800">
-          <template :for="invitation in invitations">
-            <tr>
-              <td class="px-6 py-4 text-neutral-900 text-sm dark:text-neutral-100">{{ invitation.email }}</td>
-              <td class="px-6 py-4 text-neutral-600 text-sm dark:text-neutral-300">{{ roleLabel(invitation.role) }}</td>
-              <td class="px-6 py-4">
-                <span class="inline-flex px-2 py-1 font-medium text-xs rounded-full" :class="statusClass(invitation.deliveryStatus)">
-                  {{ roleLabel(invitation.deliveryStatus) }}
-                </span>
-              </td>
-              <td class="px-6 py-4 text-neutral-500 text-sm dark:text-neutral-400">{{ formatDate(invitation.expiresAt) }}</td>
-              <td class="px-6 py-4">
-                <div class="flex gap-2 items-center justify-end">
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    :loading="busyInvitationId() === invitation.id"
-                    :disabled="busyInvitationId() === invitation.id"
-                    @click="resendInvitation(invitation)"
-                  >
-                    Resend
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    :disabled="busyInvitationId() === invitation.id"
-                    @click="invitationToRevoke.set(invitation)"
-                  >
-                    Revoke
-                  </Button>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
+    <Table
+      :columns="INVITATION_COLUMNS"
+      :data="invitationRows()"
+      :loading="isLoading()"
+      :row-actions="INVITATION_ACTIONS"
+      action-label-key="email"
+      busy-key="id"
+      :busy-value="busyInvitationId()"
+      paginated
+      :page-size="25"
+      empty-title="No pending invitations"
+      empty-description="Invitations you send appear here until they are accepted."
+      @row-action="handleInvitationAction"
+    />
   </section>
 </div>