feat(pipeline): implement Pipeline DSL system for automated workflows

Add complete Pipeline DSL system including:
- Rust backend (zclaw-pipeline crate) with parser, executor, and state management
- Frontend components: PipelinesPanel, PipelineResultPreview, ClassroomPreviewer
- Pipeline recommender for Agent conversation integration
- 5 pipeline templates: education, marketing, legal, research, productivity
- Documentation for Pipeline DSL architecture

Pipeline DSL enables declarative workflow definitions with:
- YAML-based configuration
- Expression resolution (${inputs.topic}, ${steps.step1.output})
- LLM integration, parallel execution, file export
- Agent smart recommendations in conversations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

desktop/src/components/ClassroomPreviewer.tsx

@@ -0,0 +1,534 @@
+/**
+ * ClassroomPreviewer - 课堂预览器组件
+ *
+ * 预览 classroom-generator Pipeline 生成的课堂内容：
+ * - 幻灯片导航
+ * - 大纲视图
+ * - 场景切换
+ * - 全屏播放模式
+ * - AI 教师讲解展示
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Play,
+  Pause,
+  Maximize,
+  Minimize,
+  List,
+  Grid,
+  Volume2,
+  VolumeX,
+  Settings,
+  Download,
+  Share2,
+} from 'lucide-react';
+import { useToast } from './ui/Toast';
+
+// === Types ===
+
+export interface ClassroomScene {
+  id: string;
+  title: string;
+  type: 'title' | 'content' | 'quiz' | 'summary' | 'interactive';
+  content: {
+    heading?: string;
+    bullets?: string[];
+    image?: string;
+    explanation?: string;
+    quiz?: {
+      question: string;
+      options: string[];
+      answer: number;
+    };
+  };
+  narration?: string;
+  duration?: number; // seconds
+}
+
+export interface ClassroomData {
+  id: string;
+  title: string;
+  subject: string;
+  difficulty: '初级' | '中级' | '高级';
+  duration: number; // minutes
+  scenes: ClassroomScene[];
+  outline: {
+    sections: {
+      title: string;
+      scenes: string[];
+    }[];
+  };
+  createdAt: string;
+}
+
+interface ClassroomPreviewerProps {
+  data: ClassroomData;
+  onClose?: () => void;
+  onExport?: (format: 'pptx' | 'html' | 'pdf') => void;
+}
+
+// === Sub-Components ===
+
+interface SceneRendererProps {
+  scene: ClassroomScene;
+  isPlaying: boolean;
+  showNarration: boolean;
+}
+
+function SceneRenderer({ scene, isPlaying, showNarration }: SceneRendererProps) {
+  const renderContent = () => {
+    switch (scene.type) {
+      case 'title':
+        return (
+          <div className="flex flex-col items-center justify-center h-full text-center p-8">
+            <h1 className="text-4xl font-bold text-white mb-4">
+              {scene.content.heading || scene.title}
+            </h1>
+            {scene.content.bullets && (
+              <p className="text-xl text-white/80">
+                {scene.content.bullets[0]}
+              </p>
+            )}
+          </div>
+        );
+
+      case 'content':
+        return (
+          <div className="p-8">
+            <h2 className="text-3xl font-bold text-white mb-6">
+              {scene.content.heading || scene.title}
+            </h2>
+            {scene.content.bullets && (
+              <ul className="space-y-4">
+                {scene.content.bullets.map((bullet, index) => (
+                  <li
+                    key={index}
+                    className="flex items-start gap-3 text-lg text-white/90"
+                  >
+                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-sm font-medium">
+                      {index + 1}
+                    </span>
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {scene.content.image && (
+              <div className="mt-6">
+                <img
+                  src={scene.content.image}
+                  alt={scene.title}
+                  className="max-h-48 rounded-lg shadow-lg"
+                />
+              </div>
+            )}
+          </div>
+        );
+
+      case 'quiz':
+        return (
+          <div className="p-8">
+            <h2 className="text-2xl font-bold text-white mb-6">
+              📝 小测验
+            </h2>
+            {scene.content.quiz && (
+              <div className="space-y-4">
+                <p className="text-xl text-white">
+                  {scene.content.quiz.question}
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4">
+                  {scene.content.quiz.options.map((option, index) => (
+                    <button
+                      key={index}
+                      className="p-4 bg-white/10 hover:bg-white/20 rounded-lg text-left text-white transition-colors"
+                    >
+                      <span className="font-medium mr-2">
+                        {String.fromCharCode(65 + index)}.
+                      </span>
+                      {option}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+
+      case 'summary':
+        return (
+          <div className="p-8">
+            <h2 className="text-3xl font-bold text-white mb-6">
+              📋 总结
+            </h2>
+            {scene.content.bullets && (
+              <ul className="space-y-3">
+                {scene.content.bullets.map((bullet, index) => (
+                  <li
+                    key={index}
+                    className="flex items-center gap-2 text-lg text-white/90"
+                  >
+                    <span className="text-green-400">✓</span>
+                    {bullet}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        );
+
+      default:
+        return (
+          <div className="p-8">
+            <h2 className="text-2xl font-bold text-white">
+              {scene.title}
+            </h2>
+            <p className="text-white/80 mt-4">{scene.content.explanation}</p>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="relative h-full bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700">
+      {/* Scene Content */}
+      <div className="h-full overflow-auto">
+        {renderContent()}
+      </div>
+
+      {/* Narration Overlay */}
+      {showNarration && scene.narration && (
+        <div className="absolute bottom-0 left-0 right-0 bg-black/70 p-4">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
+              <Volume2 className="w-5 h-5 text-white" />
+            </div>
+            <p className="text-white/90 text-sm leading-relaxed">
+              {scene.narration}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface OutlinePanelProps {
+  outline: ClassroomData['outline'];
+  scenes: ClassroomScene[];
+  currentIndex: number;
+  onSelectScene: (index: number) => void;
+}
+
+function OutlinePanel({
+  outline,
+  scenes,
+  currentIndex,
+  onSelectScene,
+}: OutlinePanelProps) {
+  return (
+    <div className="h-full overflow-auto bg-gray-50 dark:bg-gray-800 p-4">
+      <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+        课程大纲
+      </h3>
+      <div className="space-y-2">
+        {outline.sections.map((section, sectionIndex) => (
+          <div key={sectionIndex}>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+              {section.title}
+            </p>
+            <div className="space-y-1">
+              {section.scenes.map((sceneId, sceneIndex) => {
+                const globalIndex = scenes.findIndex(s => s.id === sceneId);
+                const isActive = globalIndex === currentIndex;
+                const scene = scenes.find(s => s.id === sceneId);
+
+                return (
+                  <button
+                    key={sceneId}
+                    onClick={() => onSelectScene(globalIndex)}
+                    className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
+                      isActive
+                        ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                        : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300'
+                    }`}
+                  >
+                    <span className="truncate">{scene?.title || sceneId}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// === Main Component ===
+
+export function ClassroomPreviewer({
+  data,
+  onClose,
+  onExport,
+}: ClassroomPreviewerProps) {
+  const [currentSceneIndex, setCurrentSceneIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [showNarration, setShowNarration] = useState(true);
+  const [showOutline, setShowOutline] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [viewMode, setViewMode] = useState<'slides' | 'grid'>('slides');
+
+  const { showToast } = useToast();
+  const currentScene = data.scenes[currentSceneIndex];
+  const totalScenes = data.scenes.length;
+
+  // Navigation
+  const goToScene = useCallback((index: number) => {
+    if (index >= 0 && index < totalScenes) {
+      setCurrentSceneIndex(index);
+    }
+  }, [totalScenes]);
+
+  const nextScene = useCallback(() => {
+    goToScene(currentSceneIndex + 1);
+  }, [currentSceneIndex, goToScene]);
+
+  const prevScene = useCallback(() => {
+    goToScene(currentSceneIndex - 1);
+  }, [currentSceneIndex, goToScene]);
+
+  // Auto-play
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    const duration = currentScene?.duration ? currentScene.duration * 1000 : 5000;
+    const timer = setTimeout(() => {
+      if (currentSceneIndex < totalScenes - 1) {
+        nextScene();
+      } else {
+        setIsPlaying(false);
+        showToast('课堂播放完成', 'success');
+      }
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [isPlaying, currentSceneIndex, currentScene, totalScenes, nextScene, showToast]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowRight':
+        case ' ':
+          e.preventDefault();
+          nextScene();
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          prevScene();
+          break;
+        case 'Escape':
+          if (isFullscreen) {
+            setIsFullscreen(false);
+          }
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [nextScene, prevScene, isFullscreen]);
+
+  // Fullscreen toggle
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+
+  // Export handler
+  const handleExport = (format: 'pptx' | 'html' | 'pdf') => {
+    if (onExport) {
+      onExport(format);
+    } else {
+      showToast(`导出 ${format.toUpperCase()} 功能开发中...`, 'info');
+    }
+  };
+
+  return (
+    <div className={`bg-white dark:bg-gray-900 rounded-lg shadow-xl overflow-hidden ${
+      isFullscreen ? 'fixed inset-0 z-50 rounded-none' : 'max-w-5xl w-full'
+    }`}>
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {data.title}
+          </h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {data.subject} · {data.difficulty} · {data.duration} 分钟
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => handleExport('pptx')}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-md hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
+          >
+            <Download className="w-4 h-4" />
+            PPTX
+          </button>
+          <button
+            onClick={() => handleExport('html')}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+          >
+            <Share2 className="w-4 h-4" />
+            HTML
+          </button>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex h-[500px]">
+        {/* Outline Panel */}
+        {showOutline && (
+          <div className="w-64 border-r border-gray-200 dark:border-gray-700 flex-shrink-0">
+            <OutlinePanel
+              outline={data.outline}
+              scenes={data.scenes}
+              currentIndex={currentSceneIndex}
+              onSelectScene={goToScene}
+            />
+          </div>
+        )}
+
+        {/* Slide Area */}
+        <div className="flex-1 flex flex-col">
+          {/* Scene Renderer */}
+          <div className="flex-1 relative">
+            {viewMode === 'slides' ? (
+              <SceneRenderer
+                scene={currentScene}
+                isPlaying={isPlaying}
+                showNarration={showNarration}
+              />
+            ) : (
+              <div className="h-full overflow-auto p-4 bg-gray-100 dark:bg-gray-800">
+                <div className="grid grid-cols-3 gap-3">
+                  {data.scenes.map((scene, index) => (
+                    <button
+                      key={scene.id}
+                      onClick={() => goToScene(index)}
+                      className={`aspect-video rounded-lg overflow-hidden border-2 transition-colors ${
+                        index === currentSceneIndex
+                          ? 'border-blue-500'
+                          : 'border-transparent hover:border-gray-300 dark:hover:border-gray-600'
+                      }`}
+                    >
+                      <div className="h-full bg-gradient-to-br from-blue-600 to-purple-600 p-2">
+                        <p className="text-xs text-white font-medium truncate">
+                          {scene.title}
+                        </p>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Control Bar */}
+          <div className="flex items-center justify-between p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+            {/* Left Controls */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setShowOutline(!showOutline)}
+                className={`p-2 rounded-md transition-colors ${
+                  showOutline
+                    ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
+                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300'
+                }`}
+                title="大纲"
+              >
+                <List className="w-5 h-5" />
+              </button>
+              <button
+                onClick={() => setViewMode(viewMode === 'slides' ? 'grid' : 'slides')}
+                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300"
+                title={viewMode === 'slides' ? '网格视图' : '幻灯片视图'}
+              >
+                <Grid className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Center Controls */}
+            <div className="flex items-center gap-3">
+              <button
+                onClick={prevScene}
+                disabled={currentSceneIndex === 0}
+                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300 disabled:opacity-50"
+              >
+                <ChevronLeft className="w-5 h-5" />
+              </button>
+
+              <button
+                onClick={() => setIsPlaying(!isPlaying)}
+                className="p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-colors"
+              >
+                {isPlaying ? (
+                  <Pause className="w-5 h-5" />
+                ) : (
+                  <Play className="w-5 h-5" />
+                )}
+              </button>
+
+              <button
+                onClick={nextScene}
+                disabled={currentSceneIndex === totalScenes - 1}
+                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300 disabled:opacity-50"
+              >
+                <ChevronRight className="w-5 h-5" />
+              </button>
+
+              <span className="text-sm text-gray-500 dark:text-gray-400 min-w-[60px] text-center">
+                {currentSceneIndex + 1} / {totalScenes}
+              </span>
+            </div>
+
+            {/* Right Controls */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setShowNarration(!showNarration)}
+                className={`p-2 rounded-md transition-colors ${
+                  showNarration
+                    ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
+                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300'
+                }`}
+                title={showNarration ? '隐藏讲解' : '显示讲解'}
+              >
+                {showNarration ? (
+                  <Volume2 className="w-5 h-5" />
+                ) : (
+                  <VolumeX className="w-5 h-5" />
+                )}
+              </button>
+              <button
+                onClick={toggleFullscreen}
+                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300"
+                title={isFullscreen ? '退出全屏' : '全屏'}
+              >
+                {isFullscreen ? (
+                  <Minimize className="w-5 h-5" />
+                ) : (
+                  <Maximize className="w-5 h-5" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ClassroomPreviewer;

desktop/src/components/PipelineResultPreview.tsx

@@ -0,0 +1,339 @@
+/**
+ * PipelineResultPreview - Pipeline 执行结果预览组件
+ *
+ * 展示 Pipeline 执行完成后的结果，支持多种预览模式：
+ * - JSON 数据预览
+ * - Markdown 渲染
+ * - 文件下载列表
+ * - 课堂预览器（特定 Pipeline）
+ */
+
+import { useState } from 'react';
+import {
+  FileText,
+  Download,
+  ExternalLink,
+  Copy,
+  Check,
+  Code,
+  File,
+  Presentation,
+  FileSpreadsheet,
+  X,
+} from 'lucide-react';
+import { PipelineRunResponse } from '../lib/pipeline-client';
+import { useToast } from './ui/Toast';
+
+// === Types ===
+
+interface PipelineResultPreviewProps {
+  result: PipelineRunResponse;
+  pipelineId: string;
+  onClose?: () => void;
+}
+
+type PreviewMode = 'auto' | 'json' | 'markdown' | 'classroom';
+
+// === Utility Functions ===
+
+function getFileIcon(filename: string): React.ReactNode {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'pptx':
+    case 'ppt':
+      return <Presentation className="w-5 h-5 text-orange-500" />;
+    case 'xlsx':
+    case 'xls':
+      return <FileSpreadsheet className="w-5 h-5 text-green-500" />;
+    case 'pdf':
+      return <FileText className="w-5 h-5 text-red-500" />;
+    case 'html':
+      return <Code className="w-5 h-5 text-blue-500" />;
+    case 'md':
+    case 'markdown':
+      return <FileText className="w-5 h-5 text-gray-500" />;
+    default:
+      return <File className="w-5 h-5 text-gray-400" />;
+  }
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// === Sub-Components ===
+
+interface FileDownloadCardProps {
+  file: {
+    name: string;
+    url: string;
+    size?: number;
+  };
+}
+
+function FileDownloadCard({ file }: FileDownloadCardProps) {
+  const handleDownload = () => {
+    // Create download link
+    const link = document.createElement('a');
+    link.href = file.url;
+    link.download = file.name;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+      {getFileIcon(file.name)}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
+          {file.name}
+        </p>
+        {file.size && (
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {formatFileSize(file.size)}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => window.open(file.url, '_blank')}
+          className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          title="在新窗口打开"
+        >
+          <ExternalLink className="w-4 h-4" />
+        </button>
+        <button
+          onClick={handleDownload}
+          className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors"
+        >
+          <Download className="w-4 h-4" />
+          下载
+        </button>
+      </div>
+    </div>
+  );
+}
+
+interface JsonPreviewProps {
+  data: unknown;
+}
+
+function JsonPreview({ data }: JsonPreviewProps) {
+  const [copied, setCopied] = useState(false);
+  const { showToast } = useToast();
+
+  const jsonString = JSON.stringify(data, null, 2);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(jsonString);
+    setCopied(true);
+    showToast('已复制到剪贴板', 'success');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 p-1.5 bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+        title="复制"
+      >
+        {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+      </button>
+      <pre className="p-4 bg-gray-900 text-gray-100 rounded-lg overflow-auto text-sm max-h-96">
+        {jsonString}
+      </pre>
+    </div>
+  );
+}
+
+interface MarkdownPreviewProps {
+  content: string;
+}
+
+function MarkdownPreview({ content }: MarkdownPreviewProps) {
+  // Simple markdown rendering (for production, use a proper markdown library)
+  const renderMarkdown = (md: string): string => {
+    return md
+      // Headers
+      .replace(/^### (.*$)/gim, '<h3 class="text-lg font-semibold mt-4 mb-2">$1</h3>')
+      .replace(/^## (.*$)/gim, '<h2 class="text-xl font-semibold mt-4 mb-2">$1</h2>')
+      .replace(/^# (.*$)/gim, '<h1 class="text-2xl font-bold mt-4 mb-2">$1</h1>')
+      // Bold
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      // Italic
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      // Lists
+      .replace(/^- (.*$)/gim, '<li class="ml-4">$1</li>')
+      // Paragraphs
+      .replace(/\n\n/g, '</p><p class="my-2">')
+      // Line breaks
+      .replace(/\n/g, '<br>');
+  };
+
+  return (
+    <div
+      className="prose dark:prose-invert max-w-none p-4 bg-white dark:bg-gray-800 rounded-lg"
+      dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
+    />
+  );
+}
+
+// === Main Component ===
+
+export function PipelineResultPreview({
+  result,
+  pipelineId,
+  onClose,
+}: PipelineResultPreviewProps) {
+  const [mode, setMode] = useState<PreviewMode>('auto');
+  const { showToast } = useToast();
+
+  // Determine the best preview mode
+  const outputs = result.outputs as Record<string, unknown> | undefined;
+  const exportFiles = (outputs?.export_files as Array<{ name: string; url: string; size?: number }>) || [];
+
+  // Check if this is a classroom pipeline
+  const isClassroom = pipelineId === 'classroom-generator' || pipelineId.includes('classroom');
+
+  // Auto-detect preview mode
+  const autoMode: PreviewMode = isClassroom ? 'classroom' :
+    exportFiles.length > 0 ? 'files' :
+    typeof outputs === 'object' ? 'json' : 'json';
+
+  const activeMode = mode === 'auto' ? autoMode : mode;
+
+  // Render based on mode
+  const renderContent = () => {
+    switch (activeMode) {
+      case 'json':
+        return <JsonPreview data={outputs} />;
+
+      case 'markdown':
+        const mdContent = (outputs?.summary || outputs?.report || JSON.stringify(outputs, null, 2)) as string;
+        return <MarkdownPreview content={mdContent} />;
+
+      case 'classroom':
+        // Will be handled by ClassroomPreviewer component
+        return (
+          <div className="text-center py-8 text-gray-500">
+            <Presentation className="w-12 h-12 mx-auto mb-3 text-gray-400" />
+            <p>课堂预览功能正在开发中...</p>
+            <p className="text-sm mt-2">您可以在下方下载生成的文件</p>
+          </div>
+        );
+
+      default:
+        return <JsonPreview data={outputs} />;
+    }
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Pipeline 执行完成
+          </h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {result.pipelineId} · {result.status === 'completed' ? '成功' : result.status}
+          </p>
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+          >
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+        )}
+      </div>
+
+      {/* Mode Tabs */}
+      <div className="flex items-center gap-2 p-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+        <button
+          onClick={() => setMode('auto')}
+          className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+            mode === 'auto'
+              ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+              : 'text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700'
+          }`}
+        >
+          自动
+        </button>
+        <button
+          onClick={() => setMode('json')}
+          className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+            mode === 'json'
+              ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+              : 'text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700'
+          }`}
+        >
+          JSON
+        </button>
+        <button
+          onClick={() => setMode('markdown')}
+          className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+            mode === 'markdown'
+              ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+              : 'text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700'
+          }`}
+        >
+          Markdown
+        </button>
+        {isClassroom && (
+          <button
+            onClick={() => setMode('classroom')}
+            className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+              mode === 'classroom'
+                ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700'
+            }`}
+          >
+            课堂预览
+          </button>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="p-4 overflow-auto max-h-96">
+        {renderContent()}
+      </div>
+
+      {/* Export Files */}
+      {exportFiles.length > 0 && (
+        <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+            导出文件 ({exportFiles.length})
+          </h3>
+          <div className="space-y-2">
+            {exportFiles.map((file, index) => (
+              <FileDownloadCard key={index} file={file} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-end gap-3 p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+        <span className="text-xs text-gray-500 dark:text-gray-400">
+          执行时间: {new Date(result.startedAt).toLocaleString()}
+        </span>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md"
+          >
+            关闭
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default PipelineResultPreview;

desktop/src/components/PipelinesPanel.tsx

@@ -0,0 +1,525 @@
+/**
+ * PipelinesPanel - Pipeline Discovery and Execution UI
+ *
+ * Displays available Pipelines (DSL-based workflows) with
+ * category filtering, search, and execution capabilities.
+ *
+ * Pipelines orchestrate Skills and Hands to accomplish complex tasks.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Play,
+  RefreshCw,
+  Search,
+  ChevronRight,
+  Loader2,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Package,
+  Filter,
+  X,
+} from 'lucide-react';
+import {
+  PipelineClient,
+  PipelineInfo,
+  PipelineRunResponse,
+  usePipelines,
+  usePipelineRun,
+  validateInputs,
+  getDefaultForType,
+  formatInputType,
+} from '../lib/pipeline-client';
+import { useToast } from './ui/Toast';
+
+// === Category Badge Component ===
+
+const CATEGORY_CONFIG: Record<string, { label: string; className: string }> = {
+  education: { label: '教育', className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' },
+  marketing: { label: '营销', className: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' },
+  legal: { label: '法律', className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' },
+  productivity: { label: '生产力', className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' },
+  research: { label: '研究', className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400' },
+  sales: { label: '销售', className: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400' },
+  hr: { label: '人力', className: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400' },
+  finance: { label: '财务', className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' },
+  default: { label: '其他', className: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400' },
+};
+
+function CategoryBadge({ category }: { category: string }) {
+  const config = CATEGORY_CONFIG[category] || CATEGORY_CONFIG.default;
+  return (
+    <span className={`px-2 py-0.5 rounded text-xs font-medium ${config.className}`}>
+      {config.label}
+    </span>
+  );
+}
+
+// === Pipeline Card Component ===
+
+interface PipelineCardProps {
+  pipeline: PipelineInfo;
+  onRun: (pipeline: PipelineInfo) => void;
+}
+
+function PipelineCard({ pipeline, onRun }: PipelineCardProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md transition-shadow">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex items-center gap-3">
+          <span className="text-2xl">{pipeline.icon}</span>
+          <div>
+            <h3 className="font-medium text-gray-900 dark:text-white">
+              {pipeline.displayName}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {pipeline.id} · v{pipeline.version}
+            </p>
+          </div>
+        </div>
+        <CategoryBadge category={pipeline.category} />
+      </div>
+
+      <p className="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
+        {pipeline.description}
+      </p>
+
+      {pipeline.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1 mb-3">
+          {pipeline.tags.slice(0, 3).map((tag) => (
+            <span
+              key={tag}
+              className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded text-xs text-gray-600 dark:text-gray-300"
+            >
+              {tag}
+            </span>
+          ))}
+          {pipeline.tags.length > 3 && (
+            <span className="px-1.5 py-0.5 text-xs text-gray-400">
+              +{pipeline.tags.length - 3}
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between pt-2 border-t border-gray-100 dark:border-gray-700">
+        <span className="text-xs text-gray-400">
+          {pipeline.inputs.length} 个输入参数
+        </span>
+        <button
+          onClick={() => onRun(pipeline)}
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors"
+        >
+          <Play className="w-4 h-4" />
+          运行
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// === Pipeline Run Modal ===
+
+interface RunModalProps {
+  pipeline: PipelineInfo;
+  onClose: () => void;
+  onComplete: (result: PipelineRunResponse) => void;
+}
+
+function RunModal({ pipeline, onClose, onComplete }: RunModalProps) {
+  const [values, setValues] = useState<Record<string, unknown>>(() => {
+    const defaults: Record<string, unknown> = {};
+    pipeline.inputs.forEach((input) => {
+      defaults[input.name] = input.default ?? getDefaultForType(input.inputType);
+    });
+    return defaults;
+  });
+  const [errors, setErrors] = useState<string[]>([]);
+  const [running, setRunning] = useState(false);
+  const [progress, setProgress] = useState<PipelineRunResponse | null>(null);
+
+  const handleInputChange = (name: string, value: unknown) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setErrors([]);
+  };
+
+  const handleRun = async () => {
+    // Validate inputs
+    const validation = validateInputs(pipeline.inputs, values);
+    if (!validation.valid) {
+      setErrors(validation.errors);
+      return;
+    }
+
+    setRunning(true);
+    setProgress(null);
+
+    try {
+      const result = await PipelineClient.runAndWait(
+        { pipelineId: pipeline.id, inputs: values },
+        (p) => setProgress(p)
+      );
+
+      if (result.status === 'completed') {
+        onComplete(result);
+      } else if (result.error) {
+        setErrors([result.error]);
+      }
+    } catch (err) {
+      setErrors([err instanceof Error ? err.message : String(err)]);
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const renderInput = (input: typeof pipeline.inputs[0]) => {
+    const value = values[input.name];
+
+    switch (input.inputType) {
+      case 'string':
+      case 'text':
+        return input.inputType === 'text' ? (
+          <textarea
+            value={(value as string) || ''}
+            onChange={(e) => handleInputChange(input.name, e.target.value)}
+            placeholder={input.placeholder}
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+          />
+        ) : (
+          <input
+            type="text"
+            value={(value as string) || ''}
+            onChange={(e) => handleInputChange(input.name, e.target.value)}
+            placeholder={input.placeholder}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+          />
+        );
+
+      case 'number':
+        return (
+          <input
+            type="number"
+            value={(value as number) ?? ''}
+            onChange={(e) => handleInputChange(input.name, e.target.valueAsNumber || 0)}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+          />
+        );
+
+      case 'boolean':
+        return (
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={(value as boolean) || false}
+              onChange={(e) => handleInputChange(input.name, e.target.checked)}
+              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            <span className="text-sm text-gray-600 dark:text-gray-300">启用</span>
+          </label>
+        );
+
+      case 'select':
+        return (
+          <select
+            value={(value as string) || ''}
+            onChange={(e) => handleInputChange(input.name, e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+          >
+            <option value="">请选择...</option>
+            {input.options.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        );
+
+      case 'multi-select':
+        return (
+          <div className="space-y-2">
+            {input.options.map((opt) => (
+              <label key={opt} className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={((value as string[]) || []).includes(opt)}
+                  onChange={(e) => {
+                    const current = (value as string[]) || [];
+                    const updated = e.target.checked
+                      ? [...current, opt]
+                      : current.filter((v) => v !== opt);
+                    handleInputChange(input.name, updated);
+                  }}
+                  className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <span className="text-sm text-gray-600 dark:text-gray-300">{opt}</span>
+              </label>
+            ))}
+          </div>
+        );
+
+      default:
+        return (
+          <input
+            type="text"
+            value={(value as string) || ''}
+            onChange={(e) => handleInputChange(input.name, e.target.value)}
+            placeholder={input.placeholder}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <span className="text-2xl">{pipeline.icon}</span>
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {pipeline.displayName}
+              </h2>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {pipeline.description}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+          >
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <div className="p-4 space-y-4">
+          {pipeline.inputs.map((input) => (
+            <div key={input.name}>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                {input.label}
+                {input.required && <span className="text-red-500 ml-1">*</span>}
+                <span className="text-xs text-gray-400 ml-2">
+                  ({formatInputType(input.inputType)})
+                </span>
+              </label>
+              {renderInput(input)}
+            </div>
+          ))}
+
+          {errors.length > 0 && (
+            <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-md">
+              {errors.map((error, i) => (
+                <p key={i} className="text-sm text-red-600 dark:text-red-400">
+                  {error}
+                </p>
+              ))}
+            </div>
+          )}
+
+          {/* Progress */}
+          {running && progress && (
+            <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+              <div className="flex items-center gap-2 mb-2">
+                <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
+                <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
+                  {progress.message || '运行中...'}
+                </span>
+              </div>
+              <div className="w-full bg-blue-200 dark:bg-blue-800 rounded-full h-2">
+                <div
+                  className="bg-blue-600 h-2 rounded-full transition-all"
+                  style={{ width: `${progress.percentage}%` }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 p-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={onClose}
+            disabled={running}
+            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md disabled:opacity-50"
+          >
+            取消
+          </button>
+          <button
+            onClick={handleRun}
+            disabled={running}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md disabled:opacity-50"
+          >
+            {running ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                运行中...
+              </>
+            ) : (
+              <>
+                <Play className="w-4 h-4" />
+                开始运行
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// === Main Pipelines Panel ===
+
+export function PipelinesPanel() {
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedPipeline, setSelectedPipeline] = useState<PipelineInfo | null>(null);
+  const { showToast } = useToast();
+
+  const { pipelines, loading, error, refresh } = usePipelines({
+    category: selectedCategory ?? undefined,
+  });
+
+  // Get unique categories
+  const categories = Array.from(
+    new Set(pipelines.map((p) => p.category).filter(Boolean))
+  );
+
+  // Filter pipelines by search
+  const filteredPipelines = searchQuery
+    ? pipelines.filter(
+        (p) =>
+          p.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          p.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          p.tags.some((t) => t.toLowerCase().includes(searchQuery.toLowerCase()))
+      )
+    : pipelines;
+
+  const handleRunPipeline = (pipeline: PipelineInfo) => {
+    setSelectedPipeline(pipeline);
+  };
+
+  const handleRunComplete = (result: PipelineRunResponse) => {
+    setSelectedPipeline(null);
+    if (result.status === 'completed') {
+      showToast('Pipeline 执行完成', 'success');
+    } else {
+      showToast(`Pipeline 执行失败: ${result.error}`, 'error');
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center gap-2">
+          <Package className="w-5 h-5 text-gray-500" />
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Pipelines
+          </h2>
+          <span className="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-full text-xs text-gray-600 dark:text-gray-300">
+            {pipelines.length}
+          </span>
+        </div>
+        <button
+          onClick={refresh}
+          disabled={loading}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          刷新
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700 space-y-3">
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <input
+            type="text"
+            placeholder="搜索 Pipelines..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+          />
+        </div>
+
+        {/* Category filters */}
+        {categories.length > 0 && (
+          <div className="flex items-center gap-2 flex-wrap">
+            <Filter className="w-4 h-4 text-gray-400" />
+            <button
+              onClick={() => setSelectedCategory(null)}
+              className={`px-2 py-1 text-xs rounded-md transition-colors ${
+                selectedCategory === null
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
+            >
+              全部
+            </button>
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setSelectedCategory(cat)}
+                className={`px-2 py-1 text-xs rounded-md transition-colors ${
+                  selectedCategory === cat
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                }`}
+              >
+                {CATEGORY_CONFIG[cat]?.label || cat}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {loading ? (
+          <div className="flex items-center justify-center h-32">
+            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+          </div>
+        ) : error ? (
+          <div className="text-center py-8 text-red-500">
+            <XCircle className="w-8 h-8 mx-auto mb-2" />
+            <p>{error}</p>
+          </div>
+        ) : filteredPipelines.length === 0 ? (
+          <div className="text-center py-8 text-gray-500">
+            <Package className="w-8 h-8 mx-auto mb-2" />
+            <p>没有找到 Pipeline</p>
+            {searchQuery && <p className="text-sm mt-1">尝试修改搜索条件</p>}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {filteredPipelines.map((pipeline) => (
+              <PipelineCard
+                key={pipeline.id}
+                pipeline={pipeline}
+                onRun={handleRunPipeline}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Run Modal */}
+      {selectedPipeline && (
+        <RunModal
+          pipeline={selectedPipeline}
+          onClose={() => setSelectedPipeline(null)}
+          onComplete={handleRunComplete}
+        />
+      )}
+    </div>
+  );
+}
+
+export default PipelinesPanel;