fix(ui): collapse Pi skill invocations

Author: jonathanlab

packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx

@@ -87,6 +87,7 @@ import { extractCanvasInstructions } from "@posthog/ui/features/sessions/compone
 import { extractChannelContext } from "@posthog/ui/features/sessions/components/session-update/channelContext";
 import { extractCustomInstructions } from "@posthog/ui/features/sessions/components/session-update/customInstructions";
 import {
+  collapsePiSkillInvocation,
   hasFileMentions,
   MentionChip,
   parseFileMentions,
@@ -361,9 +362,9 @@ function UserBubble({
     () => extractCustomInstructions(afterCanvasInstructions),
     [afterCanvasInstructions],
   );
-  const displayContent = customInstructions
-    ? customInstructions.stripped
-    : afterCanvasInstructions;
+  const displayContent = collapsePiSkillInvocation(
+    customInstructions ? customInstructions.stripped : afterCanvasInstructions,
+  );
   const showChannelContextTag = !!channelContext && bluebirdEnabled;
   const showCanvasInstructionsTag = !!canvasInstructions && bluebirdEnabled;
   const showHeaderChips = showChannelContextTag || showCanvasInstructionsTag;

packages/ui/src/features/sessions/components/session-update/UserMessage.test.tsx

@@ -30,6 +30,9 @@ const PROMPT_WITH_CONTEXT =
 const PROMPT_WITH_CANVAS_INSTRUCTIONS =
   "add a retention chart\n\n<canvas_generation_instructions>\nauthoring contract\n</canvas_generation_instructions>";
 
+const PROMPT_WITH_PI_SKILL =
+  '<skill name="code-review" location="/skills/code-review/SKILL.md">\nReferences are relative to /skills/code-review.\n\n# Review\n\nInspect the diff.\n</skill>\n\nReview this pull request.';
+
 describe("UserMessage", () => {
   // useFeatureFlag falls back to import.meta.env.DEV, which is true under
   // vitest. Pin DEV off in the flag-gating cases so they exercise the flag
@@ -79,6 +82,14 @@ describe("UserMessage", () => {
     expect(screen.queryByText(/channel_context/)).not.toBeInTheDocument();
   });
 
+  it("renders Pi skill invocations as a command chip", () => {
+    renderWithFlags(<UserMessage content={PROMPT_WITH_PI_SKILL} />, true);
+
+    expect(screen.getByText("/code-review")).toBeInTheDocument();
+    expect(screen.getByText("Review this pull request.")).toBeInTheDocument();
+    expect(screen.queryByText("Inspect the diff.")).not.toBeInTheDocument();
+  });
+
   it("shows the canvas-instructions tag when project-bluebird is enabled", () => {
     vi.stubEnv("DEV", false);
     renderWithFlags(

packages/ui/src/features/sessions/components/session-update/UserMessage.tsx

@@ -20,6 +20,7 @@ import { extractCanvasInstructions } from "./canvasInstructions";
 import { extractChannelContext } from "./channelContext";
 import { extractCustomInstructions } from "./customInstructions";
 import {
+  collapsePiSkillInvocation,
   hasFileMentions,
   MentionChip,
   parseFileMentions,
@@ -92,9 +93,9 @@ export const UserMessage = memo(function UserMessage({
     () => extractCustomInstructions(afterCanvasInstructions),
     [afterCanvasInstructions],
   );
-  const displayContent = customInstructions
-    ? customInstructions.stripped
-    : afterCanvasInstructions;
+  const displayContent = collapsePiSkillInvocation(
+    customInstructions ? customInstructions.stripped : afterCanvasInstructions,
+  );
   const showChannelContextTag = !!channelContext && bluebirdEnabled;
   const showCanvasInstructionsTag = !!canvasInstructions && bluebirdEnabled;
   const openChannelContextInSplit = usePanelLayoutStore(

packages/ui/src/features/sessions/components/session-update/parseFileMentions.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { collapsePiSkillInvocation } from "./parseFileMentions";
+
+describe("collapsePiSkillInvocation", () => {
+  it("replaces Pi skill instructions with the command and user request", () => {
+    expect(
+      collapsePiSkillInvocation(
+        '<skill name="code-review" location="/skills/code-review/SKILL.md">\nReferences are relative to /skills/code-review.\n\n# Review\n\nInspect the diff.\n</skill>\n\nReview this pull request.',
+      ),
+    ).toBe("/code-review\n\nReview this pull request.");
+  });
+
+  it("keeps non-skill messages unchanged", () => {
+    expect(collapsePiSkillInvocation("Review this pull request.")).toBe(
+      "Review this pull request.",
+    );
+  });
+});

packages/ui/src/features/sessions/components/session-update/parseFileMentions.tsx

@@ -16,6 +16,19 @@ const MENTION_TAG_REGEX =
 const MENTION_TAG_TEST =
   /<(?:file\s+path|folder\s+path|github_issue\s+number|github_pr\s+number|error_context\s+label)="[^"]+"/;
 const SLASH_COMMAND_START = /^\/([a-zA-Z][\w-]*)(?=\s|$)/;
+const PI_SKILL_INVOCATION =
+  /^<skill name="([^"]+)" location="[^"]+">\n[\s\S]*?\n<\/skill>(?:\n\n([\s\S]+))?$/;
+
+export function collapsePiSkillInvocation(content: string): string {
+  const match = content.match(PI_SKILL_INVOCATION);
+  if (!match) {
+    return content;
+  }
+
+  const name = unescapeXmlAttr(match[1]);
+  const userMessage = match[2]?.trim();
+  return userMessage ? `/${name}\n\n${userMessage}` : `/${name}`;
+}
 
 const inlineComponents: Components = {
   ...baseComponents,