zzg
bf955e5ca4
You asked whether insights could run against a local model, and the answer changes the calculus. I had assessed the Anthropic API, which needs a credential and sends data off the machine, and embedding a model in the binary, which costs ~90MB and a dependency. An already-running local server has none of those: no credential, no per-call cost, nothing leaving the machine, and nothing beyond the standard library talking to localhost. My "no LLM" conclusion was right for the options I had in view and stated too broadly. Discovers Ollama, LM Studio, or llama.cpp by probing OLLAMA_HOST, FATHOM_LOCAL_MODEL_URL, then the three default ports, with a short timeout. Finding nothing is the ordinary case, not an error: there is no warning, no configuration required, and the tab behaves exactly as it did. Used for two things: - Grouping prompts by meaning rather than shared vocabulary. MinHash has a provable blind spot -- "diagnose the intermittent failure" and "fix the flaky test" mean the same thing and share no words -- and embeddings close it. This does affect what gets found, so the method used is shown on every clustered finding and MinHash is the fallback on any failure. - Naming a group, so a finding reads "Flaky test triage - asked 10 times" rather than "You asked for much the same thing 10 times". This was the one gap I identified as needing semantics and dismissed as not worth a dependency; at zero cost it is worth it. The line the model does not cross: it may write a phrase, never a number. Detection stays entirely heuristic, so occurrence counts, costs, and the evidence behind them are identical with or without it. A model that could invent an occurrence count would poison the only thing making this tab worth trusting. Tests assert the numbers survive labelling, that a failed or rambling label leaves the heuristic title in place, and that sequence findings are never sent for naming since their steps already name them. cleanLabel absorbs what small models actually do -- preambles, reasoning blocks, quotes, "Common theme:" prefixes -- and rejects anything sentence-shaped, because a missing label costs polish while a rambling one would be shown as fact. Verified end to end against a stand-in server: findings went from "You asked for much the same thing 10 times" to "Endpoint pagination work - asked 10 times", with the counts unchanged. Verified the toggle reverts detection to lexical rather than only changing the wording, and that killing the model server leaves the tab working with no warning.
143 lines
4.8 KiB
HTML
143 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Fathom</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='26' font-size='26'>🔭</text></svg>">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topbar">
|
|
<a class="brand" href="#/traces">
|
|
<span class="brand-mark"></span>
|
|
<span class="brand-name">Fathom</span>
|
|
</a>
|
|
|
|
<nav class="tabs">
|
|
<a href="#/traces" data-tab="traces">Traces</a>
|
|
<a href="#/explore" data-tab="explore">Explore</a>
|
|
<a href="#/insights" data-tab="insights">Insights<span class="tab-count" id="insight-count" hidden></span></a>
|
|
</nav>
|
|
|
|
<div class="topbar-right">
|
|
<div class="range" id="range-picker">
|
|
<button class="range-btn" data-range="900000000">15m</button>
|
|
<button class="range-btn" data-range="3600000000">1h</button>
|
|
<button class="range-btn" data-range="21600000000">6h</button>
|
|
<button class="range-btn is-active" data-range="86400000000">24h</button>
|
|
<button class="range-btn" data-range="604800000000">7d</button>
|
|
</div>
|
|
<span class="live-dot is-connecting" id="live-dot" title="Connecting to the trace stream…"></span>
|
|
<button class="icon-btn" id="theme-toggle" title="Toggle light / dark" aria-label="Toggle light or dark theme">◐</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============ TRACE LIST ============ -->
|
|
<main id="view-traces" class="view">
|
|
<div class="list-controls">
|
|
<input id="search" type="search" placeholder="Filter by prompt, name, model, or trace id…" autocomplete="off" spellcheck="false">
|
|
<div class="seg" id="status-filter">
|
|
<button class="is-active" data-status="">All</button>
|
|
<button data-status="error">Errors</button>
|
|
</div>
|
|
<span class="scan-note" id="list-scan"></span>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table class="traces">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-when">When</th>
|
|
<th class="col-what">Trace</th>
|
|
<th class="col-num">Duration</th>
|
|
<th class="col-shape">Shape</th>
|
|
<th class="col-num">Tokens</th>
|
|
<th class="col-num">Cost</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="trace-rows"></tbody>
|
|
</table>
|
|
<div id="list-empty" class="empty" hidden></div>
|
|
</div>
|
|
<button class="new-pill" id="new-pill" hidden></button>
|
|
</main>
|
|
|
|
<!-- ============ TRACE DETAIL ============ -->
|
|
<main id="view-trace" class="view" hidden>
|
|
<div class="detail-head">
|
|
<button class="back" id="back-btn">← Traces</button>
|
|
<div class="detail-title">
|
|
<h1 id="detail-name">—</h1>
|
|
<div class="detail-meta" id="detail-meta"></div>
|
|
</div>
|
|
<div class="detail-stats" id="detail-stats"></div>
|
|
</div>
|
|
|
|
<div class="detail-body">
|
|
<section class="waterfall-pane">
|
|
<div class="pane-head">
|
|
<span class="pane-title">Span tree</span>
|
|
<div class="legend" id="legend"></div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="merge-wrappers" checked>
|
|
<span>Fold wrappers</span>
|
|
</label>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="only-content">
|
|
<span>Only with content</span>
|
|
</label>
|
|
</div>
|
|
<div class="timeaxis" id="timeaxis"></div>
|
|
<div class="waterfall" id="waterfall" tabindex="0"></div>
|
|
</section>
|
|
|
|
<section class="inspector" id="inspector">
|
|
<div class="inspector-empty">Select a span to inspect it.</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- ============ EXPLORE ============ -->
|
|
<main id="view-explore" class="view" hidden>
|
|
<div class="explore-head">
|
|
<textarea id="query-input" spellcheck="false" rows="4"></textarea>
|
|
<div class="explore-actions">
|
|
<button class="primary" id="run-query">Run</button>
|
|
<span class="hint">⌘⏎ to run</span>
|
|
<span class="scan-note" id="query-scan"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="examples" id="examples"></div>
|
|
<div class="query-error" id="query-error" hidden></div>
|
|
|
|
<div class="chart-wrap" id="chart-wrap" hidden>
|
|
<svg id="chart" role="img" aria-label="Query result chart"></svg>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table class="results">
|
|
<thead id="result-head"></thead>
|
|
<tbody id="result-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- ============ INSIGHTS ============ -->
|
|
<main id="view-insights" class="view" hidden>
|
|
<div class="insights-head">
|
|
<div class="insights-summary" id="insights-summary"></div>
|
|
<div class="local-status" id="local-status" hidden></div>
|
|
<button class="back" id="restore-insights" hidden>Show dismissed</button>
|
|
</div>
|
|
<div class="insights-body" id="insights-body"></div>
|
|
</main>
|
|
|
|
<div id="toast" class="toast" hidden></div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|