Agent-System-Frontend/src/components/CockpitReader.tsx

// 文档驾驶舱 I3：阅读器（连续正文 + 版本摘要/差异折叠）与右侧依据/影响面板。
// 消费 I1/I3 命令面 rdm.cockpit.node(+versions)/node.history（Dev 仓 docs/superpowers
// specs 2026-10-16 view-spec §5–§6）。不新增第四栏：右栏是选中节点的同一依据面，
// 全景与阅读器共享 selectedNodeRef；面板刷新原位进行，不抢占滚动位置（DV-R05/§5）。
// 折叠只用 @ui Collapsible；颜色/字号只消费 @ui/tokens.css。
import { useCallback, useEffect, useRef, useState } from 'react'
import { api } from '../api'
import { Collapsible, EmptyState } from '@ui'
import {
  assembleReader, diffLines, historyLine, mergeHistoryStrict, versionSummary,
  PANEL_TABS, type CockpitContentBlock, type CockpitHistorySummary,
  type CockpitMeta, type CockpitNodeRef, type CockpitTreeNode,
  type CockpitVersionSummary, type Density, type PanelTabId,
} from '../documentCockpit'

export interface ReaderSelection { ref: CockpitNodeRef; parentDocId?: string }

interface NodeDetailShape {
  meta: CockpitMeta
  node: CockpitTreeNode
  body?: CockpitContentBlock[]
  children: CockpitTreeNode[]
  sources: { items: any[] }
  history: { items: CockpitHistorySummary[]; hasMore: boolean; nextCursor?: string }
  impacts: { items: any[] }
  conflicts: { items: any[] }
  versions?: CockpitVersionSummary[]
}

function useNodeDetail(pid: string, sel?: CockpitNodeRef) {
  const [detail, setDetail] = useState<NodeDetailShape | null>(null)
  const [err, setErr] = useState('')
  const gen = useRef(0)
  useEffect(() => {
    const g = ++gen.current
    setDetail(null); setErr('')
    if (!sel) return
    api.rdmCommand<any>('rdm.cockpit.node', { projectId: pid, kind: sel.kind, id: sel.id })
      .then(d => { if (g === gen.current) setDetail(d) })
      .catch(e => { if (g === gen.current) setErr(e.message) })
    return () => { gen.current++ }
  }, [pid, sel?.kind, sel?.id])
  return { detail, err }
}

/** 版本块：当前版本 + 前一版本摘要；完整差异（行级标记）折叠。受限只给元数据。 */
export function VersionBlock({ versions, density }: { versions?: CockpitVersionSummary[]; density: Density }) {
  if (!versions || versions.length === 0) return null
  const { current, previous, redacted } = versionSummary(versions)
  if (redacted || !current || current.content === undefined) {
    return <div className="empty-note">版本受限（仅元数据可见）</div>
  }
  const prev = previous && previous.content !== undefined ? previous : undefined
  return (
    <Collapsible
      id={`cockpit-versions-${current.version}`}
      trigger={<span className="cockpit-versions-toggle">版本 {current.version}{previous ? `（前一版 ${previous.version}）` : '（首版）'}与完整差异</span>}
    >
      <div className={`cockpit-versions cockpit-density-${density}`}>
        {prev ? (
          <>
            <div className="cockpit-versions-head">当前 {current.version} · {current.actor || '未知'} · {new Date(current.at).toLocaleString('zh-CN')}</div>
            <pre className="cockpit-diff">
              {diffLines(current.content || '', prev.content || '').map((l, i) => (
                <div key={i} className={`cockpit-diff-${l.flag === '=' ? 'same' : l.flag === '+' ? 'add' : 'del'}`}>{l.flag} {l.text}</div>
              ))}
            </pre>
            <div className="cockpit-versions-head">前一版 {prev.version} · {prev.actor || '未知'} · {new Date(prev.at).toLocaleString('zh-CN')}</div>
          </>
        ) : (
          <div className="cockpit-versions-head">首版 · {current.actor || '未知'} · {new Date(current.at).toLocaleString('zh-CN')}</div>
        )}
      </div>
    </Collapsible>
  )
}

/** 阅读器中栏：选中章节=该节连续正文+版本块；选中文档=全章节连续装配（每节详情按需拉取）。 */
export function CockpitReader({ pid, selection, sections, density, onBack }: {
  pid: string
  selection: ReaderSelection
  sections: CockpitTreeNode[]
  density: Density
  onBack: () => void
}) {
  const { detail, err } = useNodeDetail(pid, selection.ref)
  const isSection = selection.ref.kind === 'section'
  const [sectionDetails, setSectionDetails] = useState<Record<string, NodeDetailShape | undefined>>({})
  const gen = useRef(0)
  // 文档阅读器：按树顺序装配全部章节详情（上限 20；失败章节给受限占位不拖垮整篇）。
  useEffect(() => {
    if (isSection || selection.ref.kind !== 'document') return
    const g = ++gen.current
    const list = sections.slice(0, 20)
    setSectionDetails({})
    for (const sec of list) {
      api.rdmCommand<any>('rdm.cockpit.node', { projectId: pid, kind: 'section', id: sec.ref.id })
        .then(d => { if (g === gen.current) setSectionDetails(prev => ({ ...prev, [sec.ref.id]: d })) })
        .catch(() => { if (g === gen.current) setSectionDetails(prev => ({ ...prev, [sec.ref.id]: undefined })) })
    }
    return () => { gen.current++ }
  }, [pid, isSection, selection.ref.id, sections])
  const anchorRef = useRef<HTMLDivElement | null>(null)
  useEffect(() => { anchorRef.current?.scrollIntoView({ block: 'start' }) }, [selection.ref.id])
  if (err) return <EmptyState icon="alert">阅读器加载失败：{err}</EmptyState>
  return (
    <div className={`cockpit-reader cockpit-density-${density}`}>
      <div className="cockpit-nodehead" ref={anchorRef}>
        <button type="button" className="cockpit-back" onClick={onBack}>← 返回全景</button>
        <span className="cockpit-nodetitle">{detail?.node?.title || (isSection ? '章节' : '文档')}</span>
      </div>
      {isSection && detail && (
        <>
          {renderBody(detail.body, detail.meta)}
          <VersionBlock versions={detail.versions} density={density} />
        </>
      )}
      {!isSection && (
        <>
          {sections.length === 0 && <div className="empty-note">该文档暂无章节</div>}
          {assembleReader(sections, sectionDetails).map(sec => (
            <section key={sec.ref.id} id={`sec-${sec.ref.id}`} className="cockpit-reader-section">
              <div className="cockpit-reader-sechead">
                <span className="cockpit-reader-sectitle">{sec.title}</span>
                {sec.blocks[0]?.kind === 'restricted'
                  ? <span className="cockpit-badge">内容受限（{sec.blocks[0].reason || '权限'}）</span>
                  : sec.contentState === 'empty' && <span className="cockpit-badge">空</span>}
              </div>
              {sec.blocks.map((b, i) => b.kind === 'text'
                ? <p key={i} className="cockpit-reader-para">{b.text}</p>
                : <p key={i} className="empty-note">内容受限——标题与状态可见，正文不展示</p>)}
              <VersionBlock versions={sec.versions} density={density} />
            </section>
          ))}
        </>
      )}
    </div>
  )
}

function renderBody(body: CockpitContentBlock[] | undefined, meta: CockpitMeta) {
  if (!body || body.length === 0) return <div className="empty-note">暂无正文</div>
  if (body[0].kind === 'restricted') {
    return <div className="empty-note">内容受限（{body[0].reason || '权限'}）——标题与状态可见，正文不展示</div>
  }
  return (
    <>
      {body.map((b, i) => <p key={i} className="cockpit-reader-para">{b.text}</p>)}
      {meta.truncated && <div className="cockpit-truncated">详情已截断：{meta.truncationReasons?.join('；')}</div>}
    </>
  )
}

/** 右栏：依据/历史/影响/冲突四标签（同一选中节点；刷新原位，不抢占滚动）。 */
export function CockpitPanel({ pid, selection, tab, onTab, density }: {
  pid: string
  selection: ReaderSelection
  tab: PanelTabId
  onTab: (t: PanelTabId) => void
  density: Density
}) {
  const { detail, err } = useNodeDetail(pid, selection.ref)
  const [historyItems, setHistoryItems] = useState<CockpitHistorySummary[]>([])
  const [historyMore, setHistoryMore] = useState(false)
  const [historyCursor, setHistoryCursor] = useState<string | undefined>(undefined)
  useEffect(() => {
    setHistoryItems([]); setHistoryMore(false); setHistoryCursor(undefined)
  }, [selection.ref.kind, selection.ref.id])
  useEffect(() => {
    if (!detail?.history) return
    // 严格合并：只接受 seq 更新的条目，乱序/重复丢弃；不重置已渲染内容。
    setHistoryItems(prev => mergeHistoryStrict(prev, detail.history.items).items)
    setHistoryMore(detail.history.hasMore)
    setHistoryCursor(detail.history.nextCursor)
  }, [detail])
  const loadMoreHistory = useCallback(() => {
    if (!historyCursor) return
    api.rdmCommand<any>('rdm.cockpit.node.history', { projectId: pid, kind: selection.ref.kind, id: selection.ref.id, cursor: historyCursor, limit: 20 })
      .then(page => {
        setHistoryItems(prev => mergeHistoryStrict(prev, page.items).items)
        setHistoryMore(page.hasMore)
        setHistoryCursor(page.nextCursor)
      })
      .catch(() => { /* 保留已渲染历史；可再次点击重试 */ })
  }, [pid, selection.ref.kind, selection.ref.id, historyCursor])
  const node = detail?.node
  return (
    <div className={`cockpit-panel cockpit-density-${density}`}>
      <div className="cockpit-panel-tabs" role="tablist" aria-label="依据与影响">
        {PANEL_TABS.map(t => (
          <button key={t.id} type="button" role="tab" aria-selected={tab === t.id}
            className={`cockpit-panel-tab${tab === t.id ? ' cockpit-panel-tab-active' : ''}`}
            onClick={() => onTab(t.id)}>
            {t.label}
          </button>
        ))}
      </div>
      {err && <div className="empty-note">依据面板加载失败：{err}</div>}
      {!err && !detail && <div className="empty-note">加载依据…</div>}
      {detail && tab === 'sources' && (
        <div className="cockpit-panel-body">
          <div className="cockpit-panel-count">来源 {node?.state.sourceCount ?? detail.sources.items.length} 条</div>
          {detail.sources.items.length === 0 && <div className="empty-note">无来源——章节正文未挂依据切片</div>}
          {detail.sources.items.map((s: any) => (
            <div key={s.ref.id} className="cockpit-panel-row">
              <span className="cockpit-panel-kind">{s.ref.kind}</span>
              <span className="cockpit-panel-label">{s.label}</span>
              {s.confidence && <span className="cockpit-badge">置信度 {s.confidence}</span>}
              {s.redactedReason
                ? <span className="cockpit-badge">受限（{s.redactedReason}）</span>
                : s.verification && s.verification !== 'not_applicable' && <span className="cockpit-badge">{s.verification}</span>}
            </div>
          ))}
        </div>
      )}
      {detail && tab === 'history' && (
        <div className="cockpit-panel-body">
          <div className="cockpit-panel-count">已提交事件（最新在前）</div>
          {historyItems.length === 0 && <div className="empty-note">暂无历史</div>}
          {historyItems.map(h => <div key={h.seq} className="cockpit-panel-row">{historyLine(h)}</div>)}
          {historyMore && <button type="button" className="cockpit-tree-more" onClick={loadMoreHistory}>加载更早历史</button>}
        </div>
      )}
      {detail && tab === 'impacts' && (
        <div className="cockpit-panel-body">
          <div className="cockpit-panel-count">影响 {node?.state.impactCount ?? detail.impacts.items.length} 项（一跳）</div>
          {detail.impacts.items.length === 0 && <div className="empty-note">无一跳影响对象</div>}
          {detail.impacts.items.map((r: any, i: number) => (
            <div key={`${r.ref.kind}-${r.ref.id}-${i}`} className="cockpit-panel-row">
              <span className="cockpit-panel-kind">{r.direction === 'incoming' ? '←' : '→'}</span>
              <span className="cockpit-panel-label">{r.ref.kind}:{r.ref.id}</span>
              <span className="cockpit-badge">{r.edgeType}</span>
              <span className="cockpit-badge">{r.edgeState}</span>
            </div>
          ))}
        </div>
      )}
      {detail && tab === 'conflicts' && (
        <div className="cockpit-panel-body">
          <div className="cockpit-panel-count">冲突 {node?.state.conflictCount ?? 0} 项</div>
          {detail.conflicts.items.length === 0 && <div className="empty-note">无开放冲突</div>}
          {detail.conflicts.items.map(c => (
            <div key={c.id} className="cockpit-panel-row cockpit-panel-conflict">
              <span className="cockpit-badge">{c.state === 'open' ? '开放' : c.state}</span>
              <div className="cockpit-conflict-side">甲方：{c.left.visibility === 'full' ? c.left.claim : `受限（${c.left.redactedReason || '权限'}）`}</div>
              <div className="cockpit-conflict-side">乙方：{c.right.visibility === 'full' ? c.right.claim : `受限（${c.right.redactedReason || '权限'}）`}</div>
              <div className="cockpit-changetime">{new Date(c.detectedAt).toLocaleString('zh-CN')}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}