dsh-data-domain-knowledge 0.1.0-alpha.9 → 0.1.1-alpha.2

package/src/client/IntentTab.tsx

@@ -91,6 +91,24 @@ function intentTitle(record: IntentRecord): string {
 
 const SOURCE_LABEL: Record<IntentRecord['source'], string> = { model: '模型判断', fallback: '系统兜底' }
 
+function filterOptions(
+  records: IntentRecord[],
+  field: 'category' | 'act',
+  labels: Record<string, string>,
+  allLabel: string,
+): Array<{ value: string; label: string }> {
+  const values = new Set(records.flatMap(record => {
+    const value = record[field]
+    return value ? [value] : []
+  }))
+  const known = Object.keys(labels).filter(value => values.has(value))
+  const unknown = [...values].filter(value => !(value in labels)).sort()
+  return [
+    { value: '', label: allLabel },
+    ...[...known, ...unknown].map(value => ({ value, label: humanize(value, labels) ?? value })),
+  ]
+}
+
 function DiagnosticDetails({ record }: { record: IntentRecord }): ReactNode {
   return <details className={styles.intentDiagnostics}>
     <summary>查看诊断信息</summary>
@@ -109,33 +127,38 @@ function Interpretation({ record }: { record: IntentRecord }): ReactNode {
   return <Card className={styles.intentInterpretation}>
     <div className={styles.intentSectionHead}>
       <div>
-        <span className={styles.intentEyebrow}>最近一轮</span>
         <h3>Agent 是这样理解的</h3>
+        <p className={styles.intentSectionSubhead}>最新一条判断 · 按时间倒序</p>
       </div>
       <time dateTime={record.updatedAt}>{formatTime(record.updatedAt)}</time>
     </div>
 
-    <div className={styles.intentStep}>
-      <span className={styles.intentStepNumber}>1</span>
-      <div className={styles.intentStepBody}>
-        <span className={styles.intentStepLabel}>用户原话</span>
-        <p className={styles.intentUserInput}>{record.userInput.slice(0, 320) || '（无用户原文）'}</p>
-      </div>
+    <div className={styles.intentUserBlock}>
+      <span className={styles.intentStepLabel}>用户原话</span>
+      <p className={styles.intentUserInput}>{record.userInput.slice(0, 320) || '（无用户原文）'}</p>
     </div>
 
-    <div className={styles.intentStepArrow} aria-hidden="true">↓</div>
-
-    <div className={`${styles.intentStep} ${styles.intentStepResult}`}>
-      <span className={styles.intentStepNumber}>2</span>
-      <div className={styles.intentStepBody}>
+    <div className={styles.intentVerdict}>
+      <div className={styles.intentVerdictHead}>
         <span className={styles.intentStepLabel}>Agent 判断</span>
-        <h4 className={styles.intentResultTitle}>{intentTitle(record)}</h4>
-        <p className={styles.intentResultText}>{relationLabel(record.relation)}。这条判断{record.lowConfidence ? '的把握较低，建议复核。' : '用于记录本轮对话走向。'}</p>
-        <div className={styles.intentResultTags}>
-          <Badge tone={record.lowConfidence ? 'warning' : 'blue'}>{humanize(record.act, ACT_LABEL) ?? '未判定'}</Badge>
-          {record.category && <Badge tone="violet">{humanize(record.category, CATEGORY_LABEL)}</Badge>}
-          {record.lowConfidence && <span className={styles.intentLowConfidence}>需要复核</span>}
-        </div>
+        {record.lowConfidence && <span className={styles.intentLowConfidence}>需要复核</span>}
+      </div>
+      <h4 className={styles.intentResultTitle}>{intentTitle(record)}</h4>
+      <p className={styles.intentResultText}>{relationLabel(record.relation)}。这条判断{record.lowConfidence ? '的把握较低，建议复核。' : '用于记录本轮对话走向。'}</p>
+      <div className={styles.intentResultTags}>
+        <Badge tone={record.lowConfidence ? 'warning' : 'blue'}>{humanize(record.act, ACT_LABEL) ?? '未判定'}</Badge>
+        {record.category && <Badge tone="violet">{humanize(record.category, CATEGORY_LABEL)}</Badge>}
+      </div>
+    </div>
+
+    <div className={styles.intentMetaGrid}>
+      <div className={styles.intentMetaCell}>
+        <span>任务关系</span>
+        <strong>{relationLabel(record.relation)}</strong>
+      </div>
+      <div className={styles.intentMetaCell}>
+        <span>记录来源</span>
+        <strong>{SOURCE_LABEL[record.source]}</strong>
       </div>
     </div>
 
@@ -145,19 +168,24 @@ function Interpretation({ record }: { record: IntentRecord }): ReactNode {
 
 function HistoryItem({ record }: { record: IntentRecord }): ReactNode {
   return <li className={styles.intentHistoryItem}>
-    <div className={styles.intentHistoryMeta}>
+    <div className={styles.intentHistoryPrimary}>
+      <strong>{intentTitle(record)}</strong>
       <time dateTime={record.updatedAt}><Clock3 size={11} />{formatTime(record.updatedAt)}</time>
+    </div>
+    <p>{record.userInput.slice(0, 180) || '（无用户原文）'}</p>
+    <div className={styles.intentHistoryMeta}>
       <span>{relationLabel(record.relation)}</span>
+      <span>{SOURCE_LABEL[record.source]}</span>
       {record.lowConfidence && <span className={styles.intentHistoryWarning}>需复核</span>}
     </div>
-    <p>{record.userInput.slice(0, 180) || '（无用户原文）'}</p>
-    <strong>{intentTitle(record)}</strong>
   </li>
 }
 
 export function IntentTab({ visible }: { visible: boolean }): ReactNode {
   const [sessions, setSessions] = useState<SessionSummary[]>([])
   const [sessionKey, setSessionKey] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState('')
+  const [actFilter, setActFilter] = useState('')
   const [store, setStore] = useState<StoreView | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -186,6 +214,8 @@ export function IntentTab({ visible }: { visible: boolean }): ReactNode {
 
   const selectSession = async (key: string): Promise<void> => {
     setSessionKey(key)
+    setCategoryFilter('')
+    setActFilter('')
     setLoading(true)
     try {
       setStore((await getJson<{ store: StoreView }>(`/intent/store?session_key=${encodeURIComponent(key)}`)).store)
@@ -198,19 +228,25 @@ export function IntentTab({ visible }: { visible: boolean }): ReactNode {
   }
 
   const recent = store?.recent ?? []
-  const latest = recent[0]
-  const history = recent.slice(1)
+  const categoryOptions = useMemo(() => filterOptions(recent, 'category', CATEGORY_LABEL, '全部意图'), [recent])
+  const actOptions = useMemo(() => filterOptions(recent, 'act', ACT_LABEL, '全部动作'), [recent])
+  const filteredRecent = useMemo(() => recent.filter(record => (
+    (!categoryFilter || record.category === categoryFilter)
+    && (!actFilter || record.act === actFilter)
+  )), [actFilter, categoryFilter, recent])
+  const latest = filteredRecent[0]
+  const history = filteredRecent.slice(1)
+  const hasFilter = Boolean(categoryFilter || actFilter)
   const auditStats = useMemo(() => ({
-    lowConfidence: recent.filter(record => record.lowConfidence).length,
-    fallback: recent.filter(record => record.source === 'fallback').length,
-  }), [recent])
+    lowConfidence: filteredRecent.filter(record => record.lowConfidence).length,
+    fallback: filteredRecent.filter(record => record.source === 'fallback').length,
+  }), [filteredRecent])
 
   return <div className={styles.viewStack}>
     <div className={styles.intentTop}>
       <div>
-        <span className={styles.intentEyebrow}>SESSION INTERPRETATION</span>
-        <h2>这轮对话被理解成什么？</h2>
-        <p>先看用户原话，再看 Agent 的判断。这里只做记录，不参与召回或执行。</p>
+        <h2>意图记录</h2>
+        <p>先看意图结论，再核对用户原话和任务关系。这里只做审计，不参与召回或执行。</p>
       </div>
       <InfoHint
         className={styles.kbToolbarHint}
@@ -221,21 +257,56 @@ export function IntentTab({ visible }: { visible: boolean }): ReactNode {
     </div>
 
     <div className={styles.intentControls}>
-      <span className={styles.intentControlLabel}>查看会话</span>
-      <SelectMenu
-        value={sessionKey}
-        onValueChange={next => void selectSession(next)}
-        disabled={sessions.length === 0}
-        aria-label="选择意图记录会话"
-        placeholder={sessions.length === 0 ? '还没有会话记录' : '选择会话'}
-        options={sessions.map(item => ({ value: item.sessionKey, label: `${item.sessionKey.slice(0, 18)} · ${item.recordCount} 条 · ${formatTime(item.lastAt)}` }))}
-      />
-      <Button variant="ghost" size="icon" title="刷新" aria-label="刷新意图记录" onClick={() => void load(sessionKey)} disabled={loading}><RefreshCw size={14} /></Button>
+      <div className={styles.intentPrimaryFilter}>
+        <div className={styles.intentFilterHeading}>
+          <span className={styles.intentControlLabel}>意图</span>
+          <small>优先筛选</small>
+        </div>
+        <SelectMenu
+          value={categoryFilter}
+          onValueChange={setCategoryFilter}
+          disabled={recent.length === 0}
+          aria-label="按意图筛选"
+          options={categoryOptions}
+        />
+        <span className={styles.intentFilterCount}>{filteredRecent.length} 条</span>
+      </div>
+      <div className={styles.intentSecondaryFilters}>
+        <span className={styles.intentControlLabel}>动作</span>
+        <SelectMenu
+          value={actFilter}
+          onValueChange={setActFilter}
+          className="w-full min-w-0"
+          size="sm"
+          disabled={recent.length === 0}
+          aria-label="按动作筛选"
+          options={actOptions}
+        />
+        <span className={styles.intentControlLabel}>会话</span>
+        <SelectMenu
+          value={sessionKey}
+          onValueChange={next => void selectSession(next)}
+          className="w-full min-w-0"
+          size="sm"
+          disabled={sessions.length === 0}
+          aria-label="选择意图记录会话"
+          placeholder={sessions.length === 0 ? '还没有会话记录' : '选择会话'}
+          options={sessions.map(item => ({ value: item.sessionKey, label: `${item.sessionKey.slice(0, 18)} · ${item.recordCount} 条 · ${formatTime(item.lastAt)}` }))}
+        />
+        <Button variant="ghost" size="icon" title="刷新" aria-label="刷新意图记录" onClick={() => void load(sessionKey)} disabled={loading}><RefreshCw size={14} /></Button>
+      </div>
+      <div className={styles.intentFilterSummary} aria-live="polite">
+        <span>当前会话显示 {filteredRecent.length} / {recent.length} 条</span>
+        {categoryFilter && <Badge tone="blue">{humanize(categoryFilter, CATEGORY_LABEL) ?? categoryFilter}</Badge>}
+        {actFilter && <Badge tone="violet">{humanize(actFilter, ACT_LABEL) ?? actFilter}</Badge>}
+      </div>
     </div>
 
     {pageNotice !== null && <p className={styles.kbNotice} role="alert">
       <AlertCircle size={13} /><span>{pageNotice}</span>
-      <button type="button" className={styles.kbNoticeClose} aria-label="关闭提示" onClick={() => setPageNotice(null)}><X size={12} /></button>
+      {/* 这一枚原来是手写的 `<button>`，命中区只有 12px、图标用自己的字号档，焦点圈
+          也是另写的一条。现在用与面板里其余关闭动作同一枚共享控件。 */}
+      <Button className={styles.kbNoticeClose} variant="ghost" size="icon" aria-label="关闭提示" title="关闭提示" onClick={() => setPageNotice(null)}><X size={13} /></Button>
     </p>}
     {error && <p className={styles.kbNotice}><AlertCircle size={13} /><span>{error}</span></p>}
 
@@ -243,27 +314,27 @@ export function IntentTab({ visible }: { visible: boolean }): ReactNode {
       ? <Interpretation record={latest} />
       : <Card className={styles.intentEmptyCard}>
         <BrainCircuit size={18} />
-        <strong>还没有可展示的判断</strong>
-        <p>选择一个有记录的会话后，这里会显示用户原话和 Agent 判断。</p>
+        <strong>{hasFilter ? '当前筛选下没有判断' : '还没有可展示的判断'}</strong>
+        <p>{hasFilter ? '调整“意图”或“动作”筛选后再看。' : '选择一个有记录的会话后，这里会显示用户原话和 Agent 判断。'}</p>
       </Card>}
 
     <section className={styles.intentHistory}>
       <div className={styles.intentSectionHead}>
         <div>
-          <span className={styles.intentEyebrow}>EARLIER TURNS</span>
-          <h3>之前的判断</h3>
+          <h3>历史判断</h3>
+          <p className={styles.intentSectionSubhead}>当前会话中更早的记录</p>
         </div>
         <span className={styles.intentSectionCount}>{history.length} 条</span>
       </div>
       {history.length === 0
-        ? <p className={styles.intentEmpty}>{latest ? '这是当前会话的第一条判断。' : '暂无历史记录。'}</p>
+        ? <p className={styles.intentEmpty}>{hasFilter ? '当前筛选下没有更早的判断。' : latest ? '这是当前会话的第一条判断。' : '暂无历史记录。'}</p>
         : <ol className={styles.intentHistoryList}>
           {history.map(record => <HistoryItem key={record.id} record={record} />)}
         </ol>}
     </section>
 
     <div className={styles.intentFooter}>
-      <span>共 {recent.length} 条判断</span>
+      <span>共 {filteredRecent.length} 条判断{hasFilter ? `（当前会话 ${recent.length} 条）` : ''}</span>
       {auditStats.lowConfidence > 0 && <span>{auditStats.lowConfidence} 条需要复核</span>}
       {auditStats.fallback > 0 && <span>{auditStats.fallback} 条系统兜底</span>}
       {store?.expiresAt && <span>保留至 {formatTime(store.expiresAt)}</span>}