feat: add three viewing modes for app specification

[stefandevo]

Summary

Enhances the /spec page with three distinct viewing modes for a better user experience:

• View Mode (default): A clean, read-only display using cards, badges, and collapsible accordions - much nicer than raw XML
• Edit Mode: A structured form-based editor with proper inputs for all spec fields - easier editing without dealing with XML syntax
• Source Mode: Raw XML editor preserved for advanced users who need direct access

New Shared Package

Adds @automaker/spec-parser library for XML parsing that can be shared between server and client:

• xmlToSpec() - Parse XML to SpecOutput object
• specToXml() - Convert SpecOutput back to XML
• Validation utilities

Screenshots

Test plan

• Open spec page - should default to View mode with rendered cards/badges
• Switch to Edit mode - form should populate with current spec values
• Edit fields in Edit mode and save - XML should update correctly
• Switch to Source mode - should show raw XML
• Toggle between light/dark themes - editor should display correctly
• Introduce invalid XML in Source mode - should show error and disable View/Edit tabs

[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.

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

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

---

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.}

[gemini-code-assist]

Summary of Changes

Hello @stefandevo, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly upgrades the application's /spec page by implementing a versatile multi-mode interface for interacting with application specifications. It transitions from a singular raw XML editor to a more user-centric design, offering both a visually appealing read-only view and a structured, form-driven editing experience. This enhancement is built upon a newly developed, shared XML parsing and validation library, ensuring data integrity and a smoother workflow for managing application specifications.

Highlights

• Three Viewing Modes for App Specification: The /spec page now offers three distinct modes: 'View Mode' for a clean, read-only display with cards and accordions; 'Edit Mode' for structured, form-based editing of spec fields; and 'Source Mode' for direct raw XML manipulation by advanced users.
• New Shared XML Parser Library: A new shared library, @automaker/spec-parser, has been introduced. This library provides robust utilities for parsing XML into a structured SpecOutput object, converting SpecOutput back to XML, and validating spec data, ensuring consistency between client and server.
• Enhanced User Experience and Validation: The UI now dynamically switches between modes, with 'View' and 'Edit' modes being disabled if the underlying XML is invalid. Real-time XML validation is integrated, guiding users to fix errors in 'Source Mode' before accessing the structured views.
• Modular Edit Mode Components: Numerous new UI components have been developed to support the form-based 'Edit Mode', allowing granular editing of project information, technology stack, core capabilities, implemented features, roadmap, requirements, and guidelines.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a significant new feature: three distinct viewing modes (View, Edit, Source) for the application specification. This is achieved by adding a new @automaker/spec-parser library for handling XML and creating a suite of new UI components for the different modes. The changes are well-structured and largely follow the PR description. My review focuses on improving the robustness of the new parser, fixing potential UI bugs related to list rendering in React, simplifying some of the new component logic, and addressing a minor UX regression in the XML editor. Overall, this is a great enhancement to the application's usability.