feat: dispute UI enhancements — Notion badges, triage colors, sync button, deadline countdown, clickable stage pills

- Notion sync badge (linked/unlinked) with clickable Notion URL on dispute cards
- Triage severity coloring on priority badges (CRITICAL/HIGH/MEDIUM/LOW)
- "Sync Notion" button in disputes header with sync status display
- Deadline countdown badges with urgency coloring (overdue, <=3d, <=7d)
- Enhanced deadlines panel: sorted by date, overdue highlighting, countdown labels
- Clickable stage pills replacing "Advance Stage" button
- Notion indicator dot on dashboard DisputesWidget
- ProgressDots tint prop for stage-specific coloring
- syncDisputesNotion API method
- daysUntil utility function

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: chitcommit

ui/src/components/dashboard/DisputesWidget.tsx

@@ -32,8 +32,16 @@ export function DisputesWidget({ disputes }: Props) {
         <Card key={d.id} urgency={d.priority <= 1 ? 'red' : d.priority <= 3 ? 'amber' : 'green'}>
           <div className="flex items-start justify-between gap-2">
             <div className="min-w-0 flex-1">
-              <p className="font-medium text-card-text truncate">{d.title}</p>
-              <p className="text-card-muted text-xs">vs {d.counterparty}</p>
+              <div className="flex items-center gap-1.5">
+                <span
+                  className={`inline-block w-2 h-2 rounded-full shrink-0 ${
+                    d.metadata?.notion_task_id ? 'bg-green-500' : 'bg-gray-300'
+                  }`}
+                  title={d.metadata?.notion_task_id ? 'Synced to Notion' : 'Not synced to Notion'}
+                />
+                <p className="font-medium text-card-text truncate">{d.title}</p>
+              </div>
+              <p className="text-card-muted text-xs ml-3.5">vs {d.counterparty}</p>
               <ProgressDots completed={disputeStageIndex(d.status) + 1} total={DISPUTE_STAGES.length} className="mt-2" />
             </div>
             <div className="text-right shrink-0">

ui/src/components/ui/ProgressDots.tsx

@@ -1,12 +1,29 @@
 import { cn } from '../../lib/utils';
 
+export type ProgressDotsTint = 'default' | 'amber' | 'blue' | 'green';
+
 interface ProgressDotsProps {
   completed: number;
   total: number;
+  tint?: ProgressDotsTint;
   className?: string;
 }
 
-export function ProgressDots({ completed, total, className }: ProgressDotsProps) {
+const TINT_FILLED: Record<ProgressDotsTint, string> = {
+  default: 'bg-urgency-green',
+  amber: 'bg-urgency-amber',
+  blue: 'bg-chitty-400',
+  green: 'bg-urgency-green',
+};
+
+const TINT_LABEL: Record<ProgressDotsTint, string> = {
+  default: 'text-card-muted',
+  amber: 'text-urgency-amber',
+  blue: 'text-chitty-500',
+  green: 'text-urgency-green',
+};
+
+export function ProgressDots({ completed, total, tint = 'default', className }: ProgressDotsProps) {
   const safeTotal = Math.max(1, Math.floor(total));
   const safeCompleted = Math.max(0, Math.min(Math.floor(completed), safeTotal));
 
@@ -16,12 +33,12 @@ export function ProgressDots({ completed, total, className }: ProgressDotsProps)
         <span
           key={i}
           className={cn(
-            'w-2 h-2 rounded-full',
-            i < safeCompleted ? 'bg-urgency-green' : 'bg-card-border',
+            'w-2 h-2 rounded-full transition-colors duration-200',
+            i < safeCompleted ? TINT_FILLED[tint] : 'bg-card-border',
           )}
         />
       ))}
-      <span className="text-xs text-card-muted ml-1">
+      <span className={cn('text-xs ml-1', TINT_LABEL[tint])}>
         {safeCompleted}/{safeTotal}
       </span>
     </div>

ui/src/lib/api.ts

@@ -217,6 +217,10 @@ export const api = {
     request<{ total: number; synced: number }>('/bridge/ledger/sync-documents', { method: 'POST' }),
   syncLedgerDisputes: () =>
     request<{ total: number; synced: number }>('/bridge/ledger/sync-disputes', { method: 'POST' }),
+  syncDisputesNotion: (direction: 'to_notion' | 'from_notion' | 'both' = 'both') =>
+    request<{ pushed: number; reconciled: number; direction: string; duration_ms: number }>(
+      '/bridge/disputes/sync-notion', { method: 'POST', body: JSON.stringify({ direction }) },
+    ),
 
   // Cash Flow
   getCashflowProjections: () =>
@@ -482,6 +486,7 @@ export interface Dispute {
   description: string | null;
   next_action: string | null;
   next_action_date: string | null;
+  metadata?: Record<string, unknown> | null;
 }
 
 export interface Correspondence {

ui/src/pages/Disputes.tsx

@@ -2,8 +2,7 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { api, type Dispute, type Correspondence, type LegalDeadline } from '../lib/api';
 import { Card } from '../components/ui/Card';
 import { ActionButton } from '../components/ui/ActionButton';
-import { ProgressDots } from '../components/ui/ProgressDots';
-import { formatCurrency, formatDate } from '../lib/utils';
+import { formatCurrency, formatDate, daysUntil } from '../lib/utils';
 import { useToast } from '../lib/toast';
 import { useSearchParams } from 'react-router-dom';
 
@@ -43,6 +42,20 @@ function getNextStage(current: DisputeStage): DisputeStage {
   return DISPUTE_STAGES[idx + 1];
 }
 
+/** Urgency color classes for countdown badges: red <=3d, amber <=7d, green otherwise */
+function countdownClasses(days: number): { bg: string; text: string } {
+  if (days < 0) return { bg: 'bg-red-600', text: 'text-white' };
+  if (days <= 3) return { bg: 'bg-red-100', text: 'text-red-700' };
+  if (days <= 7) return { bg: 'bg-amber-100', text: 'text-amber-700' };
+  return { bg: 'bg-green-100', text: 'text-green-700' };
+}
+
+function countdownLabel(days: number): string {
+  if (days < 0) return `${Math.abs(days)}d ago`;
+  if (days === 0) return 'TODAY';
+  return `${days}d`;
+}
+
 export function Disputes() {
   const [searchParams] = useSearchParams();
   const [disputes, setDisputes] = useState<Dispute[]>([]);
@@ -75,6 +88,9 @@ export function Disputes() {
     next_action: '',
     next_action_date: '',
   });
+  const [syncing, setSyncing] = useState(false);
+  const [lastSync, setLastSync] = useState<{ pushed: number; reconciled: number; duration_ms: number; at: Date } | null>(null);
+  const [showSyncStatus, setShowSyncStatus] = useState(false);
   const toast = useToast();
   const autoExpandedRef = useRef<string | null>(null);
 
@@ -230,17 +246,49 @@ export function Disputes() {
     return 'green';
   };
 
+  const syncNotion = async () => {
+    setSyncing(true);
+    try {
+      const result = await api.syncDisputesNotion('both');
+      const syncResult = { pushed: result.pushed, reconciled: result.reconciled, duration_ms: result.duration_ms, at: new Date() };
+      setLastSync(syncResult);
+      setShowSyncStatus(true);
+      toast.success('Notion sync complete', `Pushed ${result.pushed}, reconciled ${result.reconciled} in ${result.duration_ms}ms`, { durationMs: 3000 });
+      reload();
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Sync failed';
+      toast.error('Notion sync failed', msg);
+    } finally {
+      setSyncing(false);
+    }
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between gap-3">
         <h1 className="text-lg lg:text-xl font-bold text-chrome-text">Active Disputes</h1>
-        <ActionButton
-          label={showCreateForm ? 'Close Form' : 'New Dispute'}
-          variant={showCreateForm ? 'secondary' : 'primary'}
-          onClick={() => setShowCreateForm((v) => !v)}
-        />
+        <div className="flex gap-2">
+          <ActionButton
+            label={syncing ? 'Syncing...' : 'Sync Notion'}
+            variant="secondary"
+            onClick={syncNotion}
+            loading={syncing}
+          />
+          <ActionButton
+            label={showCreateForm ? 'Close Form' : 'New Dispute'}
+            variant={showCreateForm ? 'secondary' : 'primary'}
+            onClick={() => setShowCreateForm((v) => !v)}
+          />
+        </div>
       </div>
 
+      {showSyncStatus && lastSync && (
+        <div className="flex items-center justify-between text-xs text-card-muted bg-card-hover border border-card-border rounded-lg px-3 py-2">
+          <span>Last sync: {lastSync.pushed} pushed, {lastSync.reconciled} reconciled ({lastSync.duration_ms}ms)</span>
+          <button onClick={() => setShowSyncStatus(false)} className="text-card-muted hover:text-card-text ml-2">&times;</button>
+        </div>
+      )}
+
       {error && (
         <Card urgency="red">
           <p className="text-urgency-red text-sm">{error}</p>
@@ -329,14 +377,24 @@ export function Disputes() {
         {disputes.map((d) => {
           const stage = normalizeStage(d);
           const stageIndex = DISPUTE_STAGES.indexOf(stage);
-          const canAdvance = stage !== 'resolved';
-
           return (
             <Card key={d.id} urgency={priorityUrgency(d.priority)}>
               <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4 mb-3">
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2 mb-1 flex-wrap">
-                    <span className="text-xs px-2 py-0.5 rounded-full font-medium bg-red-100 text-red-700">
+                    <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+                      (() => {
+                        const severity = d.metadata?.triage_severity as string | undefined;
+                        if (severity === 'CRITICAL') return 'bg-red-100 text-red-700';
+                        if (severity === 'HIGH') return 'bg-orange-100 text-orange-700';
+                        if (severity === 'MEDIUM') return 'bg-yellow-100 text-yellow-700';
+                        if (severity === 'LOW') return 'bg-gray-100 text-gray-600';
+                        // Fallback to existing priority-based coloring
+                        if (d.priority <= 1) return 'bg-red-100 text-red-700';
+                        if (d.priority <= 3) return 'bg-orange-100 text-orange-700';
+                        return 'bg-gray-100 text-gray-600';
+                      })()
+                    }`}>
                       P{d.priority}
                     </span>
                     <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-card-muted">
@@ -348,6 +406,48 @@ export function Disputes() {
                     <span className="text-xs px-2 py-0.5 rounded-full bg-card-hover text-card-muted uppercase">
                       {d.status}
                     </span>
+                    {d.metadata?.notion_task_id ? (
+                      d.metadata?.notion_url ? (
+                        <a
+                          href={d.metadata.notion_url as string}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 hover:bg-green-200 transition-colors"
+                        >
+                          Notion
+                        </a>
+                      ) : (
+                        <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700">
+                          Notion
+                        </span>
+                      )
+                    ) : (
+                      <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-400">
+                        Unlinked
+                      </span>
+                    )}
+                    {!!d.metadata?.triage_severity && (
+                      <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+                        (() => {
+                          const sev = d.metadata.triage_severity as string;
+                          if (sev === 'CRITICAL') return 'bg-red-100 text-red-700';
+                          if (sev === 'HIGH') return 'bg-orange-100 text-orange-700';
+                          if (sev === 'MEDIUM') return 'bg-yellow-100 text-yellow-700';
+                          return 'bg-gray-100 text-gray-600';
+                        })()
+                      }`}>
+                        {(d.metadata.triage_severity as string)}
+                      </span>
+                    )}
+                    {d.next_action_date && (() => {
+                      const days = daysUntil(d.next_action_date);
+                      const cls = countdownClasses(days);
+                      return (
+                        <span className={`text-xs px-2 py-0.5 rounded-full font-mono font-semibold ${cls.bg} ${cls.text}`}>
+                          {days < 0 ? 'OVERDUE' : countdownLabel(days)}
+                        </span>
+                      );
+                    })()}
                   </div>
                   <h2 className="text-base lg:text-lg font-semibold text-card-text">{d.title}</h2>
                   <p className="text-card-muted text-sm">vs {d.counterparty}</p>
@@ -360,7 +460,32 @@ export function Disputes() {
                 )}
               </div>
 
-              <ProgressDots completed={stageIndex + 1} total={DISPUTE_STAGES.length} className="mb-3" />
+              <div className="flex items-center gap-1 mb-3 flex-wrap">
+                {DISPUTE_STAGES.map((s, i) => {
+                  const isCurrent = s === stage;
+                  const isPast = i < stageIndex;
+                  const isNext = i === stageIndex + 1;
+                  return (
+                    <button
+                      key={s}
+                      disabled={!isNext || advancingId === d.id}
+                      onClick={() => isNext && advanceStage(d)}
+                      className={`text-xs px-2 py-0.5 rounded-full transition-all ${
+                        isCurrent
+                          ? 'bg-chitty-500 text-white font-semibold'
+                          : isPast
+                            ? 'bg-chitty-100 text-chitty-700'
+                            : isNext
+                              ? 'bg-card-hover text-chitty-500 border border-chitty-300 cursor-pointer hover:bg-chitty-50'
+                              : 'bg-card-hover text-card-muted border border-card-border cursor-default'
+                      }`}
+                      title={isNext ? `Advance to ${STAGE_LABELS[s]}` : STAGE_LABELS[s]}
+                    >
+                      {STAGE_LABELS[s]}
+                    </button>
+                  );
+                })}
+              </div>
 
               {d.description && (
                 <p className="text-card-muted text-sm mb-3">{d.description}</p>
@@ -392,13 +517,6 @@ export function Disputes() {
                   variant={expandedId === d.id && activePanel === 'deadlines' ? 'primary' : 'secondary'}
                   onClick={() => togglePanel(d.id, 'deadlines')}
                 />
-                {canAdvance && (
-                  <ActionButton
-                    label={advancingId === d.id ? 'Advancing...' : 'Advance Stage'}
-                    onClick={() => advanceStage(d)}
-                    loading={advancingId === d.id}
-                  />
-                )}
               </div>
 
               {expandedId === d.id && activePanel === 'correspondence' && (
@@ -514,16 +632,46 @@ export function Disputes() {
                   )}
                   {deadlineList.length > 0 ? (
                     <div className="space-y-2">
-                      {deadlineList.map((dl) => (
-                        <div key={dl.id} className="text-xs p-2 rounded-lg bg-card-bg border border-card-border">
-                          <div className="flex justify-between text-card-muted">
-                            <span>{dl.deadline_type}</span>
-                            <span>{formatDate(dl.deadline_date)}</span>
-                          </div>
-                          <p className="text-card-text mt-1 font-medium">{dl.title}</p>
-                          <p className="text-card-muted mt-1">{dl.case_ref}</p>
-                        </div>
-                      ))}
+                      {[...deadlineList]
+                        .sort((a, b) => new Date(a.deadline_date).getTime() - new Date(b.deadline_date).getTime())
+                        .map((dl) => {
+                          const days = daysUntil(dl.deadline_date);
+                          const cls = countdownClasses(days);
+                          const isOverdue = days < 0;
+                          return (
+                            <div
+                              key={dl.id}
+                              className={`text-xs p-2 rounded-lg border ${
+                                isOverdue
+                                  ? 'bg-red-900/20 border-red-700'
+                                  : days <= 3
+                                    ? 'bg-red-900/10 border-red-700/50'
+                                    : days <= 7
+                                      ? 'bg-amber-900/10 border-amber-700/50'
+                                      : 'bg-card-bg border-card-border'
+                              }`}
+                            >
+                              <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                  <span className="text-card-muted">{dl.deadline_type}</span>
+                                  {isOverdue && (
+                                    <span className="text-xs px-1.5 py-0.5 rounded font-semibold bg-red-600 text-white">
+                                      OVERDUE
+                                    </span>
+                                  )}
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  <span className={`px-1.5 py-0.5 rounded font-mono font-semibold ${cls.bg} ${cls.text}`}>
+                                    {countdownLabel(days)}
+                                  </span>
+                                  <span className="text-card-muted">{formatDate(dl.deadline_date)}</span>
+                                </div>
+                              </div>
+                              <p className="text-card-text mt-1 font-medium">{dl.title}</p>
+                              <p className="text-card-muted mt-1">{dl.case_ref}</p>
+                            </div>
+                          );
+                        })}
                     </div>
                   ) : (
                     <p className="text-card-muted text-xs">No linked deadlines for this dispute.</p>