fix(report): improve form validation and user feedback (Closes #607, #608)

e2e/smoke/machines-crud.spec.ts

@@ -109,5 +109,34 @@ test.describe("Machines CRUD", () => {
     await expect(page.getByText("Bear Kick opto not working")).toBeVisible();
   });
 
+  test("should display machine owner to all logged-in users", async ({
+    page,
+  }) => {
+    // Navigate to a machine detail page
+    await page.goto(`/m/${seededMachines.medievalMadness.initials}`);
+
+    // Machine Information card should be visible
+    await expect(
+      page.getByRole("heading", { name: "Machine Information" })
+    ).toBeVisible();
+
+    // As a member (default login), owner should be displayed but read-only
+    const ownerDisplay = page.getByTestId("owner-display");
+    await expect(ownerDisplay).toBeVisible();
+
+    // Verify owner label is present
+    await expect(page.getByText("Machine Owner")).toBeVisible();
+
+    // Verify owner name is shown (Admin User owns all seeded machines)
+    await expect(page.getByText("Admin User")).toBeVisible();
+
+    // Verify the help text is shown
+    await expect(
+      page.getByText(
+        "The owner receives notifications for new issues on this machine."
+      )
+    ).toBeVisible();
+  });
+
   // Empty state test (requires creation) moved to integration/full suite
 });

src/app/(app)/m/[initials]/update-machine-form.tsx

@@ -21,6 +21,17 @@ interface UpdateMachineFormProps {
     initials: string;
     ownerId: string | null;
     invitedOwnerId: string | null;
+    owner?: {
+      id: string;
+      name: string;
+      avatarUrl?: string | null;
+      email?: string;
+    } | null;
+    invitedOwner?: {
+      id: string;
+      name: string;
+      email?: string;
+    } | null;
   };
   allUsers: UnifiedUser[];
   isAdmin: boolean;
@@ -97,12 +108,40 @@ export function UpdateMachineForm({
         </p>
       </div>
 
-      {/* Owner Select (Admin Only) */}
-      {isAdmin && (
+      {/* Machine Owner */}
+      {isAdmin ? (
         <OwnerSelect
           users={allUsers}
           defaultValue={machine.ownerId ?? machine.invitedOwnerId ?? null}
         />
+      ) : (
+        <div className="space-y-2" data-testid="owner-display">
+          <span className="text-sm font-semibold text-on-surface">
+            Machine Owner
+          </span>
+          <div className="rounded-md border border-outline bg-surface px-3 py-2">
+            {machine.owner || machine.invitedOwner ? (
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-on-surface">
+                  {machine.owner?.name ?? machine.invitedOwner?.name}
+                </span>
+                {/* Show invited badge only for truly invited owners (not yet accepted) */}
+                {machine.invitedOwner && !machine.owner && (
+                  <span className="text-[10px] font-medium uppercase tracking-wider text-on-surface-variant/70">
+                    (Invited)
+                  </span>
+                )}
+              </div>
+            ) : (
+              <span className="text-sm text-on-surface-variant">
+                No owner assigned
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-on-surface-variant">
+            The owner receives notifications for new issues on this machine.
+          </p>
+        </div>
       )}
 
       {/* Actions */}

src/app/report/actions.ts

@@ -17,11 +17,6 @@ import { eq } from "drizzle-orm";
 import { createClient } from "~/lib/supabase/server";
 import type { ActionState } from "./unified-report-form";
 
-const redirectWithError = (message: string): never => {
-  const params = new URLSearchParams({ error: message });
-  redirect(`/report?${params.toString()}`);
-};
-
 /**
  * Server Action: submit anonymous issue
  *
@@ -51,15 +46,14 @@ export async function submitPublicIssueAction(
 
   if (!success) {
     const resetTime = formatResetTime(reset);
-    redirectWithError(
-      `Too many submissions. Please try again in ${resetTime}.`
-    );
+    return {
+      error: `Too many submissions. Please try again in ${resetTime}.`,
+    };
   }
 
   const parsedValue = parsePublicIssueForm(formData);
   if (!parsedValue.success) {
-    redirectWithError(parsedValue.error);
-    return { error: parsedValue.error }; // Should be unreachable
+    return { error: parsedValue.error };
   }
 
   // After the early return, parsedValue is narrowed to ParsedPublicIssue

src/app/report/unified-report-form.tsx

@@ -70,10 +70,9 @@ export function UnifiedReportForm({
   );
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [severity, setSeverity] = useState<IssueSeverity>("minor");
-  const [priority, setPriority] = useState<IssuePriority>("medium");
-  const [consistency, setConsistency] =
-    useState<IssueConsistency>("intermittent");
+  const [severity, setSeverity] = useState<IssueSeverity | "">("");
+  const [priority, setPriority] = useState<IssuePriority | "">("");
+  const [consistency, setConsistency] = useState<IssueConsistency | "">("");
 
   const [state, formAction, isPending] = useActionState(
     submitPublicIssueAction,
@@ -96,9 +95,9 @@ export function UnifiedReportForm({
           machineId: string;
           title: string;
           description: string;
-          severity: IssueSeverity;
-          priority: IssuePriority;
-          consistency: IssueConsistency;
+          severity: IssueSeverity | "";
+          priority: IssuePriority | "";
+          consistency: IssueConsistency | "";
         }>;
 
         // Only restore machineId if not provided via prop or URL already
@@ -385,7 +384,6 @@ export function UnifiedReportForm({
                 <Button
                   type="submit"
                   className="w-full bg-primary text-on-primary hover:bg-primary/90 mt-2 h-10 text-sm font-semibold"
-                  disabled={!selectedMachineId}
                   loading={isPending}
                 >
                   Submit Issue Report

src/app/report/validation.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from "vitest";
+import { parsePublicIssueForm } from "./validation";
+
+describe("Public Issue Form Validation", () => {
+  it("should fail validation when machineId is missing", () => {
+    const formData = new FormData();
+    formData.set("title", "Test Issue");
+    formData.set("severity", "minor");
+    formData.set("consistency", "intermittent");
+
+    const result = parsePublicIssueForm(formData);
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error).toContain("machineId");
+      // Zod's default error for undefined/missing field when it expects a uuid string
+      expect(result.error).toContain(
+        "Invalid input: expected string, received undefined"
+      );
+    }
+  });
+
+  it("should fail validation when severity is missing", () => {
+    const formData = new FormData();
+    formData.set("machineId", "00000000-0000-0000-0000-000000000000");
+    formData.set("title", "Test Issue");
+    formData.set("consistency", "intermittent");
+
+    const result = parsePublicIssueForm(formData);
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error).toContain("severity");
+      expect(result.error).toContain("Select a severity");
+    }
+  });
+
+  it("should fail validation when title is empty", () => {
+    const formData = new FormData();
+    formData.set("machineId", "00000000-0000-0000-0000-000000000000");
+    formData.set("title", "");
+    formData.set("severity", "minor");
+    formData.set("consistency", "intermittent");
+
+    const result = parsePublicIssueForm(formData);
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error).toContain("title");
+      expect(result.error).toContain("Title is required");
+    }
+  });
+
+  it("should pass validation when all required fields are present", () => {
+    const formData = new FormData();
+    formData.set("machineId", "00000000-0000-0000-0000-000000000000");
+    formData.set("title", "Valid Title");
+    formData.set("severity", "minor");
+    formData.set("consistency", "intermittent");
+
+    const result = parsePublicIssueForm(formData);
+
+    expect(result.success).toBe(true);
+  });
+});

src/components/issues/fields/ConsistencySelect.tsx

@@ -12,10 +12,11 @@ import { CONSISTENCY_CONFIG } from "~/lib/issues/status";
 import { type IssueConsistency } from "~/lib/types";
 
 interface ConsistencySelectProps {
-  value: IssueConsistency;
+  value: IssueConsistency | "";
   onValueChange: (value: IssueConsistency) => void;
   disabled?: boolean;
   name?: string;
+  placeholder?: string;
   testId?: string;
 }
 
@@ -30,6 +31,7 @@ export function ConsistencySelect({
   onValueChange,
   disabled = false,
   name = "consistency",
+  placeholder = "Select consistency...",
   testId = "issue-consistency-select",
 }: ConsistencySelectProps): React.JSX.Element {
   return (
@@ -41,20 +43,25 @@ export function ConsistencySelect({
     >
       <SelectTrigger
         className="w-full border-outline-variant bg-surface text-on-surface"
-        aria-label={`Consistency: ${CONSISTENCY_CONFIG[value].label}`}
+        aria-label={
+          value
+            ? `Consistency: ${CONSISTENCY_CONFIG[value].label}`
+            : "Select Consistency"
+        }
         data-testid={testId}
       >
-        <SelectValue>
-          {(() => {
-            const config = CONSISTENCY_CONFIG[value];
-            const Icon = config.icon;
-            return (
-              <div className="flex items-center gap-2">
-                <Icon className={`size-4 ${config.iconColor}`} />
-                <span>{config.label}</span>
-              </div>
-            );
-          })()}
+        <SelectValue placeholder={placeholder}>
+          {value &&
+            (() => {
+              const config = CONSISTENCY_CONFIG[value];
+              const Icon = config.icon;
+              return (
+                <div className="flex items-center gap-2">
+                  <Icon className={`size-4 ${config.iconColor}`} />
+                  <span>{config.label}</span>
+                </div>
+              );
+            })()}
         </SelectValue>
       </SelectTrigger>
       <SelectContent>

src/components/issues/fields/PrioritySelect.tsx

@@ -12,10 +12,11 @@ import { PRIORITY_CONFIG } from "~/lib/issues/status";
 import { type IssuePriority } from "~/lib/types";
 
 interface PrioritySelectProps {
-  value: IssuePriority;
+  value: IssuePriority | "";
   onValueChange: (value: IssuePriority) => void;
   disabled?: boolean;
   name?: string;
+  placeholder?: string;
   testId?: string;
 }
 
@@ -26,6 +27,7 @@ export function PrioritySelect({
   onValueChange,
   disabled = false,
   name = "priority",
+  placeholder = "Select priority...",
   testId = "issue-priority-select",
 }: PrioritySelectProps): React.JSX.Element {
   return (
@@ -37,20 +39,25 @@ export function PrioritySelect({
     >
       <SelectTrigger
         className="w-full border-outline-variant bg-surface text-on-surface"
-        aria-label={`Priority: ${PRIORITY_CONFIG[value].label}`}
+        aria-label={
+          value
+            ? `Priority: ${PRIORITY_CONFIG[value].label}`
+            : "Select Priority"
+        }
         data-testid={testId}
       >
-        <SelectValue>
-          {(() => {
-            const config = PRIORITY_CONFIG[value];
-            const Icon = config.icon;
-            return (
-              <div className="flex items-center gap-2">
-                <Icon className={`size-4 ${config.iconColor}`} />
-                <span>{config.label}</span>
-              </div>
-            );
-          })()}
+        <SelectValue placeholder={placeholder}>
+          {value &&
+            (() => {
+              const config = PRIORITY_CONFIG[value];
+              const Icon = config.icon;
+              return (
+                <div className="flex items-center gap-2">
+                  <Icon className={`size-4 ${config.iconColor}`} />
+                  <span>{config.label}</span>
+                </div>
+              );
+            })()}
         </SelectValue>
       </SelectTrigger>
       <SelectContent>