feat(ui): redesign image generator floating composer and settings panel

Compact the floating composer with an auto-resizing prompt editor and a
scrollable settings popover, add a titled settings panel, and show the
resolved image size in the settings summary. Add the imageCountLabel
string for the count section.

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

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

@@ -413,6 +413,14 @@
   gap: 20px;
 }
 
+.composer-settings-panel h3 {
+  margin: 0;
+  color: #242a34;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
 .composer-settings-panel section {
   display: grid;
   gap: 12px;

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

@@ -107,7 +107,8 @@ export function composerImageSize(settings: ComposerImageSettings) {
 
 export function composerSettingsSummary(settings: ComposerImageSettings) {
   const ratioLabel = composerRatioOptions.find((option) => option.id === settings.ratio)?.label ?? settings.ratio;
-  return `${qualityLabel(settings.quality)} · ${ratioLabel} · ${settings.count} img`;
+  const sizeLabel = settings.ratio === "auto" ? composerImageSize(settings).replace("x", "×") : ratioLabel;
+  return `${qualityLabel(settings.quality)} · ${sizeLabel} · ${settings.count} img`;
 }
 
 function qualityLabel(quality: ComposerImageQuality) {
@@ -348,16 +349,19 @@ export const CanvasAgentComposer = forwardRef<PromptComposerHandle, CanvasAgentC
 export function ComposerSettingsPanel({
   settings,
   onPatch,
-  onSelectRatio
+  onSelectRatio,
+  title
 }: {
   settings: ComposerImageSettings;
   onPatch: (patch: Partial<ComposerImageSettings>) => void;
   onSelectRatio: (ratio: ComposerImageRatio) => void;
+  title?: string;
 }) {
   const { t } = useI18n();
 
   return (
     <div className="composer-settings-panel">
+      {title && <h3>{title}</h3>}
       <section>
         <h4>{t("quality")}</h4>
         <div className="composer-quality-control">
@@ -391,7 +395,7 @@ export function ComposerSettingsPanel({
         </div>
       </section>
       <section>
-        <h4>Image</h4>
+        <h4>{t("imageCountLabel")}</h4>
         <div className="composer-count-grid">
           {Array.from({ length: 10 }, (_, index) => index + 1).map((count) => (
             <button key={count} type="button" className={settings.count === count ? "selected" : ""} onClick={() => onPatch({ count })}>