Skip to content

docs: add debugging patterns from eclair 404 fix learnings - #103

Merged
NTCoding merged 2 commits into
mainfrom
docs/debugging-patterns-learnings
Jan 10, 2026
Merged

NTCoding merged 2 commits into
mainfrom
docs/debugging-patterns-learnings

Conversation

@NTCoding

@NTCoding NTCoding commented Jan 10, 2026 •

Copy link
Copy Markdown
Owner

User description

Summary

  • Add Chrome MCP tools guidance for browser debugging
  • Add VitePress routing gotcha documentation
  • Add jsdom testing limitations to testing.md
  • Update task-workflow.md: never reuse squash-merged branches for follow-up work

Context

Patterns discovered during fix-eclair-demo-404 task. Also documents the correct post-merge reflection workflow to avoid stale merge base issues.

Test plan

  • Documentation only, no code changes

PR Type

Documentation, Enhancement


Description

  • Add Chrome MCP tools guidance for browser debugging

  • Document VitePress routing gotcha and event handling solution

  • Add jsdom testing limitations and workarounds

  • Clarify post-merge workflow: reflect, create issues, cleanup, then implement

  • Create shell script for automating tech improvement task creation


Diagram Walkthrough

flowchart LR
  A["Debugging Patterns"] --> B["Chrome MCP Tools"]
  A --> C["VitePress Routing"]
  A --> D["jsdom Limitations"]
  E["Post-Merge Workflow"] --> F["Reflect First"]
  F --> G["Create Issues"]
  G --> H["Cleanup Worktree"]
  H --> I["Implement via Normal Task"]
  J["Automation"] --> K["Tech Improvement Script"]
Loading

File Walkthrough

Relevant files
Enhancement
create-tech-improvement-task.sh
Add tech improvement task creation script                               

scripts/create-tech-improvement-task.sh

  • New bash script to automate GitHub issue creation for tech improvement
    tasks
  • Accepts 5 required parameters: title, references, summary,
    full-details, acceptance-criteria
  • Formats issue body with structured sections and applies tech
    improvement label
  • Includes usage documentation and parameter validation
+44/-0   
Documentation
CLAUDE.md
Add Chrome MCP browser debugging guidance                               

CLAUDE.md

  • Add guidance to use Chrome MCP tools for browser debugging instead of
    code inspection
  • Emphasizes practical debugging approach for UI features and browser
    issues
+1/-0     
CLAUDE.md
Document VitePress routing event handling gotcha                 

apps/docs/CLAUDE.md

  • Document VitePress routing gotcha with event handling details
  • Explain capture phase interception and event.preventDefault() behavior
  • Provide solution using event.stopImmediatePropagation() with capture
    phase listener
  • Reference eclairLinkHandler.ts implementation
+11/-0   
testing.md
Add jsdom testing limitations and workarounds                       

docs/conventions/testing.md

  • Add jsdom limitations section documenting testing constraints
  • Document inability to spy on window.location.assign with workaround
    using Object.defineProperty
  • Document inability to spy on native MouseEvent methods with vi.spyOn
    workaround
  • Provide practical solutions for common jsdom testing challenges
+7/-0     
task-workflow.md
Clarify post-merge workflow and branch reuse warning         

docs/workflow/task-workflow.md

  • Clarify post-merge workflow with explicit 4-step process
  • Emphasize reflection must happen first (requires review files from
    worktree)
  • Add step to create GitHub issues for improvement opportunities
  • Add cleanup step to remove worktree
  • Add critical warning: never reuse squash-merged branches (stale merge
    base issue)
+1/-1     

Summary by CodeRabbit

  • Documentation

    • Added browser debugging guidance recommending Chrome MCP tools.
    • Added VitePress routing notes with techniques to bypass link-routing.
    • Added jsdom testing limitations and recommended workarounds.
    • Expanded post-merge completion workflow with multi-step cleanup and follow-up guidance.
  • Chores

    • Added a script to streamline creating tech-improvement issues via the CLI.

✏️ Tip: You can customize this high-level summary in your review settings.

- Add Chrome MCP tools guidance to CLAUDE.md for browser debugging
- Add VitePress routing gotcha to apps/docs/CLAUDE.md
- Add jsdom testing limitations to testing.md
- Update task-workflow.md: never reuse squash-merged branches

Co-Authored-By: Claude Opus 4.5 <[email protected]>
@coderabbitai

coderabbitai Bot commented Jan 10, 2026 •

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

Adds documentation updates covering browser debugging guidance, a VitePress routing gotcha, jsdom testing limitations, and expanded post-merge workflow instructions; also adds a new script scripts/create-tech-improvement-task.sh to create GitHub issues for technical improvements.

Changes

Cohort / File(s) Summary
Developer Guidance
CLAUDE.md, apps/docs/CLAUDE.md
Adds browser debugging recommendation (use Chrome MCP tools) and documents a VitePress routing "gotcha" with capture-phase link handling notes referencing eclairLinkHandler.ts
Testing Conventions
docs/conventions/testing.md
Adds "jsdom Limitations" subsection describing inability to spy on window.location.assign and native MouseEvent methods, with mocking/spying workarounds
Workflow Documentation
docs/workflow/task-workflow.md
Expands post-merge completion steps: reflect from worktree, file improvement issues, run cleanup-task.sh, and avoid reusing merged branches
Scripts
scripts/create-tech-improvement-task.sh
New Bash script to build a Markdown issue body from five args and create a "tech improvement" GitHub issue via the gh CLI; includes argument validation and usage output

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Poem

🐰 I hopped through docs with nimble paws,

Scribbled gotchas, mock and clause,
A script to hand issues on a plate,
Cleanup steps to close the gate,
Hooray — a tiny codebase fête. 🎉

🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title accurately reflects the main objective: documenting debugging patterns and learnings from the eclair 404 fix task, including browser debugging guidance, VitePress routing gotchas, jsdom testing limitations, and post-merge workflow improvements.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

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

@qodo-code-review

qodo-code-review Bot commented Jan 10, 2026 •

Copy link
Copy Markdown
Contributor

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢
No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪
🎫 No ticket provided
  • Create ticket/issue
Codebase Duplication Compliance
⚪
Codebase context is not defined

Follow the guide to enable codebase context checks.

Custom Compliance
🟢
Generic: Comprehensive Audit Trails

Objective: To create a detailed and reliable record of critical system actions for security analysis
and compliance.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Meaningful Naming and Self-Documenting Code

Objective: Ensure all identifiers clearly express their purpose and intent, making code
self-documenting

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Robust Error Handling and Edge Case Management

Objective: Ensure comprehensive error handling that provides meaningful context and graceful
degradation

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Secure Error Handling

Objective: To prevent the leakage of sensitive system information through error messages while
providing sufficient detail for internal debugging.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Secure Logging Practices

Objective: To ensure logs are useful for debugging and auditing without exposing sensitive
information like PII, PHI, or cardholder data.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Security-First Input Validation and Data Handling

Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent
vulnerabilities

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

  • Update
Compliance status legend 🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

@qodo-code-review

qodo-code-review Bot commented Jan 10, 2026 •

Copy link
Copy Markdown
Contributor

PR Code Suggestions ✨

No code suggestions found for the PR.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jan 10, 2026 •

Copy link
Copy Markdown

Deploying living-architecture with  Cloudflare Pages  Cloudflare Pages

Latest commit: a245d9a
Status: ✅  Deploy successful!
Preview URL: https://f867b0bf.living-architecture.pages.dev
Branch Preview URL: https://docs-debugging-patterns-lear.living-architecture.pages.dev

View logs

@NTCoding

Copy link
Copy Markdown
Owner Author

Closing - need to recreate with corrected process documentation

@NTCoding NTCoding closed this Jan 10, 2026
Correct order: reflect first (needs review files), create issues,
cleanup worktree, then implement via normal task workflow.

Co-Authored-By: Claude Opus 4.5 <[email protected]>
@qodo-code-review

Copy link
Copy Markdown
Contributor

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢
No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪
🎫 No ticket provided
  • Create ticket/issue
Codebase Duplication Compliance
⚪
Codebase context is not defined

Follow the guide to enable codebase context checks.

Custom Compliance
🟢
Generic: Comprehensive Audit Trails

Objective: To create a detailed and reliable record of critical system actions for security analysis
and compliance.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Meaningful Naming and Self-Documenting Code

Objective: Ensure all identifiers clearly express their purpose and intent, making code
self-documenting

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Secure Error Handling

Objective: To prevent the leakage of sensitive system information through error messages while
providing sufficient detail for internal debugging.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Secure Logging Practices

Objective: To ensure logs are useful for debugging and auditing without exposing sensitive
information like PII, PHI, or cardholder data.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

🔴
Generic: Robust Error Handling and Edge Case Management

Objective: Ensure comprehensive error handling that provides meaningful context and graceful
degradation

Status:
Missing dependency checks: The script invokes gh issue create without validating that the gh CLI is
installed/configured or providing actionable error messaging for common failure modes
(missing gh, not authenticated, wrong repo).

Referred Code
echo "Creating tech improvement task: $TITLE"
gh issue create \
    --title "$TITLE" \
    --body "$BODY" \
    --label "tech improvement"

Learn more about managing compliance generic rules or creating your own custom rules

⚪
Generic: Security-First Input Validation and Data Handling

Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent
vulnerabilities

Status:
Unvalidated user content: User-supplied parameters are embedded verbatim into the GitHub issue body, which may be
acceptable for documentation workflows but should be confirmed to not require
sanitization/guardrails (e.g., unintended mentions, links, or sensitive content
inclusion).

Referred Code
TITLE="$1"
REFERENCES="$2"
SUMMARY="$3"
FULL_DETAILS="$4"
ACCEPTANCE_CRITERIA="$5"

BODY="## References
${REFERENCES}

## Summary
${SUMMARY}

## Full Details
${FULL_DETAILS}

## Acceptance Criteria
${ACCEPTANCE_CRITERIA}"

Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend 🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

@qodo-code-review

Copy link
Copy Markdown
Contributor

PR Code Suggestions ✨

Explore these optional code suggestions:

CategorySuggestion                                                                                                                                    Impact
General
Verify gh CLI installed

Add a check to verify the gh CLI is installed before use, and provide a
user-friendly error message if it is not.

scripts/create-tech-improvement-task.sh [38-41]

+command -v gh >/dev/null 2>&1 || { echo >&2 "gh CLI not found; please install and authenticate it."; exit 1; }
 gh issue create \
     --title "$TITLE" \
     --body "$BODY" \
     --label "tech improvement"
  • Apply / Chat
Suggestion importance[1-10]: 7

__

Why: This suggestion improves the script's robustness by adding a precondition check for the gh CLI dependency, providing a clear error message to the user if it's not found, which is better than the default command-not-found error.

Medium
Improve argument validation for correctness

Improve argument validation by checking the exact number of arguments using $#
-ne 5 instead of checking if each of the first five arguments is an empty
string.

scripts/create-tech-improvement-task.sh [7-17]

-if [[ -z "$1" || -z "$2" || -z "$3" || -z "$4" || -z "$5" ]]; then
+if [[ $# -ne 5 ]]; then
     echo "Usage: ./scripts/create-tech-improvement-task.sh <title> <references> <summary> <full-details> <acceptance-criteria>" >&2
     echo "" >&2
-    echo "All 5 parameters are required:" >&2
+    echo "Exactly 5 parameters are required:" >&2
     echo "  <title>                - Task title" >&2
     echo "  <references>           - GitHub issues, PRs, or explanation of origin" >&2
     echo "  <summary>              - One paragraph: what and why" >&2
     echo "  <full-details>         - Implementation approach, affected files, context" >&2
     echo "  <acceptance-criteria>  - Checkboxes for completion criteria" >&2
     exit 1
 fi
  • Apply / Chat
Suggestion importance[1-10]: 5

__

Why: The suggestion correctly points out that checking the argument count with $# is more robust for ensuring exactly 5 arguments are passed, but it removes the existing check that prevents empty string arguments, which is also a valuable validation.

Low
Make shebang portable

Improve script portability by changing the shebang from #!/bin/bash to
#!/usr/bin/env bash.

scripts/create-tech-improvement-task.sh [1]

-#!/bin/bash
+#!/usr/bin/env bash
  • Apply / Chat
Suggestion importance[1-10]: 4

__

Why: This is a standard best practice for shell script portability, making the script more robust across different environments where bash might not be located at /bin/bash.

Low
  • More

@sonarqubecloud

Copy link
Copy Markdown

@NTCoding
NTCoding merged commit f127ade into main Jan 10, 2026
17 of 18 checks passed

@coderabbitai coderabbitai 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.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In @docs/workflow/task-workflow.md:
- Line 51: The "Post-Merge Completion" note is ambiguous about review files;
update the text around the `/post-merge-completion` instruction to explicitly
state that review files are optional inputs and that the command will run
gracefully if they are absent (e.g., replace or expand "needs review files" with
"optional review files — command works if these are absent"). Also clarify that
other steps (creating issues, running `cleanup-task.sh`, and starting a new
task) remain the same and that merged branches must not be reused.
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 92bb1dc and a245d9a.

📒 Files selected for processing (2)
  • docs/workflow/task-workflow.md
  • scripts/create-tech-improvement-task.sh
🧰 Additional context used
📓 Path-based instructions (1)
**/*.md

📄 CodeRabbit inference engine (CLAUDE.md)

All code must follow docs/conventions/codebase-structure.md

Files:

  • docs/workflow/task-workflow.md
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: NTCoding/living-architecture PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-09T18:58:21.008Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : When writing, editing, refactoring, or reviewing code, always follow `docs/conventions/software-design.md`
📚 Learning: 2026-01-09T18:10:15.724Z
Learnt from: NTCoding
Repo: NTCoding/living-architecture PR: 85
File: .claude/commands/post-merge-completion.md:35-39
Timestamp: 2026-01-09T18:10:15.724Z
Learning: In .claude/commands/post-merge-completion.md, the review files in `reviews/<branch>/` (code-review.md, bug-scanner.md, task-check.md, doc-suggestions.md) are optional inputs to the reflection process. The post-merge-completion command should work gracefully even if these files are missing or if /complete-task wasn't run before merging.

Applied to files:

  • docs/workflow/task-workflow.md
📚 Learning: 2026-01-09T18:58:21.008Z
Learnt from: CR
Repo: NTCoding/living-architecture PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-09T18:58:21.008Z
Learning: Whenever working on any task, follow docs/workflow/task-workflow.md from start to finish. Do not make any changes or commit any code without following these steps exactly

Applied to files:

  • docs/workflow/task-workflow.md
📚 Learning: 2026-01-09T18:58:21.008Z
Learnt from: CR
Repo: NTCoding/living-architecture PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-09T18:58:21.008Z
Learning: Always use scripts in `./scripts/` for git and GitHub operations (PRs, issues, tasks). Do not use `gh` or `git` commands directly unless no script exists. If you need functionality that doesn't have a script, propose creating one

Applied to files:

  • scripts/create-tech-improvement-task.sh
📚 Learning: 2026-01-06T18:02:51.422Z
Learnt from: NTCoding
Repo: NTCoding/living-architecture PR: 58
File: scripts/get-pr-feedback.sh:45-55
Timestamp: 2026-01-06T18:02:51.422Z
Learning: In shell scripts that call GraphQL APIs (e.g., scripts/get-pr-feedback.sh and similar), prefer using sed-based interpolation for GraphQL variables instead of gh api graphql's -f/-F flags. Rationale: sed-based interpolation is typically simpler and more robust in Bash contexts, avoids JSON encoding pitfalls, and keeps the script portable. Implement by building the GraphQL query as a string and substituting variables with sed or parameter expansion, ensuring proper escaping. If you must use -f/-F, provide clear justification in a comment.

Applied to files:

  • scripts/create-tech-improvement-task.sh
📚 Learning: 2026-01-06T18:13:47.289Z
Learnt from: NTCoding
Repo: NTCoding/living-architecture PR: 58
File: scripts/reply-to-thread.sh:1-12
Timestamp: 2026-01-06T18:13:47.289Z
Learning: In shell scripts across the repository (e.g., scripts/reply-to-thread.sh), keep the code simple by not adding explicit preflight tool-availability checks for external commands (like gh or jq) when those tools would fail on first use anyway. Such checks add boilerplate without changing behavior. If you must guard against missing tools, prefer a minimal, early startup check or rely on the script failing naturally at the point of use.

Applied to files:

  • scripts/create-tech-improvement-task.sh
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: main
  • GitHub Check: Cloudflare Pages
🔇 Additional comments (5)
scripts/create-tech-improvement-task.sh (5)

1-6: LGTM!

The script setup is correct with appropriate error handling via set -e, and the usage comment matches the validation message below.


7-17: LGTM!

The parameter validation is comprehensive, with clear usage documentation and proper error handling using stderr and exit code 1.


19-23: LGTM!

Variable assignments are straightforward and use descriptive names for clarity.


25-35: LGTM!

The body construction uses parameter expansion within double quotes, which correctly preserves special characters and newlines. The markdown formatting is clean and consistent.


37-44: LGTM!

The gh issue create command is properly structured with correctly quoted parameters. The script follows best practices by using the gh CLI for GitHub operations (per learnings), and the status messages provide good user feedback.

**Re-check PR** — PR feedback addressed, needs CI verification. Run `/complete-task` again to re-run the full pipeline.

**Post-Merge Completion** — After PR is merged, run `/post-merge-completion` to reflect on feedback, suggest process improvements, and clean up the worktree.
**Post-Merge Completion** — After PR is merged: (1) Run `/post-merge-completion` from the worktree to reflect on feedback (needs review files). (2) Create GitHub issues for any improvement opportunities identified. (3) Run `cleanup-task.sh` to remove the worktree. (4) Implement improvements by starting the new task via normal workflow—**never reuse the merged branch** (squash merges create stale merge bases).

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Clarify that review files are optional inputs.

The phrase "needs review files" could be misinterpreted as requiring them, when they're actually optional inputs to the reflection process. Based on learnings, the post-merge-completion command should work gracefully even if these files are missing.

📝 Suggested clarification
-**Post-Merge Completion** — After PR is merged: (1) Run `/post-merge-completion` from the worktree to reflect on feedback (needs review files). (2) Create GitHub issues for any improvement opportunities identified. (3) Run `cleanup-task.sh` to remove the worktree. (4) Implement improvements by starting the new task via normal workflow—**never reuse the merged branch** (squash merges create stale merge bases).
+**Post-Merge Completion** — After PR is merged: (1) Run `/post-merge-completion` from the worktree to reflect on feedback (optionally uses review files if available). (2) Create GitHub issues for any improvement opportunities identified. (3) Run `cleanup-task.sh` to remove the worktree. (4) Implement improvements by starting the new task via normal workflow—**never reuse the merged branch** (squash merges create stale merge bases).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
**Post-Merge Completion** — After PR is merged: (1) Run `/post-merge-completion` from the worktree to reflect on feedback (needs review files). (2) Create GitHub issues for any improvement opportunities identified. (3) Run `cleanup-task.sh` to remove the worktree. (4) Implement improvements by starting the new task via normal workflow—**never reuse the merged branch** (squash merges create stale merge bases).
**Post-Merge Completion** — After PR is merged: (1) Run `/post-merge-completion` from the worktree to reflect on feedback (optionally uses review files if available). (2) Create GitHub issues for any improvement opportunities identified. (3) Run `cleanup-task.sh` to remove the worktree. (4) Implement improvements by starting the new task via normal workflow—**never reuse the merged branch** (squash merges create stale merge bases).
🤖 Prompt for AI Agents
In @docs/workflow/task-workflow.md at line 51, The "Post-Merge Completion" note
is ambiguous about review files; update the text around the
`/post-merge-completion` instruction to explicitly state that review files are
optional inputs and that the command will run gracefully if they are absent
(e.g., replace or expand "needs review files" with "optional review files —
command works if these are absent"). Also clarify that other steps (creating
issues, running `cleanup-task.sh`, and starting a new task) remain the same and
that merged branches must not be reused.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant