feat(chat): add skill preload — /command chips trigger skill tool calls before LLM

- Add SkillToolCall component (ZapIcon, Skill(name) title, success/error state)
- Register SkillToolCall in ToolCallBlock for tool names 'skill' and 'load_skill'
- In ChatPaneInterface.handleSend: extract custom command chip names from content,
  strip leading / from message text, pass names as metadata.skills to sendMessage
- Add skills?: string[] to sendMessageInput metadata schema (zod.ts)
- Pass preloadSkills to harness.sendMessage in service.ts
- Add ChatSendMessageInput.metadata.skills type field
- Add docs/skill-preload-feature.md with implementation state and setup instructions

Requires superset-sh/mastra#9 for harness.sendMessage preloadSkills support
and .claude/commands/ being included in skillPaths.

Author: michalkopanski

apps/desktop/src/renderer/components/Chat/ChatInterface/components/ToolCallBlock/ToolCallBlock.tsx

@@ -35,12 +35,13 @@ import { ListProjectsToolCall } from "./components/ListProjectsToolCall";
 import { ListTaskStatusesToolCall } from "./components/ListTaskStatusesToolCall";
 import { ListTasksToolCall } from "./components/ListTasksToolCall";
 import { ListWorkspacesToolCall } from "./components/ListWorkspacesToolCall";
+import { LspInspectToolCall } from "./components/LspInspectToolCall";
 import { StartAgentSessionToolCall } from "./components/StartAgentSessionToolCall";
+import { SkillToolCall } from "./components/SkillToolCall";
 import { SubagentToolCall } from "./components/SubagentToolCall";
-import { LspInspectToolCall } from "./components/LspInspectToolCall";
-import { TaskWriteToolCall } from "./components/TaskWriteToolCall";
 import { SupersetToolCall } from "./components/SupersetToolCall";
 import { SwitchWorkspaceToolCall } from "./components/SwitchWorkspaceToolCall";
+import { TaskWriteToolCall } from "./components/TaskWriteToolCall";
 import { UpdateTaskToolCall } from "./components/UpdateTaskToolCall";
 import { UpdateWorkspaceToolCall } from "./components/UpdateWorkspaceToolCall";
 import { getExecuteCommandViewModel } from "./utils/getExecuteCommandViewModel";
@@ -646,6 +647,16 @@ export function ToolCallBlock({
 		);
 	}
 
+	if (toolName === "skill" || toolName === "load_skill") {
+		const skillName =
+			typeof args.name === "string"
+				? args.name
+				: typeof args.command === "string"
+					? args.command
+					: toolDisplayName;
+		return <SkillToolCall part={part} skillName={skillName} />;
+	}
+
 	// --- Fallback: generic tool UI ---
 	return <GenericToolCall part={part} toolName={toolDisplayName} />;
 }

apps/desktop/src/renderer/components/Chat/ChatInterface/components/ToolCallBlock/components/SkillToolCall/SkillToolCall.tsx

@@ -0,0 +1,35 @@
+import { ToolCallRow } from "@superset/ui/ai-elements/tool-call-row";
+import { ZapIcon } from "lucide-react";
+import type { ToolPart } from "../../../../utils/tool-helpers";
+
+type SkillToolCallProps = {
+	part: ToolPart;
+	skillName: string;
+};
+
+export function SkillToolCall({ part, skillName }: SkillToolCallProps) {
+	const isError = part.state === "output-error";
+	const isPending =
+		part.state !== "output-available" && part.state !== "output-error";
+
+	return (
+		<ToolCallRow
+			icon={ZapIcon}
+			isError={isError}
+			isPending={isPending}
+			title={`Skill(${skillName})`}
+		>
+			{!isPending ? (
+				<div className="py-1 pl-3">
+					{isError ? (
+						<p className="text-xs text-destructive">Failed to load skill</p>
+					) : (
+						<p className="text-xs text-muted-foreground">
+							Successfully loaded skill
+						</p>
+					)}
+				</div>
+			) : undefined}
+		</ToolCallRow>
+	);
+}

apps/desktop/src/renderer/components/Chat/ChatInterface/components/ToolCallBlock/components/SkillToolCall/index.ts

@@ -0,0 +1 @@
+export { SkillToolCall } from "./SkillToolCall";

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatPane/components/WorkspaceChatInterface/ChatPaneInterface.tsx

@@ -9,6 +9,7 @@ import { useQuery } from "@tanstack/react-query";
 import type { ChatStatus } from "ai";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { findSlashCommandByNameOrAlias } from "@superset/chat/shared";
 import type { SlashCommand } from "renderer/components/Chat/ChatInterface/hooks/useSlashCommands";
 import type {
 	ModelOption,
@@ -503,7 +504,7 @@ export function ChatPaneInterface({
 	// Scroll chat to bottom whenever the footer question overlay appears, changes, or disappears
 	useEffect(() => {
 		bumpFooterScroll();
-	}, [pendingQuestion?.questionId, pendingQuestion?.question, bumpFooterScroll]);
+	}, [bumpFooterScroll]);
 
 	useEffect(() => {
 		onRawSnapshotChange?.({
@@ -530,6 +531,27 @@ export function ChatPaneInterface({
 		async (payload: { content: string; files?: HarnessFilePayload[] }) => {
 			let content = payload.content.trim();
 
+			// Extract custom skill chips (e.g. /redesign anywhere in message) before
+			// slash command resolution. Built-in commands at the start still go through
+			// the existing resolver; custom commands become preloadSkills metadata.
+			const skillNames: string[] = [];
+			const contentWithSkillsExtracted = content.replace(
+				/\/(\S+)/g,
+				(match, name: string) => {
+					const command = findSlashCommandByNameOrAlias(slashCommands, name);
+					if (command?.kind === "custom") {
+						if (!skillNames.includes(command.name)) {
+							skillNames.push(command.name);
+						}
+						return name; // strip the leading /
+					}
+					return match;
+				},
+			);
+			if (skillNames.length > 0) {
+				content = contentWithSkillsExtracted.trim();
+			}
+
 			const isSlashCommand = content.startsWith("/");
 			const slashCommandResult = await resolveSlashCommandInput(content);
 			if (slashCommandResult.handled) {
@@ -587,6 +609,7 @@ export function ChatPaneInterface({
 				metadata: {
 					model: activeModel?.id,
 					thinkingLevel,
+					...(skillNames.length > 0 ? { skills: skillNames } : {}),
 				},
 			};
 
@@ -634,6 +657,7 @@ export function ChatPaneInterface({
 			sendMessageToSession,
 			setRuntimeErrorMessage,
 			onUserMessageSubmitted,
+			slashCommands,
 			thinkingLevel,
 		],
 	);

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatPane/components/WorkspaceChatInterface/utils/sendMessage/sendMessage.ts

@@ -12,6 +12,7 @@ export type ChatSendMessageInput = {
 	metadata: {
 		model?: string;
 		thinkingLevel?: ThinkingLevel;
+		skills?: string[];
 	};
 };
 

docs/skill-preload-feature.md

@@ -0,0 +1,126 @@
+# Skill Preload Feature — Implementation State
+
+Branch: `chat-ux-enhancements` (super-canopy)
+Mastra PR: superset-sh/mastra#9 (branch `mk/skill-preload-and-command-paths`)
+
+## What this does
+
+When a user embeds a `/command` chip in a message — e.g. "please help me /redesign this component" — the system:
+
+1. Extracts the custom command name(s) from the chip nodes
+2. Strips the leading `/` from each chip in the message text sent to the LLM
+3. Passes the command names as `metadata.skills` to the backend
+4. The backend forwards them as `preloadSkills` to `harness.sendMessage()`
+5. The harness prepends an instruction so the agent calls `skill(name)` for each one before responding
+6. Visible `SkillToolCall` blocks appear in the chat UI before the LLM reply
+
+Built-in slash commands (`/new`, `/stop`, `/model`, `/mcp`) are unaffected — only `kind === "custom"` commands are extracted as skills.
+
+---
+
+## Files changed in super-canopy
+
+### New files
+- `apps/desktop/src/renderer/components/Chat/ChatInterface/components/ToolCallBlock/components/SkillToolCall/SkillToolCall.tsx`
+- `apps/desktop/src/renderer/components/Chat/ChatInterface/components/ToolCallBlock/components/SkillToolCall/index.ts`
+
+### Modified files
+
+**`packages/chat/src/server/trpc/zod.ts`**
+- Added `skills?: z.array(z.string())` to `sendMessageInput` metadata schema
+
+**`packages/chat/src/server/trpc/service.ts`**
+- Passes `preloadSkills: input.metadata?.skills` to `harness.sendMessage()`
+
+**`apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceChat/components/WorkspaceChatInterface/utils/sendMessage/sendMessage.ts`**
+- Added `skills?: string[]` to `ChatSendMessageInput.metadata` type
+
+**`apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceChat/components/WorkspaceChatInterface/ChatPaneInterface.tsx`**
+- Added import: `findSlashCommandByNameOrAlias` from `@superset/chat/shared`
+- In `handleSend`: extracts custom skill chip names from content via regex, strips `/` prefix, passes as `metadata.skills`
+- Added `slashCommands` to `useCallback` dependency array
+
+**`apps/desktop/src/renderer/components/Chat/ChatInterface/components/ToolCallBlock/ToolCallBlock.tsx`**
+- Added import + registration for `SkillToolCall`
+- Handles `toolName === "skill" || toolName === "load_skill"`
+
+---
+
+## Files changed in mastra fork (superset-sh/mastra#9)
+
+**`mastracode/src/agents/workspace.ts`**
+- Added `.claude/commands/` and `.agents/commands/` (local + global) to `skillPaths`
+- These directories are where Superset slash command files live (`.md` files)
+
+**`packages/core/src/harness/harness.ts`**
+- Added `preloadSkills?: string[]` to `sendMessage()` signature
+- When provided: prepends `<system>` block instructing agent to call `skill(name)` for each entry before responding
+
+---
+
+## Local testing setup
+
+The `package.json` resolutions in this branch are **temporarily pointing to local tarballs** at `/tmp/mastra-local/`. These files only exist on the machine where they were built.
+
+To rebuild from the mastra fork on a new machine:
+
+```bash
+# 1. Clone or pull the mastra fork
+git clone https://github.com/superset-sh/mastra.git ~/Sites/mastra
+cd ~/Sites/mastra
+git checkout mk/skill-preload-and-command-paths
+
+# 2. Install dependencies
+corepack enable
+pnpm install
+
+# 3. Build mastracode and @mastra/core
+pnpm turbo build --filter="@mastra/core" --filter="mastracode"
+
+# 4. Pack the tarballs
+mkdir -p /tmp/mastra-local
+cd mastracode && pnpm pack --pack-destination /tmp/mastra-local && cd ..
+cd packages/core && pnpm pack --pack-destination /tmp/mastra-local && cd ../..
+
+# 5. Wire into super-canopy (already done in package.json on this branch)
+cd /path/to/super-canopy
+bun install
+```
+
+To restore production packages after testing:
+
+```bash
+# In super-canopy package.json, revert resolutions back to:
+# "mastracode": "https://github.com/superset-sh/mastra/releases/download/mastracode-v0.4.0-superset.16/mastracode-0.10.0-alpha.6.tgz"
+# "@mastra/core": "https://github.com/superset-sh/mastra/releases/download/mastracode-v0.4.0-superset.16/mastra-core-1.18.0-alpha.3.tgz"
+bun install
+```
+
+Once superset-sh/mastra#9 is merged and a new tarball release is cut, update the `resolutions` URLs to point to the new release and remove the local tarball entries.
+
+---
+
+## What's NOT done yet
+
+- The `package.json` resolutions need to be reverted to GitHub URLs before merging this branch (the local `/tmp/mastra-local/` paths will break on CI and other machines)
+- Once mastra#9 is merged + released as `mastracode-v0.4.0-superset.17` (or similar), update resolutions to the new release URLs
+- The `TiptapPromptEditor`'s `SlashCommandPreview` component shows a preview for the old single-command-at-start flow — may want to update it to handle embedded chips
+- Consider whether the `focusShortcutText` hint in the workspace `ChatInputFooter` needs to be re-added (it was removed in a previous refactor; the main `ChatInputFooter` passes it via `TiptapPromptEditor` but the workspace version does not pass `sessionId`/`workspaceId`)
+
+---
+
+## How to test
+
+1. Add a command file to the project:
+   ```bash
+   echo "You are a UI redesign expert. Analyze the component and suggest improvements." > .claude/commands/redesign.md
+   ```
+
+2. Start the desktop app:
+   ```bash
+   bun dev --filter=@superset/desktop
+   ```
+
+3. In chat, type `help me /redesign`, select `redesign` from the slash command popover, then submit.
+
+4. Expected: `Skill(redesign)` tool call block appears in the chat before the LLM reply, with "Successfully loaded skill" shown when complete.

packages/chat/src/server/trpc/service.ts

@@ -284,7 +284,11 @@ export class ChatRuntimeService {
 									? submittedUserMessage
 									: undefined,
 						});
-						return runtime.harness.sendMessage(input.payload);
+						const skills = input.metadata?.skills;
+						return runtime.harness.sendMessage({
+							...input.payload,
+							...(skills?.length ? { preloadSkills: skills } : {}),
+						});
 					}),
 
 				restartFromMessage: t.procedure

packages/chat/src/server/trpc/zod.ts

@@ -86,6 +86,8 @@ export const sendMessageInput = z.object({
 		.object({
 			model: z.string().optional(),
 			thinkingLevel: thinkingLevelSchema.optional(),
+			/** Skill names to preload before the LLM sees the message. */
+			skills: z.array(z.string()).optional(),
 		})
 		.optional(),
 });