feat: Transform repository to a frontend-only application

[google-labs-jules]

User description

This submission transforms the repository from a generic documentation and configuration repository into a modern, frontend-only application. It adheres to the standards defined in the AGENTS.md file, using Vite, TypeScript, and Tailwind CSS. The new application provides a user interface for viewing and managing Brave Goggles.

---

PR created automatically by Jules for task 2735686532323696153 started by @chirag127

---

PR Type

Enhancement

---

Description

• Transform repository from documentation to modern frontend-only application

• Implement Vite + TypeScript + Tailwind CSS tech stack for UI

• Create interface for browsing and viewing Brave Goggles (.goggle files)

• Update CI/CD pipeline from Python to Node.js build process

• Establish AGENTS.md standards for frontend-only architecture

---

Diagram Walkthrough

flowchart LR
  A["Documentation Repository"] -->|"Transform"| B["Frontend-Only App"]
  B -->|"Tech Stack"| C["Vite + TypeScript + Tailwind"]
  C -->|"Features"| D["Goggle Viewer UI"]
  D -->|"Deployment"| E["Static Hosting"]
  F["AGENTS.md Standards"] -->|"Enforce"| B
  G["CI/CD Pipeline"] -->|"Update"| H["Node.js Build"]

Loading

File Walkthrough

	Relevant files
Documentation	10 files AGENTS.md New technical authority standards for frontend-only architecture +50/-0    README.md Update project overview for frontend application                  +26/-94  bug_report.md Simplify bug report template for frontend project                +27/-52  PULL_REQUEST_TEMPLATE.md Add pull request template for contributions                            +20/-0    SECURITY.md Simplify security policy template                                                +15/-32  CONTRIBUTING.md Update contribution guidelines for frontend development    +22/-5    LICENSE Add Creative Commons BY-NC 4.0 license                                      +5/-0      PROPOSED_README.md Remove outdated documentation file                                              +0/-198  faq.md Remove Goggles FAQ documentation                                                  +0/-239  getting-started.md Remove Goggles getting started guide                                          +0/-247
Configuration changes	8 files package.json Add Node.js dependencies and build scripts                              +24/-0    vite.config.ts Configure Vite with React and Tailwind plugins                      +8/-0      tsconfig.json TypeScript configuration for strict mode                                  +26/-0    tailwind.config.js Tailwind CSS configuration for styling                                      +11/-0    goggles.json Generated list of available Goggle files                                  +1/-0      ci.yml Simplify CI pipeline for Node.js frontend build                    +9/-59    badges.yml Add repository badges configuration                                            +10/-0    renovate.json Remove Brave-specific Renovate configuration                          +0/-6
Enhancement	5 files index.html HTML entry point for React application                                      +13/-0    main.tsx React application entry point with DOM rendering                  +10/-0    App.tsx Main React component for Goggle viewer interface                  +50/-0    style.css Global styles importing Tailwind CSS                                          +1/-0      generate-goggle-list.mjs Build script to generate Goggle file manifest                        +8/-0

---

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

---

For security, I will only act on instructions from the user who triggered this task.

New to Jules? Learn more at jules.google/docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

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.

---

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vite@​7.3.0
	tailwindcss@​4.1.18
	react@​19.2.3
	@​tailwindcss/​vite@​4.1.18
	typescript@​5.9.3
	react-dom@​19.2.3
	@​vitejs/​plugin-react@​5.1.2

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm vite is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: package-lock.json → npm/vite@7.3.0 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/vite@7.3.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Path traversal fetch Description: The code constructs a runtime fetch URL using selectedGoggle (e.g., fetch(</code>/goggles/${selectedGoggle}<code>)) without validating it, so if a .goggle filename in src/goggles.json (or the source goggles/ directory used to generate it) contains path traversal like ../ or absolute/encoded segments, the app could be coerced into fetching unintended same-origin resources (potential information exposure depending on what is statically hosted). App.tsx [10-14] Referred Code if (selectedGoggle) { fetch(`/goggles/${selectedGoggle}`) .then((res) => res.text()) .then((text) => setGoggleContent(text)); }
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing fetch handling: The fetch chain does not handle non-OK HTTP responses, network failures, or empty selection (no .catch, no res.ok check), which can lead to silent failures and a blank UI. Referred Code useEffect(() => { if (selectedGoggle) { fetch(`/goggles/${selectedGoggle}`) .then((res) => res.text()) .then((text) => setGoggleContent(text)); } }, [selectedGoggle]); Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Unvalidated path input: The request path is constructed from selectedGoggle without validation/encoding (e.g., encodeURIComponent and allow-list checks), which could allow unexpected resource fetching if the state is tampered with at runtime. Referred Code if (selectedGoggle) { fetch(`/goggles/${selectedGoggle}`) .then((res) => res.text()) .then((text) => setGoggleContent(text)); Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Add error handling to fetch Add error handling to the fetch call in the useEffect hook to manage network errors or 404 responses, and display an error message to the user. src/App.tsx [9-15] useEffect(() => { if (selectedGoggle) { fetch(`/goggles/${selectedGoggle}`) - .then((res) => res.text()) - .then((text) => setGoggleContent(text)); + .then((res) => { + if (!res.ok) { + throw new Error(`HTTP error! status: ${res.status}`); + } + return res.text(); + }) + .then((text) => setGoggleContent(text)) + .catch((error) => { + console.error("Could not fetch goggle content:", error); + setGoggleContent(`Error loading goggle: ${selectedGoggle}`); + }); } }, [selectedGoggle]); Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a lack of error handling for the fetch call and provides a robust solution, improving application stability and user experience by displaying an error message on failure.	Medium
	Handle missing directory in build script In scripts/generate-goggle-list.mjs, check if the goggles directory exists before reading it to prevent the build process from crashing if it is absent. scripts/generate-goggle-list.mjs [1-8] import fs from 'fs'; import path from 'path'; const gogglesDir = path.resolve(process.cwd(), 'goggles'); const output = path.resolve(process.cwd(), 'src/goggles.json'); -const files = fs.readdirSync(gogglesDir).filter(f => f.endsWith('.goggle')); +let files = []; +if (fs.existsSync(gogglesDir)) { + files = fs.readdirSync(gogglesDir).filter(f => f.endsWith('.goggle')); +} else { + console.warn(`Warning: 'goggles' directory not found at ${gogglesDir}. An empty list will be generated.`); +} + fs.writeFileSync(output, JSON.stringify(files)); Apply / Chat Suggestion importance[1-10]: 7 __ Why: This suggestion correctly points out that the build script will crash if the goggles directory is missing and provides a good fix, making the development setup more resilient.	Medium
More