Added dark mode cuz your app is extremely nice (I use it for myself) …

[msjabata25]

Added dark mode cuz your app is extremely nice (I use it for myself) but the lack of a dark mode (and my allergy to light mode) is an ick i needed to fix.

Fix cta buttons, quiz/flashcards feedback colors, added chat markdown support (small change with md suppport but honestly very nice to have). Also added detection for if the user already has dark mode in general or not

• Added --button-primary-bg CSS var so CTA buttons stay dark in both themes

• Added --feedback-correct/wrong CSS vars for adaptive green/rose indicators

• Fixed all CTA buttons (Generate/Reveal/Next/Send/Start) to use --button-primary-bg

• Fixed quiz option feedback, VerdictBadge, DeckComplete, FeedbackCard colors

• Darkened flashcard rating tones (50→200, 200→400) for dark mode contrast

• Fixed chat user bubble background in dark mode

• Added react-markdown rendering to chat Bubble component

Note: The Feynman session where the bubble thing is is i think still light mode but i'll try and fix it in a later contribution

---

Summary by cubic

Adds a system-aware dark mode with SSR application and a Settings toggle, with live theme changes across the app. Also hardens the visualizer sandbox and fixes settings persistence races.

• New Features

  • Dark mode via html.dark tokens and ThemeProvider; follows saved or system preference, reacts to matchMedia and SETTINGS_EVENT, and prevents FOUC with SSR + inline script.
  • Theme-aware visualizers and PDFs: Graph observes theme changes and redraws; ThreeDView updates clearColor on theme toggles without teardown; right-pane, modals, and PDFs use surface/shadow tokens.
  • Chat bubbles render Markdown via react-markdown, preserve newlines, block images, and sanitize https?:// links.

• Bug Fixes

  • Settings: POST preserves theme; restored hydration guard to prevent stale overwrites (theme toggle is exempt for instant apply); ThemeProvider no-ops on fetch failures; listens to OS preference changes.
  • Sandbox: fixed constructor-chain bypass — original constructors are no longer reachable from model code; eval remains shadowed; threat model documented.
  • Reliability: atomic writes with unique tmp suffixes for settings, docs, KG, and work context; KG builder returns an errored state instead of throwing; added docId validation (regex widened to allow hyphens).
  • UI polish: error toasts/badges and flashcard dots use feedback tokens; VoiceBlob keeps a 1:1 aspect ratio.

^{Written for commit ca54643. Summary will update on new commits.}

Greptile Summary

This PR adds a system-aware dark mode to the app, including SSR theme injection to prevent FOUC, a ThemeProvider for live theme reactivity, and a settings toggle with system-preference detection. It also backfills theme tokens across all UI components, adds Markdown rendering to chat bubbles, and includes several reliability improvements (atomic file writes, docId validation, sandbox hardening in viz-runtime, KG builder returning errored state instead of throwing).

• Dark mode system: theme is read at SSR time and injected as html.dark; a blocking inline script handles the system-preference fallback before first paint; ThemeProvider reacts to SETTINGS_EVENT and matchMedia changes without async fetch on mount.
• Sandbox fix (lib/viz-runtime.ts): ORIG_FUNC/ORIG_ASYNC/ORIG_GEN are captured at module scope (outside new Function reach) and constructors are nulled in a wrapper closure before model code runs, then restored in finally — correctly closes the closure-escape vector flagged in the previous review.
• Reliability fixes: atomic writes with UUID tmp suffixes across settings-store, kg, store, and work-context; docId regex validation on every path helper; KG build returns an errored graph state instead of rejecting to prevent unhandled rejections.

Confidence Score: 5/5

Safe to merge — the dark-mode implementation is thorough and the reliability fixes are sound. The three flagged items are minor cosmetic regressions.

The SSR + inline-script FOUC prevention is correctly implemented, the sandbox closure-escape fix is structurally sound (module-scope constants are genuinely unreachable from new Function bodies), atomic writes with UUID tmp suffixes are a clear improvement, and the docId validation closes a real path-construction gap. All three open comments are visual/UX nits: the Electron background flash only affects pre-render milliseconds for light-mode users, the amber error banner loss is cosmetic, and the missing follows-system reset path is a feature gap rather than broken behaviour.

electron/main.js (hardcoded dark titleBarOverlay/backgroundColor) and components/SettingsButton.tsx (no UI path back to system preference) are worth a second look before merge.

Important Files Changed

Filename	Overview
components/ThemeProvider.tsx	New component that applies theme reactively via custom events and system matchMedia; avoids async fetch on mount by deferring to inline script + SSR class injection.
app/layout.tsx	Reads saved theme at SSR time, injects it as a class on html, and adds a blocking inline script to handle system-preference fallback before first paint — eliminates FOUC.
components/SettingsButton.tsx	Adds dark mode toggle with system-preference detection; fixes the hydration guard via skipHydrationCheck. One gap: once an explicit theme is saved, there is no UI path back to follows-system.
electron/main.js	Changes BrowserWindow backgroundColor and Windows titleBarOverlay to hardcoded dark values, causing a dark flash before page render and a persistently dark title bar in Windows light mode.
lib/viz-runtime.ts	Sandbox hardening: ORIG_FUNC/ORIG_ASYNC/ORIG_GEN captured at module scope (not in new Function scope), preventing closure escape; constructor nulling wrapped in try/finally. Solid fix.
lib/kg-runner.ts	Refactored to return errored KnowledgeGraph state instead of throwing, preventing unhandled promise rejections; logic is otherwise unchanged.
components/RightPane/ChatView.tsx	Adds react-markdown rendering to chat bubbles with blocked images, sanitized links, and custom component styling; whitespace-pre-wrap retained for pulsing states.
components/RightPane/index.tsx	bg-white replaced with theme tokens throughout; the activeTagError banner was changed from amber/warning colors to neutral grey, losing the semantic warning signal.
lib/paths.ts	Adds assertValidDocId with /^[a-z0-9-]{1,64}$/ validation on every path-constructing export, closing a path-traversal vector.
lib/settings-store.ts	Persists optional theme field; uses unique UUID tmp suffix for atomic writes; safe round-trip for undefined/null theme.
components/Visualizer/GraphView.tsx	Adds MutationObserver on html.dark class to trigger a canvas redraw with theme-aware colors; skipResetRef prevents error/state reset on theme-only rerenders.
components/Visualizer/ThreeDView.tsx	Adds MutationObserver to update WebGL renderer clear color on theme toggle without tearing down the context; rendererRef null check prevents stale updates.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant Server as Next.js Server
    participant Script as Inline Script
    participant HTML as html element
    participant TP as ThemeProvider
    participant SB as SettingsButton

    Server->>HTML: Apply html.dark class via SSR
    Server->>Script: Embed inline script with saved theme
    Script->>HTML: Add/remove .dark before first paint
    Note over Script,HTML: No FOUC — runs synchronously before CSS

    TP->>HTML: Listen to SETTINGS_EVENT
    TP->>HTML: Listen to matchMedia change

    SB->>SB: User opens settings panel
    SB->>Server: GET /api/settings to hydrate saved theme
    SB->>SB: User clicks dark mode toggle
    SB->>HTML: classList.toggle dark
    SB->>Server: POST /api/settings with theme
    SB-->>TP: Dispatch SETTINGS_EVENT
    TP->>HTML: applyTheme from event detail

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant Server as Next.js Server
    participant Script as Inline Script
    participant HTML as html element
    participant TP as ThemeProvider
    participant SB as SettingsButton

    Server->>HTML: Apply html.dark class via SSR
    Server->>Script: Embed inline script with saved theme
    Script->>HTML: Add/remove .dark before first paint
    Note over Script,HTML: No FOUC — runs synchronously before CSS

    TP->>HTML: Listen to SETTINGS_EVENT
    TP->>HTML: Listen to matchMedia change

    SB->>SB: User opens settings panel
    SB->>Server: GET /api/settings to hydrate saved theme
    SB->>SB: User clicks dark mode toggle
    SB->>HTML: classList.toggle dark
    SB->>Server: POST /api/settings with theme
    SB-->>TP: Dispatch SETTINGS_EVENT
    TP->>HTML: applyTheme from event detail

Loading

Comments Outside Diff (1)

1. components/RightPane/ChatView.tsx, line 439-451 (link)

   Fenced code blocks without a language tag render as inline code

   isInline is derived from !className. This works for labelled fences (```ts) because react-markdown injects language-ts. For an unlabelled fence (``` with no language), react-markdown passes no className, so isInline is true and the content is wrapped in the small inline <code> span instead of the styled <pre> block. LLM responses frequently omit language labels, so multi-line code will collapse into a single inline chip. A safer guard is to additionally check that the content contains a newline before treating it as inline.

_{Reviews (5): Last reviewed commit: "fix: re-add hydration guard to persist()..." | Re-trigger Greptile}

[gemini-code-assist]

Code Review

This pull request implements a dark mode theme across the application by introducing a ThemeProvider, updating global CSS variables, and replacing hardcoded colors with theme-aware design tokens. It also adds a dark mode toggle in the settings panel and integrates markdown rendering in the chat view. The feedback highlights a critical bug in the settings API where updating other preferences wipes out the saved theme, and suggests loading the theme server-side to prevent a Flash of Unstyled Content (FOUC). Additionally, recommendations are made to use Tailwind's dark: modifier for flashcard rating colors and to replace hardcoded code block backgrounds with design system tokens to ensure proper contrast in dark mode.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[cubic-dev-ai]

8 issues found across 18 files

<sub>Tip: instead of fixing issues one by one fix them all with cubic

Re-trigger cubic</sub>

[7Mik]

@msjabata25 thanks for your submission.
Could you please look into the issues that the AI reviewers found before pulling again? I will take care of the conflicts with the developer branch afterwards.
Also, please ensure that the dark mode is applied to the whole website, including the feynman session, before applying for review again

[beltromatti]

@greptile

[msjabata25]

Fixed the issues that were in the ai reviews.
All details in the commit message .
And don't worry I did update the voice blob and made it match the theme

[7Mik]

@greptile-apps
@cubic-dev-ai

[cubic-dev-ai]

@greptile-apps
@cubic-dev-ai

@7Mik I have started the AI code review. It will take a few minutes to complete.

[greptile-apps]

The review has been posted above. Here's a quick summary of the key findings:

High priority:

1. FOUC (Flash of Unstyled Content) — ThemeProvider applies the dark class only after an async API fetch, so dark-mode users see a light flash on every page load. The fix is to emit an inline <script> in the document <head> that reads localStorage/a cookie and sets html.dark synchronously before paint.
2. PDF scroll container — scrollRef div in PdfViewer.tsx still has bg-white; the area around PDF pages stays white in dark mode.
3. Flashcard rating buttons — still using hardcoded Tailwind shades (-200, -400) instead of the --feedback-correct/wrong-* CSS variables used everywhere else in this PR.

Lower priority:

• WelcomePopup drop shadow is hardcoded to a light-mode rgba value — nearly invisible in dark mode.
• Unlabelled fenced code blocks in chat will render as inline <code> chips instead of <pre> blocks because isInline relies solely on !className.

The PR is solid overall — the token design in globals.css is well-structured and the quiz/flashcard feedback migration is consistent. These gaps are the remaining rough edges for the dark-mode experience.

Tip: You can customize Greptile's behavior for this repo with .greptile/rules.md and .greptile/config.json.

[cubic-dev-ai]

11 issues found across 29 files

<sub>Tip: instead of fixing issues one by one fix them all with cubic

Re-trigger cubic</sub>

[msjabata25]

Fixed the remaining issues (the ai reviewer is pointing out already solved issues) so if it comes out with another similar review report then i suggest you review the codebase with something else to avoid fixing the same issue over and over again

[cubic-dev-ai]

4 issues found across 29 files

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

1 issue found across 30 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[msjabata25]

Cubic reviews and greptile are all clean I think. Everything seems to be working now. I can safely say dark mode and md support for chat are done.

@7Mik @beltromatti