Add project architecture overview UI

[monkey1sai]

Summary

• Adds a landing-page architecture overview to web-viewer-sample showing repo responsibilities, core data flow, and boundary rules.
• Keeps the visualization in the browser client without changing coordinator, storage, BIM control, or streaming runtime behavior.

Walkthrough

project_architecture_ui_walkthrough.mp4

Testing

• npm run build in web-viewer-sample passes.
• npm run lint in web-viewer-sample still reports pre-existing lint errors in App.tsx, AppStream.tsx, Forms.tsx, and StreamOnlyWindow.tsx.
• Manual browser verification confirms the architecture heading, six service cards, Primary Data Flow, and Boundary Rules render at localhost:5173.

Notes

• No PR template is present in this repository.

_{To show artifacts inline, enable in settings.}

  

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 87597896-e895-4f17-a309-8fce07656fc6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/fix/date---feature/fix/issue/project-architecture-ui-651d

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

Adds a new “Project Architecture UI” landing-page section to the web-viewer-sample client to visually document repo responsibilities, primary data flow, and boundary rules.

Changes:

• Added a new ArchitectureOverview React component rendering repo cards + flow/rules lists.
• Embedded the architecture overview into the initial AppOnlyForm landing layout.
• Added new CSS for the landing grid layout and architecture overview styling.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
web-viewer-sample/src/components/ArchitectureOverview.tsx	New UI component for architecture overview content (nodes, flows, boundary rules).
web-viewer-sample/src/Forms.tsx	Updates landing form layout to include the new architecture overview panel.
web-viewer-sample/src/App.css	Adds styling for the new landing layout and architecture overview components.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.