Skip to content

feat(atoms): highlight [bracketed] variables in prompt and code blocks#58

Merged
mmorerasanchez merged 3 commits into
mainfrom
feat/customization-section
Jun 2, 2026
Merged

feat(atoms): highlight [bracketed] variables in prompt and code blocks#58
mmorerasanchez merged 3 commits into
mainfrom
feat/customization-section

Conversation

@mmorerasanchez

@mmorerasanchez mmorerasanchez commented Jun 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Summary

  • Adds a shared tokenizeBrackets utility that splits any string on [bracketed] tokens and wraps each match in a highlighted <span> using the accent token palette (bg-accent/10 text-accent rounded-sm px-1) — matching the inline Code atom style exactly.
  • Applies the tokenizer to StepCode (src/pages/ai/_shared.tsx) and CodeBlock (src/components/atoms/CodeBlock.tsx) so variable placeholders like [product] and [brand direction] render in the accent color across all AI page prompts.
  • Copy-to-clipboard always receives the raw original string (brackets included) — highlighting is purely visual.
  • Uses a non-global MATCH_RE for per-part testing to avoid stateful lastIndex issues on the shared split regex.

Commits

Commit Description
fee2412 feat(atoms): highlight [bracketed] variables in prompt and code blocks
73c11fe feat(organisms): add AGENTS.md card and rename to agent context architecture
3d7fa60 docs(pages): align overview inventory with canonical doc and update hero copy

Files changed

File Change
src/lib/tokenizeBrackets.tsx New — shared tokenizer utility
src/__tests__/tokenizeBrackets.test.tsx New — 6 unit tests (single token, multi-token, copy invariant, plain text, newline guard)
src/components/atoms/CodeBlock.tsx Apply tokenizeBrackets in <pre>; copy value stays raw
src/pages/ai/_shared.tsx Apply tokenizeBrackets in StepCode; copy value stays raw
src/pages/AiPage.tsx Agent context architecture section refactor
src/components/organisms/ai/FileArchitectureSection.tsx Add AGENTS.md card, expand to 4-col grid
src/pages/OverviewPage.tsx Align stat counts with canonical design-system.md
README.md Sync component inventory counts

Test plan

  • npm run lint — passes clean
  • npm run test — 89 tests pass (6 new in tokenizeBrackets.test.tsx)
  • Visual: open the AI page and confirm [product] / [brand direction] render in accent orange across warm, dark, and light themes
  • Confirm clicking the copy button on any CodeBlock or StepCode containing [token] copies the raw bracketed string (not HTML)

🤖 Generated with Claude Code

mmorerasanchez and others added 2 commits June 2, 2026 13:17
@mmorerasanchez @claude
docs(pages): align overview inventory with canonical doc and update h…
3d7fa60 
…ero copy

- Hero paragraph: removes "hand-crafted", names the stack (React + Tailwind CSS + Radix UI), rephrases theme count as prose
- stats array: Atoms 10→11, Molecules 18→17, UI primitives 40+→48 (canonical source: docs/design-system.md)
- README: same count fixes in directory tree and Component Inventory table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@mmorerasanchez @claude
feat(organisms): add AGENTS.md card and rename to agent context archi…
73c11fe 
…tecture

- Rename heading "Three-file architecture" → "Agent context architecture"
- Add subtext below heading describing the four-file agent context system
- Fix third card filename display: "DESIGN_SYSTEM.md" → "docs/design-system.md"
- Add fourth card for AGENTS.md (Cross-tool Agent Context)
- Expand grid to lg:grid-cols-4 for one-row desktop, 2×2 tablet layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 2, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
democrito Ready Ready Preview, Comment Jun 2, 2026 11:20am

@mmorerasanchez @claude
feat(atoms): highlight [bracketed] variables in prompt and code blocks
fee2412 
Tokenizes children strings in StepCode and CodeBlock on /(\[[^\]\n]+\])/g,
wrapping each match in a highlighted span (bg-accent/10 text-accent rounded-sm px-1)
matching the inline Code atom style. Copy-to-clipboard always receives the raw
original string. Covers unit tests for single token, multiple tokens, plain text,
and multiline guard.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jun 2, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@mmorerasanchez, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 58 minutes and 59 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3a1696e7-2b7b-450a-8164-31e625e22a7f

📥 Commits

Reviewing files that changed from the base of the PR and between 519e1c3 and fee2412.

📒 Files selected for processing (8)
  • README.md
  • src/__tests__/tokenizeBrackets.test.tsx
  • src/components/atoms/CodeBlock.tsx
  • src/components/organisms/ai/FileArchitectureSection.tsx
  • src/lib/tokenizeBrackets.tsx
  • src/pages/AiPage.tsx
  • src/pages/OverviewPage.tsx
  • src/pages/ai/_shared.tsx
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/customization-section

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@mmorerasanchez mmorerasanchez changed the title feat: agent context architecture + overview inventory fixes feat: AI page customization section + agent context architecture + inventory sync Jun 2, 2026
@mmorerasanchez mmorerasanchez changed the title feat: AI page customization section + agent context architecture + inventory sync feat(pages): rename Distribution to Customization and add Examples card Jun 2, 2026
@mmorerasanchez mmorerasanchez changed the title feat(pages): rename Distribution to Customization and add Examples card feat(atoms): highlight [bracketed] variables in prompt and code blocks Jun 2, 2026
@mmorerasanchez mmorerasanchez merged commit 47dbbb6 into main Jun 2, 2026
4 checks passed
@mmorerasanchez mmorerasanchez deleted the feat/customization-section branch June 2, 2026 11:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@mmorerasanchez