getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-18 13:03:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(coding-agent): make skill invocation messages collapsible

Browse source 
- 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
This commit is contained in:
Mario Zechner 2026-01-22 22:29:24 +01:00
parent f54e71999f
commit 7868b25a2b
6 changed files with 113 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/coding-agent/src/modes/interactive/components/index.ts
View file

@ -21,6 +21,7 @@ export { type ModelsCallbacks, type ModelsConfig, ScopedModelsSelectorComponent
export { SessionSelectorComponent } from "./session-selector.js";
export { type SettingsCallbacks, type SettingsConfig, SettingsSelectorComponent } from "./settings-selector.js";
export { ShowImagesSelectorComponent } from "./show-images-selector.js";
export { SkillInvocationMessageComponent } from "./skill-invocation-message.js";
export { ThemeSelectorComponent } from "./theme-selector.js";
export { ThinkingSelectorComponent } from "./thinking-selector.js";
export { ToolExecutionComponent, type ToolExecutionOptions } from "./tool-execution.js";

55
packages/coding-agent/src/modes/interactive/components/skill-invocation-message.ts Normal file
View file

@ -0,0 +1,55 @@
import { Box, Markdown, type MarkdownTheme, Text } from "@mariozechner/pi-tui";
import type { ParsedSkillBlock } from "../../../core/agent-session.js";
import { getMarkdownTheme, theme } from "../theme/theme.js";
import { editorKey } from "./keybinding-hints.js";
/**
* Component that renders a skill invocation message with collapsed/expanded state.
* Uses same background color as custom messages for visual consistency.
* Only renders the skill block itself - user message is rendered separately.
*/
export class SkillInvocationMessageComponent extends Box {
private expanded = false;
private skillBlock: ParsedSkillBlock;
private markdownTheme: MarkdownTheme;
constructor(skillBlock: ParsedSkillBlock, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
super(1, 1, (t) => theme.bg("customMessageBg", t));
this.skillBlock = skillBlock;
this.markdownTheme = markdownTheme;
this.updateDisplay();
}
setExpanded(expanded: boolean): void {
this.expanded = expanded;
this.updateDisplay();
}
override invalidate(): void {
super.invalidate();
this.updateDisplay();
}
private updateDisplay(): void {
this.clear();
if (this.expanded) {
// Expanded: label + skill name header + full content
const label = theme.fg("customMessageLabel", `\x1b[1m[skill]\x1b[22m`);
this.addChild(new Text(label, 0, 0));
const header = `**${this.skillBlock.name}**\n\n`;
this.addChild(
new Markdown(header + this.skillBlock.content, 0, 0, this.markdownTheme, {
color: (text: string) => theme.fg("customMessageText", text),
}),
);
} else {
// Collapsed: single line - [skill] name (hint to expand)
const line =
theme.fg("customMessageLabel", `\x1b[1m[skill]\x1b[22m `) +
theme.fg("customMessageText", this.skillBlock.name) +
theme.fg("dim", ` (${editorKey("expandTools")} to expand)`);
this.addChild(new Text(line, 0, 0));
}
}
}