star-chart-search-enhancer/docs/superpowers/plans/2026-04-23-market-native-action-bar.md

Market Native Action Bar Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Move the plugin export actions into Xingtu's native market action row and remove the old top toolbar and unused filter/sort controls.

Architecture: Keep the existing export and batch-submit business logic, but replace the toolbar mount point and DOM shape. The new toolbar becomes a small inline action bar inserted into the native button row beside 自定义指标 and 导出, while the controller only depends on export-range and action buttons.

Tech Stack: TypeScript, Chrome MV3 content script, jsdom/Vitest

---

File Map

• Modify: src/content/market/plugin-toolbar.ts
  • Replace the top toolbar with an inline native-style action bar.
• Modify: src/content/market/index.ts
  • Remove filter/sort toolbar dependencies.
• Modify: tests/market-content-entry.test.ts
  • Update toolbar assertions to the new placement and reduced control set.

Task 1: Lock The New Toolbar Shape In Tests

Files:

• Modify: tests/market-content-entry.test.ts

• Step 1: Write the failing toolbar placement tests

Add tests that assert:

• the plugin toolbar is inserted next to the native 自定义指标 / 导出 action row

• the toolbar no longer renders filter/sort controls

• the toolbar still renders export range, custom page input, export button, batch button, and status text

• Step 2: Run the focused test to verify it fails

Run: npx vitest run tests/market-content-entry.test.ts -t "renders the plugin action bar inside the native market action row" Expected: FAIL because the toolbar still prepends to document.body and still contains filter/sort controls.

• Step 3: Add a failing busy-state regression test

Assert that during export:

• export button is disabled

• batch button is disabled

• export range select is disabled

• custom page input is disabled when visible

• Step 4: Run the focused busy-state test

Run: npx vitest run tests/market-content-entry.test.ts -t "exporting all pages disables the native action bar controls during the task" Expected: FAIL only if the new toolbar structure breaks existing busy-state selectors.

Task 2: Implement The Native Action Bar

Files:

• Modify: src/content/market/plugin-toolbar.ts

• Step 1: Replace the toolbar mount strategy

Implement a helper that finds the native action row containing 自定义指标 and 导出, then inserts the plugin root into that row.

• Step 2: Replace the toolbar DOM structure

Create only:

• export range select
• custom pages input
• export button
• batch submit button
• export status text

Remove creation and lookup of:

• filter inputs

• filter button

• sort field select

• sort direction select

• sort button

• Step 3: Apply native-style button and inline layout styling

Use lightweight inline styles / class reuse so the plugin controls visually align with the native button row.

• Step 4: Keep custom-range visibility logic working

Preserve:

• current
• first-5
• first-10
• all
• custom

When custom is selected, show the input; otherwise hide it.

• Step 5: Run the focused tests to verify green

Run:

npx vitest run tests/market-content-entry.test.ts -t "renders the plugin action bar inside the native market action row|exporting all pages disables the native action bar controls during the task"

Expected: PASS

Task 3: Remove Toolbar Filter/Sort Dependencies

Files:

• Modify: src/content/market/index.ts

• Modify: tests/market-content-entry.test.ts

• Step 1: Remove toolbar filter/sort read paths

Delete the toolbar handlers and state reads that depend on removed controls.

• Step 2: Keep export and batch submission behavior intact

Ensure:

• export still reads the selected range

• batch submit still reads the selected range

• status text still updates during progress and completion

• Step 3: Update affected tests

Adjust tests that previously asserted filter/sort button disabled state so they assert only the remaining controls.

• Step 4: Run focused regression tests

Run:

npx vitest run tests/market-content-entry.test.ts -t "custom export range blocks invalid page counts|prompts for a batch name before submitting the current range|exporting all pages disables the native action bar controls during the task"

Expected: PASS

Task 4: Final Verification

Files:

• Verify only: src/content/market/plugin-toolbar.ts

• Verify only: src/content/market/index.ts

• Verify only: tests/market-content-entry.test.ts

• Step 1: Run the targeted market content tests

Run:

npx vitest run tests/market-content-entry.test.ts

• Step 2: Run build

Run:

npm run build

• Step 3: Commit

git add src/content/market/plugin-toolbar.ts src/content/market/index.ts tests/market-content-entry.test.ts docs/superpowers/specs/2026-04-23-market-native-action-bar-design.md docs/superpowers/plans/2026-04-23-market-native-action-bar.md
git commit -m "feat: move market actions into native action bar"