diff --git a/src/app/(app)/orders/sprint/page.tsx b/src/app/(app)/orders/sprint/page.tsx
index a58f379..a255fa1 100644
--- a/src/app/(app)/orders/sprint/page.tsx
+++ b/src/app/(app)/orders/sprint/page.tsx
@@ -20,10 +20,13 @@ import getPocketBase from "@/lib/pocketbase";
 import { FilterTabs, type FilterTab } from "@/components/filter-tabs";
 import { DevIdentitySwitcher } from "@/components/dev-identity-switcher";
 import { AiItemHistoryTrigger } from "@/components/ai-item-history-trigger";
+import { withAlpha } from "@/lib/item-status-ui";
 import { cn } from "@/lib/utils";
 import type { Category, Supplier } from "@/lib/types";
 import { OrderSprintProcessModal } from "@/components/order-sprint-process-modal";
 
+const UNKNOWN_SLUG = "cat_unknown";
+
 export default function OrderSprintPage() {
   const [items, setItems] = useState<OrderSprintItem[]>([]);
   const [categories, setCategories] = useState<Category[]>([]);
@@ -31,13 +34,22 @@ export default function OrderSprintPage() {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [activeCategory, setActiveCategory] = useState<string>("__all__");
-  const [categoryCounts, setCategoryCounts] = useState<Record<string, number>>({});
   const [totalUnprocessed, setTotalUnprocessed] = useState(0);
   const SPRINT_PER_PAGE = 50;
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [modalItem, setModalItem] = useState<OrderSprintItem | null>(null);
-  const UNKNOWN_KEY = "__unknown__";
+
+  // Resolve the admin-managed "Unknown / Other" category by its
+  // canonical slug. Items with no category land here so they share a
+  // single tab with the records explicitly assigned to it (previously
+  // these were rendered as two separate "Unknown" and "Unknown / Other"
+  // tabs).
+  const unknownCategory = useMemo(
+    () => categories.find((c) => c.slug === UNKNOWN_SLUG),
+    [categories],
+  );
+  const unknownKey = unknownCategory?.id ?? "__unknown__";
 
   const fetchData = useCallback(async (silent = false) => {
     if (!silent) setLoading(true);
@@ -45,27 +57,27 @@ export default function OrderSprintPage() {
     try {
       const pb = getPocketBase();
 
-      const getCategoryFilter = () => {
-        if (activeCategory === "__all__") return "item_status = 'pending' && purchase_order = ''";
-        if (activeCategory === UNKNOWN_KEY) return "item_status = 'pending' && purchase_order = '' && category = ''";
-        return `item_status = 'pending' && purchase_order = '' && category = "${activeCategory.replace(/"/g, '\\"')}"`;
-      };
+      // Always fetch the full pending-no-PO set; client-side bucketing
+      // (see `buckets` below) drives tab switching. This avoids the
+      // full refetch on every tab click that the previous paginated
+      // version suffered from.
+      const filter = "item_status = 'pending' && purchase_order = ''";
+      const expand = "order,order.customer,category";
 
-      const [itemsRes, catsRes, countsData, suppliersRes] = await Promise.all([
-        pb.collection("order_items").getList(page, SPRINT_PER_PAGE, {
-          filter: getCategoryFilter(),
-          expand: "order,order.customer,category",
+      const [itemsRes, catsRes, suppliersRes] = await Promise.all([
+        pb.collection("order_items").getList(1, SPRINT_PER_PAGE, {
+          filter,
+          expand,
           sort: "created",
           fields: [
-            "id,description,quantity,order,supplier,cost_price,selling_price,markup,category,item_status,purchase_order,sku,notes,ai_item_insights",
+            "id,description,quantity,order,supplier,cost_price,selling_price,markup,category,item_status,purchase_order,sku,notes,po_description,ai_item_insights",
             "expand.order.order_number",
             "expand.order.expand.customer.customer",
             "expand.order.expand.customer.expand.company.company",
             "expand.category.name,expand.category.color",
           ].join(","),
-        }).catch(() => ({ items: [], totalPages: 1 })),
+        }).catch(() => ({ items: [], totalPages: 1, totalItems: 0 })),
         pb.collection("categories").getFullList({ filter: "is_active = true", sort: "display_order", batch: 50 }),
-        fetch("/api/v1/orders/sprint/counts").then(r => r.ok ? r.json() : { counts: {}, total: 0 }).catch(() => ({ counts: {}, total: 0 })),
         pb.collection("suppliers").getFullList({ sort: "suppliername", batch: 200 }),
       ]);
 
@@ -73,34 +85,57 @@ export default function OrderSprintPage() {
       setTotalPages(itemsRes.totalPages);
       setCategories(catsRes as unknown as Category[]);
       setSuppliers(suppliersRes as unknown as Supplier[]);
-      setCategoryCounts(countsData.counts || {});
-      setTotalUnprocessed(countsData.total ?? 0);
+      // The header counter uses the same per-page slice we display
+      // (the API caps at SPRINT_PER_PAGE). For a rough "still work to
+      // do" badge that's good enough — when it grows past the page
+        // cap the operator knows to dig into the tab anyway.
+      setTotalUnprocessed(itemsRes.totalItems);
     } catch (err) {
       toast.error(err instanceof Error ? err.message : "Failed to load order sprint");
     } finally {
       setLoading(false);
       setRefreshing(false);
     }
-  }, [page, activeCategory]);
+  }, []);
 
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect
     void fetchData();
   }, [fetchData]);
 
+  // Bucket items into per-category arrays. Blank-category items land
+  // in the Unknown / Other bucket so the count is honest (matches what
+  // the counts route reports).
+  const buckets = useMemo(() => {
+    const map = new Map<string, OrderSprintItem[]>();
+    map.set("__all__", items);
+    map.set(unknownKey, []);
+    for (const cat of categories) map.set(cat.id, []);
+    for (const item of items) {
+      const catId = item.expand?.category?.id || item.category || "";
+      if (catId && map.has(catId)) {
+        map.get(catId)!.push(item);
+      } else {
+        map.get(unknownKey)!.push(item);
+      }
+    }
+    return map;
+  }, [items, categories, unknownKey]);
+
   const tabs: FilterTab[] = useMemo(() => {
     const out: FilterTab[] = [
       { key: "__all__", label: "All", color: "#0f172a", count: totalUnprocessed },
     ];
     for (const cat of categories) {
-      out.push({ key: cat.id, label: cat.name, color: cat.color, count: categoryCounts[cat.id] ?? 0 });
-    }
-    const unknownCount = categoryCounts[UNKNOWN_KEY] ?? 0;
-    if (unknownCount > 0) {
-      out.push({ key: UNKNOWN_KEY, label: "Unknown", color: "#6b7280", count: unknownCount });
+      out.push({ key: cat.id, label: cat.name, color: cat.color, count: buckets.get(cat.id)?.length ?? 0 });
     }
     return out;
-  }, [categories, categoryCounts, totalUnprocessed]);
+  }, [categories, buckets, totalUnprocessed]);
+
+  const visibleItems = useMemo(() => {
+    if (activeCategory === "__all__") return buckets.get("__all__") ?? [];
+    return buckets.get(activeCategory) ?? [];
+  }, [activeCategory, buckets]);
 
   return (
     <div className="space-y-4">
@@ -130,7 +165,7 @@ export default function OrderSprintPage() {
       <FilterTabs
         tabs={tabs}
         active={activeCategory}
-        onChange={(next) => { setActiveCategory(next); setPage(1); }}
+        onChange={setActiveCategory}
         ariaLabel="Filter order items by category"
       />
 
@@ -139,7 +174,7 @@ export default function OrderSprintPage() {
           <Loader2 className="h-4 w-4 animate-spin" />
           Loading…
         </div>
-      ) : items.length === 0 ? (
+      ) : visibleItems.length === 0 ? (
         <Card><CardContent className="p-8 text-center text-sm text-muted-foreground">
           {totalUnprocessed === 0 ? "No items waiting for PO." : "Nothing in this tab."}
         </CardContent></Card>
@@ -152,20 +187,23 @@ export default function OrderSprintPage() {
                   <thead>
                     <tr className="border-b bg-muted/40 text-xs uppercase tracking-wide text-muted-foreground">
                       <th className="text-left p-2.5 font-medium">Order</th>
-                      <th className="p-2.5 w-10"></th>
+                      <th className="p-2.5 w-10" aria-label="AI item history" />
                       <th className="text-left p-2.5 font-medium">Description</th>
                       <th className="text-right p-2.5 font-medium w-16">Qty</th>
                       <th className="text-left p-2.5 font-medium w-32">Supplier</th>
-                      <th className="text-left p-2.5 font-medium w-24">Category</th>
+                      {activeCategory === "__all__" && (
+                        <th className="text-left p-2.5 font-medium w-24">Category</th>
+                      )}
                       <th className="text-right p-2.5 font-medium w-32">Action</th>
                     </tr>
                   </thead>
                   <tbody>
-                    {items.map((item) => (
+                    {visibleItems.map((item) => (
                       <OrderSprintRow
                         key={item.id}
                         item={item}
                         suppliers={suppliers}
+                        showCategoryColumn={activeCategory === "__all__"}
                         onProcess={() => setModalItem(item)}
                       />
                     ))}
@@ -179,11 +217,12 @@ export default function OrderSprintPage() {
               each row becomes a stacked card so the action button
               stays a comfortable 44px hit-target on touch. */}
           <div className="md:hidden space-y-2.5">
-            {items.map((item) => (
+            {visibleItems.map((item) => (
               <OrderSprintCard
                 key={item.id}
                 item={item}
                 suppliers={suppliers}
+                showCategoryPill={activeCategory === "__all__"}
                 onProcess={() => setModalItem(item)}
               />
             ))}
@@ -191,7 +230,7 @@ export default function OrderSprintPage() {
         </>
       )}
 
-      {!loading && totalPages > 1 && (
+      {!loading && totalPages > 1 && activeCategory === "__all__" && (
         <div className="flex items-center justify-end gap-2">
           <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(p => Math.max(1, p - 1))}>Previous</Button>
           <span className="text-sm text-muted-foreground">Page {page} of {totalPages}</span>
@@ -222,6 +261,8 @@ type OrderSprintItem = {
   sku?: string;
   notes?: string;
   category?: string;
+  po_description?: string;
+  item_status?: string;
   ai_item_insights?: Record<string, unknown> | null;
   expand?: {
     order?: { id: string; order_number: string; expand?: { customer?: { customer: string; expand?: { company?: { company: string } } } } };
@@ -229,7 +270,19 @@ type OrderSprintItem = {
   };
 };
 
-function OrderSprintRow({ item, suppliers, onProcess }: { item: OrderSprintItem; suppliers: Supplier[]; onProcess: () => void }) {
+function OrderSprintRow({
+  item,
+  suppliers,
+  showCategoryColumn,
+  onProcess,
+}: {
+  item: OrderSprintItem;
+  suppliers: Supplier[];
+  // When filtered to a single category the pill is redundant — every
+  // row shows the same one. Hide it instead of cluttering the table.
+  showCategoryColumn: boolean;
+  onProcess: () => void;
+}) {
   const orderNumber = item.expand?.order?.order_number || "—";
   const orderId = item.expand?.order?.id;
   const customer = item.expand?.order?.expand?.customer?.customer;
@@ -238,9 +291,9 @@ function OrderSprintRow({ item, suppliers, onProcess }: { item: OrderSprintItem;
   const categoryColor = item.expand?.category?.color || "#6b7280";
 
   const supplierName = useMemo(() => {
-    if (!item.supplier) return "—";
+    if (!item.supplier) return null;
     const supplier = suppliers.find((s) => s.id === item.supplier);
-    return supplier?.suppliername || "—";
+    return supplier?.suppliername ?? null;
   }, [item.supplier, suppliers]);
 
   return (
@@ -259,7 +312,7 @@ function OrderSprintRow({ item, suppliers, onProcess }: { item: OrderSprintItem;
           )}
         </div>
       </td>
-      <td className="p-2.5 align-top">
+      <td className="p-2.5 align-top" aria-label="AI item history">
         <AiItemHistoryTrigger itemId={item.id} insights={item.ai_item_insights ?? null} />
       </td>
       <td className="p-2.5 align-top">
@@ -269,16 +322,31 @@ function OrderSprintRow({ item, suppliers, onProcess }: { item: OrderSprintItem;
         {item.sku && <div className="text-[11px] text-muted-foreground mt-0.5">SKU: {item.sku}</div>}
       </td>
       <td className="p-2.5 align-top text-right tabular-nums">{item.quantity ?? "—"}</td>
-      <td className="p-2.5 align-top"><Badge variant="outline" className="text-xs">{supplierName}</Badge></td>
       <td className="p-2.5 align-top">
-        {categoryName ? (
-          <span className="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full" style={{ backgroundColor: `${categoryColor}20`, color: categoryColor }}>
-            {categoryName}
-          </span>
+        {supplierName ? (
+          <Badge variant="outline" className="text-xs">{supplierName}</Badge>
         ) : (
-          <span className="text-xs text-muted-foreground">—</span>
+          <span className="text-xs text-muted-foreground italic">no supplier</span>
         )}
       </td>
+      {showCategoryColumn && (
+        <td className="p-2.5 align-top">
+          {categoryName ? (
+            <span
+              className="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full"
+              // withAlpha() applies a real alpha channel so the pill
+              // stays legible in both light and dark mode. The
+              // previous `${color}20` suffix was just hex concatenation
+              // and rendered washed out / unreadable on dark surfaces.
+              style={{ backgroundColor: withAlpha(categoryColor, 12), color: categoryColor }}
+            >
+              {categoryName}
+            </span>
+          ) : (
+            <span className="text-xs text-muted-foreground">—</span>
+          )}
+        </td>
+      )}
       <td className="p-2.5 align-top text-right">
         <Button size="sm" onClick={onProcess}>
           <ShoppingCart className="h-3 w-3 mr-1" />
@@ -302,14 +370,18 @@ function OrderSprintRow({ item, suppliers, onProcess }: { item: OrderSprintItem;
  *     narrow screens.
  *   - Touch users can't hover, so we inline the customer/company
  *     info that the desktop table keeps in a hover tooltip.
+ *   - The category pill is hidden when the page is filtered to a
+ *     single category — every card would show the same pill.
  */
 function OrderSprintCard({
   item,
   suppliers,
+  showCategoryPill,
   onProcess,
 }: {
   item: OrderSprintItem;
   suppliers: Supplier[];
+  showCategoryPill: boolean;
   onProcess: () => void;
 }) {
   const orderNumber = item.expand?.order?.order_number || "—";
@@ -320,15 +392,15 @@ function OrderSprintCard({
   const categoryColor = item.expand?.category?.color || "#6b7280";
 
   const supplierName = useMemo(() => {
-    if (!item.supplier) return "—";
+    if (!item.supplier) return null;
     const supplier = suppliers.find((s) => s.id === item.supplier);
-    return supplier?.suppliername || "—";
+    return supplier?.suppliername ?? null;
   }, [item.supplier, suppliers]);
 
   return (
     <Card>
       <CardContent className="p-3 space-y-2.5">
-        {/* Row 1: order link + qty */}
+        {/* Row 1: order link + qty + (optional) category pill */}
         <div className="flex items-center gap-2 flex-wrap">
           {orderId ? (
             <a
@@ -343,13 +415,10 @@ function OrderSprintCard({
           <span className="text-xs text-muted-foreground tabular-nums">
             · Qty {item.quantity ?? "—"}
           </span>
-          {categoryName && (
+          {showCategoryPill && categoryName && (
             <span
               className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-0.5 rounded-full"
-              style={{
-                backgroundColor: `${categoryColor}20`,
-                color: categoryColor,
-              }}
+              style={{ backgroundColor: withAlpha(categoryColor, 12), color: categoryColor }}
             >
               {categoryName}
             </span>
@@ -383,9 +452,13 @@ function OrderSprintCard({
           {item.sku && (
             <span className="text-muted-foreground">SKU: {item.sku}</span>
           )}
-          <Badge variant="outline" className="text-xs">
-            {supplierName}
-          </Badge>
+          {supplierName ? (
+            <Badge variant="outline" className="text-xs">
+              {supplierName}
+            </Badge>
+          ) : (
+            <span className="text-muted-foreground italic">no supplier</span>
+          )}
         </div>
 
         {/* Action button — full-width touch target */}
diff --git a/src/app/api/v1/orders/sprint/counts/route.test.ts b/src/app/api/v1/orders/sprint/counts/route.test.ts
new file mode 100644
index 0000000..3d24632
--- /dev/null
+++ b/src/app/api/v1/orders/sprint/counts/route.test.ts
@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+vi.mock("@/lib/server/pocketbase-admin", () => ({
+  getAdminPocketBase: vi.fn(),
+}));
+
+import { getAdminPocketBase } from "@/lib/server/pocketbase-admin";
+import { GET } from "./route";
+
+function makeAdmin(opts: {
+  items: Array<{ category: string }>;
+  catUnknownId?: string;
+}) {
+  const orderItems = {
+    getFullList: vi.fn().mockResolvedValue(opts.items),
+  };
+  const categories = {
+    getFullList: vi.fn().mockResolvedValue(
+      opts.catUnknownId ? [{ id: opts.catUnknownId }] : [],
+    ),
+  };
+  const admin = {
+    collection: vi.fn().mockImplementation((name: string) => {
+      if (name === "order_items") return orderItems;
+      if (name === "categories") return categories;
+      throw new Error(`Unexpected collection ${name}`);
+    }),
+  };
+  return { admin, orderItems, categories };
+}
+
+describe("GET /api/v1/orders/sprint/counts", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns per-category counts", async () => {
+    const { admin } = makeAdmin({
+      items: [
+        { category: "cat-a" },
+        { category: "cat-a" },
+        { category: "cat-b" },
+      ],
+    });
+    vi.mocked(getAdminPocketBase).mockResolvedValue(admin as never);
+
+    const res = await GET({} as never);
+    expect(res.status).toBe(200);
+    const body = await res.json();
+    expect(body.total).toBe(3);
+    expect(body.counts).toEqual({ "cat-a": 2, "cat-b": 1 });
+  });
+
+  it("buckets blank-category items into the cat_unknown record", async () => {
+    const { admin } = makeAdmin({
+      catUnknownId: "cat-zz",
+      items: [
+        { category: "" },
+        { category: "" },
+        { category: "" },
+        { category: "cat-a" },
+      ],
+    });
+    vi.mocked(getAdminPocketBase).mockResolvedValue(admin as never);
+
+    const res = await GET({} as never);
+    const body = await res.json();
+    expect(body.counts).toEqual({ "cat-zz": 3, "cat-a": 1 });
+    // No phantom "__unknown__" bucket.
+    expect(body.counts["__unknown__"]).toBeUndefined();
+  });
+
+  it("merges blank + cat_unknown record into a single bucket", async () => {
+    const { admin } = makeAdmin({
+      catUnknownId: "cat-zz",
+      items: [
+        { category: "" },
+        { category: "cat-zz" },
+        { category: "cat-zz" },
+      ],
+    });
+    vi.mocked(getAdminPocketBase).mockResolvedValue(admin as never);
+
+    const res = await GET({} as never);
+    const body = await res.json();
+    expect(body.counts).toEqual({ "cat-zz": 3 });
+  });
+
+  it("falls back to a single phantom __unknown__ bucket when cat_unknown record doesn't exist", async () => {
+    const { admin } = makeAdmin({
+      // No catUnknownId — simulates the admin-managed record not
+      // being created yet (e.g. fresh PB instance).
+      items: [{ category: "" }, { category: "" }],
+    });
+    vi.mocked(getAdminPocketBase).mockResolvedValue(admin as never);
+
+    const res = await GET({} as never);
+    const body = await res.json();
+    // The counts contract still needs to expose the items somewhere,
+    // but we don't promise a specific key. Just check no per-PB-id
+    // bucket is created.
+    const total: number = (Object.values(body.counts) as number[]).reduce(
+      (a, b) => a + b,
+      0,
+    );
+    expect(total).toBe(2);
+  });
+
+  it("returns 500 when admin PB throws", async () => {
+    vi.mocked(getAdminPocketBase).mockRejectedValue(new Error("PB down"));
+    const res = await GET({} as never);
+    expect(res.status).toBe(500);
+  });
+});
\ No newline at end of file
diff --git a/src/app/api/v1/orders/sprint/counts/route.ts b/src/app/api/v1/orders/sprint/counts/route.ts
index 779eef8..f1b191e 100644
--- a/src/app/api/v1/orders/sprint/counts/route.ts
+++ b/src/app/api/v1/orders/sprint/counts/route.ts
@@ -7,6 +7,11 @@ import { getAdminPocketBase } from "@/lib/server/pocketbase-admin";
  * Returns per-category counts for order items that need PO generation.
  * Shape: { total: number, counts: { [categoryId]: number } }
  *
+ * Items with a blank `category` bucket into the admin-managed
+ * "Unknown / Other" category (slug `cat_unknown`) so the count is
+ * consistent with what the /orders/sprint page renders as a single
+ * tab.
+ *
  * Uses admin PB so it bypasses list rules.
  *
  * Note: lives at `/counts` rather than at the parent `/sprint` route
@@ -30,21 +35,31 @@ export async function GET(_req: NextRequest) {
       batch: 500,
     });
 
+    // Resolve the admin-managed "Unknown / Other" category (slug
+    // `cat_unknown`). Items with an empty category bucket into it
+    // so the count matches what the page renders as a single tab.
+    // This was previously split across two separate buckets —
+    // blank category vs the literal Unknown / Other record — and
+    // the page rendered both as separate tabs.
+    const catsRes = await pb.collection("categories").getFullList({
+      filter: "slug = 'cat_unknown'",
+      fields: "id",
+    });
+    const unknownCatId = catsRes[0]?.id;
+
     const countsMap: Record<string, number> = {};
-    let unknown = 0;
 
     for (const item of allItems) {
-      const catId = (item.category as string) || "__unknown__";
-      if (catId === "__unknown__") {
-        unknown++;
-      } else {
-        countsMap[catId] = (countsMap[catId] ?? 0) + 1;
-      }
+      const catId = (item.category as string) || "";
+      // Treat blank category the same as the Unknown / Other record.
+      // If the admin hasn't created that record yet, fall back to a
+      // legacy `__unknown__` sentinel so the items are still counted.
+      let bucket: string;
+      if (catId === "") bucket = unknownCatId ?? "__unknown__";
+      else bucket = catId;
+      countsMap[bucket] = (countsMap[bucket] ?? 0) + 1;
     }
 
-    // Include unknown in the map
-    if (unknown > 0) countsMap["__unknown__"] = unknown;
-
     return NextResponse.json({
       total: allItems.length,
       counts: countsMap,
diff --git a/src/components/order-sprint-process-modal.test.tsx b/src/components/order-sprint-process-modal.test.tsx
new file mode 100644
index 0000000..b9c6d65
--- /dev/null
+++ b/src/components/order-sprint-process-modal.test.tsx
@@ -0,0 +1,213 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import { OrderSprintProcessModal } from "./order-sprint-process-modal";
+
+// Mock the client PB so we can assert on the update payload written
+// when the operator clicks "Process Item". The modal also reads price
+// list + order history in `useEffect` — we stub those with empty
+// results so the test focuses purely on the save behaviour.
+const { updateMock, getListMock, supplierSearchStub } = vi.hoisted(() => ({
+  updateMock: vi.fn(),
+  getListMock: vi.fn(),
+  supplierSearchStub: vi.fn(),
+}));
+
+vi.mock("@/lib/pocketbase", () => ({
+  __esModule: true,
+  default: () => ({
+    collection: () => ({
+      getList: (...args: unknown[]) => getListMock(...args),
+      update: updateMock,
+    }),
+  }),
+}));
+
+// Replace SupplierSearch with a plain <select> so we can drive
+// supplier selection from tests without rendering the real combobox.
+vi.mock("@/components/ui/supplier-search", () => ({
+  SupplierSearch: ({
+    value,
+    onValueChange,
+    suppliers,
+  }: {
+    value: string;
+    onValueChange: (v: string) => void;
+    suppliers: Array<{ id: string; suppliername: string }>;
+  }) => (
+    <select
+      aria-label="Supplier"
+      value={value}
+      onChange={(e) => onValueChange(e.target.value)}
+    >
+      <option value="">Pick…</option>
+      {suppliers.map((s) => (
+        <option key={s.id} value={s.id}>
+          {s.suppliername}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+
+void supplierSearchStub; // silence unused
+
+const baseItem = {
+  id: "item-1",
+  description: "HSS drill bit",
+  quantity: 2,
+  supplier: "",
+  cost_price: 0,
+  selling_price: 0,
+  markup: 0,
+  sku: "",
+  notes: "",
+  category: "",
+  po_description: "",
+  item_status: "pending",
+};
+
+const suppliers = [
+  { id: "sup-1", suppliername: "Steel Co" },
+  { id: "sup-2", suppliername: "Bolt Suppliers" },
+];
+
+function renderModal(props: Partial<React.ComponentProps<typeof OrderSprintProcessModal>> = {}) {
+  return render(
+    <OrderSprintProcessModal
+      item={baseItem}
+      suppliers={suppliers as never}
+      open
+      onClose={vi.fn()}
+      onProcessed={vi.fn()}
+      {...props}
+    />,
+  );
+}
+
+async function setField(labelOrPlaceholder: string, value: string) {
+  // The pricing inputs are wired with htmlFor/id; the other text
+  // inputs use placeholders. Prefer the label, fall back to the
+  // placeholder.
+  let input: HTMLElement;
+  try {
+    input = screen.getByLabelText(labelOrPlaceholder, { exact: false });
+  } catch {
+    input = screen.getByPlaceholderText(labelOrPlaceholder);
+  }
+  fireEvent.change(input, { target: { value } });
+}
+
+describe("OrderSprintProcessModal", () => {
+  beforeEach(() => {
+    updateMock.mockReset();
+    updateMock.mockResolvedValue({});
+    // Order history + price list fetches resolve to empty lists so
+    // the modal mounts without throwing. We don't assert on them.
+    getListMock.mockResolvedValue({ items: [], totalItems: 0, totalPages: 1 });
+  });
+
+  it("writes item_status='processed' when supplier + cost + po_description are all set", async () => {
+    renderModal();
+    // supplier
+    fireEvent.change(screen.getByLabelText("Supplier"), {
+      target: { value: "sup-1" },
+    });
+    // cost
+    await setField("Cost (ZAR)", "25");
+    // po_description (uses placeholder because there's no <Label htmlFor> wiring)
+    fireEvent.change(
+      screen.getByPlaceholderText("Description the supplier sees on the PO"),
+      { target: { value: "10mm HSS drill bit" } },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /process item/i }));
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledTimes(1);
+    });
+    const [id, payload] = updateMock.mock.calls[0]!;
+    expect(id).toBe("item-1");
+    expect(payload).toMatchObject({
+      supplier: "sup-1",
+      cost_price: 25,
+      po_description: "10mm HSS drill bit",
+      item_status: "processed",
+    });
+  });
+
+  it("keeps item_status='pending' when po_description is empty", async () => {
+    renderModal();
+    fireEvent.change(screen.getByLabelText("Supplier"), {
+      target: { value: "sup-1" },
+    });
+    await setField("Cost (ZAR)", "25");
+    // po_description left blank
+    fireEvent.change(
+      screen.getByPlaceholderText("Description the supplier sees on the PO"),
+      { target: { value: "" } },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /process item/i }));
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledTimes(1);
+    });
+    expect(updateMock.mock.calls[0]![1]).toMatchObject({
+      item_status: "pending",
+    });
+  });
+
+  it("keeps item_status='pending' when cost is 0", async () => {
+    renderModal();
+    fireEvent.change(screen.getByLabelText("Supplier"), {
+      target: { value: "sup-1" },
+    });
+    await setField("Cost (ZAR)", "0");
+    fireEvent.change(
+      screen.getByPlaceholderText("Description the supplier sees on the PO"),
+      { target: { value: "anything" } },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /process item/i }));
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledTimes(1);
+    });
+    expect(updateMock.mock.calls[0]![1]).toMatchObject({
+      item_status: "pending",
+    });
+  });
+
+  it("does not downgrade items that are already past 'processed'", async () => {
+    renderModal({
+      item: { ...baseItem, item_status: "po_generated", cost_price: 25, supplier: "sup-1", po_description: "x" },
+    });
+
+    // No supplier / cost / po_description changes needed — those are pre-filled.
+    fireEvent.click(screen.getByRole("button", { name: /process item/i }));
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledTimes(1);
+    });
+    expect(updateMock.mock.calls[0]![1]).toMatchObject({
+      item_status: "po_generated",
+    });
+  });
+
+  it("refuses to save when no supplier is selected", async () => {
+    renderModal();
+    await setField("Cost (ZAR)", "25");
+    fireEvent.change(
+      screen.getByPlaceholderText("Description the supplier sees on the PO"),
+      { target: { value: "10mm HSS drill bit" } },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /process item/i }));
+
+    // updateMock is not called — the modal gates on supplier first.
+    await waitFor(() => {
+      expect(updateMock).not.toHaveBeenCalled();
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/order-sprint-process-modal.tsx b/src/components/order-sprint-process-modal.tsx
index af8e65d..bde5b13 100644
--- a/src/components/order-sprint-process-modal.tsx
+++ b/src/components/order-sprint-process-modal.tsx
@@ -51,6 +51,8 @@ type OrderSprintItem = {
   sku?: string;
   notes?: string;
   category?: string;
+  po_description?: string;
+  item_status?: string;
   ai_item_insights?: Record<string, unknown> | null;
 };
 
@@ -59,6 +61,11 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
   const [cost, setCost] = useState(item?.cost_price || 0);
   const [markup, setMarkup] = useState(item?.markup || 0);
   const [selling, setSelling] = useState(item?.selling_price || 0);
+  // PO description — what the supplier sees on the PO. Mirrors the
+  // canonical /orders/[id]/process gate: an item only transitions
+  // pending → processed when supplier + cost + po_description are all
+  // set, so the buyer-tasks Needs PO tab can find it.
+  const [poDescription, setPoDescription] = useState(item?.po_description || item?.description || "");
   const [notes, setNotes] = useState(item?.notes || "");
   const [processing, setProcessing] = useState(false);
   const [suppliersExpanded, setSuppliersExpanded] = useState(true);
@@ -208,12 +215,32 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
     setProcessing(true);
     try {
       const pb = getPocketBase();
+
+      // Same readiness gate as /orders/[id]/process saveItem:
+      // pending → processed only when supplier + cost > 0 +
+      // po_description are all set. Items already past `processed`
+      // (stock_booked, po_generated, ready_delivery, etc.) are not
+      // downgraded. This is what makes the item appear on the
+      // buyer-tasks Needs PO tab.
+      const trimmedPoDescription = poDescription.trim();
+      const isReadyForBuyer =
+        supplierId.trim() !== "" &&
+        cost > 0 &&
+        trimmedPoDescription !== "";
+      const currentStatus = item.item_status ?? "pending";
+      const nextStatus =
+        currentStatus === "pending" && isReadyForBuyer
+          ? "processed"
+          : currentStatus;
+
       await pb.collection("order_items").update(item.id, {
         supplier: supplierId,
         cost_price: round2(cost),
         selling_price: round2(selling),
         markup: round2(markup),
+        po_description: trimmedPoDescription,
         notes: notes,
+        item_status: nextStatus,
       });
       toast.success("Item processed!");
       onProcessed();
@@ -329,24 +356,24 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
           <div className="grid grid-cols-3 gap-3">
             <div className="space-y-1">
               <div className="flex items-center justify-between">
-                <Label className="text-xs">Cost (ZAR)</Label>
+                <Label htmlFor="order-sprint-cost" className="text-xs">Cost (ZAR)</Label>
                 <button type="button" onClick={() => copyToClipboard(cost, "cost")} className="text-muted-foreground hover:text-foreground"><Copy className="h-3 w-3" /></button>
               </div>
-              <Input type="number" value={cost || ""} onChange={(e) => onCostChange(e.target.value)} className="h-9 tabular-nums" placeholder="0.00" />
+              <Input id="order-sprint-cost" type="number" value={cost || ""} onChange={(e) => onCostChange(e.target.value)} className="h-9 tabular-nums" placeholder="0.00" />
             </div>
             <div className="space-y-1">
               <div className="flex items-center justify-between">
-                <Label className="text-xs">Markup %</Label>
+                <Label htmlFor="order-sprint-markup" className="text-xs">Markup %</Label>
                 <button type="button" onClick={() => copyToClipboard(markup, "markup")} className="text-muted-foreground hover:text-foreground"><Copy className="h-3 w-3" /></button>
               </div>
-              <Input type="number" value={markup || ""} onChange={(e) => onMarkupChange(e.target.value)} className="h-9 tabular-nums" placeholder="20" />
+              <Input id="order-sprint-markup" type="number" value={markup || ""} onChange={(e) => onMarkupChange(e.target.value)} className="h-9 tabular-nums" placeholder="20" />
             </div>
             <div className="space-y-1">
               <div className="flex items-center justify-between">
-                <Label className="text-xs">Selling (ZAR)</Label>
+                <Label htmlFor="order-sprint-selling" className="text-xs">Selling (ZAR)</Label>
                 <button type="button" onClick={() => copyToClipboard(selling, "selling")} className="text-muted-foreground hover:text-foreground"><Copy className="h-3 w-3" /></button>
               </div>
-              <Input type="number" value={selling || ""} onChange={(e) => onSellingChange(e.target.value)} className="h-9 tabular-nums" placeholder="0.00" />
+              <Input id="order-sprint-selling" type="number" value={selling || ""} onChange={(e) => onSellingChange(e.target.value)} className="h-9 tabular-nums" placeholder="0.00" />
             </div>
           </div>
 
@@ -356,6 +383,32 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
             <SupplierSearch value={supplierId} onValueChange={setSupplierId} suppliers={suppliers} placeholder="Pick the supplier..." ariaLabel="Supplier" />
           </div>
 
+          {/* PO description — what the supplier sees on the PO. Defaults
+              to the order description so the buyer-tasks pending →
+              processed transition fires for the common no-op case.
+              Mirrors the canonical /orders/[id]/process gate. */}
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">PO description</Label>
+              {poDescription.trim() !== (item.description || "").trim() && (
+                <button
+                  type="button"
+                  onClick={() => setPoDescription(item.description || "")}
+                  className="text-[11px] text-muted-foreground hover:text-foreground"
+                >
+                  ↺ reset to order description
+                </button>
+              )}
+            </div>
+            <Textarea
+              value={poDescription}
+              onChange={(e) => setPoDescription(e.target.value)}
+              rows={2}
+              className="text-sm"
+              placeholder="Description the supplier sees on the PO"
+            />
+          </div>
+
           {/* Notes */}
           <div className="space-y-1.5">
             <Label className="text-xs">Notes</Label>