fix: remove gauge active state and page-level analysis from plugin (#177) by let-sunny · Pull Request #178 · let-sunny/canicode

let-sunny · 2026-03-29T12:30:11Z

Summary

Remove unnecessary active class from gauge items — gauges are category score summaries, not tab navigation
Remove page-level analysis from Figma plugin — only node selection (frame/section) is supported per Analysis Scope Policy

Changes

render.ts — remove active class from first gauge item, remove gauge active toggle in interactions
styles.css — remove .rpt-gauge-item.active style
main.ts — remove analyze-page message handler
ui.template.html — remove "Analyze Page" button, analyzePage() function, related disabled toggles

Test plan

pnpm lint — pass
pnpm test:run — 646 tests pass
pnpm build — CLI/MCP build pass
pnpm build:plugin — Figma plugin build pass
pnpm build:web — Web app build pass
Visual check: all gauge items render identically (no active highlight)

Closes #177

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

Refactor
- Removed "Analyze Page" functionality; "Analyze Selection" is now the only available analysis option.
- Removed active state visual styling from gauge indicators in reports.

) - Remove active class from gauge items (render.ts, styles.css, interaction logic) - Remove page-level analysis from Figma plugin (main.ts handler, UI button, related JS) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

coderabbitai · 2026-03-29T12:30:16Z

📝 Walkthrough

Walkthrough

The pull request removes page-level analysis capability from the Figma plugin and eliminates the unnecessary "active" visual state from report gauge items. Page analysis message handling, UI button, and associated styling/logic are deleted; only node selection analysis remains.

Changes

Cohort / File(s)	Summary
Figma Plugin Analysis Removal `app/figma-plugin/src/main.ts`, `app/figma-plugin/src/ui.template.html`	Removed `analyze-page` message handler and corresponding UI button, eliminating page-level analysis workflow and associated validation/transformation logic.
Gauge Active State Styling `app/shared/styles.css`, `src/core/report-html/render.ts`	Deleted `.rpt-gauge-item.active` CSS rule and removed index-based active class assignment from gauge rendering; removed active class toggle logic from interaction handlers.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

refactor: unify report UI — self-contained CSS + plugin rendering (#164) #165: Touches Figma plugin UI and message handling in app/figma-plugin/src/ui.template.html and main.ts, modifying analyze functionality and plugin communication.
feat: structured violation messages + tab/rule-group report UI (#155) #167: Directly addresses gauge active class removal and report interaction styling, overlapping with active state changes in this PR.

Poem

🐰 A rabbit hops with glee,
Page analysis gone, selection stays free,
Gauge items shed their "active" cloak,
Equal states, a cleaner stroke!
🌟

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: removing gauge active state styling and page-level analysis from the Figma plugin, matching the core objectives.
Linked Issues check	✅ Passed	All coding requirements from issue `#177` are met: active class removed from gauges, active styling deleted, toggle logic removed, and page-level analysis eliminated from the plugin.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue `#177` objectives; no unrelated or out-of-scope modifications are present.

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

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/177-gauge-active-and-page-analysis

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

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/figma-plugin/src/ui.template.html`:
- Line 28: Update the empty-state paragraph copy that currently reads "Select a
frame, component, or section in Figma, then click Analyze Selection" to reflect
the accepted scope (frame/section only); locate the paragraph element containing
that text in ui.template.html and remove the word "component" so it reads
something like "Select a frame or section in Figma, then click Analyze
Selection" to avoid misleading users.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6cc37867-9ebf-46d7-9735-ab8617b82a74

📥 Commits

Reviewing files that changed from the base of the PR and between 6cb2b5b and 502d59e.

📒 Files selected for processing (4)

app/figma-plugin/src/main.ts
app/figma-plugin/src/ui.template.html
app/shared/styles.css
src/core/report-html/render.ts

💤 Files with no reviewable changes (2)

app/shared/styles.css
app/figma-plugin/src/main.ts

coderabbitai · 2026-03-29T12:34:24Z

app/figma-plugin/src/ui.template.html

      <h2>Ready to analyze</h2>
-      <p>Select a frame, component, or section in Figma, then click <strong>Analyze Selection</strong>.<br>
-      Or click <strong>Analyze Page</strong> to check the entire current page.</p>
+      <p>Select a frame, component, or section in Figma, then click <strong>Analyze Selection</strong>.</p>


⚠️ Potential issue | 🟡 Minor

Align empty-state copy with supported analysis scope

Line 28 still mentions component, but the accepted scope in this PR is frame/section selection only. Please tighten the copy to avoid misleading users.

Suggested patch

- Select a frame, component, or section in Figma, then click Analyze Selection. + Select a frame or section in Figma, then click Analyze Selection.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

Select a frame, component, or section in Figma, then click Analyze Selection.

Select a frame or section in Figma, then click Analyze Selection.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@app/figma-plugin/src/ui.template.html` at line 28, Update the empty-state paragraph copy that currently reads "Select a frame, component, or section in Figma, then click Analyze Selection" to reflect the accepted scope (frame/section only); locate the paragraph element containing that text in ui.template.html and remove the word "component" so it reads something like "Select a frame or section in Figma, then click Analyze Selection" to avoid misleading users.

The analyze-selection handler still works on any selected node including components — components are valid analysis targets. This PR removes page-level analysis, not component selection. Keeping 'component' in the copy is accurate.

@let-sunny, you're right — my suggestion was incorrect. Since analyze-selection operates on any user-selected node (frames, components, sections, etc.) and this PR only removes page-level analysis, keeping "component" in the copy is accurate and appropriate. Sorry for the noise!

🧠 Learnings used

Learnt from: let-sunny Repo: let-sunny/canicode PR: 154 File: src/core/rules/structure/index.ts:296-304 Timestamp: 2026-03-29T00:24:13.455Z Learning: In let-sunny/canicode, the `non-layout-container` rule in `src/core/rules/structure/index.ts` intentionally flags non-empty `SECTION` nodes (`children.length > 0`) because Figma `SECTION` is not a layout container by design — using it structurally with children is treated as semantic misuse. This predicate is considered sufficient and intentional; do not flag it as too broad.

let-sunny marked this pull request as ready for review March 29, 2026 12:31

coderabbitai bot reviewed Mar 29, 2026

View reviewed changes

let-sunny merged commit 8fcf3de into main Mar 29, 2026
3 checks passed

let-sunny deleted the fix/177-gauge-active-and-page-analysis branch March 29, 2026 12:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: remove gauge active state and page-level analysis from plugin (#177)#178

fix: remove gauge active state and page-level analysis from plugin (#177)#178
let-sunny merged 1 commit intomainfrom
fix/177-gauge-active-and-page-analysis

let-sunny commented Mar 29, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 29, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Mar 29, 2026 •

edited

Loading

Uh oh!

let-sunny Mar 29, 2026

Uh oh!

coderabbitai bot Mar 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<p>Select a frame, component, or section in Figma, then click <strong>Analyze Selection</strong>.</p>
	<p>Select a frame or section in Figma, then click <strong>Analyze Selection</strong>.</p>

Conversation

let-sunny commented Mar 29, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

let-sunny Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

let-sunny commented Mar 29, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 29, 2026 •

edited

Loading

coderabbitai bot Mar 29, 2026 •

edited

Loading