diff --git a/frontend/index.html b/frontend/index.html index dba1577..47991e6 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -39,6 +39,71 @@
+ +
+
+

AgentXRay — read the session logs your AI coding agents already write

+

+ AgentXRay is a local-first web dashboard that reads and visualizes the session logs your AI + coding agents already write to disk, for developers who want to see what those agents + actually did. It is a single Node.js + Express server plus this React UI, pointed at the log + directories your existing agent CLIs already use. It is a reader, not a tracing SDK: there + is nothing to instrument, no API key, no hosted backend, and no data leaves the machine it + runs on. +

+

Agent log formats it reads

+

+ Seven on-disk session-log formats have a registered adapter and are normalized into a single + model, so one interface covers every agent you run: +

+ +

+ Six of the seven store JSONL; Hermes stores SQLite. The authoritative list is the + PLATFORMS registry in lib/platforms/index.js, and adding a format + takes one adapter file plus one line in that table. +

+

The per-turn ledger

+

+ Each session is replayed as a turn-by-turn transcript. Tool calls are paired with the + results they returned, so any call expands to show its arguments and its output. Token + usage and cost are summed per user turn, and a turn's elapsed time is split into model + inference versus tool execution — so a slow turn tells you whether the model was thinking + or a tool was blocking. Around that sit aggregate analytics over tool calls, error clusters + and token spend, the real human prompts recovered from the logs (including ones from + sessions an agent's own cleanup has already deleted), full-text search across every + platform at once, and a prompt library that installs the keepers as native slash commands. +

+

Install

+

Run it from npm without installing anything, then open the port it prints:

+ 
npx @alloevil/agent-xray
+# then open http://localhost:3800
+

+ Requires Node.js 22.13 or newer. MIT licensed. This GitHub Pages page is a demo build + running against synthetic sample logs committed in the repository — it contains no real + sessions, so treat it as a UI tour. Run the command above to point it at your own. +

+ +
+
diff --git a/frontend/src/index.css b/frontend/src/index.css index 6db1b21..657c7d8 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -51,17 +51,69 @@ * { @apply border-border; } - html, - body, - #root { + html { height: 100%; } body { - @apply text-foreground font-sans antialiased overflow-hidden; + min-height: 100%; + } + /* + * The dashboard still owns exactly one viewport; the page scrolls past it to + * reach the static #about section that lives after #root in index.html. + * Scroll chaining is left at the default on purpose: `overscroll-behavior: + * contain` on the inner panes blocks the chain even when a pane has nothing + * to scroll, which traps the wheel over most of the dashboard and makes + * #about unreachable by the one gesture a visitor will actually try. + */ + #root { + height: 100vh; + height: 100dvh; + } + body { + @apply text-foreground font-sans antialiased; /* legacy background: two radial glows over --bg */ background: radial-gradient(circle at top left, rgba(31, 111, 235, 0.14), transparent 28%), radial-gradient(circle at bottom right, rgba(35, 134, 54, 0.12), transparent 30%), hsl(var(--background)); + background-attachment: fixed; + } +} + +/* + * Static "About AgentXRay" section. Its markup lives in index.html, after + * #root, so React cannot own it and neither can a component stylesheet. + */ +@layer components { + #about { + @apply border-t border-border px-6 py-10 text-sm leading-relaxed text-muted-foreground; + background: hsl(var(--panel-alt)); + } + #about > div { + @apply mx-auto flex max-w-3xl flex-col gap-4; + } + #about h2 { + @apply text-lg font-semibold text-foreground; + } + #about h3 { + @apply pt-2 text-base font-semibold text-foreground; + } + #about ul { + @apply grid gap-1 sm:grid-cols-2; + } + #about code { + @apply rounded bg-secondary px-1 py-0.5 font-mono text-xs text-foreground; + } + #about pre { + @apply overflow-x-auto rounded border border-border bg-card p-3 font-mono text-xs; + } + #about pre code { + @apply bg-transparent p-0; + } + #about a { + @apply text-primary underline-offset-2 hover:underline; + } + #about footer { + @apply flex flex-wrap gap-x-4 gap-y-1 border-t border-border pt-4; } }