PDF Report Styling

[ngoiyaeric]

Can you write code to improve the quality of the pdf report and the redundancy. It needs to look like a fortune 500 report. The text is very low quality and the formatting is also incorrect. [

](url)

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Prioritize fixing blurry text as the critical first step by increasing html2canvas scale from 1x to 2x (or 3x if needed) and switching from lossy JPEG to lossless PNG format
• Expand the off-screen portal container width to provide adequate space for professional layout rendering
• Comprehensively redesign the report template to meet Fortune 500 standards: refined typography hierarchy, restrained corporate color palette, generous whitespace, and subtle visual accents
• Conduct a thorough content deduplication audit to eliminate redundant message displays and ensure the report reads as a polished, non-repetitive document

Design Choices

Design Choice 1: Root cause of low text quality

Options Considered:

1. Increase html2canvas scale to 2-3x and switch to PNG format for lossless text rendering
2. Switch to a different PDF generation approach (e.g., server-side Puppeteer or @react-pdf/renderer)

Chosen Option: 1

Rationale: Increasing scale and using PNG maintains the existing architecture while directly addressing the quality issues with minimal code changes.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Critical Text Quality Fix

Address the primary user complaint—blurry, low-definition text—by overhauling the rendering pipeline settings. This is the highest-impact change and directly resolves the core quality issue.

Task 1: Increase Rendering Resolution and Switch to Lossless Format

Fix the blurry text by significantly increasing pixel density and eliminating lossy compression. This is the most critical change for achieving professional output quality.

• Update lib/utils/report-generator.ts to change scale from 1 to 2 for higher pixel density capture (if text quality is still insufficient after testing, increase to scale: 3 as a fallback)
• Change image encoding from canvas.toDataURL('image/jpeg', 0.6) to canvas.toDataURL('image/png') for lossless text rendering—this eliminates compression artifacts that blur text edges
• Adjust the addImage call to use 'PNG' format instead of 'JPEG'
• Test output quality and increase to scale 3x if 2x does not meet the Fortune 500 clarity standard

Task 2: Adjust Portal Container Width

Ensure the off-screen render container provides adequate width for professional layout scaling.

• Update components/download-report-button.tsx to increase portal container width from 800px to 900px or 1000px
• This wider canvas gives the template more room for professional spacing and margins before capture

🤖 Prompt for AI agents

This phase fixes the blurry text rendering issue—the highest-priority change—by
overhauling the html2canvas and jsPDF pipeline settings, and widening the
off-screen render container.

**File: `lib/utils/report-generator.ts`**
- Change the `scale` option passed to html2canvas from `1` to `2` to capture at
higher pixel density; note that scale `3` should be used as a fallback if 2x
does not meet the required clarity standard after testing
- Update the image encoding call from `canvas.toDataURL('image/jpeg', 0.6)` to
`canvas.toDataURL('image/png')` for lossless rendering, eliminating compression
artifacts that blur text edges
- Update the `addImage` call to use `'PNG'` as the format argument instead of
`'JPEG'`

**File: `components/download-report-button.tsx`**
- Increase the portal container's inline width style from `800px` to `900px` or
`1000px` to provide more layout room before capture

Phase 2: Professional Report Template Redesign

Transform the report template into a clean, corporate-quality document with improved typography, spacing, and visual hierarchy befitting a Fortune 500 standard.

Task 1: Enhance Header and Branding Section

Create a professional document header that establishes credibility and context.

• Update components/report-template.tsx header section with stronger typography (larger title, refined subtitle styling)
• Add generation timestamp in a more refined format (e.g., "Generated on [formatted date]")
• Use a subtle bottom border or divider line instead of the heavy border-b-2 style
• Consider adding a "Conversation Report" document type label above the chat title

Task 2: Improve Section Typography and Spacing

Establish clear visual hierarchy with professional typography and generous whitespace.

• Replace colorful left-border accents (blue, orange, purple) with more subtle styling using neutral grays or thin accent lines
• Increase section spacing with consistent margin/padding patterns
• Use larger, bolder section headings with proper hierarchical sizing (h2, h3 levels)
• Apply consistent paragraph and block spacing throughout

Task 3: Refine Message Block Styling

Make conversation blocks look clean and scannable while maintaining clear user/AI distinction.

• Redesign "User Question" blocks with subtle background (bg-gray-50 or lighter) and minimal borders
• Style "AI Response" blocks with clean typography, removing heavy visual containers
• Simplify "Analysis Result" sections by using lighter purple tints or neutral backgrounds
• Ensure images in analysis results have proper aspect ratios and subtle borders/shadows

Task 4: Improve Table and Appendix Styling

Make the drawn features appendix table look polished and easy to read.

• Apply professional table styling with proper header emphasis and alternating row colors or subtle dividers
• Improve geometry text display with better truncation and monospace formatting
• Add appropriate spacing around the appendix section

Task 5: Enhance Footer Design

Create a refined footer that completes the professional appearance.

• Style footer with subtle top border and appropriate spacing from content
• Use refined typography for copyright/attribution text
• Ensure footer styling is consistent with the header design language

🤖 Prompt for AI agents

This phase redesigns `components/report-template.tsx` to achieve a professional,
Fortune 500-quality appearance through improved typography, spacing, color
palette, and visual hierarchy.

**Header & Branding (`report-template.tsx` — header section)**
- Strengthen typography with a larger title and refined subtitle styling
- Add a "Conversation Report" document type label above the chat title
- Format the generation timestamp as "Generated on [formatted date]"
- Replace the heavy `border-b-2` divider with a subtle, thin bottom border line

**Section Typography & Spacing**
- Replace all colorful left-border accents (blue, orange, purple) with neutral
gray or thin subtle accent lines
- Increase margin/padding between sections for consistent, generous whitespace
- Apply proper hierarchical heading sizes (h2, h3) with larger, bolder styling
- Ensure consistent paragraph and block spacing throughout

**Message Block Styling**
- Redesign "User Question" blocks: use `bg-gray-50` or lighter background with
minimal borders
- Restyle "AI Response" blocks with clean typography, removing heavy visual
containers
- Simplify "Analysis Result" sections: use lighter purple tints or neutral
backgrounds
- Ensure analysis result images have proper aspect ratios and subtle
borders/shadows

**Table & Appendix Styling**
- Apply professional table styles: emphasized headers, alternating row colors or
subtle row dividers
- Improve geometry text with better truncation and monospace formatting
- Add appropriate spacing around the appendix section

**Footer**
- Add a subtle top border and appropriate spacing from content
- Use refined typography for copyright/attribution text
- Keep footer styling consistent with the header's design language

Phase 3: Content Deduplication Audit

Systematically identify and eliminate redundant content that makes the report feel unprofessional or cluttered.

Audit and Fix Message Rendering Redundancy

Review the message filtering and rendering logic to ensure each piece of information appears exactly once in the report.

• Examine the message type filtering in report-template.tsx to verify input and input_related types don't produce duplicate question displays for the same user query
• Trace the data flow from aiState.messages to confirm resolution search results aren't being rendered multiple times (once as a response, once as analysis)
• Check if the chat title from the first message appears redundantly in both the header and as the first message block
• Add deduplication logic if needed—for example, skip rendering the first input message if its content matches the chatTitle prop
• Validate changes by generating a test PDF and confirming no content appears twice

🤖 Prompt for AI agents

This phase audits and fixes content redundancy in
`components/report-template.tsx` to ensure each piece of information appears
exactly once in the generated PDF report.

- Examine the message type filtering logic to verify that `input` and
`input_related` message types do not produce duplicate question displays for the
same user query
- Trace the data flow from `aiState.messages` to confirm resolution search
results are not rendered multiple times (e.g., once as a response and once as an
analysis block)
- Check whether the chat title from the first message appears redundantly in
both the header and as the first message block body
- Add deduplication logic where needed—for example, skip rendering the first
`input` message if its content matches the `chatTitle` prop
- Validate changes by generating a test PDF and confirming no content appears
more than once

Research

The PDF generation system uses a client-side approach with three key components: report-template.tsx (React component with Tailwind styling), report-generator.ts (html2canvas + jsPDF utility), and download-report-button.tsx (orchestration logic). Currently, html2canvas renders at scale=1 with JPEG compression at 60% quality, causing blurry text. The template uses basic Tailwind styling with colorful border accents that don't convey a professional corporate aesthetic.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase fixes the blurry text rendering issue—the highest-priority change—by
overhauling the html2canvas and jsPDF pipeline settings, and widening the
off-screen render container.

**File: `lib/utils/report-generator.ts`**
- Change the `scale` option passed to html2canvas from `1` to `2` to capture at
higher pixel density; note that scale `3` should be used as a fallback if 2x
does not meet the required clarity standard after testing
- Update the image encoding call from `canvas.toDataURL('image/jpeg', 0.6)` to
`canvas.toDataURL('image/png')` for lossless rendering, eliminating compression
artifacts that blur text edges
- Update the `addImage` call to use `'PNG'` as the format argument instead of
`'JPEG'`

**File: `components/download-report-button.tsx`**
- Increase the portal container's inline width style from `800px` to `900px` or
`1000px` to provide more layout room before capture
===============================================================================

Task: 2

This phase redesigns `components/report-template.tsx` to achieve a professional,
Fortune 500-quality appearance through improved typography, spacing, color
palette, and visual hierarchy.

**Header & Branding (`report-template.tsx` — header section)**
- Strengthen typography with a larger title and refined subtitle styling
- Add a "Conversation Report" document type label above the chat title
- Format the generation timestamp as "Generated on [formatted date]"
- Replace the heavy `border-b-2` divider with a subtle, thin bottom border line

**Section Typography & Spacing**
- Replace all colorful left-border accents (blue, orange, purple) with neutral
gray or thin subtle accent lines
- Increase margin/padding between sections for consistent, generous whitespace
- Apply proper hierarchical heading sizes (h2, h3) with larger, bolder styling
- Ensure consistent paragraph and block spacing throughout

**Message Block Styling**
- Redesign "User Question" blocks: use `bg-gray-50` or lighter background with
minimal borders
- Restyle "AI Response" blocks with clean typography, removing heavy visual
containers
- Simplify "Analysis Result" sections: use lighter purple tints or neutral
backgrounds
- Ensure analysis result images have proper aspect ratios and subtle
borders/shadows

**Table & Appendix Styling**
- Apply professional table styles: emphasized headers, alternating row colors or
subtle row dividers
- Improve geometry text with better truncation and monospace formatting
- Add appropriate spacing around the appendix section

**Footer**
- Add a subtle top border and appropriate spacing from content
- Use refined typography for copyright/attribution text
- Keep footer styling consistent with the header's design language
===============================================================================

Task: 3

This phase audits and fixes content redundancy in
`components/report-template.tsx` to ensure each piece of information appears
exactly once in the generated PDF report.

- Examine the message type filtering logic to verify that `input` and
`input_related` message types do not produce duplicate question displays for the
same user query
- Trace the data flow from `aiState.messages` to confirm resolution search
results are not rendered multiple times (e.g., once as a response and once as an
analysis block)
- Check whether the chat title from the first message appears redundantly in
both the header and as the first message block body
- Add deduplication logic where needed—for example, skip rendering the first
`input` message if its content matches the `chatTitle` prop
- Validate changes by generating a test PDF and confirming no content appears
more than once

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[ngoiyaeric]

@coderabbitai plan the text on the report seems very low definition.

[coderabbitai]

I've updated the plan above based on your feedback. Ready to proceed when you are!