Report Styling

[ngoiyaeric]

The first prompt should be the title of the report, This should be generated with a model contextual to all the prompts.
The resolution search feature response is added twice in the report. This is redundant.
The resolution search map and drawings should be visible together on the attached image on the report.
The resolution search image should be at the center.
The text in the report is low resolution, it should be clear text.
The text is cutting through page separation incorrectly and losing context.
Use the model to improve the output of the report instead of printing it.

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Introduce AI-powered content generation using the existing getModel() pattern to create contextual titles and executive summaries
• Fix duplicate content by improving message filtering logic to always suppress redundant response messages before resolution search results
• Capture composite map snapshots using html2canvas on the full map container rather than just the WebGL canvas
• Implement content-aware page breaking by pre-calculating section heights and inserting spacers before canvas capture

Design Choices

Design Choice 1: Approach for AI-Enhanced Report Content

Options Considered:

1. Generate a single AI-synthesized executive summary that replaces individual response messages
2. Keep individual messages but have the AI refine/improve each one before rendering
3. Add an AI-generated executive summary section while keeping original messages as an appendix

Chosen Option: 3

Rationale: This preserves original content for reference while adding AI-enhanced summary, providing both improved readability and complete context.

Design Choice 2: Page Break Implementation Strategy

Options Considered:

1. Pre-process DOM to insert spacer divs at calculated page boundaries before canvas capture
2. Switch to browser-native print CSS with @media print rules (requires different generation approach)
3. Use a headless browser library (Puppeteer) for true CSS page break support

Chosen Option: 1

Rationale: Pre-processing with spacers works within the existing html2canvas pipeline, avoids major architectural changes, and can be implemented by measuring section heights and inserting breaks.

💡 User Tips

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

Implementation Steps

Phase 1: AI-Powered Content Generation

This phase introduces model-based intelligence to the report generation pipeline, replacing static string truncation with contextual AI-generated titles, adding an executive summary section, and fixing the duplicate content bug.

Task 1: Create Report Title Generation Action

Implement a server action that generates a contextual report title using the AI model based on all conversation messages.

• Create new server action in lib/actions/ following the writer.tsx pattern with generateText (not streaming)
• System prompt should instruct the model to analyze all user queries and AI responses, then produce a concise 5-10 word title capturing the primary intelligence objective
• Accept CoreMessage[] or AIMessage[] as input, return a string title
• Include fallback to truncated first message if model call fails

Task 2: Create Executive Summary Generation Action

Implement a server action that synthesizes all conversation content into a polished executive summary for the report.

• Create server action in lib/actions/ using getModel() and generateText
• System prompt should instruct model to synthesize all response-type messages into a cohesive 2-3 paragraph executive briefing, maintaining factual accuracy while improving readability
• Filter input messages to only include response and resolution_search_result types
• Return structured markdown content suitable for rendering in the report

Task 3: Integrate AI Generation into Report Download Flow

Connect the new AI generation actions to the report download button and update the template to display generated content.

• Update components/download-report-button.tsx to call the title generation action before rendering the template
• Call the executive summary action and pass the result as a new prop to ReportTemplate
• Handle loading states and errors gracefully with fallbacks to current behavior
• Add an "Executive Summary" section to components/report-template.tsx between the cover page and visualization section

Task 4: Fix Duplicate Resolution Search Content

Eliminate the redundant display of resolution search summaries that appear in both response and resolution_search_result messages.

• Update the message filtering logic in components/report-template.tsx to always suppress a response message that immediately precedes a resolution_search_result, regardless of character length
• Remove the 300-character threshold condition since the summary is already contained within the resolution_search_result JSON blob
• The resolution_search_result rendering already displays result.summary, making the preceding response redundant

🤖 Prompt for AI agents

This phase introduces AI-powered content generation into the report pipeline,
covering new server actions for title and executive summary generation, wiring
them into the download flow, and fixing a duplicate content bug.

**Task 1: Create Report Title Generation Action (`lib/actions/`)**
- Follow the pattern established in `lib/agents/writer.tsx`, using `getModel()`
from `lib/utils/index.ts` and `generateText` (non-streaming)
- Accept `CoreMessage[]` or `AIMessage[]` as input and return a `string` title
- Write a system prompt instructing the model to analyze all user queries and AI
responses and produce a concise 5-10 word title capturing the primary
intelligence objective
- Wrap the model call in a try/catch; on failure, fall back to a truncated
version of the first message

**Task 2: Create Executive Summary Generation Action (`lib/actions/`)**
- Follow the same `getModel()` + `generateText` pattern
- Before passing messages to the model, filter them to include only `response`
and `resolution_search_result` types
- Write a system prompt instructing the model to synthesize those messages into
a cohesive 2-3 paragraph executive briefing that maintains factual accuracy
while improving readability
- Return structured markdown content suitable for rendering in the report

**Task 3: Integrate AI Generation into Report Download Flow**
- In `components/download-report-button.tsx`, call the title generation action
and the executive summary action before rendering the template
- Pass the generated executive summary as a new prop to `ReportTemplate`
- Handle loading states and errors gracefully, falling back to current behavior
if either action fails
- In `components/report-template.tsx`, add a new "Executive Summary" section
positioned between the cover page and the existing visualization section,
rendering the markdown content passed via the new prop

**Task 4: Fix Duplicate Resolution Search Content
(`components/report-template.tsx`)**
- Update the message filtering logic to always suppress a `response` message
that immediately precedes a `resolution_search_result` message
- Remove the 300-character threshold condition — the suppression should be
unconditional, since the summary is already contained within the
`resolution_search_result` JSON blob and rendered via `result.summary`

Phase 2: Visual Layout Improvements

This phase addresses visual presentation issues including composite map snapshots that include drawing overlays, centered resolution images, and proper styling for report clarity.

Task 1: Implement Composite Map Snapshot with Drawings

Modify the map capture mechanism to include DOM overlay elements (measurement labels) alongside the WebGL canvas.

• Update components/download-report-button.tsx to use html2canvas on the entire map container element instead of map.getCanvas().toDataURL()
• The map container includes both the WebGL canvas and any DOM overlays (measurement markers created as mapboxgl.Marker elements)
• Configure html2canvas with useCORS: true and appropriate scale for quality
• Convert the resulting canvas to a data URL for passing to the template

Task 2: Center Resolution Search Images

Update the report template styling to properly center resolution search satellite images.

• Modify the resolution search result section in components/report-template.tsx to wrap images in a flex container with justify-center
• Apply consistent centering to both mapboxImage and googleImage elements
• Ensure the side-by-side layout maintains centering within the available width

🤖 Prompt for AI agents

This phase improves the visual output of the report by capturing a composite map
snapshot (including DOM overlays) and centering resolution search images.

**Task 1: Composite Map Snapshot (`components/download-report-button.tsx`)**
- Replace the current `map.getCanvas().toDataURL()` call with an `html2canvas`
capture targeting the entire map container element
- The map container holds both the WebGL canvas and any DOM overlays such as
`mapboxgl.Marker` measurement labels
- Configure the `html2canvas` call with `useCORS: true` and an appropriate
`scale` value for quality
- Convert the resulting canvas to a data URL and pass it to the template as
before

**Task 2: Center Resolution Search Images (`components/report-template.tsx`)**
- In the resolution search result section, wrap the `mapboxImage` and
`googleImage` elements in a flex container styled with `justify-center`
- Ensure the side-by-side layout remains intact while both images are centered
within the available width

Phase 3: PDF Rendering Quality

This phase improves PDF output quality by addressing text resolution issues and implementing content-aware page breaking to prevent text from being cut mid-sentence.

Task 1: Improve Text Rendering Resolution

Increase the rendering quality of text in the generated PDF to ensure clarity and readability.

• Increase the scale parameter in lib/utils/report-generator.ts from 2 to 3 or 4 for higher DPI capture
• Ensure letterRendering: true is set in html2canvas options if not already
• Verify font stacks in components/report-template.tsx use system fonts that render crisply
• Consider using explicit pixel font sizes rather than relative units for consistent rendering

Task 2: Implement Content-Aware Page Breaking

Replace blind bitmap slicing with intelligent page breaking that respects logical content boundaries.

• Before html2canvas capture in lib/utils/report-generator.ts, calculate the rendered height of each section marked with break-inside-avoid
• Compute cumulative heights and identify where sections would be split across the A4 page boundary
• Insert invisible spacer <div> elements to push at-risk sections to the next page
• Query all elements with break-inside-avoid class, measure their offsetTop and offsetHeight
• Calculate page boundaries based on A4 height at the capture scale
• Modify the onclone callback to perform these calculations and DOM insertions before capture proceeds

🤖 Prompt for AI agents

This phase improves PDF output quality in `lib/utils/report-generator.ts` and
`components/report-template.tsx` by increasing rendering resolution and adding
content-aware page breaking.

**Task 1: Improve Text Rendering Resolution (`lib/utils/report-generator.ts`,
`components/report-template.tsx`)**
- Increase the `scale` parameter in the html2canvas call from `2` to `3` or `4`
for higher DPI output
- Ensure `letterRendering: true` is present in the html2canvas options
- In `components/report-template.tsx`, verify that font stacks use system fonts
that render crisply; consider switching to explicit pixel font sizes rather than
relative units for consistent rendering

**Task 2: Content-Aware Page Breaking (`lib/utils/report-generator.ts`)**
- Inside the `onclone` callback (before capture proceeds), implement the
following logic:
- Query all elements in the cloned document that have the `break-inside-avoid`
class
  - For each such element, read its `offsetTop` and `offsetHeight`
- Calculate page boundaries based on the A4 page height at the current capture
scale
- Compute cumulative heights to identify sections that would be split across a
page boundary
- For any at-risk section, insert an invisible spacer `<div>` immediately before
it to push it onto the next page
- This approach works entirely within the existing html2canvas pipeline without
architectural changes

Research

The report system consists of three core components: download-report-button.tsx orchestrates report generation by capturing a map snapshot and assembling data from AI state; report-template.tsx renders a styled HTML document with cover page, executive visualization, intelligence assessment, and quantitative appendix sections; and report-generator.ts converts the HTML to PDF using html2canvas + jsPDF. The current title is generated via simple string truncation, and duplicate content occurs because both response and resolution_search_result messages containing the same summary can appear in the report. Model calls throughout the codebase follow the pattern in lib/agents/writer.tsx, using getModel() from lib/utils/index.ts with custom system prompts.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase introduces AI-powered content generation into the report pipeline,
covering new server actions for title and executive summary generation, wiring
them into the download flow, and fixing a duplicate content bug.

**Task 1: Create Report Title Generation Action (`lib/actions/`)**
- Follow the pattern established in `lib/agents/writer.tsx`, using `getModel()`
from `lib/utils/index.ts` and `generateText` (non-streaming)
- Accept `CoreMessage[]` or `AIMessage[]` as input and return a `string` title
- Write a system prompt instructing the model to analyze all user queries and AI
responses and produce a concise 5-10 word title capturing the primary
intelligence objective
- Wrap the model call in a try/catch; on failure, fall back to a truncated
version of the first message

**Task 2: Create Executive Summary Generation Action (`lib/actions/`)**
- Follow the same `getModel()` + `generateText` pattern
- Before passing messages to the model, filter them to include only `response`
and `resolution_search_result` types
- Write a system prompt instructing the model to synthesize those messages into
a cohesive 2-3 paragraph executive briefing that maintains factual accuracy
while improving readability
- Return structured markdown content suitable for rendering in the report

**Task 3: Integrate AI Generation into Report Download Flow**
- In `components/download-report-button.tsx`, call the title generation action
and the executive summary action before rendering the template
- Pass the generated executive summary as a new prop to `ReportTemplate`
- Handle loading states and errors gracefully, falling back to current behavior
if either action fails
- In `components/report-template.tsx`, add a new "Executive Summary" section
positioned between the cover page and the existing visualization section,
rendering the markdown content passed via the new prop

**Task 4: Fix Duplicate Resolution Search Content
(`components/report-template.tsx`)**
- Update the message filtering logic to always suppress a `response` message
that immediately precedes a `resolution_search_result` message
- Remove the 300-character threshold condition — the suppression should be
unconditional, since the summary is already contained within the
`resolution_search_result` JSON blob and rendered via `result.summary`
===============================================================================

Task: 2

This phase improves the visual output of the report by capturing a composite map
snapshot (including DOM overlays) and centering resolution search images.

**Task 1: Composite Map Snapshot (`components/download-report-button.tsx`)**
- Replace the current `map.getCanvas().toDataURL()` call with an `html2canvas`
capture targeting the entire map container element
- The map container holds both the WebGL canvas and any DOM overlays such as
`mapboxgl.Marker` measurement labels
- Configure the `html2canvas` call with `useCORS: true` and an appropriate
`scale` value for quality
- Convert the resulting canvas to a data URL and pass it to the template as
before

**Task 2: Center Resolution Search Images (`components/report-template.tsx`)**
- In the resolution search result section, wrap the `mapboxImage` and
`googleImage` elements in a flex container styled with `justify-center`
- Ensure the side-by-side layout remains intact while both images are centered
within the available width
===============================================================================

Task: 3

This phase improves PDF output quality in `lib/utils/report-generator.ts` and
`components/report-template.tsx` by increasing rendering resolution and adding
content-aware page breaking.

**Task 1: Improve Text Rendering Resolution (`lib/utils/report-generator.ts`,
`components/report-template.tsx`)**
- Increase the `scale` parameter in the html2canvas call from `2` to `3` or `4`
for higher DPI output
- Ensure `letterRendering: true` is present in the html2canvas options
- In `components/report-template.tsx`, verify that font stacks use system fonts
that render crisply; consider switching to explicit pixel font sizes rather than
relative units for consistent rendering

**Task 2: Content-Aware Page Breaking (`lib/utils/report-generator.ts`)**
- Inside the `onclone` callback (before capture proceeds), implement the
following logic:
- Query all elements in the cloned document that have the `break-inside-avoid`
class
  - For each such element, read its `offsetTop` and `offsetHeight`
- Calculate page boundaries based on the A4 page height at the current capture
scale
- Compute cumulative heights to identify sections that would be split across a
page boundary
- For any at-risk section, insert an invisible spacer `<div>` immediately before
it to push it onto the next page
- This approach works entirely within the existing html2canvas pipeline without
architectural changes

💡 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!