From cbcc84ee9511025b0f561142e284dc0b204e7446 Mon Sep 17 00:00:00 2001
From: Badcuban <108198679+badcuban@users.noreply.github.com>
Date: Sat, 22 Aug 2026 01:33:26 -0400
Subject: [PATCH] feat(web): skills join the composer / menu and commands read
 as pills

Typing / in a Codex thread now lists workspace skills in their own menu
section; picking one inserts the same $skill token as the $ shortcut.
Recognized leading commands (built-ins plus the provider's own) render
as an editable pill instead of a bare color tint. Skill chips turn amber
with an explanatory tooltip when the selected provider cannot resolve
them, instead of silently sending literal text. Menu sections are now
labeled by provider, split out plugin skills, and stay visible while
filtering, with keyboard order matching the visible section order.
---
 .../ComposerPromptEditor.browser.tsx          | 102 ++++++++++++---
 .../src/components/ComposerPromptEditor.tsx   |  96 ++++++++++----
 apps/web/src/components/chat/ChatComposer.tsx | 117 ++++++++++++++----
 .../components/chat/ComposerCommandMenu.tsx   |  35 ++++--
 .../chat/composerSlashCommandSearch.ts        |   7 ++
 apps/web/src/components/composerInlineChip.ts |   5 +
 apps/web/src/index.css                        |   8 ++
 7 files changed, 294 insertions(+), 76 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditor.browser.tsx b/apps/web/src/components/ComposerPromptEditor.browser.tsx
index 84b809371..f7c72dafc 100644
--- a/apps/web/src/components/ComposerPromptEditor.browser.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.browser.tsx
@@ -5,30 +5,42 @@ import { page, userEvent } from "vite-plus/test/browser";
 import { afterEach, describe, expect, it, vi } from "vite-plus/test";
 import { render } from "vitest-browser-react";
 
-import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "./ComposerPromptEditor";
+import {
+  ComposerPromptEditor,
+  type ComposerPromptEditorHandle,
+  type ComposerSkillAvailability,
+} from "./ComposerPromptEditor";
 
-function EditorHarness(props: { recognizedSlashCommands: ReadonlyArray<string> }) {
-  const [value, setValue] = useState("");
+function EditorHarness(props: {
+  recognizedSlashCommands: ReadonlyArray<string>;
+  initialValue?: string;
+  skillAvailability?: ComposerSkillAvailability;
+}) {
+  const [value, setValue] = useState(props.initialValue ?? "");
   const [cursor, setCursor] = useState(0);
   const editorRef = useRef<ComposerPromptEditorHandle | null>(null);
 
   return (
-    <ComposerPromptEditor
-      value={value}
-      cursor={cursor}
-      terminalContexts={[]}
-      skills={[]}
-      recognizedSlashCommands={props.recognizedSlashCommands}
-      disabled={false}
-      placeholder="Type here"
-      onRemoveTerminalContext={vi.fn()}
-      onChange={(nextValue, nextCursor) => {
-        setValue(nextValue);
-        setCursor(nextCursor);
-      }}
-      onPaste={vi.fn()}
-      editorRef={editorRef}
-    />
+    <>
+      <ComposerPromptEditor
+        value={value}
+        cursor={cursor}
+        terminalContexts={[]}
+        skills={[]}
+        recognizedSlashCommands={props.recognizedSlashCommands}
+        disabled={false}
+        placeholder="Type here"
+        onRemoveTerminalContext={vi.fn()}
+        onChange={(nextValue, nextCursor) => {
+          setValue(nextValue);
+          setCursor(nextCursor);
+        }}
+        onPaste={vi.fn()}
+        editorRef={editorRef}
+        {...(props.skillAvailability ? { skillAvailability: props.skillAvailability } : {})}
+      />
+      <span data-testid="composer-prompt-value">{value}</span>
+    </>
   );
 }
 
@@ -93,4 +105,56 @@ describe("ComposerPromptEditor command token", () => {
     expect(commandTokenText()).toBeNull();
     await screen.unmount();
   });
+
+  it("tints a namespaced provider command and keeps the prompt plain text", async () => {
+    const screen = await render(
+      <EditorHarness recognizedSlashCommands={["plan", "default", "posthog:signals"]} />,
+    );
+    await typeIntoEditor("/posthog:signals check the inbox");
+
+    await expect.poll(commandTokenText).toBe("/posthog:signals");
+    await expect
+      .poll(() => page.getByTestId("composer-prompt-value").query()?.textContent)
+      .toBe("/posthog:signals check the inbox");
+    await screen.unmount();
+  });
+});
+
+describe("ComposerPromptEditor skill chip", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("marks a skill chip stale once the provider's skill list is authoritative", async () => {
+    const availability = (authoritative: boolean): ComposerSkillAvailability => ({
+      knownSkillNames: new Set<string>(),
+      authoritative,
+      staleReason: "Not available with the selected provider",
+    });
+    const screen = await render(
+      <EditorHarness
+        recognizedSlashCommands={[]}
+        initialValue="$review-diff please"
+        skillAvailability={availability(false)}
+      />,
+    );
+
+    await expect
+      .poll(() => document.querySelectorAll("[data-composer-skill-chip]"))
+      .toHaveLength(1);
+    expect(document.querySelector("[data-composer-skill-stale]")).toBeNull();
+
+    await screen.rerender(
+      <EditorHarness
+        recognizedSlashCommands={[]}
+        initialValue="$review-diff please"
+        skillAvailability={availability(true)}
+      />,
+    );
+
+    await expect
+      .poll(() => document.querySelectorAll("[data-composer-skill-stale]"))
+      .toHaveLength(1);
+    await screen.unmount();
+  });
 });
diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 30def6729..a4db2769d 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -73,6 +73,7 @@ import {
   COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
   COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
   COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME,
+  COMPOSER_INLINE_STALE_SKILL_CHIP_CLASS_NAME,
   SKILL_CHIP_ICON_SVG,
 } from "./composerInlineChip";
 import { ComposerPendingTerminalContextChip } from "./chat/ComposerPendingTerminalContexts";
@@ -131,6 +132,28 @@ const ComposerTerminalContextActionsContext = createContext<{
   onRemoveTerminalContext: () => {},
 });
 
+/**
+ * Which `$skill` names the thread's selected provider can actually resolve.
+ * Chips read this at render time, so switching provider restyles them without
+ * rebuilding editor state. `authoritative` is false while the list is still
+ * loading — chips stay normal rather than flashing a warning.
+ */
+export type ComposerSkillAvailability = {
+  knownSkillNames: ReadonlySet<string>;
+  authoritative: boolean;
+  /** Tooltip for chips this provider cannot resolve. */
+  staleReason: string;
+};
+
+const EMPTY_SKILL_AVAILABILITY: ComposerSkillAvailability = {
+  knownSkillNames: new Set<string>(),
+  authoritative: false,
+  staleReason: "Not available with the selected provider",
+};
+
+const ComposerSkillAvailabilityContext =
+  createContext<ComposerSkillAvailability>(EMPTY_SKILL_AVAILABILITY);
+
 function ComposerMentionDecorator(props: { path: string }) {
   const theme = resolvedThemeFromDocument();
   const chip = (
@@ -248,13 +271,24 @@ function skillMetadataByName(
   );
 }
 
-function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: string | null }) {
+function ComposerSkillDecorator(props: {
+  skillName: string;
+  skillLabel: string;
+  skillDescription: string | null;
+}) {
+  const availability = use(ComposerSkillAvailabilityContext);
+  const isStale = availability.authoritative && !availability.knownSkillNames.has(props.skillName);
   const chip = (
     <span
-      className={COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME}
+      className={
+        isStale
+          ? COMPOSER_INLINE_STALE_SKILL_CHIP_CLASS_NAME
+          : COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME
+      }
       contentEditable={false}
       spellCheck={false}
       data-composer-skill-chip="true"
+      {...(isStale ? { "data-composer-skill-stale": "true" } : {})}
     >
       <span
         aria-hidden="true"
@@ -265,7 +299,8 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s
     </span>
   );
 
-  if (!props.skillDescription) {
+  const tooltip = isStale ? availability.staleReason : props.skillDescription;
+  if (!tooltip) {
     return chip;
   }
 
@@ -273,7 +308,7 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s
     <Tooltip>
       <TooltipTrigger render={chip} />
       <TooltipPopup side="top" className="max-w-120 whitespace-normal leading-tight">
-        {props.skillDescription}
+        {tooltip}
       </TooltipPopup>
     </Tooltip>
   );
@@ -350,6 +385,7 @@ class ComposerSkillNode extends DecoratorNode<React.ReactElement> {
   override decorate(): React.ReactElement {
     return (
       <ComposerSkillDecorator
+        skillName={this.__skillName}
         skillLabel={this.__skillLabel}
         skillDescription={this.__skillDescription}
       />
@@ -492,7 +528,10 @@ function $createComposerCommandTextNode(text: string): ComposerCommandTextNode {
   return $applyNodeReplacement(new ComposerCommandTextNode(text));
 }
 
-const LEADING_COMMAND_TOKEN_REGEX = /^\/([a-z][a-z-]*)(?=\s|$)/i;
+// Provider command names are not always plain words: Claude exposes plugin
+// skills as `plugin:skill`, and both providers allow digits and underscores.
+// The token still only styles when it matches a recognized name.
+const LEADING_COMMAND_TOKEN_REGEX = /^\/([a-z][a-z0-9:_-]*)(?=\s|$)/i;
 
 /** The token is only styleable while it is the very start of the prompt: the
  *  first text of the first paragraph, with nothing before it. */
@@ -1018,9 +1057,13 @@ interface ComposerPromptEditorProps {
   cursor: number;
   terminalContexts: ReadonlyArray<TerminalContextDraft>;
   skills: ReadonlyArray<ServerProviderSkill>;
-  /** Slash commands that trigger on Enter in this thread; the leading token
-   *  is tinted while it matches one of these. */
+  /** Command names this thread acts on — built-ins plus the selected
+   *  provider's commands. The leading token is styled as a pill while it
+   *  matches one of these; styling only, Enter handling lives elsewhere. */
   recognizedSlashCommands?: ReadonlyArray<string>;
+  /** Skill names the selected provider can resolve. Omitted means "unknown",
+   *  which renders every skill chip in its normal state. */
+  skillAvailability?: ComposerSkillAvailability;
   disabled: boolean;
   placeholder: string;
   className?: string;
@@ -1850,6 +1893,7 @@ export function ComposerPromptEditor({
   terminalContexts,
   skills,
   recognizedSlashCommands,
+  skillAvailability,
   disabled,
   placeholder,
   className,
@@ -1886,23 +1930,27 @@ export function ComposerPromptEditor({
     [],
   );
 
+  // Decorator nodes portal into this subtree, so skill chips read availability
+  // straight from context and restyle on a provider switch alone.
   return (
-    <LexicalComposer key={COMPOSER_EDITOR_HMR_KEY} initialConfig={initialConfig}>
-      <ComposerPromptEditorInner
-        value={value}
-        cursor={cursor}
-        terminalContexts={terminalContexts}
-        skills={skills}
-        disabled={disabled}
-        placeholder={placeholder}
-        onRemoveTerminalContext={onRemoveTerminalContext}
-        onChange={onChange}
-        onPaste={onPaste}
-        editorRef={editorRef}
-        {...(recognizedSlashCommands ? { recognizedSlashCommands } : {})}
-        {...(onCommandKeyDown ? { onCommandKeyDown } : {})}
-        {...(className ? { className } : {})}
-      />
-    </LexicalComposer>
+    <ComposerSkillAvailabilityContext value={skillAvailability ?? EMPTY_SKILL_AVAILABILITY}>
+      <LexicalComposer key={COMPOSER_EDITOR_HMR_KEY} initialConfig={initialConfig}>
+        <ComposerPromptEditorInner
+          value={value}
+          cursor={cursor}
+          terminalContexts={terminalContexts}
+          skills={skills}
+          disabled={disabled}
+          placeholder={placeholder}
+          onRemoveTerminalContext={onRemoveTerminalContext}
+          onChange={onChange}
+          onPaste={onPaste}
+          editorRef={editorRef}
+          {...(recognizedSlashCommands ? { recognizedSlashCommands } : {})}
+          {...(onCommandKeyDown ? { onCommandKeyDown } : {})}
+          {...(className ? { className } : {})}
+        />
+      </LexicalComposer>
+    </ComposerSkillAvailabilityContext>
   );
 }
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index f1f2858fd..84b8d09a2 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -94,7 +94,11 @@ import {
   shouldUseCompactComposerPrimaryActions,
   shouldUseCompactComposerFooter,
 } from "../composerFooterLayout";
-import { type ComposerPromptEditorHandle, ComposerPromptEditor } from "../ComposerPromptEditor";
+import {
+  type ComposerPromptEditorHandle,
+  type ComposerSkillAvailability,
+  ComposerPromptEditor,
+} from "../ComposerPromptEditor";
 import { ProviderModelPicker } from "./ProviderModelPicker";
 import { type ComposerCommandItem, ComposerCommandMenu } from "./ComposerCommandMenu";
 import { ComposerPendingApprovalActions } from "./ComposerPendingApprovalActions";
@@ -113,7 +117,7 @@ import { ComposerPendingPickedElementContexts } from "./ComposerPendingPickedEle
 import { ComposerPendingTranscriptHighlightContexts } from "./ComposerPendingTranscriptHighlightContexts";
 import { ComposerPendingTerminalContexts } from "./ComposerPendingTerminalContexts";
 import { resolveComposerMenuActiveItemId } from "./composerMenuHighlight";
-import { searchSlashCommandItems } from "./composerSlashCommandSearch";
+import { isPluginSkillCommandName, searchSlashCommandItems } from "./composerSlashCommandSearch";
 import { buildDefaultComposerPlaceholder } from "./composerPlaceholder";
 import {
   getComposerProviderState,
@@ -138,6 +142,7 @@ import {
 import { CircleAlertIcon, FileTextIcon, SparklesIcon, XIcon } from "lucide-react";
 import { proposedPlanTitle } from "../../proposedPlan";
 import {
+  getProviderDisplayName,
   getProviderInteractionModeToggle,
   providerModelSupportsInputModality,
 } from "../../providerModels";
@@ -192,6 +197,25 @@ const COMPOSER_FLOATING_LAYER_SELECTOR = [
   '[data-slot="autocomplete-popup"]',
 ].join(",");
 
+/** Menu rows for provider skills, shared by the `$` trigger and the `/` menu's
+ *  Skills section. Both insert the same `$skill-name` token on select. */
+function buildComposerSkillItems(
+  skills: ServerProvider["skills"],
+  provider: ProviderDriverKind,
+): Array<Extract<ComposerCommandItem, { type: "skill" }>> {
+  return skills.map((skill) => ({
+    id: `skill:${provider}:${skill.name}`,
+    type: "skill" as const,
+    provider,
+    skill,
+    label: formatProviderSkillDisplayName(skill),
+    description:
+      skill.shortDescription ??
+      skill.description ??
+      (skill.scope ? `${skill.scope} skill` : "Run provider skill"),
+  }));
+}
+
 const extendReplacementRangeForTrailingSpace = (
   text: string,
   rangeEnd: number,
@@ -926,6 +950,14 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     () => selectedProviderEntry?.snapshot ?? null,
     [selectedProviderEntry],
   );
+  // Heading for the provider section of the `/` menu — the instance's own name
+  // when it has one, so custom instances read as themselves.
+  const selectedProviderDisplayName = useMemo(
+    () =>
+      selectedProviderStatus?.displayName?.trim() ||
+      getProviderDisplayName(providerStatuses, selectedProvider),
+    [providerStatuses, selectedProvider, selectedProviderStatus],
+  );
   const projectSkillsQuery = useQuery(
     providerSkillsQueryOptions({
       environmentId,
@@ -935,6 +967,23 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     }),
   );
   const composerSkills = projectSkillsQuery.data ?? EMPTY_PROVIDER_SKILLS;
+  // `$skill` is Codex-native, so a draft carried to another provider sends its
+  // chips as literal words. Chips read this to warn; the list only counts as
+  // authoritative once Codex's skills have actually loaded.
+  const composerSkillAvailability = useMemo<ComposerSkillAvailability>(
+    () => ({
+      knownSkillNames: new Set(
+        composerSkills.filter((skill) => skill.enabled).map((skill) => skill.name),
+      ),
+      authoritative:
+        selectedProvider !== CODEX_AGENT_PROVIDER || projectSkillsQuery.data !== undefined,
+      staleReason:
+        selectedProvider === CODEX_AGENT_PROVIDER
+          ? "Skill not found in this workspace"
+          : "Not available with the selected provider",
+    }),
+    [composerSkills, projectSkillsQuery.data, selectedProvider],
+  );
   // Account-level usage (5h/weekly windows) for the instance the composer
   // is targeting — surfaced in the context window meter's hover card.
   const selectedProviderAccountUsage = useMemo(
@@ -1083,11 +1132,17 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const [isComposerModelPickerOpen, setIsComposerModelPickerOpen] = useState(false);
   const [isGoalEditorOpen, setIsGoalEditorOpen] = useState(false);
   const goalBarVisible = goalSupported && (threadGoal !== null || isGoalEditorOpen);
-  // Commands that will trigger on Enter in this thread; the editor tints the
-  // leading token so typed-past-the-menu commands still read as commands.
+  // Commands this thread will act on: the built-ins plus whatever the selected
+  // provider reports. The editor tints the leading token so typed-past-the-menu
+  // commands still read as commands.
   const recognizedSlashCommands = useMemo(
-    () => ["plan", "default", ...(goalSupported ? ["goal"] : [])],
-    [goalSupported],
+    () => [
+      "plan",
+      "default",
+      ...(goalSupported ? ["goal"] : []),
+      ...(selectedProviderStatus?.slashCommands ?? []).map((command) => command.name),
+    ],
+    [goalSupported, selectedProviderStatus],
   );
 
   useEffect(() => {
@@ -1230,23 +1285,37 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       );
       const query = composerTrigger.query.trim().toLowerCase();
       const slashCommandItems = [...builtInSlashCommandItems, ...providerSlashCommandItems];
-      if (!query) {
-        return slashCommandItems;
-      }
-      return searchSlashCommandItems(slashCommandItems, query);
+      const rankedCommandItems = query
+        ? searchSlashCommandItems(slashCommandItems, query)
+        : slashCommandItems;
+      // Skills are ranked in their own list and appended after the commands —
+      // the two kinds score on different scales, so a shared ranker would
+      // interleave them arbitrarily.
+      const skillItems = buildComposerSkillItems(
+        searchProviderSkills(composerSkills, query),
+        selectedProvider,
+      );
+      // The menu shows labeled sections even while filtering, so keyboard
+      // order must match section order: built-ins, provider commands, plugin
+      // skills, skills. Ranking is preserved within each section.
+      return [
+        ...rankedCommandItems.filter((item) => item.type === "slash-command"),
+        ...rankedCommandItems.filter(
+          (item) =>
+            item.type === "provider-slash-command" && !isPluginSkillCommandName(item.command.name),
+        ),
+        ...rankedCommandItems.filter(
+          (item) =>
+            item.type === "provider-slash-command" && isPluginSkillCommandName(item.command.name),
+        ),
+        ...skillItems,
+      ];
     }
     if (composerTrigger.kind === "skill") {
-      return searchProviderSkills(composerSkills, composerTrigger.query).map((skill) => ({
-        id: `skill:${selectedProvider}:${skill.name}`,
-        type: "skill" as const,
-        provider: selectedProvider,
-        skill,
-        label: formatProviderSkillDisplayName(skill),
-        description:
-          skill.shortDescription ??
-          skill.description ??
-          (skill.scope ? `${skill.scope} skill` : "Run provider skill"),
-      }));
+      return buildComposerSkillItems(
+        searchProviderSkills(composerSkills, composerTrigger.query),
+        selectedProvider,
+      );
     }
     return [];
   }, [
@@ -3273,10 +3342,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                   resolvedTheme={resolvedTheme}
                   isLoading={isComposerMenuLoading}
                   triggerKind={composerTriggerKind}
-                  groupSlashCommandSections={
-                    composerTrigger?.kind === "slash-command" &&
-                    composerTrigger.query.trim().length === 0
-                  }
+                  providerGroupLabel={selectedProviderDisplayName}
                   emptyStateText={composerMenuEmptyState}
                   activeItemId={activeComposerMenuItem?.id ?? null}
                   onHighlightedItemChange={onComposerMenuItemHighlighted}
@@ -3454,6 +3520,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 terminalContexts={[]}
                 skills={composerSkills}
                 recognizedSlashCommands={recognizedSlashCommands}
+                skillAvailability={composerSkillAvailability}
                 {...(showMobilePendingAnswerActions ? { className: "max-sm:pb-11" } : {})}
                 onRemoveTerminalContext={removeComposerTerminalContextFromDraft}
                 onChange={onPromptChange}
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index fbfc2c046..7d19d2236 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -8,6 +8,7 @@ import { BotIcon } from "lucide-react";
 import { memo, useLayoutEffect, useMemo, useRef } from "react";
 
 import { type ComposerSlashCommand, type ComposerTriggerKind } from "../../composer-logic";
+import { isPluginSkillCommandName } from "./composerSlashCommandSearch";
 import { formatProviderSkillInstallSource } from "~/providerSkillPresentation";
 import { cn } from "~/lib/utils";
 import {
@@ -81,7 +82,7 @@ function SkillGlyph(props: { className?: string }) {
 function groupCommandItems(
   items: ComposerCommandItem[],
   triggerKind: ComposerTriggerKind | null,
-  groupSlashCommandSections: boolean,
+  providerGroupLabel: string,
 ): ComposerCommandGroup[] {
   if (triggerKind === "skill") {
     return items.length > 0 ? [{ id: "skills", label: "Skills", items }] : [];
@@ -89,19 +90,37 @@ function groupCommandItems(
   if (triggerKind === "path") {
     return items.length > 0 ? [{ id: "paths", label: "Files & folders", items }] : [];
   }
-  if (triggerKind !== "slash-command" || !groupSlashCommandSections) {
+  if (triggerKind !== "slash-command") {
     return [{ id: "default", label: null, items }];
   }
 
   const builtInItems = items.filter((item) => item.type === "slash-command");
   const providerItems = items.filter((item) => item.type === "provider-slash-command");
+  // Only plugin skills are identifiable in a provider's command list — Claude
+  // namespaces them `plugin:skill`. Everything else stays with the provider's
+  // own commands, because personal and project skills look like commands.
+  // Keyboard order relies on the flat item list already matching this section
+  // order (ChatComposer partitions with the same predicate).
+  const pluginSkillItems = providerItems.filter((item) =>
+    isPluginSkillCommandName(item.command.name),
+  );
+  const providerCommandItems = providerItems.filter(
+    (item) => !isPluginSkillCommandName(item.command.name),
+  );
+  const skillItems = items.filter((item) => item.type === "skill");
 
   const groups: ComposerCommandGroup[] = [];
   if (builtInItems.length > 0) {
     groups.push({ id: "built-in", label: "Built-in", items: builtInItems });
   }
-  if (providerItems.length > 0) {
-    groups.push({ id: "provider", label: "Provider", items: providerItems });
+  if (providerCommandItems.length > 0) {
+    groups.push({ id: "provider", label: providerGroupLabel, items: providerCommandItems });
+  }
+  if (pluginSkillItems.length > 0) {
+    groups.push({ id: "plugin-skills", label: "Plugin skills", items: pluginSkillItems });
+  }
+  if (skillItems.length > 0) {
+    groups.push({ id: "skills", label: "Skills", items: skillItems });
   }
   return groups;
 }
@@ -111,7 +130,8 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
   resolvedTheme: "light" | "dark";
   isLoading: boolean;
   triggerKind: ComposerTriggerKind | null;
-  groupSlashCommandSections?: boolean;
+  /** Display name of the selected provider, used as the provider group heading. */
+  providerGroupLabel?: string;
   emptyStateText?: string;
   activeItemId: string | null;
   onHighlightedItemChange: (itemId: string | null) => void;
@@ -119,9 +139,8 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
 }) {
   const listRef = useRef<HTMLDivElement>(null);
   const groups = useMemo(
-    () =>
-      groupCommandItems(props.items, props.triggerKind, props.groupSlashCommandSections ?? true),
-    [props.groupSlashCommandSections, props.items, props.triggerKind],
+    () => groupCommandItems(props.items, props.triggerKind, props.providerGroupLabel ?? "Provider"),
+    [props.items, props.providerGroupLabel, props.triggerKind],
   );
 
   useLayoutEffect(() => {
diff --git a/apps/web/src/components/chat/composerSlashCommandSearch.ts b/apps/web/src/components/chat/composerSlashCommandSearch.ts
index 5d8ccce8c..10a999dee 100644
--- a/apps/web/src/components/chat/composerSlashCommandSearch.ts
+++ b/apps/web/src/components/chat/composerSlashCommandSearch.ts
@@ -81,3 +81,10 @@ export function searchSlashCommandItems(
 
   return ranked.map((entry) => entry.item);
 }
+
+/** Plugin skills are the only provider commands identifiable by name — Claude
+ *  namespaces them `plugin:skill`. Both the `/` menu's section split and the
+ *  composer's flat keyboard order partition with this same rule. */
+export function isPluginSkillCommandName(name: string): boolean {
+  return name.includes(":");
+}
diff --git a/apps/web/src/components/composerInlineChip.ts b/apps/web/src/components/composerInlineChip.ts
index 49e01e3f3..7c9ddc7ad 100644
--- a/apps/web/src/components/composerInlineChip.ts
+++ b/apps/web/src/components/composerInlineChip.ts
@@ -8,6 +8,11 @@ export const COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME = "truncate select-none leadi
 export const COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME =
   "inline-flex max-w-full select-none items-center gap-1 rounded-md border border-fuchsia-500/25 bg-fuchsia-500/12 px-1.5 py-px font-medium text-[12px] leading-[1.1] text-fuchsia-700 align-middle dark:text-fuchsia-300";
 
+/** Same chip shape, amber warning tint: the selected provider cannot resolve
+ *  this skill, so the token would be sent as literal words. */
+export const COMPOSER_INLINE_STALE_SKILL_CHIP_CLASS_NAME =
+  "inline-flex max-w-full select-none items-center gap-1 rounded-md border border-amber-500/30 bg-amber-500/12 px-1.5 py-px font-medium text-[12px] leading-[1.1] text-amber-700 align-middle dark:text-amber-300";
+
 export const SKILL_CHIP_ICON_SVG = `<svg width="14" height="14" 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 =
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 167ef28c2..a5ff0bf94 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1338,8 +1338,16 @@ label:has(> select#reasoning-effort) select {
 }
 
 /* Leading slash-command token in the composer (ComposerCommandTextNode).
+   Pill shaped like the inline chips (composerInlineChip.ts) but tinted with the
+   primary accent, so commands stay distinguishable from skill chips. Vertical
+   padding stays at 1px so promoting the token does not shift line metrics.
    One-shot fade-in on recognition; no looping animation. */
 .composer-command-token {
+  border: 1px solid color-mix(in srgb, var(--color-primary-readable) 28%, transparent);
+  border-radius: var(--radius-md);
+  background-color: color-mix(in srgb, var(--color-primary-readable) 10%, transparent);
+  padding-block: 1px;
+  padding-inline: 0.25rem;
   color: var(--color-primary-readable);
   animation: composer-command-token-in 180ms ease-out;
 }