From 097167ee2ce9de180bbd3949a9fdbca2ceb71749 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.eichberger@gmx.net>
Date: Wed, 29 Jul 2026 17:54:42 +0200
Subject: [PATCH 1/3] Make queue rows and drawer headers toggle selection, with
 shift-click ranges and explicit edit buttons.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/MainPage.vue | 111 ++++++++++++++++++++++++++++++--
 1 file changed, 106 insertions(+), 5 deletions(-)

diff --git a/web/src/components/MainPage.vue b/web/src/components/MainPage.vue
index 97d0c08..4fba670 100644
--- a/web/src/components/MainPage.vue
+++ b/web/src/components/MainPage.vue
@@ -91,6 +91,96 @@ function rowTitleFull(entry: QueueEntry): string {
 const selectedIds = ref<Set<string>>(new Set());
 const plateCounts = ref<Map<string, number>>(new Map());
 
+// Anchor for shift-click range selection: the id of the last entry row the
+// user clicked, if it is still rendered.
+const lastClickedId = ref<string | null>(null);
+
+function onRowClick(entry: QueueEntry, event: MouseEvent): void {
+  const orderedIds = queueRows.value
+    .filter((row) => row.kind !== 'group')
+    .map((row) => row.entry.id);
+  const anchorIndex =
+    lastClickedId.value !== null ? orderedIds.indexOf(lastClickedId.value) : -1;
+  if (event.shiftKey && anchorIndex !== -1) {
+    event.preventDefault();
+    const clickedIndex = orderedIds.indexOf(entry.id);
+    const start = Math.min(anchorIndex, clickedIndex);
+    const end = Math.max(anchorIndex, clickedIndex);
+    const selecting = !selectedIds.value.has(entry.id);
+    const entriesById = new Map(queue.entries.map((e) => [e.id, e]));
+    const nextIds = new Set(selectedIds.value);
+    const nextCounts = new Map(plateCounts.value);
+    for (let i = start; i <= end; i++) {
+      const id = orderedIds[i];
+      if (selecting) {
+        nextIds.add(id);
+        if (!nextCounts.has(id)) {
+          const target = entriesById.get(id);
+          if (target !== undefined) nextCounts.set(id, target.quantity);
+        }
+      } else {
+        nextIds.delete(id);
+        nextCounts.delete(id);
+      }
+    }
+    selectedIds.value = nextIds;
+    plateCounts.value = nextCounts;
+  } else {
+    toggleSelected(entry);
+  }
+  lastClickedId.value = entry.id;
+}
+
+/**
+ * The ids of a group's plate rows: the consecutive entry rows following its
+ * header in queueRows, which mirrors partitionQueue's ordering.
+ */
+function groupEntryIds(group: Group): string[] {
+  const rows = queueRows.value;
+  const headerIndex = rows.findIndex(
+    (row) => row.kind === 'group' && row.group.id === group.id,
+  );
+  if (headerIndex === -1) return [];
+  const ids: string[] = [];
+  for (let i = headerIndex + 1; i < rows.length; i++) {
+    const row = rows[i];
+    if (row.kind !== 'entry' || !row.grouped) break;
+    ids.push(row.entry.id);
+  }
+  return ids;
+}
+
+// Group header click: select all the group's plate rows, or deselect them
+// all when every one is already selected.
+function onGroupClick(group: Group): void {
+  const ids = groupEntryIds(group);
+  if (ids.length === 0) return;
+  const allSelected = ids.every((id) => selectedIds.value.has(id));
+  const entriesById = new Map(queue.entries.map((e) => [e.id, e]));
+  const nextIds = new Set(selectedIds.value);
+  const nextCounts = new Map(plateCounts.value);
+  for (const id of ids) {
+    if (allSelected) {
+      nextIds.delete(id);
+      nextCounts.delete(id);
+    } else {
+      nextIds.add(id);
+      if (!nextCounts.has(id)) {
+        const target = entriesById.get(id);
+        if (target !== undefined) nextCounts.set(id, target.quantity);
+      }
+    }
+  }
+  selectedIds.value = nextIds;
+  plateCounts.value = nextCounts;
+  lastClickedId.value = ids[ids.length - 1];
+}
+
+function isGroupSelected(group: Group): boolean {
+  const ids = groupEntryIds(group);
+  return ids.length > 0 && ids.every((id) => selectedIds.value.has(id));
+}
+
 function toggleSelected(entry: QueueEntry): void {
   const nextIds = new Set(selectedIds.value);
   const nextCounts = new Map(plateCounts.value);
@@ -248,8 +338,9 @@ function removeRow(entry: QueueEntry): void {
         v-if="row.kind === 'group'"
         :key="`g-${row.group.id}`"
         class="group-header"
+        :class="{ selected: isGroupSelected(row.group) }"
         role="button"
-        @click="app.openDrawer(row.group.id)"
+        @click="onGroupClick(row.group)"
       >
         <v-icon icon="mdi-view-grid-outline" size="18" class="mr-2 text-medium-emphasis" />
         <span class="row-text">
@@ -259,8 +350,11 @@ function removeRow(entry: QueueEntry): void {
         <v-chip size="small" variant="tonal" color="primary">
           {{ row.descriptor.counts.done }} / {{ row.descriptor.counts.total }} printed
         </v-chip>
-        <v-icon icon="mdi-chevron-right" size="20" class="text-medium-emphasis" />
         <div class="row-actions d-flex ga-1 justify-end" @click.stop>
+          <v-btn icon size="small" variant="text" @click="app.openDrawer(row.group.id)">
+            <v-icon icon="mdi-pencil-outline" size="18" />
+            <v-tooltip activator="parent" location="bottom">Edit drawer</v-tooltip>
+          </v-btn>
           <v-btn
             icon
             size="small"
@@ -279,14 +373,14 @@ function removeRow(entry: QueueEntry): void {
         class="qrow"
         :class="{ selected: selectedIds.has(row.entry.id), grouped: row.grouped }"
         role="button"
-        @click="editRow(row.entry)"
+        @click="onRowClick(row.entry, $event)"
       >
       <template v-for="entry in [row.entry]" :key="entry.id">
         <v-checkbox-btn
           :model-value="selectedIds.has(entry.id)"
           density="compact"
           class="flex-grow-0 row-check"
-          @click.stop="toggleSelected(entry)"
+          @click.stop="onRowClick(entry, $event)"
         />
         <span class="row-text">
           <span class="row-title" :title="rowTitleFull(entry)">
@@ -332,6 +426,10 @@ function removeRow(entry: QueueEntry): void {
         </div>
         <div v-else></div>
         <div class="row-actions d-flex ga-1 justify-end" @click.stop>
+          <v-btn icon size="small" variant="text" @click="editRow(entry)">
+            <v-icon icon="mdi-pencil-outline" size="18" />
+            <v-tooltip activator="parent" location="bottom">Edit</v-tooltip>
+          </v-btn>
           <v-menu>
             <template #activator="{ props: menuProps }">
               <v-btn
@@ -414,6 +512,7 @@ function removeRow(entry: QueueEntry): void {
   border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
   border-radius: 10px;
   cursor: pointer;
+  user-select: none;
   background: rgb(var(--v-theme-surface));
 }
 
@@ -429,6 +528,7 @@ function removeRow(entry: QueueEntry): void {
   border: 1px solid rgba(var(--v-theme-primary), 0.4);
   border-radius: 10px;
   cursor: pointer;
+  user-select: none;
   background: rgba(var(--v-theme-primary), 0.04);
 }
 
@@ -463,7 +563,8 @@ function removeRow(entry: QueueEntry): void {
   border-color: rgb(var(--v-theme-primary));
 }
 
-.qrow.selected {
+.qrow.selected,
+.group-header.selected {
   border-color: rgb(var(--v-theme-primary));
   background: rgba(var(--v-theme-primary), 0.08);
 }

From 61b38294270a5ca43266cc4923f2ec57eabf0eaa Mon Sep 17 00:00:00 2001
From: Jakob <jakob.eichberger@gmx.net>
Date: Wed, 29 Jul 2026 18:19:18 +0200
Subject: [PATCH 2/3] Add a split add-to-queue button with
 add-to-newest-build-plate and direct STL/3MF downloads.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/AddToQueueSplitButton.vue |  76 ++++++++++++
 web/src/components/BaseplateTab.vue          |  56 ++++++++-
 web/src/components/ManualBinTab.vue          |  55 ++++++++-
 web/src/components/ScrewEntryTab.vue         |  86 ++++++++++++--
 web/src/components/cutout/CutoutTab.vue      |  60 ++++++++--
 web/src/components/trace/LayoutWorkspace.vue | 116 ++++++++++++++-----
 web/src/engine/plan/batches.ts               |  29 +++++
 web/src/stores/binQueue.ts                   |  49 +++++++-
 web/tests/plan/batches.spec.ts               |  41 +++++++
 9 files changed, 502 insertions(+), 66 deletions(-)
 create mode 100644 web/src/components/AddToQueueSplitButton.vue

diff --git a/web/src/components/AddToQueueSplitButton.vue b/web/src/components/AddToQueueSplitButton.vue
new file mode 100644
index 0000000..5fec91a
--- /dev/null
+++ b/web/src/components/AddToQueueSplitButton.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/**
+ * The split add button of the add/edit tabs: the primary button queues (or
+ * saves the edit) exactly as the plain button did, and a joined dropdown
+ * opens the secondary actions (queue onto the newest build plate, or download
+ * the design directly as STL or 3MF). In edit mode the dropdown is hidden:
+ * the secondary actions only apply to a new design. The component is
+ * presentation only; the owning tab performs every action.
+ */
+
+withDefaults(
+  defineProps<{
+    /** Whether the tab is editing an existing queue entry. */
+    editing: boolean;
+    /** Disables the primary button and the dropdown alike. */
+    disabled?: boolean;
+    /** Button size, matching whatever the tab's plain button used. */
+    size?: string;
+  }>(),
+  { disabled: false, size: 'large' },
+);
+
+const emit = defineEmits<{
+  add: [];
+  addToPlate: [];
+  download: [format: 'stl' | '3mf'];
+}>();
+</script>
+
+<template>
+  <div class="d-flex split-root">
+    <v-btn
+      color="primary"
+      variant="flat"
+      :size="size"
+      class="flex-grow-1"
+      :class="{ 'split-main': !editing }"
+      :disabled="disabled"
+      @click="emit('add')"
+    >
+      {{ editing ? 'Save changes' : 'Add to queue' }}
+    </v-btn>
+    <v-btn
+      v-if="!editing"
+      color="primary"
+      variant="flat"
+      :size="size"
+      class="split-arrow"
+      :disabled="disabled"
+      aria-label="More ways to use this design"
+    >
+      <v-icon icon="mdi-chevron-down" />
+      <v-menu activator="parent">
+        <v-list density="compact">
+          <v-list-item title="Add to newest build plate" @click="emit('addToPlate')" />
+          <v-list-item title="Download STL" @click="emit('download', 'stl')" />
+          <v-list-item title="Download 3MF" @click="emit('download', '3mf')" />
+        </v-list>
+      </v-menu>
+    </v-btn>
+  </div>
+</template>
+
+<style scoped>
+.split-main {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.split-arrow {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 1px solid rgba(255, 255, 255, 0.35);
+  min-width: 44px;
+  padding: 0;
+}
+</style>
diff --git a/web/src/components/BaseplateTab.vue b/web/src/components/BaseplateTab.vue
index 61a46d2..7b97609 100644
--- a/web/src/components/BaseplateTab.vue
+++ b/web/src/components/BaseplateTab.vue
@@ -18,6 +18,8 @@ import { originOf, type QueueEntry } from '../engine/plan/types';
 import { describeProduct } from '../engine/plan/rowDescriptor';
 import { baseplateCellCount } from '../engine/baseplate/generator';
 import { validateProduct } from '../engine/plan/planFile';
+import { downloadProduct3mf, downloadProductStl } from '../binDownloads';
+import AddToQueueSplitButton from './AddToQueueSplitButton.vue';
 import BinViewport from './BinViewport.vue';
 import BaseplateOptionsFields from './BaseplateOptionsFields.vue';
 import ConnectionClipCard from './ConnectionClipCard.vue';
@@ -187,12 +189,41 @@ function saveEntry(): void {
     if (saveError.value !== null) return;
     app.stopEditing();
   } else {
-    saveError.value = queue.add(product, quantity.value, cleanNotes);
-    if (saveError.value !== null) return;
+    const result = queue.add(product, quantity.value, cleanNotes);
+    saveError.value = result.problem;
+    if (result.problem !== null) return;
   }
   resetForm();
 }
 
+/** Queues the baseplate and moves it onto the newest build plate in one step. */
+function addToPlate(): void {
+  const cleanNotes = store.notes.trim();
+  const result = queue.add(store.product, quantity.value, cleanNotes);
+  saveError.value = result.problem;
+  if (result.problem !== null) return;
+  queue.addEntryToNewestBatch(result.id, quantity.value);
+  resetForm();
+}
+
+// Direct downloads of the designed baseplate, without touching the queue. The
+// warnings a generation can return are shown, never dropped.
+const downloadWarnings = ref<string[]>([]);
+
+async function downloadDesign(format: 'stl' | '3mf'): Promise<void> {
+  saveError.value = null;
+  downloadWarnings.value = [];
+  try {
+    const product = store.product;
+    downloadWarnings.value =
+      format === 'stl'
+        ? await downloadProductStl(product)
+        : await downloadProduct3mf(product);
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : 'The download failed.';
+  }
+}
+
 function cancelEdit(): void {
   app.stopEditing();
   resetForm();
@@ -238,7 +269,7 @@ function addClips(): void {
     if (clipSaveError.value !== null) return;
     app.stopEditing();
   } else {
-    clipSaveError.value = queue.add(product, clipQuantity.value);
+    clipSaveError.value = queue.add(product, clipQuantity.value).problem;
   }
 }
 
@@ -425,11 +456,24 @@ const drawerMode = computed(() => app.viewingDrawerId !== null);
       <v-alert v-if="saveError" type="error" class="mt-4" density="compact">
         {{ saveError }}
       </v-alert>
+      <v-alert
+        v-if="downloadWarnings.length > 0"
+        type="warning"
+        variant="tonal"
+        density="compact"
+        class="mt-4"
+      >
+        <p v-for="warning in downloadWarnings" :key="warning" class="mb-1">{{ warning }}</p>
+      </v-alert>
 
       <div class="d-flex ga-2 mt-4">
-        <v-btn color="primary" variant="flat" size="large" class="flex-grow-1" @click="saveEntry">
-          {{ editingEntry !== null ? 'Save changes' : 'Add to queue' }}
-        </v-btn>
+        <AddToQueueSplitButton
+          class="flex-grow-1"
+          :editing="editingEntry !== null"
+          @add="saveEntry"
+          @add-to-plate="addToPlate"
+          @download="downloadDesign"
+        />
         <v-btn v-if="editingEntry !== null" variant="outlined" size="large" @click="cancelEdit">
           Cancel edit
         </v-btn>
diff --git a/web/src/components/ManualBinTab.vue b/web/src/components/ManualBinTab.vue
index c42ab23..992e3d8 100644
--- a/web/src/components/ManualBinTab.vue
+++ b/web/src/components/ManualBinTab.vue
@@ -12,6 +12,8 @@ import type { DividerWall } from '../engine/gridfinity/dividerModel';
 import { originOf, type Product, type QueueEntry } from '../engine/plan/types';
 import { describeProduct } from '../engine/plan/rowDescriptor';
 import { overallHeightMm } from '../heightHint';
+import { downloadProduct3mf, downloadProductStl } from '../binDownloads';
+import AddToQueueSplitButton from './AddToQueueSplitButton.vue';
 import BinViewport from './BinViewport.vue';
 import LabelIconField from './LabelIconField.vue';
 import ProductSelect from './ProductSelect.vue';
@@ -170,12 +172,41 @@ function saveEntry(): void {
     if (saveError.value !== null) return;
     app.stopEditing();
   } else {
-    saveError.value = queue.add(product, quantity.value, cleanNotes);
-    if (saveError.value !== null) return;
+    const result = queue.add(product, quantity.value, cleanNotes);
+    saveError.value = result.problem;
+    if (result.problem !== null) return;
   }
   resetForm();
 }
 
+/** Queues the design and moves it onto the newest build plate in one step. */
+function addToPlate(): void {
+  const cleanNotes = notes.value.trim();
+  const result = queue.add(designedProduct(), quantity.value, cleanNotes);
+  saveError.value = result.problem;
+  if (result.problem !== null) return;
+  queue.addEntryToNewestBatch(result.id, quantity.value);
+  resetForm();
+}
+
+// Direct downloads of the designed product, without touching the queue. The
+// warnings a generation can return are shown, never dropped.
+const downloadWarnings = ref<string[]>([]);
+
+async function downloadDesign(format: 'stl' | '3mf'): Promise<void> {
+  saveError.value = null;
+  downloadWarnings.value = [];
+  try {
+    const product = designedProduct();
+    downloadWarnings.value =
+      format === 'stl'
+        ? await downloadProductStl(product)
+        : await downloadProduct3mf(product);
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : 'The download failed.';
+  }
+}
+
 function cancelEdit(): void {
   app.stopEditing();
   resetForm();
@@ -292,10 +323,24 @@ const { meshes, errorMessage } = useBinPreview(() => previewSpec.value, generate
         {{ saveError }}
       </v-alert>
 
+      <v-alert
+        v-if="downloadWarnings.length > 0"
+        type="warning"
+        variant="tonal"
+        density="compact"
+        class="mt-4"
+      >
+        <p v-for="warning in downloadWarnings" :key="warning" class="mb-1">{{ warning }}</p>
+      </v-alert>
+
       <div class="d-flex ga-2 mt-4">
-        <v-btn color="primary" variant="flat" size="large" class="flex-grow-1" @click="saveEntry">
-          {{ editingEntry !== null ? 'Save changes' : 'Add to queue' }}
-        </v-btn>
+        <AddToQueueSplitButton
+          class="flex-grow-1"
+          :editing="editingEntry !== null"
+          @add="saveEntry"
+          @add-to-plate="addToPlate"
+          @download="downloadDesign"
+        />
         <v-btn
           v-if="editingEntry !== null"
           variant="outlined"
diff --git a/web/src/components/ScrewEntryTab.vue b/web/src/components/ScrewEntryTab.vue
index 02d85b2..f42adb7 100644
--- a/web/src/components/ScrewEntryTab.vue
+++ b/web/src/components/ScrewEntryTab.vue
@@ -33,6 +33,8 @@ import {
 } from '../engine/plan/screwListImport';
 import { applySuggestion, suggestShorthand, type ScrewSuggestion } from '../engine/plan/screwSuggest';
 import { overallHeightMm } from '../heightHint';
+import { downloadProduct3mf, downloadProductStl } from '../binDownloads';
+import AddToQueueSplitButton from './AddToQueueSplitButton.vue';
 import BinViewport from './BinViewport.vue';
 import ProductSelect from './ProductSelect.vue';
 import MoreOptions from './MoreOptions.vue';
@@ -533,10 +535,7 @@ function addToQueue(): void {
     app.stopEditing();
     return;
   }
-  for (const { product, quantity } of pending.value.batches) {
-    saveError.value = queue.add(product, quantity, cleanNotes);
-    if (saveError.value !== null) return;
-  }
+  if (queueBatches(cleanNotes) === null) return;
   const n = pending.value.batches.length;
   addedText.value =
     n === 1
@@ -546,6 +545,62 @@ function addToQueue(): void {
   if (isMultiple.value) shorthand.value = '';
 }
 
+/**
+ * Adds every pending batch to the queue. Returns the new entries as id and
+ * quantity pairs, or null when the queue refused one (saveError then carries
+ * the refusal; earlier batches stay added, matching the plain add's behavior).
+ */
+function queueBatches(cleanNotes: string): { id: string; quantity: number }[] | null {
+  const added: { id: string; quantity: number }[] = [];
+  for (const { product, quantity } of pending.value.batches) {
+    const result = queue.add(product, quantity, cleanNotes);
+    saveError.value = result.problem;
+    if (result.problem !== null) return null;
+    added.push({ id: result.id, quantity });
+  }
+  return added;
+}
+
+/** Queues every pending batch and moves each onto the newest build plate. */
+function addToPlate(): void {
+  if (!formValid.value || editingEntry.value !== null) return;
+  saveError.value = null;
+  const added = queueBatches(store.notes.trim());
+  if (added === null) return;
+  for (const { id, quantity } of added) {
+    queue.addEntryToNewestBatch(id, quantity);
+  }
+  const n = added.length;
+  addedText.value =
+    n === 1
+      ? `Added ${productLabelText(pending.value.batches[0].product)} to the newest build plate.`
+      : `Added ${n} entries to the newest build plate.`;
+  addedSnackbar.value = true;
+  if (isMultiple.value) shorthand.value = '';
+}
+
+// Direct downloads of the pending products, without touching the queue. A
+// multi-screw list downloads one file per entry, sequentially. The warnings a
+// generation can return are shown, never dropped.
+const downloadWarnings = ref<string[]>([]);
+
+async function downloadDesign(format: 'stl' | '3mf'): Promise<void> {
+  if (!formValid.value) return;
+  saveError.value = null;
+  downloadWarnings.value = [];
+  try {
+    for (const { product } of pending.value.batches) {
+      const warnings =
+        format === 'stl'
+          ? await downloadProductStl(product)
+          : await downloadProduct3mf(product);
+      downloadWarnings.value = [...downloadWarnings.value, ...warnings];
+    }
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : 'The download failed.';
+  }
+}
+
 function cancelEdit(): void {
   app.stopEditing();
 }
@@ -710,16 +765,14 @@ const { meshes, errorMessage } = useBinPreview(() => previewProduct.value, gener
       </MoreOptions>
 
       <div class="d-flex ga-2 mt-4">
-        <v-btn
-          color="primary"
-          variant="flat"
-          size="large"
+        <AddToQueueSplitButton
           class="flex-grow-1"
+          :editing="editingEntry !== null"
           :disabled="!formValid"
-          @click="addToQueue"
-        >
-          {{ editingEntry !== null ? 'Save changes' : 'Add to queue' }}
-        </v-btn>
+          @add="addToQueue"
+          @add-to-plate="addToPlate"
+          @download="downloadDesign"
+        />
         <v-btn v-if="editingEntry !== null" variant="outlined" size="large" @click="cancelEdit">
           Cancel edit
         </v-btn>
@@ -730,6 +783,15 @@ const { meshes, errorMessage } = useBinPreview(() => previewProduct.value, gener
       <v-alert v-if="saveError" type="error" density="compact" class="mt-2">
         {{ saveError }}
       </v-alert>
+      <v-alert
+        v-if="downloadWarnings.length > 0"
+        type="warning"
+        variant="tonal"
+        density="compact"
+        class="mt-2"
+      >
+        <p v-for="warning in downloadWarnings" :key="warning" class="mb-1">{{ warning }}</p>
+      </v-alert>
       <v-alert
         v-if="editingEntry !== null"
         type="info"
diff --git a/web/src/components/cutout/CutoutTab.vue b/web/src/components/cutout/CutoutTab.vue
index 5d83a22..efee311 100644
--- a/web/src/components/cutout/CutoutTab.vue
+++ b/web/src/components/cutout/CutoutTab.vue
@@ -47,6 +47,8 @@ import {
 import { describeProduct } from '../../engine/plan/rowDescriptor';
 import { overallHeightMm } from '../../heightHint';
 import type { CutoutGhost, CutoutGhostMoved } from './cutoutGhost';
+import { downloadProduct3mf, downloadProductStl } from '../../binDownloads';
+import AddToQueueSplitButton from '../AddToQueueSplitButton.vue';
 import CutoutViewport from './CutoutViewport.vue';
 import PaintToolbar from '../carve/PaintToolbar.vue';
 import ModelList from './ModelList.vue';
@@ -932,12 +934,43 @@ function saveEntry(): void {
     if (saveError.value !== null) return;
     app.stopEditing();
   } else {
-    saveError.value = queue.add(product, quantity.value, cleanNotes);
-    if (saveError.value !== null) return;
+    const result = queue.add(product, quantity.value, cleanNotes);
+    saveError.value = result.problem;
+    if (result.problem !== null) return;
   }
   resetTab();
 }
 
+/** Queues the bin and moves it onto the newest build plate in one step. */
+function addToPlate(): void {
+  if (submitBlocker.value !== null) return;
+  const cleanNotes = notes.value.trim();
+  const result = queue.add(designedProduct(), quantity.value, cleanNotes);
+  saveError.value = result.problem;
+  if (result.problem !== null) return;
+  queue.addEntryToNewestBatch(result.id, quantity.value);
+  resetTab();
+}
+
+// Direct downloads of the designed bin, without touching the queue. The
+// placement warnings a carve can return are shown, never dropped.
+const downloadWarnings = ref<string[]>([]);
+
+async function downloadDesign(format: 'stl' | '3mf'): Promise<void> {
+  if (submitBlocker.value !== null) return;
+  saveError.value = null;
+  downloadWarnings.value = [];
+  try {
+    const product = designedProduct();
+    downloadWarnings.value =
+      format === 'stl'
+        ? await downloadProductStl(product)
+        : await downloadProduct3mf(product);
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : 'The download failed.';
+  }
+}
+
 function cancelEdit(): void {
   app.stopEditing();
   resetTab();
@@ -1116,16 +1149,14 @@ function editingTitle(entry: QueueEntry): string {
         {{ editError }}
       </v-alert>
       <div class="d-flex ga-2 mt-4">
-        <v-btn
-          color="primary"
-          variant="flat"
-          size="large"
+        <AddToQueueSplitButton
           class="flex-grow-1"
+          :editing="editingEntry !== null"
           :disabled="submitBlocker !== null"
-          @click="saveEntry"
-        >
-          {{ editingEntry !== null ? 'Save changes' : 'Add to queue' }}
-        </v-btn>
+          @add="saveEntry"
+          @add-to-plate="addToPlate"
+          @download="downloadDesign"
+        />
         <v-btn v-if="editingEntry !== null" variant="outlined" size="large" @click="cancelEdit">
           Cancel edit
         </v-btn>
@@ -1136,6 +1167,15 @@ function editingTitle(entry: QueueEntry): string {
       <v-alert v-if="saveError" type="error" density="compact" class="mt-2">
         {{ saveError }}
       </v-alert>
+      <v-alert
+        v-if="downloadWarnings.length > 0"
+        type="warning"
+        variant="tonal"
+        density="compact"
+        class="mt-2"
+      >
+        <p v-for="warning in downloadWarnings" :key="warning" class="mb-1">{{ warning }}</p>
+      </v-alert>
       <v-alert
         v-if="editingEntry !== null"
         type="info"
diff --git a/web/src/components/trace/LayoutWorkspace.vue b/web/src/components/trace/LayoutWorkspace.vue
index 0ed5a78..155fac3 100644
--- a/web/src/components/trace/LayoutWorkspace.vue
+++ b/web/src/components/trace/LayoutWorkspace.vue
@@ -29,6 +29,8 @@ import type { TraceSession } from '../../engine/trace/types';
 import { putPhoto } from '../../photoStore';
 import { primitiveOutline } from '../../engine/trace/edit';
 import { referencedSessionIds } from '../../engine/trace/layoutModel';
+import { downloadProduct3mf, downloadProductStl } from '../../binDownloads';
+import AddToQueueSplitButton from '../AddToQueueSplitButton.vue';
 import BinViewport from '../BinViewport.vue';
 import CarveProgressBar from '../CarveProgressBar.vue';
 import PaintToolbar from '../carve/PaintToolbar.vue';
@@ -327,21 +329,14 @@ async function storeReferencedSessions(): Promise<TraceSession[]> {
   return saved;
 }
 
-async function addToQueue(): Promise<void> {
-  addError.value = null;
-  photoNote.value = null;
-  // The button is disabled while a blocker stands; this guard backs it up.
-  if (submitBlocker.value !== null) {
-    addError.value = submitBlocker.value;
-    return;
-  }
+/**
+ * The product the layout currently designs, built around the given stored
+ * trace sessions: the queueing paths pass the sessions they just stored, and
+ * a direct download passes none, since nothing references a photo then.
+ */
+function designedProduct(traceSessions: TraceSession[]): Product {
   const params = pocketParams.value;
   const pockets: BinPockets = { tools: params.tools, placements: params.placements };
-  const cleanNotes = notes.value.trim();
-  // Sessions must be stored before the queue mutation: persisting the plan
-  // sweeps stored photos no entry references, so the reference and the photo
-  // have to land in that order.
-  const traceSessions = await storeReferencedSessions();
   const bin: TracedBin = {
     origin: 'traced',
     gridX: params.gridX,
@@ -355,14 +350,28 @@ async function addToQueue(): Promise<void> {
     edits: trace.edits.map(cloneEdit),
     traceSessions,
   };
-  let product: Product;
   if (params.fusedLabel != null) {
-    product = { kind: 'binWithInsert', bin, insert: params.fusedLabel, fused: true };
-  } else if (params.insert !== null) {
-    product = { kind: 'binWithInsert', bin, insert: params.insert };
-  } else {
-    product = { kind: 'bin', bin, labelSlot: params.labelSlot };
+    return { kind: 'binWithInsert', bin, insert: params.fusedLabel, fused: true };
+  }
+  if (params.insert !== null) {
+    return { kind: 'binWithInsert', bin, insert: params.insert };
   }
+  return { kind: 'bin', bin, labelSlot: params.labelSlot };
+}
+
+async function addToQueue(): Promise<void> {
+  addError.value = null;
+  photoNote.value = null;
+  // The button is disabled while a blocker stands; this guard backs it up.
+  if (submitBlocker.value !== null) {
+    addError.value = submitBlocker.value;
+    return;
+  }
+  const cleanNotes = notes.value.trim();
+  // Sessions must be stored before the queue mutation: persisting the plan
+  // sweeps stored photos no entry references, so the reference and the photo
+  // have to land in that order.
+  const product = designedProduct(await storeReferencedSessions());
   if (props.editingEntry !== null) {
     addError.value = queue.update(props.editingEntry.id, {
       product,
@@ -372,14 +381,56 @@ async function addToQueue(): Promise<void> {
     if (addError.value !== null) return;
     app.stopEditing();
   } else {
-    addError.value = queue.add(product, quantity.value, cleanNotes);
-    if (addError.value !== null) return;
+    const result = queue.add(product, quantity.value, cleanNotes);
+    addError.value = result.problem;
+    if (result.problem !== null) return;
   }
   trace.reset();
   quantity.value = 1;
   emit('saved');
 }
 
+/** Queues the bin and moves it onto the newest build plate in one step. */
+async function addToPlate(): Promise<void> {
+  addError.value = null;
+  photoNote.value = null;
+  if (submitBlocker.value !== null) {
+    addError.value = submitBlocker.value;
+    return;
+  }
+  const cleanNotes = notes.value.trim();
+  const product = designedProduct(await storeReferencedSessions());
+  const result = queue.add(product, quantity.value, cleanNotes);
+  addError.value = result.problem;
+  if (result.problem !== null) return;
+  queue.addEntryToNewestBatch(result.id, quantity.value);
+  trace.reset();
+  quantity.value = 1;
+  emit('saved');
+}
+
+// Direct downloads of the designed bin, without touching the queue. The
+// warnings a generation can return are shown, never dropped.
+const downloadWarnings = ref<string[]>([]);
+
+async function downloadDesign(format: 'stl' | '3mf'): Promise<void> {
+  addError.value = null;
+  downloadWarnings.value = [];
+  if (submitBlocker.value !== null) {
+    addError.value = submitBlocker.value;
+    return;
+  }
+  try {
+    const product = designedProduct([]);
+    downloadWarnings.value =
+      format === 'stl'
+        ? await downloadProductStl(product)
+        : await downloadProduct3mf(product);
+  } catch (error) {
+    addError.value = error instanceof Error ? error.message : 'The download failed.';
+  }
+}
+
 /** Display title of the entry being edited. */
 function editingTitle(entry: QueueEntry): string {
   const insert = insertOf(entry.product);
@@ -471,6 +522,15 @@ function cancelEdit(): void {
         <v-alert v-if="photoNote" type="warning" density="compact" class="mb-2 float-alert">
           {{ photoNote }}
         </v-alert>
+        <v-alert
+          v-for="(warning, i) in downloadWarnings"
+          :key="`download-${i}`"
+          type="warning"
+          density="compact"
+          class="mb-2 float-alert"
+        >
+          {{ warning }}
+        </v-alert>
         <v-alert v-if="trace.refinishNotice" type="warning" density="compact" class="mb-2 float-alert">
           {{ trace.refinishNotice }}
         </v-alert>
@@ -481,14 +541,14 @@ function cancelEdit(): void {
           <v-tooltip :disabled="submitBlocker === null" :text="submitBlocker ?? ''" location="top">
             <template #activator="{ props: tooltipProps }">
               <div v-bind="tooltipProps" class="d-flex">
-                <v-btn
-                  color="primary"
-                  variant="flat"
+                <AddToQueueSplitButton
+                  :editing="editingEntry !== null"
                   :disabled="submitBlocker !== null"
-                  @click="addToQueue"
-                >
-                  {{ editingEntry !== null ? 'Save changes' : 'Add to queue' }}
-                </v-btn>
+                  size="default"
+                  @add="addToQueue"
+                  @add-to-plate="addToPlate"
+                  @download="downloadDesign"
+                />
               </div>
             </template>
           </v-tooltip>
diff --git a/web/src/engine/plan/batches.ts b/web/src/engine/plan/batches.ts
index 72ad314..0fb7e7a 100644
--- a/web/src/engine/plan/batches.ts
+++ b/web/src/engine/plan/batches.ts
@@ -120,6 +120,35 @@ export function createBatch(
   };
 }
 
+/**
+ * Appends one queue entry's amount to an existing batch as a new item. The
+ * product is snapshotted like createBatch does, so the batch keeps working
+ * after the entry is edited or deleted; the count is clamped to the entry's
+ * quantity the same way. The queue itself is not touched: the caller removes
+ * the taken amount from the entry, mirroring how createBatch returns updated
+ * entries.
+ */
+export function addEntryToBatch(
+  batch: PrintBatch,
+  entry: QueueEntry,
+  count: number,
+  id: string,
+): PrintBatch {
+  const taken = Math.min(Math.max(1, Math.floor(count)), entry.quantity);
+  return {
+    ...batch,
+    items: [
+      ...batch.items,
+      {
+        id,
+        product: snapshotProduct(entry.product),
+        count: taken,
+        sourceEntryId: entry.id,
+      },
+    ],
+  };
+}
+
 /** Result of confirming an amount of a batch item. */
 export interface ConfirmBatchItemResult {
   /** The updated batch, or null when it emptied out. */
diff --git a/web/src/stores/binQueue.ts b/web/src/stores/binQueue.ts
index 70039ae..54ccbf9 100644
--- a/web/src/stores/binQueue.ts
+++ b/web/src/stores/binQueue.ts
@@ -30,6 +30,7 @@ import {
 } from '../engine/baseplate/drawerFill';
 import { CLIP_TOLERANCE_DEFAULT, type BaseplateBrim } from '../engine/baseplate/constants';
 import {
+  addEntryToBatch,
   confirmBatchItem,
   createBatch,
   failBatchItem,
@@ -47,6 +48,12 @@ import { useCutout } from './cutout';
 
 const STORAGE_KEY = 'storeforge.plan';
 
+/**
+ * Result of an interactive add: the new entry's id on success, or the
+ * user-worded refusal with nothing queued. Exactly one of the two is set.
+ */
+export type AddResult = { id: string; problem: null } | { id: null; problem: string };
+
 /**
  * Checks a product and quantity with the plan file's own validators before an
  * interactive queue mutation. Returns null when valid, otherwise the
@@ -304,12 +311,12 @@ export const useBinQueue = defineStore('binQueue', {
      * add lands here, so this is the single place an invalid product or
      * quantity is refused before it can be persisted; the file importer's
      * validator is reused so the queue and the file format cannot disagree.
-     * Returns null on success or the user-worded problem, in which case the
-     * queue is not touched.
+     * Returns the new entry's id on success or the user-worded problem, in
+     * which case the queue is not touched.
      */
-    add(product: Product, quantity = 1, notes?: string): string | null {
+    add(product: Product, quantity = 1, notes?: string): AddResult {
       const problem = validateQueueMutation(product, quantity);
-      if (problem !== null) return problem;
+      if (problem !== null) return { id: null, problem };
       const entry: QueueEntry = {
         id: crypto.randomUUID(),
         quantity,
@@ -319,7 +326,7 @@ export const useBinQueue = defineStore('binQueue', {
       if (notes !== undefined && notes !== '') entry.notes = notes;
       this.entries.push(entry);
       this.persist();
-      return null;
+      return { id: entry.id, problem: null };
     },
     /**
      * Applies partial changes to an existing entry. The product is replaced
@@ -437,6 +444,38 @@ export const useBinQueue = defineStore('binQueue', {
       this.persist();
       return result.batch.id;
     },
+    /**
+     * Moves an amount of a queue entry onto the newest build plate batch. When
+     * no batch exists yet a new one is created for it, named the same way the
+     * queue page names a new plate. The taken amount leaves the queue exactly
+     * as batch creation does; nothing happens when the entry is missing.
+     */
+    addEntryToNewestBatch(entryId: string, count: number): void {
+      const entry = this.entryById(entryId);
+      if (entry === null) return;
+      const newest = this.batches.reduce<PrintBatch | null>(
+        (latest, batch) =>
+          latest === null || batch.createdAt > latest.createdAt ? batch : latest,
+        null,
+      );
+      if (newest === null) {
+        this.createBatch(
+          [{ entryId, count }],
+          `Build plate ${this.batches.length + 1}`,
+        );
+        return;
+      }
+      const taken = Math.min(Math.max(1, Math.floor(count)), entry.quantity);
+      const updated = addEntryToBatch(newest, entry, taken, crypto.randomUUID());
+      this.batches = this.batches.map((b) => (b.id === newest.id ? updated : b));
+      this.entries =
+        taken === entry.quantity
+          ? this.entries.filter((e) => e.id !== entryId)
+          : this.entries.map((e) =>
+              e.id === entryId ? { ...e, quantity: e.quantity - taken } : e,
+            );
+      this.persist();
+    },
     /** Renames a batch. */
     renameBatch(batchId: string, name: string) {
       const batch = this.batchById(batchId);
diff --git a/web/tests/plan/batches.spec.ts b/web/tests/plan/batches.spec.ts
index 90760b5..9425d50 100644
--- a/web/tests/plan/batches.spec.ts
+++ b/web/tests/plan/batches.spec.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import {
+  addEntryToBatch,
   confirmBatchItem,
   createBatch,
   failBatchItem,
@@ -95,6 +96,46 @@ describe('createBatch', () => {
   });
 });
 
+describe('addEntryToBatch', () => {
+  it('appends the entry as a new item and leaves existing items in place', () => {
+    const batch = makeBatch([entry()], [{ entryId: 'a1', count: 2 }]).batch!;
+    const other = entry({
+      id: 'b2',
+      quantity: 3,
+      product: { kind: 'binWithInsert', bin: manualBin(), insert: { text: 'M5 nuts', text2: '', icon: null } },
+    });
+    const updated = addEntryToBatch(batch, other, 3, 'item9');
+    expect(updated.items.map((i) => i.id)).toEqual(['item1', 'item9']);
+    expect(updated.items[1]).toEqual({
+      id: 'item9',
+      product: snapshotProduct(other.product),
+      count: 3,
+      sourceEntryId: 'b2',
+    });
+  });
+
+  it('does not mutate the given batch', () => {
+    const batch = makeBatch([entry()], [{ entryId: 'a1', count: 2 }]).batch!;
+    addEntryToBatch(batch, entry({ id: 'b2' }), 1, 'item9');
+    expect(batch.items.map((i) => i.id)).toEqual(['item1']);
+  });
+
+  it('clamps the count to the entry quantity and floors to at least 1', () => {
+    const batch = makeBatch([entry()], [{ entryId: 'a1', count: 1 }]).batch!;
+    expect(addEntryToBatch(batch, entry({ id: 'b2', quantity: 4 }), 99, 'x').items[1].count).toBe(4);
+    expect(addEntryToBatch(batch, entry({ id: 'b2', quantity: 4 }), 0, 'x').items[1].count).toBe(1);
+  });
+
+  it('snapshots the product so a later entry edit does not reach the batch', () => {
+    const source = entry();
+    const batch = makeBatch([entry()], [{ entryId: 'a1', count: 1 }]).batch!;
+    const updated = addEntryToBatch(batch, source, 1, 'item9');
+    (source.product as { insert: { text: string } }).insert.text = 'edited later';
+    const item = updated.items[1];
+    expect(item.product.kind === 'binWithInsert' && item.product.insert.text).toBe('M3 bolts');
+  });
+});
+
 describe('confirmBatchItem', () => {
   const batch = (): PrintBatch =>
     makeBatch(

From 7472a46bf2f287a7a64a31199f7352400688fcd7 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.eichberger@gmx.net>
Date: Thu, 30 Jul 2026 17:53:28 +0200
Subject: [PATCH 3/3] Merge the split add button into one seamless pill with an
 inline dropdown chevron.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/AddToQueueSplitButton.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/src/components/AddToQueueSplitButton.vue b/web/src/components/AddToQueueSplitButton.vue
index 5fec91a..867e0e9 100644
--- a/web/src/components/AddToQueueSplitButton.vue
+++ b/web/src/components/AddToQueueSplitButton.vue
@@ -63,14 +63,20 @@ const emit = defineEmits<{
 
 <style scoped>
 .split-main {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  /* !important: the host tab's rounded-lg utility class sets all corners with
+     !important, and the shared edge must stay square. */
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 .split-arrow {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: 1px solid rgba(255, 255, 255, 0.35);
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
   min-width: 44px;
   padding: 0;
+  margin-left: 0;
+}
+.split-root {
+  gap: 0;
 }
 </style>