feat(uat-batch-8): qualification rework — intent auto-confirm + derived-only + collapse-when-done

Three coordinated changes to the per-interest qualification checklist
that collectively trim it from a noisy gate into an out-of-the-way
audit log once the deal moves forward.

- Auto-confirm `intent_confirmed` once `pipelineStage > qualified`.
  Signing an EOI (or later) is the strongest signal of intent; the
  checklist no longer requires a redundant explicit tick. Evidence
  string reads "Stage advanced past Qualified".
- `dimensions` becomes derived-only — explicit ticks no longer
  override removed evidence. When the rep deletes a yacht link or
  clears desired dims, the row un-ticks immediately. Judgement-based
  criteria keep the OR semantic so a manual confirmation survives an
  evidence change.
- Checklist auto-collapses when fully confirmed: header shows ✓ All
  confirmed (label · label) with a chevron; rep clicks to expand and
  inspect or untick. Forced-expanded whenever an item is still
  outstanding. ARIA-controlled.
- `qualification.service` gains a `pipelineStage` column-select and
  threads it through `AutoCtx`; `DERIVED_ONLY_KEYS` Set sentinel
  drives the new merge semantic.

tsc clean. 1419/1419 vitest pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/interests/qualification-checklist.tsx

@@ -1,8 +1,9 @@
 'use client';
 
+import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
-import { CheckCircle2, ChevronRight } from 'lucide-react';
+import { CheckCircle2, ChevronDown, ChevronRight } from 'lucide-react';
 
 import { Checkbox } from '@/components/ui/checkbox';
 import { Button } from '@/components/ui/button';
@@ -49,6 +50,10 @@ export function QualificationChecklist({
 }) {
   const params = useParams<{ portSlug: string }>();
   const queryClient = useQueryClient();
+  // When the checklist is fully confirmed, default to collapsed and let
+  // the rep expand on demand. `null` means "follow the auto-default";
+  // an explicit boolean reflects a rep click.
+  const [manuallyExpanded, setManuallyExpanded] = useState(false);
 
   const { data, isLoading } = useQuery<QualificationResponse>({
     queryKey: ['interest-qualifications', interestId],
@@ -87,88 +92,122 @@ export function QualificationChecklist({
 
   const fullyQualified = data.data.fullyQualified;
   const showPromoteHint = fullyQualified && currentStage === 'enquiry';
+  // Auto-collapse when fully confirmed — rep can expand to inspect.
+  // Force-expanded whenever there's still an outstanding item.
+  const expanded = manuallyExpanded || !fullyQualified;
   // Avoid referencing `params` in the JSX so the unused destructure passes
   // strict noUnused checks; it stays available for future deep-link hooks.
   void params;
 
   return (
     <section className="rounded-lg border bg-card/40 p-4 space-y-3">
-      <div className="flex items-center justify-between gap-3">
-        <h3 className="text-sm font-semibold">Qualification</h3>
+      <button
+        type="button"
+        onClick={() => fullyQualified && setManuallyExpanded((v) => !v)}
+        className={cn(
+          'flex w-full items-center justify-between gap-3 rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          fullyQualified ? 'cursor-pointer' : 'cursor-default',
+        )}
+        aria-expanded={expanded}
+        aria-controls="qualification-checklist-body"
+        disabled={!fullyQualified}
+      >
+        <span className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">Qualification</h3>
+          {fullyQualified && (
+            <ChevronDown
+              className={cn(
+                'size-3.5 text-muted-foreground transition-transform',
+                !expanded && '-rotate-90',
+              )}
+              aria-hidden
+            />
+          )}
+        </span>
         {fullyQualified ? (
           <span className="inline-flex items-center gap-1 text-xs text-emerald-700">
             <CheckCircle2 className="size-3.5" aria-hidden />
             All confirmed
+            {!expanded && criteria.length > 0 ? (
+              <span className="ml-1 text-muted-foreground">
+                ({criteria.map((c) => c.label.toLowerCase()).join(' · ')})
+              </span>
+            ) : null}
           </span>
         ) : (
           <span className="text-xs text-muted-foreground">
             {criteria.filter((c) => c.confirmed).length} of {criteria.length} confirmed
           </span>
         )}
-      </div>
+      </button>
 
-      <ul className="space-y-1.5">
-        {criteria.map((c) => (
-          <li
-            key={c.key}
-            className={cn(
-              'flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors',
-              // Unconfirmed rows get a subtle amber accent (left border +
-              // tinted background) so reps can scan the checklist and
-              // immediately see what's outstanding. Confirmed rows stay
-              // muted with line-through; auto-satisfied rows are functionally
-              // confirmed and follow the confirmed styling.
-              !c.confirmed && 'border-l-2 border-warning bg-warning-bg/40',
-            )}
-          >
-            <Checkbox
-              id={`qual-${c.key}`}
-              checked={c.confirmed}
-              // Auto-satisfied rows can't be unchecked from the UI — the
-              // underlying data signal would just re-tick the box on the next
-              // refetch. The rep clears the dimensions tick by removing the
-              // yacht dims or desired-berth dims from the interest.
-              disabled={toggleMutation.isPending || c.autoSatisfied}
-              onCheckedChange={(v) =>
-                toggleMutation.mutate({ criterionKey: c.key, confirmed: v === true })
-              }
-              className="mt-0.5"
-            />
-            <label
-              htmlFor={`qual-${c.key}`}
+      {expanded ? (
+        <ul id="qualification-checklist-body" className="space-y-1.5">
+          {criteria.map((c) => (
+            <li
+              key={c.key}
               className={cn(
-                'flex-1 text-sm',
-                c.autoSatisfied ? 'cursor-default' : 'cursor-pointer',
-                c.confirmed ? 'text-muted-foreground' : 'text-foreground',
+                'flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors',
+                // Unconfirmed rows get a subtle amber accent (left border +
+                // tinted background) so reps can scan the checklist and
+                // immediately see what's outstanding. Confirmed rows stay
+                // muted with line-through; auto-satisfied rows are functionally
+                // confirmed and follow the confirmed styling.
+                !c.confirmed && 'border-l-2 border-warning bg-warning-bg/40',
               )}
             >
-              <span className="flex flex-wrap items-center gap-1.5">
-                <span
-                  className={cn('font-medium', c.confirmed && 'line-through text-muted-foreground')}
-                >
-                  {c.label}
-                </span>
-                {c.autoSatisfied && (
-                  <span
-                    className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200"
-                    title="System-derived from data on this interest"
-                  >
-                    Auto
-                  </span>
+              <Checkbox
+                id={`qual-${c.key}`}
+                checked={c.confirmed}
+                // Auto-satisfied rows can't be unchecked from the UI — the
+                // underlying data signal would just re-tick the box on the next
+                // refetch. The rep clears the dimensions tick by removing the
+                // yacht dims or desired-berth dims from the interest.
+                disabled={toggleMutation.isPending || c.autoSatisfied}
+                onCheckedChange={(v) =>
+                  toggleMutation.mutate({ criterionKey: c.key, confirmed: v === true })
+                }
+                className="mt-0.5"
+              />
+              <label
+                htmlFor={`qual-${c.key}`}
+                className={cn(
+                  'flex-1 text-sm',
+                  c.autoSatisfied ? 'cursor-default' : 'cursor-pointer',
+                  c.confirmed ? 'text-muted-foreground' : 'text-foreground',
                 )}
-              </span>
-              {c.description ? (
-                <p className="mt-0.5 text-xs text-muted-foreground">{c.description}</p>
-              ) : null}
-              {c.autoSatisfied && c.evidence ? (
-                <p className="mt-0.5 text-xs font-medium text-emerald-700 dark:text-emerald-300">
-                  {c.evidence}
-                </p>
-              ) : null}
-            </label>
-          </li>
-        ))}
-      </ul>
+              >
+                <span className="flex flex-wrap items-center gap-1.5">
+                  <span
+                    className={cn(
+                      'font-medium',
+                      c.confirmed && 'line-through text-muted-foreground',
+                    )}
+                  >
+                    {c.label}
+                  </span>
+                  {c.autoSatisfied && (
+                    <span
+                      className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200"
+                      title="System-derived from data on this interest"
+                    >
+                      Auto
+                    </span>
+                  )}
+                </span>
+                {c.description ? (
+                  <p className="mt-0.5 text-xs text-muted-foreground">{c.description}</p>
+                ) : null}
+                {c.autoSatisfied && c.evidence ? (
+                  <p className="mt-0.5 text-xs font-medium text-emerald-700 dark:text-emerald-300">
+                    {c.evidence}
+                  </p>
+                ) : null}
+              </label>
+            </li>
+          ))}
+        </ul>
+      ) : null}
 
       {showPromoteHint ? (
         <div className="flex items-center justify-between rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2">