@stacksjs/defaults 0.70.353 → 0.70.355

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])
   }
 

package/routes/dashboard-api.ts

@@ -264,28 +264,15 @@ route.group({ prefix: '/api/dashboard', apiResponse: true }, () => {
   // requests — see the action for the soft-fallback shape.
   route.get('/auth/me', 'Actions/Dashboard/Auth/MeAction')
 
-  // Kanban surface (stacksjs/stacks#1846). Phase 1: read-only.
-  //
-  // Phase 2 lands write endpoints under the same prefix:
-  //   POST   /kanban/boards           — store
-  //   PATCH  /kanban/boards/{id}      — update
-  //   DELETE /kanban/boards/{id}      — destroy
-  //   POST   /kanban/boards/reorder   — bulk position update
-  //   POST   /kanban/columns          — store
-  //   PATCH  /kanban/columns/{id}     — update
-  //   POST   /kanban/columns/reorder  — bulk position update
-  //   POST   /kanban/cards            — store
-  //   PATCH  /kanban/cards/{id}       — update (incl. column move)
-  //   POST   /kanban/cards/reorder    — bulk position update
-  //
+  // Kanban reads and mutations share the guarded dashboard surface.
   // Kanban data is local-only without authentication. Outside local
   // environments every read and write uses the same auth + admin guard as
   // the other operational dashboard surfaces.
-  // Reads (Phase 1)
+  // Reads
   guard(route.get('/kanban/boards', 'Actions/Dashboard/Kanban/BoardsIndexAction'))
   guard(route.get('/kanban/boards/{id}', 'Actions/Dashboard/Kanban/BoardShowAction'))
 
-  // Writes (Phase 2). The reorder endpoints are POST not PATCH because
+  // Writes. The reorder endpoints are POST not PATCH because
   // their semantics — "here's the full new state of this slice of the
   // board" — match the resource-replacement intent better than PATCH's
   // "apply this delta" verb. They also accept a body shape that PATCH
@@ -305,7 +292,7 @@ route.group({ prefix: '/api/dashboard', apiResponse: true }, () => {
   guard(route.delete('/kanban/cards/{id}', 'Actions/Dashboard/Kanban/CardDestroyAction'))
   guard(route.post('/kanban/cards/reorder', 'Actions/Dashboard/Kanban/CardsReorderAction'))
 
-  // Phase 3 — card detail + labels + assignees + comments.
+  // Card detail, labels, assignees, and comments.
   //
   // The card-show endpoint is the only "single card with everything"
   // read; the boards/{id} response already embeds labels + assignees
@@ -325,10 +312,10 @@ route.group({ prefix: '/api/dashboard', apiResponse: true }, () => {
   guard(route.post('/kanban/cards/{id}/labels', 'Actions/Dashboard/Kanban/CardLabelsSyncAction'))
   guard(route.post('/kanban/cards/{id}/assignees', 'Actions/Dashboard/Kanban/CardAssigneesSyncAction'))
 
-  // Comments. Append-only thread: store + destroy, no edit yet — the
-  // history-preservation argument outweighs the "fix a typo" argument
-  // until someone explicitly asks for editing.
+  // Card-scoped comment thread. Writes stay under the dashboard guard while
+  // the CardComment model also exposes its conventional generated API.
   guard(route.post('/kanban/cards/{id}/comments', 'Actions/Dashboard/Kanban/CardCommentStoreAction'))
+  guard(route.patch('/kanban/comments/{id}', 'Actions/Dashboard/Kanban/CardCommentUpdateAction'))
   guard(route.delete('/kanban/comments/{id}', 'Actions/Dashboard/Kanban/CardCommentDestroyAction'))
 
   // Lightweight user list for the assignee picker. Distinct from the
@@ -466,6 +453,7 @@ route.group({ prefix: '/api/dashboard', apiResponse: true }, () => {
   // the per-mailbox inbox.json index. Both are guarded outside local/dev
   // because they touch real mailbox state and PII.
   guard(route.get('/email/inbox', 'Actions/Dashboard/Email/InboxIndexAction'))
+  guard(route.get('/email/inbox/{id}/attachments/{attachmentId}', 'Actions/Dashboard/Email/InboxAttachmentDownloadAction'))
   guard(route.get('/email/inbox/{id}', 'Actions/Dashboard/Email/InboxShowAction'))
   guard(route.get('/email/stats', 'Actions/Dashboard/Email/InboxStatsAction'))
   guard(route.get('/email/activity', 'Actions/Dashboard/Email/InboxActivityAction'))

package/views/dashboard/.discovered-models.json

@@ -138,6 +138,16 @@
         "highlight": true
       }
     },
+    {
+      "id": "delivery-stop",
+      "name": "DeliveryStop",
+      "icon": "tablecells.fill",
+      "hasDedicatedPage": false,
+      "category": "commerce",
+      "dashboard": {
+        "highlight": true
+      }
+    },
     {
       "id": "deployment",
       "name": "Deployment",
@@ -168,6 +178,13 @@
         "highlight": true
       }
     },
+    {
+      "id": "driver-ping",
+      "name": "DriverPing",
+      "icon": "tablecells.fill",
+      "hasDedicatedPage": false,
+      "category": "commerce"
+    },
     {
       "id": "email-list",
       "name": "EmailList",
@@ -456,6 +473,13 @@
         "highlight": true
       }
     },
+    {
+      "id": "social-account",
+      "name": "SocialAccount",
+      "icon": "tablecells.fill",
+      "hasDedicatedPage": false,
+      "category": "data"
+    },
     {
       "id": "social-post",
       "name": "SocialPost",

package/views/dashboard/layouts/default.stx

@@ -1,6 +1,6 @@
 <script server>
 // Dashboard chrome. The navigation pane is `@stacksjs/components`' <Sidebar>
-// in its `macos` theme — the same component Craft apps use, so the dashboard
+// in its `macos` theme - the same component Craft apps use, so the dashboard
 // and a native Craft build render the identical source list.
 //
 // This used to be a hand-rolled <aside> plus ~180 lines of plain CSS, because
@@ -89,7 +89,7 @@ canvas[id$="_chart"] {
  * solid body background would paint over it. So the body stays clear and the
  * content color lives on the scrolling pane, which lets the frosted material
  * read through the translucent sidebar. (Do not write angle-bracket tag names in
- * a layout style-block comment — stx parses them as elements and breaks out.)
+ * a layout style-block comment - stx parses them as elements and breaks out.)
  */
 body {
   background: transparent;
@@ -104,6 +104,9 @@ body {
 [data-stx-content] {
   min-width: 0;
   min-height: 100vh;
+  /* Wide tables scroll inside their own overflow containers without widening
+     the document or moving the fixed dashboard shell. */
+  overflow-x: hidden;
   margin-left: var(--stx-sidebar-width, 250px);
   background: #f4f4f5;
   transition: margin-left 0.3s ease-out;
@@ -158,15 +161,15 @@ body {
  * Two halves, and only one of them is the sidebar.
  *
  * THE SHELL. Arc's defining move is that the content is not a pane butted up
- * against a sidebar — it is a card floating ON the sidebar's background, inset
+ * against a sidebar - it is a card floating ON the sidebar's background, inset
  * and rounded on every side. So the panel color moves to the body, the sidebar
  * goes transparent on top of it, and the content gets a margin all the way
  * round. No sidebar theme can do this part; it belongs to the layout.
  *
  * THE ROWS. The installed @stacksjs/components predates its own `arc` theme,
  * so the component renders macOS rows and this restyles them. The values are
- * copied from that theme on purpose — 30px rows, 8px radius, a white card with
- * a hairline and a one-pixel shadow instead of an accent fill — so that when
+ * copied from that theme on purpose - 30px rows, 8px radius, a white card with
+ * a hairline and a one-pixel shadow instead of an accent fill - so that when
  * the package ships it, the component and this skin agree and these rules
  * become a no-op rather than a second, competing look.
  *
@@ -215,7 +218,7 @@ html[data-appearance="arc"] [data-stx-content] {
      properties wedges the interpolation in WebKit: switching appearance leaves
      it stuck at the old value until a reload. Inheriting the base declaration
      means the property never changes when the appearance does, so there is
-     nothing to wedge — and the collapse animation keeps working identically in
+     nothing to wedge - and the collapse animation keeps working identically in
      both styles.
 
      The panel strip down the card's left side is the sidebar's own trailing
@@ -224,20 +227,20 @@ html[data-appearance="arc"] [data-stx-content] {
   margin-right: var(--dash-arc-gap);
   margin-bottom: var(--dash-arc-gap);
   /* Beats the base rule's `min-height: 100vh`, which would otherwise hold the
-     card a full viewport tall and push its bottom edge off-screen — losing the
+     card a full viewport tall and push its bottom edge off-screen - losing the
      one gap that shows it is floating. */
   min-height: 0;
   /* The card is exactly the viewport minus its own gaps, and scrolls its own
      content. Letting the page scroll instead would grow the card past the
-     bottom of the window, so the one edge that proves it is floating — the
-     panel showing beneath it — would only ever appear at the end of a long
+     bottom of the window, so the one edge that proves it is floating - the
+     panel showing beneath it - would only ever appear at the end of a long
      page. This is also what Arc does: the sidebar is stationary and the card
      scrolls inside its frame. */
   height: calc(100vh - (2 * var(--dash-arc-gap)));
   overflow-y: auto;
   border-radius: var(--dash-arc-radius);
   background: #fff;
-  /* Clip page content to the rounded corners — full-bleed headers and tables
+  /* Clip page content to the rounded corners - full-bleed headers and tables
      otherwise square them off at the top. */
   overflow-x: hidden;
   box-shadow:
@@ -352,7 +355,7 @@ html[data-appearance="arc"].dark [data-sidebar-selection="accent"][data-window-k
 }
 
 /* The icon, count and chevron turn white on a macOS accent fill. On a white
-   card they must not — they keep their own tint, the same as an idle row. */
+   card they must not - they keep their own tint, the same as an idle row. */
 html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-icon],
 html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-chevron] {
   color: var(--stx-sidebar-icon, currentColor);
@@ -372,7 +375,7 @@ html[data-appearance="arc"] [data-sidebar-section] > div:first-child {
 
 /* A viewer can hide navigation sections they never use. Kept as CSS on an
    attribute rather than a DOM removal so the rows stay hydrated and a later
-   change re-shows them without a re-render — the same approach the role
+   change re-shows them without a re-render - the same approach the role
    filter above uses. */
 [data-sidebar-section][data-viewer-hidden="true"] {
   display: none;
@@ -397,7 +400,7 @@ registerStoresClient({ authStore, kanbanStore, rbacStore })
 
 // Helpers below return COMPLETE class strings (static + dynamic) and are
 // applied via `:class="fn(...)"` because stx's `{{ ... }}` placeholder is
-// not reactively bound inside a `class` attribute — only inside text content.
+// not reactively bound inside a `class` attribute - only inside text content.
 const toastIconClass = (type) => `flex-shrink-0 h-5 w-5 mt-0.5 ${({
   success: 'i-hugeicons-checkmark-circle-02 text-green-500 dark:text-green-400',
   error: 'i-hugeicons-alert-02 text-red-500 dark:text-red-400',
@@ -466,7 +469,7 @@ effect(() => {
 // The inline bootstrap at the top of this layout already stamped the root
 // attributes for the first paint. These effects keep them in step afterwards:
 // re-running `applyAppearance` whenever a preference signal changes is what
-// makes the settings page feel immediate — the shell restyles under the user
+// makes the settings page feel immediate - the shell restyles under the user
 // while they are still looking at the picker, with no reload and no navigation.
 // ---------------------------------------------------------------------------
 
@@ -487,7 +490,7 @@ effect(() => {
 function applySectionVisibility() {
   // The signal is read BEFORE the panes are looked up, and that order is the
   // whole point. Read after an early return, it never gets tracked on the first
-  // pass — the panes are not mounted when effects first run — so the effect
+  // pass - the panes are not mounted when effects first run - so the effect
   // ends up with no dependency and never runs again. The toggle then appears to
   // do nothing until a reload.
   const hidden = appearance.hiddenSections()
@@ -501,7 +504,7 @@ function applySectionVisibility() {
 
 // The effect covers later toggles. It cannot cover the FIRST paint on its own:
 // effects run before the layout's refs are populated, so the very first pass
-// finds no panes, and on a fresh load the preference never changes afterwards —
+// finds no panes, and on a fresh load the preference never changes afterwards -
 // leaving hidden sections visible until something else happens to touch the
 // signal. `onMount` below runs it again once the panes exist.
 effect(applySectionVisibility)

package/views/dashboard/stores/ci.ts

@@ -115,6 +115,7 @@ export const ciStore = defineStore('ci', () => {
   // Lazy-loaded on first view of an org's tab.
   const runnerHistoryByOrg = state<Record<string, Array<{ queued: number, sampledAt: string }>>>({})
   const loadingRunnerHistory = state<Record<string, boolean>>({})
+  const runnerHistoryErrors = state<Record<string, string>>({})
 
   const reposForTab = derived(() => {
     const tab = activeTab()
@@ -227,33 +228,37 @@ export const ciStore = defineStore('ci', () => {
     drilldownError.set(null)
   }
 
-  async function loadRunnerHistory(org: string): Promise<void> {
+  async function loadRunnerHistory(org: string, force = false): Promise<void> {
     // Already loaded? Don't re-fetch — runner samples have a 30s
     // refresh cadence anyway. If the user wants a fresh view they
     // can reload the page.
-    if (runnerHistoryByOrg()[org] !== undefined) return
+    if (!force && runnerHistoryByOrg()[org] !== undefined) return
     if (loadingRunnerHistory()[org]) return
 
     loadingRunnerHistory.set({ ...loadingRunnerHistory(), [org]: true })
+    runnerHistoryErrors.set({ ...runnerHistoryErrors(), [org]: '' })
     try {
       const data = await dashboardApi<{
         samples?: Array<{ queued: number, sampledAt: string }>
         error?: string
         disabled?: boolean
       }>(`/api/dashboard/ci/runner-history?org=${encodeURIComponent(org)}`)
-      if (data.disabled || data.error) {
+      if (data.disabled) {
         runnerHistoryByOrg.set({ ...runnerHistoryByOrg(), [org]: [] })
         return
       }
+      if (data.error)
+        throw new Error(data.error)
       runnerHistoryByOrg.set({
         ...runnerHistoryByOrg(),
         [org]: (data.samples ?? []).map(s => ({ queued: s.queued, sampledAt: s.sampledAt })),
       })
     }
-    catch {
-      // Soft-fail — sparkline renders nothing, no need to surface
-      // the error in the main CI page.
-      runnerHistoryByOrg.set({ ...runnerHistoryByOrg(), [org]: [] })
+    catch (e) {
+      runnerHistoryErrors.set({
+        ...runnerHistoryErrors(),
+        [org]: e instanceof Error ? e.message : 'Runner history could not be loaded.',
+      })
     }
     finally {
       loadingRunnerHistory.set({ ...loadingRunnerHistory(), [org]: false })
@@ -327,6 +332,7 @@ export const ciStore = defineStore('ci', () => {
     // Runner-pressure history (#1850)
     runnerHistoryByOrg,
     loadingRunnerHistory,
+    runnerHistoryErrors,
     loadRunnerHistory,
   }
 }, {

package/views/dashboard/stores/kanban.ts

@@ -41,8 +41,8 @@ interface CardRecord {
   archived: boolean
   createdAt: string | null
   updatedAt: string | null
-  // Optional pivot-derived fields. BoardShowAction populates them
-  // (Phase 3); CardStoreAction's optimistic insert leaves them empty.
+  // Optional pivot-derived fields. BoardShowAction populates them;
+  // CardStoreAction's optimistic insert leaves them empty.
   labels?: CardLabel[]
   assignees?: CardAssignee[]
 }
@@ -89,10 +89,9 @@ interface BoardDetail {
 /**
  * Kanban dashboard store (stacksjs/stacks#1846).
  *
- * Phase 1 surface — list of boards for the index page plus the
- * fetch-by-id helper that the board detail page (Phase 2) will use.
- * Drag-and-drop reorder, write mutations, and label/assignee ops land
- * in Phase 2 / Phase 3.
+ * Lists boards for the index page and fetches a board for its detail page.
+ * Drag-and-drop reorder, write mutations, labels, assignees, and comments
+ * share this store so optimistic updates and rollback have one owner.
  *
  * Persistence: only the last-viewed board id is cached in
  * sessionStorage so the user lands back where they left off when they
@@ -110,7 +109,7 @@ export const kanbanStore = defineStore('kanban', () => {
   const error = state<string | null>(null)
   const errorBoard = state<string | null>(null)
 
-  // Phase 3 — card detail modal state. Holding card + comments here
+  // Card detail modal state. Holding card + comments here
   // (instead of one of column.cards) keeps the modal independent of
   // its source: opening from a card click on the board uses the
   // already-loaded preview; refresh-mid-modal hits /cards/:id and
@@ -174,14 +173,14 @@ export const kanbanStore = defineStore('kanban', () => {
     }
   }
 
-  // ─── Mutations (Phase 2) ───────────────────────────────────────────
+  // Mutations
   //
   // Every mutation follows the same shape:
   //   1. Apply optimistically — update the local store immediately so
   //      the UI feels snappy.
   //   2. Fire the network request.
   //   3. On failure, restore the pre-mutation snapshot + set an error
-  //      message. Phase 3 wires a toast helper into the rollback path
+  //      message. The dashboard toast helper handles the rollback path
   //      so the user actually sees the failure.
   //
   // The mutations return the new entity (or null on failure) so
@@ -360,7 +359,7 @@ export const kanbanStore = defineStore('kanban', () => {
     }
   }
 
-  // ─── Phase 3 mutations (card detail) ─────────────────────────────
+  // Card detail mutations
 
   /**
    * Helper: project a CardRecord (board view) onto a partial
@@ -584,6 +583,43 @@ export const kanbanStore = defineStore('kanban', () => {
     }
   }
 
+  async function updateComment(commentId: number, body: string): Promise<boolean> {
+    const oc = openCard()
+    const trimmed = body.trim()
+    if (!oc || !trimmed) return false
+    const snapshot = oc.comments
+    const existing = snapshot.find(comment => comment.id === commentId)
+    if (!existing || existing.body === trimmed) return true
+
+    patchOpenCard({
+      comments: snapshot.map(comment => comment.id === commentId
+        ? { ...comment, body: trimmed }
+        : comment),
+    })
+    try {
+      const data = await dashboardApi<{ comment?: CardComment, error?: string }>(`/api/dashboard/kanban/comments/${commentId}`, {
+        method: 'PATCH',
+        body: { body: trimmed },
+      })
+      if (data.error || !data.comment)
+        throw new Error(data.error ?? 'Comment update failed')
+      const current = openCard()
+      if (current) {
+        patchOpenCard({
+          comments: current.comments.map(comment => comment.id === commentId
+            ? data.comment as CardComment
+            : comment),
+        })
+      }
+      return true
+    }
+    catch (error) {
+      patchOpenCard({ comments: snapshot })
+      errorCard.set(error instanceof Error ? error.message : String(error))
+      return false
+    }
+  }
+
   // ─── Label CRUD (board scope) ──────────────────────────────────────
 
   async function createLabel(input: { boardId: number, name: string, color?: string }): Promise<LabelRecord | null> {
@@ -652,7 +688,7 @@ export const kanbanStore = defineStore('kanban', () => {
     deleteCard,
     reorderCards,
     reorderColumns,
-    // Phase 3
+    // Card detail
     openCard,
     loadingCard,
     errorCard,
@@ -665,6 +701,7 @@ export const kanbanStore = defineStore('kanban', () => {
     syncCardLabels,
     syncCardAssignees,
     addComment,
+    updateComment,
     deleteComment,
     createLabel,
     deleteLabel,