refactor: replace FilterPopover with LogsSidebar in dashboard layout

[impoiler]

Summary

Refactored the dashboard page to use a sidebar-based filtering interface instead of inline filter components, improving the user experience and layout consistency.

Changes

• Replaced FilterPopover with LogsSidebar component for a persistent filtering interface
• Removed predefined time periods and custom date range picker from the header
• Restructured the layout to use a sidebar + main content area with ScrollArea
• Simplified filter handling by replacing individual filter change handlers with a unified setFilters function that accepts a complete LogFilters object
• Removed unused time period utilities and date range management code
• Updated the layout to use full viewport height with proper spacing and rounded corners

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

Navigate to the dashboard page and verify:

1. The sidebar appears on the left with filtering options
2. All dashboard tabs (Overview, Provider Usage, Model Rankings, MCP usage, User Rankings) function correctly
3. Filters in the sidebar properly update the dashboard data
4. The layout is responsive and scrollable
5. MCP-specific filters still appear in the header when on the MCP tab

# UI
cd ui
pnpm i || npm i
pnpm test || npm test
pnpm build || npm run build

Screenshots/Recordings

If UI changes, add before/after screenshots or short clips.

Breaking changes

• Yes
• No

Related issues

Link related issues and discussions. Example: Closes #123

Security considerations

No security implications - this is a UI layout refactor that doesn't change data handling or authentication.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

Warning

Rate limit exceeded

@impoiler has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 0 minutes and 31 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 0 minutes and 31 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0c2c8f36-ec71-456b-96fe-4044d71c1a5d

📥 Commits

Reviewing files that changed from the base of the PR and between c2d0d48 and cb5e7a2.

📒 Files selected for processing (1)

• ui/app/workspace/dashboard/page.tsx

📝 Walkthrough

Walkthrough

Replaced the dashboard's inline filter popover with a persistent LogsSidebar that emits full LogFilters via onFiltersChange; removed relative time-period UI and date-range picker; added setFilters adapter to serialize filters into URL state and restructured layout to include a sidebar and scrollable main content.

Changes

Cohort / File(s)

Summary

Dashboard Layout & Filter Refactor ui/app/workspace/dashboard/page.tsx

Replaced FilterPopover with LogsSidebar and moved filters into a persistent left sidebar; removed TIME_PERIODS, getTimeRangeFromPeriod, handlePeriodChange, handleDateRangeChange, and DateTimePickerWithRange; added setFilters(newFilters: LogFilters) to convert start_time/end_time to Unix seconds, clear period, serialize array-like filters as CSV, and stringify missing_cost_only into URL state; wrapped main content in a ScrollArea; retained only MCP-specific model/server selects in header when mcpFilterData exists.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant LogsSidebar
  participant DashboardPage
  participant RouterState

  User->>LogsSidebar: update filter UI (LogFilters)
  LogsSidebar->>DashboardPage: onFiltersChange(newFilters)
  DashboardPage->>DashboardPage: setFilters translates fields (timestamps -> unix, arrays -> CSV, bool -> "true"/"false", clear period)
  DashboardPage->>RouterState: push updated URL state
  RouterState-->>DashboardPage: updated urlState
  DashboardPage-->>User: refreshed dashboard content

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A sidebar pops in, tidy and bright,
Filters bundled up, turned to URL light.
Periods waved goodbye, timestamps dressed as seconds,
The dashboard hums along as the router reckons. 🎉

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR is a UI dashboard refactor unrelated to the linked issue #123 which focuses on Files API support for provider integrations.	Remove the unrelated linked issue #123 or link this PR to a relevant dashboard/UI improvement issue instead.
Out of Scope Changes check	⚠️ Warning	This UI dashboard refactor is out of scope relative to linked issue #123 which concerns Files API support for providers.	Link this PR to appropriate UI/dashboard issues or remove the Files API issue link to align PR scope with its linked issues.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely describes the main refactoring change: replacing FilterPopover with LogsSidebar in the dashboard layout.
Description check	✅ Passed	The PR description covers all major sections of the template including summary, changes, type, affected areas, testing, breaking changes, and checklist items.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 04-15-improvement_dashboard_page_filter_ui_revamp

---

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

[impoiler]

• feat: responsive design [DO NOT MERGE] #2767
• feat: replace skeleton loading states with NumberFlow animations in logs #2752
• refactor: improve chart card spacing and remove unused routing logic #2751
• refactor: extract header components and add collapsible filter sidebars #2750
• refactor: replace MCP logs filter dropdown with dedicated sidebar #2745
• refactor: move LogsSidebar to shared LogsFilterSidebar component and add dashboard date picker #2744
• refactor: replace FilterPopover with LogsSidebar in dashboard layout #2743 👈 (View in Graphite)
• feat: add sidebar filters to logs page #2731
• v1.5.0

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 3/5

Not safe to merge — TypeScript compile error blocks the build, and the previous review's P1 concerns (missing time-range controls, non-persistent alias/session/metadata filters) remain unresolved.

One P1 compile-time error (metadata_filters passed to setUrlState without being in the schema, strict mode on) would break the production build. Prior reviewer concerns about absent time-range controls and incomplete URL-state persistence for aliases, parent_request_id, and metadata filters are also still present in this revision.

ui/app/workspace/dashboard/page.tsx — setFilters function (lines 480–502) and useQueryStates schema (lines 126–162)

Important Files Changed

Filename	Overview
ui/app/workspace/dashboard/page.tsx	Replaces FilterPopover with LogsSidebar; introduces a TypeScript compile error (metadata_filters passed to setUrlState without being declared in the useQueryStates schema), an unused import, and loses time-range control.

_{Reviews (6): Last reviewed commit: "improvement: dashboard page filter UI re..." | Re-trigger Greptile}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

ui/app/workspace/dashboard/page.tsx (1)

181-194: ⚠️ Potential issue | 🟠 Major

Round-trip the full LogFilters contract, or narrow the sidebar API.

This page now accepts a full LogFilters, but it only serializes/deserializes a subset of the fields. Values like metadata_filters, content_search, latency/token bounds, aliases, and user/team/customer filters will be dropped on the next sidebar update and won't participate in refetch invalidation. Please keep filters and setFilters aligned with the actual sidebar surface, or type the sidebar callback to the smaller dashboard-supported subset.

Also applies to: 479-495

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/dashboard/page.tsx` around lines 181 - 194, The current
useMemo that builds filters (variable filters in page.tsx) only serializes a
subset of the LogFilters contract causing fields like metadata_filters,
content_search, latency/token bounds, aliases, and user/team/customer filters to
be dropped; update the implementation so filters and the sidebar's setFilters
remain aligned by either (A) including all LogFilters fields in the serialized
object returned by the useMemo (round-trip every LogFilters property such as
metadata_filters, content_search, latency_min/latency_max,
tokens_min/tokens_max, aliases, user/team/customer filters, etc.), or (B) narrow
the sidebar API by changing the sidebar callback/type to a smaller
DashboardSupportedFilters type and update usages of filters/setFilters
accordingly (adjust types and any consumers that expect full LogFilters). Ensure
you update the referenced symbols filters, LogFilters, useMemo and setFilters so
future sidebar updates do not drop fields.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@ui/app/workspace/dashboard/page.tsx`:
- Around line 181-194: The current useMemo that builds filters (variable filters
in page.tsx) only serializes a subset of the LogFilters contract causing fields
like metadata_filters, content_search, latency/token bounds, aliases, and
user/team/customer filters to be dropped; update the implementation so filters
and the sidebar's setFilters remain aligned by either (A) including all
LogFilters fields in the serialized object returned by the useMemo (round-trip
every LogFilters property such as metadata_filters, content_search,
latency_min/latency_max, tokens_min/tokens_max, aliases, user/team/customer
filters, etc.), or (B) narrow the sidebar API by changing the sidebar
callback/type to a smaller DashboardSupportedFilters type and update usages of
filters/setFilters accordingly (adjust types and any consumers that expect full
LogFilters). Ensure you update the referenced symbols filters, LogFilters,
useMemo and setFilters so future sidebar updates do not drop fields.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7d04e369-9b7c-4142-9b80-4448e8b5b489

📥 Commits

Reviewing files that changed from the base of the PR and between 8dd7ef5 and 0ef6c20.

📒 Files selected for processing (1)

• ui/app/workspace/dashboard/page.tsx

[coderabbitai]

🧹 Nitpick comments (1)

ui/app/workspace/dashboard/page.tsx (1)

2-2: Unused import: DateTimePickerWithRange

This import is no longer used after removing the date range picker from the header. Removing it will reduce bundle size and improve clarity.

🧹 Proposed fix

 import { LogsSidebar } from "@/app/workspace/logs/views/logsSidebar";
-import { DateTimePickerWithRange } from "@/components/ui/datePickerWithRange";
 import { ScrollArea } from "@/components/ui/scrollArea";

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/dashboard/page.tsx` at line 2, Remove the unused import
DateTimePickerWithRange from the top of page.tsx; locate the import statement
referencing DateTimePickerWithRange and delete it, and then run a quick search
for any remaining references to DateTimePickerWithRange in the same module (or
related components) to ensure nothing else depends on it and the file still
compiles.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@ui/app/workspace/dashboard/page.tsx`:
- Line 2: Remove the unused import DateTimePickerWithRange from the top of
page.tsx; locate the import statement referencing DateTimePickerWithRange and
delete it, and then run a quick search for any remaining references to
DateTimePickerWithRange in the same module (or related components) to ensure
nothing else depends on it and the file still compiles.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9f8a0d45-9e18-403c-8cb6-00949db682b3

📥 Commits

Reviewing files that changed from the base of the PR and between 0ef6c20 and 46a2604.

📒 Files selected for processing (1)

• ui/app/workspace/dashboard/page.tsx

[akshaydeo]

Merge activity

• Apr 16, 2:34 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 16, 2:35 PM UTC: Graphite couldn't merge this pull request because a downstack PR feat: add sidebar filters to logs page #2731 failed to merge.
• Apr 16, 3:16 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 16, 3:17 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.

[greptile-apps]

metadata_filters not in useQueryStates schema — TypeScript compile error

setFilters writes metadata_filters to setUrlState, but metadata_filters is not declared in the useQueryStates schema (lines 126–162). With "strict": true in tsconfig.json, TypeScript's excess-property check will reject this object literal with Object literal may only specify known properties, and 'metadata_filters' does not exist in type '…', failing pnpm build.

Either add metadata_filters: parseAsString.withDefault("") to the schema and round-trip the value, or remove the metadata_filters key from this setUrlState call to unblock compilation (noting that metadata filtering will remain non-functional until the schema is extended).