npm - @weibaohui/context-razor - Versions diffs - 0.1.0 → 0.2.0 - Mend

@weibaohui/context-razor 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -21,7 +21,7 @@
 dsh plugin --profile web add @weibaohui/context-razor -w
 ```
-装完重启 `dsh web` 即生效。入口：设置窗口 → 上下文剃刀。
+装完重启 `dsh web` 即生效。入口：打开会话 → 顶部「上下文剃刀」标签（Hermes Loop 右侧），自动锁定当前会话。
 ## 删除的实现方式

package/client/bundle.js CHANGED Viewed

@@ -11,12 +11,12 @@ window.__ModuleLoader__.load({
     /**
      * dsh-plugin-razor — Browser half.
      *
-     * Settings-section surface (same embedding as skills-management): pick a live
-     * session, see every model-visible context entry with its ≈token estimate,
-     * mark oversized ones in red over a threshold, multi-select and razor them
-     * away. All colors come from the ui-theme `--dsw-*` token layers; all copy
-     * comes from the locale registry (`zh`/`en`). No hardcoded colors, no ad-hoc
-     * copy. No class components — render errors land in globalThis.__rzErrors.
+     * Conversation-view tab surface: the model-visible context entries of the
+     * CURRENT session, each with a rainbow tier (≈token, log-scale buckets —
+     * warmer = heavier) doubling as filter buttons; select and razor away.
+     * All copy comes from the locale registry (`zh`/`en`); tier hues are data
+     * (hsl computed per bucket). No class components — render errors land in
+     * globalThis.__rzErrors.
      */
     let __React = null
@@ -58,32 +58,28 @@ window.__ModuleLoader__.load({
     const ZH = {
       title: '上下文剃刀',
-      hint: '逐条列出会话上下文（≈token 为 cl100k_base 估算，与技能市场同词表）。删除 = 从模型视野移除（append-only 日志保留痕迹，不可恢复），不经 LLM 总结。',
-      sessionLabel: '会话',
-      pickSession: '选择会话…',
+      pickSession: '在会话顶部标签打开以查看上下文',
       loading: '正在加载…',
       refresh: '刷新',
       busyTag: '运行中',
-      idleTag: '空闲',
-      thresholdLabel: '标红阈值',
-      thresholdUnit: 'token',
       sortLabel: '排序',
       sortOrder: '上下文顺序',
       sortTokens: 'token 高→低',
-      overOnly: '只看超阈值',
-      selectOver: '选中超阈值',
+      selectVisible: '选中可见',
+      selectVisibleHint: '选中当前显示的全部条目（配合色块筛选）',
       clearSelect: '清空选择',
       deleteSelected: '删除选中',
       selectedStats: '已选 {n} 条 / ≈{tokens} token',
       stats: '{nodes} 条 · 合计 ≈{tokens} token{mode}',
       modeHeuristic: '（启发式估算：词表未加载）',
       kindUser: '用户',
+      kindInjected: '注入',
       kindAssistant: '助手',
       kindTool: '工具',
       emptyContext: '该会话上下文为空',
       showMore: '显示更多（剩余 {n}）',
       detailTitle: '条目详情',
-      detailTokens: '≈{tokens} token · {chars} 字符',
+      detailChars: '{chars} 字符',
       detailUsage: '真实用量：输入 {input} / 输出 {output}{cache}',
       detailUsageCache: ' / 缓存读 {cache}',
       close: '关闭',
@@ -99,32 +95,28 @@ window.__ModuleLoader__.load({
     const EN = {
       title: 'Context Razor',
-      hint: 'Every model-visible context entry with a ≈token estimate (cl100k_base, same ranks as Skills Market). Delete removes entries from the model view (append-only log keeps traces, irreversible) — no LLM summarization involved.',
-      sessionLabel: 'Session',
-      pickSession: 'Pick a session…',
+      pickSession: 'Open a conversation tab to inspect its context',
       loading: 'Loading…',
       refresh: 'Refresh',
       busyTag: 'running',
-      idleTag: 'idle',
-      thresholdLabel: 'Red threshold',
-      thresholdUnit: 'tokens',
       sortLabel: 'Sort',
       sortOrder: 'Context order',
       sortTokens: 'tokens high→low',
-      overOnly: 'Over threshold only',
-      selectOver: 'Select over threshold',
+      selectVisible: 'Select shown',
+      selectVisibleHint: 'Select every currently shown entry (pairs with tier filters)',
       clearSelect: 'Clear selection',
       deleteSelected: 'Delete selected',
       selectedStats: '{n} selected / ≈{tokens} tokens',
       stats: '{nodes} entries · total ≈{tokens} tokens{mode}',
       modeHeuristic: ' (heuristic: ranks unavailable)',
       kindUser: 'User',
+      kindInjected: 'injected',
       kindAssistant: 'Assistant',
       kindTool: 'Tool',
       emptyContext: 'This session has no context entries',
       showMore: 'Show more ({n} left)',
       detailTitle: 'Entry detail',
-      detailTokens: '≈{tokens} tokens · {chars} chars',
+      detailChars: '{chars} chars',
       detailUsage: 'Actual usage: in {input} / out {output}{cache}',
       detailUsageCache: ' / cache-read {cache}',
       close: 'Close',
@@ -142,16 +134,9 @@ window.__ModuleLoader__.load({
     const API = '/context-razor/api'
     const PAGE_SIZE = 150
-    const DEFAULT_THRESHOLD = 500
-    const THRESHOLD_KEY = 'context-razor-threshold'
     const kindI18n = (key) => 'kind' + key[0].toUpperCase() + key.slice(1)
-    /** 行是否标红（仅 user/assistant/tool 有意义，阈值 <= 0 视为关闭）。 */
-    function overThreshold(entry, threshold) {
-      return threshold > 0 && typeof entry.tokens === 'number' && entry.tokens > threshold
-    }
     /** 排序：order = 投影原序；tokens = 降序（并列按 seq，缺 token 沉底）。 */
     function sortEntries(entries, sortBy) {
       if (sortBy !== 'tokens') return entries
@@ -166,6 +151,41 @@ window.__ModuleLoader__.load({
     const formatNum = (n) => Number.isFinite(n) ? n.toLocaleString('en-US') : '-'
+    /** 完整日期时间（短格式：2026/9/2 11:03；ts 兼容 epoch 毫秒与 ISO 串）。 */
+    function formatDateTime(ts) {
+      if (!ts) return ''
+      const t = typeof ts === 'number' ? ts : Date.parse(ts)
+      if (!Number.isFinite(t)) return ''
+      try { return new Date(t).toLocaleString([], { dateStyle: 'short', timeStyle: 'short' }) } catch { return new Date(t).toLocaleString() }
+    }
+    /** 行首 chip 的文案与提示：工具结果显示工具名，注入类 user 消息标「注入」。 */
+    function entryChip(entry, t) {
+      if (entry.kind === 'tool') {
+        return { kind: 'tool', label: entry.tool || t('kindTool'), title: entry.tool }
+      }
+      if (entry.kind === 'user' && entry.sourceKind && entry.sourceKind !== 'user') {
+        return { kind: 'user', label: t('kindInjected'), title: [entry.sourceKind, entry.sourceForm, entry.sourcePlugin].filter(Boolean).join(' · ') }
+      }
+      return { kind: entry.kind, label: t(kindI18n(entry.kind)) }
+    }
+    // ── 彩虹分级：颜色越暖 = 占用越多 ────────────────────────────────────────
+    // 固定对数档位（相邻约 ×2.5），跨会话语义稳定：绿→黄绿→黄→橙→红→品红。
+    // 档位是「这条消息吃掉多少典型上下文预算」的粗标尺，不随会话内最大值缩放。
+    const RAZOR_TIERS = [
+      { max: 100, hue: 120, label: '0-100' },
+      { max: 300, hue: 90, label: '100-300' },
+      { max: 800, hue: 60, label: '300-800' },
+      { max: 2000, hue: 32, label: '800-2k' },
+      { max: 5000, hue: 8, label: '2k-5k' },
+      { max: Infinity, hue: 320, label: '>5k' },
+    ]
+    function tierOf(entry) {
+      const tokens = typeof entry.tokens === 'number' ? entry.tokens : 0
+      return RAZOR_TIERS.findIndex(t => tokens <= t.max)
+    }
     async function getJson(url) {
       const r = await fetch(url)
       if (!r.ok) {
@@ -178,28 +198,47 @@ window.__ModuleLoader__.load({
     // ── Token-based stylesheet (light/dark adaptive by construction) ────────
     const STYLE = `<style>
-    .rz-page{position:relative;display:flex;flex-direction:column;gap:12px;color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family);font-size:var(--dsw-font-sm-14,14px)}
+    .rz-page,.rz-page *{box-sizing:border-box}
+    .rz-page{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 20px;min-width:0;color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family);font-size:var(--dsw-font-sm-14,14px)}
     .rz-hint{color:var(--dsw-alias-label-secondary);font-size:12.5px;line-height:1.5}
     .rz-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
     .rz-spacer{flex:1}
     .rz-label{color:var(--dsw-alias-label-secondary);font-size:12.5px;white-space:nowrap}
-    .rz-input{min-height:30px;padding:4px 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-specific-input-major,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-label-primary);font-size:13px;font-family:var(--dsw-font-family);outline:none}
-    .rz-input:focus{border-color:var(--dsw-alias-state-business-primary)}
     .rz-select{min-height:30px;padding:4px 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-specific-input-major,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-label-primary);font-size:13px;font-family:var(--dsw-font-family);outline:none}
     .rz-stats{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--dsw-alias-label-secondary);font-size:12.5px}
     .rz-badge{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font-size:11.5px;white-space:nowrap}
-    .rz-badge.over{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary);font-weight:600}
     .rz-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);font-size:11.5px;white-space:nowrap;flex:none}
     .rz-chip.user{color:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary)}
     .rz-chip.assistant{color:var(--dsw-alias-state-success-primary);border-color:var(--dsw-alias-state-success-primary)}
+    .rz-legend{display:inline-flex;gap:4px;align-items:center}
+    .rz-swatch{border:none;cursor:pointer;padding:2px 8px;border-radius:999px;font-size:10.5px;color:var(--dsw-alias-label-primary-inverted,#fff);white-space:nowrap;font-family:var(--dsw-font-family)}
+    .rz-legend.filtering .rz-swatch:not(.on){opacity:.4}
+    .rz-swatch.on{box-shadow:0 0 0 2px var(--dsw-alias-border-l3,rgba(128,128,128,.65))}
+    .rz-swatch.tier-0{background:hsl(120,55%,40%)}
+    .rz-swatch.tier-1{background:hsl(90,60%,38%)}
+    .rz-swatch.tier-2{background:hsl(60,70%,36%)}
+    .rz-swatch.tier-3{background:hsl(32,80%,45%)}
+    .rz-swatch.tier-4{background:hsl(8,75%,48%)}
+    .rz-swatch.tier-5{background:hsl(320,65%,50%)}
     .rz-list{display:flex;flex-direction:column;gap:6px}
     .rz-row{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:10px;border:1px solid var(--dsw-alias-border-l1);border-left:3px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);cursor:pointer;text-align:left;width:100%}
     .rz-row:hover{background:var(--dsw-alias-interactive-bg-hover)}
-    .rz-row.over{border-left-color:var(--dsw-alias-state-error-primary)}
     .rz-row.checked{border-color:var(--dsw-alias-state-business-primary)}
-    .rz-row-preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:13px}
-    .rz-row.over .rz-row-preview{color:var(--dsw-alias-label-primary)}
+    .rz-row-preview{flex:0 1 340px;min-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:13px;text-decoration:none}
+    .rz-row-preview:hover{text-decoration:underline;text-underline-offset:3px}
     .rz-row-meta{color:var(--dsw-alias-label-tertiary);font-size:11px;flex:none}
+    .rz-badge.tier-0{color:hsl(120,55%,40%);border-color:hsla(120,55%,40%,.45);background:hsla(120,55%,40%,.10)}
+    .rz-badge.tier-1{color:hsl(90,60%,38%);border-color:hsla(90,60%,38%,.45);background:hsla(90,60%,38%,.10)}
+    .rz-badge.tier-2{color:hsl(60,70%,36%);border-color:hsla(60,70%,36%,.45);background:hsla(60,70%,36%,.12)}
+    .rz-badge.tier-3{color:hsl(32,80%,45%);border-color:hsla(32,80%,45%,.5);background:hsla(32,80%,45%,.12)}
+    .rz-badge.tier-4{color:hsl(8,75%,48%);border-color:hsla(8,75%,48%,.5);background:hsla(8,75%,48%,.12);font-weight:600}
+    .rz-badge.tier-5{color:hsl(320,65%,50%);border-color:hsla(320,65%,50%,.5);background:hsla(320,65%,50%,.12);font-weight:600}
+    .rz-row.tier-0{border-left-color:hsl(120,55%,40%)}
+    .rz-row.tier-1{border-left-color:hsl(90,60%,38%)}
+    .rz-row.tier-2{border-left-color:hsl(60,70%,36%)}
+    .rz-row.tier-3{border-left-color:hsl(32,80%,45%)}
+    .rz-row.tier-4{border-left-color:hsl(8,75%,48%)}
+    .rz-row.tier-5{border-left-color:hsl(320,65%,50%)}
     .rz-empty{border:1px dashed var(--dsw-alias-border-l2);border-radius:12px;padding:36px 20px;text-align:center;color:var(--dsw-alias-label-secondary)}
     .rz-loading{padding:36px;text-align:center;color:var(--dsw-alias-label-secondary)}
     .rz-footbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@@ -218,11 +257,11 @@ window.__ModuleLoader__.load({
     // ── Small building blocks ────────────────────────────────────────────────
-    const Chip = ({ kind, label }) => h('span', { className: 'rz-chip ' + kind }, label)
+    const Chip = ({ kind, label, title }) => h('span', { className: 'rz-chip ' + kind, title }, label)
-    const TokenBadge = ({ entry, threshold }) => {
-      const over = overThreshold(entry, threshold)
-      return h('span', { className: 'rz-badge' + (over ? ' over' : ''), title: over ? '≥ 阈值 ' + threshold : undefined },
+    const TokenBadge = ({ entry }) => {
+      const tier = tierOf(entry)
+      return h('span', { className: 'rz-badge tier-' + tier, title: RAZOR_TIERS[tier].label + ' token' },
         '≈' + formatNum(entry.tokens))
     }
@@ -238,15 +277,16 @@ window.__ModuleLoader__.load({
     }
     /** 单条全文弹窗（正文经 /entry 异步补全）。 */
-    function DetailModal({ detail, threshold, t, onClose }) {
+    function DetailModal({ detail, t, onClose }) {
       if (!detail) return null
       return h('div', { className: 'rz-dlg-backdrop', onClick: onClose },
         h('div', { className: 'rz-dlg', onClick: e => e.stopPropagation() },
           h('h3', null, t('detailTitle') + ' · ' + t('seqLabel', { seq: detail.seq })),
           h('div', { className: 'rz-stats', style: { marginBottom: 10 } },
-            h(Chip, { kind: detail.kind, label: t(kindI18n(detail.kind)) }),
-            h(TokenBadge, { entry: detail, threshold }),
-            h('span', { className: 'rz-label' }, t('detailTokens', { tokens: formatNum(detail.tokens), chars: formatNum(detail.chars) })),
+            h(Chip, { ...entryChip(detail, t) }),
+            h(TokenBadge, { entry: detail }),
+            h('span', { className: 'rz-label', title: 'seq ' + detail.seq }, formatDateTime(detail.time)),
+            h('span', { className: 'rz-label' }, t('detailChars', { chars: formatNum(detail.chars) })),
             detail.usage && h('span', { className: 'rz-label' }, t('detailUsage', {
               input: formatNum(detail.usage.input), output: formatNum(detail.usage.output),
               cache: detail.usage.cacheRead ? t('detailUsageCache', { cache: formatNum(detail.usage.cacheRead) }) : '' }))),
@@ -268,17 +308,14 @@ window.__ModuleLoader__.load({
     // ── Page ────────────────────────────────────────────────────────────────
-    function RazorPage({ t }) {
-      const [sessions, setSessions] = useState(null)
+    function RazorPage({ t, fixedSessionId }) {
+      useEffect(ensureStyles, [])
       const [sessionId, setSessionId] = useState('')
       const [context, setContext] = useState(null)
       const [ctxLoading, setCtxLoading] = useState(false)
       const [error, setError] = useState(null)
-      const [threshold, setThreshold] = useState(() => {
-        try { const v = Number(localStorage.getItem(THRESHOLD_KEY)); return Number.isFinite(v) && v > 0 ? v : DEFAULT_THRESHOLD } catch { return DEFAULT_THRESHOLD }
-      })
+      const [tierFilter, setTierFilter] = useState(() => new Set())
       const [sortBy, setSortBy] = useState('order')
-      const [overOnly, setOverOnly] = useState(false)
       const [selected, setSelected] = useState(() => new Set())
       const [detail, setDetail] = useState(null)
       const [confirming, setConfirming] = useState(false)
@@ -288,8 +325,10 @@ window.__ModuleLoader__.load({
       const showToast = (text) => { setToast(text); setTimeout(() => setToast(null), 3000) }
-      const loadSessions = () => getJson(API + '/sessions').then(d => setSessions(d.sessions || [])).catch(e => setError(e.message))
-      useEffect(() => { loadSessions() }, [])
+      // 会话视图挂载：只管当前会话（fixedSessionId 来自 slot props）
+      useEffect(() => {
+        if (fixedSessionId) { sessionRef.current = fixedSessionId; setSessionId(fixedSessionId) }
+      }, [fixedSessionId])
       const loadContext = (id) => {
         if (!id) { setContext(null); return }
@@ -303,25 +342,16 @@ window.__ModuleLoader__.load({
       useEffect(() => { if (sessionId) loadContext(sessionId) }, [sessionId])
       const refreshAll = () => {
-        loadSessions()
         if (sessionRef.current) loadContext(sessionRef.current)
       }
-      const pickSession = (id) => { sessionRef.current = id; setSessionId(id) }
-      const changeThreshold = (v) => {
-        const n = Number(v)
-        setThreshold(Number.isFinite(n) && n > 0 ? n : 0)
-        try { localStorage.setItem(THRESHOLD_KEY, String(n)) } catch {}
-      }
       const visible = useMemo(() => {
         if (!context) return []
         let rows = context.entries
-        if (overOnly && threshold > 0) rows = rows.filter(e => overThreshold(e, threshold))
+        if (tierFilter.size > 0) rows = rows.filter(e => tierFilter.has(tierOf(e)))
         return sortEntries(rows, sortBy)
-      }, [context, overOnly, threshold, sortBy])
+      }, [context, tierFilter, sortBy])
-      const overList = useMemo(() => (context ? context.entries.filter(e => overThreshold(e, threshold)) : []), [context, threshold])
       const selectedTokens = useMemo(() => {
         if (!context) return 0
         const bySeq = new Map(context.entries.map(e => [e.seq, e]))
@@ -336,12 +366,18 @@ window.__ModuleLoader__.load({
         else next.add(seq)
         return next
       })
-      const selectOver = () => setSelected(new Set(overList.map(e => e.seq)))
+      const toggleTier = (i) => setTierFilter(prev => {
+        const next = new Set(prev)
+        if (next.has(i)) next.delete(i)
+        else next.add(i)
+        return next
+      })
+      const selectVisible = () => setSelected(new Set(visible.map(e => e.seq)))
       const openDetail = (entry) => {
         setDetail(entry)
         getJson(`${API}/entry?session=${encodeURIComponent(sessionId)}&seq=${entry.seq}`)
-          .then(d => setDetail(cur => (cur && cur.seq === entry.seq) ? { ...cur, text: d.text, tokens: d.tokens } : cur))
+          .then(d => setDetail(cur => (cur && cur.seq === entry.seq) ? { ...cur, text: d.text, tokens: d.tokens, tool: d.tool, sourceKind: d.sourceKind, sourceForm: d.sourceForm, sourcePlugin: d.sourcePlugin } : cur))
           .catch(() => {})
       }
@@ -365,60 +401,47 @@ window.__ModuleLoader__.load({
       const canDelete = selected.size > 0 && !busy && !deleting
       return h('div', { className: 'rz-page' },
-        h('div', { className: 'rz-hint' }, t('hint')),
-        h('div', { className: 'rz-toolbar' },
-          h('span', { className: 'rz-label' }, t('sessionLabel')),
-          h('select', { className: 'rz-select', value: sessionId, onChange: e => pickSession(e.target.value), style: { maxWidth: 380 } },
-            h('option', { value: '' }, t('pickSession')),
-            (sessions || []).map(s => h('option', { key: s.id, value: s.id },
-              (s.cwd ? s.cwd.split('/').pop() + ' · ' : '') + s.id.slice(0, 8) + ' · ' + s.nodes))),
-          h('button', { className: 'rz-btn', onClick: refreshAll, title: t('refresh') }, t('refresh')),
-          context && h('span', { className: 'rz-badge' }, context.busy ? t('busyTag') : t('idleTag'))),
         error && h('div', { className: 'rz-hint', style: { color: 'var(--dsw-alias-state-error-primary)' } }, t('operationFailed') + ': ' + error),
-        !sessionId && (sessions === null
-          ? h('div', { className: 'rz-loading' }, t('loading'))
-          : h('div', { className: 'rz-empty' }, t('pickSession'))),
+        !sessionId && h('div', { className: 'rz-empty' }, t('pickSession')),
         sessionId && ctxLoading && h('div', { className: 'rz-loading' }, t('loading')),
         sessionId && !ctxLoading && context && [
-          h('div', { key: 'stats', className: 'rz-stats' },
+          h('div', { key: 'bar', className: 'rz-stats' },
             h('span', null, t('stats', { nodes: context.nodes, tokens: formatNum(context.totalTokens), mode: context.encoder === 'heuristic' ? t('modeHeuristic') : '' })),
+            h('span', { className: 'rz-legend' + (tierFilter.size > 0 ? ' filtering' : ''), title: t('legendTitle') },
+              RAZOR_TIERS.map((tr, i) => h('button', { key: i, className: 'rz-swatch tier-' + i + (tierFilter.has(i) ? ' on' : ''), title: tr.label + ' token', onClick: () => toggleTier(i) }, tr.label))),
             h('span', { className: 'rz-spacer' }),
-            h('label', { className: 'rz-label', style: { display: 'inline-flex', gap: 6, alignItems: 'center' } },
-              t('thresholdLabel'),
-              h('input', { className: 'rz-input', type: 'number', min: 0, step: 50, value: threshold, onChange: e => changeThreshold(e.target.value), style: { width: 90 } }),
-              t('thresholdUnit')),
+            busy && h('span', { className: 'rz-badge' }, t('busyTag')),
+            h('button', { className: 'rz-btn', onClick: selectVisible, disabled: visible.length === 0 || busy, title: t('selectVisibleHint') },
+              t('selectVisible') + (visible.length ? ` (${visible.length})` : '')),
             h('select', { className: 'rz-select', value: sortBy, onChange: e => setSortBy(e.target.value), title: t('sortLabel'), 'aria-label': t('sortLabel') },
               h('option', { value: 'order' }, t('sortOrder')),
               h('option', { value: 'tokens' }, t('sortTokens'))),
-            h('label', { className: 'rz-label', style: { display: 'inline-flex', gap: 6, alignItems: 'center' } },
-              h('input', { type: 'checkbox', checked: overOnly, onChange: e => setOverOnly(e.target.checked) }), t('overOnly'))),
-          h('div', { key: 'sel', className: 'rz-stats' },
-            h('span', null, selected.size > 0 ? t('selectedStats', { n: selected.size, tokens: formatNum(selectedTokens) }) : ' '),
+            h('button', { className: 'rz-btn', onClick: refreshAll, title: t('refresh') }, t('refresh'))),
+          selected.size > 0 && h('div', { key: 'sel', className: 'rz-stats' },
+            h('span', null, t('selectedStats', { n: selected.size, tokens: formatNum(selectedTokens) })),
             h('span', { className: 'rz-spacer' }),
             h('div', { className: 'rz-footbtns' },
-              h('button', { className: 'rz-btn', onClick: selectOver, disabled: overList.length === 0 || busy }, t('selectOver') + (overList.length ? ` (${overList.length})` : '')),
-              h('button', { className: 'rz-btn', onClick: () => setSelected(new Set()), disabled: selected.size === 0 }, t('clearSelect')),
+              h('button', { className: 'rz-btn', onClick: () => setSelected(new Set()) }, t('clearSelect')),
               h('button', { className: 'rz-btn rz-btn-danger', disabled: !canDelete,
                 title: busy ? t('deleteBusyHint') : undefined,
                 onClick: () => setConfirming(true) },
-                t('deleteSelected') + (selected.size ? ` (${selected.size})` : '')))),
+                t('deleteSelected') + ` (${selected.size})`))),
           visible.length === 0
-            ? h('div', { key: 'empty', className: 'rz-empty' }, overOnly ? t('overOnly') + ' · ' + t('emptyContext') : t('emptyContext'))
+            ? h('div', { key: 'empty', className: 'rz-empty' }, t('emptyContext'))
             : h('div', { key: 'list', className: 'rz-list' },
                 h(PagedList, { items: visible, t, render: entry => {
-                  const over = overThreshold(entry, threshold)
-                  return h('div', { key: entry.seq, className: 'rz-row' + (over ? ' over' : '') + (selected.has(entry.seq) ? ' checked' : ''),
+                  const tier = tierOf(entry)
+                  return h('div', { key: entry.seq, className: 'rz-row tier-' + tier + (selected.has(entry.seq) ? ' checked' : ''),
                       role: 'button', tabIndex: 0, onClick: () => toggleRow(entry.seq),
                       onKeyDown: e => e.key === 'Enter' && toggleRow(entry.seq) },
                     h('input', { type: 'checkbox', checked: selected.has(entry.seq), onClick: e => e.stopPropagation(), onChange: () => toggleRow(entry.seq) }),
-                    h(Chip, { kind: entry.kind, label: t(kindI18n(entry.kind)) }),
-                    h('span', { className: 'rz-row-preview', title: entry.preview }, entry.preview || ' '),
-                    h(TokenBadge, { entry, threshold }),
-                    h('button', { className: 'rz-btn', style: { minHeight: 24, padding: '2px 8px' },
-                        onClick: e => { e.stopPropagation(); openDetail(entry) } }, '⋯'),
-                    h('span', { className: 'rz-row-meta' }, 'seq ' + entry.seq))
+                    h(TokenBadge, { entry }),
+                    h(Chip, { ...entryChip(entry, t) }),
+                    h('span', { className: 'rz-row-preview', title: entry.preview,
+                        onClick: e => { e.stopPropagation(); openDetail(entry) } }, entry.preview || ' '),
+                    h('span', { className: 'rz-row-meta', title: 'seq ' + entry.seq }, formatDateTime(entry.time)))
                 } })),
-          detail && h(DetailModal, { detail, threshold, t, onClose: () => setDetail(null) }),
+          detail && h(DetailModal, { detail, t, onClose: () => setDetail(null) }),
           confirming && h(ConfirmDialog, { n: selected.size, tokens: formatNum(selectedTokens), deleting, t,
             onCancel: () => setConfirming(false), onOk: doDelete }),
         ],
@@ -432,7 +455,7 @@ window.__ModuleLoader__.load({
     module.exports = {
       name: CLIENT_NAME,
       inject: ['slots', 'locale'],
-      __internals: { NS, ZH, EN, overThreshold, sortEntries },
+      __internals: { NS, ZH, EN, sortEntries, tierOf, RAZOR_TIERS, formatDateTime, entryChip },
       __boot(container, opts = {}) {
         ensureStyles()
         const t = opts.t || ((key, vars) => {
@@ -462,21 +485,20 @@ window.__ModuleLoader__.load({
             }
           }
         } catch (e) { try { console.error('[context-razor] locale init:', e) } catch {} }
+        // 会话视图标签：order 30 排在 Chat(0)/Trajectory(10)/Context(20)/Hermes Loop(25) 之后
         ctx.effect(() => {
           try {
-            ctx.slots.inject('settings.section', () => ctx.slots.register({
-              name: 'settings.section',
+            ctx.slots.inject('conversation.view', () => ctx.slots.register({
+              name: 'conversation.view',
               id: CLIENT_NAME,
-              order: 91,
+              order: 30,
               locale: NS,
               label: () => t('title'),
-              inject: () => ({}),
-            }, function RazorSectionSlot() {
-              useEffect(ensureStyles, [])
-              return h(RazorPage, { t })
+            }, function RazorViewSlot(props) {
+              return h(RazorPage, { t, fixedSessionId: props && props.sessionId })
             }))
-          } catch (e) { (globalThis.__rzErrors = globalThis.__rzErrors || []).push('settings:' + (e && e.message)); throw e }
-        }, 'context-razor: settings section')
+          } catch (e) { (globalThis.__rzErrors = globalThis.__rzErrors || []).push('conversation.view:' + (e && e.message)); throw e }
+        }, 'context-razor: conversation view tab')
       },
     }

package/client/index.js CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * dsh-plugin-razor — Browser half.
  *
- * Settings-section surface (same embedding as skills-management): pick a live
- * session, see every model-visible context entry with its ≈token estimate,
- * mark oversized ones in red over a threshold, multi-select and razor them
- * away. All colors come from the ui-theme `--dsw-*` token layers; all copy
- * comes from the locale registry (`zh`/`en`). No hardcoded colors, no ad-hoc
- * copy. No class components — render errors land in globalThis.__rzErrors.
+ * Conversation-view tab surface: the model-visible context entries of the
+ * CURRENT session, each with a rainbow tier (≈token, log-scale buckets —
+ * warmer = heavier) doubling as filter buttons; select and razor away.
+ * All copy comes from the locale registry (`zh`/`en`); tier hues are data
+ * (hsl computed per bucket). No class components — render errors land in
+ * globalThis.__rzErrors.
  */
 let __React = null
@@ -48,32 +48,28 @@ const NS = 'contextRazor'
 const ZH = {
   title: '上下文剃刀',
-  hint: '逐条列出会话上下文（≈token 为 cl100k_base 估算，与技能市场同词表）。删除 = 从模型视野移除（append-only 日志保留痕迹，不可恢复），不经 LLM 总结。',
-  sessionLabel: '会话',
-  pickSession: '选择会话…',
+  pickSession: '在会话顶部标签打开以查看上下文',
   loading: '正在加载…',
   refresh: '刷新',
   busyTag: '运行中',
-  idleTag: '空闲',
-  thresholdLabel: '标红阈值',
-  thresholdUnit: 'token',
   sortLabel: '排序',
   sortOrder: '上下文顺序',
   sortTokens: 'token 高→低',
-  overOnly: '只看超阈值',
-  selectOver: '选中超阈值',
+  selectVisible: '选中可见',
+  selectVisibleHint: '选中当前显示的全部条目（配合色块筛选）',
   clearSelect: '清空选择',
   deleteSelected: '删除选中',
   selectedStats: '已选 {n} 条 / ≈{tokens} token',
   stats: '{nodes} 条 · 合计 ≈{tokens} token{mode}',
   modeHeuristic: '（启发式估算：词表未加载）',
   kindUser: '用户',
+  kindInjected: '注入',
   kindAssistant: '助手',
   kindTool: '工具',
   emptyContext: '该会话上下文为空',
   showMore: '显示更多（剩余 {n}）',
   detailTitle: '条目详情',
-  detailTokens: '≈{tokens} token · {chars} 字符',
+  detailChars: '{chars} 字符',
   detailUsage: '真实用量：输入 {input} / 输出 {output}{cache}',
   detailUsageCache: ' / 缓存读 {cache}',
   close: '关闭',
@@ -89,32 +85,28 @@ const ZH = {
 const EN = {
   title: 'Context Razor',
-  hint: 'Every model-visible context entry with a ≈token estimate (cl100k_base, same ranks as Skills Market). Delete removes entries from the model view (append-only log keeps traces, irreversible) — no LLM summarization involved.',
-  sessionLabel: 'Session',
-  pickSession: 'Pick a session…',
+  pickSession: 'Open a conversation tab to inspect its context',
   loading: 'Loading…',
   refresh: 'Refresh',
   busyTag: 'running',
-  idleTag: 'idle',
-  thresholdLabel: 'Red threshold',
-  thresholdUnit: 'tokens',
   sortLabel: 'Sort',
   sortOrder: 'Context order',
   sortTokens: 'tokens high→low',
-  overOnly: 'Over threshold only',
-  selectOver: 'Select over threshold',
+  selectVisible: 'Select shown',
+  selectVisibleHint: 'Select every currently shown entry (pairs with tier filters)',
   clearSelect: 'Clear selection',
   deleteSelected: 'Delete selected',
   selectedStats: '{n} selected / ≈{tokens} tokens',
   stats: '{nodes} entries · total ≈{tokens} tokens{mode}',
   modeHeuristic: ' (heuristic: ranks unavailable)',
   kindUser: 'User',
+  kindInjected: 'injected',
   kindAssistant: 'Assistant',
   kindTool: 'Tool',
   emptyContext: 'This session has no context entries',
   showMore: 'Show more ({n} left)',
   detailTitle: 'Entry detail',
-  detailTokens: '≈{tokens} tokens · {chars} chars',
+  detailChars: '{chars} chars',
   detailUsage: 'Actual usage: in {input} / out {output}{cache}',
   detailUsageCache: ' / cache-read {cache}',
   close: 'Close',
@@ -132,16 +124,9 @@ const EN = {
 const API = '/context-razor/api'
 const PAGE_SIZE = 150
-const DEFAULT_THRESHOLD = 500
-const THRESHOLD_KEY = 'context-razor-threshold'
 const kindI18n = (key) => 'kind' + key[0].toUpperCase() + key.slice(1)
-/** 行是否标红（仅 user/assistant/tool 有意义，阈值 <= 0 视为关闭）。 */
-function overThreshold(entry, threshold) {
-  return threshold > 0 && typeof entry.tokens === 'number' && entry.tokens > threshold
-}
 /** 排序：order = 投影原序；tokens = 降序（并列按 seq，缺 token 沉底）。 */
 function sortEntries(entries, sortBy) {
   if (sortBy !== 'tokens') return entries
@@ -156,6 +141,41 @@ function sortEntries(entries, sortBy) {
 const formatNum = (n) => Number.isFinite(n) ? n.toLocaleString('en-US') : '-'
+/** 完整日期时间（短格式：2026/9/2 11:03；ts 兼容 epoch 毫秒与 ISO 串）。 */
+function formatDateTime(ts) {
+  if (!ts) return ''
+  const t = typeof ts === 'number' ? ts : Date.parse(ts)
+  if (!Number.isFinite(t)) return ''
+  try { return new Date(t).toLocaleString([], { dateStyle: 'short', timeStyle: 'short' }) } catch { return new Date(t).toLocaleString() }
+}
+/** 行首 chip 的文案与提示：工具结果显示工具名，注入类 user 消息标「注入」。 */
+function entryChip(entry, t) {
+  if (entry.kind === 'tool') {
+    return { kind: 'tool', label: entry.tool || t('kindTool'), title: entry.tool }
+  }
+  if (entry.kind === 'user' && entry.sourceKind && entry.sourceKind !== 'user') {
+    return { kind: 'user', label: t('kindInjected'), title: [entry.sourceKind, entry.sourceForm, entry.sourcePlugin].filter(Boolean).join(' · ') }
+  }
+  return { kind: entry.kind, label: t(kindI18n(entry.kind)) }
+}
+// ── 彩虹分级：颜色越暖 = 占用越多 ────────────────────────────────────────
+// 固定对数档位（相邻约 ×2.5），跨会话语义稳定：绿→黄绿→黄→橙→红→品红。
+// 档位是「这条消息吃掉多少典型上下文预算」的粗标尺，不随会话内最大值缩放。
+const RAZOR_TIERS = [
+  { max: 100, hue: 120, label: '0-100' },
+  { max: 300, hue: 90, label: '100-300' },
+  { max: 800, hue: 60, label: '300-800' },
+  { max: 2000, hue: 32, label: '800-2k' },
+  { max: 5000, hue: 8, label: '2k-5k' },
+  { max: Infinity, hue: 320, label: '>5k' },
+]
+function tierOf(entry) {
+  const tokens = typeof entry.tokens === 'number' ? entry.tokens : 0
+  return RAZOR_TIERS.findIndex(t => tokens <= t.max)
+}
 async function getJson(url) {
   const r = await fetch(url)
   if (!r.ok) {
@@ -168,28 +188,47 @@ async function getJson(url) {
 // ── Token-based stylesheet (light/dark adaptive by construction) ────────
 const STYLE = `<style>
-.rz-page{position:relative;display:flex;flex-direction:column;gap:12px;color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family);font-size:var(--dsw-font-sm-14,14px)}
+.rz-page,.rz-page *{box-sizing:border-box}
+.rz-page{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 20px;min-width:0;color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family);font-size:var(--dsw-font-sm-14,14px)}
 .rz-hint{color:var(--dsw-alias-label-secondary);font-size:12.5px;line-height:1.5}
 .rz-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
 .rz-spacer{flex:1}
 .rz-label{color:var(--dsw-alias-label-secondary);font-size:12.5px;white-space:nowrap}
-.rz-input{min-height:30px;padding:4px 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-specific-input-major,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-label-primary);font-size:13px;font-family:var(--dsw-font-family);outline:none}
-.rz-input:focus{border-color:var(--dsw-alias-state-business-primary)}
 .rz-select{min-height:30px;padding:4px 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-specific-input-major,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-label-primary);font-size:13px;font-family:var(--dsw-font-family);outline:none}
 .rz-stats{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--dsw-alias-label-secondary);font-size:12.5px}
 .rz-badge{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font-size:11.5px;white-space:nowrap}
-.rz-badge.over{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary);font-weight:600}
 .rz-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);font-size:11.5px;white-space:nowrap;flex:none}
 .rz-chip.user{color:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary)}
 .rz-chip.assistant{color:var(--dsw-alias-state-success-primary);border-color:var(--dsw-alias-state-success-primary)}
+.rz-legend{display:inline-flex;gap:4px;align-items:center}
+.rz-swatch{border:none;cursor:pointer;padding:2px 8px;border-radius:999px;font-size:10.5px;color:var(--dsw-alias-label-primary-inverted,#fff);white-space:nowrap;font-family:var(--dsw-font-family)}
+.rz-legend.filtering .rz-swatch:not(.on){opacity:.4}
+.rz-swatch.on{box-shadow:0 0 0 2px var(--dsw-alias-border-l3,rgba(128,128,128,.65))}
+.rz-swatch.tier-0{background:hsl(120,55%,40%)}
+.rz-swatch.tier-1{background:hsl(90,60%,38%)}
+.rz-swatch.tier-2{background:hsl(60,70%,36%)}
+.rz-swatch.tier-3{background:hsl(32,80%,45%)}
+.rz-swatch.tier-4{background:hsl(8,75%,48%)}
+.rz-swatch.tier-5{background:hsl(320,65%,50%)}
 .rz-list{display:flex;flex-direction:column;gap:6px}
 .rz-row{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:10px;border:1px solid var(--dsw-alias-border-l1);border-left:3px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);cursor:pointer;text-align:left;width:100%}
 .rz-row:hover{background:var(--dsw-alias-interactive-bg-hover)}
-.rz-row.over{border-left-color:var(--dsw-alias-state-error-primary)}
 .rz-row.checked{border-color:var(--dsw-alias-state-business-primary)}
-.rz-row-preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:13px}
-.rz-row.over .rz-row-preview{color:var(--dsw-alias-label-primary)}
+.rz-row-preview{flex:0 1 340px;min-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:13px;text-decoration:none}
+.rz-row-preview:hover{text-decoration:underline;text-underline-offset:3px}
 .rz-row-meta{color:var(--dsw-alias-label-tertiary);font-size:11px;flex:none}
+.rz-badge.tier-0{color:hsl(120,55%,40%);border-color:hsla(120,55%,40%,.45);background:hsla(120,55%,40%,.10)}
+.rz-badge.tier-1{color:hsl(90,60%,38%);border-color:hsla(90,60%,38%,.45);background:hsla(90,60%,38%,.10)}
+.rz-badge.tier-2{color:hsl(60,70%,36%);border-color:hsla(60,70%,36%,.45);background:hsla(60,70%,36%,.12)}
+.rz-badge.tier-3{color:hsl(32,80%,45%);border-color:hsla(32,80%,45%,.5);background:hsla(32,80%,45%,.12)}
+.rz-badge.tier-4{color:hsl(8,75%,48%);border-color:hsla(8,75%,48%,.5);background:hsla(8,75%,48%,.12);font-weight:600}
+.rz-badge.tier-5{color:hsl(320,65%,50%);border-color:hsla(320,65%,50%,.5);background:hsla(320,65%,50%,.12);font-weight:600}
+.rz-row.tier-0{border-left-color:hsl(120,55%,40%)}
+.rz-row.tier-1{border-left-color:hsl(90,60%,38%)}
+.rz-row.tier-2{border-left-color:hsl(60,70%,36%)}
+.rz-row.tier-3{border-left-color:hsl(32,80%,45%)}
+.rz-row.tier-4{border-left-color:hsl(8,75%,48%)}
+.rz-row.tier-5{border-left-color:hsl(320,65%,50%)}
 .rz-empty{border:1px dashed var(--dsw-alias-border-l2);border-radius:12px;padding:36px 20px;text-align:center;color:var(--dsw-alias-label-secondary)}
 .rz-loading{padding:36px;text-align:center;color:var(--dsw-alias-label-secondary)}
 .rz-footbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@@ -208,11 +247,11 @@ const STYLE = `<style>
 // ── Small building blocks ────────────────────────────────────────────────
-const Chip = ({ kind, label }) => h('span', { className: 'rz-chip ' + kind }, label)
+const Chip = ({ kind, label, title }) => h('span', { className: 'rz-chip ' + kind, title }, label)
-const TokenBadge = ({ entry, threshold }) => {
-  const over = overThreshold(entry, threshold)
-  return h('span', { className: 'rz-badge' + (over ? ' over' : ''), title: over ? '≥ 阈值 ' + threshold : undefined },
+const TokenBadge = ({ entry }) => {
+  const tier = tierOf(entry)
+  return h('span', { className: 'rz-badge tier-' + tier, title: RAZOR_TIERS[tier].label + ' token' },
     '≈' + formatNum(entry.tokens))
 }
@@ -228,15 +267,16 @@ function PagedList({ items, render, t }) {
 }
 /** 单条全文弹窗（正文经 /entry 异步补全）。 */
-function DetailModal({ detail, threshold, t, onClose }) {
+function DetailModal({ detail, t, onClose }) {
   if (!detail) return null
   return h('div', { className: 'rz-dlg-backdrop', onClick: onClose },
     h('div', { className: 'rz-dlg', onClick: e => e.stopPropagation() },
       h('h3', null, t('detailTitle') + ' · ' + t('seqLabel', { seq: detail.seq })),
       h('div', { className: 'rz-stats', style: { marginBottom: 10 } },
-        h(Chip, { kind: detail.kind, label: t(kindI18n(detail.kind)) }),
-        h(TokenBadge, { entry: detail, threshold }),
-        h('span', { className: 'rz-label' }, t('detailTokens', { tokens: formatNum(detail.tokens), chars: formatNum(detail.chars) })),
+        h(Chip, { ...entryChip(detail, t) }),
+        h(TokenBadge, { entry: detail }),
+        h('span', { className: 'rz-label', title: 'seq ' + detail.seq }, formatDateTime(detail.time)),
+        h('span', { className: 'rz-label' }, t('detailChars', { chars: formatNum(detail.chars) })),
         detail.usage && h('span', { className: 'rz-label' }, t('detailUsage', {
           input: formatNum(detail.usage.input), output: formatNum(detail.usage.output),
           cache: detail.usage.cacheRead ? t('detailUsageCache', { cache: formatNum(detail.usage.cacheRead) }) : '' }))),
@@ -258,17 +298,14 @@ function ConfirmDialog({ n, tokens, deleting, t, onCancel, onOk }) {
 // ── Page ────────────────────────────────────────────────────────────────
-function RazorPage({ t }) {
-  const [sessions, setSessions] = useState(null)
+function RazorPage({ t, fixedSessionId }) {
+  useEffect(ensureStyles, [])
   const [sessionId, setSessionId] = useState('')
   const [context, setContext] = useState(null)
   const [ctxLoading, setCtxLoading] = useState(false)
   const [error, setError] = useState(null)
-  const [threshold, setThreshold] = useState(() => {
-    try { const v = Number(localStorage.getItem(THRESHOLD_KEY)); return Number.isFinite(v) && v > 0 ? v : DEFAULT_THRESHOLD } catch { return DEFAULT_THRESHOLD }
-  })
+  const [tierFilter, setTierFilter] = useState(() => new Set())
   const [sortBy, setSortBy] = useState('order')
-  const [overOnly, setOverOnly] = useState(false)
   const [selected, setSelected] = useState(() => new Set())
   const [detail, setDetail] = useState(null)
   const [confirming, setConfirming] = useState(false)
@@ -278,8 +315,10 @@ function RazorPage({ t }) {
   const showToast = (text) => { setToast(text); setTimeout(() => setToast(null), 3000) }
-  const loadSessions = () => getJson(API + '/sessions').then(d => setSessions(d.sessions || [])).catch(e => setError(e.message))
-  useEffect(() => { loadSessions() }, [])
+  // 会话视图挂载：只管当前会话（fixedSessionId 来自 slot props）
+  useEffect(() => {
+    if (fixedSessionId) { sessionRef.current = fixedSessionId; setSessionId(fixedSessionId) }
+  }, [fixedSessionId])
   const loadContext = (id) => {
     if (!id) { setContext(null); return }
@@ -293,25 +332,16 @@ function RazorPage({ t }) {
   useEffect(() => { if (sessionId) loadContext(sessionId) }, [sessionId])
   const refreshAll = () => {
-    loadSessions()
     if (sessionRef.current) loadContext(sessionRef.current)
   }
-  const pickSession = (id) => { sessionRef.current = id; setSessionId(id) }
-  const changeThreshold = (v) => {
-    const n = Number(v)
-    setThreshold(Number.isFinite(n) && n > 0 ? n : 0)
-    try { localStorage.setItem(THRESHOLD_KEY, String(n)) } catch {}
-  }
   const visible = useMemo(() => {
     if (!context) return []
     let rows = context.entries
-    if (overOnly && threshold > 0) rows = rows.filter(e => overThreshold(e, threshold))
+    if (tierFilter.size > 0) rows = rows.filter(e => tierFilter.has(tierOf(e)))
     return sortEntries(rows, sortBy)
-  }, [context, overOnly, threshold, sortBy])
+  }, [context, tierFilter, sortBy])
-  const overList = useMemo(() => (context ? context.entries.filter(e => overThreshold(e, threshold)) : []), [context, threshold])
   const selectedTokens = useMemo(() => {
     if (!context) return 0
     const bySeq = new Map(context.entries.map(e => [e.seq, e]))
@@ -326,12 +356,18 @@ function RazorPage({ t }) {
     else next.add(seq)
     return next
   })
-  const selectOver = () => setSelected(new Set(overList.map(e => e.seq)))
+  const toggleTier = (i) => setTierFilter(prev => {
+    const next = new Set(prev)
+    if (next.has(i)) next.delete(i)
+    else next.add(i)
+    return next
+  })
+  const selectVisible = () => setSelected(new Set(visible.map(e => e.seq)))
   const openDetail = (entry) => {
     setDetail(entry)
     getJson(`${API}/entry?session=${encodeURIComponent(sessionId)}&seq=${entry.seq}`)
-      .then(d => setDetail(cur => (cur && cur.seq === entry.seq) ? { ...cur, text: d.text, tokens: d.tokens } : cur))
+      .then(d => setDetail(cur => (cur && cur.seq === entry.seq) ? { ...cur, text: d.text, tokens: d.tokens, tool: d.tool, sourceKind: d.sourceKind, sourceForm: d.sourceForm, sourcePlugin: d.sourcePlugin } : cur))
       .catch(() => {})
   }
@@ -355,60 +391,47 @@ function RazorPage({ t }) {
   const canDelete = selected.size > 0 && !busy && !deleting
   return h('div', { className: 'rz-page' },
-    h('div', { className: 'rz-hint' }, t('hint')),
-    h('div', { className: 'rz-toolbar' },
-      h('span', { className: 'rz-label' }, t('sessionLabel')),
-      h('select', { className: 'rz-select', value: sessionId, onChange: e => pickSession(e.target.value), style: { maxWidth: 380 } },
-        h('option', { value: '' }, t('pickSession')),
-        (sessions || []).map(s => h('option', { key: s.id, value: s.id },
-          (s.cwd ? s.cwd.split('/').pop() + ' · ' : '') + s.id.slice(0, 8) + ' · ' + s.nodes))),
-      h('button', { className: 'rz-btn', onClick: refreshAll, title: t('refresh') }, t('refresh')),
-      context && h('span', { className: 'rz-badge' }, context.busy ? t('busyTag') : t('idleTag'))),
     error && h('div', { className: 'rz-hint', style: { color: 'var(--dsw-alias-state-error-primary)' } }, t('operationFailed') + ': ' + error),
-    !sessionId && (sessions === null
-      ? h('div', { className: 'rz-loading' }, t('loading'))
-      : h('div', { className: 'rz-empty' }, t('pickSession'))),
+    !sessionId && h('div', { className: 'rz-empty' }, t('pickSession')),
     sessionId && ctxLoading && h('div', { className: 'rz-loading' }, t('loading')),
     sessionId && !ctxLoading && context && [
-      h('div', { key: 'stats', className: 'rz-stats' },
+      h('div', { key: 'bar', className: 'rz-stats' },
         h('span', null, t('stats', { nodes: context.nodes, tokens: formatNum(context.totalTokens), mode: context.encoder === 'heuristic' ? t('modeHeuristic') : '' })),
+        h('span', { className: 'rz-legend' + (tierFilter.size > 0 ? ' filtering' : ''), title: t('legendTitle') },
+          RAZOR_TIERS.map((tr, i) => h('button', { key: i, className: 'rz-swatch tier-' + i + (tierFilter.has(i) ? ' on' : ''), title: tr.label + ' token', onClick: () => toggleTier(i) }, tr.label))),
         h('span', { className: 'rz-spacer' }),
-        h('label', { className: 'rz-label', style: { display: 'inline-flex', gap: 6, alignItems: 'center' } },
-          t('thresholdLabel'),
-          h('input', { className: 'rz-input', type: 'number', min: 0, step: 50, value: threshold, onChange: e => changeThreshold(e.target.value), style: { width: 90 } }),
-          t('thresholdUnit')),
+        busy && h('span', { className: 'rz-badge' }, t('busyTag')),
+        h('button', { className: 'rz-btn', onClick: selectVisible, disabled: visible.length === 0 || busy, title: t('selectVisibleHint') },
+          t('selectVisible') + (visible.length ? ` (${visible.length})` : '')),
         h('select', { className: 'rz-select', value: sortBy, onChange: e => setSortBy(e.target.value), title: t('sortLabel'), 'aria-label': t('sortLabel') },
           h('option', { value: 'order' }, t('sortOrder')),
           h('option', { value: 'tokens' }, t('sortTokens'))),
-        h('label', { className: 'rz-label', style: { display: 'inline-flex', gap: 6, alignItems: 'center' } },
-          h('input', { type: 'checkbox', checked: overOnly, onChange: e => setOverOnly(e.target.checked) }), t('overOnly'))),
-      h('div', { key: 'sel', className: 'rz-stats' },
-        h('span', null, selected.size > 0 ? t('selectedStats', { n: selected.size, tokens: formatNum(selectedTokens) }) : ' '),
+        h('button', { className: 'rz-btn', onClick: refreshAll, title: t('refresh') }, t('refresh'))),
+      selected.size > 0 && h('div', { key: 'sel', className: 'rz-stats' },
+        h('span', null, t('selectedStats', { n: selected.size, tokens: formatNum(selectedTokens) })),
         h('span', { className: 'rz-spacer' }),
         h('div', { className: 'rz-footbtns' },
-          h('button', { className: 'rz-btn', onClick: selectOver, disabled: overList.length === 0 || busy }, t('selectOver') + (overList.length ? ` (${overList.length})` : '')),
-          h('button', { className: 'rz-btn', onClick: () => setSelected(new Set()), disabled: selected.size === 0 }, t('clearSelect')),
+          h('button', { className: 'rz-btn', onClick: () => setSelected(new Set()) }, t('clearSelect')),
           h('button', { className: 'rz-btn rz-btn-danger', disabled: !canDelete,
             title: busy ? t('deleteBusyHint') : undefined,
             onClick: () => setConfirming(true) },
-            t('deleteSelected') + (selected.size ? ` (${selected.size})` : '')))),
+            t('deleteSelected') + ` (${selected.size})`))),
       visible.length === 0
-        ? h('div', { key: 'empty', className: 'rz-empty' }, overOnly ? t('overOnly') + ' · ' + t('emptyContext') : t('emptyContext'))
+        ? h('div', { key: 'empty', className: 'rz-empty' }, t('emptyContext'))
         : h('div', { key: 'list', className: 'rz-list' },
             h(PagedList, { items: visible, t, render: entry => {
-              const over = overThreshold(entry, threshold)
-              return h('div', { key: entry.seq, className: 'rz-row' + (over ? ' over' : '') + (selected.has(entry.seq) ? ' checked' : ''),
+              const tier = tierOf(entry)
+              return h('div', { key: entry.seq, className: 'rz-row tier-' + tier + (selected.has(entry.seq) ? ' checked' : ''),
                   role: 'button', tabIndex: 0, onClick: () => toggleRow(entry.seq),
                   onKeyDown: e => e.key === 'Enter' && toggleRow(entry.seq) },
                 h('input', { type: 'checkbox', checked: selected.has(entry.seq), onClick: e => e.stopPropagation(), onChange: () => toggleRow(entry.seq) }),
-                h(Chip, { kind: entry.kind, label: t(kindI18n(entry.kind)) }),
-                h('span', { className: 'rz-row-preview', title: entry.preview }, entry.preview || ' '),
-                h(TokenBadge, { entry, threshold }),
-                h('button', { className: 'rz-btn', style: { minHeight: 24, padding: '2px 8px' },
-                    onClick: e => { e.stopPropagation(); openDetail(entry) } }, '⋯'),
-                h('span', { className: 'rz-row-meta' }, 'seq ' + entry.seq))
+                h(TokenBadge, { entry }),
+                h(Chip, { ...entryChip(entry, t) }),
+                h('span', { className: 'rz-row-preview', title: entry.preview,
+                    onClick: e => { e.stopPropagation(); openDetail(entry) } }, entry.preview || ' '),
+                h('span', { className: 'rz-row-meta', title: 'seq ' + entry.seq }, formatDateTime(entry.time)))
             } })),
-      detail && h(DetailModal, { detail, threshold, t, onClose: () => setDetail(null) }),
+      detail && h(DetailModal, { detail, t, onClose: () => setDetail(null) }),
       confirming && h(ConfirmDialog, { n: selected.size, tokens: formatNum(selectedTokens), deleting, t,
         onCancel: () => setConfirming(false), onOk: doDelete }),
     ],
@@ -422,7 +445,7 @@ const CLIENT_NAME = '@weibaohui/context-razor'
 module.exports = {
   name: CLIENT_NAME,
   inject: ['slots', 'locale'],
-  __internals: { NS, ZH, EN, overThreshold, sortEntries },
+  __internals: { NS, ZH, EN, sortEntries, tierOf, RAZOR_TIERS, formatDateTime, entryChip },
   __boot(container, opts = {}) {
     ensureStyles()
     const t = opts.t || ((key, vars) => {
@@ -452,20 +475,19 @@ module.exports = {
         }
       }
     } catch (e) { try { console.error('[context-razor] locale init:', e) } catch {} }
+    // 会话视图标签：order 30 排在 Chat(0)/Trajectory(10)/Context(20)/Hermes Loop(25) 之后
     ctx.effect(() => {
       try {
-        ctx.slots.inject('settings.section', () => ctx.slots.register({
-          name: 'settings.section',
+        ctx.slots.inject('conversation.view', () => ctx.slots.register({
+          name: 'conversation.view',
           id: CLIENT_NAME,
-          order: 91,
+          order: 30,
           locale: NS,
           label: () => t('title'),
-          inject: () => ({}),
-        }, function RazorSectionSlot() {
-          useEffect(ensureStyles, [])
-          return h(RazorPage, { t })
+        }, function RazorViewSlot(props) {
+          return h(RazorPage, { t, fixedSessionId: props && props.sessionId })
         }))
-      } catch (e) { (globalThis.__rzErrors = globalThis.__rzErrors || []).push('settings:' + (e && e.message)); throw e }
-    }, 'context-razor: settings section')
+      } catch (e) { (globalThis.__rzErrors = globalThis.__rzErrors || []).push('conversation.view:' + (e && e.message)); throw e }
+    }, 'context-razor: conversation view tab')
   },
 }

package/docs/demo.gif CHANGED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@weibaohui/context-razor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "dsh 插件 · 上下文剃刀：把当前会话上下文逐条列出（角色/预览/≈token，cl100k 估算），超阈值标红，勾选后精确裁剪——不经 LLM 总结，删了什么一目了然。",
   "license": "MIT",
   "keywords": [

package/src/index.js CHANGED Viewed

@@ -87,12 +87,19 @@ function sessionBusy(session) {
 }
 /**
- * 当前 surface 投影成条目列表：seq 有序（模型可见顺序）、逐条文本、
- * token 估算。被此前 compaction/prune 影子化的节点本就不在 surface.nodes
- * 里——列表即模型此刻真实可见的上下文。
+ * 当前 surface 投影成条目列表：seq 有序（模型可见顺序）、逐条文本、token 估算、
+ * 时间、工具名（tool/result 按 callId 关联日志里的 tool/call）与注入来源。
+ * 被此前 compaction/prune 影子化的节点本就不在 surface.nodes 里——列表即模型
+ * 此刻真实可见的上下文。
  */
 function projectContext(session) {
   const bySeq = new Map(session.events.map((event) => [event.seq, event]))
+  const toolNames = new Map()
+  for (const event of session.events) {
+    if (event.type === 'tool/call' && event.data && typeof event.data.callId === 'string') {
+      toolNames.set(event.data.callId, typeof event.data.name === 'string' ? event.data.name : undefined)
+    }
+  }
   const entries = []
   let totalTokens = 0
   let mode = 'cl100k'
@@ -103,11 +110,16 @@ function projectContext(session) {
     const { tokens, mode: m } = countTokens(text)
     mode = m
     const usage = event.type === 'assistant/message' ? event.data.usage : undefined
+    const source = event.type === 'user/message' && event.data.source && typeof event.data.source === 'object' ? event.data.source : undefined
     entries.push({
       seq,
       kind: entryKindOf(event.type),
       time: event.time,
       turn: typeof event.data.turn === 'number' ? event.data.turn : undefined,
+      tool: event.type === 'tool/result' ? toolNames.get(event.data.message && event.data.message.source && event.data.message.source.callId) : undefined,
+      sourceKind: source ? source.kind : undefined,
+      sourceForm: source ? source.form : undefined,
+      sourcePlugin: source ? source.plugin : undefined,
       chars: text.length,
       tokens,
       preview: text.length > 220 ? text.slice(0, 220) + '…' : text,
@@ -270,7 +282,21 @@ module.exports = {
             const event = session.events.find((candidate) => candidate.seq === seq)
             if (event === undefined) { fail(404, 'entry not found'); return }
             const text = entryText(event)
-            sendJson(200, { seq, kind: entryKindOf(event.type), time: event.time, tokens: countTokens(text).tokens, text })
+            const toolName = event.type === 'tool/result' && event.data.message
+              ? session.events.find((candidate) => candidate.type === 'tool/call' && candidate.data.callId === event.data.message.source.callId)
+              : undefined
+            const source = event.type === 'user/message' && event.data.source && typeof event.data.source === 'object' ? event.data.source : undefined
+            sendJson(200, {
+              seq,
+              kind: entryKindOf(event.type),
+              time: event.time,
+              tokens: countTokens(text).tokens,
+              text,
+              tool: toolName && typeof toolName.data.name === 'string' ? toolName.data.name : undefined,
+              sourceKind: source ? source.kind : undefined,
+              sourceForm: source ? source.form : undefined,
+              sourcePlugin: source ? source.plugin : undefined,
+            })
             return
           }