refactor(ui): simplify composer settings chip and animate chevron

Condense the settings-chip summary to quality, ratio, and image count
(dropping resolution and pixel size), wrap the label in an ellipsized
span, and swap the up/down chevron for a single rotating ChevronDown
across the canvas agent and image generator composers.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/ui/components/CanvasAgentComposer/index.css

@@ -242,11 +242,31 @@
 
 .composer-settings-chip {
   max-width: 150px;
-  padding: 0 8px;
+  gap: 2px;
+  padding: 0 4px 0 12px;
   overflow: hidden;
+  background: transparent;
   white-space: nowrap;
 }
 
+.composer-settings-chip span {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+}
+
+.composer-settings-chip svg {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  transition: transform 150ms ease;
+}
+
+.composer-settings-chip svg.open {
+  transform: rotate(180deg);
+}
+
 .composer-icon-button,
 .composer-model-button {
   width: 32px;

frontend/src/ui/components/CanvasAgentComposer/index.tsx

@@ -213,8 +213,7 @@ export function composerImageSize(settings: ComposerImageSettings) {
 
 export function composerSettingsSummary(settings: ComposerImageSettings) {
   const ratioLabel = composerRatioOptions.find((option) => option.id === settings.ratio)?.label ?? settings.ratio;
-  const sizeLabel = composerImageSize(settings).replace("x", "×");
-  return `${qualityLabel(settings.quality)} · ${settings.resolution} · ${ratioLabel} · ${sizeLabel} · ${settings.count} img`;
+  return `${qualityLabel(settings.quality)} · ${ratioLabel} · ${settings.count} img`;
 }
 
 function qualityLabel(quality: ComposerImageQuality) {
@@ -377,8 +376,8 @@ export const CanvasAgentComposer = forwardRef<PromptComposerHandle, CanvasAgentC
           <Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
             <PopoverTrigger asChild>
               <button className="composer-settings-chip" type="button" aria-label={t("imageSettings")}>
-                {composerSettingsSummary(settings)}
-                {settingsOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                <span>{composerSettingsSummary(settings)}</span>
+                <ChevronDown className={settingsOpen ? "open" : ""} size={18} />
               </button>
             </PopoverTrigger>
             <PopoverContent className="composer-settings-popover" align="end" sideOffset={12}>

frontend/src/ui/components/ImageGeneratorFloatingComposer/index.css

@@ -146,12 +146,33 @@
 
 .image-generator-settings-chip {
   height: 32px;
-  max-width: 220px;
-  padding: 0 8px 0 10px;
+  max-width: 150px;
+  gap: 2px;
+  padding: 0 4px 0 12px;
   overflow: hidden;
+  color: #2f3746;
+  background: transparent;
   white-space: nowrap;
 }
 
+.image-generator-settings-chip span {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+}
+
+.image-generator-settings-chip svg {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  transition: transform 150ms ease;
+}
+
+.image-generator-settings-chip svg.open {
+  transform: rotate(180deg);
+}
+
 .image-generator-settings-chip:hover,
 .image-generator-model-button:hover {
   background: #f3f4f6;

frontend/src/ui/components/ImageGeneratorFloatingComposer/index.tsx

@@ -10,7 +10,6 @@ import { useI18n } from "@/i18n/i18n";
 import {
   ComposerSettingsPanel,
   composerImageDimensionsFor,
-  composerImageSize,
   composerRatioOptions,
   type CanvasComposerModel,
   type ComposerImageRatio,
@@ -87,9 +86,7 @@ function composerStyle(bounds: NodeScreenBounds, stageWidth: number, stageHeight
 
 function imageSettingsSummary(settings: ComposerImageSettings, t: (key: string) => string) {
   const ratioLabel = composerRatioOptions.find((option) => option.id === settings.ratio)?.label ?? settings.ratio;
-  const sizeLabel = composerImageSize(settings).replace("x", "×");
-  const countLabel = t("imageCountUnit").replace("{count}", String(settings.count));
-  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${settings.resolution} · ${ratioLabel} · ${sizeLabel} · ${countLabel}`;
+  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${ratioLabel} · ${settings.count} img`;
 }
 
 export function ImageGeneratorFloatingComposer({
@@ -238,8 +235,8 @@ export function ImageGeneratorFloatingComposer({
         <Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
           <PopoverTrigger asChild>
             <button className="image-generator-settings-chip" type="button" aria-label={t("imageSettings")} disabled={generating}>
-              {imageSettingsSummary(settings, t)}
-              {settingsOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+              <span>{imageSettingsSummary(settings, t)}</span>
+              <ChevronDown className={settingsOpen ? "open" : ""} size={18} />
             </button>
           </PopoverTrigger>
           <PopoverContent className="composer-settings-popover image-generator-settings-popover-panel" align="start" sideOffset={12}>