feat: AI ticket analyzer (phases 1-6)

Multi-stage LLM pipeline that produces structured analyses of Autotask
tickets from local Postgres. Migration 069 + Zod schemas, Stage 0
preprocessor, IT Glue redaction + search, Anthropic SDK wrapper, Stages
1/3/4 (Haiku/Sonnet/Opus), pipeline + cost circuit breaker, job worker
(opt-in autostart), 6 API routes, 3 frontend pages, share-row
persistence (email send deferred to phase 7). 128 vitest tests, tsc
clean. Build journal in docs/wulf-pulse-ticket-analyzer-build-notes.md.

Sync: adds syncTicketNotes() + ticket_notes to ordered/date-filtered
entities so the analyzer's local mirror stays current via scheduler.

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

components/analyzer/analysis-view.tsx

@@ -0,0 +1,399 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { Separator } from '@/components/ui/separator';
+import { ChevronRight, ChevronDown, ExternalLink, AlertTriangle } from 'lucide-react';
+import { ShareModal } from './share-modal';
+import { AnalyzeButton } from './analyze-button';
+import type { PersistedAnalysis, Visibility } from '@/lib/types/analyzer';
+
+interface AnalysisViewProps {
+  analysis: PersistedAnalysis;
+}
+
+const VISIBILITY_MARKER: Record<Visibility, string> = {
+  customer_facing: '🟢',
+  internal_only: '🔒',
+  mixed: '🔄',
+};
+
+const VISIBILITY_LABEL: Record<Visibility, string> = {
+  customer_facing: 'Customer-facing',
+  internal_only: 'Internal only',
+  mixed: 'Mixed (both)',
+};
+
+const SEVERITY_TONE: Record<string, string> = {
+  high: 'border-red-500 bg-red-500/5',
+  medium: 'border-amber-500 bg-amber-500/5',
+  low: 'border-blue-500 bg-blue-500/5',
+};
+
+function ConfidenceBadge({ score }: { score: number | null }) {
+  if (score === null) return null;
+  const pct = Math.round(score * 100);
+  const tone =
+    score >= 0.8 ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400'
+    : score >= 0.6 ? 'bg-amber-500/10 text-amber-700 dark:text-amber-400'
+    : 'bg-red-500/10 text-red-700 dark:text-red-400';
+  return (
+    <Badge className={tone} variant="outline">
+      Confidence {pct}%
+    </Badge>
+  );
+}
+
+function ModelBadges({ a }: { a: PersistedAnalysis }) {
+  return (
+    <div className="flex gap-1 flex-wrap">
+      {a.haikuUsed && <Badge variant="secondary">Haiku</Badge>}
+      {a.sonnetUsed && <Badge variant="secondary">Sonnet</Badge>}
+      {a.opusUsed && <Badge variant="secondary">Opus</Badge>}
+    </div>
+  );
+}
+
+export function AnalysisView({ analysis: a }: AnalysisViewProps) {
+  const [expandedEvent, setExpandedEvent] = useState<number | null>(null);
+  const [nextStepOpen, setNextStepOpen] = useState(false);
+
+  const timelineByTimestamp = useMemo(() => {
+    const map = new Map<string, number>();
+    (a.timeline ?? []).forEach((event, idx) => {
+      if (!map.has(event.timestamp)) map.set(event.timestamp, idx);
+    });
+    return map;
+  }, [a.timeline]);
+
+  function jumpToEvent(timestamp: string) {
+    const idx = timelineByTimestamp.get(timestamp);
+    if (idx === undefined) return;
+    setExpandedEvent(idx);
+    document
+      .getElementById(`timeline-event-${idx}`)
+      ?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 1. Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-start justify-between gap-4">
+            <div className="space-y-1 min-w-0">
+              <div className="flex items-center gap-2 flex-wrap">
+                <Link
+                  href={`/analyzer/ticket/${encodeURIComponent(a.ticketNumber)}`}
+                  className="font-mono text-sm hover:underline"
+                >
+                  {a.ticketNumber}
+                </Link>
+                <span className="text-muted-foreground text-sm">
+                  v{a.analysisVersion}
+                </span>
+                {a.needsHumanReview && (
+                  <Badge variant="destructive">Needs review</Badge>
+                )}
+              </div>
+              <CardTitle className="text-xl">
+                AI Analysis &middot; {new Date(a.triggeredAt).toLocaleString()}
+              </CardTitle>
+              <p className="text-muted-foreground text-sm">
+                {a.totalInputTokens.toLocaleString()} in /{' '}
+                {a.totalOutputTokens.toLocaleString()} out tokens · cost{' '}
+                {`$${a.estimatedCostUsd.toFixed(4)}`}
+              </p>
+            </div>
+            <div className="flex flex-col items-end gap-2 shrink-0">
+              <div className="flex gap-2 items-center">
+                <ModelBadges a={a} />
+                <ConfidenceBadge score={a.confidenceScore} />
+              </div>
+              <div className="flex gap-2">
+                <ShareModal analysisId={a.id} />
+                <AnalyzeButton
+                  ticketNumber={a.ticketNumber}
+                  force
+                  variant="outline"
+                />
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* 2. Summary */}
+      {a.summary && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Summary</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm leading-relaxed whitespace-pre-wrap">
+              {a.summary}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 3. Next step */}
+      {a.nextStep && (
+        <Card className="border-primary/40">
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              Next step
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm font-medium">{a.nextStep}</p>
+            {a.nextStepRationale && (
+              <Collapsible open={nextStepOpen} onOpenChange={setNextStepOpen} className="mt-3">
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="sm" className="-ml-3">
+                    {nextStepOpen ? (
+                      <ChevronDown className="w-4 h-4 mr-1" />
+                    ) : (
+                      <ChevronRight className="w-4 h-4 mr-1" />
+                    )}
+                    Rationale
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <p className="text-sm text-muted-foreground mt-2">
+                    {a.nextStepRationale}
+                  </p>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 4. Timeline */}
+      {a.timeline && a.timeline.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Timeline</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ol className="space-y-3 border-l-2 border-muted ml-2">
+              {a.timeline.map((event, idx) => (
+                <li
+                  key={idx}
+                  id={`timeline-event-${idx}`}
+                  className="pl-4 relative -ml-px"
+                >
+                  <span className="absolute -left-2 top-1.5 w-3 h-3 rounded-full bg-background border-2 border-muted-foreground" />
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setExpandedEvent(expandedEvent === idx ? null : idx)
+                    }
+                    className="text-left w-full hover:bg-accent/50 -mx-2 px-2 py-1 rounded"
+                  >
+                    <div className="flex items-start gap-2 flex-wrap text-sm">
+                      <span title={VISIBILITY_LABEL[event.visibility]}>
+                        {VISIBILITY_MARKER[event.visibility]}
+                      </span>
+                      <span className="font-mono text-xs text-muted-foreground shrink-0">
+                        {new Date(event.timestamp).toLocaleString()}
+                      </span>
+                      <span className="font-medium">{event.actor}</span>
+                      <Badge variant="outline" className="text-xs">
+                        {event.actor_type}
+                      </Badge>
+                      <Badge variant="outline" className="text-xs">
+                        {event.source}
+                      </Badge>
+                    </div>
+                    <p className="text-sm mt-1">{event.action}</p>
+                  </button>
+                </li>
+              ))}
+            </ol>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 5+6. What was done / should have been done — side by side on wide */}
+      {((a.whatWasDone?.length ?? 0) > 0 ||
+        (a.whatShouldHaveBeenDone?.length ?? 0) > 0) && (
+        <div className="grid lg:grid-cols-2 gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">What was done</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="text-sm space-y-2 list-disc pl-5">
+                {(a.whatWasDone ?? []).map((item, i) => (
+                  <li key={i}>{item}</li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">
+                What should have been done
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="text-sm space-y-2 list-disc pl-5">
+                {(a.whatShouldHaveBeenDone ?? []).map((item, i) => (
+                  <li key={i}>{item}</li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* 7. Gaps */}
+      {a.gaps && a.gaps.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Gaps</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {a.gaps.map((gap, i) => (
+              <div
+                key={i}
+                className={`rounded-lg border-l-4 p-3 ${SEVERITY_TONE[gap.severity] ?? ''}`}
+              >
+                <div className="flex items-center gap-2">
+                  <Badge
+                    variant={
+                      gap.severity === 'high'
+                        ? 'destructive'
+                        : gap.severity === 'medium'
+                          ? 'default'
+                          : 'secondary'
+                    }
+                  >
+                    {gap.severity}
+                  </Badge>
+                  <p className="text-sm font-medium">{gap.description}</p>
+                </div>
+                {gap.evidence_timestamps.length > 0 && (
+                  <div className="mt-2 text-xs text-muted-foreground">
+                    Evidence:{' '}
+                    {gap.evidence_timestamps.map((ts, j) => (
+                      <button
+                        key={j}
+                        type="button"
+                        onClick={() => jumpToEvent(ts)}
+                        className="underline mr-2 font-mono"
+                      >
+                        {new Date(ts).toLocaleString()}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 8. Post-resolution analysis */}
+      {a.postResolutionAnalysis && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Post-resolution analysis</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm whitespace-pre-wrap">
+              {a.postResolutionAnalysis}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 9. Human review flags */}
+      {a.needsHumanReview && (
+        <Card className="border-destructive/50 bg-destructive/5">
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4 text-destructive" />
+              Human review flags
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="text-sm space-y-1 list-disc pl-5">
+              {(a.humanReviewReasons ?? []).map((reason, i) => (
+                <li key={i}>{reason}</li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 10. IT Glue references */}
+      {a.itglueDocsReferenced.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">IT Glue references</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="text-sm space-y-2">
+              {a.itglueDocsReferenced.map((doc) => (
+                <li key={doc.id} className="flex items-start gap-2">
+                  <Badge variant="outline">{doc.doc_type}</Badge>
+                  <div className="min-w-0 flex-1">
+                    {doc.url ? (
+                      <a
+                        href={doc.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="font-medium hover:underline inline-flex items-center gap-1"
+                      >
+                        {doc.name}
+                        <ExternalLink className="w-3 h-3" />
+                      </a>
+                    ) : (
+                      <span className="font-medium">{doc.name}</span>
+                    )}
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {doc.relevance_reason}
+                    </p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Expanded event detail (rendered separately so it floats independently) */}
+      {expandedEvent !== null && a.timeline?.[expandedEvent] && (
+        <Card className="border-dashed">
+          <CardHeader>
+            <CardTitle className="text-sm">Event detail</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <p>
+              <strong>{a.timeline[expandedEvent].actor}</strong> ·{' '}
+              {new Date(a.timeline[expandedEvent].timestamp).toLocaleString()}
+            </p>
+            <p>{a.timeline[expandedEvent].action}</p>
+            <Separator />
+            <p className="text-xs text-muted-foreground">
+              Visibility: {VISIBILITY_LABEL[a.timeline[expandedEvent].visibility]}
+              {' · '} Source: {a.timeline[expandedEvent].source}
+              {' · '} Actor type: {a.timeline[expandedEvent].actor_type}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

components/analyzer/analyze-button.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { Sparkles, Loader2 } from 'lucide-react';
+import type { JobStatus } from '@/lib/types/analyzer';
+
+interface AnalyzeButtonProps {
+  ticketNumber: string;
+  /** Force a re-run even if the content hash matches an existing analysis. */
+  force?: boolean;
+  variant?: 'default' | 'outline' | 'secondary';
+  label?: string;
+}
+
+const STAGE_LABEL: Record<JobStatus, string> = {
+  queued: 'Queued…',
+  fetching: 'Fetching…',
+  triaging: 'Triaging…',
+  itglue: 'Searching IT Glue…',
+  analyzing: 'Analyzing…',
+  deep_review: 'Deep review…',
+  complete: 'Done',
+  failed: 'Failed',
+};
+
+export function AnalyzeButton({
+  ticketNumber,
+  force = false,
+  variant = 'default',
+  label = 'Analyze',
+}: AnalyzeButtonProps) {
+  const router = useRouter();
+  const [status, setStatus] = useState<JobStatus | 'idle'>('idle');
+
+  async function pollJob(jobId: string) {
+    const start = Date.now();
+    const TIMEOUT_MS = 5 * 60 * 1000;
+    while (Date.now() - start < TIMEOUT_MS) {
+      await new Promise((r) => setTimeout(r, 2000));
+      const res = await fetch(`/api/analyzer/jobs/${jobId}`);
+      if (!res.ok) throw new Error(`Job poll failed: ${res.status}`);
+      const { job } = (await res.json()) as {
+        job: { status: JobStatus; resultAnalysisId: string | null; errorMessage: string | null };
+      };
+      setStatus(job.status);
+      if (job.status === 'complete' && job.resultAnalysisId) {
+        return job.resultAnalysisId;
+      }
+      if (job.status === 'failed') {
+        throw new Error(job.errorMessage ?? 'Analysis failed');
+      }
+    }
+    throw new Error('Analysis timed out after 5 minutes');
+  }
+
+  async function handleClick() {
+    setStatus('queued');
+    try {
+      const res = await fetch(
+        `/api/analyzer/tickets/${encodeURIComponent(ticketNumber)}/analyze`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ force }),
+        }
+      );
+      if (!res.ok) {
+        const error = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(error.error ?? `Request failed: ${res.status}`);
+      }
+      const data = (await res.json()) as
+        | { status: 'complete'; existingAnalysisId: string }
+        | { status: 'queued'; jobId: string };
+
+      if (data.status === 'complete') {
+        router.push(`/analyzer/analysis/${data.existingAnalysisId}`);
+        return;
+      }
+
+      const analysisId = await pollJob(data.jobId);
+      router.push(`/analyzer/analysis/${analysisId}`);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      toast.error(msg);
+      setStatus('idle');
+    }
+  }
+
+  const isRunning = status !== 'idle' && status !== 'failed';
+
+  return (
+    <Button onClick={handleClick} disabled={isRunning} variant={variant}>
+      {isRunning ? (
+        <>
+          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+          {STAGE_LABEL[status as JobStatus] ?? 'Working…'}
+        </>
+      ) : (
+        <>
+          <Sparkles className="w-4 h-4 mr-2" />
+          {force ? 'Re-analyze' : label}
+        </>
+      )}
+    </Button>
+  );
+}

components/analyzer/share-modal.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Share2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface ShareModalProps {
+  analysisId: string;
+}
+
+export function ShareModal({ analysisId }: ShareModalProps) {
+  const [open, setOpen] = useState(false);
+  const [recipientEmail, setRecipientEmail] = useState('');
+  const [note, setNote] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      const res = await fetch(`/api/analyzer/analyses/${analysisId}/share`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          recipientEmail,
+          note: note.trim() || undefined,
+        }),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as { error?: string; message?: string };
+        throw new Error(data.message ?? data.error ?? `Request failed: ${res.status}`);
+      }
+      toast.success(`Shared with ${recipientEmail}`);
+      setOpen(false);
+      setRecipientEmail('');
+      setNote('');
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      toast.error(msg);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Share2 className="w-4 h-4 mr-2" />
+          Share
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Share this analysis</DialogTitle>
+          <DialogDescription>
+            Recipient must be on an allowed domain (set via
+            ALLOWED_SHARE_DOMAINS).
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="recipient">Recipient email</Label>
+            <Input
+              id="recipient"
+              type="email"
+              required
+              value={recipientEmail}
+              onChange={(e) => setRecipientEmail(e.target.value)}
+              placeholder="colleague@wulfconsulting.com"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="note">Note (optional)</Label>
+            <Textarea
+              id="note"
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="Why you're sharing this…"
+              rows={3}
+              maxLength={2000}
+            />
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={submitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={submitting || !recipientEmail}>
+              {submitting ? 'Sharing…' : 'Share'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}