Status Card + updates on tab change

[yamijuan]

PR Type

Enhancement

---

Description

• Status card shows current page info

• Updates status on tab change

• Improved UI layout and styling

• Fixed port handling for sidepanel

---

Changes walkthrough 📝

	Relevant files
Formatting	argo-archive-list.ts CSS style reorganization                                                                  src/argo-archive-list.ts Moved .card-container CSS rule to improve style organization +3/-3
Enhancement	bg.ts Background script updates for sidepanel communication        src/ext/bg.ts Added global sidepanelPort variable to maintain connection Removed unused popupHandler function Added tab change detection to update sidepanel status Moved runtime message listener to improve code organization Added status update notifications to sidepanel on recorder state changes +39/-80  recorder.ts Enhanced status object with page metadata                                src/recorder.ts Added favIconUrl, pageTitle, and tabId to status object Enhanced status information for better UI display +6/-0      sidepanel.ts Status card implementation and UI enhancements                      src/sidepanel.ts Added status card component to display current page info Implemented CSS styles for status card and UI elements Added methods to render status information based on recording state Improved tab change handling and status updates Added favicon and page title display in status card +438/-111 utils.ts Utility functions for UI display                                                  src/utils.ts Added mapIntegerToRange function to convert integers to progress values Added truncateString function to limit string length for display +27/-0    sidepanel.html Simplified HTML structure with component-based approach    static/sidepanel.html Simplified HTML structure by moving UI components to sidepanel.ts Changed layout to use full viewport height Removed inline styles in favor of component-based styling +7/-67

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[pr-agent-monadical]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Port Management The sidepanelPort is stored as a global variable and used to send updates on tab changes, but there's no cleanup when the port disconnects. This could lead to errors when trying to send messages to a closed port. // @ts-expect-error - TS7034 - Variable 'sidepanelPort' implicitly has type 'any' in some locations where its type cannot be determined. let sidepanelPort = null; Return Value The onMessage listener now returns true to indicate it will respond asynchronously, but the implementation doesn't actually use sendResponse. This could lead to unexpected behavior. return true; }, Missing Initialization The favIconUrl property is added but not initialized in the constructor, which could lead to undefined behavior when the status card is first rendered. this.favIconUrl = "";

[pr-agent-monadical]

Suggestion: The error comment about err variable is misplaced. It should be on the line where err is declared, not on the if (sidepanelPort) check. [general, importance: 7]

Suggested change

	let err = null;
	// @ts-expect-error - TS7034 - Variable 'err' implicitly has type 'any' in some locations where its type cannot be determined.
	if (sidepanelPort) {
	sidepanelPort.postMessage({ type: "update" });
	}
	const { waitForTabUpdate } = opts;
	// @ts-expect-error - TS7034 - Variable 'err' implicitly has type 'any' in some locations where its type cannot be determined.
	let err = null;
	if (sidepanelPort) {
	sidepanelPort.postMessage({ type: "update" });
	}
	const { waitForTabUpdate } = opts;