feat: add ChiefAnalystCard component with PDF download

2026-03-24 14:08:33 +01:00 · 2026-03-24 14:08:33 +01:00 · de14b339ed
parent d3d69b2d56
commit de14b339ed
4 changed files with 646 additions and 3 deletions
--- a/ui/tests/features/run-detail/ChiefAnalystCard.test.tsx
+++ b/ui/tests/features/run-detail/ChiefAnalystCard.test.tsx
@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react'
+import ChiefAnalystCard from '@/features/run-detail/components/ChiefAnalystCard'
+import type { ChiefAnalystReport } from '@/lib/types/agents'
+
+// react-to-pdf uses browser APIs not available in Jest — mock it
+jest.mock('react-to-pdf', () => ({
+  usePDF: () => ({ toPDF: jest.fn(), targetRef: { current: null } }),
+}))
+
+const mockReport: ChiefAnalystReport = {
+  verdict:   'BUY',
+  catalyst:  'Strong Q4 earnings beat with record margins',
+  execution: 'Enter at market price, stop loss at $180',
+  tail_risk: 'Federal Reserve rate hike could compress multiples',
+}
+
+test('shows pending state when status is pending and report is null', () => {
+  render(<ChiefAnalystCard report={null} status="pending" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByText(/standing by/i)).toBeInTheDocument()
+})
+
+test('shows running skeleton when status is running', () => {
+  render(<ChiefAnalystCard report={null} status="running" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByTestId('chief-analyst-card')).toBeInTheDocument()
+})
+
+test('shows verdict when status is done and report is provided', () => {
+  render(<ChiefAnalystCard report={mockReport} status="done" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByText('BUY')).toBeInTheDocument()
+})
+
+test('shows catalyst when done', () => {
+  render(<ChiefAnalystCard report={mockReport} status="done" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByText(/Strong Q4 earnings beat/i)).toBeInTheDocument()
+})
+
+test('shows execution when done', () => {
+  render(<ChiefAnalystCard report={mockReport} status="done" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByText(/Enter at market price/i)).toBeInTheDocument()
+})
+
+test('shows tail_risk when done', () => {
+  render(<ChiefAnalystCard report={mockReport} status="done" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByText(/Federal Reserve rate hike/i)).toBeInTheDocument()
+})
+
+test('shows download button when done', () => {
+  render(<ChiefAnalystCard report={mockReport} status="done" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByRole('button', { name: /download/i })).toBeInTheDocument()
+})
+
+test('shows report-unavailable fallback when done but report is null', () => {
+  render(<ChiefAnalystCard report={null} status="done" ticker="AAPL" date="2024-01-15" />)
+  expect(screen.getByText(/report unavailable/i)).toBeInTheDocument()
+})
--- a/ui/features/run-detail/components/ChiefAnalystCard.tsx
+++ b/ui/features/run-detail/components/ChiefAnalystCard.tsx
@ -0,0 +1,224 @@
+'use client'
+import { useState } from 'react'
+import { usePDF } from 'react-to-pdf'
+import type { ChiefAnalystReport } from '@/lib/types/agents'
+import type { StepStatus } from '@/lib/types/agents'
+
+type Props = {
+  report: ChiefAnalystReport | null
+  status: StepStatus
+  ticker: string
+  date: string
+}
+
+const VERDICT_COLOR: Record<string, string> = {
+  BUY:  'var(--buy)',
+  SELL: 'var(--sell)',
+  HOLD: 'var(--hold)',
+}
+
+export default function ChiefAnalystCard({ report, status, ticker, date }: Props) {
+  const [pdfError, setPdfError] = useState(false)
+  const { toPDF, targetRef } = usePDF({ filename: `${ticker}-${date}-chief-analyst-report.pdf` })
+
+  const handleDownload = () => {
+    setPdfError(false)
+    try { toPDF() } catch { setPdfError(true) }
+  }
+
+  return (
+    <div
+      data-testid="chief-analyst-card"
+      style={{
+        background: 'var(--bg-card)',
+        border: '1px solid var(--border)',
+        borderRadius: '14px',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-6 py-4"
+        style={{ borderBottom: '1px solid var(--border)' }}
+      >
+        <div
+          style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: '10px',
+            fontWeight: 700,
+            letterSpacing: '0.12em',
+            color: 'var(--accent)',
+            textTransform: 'uppercase',
+            opacity: 0.8,
+          }}
+        >
+          Chief Analyst — Executive Summary
+        </div>
+
+        {status === 'done' && report && (
+          <div className="flex items-center gap-3">
+            {pdfError && (
+              <span style={{ fontSize: '11px', color: 'var(--error)', fontFamily: 'var(--font-mono)' }}>
+                PDF failed — try again
+              </span>
+            )}
+            <button
+              onClick={handleDownload}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all duration-150"
+              style={{
+                background: 'var(--accent-glow)',
+                color: 'var(--accent)',
+                border: '1px solid var(--accent-dim)',
+                fontFamily: 'var(--font-mono)',
+                letterSpacing: '0.06em',
+                cursor: 'pointer',
+              }}
+            >
+              ↓ Download PDF
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Body */}
+      {status === 'pending' && (
+        <div
+          className="px-6 py-8 flex items-center gap-3"
+          style={{ color: 'var(--text-low)', fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.04em' }}
+        >
+          <div
+            className="w-1.5 h-1.5 rounded-full"
+            style={{ background: 'var(--text-faint)' }}
+          />
+          Chief Analyst is standing by…
+        </div>
+      )}
+
+      {status === 'running' && (
+        <div className="px-6 py-6 space-y-3">
+          {[40, 70, 55, 80].map((w, i) => (
+            <div
+              key={i}
+              className="h-3 rounded-full"
+              style={{
+                width: `${w}%`,
+                background: 'var(--bg-elevated)',
+                animation: 'shimmer 1.2s ease-in-out infinite',
+                animationDelay: `${i * 0.15}s`,
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {status === 'done' && !report && (
+        <div
+          className="px-6 py-8"
+          style={{ color: 'var(--text-low)', fontFamily: 'var(--font-mono)', fontSize: '12px' }}
+        >
+          Report unavailable for this run.
+        </div>
+      )}
+
+      {status === 'done' && report && (
+        <div ref={targetRef} className="px-6 py-5 space-y-5">
+          {/* Top row: Verdict + Catalyst */}
+          <div className="grid grid-cols-[auto,1fr] gap-6 items-start">
+            {/* Verdict badge */}
+            <div className="flex flex-col items-center gap-1.5">
+              <div
+                style={{
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: '9px',
+                  letterSpacing: '0.1em',
+                  color: 'var(--text-low)',
+                  textTransform: 'uppercase',
+                }}
+              >
+                Verdict
+              </div>
+              <div
+                className="px-5 py-2 rounded-xl font-bold"
+                style={{
+                  fontFamily: 'var(--font-syne)',
+                  fontSize: '24px',
+                  letterSpacing: '-0.02em',
+                  color: VERDICT_COLOR[report.verdict] ?? 'var(--text-high)',
+                  border: `2px solid ${VERDICT_COLOR[report.verdict] ?? 'var(--border)'}`,
+                  background: 'var(--bg-elevated)',
+                  boxShadow: `0 0 20px ${VERDICT_COLOR[report.verdict] ?? 'transparent'}20`,
+                }}
+              >
+                {report.verdict}
+              </div>
+            </div>
+
+            {/* Catalyst */}
+            <div>
+              <div
+                style={{
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: '9px',
+                  letterSpacing: '0.1em',
+                  color: 'var(--text-low)',
+                  textTransform: 'uppercase',
+                  marginBottom: '6px',
+                }}
+              >
+                Catalyst
+              </div>
+              <p style={{ fontFamily: 'var(--font-manrope)', fontSize: '13px', color: 'var(--text-high)', lineHeight: 1.6 }}>
+                {report.catalyst}
+              </p>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div style={{ height: '1px', background: 'var(--border)' }} />
+
+          {/* Execution */}
+          <div>
+            <div
+              style={{
+                fontFamily: 'var(--font-mono)',
+                fontSize: '9px',
+                letterSpacing: '0.1em',
+                color: 'var(--text-low)',
+                textTransform: 'uppercase',
+                marginBottom: '6px',
+              }}
+            >
+              Execution
+            </div>
+            <p style={{ fontFamily: 'var(--font-manrope)', fontSize: '13px', color: 'var(--text-mid)', lineHeight: 1.6 }}>
+              {report.execution}
+            </p>
+          </div>
+
+          {/* Divider */}
+          <div style={{ height: '1px', background: 'var(--border)' }} />
+
+          {/* Tail Risk */}
+          <div>
+            <div
+              style={{
+                fontFamily: 'var(--font-mono)',
+                fontSize: '9px',
+                letterSpacing: '0.1em',
+                color: 'var(--sell)',
+                opacity: 0.8,
+                textTransform: 'uppercase',
+                marginBottom: '6px',
+              }}
+            >
+              Tail Risk
+            </div>
+            <p style={{ fontFamily: 'var(--font-manrope)', fontSize: '13px', color: 'var(--text-mid)', lineHeight: 1.6 }}>
+              {report.tail_risk}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@ -11,7 +11,8 @@
        "lightningcss": "^1.32.0",
        "next": "16.2.1",
        "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "react-to-pdf": "^1.0.1"
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4",
@ -27,6 +28,7 @@
        "jest-environment-jsdom": "^30.3.0",
        "tailwindcss": "^4",
        "ts-jest": "^29.4.6",
+        "ts-node": "^10.9.2",
        "typescript": "^5"
      }
    },
@ -516,7 +518,6 @@
      "version": "7.29.2",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@ -577,6 +578,30 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
    "node_modules/@csstools/color-helpers": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
@ -2670,6 +2695,34 @@
        "@testing-library/dom": ">=7.21.4"
      }
    },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.12.tgz",
+      "integrity": "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@tybys/wasm-util": {
      "version": "0.10.1",
      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@ -2804,6 +2857,13 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/react": {
      "version": "19.2.14",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@ -3449,6 +3509,19 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
+      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/agent-base": {
      "version": "7.1.4",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@ -3532,6 +3605,13 @@
        "node": ">= 8"
      }
    },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -3726,6 +3806,18 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
    "node_modules/available-typed-arrays": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@ -3868,6 +3960,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.10",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.10.tgz",
@ -3961,6 +4062,18 @@
        "node-int64": "^0.4.0"
      }
    },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/buffer-from": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@ -4058,6 +4171,26 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -4234,6 +4367,25 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@ -4249,6 +4401,15 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/css.escape": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@ -4475,6 +4636,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/diff": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
+      "integrity": "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
    "node_modules/doctrine": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@ -4496,6 +4667,13 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/dompurify": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.9.tgz",
+      "integrity": "sha512-i6mvVmWN4xo9LrhCOZrDgSs9noW6nOahbrmzjRbPF36YPyj5Ue5lgok0MHDWkG7xzpWFO2OYttXdzM7rJxHvNA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@ -5357,6 +5535,12 @@
        "bser": "2.1.1"
      }
    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/file-entry-cache": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@ -5904,6 +6088,19 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/http-proxy-agent": {
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@ -7753,6 +7950,24 @@
        "node": ">=6"
      }
    },
+    "node_modules/jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@ -8832,6 +9047,13 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@ -9077,6 +9299,16 @@
      ],
      "license": "MIT"
    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "node_modules/react": {
      "version": "19.2.4",
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
@ -9105,6 +9337,20 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/react-to-pdf": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-to-pdf/-/react-to-pdf-1.0.1.tgz",
+      "integrity": "sha512-ZsIkY6Z5gg3oBhMbWfl+tYwQ12vpPuuAzvCv+MnXchO8l08tElzRkBNAXxfbQNG/EDOHgE5EvWBlvE7ypt/y9A==",
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "^1.4.1",
+        "jspdf": "^2.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/redent": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@ -9142,6 +9388,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.5.4",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@ -9248,6 +9501,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
    "node_modules/rrweb-cssom": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
@ -9666,6 +9929,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
    "node_modules/stop-iteration-iterator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@ -10012,6 +10285,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@ -10093,6 +10376,15 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@ -10299,6 +10591,50 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/tsconfig-paths": {
      "version": "3.15.0",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@ -10599,6 +10935,22 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/v8-to-istanbul": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
@ -11033,6 +11385,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/ui/package.json
+++ b/ui/package.json
@ -12,7 +12,8 @@
    "lightningcss": "^1.32.0",
    "next": "16.2.1",
    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-to-pdf": "^1.0.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
@ -28,6 +29,7 @@
    "jest-environment-jsdom": "^30.3.0",
    "tailwindcss": "^4",
    "ts-jest": "^29.4.6",
+    "ts-node": "^10.9.2",
    "typescript": "^5"
  }
 }