Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate task jobs to workflow notifications + timeline

Browse Source
This commit is contained in:
francy51
2026-03-02 14:29:31 -05:00
parent 36c4ed2ee2
commit d81a681905
33 changed files with 2437 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
components/notifications/task-detail-modal.tsx Normal file
View File

@@ -0,0 +1,137 @@
'use client';
import { format } from 'date-fns';
import { LoaderCircle, X } from 'lucide-react';
import { useTaskTimelineQuery } from '@/hooks/use-api-queries';
import { buildStageTimeline, stageLabel, taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { StatusPill } from '@/components/ui/status-pill';
import { Button } from '@/components/ui/button';
function formatTimestamp(value: string | null) {
if (!value) {
return 'n/a';
}
const parsed = new Date(value);
if (Number.isNaN(parsed.getTime())) {
return 'n/a';
}
return format(parsed, 'MMM dd, yyyy HH:mm:ss');
}
type TaskDetailModalProps = {
isOpen: boolean;
taskId: string | null;
onClose: () => void;
};
export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProps) {
const { data, isLoading, error } = useTaskTimelineQuery(taskId ?? '', isOpen && Boolean(taskId));
if (!isOpen || !taskId) {
return null;
}
const task = data?.task ?? null;
const events = data?.events ?? [];
const timeline = task ? buildStageTimeline(task, events) : [];
return (
<div className="fixed inset-0 z-[60]">
<button
type="button"
aria-label="Close task detail modal"
className="absolute inset-0 bg-[color:rgba(0,0,0,0.7)]"
onClick={onClose}
/>
<div className="absolute left-1/2 top-1/2 w-[95vw] max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_25px_70px_rgba(0,0,0,0.55)]">
<header className="mb-4 flex items-start justify-between gap-3">
<div>
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Job details</p>
<h3 className="text-xl font-semibold text-[color:var(--terminal-bright)]">{task ? taskTypeLabel(task.task_type) : 'Task'}</h3>
<p className="mt-1 break-all text-xs text-[color:var(--terminal-muted)]">{taskId}</p>
</div>
<div className="flex items-center gap-2">
{task ? <StatusPill status={task.status} /> : null}
<button
type="button"
aria-label="Close task detail modal"
className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[color:var(--line-weak)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]"
onClick={onClose}
>
<X className="size-4" />
</button>
</div>
</header>
{isLoading ? (
<div className="flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
<LoaderCircle className="size-4 animate-spin" />
Loading task timeline...
</div>
) : null}
{error ? (
<p className="text-sm text-[#ffb5b5]">Unable to load task timeline.</p>
) : null}
{task ? (
<>
<div className="mb-4 grid grid-cols-1 gap-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3 md:grid-cols-2">
<p className="text-xs text-[color:var(--terminal-muted)]">Stage: <span className="text-[color:var(--terminal-bright)]">{stageLabel(task.stage)}</span></p>
<p className="text-xs text-[color:var(--terminal-muted)]">Workflow run: <span className="text-[color:var(--terminal-bright)]">{task.workflow_run_id ?? 'n/a'}</span></p>
<p className="text-xs text-[color:var(--terminal-muted)]">Created: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.created_at)}</span></p>
<p className="text-xs text-[color:var(--terminal-muted)]">Finished: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.finished_at)}</span></p>
<p className="text-xs text-[color:var(--terminal-muted)]">Updated: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.updated_at)}</span></p>
<p className="text-xs text-[color:var(--terminal-muted)]">Attempts: <span className="text-[color:var(--terminal-bright)]">{task.attempts}/{task.max_attempts}</span></p>
</div>
<div className="mb-4 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<p className="mb-2 text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Stage timeline</p>
<ol className="space-y-2">
{timeline.map((item) => (
<li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] px-3 py-2">
<div className="flex items-center justify-between gap-3">
<p className="text-sm text-[color:var(--terminal-bright)]">{item.label}</p>
<span className={item.state === 'active'
? 'text-xs uppercase tracking-[0.12em] text-[#9fffcf]'
: item.state === 'completed'
? 'text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
: 'text-xs uppercase tracking-[0.12em] text-[#6f8791]'}
>
{item.state}
</span>
</div>
{item.detail ? <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{item.detail}</p> : null}
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
</li>
))}
</ol>
</div>
{task.error ? (
<div className="mb-3 rounded-lg border border-[#6f2f2f] bg-[color:rgba(70,20,20,0.45)] p-3">
<p className="text-xs uppercase tracking-[0.12em] text-[#ffbbbb]">Error</p>
<p className="mt-1 text-sm text-[#ffd6d6]">{task.error}</p>
</div>
) : null}
{task.result ? (
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Result summary</p>
<pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
</div>
) : null}
</>
) : null}
<div className="mt-4 flex justify-end">
<Button variant="ghost" onClick={onClose}>Close</Button>
</div>
</div>
</div>
);
}

181
components/notifications/task-notifications-drawer.tsx Normal file
View File

@@ -0,0 +1,181 @@
'use client';
import { formatDistanceToNow } from 'date-fns';
import { BellOff, CheckCheck, EyeOff, X } from 'lucide-react';
import type { Task } from '@/lib/types';
import { taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { Button } from '@/components/ui/button';
import { StatusPill } from '@/components/ui/status-pill';
type TaskNotificationsDrawerProps = {
isOpen: boolean;
onClose: () => void;
activeTasks: Task[];
visibleFinishedTasks: Task[];
awaitingReviewTasks: Task[];
showReadFinished: boolean;
setShowReadFinished: (value: boolean) => void;
openTaskDetails: (taskId: string) => void;
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
};
function TaskRow({
task,
openTaskDetails,
markTaskRead,
silenceTask
}: {
task: Task;
openTaskDetails: (taskId: string) => void;
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
}) {
const isTerminal = task.status === 'completed' || task.status === 'failed';
const isRead = task.notification_read_at !== null;
return (
<article className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<div className="flex items-start justify-between gap-3">
<div>
<p className="text-sm font-medium text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.stage_detail ?? task.stage}</p>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">
Updated {formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
</p>
</div>
<StatusPill status={task.status} />
</div>
<div className="mt-3 flex flex-wrap items-center gap-2">
<Button
variant="secondary"
className="px-2 py-1 text-xs"
onClick={() => openTaskDetails(task.id)}
>
Details
</Button>
{isTerminal ? (
<Button
variant="ghost"
className="px-2 py-1 text-xs"
onClick={() => {
void markTaskRead(task.id, !isRead);
}}
>
{isRead ? <EyeOff className="size-3" /> : <CheckCheck className="size-3" />}
{isRead ? 'Mark unread' : 'Mark read'}
</Button>
) : (
<Button
variant="ghost"
className="px-2 py-1 text-xs"
onClick={() => {
void silenceTask(task.id, true);
}}
>
<BellOff className="size-3" />
Silence
</Button>
)}
</div>
</article>
);
}
export function TaskNotificationsDrawer({
isOpen,
onClose,
activeTasks,
visibleFinishedTasks,
awaitingReviewTasks,
showReadFinished,
setShowReadFinished,
openTaskDetails,
markTaskRead,
silenceTask
}: TaskNotificationsDrawerProps) {
if (!isOpen) {
return null;
}
return (
<div className="fixed inset-0 z-50">
<button
type="button"
aria-label="Close notifications drawer"
className="absolute inset-0 bg-[color:rgba(0,0,0,0.62)]"
onClick={onClose}
/>
<aside className="absolute right-0 top-0 h-full w-full max-w-[28rem] border-l border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 shadow-[0_25px_60px_rgba(0,0,0,0.5)]">
<header className="mb-4 flex items-center justify-between gap-3">
<div>
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Notifications box</p>
<h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Job inbox</h3>
</div>
<button
type="button"
aria-label="Close notifications drawer"
className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[color:var(--line-weak)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]"
onClick={onClose}
>
<X className="size-4" />
</button>
</header>
<div className="mb-4 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
<label className="flex items-center justify-between gap-2 text-sm text-[color:var(--terminal-bright)]">
<span>Show read finished jobs</span>
<input
type="checkbox"
checked={showReadFinished}
onChange={(event) => setShowReadFinished(event.target.checked)}
className="h-4 w-4 accent-[color:var(--accent)]"
/>
</label>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">Unread finished: {awaitingReviewTasks.length}</p>
</div>
<section className="mb-4">
<h4 className="mb-2 text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">Active jobs</h4>
<div className="space-y-2">
{activeTasks.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No active jobs.</p>
) : (
activeTasks.map((task) => (
<TaskRow
key={task.id}
task={task}
openTaskDetails={openTaskDetails}
markTaskRead={markTaskRead}
silenceTask={silenceTask}
/>
))
)}
</div>
</section>
<section className="h-[calc(100%-19rem)] overflow-y-auto">
<h4 className="mb-2 text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">Awaiting review</h4>
<div className="space-y-2">
{visibleFinishedTasks.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No finished jobs to review.</p>
) : (
visibleFinishedTasks.map((task) => (
<TaskRow
key={task.id}
task={task}
openTaskDetails={openTaskDetails}
markTaskRead={markTaskRead}
silenceTask={silenceTask}
/>
))
)}
</div>
</section>
</aside>
</div>
);
}

180
components/notifications/task-notifications-trigger.tsx Normal file
View File

@@ -0,0 +1,180 @@
'use client';
import { formatDistanceToNow } from 'date-fns';
import { Bell, BellRing, ChevronRight } from 'lucide-react';
import type { Task } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { StatusPill } from '@/components/ui/status-pill';
import { taskTypeLabel } from '@/components/notifications/task-stage-helpers';
import { cn } from '@/lib/utils';
type TaskNotificationsTriggerProps = {
unreadCount: number;
isPopoverOpen: boolean;
setIsPopoverOpen: (value: boolean) => void;
activeTasks: Task[];
awaitingReviewTasks: Task[];
openDrawer: () => void;
openTaskDetails: (taskId: string) => void;
silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
className?: string;
mobile?: boolean;
};
export function TaskNotificationsTrigger({
unreadCount,
isPopoverOpen,
setIsPopoverOpen,
activeTasks,
awaitingReviewTasks,
openDrawer,
openTaskDetails,
silenceTask,
markTaskRead,
className,
mobile = false
}: TaskNotificationsTriggerProps) {
const showPopover = !mobile;
const button = (
<button
type="button"
aria-label="Open notifications"
onClick={() => {
if (showPopover) {
setIsPopoverOpen(!isPopoverOpen);
return;
}
openDrawer();
}}
className={cn(
'relative inline-flex items-center justify-center rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]',
mobile ? 'min-w-0 flex-1 gap-1 px-2 py-1.5 text-[11px]' : 'h-10 w-10',
className
)}
>
{unreadCount > 0 ? <BellRing className="size-4" /> : <Bell className="size-4" />}
{mobile ? <span>Alerts</span> : null}
{unreadCount > 0 ? (
<span className={cn(
'absolute inline-flex min-w-[1.15rem] items-center justify-center rounded-full bg-[color:var(--accent)] px-1 text-[10px] font-semibold text-[#00241d]',
mobile ? 'right-1 top-1' : '-right-1.5 -top-1.5'
)}>
{unreadCount > 99 ? '99+' : unreadCount}
</span>
) : null}
</button>
);
if (!showPopover) {
return button;
}
return (
<div className="relative">
{button}
{isPopoverOpen ? (
<>
<button
type="button"
aria-label="Close notifications popover"
className="fixed inset-0 z-40 cursor-default bg-transparent"
onClick={() => setIsPopoverOpen(false)}
/>
<div className="absolute right-0 z-50 mt-2 w-[22rem] rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3 shadow-[0_18px_50px_rgba(0,0,0,0.45)]">
<div className="mb-2 flex items-center justify-between">
<p className="text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">Job notifications</p>
<span className="text-xs text-[color:var(--terminal-muted)]">{unreadCount} unread</span>
</div>
<div className="space-y-2">
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Active</p>
{activeTasks.length === 0 ? (
<p className="text-xs text-[color:var(--terminal-muted)]">No active jobs.</p>
) : (
activeTasks.slice(0, 3).map((task) => (
<article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
<div className="flex items-center justify-between gap-2">
<p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
<StatusPill status={task.status} />
</div>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.stage_detail ?? 'Running in workflow engine.'}</p>
<div className="mt-2 flex items-center justify-between">
<button
type="button"
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
onClick={() => openTaskDetails(task.id)}
>
Open details
</button>
<button
type="button"
className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
onClick={() => {
void silenceTask(task.id, true);
}}
>
Silence
</button>
</div>
</article>
))
)}
</div>
<div className="mt-3 space-y-2">
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Awaiting review</p>
{awaitingReviewTasks.length === 0 ? (
<p className="text-xs text-[color:var(--terminal-muted)]">No unread finished jobs.</p>
) : (
awaitingReviewTasks.slice(0, 3).map((task) => (
<article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
<div className="flex items-center justify-between gap-2">
<p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
<StatusPill status={task.status} />
</div>
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">
{formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
</p>
<div className="mt-2 flex items-center justify-between">
<button
type="button"
className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
onClick={() => openTaskDetails(task.id)}
>
Open details
</button>
<button
type="button"
className="text-xs text-[color:var(--terminal-muted)] transition hover:text-[color:var(--terminal-bright)]"
onClick={() => {
void markTaskRead(task.id, true);
}}
>
Mark read
</button>
</div>
</article>
))
)}
</div>
<Button
variant="secondary"
className="mt-3 w-full"
onClick={() => {
setIsPopoverOpen(false);
openDrawer();
}}
>
Open notifications box
<ChevronRight className="size-4" />
</Button>
</div>
</>
) : null}
</div>
);
}

150
components/notifications/task-stage-helpers.ts Normal file
View File

@@ -0,0 +1,150 @@
import type { Task, TaskStage, TaskStageEvent, TaskType } from '@/lib/types';
export type StageTimelineItem = {
stage: TaskStage;
label: string;
state: 'completed' | 'active' | 'pending';
detail: string | null;
timestamp: string | null;
};
const TASK_TYPE_LABELS: Record<TaskType, string> = {
sync_filings: 'Filing sync',
refresh_prices: 'Price refresh',
analyze_filing: 'Filing analysis',
portfolio_insights: 'Portfolio insight'
};
const STAGE_LABELS: Record<TaskStage, string> = {
queued: 'Queued',
running: 'Running',
completed: 'Completed',
failed: 'Failed',
'sync.fetch_filings': 'Fetch filings',
'sync.fetch_metrics': 'Fetch filing metrics',
'sync.persist_filings': 'Persist filings',
'sync.hydrate_statements': 'Hydrate statements',
'refresh.load_holdings': 'Load holdings',
'refresh.fetch_quotes': 'Fetch quotes',
'refresh.persist_prices': 'Persist prices',
'analyze.load_filing': 'Load filing',
'analyze.fetch_document': 'Fetch primary document',
'analyze.extract': 'Extract context',
'analyze.generate_report': 'Generate report',
'analyze.persist_report': 'Persist report',
'insights.load_holdings': 'Load holdings',
'insights.generate': 'Generate insight',
'insights.persist': 'Persist insight'
};
const TASK_STAGE_ORDER: Record<TaskType, TaskStage[]> = {
sync_filings: [
'queued',
'running',
'sync.fetch_filings',
'sync.fetch_metrics',
'sync.persist_filings',
'sync.hydrate_statements',
'completed'
],
refresh_prices: [
'queued',
'running',
'refresh.load_holdings',
'refresh.fetch_quotes',
'refresh.persist_prices',
'completed'
],
analyze_filing: [
'queued',
'running',
'analyze.load_filing',
'analyze.fetch_document',
'analyze.extract',
'analyze.generate_report',
'analyze.persist_report',
'completed'
],
portfolio_insights: [
'queued',
'running',
'insights.load_holdings',
'insights.generate',
'insights.persist',
'completed'
]
};
export function taskTypeLabel(taskType: TaskType) {
return TASK_TYPE_LABELS[taskType];
}
export function stageLabel(stage: TaskStage) {
return STAGE_LABELS[stage] ?? stage;
}
export function buildStageTimeline(task: Task, events: TaskStageEvent[]): StageTimelineItem[] {
const baseOrder = TASK_STAGE_ORDER[task.task_type] ?? ['queued', 'running', 'completed'];
const orderedStages = [...baseOrder];
if (task.status === 'failed' && !orderedStages.includes('failed')) {
orderedStages.push('failed');
}
const latestEventByStage = new Map<TaskStage, TaskStageEvent>();
for (const event of events) {
latestEventByStage.set(event.stage, event);
}
return orderedStages.map((stage) => {
const event = latestEventByStage.get(stage);
if (task.status === 'queued' || task.status === 'running') {
if (stage === task.stage) {
return {
stage,
label: stageLabel(stage),
state: 'active' as const,
detail: event?.stage_detail ?? task.stage_detail,
timestamp: event?.created_at ?? null
};
}
if (event) {
return {
stage,
label: stageLabel(stage),
state: 'completed' as const,
detail: event.stage_detail,
timestamp: event.created_at
};
}
return {
stage,
label: stageLabel(stage),
state: 'pending' as const,
detail: null,
timestamp: null
};
}
if (stage === task.stage || event) {
return {
stage,
label: stageLabel(stage),
state: 'completed' as const,
detail: event?.stage_detail ?? task.stage_detail,
timestamp: event?.created_at ?? task.finished_at
};
}
return {
stage,
label: stageLabel(stage),
state: 'pending' as const,
detail: null,
timestamp: null
};
});
}