Brighten UI colors to match original lightness

- text-neutral-200 → text-neutral-300 (main text, closer to original 83% lightness)
- text-neutral-600 → text-neutral-500 (secondary text)
- text-neutral-500 → text-neutral-400 (muted text)
- Brighten scrollbar colors to match

Author: kylecarbs

src/App.tsx

@@ -701,7 +701,7 @@ function AppInner() {
               </ErrorBoundary>
             ) : (
               <div
-                className="mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6] [&_p]:text-neutral-500"
+                className="mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6] [&_p]:text-neutral-400"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",

src/components/AIView.tsx

@@ -245,12 +245,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-950 text-neutral-200 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-500">
+        <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-400">
           <h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
         </div>
       </div>
@@ -286,12 +286,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-950 text-neutral-200 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-500">
+        <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-400">
           <h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
         </div>
       </div>
@@ -302,12 +302,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-950 text-neutral-200 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-500">
+        <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-400">
           <h3 className="m-0 mb-2.5 text-base font-medium">No Workspace Selected</h3>
           <p className="m-0 text-[13px]">
             Select a workspace from the sidebar to view and interact with Claude
@@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-neutral-950 text-neutral-200 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}
@@ -330,7 +330,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
         className="flex min-w-96 flex-1 flex-col [@media(max-width:768px)]:max-h-full [@media(max-width:768px)]:w-full [@media(max-width:768px)]:min-w-0"
       >
         <div className="flex items-center justify-between border-b border-neutral-800 bg-neutral-900 px-[15px] py-1 [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]">
-          <div className="flex min-w-0 items-center gap-2 overflow-hidden font-semibold text-neutral-200">
+          <div className="flex min-w-0 items-center gap-2 overflow-hidden font-semibold text-neutral-300">
             <StatusIndicator
               streaming={canInterrupt}
               title={
@@ -345,13 +345,13 @@ const AIViewInner: React.FC<AIViewProps> = ({
             <span className="min-w-0 truncate font-mono text-xs">
               {projectName} / {branch}
             </span>
-            <span className="min-w-0 truncate font-mono text-[11px] font-normal text-neutral-500">
+            <span className="min-w-0 truncate font-mono text-[11px] font-normal text-neutral-400">
               {namedWorkspacePath}
             </span>
             <TooltipWrapper inline>
               <button
                 onClick={handleOpenTerminal}
-                className="flex cursor-pointer items-center justify-center border-none bg-transparent p-1 text-neutral-500 transition-colors hover:text-neutral-200 [&_svg]:h-4 [&_svg]:w-4"
+                className="flex cursor-pointer items-center justify-center border-none bg-transparent p-1 text-neutral-400 transition-colors hover:text-neutral-300 [&_svg]:h-4 [&_svg]:w-4"
               >
                 <svg viewBox="0 0 16 16" fill="currentColor">
                   <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
@@ -378,7 +378,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
             className="h-full overflow-y-auto p-[15px] leading-[1.5] break-words whitespace-pre-wrap"
           >
             {mergedMessages.length === 0 ? (
-              <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-500 [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
+              <div className="flex h-full flex-1 flex-col items-center justify-center text-center text-neutral-400 [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
                 <h3>No Messages Yet</h3>
                 <p>Send a message below to begin</p>
               </div>

src/components/ChatInputToast.tsx

@@ -22,7 +22,7 @@ interface ChatInputToastProps {
 }
 
 export const SolutionLabel: React.FC<{ children: ReactNode }> = ({ children }) => (
-  <div className="text-neutral-500-light mb-1 text-[10px] uppercase">{children}</div>
+  <div className="text-neutral-400-light mb-1 text-[10px] uppercase">{children}</div>
 );
 
 export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss }) => {
@@ -71,7 +71,7 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
             <span className="text-sm leading-none">⚠</span>
             <div className="flex-1">
               {toast.title && <div className="mb-1.5 font-semibold">{toast.title}</div>}
-              <div className="mt-1.5 leading-[1.4] text-neutral-200">{toast.message}</div>
+              <div className="mt-1.5 leading-[1.4] text-neutral-300">{toast.message}</div>
               {toast.solution && (
                 <div className="font-monospace text-code-type mt-2 rounded bg-neutral-950 px-2 py-1.5 text-[11px]">
                   {toast.solution}

src/components/CommandSuggestions.tsx

@@ -114,7 +114,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
           </div>
         </div>
       ))}
-      <div className="shrink-0 border-t border-neutral-800 bg-neutral-950 px-2.5 py-1 text-center text-[10px] text-neutral-500 [&_span]:font-medium [&_span]:text-neutral-400">
+      <div className="shrink-0 border-t border-neutral-800 bg-neutral-950 px-2.5 py-1 text-center text-[10px] text-neutral-400 [&_span]:font-medium [&_span]:text-neutral-400">
         <span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
       </div>
     </div>

src/components/Context1MCheckbox.tsx

@@ -17,7 +17,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
 
   return (
     <div className="ml-2 flex items-center gap-1.5">
-      <label className="flex cursor-pointer items-center gap-1 truncate text-[10px] text-neutral-200 select-none hover:text-white">
+      <label className="flex cursor-pointer items-center gap-1 truncate text-[10px] text-neutral-300 select-none hover:text-white">
         <input
           type="checkbox"
           checked={use1M}
@@ -27,7 +27,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
         1M Context
       </label>
       <TooltipWrapper inline>
-        <span className="flex cursor-help items-center text-[10px] leading-none text-neutral-500">
+        <span className="flex cursor-help items-center text-[10px] leading-none text-neutral-400">
           ?
         </span>
         <Tooltip className="tooltip" align="center" width="auto">

src/components/DirectorySelectModal.tsx

@@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
         onKeyDown={handleKeyDown}
         placeholder="/home/user/projects/my-project"
         autoFocus
-        className="mb-5 w-full rounded border border-neutral-700 bg-neutral-900 px-3 py-2 font-mono text-sm text-white placeholder:text-neutral-500 focus:border-sky-600 focus:outline-none"
+        className="mb-5 w-full rounded border border-neutral-700 bg-neutral-900 px-3 py-2 font-mono text-sm text-white placeholder:text-neutral-400 focus:border-sky-600 focus:outline-none"
       />
       {error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
       <ModalActions>

src/components/GitStatusIndicatorView.tsx

@@ -81,7 +81,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   // Render colored indicator characters
   const renderIndicators = (indicators: string) => {
     return (
-      <span className="mr-2 shrink-0 font-mono whitespace-pre text-neutral-500">
+      <span className="mr-2 shrink-0 font-mono whitespace-pre text-neutral-400">
         {Array.from(indicators).map((char, index) => (
           <span key={index} style={{ color: getIndicatorColor(index) }}>
             {char}
@@ -101,7 +101,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
       <div className="border-neutral-900-light mb-2 flex flex-col gap-0.5 border-b pb-2">
         {branchHeaders.map((header, index) => (
           <div key={index} className="flex gap-2 font-mono leading-snug">
-            <span className="mr-2 shrink-0 font-mono whitespace-pre text-neutral-500">
+            <span className="mr-2 shrink-0 font-mono whitespace-pre text-neutral-400">
               {/* Create spacing to align with column */}
               {Array.from({ length: header.columnIndex }).map((_, i) => (
                 <span key={i} style={{ color: getIndicatorColor(i) }}>
@@ -110,7 +110,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
               ))}
               <span style={{ color: getIndicatorColor(header.columnIndex) }}>!</span>
             </span>
-            <span className="text-neutral-200">[{header.branch}]</span>
+            <span className="text-neutral-300">[{header.branch}]</span>
           </div>
         ))}
       </div>
@@ -134,14 +134,14 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
           {displayFiles.map((line, index) => (
             <div
               key={index}
-              className="font-mono text-[11px] leading-snug whitespace-pre text-neutral-200"
+              className="font-mono text-[11px] leading-snug whitespace-pre text-neutral-300"
             >
               {line}
             </div>
           ))}
         </div>
         {isTruncated && (
-          <div className="text-neutral-500-light mt-1 text-[10px] italic">
+          <div className="text-neutral-400-light mt-1 text-[10px] italic">
             (showing {LIMIT} of {dirtyFiles.length} files)
           </div>
         )}
@@ -173,8 +173,8 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
               <div className="flex gap-2 font-mono leading-snug">
                 {renderIndicators(commit.indicators)}
                 <span className="shrink-0 text-sky-600 select-all">{commit.hash}</span>
-                <span className="text-neutral-500-light shrink-0">{commit.date}</span>
-                <span className="flex-1 break-words text-neutral-200">{commit.subject}</span>
+                <span className="text-neutral-400-light shrink-0">{commit.date}</span>
+                <span className="flex-1 break-words text-neutral-300">{commit.subject}</span>
               </div>
             </div>
           ))}
@@ -187,7 +187,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   const tooltipElement = (
     <div
       className={cn(
-        "fixed z-[10000] bg-neutral-900 text-neutral-200 border border-neutral-900-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-96 max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
+        "fixed z-[10000] bg-neutral-900 text-neutral-300 border border-neutral-900-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-96 max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
         showTooltip ? "opacity-100 visible" : "opacity-0 invisible"
       )}
       style={{

src/components/KebabMenu.tsx

@@ -74,7 +74,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
       ref={buttonRef}
       onClick={() => setIsOpen(!isOpen)}
       className={cn(
-        "border border-white/20 text-neutral-200 text-[10px] py-0.5 px-2 rounded-[3px] cursor-pointer transition-all duration-200 font-primary flex items-center justify-center whitespace-nowrap",
+        "border border-white/20 text-neutral-300 text-[10px] py-0.5 px-2 rounded-[3px] cursor-pointer transition-all duration-200 font-primary flex items-center justify-center whitespace-nowrap",
         isOpen ? "bg-white/10" : "bg-none",
         "hover:bg-white/10 hover:border-white/30",
         "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -113,10 +113,10 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
                   "w-full border-none border-b border-modal-bg text-xs py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
                   "last:border-b-0",
                   item.disabled
-                    ? "bg-neutral-950 text-neutral-500-light cursor-not-allowed opacity-50 hover:bg-neutral-950 hover:text-neutral-500-light"
+                    ? "bg-neutral-950 text-neutral-400-light cursor-not-allowed opacity-50 hover:bg-neutral-950 hover:text-neutral-400-light"
                     : item.active
-                      ? "bg-white/15 text-neutral-200 cursor-pointer hover:bg-white/15 hover:text-white"
-                      : "bg-neutral-950 text-neutral-200 cursor-pointer hover:bg-white/15 hover:text-white"
+                      ? "bg-white/15 text-neutral-300 cursor-pointer hover:bg-white/15 hover:text-white"
+                      : "bg-neutral-950 text-neutral-300 cursor-pointer hover:bg-white/15 hover:text-white"
                 )}
               >
                 {item.emoji && (

src/components/LeftSidebar.tsx

@@ -47,7 +47,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
           className={cn(
             "hidden max-md:flex fixed top-3 left-3 z-[998]",
             "w-10 h-10 bg-neutral-900 border border-neutral-800 rounded-md cursor-pointer",
-            "items-center justify-center text-neutral-200 text-xl transition-all duration-200",
+            "items-center justify-center text-neutral-300 text-xl transition-all duration-200",
             "shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
             "hover:bg-neutral-900 hover:border-neutral-800",
             "active:scale-95"

src/components/Messages/AssistantMessage.tsx

@@ -90,7 +90,9 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // Empty streaming state
     if (isStreaming && !content) {
       return (
-        <div className="font-primary text-[13px] text-neutral-600 italic">Waiting for response...</div>
+        <div className="font-primary text-[13px] text-neutral-400 italic">
+          Waiting for response...
+        </div>
       );
     }
 
@@ -109,7 +111,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // Completed text renders as static content
     return content ? (
       showRaw ? (
-        <pre className="bg-code-bg m-0 rounded-sm p-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-neutral-200">
+        <pre className="bg-code-bg m-0 rounded-sm p-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-neutral-300">
           {content}
         </pre>
       ) : (