Skip to content

Improve diagrams - #66

Merged
ScriptSmith merged 3 commits into
mainfrom
docs-diagrams-improvements2
Jun 16, 2026
Merged

Improve diagrams#66
ScriptSmith merged 3 commits into
mainfrom
docs-diagrams-improvements2

Conversation

@ScriptSmith

Copy link
Copy Markdown
Member

No description provided.

@greptile-apps

greptile-apps Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR polishes the animated gateway diagram with several targeted improvements to visual fidelity, accessibility, and correctness. Dependency overrides bump vite to 7.3.5 and ws to 8.21.0 to pull in upstream fixes.

  • NodeGlow refactor: size is split into separate w/h props (with h = w default), and a className prop is added, enabling rectangular glows that hug the tool boxes evenly on all four sides.
  • Budget scene consistency: A usd() locale formatter is introduced and used for both the running balance and the budget total; staticFrac/staticBalance are now derived from a single staticSpent constant so the reduced-motion frame can never drift from the animated one.
  • Agent scene UX: Tool nodes become clickable Link elements with proper aria-label attributes (replacing the former aria-hidden foreignObject), and each gets a NodeGlow that peaks when the dot reaches the tool.
  • Sticky-pause fix: A useEffect listens for window.blur and document.visibilitychange to clear the hover-pause when the user switches tabs or apps, preventing the pause badge from sticking indefinitely.

Confidence Score: 5/5

Safe to merge — changes are self-contained diagram improvements with no impact on data paths, auth, or server-side logic.

All changes are confined to the docs diagram component and dev-dependency overrides. The NodeGlow refactor is mechanically straightforward, the rateSchedule array sizes remain consistent (5 non-shed entries matching 5 acceptLevels), the useEffect teardown is correct, and the lockfile update aligns with the package.json changes. No logic paths that could regress are touched.

No files require special attention.

Important Files Changed

Filename Overview
docs/components/gateway-diagram.tsx Several improvements: NodeGlow gets separate w/h props for rectangular nodes, a usd() formatter is introduced and used consistently for the budget scene, tool nodes gain clickable Link wrappers with proper accessibility, and a useEffect resolves the sticky-pause bug when switching browser tabs. The rateSchedule array sizes remain consistent (5 acceptLevels, 5 false entries in shed).
ui/package.json Bumps the vite peer-dependency lower bound from >=7.3.2 to >=7.3.5 and adds a ws >=8.21.0 override to pull in security/bug fixes.
ui/pnpm-lock.yaml Lockfile regenerated consistently with the package.json changes: all vite 7.3.2 references updated to 7.3.5 and ws 8.19.0 updated to 8.21.0 throughout snapshots.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[GatewayDiagram mount] --> B[useEffect: register blur and visibilitychange listeners]
    B --> C{User interaction}
    C -->|pointer enter| D[setPaused true]
    C -->|pointer leave| E[setPaused false]
    C -->|window blur| E
    C -->|tab hidden| E
    D --> F[Slideshow paused + badge shown]
    E --> G[Slideshow resumes]

    subgraph NodeGlow
        H[w and h props] --> I[rect width=w height=h rx=min-w-h-div-3]
        J[className prop] --> K[fill class injected e.g. fill-violet-500]
    end

    subgraph AgentScene
        L[Loop path computed] --> M[at = travelTime loop / cycle / 2]
        M --> N[NodeGlow w=92 h=42 peaks at tool midpoint]
        N --> O[Link with aria-label wraps tool box]
    end
Loading
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[GatewayDiagram mount] --> B[useEffect: register blur and visibilitychange listeners]
    B --> C{User interaction}
    C -->|pointer enter| D[setPaused true]
    C -->|pointer leave| E[setPaused false]
    C -->|window blur| E
    C -->|tab hidden| E
    D --> F[Slideshow paused + badge shown]
    E --> G[Slideshow resumes]

    subgraph NodeGlow
        H[w and h props] --> I[rect width=w height=h rx=min-w-h-div-3]
        J[className prop] --> K[fill class injected e.g. fill-violet-500]
    end

    subgraph AgentScene
        L[Loop path computed] --> M[at = travelTime loop / cycle / 2]
        M --> N[NodeGlow w=92 h=42 peaks at tool midpoint]
        N --> O[Link with aria-label wraps tool box]
    end
Loading

Reviews (4): Last reviewed commit: "Fix security warnings" | Re-trigger Greptile

Comment thread docs/components/gateway-diagram.tsx Outdated
@ScriptSmith

Copy link
Copy Markdown
Member Author

@greptile-apps

@ScriptSmith
ScriptSmith merged commit 9c96711 into main Jun 16, 2026
20 checks passed
@ScriptSmith
ScriptSmith deleted the docs-diagrams-improvements2 branch June 16, 2026 07:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant