Summary

Closed, Completed

Understand
Reviewed codebase for skill invocation and collapsible elements.
Understand
Verify
Confirmed skill block renders correctly with spacer.
Verify
Edit
Committed and pushed fix for issue #894.
Edit
Cleanup
Closed GitHub issue with confirmation comment.
Cleanup

Analyze GitHub issue(s): https://github.com/badlogic/pi-mono/issues/894

For each issue:

Read the issue in full, including all comments and linked issues/PRs.
For bugs:
- Ignore any root cause analysis in the issue (likely wrong)
- Read all related code files in full (no truncation)
- Trace the code path and identify the actual root cause
- Propose a fix
For feature requests:
- Read all related code files in full (no truncation)
- Propose the most concise implementation approach
- List affected files and changes needed

Do NOT implement unless explicitly asked. Analyze and propose only.

This is a feature request for making skill invocation messages collapsible in the chat output. Let me understand what's being asked:

When a user uses /skill:name commands, the full skill content is displayed
Long skill documentation pushes important content out of view
The request is to add collapsible display similar to branch summaries and tool outputs
Default should be collapsed state

I need to:

Find where skill invocation messages are displayed
Look at how branch summaries and tool outputs implement collapsible display
Propose how to implement similar behavior for skill invocations

Let me start by exploring the codebase to find the relevant files.

Let me explore the codebase to understand how skill invocations are currently handled and how collapsible elements are implemented elsewhere.

Let me read the relevant files to understand the current skill handling and collapsible components:

Readagent-session.ts

Readbranch-summary-message.ts

Let me look at more components to understand the pattern and find how skill messages are handled:

Readtool-execution.ts

Readcustom-message.ts

Readmessages.ts

Let me look at how user messages are rendered in interactive mode:

Readinteractive-mode.ts300 lines

Readuser-message.ts

Now I understand the current implementation. The key insight is:

In agent-session.ts, the _expandSkillCommand method (around line 623) expands /skill:name args commands into full text:
- It reads the skill file content
- Creates a message with header + body + user args
- Returns this as plain text which becomes the user message content
The user message is then rendered by UserMessageComponent which just renders markdown text without any collapsible behavior.
The issue is that skill invocations result in a regular user message with the full skill content, pushing important content out of view.

Looking at how other collapsible components work:

BranchSummaryMessageComponent: Has a separate message type (branchSummary) and renders with collapsed/expanded state
ToolExecutionComponent: Shows tool output collapsed by default with expansion toggle
CustomMessageComponent: Has a separate message type (custom) and supports collapsed/expanded state

For skills, the most elegant solution would be to create a new message type skillInvocation that stores:

skill name
skill file path
skill content
user arguments

Then create a SkillInvocationMessageComponent that renders it collapsible.

Let me look at the message types and session manager to understand how to add a new message type:

Let me look at the session manager to understand how messages are persisted and the session entry types:

Readsession-manager.ts

Now I have a clear picture. Let me summarize what I've found:

Current Behavior

When a user types /skill:name args, _expandSkillCommand() in agent-session.ts reads the skill file and creates a user message containing:
- Header: Skill location: <path>\nReferences are relative to <baseDir>.
- Full skill content (body)
- Optional user args after ---
This expanded text becomes a regular user message rendered by UserMessageComponent, which just renders markdown without any collapsible behavior.

Desired Behavior

The issue requests that skill invocations be collapsible, similar to:

BranchSummaryMessageComponent - has [branch] label and collapsed by default
ToolExecutionComponent - shows collapsed output with expand toggle

Proposed Solution

There are two possible approaches:

Option A: Create a new message type `skillInvocation`

Add SkillInvocationMessage type to messages.ts
Add skill_invocation entry type to session-manager.ts (or use custom_message with customType: "skill")
Create SkillInvocationMessageComponent in interactive mode
Modify _expandSkillCommand to return/emit a skill message instead of expanded text

This is a significant change affecting session persistence and message types.

Option B: Use `CustomMessage` with a special `customType`

The existing CustomMessage system already supports:

Custom types via customType
Display flag
Custom renderers via extensions
Collapsible behavior in CustomMessageComponent

We could:

In _expandSkillCommand, instead of returning plain text, emit a CustomMessage with customType: "skill"
Store skill metadata in details (name, path, content, args)
Register a custom renderer for the "skill" customType
The renderer shows collapsed "[skill] pdf-tools (press X to expand)" by default

However, _expandSkillCommand runs during text expansion before the prompt is sent and returns text that becomes the user message content, making this approach more complex than it initially appears.

Option C: Keep skill as user message, but detect and wrap in collapsible UI

I could detect user messages that are skill invocations by checking if they start with the skill header pattern and render them with SkillInvocationMessageComponent in the UI layer. This is the least invasive approach.

The implementation would involve creating a new collapsible component for skill content, detecting skill invocations in interactive-mode.ts where user messages are rendered, and keeping session persistence unchanged since it remains a regular user message. I'd need to modify three files: a new component file for the collapsible wrapper, the interactive mode file to detect and use the component, and the agent session file to add a constant for the skill header pattern so detection works consistently. Let me check the exact skill message format from _expandSkillCommand to ensure proper detection.

Let me look at the exact format of the skill message header to understand what pattern to detect:

Readagent-session.ts50 lines

Readinteractive-mode.ts100 lines

Readinteractive-mode.ts150 lines

Readagent-session.ts50 lines

Now I have all the information I need. Let me summarize my analysis:

Issue Analysis: #894 - Make skill invocation messages collapsible in chat output

Current Behavior

When a user types /skill:name args:

_expandSkillCommand() in agent-session.ts expands the skill command to:

Skill location: <filePath>References are relative to <baseDir>.
<skill body content>
---
User: <args>

Skill location: <filePath>References are relative to <baseDir>.
<skill body content>
---
User: <args>

This becomes a regular user message stored and displayed via UserMessageComponent
Long skill content pushes important content out of view

Proposed Solution

The most concise implementation is to:

Add a constant for detecting skill messages in agent-session.ts (export the prefix pattern)
Create a new component SkillInvocationMessageComponent in packages/coding-agent/src/modes/interactive/components/ that:
- Detects skill invocation messages by the header pattern
- Shows collapsed state by default: [skill] skill-name (press X to expand)
- Shows full content when expanded
Modify addMessageToChat in interactive-mode.ts to:
- Check if user message starts with skill header pattern
- Use SkillInvocationMessageComponent for skill invocations
- Use UserMessageComponent for regular user messages

Files Affected

packages/coding-agent/src/core/agent-session.ts - Export skill header constant
packages/coding-agent/src/modes/interactive/components/skill-invocation-message.ts - NEW: collapsible skill component
packages/coding-agent/src/modes/interactive/interactive-mode.ts - Detect and use skill component

Implementation Details

1. agent-session.ts:

Export SKILL_MESSAGE_PREFIX = "Skill location: " so the UI layer can identify skill messages.

2. skill-invocation-message.ts (new file): Build this similar to BranchSummaryMessageComponent, parsing the skill name from the file path in the header. Start with expanded state as false, displaying [skill] skill-name (press X to expand) when collapsed, and the full content when expanded.

3. interactive-mode.ts: In addMessageToChat, check if the message starts with the skill prefix and route to the appropriate component accordingly.

When handling user messages, extract the text content and check if it begins with SKILL_MESSAGE_PREFIX. If it does, instantiate SkillInvocationMessageComponent and apply the current toolOutputExpanded state. Otherwise, use the standard UserMessageComponent. Add the text to history if requested. Maintain a reference to skill components to support the expand/collapse toggle functionality.

Analysis of Issue #894: Make skill invocation messages collapsible

Problem

When using /skill:name commands, the full skill content is displayed in chat. Long skill documentation pushes important content out of view, requiring scrolling to reach it.

Current Flow

In agent-session.ts, _expandSkillCommand() transforms skill commands into text:

Skill location: /path/to/skill/SKILL.mdReferences are relative to /path/to/skill.
<full skill body content>
---
User: <args>

Skill location: /path/to/skill/SKILL.mdReferences are relative to /path/to/skill.
<full skill body content>
---
User: <args>

This expanded text becomes a regular user message rendered by UserMessageComponent, which has no collapsible behavior.

Proposed Solution (least invasive)

Create a UI-level detection of skill messages and render them with a collapsible component, similar to BranchSummaryMessageComponent.

Files to modify:

File	Change
`packages/coding-agent/src/core/agent-session.ts`	Export a constant `SKILL_MESSAGE_PREFIX = "Skill location: "` for detection
`packages/coding-agent/src/modes/interactive/components/skill-invocation-message.ts`	NEW - Collapsible component for skill messages
`packages/coding-agent/src/modes/interactive/interactive-mode.ts`	Detect skill messages in `addMessageToChat()` and use new component; track for expand/collapse toggle

Implementation Details

1. New SkillInvocationMessageComponent:

Parse skill name from the "Skill location:" header (extract filename without extension)
Parse user args from after the ---\n\nUser: delimiter (if present)
Collapsed state (default): [skill] skill-name (press X to expand)
Expanded state: full skill content with markdown rendering

2. Changes to interactive-mode.ts:

typescript

// 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);}

// 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);}

Also need to:

Track skill components in a collection (like pendingTools) for expand/collapse toggle
Include them in the handleExpandToolOutputToggle() loop

3. Export constant from agent-session.ts:

Alternative Approaches (not recommended for this case)

New message type: Add skillInvocation role with dedicated session entry type. More invasive, requires schema changes.
Use CustomMessage: Emit skill as CustomMessage with customType: "skill". Requires refactoring _expandSkillCommand to return structured data instead of text.

The UI detection approach is simplest because it keeps session persistence unchanged (still a regular user message) while providing the desired UX improvement.

ok, i think we should change expandSkillCommand so it wraps the skill shit in

followed by the uesr message. that's what gets sent to the llm. in interactive-mode.ts we then check if a user message has

ok, i think we should change expandSkillCommand so it wraps the skill shit in

References are relative to ${skill.baseDir}.

... skill.md content ...

followed by the uesr message. that's what gets sent to the llm. we should also have an exported function in agent-session.ts that takes a string and checks if it has a skill block and extracts the structured data in interactive-mode.ts we then check if a user message has . or is there a way to add detail to a usermessage?

The user wants a cleaner approach:

Change _expandSkillCommand to wrap skill content in XML-like tags:

<skill name="skillname" location="path">References are relative to ${skill.baseDir}.
... skill content ...</skill>
user message/args here

<skill name="skillname" location="path">References are relative to ${skill.baseDir}.
... skill content ...</skill>
user message/args here

Export a utility function from agent-session.ts that parses this structure
In interactive-mode.ts, detect and extract the skill block for collapsible rendering

The user also asks if there's a way to add details to a user message. Let me check the types...

Looking at the code, Message from @mariozechner/pi-ai has:

role: "user"
content: string | (TextContent | ImageContent)[]
timestamp

There's no details field on user messages like there is on toolResult messages. So the XML wrapping approach is the cleanest solution since it:

Keeps the structured info in the message content itself
Works with existing types
Can be parsed in the UI layer

Let me outline the implementation:

Good idea. The XML wrapper is cleaner and self-describing. Let me check if user messages support details...

So UserMessage has no details field. The XML wrapper approach is the cleanest solution. Here's the plan:

Changes:

agent-session.ts:
- Change _expandSkillCommand to wrap content in <skill name="..." location="..."> tags
- Export a parseSkillBlock(text: string) function that returns { skillName, location, baseDir, content, userMessage } | null
interactive-mode.ts:
- In addMessageToChat case "user", call parseSkillBlock
- If skill block found, use SkillInvocationMessageComponent
- Otherwise use UserMessageComponent
New skill-invocation-message.ts:
- Takes parsed skill data
- Renders collapsed/expanded view

The XML format will be:

xml

<skill name="pdf-tools" location="/path/to/SKILL.md">References are relative to /path/to/skill/.
... skill markdown content ...</skill>
User args here (if any)

<skill name="pdf-tools" location="/path/to/SKILL.md">References are relative to /path/to/skill/.
... skill markdown content ...</skill>
User args here (if any)

No details field on UserMessage. The XML wrapper approach is the right call.

Revised Implementation Plan

1. agent-session.ts changes:

typescript

// 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;

// 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 a parser:

typescript

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,  };}

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,  };}

2. interactive-mode.ts changes:

In addMessageToChat(), case "user":

typescript

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;}

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;}

3. New skill-invocation-message.ts:

Similar to BranchSummaryMessageComponent:

Collapsed: [skill] pdf-tools (press X to expand)
Expanded: shows full content + user message (if any)

Files affected:

File	Change
`packages/coding-agent/src/core/agent-session.ts`	Change `_expandSkillCommand` format, export `parseSkillBlock()` and `ParsedSkillBlock`
`packages/coding-agent/src/modes/interactive/components/skill-invocation-message.ts`	NEW
`packages/coding-agent/src/modes/interactive/interactive-mode.ts`	Import parser, detect skill blocks, use new component, track for expand toggle

Want me to implement this?

yes, implement

Readagent-session.ts100 lines

Readbranch-summary-message.ts

Readinteractive-mode.ts100 lines

Let me implement all three changes:

Editedagent-session.ts

Now let me update interactive-mode.ts to import and use the new component:

Editedinteractive-mode.ts

Readinteractive-mode.ts30 lines

Editedinteractive-mode.ts

Now let me run the type check:

Let me check if the exports are properly set up:

Readindex.ts

Let me add the new exports to the index file:

Editedindex.ts

Readindex.ts

Editedindex.ts

Let me update the CHANGELOG:

ReadCHANGELOG.md50 lines

EditedCHANGELOG.md

Implementation complete. Here's a summary of the changes:

Files Modified

1. packages/coding-agent/src/core/agent-session.ts

Added ParsedSkillBlock interface and parseSkillBlock() function for parsing skill blocks from user messages

Changed _expandSkillCommand() to wrap skill content in XML tags:

<skill name="skill-name" location="/path/to/SKILL.md">References are relative to /path/to/skill.
... skill content ...</skill>
user args (if any)

<skill name="skill-name" location="/path/to/SKILL.md">References are relative to /path/to/skill.
... skill content ...</skill>
user args (if any)

2. packages/coding-agent/src/modes/interactive/components/skill-invocation-message.ts (NEW)

Collapsible component for skill messages
Collapsed: [skill] skill-name (press X to expand)
Expanded: full skill content with markdown rendering
User message shown separately (always visible)

3. packages/coding-agent/src/modes/interactive/interactive-mode.ts

Import parseSkillBlock and SkillInvocationMessageComponent
In addMessageToChat() case "user": detect skill blocks and use SkillInvocationMessageComponent instead of UserMessageComponent
Component respects toolOutputExpanded toggle (Ctrl+E)

4. packages/coding-agent/src/modes/interactive/components/index.ts

Export SkillInvocationMessageComponent

5. packages/coding-agent/src/index.ts

Export parseSkillBlock, ParsedSkillBlock, and SkillInvocationMessageComponent

6. packages/coding-agent/CHANGELOG.md

Added entry under [Unreleased] → ### Added

References are relative to /Users/badlogic/.pi/agent/skills/pi-skills/brave-search.

Brave Search

Web search and content extraction using the official Brave Search API. No browser required.

Setup

Requires a Brave Search API account with a free subscription. A credit card is required to create the free subscription (you won't be charged).

Create an account at https://api-dashboard.search.brave.com/register
Create a "Free AI" subscription
Create an API key for the subscription
Add to your shell profile (~/.profile or ~/.zprofile for zsh):
bash
```
export BRAVE_API_KEY=[REDACTED]
```
```
export BRAVE_API_KEY=[REDACTED]
```

Install dependencies (run once):

Search

bash

{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}/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

Options

-n <num> - Number of results (default: 5, max: 20)
--content - Fetch and include page content as markdown
--country <code> - Two-letter country code (default: US)
--freshness <period> - Filter by time:
- pd - Past day (24 hours)
- pw - Past week
- pm - Past month
- py - Past year
- YYYY-MM-DDtoYYYY-MM-DD - Custom date range

Extract Page Content

Fetches a URL and extracts readable content as markdown.

Output Format

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

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

When to Use

Searching for documentation or API references
Looking up facts or current information
Fetching content from specific URLs
Any task requiring web search without interactive browsing

don't do anything, just trying the skill stuff

ok, /var/folders/49/l4171l3n219_xwq30fmyzr8w0000gn/T/TemporaryItems/NSIRD_screencaptureui_MtCNsO/Screenshot\ 2026-01-22\ at\ 22.25.53.png this is not ideal

the user message should not be in the skill message but its own UserMessageComponent, the component can filter out the skill part i guess. not pretty but workable
the skill message should be minimal, so [skill] (ctrl + o to expand) on one line, and ( and to expand) should be dim.

The user is showing me the current output and has two issues:

The user message (after the skill block) should be rendered as a separate UserMessageComponent, not inside the SkillInvocationMessageComponent. The skill component should only show the skill block itself.
The collapsed skill message should be minimal - all on one line: [skill] <name> (ctrl + o to expand) with the hint part dimmed.

Let me fix the SkillInvocationMessageComponent:

Remove the user message rendering from the component
Make the collapsed view a single line with proper dimming
Update interactive-mode.ts to render the user message separately after the skill component

Let me look at the current implementation again and fix it.

Got it. Let me fix both issues:

Editedskill-invocation-message.ts

Editedinteractive-mode.ts

All checks pass. The changes I made:

SkillInvocationMessageComponent:
- Collapsed: single line [skill] skill-name (ctrl+o to expand) with the hint part dimmed
- Expanded: [skill] label + skill name header + full content
- No longer renders the user message (that's now handled separately)
interactive-mode.ts:
- After rendering the skill component, also render the user message as a separate UserMessageComponent if present

Done. Changes:

Collapsed view: Now a single line [skill] skill-name (ctrl+o to expand) with the hint part dimmed
User message: Rendered as a separate UserMessageComponent after the skill block (not inside it)

References are relative to /Users/badlogic/.pi/agent/skills/pi-skills/brave-search.

Brave Search

Web search and content extraction using the official Brave Search API. No browser required.

Setup

Requires a Brave Search API account with a free subscription. A credit card is required to create the free subscription (you won't be charged).

Create an account at https://api-dashboard.search.brave.com/register
Create a "Free AI" subscription
Create an API key for the subscription
Add to your shell profile (~/.profile or ~/.zprofile for zsh):
bash
```
export BRAVE_API_KEY=[REDACTED]
```
```
export BRAVE_API_KEY=[REDACTED]
```

Install dependencies (run once):

Search

bash

{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}/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

Options

-n <num> - Number of results (default: 5, max: 20)
--content - Fetch and include page content as markdown
--country <code> - Two-letter country code (default: US)
--freshness <period> - Filter by time:
- pd - Past day (24 hours)
- pw - Past week
- pm - Past month
- py - Past year
- YYYY-MM-DDtoYYYY-MM-DD - Custom date range

Extract Page Content

Fetches a URL and extracts readable content as markdown.

Output Format

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

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

When to Use

Searching for documentation or API references
Looking up facts or current information
Fetching content from specific URLs
Any task requiring web search without interactive browsing

test

yeah, that's great, please add a space before the skill custom message

Editedinteractive-mode.ts

Done. Added Spacer(1) before the skill component.

References are relative to /Users/badlogic/.pi/agent/skills/pi-skills/browser-tools.

Browser Tools

Chrome DevTools Protocol tools for agent-assisted web automation. These tools connect to Chrome running on :9222 with remote debugging enabled.

Setup

Run once before first use:

Start Chrome

bash

{baseDir}/browser-start.js              # Fresh profile{baseDir}/browser-start.js --profile    # Copy user's profile (cookies, logins)

{baseDir}/browser-start.js              # Fresh profile{baseDir}/browser-start.js --profile    # Copy user's profile (cookies, logins)

Launch Chrome with remote debugging on :9222. Use --profile to preserve user's authentication state.

Navigate

Navigate to URLs. Use --new flag to open in a new tab instead of reusing current tab.

Evaluate JavaScript

bash

{baseDir}/browser-eval.js 'document.title'{baseDir}/browser-eval.js 'document.querySelectorAll("a").length'

{baseDir}/browser-eval.js 'document.title'{baseDir}/browser-eval.js 'document.querySelectorAll("a").length'

Execute JavaScript in the active tab. Code runs in async context. Use this to extract data, inspect page state, or perform DOM operations programmatically.

Screenshot

Capture current viewport and return temporary file path. Use this to visually inspect page state or verify UI changes.

Pick Elements

IMPORTANT: Use this tool when the user wants to select specific DOM elements on the page. This launches an interactive picker that lets the user click elements to select them. The user can select multiple elements (Cmd/Ctrl+Click) and press Enter when done. The tool returns CSS selectors for the selected elements.

Common use cases:

User says "I want to click that button" → Use this tool to let them select it
User says "extract data from these items" → Use this tool to let them select the elements
When you need specific selectors but the page structure is complex or ambiguous

Cookies

Display all cookies for the current tab including domain, path, httpOnly, and secure flags. Use this to debug authentication issues or inspect session state.

Extract Page Content

Navigate to a URL and extract readable content as markdown. Uses Mozilla Readability for article extraction and Turndown for HTML-to-markdown conversion. Works on pages with JavaScript content (waits for page to load).

When to Use

Testing frontend code in a real browser
Interacting with pages that require JavaScript
When user needs to visually see or interact with a page
Debugging authentication or session issues
Scraping dynamic content that requires JS execution

Efficiency Guide

DOM Inspection Over Screenshots

Don't take screenshots to see page state. Do parse the DOM directly:

javascript

// 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}))

// 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}))

Complex Scripts in Single Calls

Wrap everything in an IIFE to run multi-statement code:

javascript

(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() {  // 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 });})()

Batch Interactions

Don't make separate calls for each click. Do batch them:

javascript

(function() {  const actions = ["btn1", "btn2", "btn3"];  actions.forEach(id => document.getElementById(id).click());  return "Done";})()

(function() {  const actions = ["btn1", "btn2", "btn3"];  actions.forEach(id => document.getElementById(id).click());  return "Done";})()

Typing/Input Sequences

javascript

(function() {  const text = "HELLO";  for (const char of text) {    document.getElementById("key-" + char).click();  }  document.getElementById("submit").click();  return "Submitted: " + text;})()

(function() {  const text = "HELLO";  for (const char of text) {    document.getElementById("key-" + char).click();  }  document.getElementById("submit").click();  return "Submitted: " + text;})()

Reading App/Game State

Extract structured state in one call:

javascript

(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);})()

(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);})()

Waiting for Updates

If DOM updates after actions, add a small delay with bash:

Investigate Before Interacting

Always start by understanding the page structure:

javascript

(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)  };})()

(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)  };})()

Then target specific elements based on what you find.

Looks like it's working well with the spacer. The skill block displays as a single collapsible line, and since there's no user message after the skill command, nothing else is rendered below it.

jupp, looking good. commit and push, and close the issue with "Thanks for the suggestion, implemented in main2

>cd /Users/badlogic/workspaces/pi-mono && git add \
  packages/coding-agent/CHANGELOG.md \
  packages/coding-agent/src/core/agent-session.ts \
  packages/coding-agent/src/index.ts \
  packages/coding-agent/src/modes/interactive/components/index.ts \
  packages/coding-agent/src/modes/interactive/components/skill-invocation-message.ts \
  packages/coding-agent/src/modes/interactive/interactive-mode.ts && \
git commit -m "feat(coding-agent): make skill invocation messages collapsible

- Add ParsedSkillBlock interface and parseSkillBlock() function
- Change skill expansion to use XML-style <skill> tags
- Add SkillInvocationMessageComponent for collapsible display
- Collapsed: single line with skill name and expand hint
- User message rendered separately after skill block

Fixes #894"

Done. Committed, pushed, and commented on the issue. The issue was already auto-closed by the Fixes #894 in the commit message.