Global Scripts & Interactions

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• showcase/render-engine.html
• showcase/agent-trainer-pricing.html
• showcase/agent-trainer-sprint.html
• showcase/registry.json
• about.html
• script.js

Global Scripts & Interactions encompass the client-side logic used to facilitate theme management, mobile navigation, dynamic content synthesis, and interactive UI states across the portfolio. The system relies on a central entry point, script.js, supplemented by module-specific scripts within the showcase/ directory for complex generative and stateful operations.

These interactions enable features such as live synthesis via the GestaltView runtime, role-based UI transitions, and commercial logic like billing toggles. Many components communicate with external services through a signed showcase-proxy to maintain security for runtime secrets.

Navigation and Layout Interactions

The site uses global scripts to manage core layout transitions and responsiveness. Each page initializes by adding a .js class to the document root to enable script-dependent styling.

Mobile Menu Management

The site-header contains a menu-btn that controls navigation visibility on small screens.

• Action: The button triggers a classList.toggle('open') on the .nav-links element.
• Scope: This interaction is consistent across all core pages including index.html, work.html, and about.html.

Sources: index.html:42-43, about.html:40-41

Scroll and Reveal Effects

Sections marked with the reveal class utilize scripts to handle entrance animations. Global styles combined with script.js manage the visibility of content blocks as the user scrolls through sections like "The Path" or "Three Lanes".

Sources: index.html:93, about.html:62

Theme Management System

The Portfolio utilizes a unified theme management system to toggle between light and dark modes. This system primarily operates by manipulating the data-theme attribute on the <html> or <body> elements.

Theme Toggle Implementation

A dedicated theme toggle script manages visual transitions and icon updates.

• Persistence: The script checks the current data-theme attribute to determine the initial state.
• Logic: When a user clicks the toggle button, the script updates the attribute and replaces the inner SVG icon to reflect the new state (e.g., Sun icon for Light mode, Moon for Dark mode).
• Manual Overrides: In components like the Agent Trainer Pricing, themes are explicitly declared as dark at the document level but can be toggled by the user.

Generative Render Engine Logic

The Generative Render Engine in showcase/render-engine.html represents the most complex interaction layer. It facilitates live synthesis by communicating with the GestaltView runtime via a proxy.

Synthesis Flow

The engine assembles a multi-part prompt including system instructions, style guides, and output format directives.

1. Prompt Assembly: Concatenates system blocks (style/format) and user blocks (title, source material, PLK mode).
2. Proxy Communication: Sends the assembled text to /api/showcase-proxy via a POST request.
3. Local Rendering: Upon receiving a response, the script utilizes a local markdown renderer or an iframe with srcdoc for HTML types.
4. Provenance Hashing: Computes a local SHA-256 hash (or equivalent hash53 in demo mode) to simulate the server-sealed provenance envelope.

Export and Transformation Functions

The engine provides several export formats through script-controlled Blob generation.

Function	Description	Implementation
copyMarkdown	Copies raw synthesis to clipboard	navigator.clipboard.writeText
downloadMD	Generates a .md file	URL.createObjectURL(blob)
renderDiagram	Detects Mermaid syntax	Regex detection of Mermaid keywords
standaloneHTML	Wraps artifact in full HTML	Injects theme-specific CSS into a template

Sources: showcase/render-engine.html:158-164, showcase/render-engine.html:246-270, showcase/render-engine.html:350-385

Sprint Board and Interactive UI States

The project includes specialized interaction logic for project management and commercial exhibits, found in the showcase/ sub-directory.

Checklist and Progress Tracking

The Agent Trainer Sprint board manages task states and overall progress visualization.

• Checkbox Interactions: Items in the .checklist track checked states via classList.
• Progress Calculation: A script calculates the ratio of completed tasks to total tasks to update the width of the .progress-fill element and the text in .count.

Commercial Toggles and Accordions

• Billing Toggle: A specialized toggle in agent-trainer-pricing.html switches between monthly and annual data attributes. This updates multiple price display elements simultaneously while showing a "Save" badge for annual selections.
• FAQ Accordions: The toggleFaq function manages the open class on FAQ items, ensuring only one item is expanded at a time by removing the class from siblings.

Data Interaction and Persistence Issues

Source files identify specific interaction failures being addressed in current development cycles.

• State Handoff Failures: BUG-01 and DEF-02 identify a breakdown in data persistence where onboarding fields (email, company name) are not passed correctly between route transitions.
• Optimistic UI Syncing: DEF-01 documents a selection highlight instability caused by race conditions between local UI state updates and asynchronous Firestore listeners.
• Circuit Breaker Logic: The Render Engine implements a 4-second cooldown to prevent triggering the runtime's circuit breaker during rapid back-to-back synthesis requests.

Sources: showcase/agent-trainer-sprint.html:132-155, showcase/render-engine.html:420-425

Global interactions prioritize "Clarity before complexity," ensuring that all dynamic states are inspectable and that handoffs between system components are documented through clear UI feedback and provenance tracking.

Sources: services.html:212-218, README.md:38-41