@stacksjs/defaults 0.70.354 → 0.70.355

package/resources/components/Dashboard/Commerce/RestaurantWaitlistDashboard.stx

@@ -26,6 +26,13 @@ const isSaving = state(false)
 const isDeleting = state(false)
 const busyId = state('')
 const validationErrors = state<Record<string, string>>({})
+const metrics = derived(() => [
+  { label: 'Waiting', value: summary().waiting },
+  { label: 'Quoted wait', value: `${summary().averageQuotedWait} min` },
+  { label: 'Seated', value: summary().seated },
+  { label: 'No show', value: summary().noShow },
+  { label: 'Seating rate', value: `${summary().seatingRate}%` },
+])
 
 function rows(): RestaurantWaitlistRecord[] {
   const query = search().trim().toLowerCase()
@@ -220,13 +227,7 @@ onMount(() => {
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 
   <section class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <template :for="item in [
-      { label: 'Waiting', value: summary().waiting },
-      { label: 'Quoted wait', value: summary().averageQuotedWait + ' min' },
-      { label: 'Seated', value: summary().seated },
-      { label: 'No show', value: summary().noShow },
-      { label: 'Seating rate', value: summary().seatingRate + '%' }
-    ]">
+    <template :for="item in metrics()">
       <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
         <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">{{ item.label }}</p>
         <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>

package/resources/components/Dashboard/Content/BlogDashboard.stx

@@ -1,3 +1,9 @@
+<script server>
+import { publicApplicationUrl } from '../../../../functions/public-application-url'
+
+export const blogUrl = publicApplicationUrl('/blog')
+</script>
+
 <template>
 <div class="p-6 min-h-screen max-w-full text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
   <div class="flex flex-col gap-6 mx-auto min-w-0 max-w-7xl w-full">
@@ -10,7 +16,7 @@
         </p>
       </div>
       <div class="flex flex-wrap gap-2">
-        <Button tag="a" href="/blog" target="_blank" rel="noopener" variant="secondary">
+        <Button tag="a" href="{{ blogUrl }}" target="_blank" rel="noopener" variant="secondary">
           <span class="h-4 w-4 i-hugeicons-view"></span>
           View blog
         </Button>
@@ -123,7 +129,7 @@
                   <div class="flex gap-1 justify-end">
                     <a
                       x-show="!post.draft"
-                      :href="'/blog/' + post.slug"
+                      :href="publicPostUrl(post.slug)"
                       target="_blank"
                       rel="noopener"
                       :title="'View ' + post.title"
@@ -264,6 +270,8 @@
 // markdown files in content/blog. It owns no state; the signals below do.
 import { deleteBlogPost, fetchBlogPost, fetchBlogPosts, saveBlogPost } from '~/storage/framework/defaults/functions/blog'
 
+const publicBlogBaseUrl = {{ blogUrl }}
+
 // Fixed-length list purely to render the loading skeleton rows.
 const skeletonRows = [1, 2, 3, 4]
 
@@ -291,6 +299,10 @@ const formFeatured = state(false)
 
 const postToDelete = state(null)
 
+function publicPostUrl(slug) {
+  return `${publicBlogBaseUrl}/${encodeURIComponent(String(slug))}`
+}
+
 // Read by the delete dialog's copy; kept as a derived signal so the template
 // never has to reach through a possibly-null post.
 const deleteTargetSlug = derived(() => {

package/resources/components/Dashboard/Content/PostsDashboard.stx

@@ -1,3 +1,9 @@
+<script server>
+import { publicApplicationUrl } from '../../../../functions/public-application-url'
+
+export const blogUrl = publicApplicationUrl('/blog')
+</script>
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
@@ -229,7 +235,7 @@ onMount(() => { void loadPosts() })
 <div class="space-y-6">
   <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
     <div><p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p><h1 class="mt-1 font-bold text-2xl text-gray-900 dark:text-white">Posts</h1><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted articles, publishing, authors, and native taxonomies.</p></div>
-    <div class="flex flex-wrap gap-2"><Button href="/blog" target="_blank" rel="noreferrer" variant="secondary"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-view"></span>View blog</Button><Button :loading="loading()" variant="secondary" @click="loadPosts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button><Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>New post</Button></div>
+    <div class="flex flex-wrap gap-2"><Button href="{{ blogUrl }}" target="_blank" rel="noreferrer" variant="secondary"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-view"></span>View blog</Button><Button :loading="loading()" variant="secondary" @click="loadPosts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button><Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>New post</Button></div>
   </header>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadPosts()">Retry</Button></div>

package/resources/components/Dashboard/Deployments/DeploymentDetail.stx

@@ -44,6 +44,20 @@ function statusLabel(status: string): string {
   return status.charAt(0).toUpperCase() + status.slice(1)
 }
 
+function deploymentUrl(): string {
+  const value = record()?.url?.trim()
+  if (!value)
+    return ''
+
+  try {
+    const url = new URL(value)
+    return url.protocol === 'http:' || url.protocol === 'https:' ? url.toString() : ''
+  }
+  catch {
+    return ''
+  }
+}
+
 async function loadDeployment(): Promise<void> {
   const route = useRoute()
   const id = String(route.params.id || '')
@@ -131,9 +145,9 @@ onMount(() => {
             <dt class="text-gray-500 dark:text-neutral-400">Created</dt>
             <dd class="mt-1 text-gray-900 dark:text-white">{{ formatDate(record()?.createdAt || '') }}</dd>
           </div>
-          <div :if="record()?.url">
+          <div :if="deploymentUrl()">
             <dt class="text-gray-500 dark:text-neutral-400">Deployment URL</dt>
-            <dd class="mt-1"><a :href="record()?.url || '#'" target="_blank" rel="noopener noreferrer" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">{{ record()?.url }}</a></dd>
+            <dd class="mt-1"><a :href="deploymentUrl()" target="_blank" rel="noopener noreferrer" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">{{ deploymentUrl() }}</a></dd>
           </div>
         </dl>
       </div>

package/resources/components/Dashboard/Email/EmailNavigation.stx

@@ -8,17 +8,17 @@ function linkClass(name: string): string {
 }
 </script>
 
-<nav aria-label="Mail sections" class="inline-flex gap-1 p-1 bg-gray-100 dark:bg-neutral-900 rounded-lg">
-  <StxLink to="/inbox" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('inbox')">
+<nav aria-label="Mail sections" class="flex overflow-x-auto gap-0.5 sm:gap-1 p-1 max-w-full bg-gray-100 dark:bg-neutral-900 rounded-lg">
+  <StxLink to="/inbox" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('inbox')">
     Inbox
   </StxLink>
-  <StxLink to="/inbox/activity" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('activity')">
+  <StxLink to="/inbox/activity" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('activity')">
     Activity
   </StxLink>
-  <StxLink to="/inbox/captured" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('captured')">
+  <StxLink to="/inbox/captured" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('captured')">
     Captured
   </StxLink>
-  <StxLink to="/inbox/settings" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('settings')">
+  <StxLink to="/inbox/settings" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('settings')">
     Settings
   </StxLink>
 </nav>

package/resources/components/Dashboard/Email/EmailSidebar.stx

@@ -47,7 +47,7 @@ function mailboxLabel(): string {
 }
 </script>
 
-<aside class="flex flex-col flex-shrink-0 w-64 bg-white dark:bg-neutral-800 border-gray-200 border-r dark:border-neutral-600">
+<aside class="flex flex-col flex-shrink-0 w-full md:w-64 bg-white dark:bg-neutral-800 border-b border-gray-200 md:border-b-0 md:border-r dark:border-neutral-600">
   <div class="p-3 border-b border-gray-200 dark:border-neutral-600">
     <div class="flex items-center space-x-2">
       <div class="flex flex-shrink-0 items-center justify-center h-8 w-8 text-gray-700 dark:text-white bg-gray-200 dark:bg-neutral-700 rounded">

package/resources/components/Dashboard/Email/InboxAttachmentList.stx

@@ -0,0 +1,53 @@
+<script client>
+import type { DashboardInboxAttachment } from '../../../../functions/inbox'
+import { downloadDashboardInboxAttachment } from '../../../../functions/inbox'
+import { pushToast } from '../../../../functions/toasts'
+
+const attachments = useReactiveProp<DashboardInboxAttachment[]>('attachments', [])
+const mailbox = useReactiveProp('mailbox', '')
+const messageId = useReactiveProp('messageId', '')
+const downloadingId = state('')
+
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0)
+    return 'Unknown size'
+
+  const units = ['B', 'KB', 'MB', 'GB']
+  const unitIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const value = bytes / 1024 ** unitIndex
+  return `${value >= 10 || unitIndex === 0 ? Math.round(value) : value.toFixed(1)} ${units[unitIndex]}`
+}
+
+async function download(attachment: DashboardInboxAttachment): Promise<void> {
+  downloadingId.set(attachment.id)
+  try {
+    await downloadDashboardInboxAttachment(messageId(), attachment, mailbox())
+  }
+  catch (error) {
+    pushToast('error', 'Could not download attachment', { detail: String(error) })
+  }
+  finally {
+    downloadingId.set('')
+  }
+}
+</script>
+
+<section :if="attachments().length" aria-label="Message attachments" class="mb-4 mx-4 p-3 bg-gray-50 dark:bg-neutral-800 border border-gray-200 rounded-md dark:border-neutral-600">
+  <div class="flex gap-2 items-center text-gray-800 dark:text-neutral-200">
+    <span aria-hidden="true" class="h-5 w-5 i-hugeicons-attachment-01"></span>
+    <h3 class="font-medium text-sm">Attachments</h3>
+    <span class="text-gray-500 text-xs dark:text-neutral-400">{{ attachments().length }}</span>
+  </div>
+  <ul class="mt-3 space-y-2">
+    <li :for="attachment in attachments()" class="flex gap-3 items-center justify-between p-2 bg-white dark:bg-neutral-700 border border-gray-200 rounded-md dark:border-neutral-600">
+      <div class="min-w-0">
+        <p class="font-medium text-gray-900 text-sm truncate dark:text-white">{{ attachment.name }}</p>
+        <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ formatBytes(attachment.size) }}</p>
+      </div>
+      <Button size="sm" :loading="downloadingId() === attachment.id" :disabled="Boolean(downloadingId())" @click="download(attachment)">
+        <span :if="downloadingId() !== attachment.id" aria-hidden="true" class="h-4 w-4 i-hugeicons-download-04"></span>
+        Download
+      </Button>
+    </li>
+  </ul>
+</section>

package/resources/components/Dashboard/Email/InboxDashboard.stx

@@ -121,7 +121,7 @@ async function openEmail(value: DashboardInboxEmail | CustomEvent<DashboardInbox
   deletePending.set(false)
   replyText.set('')
 
-  if (!email.bodyHtml && !email.bodyText) {
+  if (!email.detailsLoaded) {
     try {
       const body = await fetchDashboardInboxBody(email.id, mailbox())
       emails.set(emails().map(item => item.id === email.id ? { ...item, ...body } : item))
@@ -228,7 +228,7 @@ onMount(() => {
 </script>
 
 <div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <div class="flex min-h-[calc(100vh-8rem)]">
+  <div class="flex flex-col md:flex-row min-h-[calc(100vh-8rem)]">
     <EmailSidebar
       activeFolder="inbox"
       :folders="folders"
@@ -237,10 +237,10 @@ onMount(() => {
       @compose="compose"
     />
 
-    <div class="flex overflow-hidden flex-1 flex-col">
+    <div class="flex overflow-hidden flex-1 flex-col min-w-0">
       <header class="px-4 py-3 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
         <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div class="flex gap-4 items-center">
+          <div class="flex flex-col gap-2 sm:flex-row sm:gap-4 sm:items-center min-w-0">
             <h1 class="font-bold text-gray-900 text-xl dark:text-white">Inbox</h1>
             <EmailNavigation active="inbox" />
           </div>
@@ -277,6 +277,7 @@ onMount(() => {
           :replying="isReplying"
           :replyText="replyText"
           :canSendReply="canSendReply"
+          :mailbox="mailbox"
           @close="closeEmail"
           @toggle-read="toggleSelectedRead"
           @request-delete="requestDelete"

package/resources/components/Dashboard/Email/InboxMessageDetail.stx

@@ -7,6 +7,7 @@ const deleting = useReactiveProp('deleting', false)
 const replying = useReactiveProp('replying', false)
 const replyText = useReactiveProp('replyText', '')
 const canSendReply = useReactiveProp('canSendReply', false)
+const mailbox = useReactiveProp('mailbox', '')
 const emit = defineEmits()
 
 function message(): DashboardInboxEmail | null {
@@ -69,10 +70,11 @@ function formatDate(value: string): string {
       :text="message()?.bodyText || ''"
       :title="message()?.subject || 'Inbound email preview'"
     />
-    <div :if="message()?.hasAttachments" class="flex gap-3 items-start mb-4 mx-4 p-3 text-gray-700 text-sm dark:text-neutral-300 bg-gray-50 dark:bg-neutral-800 border border-gray-200 rounded-md dark:border-neutral-600">
-      <span class="flex-shrink-0 mt-0.5 h-5 w-5 i-hugeicons-attachment-01"></span>
-      <p>This message includes attachments. Attachment downloads are not exposed by the inbox API yet.</p>
-    </div>
+    <InboxAttachmentList
+      :attachments="message()?.attachments || []"
+      :mailbox="mailbox"
+      :messageId="message()?.id || ''"
+    />
   </div>
 
   <div class="p-4 bg-white dark:bg-neutral-700 border-gray-200 border-t dark:border-neutral-600">

package/resources/components/Dashboard/Kanban/KanbanBoardDashboard.stx

@@ -1,5 +1,5 @@
 <script client>
-  // Kanban board view (stacksjs/stacks#1846 Phase 2).
+  // Kanban board view.
   //
   // Optimistic-update pattern:
   //   1. The DnD handler mutates the store immediately (so the card
@@ -29,7 +29,7 @@
   const columns = derived(() => kanban.currentColumns())
   const allLabels = derived(() => kanban.currentLabels())
 
-  // Card detail modal state — read straight from the store. The
+  // Card detail modal state - read straight from the store. The
   // modal itself lives at the bottom of this file.
   const openCard = derived(() => kanban.openCard())
   const loadingCard = derived(() => kanban.loadingCard())
@@ -48,6 +48,9 @@
   const titleDraft = state('')
   const descDraft = state('')
   const commentDraft = state('')
+  const editingCommentId = state(null)
+  const commentEditDraft = state('')
+  const savingCommentId = state(null)
   const showLabelPicker = state(false)
   const showAssigneePicker = state(false)
   const showNewLabelComposer = state(false)
@@ -83,6 +86,9 @@
     descDraft.set(c ? (c.description || '') : '')
     dueDateDraft.set(c?.dueDate ? c.dueDate.slice(0, 10) : '')
     commentDraft.set('')
+    editingCommentId.set(null)
+    commentEditDraft.set('')
+    savingCommentId.set(null)
   }
   // Sync drafts when the open card changes (open / close / refetch).
   effect(() => { openCard(); Promise.resolve().then(syncDraftsFromCard) })
@@ -134,6 +140,40 @@
     if (ok) commentDraft.set('')
   }
 
+  function startCommentEdit(id, body) {
+    editingCommentId.set(id)
+    commentEditDraft.set(body)
+  }
+
+  function cancelCommentEdit() {
+    editingCommentId.set(null)
+    commentEditDraft.set('')
+  }
+
+  async function saveCommentEdit(id) {
+    const body = commentEditDraft().trim()
+    if (!body || savingCommentId()) return
+    savingCommentId.set(id)
+    try {
+      if (await kanban.updateComment(id, body))
+        cancelCommentEdit()
+    }
+    finally {
+      savingCommentId.set(null)
+    }
+  }
+
+  function handleCommentEditKeydown(event, id) {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      cancelCommentEdit()
+    }
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      void saveCommentEdit(id)
+    }
+  }
+
   function requestDelete(kind: DeleteKind, id: number, hasCards = false): void {
     pendingDelete.set({ kind, id, hasCards })
   }
@@ -219,7 +259,7 @@
   }
 
   // Pull the id from the URL through the navigation composable.
-  // (stacksjs/stacks#1838 — no vanilla DOM in dashboard pages).
+  // (stacksjs/stacks#1838 - no vanilla DOM in dashboard pages).
   const id = useNavigation().urlIdParam()
   if (id !== null)
     kanban.loadBoard(id)
@@ -647,7 +687,7 @@
     </div>
   </div>
 
-  <!-- ───────────── Card detail modal (Phase 3) ───────────── -->
+  <!-- Card detail modal -->
   <!-- Opens on card click. Fixed positioned with a backdrop; closes
       on backdrop click + Escape. Sections (top → bottom):
         · Title (inline-editable, blurs to commit)
@@ -739,9 +779,26 @@
                   <div class="flex gap-2 items-baseline">
                     <span class="font-medium text-xs text-zinc-700 dark:text-zinc-200" :text="cm.authorName || cm.authorEmail || 'Unknown'"></span>
                     <span class="text-[10px] text-zinc-400" :text="formatTimestamp(cm.createdAt)"></span>
-                    <Button variant="ghost" size="xs" @click="requestDelete('comment', cm.id)"><span class="text-red-500">Delete</span></Button>
+                    <template :if="editingCommentId() !== cm.id">
+                      <Button variant="ghost" size="xs" @click="startCommentEdit(cm.id, cm.body)">Edit</Button>
+                      <Button variant="ghost" size="xs" @click="requestDelete('comment', cm.id)"><span class="text-red-500">Delete</span></Button>
+                    </template>
+                  </div>
+                  <p :if="editingCommentId() !== cm.id" class="mt-0.5 text-xs text-zinc-700 whitespace-pre-wrap dark:text-zinc-300" :text="cm.body"></p>
+                  <div :if="editingCommentId() === cm.id" class="mt-2">
+                    <textarea
+                      x-model="commentEditDraft"
+                      @keydown="handleCommentEditKeydown($event, cm.id)"
+                      rows="3"
+                      maxlength="10000"
+                      :aria-label="'Edit comment by ' + (cm.authorName || cm.authorEmail || 'Unknown')"
+                      class="px-3 py-2 w-full text-sm text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-y"
+                    ></textarea>
+                    <div class="flex gap-2 justify-end mt-2">
+                      <Button variant="secondary" size="xs" :disabled="savingCommentId() === cm.id" @click="cancelCommentEdit()">Cancel</Button>
+                      <Button size="xs" :loading="savingCommentId() === cm.id" :disabled="!commentEditDraft().trim()" @click="saveCommentEdit(cm.id)">Save comment</Button>
+                    </div>
                   </div>
-                  <p class="mt-0.5 text-xs text-zinc-700 whitespace-pre-wrap dark:text-zinc-300" :text="cm.body"></p>
                 </div>
               </li>
             </ul>

package/resources/components/Dashboard/Kanban/KanbanBoardsDashboard.stx

@@ -1,12 +1,9 @@
 <script client>
-  // Kanban — Boards index (stacksjs/stacks#1846, Phase 1).
-  //
   // Lists every non-archived board with a card-count badge. Clicking a
-  // board navigates to `/kanban/[id]` — Phase 2 ships the actual
-  // drag-and-drop board view at that URL.
+  // board navigates to its complete drag-and-drop view.
   //
   // Follows #1838 conventions: no <script server>, no vanilla DOM
-  // reads, all state via the store. Role gate via useRole() — the
+  // reads, all state via the store. Role gate via useRole() - the
   // surface is dev-mode-only (admins + devs see it, clients don't).
   import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
   import { kanbanStore } from '~/storage/framework/defaults/views/dashboard/stores/kanban'
@@ -175,7 +172,7 @@
       <p class="mt-2 text-xs text-zinc-500">Most common: migrations haven't run yet. Try <code>./buddy migrate</code>.</p>
     </div>
 
-    <!-- Empty state — DB reachable but no boards yet -->
+    <!-- Empty state - DB reachable but no boards yet -->
     <div :if="!loading && !error && !hasBoards" class="px-6 py-12 text-center border border-dashed border-zinc-300 rounded-lg dark:border-zinc-700">
       <span class="block mb-3 mx-auto h-10 w-10 text-zinc-400 i-hugeicons-layout-3-column"></span>
       <p class="font-medium text-sm text-zinc-700 dark:text-zinc-300">No boards yet</p>

package/resources/components/Dashboard/Management/PermissionsDashboard.stx

@@ -5,7 +5,7 @@
   // and the role/permission matrix against the live `user_roles` /
   // `role_permissions` / `user_permissions` pivots. All persistence
   // flows through the dashboard RBAC endpoints, which delegate
-  // to `@stacksjs/auth`'s `Rbac` facade — no direct DB writes from the
+  // to `@stacksjs/auth`'s `Rbac` facade - no direct DB writes from the
   // page.
   //
   // Follows #1838 conventions:
@@ -13,13 +13,13 @@
   //   - All state in the rbacStore; the page is pure presentation.
   //   - Mutations are optimistic with rollback on failure (store handles
   //     the snapshot/rollback dance).
-  import { useStore } from '@stacksjs/stx'
   import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
+  import { rbacStore } from '~/storage/framework/defaults/views/dashboard/stores/rbac'
 
-  const rbac = useStore('rbac')
+  const rbac = rbacStore
   // Admin-only surface. Per `useRole.ts`, `isAdmin()` returns true for
   // any user with the `admin` role *or* an unauthenticated viewer on
-  // the localhost dev dashboard — same permissive-dev defaults the rest
+  // the localhost dev dashboard - same permissive-dev defaults the rest
   // of the management surface uses.
   const { isAdmin } = useRole()
   const canManage = derived(() => isAdmin())

package/resources/components/Dashboard/NotFoundDashboard.stx

@@ -11,19 +11,16 @@
           Sorry, we couldn't find the page you're looking for. The page might have been moved or deleted.
         </p>
         <div class="flex gap-x-6 items-center justify-center mt-10">
-          <Button tag="a" href="/dashboard">
+          <Button tag="a" href="/">
             Return to dashboard
           </Button>
-          <Button tag="a" href="/" variant="ghost">
-            Go to home <span aria-hidden="true">&rarr;</span>
-          </Button>
         </div>
       </div>
 
       <div>
         <h2 class="font-semibold leading-6 text-base text-center text-gray-900 dark:text-white">You might be looking for</h2>
         <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6">
-          <StxLink to="/dashboard" class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow hover:shadow-md duration-200 transition-shadow">
+          <StxLink to="/" class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow hover:shadow-md duration-200 transition-shadow">
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0 p-3 bg-blue-500 rounded-md">

package/resources/components/Dashboard/Queries/QueryDashboard.stx

@@ -97,6 +97,10 @@ function formatDate(value: string): string {
   return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
 }
 
+function queryDetailsPath(id: DashboardQueryLog['id']): string {
+  return `/queries/${encodeURIComponent(String(id))}`
+}
+
 function typeClass(value: DashboardQueryLog['type']): string {
   const classes: Record<DashboardQueryLog['type'], string> = {
     SELECT: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
@@ -248,9 +252,9 @@ onMount(() => {
               </td>
               <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(query.executedAt) }}</td>
               <td class="pr-5 py-3.5 text-right">
-                <StxLink :to="'/queries/' + query.id" :aria-label="'View query ' + query.id" class="inline-flex p-1.5 text-neutral-500 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-md">
+                <a :href="queryDetailsPath(query.id)" :aria-label="'View query ' + query.id" class="inline-flex p-1.5 text-neutral-500 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-md">
                   <span class="h-4 w-4 i-hugeicons-arrow-right-01"></span>
-                </StxLink>
+                </a>
               </td>
             </tr>
           </template>

package/resources/components/Dashboard/Settings/AppearanceSettingsDashboard.stx

@@ -1,6 +1,6 @@
 <script server>
 // The navigation the toggles below control. Read from the same builder the
-// layout uses, so the list can never drift from what the sidebar renders —
+// layout uses, so the list can never drift from what the sidebar renders -
 // including sections a project has switched off in config/dashboard.ts, which
 // simply are not here to toggle.
 import { buildWebSidebarSections } from '~/storage/framework/defaults/resources/functions/dashboard/sidebar'
@@ -29,7 +29,7 @@ const appearance = useAppearance()
 // see until you navigate away is the thing this is avoiding.
 const styleOptions = SIDEBAR_STYLE_OPTIONS
 const colorModes = COLOR_MODE_OPTIONS
-const sections = navSections
+const sections = {{ navSections }}
 
 const sidebarStyle = appearance.sidebarStyle
 const colorMode = appearance.colorMode
@@ -58,9 +58,9 @@ function resetAll() {
 }
 
 // Selected state travels as a data attribute rather than as a swapped class
-// string. It began as a workaround — Crosswind could not see class names that
+// string. It began as a workaround - Crosswind could not see class names that
 // existed only inside a client-script expression, so those utilities were never
-// emitted and the control rendered unstyled — and that gap is now closed
+// emitted and the control rendered unstyled - and that gap is now closed
 // upstream. It stays because it is the better shape regardless: one selector
 // per state in the block below, rather than two class strings kept in sync by
 // hand inside a ternary.

package/resources/components/Dashboard/UI/EmptyState.stx

@@ -19,9 +19,9 @@ const actionHref = useReactiveProp('actionHref', '')
   <p :if="description()" class="mb-6 max-w-sm text-neutral-500 text-sm dark:text-neutral-400" :text="description()"></p>
 
   <Button
-    :if="actionLabel()"
+    :if="actionLabel() && actionHref()"
     tag="a"
-    :href="actionHref() || '#'"
+    :href="actionHref()"
   >
     <span :if="actionIcon()" :class="actionIcon() + ' h-4 w-4'"></span>
     <span :text="actionLabel()"></span>

package/resources/components/Dashboard/UI/PageLayout.stx

@@ -3,11 +3,11 @@ interface PageLayoutProps {
   /**
    * Visual variant.
    *
-   * - `default` — standard centered column with `mx-auto` + max-width
+   * - `default` - standard centered column with `mx-auto` + max-width
    *   gutter. Use for almost every page.
-   * - `centered` — vertically centered hero block on a min-height
+   * - `centered` - vertically centered hero block on a min-height
    *   container. Use for splash / 404 / empty-route pages.
-   * - `bare` — no container at all. Use when the page wants to own
+   * - `bare` - no container at all. Use when the page wants to own
    *   its own gutter (e.g. a settings page with side-by-side panels
    *   that already pad themselves).
    */

package/resources/functions/dashboard/sidebar.ts

@@ -428,11 +428,11 @@ export function buildNavSections(
       // The layout's role map hides the row from client-role viewers.
       { to: '/kanban', icon: 'table', text: 'Kanban', roles: ['admin', 'dev'] },
     ]
-    // CI tracking (stacksjs/stacks#1844) — opt-in via `ci.enabled` in
-    // config/dashboard.ts. The page additionally checks `useRole().isDev()`
-    // (stub for #1843) before rendering.
+    // CI tracking (stacksjs/stacks#1844) - opt-in via `ci.enabled` in
+    // config/dashboard.ts. Keep the row gate aligned with the page's
+    // `useRole().isDev()` check so client-only viewers never get a dead link.
     if (toggles.ci)
-      managementItems.push({ to: '/ci', icon: 'check-circle', text: 'CI' })
+      managementItems.push({ to: '/ci', icon: 'check-circle', text: 'CI', roles: ['dev'] })
     sections.push(['management', 'management', managementItems])
   }