feat: Align repository with Dec 2025 AGENTS.md standards

[google-labs-jules]

User description

This submission aligns the repository with the Dec 2025 AGENTS.md standards, including a full tech stack upgrade, a refactored UI, and the implementation of a multi-provider AI fallback chain. All mandatory repository files have been created or updated to meet the new requirements.

---

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

---

PR Type

Enhancement

---

Description

• Implemented multi-provider AI fallback chain supporting six providers with exponential backoff retry logic

• Upgraded tech stack to Vite 7, TypeScript 6, Tailwind CSS 4, and added Biome for linting/formatting

• Replaced React useState with @preact/signals-react for reactive state management

• Refactored UI with modern "Spatial Glass" and "Bento Grid" design using backdrop blur effects

• Added API key manager component with localStorage persistence for user-provided credentials

• Removed Node.js build dependency by eliminating pre-build script

• Updated documentation and CI/CD workflow to include formatting step

---

Diagram Walkthrough

flowchart LR
  UI["React UI<br/>Signals-React"]
  KeyMgr["API Key Manager<br/>localStorage"]
  Fallback["Fallback Chain<br/>Exponential Backoff"]
  Cerebras["Cerebras API"]
  Gemini["Gemini API"]
  Groq["Groq API"]
  Mistral["Mistral API"]
  NVIDIA["NVIDIA API"]
  Cloudflare["Cloudflare API"]
  
  UI -- "User Input" --> KeyMgr
  KeyMgr -- "Stored Keys" --> Fallback
  Fallback -- "Try Provider 1" --> Cerebras
  Fallback -- "Try Provider 2" --> Gemini
  Fallback -- "Try Provider 3" --> Groq
  Fallback -- "Try Provider 4" --> Mistral
  Fallback -- "Try Provider 5" --> NVIDIA
  Fallback -- "Try Provider 6" --> Cloudflare

Loading

File Walkthrough

	Relevant files
Enhancement	9 files cerebras.ts Cerebras API provider implementation                                          +24/-0    gemini.ts Gemini API provider implementation                                              +23/-0    groq.ts Groq API provider implementation                                                  +24/-0    mistral.ts Mistral API provider implementation                                            +24/-0    nvidia.ts NVIDIA API provider implementation                                              +24/-0    cloudflare.ts Cloudflare API provider implementation                                      +23/-0    index.ts AI fallback chain with exponential backoff                              +49/-0    ApiKeyManager.tsx API key management UI component                                                    +52/-0    App.tsx Refactored UI with Spatial Glass design                                    +41/-29
Configuration changes	4 files style.css Updated Tailwind CSS import syntax                                              +3/-1      tsconfig.json Added JSX and module isolation config                                        +2/-0      biome.json Biome linting and formatting configuration                              +16/-0    ci.yml Added formatting step to CI pipeline                                          +1/-0
Dependencies	1 files package.json Updated dependencies and build scripts                                      +7/-3
Documentation	3 files badges.yml Updated tech stack badges metadata                                              +18/-10  README.md Comprehensive documentation update                                              +63/-30  CONTRIBUTING.md Updated contribution guidelines                                                    +2/-2
Miscellaneous	1 files generate-goggle-list.mjs Removed Node.js pre-build script                                                  +0/-8
Additional files	1 files SECURITY.md [link]

---

[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
	@​types/​react-dom@​19.2.3
	@​types/​react@​19.2.7
	typescript@​5.9.3 ⏵ 6.0.0-dev.20251223
	@​biomejs/​biome@​1.9.4
	@​preact/​signals-react@​2.3.0

View full report

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Insecure secret storage Description: API keys are persisted in localStorage via localStorage.setItem("apiKeys", ...), which is readable by any JavaScript running on the origin (e.g., via XSS or a compromised dependency), enabling straightforward theft and reuse of user credentials. ApiKeyManager.tsx [4-18] Referred Code const apiKeys = signal(JSON.parse(localStorage.getItem("apiKeys") || "{}")); const providers = [ "Cerebras", "Gemini", "Groq", "Mistral", "NVIDIA", "Cloudflare", ]; export function ApiKeyManager() { const handleSave = () => { localStorage.setItem("apiKeys", JSON.stringify(apiKeys.value)); };
	API key in URL Description: The Gemini API key is sent in the request URL query string (?key=${apiKey}), which can be leaked via browser history, network logs, proxies, referrer headers, or monitoring tooling, exposing the credential more broadly than an authorization header would. gemini.ts [6-8] Referred Code export const callGemini = async (apiKey: string, prompt: string) => { const response = await fetch(`${GEMINI_API_URL}?key=${apiKey}`, { method: "POST",
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: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Generic variable name: The variable data is used for parsed provider responses, which is a generic identifier that reduces self-documentation of the response shape. Referred Code const data = await response.json(); return data.choices[0].message.content; 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 edge handling: callAi assumes valid JSON in localStorage and a valid key:accountId format for Cloudflare without validation/guarding, and retries on all thrown errors without distinguishing non-retryable failures. Referred Code const apiKeys = JSON.parse(localStorage.getItem("apiKeys") || "{}"); for (const provider of providers) { const apiKey = apiKeys[provider.name]; if (!apiKey) { console.warn(`${provider.name} API key not found.`); continue; } let retries = 0; while (retries < 5) { try { if (provider.name === "Cloudflare") { const [key, accountId] = apiKey.split(":"); return await (provider.func as (key: string, accountId: string, prompt: string) => Promise<string>)(key, accountId, prompt); } return await (provider.func as (apiKey: string, prompt: string) => Promise<string>)(apiKey, prompt); } catch (error) { console.error(`Error calling ${provider.name}:`, error); retries++; const delay = Math.pow(2, retries -1) * 1000; ... (clipped 3 lines) 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: Insecure secret storage: API keys are persisted to localStorage via localStorage.setItem("apiKeys", ...), which is an insecure storage mechanism for secrets and lacks additional protection/validation. Referred Code const apiKeys = signal(JSON.parse(localStorage.getItem("apiKeys") || "{}")); const providers = [ "Cerebras", "Gemini", "Groq", "Mistral", "NVIDIA", "Cloudflare", ]; export function ApiKeyManager() { const handleSave = () => { localStorage.setItem("apiKeys", JSON.stringify(apiKeys.value)); }; Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No audit logging: Sensitive key write actions to localStorage occur without any audit trail context (user, timestamp, outcome) needed to reconstruct events. Referred Code const handleSave = () => { localStorage.setItem("apiKeys", JSON.stringify(apiKeys.value)); }; 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: Potential info leakage: Provider errors include response.statusText in thrown exceptions which may be surfaced to end users depending on UI handling and can expose provider/internal details. Referred Code if (!response.ok) { throw new Error(`Cerebras API error: ${response.statusText}`); } 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: Unstructured console logging: The retry loop uses console.error/console.log with raw error objects and free-form strings, which is unstructured and may inadvertently leak sensitive context depending on error contents. Referred Code console.warn(`${provider.name} API key not found.`); continue; } let retries = 0; while (retries < 5) { try { if (provider.name === "Cloudflare") { const [key, accountId] = apiKey.split(":"); return await (provider.func as (key: string, accountId: string, prompt: string) => Promise<string>)(key, accountId, prompt); } return await (provider.func as (apiKey: string, prompt: string) => Promise<string>)(apiKey, prompt); } catch (error) { console.error(`Error calling ${provider.name}:`, error); retries++; const delay = Math.pow(2, retries -1) * 1000; console.log(`Retrying ${provider.name} in ${delay}ms...`); await sleep(delay); 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
Security	Avoid storing API keys in localStorage Avoid storing API keys in localStorage to prevent potential theft via XSS attacks; instead, keep them in-memory for the duration of the session. src/components/ApiKeyManager.tsx [4-18] // src/components/ApiKeyManager.tsx import { signal } from "@preact/signals-react"; -const apiKeys = signal(JSON.parse(localStorage.getItem("apiKeys") || "{}")); +export const apiKeys = signal<Record<string, string>>({}); ... export function ApiKeyManager() { - const handleSave = () => { - localStorage.setItem("apiKeys", JSON.stringify(apiKeys.value)); + const handleChange = (provider: string, value: string) => { + apiKeys.value = { ...apiKeys.value, [provider]: value }; }; -... + return ( + <div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 shadow-lg mt-8"> + <h2 className="text-2xl font-semibold mb-4 tracking-tight"> + API Keys (Session Only) + </h2> + <p className="text-sm text-gray-400 mb-4"> + Keys are not saved and will be lost on page refresh. + </p> + <div className="space-y-4"> + {providers.map((provider) => ( + <div key={provider}> + <label className="block text-sm font-medium text-gray-400"> + {provider} + </label> + <input + type="password" + className="mt-1 block w-full bg-black/20 rounded-lg p-2 text-white" + value={apiKeys.value[provider] || ""} + onChange={(e) => handleChange(provider, e.target.value)} + /> + </div> + ))} + </div> + </div> + ); +} + [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a significant security vulnerability (XSS) from storing API keys in localStorage and proposes a much safer in-memory alternative.	High
	Send API key in header For the Gemini API call, move the API key from the URL query string to the x-goog-api-key request header to improve security. src/api/gemini.ts [6-15] export const callGemini = async (apiKey: string, prompt: string) => { - const response = await fetch(`${GEMINI_API_URL}?key=${apiKey}`, { + const response = await fetch(GEMINI_API_URL, { method: "POST", headers: { "Content-Type": "application/json", + "x-goog-api-key": apiKey, }, body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }], }), }); ... [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a security risk of exposing API keys in URL parameters and proposes the more secure method of using a request header.	Medium
General	Handle fetch errors gracefully Add a .catch() block to the fetch call within the effect to handle potential errors when loading a goggle's content. src/App.tsx [8-14] effect(() => { if (selectedGoggle.value) { fetch(`/goggles/${selectedGoggle.value}`) .then((res) => res.text()) - .then((text) => (goggleContent.value = text)); + .then((text) => (goggleContent.value = text)) + .catch((err) => { + goggleContent.value = `Error loading goggle: ${err.message}`; + }); } }); Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly points out missing error handling in a fetch call, which improves robustness and user experience by displaying errors instead of failing silently.	Medium
More