feat: Implement slash command functionality in the orchestrator

- Refactored NodePalette to remove unused templates and streamline the UI.
- Enhanced PropertyPanel to support slash commands with input fields for command name and arguments.
- Introduced TagEditor for inline variable editing and custom template creation.
- Updated PromptTemplateNode to display slash command badges and instructions.
- Modified flow types to include slashCommand and slashArgs for structured execution.
- Adjusted flow executor to construct instructions based on slash command fields.

Author: catlog22

ccw/frontend/src/components/ui/CommandCombobox.tsx

@@ -1,53 +1,99 @@
 // ========================================
 // Command Combobox Component
 // ========================================
-// Searchable dropdown for selecting slash commands
+// Searchable dropdown for selecting slash commands (commands + skills)
 
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { ChevronDown, Search } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useCommands } from '@/hooks/useCommands';
-import type { Command } from '@/lib/api';
+import { useSkills } from '@/hooks/useSkills';
+
+export interface CommandSelectDetails {
+  name: string;
+  argumentHint?: string;
+  description?: string;
+  source: 'command' | 'skill';
+}
+
+interface UnifiedItem {
+  name: string;
+  description: string;
+  group: string;
+  argumentHint?: string;
+  source: 'command' | 'skill';
+}
 
 interface CommandComboboxProps {
   value: string;
   onChange: (value: string) => void;
+  onSelectDetails?: (details: CommandSelectDetails) => void;
   placeholder?: string;
   className?: string;
 }
 
-export function CommandCombobox({ value, onChange, placeholder, className }: CommandComboboxProps) {
+export function CommandCombobox({ value, onChange, onSelectDetails, placeholder, className }: CommandComboboxProps) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState('');
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { commands, isLoading } = useCommands({
+  const { commands, isLoading: commandsLoading } = useCommands({
     filter: { showDisabled: false },
   });
 
-  // Group commands by group field
+  const { skills, isLoading: skillsLoading } = useSkills({
+    filter: { enabledOnly: true },
+  });
+
+  const isLoading = commandsLoading || skillsLoading;
+
+  // Merge commands and skills into unified items
+  const unifiedItems = useMemo<UnifiedItem[]>(() => {
+    const items: UnifiedItem[] = [];
+
+    for (const cmd of commands) {
+      items.push({
+        name: cmd.name,
+        description: cmd.description,
+        group: cmd.group || 'other',
+        argumentHint: cmd.argumentHint,
+        source: 'command',
+      });
+    }
+
+    for (const skill of skills) {
+      items.push({
+        name: skill.name,
+        description: skill.description,
+        group: 'skills',
+        source: 'skill',
+      });
+    }
+
+    return items;
+  }, [commands, skills]);
+
+  // Group and filter items
   const groupedFiltered = useMemo(() => {
     const filtered = search
-      ? commands.filter(
-          (c) =>
-            c.name.toLowerCase().includes(search.toLowerCase()) ||
-            c.description.toLowerCase().includes(search.toLowerCase()) ||
-            c.aliases?.some((a) => a.toLowerCase().includes(search.toLowerCase()))
+      ? unifiedItems.filter(
+          (item) =>
+            item.name.toLowerCase().includes(search.toLowerCase()) ||
+            item.description.toLowerCase().includes(search.toLowerCase())
         )
-      : commands;
+      : unifiedItems;
 
-    const groups: Record<string, Command[]> = {};
-    for (const cmd of filtered) {
-      const group = cmd.group || 'other';
-      if (!groups[group]) groups[group] = [];
-      groups[group].push(cmd);
+    const groups: Record<string, UnifiedItem[]> = {};
+    for (const item of filtered) {
+      if (!groups[item.group]) groups[item.group] = [];
+      groups[item.group].push(item);
     }
     return groups;
-  }, [commands, search]);
+  }, [unifiedItems, search]);
 
   const totalFiltered = useMemo(
-    () => Object.values(groupedFiltered).reduce((sum, cmds) => sum + cmds.length, 0),
+    () => Object.values(groupedFiltered).reduce((sum, items) => sum + items.length, 0),
     [groupedFiltered]
   );
 
@@ -65,12 +111,18 @@ export function CommandCombobox({ value, onChange, placeholder, className }: Com
   }, [open]);
 
   const handleSelect = useCallback(
-    (name: string) => {
-      onChange(name);
+    (item: UnifiedItem) => {
+      onChange(item.name);
+      onSelectDetails?.({
+        name: item.name,
+        argumentHint: item.argumentHint,
+        description: item.description,
+        source: item.source,
+      });
       setOpen(false);
       setSearch('');
     },
-    [onChange]
+    [onChange, onSelectDetails]
   );
 
   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -89,11 +141,9 @@ export function CommandCombobox({ value, onChange, placeholder, className }: Com
   );
 
   // Display label for current value
-  const selectedCommand = commands.find((c) => c.name === value);
+  const selectedItem = unifiedItems.find((item) => item.name === value);
   const displayValue = value
-    ? selectedCommand
-      ? `/${selectedCommand.name}`
-      : `/${value}`
+    ? `/${selectedItem?.name || value}`
     : '';
 
   return (
@@ -135,7 +185,7 @@ export function CommandCombobox({ value, onChange, placeholder, className }: Com
             />
           </div>
 
-          {/* Command list */}
+          {/* Items list */}
           <div className="max-h-64 overflow-y-auto p-1">
             {isLoading ? (
               <div className="py-4 text-center text-sm text-muted-foreground">Loading...</div>
@@ -145,26 +195,31 @@ export function CommandCombobox({ value, onChange, placeholder, className }: Com
               </div>
             ) : (
               Object.entries(groupedFiltered)
-                .sort(([a], [b]) => a.localeCompare(b))
-                .map(([group, cmds]) => (
+                .sort(([a], [b]) => {
+                  // Skills group last
+                  if (a === 'skills') return 1;
+                  if (b === 'skills') return -1;
+                  return a.localeCompare(b);
+                })
+                .map(([group, items]) => (
                   <div key={group}>
                     <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                       {group}
                     </div>
-                    {cmds.map((cmd) => (
+                    {items.map((item) => (
                       <button
-                        key={cmd.name}
+                        key={`${item.source}-${item.name}`}
                         type="button"
-                        onClick={() => handleSelect(cmd.name)}
+                        onClick={() => handleSelect(item)}
                         className={cn(
                           'flex w-full flex-col items-start rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground',
-                          value === cmd.name && 'bg-accent/50'
+                          value === item.name && 'bg-accent/50'
                         )}
                       >
-                        <span className="font-mono text-foreground">/{cmd.name}</span>
-                        {cmd.description && (
+                        <span className="font-mono text-foreground">/{item.name}</span>
+                        {item.description && (
                           <span className="text-xs text-muted-foreground truncate w-full text-left">
-                            {cmd.description}
+                            {item.description}
                           </span>
                         )}
                       </button>

ccw/frontend/src/lib/api.ts

@@ -1089,6 +1089,8 @@ export interface Command {
   location?: 'project' | 'user';
   path?: string;
   relativePath?: string;
+  argumentHint?: string;
+  allowedTools?: string[];
 }
 
 export interface CommandsResponse {

ccw/frontend/src/locales/en/orchestrator.json

@@ -164,15 +164,21 @@
     "placeholders": {
       "nodeLabel": "Node label",
       "instruction": "e.g., Execute /workflow:plan for login feature\nor: Analyze code architecture\nor: Save {{analysis}} to ./output/result.json",
-      "outputName": "e.g., analysis, plan, result"
+      "outputName": "e.g., analysis, plan, result",
+      "slashCommand": "Select a command...",
+      "slashArgs": "Enter arguments...",
+      "additionalInstruction": "Additional instructions or context for the command..."
     },
     "labels": {
       "label": "Label",
       "instruction": "Instruction",
       "outputName": "Output Name",
       "tool": "CLI Tool",
       "mode": "Execution Mode",
-      "contextRefs": "Context References"
+      "contextRefs": "Context References",
+      "slashCommand": "Slash Command",
+      "slashArgs": "Arguments",
+      "additionalInstruction": "Additional Context (optional)"
     },
     "options": {
       "toolNone": "None (auto-select)",

ccw/frontend/src/locales/zh/orchestrator.json

@@ -163,15 +163,21 @@
     "placeholders": {
       "nodeLabel": "节点标签",
       "instruction": "例如: 执行 /workflow:plan 用于登录功能\n或: 分析代码架构\n或: 将 {{analysis}} 保存到 ./output/result.json",
-      "outputName": "例如: analysis, plan, result"
+      "outputName": "例如: analysis, plan, result",
+      "slashCommand": "选择命令...",
+      "slashArgs": "输入参数...",
+      "additionalInstruction": "命令的附加说明或上下文..."
     },
     "labels": {
       "label": "标签",
       "instruction": "指令",
       "outputName": "输出名称",
       "tool": "CLI 工具",
       "mode": "执行模式",
-      "contextRefs": "上下文引用"
+      "contextRefs": "上下文引用",
+      "slashCommand": "斜杠命令",
+      "slashArgs": "参数",
+      "additionalInstruction": "附加说明 (可选)"
     },
     "options": {
       "toolNone": "无 (自动选择)",

ccw/frontend/src/pages/orchestrator/NodePalette.tsx

@@ -7,7 +7,7 @@ import { DragEvent, useState } from 'react';
 import { useIntl } from 'react-intl';
 import {
   MessageSquare, ChevronDown, ChevronRight, GripVertical,
-  Search, Code, FileOutput, GitBranch, GitFork, GitMerge, Plus, Terminal
+  Search, Code, Plus, Terminal
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
@@ -26,10 +26,6 @@ const TEMPLATE_ICONS: Record<string, React.ElementType> = {
   'slash-command-async': Terminal,
   analysis: Search,
   implementation: Code,
-  'file-operation': FileOutput,
-  conditional: GitBranch,
-  parallel: GitFork,
-  merge: GitMerge,
 };
 
 /**
@@ -212,13 +208,6 @@ export function NodePalette({ className }: NodePaletteProps) {
             <QuickTemplateCard key={template.id} template={template} />
           ))}
         </TemplateCategory>
-
-        {/* Flow Control */}
-        <TemplateCategory title="Flow Control" defaultExpanded={true}>
-          {QUICK_TEMPLATES.filter(t => ['file-operation', 'conditional', 'parallel', 'merge'].includes(t.id)).map((template) => (
-            <QuickTemplateCard key={template.id} template={template} />
-          ))}
-        </TemplateCategory>
       </div>
 
       {/* Footer */}