Feat/design improvements and minor bug fixes (#939)

* fix(shell): hide prompt options on desktop

* fix(chat): group continuous same-tool runs more consistently

Consecutive tool calls (Edit, Read, Grep, etc.) grouped inconsistently:

- The group threshold was 3, so a run of only 2 calls stayed ungrouped
  while a run of 3 collapsed — making two back-to-back edits look
  different from three.
- A run was broken by any interleaved message, including ones that render
  nothing (reasoning hidden when showThinking is off). Providers like
  Codex interleave hidden reasoning between tool calls, so visually
  continuous edits intermittently failed to group.

Lower TOOL_GROUP_THRESHOLD to 2 and skip non-rendered messages when
extending a run, so any 2+ consecutive same-tool calls collapse reliably.
ChatMessagesPane now passes showThinking into groupConsecutiveTools.

* fix(chat): stabilize message scroll controls

* fix: update command menu positioning

* fix(chat): refine load all overlay behavior

* fix(chat): hide load all prompt after final page

* fix(chat): remove auto scroll quick setting

* fix(chat): unify messages and composer into centered column

Constrain both ChatMessagesPane content and ChatComposer to the same
max-w-3xl centered column. Previously only
the composer had a max-width, causing messages to fill the full width
while the input stayed narrow, making them visually misaligned with
large empty gutters on either side.

* style(ui): rework light/dark theme to make it visually consistent

Rework the color system around warm neutrals and route hardcoded
surfaces through theme tokens for consistency.

- Theme tokens (index.css, ThemeContext): warm cream light mode and
  neutral charcoal dark mode, replacing the pure-white/blue-tinted
  palette; update PWA theme-color meta
- Code blocks: soft grey background in light mode via
  oneLight/oneDark, and drop the Tailwind Typography <pre> shell that
  framed the highlighter in a dark box
- Dropdowns/panels: convert CommandMenu, Quick Settings, and the JSON
  response block from hardcoded gray/slate to popover/muted/border
  tokens
- Git panel: Publish button purple -> primary blue
- Composer: drop top padding so the input sits flush with the thread

* fix: use app theme for code editor

* style(chat): unify composer toolbar heights and declutter slash-command modal

- Composer: give the permission-mode and token-usage buttons a fixed
  h-8 so every bottom-toolbar control shares one height
- CommandResultModal: replace the blue gradient header (gradient fill,
  glow blobs, blue eyebrow + icon chip) with a clean neutral header on
  popover/muted tokens

* fix(chat): header ellipsis, Codex logo on light theme, portal copy menu

- MainContentTitle: truncate the session title with an ellipsis instead
  of horizontal-scrolling it
- MessageComponent: use text-foreground for the provider logo chip so the
  currentColor Codex/OpenAI mark is visible on the light theme
- MessageCopyControl: render the copy-format dropdown in a portal so it
  escapes the chat message's `contain: paint` clip box; anchor it to the
  trigger, flip above near the viewport bottom, close on scroll/resize

* style(mcp): remove purple accents and portal the server form modal

- Replace the purple provider-button colors, heading icon, and form
  submit button with the primary token (no purple in the MCP UI)
- Portal the add/edit MCP server modal to document.body so its fixed
  overlay covers the full viewport, fixing the white band at the top
  caused by the Settings dialog's transformed tab content becoming the
  containing block

* style(ui): use Merriweather serif for chat text and Encode Sans for the rest of the UI

* fix: align activity indicator with composer input width

Wrap ActivityIndicator in the same mx-auto max-w-3xl container as the
text input so the "Analyzing…" label and Stop button stay within the
input's boundaries instead of spanning the full window width.

* style: improve thinking and stop button placements

* style(auth): modernize login, setup, and onboarding screens

* fix(chat): correct invalid dark-mode hover on AskUserQuestion options

* fix: remove unnecessary auto expand tools

* fix: resolve coderabbit comments

* fix(chat): widen chat layout and sidebar titles

* fix(branding): update CloudCLI wordmark styling

---------

Co-authored-by: Simos Mikelatos <simosmik@gmail.com>

src/components/quick-settings-panel/constants.ts

@@ -1,11 +1,10 @@
 import {
-  ArrowDown,
   Brain,
   Eye,
   Languages,
-  Maximize2,
   Mic,
 } from 'lucide-react';
+
 import type { PreferenceToggleItem } from './types';
 
 export const HANDLE_POSITION_STORAGE_KEY = 'quickSettingsHandlePosition';
@@ -16,7 +15,7 @@ export const HANDLE_POSITION_MAX = 90;
 export const DRAG_THRESHOLD_PX = 5;
 
 export const SETTING_ROW_CLASS =
-  'flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600';
+  'flex items-center justify-between p-3 rounded-lg bg-muted/60 hover:bg-accent transition-colors border border-transparent hover:border-border';
 
 export const TOGGLE_ROW_CLASS = `${SETTING_ROW_CLASS} cursor-pointer`;
 
@@ -24,11 +23,6 @@ export const CHECKBOX_CLASS =
   'h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600';
 
 export const TOOL_DISPLAY_TOGGLES: PreferenceToggleItem[] = [
-  {
-    key: 'autoExpandTools',
-    labelKey: 'quickSettings.autoExpandTools',
-    icon: Maximize2,
-  },
   {
     key: 'showRawParameters',
     labelKey: 'quickSettings.showRawParameters',
@@ -41,14 +35,6 @@ export const TOOL_DISPLAY_TOGGLES: PreferenceToggleItem[] = [
   },
 ];
 
-export const VIEW_OPTION_TOGGLES: PreferenceToggleItem[] = [
-  {
-    key: 'autoScrollToBottom',
-    labelKey: 'quickSettings.autoScrollToBottom',
-    icon: ArrowDown,
-  },
-];
-
 export const INPUT_SETTING_TOGGLES: PreferenceToggleItem[] = [
   {
     key: 'sendByCtrlEnter',

src/components/quick-settings-panel/types.ts

@@ -2,10 +2,8 @@ import type { CSSProperties } from 'react';
 import type { LucideIcon } from 'lucide-react';
 
 export type PreferenceToggleKey =
-  | 'autoExpandTools'
   | 'showRawParameters'
   | 'showThinking'
-  | 'autoScrollToBottom'
   | 'sendByCtrlEnter'
   | 'voiceEnabled';
 

src/components/quick-settings-panel/view/QuickSettingsContent.tsx

@@ -1,18 +1,19 @@
 import { Moon, Sun } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+
 import { DarkModeToggle } from '../../../shared/view/ui';
 import LanguageSelector from '../../../shared/view/ui/LanguageSelector';
 import {
   INPUT_SETTING_TOGGLES,
   SETTING_ROW_CLASS,
   TOOL_DISPLAY_TOGGLES,
-  VIEW_OPTION_TOGGLES,
 } from '../constants';
 import type {
   PreferenceToggleItem,
   PreferenceToggleKey,
   QuickSettingsPreferences,
 } from '../types';
+
 import QuickSettingsSection from './QuickSettingsSection';
 import QuickSettingsToggleRow from './QuickSettingsToggleRow';
 
@@ -48,11 +49,11 @@ export default function QuickSettingsContent({
     <div className="flex-1 space-y-6 overflow-y-auto overflow-x-hidden bg-background p-4">
       <QuickSettingsSection title={t('quickSettings.sections.appearance')}>
         <div className={SETTING_ROW_CLASS}>
-          <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
+          <span className="flex items-center gap-2 text-sm text-foreground">
             {isDarkMode ? (
-              <Moon className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <Moon className="h-4 w-4 text-muted-foreground" />
             ) : (
-              <Sun className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <Sun className="h-4 w-4 text-muted-foreground" />
             )}
             {t('quickSettings.darkMode')}
           </span>
@@ -65,13 +66,9 @@ export default function QuickSettingsContent({
         {renderToggleRows(TOOL_DISPLAY_TOGGLES)}
       </QuickSettingsSection>
 
-      <QuickSettingsSection title={t('quickSettings.sections.viewOptions')}>
-        {renderToggleRows(VIEW_OPTION_TOGGLES)}
-      </QuickSettingsSection>
-
       <QuickSettingsSection title={t('quickSettings.sections.inputSettings')}>
         {renderToggleRows(inputSettingToggles)}
-        <p className="ml-3 text-xs text-gray-500 dark:text-gray-400">
+        <p className="ml-3 text-xs text-muted-foreground">
           {t('quickSettings.sendByCtrlEnterDescription')}
         </p>
       </QuickSettingsSection>

src/components/quick-settings-panel/view/QuickSettingsPanelHeader.tsx

@@ -5,9 +5,9 @@ export default function QuickSettingsPanelHeader() {
   const { t } = useTranslation('settings');
 
   return (
-    <div className="border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900">
-      <h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white">
-        <Settings2 className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+    <div className="border-b border-border bg-muted/40 p-4">
+      <h3 className="flex items-center gap-2 text-lg font-semibold text-foreground">
+        <Settings2 className="h-5 w-5 text-muted-foreground" />
         {t('quickSettings.title')}
       </h3>
     </div>

src/components/quick-settings-panel/view/QuickSettingsPanelView.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import type { MouseEvent as ReactMouseEvent } from 'react';
+
 import { useDeviceSettings } from '../../../hooks/useDeviceSettings';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useQuickSettingsDrag } from '../hooks/useQuickSettingsDrag';
 import type { PreferenceToggleKey, QuickSettingsPreferences } from '../types';
+
 import QuickSettingsContent from './QuickSettingsContent';
 import QuickSettingsHandle from './QuickSettingsHandle';
 import QuickSettingsPanelHeader from './QuickSettingsPanelHeader';
@@ -22,15 +24,11 @@ export default function QuickSettingsPanelView() {
   } = useQuickSettingsDrag({ isMobile });
 
   const quickSettingsPreferences = useMemo<QuickSettingsPreferences>(() => ({
-    autoExpandTools: preferences.autoExpandTools,
     showRawParameters: preferences.showRawParameters,
     showThinking: preferences.showThinking,
-    autoScrollToBottom: preferences.autoScrollToBottom,
     sendByCtrlEnter: preferences.sendByCtrlEnter,
     voiceEnabled: preferences.voiceEnabled,
   }), [
-    preferences.autoExpandTools,
-    preferences.autoScrollToBottom,
     preferences.sendByCtrlEnter,
     preferences.showRawParameters,
     preferences.showThinking,

src/components/quick-settings-panel/view/QuickSettingsSection.tsx

@@ -13,7 +13,7 @@ export default function QuickSettingsSection({
 }: QuickSettingsSectionProps) {
   return (
     <div className={`space-y-2 ${className}`}>
-      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
         {title}
       </h4>
       {children}

src/components/quick-settings-panel/view/QuickSettingsToggleRow.tsx

@@ -17,8 +17,8 @@ function QuickSettingsToggleRow({
 }: QuickSettingsToggleRowProps) {
   return (
     <label className={TOGGLE_ROW_CLASS}>
-      <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-        <Icon className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+      <span className="flex items-center gap-2 text-sm text-foreground">
+        <Icon className="h-4 w-4 text-muted-foreground" />
         {label}
       </span>
       <input