@agimon-ai/doompi-log 0.0.1-alpha.67 → 0.0.1-alpha.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-log",
-  "version": "0.0.1-alpha.67",
+  "version": "0.0.1-alpha.69",
   "description": "Pi session metrics, findings, sink status, and a Log Metrics overlay for agent observability.",
   "keywords": [
     "agent-observability",
@@ -31,7 +31,8 @@
     "src/web",
     "src/exports/webClient.ts",
     "src/types/webMetrics.ts",
-    "src/types/issueGrouping.ts"
+    "src/types/issueGrouping.ts",
+    "!src/web/**/*.stories.tsx"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -78,11 +79,11 @@
     "@agimon-ai/log-sink-mcp": "0.29.19",
     "@deepseek-ai/cordis": "4.0.2",
     "hono": "4.13.5",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.66",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.65",
-    "@agimon-ai/doompi-web-security": "0.0.1-alpha.28",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.29",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.26"
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.68",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.31",
+    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.67",
+    "@agimon-ai/doompi-web-security": "0.0.1-alpha.30",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.28"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1",
@@ -93,10 +94,11 @@
     "@types/react": "19.2.18",
     "@vitest/coverage-v8": "5.0.0",
     "react": "19.2.8",
+    "react-dom": "19.2.8",
     "tsdown": "0.23.0",
     "typescript": "7.0.2",
     "vitest": "5.0.0",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.67"
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.69"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1",

package/src/web/components/IssuesDetail.tsx

@@ -40,13 +40,13 @@ function IssueRow({ group, max, tools }: IssueRowProps) {
   return (
     <li className="flex flex-col">
       <div className="relative">
-        <span aria-hidden="true" className="absolute inset-y-0 left-0 rounded-[2px] bg-doom-red/20" style={{ width }} />
+        <span aria-hidden="true" className="absolute inset-y-0 left-0 rounded-xs bg-doom-red/20" style={{ width }} />
         <button
           type="button"
           onClick={() => setOpen(!open)}
           aria-expanded={open}
           data-testid={`metrics-issue-${group.key}`}
-          className="relative flex w-full items-center gap-2 rounded-[2px] px-1 py-[3px] text-left text-[10px] hover:bg-doom-tint focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue"
+          className="relative flex w-full items-center gap-2 rounded-xs px-1 py-[3px] text-left text-xs hover:bg-doom-tint focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue"
         >
           <span className="w-8 shrink-0 text-right font-bold text-doom-red">{group.occurrences}</span>
           <span className="w-24 shrink-0 truncate text-doom-hi">{titleOf(group)}</span>
@@ -56,8 +56,8 @@ function IssueRow({ group, max, tools }: IssueRowProps) {
       </div>
 
       {open ? (
-        <div className="flex flex-col gap-1 px-2 py-2 text-[10px]" data-testid={`metrics-issue-body-${group.key}`}>
-          <div className="flex flex-wrap gap-x-3 gap-y-1 text-[9px] text-doom-faint">
+        <div className="flex flex-col gap-1 px-2 py-2 text-xs" data-testid={`metrics-issue-body-${group.key}`}>
+          <div className="flex flex-wrap gap-x-3 gap-y-1 text-2xs text-doom-faint">
             <span>category {group.category}</span>
             {group.tool === null ? null : <span>tool {group.tool}</span>}
             {group.errorType === null ? null : <span>error {group.errorType}</span>}
@@ -67,7 +67,7 @@ function IssueRow({ group, max, tools }: IssueRowProps) {
             <span>last seen {group.lastSeen}</span>
           </div>
           <span className="break-words text-doom-dim">{group.detail}</span>
-          <ul className="flex flex-col gap-[1px] text-[9px] text-doom-faint">
+          <ul className="flex flex-col gap-[1px] text-2xs text-doom-faint">
             {group.members.map((member, index) => (
               <li key={`${member.timestamp}-${String(index)}`} className="flex flex-wrap gap-x-2">
                 <span>{member.timestamp}</span>
@@ -99,7 +99,7 @@ export function IssuesDetail({ view, tools }: IssuesDetailProps) {
 
   return (
     <div className="flex flex-col gap-3">
-      <span className="text-[10px] text-doom-dim">
+      <span className="text-xs text-doom-dim">
         <span className="text-doom-hi">{view.totalIssues}</span> occurrences of{' '}
         <span className="text-doom-hi">{groups.length}</span> distinct problems, worst first
       </span>
@@ -113,8 +113,8 @@ export function IssuesDetail({ view, tools }: IssuesDetailProps) {
       )}
 
       <div className="flex flex-col gap-1">
-        <span className="text-[9px] font-bold text-doom-faint">failures by tool</span>
-        <table className="w-full text-[10px]" data-testid="metrics-issues-tools">
+        <span className="text-2xs font-bold text-doom-faint">failures by tool</span>
+        <table className="w-full text-xs" data-testid="metrics-issues-tools">
           <tbody>
             {countRows(view.byTool).map(([name, failures]) => {
               const calls = callsByTool.get(name);
@@ -134,8 +134,8 @@ export function IssuesDetail({ view, tools }: IssuesDetailProps) {
         </table>
       </div>
 
-      <div className="flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-doom-dim">
-        <span className="text-[9px] font-bold text-doom-faint">by category</span>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-doom-dim">
+        <span className="text-2xs font-bold text-doom-faint">by category</span>
         {countRows(view.byCategory).map(([name, count]) => (
           <span key={name}>
             {name} <span className="text-doom-hi">{count}</span>

package/src/web/components/IssuesSection.tsx

@@ -50,14 +50,14 @@ export function IssuesSection({ tools, focus }: IssuesSectionProps) {
   return (
     <section className="flex flex-col gap-1" data-testid="metrics-issues">
       <div className="flex items-center gap-2">
-        <span className="text-[9px] font-bold text-doom-faint">issues</span>
+        <span className="text-2xs font-bold text-doom-faint">issues</span>
         {open ? null : (
-          <Button variant="ghost" size="xs" className="text-[9px]" onClick={load} data-testid="metrics-issues-open">
+          <Button variant="ghost" size="xs" className="text-2xs" onClick={load} data-testid="metrics-issues-open">
             show detail
           </Button>
         )}
         {open && !loading ? (
-          <Button variant="ghost" size="xs" className="text-[9px]" onClick={load} data-testid="metrics-issues-reload">
+          <Button variant="ghost" size="xs" className="text-2xs" onClick={load} data-testid="metrics-issues-reload">
             reload
           </Button>
         ) : null}
@@ -66,13 +66,13 @@ export function IssuesSection({ tools, focus }: IssuesSectionProps) {
       {/* Reading this scans the whole window in a subprocess, so the reader is
           told why it is behind a click rather than left wondering. */}
       {open ? null : (
-        <span className="text-[9px] text-doom-faint/70">
+        <span className="text-2xs text-doom-faint/70">
           the log sink has no issues endpoint, so this is read separately and takes a moment
         </span>
       )}
 
       {message === '' ? null : (
-        <span className="text-[10px] text-doom-yellow" data-testid="metrics-issues-message">
+        <span className="text-xs text-doom-yellow" data-testid="metrics-issues-message">
           {message}
         </span>
       )}

package/src/web/components/MetricsNotice.tsx

@@ -39,19 +39,19 @@ export function FocusNotice({ requested, applied, dimension, onClear }: FocusNot
     // whole numbers. Saying "showing model X" over them would be a lie, so the
     // drill-down is reported as refused instead.
     return (
-      <span className="text-[10px] text-doom-yellow" data-testid="metrics-focus-refused">
+      <span className="text-xs text-doom-yellow" data-testid="metrics-focus-refused">
         this log sink does not support narrowing by {DIMENSION_LABELS[dimension]}, so the numbers below are still
         everything
-        <Button variant="ghost" size="xs" className="ml-2 text-[9px]" onClick={onClear}>
+        <Button variant="ghost" size="xs" className="ml-2 text-2xs" onClick={onClear}>
           clear
         </Button>
       </span>
     );
   }
   return (
-    <span className="text-[10px] text-doom-dim" data-testid="metrics-focus">
+    <span className="text-xs text-doom-dim" data-testid="metrics-focus">
       narrowed to <span className="text-doom-hi">{applied}</span>
-      <Button variant="ghost" size="xs" className="ml-2 text-[9px]" onClick={onClear}>
+      <Button variant="ghost" size="xs" className="ml-2 text-2xs" onClick={onClear}>
         clear
       </Button>
     </span>

package/src/web/components/MetricsPanel.tsx

@@ -73,7 +73,7 @@ export function MetricsPanel(_props: SettingsPanelProps) {
             setDimension(next as MetricsDimension);
           }}
         >
-          <SelectTrigger data-testid="metrics-dimension" className="w-[140px] text-[10px]">
+          <SelectTrigger data-testid="metrics-dimension" className="w-[140px] text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -85,7 +85,7 @@ export function MetricsPanel(_props: SettingsPanelProps) {
           </SelectContent>
         </Select>
         <Select value={period} onValueChange={(next) => setPeriod(next as MetricsPeriod)}>
-          <SelectTrigger data-testid="metrics-period" className="w-[110px] text-[10px]">
+          <SelectTrigger data-testid="metrics-period" className="w-[110px] text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -100,7 +100,7 @@ export function MetricsPanel(_props: SettingsPanelProps) {
         <Button
           variant="ghost"
           size="xs"
-          className="ml-auto text-[9px]"
+          className="ml-auto text-2xs"
           onClick={() => setPeriod((current) => current)}
           disabled={loading}
         >
@@ -109,7 +109,7 @@ export function MetricsPanel(_props: SettingsPanelProps) {
       </div>
 
       {error === '' ? null : (
-        <span className="text-[10px] text-doom-red" data-testid="metrics-error">
+        <span className="text-xs text-doom-red" data-testid="metrics-error">
           {error}
         </span>
       )}

package/src/web/components/MetricsReportView.tsx

@@ -39,7 +39,7 @@ export function MetricsReportView({ report, onFocus }: MetricsReportViewProps) {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-1">
-        <div className="flex flex-wrap items-center gap-3 text-[10px] text-doom-dim">
+        <div className="flex flex-wrap items-center gap-3 text-xs text-doom-dim">
           <span>
             <span className="text-doom-hi">{formatTokens(report.totals.totalTokens)}</span> total
           </span>
@@ -70,41 +70,41 @@ export function MetricsReportView({ report, onFocus }: MetricsReportViewProps) {
             beside it without this line reads as a breakdown that does not
             add up, which is worse than not showing them.
           */}
-        <span className="text-[9px] text-doom-faint/70">
+        <span className="text-2xs text-doom-faint/70">
           total is what the providers reported and is dominated by cache traffic; the parts beside it are counted
           separately and do not sum to it
         </span>
       </div>
 
       <section className="flex flex-col gap-1">
-        <span className="text-[9px] font-bold text-doom-faint">tokens over time</span>
+        <span className="text-2xs font-bold text-doom-faint">tokens over time</span>
         <TimelineChart buckets={report.timeline} bucketUnit={report.bucketUnit} />
       </section>
 
       <section className="flex flex-col gap-1">
-        <span className="text-[9px] font-bold text-doom-faint">tokens by {DIMENSION_LABELS[report.dimension]}</span>
+        <span className="text-2xs font-bold text-doom-faint">tokens by {DIMENSION_LABELS[report.dimension]}</span>
         {DIMENSION_NOTES[report.dimension] === undefined ? null : (
-          <span className="text-[9px] text-doom-faint/70">{DIMENSION_NOTES[report.dimension]}</span>
+          <span className="text-2xs text-doom-faint/70">{DIMENSION_NOTES[report.dimension]}</span>
         )}
         <GroupBars groups={report.groups} focus={report.focus} onFocus={onFocus} />
       </section>
 
       <section className="flex flex-col gap-1">
-        <span className="text-[9px] font-bold text-doom-faint">tool calls</span>
+        <span className="text-2xs font-bold text-doom-faint">tool calls</span>
         {/*
             The token column is a ranking hint, not a measurement. The sink
             attributes a turn's whole total to every tool that ran in that
             turn, so saying otherwise here would be a lie the chart repeats.
           */}
-        <span className="text-[9px] text-doom-faint/70">
+        <span className="text-2xs text-doom-faint/70">
           call counts are exact; the token column ranks tools by the turns they ran in, and is not each tool&apos;s own
           consumption
         </span>
-        <table className="w-full text-[10px]" data-testid="metrics-tools">
+        <table className="w-full text-xs" data-testid="metrics-tools">
           {/* Without heads the two right columns are just numbers; "1006" and
               "325.9k" do not say which is a call count and which is tokens. */}
           <thead>
-            <tr className="text-[9px] text-doom-faint/70">
+            <tr className="text-2xs text-doom-faint/70">
               <th className="py-1 text-left font-normal">tool</th>
               <th className="w-20 py-1 text-right font-normal">calls</th>
               <th className="w-20 py-1 text-right font-normal">tokens</th>
@@ -124,7 +124,7 @@ export function MetricsReportView({ report, onFocus }: MetricsReportViewProps) {
 
       <IssuesSection tools={report.tools} focus={report.dimension === 'session' ? report.focus : undefined} />
 
-      <span className="text-[9px] text-doom-faint/70" data-testid="metrics-provenance">
+      <span className="text-2xs text-doom-faint/70" data-testid="metrics-provenance">
         read over {report.transport ?? 'an unreported transport'} · generated {report.generatedAt}
       </span>
     </div>

package/src/web/components/charts/GroupBars.tsx

@@ -28,7 +28,7 @@ export function GroupBars({ groups, focus, onFocus }: GroupBarsProps) {
       {/* The two right-hand columns were bare numbers. A row reading "11.0M  12"
           gave no way to know the second figure counted issues. Same widths and
           padding as a row, so the heads sit over their own columns. */}
-      <div aria-hidden className="flex items-center gap-2 px-1 text-[9px] text-doom-faint/70">
+      <div aria-hidden className="flex items-center gap-2 px-1 text-2xs text-doom-faint/70">
         <span className="min-w-0 flex-1" />
         <span className="w-14 shrink-0 text-right">tokens</span>
         <span className="w-10 shrink-0 text-right">issues</span>
@@ -58,18 +58,18 @@ export function GroupBars({ groups, focus, onFocus }: GroupBarsProps) {
                 track for horizontal space. */}
               <span
                 aria-hidden="true"
-                className={`absolute inset-y-0 left-0 rounded-[2px] ${selected ? 'bg-doom-blue/30' : 'bg-doom-blue/15'}`}
+                className={`absolute inset-y-0 left-0 rounded-xs ${selected ? 'bg-doom-blue/30' : 'bg-doom-blue/15'}`}
                 style={{ width }}
               />
               {onFocus === undefined ? (
-                <span className="relative flex items-center gap-2 px-1 py-[3px] text-[10px]">{row}</span>
+                <span className="relative flex items-center gap-2 px-1 py-[3px] text-xs">{row}</span>
               ) : (
                 <button
                   type="button"
                   onClick={() => onFocus(selected ? '' : group.key)}
                   aria-pressed={selected}
                   data-testid={`metrics-group-${group.key}`}
-                  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"
+                  className="relative flex w-full items-center gap-2 rounded-xs px-1 py-[3px] text-xs hover:bg-doom-tint focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue"
                 >
                   {row}
                 </button>

package/src/web/components/charts/TimelineChart.tsx

@@ -62,7 +62,7 @@ export function TimelineChart({ buckets, bucketUnit }: TimelineChartProps) {
           );
         })}
       </svg>
-      <div className="flex flex-wrap justify-between gap-x-3 text-[9px] text-doom-faint">
+      <div className="flex flex-wrap justify-between gap-x-3 text-2xs text-doom-faint">
         <span>{buckets[0]?.label ?? ''}</span>
         {buckets.length > 1 ? <span>peak {formatTokens(max)}</span> : null}
         <span>