setHighlighted(true)}
onMouseLeave={() => setHighlighted(false)}
onClick={() => {
if (disabled) return;
if (onSelect) onSelect(searchable);
}}
className={cn(
"data-[highlighted]:bg-accent data-[selected=true]:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.75 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
{children}
);
}
function CommandShortcut({ className, ...props }) {
return (
tr]:last:border-b-0', className)}
{...props}
/>
);
}
function TableRow({ className, ...props }) {
return (
|
);
}
function TableHead({ className, ...props }) {
return (
[role=checkbox]]:translate-y-[2px]',
className,
)}
{...props}
/>
);
}
function TableCell({ className, ...props }) {
return (
| [role=checkbox]]:translate-y-[2px]',
className,
)}
{...props}
/>
);
}
function TableCaption({ className, ...props }) {
return (
);
}
/* ---------- data-table (components/data-table) ---------- */
function DataTableSkeletonRow({ columns, hasSelection = false }) {
return (
{hasSelection && (
)}
{columns.map((c) => (
))}
);
}
function DataTable({
columns,
rows,
getRowKey,
empty,
onRowClick,
sort,
onSortChange,
selection,
renderSubRow,
rowClassName,
layout = 'auto',
tableClassName,
loading = false,
skeletonRows = 8,
count,
}) {
if (!loading && rows.length === 0 && empty) return <>{empty};
const showSkeletons = loading && rows.length === 0;
const totalColumnCount = columns.length + (selection ? 1 : 0);
const alignClass = (align) =>
align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : undefined;
const pageKeys = rows.map(getRowKey);
const selectableKeys = pageKeys.filter((k) =>
selection && selection.isRowSelectable ? selection.isRowSelectable(k) : true,
);
const selectedOnPage = selectableKeys.filter(
(k) => selection && selection.selectedKeys.has(k),
).length;
const allPageSelected = selectableKeys.length > 0 && selectedOnPage === selectableKeys.length;
const headerCheckedState = allPageSelected
? true
: selectedOnPage > 0
? 'indeterminate'
: false;
const renderHeader = (c, countNode) => {
const isSortable = c.sortable && onSortChange;
if (!isSortable) {
if (!countNode) return {c.header};
return (
{c.header}
{countNode}
);
}
const active = sort && sort.key === c.id;
return (
);
};
const ariaSort = (c) => {
if (!c.sortable || !sort || sort.key !== c.id) return undefined;
return sort.dir === 'asc' ? 'ascending' : 'descending';
};
return (
:first-child]:pl-4',
layout === 'fixed' && 'table-fixed',
tableClassName,
)}
>
{selection && (
selection.onToggleAllPage(value === true)}
disabled={showSkeletons}
className="translate-y-[2px]"
/>
)}
{columns.map((c, colIndex) => (
{renderHeader(
c,
colIndex === 0 && count != null && count > 0 ? (
{count.toLocaleString()}
) : undefined,
)}
))}
{showSkeletons
? Array.from({ length: skeletonRows }, (_, i) => (
))
: rows.map((row) => {
const key = getRowKey(row);
const isSelected = selection ? selection.selectedKeys.has(key) : false;
const subRow = renderSubRow ? renderSubRow(row) : null;
return (
onRowClick(row) : undefined}
onKeyDown={
onRowClick
? (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onRowClick(row);
}
}
: undefined
}
tabIndex={onRowClick ? 0 : undefined}
className={cn(
'hover:bg-surface-well',
'transition-none',
onRowClick && 'cursor-pointer',
isSelected && 'data-[state=selected]:bg-accent-soft',
subRow != null && 'border-b-0',
rowClassName ? rowClassName(row) : undefined,
)}
>
{selection && (
e.stopPropagation()}
>
{(selection.isRowSelectable ? selection.isRowSelectable(key) : true) && (
selection.onToggleRow(key, value === true)}
className="translate-y-[2px]"
/>
)}
)}
{columns.map((c, colIndex) => (
{c.accessor(row)}
))}
{subRow != null && (
{subRow}
)}
);
})}
);
}
/* ---------- table-chrome (components/table-chrome) ---------- */
const PAGER_BTN = cn(
'inline-grid size-7 place-items-center rounded-full border border-border-strong',
'bg-surface-well text-text-secondary transition-colors dark:bg-surface-shell',
'hover:border-border-strong hover:bg-surface-row hover:text-text-primary',
'disabled:cursor-default disabled:opacity-40 disabled:hover:border-border-strong disabled:hover:text-text-secondary',
'disabled:hover:bg-surface-well dark:disabled:hover:bg-surface-shell',
);
function TablePager({ total, page, pageSize, onPageChange, testIdPrefix, position, className }) {
const pages = Math.max(1, Math.ceil(total / pageSize));
const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
const to = Math.min(total, page * pageSize);
return (
{from}–{to} of {total.toLocaleString()}
);
}
const TABLE_UPDATING_MIN_VISIBLE_MS = 1200;
function useMinVisible(active, ms) {
const [visible, setVisible] = useState(active);
const shownAtRef = useRef(active ? Date.now() : null);
useEffect(() => {
if (active) {
if (shownAtRef.current == null) shownAtRef.current = Date.now();
setVisible(true);
return;
}
if (shownAtRef.current == null) return;
const remaining = ms - (Date.now() - shownAtRef.current);
if (remaining <= 0) {
shownAtRef.current = null;
setVisible(false);
return;
}
const timer = setTimeout(() => {
shownAtRef.current = null;
setVisible(false);
}, remaining);
return () => clearTimeout(timer);
}, [active, ms]);
return active || visible;
}
function TableChrome({
total,
page,
pageSize,
onPageChange,
search,
filters,
children,
className,
bare = false,
updating = false,
}) {
const pager = (position) => (
);
const showUpdating = useMinVisible(updating, TABLE_UPDATING_MIN_VISIBLE_MS);
const updatingStatus = (
{showUpdating ? 'Updating results…' : ''}
);
const updatingSweep = showUpdating ? (
) : null;
if (bare) {
return (
{updatingStatus}
{updatingSweep}
{children}
);
}
return (
{updatingStatus}
{search}
{filters}
{pager('top')}
{updatingSweep}
{children}
{pager('bottom')}
{children}
);
}
/* ---------- page-header (components/page-header) ---------- */
function PageHeader({ title, subtitle, back, actions, className, children, ...rest }) {
const openSidebar = useSidebarTrigger();
return (
{openSidebar && }
{title}
{subtitle != null && {subtitle} }
{back}
{actions} }
{children}
);
}
function PageHeaderBackLink({ asChild, className, ...props }) {
const Comp = asChild ? Slot : 'a';
return (
);
}
/* ---------- overflow-menu (components/overflow-menu) ---------- */
function OverflowMenu({ children, label = 'Open menu', align = 'end', contentClassName, size = 'icon-sm' }) {
return (
e.preventDefault()}
>
{children}
);
}
const OverflowMenuItem = DropdownMenuItem;
const OverflowMenuSeparator = DropdownMenuSeparator;
/* ---------- segmented-switch (components/segmented-switch) ---------- */
function SegmentedSwitch({
value,
onChange,
options,
className,
fullWidth = false,
'aria-label': ariaLabel,
}) {
return (
{options.map((o) => {
const active = o.value === value;
const cls = cn(
'inline-flex items-center rounded-[5px] px-[11px] py-1.5 text-meta font-semibold whitespace-nowrap transition',
fullWidth && 'flex-1 justify-center',
active
? 'bg-surface-card text-text-primary shadow-sm'
: 'text-text-secondary hover:text-text-primary',
);
return o.href ? (
{o.label}
) : (
);
})}
{triggerContent}
{!active && }
{active && (
)}
(value.toLowerCase().includes(term.toLowerCase()) ? 1 : 0)}
>
{showSearch && (
)}
{emptyText}
{heading ? {children} : children}
{footer ? {footer} : null}
);
}
/* use-load-more-sentinel */
function useLoadMoreSentinel({ enabled, onLoadMore }) {
const [sentinelEl, setSentinelEl] = useState(null);
useEffect(() => {
if (!enabled || !sentinelEl) return;
const sentinel = sentinelEl;
const findScrollParent = (el) => {
let node = el.parentElement;
while (node && node !== document.body) {
const overflowY = getComputedStyle(node).overflowY;
if (overflowY === 'auto' || overflowY === 'scroll') return node;
node = node.parentElement;
}
return null;
};
const listEl = findScrollParent(sentinel);
if (!listEl) return;
const check = () => {
const remaining = listEl.scrollHeight - listEl.scrollTop - listEl.clientHeight;
if (remaining > 200) return;
onLoadMore();
};
check();
listEl.addEventListener('scroll', check, { passive: true });
return () => listEl.removeEventListener('scroll', check);
}, [enabled, sentinelEl, onLoadMore]);
return setSentinelEl;
}
const ACCOUNT_FILTER_INITIAL_VISIBLE = 50;
const ACCOUNT_FILTER_LOAD_MORE_STEP = 50;
function AccountMultiSelectLogo({ account }) {
return (
);
}
function AccountMultiSelect({
accounts,
selected,
onChange,
placeholder = 'All Accounts',
eventCounts,
onSearchChange,
onLoadMore,
hasMore: serverHasMore,
loading: serverLoading,
}) {
const serverMode = !!onLoadMore;
const [open, setOpen] = useState(false);
const [search, setSearch] = useState('');
const [visibleCount, setVisibleCount] = useState(ACCOUNT_FILTER_INITIAL_VISIBLE);
const selectedSet = useMemo(() => new Set(selected), [selected]);
const sortedAccounts = useMemo(() => {
if (serverMode) return accounts;
if (!eventCounts) return accounts;
return [...accounts].sort((a, b) => {
const countA = eventCounts.get(a.id) ?? 0;
const countB = eventCounts.get(b.id) ?? 0;
if (countA !== countB) return countB - countA;
return a.name.localeCompare(b.name);
});
}, [accounts, eventCounts, serverMode]);
const filteredAccounts = useMemo(() => {
if (serverMode) return sortedAccounts;
const hideZero = (a) =>
!eventCounts || (eventCounts.get(a.id) ?? 0) > 0 || selectedSet.has(a.id);
const base = sortedAccounts.filter(hideZero);
const q = search.trim().toLowerCase();
if (!q) return base;
return base.filter((a) => a.name.toLowerCase().includes(q));
}, [sortedAccounts, search, serverMode, eventCounts, selectedSet]);
const visibleAccounts = serverMode
? filteredAccounts
: search
? filteredAccounts
: filteredAccounts.slice(0, visibleCount);
const hasMore = serverMode ? !!serverHasMore : !search && visibleCount < filteredAccounts.length;
const handleSearchChange = (value) => {
setSearch(value);
if (onSearchChange) onSearchChange(value);
};
const handleOpenChange = (next) => {
setOpen(next);
if (!next) {
handleSearchChange('');
setVisibleCount(ACCOUNT_FILTER_INITIAL_VISIBLE);
}
};
const setSentinelEl = useLoadMoreSentinel({
enabled: open && hasMore,
onLoadMore: () => {
if (serverMode) {
if (onLoadMore) onLoadMore();
} else {
setVisibleCount((c) => c + ACCOUNT_FILTER_LOAD_MORE_STEP);
}
},
});
const toggleAccount = (id) => {
const next = new Set(selectedSet);
if (next.has(id)) next.delete(id);
else next.add(id);
onChange(Array.from(next));
};
const clearAll = () => {
onChange([]);
};
const selectedAccounts = accounts.filter((a) => selectedSet.has(a.id));
let triggerContent;
if (selected.length === 0) {
triggerContent = (
{placeholder}
);
} else if (selected.length === 1) {
const account = selectedAccounts[0];
triggerContent = account ? (
) : (
{placeholder}
);
} else if (selected.length === 2) {
triggerContent = (
{selectedAccounts.map((a) => (
))}
{selectedAccounts.map((a) => a.name).join(', ')}
{`${selected.length} accounts`}
);
}
return (
0}
triggerContent={triggerContent}
onClear={(e) => {
e.stopPropagation();
clearAll();
}}
placeholder="Search accounts..."
emptyText="No accounts found."
contentClassName="w-[280px]"
search={search}
onSearchChange={handleSearchChange}
shouldFilter={false}
footer={
selected.length > 0 ? (
<>
Clear selection
) : null
}
>
{visibleAccounts.map((account) => {
const isSelected = selectedSet.has(account.id);
const count = eventCounts ? (eventCounts.get(account.id) ?? 0) : 0;
return (
toggleAccount(account.id)}
>
{account.name}
{eventCounts && (
{count}
)}
);
})}
{hasMore && }
{serverMode && serverLoading && (
)}
);
}
/* ---------- signal-filter (components/signal-filter) ---------- */
function SignalFilter({ signals, selected, onToggle, onClear, className }) {
const [open, setOpen] = useState(false);
const sel = new Set(selected);
const label =
selected.length === 0
? 'All Signals'
: selected.length === 1
? selected[0]
: `${selected.length} signals`;
const first = signals.find((s) => sel.has(s.name));
const firstMeta = first && first.type ? SIGNAL_TYPES[first.type] : null;
return (
0}
ariaLabel="Filter by signals"
placeholder="Search signals..."
emptyText="No signals found."
contentClassName="w-[340px]"
onClear={(e) => {
e.stopPropagation();
onClear();
}}
triggerContent={
{first && first.icon ? (
{first.icon}
) : firstMeta ? (
) : (
)}
{label}
}
>
{signals.map((s) => {
const checked = sel.has(s.name);
const meta = s.type ? SIGNAL_TYPES[s.type] : null;
return (
onToggle(s.name)}
className="gap-2 pr-4"
>
{s.labelNode ? (
{s.labelNode}
) : (
<>
{s.icon ? (
{s.icon}
) : (
meta &&
)}
{s.name}
)}
{s.count}
);
})}
);
}
/* ---------- hooks/use-account-filter-options (mock hydrator) ---------- */
const ACCOUNT_FILTER_PAGE_SIZE = 50;
function useAccountFilterOptions(enabled, args) {
const { ids, selectedIds } = args;
const [visibleCount, setVisibleCount] = useState(ACCOUNT_FILTER_PAGE_SIZE);
const idsKey = ids.join(',');
useEffect(() => {
setVisibleCount(ACCOUNT_FILTER_PAGE_SIZE);
}, [idsKey]);
const [search, setSearch] = useState('');
const resolve = useCallback((idList) => {
const fn = T.Data && T.Data.getAccountsByIds;
return fn ? fn(idList) : [];
}, []);
const accounts = useMemo(() => {
if (!enabled) return [];
const sliced = ids.slice(0, visibleCount);
const base = resolve(sliced);
const extraIds = (selectedIds ?? []).filter((id) => !sliced.includes(id));
const extras = resolve(extraIds);
const all = [...base, ...extras];
const q = search.trim().toLowerCase();
if (!q) return all;
return all.filter((a) => a.name.toLowerCase().includes(q));
}, [enabled, idsKey, visibleCount, selectedIds && selectedIds.join(','), search, resolve]);
return {
accounts,
loading: false,
hasMore: visibleCount < ids.length,
loadMore: () => setVisibleCount((c) => c + ACCOUNT_FILTER_PAGE_SIZE),
onSearchChange: setSearch,
};
}
Object.assign(T.UI, {
computeHiddenCounts,
useHiddenColumns,
TableScrollRegion,
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
DataTable,
DataTableSkeletonRow,
TableChrome,
TablePager,
TABLE_UPDATING_MIN_VISIBLE_MS,
PageContainer,
PageHeader,
PageHeaderBackLink,
OverflowMenu,
OverflowMenuItem,
OverflowMenuSeparator,
SegmentedSwitch,
TypeChip,
SIGNAL_TYPES,
toSignalType,
FilterCheckbox,
SearchableFilterPopover,
useLoadMoreSentinel,
AccountMultiSelect,
SignalFilter,
useAccountFilterOptions,
});
/* ======================================================================
* Logos + app sidebar (components/Logo.tsx, components/app-sidebar/*)
* ==================================================================== */
function TrayoWordmark({ className = 'h-8 w-auto', ...props }) {
return (
);
}
function TrayoLogoMark({ className = 'h-6 w-auto', ...props }) {
return (
);
}
function Logo({ className = 'size-6', ...props }) {
return (
);
}
/* sidebar-collapsed-context */
const SidebarCollapsedContext = createContext(false);
function useSidebarCollapsed() {
return useContext(SidebarCollapsedContext);
}
/* use-sidebar-mobile */
const SIDEBAR_MOBILE_MEDIA = '(max-width: 1023px)';
function useSidebarMobile() {
const [isMobile, setIsMobile] = useState(
() => typeof window !== 'undefined' && window.matchMedia(SIDEBAR_MOBILE_MEDIA).matches,
);
useEffect(() => {
if (typeof window === 'undefined') return;
const mq = window.matchMedia(SIDEBAR_MOBILE_MEDIA);
setIsMobile(mq.matches);
const handler = (e) => setIsMobile(e.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, []);
return isMobile;
}
/* sidebar-trigger */
function SidebarTrigger({ onClick, className }) {
return (
);
}
/* sidebar-trigger-context */
const SidebarTriggerContext = createContext(null);
const SidebarTriggerProvider = SidebarTriggerContext.Provider;
function useSidebarTrigger() {
return useContext(SidebarTriggerContext);
}
function MobileSidebarTrigger({ className }) {
const openSidebar = useSidebarTrigger();
if (!openSidebar) return null;
return ;
}
/* nav-item */
function NavItem({ item, renderLink, collapsed }) {
const active = Boolean(item.active);
const pillClassName = cn(
'flex w-full items-center gap-1.5 rounded-full py-[7px] pl-3.5 pr-[9px] text-sm font-medium',
'hover:bg-surface-well',
!active && 'text-inherit',
active &&
'bg-accent-soft font-semibold text-accent-text hover:bg-accent-soft hover:text-accent-text',
);
const circleClassName = cn(
'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',
'hover:bg-surface-well',
!active && 'text-inherit',
active &&
'bg-accent-soft font-semibold text-accent-text hover:bg-accent-soft hover:text-accent-text',
);
return (
{renderLink({
href: item.href,
active,
className: pillClassName,
children: (
<>
{item.icon && {item.icon}}
{item.label}
{item.badge && {item.badge}}
),
})}
{collapsed && (
{renderLink({
href: item.href,
active,
className: circleClassName,
children: item.icon ? (
{item.icon}
) : (
{item.label.slice(0, 1)}
),
})}
{item.label}
)}
);
}
/* nav-section */
function NavSection({ section, renderLink, collapsed }) {
const collapsible = Boolean(section.collapsible);
const [open, setOpen] = useState(section.defaultOpen ?? true);
const showItems = !collapsible || open || Boolean(collapsed);
return (
{section.label &&
!collapsed &&
(collapsible ? (
) : (
{section.label}
))}
{showItems && (
{section.items.map((item, i) => (
))}
)}
onOpenChange && onOpenChange(false)}
className={cn('fixed inset-0 z-65 bg-black/40 lg:hidden', open ? 'block' : 'hidden')}
/>
);
}
/* sidebar-brand */
function SidebarBrand({ badge, className }) {
return (
{badge}
);
}
/* sidebar-tenant-row */
function tenantInitials(name) {
return name
.split(' ')
.map((word) => word[0])
.filter(Boolean)
.slice(0, 2)
.join('')
.toUpperCase();
}
const SidebarTenantRow = forwardRef(function SidebarTenantRow(
{ name, domain, logoUrl, interactive = false, className, ...props },
ref,
) {
const collapsed = useSidebarCollapsed();
const rowClassName = cn(
'flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-text-primary',
interactive && 'cursor-pointer hover:bg-sidebar-hover',
collapsed && 'lg:justify-center lg:px-0',
className,
);
const content = (
<>
{name}
{interactive && (
)}
);
if (!interactive) {
return {content} ;
}
return (
);
});
/* ---------- DeveloperBar (components/DeveloperBar.tsx) ----------
* The build-less skeleton has no dev server / git-branch endpoint; the
* production behavior (`!isDev && !isPreview → null`) is preserved. */
function DeveloperBar() {
return null;
}
/* ---------- feature-flag keys (packages/feature-flags) ---------- */
const HOME_REDESIGN_FLAG = 'home-redesign-enabled';
const SEQUENCE_EMAIL_CONTEXT_FLAG = 'sequence-email-context-enabled';
const SEQUENCE_XRAY_FLAG = 'sequence-xray-enabled';
Object.assign(T.UI, {
TrayoWordmark,
TrayoLogoMark,
Logo,
SidebarCollapsedContext,
useSidebarCollapsed,
SIDEBAR_MOBILE_MEDIA,
useSidebarMobile,
SidebarTrigger,
SidebarTriggerProvider,
useSidebarTrigger,
MobileSidebarTrigger,
NavItem,
NavSection,
AppSidebar,
SidebarBrand,
SidebarTenantRow,
DeveloperBar,
HOME_REDESIGN_FLAG,
SEQUENCE_EMAIL_CONTEXT_FLAG,
SEQUENCE_XRAY_FLAG,
});
/* ======================================================================
* features/run-monitor — provider + popup, with the Apollo stats hook
* stubbed (stats: null) and workflow jobs fed from a local simulation
* store instead of the `myWorkflowJobs` poll.
* ==================================================================== */
const WORKFLOW_JOB_STARTED_EVENT = 'trayo:workflow-job-started';
const WORKFLOW_JOB_COMPLETED_EVENT = 'trayo:workflow-job-completed';
/* dismissed-workflow-jobs.ts */
const DISMISSED_KEY = 'trayo.dismissed-workflow-jobs';
function readDismissedRaw() {
try {
const raw = sessionStorage.getItem(DISMISSED_KEY);
if (!raw) return [];
const parsed = JSON.parse(raw);
if (!Array.isArray(parsed)) return [];
return parsed.filter((v) => typeof v === 'string' && v.length > 0);
} catch {
return [];
}
}
const loadDismissedWorkflowJobScopeKeys = () => new Set(readDismissedRaw());
function rememberDismissedWorkflowJobScopeKey(scopeKey) {
const next = new Set(readDismissedRaw());
next.add(scopeKey);
sessionStorage.setItem(DISMISSED_KEY, JSON.stringify([...next]));
}
function scopeKey(scope) {
switch (scope.kind) {
case 'batch':
return `batch:${scope.batchId}`;
case 'execution':
return `execution:${scope.executionId}`;
case 'workflow-job':
return `workflow-job:${scope.workflowJobId}`;
}
}
const isTerminalStatus = (status) =>
status === 'completed' || status === 'failed' || status === 'cancelled';
function sameScope(a, b) {
if (a.kind === 'batch' && b.kind === 'batch') return a.batchId === b.batchId;
if (a.kind === 'execution' && b.kind === 'execution') return a.executionId === b.executionId;
return false;
}
const RunMonitorContext = createContext(null);
function useRunMonitor() {
const context = useContext(RunMonitorContext);
if (!context) {
throw new Error('useRunMonitor must be used within RunMonitorProvider');
}
return context;
}
function RunMonitorProvider({ children, renderSessionExtras }) {
const [sessions, setSessions] = useState([]);
const dismissedScopeKeys = useRef(loadDismissedWorkflowJobScopeKeys());
const addSession = useCallback((session) => {
const id = `rm-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
setSessions((prev) => {
const existing = prev.find((s) => !s.completedAt && sameScope(s.scope, session.scope));
if (existing) return prev;
return [{ ...session, id, expanded: true }, ...prev];
});
}, []);
const removeSession = useCallback((id) => {
setSessions((prev) => {
const target = prev.find((s) => s.id === id);
if (target && target.kind === 'workflow-job') {
const key = scopeKey(target.scope);
dismissedScopeKeys.current.add(key);
rememberDismissedWorkflowJobScopeKey(key);
}
return prev.filter((s) => s.id !== id);
});
}, []);
const toggleExpanded = useCallback((id) => {
setSessions((prev) => prev.map((s) => (s.id === id ? { ...s, expanded: !s.expanded } : s)));
}, []);
const markCompleted = useCallback((id) => {
setSessions((prev) =>
prev.map((s) =>
s.id === id && !s.completedAt ? { ...s, completedAt: new Date().toISOString() } : s,
),
);
}, []);
const syncWorkflowJobs = useCallback((inputs) => {
setSessions((prev) => {
const dismissed = dismissedScopeKeys.current;
const liveByScope = new Map();
for (const i of inputs) {
if (!dismissed.has(scopeKey(i.scope))) liveByScope.set(scopeKey(i.scope), i);
}
const merge = (input, existing) => {
const next = {
...input,
id: existing ? existing.id : `rm-wfjob-${input.scope.workflowJobId}`,
expanded: existing ? existing.expanded : true,
completedAt: isTerminalStatus(input.status)
? ((existing && existing.completedAt) ?? new Date().toISOString())
: undefined,
};
if (
existing &&
existing.status === next.status &&
existing.data === next.data &&
existing.errorMessage === next.errorMessage &&
existing.completedAt === next.completedAt &&
existing.expanded === next.expanded &&
existing.triggeredAt === next.triggeredAt
) {
return existing;
}
return next;
};
const seen = new Set();
const updated = [];
for (const s of prev) {
if (s.kind !== 'workflow-job') {
updated.push(s);
continue;
}
const key = scopeKey(s.scope);
const input = liveByScope.get(key);
if (!input) continue;
seen.add(key);
updated.push(merge(input, s));
}
const fresh = [];
for (const i of inputs) {
const key = scopeKey(i.scope);
if (liveByScope.has(key) && !seen.has(key)) {
seen.add(key);
fresh.push(merge(i, undefined));
}
}
if (fresh.length > 0) return [...fresh, ...updated];
const unchanged = updated.length === prev.length && updated.every((s, i) => s === prev[i]);
return unchanged ? prev : updated;
});
}, []);
return (
{children}
);
}
/* use-run-monitor-stats — Apollo poll stubbed out for the skeleton. */
function useRunMonitorStats() {
return { stats: null, completed: false, reason: undefined };
}
/* ---------- workflow-job-view.ts helpers ---------- */
function readProgress(data) {
const p = data && data.progress;
if (!p || typeof p !== 'object') return null;
const { processed, total, label } = p;
if (typeof processed !== 'number' || typeof total !== 'number') return null;
return { processed, total, label: typeof label === 'string' ? label : undefined };
}
function humanizeStepName(name) {
const words = name.trim().split(/[-_\s]+/).filter(Boolean);
if (words.length === 0) return '';
const phrase = words.join(' ');
return phrase.charAt(0).toUpperCase() + phrase.slice(1);
}
function workflowJobTitle(session) {
const data = session.data ?? null;
if (session.jobKind === 'tenant-onboarding') {
const name = data && data.companyName;
if (typeof name === 'string' && name.trim()) return `Onboarding ${name.trim()}`;
return 'Tenant onboarding';
}
if (session.jobKind === 'account-create') {
const name = data && data.accountName;
if (typeof name === 'string' && name.trim()) return `Setting up ${name.trim()}`;
return 'Account setup';
}
if (session.jobKind === 'account-import') {
const progress = readProgress(data);
if (progress && progress.total > 0) {
const n = progress.total;
return `Importing ${n} account${n === 1 ? '' : 's'}`;
}
return 'Account import';
}
if (session.jobKind === 'stakeholder-search') {
const progress = readProgress(data);
if (progress && progress.total > 0) {
const n = progress.total;
return `Finding contacts for ${n} account${n === 1 ? '' : 's'}`;
}
return 'Finding contacts';
}
if (session.jobKind === 'timing-score') {
const progress = readProgress(data);
if (progress && progress.total > 0) {
const n = progress.total;
return `Recalculating ${n} account score${n === 1 ? '' : 's'}`;
}
return 'Recalculating scores';
}
if (session.jobKind === 'people-import') {
const progress = readProgress(data);
if (progress && progress.total > 0) {
const n = progress.total;
return `Importing ${n} contact${n === 1 ? '' : 's'}`;
}
return 'Importing contacts';
}
return session.jobKind.replace(/[-_]/g, ' ').replace(/^\w/, (c) => c.toUpperCase());
}
function readImportResult(data) {
const r = data && data.result;
if (!r || typeof r !== 'object') return null;
const { created, reassigned, skipped, failed } = r;
if (
typeof created !== 'number' ||
typeof reassigned !== 'number' ||
typeof skipped !== 'number' ||
typeof failed !== 'number'
) {
return null;
}
return { created, reassigned, skipped, failed };
}
function readStakeholderResult(data) {
const r = data && data.result;
if (!r || typeof r !== 'object') return null;
const { peopleAdded, accountsSearched, invokeFailures } = r;
if (
typeof peopleAdded !== 'number' ||
typeof accountsSearched !== 'number' ||
typeof invokeFailures !== 'number'
) {
return null;
}
return { peopleAdded, accountsSearched, invokeFailures };
}
function formatStakeholderResult(result) {
const people =
result.peopleAdded === 0 ? 'No contacts found' : `+${result.peopleAdded} contacts added`;
if (result.invokeFailures <= 0) return people;
return `${people} · ${result.invokeFailures} account${result.invokeFailures === 1 ? '' : 's'} failed`;
}
function readPeopleImportResult(data) {
const r = data && data.result;
if (!r || typeof r !== 'object') return null;
const { created, updated, skipped, failed, unassigned, cappedContacts, inaccessibleContacts } = r;
if (
typeof created !== 'number' ||
typeof updated !== 'number' ||
typeof skipped !== 'number' ||
typeof failed !== 'number'
) {
return null;
}
return {
created,
updated,
skipped,
failed,
unassigned: typeof unassigned === 'number' ? unassigned : 0,
cappedContacts: typeof cappedContacts === 'number' ? cappedContacts : 0,
inaccessibleContacts:
typeof inaccessibleContacts === 'number' ? inaccessibleContacts : 0,
};
}
function formatPeopleImportResult(result) {
const parts = [
result.created > 0 ? `${result.created} created` : null,
result.updated > 0 ? `${result.updated} updated` : null,
result.skipped > 0 ? `${result.skipped} skipped` : null,
result.failed > 0 ? `${result.failed} failed` : null,
].filter(Boolean);
let base = parts.length > 0 ? parts.join(' · ') : 'No changes';
if (result.unassigned > 0) {
base = `${base} · ${result.unassigned} unassigned (company lookup failed)`;
}
if (result.inaccessibleContacts > 0) {
base = `${base} · ${result.inaccessibleContacts} on a teammate's account — ask an owner to add you`;
}
if (result.cappedContacts > 0) {
return `${base} · ${result.cappedContacts} contact${
result.cappedContacts === 1 ? '' : 's'
} skipped · account limit reached`;
}
return base;
}
function formatImportResult(result) {
const parts = [
result.created > 0 ? `${result.created} created` : null,
result.reassigned > 0 ? `${result.reassigned} reassigned` : null,
result.skipped > 0 ? `${result.skipped} skipped` : null,
result.failed > 0 ? `${result.failed} failed` : null,
].filter(Boolean);
return parts.length > 0 ? parts.join(' · ') : 'No changes';
}
function readRunningStepName(data) {
const steps = data && data.steps;
if (!Array.isArray(steps)) return undefined;
const running = steps.find(
(s) => !!s && typeof s === 'object' && typeof s.name === 'string' && s.status === 'running',
);
return running ? running.name : undefined;
}
const EXPECTED_ONBOARDING_STEPS = 33;
function readOnboardingStepFraction(data) {
const steps = data && data.steps;
if (!Array.isArray(steps) || steps.length === 0) return null;
const done = steps.filter(
(s) => !!s && typeof s === 'object' && (s.status === 'completed' || s.status === 'skipped'),
).length;
return Math.max(0, Math.min(done / EXPECTED_ONBOARDING_STEPS, 0.95));
}
function workflowJobFlags(session) {
const { status, jobKind } = session;
const isActive = status === 'pending' || status === 'running';
const isCompleted = status === 'completed';
const hardFailed = status === 'failed' || status === 'cancelled';
const progress = readProgress(session.data);
const importResult = jobKind === 'account-import' ? readImportResult(session.data) : null;
const stakeholderResult =
jobKind === 'stakeholder-search' ? readStakeholderResult(session.data) : null;
const peopleImportResult =
jobKind === 'people-import' ? readPeopleImportResult(session.data) : null;
const rollup = peopleImportResult
? {
failed: peopleImportResult.failed,
warned: peopleImportResult.unassigned + peopleImportResult.inaccessibleContacts,
total:
peopleImportResult.created +
peopleImportResult.updated +
peopleImportResult.skipped +
peopleImportResult.failed,
}
: importResult
? {
failed: importResult.failed,
warned: 0,
total:
importResult.created +
importResult.reassigned +
importResult.skipped +
importResult.failed,
}
: null;
const allFailed = isCompleted && !!rollup && rollup.total > 0 && rollup.failed >= rollup.total;
const partial = isCompleted && !!rollup && !allFailed && (rollup.failed > 0 || rollup.warned > 0);
const failed = hardFailed || allFailed;
const succeeded = isCompleted && !failed && !partial;
const onboardingFraction =
jobKind === 'tenant-onboarding' ? readOnboardingStepFraction(session.data) : null;
let percent = 0;
if (progress && progress.total > 0) {
const raw = Math.floor((progress.processed / progress.total) * 100);
percent = isCompleted ? raw : Math.min(99, raw);
} else if (onboardingFraction != null) {
percent = isCompleted ? 100 : Math.min(99, Math.floor(onboardingFraction * 100));
} else if (isCompleted) {
percent = 100;
}
const runningStep = readRunningStepName(session.data);
const runningStepLabel = runningStep ? humanizeStepName(runningStep) : undefined;
const statusLabel = hardFailed
? status === 'cancelled'
? 'Cancelled'
: 'Failed'
: isCompleted && importResult
? formatImportResult(importResult)
: isCompleted && stakeholderResult
? formatStakeholderResult(stakeholderResult)
: isCompleted && peopleImportResult
? formatPeopleImportResult(peopleImportResult)
: isActive && runningStepLabel
? runningStepLabel
: (progress && progress.label) ??
(isActive ? (status === 'pending' ? 'Queued' : 'Working…') : 'Done');
return { isActive, succeeded, failed, partial, percent, statusLabel };
}
/* ---------- workflow-job-steps.tsx ---------- */
function readSteps(data) {
const steps = data && data.steps;
if (!Array.isArray(steps)) return [];
return steps.filter((s) => !!s && typeof s === 'object' && typeof s.name === 'string');
}
function WorkflowJobSteps({ session }) {
const steps = readSteps(session.data);
if (steps.length === 0) return null;
return (
{steps.map((step, i) => (
-
{step.status === 'running' ? (
) : step.status === 'completed' ? (
) : step.status === 'skipped' ? (
) : (
)}
{step.name}
))}
);
}
/* ---------- run-monitor-card.tsx ---------- */
const fmtNum = (n) => n.toLocaleString();
function formatElapsed(ms) {
const s = Math.floor(ms / 1000);
const m = Math.floor(s / 60);
const h = Math.floor(m / 60);
if (h > 0) return `${h}:${String(m % 60).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;
return `${m}:${String(s % 60).padStart(2, '0')}`;
}
function useElapsedTimer(triggeredAt, completedAt) {
const frozenElapsed = completedAt
? new Date(completedAt).getTime() - new Date(triggeredAt).getTime()
: null;
const [liveElapsed, setLiveElapsed] = useState(
() => frozenElapsed ?? Date.now() - new Date(triggeredAt).getTime(),
);
useEffect(() => {
if (frozenElapsed !== null) return;
const start = new Date(triggeredAt).getTime();
const tick = () => setLiveElapsed(Date.now() - start);
tick();
const interval = setInterval(tick, 1000);
return () => clearInterval(interval);
}, [triggeredAt, frozenElapsed]);
return frozenElapsed ?? liveElapsed;
}
function MonitorCardHeader({ elapsed, onCollapse, onDismiss, children }) {
return (
);
}
function BatchIdBadge({ batchId }) {
const [copied, setCopied] = useState(false);
const handleCopy = useCallback(() => {
navigator.clipboard.writeText(batchId);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
}, [batchId]);
const short = batchId.length > 8 ? batchId.slice(0, 8) : batchId;
return (
);
}
function WorkflowJobCard({ session, elapsed, onCollapse, onDismiss, extrasSlot }) {
const { isActive, succeeded, failed, partial, percent, statusLabel } = workflowJobFlags(session);
const progress = readProgress(session.data);
const title = workflowJobTitle(session);
return (
{isActive ? (
) : succeeded ? (
) : partial ? (
) : (
)}
{title}
{statusLabel}
{progress && progress.total > 0 && (
{fmtNum(progress.processed)} / {fmtNum(progress.total)}
)}
{progress && progress.total > 0 && (
{extrasSlot}
);
}
function RunMonitorCard({ session, stats, completionReason, onCollapse, onDismiss, extrasSlot }) {
const elapsed = useElapsedTimer(session.triggeredAt, session.completedAt);
if (session.kind === 'workflow-job') {
return (
);
}
const disc = stats && stats.discoveries;
const events = stats && stats.events;
const discTotal = disc
? disc.pending + disc.running + disc.completed + disc.failed + disc.skipped
: 0;
const discMax = discTotal || (session.kind === 'discovery' ? session.discoveriesTriggered : 0);
const discDone = disc ? disc.completed + disc.failed + disc.skipped : 0;
const discActive = disc ? disc.pending + disc.running > 0 : !session.completedAt;
const hasFailed = disc ? disc.failed > 0 : false;
const eventsTotal = events
? events.pending + events.running + events.completed + events.rejected
: 0;
const eventsDone = events ? events.completed + events.rejected : 0;
const eventsActive = events ? events.pending + events.running > 0 : false;
const eventsAwaitingMore = discActive && !eventsActive && eventsTotal > 0;
const eventsProgress =
eventsTotal > 0
? eventsAwaitingMore
? Math.min(Math.round((eventsDone / eventsTotal) * 100), 90)
: Math.round((eventsDone / eventsTotal) * 100)
: 0;
const isActive = session.completedAt ? false : discActive || eventsActive;
const isDone = session.completedAt ? true : !isActive && discTotal > 0;
const isEmptyScope = completionReason === 'empty-scope';
const isPreparing = stats === null && !session.completedAt;
return (
{session.kind === 'workflow' ? (
) : isDone && !hasFailed ? (
) : isDone && hasFailed ? (
) : session.tenantLogoUrl ? (
) : (
{session.tenantName.charAt(0).toUpperCase()}
)}
{session.kind === 'discovery' ? session.tenantName : session.workflowName}
{session.kind === 'discovery' && (
{fmtNum(session.accountCount)} account{session.accountCount !== 1 ? 's' : ''}
{' · '}
{session.signalTypes
.map((t) => (t === 'news' ? 'public' : t === 'job_change' ? 'career' : t))
.join(', ')}
)}
{isEmptyScope ? (
Nothing to enrich — no matching accounts or events.
) : isPreparing ? (
) : (
<>
Discoveries
{discMax > 0 && (
{fmtNum(discMax)}
)}
{discMax > 0 ? `${Math.round((discDone / discMax) * 100)}%` : ''}
Events
{eventsTotal > 0 && (
{fmtNum(eventsTotal)}
)}
{eventsTotal > 0
? eventsAwaitingMore
? `${fmtNum(eventsDone)}/${fmtNum(eventsTotal)}`
: `${eventsProgress}%`
: ''}
{eventsTotal > 0 ? (
<>
)}
{extrasSlot}
);
}
/* ---------- run-monitor-pill.tsx ---------- */
function WorkflowJobPill({ session, onExpand, onDismiss }) {
const { isActive, succeeded, failed, partial, percent } = workflowJobFlags(session);
const title = workflowJobTitle(session);
const progress = readProgress(session.data);
const showPercent = progress != null && progress.total > 0;
return (
e.key === 'Enter' && onExpand()}
aria-label={`${title} — click to expand`}
title={title}
className={cn(
'flex cursor-pointer items-center gap-2 rounded-full border border-border bg-surface-well px-3 py-1.5 shadow-2xl shadow-black/40 ring-1 ring-white/6 transition-colors hover:border-accent-line',
succeeded && 'border-green-500/30',
partial && 'border-amber-500/30',
failed && 'border-red-500/30',
)}
>
{isActive ? (
) : succeeded ? (
) : partial ? (
) : (
)}
{title}
{showPercent && (
{percent}%
)}
);
}
function RunMonitorPill({ session, stats, completionReason, onExpand, onDismiss }) {
if (session.kind === 'workflow-job') {
return ;
}
const disc = stats && stats.discoveries;
const events = stats && stats.events;
const discTotal = disc
? disc.pending + disc.running + disc.completed + disc.failed + disc.skipped
: 0;
const discMax = discTotal || (session.kind === 'discovery' ? session.discoveriesTriggered : 0);
const discDone = disc ? disc.completed + disc.failed + disc.skipped : 0;
const eventsTotal = events
? events.pending + events.running + events.completed + events.rejected
: 0;
const eventsDone = events ? events.completed + events.rejected : 0;
const discActive = disc ? disc.pending + disc.running > 0 : !session.completedAt;
const eventsActive = events ? events.pending + events.running > 0 : false;
const isActive = session.completedAt ? false : discActive || eventsActive;
const hasFailed = disc ? disc.failed > 0 : false;
const isEmptyScope = completionReason === 'empty-scope';
const discPct = discMax > 0 ? Math.round((discDone / discMax) * 100) : 0;
const eventsPct = eventsTotal > 0 ? Math.round((eventsDone / eventsTotal) * 100) : null;
const label = session.kind === 'workflow' ? session.workflowName : session.tenantName;
const ariaLabel = `${label} run monitor — click to expand`;
return (
e.key === 'Enter' && onExpand()}
aria-label={ariaLabel}
title={label}
className={cn(
'flex cursor-pointer items-center gap-2 rounded-full border border-border bg-surface-well px-3 py-1.5 shadow-2xl shadow-black/40 ring-1 ring-white/6 transition-colors hover:border-accent-line',
!isActive && !hasFailed && 'border-green-500/30',
hasFailed && 'border-amber-500/30',
)}
>
{session.kind === 'workflow' ? (
isActive ? (
) : (
)
) : isActive ? (
) : hasFailed ? (
) : (
)}
{session.kind === 'discovery' && session.tenantLogoUrl ? (
) : session.kind === 'discovery' ? (
{session.tenantName.charAt(0).toUpperCase()}
) : null}
{isEmptyScope ? (
—
) : (
<>
{discPct}%
{eventsPct !== null && (
· {eventsPct}%
)}
)}
);
}
/* ---------- run-monitor.tsx ---------- */
function RunMonitorSessionView({ session }) {
const { removeSession, toggleExpanded, markCompleted, renderSessionExtras } = useRunMonitor();
const shouldPoll = !session.completedAt;
const { stats, completed, reason } = useRunMonitorStats(session.scope, shouldPoll);
useEffect(() => {
if (completed && !session.completedAt) {
markCompleted(session.id);
}
}, [completed, session.completedAt, session.id, markCompleted]);
const extrasSlot = renderSessionExtras ? renderSessionExtras(session) : undefined;
return session.expanded ? (
toggleExpanded(session.id)}
onDismiss={() => removeSession(session.id)}
extrasSlot={extrasSlot}
/>
) : (
toggleExpanded(session.id)}
onDismiss={() => removeSession(session.id)}
/>
);
}
function RunMonitor() {
const { sessions } = useRunMonitor();
if (sessions.length === 0) return null;
return (
{sessions.map((session) => (
))}
);
}
/* ---------- workflow-job simulation store (skeleton-only) ----------
* Replaces the `myWorkflowJobs` GraphQL poll. Import dialogs (and any
* T.Data simulation) upsert jobs here; WorkflowJobsFeeder syncs them into
* the RunMonitorProvider and fires WORKFLOW_JOB_COMPLETED_EVENT. */
const workflowJobsState = { jobs: new Map(), listeners: new Set(), seq: 0 };
const WorkflowJobs = {
list: () => Array.from(workflowJobsState.jobs.values()),
get: (id) => workflowJobsState.jobs.get(id),
upsert(job) {
workflowJobsState.jobs.set(job.id, { ...workflowJobsState.jobs.get(job.id), ...job });
workflowJobsState.listeners.forEach((fn) => fn());
return workflowJobsState.jobs.get(job.id);
},
subscribe(fn) {
workflowJobsState.listeners.add(fn);
return () => workflowJobsState.listeners.delete(fn);
},
newId: (kind) => `wfjob-${kind}-${Date.now()}-${++workflowJobsState.seq}`,
};
/* Drive a simulated workflow job through steps + progress to completion. */
function simulateWorkflowJob({
jobKind,
total = 10,
listId,
steps,
result,
durationMs = 2600,
data: extraData,
}) {
const id = WorkflowJobs.newId(jobKind);
const stepNames = steps || ['Parsing rows', 'Applying rows', 'Building list'];
const startedAt = new Date().toISOString();
const mkSteps = (doneCount, runningIndex) =>
stepNames.map((name, i) => ({
name,
status: i < doneCount ? 'completed' : i === runningIndex ? 'running' : 'running',
}));
WorkflowJobs.upsert({
id,
jobKind,
status: 'running',
triggeredAt: startedAt,
data: {
...extraData,
progress: { processed: 0, total, label: 'Importing…' },
steps: [{ name: stepNames[0], status: 'running' }],
},
});
const tickMs = Math.max(150, Math.floor(durationMs / (total + 1)));
let processed = 0;
const interval = setInterval(() => {
processed += 1;
const frac = processed / total;
const stepIdx = Math.min(stepNames.length - 1, Math.floor(frac * stepNames.length));
const stepList = stepNames.map((name, i) => ({
name,
status: i < stepIdx ? 'completed' : i === stepIdx ? 'running' : 'running',
}));
if (processed >= total) {
clearInterval(interval);
WorkflowJobs.upsert({
id,
jobKind,
status: 'completed',
triggeredAt: startedAt,
data: {
...extraData,
progress: { processed: total, total, label: 'Imported' },
steps: stepNames.map((name) => ({ name, status: 'completed' })),
result:
result ||
(jobKind === 'people-import'
? { created: total, updated: 0, skipped: 0, failed: 0, unassigned: 0, cappedContacts: 0, inaccessibleContacts: 0 }
: { created: total, reassigned: 0, skipped: 0, failed: 0 }),
importListId: listId ?? null,
},
});
} else {
WorkflowJobs.upsert({
id,
jobKind,
status: 'running',
triggeredAt: startedAt,
data: {
...extraData,
progress: { processed, total, label: 'Importing…' },
steps: stepList.filter((s, i) => i <= stepIdx),
},
});
}
}, tickMs);
return id;
}
/* ---------- workflow-jobs-feeder.tsx (store-backed shim) ---------- */
function WorkflowJobsFeeder({ kinds, silentKinds = [] }) {
const { syncWorkflowJobs } = useRunMonitor();
const prevStatuses = useRef(new Map());
const kindsKey = kinds.join(',');
const silentKey = silentKinds.join(',');
useEffect(() => {
const kindSet = new Set(kinds);
const silentSet = new Set(silentKinds);
const sync = () => {
const jobs = WorkflowJobs.list().filter((j) => kindSet.has(j.jobKind));
// Completion events fire for every tracked kind, silent or not.
for (const j of jobs) {
const prev = prevStatuses.current.get(j.id);
if (prev !== j.status && isTerminalStatus(j.status)) {
const importListId = j.data && j.data.importListId;
window.dispatchEvent(
new CustomEvent(WORKFLOW_JOB_COMPLETED_EVENT, {
detail: {
workflowJobId: j.id,
jobKind: j.jobKind,
status: j.status,
importListId: typeof importListId === 'string' ? importListId : null,
},
}),
);
}
prevStatuses.current.set(j.id, j.status);
}
syncWorkflowJobs(
jobs
.filter((j) => !silentSet.has(j.jobKind))
.map((j) => ({
kind: 'workflow-job',
jobKind: j.jobKind,
status: j.status,
data: j.data ?? null,
errorMessage: j.errorMessage ?? null,
triggeredAt: j.triggeredAt,
tenantId: '',
scope: { kind: 'workflow-job', workflowJobId: j.id },
})),
);
};
sync();
const unsub = WorkflowJobs.subscribe(sync);
window.addEventListener(WORKFLOW_JOB_STARTED_EVENT, sync);
return () => {
unsub();
window.removeEventListener(WORKFLOW_JOB_STARTED_EVENT, sync);
};
}, [kindsKey, silentKey, syncWorkflowJobs]);
return null;
}
/* ---------- features/imports/use-import-job-progress.ts ---------- */
function useImportJobRunning(jobId) {
const subscribe = useCallback(
(fn) => WorkflowJobs.subscribe(fn),
[],
);
const getSnapshot = useCallback(() => {
if (!jobId) return false;
const job = WorkflowJobs.get(jobId);
if (!job) return false;
return !isTerminalStatus(job.status);
}, [jobId]);
return React.useSyncExternalStore(subscribe, getSnapshot);
}
/* ---------- features/accounts/import — ImportJobBody (faithful port,
* skipped-CSV download reads the simulation store instead of Apollo) ---------- */
function rowsToCsv(rows, includeUserEmail) {
const esc = (v) => {
const s = String(v ?? '');
return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
};
const header = includeUserEmail
? ['name', 'url', 'userEmail', 'reason']
: ['name', 'url', 'reason'];
const lines = [header.join(',')];
for (const r of rows) {
const cells = includeUserEmail
? [r.name, r.url, r.userEmail ?? '', r.reason]
: [r.name, r.url, r.reason];
lines.push(cells.map(esc).join(','));
}
return lines.join('\n');
}
function ImportJobBody({ session, onOpenJob, onOpenList }) {
const [downloading, setDownloading] = useState(false);
const isPeopleImport = session.jobKind === 'people-import';
const isActive = session.status === 'pending' || session.status === 'running';
const data = session.data ?? {};
const workflowJobId = session.id;
const result = isPeopleImport ? null : readImportResult(data);
const peopleResult = isPeopleImport ? readPeopleImportResult(data) : null;
const skippedCount = ((result && result.skipped) ?? 0) + ((result && result.failed) ?? 0);
const hasDownloadable = !isPeopleImport && session.status === 'completed' && skippedCount > 0;
const importListId = typeof data.importListId === 'string' ? data.importListId : null;
const downloadSkippedCsv = () => {
setDownloading(true);
try {
const job = WorkflowJobs.get(session.scope.workflowJobId) || {};
const full = job.data && job.data.result;
const rows = (full && full.rows) || [];
const skipped = rows.filter((r) => r.status !== 'created' && r.status !== 'reassigned');
if (skipped.length === 0) return;
const includeUserEmail = skipped.some((r) => !!r.userEmail);
const csv = rowsToCsv(
skipped.map((r) => ({
name: r.name,
url: r.url,
userEmail: r.userEmail ?? undefined,
reason: r.status,
})),
includeUserEmail,
);
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = `account-import-skipped-${new Date().toISOString().slice(0, 10)}.csv`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
} finally {
setDownloading(false);
}
};
return (
{(isActive || result || peopleResult) && (
{session.status === 'completed' && result && }
{session.status === 'completed' && peopleResult && (
{formatPeopleImportResult(peopleResult)}
)}
{!isActive && (
)}
{!isActive && importListId && onOpenList && (
<>
·
)}
{hasDownloadable && (
<>
·
)}
)}
);
}
function ImportResultCounts({ result }) {
const items = [];
if (result.created > 0) items.push({ text: `${result.created} created`, className: 'text-success-text' });
if (result.reassigned > 0) items.push({ text: `${result.reassigned} reassigned`, className: 'text-accent-text' });
if (result.skipped > 0) items.push({ text: `${result.skipped} skipped`, className: 'text-warning-text' });
if (result.failed > 0) items.push({ text: `${result.failed} failed`, className: 'text-destructive' });
if (items.length === 0) {
return (
{formatImportResult(result)}
);
}
return (
{items.map((item, i) => (
{i > 0 ? · : null}
{item.text}
))}
);
}
/* ---------- CSV import dialogs (simplified functional ports) ----------
* The real AccountImportDialog / BulkImportPeopleDialog are ~1.6k/0.9k-line
* CSV pipelines (parse → preview → capacity → apply via GraphQL). The port
* keeps the same prop surface + the queue/hand-off lifecycle (onBusyChange,
* onSubmitted, onReady, WORKFLOW_JOB_* events, run-monitor card), driving a
* simulated workflow job; the body is a reduced paste/pick step. */
function CsvImportBody({
kind, // 'account-import' | 'people-import'
open,
onOpenChange,
onSubmitted,
onReady,
onBusyChange,
onEvent,
showTagInput,
}) {
const isPeople = kind === 'people-import';
const [step, setStep] = useState('pick'); // pick | importing
const [text, setText] = useState('');
const [listName, setListName] = useState('');
const [tag, setTag] = useState('');
const [jobId, setJobId] = useState(null);
const importing = step === 'importing';
const running = useImportJobRunning(importing ? jobId : null);
const readyFired = useRef(false);
useEffect(() => {
if (!open) {
setStep('pick');
setText('');
setListName('');
setTag('');
setJobId(null);
readyFired.current = false;
if (onBusyChange) onBusyChange(false);
}
}, [open]);
const rows = useMemo(
() =>
text
.split(/\n+/)
.map((l) => l.trim())
.filter(Boolean)
.map((line) => {
const [name, url] = line.split(',').map((s) => s && s.trim());
return { name: name || line, url: url || '' };
}),
[text],
);
/* Job finished → hand off. */
useEffect(() => {
if (!importing || !jobId || running || readyFired.current) return;
readyFired.current = true;
const job = WorkflowJobs.get(jobId);
const listId = job && job.data ? job.data.importListId : null;
if (onBusyChange) onBusyChange(false);
const done = onReady ? onReady({ jobId, listId: listId ?? undefined }) : undefined;
Promise.resolve(done).finally(() => onOpenChange(false));
}, [importing, jobId, running]);
const submit = () => {
if (rows.length === 0) return;
if (onEvent) onEvent({ kind: 'applied', rows: rows.length });
const listId = `list-import-${Date.now()}`;
const addList = T.Data && T.Data.createImportedList;
if (addList) addList({ id: listId, name: listName || null, kind: isPeople ? 'people' : 'accounts', rows });
const id = simulateWorkflowJob({
jobKind: kind,
total: rows.length,
listId,
data: { listName: listName || null, tag: tag || null },
});
setJobId(id);
setStep('importing');
if (onBusyChange) onBusyChange(true);
window.dispatchEvent(new CustomEvent(WORKFLOW_JOB_STARTED_EVENT));
if (onSubmitted) onSubmitted({ jobId: id, listId, fileName: undefined });
};
const onFile = (file) => {
const reader = new FileReader();
reader.onload = () => setText(String(reader.result || ''));
reader.readAsText(file);
};
return (
{step === 'pick' ? (
<>
|