docs: add popup update panel design spec

docs/superpowers/specs/2026-05-25-popup-update-panel-design.md

@@ -0,0 +1,100 @@
+# Popup Update Panel Design
+
+## Goal
+
+Redesign the extension popup so it feels like a compact internal tool instead of a stretched document. The new popup should prioritize readability, clear grouping, and obvious update actions while keeping the interaction model unchanged.
+
+## Confirmed Direction
+
+- Visual style: enterprise tool
+- Primary problem to solve: information feels crowded and hard to read
+- Layout freedom: use whatever structure best improves clarity
+
+## Scope
+
+This change only redesigns the popup presentation layer:
+
+- improve popup layout
+- improve spacing and typography
+- improve button hierarchy
+- improve update-status presentation
+
+This change does not alter:
+
+- auth flow
+- update-check logic
+- download behavior
+- background message behavior
+
+## Layout
+
+Use a grouped card layout instead of one long text column.
+
+Recommended structure:
+
+1. Header
+   - compact product title on one line
+2. Account card
+   - login state
+   - current user name
+3. Update card
+   - current version
+   - latest version or current status
+   - release notes
+   - primary and secondary action buttons
+   - short follow-up instruction text
+4. Footer action
+   - low-emphasis sign-out button
+
+## Visual Rules
+
+- Increase popup width to a more usable fixed tool width.
+- Use a soft neutral page background with white content cards.
+- Reduce title size significantly from the current oversized stacked text.
+- Use a clear type scale:
+  - product title: medium emphasis
+  - section title: medium emphasis
+  - status/version rows: normal emphasis
+  - helper text: smaller and lighter
+- Keep the palette restrained and neutral.
+- Make `下载更新包` the primary button.
+- Make `下载使用说明` a secondary button.
+- Make `退出登录` a tertiary or low-emphasis button.
+
+## Update State Presentation
+
+- `checking`: show a compact in-progress line inside the update card.
+- `latest`: show a simple success-style status without action buttons.
+- `available`: show a clear “发现新版本” status block with versions and actions.
+- `error`: show a readable warning block instead of generic broken-looking text flow.
+
+## Content Rules
+
+- Keep product name to one visual line or two short lines max.
+- Avoid large paragraphs in the popup.
+- Release notes should stay as a compact bullet list.
+- The post-download instruction should be one concise sentence.
+- Version labels should align consistently so the user can compare current/latest quickly.
+
+## Implementation Notes
+
+- Keep the existing popup DOM entrypoints and rendering flow.
+- Focus changes in `src/popup/view.ts` first.
+- Only adjust popup controller code if needed to support cleaner status rendering.
+- Prefer CSS embedded in the popup HTML/view flow only as needed; do not expand scope into unrelated refactors.
+
+## Testing
+
+Add or update popup rendering tests for:
+
+- logged-in layout still renders correctly
+- available update state still shows current/latest versions
+- update action buttons still exist
+- latest/error states still render expected text
+
+## Out of Scope
+
+- new popup features
+- star chart page banners
+- animation-heavy UI
+- branding-heavy marketing visuals