feat: markdown copy buttons next to every table#47
Open
jakduch wants to merge 1 commit into
Open
Conversation
jakduch
force-pushed
the
feat/markdown-copy-buttons
branch
3 times, most recently
from
1334e37 to
4c1f2e3
Compare
Add a small clipboard 'MD' button to each table section header (Cost
by Model, Recent Sessions, Cost by Project, Cost by Project & Branch).
Clicking it copies the table's current data as a GitHub-flavored
markdown table to the clipboard, ready to paste into Slack, email,
or a PR description.
- Generic JS helper _tableToMarkdown(tableId, headers, rowsData) that
builds the canonical | col | col |\n|---|---|\n| ... | shape, with
_mdEscape() to safely handle embedded pipes and newlines.
- Primary copy path uses navigator.clipboard.writeText; falls back to
a hidden textarea + execCommand('copy') for older browsers.
- Bottom-center toast 'Copied as markdown!' for 2s after click.
- New tests/test_md_copy.py covers the helper shape, per-table
buttons, fallback path, and toast CSS+behavior (15 tests).
Total 205 tests pass.
jakduch
force-pushed
the
feat/markdown-copy-buttons
branch
from
4c1f2e3 to
c8b2120
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this add and why do you believe it belongs in this dashboard?
Adds a small clipboard-icon "MD" button next to every data table (Cost by Model, Recent Sessions, Cost by Project, Cost by Project & Branch). One click copies the table's currently filtered and sorted rows to the clipboard as a GitHub-flavoured markdown table, ready to paste into an issue, PR description, Slack message, or a chat with Claude itself.
This belongs in a personal Claude Code usage dashboard because the most common thing you actually do with these numbers is share them: "hey, look how much I spent on opus this week," filing a bug with a session breakdown, or pasting a project cost table into a standup note. Today that workflow is screenshot-or-retype; CSV export exists but is the wrong format for chat surfaces. A markdown copy button is the missing third option — fast enough to use mid-conversation and faithful to what's currently on screen.
Implementation is self-contained: pure DOM and clipboard JS, pipe-escaped cells, async clipboard with an
execCommandfallback, and a small toast for feedback. No new dependencies.Checklist
Code correctness
calcCost()calls pass 6 arguments:(model, inp, out, cache_read, cache_creation, cache_1h)`), not escaped ones (\`)Tests
python3 -m unittest discover -s tests -v— all passingpython3 -m unittest tests.test_browser -v— all passingScope
dashboard.py,scanner.py,cli.py,pricing.py,cowork.py,tests/) — or I've explained below why a new file is needed