51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:Tdc3,.cr-inbox { display: grid; align-content: start; gap: var(--cr-space-3); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-inbox__header { display: grid; gap: var(--cr-space-2); } .cr-inbox__title { display: flex; align-items: center; gap: var(--cr-space-2); margin: 0; font-family: var(--cr-font-family-display); font-size: var(--cr-font-size-2xl); font-weight: var(--cr-font-weight-bold); letter-spacing: var(--cr-font-tracking-title); } .cr-inbox__total { min-width: 1.6em; padding: 0 var(--cr-space-2); border-radius: var(--cr-radius-full); background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); text-align: center; } .cr-inbox__counts { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); margin: 0; padding: 0; list-style: none; } .cr-inbox__counts li { display: inline-flex; align-items: center; gap: var(--cr-space-1); padding: 2px var(--cr-space-2); border-radius: var(--cr-radius-full); background: var(--cr-color-bg-subtle); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } .cr-inbox__list { display: grid; gap: var(--cr-space-2); margin: 0; padding: 0; list-style: none; } .cr-inbox__item { position: relative; display: grid; gap: var(--cr-space-1); padding: var(--cr-space-3) var(--cr-space-4); border-radius: var(--cr-radius-lg); transition: transform var(--cr-motion-duration-base) var(--cr-motion-easing-spring); } .cr-inbox__item[data-urgency='high'] { box-shadow: var(--cr-shadow-card), inset 3px 0 0 var(--cr-color-danger-text); } .cr-inbox__item:has(button.cr-inbox__item-title:hover) { transform: translateY(-1px); } .cr-inbox__kind { display: inline-flex; align-items: center; gap: var(--cr-space-1); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-medium); } .cr-inbox__item[data-kind='failed-run'] .cr-inbox__kind { color: var(--cr-color-status-failed-fg); } .cr-inbox__item[data-kind='approval'] .cr-inbox__kind { color: var(--cr-color-text-default); } .cr-inbox__urgent { margin-inline-start: var(--cr-space-1); padding: 0 var(--cr-space-1); border-radius: var(--cr-radius-sm); background: var(--cr-color-risk-high-bg); color: var(--cr-color-risk-high-fg); } .cr-inbox__item-title { padding: 0; border: 0; background: none; color: var(--cr-color-text-default); font: inherit; font-weight: var(--cr-font-weight-semibold); text-align: start; } button.cr-inbox__item-title { cursor: pointer; } /* The whole card is the click target; the button keeps the accessible name short. */ button.cr-inbox__item-title::after { content: ''; position: absolute; inset: 0; border-radius: var(--cr-radius-lg); } button.cr-inbox__item-title:focus-visible { outline: none; } button.cr-inbox__item-title:focus-visible::after { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-inbox__detail { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); } .cr-inbox__meta { display: flex; align-items: center; gap: var(--cr-space-1); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } .cr-inbox__empty { margin: 0; color: var(--cr-color-text-muted); } 54:T1262,'use client'; import { createElement, useId, type ReactNode } from 'react'; import { Avatar } from '@/components/creance/avatar/Avatar'; import { cx } from '@/lib/creance/cx'; import { AlertIcon, CrossIcon, PauseIcon, ShieldIcon } from '@/lib/creance/icons'; import { formatDuration } from '@/lib/creance/formatDuration'; import { useNow } from '@/lib/creance/useNow'; import './NeedsYouInbox.css'; export type InboxKind = 'approval' | 'question' | 'failed-run' | 'review'; export type InboxUrgency = 'high' | 'normal' | 'low'; export interface InboxItem { id: string; kind: InboxKind; title: string; agentName: string; /** Epoch ms when the agent started waiting. Older items sort first within an urgency. */ createdAt: number; urgency: InboxUrgency; /** One short line of context. */ detail?: string | undefined; } export interface NeedsYouInboxProps { items: InboxItem[]; onOpen?: (item: InboxItem) => void; /** Reference time for "waiting 4m". Defaults to when the inbox mounted; pass it to keep ages current. */ now?: number; /** Heading text. The count is added after it. */ title?: string; headingLevel?: 2 | 3 | 4; emptyText?: string; className?: string; } const kinds: Record = { approval: { label: 'Approval', plural: 'approvals', icon: }, question: { label: 'Question', plural: 'questions', icon: }, 'failed-run': { label: 'Failed run', plural: 'failed runs', icon: }, review: { label: 'Review', plural: 'reviews', icon: }, }; const urgencyRank: Record = { high: 0, normal: 1, low: 2 }; /** Most urgent first; within an urgency, whoever has waited longest. */ export function sortInbox(items: InboxItem[]): InboxItem[] { return [...items].sort((a, b) => urgencyRank[a.urgency] - urgencyRank[b.urgency] || a.createdAt - b.createdAt); } export function NeedsYouInbox({ items, onOpen, now, title = 'Needs you', headingLevel = 2, emptyText = 'Nothing is waiting on you.', className, }: NeedsYouInboxProps) { const headingId = useId(); // Read once after mount: a clock read while rendering differs between server and browser. const mountedAt = useNow(60_000, false); const reference = now ?? mountedAt; const sorted = sortInbox(items); const countByKind = (Object.keys(kinds) as InboxKind[]) .map((kind) => ({ kind, count: items.filter((i) => i.kind === kind).length })) .filter((c) => c.count > 0); return (

{createElement( `h${headingLevel}`, { id: headingId, className: 'cr-inbox__title' }, title, ' ', {items.length}, )} {countByKind.length > 0 && (

{kinds[kind].icon} {count} {count === 1 ? kinds[kind].label.toLowerCase() : kinds[kind].plural}

)}

{sorted.length === 0 ? (

{emptyText}

) : (

{kinds[item.kind].icon} {kinds[item.kind].label} {item.urgency === 'high' && Urgent} {onOpen ? ( ) : ( {item.title} )} {item.detail && {item.detail}} {item.agentName} {reference !== undefined && ( <> waiting {formatDuration(reference - item.createdAt)} )}

)}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/avatar.json","https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"needs-you-inbox/NeedsYouInbox.css","content":"$53","type":"registry:file","target":"@components/creance/needs-you-inbox/NeedsYouInbox.css"},{"path":"needs-you-inbox/NeedsYouInbox.tsx","content":"$54","type":"registry:ui","target":"@components/creance/needs-you-inbox/NeedsYouInbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]