feat: add context window command and breakdown rendering#122
Conversation
- Introduced a new slash command `/context` to display context window usage and breakdown. - Implemented `renderContextBreakdown` function to format and output context information in the CLI. - Updated command handling to include the new context command and adjusted the slash command list accordingly. - Enhanced chat loop to track session usage and elapsed time for better context management.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
WalkthroughAdds a ChangesCLI context command
Compare page refresh
Server package version bump
Sequence Diagram(s)sequenceDiagram
participant User
participant chatLoop
participant slashCommandsIndex
participant renderContextBreakdown
participant stdout
User->>chatLoop: "/context"
chatLoop->>slashCommandsIndex: resolve result type
slashCommandsIndex-->>chatLoop: { type: "context" }
chatLoop->>renderContextBreakdown: pass model, context window, usage, elapsed
renderContextBreakdown->>stdout: write framed breakdown
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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: 3
🤖 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/supercode-cli/server/src/cli/commands/slashCommands/context-window.ts`:
- Around line 223-232: The Context Window frame width is being calculated from
an ANSI-colored title string, which makes the top border misalign with the
bottom border. Update the width logic in context-window.ts to measure the
visible text for the title using stripAnsi (as done in chatStatusBar in tui.ts),
then compute topFill from that visible length so the border spans the full
terminal width. While fixing this, remove the redundant extra
chalk.hex(theme.green) wrapping around titlePart/top so the title is only
colored once, and confirm stripAnsi is available from the shared TUI utilities
before importing it.
In `@apps/web/app/`(pages)/compare/page.tsx:
- Around line 197-198: The page is showing two different Supercode versions, so
update the version label used in the compare page to match the footer
component’s displayed version. Locate the hardcoded version text in the compare
page and make it consistent with the value rendered by the footer, or better
yet, source both from the same shared version constant so the header badge and
footer cannot drift apart.
- Around line 136-142: The hardcoded score values in the compare page are out of
sync with the feature matrix, making the “At a glance” section inconsistent with
the table. Update the scores used in the `scores` array in `compare/page.tsx` so
`OpenCode` and `Cursor` match the totals from `rows`, or derive the totals
directly from `rows` inside the compare page logic to prevent future drift.
🪄 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
Run ID: b1d4a327-ab5b-48a3-ac09-2987b23c4170
📒 Files selected for processing (6)
apps/supercode-cli/server/src/cli/ai/chat/chat.tsapps/supercode-cli/server/src/cli/commands/slashCommands/context-window.tsapps/supercode-cli/server/src/cli/commands/slashCommands/index.tsapps/web/app/(pages)/compare/page.tsxapps/web/components/homepage/footer.tsxapps/web/components/homepage/navbar.tsx
| const title = `${dim("┏━━")} ${chalk.hex(theme.green).bold("Context Window")} ${dim("━━")}` | ||
| const titlePart = chalk.hex(theme.green)(`${title}`) | ||
| const titleVisible = title.length | ||
| const topFill = Math.max(0, w - titleVisible - 1) | ||
|
|
||
| // top: full top border line | ||
| const top = chalk.hex(theme.green)(titlePart) + chalk.hex(theme.greenDim)("━".repeat(topFill)) + chalk.hex(theme.green)("┓") | ||
|
|
||
| // bottom: full bottom border line (just fill + corner) | ||
| const bottom = chalk.hex(theme.greenDim)("━".repeat(w - 2)) + chalk.hex(theme.green)("┛") |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Top border width is computed from ANSI-coded string length, so the frame collapses/misaligns.
title already contains chalk hex escape sequences, so titleVisible = title.length (Line 225) counts the invisible escape bytes, not the rendered glyphs. With a typical 80‑col terminal titleVisible exceeds w, driving topFill to 0. The result: the top border stops right after the title while the bottom border (Line 232) spans the full width, so the two never line up.
The existing TUI helper handles this by measuring with stripAnsi (see chatStatusBar in tui.ts). Apply the same here. Also note titlePart/top wrap the already-colored title in chalk.hex(theme.green) two more times (Lines 224, 229) — redundant.
🔧 Suggested fix using visible length
- const title = `${dim("┏━━")} ${chalk.hex(theme.green).bold("Context Window")} ${dim("━━")}`
- const titlePart = chalk.hex(theme.green)(`${title}`)
- const titleVisible = title.length
- const topFill = Math.max(0, w - titleVisible - 1)
-
- // top: full top border line
- const top = chalk.hex(theme.green)(titlePart) + chalk.hex(theme.greenDim)("━".repeat(topFill)) + chalk.hex(theme.green)("┓")
+ const title = `${dim("┏━━")} ${chalk.hex(theme.green).bold("Context Window")} ${dim("━━")}`
+ const titleVisible = stripAnsi(title).length
+ const topFill = Math.max(0, w - titleVisible - 1)
+
+ // top: full top border line
+ const top = title + chalk.hex(theme.greenDim)("━".repeat(topFill)) + chalk.hex(theme.green)("┓")This requires importing stripAnsi (already used elsewhere in tui.ts).
Please confirm stripAnsi is exported/available from the shared TUI utils before wiring the import.
📝 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.
| const title = `${dim("┏━━")} ${chalk.hex(theme.green).bold("Context Window")} ${dim("━━")}` | |
| const titlePart = chalk.hex(theme.green)(`${title}`) | |
| const titleVisible = title.length | |
| const topFill = Math.max(0, w - titleVisible - 1) | |
| // top: full top border line | |
| const top = chalk.hex(theme.green)(titlePart) + chalk.hex(theme.greenDim)("━".repeat(topFill)) + chalk.hex(theme.green)("┓") | |
| // bottom: full bottom border line (just fill + corner) | |
| const bottom = chalk.hex(theme.greenDim)("━".repeat(w - 2)) + chalk.hex(theme.green)("┛") | |
| const title = `${dim("┏━━")} ${chalk.hex(theme.green).bold("Context Window")} ${dim("━━")}` | |
| const titleVisible = stripAnsi(title).length | |
| const topFill = Math.max(0, w - titleVisible - 1) | |
| // top: full top border line | |
| const top = title + chalk.hex(theme.greenDim)("━".repeat(topFill)) + chalk.hex(theme.green)("┓") | |
| // bottom: full bottom border line (just fill + corner) | |
| const bottom = chalk.hex(theme.greenDim)("━".repeat(w - 2)) + chalk.hex(theme.green)("┛") |
🤖 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/supercode-cli/server/src/cli/commands/slashCommands/context-window.ts`
around lines 223 - 232, The Context Window frame width is being calculated from
an ANSI-colored title string, which makes the top border misalign with the
bottom border. Update the width logic in context-window.ts to measure the
visible text for the title using stripAnsi (as done in chatStatusBar in tui.ts),
then compute topFill from that visible length so the border spans the full
terminal width. While fixing this, remove the redundant extra
chalk.hex(theme.green) wrapping around titlePart/top so the title is only
colored once, and confirm stripAnsi is available from the shared TUI utilities
before importing it.
| const scores = [ | ||
| { label: "Supercode", value: 12 }, | ||
| { label: "OpenCode", value: 5 }, | ||
| { label: "Claude Code", value: 3 }, | ||
| { label: "Hermes Agent", value: 5 }, | ||
| { label: "Warp", value: 3 }, | ||
| { label: "Cursor", value: 6 }, | ||
| { label: "Supercode", value: 11 }, | ||
| { label: "OpenCode", value: 9 }, | ||
| { label: "FreeBuff", value: 8 }, | ||
| { label: "CommandCode", value: 7 }, | ||
| { label: "Claude Code", value: 5 }, | ||
| { label: "Cursor", value: 5 }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Fix the score totals before shipping this comparison.
These hardcoded values no longer match the feature matrix above: OpenCode currently totals 8 enabled features, and Cursor totals 4, not 9 and 5. That makes the “At a glance” section factually inconsistent with the table on the same page. Please either correct the numbers or derive them from rows so they can’t drift again.
🤖 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/app/`(pages)/compare/page.tsx around lines 136 - 142, The hardcoded
score values in the compare page are out of sync with the feature matrix, making
the “At a glance” section inconsistent with the table. Update the scores used in
the `scores` array in `compare/page.tsx` so `OpenCode` and `Cursor` match the
totals from `rows`, or derive the totals directly from `rows` inside the compare
page logic to prevent future drift.
| <span className="inline-block text-[12px] font-mono uppercase tracking-[0.25em] text-primary mb-6"> | ||
| $ Supercode v0.1.14 |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the displayed version consistent across the page.
This badge now says v0.1.14, but the supplied footer component on the same page still renders v0.1.7. Users will see two different versions at once.
🤖 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/app/`(pages)/compare/page.tsx around lines 197 - 198, The page is
showing two different Supercode versions, so update the version label used in
the compare page to match the footer component’s displayed version. Locate the
hardcoded version text in the compare page and make it consistent with the value
rendered by the footer, or better yet, source both from the same shared version
constant so the header badge and footer cannot drift apart.
1 participant
/contextto display context window usage and breakdown.renderContextBreakdownfunction to format and output context information in the CLI.Summary by CodeRabbit
/contextcommand to display session metadata and token/context usage.