Add token variable support for code blocks (#4) by leex279 · Pull Request #8 · leex279/task-list-advanced

leex279 · 2026-02-16T21:26:05Z

Summary

Users working through technical task lists often encounter code blocks with placeholder values that need to be replaced before execution
This feature adds token variable support (%%tokenName%% syntax) that prompts users for values when copying code
Automatic token replacement reduces errors and improves UX for technical tutorials

Root Cause

N/A - This is an enhancement requested in issue #4

Changes

File	Change
`src/types/task.ts`	Extended codeBlock interface to include optional tokens field
`src/components/TokenMergeModal.tsx`	Created modal for entering token values before copying
`src/components/code/CodeBlock.tsx`	Added tokens prop and modal trigger on copy
`src/components/TaskDisplay.tsx`	Pass tokens to CodeBlock component
`src/components/TaskEditForm.tsx`	Added token detection and visual feedback UI
`src/hooks/useTasks.ts`	Updated function signatures for token support

Testing

Build passes (npm run build)
No new lint errors introduced (pre-existing errors remain)
Manual verification: Create task with %%username%% placeholder
Manual verification: Copy triggers token modal
Manual verification: Values replace placeholders in copied code

Validation

npm run build

Issue

Fixes #4

📋 Implementation Details

Implementation followed artifact:

/home/archon/.archon/workspaces/task-list-advanced/artifacts/runs/4c9765715e0fb2ba01826a2a0d9c0705/investigation.md

Deviations from plan:

Removed unused setTokens setter from TaskEditForm to avoid lint error

Automated implementation from investigation artifact

🤖 Generated with Claude Code

Users can now define token variables in code blocks using %%tokenName%% syntax. When copying code with tokens, a modal prompts for values which replace the placeholders before copying to clipboard. Changes: - Extended Task interface with optional tokens field in codeBlock - Created TokenMergeModal component for token value input - Updated CodeBlock to show modal when tokens exist - Added token detection UI in TaskEditForm - Updated useTasks hook signatures for token support Fixes #4 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

netlify · 2026-02-16T21:26:10Z

✅ Deploy Preview for task-list-advanced ready!

Name	Link
🔨 Latest commit	`77c41d0`
🔍 Latest deploy log	https://app.netlify.com/projects/task-list-advanced/deploys/69938e4b952b6f00082cbb95
😎 Deploy Preview	https://deploy-preview-8--task-list-advanced.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

leex279 · 2026-02-16T21:33:32Z

🔍 Comprehensive PR Review

PR: #8 - Add token variable support for code blocks
Reviewed by: 5 specialized agents
Date: 2026-02-16

Summary

This PR adds token variable support for code blocks, allowing users to define %%TOKEN%% placeholders that can be filled in when copying code. The implementation is clean and follows existing codebase patterns well. The main concerns are missing error handling for clipboard operations and outdated documentation.

Verdict: REQUEST_CHANGES

Severity	Count
🔴 CRITICAL	0
🟠 HIGH	2
🟡 MEDIUM	3
🟢 LOW	6

🟠 High Issues (Should Fix)

1. CLAUDE.md Task Interface Missing Tokens Property

📍 CLAUDE.md:40-48

The Task Interface documentation doesn't include the new tokens field in codeBlock.

View fix

Update Task Interface to include:

codeBlock?: {
  language: string;
  code: string;
  tokens?: Record<string, string>;  // Token variables
};

Also add to Task System bullet points:

- Token variables in code blocks (%%tokenName%% syntax)

2. README.md Task List Format Missing Tokens Property

📍 README.md Task List Format section

The JSON example doesn't show the tokens property structure.

View fix

Update JSON example and add to Features:

- 🔀 Token variables in code blocks (replaceable %%tokenName%% placeholders)

🟡 Medium Issues (Needs Decision)

1. Unhandled clipboard.writeText() in TokenMergeModal

📍 src/components/TokenMergeModal.tsx:34

Clipboard write can fail silently, showing "Copied!" when nothing was copied.

Options: Fix now (recommended) | Create issue | Skip

View fix

const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(getMergedCode());
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  } catch (error) {
    console.error('Failed to copy code:', error);
  }
};

2. Unhandled clipboard.writeText() in CodeBlock

📍 src/components/code/CodeBlock.tsx:32

Same clipboard issue in the non-token code path.

Options: Fix now (recommended) | Create issue | Skip (pre-existing)

3. Potential Regex Injection in Token Replacement

📍 src/components/TokenMergeModal.tsx:28

Token names interpolated into regex without escaping. Defensive fix recommended.

View fix

const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
merged = merged.replace(new RegExp(`%%${escapedKey}%%`, 'g'), value);

🟢 Low Issues

View 6 low-priority suggestions

Issue	Location	Suggestion
Z-Index inconsistency	`TokenMergeModal.tsx:40`	Keep z-50 (matches AuthModal)
Unused React import	`TokenMergeModal.tsx:1`	Keep as-is (codebase pattern)
detectTokens called twice	`TaskEditForm.tsx:107-111`	Consider useMemo optimization
Missing Escape key handler	`TokenMergeModal.tsx`	Keep as-is (consistent with other modals)
TokenMergeModal not in docs	`README.md`	Add to Core Components list
No test infrastructure	Project-wide	Known constraint, not PR issue

✅ What's Good

Clean Type Extension: tokens property properly added to Task interface with good documentation
Consistent Modal Pattern: TokenMergeModal follows established component patterns
Smart Token Detection: Clean regex with proper deduplication using new Set()
Good UX Flow: Modal only appears when tokens are detected
Proper Prop Threading: Tokens correctly passed through component hierarchy
Defensive Token Detection: Uses || [] fallback for regex match
Self-documenting Code: Clear function names and TypeScript types

📋 Suggested Follow-up Issues

Issue Title	Priority
Add Escape key handler to all modals	P3
Optimize detectTokens with useMemo	P3
Add test infrastructure to project	P2

Next Steps

📝 Documentation: Update CLAUDE.md and README.md with tokens property
🛡️ Error handling: Add try-catch to clipboard operations
🔒 Regex escaping: Add defensive escaping to getMergedCode
🎯 Review LOW issues: Decide which to address

Reviewed by Archon comprehensive-pr-review workflow
Artifacts: artifacts/runs/4c9765715e0fb2ba01826a2a0d9c0705/review/

Fixes applied: - Update CLAUDE.md Task Interface with tokens property - Update README.md with token variable feature documentation - Add try-catch error handling to clipboard operations in TokenMergeModal - Add try-catch error handling to clipboard operations in CodeBlock - Add defensive regex escaping in getMergedCode Review artifacts: artifacts/runs/4c9765715e0fb2ba01826a2a0d9c0705/review/ Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

leex279 · 2026-02-16T21:35:59Z

⚡ Auto-Fix Report

Status: COMPLETE
Pushed: ✅ Changes pushed to PR

Fixes Applied

Severity	Fixed	Skipped
🔴 CRITICAL	0	0
🟠 HIGH	2	0
🟡 MEDIUM	3	0

What Was Fixed

HIGH Priority:

✅ CLAUDE.md Task Interface Missing Tokens Property (CLAUDE.md:40-48) - Added tokens property to Task interface and token variables bullet to Task System
✅ README.md Task List Format Missing Tokens Property (README.md) - Added token variables feature and updated JSON example

MEDIUM Priority:

✅ Unhandled clipboard.writeText() in TokenMergeModal (TokenMergeModal.tsx:34) - Added try-catch error handling
✅ Unhandled clipboard.writeText() in CodeBlock (CodeBlock.tsx:32) - Added try-catch error handling
✅ Potential Regex Injection in Token Replacement (TokenMergeModal.tsx:28) - Added defensive regex escaping

📋 LOW Issues (For Consideration)

Issue	Suggestion
Z-Index inconsistency	Keep z-50 (matches AuthModal pattern)
Unused React import	Keep as-is (matches codebase pattern)
detectTokens called twice	Consider useMemo for optimization
Missing Escape key handler	Keep as-is (consistent with other modals)
TokenMergeModal not in docs	Add to Core Components list

📋 Suggested Follow-up Issues

Add Escape key handler to all modals (P3)
Optimize detectTokens with useMemo (P3)
Add test infrastructure to project (P2)

Validation

✅ Build | ⚠️ Lint (pre-existing errors only)

Auto-fixed by Archon comprehensive-pr-review workflow
Fixes pushed to branch feature/issue-4-token-variables

leex279 · 2026-02-16T21:37:54Z

🎯 Workflow Summary

Plan: Token variable support for code blocks (#4)
Status: ✅ Implementation complete, review fixes applied

Implementation vs Plan

Metric	Planned	Actual
Files modified	6	6
New components	1	1
Deviations	-	1 (minor)

📋 Deviation from Plan (1)

Removed unused setTokens setter - Variable was declared but never used, removed to avoid lint error. Impact: LOW (cleaner code).

Review Summary

Severity	Found	Fixed	Remaining
CRITICAL	0	0	0
HIGH	2	2	0
MEDIUM	3	3	0
LOW	6	0	6

All HIGH and MEDIUM issues have been addressed.

✅ Issues Fixed (5)

Issue	Severity
CLAUDE.md Task Interface Missing Tokens Property	HIGH
README.md Task List Format Missing Tokens Property	HIGH
Unhandled clipboard.writeText() in TokenMergeModal	MEDIUM
Unhandled clipboard.writeText() in CodeBlock	MEDIUM
Potential Regex Injection in Token Replacement	MEDIUM

ℹ️ LOW Issues (Not Blocking)

Issue	Recommendation
Z-Index inconsistency	Keep z-50 (matches AuthModal pattern)
Unused React import	Keep as-is (matches codebase pattern)
detectTokens called twice	Consider useMemo for optimization
Missing Escape key handler	Keep as-is (consistent with other modals)
TokenMergeModal not in docs	Optional - add to Core Components list
No test infrastructure	Known project constraint

📋 Suggested Follow-Up Issues

Title	Priority	Labels
Add Escape key handler to all modals	P3	`enhancement`, `ux`
Optimize detectTokens with useMemo	P3	`enhancement`, `performance`
Add test infrastructure to project	P2	`enhancement`, `testing`

Validation

Check	Status
Build	✅ Passes
Type check	✅ (via build)
Lint	⚠️ Pre-existing errors only
Tests	N/A (no test infra)

Artifacts: artifacts/runs/4c9765715e0fb2ba01826a2a0d9c0705/

🤖 Generated with Claude Code

chore: Auto-commit workflow artifacts (archon-fix-github-issue)

77c41d0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add token variable support for code blocks (#4)#8

Add token variable support for code blocks (#4)#8
leex279 wants to merge 3 commits intostablefrom
feature/issue-4-token-variables

leex279 commented Feb 16, 2026

Uh oh!

netlify bot commented Feb 16, 2026 •

edited

Loading

Uh oh!

leex279 commented Feb 16, 2026

Uh oh!

leex279 commented Feb 16, 2026

Uh oh!

leex279 commented Feb 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

leex279 commented Feb 16, 2026

Summary

Root Cause

Changes

Testing

Validation

Issue

Implementation followed artifact:

Deviations from plan:

Uh oh!

netlify bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for task-list-advanced ready!

Uh oh!

leex279 commented Feb 16, 2026

🔍 Comprehensive PR Review

Summary

🟠 High Issues (Should Fix)

1. CLAUDE.md Task Interface Missing Tokens Property

2. README.md Task List Format Missing Tokens Property

🟡 Medium Issues (Needs Decision)

1. Unhandled clipboard.writeText() in TokenMergeModal

2. Unhandled clipboard.writeText() in CodeBlock

3. Potential Regex Injection in Token Replacement

🟢 Low Issues

✅ What's Good

📋 Suggested Follow-up Issues

Next Steps

Uh oh!

leex279 commented Feb 16, 2026

⚡ Auto-Fix Report

Fixes Applied

What Was Fixed

📋 LOW Issues (For Consideration)

📋 Suggested Follow-up Issues

Validation

Uh oh!

leex279 commented Feb 16, 2026

🎯 Workflow Summary

Implementation vs Plan

Review Summary

📋 Suggested Follow-Up Issues

Validation

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

netlify bot commented Feb 16, 2026 •

edited

Loading