Refactor editor and optimize performance with UI enhancements

[ndom91]

Great project! As a frontend web dev I really wanted to help improve the control UI though 😊

In short, these are the UI/UX changes:

• Split the policy editing and event viewing into two separate tabs / pages (selector in the top-right)
• Use flexbox for layout instead of ResizeObserver and dynamically calculated JS heights
• Event viewer table now leverages the @tanstack/react-virtual package that was installed but never used to actually virtualize all the rows of incoming events so you can show more than 50 at a time. I've had 10k+ in simulated mode with great performance still
• Event viewer now pauses the view, so to speak, when you scroll down so that you can clearly read the rows of data as new stuff comes in without them getting pushed away. This "paused" view then shows a button "Back to the top" that also has a count on it for how many new items have come in. Clicking it takes you back to the top to the live scrolling view of new events
• Minor redesign of the event viewer rows as well as the global header
• Align scrollbar styles with the rest of the app
• A bunch of minor web best practices like making the cursor pointer on hover of buttons and html attributes like autocomplete=off on forms, etc.
• Rm a few unused dependencies
• Dynamically import / load the big fakerjs dependency when loading simulator mode
• Replaced the heavy monaco editor with a much more lightweight one (we dont need an entire vscode-like experience here, right)

Screenshots

AI Summary

This pull request makes several UI and dependency changes to the policy console and events stream in the web app. The main improvements include a visual and interaction redesign of the events stream table, dependency cleanup and replacement for code editing, and enhancements to test reliability. The changes also add custom syntax highlighting for the Cedar policy editor and update how the main page switches between tabs.

UI/UX Improvements:

• The events stream table (ActionsStream) is visually redesigned: rows have a colored left accent for allow/deny, badges are color-coded by event type, and action buttons are more compact and only visible on hover. The repeat count is always shown, and tooltips are simplified. [1] [2]
• The events and policy editor now live in separate tabs, with tab state managed in page.tsx. The policy editor uses the new CedarEditor with Prism-based syntax highlighting. [1] [2]

Dependency and Editor Changes:

• Removes unused or replaced dependencies (@monaco-editor/react, monaco-editor, reactflow, @xyflow/react, framer-motion) and adds prismjs, react-simple-code-editor, and types for PrismJS to support the new code editor. [1] [2]

Testing Improvements:

• Mocks the virtualizer in ActionsStream tests to ensure all rows render in the test environment, making tests deterministic regardless of jsdom layout.
• Updates test queries to correctly count data rows, ignoring spacer and header rows, and updates text assertions for new wording ("2 events" instead of "2 shown"). [1] [2]

Styling and Theming:

• Adds custom scrollbar styling and removes many unused theme variables and animation keyframes from globals.css. [1] [2]
• Adds Prism token color rules for the Cedar policy editor for improved syntax highlighting.

Code Cleanup:

• Removes unused callback dependencies and cleans up event handler logic in the main console page.

These changes collectively modernize the UI, improve maintainability, and enhance the developer and user experience.