refactor: improve code quality with shared modules and theme system

[leoisadev1]

Summary

• Add semantic theme colors (success, warning, info) with light/dark mode support
• Extract shared utilities: icons.tsx and fuzzy-search.ts to reduce code duplication
• Replace hardcoded Tailwind colors with CSS variable-based theme colors across 6 components
• Extract ChatGroup component to eliminate 4 duplicate rendering blocks in sidebar
• Replace console.* with structured logger in Convex backend (streaming.ts, crons.ts)

Changes

Theme System (styles.css)

• Added --success, --warning, --info semantic colors with oklch values
• Added --font-size-caption (10px) for consistent small text
• Both light and dark mode variants

New Shared Modules

• /apps/web/src/components/icons.tsx - Centralized icon components
• /apps/web/src/lib/fuzzy-search.ts - Shared fuzzy matching logic

Components Updated

File	Changes
chat-interface.tsx	Theme colors, removed unused ReasoningPart/ShimmerText
openrouter-connect-modal.tsx	emerald → success
settings.tsx	emerald/amber/violet → success/warning/info, text-caption
model-selector.tsx	Shared icons + fuzzy-search
command-palette.tsx	Shared icons + fuzzy-search, Router navigation fixes
app-sidebar.tsx	Shared icons, ChatGroup extraction
streaming.ts	console.warn/error → logger.warn/error
crons.ts	console.log/error → structured logger with context

Testing

• ✅ bun run build - Web build passes
• ✅ bun check-types - Type check passes (only pre-existing auth.ts issues)
• ⚠️ Tests fail due to pre-existing rate-limiter module issue (unrelated)

Notes

Type errors in auth.ts/users.ts are pre-existing better-auth + convex type compatibility issues, not introduced by this PR.

[railway-app]

🚅 Deployed to the openchat-pr-483 environment in OpenChat

Service	Status	Web	Updated (UTC)
web	✅ Success (View Logs)	Web	Jan 3, 2026 at 9:03 pm

[github-actions]

🚀 Preview Deployment Ready

Environment	URL
Frontend	https://web-openchat-pr-483.up.railway.app
Convex Dashboard	Dashboard

Convex Preview Backend

• Cloud URL: https://tangible-duck-849.convex.cloud
• Site URL: https://tangible-duck-849.convex.site

---

_{🤖 Deployed automatically by GitHub Actions}

[leoisadev1]

@greptile please review this PR

[greptile-apps]

Greptile Summary

This PR improves code quality through several refactoring efforts:

• Theme System Enhancement: Added semantic color tokens (--success, --warning, --info) with light/dark mode support via oklch values, plus a text-caption utility for consistent 10px text sizing
• Code Deduplication: Extracted shared icons.tsx (14 reusable SVG icon components) and fuzzy-search.ts (fuzzyMatch/fuzzyFilter utilities) modules to eliminate repeated code across components
• Component Extraction: Created ChatGroup component in app-sidebar.tsx to eliminate 4 duplicate chat list rendering blocks
• Color Consistency: Migrated 6 components from hardcoded Tailwind colors (emerald-, amber-, violet-, red-) to CSS variable-based theme colors for proper dark mode support
• Structured Logging: Replaced console.* calls with structured logger in Convex backend (streaming.ts, crons.ts) for better observability
• Navigation Fix: Updated command-palette.tsx to use TanStack Router's navigate() instead of window.location.href, enabling proper SPA navigation

Confidence Score: 5/5

• This PR is safe to merge - it's a well-structured refactoring with no behavioral changes beyond navigation improvements
• All changes are mechanical refactoring: extracting shared utilities, replacing hardcoded colors with theme variables, and improving logging. The build passes, types check, and the changes follow existing patterns in the codebase. No new features or risky logic changes.
• No files require special attention - all changes are straightforward refactoring

Important Files Changed

Filename	Overview
apps/server/convex/crons.ts	Replaced console.* with structured logger using createLogger("Cron"). Added proper context objects to log calls for better observability.
apps/server/convex/streaming.ts	Replaced console.warn and console.error with logger.warn and logger.error for consistent structured logging.
apps/web/src/components/app-sidebar.tsx	Extracted ChatGroup component to eliminate 4 duplicate rendering blocks. Imported icons from shared icons.tsx module.
apps/web/src/components/chat-interface.tsx	Removed unused ReasoningPart and ShimmerText components. Replaced hardcoded Tailwind colors (red-*) with semantic theme colors (destructive, success).
apps/web/src/components/command-palette.tsx	Replaced window.location.href with TanStack Router navigate(). Imported shared icons and fuzzy-search utilities. Fixed navigation routes to use proper TanStack Router patterns.
apps/web/src/components/icons.tsx	New shared icon components module. Exports reusable SVG icon components with className prop support via cn() utility.
apps/web/src/components/model-selector.tsx	Imported shared icons and fuzzy-search utilities. Replaced hardcoded text-[10px] with text-caption and colors with theme semantic colors (success, warning).
apps/web/src/components/openrouter-connect-modal.tsx	Replaced emerald-* colors with success theme colors for consistent theming across light/dark modes.
apps/web/src/lib/fuzzy-search.ts	New shared fuzzy search utility module. Exports fuzzyMatch() and fuzzyFilter() functions for search functionality across components.
apps/web/src/routes/settings.tsx	Replaced hardcoded colors (emerald, amber, violet) with semantic theme colors (success, warning, info). Replaced text-[10px] with text-caption.
apps/web/src/styles.css	Added semantic theme colors (success, warning, info) with oklch values for both light and dark modes. Added text-caption font size variable (10px).

Sequence Diagram

sequenceDiagram
    participant User
    participant CommandPalette
    participant Router as TanStack Router
    participant Page

    Note over CommandPalette: Before: window.location.href
    User->>CommandPalette: Select "New Chat"
    CommandPalette->>Router: navigate({ to: "/" })
    Router->>Page: SPA navigation (no reload)
    
    Note over CommandPalette: Shared modules flow
    participant Icons as icons.tsx
    participant Fuzzy as fuzzy-search.ts
    
    CommandPalette->>Icons: Import PlusIcon, SearchIcon, etc.
    CommandPalette->>Fuzzy: Import fuzzyMatch()
    
    Note over Icons,Fuzzy: Also used by: app-sidebar, model-selector

Loading