Improve focus visibility and semantics on the bundled MCP docs page
Summary: The server-generated MCP documentation HTML (served by core over HTTP) needs keyboard focus styles and sensible headings—not the CLI widget templates.
Where to change (required): typescript/packages/core/src/core/transports/streamable-http.ts — inside generateDocumentationPage, add rules to the inline <style> block and adjust markup only if needed for semantics.
Explicitly out of scope for this issue: Styling scaffolded apps under typescript/packages/cli/templates/** (e.g. typescript-oauth, typescript-starter widget globals.css). Those are separate apps; improving them is welcome as a different issue or PR without closing this one.
Background: Footer links (<a href="https://nitrostack.ai">) and collapsible tool schemas (<details><summary>) rely on browser default focus rings, which are inconsistent. Section titles use leading emoji (<h2>🛠️ Available Tools</h2>); ensure heading levels remain a logical outline (emoji as decorative, not a substitute for h2).
Acceptance criteria:
Suggested labels: visuals, accessibility, good first issue
Source: docs/STARTER_ISSUES_REVIEW.md — edit in-repo first, then sync GitHub issues if needed.
Improve focus visibility and semantics on the bundled MCP docs page
Summary: The server-generated MCP documentation HTML (served by core over HTTP) needs keyboard focus styles and sensible headings—not the CLI widget templates.
Where to change (required):
typescript/packages/core/src/core/transports/streamable-http.ts— insidegenerateDocumentationPage, add rules to the inline<style>block and adjust markup only if needed for semantics.Explicitly out of scope for this issue: Styling scaffolded apps under
typescript/packages/cli/templates/**(e.g.typescript-oauth,typescript-starterwidgetglobals.css). Those are separate apps; improving them is welcome as a different issue or PR without closing this one.Background: Footer links (
<a href="https://nitrostack.ai">) and collapsible tool schemas (<details><summary>) rely on browser default focus rings, which are inconsistent. Section titles use leading emoji (<h2>🛠️ Available Tools</h2>); ensure heading levels remain a logical outline (emoji as decorative, not a substitute forh2).Acceptance criteria:
:focus-visiblestyles foraandsummary(and any other interactive controls in that template) with visible outline and offset.h1, thenh2for major sections; emoji do not require extra heading levels.<summary>.Suggested labels:
visuals,accessibility,good first issueSource:
docs/STARTER_ISSUES_REVIEW.md— edit in-repo first, then sync GitHub issues if needed.