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 `
` that carries the `max-h-48 overflow-auto` classes) and replace it: ```tsx -{JSON.stringify(tu.input, null, 2)}++ {JSON.stringify(tu.input, null, 2)} +``` with: ```tsx - {renderToolInput(tu.name, tu.input)} + {renderToolInput(tu.name, tu.input)} ``` +The table brings its own scroll container, so the `` 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 `