lorentz
8f8b5ab7be
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>
399 lines
14 KiB
TypeScript
399 lines
14 KiB
TypeScript
'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>
|
|
);
|
|
}
|