mixdog 1.1.2 → 1.2.1

package/src/tui/app/extension-pickers/plugins-pickers.mjs

@@ -3,34 +3,52 @@
 // (info / update / MCP / copy / uninstall) and the add-plugin prompt.
 import { readStatus, withScope } from './scope-note.mjs';
 
+// A plugin's MCP servers are derived from its declarations (`mcpServers` on
+// the status row); older hosts only report `mcpScript`/`mcpServerName`.
+function mcpNames(p) {
+  if (Array.isArray(p.mcpServers)) return p.mcpServers.map((server) => server.name);
+  return p.mcpServerName ? [p.mcpServerName] : [];
+}
+const hasMcp = (p) => mcpNames(p).length > 0 || Boolean(p.mcpScript || p.mcpInline);
+
+function serverState(server) {
+  if (server.serverEnabled === false) return 'off';
+  if (server.enabled === false) return 'plugin off';
+  return server.status || (server.connected ? 'connected' : 'disconnected');
+}
+
 const mcpSummary = (p) => {
-  if (!p.mcpScript) return '(none)';
-  const state = p.mcpEnabled ? 'enabled' : 'available';
-  return `${state} (${p.mcpServerName || 'plugin-mcp'})`;
+  if (!hasMcp(p))
+    return Array.isArray(p.mcpErrors) && p.mcpErrors.length ? `(invalid: ${p.mcpErrors[0].message})` : '(none)';
+  if (!Array.isArray(p.mcpServers)) return `${p.mcpEnabled ? 'enabled' : 'available'} (${mcpNames(p).join(', ')})`;
+  const errors =
+    Array.isArray(p.mcpErrors) && p.mcpErrors.length ? ` · ${p.mcpErrors.length} declaration error(s)` : '';
+  return `${p.mcpServers.map((server) => `${server.name} ${serverState(server)}`).join(', ')}${errors}`;
 };
 
 function mcpActionItem(p) {
-  if (!p.mcpScript) {
+  if (!hasMcp(p)) {
     return {
       value: 'enable-mcp',
-      label: 'No MCP script',
-      description: 'plugin does not expose scripts/run-mcp.mjs or mcp/server.mjs',
+      label: 'No MCP server',
+      description: 'plugin declares no MCP servers (.mcp.json or manifest mcpServers)',
       _action: 'noop',
     };
   }
   return {
     value: 'enable-mcp',
-    label: p.mcpEnabled ? 'Refresh MCP server' : 'Enable MCP server',
-    description: `${p.mcpServerName || 'plugin-mcp'} · ${p.mcpEnabled ? 'configured' : p.mcpScript}`,
+    label: p.mcpEnabled ? 'Reconnect MCP servers' : 'Enable MCP servers',
+    description: `${mcpNames(p).join(', ') || 'plugin MCP'} · ${p.mcpEnabled ? 'on' : 'turned off'}`,
     _action: 'enable-mcp',
   };
 }
 
 function pluginSummary(plugin) {
   const version = plugin.version ? ` · ${plugin.version}` : '';
-  const mcpState = plugin.mcpEnabled ? 'enabled' : plugin.mcpScript;
-  const mcp = plugin.mcpScript ? ` · mcp ${mcpState}` : '';
-  return `${plugin.sourceType || plugin.source}${version} · skills ${plugin.skillCount || 0}${mcp}`;
+  const mcpOff = plugin.mcpEnabled ? '' : ' off';
+  const mcp = hasMcp(plugin) ? ` · mcp ${mcpNames(plugin).length || 1}${mcpOff}` : '';
+  const warning = plugin.warning ? ` · ⚠ ${plugin.warning}` : '';
+  return `${plugin.sourceType || plugin.source}${version} · skills ${plugin.skillCount || 0}${mcp}${warning}`;
 }
 
 const pluginInfoNotice = (p) =>
@@ -41,6 +59,7 @@ const pluginInfoNotice = (p) =>
     `mcp: ${mcpSummary(p)}`,
     `applies to: ${Array.isArray(p.scope) && p.scope.length ? p.scope.join(', ') : 'all projects'}`,
     `root: ${p.root}`,
+    p.warning ? `warning: ${p.warning}` : '',
     p.description ? `\n${p.description}` : '',
   ]
     .filter(Boolean)
@@ -68,9 +87,9 @@ const pluginDetailItems = (p) => [
   },
   {
     value: 'copy-mcp-name',
-    label: p.mcpScript ? 'Copy MCP server name' : 'No MCP server name',
-    description: p.mcpServerName || '',
-    _action: p.mcpScript ? 'copy-mcp-name' : 'noop',
+    label: mcpNames(p).length ? 'Copy MCP server name' : 'No MCP server name',
+    description: mcpNames(p).join(', '),
+    _action: mcpNames(p).length ? 'copy-mcp-name' : 'noop',
   },
   {
     value: 'uninstall',
@@ -127,7 +146,7 @@ export function createPluginsPickers({
           void store
             .enablePluginMcp?.(p)
             .then(own.defer(() => openMcpPicker()))
-            .catch((e) => store.pushNotice(`plugin MCP enable failed: ${e?.message || e}`, 'error'));
+            .catch((e) => store.pushNotice(`plugin MCP reconnect failed: ${e?.message || e}`, 'error'));
           return;
         }
         if (detail._action === 'copy-root') {
@@ -135,7 +154,7 @@ export function createPluginsPickers({
           return;
         }
         if (detail._action === 'copy-mcp-name') {
-          copyText(p.mcpServerName || '', `copied plugin MCP server: ${p.mcpServerName}`);
+          copyText(mcpNames(p).join(', '), `copied plugin MCP server: ${mcpNames(p).join(', ')}`);
           return;
         }
         if (detail._action === 'uninstall') {

package/src/tui/app/message-selector.mjs

@@ -18,7 +18,8 @@ function selectableUserItems(items, limit = MAX_SELECTABLE_MESSAGES) {
   for (let index = source.length - 1; index >= 0 && rows.length < limit; index -= 1) {
     const item = source[index];
     if (item?.kind !== 'user') continue;
-    if (item?.id == null) continue;
+    // Prompts a compaction archived are display-only.
+    if (item?.id == null || item.archived === true) continue;
     const text = String(item.text || '').trim();
     if (!text) continue;
     rows.push({ id: String(item.id), text });

package/src/tui/app/model-options.mjs

@@ -169,6 +169,7 @@ const PROVIDER_DISPLAY_NAMES = new Map([
   ['anthropic-oauth', 'Anthropic OAuth'],
   ['grok-oauth', 'Grok OAuth'],
   ['muse-code-oauth', 'Muse Code'],
+  ['command-code-oauth', 'Command Code'],
   ['mimo-oauth', 'MiMo'],
   ['cursor-oauth', 'Cursor OAuth'],
   ['antigravity-oauth', 'Antigravity OAuth'],
@@ -191,12 +192,41 @@ const PROVIDER_DISPLAY_NAMES = new Map([
 export const providerDisplayName = (provider) =>
   PROVIDER_DISPLAY_NAMES.get(String(provider || '').toLowerCase()) ?? (provider || 'Provider');
 
+export const resolveProviderDisplayName = (provider, providerNames = null) =>
+  (String(provider || '')
+    .trim()
+    .startsWith('custom-') &&
+    providerNames?.[String(provider).trim()]) ||
+  providerDisplayName(provider);
+
+export const loadProviderDisplayNames = async (store) => {
+  let setup = null;
+  try {
+    setup = await store?.getProviderSetup?.();
+  } catch {
+    return {};
+  }
+  const names = {};
+  for (const group of ['api', 'oauth', 'local']) {
+    const entries = setup?.[group];
+    if (!Array.isArray(entries)) continue;
+    for (const entry of entries) {
+      if (!entry || typeof entry !== 'object') continue;
+      const id = String(entry.id || entry.provider || '').trim();
+      const name = String(entry.name || entry.label || '').trim();
+      if (id && name) names[id] = name;
+    }
+  }
+  return names;
+};
+
 const PROVIDER_DISPLAY_RANKS = {
   default: 0,
   'openai-oauth': 10,
   'anthropic-oauth': 20,
   'grok-oauth': 30,
   'muse-code-oauth': 33,
+  'command-code-oauth': 33.5,
   'mimo-oauth': 34,
   'antigravity-oauth': 31,
   'cursor-oauth': 32,
@@ -247,7 +277,7 @@ const routeModelDisplayName = (route) =>
     .filter(Boolean)
     .join(' ');
 
-const groupModelsByProvider = (models) => {
+const groupModelsByProvider = (models, providerNames = null) => {
   const providers = new Map();
   for (const model of models) {
     if (!providers.has(model.provider)) providers.set(model.provider, []);
@@ -257,22 +287,24 @@ const groupModelsByProvider = (models) => {
   const orderedProviders = [...providers.keys()].sort((a, b) => {
     const rank = providerDisplayRank(a) - providerDisplayRank(b);
     if (rank !== 0) return rank;
-    const label = providerDisplayName(a).localeCompare(providerDisplayName(b));
+    const label = resolveProviderDisplayName(a, providerNames).localeCompare(
+      resolveProviderDisplayName(b, providerNames)
+    );
     if (label !== 0) return label;
     return a.localeCompare(b);
   });
   return { providers, orderedProviders };
 };
 
-export const buildModelProviderItems = (models, currentRoute = null) => {
-  const { providers, orderedProviders } = groupModelsByProvider(models);
+export const buildModelProviderItems = (models, currentRoute = null, providerNames = null) => {
+  const { providers, orderedProviders } = groupModelsByProvider(models, providerNames);
   return orderedProviders.map((provider) => {
     const providerModels = providers.get(provider) || [];
     const currentModel =
       currentRoute?.provider === provider ? providerModels.find((model) => model.id === currentRoute.model) : null;
     return {
       value: `provider:${provider}`,
-      label: providerDisplayName(provider),
+      label: resolveProviderDisplayName(provider, providerNames),
       marker: currentModel ? '✓' : '',
       markerColor: theme.success,
       meta: currentModel ? modelRecordDisplayName(currentModel) : '',

package/src/tui/app/model-picker/provider-models-list.mjs

@@ -2,7 +2,7 @@
 // One provider's model list: rows from the catalog, the footer for the
 // highlighted row, and the keys that change its selections (←/→ effort,
 // C/Shift+C context, Tab Fast, T thinking). Enter saves through the caller.
-import { buildProviderModelItems, providerDisplayName } from '../model-options.mjs';
+import { buildProviderModelItems, resolveProviderDisplayName } from '../model-options.mjs';
 import { modelFooter } from './model-footer.mjs';
 import { createRouteSelection } from './route-selection.mjs';
 
@@ -73,7 +73,7 @@ export function openProviderModelsPicker({ view, provider, onBack, saveRoute })
       )
     );
     view.paint({
-      title: providerDisplayName(provider),
+      title: resolveProviderDisplayName(provider, view.providerNames),
       description: options.modelDescription || 'Select a model. Adjust Effort with ←/→.',
       footer: (item) => modelFooter(selection, item?._model),
       help:

package/src/tui/app/model-picker.mjs

@@ -10,7 +10,7 @@
  * state (getState) is read through a getter so it always reflects the current
  * render.
  */
-import { normalizeModelOptions, buildModelProviderItems } from './model-options.mjs';
+import { normalizeModelOptions, buildModelProviderItems, loadProviderDisplayNames } from './model-options.mjs';
 import { createModelCatalog } from './model-picker/catalog-load.mjs';
 import { openProviderModelsPicker, saveSelectedRoute } from './model-picker/provider-models-list.mjs';
 
@@ -77,6 +77,7 @@ export function createModelPicker({
     }
 
     const models = normalizeModelOptions(providerModels);
+    const providerNames = await loadProviderDisplayNames(store);
     const activeRoute = options.currentRoute || {
       provider: state.provider,
       model: state.model,
@@ -90,6 +91,7 @@ export function createModelPicker({
       state,
       models,
       activeRoute,
+      providerNames,
       returnTo,
       returnLabel,
       returnOnNestedCancel,
@@ -114,7 +116,7 @@ export function createModelPicker({
         providerListHighlightProvider = renderOptions.highlightProvider;
       }
       const highlightProvider = renderOptions.highlightProvider || providerListHighlightProvider || null;
-      const providerItems = buildModelProviderItems(models, activeRoute);
+      const providerItems = buildModelProviderItems(models, activeRoute, providerNames);
       const providerHighlight = highlightProvider || activeRoute?.provider || null;
       const providerInitialIndex = Math.max(
         0,

package/src/tui/app/skill-mention-palette.mjs

@@ -0,0 +1,88 @@
+/*
+ * app/skill-mention-palette.mjs — `$name` skill completion in the prompt.
+ *
+ * Typing `$` at the start of the draft or after whitespace/an opening
+ * bracket or quote (the shared runtime mention rule, runtime/shared/
+ * skill-mentions.mjs) opens the command palette with the user's enabled
+ * custom skills; accepting inserts `$name `. Built-in skills are not listed,
+ * but still load when their name is typed: the runtime resolves mentions.
+ */
+import { useEffect, useState } from 'react';
+import { isInMarkdownCode, isReservedMentionName } from '../../runtime/shared/skill-mentions.mjs';
+
+// A mention being typed just before the caret: `$` plus a partial name.
+const MENTION_TAIL = /(^|[\s([{"'`])\$([a-z0-9][a-z0-9-]{0,63})?$/;
+
+const caretIn = (text, caret) => (Number.isInteger(caret) ? Math.max(0, Math.min(text.length, caret)) : text.length);
+
+/** The mention being typed before `caret` (default: end of `value`), or null.
+ *  `start` is the `$`, `end` the caret. */
+export function skillMentionQuery(value, caret) {
+  const text = String(value ?? '');
+  const end = caretIn(text, caret);
+  const match = MENTION_TAIL.exec(text.slice(0, end));
+  if (!match) return null;
+  const start = match.index + match[1].length;
+  // `$` inside inline code or a fenced block is never a mention (the shared
+  // parser's rule, judged on the whole draft like the desktop composer).
+  if (isInMarkdownCode(text, start)) return null;
+  return { query: match[2] || '', start, end };
+}
+
+const byName = (a, b) => a.name.localeCompare(b.name, 'en');
+
+/** Palette rows for `query`: enabled, in-project (not `activeHere:false`)
+ *  non-built-in skills whose name starts with the query, then those that
+ *  merely contain it, each alphabetical. */
+export function skillMentionItems(skills, query) {
+  const needle = String(query || '').toLowerCase();
+  const usable = (Array.isArray(skills) ? skills : []).filter(
+    (skill) =>
+      typeof skill?.name === 'string' &&
+      skill.name &&
+      skill.enabled !== false &&
+      skill.activeHere !== false &&
+      skill.source !== 'builtin' &&
+      // `$path`/`$300` are never mentions, so offering them would insert prose.
+      !isReservedMentionName(skill.name)
+  );
+  const prefix = usable.filter((skill) => skill.name.startsWith(needle)).sort(byName);
+  const contains = needle
+    ? usable.filter((skill) => !skill.name.startsWith(needle) && skill.name.includes(needle)).sort(byName)
+    : [];
+  return [...prefix, ...contains].map((skill) => ({
+    kind: 'skill',
+    name: skill.name,
+    label: `$${skill.name}`,
+    description: skill.description || '',
+  }));
+}
+
+/** The draft with the `$fragment` before `caret` replaced by `$name `; the
+ *  text after the caret is kept and the caret lands after the insertion. */
+export function completeSkillMention(value, name, caret) {
+  const text = String(value ?? '');
+  const mention = skillMentionQuery(text, caret);
+  if (!mention || !name) return undefined;
+  const head = `${text.slice(0, mention.start)}$${name} `;
+  return { value: head + text.slice(mention.end), cursor: head.length };
+}
+
+/** The skill list for the palette, fetched each time a mention starts. */
+export function useSkillMentionSkills(store, active) {
+  const [skills, setSkills] = useState([]);
+  useEffect(() => {
+    if (!active) return undefined;
+    let live = true;
+    Promise.resolve()
+      .then(() => store.skillsStatus?.())
+      .then((status) => {
+        if (live) setSkills(Array.isArray(status?.skills) ? status.skills : []);
+      })
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [store, active]);
+  return skills;
+}

package/src/tui/app/slash-palette.mjs

@@ -2,6 +2,7 @@
  * app/slash-palette.mjs — which slash palette (if any) the prompt draft opens.
  */
 import { SLASH_COMMANDS, slashQuery, slashCommandMatches, compareSlashCommands } from './slash-commands.mjs';
+import { skillMentionItems, skillMentionQuery } from './skill-mention-palette.mjs';
 
 export function deriveSlashPalette({
   providerPrompt,
@@ -14,18 +15,33 @@ export function deriveSlashPalette({
   commandBusy,
   promptDraft,
   slashDismissedFor,
+  skills = [],
+  promptCaret = null,
 }) {
   const activeSlashQuery =
     providerPrompt || settingsPrompt || toolApproval || contextPanel || usagePanel ? null : slashQuery(promptDraft);
+  const surfaceFree = !picker && !toolApproval && !contextPanel && !usagePanel && !exiting && !commandBusy;
   // "Slash mode" is live whenever a /token is being edited and no other
   // surface owns the floating area. The palette stays OPEN for the whole
   // slash session — including 0-match frames — so its 14-row layout never
   // unmounts/remounts per keystroke (fullscreen repaint flicker fix).
-  const slashModeLive =
-    activeSlashQuery !== null && !picker && !toolApproval && !contextPanel && !usagePanel && !exiting && !commandBusy;
-  const slashCommands = !slashModeLive
-    ? []
-    : SLASH_COMMANDS.filter((command) => slashCommandMatches(command, activeSlashQuery)).sort(compareSlashCommands);
-  const slashPaletteOpen = slashModeLive && slashDismissedFor !== promptDraft;
-  return { activeSlashQuery, slashCommands, slashPaletteOpen };
+  const slashModeLive = activeSlashQuery !== null && surfaceFree;
+  if (!slashModeLive) {
+    // `$name` completion shares the palette, but opens only while a skill
+    // matches: `$HOME` or `$300` in prose must not raise a panel.
+    const mention =
+      surfaceFree && !providerPrompt && !settingsPrompt ? skillMentionQuery(promptDraft, promptCaret) : null;
+    const slashCommands = mention ? skillMentionItems(skills, mention.query) : [];
+    return {
+      activeSlashQuery: mention ? mention.query : null,
+      slashCommands,
+      slashPaletteOpen: slashCommands.length > 0 && slashDismissedFor !== promptDraft,
+      paletteKind: mention ? 'skills' : 'commands',
+    };
+  }
+  const slashCommands = SLASH_COMMANDS.filter((command) => slashCommandMatches(command, activeSlashQuery)).sort(
+    compareSlashCommands
+  );
+  const slashPaletteOpen = slashDismissedFor !== promptDraft;
+  return { activeSlashQuery, slashCommands, slashPaletteOpen, paletteKind: 'commands' };
 }

package/src/tui/app/transcript-row-estimate.mjs

@@ -20,6 +20,7 @@ import {
 import { isShellTool } from '../../runtime/shared/tool-card-model/shell-surface.mjs';
 import { stripLeadingStatusMarkerFromText } from '../../runtime/shared/tool-card-model/terminal-status.mjs';
 import { readRowsForDisplay } from '../../runtime/shared/read-row-numbers.mjs';
+import { appliedSkillsLine } from '../components/user-message-skills.mjs';
 import { aggregateRawResultForDisplay } from '../session/tool-result-status.mjs';
 import { formatExpandedResult, wrapExpandedResultLines } from '../components/tool-output-format.mjs';
 import {
@@ -100,7 +101,9 @@ function toolDisplayedResultTextForRows(item) {
   const backgroundError = String(bgArgs.error || '');
   const normalizedName = String(normalizeToolName(item?.name) || '').toLowerCase();
   const errorOnlyResult =
-    Boolean(rt) && hasBackgroundMetaForRows(normalizedName, bgArgs, rt) && isBackgroundErrorOnlyBody(rt, backgroundError);
+    Boolean(rt) &&
+    hasBackgroundMetaForRows(normalizedName, bgArgs, rt) &&
+    isBackgroundErrorOnlyBody(rt, backgroundError);
   if (!toolItemPendingForRows(item) && isBackgroundTaskTool(normalizedName)) {
     const meta = parseBackgroundTaskResultForRows(rt);
     if (meta?.hasResponse && String(meta.body || '').trim()) {
@@ -213,8 +216,13 @@ function estimateToolRenderedResultRows(value, { pathArg = '', isShell = false,
 export function estimateTranscriptItemRows(item, columns, toolOutputExpanded, attachedTool = false) {
   if (!item) return 1;
   switch (item.kind) {
-    case 'user':
-      return 1 + estimateWrappedRows(item.text, columns, 4);
+    case 'user': {
+      // UserMessage: marginTop + wrapped text + the applied-skills line.
+      const skillsLine = appliedSkillsLine(item.appliedSkills);
+      return (
+        1 + estimateWrappedRows(item.text, columns, 4) + (skillsLine ? estimateWrappedRows(skillsLine, columns, 4) : 0)
+      );
+    }
     case 'assistant':
       // marginTop={1} (AssistantMessage <Box>) + rendered body height.
       return (

package/src/tui/app/use-prompt-draft-flow.mjs

@@ -9,6 +9,7 @@
 import { useCallback } from 'react';
 import { slashCommandTokenForPaletteAccept } from './slash-commands.mjs';
 import { withPickerEnterLatch } from './picker-enter-latch.mjs';
+import { completeSkillMention } from './skill-mention-palette.mjs';
 import { applyPromptDraftChange } from './use-prompt-draft-flow/draft-change.mjs';
 import { cancelProviderPromptFlow, cancelSettingsPromptFlow } from './use-prompt-draft-flow/prompt-cancels.mjs';
 
@@ -85,9 +86,12 @@ export function usePromptDraftFlow({
   );
 
   const acceptSlashPalette = useCallback(
-    (draftValue = '') => {
+    (draftValue = '', caret) => {
       const command = slashCommands[slashIndex];
       if (!command) return false;
+      // A skill row completes the `$name` mention at the caret (the returned
+      // { value, cursor } replaces the draft) instead of running anything.
+      if (command.kind === 'skill') return completeSkillMention(draftValue, command.name, caret) ?? false;
       return withPickerEnterLatch(pickerOpenedFromEnterRef, pickerOpenedFromEnterTimerRef, () =>
         runSlashCommand(slashCommandTokenForPaletteAccept(command, draftValue), '')
       );
@@ -96,9 +100,10 @@ export function usePromptDraftFlow({
   );
 
   const completeSlashPalette = useCallback(
-    (draftValue = '') => {
+    (draftValue = '', caret) => {
       const command = slashCommands[slashIndex];
       if (!command) return undefined;
+      if (command.kind === 'skill') return completeSkillMention(draftValue, command.name, caret);
       const token = slashCommandTokenForPaletteAccept(command, draftValue);
       return token ? `/${token} ` : undefined;
     },

package/src/tui/app/use-prompt-state.mjs

@@ -7,6 +7,9 @@ import { useRef, useState } from 'react';
 export function usePromptState() {
   const [promptDraft, setPromptDraft] = useState('');
   const [promptDraftOverride, setPromptDraftOverride] = useState(null);
+  // The prompt caret offset as reported by PromptInput (null = end of draft);
+  // the `$name` skill palette reads the mention before it.
+  const [promptCaret, setPromptCaret] = useState(null);
   const promptLayoutValueRef = useRef('');
   const [, setPromptLayoutRows] = useState(1);
   const [textEntryLayoutRows, setTextEntryLayoutRows] = useState(1);
@@ -26,6 +29,8 @@ export function usePromptState() {
     setPromptDraft,
     promptDraftOverride,
     setPromptDraftOverride,
+    promptCaret,
+    setPromptCaret,
     promptLayoutValueRef,
     setPromptLayoutRows,
     textEntryLayoutRows,

package/src/tui/components/Message.jsx

@@ -17,6 +17,7 @@ import { Box, Text } from 'ink';
 import { theme, TURN_MARKER } from '../theme.mjs';
 import { StreamingMarkdown, resetStreamingMarkdownStablePrefix, windowPlainStreamingText } from './Markdown.jsx';
 import { assistantBodyWidth } from '../markdown/table-layout.mjs';
+import { appliedSkillsLine, userTextSegments } from './user-message-skills.mjs';
 
 // `themeEpoch` is a memo-busting prop (threaded from App): the active theme
 // mutates `theme` in-place, so a /theme switch must re-render this memoized row
@@ -66,6 +67,7 @@ export const UserMessage = React.memo(function UserMessage({
   text,
   attached = false,
   columns,
+  appliedSkills,
   themeEpoch: _themeEpoch = 0,
 }) {
   // `attached` = the previous transcript row is also a user message (consecutive
@@ -79,6 +81,10 @@ export const UserMessage = React.memo(function UserMessage({
   // makes Windows Terminal/conhost auto-wrap, which drifts the alt-screen frame
   // and stacks stale gray bands on re-render. One narrower cell is invisible.
   const bandColumns = Math.max(1, columns - 1);
+  // `$name` tokens of the skills this turn applied are marked; the applied
+  // skills are listed on their own line (user-message-skills.mjs).
+  const skillsLine = appliedSkillsLine(appliedSkills);
+  const segments = userTextSegments(text, appliedSkills);
   return (
     <Box
       flexDirection="column"
@@ -89,8 +95,23 @@ export const UserMessage = React.memo(function UserMessage({
       paddingRight={1}
     >
       <Text color={theme.mixdogIvory} wrap="wrap">
-        {text}
+        {segments.length === 1 && !segments[0].mention
+          ? text
+          : segments.map((segment, index) =>
+              segment.mention ? (
+                <Text key={index} color={theme.panelTitle} bold>
+                  {segment.text}
+                </Text>
+              ) : (
+                segment.text
+              )
+            )}
       </Text>
+      {skillsLine ? (
+        <Text color={theme.subtle} wrap="wrap">
+          {skillsLine}
+        </Text>
+      ) : null}
     </Box>
   );
 });

package/src/tui/components/PromptInput.jsx

@@ -24,7 +24,7 @@ import { createVerticalMover } from './prompt-input/edit-chords.mjs';
 import { cancelPromptImmediateFlush, schedulePromptImmediateFlush } from './prompt-input/immediate-render.mjs';
 import { renderSelectedText } from './prompt-input/selected-text.jsx';
 import { IME_LEFT_GUARD_COLUMNS, createCursorAnchor } from './prompt-input/cursor-anchor.mjs';
-import { createPromptKeyHandler } from './prompt-input/key-handler.mjs';
+import { createPromptKeyHandler, paletteResultDraft } from './prompt-input/key-handler.mjs';
 import { createPromptMouseSelection } from './prompt-input/mouse-selection.mjs';
 import { createUndoStack } from './prompt-input/undo-stack.mjs';
 
@@ -37,6 +37,8 @@ export function PromptInput({
   commandPaletteActive = false,
   commandPaletteOpen = commandPaletteActive,
   commandPaletteOptionCount = commandPaletteActive ? 2 : 0,
+  commandPaletteMovesCaret = false,
+  onCaretChange,
   mask = false,
   hint = '',
   hintTone = 'info',
@@ -66,6 +68,7 @@ export function PromptInput({
   const [, bumpCursorAnchorEpoch] = useState(0);
   const draftRef = useRef(draft);
   const lastReportedValueRef = useRef(draft.value);
+  const lastReportedCursorRef = useRef(null);
   // Bumped on every submit/draftOverride replace/unmount so an async paste
   // (clipboard read or onPasteText promise) that resolves after the draft
   // moved on can detect staleness and drop its result instead of mutating
@@ -171,9 +174,20 @@ export function PromptInput({
       lastReportedValueRef.current = next.value;
       onDraftChange?.(next.value);
     }
+    reportCaret(next.cursor);
     if (valueRef) valueRef.current = next.value;
   };
 
+  // The caret offset for caret-aware completion (`$name` skill mentions).
+  function reportCaret(nextCursor) {
+    if (nextCursor === lastReportedCursorRef.current) return;
+    lastReportedCursorRef.current = nextCursor;
+    onCaretChange?.(nextCursor);
+  }
+  // A (re)mounted input starts at the end of its initial value.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only report
+  useEffect(() => reportCaret(draftRef.current.cursor), []);
+
   const installCursorAnchor = () => {
     if (!boxRef.current || boxRef.current.internal_cursorAnchor) return false;
     // The anchor function itself (box-rect publish + caret math) lives in
@@ -327,8 +341,11 @@ export function PromptInput({
     const current = draftRef.current;
     const next = prefix ? insertText(current, prefix) : current;
     if (commandPaletteActive) {
-      const accepted = onCommandPaletteAccept?.(next.value);
-      if (accepted !== false) {
+      const accepted = onCommandPaletteAccept?.(next.value, next.cursor);
+      const replacement = paletteResultDraft(accepted);
+      if (replacement) {
+        commitDraft(replacement);
+      } else if (accepted !== false) {
         commitDraft({ value: '', cursor: 0, selectionAnchor: null });
       } else if (next !== current) {
         commitDraft(next);
@@ -361,6 +378,7 @@ export function PromptInput({
     commandPaletteActive,
     commandPaletteOpen,
     commandPaletteOptionCount,
+    commandPaletteMovesCaret,
     onCommandPaletteNavigate,
     onCommandPaletteAccept,
     onCommandPaletteCancel,

package/src/tui/components/SlashCommandPalette.jsx

@@ -28,6 +28,7 @@ function queryMatchesAlias(command, query) {
 }
 
 function commandDisplayLabel(command, query) {
+  if (command?.label) return command.label;
   const usage = String(command?.usage || command?.name || '').replace(/^\/+/, '');
   const aliasText =
     command?.showAliasUsage !== false &&
@@ -41,7 +42,15 @@ function commandDisplayLabel(command, query) {
   return `${label}${aliasText}`;
 }
 
-export function SlashCommandPalette({ commands, selectedIndex = 0, title = 'Commands', columns = 80, query = '' }) {
+export function SlashCommandPalette({
+  commands,
+  selectedIndex = 0,
+  title = 'Commands',
+  columns = 80,
+  query = '',
+  description: descriptionText = SLASH_DESCRIPTION,
+  help: helpText = SLASH_HELP,
+}) {
   const total = commands.length;
   const half = Math.floor(MAX_VISIBLE / 2);
   let start = Math.max(0, selectedIndex - half);
@@ -58,9 +67,9 @@ export function SlashCommandPalette({ commands, selectedIndex = 0, title = 'Comm
   const labelWidth = Math.min(COMMAND_LABEL_WIDTH, Math.max(12, Math.floor(columns * 0.45)));
   const descriptionWidth = Math.max(0, columns - labelWidth - 12);
   // Standard panel rhythm: title row, blank, description/hint row, blank, content.
-  const description = truncateText(SLASH_DESCRIPTION, Math.max(0, columns - 4));
+  const description = truncateText(descriptionText, Math.max(0, columns - 4));
   const titleWidth = stringWidth(String(title || ''));
-  const help = truncateText(SLASH_HELP, Math.max(0, columns - titleWidth - 7));
+  const help = truncateText(helpText, Math.max(0, columns - titleWidth - 7));
 
   return (
     <Box flexDirection="column" flexShrink={0} width="100%">

package/src/tui/components/TranscriptItem.jsx

@@ -80,7 +80,15 @@ export const Item = React.memo(function Item({
   let node = null;
   switch (item.kind) {
     case 'user':
-      node = <UserMessage text={item.text} attached={prevKind === 'user'} columns={columns} themeEpoch={themeEpoch} />;
+      node = (
+        <UserMessage
+          text={item.text}
+          attached={prevKind === 'user'}
+          columns={columns}
+          appliedSkills={item.appliedSkills}
+          themeEpoch={themeEpoch}
+        />
+      );
       break;
     case 'assistant':
       node = (