feat(web): render skill calls as inline chips

[maria-rcks]

What Changed

when you send a message that contains a valid $skill snippet, it gets rendered as such

Why

so it looks more cohesive and nice

UI Changes

before

after

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Note

Render skill $<name> tokens as inline chips in chat messages

• Adds a new SkillInlineText component that scans text for $<skillName> tokens and replaces matches with styled skill chips, skipping code and a elements in markdown contexts.
• Threads the active provider's skills list from ChatView through MessagesTimeline and into both user and assistant message renderers.
• Extracts the shared SKILL_CHIP_ICON_SVG constant into composerInlineChip.ts so both the composer and the new chip component use the same icon markup.

^{Macroscope summarized e5fe707.}

---

Note

Low Risk
Low risk UI-only change that affects message rendering; main potential issues are incorrect regex matching or performance from per-render token scanning.

Overview
Adds inline rendering of valid $skill tokens as styled chips across the chat UI.

Assistant Markdown rendering (ChatMarkdown) now accepts a skills list and rewrites text nodes in paragraphs/list items to replace $skill mentions, while skipping links and code. The message timeline passes active provider skills down and wraps user-message text segments similarly, including around inline terminal-context labels.

Refactors chip styling assets by moving the skill icon SVG constant to composerInlineChip.ts, and introduces a shared SkillInlineText/renderSkillInlineMarkdownChildren helper to keep chip rendering consistent.

^{Reviewed by Cursor Bugbot for commit e5fe707. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 912f4167-7a1b-429e-9bee-30b9adfd1873

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved

This PR adds purely presentational rendering logic to display skill tokens as styled chips. The changes are self-contained, thread existing data through components, and have no business logic or security implications.

^{You can customize Macroscope's approvability policy. Learn more.}