feat: Auto Context and Dark Mode improvements

apps/desktop/src-tauri/capabilities/default.json

@@ -2,7 +2,9 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": ["*"],
+  "windows": [
+    "*"
+  ],
   "permissions": [
     "core:default",
     "fs:default",
@@ -39,9 +41,12 @@
       "identifier": "http:default",
       "allow": [
         {
-          "url": "https://github.com/Fanzzzd/repo-wizard/releases/latest/download/latest.json"
+          "url": "http://*"
+        },
+        {
+          "url": "https://*"
         }
       ]
     }
   ]
-}
+}

apps/desktop/src-tauri/tauri.conf.json

@@ -59,4 +59,4 @@
       ]
     }
   }
-}
+}

apps/desktop/src/components/Header.tsx

@@ -22,13 +22,13 @@ function VersionStatus() {
       icon: <RefreshCw size={14} />,
       text: `v${__APP_VERSION__}`,
       style:
-        'text-gray-600 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-700',
+        'text-gray-600 hover:bg-gray-200 dark:text-[#a3a3a3] dark:hover:bg-[#262626]',
       title: 'Check for updates',
     },
     pending: {
       icon: <RefreshCw size={14} className="animate-spin" />,
       text: 'Checking...',
-      style: 'text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-400',
+      style: 'text-gray-500 bg-gray-100 dark:bg-[#262626] dark:text-[#a3a3a3]',
       title: 'Checking for updates...',
     },
     'up-to-date': {
@@ -42,7 +42,7 @@ function VersionStatus() {
       icon: <DownloadCloud size={14} />,
       text: 'Downloading...',
       style:
-        'text-blue-700 bg-blue-100 animate-pulse dark:bg-blue-900/50 dark:text-blue-300',
+        'text-blue-700 bg-blue-100 animate-pulse dark:bg-[#262626] dark:text-[#ededed]',
       title: 'Downloading update...',
     },
     ready: {
@@ -83,16 +83,16 @@ export function Header() {
 
   return (
     <>
-      <header className="flex items-center justify-between p-2 border-b border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-700 flex-shrink-0">
-        <h1 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
+      <header className="flex items-center justify-between p-2 border-b border-gray-200 bg-white dark:bg-[#0a0a0a] dark:border-[#262626] flex-shrink-0">
+        <h1 className="text-lg font-semibold text-gray-800 dark:text-[#ededed]">
           Repo Wizard
         </h1>
         <div className="flex items-center gap-2">
           <VersionStatus />
           <button
             type="button"
             onClick={() => setIsSettingsModalOpen(true)}
-            className="p-1.5 rounded-md hover:bg-gray-100 text-gray-600 hover:text-gray-900 dark:hover:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-100"
+            className="p-1.5 rounded-md hover:bg-gray-100 text-gray-600 hover:text-gray-900 dark:hover:bg-[#262626] dark:text-[#a3a3a3] dark:hover:text-[#f5f5f5]"
             title="Settings"
           >
             <Settings size={20} />

apps/desktop/src/components/Layout.tsx

@@ -36,18 +36,18 @@ export function Layout({ leftPanel, mainPanel, rightPanel }: LayoutProps) {
   return (
     <PanelGroup
       direction="horizontal"
-      className="h-full w-full bg-white dark:bg-gray-800"
+      className="h-full w-full bg-white dark:bg-[#171717]"
     >
       <Panel defaultSize={25} minSize={15} id="left-panel" order={1}>
         {leftPanel}
       </Panel>
-      <PanelResizeHandle className="w-px bg-gray-200 hover:bg-blue-500 transition-colors data-[resize-handle-state=drag]:bg-blue-500 dark:bg-gray-700" />
+      <PanelResizeHandle className="w-px bg-gray-200 hover:bg-gray-400 transition-colors data-[resize-handle-state=drag]:bg-gray-400 dark:bg-[#262626] dark:hover:bg-[#404040] dark:data-[resize-handle-state=drag]:bg-[#404040]" />
       <Panel minSize={40} id="main-panel" order={2}>
         {mainPanel}
       </Panel>
       <PanelResizeHandle
         className={cn(
-          'w-px bg-gray-200 hover:bg-blue-500 transition-colors data-[resize-handle-state=drag]:bg-blue-500 dark:bg-gray-700',
+          'w-px bg-gray-200 hover:bg-gray-400 transition-colors data-[resize-handle-state=drag]:bg-gray-400 dark:bg-[#262626] dark:hover:bg-[#404040] dark:data-[resize-handle-state=drag]:bg-[#404040]',
           isReviewing && 'hidden'
         )}
       />

apps/desktop/src/components/TabbedPanel.tsx

@@ -10,8 +10,8 @@ export function TabbedPanel({ tabs }: TabbedPanelProps) {
   const [activeTab, setActiveTab] = useState(tabKeys[0]);
 
   return (
-    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
-      <div className="flex border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-[#171717] text-gray-800 dark:text-[#ededed]">
+      <div className="flex border-b border-gray-200 dark:border-[#262626] flex-shrink-0">
         {tabKeys.map((key) => (
           <button
             type="button"
@@ -20,8 +20,8 @@ export function TabbedPanel({ tabs }: TabbedPanelProps) {
             className={cn(
               'px-4 py-2 text-sm font-medium transition-colors',
               activeTab === key
-                ? 'border-b-2 border-blue-500 text-gray-900 dark:text-gray-100'
-                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-700/50 dark:hover:text-gray-100'
+                ? 'border-b-2 border-blue-500 dark:border-[#ededed] text-gray-900 dark:text-[#f5f5f5]'
+                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-[#262626]/50 dark:hover:text-[#f5f5f5]'
             )}
           >
             {key}

apps/desktop/src/components/common/Button.tsx

@@ -27,10 +27,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const variantClasses = {
       primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
       secondary:
-        'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600',
+        'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-gray-500 dark:bg-[#262626] dark:text-[#ededed] dark:border-[#404040] dark:hover:bg-[#404040]',
       danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
       ghost:
-        'hover:bg-gray-100 text-gray-700 focus:ring-blue-500 dark:text-gray-200 dark:hover:bg-gray-700',
+        'hover:bg-gray-100 text-gray-700 focus:ring-gray-500 dark:text-[#ededed] dark:hover:bg-[#262626]',
     };
 
     const sizeClasses = {

apps/desktop/src/components/common/Checkbox.tsx

@@ -14,7 +14,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       <label
         title={title}
         className={cn(
-          'flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 select-none',
+          'flex items-center gap-2 text-sm text-gray-700 dark:text-[#ededed] select-none',
           className
         )}
       >
@@ -27,10 +27,10 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         />
         <div
           className={cn(
-            'relative h-[14px] w-[14px] flex-shrink-0 rounded border transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-500 peer-disabled:opacity-50',
+            'relative h-[14px] w-[14px] flex-shrink-0 rounded border transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-500 dark:peer-focus-visible:ring-neutral-500 peer-disabled:opacity-50',
             checked || isIndeterminate
-              ? 'border-blue-400 bg-blue-400'
-              : 'border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800'
+              ? 'border-neutral-600 bg-neutral-600 dark:border-neutral-500 dark:bg-neutral-500'
+              : 'border-gray-300 bg-white dark:border-[#262626] dark:bg-[#171717]'
           )}
         >
           <Check

apps/desktop/src/components/common/CommandRunnerModal.tsx

@@ -93,11 +93,11 @@ export function CommandRunnerModal() {
           fontFamily: 'monospace',
           fontSize: 13,
           theme: {
-            background: '#1f2937', // bg-gray-800
-            foreground: '#d1d5db', // text-gray-300
+            background: '#171717', // neutral-900
+            foreground: '#d4d4d4', // neutral-300
             cursor: '#facc15', // yellow-400
-            selectionBackground: '#374151', // bg-gray-700
-            selectionForeground: '#f9fafb', // text-gray-50
+            selectionBackground: '#404040', // neutral-700
+            selectionForeground: '#ededed', // neutral-100
           },
         });
         const fitAddon = new FitAddon();
@@ -153,11 +153,11 @@ export function CommandRunnerModal() {
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.95, y: 10 }}
             transition={{ duration: 0.2 }}
-            className="bg-gray-900 text-white rounded-lg shadow-xl w-full max-w-4xl h-[70vh] flex flex-col overflow-hidden"
+            className="bg-gray-900 dark:bg-[#171717] text-white rounded-lg shadow-xl w-full max-w-4xl h-[70vh] flex flex-col overflow-hidden"
             onClick={(e) => e.stopPropagation()}
             onAnimationComplete={fitAndResizePty}
           >
-            <header className="flex-shrink-0 bg-gray-800 p-2 pl-4 flex items-center justify-between">
+            <header className="flex-shrink-0 bg-gray-800 dark:bg-[#262626] p-2 pl-4 flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <p className="font-semibold">Terminal</p>
                 {isFinished && (
@@ -188,7 +188,7 @@ export function CommandRunnerModal() {
               ref={termContainerRef}
               className="flex-grow p-2 select-text"
               style={{
-                backgroundColor: '#1f2937',
+                backgroundColor: '#171717',
               }}
             />
           </motion.div>

apps/desktop/src/components/common/DropdownMenu.tsx

@@ -149,7 +149,7 @@ export function DropdownMenuContent({ children }: PropsWithChildren<unknown>) {
           animate={{ opacity: 1, y: 0, scale: 1 }}
           exit={{ opacity: 0, y: 10, scale: 0.95 }}
           transition={{ duration: 0.15 }}
-          className="fixed bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-30 p-1"
+          className="fixed bg-white dark:bg-[#171717] border border-gray-200 dark:border-[#262626] rounded-lg shadow-lg z-30 p-1"
           style={style}
         >
           {children}
@@ -188,11 +188,11 @@ export function DropdownMenuItem({
         'w-full flex items-center gap-2 px-3 py-1.5 text-sm rounded-md text-left transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent',
         isDanger
           ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10'
-          : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+          : 'text-gray-700 hover:bg-gray-100 dark:text-[#d4d4d4] dark:hover:bg-[#262626]'
       )}
     >
       {leftIcon && (
-        <div className="w-4 h-4 flex items-center justify-center text-gray-500 dark:text-gray-400">
+        <div className="w-4 h-4 flex items-center justify-center text-gray-500 dark:text-[#a3a3a3]">
           {leftIcon}
         </div>
       )}
@@ -202,12 +202,12 @@ export function DropdownMenuItem({
 }
 
 export function DropdownMenuSeparator() {
-  return <div className="h-px bg-gray-200 dark:bg-gray-700 my-1 -mx-1" />;
+  return <div className="h-px bg-gray-200 dark:bg-[#262626] my-1 -mx-1" />;
 }
 
 export function DropdownMenuLabel({ children }: PropsWithChildren<unknown>) {
   return (
-    <div className="px-3 py-1.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">
+    <div className="px-3 py-1.5 text-xs font-semibold text-gray-500 dark:text-[#737373] uppercase tracking-wider select-none">
       {children}
     </div>
   );
@@ -261,15 +261,15 @@ export function DropdownMenuSubTrigger({
       type="button"
       disabled={disabled}
       aria-haspopup="menu"
-      className="w-full flex items-center gap-2 px-3 py-1.5 text-sm rounded-md text-left transition-colors text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+      className="w-full flex items-center gap-2 px-3 py-1.5 text-sm rounded-md text-left transition-colors text-gray-700 hover:bg-gray-100 dark:text-[#d4d4d4] dark:hover:bg-[#262626] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
     >
       {leftIcon && (
-        <div className="w-4 h-4 flex items-center justify-center text-gray-500 dark:text-gray-400">
+        <div className="w-4 h-4 flex items-center justify-center text-gray-500 dark:text-[#a3a3a3]">
           {leftIcon}
         </div>
       )}
       <span className="flex-grow">{children}</span>
-      <ChevronRight size={16} className="text-gray-500 dark:text-gray-400" />
+      <ChevronRight size={16} className="text-gray-500 dark:text-[#a3a3a3]" />
     </button>
   );
 }
@@ -343,7 +343,7 @@ export function DropdownMenuSubContent({
             scale: 0.98,
           }}
           transition={{ duration: 0.1 }}
-          className="fixed min-w-[220px] w-max origin-left bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl z-40 p-1"
+          className="fixed min-w-[220px] w-max origin-left bg-white dark:bg-[#171717] border border-gray-200 dark:border-[#262626] rounded-lg shadow-xl z-40 p-1"
           style={style}
         >
           {children}

apps/desktop/src/components/common/HorizontalScroller.tsx

@@ -165,9 +165,9 @@ export function HorizontalScroller({ children }: HorizontalScrollerProps) {
           isOverflowing && showIndicator ? 'opacity-100' : 'opacity-0'
         )}
       >
-        <div className="relative h-full bg-blue-200/50 rounded-full">
+        <div className="relative h-full bg-blue-200/50 dark:bg-[#262626] rounded-full">
           <div
-            className="absolute h-full bg-blue-500/70 rounded-full"
+            className="absolute h-full bg-blue-500/70 dark:bg-[#404040] rounded-full"
             style={indicatorStyle}
           />
         </div>

apps/desktop/src/components/common/Input.tsx

@@ -8,7 +8,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         ref={ref}
-        className={cn('form-input-base', className)}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-[#262626] dark:text-[#ededed] dark:placeholder:text-[#a3a3a3] dark:focus-visible:ring-[#d4d4d4]',
+          className
+        )}
         {...props}
       />
     );

apps/desktop/src/components/common/ModalDialog.tsx

@@ -7,7 +7,7 @@ const statusIcons = {
   success: <CheckCircle className="text-green-500" size={24} />,
   warning: <AlertTriangle className="text-yellow-500" size={24} />,
   error: <XCircle className="text-red-500" size={24} />,
-  info: <Info className="text-blue-500" size={24} />,
+  info: <Info className="text-blue-500 dark:text-[#ededed]" size={24} />,
 };
 
 export function ModalDialog() {
@@ -39,18 +39,18 @@ export function ModalDialog() {
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.95, y: 10 }}
             transition={{ duration: 0.2 }}
-            className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md overflow-hidden"
+            className="bg-white dark:bg-[#171717] rounded-lg shadow-xl w-full max-w-md overflow-hidden"
           >
             <div className="p-6">
               <div className="flex items-start gap-4">
                 <div className="mt-1">
                   {statusIcons[options.status ?? 'info']}
                 </div>
                 <div className="flex-1">
-                  <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100">
+                  <h3 className="text-lg font-bold text-gray-900 dark:text-[#ededed]">
                     {options.title}
                   </h3>
-                  <div className="mt-2 text-sm text-gray-600 dark:text-gray-300 select-text">
+                  <div className="mt-2 text-sm text-gray-600 dark:text-[#d4d4d4] select-text">
                     {typeof options.content === 'string' ? (
                       <p>{options.content}</p>
                     ) : (
@@ -61,14 +61,14 @@ export function ModalDialog() {
                 <button
                   type="button"
                   onClick={() => handleClose(false)}
-                  className="p-1 text-gray-400 hover:text-gray-700 rounded-full hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700"
+                  className="p-1 text-gray-400 hover:text-gray-700 rounded-full hover:bg-gray-100 dark:text-[#a3a3a3] dark:hover:text-[#ededed] dark:hover:bg-[#262626]"
                 >
                   <X size={20} />
                 </button>
               </div>
             </div>
 
-            <div className="bg-gray-50 dark:bg-gray-900/50 dark:border-t dark:border-gray-700 px-6 py-3 flex flex-row-reverse gap-3">
+            <div className="bg-gray-50 dark:bg-[#0a0a0a] dark:border-t dark:border-[#262626] px-6 py-3 flex flex-row-reverse gap-3">
               {options.type === 'confirm' && (
                 <Button
                   onClick={() => handleClose(true)}

apps/desktop/src/components/common/SegmentedControl.tsx

@@ -20,7 +20,7 @@ export function SegmentedControl<T extends string>({
   layoutId,
 }: SegmentedControlProps<T>) {
   return (
-    <div className="relative z-0 flex bg-gray-200 dark:bg-gray-700 rounded-md p-0.5">
+    <div className="relative z-0 flex bg-gray-200 dark:bg-[#262626] rounded-md p-0.5">
       {options.map((option) => (
         <button
           type="button"
@@ -29,14 +29,14 @@ export function SegmentedControl<T extends string>({
           className={cn(
             'relative flex-1 text-center text-xs px-2 py-1 font-medium transition-colors duration-200',
             value === option.value
-              ? 'text-gray-900 dark:text-gray-100'
-              : 'text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100'
+              ? 'text-gray-900 dark:text-[#ededed]'
+              : 'text-gray-600 hover:text-gray-800 dark:text-[#a3a3a3] dark:hover:text-[#ededed]'
           )}
         >
           {value === option.value && (
             <motion.div
               layoutId={layoutId}
-              className="absolute inset-0 bg-white dark:bg-gray-500 shadow-sm rounded-md"
+              className="absolute inset-0 bg-white dark:bg-[#404040] shadow-sm rounded-md"
               transition={{ type: 'spring', stiffness: 350, damping: 30 }}
             />
           )}