代码修改

frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx

@@ -38,6 +38,7 @@ const ENABLE_PAUSE_RESUME_UI = false;
 import { AIWritingForm } from './AIWritingForm';
 import { AIWritingTimeline } from './AIWritingTimeline';
 import { InterventionCard } from './InterventionCard';
+import { SkillStepsCard } from './SkillStepsCard';
 import { WritingSkeletonCard } from './WritingSkeletonCard';
 import { DraftStreamingView } from './DraftStreamingView';
 import { IntentResultCard } from './IntentResultCard';
@@ -411,6 +412,8 @@ export function AIWritingPanel({
                   reviewResult={state.reviewResult}
                   draftTitle={state.currentDraftTitle}
                   revisionCount={state.revisionCount}
+                  skillSearchSteps={state.skillSearchSteps}
+                  skillSearchInProgress={state.status === 'researching' && state.skillSearchSteps.length > 0}
                   onSubmit={submitIntervention}
                   disabled={false}
                 />
@@ -444,10 +447,19 @@ export function AIWritingPanel({
           />
         )}
 
+        {/* 研究中 + 已有技能步骤：实时流式展示技能检索过程，避免 skeleton 卡片掩盖步骤 */}
+        {state.status === 'researching' && state.skillSearchSteps.length > 0 && (
+          <div className="px-4 pb-2">
+            <SkillStepsCard steps={state.skillSearchSteps} inProgress />
+          </div>
+        )}
+
         {showSkeleton &&
          state.status !== 'writing_draft' &&
          !(state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText)) &&
          !(state.status === 'reviewing' && state.streamingReviewItems.length > 0) &&
+         /* 技能检索已经在流式展示步骤，不需要再叠加 skeleton */
+         !(state.status === 'researching' && state.skillSearchSteps.length > 0) &&
          /* 意图解析流式过程中（LLM 还在吐 JSON）不要显示 skeleton */
          !state.intentStreamingText && !state.intentThinkingText && (
           <div className="px-4 pb-4">

frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx

@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 import {
   PauseCircle, CheckCircle2, RotateCcw, Search,
   RefreshCw, PenLine, ArrowRight, ShieldAlert, ClipboardEdit, SendHorizonal,
-  Trash2, BookOpen,
+  Trash2, BookOpen, Sparkles,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -10,11 +10,13 @@ import type {
   AIMaterial, AIOutline, ReviewResult, ReviewIssue,
   ProgressEvent, UserInterventionPayload,
   BlockedSection, SectionDecisionKind,
+  SkillSearchStep,
 } from '../../types/ai-writing';
 import { MaterialsCard } from './MaterialsCard';
 import { MaterialsToolbar } from './MaterialsToolbar';
 import { OutlineCard } from './OutlineCard';
 import { ReviewCard } from './ReviewCard';
+import { SkillStepsCard } from './SkillStepsCard';
 
 interface InterventionCardProps {
   pauseEvent: ProgressEvent;
@@ -23,18 +25,29 @@ interface InterventionCardProps {
   reviewResult: ReviewResult | null;
   draftTitle: string;
   revisionCount: number;
+  skillSearchSteps?: SkillSearchStep[];
+  /** 是否正在检索中（researching/awaiting 切换之间，前端用于流式展示步骤进行中） */
+  skillSearchInProgress?: boolean;
   onSubmit: (payload: UserInterventionPayload) => void;
   disabled?: boolean;
 }
 
 export function InterventionCard({
   pauseEvent, materials, outline, reviewResult,
-  draftTitle, revisionCount, onSubmit, disabled,
+  draftTitle, revisionCount, skillSearchSteps, skillSearchInProgress, onSubmit, disabled,
 }: InterventionCardProps) {
   const pausePoint = pauseEvent.pausePoint;
 
   if (pausePoint === 'material_confirm') {
-    return <MaterialConfirmCard materials={materials} onSubmit={onSubmit} disabled={disabled} />;
+    return (
+      <MaterialConfirmCard
+        materials={materials}
+        skillSearchSteps={skillSearchSteps ?? []}
+        skillSearchInProgress={skillSearchInProgress}
+        onSubmit={onSubmit}
+        disabled={disabled}
+      />
+    );
   }
 
   if (pausePoint === 'outline_confirm') {
@@ -106,30 +119,40 @@ function formatSelectedIssues(issues: ReviewIssue[], selectedIndices: Set<number
 
 interface MaterialConfirmCardProps {
   materials: AIMaterial[];
+  skillSearchSteps: SkillSearchStep[];
+  skillSearchInProgress?: boolean;
   onSubmit: (payload: UserInterventionPayload) => void;
   disabled?: boolean;
 }
 
-function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmCardProps) {
+function MaterialConfirmCard({ materials, skillSearchSteps, skillSearchInProgress, onSubmit, disabled }: MaterialConfirmCardProps) {
   const [selectedIds, setSelectedIds] = useState<Set<string>>(
     () => new Set(materials.map((m) => m.id)),
   );
-  const [extraKeywords, setExtraKeywords] = useState<string[]>([]);
+  const [userQuery, setUserQuery] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   async function handleConfirm() {
     setSubmitting(true);
-    await onSubmit({ action: 'confirm', approvedMaterialIds: [...selectedIds], extraKeywords });
+    await onSubmit({ action: 'confirm', approvedMaterialIds: [...selectedIds], userQuery: userQuery.trim() || undefined });
     setSubmitting(false);
   }
 
   async function handleReSearch() {
     setSubmitting(true);
-    await onSubmit({ action: 're_search', approvedMaterialIds: [], extraKeywords });
+    await onSubmit({ action: 're_search', approvedMaterialIds: [], userQuery: userQuery.trim() || undefined });
     setSubmitting(false);
   }
 
-  const hasExtra = extraKeywords.length > 0;
+  async function handleEnableSkillSearch() {
+    setSubmitting(true);
+    await onSubmit({ action: 'enable_skill_search', userQuery: userQuery.trim() || undefined });
+    setSubmitting(false);
+  }
+
+  const hasQuery = userQuery.trim().length > 0;
+  // 当前素材是否来自技能检索：根据素材 sourceType 推断（覆盖式替换后全是 skill）
+  const isSkillResult = materials.length > 0 && materials.every((m) => m.sourceType === 'skill');
 
   // 空数据态：未检索到任何素材，提示用户重新搜索或在无素材情况下继续
   if (materials.length === 0) {
@@ -140,33 +163,45 @@ function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmC
           <div>
             <p className="text-xs font-medium">未检索到任何素材</p>
             <p className="text-xs text-muted-foreground mt-0.5">
-              素材收集专家本次没有检索到相关数据。你可以补充关键词重新搜索，或在无素材的情况下直接继续写作（文章将仅依据写作意图生成）。
+              素材收集专家本次没有检索到相关数据。你可以补充关键词重新搜索、启用技能检索，或在无素材的情况下直接继续写作。
             </p>
           </div>
         </div>
 
+        {(skillSearchSteps.length > 0 || skillSearchInProgress) && (
+          <SkillStepsCard steps={skillSearchSteps} inProgress={skillSearchInProgress} />
+        )}
+
         <MaterialsToolbar
           materials={materials}
           selectedIds={selectedIds}
           onSelectAll={() => setSelectedIds(new Set())}
           onDeselectAll={() => setSelectedIds(new Set())}
-          extraKeywords={extraKeywords}
-          onAddKeyword={(kw) => setExtraKeywords((prev) => [...prev, kw])}
-          onRemoveKeyword={(kw) => setExtraKeywords((prev) => prev.filter((k) => k !== kw))}
+          userQuery={userQuery}
+          onUserQueryChange={setUserQuery}
+          onSubmitQuery={handleReSearch}
+          disabled={disabled || submitting}
         />
 
-        <div className="flex gap-2 pt-1">
+        <div className="flex flex-wrap gap-2 pt-1">
           <Button
-            type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+            type="button" size="sm" className="flex-1 min-w-[140px] h-8 text-xs gap-1.5"
             onClick={handleReSearch} disabled={disabled || submitting}
           >
-            {hasExtra
-              ? <><Search className="size-3.5" />追加搜索</>
+            {hasQuery
+              ? <><Search className="size-3.5" />按输入重新搜索</>
               : <><RotateCcw className="size-3.5" />重新搜索</>}
           </Button>
+          <Button
+            type="button" variant="outline" size="sm"
+            className="h-8 text-xs gap-1.5 shrink-0 border-violet-200 text-violet-700 hover:bg-violet-50 dark:border-violet-800 dark:text-violet-300 dark:hover:bg-violet-950/30"
+            onClick={handleEnableSkillSearch} disabled={disabled || submitting}
+          >
+            <Sparkles className="size-3.5" />技能检索
+          </Button>
           <Button
             type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
-            onClick={handleConfirm} disabled={disabled || submitting}
+            onClick={() => onSubmit({ action: 'confirm', approvedMaterialIds: [] })} disabled={disabled || submitting}
           >
             <ArrowRight className="size-3.5" />无数据继续写作
           </Button>
@@ -182,11 +217,14 @@ function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmC
         <div>
           <p className="text-xs font-medium">需要您确认素材，才能继续</p>
           <p className="text-xs text-muted-foreground mt-0.5">
-            已搜集到 {materials.length} 条素材（默认全选）。您可以取消勾选不相关的素材，或补充关键词追加搜索。
+            已搜集到 {materials.length} 条{isSkillResult ? '技能素材' : '素材'}（默认全选）。
+            您可以取消勾选不相关的素材，或补充关键词追加搜索{isSkillResult ? '' : '，也可以启用技能检索从已启用的技能中获取素材'}。
           </p>
         </div>
       </div>
 
+      {skillSearchSteps.length > 0 && <SkillStepsCard steps={skillSearchSteps} />}
+
       <MaterialsCard materials={materials} selectedIds={selectedIds} onToggle={(id) => {
         setSelectedIds((prev) => {
           const next = new Set(prev);
@@ -200,24 +238,34 @@ function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmC
         selectedIds={selectedIds}
         onSelectAll={() => setSelectedIds(new Set(materials.map((m) => m.id)))}
         onDeselectAll={() => setSelectedIds(new Set())}
-        extraKeywords={extraKeywords}
-        onAddKeyword={(kw) => setExtraKeywords((prev) => [...prev, kw])}
-        onRemoveKeyword={(kw) => setExtraKeywords((prev) => prev.filter((k) => k !== kw))}
+        userQuery={userQuery}
+        onUserQueryChange={setUserQuery}
+        onSubmitQuery={handleReSearch}
+        disabled={disabled || submitting}
       />
 
-      <div className="flex gap-2 pt-1">
+      <div className="flex flex-wrap gap-2 pt-1">
         <Button
-          type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+          type="button" size="sm" className="flex-1 min-w-[180px] h-8 text-xs gap-1.5"
           onClick={handleConfirm} disabled={disabled || submitting || selectedIds.size === 0}
         >
           <CheckCircle2 className="size-3.5" />确认素材，开始规划大纲
         </Button>
+        {!isSkillResult && (
+          <Button
+            type="button" variant="outline" size="sm"
+            className="h-8 text-xs gap-1.5 shrink-0 border-violet-200 text-violet-700 hover:bg-violet-50 dark:border-violet-800 dark:text-violet-300 dark:hover:bg-violet-950/30"
+            onClick={handleEnableSkillSearch} disabled={disabled || submitting}
+          >
+            <Sparkles className="size-3.5" />技能检索
+          </Button>
+        )}
         <Button
           type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
           onClick={handleReSearch} disabled={disabled || submitting}
         >
-          {hasExtra
-            ? <><Search className="size-3.5" />追加搜索</>
+          {hasQuery
+            ? <><Search className="size-3.5" />按输入重新搜索</>
             : <><RotateCcw className="size-3.5" />重新搜索</>}
         </Button>
       </div>

frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, ExternalLink } from 'lucide-react';
+import { ChevronRight, ExternalLink, Sparkles } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { buildIntranetSourceUrl } from '@/core/config';
 import type { AIMaterial } from '../../types/ai-writing';
@@ -26,12 +26,14 @@ function relevanceLabel(score: number): string {
 export function MaterialItem({ material, checked, onToggle }: MaterialItemProps) {
   const [expanded, setExpanded] = useState(false);
   const pct = Math.round(material.relevanceScore * 100);
+  const isSkill = material.sourceType === 'skill';
 
   return (
     <div
       className={cn(
         'rounded-md border text-xs transition-colors',
         checked ? 'border-border bg-background' : 'border-border/50 bg-muted/30',
+        isSkill && checked && 'border-violet-300/70 dark:border-violet-800/60',
       )}
     >
       {/* 头部行 */}
@@ -50,6 +52,12 @@ export function MaterialItem({ material, checked, onToggle }: MaterialItemProps)
           onClick={() => setExpanded((v) => !v)}
           className="flex flex-1 items-start gap-1.5 text-left"
         >
+          {isSkill && (
+            <span className="mt-0.5 inline-flex items-center gap-0.5 px-1 py-0.5 rounded text-[10px] font-medium bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200 shrink-0">
+              <Sparkles className="size-2.5" />
+              技能
+            </span>
+          )}
           <span className={cn('flex-1 font-medium leading-snug line-clamp-2', !checked && 'text-muted-foreground')}>
             {material.title}
           </span>

frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react';
-import { Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useRef } from 'react';
 import type { AIMaterial } from '../../types/ai-writing';
 
 interface MaterialsToolbarProps {
@@ -8,9 +6,13 @@ interface MaterialsToolbarProps {
   selectedIds: Set<string>;
   onSelectAll: () => void;
   onDeselectAll: () => void;
-  extraKeywords: string[];
-  onAddKeyword: (kw: string) => void;
-  onRemoveKeyword: (kw: string) => void;
+  /** 单输入框文本：可以是技能名、检索来源、补充检索意图 */
+  userQuery: string;
+  onUserQueryChange: (text: string) => void;
+  /** 回车键提交（默认重新搜索；详细按钮交给父组件渲染） */
+  onSubmitQuery?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
 }
 
 export function MaterialsToolbar({
@@ -18,18 +20,27 @@ export function MaterialsToolbar({
   selectedIds,
   onSelectAll,
   onDeselectAll,
-  extraKeywords,
-  onAddKeyword,
-  onRemoveKeyword,
+  userQuery,
+  onUserQueryChange,
+  onSubmitQuery,
+  placeholder,
+  disabled,
 }: MaterialsToolbarProps) {
-  const [kwInput, setKwInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const allSelected = materials.length > 0 && selectedIds.size === materials.length;
 
-  function handleAddKeyword() {
-    const kw = kwInput.trim();
-    if (!kw || extraKeywords.includes(kw)) return;
-    onAddKeyword(kw);
-    setKwInput('');
+  function handleInput(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    onUserQueryChange(e.target.value);
+    const el = e.target;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, 96)}px`;
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey && onSubmitQuery) {
+      e.preventDefault();
+      onSubmitQuery();
+    }
   }
 
   return (
@@ -51,50 +62,21 @@ export function MaterialsToolbar({
         </div>
       )}
 
-      {/* 补充关键词 */}
+      {/* 单输入框 */}
       <div className="space-y-1.5">
-        <label className="text-xs text-muted-foreground">补充搜索关键词（可选）</label>
-        <div className="flex gap-1.5">
-          <input
-            type="text"
-            value={kwInput}
-            onChange={(e) => setKwInput(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && handleAddKeyword()}
-            placeholder="输入关键词后按 Enter 或点击 +"
-            className="flex-1 h-7 rounded-md border border-input bg-background px-2.5 py-1 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          />
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="h-7 px-2"
-            onClick={handleAddKeyword}
-            disabled={!kwInput.trim()}
-          >
-            <Plus className="size-3" />
-          </Button>
-        </div>
-
-        {/* 已添加关键词 Tag 列表 */}
-        {extraKeywords.length > 0 && (
-          <div className="flex flex-wrap gap-1">
-            {extraKeywords.map((kw) => (
-              <span
-                key={kw}
-                className="inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary px-2 py-0.5 text-xs"
-              >
-                {kw}
-                <button
-                  type="button"
-                  onClick={() => onRemoveKeyword(kw)}
-                  className="hover:text-destructive leading-none"
-                >
-                  ×
-                </button>
-              </span>
-            ))}
-          </div>
-        )}
+        <label className="text-xs text-muted-foreground">
+          补充检索（可选）— 写下你想检索的内容，然后点"重新搜索"或"技能检索"
+        </label>
+        <textarea
+          ref={textareaRef}
+          rows={1}
+          value={userQuery}
+          onChange={handleInput}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder ?? '例如：想查看各大平台销量 / 2025 年财报 / 行业头部公司近期动态…'}
+          disabled={disabled}
+          className="w-full resize-none rounded-md border border-input bg-background px-2.5 py-1.5 text-xs leading-5 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 min-h-[28px] max-h-24"
+        />
       </div>
     </div>
   );

frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { ChevronRight, Sparkles, ListChecks, Zap, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { SkillSearchStep } from '../../types/ai-writing';
+import { CollapseTransition } from './CollapseTransition';
+
+interface SkillStepsCardProps {
+  steps: SkillSearchStep[];
+  /** 是否仍在进行中（researching 状态下显示 spinner，让用户看到流式进展） */
+  inProgress?: boolean;
+}
+
+const STEP_ICON: Record<SkillSearchStep['type'], typeof Sparkles> = {
+  list_skills: ListChecks,
+  select_skills: Sparkles,
+  invoke_skill: Zap,
+};
+
+const STEP_LABEL: Record<SkillSearchStep['type'], string> = {
+  list_skills: '列出可用技能',
+  select_skills: '筛选相关技能',
+  invoke_skill: '调用技能',
+};
+
+export function SkillStepsCard({ steps, inProgress }: SkillStepsCardProps) {
+  const [expanded, setExpanded] = useState(true);
+  if (steps.length === 0 && !inProgress) return null;
+
+  return (
+    <div className="rounded-md border border-violet-200 bg-violet-50/40 dark:border-violet-900/40 dark:bg-violet-950/20 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-xs font-medium hover:bg-violet-100/50 dark:hover:bg-violet-900/30 transition-colors text-left"
+      >
+        {inProgress
+          ? <Loader2 className="size-3.5 text-violet-500 shrink-0 animate-spin" />
+          : <Sparkles className="size-3.5 text-violet-500 shrink-0" />}
+        <span className="flex-1">
+          技能检索过程
+          <span className="ml-1 text-muted-foreground font-normal">
+            （共 {steps.length} 步{inProgress ? '，进行中…' : ''}）
+          </span>
+        </span>
+        <ChevronRight
+          className={cn(
+            'size-3 text-muted-foreground transition-transform duration-200',
+            expanded && 'rotate-90',
+          )}
+        />
+      </button>
+
+      <CollapseTransition open={expanded}>
+        <ol className="px-3 pb-2.5 pt-1 space-y-1.5 border-t border-violet-200/60 dark:border-violet-900/30">
+          {steps.map((step, idx) => {
+            const Icon = STEP_ICON[step.type] ?? Sparkles;
+            const label = STEP_LABEL[step.type] ?? step.type;
+            return (
+              <li key={idx} className="flex items-start gap-2 text-[11px]">
+                <span className="shrink-0 mt-0.5 inline-flex items-center justify-center size-4 rounded-full text-[10px] font-medium bg-violet-100 dark:bg-violet-900/60 text-violet-600 dark:text-violet-300">
+                  {idx + 1}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1 font-medium text-violet-700 dark:text-violet-300">
+                    <Icon className="size-3 shrink-0" />
+                    <span>{label}</span>
+                    {step.skillName && (
+                      <span className="font-mono text-violet-900 dark:text-violet-100">
+                        · {step.skillName}
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-muted-foreground mt-0.5">{step.message}</div>
+                  {step.skillNames && step.skillNames.length > 0 && (
+                    <div className="mt-1 flex flex-wrap gap-1">
+                      {step.skillNames.map((name) => (
+                        <span
+                          key={name}
+                          className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono bg-violet-100 dark:bg-violet-900/60 text-violet-700 dark:text-violet-200"
+                        >
+                          {name}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                  {step.reason && (
+                    <div className="mt-0.5 text-[10px] text-violet-600/80 dark:text-violet-400/80 italic">
+                      原因：{step.reason}
+                    </div>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+          {inProgress && (
+            <li className="flex items-center gap-2 text-[11px] text-muted-foreground italic">
+              <Loader2 className="size-3 animate-spin" />
+              更多步骤生成中…
+            </li>
+          )}
+        </ol>
+      </CollapseTransition>
+    </div>
+  );
+}

frontend-web/src/open-canvas/hooks/useAIWritingStream.ts

@@ -41,6 +41,7 @@ import type {
   ProgressEventType,
   ReviewIssue,
   ReviewResult,
+  SkillSearchStep,
   StreamingReviewItem,
   UserInterventionPayload,
   WritingStatus,
@@ -71,6 +72,7 @@ const INITIAL_STATE: AIWritingState = {
   intentThinkingText: '',
   parsedIntent: null,
   researchProgress: '',
+  skillSearchSteps: [],
   streamingReviewItems: [],
   revisionSummary: null,
   pendingRevisionContext: null,
@@ -105,7 +107,7 @@ function reducer(prev: AIWritingState, action: Action): AIWritingState {
         ...prev,
         currentPause: null,
         status: ns,
-        ...(ns === 'researching' ? { researchProgress: '' } : {}),
+        ...(ns === 'researching' ? { researchProgress: '', skillSearchSteps: [] } : {}),
         ...(ns === 'writing_outline' ? { outlineStreamingText: '', outlineThinkingText: '' } : {}),
         ...(ns === 'writing_draft' ? { streamingDraftSections: [], streamingDraftTitle: '' } : {}),
         ...(ns === 'reviewing' ? { streamingReviewItems: [] } : {}),
@@ -191,12 +193,22 @@ function handleEvent(prev: AIWritingState, event: ProgressEvent): AIWritingState
     case 'resumed':
       return { ...base, currentPause: null };
 
-    case 'materials_ready':
+    case 'skill_search_step': {
+      const step = event.skillStep;
+      if (!step) return base;
+      return { ...base, skillSearchSteps: [...prev.skillSearchSteps, step] };
+    }
+
+    case 'materials_ready': {
+      // 后端把 pkg.skill_search_steps 一并塞回来时，覆盖前端累积（保证刷新页面回放也对）
+      const incomingSteps = (event as unknown as { skillSearchSteps?: SkillSearchStep[] }).skillSearchSteps;
       return {
         ...base,
         materials: (event.materials ?? []) as AIMaterial[],
         researchProgress: '',
+        ...(incomingSteps ? { skillSearchSteps: incomingSteps } : {}),
       };
+    }
 
     case 'outline_chunk': {
       const text = (event as unknown as { text: string }).text ?? '';
@@ -337,6 +349,7 @@ function handleEvent(prev: AIWritingState, event: ProgressEvent): AIWritingState
 // ── snake_case ↔ camelCase 归一化（custom 通道事件 + interrupt payload） ──────
 
 function normalizeMaterial(m: Record<string, unknown>): AIMaterial {
+  const extra = (m.extra_metadata ?? m.extraMetadata) as Record<string, unknown> | undefined;
   return {
     id: String(m.id ?? ''),
     title: String(m.title ?? ''),
@@ -344,9 +357,21 @@ function normalizeMaterial(m: Record<string, unknown>): AIMaterial {
     source: String(m.source ?? ''),
     publishedAt: String(m.published_at ?? m.publishedAt ?? ''),
     relevanceScore: Number(m.relevance_score ?? m.relevanceScore ?? 0),
-    sourceType: (m.source_type ?? m.sourceType ?? 'internet') as 'internet' | 'intranet',
+    sourceType: (m.source_type ?? m.sourceType ?? 'internet') as AIMaterial['sourceType'],
     url: m.url as string | undefined,
     recUuid: (m.recUuid ?? m.rec_uuid) as string | undefined,
+    extraMetadata: extra,
+  };
+}
+
+function normalizeSkillStep(s: Record<string, unknown>): SkillSearchStep {
+  return {
+    type: (s.type as SkillSearchStep['type']) ?? 'invoke_skill',
+    message: String(s.message ?? ''),
+    skillNames: (s.skill_names ?? s.skillNames) as string[] | undefined,
+    skillName: (s.skill_name ?? s.skillName) as string | undefined,
+    reason: s.reason as string | undefined,
+    matchedCount: (s.matched_count ?? s.matchedCount) as number | undefined,
   };
 }
 
@@ -445,6 +470,7 @@ function customToProgressEvent(raw: unknown, sessionId: string): ProgressEvent |
     'intent_chunk', 'intent_ready',
     'research_progress', 'outline_chunk', 'draft_chunk',
     'review_chunk', 'review_item_done',
+    'skill_search_step',
   ];
   if (!allowed.includes(type as ProgressEventType)) return null;
 
@@ -459,6 +485,10 @@ function customToProgressEvent(raw: unknown, sessionId: string): ProgressEvent |
   if (Array.isArray(merged.issues)) {
     merged.reviewItemIssues = (merged.issues as Record<string, unknown>[]).map(normalizeReviewIssue);
   }
+  // skill_search_step：把字段折成 skillStep 子对象，方便 reducer / UI 取用
+  if (type === 'skill_search_step') {
+    merged.skillStep = normalizeSkillStep(o);
+  }
   return merged as unknown as ProgressEvent;
 }
 
@@ -478,6 +508,9 @@ function nodeUpdatesToEvents(nodeOutput: unknown, sessionId: string): ProgressEv
   // ``material_package`` 出现 → materials_ready（节点 progress_events 里不带）
   if (out.material_package && typeof out.material_package === 'object') {
     const pkg = out.material_package as Record<string, unknown>;
+    const skillSteps = Array.isArray(pkg.skill_search_steps ?? pkg.skillSearchSteps)
+      ? ((pkg.skill_search_steps ?? pkg.skillSearchSteps) as Record<string, unknown>[]).map(normalizeSkillStep)
+      : undefined;
     events.push({
       type: 'materials_ready',
       sessionId,
@@ -485,7 +518,8 @@ function nodeUpdatesToEvents(nodeOutput: unknown, sessionId: string): ProgressEv
       materials: Array.isArray(pkg.materials) ? (pkg.materials as Record<string, unknown>[]).map(normalizeMaterial) : [],
       keywords: (pkg.keywords ?? []) as string[],
       materialSummary: (pkg.summary as string) ?? '',
-    });
+      ...(skillSteps ? { skillSearchSteps: skillSteps } as unknown as Partial<ProgressEvent> : {}),
+    } as ProgressEvent);
   }
 
   // ``current_outline`` 出现且 progress_events 里没 outline_ready → 合成一条

frontend-web/src/open-canvas/types/ai-writing.ts

@@ -7,9 +7,24 @@ export interface AIMaterial {
   source: string;
   publishedAt: string;
   relevanceScore: number;
-  sourceType: 'internet' | 'intranet';
+  sourceType: 'internet' | 'intranet' | 'skill';
   url?: string;
   recUuid?: string;
+  // skill 类素材的元信息（skill_name / container_path / category / skill_full_content 等）
+  extraMetadata?: Record<string, unknown>;
+}
+
+// 技能检索过程的单步记录（前端时间线展示"使用了 X 技能"）
+//   list_skills：列出全部 enabled 技能
+//   select_skills：LLM 按相关度排序的候选
+//   invoke_skill：实际按顺序调用某个技能
+export interface SkillSearchStep {
+  type: 'list_skills' | 'select_skills' | 'invoke_skill';
+  message: string;
+  skillNames?: string[];
+  skillName?: string;
+  reason?: string;
+  matchedCount?: number;
 }
 
 // ── 大纲 ─────────────────────────────────────────────────────────────────────
@@ -139,6 +154,7 @@ export type ProgressEventType =
   | 'await_user'
   | 'resumed'
   | 'notice'
+  | 'skill_search_step'
   | 'done'
   | 'error';
 
@@ -173,6 +189,8 @@ export interface ProgressEvent {
   pauseContext?: Record<string, unknown>;
   // section_help：素材不足、待用户决策的章节
   blockedSections?: BlockedSection[];
+  // skill_search_step：技能检索步骤事件（list_skills / select_skills / invoke_skill）
+  skillStep?: SkillSearchStep;
 }
 
 // ── 用户干预提交体 ────────────────────────────────────────────────────────────
@@ -180,7 +198,10 @@ export interface ProgressEvent {
 export interface UserInterventionPayload {
   action: string;
   approvedMaterialIds?: string[];
+  /** @deprecated 旧版多关键词追加。新版统一用 userQuery 单输入框 */
   extraKeywords?: string[];
+  /** PAUSE-1 素材确认：用户单输入框写的自然语言（技能名/来源/检索意图都行）。re_search / enable_skill_search 共用。 */
+  userQuery?: string;
   editedOutline?: AIOutline;
   outlineFeedback?: string;
   userRevisionNotes?: string;
@@ -291,6 +312,8 @@ export interface AIWritingState {
   parsedIntent: ParsedIntent | null;
   // 素材收集实时进度（最新一条提示文案）
   researchProgress: string;
+  // 技能检索步骤（按发生顺序累积，pause_material 卡片里渲染时间线）
+  skillSearchSteps: SkillSearchStep[];
   // 流式审核（逐条到达）
   streamingReviewItems: StreamingReviewItem[];
   // 修改摘要