✨ feat(vscode): 代码阅读加「问 AI」，块下面问 Claude Code，问答存进 .spx 挂在块下

vscode/webview-ui/src/codeReader/App.tsx

@@ -4,12 +4,15 @@ import type { DocumentMessage, Excluded, Reveal } from './types'
 import type { ViewState } from './viewState'
 import { TriangleAlert } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { OrphanThreads } from './AskThread'
 import { BlockLevel } from './BlockTree'
 import { coveredByEditing, startEditing } from './editing'
 import { applyFilter, keptWhileEditing } from './filter'
 import { FilterBar } from './FilterBar'
+import { orphanThreads } from './qa'
 import { useDefinitionLinks } from './useDefinitionLinks'
 import { HighlightContext, useOccurrences } from './useOccurrences'
+import { useQa } from './useQa'
 import { useReveal } from './useReveal'
 import { useScrollPosition } from './useScrollPosition'
 import { collapsedIds } from './viewState'
@@ -25,6 +28,8 @@ function savedBlockModes(): BlockModes {
 }
 
 export function App(): ReactElement | null {
+  // 先于下面发 ready 的那个 effect 挂上收消息：ready 后扩展端马上发问答
+  const qa = useQa()
   const [doc, setDoc] = useState<DocumentMessage | null>(null)
   const [view, setView] = useState<BlockModes>(savedBlockModes)
   const [focusId, setFocusId] = useState<string | null>(null)
@@ -80,6 +85,9 @@ export function App(): ReactElement | null {
 
   const onFocused = useCallback(() => setFocusId(null), [])
   const kindNames = useMemo(() => new Map(doc?.attributes.find(attribute => attribute.id === 'kind')?.values.map(value => [value.id, value.name])), [doc])
+  const kindName = useCallback((kind: string) => kindNames.get(kind) ?? kind, [kindNames])
+  /** 找不到原来位置的问答；解析失败时一块都没有，不算 */
+  const orphans = useMemo(() => doc && doc.error === undefined && qa.state.available ? orphanThreads(qa.state.threads, doc.blocks) : [], [doc, qa.state])
   const tree = useMemo((): BlockTreeState | null => doc && {
     version: doc.version,
     editing: new Set(view.editing),
@@ -87,7 +95,7 @@ export function App(): ReactElement | null {
     hidden: filter.hidden,
     temporary: filter.temporary,
     covered,
-    kindName: kind => kindNames.get(kind) ?? kind,
+    kindName,
     focusId,
     onFocused,
     onToggleEdit: (id) => {
@@ -98,7 +106,8 @@ export function App(): ReactElement | null {
       }))
     },
     onToggleFold: id => setFolded([id], !collapsed.has(id)),
-  }, [doc, view, collapsed, filter, covered, kindNames, focusId, onFocused, setFolded])
+    ...(qa.state.available && { qa }),
+  }, [doc, view, collapsed, filter, covered, kindName, focusId, onFocused, setFolded, qa])
 
   if (!doc || !tree)
     return null
@@ -128,6 +137,7 @@ export function App(): ReactElement | null {
             </div>
           </div>
         )}
+        {orphans.length > 0 && <OrphanThreads threads={orphans} kindName={kindName} onDelete={qa.onDelete} />}
         {doc.blocks.length === 0
           ? doc.error === undefined && <div className="text-[var(--vscode-descriptionForeground)]">这个文件里没有代码。</div>
           : doc.blocks.some(block => !filter.hidden.has(block.id))