675 lines
24 KiB
TypeScript
675 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef, useState, useEffect, useMemo } from "react";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Sparkles,
|
|
Send,
|
|
Loader2,
|
|
MessageSquare,
|
|
Bot,
|
|
User,
|
|
ChevronRight,
|
|
X,
|
|
Copy,
|
|
Check,
|
|
Clock,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
GitBranch,
|
|
} from "lucide-react";
|
|
import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/Card";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Badge, ArtifactTypeBadge } from "@/components/ui/Badge";
|
|
import { EmptyState } from "@/components/ui/EmptyState";
|
|
import { askAsf, jobs, projects, artifacts as apiArtifacts } from "@/lib/api";
|
|
import { cn, fmtDate, shortId, truncate } from "@/lib/utils";
|
|
import type { Job, JobStatus, Artifact, Project } from "@/lib/types";
|
|
|
|
type MessageRole = "user" | "assistant" | "system";
|
|
type ChatStatus = "idle" | "queued" | "running" | "completed" | "failed" | "cancelled";
|
|
|
|
interface ChatMessage {
|
|
id: string;
|
|
role: MessageRole;
|
|
content: string;
|
|
timestamp: string;
|
|
status?: ChatStatus;
|
|
jobId?: string;
|
|
job?: Job | null;
|
|
error?: string;
|
|
}
|
|
|
|
const SUGGESTIONS = [
|
|
"Which services implement REQ-103 Requisito RBAC?",
|
|
"Summarize the current deployment chain from PR to PROD",
|
|
"What is the traceability score of project ASF Bootstrap?",
|
|
"List all tests that verify PR#88 feat(rbac)",
|
|
"How healthy is my project last 24h?",
|
|
];
|
|
|
|
const POLL_MS = 2000;
|
|
const MAX_POLLS = 120;
|
|
|
|
const statusTone: Record<Exclude<ChatStatus, "idle">, "brand" | "amber" | "green" | "red" | "neutral"> = {
|
|
queued: "neutral",
|
|
running: "brand",
|
|
completed: "green",
|
|
failed: "red",
|
|
cancelled: "neutral",
|
|
};
|
|
|
|
export default function AskAsfPage() {
|
|
const qc = useQueryClient();
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const [input, setInput] = useState("");
|
|
const [projectId, setProjectId] = useState<string>("all");
|
|
const [ctxIds, setCtxIds] = useState<string[]>([]);
|
|
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
|
const [pendingJob, setPendingJob] = useState<{ jobId: string; msgId: string; polls: number } | null>(null);
|
|
const [copied, setCopied] = useState<string>("");
|
|
|
|
const projectsQ = useMemo(() => ({ isFetched: false, data: [] as Project[], error: null }), []);
|
|
const [projectsList, setProjectsList] = useState<Project[]>([]);
|
|
const [artifactsList, setArtifactsList] = useState<Artifact[]>([]);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const [ps, as] = await Promise.all([
|
|
projects.list({ limit: 50 }),
|
|
apiArtifacts.list({ limit: 100 }),
|
|
]);
|
|
setProjectsList(ps);
|
|
setArtifactsList(as);
|
|
if (ps.length === 1) setProjectId(String(ps[0].id));
|
|
} catch {
|
|
// ignore offline fallback: demo suggestions
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
|
|
}, [messages, pendingJob]);
|
|
|
|
useEffect(() => {
|
|
if (!pendingJob) return;
|
|
let cancelled = false;
|
|
let polls = pendingJob.polls;
|
|
const tick = async () => {
|
|
if (cancelled) return;
|
|
polls += 1;
|
|
try {
|
|
const j = await jobs.get(pendingJob.jobId);
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.id === pendingJob.msgId
|
|
? {
|
|
...m,
|
|
status: (j.status as ChatStatus) ?? m.status,
|
|
job: j,
|
|
content: pickAnswer(j, m.content),
|
|
error: j.status === "failed" ? j.error ?? "AI job failed" : undefined,
|
|
}
|
|
: m,
|
|
),
|
|
);
|
|
void qc.invalidateQueries({ queryKey: ["jobs-list"] }).catch(() => undefined);
|
|
if (j.status === "completed" || j.status === "failed" || j.status === "cancelled" || polls > MAX_POLLS) {
|
|
if (polls > MAX_POLLS) {
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.id === pendingJob.msgId
|
|
? {
|
|
...m,
|
|
status: "failed",
|
|
error: "Timed out waiting for AI answer (max 240s).",
|
|
}
|
|
: m,
|
|
),
|
|
);
|
|
}
|
|
setPendingJob(null);
|
|
return;
|
|
}
|
|
setPendingJob({ ...pendingJob, polls });
|
|
} catch {
|
|
// keep retrying
|
|
}
|
|
if (!cancelled) setTimeout(tick, POLL_MS);
|
|
};
|
|
const t = setTimeout(tick, POLL_MS);
|
|
return () => {
|
|
cancelled = true;
|
|
clearTimeout(t);
|
|
};
|
|
}, [pendingJob, qc]);
|
|
|
|
const suggestions = useMemo(() => SUGGESTIONS, []);
|
|
|
|
const toggleCtxArtifact = (id: string) => {
|
|
setCtxIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
|
|
};
|
|
|
|
const handleSubmit = async (e?: React.FormEvent) => {
|
|
e?.preventDefault();
|
|
const q = input.trim();
|
|
if (!q || pendingJob) return;
|
|
|
|
const userMsg: ChatMessage = {
|
|
id: cryptoId(),
|
|
role: "user",
|
|
content: q,
|
|
timestamp: new Date().toISOString(),
|
|
};
|
|
const assistantMsgId = cryptoId();
|
|
const assistantMsg: ChatMessage = {
|
|
id: assistantMsgId,
|
|
role: "assistant",
|
|
content: "Thinking…",
|
|
timestamp: new Date().toISOString(),
|
|
status: "queued",
|
|
};
|
|
setMessages((prev) => [...prev, userMsg, assistantMsg]);
|
|
setInput("");
|
|
|
|
try {
|
|
const res = await askAsf.query({
|
|
question: q,
|
|
project_id: projectId !== "all" ? projectId : undefined,
|
|
context_artifact_ids: ctxIds.length ? ctxIds : undefined,
|
|
});
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.id === assistantMsgId ? { ...m, jobId: res.job_id, status: "queued" } : m,
|
|
),
|
|
);
|
|
setPendingJob({ jobId: res.job_id, msgId: assistantMsgId, polls: 0 });
|
|
} catch (err) {
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.id === assistantMsgId
|
|
? {
|
|
...m,
|
|
status: "failed",
|
|
error: err instanceof Error ? err.message : "Failed to enquire ASF",
|
|
}
|
|
: m,
|
|
),
|
|
);
|
|
}
|
|
};
|
|
|
|
const handleCopy = (id: string, text: string) => {
|
|
void navigator.clipboard?.writeText(text).then(() => {
|
|
setCopied(id);
|
|
setTimeout(() => setCopied(""), 1800);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="h-full flex flex-col min-h-0">
|
|
<header className="px-6 lg:px-8 pt-6 pb-4">
|
|
<div className="flex items-start gap-3 flex-wrap">
|
|
<div className="w-11 h-11 rounded-xl bg-gradient-to-br from-accent to-brand-600 shadow-soft grid place-items-center text-white shrink-0">
|
|
<Sparkles className="w-5.5 h-5.5 w-[22px] h-[22px]" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h1 className="text-2xl font-semibold tracking-tight text-slate-900 flex items-center gap-2 flex-wrap">
|
|
Ask ASF
|
|
<Badge tone="green" className="uppercase text-[10px] tracking-wide">
|
|
AI Live
|
|
</Badge>
|
|
</h1>
|
|
<p className="mt-1 text-sm text-slate-500 max-w-2xl">
|
|
Natural-language interface to the ASF graph. Questions are enqueued as{" "}
|
|
<span className="asf-monospace text-slate-700 bg-slate-100 rounded px-1">ai_interactive</span> jobs and
|
|
answered by the ASF Worker calling the asf-ai Gateway.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex-1 min-h-0 px-6 lg:px-8 pb-6 grid grid-cols-1 lg:grid-cols-12 gap-4">
|
|
<Card className="lg:col-span-4 xl:col-span-3 flex flex-col min-h-0">
|
|
<CardHeader>
|
|
<CardTitle className="!text-sm">Context & Scope</CardTitle>
|
|
</CardHeader>
|
|
<CardBody className="overflow-auto flex-1 min-h-0 space-y-4 text-sm">
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-500 mb-1.5">Project scope</label>
|
|
<select
|
|
className="asf-input text-sm"
|
|
value={projectId}
|
|
onChange={(e) => setProjectId(e.target.value)}
|
|
disabled={!!pendingJob}
|
|
>
|
|
<option value="all">All projects (tenant-wide)</option>
|
|
{projectsList.map((p) => (
|
|
<option key={p.id} value={String(p.id)}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<label className="block text-xs font-medium text-slate-500">Anchor artifacts</label>
|
|
{ctxIds.length > 0 && (
|
|
<button
|
|
type="button"
|
|
className="text-[11px] text-slate-400 hover:text-slate-600"
|
|
onClick={() => setCtxIds([])}
|
|
>
|
|
Clear ({ctxIds.length})
|
|
</button>
|
|
)}
|
|
</div>
|
|
<ul className="max-h-60 overflow-auto divide-y divide-slate-100 border border-slate-100 rounded-lg text-xs">
|
|
{artifactsList.length === 0 && (
|
|
<li className="p-3 text-slate-400">No artifacts loaded yet.</li>
|
|
)}
|
|
{artifactsList.map((a) => {
|
|
const on = ctxIds.includes(String(a.id));
|
|
return (
|
|
<li
|
|
key={a.id}
|
|
className={cn(
|
|
"flex items-center gap-2 px-2.5 py-2 cursor-pointer transition-colors",
|
|
on ? "bg-brand-50/60" : "hover:bg-slate-50",
|
|
)}
|
|
onClick={() => toggleCtxArtifact(String(a.id))}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"w-3.5 h-3.5 rounded border grid place-items-center shrink-0",
|
|
on ? "bg-brand-500 border-brand-500 text-white" : "border-slate-300 bg-white",
|
|
)}
|
|
>
|
|
{on && <Check className="w-2.5 h-2.5" />}
|
|
</span>
|
|
<ArtifactTypeBadge type={a.type} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-slate-700 font-medium">
|
|
{a.external_id ?? shortId(a.id)}
|
|
</div>
|
|
<div className="truncate text-slate-500">{truncate(a.title, 44)}</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-slate-100">
|
|
<p className="text-xs font-semibold text-slate-500 mb-2 uppercase tracking-wide">Try asking</p>
|
|
<div className="space-y-1.5">
|
|
{suggestions.map((s) => (
|
|
<button
|
|
key={s}
|
|
type="button"
|
|
disabled={!!pendingJob}
|
|
onClick={() => {
|
|
setInput(s);
|
|
setTimeout(() => handleSubmit(), 0);
|
|
}}
|
|
className="w-full text-left text-xs p-2 rounded-md border border-slate-100 hover:border-brand-200 hover:bg-brand-50/30 text-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
|
|
>
|
|
<ChevronRight className="w-3 h-3 text-brand-500 shrink-0" />
|
|
<span className="truncate">{s}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<Card className="lg:col-span-8 xl:col-span-9 flex flex-col min-h-0">
|
|
<CardHeader className="flex-wrap items-center gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<CardTitle className="!text-sm flex items-center gap-2">
|
|
<MessageSquare className="w-4 h-4 text-slate-400" />
|
|
Conversation
|
|
{pendingJob && (
|
|
<Badge tone={statusTone[(jobsStatusByJobId(pendingJob.jobId, messages) as Exclude<ChatStatus, "idle">) ?? "running"]} className="animate-pulse">
|
|
<Loader2 className="w-3 h-3 inline mr-1 animate-spin" />
|
|
Processing…
|
|
</Badge>
|
|
)}
|
|
</CardTitle>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
disabled={messages.length === 0}
|
|
onClick={() => {
|
|
setMessages([]);
|
|
setPendingJob(null);
|
|
}}
|
|
>
|
|
<X className="w-3.5 h-3.5 mr-1" />
|
|
Clear
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<div
|
|
ref={scrollRef}
|
|
className="flex-1 min-h-0 overflow-auto px-5 py-4 space-y-5 bg-slate-50/40 border-y border-slate-100"
|
|
>
|
|
{messages.length === 0 ? (
|
|
<div className="h-full flex items-center justify-center">
|
|
<EmptyState
|
|
title="Ask anything about your ASF graph"
|
|
description="The AI worker will reason over projects, artifacts, relationships and jobs. Start by typing a question above or pick a suggestion."
|
|
icon={Sparkles}
|
|
/>
|
|
</div>
|
|
) : (
|
|
messages.map((m) => (
|
|
<MessageBubble
|
|
key={m.id}
|
|
m={m}
|
|
artifacts={artifactsList}
|
|
projects={projectsList}
|
|
onCopy={() => handleCopy(m.id, m.content)}
|
|
copied={copied === m.id}
|
|
onJumpArtifact={(id) => {
|
|
const u = `/context?artifact=${encodeURIComponent(id)}`;
|
|
window.open(u, "_blank", "noopener");
|
|
}}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="p-3 border-t border-slate-100 bg-white rounded-b-xl flex flex-col gap-2"
|
|
>
|
|
<div className="flex gap-2 items-end">
|
|
<div className="flex-1 relative">
|
|
<textarea
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
void handleSubmit();
|
|
}
|
|
}}
|
|
rows={2}
|
|
placeholder="Ask ASF: Which services implement REQ-103?… (Enter to send, Shift+Enter for newline)"
|
|
className="asf-input pr-24 resize-none min-h-[60px]"
|
|
disabled={!!pendingJob}
|
|
/>
|
|
<div className="absolute bottom-2.5 right-2.5 text-[11px] text-slate-400 pointer-events-none select-none">
|
|
{projectId !== "all" && (
|
|
<span className="asf-chip !py-0.5 !px-2 mr-1">Project: {projectsList.find((p) => String(p.id) === projectId)?.name ?? shortId(projectId)}</span>
|
|
)}
|
|
{ctxIds.length > 0 && (
|
|
<span className="asf-chip !py-0.5 !px-2">{ctxIds.length} anchors</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
disabled={!input.trim() || !!pendingJob}
|
|
className="h-[60px] !px-4"
|
|
>
|
|
{pendingJob ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Working…
|
|
</>
|
|
) : (
|
|
<>
|
|
<Send className="w-4 h-4 mr-2" />
|
|
Send
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MessageBubble({
|
|
m,
|
|
artifacts,
|
|
projects,
|
|
onCopy,
|
|
copied,
|
|
onJumpArtifact,
|
|
}: {
|
|
m: ChatMessage;
|
|
artifacts: Artifact[];
|
|
projects: Project[];
|
|
onCopy: () => void;
|
|
copied: boolean;
|
|
onJumpArtifact: (id: string) => void;
|
|
}) {
|
|
const isUser = m.role === "user";
|
|
const projMap = useMemo(() => {
|
|
const mp = new Map<string, Project>();
|
|
for (const p of projects) mp.set(String(p.id), p);
|
|
return mp;
|
|
}, [projects]);
|
|
const artMap = useMemo(() => {
|
|
const mp = new Map<string, Artifact>();
|
|
for (const a of artifacts) mp.set(String(a.id), a);
|
|
return mp;
|
|
}, [artifacts]);
|
|
|
|
return (
|
|
<div className={cn("flex gap-3", isUser ? "justify-end" : "justify-start")}>
|
|
<div
|
|
className={cn(
|
|
"w-8 h-8 shrink-0 rounded-lg grid place-items-center border",
|
|
isUser
|
|
? "order-2 bg-slate-900 text-white border-slate-900"
|
|
: "bg-white border-slate-200 text-accent shadow-sm",
|
|
)}
|
|
>
|
|
{isUser ? <User className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
|
|
</div>
|
|
<div className={cn("max-w-[82%] flex flex-col gap-1.5", isUser ? "items-end" : "items-start")}>
|
|
<div className="flex items-center gap-2 text-[11px] text-slate-400">
|
|
<span className="font-semibold text-slate-500">{isUser ? "You" : "ASF AI"}</span>
|
|
<span>· {fmtDate(m.timestamp)}</span>
|
|
{m.jobId && (
|
|
<>
|
|
<GitBranch className="w-3 h-3 ml-1" />
|
|
<span className="asf-monospace">{shortId(m.jobId)}</span>
|
|
</>
|
|
)}
|
|
{m.status && m.status !== "idle" && (
|
|
<Badge tone={statusTone[m.status as Exclude<ChatStatus, "idle">] ?? "neutral"}>
|
|
{statusIcon(m.status)} {m.status}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"px-4 py-3 rounded-2xl border text-sm leading-relaxed",
|
|
isUser
|
|
? "bg-brand-600 text-white rounded-tr-sm border-brand-600"
|
|
: "bg-white text-slate-800 border-slate-200 rounded-tl-sm shadow-sm",
|
|
)}
|
|
>
|
|
{m.status === "queued" || m.status === "running" ? (
|
|
<div className="flex items-center gap-2">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
<span className="text-slate-600">
|
|
{m.status === "queued"
|
|
? "Query queued as ai_interactive job. Waiting for ASF Worker to claim it…"
|
|
: "Worker claimed the job. Reasoning over graph and calling asf-ai…"}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="whitespace-pre-wrap break-words">
|
|
{m.status === "failed" || m.error ? (
|
|
<div className="flex items-start gap-2 text-rose-700 bg-rose-50/60 -mx-1 px-3 py-2 rounded-lg">
|
|
<AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" />
|
|
<div>
|
|
<div className="font-semibold mb-0.5">AI execution failed</div>
|
|
<div className="text-[12px] text-rose-600">{m.error ?? "Unknown error"}</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<ContentAutoLink text={m.content} artMap={artMap} projMap={projMap} onJump={onJumpArtifact} />
|
|
)}
|
|
</div>
|
|
{m.job && (
|
|
<JobMeta job={m.job} />
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={onCopy}
|
|
className="inline-flex items-center gap-1 text-[11px] text-slate-400 hover:text-slate-600 px-2 py-0.5 rounded-md hover:bg-slate-100"
|
|
>
|
|
{copied ? <Check className="w-3 h-3 text-emerald-500" /> : <Copy className="w-3 h-3" />}
|
|
{copied ? "Copied" : "Copy"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ContentAutoLink({
|
|
text,
|
|
artMap,
|
|
projMap,
|
|
onJump,
|
|
}: {
|
|
text: string;
|
|
artMap: Map<string, Artifact>;
|
|
projMap: Map<string, Project>;
|
|
onJump: (id: string) => void;
|
|
}) {
|
|
const pattern = /\b(REQ|TASK|PR|TEST|BUILD|DEP|DOC|SRC|SEC|INC|EPIC)[-#]?\d*[A-Za-z0-9]*\b/g;
|
|
const parts: Array<string | JSX.Element> = [];
|
|
let last = 0;
|
|
let m: RegExpExecArray | null;
|
|
let key = 0;
|
|
while ((m = pattern.exec(text))) {
|
|
if (m.index > last) parts.push(text.slice(last, m.index));
|
|
const token = m[0];
|
|
const foundArt = Array.from(artMap.values()).find(
|
|
(a) => (a.external_id && a.external_id.toLowerCase() === token.toLowerCase()) || false,
|
|
);
|
|
if (foundArt) {
|
|
parts.push(
|
|
<button
|
|
key={`link-${key++}`}
|
|
type="button"
|
|
onClick={() => onJump(String(foundArt.id))}
|
|
className="asf-monospace inline-flex items-center gap-1 mx-0.5 -my-0.5 px-1.5 py-0.5 rounded bg-brand-50 text-brand-700 border border-brand-200 hover:bg-brand-100 transition-colors align-baseline"
|
|
>
|
|
{token}
|
|
<ChevronRight className="w-3 h-3" />
|
|
</button>,
|
|
);
|
|
} else {
|
|
parts.push(token);
|
|
}
|
|
last = m.index + token.length;
|
|
}
|
|
if (last < text.length) parts.push(text.slice(last));
|
|
return <>{parts}</>;
|
|
}
|
|
|
|
function JobMeta({ job }: { job: Job }) {
|
|
const usage = job.usage;
|
|
return (
|
|
<div className="mt-3 pt-3 border-t border-slate-100 text-[11px] text-slate-500 grid grid-cols-2 sm:grid-cols-4 gap-2">
|
|
<JobMetaPill label="Status" tone={statusTone[job.status as Exclude<ChatStatus, "idle">] ?? "neutral"} value={job.status} />
|
|
<JobMetaPill label="Started" value={job.started_at ? fmtDate(job.started_at) : "—"} />
|
|
<JobMetaPill label="Completed" value={job.completed_at ? fmtDate(job.completed_at) : "—"} />
|
|
<JobMetaPill label="Worker" value={job.worker ?? "asf-worker"} />
|
|
{usage?.input_tokens !== undefined && <JobMetaPill label="Input tok." value={String(usage.input_tokens)} />}
|
|
{usage?.output_tokens !== undefined && <JobMetaPill label="Output tok." value={String(usage.output_tokens)} />}
|
|
{usage?.cpu_seconds !== undefined && <JobMetaPill label="CPU s." value={usage.cpu_seconds.toFixed(2)} />}
|
|
{usage?.estimated_cost !== undefined && <JobMetaPill label="Cost" value={`$${usage.estimated_cost.toFixed(4)}`} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function JobMetaPill({ label, value, tone }: { label: string; value: string; tone?: "brand" | "green" | "red" | "neutral" | "amber" }) {
|
|
const toneCls = tone
|
|
? {
|
|
brand: "bg-brand-50 text-brand-700 border-brand-100",
|
|
green: "bg-emerald-50 text-emerald-700 border-emerald-100",
|
|
red: "bg-rose-50 text-rose-700 border-rose-100",
|
|
neutral: "bg-slate-50 text-slate-600 border-slate-200",
|
|
amber: "bg-amber-50 text-amber-700 border-amber-100",
|
|
}[tone]
|
|
: "bg-slate-50 text-slate-600 border-slate-200";
|
|
return (
|
|
<div className={cn("rounded-md border px-2 py-1", toneCls)}>
|
|
<div className="uppercase tracking-wide text-[9px] opacity-70">{label}</div>
|
|
<div className="asf-monospace font-semibold truncate">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function statusIcon(s: ChatStatus) {
|
|
switch (s) {
|
|
case "queued":
|
|
return <Clock className="w-3 h-3 inline mr-1" />;
|
|
case "running":
|
|
return <Loader2 className="w-3 h-3 inline mr-1 animate-spin" />;
|
|
case "completed":
|
|
return <CheckCircle2 className="w-3 h-3 inline mr-1" />;
|
|
case "failed":
|
|
return <AlertTriangle className="w-3 h-3 inline mr-1" />;
|
|
case "cancelled":
|
|
return <X className="w-3 h-3 inline mr-1" />;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function jobsStatusByJobId(jid: string, msgs: ChatMessage[]): JobStatus | null {
|
|
const m = msgs.find((x) => x.jobId === jid);
|
|
return (m?.job?.status ?? m?.status) as JobStatus | null;
|
|
}
|
|
|
|
function pickAnswer(j: Job, fallback: string): string {
|
|
if (j.result) {
|
|
const r = j.result as Record<string, unknown>;
|
|
for (const k of ["message", "answer", "summary", "response", "text"]) {
|
|
if (typeof r[k] === "string" && (r[k] as string).length > 0) return r[k] as string;
|
|
}
|
|
try {
|
|
return JSON.stringify(j.result, null, 2);
|
|
} catch {
|
|
/* noop */
|
|
}
|
|
}
|
|
if (j.status === "failed") {
|
|
return j.error ?? "ASF AI could not answer this question.";
|
|
}
|
|
if (j.status === "completed") {
|
|
return "Done. (AI result was returned with no message field.)";
|
|
}
|
|
return fallback;
|
|
}
|
|
|
|
function cryptoId(): string {
|
|
if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
|
|
return "id-" + Math.random().toString(36).slice(2) + Date.now().toString(36);
|
|
}
|