@stacksjs/defaults 0.70.353 → 0.70.355

package/resources/components/Dashboard/Ci/CiDashboard.stx

@@ -5,7 +5,7 @@
   // (Action: Dashboard/Ci/StatusAction → @stacksjs/github). Active tab +
   // status filter live in the `ciStore` so they survive SPA navigation.
   //
-  // No <script server>, no window./document. reads — per #1838 the page
+  // No <script server>, no window./document. reads - per #1838 the page
   // is pure presentation against the store.
   import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
   import { ciStore } from '~/storage/framework/defaults/views/dashboard/stores/ci'
@@ -17,7 +17,7 @@
   // Role check is now backed by the real RBAC store + `/api/dashboard/auth/me`
   // (stacksjs/stacks#1843). `isDev()` returns true if the authenticated user
   // holds the `admin` or `dev` role, OR if the request is unauthenticated
-  // (i.e. local dev dashboard with no bearer token) — see `useRole.ts` for
+  // (i.e. local dev dashboard with no bearer token) - see `useRole.ts` for
   // the full resolution chain.
   const { isDev } = useRole()
   const canView = derived(() => isDev())
@@ -129,7 +129,7 @@
 
   // ─── Runner pressure sparkline (stacksjs/stacks#1850) ────────────
   //
-  // Inline SVG sparkline — no chart lib. The path is built off the
+  // Inline SVG sparkline - no chart lib. The path is built off the
   // active tab's sample history with a simple linear scale: x maps
   // to sample index (oldest left, newest right), y maps to queue
   // depth normalised against the larger of the org's cap or the
@@ -139,6 +139,8 @@
     const tab = activeTab()
     return (ci.runnerHistoryByOrg()[tab] || [])
   })
+  const runnerHistoryError = derived(() => ci.runnerHistoryErrors()[activeTab()] || '')
+  const loadingHistory = derived(() => ci.loadingRunnerHistory()[activeTab()] === true)
 
   effect(() => {
     const tab = activeTab()
@@ -173,7 +175,12 @@
     return samples && samples.length >= 2
   }
 
-  // Top-level fetch — runs on both hard reload (SSR hydration) and SPA
+  function retryRunnerHistory() {
+    const tab = activeTab()
+    if (tab) ci.loadRunnerHistory(tab, true)
+  }
+
+  // Top-level fetch - runs on both hard reload (SSR hydration) and SPA
   // mount, since `<script client>` re-executes on every entry. The store
   // tracks its own loading flag so back-to-back calls don't double-fire.
   ci.load()
@@ -195,7 +202,7 @@
     <p class="mt-1 text-sm text-zinc-500">GitHub Actions health across the configured orgs. Configure in <code class="text-xs">config/dashboard.ts</code>.</p>
   </header>
 
-  <!-- Disabled state — the surface is off in config/dashboard.ts -->
+  <!-- Disabled state - the surface is off in config/dashboard.ts -->
   <div :if="disabled" class="px-5 py-8 text-center bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
     <p class="text-sm text-zinc-600 dark:text-zinc-400">CI tracking is disabled.</p>
     <p class="mt-1 text-xs text-zinc-500">Enable it in <code>config/dashboard.ts</code> by setting <code>ci.enabled = true</code> and listing one or more orgs.</p>
@@ -247,7 +254,7 @@
       <span class="text-zinc-300 dark:text-zinc-700">·</span>
       <span class="text-zinc-500 dark:text-zinc-400" :text="runnersText"></span>
     </div>
-    <!-- Sparkline showing recent queue depth for the active org —
+    <!-- Sparkline showing recent queue depth for the active org -
         appears only when alerts are on (history collection is gated
         on `ci.alerts.enabled`). Drawn inline as a single SVG path
         so we don't pull a chart library for 20 datapoints. -->
@@ -257,6 +264,17 @@
         <path :d="sparklinePath()" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
       </svg>
     </div>
+    <div :if="loadingHistory() && !hasHistory()" role="status" class="flex gap-2 items-center mb-5 text-zinc-500 text-xs dark:text-zinc-400">
+      <span aria-hidden="true" class="h-3.5 w-3.5 animate-spin i-hugeicons-loading-03"></span>
+      <span>Loading runner history</span>
+    </div>
+    <div :if="runnerHistoryError()" role="alert" class="flex flex-wrap gap-3 items-center justify-between mb-5 px-3 py-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900/50">
+      <div>
+        <p class="font-medium text-amber-800 text-xs dark:text-amber-200">Runner history unavailable</p>
+        <p class="mt-0.5 text-amber-700 text-xs dark:text-amber-300" :text="runnerHistoryError"></p>
+      </div>
+      <Button variant="secondary" size="xs" :loading="loadingHistory" @click="retryRunnerHistory()">Retry</Button>
+    </div>
 
     <!-- Repo cards -->
     <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))">

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

@@ -15,6 +15,8 @@ const country = state('')
 const region = state('North America')
 const status = state<'active' | 'inactive'>('active')
 const isDefault = state(false)
+const code = state('')
+const exemptible = state(false)
 let hydrationKey = ''
 
 const regions = ['North America', 'South America', 'Europe', 'Asia', 'Africa', 'Oceania', 'Antarctica'] as const
@@ -36,6 +38,8 @@ effect(() => {
   region.set(current?.region || 'North America')
   status.set(current?.status || 'active')
   isDefault.set(current?.isDefault || false)
+  code.set(current?.code || '')
+  exemptible.set(current?.exemptible || false)
 })
 
 function submit(): void {
@@ -49,6 +53,8 @@ function submit(): void {
     region: region(),
     status: status(),
     isDefault: isDefault(),
+    code: code().trim(),
+    exemptible: exemptible(),
   })
 }
 
@@ -105,6 +111,11 @@ function errorMessages(): string[] {
               </select>
             </label>
           </div>
+          <label class="block">
+            <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Code</span>
+            <input x-model="code" type="text" placeholder="sales" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+            <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">What the application matches on. Renaming the rate above does not change what is charged; changing this can.</span>
+          </label>
           <label class="flex gap-3 items-start p-3 border border-gray-200 rounded-lg dark:border-neutral-700">
             <input x-model="isDefault" type="checkbox" class="mt-0.5 h-4 w-4 text-blue-600 border-gray-300 rounded" />
             <span>
@@ -112,6 +123,18 @@ function errorMessages(): string[] {
               <span class="block mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Selecting this clears the default flag from every other rate.</span>
             </span>
           </label>
+          {{--
+            Spelled out rather than labelled "exempt", because the two read
+            alike and mean opposite things: this marks the component as one an
+            exemption can lift, not one that is currently unpaid.
+          --}}
+          <label class="flex gap-3 items-start p-3 border border-gray-200 rounded-lg dark:border-neutral-700">
+            <input x-model="exemptible" type="checkbox" class="mt-0.5 h-4 w-4 text-blue-600 border-gray-300 rounded" />
+            <span>
+              <span class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Can be exempted</span>
+              <span class="block mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Customers who qualify for an exemption are not charged this component. Leave off for anything owed regardless - an excise or a city levy is usually still due.</span>
+            </span>
+          </label>
         </div>
       </div>
       <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">

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

@@ -16,6 +16,8 @@ interface TaxRateWritePayload {
   region: string
   status: 'active' | 'inactive'
   isDefault: boolean
+  code: string
+  exemptible: boolean
 }
 
 const emptySummary: TaxRateSummary = { total: 0, active: 0, countries: 0, averageRate: 0, defaultConflicts: 0 }
@@ -136,6 +138,8 @@ async function saveTax(payload: TaxRateWritePayload): Promise<void> {
     region: payload.region,
     status: payload.status,
     isDefault: payload.isDefault,
+    code: payload.code,
+    exemptible: payload.exemptible,
   }
 
   saving.set(true)

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

@@ -39,9 +39,17 @@ function formatDate(value: string): string {
         <template :for="record in records()" :key="record.id">
           <tr class="align-top">
             <td class="px-4 py-4">
-              <div class="flex gap-2 items-center">
+              <div class="flex flex-wrap gap-2 items-center">
                 <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</p>
                 <span :if="record.isDefault" class="px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">Default</span>
+                {{--
+                  Both badges change what a customer is charged, so they sit
+                  next to the name rather than in a column someone has to
+                  scroll to. The code is what application code matches on;
+                  renaming the rate must not change the bill.
+                --}}
+                <span :if="record.code" class="px-2 py-0.5 font-mono text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record.code }}</span>
+                <span :if="record.exemptible" class="px-2 py-0.5 font-medium text-amber-700 text-xs dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40 rounded-full" title="Not charged to a customer who qualifies for an exemption">Exemptible</span>
               </div>
               <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.type }}</p>
             </td>

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

@@ -23,6 +23,13 @@ const deleteRecord = state<ProductWaitlistRecord | null>(null)
 const isSaving = state(false)
 const isDeleting = state(false)
 const validationErrors = state<Record<string, string>>({})
+const metrics = derived(() => [
+  { label: 'Recorded', value: summary().total },
+  { label: 'Waiting', value: summary().waiting },
+  { label: 'Notified', value: summary().notified },
+  { label: 'Purchased', value: summary().purchased },
+  { label: 'Conversion', value: `${summary().conversionRate}%` },
+])
 
 function rows(): ProductWaitlistRecord[] {
   const query = search().trim().toLowerCase()
@@ -166,13 +173,7 @@ onMount(() => {
   </div>
 
   <section class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <template :for="item in [
-      { label: 'Recorded', value: summary().total },
-      { label: 'Waiting', value: summary().waiting },
-      { label: 'Notified', value: summary().notified },
-      { label: 'Purchased', value: summary().purchased },
-      { label: 'Conversion', value: summary().conversionRate + '%' }
-    ]">
+    <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/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>