Improve job status notifications

components/notifications/task-detail-modal.tsx

@@ -2,11 +2,13 @@
 
 import { format } from 'date-fns';
 import { ChevronDown, LoaderCircle, X } from 'lucide-react';
+import Link from 'next/link';
 import { useEffect, useMemo, useState } from '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';
+import type { Task, TaskStageContext } from '@/lib/types';
 
 function formatTimestamp(value: string | null) {
   if (!value) {
@@ -21,6 +23,94 @@ function formatTimestamp(value: string | null) {
   return format(parsed, 'MMM dd, yyyy HH:mm:ss');
 }
 
+function formatCounterLabel(value: string) {
+  return value
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function ProgressPanel({ task }: { task: Task }) {
+  const progress = task.notification.progress;
+  if (!progress) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className="mb-1 flex items-center justify-between text-xs text-[color:var(--terminal-muted)]">
+        <span>{progress.current}/{progress.total} {progress.unit}</span>
+        <span>{progress.percent ?? 0}%</span>
+      </div>
+      <div className="h-2 rounded-full bg-[color:rgba(255,255,255,0.08)]">
+        <div
+          className="h-full rounded-full bg-[color:var(--accent)] transition-[width] duration-300"
+          style={{ width: `${progress.percent ?? 0}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function StatsPanel({ task }: { task: Task }) {
+  const counters = task.stage_context?.counters ?? {};
+  const counterEntries = Object.entries(counters);
+
+  if (task.notification.stats.length === 0 && counterEntries.length === 0) {
+    return <p className="text-xs text-[color:var(--terminal-muted)]">No structured metrics available for this job yet.</p>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {task.notification.stats.map((stat) => (
+        <div key={`${stat.label}:${stat.value}`} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2 text-xs text-[color:var(--terminal-bright)]">
+          <span className="text-[color:var(--terminal-muted)]">{stat.label}</span> {stat.value}
+        </div>
+      ))}
+      {counterEntries.map(([label, value]) => (
+        <div key={label} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2 text-xs text-[color:var(--terminal-bright)]">
+          <span className="text-[color:var(--terminal-muted)]">{formatCounterLabel(label)}</span> {value}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function StageContextBlock({ context }: { context: TaskStageContext | null }) {
+  if (!context) {
+    return null;
+  }
+
+  const counters = Object.entries(context.counters ?? {});
+
+  return (
+    <div className="mt-2 space-y-2">
+      {context.progress ? (
+        <div className="text-[11px] text-[color:var(--terminal-muted)]">
+          Progress {context.progress.current}/{context.progress.total} {context.progress.unit}
+        </div>
+      ) : null}
+      {context.subject ? (
+        <div className="text-[11px] text-[color:var(--terminal-muted)]">
+          {[context.subject.ticker, context.subject.accessionNumber, context.subject.label].filter(Boolean).join(' · ')}
+        </div>
+      ) : null}
+      {counters.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {counters.map(([label, value]) => (
+            <span
+              key={label}
+              className="inline-flex items-center rounded-full border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1 text-[11px] text-[color:var(--terminal-muted)]"
+            >
+              {formatCounterLabel(label)}: {value}
+            </span>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 type TaskDetailModalProps = {
   isOpen: boolean;
   taskId: string | null;
@@ -136,6 +226,39 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
                 <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)]">Summary</p>
+                <p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</p>
+                <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{task.notification.statusLine}</p>
+                {task.notification.detailLine ? (
+                  <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
+                ) : null}
+                <div className="mt-3">
+                  <ProgressPanel task={task} />
+                </div>
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {task.notification.actions
+                    .filter((action) => action.id !== 'open_details' && action.href)
+                    .map((action) => (
+                      <Link
+                        key={action.id}
+                        href={action.href ?? '#'}
+                        className={action.primary
+                          ? 'inline-flex items-center rounded-lg border border-[color:var(--line-strong)] bg-[color:var(--panel)] px-3 py-1.5 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--accent)]'
+                          : 'inline-flex items-center rounded-lg border border-[color:var(--line-weak)] px-3 py-1.5 text-xs text-[color:var(--terminal-muted)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--terminal-bright)]'
+                        }
+                      >
+                        {action.label}
+                      </Link>
+                    ))}
+                </div>
+              </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)]">Key metrics</p>
+                <StatsPanel task={task} />
+              </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="max-h-72 space-y-1.5 overflow-y-auto pr-1">
@@ -168,12 +291,7 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
                       {expandedStage === item.stage ? (
                         <div className="border-t border-[color:var(--line-weak)] px-3 py-2">
                           <p className="text-xs text-[color:var(--terminal-muted)]">{item.detail ?? 'No additional detail for this step.'}</p>
-                          {item.stage === 'completed' && task.result ? (
-                            <div className="mt-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
-                              <p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Result detail</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}
+                          <StageContextBlock context={item.context} />
                         </div>
                       ) : null}
                     </li>
@@ -187,6 +305,13 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
                   <p className="mt-1 text-sm text-[#ffd6d6]">{task.error}</p>
                 </div>
               ) : null}
+
+              {task.result ? (
+                <details className="mb-3 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
+                  <summary className="cursor-pointer text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Debug result</summary>
+                  <pre className="mt-3 max-h-56 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
+                </details>
+              ) : null}
             </>
           ) : null}
         </div>

components/notifications/task-notifications-trigger.tsx

@@ -4,7 +4,6 @@ import { formatDistanceToNow } from 'date-fns';
 import { Bell, BellRing, LoaderCircle } from 'lucide-react';
 import type { Task } from '@/lib/types';
 import { StatusPill } from '@/components/ui/status-pill';
-import { taskTypeLabel } from '@/components/notifications/task-stage-helpers';
 import { cn } from '@/lib/utils';
 
 type TaskNotificationsTriggerProps = {
@@ -18,11 +17,53 @@ type TaskNotificationsTriggerProps = {
   showReadFinished: boolean;
   setShowReadFinished: (value: boolean) => void;
   openTaskDetails: (taskId: string) => void;
+  openTaskAction: (task: Task, actionId?: string | null) => void;
   silenceTask: (taskId: string, silenced?: boolean) => Promise<void>;
   markTaskRead: (taskId: string, read?: boolean) => Promise<void>;
   className?: string;
 };
 
+function ProgressBar({ task }: { task: Task }) {
+  const progress = task.notification.progress;
+  if (!progress) {
+    return null;
+  }
+
+  return (
+    <div className="mt-2">
+      <div className="mb-1 flex items-center justify-between text-[11px] text-[color:var(--terminal-muted)]">
+        <span>{progress.current}/{progress.total} {progress.unit}</span>
+        <span>{progress.percent ?? 0}%</span>
+      </div>
+      <div className="h-1.5 rounded-full bg-[color:rgba(255,255,255,0.08)]">
+        <div
+          className="h-full rounded-full bg-[color:var(--accent)] transition-[width] duration-300"
+          style={{ width: `${progress.percent ?? 0}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function StatChips({ task }: { task: Task }) {
+  if (task.notification.stats.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-2 flex flex-wrap gap-1.5">
+      {task.notification.stats.map((stat) => (
+        <span
+          key={`${stat.label}:${stat.value}`}
+          className="inline-flex items-center rounded-full border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-2 py-1 text-[11px] text-[color:var(--terminal-muted)]"
+        >
+          {stat.label}: {stat.value}
+        </span>
+      ))}
+    </div>
+  );
+}
+
 export function TaskNotificationsTrigger({
   unreadCount,
   isPopoverOpen,
@@ -34,6 +75,7 @@ export function TaskNotificationsTrigger({
   showReadFinished,
   setShowReadFinished,
   openTaskDetails,
+  openTaskAction,
   silenceTask,
   markTaskRead,
   className
@@ -112,14 +154,32 @@ export function TaskNotificationsTrigger({
                     activeTasks.map((task) => (
                       <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
                         <div className="flex items-center justify-between gap-2">
-                          <p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
+                          <p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</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>
+                        <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">{task.notification.statusLine}</p>
+                        {task.notification.detailLine ? (
+                          <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
+                        ) : null}
+                        <ProgressBar task={task} />
+                        <StatChips task={task} />
                         <p className="mt-1 text-[11px] text-[color:var(--terminal-muted)]">
                           {formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
                         </p>
-                        <div className="mt-2 flex items-center justify-between">
+                        <div className="mt-2 flex flex-wrap items-center gap-3">
+                          {task.notification.actions
+                            .filter((action) => action.primary && action.id !== 'open_details')
+                            .slice(0, 1)
+                            .map((action) => (
+                              <button
+                                key={action.id}
+                                type="button"
+                                className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
+                                onClick={() => openTaskAction(task, action.id)}
+                              >
+                                {action.label}
+                              </button>
+                            ))}
                           <button
                             type="button"
                             className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
@@ -153,14 +213,32 @@ export function TaskNotificationsTrigger({
                       return (
                         <article key={task.id} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
                           <div className="flex items-center justify-between gap-2">
-                            <p className="text-sm text-[color:var(--terminal-bright)]">{taskTypeLabel(task.task_type)}</p>
+                            <p className="text-sm text-[color:var(--terminal-bright)]">{task.notification.title}</p>
                             <StatusPill status={task.status} />
                           </div>
-                          <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-bright)]">{task.notification.statusLine}</p>
+                          {task.notification.detailLine ? (
+                            <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{task.notification.detailLine}</p>
+                          ) : null}
+                          <ProgressBar task={task} />
+                          <StatChips task={task} />
                           <p className="mt-1 text-[11px] text-[color:var(--terminal-muted)]">
                             {formatDistanceToNow(new Date(task.updated_at), { addSuffix: true })}
                           </p>
-                          <div className="mt-2 flex items-center justify-between">
+                          <div className="mt-2 flex flex-wrap items-center gap-3">
+                            {task.notification.actions
+                              .filter((action) => action.primary && action.id !== 'open_details')
+                              .slice(0, 1)
+                              .map((action) => (
+                                <button
+                                  key={action.id}
+                                  type="button"
+                                  className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
+                                  onClick={() => openTaskAction(task, action.id)}
+                                >
+                                  {action.label}
+                                </button>
+                              ))}
                             <button
                               type="button"
                               className="text-xs text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"

components/notifications/task-stage-helpers.ts

@@ -1,176 +1,8 @@
-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',
-  index_search: 'Search indexing'
-};
-
-const STAGE_LABELS: Record<TaskStage, string> = {
-  queued: 'Queued',
-  running: 'Running',
-  completed: 'Completed',
-  failed: 'Failed',
-  'sync.fetch_filings': 'Fetch filings',
-  'sync.discover_assets': 'Discover taxonomy assets',
-  'sync.extract_taxonomy': 'Extract taxonomy',
-  'sync.normalize_taxonomy': 'Normalize taxonomy',
-  'sync.derive_metrics': 'Derive metrics',
-  'sync.validate_pdf_metrics': 'Validate PDF metrics',
-  'sync.persist_taxonomy': 'Persist taxonomy',
-  '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',
-  'search.collect_sources': 'Collect sources',
-  'search.fetch_documents': 'Fetch documents',
-  'search.chunk': 'Chunk content',
-  'search.embed': 'Generate embeddings',
-  'search.persist': 'Persist search index',
-  '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.persist_filings',
-    'sync.discover_assets',
-    'sync.extract_taxonomy',
-    'sync.normalize_taxonomy',
-    'sync.derive_metrics',
-    'sync.validate_pdf_metrics',
-    'sync.persist_taxonomy',
-    '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'
-  ],
-  index_search: [
-    'queued',
-    'running',
-    'search.collect_sources',
-    'search.fetch_documents',
-    'search.chunk',
-    'search.embed',
-    'search.persist',
-    '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
-    };
-  });
-}
+export {
+  buildStageTimeline,
+  fallbackStageProgress,
+  stageLabel,
+  taskStageOrder,
+  taskTypeLabel,
+  type StageTimelineItem
+} from '@/lib/task-workflow';