dsh-xray 0.7.1 → 0.8.0

package/lib/client.js

@@ -17,7 +17,15 @@ window.__ModuleLoader__.load({
 
     //#region styles (host design tokens; auto-claimed by client-modules)
     const css = [
-      '.xray-panel{max-width:920px;margin:0 auto;padding:16px 20px;font-size:13px;color:var(--dsw-alias-label-primary)}',
+      // The panel owns its scrolling: the tab fills the host view area
+      // (flex column, overflow on .xray-body) instead of growing inside the
+      // host scrollport. View switches then change only the inner scroll
+      // height — the page-level scroll position never jumps, however tall
+      // deps/cost render. .xray-stale dims outgoing content while the next
+      // payload is in flight.
+      '.xray-panel{flex:1;min-height:0;display:flex;flex-direction:column;max-width:920px;width:100%;margin:0 auto;padding:16px 20px;font-size:13px;color:var(--dsw-alias-label-primary)}',
+      '.xray-body{flex:1;min-height:0;overflow-y:auto}',
+      '.xray-stale{opacity:.45;transition:opacity .15s;pointer-events:none}',
       '.xray-sub{color:var(--dsw-alias-label-tertiary);margin:0 0 14px;font-size:12px}',
       '.xray-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}',
       '.xray-nav button{font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:4px 10px;cursor:pointer}',
@@ -26,14 +34,19 @@ window.__ModuleLoader__.load({
       // visible in both themes, unlike brand-primary which resolves to
       // near-white in dark mode (white-on-white active buttons).
       '.xray-nav button.active{color:var(--dsw-alias-state-business-primary);background:var(--dsw-alias-state-business-tertiary);border-color:var(--dsw-alias-state-business-primary);font-weight:600}',
-      // min-height pads the short views (summary is 4 rows, deps dozens) so
-      // switching between them moves the layout as little as possible;
-      // .xray-stale dims outgoing content while the next payload is in flight.
-      '.xray-body{min-height:320px}',
-      '.xray-stale{opacity:.45;transition:opacity .15s;pointer-events:none}',
       '.xray-table{border-collapse:collapse;width:100%;margin-top:6px}',
       '.xray-table th,.xray-table td{text-align:left;padding:4px 10px;border-bottom:1px solid var(--dsw-alias-border-l2);vertical-align:top}',
       '.xray-table th{color:var(--dsw-alias-label-tertiary);font-weight:normal}',
+      // entry inspection: clickable names + a centered modal with the raw text
+      '.xray-entry-link{font:inherit;color:var(--dsw-alias-state-business-primary);background:none;border:none;padding:0;cursor:pointer;text-align:left}',
+      '.xray-entry-link:hover{text-decoration:underline}',
+      '.xray-entry-overlay{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}',
+      '.xray-entry-modal{width:min(760px,90vw);max-height:80vh;display:flex;flex-direction:column;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:12px;padding:16px 20px}',
+      '.xray-entry-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}',
+      '.xray-entry-name{font-weight:600;word-break:break-all}',
+      '.xray-entry-stats{color:var(--dsw-alias-label-tertiary);font-size:12px}',
+      '.xray-entry-close{margin-left:auto;font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:2px 10px;cursor:pointer}',
+      '.xray-entry-text{flex:1;min-height:0;overflow:auto;margin:0;padding:12px;background:var(--dsw-alias-bg-layer-3);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}',
       '.xray-num{text-align:right}',
       '.xray-warn{color:var(--dsw-alias-state-error-primary,#f85149)}',
       '.xray-ok{color:var(--dsw-alias-state-success-primary,#3fb950)}',
@@ -55,7 +68,177 @@ window.__ModuleLoader__.load({
 
     //#region tiny view primitives
     const VIEWS = ['summary', 'health', 'deps', 'cost', 'shadow'];
-    function Table({ headers, rows }) {
+    const NS = 'xray';
+
+    /** English messages (also the key vocabulary; zh mirrors every key). */
+    const en = {
+      'panel.sub': 'composition X-ray — live from this harness',
+      'panel.loading': 'loading {view}…',
+      'panel.renderFailed': 'render failed: {message}',
+      // one question per view: what am I looking at, what does trouble look like?
+      'intro.summary':
+        'Composition at a glance. A non-zero "unhealthy" count means some plugin failed to start — see the health view.',
+      'intro.health':
+        'Plugin lifecycle. "Waiting" plugins declared a dependency that no active plugin provides yet; "unhealthy" fibers failed to start and their features are absent.',
+      'intro.deps':
+        'Who provides and consumes each service. The disable-cascade table answers: if I disable this plugin, which dependents stop working with it?',
+      'intro.cost':
+        'What every LLM request carries before your message: prompt sections + tool schemas, attributed to the plugin that registered each. "By plugin" is each plugin\'s per-request context tax.',
+      'intro.shadow':
+        'Same-name registrations. A service provided by two plugins means one silently wins — usually intended (an override), occasionally a conflict.',
+      // hover glossary (native title tooltips), keyed by column header
+      'tip.share':
+        'Percentage of the total estimated context (sections + tool schemas) this row costs on every request',
+      'tip.tokens': 'Rough estimate: ~4 characters per token',
+      'tip.owner': 'The plugin whose registration put this entry into the context',
+      'tip.unattributed':
+        'Registered before dsh-xray mounted and not reconcilable to a single plugin — mount dsh-xray earlier in the profile to shrink this row',
+      'tip.wants':
+        'Services this plugin declared via inject that are not (yet) provided by any active plugin',
+      'tip.fiber': 'One mounted instance of the plugin (a Cordis fiber uid)',
+      'tip.state': 'Cordis lifecycle state: ACTIVE is healthy; FAILED means apply() threw',
+      'tip.affects': 'Transitive consumers: disabling the provider takes these down with it',
+      'tip.providers':
+        'Every plugin claiming this service name; the last one to load wins silently',
+      'tip.registrations':
+        'How many tools/commands this plugin registered on the shared registries',
+      'tip.sections': 'Prompt sections this plugin contributes to the system prompt',
+      'tip.tools': 'Tool schemas this plugin registers (each costs context on every request)',
+      // column headers / row labels
+      'col.metric': 'metric',
+      'col.value': 'value',
+      'col.plugin': 'plugin',
+      'col.fiber': 'fiber',
+      'col.state': 'state',
+      'col.error': 'error',
+      'col.waitingPlugin': 'waiting plugin',
+      'col.wants': 'wants',
+      'col.service': 'service',
+      'col.providedBy': 'provided by',
+      'col.consumedBy': 'consumed by',
+      'col.provider': 'provider',
+      'col.affects': 'affects',
+      'col.section': 'section',
+      'col.tool': 'tool',
+      'col.owner': 'owner',
+      'col.tokens': 'tokens',
+      'col.share': 'share',
+      'col.sections': 'sections',
+      'col.tools': 'tools',
+      'col.providers': 'providers',
+      'col.registrations': 'registrations',
+      'row.pluginsMounted': 'plugins mounted',
+      'row.unhealthy': 'unhealthy',
+      'row.services': 'services',
+      'row.contextTokens': 'context tokens (tools + sections)',
+      'summary.captured': 'captured {at}',
+      'health.healthy': '{n} healthy',
+      'health.waiting': '{n} waiting',
+      'health.unhealthy': '{n} unhealthy',
+      'deps.unsatisfied':
+        '{n} unsatisfied inject(s) — these plugins wait forever unless a provider is added',
+      'h3.disableCascade': 'disable-cascade',
+      'h3.services': 'services',
+      'h3.byPlugin': 'by plugin',
+      'h3.promptSections': 'prompt sections',
+      'h3.toolSchemas': 'tool schemas',
+      'h3.registrars': 'registrars',
+      'cost.headline':
+        '~{total} tokens: {toolCount} tool schema(s) ~{toolTokens} + {sectionCount} prompt section(s) ~{sectionTokens}',
+      'cost.noAssembly': 'no prompt assembly observed yet — send one agent message first',
+      'cost.unattributed': 'unattributed',
+      'shadow.clean': 'no service is provided by more than one plugin',
+      'entry.loading': 'loading entry…',
+      'entry.stats': '{chars} chars · ~{tokens} tokens ({estimator})',
+      'entry.close': 'close',
+      'tip.clickEntry': 'Click to view the exact text this entry puts into every request',
+      'tip.contextTokens':
+        'Estimated tokens every request carries before your message — see the cost view for the full breakdown',
+    };
+
+    /** Simplified Chinese mirror of every en key. */
+    const zh = {
+      'panel.sub': '组合 X 光——实时来自当前 harness',
+      'panel.loading': '正在加载 {view}…',
+      'panel.renderFailed': '渲染失败:{message}',
+      'intro.summary': '组合总览。"unhealthy" 非零表示有插件启动失败——去 health 视图查看。',
+      'intro.health':
+        '插件生命周期。"waiting" 表示插件声明的依赖服务尚无活跃提供者;"unhealthy" 表示 fiber 启动失败,其功能缺失。',
+      'intro.deps':
+        '每个服务由谁提供、被谁消费。disable-cascade 表回答:禁用某插件后,哪些依赖它的插件会随之失效?',
+      'intro.cost':
+        '每次 LLM 请求在你的消息之前携带的内容:prompt sections + 工具 schema,并归因到注册它们的插件。"by plugin" 是每个插件的每请求上下文税。',
+      'intro.shadow':
+        '同名注册。一个服务被两个插件同时提供意味着有一方静默胜出——通常是有意覆盖,偶尔是冲突。',
+      'tip.share': '本行在每次请求中占估算总上下文(sections + 工具 schema)的百分比',
+      'tip.tokens': '粗略估算:约 4 个字符折合 1 token',
+      'tip.owner': '把这个条目注入上下文的插件',
+      'tip.unattributed':
+        '在 dsh-xray 挂载之前注册、无法唯一归因到某个插件——把 dsh-xray 在 profile 中提前挂载可缩小此行',
+      'tip.wants': '该插件通过 inject 声明、但当前没有任何活跃插件提供的服务',
+      'tip.fiber': '插件的一个挂载实例(Cordis fiber uid)',
+      'tip.state': 'Cordis 生命周期状态:ACTIVE 为健康;FAILED 表示 apply() 抛出了异常',
+      'tip.affects': '传递消费者:禁用该提供者会连带使这些插件失效',
+      'tip.providers': '声明提供此服务的全部插件;后加载者静默胜出',
+      'tip.registrations': '该插件在共享注册表上注册的工具/命令数量',
+      'tip.sections': '该插件贡献给 system prompt 的 sections',
+      'tip.tools': '该插件注册的工具 schema(每个都在每次请求中占用上下文)',
+      'col.metric': '指标',
+      'col.value': '值',
+      'col.plugin': '插件',
+      'col.fiber': 'fiber',
+      'col.state': '状态',
+      'col.error': '错误',
+      'col.waitingPlugin': '等待中的插件',
+      'col.wants': '等待的服务',
+      'col.service': '服务',
+      'col.providedBy': '提供者',
+      'col.consumedBy': '消费者',
+      'col.provider': '提供者',
+      'col.affects': '波及',
+      'col.section': 'section',
+      'col.tool': '工具',
+      'col.owner': '归属',
+      'col.tokens': 'tokens',
+      'col.share': '占比',
+      'col.sections': 'sections',
+      'col.tools': '工具',
+      'col.providers': '提供者',
+      'col.registrations': '注册数',
+      'row.pluginsMounted': '已挂载插件',
+      'row.unhealthy': '不健康',
+      'row.services': '服务',
+      'row.contextTokens': '上下文 tokens(工具 + sections)',
+      'summary.captured': '采集于 {at}',
+      'health.healthy': '{n} 个健康',
+      'health.waiting': '{n} 个等待中',
+      'health.unhealthy': '{n} 个不健康',
+      'deps.unsatisfied': '{n} 个未满足的 inject——除非补上提供者,这些插件将永远等待',
+      'h3.disableCascade': '停用级联',
+      'h3.services': '服务',
+      'h3.byPlugin': '按插件',
+      'h3.promptSections': 'prompt sections',
+      'h3.toolSchemas': '工具 schema',
+      'h3.registrars': '注册方',
+      'cost.headline':
+        '约 {total} tokens:{toolCount} 个工具 schema 约 {toolTokens} + {sectionCount} 个 prompt section 约 {sectionTokens}',
+      'cost.noAssembly': '尚未观测到 prompt 装配——先发送一条 agent 消息',
+      'cost.unattributed': '未归因',
+      'shadow.clean': '没有服务被多个插件同时提供',
+      'entry.loading': '正在加载条目…',
+      'entry.stats': '{chars} 字符 · 约 {tokens} tokens({estimator})',
+      'entry.close': '关闭',
+      'tip.clickEntry': '点击查看该条目每次请求实际注入的完整文本',
+      'tip.contextTokens': '每次请求在你的消息之前携带的估算 tokens——完整明细见 cost 视图',
+    };
+
+    /** Fill {placeholders}; the host t() resolves the key, we interpolate. */
+    const fill = (text, vars) =>
+      vars === undefined
+        ? text
+        : text.replace(/\{(\w+)\}/g, (m, k) => (k in vars ? String(vars[k]) : m));
+
+    function Table({ headers, rows, t }) {
       return h(
         'table',
         { className: 'xray-table' },
@@ -65,7 +248,13 @@ window.__ModuleLoader__.load({
           h(
             'tr',
             null,
-            headers.map((head, i) => h('th', { key: i }, head)),
+            headers.map((head, i) =>
+              h(
+                'th',
+                { key: i, title: head !== '' && en[`tip.${head}`] ? t(`tip.${head}`) : undefined },
+                head === '' ? '' : t(`col.${head}`),
+              ),
+            ),
           ),
         ),
         h('tbody', null, rows),
@@ -87,55 +276,139 @@ window.__ModuleLoader__.load({
         ),
       );
     }
+
+    /** Clickable entry name: opens the raw-text inspector for one entry. */
+    function EntryLink({ kind, name, onInspect, t }) {
+      return h(
+        'button',
+        {
+          className: 'xray-entry-link',
+          title: t('tip.clickEntry'),
+          onClick: () => onInspect({ kind, name }),
+        },
+        name,
+      );
+    }
+
+    /** Raw-text inspector: fetches one entry's live text on open. Fetched per
+     * view, never cached — the text IS the audit artifact. */
+    function EntryModal({ target, onClose, t }) {
+      const [state, setState] = react.useState({ phase: 'loading' });
+      react.useEffect(() => {
+        let alive = true;
+        setState({ phase: 'loading' });
+        fetch(
+          `/xray/api/entry?kind=${encodeURIComponent(target.kind)}&name=${encodeURIComponent(target.name)}`,
+        )
+          .then(async (res) => {
+            if (!res.ok)
+              throw new Error((await res.json().catch(() => null))?.error ?? `HTTP ${res.status}`);
+            return res.json();
+          })
+          .then((data) => {
+            if (alive) setState({ phase: 'ready', data });
+          })
+          .catch((err) => {
+            if (alive)
+              setState({
+                phase: 'error',
+                message: err instanceof Error ? err.message : String(err),
+              });
+          });
+        return () => {
+          alive = false;
+        };
+      }, [target]);
+      return h(
+        'div',
+        { className: 'xray-entry-overlay', onClick: onClose },
+        h(
+          'div',
+          { className: 'xray-entry-modal', onClick: (event) => event.stopPropagation() },
+          h(
+            'div',
+            { className: 'xray-entry-head' },
+            h('span', { className: 'xray-entry-name' }, target.name),
+            state.phase === 'ready'
+              ? h(
+                  'span',
+                  { className: 'xray-entry-stats' },
+                  fill(t('entry.stats'), {
+                    chars: state.data.chars,
+                    tokens: state.data.tokens,
+                    estimator: state.data.estimator,
+                  }),
+                )
+              : null,
+            h('button', { className: 'xray-entry-close', onClick: onClose }, t('entry.close')),
+          ),
+          state.phase === 'loading'
+            ? h('p', { className: 'xray-muted' }, t('entry.loading'))
+            : state.phase === 'error'
+              ? h('p', { className: 'xray-warn' }, state.message)
+              : h('pre', { className: 'xray-entry-text' }, state.data.text),
+        ),
+      );
+    }
     //#endregion
 
-    //#region per-view renderers (mirror lib/panel.js, as components)
+    //#region per-view renderers (mirror lib/panel.js, as components; all copy through t)
     const renderers = {
-      summary: (d) =>
+      summary: (d, t) =>
         h(
           react.Fragment,
           null,
           h(Table, {
+            t,
             headers: ['metric', 'value'],
             rows: [
-              Row('p', ['plugins mounted', { cls: 'xray-num', text: String(d.plugins) }]),
+              Row('p', [t('row.pluginsMounted'), { cls: 'xray-num', text: String(d.plugins) }]),
               Row('u', [
-                'unhealthy',
+                t('row.unhealthy'),
                 {
                   cls: `xray-num ${d.unhealthy ? 'xray-warn' : 'xray-ok'}`,
                   text: String(d.unhealthy),
                 },
               ]),
-              Row('s', ['services', { cls: 'xray-num', text: String(d.services) }]),
+              Row('s', [t('row.services'), { cls: 'xray-num', text: String(d.services) }]),
               Row('t', [
-                'context tokens (tools + sections)',
+                h('span', { title: t('tip.contextTokens') }, t('row.contextTokens')),
                 { cls: 'xray-num', text: `~${d.toolSchemaTokens}` },
               ]),
             ],
           }),
-          h('p', { className: 'xray-muted', style: { marginTop: 12 } }, `captured ${d.capturedAt}`),
+          h(
+            'p',
+            { className: 'xray-muted', style: { marginTop: 12 } },
+            fill(t('summary.captured'), { at: d.capturedAt }),
+          ),
         ),
 
-      health: (d) =>
+      health: (d, t) =>
         h(
           react.Fragment,
           null,
           h(
             'p',
             null,
-            h('span', { className: 'xray-ok' }, `${d.healthy.length} healthy`),
-            d.waiting.length ? ` · ${d.waiting.length} waiting` : null,
+            h('span', { className: 'xray-ok' }, fill(t('health.healthy'), { n: d.healthy.length })),
+            d.waiting.length ? ` · ${fill(t('health.waiting'), { n: d.waiting.length })}` : null,
             d.unhealthy.length
               ? h(
                   react.Fragment,
                   null,
                   ' · ',
-                  h('span', { className: 'xray-warn' }, `${d.unhealthy.length} unhealthy`),
+                  h(
+                    'span',
+                    { className: 'xray-warn' },
+                    fill(t('health.unhealthy'), { n: d.unhealthy.length }),
+                  ),
                 )
               : null,
           ),
           d.unhealthy.length
             ? h(Table, {
+                t,
                 headers: ['plugin', 'fiber', 'state', 'error'],
                 rows: d.unhealthy.flatMap((p) =>
                   p.fibers.map((f) =>
@@ -151,25 +424,31 @@ window.__ModuleLoader__.load({
             : null,
           d.waiting.length
             ? h(Table, {
-                headers: ['waiting plugin', 'wants'],
+                t,
+                headers: ['waitingPlugin', 'wants'],
                 rows: d.waiting.map((p) => Row(p.name, [p.name, p.inject.join(', ')])),
               })
             : null,
         ),
 
-      deps: (d) =>
+      deps: (d, t) =>
         h(
           react.Fragment,
           null,
           d.unsatisfied.length
-            ? h('p', { className: 'xray-warn' }, `${d.unsatisfied.length} unsatisfied inject(s)`)
+            ? h(
+                'p',
+                { className: 'xray-warn', title: t('tip.wants') },
+                fill(t('deps.unsatisfied'), { n: d.unsatisfied.length }),
+              )
             : null,
           Object.keys(d.cascade).length
             ? h(
                 react.Fragment,
                 null,
-                h('div', { className: 'xray-h3' }, 'disable-cascade'),
+                h('div', { className: 'xray-h3' }, t('h3.disableCascade')),
                 h(Table, {
+                  t,
                   headers: ['provider', 'affects'],
                   rows: Object.entries(d.cascade).map(([provider, affected]) =>
                     Row(provider, [provider, affected.join(', ')]),
@@ -177,34 +456,70 @@ window.__ModuleLoader__.load({
                 }),
               )
             : null,
-          h('div', { className: 'xray-h3' }, 'services'),
+          h('div', { className: 'xray-h3' }, t('h3.services')),
           h(Table, {
-            headers: ['service', 'provided by', 'consumed by'],
+            t,
+            headers: ['service', 'providedBy', 'consumedBy'],
             rows: Object.entries(d.services).map(([name, node]) =>
               Row(name, [name, node.providers.join(', ') || '—', node.consumers.join(', ') || '—']),
             ),
           }),
         ),
 
-      cost: (d) =>
+      cost: (d, t, onInspect) =>
         h(
           react.Fragment,
           null,
           h(
             'p',
             null,
-            `~${d.totalTokens} tokens: ${d.toolCount} tool schema(s) ~${d.toolTokens} + ${d.sectionCount} prompt section(s) ~${d.sectionTokens}`,
+            fill(t('cost.headline'), {
+              total: d.totalTokens,
+              toolCount: d.toolCount,
+              toolTokens: d.toolTokens,
+              sectionCount: d.sectionCount,
+              sectionTokens: d.sectionTokens,
+            }),
           ),
+          d.owners?.length
+            ? h(
+                react.Fragment,
+                null,
+                h('div', { className: 'xray-h3' }, t('h3.byPlugin')),
+                h(Table, {
+                  t,
+                  headers: ['plugin', 'sections', 'tools', 'tokens', 'share', ''],
+                  rows: d.owners.map((o) =>
+                    Row(o.plugin, [
+                      o.plugin === 'unattributed'
+                        ? h(
+                            'span',
+                            { className: 'xray-muted', title: t('tip.unattributed') },
+                            t('cost.unattributed'),
+                          )
+                        : o.plugin,
+                      { cls: 'xray-num', text: String(o.sections) },
+                      { cls: 'xray-num', text: String(o.tools) },
+                      { cls: 'xray-num', text: `~${o.tokens}` },
+                      { cls: 'xray-num', text: `${o.share}%` },
+                      h(Bar, { share: o.share }),
+                    ]),
+                  ),
+                }),
+              )
+            : null,
           d.sections.length
             ? h(
                 react.Fragment,
                 null,
-                h('div', { className: 'xray-h3' }, 'prompt sections'),
+                h('div', { className: 'xray-h3' }, t('h3.promptSections')),
                 h(Table, {
-                  headers: ['section', 'tokens', 'share', ''],
+                  t,
+                  headers: ['section', 'owner', 'tokens', 'share', ''],
                   rows: d.sections.map((s) =>
                     Row(s.name, [
-                      s.name,
+                      h(EntryLink, { kind: 'section', name: s.name, onInspect, t }),
+                      { cls: 'xray-muted', text: s.owner ?? '—' },
                       { cls: 'xray-num', text: `~${s.tokens}` },
                       { cls: 'xray-num', text: `${s.share}%` },
                       h(Bar, { share: s.share }),
@@ -212,31 +527,30 @@ window.__ModuleLoader__.load({
                   ),
                 }),
               )
-            : h(
-                'p',
-                { className: 'xray-muted' },
-                'no prompt assembly observed yet — send one agent message first',
-              ),
-          h('div', { className: 'xray-h3' }, 'tool schemas'),
+            : h('p', { className: 'xray-muted' }, t('cost.noAssembly')),
+          h('div', { className: 'xray-h3' }, t('h3.toolSchemas')),
           h(Table, {
-            headers: ['tool', 'tokens', 'share', ''],
-            rows: d.tools.map((t) =>
-              Row(t.name, [
-                t.name,
-                { cls: 'xray-num', text: `~${t.tokens}` },
-                { cls: 'xray-num', text: `${t.share}%` },
-                h(Bar, { share: t.share }),
+            t,
+            headers: ['tool', 'owner', 'tokens', 'share', ''],
+            rows: d.tools.map((row) =>
+              Row(row.name, [
+                h(EntryLink, { kind: 'tool', name: row.name, onInspect, t }),
+                { cls: 'xray-muted', text: row.owner ?? '—' },
+                { cls: 'xray-num', text: `~${row.tokens}` },
+                { cls: 'xray-num', text: `${row.share}%` },
+                h(Bar, { share: row.share }),
               ]),
             ),
           }),
         ),
 
-      shadow: (d) =>
+      shadow: (d, t) =>
         h(
           react.Fragment,
           null,
           d.services.length
             ? h(Table, {
+                t,
                 headers: ['service', 'providers'],
                 rows: d.services.map((s) =>
                   Row(s.service, [
@@ -245,13 +559,14 @@ window.__ModuleLoader__.load({
                   ]),
                 ),
               })
-            : h('p', { className: 'xray-ok' }, 'no service is provided by more than one plugin'),
+            : h('p', { className: 'xray-ok' }, t('shadow.clean')),
           d.registrars.length
             ? h(
                 react.Fragment,
                 null,
-                h('div', { className: 'xray-h3' }, 'registrars'),
+                h('div', { className: 'xray-h3' }, t('h3.registrars')),
                 h(Table, {
+                  t,
                   headers: ['plugin', 'registrations'],
                   rows: d.registrars.map((r) =>
                     Row(r.plugin, [r.plugin, { cls: 'xray-num', text: String(r.registrations) }]),
@@ -264,7 +579,7 @@ window.__ModuleLoader__.load({
     //#endregion
 
     //#region panel (one conversation.view tab)
-    function XrayPanel() {
+    function XrayPanel({ t }) {
       const [view, setView] = react.useState('summary');
       // `for` stamps which view the payload belongs to: a click flips `view`
       // synchronously while `state` still carries the previous view's data —
@@ -274,6 +589,8 @@ window.__ModuleLoader__.load({
       // the layout changes once per click instead of collapsing to a
       // one-line loading row and re-expanding.
       const [state, setState] = react.useState({ phase: 'loading', for: 'summary' });
+      // Entry inspector: {kind, name} of the entry whose raw text is open.
+      const [inspecting, setInspecting] = react.useState(null);
       react.useEffect(() => {
         let alive = true;
         fetch(`/xray/api/${view}`)
@@ -301,18 +618,20 @@ window.__ModuleLoader__.load({
       // the fresh payload is in flight.
       const settled = state.phase !== 'loading';
       let body;
-      if (!settled) body = h('p', { className: 'xray-muted' }, `loading ${view}…`);
+      if (!settled) body = h('p', { className: 'xray-muted' }, fill(t('panel.loading'), { view }));
       else if (state.phase === 'error') body = h('p', { className: 'xray-warn' }, state.message);
       else {
         // A diagnostic surface must never take itself down on one bad
         // payload: render the failure, keep the tab and its nav alive.
         try {
-          body = renderers[state.for](state.data);
+          body = renderers[state.for](state.data, t, setInspecting);
         } catch (err) {
           body = h(
             'p',
             { className: 'xray-warn' },
-            `render failed: ${err instanceof Error ? err.message : String(err)}`,
+            fill(t('panel.renderFailed'), {
+              message: err instanceof Error ? err.message : String(err),
+            }),
           );
         }
       }
@@ -320,7 +639,7 @@ window.__ModuleLoader__.load({
       return h(
         'div',
         { className: 'xray-panel' },
-        h('p', { className: 'xray-sub' }, 'composition X-ray — live from this harness'),
+        h('p', { className: 'xray-sub' }, t('panel.sub')),
         h(
           'nav',
           { className: 'xray-nav' },
@@ -332,17 +651,22 @@ window.__ModuleLoader__.load({
             ),
           ),
         ),
+        h('p', { className: 'xray-muted', style: { margin: '0 0 10px' } }, t(`intro.${view}`)),
         h('div', { className: stale ? 'xray-body xray-stale' : 'xray-body' }, body),
+        inspecting
+          ? h(EntryModal, { target: inspecting, onClose: () => setInspecting(null), t })
+          : null,
       );
     }
     //#endregion
 
-    const inject = ['slots'];
+    const inject = ['slots', 'locale'];
     /** Mount the X-ray tab into the conversation view ring (beside Chat / Trajectory). */
     function apply(ctx) {
+      ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'xray: dictionaries');
       ctx.slots.inject('conversation.view', () =>
         ctx.slots.register(
-          { name: 'conversation.view', id: 'xray', order: 20, label: 'X-ray' },
+          { name: 'conversation.view', id: 'xray', order: 20, label: 'X-ray', locale: NS },
           XrayPanel,
         ),
       );

package/lib/collect/attribution.js

@@ -0,0 +1,239 @@
+// Registry attribution: attribute named entries (prompt sections, tools) to
+// the plugin that registered them. Purely observational — nothing here
+// mutates the registries.
+//
+// Both dsh-system-prompt and dsh-tools follow the same ScopedLayers pattern:
+// `register()`/`section()` runs `layers.effect(CALLER ctx, ...)` with a fixed
+// label ("systemPrompt.section()" / "tools.register()"), and every
+// registration/disposal emits a change event ("system-prompt/change" /
+// "tools/change"). The effect meta carries only the label, not the entry
+// name (cordis EffectMeta is {label, children}), so the name->plugin join is
+// reconstructed diff-wise: between two change events, the only fibers whose
+// labeled-effect count grew are the registrants of the names that appeared.
+// Verified against dsh-system-prompt + cordis in /tmp probes (2026-08-25).
+//
+// Baseline rule: entries present before observation starts are attributed by
+// a one-shot scan only when exactly one already-mounted fiber carries the
+// label — otherwise they stay null (`unattributed`) rather than guessing.
+
+/** Count effects with the given label in one fiber's live effect tree. */
+function labeledEffectCount(fiber, label) {
+  let count = 0;
+  const walk = (effect, depth) => {
+    if (!effect || depth > 4) return;
+    if (effect.label === label) count += 1;
+    for (const child of effect.children ?? []) walk(child, depth + 1);
+  };
+  try {
+    for (const effect of fiber.getEffects?.() ?? []) walk(effect, 0);
+  } catch {
+    /* disposed fiber mid-walk: count what we saw */
+  }
+  return count;
+}
+
+/** Best-effort plugin name for a fiber (entry name first, runtime name second). */
+function fiberPluginName(fiber) {
+  try {
+    return fiber.entry?.options?.name ?? fiber.name ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** Normalize an identifier to comparable word stems: "tool-fs-search" ->
+ * ["tool","fs","search"], "tool:glob" -> ["tool","glob"], "get_goal" ->
+ * ["get","goal"]. Scope prefixes like @deepseek-ai/dsh- are shed first. */
+function stems(identifier) {
+  return String(identifier)
+    .replace(/^@[^/]+\//, '')
+    .replace(/^dsh-/, '')
+    .toLowerCase()
+    .split(/[^a-z0-9]+/)
+    .filter(Boolean);
+}
+
+/** Does the name plausibly belong to the fiber? True when they share any
+ * non-generic stem ("tool"/"get"/"list" alone prove nothing). */
+const GENERIC_STEMS = new Set(['tool', 'tools', 'get', 'set', 'list', 'run', 'app', 'dsh']);
+function affine(name, fiberName) {
+  const ns = stems(name);
+  const fibers = new Set(stems(fiberName));
+  return ns.some((s) => !GENERIC_STEMS.has(s) && fibers.has(s));
+}
+
+/**
+ * Attribute pre-existing names to carrier fibers by stem affinity, accepting
+ * a fiber's assignment only when its matched-name count reconciles exactly
+ * with its labeled-effect count (so a partial or over-broad match assigns
+ * nothing rather than something wrong).
+ * @returns Map<name, pluginName> for the names that reconciled.
+ */
+function baselineByAffinity(names, carriers, counts) {
+  const assigned = new Map();
+  const claims = new Map(); // fiber -> names it matches
+  for (const fiber of carriers) {
+    const fname = fiberPluginName(fiber);
+    if (!fname) continue;
+    const mine = [...names].filter((n) => !assigned.has(n) && affine(n, fname));
+    claims.set(fiber, mine);
+  }
+  // A name claimed by two fibers is ambiguous everywhere it appears: drop it.
+  const claimCount = new Map();
+  for (const mine of claims.values())
+    for (const n of mine) claimCount.set(n, (claimCount.get(n) ?? 0) + 1);
+  for (const [fiber, mine] of claims) {
+    const unambiguous = mine.filter((n) => claimCount.get(n) === 1);
+    if (unambiguous.length > 0 && unambiguous.length === (counts.get(fiber) ?? 0)) {
+      const fname = fiberPluginName(fiber);
+      for (const n of unambiguous) assigned.set(n, fname);
+    }
+  }
+  return assigned;
+}
+
+/**
+ * Install one diff-based attribution observer.
+ * @param ctx - the mounted plugin's context (reaches registry + events).
+ * @param spec - { event, effectLabel, names } where `names(ctx)` reads the
+ * registry's current global-layer name set.
+ * @returns { table, dispose } — `table` is a live Map<name, pluginName|null>.
+ */
+function installAttribution(ctx, spec) {
+  const table = new Map();
+  const fibers = new Set();
+  const counts = new Map(); // fiber -> last seen labeled-effect count
+
+  try {
+    for (const runtime of ctx.registry.values()) {
+      for (const fiber of runtime.fibers) fibers.add(fiber);
+    }
+  } catch {
+    /* registry unreadable: event stream alone still works */
+  }
+  const disposePlugin = ctx.on('internal/plugin', (fiber) => {
+    try {
+      fibers.add(fiber);
+    } catch {
+      /* never break the host */
+    }
+  });
+
+  // Baseline: entries registered before observation started. The diff trick
+  // cannot see the past, but the effect COUNTS per fiber survive: a fiber
+  // carrying N labeled effects registered exactly N of the pre-existing
+  // names. Names follow strong conventions (fiber "tool-goal" registers
+  // section "tool:goal" and tools "get_goal"/"create_goal"/...), so match
+  // names to fibers by normalized-stem affinity — and accept a fiber's
+  // matches ONLY when their count equals that fiber's effect count exactly
+  // (per-fiber bookkeeping must reconcile). Anything left over stays null
+  // (`unattributed`) rather than guessed.
+  let prevNames = spec.names(ctx);
+  const carriers = [];
+  for (const fiber of fibers) {
+    const count = labeledEffectCount(fiber, spec.effectLabel);
+    counts.set(fiber, count);
+    if (count > 0) carriers.push(fiber);
+  }
+  if (carriers.length === 1) {
+    for (const name of prevNames) table.set(name, fiberPluginName(carriers[0]));
+  } else {
+    const assigned = baselineByAffinity(prevNames, carriers, counts);
+    for (const name of prevNames) table.set(name, assigned.get(name) ?? null);
+  }
+
+  const disposeChange = ctx.on(spec.event, () => {
+    try {
+      const names = spec.names(ctx);
+      const added = [...names].filter((n) => !prevNames.has(n));
+      const removed = [...prevNames].filter((n) => !names.has(n));
+      const registrants = [];
+      for (const fiber of fibers) {
+        const now = labeledEffectCount(fiber, spec.effectLabel);
+        const before = counts.get(fiber) ?? 0;
+        if (now > before) registrants.push(fiber);
+        counts.set(fiber, now);
+      }
+      // One grown fiber owns every added name in this tick (change fires per
+      // registration); multiple grown fibers between coalesced ticks would
+      // be ambiguous — attribute only the unambiguous case.
+      for (const name of added) {
+        table.set(name, registrants.length === 1 ? fiberPluginName(registrants[0]) : null);
+      }
+      for (const name of removed) table.delete(name);
+      prevNames = names;
+    } catch {
+      /* diagnostics must never break the host path */
+    }
+  });
+
+  return {
+    table,
+    dispose: () => {
+      disposePlugin();
+      disposeChange();
+    },
+  };
+}
+
+/** All names across the global layer plus every scoped overlay. Tool plugins
+ * mount under each agent's scope (agent-presets refuses unscoped mounts), so
+ * the global layer alone misses every per-agent registration. */
+function allLayerNames(layers, pick) {
+  const names = new Set();
+  if (!layers) return names;
+  try {
+    for (const key of pick(layers.global)?.keys() ?? []) names.add(key);
+    for (const layer of layers.scoped?.values() ?? []) {
+      for (const key of pick(layer)?.keys() ?? []) names.add(key);
+    }
+  } catch {
+    /* layer shape drifted: return what we saw */
+  }
+  return names;
+}
+
+/** Prompt section names (global + every agent scope). */
+function sectionNames(ctx) {
+  try {
+    return allLayerNames(ctx.get?.('systemPrompt')?.layers, (layer) => layer?.sections);
+  } catch {
+    return new Set();
+  }
+}
+
+/** Tool names (global + every agent scope). */
+function toolNames(ctx) {
+  try {
+    return allLayerNames(ctx.get?.('tools')?.layers, (layer) => layer?.tools);
+  } catch {
+    return new Set();
+  }
+}
+
+/**
+ * Install both attribution observers (sections + tools).
+ * @returns { sections, tools, dispose } — two live Map<name, plugin|null>.
+ */
+function installSectionAttribution(ctx) {
+  const sections = installAttribution(ctx, {
+    event: 'system-prompt/change',
+    effectLabel: 'systemPrompt.section()',
+    names: sectionNames,
+  });
+  const tools = installAttribution(ctx, {
+    event: 'tools/change',
+    effectLabel: 'tools.register()',
+    names: toolNames,
+  });
+  return {
+    table: sections.table,
+    toolTable: tools.table,
+    dispose: () => {
+      sections.dispose();
+      tools.dispose();
+    },
+  };
+}
+
+module.exports = { installSectionAttribution, installAttribution, labeledEffectCount };

package/lib/collect/runtime.js

@@ -60,11 +60,36 @@ function estimateTokens(text) {
   return Math.ceil(text.length / 4);
 }
 
-/** Capture the model-facing tool schemas (name/description/parameters). */
+/** Capture the model-facing tool schemas (name/description/parameters).
+ * Tool plugins mount under each agent's scope (agent-presets refuses
+ * unscoped mounts), so `schemas()` on the global view alone misses them:
+ * walk the global layer plus every scoped overlay and dedupe by name. */
 function snapshotTools(ctx) {
   try {
     const tools = ctx.get?.('tools') ?? ctx.root?.tools;
-    const schemas = tools?.schemas?.();
+    if (!tools) return [];
+    const byName = new Map();
+    const harvest = (definitions) => {
+      for (const [name, definition] of definitions?.entries() ?? []) {
+        if (byName.has(name)) continue;
+        byName.set(name, {
+          name,
+          description: definition.description ?? '',
+          tokens: estimateTokens(
+            JSON.stringify({
+              name,
+              description: definition.description ?? '',
+              parameters: definition.parameters ?? {},
+            }),
+          ),
+        });
+      }
+    };
+    harvest(tools.layers?.global?.tools);
+    for (const layer of tools.layers?.scoped?.values() ?? []) harvest(layer.tools);
+    if (byName.size > 0) return [...byName.values()];
+    // Layer shape drifted: fall back to the public global-view projection.
+    const schemas = tools.schemas?.();
     if (!Array.isArray(schemas)) return [];
     return schemas.map((s) => ({
       name: s.name,
@@ -125,9 +150,67 @@ function snapshotRegistry(ctx) {
   };
 }
 
+/**
+ * Read ONE entry's live text on demand (never persisted): the answer to
+ * "what exactly is this ~N tokens?". Sections resolve their text (static
+ * string or provider function called with an empty context); tools return
+ * the full model-facing schema. Reads the same layers attribution reads.
+ * @returns { kind, name, text, chars, tokens, estimator } or null when absent.
+ */
+function snapshotEntry(ctx, kind, name) {
+  const found = (text) => ({
+    kind,
+    name,
+    text,
+    chars: text.length,
+    tokens: estimateTokens(text),
+    estimator: '~4 chars/token',
+  });
+  const firstAcrossLayers = (layers, pick) => {
+    let value = pick(layers.global);
+    if (value !== undefined) return value;
+    for (const layer of layers.scoped?.values() ?? []) {
+      value = pick(layer);
+      if (value !== undefined) return value;
+    }
+    return undefined;
+  };
+  try {
+    if (kind === 'section') {
+      const layers = ctx.get?.('systemPrompt')?.layers;
+      if (!layers) return null;
+      const section = firstAcrossLayers(layers, (layer) => layer?.sections?.get?.(name));
+      if (!section) return null;
+      const text = typeof section.text === 'function' ? section.text({}) : section.text;
+      return found(String(text ?? ''));
+    }
+    if (kind === 'tool') {
+      const layers = ctx.get?.('tools')?.layers;
+      if (!layers) return null;
+      const definition = firstAcrossLayers(layers, (layer) => layer?.tools?.get?.(name));
+      if (!definition) return null;
+      return found(
+        JSON.stringify(
+          {
+            name: definition.name,
+            description: definition.description ?? '',
+            parameters: definition.parameters ?? {},
+          },
+          null,
+          2,
+        ),
+      );
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
 module.exports = {
   snapshotRegistry,
   snapshotTools,
+  snapshotEntry,
   injectNames,
   provideNames,
   stateName,

package/lib/index.js

@@ -1,7 +1,13 @@
 const fs = require('node:fs');
 const path = require('node:path');
 const os = require('node:os');
-const { snapshotRegistry, stateName, estimateTokens } = require('./collect/runtime.js');
+const {
+  snapshotRegistry,
+  snapshotEntry,
+  stateName,
+  estimateTokens,
+} = require('./collect/runtime.js');
+const { installSectionAttribution } = require('./collect/attribution.js');
 const { serviceGraph, health, shadowing, contextCost } = require('./model.js');
 
 const name = 'dsh-xray';
@@ -27,6 +33,7 @@ function apply(ctx) {
   const file = path.join(dir, 'runtime.json');
   const transitions = new Map(); // plugin name -> [{state, at}] ring buffer
   let lastAssembly = null; // latest system-prompt assembly observation
+  let attribution = null; // section name -> plugin name (live table)
 
   let timer = null;
   const writeSnapshot = () => {
@@ -35,6 +42,8 @@ function apply(ctx) {
       const snap = snapshotRegistry(ctx);
       snap.transitions = Object.fromEntries(transitions);
       snap.promptAssembly = lastAssembly;
+      snap.sectionOwners = attribution ? Object.fromEntries(attribution.table) : {};
+      snap.toolOwners = attribution ? Object.fromEntries(attribution.toolTable) : {};
       fs.mkdirSync(dir, { recursive: true });
       const tmp = `${file}.tmp`;
       fs.writeFileSync(tmp, JSON.stringify(snap, null, 2));
@@ -81,9 +90,16 @@ function apply(ctx) {
       return result;
     });
     schedule(); // initial snapshot
+    // Section attribution: diff-based name->plugin table over
+    // system-prompt/change (see collect/attribution.js for the strategy).
+    attribution = installSectionAttribution(ctx);
     return [
       disposeStatus,
       disposeAssemble,
+      () => {
+        attribution.dispose();
+        attribution = null;
+      },
       () => {
         clearTimeout(timer);
         writeSnapshot(); // final state on unload
@@ -102,26 +118,34 @@ function apply(ctx) {
         const snap = snapshotRegistry(ctx);
         snap.transitions = Object.fromEntries(transitions);
         snap.promptAssembly = lastAssembly;
+        snap.sectionOwners = attribution ? Object.fromEntries(attribution.table) : {};
+        snap.toolOwners = attribution ? Object.fromEntries(attribution.toolTable) : {};
         return snap;
       };
       wctx.effect(
         () =>
-          mountPanel(wctx.webServer, {
-            summary: () => {
-              const snap = freshSnap();
-              return {
-                plugins: snap.plugins.length,
-                unhealthy: health(snap).unhealthy.length,
-                services: Object.keys(serviceGraph(snap).services).length,
-                toolSchemaTokens: contextCost(snap).totalTokens,
-                capturedAt: snap.capturedAt,
-              };
+          mountPanel(
+            wctx.webServer,
+            {
+              summary: () => {
+                const snap = freshSnap();
+                return {
+                  plugins: snap.plugins.length,
+                  unhealthy: health(snap).unhealthy.length,
+                  services: Object.keys(serviceGraph(snap).services).length,
+                  toolSchemaTokens: contextCost(snap).totalTokens,
+                  capturedAt: snap.capturedAt,
+                };
+              },
+              deps: () => serviceGraph(freshSnap()),
+              health: () => health(freshSnap()),
+              cost: () => contextCost(freshSnap()),
+              shadow: () => shadowing(freshSnap()),
             },
-            deps: () => serviceGraph(freshSnap()),
-            health: () => health(freshSnap()),
-            cost: () => contextCost(freshSnap()),
-            shadow: () => shadowing(freshSnap()),
-          }),
+            // Entry text is computed per request from the live registries and
+            // never persisted — the audit answer to "what exactly is ~N tokens?".
+            (kind, entryName) => snapshotEntry(ctx, kind, entryName),
+          ),
         'xray-panel-routes',
       );
       logger.info('xray panel mounted at /xray');
@@ -172,6 +196,8 @@ function apply(ctx) {
             const snap = snapshotRegistry(ctx);
             snap.transitions = Object.fromEntries(transitions);
             snap.promptAssembly = lastAssembly;
+            snap.sectionOwners = attribution ? Object.fromEntries(attribution.table) : {};
+            snap.toolOwners = attribution ? Object.fromEntries(attribution.toolTable) : {};
             if (args.view === 'deps') return serviceGraph(snap);
             if (args.view === 'health') return health(snap);
             if (args.view === 'cost') return contextCost(snap);

package/lib/model.js

@@ -277,8 +277,13 @@ function shadowing(snap) {
   return out;
 }
 
-/** F8: estimated context cost — tool schemas plus prompt sections. */
+/** F8: estimated context cost — tool schemas plus prompt sections, each
+ * attributed to the plugin that registered it (F9: owner join + per-plugin
+ * rollup). Owners come from the snapshot's diff-based attribution tables;
+ * a missing entry renders as null (`unattributed`), never a guess. */
 function contextCost(snap) {
+  const sectionOwners = snap.sectionOwners ?? {};
+  const toolOwners = snap.toolOwners ?? {};
   const tools = (snap.tools ?? []).slice().sort((a, b) => b.tokens - a.tokens);
   const toolTokens = tools.reduce((sum, t) => sum + t.tokens, 0);
   const sections = (snap.promptAssembly?.sections ?? [])
@@ -287,14 +292,49 @@ function contextCost(snap) {
   const sectionTokens = sections.reduce((sum, s) => sum + s.tokens, 0);
   const total = toolTokens + sectionTokens;
   const share = (n) => (total ? Math.round((n / total) * 1000) / 10 : 0);
+
+  // Per-plugin rollup: what does each plugin cost per request, and through
+  // which entries? This is the context-budget view: sort by tokens, and the
+  // top rows are the plugins silently taxing every request.
+  const byOwner = new Map();
+  const add = (owner, kind, name, tokens) => {
+    const key = owner ?? 'unattributed';
+    if (!byOwner.has(key))
+      byOwner.set(key, { plugin: key, tokens: 0, sections: 0, tools: 0, entries: [] });
+    const row = byOwner.get(key);
+    row.tokens += tokens;
+    row[kind] += 1;
+    row.entries.push({ kind: kind === 'sections' ? 'section' : 'tool', name, tokens });
+  };
+  for (const s of sections) add(sectionOwners[s.name], 'sections', s.name, s.tokens);
+  for (const t of tools) add(toolOwners[t.name], 'tools', t.name, t.tokens);
+  const owners = [...byOwner.values()]
+    .sort((a, b) => b.tokens - a.tokens)
+    .map((row) => ({
+      ...row,
+      share: share(row.tokens),
+      entries: row.entries.sort((a, b) => b.tokens - a.tokens),
+    }));
+
   return {
     totalTokens: total,
     toolTokens,
     sectionTokens,
     toolCount: tools.length,
     sectionCount: sections.length,
-    tools: tools.map((t) => ({ name: t.name, tokens: t.tokens, share: share(t.tokens) })),
-    sections: sections.map((s) => ({ name: s.name, tokens: s.tokens, share: share(s.tokens) })),
+    tools: tools.map((t) => ({
+      name: t.name,
+      tokens: t.tokens,
+      share: share(t.tokens),
+      owner: toolOwners[t.name] ?? null,
+    })),
+    sections: sections.map((s) => ({
+      name: s.name,
+      tokens: s.tokens,
+      share: share(s.tokens),
+      owner: sectionOwners[s.name] ?? null,
+    })),
+    owners,
     promptObservedAt: snap.promptAssembly?.at ?? null,
     capturedAt: snap.capturedAt,
   };

package/lib/panel.js

@@ -40,6 +40,34 @@ const PAGE = `<!doctype html>
 <script>
 const views = ['summary', 'health', 'deps', 'cost', 'shadow'];
 const esc = (s) => String(s ?? '').replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
+const escAttr = (s) => esc(s).replace(/"/g, '&quot;');
+
+// One question per view: what am I looking at, and what does trouble look like?
+const INTRO = {
+  summary: 'Composition at a glance. A non-zero "unhealthy" count means some plugin failed to start — see the health view.',
+  health: 'Plugin lifecycle. "Waiting" plugins declared a dependency that no active plugin provides yet; "unhealthy" fibers failed to start and their features are absent.',
+  deps: 'Who provides and consumes each service. The disable-cascade table answers: if I disable this plugin, which dependents stop working with it?',
+  cost: 'What every LLM request carries before your message: prompt sections + tool schemas, attributed to the plugin that registered each. "By plugin" is each plugin\\'s per-request context tax.',
+  shadow: 'Same-name registrations. A service provided by two plugins means one silently wins — usually intended (an override), occasionally a conflict.',
+};
+
+// Hover glossary: term -> plain-language meaning (native title tooltips).
+const TIPS = {
+  share: 'Percentage of the total estimated context (sections + tool schemas) this row costs on every request',
+  tokens: 'Rough estimate: ~4 characters per token',
+  owner: 'The plugin whose registration put this entry into the context',
+  unattributed: 'Registered before dsh-xray mounted and not reconcilable to a single plugin — mount dsh-xray earlier in the profile to shrink this row',
+  wants: 'Services this plugin declared via inject that are not (yet) provided by any active plugin',
+  fiber: 'One mounted instance of the plugin (a Cordis fiber uid)',
+  state: 'Cordis lifecycle state: ACTIVE is healthy; FAILED means apply() threw',
+  affects: 'Transitive consumers: disabling the provider takes these down with it',
+  providers: 'Every plugin claiming this service name; the last one to load wins silently',
+  registrations: 'How many tools/commands this plugin registered on the shared registries',
+  sections: 'Prompt sections this plugin contributes to the system prompt',
+  tools: 'Tool schemas this plugin registers (each costs context on every request)',
+};
+const th = (h) => '<th' + (TIPS[h] ? ' title="' + escAttr(TIPS[h]) + '"' : '') + '>' + esc(h) + '</th>';
+const intro = (v) => '<p class="muted" style="margin:0 0 10px">' + INTRO[v] + '</p>';
 const nav = document.getElementById('nav');
 const content = document.getElementById('content');
 const status = document.getElementById('status');
@@ -54,7 +82,7 @@ for (const v of views) {
 }
 
 function table(headers, rows) {
-  return '<table><tr>' + headers.map((h) => '<th>' + esc(h) + '</th>').join('') + '</tr>'
+  return '<table><tr>' + headers.map(th).join('') + '</tr>'
     + rows.join('') + '</table>';
 }
 function bar(share) {
@@ -98,24 +126,31 @@ const renderers = {
         + '<h3 style="margin:16px 0 8px">services</h3>' + html;
     }
     if (d.unsatisfied.length) {
-      html = '<p class="warn">' + d.unsatisfied.length + ' unsatisfied inject(s)</p>' + html;
+      html = '<p class="warn" title="' + escAttr(TIPS.wants) + '">' + d.unsatisfied.length + ' unsatisfied inject(s) — these plugins wait forever unless a provider is added</p>' + html;
     }
     return html;
   },
   cost(d) {
     let html = '<p>~' + d.totalTokens + ' tokens: ' + d.toolCount + ' tool schema(s) ~' + d.toolTokens
       + ' + ' + d.sectionCount + ' prompt section(s) ~' + d.sectionTokens + '</p>';
+    if (d.owners && d.owners.length) {
+      html += '<h3 style="margin:12px 0 4px">by plugin</h3>'
+        + table(['plugin', 'sections', 'tools', 'tokens', 'share', ''], d.owners.map((o) =>
+          '<tr><td>' + (o.plugin === 'unattributed' ? '<span class="muted" title="' + escAttr(TIPS.unattributed) + '">unattributed</span>' : esc(o.plugin))
+          + '</td><td class="num">' + o.sections + '</td><td class="num">' + o.tools
+          + '</td><td class="num">~' + o.tokens + '</td><td class="num">' + o.share + '%</td><td>' + bar(o.share) + '</td></tr>'));
+    }
     if (d.sections.length) {
       html += '<h3 style="margin:12px 0 4px">prompt sections</h3>'
-        + table(['section', 'tokens', 'share', ''], d.sections.map((s) =>
-          '<tr><td>' + esc(s.name) + '</td><td class="num">~' + s.tokens + '</td><td class="num">'
+        + table(['section', 'owner', 'tokens', 'share', ''], d.sections.map((s) =>
+          '<tr><td>' + esc(s.name) + '</td><td class="muted">' + esc(s.owner ?? '—') + '</td><td class="num">~' + s.tokens + '</td><td class="num">'
           + s.share + '%</td><td>' + bar(s.share) + '</td></tr>'));
     } else {
       html += '<p class="muted">no prompt assembly observed yet — send one agent message first</p>';
     }
     html += '<h3 style="margin:12px 0 4px">tool schemas</h3>'
-      + table(['tool', 'tokens', 'share', ''], d.tools.map((t) =>
-        '<tr><td>' + esc(t.name) + '</td><td class="num">~' + t.tokens + '</td><td class="num">'
+      + table(['tool', 'owner', 'tokens', 'share', ''], d.tools.map((t) =>
+        '<tr><td>' + esc(t.name) + '</td><td class="muted">' + esc(t.owner ?? '—') + '</td><td class="num">~' + t.tokens + '</td><td class="num">'
         + t.share + '%</td><td>' + bar(t.share) + '</td></tr>'));
     return html;
   },
@@ -140,7 +175,7 @@ async function render() {
     const res = await fetch('/xray/api/' + active);
     if (!res.ok) throw new Error(await res.text());
     const data = await res.json();
-    content.innerHTML = renderers[active](data);
+    content.innerHTML = intro(active) + renderers[active](data);
     status.textContent = '';
   } catch (err) {
     status.innerHTML = '<span class="warn">' + esc(err.message) + '</span>';
@@ -165,9 +200,11 @@ function sendJson(response, code, value) {
 /**
  * Mount the panel routes. `views` supplies fresh data per request:
  * { summary, deps, health, cost, shadow } — each a () => object.
+ * `entry`, when supplied, answers /xray/api/entry?kind=section|tool&name=…
+ * with one entry's live text (computed per request, never persisted).
  * Returns the disposers webServer.register produced.
  */
-function mountPanel(webServer, views) {
+function mountPanel(webServer, views, entry) {
   const disposers = [];
   disposers.push(
     webServer.register({
@@ -207,6 +244,36 @@ function mountPanel(webServer, views) {
       }),
     );
   }
+  if (entry) {
+    disposers.push(
+      webServer.register({
+        kind: 'exact',
+        path: '/xray/api/entry',
+        handler: (request, response) => {
+          if (request.method !== 'GET') {
+            response.writeHead(405, { allow: 'GET' });
+            response.end();
+            return;
+          }
+          const params = new URL(request.url ?? '/', 'http://x').searchParams;
+          const kind = params.get('kind');
+          const name = params.get('name');
+          if ((kind !== 'section' && kind !== 'tool') || !name) {
+            sendJson(response, 400, { error: 'expected ?kind=section|tool&name=<entry name>' });
+            return;
+          }
+          try {
+            const value = entry(kind, name);
+            if (value === null)
+              sendJson(response, 404, { error: `no live ${kind} named "${name}"` });
+            else sendJson(response, 200, value);
+          } catch (err) {
+            sendJson(response, 500, { error: err.message });
+          }
+        },
+      }),
+    );
+  }
   return disposers;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-xray",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "X-ray for your DeepSeek Harness — see what's actually loaded, why, and what it costs you.",
   "repository": {
     "type": "git",
@@ -62,6 +62,7 @@
       "platform": "web",
       "inject": [
         "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-locale",
         "@deepseek-ai/dsh-client-ui-slots",
         "@deepseek-ai/dsh-client-ui-conversation"
       ]