Resolved GitHub issue #894 for skill invocation UI
Public
Resolved GitHub issue #894 for skill invocation UI
Agent
Pi
Model
Claude Opus 4.5 (latest)
Started
Jan 22, 8:50 PM
Messages200
Downloads0
Reviewed codebase for skill invocation and collapsible elements.
UnderstandConfirmed skill block renders correctly with spacer.
VerifyCommitted and pushed fix for issue #894.
EditClosed GitHub issue with confirmation comment.
Cleanup
Skill location: /path/to/skill/SKILL.mdReferences are relative to /path/to/skill.
<full skill body content>
---
User: <args>// In addMessageToChat(), case "user":if (textContent.startsWith(SKILL_MESSAGE_PREFIX)) { const component = new SkillInvocationMessageComponent(textContent, ...); component.setExpanded(this.toolOutputExpanded); this.chatContainer.addChild(component);} else { const userComponent = new UserMessageComponent(textContent, ...); this.chatContainer.addChild(userComponent);}export const SKILL_MESSAGE_PREFIX = "Skill location: ";// New format for skill expansionconst skillMessage = `<skill name="${skill.name}" location="${skill.filePath}">References are relative to ${skill.baseDir}.
${body}</skill>`;
return args ? `${skillMessage}\n\n${args}` : skillMessage;export interface ParsedSkillBlock { name: string; location: string; content: string; // everything inside <skill>...</skill> userMessage: string | undefined; // text after </skill>}
export function parseSkillBlock(text: string): ParsedSkillBlock | null { const match = text.match(/^<skill name="([^"]+)" location="([^"]+)">\n([\s\S]*?)\n<\/skill>(?:\n\n([\s\S]+))?$/); if (!match) return null; return { name: match[1], location: match[2], content: match[3], userMessage: match[4]?.trim() || undefined, };}case "user": { const textContent = this.getUserMessageText(message); if (textContent) { const skillBlock = parseSkillBlock(textContent); if (skillBlock) { const component = new SkillInvocationMessageComponent(skillBlock, this.getMarkdownThemeWithSettings()); component.setExpanded(this.toolOutputExpanded); this.chatContainer.addChild(component); } else { this.chatContainer.addChild(new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings())); } // ... history handling } break;}<skill name="skill-name" location="/path/to/SKILL.md">References are relative to /path/to/skill.
... skill content ...</skill>
user args (if any)export BRAVE_API_KEY=[REDACTED]cd {baseDir}npm install{baseDir}/search.js "query" # Basic search (5 results){baseDir}/search.js "query" -n 10 # More results (max 20){baseDir}/search.js "query" --content # Include page content as markdown{baseDir}/search.js "query" --freshness pw # Results from last week{baseDir}/search.js "query" --freshness 2024-01-01to2024-06-30 # Date range{baseDir}/search.js "query" --country DE # Results from Germany{baseDir}/search.js "query" -n 3 --content # Combined options{baseDir}/content.js https://example.com/article--- Result 1 ---Title: Page TitleLink: https://example.com/pageAge: 2 days agoSnippet: Description from search resultsContent: (if --content flag used) Markdown content extracted from the page...
--- Result 2 ---...export BRAVE_API_KEY=[REDACTED]cd {baseDir}npm install{baseDir}/search.js "query" # Basic search (5 results){baseDir}/search.js "query" -n 10 # More results (max 20){baseDir}/search.js "query" --content # Include page content as markdown{baseDir}/search.js "query" --freshness pw # Results from last week{baseDir}/search.js "query" --freshness 2024-01-01to2024-06-30 # Date range{baseDir}/search.js "query" --country DE # Results from Germany{baseDir}/search.js "query" -n 3 --content # Combined options{baseDir}/content.js https://example.com/article--- Result 1 ---Title: Page TitleLink: https://example.com/pageAge: 2 days agoSnippet: Description from search resultsContent: (if --content flag used) Markdown content extracted from the page...
--- Result 2 ---...cd {baseDir}/browser-toolsnpm install{baseDir}/browser-start.js # Fresh profile{baseDir}/browser-start.js --profile # Copy user's profile (cookies, logins){baseDir}/browser-nav.js https://example.com{baseDir}/browser-nav.js https://example.com --new{baseDir}/browser-eval.js 'document.title'{baseDir}/browser-eval.js 'document.querySelectorAll("a").length'{baseDir}/browser-screenshot.js{baseDir}/browser-pick.js "Click the submit button"{baseDir}/browser-cookies.js{baseDir}/browser-content.js https://example.com// Get page structuredocument.body.innerHTML.slice(0, 5000)
// Find interactive elementsArray.from(document.querySelectorAll('button, input, [role="button"]')).map(e => ({ id: e.id, text: e.textContent.trim(), class: e.className}))(function() { // Multiple operations const data = document.querySelector('#target').textContent; const buttons = document.querySelectorAll('button'); // Interactions buttons[0].click(); // Return results return JSON.stringify({ data, buttonCount: buttons.length });})()(function() { const actions = ["btn1", "btn2", "btn3"]; actions.forEach(id => document.getElementById(id).click()); return "Done";})()(function() { const text = "HELLO"; for (const char of text) { document.getElementById("key-" + char).click(); } document.getElementById("submit").click(); return "Submitted: " + text;})()(function() { const state = { score: document.querySelector('.score')?.textContent, status: document.querySelector('.status')?.className, items: Array.from(document.querySelectorAll('.item')).map(el => ({ text: el.textContent, active: el.classList.contains('active') })) }; return JSON.stringify(state, null, 2);})()sleep 0.5 && {baseDir}/browser-eval.js '...'(function() { return { title: document.title, forms: document.forms.length, buttons: document.querySelectorAll('button').length, inputs: document.querySelectorAll('input').length, mainContent: document.body.innerHTML.slice(0, 3000) };})()