feat: introduced a token-based theming system across the UI

* feat: added themes system

* feat: smart sidebar auto-hide for files/diff tabs + lower files sidebar threshold

* feat: added Checkbox component and update theming

- Add reusable Checkbox component for toggles across UI
- Replace several inputs with Checkbox in settings and commands panels
- Add DiffIcon and apply surface/border theming to key UI areas

* feat: Add convert-vscode-theme.cjs to convert VS Code themes to OpenChamber format

* refactor: remove unused permission logic from ChatInput

- Remove unused permission rules parsing logic from ChatInput
- Memoize renderTheme in DiffWorkerProvider to avoid unnecessary recalculations
- Remove forceOpaque helper in vscode theme adapter

* fix: guard VSCode theme loading in MarkdownRenderer

* feat: add custom user themes loading and reload

- Load user themes from ~/.config/openchamber/themes at runtime
- Expose /api/config/themes to fetch custom themes
- Allow theme reloading from Settings → Theme → Reload themes in the UI

packages/ui/src/components/chat/QuestionCard.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { RiCheckLine, RiCheckboxCircleFill, RiCircleLine, RiCloseLine, RiEditLine, RiListCheck3, RiQuestionLine } from '@remixicon/react';
+import { RiCheckLine, RiCloseLine, RiEditLine, RiListCheck3, RiQuestionLine } from '@remixicon/react';
+import { Checkbox } from '@/components/ui/checkbox';
 
 import { cn } from '@/lib/utils';
 import type { QuestionRequest } from '@/types/question';
@@ -191,8 +192,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                       className={cn(
                         'px-2 py-0.5 typography-meta font-medium rounded transition-colors flex items-center gap-1',
                         isActive
-                          ? 'bg-muted/40 text-foreground'
-                          : 'text-muted-foreground hover:text-foreground hover:bg-muted/20'
+                            ? 'bg-interactive-selection/40 text-foreground'
+                            : 'text-muted-foreground hover:text-foreground hover:bg-interactive-hover/20'
                       )}
                     >
                       {isSummary ? <RiListCheck3 className="h-3 w-3" /> : null}
@@ -214,7 +215,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                       key={index}
                       type="button"
                       onClick={() => setActiveTab(String(index))}
-                      className="w-full text-left rounded px-1.5 py-1 hover:bg-muted/20 transition-colors"
+                      className="w-full text-left rounded px-1.5 py-1 hover:bg-interactive-hover/20 transition-colors"
                     >
                       <div className="typography-micro text-muted-foreground">{q.header || `Question ${index + 1}`}</div>
                       <div className={cn(
@@ -248,18 +249,18 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                         disabled={isResponding}
                         className={cn(
                           'w-full px-1.5 py-1 text-left rounded transition-colors',
-                          'hover:bg-muted/30',
-                          selected ? 'bg-muted/20' : null,
+                          'hover:bg-interactive-hover/30',
+                          selected ? 'bg-interactive-selection/20' : null,
                           isResponding ? 'opacity-60 cursor-not-allowed' : null
                         )}
                       >
                         <div className="flex items-start gap-2">
                           <div className="mt-0.5 shrink-0">
-                            {selected ? (
-                              <RiCheckboxCircleFill className="h-3.5 w-3.5 text-primary" />
-                            ) : (
-                              <RiCircleLine className="h-3.5 w-3.5 text-muted-foreground/50" />
-                            )}
+                            <Checkbox
+                              checked={selected}
+                              onChange={() => handleToggleOption(option.label)}
+                              disabled={isResponding}
+                            />
                           </div>
 
                           <div className="min-w-0 flex-1">
@@ -290,8 +291,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                     disabled={isResponding}
                     className={cn(
                       'w-full px-1.5 py-1 text-left rounded transition-colors',
-                      'hover:bg-muted/30',
-                      isCustomActive ? 'bg-muted/20' : null,
+                      'hover:bg-interactive-hover/30',
+                      isCustomActive ? 'bg-interactive-selection/20' : null,
                       isResponding ? 'opacity-60 cursor-not-allowed' : null
                     )}
                   >