Make the UI more consistent with current

kylecarbs · kylecarbs · commit 1241a0882979 · 2025-10-22T22:08:46.000-04:00
diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
@@ -342,7 +342,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
               workspaceId={workspaceId}
               tooltipPosition="bottom"
             />
-            <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+            <span className="font-mono text-xs whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
               {projectName} / {branch}
             </span>
             <span className="font-mono text-[#888] font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
@@ -704,7 +704,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div
-      className="relative pt-[5px] px-[15px] pb-[15px] bg-[#252526] border-t border-[#3e3e42] flex flex-col gap-2"
+      className="relative pt-[5px] px-[15px] pb-[15px] bg-[#252526] border-t border-[#3e3e42] flex flex-col gap-1"
       style={{ containerType: "inline-size" }}
       data-component="ChatInputSection"
     >
@@ -792,8 +792,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             >
               <ToggleGroup<UIMode>
                 options={[
-                  { value: "exec", label: "Exec" },
-                  { value: "plan", label: "Plan" },
+                  { value: "exec", label: "Exec", activeClassName: "bg-exec-mode text-white" },
+                  { value: "plan", label: "Plan", activeClassName: "bg-plan-mode text-white" },
                 ]}
                 value={mode}
                 onChange={setMode}
diff --git a/src/components/KebabMenu.tsx b/src/components/KebabMenu.tsx
@@ -110,7 +110,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
                 onClick={() => handleItemClick(item)}
                 title={item.tooltip}
                 className={cn(
-                  "w-full border-none border-b border-[#2d2d30] text-[11px] py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
+                  "w-full border-none border-b border-[#2d2d30] 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-[#1e1e1e] text-[#808080] cursor-not-allowed opacity-50 hover:bg-[#1e1e1e] hover:text-[#808080]"
diff --git a/src/components/Messages/AssistantMessage.tsx b/src/components/Messages/AssistantMessage.tsx
@@ -90,7 +90,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // Empty streaming state
     if (isStreaming && !content) {
       return (
-        <div className="font-primary text-[13px] text-text-secondary italic">
+        <div className="font-primary text-[13px] text-secondary italic">
           Waiting for response...
         </div>
       );
diff --git a/src/components/Messages/MessageWindow.tsx b/src/components/Messages/MessageWindow.tsx
@@ -73,13 +73,13 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
       >
         <div className="flex items-baseline gap-3 min-w-0 flex-1" data-message-header-left>
           <div
-            className="inline-flex items-baseline uppercase tracking-wider whitespace-nowrap overflow-hidden min-w-0"
+            className="font-mono inline-flex items-baseline uppercase tracking-wider whitespace-nowrap overflow-hidden min-w-0"
             data-message-type-label
           >
             {label}
           </div>
           {formattedTimestamp && (
-            <span className="text-[10px] text-text-secondary font-normal" data-message-timestamp>
+            <span className="text-[10px] font-normal font-mono opacity-50" data-message-timestamp>
               {formattedTimestamp}
             </span>
           )}
diff --git a/src/components/Messages/ModelDisplay.tsx b/src/components/Messages/ModelDisplay.tsx
@@ -47,7 +47,7 @@ export const ModelDisplay: React.FC<ModelDisplayProps> = ({ modelString, showToo
           {providerIcon}
         </span>
       )}
-      <span className="inline">{displayName}</span>
+      <span className="font-mono inline">{displayName}</span>
     </span>
   );
 
diff --git a/src/components/Messages/ReasoningMessage.tsx b/src/components/Messages/ReasoningMessage.tsx
@@ -72,7 +72,7 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
       </div>
 
       {isExpanded && (
-        <div className="font-primary text-xs leading-6 text-text-secondary italic opacity-85 [&_p]:mb-1 [&_p]:mt-0 [&_p:last-child]:mb-0">
+        <div className="font-primary text-sm leading-6 italic opacity-85 [&_p]:mb-1 [&_p]:mt-0 [&_p:last-child]:mb-0">
           {renderContent()}
         </div>
       )}
diff --git a/src/components/Messages/StreamErrorMessage.tsx b/src/components/Messages/StreamErrorMessage.tsx
@@ -16,7 +16,7 @@ export const StreamErrorMessage: React.FC<StreamErrorMessageProps> = ({ message,
       <div className="font-primary text-[13px] font-semibold text-error mb-3 flex items-center gap-2.5 tracking-wide">
         <span className="text-base leading-none">●</span>
         <span>Stream Error</span>
-        <span className="font-mono text-[10px] text-text-secondary uppercase bg-black/40 px-2 py-0.5 rounded-sm tracking-wider">
+        <span className="font-mono text-[10px] text-secondary uppercase bg-black/40 px-2 py-0.5 rounded-sm tracking-wider">
           {message.errorType}
         </span>
         {showCount && (
diff --git a/src/components/Messages/UserMessage.tsx b/src/components/Messages/UserMessage.tsx
@@ -121,7 +121,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       className={className}
     >
       {content && (
-        <pre className="m-0 font-mono text-xs leading-6 whitespace-pre-wrap break-words text-[#999999] opacity-90">
+        <pre className="m-0 font-mono text-xs leading-4 whitespace-pre-wrap break-words text-[#999999] opacity-90">
           {content}
         </pre>
       )}
diff --git a/src/components/ModelSelector.tsx b/src/components/ModelSelector.tsx
@@ -185,7 +185,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
       return (
         <div ref={containerRef} className="relative flex items-center gap-1">
           <div
-            className="text-[10px] text-[#808080] font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px] dir-rtl text-left hover:bg-[#2a2a2b]"
+            className="font-mono text-[10px] text-[#808080] font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px] dir-rtl text-left hover:bg-[#2a2a2b]"
             onClick={handleClick}
           >
             {value}
diff --git a/src/components/PinnedTodoList.tsx b/src/components/PinnedTodoList.tsx
@@ -34,7 +34,7 @@ export const PinnedTodoList: React.FC<PinnedTodoListProps> = ({ workspaceId }) =
   return (
     <div className="bg-panel-background border-t border-dashed border-[hsl(0deg_0%_28.64%)] m-0 max-h-[300px] overflow-y-auto">
       <div
-        className="px-2 pt-1 pb-0.5 font-mono text-[10px] text-text-secondary font-semibold tracking-wider cursor-pointer select-none flex items-center gap-1 hover:opacity-80"
+        className="px-2 pt-1 pb-0.5 font-mono text-[10px] text-secondary font-semibold tracking-wider cursor-pointer select-none flex items-center gap-1 hover:opacity-80"
         onClick={() => setExpanded(!expanded)}
       >
         <span
diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx
@@ -78,7 +78,7 @@ const DraggableProjectItemBase: React.FC<DraggableProjectItemProps> = ({
     <div
       ref={(node) => drag(drop(node))}
       className={cn(
-        "py-1 px-3 flex items-center border-l-[3px] border-l-transparent transition-all duration-150",
+        "py-1 px-3 flex items-center border-l-transparent transition-all duration-150",
         isDragging ? "cursor-grabbing opacity-40 [&_*]:!cursor-grabbing" : "cursor-grab",
         isOver && "bg-[rgba(0,122,204,0.08)]",
         selected && "bg-[#2a2a2b] border-l-[#007acc]",
@@ -422,7 +422,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
         >
           {!collapsed && (
             <>
-              <div className="flex justify-between items-center p-4 border-b border-[#1e1e1e]">
+              <div className="flex justify-between items-center p-4 border-b border-b-[#1e1e1e]">
                 <h2 className="m-0 text-[13px] font-semibold text-[#cccccc] uppercase tracking-[0.8px]">
                   Projects
                 </h2>
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
@@ -220,17 +220,17 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
         <div className="flex flex-col flex-1 min-w-0">
           <div
-            className="flex bg-[#2d2d2d] border-b border-[#3e3e42] [&>*]:flex-1"
+            className="flex bg-background-secondary border-b border-border [&>*]:flex-1"
             role="tablist"
             aria-label="Metadata views"
           >
             <TooltipWrapper inline>
               <button
                 className={cn(
-                  "w-full py-2.5 px-[15px] border-none cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
+                  "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "costs"
-                    ? "bg-[#252526] text-white border-b-2 border-b-[#007acc]"
-                    : "bg-transparent text-[#888888] border-b-2 border-b-transparent hover:bg-[#2d2d2d] hover:text-[#cccccc]"
+                    ? "text-white bg-[#252526] border-b-2 border-b-plan-mode"
+                    : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
                 )}
                 onClick={() => setSelectedTab("costs")}
                 id={costsTabId}
@@ -248,10 +248,10 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
             <TooltipWrapper inline>
               <button
                 className={cn(
-                  "w-full py-2.5 px-[15px] border-none cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
+                  "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "review"
-                    ? "bg-[#252526] text-white border-b-2 border-b-[#007acc]"
-                    : "bg-transparent text-[#888888] border-b-2 border-b-transparent hover:bg-[#2d2d2d] hover:text-[#cccccc]"
+                    ? "text-white bg-[#252526] border-b-2 border-b-plan-mode"
+                    : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
                 )}
                 onClick={() => setSelectedTab("review")}
                 id={reviewTabId}
diff --git a/src/components/RightSidebar/ConsumerBreakdown.tsx b/src/components/RightSidebar/ConsumerBreakdown.tsx
@@ -12,7 +12,7 @@ interface ConsumerBreakdownProps {
 
 const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumers }) => {
   if (consumers.isCalculating) {
-    return <div className="text-text-secondary italic py-3">Calculating consumer breakdown...</div>;
+    return <div className="text-secondary italic py-3">Calculating consumer breakdown...</div>;
   }
 
   if (consumers.consumers.length === 0) {
diff --git a/src/components/RightSidebar/CostsTab.tsx b/src/components/RightSidebar/CostsTab.tsx
@@ -70,7 +70,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
   if (!hasAnyData) {
     return (
       <div className="text-[#d4d4d4] font-primary text-[13px] leading-relaxed">
-        <div className="text-text-secondary text-center py-10 px-5">
+        <div className="text-secondary text-center py-10 px-5">
           <p>No messages yet.</p>
           <p>Send a message to see token usage statistics.</p>
         </div>
diff --git a/src/components/TipsCarousel.tsx b/src/components/TipsCarousel.tsx
@@ -80,7 +80,7 @@ export const TipsCarousel: React.FC = () => {
       <span className="tip-label font-medium text-[color-mix(in_srgb,var(--color-text-secondary),transparent_20%)] transition-colors duration-300">
         Tip:
       </span>
-      <span className="tip-content text-text-secondary transition-colors duration-300">
+      <span className="tip-content text-secondary transition-colors duration-300">
         {TIPS[currentTipIndex]?.content}
       </span>
     </div>
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
@@ -242,12 +242,12 @@ export function TitleBar() {
             </Tooltip>
           </TooltipWrapper>
         )}
-        <div className="font-normal tracking-wide select-text cursor-text whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+        <div className="font-normal text-xs tracking-wider select-text cursor-text whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
           cmux {gitDescribe ?? "(dev)"}
         </div>
       </div>
       <TooltipWrapper>
-        <div className="text-[10px] opacity-70 cursor-default">{buildDate}</div>
+        <div className="text-[11px] opacity-70 cursor-default">{buildDate}</div>
         <Tooltip align="right">Built at {extendedTimestamp}</Tooltip>
       </TooltipWrapper>
     </div>
diff --git a/src/components/ToggleGroup.tsx b/src/components/ToggleGroup.tsx
@@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
 export interface ToggleOption<T extends string> {
   value: T;
   label: string;
+  activeClassName?: string;
 }
 
 interface ToggleGroupProps<T extends string> {
@@ -23,10 +24,11 @@ export function ToggleGroup<T extends string>({ options, value, onChange }: Togg
             aria-pressed={isActive}
             type="button"
             className={cn(
-              "px-2 py-1 text-[11px] font-sans rounded-sm border-none cursor-pointer transition-all duration-150",
+              "px-2 py-1 text-[11px] font-sans rounded-sm border-none cursor-pointer transition-all duration-150 bg-transparent",
               isActive
                 ? "text-toggle-text-active bg-toggle-active font-medium"
-                : "text-toggle-text bg-transparent font-normal hover:text-toggle-text-hover hover:bg-toggle-hover"
+                : "text-toggle-text font-normal hover:text-toggle-text-hover hover:bg-toggle-hover",
+              isActive && option.activeClassName
             )}
           >
             {option.label}
diff --git a/src/components/VimTextArea.tsx b/src/components/VimTextArea.tsx
@@ -190,7 +190,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             )}
           </div>
           {showFocusHint && (
-            <div className="flex items-center gap-1 ml-auto">
+            <div className="flex items-center gap-1 ml-auto font-mono">
               <span>{formatKeybind(KEYBINDS.FOCUS_CHAT)} to focus</span>
             </div>
           )}
@@ -209,7 +209,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             autoComplete="off"
             {...rest}
             className={cn(
-              "w-full border text-[#d4d4d4] py-1.5 px-2 rounded font-inherit text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
+              "w-full border text-[#d4d4d4] py-1.5 px-2 rounded font-mono text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
               "placeholder:text-[#6b6b6b]",
               "focus:outline-none",
               isEditing
diff --git a/src/components/WorkspaceListItem.tsx b/src/components/WorkspaceListItem.tsx
@@ -195,7 +195,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
           />
         ) : (
           <span
-            className="text-[#ccc] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer px-1 py-0.5 rounded-sm transition-colors duration-200 min-w-0 text-right hover:bg-white/5"
+            className="text-[#ccc] text-[14px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer px-1 py-0.5 rounded-sm transition-colors duration-200 min-w-0 text-right hover:bg-white/5"
             onDoubleClick={(e) => {
               e.stopPropagation();
               startRenaming();
diff --git a/src/components/tools/FileEditToolCall.tsx b/src/components/tools/FileEditToolCall.tsx
@@ -133,7 +133,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 
   return (
     <ToolContainer expanded={expanded}>
-      <ToolHeader className="cursor-default hover:text-text-secondary">
+      <ToolHeader className="cursor-default hover:text-secondary">
         <div
           onClick={toggleExpanded}
           className="flex items-center gap-2 flex-1 cursor-pointer hover:text-text"
@@ -184,7 +184,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 
           {status === "executing" && !result && (
             <DetailSection>
-              <div className="text-[11px] text-text-secondary">
+              <div className="text-[11px] text-secondary">
                 Waiting for result
                 <LoadingDots />
               </div>
diff --git a/src/components/tools/FileReadToolCall.tsx b/src/components/tools/FileReadToolCall.tsx
@@ -86,7 +86,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
           {filePath}
         </span>
         {result && result.success && parsedContent && (
-          <span className="text-text-secondary text-[10px] ml-2">
+          <span className="text-secondary text-[10px] ml-2">
             read {formatBytes(parsedContent.actualBytes)} of {formatBytes(result.file_size)}
           </span>
         )}
@@ -98,18 +98,18 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
           <DetailSection>
             <div className="flex flex-wrap gap-4 px-2 py-1.5 bg-[var(--color-code-bg)] rounded text-[11px] leading-[1.4]">
               <div className="flex gap-1.5">
-                <span className="text-text-secondary font-medium">Path:</span>
+                <span className="text-secondary font-medium">Path:</span>
                 <span className="text-text font-monospace break-all">{args.filePath}</span>
               </div>
               {args.offset !== undefined && (
                 <div className="flex gap-1.5">
-                  <span className="text-text-secondary font-medium">Offset:</span>
+                  <span className="text-secondary font-medium">Offset:</span>
                   <span className="text-text font-monospace break-all">line {args.offset}</span>
                 </div>
               )}
               {args.limit !== undefined && (
                 <div className="flex gap-1.5">
-                  <span className="text-text-secondary font-medium">Limit:</span>
+                  <span className="text-secondary font-medium">Limit:</span>
                   <span className="text-text font-monospace break-all">{args.limit} lines</span>
                 </div>
               )}
@@ -131,7 +131,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
                 <DetailSection>
                   <DetailLabel>Content</DetailLabel>
                   <div className="m-0 px-2 py-1.5 bg-[var(--color-code-bg)] rounded text-[11px] leading-[1.4] max-h-[200px] overflow-y-auto flex">
-                    <div className="text-text-secondary opacity-40 pr-3 mr-2 border-r border-white/10 select-none text-right min-w-[40px] font-monospace">
+                    <div className="text-secondary opacity-40 pr-3 mr-2 border-r border-white/10 select-none text-right min-w-[40px] font-monospace">
                       {parsedContent.lineNumbers.map((lineNum, i) => (
                         <div key={i}>{lineNum}</div>
                       ))}
diff --git a/src/components/tools/shared/ToolPrimitives.tsx b/src/components/tools/shared/ToolPrimitives.tsx
@@ -28,7 +28,7 @@ export const ToolHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
 }) => (
   <div
     className={cn(
-      "flex items-center gap-2 cursor-pointer select-none text-foreground-secondary hover:text-foreground",
+      "flex items-center gap-2 cursor-pointer select-none text-secondary hover:text-foreground",
       className
     )}
     {...props}
diff --git a/src/styles/globals.css b/src/styles/globals.css

Original file line number	Diff line number	Diff line change
`@@ -121,7 +121,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({`
`121`	`121`	`className={className}`
`122`	`122`	`>`
`123`	`123`	`{content && (`
`124`		`- <pre className="m-0 font-mono text-xs leading-6 whitespace-pre-wrap break-words text-[#999999] opacity-90">`
	`124`	`+ <pre className="m-0 font-mono text-xs leading-4 whitespace-pre-wrap break-words text-[#999999] opacity-90">`
`125`	`125`	`{content}`
`126`	`126`	`</pre>`
`127`	`127`	`)}`
Original file line number	Diff line number	Diff line change
`@@ -185,7 +185,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(`
`185`	`185`	`return (`
`186`	`186`	`<div ref={containerRef} className="relative flex items-center gap-1">`
`187`	`187`	`<div`
`188`		`- className="text-[10px] text-[#808080] font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px] dir-rtl text-left hover:bg-[#2a2a2b]"`
	`188`	`+ className="font-mono text-[10px] text-[#808080] font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px] dir-rtl text-left hover:bg-[#2a2a2b]"`
`189`	`189`	`onClick={handleClick}`
`190`	`190`	`>`
`191`	`191`	`{value}`