Fix dark mode graph surfaces

[gkorland]

Summary

• make the graph canvas and node rendering theme-aware in dark mode
• replace the hardcoded chat loading GIF with a theme-aware spinner
• restyle graph control buttons to use themed card surfaces

Testing

• npm --prefix ./app run lint
• npm --prefix ./app run build

Summary by CodeRabbit

Release Notes

• New Features

  • Added theme-aware rendering to graph visualization, supporting dark and light mode color schemes.

• Style

  • Redesigned loading indicator with animated spinner and text feedback.
  • Updated control button styling with improved borders and hover states.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 929f000f-886e-4abc-984b-71d564239325

📥 Commits

Reviewing files that changed from the base of the PR and between d9c0d49 and 07e9497.

📒 Files selected for processing (3)

• app/src/components/chat.tsx
• app/src/components/graphView.tsx
• app/src/globals.css

---

📝 Walkthrough

Walkthrough

The pull request introduces theme-aware styling throughout the application. It replaces a static loading image with a dynamic Loader2 spinner component in the chat UI, implements theme-driven color logic in the graph view component, and updates control button styling with improved visual feedback.

Changes

Cohort / File(s)	Summary
Loading Indicator Update app/src/components/chat.tsx	Replaced static waiting image with styled loader UI featuring Loader2 spinner and "Thinking..." text in a bordered card-like container. Added Loader2 import from lucide-react.
Theme-Aware Graph Rendering app/src/components/graphView.tsx	Implemented theme-driven color logic using useTheme hook. Added color constants for light/dark backgrounds and foregrounds. Updated node rendering to use theme-derived colors for fills, strokes, and labels instead of hardcoded values. Extended dependency arrays and passed theme colors to ForceGraph component.
Control Button Styling app/src/globals.css	Updated .control-button class with new background (card), text color (card-foreground), border styling, and hover state with accent background. Added color transition effect.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A spinner spins, the graph now glows,
With colors bright that ebb and flows,
Dark modes gleam and light themes shine,
Each button styled with fresh design,
The UI hops along just fine! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix dark mode graph surfaces' directly aligns with the main PR objective of making graph canvas and node rendering theme-aware to fix dark mode appearance issues.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/fix-dark-mode-surfaces-20260314-1506

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}