partforge 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Turn a declarative part definition into a parametric-CAD web app (three.js + Manifold/Replicad). Requires a Vite-based consumer.",
   "type": "module",
   "license": "MIT",

package/src/framework/app.css

@@ -198,13 +198,4 @@ button.action:disabled { opacity: .5; cursor: default; }
 @keyframes pf-pick-in {
   from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
   to   { opacity: 1; transform: translateX(-50%) translateY(0); }
-}
-/* dev aid (request-a-pick mode): preview the prompt banner without an agent */
-#pf-pick-test {
-  position: fixed; left: 12px; bottom: 12px; z-index: 30; appearance: none;
-  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
-  background: var(--surface); color: var(--muted-2); cursor: pointer;
-  font: 12px/1 -apple-system, system-ui, sans-serif;
-  box-shadow: 0 6px 24px rgba(0,0,0,.35);
-}
-#pf-pick-test:hover { color: var(--text); border-color: var(--accent); }
+}

package/src/framework/pick-request/client.js

@@ -1,100 +1,65 @@
-// Browser side of request-a-pick: subscribe to the pick-server, show a prompt banner,
-// arm the existing picker on demand, and POST each click back. Self-created DOM; the
-// look (position, theme colours, slide-in animation) lives in app.css (#pf-pick-banner),
-// so it follows the app's light/dark theme. Visibility is toggled via display.
-import { attachPicker } from "../selection/pick.js";
+// Browser side of request-a-pick: drives the shared prompt banner from two sources —
+// an agent asking for clicks over SSE, and a click-to-copy button in the viewbar.
+// Created only under ?pickserver (see mount.js), so both are present exactly when the
+// user is working with an agent.
+import { createPromptBanner } from "./prompt-banner.js";
+import { formatSelection } from "../selection/format.js";
 
 export function createPickRequestClient({ serverUrl = "http://127.0.0.1:4518", viewer, part, getContext }) {
-  let active = null; // { id, index } of the prompt we're waiting on
-
-  // --- prompt banner: chat-style (avatar + message) ---------------------------
-  const banner = document.createElement("div");
-  banner.id = "pf-pick-banner";
-  banner.style.display = "none";
-
-  const row = document.createElement("div");
-  row.className = "pf-pick-row";
-  const avatar = document.createElement("div");
-  avatar.className = "pf-pick-avatar";
-  avatar.textContent = "🤖";
-  const msg = document.createElement("div");
-  msg.className = "pf-pick-msg";
-  const label = document.createElement("div");
-  label.className = "pf-pick-label";
-  const prompt = document.createElement("div");
-  prompt.className = "pf-pick-prompt";
-  msg.append(label, prompt);
-  row.append(avatar, msg);
-
-  const close = document.createElement("button");
-  close.id = "pf-pick-close";
-  close.type = "button";
-  close.textContent = "×";
-  close.setAttribute("aria-label", "Dismiss");
-
-  banner.append(row, close);
-  document.body.appendChild(banner);
-
-  const show = () => { banner.style.display = "block"; };
-  const hide = () => { banner.style.display = "none"; };
-  const showError = (text) => { label.textContent = ""; prompt.textContent = text; show(); };
-
-  // Render a prompt as a chat message. The prompt text comes from the agent, so it goes
-  // through textContent (never innerHTML) to stay injection-safe.
-  const showPrompt = (v) => {
-    label.textContent = v.total > 1 ? `Your agent asks: (${v.index + 1} of ${v.total})` : "Your agent asks:";
-    prompt.textContent = v.prompt;
-    show();
-  };
+  let active = null; // { id, index } of the agent prompt we're waiting on
+  const banner = createPromptBanner({ viewer, part, getContext });
 
   const postJson = (path, body) =>
     fetch(`${serverUrl}${path}`, {
       method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body),
-    }).catch(() => showError("⚠ couldn't reach pick-server — click not sent"));
-
-  const picker = attachPicker(viewer, {
-    part, getContext,
-    onPick: (selection) => {
-      if (!active) return;
-      postJson("/resolve", { id: active.id, index: active.index, selection });
-    },
-  });
-
-  // The × dismisses the request (cancels the active batch on the server) and hides the
-  // banner immediately for responsiveness.
-  close.addEventListener("click", () => {
-    if (active) postJson("/cancel", { id: active.id });
-    hide();
-  });
-
-  // --- dev test button: preview the banner locally, no agent round-trip -------
-  const test = document.createElement("button");
-  test.id = "pf-pick-test";
-  test.type = "button";
-  test.textContent = "🤖 test prompt";
-  test.title = "Preview the agent prompt banner (local, no agent)";
-  test.addEventListener("click", () => {
-    if (banner.style.display !== "none") { hide(); return; } // toggle off (and re-arm the animation)
-    showPrompt({ index: 0, total: 1, prompt: "Click a face — this is a test prompt" });
-  });
-  document.body.appendChild(test);
+    }).catch(() => banner.message("⚠ couldn't reach pick-server — click not sent"));
 
+  // --- agent prompts over SSE -------------------------------------------------
   const es = new globalThis.EventSource(`${serverUrl}/events`);
   es.addEventListener("prompt", (e) => {
     const v = JSON.parse(e.data);
     active = { id: v.id, index: v.index };
-    showPrompt(v);
-    picker.setActive(true);
-  });
-  es.addEventListener("cleared", () => {
-    active = null;
-    hide();
-    picker.setActive(false);
+    banner.request({
+      avatar: "🤖",
+      label: v.total > 1 ? `Your agent asks: (${v.index + 1} of ${v.total})` : "Your agent asks:",
+      text: v.prompt,
+      onResolve: (selection) => postJson("/resolve", { id: active.id, index: active.index, selection }),
+      onDismiss: () => { if (active) postJson("/cancel", { id: active.id }); },
+    });
   });
-  es.onerror = () => { showError("⚠ agent pick-server not reachable"); };
-  es.onopen = () => { if (!active) hide(); };
+  es.addEventListener("cleared", () => { active = null; banner.dismiss(); });
+  es.onerror = () => { banner.message("⚠ agent pick-server not reachable"); };
+  es.onopen = () => { if (!active) banner.dismiss(); };
+
+  // --- click-to-copy button, prepended into the viewbar (left of the play btn) -
+  // Copies the SAME description an agent receives for a click, so the two paths match.
+  const viewbar = document.getElementById("viewbar");
+  let copyBtn = null;
+  if (viewbar) {
+    copyBtn = document.createElement("button");
+    copyBtn.id = "copy";
+    copyBtn.type = "button";
+    // Flat single-colour copy glyph (inherits the viewbar button's currentColor).
+    copyBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5V4A1.5 1.5 0 0 0 9 2.5H4A1.5 1.5 0 0 0 2.5 4V9A1.5 1.5 0 0 0 4 10.5H5.5"/></svg>';
+    copyBtn.title = "Click a detail to copy its agent description";
+    copyBtn.setAttribute("aria-label", "Copy a detail's agent description");
+    copyBtn.addEventListener("click", () => {
+      if (banner.isOpen()) { banner.dismiss(); return; } // toggle off
+      banner.request({
+        avatar: "📋",
+        label: "Copy to clipboard",
+        text: "Click on a detail to copy its agent description to the clipboard.",
+        onResolve: (selection) => {
+          navigator.clipboard?.writeText(formatSelection(selection, { style: "prompt" }));
+          banner.message("✓ Copied to clipboard");
+          setTimeout(() => banner.dismiss(), 1000);
+        },
+      });
+    });
+    viewbar.prepend(copyBtn);
+  }
 
   return {
-    detach: () => { es.close(); picker.detach(); banner.remove(); test.remove(); },
+    detach: () => { es.close(); banner.detach(); copyBtn?.remove(); },
   };
 }

package/src/framework/pick-request/prompt-banner.js

@@ -0,0 +1,88 @@
+// A small chat-style prompt banner that arms the selection picker for one click.
+// Shared by request-a-pick's two drivers (an agent asking via SSE, and the
+// click-to-copy button) so they look and behave identically. The look (position,
+// theme colours, slide-in animation) lives in app.css (#pf-pick-banner).
+import { attachPicker } from "../selection/pick.js";
+
+export function createPromptBanner({ viewer, part, getContext }) {
+  let onResolve = null; // called with the Selection on the next pick
+  let onDismiss = null; // called when the user closes the banner via ×
+
+  const banner = document.createElement("div");
+  banner.id = "pf-pick-banner";
+  banner.style.display = "none";
+
+  const row = document.createElement("div");
+  row.className = "pf-pick-row";
+  const avatar = document.createElement("div");
+  avatar.className = "pf-pick-avatar";
+  const msg = document.createElement("div");
+  msg.className = "pf-pick-msg";
+  const label = document.createElement("div");
+  label.className = "pf-pick-label";
+  const prompt = document.createElement("div");
+  prompt.className = "pf-pick-prompt";
+  msg.append(label, prompt);
+  row.append(avatar, msg);
+
+  const close = document.createElement("button");
+  close.id = "pf-pick-close";
+  close.type = "button";
+  close.textContent = "×";
+  close.setAttribute("aria-label", "Dismiss");
+
+  banner.append(row, close);
+  document.body.appendChild(banner);
+
+  const isOpen = () => banner.style.display !== "none";
+
+  function dismiss() {
+    onResolve = null;
+    onDismiss = null;
+    picker.setActive(false);
+    banner.style.display = "none";
+  }
+
+  const picker = attachPicker(viewer, {
+    part, getContext,
+    onPick: (selection) => {
+      const resolve = onResolve;
+      onResolve = null;            // a pick resolves once; a stray click after is a no-op
+      picker.setActive(false);     // consumer re-arms via request() if more clicks are wanted
+      resolve?.(selection);
+    },
+  });
+
+  close.addEventListener("click", () => {
+    const dismissed = onDismiss;
+    dismiss();
+    dismissed?.();
+  });
+
+  // Show a prompt and arm the picker for one click. Prompt/label text is rendered via
+  // textContent (never innerHTML) — it can carry agent-supplied strings.
+  function request({ avatar: glyph, label: text, text: body, onResolve: resolve = null, onDismiss: dismissed = null }) {
+    onResolve = resolve;
+    onDismiss = dismissed;
+    avatar.textContent = glyph;
+    label.textContent = text || "";
+    prompt.textContent = body;
+    banner.style.display = "block";
+    picker.setActive(true);
+  }
+
+  // Show a transient note (error or confirmation) with no pending pick. Keeps the
+  // current avatar so a "✓ Copied" / "⚠ …" note stays in context.
+  function message(body) {
+    onResolve = null;
+    picker.setActive(false);
+    label.textContent = "";
+    prompt.textContent = body;
+    banner.style.display = "block";
+  }
+
+  return {
+    request, message, dismiss, isOpen,
+    detach: () => { picker.detach(); banner.remove(); },
+  };
+}

package/src/framework/viewer.js

@@ -36,8 +36,10 @@ export function createViewer(container, part) {
   const key = new THREE.DirectionalLight(0xffffff, 1.4);
   key.position.set(8, 14, 10);
   scene.add(key);
-  // 1 cm grid (mm units): 200 mm wide, 20 divisions -> 10 mm squares.
-  let grid = new THREE.GridHelper(200, 20, THEME.dark.grid[0], THEME.dark.grid[1]);
+  // 1 cm grid (mm units): 300 mm wide, 30 divisions -> 10 mm (1 cm) squares.
+  const GRID_SIZE = 300, GRID_DIVS = 30;
+  let floorY = 0; // world Y of the grid plane; set to the part's bbox bottom in frameTo
+  let grid = new THREE.GridHelper(GRID_SIZE, GRID_DIVS, THEME.dark.grid[0], THEME.dark.grid[1]);
   scene.add(grid);
 
   // --- material + part groups -----------------------------------------------
@@ -146,6 +148,10 @@ export function createViewer(container, part) {
     const center = _box.getCenter(new THREE.Vector3());
     partsGroup.position.copy(center).multiplyScalar(-1); // centre assembly on the pivot
     const size = _box.getSize(new THREE.Vector3());
+    // Drop the grid to the bottom of the bounding box (model Z -> world Y), so it reads
+    // as a floor the part sits on rather than a plane through its middle.
+    floorY = -size.z / 2;
+    grid.position.y = floorY;
     const r = Math.max(size.x, size.y, size.z) || 12;
     camera.position.setLength(r * 2.6 + 6);
     controls.target.set(0, 0, 0);
@@ -179,7 +185,8 @@ export function createViewer(container, part) {
     const t = THEME[mode] ?? THEME.dark;
     scene.background = new THREE.Color(t.bg);
     scene.remove(grid);
-    grid = new THREE.GridHelper(200, 20, t.grid[0], t.grid[1]);
+    grid = new THREE.GridHelper(GRID_SIZE, GRID_DIVS, t.grid[0], t.grid[1]);
+    grid.position.y = floorY; // keep the floor at the bbox bottom across theme swaps
     scene.add(grid);
     lineMaterial.color.set(t.line);
   }