From a8958abc7059e0a8e54c7eb9c0a9bec6a620fb00 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Thu, 5 Nov 2026 07:16:03 +0200
Subject: [PATCH] docs(plan): correct three edit instructions against the real
 source

The approval card renders the JSON inside a <pre> with max-h-48 classes,
the composer already imports Textarea, and the POS tile is built in a
template string rather than a class-join expression. Each instruction
now names the code that is actually there.
---
 ...026-11-05-giellie-stock-quantity-update.md | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/docs/superpowers/plans/2026-11-05-giellie-stock-quantity-update.md b/docs/superpowers/plans/2026-11-05-giellie-stock-quantity-update.md
index b3cd733..09b7293 100644
--- a/docs/superpowers/plans/2026-11-05-giellie-stock-quantity-update.md
+++ b/docs/superpowers/plans/2026-11-05-giellie-stock-quantity-update.md
@@ -1641,18 +1641,22 @@ export function renderToolInput(toolName: string, input: unknown): ReactNode {
 }
 ```
 
-Find the line in the component that renders the JSON and replace it:
+Find the block in the component that renders the JSON (it sits in a `<pre>` that carries the `max-h-48 overflow-auto` classes) and replace it:
 
 ```tsx
-                  <pre className="text-xs">{JSON.stringify(tu.input, null, 2)}</pre>
+            <pre className="mt-1 max-h-48 overflow-auto whitespace-pre-wrap break-words text-xs text-muted-foreground">
+              {JSON.stringify(tu.input, null, 2)}
+            </pre>
 ```
 
 with:
 
 ```tsx
-                  {renderToolInput(tu.name, tu.input)}
+            {renderToolInput(tu.name, tu.input)}
 ```
 
+The table brings its own scroll container, so the `<pre>` wrapper goes with it.
+
 Make sure `ReactNode` is imported. If the file does not already import it from react, add:
 
 ```tsx
@@ -1798,12 +1802,20 @@ Add the button next to the existing icon buttons, and the panel next to the text
           )}
 ```
 
-Add `Package` to the lucide-react import. If `Textarea` is not already imported from the ui components, add it:
+The icon import at the top of the file is currently:
 
 ```tsx
-import { Textarea } from "@/components/ui/textarea";
+import { Camera, Paperclip, Send, X } from "lucide-react";
 ```
 
+Change it to:
+
+```tsx
+import { Camera, Package, Paperclip, Send, X } from "lucide-react";
+```
+
+`Textarea` is already imported from `@/components/ui/textarea` — do not add a second import.
+
 - [ ] **Step 4: Run the test to verify it passes**
 
 Run: `npx vitest run src/components/giellie/composer.test.tsx`
@@ -1906,31 +1918,33 @@ In `src/lib/server/pos-service.ts`, in `listActiveStockCatalog`, add `min_qty` t
 
 - [ ] **Step 4: Draw the quantity on the tile**
 
-In `public/pos/pos-app.js`, find the tile rendering (around line 283) where the `.sub` line is built:
+In `public/pos/pos-app.js`, the tile is built in a template string inside `render()` (around line 275). Add the two locals just above the `return` that opens the tile template:
 
 ```js
-      const sub = [p.sku, p.brand, p.unit, qty ? qty + ' in cart' : ''].filter(Boolean).join(' · ');
+    const stockQty = Number(p.current_qty ?? 0);
+    const oos = stockQty <= 0;
+```
+
+Then change the button's opening tag so the tile carries the `oos` class:
+
+```js
+    return `<button class="prod${oos ? ' oos' : ''}" data-id="${p.id}" data-od-id="prod-${p.id}">
+```
+
+And change the `.sub` line to carry the quantity. The line is currently:
+
+```js
+        <div class="sub">${escapeHTML(p.sku||'')}${p.brand?' · '+escapeHTML(p.brand):''}${p.unit?' · '+escapeHTML(p.unit):''}${inCart?' · '+inCart+' in cart':''}</div>
 ```
 
 Replace it with:
 
 ```js
-      const stockQty = Number(p.current_qty ?? 0);
-      const inStock = stockQty + ' in stock';
-      const sub = [p.sku, p.brand, p.unit, inStock, qty ? qty + ' in cart' : ''].filter(Boolean).join(' · ');
-      const oos = stockQty <= 0;
+        <div class="sub">${escapeHTML(p.sku||'')}${p.brand?' · '+escapeHTML(p.brand):''}${p.unit?' · '+escapeHTML(p.unit):''} · ${stockQty} in stock${inCart?' · '+inCart+' in cart':''}</div>
 ```
 
 The wording is deliberately literal — a negative quantity reads `-2581 in stock`, because the operator chose to see the real number rather than a clamped zero. The sign is the signal; the tile styling only reinforces it.
 
-Now find where the tile element is created and add the `oos` class to its class list, so the styling applies:
-
-```js
-        const cls = 'prod' + (oos ? ' oos' : '');
-```
-
-Use whatever the existing class-building expression is — this is the change: append ` oos` when `oos` is true.
-
 In `public/pos/pos.html`, add the styling after the `.prod .price small` rule (line 98). `--danger` already exists in `:root` (`#c92a2a`):
 
 ```css