Add contextual "?" help icons linking into Docs (ticket 021)

New HelpIcon component + a DocsNavProvider context (webapp/src/lib/docsNav.tsx)
let any component request "open Docs to section X", bumping a nonce each
time so a repeat click re-triggers even if Docs is already open to that
section. NavMenu forwards that request into DocsPanel as a `target` prop,
which expands the right accordion section, scrolls it into view, and
flashes it (a brief accent-tinted background/border, settling back after
1.2s) — verified visually with a live server + Playwright. Opening Docs via
the plain NavMenu button explicitly clears any pending target, so that path
is unchanged: no forced section, no flash.

Added a "?" icon to FilterBar, LogTimeline, LogPreview, Metrics, Dashboards,
and NavMenu's own Settings/Presets panels, plus new Docs sections for
Timeline, Log preview, Settings, and Presets (previously undocumented).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-05 15:49:49 +01:00
co-authored by Claude Sonnet 5
parent ce711ab70e
commit abc061a7b1
10 changed files with 206 additions and 20 deletions
+3 -1
View File
@@ -4,6 +4,7 @@ import {
metricPrimitiveToDisplayString,
type LogEntry,
} from '../lib/api'
import { HelpIcon } from './HelpIcon'
/// localStorage key for LogPreview's selected param columns. Namespaced
/// under `ottyl.` since this is the app's first localStorage usage — kept
@@ -126,7 +127,8 @@ export function LogPreview({ logs }: { logs: LogEntry[] }) {
return (
<div className="flex flex-1 flex-col overflow-hidden">
<div className="flex justify-end border-b border-border-faint px-3 py-1">
<div className="flex items-center justify-between border-b border-border-faint px-3 py-1">
<HelpIcon sectionId="log-preview" label="Help: Log preview" />
<ColumnPicker paramNames={paramNames} visible={visible} onToggle={toggleColumn} />
</div>
<div className="flex-1 overflow-auto">