Update site and doc#225
Conversation
…ags: - Introduced ProvidersSection and FAQSection components to enhance homepage content. - Updated homepage layout to include new sections for better user engagement. - Bumped version in footer and hero components to v0.1.83-beta.
…rience: - Added new Providers section to documentation, detailing supported AI providers and configuration. - Updated intro and quickstart guides for clarity and conciseness. - Enhanced global styles and layout for better visual consistency across the application. - Bumped version in package.json to 0.1.83 to reflect recent changes.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThe PR redesigns the documentation site with new onboarding content, terminal/provider guides, responsive layout, theming, metadata, and interactions. It also adds homepage provider and FAQ sections and updates homepage beta version labels. ChangesDocumentation experience
Homepage sections
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Checkov (3.3.8)apps/docs/package.jsonTraceback (most recent call last): 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 17
🧹 Nitpick comments (2)
apps/docs/app/globals.css (2)
302-308: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDead
@starting-stylerule — has no effect on keyframe-animated elements.
@starting-styleonly supplies a starting value for CSS transitions on newly rendered elements; it does nothing for elements animated via@keyframes/animation..docs-sidebar-item's entrance is driven by an inlineanimation: sidebarItemIn ...(see docs-sidebar.tsx), not atransition, so this block never applies.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/app/globals.css` around lines 302 - 308, The `@starting-style` block for .docs-sidebar-item is ineffective because its entrance uses the sidebarItemIn keyframe animation. Remove this unused rule from the global stylesheet and leave the existing animation behavior unchanged.
3-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winStylelint flags
@custom-variant/@themeas unknown — likely a config gap, not a code defect.Both are valid Tailwind CSS v4 CSS-first-config at-rules. The
scss/at-rule-no-unknownrule firing here suggests the stylelint config isn't aware of Tailwind v4 syntax; consider adding an ignore list or the Tailwind stylelint plugin to remove this CI noise.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/app/globals.css` at line 3, Add Tailwind CSS v4 awareness to the Stylelint configuration so valid CSS-first at-rules such as `@custom-variant` and `@theme` are recognized. Prefer the existing Tailwind Stylelint plugin or configure the relevant at-rule ignore list, without changing the declarations in globals.css.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/docs/app/globals.css`:
- Around line 20-21: Update the --destructive token in the global theme
variables to use a clearly distinct red or orange color value instead of
duplicating --secondary; leave --destructive-foreground unchanged.
In `@apps/docs/app/layout.tsx`:
- Around line 42-47: Update the ThemeProvider configuration in the layout to
remove enableSystem and any associated light-mode plumbing, keeping the docs
site explicitly dark-only until light theme tokens are implemented. Preserve the
existing dark theme configuration.
In `@apps/docs/components/docs-footer.tsx`:
- Line 17: Update the className on the footer span to replace the invalid
“150ms” and “var(--ease-out)” classes with Tailwind utilities “duration-150” and
“ease-(--ease-out)”, matching the existing transition-colors pattern used by the
other footer elements.
In `@apps/docs/components/docs-sidebar.tsx`:
- Around line 36-38: Update the inline animation in the docs sidebar item
rendering to reference the globally scoped keyframe name, using the framework’s
global keyframe declaration rather than the scoped `sidebarItemIn` name.
Preserve the existing duration, easing, delay, and fill-mode values.
In `@apps/docs/content/docs/intro.mdx`:
- Line 6: Update the user-facing description in the opening content to hyphenate
“open source” as “open-source,” preserving the rest of the sentence unchanged.
- Around line 18-22: Update the Quick Start “without installing” flow near the
npx supercode-cli example so every subsequent CLI invocation uses the same
npx-based form, or remove that unsupported path entirely. Ensure the documented
version, login, and execution commands remain self-contained and do not rely on
a globally installed supercode command.
- Line 25: Align the installer command in apps/docs/content/docs/intro.mdx:25-25
with the canonical endpoint used by apps/docs/content/docs/quickstart.mdx:15-15,
or explicitly document that both endpoints are supported; apply the same
intentional endpoint guidance across both affected guides.
In `@apps/docs/content/docs/providers.mdx`:
- Line 76: Update the MiniMax-M2 description in the providers table to use the
hyphenated wording “General-purpose coding model.”
- Around line 8-29: Update the provider configuration sections, including the
CLI, dashboard, and provider-specific entries, to clearly separate hosted BYOK
setup from self-hosted/development environment-variable setup. State that hosted
users configure providers through /connect or the Providers dashboard, while
self-hosters configure the required deployment environment variables, and
identify the applicable flow for each supported provider.
In `@apps/docs/content/docs/terminal-getting-started.mdx`:
- Around line 85-124: Update the terminal walkthrough to use the registered
`supercode init` command instead of describing `/init`, and remove the
unsupported `--trust`, `--skip-taste`, and `--no-init` options unless they are
added to the CLI registration. Keep the provider setup instructions aligned with
the actual registered command behavior.
- Around line 64-69: Update the npm global binary PATH command in the terminal
setup instructions to derive the npm prefix with the appropriate npm prefix
command and append its bin directory, rather than constructing the path from npm
root -g. Preserve the existing PATH while ensuring globally installed binaries
such as supercode are discoverable.
In `@apps/docs/next.config.ts`:
- Line 13: Update the multi-line redirect object in the Next.js configuration by
adding a trailing comma after the permanent property value, preserving the
existing redirect behavior.
In `@apps/web/components/homepage/faq-section.tsx`:
- Line 53: Add data-slot="faq-section" to the root section in
apps/web/components/homepage/faq-section.tsx at lines 53-53, and add
data-slot="providers-section" to the root section in
apps/web/components/homepage/providers-section.tsx at lines 51-54. Use these
identifiers for component identification without changing the sections’ existing
structure or styling.
- Around line 3-9: Separate the import groups in faq-section.tsx by adding a
blank line after the React import and before the internal
`@/components/ui/accordion` import, preserving the specified React/Next, external,
internal-alias, and relative-import ordering.
- Around line 21-30: Update the FAQ answer strings in the homepage FAQ data: add
spacing in “DeepSeek, Minimax,” correct “Spark cost” to “Spark costs,” and
separate “refundable” from the parenthetical terms text in “refundable (terms &
conditions applied).”
In `@apps/web/components/homepage/providers-section.tsx`:
- Around line 3-5: Update the imports in the providers section so the React/Next
imports are separated from the external lucide-react import by a blank line,
preserving the prescribed import grouping order.
- Around line 116-123: Update the provider CTA Link in the providers section to
build its destination from the configured documentation origin/base, including
the existing localhost:3001 fallback, instead of the web-relative
"/docs/providers" path. Preserve the "/docs/providers" route suffix while
reusing the established docs configuration symbol.
---
Nitpick comments:
In `@apps/docs/app/globals.css`:
- Around line 302-308: The `@starting-style` block for .docs-sidebar-item is
ineffective because its entrance uses the sidebarItemIn keyframe animation.
Remove this unused rule from the global stylesheet and leave the existing
animation behavior unchanged.
- Line 3: Add Tailwind CSS v4 awareness to the Stylelint configuration so valid
CSS-first at-rules such as `@custom-variant` and `@theme` are recognized. Prefer the
existing Tailwind Stylelint plugin or configure the relevant at-rule ignore
list, without changing the declarations in globals.css.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 748c6276-82ee-41e0-8bb6-e2d1de23f4f6
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (26)
apps/docs/app/docs/[slug]/page.tsxapps/docs/app/docs/layout.tsxapps/docs/app/docs/page.tsxapps/docs/app/globals.cssapps/docs/app/layout.tsxapps/docs/app/page.tsxapps/docs/components/docs-footer.tsxapps/docs/components/docs-sidebar.tsxapps/docs/components/on-this-page.tsxapps/docs/components/terminal-block.tsxapps/docs/content/docs/authentication.mdxapps/docs/content/docs/intro.mdxapps/docs/content/docs/providers.mdxapps/docs/content/docs/quickstart.mdxapps/docs/content/docs/repositories.mdxapps/docs/content/docs/settings.mdxapps/docs/content/docs/terminal-architecture.mdxapps/docs/content/docs/terminal-getting-started.mdxapps/docs/lib/docs-nav.tsapps/docs/next.config.tsapps/docs/package.jsonapps/web/app/page.tsxapps/web/components/homepage/faq-section.tsxapps/web/components/homepage/footer.tsxapps/web/components/homepage/hero.tsxapps/web/components/homepage/providers-section.tsx
💤 Files with no reviewable changes (2)
- apps/docs/content/docs/repositories.mdx
- apps/docs/content/docs/settings.mdx
| --destructive: oklch(0.5940 0.0443 196.0233); | ||
| --destructive-foreground: oklch(0.1797 0.0043 308.1928); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf 'Repo files matching globals.css:\n'
fd -a 'globals\.css$' . | sed 's#^\./##'
printf '\napps/docs/app/globals.css relevant lines:\n'
if [ -f apps/docs/app/globals.css ]; then
nl -ba apps/docs/app/globals.css | sed -n '1,40p'
else
printf 'apps/docs/app/globals.css not found\n'
fi
printf '\nDestructive/secondary CSS variable usages:\n'
rg -n --glob '*.css' --glob '*.tsx' --glob '*.ts' '--glob *.mdx' --glob '*.md' 'destructive|secondary' apps/docs || true
printf '\nExtract exact variable declarations:\n'
python3 - <<'PY'
from pathlib import Path
p=Path('apps/docs/app/globals.css')
if p.exists():
txt=p.read_text()
for needle in ['--destructive', '--secondary']:
lines=[(i,line.strip()) for i,line in enumerate(txt.splitlines(),1) if needle in line]
print(needle, lines)
PYRepository: yashdev9274/supercli
Length of output: 476
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf 'apps/docs/app/globals.css relevant lines (1-40):\n'
sed -n '1,40p' apps/docs/app/globals.css
printf '\nExtract exact variable declarations:\n'
python3 - <<'PY'
from pathlib import Path
p = Path('apps/docs/app/globals.css')
txt = p.read_text()
for needle in ['--destructive', '--secondary']:
hits = [(i, line.strip()) for i, line in enumerate(txt.splitlines(), 1) if needle in line]
print(needle, hits)
PY
printf '\nDestructive/secondary CSS variable usages (docs only):\n'
rg -n --glob '*.css' --glob '*.tsx' --glob '*.ts' --glob '*.mdx' --glob '*.md' 'destructive|secondary' apps/docs || trueRepository: yashdev9274/supercli
Length of output: 2941
Make --destructive distinct from --secondary.
--destructive: oklch(0.5940 0.0443 196.0233) matches --secondary exactly, so destructive/error states will resolve to the same neutral-ish color instead of a clearly destructive red/orange warning token.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/docs/app/globals.css` around lines 20 - 21, Update the --destructive
token in the global theme variables to use a clearly distinct red or orange
color value instead of duplicating --secondary; leave --destructive-foreground
unchanged.
| <ThemeProvider | ||
| attribute="class" | ||
| defaultTheme="dark" | ||
| enableSystem | ||
| disableTransitionOnChange | ||
| > |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | 🏗️ Heavy lift
enableSystem theme switching has no visual effect — no light theme tokens exist.
ThemeProvider is configured with enableSystem (and users could later toggle to light), but apps/docs/app/globals.css defines all color tokens unconditionally on :root with no .light/[data-theme="light"]/prefers-color-scheme override anywhere in the file. Switching away from dark will change the html class but the CSS variables never change, so the docs site is effectively dark-only despite the theme-switching capability being wired up.
Either add a corresponding light palette in globals.css scoped to the resolved light state, or drop enableSystem (and the associated light-mode plumbing) until a light theme is implemented.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/docs/app/layout.tsx` around lines 42 - 47, Update the ThemeProvider
configuration in the layout to remove enableSystem and any associated light-mode
plumbing, keeping the docs site explicitly dark-only until light theme tokens
are implemented. Preserve the existing dark theme configuration.
| > | ||
| <span className="text-[12px] text-[var(--muted-foreground)] font-mono">← Previous</span> | ||
| <span className="text-[14px] text-[var(--foreground)] group-hover:text-[var(--primary)] transition-colors"> | ||
| <span className="text-[14px] text-[var(--foreground)] group-hover:text-[var(--primary)] transition-colors 150ms var(--ease-out)"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Locate file and related files"
git ls-files | rg '(^|/)docs-footer\.tsx$|(^|/)docs-sidebar\.tsx|(^|/)on-this-page\.tsx|(^|/)terminal-block\.tsx|package.json|tailwind\.config\.|app/config|postcss\.config' || true
echo
echo "Relevant docs-footer.tsx lines if present"
for f in $(git ls-files | rg 'docs-footer\.tsx$'); do
echo "--- $f"
nl -ba "$f" | sed -n '1,90p'
done
echo
echo "Search transition-colors bare 150ms var patterns"
rg -n "transition-colors\s+150ms\s+var\(--ease-out\)|duration-150 ease-\(--ease-out\)|ease-\(--ease-out\)" -S . || true
echo
echo "Check Tailwind-related files"
git ls-files | rg '(^|/)(tailwind\.config|postcss\.config|package\.json|components\.json|styles)' | sed -n '1,120p'Repository: yashdev9274/supercli
Length of output: 1237
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Inspect target file with sed"
sed -n '1,90p' apps/docs/components/docs-footer.tsx | awk '{printf "%6d\t%s\n", NR, $0}'
echo
echo "Search the bare transition tokens across repository"
rg -n "transition-colors\s+150ms\s+var\(--ease-out\)|duration-150\s+ease-\(--ease-out\)|ease-\(--ease-out\)|transition-colors" apps || true
echo
echo "Inspect related components where duration-150 is used"
for f in apps/docs/components/docs-sidebar.tsx apps/docs/components/on-this-page.tsx apps/docs/components/terminal-block.tsx; do
if [ -f "$f" ]; then
echo "--- $f"
rg -n "duration-150|ease-\(--ease-out\)|transition-colors|var\(--ease-out\)" "$f" -n || true
fi
done
echo
echo "Inspect docs package/postcss deps"
sed -n '1,160p' apps/docs/package.json | awk '{printf "%4d\t%s\n", NR, $0}'
echo
sed -n '1,80p' apps/docs/postcss.config.mjs | awk '{printf "%4d\t%s\n", NR, $0}'
echo
sed -n '1,80p' packages/config/package.json | awk '{printf "%4d\t%s\n", NR, $0}'Repository: yashdev9274/supercli
Length of output: 30726
Use real Tailwind transition utilities for the duration and easing overrides.
In Tailwind 4 this still applies transition-colors, but 150ms and var(--ease-out) are parsed as plain classes rather than duration and timing-function values, so the custom easing and 150ms duration are dropped. Apply the same utility form used elsewhere in apps/docs/components: lines 17, 32, 48, and 60 (transition-colors duration-150 ease-(--ease-out)).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/docs/components/docs-footer.tsx` at line 17, Update the className on the
footer span to replace the invalid “150ms” and “var(--ease-out)” classes with
Tailwind utilities “duration-150” and “ease-(--ease-out)”, matching the existing
transition-colors pattern used by the other footer elements.
| style={{ | ||
| animation: `sidebarItemIn 0.3s var(--ease-out) ${index * 0.03}s both`, | ||
| }} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate file =="
git ls-files | rg '(^|/)apps/docs/components/docs-sidebar\.tsx$|(^|/)docs-sidebar\.tsx$' || true
echo "== file outline/size =="
wc -l apps/docs/components/docs-sidebar.tsx 2>/dev/null || true
sed -n '1,120p' apps/docs/components/docs-sidebar.tsx 2>/dev/null
echo "== styled-jsx deps/config mentions =="
rg -n "styled-jsx|`@styled-jsx`|styled-jsx/webpack|styled-jsx/react|jsx styling|style jsx global|style jsx" -S package.json apps package.json pnpm-lock.yaml yarn.lock package-lock.json bun.lockb 2>/dev/null || trueRepository: yashdev9274/supercli
Length of output: 3883
🌐 Web query:
styled-jsx styled-jsx keyframes scoped keyframe name hashed @Keyframes global keyframes documentation
💡 Result:
In styled-jsx, @keyframes are automatically scoped by default to ensure complete isolation [1][2][3]. When you define a @keyframes rule within a standard <style jsx> block, styled-jsx transpiles the animation name by appending a unique, hash-based style ID (e.g., @keyframes animationName-jsx-123456789) [4]. This ensures that animations do not collide with other animations in different components [1][2]. Key considerations for keyframes in styled-jsx: 1. Scoped Behavior: When you use a name in an animation property (e.g., animation: myAnim 2s), styled-jsx automatically updates both the animation property and the @keyframes definition with the corresponding hash to match them, provided they are defined in the same <style jsx> tag [4]. 2. Global Keyframes: If you need an animation that is not scoped (e.g., for reuse across multiple components or when integrating with external CSS), you must define the @keyframes in a global style block [1][2]. You can achieve this by adding the global prop to your style tag: <style jsx global>{ @KeyframesmyGlobalAnimation { from { opacity: 0; } to { opacity: 1; } }}</style> Alternatively, you can use css.global from styled-jsx/css to define global styles in separate JavaScript modules [1][5]. 3. Common Pitfalls: - Dynamic Animations: If you try to generate animation names dynamically (e.g., using template literals for the animation name), styled-jsx may fail to automatically associate the animation property with the @keyframes definition because the mapping is determined at compile-time [4]. In such cases, using global styles is often the recommended workaround [6]. - Separate Tags: If the @keyframes definition and the animation usage are in different <style jsx> tags, they may not share the same hash, causing the animation to break [4]. Keep them within the same tag or define them globally if they need to be shared [1][2]. For further details, refer to the official styled-jsx documentation regarding global styles and scoping [1][5].
Citations:
- 1: https://github.com/zeit/styled-jsx/blob/master/readme.md
- 2: https://github.com/vercel/styled-jsx
- 3: https://registry.npmjs.org/styled-jsx
- 4: https://stackoverflow.com/questions/69064251/why-is-this-keyframe-animation-not-applied-when-using-styled-jsx
- 5: https://github.com/vercel/styled-jsx/blob/main/readme.md
- 6: https://stackoverflow.com/questions/57455196/styled-jsx-dynamic-animation-for-multiple-elements
Use a global keyframe for the inline animation.
<style jsx> scopes the keyframe name, and the hash applied to @keyframes sidebarItemIn won’t be applied to the literal animation: sidebarItemIn ... in the inline style, so the staggered entrance animation won’t run.
🐛 Proposed fix
- <style jsx>{`
+ <style jsx global>{`
`@keyframes` sidebarItemIn {
0% { opacity: 0; transform: translateX(-4px); }
100% { opacity: 1; transform: translateX(0); }
}
`}</style>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| style={{ | |
| animation: `sidebarItemIn 0.3s var(--ease-out) ${index * 0.03}s both`, | |
| }} | |
| <style jsx global>{` | |
| `@keyframes` sidebarItemIn { | |
| 0% { opacity: 0; transform: translateX(-4px); } | |
| 100% { opacity: 1; transform: translateX(0); } | |
| } | |
| `}</style> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/docs/components/docs-sidebar.tsx` around lines 36 - 38, Update the
inline animation in the docs sidebar item rendering to reference the globally
scoped keyframe name, using the framework’s global keyframe declaration rather
than the scoped `sidebarItemIn` name. Preserve the existing duration, easing,
delay, and fill-mode values.
| --- | ||
|
|
||
| # Intro | ||
| Supercode is an open source AI coding agent that works where you work — terminal, web, IDE, Slack, and more. Describe what you need, and Supercode handles the rest. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Hyphenate the compound adjective.
Use “open-source AI coding agent” in this user-facing description.
🧰 Tools
🪛 LanguageTool
[grammar] ~6-~6: Use a hyphen to join words.
Context: ... web, and IDE. --- Supercode is an open source AI coding agent that works where ...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/docs/content/docs/intro.mdx` at line 6, Update the user-facing
description in the opening content to hyphenate “open source” as “open-source,”
preserving the rest of the sentence unchanged.
Source: Linters/SAST tools
| import React from "react" | ||
| import { | ||
| Accordion, | ||
| AccordionItem, | ||
| AccordionTrigger, | ||
| AccordionContent, | ||
| } from "@/components/ui/accordion" |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Separate external and internal import groups.
Add a blank line between the React import and the @/components import. As per coding guidelines: Follow import order in the web app: React/Next → external libs → internal aliases → relative imports, with blank lines between groups.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/components/homepage/faq-section.tsx` around lines 3 - 9, Separate
the import groups in faq-section.tsx by adding a blank line after the React
import and before the internal `@/components/ui/accordion` import, preserving the
specified React/Next, external, internal-alias, and relative-import ordering.
Source: Coding guidelines
| q: "What models are available on each plan?", | ||
| a: "Spark grants access to open-weight models (DeepSeek,Minimax, Moonshot, Mistral, etc.) at a lower ctx window and low query limits. Pro adds premium models (Claude Opus, GPT-4o, Gemini Ultra) with expanded context. Ultra unlocks the full model catalog at maximum context.", | ||
| }, | ||
| { | ||
| q: "What does the Spark $1 deposit cover?", | ||
| a: "Spark cost $1/month for all new users — fully refundable(terms & conditions applied). It is free for existing users. You can request a refund at any time.", | ||
| }, | ||
| { | ||
| q: "How does regional pricing work for Pro?", | ||
| a: "We offer location-based pricing for the Pro plan. Indian users pay $9/month (or $100/year). International users pay $12/month (or $140/year). All other plans are priced uniformly worldwide.", |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Correct the customer-facing plan copy.
“DeepSeek,Minimax,” “Spark cost,” and “refundable(terms” contain visible spacing and grammar errors.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/components/homepage/faq-section.tsx` around lines 21 - 30, Update
the FAQ answer strings in the homepage FAQ data: add spacing in “DeepSeek,
Minimax,” correct “Spark cost” to “Spark costs,” and separate “refundable” from
the parenthetical terms text in “refundable (terms & conditions applied).”
|
|
||
| const FAQSection = () => { | ||
| return ( | ||
| <section className="py-24 px-6 border-t border-border"> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add data-slot identifiers to both new section roots.
apps/web/components/homepage/faq-section.tsx#L53-L53: adddata-slot="faq-section"to the<section>.apps/web/components/homepage/providers-section.tsx#L51-L54: adddata-slot="providers-section"to the<section>.
As per coding guidelines: use data-slot attributes for component identification.
📍 Affects 2 files
apps/web/components/homepage/faq-section.tsx#L53-L53(this comment)apps/web/components/homepage/providers-section.tsx#L51-L54
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/components/homepage/faq-section.tsx` at line 53, Add
data-slot="faq-section" to the root section in
apps/web/components/homepage/faq-section.tsx at lines 53-53, and add
data-slot="providers-section" to the root section in
apps/web/components/homepage/providers-section.tsx at lines 51-54. Use these
identifiers for component identification without changing the sections’ existing
structure or styling.
Source: Coding guidelines
| import React, { useEffect, useRef, useState } from "react" | ||
| import Link from "next/link" | ||
| import { ArrowUpRight } from "lucide-react" |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Separate the React/Next and external import groups.
Add a blank line before the lucide-react import. As per coding guidelines: Follow import order in the web app: React/Next → external libs → internal aliases → relative imports, with blank lines between groups.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/components/homepage/providers-section.tsx` around lines 3 - 5,
Update the imports in the providers section so the React/Next imports are
separated from the external lucide-react import by a blank line, preserving the
prescribed import grouping order.
Source: Coding guidelines
| <div className="mt-8"> | ||
| <Link | ||
| href="/docs/providers" | ||
| className="inline-flex items-center gap-2 text-[13px] font-mono text-muted-foreground hover:text-foreground transition-colors group" | ||
| > | ||
| <span>see all providers</span> | ||
| <ArrowUpRight className="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-200" /> | ||
| </Link> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Route the provider CTA through the docs application.
/docs/providers resolves on the web app origin, while the supplied homepage context configures documentation as a separate app (including a localhost:3001 fallback). Use the configured docs origin/base when building this URL; otherwise the CTA breaks in local development.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/components/homepage/providers-section.tsx` around lines 116 - 123,
Update the provider CTA Link in the providers section to build its destination
from the configured documentation origin/base, including the existing
localhost:3001 fallback, instead of the web-relative "/docs/providers" path.
Preserve the "/docs/providers" route suffix while reusing the established docs
configuration symbol.
1 participant
Description
Update site and doc
Type of change
How Has This Been Tested?
Please describe the tests that you ran to verify your changes.
bun testpassesbun run typecheckpassesbun run lintpasses (if applicable)Checklist:
Summary by CodeRabbit
New Features
Documentation
Enhancements