diff --git a/src/app/(protected)/workorders/[id].tsx b/src/app/(protected)/workorders/[id].tsx
index cfdcf7d7..ea7ebf00 100644
--- a/src/app/(protected)/workorders/[id].tsx
+++ b/src/app/(protected)/workorders/[id].tsx
@@ -1,39 +1,21 @@
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router";
+import { useParams } from "react-router";
 import { Alert, Box, CircularProgress } from "@mui/material";
 import { DispatchCreateModal } from "./_components/dispatch-create-modal";
 import { DispatchDetailModal } from "./_components/dispatch-detail-modal";
-import { VendorEditorDialog } from "./_components/vendor-editor-dialog";
-import { useVendorEditor } from "./_components/use-vendor-editor";
-import { WorkOrderActivity } from "./_components/work-order-activity";
-import {
-  DispatchAccordion,
-  WorkOrderDetailsSection,
-  WorkOrderHeader,
-  WorkOrderSummaryAccordions,
-} from "./_components/work-order-view-sections";
-import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
-import {
-  useChangeWorkOrderAssignment,
-  useChangeWorkOrderStatus,
-} from "@/domain/work-orders/use-cases/use-work-order-mutations";
-import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { WorkOrderActivityPanel } from "./_components/view/work-order-activity-panel";
+import { WorkOrderDispatchesAccordion } from "./_components/view/work-order-dispatches-accordion";
+import { WorkOrderVendorEditorDialog } from "./_components/view/work-order-vendor-editor-dialog";
+import { WorkOrderViewAccordions } from "./_components/view/work-order-view-accordions";
+import { WorkOrderViewDetails } from "./_components/view/work-order-view-details";
+import { WorkOrderViewHeader } from "./_components/view/work-order-view-header";
+import { useWorkOrderViewPage } from "./_hooks/use-work-order-view-page";
 
 export default function WorkOrderViewPage() {
   const { id } = useParams();
-  const navigate = useNavigate();
   const workOrderId = id ?? "";
+  const view = useWorkOrderViewPage(workOrderId);
 
-  const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
-  const { data: users = [] } = useWorkOrderUsers();
-  const statusMutation = useChangeWorkOrderStatus(workOrderId);
-  const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
-  const vendorEditor = useVendorEditor({ workOrderId, onSaved: () => void refetch() });
-
-  const [dispatchOpen, setDispatchOpen] = useState(false);
-  const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
-
-  if (isLoading) {
+  if (view.isLoading) {
     return (
       <Box className="flex justify-center p-12">
         <CircularProgress />
@@ -41,11 +23,11 @@ export default function WorkOrderViewPage() {
     );
   }
 
-  if (error || !wo) {
+  if (view.error || !view.wo) {
     return (
       <Box className="p-4">
         <Alert severity="error">
-          {error instanceof Error ? error.message : "Work order not found."}
+          {view.error instanceof Error ? view.error.message : "Work order not found."}
         </Alert>
       </Box>
     );
@@ -53,56 +35,67 @@ export default function WorkOrderViewPage() {
 
   return (
     <Box className="flex flex-col gap-4 p-4">
-      <WorkOrderHeader
-        wo={wo}
-        onSelectStatus={(status) => statusMutation.mutate(status)}
-        onDispatch={() => setDispatchOpen(true)}
-        onEdit={() => navigate(`/workorders/edit/${id}`)}
-        onBack={() => navigate("/workorders")}
-      />
-      <WorkOrderDetailsSection
-        wo={wo}
-        users={users}
-        onAssign={(payload) => assignmentMutation.mutate(payload)}
-      />
-      <WorkOrderSummaryAccordions wo={wo} />
-      <DispatchAccordion
-        wo={wo}
-        onEditVendor={(event, vendorId, vendorName) =>
-          void vendorEditor.open(event, vendorId, vendorName)
-        }
-        onViewDispatch={setDispatchDetailId}
-      />
-      <WorkOrderActivity
+      <WorkOrderViewHeader
+        wo={view.wo}
         workOrderId={workOrderId}
-        comments={wo.comments ?? []}
-        auditLog={wo.auditLog ?? []}
+        statusAnchor={view.statusAnchor}
+        onStatusAnchorChange={view.setStatusAnchor}
+        onStatusChange={(status) => view.statusMutation.mutate(status)}
+        onOpenDispatch={() => view.setDispatchOpen(true)}
       />
-      {dispatchOpen && (
+
+      <WorkOrderViewDetails
+        wo={view.wo}
+        users={view.users}
+        assignAnchor={view.assignAnchor}
+        onAssignAnchorChange={view.setAssignAnchor}
+        onAssign={(userId, userName) => view.assignmentMutation.mutate({ userId, userName })}
+        onUnassign={() => view.assignmentMutation.mutate({ userId: "", userName: "" })}
+      />
+
+      <WorkOrderViewAccordions wo={view.wo} />
+
+      <WorkOrderDispatchesAccordion
+        wo={view.wo}
+        onOpenDispatchDetail={view.setDispatchDetailId}
+        onOpenVendorEditor={view.openVendorEditor}
+      />
+
+      <WorkOrderActivityPanel
+        customerComments={view.customerComments}
+        internalComments={view.internalComments}
+        auditLog={view.auditLog}
+        mentionUsers={view.mentionUsers}
+        isSubmitting={view.commentMutation.isPending}
+        onSubmitComment={view.submitComment}
+      />
+
+      {view.dispatchOpen && (
         <DispatchCreateModal
-          workOrder={wo}
-          onClose={() => setDispatchOpen(false)}
-          onDispatched={() => void refetch()}
+          workOrder={view.wo}
+          onClose={() => view.setDispatchOpen(false)}
+          onDispatched={() => void view.refetch()}
         />
       )}
-      {dispatchDetailId != null && (
+      {view.dispatchDetailId != null && (
         <DispatchDetailModal
-          dispatchId={dispatchDetailId}
+          dispatchId={view.dispatchDetailId}
           workOrderId={workOrderId}
-          onClose={() => setDispatchDetailId(null)}
-          onUpdated={() => void refetch()}
+          onClose={() => view.setDispatchDetailId(null)}
+          onUpdated={() => void view.refetch()}
         />
       )}
-      <VendorEditorDialog
-        editor={vendorEditor.editor}
-        loading={vendorEditor.loading}
-        error={vendorEditor.error}
-        isPending={vendorEditor.isPending}
-        phoneInvalid={vendorEditor.phoneInvalid}
-        isValid={vendorEditor.isValid}
-        onClose={vendorEditor.close}
-        onSave={vendorEditor.save}
-        onFieldChange={vendorEditor.updateField}
+
+      <WorkOrderVendorEditorDialog
+        editor={view.vendorEditor}
+        loading={view.vendorEditorLoading}
+        error={view.vendorEditorError}
+        isSaving={view.vendorMutation.isPending}
+        onClose={() => {
+          if (!view.vendorMutation.isPending) view.setVendorEditor(null);
+        }}
+        onSave={view.saveVendorEditor}
+        onEditorChange={view.setVendorEditor}
       />
     </Box>
   );
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key.ts b/src/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key.ts
new file mode 100644
index 00000000..95a75a3b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key.ts
@@ -0,0 +1,36 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+/**
+ * Board rows often have tech/company but no vendorId — resolve via vendors list.
+ * Prefers a stable vendor id over name+company matching.
+ */
+export function resolveTechnicianKey(
+  vendorId: string | number,
+  tech: string,
+  company: string,
+  vendors: VendorDropdownItem[],
+): string {
+  const idStr = vendorId !== "" && vendorId != null ? String(vendorId) : "";
+  if (idStr && vendors.some((vendor) => String(vendor.id) === idStr)) {
+    return idStr;
+  }
+  if (idStr && vendors.length === 0) {
+    return idStr;
+  }
+
+  const name = tech.trim();
+  if (!name) {
+    return idStr;
+  }
+
+  const byNameAndCompany =
+    vendors.find((vendor) => vendor.contactName === name && vendor.companyName === company) ??
+    vendors.find((vendor) => vendor.contactName === name);
+
+  if (byNameAndCompany) {
+    return String(byNameAndCompany.id);
+  }
+
+  // Orphan tech string used as option key when no vendor row matches (legacy board cells).
+  return idStr || name;
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor.ts b/src/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor.ts
new file mode 100644
index 00000000..3357830c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor.ts
@@ -0,0 +1,53 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+type ResolveVendorCompanyAnchorInput = {
+  company: string;
+  resolvedCompany: string;
+  selectedVendor: VendorDropdownItem | undefined;
+  vendors: VendorDropdownItem[];
+};
+
+export function resolveVendorCompanyAnchor({
+  company,
+  resolvedCompany,
+  selectedVendor,
+  vendors,
+}: ResolveVendorCompanyAnchorInput): {
+  companyName: string;
+  companyVendor: VendorDropdownItem | null;
+} {
+  const companyName = resolvedCompany || company;
+  if (!companyName) {
+    return { companyName: "", companyVendor: null };
+  }
+
+  const companyVendor =
+    selectedVendor ??
+    vendors.find((vendor) => vendor.companyName === companyName) ??
+    ({
+      id: "",
+      companyName,
+      contactName: "",
+      tradeSpecialties: "",
+      address: "",
+      distanceMiles: null,
+    } satisfies VendorDropdownItem);
+
+  return { companyName, companyVendor };
+}
+
+export function mergeVendorDropdownItems(
+  vendors: VendorDropdownItem[],
+  addedVendors: VendorDropdownItem[],
+): VendorDropdownItem[] {
+  const byId = new Map<string, VendorDropdownItem>();
+  for (const vendor of vendors) {
+    if (vendor.id === "") continue;
+    byId.set(String(vendor.id), vendor);
+  }
+  for (const vendor of addedVendors) {
+    if (vendor.id === "") continue;
+    byId.set(String(vendor.id), vendor);
+  }
+  return Array.from(byId.values());
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save.ts b/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save.ts
new file mode 100644
index 00000000..502714c6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save.ts
@@ -0,0 +1,75 @@
+import { isDraftVendorId } from "@/domain/vendors/utils/draft-vendor";
+import { vendorToDropdownItem } from "@/domain/vendors/utils/vendor-to-dropdown-item";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import type { VendorPatch } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types";
+import type { useCreateVendor } from "@/domain/vendors/use-cases/use-create-vendor";
+
+type UseVendorDialogSaveArgs = {
+  allVendors: VendorDropdownItem[];
+  pendingCreates: Record<string, VendorFormValues>;
+  selectedKey: string;
+  selectedVendor: VendorDropdownItem | undefined;
+  resolvedCompany: string;
+  anchorCompanyName: string;
+  tech: string;
+  phone: string;
+  createVendor: ReturnType<typeof useCreateVendor>;
+  onSave: (patch: VendorPatch) => void;
+  onOpenChange: (open: boolean) => void;
+  setSaveError: (error: string | null) => void;
+};
+
+export function useVendorDialogSave({
+  allVendors,
+  pendingCreates,
+  selectedKey,
+  selectedVendor,
+  resolvedCompany,
+  anchorCompanyName,
+  tech,
+  phone,
+  createVendor,
+  onSave,
+  onOpenChange,
+  setSaveError,
+}: UseVendorDialogSaveArgs) {
+  const resolveSaveVendor = () =>
+    allVendors.find((vendor) => String(vendor.id) === selectedKey) ??
+    allVendors.find(
+      (vendor) =>
+        vendor.contactName === tech &&
+        vendor.companyName === (resolvedCompany || anchorCompanyName),
+    ) ??
+    selectedVendor;
+
+  const handleSave = async () => {
+    setSaveError(null);
+    let saveVendor = resolveSaveVendor();
+    const pendingPayload = saveVendor ? pendingCreates[String(saveVendor.id)] : undefined;
+
+    if (saveVendor != null && isDraftVendorId(saveVendor.id) && pendingPayload) {
+      try {
+        const created = await createVendor.mutateAsync({
+          ...pendingPayload,
+          phone: phone.trim() || pendingPayload.phone,
+        });
+        saveVendor = vendorToDropdownItem(created);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to create technician";
+        setSaveError(message);
+        return;
+      }
+    }
+
+    onSave({
+      vendorId: saveVendor ? String(saveVendor.id) : "",
+      company: resolvedCompany || anchorCompanyName,
+      tech: saveVendor?.contactName ?? tech,
+      techPhone: phone,
+    });
+    onOpenChange(false);
+  };
+
+  return { handleSave };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-cell.tsx
index a627d8da..8cd6dca2 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/vendor-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-cell.tsx
@@ -5,6 +5,7 @@ import { HoverChevron } from "./hover-chevron";
 import { VendorDialog, type VendorPatch } from "./vendor-dialog";
 
 type VendorCellProps = {
+  vendorId?: string | number;
   company: string;
   tech: string;
   techPhone?: string;
@@ -13,7 +14,15 @@ type VendorCellProps = {
   onSave: (patch: VendorPatch) => void;
 };
 
-export function VendorCell({ company, tech, techPhone, vendors, q, onSave }: VendorCellProps) {
+export function VendorCell({
+  vendorId = "",
+  company,
+  tech,
+  techPhone,
+  vendors,
+  q,
+  onSave,
+}: VendorCellProps) {
   const [open, setOpen] = useState(false);
   const hasAny = !!(tech || company);
 
@@ -46,6 +55,7 @@ export function VendorCell({ company, tech, techPhone, vendors, q, onSave }: Ven
       <VendorDialog
         open={open}
         onOpenChange={setOpen}
+        vendorId={vendorId}
         company={company}
         tech={tech}
         techPhone={techPhone}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician.tsx
new file mode 100644
index 00000000..f559bb7d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { vendorSchema, type VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import { buildTechnicianCreatePayload } from "@/domain/vendors/utils/build-technician-create-payload";
+import { createDraftVendorDropdownItem } from "@/domain/vendors/utils/draft-vendor";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+
+type VendorDialogAddTechnicianProps = {
+  companyName: string;
+  companyVendor: VendorDropdownItem;
+  onCreated: (vendor: VendorDropdownItem, phone: string, payload: VendorFormValues) => void;
+};
+
+export function VendorDialogAddTechnician({
+  companyName,
+  companyVendor,
+  onCreated,
+}: VendorDialogAddTechnicianProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [contactName, setContactName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const resetForm = () => {
+    setContactName("");
+    setPhone("");
+    setError(null);
+  };
+
+  const handleAdd = () => {
+    const payload = buildTechnicianCreatePayload({
+      companyVendor,
+      contactName,
+      phone,
+    });
+    const parsed = vendorSchema.safeParse(payload);
+    if (!parsed.success) {
+      const fieldErrors = parsed.error.flatten().fieldErrors;
+      const message =
+        fieldErrors.contactName?.[0] ??
+        fieldErrors.phone?.[0] ??
+        fieldErrors.companyName?.[0] ??
+        "Enter a valid technician name";
+      setError(message);
+      return;
+    }
+
+    setError(null);
+    const draftItem = createDraftVendorDropdownItem(parsed.data);
+    onCreated(draftItem, parsed.data.phone || phone.trim(), parsed.data);
+    resetForm();
+    setExpanded(false);
+  };
+
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        onClick={() => setExpanded(true)}
+        className="flex items-center gap-1.5 text-[12px] font-medium transition-opacity hover:opacity-80"
+        style={{ color: "var(--color-primary)" }}
+      >
+        <Plus size={12} className="shrink-0" aria-hidden />+ Add technician
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className="space-y-2 rounded-lg p-3"
+      style={{
+        background: "var(--color-bg-muted)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      <Text as="p" variant="caption" sx={{ fontSize: 12, color: "var(--muted-foreground)" }}>
+        New technician for {companyName}
+      </Text>
+      <div>
+        <FieldLabel>Technician Name</FieldLabel>
+        <input
+          autoFocus
+          value={contactName}
+          onChange={(e) => setContactName(e.target.value)}
+          placeholder="Full name"
+          className={DLG_INPUT_CLS}
+          style={DLG_INPUT_STYLE}
+        />
+      </div>
+      <div>
+        <FieldLabel>Technician Phone</FieldLabel>
+        <input
+          type="tel"
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          placeholder="(000) 000-0000"
+          className={DLG_INPUT_CLS}
+          style={DLG_INPUT_STYLE}
+        />
+      </div>
+      {Boolean(error) && (
+        <Text as="p" variant="caption" sx={{ fontSize: 11.5, color: "var(--color-destructive)" }}>
+          {error}
+        </Text>
+      )}
+      <div className="flex items-center justify-end gap-2 pt-1">
+        <Button
+          variant="ghost"
+          className="min-h-0 px-2 py-1 text-[12px]"
+          onClick={() => {
+            resetForm();
+            setExpanded(false);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="min-h-0 px-3 py-1 text-[12px]"
+          disabled={contactName.trim() === ""}
+          onClick={handleAdd}
+        >
+          Add
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body.tsx
new file mode 100644
index 00000000..5b58de5e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body.tsx
@@ -0,0 +1,121 @@
+import { Wrench } from "lucide-react";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
+import { Text } from "@/components/ui/text";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { VendorDialogAddTechnician } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician";
+import { VendorDialogCompanyCard } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import type { TechnicianOption } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-options";
+
+type VendorDialogBodyProps = {
+  selectedKey: string;
+  technicianOptions: TechnicianOption[];
+  anchorCompanyName: string;
+  companyVendorForAdd: VendorDropdownItem | undefined;
+  tech: string;
+  phone: string;
+  notes: string;
+  resolvedCompany: string;
+  selectedVendor: VendorDropdownItem | undefined;
+  saveError: string | null;
+  onPick: (key: string) => void;
+  onPhoneChange: (phone: string) => void;
+  onNotesChange: (notes: string) => void;
+  onTechnicianCreated: (
+    created: VendorDropdownItem,
+    createdPhone: string,
+    payload: VendorFormValues,
+  ) => void;
+};
+
+export function VendorDialogBody({
+  selectedKey,
+  technicianOptions,
+  anchorCompanyName,
+  companyVendorForAdd,
+  tech,
+  phone,
+  notes,
+  resolvedCompany,
+  selectedVendor,
+  saveError,
+  onPick,
+  onPhoneChange,
+  onNotesChange,
+  onTechnicianCreated,
+}: VendorDialogBodyProps) {
+  return (
+    <>
+      <div className="mt-3 space-y-3">
+        <div>
+          <FieldLabel>Technician</FieldLabel>
+          <WizardFieldSelect
+            value={selectedKey}
+            placeholder="Search technician …"
+            icon={
+              <Wrench size={14} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+            }
+            searchPlaceholder="Search technician…"
+            options={technicianOptions.map((option) => ({
+              key: option.key,
+              label: option.label,
+            }))}
+            onPick={onPick}
+          />
+          {companyVendorForAdd != null && (
+            <div className="mt-2">
+              <VendorDialogAddTechnician
+                companyName={anchorCompanyName}
+                companyVendor={companyVendorForAdd}
+                onCreated={onTechnicianCreated}
+              />
+            </div>
+          )}
+        </div>
+
+        {Boolean(tech) && (
+          <div>
+            <FieldLabel>Technician Phone</FieldLabel>
+            <input
+              type="tel"
+              value={phone}
+              onChange={(e) => onPhoneChange(e.target.value)}
+              className={DLG_INPUT_CLS}
+              style={DLG_INPUT_STYLE}
+            />
+          </div>
+        )}
+
+        {Boolean(resolvedCompany) && (
+          <div>
+            <FieldLabel>Company</FieldLabel>
+            <VendorDialogCompanyCard company={resolvedCompany} vendor={selectedVendor} />
+          </div>
+        )}
+
+        <div>
+          <FieldLabel>Notes</FieldLabel>
+          <textarea
+            value={notes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            placeholder="Contact preferences, availability, etc."
+            rows={3}
+            className={`${DLG_INPUT_CLS} resize-none`}
+            style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
+          />
+        </div>
+      </div>
+
+      {Boolean(saveError) && (
+        <Text as="p" variant="caption" sx={{ fontSize: 11.5, color: "var(--color-destructive)" }}>
+          {saveError}
+        </Text>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer.tsx
new file mode 100644
index 00000000..74a23490
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button";
+
+type VendorDialogFooterProps = {
+  isPending: boolean;
+  onCancel: () => void;
+  onSave: () => void;
+};
+
+export function VendorDialogFooter({ isPending, onCancel, onSave }: VendorDialogFooterProps) {
+  return (
+    <div className="mt-4 flex items-center justify-end gap-2">
+      <Button
+        variant="ghost"
+        className="min-h-0 px-2 py-1 text-[12px]"
+        disabled={isPending}
+        onClick={onCancel}
+      >
+        Cancel
+      </Button>
+      <Button
+        className="min-h-0 px-3 py-1 text-[12px]"
+        disabled={isPending}
+        onClick={() => void onSave()}
+      >
+        {isPending ? "Saving…" : "Save"}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types.ts b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types.ts
new file mode 100644
index 00000000..b2e35c0a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types.ts
@@ -0,0 +1,6 @@
+export type VendorPatch = {
+  vendorId: string;
+  company: string;
+  tech: string;
+  techPhone: string;
+};
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
index 5862c7f0..3bb1ab76 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
@@ -1,32 +1,30 @@
 import { useEffect, useMemo, useState, type MouseEvent } from "react";
-import { Wrench } from "lucide-react";
 import { Dialog, DialogContent, DialogTitle } from "@mui/material";
-import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
-import {
-  DLG_INPUT_CLS,
-  DLG_INPUT_STYLE,
-} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
-import { Button } from "@/components/ui/button";
 import { Text } from "@/components/ui/text";
 import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
 import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
-import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import { useCreateVendor } from "@/domain/vendors/use-cases/use-create-vendor";
 import {
   buildTechnicianOptions,
   phoneForOption,
 } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-options";
-import { VendorDialogCompanyCard } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card";
+import { VendorDialogBody } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body";
+import { VendorDialogFooter } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer";
+import {
+  mergeVendorDropdownItems,
+  resolveVendorCompanyAnchor,
+} from "@/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor";
+import { resolveTechnicianKey } from "@/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key";
+import { useVendorDialogSave } from "@/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save";
+import type { VendorPatch } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types";
 
-export type VendorPatch = {
-  vendorId: string;
-  company: string;
-  tech: string;
-  techPhone: string;
-};
+export type { VendorPatch } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types";
 
 type VendorDialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  vendorId?: string | number;
   company: string;
   tech: string;
   techPhone?: string;
@@ -37,43 +35,94 @@ type VendorDialogProps = {
 export function VendorDialog({
   open,
   onOpenChange,
+  vendorId = "",
   company,
   tech,
   techPhone = "",
   vendors,
   onSave,
 }: VendorDialogProps) {
+  const createVendor = useCreateVendor();
+  const [selectedKey, setSelectedKey] = useState(() =>
+    resolveTechnicianKey(vendorId, tech, company, vendors),
+  );
   const [t, setT] = useState(tech);
   const [phone, setPhone] = useState(techPhone);
   const [notes, setNotes] = useState("");
+  const [addedVendors, setAddedVendors] = useState<VendorDropdownItem[]>([]);
+  const [pendingCreates, setPendingCreates] = useState<Record<string, VendorFormValues>>({});
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  const allVendors = useMemo(
+    () => mergeVendorDropdownItems(vendors, addedVendors),
+    [vendors, addedVendors],
+  );
 
   const technicianOptions = useMemo(
-    () => buildTechnicianOptions(vendors, tech, company),
-    [vendors, tech, company],
+    () => buildTechnicianOptions(allVendors, tech, company),
+    [allVendors, tech, company],
   );
 
   useEffect(() => {
     if (open) {
+      const key = resolveTechnicianKey(vendorId, tech, company, vendors);
+      setSelectedKey(key);
       setT(tech);
-      setPhone(techPhone || phoneForOption(tech, technicianOptions));
+      setPhone(techPhone || phoneForOption(tech, buildTechnicianOptions(vendors, tech, company)));
       setNotes("");
+      setAddedVendors([]);
+      setPendingCreates({});
+      setSaveError(null);
     }
-  }, [open, tech, techPhone, technicianOptions]);
+    // Intentionally omit technicianOptions: rebuilding options after Add must not clear staged drafts.
+  }, [open, tech, techPhone, vendors, company, vendorId]);
 
-  const selected =
-    technicianOptions.find((o) => o.name === t && (!company || o.company === company)) ??
-    technicianOptions.find((o) => o.name === t || o.key === t);
-  const selectedKey = selected?.key ?? "";
-  const resolvedCompany = t ? (selected?.company ?? company) : "";
-  const selectedVendor = selected?.vendor ?? vendors.find((v) => v.companyName === resolvedCompany);
+  const selected = technicianOptions.find((option) => option.key === selectedKey);
+  const resolvedCompany = selectedKey ? (selected?.company ?? company) : company;
+  const selectedVendor =
+    selected?.vendor ?? allVendors.find((vendor) => String(vendor.id) === selectedKey);
+
+  const { companyName: anchorCompanyName, companyVendor } = resolveVendorCompanyAnchor({
+    company,
+    resolvedCompany,
+    selectedVendor,
+    vendors: allVendors,
+  });
 
   const handlePick = (key: string) => {
     const option = technicianOptions.find((o) => o.key === key);
-    const name = option?.name ?? key;
-    setT(name);
-    setPhone(phoneForOption(name, technicianOptions));
+    setSelectedKey(key);
+    setT(option?.name ?? key);
+    setPhone(option?.phone || phoneForOption(option?.name ?? key, technicianOptions));
   };
 
+  const handleTechnicianCreated = (
+    created: VendorDropdownItem,
+    createdPhone: string,
+    payload: VendorFormValues,
+  ) => {
+    setAddedVendors((current) => [...current, created]);
+    setPendingCreates((current) => ({ ...current, [String(created.id)]: payload }));
+    setSelectedKey(String(created.id));
+    setT(created.contactName);
+    setPhone(createdPhone);
+  };
+
+  const { handleSave } = useVendorDialogSave({
+    allVendors,
+    pendingCreates,
+    selectedKey,
+    selectedVendor,
+    resolvedCompany,
+    anchorCompanyName,
+    tech: selected?.name ?? t,
+    phone,
+    createVendor,
+    onSave,
+    onOpenChange,
+    setSaveError,
+  });
+
   return (
     <Dialog
       open={open}
@@ -96,84 +145,28 @@ export function VendorDialog({
           Search and select the technician
         </Text>
 
-        <div className="mt-3 space-y-3">
-          <div>
-            <FieldLabel>Technician</FieldLabel>
-            <WizardFieldSelect
-              value={selectedKey}
-              placeholder="Search technician …"
-              icon={
-                <Wrench
-                  size={14}
-                  className="shrink-0"
-                  style={{ color: "var(--color-text-muted)" }}
-                />
-              }
-              searchPlaceholder="Search technician…"
-              options={technicianOptions.map((option) => ({
-                key: option.key,
-                label: option.label,
-              }))}
-              onPick={handlePick}
-            />
-          </div>
+        <VendorDialogBody
+          selectedKey={selectedKey}
+          technicianOptions={technicianOptions}
+          anchorCompanyName={anchorCompanyName}
+          companyVendorForAdd={companyVendor ?? undefined}
+          tech={selected?.name ?? t}
+          phone={phone}
+          notes={notes}
+          resolvedCompany={resolvedCompany}
+          selectedVendor={selectedVendor}
+          saveError={saveError}
+          onPick={handlePick}
+          onPhoneChange={setPhone}
+          onNotesChange={setNotes}
+          onTechnicianCreated={handleTechnicianCreated}
+        />
 
-          {Boolean(t) && (
-            <div>
-              <FieldLabel>Technician Phone</FieldLabel>
-              <input
-                type="tel"
-                value={phone}
-                onChange={(e) => setPhone(e.target.value)}
-                className={DLG_INPUT_CLS}
-                style={DLG_INPUT_STYLE}
-              />
-            </div>
-          )}
-
-          {Boolean(t) && (
-            <div>
-              <FieldLabel>Company</FieldLabel>
-              <VendorDialogCompanyCard company={resolvedCompany} vendor={selectedVendor} />
-            </div>
-          )}
-
-          <div>
-            <FieldLabel>Notes</FieldLabel>
-            <textarea
-              value={notes}
-              onChange={(e) => setNotes(e.target.value)}
-              placeholder="Contact preferences, availability, etc."
-              rows={3}
-              className={`${DLG_INPUT_CLS} resize-none`}
-              style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
-            />
-          </div>
-        </div>
-
-        <div className="mt-4 flex items-center justify-end gap-2">
-          <Button
-            variant="ghost"
-            className="min-h-0 px-2 py-1 text-[12px]"
-            onClick={() => onOpenChange(false)}
-          >
-            Cancel
-          </Button>
-          <Button
-            className="min-h-0 px-3 py-1 text-[12px]"
-            onClick={() => {
-              onSave({
-                vendorId: selectedVendor ? String(selectedVendor.id) : "",
-                company: resolvedCompany,
-                tech: t,
-                techPhone: phone,
-              });
-              onOpenChange(false);
-            }}
-          >
-            Save
-          </Button>
-        </div>
+        <VendorDialogFooter
+          isPending={createVendor.isPending}
+          onCancel={() => onOpenChange(false)}
+          onSave={handleSave}
+        />
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
index a3056b2e..2357be2e 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
@@ -134,6 +134,7 @@ export function WoTableInlineRowCells({
 
       <td className="group/cell" style={{ padding: "0 14px" }}>
         <VendorCell
+          vendorId={draft.vendorId}
           company={draft.company}
           tech={draft.tech}
           techPhone={draft.techPhone}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
index 04c3a231..0ae6032b 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
@@ -56,6 +56,7 @@ export function WoTableRowServiceCells({
         onClick={(e) => e.stopPropagation()}
       >
         <VendorCell
+          vendorId={row.vendorId}
           company={row.company}
           tech={row.tech}
           techPhone={row.techPhone}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx b/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx
new file mode 100644
index 00000000..ca276156
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx
@@ -0,0 +1,107 @@
+import { useMemo, useState } from "react";
+import { Box, Button, Paper, Tab, Tabs } from "@mui/material";
+import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
+import { CommentTimeline } from "@/components/common/comment-timeline";
+import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import type {
+  WorkOrderAuditEntry,
+  WorkOrderComment,
+} from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderAuditTimeline } from "@/app/(protected)/workorders/_components/view/work-order-audit-timeline";
+import { Text } from "@/components/ui/text";
+
+export type WorkOrderActivityTab = "customer" | "internal" | "audit";
+
+type MentionUser = { id: string | number; name: string };
+
+type WorkOrderActivityPanelProps = {
+  customerComments: WorkOrderComment[];
+  internalComments: WorkOrderComment[];
+  auditLog: WorkOrderAuditEntry[];
+  mentionUsers: MentionUser[];
+  isSubmitting: boolean;
+  onSubmitComment: (text: string) => void | Promise<void>;
+};
+
+export function WorkOrderActivityPanel({
+  customerComments,
+  internalComments,
+  auditLog,
+  mentionUsers,
+  isSubmitting,
+  onSubmitComment,
+}: WorkOrderActivityPanelProps) {
+  const [activeTab, setActiveTab] = useState<WorkOrderActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+
+  const customerTimelineItems = useMemo(
+    () => mapWorkOrderCommentsToTimeline(customerComments),
+    [customerComments],
+  );
+  const internalTimelineItems = useMemo(
+    () => mapWorkOrderCommentsToTimeline(internalComments),
+    [internalComments],
+  );
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Text as="p" variant="heading" className="mb-3 font-semibold">
+        Activity
+      </Text>
+      <Tabs
+        value={activeTab}
+        onChange={(_event, value: WorkOrderActivityTab) => setActiveTab(value)}
+        className="mb-3"
+      >
+        <Tab value="customer" label={`Customer (${customerComments.length})`} />
+        <Tab value="internal" label={`Internal (${internalComments.length})`} />
+        <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
+      </Tabs>
+
+      {activeTab === "customer" && (
+        <CommentTimeline items={customerTimelineItems} mentionUsers={mentionUsers} />
+      )}
+      {activeTab === "internal" && (
+        <CommentTimeline items={internalTimelineItems} mentionUsers={mentionUsers} />
+      )}
+      {activeTab === "audit" && <WorkOrderAuditTimeline entries={auditLog} />}
+
+      {activeTab === "internal" && (
+        <Box
+          component="form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const trimmed = commentText.trim();
+            if (!trimmed) {
+              return;
+            }
+            void (async () => {
+              try {
+                await onSubmitComment(trimmed);
+                setCommentText("");
+              } catch {
+                // Mutation toast handles failure; keep the draft for retry.
+              }
+            })();
+          }}
+          className="mt-4 flex flex-col gap-2"
+        >
+          <CommentMentionComposer
+            value={commentText}
+            onChange={setCommentText}
+            candidates={mentionUsers}
+            disabled={isSubmitting}
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            className="self-end"
+            disabled={isSubmitting || !commentText.trim()}
+          >
+            {isSubmitting ? "Sending..." : "Send"}
+          </Button>
+        </Box>
+      )}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx b/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx
new file mode 100644
index 00000000..46c7b374
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function WorkOrderAuditTimeline({ entries }: { entries: WorkOrderAuditEntry[] }) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return <Typography sx={{ color: "text.secondary" }}>No changes recorded.</Typography>;
+  }
+
+  return (
+    <Stack spacing={2} className="max-h-72 overflow-y-auto">
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Stack direction="row" className="mb-1" sx={{ justifyContent: "space-between" }}>
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography variant="caption" sx={{ color: "text.secondary" }}>
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Stack>
+          <Typography variant="body2">
+            <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+          </Typography>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx b/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx
new file mode 100644
index 00000000..1e9f5184
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx
@@ -0,0 +1,12 @@
+import { Box, Typography } from "@mui/material";
+
+export function WorkOrderDetailField({ label, value }: { label: string; value: string }) {
+  return (
+    <Box>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+        {label}
+      </Typography>
+      <Typography variant="body2">{value}</Typography>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx b/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx
new file mode 100644
index 00000000..0d77c0f0
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx
@@ -0,0 +1,113 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { formatDateTime, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+type WorkOrderDispatchesAccordionProps = {
+  wo: WorkOrderDetail;
+  onOpenDispatchDetail: (dispatchId: string | number) => void;
+  onOpenVendorEditor: (
+    event: React.MouseEvent,
+    vendorId: string | number,
+    vendorName: string,
+  ) => void;
+};
+
+export function WorkOrderDispatchesAccordion({
+  wo,
+  onOpenDispatchDetail,
+  onOpenVendorEditor,
+}: WorkOrderDispatchesAccordionProps) {
+  return (
+    <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {wo.dispatches.length ? (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dispatch #</TableCell>
+                  <TableCell>Vendor</TableCell>
+                  <TableCell>NTE</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date</TableCell>
+                  <TableCell>Wait</TableCell>
+                  <TableCell align="right">Actions</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {wo.dispatches.map((dispatch) => {
+                  const waitColor = waitTimeColor(dispatch.dispatchedAt);
+                  return (
+                    <TableRow
+                      key={String(dispatch.id)}
+                      hover
+                      className="cursor-pointer"
+                      onClick={() => onOpenDispatchDetail(dispatch.id)}
+                    >
+                      <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
+                      <TableCell>{dispatch.vendorName}</TableCell>
+                      <TableCell>
+                        {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+                      </TableCell>
+                      <TableCell>{dispatch.status}</TableCell>
+                      <TableCell>
+                        {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+                      </TableCell>
+                      <TableCell>
+                        {dispatch.status === "Sent" ? (
+                          <Typography
+                            variant="caption"
+                            className={
+                              waitColor === "green"
+                                ? "text-green-600"
+                                : waitColor === "yellow"
+                                  ? "text-yellow-600"
+                                  : "text-red-600"
+                            }
+                          >
+                            {timeSince(dispatch.dispatchedAt)}
+                          </Typography>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                      <TableCell align="right">
+                        <Button
+                          size="small"
+                          onClick={(event) =>
+                            void onOpenVendorEditor(event, dispatch.vendorId, dispatch.vendorName)
+                          }
+                          disabled={dispatch.vendorId === ""}
+                        >
+                          Edit vendor
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <Typography sx={{ color: "text.secondary" }}>No dispatches yet.</Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx
new file mode 100644
index 00000000..b89ef2e7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx
@@ -0,0 +1,114 @@
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+import { formatPhoneMask, isVendorEditorValid } from "./work-order-vendor-editor-utils";
+
+type WorkOrderVendorEditorDialogProps = {
+  editor: VendorEditorState | null;
+  loading: boolean;
+  error: string;
+  isSaving: boolean;
+  onClose: () => void;
+  onSave: () => void;
+  onEditorChange: (
+    updater: (current: VendorEditorState | null) => VendorEditorState | null,
+  ) => void;
+};
+
+export function WorkOrderVendorEditorDialog({
+  editor,
+  loading,
+  error,
+  isSaving,
+  onClose,
+  onSave,
+  onEditorChange,
+}: WorkOrderVendorEditorDialogProps) {
+  return (
+    <Dialog open={editor !== null} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>Edit assigned vendor</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} className="pt-2">
+          <Typography variant="body2" color="text.secondary">
+            {editor?.vendorName}
+          </Typography>
+          {Boolean(error) && <Alert severity="error">{error}</Alert>}
+          {loading ? (
+            <Box className="flex justify-center p-6">
+              <CircularProgress size={28} />
+            </Box>
+          ) : (
+            <>
+              <TextField
+                label="Technician name"
+                value={editor?.contactName ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, contactName: event.target.value } : current,
+                  )
+                }
+                slotProps={{ htmlInput: { maxLength: 200 } }}
+              />
+              <TextField
+                label="Phone"
+                value={editor?.phone ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, phone: formatPhoneMask(event.target.value) } : current,
+                  )
+                }
+                error={Boolean(editor?.phone && !/^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone))}
+                helperText="Use (XXX) XXX-XXXX"
+              />
+              <TextField
+                label="Email"
+                type="email"
+                value={editor?.email ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, email: event.target.value } : current,
+                  )
+                }
+              />
+              <TextField
+                label="Notes"
+                multiline
+                minRows={3}
+                value={editor?.notes ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, notes: event.target.value } : current,
+                  )
+                }
+                slotProps={{ htmlInput: { maxLength: 2000 } }}
+              />
+            </>
+          )}
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={isSaving}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onSave}
+          disabled={!editor || loading || isSaving || !isVendorEditorValid(editor)}
+        >
+          {isSaving ? "Saving..." : "Save"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts
new file mode 100644
index 00000000..7504b91b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts
@@ -0,0 +1,8 @@
+export interface VendorEditorState {
+  vendorId: string | number;
+  vendorName: string;
+  contactName: string;
+  phone: string;
+  email: string;
+  notes: string;
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts
new file mode 100644
index 00000000..a73099ab
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts
@@ -0,0 +1,16 @@
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+
+export function formatPhoneMask(input: string): string {
+  const digits = input.replace(/\D/g, "").slice(0, 10);
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
+
+export function isVendorEditorValid(editor: VendorEditorState): boolean {
+  const phoneValid = editor.phone === "" || /^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone);
+  const emailValid = editor.email === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editor.email);
+  return (
+    phoneValid && emailValid && editor.notes.length <= 2000 && editor.contactName.length <= 200
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx
new file mode 100644
index 00000000..707d8d61
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx
@@ -0,0 +1,66 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function WorkOrderViewAccordions({ wo }: { wo: WorkOrderDetail }) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <WorkOrderDetailField label="Problem" value={wo.problem || "—"} />
+            <WorkOrderDetailField label="Trade" value={wo.trade || "—"} />
+            <WorkOrderDetailField label="Sub-Trade" value={wo.subTrade || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <WorkOrderDetailField
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <WorkOrderDetailField label="Due Date" value={wo.dueDate || "—"} />
+            <WorkOrderDetailField label="Scheduled" value={wo.scheduledDate || "—"} />
+            <WorkOrderDetailField label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <WorkOrderDetailField
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <WorkOrderDetailField label="Customer PO" value={wo.po || "—"} />
+            <WorkOrderDetailField label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Description</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>{wo.description || "No description provided."}</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx
new file mode 100644
index 00000000..bf283bfd
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx
@@ -0,0 +1,73 @@
+import { Box, Button, Menu, MenuItem, Paper, Typography } from "@mui/material";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
+import { Text } from "@/components/ui/text";
+
+type WorkOrderViewDetailsProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  assignAnchor: HTMLElement | null;
+  onAssignAnchorChange: (anchor: HTMLElement | null) => void;
+  onAssign: (userId: string | number, userName: string) => void;
+  onUnassign: () => void;
+};
+
+export function WorkOrderViewDetails({
+  wo,
+  users,
+  assignAnchor,
+  onAssignAnchorChange,
+  onAssign,
+  onUnassign,
+}: WorkOrderViewDetailsProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Text as="p" variant="heading" className="mb-3 font-semibold">
+        Details
+      </Text>
+      <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <WorkOrderDetailField label="Internal WO" value={wo.internalWONumber} />
+        <WorkOrderDetailField label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <WorkOrderDetailField label="Priority" value={wo.priority || "—"} />
+        <WorkOrderDetailField label="Location" value={wo.location || "—"} />
+        <Box>
+          <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+            Assigned To
+          </Typography>
+          <Button size="small" onClick={(event) => onAssignAnchorChange(event.currentTarget)}>
+            {wo.assignedTo || "Unassigned"}
+          </Button>
+          <Menu
+            anchorEl={assignAnchor}
+            open={Boolean(assignAnchor)}
+            onClose={() => onAssignAnchorChange(null)}
+          >
+            <MenuItem
+              onClick={() => {
+                onAssignAnchorChange(null);
+                onUnassign();
+              }}
+            >
+              Unassigned
+            </MenuItem>
+            {users.map((user) => (
+              <MenuItem
+                key={String(user.id)}
+                selected={wo.assignedTo === user.name}
+                onClick={() => {
+                  onAssignAnchorChange(null);
+                  onAssign(user.id, user.name);
+                }}
+              >
+                {user.name}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Box>
+        <WorkOrderDetailField label="Source" value={wo.source || "—"} />
+        <WorkOrderDetailField label="TT" value={wo.tt || "—"} />
+      </Box>
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx
new file mode 100644
index 00000000..101abf72
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx
@@ -0,0 +1,95 @@
+import { Link as RouterLink, useNavigate } from "react-router";
+import { Breadcrumbs, Button, Chip, Link, Menu, MenuItem, Stack, Typography } from "@mui/material";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+
+const STATUS_COLORS: Record<
+  string,
+  "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
+> = {
+  Open: "primary",
+  "In Progress": "info",
+  "On Hold": "warning",
+  Done: "success",
+  Cancelled: "default",
+};
+
+type WorkOrderViewHeaderProps = {
+  wo: WorkOrderDetail;
+  workOrderId: string;
+  statusAnchor: HTMLElement | null;
+  onStatusAnchorChange: (anchor: HTMLElement | null) => void;
+  onStatusChange: (status: string) => void;
+  onOpenDispatch: () => void;
+};
+
+export function WorkOrderViewHeader({
+  wo,
+  workOrderId,
+  statusAnchor,
+  onStatusAnchorChange,
+  onStatusChange,
+  onOpenDispatch,
+}: WorkOrderViewHeaderProps) {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <Breadcrumbs>
+        <Link component={RouterLink} to="/workorders" underline="hover">
+          Work Orders
+        </Link>
+        <Typography sx={{ color: "text.primary" }}>{wo.internalWONumber}</Typography>
+      </Breadcrumbs>
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{ justifyContent: "space-between", alignItems: { xs: "stretch", md: "flex-start" } }}
+      >
+        <Stack spacing={1}>
+          <Typography variant="h5" component="h1">
+            {wo.title}
+          </Typography>
+          <Chip
+            label={wo.status}
+            color={STATUS_COLORS[wo.status] ?? "default"}
+            onClick={(event) => onStatusAnchorChange(event.currentTarget)}
+            className="w-fit cursor-pointer"
+          />
+          <Menu
+            anchorEl={statusAnchor}
+            open={Boolean(statusAnchor)}
+            onClose={() => onStatusAnchorChange(null)}
+          >
+            {WORK_ORDER_STATUS_OPTIONS.map((status) => (
+              <MenuItem
+                key={status}
+                selected={status === wo.status}
+                onClick={() => {
+                  onStatusAnchorChange(null);
+                  if (status !== wo.status) {
+                    onStatusChange(status);
+                  }
+                }}
+              >
+                {status}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: "wrap" }}>
+          <Button variant="contained" color="success" onClick={onOpenDispatch}>
+            Dispatch
+          </Button>
+          <Button variant="contained" onClick={() => navigate(`/workorders/edit/${workOrderId}`)}>
+            Edit
+          </Button>
+          <Button variant="outlined" onClick={() => navigate("/workorders")}>
+            Back to List
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts b/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts
new file mode 100644
index 00000000..d2dc9183
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts
@@ -0,0 +1,149 @@
+import { useMemo, useState } from "react";
+import type { VendorEditorState } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-types";
+import { isVendorEditorValid } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils";
+import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddWorkOrderComment,
+  useChangeWorkOrderAssignment,
+  useChangeWorkOrderStatus,
+  useUpdateWorkOrderVendor,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import { extractMentionIds } from "@/domain/work-orders/utils/comment-mentions";
+
+export function useWorkOrderViewPage(workOrderId: string) {
+  const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
+  const { data: users = [] } = useWorkOrderUsers();
+  const statusMutation = useChangeWorkOrderStatus(workOrderId);
+  const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
+  const commentMutation = useAddWorkOrderComment(workOrderId);
+  const vendorMutation = useUpdateWorkOrderVendor(workOrderId);
+
+  const [dispatchOpen, setDispatchOpen] = useState(false);
+  const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
+  const [statusAnchor, setStatusAnchor] = useState<HTMLElement | null>(null);
+  const [assignAnchor, setAssignAnchor] = useState<HTMLElement | null>(null);
+  const [vendorEditor, setVendorEditor] = useState<VendorEditorState | null>(null);
+  const [vendorEditorLoading, setVendorEditorLoading] = useState(false);
+  const [vendorEditorError, setVendorEditorError] = useState("");
+
+  const customerComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "customer"),
+    [wo?.comments],
+  );
+  const internalComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "internal"),
+    [wo?.comments],
+  );
+  const auditLog = wo?.auditLog ?? [];
+  const mentionUsers = useMemo(
+    () => users.map((user) => ({ id: user.id, name: user.name })),
+    [users],
+  );
+
+  const submitComment = async (text: string) => {
+    const mentions = extractMentionIds(text);
+    await commentMutation.mutateAsync({
+      text,
+      mentions: mentions.length > 0 ? mentions : undefined,
+      commentType: "internal",
+    });
+  };
+
+  const openVendorEditor = async (
+    event: React.MouseEvent,
+    vendorId: string | number,
+    vendorName: string,
+  ) => {
+    event.stopPropagation();
+    setVendorEditorError("");
+    setVendorEditorLoading(true);
+    setVendorEditor({
+      vendorId,
+      vendorName,
+      contactName: "",
+      phone: "",
+      email: "",
+      notes: "",
+    });
+
+    try {
+      const vendor = await vendorsApi.getById(vendorId);
+      setVendorEditor({
+        vendorId,
+        vendorName: vendor.companyName || vendorName,
+        contactName: vendor.contactName,
+        phone: vendor.phone,
+        email: vendor.email,
+        notes: vendor.notes,
+      });
+    } catch (vendorError) {
+      setVendorEditorError(
+        vendorError instanceof Error ? vendorError.message : "Unable to load vendor details",
+      );
+    } finally {
+      setVendorEditorLoading(false);
+    }
+  };
+
+  const saveVendorEditor = () => {
+    if (!vendorEditor || !isVendorEditorValid(vendorEditor)) return;
+    const numericWorkOrderId = Number(workOrderId);
+    if (!Number.isInteger(numericWorkOrderId) || numericWorkOrderId <= 0) {
+      setVendorEditorError("A valid work order is required");
+      return;
+    }
+
+    vendorMutation.mutate(
+      {
+        vendorId: vendorEditor.vendorId,
+        payload: {
+          workOrderId: numericWorkOrderId,
+          contactName: vendorEditor.contactName.trim(),
+          phone: vendorEditor.phone,
+          email: vendorEditor.email.trim(),
+          notes: vendorEditor.notes.trim(),
+        },
+      },
+      {
+        onSuccess: () => {
+          setVendorEditor(null);
+          void refetch();
+        },
+        onError: (vendorError) => setVendorEditorError(vendorError.message),
+      },
+    );
+  };
+
+  return {
+    wo,
+    isLoading,
+    error,
+    refetch,
+    users,
+    customerComments,
+    internalComments,
+    auditLog,
+    mentionUsers,
+    submitComment,
+    dispatchOpen,
+    setDispatchOpen,
+    dispatchDetailId,
+    setDispatchDetailId,
+    statusAnchor,
+    setStatusAnchor,
+    assignAnchor,
+    setAssignAnchor,
+    vendorEditor,
+    setVendorEditor,
+    vendorEditorLoading,
+    vendorEditorError,
+    openVendorEditor,
+    saveVendorEditor,
+    statusMutation,
+    assignmentMutation,
+    commentMutation,
+    vendorMutation,
+  };
+}
diff --git a/src/components/common/comment-body-with-mentions.tsx b/src/components/common/comment-body-with-mentions.tsx
new file mode 100644
index 00000000..a7566e70
--- /dev/null
+++ b/src/components/common/comment-body-with-mentions.tsx
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { Box } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import {
+  buildCommentBodySegments,
+  type MentionLookup,
+} from "@/domain/work-orders/utils/comment-mentions";
+
+type CommentBodyWithMentionsProps = {
+  text: string;
+  mentions?: string[];
+  users?: MentionLookup[];
+};
+
+export function CommentBodyWithMentions({ text, mentions, users }: CommentBodyWithMentionsProps) {
+  const segments = useMemo(
+    () => buildCommentBodySegments(text, mentions, users),
+    [text, mentions, users],
+  );
+
+  if (segments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Text variant="description" as="span">
+      {segments.map((segment, index) => {
+        if (segment.type === "text") {
+          return <span key={`text-${index}`}>{segment.value}</span>;
+        }
+
+        return (
+          <Box
+            component="span"
+            key={`mention-${segment.userId}-${index}`}
+            className="font-semibold text-primary"
+          >
+            @{segment.label}
+          </Box>
+        );
+      })}
+    </Text>
+  );
+}
diff --git a/src/components/common/comment-mention-composer.tsx b/src/components/common/comment-mention-composer.tsx
new file mode 100644
index 00000000..140753b0
--- /dev/null
+++ b/src/components/common/comment-mention-composer.tsx
@@ -0,0 +1,205 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Box,
+  ClickAwayListener,
+  List,
+  ListItemButton,
+  Paper,
+  Popper,
+  TextField,
+} from "@mui/material";
+import {
+  filterMentionCandidates,
+  findActiveMentionQuery,
+  insertMentionToken,
+  type MentionLookup,
+} from "@/domain/work-orders/utils/comment-mentions";
+
+type CommentMentionComposerProps = {
+  value: string;
+  onChange: (value: string) => void;
+  candidates: MentionLookup[];
+  placeholder?: string;
+  disabled?: boolean;
+  rows?: number;
+  onSubmit?: () => void;
+};
+
+type MentionCandidateMenuProps = {
+  open: boolean;
+  anchorEl: HTMLElement | null;
+  candidates: MentionLookup[];
+  highlightIndex: number;
+  onSelect: (user: MentionLookup) => void;
+};
+
+function MentionCandidateMenu({
+  open,
+  anchorEl,
+  candidates,
+  highlightIndex,
+  onSelect,
+}: MentionCandidateMenuProps) {
+  return (
+    <Popper open={open} anchorEl={anchorEl} placement="bottom-start" className="z-50">
+      <Paper elevation={4} className="mt-1 max-h-48 overflow-y-auto">
+        <List dense disablePadding>
+          {candidates.map((candidate, index) => (
+            <ListItemButton
+              key={String(candidate.id)}
+              selected={index === highlightIndex}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => onSelect(candidate)}
+            >
+              @{candidate.name}
+            </ListItemButton>
+          ))}
+        </List>
+      </Paper>
+    </Popper>
+  );
+}
+
+export function CommentMentionComposer({
+  value,
+  onChange,
+  candidates,
+  placeholder = "Type a comment...",
+  disabled = false,
+  rows = 2,
+  onSubmit,
+}: CommentMentionComposerProps) {
+  const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [cursor, setCursor] = useState(0);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [highlightIndex, setHighlightIndex] = useState(0);
+
+  const activeQuery = useMemo(() => findActiveMentionQuery(value, cursor), [value, cursor]);
+
+  const filteredCandidates = useMemo(
+    () => filterMentionCandidates(candidates, activeQuery?.query ?? ""),
+    [activeQuery?.query, candidates],
+  );
+
+  const showMenu = Boolean(menuOpen && activeQuery && filteredCandidates.length > 0);
+
+  useEffect(() => {
+    setHighlightIndex(0);
+  }, [activeQuery?.query, activeQuery?.start]);
+
+  const syncCursor = useCallback((textOverride?: string) => {
+    const element = inputRef.current;
+    if (!element) {
+      return;
+    }
+
+    const text = textOverride ?? element.value;
+    const nextCursor = element.selectionStart ?? text.length;
+    setCursor(nextCursor);
+    setMenuOpen(Boolean(findActiveMentionQuery(text, nextCursor)));
+  }, []);
+
+  const handleChange = (nextValue: string) => {
+    onChange(nextValue);
+    requestAnimationFrame(() => {
+      syncCursor(nextValue);
+    });
+  };
+
+  const applyMention = useCallback(
+    (user: MentionLookup) => {
+      if (!activeQuery) {
+        return;
+      }
+
+      const { nextText, nextCursor } = insertMentionToken(value, activeQuery.start, cursor, user);
+      onChange(nextText);
+      setMenuOpen(false);
+      setHighlightIndex(0);
+
+      requestAnimationFrame(() => {
+        const element = inputRef.current;
+        if (!element) {
+          return;
+        }
+        element.focus();
+        element.setSelectionRange(nextCursor, nextCursor);
+        setCursor(nextCursor);
+      });
+    },
+    [activeQuery, cursor, onChange, value],
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (showMenu) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setHighlightIndex((current) => (current + 1) % filteredCandidates.length);
+        return;
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setHighlightIndex(
+          (current) => (current - 1 + filteredCandidates.length) % filteredCandidates.length,
+        );
+        return;
+      }
+
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        const selected = filteredCandidates[highlightIndex];
+        if (selected) {
+          applyMention(selected);
+        }
+        return;
+      }
+
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setMenuOpen(false);
+        return;
+      }
+    }
+
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && onSubmit) {
+      event.preventDefault();
+      onSubmit();
+    }
+  };
+
+  return (
+    <ClickAwayListener onClickAway={() => setMenuOpen(false)}>
+      <Box
+        className="relative"
+        ref={(node: HTMLDivElement | null) => {
+          setAnchorEl(node);
+        }}
+      >
+        <TextField
+          inputRef={inputRef}
+          multiline
+          rows={rows}
+          fullWidth
+          value={value}
+          onChange={(event) => handleChange(event.target.value)}
+          onClick={() => syncCursor()}
+          onKeyUp={() => syncCursor()}
+          onSelect={() => syncCursor()}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+        />
+
+        <MentionCandidateMenu
+          open={showMenu}
+          anchorEl={anchorEl}
+          candidates={filteredCandidates}
+          highlightIndex={highlightIndex}
+          onSelect={applyMention}
+        />
+      </Box>
+    </ClickAwayListener>
+  );
+}
diff --git a/src/components/common/comment-timeline-mappers.ts b/src/components/common/comment-timeline-mappers.ts
index aad27c4b..324e1230 100644
--- a/src/components/common/comment-timeline-mappers.ts
+++ b/src/components/common/comment-timeline-mappers.ts
@@ -6,6 +6,7 @@ type CommentSource = {
   commenter?: string | null;
   createdDate?: string;
   commenttext: string;
+  mentions?: string[];
 };
 
 export function mapWorkOrderCommentsToTimeline(comments: CommentSource[]): CommentTimelineItem[] {
@@ -14,6 +15,7 @@ export function mapWorkOrderCommentsToTimeline(comments: CommentSource[]): Comme
     author: comment.userName || comment.commenter || "System",
     createdAt: comment.createdDate,
     body: comment.commenttext,
+    mentions: comment.mentions,
   }));
 }
 
diff --git a/src/components/common/comment-timeline.tsx b/src/components/common/comment-timeline.tsx
index d0404ba7..4f9c9dea 100644
--- a/src/components/common/comment-timeline.tsx
+++ b/src/components/common/comment-timeline.tsx
@@ -1,5 +1,8 @@
 import { useMemo } from "react";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { CommentBodyWithMentions } from "@/components/common/comment-body-with-mentions";
+import { Text } from "@/components/ui/text";
+import type { MentionLookup } from "@/domain/work-orders/utils/comment-mentions";
 import { formatDateTime } from "@/lib/time-utils";
 
 export type CommentTimelineItem = {
@@ -7,18 +10,20 @@ export type CommentTimelineItem = {
   author: string;
   createdAt?: string;
   body: string;
+  mentions?: string[];
 };
 
 type CommentTimelineProps = {
   items: CommentTimelineItem[];
   emptyMessage?: string;
   maxHeightClass?: string;
+  mentionUsers?: MentionLookup[];
 };
-
 export function CommentTimeline({
   items,
   emptyMessage = "No comments yet.",
   maxHeightClass = "max-h-72",
+  mentionUsers,
 }: CommentTimelineProps) {
   const sorted = useMemo(
     () =>
@@ -31,7 +36,7 @@ export function CommentTimeline({
   );
 
   if (!sorted.length) {
-    return <Typography color="text.secondary">{emptyMessage}</Typography>;
+    return <Text tone="muted">{emptyMessage}</Text>;
   }
 
   return (
@@ -39,14 +44,14 @@ export function CommentTimeline({
       {sorted.map((item) => (
         <Box key={String(item.id)} className="rounded border border-border p-3">
           <Stack direction="row" className="mb-1" sx={{ justifyContent: "space-between" }}>
-            <Typography variant="caption" className="font-semibold">
+            <Text variant="caption" className="font-semibold">
               {item.author}
-            </Typography>
-            <Typography variant="caption" color="text.secondary">
+            </Text>
+            <Text variant="caption" tone="muted">
               {item.createdAt ? formatDateTime(item.createdAt) : ""}
-            </Typography>
+            </Text>
           </Stack>
-          <Typography variant="body2">{item.body}</Typography>
+          <CommentBodyWithMentions text={item.body} mentions={item.mentions} users={mentionUsers} />
         </Box>
       ))}
     </Stack>
diff --git a/src/domain/vendors/utils/build-technician-create-payload.ts b/src/domain/vendors/utils/build-technician-create-payload.ts
new file mode 100644
index 00000000..ff905c78
--- /dev/null
+++ b/src/domain/vendors/utils/build-technician-create-payload.ts
@@ -0,0 +1,36 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+
+type BuildTechnicianCreatePayloadInput = {
+  companyVendor: Pick<VendorDropdownItem, "companyName" | "email" | "address" | "tradeSpecialties">;
+  contactName: string;
+  phone?: string;
+  companyId?: string | number | null;
+};
+
+/** Builds a vendor create payload for a new technician under an existing company. */
+export function buildTechnicianCreatePayload({
+  companyVendor,
+  contactName,
+  phone = "",
+  companyId = null,
+}: BuildTechnicianCreatePayloadInput): VendorFormValues {
+  return {
+    companyName: companyVendor.companyName,
+    contactName: contactName.trim(),
+    email: companyVendor.email ?? "",
+    phone: phone.trim(),
+    companyPhone: "",
+    googleMapsUrl: "",
+    notes: "",
+    totalJobs: 0,
+    address: companyVendor.address ?? "",
+    city: "",
+    state: "",
+    zip: "",
+    tradeSpecialties: companyVendor.tradeSpecialties ?? "",
+    isActive: true,
+    companyId,
+    preferredContact: "Phone",
+  };
+}
diff --git a/src/domain/vendors/utils/draft-vendor.ts b/src/domain/vendors/utils/draft-vendor.ts
new file mode 100644
index 00000000..c701a525
--- /dev/null
+++ b/src/domain/vendors/utils/draft-vendor.ts
@@ -0,0 +1,21 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+
+export const DRAFT_VENDOR_ID_PREFIX = "draft:";
+
+export function isDraftVendorId(id: string | number | null | undefined): boolean {
+  return String(id ?? "").startsWith(DRAFT_VENDOR_ID_PREFIX);
+}
+
+export function createDraftVendorDropdownItem(payload: VendorFormValues): VendorDropdownItem {
+  const email = (payload.email ?? "").trim();
+  return {
+    id: `${DRAFT_VENDOR_ID_PREFIX}${crypto.randomUUID()}`,
+    companyName: payload.companyName,
+    contactName: payload.contactName,
+    tradeSpecialties: payload.tradeSpecialties ?? "",
+    address: payload.address ?? "",
+    distanceMiles: null,
+    email: email || undefined,
+  };
+}
diff --git a/src/domain/vendors/utils/vendor-to-dropdown-item.ts b/src/domain/vendors/utils/vendor-to-dropdown-item.ts
new file mode 100644
index 00000000..7be47134
--- /dev/null
+++ b/src/domain/vendors/utils/vendor-to-dropdown-item.ts
@@ -0,0 +1,15 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+
+export function vendorToDropdownItem(vendor: Vendor): VendorDropdownItem {
+  const email = vendor.email.trim();
+  return {
+    id: vendor.id ?? "",
+    companyName: vendor.companyName,
+    contactName: vendor.contactName,
+    tradeSpecialties: vendor.tradeSpecialties,
+    address: vendor.address,
+    distanceMiles: null,
+    email: email || undefined,
+  };
+}
diff --git a/src/domain/work-orders/api/work-order-board-documents-api.ts b/src/domain/work-orders/api/work-order-board-documents-api.ts
index 5532459f..0560785e 100644
--- a/src/domain/work-orders/api/work-order-board-documents-api.ts
+++ b/src/domain/work-orders/api/work-order-board-documents-api.ts
@@ -20,6 +20,11 @@ import type {
 } from "@/domain/work-orders/types/work-order-board-detail";
 import type { WorkOrderComment } from "@/domain/work-orders/types/work-order";
 
+export interface CreateWorkOrderCommentPayload {
+  text: string;
+  mentions?: string[];
+}
+
 async function readResponseJson(response: Response): Promise<unknown> {
   try {
     return await response.json();
@@ -57,8 +62,17 @@ export const workOrderBoardDocumentsApi = {
     return Array.isArray(items) ? items.map(mapBoardDetailComment) : [];
   },
 
-  createComment: async (workOrderId: string | number, text: string): Promise<WorkOrderComment> => {
-    const data = await apiPost<unknown>(API_PATHS.workOrder.comments(workOrderId), { text });
+  createComment: async (
+    workOrderId: string | number,
+    text: string,
+    mentions?: string[],
+  ): Promise<WorkOrderComment> => {
+    const payload: CreateWorkOrderCommentPayload = { text };
+    if (mentions && mentions.length > 0) {
+      payload.mentions = mentions.map(String);
+    }
+
+    const data = await apiPost<unknown>(API_PATHS.workOrder.comments(workOrderId), payload);
     return mapBoardDetailComment(handleApiResponse(data));
   },
 
diff --git a/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts b/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
index fffd515b..3b513279 100644
--- a/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
+++ b/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
@@ -61,6 +61,33 @@ function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolea
   return false;
 }
 
+function readStringArray(record: Record<string, unknown>, ...keys: string[]): string[] {
+  for (const key of keys) {
+    const value = record[key];
+    if (!Array.isArray(value)) {
+      continue;
+    }
+
+    const mapped = value
+      .map((entry) => {
+        if (typeof entry === "string") {
+          return entry;
+        }
+        if (typeof entry === "number" || typeof entry === "boolean") {
+          return String(entry);
+        }
+        return "";
+      })
+      .filter(Boolean);
+
+    if (mapped.length > 0) {
+      return mapped;
+    }
+  }
+
+  return [];
+}
+
 function mapDocStatus(raw: unknown): CompletionDocStatus {
   const numeric = typeof raw === "number" ? raw : Number(raw);
   if (numeric === DOC_STATUS_API.Yes) return "Yes";
@@ -93,6 +120,7 @@ export function mapBoardDetailComment(raw: unknown): WorkOrderComment {
     authorId,
     commenter: readString(item, "commenter", "Commenter") || null,
     recordType: readString(item, "recordType", "RecordType") || null,
+    mentions: readStringArray(item, "mentions", "Mentions"),
   };
 }
 
diff --git a/src/domain/work-orders/mappers/work-order-mapper.ts b/src/domain/work-orders/mappers/work-order-mapper.ts
index 0705c4b0..f0091b55 100644
--- a/src/domain/work-orders/mappers/work-order-mapper.ts
+++ b/src/domain/work-orders/mappers/work-order-mapper.ts
@@ -214,6 +214,12 @@ export { mapWorkOrderTableRow, mapWorkOrderTableRows } from "./work-order-table-
 
 export function mapWorkOrderComment(raw: unknown): WorkOrderComment {
   const item = asRecord(raw);
+  const mentionsRaw = item.mentions ?? item.Mentions;
+  const mentions = Array.isArray(mentionsRaw)
+    ? mentionsRaw
+        .map((entry) => (typeof entry === "string" ? entry : String(entry)))
+        .filter(Boolean)
+    : undefined;
 
   return {
     id: readId(item),
@@ -223,6 +229,7 @@ export function mapWorkOrderComment(raw: unknown): WorkOrderComment {
     userName: readString(item, "userName", "UserName"),
     commenter: readString(item, "commenter", "Commenter") || null,
     recordType: readString(item, "recordType", "RecordType") || null,
+    mentions,
   };
 }
 
diff --git a/src/domain/work-orders/types/work-order-board-detail.ts b/src/domain/work-orders/types/work-order-board-detail.ts
index 590aee84..ab3737b2 100644
--- a/src/domain/work-orders/types/work-order-board-detail.ts
+++ b/src/domain/work-orders/types/work-order-board-detail.ts
@@ -94,6 +94,7 @@ export interface WorkOrderBoardDetailCommentApi {
   text?: string | null;
   time?: string | null;
   documents?: unknown;
+  mentions?: string[] | null;
 }
 
 export interface WorkOrderBoardDetailAuditApi {
diff --git a/src/domain/work-orders/types/work-order-detail.ts b/src/domain/work-orders/types/work-order-detail.ts
index 8c492a99..d3d2fa87 100644
--- a/src/domain/work-orders/types/work-order-detail.ts
+++ b/src/domain/work-orders/types/work-order-detail.ts
@@ -11,6 +11,8 @@ export interface WorkOrderComment {
   authorId?: string | null;
   commenter: string | null;
   recordType: string | null;
+  /** Mentioned user ids when returned by board comments API. */
+  mentions?: string[];
 }
 
 export interface WorkOrderAuditEntry {
diff --git a/src/domain/work-orders/use-cases/use-work-order-mutations.ts b/src/domain/work-orders/use-cases/use-work-order-mutations.ts
index 82667f19..e795c290 100644
--- a/src/domain/work-orders/use-cases/use-work-order-mutations.ts
+++ b/src/domain/work-orders/use-cases/use-work-order-mutations.ts
@@ -38,8 +38,9 @@ function invalidateBoardDetail(
   void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
 }
 
-interface AddWorkOrderCommentInput {
+export interface AddWorkOrderCommentInput {
   text: string;
+  mentions?: string[];
   commentType?: "customer" | "internal";
 }
 
@@ -78,12 +79,12 @@ export interface AddDispatchSignoffInput {
   signatureMethod: string;
 }
 
-interface ChangeWorkOrderAssignmentInput {
+export interface ChangeWorkOrderAssignmentInput {
   userId: string | number;
   userName: string;
 }
 
-interface UpdateWorkOrderVendorInput {
+export interface UpdateWorkOrderVendorInput {
   vendorId: string | number;
   payload: WorkOrderVendorUpdatePayload;
 }
@@ -157,8 +158,8 @@ export function useAddWorkOrderComment(
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ text }: AddWorkOrderCommentInput) =>
-      workOrdersApi.createComment(workOrderId, text),
+    mutationFn: ({ text, mentions }: AddWorkOrderCommentInput) =>
+      workOrdersApi.createComment(workOrderId, text, mentions),
     onSuccess: () => {
       invalidateBoardDetail(queryClient, workOrderId);
     },
diff --git a/src/domain/work-orders/utils/comment-mentions.ts b/src/domain/work-orders/utils/comment-mentions.ts
new file mode 100644
index 00000000..b3542bcd
--- /dev/null
+++ b/src/domain/work-orders/utils/comment-mentions.ts
@@ -0,0 +1,188 @@
+/** Encoded mention token stored in comment text: `@[userId:Display Name]`. */
+export const MENTION_TOKEN_PATTERN = /@\[([^:\]]+):([^\]]+)\]/g;
+
+export type CommentBodySegment =
+  { type: "text"; value: string } | { type: "mention"; userId: string; label: string };
+
+export type MentionLookup = {
+  id: string | number;
+  name: string;
+};
+
+export function encodeMentionToken(userId: string | number, userName: string): string {
+  const trimmedName = userName.trim();
+  return `@[${String(userId)}:${trimmedName}]`;
+}
+
+export function extractMentionIds(text: string): string[] {
+  const ids: string[] = [];
+  const pattern = new RegExp(MENTION_TOKEN_PATTERN.source, "g");
+
+  for (const match of text.matchAll(pattern)) {
+    const userId = match[1];
+    if (userId && !ids.includes(userId)) {
+      ids.push(userId);
+    }
+  }
+
+  return ids;
+}
+
+export function toDisplayText(text: string): string {
+  return text.replace(MENTION_TOKEN_PATTERN, (_full, _userId: string, userName: string) => {
+    return `@${userName}`;
+  });
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function pushTextSegment(segments: CommentBodySegment[], value: string): void {
+  if (!value) {
+    return;
+  }
+
+  const last = segments.length > 0 ? segments[segments.length - 1] : undefined;
+  if (last?.type === "text") {
+    last.value += value;
+    return;
+  }
+
+  segments.push({ type: "text", value });
+}
+
+function resolveMentionNames(
+  mentionIds: string[] | undefined,
+  users: MentionLookup[] | undefined,
+): Map<string, string> {
+  const byId = new Map<string, string>();
+  const usersById = new Map((users ?? []).map((user) => [String(user.id), user.name] as const));
+
+  // Only ids that were actually mentioned — never seed the full dispatcher roster.
+  for (const mentionId of mentionIds ?? []) {
+    const id = String(mentionId);
+    byId.set(id, usersById.get(id) ?? id);
+  }
+
+  return byId;
+}
+
+function appendPlainMentionMatches(
+  segments: CommentBodySegment[],
+  plainText: string,
+  mentionNames: string[],
+): void {
+  if (!plainText || mentionNames.length === 0) {
+    pushTextSegment(segments, plainText);
+    return;
+  }
+
+  const sortedNames = [...mentionNames].sort((a, b) => b.length - a.length);
+  const namePattern = sortedNames.map((name) => escapeRegExp(name)).join("|");
+  // Require a non-word boundary after the name so "@Ann" does not match inside "@Annual".
+  const mentionRegex = new RegExp(`@(${namePattern})(?![\\w])`, "g");
+
+  let cursor = 0;
+  for (const match of plainText.matchAll(mentionRegex)) {
+    const index = match.index ?? 0;
+    pushTextSegment(segments, plainText.slice(cursor, index));
+
+    const label = match[1] ?? "";
+    segments.push({ type: "mention", userId: label, label });
+    cursor = index + match[0].length;
+  }
+
+  pushTextSegment(segments, plainText.slice(cursor));
+}
+
+export function buildCommentBodySegments(
+  text: string,
+  mentionIds?: string[],
+  users?: MentionLookup[],
+): CommentBodySegment[] {
+  if (!text) {
+    return [];
+  }
+
+  const segments: CommentBodySegment[] = [];
+  const encodedPattern = new RegExp(MENTION_TOKEN_PATTERN.source, "g");
+  const mentionNameById = resolveMentionNames(mentionIds, users);
+  const encodedLabels: string[] = [];
+  for (const match of text.matchAll(new RegExp(MENTION_TOKEN_PATTERN.source, "g"))) {
+    const label = match[2]?.trim();
+    if (label) encodedLabels.push(label);
+  }
+  const mentionNames = [...new Set([...mentionNameById.values(), ...encodedLabels])].filter(
+    Boolean,
+  );
+  let cursor = 0;
+
+  for (const match of text.matchAll(encodedPattern)) {
+    const index = match.index ?? 0;
+    const plainBetween = text.slice(cursor, index);
+    appendPlainMentionMatches(segments, plainBetween, mentionNames);
+
+    const userId = match[1] ?? "";
+    const label = match[2] ?? userId;
+    segments.push({ type: "mention", userId, label });
+    cursor = index + match[0].length;
+  }
+
+  const trailingPlain = text.slice(cursor);
+  appendPlainMentionMatches(segments, trailingPlain, mentionNames);
+
+  return segments.length > 0 ? segments : [{ type: "text", value: text }];
+}
+
+export type ActiveMentionQuery = {
+  start: number;
+  query: string;
+};
+
+export function findActiveMentionQuery(text: string, cursor: number): ActiveMentionQuery | null {
+  const beforeCursor = text.slice(0, cursor);
+  const atIndex = beforeCursor.lastIndexOf("@");
+
+  if (atIndex < 0) {
+    return null;
+  }
+
+  const prefix = beforeCursor.slice(0, atIndex);
+  const lastPrefixChar = prefix.length > 0 ? prefix[prefix.length - 1] : "";
+  if (prefix.length > 0 && !/\s/.test(lastPrefixChar)) {
+    return null;
+  }
+
+  const query = beforeCursor.slice(atIndex + 1);
+  if (/[\n\r\t[\]]/.test(query)) {
+    return null;
+  }
+
+  return { start: atIndex, query };
+}
+
+export function filterMentionCandidates(
+  candidates: MentionLookup[],
+  query: string,
+): MentionLookup[] {
+  const normalized = query.trim().toLowerCase();
+  const filtered = normalized
+    ? candidates.filter((candidate) => candidate.name.toLowerCase().includes(normalized))
+    : candidates;
+
+  return filtered.slice(0, 8);
+}
+
+export function insertMentionToken(
+  text: string,
+  queryStart: number,
+  cursor: number,
+  user: MentionLookup,
+): { nextText: string; nextCursor: number } {
+  const token = `${encodeMentionToken(user.id, user.name)} `;
+  const nextText = `${text.slice(0, queryStart)}${token}${text.slice(cursor)}`;
+  const nextCursor = queryStart + token.length;
+
+  return { nextText, nextCursor };
+}
diff --git a/src/test/app/(protected)/workorders/resolve-technician-key.test.ts b/src/test/app/(protected)/workorders/resolve-technician-key.test.ts
new file mode 100644
index 00000000..c2d2bce3
--- /dev/null
+++ b/src/test/app/(protected)/workorders/resolve-technician-key.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { resolveTechnicianKey } from "@/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+const vendors: VendorDropdownItem[] = [
+  {
+    id: 10,
+    companyName: "Gateway Plumbing",
+    contactName: "Jordan Lee",
+    tradeSpecialties: "Plumbing",
+    address: "1 Main St",
+    distanceMiles: 4.2,
+    email: "dispatch@gateway.test",
+  },
+  {
+    id: 11,
+    companyName: "Gateway Plumbing",
+    contactName: "Adam Whyte",
+    tradeSpecialties: "Plumbing",
+    address: "1 Main St",
+    distanceMiles: 4.2,
+    email: "dispatch@gateway.test",
+  },
+];
+
+describe("resolveTechnicianKey", () => {
+  it("prefers a stable vendorId when it exists in the list", () => {
+    expect(resolveTechnicianKey(11, "Jordan Lee", "Gateway Plumbing", vendors)).toBe("11");
+  });
+
+  it("falls back to name+company when vendorId is missing", () => {
+    expect(resolveTechnicianKey("", "Jordan Lee", "Gateway Plumbing", vendors)).toBe("10");
+  });
+
+  it("keeps orphan tech string as key when no vendor matches", () => {
+    expect(resolveTechnicianKey("", "Unknown Tech", "Gateway Plumbing", vendors)).toBe(
+      "Unknown Tech",
+    );
+  });
+
+  it("keeps vendorId when the vendors list is still empty", () => {
+    expect(resolveTechnicianKey(42, "Jordan Lee", "Gateway Plumbing", [])).toBe("42");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-add-technician.test.tsx b/src/test/app/(protected)/workorders/vendor-dialog-add-technician.test.tsx
new file mode 100644
index 00000000..0f8ee6a5
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-add-technician.test.tsx
@@ -0,0 +1,51 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { VendorDialogAddTechnician } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { isDraftVendorId } from "@/domain/vendors/utils/draft-vendor";
+import { renderWithProviders } from "@/test/test-utils";
+
+const companyVendor: VendorDropdownItem = {
+  id: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Adam Whyte",
+  tradeSpecialties: "Plumbing",
+  address: "1 Main St",
+  distanceMiles: 4.2,
+  email: "dispatch@gateway.test",
+};
+
+describe("VendorDialogAddTechnician", () => {
+  it("stages a draft technician locally without calling the create API", () => {
+    const onCreated = vi.fn();
+
+    renderWithProviders(
+      <VendorDialogAddTechnician
+        companyName="Gateway Plumbing"
+        companyVendor={companyVendor}
+        onCreated={onCreated}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /\+ add technician/i }));
+    fireEvent.change(screen.getByPlaceholderText("Full name"), {
+      target: { value: "Jordan Lee" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("(000) 000-0000"), {
+      target: { value: "3145550199" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^add$/i }));
+
+    expect(onCreated).toHaveBeenCalledTimes(1);
+    const [draftVendor, phone, payload] = onCreated.mock.calls[0] ?? [];
+    expect(isDraftVendorId(draftVendor.id)).toBe(true);
+    expect(draftVendor.contactName).toBe("Jordan Lee");
+    expect(phone).toBeTruthy();
+    expect(payload).toEqual(
+      expect.objectContaining({
+        companyName: "Gateway Plumbing",
+        contactName: "Jordan Lee",
+      }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-stable-identity.test.tsx b/src/test/app/(protected)/workorders/vendor-dialog-stable-identity.test.tsx
new file mode 100644
index 00000000..c987eab5
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-stable-identity.test.tsx
@@ -0,0 +1,178 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { VendorDialog } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { renderWithProviders } from "@/test/test-utils";
+
+const mutateAsync = vi.fn();
+
+vi.mock("@/domain/vendors/use-cases/use-create-vendor", () => ({
+  useCreateVendor: () => ({
+    mutateAsync,
+    isPending: false,
+  }),
+}));
+
+const existingVendor: VendorDropdownItem = {
+  id: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Jordan Lee",
+  tradeSpecialties: "Plumbing",
+  address: "1 Main St",
+  distanceMiles: 4.2,
+  email: "dispatch@gateway.test",
+};
+
+const createdVendor: Vendor = {
+  id: 99,
+  companyId: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Jordan Lee",
+  email: "dispatch@gateway.test",
+  phone: "(314) 555-9999",
+  companyPhone: "",
+  googleMapsUrl: "",
+  notes: "",
+  totalJobs: 0,
+  address: "1 Main St",
+  city: "",
+  state: "",
+  zip: "",
+  tradeSpecialties: "Plumbing",
+  isActive: true,
+  preferredContact: "Phone",
+};
+
+describe("VendorDialog stable technician identity", () => {
+  beforeEach(() => {
+    mutateAsync.mockReset();
+    mutateAsync.mockResolvedValue(createdVendor);
+  });
+
+  it("keeps draft identity on same-name collision and posts live phone on save", async () => {
+    const onSave = vi.fn();
+    const onOpenChange = vi.fn();
+
+    renderWithProviders(
+      <VendorDialog
+        open={true}
+        onOpenChange={onOpenChange}
+        vendorId={10}
+        company="Gateway Plumbing"
+        tech="Jordan Lee"
+        techPhone="(314) 555-0100"
+        vendors={[existingVendor]}
+        onSave={onSave}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /\+ add technician/i }));
+    fireEvent.change(screen.getByPlaceholderText("Full name"), {
+      target: { value: "Jordan Lee" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("(000) 000-0000"), {
+      target: { value: "3145550199" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^add$/i }));
+
+    // Draft stays staged: add form collapses and select still shows the colliding name.
+    expect(screen.getByRole("button", { name: /\+ add technician/i })).toBeTruthy();
+    expect(screen.getByText("Jordan Lee · Gateway Plumbing")).toBeTruthy();
+
+    fireEvent.change(screen.getByDisplayValue("3145550199"), {
+      target: { value: "(314) 555-9999" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+
+    await waitFor(() => {
+      expect(mutateAsync).toHaveBeenCalledTimes(1);
+    });
+
+    expect(mutateAsync).toHaveBeenCalledWith(
+      expect.objectContaining({
+        contactName: "Jordan Lee",
+        companyName: "Gateway Plumbing",
+        phone: "(314) 555-9999",
+      }),
+    );
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          vendorId: "99",
+          tech: "Jordan Lee",
+          company: "Gateway Plumbing",
+          techPhone: "(314) 555-9999",
+        }),
+      );
+    });
+
+    // Must not persist the pre-existing colliding vendor id.
+    expect(onSave.mock.calls[0]?.[0].vendorId).not.toBe("10");
+  });
+
+  it("does not clear staged draft when technicianOptions rebuild after add", async () => {
+    const onSave = vi.fn();
+    mutateAsync.mockResolvedValue({
+      ...createdVendor,
+      id: 88,
+      contactName: "Casey New",
+      phone: "3145550188",
+    });
+
+    renderWithProviders(
+      <VendorDialog
+        open={true}
+        onOpenChange={vi.fn()}
+        vendorId={11}
+        company="Gateway Plumbing"
+        tech="Adam Whyte"
+        techPhone=""
+        vendors={[
+          existingVendor,
+          {
+            ...existingVendor,
+            id: 11,
+            contactName: "Adam Whyte",
+          },
+        ]}
+        onSave={onSave}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /\+ add technician/i }));
+    fireEvent.change(screen.getByPlaceholderText("Full name"), {
+      target: { value: "Casey New" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("(000) 000-0000"), {
+      target: { value: "3145550188" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^add$/i }));
+
+    expect(screen.getByText("Casey New · Gateway Plumbing")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+
+    await waitFor(() => {
+      expect(mutateAsync).toHaveBeenCalledTimes(1);
+    });
+
+    expect(mutateAsync).toHaveBeenCalledWith(
+      expect.objectContaining({
+        contactName: "Casey New",
+        phone: "3145550188",
+      }),
+    );
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          vendorId: "88",
+          tech: "Casey New",
+        }),
+      );
+    });
+  });
+});
diff --git a/src/test/components/common/comment-mention-composer.test.tsx b/src/test/components/common/comment-mention-composer.test.tsx
new file mode 100644
index 00000000..a732af50
--- /dev/null
+++ b/src/test/components/common/comment-mention-composer.test.tsx
@@ -0,0 +1,28 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+
+import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
+import { renderWithProviders } from "@/test/test-utils";
+
+const candidates = [{ id: "1", name: "Alice Dispatcher" }];
+
+function MentionComposerHarness() {
+  const [value, setValue] = useState("");
+
+  return <CommentMentionComposer value={value} onChange={setValue} candidates={candidates} />;
+}
+
+describe("CommentMentionComposer", () => {
+  it("keeps the suggestion menu visible after typing @", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<MentionComposerHarness />, { withAuth: false });
+
+    await user.type(screen.getByRole("textbox"), "@");
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "@Alice Dispatcher" })).toBeVisible();
+    });
+  });
+});
diff --git a/src/test/domain/vendors/utils/build-technician-create-payload.test.ts b/src/test/domain/vendors/utils/build-technician-create-payload.test.ts
new file mode 100644
index 00000000..844af97d
--- /dev/null
+++ b/src/test/domain/vendors/utils/build-technician-create-payload.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import {
+  mergeVendorDropdownItems,
+  resolveVendorCompanyAnchor,
+} from "@/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { buildTechnicianCreatePayload } from "@/domain/vendors/utils/build-technician-create-payload";
+import { vendorToDropdownItem } from "@/domain/vendors/utils/vendor-to-dropdown-item";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+
+describe("buildTechnicianCreatePayload", () => {
+  it("copies company fields and sets the new technician identity", () => {
+    const payload = buildTechnicianCreatePayload({
+      companyVendor: {
+        companyName: "Gateway Plumbing",
+        email: "dispatch@gateway.test",
+        address: "1 Main St",
+        tradeSpecialties: "Plumbing",
+      },
+      contactName: "Jordan Lee",
+      phone: "(314) 555-0100",
+      companyId: 42,
+    });
+
+    expect(payload).toMatchObject({
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      phone: "(314) 555-0100",
+      email: "dispatch@gateway.test",
+      address: "1 Main St",
+      tradeSpecialties: "Plumbing",
+      companyId: 42,
+      isActive: true,
+    });
+  });
+});
+
+describe("resolveVendorCompanyAnchor", () => {
+  const vendors: VendorDropdownItem[] = [
+    {
+      id: 10,
+      companyName: "Gateway Plumbing",
+      contactName: "Adam Whyte",
+      tradeSpecialties: "Plumbing",
+      address: "1 Main St",
+      distanceMiles: null,
+    },
+  ];
+
+  it("returns null anchor when no company context exists", () => {
+    expect(
+      resolveVendorCompanyAnchor({
+        company: "",
+        resolvedCompany: "",
+        selectedVendor: undefined,
+        vendors,
+      }),
+    ).toEqual({ companyName: "", companyVendor: null });
+  });
+
+  it("merges newly created vendors without dropping existing options", () => {
+    const added: VendorDropdownItem = {
+      id: 55,
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      tradeSpecialties: "Plumbing",
+      address: "1 Main St",
+      distanceMiles: null,
+    };
+    expect(mergeVendorDropdownItems(vendors, [added])).toHaveLength(2);
+  });
+});
+
+describe("vendorToDropdownItem", () => {
+  it("maps a created vendor into the work-order dropdown shape", () => {
+    const vendor: Vendor = {
+      id: 99,
+      companyId: "co-1",
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      email: "jordan@gateway.test",
+      phone: "(314) 555-0100",
+      companyPhone: "",
+      googleMapsUrl: "",
+      notes: "",
+      totalJobs: 0,
+      address: "1 Main St",
+      city: "St. Louis",
+      state: "MO",
+      zip: "63101",
+      tradeSpecialties: "Plumbing",
+      isActive: true,
+      preferredContact: "Phone",
+    };
+
+    expect(vendorToDropdownItem(vendor)).toEqual({
+      id: 99,
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      tradeSpecialties: "Plumbing",
+      address: "1 Main St",
+      distanceMiles: null,
+      email: "jordan@gateway.test",
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/api/work-orders-api.test.ts b/src/test/domain/work-orders/api/work-orders-api.test.ts
index 9466e814..af480a06 100644
--- a/src/test/domain/work-orders/api/work-orders-api.test.ts
+++ b/src/test/domain/work-orders/api/work-orders-api.test.ts
@@ -380,6 +380,15 @@ describe("workOrdersApi.createComment", () => {
     expect(comment.authorId).toBe("guid");
     expect(comment.createdDate).toBe("2026-06-01T12:00:00.0000000Z");
   });
+
+  it("POSTs mentions when provided", async () => {
+    await workOrdersApi.createComment(55, "Ping @[u1:Jane]", ["u1"]);
+
+    expect(apiPost).toHaveBeenCalledWith(API_PATHS.workOrder.comments(55), {
+      text: "Ping @[u1:Jane]",
+      mentions: ["u1"],
+    });
+  });
 });
 
 describe("workOrdersApi.updateComment", () => {
diff --git a/src/test/domain/work-orders/utils/comment-mentions.test.ts b/src/test/domain/work-orders/utils/comment-mentions.test.ts
new file mode 100644
index 00000000..95e03ebc
--- /dev/null
+++ b/src/test/domain/work-orders/utils/comment-mentions.test.ts
@@ -0,0 +1,118 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildCommentBodySegments,
+  encodeMentionToken,
+  extractMentionIds,
+  filterMentionCandidates,
+  findActiveMentionQuery,
+  insertMentionToken,
+  toDisplayText,
+} from "@/domain/work-orders/utils/comment-mentions";
+
+describe("comment-mentions", () => {
+  it("encodes and extracts mention ids from tokens", () => {
+    const token = encodeMentionToken("user-1", "Jane Doe");
+    const text = `Please review ${token} today`;
+
+    expect(text).toBe("Please review @[user-1:Jane Doe] today");
+    expect(extractMentionIds(text)).toEqual(["user-1"]);
+    expect(toDisplayText(text)).toBe("Please review @Jane Doe today");
+  });
+
+  it("builds highlight segments from encoded tokens", () => {
+    const text = `Hi ${encodeMentionToken("42", "Alex Smith")}!`;
+
+    expect(buildCommentBodySegments(text)).toEqual([
+      { type: "text", value: "Hi " },
+      { type: "mention", userId: "42", label: "Alex Smith" },
+      { type: "text", value: "!" },
+    ]);
+  });
+
+  it("highlights plain @names when response mentions are provided", () => {
+    const text = "Ping @Jane Doe about this";
+
+    expect(
+      buildCommentBodySegments(text, ["user-1"], [{ id: "user-1", name: "Jane Doe" }]),
+    ).toEqual([
+      { type: "text", value: "Ping " },
+      { type: "mention", userId: "Jane Doe", label: "Jane Doe" },
+      { type: "text", value: " about this" },
+    ]);
+  });
+
+  it("does not highlight casual @names from the full user roster without mentions", () => {
+    const text = "See @Jane Doe later";
+
+    expect(buildCommentBodySegments(text, undefined, [{ id: "user-1", name: "Jane Doe" }])).toEqual(
+      [{ type: "text", value: "See @Jane Doe later" }],
+    );
+  });
+
+  it("highlights plain @names before encoded tokens when mentioned", () => {
+    const encoded = encodeMentionToken("2", "Bob");
+    const text = `Hi @Jane Doe and ${encoded}`;
+
+    expect(
+      buildCommentBodySegments(
+        text,
+        ["user-1", "2"],
+        [
+          { id: "user-1", name: "Jane Doe" },
+          { id: "2", name: "Bob" },
+        ],
+      ),
+    ).toEqual([
+      { type: "text", value: "Hi " },
+      { type: "mention", userId: "Jane Doe", label: "Jane Doe" },
+      { type: "text", value: " and " },
+      { type: "mention", userId: "2", label: "Bob" },
+    ]);
+  });
+
+  it("does not highlight shorter mention names as prefixes of longer @words", () => {
+    const text = "Check @Annual maintenance with @Ann";
+
+    expect(buildCommentBodySegments(text, ["user-ann"], [{ id: "user-ann", name: "Ann" }])).toEqual(
+      [
+        { type: "text", value: "Check @Annual maintenance with " },
+        { type: "mention", userId: "Ann", label: "Ann" },
+      ],
+    );
+  });
+
+  it("finds active mention query at cursor", () => {
+    const text = "Hello @ja";
+    const query = findActiveMentionQuery(text, text.length);
+
+    expect(query).toEqual({ start: 6, query: "ja" });
+    expect(findActiveMentionQuery("email@test.com", 13)).toBeNull();
+  });
+
+  it("filters mention candidates by query", () => {
+    const candidates = [
+      { id: "1", name: "Jane Doe" },
+      { id: "2", name: "John Smith" },
+    ];
+
+    expect(filterMentionCandidates(candidates, "jo")).toEqual([{ id: "2", name: "John Smith" }]);
+  });
+
+  it("inserts encoded mention token replacing active query", () => {
+    const text = "Hello @ja";
+    const activeQuery = findActiveMentionQuery(text, text.length);
+
+    expect(activeQuery).not.toBeNull();
+    if (!activeQuery) {
+      return;
+    }
+
+    const { nextText, nextCursor } = insertMentionToken(text, activeQuery.start, text.length, {
+      id: "1",
+      name: "Jane Doe",
+    });
+
+    expect(nextText).toBe("Hello @[1:Jane Doe] ");
+    expect(nextCursor).toBe(nextText.length);
+  });
+});
diff --git a/tmp/pr-descriptions/pr7-add-technician.md b/tmp/pr-descriptions/pr7-add-technician.md
new file mode 100644
index 00000000..6ee69d9b
--- /dev/null
+++ b/tmp/pr-descriptions/pr7-add-technician.md
@@ -0,0 +1,27 @@
+## Jira
+
+- [SH-193](https://luby-us.atlassian.net/browse/SH-193)
+
+## QA residual
+
+- P0 done: technician is staged as a **local draft** until the vendor dialog is saved / wizard submitted — Cancel does not orphan a vendor row.
+
+## Summary
+
+- Adds **+ Add technician** to the WO board vendor dialog when a company context is known (from the row or the current selection).
+- Stages a draft technician locally (`draft:` id) without calling `POST vendors` until the dialog save commits the selection.
+- On save, create runs via the existing **`POST vendors`** REST endpoint (`vendorsApi.create` / `useCreateVendor`) using the company profile + new `contactName`.
+
+## Backend
+
+Uses the established vendor create API (`API_PATHS.rest.vendors` → `POST /vendors`). Each vendor record represents one technician; linking to an existing company is done by sending the same `companyName` (and optional `companyId` when available). **No new endpoint**.
+
+## Test plan
+
+- [ ] Open vendor dialog → **+ Add technician** → fill name → Cancel dialog → no vendor create API call.
+- [ ] Add technician → Save dialog → `POST /vendors` once; row shows new tech.
+- [ ] `npm run verify`
+
+## Out of scope
+
+- Multi-POC, multi-tech arrays on WO, vendors directory redesign.
diff --git a/tmp/pr-descriptions/pr9-comment-mentions.md b/tmp/pr-descriptions/pr9-comment-mentions.md
new file mode 100644
index 00000000..a3c588db
--- /dev/null
+++ b/tmp/pr-descriptions/pr9-comment-mentions.md
@@ -0,0 +1,41 @@
+# PR9 — Work order comment @mentions
+
+## Jira
+
+- [SH-217](https://luby-us.atlassian.net/browse/SH-217) — FE @mention autocomplete / chips
+- Related BE: [SH-75](https://luby-us.atlassian.net/browse/SH-75)
+
+## QA residual
+
+- Parcial / Blocked-BE for notification + structured `mentions[]` confirm; token chip polish = P1.
+
+## Summary
+
+- Adds `@` autocomplete to the internal comments composer on work order detail (`/workorders/:id`).
+- Encodes selected users as `@[userId:Display Name]` tokens in comment text so mentions stay readable when the backend ignores the optional payload field.
+- Sends `mentions: string[]` on `POST workorders/{id}/comments` when the composer contains encoded tokens.
+- Highlights mentions in the comment thread using encoded tokens and/or `mentions` returned by the API.
+
+## Out of scope
+
+- Notification Center deep-linking for mention events.
+- Backend notification triggers beyond the FE payload.
+
+## BE contract
+
+See `docs/work-orders/pending-be-contract.md` (Comments section):
+
+| Field                                    | Status   |
+| ---------------------------------------- | -------- |
+| POST `{ text, mentions?: string[] }`     | FE ready |
+| Response includes mentions for highlight | FE ready |
+
+Until BE confirms, encoded tokens in `text` preserve highlight behavior client-side.
+
+## Test plan
+
+- [ ] Open a work order detail → Internal tab → type `@` and pick a dispatcher from the list.
+- [ ] Submit comment; verify POST body includes `text` with encoded token and `mentions` array.
+- [ ] Reload detail; verify mention is highlighted in the thread (token and/or API `mentions`).
+- [ ] Type `@` mid-word (e.g. email) — autocomplete should not open.
+- [ ] Run `npm run verify`.