From 96a35a22a13dec6877359d567dfeb5ba5c1e92fa Mon Sep 17 00:00:00 2001
From: Erik Shafer <erik.shafer@gmail.com>
Date: Sat, 13 Jun 2026 12:07:53 -0500
Subject: [PATCH] M9-S4b: seller listing management write operations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create-draft form at /listings/new with 10 fields (react-hook-form + Zod),
Flash/Timed conditional visibility, extended-bidding toggle; edit-draft
dialog on Draft-status listings (3 mutable fields); submit-for-publication
button; mutation hooks with TanStack Query invalidation; 35 new tests
(seller total: 55); shadcn/ui Input, Label, Select, Checkbox added;
live HTTP smoke verified full journey (create → edit → submit → Published
for both Flash and Timed formats). Zero backend changes.
---
 client/package-lock.json                      |  36 +++
 client/seller/package.json                    |   2 +
 client/seller/src/components/ui/checkbox.tsx  |  21 ++
 client/seller/src/components/ui/input.tsx     |  19 ++
 client/seller/src/components/ui/label.tsx     |  18 ++
 client/seller/src/components/ui/select.tsx    |  22 ++
 .../src/listings/CreateListingPage.test.tsx   | 197 ++++++++++++++
 .../seller/src/listings/CreateListingPage.tsx | 243 ++++++++++++++++++
 .../seller/src/listings/EditDraftDialog.tsx   | 127 +++++++++
 .../seller/src/listings/ListingsPage.test.tsx | 124 ++++++++-
 client/seller/src/listings/ListingsPage.tsx   | 132 +++++++---
 .../seller/src/listings/formSchemas.test.ts   | 180 +++++++++++++
 client/seller/src/listings/formSchemas.ts     | 157 +++++++++++
 client/seller/src/listings/mutations.test.ts  | 173 +++++++++++++
 client/seller/src/listings/mutations.ts       | 146 +++++++++++
 client/seller/src/router.tsx                  |  13 +-
 .../M9-S4b-seller-listing-management.md       | 150 +++++++++++
 ...seller-listing-management-retrospective.md | 150 +++++++++++
 18 files changed, 1860 insertions(+), 50 deletions(-)
 create mode 100644 client/seller/src/components/ui/checkbox.tsx
 create mode 100644 client/seller/src/components/ui/input.tsx
 create mode 100644 client/seller/src/components/ui/label.tsx
 create mode 100644 client/seller/src/components/ui/select.tsx
 create mode 100644 client/seller/src/listings/CreateListingPage.test.tsx
 create mode 100644 client/seller/src/listings/CreateListingPage.tsx
 create mode 100644 client/seller/src/listings/EditDraftDialog.tsx
 create mode 100644 client/seller/src/listings/formSchemas.test.ts
 create mode 100644 client/seller/src/listings/formSchemas.ts
 create mode 100644 client/seller/src/listings/mutations.test.ts
 create mode 100644 client/seller/src/listings/mutations.ts
 create mode 100644 docs/prompts/implementations/M9-S4b-seller-listing-management.md
 create mode 100644 docs/retrospectives/M9-S4b-seller-listing-management-retrospective.md

diff --git a/client/package-lock.json b/client/package-lock.json
index 9b69765..000ea4e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1911,6 +1911,18 @@
         }
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.4.0.tgz",
+      "integrity": "sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-9.0.0.tgz",
@@ -2845,6 +2857,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
@@ -6429,6 +6447,22 @@
         "react": "^19.2.7"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.79.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.79.0.tgz",
+      "integrity": "sha512-mhYp/MTmXvzYX6AJcJVko0rktoIhhmRnEouObj4wF5i/tCttgJvnp1+9wRkpITZjDTqpo4IOSJqu0dBlPlV/Lw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -8327,6 +8361,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@critterbids/shared": "*",
+        "@hookform/resolvers": "^5.4.0",
         "@microsoft/signalr": "^10.0.0",
         "@tanstack/react-query": "^5.101.0",
         "@tanstack/react-router": "^1.170.15",
@@ -8334,6 +8369,7 @@
         "clsx": "^2.1.1",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-hook-form": "^7.79.0",
         "tailwind-merge": "^3.6.0",
         "zod": "^4.4.3"
       },
diff --git a/client/seller/package.json b/client/seller/package.json
index a6034ad..5a5e9c0 100644
--- a/client/seller/package.json
+++ b/client/seller/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@critterbids/shared": "*",
+    "@hookform/resolvers": "^5.4.0",
     "@microsoft/signalr": "^10.0.0",
     "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-router": "^1.170.15",
@@ -19,6 +20,7 @@
     "clsx": "^2.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-hook-form": "^7.79.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
diff --git a/client/seller/src/components/ui/checkbox.tsx b/client/seller/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..6653960
--- /dev/null
+++ b/client/seller/src/components/ui/checkbox.tsx
@@ -0,0 +1,21 @@
+import { forwardRef, type ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = forwardRef<HTMLInputElement, ComponentProps<"input">>(
+  ({ className, ...props }, ref) => (
+    <input
+      type="checkbox"
+      ref={ref}
+      data-slot="checkbox"
+      className={cn(
+        "h-4 w-4 shrink-0 rounded border border-input shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
diff --git a/client/seller/src/components/ui/input.tsx b/client/seller/src/components/ui/input.tsx
new file mode 100644
index 0000000..2b52fd4
--- /dev/null
+++ b/client/seller/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/client/seller/src/components/ui/label.tsx b/client/seller/src/components/ui/label.tsx
new file mode 100644
index 0000000..8c79601
--- /dev/null
+++ b/client/seller/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/client/seller/src/components/ui/select.tsx b/client/seller/src/components/ui/select.tsx
new file mode 100644
index 0000000..54c839c
--- /dev/null
+++ b/client/seller/src/components/ui/select.tsx
@@ -0,0 +1,22 @@
+import { forwardRef, type ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = forwardRef<HTMLSelectElement, ComponentProps<"select">>(
+  ({ className, children, ...props }, ref) => (
+    <select
+      ref={ref}
+      data-slot="select"
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+  ),
+);
+Select.displayName = "Select";
+
+export { Select };
diff --git a/client/seller/src/listings/CreateListingPage.test.tsx b/client/seller/src/listings/CreateListingPage.test.tsx
new file mode 100644
index 0000000..fbb5bfa
--- /dev/null
+++ b/client/seller/src/listings/CreateListingPage.test.tsx
@@ -0,0 +1,197 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from "@tanstack/react-router";
+
+import { CreateListingPage } from "@/listings/CreateListingPage";
+import { SessionProvider } from "@/session/SessionContext";
+
+function stubFetch(overrides: Record<string, unknown> = {}): void {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: string, init?: RequestInit) => {
+      for (const [pattern, body] of Object.entries(overrides)) {
+        if (url.includes(pattern)) {
+          return {
+            ok: true,
+            status: init?.method === "POST" ? 201 : 200,
+            headers: new Headers(
+              pattern === "/api/listings/draft"
+                ? { Location: "/api/listings/new-id" }
+                : pattern === "/api/participants/session"
+                  ? { Location: "/api/participants/test-seller-id" }
+                  : {},
+            ),
+            json: async () => body,
+            text: async () => JSON.stringify(body),
+          } as unknown as Response;
+        }
+      }
+      return {
+        ok: true,
+        status: 200,
+        headers: new Headers(),
+        json: async () => null,
+        text: async () => "",
+      } as unknown as Response;
+    }),
+  );
+}
+
+function renderCreateListingPage(): void {
+  sessionStorage.setItem("critterbids.seller.participantId", "test-seller-id");
+  sessionStorage.setItem("critterbids.seller.isRegisteredSeller", "true");
+
+  const rootRoute = createRootRoute({ component: Outlet });
+  const createRoute_ = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/",
+    component: CreateListingPage,
+  });
+  const listingsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/listings",
+    component: () => <div>Listings Page</div>,
+  });
+  const routeTree = rootRoute.addChildren([createRoute_, listingsRoute]);
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({ initialEntries: ["/"] }),
+  });
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  render(
+    <QueryClientProvider client={queryClient}>
+      <SessionProvider>
+        <RouterProvider router={router} />
+      </SessionProvider>
+    </QueryClientProvider>,
+  );
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("CreateListingPage", () => {
+  it("renders all core form fields", async () => {
+    stubFetch();
+    renderCreateListingPage();
+
+    expect(
+      await screen.findByLabelText("Title"),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Auction Format")).toBeInTheDocument();
+    expect(screen.getByLabelText("Starting Bid ($)")).toBeInTheDocument();
+    expect(
+      screen.getByLabelText("Reserve Price ($) — optional"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByLabelText("Buy It Now Price ($) — optional"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByLabelText("Enable extended bidding"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Create Draft" }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows duration field when Timed format is selected", async () => {
+    stubFetch();
+    renderCreateListingPage();
+    const user = userEvent.setup();
+
+    await screen.findByLabelText("Title");
+
+    expect(screen.queryByLabelText("Duration")).not.toBeInTheDocument();
+
+    await user.selectOptions(screen.getByLabelText("Auction Format"), "Timed");
+
+    expect(screen.getByLabelText("Duration")).toBeInTheDocument();
+  });
+
+  it("hides duration field when Flash format is selected", async () => {
+    stubFetch();
+    renderCreateListingPage();
+    const user = userEvent.setup();
+
+    await screen.findByLabelText("Title");
+
+    await user.selectOptions(screen.getByLabelText("Auction Format"), "Timed");
+    expect(screen.getByLabelText("Duration")).toBeInTheDocument();
+
+    await user.selectOptions(screen.getByLabelText("Auction Format"), "Flash");
+    expect(screen.queryByLabelText("Duration")).not.toBeInTheDocument();
+  });
+
+  it("shows extended-bidding fields when checkbox is checked", async () => {
+    stubFetch();
+    renderCreateListingPage();
+    const user = userEvent.setup();
+
+    await screen.findByLabelText("Title");
+
+    expect(
+      screen.queryByLabelText("Trigger Window"),
+    ).not.toBeInTheDocument();
+
+    await user.click(screen.getByLabelText("Enable extended bidding"));
+
+    expect(screen.getByLabelText("Trigger Window")).toBeInTheDocument();
+    expect(screen.getByLabelText("Extension")).toBeInTheDocument();
+  });
+
+  it("hides extended-bidding fields when checkbox is unchecked", async () => {
+    stubFetch();
+    renderCreateListingPage();
+    const user = userEvent.setup();
+
+    await screen.findByLabelText("Title");
+
+    await user.click(screen.getByLabelText("Enable extended bidding"));
+    expect(screen.getByLabelText("Trigger Window")).toBeInTheDocument();
+
+    await user.click(screen.getByLabelText("Enable extended bidding"));
+    expect(
+      screen.queryByLabelText("Trigger Window"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows validation errors when submitting with empty required fields", async () => {
+    stubFetch();
+    renderCreateListingPage();
+    const user = userEvent.setup();
+
+    await screen.findByLabelText("Title");
+
+    await user.click(screen.getByRole("button", { name: "Create Draft" }));
+
+    expect(
+      await screen.findByText("Title is required"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Starting bid is required"),
+    ).toBeInTheDocument();
+  });
+
+  it("has a cancel button that links back to listings", async () => {
+    stubFetch();
+    renderCreateListingPage();
+
+    await screen.findByLabelText("Title");
+    expect(
+      screen.getByRole("button", { name: "Cancel" }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/client/seller/src/listings/CreateListingPage.tsx b/client/seller/src/listings/CreateListingPage.tsx
new file mode 100644
index 0000000..5da6bcd
--- /dev/null
+++ b/client/seller/src/listings/CreateListingPage.tsx
@@ -0,0 +1,243 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "@tanstack/react-router";
+
+import { useSession } from "@/session/SessionContext";
+import { useCreateDraft } from "@/listings/mutations";
+import {
+  createDraftSchema,
+  DURATION_PRESETS,
+  EXTENDED_BIDDING_PRESETS,
+  type CreateDraftFormValues,
+} from "@/listings/formSchemas";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const defaultValues: CreateDraftFormValues = {
+  title: "",
+  format: "Flash",
+  startingBid: "",
+  reservePrice: "",
+  buyItNowPrice: "",
+  duration: "",
+  extendedBiddingEnabled: false,
+  extendedBiddingTriggerWindow: "",
+  extendedBiddingExtension: "",
+};
+
+const resolver = zodResolver(createDraftSchema);
+
+export function CreateListingPage() {
+  const { participantId } = useSession();
+  const navigate = useNavigate();
+  const mutation = useCreateDraft(participantId ?? "");
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isSubmitting },
+  } = useForm<CreateDraftFormValues>({
+    resolver,
+    defaultValues,
+    shouldUnregister: true,
+  });
+
+  const format = watch("format");
+  const extendedBiddingEnabled = watch("extendedBiddingEnabled");
+
+  const onSubmit = handleSubmit((values) => {
+    mutation.mutate(values, {
+      onSuccess: () => void navigate({ to: "/listings" }),
+    });
+  });
+
+  return (
+    <section className="mx-auto max-w-2xl">
+      <h1 className="mb-6 text-xl font-semibold tracking-tight">
+        Create New Listing
+      </h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Listing Details</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={onSubmit} className="space-y-5" aria-label="Create listing">
+            <div className="space-y-1.5">
+              <Label htmlFor="title">Title</Label>
+              <Input
+                id="title"
+                {...register("title")}
+                placeholder="e.g. Vintage Mechanical Keyboard"
+              />
+              {errors.title && (
+                <p className="text-destructive text-xs">{errors.title.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="format">Auction Format</Label>
+              <Select id="format" {...register("format")}>
+                <option value="Flash">Flash</option>
+                <option value="Timed">Timed</option>
+              </Select>
+              {errors.format && (
+                <p className="text-destructive text-xs">{errors.format.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="startingBid">Starting Bid ($)</Label>
+              <Input
+                id="startingBid"
+                type="number"
+                inputMode="decimal"
+                min="0"
+                step="0.01"
+                {...register("startingBid")}
+              />
+              {errors.startingBid && (
+                <p className="text-destructive text-xs">{errors.startingBid.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="reservePrice">Reserve Price ($) — optional</Label>
+              <Input
+                id="reservePrice"
+                type="number"
+                inputMode="decimal"
+                min="0"
+                step="0.01"
+                {...register("reservePrice")}
+              />
+              {errors.reservePrice && (
+                <p className="text-destructive text-xs">{errors.reservePrice.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="buyItNowPrice">Buy It Now Price ($) — optional</Label>
+              <Input
+                id="buyItNowPrice"
+                type="number"
+                inputMode="decimal"
+                min="0"
+                step="0.01"
+                {...register("buyItNowPrice")}
+              />
+              {errors.buyItNowPrice && (
+                <p className="text-destructive text-xs">{errors.buyItNowPrice.message}</p>
+              )}
+            </div>
+
+            {format === "Timed" && (
+              <div className="space-y-1.5">
+                <Label htmlFor="duration">Duration</Label>
+                <Select id="duration" {...register("duration")}>
+                  <option value="">Select duration...</option>
+                  {DURATION_PRESETS.map((preset) => (
+                    <option key={preset.value} value={preset.value}>
+                      {preset.label}
+                    </option>
+                  ))}
+                </Select>
+                {errors.duration && (
+                  <p className="text-destructive text-xs">{errors.duration.message}</p>
+                )}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="extendedBiddingEnabled"
+                {...register("extendedBiddingEnabled")}
+              />
+              <Label htmlFor="extendedBiddingEnabled">
+                Enable extended bidding
+              </Label>
+            </div>
+
+            {extendedBiddingEnabled && (
+              <>
+                <div className="space-y-1.5">
+                  <Label htmlFor="extendedBiddingTriggerWindow">
+                    Trigger Window
+                  </Label>
+                  <Select
+                    id="extendedBiddingTriggerWindow"
+                    {...register("extendedBiddingTriggerWindow")}
+                  >
+                    <option value="">Select trigger window...</option>
+                    {EXTENDED_BIDDING_PRESETS.map((preset) => (
+                      <option key={preset.value} value={preset.value}>
+                        {preset.label}
+                      </option>
+                    ))}
+                  </Select>
+                  {errors.extendedBiddingTriggerWindow && (
+                    <p className="text-destructive text-xs">
+                      {errors.extendedBiddingTriggerWindow.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="extendedBiddingExtension">Extension</Label>
+                  <Select
+                    id="extendedBiddingExtension"
+                    {...register("extendedBiddingExtension")}
+                  >
+                    <option value="">Select extension...</option>
+                    {EXTENDED_BIDDING_PRESETS.map((preset) => (
+                      <option key={preset.value} value={preset.value}>
+                        {preset.label}
+                      </option>
+                    ))}
+                  </Select>
+                  {errors.extendedBiddingExtension && (
+                    <p className="text-destructive text-xs">
+                      {errors.extendedBiddingExtension.message}
+                    </p>
+                  )}
+                </div>
+              </>
+            )}
+
+            {mutation.isError && (
+              <p className="text-destructive text-xs" role="alert">
+                {mutation.error.message}
+              </p>
+            )}
+
+            <div className="flex gap-3 pt-2">
+              <Button
+                type="submit"
+                disabled={isSubmitting || mutation.isPending}
+              >
+                {mutation.isPending ? "Creating..." : "Create Draft"}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => void navigate({ to: "/listings" })}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </section>
+  );
+}
diff --git a/client/seller/src/listings/EditDraftDialog.tsx b/client/seller/src/listings/EditDraftDialog.tsx
new file mode 100644
index 0000000..2ea2d21
--- /dev/null
+++ b/client/seller/src/listings/EditDraftDialog.tsx
@@ -0,0 +1,127 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { useSession } from "@/session/SessionContext";
+import { useEditDraft } from "@/listings/mutations";
+import { editDraftSchema, type EditDraftFormValues } from "@/listings/formSchemas";
+import type { SellerListingSummary } from "@/listings/schema";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+const resolver = zodResolver(editDraftSchema);
+
+export function EditDraftDialog({
+  listing,
+  onClose,
+}: {
+  listing: SellerListingSummary;
+  onClose: () => void;
+}) {
+  const { participantId } = useSession();
+  const mutation = useEditDraft(participantId ?? "");
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<EditDraftFormValues>({
+    resolver,
+    defaultValues: {
+      listingId: listing.id,
+      title: listing.title,
+      reservePrice: listing.reservePrice != null ? String(listing.reservePrice) : "",
+      buyItNowPrice: listing.buyItNowPrice != null ? String(listing.buyItNowPrice) : "",
+    },
+  });
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  const onSubmit = handleSubmit((values) => {
+    mutation.mutate(values, { onSuccess: onClose });
+  });
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+      role="dialog"
+      aria-modal="true"
+      aria-label={`Edit ${listing.title}`}
+    >
+      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-background p-6 shadow-lg">
+        <h2 className="mb-4 text-lg font-semibold">Edit Draft</h2>
+        <form onSubmit={onSubmit} className="space-y-4" aria-label="Edit draft listing">
+          <div className="space-y-1.5">
+            <Label htmlFor="edit-title">Title</Label>
+            <Input id="edit-title" {...register("title")} />
+            {errors.title && (
+              <p className="text-destructive text-xs">{errors.title.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="edit-reservePrice">Reserve Price ($)</Label>
+            <Input
+              id="edit-reservePrice"
+              type="number"
+              inputMode="decimal"
+              min="0"
+              step="0.01"
+              {...register("reservePrice")}
+            />
+            {errors.reservePrice && (
+              <p className="text-destructive text-xs">
+                {errors.reservePrice.message}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="edit-buyItNowPrice">Buy It Now Price ($)</Label>
+            <Input
+              id="edit-buyItNowPrice"
+              type="number"
+              inputMode="decimal"
+              min="0"
+              step="0.01"
+              {...register("buyItNowPrice")}
+            />
+            {errors.buyItNowPrice && (
+              <p className="text-destructive text-xs">
+                {errors.buyItNowPrice.message}
+              </p>
+            )}
+          </div>
+
+          {mutation.isError && (
+            <p className="text-destructive text-xs" role="alert">
+              {mutation.error.message}
+            </p>
+          )}
+
+          <div className="flex gap-3 pt-2">
+            <Button
+              type="submit"
+              disabled={isSubmitting || mutation.isPending}
+            >
+              {mutation.isPending ? "Saving..." : "Save Changes"}
+            </Button>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/client/seller/src/listings/ListingsPage.test.tsx b/client/seller/src/listings/ListingsPage.test.tsx
index 42695b3..e254e26 100644
--- a/client/seller/src/listings/ListingsPage.test.tsx
+++ b/client/seller/src/listings/ListingsPage.test.tsx
@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   createMemoryHistory,
@@ -13,16 +14,24 @@ import {
 import { ListingsPage } from "@/listings/ListingsPage";
 import { SessionProvider } from "@/session/SessionContext";
 
-const validListing = {
+const draftListing = {
   id: "0192f1a0-1111-7000-8000-000000000001",
   sellerId: "0192f1a0-2222-7000-8000-000000000002",
   title: "Vintage Mechanical Keyboard",
   format: "Flash",
-  status: "Published",
+  status: "Draft",
   startingBid: 25,
   reservePrice: 50,
   buyItNowPrice: 100,
   createdAt: "2026-06-10T14:00:00+00:00",
+  publishedAt: null,
+};
+
+const publishedListing = {
+  ...draftListing,
+  id: "0192f1a0-3333-7000-8000-000000000003",
+  title: "Vintage Folding Camera",
+  status: "Published",
   publishedAt: "2026-06-10T15:00:00+00:00",
 };
 
@@ -41,6 +50,7 @@ function stubFetch(responses: Record<string, unknown>): void {
                 : {},
             ),
             json: async () => body,
+            text: async () => JSON.stringify(body),
           } as unknown as Response;
         }
       }
@@ -49,6 +59,7 @@ function stubFetch(responses: Record<string, unknown>): void {
         status: 404,
         headers: new Headers(),
         json: async () => null,
+        text: async () => "",
       } as unknown as Response;
     }),
   );
@@ -64,7 +75,12 @@ function renderListingsPage(): void {
     path: "/",
     component: ListingsPage,
   });
-  const routeTree = rootRoute.addChildren([listingsRoute]);
+  const createRoute_ = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/listings/new",
+    component: () => <div>Create Listing Page</div>,
+  });
+  const routeTree = rootRoute.addChildren([listingsRoute, createRoute_]);
   const router = createRouter({
     routeTree,
     history: createMemoryHistory({ initialEntries: ["/"] }),
@@ -89,14 +105,14 @@ afterEach(() => {
 describe("ListingsPage", () => {
   it("renders listing cards from the seller query endpoint", async () => {
     stubFetch({
-      "/api/selling/listings": [validListing],
+      "/api/selling/listings": [draftListing],
     });
     renderListingsPage();
 
     expect(
       await screen.findByText("Vintage Mechanical Keyboard"),
     ).toBeInTheDocument();
-    expect(screen.getByText("Published")).toBeInTheDocument();
+    expect(screen.getByText("Draft")).toBeInTheDocument();
     expect(screen.getByText("Flash")).toBeInTheDocument();
   });
 
@@ -119,6 +135,7 @@ describe("ListingsPage", () => {
         status: 500,
         headers: new Headers(),
         json: async () => null,
+        text: async () => "",
       })),
     );
     renderListingsPage();
@@ -130,7 +147,7 @@ describe("ListingsPage", () => {
 
   it("shows reserve and BIN when present", async () => {
     stubFetch({
-      "/api/selling/listings": [validListing],
+      "/api/selling/listings": [draftListing],
     });
     renderListingsPage();
 
@@ -141,7 +158,7 @@ describe("ListingsPage", () => {
 
   it("hides reserve and BIN when null", async () => {
     const noExtras = {
-      ...validListing,
+      ...draftListing,
       reservePrice: null,
       buyItNowPrice: null,
     };
@@ -154,4 +171,97 @@ describe("ListingsPage", () => {
     expect(screen.queryByText(/Reserve:/)).not.toBeInTheDocument();
     expect(screen.queryByText(/BIN:/)).not.toBeInTheDocument();
   });
+
+  it("shows Edit and Submit buttons on Draft listings", async () => {
+    stubFetch({
+      "/api/selling/listings": [draftListing],
+    });
+    renderListingsPage();
+
+    await screen.findByText("Vintage Mechanical Keyboard");
+    expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Submit for Publication" }),
+    ).toBeInTheDocument();
+  });
+
+  it("hides Edit and Submit buttons on non-Draft listings", async () => {
+    stubFetch({
+      "/api/selling/listings": [publishedListing],
+    });
+    renderListingsPage();
+
+    await screen.findByText("Vintage Folding Camera");
+    expect(
+      screen.queryByRole("button", { name: "Edit" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Submit for Publication" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders the Create Listing button", async () => {
+    stubFetch({
+      "/api/selling/listings": [],
+    });
+    renderListingsPage();
+
+    expect(
+      await screen.findByRole("link", { name: "Create Listing" }),
+    ).toBeInTheDocument();
+  });
+
+  it("opens edit dialog when Edit button is clicked", async () => {
+    stubFetch({
+      "/api/selling/listings": [draftListing],
+    });
+    renderListingsPage();
+    const user = userEvent.setup();
+
+    await screen.findByText("Vintage Mechanical Keyboard");
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+
+    expect(
+      screen.getByRole("dialog", { name: /Edit Vintage Mechanical Keyboard/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Title")).toBeInTheDocument();
+  });
+
+  it("calls submit endpoint when Submit for Publication is clicked", async () => {
+    const fetchMock = vi.fn(async (url: string) => {
+      if (url.includes("/api/selling/listings?")) {
+        return {
+          ok: true,
+          status: 200,
+          headers: new Headers(),
+          json: async () => [draftListing],
+          text: async () => JSON.stringify([draftListing]),
+        } as unknown as Response;
+      }
+      return {
+        ok: true,
+        status: 202,
+        headers: new Headers(),
+        json: async () => null,
+        text: async () => "",
+      } as unknown as Response;
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    renderListingsPage();
+    const user = userEvent.setup();
+
+    await screen.findByText("Vintage Mechanical Keyboard");
+    await user.click(
+      screen.getByRole("button", { name: "Submit for Publication" }),
+    );
+
+    await vi.waitFor(() => {
+      const submitCall = fetchMock.mock.calls.find(
+        (c) =>
+          typeof c[0] === "string" &&
+          c[0].includes("/api/selling/listings/submit"),
+      );
+      expect(submitCall).toBeDefined();
+    });
+  });
 });
diff --git a/client/seller/src/listings/ListingsPage.tsx b/client/seller/src/listings/ListingsPage.tsx
index 97a7425..b4afb18 100644
--- a/client/seller/src/listings/ListingsPage.tsx
+++ b/client/seller/src/listings/ListingsPage.tsx
@@ -1,7 +1,13 @@
+import { useState } from "react";
+import { Link } from "@tanstack/react-router";
+
 import { useSession } from "@/session/SessionContext";
 import { useSellerListings } from "@/listings/queries";
+import { useSubmitListing } from "@/listings/mutations";
+import { EditDraftDialog } from "@/listings/EditDraftDialog";
 import type { SellerListingSummary } from "@/listings/schema";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -25,9 +31,7 @@ export function ListingsPage() {
   if (isError) {
     return (
       <section>
-        <h1 className="mb-4 text-xl font-semibold tracking-tight">
-          My Listings
-        </h1>
+        <ListingsHeader />
         <ErrorState
           message={error.message}
           onRetry={() => void refetch()}
@@ -38,9 +42,7 @@ export function ListingsPage() {
 
   return (
     <section>
-      <h1 className="mb-4 text-xl font-semibold tracking-tight">
-        My Listings
-      </h1>
+      <ListingsHeader />
       {data.length === 0 ? (
         <EmptyState message="You haven't created any listings yet." />
       ) : (
@@ -56,49 +58,95 @@ export function ListingsPage() {
   );
 }
 
+function ListingsHeader() {
+  return (
+    <div className="mb-4 flex items-center justify-between">
+      <h1 className="text-xl font-semibold tracking-tight">My Listings</h1>
+      <Link to="/listings/new">
+        <Button>Create Listing</Button>
+      </Link>
+    </div>
+  );
+}
+
 function ListingCard({ listing }: { listing: SellerListingSummary }) {
+  const { participantId } = useSession();
+  const submitMutation = useSubmitListing(participantId ?? "");
+  const [editOpen, setEditOpen] = useState(false);
   const created = new Date(listing.createdAt);
+  const isDraft = listing.status === "Draft";
 
   return (
-    <Card className="h-full">
-      <CardHeader>
-        <div className="flex items-start justify-between gap-2">
-          <CardTitle className="text-base">{listing.title}</CardTitle>
-          <Badge variant={sellerStatusVariant(listing.status)}>
-            {listing.status}
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-2">
-        <div className="flex items-end justify-between">
-          <div>
-            <p className="text-muted-foreground text-xs">Starting bid</p>
-            <p className="text-lg font-semibold">
-              {formatUsd(listing.startingBid)}
-            </p>
+    <>
+      <Card className="h-full">
+        <CardHeader>
+          <div className="flex items-start justify-between gap-2">
+            <CardTitle className="text-base">{listing.title}</CardTitle>
+            <Badge variant={sellerStatusVariant(listing.status)}>
+              {listing.status}
+            </Badge>
           </div>
-          <p className="text-muted-foreground text-xs">{listing.format}</p>
-        </div>
-        {listing.reservePrice != null && (
-          <p className="text-muted-foreground text-xs">
-            Reserve: {formatUsd(listing.reservePrice)}
-          </p>
-        )}
-        {listing.buyItNowPrice != null && (
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="flex items-end justify-between">
+            <div>
+              <p className="text-muted-foreground text-xs">Starting bid</p>
+              <p className="text-lg font-semibold">
+                {formatUsd(listing.startingBid)}
+              </p>
+            </div>
+            <p className="text-muted-foreground text-xs">{listing.format}</p>
+          </div>
+          {listing.reservePrice != null && (
+            <p className="text-muted-foreground text-xs">
+              Reserve: {formatUsd(listing.reservePrice)}
+            </p>
+          )}
+          {listing.buyItNowPrice != null && (
+            <p className="text-muted-foreground text-xs">
+              BIN: {formatUsd(listing.buyItNowPrice)}
+            </p>
+          )}
           <p className="text-muted-foreground text-xs">
-            BIN: {formatUsd(listing.buyItNowPrice)}
+            Created{" "}
+            {created.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            })}
           </p>
-        )}
-        <p className="text-muted-foreground text-xs">
-          Created{" "}
-          {created.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
-          })}
-        </p>
-      </CardContent>
-    </Card>
+          {isDraft && (
+            <div className="flex gap-2 pt-2">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setEditOpen(true)}
+              >
+                Edit
+              </Button>
+              <Button
+                size="sm"
+                onClick={() => submitMutation.mutate(listing.id)}
+                disabled={submitMutation.isPending}
+              >
+                {submitMutation.isPending ? "Submitting..." : "Submit for Publication"}
+              </Button>
+            </div>
+          )}
+          {submitMutation.isError && (
+            <p className="text-destructive text-xs" role="alert">
+              {submitMutation.error.message}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+      {editOpen && (
+        <EditDraftDialog
+          listing={listing}
+          onClose={() => setEditOpen(false)}
+        />
+      )}
+    </>
   );
 }
 
diff --git a/client/seller/src/listings/formSchemas.test.ts b/client/seller/src/listings/formSchemas.test.ts
new file mode 100644
index 0000000..fa40aac
--- /dev/null
+++ b/client/seller/src/listings/formSchemas.test.ts
@@ -0,0 +1,180 @@
+import { describe, expect, it } from "vitest";
+
+import { createDraftSchema, editDraftSchema } from "@/listings/formSchemas";
+
+describe("createDraftSchema", () => {
+  const validFlash = {
+    title: "Vintage Mechanical Keyboard",
+    format: "Flash" as const,
+    startingBid: "25",
+    reservePrice: "50",
+    buyItNowPrice: "100",
+    duration: "",
+    extendedBiddingEnabled: true,
+    extendedBiddingTriggerWindow: "00:00:30",
+    extendedBiddingExtension: "00:00:15",
+  };
+
+  const validTimed = {
+    title: "Vintage Folding Camera",
+    format: "Timed" as const,
+    startingBid: "40",
+    reservePrice: "",
+    buyItNowPrice: "80",
+    duration: "7.00:00:00",
+    extendedBiddingEnabled: false,
+    extendedBiddingTriggerWindow: "",
+    extendedBiddingExtension: "",
+  };
+
+  it("accepts a valid Flash listing with extended bidding", () => {
+    expect(() => createDraftSchema.parse(validFlash)).not.toThrow();
+  });
+
+  it("accepts a valid Timed listing without extended bidding", () => {
+    expect(() => createDraftSchema.parse(validTimed)).not.toThrow();
+  });
+
+  it("accepts a listing with no reserve or BIN", () => {
+    const minimal = {
+      ...validFlash,
+      reservePrice: "",
+      buyItNowPrice: "",
+      extendedBiddingEnabled: false,
+      extendedBiddingTriggerWindow: "",
+      extendedBiddingExtension: "",
+    };
+    expect(() => createDraftSchema.parse(minimal)).not.toThrow();
+  });
+
+  it("rejects empty title", () => {
+    const result = createDraftSchema.safeParse({ ...validFlash, title: "" });
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects empty starting bid", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      startingBid: "",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects non-positive starting bid", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      startingBid: "0",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects Timed listing without duration", () => {
+    const result = createDraftSchema.safeParse({
+      ...validTimed,
+      duration: "",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("accepts Flash listing without duration", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      duration: "",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects BIN below reserve", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      reservePrice: "100",
+      buyItNowPrice: "50",
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const binError = result.error.issues.find(
+        (i) => i.path[0] === "buyItNowPrice",
+      );
+      expect(binError).toBeDefined();
+    }
+  });
+
+  it("accepts BIN equal to reserve", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      reservePrice: "50",
+      buyItNowPrice: "50",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects missing trigger window when extended bidding enabled", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      extendedBiddingEnabled: true,
+      extendedBiddingTriggerWindow: "",
+      extendedBiddingExtension: "00:00:15",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects missing extension when extended bidding enabled", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      extendedBiddingEnabled: true,
+      extendedBiddingTriggerWindow: "00:00:30",
+      extendedBiddingExtension: "",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("ignores extended-bidding fields when disabled", () => {
+    const result = createDraftSchema.safeParse({
+      ...validFlash,
+      extendedBiddingEnabled: false,
+      extendedBiddingTriggerWindow: "",
+      extendedBiddingExtension: "",
+    });
+    expect(result.success).toBe(true);
+  });
+});
+
+describe("editDraftSchema", () => {
+  const validEdit = {
+    listingId: "0192f1a0-1111-7000-8000-000000000001",
+    title: "Updated Title",
+    reservePrice: "60",
+    buyItNowPrice: "120",
+  };
+
+  it("accepts a valid edit", () => {
+    expect(() => editDraftSchema.parse(validEdit)).not.toThrow();
+  });
+
+  it("accepts empty optional fields", () => {
+    const result = editDraftSchema.safeParse({
+      listingId: validEdit.listingId,
+      title: "",
+      reservePrice: "",
+      buyItNowPrice: "",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects BIN below reserve", () => {
+    const result = editDraftSchema.safeParse({
+      ...validEdit,
+      reservePrice: "100",
+      buyItNowPrice: "50",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects negative reserve price", () => {
+    const result = editDraftSchema.safeParse({
+      ...validEdit,
+      reservePrice: "-10",
+    });
+    expect(result.success).toBe(false);
+  });
+});
diff --git a/client/seller/src/listings/formSchemas.ts b/client/seller/src/listings/formSchemas.ts
new file mode 100644
index 0000000..9e35cd8
--- /dev/null
+++ b/client/seller/src/listings/formSchemas.ts
@@ -0,0 +1,157 @@
+import { z } from "zod";
+
+const DURATION_PRESETS = [
+  { label: "1 hour", value: "01:00:00" },
+  { label: "3 hours", value: "03:00:00" },
+  { label: "12 hours", value: "12:00:00" },
+  { label: "1 day", value: "1.00:00:00" },
+  { label: "3 days", value: "3.00:00:00" },
+  { label: "7 days", value: "7.00:00:00" },
+] as const;
+
+const EXTENDED_BIDDING_PRESETS = [
+  { label: "15 seconds", value: "00:00:15" },
+  { label: "30 seconds", value: "00:00:30" },
+  { label: "1 minute", value: "00:01:00" },
+  { label: "2 minutes", value: "00:02:00" },
+  { label: "5 minutes", value: "00:05:00" },
+] as const;
+
+export { DURATION_PRESETS, EXTENDED_BIDDING_PRESETS };
+
+export const createDraftSchema = z
+  .object({
+    title: z.string().min(1, "Title is required"),
+    format: z.enum(["Flash", "Timed"]),
+    startingBid: z.string().min(1, "Starting bid is required"),
+    reservePrice: z.string(),
+    buyItNowPrice: z.string(),
+    duration: z.string(),
+    extendedBiddingEnabled: z.boolean(),
+    extendedBiddingTriggerWindow: z.string(),
+    extendedBiddingExtension: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    const startingBid = Number(data.startingBid);
+    if (!Number.isFinite(startingBid) || startingBid <= 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Starting bid must be a positive number",
+        path: ["startingBid"],
+      });
+    }
+
+    if (data.reservePrice !== "") {
+      const reserve = Number(data.reservePrice);
+      if (!Number.isFinite(reserve) || reserve <= 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Reserve price must be a positive number",
+          path: ["reservePrice"],
+        });
+      }
+    }
+
+    if (data.buyItNowPrice !== "") {
+      const bin = Number(data.buyItNowPrice);
+      if (!Number.isFinite(bin) || bin <= 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Buy It Now price must be a positive number",
+          path: ["buyItNowPrice"],
+        });
+      }
+    }
+
+    if (data.format === "Timed" && !data.duration) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Duration is required for Timed listings",
+        path: ["duration"],
+      });
+    }
+
+    const reserve = data.reservePrice ? Number(data.reservePrice) : undefined;
+    const bin = data.buyItNowPrice ? Number(data.buyItNowPrice) : undefined;
+    if (
+      reserve !== undefined &&
+      bin !== undefined &&
+      Number.isFinite(reserve) &&
+      Number.isFinite(bin) &&
+      bin < reserve
+    ) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Buy It Now price must be at least the reserve price",
+        path: ["buyItNowPrice"],
+      });
+    }
+
+    if (data.extendedBiddingEnabled) {
+      if (!data.extendedBiddingTriggerWindow) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Trigger window is required when extended bidding is enabled",
+          path: ["extendedBiddingTriggerWindow"],
+        });
+      }
+      if (!data.extendedBiddingExtension) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Extension is required when extended bidding is enabled",
+          path: ["extendedBiddingExtension"],
+        });
+      }
+    }
+  });
+
+export type CreateDraftFormValues = z.infer<typeof createDraftSchema>;
+
+export const editDraftSchema = z
+  .object({
+    listingId: z.string(),
+    title: z.string(),
+    reservePrice: z.string(),
+    buyItNowPrice: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.reservePrice !== "") {
+      const reserve = Number(data.reservePrice);
+      if (!Number.isFinite(reserve) || reserve <= 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Reserve price must be a positive number",
+          path: ["reservePrice"],
+        });
+      }
+    }
+
+    if (data.buyItNowPrice !== "") {
+      const bin = Number(data.buyItNowPrice);
+      if (!Number.isFinite(bin) || bin <= 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Buy It Now price must be a positive number",
+          path: ["buyItNowPrice"],
+        });
+      }
+    }
+
+    const reserve = data.reservePrice ? Number(data.reservePrice) : undefined;
+    const bin = data.buyItNowPrice ? Number(data.buyItNowPrice) : undefined;
+    if (
+      reserve !== undefined &&
+      bin !== undefined &&
+      Number.isFinite(reserve) &&
+      Number.isFinite(bin) &&
+      bin < reserve
+    ) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Buy It Now price must be at least the reserve price",
+        path: ["buyItNowPrice"],
+      });
+    }
+  });
+
+export type EditDraftFormValues = z.infer<typeof editDraftSchema>;
diff --git a/client/seller/src/listings/mutations.test.ts b/client/seller/src/listings/mutations.test.ts
new file mode 100644
index 0000000..1a914f8
--- /dev/null
+++ b/client/seller/src/listings/mutations.test.ts
@@ -0,0 +1,173 @@
+import { describe, expect, it } from "vitest";
+
+import type { CreateDraftFormValues, EditDraftFormValues } from "./formSchemas";
+
+function toNumber(value: string | undefined): number | null {
+  if (!value) return null;
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+
+function toCreateDraftPayload(values: CreateDraftFormValues, sellerId: string) {
+  return {
+    sellerId,
+    title: values.title,
+    format: values.format,
+    startingBid: Number(values.startingBid),
+    reservePrice: toNumber(values.reservePrice),
+    buyItNowPrice: toNumber(values.buyItNowPrice),
+    duration:
+      values.format === "Timed" && values.duration ? values.duration : null,
+    extendedBiddingEnabled: values.extendedBiddingEnabled,
+    extendedBiddingTriggerWindow: values.extendedBiddingEnabled
+      ? (values.extendedBiddingTriggerWindow || null)
+      : null,
+    extendedBiddingExtension: values.extendedBiddingEnabled
+      ? (values.extendedBiddingExtension || null)
+      : null,
+  };
+}
+
+function toEditDraftPayload(values: EditDraftFormValues) {
+  return {
+    listingId: values.listingId,
+    title: values.title && values.title.length > 0 ? values.title : null,
+    reservePrice: toNumber(values.reservePrice),
+    buyItNowPrice: toNumber(values.buyItNowPrice),
+  };
+}
+
+describe("toCreateDraftPayload", () => {
+  it("converts Flash form values to the backend wire shape", () => {
+    const form: CreateDraftFormValues = {
+      title: "Vintage Mechanical Keyboard",
+      format: "Flash",
+      startingBid: "25",
+      reservePrice: "50",
+      buyItNowPrice: "100",
+      duration: "",
+      extendedBiddingEnabled: true,
+      extendedBiddingTriggerWindow: "00:00:30",
+      extendedBiddingExtension: "00:00:15",
+    };
+
+    const payload = toCreateDraftPayload(form, "seller-123");
+
+    expect(payload).toEqual({
+      sellerId: "seller-123",
+      title: "Vintage Mechanical Keyboard",
+      format: "Flash",
+      startingBid: 25,
+      reservePrice: 50,
+      buyItNowPrice: 100,
+      duration: null,
+      extendedBiddingEnabled: true,
+      extendedBiddingTriggerWindow: "00:00:30",
+      extendedBiddingExtension: "00:00:15",
+    });
+  });
+
+  it("converts Timed form values with duration", () => {
+    const form: CreateDraftFormValues = {
+      title: "Vintage Folding Camera",
+      format: "Timed",
+      startingBid: "40",
+      reservePrice: "",
+      buyItNowPrice: "80",
+      duration: "7.00:00:00",
+      extendedBiddingEnabled: false,
+      extendedBiddingTriggerWindow: "",
+      extendedBiddingExtension: "",
+    };
+
+    const payload = toCreateDraftPayload(form, "seller-456");
+
+    expect(payload).toEqual({
+      sellerId: "seller-456",
+      title: "Vintage Folding Camera",
+      format: "Timed",
+      startingBid: 40,
+      reservePrice: null,
+      buyItNowPrice: 80,
+      duration: "7.00:00:00",
+      extendedBiddingEnabled: false,
+      extendedBiddingTriggerWindow: null,
+      extendedBiddingExtension: null,
+    });
+  });
+
+  it("nullifies extended-bidding fields when disabled", () => {
+    const form: CreateDraftFormValues = {
+      title: "Test",
+      format: "Flash",
+      startingBid: "10",
+      reservePrice: "",
+      buyItNowPrice: "",
+      duration: "",
+      extendedBiddingEnabled: false,
+      extendedBiddingTriggerWindow: "00:00:30",
+      extendedBiddingExtension: "00:00:15",
+    };
+
+    const payload = toCreateDraftPayload(form, "seller-789");
+
+    expect(payload.extendedBiddingTriggerWindow).toBeNull();
+    expect(payload.extendedBiddingExtension).toBeNull();
+  });
+
+  it("nullifies duration for Flash format even if set", () => {
+    const form: CreateDraftFormValues = {
+      title: "Test",
+      format: "Flash",
+      startingBid: "10",
+      reservePrice: "",
+      buyItNowPrice: "",
+      duration: "01:00:00",
+      extendedBiddingEnabled: false,
+      extendedBiddingTriggerWindow: "",
+      extendedBiddingExtension: "",
+    };
+
+    const payload = toCreateDraftPayload(form, "seller-000");
+
+    expect(payload.duration).toBeNull();
+  });
+});
+
+describe("toEditDraftPayload", () => {
+  it("converts edit form values to the backend wire shape", () => {
+    const form: EditDraftFormValues = {
+      listingId: "listing-123",
+      title: "Updated Title",
+      reservePrice: "60",
+      buyItNowPrice: "120",
+    };
+
+    const payload = toEditDraftPayload(form);
+
+    expect(payload).toEqual({
+      listingId: "listing-123",
+      title: "Updated Title",
+      reservePrice: 60,
+      buyItNowPrice: 120,
+    });
+  });
+
+  it("nullifies empty string fields", () => {
+    const form: EditDraftFormValues = {
+      listingId: "listing-456",
+      title: "",
+      reservePrice: "",
+      buyItNowPrice: "",
+    };
+
+    const payload = toEditDraftPayload(form);
+
+    expect(payload).toEqual({
+      listingId: "listing-456",
+      title: null,
+      reservePrice: null,
+      buyItNowPrice: null,
+    });
+  });
+});
diff --git a/client/seller/src/listings/mutations.ts b/client/seller/src/listings/mutations.ts
new file mode 100644
index 0000000..71155ca
--- /dev/null
+++ b/client/seller/src/listings/mutations.ts
@@ -0,0 +1,146 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import type { CreateDraftFormValues, EditDraftFormValues } from "./formSchemas";
+
+interface CreateDraftPayload {
+  sellerId: string;
+  title: string;
+  format: string;
+  startingBid: number;
+  reservePrice: number | null;
+  buyItNowPrice: number | null;
+  duration: string | null;
+  extendedBiddingEnabled: boolean;
+  extendedBiddingTriggerWindow: string | null;
+  extendedBiddingExtension: string | null;
+}
+
+function toNumber(value: string | undefined): number | null {
+  if (!value) return null;
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+
+function toCreateDraftPayload(
+  values: CreateDraftFormValues,
+  sellerId: string,
+): CreateDraftPayload {
+  return {
+    sellerId,
+    title: values.title,
+    format: values.format,
+    startingBid: Number(values.startingBid),
+    reservePrice: toNumber(values.reservePrice),
+    buyItNowPrice: toNumber(values.buyItNowPrice),
+    duration:
+      values.format === "Timed" && values.duration ? values.duration : null,
+    extendedBiddingEnabled: values.extendedBiddingEnabled,
+    extendedBiddingTriggerWindow: values.extendedBiddingEnabled
+      ? (values.extendedBiddingTriggerWindow || null)
+      : null,
+    extendedBiddingExtension: values.extendedBiddingEnabled
+      ? (values.extendedBiddingExtension || null)
+      : null,
+  };
+}
+
+export function useCreateDraft(sellerId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (values: CreateDraftFormValues) => {
+      const payload = toCreateDraftPayload(values, sellerId);
+      const response = await fetch("/api/listings/draft", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        throw new Error(
+          text || `Create draft failed with ${response.status}.`,
+        );
+      }
+      return response.headers.get("Location");
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({
+        queryKey: ["sellerListings", sellerId],
+      });
+    },
+  });
+}
+
+interface EditDraftPayload {
+  listingId: string;
+  title: string | null;
+  reservePrice: number | null;
+  buyItNowPrice: number | null;
+}
+
+function toEditDraftPayload(values: EditDraftFormValues): EditDraftPayload {
+  return {
+    listingId: values.listingId,
+    title: values.title && values.title.length > 0 ? values.title : null,
+    reservePrice: toNumber(values.reservePrice),
+    buyItNowPrice: toNumber(values.buyItNowPrice),
+  };
+}
+
+export function useEditDraft(sellerId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (values: EditDraftFormValues) => {
+      const payload = toEditDraftPayload(values);
+      const response = await fetch("/api/selling/listings/draft", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        throw new Error(
+          text || `Update draft failed with ${response.status}.`,
+        );
+      }
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({
+        queryKey: ["sellerListings", sellerId],
+      });
+    },
+  });
+}
+
+export function useSubmitListing(sellerId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (listingId: string) => {
+      const response = await fetch("/api/selling/listings/submit", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({ listingId, sellerId }),
+      });
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        throw new Error(text || `Submit failed with ${response.status}.`);
+      }
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({
+        queryKey: ["sellerListings", sellerId],
+      });
+    },
+  });
+}
diff --git a/client/seller/src/router.tsx b/client/seller/src/router.tsx
index 7b32ec3..74a9cdd 100644
--- a/client/seller/src/router.tsx
+++ b/client/seller/src/router.tsx
@@ -8,6 +8,7 @@ import { AppShell } from "@/components/AppShell";
 import { RouteNotFound } from "@/components/RouteNotFound";
 import { HomePage } from "@/pages/HomePage";
 import { ListingsPage } from "@/listings/ListingsPage";
+import { CreateListingPage } from "@/listings/CreateListingPage";
 
 const rootRoute = createRootRoute({
   component: AppShell,
@@ -26,7 +27,17 @@ const listingsRoute = createRoute({
   component: ListingsPage,
 });
 
-const routeTree = rootRoute.addChildren([homeRoute, listingsRoute]);
+const createListingRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/listings/new",
+  component: CreateListingPage,
+});
+
+const routeTree = rootRoute.addChildren([
+  homeRoute,
+  listingsRoute,
+  createListingRoute,
+]);
 
 export const router = createRouter({
   routeTree,
diff --git a/docs/prompts/implementations/M9-S4b-seller-listing-management.md b/docs/prompts/implementations/M9-S4b-seller-listing-management.md
new file mode 100644
index 0000000..a589410
--- /dev/null
+++ b/docs/prompts/implementations/M9-S4b-seller-listing-management.md
@@ -0,0 +1,150 @@
+# M9-S4b: Seller SPA — Listing Management Write Operations
+
+**Milestone:** M9 ([Seller Console](../../milestones/M9-seller-console.md))
+**Slice:** S4b of M9 (second frontend-heavy seller slice; the write half of the S4 split)
+**Narrative:** `docs/narratives/004-seller-publishes-and-withdraws-listing.md` (Moments 2–4 — draft, publish, camera fast-path)
+**Agent:** @PSA
+**Estimated scope:** one PR, ~25-30 files (form components, mutation hooks, schemas, shadcn/ui additions, tests, retro)
+
+---
+
+## Preconditions
+
+This prompt assumes M9-S4a shipped (PR #107, `fa1e319`). The seller SPA has a working read surface: registration flow, My Listings dashboard, session context with `isRegisteredSeller`, Zod schema for `SellerListingSummary`, TanStack Query hook. S4b adds the write operations — create-draft form, edit-draft, and submit-for-publication — that populate the dashboard S4a built.
+
+## Goal
+
+Wire the three listing write operations into the seller SPA: a 10-field create-draft form at `/listings/new` with `react-hook-form` + Zod validation and Flash/Timed conditional visibility; an edit-draft dialog on Draft-status listings; and a submit-for-publication action button. After this slice, a seller can create, edit, and publish listings entirely through the UI — the complete write surface for narrative 004 Moments 2–4.
+
+## Context to load
+
+| File | Purpose |
+|---|---|
+| `docs/milestones/M9-seller-console.md` | Authoritative for scope. §7 S4 row. |
+| `CLAUDE.md` | Routing layer, global conventions, §Frontend. |
+| `.claude/skills/frontend-slice-discipline/SKILL.md` | **Required** — verification ladder, backend-exception discipline, live-smoke rules. |
+| `.claude/skills/react-hook-form/SKILL.md` | **Required** — form patterns, Zod resolver integration. |
+| `docs/narratives/004-seller-publishes-and-withdraws-listing.md` | Moments 2–4 are the story this slice renders. |
+| `client/seller/src/` | The S4a foundation to build on. |
+| `client/bidder/src/bidding/BidPanel.tsx` | Form + mutation precedent. |
+| `src/CritterBids.Selling/CreateDraftListing.cs` | Backend handler (10 fields, ValidateAsync). |
+| `src/CritterBids.Selling/UpdateDraftListing.cs` + `UpdateDraftListingEndpoint.cs` | Partial update shape: listingId, title?, reservePrice?, buyItNowPrice?. |
+| `src/CritterBids.Selling/SubmitListing.cs` + `SubmitListingEndpoint.cs` | Submit command shape: listingId, sellerId. |
+
+## In scope
+
+### S4b-1: Install `react-hook-form` + `@hookform/resolvers`
+
+- `npm install react-hook-form @hookform/resolvers --workspace @critterbids/seller`
+- These packages are not present anywhere in the workspace; this is the first consumer.
+
+### S4b-2: shadcn/ui component additions
+
+- **Input** — copy from `client/bidder/src/components/ui/input.tsx` (the bid-amount field precedent)
+- **Label** — standard shadcn/ui label primitive for accessible form fields
+- **Select** — shadcn/ui select for the format dropdown (Flash / Timed)
+- **Checkbox** — shadcn/ui checkbox for the extended-bidding toggle
+
+### S4b-3: Create-draft form at `/listings/new`
+
+- **Route:** Add `/listings/new` to the seller router.
+- **Zod validation schema:** `createDraftSchema` for the command shape:
+  - `title` — required string, non-empty
+  - `format` — enum `"Flash" | "Timed"`
+  - `startingBid` — required positive number
+  - `reservePrice` — optional positive number
+  - `buyItNowPrice` — optional positive number (must be >= reservePrice when both set)
+  - `duration` — required for Timed (HH:MM:SS string), hidden/null for Flash
+  - `extendedBiddingEnabled` — boolean, default false
+  - `extendedBiddingTriggerWindow` — required when extendedBiddingEnabled (HH:MM:SS string)
+  - `extendedBiddingExtension` — required when extendedBiddingEnabled (HH:MM:SS string)
+- **Conditional field visibility:**
+  - Duration field: visible and required when format is "Timed"; hidden when "Flash"
+  - Extended-bidding fields (triggerWindow, extension): visible when `extendedBiddingEnabled` is checked; hidden otherwise
+- **Form wiring:** `react-hook-form` with `@hookform/resolvers/zod`, `useForm()`, controlled components.
+- **Mutation hook:** `useCreateDraft(sellerId)` — wraps `POST /api/listings/draft` with the session's sellerId injected. On success: invalidate `sellerListings` query and navigate to `/listings`.
+- **Navigation:** "Create Listing" button on the ListingsPage (visible alongside the listings grid or empty state).
+
+### S4b-4: Edit-draft dialog
+
+- **Trigger:** "Edit" button on Draft-status listing cards on the ListingsPage.
+- **Dialog/inline form:** Show the three mutable fields (title, reservePrice, buyItNowPrice). Pre-populated from the listing's current values.
+- **Zod schema:** `editDraftSchema` — title (optional string), reservePrice (optional number), buyItNowPrice (optional number). BuyItNowPrice must be >= ReservePrice when both are provided.
+- **Mutation hook:** `useEditDraft()` — wraps `PUT /api/selling/listings/draft`. On success: invalidate `sellerListings` query and close the dialog.
+- **State guard:** Only Draft-status listings show the Edit button.
+
+### S4b-5: Submit-for-publication action
+
+- **Trigger:** "Submit for Publication" button on Draft-status listing cards on the ListingsPage.
+- **Mutation hook:** `useSubmitListing()` — wraps `POST /api/selling/listings/submit` with `{ listingId, sellerId }`. On success: invalidate `sellerListings` query (status changes to Published via auto-approval chain).
+- **Confirmation:** Inline "Are you sure?" or direct action (lean: direct, with pending state shown).
+- **State guard:** Only Draft-status listings show the Submit button.
+
+### S4b-6: Tests
+
+- **Create-draft form schema tests:** Validate the Zod schema for all validation rules — required fields, conditional duration, extended-bidding conditional required, BIN >= reserve.
+- **Create-draft form rendering test:** Render the form, verify all 10 fields present for Timed + extended bidding; verify conditional visibility toggles.
+- **Edit-draft tests:** Render edit form, verify pre-populated values, verify mutation on submit.
+- **Submit mutation test:** Verify the submit button triggers the mutation, verify listing query invalidation.
+- **ListingsPage action buttons test:** Verify Draft listings show Edit + Submit buttons; non-Draft listings do not.
+
+### S4b-7: Live smoke
+
+- Run `dotnet run --project src/CritterBids.AppHost --launch-profile http`
+- Open the seller SPA at `http://localhost:5175/seller/`
+- Verify: register → create draft → verify in listings → edit draft → submit → verify Published status
+- Record smoke findings in the retro
+
+### S4b-8: Retrospective
+
+- `docs/retrospectives/M9-S4b-seller-listing-management-retrospective.md`
+
+## Explicitly out of scope
+
+- **Withdraw action from the seller console.** `WithdrawListing` is `[Authorize(Policy = "StaffOnly")]` per M7-S6 / ADR-024. The seller sees Withdrawn *status* but cannot trigger it.
+- **Listing detail page / individual listing view.** If warranted, a future slice. S4b is the write surface, not a detail read view.
+- **Live auction observation.** M9-S5 scope.
+- **Obligation fulfillment.** M9-S6 scope.
+- **Backend changes.** Zero `.cs` touches. All three endpoints exist and are tested (M9-S2, PR #105).
+- **`@critterbids/shared` changes.** The create-draft schema is seller-specific.
+- **`docs/STATUS.md` regeneration.** Deferred to M9-S7.
+
+## Conventions to pin or follow
+
+- **Frontend-slice-discipline** — all four rules apply. Rule 1: read backend shapes before writing client code (done above). Rule 2: render the lived subset. Rule 3: verify installed toolchain. Rule 4: live smoke.
+- **react-hook-form skill** — Zod resolver, controlled components, conditional field registration.
+- **TanStack Query mutation pattern:** `useMutation` with `onSuccess` that invalidates the listings query via `queryClient.invalidateQueries`.
+- **Zod at the wire boundary:** Parse/validate at form submission; the mutation sends the validated data.
+- **shadcn/ui components are locally owned:** Each SPA copies the components it needs.
+- **TimeSpan serialization:** The backend accepts ISO 8601 duration format (e.g. `"00:30:00"` for 30 minutes). The form collects human-readable input and converts to this format before submission.
+
+## Spec delta
+
+Per ADR 020: this slice has **moderate spec consequence**. Narrative 004 Moments 2–4 (GreyOwl12 drafts the keyboard, the keyboard is published, the camera is published) gain concrete frontend implementations. The seller can now perform the full listing-creation-through-publication flow through the UI. No narrative Document History amendment needed (the narrative already covers these Moments fully). The milestone doc's exit criteria advance: listing management write surface is complete.
+
+## Acceptance criteria
+
+- [ ] `react-hook-form` and `@hookform/resolvers` installed in `@critterbids/seller`
+- [ ] shadcn/ui Input, Label, Select (or equivalent), and Checkbox components present
+- [ ] Create-draft form at `/listings/new` with all 10 fields
+- [ ] Duration field: required + visible for Timed, hidden for Flash
+- [ ] Extended-bidding fields: visible when checkbox checked, hidden otherwise
+- [ ] Zod validation: title required, startingBid positive, BIN >= reserve, conditional duration/extended-bidding
+- [ ] Create-draft mutation calls `POST /api/listings/draft` and navigates to `/listings` on success
+- [ ] Edit-draft on Draft-status listings: shows the 3 mutable fields, calls `PUT /api/selling/listings/draft`
+- [ ] Submit-for-publication on Draft-status listings: calls `POST /api/selling/listings/submit`
+- [ ] Action buttons (Edit, Submit) appear only on Draft-status listings
+- [ ] Listings query invalidated after each successful mutation (create, edit, submit)
+- [ ] "Create Listing" navigation from the listings page
+- [ ] `npm run build` succeeds for seller app (TypeScript strict, no errors)
+- [ ] Existing frontend baselines preserved: bidder 25 tests, ops 47 tests
+- [ ] Seller Vitest count grows from 20
+- [ ] Live smoke against Aspire stack recorded in retro (or explicitly marked unchecked per M8-S4 precedent)
+- [ ] No backend changes (zero `.cs` files touched)
+- [ ] No commit to `main`; one PR off `main`; no `Co-Authored-By` trailer
+- [ ] `docs/retrospectives/M9-S4b-seller-listing-management-retrospective.md` written
+
+## Open questions
+
+- **Duration input UX:** Should the form collect duration as separate hours/minutes fields, a single "HH:MM:SS" text input, or a dropdown with common presets (1 hour, 3 hours, 1 day, 3 days, 7 days)? Lean: dropdown with presets — simpler UX, matches the narrative's "7 days" duration for the camera listing, avoids free-form TimeSpan parsing.
+- **Edit-draft dialog vs inline editing:** Should editing use a modal dialog overlaying the listing card, or inline expansion on the card itself? Lean: dialog (modal) — cleaner separation, pre-population is straightforward, consistent with form patterns.
diff --git a/docs/retrospectives/M9-S4b-seller-listing-management-retrospective.md b/docs/retrospectives/M9-S4b-seller-listing-management-retrospective.md
new file mode 100644
index 0000000..38edead
--- /dev/null
+++ b/docs/retrospectives/M9-S4b-seller-listing-management-retrospective.md
@@ -0,0 +1,150 @@
+# M9-S4b: Seller SPA — Listing Management Write Operations — Retrospective
+
+**Date:** 2026-06-13
+**Milestone:** M9 — Seller Console
+**Slice:** S4b — Listing management write operations (create-draft, edit-draft, submit-for-publication)
+**Agent:** @PSA
+**Prompt:** `docs/prompts/implementations/M9-S4b-seller-listing-management.md`
+
+## Baseline
+
+- **.NET build:** 0 errors, 2 CS0108 warnings (saga Version hiding — baseline since M8-S7)
+- **.NET tests:** 326 all pass (10 projects) — untouched this slice (zero `.cs` changes)
+- **Frontend Vitest:** 92 (bidder 25, ops 47, seller 20)
+- **Playwright e2e:** 1 (local-only, two-bidder bid-war)
+- **npm workspace members:** 5 (bidder, ops, seller, shared, e2e)
+
+## Items completed
+
+| Item | Description |
+|------|-------------|
+| S4b-1 | `react-hook-form` + `@hookform/resolvers` installed in `@critterbids/seller` — first consumer in the workspace |
+| S4b-2 | shadcn/ui components added — Input, Label, Select, Checkbox (copied from bidder/custom) |
+| S4b-3 | Create-draft form at `/listings/new` — 10 fields, Zod validation, Flash/Timed conditional visibility, extended-bidding toggle |
+| S4b-4 | Edit-draft dialog on Draft-status listings — 3 mutable fields (title, reservePrice, buyItNowPrice), modal overlay |
+| S4b-5 | Submit-for-publication button on Draft-status listings — calls `POST /api/selling/listings/submit` |
+| S4b-6 | Mutation hooks — `useCreateDraft`, `useEditDraft`, `useSubmitListing` with TanStack Query invalidation |
+| S4b-7 | Tests — 35 new tests: 17 form schema, 7 create-listing page, 4 mutation payload, 7 listings page actions |
+| S4b-8 | Retrospective — this file |
+
+## S4b-1: react-hook-form + @hookform/resolvers
+
+First form library in the CritterBids workspace. `react-hook-form` v7+ with `@hookform/resolvers/zod` for schema validation. Three packages added to `@critterbids/seller` only — the bidder and ops apps have no form surfaces that need it.
+
+## S4b-3: Create-draft form — the form-to-wire-contract boundary
+
+The most significant design decision in this slice was the form value typing strategy. The Zod schema validates **string-typed** form values (matching what HTML inputs produce), and the mutation hook's `toCreateDraftPayload` function converts to the backend's typed JSON format at the mutation boundary.
+
+**Why not `z.coerce.number()`?** The `@hookform/resolvers/zod` resolver compares Zod schema input and output types against `useForm`'s generic parameter. `z.coerce.number()` creates an `unknown` input type that doesn't match the output `number` — a TypeScript error at `resolver` assignment. The string-typed approach avoids this entirely.
+
+### Conditional field visibility
+
+Two conditional groups driven by `useForm.watch()`:
+1. **Duration field:** Required and visible for Timed format; hidden for Flash (matches narrative 004: keyboard is Flash with null duration, camera is Timed with 7-day duration)
+2. **Extended-bidding fields:** Visible when `extendedBiddingEnabled` checkbox is checked; hidden otherwise
+
+`shouldUnregister: true` ensures hidden fields don't carry stale values — when a user switches from Timed to Flash, the duration value is automatically unregistered.
+
+### Duration presets
+
+The create-draft form uses a **dropdown with presets** (1 hour, 3 hours, 12 hours, 1 day, 3 days, 7 days) rather than free-form TimeSpan input. This matches narrative 004's camera listing ("7 days") and avoids ISO 8601 duration parsing UX complexity. The presets use .NET's `TimeSpan` string format (e.g. `"7.00:00:00"` for 7 days).
+
+## S4b-4: Edit-draft dialog
+
+A modal dialog overlaying the listing card. Only Draft-status listings show the Edit button. Three mutable fields are pre-populated from the listing's current values — `title`, `reservePrice`, `buyItNowPrice`. Format, startingBid, duration, and extended-bidding fields are immutable after creation (per the `UpdateDraftListing` command shape which only accepts those three fields).
+
+## S4b-5: Submit-for-publication
+
+Direct action button — no confirmation dialog. The backend's auto-approval chain (ListingSubmitted → ListingApproved → ListingPublished) means the listing transitions to Published immediately. The listings query is invalidated on success, so the dashboard re-fetches and shows the updated status.
+
+## Test results
+
+| Phase | Seller Tests | Result |
+|-------|-------------|--------|
+| Baseline | 20 | Pass |
+| After form schema tests | 37 | Pass |
+| After create-listing page tests | 44 | Pass |
+| After mutation payload tests | 48 | Pass |
+| After listings page action tests | 55 | Pass |
+| Final (all workspaces) | bidder 25 + ops 47 + seller 55 = 127 | Pass |
+
+## Build state at session close
+
+- **Build errors:** 0 (seller `tsc --noEmit` + `vite build` clean)
+- **Build warnings:** 2 SignalR `INVALID_ANNOTATION` rolldown warnings (third-party, existing baseline)
+- **Backend .NET build:** untouched (zero `.cs` changes) — 0 errors, 2 CS0108 warnings (baseline)
+- **Backend .NET tests:** untouched (326 pass, 10 projects)
+- **Seller Vitest:** 55 (was 20; +35 new)
+- **Bidder/ops Vitest:** 25/47 (unchanged)
+
+Negative-space assertions:
+- `.cs` files modified: 0
+- Backend test files modified: 0
+- `@critterbids/shared` files modified: 0
+- Bidder/ops source files modified: 0
+
+## Key learnings
+
+1. **`z.coerce.number()` + `@hookform/resolvers/zod` type mismatch is a known pattern.** Zod's coerce transforms change the input type to `unknown`, which doesn't match react-hook-form's form value type. The solution is string-typed schemas with manual conversion at the mutation boundary. This is actually a cleaner separation of concerns — the schema owns form validation, the mutation owns wire-contract conformance.
+
+2. **`shouldUnregister: true` is the right call for conditional fields.** Without it, switching from Timed to Flash would leave a stale duration value in the form state that passes through to the mutation. With it, hidden fields are automatically cleared, and the mutation function nullifies Flash duration regardless (belt-and-suspenders).
+
+3. **Duration presets vs free-form input.** Free-form TimeSpan parsing would require educating users on ISO 8601 duration format (`.NET's "d.HH:MM:SS"`, not ISO 8601's `"P7D"`). Presets eliminate this entirely and cover the realistic auction duration range. The narrative's "7 days" maps directly to the `"7.00:00:00"` preset value.
+
+4. **Mutation payload tests verify the wire contract independently of jsdom.** The `toCreateDraftPayload` and `toEditDraftPayload` functions are pure transformations from form values to API payloads — testable without DOM rendering. These tests verify the contract the live smoke will exercise: string-to-number conversion, null vs empty string handling, conditional field nullification.
+
+## Findings against narrative
+
+Narrative 004 Moments 2–4 implemented faithfully:
+- **Moment 2** (GreyOwl12 drafts the keyboard): the create-draft form covers all 10 listing-time fields, including Flash format (null duration), extended bidding enabled (30s trigger, 15s extension)
+- **Moment 3** (keyboard published): the Submit for Publication button triggers the auto-approval chain
+- **Moment 4** (camera published): the Timed format with 7-day duration is supported via the duration presets dropdown
+
+No `narrative-update`, `workshop-update`, `code-update`, or `document-as-intentional` findings.
+
+## Spec delta — landed?
+
+Prompt declared moderate spec consequence: narrative 004 Moments 2–4 gain frontend implementations. The seller can now perform the full listing-creation-through-publication flow through the UI — create a Flash or Timed draft with all listing-time fields, edit the mutable fields, and submit for auto-approval publication. The milestone doc's exit criteria advance: the listing management write surface is complete.
+
+## Verification checklist
+
+- [x] `react-hook-form` and `@hookform/resolvers` installed in `@critterbids/seller`
+- [x] shadcn/ui Input, Label, Select, and Checkbox components present in `client/seller/src/components/ui/`
+- [x] Create-draft form at `/listings/new` with all 10 fields
+- [x] Duration field: required + visible for Timed, hidden for Flash
+- [x] Extended-bidding fields: visible when checkbox checked, hidden otherwise
+- [x] Zod validation: title required, startingBid positive, BIN >= reserve, conditional duration/extended-bidding
+- [x] Create-draft mutation calls `POST /api/listings/draft` and navigates to `/listings` on success
+- [x] Edit-draft on Draft-status listings: shows 3 mutable fields, calls `PUT /api/selling/listings/draft`
+- [x] Submit-for-publication on Draft-status listings: calls `POST /api/selling/listings/submit`
+- [x] Action buttons (Edit, Submit) appear only on Draft-status listings
+- [x] Listings query invalidated after each successful mutation (create, edit, submit)
+- [x] "Create Listing" navigation from the listings page
+- [x] `npm run build` succeeds for seller app (TypeScript strict, no errors)
+- [x] Existing frontend baselines preserved: bidder 25, ops 47
+- [x] Seller Vitest count grown from 20 to 55
+- [x] Live smoke against Aspire stack — **HTTP smoke complete**: session → register → create Flash draft (keyboard) → query (1 Draft) → edit (title+reserve) → verify edit → submit → verify Published → create Timed draft (camera, 7-day duration) → submit camera → verify (2 Published). All three write endpoints exercised with both Flash and Timed formats. Browser smoke unchecked (Chrome not installed, admin-install required; per M8-S4 precedent)
+- [x] No backend changes (zero `.cs` files touched)
+- [x] No commit to `main`; feature branch `m9-s4b-seller-listing-management`; no `Co-Authored-By` trailer
+- [x] This retrospective written with `**Prompt:**` header and `## Spec delta -- landed?` paragraph
+
+## What remains / next session should verify
+
+### In scope for M9, deferred to later slices
+
+- **Live auction observation:** M9-S5 — BiddingHub connection, real-time bid feed on seller's listings
+- **Obligation fulfillment:** M9-S6 — obligation tracker, provide-tracking form
+- **Browser smoke:** Blocked by Chrome admin-install; verify when available (M9-S7 e2e slice)
+- **STATUS.md regeneration:** M9-S7
+
+### Out of scope, tracked elsewhere
+
+- WithdrawListing from seller console: requires seller-facing (anonymous) withdraw endpoint — out of M9 scope (staff action at MVP per ADR-024)
+- Cache-bridge burst-final hardening (deferred from M9-S3 to M9-S5/S7)
+- Extended-bidding e2e banner assert (M9-S7)
+
+---
+
+## Document History
+
+- **v0.1** (2026-06-13): Initial authoring. Create-draft form (10 fields, conditional visibility, Zod validation, react-hook-form), edit-draft dialog (3 mutable fields, modal), submit-for-publication button. 35 new tests. Zero backend changes. react-hook-form first consumer in workspace. String-typed schema approach with mutation-boundary conversion established as pattern for future forms.