Merge pull request #1619 from CREDO23/feat-run-citations

[Feat] Cite scraper runs as verifiable sources in chat

surfsense_web/components/citations/citation-renderer.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react";
 import { InlineCitation, UrlCitation } from "@/components/assistant-ui/inline-citation";
+import { RunCitation } from "@/components/citations/run-citation";
 import {
 	type CitationToken,
 	type CitationUrlMap,
@@ -21,6 +22,9 @@ export function renderCitationToken(token: CitationToken, ordinalKey: number): R
 	if (token.kind === "url") {
 		return <UrlCitation key={`citation-url-${ordinalKey}`} url={token.url} />;
 	}
+	if (token.kind === "run") {
+		return <RunCitation key={`citation-run-${token.runId}-${ordinalKey}`} runId={token.runId} />;
+	}
 	return (
 		<InlineCitation
 			key={`citation-${token.isDocsChunk ? "doc-" : ""}${token.chunkId}-${ordinalKey}`}

surfsense_web/components/citations/run-citation-panel.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { XIcon } from "lucide-react";
+import { useParams } from "next/navigation";
+import type { FC } from "react";
+import { RunDetail } from "@/app/dashboard/[workspace_id]/playground/components/run-detail";
+import { Button } from "@/components/ui/button";
+
+/** Right-panel viewer for a cited scraper run. `runId` is the `run_<uuid>` handle. */
+export const RunCitationPanelContent: FC<{ runId: string; onClose?: () => void }> = ({
+	runId,
+	onClose,
+}) => {
+	const params = useParams();
+	const rawWorkspaceId = Array.isArray(params?.workspace_id)
+		? params.workspace_id[0]
+		: params?.workspace_id;
+	const workspaceId = Number(rawWorkspaceId);
+	const scraperRunId = runId.replace(/^run_/, "");
+
+	return (
+		<>
+			<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
+				<h2 className="select-none text-lg font-semibold">Scraper run</h2>
+				{onClose && (
+					<Button
+						variant="ghost"
+						size="icon"
+						onClick={onClose}
+						className="h-8 w-8 rounded-full shrink-0 text-muted-foreground hover:text-accent-foreground"
+					>
+						<XIcon className="h-4 w-4" />
+						<span className="sr-only">Close run panel</span>
+					</Button>
+				)}
+			</div>
+
+			<div className="flex-1 overflow-y-auto">
+				{Number.isFinite(workspaceId) ? (
+					<RunDetail workspaceId={workspaceId} runId={scraperRunId} />
+				) : (
+					<p className="p-4 text-sm text-muted-foreground">Open a workspace to view this run.</p>
+				)}
+			</div>
+		</>
+	);
+};

surfsense_web/components/citations/run-citation.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useSetAtom } from "jotai";
+import { Database } from "lucide-react";
+import type { FC } from "react";
+import { openRunCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+/** Inline citation badge for a scraper run; opens the run in the citation panel. */
+export const RunCitation: FC<{ runId: string }> = ({ runId }) => {
+	const openRunPanel = useSetAtom(openRunCitationPanelAtom);
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					type="button"
+					variant="ghost"
+					onClick={() => openRunPanel({ runId })}
+					className="ml-0.5 inline-flex h-5 min-w-5 items-center justify-center gap-0.5 rounded-md bg-popover px-1.5 text-[11px] font-medium text-popover-foreground/80 align-baseline"
+					aria-label="See where this came from"
+				>
+					<Database className="size-3" />
+					Source
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>See where this came from</TooltipContent>
+		</Tooltip>
+	);
+};

surfsense_web/components/layout/ui/right-panel/RightPanel.tsx

@@ -35,6 +35,14 @@ const CitationPanelContent = dynamic(
 	{ ssr: false, loading: () => null }
 );
 
+const RunCitationPanelContent = dynamic(
+	() =>
+		import("@/components/citations/run-citation-panel").then((m) => ({
+			default: m.RunCitationPanelContent,
+		})),
+	{ ssr: false, loading: () => null }
+);
+
 const HitlEditPanelContent = dynamic(
 	() =>
 		import("@/features/chat-messages/hitl").then((m) => ({
@@ -89,7 +97,7 @@ export function RightPanelToggleButton({
 				? !!editorState.memoryScope
 				: !!editorState.localFilePath);
 	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
-	const citationOpen = citationState.isOpen && citationState.chunkId != null;
+	const citationOpen = citationState.isOpen && citationState.target != null;
 	const hasContent = reportOpen || editorOpen || hitlEditOpen || citationOpen || artifactsOpen;
 	const label = collapsed ? "Expand panel" : "Collapse panel";
 
@@ -141,7 +149,7 @@ export function RightPanelExpandButton() {
 				? !!editorState.memoryScope
 				: !!editorState.localFilePath);
 	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
-	const citationOpen = citationState.isOpen && citationState.chunkId != null;
+	const citationOpen = citationState.isOpen && citationState.target != null;
 	const hasContent = reportOpen || editorOpen || hitlEditOpen || citationOpen || artifactsOpen;
 
 	if (!collapsed || !hasContent) return null;
@@ -212,7 +220,7 @@ export function RightPanel({ showTopBorder = false }: RightPanelProps) {
 				? !!editorState.memoryScope
 				: !!editorState.localFilePath);
 	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
-	const citationOpen = citationState.isOpen && citationState.chunkId != null;
+	const citationOpen = citationState.isOpen && citationState.target != null;
 
 	useEffect(() => {
 		if (!reportOpen && !editorOpen && !hitlEditOpen && !citationOpen && !artifactsOpen) return;
@@ -306,9 +314,19 @@ export function RightPanel({ showTopBorder = false }: RightPanelProps) {
 									/>
 								</div>
 							)}
-							{effectiveTab === "citation" && citationOpen && citationState.chunkId != null && (
+							{effectiveTab === "citation" && citationOpen && citationState.target && (
 								<div className="h-full flex flex-col">
-									<CitationPanelContent chunkId={citationState.chunkId} onClose={closeCitation} />
+									{citationState.target.kind === "run" ? (
+										<RunCitationPanelContent
+											runId={citationState.target.runId}
+											onClose={closeCitation}
+										/>
+									) : (
+										<CitationPanelContent
+											chunkId={citationState.target.chunkId}
+											onClose={closeCitation}
+										/>
+									)}
 								</div>
 							)}
 							{effectiveTab === "artifacts" && artifactsOpen && (