star-chart-search-enhancer/docs/superpowers/plans/2026-04-22-market-scrollable-plugin-columns.md

2.2 KiB

Market Scrollable Plugin Columns 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 plugin-generated market columns out of the right sticky area and into the horizontally scrollable middle area.

Architecture: Keep Xingtu's native left and right sticky sections intact. Add a dedicated non-sticky plugin section for the injected columns and continue rendering row state through the existing MarketRowDom abstraction.

Tech Stack: TypeScript, Vitest, jsdom


Task 1: Lock The Intended Layout In Tests

Files:

  • Modify: tests/market-dom-sync.test.ts

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

  • Step 1: Write failing tests for the layout boundary

Add assertions that:

  • the right sticky header/body widths remain native after plugin columns are added

  • plugin columns live in a dedicated non-sticky section instead of the right sticky section

  • Step 2: Run tests to verify they fail

Run: npm test -- tests/market-dom-sync.test.ts tests/market-content-entry.test.ts

  • Step 3: Implement the minimal layout changes

Update the div-grid sync path so plugin columns are inserted into a separate scrollable section.

  • Step 4: Re-run the same tests

Run: npm test -- tests/market-dom-sync.test.ts tests/market-content-entry.test.ts

  • Step 5: Commit
git add tests/market-dom-sync.test.ts tests/market-content-entry.test.ts src/content/market/dom-sync.ts
git commit -m "feat: move market plugin columns into scrollable section"

Task 2: Verify No Export Regression

Files:

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

  • Verify only: src/content/market/export-range-controller.ts

  • Verify only: tests/full-scan-controller.test.ts

  • Step 1: Run export-related regression tests

Run: npm test -- tests/full-scan-controller.test.ts

  • Step 2: Run build

Run: npm run build

  • Step 3: Report any unrelated failures separately

Do not broaden the scope unless a new failure is caused by the layout change.