From 266d70cc4d887b7459ec6557c430ec7bb92bd3fc Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 21:33:01 -0700
Subject: [PATCH] refactor(web): context chips render through one ContextChip
 component (#13192)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/ChatMarkdown.tsx      |  52 ++---
 .../components/ComposerPromptEditorTiptap.tsx |  48 ++---
 apps/web/src/components/ContextChip.tsx       | 131 ++++++++++++
 .../components/chat/AssistantCitationChip.tsx |  36 +---
 apps/web/src/components/chat/FileTagChip.tsx  |  25 +--
 .../src/components/chat/MessagesTimeline.tsx  | 144 +++----------
 .../src/components/chat/SkillInlineText.tsx   |  37 ++--
 .../chat/TerminalContextInlineChip.tsx        |  50 +----
 .../composerContextPresentation.tsx           |  98 +++------
 apps/web/src/components/composerInlineChip.ts |  78 -------
 apps/web/src/components/contextChipParts.tsx  | 190 ++++++------------
 apps/web/src/components/ui/button.tsx         |   4 +-
 apps/web/src/index.css                        |  17 +-
 scripts/lint-restyle-ceiling.ts               |   2 +-
 14 files changed, 333 insertions(+), 579 deletions(-)
 create mode 100644 apps/web/src/components/ContextChip.tsx

diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 52aed78e66635045e3de791c40fe8474b5f2d7e4..ef833e0e679489d78bb53bb0bdd7bed626bc4a77 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -105,7 +105,7 @@ import { markdownImageGallery, markdownImageItems } from "./chat/markdownImageGa
 import { MediaVideoPlayer } from "./media/MediaVideoPlayer";
 import { MediaActions, type MediaActionSource } from "./media/MediaActions";
 import { resolveProtocolRelativeMediaUrl } from "./media/mediaContent";
-import { CHAT_FILE_TAG_CHIP_CLASS_NAME, FileTagChipContent } from "./chat/FileTagChip";
+import { FileTagChipContent } from "./chat/FileTagChip";
 import { PierreEntryIcon } from "./chat/PierreEntryIcon";
 import {
   revealInFileExplorerLabelForKind,
@@ -118,6 +118,7 @@ import {
 import { hasSpecificPierreIconForFileName, syntheticFileNameForLanguageId } from "../pierre-icons";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import { Button } from "./ui/button";
+import { ContextChip } from "./ContextChip";
 import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./ui/collapsible";
 import { ScrollArea } from "./ui/scroll-area";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "./ui/menu";
@@ -1156,11 +1157,9 @@ interface MarkdownFileLinkProps {
   /** Platform-specific menu label ("Reveal in Finder", ...); required for the
       reveal item to show. */
   revealLabel?: string | undefined;
-  className?: string | undefined;
 }
 
-const MARKDOWN_FILE_CHIP_CLASS_NAME = "chat-markdown-file-link";
-const MARKDOWN_FILE_LINK_CLASS_NAME = `${MARKDOWN_FILE_CHIP_CLASS_NAME} cursor-pointer transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70`;
+const MARKDOWN_FILE_LINK_CLASS_NAME = "chat-markdown-file-link";
 
 function pathParentSegments(path: string): string[] {
   const normalized = path.replaceAll("\\", "/");
@@ -1895,7 +1894,6 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
   onOpenMedia,
   onReveal,
   revealLabel,
-  className,
 }: MarkdownFileLinkProps) {
   const handleOpenInEditor = useCallback(() => {
     if (!onOpen) {
@@ -2165,13 +2163,10 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
       <TooltipTrigger
         render={
           hasPrimaryAction ? (
-            <a
-              href={href}
-              className={cn(
-                CHAT_FILE_TAG_CHIP_CLASS_NAME,
-                MARKDOWN_FILE_LINK_CLASS_NAME,
-                className,
-              )}
+            <ContextChip
+              kind="mention"
+              render={<a href={href} />}
+              className={MARKDOWN_FILE_LINK_CLASS_NAME}
               data-markdown-copy={copyMarkdown}
               onClick={(event) => {
                 event.preventDefault();
@@ -2188,25 +2183,21 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
               }}
               onContextMenu={handleContextMenu}
             >
-              <FileTagChipContent path={iconPath} label={label} theme={theme} selectable />
-            </a>
+              <FileTagChipContent path={iconPath} label={label} theme={theme} />
+            </ContextChip>
           ) : (
-            <button
-              type="button"
+            <ContextChip
+              kind="mention"
+              render={<button type="button" />}
               aria-label={`File options for ${label}`}
               aria-haspopup="menu"
-              className={cn(
-                CHAT_FILE_TAG_CHIP_CLASS_NAME,
-                MARKDOWN_FILE_LINK_CLASS_NAME,
-                "select-text",
-                className,
-              )}
+              className={cn(MARKDOWN_FILE_LINK_CLASS_NAME, "select-text")}
               data-markdown-copy={copyMarkdown}
               onClick={handleContextMenu}
               onContextMenu={handleContextMenu}
             >
-              <FileTagChipContent path={iconPath} label={label} theme={theme} selectable />
-            </button>
+              <FileTagChipContent path={iconPath} label={label} theme={theme} />
+            </ContextChip>
           )
         }
       />
@@ -2242,8 +2233,7 @@ function areMarkdownFileLinkPropsEqual(
     previous.onOpenInBrowser === next.onOpenInBrowser &&
     previous.onOpenMedia === next.onOpenMedia &&
     previous.onReveal === next.onReveal &&
-    previous.revealLabel === next.revealLabel &&
-    previous.className === next.className
+    previous.revealLabel === next.revealLabel
   );
 }
 
@@ -2571,12 +2561,7 @@ function useChatMarkdownState({
     [cwd, findWorkspaceBasenameMatch, revealFileInFileManager],
   );
   const fileLinkChip = useCallback(
-    (
-      fileLinkMeta: MarkdownFileLinkMeta,
-      copyMarkdown: string,
-      className?: string,
-      mediaSource?: string,
-    ) => {
+    (fileLinkMeta: MarkdownFileLinkMeta, copyMarkdown: string, mediaSource?: string) => {
       const parentSuffix = fileLinkParentSuffixByPath.get(
         fileLinkMeta.filePath.replaceAll("\\", "/"),
       );
@@ -2633,7 +2618,6 @@ function useChatMarkdownState({
               ? () => openMarkdownFileInPreview(fileLinkMeta.filePath)
               : undefined
           }
-          className={className}
         />
       );
     },
@@ -3068,7 +3052,6 @@ const CHAT_MARKDOWN_COMPONENTS = {
     return fileLinkChip(
       fileLinkMeta,
       `[${fileLinkMeta.basename}](${normalizedHref})`,
-      props.className,
       normalizedHref,
     );
   },
@@ -3085,7 +3068,6 @@ const CHAT_MARKDOWN_COMPONENTS = {
         return fileLinkChip(
           fileLinkMeta,
           `\`${codeText}\``,
-          undefined,
           inlineCodeFilePathCandidate(codeText) ?? codeText.trim(),
         );
       }
diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
index ec9b9e07e2fbc03ccc6e394256c971c4557e498f..8af2d18b310e7bbf5513040bfe5bb208bd789d15 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
@@ -58,18 +58,13 @@ import {
 import { collectInlineContextIds } from "~/lib/composerContextReferences";
 import { cn, isMacPlatform } from "~/lib/utils";
 import { basenameOfPath } from "~/pierre-icons";
-import {
-  COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
-  COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME,
-  SKILL_CHIP_ICON_SVG,
-} from "./composerInlineChip";
-import { FILE_TAG_CHIP_CLASS_NAME, FileTagChipContent } from "./chat/FileTagChip";
+import { FileTagChipContent } from "./chat/FileTagChip";
+import { SkillChipIcon } from "./chat/SkillInlineText";
 import { AssistantCitationChip } from "./chat/AssistantCitationChip";
 import { getTimelinePageScrollKey } from "./chat/pageScrollController";
 import { ContextChipPopover } from "./contextChipParts";
 import { Button } from "./ui/button";
+import { ContextChip } from "./ContextChip";
 import {
   ComposerContextActionsContext,
   ComposerContextReferenceChip,
@@ -190,6 +185,13 @@ function resolvedThemeFromDocument(): "light" | "dark" {
 
 // ── Inline atom nodes (chips) ─────────────────────────────────────────────
 
+/**
+ * Wraps an inline chip node view: keeps the caret and text selection out of the chip and
+ * paints the editor's node selection over it.
+ */
+const CHIP_NODE_SELECTION_CLASS_NAME =
+  "relative inline-flex select-none items-center align-middle leading-none data-[composer-chip-selected]:after:pointer-events-none data-[composer-chip-selected]:after:absolute data-[composer-chip-selected]:after:inset-0 data-[composer-chip-selected]:after:rounded-[6px] data-[composer-chip-selected]:after:bg-[Highlight] data-[composer-chip-selected]:after:opacity-30 data-[composer-chip-selected]:after:content-['']";
+
 const ComposerMentionExtension = Node.create({
   name: "composer-mention",
   group: "inline",
@@ -217,11 +219,11 @@ function ComposerMentionNodeView({ node }: NodeViewProps) {
   const actions = use(ComposerContextActionsContext);
   const path = (node.attrs.path as string) ?? "";
   const chip = (
-    <Button
-      variant="chip"
+    <ContextChip
+      kind="mention"
+      render={<button type="button" />}
       onClick={() => actions.openMention(path)}
       aria-label={`Preview ${path}`}
-      className={`${FILE_TAG_CHIP_CLASS_NAME} cursor-pointer focus-visible:outline-2`}
       contentEditable={false}
       spellCheck={false}
       data-composer-mention-chip="true"
@@ -231,10 +233,10 @@ function ComposerMentionNodeView({ node }: NodeViewProps) {
         label={basenameOfPath(path)}
         theme={resolvedThemeFromDocument()}
       />
-    </Button>
+    </ContextChip>
   );
   return (
-    <NodeViewWrapper as="span" className={COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME}>
+    <NodeViewWrapper as="span" className={CHIP_NODE_SELECTION_CLASS_NAME}>
       <Tooltip>
         <TooltipTrigger render={chip} />
         <TooltipPopup side="top">{path}</TooltipPopup>
@@ -275,20 +277,12 @@ function ComposerSkillNodeView({ node }: NodeViewProps) {
   const skillDescription = (node.attrs.skillDescription as string | null) ?? null;
   const skill = skills.find((candidate) => candidate.name === skillName);
   return (
-    <NodeViewWrapper as="span" className={COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME}>
+    <NodeViewWrapper as="span" className={CHIP_NODE_SELECTION_CLASS_NAME}>
       <ContextChipPopover
+        kind="skill"
+        icon={<SkillChipIcon />}
+        label={skillLabel}
         accessibleLabel={`Skill ${skillLabel}`}
-        triggerClassName={COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME}
-        chip={
-          <>
-            <span
-              aria-hidden="true"
-              className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
-              dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}
-            />
-            <span className={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}>{skillLabel}</span>
-          </>
-        }
       >
         <div className="space-y-3 p-2 text-sm">
           <p className="font-medium">{skillLabel}</p>
@@ -380,7 +374,7 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
   return (
     <NodeViewWrapper
       as="span"
-      className="inline-flex min-w-0 max-w-full"
+      className="inline-flex min-w-0 max-w-full select-none"
       contentEditable={false}
       spellCheck={false}
       data-composer-citation-chip="true"
@@ -435,7 +429,7 @@ const ComposerContextReferenceExtension = Node.create({
 
 function ComposerContextReferenceNodeView({ node }: NodeViewProps) {
   return (
-    <NodeViewWrapper as="span" className={COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME}>
+    <NodeViewWrapper as="span" className={CHIP_NODE_SELECTION_CLASS_NAME}>
       <ComposerContextReferenceChip
         kind={(node.attrs.kind as string) ?? ""}
         contextId={(node.attrs.contextId as string) ?? ""}
diff --git a/apps/web/src/components/ContextChip.tsx b/apps/web/src/components/ContextChip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7e9385295832058b9e6cc137eab54dae9c39e0cf
--- /dev/null
+++ b/apps/web/src/components/ContextChip.tsx
@@ -0,0 +1,131 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+/**
+ * The inline pill for one piece of chat context. It lives with the chat components rather than
+ * in components/ui because it is one feature's look, not a generic primitive.
+ *
+ * An inline pill for one piece of context (a file, mention, terminal excerpt, pull request,
+ * skill…) that sits in running text, both in the composer and in sent messages.
+ *
+ * Metrics are in em so the chip scales with the text around it (the composer honors the
+ * prompt font-size preference). Each kind keeps one restrained color identity: every accent
+ * shares a lightness so no kind reads heavier than another, and only hue carries identity.
+ * A consumer may override `--context-chip-accent` through `style` for a color that comes
+ * from content, such as an image's average color.
+ *
+ * Renders a span by default. Render it as a button, link or popover/tooltip trigger to make it
+ * interactive; the hover tint follows from that, not from a prop. Anything focusable (including a
+ * span with tabIndex for a tooltip) gets the focus outline.
+ */
+const contextChipVariants = cva(
+  "inline-flex h-[1.41em] max-w-full items-center gap-[0.33em] rounded-[0.5em] border px-[0.5em] align-middle font-medium text-[0.86em] leading-none [&_svg]:block [&_svg]:size-[1.17em] [&_svg]:shrink-0 [&_svg]:self-center [button&,a&,[data-popup-open]&]:cursor-pointer [button&,a&]:transition-colors [button&,a&]:motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--contrast-foreground)] disabled:cursor-default",
+  {
+    defaultVariants: { kind: "neutral" },
+    variants: {
+      kind: {
+        neutral: "border-border/70 bg-accent/40 text-foreground",
+        image: "[--context-chip-accent:oklch(0.62_0.16_16)]",
+        video: "[--context-chip-accent:oklch(0.62_0.16_48)]",
+        file: "[--context-chip-accent:oklch(0.62_0.136_237)]",
+        mention: "[--context-chip-accent:oklch(0.62_0.11_215)]",
+        terminal: "[--context-chip-accent:oklch(0.62_0.134_163)]",
+        element: "[--context-chip-accent:oklch(0.62_0.134_70)]",
+        "preview-annotation": "[--context-chip-accent:oklch(0.62_0.134_70)]",
+        "review-comment": "[--context-chip-accent:oklch(0.62_0.16_292)]",
+        "pull-request": "[--context-chip-accent:oklch(0.62_0.16_277)]",
+        "pr-open": "[--context-chip-accent:oklch(0.62_0.134_163)]",
+        "pr-draft": "[--context-chip-accent:oklch(0.62_0.02_259)]",
+        "pr-merged": "[--context-chip-accent:oklch(0.62_0.16_292)]",
+        "pr-closed": "[--context-chip-accent:oklch(0.62_0.16_16)]",
+        skill: "[--context-chip-accent:oklch(0.62_0.16_322)]",
+        citation: "[--context-chip-accent:oklch(0.62_0.16_259)]",
+      },
+      // Colors live in compoundVariants below so they come after the kind colors.
+      state: {
+        unresolved: "border-dashed",
+        invalid: "",
+      },
+    },
+    compoundVariants: [
+      {
+        kind: [
+          "image",
+          "video",
+          "file",
+          "mention",
+          "terminal",
+          "element",
+          "preview-annotation",
+          "review-comment",
+          "pull-request",
+          "pr-open",
+          "pr-draft",
+          "pr-merged",
+          "pr-closed",
+          "skill",
+          "citation",
+        ],
+        className:
+          "border-[color-mix(in_oklab,var(--context-chip-accent)_34%,var(--contrast-border))] bg-[color-mix(in_oklab,var(--context-chip-accent)_11%,transparent)] text-[color-mix(in_oklab,var(--context-chip-accent)_22%,var(--contrast-foreground))] [button:enabled&,a&]:hover:border-[color-mix(in_oklab,var(--context-chip-accent)_48%,var(--contrast-border))] [button:enabled&,a&]:hover:bg-[color-mix(in_oklab,var(--context-chip-accent)_17%,transparent)]",
+      },
+      // State colors win over any kind.
+      { state: "unresolved", className: "text-foreground" },
+      { state: "invalid", className: "border-destructive/35 bg-destructive/8 text-destructive" },
+    ],
+  },
+);
+
+type ContextChipKind = NonNullable<VariantProps<typeof contextChipVariants>["kind"]>;
+
+interface ContextChipProps extends useRender.ComponentProps<"span"> {
+  kind?: ContextChipKind;
+  state?: "unresolved" | "invalid";
+}
+
+function ContextChip({ className, kind, state, render, ...props }: ContextChipProps) {
+  const defaultProps = {
+    className: cn(contextChipVariants({ kind, state }), className),
+    "data-slot": "context-chip",
+    "data-state": state,
+  };
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(defaultProps, props),
+    render,
+  });
+}
+
+/** The chip's text. Truncates to the chip's width. */
+function ContextChipLabel({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn("block min-w-0 self-center truncate leading-tight", className)}
+      data-slot="context-chip-label"
+      {...props}
+    />
+  );
+}
+
+/** An icon action inside a chip, such as editing a citation's comment. Tints with the chip's kind. */
+function ContextChipAction({ className, render, ...props }: useRender.ComponentProps<"button">) {
+  const defaultProps = {
+    className: cn(
+      "ml-[0.17em] inline-flex size-[1.17em] shrink-0 cursor-pointer items-center justify-center rounded-sm text-current transition-colors hover:bg-[color-mix(in_oklab,var(--context-chip-accent,var(--color-foreground))_17%,transparent)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none [&_svg]:size-[0.85em]",
+      className,
+    ),
+    "data-slot": "context-chip-action",
+    type: render ? undefined : ("button" as const),
+  };
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export { ContextChip, ContextChipAction, ContextChipLabel, type ContextChipKind };
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index 01ff20bf79c3a240ada6275ad2af8d80c514e000..6aad25b84d25560d8dcffe3e2a5e6571f10c23c4 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -13,19 +13,11 @@ import {
   findAssistantCitationSourceAnchor,
   type AssistantCitationSourceAnchor,
 } from "~/lib/assistantTextSelection";
-import { cn } from "~/lib/utils";
 import {
   assistantCitationHash,
   assistantCitationNavigation,
 } from "../../lib/assistantCitationNavigation";
-import {
-  CHAT_INLINE_CHIP_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
-} from "../composerInlineChip";
+import { ContextChip, ContextChipAction, ContextChipLabel } from "../ContextChip";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { AssistantCitationCommentEditor } from "./AssistantCitationCommentEditor";
@@ -33,11 +25,6 @@ import { resolveAssistantCitationCommentDismissal } from "./assistantCitationCom
 import { observeAssistantCitationCommentSource } from "./AssistantCitationSource";
 import { composerFloatingLayerProps } from "./composerEventScope";
 
-const CITATION_ACTION_BUTTON_CLASS_NAME = cn(
-  COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME,
-  "text-current hover:bg-[color-mix(in_oklab,var(--context-chip-accent)_17%,transparent)] hover:text-current",
-);
-
 export function AssistantCitationChip({
   citation,
   composer = false,
@@ -126,8 +113,8 @@ export function AssistantCitationChip({
       className="inline-flex h-full min-w-0 items-center gap-[0.33em] rounded-sm text-inherit no-underline focus-visible:outline-2 focus-visible:outline-[var(--contrast-foreground)]"
       aria-label={`View cited assistant text: ${label}`}
     >
-      <QuoteIcon aria-hidden="true" className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME} />
-      <span className={cn(COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME, "max-w-[16em]")}>{label}</span>
+      <QuoteIcon aria-hidden="true" />
+      <ContextChipLabel className="max-w-[16em]">{label}</ContextChipLabel>
     </Link>
   );
   const chatSourceLink = (
@@ -136,16 +123,13 @@ export function AssistantCitationChip({
       className="inline-flex h-full min-w-0 items-center gap-[0.33em] rounded-sm text-inherit no-underline hover:bg-[color-mix(in_oklab,var(--context-chip-accent)_17%,transparent)] focus-visible:outline-2 focus-visible:outline-[var(--contrast-foreground)]"
       aria-label={`View cited assistant text: ${label}`}
     >
-      <QuoteIcon aria-hidden="true" className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME} />
-      <span className={cn(COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME, "max-w-[16em]")}>{label}</span>
+      <QuoteIcon aria-hidden="true" />
+      <ContextChipLabel className="max-w-[16em]">{label}</ContextChipLabel>
     </Link>
   );
   return (
-    <span
-      className={cn(
-        composer ? COMPOSER_INLINE_CHIP_CLASS_NAME : CHAT_INLINE_CHIP_CLASS_NAME,
-        CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.citation,
-      )}
+    <ContextChip
+      kind="citation"
       contentEditable={false}
       data-assistant-citation-chip="true"
       data-markdown-copy={serializeAssistantCitation(citation)}
@@ -171,9 +155,9 @@ export function AssistantCitationChip({
         >
           <PopoverTrigger
             aria-label={citation.comment ? "Edit citation comment" : "Add comment to citation"}
-            className={CITATION_ACTION_BUTTON_CLASS_NAME}
+            render={<ContextChipAction />}
           >
-            <PencilIcon aria-hidden="true" className="size-[0.85em]" />
+            <PencilIcon aria-hidden="true" />
           </PopoverTrigger>
           {commentEditor.open ? (
             <PopoverPopup
@@ -223,6 +207,6 @@ export function AssistantCitationChip({
           ) : null}
         </Popover>
       ) : null}
-    </span>
+    </ContextChip>
   );
 }
diff --git a/apps/web/src/components/chat/FileTagChip.tsx b/apps/web/src/components/chat/FileTagChip.tsx
index 11d12bb941c25a91d6cc27b1946c7832c6a842cc..5dbfde8affe46b57d2f515b7691293fc6a4e9ae2 100644
--- a/apps/web/src/components/chat/FileTagChip.tsx
+++ b/apps/web/src/components/chat/FileTagChip.tsx
@@ -1,22 +1,12 @@
 import { inferEntryKindFromPath } from "../../pierre-icons";
-import {
-  CHAT_INLINE_CHIP_CLASS_NAME,
-  CHAT_INLINE_CHIP_LABEL_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
-} from "../composerInlineChip";
+import { ContextChipLabel } from "../ContextChip";
 import { PierreEntryIcon } from "./PierreEntryIcon";
 
-export const FILE_TAG_CHIP_CLASS_NAME = `${COMPOSER_INLINE_CHIP_CLASS_NAME} ${CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.mention}`;
-export const CHAT_FILE_TAG_CHIP_CLASS_NAME = `${CHAT_INLINE_CHIP_CLASS_NAME} ${CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.mention}`;
-
+/** Icon and label for a file mention; render inside `<ContextChip kind="mention">`. */
 export function FileTagChipContent(props: {
   path: string;
   label: string;
   theme: "light" | "dark";
-  selectable?: boolean;
 }) {
   return (
     <>
@@ -24,17 +14,8 @@ export function FileTagChipContent(props: {
         pathValue={props.path}
         kind={inferEntryKindFromPath(props.path)}
         theme={props.theme}
-        className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
       />
-      <span
-        className={
-          props.selectable
-            ? CHAT_INLINE_CHIP_LABEL_CLASS_NAME
-            : COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME
-        }
-      >
-        {props.label}
-      </span>
+      <ContextChipLabel>{props.label}</ContextChipLabel>
     </>
   );
 }
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index dd35a506d78c67b8b9f782bd5814a9cdbf6e1e09..da5108f917c136dace8c6dde937d54e93f23c64f 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -214,6 +214,7 @@ import {
   ContextChipShell,
   FileChip,
   ImageChipButton,
+  PULL_REQUEST_CHIP_KINDS,
   PullRequestChip,
   UnresolvedChip,
 } from "../contextChipParts";
@@ -236,15 +237,7 @@ import {
   encodeComposerContextFragment,
 } from "@t3tools/shared/composerContextClipboard";
 import { chatMarkdownClipboardPayload } from "../../markdown-clipboard";
-import {
-  CHAT_INLINE_CHIP_CLASS_NAME,
-  CHAT_INLINE_CHIP_LABEL_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  SKILL_CHIP_ICON_SVG,
-  CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES,
-  CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
-  PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES,
-} from "../composerInlineChip";
+import { ContextChip, ContextChipLabel, type ContextChipKind } from "../ContextChip";
 import { createContextPresentationRegistry } from "../contextPresentationRegistry";
 import { useOpenPrLink } from "~/lib/openPullRequestLink";
 import type { ChatMarkdownContextReference } from "../ChatMarkdown";
@@ -254,7 +247,7 @@ import { useUiStateStore } from "~/uiStateStore";
 import { type TimestampFormat } from "@t3tools/contracts/settings";
 import { formatChatTimestampTooltip, formatDayAwareTimestamp } from "../../timestampFormat";
 
-import { SkillInlineText } from "./SkillInlineText";
+import { SkillChipIcon, SkillInlineText } from "./SkillInlineText";
 import { deriveAgentSpawnSummary } from "./agentSpawnSummary";
 import { formatWorkspaceRelativePath } from "../../filePathDisplay";
 import {
@@ -2559,8 +2552,9 @@ function BackgroundWorktreeSetupChip({ snapshot }: { snapshot: WorktreeSetupSnap
       <PopoverTrigger
         render={
           <Button
-            variant="chip"
-            className="ml-auto inline-flex h-5 min-w-0 shrink-0 items-center gap-1 rounded-full border border-border/70 px-2 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            variant="ghost-muted"
+            size="micro"
+            className="ml-auto min-w-0 shrink-0"
             aria-label={`${scriptName} is still running. Show setup progress.`}
           />
         }
@@ -3453,14 +3447,10 @@ function UserMessageMentionChip(props: {
     <Tooltip>
       <TooltipTrigger
         render={
-          <button
-            type="button"
+          <ContextChip
+            kind="mention"
+            render={<button type="button" />}
             aria-label={`Preview ${props.record.path}`}
-            className={cn(
-              CHAT_INLINE_CHIP_CLASS_NAME,
-              CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.mention,
-              "cursor-pointer focus-visible:outline-2",
-            )}
             data-markdown-copy={props.copyMarkdown}
             onClick={() => {
               if (ctx.threadRef)
@@ -3471,10 +3461,9 @@ function UserMessageMentionChip(props: {
               pathValue={props.record.path}
               kind={inferEntryKindFromPath(props.record.path)}
               theme={ctx.resolvedTheme}
-              className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
             />
-            <span className={CHAT_INLINE_CHIP_LABEL_CLASS_NAME}>{props.record.label}</span>
-          </button>
+            <ContextChipLabel>{props.record.label}</ContextChipLabel>
+          </ContextChip>
         }
       />
       <TooltipPopup>{props.record.path}</TooltipPopup>
@@ -3488,21 +3477,16 @@ function UserMessageContextChip(props: {
   kindLabel?: string;
   copyMarkdown: string;
   tooltip?: string;
-  toneClassName?: string;
-  interactive?: boolean;
-  unresolved?: boolean;
+  kind: ContextChipKind;
 }) {
   return (
     <ContextChipShell
+      kind={props.kind}
       icon={props.icon}
       label={props.label}
-      className={cn(CHAT_INLINE_CHIP_CLASS_NAME, props.toneClassName)}
-      labelClassName={CHAT_INLINE_CHIP_LABEL_CLASS_NAME}
       aria-label={props.kindLabel ? `${props.kindLabel}, ${props.label}` : undefined}
       data-markdown-copy={props.copyMarkdown}
       tooltip={props.tooltip}
-      interactive={props.interactive === true}
-      unresolved={props.unresolved === true}
     />
   );
 }
@@ -3510,7 +3494,7 @@ function UserMessageContextChip(props: {
 function UserMessagePullRequestContextChip(props: {
   record: Extract<KnownComposerContextRecord, { kind: "review-comment" }>;
   copyMarkdown: string;
-  toneClassName: string;
+  kind: ContextChipKind;
 }) {
   const { activeThreadEnvironmentId, openPullRequest } = use(TimelineRowCtx);
   const metadata = props.record.pullRequest;
@@ -3521,8 +3505,7 @@ function UserMessagePullRequestContextChip(props: {
       environmentId={activeThreadEnvironmentId}
       label={reviewCommentContextLabel(props.record)}
       kindLabel={pullRequestContextKindLabel(props.record)}
-      className={cn(CHAT_INLINE_CHIP_CLASS_NAME, props.toneClassName)}
-      labelClassName={CHAT_INLINE_CHIP_LABEL_CLASS_NAME}
+      kind={props.kind}
       copyMarkdown={props.copyMarkdown}
       onOpen={openPullRequest}
     />
@@ -3675,11 +3658,8 @@ function UnavailableUserMessageContextChip(props: UserMessageContextRenderContex
   return (
     <UnresolvedChip
       label={props.reference.label}
-      className={CHAT_INLINE_CHIP_CLASS_NAME}
-      labelClassName={CHAT_INLINE_CHIP_LABEL_CLASS_NAME}
       copyMarkdown={props.copyMarkdown}
       tooltip="This context is no longer available."
-      tooltipClassName="max-w-96 whitespace-pre-wrap leading-tight"
     />
   );
 }
@@ -3707,18 +3687,12 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
       render: (record, context) =>
         record.kind === "skill" ? (
           <UserMessageContextChip
-            icon={
-              <span
-                aria-hidden="true"
-                className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
-                dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}
-              />
-            }
+            icon={<SkillChipIcon />}
             label={record.label || record.name}
             kindLabel="Skill"
             tooltip={`$${record.name}`}
             copyMarkdown={context.copyMarkdown}
-            toneClassName={CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.skill}
+            kind="skill"
           />
         ) : (
           <UnavailableUserMessageContextChip {...context} />
@@ -3743,8 +3717,6 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
           <ImageChipButton
             name={record.name}
             previewUrl={attachment.previewUrl}
-            className={CHAT_INLINE_CHIP_CLASS_NAME}
-            labelClassName={CHAT_INLINE_CHIP_LABEL_CLASS_NAME}
             size={formatAttachmentSize(record.sizeBytes)}
             data-markdown-copy={context.copyMarkdown}
             onClick={() => context.onExpandImage(attachment)}
@@ -3777,8 +3749,6 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
             size={size}
             isVideo={isVideo}
             theme={context.resolvedTheme}
-            className={CHAT_INLINE_CHIP_CLASS_NAME}
-            labelClassName={CHAT_INLINE_CHIP_LABEL_CLASS_NAME}
             disabled={disabled}
             accessibleLabel={`${isVideo ? "Video" : "File"} attachment, ${record.name}, ${size}`}
             copyMarkdown={context.copyMarkdown}
@@ -3797,7 +3767,6 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
         record.kind === "terminal" ? (
           <span data-markdown-copy={context.copyMarkdown}>
             <TerminalContextInlineChip
-              surface="transcript"
               label={record.label}
               terminalLabel={record.terminalLabel}
               lineStart={record.lineStart}
@@ -3818,24 +3787,9 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
           <UserMessageContextPopover
             copyMarkdown={context.copyMarkdown}
             accessibleLabel={`Browser element, ${record.label}`}
-            chip={
-              <UserMessageContextChip
-                icon={
-                  <MousePointerClickIcon
-                    className={cn(
-                      COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-                      CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES.element,
-                      "size-3.5",
-                    )}
-                  />
-                }
-                label={record.label}
-                kindLabel="Browser element"
-                copyMarkdown={context.copyMarkdown}
-                interactive
-                toneClassName={CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.element}
-              />
-            }
+            kind="element"
+            icon={<MousePointerClickIcon />}
+            label={record.label}
           >
             <UserMessageElementDetails record={record} />
           </UserMessageContextPopover>
@@ -3859,7 +3813,7 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
             <UserMessagePullRequestContextChip
               record={record}
               copyMarkdown={context.copyMarkdown}
-              toneClassName={PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES[pullRequestState]}
+              kind={PULL_REQUEST_CHIP_KINDS[pullRequestState]}
             />
           );
         }
@@ -3867,38 +3821,9 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
           <UserMessageContextPopover
             copyMarkdown={context.copyMarkdown}
             accessibleLabel={`${kindLabel}, ${label}${record.pullRequest ? `, ${record.pullRequest.title}` : ""}`}
-            chip={
-              <UserMessageContextChip
-                icon={
-                  isPullRequest ? (
-                    <PullRequestGlyph.pullRequest
-                      className={cn(
-                        COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-                        CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES["pull-request"],
-                        "size-3.5",
-                      )}
-                    />
-                  ) : (
-                    <MessageCircleIcon
-                      className={cn(
-                        COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-                        CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES["review-comment"],
-                        "size-3.5",
-                      )}
-                    />
-                  )
-                }
-                label={label}
-                kindLabel={kindLabel}
-                copyMarkdown={context.copyMarkdown}
-                interactive
-                toneClassName={
-                  isPullRequest
-                    ? PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES[pullRequestState]
-                    : CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES["review-comment"]
-                }
-              />
-            }
+            kind={isPullRequest ? PULL_REQUEST_CHIP_KINDS[pullRequestState] : "review-comment"}
+            icon={isPullRequest ? <PullRequestGlyph.pullRequest /> : <MessageCircleIcon />}
+            label={label}
           >
             <UserMessageReviewCommentCard
               comment={{
@@ -3929,24 +3854,9 @@ const userMessageContextPresentationRegistry = createContextPresentationRegistry
           <UserMessageContextPopover
             copyMarkdown={context.copyMarkdown}
             accessibleLabel={`Preview annotation, ${record.label}`}
-            chip={
-              <UserMessageContextChip
-                icon={
-                  <MousePointerClickIcon
-                    className={cn(
-                      COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-                      CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES["preview-annotation"],
-                      "size-3.5",
-                    )}
-                  />
-                }
-                label={record.label}
-                kindLabel="Preview annotation"
-                copyMarkdown={context.copyMarkdown}
-                interactive
-                toneClassName={CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES["preview-annotation"]}
-              />
-            }
+            kind="preview-annotation"
+            icon={<MousePointerClickIcon />}
+            label={record.label}
           >
             <UserMessagePreviewAnnotationDetails record={record} image={context.annotationImage} />
           </UserMessageContextPopover>
diff --git a/apps/web/src/components/chat/SkillInlineText.tsx b/apps/web/src/components/chat/SkillInlineText.tsx
index 83930ea2d6009419a728c8816a837665e3ff5b28..2327577b3a80dbc835bf9a236f2204b728578bf2 100644
--- a/apps/web/src/components/chat/SkillInlineText.tsx
+++ b/apps/web/src/components/chat/SkillInlineText.tsx
@@ -2,14 +2,8 @@ import { Children, cloneElement, isValidElement, type ReactNode } from "react";
 import type { ServerProviderSkill } from "@t3tools/contracts";
 import { formatProviderSkillDisplayName } from "@t3tools/client-runtime/providerSkills";
 
-import {
-  CHAT_INLINE_CHIP_CLASS_NAME,
-  CHAT_INLINE_CHIP_LABEL_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
-  SKILL_CHIP_ICON_SVG,
-} from "../composerInlineChip";
-import { cn } from "~/lib/utils";
+import { SKILL_CHIP_ICON_SVG } from "../composerInlineChip";
+import { ContextChip, ContextChipLabel } from "../ContextChip";
 
 const SKILL_TOKEN_REGEX =
   /(^|\s)\p{Sc}(?![0-9][0-9_]*(?:[kKmMbBtT]|[eE][0-9]+)?(?:\s|$))(?=[a-zA-Z0-9:_-]*[a-zA-Z])([a-zA-Z0-9][a-zA-Z0-9:_-]*)(?=\s|$)/gu;
@@ -76,17 +70,20 @@ export function renderSkillInlineMarkdownChildren(
 
 function SkillChip(props: { skill: InlineSkill; rawText: string }) {
   return (
-    <span className="inline-flex align-middle leading-none" data-markdown-copy={props.rawText}>
-      <span className={cn(CHAT_INLINE_CHIP_CLASS_NAME, CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.skill)}>
-        <span
-          aria-hidden="true"
-          className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
-          dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}
-        />
-        <span className={CHAT_INLINE_CHIP_LABEL_CLASS_NAME}>
-          {formatProviderSkillDisplayName(props.skill)}
-        </span>
-      </span>
-    </span>
+    <ContextChip kind="skill" data-markdown-copy={props.rawText}>
+      <SkillChipIcon />
+      <ContextChipLabel>{formatProviderSkillDisplayName(props.skill)}</ContextChipLabel>
+    </ContextChip>
+  );
+}
+
+/** The skill glyph; the surrounding chip sizes its svg. */
+export function SkillChipIcon() {
+  return (
+    <span
+      aria-hidden="true"
+      className="contents"
+      dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}
+    />
   );
 }
diff --git a/apps/web/src/components/chat/TerminalContextInlineChip.tsx b/apps/web/src/components/chat/TerminalContextInlineChip.tsx
index 48abba338683f114dfb4440fa569783e0a5588c0..d46da4e856e929cadb1c0dfaa85ea04569f5a4e4 100644
--- a/apps/web/src/components/chat/TerminalContextInlineChip.tsx
+++ b/apps/web/src/components/chat/TerminalContextInlineChip.tsx
@@ -1,16 +1,6 @@
 import { TerminalIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils";
 import type { ContextPresentationCapability } from "../contextPresentationRegistry";
-import {
-  CHAT_INLINE_CHIP_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES,
-  CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
-} from "../composerInlineChip";
 import { ContextChipPopover, ContextChipShell } from "../contextChipParts";
 
 interface TerminalContextInlineChipProps {
@@ -21,41 +11,18 @@ interface TerminalContextInlineChipProps {
   text: string;
   detailsMode: ContextPresentationCapability["details"];
   expired?: boolean;
-  surface?: "composer" | "transcript";
 }
 
 export function TerminalContextInlineChip(props: TerminalContextInlineChipProps) {
   const { label, terminalLabel, lineStart, lineEnd, text, detailsMode, expired = false } = props;
-  const chipClassName =
-    props.surface === "transcript" ? CHAT_INLINE_CHIP_CLASS_NAME : COMPOSER_INLINE_CHIP_CLASS_NAME;
-
-  const icon = (
-    <TerminalIcon
-      className={cn(
-        COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-        CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES.terminal,
-        "size-3.5",
-        expired && "opacity-100",
-      )}
-    />
-  );
 
   if (!expired && text.length > 0 && detailsMode === "popover") {
     return (
       <ContextChipPopover
+        kind="terminal"
+        icon={<TerminalIcon />}
+        label={label}
         accessibleLabel={`Terminal excerpt, ${label}`}
-        chip={
-          <>
-            {icon}
-            <span className={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}>{label}</span>
-          </>
-        }
-        triggerClassName={cn(
-          chipClassName,
-          CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.terminal,
-          CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-          "cursor-pointer",
-        )}
         popupClassName="w-[min(40rem,calc(100vw-2rem))]"
         viewportClassName="overflow-hidden p-2"
       >
@@ -83,17 +50,12 @@ export function TerminalContextInlineChip(props: TerminalContextInlineChipProps)
 
   return (
     <ContextChipShell
-      icon={icon}
+      kind="terminal"
+      {...(expired ? { state: "invalid" as const } : {})}
+      icon={<TerminalIcon />}
       label={label}
-      className={cn(
-        chipClassName,
-        CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.terminal,
-        expired && "border-destructive/35 bg-destructive/8 text-destructive",
-      )}
-      labelClassName={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}
       aria-label={`Terminal excerpt, ${label}${expired ? ", expired" : ""}`}
       data-terminal-context-expired={expired ? "true" : undefined}
-      tooltipClassName="max-w-80 whitespace-pre-wrap leading-tight"
       tooltip={
         expired
           ? `Terminal context expired. Remove and re-add ${label} to include it in your message.`
diff --git a/apps/web/src/components/composerContextPresentation.tsx b/apps/web/src/components/composerContextPresentation.tsx
index 9c86b47581f0f3233c22444ea85b1b709bad0c0f..01f05f7f9721bfc60339e8a29eb5db51b4ada5b6 100644
--- a/apps/web/src/components/composerContextPresentation.tsx
+++ b/apps/web/src/components/composerContextPresentation.tsx
@@ -14,7 +14,6 @@ import {
   formatAttachmentUploadProgress,
   type AttachmentUploadState,
 } from "~/lib/attachmentUploadState";
-import { cn } from "~/lib/utils";
 import { PullRequestGlyph } from "~/components/pullRequest/pullRequestIcons";
 import {
   fileContextReference,
@@ -36,20 +35,14 @@ import {
   createContextPresentationRegistry,
   type ContextPresentationCapability,
 } from "./contextPresentationRegistry";
-import {
-  COMPOSER_INLINE_CHIP_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES,
-  CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
-  PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES,
-} from "./composerInlineChip";
+import type { ContextChipKind } from "./ContextChip";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import {
   ContextChipPopover,
   ContextChipShell,
   FileChip,
   ImageChipButton,
+  PULL_REQUEST_CHIP_KINDS,
   PullRequestChip,
   UnresolvedChip,
 } from "./contextChipParts";
@@ -138,30 +131,31 @@ function ContextChip(props: {
   kindLabel: string;
   details: ReactNode;
   detailsMode: ContextPresentationCapability["details"];
-  toneClassName: string;
+  kind: ContextChipKind;
 }) {
-  const content = (
-    <ContextChipShell
-      icon={props.icon}
-      label={props.label}
-      className={cn(COMPOSER_INLINE_CHIP_CLASS_NAME, props.toneClassName)}
-      labelClassName={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}
-      interactive={props.detailsMode === "popover"}
-      aria-hidden={props.detailsMode === "popover" ? true : undefined}
-      aria-label={
-        props.detailsMode === "tooltip" ? `${props.kindLabel}, ${props.label}` : undefined
-      }
-      tooltip={props.detailsMode === "tooltip" ? props.details : undefined}
-    />
-  );
   if (props.detailsMode === "popover") {
     return (
-      <ContextChipPopover accessibleLabel={props.kindLabel + ", " + props.label} chip={content}>
+      <ContextChipPopover
+        kind={props.kind}
+        icon={props.icon}
+        label={props.label}
+        accessibleLabel={props.kindLabel + ", " + props.label}
+      >
         {props.details}
       </ContextChipPopover>
     );
   }
-  return content;
+  return (
+    <ContextChipShell
+      kind={props.kind}
+      icon={props.icon}
+      label={props.label}
+      aria-label={
+        props.detailsMode === "tooltip" ? `${props.kindLabel}, ${props.label}` : undefined
+      }
+      tooltip={props.detailsMode === "tooltip" ? props.details : undefined}
+    />
+  );
 }
 
 function uploadStatusSuffix(upload: AttachmentUploadState | undefined): string | null {
@@ -191,8 +185,6 @@ function ImageContextChip(props: {
           <ImageChipButton
             name={props.record.name}
             previewUrl={props.record.previewUrl}
-            className={COMPOSER_INLINE_CHIP_CLASS_NAME}
-            labelClassName={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}
             size={formatAttachmentSize(props.record.sizeBytes)}
             suffix={uploadStatusSuffix(props.upload)}
             onClick={() => actions.expandImage(props.record.id)}
@@ -222,8 +214,6 @@ function FileContextChip(props: {
       size={size}
       isVideo={isVideo}
       theme={resolvedTheme}
-      className={COMPOSER_INLINE_CHIP_CLASS_NAME}
-      labelClassName={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}
       error={props.upload?.status === "failed"}
       unresolved={needsReattach}
       suffix={suffix}
@@ -243,7 +233,7 @@ function FileContextChip(props: {
   );
 }
 
-function PullRequestContextChip(props: { record: ReviewCommentContext; toneClassName: string }) {
+function PullRequestContextChip(props: { record: ReviewCommentContext; kind: ContextChipKind }) {
   const actions = use(ComposerContextActionsContext);
   const metadata = props.record.pullRequest;
   if (metadata === undefined) return null;
@@ -253,8 +243,7 @@ function PullRequestContextChip(props: { record: ReviewCommentContext; toneClass
       environmentId={actions.environmentId}
       label={reviewCommentContextLabel(props.record)}
       kindLabel={pullRequestContextKindLabel(props.record)}
-      className={cn(COMPOSER_INLINE_CHIP_CLASS_NAME, props.toneClassName)}
-      labelClassName={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}
+      kind={props.kind}
       onOpen={actions.openPullRequest}
     />
   );
@@ -324,10 +313,7 @@ function UnresolvedContextChip(props: { label: string }) {
   return (
     <UnresolvedChip
       label={props.label}
-      className={COMPOSER_INLINE_CHIP_CLASS_NAME}
-      labelClassName={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}
       tooltip="This context is no longer available. Remove it or attach it again."
-      tooltipClassName="max-w-80 leading-tight"
     />
   );
 }
@@ -389,40 +375,18 @@ const composerContextPresentationRegistry = createContextPresentationRegistry<
           return (
             <PullRequestContextChip
               record={entry.record}
-              toneClassName={PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES[pullRequestState]}
+              kind={PULL_REQUEST_CHIP_KINDS[pullRequestState]}
             />
           );
         }
         return (
           <ContextChip
-            icon={
-              isPullRequest ? (
-                <PullRequestGlyph.pullRequest
-                  className={cn(
-                    COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-                    CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES["pull-request"],
-                    "size-3.5",
-                  )}
-                />
-              ) : (
-                <MessageCircleIcon
-                  className={cn(
-                    COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-                    CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES["review-comment"],
-                    "size-3.5",
-                  )}
-                />
-              )
-            }
+            icon={isPullRequest ? <PullRequestGlyph.pullRequest /> : <MessageCircleIcon />}
             label={reviewCommentContextLabel(entry.record)}
             kindLabel={isPullRequest ? pullRequestContextKindLabel(entry.record) : "Review comment"}
             details={<ComposerReviewCommentDetails comment={entry.record} />}
             detailsMode={definition.capabilities.details}
-            toneClassName={
-              isPullRequest
-                ? PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES[pullRequestState]
-                : CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES["review-comment"]
-            }
+            kind={isPullRequest ? PULL_REQUEST_CHIP_KINDS[pullRequestState] : "review-comment"}
           />
         );
       },
@@ -433,20 +397,12 @@ const composerContextPresentationRegistry = createContextPresentationRegistry<
       render: (entry, context, definition) =>
         entry.kind === "preview-annotation" ? (
           <ContextChip
-            icon={
-              <MousePointerClickIcon
-                className={cn(
-                  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-                  CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES["preview-annotation"],
-                  "size-3.5",
-                )}
-              />
-            }
+            icon={<MousePointerClickIcon />}
             label={previewAnnotationContextLabel(entry.record)}
             kindLabel="Preview annotation"
             details={<ComposerPreviewAnnotationDetails annotation={entry.record} />}
             detailsMode={definition.capabilities.details}
-            toneClassName={CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES["preview-annotation"]}
+            kind="preview-annotation"
           />
         ) : (
           <UnresolvedContextChip label={context.label} />
diff --git a/apps/web/src/components/composerInlineChip.ts b/apps/web/src/components/composerInlineChip.ts
index e313830a3ba416d693915badfbc7772d501e2d4f..5897f33293b5e5f0c937346cd8f6b04e79cad775 100644
--- a/apps/web/src/components/composerInlineChip.ts
+++ b/apps/web/src/components/composerInlineChip.ts
@@ -1,83 +1,5 @@
-// Chip metrics are in em so the pills scale with the text they sit in (the
-// composer honors the prompt font-size preference). The chat variant pins the
-// original 12px, where every em value resolves to the same pixels as before.
-const INLINE_CHIP_GEOMETRY_CLASS_NAME =
-  "inline-flex h-[1.41em] max-w-full items-center gap-[0.33em] rounded-[0.5em] px-[0.5em] font-medium leading-none align-middle";
-
-const INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_GEOMETRY_CLASS_NAME} border border-border/70 bg-accent/40 text-foreground`;
-
-const CONTEXT_INLINE_CHIP_TONE_CLASS_NAME =
-  "border-[color-mix(in_oklab,var(--context-chip-accent)_34%,var(--contrast-border))] bg-[color-mix(in_oklab,var(--context-chip-accent)_11%,transparent)] text-[color-mix(in_oklab,var(--context-chip-accent)_22%,var(--contrast-foreground))]";
-
-export const CHAT_INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_CLASS_NAME} text-[12px]`;
-
-export const COMPOSER_INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_CLASS_NAME} text-[0.86em] select-none`;
-
-export const COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME =
-  "relative inline-flex items-center align-middle leading-none data-[composer-chip-selected]:after:pointer-events-none data-[composer-chip-selected]:after:absolute data-[composer-chip-selected]:after:inset-0 data-[composer-chip-selected]:after:rounded-[6px] data-[composer-chip-selected]:after:bg-[Highlight] data-[composer-chip-selected]:after:opacity-30 data-[composer-chip-selected]:after:content-['']";
-
-export const COMPOSER_INLINE_CHIP_ICON_CLASS_NAME =
-  "block size-[1.17em] shrink-0 self-center [&>svg]:block";
-
-export const CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME =
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--contrast-foreground)]";
-
-export const CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME = `transition-colors hover:border-[color-mix(in_oklab,var(--context-chip-accent)_48%,var(--contrast-border))] hover:bg-[color-mix(in_oklab,var(--context-chip-accent)_17%,transparent)] motion-reduce:transition-none ${CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME}`;
-
-export const CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES = {
-  image: "text-current",
-  video: "text-current",
-  file: "text-current",
-  mention: "text-current",
-  terminal: "text-current",
-  element: "text-current",
-  "preview-annotation": "text-current",
-  "review-comment": "text-current",
-  "pull-request": "text-current",
-  skill: "text-current",
-  citation: "text-current",
-} as const;
-
-/**
- * Context kinds keep one restrained color identity in both composer and sent messages.
- * Every accent shares a lightness so no kind reads heavier than another; only hue carries
- * identity. Chroma is capped, then clamped to what each hue can hold in sRGB, which keeps
- * the set inside the range the themes use for their own accents rather than above it.
- */
-export const CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES = {
-  image: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_16)]`,
-  video: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_48)]`,
-  file: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.136_237)]`,
-  mention: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.11_215)]`,
-  terminal: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.134_163)]`,
-  element: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.134_70)]`,
-  "preview-annotation": `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.134_70)]`,
-  "review-comment": `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_292)]`,
-  "pull-request": `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_277)]`,
-  skill: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_322)]`,
-  citation: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_259)]`,
-} as const;
-
-export const PULL_REQUEST_INLINE_CHIP_TONE_CLASS_NAMES = {
-  open: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.134_163)]`,
-  draft: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.02_259)]`,
-  merged: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_292)]`,
-  closed: `${CONTEXT_INLINE_CHIP_TONE_CLASS_NAME} [--context-chip-accent:oklch(0.62_0.16_16)]`,
-  unknown: CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES["pull-request"],
-} as const;
-
-export const CHAT_INLINE_CHIP_LABEL_CLASS_NAME = "truncate leading-tight";
-
-export const COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME =
-  "block self-center truncate leading-tight select-none";
-
-export const COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME = `${INLINE_CHIP_GEOMETRY_CLASS_NAME} select-none border text-[0.86em] ${CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.skill}`;
-
 export const SKILL_CHIP_ICON_SVG = `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>`;
 
-export const COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME =
-  "ml-[0.17em] inline-flex size-[1.17em] shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/72 transition-colors hover:bg-foreground/6 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
-
 /** Keeps both the recognizable beginning and the extension/end of a long attachment name. */
 export function middleTruncateAttachmentName(name: string, maxCharacters = 36): string {
   const characters = Array.from(name);
diff --git a/apps/web/src/components/contextChipParts.tsx b/apps/web/src/components/contextChipParts.tsx
index 5b2a1684f62e90de5e10022947d48e3ee907fba3..faa6fa98c7d1f6de5389d91f50a91eb48bbc55cb 100644
--- a/apps/web/src/components/contextChipParts.tsx
+++ b/apps/web/src/components/contextChipParts.tsx
@@ -10,75 +10,66 @@ import {
 
 import { cn } from "~/lib/utils";
 import { PULL_REQUEST_STATE_PRESENTATION } from "~/components/pullRequest/pullRequestIcons";
+import type { PullRequestContextDisplayState } from "~/lib/composerContextRecords";
 import { PierreEntryIcon } from "./chat/PierreEntryIcon";
-import {
-  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES,
-  CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-  CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES,
-  middleTruncateAttachmentName,
-} from "./composerInlineChip";
+import { middleTruncateAttachmentName } from "./composerInlineChip";
 import { PullRequestContextDetails } from "./PullRequestContextDetails";
-import { Button } from "./ui/button";
+import { ContextChip, ContextChipLabel, type ContextChipKind } from "./ContextChip";
 import { Popover, PopoverPopup, PopoverTitle, PopoverTrigger } from "./ui/popover";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import { PullRequestLinkPreview } from "./pullRequest/PullRequestLinkPreview";
 import { usePullRequestPreviewTarget } from "~/lib/openPullRequestLink";
 
-/** Shared visual slots; each surface keeps ownership of payload lookup and actions. */
+/** ContextChip kind for a pull request context in each display state. */
+export const PULL_REQUEST_CHIP_KINDS = {
+  open: "pr-open",
+  draft: "pr-draft",
+  merged: "pr-merged",
+  closed: "pr-closed",
+  unknown: "pull-request",
+} as const satisfies Record<PullRequestContextDisplayState | "unknown", ContextChipKind>;
+
+/** A static chip with an optional tooltip; each surface keeps ownership of payload lookup. */
 export function ContextChipShell({
   icon,
   label,
-  labelClassName,
   tooltip,
-  tooltipClassName = "max-w-96 whitespace-pre-wrap leading-tight",
-  interactive,
-  unresolved,
-  className,
   ...props
-}: ComponentProps<"span"> & {
+}: Omit<ComponentProps<typeof ContextChip>, "className" | "render"> & {
   icon: ReactNode;
   label: string;
-  labelClassName: string;
+  /** Newlines in the tooltip are kept. */
   tooltip?: ReactNode;
-  tooltipClassName?: string;
-  interactive?: boolean;
-  unresolved?: boolean;
 }) {
   const chip = (
-    <span
-      className={cn(
-        className,
-        interactive && CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-        tooltip && CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME,
-        unresolved && "border-dashed text-foreground",
-      )}
-      data-context-unresolved={unresolved ? "true" : undefined}
+    <ContextChip
+      data-context-unresolved={props.state === "unresolved" ? "true" : undefined}
       tabIndex={tooltip ? 0 : undefined}
       {...props}
     >
       {icon}
-      <span className={labelClassName}>{label}</span>
-    </span>
+      <ContextChipLabel>{label}</ContextChipLabel>
+    </ContextChip>
   );
   if (!tooltip) return chip;
   return (
     <Tooltip>
       <TooltipTrigger render={chip} />
-      <TooltipPopup side="top" className={tooltipClassName}>
+      <TooltipPopup side="top" className="whitespace-pre-wrap">
         {tooltip}
       </TooltipPopup>
     </Tooltip>
   );
 }
 
+/** A chip that opens its details in a popover; the chip itself is the trigger. */
 export function ContextChipPopover(props: {
+  kind: ContextChipKind;
+  icon: ReactNode;
+  label: string;
   copyMarkdown?: string;
   accessibleLabel: string;
-  chip: ReactNode;
   children: ReactNode;
-  triggerClassName?: string;
   popupClassName?: string;
   viewportClassName?: string;
 }) {
@@ -86,19 +77,16 @@ export function ContextChipPopover(props: {
     <Popover>
       <PopoverTrigger
         render={
-          <Button
-            variant="chip"
-            className={cn(
-              "inline-flex max-w-full cursor-pointer items-center rounded-[0.5em] align-middle",
-              CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME,
-              props.triggerClassName,
-            )}
+          <ContextChip
+            kind={props.kind}
+            render={<button type="button" />}
             aria-label={`${props.accessibleLabel}. Show details`}
             data-markdown-copy={props.copyMarkdown}
           />
         }
       >
-        {props.chip}
+        {props.icon}
+        <ContextChipLabel>{props.label}</ContextChipLabel>
       </PopoverTrigger>
       <PopoverPopup
         side="top"
@@ -118,8 +106,7 @@ export function PullRequestChip(props: {
   environmentId: EnvironmentId | null;
   label: string;
   kindLabel: string;
-  className: string;
-  labelClassName: string;
+  kind: ContextChipKind;
   copyMarkdown?: string;
   onOpen: (event: MouseEvent<HTMLElement>, url: string) => void;
 }) {
@@ -128,21 +115,16 @@ export function PullRequestChip(props: {
     props.metadata.state === "open" && props.metadata.isDraft ? "draft" : props.metadata.state;
   const StateIcon = PULL_REQUEST_STATE_PRESENTATION[displayState].Icon;
   const button = (
-    <Button
-      variant="chip"
-      className={cn(
-        props.className,
-        CONTEXT_INLINE_CHIP_FOCUS_CLASS_NAME,
-        CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-        "cursor-pointer",
-      )}
+    <ContextChip
+      kind={props.kind}
+      render={<button type="button" />}
       aria-label={`Open ${props.kindLabel} ${props.label}: ${props.metadata.title}`}
       data-markdown-copy={props.copyMarkdown}
       onClick={(event) => props.onOpen(event, props.metadata.url)}
     >
-      <StateIcon className={cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5")} />
-      <span className={props.labelClassName}>{props.label}</span>
-    </Button>
+      <StateIcon />
+      <ContextChipLabel>{props.label}</ContextChipLabel>
+    </ContextChip>
   );
   if (previewTarget !== null) {
     return (
@@ -196,16 +178,13 @@ function averageImageColor(image: HTMLImageElement): string | undefined {
 export function ImageChipButton({
   name,
   previewUrl,
-  className,
-  labelClassName,
   size,
   suffix,
   style,
   ...props
-}: ComponentProps<"button"> & {
+}: Omit<ComponentProps<typeof ContextChip>, "kind" | "render"> & {
   name: string;
   previewUrl: string | undefined;
-  labelClassName: string;
   /** Every attachment chip reports its size; images are no exception. */
   size: string;
   suffix?: string | null;
@@ -214,14 +193,9 @@ export function ImageChipButton({
   const [corsFailedUrl, setCorsFailedUrl] = useState<string>();
   const accent = sample?.url === previewUrl ? sample?.color : undefined;
   return (
-    <Button
-      variant="chip"
-      className={cn(
-        className,
-        CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.image,
-        CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-        "cursor-zoom-in",
-      )}
+    <ContextChip
+      kind="image"
+      render={<button type="button" />}
       aria-label={`Image attachment, ${name}, ${size}`}
       style={{ ...style, ...(accent ? { "--context-chip-accent": accent } : {}) } as CSSProperties}
       {...props}
@@ -232,25 +206,19 @@ export function ImageChipButton({
           crossOrigin={corsFailedUrl === previewUrl ? undefined : "anonymous"}
           src={previewUrl}
           alt=""
-          className="size-3.5 shrink-0 rounded-sm object-cover"
+          className="size-[1.17em] shrink-0 rounded-sm object-cover"
           onError={() => setCorsFailedUrl(previewUrl)}
           onLoad={(event) =>
             setSample({ url: previewUrl, color: averageImageColor(event.currentTarget) })
           }
         />
       ) : (
-        <ImageIcon
-          className={cn(
-            COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-            CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES.image,
-            "size-3.5",
-          )}
-        />
+        <ImageIcon />
       )}
-      <span className={cn(labelClassName, "max-w-72")}>{middleTruncateAttachmentName(name)}</span>
+      <ContextChipLabel className="max-w-72">{middleTruncateAttachmentName(name)}</ContextChipLabel>
       <span className="shrink-0 text-[10px] text-current">{size}</span>
       {suffix ? <span className="text-[10px] text-current">{suffix}</span> : null}
-    </Button>
+    </ContextChip>
   );
 }
 
@@ -259,8 +227,6 @@ export function FileChip(props: {
   size: string;
   isVideo: boolean;
   theme: "light" | "dark";
-  className: string;
-  labelClassName: string;
   accessibleLabel: string;
   tooltip: string;
   suffix?: string | null;
@@ -270,35 +236,35 @@ export function FileChip(props: {
   unresolved?: boolean;
   onOpen?: (() => void) | undefined;
 }) {
-  const className = cn(
-    props.className,
-    props.isVideo
-      ? CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.video
-      : CONTEXT_INLINE_CHIP_TONE_CLASS_NAMES.file,
-    props.onOpen && !props.disabled && CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
-    props.onOpen && !props.disabled && (props.isVideo ? "cursor-zoom-in" : "cursor-pointer"),
-    props.unresolved && "border-dashed text-foreground",
-    props.error && "border-destructive/35 bg-destructive/8 text-destructive",
-  );
   const content = <FileChipContent {...props} />;
+  const state = props.unresolved
+    ? ("unresolved" as const)
+    : props.error
+      ? ("invalid" as const)
+      : null;
   const attributes = {
-    className,
+    kind: props.isVideo ? "video" : "file",
+    ...(state ? { state } : {}),
     "aria-label": [props.accessibleLabel, props.suffix].filter(Boolean).join(", "),
     "data-markdown-copy": props.copyMarkdown,
     "data-context-unresolved": props.unresolved ? "true" : undefined,
-  };
+  } as const;
   return (
     <Tooltip>
       <TooltipTrigger
         render={
           props.onOpen ? (
-            <Button variant="chip" disabled={props.disabled} onClick={props.onOpen} {...attributes}>
+            <ContextChip
+              render={<button type="button" disabled={props.disabled} />}
+              onClick={props.onOpen}
+              {...attributes}
+            >
               {content}
-            </Button>
+            </ContextChip>
           ) : (
-            <span tabIndex={0} {...attributes}>
+            <ContextChip tabIndex={0} {...attributes}>
               {content}
-            </span>
+            </ContextChip>
           )
         }
       />
@@ -314,55 +280,33 @@ function FileChipContent(props: {
   size: string;
   isVideo: boolean;
   theme: "light" | "dark";
-  labelClassName: string;
   suffix?: string | null;
 }) {
   return (
     <>
       {props.isVideo ? (
-        <FilmIcon
-          className={cn(
-            COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
-            CONTEXT_INLINE_CHIP_ICON_TONE_CLASS_NAMES.video,
-            "size-3.5",
-          )}
-        />
+        <FilmIcon />
       ) : (
-        <PierreEntryIcon
-          pathValue={props.name}
-          kind="file"
-          theme={props.theme}
-          className="size-3.5"
-        />
+        <PierreEntryIcon pathValue={props.name} kind="file" theme={props.theme} />
       )}
-      <span className={cn(props.labelClassName, "max-w-72")}>
+      <ContextChipLabel className="max-w-72">
         {middleTruncateAttachmentName(props.name)}
-      </span>
+      </ContextChipLabel>
       <span className="shrink-0 text-[10px] text-current">{props.size}</span>
       {props.suffix ? <span className="text-[10px] text-current">{props.suffix}</span> : null}
     </>
   );
 }
 
-export function UnresolvedChip(props: {
-  label: string;
-  className: string;
-  labelClassName: string;
-  tooltip: string;
-  tooltipClassName: string;
-  copyMarkdown?: string;
-}) {
+export function UnresolvedChip(props: { label: string; tooltip: string; copyMarkdown?: string }) {
   return (
     <ContextChipShell
-      icon={<CircleDashedIcon className={cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5")} />}
+      icon={<CircleDashedIcon />}
       label={props.label}
-      className={props.className}
-      labelClassName={props.labelClassName}
+      state="unresolved"
       aria-label={`Unavailable context, ${props.label}`}
       data-markdown-copy={props.copyMarkdown}
       tooltip={props.tooltip}
-      tooltipClassName={props.tooltipClassName}
-      unresolved
     />
   );
 }
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index c9a0d0dd58578972ba793d31ca3b10ca77205f50..27b492ee2f4d23530933441695b20812150f1b67 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -39,7 +39,6 @@ const buttonVariants = cva(
         xs: "h-7 gap-1 px-[calc(--spacing(2)-1px)] text-sm sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
       },
       variant: {
-        chip: "",
         default:
           "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
         destructive:
@@ -85,8 +84,7 @@ function Button({ className, variant, size, render, ...props }: ButtonProps) {
     : "button";
 
   const defaultProps = {
-    className:
-      variant === "chip" ? cn(className) : cn(buttonVariants({ className, size, variant })),
+    className: cn(buttonVariants({ className, size, variant })),
     "data-slot": "button",
     type: typeValue,
   };
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 62a61463e69e2c1d8cbb7457e1c9792dfcb2b898..7105a34db4624f7bd8d261fdb49de6a283494f1d 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1770,8 +1770,12 @@ code {
 }
 
 .chat-markdown a {
+  text-decoration: none;
+}
+
+/* File links are Chips and own their color and focus ring. */
+.chat-markdown a:not(.chat-markdown-file-link) {
   color: var(--info-foreground);
-  text-decoration: none;
 }
 
 .chat-markdown a:not(.chat-markdown-file-link):hover,
@@ -1825,17 +1829,6 @@ code {
   font-size: 0.75rem;
 }
 
-.chat-markdown .chat-markdown-file-link,
-.chat-markdown .chat-markdown-file-link:hover {
-  color: var(--contrast-foreground);
-  text-decoration: none;
-}
-
-.chat-markdown .chat-markdown-file-link:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 70%, transparent);
-}
-
 .chat-markdown pre {
   max-width: 100%;
   overflow-x: auto;
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 80cff165214e548b9f2799c00d5f2d2a4ecd0f1e..fa982de05202fa596fe753ceb0449d3170fbe453 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 623;
+export const RESTYLE_CEILING = 603;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0