feat(web): style composer skill chips like panel tabs with a hover cl…

apps/web/src/components/ComposerPromptEditorTiptap.skill.browser.test.tsx

@@ -0,0 +1,58 @@
+import type { Editor } from "@tiptap/core";
+import type { ServerProviderSkill } from "@t3tools/contracts";
+import { createRef } from "react";
+import { expect, it } from "vite-plus/test";
+
+import { serializeEditorDoc } from "~/composer-rich-text-doc";
+import { render } from "../../test/render";
+import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "./ComposerPromptEditor";
+
+const deslopSkill: ServerProviderSkill = {
+  name: "deslop",
+  path: "/repo/.claude/skills/deslop/SKILL.md",
+  enabled: true,
+  displayName: "Deslop",
+  description: "Remove AI writing patterns.",
+};
+
+function countSkillNodes(editor: Editor): number {
+  let count = 0;
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "composer-skill") count += 1;
+  });
+  return count;
+}
+
+it("removes only the skill chip when its close button is clicked", async () => {
+  // The composer only builds a skill node when the token is followed by
+  // whitespace (SKILL_TOKEN_REGEX requires `(?=\s)`), so the trailing word
+  // is what turns "$deslop" into a chip.
+  const value = "Clean it up $deslop please";
+  await using screen = await render(
+    <ComposerPromptEditor
+      editorRef={createRef<ComposerPromptEditorHandle>()}
+      value={value}
+      cursor={value.length}
+      richTextEnabled
+      contextRecords={new Map()}
+      skills={[deslopSkill]}
+      disabled={false}
+      placeholder=""
+      onChange={() => {}}
+      onPaste={() => {}}
+    />,
+  );
+  const element = screen.container.querySelector<HTMLElement & { editor: Editor }>(".tiptap");
+  if (!element) throw new Error("Composer did not mount");
+  const editor = element.editor;
+  expect(serializeEditorDoc(editor.state.doc).value).toBe("Clean it up $deslop please");
+  expect(countSkillNodes(editor)).toBe(1);
+
+  await screen.getByRole("button", { name: "Remove Deslop skill" }).click();
+
+  expect(countSkillNodes(editor)).toBe(0);
+  const nextValue = serializeEditorDoc(editor.state.doc).value;
+  expect(nextValue).not.toContain("$deslop");
+  expect(nextValue).toContain("Clean it up");
+  expect(nextValue).toContain("please");
+});

apps/web/src/components/ComposerPromptEditorTiptap.tsx

@@ -338,7 +338,7 @@ function composerSkillMeta(
   };
 }
 
-function ComposerSkillNodeView({ node }: NodeViewProps) {
+function ComposerSkillNodeView({ node, editor, getPos }: NodeViewProps) {
   const actions = use(ComposerContextActionsContext);
   const skills = use(RichComposerSkillsContext);
   const skillName = (node.attrs.skillName as string) ?? "";
@@ -350,6 +350,18 @@ function ComposerSkillNodeView({ node }: NodeViewProps) {
   const skillLabel = skill
     ? formatProviderSkillDisplayName(skill)
     : (node.attrs.skillLabel as string) || skillName;
+  const removeSkill = () => {
+    if (!editor.isEditable) return;
+    const pos = typeof getPos === "function" ? getPos() : null;
+    if (typeof pos !== "number") return;
+    const current = editor.state.doc.nodeAt(pos);
+    if (!current || current.type.name !== "composer-skill") return;
+    editor
+      .chain()
+      .focus()
+      .deleteRange({ from: pos, to: pos + current.nodeSize })
+      .run();
+  };
   return (
     <NodeViewWrapper as="span" className={CHIP_NODE_SELECTION_CLASS_NAME}>
       <SkillChipPopover
@@ -358,6 +370,7 @@ function ComposerSkillNodeView({ node }: NodeViewProps) {
         onViewInstructions={
           skill?.path && actions.environmentId ? () => actions.openMention(skill.path) : undefined
         }
+        onRemove={removeSkill}
       />
     </NodeViewWrapper>
   );

apps/web/src/components/chat/SkillInlineText.tsx

@@ -4,9 +4,11 @@ import { Children, cloneElement, isValidElement, type ReactNode } from "react";
 import { matchInlineSkills } from "@t3tools/shared/inlineSkills";
 
 import { useRightPanelStore } from "~/rightPanelStore";
+import { ContextChip, ContextChipLabel } from "../ContextChip";
 import { SKILL_CHIP_ICON_SVG } from "../composerInlineChip";
-import { ContextChipPopover } from "../contextChipParts";
 import { Button } from "../ui/button";
+import { PanelTabCloseButton } from "../ui/panel-tab-close-button";
+import { Popover, PopoverPopup, PopoverTitle, PopoverTrigger } from "../ui/popover";
 
 function SkillInlineText(props: {
   text: string;
@@ -83,20 +85,44 @@ export function skillInstructionsOpener(
   return () => useRightPanelStore.getState().openFile(threadRef, skill.path);
 }
 
+/**
+ * Shared shell for the skill chip in the composer and in sent messages, so
+ * both surfaces keep the same RightPanelTab look; the composer adds pointer
+ * and hover classes via `className`. Border and tint colors reuse the
+ * ContextChip skill accent so the chip still reads as the old purple chip.
+ */
+function SkillTabChipShell(props: React.ComponentProps<typeof ContextChip>) {
+  return (
+    <ContextChip
+      kind="skill"
+      className="group/tab h-6 max-w-36 gap-0.5 rounded-md border pr-2 pl-1.5 text-xs bg-accent/40 text-foreground [button:enabled&]:hover:bg-accent/60"
+      {...props}
+    />
+  );
+}
+
+/**
+ * Resting tinted badge; PanelTabCloseButton swaps it for its X on hover
+ * (group/tab), sent messages keep it permanently.
+ */
+function SkillTabChipBadge() {
+  return (
+    <span className="flex size-3 shrink-0 items-center justify-center rounded-[5px] bg-(--context-chip-accent)/17 text-(--context-chip-foreground) [&_svg]:size-2 [&_svg]:[stroke-width:2.5]">
+      <SkillChipIcon />
+    </span>
+  );
+}
+
 export function SkillChipPopover(props: {
   label: string;
   description: string | null | undefined;
   copyMarkdown?: string | undefined;
   onViewInstructions: (() => void) | undefined;
+  onRemove?: (() => void) | undefined;
 }) {
-  return (
-    <ContextChipPopover
-      kind="skill"
-      icon={<SkillChipIcon />}
-      label={props.label}
-      accessibleLabel={`Skill ${props.label}`}
-      copyMarkdown={props.copyMarkdown}
-    >
+  const details = (
+    <>
+      <PopoverTitle className="sr-only">{`Skill ${props.label}`}</PopoverTitle>
       <div className="space-y-3 p-2 text-sm">
         <p className="font-medium">{props.label}</p>
         <p>{props.description || "No description is available for this skill."}</p>
@@ -106,7 +132,45 @@ export function SkillChipPopover(props: {
           </Button>
         ) : null}
       </div>
-    </ContextChipPopover>
+    </>
+  );
+  return (
+    <Popover>
+      {props.onRemove ? (
+        <SkillTabChipShell className="cursor-pointer hover:bg-accent/60">
+          <PanelTabCloseButton label={`Remove ${props.label} skill`} onClick={props.onRemove}>
+            <SkillTabChipBadge />
+          </PanelTabCloseButton>
+          <PopoverTrigger
+            render={
+              <button
+                type="button"
+                className="flex min-w-0 cursor-pointer items-center"
+                aria-label={`Skill ${props.label}. Show details`}
+              />
+            }
+          >
+            <ContextChipLabel>{props.label}</ContextChipLabel>
+          </PopoverTrigger>
+        </SkillTabChipShell>
+      ) : (
+        <PopoverTrigger
+          render={
+            <SkillTabChipShell
+              render={<button type="button" />}
+              aria-label={`Skill ${props.label}. Show details`}
+              data-markdown-copy={props.copyMarkdown}
+            />
+          }
+        >
+          <SkillTabChipBadge />
+          <ContextChipLabel>{props.label}</ContextChipLabel>
+        </PopoverTrigger>
+      )}
+      <PopoverPopup side="top" width="lg" padding="compact">
+        {details}
+      </PopoverPopup>
+    </Popover>
   );
 }