Repository navigation
feat(cli): add routing and screen layout with react-router - #7
Merged
Merged
Conversation
📝 WalkthroughWalkthroughThe CLI now uses React Router for home and session routes, restores provider-backed themed layouts, and adds session shells with user, bot, error, and loading components. ChangesCLI session interface
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant CLI
participant Router
participant Home
participant NewSession
participant SessionShell
CLI->>Router: initialize memory routes
Router->>Home: render home screen
Home->>Router: navigate with message
Router->>NewSession: render new session
NewSession->>SessionShell: render session content
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)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/cli/src/components/messages/error-message.tsx (1)
10-33: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract a shared
BorderedMessagecomponent to eliminate duplication.
ErrorMessageandUserMessageshare ~90% of their JSX structure — the same outer box,SplitBorderwrapper withborderColor, and inner box withcolors.surfacebackground and centered padding. The only differences are theborderColorvalue (colors.errorvscolors.primary) andTextAttributes.DIMon the error variant's<text>. A singleBorderedMessagecomponent acceptingborderColor,message, and optionaltextAttributesprops would remove the duplication.
packages/cli/src/components/messages/error-message.tsx#L10-L33: Replace with<BorderedMessage borderColor={colors.error} message={message} textAttributes={TextAttributes.DIM} />.packages/cli/src/components/messages/user-message.tsx#L9-L32: Replace with<BorderedMessage borderColor={colors.primary} message={message} />.♻️ Proposed shared component
// packages/cli/src/components/messages/bordered-message.tsx import { TextAttributes } from "`@opentui/core`" import { useTheme } from "../../providers/theme" import { SplitBorder } from "../border" type Props = { message: string borderColor: string textAttributes?: number } export function BorderedMessage({ message, borderColor, textAttributes }: Props) { const { colors } = useTheme() return ( <box width={"100%"} alignItems="center"> <box {...SplitBorder} borderColor={borderColor} width={"100%"}> <box justifyContent="center" paddingX={2} paddingY={1} backgroundColor={colors.surface} width={"100%"} > <text attributes={textAttributes}> {message} </text> </box> </box> </box> ) }Then
ErrorMessageandUserMessagebecome thin wrappers:// error-message.tsx import { TextAttributes } from "`@opentui/core`" import { useTheme } from "../../providers/theme" import { BorderedMessage } from "./bordered-message" export function ErrorMessage({ message }: { message: string }) { const { colors } = useTheme() return <BorderedMessage message={message} borderColor={colors.error} textAttributes={TextAttributes.DIM} /> }// user-message.tsx import { useTheme } from "../../providers/theme" import { BorderedMessage } from "./bordered-message" export function UserMessage({ message }: { message: string }) { const { colors } = useTheme() return <BorderedMessage message={message} borderColor={colors.primary} /> }🤖 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 `@packages/cli/src/components/messages/error-message.tsx` around lines 10 - 33, Extract the shared JSX structure from ErrorMessage and UserMessage into a BorderedMessage component accepting message, borderColor, and optional textAttributes props. Update packages/cli/src/components/messages/error-message.tsx lines 10-33 to use BorderedMessage with colors.error and TextAttributes.DIM, and update packages/cli/src/components/messages/user-message.tsx lines 9-32 to use it with colors.primary and no textAttributes.
🤖 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.
Nitpick comments:
In `@packages/cli/src/components/messages/error-message.tsx`:
- Around line 10-33: Extract the shared JSX structure from ErrorMessage and
UserMessage into a BorderedMessage component accepting message, borderColor, and
optional textAttributes props. Update
packages/cli/src/components/messages/error-message.tsx lines 10-33 to use
BorderedMessage with colors.error and TextAttributes.DIM, and update
packages/cli/src/components/messages/user-message.tsx lines 9-32 to use it with
colors.primary and no textAttributes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 883c9329-9ac8-4389-b288-91d52da1663f
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (14)
packages/cli/package.jsonpackages/cli/src/components/border.tsxpackages/cli/src/components/messages/bot-message.tsxpackages/cli/src/components/messages/error-message.tsxpackages/cli/src/components/messages/index.tsxpackages/cli/src/components/messages/user-message.tsxpackages/cli/src/components/session-shell.tsxpackages/cli/src/components/spinner.tsxpackages/cli/src/index.tsxpackages/cli/src/layouts/root-layout.tsxpackages/cli/src/layouts/themed-root.tsxpackages/cli/src/screens/home.tsxpackages/cli/src/screens/new-session.tsxpackages/cli/src/screens/session.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
New Features
Style