feat(ui): context usage bar #972

zerob13 · 2025-10-11T05:34:56Z

add new context usage bar and minimap

Summary by CodeRabbit

New Features
- Added an interactive message minimap for quick navigation; hover to preview (synchronized with the message list) and click to jump to a message. Shows overall context usage when available.
Style
- Adjusted message item vertical spacing and refined list padding/layout to accommodate the minimap.
- Simplified the toolbar by removing the context-usage gauge; now only shows input/output tokens and tokens-per-second.

coderabbitai · 2025-10-11T05:35:05Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Adds a MessageMinimap component and integrates hover and click interactions into MessageList; tracks hovered message state and ties minimap clicks to scrolling. Adjusts message typing across MessageList and chat store, tweaks MessageItemUser padding, and removes the context-usage gauge from MessageToolbar.

Changes

Cohort / File(s)	Summary
Minimap integration & hover logic `src/renderer/src/components/message/MessageList.vue`	Reworked per-message rendering into wrappers with mouseenter/mouseleave handlers; added `hoveredMessageId` state; syncs hover between list and minimap; handles minimap clicks to scroll; adjusted padding and updated `messages` prop type to `Array<UserMessage \| AssistantMessage>`.
New minimap component `src/renderer/src/components/message/MessageMinimap.vue`	New component rendering interactive vertical bars sized by message length; emits `bar-hover` and `bar-click`; props: `messages`, `hoveredMessageId?`, `activeMessageId?`; computes bars and overallContextUsage; includes accessibility and styling.
Chat store typing changes `src/renderer/src/stores/chat.ts`	Changed `messagesMap` typing to `Map<number, Array<AssistantMessage \| UserMessage>>`; updated `setMessages` signature and `variantAwareMessages` computed return type to use `Array<AssistantMessage \| UserMessage>`.
Message item spacing tweak `src/renderer/src/components/message/MessageItemUser.vue`	Replaced root container `p-4` with `py-4`, changing vertical padding only.
Toolbar simplification `src/renderer/src/components/message/MessageToolbar.vue`	Removed context usage gauge and `getUsageColorClass`; left token counters and tokens-per-second display.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant ML as MessageList
  participant MM as MessageMinimap

  note over ML,MM: Render with messages and hovered state
  ML->>MM: render(messages, hoveredMessageId, activeMessageId)

  rect rgba(200,230,255,0.18)
  note right of MM: Minimap hover -> sync hover state
  U->>MM: hover/focus bar (messageId)
  MM-->>ML: emit bar-hover(messageId)
  ML->>ML: set hoveredMessageId = messageId
  ML-->>MM: prop update hoveredMessageId
  end

  rect rgba(200,255,200,0.18)
  note right of MM: Minimap click -> scroll action
  U->>MM: click bar (messageId)
  MM-->>ML: emit bar-click(messageId)
  ML->>ML: scrollTo(messageId)
  end

  rect rgba(255,240,200,0.18)
  note right of ML: Message item hover -> update minimap
  U->>ML: mouseenter message wrapper
  ML->>ML: set hoveredMessageId
  ML-->>MM: prop update hoveredMessageId
  U->>ML: mouseleave message wrapper
  ML->>ML: clear hoveredMessageId
  ML-->>MM: prop update hoveredMessageId=null
  end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

feat: add message navigation sidebar with search functionality #776 — Modifies MessageList.vue to add scrollToMessage behavior and exposes component API; overlaps with minimap click-to-scroll and message navigation changes.

Poem

I nibble lines and map the chat,
Tiny bars guide where messages sat.
I twitch a nose, a hover—then scroll,
Padding fluffed, the threads made whole.
No gauges now, just tidy track—hop on, click, and back. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title concisely indicates the introduction of a UI feature for displaying context usage as bars, which is a central aspect of the changeset. It references a real part of the update without using vague terms. While the PR also integrates these bars into a minimap component and hover logic, the title remains focused and relevant.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch ui/context-usage-bar

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ff292cc and 699bda9.

📒 Files selected for processing (1)

src/renderer/src/stores/chat.ts (4 hunks)

🧰 Additional context used

📓 Path-based instructions (15)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)

**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写

**/*.{js,jsx,ts,tsx}: Use OxLint for JS/TS code; pre-commit hooks run lint-staged and typecheck
Use camelCase for variables and functions
Use PascalCase for types and classes
Use SCREAMING_SNAKE_CASE for constants

Files:

src/renderer/src/stores/chat.ts

src/{main,renderer}/**/*.ts

📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)

src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging

Files:

src/renderer/src/stores/chat.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)

**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别

Files:

src/renderer/src/stores/chat.ts

src/renderer/src/**/*

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system

Files:

src/renderer/src/stores/chat.ts

src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/pinia-best-practices.mdc)

src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx}: Use modules to organize related state and actions
Implement proper state persistence for maintaining data across sessions
Use getters for computed state properties
Utilize actions for side effects and asynchronous operations
Keep the store focused on global state, not component-specific data

Files:

src/renderer/src/stores/chat.ts

src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

src/renderer/src/stores/chat.ts

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling

Files:

src/renderer/src/stores/chat.ts

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

Files:

src/renderer/src/stores/chat.ts

src/renderer/**/*.{vue,ts}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Implement lazy loading for routes and components.

Files:

src/renderer/src/stores/chat.ts

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.

Use Pinia for frontend state management (do not introduce alternative state libraries)

Files:

src/renderer/src/stores/chat.ts

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/stores/chat.ts

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)

Files:

src/renderer/src/stores/chat.ts

src/renderer/src/**

📄 CodeRabbit inference engine (AGENTS.md)

Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)

Files:

src/renderer/src/stores/chat.ts

src/renderer/src/**/*.{vue,ts}

📄 CodeRabbit inference engine (AGENTS.md)

All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n

Files:

src/renderer/src/stores/chat.ts

**/*.{js,jsx,ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

Apply Prettier formatting: single quotes, no semicolons, max width 100

Files:

src/renderer/src/stores/chat.ts

🧬 Code graph analysis (1)

src/renderer/src/stores/chat.ts (1)

src/shared/chat.d.ts (2)

AssistantMessage (39-42)

UserMessage (34-37)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-check (x64)

🔇 Additional comments (1)

src/renderer/src/stores/chat.ts (1)

39-39: Type refinement looks good.

The change from AssistantMessage[] | UserMessage[] (union of homogeneous arrays) to Array<AssistantMessage | UserMessage> (array of mixed types) is semantically more accurate for representing a message list containing both user and assistant messages.

Also applies to: 90-90, 115-115, 149-149

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.

❤️ Share

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

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting

@codex fix this CI failure
@codex address that feedback

src/renderer/src/components/message/MessageList.vue

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 712ac05 and ff292cc.

📒 Files selected for processing (4)

src/renderer/src/components/message/MessageItemUser.vue (1 hunks)
src/renderer/src/components/message/MessageList.vue (5 hunks)
src/renderer/src/components/message/MessageMinimap.vue (1 hunks)
src/renderer/src/components/message/MessageToolbar.vue (0 hunks)

💤 Files with no reviewable changes (1)

src/renderer/src/components/message/MessageToolbar.vue

🧰 Additional context used

📓 Path-based instructions (15)

src/renderer/src/**/*

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/src/**/*.vue

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

Use scoped styles to prevent CSS conflicts between components

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/**/*.{vue,ts}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Implement lazy loading for routes and components.

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.

Use Pinia for frontend state management (do not introduce alternative state libraries)

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/{src,shell,floating}/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/src/components/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Organize UI components by feature within src/renderer/src/

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/src/**

📄 CodeRabbit inference engine (AGENTS.md)

Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/src/**/*.{vue,ts}

📄 CodeRabbit inference engine (AGENTS.md)

All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

**/*.{js,jsx,ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

Apply Prettier formatting: single quotes, no semicolons, max width 100

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

src/renderer/**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

Name Vue components in PascalCase (e.g., ChatInput.vue)

Files:

src/renderer/src/components/message/MessageMinimap.vue
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/message/MessageList.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-check (x64)

src/renderer/src/components/message/MessageMinimap.vue

feat(ui): context usage bar

ff292cc

chatgpt-codex-connector bot reviewed Oct 11, 2025

View reviewed changes

src/renderer/src/components/message/MessageList.vue Show resolved Hide resolved

coderabbitai bot reviewed Oct 11, 2025

View reviewed changes

src/renderer/src/components/message/MessageMinimap.vue Show resolved Hide resolved

chore: typescript

699bda9

zerob13 merged commit c9d8979 into dev Oct 11, 2025
2 checks passed

This was referenced Oct 12, 2025

UI/refactor #977

Merged

UI/refactor #979

Merged

zerob13 deleted the ui/context-usage-bar branch November 6, 2025 10:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): context usage bar #972

feat(ui): context usage bar #972

Uh oh!

zerob13 commented Oct 11, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 11, 2025 •

edited

Loading

Other AI code review bot(s) detected

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(ui): context usage bar #972

feat(ui): context usage bar #972

Uh oh!

Conversation

zerob13 commented Oct 11, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Pre-merge checks and finishing touches

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

zerob13 commented Oct 11, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 11, 2025 •

edited

Loading