@agimon-ai/doompi-log 0.0.1-alpha.49 → 0.0.1-alpha.50

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agimon-ai/doompi-log",
3
- "version": "0.0.1-alpha.49",
3
+ "version": "0.0.1-alpha.50",
4
4
  "description": "Pi session metrics, findings, sink status, and a Log Metrics overlay for agent observability.",
5
5
  "keywords": [
6
6
  "agent-observability",
@@ -78,11 +78,11 @@
78
78
  "@agimon-ai/log-sink-mcp": "0.29.19",
79
79
  "@deepseek-ai/cordis": "4.0.1",
80
80
  "hono": "4.13.5",
81
- "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.48",
82
- "@agimon-ai/doompi-telemetry": "0.0.1-alpha.48",
83
- "@agimon-ai/doompi-web-components": "0.0.1-alpha.9",
84
- "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.12",
85
- "@agimon-ai/doompi-web-security": "0.0.1-alpha.10"
81
+ "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.49",
82
+ "@agimon-ai/doompi-web-components": "0.0.1-alpha.10",
83
+ "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.13",
84
+ "@agimon-ai/doompi-telemetry": "0.0.1-alpha.49",
85
+ "@agimon-ai/doompi-web-security": "0.0.1-alpha.11"
86
86
  },
87
87
  "devDependencies": {
88
88
  "@earendil-works/pi-coding-agent": "0.84.4",
@@ -96,7 +96,7 @@
96
96
  "tsdown": "0.22.14",
97
97
  "typescript": "7.0.2",
98
98
  "vitest": "4.1.11",
99
- "@agimon-ai/doompi-ui": "0.0.1-alpha.49"
99
+ "@agimon-ai/doompi-ui": "0.0.1-alpha.50"
100
100
  },
101
101
  "peerDependencies": {
102
102
  "@earendil-works/pi-coding-agent": "0.84.4",
@@ -101,6 +101,15 @@ export function MetricsReportView({ report, onFocus }: MetricsReportViewProps) {
101
101
  consumption
102
102
  </span>
103
103
  <table className="w-full text-[10px]" data-testid="metrics-tools">
104
+ {/* Without heads the two right columns are just numbers; "1006" and
105
+ "325.9k" do not say which is a call count and which is tokens. */}
106
+ <thead>
107
+ <tr className="text-[9px] text-doom-faint/70">
108
+ <th className="py-1 text-left font-normal">tool</th>
109
+ <th className="w-20 py-1 text-right font-normal">calls</th>
110
+ <th className="w-20 py-1 text-right font-normal">tokens</th>
111
+ </tr>
112
+ </thead>
104
113
  <tbody>
105
114
  {report.tools.map((tool) => (
106
115
  <tr key={tool.name} className="border-b border-doom-border/40">
@@ -24,50 +24,60 @@ export function GroupBars({ groups, focus, onFocus }: GroupBarsProps) {
24
24
  const max = seriesMax(groups.map((group) => group.totalTokens));
25
25
 
26
26
  return (
27
- <ul className="flex flex-col gap-[3px]" data-testid="metrics-group-bars">
28
- {groups.map((group) => {
29
- const width = `${(barFraction(group.totalTokens, max) * 100).toFixed(2)}%`;
30
- const selected = focus === group.key;
31
- const row = (
32
- <>
33
- <span className="min-w-0 flex-1 truncate text-left text-doom-dim">{group.key}</span>
34
- <span className="w-14 shrink-0 text-right text-doom-hi">{formatTokens(group.totalTokens)}</span>
35
- <span className="w-10 shrink-0 text-right">
36
- {group.issueCount === 0 ? (
37
- <span className="text-doom-faint/50">ok</span>
38
- ) : (
39
- <span className="text-doom-red">{group.issueCount}</span>
40
- )}
41
- </span>
42
- </>
43
- );
27
+ <div className="flex flex-col gap-[3px]">
28
+ {/* The two right-hand columns were bare numbers. A row reading "11.0M 12"
29
+ gave no way to know the second figure counted issues. Same widths and
30
+ padding as a row, so the heads sit over their own columns. */}
31
+ <div aria-hidden className="flex items-center gap-2 px-1 text-[9px] text-doom-faint/70">
32
+ <span className="min-w-0 flex-1" />
33
+ <span className="w-14 shrink-0 text-right">tokens</span>
34
+ <span className="w-10 shrink-0 text-right">issues</span>
35
+ </div>
36
+ <ul className="flex flex-col gap-[3px]" data-testid="metrics-group-bars">
37
+ {groups.map((group) => {
38
+ const width = `${(barFraction(group.totalTokens, max) * 100).toFixed(2)}%`;
39
+ const selected = focus === group.key;
40
+ const row = (
41
+ <>
42
+ <span className="min-w-0 flex-1 truncate text-left text-doom-dim">{group.key}</span>
43
+ <span className="w-14 shrink-0 text-right text-doom-hi">{formatTokens(group.totalTokens)}</span>
44
+ <span className="w-10 shrink-0 text-right">
45
+ {group.issueCount === 0 ? (
46
+ <span className="text-doom-faint/50">ok</span>
47
+ ) : (
48
+ <span className="text-doom-red">{group.issueCount}</span>
49
+ )}
50
+ </span>
51
+ </>
52
+ );
44
53
 
45
- return (
46
- <li key={group.key} className="relative">
47
- {/* The bar is behind the text rather than beside it, so a long
54
+ return (
55
+ <li key={group.key} className="relative">
56
+ {/* The bar is behind the text rather than beside it, so a long
48
57
  model name keeps its full width instead of competing with the
49
58
  track for horizontal space. */}
50
- <span
51
- aria-hidden="true"
52
- className={`absolute inset-y-0 left-0 rounded-[2px] ${selected ? 'bg-doom-blue/30' : 'bg-doom-blue/15'}`}
53
- style={{ width }}
54
- />
55
- {onFocus === undefined ? (
56
- <span className="relative flex items-center gap-2 px-1 py-[3px] text-[10px]">{row}</span>
57
- ) : (
58
- <button
59
- type="button"
60
- onClick={() => onFocus(selected ? '' : group.key)}
61
- aria-pressed={selected}
62
- data-testid={`metrics-group-${group.key}`}
63
- className="relative flex w-full items-center gap-2 rounded-[2px] px-1 py-[3px] text-[10px] hover:bg-doom-tint focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue"
64
- >
65
- {row}
66
- </button>
67
- )}
68
- </li>
69
- );
70
- })}
71
- </ul>
59
+ <span
60
+ aria-hidden="true"
61
+ className={`absolute inset-y-0 left-0 rounded-[2px] ${selected ? 'bg-doom-blue/30' : 'bg-doom-blue/15'}`}
62
+ style={{ width }}
63
+ />
64
+ {onFocus === undefined ? (
65
+ <span className="relative flex items-center gap-2 px-1 py-[3px] text-[10px]">{row}</span>
66
+ ) : (
67
+ <button
68
+ type="button"
69
+ onClick={() => onFocus(selected ? '' : group.key)}
70
+ aria-pressed={selected}
71
+ data-testid={`metrics-group-${group.key}`}
72
+ className="relative flex w-full items-center gap-2 rounded-[2px] px-1 py-[3px] text-[10px] hover:bg-doom-tint focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue"
73
+ >
74
+ {row}
75
+ </button>
76
+ )}
77
+ </li>
78
+ );
79
+ })}
80
+ </ul>
81
+ </div>
72
82
  );
73
83
  }