feat(ui): 集成命令管理面板到 web 和 desktop

- 新增 CommandPanel 组件用于命令列表/搜索/CRUD
- 新增 CommandEditor 组件用于命令编辑/创建
- web/desktop 工具栏添加 Terminal 图标按钮
- 点击按钮打开命令管理面板

packages/desktop/src/App.tsx

@@ -7,6 +7,7 @@ import {
   Sidebar,
   FileBrowser,
   ConfigPanel,
+  CommandPanel,
   Toaster,
   listSessions,
   createSession,
@@ -19,6 +20,7 @@ export function App() {
   const [isInitializing, setIsInitializing] = useState(true);
   const [showFileBrowser, setShowFileBrowser] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
+  const [showCommands, setShowCommands] = useState(false);
   const [sessionTitleUpdate, setSessionTitleUpdate] = useState<{ sessionId: string; name: string } | null>(null);
 
   // 初始化：加载或创建会话
@@ -89,6 +91,7 @@ export function App() {
               showFileBrowser={showFileBrowser}
               onToggleFileBrowser={() => setShowFileBrowser(!showFileBrowser)}
               onOpenConfig={() => setShowConfig(true)}
+              onOpenCommands={() => setShowCommands(true)}
             />
           ) : (
             <div className="flex-1 flex items-center justify-center h-full">
@@ -112,6 +115,9 @@ export function App() {
       {/* 配置面板 */}
       {showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
 
+      {/* 命令面板 */}
+      {showCommands && <CommandPanel onClose={() => setShowCommands(false)} />}
+
       {/* Toast 通知 */}
       <Toaster />
     </div>

packages/desktop/src/pages/Chat.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect, useRef } from 'react';
-import { WifiOff, MessageSquare, Settings, FolderOpen } from 'lucide-react';
+import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   useChat,
@@ -20,6 +20,7 @@ interface ChatPageProps {
   showFileBrowser?: boolean;
   onToggleFileBrowser?: () => void;
   onOpenConfig?: () => void;
+  onOpenCommands?: () => void;
 }
 
 export function ChatPage({
@@ -28,6 +29,7 @@ export function ChatPage({
   showFileBrowser,
   onToggleFileBrowser,
   onOpenConfig,
+  onOpenCommands,
 }: ChatPageProps) {
   const {
     messages,
@@ -121,8 +123,21 @@ export function ChatPage({
           <ConnectionStatus />
 
           {/* 工具栏按钮 */}
-          {(onOpenConfig || onToggleFileBrowser) && (
+          {(onOpenConfig || onToggleFileBrowser || onOpenCommands) && (
             <div className="flex items-center gap-1.5 border-l border-gray-600 pl-3">
+              {/* 命令按钮 */}
+              {onOpenCommands && (
+                <motion.button
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                  onClick={onOpenCommands}
+                  className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
+                  title="Commands"
+                >
+                  <Terminal size={20} />
+                </motion.button>
+              )}
+
               {/* 配置按钮 */}
               {onOpenConfig && (
                 <motion.button

packages/ui/src/components/CommandEditor.tsx

@@ -0,0 +1,396 @@
+/**
+ * CommandEditor Component
+ *
+ * 命令编辑/创建对话框
+ * 支持编辑命令名称、描述、模板等
+ */
+
+import { useState, useEffect } from 'react';
+import { X, Save, AlertCircle } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { cn } from '../utils/cn';
+import { modalOverlay, modalContent, smoothTransition } from '../utils/animations';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+import { Switch } from '../primitives/Switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/Select';
+import {
+  createCommand,
+  updateCommand,
+  getCommandContent,
+  type CreateCommandInput,
+  type UpdateCommandInput,
+  type CommandContent,
+} from '../api/client.js';
+
+interface CommandEditorProps {
+  /** 编辑模式：指定命令名称；创建模式：undefined */
+  commandName?: string;
+  /** 关闭回调 */
+  onClose: () => void;
+  /** 保存成功回调 */
+  onSaved?: () => void;
+  /** 是否启用响应式布局 */
+  responsive?: boolean;
+}
+
+export function CommandEditor({
+  commandName,
+  onClose,
+  onSaved,
+  responsive = false,
+}: CommandEditorProps) {
+  const isEditMode = !!commandName;
+
+  // 表单状态
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [template, setTemplate] = useState('');
+  const [agent, setAgent] = useState('');
+  const [model, setModel] = useState('');
+  const [subtask, setSubtask] = useState(false);
+  const [scope, setScope] = useState<'user' | 'project'>('user');
+
+  // UI 状态
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [originalData, setOriginalData] = useState<CommandContent | null>(null);
+
+  // 编辑模式：加载现有命令
+  useEffect(() => {
+    if (isEditMode && commandName) {
+      setLoading(true);
+      setError(null);
+
+      getCommandContent(commandName)
+        .then((result) => {
+          if (result.success && result.data) {
+            const data = result.data;
+            setOriginalData(data);
+            setName(data.name);
+            setDescription(data.description || '');
+            setTemplate(data.template);
+            setAgent(data.agent || '');
+            setModel(data.model || '');
+            setSubtask(data.subtask || false);
+          } else {
+            setError(result.error || 'Failed to load command');
+          }
+        })
+        .catch((err) => {
+          setError(err instanceof Error ? err.message : 'Failed to load command');
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [isEditMode, commandName]);
+
+  // 保存命令
+  const handleSave = async () => {
+    // 验证
+    if (!name.trim()) {
+      toast.error('Command name is required');
+      return;
+    }
+    if (!template.trim()) {
+      toast.error('Template is required');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      if (isEditMode) {
+        // 更新模式
+        const input: UpdateCommandInput = {
+          description: description || undefined,
+          template,
+          agent: agent || undefined,
+          model: model || undefined,
+          subtask,
+        };
+
+        const result = await updateCommand(commandName!, input);
+        if (result.success) {
+          toast.success('Command updated');
+          onSaved?.();
+          onClose();
+        } else {
+          setError(result.error || 'Failed to update command');
+        }
+      } else {
+        // 创建模式
+        const input: CreateCommandInput = {
+          name: name.trim(),
+          description: description || undefined,
+          template,
+          agent: agent || undefined,
+          model: model || undefined,
+          subtask,
+          scope,
+        };
+
+        const result = await createCommand(input);
+        if (result.success) {
+          toast.success('Command created');
+          onSaved?.();
+          onClose();
+        } else {
+          setError(result.error || 'Failed to create command');
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save command');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 是否为内置命令（不可编辑）
+  const isBuiltin = originalData?.source === 'builtin';
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        variants={modalOverlay}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        transition={{ duration: 0.2 }}
+        className={cn(
+          'fixed inset-0 bg-black/50 flex z-50',
+          responsive ? 'items-end md:items-center justify-center' : 'items-center justify-center'
+        )}
+        onClick={onClose}
+      >
+        <motion.div
+          variants={modalContent}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          transition={smoothTransition}
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            'bg-gray-800 max-h-[90vh] overflow-auto',
+            responsive
+              ? 'w-full md:w-full md:max-w-2xl md:mx-4 rounded-t-2xl md:rounded-lg'
+              : 'rounded-lg w-full max-w-2xl mx-4'
+          )}
+        >
+          {/* Header */}
+          <div
+            className={cn(
+              'sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gray-800 z-10',
+              responsive ? 'px-4 md:px-6 py-4' : 'px-6 py-4'
+            )}
+          >
+            {responsive && (
+              <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-600 rounded-full md:hidden" />
+            )}
+            <h2 className={cn('text-lg font-semibold', responsive && 'mt-2 md:mt-0')}>
+              {isEditMode ? `Edit Command: /${commandName}` : 'Create Command'}
+            </h2>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              className={cn(responsive && 'min-w-[44px] min-h-[44px]')}
+            >
+              <X size={20} />
+            </Button>
+          </div>
+
+          {/* Content */}
+          {loading ? (
+            <div className="p-6 flex items-center justify-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary-500" />
+            </div>
+          ) : (
+            <div className={cn('space-y-5', responsive ? 'p-4 md:p-6' : 'p-6')}>
+              {/* Error */}
+              {error && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm"
+                >
+                  <AlertCircle size={16} />
+                  {error}
+                </motion.div>
+              )}
+
+              {/* Builtin Warning */}
+              {isBuiltin && (
+                <div className="flex items-center gap-2 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg text-yellow-400 text-sm">
+                  <AlertCircle size={16} />
+                  Builtin commands cannot be modified
+                </div>
+              )}
+
+              {/* Name */}
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-300">
+                  Name <span className="text-red-400">*</span>
+                </label>
+                <Input
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="deploy/staging"
+                  disabled={isEditMode || isBuiltin}
+                  className="font-mono"
+                />
+                <p className="text-xs text-gray-500">
+                  Command name. Use / for nested commands (e.g., deploy/staging)
+                </p>
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-300">Description</label>
+                <Input
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="Deploy to staging environment"
+                  disabled={isBuiltin}
+                />
+              </div>
+
+              {/* Template */}
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-300">
+                  Template <span className="text-red-400">*</span>
+                </label>
+                <textarea
+                  value={template}
+                  onChange={(e) => setTemplate(e.target.value)}
+                  placeholder="Please help me with $ARGUMENTS"
+                  disabled={isBuiltin}
+                  rows={6}
+                  className={cn(
+                    'w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg',
+                    'text-gray-100 placeholder:text-gray-500',
+                    'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
+                    'font-mono text-sm resize-y',
+                    'disabled:opacity-50 disabled:cursor-not-allowed'
+                  )}
+                />
+                <p className="text-xs text-gray-500">
+                  Template syntax: $ARGUMENTS (all args), $1 $2 (positional), @file (include
+                  file), !`cmd` (shell output)
+                </p>
+              </div>
+
+              {/* Agent & Model */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium text-gray-300">Agent</label>
+                  <Input
+                    value={agent}
+                    onChange={(e) => setAgent(e.target.value)}
+                    placeholder="code-review"
+                    disabled={isBuiltin}
+                  />
+                  <p className="text-xs text-gray-500">Optional agent to use</p>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium text-gray-300">Model</label>
+                  <Input
+                    value={model}
+                    onChange={(e) => setModel(e.target.value)}
+                    placeholder="claude-sonnet-4-20250514"
+                    disabled={isBuiltin}
+                  />
+                  <p className="text-xs text-gray-500">Optional model override</p>
+                </div>
+              </div>
+
+              {/* Subtask & Scope */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="flex items-center justify-between p-3 bg-gray-900/50 rounded-lg">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-300">Subtask</label>
+                    <p className="text-xs text-gray-500">Run as background subtask</p>
+                  </div>
+                  <Switch checked={subtask} onCheckedChange={setSubtask} disabled={isBuiltin} />
+                </div>
+
+                {!isEditMode && (
+                  <div className="space-y-2">
+                    <label className="block text-sm font-medium text-gray-300">Scope</label>
+                    <Select
+                      value={scope}
+                      onValueChange={(v) => setScope(v as 'user' | 'project')}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="user">User (global)</SelectItem>
+                        <SelectItem value="project">Project (local)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-gray-500">Where to store the command</p>
+                  </div>
+                )}
+              </div>
+
+              {/* Source Info (edit mode) */}
+              {isEditMode && originalData && (
+                <div className="pt-4 border-t border-gray-700">
+                  <h3 className="text-sm font-medium text-gray-400 mb-2">Command Info</h3>
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div>
+                      <span className="text-gray-500">Source:</span>
+                      <span className="ml-2 text-gray-300">{originalData.source}</span>
+                    </div>
+                    {originalData.sourcePath && (
+                      <div className="col-span-2">
+                        <span className="text-gray-500">Path:</span>
+                        <span className="ml-2 text-gray-300 font-mono text-xs break-all">
+                          {originalData.sourcePath}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Footer */}
+          <div
+            className={cn(
+              'sticky bottom-0 border-t border-gray-700 bg-gray-800',
+              responsive
+                ? 'flex flex-col-reverse md:flex-row items-stretch md:items-center justify-end gap-2 md:gap-3 p-4 md:px-6 md:py-4 safe-area-pb'
+                : 'flex items-center justify-end gap-3 px-6 py-4'
+            )}
+          >
+            <Button
+              variant="secondary"
+              onClick={onClose}
+              className={cn(responsive && 'justify-center')}
+            >
+              Cancel
+            </Button>
+            {!isBuiltin && (
+              <Button
+                onClick={handleSave}
+                disabled={saving || loading}
+                className={cn(responsive && 'justify-center')}
+              >
+                <Save size={16} className="mr-2" />
+                {saving ? 'Saving...' : isEditMode ? 'Update' : 'Create'}
+              </Button>
+            )}
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

packages/ui/src/components/CommandPanel.tsx

@@ -0,0 +1,403 @@
+/**
+ * CommandPanel Component
+ *
+ * 命令管理面板：列出、搜索、创建、编辑、删除命令
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  X,
+  Plus,
+  Search,
+  Pencil,
+  Trash2,
+  RefreshCw,
+  Terminal,
+  User,
+  FolderOpen,
+  Cog,
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { cn } from '../utils/cn';
+import { modalOverlay, modalContent, smoothTransition } from '../utils/animations';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+import { Skeleton } from './Skeleton';
+import { CommandEditor } from './CommandEditor';
+import {
+  listCommands,
+  deleteCommand,
+  reloadCommands,
+  type CommandListResponse,
+} from '../api/client.js';
+
+interface CommandPanelProps {
+  onClose: () => void;
+  /** 是否启用响应式布局 */
+  responsive?: boolean;
+}
+
+type CommandItem = CommandListResponse['commands'][number];
+
+// Source 图标映射
+function getSourceIcon(source: string) {
+  switch (source) {
+    case 'builtin':
+      return <Cog size={14} className="text-gray-400" />;
+    case 'user':
+      return <User size={14} className="text-blue-400" />;
+    case 'project':
+      return <FolderOpen size={14} className="text-green-400" />;
+    default:
+      return <Terminal size={14} className="text-gray-400" />;
+  }
+}
+
+// Source 标签样式
+function getSourceBadgeClass(source: string) {
+  switch (source) {
+    case 'builtin':
+      return 'bg-gray-700 text-gray-300';
+    case 'user':
+      return 'bg-blue-500/20 text-blue-400';
+    case 'project':
+      return 'bg-green-500/20 text-green-400';
+    default:
+      return 'bg-gray-700 text-gray-300';
+  }
+}
+
+export function CommandPanel({ onClose, responsive = false }: CommandPanelProps) {
+  // 数据状态
+  const [commands, setCommands] = useState<CommandItem[]>([]);
+  const [filteredCommands, setFilteredCommands] = useState<CommandItem[]>([]);
+  const [stats, setStats] = useState<{ total: number; bySource: Record<string, number> } | null>(
+    null
+  );
+
+  // UI 状态
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [deletingCommand, setDeletingCommand] = useState<string | null>(null);
+  const [reloading, setReloading] = useState(false);
+
+  // 编辑器状态
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingCommand, setEditingCommand] = useState<string | undefined>(undefined);
+
+  // 加载命令列表
+  const loadCommands = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await listCommands();
+      if (result.success) {
+        setCommands(result.data.commands);
+        setFilteredCommands(result.data.commands);
+        setStats(result.data.stats);
+      } else {
+        toast.error('Failed to load commands');
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to load commands');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 初始加载
+  useEffect(() => {
+    loadCommands();
+  }, [loadCommands]);
+
+  // 搜索过滤
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setFilteredCommands(commands);
+      return;
+    }
+
+    const query = searchQuery.toLowerCase();
+    const filtered = commands.filter(
+      (cmd) =>
+        cmd.name.toLowerCase().includes(query) || cmd.description?.toLowerCase().includes(query)
+    );
+    setFilteredCommands(filtered);
+  }, [searchQuery, commands]);
+
+  // 删除命令
+  const handleDelete = async (name: string) => {
+    if (!confirm(`Are you sure you want to delete command "/${name}"?`)) {
+      return;
+    }
+
+    setDeletingCommand(name);
+    try {
+      const result = await deleteCommand(name);
+      if (result.success) {
+        toast.success(`Command "/${name}" deleted`);
+        loadCommands();
+      } else {
+        toast.error(result.error || 'Failed to delete command');
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to delete command');
+    } finally {
+      setDeletingCommand(null);
+    }
+  };
+
+  // 重新加载命令
+  const handleReload = async () => {
+    setReloading(true);
+    try {
+      const result = await reloadCommands();
+      if (result.success) {
+        toast.success('Commands reloaded');
+        loadCommands();
+      } else {
+        toast.error('Failed to reload commands');
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to reload commands');
+    } finally {
+      setReloading(false);
+    }
+  };
+
+  // 打开编辑器（创建）
+  const openCreateEditor = () => {
+    setEditingCommand(undefined);
+    setEditorOpen(true);
+  };
+
+  // 打开编辑器（编辑）
+  const openEditEditor = (name: string) => {
+    setEditingCommand(name);
+    setEditorOpen(true);
+  };
+
+  // 编辑器保存回调
+  const handleEditorSaved = () => {
+    loadCommands();
+  };
+
+  // Loading 骨架屏
+  const LoadingSkeleton = () => (
+    <div className="space-y-3 p-4">
+      {[1, 2, 3, 4, 5].map((i) => (
+        <div key={i} className="flex items-center gap-3 p-3 bg-gray-900/50 rounded-lg">
+          <Skeleton className="h-5 w-5 rounded" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-48" />
+          </div>
+          <Skeleton className="h-8 w-16" />
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <>
+      <AnimatePresence>
+        <motion.div
+          variants={modalOverlay}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          transition={{ duration: 0.2 }}
+          className={cn(
+            'fixed inset-0 bg-black/50 flex z-50',
+            responsive
+              ? 'items-end md:items-center justify-center'
+              : 'items-center justify-center'
+          )}
+          onClick={onClose}
+        >
+          <motion.div
+            variants={modalContent}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={smoothTransition}
+            onClick={(e) => e.stopPropagation()}
+            className={cn(
+              'bg-gray-800 max-h-[90vh] overflow-hidden flex flex-col',
+              responsive
+                ? 'w-full md:w-full md:max-w-2xl md:mx-4 rounded-t-2xl md:rounded-lg'
+                : 'rounded-lg w-full max-w-2xl mx-4'
+            )}
+          >
+            {/* Header */}
+            <div
+              className={cn(
+                'flex items-center justify-between border-b border-gray-700',
+                responsive ? 'px-4 md:px-6 py-4' : 'px-6 py-4'
+              )}
+            >
+              {responsive && (
+                <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-600 rounded-full md:hidden" />
+              )}
+              <div className={cn(responsive && 'mt-2 md:mt-0')}>
+                <h2 className="text-lg font-semibold">Commands</h2>
+                {stats && (
+                  <p className="text-xs text-gray-500">
+                    {stats.total} commands ({stats.bySource.builtin || 0} builtin,{' '}
+                    {stats.bySource.user || 0} user, {stats.bySource.project || 0} project)
+                  </p>
+                )}
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onClose}
+                className={cn(responsive && 'min-w-[44px] min-h-[44px]')}
+              >
+                <X size={20} />
+              </Button>
+            </div>
+
+            {/* Toolbar */}
+            <div
+              className={cn(
+                'flex items-center gap-3 border-b border-gray-700',
+                responsive ? 'px-4 md:px-6 py-3' : 'px-6 py-3'
+              )}
+            >
+              <div className="flex-1 relative">
+                <Search
+                  size={16}
+                  className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+                />
+                <Input
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search commands..."
+                  className="pl-9"
+                />
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleReload}
+                disabled={reloading}
+                title="Reload commands"
+              >
+                <RefreshCw size={18} className={cn(reloading && 'animate-spin')} />
+              </Button>
+              <Button onClick={openCreateEditor}>
+                <Plus size={16} className="mr-1" />
+                New
+              </Button>
+            </div>
+
+            {/* Command List */}
+            <div className="flex-1 overflow-y-auto">
+              {loading ? (
+                <LoadingSkeleton />
+              ) : filteredCommands.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+                  <Terminal size={48} className="mb-4 opacity-50" />
+                  <p>
+                    {searchQuery
+                      ? `No commands matching "${searchQuery}"`
+                      : 'No commands found'}
+                  </p>
+                  {!searchQuery && (
+                    <Button variant="ghost" className="mt-4" onClick={openCreateEditor}>
+                      <Plus size={16} className="mr-2" />
+                      Create your first command
+                    </Button>
+                  )}
+                </div>
+              ) : (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className={cn('space-y-2', responsive ? 'p-4' : 'p-4')}
+                >
+                  {filteredCommands.map((command) => (
+                    <motion.div
+                      key={command.name}
+                      layout
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -10 }}
+                      className={cn(
+                        'flex items-center gap-3 p-3 bg-gray-900/50 rounded-lg',
+                        'hover:bg-gray-900/80 transition-colors group'
+                      )}
+                    >
+                      {/* Icon */}
+                      {getSourceIcon(command.source)}
+
+                      {/* Info */}
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="font-mono text-sm text-gray-200">/{command.name}</span>
+                          <span
+                            className={cn(
+                              'px-1.5 py-0.5 text-xs rounded',
+                              getSourceBadgeClass(command.source)
+                            )}
+                          >
+                            {command.source}
+                          </span>
+                        </div>
+                        {command.description && (
+                          <p className="text-xs text-gray-500 truncate mt-0.5">
+                            {command.description}
+                          </p>
+                        )}
+                      </div>
+
+                      {/* Actions */}
+                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => openEditEditor(command.name)}
+                          title="Edit"
+                        >
+                          <Pencil size={14} />
+                        </Button>
+                        {command.source !== 'builtin' && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                            onClick={() => handleDelete(command.name)}
+                            disabled={deletingCommand === command.name}
+                            title="Delete"
+                          >
+                            {deletingCommand === command.name ? (
+                              <div className="animate-spin rounded-full h-3.5 w-3.5 border-t border-b border-red-400" />
+                            ) : (
+                              <Trash2 size={14} />
+                            )}
+                          </Button>
+                        )}
+                      </div>
+                    </motion.div>
+                  ))}
+                </motion.div>
+              )}
+            </div>
+          </motion.div>
+        </motion.div>
+      </AnimatePresence>
+
+      {/* Command Editor */}
+      {editorOpen && (
+        <CommandEditor
+          commandName={editingCommand}
+          onClose={() => setEditorOpen(false)}
+          onSaved={handleEditorSaved}
+          responsive={responsive}
+        />
+      )}
+    </>
+  );
+}

packages/ui/src/index.ts

@@ -67,6 +67,8 @@ export * from './utils/animations.js';
 export { ChatMessage, StreamingMessage, TypingIndicator } from './components/ChatMessage.js';
 export { ChatInput } from './components/ChatInput.js';
 export { CommandMenu, type CommandMenuItem } from './components/CommandMenu.js';
+export { CommandPanel } from './components/CommandPanel.js';
+export { CommandEditor } from './components/CommandEditor.js';
 export { Sidebar } from './components/Sidebar.js';
 export { FileBrowser } from './components/FileBrowser.js';
 export { ConfigPanel } from './components/ConfigPanel.js';

packages/web/src/App.tsx

@@ -9,6 +9,7 @@ import {
   Sidebar,
   FileBrowser,
   ConfigPanel,
+  CommandPanel,
   Toaster,
   listSessions,
   createSession,
@@ -21,6 +22,7 @@ export function App() {
   const [isInitializing, setIsInitializing] = useState(true);
   const [showFileBrowser, setShowFileBrowser] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
+  const [showCommands, setShowCommands] = useState(false);
   const [sessionTitleUpdate, setSessionTitleUpdate] = useState<{ sessionId: string; name: string } | null>(null);
 
   // 初始化：加载或创建会话
@@ -105,6 +107,7 @@ export function App() {
               showFileBrowser={showFileBrowser}
               onToggleFileBrowser={() => setShowFileBrowser(!showFileBrowser)}
               onOpenConfig={() => setShowConfig(true)}
+              onOpenCommands={() => setShowCommands(true)}
             />
           ) : (
             <div className="flex-1 flex items-center justify-center h-full">
@@ -153,6 +156,9 @@ export function App() {
       {/* 配置面板 */}
       {showConfig && <ConfigPanel onClose={() => setShowConfig(false)} responsive />}
 
+      {/* 命令面板 */}
+      {showCommands && <CommandPanel onClose={() => setShowCommands(false)} responsive />}
+
       {/* 移动端底部文件按钮 */}
       <button
         onClick={() => setShowFileBrowser(true)}

packages/web/src/pages/Chat.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect, useRef } from 'react';
-import { WifiOff, MessageSquare, Settings, FolderOpen } from 'lucide-react';
+import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   useChat,
@@ -22,6 +22,7 @@ interface ChatPageProps {
   showFileBrowser?: boolean;
   onToggleFileBrowser?: () => void;
   onOpenConfig?: () => void;
+  onOpenCommands?: () => void;
 }
 
 export function ChatPage({
@@ -32,6 +33,7 @@ export function ChatPage({
   showFileBrowser,
   onToggleFileBrowser,
   onOpenConfig,
+  onOpenCommands,
 }: ChatPageProps) {
   const {
     messages,
@@ -126,8 +128,21 @@ export function ChatPage({
           <ConnectionStatus />
 
           {/* 工具栏按钮 */}
-          {(onOpenConfig || onToggleFileBrowser) && (
+          {(onOpenConfig || onToggleFileBrowser || onOpenCommands) && (
             <div className="flex items-center gap-1.5 border-l border-gray-600 pl-3">
+              {/* 命令按钮 */}
+              {onOpenCommands && (
+                <motion.button
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                  onClick={onOpenCommands}
+                  className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
+                  title="Commands"
+                >
+                  <Terminal size={20} />
+                </motion.button>
+              )}
+
               {/* 配置按钮 */}
               {onOpenConfig && (
                 <motion.button