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>
This commit is contained in:
parent
ea3471d38d
commit
8f8b5ab7be
53 changed files with 9377 additions and 33 deletions
399
components/analyzer/analysis-view.tsx
Normal file
399
components/analyzer/analysis-view.tsx
Normal file
|
|
@ -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 · {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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue