client: an approval card says how long it has waited

changelog.d/2409-approval-age.fixed.md

@@ -0,0 +1 @@
+An approval card now says how long its request has waited. The dock card and the held reply's bubble read `Waiting for approval · 12 min`, and a shared room's overview rows carry the same age beside the request's text; the four existing strings in `text.js` `relativeShort()` do the wording, so a wait under a minute reads `just now` and one that crossed midnight falls back to a date. A card whose record carries no `createdAt` draws nothing extra ([#2409](https://github.com/ThinkFlowLab/FlyBot/issues/2409)).

core/client.js

@@ -4642,10 +4642,12 @@ function FlyBotApprovals({ useRoster, actions } = {}) {
         if (custom) return (0, import_react6.createElement)("div", { key: approval.id }, (0, import_react6.createElement)(Safe, { entry: custom, props: { approval, decide: (decision) => decide(approval.id, decision), call: call2, readOnly: locked === true } }));
         const failed = approval.status === "failed";
         const waiting = isApprovalWaiting(approval.status);
+        const at = typeof approval.createdAt === "number" ? approval.createdAt : Date.parse(approval.createdAt);
+        const age = Number.isFinite(at) && at > 0 ? ` · ${relativeShort(at)}` : null;
         return (0, import_react6.createElement)(
           "div",
           { key: approval.id, className: "bt-flybot-approval", title: approval.reason ?? void 0 },
-          (0, import_react6.createElement)("div", { className: "bt-flybot-approval-head" }, failed ? t("Not sent") : t("Waiting for approval")),
+          (0, import_react6.createElement)("div", { className: "bt-flybot-approval-head" }, failed ? t("Not sent") : t("Waiting for approval"), waiting ? age : null),
           (0, import_react6.createElement)(
             "div",
             { className: "bt-flybot-approval-origin" },
@@ -6870,10 +6872,12 @@ function HeldReplyActions({ held, actions, roster }) {
       error ? (0, import_react10.createElement)("span", { className: "bt-flybot-approval-error", role: "alert" }, error) : null
     );
   }
+  const at = typeof held.createdAt === "number" ? held.createdAt : Date.parse(held.createdAt);
+  const age = Number.isFinite(at) && at > 0 ? ` · ${relativeShort(at)}` : null;
   const plain = (0, import_react10.createElement)(
     "div",
     { className: "bt-held-card", role: "region", "aria-label": t("Waiting for your approval") },
-    (0, import_react10.createElement)("div", { className: "bt-held-head" }, t("Waiting for your approval")),
+    (0, import_react10.createElement)("div", { className: "bt-held-head" }, t("Waiting for your approval"), age),
     (0, import_react10.createElement)("div", { className: "bt-flybot-approval-origin" }, t("{from} → {to}", { from: held.from ?? t("A Bot"), to: held.toName })),
     locked ? readOnlyLine() : (0, import_react10.createElement)(
       "div",
@@ -19887,13 +19891,17 @@ function SharedRoomApprovals({ room: room2, roster }) {
     "div",
     { key: "approvals", className: "bt-shared-wait", "data-flybot": "room-pending-approvals" },
     (0, import_react44.createElement)("div", { className: "bt-section-title" }, t("Waiting for your approval"), (0, import_react44.createElement)("span", { className: "bt-chip" }, t("{count} to approve", { count: items.length }))),
-    items.map((item) => (0, import_react44.createElement)(
-      "div",
-      { key: item.id, className: "bt-set-row" },
-      (0, import_react44.createElement)("span", { className: "bt-set-copy" }, item.text || item.summary || item.to || t("Outbound reply")),
-      locked ? null : (0, import_react44.createElement)("button", { type: "button", className: "bt-mini", disabled: busy === item.id, onClick: () => decide(item, "approve") }, t("Approve")),
-      locked ? null : (0, import_react44.createElement)("button", { type: "button", className: "bt-mini", disabled: busy === item.id, onClick: () => decide(item, "reject") }, t("Reject"))
-    )),
+    items.map((item) => {
+      const at = typeof item.createdAt === "number" ? item.createdAt : Date.parse(item.createdAt);
+      const age = Number.isFinite(at) && at > 0 ? ` · ${relativeShort(at)}` : null;
+      return (0, import_react44.createElement)(
+        "div",
+        { key: item.id, className: "bt-set-row" },
+        (0, import_react44.createElement)("span", { className: "bt-set-copy" }, item.text || item.summary || item.to || t("Outbound reply"), age),
+        locked ? null : (0, import_react44.createElement)("button", { type: "button", className: "bt-mini", disabled: busy === item.id, onClick: () => decide(item, "approve") }, t("Approve")),
+        locked ? null : (0, import_react44.createElement)("button", { type: "button", className: "bt-mini", disabled: busy === item.id, onClick: () => decide(item, "reject") }, t("Reject"))
+      );
+    }),
     error ? (0, import_react44.createElement)("div", { className: "bt-error", role: "alert" }, error) : null
   );
 }

core/src/client/details-drawer.js

@@ -1,6 +1,6 @@
 import { createElement as h, Fragment, useEffect, useRef, useState } from 'react'
 import { isMainOf } from './sources.js'
-import { copyNames, currentPart, transcriptOf, usageOf } from './text.js'
+import { copyNames, currentPart, relativeShort, transcriptOf, usageOf } from './text.js'
 import { PlusIcon, ShareIcon, CloseIcon, ChevronLeftIcon, GearIcon } from './icons.js'
 import { botState, BotMark, BotAvatar, RoomAvatar, lookBotForRemote } from './mark.js'
 import { GlobeIcon, Favicon } from './browser-pane.js'
@@ -142,14 +142,20 @@ function SharedRoomApprovals({ room, roster }) {
   }
   return h('div', { key: 'approvals', className: 'bt-shared-wait', 'data-flybot': 'room-pending-approvals' },
     h('div', { className: 'bt-section-title' }, t('Waiting for your approval'), h('span', { className: 'bt-chip' }, t('{count} to approve', { count: items.length }))),
-    items.map(item => h('div', { key: item.id, className: 'bt-set-row' },
-      h('span', { className: 'bt-set-copy' }, item.text || item.summary || item.to || t('Outbound reply')),
-      locked
-        ? null
-        : h('button', { type: 'button', className: 'bt-mini', disabled: busy === item.id, onClick: () => decide(item, 'approve') }, t('Approve')),
-      locked
-        ? null
-        : h('button', { type: 'button', className: 'bt-mini', disabled: busy === item.id, onClick: () => decide(item, 'reject') }, t('Reject')))),
+    items.map((item) => {
+      // #2409: the plugin's view carries the wait's `createdAt` as an ISO string or not at all
+      // (`plugins/social/src/social.js` approvalView); anything unparseable draws nothing.
+      const at = typeof item.createdAt === 'number' ? item.createdAt : Date.parse(item.createdAt)
+      const age = Number.isFinite(at) && at > 0 ? ` · ${relativeShort(at)}` : null
+      return h('div', { key: item.id, className: 'bt-set-row' },
+        h('span', { className: 'bt-set-copy' }, item.text || item.summary || item.to || t('Outbound reply'), age),
+        locked
+          ? null
+          : h('button', { type: 'button', className: 'bt-mini', disabled: busy === item.id, onClick: () => decide(item, 'approve') }, t('Approve')),
+        locked
+          ? null
+          : h('button', { type: 'button', className: 'bt-mini', disabled: busy === item.id, onClick: () => decide(item, 'reject') }, t('Reject')))
+    }),
     error ? h('div', { className: 'bt-error', role: 'alert' }, error) : null)
 }
 

core/src/client/flybot-slots.js

@@ -47,6 +47,7 @@ import { chatOpened, claimApprovals, claimedIds, onClaims } from './approval-cla
 import { isApprovalWaiting, WAITING_STATUSES } from '../shared/approval-waiting.js'
 import { canRetry } from '../shared/held-retry.js'
 import { lockedWindow } from './schedules.js'
+import { relativeShort } from './text.js'
 import { isMainOf } from './sources.js'
 
 import { createClientApi as createClientApiWith } from './flybot-registry.js'
@@ -331,8 +332,11 @@ export function FlyBotApprovals({ useRoster, actions } = {}) {
         if (custom) return h('div', { key: approval.id }, h(Safe, { entry: custom, props: { approval, decide: decision => decide(approval.id, decision), call, readOnly: locked === true } }))
         const failed = approval.status === 'failed'
         const waiting = isApprovalWaiting(approval.status)
+        // #2409: one rule for all three surfaces — a number of ms, an ISO string, or nothing drawable.
+        const at = typeof approval.createdAt === 'number' ? approval.createdAt : Date.parse(approval.createdAt)
+        const age = Number.isFinite(at) && at > 0 ? ` · ${relativeShort(at)}` : null
         return h('div', { key: approval.id, className: 'bt-flybot-approval', title: approval.reason ?? undefined },
-          h('div', { className: 'bt-flybot-approval-head' }, failed ? t('Not sent') : t('Waiting for approval')),
+          h('div', { className: 'bt-flybot-approval-head' }, failed ? t('Not sent') : t('Waiting for approval'), waiting ? age : null),
           h('div', { className: 'bt-flybot-approval-origin' },
             t('{from} → {to}', { from: approval.senderName ?? t('A Bot'), to: recipientName(approval, roster) }),
             approval.request.hop > 0 ? ` · ${t('delegated')}` : ''),

core/src/client/held-reply.js

@@ -11,6 +11,7 @@ import { isApprovalWaiting } from '../shared/approval-waiting.js'
 import { canRetry } from '../shared/held-retry.js'
 import { lockedWindow } from './schedules.js'
 import { hostText, t } from './i18n.js'
+import { relativeShort } from './text.js'
 
 const call = (endpoint, payload) => callHost(`flybot/${endpoint}`, payload)
 
@@ -61,8 +62,11 @@ export function HeldReplyActions({ held, actions, roster }) {
       failed && canRetry(held) ? (locked ? readOnlyLine() : h('button', { type: 'button', className: 'bt-held-retry', disabled: busy, onClick: () => decide('retry') }, t('Retry'))) : null,
       error ? h('span', { className: 'bt-flybot-approval-error', role: 'alert' }, error) : null)
   }
+  // #2409: same rule as the dock and the room card; an absent or unparseable stamp draws nothing.
+  const at = typeof held.createdAt === 'number' ? held.createdAt : Date.parse(held.createdAt)
+  const age = Number.isFinite(at) && at > 0 ? ` · ${relativeShort(at)}` : null
   const plain = h('div', { className: 'bt-held-card', role: 'region', 'aria-label': t('Waiting for your approval') },
-    h('div', { className: 'bt-held-head' }, t('Waiting for your approval')),
+    h('div', { className: 'bt-held-head' }, t('Waiting for your approval'), age),
     h('div', { className: 'bt-flybot-approval-origin' }, t('{from} → {to}', { from: held.from ?? t('A Bot'), to: held.toName })),
     locked ? readOnlyLine() : h('div', { className: 'bt-flybot-approval-actions' },
       h('button', { type: 'button', disabled: busy, onClick: () => decide('reject') }, t('Reject')),

core/src/host/hooks.js

@@ -561,6 +561,8 @@ export function install(rt) {
     .map(a => ({
       id: a.id,
       by: a.by,
+      // #2409: the bubble draws how long the hold has waited, from the record's own stamp.
+      createdAt: a.createdAt,
       status: SENT.has(a.status) || isApprovalWaiting(a.status) || a.status === 'failed' ? a.status : 'rejected',
       sessionId: a.request.meta.replyIn.sessionId,
       turn: a.request.meta.replyIn.turn,