@base44/app-plugin-commerce 0.1.0

package/skills/commerce/references/storefront-product-page.md

@@ -0,0 +1,83 @@
+# Variant selection on the product page
+
+The one interaction agents reliably get wrong: turning a variable product into controls a customer can buy from. Everything else about the page — what to show, and which fields each call returns — is [`product-render.md`](./product-render.md); request/response shapes are [`docs/api-storefront.md`](../docs/api-storefront.md).
+
+The logic ships: **`src/commerce/utils/variants.js`** (framework-free, no I/O, full JSDoc on every export — read it for signatures). Import it and spend your effort on the markup.
+
+---
+
+## 1. The model, and the rule
+
+`get-product` returns `{ product, variations }`. `product.attributes[]` entries with `variation: true` are the **axes**, in `position` order; each `variations[]` record is one combination. `visible: true` + `variation: false` attributes are descriptive — a spec table, **never** a selector.
+
+**One control per axis. Never one option per variation.** Do not flatten `variations[]` into `Red / S`, `Red / M`, `Blue / S`, … — that is `n × m` noise, it hides the product's structure, and it stops scaling immediately.
+
+```
+Size    ( ○ S  )( ● M   )( ○ L )      ← one control per attribute
+Color   ( ● Red )( ○ Blue )
+                                      → resolved variation: Red / M · $21.99 · 10 in stock
+```
+
+Pick the control by option count: swatches for colours, pills for a few short options, a `Select` for many or long labels. The axis label is `attribute.name`.
+
+## 2. One call gives you the whole view
+
+```jsx
+import { resolveSelection, defaultSelection, selectOption } from "@/commerce/utils";
+
+const [selection, setSelection] = useState(() => defaultSelection(product, variations));
+const view = resolveSelection(product, variations, selection);
+const pick = (axisKey, option) =>
+  setSelection((prev) => selectOption(product, variations, prev, axisKey, option));
+```
+
+Bind the UI to `view` — not to `product.*` — so a selection actually changes the page:
+
+| `view` field | Binds to |
+|---|---|
+| `axes` | the controls: `[{ key, name, attribute_id, options[] }]`, dead options already dropped |
+| `display` | image, price, `regular_price`, `on_sale`, SKU, stock, weight/dimensions, description — variation-first with parent fallback. `display.image` is `{src, name, alt}`, or **`null` when the product has no images** — the one case needing a placeholder in the UI |
+| `availability[axisKey][option]` | per-option state: `"available"` / `"out_of_stock"` / `"unavailable"` — §3 |
+| `priceRange` | `{ min, max, on_sale, count }` while the selection is incomplete — §3 |
+| `complete` / `missingAxes` | the button label: `Select a ${view.missingAxes[0]?.name}` |
+| `purchasable` | gate **Add to cart** on this (resolved *and* buyable) |
+| `addToCart` | `{ product_id, variation_id }` to spread into the cart call, or `null` |
+
+`view.variation` and `view.candidates` are there when you need the record itself or the variations still reachable. For a `simple` product `resolveSelection` returns no axes, `complete: true` and a ready `addToCart` — the same code path; it branches on `product.type`, so `variations` can be `[]`.
+
+A **variable product with no usable variations** — `type: "variable"` but nothing in `variations[]`, the state an attribute record alone leaves you in — is deliberately *not* given a parent fallback, because `add-item` would reject it. You get axes whose `options` arrays are empty, `purchasable: false` and `addToCart: null`. Render it as unavailable rather than painting selector groups with no buttons, and guard the "Select a …" label: with no `variation: true` attributes at all, `missingAxes` is empty and `view.missingAxes[0]?.name` is `undefined`.
+
+The other exports cover what the view model doesn't: `selectionForVariation` (variation → selection, to hydrate controls from a cart line or `?variation=` link), `selectionToParams`/`selectionFromParams` (URL round-trip), `priceRange`, and the individual pieces if you build your own view model. Signatures and edge cases are in the JSDoc; two behaviors are easy to miss when hand-rolling: non-publishable variations never leak an option into the UI, and an empty `option` on an axis means **"any"**.
+
+## 3. The three UI decisions the helpers can't make for you
+
+- **Unavailable vs out of stock.** `"unavailable"` (no such combination) → **disable, don't hide**; options that vanish and reappear as the customer clicks are disorienting. `"out_of_stock"` → keep it visible and label it. `onbackorder` counts as available and purchasable — label it ("Ships in 2–3 weeks"), don't disable it.
+- **Incomplete selection.** Show `view.priceRange` (`$21.99 – $23.99`, or `From $21.99`) — never `$0`, and never the parent `price`, which for a variable product is not its price ([`product-render.md` §3](./product-render.md#3-product-types-in-each-view)). Keep **Add to cart** disabled with a hint at what's missing.
+- **Initial state and linkability.** Start from `defaultSelection` (honours the merchant's `default_attributes`, preselects single-option axes). Mirror the selection into the URL with `selectionToParams` and hydrate with `selectionFromParams`, so a chosen variant is shareable and survives a refresh.
+
+Route every click through `selectOption` and dead ends take care of themselves: it keeps the just-picked option and clears only conflicting axes (Red/L → click Blue → `{ Color: Blue }`, size re-open) instead of leaving the customer on a combination that resolves to nothing.
+
+## 4. Add to cart
+
+```js
+await base44.functions.invoke("commerce/storefront-cart", {
+  action: "add-item",
+  cart_token,
+  ...view.addToCart,   // { product_id, variation_id } — variation_id is REQUIRED for type "variable"
+  quantity,
+});
+```
+
+Handle `400 variation_required` (empty `variation_id` on a variable product — the page has a bug), the stock codes (`out_of_stock`, `insufficient_stock`, …), and `404 variation_not_found` (catalog changed underneath the page: refetch `get-product`). `product.sold_individually` caps the quantity control at 1.
+
+## 5. Checklist
+
+- [ ] One control per axis in `view.axes` — no combination list anywhere in the UI.
+- [ ] Non-variation visible attributes render as specs, not selectors.
+- [ ] Image, price, SKU and availability all come from `view.display`, with a placeholder for `display.image === null`.
+- [ ] Incomplete selection shows `view.priceRange` — never `$0`, never the parent `price`.
+- [ ] `"unavailable"` disabled, `"out_of_stock"` labelled; every click routed through `selectOption`.
+- [ ] Initial state from `defaultSelection`; selection mirrored into the URL.
+- [ ] **Add to cart** gated on `view.purchasable`, sending `view.addToCart`.
+- [ ] A variable product with empty `axes[].options` shows as unavailable — no empty selector groups, no "Select a undefined".
+- [ ] Tags, ratings, upsells and the rest per [`product-render.md`](./product-render.md).

package/skills/commerce/references/webhooks.md

@@ -0,0 +1,8 @@
+# Webhooks
+
+`webhooks.ts` `dispatch()` fires on `order.*`, `product.*`, `customer.*`, `coupon.*` (created/updated/deleted, plus order/product `restored`). Each active `commerce.Webhook` matching the topic receives an HTTP POST with headers `X-Commerce-Webhook-Topic/-Resource/-Event/-ID/-Delivery-ID/-Signature`. The signature is **base64 HMAC-SHA256** of the body, keyed by the webhook's `secret` (Web Crypto).
+
+- Every attempt is logged as a `commerce.WebhookDelivery` (request/response bodies truncated to 32 KB). Prune with `commerce/admin-tools` `prune-webhook-deliveries`.
+- `failure_count` increments on non-2xx/timeout and resets on success; a webhook auto-disables after **5** consecutive failures.
+- The `secret` is stored on the (admin-only-RLS) `commerce.Webhook` entity. For higher assurance, move it to Base44 secrets and read it in `dispatch()`.
+- Verify deliveries on the receiver by recomputing the HMAC over the raw body with your secret.

package/src/commerce/admin/README.md

@@ -0,0 +1,107 @@
+# Store Admin (`src/commerce/admin/`)
+
+React admin UI for the Base44 commerce template. Copy this
+folder into a Base44 app built on the default template (Vite + React +
+Tailwind + shadcn/ui + React Router) to get a full store back office.
+
+> Install docs: [`skills/commerce/installation-guidelines.md`](../../../skills/commerce/installation-guidelines.md) · mounting & role setup: [`skills/commerce/post-installation.md`](../../../skills/commerce/post-installation.md) · architecture & operations: the commerce skill, [`skills/commerce/SKILL.md`](../../../skills/commerce/SKILL.md)
+> API references: [`skills/commerce/docs/api-admin.md`](../../../skills/commerce/docs/api-admin.md), [`skills/commerce/docs/api-storefront.md`](../../../skills/commerce/docs/api-storefront.md)
+
+## Mounting
+
+1. Deploy the backend first (`base44/` entities + functions — see the root README).
+2. Copy this folder to `src/commerce/admin/` in your app.
+3. Confirm the deps — `sonner`, `recharts` and `react-markdown` all come with
+   the default template and are all this folder needs. Install any that are
+   missing:
+
+   ```bash
+   npm i sonner recharts
+   ```
+
+4. Mount the app in your router:
+
+   ```jsx
+   import AdminApp from "@/commerce/admin";
+
+   <Route path="/admin/*" element={<AdminApp />} />
+   // mounted elsewhere? → <AdminApp basePath="/backoffice" />
+   ```
+
+5. Make sure your user has the **admin role** (Base44 dashboard → Users, or
+   `base44.users.inviteUser(email, "admin")`). Signed-in users without the
+   admin role get an access-denied screen — do not weaken this check.
+6. Open `/admin`. If the store has never been seeded (no `general` StoreSettings
+   group) the first-run screen appears and seeds store defaults, optionally with
+   sample data when the store has no products yet. If `commerce/seed-store` was
+   already run during installation — including when an agent generated a real
+   catalog — the store counts as ready and this screen never shows; see
+   `skills/commerce/post-installation.md` §2.
+
+## External touchpoints
+
+The folder is self-contained; it only imports from:
+
+- `@/api/base44Client` — the app's SDK client (**named `base44` export**, as in
+  Base44's default app template; if your app uses a default export instead,
+  adjust the single import in `lib/api.js`)
+- `@/components/ui/*` — the host app's shadcn/ui kit
+- `react-router-dom`, `lucide-react`, `sonner`, `recharts`, `react-markdown`
+  (GFM tables in bot replies are rendered by `bot/pipe-tables.js`, so no markdown
+  plugin is needed)
+
+The StoreAdmin bot panel (`bot/`) additionally requires the `commerce/StoreAdmin`
+agent (`base44/agents/commerce/StoreAdmin.jsonc`), which uses the `commerce/*`
+backend functions directly as its tools.
+
+### Required shadcn/ui primitives
+
+alert, alert-dialog, badge, button, calendar, card, checkbox, command, dialog,
+dropdown-menu, input, label, popover, radio-group, scroll-area, select,
+separator, sheet, skeleton, switch, table, tabs, textarea, tooltip
+
+The default Base44 template ships all of these. If one is missing:
+
+```bash
+npx shadcn@latest add <component>
+```
+
+## Layout of this folder
+
+```
+index.jsx        AdminApp: providers → auth guard → layout → routes
+routes.jsx       Route table + <AdminRoutes/>
+layout/          AdminLayout, Sidebar, Topbar, AuthGuard (admin-role gate), AccessDenied
+bot/             StoreAdminBot (chat panel over the commerce/StoreAdmin agent), Markdown (GFM renderer)
+context/         SettingsContext (store settings + first-run seeding), BasePathContext
+hooks/           useAsync, usePagedList, useRealtime (live updates), useMoney, useDebounce,
+                 usePaymentProvider (is an online payment provider connected?)
+lib/             api (function calls), constants, format, geo-data, order/product utils
+components/      DataTable, SearchSelect, MoneyInput, DateRangePicker, AddressForm, …
+pages/           All admin pages (orders, products, coupons, customers, reports, settings, webhooks)
+```
+
+## Live-updating views
+
+The dashboard, the orders list and the reports tabs refresh themselves — a new
+order or a status change shows up without the admin reloading the page.
+
+`hooks/useRealtime.js` does this in two layers: the SDK's realtime entity
+subscriptions (`base44.entities["commerce.Order"].subscribe(...)`) as the primary
+push channel, plus a slow polling fallback that **turns itself off for good the
+first time a push event arrives**. The fallback is there because most commerce
+writes happen inside backend functions under the service role; if those don't
+emit socket events, push alone would never fire.
+
+To make another page live, pair it with the quiet refetch on the data hooks so
+the refresh doesn't flash skeletons over content:
+
+```jsx
+const list = usePagedList(fetcher, { deps: [] });
+useRealtime(["commerce.Product"], () => list.refetchQuiet());
+```
+
+Use a slower `fallbackPollMs` (e.g. `{ fallbackPollMs: 60000 }`) for anything
+backed by a scan-heavy report action, and `0` to disable polling entirely.
+Refreshes are debounced, are skipped entirely while the tab is hidden, and run
+once when the tab is focused again.

package/src/commerce/admin/bot/Markdown.jsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import ReactMarkdown from "react-markdown";
+import { splitPipeTables } from "./pipe-tables";
+import { useAdminHref } from "../context/BasePathContext";
+
+/**
+ * Markdown renderer for StoreAdmin bot messages.
+ *
+ * `react-markdown` ships with the default Base44 template, so this component
+ * adds **no dependency of its own**: GFM pipe tables — which the agent is
+ * instructed to use for every list and report, and which CommonMark would show
+ * as literal pipes — are split out by `pipe-tables.js` and rendered here, while
+ * all other markdown goes through react-markdown. Tables scroll horizontally
+ * inside their own container.
+ */
+/**
+ * `admin:` links are the agent's way to send the operator to a page it cannot
+ * act on itself (`[Settings → Tax](admin:settings/tax)`). Resolved through
+ * useAdminHref so they follow the actual mount point, and routed in-app rather
+ * than opening a tab. Everything else stays an external link.
+ */
+const ADMIN_LINK = /^admin:/i;
+
+function MessageLink({ href = "", children, ...props }) {
+  const adminHref = useAdminHref();
+  if (ADMIN_LINK.test(href)) {
+    return (
+      <Link to={adminHref(href.replace(ADMIN_LINK, ""))} className="text-primary underline underline-offset-2">
+        {children}
+      </Link>
+    );
+  }
+  return (
+    <a
+      href={href}
+      className="text-primary underline underline-offset-2"
+      target="_blank"
+      rel="noreferrer"
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+const components = {
+  p: ({ node, ...props }) => <p className="mb-2 leading-relaxed last:mb-0" {...props} />,
+  ul: ({ node, ...props }) => <ul className="mb-2 list-disc space-y-0.5 pl-5 last:mb-0" {...props} />,
+  ol: ({ node, ...props }) => <ol className="mb-2 list-decimal space-y-0.5 pl-5 last:mb-0" {...props} />,
+  h1: ({ node, ...props }) => <h1 className="mb-1.5 mt-2 text-sm font-semibold first:mt-0" {...props} />,
+  h2: ({ node, ...props }) => <h2 className="mb-1.5 mt-2 text-sm font-semibold first:mt-0" {...props} />,
+  h3: ({ node, ...props }) => <h3 className="mb-1 mt-2 text-[13px] font-semibold first:mt-0" {...props} />,
+  h4: ({ node, ...props }) => <h4 className="mb-1 mt-2 text-[13px] font-semibold first:mt-0" {...props} />,
+  a: ({ node, ...props }) => <MessageLink {...props} />,
+  code: ({ node, inline, className, ...props }) =>
+    inline ? (
+      <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]" {...props} />
+    ) : (
+      <code className={`font-mono text-[11px] ${className || ""}`} {...props} />
+    ),
+  pre: ({ node, ...props }) => (
+    <pre className="my-2 overflow-x-auto rounded-md bg-muted p-2.5" {...props} />
+  ),
+  blockquote: ({ node, ...props }) => (
+    <blockquote className="my-2 border-l-2 pl-3 text-muted-foreground" {...props} />
+  ),
+  hr: ({ node, ...props }) => <hr className="my-3" {...props} />,
+};
+
+/** Inline variant for table cells: no block wrapper around the content. */
+const inlineComponents = {
+  ...components,
+  p: ({ node, ...props }) => <span {...props} />,
+};
+
+/** Cells are usually plain text — only parse the ones that carry inline markup. */
+const INLINE_MARKUP = /[*_`[\]<>]/;
+
+function Cell({ text }) {
+  if (!INLINE_MARKUP.test(text)) return text;
+  return <ReactMarkdown components={inlineComponents}>{text}</ReactMarkdown>;
+}
+
+const alignClass = (align) =>
+  align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+
+function PipeTable({ head, align, rows }) {
+  return (
+    <div className="my-2 w-full overflow-x-auto rounded-md border">
+      <table className="w-full border-collapse text-xs">
+        <thead className="bg-muted/60">
+          <tr>
+            {head.map((cell, i) => (
+              <th
+                key={i}
+                className={`whitespace-nowrap border-b px-2.5 py-1.5 font-semibold ${alignClass(align[i])}`}
+              >
+                <Cell text={cell} />
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, r) => (
+            <tr key={r}>
+              {row.map((cell, c) => (
+                <td
+                  key={c}
+                  className={`border-b px-2.5 py-1.5 align-top last:border-b-0 [tr:last-child>&]:border-b-0 ${alignClass(align[c])}`}
+                >
+                  <Cell text={cell} />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default function Markdown({ children }) {
+  const segments = splitPipeTables(children);
+  return (
+    <div className="text-[13px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+      {segments.map((segment, i) =>
+        segment.type === "table" ? (
+          <PipeTable key={i} head={segment.head} align={segment.align} rows={segment.rows} />
+        ) : (
+          <ReactMarkdown key={i} components={components}>
+            {segment.value}
+          </ReactMarkdown>
+        )
+      )}
+    </div>
+  );
+}

package/src/commerce/admin/bot/StoreAdminBot.jsx

@@ -0,0 +1,249 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Loader2, RotateCcw, Send, Sparkles, Wrench, XCircle } from "lucide-react";
+import { toast } from "sonner";
+import { base44 } from "../lib/api";
+import Markdown from "./Markdown";
+
+/** Agent identifier — base44/agents/commerce/StoreAdmin.jsonc, namespaced by its folder. */
+const AGENT_NAME = "commerce/StoreAdmin";
+/** sessionStorage key so the conversation survives panel close / page reload. */
+const CONVERSATION_KEY = "commerce.StoreAdmin.conversation_id";
+
+const SUGGESTIONS = [
+  "Show today's sales summary",
+  "List the 10 most recent orders",
+  "Which products are low on stock?",
+];
+
+/** One chat message bubble (user right, assistant left with markdown + tool chips). */
+function Message({ message }) {
+  const isUser = message.role === "user";
+  const content =
+    typeof message.content === "string"
+      ? message.content
+      : message.content
+        ? JSON.stringify(message.content, null, 2)
+        : "";
+  const toolCalls = (message.tool_calls || []).filter((t) => t.name);
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
+      <div
+        className={`max-w-[92%] rounded-lg px-3 py-2 ${
+          isUser ? "bg-primary text-primary-foreground" : "bg-muted"
+        }`}
+      >
+        {toolCalls.length > 0 && (
+          <div className="mb-1.5 flex flex-wrap gap-1">
+            {toolCalls.map((t) => (
+              <Badge key={t.id} variant="outline" className="gap-1 bg-background/60 px-1.5 py-0 text-[10px] font-normal">
+                {t.status === "running" ? (
+                  <Loader2 className="h-2.5 w-2.5 animate-spin" />
+                ) : t.status === "error" ? (
+                  <XCircle className="h-2.5 w-2.5 text-destructive" />
+                ) : (
+                  <Wrench className="h-2.5 w-2.5" />
+                )}
+                {t.name.replace(/^commerce[-/]/, "")}
+              </Badge>
+            ))}
+          </div>
+        )}
+        {isUser ? (
+          <div className="whitespace-pre-wrap text-[13px]">{content}</div>
+        ) : content ? (
+          <Markdown>{content}</Markdown>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StoreAdmin bot — chat side panel over the `commerce/StoreAdmin` agent
+ * (base44/agents/commerce/StoreAdmin.jsonc).
+ *
+ * Launched from the admin sidebar. Creates the conversation lazily on the
+ * first message, then live-updates through the agents WebSocket subscription.
+ * Assistant responses render as GitHub-flavored markdown (incl. tables).
+ */
+export default function StoreAdminBot({ open, onOpenChange }) {
+  const [conversationId, setConversationId] = useState(
+    () => sessionStorage.getItem(CONVERSATION_KEY) || null
+  );
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const scrollRef = useRef(null);
+  const conversationRef = useRef(null);
+
+  const visibleMessages = useMemo(
+    () => messages.filter((m) => !m.hidden && m.role !== "system"),
+    [messages]
+  );
+
+  // Agent is busy while the last visible message is the user's, or a tool call is running.
+  const busy = useMemo(() => {
+    const last = visibleMessages[visibleMessages.length - 1];
+    if (!last) return false;
+    if (last.role === "user") return true;
+    return (last.tool_calls || []).some((t) => t.status === "running");
+  }, [visibleMessages]);
+
+  // Load + subscribe whenever the panel is open and a conversation exists.
+  useEffect(() => {
+    if (!open || !conversationId) return undefined;
+    let cancelled = false;
+    base44.agents
+      .getConversation(conversationId)
+      .then((conv) => {
+        if (cancelled || !conv) return;
+        conversationRef.current = conv;
+        setMessages(conv.messages || []);
+      })
+      .catch(() => {
+        // Stale id (e.g. conversation deleted) — start fresh.
+        sessionStorage.removeItem(CONVERSATION_KEY);
+        setConversationId(null);
+        setMessages([]);
+      });
+    const unsubscribe = base44.agents.subscribeToConversation(conversationId, (conv) => {
+      if (cancelled) return;
+      conversationRef.current = conv;
+      setMessages(conv.messages || []);
+    });
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
+  }, [open, conversationId]);
+
+  // Keep the newest message in view.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [visibleMessages, busy, open]);
+
+  const send = useCallback(
+    async (text) => {
+      const trimmed = (text ?? input).trim();
+      if (!trimmed || sending) return;
+      setSending(true);
+      try {
+        let conv = conversationRef.current;
+        if (!conv || conv.id !== conversationId || !conversationId) {
+          conv = await base44.agents.createConversation({
+            agent_name: AGENT_NAME,
+            metadata: { source: "commerce-admin" },
+          });
+          conversationRef.current = conv;
+          sessionStorage.setItem(CONVERSATION_KEY, conv.id);
+          setConversationId(conv.id);
+        }
+        setInput("");
+        // Optimistic echo; the subscription replaces it with the stored message.
+        setMessages((prev) => [
+          ...prev,
+          { id: `local-${Date.now()}`, role: "user", content: trimmed },
+        ]);
+        await base44.agents.addMessage(conv, { role: "user", content: trimmed });
+      } catch (err) {
+        toast.error(err?.response?.data?.message || err.message || "Failed to reach StoreAdmin");
+      } finally {
+        setSending(false);
+      }
+    },
+    [input, sending, conversationId]
+  );
+
+  const reset = useCallback(() => {
+    sessionStorage.removeItem(CONVERSATION_KEY);
+    conversationRef.current = null;
+    setConversationId(null);
+    setMessages([]);
+  }, []);
+
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-md">
+        <SheetHeader className="border-b px-4 py-3">
+          <div className="flex items-center justify-between">
+            <SheetTitle className="flex items-center gap-2 text-base">
+              <Sparkles className="h-4 w-4 text-primary" />
+              StoreAdmin
+            </SheetTitle>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="mr-6 h-7 gap-1.5 px-2 text-xs text-muted-foreground"
+              onClick={reset}
+              disabled={!conversationId && messages.length === 0}
+            >
+              <RotateCcw className="h-3 w-3" />
+              New chat
+            </Button>
+          </div>
+        </SheetHeader>
+
+        <div ref={scrollRef} className="flex-1 space-y-3 overflow-y-auto px-4 py-3">
+          {visibleMessages.length === 0 && (
+            <div className="mt-6 space-y-3 text-center">
+              <p className="text-sm text-muted-foreground">
+                Ask me anything about your store — I can look things up and make changes for you.
+              </p>
+              <div className="flex flex-col items-stretch gap-1.5">
+                {SUGGESTIONS.map((s) => (
+                  <Button
+                    key={s}
+                    variant="outline"
+                    size="sm"
+                    className="justify-start text-xs font-normal text-muted-foreground"
+                    onClick={() => send(s)}
+                  >
+                    {s}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+          {visibleMessages.map((m) => (
+            <Message key={m.id} message={m} />
+          ))}
+          {busy && (
+            <div className="flex items-center gap-2 px-1 text-xs text-muted-foreground">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              Working…
+            </div>
+          )}
+        </div>
+
+        <div className="border-t p-3">
+          <div className="flex items-end gap-2">
+            <Textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={onKeyDown}
+              placeholder="e.g. Show pending orders as a table"
+              rows={1}
+              className="max-h-32 min-h-9 resize-none text-[13px]"
+            />
+            <Button size="icon" className="h-9 w-9 shrink-0" onClick={() => send()} disabled={sending || !input.trim()}>
+              {sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}