diff --git a/plugins/artifact/skills/artifact/SKILL.md b/plugins/artifact/skills/artifact/SKILL.md index 717183d..a5b9212 100644 --- a/plugins/artifact/skills/artifact/SKILL.md +++ b/plugins/artifact/skills/artifact/SKILL.md @@ -19,6 +19,7 @@ When the user asks for an interactive artifact, playground, explorer, or visual - `templates/data-explorer.md` — Data and query building (SQL, APIs, pipelines, regex) - `templates/concept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping) - `templates/writing-tool.md` — Writing and content (tone, document structure, audience) + - `templates/diff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting) 3. **Follow the template** to build the artifact. If the topic doesn't fit any template cleanly, use the one closest and adapt. ## Core requirements (every artifact) diff --git a/plugins/artifact/skills/artifact/templates/diff-review.md b/plugins/artifact/skills/artifact/templates/diff-review.md new file mode 100644 index 0000000..ff4c0e2 --- /dev/null +++ b/plugins/artifact/skills/artifact/templates/diff-review.md @@ -0,0 +1,179 @@ +# Diff Review Template + +Use this template when the artifact is about reviewing code diffs: git commits, pull requests, code changes with interactive line-by-line commenting for feedback. + +## Layout + +``` ++-------------------+----------------------------------+ +| | | +| Commit Header: | Diff Content | +| • Hash | (files with hunks) | +| • Message | with line numbers | +| • Author/Date | and +/- indicators | +| | | ++-------------------+----------------------------------+ +| Prompt Output Panel (fixed bottom-right) | +| [ Copy All ] | +| Shows all comments formatted for prompt | ++------------------------------------------------------+ +``` + +Diff review artifacts display git diffs with syntax highlighting. Users click lines to add comments, which become part of the generated prompt for code review feedback. + +## Control types for diff review + +| Feature | Control | Behavior | +|---|---|---| +| Line commenting | Click any diff line | Opens textarea below the line | +| Comment indicator | Badge on commented lines | Shows which lines have feedback | +| Save/Cancel | Buttons in comment box | Persist or discard comment | +| Copy prompt | Button in prompt panel | Copies all comments to clipboard | + +## Diff rendering + +Parse diff data into structured format for rendering: + +```javascript +const diffData = [ + { + file: "path/to/file.py", + hunks: [ + { + header: "@@ -41,13 +41,13 @@ function context", + lines: [ + { type: "context", oldNum: 41, newNum: 41, content: "unchanged line" }, + { type: "deletion", oldNum: 42, newNum: null, content: "removed line" }, + { type: "addition", oldNum: null, newNum: 42, content: "added line" }, + ] + } + ] + } +]; +``` + +## Line type styling + +| Type | Background | Text Color | Prefix | +|---|---|---|---| +| `context` | transparent | default | ` ` (space) | +| `addition` | green tint (#dafbe1 light / rgba(46,160,67,0.15) dark) | green (#1a7f37 light / #7ee787 dark) | `+` | +| `deletion` | red tint (#ffebe9 light / rgba(248,81,73,0.15) dark) | red (#cf222e light / #f85149 dark) | `-` | +| `hunk-header` | blue tint (#ddf4ff light) | blue (#0969da light) | `@@` | + +## Comment system + +Each diff line gets a unique identifier for comment tracking: + +```javascript +const comments = {}; // { lineId: commentText } + +function selectLine(lineId, lineEl) { + // Deselect previous + document.querySelectorAll('.diff-line.selected').forEach(el => + el.classList.remove('selected')); + document.querySelectorAll('.comment-box.active').forEach(el => + el.classList.remove('active')); + + // Select new + lineEl.classList.add('selected'); + document.getElementById(`comment-box-${lineId}`).classList.add('active'); +} + +function saveComment(lineId) { + const textarea = document.getElementById(`textarea-${lineId}`); + const comment = textarea.value.trim(); + + if (comment) { + comments[lineId] = comment; + } else { + delete comments[lineId]; + } + + renderDiff(); // Re-render to show comment indicator + updatePromptOutput(); +} +``` + +## Prompt output format + +Generate a structured code review format: + +```javascript +function updatePromptOutput() { + const commentKeys = Object.keys(comments); + + if (commentKeys.length === 0) { + promptContent.innerHTML = 'Click on any line to add a comment...'; + return; + } + + let output = 'Code Review Comments:\n\n'; + + commentKeys.forEach(lineId => { + const lineEl = document.querySelector(`[data-line-id="${lineId}"]`); + const file = lineEl.dataset.file; + const lineNum = lineEl.dataset.lineNum; + const content = lineEl.dataset.content; + + output += `📍 ${file}:${lineNum}\n`; + output += ` Code: ${content.trim()}\n`; + output += ` Comment: ${comments[lineId]}\n\n`; + }); + + promptContent.textContent = output; +} +``` + +## Data attributes for line elements + +Store metadata on each line element for prompt generation: + +```html +
+``` + +## Pre-populating with real data + +To create a diff viewer for a specific commit: + +1. Run `git show --format="%H%n%s%n%an%n%ad" -p` +2. Parse the output into the `diffData` structure +3. Include commit metadata in the header section + +## Theme support + +Support both light and dark modes: + +```css +/* Light mode */ +body { background: #f6f8fa; color: #1f2328; } +.file-card { background: #ffffff; border: 1px solid #d0d7de; } +.diff-line.addition { background: #dafbe1; } +.diff-line.deletion { background: #ffebe9; } + +/* Dark mode */ +body { background: #0d1117; color: #c9d1d9; } +.file-card { background: #161b22; border: 1px solid #30363d; } +.diff-line.addition { background: rgba(46, 160, 67, 0.15); } +.diff-line.deletion { background: rgba(248, 81, 73, 0.15); } +``` + +## Interactive features + +- **Hover hint:** Show "Click to comment" tooltip on line hover +- **Comment indicator:** Badge (💬) on lines with saved comments +- **Toast notification:** "Copied to clipboard!" feedback on copy +- **Edit existing:** Allow editing previously saved comments + +## Example topics + +- Git commit review (single commit diff with line comments) +- Pull request review (multiple commits, file-level and line-level comments) +- Code diff comparison (before/after refactoring) +- Merge conflict resolution (showing both versions with annotations) +- Code audit (security review with findings per line)