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>