feat: implement PDF viewer for resume previews and integrate with report panel

surfsense_backend/app/agents/new_chat/tools/resume.py

@@ -362,9 +362,10 @@ def create_generate_resume_tool(
                 {"phase": "saving", "message": "Saving your resume"},
             )
 
-            # Extract a title from the Typst source (the = heading)
+            # Extract a title from the Typst source (the = heading is the person's name)
             title_match = re.search(r"^=\s+(.+)$", typst_source, re.MULTILINE)
-            resume_title = title_match.group(1).strip() if title_match else "Resume"
+            name = title_match.group(1).strip() if title_match else None
+            resume_title = f"{name} - Resume" if name else "Resume"
 
             metadata: dict[str, Any] = {
                 "status": "ready",

surfsense_web/components/assistant-ui/assistant-message.tsx

@@ -71,6 +71,13 @@ const GenerateReportToolUI = dynamic(
 		})),
 	{ ssr: false }
 );
+const GenerateResumeToolUI = dynamic(
+	() =>
+		import("@/components/tool-ui/generate-resume").then((m) => ({
+			default: m.GenerateResumeToolUI,
+		})),
+	{ ssr: false }
+);
 const GeneratePodcastToolUI = dynamic(
 	() =>
 		import("@/components/tool-ui/generate-podcast").then((m) => ({
@@ -487,6 +494,7 @@ const AssistantMessageInner: FC = () => {
 						tools: {
 							by_name: {
 								generate_report: GenerateReportToolUI,
+								generate_resume: GenerateResumeToolUI,
 								generate_podcast: GeneratePodcastToolUI,
 								generate_video_presentation: GenerateVideoPresentationToolUI,
 								display_image: GenerateImageToolUI,

surfsense_web/components/report-panel/pdf-viewer.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+import { Button } from "@/components/ui/button";
+import { getAuthHeaders } from "@/lib/auth-utils";
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+	"pdfjs-dist/build/pdf.worker.min.mjs",
+	import.meta.url
+).toString();
+
+interface PdfViewerProps {
+	pdfUrl: string;
+}
+
+const ZOOM_STEP = 0.15;
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 3;
+
+export function PdfViewer({ pdfUrl }: PdfViewerProps) {
+	const [numPages, setNumPages] = useState<number>(0);
+	const [pageNumber, setPageNumber] = useState(1);
+	const [scale, setScale] = useState(1);
+	const [loadError, setLoadError] = useState<string | null>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	const documentOptions = useMemo(() => ({ httpHeaders: getAuthHeaders() }), []);
+
+	const onDocumentLoadSuccess = useCallback(({ numPages }: { numPages: number }) => {
+		setNumPages(numPages);
+		setPageNumber(1);
+		setLoadError(null);
+	}, []);
+
+	const onDocumentLoadError = useCallback((error: Error) => {
+		setLoadError(error.message || "Failed to load PDF");
+	}, []);
+
+	const goToPrevPage = useCallback(() => {
+		setPageNumber((prev) => Math.max(1, prev - 1));
+	}, []);
+
+	const goToNextPage = useCallback(() => {
+		setPageNumber((prev) => Math.min(numPages, prev + 1));
+	}, [numPages]);
+
+	const zoomIn = useCallback(() => {
+		setScale((prev) => Math.min(MAX_ZOOM, prev + ZOOM_STEP));
+	}, []);
+
+	const zoomOut = useCallback(() => {
+		setScale((prev) => Math.max(MIN_ZOOM, prev - ZOOM_STEP));
+	}, []);
+
+	if (loadError) {
+		return (
+			<div className="flex flex-col items-center justify-center h-full gap-3 p-6 text-center">
+				<p className="font-medium text-foreground">Failed to load resume preview</p>
+				<p className="text-sm text-muted-foreground">{loadError}</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col h-full">
+			{/* Controls bar */}
+			{numPages > 0 && (
+				<div className="flex items-center justify-center gap-2 px-4 py-2 border-b bg-sidebar shrink-0">
+					{numPages > 1 && (
+						<>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={goToPrevPage}
+								disabled={pageNumber <= 1}
+								className="size-7"
+							>
+								<ChevronLeftIcon className="size-4" />
+							</Button>
+							<span className="text-xs text-muted-foreground tabular-nums min-w-[60px] text-center">
+								{pageNumber} / {numPages}
+							</span>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={goToNextPage}
+								disabled={pageNumber >= numPages}
+								className="size-7"
+							>
+								<ChevronRightIcon className="size-4" />
+							</Button>
+							<div className="w-px h-4 bg-border mx-1" />
+						</>
+					)}
+					<Button variant="ghost" size="icon" onClick={zoomOut} disabled={scale <= MIN_ZOOM} className="size-7">
+						<ZoomOutIcon className="size-4" />
+					</Button>
+					<span className="text-xs text-muted-foreground tabular-nums min-w-[40px] text-center">
+						{Math.round(scale * 100)}%
+					</span>
+					<Button variant="ghost" size="icon" onClick={zoomIn} disabled={scale >= MAX_ZOOM} className="size-7">
+						<ZoomInIcon className="size-4" />
+					</Button>
+				</div>
+			)}
+
+			{/* PDF content */}
+			<div ref={containerRef} className="flex-1 overflow-auto flex justify-center bg-muted/30 p-4">
+				<Document
+					file={pdfUrl}
+					onLoadSuccess={onDocumentLoadSuccess}
+					onLoadError={onDocumentLoadError}
+					options={documentOptions}
+					loading={
+						<div className="flex items-center justify-center h-64">
+							<div className="size-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+						</div>
+					}
+				>
+					<Page
+						pageNumber={pageNumber}
+						scale={scale}
+						renderTextLayer
+						renderAnnotationLayer
+						className="shadow-lg"
+						error={
+							<div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
+								Failed to render page {pageNumber}
+							</div>
+						}
+					/>
+				</Document>
+			</div>
+		</div>
+	);
+}

surfsense_web/components/report-panel/report-panel.tsx

@@ -53,6 +53,11 @@ const PlateEditor = dynamic(
 	{ ssr: false, loading: () => <ReportPanelSkeleton /> }
 );
 
+const PdfViewer = dynamic(
+	() => import("@/components/report-panel/pdf-viewer").then((m) => ({ default: m.PdfViewer })),
+	{ ssr: false, loading: () => <ReportPanelSkeleton /> }
+);
+
 /**
  * Zod schema for a single version entry
  */
@@ -68,6 +73,7 @@ const ReportContentResponseSchema = z.object({
 	id: z.number(),
 	title: z.string(),
 	content: z.string().nullish(),
+	content_type: z.string().default("markdown"),
 	report_metadata: z
 		.object({
 			status: z.enum(["ready", "failed"]).nullish(),
@@ -318,6 +324,7 @@ export function ReportPanelContent({
 								onExport={handleExport}
 								exporting={exporting}
 								showAllFormats={!shareToken}
+								pdfOnly={reportContent?.content_type === "typst"}
 							/>
 						</DropdownMenuContent>
 					</DropdownMenu>
@@ -371,6 +378,10 @@ export function ReportPanelContent({
 							<p className="text-sm text-red-500 mt-1">{error || "An unknown error occurred"}</p>
 						</div>
 					</div>
+				) : reportContent.content_type === "typst" ? (
+					<PdfViewer
+						pdfUrl={`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/reports/${activeReportId}/preview`}
+					/>
 				) : reportContent.content ? (
 					isReadOnly ? (
 						<div className="h-full overflow-y-auto px-5 py-4">

surfsense_web/components/shared/ExportMenuItems.tsx

@@ -24,18 +24,30 @@ interface ExportMenuItemsProps {
 	exporting: string | null;
 	/** Hide server-side formats (PDF, DOCX, etc.) — only show md */
 	showAllFormats?: boolean;
+	/** When true, only show PDF export (used for Typst-based resumes) */
+	pdfOnly?: boolean;
 }
 
 export function ExportDropdownItems({
 	onExport,
 	exporting,
 	showAllFormats = true,
+	pdfOnly = false,
 }: ExportMenuItemsProps) {
 	const handle = (format: string) => (e: React.MouseEvent) => {
 		e.stopPropagation();
 		onExport(format);
 	};
 
+	if (pdfOnly) {
+		return (
+			<DropdownMenuItem onClick={handle("pdf")} disabled={exporting !== null}>
+				{exporting === "pdf" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+				PDF (.pdf)
+			</DropdownMenuItem>
+		);
+	}
+
 	return (
 		<>
 			{showAllFormats && (