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/i18n/locales/en-US.json

@@ -242,6 +242,7 @@
   "referenceImage": "Reference",
   "imageSettings": "Image settings",
   "imageCountUnit": "{count} img",
+  "imageCountLabel": "Image",
   "quality": "Quality",
   "qualityAuto": "Auto",
   "qualityHigh": "High",

frontend/src/i18n/locales/zh-CN.json

@@ -242,6 +242,7 @@
   "referenceImage": "参考图",
   "imageSettings": "图片参数",
   "imageCountUnit": "{count} 张",
+  "imageCountLabel": "生成数量",
   "quality": "质量",
   "qualityAuto": "自动",
   "qualityHigh": "高",

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 })}>

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

@@ -1,36 +1,47 @@
 .image-generator-floating-composer {
   position: absolute;
   z-index: 36;
-  min-height: 188px;
+  min-height: 150px;
-  border: 1px solid #cbd2dc;
+  overflow: hidden;
-  border-radius: 28px;
+  border: 0.5px solid #d7d9de;
+  border-radius: 24px;
   background: rgba(255, 255, 255, 0.98);
-  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.14);
+  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.13);
+  backdrop-filter: blur(18px);
   pointer-events: auto;
 }
 
 .image-generator-reference-row {
   display: flex;
   align-items: flex-start;
-  gap: 10px;
+  padding: 6px;
-  min-height: 72px;
+  gap: 8px;
-  margin: 14px 16px 0;
+  min-height: 68px;
+  margin: 8px 8px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.image-generator-reference-row::-webkit-scrollbar {
+  display: none;
 }
 
 .image-generator-reference-tile,
 .image-generator-reference-preview {
-  width: 72px;
+  width: 56px;
-  height: 72px;
+  height: 68px;
-  border-radius: 20px;
+  border-radius: 16px;
 }
 
 .image-generator-reference-tile {
   display: grid;
   place-items: center;
-  gap: 6px;
+  gap: 5px;
-  color: #a6abb5;
+  flex: 0 0 auto;
+  color: rgba(20, 20, 20, 0.46);
   background: #f4f4f4;
-  font-size: 12px;
+  font-size: 11px;
+  line-height: 1.2;
 }
 
 .image-generator-reference-tile span {
@@ -48,7 +59,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  border-radius: 20px;
+  border-radius: 16px;
   object-fit: cover;
   user-select: none;
   -webkit-user-drag: none;
@@ -77,23 +88,26 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
-  min-height: 92px;
+  height: auto;
-  margin: 10px 0 0;
+  min-height: 44px;
-  padding: 0 32px;
+  max-height: 176px;
+  margin: 2px 0 0;
+  padding: 1px 16px 0;
   border: 0;
   outline: 0;
   resize: none;
-  color: #1f2937;
+  overflow-y: hidden;
+  color: rgba(0, 0, 0, 0.9);
   background: transparent;
   caret-color: #111827;
   font-family: inherit;
-  font-size: 18px;
+  font-size: 14px;
-  font-weight: 520;
+  font-weight: 500;
-  line-height: 26px;
+  line-height: 25px;
 }
 
 .image-generator-prompt-editor::placeholder {
-  color: #a6acb6;
+  color: rgba(0, 0, 0, 0.3);
   opacity: 1;
 }
 
@@ -111,8 +125,8 @@
 .image-generator-composer-toolbar {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 4px;
-  padding: 8px 14px 13px 28px;
+  padding: 4px 8px 8px;
 }
 
 .image-generator-settings-chip,
@@ -121,17 +135,21 @@
   height: 36px;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   flex: 0 0 auto;
   border-radius: 999px;
   color: #222831;
   background: #fff;
-  font-size: 15px;
+  font-size: 13px;
-  font-weight: 560;
+  font-weight: 500;
 }
 
 .image-generator-settings-chip {
-  padding: 0 8px;
+  height: 32px;
+  max-width: 220px;
+  padding: 0 8px 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .image-generator-settings-chip:hover,
@@ -150,11 +168,13 @@
 
 .image-generator-composer-spacer {
   flex: 1;
+  min-width: 6px;
 }
 
 .image-generator-model-button {
-  max-width: 162px;
+  height: 32px;
-  padding: 0 10px;
+  max-width: 140px;
+  padding: 0 6px 0 8px;
   overflow: hidden;
   white-space: nowrap;
 }
@@ -166,9 +186,10 @@
 }
 
 .image-generator-send-button {
-  min-width: 58px;
+  height: 32px;
+  min-width: 56px;
   justify-content: center;
-  padding: 0 18px;
+  padding: 0 12px;
   color: #fff;
   background: #222;
   font-weight: 760;
@@ -179,3 +200,144 @@
   background: #efefef;
   opacity: 1;
 }
+
+.composer-settings-popover.image-generator-settings-popover-panel {
+  width: min(312px, calc(100vw - 24px));
+  max-height: min(480px, calc(100vh - 40px));
+  overflow: auto;
+  padding: 0;
+  border: 0.5px solid #d9dce2;
+  border-radius: 16px;
+  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.14);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(16, 24, 40, 0.28) transparent;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar {
+  width: 10px;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar-thumb {
+  min-height: 42px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: rgba(16, 24, 40, 0.28);
+  background-clip: content-box;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(16, 24, 40, 0.38);
+  background-clip: content-box;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel {
+  gap: 16px;
+  padding: 14px 16px 16px;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel h3 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel section {
+  gap: 8px;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel h4 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.image-generator-settings-popover-panel .composer-quality-control {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  overflow: visible;
+  border-radius: 0;
+  background: transparent;
+}
+
+.image-generator-settings-popover-panel .composer-quality-control button,
+.image-generator-settings-popover-panel .composer-count-grid button {
+  height: 32px;
+  border: 1px solid #d8dbe1;
+  border-radius: 999px;
+  background: #fff;
+  color: #262b34;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.image-generator-settings-popover-panel .composer-quality-control button.selected {
+  border-color: #2d3036;
+  background: #fff;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions {
+  gap: 8px;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions label {
+  height: 32px;
+  gap: 6px;
+  padding: 0 8px;
+  border-radius: 8px;
+  background: #f3f3f3;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions input {
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions i {
+  width: 32px;
+  color: #7c828c;
+  text-align: center;
+}
+
+.image-generator-settings-popover-panel .composer-ratio-grid,
+.image-generator-settings-popover-panel .composer-count-grid {
+  gap: 8px;
+}
+
+.image-generator-settings-popover-panel .composer-ratio-grid button {
+  aspect-ratio: auto;
+  height: 72px;
+  gap: 6px;
+  padding: 8px;
+  border-radius: 12px;
+  color: #262b34;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.image-generator-settings-popover-panel .composer-ratio-grid button.selected,
+.image-generator-settings-popover-panel .composer-count-grid button.selected {
+  border-color: #d3d6dd;
+  background: #eeeeee;
+}
+
+.image-generator-settings-popover-panel .ratio-glyph {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+  border-color: #525862;
+  border-radius: 4px;
+}
+
+.image-generator-settings-popover-panel .ratio-glyph.wide {
+  width: 24px;
+  height: 16px;
+}
+
+.image-generator-settings-popover-panel .ratio-glyph.portrait {
+  width: 16px;
+  height: 24px;
+}

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

@@ -9,6 +9,7 @@ import type { AgentContent } from "@/domain/design";
 import { useI18n } from "@/i18n/i18n";
 import {
   ComposerSettingsPanel,
+  composerImageSize,
   composerRatioOptions,
   type CanvasComposerModel,
   type ComposerImageRatio,
@@ -34,12 +35,12 @@ type ImageGeneratorFloatingComposerProps = {
   onSubmit: (contents: AgentContent[], reset: () => void) => void;
 };
 
-const horizontalInset = 36;
+const horizontalInset = 24;
-const preferredWidth = 860;
+const preferredWidth = 536;
-const minimumWidth = 520;
+const minimumWidth = 320;
 const verticalInset = 18;
-const estimatedComposerHeight = 210;
+const estimatedComposerHeight = 150;
-const composerGap = 18;
+const composerGap = 16;
 
 function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
@@ -85,8 +86,9 @@ 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 = settings.ratio === "auto" ? composerImageSize(settings).replace("x", "×") : ratioLabel;
   const countLabel = t("imageCountUnit").replace("{count}", String(settings.count));
-  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${ratioLabel} · ${countLabel}`;
+  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${sizeLabel} · ${countLabel}`;
 }
 
 export function ImageGeneratorFloatingComposer({
@@ -106,6 +108,7 @@ export function ImageGeneratorFloatingComposer({
 }: ImageGeneratorFloatingComposerProps) {
   const { t } = useI18n();
   const rootRef = useRef<HTMLDivElement | null>(null);
+  const promptEditorRef = useRef<HTMLTextAreaElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [text, setText] = useState("");
   const [references, setReferences] = useState<UploadedReferenceImage[]>([]);
@@ -126,6 +129,18 @@ export function ImageGeneratorFloatingComposer({
     return () => observer.disconnect();
   }, []);
 
+  useLayoutEffect(() => {
+    const editor = promptEditorRef.current;
+    if (!editor) return;
+    const style = window.getComputedStyle(editor);
+    const minHeight = Number.parseFloat(style.minHeight) || 44;
+    const maxHeight = Number.parseFloat(style.maxHeight) || 176;
+    editor.style.height = "auto";
+    const nextHeight = Math.min(Math.max(editor.scrollHeight, minHeight), maxHeight);
+    editor.style.height = `${nextHeight}px`;
+    editor.style.overflowY = editor.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [promptValue]);
+
   const patchSettings = (patch: Partial<ComposerImageSettings>) => {
     onSettingsChange({ ...settings, ...patch });
   };
@@ -209,6 +224,7 @@ export function ImageGeneratorFloatingComposer({
         </button>
       </div>
       <textarea
+        ref={promptEditorRef}
         value={promptValue}
         placeholder={t("canvasPromptPlaceholder")}
         aria-label={t("canvasPromptPlaceholder")}
@@ -225,8 +241,8 @@ export function ImageGeneratorFloatingComposer({
               {settingsOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
             </button>
           </PopoverTrigger>
-          <PopoverContent className="composer-settings-popover" align="start" sideOffset={12}>
+          <PopoverContent className="composer-settings-popover image-generator-settings-popover-panel" align="start" sideOffset={12}>
-            <ComposerSettingsPanel settings={settings} onPatch={patchSettings} onSelectRatio={selectRatio} />
+            <ComposerSettingsPanel settings={settings} onPatch={patchSettings} onSelectRatio={selectRatio} title={t("imageSettings")} />
           </PopoverContent>
         </Popover>