fix: html report collapse for repeated requests

[pooja-bruno]

Description

Fixes repeated requests in the HTML report all expanding/collapsing together. The collapse item name and v-for key were identical for retries of the same request, causing Naive UI to treat them as one item. Added a unique index to each entry

JIRA

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Before

Screen.Recording.2026-02-16.at.12.53.03.PM.mov

After

Screen.Recording.2026-02-16.at.1.00.55.PM.mov

Summary by CodeRabbit

Release Notes

• Improvements
  • Enhanced HTML test report generation with improved result identification and indexing, making individual test results more distinguishable and easier to reference in generated reports.

[coderabbitai]

Walkthrough

Updates the x-result Vue component in the HTML report template to track result indices. The component now receives an index prop, uses it for keying in v-for loops, and incorporates it into the computed result title.

Changes

Cohort / File(s)	Summary
x-result Component Enhancement packages/bruno-common/src/runner/reports/html/template.ts	Added index prop to x-result component; updated v-for binding to pass index and use it as key instead of results.length; extended component props declaration and computed resultTitle to include index value.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

size/M

Suggested reviewers

• helloanoop
• lohit-bruno
• naman-bruno
• bijin-bruno

Poem

Each result now knows its place in line, ✨
An index added, no longer undefined,
The v-for spins with numbered grace,
Your test results found their destined space. 🎯

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (6 files): ⚔️ packages/bruno-app/src/utils/codemirror/autocomplete.js (content) ⚔️ packages/bruno-app/src/utils/codemirror/autocomplete.spec.js (content) ⚔️ packages/bruno-common/src/runner/reports/html/template.ts (content) ⚔️ packages/bruno-converters/tests/bruno/bruno-to-postman-translations/request.test.js (content) ⚔️ packages/bruno-js/src/bruno-request.js (content) ⚔️ packages/bruno-js/src/sandbox/quickjs/shims/bruno-request.js (content) These conflicts must be resolved before merging into main.	Resolve conflicts locally and push changes to this branch.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fix—resolving the collapse behavior issue for repeated requests in HTML reports by adding unique indices.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/bruno-common/src/runner/reports/html/template.ts (1)

763-763: Consider a cleaner separator in resultTitle to avoid ambiguity.

The computed name concatenates path, status, statusText, and index with spaces. If path or statusText themselves contain spaces, parsing the name visually (e.g., during debugging) becomes harder. A delimiter like :: or __ would make each segment unambiguous. Minor nit — functionality is correct.

Optional refinement

-          const resultTitle = computed(() => props?.result?.path + ' ' + props?.result?.response?.status + ' ' + props?.result?.response?.statusText + ' ' + props?.index);
+          const resultTitle = computed(() => `${props?.result?.path}::${props?.result?.response?.status}::${props?.result?.response?.statusText}::${props?.index}`);