[codex] Polish settings sidebar and branch panel

[Eccentric-jamaican]

Problem statement

The settings and chat surfaces had accumulated several rough edges that made the app feel less polished than the underlying workflow. The settings page repeated titles and used borders that made sections feel generic. The chat sidebar needed clearer project/thread hierarchy, and the branch details panel could become visually noisy with redundant sources, low-value artifacts, and unbounded artifact lists.

What changed

• Refined the settings page and settings sidebar so section headings, spacing, and borders feel more deliberate.
• Polished the chat sidebar with clearer nested project/thread presentation, highlighted rails, and better icon spacing.
• Improved thread pin placement so sidebar rail and action icons breathe properly.
• Reworked the branch details panel so headings are collapsible, the visible title row is gone, and the panel height stays capped with internal scrolling.
• Curated branch panel artifacts and sources to avoid noisy entries such as generic file sources, low-value repo docs, empty sections, and duplicate artifacts.
• Added batched artifact rendering: the panel shows 5 artifacts first, then reveals 5 more at a time.

Validation

• bun run lint
• bun run typecheck
• git diff --check
• Verified the current branch details panel in the running app: it stays compact, hides empty artifact/source sections, and starts directly at the relevant heading.

Summary by CodeRabbit

• New Features

  • Thread Context artifacts now support pagination with a "Show more" button
  • Settings organized into labeled categories with descriptive section headers

• UI/UX Improvements

  • Enhanced visual indicators for active navigation states
  • Improved sidebar organization and grouping
  • Refined artifact filtering and display in Thread Context panel
  • Updated styling and spacing for visual consistency across navigation

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 192cb8f7-eee5-48f4-97b3-19cc5cde0aab

📥 Commits

Reviewing files that changed from the base of the PR and between c66a836 and afeda66.

📒 Files selected for processing (5)

• apps/web/src/components/ChatView.tsx
• apps/web/src/components/SettingsRouteView.tsx
• apps/web/src/components/SettingsSidebar.tsx
• apps/web/src/components/Sidebar.tsx
• apps/web/src/components/ThreadPinToggleButton.tsx

---

📝 Walkthrough

Walkthrough

This PR refactors thread context artifact collection and deduplication, introduces new styling constants across settings and sidebar components, and adds a visual thread rail indicator for active projects. The changes improve artifact management in the chat interface, modernize settings UI with consistent styling patterns, and enhance sidebar navigation with positional rail indicators.

Changes

Thread Context Panel and Artifact Management

Layer / File(s)	Summary
Artifact filtering constants and helper utilities apps/web/src/components/ChatView.tsx	New artifact-related constants define collection/page limits, markdown deliverable allowlist, ignored filenames/paths. Helper functions compute artifact identities, normalize payloads/tool-names, validate timestamp boundaries, and derive deduplication keys.
Refactored artifact and source collection logic apps/web/src/components/ChatView.tsx	collectThreadContextArtifacts builds prioritized candidates with dedupe keys, applies boundary/path filtering, sorts by priority/recency, and selects unique artifacts up to limit. collectThreadContextSources uses structured payload fields and boundary checks instead of summary-string matching.
Generalized collapsible component and panel state apps/web/src/components/ChatView.tsx	ThreadContextCollapsibleSection makes count/emptyLabel optional. ThreadContextPanel adds persisted collapsed state for Progress/Environment, visibleArtifactCount state, and derives pagination values for displayed/remaining artifacts.
Pin control and artifact pagination UI apps/web/src/components/ChatView.tsx	Panel pin/control logic reworked to attach pin to first section with content. Artifacts/Sources render via collapsible component with paginated display and "Show more" button for remaining artifacts.

Settings Component Styling Refactoring

Layer / File(s)	Summary
Styling constants and section descriptions apps/web/src/components/SettingsRouteView.tsx	New SETTINGS_SECTION_DESCRIPTIONS map and shared class constants (SETTINGS_SECTION_*, SETTINGS_GROUP_CLASS, SETTINGS_SUBGROUP_CLASS, SETTINGS_ROW_CLASS, SETTINGS_EMPTY_STATE_CLASS) standardize styling. Settings container and header updated to display section label and description.
Provider/account status lookup refactoring apps/web/src/components/SettingsRouteView.tsx	Provider/account/status extraction changed from useMemo-derived values to direct find(...) lookups over serverConfigQuery.data.
Settings sections styling updates apps/web/src/components/SettingsRouteView.tsx	Appearance, Models, Suggestions, Remote access, Responses, Browser use, Computer use, Safety, Providers, and Archived threads sections updated to use new class constants. Border/dashed empty states replaced with background-based variants.
Settings sidebar grouping and structure apps/web/src/components/SettingsSidebar.tsx	New SETTINGS_SIDEBAR_GROUPS configuration groups sections into labeled categories. Sidebar refactored from flat to grouped rendering with updated active styling, vertical active indicator, label truncation, and new header icon.

Sidebar Styling and Thread Rail Indicator

Layer / File(s)	Summary
Styling constants and provider glyph updates apps/web/src/components/Sidebar.tsx	New shared class constants introduced and applied to header actions, section toggles, and subsection headings. ProviderGlyph and HandoffProviderGlyph icon sizing/spacing adjusted. Settings popover trigger styling and active indicator markup revised.
Thread row padding, status dot, and spacing apps/web/src/components/Sidebar.tsx	Thread row left padding increased by depth. Status dot position shifted horizontally. SidebarMenuSubButton styling updated for active/inactive states. Internal row layout spacing (gap) adjusted. Sidebar state and memos formatting revised.
Project grouping with thread rail indicator apps/web/src/components/Sidebar.tsx	renderProjectGroup computes isActiveProject and thread rail properties: flattens rendered thread rows (including subagent descendants) into renderedThreadRowsForRail, derives selected thread rail index/height, and renders vertical rail spans. Project styling updated (rounded-md → rounded-lg). Active-project indicator element added. Thread list subtree restructured with rail wrapping and updated item layouts.
Pinned thread rows and primary navigation styling apps/web/src/components/Sidebar.tsx	renderPinnedThreadRow increases left padding. Pinned thread status dot and button styling updated. Primary navigation refactored to compute active state per action and apply conditional border/background/text styling for "New chat" vs other actions.
Header action controls and section headers apps/web/src/components/Sidebar.tsx	Header action controls (search, add project, filter, new chat) use SIDEBAR_HEADER_ACTION_CLASS. Toggle-all-projects control adds explicit disabled styling. Section toggles and subsection headings use shared class patterns. "Sort chats" control updated. Footer styling adjusted with background and border.

🎯 3 (Moderate) | ⏱️ ~25 minutes

🐰 A coat of fresh paint, from sidebar to chat, thread rails dancing with style—the UI hops forward, neat and bright! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/polish-settings-page

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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