ui: Updated dark theme, scrollable panel, and sidebar refinements#88
Conversation
- Updated the mock plugin's JSON configuration to include new progress labels for various pacing statuses. - Modified the App component to generate mock output with detailed progress metrics for testing purposes. - Improved CSS variables for color consistency across themes, including new definitions for green, yellow, and red colors. - Adjusted side navigation styles to ensure proper contrast in light and dark modes. - Enhanced progress component styling for better visual representation in dark mode.
- Added scroll detection functionality to the App component, allowing for dynamic visibility of a gradient overlay when content is scrollable. - Introduced a new scroll reference and state to manage scroll behavior. - Updated the layout to improve content rendering within the scrollable area. - Enhanced CSS to hide the scrollbar globally for a cleaner UI experience.
Update dark theme colors, add hidden-scroll scrollable content area with gradient in
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c494da46c5
ℹ️ 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 address that feedback".
| const _15d = 15 * 24 * 60 * 60 * 1000 | ||
| const _30d = _15d * 2 | ||
| const _resets = new Date(Date.now() + _15d).toISOString() | ||
| const _pastReset = new Date(Date.now() - 60_000).toISOString() | ||
| output = { |
There was a problem hiding this comment.
In handleProbeResult, the new debug block replaces every probe response from the "mock" provider with hard-coded demo lines, so any real mock plugin data or error output is discarded. This means anyone using the mock plugin (including automated tests or manual verification) will never see actual probe results, which can hide regressions and break workflows that depend on the mock provider’s real output. This only occurs when the providerId is "mock", but it affects all environments where the mock plugin is enabled.
Useful? React with 👍 / 👎.
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 7 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="src/App.tsx">
<violation number="1" location="src/App.tsx:428">
P1: Debug code that should be removed before merging. This block overwrites all mock plugin output with hardcoded test data and will execute in production. The inline comment explicitly states "remove after visual QA".</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| <div ref={scrollRef} className="h-full overflow-y-auto scrollbar-none"> | ||
| {renderContent()} | ||
| </div> | ||
| <div className={`pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-card dark:from-muted/50 to-transparent transition-opacity duration-200 ${canScrollDown ? "opacity-100" : "opacity-0"}`} /> |
There was a problem hiding this comment.
Dark mode fade gradient uses semi-transparent color
Medium Severity
In dark mode the content area background is dark:bg-muted/50 (semi-transparent #2a2a2c at 50% opacity composited over the bg-card #1c1c1e beneath it). The fade-out gradient uses the same dark:from-muted/50, which is also semi-transparent. Because the gradient overlay can never fully obscure the scroll content underneath, text will bleed through the "fade" at the bottom instead of cleanly disappearing. In light mode from-card is fully opaque white, so it works correctly there. The gradient's from color needs to be the fully-composited opaque result of the background stack.
Additional Locations (1)
- Added support for period duration in the lineProgress function to improve pacing metrics. - Updated the mock plugin to include various pacing statuses and edge cases for testing. - Refactored the App component to remove debug code and improve clarity in handling mock output. - Changed import statements for the App component to use named exports for consistency.
There was a problem hiding this comment.
2 issues found across 5 files (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="plugins/mock/plugin.js">
<violation number="1" location="plugins/mock/plugin.js:42">
P2: Percent progress bars must use limit = 100. This mock line uses limit 10000, which violates the plugin schema and will be treated as invalid by the host.</violation>
<violation number="2" location="plugins/mock/plugin.js:43">
P2: Percent progress bars must use limit = 100. This mock line uses limit 10000, which violates the plugin schema and will be treated as invalid by the host.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| lineProgress({ label: "Over limit!", used: 1337, limit: 1000, format: { kind: "count", suffix: "requests" } }), | ||
| lineProgress({ label: "Huge numbers", used: 8429301, limit: 10000000, format: { kind: "count", suffix: "tokens" } }), | ||
| lineProgress({ label: "Tiny sliver", used: 1, limit: 10000, format: { kind: "percent" } }), | ||
| lineProgress({ label: "Almost full", used: 9999, limit: 10000, format: { kind: "percent" } }), |
There was a problem hiding this comment.
P2: Percent progress bars must use limit = 100. This mock line uses limit 10000, which violates the plugin schema and will be treated as invalid by the host.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At plugins/mock/plugin.js, line 43:
<comment>Percent progress bars must use limit = 100. This mock line uses limit 10000, which violates the plugin schema and will be treated as invalid by the host.</comment>
<file context>
@@ -1,342 +1,55 @@
+ lineProgress({ label: "Over limit!", used: 1337, limit: 1000, format: { kind: "count", suffix: "requests" } }),
+ lineProgress({ label: "Huge numbers", used: 8429301, limit: 10000000, format: { kind: "count", suffix: "tokens" } }),
+ lineProgress({ label: "Tiny sliver", used: 1, limit: 10000, format: { kind: "percent" } }),
+ lineProgress({ label: "Almost full", used: 9999, limit: 10000, format: { kind: "percent" } }),
+ lineProgress({ label: "Expired reset", used: 42, limit: 100, format: { kind: "percent" }, resetsAt: _pastReset, periodDurationMs: _30d }),
+ // Text lines
</file context>
| lineProgress({ label: "Almost full", used: 9999, limit: 10000, format: { kind: "percent" } }), | |
| lineProgress({ label: "Almost full", used: 99.9, limit: 100, format: { kind: "percent" } }), |
| lineProgress({ label: "Exactly full", used: 1000, limit: 1000, format: { kind: "count", suffix: "tokens" } }), | ||
| lineProgress({ label: "Over limit!", used: 1337, limit: 1000, format: { kind: "count", suffix: "requests" } }), | ||
| lineProgress({ label: "Huge numbers", used: 8429301, limit: 10000000, format: { kind: "count", suffix: "tokens" } }), | ||
| lineProgress({ label: "Tiny sliver", used: 1, limit: 10000, format: { kind: "percent" } }), |
There was a problem hiding this comment.
P2: Percent progress bars must use limit = 100. This mock line uses limit 10000, which violates the plugin schema and will be treated as invalid by the host.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At plugins/mock/plugin.js, line 42:
<comment>Percent progress bars must use limit = 100. This mock line uses limit 10000, which violates the plugin schema and will be treated as invalid by the host.</comment>
<file context>
@@ -1,342 +1,55 @@
+ lineProgress({ label: "Exactly full", used: 1000, limit: 1000, format: { kind: "count", suffix: "tokens" } }),
+ lineProgress({ label: "Over limit!", used: 1337, limit: 1000, format: { kind: "count", suffix: "requests" } }),
+ lineProgress({ label: "Huge numbers", used: 8429301, limit: 10000000, format: { kind: "count", suffix: "tokens" } }),
+ lineProgress({ label: "Tiny sliver", used: 1, limit: 10000, format: { kind: "percent" } }),
+ lineProgress({ label: "Almost full", used: 9999, limit: 10000, format: { kind: "percent" } }),
+ lineProgress({ label: "Expired reset", used: 42, limit: 100, format: { kind: "percent" }, resetsAt: _pastReset, periodDurationMs: _30d }),
</file context>
| lineProgress({ label: "Tiny sliver", used: 1, limit: 10000, format: { kind: "percent" } }), | |
| lineProgress({ label: "Tiny sliver", used: 0.01, limit: 100, format: { kind: "percent" } }), |
1 participant
Refreshed dark mode palette and improved panel UX across both themes.
Description
#1c1c1e/#2a2a2c), lime accent color, dark-aware progress bar tracks, and branded color fallback to white for low-luminance iconsflex flex-colon card,flex-1on inner row), hidden scrollbar track, and a fade-out gradient above the footer that animates in/out when more content is availableMade with Cursor
Note
Medium Risk
UI layout and scroll behavior changes can cause subtle regressions in sizing/overflow and dark-mode contrast, but no auth/security or data-path logic is touched.
Overview
Refreshes the UI’s dark theme palette (warmer surfaces + lime
--page-accent), adds semantic--green/yellow/red-500tokens, and tweaks component styling for better dark-mode contrast (e.g., progress track, sidebar surfaces, active indicator accent).Makes the main panel’s content area properly scroll within the card: introduces a dedicated scroll container with hidden scrollbars and a bottom fade gradient that appears only when more content is available.
Simplifies the
mockplugin from configurable “chaos” modes to a deterministicstress-testoutput (includingperiodDurationMson progress lines) and updates its manifest/tests accordingly. Also switchesAppto a named export and updates imports/tests, plus sets Tauri Rusteditionto2024.Written by Cursor Bugbot for commit 10ff923. This will update automatically on new commits. Configure here.
Summary by cubic
Refreshes dark mode with warmer surfaces and a lime accent, and updates the panel to scroll inside the card with a gradient hint that only appears when content can scroll. Improves contrast for progress bars and sidebar icons, and replaces the mock plugin with deterministic stress-test pacing metrics for visual QA.
UI Improvements
Refactors
Written for commit 10ff923. Summary will update on new commits.