@open-mercato/ui 0.6.6-develop.6184.1.b7e55f8d61 → 0.6.6-develop.6201.1.8ceb502c4b

package/dist/backend/notifications/useNotificationActions.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from "react";
-import { apiCall } from "../utils/apiCall.js";
+import { apiCall, apiCallOrThrow } from "../utils/apiCall.js";
 function useNotificationActions(notifications, setNotifications, setUnreadCount) {
   const markAsReadRef = React.useRef(async () => {
   });
@@ -9,7 +9,7 @@ function useNotificationActions(notifications, setNotifications, setUnreadCount)
   const [dismissUndo, setDismissUndo] = React.useState(null);
   const dismissUndoTimerRef = React.useRef(null);
   const markAsRead = React.useCallback(async (id) => {
-    await apiCall(`/api/notifications/${id}/read`, { method: "PUT" });
+    await apiCallOrThrow(`/api/notifications/${id}/read`, { method: "PUT" });
     setNotifications(
       (prev) => prev.map(
         (n) => n.id === id ? { ...n, status: "read", readAt: (/* @__PURE__ */ new Date()).toISOString() } : n
@@ -41,7 +41,7 @@ function useNotificationActions(notifications, setNotifications, setUnreadCount)
   }, [setNotifications, setUnreadCount]);
   const dismiss = React.useCallback(
     async (id) => {
-      await apiCall(`/api/notifications/${id}/dismiss`, { method: "PUT" });
+      await apiCallOrThrow(`/api/notifications/${id}/dismiss`, { method: "PUT" });
       const notification = notifications.find((n) => n.id === id);
       setNotifications((prev) => prev.filter((n) => n.id !== id));
       if (notification?.status === "unread") {
@@ -65,7 +65,7 @@ function useNotificationActions(notifications, setNotifications, setUnreadCount)
   }, [dismiss]);
   const undoDismiss = React.useCallback(async () => {
     if (!dismissUndo) return;
-    await apiCall(`/api/notifications/${dismissUndo.notification.id}/restore`, {
+    await apiCallOrThrow(`/api/notifications/${dismissUndo.notification.id}/restore`, {
       method: "PUT",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({ status: dismissUndo.previousStatus })
@@ -92,7 +92,7 @@ function useNotificationActions(notifications, setNotifications, setUnreadCount)
     setDismissUndo(null);
   }, [dismissUndo, setNotifications, setUnreadCount]);
   const markAllRead = React.useCallback(async () => {
-    await apiCall("/api/notifications/mark-all-read", { method: "PUT" });
+    await apiCallOrThrow("/api/notifications/mark-all-read", { method: "PUT" });
     setNotifications(
       (prev) => prev.map(
         (n) => n.status === "unread" ? { ...n, status: "read", readAt: (/* @__PURE__ */ new Date()).toISOString() } : n

package/dist/backend/notifications/useNotificationActions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/notifications/useNotificationActions.ts"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { apiCall } from '../utils/apiCall'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\n\nexport type NotificationDismissUndoState = {\n  notification: NotificationDto\n  previousStatus: 'read' | 'unread'\n} | null\n\ntype SetUnreadCount = React.Dispatch<React.SetStateAction<number>>\n\nexport type NotificationActionsResult = {\n  markAsRead: (id: string) => Promise<void>\n  executeAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  dismiss: (id: string) => Promise<void>\n  dismissUndo: NotificationDismissUndoState\n  undoDismiss: () => Promise<void>\n  markAllRead: () => Promise<void>\n  markAsReadRef: React.MutableRefObject<(id: string) => Promise<void>>\n  dismissRef: React.MutableRefObject<(id: string) => Promise<void>>\n}\n\nexport function useNotificationActions(\n  notifications: NotificationDto[],\n  setNotifications: React.Dispatch<React.SetStateAction<NotificationDto[]>>,\n  setUnreadCount: SetUnreadCount,\n): NotificationActionsResult {\n  const markAsReadRef = React.useRef<(id: string) => Promise<void>>(async () => {})\n  const dismissRef = React.useRef<(id: string) => Promise<void>>(async () => {})\n  const [dismissUndo, setDismissUndo] = React.useState<NotificationDismissUndoState>(null)\n  const dismissUndoTimerRef = React.useRef<number | null>(null)\n\n  const markAsRead = React.useCallback(async (id: string) => {\n    await apiCall(`/api/notifications/${id}/read`, { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) =>\n        n.id === id ? { ...n, status: 'read', readAt: new Date().toISOString() } : n,\n      ),\n    )\n    setUnreadCount((prev) => Math.max(0, prev - 1))\n  }, [setNotifications, setUnreadCount])\n\n  React.useEffect(() => {\n    markAsReadRef.current = markAsRead\n  }, [markAsRead])\n\n  const executeAction = React.useCallback(async (id: string, actionId: string) => {\n    const result = await apiCall<{ ok: boolean; href?: string }>(\n      `/api/notifications/${id}/action`,\n      {\n        method: 'POST',\n        headers: { 'content-type': 'application/json' },\n        body: JSON.stringify({ actionId }),\n      },\n    )\n\n    if (result.ok) {\n      setNotifications((prev) =>\n        prev.map((n) =>\n          n.id === id ? { ...n, status: 'actioned', actionTaken: actionId } : n,\n        ),\n      )\n      setUnreadCount((prev) => Math.max(0, prev - 1))\n    }\n\n    return { href: result.result?.href }\n  }, [setNotifications, setUnreadCount])\n\n  const dismiss = React.useCallback(\n    async (id: string) => {\n      await apiCall(`/api/notifications/${id}/dismiss`, { method: 'PUT' })\n      const notification = notifications.find((n) => n.id === id)\n      setNotifications((prev) => prev.filter((n) => n.id !== id))\n      if (notification?.status === 'unread') {\n        setUnreadCount((prev) => Math.max(0, prev - 1))\n      }\n      if (notification) {\n        const previousStatus = notification.status === 'unread' ? 'unread' : 'read'\n        setDismissUndo({ notification, previousStatus })\n        if (dismissUndoTimerRef.current) {\n          window.clearTimeout(dismissUndoTimerRef.current)\n        }\n        dismissUndoTimerRef.current = window.setTimeout(() => {\n          setDismissUndo(null)\n        }, 6000)\n      }\n    },\n    [notifications, setNotifications, setUnreadCount],\n  )\n\n  React.useEffect(() => {\n    dismissRef.current = dismiss\n  }, [dismiss])\n\n  const undoDismiss = React.useCallback(async () => {\n    if (!dismissUndo) return\n    await apiCall(`/api/notifications/${dismissUndo.notification.id}/restore`, {\n      method: 'PUT',\n      headers: { 'content-type': 'application/json' },\n      body: JSON.stringify({ status: dismissUndo.previousStatus }),\n    })\n\n    setNotifications((prev) => {\n      const next = [\n        {\n          ...dismissUndo.notification,\n          status: dismissUndo.previousStatus,\n          readAt:\n            dismissUndo.previousStatus === 'unread'\n              ? null\n              : dismissUndo.notification.readAt ?? new Date().toISOString(),\n        },\n        ...prev.filter((n) => n.id !== dismissUndo.notification.id),\n      ]\n      return next.sort(\n        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),\n      )\n    })\n\n    if (dismissUndo.previousStatus === 'unread') {\n      setUnreadCount((prev) => prev + 1)\n    }\n\n    if (dismissUndoTimerRef.current) {\n      window.clearTimeout(dismissUndoTimerRef.current)\n    }\n    setDismissUndo(null)\n  }, [dismissUndo, setNotifications, setUnreadCount])\n\n  const markAllRead = React.useCallback(async () => {\n    await apiCall('/api/notifications/mark-all-read', { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) =>\n        n.status === 'unread'\n          ? { ...n, status: 'read', readAt: new Date().toISOString() }\n          : n,\n      ),\n    )\n    setUnreadCount(0)\n  }, [setNotifications, setUnreadCount])\n\n  React.useEffect(() => {\n    return () => {\n      if (dismissUndoTimerRef.current) {\n        window.clearTimeout(dismissUndoTimerRef.current)\n      }\n    }\n  }, [])\n\n  return {\n    markAsRead,\n    executeAction,\n    dismiss,\n    dismissUndo,\n    undoDismiss,\n    markAllRead,\n    markAsReadRef,\n    dismissRef,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { apiCall, apiCallOrThrow } from '../utils/apiCall'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\n\nexport type NotificationDismissUndoState = {\n  notification: NotificationDto\n  previousStatus: 'read' | 'unread'\n} | null\n\ntype SetUnreadCount = React.Dispatch<React.SetStateAction<number>>\n\nexport type NotificationActionsResult = {\n  markAsRead: (id: string) => Promise<void>\n  executeAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  dismiss: (id: string) => Promise<void>\n  dismissUndo: NotificationDismissUndoState\n  undoDismiss: () => Promise<void>\n  markAllRead: () => Promise<void>\n  markAsReadRef: React.MutableRefObject<(id: string) => Promise<void>>\n  dismissRef: React.MutableRefObject<(id: string) => Promise<void>>\n}\n\nexport function useNotificationActions(\n  notifications: NotificationDto[],\n  setNotifications: React.Dispatch<React.SetStateAction<NotificationDto[]>>,\n  setUnreadCount: SetUnreadCount,\n): NotificationActionsResult {\n  const markAsReadRef = React.useRef<(id: string) => Promise<void>>(async () => {})\n  const dismissRef = React.useRef<(id: string) => Promise<void>>(async () => {})\n  const [dismissUndo, setDismissUndo] = React.useState<NotificationDismissUndoState>(null)\n  const dismissUndoTimerRef = React.useRef<number | null>(null)\n\n  const markAsRead = React.useCallback(async (id: string) => {\n    await apiCallOrThrow(`/api/notifications/${id}/read`, { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) =>\n        n.id === id ? { ...n, status: 'read', readAt: new Date().toISOString() } : n,\n      ),\n    )\n    setUnreadCount((prev) => Math.max(0, prev - 1))\n  }, [setNotifications, setUnreadCount])\n\n  React.useEffect(() => {\n    markAsReadRef.current = markAsRead\n  }, [markAsRead])\n\n  const executeAction = React.useCallback(async (id: string, actionId: string) => {\n    const result = await apiCall<{ ok: boolean; href?: string }>(\n      `/api/notifications/${id}/action`,\n      {\n        method: 'POST',\n        headers: { 'content-type': 'application/json' },\n        body: JSON.stringify({ actionId }),\n      },\n    )\n\n    if (result.ok) {\n      setNotifications((prev) =>\n        prev.map((n) =>\n          n.id === id ? { ...n, status: 'actioned', actionTaken: actionId } : n,\n        ),\n      )\n      setUnreadCount((prev) => Math.max(0, prev - 1))\n    }\n\n    return { href: result.result?.href }\n  }, [setNotifications, setUnreadCount])\n\n  const dismiss = React.useCallback(\n    async (id: string) => {\n      await apiCallOrThrow(`/api/notifications/${id}/dismiss`, { method: 'PUT' })\n      const notification = notifications.find((n) => n.id === id)\n      setNotifications((prev) => prev.filter((n) => n.id !== id))\n      if (notification?.status === 'unread') {\n        setUnreadCount((prev) => Math.max(0, prev - 1))\n      }\n      if (notification) {\n        const previousStatus = notification.status === 'unread' ? 'unread' : 'read'\n        setDismissUndo({ notification, previousStatus })\n        if (dismissUndoTimerRef.current) {\n          window.clearTimeout(dismissUndoTimerRef.current)\n        }\n        dismissUndoTimerRef.current = window.setTimeout(() => {\n          setDismissUndo(null)\n        }, 6000)\n      }\n    },\n    [notifications, setNotifications, setUnreadCount],\n  )\n\n  React.useEffect(() => {\n    dismissRef.current = dismiss\n  }, [dismiss])\n\n  const undoDismiss = React.useCallback(async () => {\n    if (!dismissUndo) return\n    await apiCallOrThrow(`/api/notifications/${dismissUndo.notification.id}/restore`, {\n      method: 'PUT',\n      headers: { 'content-type': 'application/json' },\n      body: JSON.stringify({ status: dismissUndo.previousStatus }),\n    })\n\n    setNotifications((prev) => {\n      const next = [\n        {\n          ...dismissUndo.notification,\n          status: dismissUndo.previousStatus,\n          readAt:\n            dismissUndo.previousStatus === 'unread'\n              ? null\n              : dismissUndo.notification.readAt ?? new Date().toISOString(),\n        },\n        ...prev.filter((n) => n.id !== dismissUndo.notification.id),\n      ]\n      return next.sort(\n        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),\n      )\n    })\n\n    if (dismissUndo.previousStatus === 'unread') {\n      setUnreadCount((prev) => prev + 1)\n    }\n\n    if (dismissUndoTimerRef.current) {\n      window.clearTimeout(dismissUndoTimerRef.current)\n    }\n    setDismissUndo(null)\n  }, [dismissUndo, setNotifications, setUnreadCount])\n\n  const markAllRead = React.useCallback(async () => {\n    await apiCallOrThrow('/api/notifications/mark-all-read', { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) =>\n        n.status === 'unread'\n          ? { ...n, status: 'read', readAt: new Date().toISOString() }\n          : n,\n      ),\n    )\n    setUnreadCount(0)\n  }, [setNotifications, setUnreadCount])\n\n  React.useEffect(() => {\n    return () => {\n      if (dismissUndoTimerRef.current) {\n        window.clearTimeout(dismissUndoTimerRef.current)\n      }\n    }\n  }, [])\n\n  return {\n    markAsRead,\n    executeAction,\n    dismiss,\n    dismissUndo,\n    undoDismiss,\n    markAllRead,\n    markAsReadRef,\n    dismissRef,\n  }\n}\n"],
+  "mappings": ";AACA,YAAY,WAAW;AACvB,SAAS,SAAS,sBAAsB;AAqBjC,SAAS,uBACd,eACA,kBACA,gBAC2B;AAC3B,QAAM,gBAAgB,MAAM,OAAsC,YAAY;AAAA,EAAC,CAAC;AAChF,QAAM,aAAa,MAAM,OAAsC,YAAY;AAAA,EAAC,CAAC;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAuC,IAAI;AACvF,QAAM,sBAAsB,MAAM,OAAsB,IAAI;AAE5D,QAAM,aAAa,MAAM,YAAY,OAAO,OAAe;AACzD,UAAM,eAAe,sBAAsB,EAAE,SAAS,EAAE,QAAQ,MAAM,CAAC;AACvE;AAAA,MAAiB,CAAC,SAChB,KAAK;AAAA,QAAI,CAAC,MACR,EAAE,OAAO,KAAK,EAAE,GAAG,GAAG,QAAQ,QAAQ,SAAQ,oBAAI,KAAK,GAAE,YAAY,EAAE,IAAI;AAAA,MAC7E;AAAA,IACF;AACA,mBAAe,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EAChD,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,UAAU,MAAM;AACpB,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB,MAAM,YAAY,OAAO,IAAY,aAAqB;AAC9E,UAAM,SAAS,MAAM;AAAA,MACnB,sBAAsB,EAAE;AAAA,MACxB;AAAA,QACE,QAAQ;AAAA,QACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,QAC9C,MAAM,KAAK,UAAU,EAAE,SAAS,CAAC;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,OAAO,IAAI;AACb;AAAA,QAAiB,CAAC,SAChB,KAAK;AAAA,UAAI,CAAC,MACR,EAAE,OAAO,KAAK,EAAE,GAAG,GAAG,QAAQ,YAAY,aAAa,SAAS,IAAI;AAAA,QACtE;AAAA,MACF;AACA,qBAAe,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,IAChD;AAEA,WAAO,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA,EACrC,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,UAAU,MAAM;AAAA,IACpB,OAAO,OAAe;AACpB,YAAM,eAAe,sBAAsB,EAAE,YAAY,EAAE,QAAQ,MAAM,CAAC;AAC1E,YAAM,eAAe,cAAc,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE;AAC1D,uBAAiB,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AAC1D,UAAI,cAAc,WAAW,UAAU;AACrC,uBAAe,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,MAChD;AACA,UAAI,cAAc;AAChB,cAAM,iBAAiB,aAAa,WAAW,WAAW,WAAW;AACrE,uBAAe,EAAE,cAAc,eAAe,CAAC;AAC/C,YAAI,oBAAoB,SAAS;AAC/B,iBAAO,aAAa,oBAAoB,OAAO;AAAA,QACjD;AACA,4BAAoB,UAAU,OAAO,WAAW,MAAM;AACpD,yBAAe,IAAI;AAAA,QACrB,GAAG,GAAI;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,eAAe,kBAAkB,cAAc;AAAA,EAClD;AAEA,QAAM,UAAU,MAAM;AACpB,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,cAAc,MAAM,YAAY,YAAY;AAChD,QAAI,CAAC,YAAa;AAClB,UAAM,eAAe,sBAAsB,YAAY,aAAa,EAAE,YAAY;AAAA,MAChF,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,MAC9C,MAAM,KAAK,UAAU,EAAE,QAAQ,YAAY,eAAe,CAAC;AAAA,IAC7D,CAAC;AAED,qBAAiB,CAAC,SAAS;AACzB,YAAM,OAAO;AAAA,QACX;AAAA,UACE,GAAG,YAAY;AAAA,UACf,QAAQ,YAAY;AAAA,UACpB,QACE,YAAY,mBAAmB,WAC3B,OACA,YAAY,aAAa,WAAU,oBAAI,KAAK,GAAE,YAAY;AAAA,QAClE;AAAA,QACA,GAAG,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,YAAY,aAAa,EAAE;AAAA,MAC5D;AACA,aAAO,KAAK;AAAA,QACV,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,SAAS,EAAE,QAAQ;AAAA,MAC5E;AAAA,IACF,CAAC;AAED,QAAI,YAAY,mBAAmB,UAAU;AAC3C,qBAAe,CAAC,SAAS,OAAO,CAAC;AAAA,IACnC;AAEA,QAAI,oBAAoB,SAAS;AAC/B,aAAO,aAAa,oBAAoB,OAAO;AAAA,IACjD;AACA,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,cAAc,MAAM,YAAY,YAAY;AAChD,UAAM,eAAe,oCAAoC,EAAE,QAAQ,MAAM,CAAC;AAC1E;AAAA,MAAiB,CAAC,SAChB,KAAK;AAAA,QAAI,CAAC,MACR,EAAE,WAAW,WACT,EAAE,GAAG,GAAG,QAAQ,QAAQ,SAAQ,oBAAI,KAAK,GAAE,YAAY,EAAE,IACzD;AAAA,MACN;AAAA,IACF;AACA,mBAAe,CAAC;AAAA,EAClB,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,oBAAoB,SAAS;AAC/B,eAAO,aAAa,oBAAoB,OAAO;AAAA,MACjD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/backend/progress/ProgressTopBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/progress/ProgressTopBar.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { ChevronDown, ChevronUp, Loader2, CheckCircle, XCircle, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { Progress } from '../../primitives/progress'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useProgress } from './useProgress'\nimport { useAutoHideCompletedJobs } from './useAutoHideCompletedJobs'\nimport type { ProgressJobDto } from './useProgressPoll'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport { apiCall } from '../utils/apiCall'\n\nexport type ProgressTopBarProps = {\n  className?: string\n  t: TranslateFn\n  /**\n   * How long (ms) to keep successfully completed jobs visible before auto-hiding.\n   * Set to `false` or `0` to disable auto-hide. Defaults to 10 000 ms.\n   * Failed and cancelled jobs are never auto-hidden.\n   */\n  completedAutoHideMs?: number | false\n}\n\nexport function ProgressTopBar({ className, t, completedAutoHideMs }: ProgressTopBarProps) {\n  const { activeJobs, recentlyCompleted, refresh } = useProgress()\n  const visibleCompleted = useAutoHideCompletedJobs(recentlyCompleted, completedAutoHideMs)\n  const [expanded, setExpanded] = React.useState(false)\n\n  React.useEffect(() => {\n    const saved = localStorage.getItem('om:progress:expanded')\n    if (saved === 'true') setExpanded(true)\n  }, [])\n\n  React.useEffect(() => {\n    localStorage.setItem('om:progress:expanded', String(expanded))\n  }, [expanded])\n\n  const hasActiveJobs = activeJobs.length > 0\n  const hasRecentJobs = visibleCompleted.length > 0\n\n  if (!hasActiveJobs && !hasRecentJobs) return null\n\n  return (\n    <div className={cn('border-b bg-background', className)}>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"h-auto w-full justify-between rounded-none bg-background px-4 py-2 hover:bg-muted\"\n      >\n        <div className=\"flex items-center gap-2 text-sm\">\n          {hasActiveJobs ? (\n            <>\n              <Loader2 className=\"h-4 w-4 animate-spin text-primary\" />\n              <span>\n                {t('progress.activeCount', '{count} operations running', { count: activeJobs.length })}\n              </span>\n              {activeJobs[0] && (\n                <span className=\"text-muted-foreground\">\n                  \u2014 {activeJobs[0].name}{' '}\n                  {activeJobs[0].totalCount && activeJobs[0].totalCount > 0\n                    ? `(${activeJobs[0].progressPercent}%)`\n                    : `(${activeJobs[0].processedCount.toLocaleString()} ${t('progress.processed', 'processed')})`}\n                </span>\n              )}\n            </>\n          ) : (\n            <>\n              <CheckCircle className=\"h-4 w-4 text-status-success-icon\" />\n              <span className=\"text-muted-foreground\">\n                {t('progress.recentlyCompleted', '{count} operations completed', { count: visibleCompleted.length })}\n              </span>\n            </>\n          )}\n        </div>\n        {expanded ? (\n          <ChevronUp className=\"h-4 w-4\" />\n        ) : (\n          <ChevronDown className=\"h-4 w-4\" />\n        )}\n      </Button>\n\n      {expanded && (\n        <div className=\"space-y-2 bg-background px-4 pb-3\">\n          {activeJobs.map((job) => (\n            <ProgressJobCard key={job.id} job={job} t={t} onCancel={refresh} />\n          ))}\n          {visibleCompleted.map((job) => (\n            <ProgressJobCard key={job.id} job={job} t={t} />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction ProgressJobCard({ job, t, onCancel }: { job: ProgressJobDto; t: TranslateFn; onCancel?: () => void }) {\n  const [cancelling, setCancelling] = React.useState(false)\n\n  const handleCancel = async () => {\n    if (!job.cancellable || cancelling) return\n    setCancelling(true)\n    try {\n      await apiCall(`/api/progress/jobs/${job.id}`, { method: 'DELETE' })\n      onCancel?.()\n    } finally {\n      setCancelling(false)\n    }\n  }\n\n  const isActive = job.status === 'pending' || job.status === 'running'\n  const isFailed = job.status === 'failed'\n  const isCompleted = job.status === 'completed'\n\n  return (\n    <div className={cn(\n      'rounded-md border bg-card p-3',\n      isFailed && 'border-destructive/50 bg-destructive/5',\n      isCompleted && 'border-status-success-border bg-status-success-bg',\n    )}>\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-center gap-2\">\n            {isActive && <Loader2 className=\"h-4 w-4 animate-spin text-primary flex-shrink-0\" />}\n            {isCompleted && <CheckCircle className=\"h-4 w-4 text-status-success-icon flex-shrink-0\" />}\n            {isFailed && <XCircle className=\"h-4 w-4 text-destructive flex-shrink-0\" />}\n            <span className=\"font-medium truncate\">{job.name}</span>\n          </div>\n\n          {job.description && (\n            <p className=\"text-sm text-muted-foreground mt-1 truncate\">{job.description}</p>\n          )}\n\n          {isFailed && job.errorMessage && (\n            <p className=\"text-sm text-destructive mt-1\">{job.errorMessage}</p>\n          )}\n        </div>\n\n        {isActive && job.cancellable && (\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={handleCancel}\n            disabled={cancelling}\n            className=\"flex-shrink-0\"\n            aria-label={t('progress.actions.cancel', 'Cancel')}\n          >\n            <X className=\"h-4 w-4\" />\n          </Button>\n        )}\n      </div>\n\n      {isActive && (\n        <div className=\"mt-2 space-y-1\">\n          {job.totalCount && job.totalCount > 0 ? (\n            <Progress value={job.progressPercent} className=\"h-2\" />\n          ) : (\n            <IndeterminateProgressBar className=\"h-2\" />\n          )}\n          <div className=\"flex justify-between text-xs text-muted-foreground\">\n            <span>\n              {job.totalCount\n                ? `${job.processedCount.toLocaleString()} / ${job.totalCount.toLocaleString()}`\n                : `${job.processedCount.toLocaleString()} ${t('progress.processed', 'processed')}`\n              }\n            </span>\n            {job.etaSeconds != null && job.etaSeconds > 0 && (\n              <span>{formatEta(job.etaSeconds, t)}</span>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction IndeterminateProgressBar({ className }: { className?: string }) {\n  return (\n    <div className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}>\n      <div className=\"absolute inset-y-0 left-0 w-1/2 animate-pulse rounded-full bg-primary/80\" />\n      <div className=\"absolute inset-y-0 right-0 w-1/3 rounded-full bg-primary/10\" />\n    </div>\n  )\n}\n\nfunction formatEta(seconds: number, t: TranslateFn): string {\n  if (seconds < 60) {\n    return t('progress.eta.seconds', '{count}s remaining', { count: seconds })\n  }\n  if (seconds < 3600) {\n    const minutes = Math.ceil(seconds / 60)\n    return t('progress.eta.minutes', '{count}m remaining', { count: minutes })\n  }\n  const hours = Math.floor(seconds / 3600)\n  const mins = Math.ceil((seconds % 3600) / 60)\n  return t('progress.eta.hoursMinutes', '{hours}h {minutes}m remaining', { hours, minutes: mins })\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { ChevronDown, ChevronUp, Loader2, CheckCircle, XCircle, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { Progress } from '../../primitives/progress'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useProgress } from './useProgress'\nimport { useAutoHideCompletedJobs } from './useAutoHideCompletedJobs'\nimport type { ProgressJobDto } from './useProgressPoll'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport { apiCall } from '../utils/apiCall'\n\nexport type ProgressTopBarProps = {\n  className?: string\n  t: TranslateFn\n  /**\n   * How long (ms) to keep successfully completed jobs visible before auto-hiding.\n   * Set to `false` or `0` to disable auto-hide. Defaults to 10 000 ms.\n   * Failed and cancelled jobs are never auto-hidden.\n   */\n  completedAutoHideMs?: number | false\n}\n\nexport function ProgressTopBar({ className, t, completedAutoHideMs }: ProgressTopBarProps) {\n  const { activeJobs, recentlyCompleted, refresh } = useProgress()\n  const visibleCompleted = useAutoHideCompletedJobs(recentlyCompleted, completedAutoHideMs)\n  const [expanded, setExpanded] = React.useState(false)\n\n  // `om:progress:expanded` is a trivial scalar flag ('true' | 'false') with no\n  // schema to evolve, so it is intentionally kept raw rather than wrapped in a\n  // versioned envelope (the versioning threshold for structured persisted state\n  // lives in `@open-mercato/shared/lib/browser/versionedPreference`).\n  React.useEffect(() => {\n    const saved = localStorage.getItem('om:progress:expanded')\n    if (saved === 'true') setExpanded(true)\n  }, [])\n\n  React.useEffect(() => {\n    localStorage.setItem('om:progress:expanded', String(expanded))\n  }, [expanded])\n\n  const hasActiveJobs = activeJobs.length > 0\n  const hasRecentJobs = visibleCompleted.length > 0\n\n  if (!hasActiveJobs && !hasRecentJobs) return null\n\n  return (\n    <div className={cn('border-b bg-background', className)}>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"h-auto w-full justify-between rounded-none bg-background px-4 py-2 hover:bg-muted\"\n      >\n        <div className=\"flex items-center gap-2 text-sm\">\n          {hasActiveJobs ? (\n            <>\n              <Loader2 className=\"h-4 w-4 animate-spin text-primary\" />\n              <span>\n                {t('progress.activeCount', '{count} operations running', { count: activeJobs.length })}\n              </span>\n              {activeJobs[0] && (\n                <span className=\"text-muted-foreground\">\n                  \u2014 {activeJobs[0].name}{' '}\n                  {activeJobs[0].totalCount && activeJobs[0].totalCount > 0\n                    ? `(${activeJobs[0].progressPercent}%)`\n                    : `(${activeJobs[0].processedCount.toLocaleString()} ${t('progress.processed', 'processed')})`}\n                </span>\n              )}\n            </>\n          ) : (\n            <>\n              <CheckCircle className=\"h-4 w-4 text-status-success-icon\" />\n              <span className=\"text-muted-foreground\">\n                {t('progress.recentlyCompleted', '{count} operations completed', { count: visibleCompleted.length })}\n              </span>\n            </>\n          )}\n        </div>\n        {expanded ? (\n          <ChevronUp className=\"h-4 w-4\" />\n        ) : (\n          <ChevronDown className=\"h-4 w-4\" />\n        )}\n      </Button>\n\n      {expanded && (\n        <div className=\"space-y-2 bg-background px-4 pb-3\">\n          {activeJobs.map((job) => (\n            <ProgressJobCard key={job.id} job={job} t={t} onCancel={refresh} />\n          ))}\n          {visibleCompleted.map((job) => (\n            <ProgressJobCard key={job.id} job={job} t={t} />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction ProgressJobCard({ job, t, onCancel }: { job: ProgressJobDto; t: TranslateFn; onCancel?: () => void }) {\n  const [cancelling, setCancelling] = React.useState(false)\n\n  const handleCancel = async () => {\n    if (!job.cancellable || cancelling) return\n    setCancelling(true)\n    try {\n      await apiCall(`/api/progress/jobs/${job.id}`, { method: 'DELETE' })\n      onCancel?.()\n    } finally {\n      setCancelling(false)\n    }\n  }\n\n  const isActive = job.status === 'pending' || job.status === 'running'\n  const isFailed = job.status === 'failed'\n  const isCompleted = job.status === 'completed'\n\n  return (\n    <div className={cn(\n      'rounded-md border bg-card p-3',\n      isFailed && 'border-destructive/50 bg-destructive/5',\n      isCompleted && 'border-status-success-border bg-status-success-bg',\n    )}>\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-center gap-2\">\n            {isActive && <Loader2 className=\"h-4 w-4 animate-spin text-primary flex-shrink-0\" />}\n            {isCompleted && <CheckCircle className=\"h-4 w-4 text-status-success-icon flex-shrink-0\" />}\n            {isFailed && <XCircle className=\"h-4 w-4 text-destructive flex-shrink-0\" />}\n            <span className=\"font-medium truncate\">{job.name}</span>\n          </div>\n\n          {job.description && (\n            <p className=\"text-sm text-muted-foreground mt-1 truncate\">{job.description}</p>\n          )}\n\n          {isFailed && job.errorMessage && (\n            <p className=\"text-sm text-destructive mt-1\">{job.errorMessage}</p>\n          )}\n        </div>\n\n        {isActive && job.cancellable && (\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={handleCancel}\n            disabled={cancelling}\n            className=\"flex-shrink-0\"\n            aria-label={t('progress.actions.cancel', 'Cancel')}\n          >\n            <X className=\"h-4 w-4\" />\n          </Button>\n        )}\n      </div>\n\n      {isActive && (\n        <div className=\"mt-2 space-y-1\">\n          {job.totalCount && job.totalCount > 0 ? (\n            <Progress value={job.progressPercent} className=\"h-2\" />\n          ) : (\n            <IndeterminateProgressBar className=\"h-2\" />\n          )}\n          <div className=\"flex justify-between text-xs text-muted-foreground\">\n            <span>\n              {job.totalCount\n                ? `${job.processedCount.toLocaleString()} / ${job.totalCount.toLocaleString()}`\n                : `${job.processedCount.toLocaleString()} ${t('progress.processed', 'processed')}`\n              }\n            </span>\n            {job.etaSeconds != null && job.etaSeconds > 0 && (\n              <span>{formatEta(job.etaSeconds, t)}</span>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction IndeterminateProgressBar({ className }: { className?: string }) {\n  return (\n    <div className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}>\n      <div className=\"absolute inset-y-0 left-0 w-1/2 animate-pulse rounded-full bg-primary/80\" />\n      <div className=\"absolute inset-y-0 right-0 w-1/3 rounded-full bg-primary/10\" />\n    </div>\n  )\n}\n\nfunction formatEta(seconds: number, t: TranslateFn): string {\n  if (seconds < 60) {\n    return t('progress.eta.seconds', '{count}s remaining', { count: seconds })\n  }\n  if (seconds < 3600) {\n    const minutes = Math.ceil(seconds / 60)\n    return t('progress.eta.minutes', '{count}m remaining', { count: minutes })\n  }\n  const hours = Math.floor(seconds / 3600)\n  const mins = Math.ceil((seconds % 3600) / 60)\n  return t('progress.eta.hoursMinutes', '{hours}h {minutes}m remaining', { hours, minutes: mins })\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.6-develop.6184.1.b7e55f8d61",
+  "version": "0.6.6-develop.6201.1.8ceb502c4b",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6184.1.b7e55f8d61",
+    "@open-mercato/shared": "0.6.6-develop.6201.1.8ceb502c4b",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6184.1.b7e55f8d61",
+    "@open-mercato/shared": "0.6.6-develop.6201.1.8ceb502c4b",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/ai/AiChat.tsx

@@ -76,6 +76,7 @@ import { useAiChatUpload } from './useAiChatUpload'
 import { useAiShortcuts } from './useAiShortcuts'
 import { LoopTracePanel, type LoopTracePanelTrace } from './LoopTracePanel'
 import { AiIcon } from './AiIcon'
+import { readModelPickerValue, writeModelPickerValue } from './modelPickerStorage'
 
 // Cap inline previews so we do not blow past localStorage quota (~5MB on most
 // browsers). Images larger than this still upload + send to the LLM as inline
@@ -83,43 +84,6 @@ import { AiIcon } from './AiIcon'
 const PREVIEW_DATA_URL_MAX_BYTES = 2 * 1024 * 1024
 const COMPACT_FOOTER_MAX_WIDTH = 640
 
-const MODEL_PICKER_STORAGE_PREFIX = 'om-ai-model-picker:'
-
-function readModelPickerValue(agentId: string): ModelPickerValue | null {
-  if (typeof window === 'undefined') return null
-  try {
-    const raw = window.localStorage.getItem(`${MODEL_PICKER_STORAGE_PREFIX}${agentId}`)
-    if (!raw) return null
-    const parsed = JSON.parse(raw) as unknown
-    if (
-      parsed &&
-      typeof parsed === 'object' &&
-      typeof (parsed as Record<string, unknown>).providerId === 'string' &&
-      typeof (parsed as Record<string, unknown>).modelId === 'string'
-    ) {
-      const value = parsed as ModelPickerValue
-      return { providerId: value.providerId, modelId: value.modelId }
-    }
-    return null
-  } catch {
-    return null
-  }
-}
-
-function writeModelPickerValue(agentId: string, value: ModelPickerValue | null): void {
-  if (typeof window === 'undefined') return
-  try {
-    const key = `${MODEL_PICKER_STORAGE_PREFIX}${agentId}`
-    if (value === null) {
-      window.localStorage.removeItem(key)
-    } else {
-      window.localStorage.setItem(key, JSON.stringify({ providerId: value.providerId, modelId: value.modelId }))
-    }
-  } catch {
-    // Quota exceeded / privacy mode — silently ignore.
-  }
-}
-
 interface ModelsApiResponse {
   agentId: string
   allowRuntimeOverride: boolean

package/src/ai/AiChatSessions.tsx

@@ -24,6 +24,7 @@ import {
   getCurrentOrganizationScope,
   subscribeOrganizationScopeChanged,
 } from '@open-mercato/shared/lib/frontend/organizationEvents'
+import { readVersionedPreference, writeVersionedPreference } from '@open-mercato/shared/lib/browser/versionedPreference'
 import {
   createAiServerConversation,
   listAiServerConversations,
@@ -108,57 +109,62 @@ function makeId(): string {
   return `${Date.now().toString(16)}-${rand()}-${rand()}`
 }
 
-function readPersisted(storageKey: string): AiChatSessionsState {
-  if (typeof window === 'undefined') return { sessions: [], activeByAgent: {} }
-  try {
-    const raw = window.localStorage.getItem(storageKey)
-    if (!raw) return { sessions: [], activeByAgent: {} }
-    const parsed = JSON.parse(raw) as Partial<AiChatSessionsState> | null
-    const sessions = Array.isArray(parsed?.sessions)
-      ? (parsed!.sessions as unknown[])
-          .filter((entry): entry is AiChatSession => {
-            if (!entry || typeof entry !== 'object') return false
-            const value = entry as Record<string, unknown>
-            return (
-              typeof value.id === 'string' &&
-              typeof value.agentId === 'string' &&
-              typeof value.conversationId === 'string' &&
-              typeof value.createdAt === 'number' &&
-              typeof value.lastUsedAt === 'number' &&
-              (value.status === 'open' || value.status === 'closed')
-            )
-          })
-          .map((entry) => {
-            const value = entry as unknown as Record<string, unknown>
-            const candidate = value.name
-            return {
-              ...entry,
-              name: typeof candidate === 'string' ? candidate : undefined,
-            }
-          })
-      : []
-    const activeByAgent =
-      parsed?.activeByAgent && typeof parsed.activeByAgent === 'object'
-        ? Object.fromEntries(
-            Object.entries(parsed.activeByAgent as Record<string, unknown>).filter(
-              (entry): entry is [string, string] =>
-                typeof entry[0] === 'string' && typeof entry[1] === 'string',
-            ),
+// Versioned-envelope discriminator for the persisted sessions cache. Bump when
+// the stored shape changes incompatibly; legacy bare `{ sessions, activeByAgent }`
+// values are migrated forward on the next write. See
+// `@open-mercato/shared/lib/browser/versionedPreference`.
+const AI_CHAT_SESSIONS_VERSION = 1
+
+function isPersistedSessionsShape(value: unknown): value is Partial<AiChatSessionsState> {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+export function readPersisted(storageKey: string): AiChatSessionsState {
+  const parsed = readVersionedPreference<Partial<AiChatSessionsState> | null>(
+    storageKey,
+    AI_CHAT_SESSIONS_VERSION,
+    (value): value is Partial<AiChatSessionsState> | null => isPersistedSessionsShape(value),
+    null,
+    { legacyIsValid: (value): value is Partial<AiChatSessionsState> | null => isPersistedSessionsShape(value) },
+  )
+  if (!parsed) return { sessions: [], activeByAgent: {} }
+  const sessions = Array.isArray(parsed.sessions)
+    ? (parsed.sessions as unknown[])
+        .filter((entry): entry is AiChatSession => {
+          if (!entry || typeof entry !== 'object') return false
+          const value = entry as Record<string, unknown>
+          return (
+            typeof value.id === 'string' &&
+            typeof value.agentId === 'string' &&
+            typeof value.conversationId === 'string' &&
+            typeof value.createdAt === 'number' &&
+            typeof value.lastUsedAt === 'number' &&
+            (value.status === 'open' || value.status === 'closed')
           )
-        : {}
-    return { sessions, activeByAgent }
-  } catch {
-    return { sessions: [], activeByAgent: {} }
-  }
+        })
+        .map((entry) => {
+          const value = entry as unknown as Record<string, unknown>
+          const candidate = value.name
+          return {
+            ...entry,
+            name: typeof candidate === 'string' ? candidate : undefined,
+          }
+        })
+    : []
+  const activeByAgent =
+    parsed.activeByAgent && typeof parsed.activeByAgent === 'object'
+      ? Object.fromEntries(
+          Object.entries(parsed.activeByAgent as Record<string, unknown>).filter(
+            (entry): entry is [string, string] =>
+              typeof entry[0] === 'string' && typeof entry[1] === 'string',
+          ),
+        )
+      : {}
+  return { sessions, activeByAgent }
 }
 
-function writePersisted(storageKey: string, state: AiChatSessionsState): void {
-  if (typeof window === 'undefined') return
-  try {
-    window.localStorage.setItem(storageKey, JSON.stringify(state))
-  } catch {
-    /* quota / privacy mode — drop silently */
-  }
+export function writePersisted(storageKey: string, state: AiChatSessionsState): void {
+  writeVersionedPreference(storageKey, AI_CHAT_SESSIONS_VERSION, state)
 }
 
 function serverConversationToSession(

package/src/ai/__tests__/AiChat.modelPickerStorage.test.ts

@@ -0,0 +1,40 @@
+/** @jest-environment jsdom */
+import { readModelPickerValue, writeModelPickerValue } from '../modelPickerStorage'
+
+const PREFIX = 'om-ai-model-picker:'
+
+describe('AiChat model-picker storage (versioned envelope)', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('writes a versioned envelope and reads it back', () => {
+    writeModelPickerValue('agent1', { providerId: 'openai', modelId: 'gpt' })
+    expect(JSON.parse(localStorage.getItem(`${PREFIX}agent1`)!)).toEqual({
+      v: 1,
+      data: { providerId: 'openai', modelId: 'gpt' },
+    })
+    expect(readModelPickerValue('agent1')).toEqual({ providerId: 'openai', modelId: 'gpt' })
+  })
+
+  it('migrates a legacy bare (pre-envelope) value on read', () => {
+    localStorage.setItem(`${PREFIX}agent2`, JSON.stringify({ providerId: 'anthropic', modelId: 'opus' }))
+    expect(readModelPickerValue('agent2')).toEqual({ providerId: 'anthropic', modelId: 'opus' })
+  })
+
+  it('discards a version-mismatched envelope', () => {
+    localStorage.setItem(`${PREFIX}agent3`, JSON.stringify({ v: 2, data: { providerId: 'x', modelId: 'y' } }))
+    expect(readModelPickerValue('agent3')).toBeNull()
+  })
+
+  it('returns null for malformed data', () => {
+    localStorage.setItem(`${PREFIX}agent4`, JSON.stringify({ providerId: 123 }))
+    expect(readModelPickerValue('agent4')).toBeNull()
+  })
+
+  it('clears the slot when writing null', () => {
+    writeModelPickerValue('agent5', { providerId: 'a', modelId: 'b' })
+    writeModelPickerValue('agent5', null)
+    expect(localStorage.getItem(`${PREFIX}agent5`)).toBeNull()
+  })
+})

package/src/ai/__tests__/AiChatSessions.storage.test.ts

@@ -0,0 +1,42 @@
+/** @jest-environment jsdom */
+import { readPersisted, writePersisted } from '../AiChatSessions'
+
+const KEY = 'om-ai-chat-sessions-v1:t1:o1'
+const session = {
+  id: 's1',
+  agentId: 'a1',
+  conversationId: 'c1',
+  createdAt: 1,
+  lastUsedAt: 2,
+  status: 'open' as const,
+}
+
+describe('AiChatSessions persisted cache (versioned envelope)', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('writes a versioned envelope and reads it back', () => {
+    const state = { sessions: [session], activeByAgent: { a1: 's1' } }
+    writePersisted(KEY, state)
+    const stored = JSON.parse(localStorage.getItem(KEY)!)
+    expect(stored.v).toBe(1)
+    expect(stored.data).toEqual(state)
+    expect(readPersisted(KEY)).toEqual(state)
+  })
+
+  it('migrates a legacy bare (pre-envelope) cache on read', () => {
+    const legacy = { sessions: [session], activeByAgent: { a1: 's1' } }
+    localStorage.setItem(KEY, JSON.stringify(legacy))
+    expect(readPersisted(KEY)).toEqual(legacy)
+  })
+
+  it('discards a version-mismatched envelope', () => {
+    localStorage.setItem(KEY, JSON.stringify({ v: 99, data: { sessions: [session], activeByAgent: { a1: 's1' } } }))
+    expect(readPersisted(KEY)).toEqual({ sessions: [], activeByAgent: {} })
+  })
+
+  it('returns empty state for missing data', () => {
+    expect(readPersisted(KEY)).toEqual({ sessions: [], activeByAgent: {} })
+  })
+})

package/src/ai/__tests__/AiChatSessions.test.tsx

@@ -120,9 +120,10 @@ describe('<AiChatSessionsProvider> — tenant/org scope isolation', () => {
 
     const scoped = window.localStorage.getItem(scopedKey('T1', 'O1'))
     expect(scoped).not.toBeNull()
-    const parsed = JSON.parse(scoped!) as { sessions: Array<{ agentId: string }> }
-    expect(parsed.sessions).toHaveLength(1)
-    expect(parsed.sessions[0].agentId).toBe('assistant')
+    const parsed = JSON.parse(scoped!) as { v: number; data: { sessions: Array<{ agentId: string }> } }
+    expect(parsed.v).toBe(1)
+    expect(parsed.data.sessions).toHaveLength(1)
+    expect(parsed.data.sessions[0].agentId).toBe('assistant')
 
     expect(window.localStorage.getItem(scopedKey('T2', 'O2'))).toBeNull()
   })
@@ -185,11 +186,14 @@ describe('<AiChatSessionsProvider> — tenant/org scope isolation', () => {
       expect(screen.getByTestId('session-count').textContent).toBe('1')
     })
 
-    // T1/O1 bucket must remain untouched after the swap.
+    // T1/O1 bucket must retain its 2 sessions after the swap. The legacy bare
+    // value seeded above is migrated forward to the versioned `{ v, data }`
+    // envelope on mount, so read the sessions from `data`.
     const t1Raw = window.localStorage.getItem(scopedKey('T1', 'O1'))
     expect(t1Raw).not.toBeNull()
-    const t1Parsed = JSON.parse(t1Raw!) as { sessions: unknown[] }
-    expect(t1Parsed.sessions).toHaveLength(2)
+    const t1Parsed = JSON.parse(t1Raw!) as { v: number; data: { sessions: unknown[] } }
+    expect(t1Parsed.v).toBe(1)
+    expect(t1Parsed.data.sessions).toHaveLength(2)
   })
 
   it('refires the server conversation list on scope change', async () => {

package/src/ai/modelPickerStorage.ts

@@ -0,0 +1,40 @@
+import { readVersionedPreference, writeVersionedPreference, clearVersionedPreference } from '@open-mercato/shared/lib/browser/versionedPreference'
+import type { ModelPickerValue } from './ModelPicker'
+
+const MODEL_PICKER_STORAGE_PREFIX = 'om-ai-model-picker:'
+
+// Versioned-envelope discriminator for the persisted model-picker selection.
+// Bump when the stored shape changes incompatibly; legacy bare `{ providerId,
+// modelId }` values are migrated forward on the next write. See
+// `@open-mercato/shared/lib/browser/versionedPreference`.
+const MODEL_PICKER_VERSION = 1
+
+function isModelPickerValue(value: unknown): value is ModelPickerValue {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    typeof (value as Record<string, unknown>).providerId === 'string' &&
+    typeof (value as Record<string, unknown>).modelId === 'string'
+  )
+}
+
+export function readModelPickerValue(agentId: string): ModelPickerValue | null {
+  const value = readVersionedPreference<ModelPickerValue | null>(
+    `${MODEL_PICKER_STORAGE_PREFIX}${agentId}`,
+    MODEL_PICKER_VERSION,
+    (candidate): candidate is ModelPickerValue | null => isModelPickerValue(candidate),
+    null,
+    { legacyIsValid: (candidate): candidate is ModelPickerValue | null => isModelPickerValue(candidate) },
+  )
+  return value ? { providerId: value.providerId, modelId: value.modelId } : null
+}
+
+export function writeModelPickerValue(agentId: string, value: ModelPickerValue | null): void {
+  const key = `${MODEL_PICKER_STORAGE_PREFIX}${agentId}`
+  if (value === null) {
+    clearVersionedPreference(key)
+    return
+  }
+  writeVersionedPreference(key, MODEL_PICKER_VERSION, { providerId: value.providerId, modelId: value.modelId })
+}

package/src/ai/useAiChat.ts

@@ -195,6 +195,13 @@ const SESSION_UPDATED_EVENT = 'om-ai-chat-session-updated'
 const SESSION_STREAM_STATE_EVENT = 'om-ai-chat-session-stream-state'
 const activeSessionStreams = new Set<string>()
 
+// This slot already implements its own versioned, migratable shape: the inline
+// `v` discriminator is checked on read and the value is discarded on mismatch
+// (see `readPersistedSession`). It is intentionally NOT migrated to the generic
+// `{ v, data }` envelope from `@open-mercato/shared/lib/browser/versionedPreference`
+// — doing so would change the on-disk format and discard users' in-progress
+// sessions, and the write path needs bespoke transient-blob-URL stripping that
+// the generic helper does not express.
 interface PersistedAiChatSession {
   v: number
   conversationId: string

package/src/backend/AppShell.tsx

@@ -31,6 +31,7 @@ import { UpgradeActionBanner } from './upgrades/UpgradeActionBanner'
 import { PartialIndexBanner } from './indexes/PartialIndexBanner'
 import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
 import { slugifySidebarId } from '@open-mercato/shared/modules/navigation/sidebarPreferences'
+import { readVersionedPreference, writeVersionedPreference } from '@open-mercato/shared/lib/browser/versionedPreference'
 import { cloneSidebarGroups } from './sidebar/customization-helpers'
 import type { SectionNavGroup } from './section-page/types'
 import { InjectionSpot } from './injection/InjectionSpot'
@@ -59,6 +60,25 @@ import {
   GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID,
 } from './injection/spotIds'
 
+// Versioned-envelope discriminator for the persisted sidebar open/closed group
+// map. This is a structured value (a record), so it carries a version so future
+// shape changes can migrate or safely discard stale data; legacy bare
+// `Record<string, boolean>` values are migrated forward on the next write. The
+// neighbouring `om:sidebarCollapsed` / `om:progress:expanded` flags are trivial
+// scalar booleans and deliberately stay raw (see their write sites). See
+// `@open-mercato/shared/lib/browser/versionedPreference`.
+const SIDEBAR_OPEN_GROUPS_KEY = 'om:sidebarOpenGroups'
+const SIDEBAR_OPEN_GROUPS_VERSION = 1
+
+function isBooleanRecord(value: unknown): value is Record<string, boolean> {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    Object.values(value as Record<string, unknown>).every((entry) => typeof entry === 'boolean')
+  )
+}
+
 export type ShellLogo = {
   src: string
   alt?: string
@@ -605,22 +625,23 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
   }, [mobileOpen])
 
   React.useEffect(() => {
-    try {
-      const savedOpen = typeof window !== 'undefined' ? localStorage.getItem('om:sidebarOpenGroups') : null
-      if (!savedOpen) return
-      const parsed = JSON.parse(savedOpen) as Record<string, boolean>
-      setOpenGroups((prev) => {
-        const next = { ...prev }
-        for (const group of resolvedGroups) {
-          const key = resolveGroupKey(group)
-          if (key in parsed) next[key] = !!parsed[key]
-          else if (group.name in parsed) next[key] = !!parsed[group.name]
-        }
-        return next
-      })
-    } catch {
-      // ignore localStorage errors to avoid breaking hydration
-    }
+    const parsed = readVersionedPreference<Record<string, boolean>>(
+      SIDEBAR_OPEN_GROUPS_KEY,
+      SIDEBAR_OPEN_GROUPS_VERSION,
+      isBooleanRecord,
+      {},
+      { legacyIsValid: isBooleanRecord },
+    )
+    if (Object.keys(parsed).length === 0) return
+    setOpenGroups((prev) => {
+      const next = { ...prev }
+      for (const group of resolvedGroups) {
+        const key = resolveGroupKey(group)
+        if (key in parsed) next[key] = !!parsed[key]
+        else if (group.name in parsed) next[key] = !!parsed[group.name]
+      }
+      return next
+    })
   }, [resolvedGroups])
 
   const toggleGroup = (groupId: string) => setOpenGroups((prev) => ({ ...prev, [groupId]: prev[groupId] === false }))
@@ -633,6 +654,9 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
   // private/incognito mode (storage blocked) or when cookies are disabled —
   // the persisted preference is purely a UX nice-to-have, never functional, so
   // swallow the failure and let the component fall back to the default state.
+  // This is a trivial scalar flag ('1' | '0') with no schema to evolve, so it is
+  // intentionally kept raw rather than wrapped in a versioned envelope (the
+  // versioning threshold lives in `@open-mercato/shared/lib/browser/versionedPreference`).
   React.useEffect(() => {
     try { localStorage.setItem('om:sidebarCollapsed', collapsed ? '1' : '0') } catch { /* localStorage blocked (private mode) — non-critical */ }
     try {
@@ -659,7 +683,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     previousSidebarModeRef.current = sidebarMode
   }, [sidebarMode, collapsed])
   React.useEffect(() => {
-    try { localStorage.setItem('om:sidebarOpenGroups', JSON.stringify(openGroups)) } catch { /* localStorage blocked (private mode) — non-critical */ }
+    writeVersionedPreference(SIDEBAR_OPEN_GROUPS_KEY, SIDEBAR_OPEN_GROUPS_VERSION, openGroups)
   }, [openGroups])
 
   // Ensure current route's group is expanded on load