From a254dfbcd97dea2987e6f566f5c90e9d6b4b5d15 Mon Sep 17 00:00:00 2001
From: shimmyshimmer <michaelhan2050@gmail.com>
Date: Sat, 25 Jul 2026 02:42:46 -0700
Subject: [PATCH] Images: drop card borders for the composer shadow, keep
 scrollbars inside, use app controls in Train

- Cards lose ring-1 for .panel-soft-surface: the composer's shadow in light, flat
  in dark, matching .chat-composer-surface and the menus.
- Both rails now clip (overflow-hidden) with the scroller inside, so the scrollbar
  can't ride over the rounded corner. Same shape video-page already uses.
- Train's 9 native selects become the app Select, so they no longer open an
  OS-native menu, and the native file input is hidden behind a Choose images
  button that reports the count.
- Image previews use explicit 8-10px radii: this theme sets --radius to 1.1rem,
  so rounded-md was 15.6px and the thumbnails read as circles.
---
 .../src/features/images/images-page.tsx       | 1030 +++++++++--------
 .../images/train/dataset-labeling-grid.tsx    |    2 +-
 .../images/train/dataset-showcase.tsx         |    2 +-
 .../images/train/diffusion-train-panel.tsx    |  603 +++++-----
 .../images/train/example-dataset-cards.tsx    |    2 +-
 studio/frontend/src/index.css                 |   10 +
 6 files changed, 857 insertions(+), 792 deletions(-)

diff --git a/studio/frontend/src/features/images/images-page.tsx b/studio/frontend/src/features/images/images-page.tsx
index c3f31232fd..be6b913fb4 100644
--- a/studio/frontend/src/features/images/images-page.tsx
+++ b/studio/frontend/src/features/images/images-page.tsx
@@ -606,7 +606,7 @@ function ImageDropzone({
 
   if (value) {
     return (
-      <div className="relative overflow-hidden rounded-xl border border-border">
+      <div className="relative overflow-hidden rounded-[10px] border border-border">
         <img src={value} alt="Source" className="max-h-44 w-full object-contain bg-muted/30" />
         <Button
           type="button"
@@ -782,7 +782,7 @@ function MaskCanvas({
   };
 
   return (
-    <div className="relative overflow-hidden rounded-xl border border-border bg-muted/30">
+    <div className="relative overflow-hidden rounded-[10px] border border-border bg-muted/30">
       <img
         src={image}
         alt="Inpaint source"
@@ -2335,567 +2335,569 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
       <div className="flex min-h-0 min-w-0 flex-1 gap-4 overflow-hidden px-5 pb-8 pt-6 sm:px-9">
         {/* The controls rail. Plain card (the gray surface) with no header —
             the prompt + Generate button make the panel self-explanatory. */}
-        <div className="bg-card corner-squircle flex w-[340px] shrink-0 flex-col gap-4 overflow-y-auto rounded-3xl p-5 ring-1 ring-foreground/10">
-          {/* Workflow picker. Seven workflows don't fit a segmented strip in a 340px
-              rail, so it's a dropdown: the trigger carries the current workflow and
-              its hint, and each row explains itself. A row is disabled until the
-              loaded model supports it (status.workflows), with the reason in place of
-              the hint. New workflows slot in without shrinking anything. */}
-          <div className="grid gap-1.5">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild={true}>
-                <button
-                  type="button"
-                  aria-label="Workflow"
-                  className="corner-squircle flex h-9 w-full items-center gap-2 rounded-xl bg-foreground/[0.07] px-3 text-left transition-colors hover:bg-foreground/[0.11] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:bg-foreground/[0.12] dark:hover:bg-foreground/[0.16]"
-                >
-                  <HugeiconsIcon
-                    icon={activeWorkflowTab.icon}
-                    className="size-4 shrink-0 text-muted-foreground"
-                  />
-                  <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
-                    {activeWorkflowTab.label}
-                  </span>
-                  <HugeiconsIcon
-                    icon={ArrowDown01Icon}
-                    className="size-4 shrink-0 text-muted-foreground"
-                  />
-                </button>
-              </DropdownMenuTrigger>
-              {/* DropdownMenuContent already tracks the trigger width, so the rows get
-                  the full rail width for their hints. */}
-              <DropdownMenuContent align="start">
-                {WORKFLOW_TABS.map((t) => {
-                  const enabled = workflowEnabled(t);
-                  return (
-                    <DropdownMenuItem
-                      key={t.id}
-                      disabled={!enabled}
-                      onSelect={() => setWorkflow(t.id)}
-                      // The selected row's description shows under the trigger, and a
-                      // disabled row explains itself on hover, so rows stay one line.
-                      title={
-                        enabled
-                          ? t.hint
-                          : `Needs a loaded model that supports ${t.label.toLowerCase()}`
-                      }
-                      className="gap-2"
-                    >
-                      <HugeiconsIcon
-                        icon={t.icon}
-                        className="size-4 shrink-0 text-muted-foreground"
-                      />
-                      <span className="min-w-0 flex-1 truncate text-xs font-medium">
-                        {t.label}
-                      </span>
-                      <HugeiconsIcon
-                        icon={CheckmarkCircle02Icon}
-                        className={cn(
-                          "size-3.5 shrink-0",
-                          workflow === t.id ? "text-foreground" : "invisible",
-                        )}
-                      />
-                    </DropdownMenuItem>
-                  );
-                })}
-              </DropdownMenuContent>
-            </DropdownMenu>
-            {/* Description sits under the closed trigger, matching the Field hints
-                below it, so the button itself stays one line. */}
-            <p className="px-0.5 text-ui-11p5 leading-snug text-muted-foreground">
-              {activeWorkflowTab.hint}
-            </p>
-          </div>
-
-          {workflow === "transform" && (
-            <>
-              <Field
-                label="Source image"
-                hint="The image to transform. Generation redraws it guided by your prompt; the Strength below controls how far."
-              >
-                <ImageDropzone value={initImage} onChange={handleInitChange} />
-              </Field>
-              <SliderField
-                label="Strength"
-                hint="How much to redraw the source. Low keeps the original composition; high reimagines it from the prompt."
-                value={strength}
-                min={0.1}
-                max={1}
-                step={0.05}
-                onChange={setStrength}
-              />
-            </>
-          )}
-
-          {workflow === "inpaint" && (
-            <>
-              {!initImage ? (
-                <Field
-                  label="Source image"
-                  hint="The image to edit. After uploading, paint over the area you want to regenerate; the rest is kept."
-                >
-                  <ImageDropzone value={null} onChange={handleInitChange} />
-                </Field>
-              ) : (
-                <>
-                  <Field
-                    label="Mask"
-                    hint="Brush over the region to regenerate (shown in red). Those pixels are repainted from your prompt; everything else is preserved."
+        <div className="bg-card corner-squircle flex w-[340px] shrink-0 flex-col overflow-hidden rounded-3xl panel-soft-surface">
+          <div className="flex min-h-0 flex-col gap-4 overflow-y-auto p-5">
+            {/* Workflow picker. Seven workflows don't fit a segmented strip in a 340px
+                rail, so it's a dropdown: the trigger carries the current workflow and
+                its hint, and each row explains itself. A row is disabled until the
+                loaded model supports it (status.workflows), with the reason in place of
+                the hint. New workflows slot in without shrinking anything. */}
+            <div className="grid gap-1.5">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild={true}>
+                  <button
+                    type="button"
+                    aria-label="Workflow"
+                    className="corner-squircle flex h-9 w-full items-center gap-2 rounded-xl bg-foreground/[0.07] px-3 text-left transition-colors hover:bg-foreground/[0.11] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:bg-foreground/[0.12] dark:hover:bg-foreground/[0.16]"
                   >
-                    <MaskCanvas
-                      image={initImage}
-                      brushPct={brushPct}
-                      resetKey={maskResetKey}
-                      onMaskChange={setMaskImage}
+                    <HugeiconsIcon
+                      icon={activeWorkflowTab.icon}
+                      className="size-4 shrink-0 text-muted-foreground"
                     />
-                  </Field>
-                  <SliderField
-                    label="Brush size"
-                    hint="Brush radius as a percent of the image's shorter side."
-                    value={brushPct}
-                    min={2}
-                    max={25}
-                    step={1}
-                    onChange={setBrushPct}
-                  />
-                  <div className="flex gap-2">
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="flex-1"
-                      onClick={() => {
-                        setMaskImage(null);
-                        setMaskResetKey((k) => k + 1);
-                      }}
-                    >
-                      <HugeiconsIcon icon={Delete02Icon} className="size-3.5" />
-                      Clear mask
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="flex-1"
-                      onClick={() => handleInitChange(null)}
-                    >
-                      <HugeiconsIcon icon={ImageAdd02Icon} className="size-3.5" />
-                      Replace image
-                    </Button>
-                  </div>
-                  <SliderField
-                    label="Strength"
-                    hint="How much to redraw the masked region. Low blends with the source; high fully reimagines it from the prompt."
-                    value={strength}
-                    min={0.1}
-                    max={1}
-                    step={0.05}
-                    onChange={setStrength}
-                  />
-                </>
-              )}
-            </>
-          )}
-
-          {workflow === "extend" && (
-            <>
-              <Field
-                label="Source image"
-                hint="The image to outpaint. The canvas grows on the selected sides and the new area is filled from your prompt; the original is kept."
-              >
-                <ImageDropzone value={initImage} onChange={handleInitChange} />
-              </Field>
-              <SliderField
-                label="Expand by"
-                hint="How far to grow each selected side, as a percent of the image's size."
-                value={extendPct}
-                min={10}
-                max={100}
-                step={5}
-                onChange={setExtendPct}
-              />
-              <Field label="Sides" hint="Which edges to extend.">
-                <div className="grid grid-cols-2 gap-1.5">
-                  {(
-                    [
-                      ["top", "Top"],
-                      ["bottom", "Bottom"],
-                      ["left", "Left"],
-                      ["right", "Right"],
-                    ] as Array<[keyof ExtendSides, string]>
-                  ).map(([key, label]) => {
-                    const on = extendSides[key];
+                    <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+                      {activeWorkflowTab.label}
+                    </span>
+                    <HugeiconsIcon
+                      icon={ArrowDown01Icon}
+                      className="size-4 shrink-0 text-muted-foreground"
+                    />
+                  </button>
+                </DropdownMenuTrigger>
+                {/* DropdownMenuContent already tracks the trigger width, so the rows get
+                    the full rail width for their hints. */}
+                <DropdownMenuContent align="start">
+                  {WORKFLOW_TABS.map((t) => {
+                    const enabled = workflowEnabled(t);
                     return (
-                      <button
-                        key={key}
-                        type="button"
-                        onClick={() => setExtendSides((s) => ({ ...s, [key]: !s[key] }))}
-                        className={cn(
-                          "rounded-lg px-2 py-1.5 text-xs font-medium ring-1 transition-colors",
-                          on
-                            ? "bg-primary/10 text-foreground ring-primary/40"
-                            : "text-muted-foreground ring-border hover:text-foreground",
-                        )}
+                      <DropdownMenuItem
+                        key={t.id}
+                        disabled={!enabled}
+                        onSelect={() => setWorkflow(t.id)}
+                        // The selected row's description shows under the trigger, and a
+                        // disabled row explains itself on hover, so rows stay one line.
+                        title={
+                          enabled
+                            ? t.hint
+                            : `Needs a loaded model that supports ${t.label.toLowerCase()}`
+                        }
+                        className="gap-2"
                       >
-                        {label}
-                      </button>
+                        <HugeiconsIcon
+                          icon={t.icon}
+                          className="size-4 shrink-0 text-muted-foreground"
+                        />
+                        <span className="min-w-0 flex-1 truncate text-xs font-medium">
+                          {t.label}
+                        </span>
+                        <HugeiconsIcon
+                          icon={CheckmarkCircle02Icon}
+                          className={cn(
+                            "size-3.5 shrink-0",
+                            workflow === t.id ? "text-foreground" : "invisible",
+                          )}
+                        />
+                      </DropdownMenuItem>
                     );
                   })}
-                </div>
-              </Field>
-            </>
-          )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+              {/* Description sits under the closed trigger, matching the Field hints
+                  below it, so the button itself stays one line. */}
+              <p className="px-0.5 text-ui-11p5 leading-snug text-muted-foreground">
+                {activeWorkflowTab.hint}
+              </p>
+            </div>
 
-          {workflow === "upscale" && (
-            <>
-              <Field
-                label="Source image"
-                hint="The image to upscale. It is enlarged by the factor below, then re-detailed at higher resolution guided by your prompt; keep the prompt describing the same content."
-              >
-                <ImageDropzone value={initImage} onChange={handleInitChange} />
-              </Field>
-              <SliderField
-                label="Scale"
-                hint="How much larger to make the image. The output size is the source size times this factor (capped and rounded to a multiple of 16)."
-                value={upscaleFactor}
-                min={1.5}
-                max={4}
-                step={0.5}
-                onChange={setUpscaleFactor}
-              />
-              <SliderField
-                label="Detail strength"
-                hint="How much new detail to add while upscaling. Low keeps the image faithful to the source; high adds more (and may drift). 0.35 is a good hires-fix default."
-                value={upscaleStrength}
-                min={0.1}
-                max={0.6}
-                step={0.05}
-                onChange={setUpscaleStrength}
-              />
-            </>
-          )}
-
-          {workflow === "reference" && (
-            <>
-              <Field
-                label="Reference image"
-                hint="A reference the model draws on (subject, style, or composition) while generating a NEW image from your prompt at the size below. Unlike Transform, it is not a redraw of this image, so there is no strength."
-              >
-                <ImageDropzone value={initImage} onChange={handleInitChange} />
-              </Field>
-              {referenceImages.map((img, i) => (
+            {workflow === "transform" && (
+              <>
                 <Field
-                  key={i}
-                  label={`Reference ${i + 2}`}
-                  hint="An extra reference combined with the others (e.g. one for the subject, one for the style)."
+                  label="Source image"
+                  hint="The image to transform. Generation redraws it guided by your prompt; the Strength below controls how far."
                 >
-                  <div className="space-y-1.5">
-                    <ImageDropzone
-                      value={img}
-                      onChange={(v) =>
-                        // Keep the slot in place (empty string when cleared) so other slots
-                        // don't renumber mid-edit; empty slots are dropped only at send time
-                        // and removed explicitly via the button below. Stable key={i}.
-                        setReferenceImages((prev) =>
-                          prev.map((p, j) => (j === i ? (v ?? "") : p)),
-                        )
-                      }
-                    />
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="w-full"
-                      onClick={() => setReferenceImages((prev) => prev.filter((_, j) => j !== i))}
+                  <ImageDropzone value={initImage} onChange={handleInitChange} />
+                </Field>
+                <SliderField
+                  label="Strength"
+                  hint="How much to redraw the source. Low keeps the original composition; high reimagines it from the prompt."
+                  value={strength}
+                  min={0.1}
+                  max={1}
+                  step={0.05}
+                  onChange={setStrength}
+                />
+              </>
+            )}
+
+            {workflow === "inpaint" && (
+              <>
+                {!initImage ? (
+                  <Field
+                    label="Source image"
+                    hint="The image to edit. After uploading, paint over the area you want to regenerate; the rest is kept."
+                  >
+                    <ImageDropzone value={null} onChange={handleInitChange} />
+                  </Field>
+                ) : (
+                  <>
+                    <Field
+                      label="Mask"
+                      hint="Brush over the region to regenerate (shown in red). Those pixels are repainted from your prompt; everything else is preserved."
                     >
-                      <HugeiconsIcon icon={Delete02Icon} className="size-3.5" />
-                      Remove reference {i + 2}
-                    </Button>
+                      <MaskCanvas
+                        image={initImage}
+                        brushPct={brushPct}
+                        resetKey={maskResetKey}
+                        onMaskChange={setMaskImage}
+                      />
+                    </Field>
+                    <SliderField
+                      label="Brush size"
+                      hint="Brush radius as a percent of the image's shorter side."
+                      value={brushPct}
+                      min={2}
+                      max={25}
+                      step={1}
+                      onChange={setBrushPct}
+                    />
+                    <div className="flex gap-2">
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        size="sm"
+                        className="flex-1"
+                        onClick={() => {
+                          setMaskImage(null);
+                          setMaskResetKey((k) => k + 1);
+                        }}
+                      >
+                        <HugeiconsIcon icon={Delete02Icon} className="size-3.5" />
+                        Clear mask
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        size="sm"
+                        className="flex-1"
+                        onClick={() => handleInitChange(null)}
+                      >
+                        <HugeiconsIcon icon={ImageAdd02Icon} className="size-3.5" />
+                        Replace image
+                      </Button>
+                    </div>
+                    <SliderField
+                      label="Strength"
+                      hint="How much to redraw the masked region. Low blends with the source; high fully reimagines it from the prompt."
+                      value={strength}
+                      min={0.1}
+                      max={1}
+                      step={0.05}
+                      onChange={setStrength}
+                    />
+                  </>
+                )}
+              </>
+            )}
+
+            {workflow === "extend" && (
+              <>
+                <Field
+                  label="Source image"
+                  hint="The image to outpaint. The canvas grows on the selected sides and the new area is filled from your prompt; the original is kept."
+                >
+                  <ImageDropzone value={initImage} onChange={handleInitChange} />
+                </Field>
+                <SliderField
+                  label="Expand by"
+                  hint="How far to grow each selected side, as a percent of the image's size."
+                  value={extendPct}
+                  min={10}
+                  max={100}
+                  step={5}
+                  onChange={setExtendPct}
+                />
+                <Field label="Sides" hint="Which edges to extend.">
+                  <div className="grid grid-cols-2 gap-1.5">
+                    {(
+                      [
+                        ["top", "Top"],
+                        ["bottom", "Bottom"],
+                        ["left", "Left"],
+                        ["right", "Right"],
+                      ] as Array<[keyof ExtendSides, string]>
+                    ).map(([key, label]) => {
+                      const on = extendSides[key];
+                      return (
+                        <button
+                          key={key}
+                          type="button"
+                          onClick={() => setExtendSides((s) => ({ ...s, [key]: !s[key] }))}
+                          className={cn(
+                            "rounded-lg px-2 py-1.5 text-xs font-medium ring-1 transition-colors",
+                            on
+                              ? "bg-primary/10 text-foreground ring-primary/40"
+                              : "text-muted-foreground ring-border hover:text-foreground",
+                          )}
+                        >
+                          {label}
+                        </button>
+                      );
+                    })}
                   </div>
                 </Field>
-              ))}
-              {referenceImages.length < 3 && (
-                <Button
-                  type="button"
-                  variant="secondary"
-                  size="sm"
-                  className="w-full"
-                  disabled={!initImage}
-                  onClick={() => setReferenceImages((prev) => [...prev, ""])}
+              </>
+            )}
+
+            {workflow === "upscale" && (
+              <>
+                <Field
+                  label="Source image"
+                  hint="The image to upscale. It is enlarged by the factor below, then re-detailed at higher resolution guided by your prompt; keep the prompt describing the same content."
                 >
-                  <HugeiconsIcon icon={ImageAdd02Icon} className="size-3.5" />
-                  Add another reference
-                </Button>
-              )}
-            </>
-          )}
+                  <ImageDropzone value={initImage} onChange={handleInitChange} />
+                </Field>
+                <SliderField
+                  label="Scale"
+                  hint="How much larger to make the image. The output size is the source size times this factor (capped and rounded to a multiple of 16)."
+                  value={upscaleFactor}
+                  min={1.5}
+                  max={4}
+                  step={0.5}
+                  onChange={setUpscaleFactor}
+                />
+                <SliderField
+                  label="Detail strength"
+                  hint="How much new detail to add while upscaling. Low keeps the image faithful to the source; high adds more (and may drift). 0.35 is a good hires-fix default."
+                  value={upscaleStrength}
+                  min={0.1}
+                  max={0.6}
+                  step={0.05}
+                  onChange={setUpscaleStrength}
+                />
+              </>
+            )}
 
-          {workflow === "edit" && (
-            <Field
-              label="Source image"
-              hint="The image to edit. Describe the change in the prompt below (e.g. 'make it night', 'add a red hat', 'change the background to a beach')."
-            >
-              <ImageDropzone value={initImage} onChange={handleInitChange} />
-            </Field>
-          )}
-
-          <Field label={workflow === "edit" ? "Instruction" : "Prompt"}>
-            <Textarea
-              rows={4}
-              placeholder={
-                workflow === "edit" ? "Describe the edit, e.g. make the sky sunset orange" : undefined
-              }
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-            />
-          </Field>
-          {/* LoRA adapters: shown whenever the loaded model + quant can apply them. Type a
-              Hugging Face repo id (owner/name, or owner/name:weight-file.safetensors) or pick
-              a discovered adapter from the suggestions. Stack multiple, each with a 0-2 weight.
-              The backend owns how they apply (native prompt tags / diffusers set_adapters); the
-              UI only sends {id, weight}. */}
-          {loraCapable && (
-            <Field
-              label="LoRAs"
-              hint="Style or character adapters applied on top of the model. Enter a Hugging Face repo id (or pick a suggestion) and set the strength (1.0 = full effect, 0 disables). Stack several."
-            >
-              <div className="space-y-2">
-                {availableLoras.length > 0 && (
-                  <datalist id="diffusion-lora-suggestions">
-                    {availableLoras.map((a) => (
-                      <option key={a.id} value={a.id}>
-                        {a.display_name}
-                      </option>
-                    ))}
-                  </datalist>
-                )}
-                {loras.map((sel, i) => (
-                  <div
-                    key={sel.id || i}
-                    className="space-y-1.5 rounded-lg border border-border bg-muted/30 p-2"
+            {workflow === "reference" && (
+              <>
+                <Field
+                  label="Reference image"
+                  hint="A reference the model draws on (subject, style, or composition) while generating a NEW image from your prompt at the size below. Unlike Transform, it is not a redraw of this image, so there is no strength."
+                >
+                  <ImageDropzone value={initImage} onChange={handleInitChange} />
+                </Field>
+                {referenceImages.map((img, i) => (
+                  <Field
+                    key={i}
+                    label={`Reference ${i + 2}`}
+                    hint="An extra reference combined with the others (e.g. one for the subject, one for the style)."
                   >
-                    <div className="flex items-center gap-2">
-                      <Input
-                        value={sel.id}
-                        list={availableLoras.length > 0 ? "diffusion-lora-suggestions" : undefined}
-                        placeholder="owner/name or owner/name:file.safetensors"
-                        spellCheck={false}
-                        autoCapitalize="none"
-                        autoCorrect="off"
-                        className="h-8 flex-1 text-xs"
-                        onChange={(e) =>
-                          setLoras((prev) =>
-                            prev.map((p, j) => (j === i ? { ...p, id: e.target.value } : p)),
+                    <div className="space-y-1.5">
+                      <ImageDropzone
+                        value={img}
+                        onChange={(v) =>
+                          // Keep the slot in place (empty string when cleared) so other slots
+                          // don't renumber mid-edit; empty slots are dropped only at send time
+                          // and removed explicitly via the button below. Stable key={i}.
+                          setReferenceImages((prev) =>
+                            prev.map((p, j) => (j === i ? (v ?? "") : p)),
                           )
                         }
                       />
                       <Button
                         type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="size-8 shrink-0"
-                        aria-label={`Remove LoRA ${i + 1}`}
-                        onClick={() => setLoras((prev) => prev.filter((_, j) => j !== i))}
+                        variant="secondary"
+                        size="sm"
+                        className="w-full"
+                        onClick={() => setReferenceImages((prev) => prev.filter((_, j) => j !== i))}
                       >
                         <HugeiconsIcon icon={Delete02Icon} className="size-3.5" />
+                        Remove reference {i + 2}
                       </Button>
                     </div>
-                    <SliderField
-                      label="Weight"
-                      value={sel.weight}
-                      min={0}
-                      max={2}
-                      step={0.05}
-                      onChange={(v) =>
-                        setLoras((prev) => prev.map((p, j) => (j === i ? { ...p, weight: v } : p)))
-                      }
-                    />
-                  </div>
+                  </Field>
                 ))}
-                {loras.length < 8 && (
+                {referenceImages.length < 3 && (
                   <Button
                     type="button"
                     variant="secondary"
                     size="sm"
                     className="w-full"
-                    onClick={() => {
-                      // Prefill with the first unused suggestion when a curated catalog exists,
-                      // else an empty row the user fills with a Hugging Face repo id.
-                      const taken = new Set(loras.map((l) => l.id));
-                      const next = availableLoras.find((a) => !taken.has(a.id));
-                      setLoras((prev) => [
-                        ...prev,
-                        next ? { id: next.id, weight: next.weight_default || 1 } : { id: "", weight: 1 },
-                      ]);
-                    }}
+                    disabled={!initImage}
+                    onClick={() => setReferenceImages((prev) => [...prev, ""])}
                   >
                     <HugeiconsIcon icon={ImageAdd02Icon} className="size-3.5" />
-                    Add LoRA
+                    Add another reference
                   </Button>
                 )}
-              </div>
+              </>
+            )}
+
+            {workflow === "edit" && (
+              <Field
+                label="Source image"
+                hint="The image to edit. Describe the change in the prompt below (e.g. 'make it night', 'add a red hat', 'change the background to a beach')."
+              >
+                <ImageDropzone value={initImage} onChange={handleInitChange} />
+              </Field>
+            )}
+
+            <Field label={workflow === "edit" ? "Instruction" : "Prompt"}>
+              <Textarea
+                rows={4}
+                placeholder={
+                  workflow === "edit" ? "Describe the edit, e.g. make the sky sunset orange" : undefined
+                }
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+              />
             </Field>
-          )}
-          {/* ControlNet: shown when the loaded model supports it, a model is discoverable, and
-              the plain text-to-image workflow is active (v1 conditions txt2img only). Pick a
-              model, add a control image, choose how to derive the map, and set the strength. */}
-          {controlnetCapable && availableControlNets.length > 0 && workflow === "create" && (
+            {/* LoRA adapters: shown whenever the loaded model + quant can apply them. Type a
+                Hugging Face repo id (owner/name, or owner/name:weight-file.safetensors) or pick
+                a discovered adapter from the suggestions. Stack multiple, each with a 0-2 weight.
+                The backend owns how they apply (native prompt tags / diffusers set_adapters); the
+                UI only sends {id, weight}. */}
+            {loraCapable && (
+              <Field
+                label="LoRAs"
+                hint="Style or character adapters applied on top of the model. Enter a Hugging Face repo id (or pick a suggestion) and set the strength (1.0 = full effect, 0 disables). Stack several."
+              >
+                <div className="space-y-2">
+                  {availableLoras.length > 0 && (
+                    <datalist id="diffusion-lora-suggestions">
+                      {availableLoras.map((a) => (
+                        <option key={a.id} value={a.id}>
+                          {a.display_name}
+                        </option>
+                      ))}
+                    </datalist>
+                  )}
+                  {loras.map((sel, i) => (
+                    <div
+                      key={sel.id || i}
+                      className="space-y-1.5 rounded-lg border border-border bg-muted/30 p-2"
+                    >
+                      <div className="flex items-center gap-2">
+                        <Input
+                          value={sel.id}
+                          list={availableLoras.length > 0 ? "diffusion-lora-suggestions" : undefined}
+                          placeholder="owner/name or owner/name:file.safetensors"
+                          spellCheck={false}
+                          autoCapitalize="none"
+                          autoCorrect="off"
+                          className="h-8 flex-1 text-xs"
+                          onChange={(e) =>
+                            setLoras((prev) =>
+                              prev.map((p, j) => (j === i ? { ...p, id: e.target.value } : p)),
+                            )
+                          }
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="size-8 shrink-0"
+                          aria-label={`Remove LoRA ${i + 1}`}
+                          onClick={() => setLoras((prev) => prev.filter((_, j) => j !== i))}
+                        >
+                          <HugeiconsIcon icon={Delete02Icon} className="size-3.5" />
+                        </Button>
+                      </div>
+                      <SliderField
+                        label="Weight"
+                        value={sel.weight}
+                        min={0}
+                        max={2}
+                        step={0.05}
+                        onChange={(v) =>
+                          setLoras((prev) => prev.map((p, j) => (j === i ? { ...p, weight: v } : p)))
+                        }
+                      />
+                    </div>
+                  ))}
+                  {loras.length < 8 && (
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      className="w-full"
+                      onClick={() => {
+                        // Prefill with the first unused suggestion when a curated catalog exists,
+                        // else an empty row the user fills with a Hugging Face repo id.
+                        const taken = new Set(loras.map((l) => l.id));
+                        const next = availableLoras.find((a) => !taken.has(a.id));
+                        setLoras((prev) => [
+                          ...prev,
+                          next ? { id: next.id, weight: next.weight_default || 1 } : { id: "", weight: 1 },
+                        ]);
+                      }}
+                    >
+                      <HugeiconsIcon icon={ImageAdd02Icon} className="size-3.5" />
+                      Add LoRA
+                    </Button>
+                  )}
+                </div>
+              </Field>
+            )}
+            {/* ControlNet: shown when the loaded model supports it, a model is discoverable, and
+                the plain text-to-image workflow is active (v1 conditions txt2img only). Pick a
+                model, add a control image, choose how to derive the map, and set the strength. */}
+            {controlnetCapable && availableControlNets.length > 0 && workflow === "create" && (
+              <Field
+                label="ControlNet"
+                hint="Condition the image on a control map (edges / depth / pose). Union models cover many types. Use 'Canny' to trace edges from your image, or 'Passthrough' if it is already a control map."
+              >
+                <div className="space-y-2 rounded-lg border border-border bg-muted/30 p-2">
+                  <Select value={controlnetId || undefined} onValueChange={setControlnetId}>
+                    <SelectTrigger className="h-8 w-full text-xs">
+                      <SelectValue placeholder="Select a ControlNet" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableControlNets.map((c) => (
+                        <SelectItem key={c.id} value={c.id}>
+                          {c.display_name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {controlnetId && (
+                    <>
+                      <ImageDropzone value={controlImage} onChange={setControlImage} />
+                      <div className="flex items-center gap-2">
+                        <span className="shrink-0 text-xs text-muted-foreground">Control type</span>
+                        <Select value={controlType} onValueChange={setControlType}>
+                          <SelectTrigger className="h-8 flex-1 text-xs">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {controlTypeOptions.map((t) => (
+                              <SelectItem key={t} value={t}>
+                                {CONTROL_TYPE_LABELS[t] ??
+                                  `${t.charAt(0).toUpperCase()}${t.slice(1)} (map)`}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <SliderField
+                        label="Strength"
+                        value={controlStrength}
+                        min={0}
+                        max={2}
+                        step={0.05}
+                        onChange={setControlStrength}
+                      />
+                    </>
+                  )}
+                </div>
+              </Field>
+            )}
+            {/* A negative prompt only does anything with guidance on, so hide it at
+                guidance 0 (Z-Image-Turbo's default) instead of showing a dead field. */}
+            {guidance > 0 && (
+              <Field
+                label="Negative prompt"
+                hint="What to steer the image away from. Only used when guidance is above 0."
+              >
+                <Textarea
+                  rows={2}
+                  placeholder="What to avoid (optional)"
+                  value={negativePrompt}
+                  onChange={(e) => setNegativePrompt(e.target.value)}
+                />
+              </Field>
+            )}
+
             <Field
-              label="ControlNet"
-              hint="Condition the image on a control map (edges / depth / pose). Union models cover many types. Use 'Canny' to trace edges from your image, or 'Passthrough' if it is already a control map."
+              label="Aspect ratio"
+              hint="Pick a ratio to lock the proportions, then set the size with the sliders. Flip swaps width and height. Sizes run from 256 to 2048 in steps of 16. Z-Image is trained around 1 megapixel, so much larger sizes can look worse."
             >
-              <div className="space-y-2 rounded-lg border border-border bg-muted/30 p-2">
-                <Select value={controlnetId || undefined} onValueChange={setControlnetId}>
-                  <SelectTrigger className="h-8 w-full text-xs">
-                    <SelectValue placeholder="Select a ControlNet" />
+              <div className="flex items-center gap-2">
+                <Select
+                  value={aspect}
+                  onValueChange={changeAspect}
+                  open={active && aspectOpen}
+                  onOpenChange={(o) => setAspectOpen(active && o)}
+                >
+                  <SelectTrigger className="flex-1">
+                    <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    {availableControlNets.map((c) => (
-                      <SelectItem key={c.id} value={c.id}>
-                        {c.display_name}
+                    {ASPECT_OPTIONS.map((key) => (
+                      <SelectItem key={key} value={key}>
+                        {key === "custom" ? "Custom" : key}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-                {controlnetId && (
-                  <>
-                    <ImageDropzone value={controlImage} onChange={setControlImage} />
-                    <div className="flex items-center gap-2">
-                      <span className="shrink-0 text-xs text-muted-foreground">Control type</span>
-                      <Select value={controlType} onValueChange={setControlType}>
-                        <SelectTrigger className="h-8 flex-1 text-xs">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {controlTypeOptions.map((t) => (
-                            <SelectItem key={t} value={t}>
-                              {CONTROL_TYPE_LABELS[t] ??
-                                `${t.charAt(0).toUpperCase()}${t.slice(1)} (map)`}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <SliderField
-                      label="Strength"
-                      value={controlStrength}
-                      min={0}
-                      max={2}
-                      step={0.05}
-                      onChange={setControlStrength}
-                    />
-                  </>
-                )}
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="icon"
+                  aria-label="Flip width and height"
+                  title="Flip orientation"
+                  onClick={flipDimensions}
+                >
+                  <HugeiconsIcon icon={ArrowLeftRightIcon} className="size-4" />
+                </Button>
               </div>
             </Field>
-          )}
-          {/* A negative prompt only does anything with guidance on, so hide it at
-              guidance 0 (Z-Image-Turbo's default) instead of showing a dead field. */}
-          {guidance > 0 && (
-            <Field
-              label="Negative prompt"
-              hint="What to steer the image away from. Only used when guidance is above 0."
-            >
-              <Textarea
-                rows={2}
-                placeholder="What to avoid (optional)"
-                value={negativePrompt}
-                onChange={(e) => setNegativePrompt(e.target.value)}
+            <SliderField label="Width" value={width} min={MIN_DIM} max={MAX_DIM} step={16} onChange={changeWidth} />
+            <SliderField label="Height" value={height} min={MIN_DIM} max={MAX_DIM} step={16} onChange={changeHeight} />
+
+            <SliderField
+              label="Steps"
+              hint="9 is the recommended setting for Z-Image-Turbo. More steps rarely help."
+              value={steps}
+              min={1}
+              max={50}
+              step={1}
+              onChange={setSteps}
+            />
+            <SliderField
+              label="Guidance"
+              hint="Keep this at 0 for Z-Image-Turbo. Higher values make its output worse. Other models use guidance."
+              value={guidance}
+              min={0}
+              max={15}
+              step={0.5}
+              onChange={setGuidance}
+            />
+            <SliderField
+              label="Batch size"
+              hint="How many images to make at once. Faster than running them one by one, but uses more VRAM. They share a seed but each one is different."
+              value={batchSize}
+              min={1}
+              max={32}
+              step={1}
+              onChange={setBatchSize}
+            />
+            <SliderField
+              label="Runs"
+              hint="How many times to repeat the generation, one after another. Each run uses the next seed, so the images differ and can be reproduced."
+              value={count}
+              min={1}
+              max={RUNS_SLIDER_MAX}
+              step={1}
+              onChange={setCount}
+            />
+            <Field label="Seed" hint="Leave empty for a fresh random seed each run.">
+              <Input
+                placeholder="Random if empty"
+                value={seed}
+                onChange={(e) => setSeed(e.target.value)}
               />
             </Field>
-          )}
 
-          <Field
-            label="Aspect ratio"
-            hint="Pick a ratio to lock the proportions, then set the size with the sliders. Flip swaps width and height. Sizes run from 256 to 2048 in steps of 16. Z-Image is trained around 1 megapixel, so much larger sizes can look worse."
-          >
-            <div className="flex items-center gap-2">
-              <Select
-                value={aspect}
-                onValueChange={changeAspect}
-                open={active && aspectOpen}
-                onOpenChange={(o) => setAspectOpen(active && o)}
-              >
-                <SelectTrigger className="flex-1">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {ASPECT_OPTIONS.map((key) => (
-                    <SelectItem key={key} value={key}>
-                      {key === "custom" ? "Custom" : key}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Button
-                type="button"
-                variant="secondary"
-                size="icon"
-                aria-label="Flip width and height"
-                title="Flip orientation"
-                onClick={flipDimensions}
-              >
-                <HugeiconsIcon icon={ArrowLeftRightIcon} className="size-4" />
-              </Button>
-            </div>
-          </Field>
-          <SliderField label="Width" value={width} min={MIN_DIM} max={MAX_DIM} step={16} onChange={changeWidth} />
-          <SliderField label="Height" value={height} min={MIN_DIM} max={MAX_DIM} step={16} onChange={changeHeight} />
-
-          <SliderField
-            label="Steps"
-            hint="9 is the recommended setting for Z-Image-Turbo. More steps rarely help."
-            value={steps}
-            min={1}
-            max={50}
-            step={1}
-            onChange={setSteps}
-          />
-          <SliderField
-            label="Guidance"
-            hint="Keep this at 0 for Z-Image-Turbo. Higher values make its output worse. Other models use guidance."
-            value={guidance}
-            min={0}
-            max={15}
-            step={0.5}
-            onChange={setGuidance}
-          />
-          <SliderField
-            label="Batch size"
-            hint="How many images to make at once. Faster than running them one by one, but uses more VRAM. They share a seed but each one is different."
-            value={batchSize}
-            min={1}
-            max={32}
-            step={1}
-            onChange={setBatchSize}
-          />
-          <SliderField
-            label="Runs"
-            hint="How many times to repeat the generation, one after another. Each run uses the next seed, so the images differ and can be reproduced."
-            value={count}
-            min={1}
-            max={RUNS_SLIDER_MAX}
-            step={1}
-            onChange={setCount}
-          />
-          <Field label="Seed" hint="Leave empty for a fresh random seed each run.">
-            <Input
-              placeholder="Random if empty"
-              value={seed}
-              onChange={(e) => setSeed(e.target.value)}
-            />
-          </Field>
-
-          <Button onClick={handleGenerate} disabled={busy !== null || !status?.loaded}>
-            {busy === "generating" ? <Spinner className="mr-2 size-4" /> : null}
-            {busy === "generating" && genDone != null && count > 1
-              ? `Generating ${genDone}/${count}…`
-              : "Generate"}
-          </Button>
+            <Button onClick={handleGenerate} disabled={busy !== null || !status?.loaded}>
+              {busy === "generating" ? <Spinner className="mr-2 size-4" /> : null}
+              {busy === "generating" && genDone != null && count > 1
+                ? `Generating ${genDone}/${count}…`
+                : "Generate"}
+            </Button>
 
+          </div>
         </div>
 
-        <div className="bg-card corner-squircle relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-3xl ring-1 ring-foreground/10">
+        <div className="bg-card corner-squircle relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-3xl panel-soft-surface">
           <div className="relative flex flex-1 items-center justify-center overflow-auto p-6">
             {selected && selectedSrc ? (
               <>
@@ -3013,7 +3015,7 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
                   key={image.id}
                   type="button"
                   onClick={() => setSelectedId(image.id)}
-                  className="relative size-16 shrink-0 overflow-hidden rounded-lg bg-muted/40 outline-none ring-1 ring-transparent transition-shadow hover:ring-border focus-visible:ring-2 focus-visible:ring-ring"
+                  className="relative size-16 shrink-0 overflow-hidden rounded-[10px] bg-muted/40 outline-none ring-1 ring-transparent transition-shadow hover:ring-border focus-visible:ring-2 focus-visible:ring-ring"
                 >
                   {srcById[image.id] ? (
                     <img
@@ -3048,7 +3050,7 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
             like Chat's run-settings toggle), so the optimisation controls are discoverable
             without being docked open or buried at the bottom of the left rail. */}
         {advancedOpen && (
-          <div className="bg-card corner-squircle flex w-[300px] shrink-0 flex-col overflow-hidden rounded-3xl ring-1 ring-foreground/10">
+          <div className="bg-card corner-squircle flex w-[300px] shrink-0 flex-col overflow-hidden rounded-3xl panel-soft-surface">
             <div className="flex h-[52px] shrink-0 items-center border-b border-border/60 px-4">
               <span className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
                 <HugeiconsIcon icon={Settings02Icon} className="size-4" />
diff --git a/studio/frontend/src/features/images/train/dataset-labeling-grid.tsx b/studio/frontend/src/features/images/train/dataset-labeling-grid.tsx
index 6edc79979d..49c2178754 100644
--- a/studio/frontend/src/features/images/train/dataset-labeling-grid.tsx
+++ b/studio/frontend/src/features/images/train/dataset-labeling-grid.tsx
@@ -106,7 +106,7 @@ function LabelTile({
         uncaptioned ? "border-amber-500/60 bg-amber-500/5" : "border-border",
       )}
     >
-      <div className="group relative aspect-square w-full overflow-hidden rounded-md bg-muted">
+      <div className="group relative aspect-square w-full overflow-hidden rounded-[10px] bg-muted">
         {thumb ? (
           <img src={thumb} alt={record.filename} className="size-full object-cover" />
         ) : (
diff --git a/studio/frontend/src/features/images/train/dataset-showcase.tsx b/studio/frontend/src/features/images/train/dataset-showcase.tsx
index 5660590584..b0e8acf9c1 100644
--- a/studio/frontend/src/features/images/train/dataset-showcase.tsx
+++ b/studio/frontend/src/features/images/train/dataset-showcase.tsx
@@ -39,7 +39,7 @@ function ShowcaseTile({ dataset, filename }: { dataset: string; filename: string
   }, [dataset, filename]);
 
   return (
-    <div className="size-14 shrink-0 overflow-hidden rounded-md bg-muted">
+    <div className="size-14 shrink-0 overflow-hidden rounded-[8px] bg-muted">
       {url ? (
         <img src={url} alt={filename} className="size-full object-cover" />
       ) : (
diff --git a/studio/frontend/src/features/images/train/diffusion-train-panel.tsx b/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
index a89076f141..0942a694bf 100644
--- a/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
+++ b/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
@@ -19,6 +19,15 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import type { TrainingSeriesPoint } from "@/features/training";
 // eslint-disable-next-line no-restricted-imports -- matches images-page.tsx's token access
 import { getHfToken, hfApiToken } from "@/features/hub/stores/hf-token-store";
@@ -110,7 +119,7 @@ function repoIsPrequantized(baseModel: string): boolean {
 // Dataset-select option value prefix for a not-yet-imported example; picking it imports.
 const EXAMPLE_PREFIX = "example:";
 const DATASET_FILE_ACCEPT = ".png,.jpg,.jpeg,.webp,.bmp,.txt,.caption,.jsonl";
-const selectClass = "h-8 w-full rounded-md border border-input bg-background px-2 text-xs";
+const selectClass = "h-8 w-full text-xs";
 
 // Merge the backend's reported families (if any) over the presets, keeping the preset
 // ordering (popularity) and filling labels/notes/defaults the backend omits.
@@ -231,6 +240,8 @@ export function DiffusionTrainPanel({
   const [uploadName, setUploadName] = useState("my-images");
   const [uploading, setUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  // Mirrors the hidden input's selection so the row can report it.
+  const [pickedFileCount, setPickedFileCount] = useState(0);
   const [gridOpen, setGridOpen] = useState(false);
   const [gridRefresh, setGridRefresh] = useState(0);
   const [examples, setExamples] = useState<DiffusionDatasetExample[]>([]);
@@ -596,6 +607,7 @@ export function DiffusionTrainPanel({
           `"${res.name}" now has ${res.image_count} images`,
       );
       if (fileInputRef.current) fileInputRef.current.value = "";
+      setPickedFileCount(0);
       await refreshInfo();
       setDataset(res.name);
       setGridRefresh((k) => k + 1);
@@ -824,18 +836,21 @@ export function DiffusionTrainPanel({
           }}
           className="h-8 min-w-0 flex-1 text-xs"
         />
-        <select
+        <Select
           value={durationUnit}
-          onChange={(e) => {
+          onValueChange={(v) => {
             settingsDirty.current = true;
-            setDurationUnit(e.target.value as "steps" | "epochs");
+            setDurationUnit(v as "steps" | "epochs");
           }}
-          className="h-8 w-24 rounded-md border border-input bg-background px-2 text-xs"
-          aria-label="Run length unit"
         >
-          <option value="steps">Steps</option>
-          <option value="epochs">Epochs</option>
-        </select>
+          <SelectTrigger className="h-8 w-24 text-xs" aria-label="Run length unit">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="steps">Steps</SelectItem>
+            <SelectItem value="epochs">Epochs</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
     </div>
   );
@@ -872,17 +887,20 @@ export function DiffusionTrainPanel({
         })}
         <div className="grid gap-1.5">
           <Label className="text-xs">LR schedule</Label>
-          <select
+          <Select
             value={lrScheduler}
-            onChange={(e) => setLrScheduler(e.target.value as typeof lrScheduler)}
-            className={selectClass}
-            aria-label="LR schedule"
+            onValueChange={(v) => setLrScheduler(v as typeof lrScheduler)}
           >
-            <option value="constant">Constant</option>
-            <option value="constant_with_warmup">Constant + warmup</option>
-            <option value="cosine">Cosine decay</option>
-            <option value="linear">Linear decay</option>
-          </select>
+            <SelectTrigger className={selectClass} aria-label="LR schedule">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="constant">Constant</SelectItem>
+              <SelectItem value="constant_with_warmup">Constant + warmup</SelectItem>
+              <SelectItem value="cosine">Cosine decay</SelectItem>
+              <SelectItem value="linear">Linear decay</SelectItem>
+            </SelectContent>
+          </Select>
           <p className="text-[11px] leading-snug text-muted-foreground">
             How fast the model learns over time. Constant is fine for most runs.
           </p>
@@ -894,15 +912,18 @@ export function DiffusionTrainPanel({
       <div className="grid grid-cols-2 items-start gap-x-6 gap-y-4 lg:grid-cols-3">
         <div className="grid gap-1.5">
           <Label className="text-xs">Gradient checkpointing</Label>
-          <select
+          <Select
             value={gradCheckpoint ? "on" : "off"}
-            onChange={(e) => setGradCheckpoint(e.target.value === "on")}
-            className={selectClass}
-            aria-label="Gradient checkpointing"
+            onValueChange={(v) => setGradCheckpoint(v === "on")}
           >
-            <option value="on">On (less VRAM)</option>
-            <option value="off">Off (faster steps)</option>
-          </select>
+            <SelectTrigger className={selectClass} aria-label="Gradient checkpointing">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="on">On (less VRAM)</SelectItem>
+              <SelectItem value="off">Off (faster steps)</SelectItem>
+            </SelectContent>
+          </Select>
           <p className="text-[11px] leading-snug text-muted-foreground">
             Saves a lot of GPU memory in exchange for slightly slower steps.
           </p>
@@ -911,26 +932,29 @@ export function DiffusionTrainPanel({
         {isDiT ? (
           <div className="grid gap-1.5">
             <Label className="text-xs">Base precision</Label>
-            <select
+            <Select
               value={basePrecision}
-              onChange={(e) => {
+              onValueChange={(v) => {
                 precisionDirty.current = true;
-                setBasePrecision(e.target.value as typeof basePrecision);
+                setBasePrecision(v as typeof basePrecision);
               }}
-              className={selectClass}
-              aria-label="Base precision"
               disabled={familyUntrainable}
             >
-              {precisionModes.map((m) => (
-                <option
-                  key={m}
-                  value={m}
-                  disabled={basePrequantized && DENSE_PRECISIONS.has(m)}
-                >
-                  {precisionLabel(m)}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger className={selectClass} aria-label="Base precision">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {precisionModes.map((m) => (
+                  <SelectItem
+                    key={m}
+                    value={m}
+                    disabled={basePrequantized && DENSE_PRECISIONS.has(m)}
+                  >
+                    {precisionLabel(m)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
             <p className="text-[11px] leading-snug text-muted-foreground">
               {familyUntrainable ? (
                 // The reason itself (the backend's bf16-preflight text) already shows in
@@ -950,16 +974,19 @@ export function DiffusionTrainPanel({
         ) : (
           <div className="grid gap-1.5">
             <Label className="text-xs">Precision</Label>
-            <select
+            <Select
               value={precision}
-              onChange={(e) => setPrecision(e.target.value as "bf16" | "fp16" | "no")}
-              className={selectClass}
-              aria-label="Precision"
+              onValueChange={(v) => setPrecision(v as "bf16" | "fp16" | "no")}
             >
-              <option value="bf16">bf16 (default)</option>
-              <option value="fp16">fp16 (older GPUs)</option>
-              <option value="no">fp32 (no mixed)</option>
-            </select>
+              <SelectTrigger className={selectClass} aria-label="Precision">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="bf16">bf16 (default)</SelectItem>
+                <SelectItem value="fp16">fp16 (older GPUs)</SelectItem>
+                <SelectItem value="no">fp32 (no mixed)</SelectItem>
+              </SelectContent>
+            </Select>
             <p className="text-[11px] leading-snug text-muted-foreground">
               How the math runs during training. bf16 is right for modern GPUs.
             </p>
@@ -968,18 +995,21 @@ export function DiffusionTrainPanel({
         {supportsCompile && (
           <div className="grid gap-1.5">
             <Label className="text-xs">Compile transformer</Label>
-            <select
+            <Select
               value={compileTransformer}
-              onChange={(e) =>
-                setCompileTransformer(e.target.value as typeof compileTransformer)
+              onValueChange={(v) =>
+                setCompileTransformer(v as typeof compileTransformer)
               }
-              className={selectClass}
-              aria-label="Compile transformer"
             >
-              <option value="auto">Auto</option>
-              <option value="on">On (faster after warmup)</option>
-              <option value="off">Off</option>
-            </select>
+              <SelectTrigger className={selectClass} aria-label="Compile transformer">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="auto">Auto</SelectItem>
+                <SelectItem value="on">On (faster after warmup)</SelectItem>
+                <SelectItem value="off">Off</SelectItem>
+              </SelectContent>
+            </Select>
             <p className="text-[11px] leading-snug text-muted-foreground">
               Warms up once at the start, then every training step runs faster.
             </p>
@@ -992,225 +1022,248 @@ export function DiffusionTrainPanel({
   return (
     <div className="flex min-h-0 min-w-0 flex-1 gap-4 overflow-hidden px-5 pb-8 pt-6 sm:px-9">
       {/* Left: configure */}
-      <div className="bg-card corner-squircle flex w-[380px] min-w-0 shrink-0 flex-col gap-4 overflow-y-auto overflow-x-hidden rounded-3xl p-5 ring-1 ring-foreground/10">
-        <div>
-          <h2 className="text-sm font-semibold">Train a LoRA</h2>
-          <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
-            Teach an image model a style, character, or subject from your own images. The
-            finished adapter shows up in the Create tab&apos;s LoRA picker.
-          </p>
-        </div>
-
-        {/* Family + base */}
-        <div className="grid gap-1.5">
-          <Label className="text-xs">Model family</Label>
-          <select
-            value={familyName}
-            onChange={(e) => setFamilyName(e.target.value)}
-            className={selectClass}
-            aria-label="Model family"
-          >
-            {families.map((f) => (
-              <option key={f.name} value={f.name}>
-                {f.label}
-              </option>
-            ))}
-          </select>
-          {family?.vram_note && (
-            <p className="text-[11px] leading-snug text-muted-foreground">{family.vram_note}</p>
-          )}
-        </div>
-
-        <div className="grid gap-1.5">
-          <Label className="text-xs">Base model</Label>
-          <select
-            value={effectiveBase}
-            onChange={(e) => setBaseChoice(e.target.value)}
-            className={selectClass}
-            aria-label="Base model"
-          >
-            {(family?.base_repos ?? []).map((repo) => (
-              <option key={repo} value={repo}>
-                {repo}
-              </option>
-            ))}
-            <option value={CUSTOM_BASE}>Custom repo or local path...</option>
-          </select>
-          {effectiveBase === CUSTOM_BASE && (
-            <Input
-              value={customBase}
-              placeholder="my-org/my-base or /path/to/pipeline"
-              spellCheck={false}
-              onChange={(e) => setCustomBase(e.target.value)}
-              className="h-8 text-xs"
-            />
-          )}
-        </div>
-
-        {/* Dataset */}
-        <div className="grid gap-1.5">
-          <Label className="text-xs">Training images</Label>
-          <select
-            value={dataset}
-            onChange={(e) => {
-              const v = e.target.value;
-              if (v.startsWith(EXAMPLE_PREFIX)) {
-                const ex = pendingExamples.find((x) => x.id === v.slice(EXAMPLE_PREFIX.length));
-                if (ex) void importExample(ex);
-                return; // controlled select snaps back to the current dataset while importing
-              }
-              setDataset(v);
-              setGridOpen(false);
-            }}
-            className={selectClass}
-            aria-label="Training images"
-            disabled={importingId !== null}
-          >
-            {(info?.datasets ?? []).map((d) => (
-              <option key={d.name} value={d.name}>
-                {d.name} ({d.image_count} image{d.image_count === 1 ? "" : "s"}
-                {d.caption_count > 0 ? `, ${d.caption_count} captions` : ""})
-              </option>
-            ))}
-            {pendingExamples.length > 0 && (
-              <optgroup label="Examples (one-click import)">
-                {pendingExamples.map((ex) => (
-                  <option key={ex.id} value={`${EXAMPLE_PREFIX}${ex.id}`}>
-                    {ex.label} ({ex.image_cap} images, {ex.license})
-                  </option>
-                ))}
-              </optgroup>
-            )}
-            <option value={UPLOAD_DATASET}>Upload new images...</option>
-          </select>
-          {importingId && (
-            <p className="text-[11px] text-muted-foreground">
-              Importing {examples.find((e) => e.id === importingId)?.label ?? "example"}...
+      <div className="bg-card corner-squircle flex w-[380px] min-w-0 shrink-0 flex-col overflow-hidden rounded-3xl panel-soft-surface">
+        <div className="flex min-h-0 flex-col gap-4 overflow-y-auto overflow-x-hidden p-5">
+          <div>
+            <h2 className="text-sm font-semibold">Train a LoRA</h2>
+            <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
+              Teach an image model a style, character, or subject from your own images. The
+              finished adapter shows up in the Create tab&apos;s LoRA picker.
             </p>
-          )}
+          </div>
 
-          {dataset === UPLOAD_DATASET ? (
-            <div className="grid gap-1.5 rounded-md border border-dashed border-border p-2">
-              <Input
-                value={uploadName}
-                placeholder="my-style-photos"
-                spellCheck={false}
-                onChange={(e) => setUploadName(e.target.value)}
-                className="h-8 text-xs"
-                aria-label="New dataset name"
-              />
-              <div className="flex items-center gap-2">
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  multiple
-                  accept={DATASET_FILE_ACCEPT}
-                  className="min-w-0 flex-1 text-xs file:mr-2 file:rounded-md file:border-0 file:bg-muted file:px-2 file:py-1 file:text-xs"
-                  aria-label="Training image files"
-                />
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="secondary"
-                  className="h-8 shrink-0"
-                  onClick={onUpload}
-                  disabled={uploading}
-                >
-                  {uploading ? "Uploading..." : "Upload"}
-                </Button>
-              </div>
-              <p className="text-[11px] text-muted-foreground">
-                10-50 images are plenty. Captions are optional: without them, the trigger
-                prompt below describes every image.
-              </p>
-            </div>
-          ) : (
-            selectedDataset && (
-              <>
-                {selectedDataset.image_count > 0 && !gridOpen && (
-                  <DatasetShowcase
-                    dataset={dataset}
-                    imageCount={selectedDataset.image_count}
-                    refreshKey={gridRefresh}
-                    onBrowse={() => setGridOpen(true)}
-                  />
-                )}
-                <LabelingGridToggle
-                  count={selectedDataset.image_count}
-                  open={gridOpen}
-                  onToggle={() => setGridOpen((o) => !o)}
-                />
-                {gridOpen && (
-                  <DatasetLabelingGrid
-                    dataset={dataset}
-                    refreshKey={gridRefresh}
-                    onCountsChanged={() => void refreshInfo()}
-                  />
-                )}
-                {selectedDataset.caption_count === 0 && !gridOpen && (
-                  <p className="text-[11px] text-muted-foreground">
-                    No captions yet: the trigger prompt below will describe every image,
-                    or open Review captions to write your own.
-                  </p>
-                )}
-              </>
-            )
-          )}
-
-          <ExampleDatasetCards
-            examples={pendingExamples}
-            busyId={importingId}
-            onImport={(ex) => void importExample(ex)}
-          />
-        </div>
-
-        {/* Trigger + adapter name (trigger first: it describes the dataset, the name
-            just labels the output) */}
-        {fullyCaptioned ? (
-          <p className="text-[11px] leading-snug text-muted-foreground">
-            All {selectedDataset?.image_count} images have captions - no trigger prompt needed.
-            The style applies to any prompt after training.
-          </p>
-        ) : (
+          {/* Family + base */}
           <div className="grid gap-1.5">
-            <Label className="text-xs">
-              Trigger prompt (how you&apos;ll invoke the style later)
-            </Label>
+            <Label className="text-xs">Model family</Label>
+            <Select value={familyName} onValueChange={setFamilyName}>
+              <SelectTrigger className={selectClass} aria-label="Model family">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {families.map((f) => (
+                  <SelectItem key={f.name} value={f.name}>
+                    {f.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {family?.vram_note && (
+              <p className="text-[11px] leading-snug text-muted-foreground">{family.vram_note}</p>
+            )}
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label className="text-xs">Base model</Label>
+            <Select value={effectiveBase} onValueChange={setBaseChoice}>
+              <SelectTrigger className={selectClass} aria-label="Base model">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {(family?.base_repos ?? []).map((repo) => (
+                  <SelectItem key={repo} value={repo}>
+                    {repo}
+                  </SelectItem>
+                ))}
+                <SelectItem value={CUSTOM_BASE}>Custom repo or local path...</SelectItem>
+              </SelectContent>
+            </Select>
+            {effectiveBase === CUSTOM_BASE && (
+              <Input
+                value={customBase}
+                placeholder="my-org/my-base or /path/to/pipeline"
+                spellCheck={false}
+                onChange={(e) => setCustomBase(e.target.value)}
+                className="h-8 text-xs"
+              />
+            )}
+          </div>
+
+          {/* Dataset */}
+          <div className="grid gap-1.5">
+            <Label className="text-xs">Training images</Label>
+            <Select
+              value={dataset}
+              onValueChange={(v) => {
+                if (v.startsWith(EXAMPLE_PREFIX)) {
+                  const ex = pendingExamples.find((x) => x.id === v.slice(EXAMPLE_PREFIX.length));
+                  if (ex) void importExample(ex);
+                  return; // the controlled value stays put while the import runs
+                }
+                setDataset(v);
+                setGridOpen(false);
+              }}
+              disabled={importingId !== null}
+            >
+              <SelectTrigger className={selectClass} aria-label="Training images">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {(info?.datasets ?? []).map((d) => (
+                  <SelectItem key={d.name} value={d.name}>
+                    {d.name} ({d.image_count} image{d.image_count === 1 ? "" : "s"}
+                    {d.caption_count > 0 ? `, ${d.caption_count} captions` : ""})
+                  </SelectItem>
+                ))}
+                {pendingExamples.length > 0 && (
+                  <SelectGroup>
+                    <SelectLabel>Examples (one-click import)</SelectLabel>
+                    {pendingExamples.map((ex) => (
+                      <SelectItem key={ex.id} value={`${EXAMPLE_PREFIX}${ex.id}`}>
+                        {ex.label} ({ex.image_cap} images, {ex.license})
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                )}
+                <SelectItem value={UPLOAD_DATASET}>Upload new images...</SelectItem>
+              </SelectContent>
+            </Select>
+            {importingId && (
+              <p className="text-[11px] text-muted-foreground">
+                Importing {examples.find((e) => e.id === importingId)?.label ?? "example"}...
+              </p>
+            )}
+
+            {dataset === UPLOAD_DATASET ? (
+              <div className="grid gap-1.5 rounded-md border border-dashed border-border p-2">
+                <Input
+                  value={uploadName}
+                  placeholder="my-style-photos"
+                  spellCheck={false}
+                  onChange={(e) => setUploadName(e.target.value)}
+                  className="h-8 text-xs"
+                  aria-label="New dataset name"
+                />
+                <div className="flex items-center gap-2">
+                  {/* The native input is the file picker but never the control the
+                      user sees, so the row keeps the app's button styling. */}
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept={DATASET_FILE_ACCEPT}
+                    className="hidden"
+                    aria-label="Training image files"
+                    onChange={(e) => setPickedFileCount(e.target.files?.length ?? 0)}
+                  />
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    className="h-8 shrink-0"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={uploading}
+                  >
+                    Choose images
+                  </Button>
+                  <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+                    {pickedFileCount > 0
+                      ? `${pickedFileCount} file${pickedFileCount === 1 ? "" : "s"} selected`
+                      : "No files selected"}
+                  </span>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="secondary"
+                    className="h-8 shrink-0"
+                    onClick={onUpload}
+                    disabled={uploading}
+                  >
+                    {uploading ? "Uploading..." : "Upload"}
+                  </Button>
+                </div>
+                <p className="text-[11px] text-muted-foreground">
+                  10-50 images are plenty. Captions are optional: without them, the trigger
+                  prompt below describes every image.
+                </p>
+              </div>
+            ) : (
+              selectedDataset && (
+                <>
+                  {selectedDataset.image_count > 0 && !gridOpen && (
+                    <DatasetShowcase
+                      dataset={dataset}
+                      imageCount={selectedDataset.image_count}
+                      refreshKey={gridRefresh}
+                      onBrowse={() => setGridOpen(true)}
+                    />
+                  )}
+                  <LabelingGridToggle
+                    count={selectedDataset.image_count}
+                    open={gridOpen}
+                    onToggle={() => setGridOpen((o) => !o)}
+                  />
+                  {gridOpen && (
+                    <DatasetLabelingGrid
+                      dataset={dataset}
+                      refreshKey={gridRefresh}
+                      onCountsChanged={() => void refreshInfo()}
+                    />
+                  )}
+                  {selectedDataset.caption_count === 0 && !gridOpen && (
+                    <p className="text-[11px] text-muted-foreground">
+                      No captions yet: the trigger prompt below will describe every image,
+                      or open Review captions to write your own.
+                    </p>
+                  )}
+                </>
+              )
+            )}
+
+            <ExampleDatasetCards
+              examples={pendingExamples}
+              busyId={importingId}
+              onImport={(ex) => void importExample(ex)}
+            />
+          </div>
+
+          {/* Trigger + adapter name (trigger first: it describes the dataset, the name
+              just labels the output) */}
+          {fullyCaptioned ? (
+            <p className="text-[11px] leading-snug text-muted-foreground">
+              All {selectedDataset?.image_count} images have captions - no trigger prompt needed.
+              The style applies to any prompt after training.
+            </p>
+          ) : (
+            <div className="grid gap-1.5">
+              <Label className="text-xs">
+                Trigger prompt (how you&apos;ll invoke the style later)
+              </Label>
+              <Input
+                value={instancePrompt}
+                placeholder="a photo in SKS style"
+                onChange={(e) => setInstancePrompt(e.target.value)}
+                className="h-8 text-xs"
+              />
+            </div>
+          )}
+          <div className="grid gap-1.5">
+            <Label className="text-xs">Adapter name</Label>
             <Input
-              value={instancePrompt}
-              placeholder="a photo in SKS style"
-              onChange={(e) => setInstancePrompt(e.target.value)}
+              value={outputDir}
+              placeholder="my-style-lora"
+              spellCheck={false}
+              onChange={(e) => setOutputDir(e.target.value)}
               className="h-8 text-xs"
             />
           </div>
-        )}
-        <div className="grid gap-1.5">
-          <Label className="text-xs">Adapter name</Label>
-          <Input
-            value={outputDir}
-            placeholder="my-style-lora"
-            spellCheck={false}
-            onChange={(e) => setOutputDir(e.target.value)}
-            className="h-8 text-xs"
-          />
-        </div>
 
-        {/* Start lives here; Stop lives in the run card next to the live stats. */}
-        <div className="mt-auto pt-2">
-          <Button
-            type="button"
-            className="w-full"
-            onClick={onStart}
-            disabled={starting || uploading || running || familyUntrainable}
-          >
-            {starting
-              ? "Starting..."
-              : running
-                ? "Training in progress"
-                : familyUntrainable
-                  ? "Not supported on this GPU"
-                  : "Start training"}
-          </Button>
+          {/* Start lives here; Stop lives in the run card next to the live stats. */}
+          <div className="mt-auto pt-2">
+            <Button
+              type="button"
+              className="w-full"
+              onClick={onStart}
+              disabled={starting || uploading || running || familyUntrainable}
+            >
+              {starting
+                ? "Starting..."
+                : running
+                  ? "Training in progress"
+                  : familyUntrainable
+                    ? "Not supported on this GPU"
+                    : "Start training"}
+            </Button>
+          </div>
         </div>
       </div>
 
@@ -1218,12 +1271,12 @@ export function DiffusionTrainPanel({
           front) plus the previous-runs history; during/after a run the live view takes
           over (progress with Stop, then the saved-adapter card ABOVE the charts).
           Selecting a previous run re-plots its persisted logs read-only. */}
-      {/* p-px so the cards' ring-1 (drawn outside the box) isn't clipped by this
+      {/* p-1.5 so the cards' shadow (drawn outside the box) isn't clipped by this
           scroll container. */}
-      <div className="relative flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto p-px">
+      <div className="relative flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto p-1.5">
         {viewRun && !hasRun ? (
           <>
-            <div className="bg-card corner-squircle flex flex-col gap-3 rounded-3xl p-5 ring-1 ring-foreground/10">
+            <div className="bg-card corner-squircle flex flex-col gap-3 rounded-3xl p-5 panel-soft-surface">
               <div className="flex items-center justify-between">
                 <span className="text-sm font-semibold">
                   Previous run: {viewRun.adapter || viewRun.job_id.slice(0, 8)}
@@ -1286,7 +1339,7 @@ export function DiffusionTrainPanel({
           </>
         ) : !hasRun ? (
           <>
-            <div className="bg-card corner-squircle flex flex-col gap-4 rounded-3xl p-5 ring-1 ring-foreground/10">
+            <div className="bg-card corner-squircle flex flex-col gap-4 rounded-3xl p-5 panel-soft-surface">
               <div className="flex items-center justify-between">
                 <span className="flex items-center gap-1.5 text-sm font-semibold">
                   <HugeiconsIcon icon={Settings02Icon} className="size-4" />
@@ -1304,7 +1357,7 @@ export function DiffusionTrainPanel({
             </div>
 
             {prevRuns.length > 0 && (
-              <div className="bg-card corner-squircle flex flex-col gap-2 rounded-3xl p-5 ring-1 ring-foreground/10">
+              <div className="bg-card corner-squircle flex flex-col gap-2 rounded-3xl p-5 panel-soft-surface">
                 <span className="text-sm font-semibold">Previous runs</span>
                 <div className="flex flex-col divide-y divide-border/60">
                   {prevRuns.map((r) => (
@@ -1344,7 +1397,7 @@ export function DiffusionTrainPanel({
           </>
         ) : (
           <>
-            <div className="bg-card corner-squircle flex flex-col gap-3 rounded-3xl p-5 ring-1 ring-foreground/10">
+            <div className="bg-card corner-squircle flex flex-col gap-3 rounded-3xl p-5 panel-soft-surface">
               <div className="flex items-center justify-between">
                 <span className="text-sm font-semibold capitalize">
                   {status?.status === "completed" ? "Training complete \u{1F389}" : status?.status}
@@ -1420,7 +1473,7 @@ export function DiffusionTrainPanel({
             </div>
 
             {(completed || stoppedWithAdapter) && (
-              <div className="bg-card corner-squircle flex flex-col gap-2 rounded-3xl p-5 ring-1 ring-foreground/10">
+              <div className="bg-card corner-squircle flex flex-col gap-2 rounded-3xl p-5 panel-soft-surface">
                 <span className="text-sm font-semibold">
                   {completed ? "Adapter ready" : "Partial adapter saved"}
                 </span>
diff --git a/studio/frontend/src/features/images/train/example-dataset-cards.tsx b/studio/frontend/src/features/images/train/example-dataset-cards.tsx
index 45a0eb8444..52fb966217 100644
--- a/studio/frontend/src/features/images/train/example-dataset-cards.tsx
+++ b/studio/frontend/src/features/images/train/example-dataset-cards.tsx
@@ -66,7 +66,7 @@ function ExamplePreviews({ repo }: { repo: string }) {
   return (
     <div className="flex gap-1">
       {urls.map((u) => (
-        <div key={u} className="size-10 shrink-0 overflow-hidden rounded-md bg-muted">
+        <div key={u} className="size-10 shrink-0 overflow-hidden rounded-[8px] bg-muted">
           <img src={u} alt="" loading="lazy" className="size-full object-cover" />
         </div>
       ))}
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index 72e29c3b46..d85420aa34 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -1505,6 +1505,16 @@ html[data-chat-font] .aui-root {
 		box-shadow: none;
 	}
 
+	/* Panel cards: no outline, composer shadow in light, flat in dark (same
+	   convention as .chat-composer-surface and the menus). */
+	.panel-soft-surface {
+		box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
+	}
+
+	.dark .panel-soft-surface {
+		box-shadow: none;
+	}
+
 	.composer-pill-btn {
 		@apply flex cursor-pointer items-center gap-1.5 rounded-full py-1.5 pl-2 pr-2.5 text-ui-14 font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.1] disabled:cursor-not-allowed disabled:opacity-40;
 	}