Skip to content

feat(hasher): add chord pins and MIDI export - #98

Merged
micro-JAY merged 16 commits into
mainfrom
feat/hasher-hover-pins-midi-share
Aug 27, 2026
Merged

feat(hasher): add chord pins and MIDI export#98
micro-JAY merged 16 commits into
mainfrom
feat/hasher-hover-pins-midi-share

Conversation

@micro-JAY

@micro-JAY micro-JAY commented Aug 27, 2026

Copy link
Copy Markdown
Owner

What

  • Add a 1.5-second chord-grid hover preview that promotes to a draggable, visual-only pinned Guitar or Piano chord card.
  • Keep each pin independent, with its own chord modifier, guitar variation, or piano voicing controls; omit lock and playback behavior.
  • Preserve pins across Run, timeline Modify, and HASHER / TUNE TOOLBOX / FRET FINDER navigation.
  • Add a dependency-free Standard MIDI File download beneath the existing Share URL controls, using the selected Guitar shapes or Piano voicings as one 4/4 bar per chord with no Set Tempo event.
  • Reorder HASHER to Describe → Build Your Own → Browse/Key/Mode/instrument → Presets, with presets hidden while the chord browser is open.
  • Integrate current main (f57bdbe) while preserving its OpenAI Realtime, privacy, timeline-modification, and control-alignment work.

Why

The chord browser should support quick visual chord exploration without requiring Run for every candidate. MIDI export makes the selected voicings immediately reusable in a DAW while keeping tempo flexible. The control reorder gives the natural-language builder priority and keeps Key/Mode beside the browser and presets that consume that context.

Music-theory references

  • No chord spelling, dictionary, analysis, or playback rules change.
  • MIDI pitches come from the exact selected Guitar diagram or Piano voicing already rendered by the shared harmony pipeline.
  • Every exported chord occupies 1,920 ticks at 480 PPQ (one 4/4 bar); the file intentionally omits MIDI Set Tempo metadata.

Screenshots

Desktop

Before After
Desktop before Desktop after

Mobile

Before After
Mobile before Mobile after

Test summary

  • npm run build
  • npm run lint
  • npm test — 63 files / 1,349 tests
  • npm run test:e2e -- --workers=1 --reporter=line — 207/207 Chromium scenarios
  • openspec validate --all --strict — 33/33 items
  • git diff --check main...HEAD

Focused coverage verifies the 1,500 ms hover boundary, early-leave and inactive-workspace cancellation, reduced-motion rendering, Guitar and Piano pins, token-driven Piano sizing, pointer placement, cascade distance, edge clamping, and full toolbar exposure at default and live 20px root fonts, local pin modification, layout and offset-visual-viewport recovery after resize and drag, live visual-viewport card sizing, minimum toolbar recovery after extreme shrink, collision avoidance from dragged live positions, independently reachable repeated Piano pins at 360×480, Share-panel pointer precedence over overlapping pins, touch scrolling, bounded dragging, zero audio-context construction, Run/Modify/workspace persistence, guided-tour target restoration, selected-voicing MIDI bytes, same-Guitar reselection stability, explicit diagram failure, absence of tempo metadata, download preparation/error states, 320/360/375px responsive alignment, preset hiding/restoration, and existing composer insertion behavior.

Review remediation

  • Address all twenty Codex threads: four P1 design-system/placement findings and sixteen P2 behavior/responsiveness findings across the initial and exact-head reviews.
  • Resolve semantic floating-card widths, conservative placement heights, viewport/pointer gaps, and toolbar height to pixels at runtime; remeasure after root-font or theme-attribute changes; pass that complete geometry into placement, cascade, available-height, and rendered-bound clamping; and keep semantic surface styling in the owning React component.
  • Re-clamp and size live pins against visual-viewport width, height, and offsets on resize, scroll, and drag completion with a layout fallback and minimum toolbar; cascade from rendered live positions and contract compact repeated pins so every drag handle stays independently reachable; keep the Share dialog above pins; preserve cached voicings when Guitar is reselected; cancel pending preview intent outside Hasher; suppress preview entrance motion for reduced-motion users; preserve touch scrolling outside the drag handle; restore the preset tour target; surface failed Guitar voicings; and stack browser context at 320–360px.

Risks

  • Floating cards use viewport estimates for initial placement, then re-clamp their rendered bounds against the live visual viewport on resize, scroll, and drag completion while layout-layer constraints provide the broader fallback boundary.
  • Guitar MIDI readiness depends on the selected SVG diagram finishing validation. The Share panel remains disabled while preparing and surfaces an explicit error instead of exporting guessed notes.
  • MIDI consumers choose their own default tempo because the file intentionally contains no Set Tempo event.

Follow-ups

  • Archive and sync add-chord-preview-pins-midi-export only after merge.
  • No deployment or provider configuration change is included in this PR.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 27, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
harmony 3b4c5f0 Commit Preview URL

Branch Preview URL
Aug 27 2026, 05:55 AM

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6703d5b6bf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/FloatingChordCards.tsx
Comment thread src/components/ProgressionInput.tsx
Comment thread src/components/ShareProgression.tsx Outdated
Comment thread src/index.css Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9c6b1a430e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/index.css Outdated
Comment thread src/index.css
Comment thread src/index.css Outdated
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 320760ef7b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/FloatingChordCards.tsx Outdated
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 46b4d3d60d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/FloatingChordCards.tsx
Comment thread src/App.tsx
Comment thread src/components/FloatingChordCards.tsx Outdated
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c016569ca5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/index.css Outdated
Comment thread src/components/floatingChordCardsState.ts Outdated
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bbf172db9a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/floatingChordCardsState.ts
Comment thread src/index.css
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bd851bad1c

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/floatingChordCardsState.ts Outdated
Comment thread src/components/FloatingChordCards.tsx Outdated
Comment thread src/App.tsx
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bcc3f29505

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/floatingChordCardsState.ts Outdated
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: fa6402d85b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/floatingChordCardsState.ts Outdated
@micro-JAY

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Bravo.

Reviewed commit: 3b4c5f0620

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@micro-JAY
micro-JAY merged commit 47fef0d into main Aug 27, 2026
8 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant