diff --git a/apps/geolibre-desktop/src/components/comments/AddCommentDialog.tsx b/apps/geolibre-desktop/src/components/comments/AddCommentDialog.tsx
new file mode 100644
index 000000000..03e2f6b2f
--- /dev/null
+++ b/apps/geolibre-desktop/src/components/comments/AddCommentDialog.tsx
@@ -0,0 +1,176 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Textarea,
+} from "@geolibre/ui";
+import { MapPin, Layers, MessageSquare, Send, User } from "lucide-react";
+import type { PendingCommentState } from "./useCommentTool";
+
+interface AddCommentDialogProps {
+  pendingComment: PendingCommentState;
+  onSubmit: (body: string, authorName?: string) => void;
+  onCancel: () => void;
+}
+
+export function AddCommentDialog({ pendingComment, onSubmit, onCancel }: AddCommentDialogProps) {
+  const { t } = useTranslation();
+  const [savedName, setSavedName] = useState<string | null>(() => {
+    try {
+      return typeof localStorage !== "undefined"
+        ? localStorage.getItem("geolibre_author_name")
+        : null;
+    } catch {
+      return null;
+    }
+  });
+  const hasSavedName = !!savedName && savedName.trim().length > 0;
+
+  const [text, setText] = useState("");
+  const [authorName, setAuthorName] = useState(savedName ?? "");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!text.trim()) return;
+
+    const finalName = authorName.trim() || savedName?.trim() || "Author";
+    if (typeof localStorage !== "undefined" && finalName) {
+      try {
+        localStorage.setItem("geolibre_author_name", finalName);
+        setSavedName(finalName);
+      } catch {
+        // ignore storage errors
+      }
+    }
+
+    onSubmit(text.trim(), finalName);
+    setText("");
+  };
+
+  const anchor = pendingComment.anchor;
+  const lngLat = anchor.lngLat;
+
+  return (
+    <Dialog
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) onCancel();
+      }}
+    >
+      <DialogContent className="max-w-md p-5 sm:max-w-md">
+        <DialogHeader className="mb-2">
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <MessageSquare className="h-4 w-4 text-primary" />
+            <span>{t("comments.addDialogTitle")}</span>
+          </DialogTitle>
+          <DialogDescription className="text-xs text-muted-foreground">
+            {t("comments.addDialogDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-3.5">
+          <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 p-2.5 rounded-md border border-border/60">
+            {anchor.type === "feature" ? (
+              <>
+                <Layers className="h-3.5 w-3.5 text-sky-400 shrink-0" />
+                <span className="truncate font-medium text-foreground">
+                  Anchored to Feature #{String(anchor.featureId)} ({anchor.layerId})
+                </span>
+              </>
+            ) : (
+              <>
+                <MapPin className="h-3.5 w-3.5 text-amber-400 shrink-0" />
+                <span className="font-medium text-foreground">
+                  Anchored to (
+                  {lngLat ? `${lngLat[1].toFixed(4)}, ${lngLat[0].toFixed(4)}` : "Map Point"})
+                </span>
+              </>
+            )}
+          </div>
+
+          {/* Prompt for name 1 time if not saved in localStorage */}
+          {!hasSavedName ? (
+            <div className="space-y-1">
+              <label
+                htmlFor="author-name-input"
+                className="text-[11px] font-medium text-muted-foreground flex items-center gap-1"
+              >
+                <User className="h-3 w-3 text-primary" />
+                <span>{t("comments.authorNameLabel")}</span>
+              </label>
+              <Input
+                id="author-name-input"
+                value={authorName}
+                onChange={(e) => setAuthorName(e.target.value)}
+                placeholder={t("comments.authorNamePlaceholder")}
+                className="text-xs h-8"
+                autoFocus
+              />
+            </div>
+          ) : (
+            <div className="flex items-center justify-between text-[11px] text-muted-foreground px-1">
+              <span>
+                Posting as <strong className="text-foreground">{savedName}</strong>
+              </span>
+              <button
+                type="button"
+                onClick={() => {
+                  if (typeof localStorage !== "undefined") {
+                    try {
+                      localStorage.removeItem("geolibre_author_name");
+                    } catch {}
+                  }
+                  setSavedName(null);
+                  setAuthorName("");
+                }}
+                className="text-primary hover:underline text-[10px]"
+              >
+                Change Name
+              </button>
+            </div>
+          )}
+
+          <div className="space-y-1">
+            <label
+              htmlFor="comment-text-input"
+              className="text-[11px] font-medium text-muted-foreground"
+            >
+              {t("comments.commentLabel")}
+            </label>
+            <Textarea
+              id="comment-text-input"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder={t("comments.commentPlaceholder")}
+              rows={3}
+              className="text-xs min-h-20 resize-none"
+              autoFocus={hasSavedName}
+            />
+          </div>
+
+          <div className="flex items-center justify-end gap-2 pt-1">
+            <Button type="button" variant="outline" size="sm" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="default"
+              size="sm"
+              className="gap-1.5"
+              disabled={!text.trim() || (!hasSavedName && !authorName.trim())}
+            >
+              <Send className="h-3.5 w-3.5" />
+              <span>Post Comment</span>
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/geolibre-desktop/src/components/comments/CommentMapOverlay.tsx b/apps/geolibre-desktop/src/components/comments/CommentMapOverlay.tsx
new file mode 100644
index 000000000..f9ab23589
--- /dev/null
+++ b/apps/geolibre-desktop/src/components/comments/CommentMapOverlay.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useRef } from "react";
+import { useAppStore, type ProjectComment } from "@geolibre/core";
+import type { MapController } from "@geolibre/map";
+import maplibreGl from "maplibre-gl";
+
+interface CommentMapOverlayProps {
+  mapControllerRef: React.RefObject<MapController | null>;
+  onSelectComment?: (commentId: string) => void;
+  showResolved?: boolean;
+}
+
+function extractGeometryCoords(geometry: any): [number, number] | null {
+  if (!geometry) return null;
+  const { type, coordinates, geometries } = geometry;
+  if (type === "Point" && Array.isArray(coordinates)) {
+    return coordinates as [number, number];
+  }
+  if (type === "MultiPoint" && Array.isArray(coordinates?.[0])) {
+    return coordinates[0] as [number, number];
+  }
+  if (type === "LineString" && Array.isArray(coordinates?.[0])) {
+    return coordinates[0] as [number, number];
+  }
+  if (type === "MultiLineString" && Array.isArray(coordinates?.[0]?.[0])) {
+    return coordinates[0][0] as [number, number];
+  }
+  if (type === "Polygon" && Array.isArray(coordinates?.[0]?.[0])) {
+    return coordinates[0][0] as [number, number];
+  }
+  if (type === "MultiPolygon" && Array.isArray(coordinates?.[0]?.[0]?.[0])) {
+    return coordinates[0][0][0] as [number, number];
+  }
+  if (type === "GeometryCollection" && Array.isArray(geometries)) {
+    for (const g of geometries) {
+      const coords = extractGeometryCoords(g);
+      if (coords) return coords;
+    }
+  }
+  return null;
+}
+
+export function resolveCommentCoordinates(
+  comment: ProjectComment,
+  map: maplibreGl.Map | null,
+): [number, number] | null {
+  // 1. Direct lngLat on point or feature anchor
+  if (comment.anchor.lngLat) {
+    return comment.anchor.lngLat;
+  }
+
+  if (!map) return null;
+
+  // 2. Query rendered features on active layer
+  if (comment.anchor.type === "feature") {
+    const { layerId, featureId } = comment.anchor;
+    const storeLayer = useAppStore.getState().layers.find((l) => l.id === layerId);
+    const sourceIds = new Set(
+      storeLayer && Array.isArray(storeLayer.metadata?.sourceIds)
+        ? (storeLayer.metadata.sourceIds as string[])
+        : [layerId],
+    );
+    const styleLayers = map.getStyle()?.layers ?? [];
+    const validLayers: string[] = [];
+    for (const sl of styleLayers) {
+      const slSource = "source" in sl && typeof sl.source === "string" ? sl.source : undefined;
+      if (sl.id === layerId || (slSource && sourceIds.has(slSource))) {
+        try {
+          if (map.getLayer(sl.id)) {
+            validLayers.push(sl.id);
+          }
+        } catch {
+          // ignore layer lookup error
+        }
+      }
+    }
+    if (validLayers.length === 0 && map.getLayer(layerId)) {
+      validLayers.push(layerId);
+    }
+
+    if (validLayers.length > 0) {
+      try {
+        const features = map.queryRenderedFeatures(undefined, {
+          layers: validLayers,
+          filter: ["==", ["id"], featureId],
+        });
+        if (features.length > 0 && features[0].geometry) {
+          const coords = extractGeometryCoords(features[0].geometry);
+          if (coords) return coords;
+        }
+      } catch {
+        // Ignore query errors
+      }
+    }
+
+    // 3. Fallback to GeoJSON features in store layers
+    const layer = useAppStore.getState().layers.find((l) => l.id === layerId);
+    if (layer?.geojson?.features) {
+      const feat = layer.geojson.features.find((f) => String(f.id) === String(featureId));
+      if (feat?.geometry) {
+        const coords = extractGeometryCoords(feat.geometry);
+        if (coords) return coords;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function CommentMapOverlay({
+  mapControllerRef,
+  onSelectComment,
+  showResolved = false,
+}: CommentMapOverlayProps): null {
+  const comments = useAppStore((s) => s.comments);
+  const markersRef = useRef<maplibreGl.Marker[]>([]);
+
+  useEffect(() => {
+    const map = mapControllerRef.current?.getMap() ?? null;
+    if (!map) return;
+
+    const renderMarkers = () => {
+      // Clear existing markers
+      markersRef.current.forEach((m) => m.remove());
+      markersRef.current = [];
+
+      comments.forEach((comment, idx) => {
+        if (comment.resolved && !showResolved) return;
+
+        const coords = resolveCommentCoordinates(comment, map);
+        if (!coords) return;
+
+        const pinColor = comment.author?.color || "#3b82f6";
+
+        const container = document.createElement("div");
+        container.className =
+          "group relative cursor-pointer select-none transition-transform duration-150 ease-out hover:scale-[1.15]";
+        container.style.zIndex = comment.resolved ? "9" : "10";
+
+        // Build the pin with DOM APIs so the author color is set as a style
+        // property, never interpolated into markup — defense-in-depth against
+        // a hand-edited project file with a hostile color value.
+        const pin = document.createElement("div");
+        pin.style.cssText = [
+          "display:flex",
+          "align-items:center",
+          "justify-content:center",
+          "width:28px",
+          "height:28px",
+          "border-radius:50% 50% 50% 0",
+          "transform:rotate(-45deg)",
+          `border:2px solid ${comment.resolved ? "#10b981" : "#ffffff"}`,
+          "box-shadow:0 4px 10px rgba(0,0,0,0.35)",
+          `opacity:${comment.resolved ? 0.65 : 1}`,
+        ].join(";");
+        pin.style.backgroundColor = pinColor;
+
+        const label = document.createElement("span");
+        label.style.cssText =
+          "transform:rotate(45deg);color:#ffffff;font-size:11px;font-weight:700;font-family:system-ui,sans-serif;line-height:1";
+        label.textContent = `#${idx + 1}`;
+        pin.appendChild(label);
+        container.appendChild(pin);
+
+        container.addEventListener("click", (e) => {
+          e.stopPropagation();
+          onSelectComment?.(comment.id);
+        });
+
+        const marker = new maplibreGl.Marker({
+          element: container,
+          anchor: "bottom",
+        })
+          .setLngLat(coords)
+          .addTo(map);
+
+        markersRef.current.push(marker);
+      });
+    };
+
+    renderMarkers();
+
+    // Re-render when the style reloads (basemap switch wipes all markers).
+    // No moveend listener needed: MapLibre Marker objects are positioned in
+    // geographic space and track the map viewport automatically.
+    map.on("styledata", renderMarkers);
+
+    return () => {
+      map.off("styledata", renderMarkers);
+      markersRef.current.forEach((m) => m.remove());
+      markersRef.current = [];
+    };
+  }, [comments, showResolved, mapControllerRef, onSelectComment]);
+
+  return null;
+}
diff --git a/apps/geolibre-desktop/src/components/comments/CommentThread.tsx b/apps/geolibre-desktop/src/components/comments/CommentThread.tsx
new file mode 100644
index 000000000..fc1a0d28b
--- /dev/null
+++ b/apps/geolibre-desktop/src/components/comments/CommentThread.tsx
@@ -0,0 +1,235 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { ProjectComment } from "@geolibre/core";
+import { Button, Textarea, cn } from "@geolibre/ui";
+import {
+  MapPin,
+  Layers,
+  CheckCircle2,
+  RotateCcw,
+  Trash2,
+  CornerDownRight,
+  Send,
+  Navigation,
+} from "lucide-react";
+
+interface CommentThreadProps {
+  comment: ProjectComment;
+  index: number;
+  onReply: (commentId: string, body: string) => void;
+  onToggleResolve: (commentId: string, resolved: boolean) => void;
+  onDelete: (commentId: string) => void;
+  onZoomTo: (comment: ProjectComment) => void;
+  readOnly?: boolean;
+}
+
+export function CommentThread({
+  comment,
+  index,
+  onReply,
+  onToggleResolve,
+  onDelete,
+  onZoomTo,
+  readOnly = false,
+}: CommentThreadProps) {
+  const { t } = useTranslation();
+  const [replyText, setReplyText] = useState("");
+  const [isReplying, setIsReplying] = useState(false);
+
+  const handleSubmitReply = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!replyText.trim() || readOnly) return;
+    onReply(comment.id, replyText.trim());
+    setReplyText("");
+    setIsReplying(false);
+  };
+
+  return (
+    <div
+      className={cn(
+        "p-3 rounded-lg border text-xs space-y-2 transition-all",
+        comment.resolved
+          ? "bg-muted/30 border-border/40 opacity-70"
+          : "bg-card border-border shadow-xs hover:border-border/80",
+      )}
+    >
+      {/* Thread Header */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 flex-wrap min-w-0">
+          <span
+            className="w-2 h-2 rounded-full shrink-0"
+            style={{ backgroundColor: comment.author?.color || "#3b82f6" }}
+          />
+          <span className="font-semibold text-foreground truncate">
+            {comment.author?.name || "Author"}
+          </span>
+          <span className="text-[10px] text-muted-foreground">
+            {new Date(comment.createdAt).toLocaleDateString(undefined, {
+              month: "short",
+              day: "numeric",
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </span>
+          {comment.resolved && (
+            <span className="text-[10px] bg-emerald-500/10 text-emerald-500 font-medium px-1.5 py-0.5 rounded border border-emerald-500/20">
+              Resolved
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-0.5 shrink-0">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            onClick={() => onZoomTo(comment)}
+            title="Zoom to location"
+          >
+            <Navigation className="h-3.5 w-3.5" />
+          </Button>
+
+          {!readOnly && (
+            <>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "h-7 w-7",
+                  comment.resolved
+                    ? "text-emerald-500 hover:text-emerald-600"
+                    : "text-muted-foreground hover:text-emerald-500",
+                )}
+                onClick={() => onToggleResolve(comment.id, !comment.resolved)}
+                title={comment.resolved ? "Reopen comment thread" : "Mark as resolved"}
+              >
+                {comment.resolved ? (
+                  <RotateCcw className="h-3.5 w-3.5" />
+                ) : (
+                  <CheckCircle2 className="h-3.5 w-3.5" />
+                )}
+              </Button>
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                onClick={() => {
+                  if (
+                    typeof window !== "undefined" &&
+                    window.confirm(t("comments.confirmDelete"))
+                  ) {
+                    onDelete(comment.id);
+                  }
+                }}
+                title="Delete comment thread"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Anchor Badge */}
+      <div className="flex items-center gap-1.5 mb-2 text-[11px] text-muted-foreground bg-muted/50 px-2 py-1 rounded border border-border/40">
+        {comment.anchor.type === "feature" ? (
+          <>
+            <Layers className="h-3 w-3 text-sky-400 shrink-0" />
+            <span className="truncate">
+              Feature #{String(comment.anchor.featureId)} ({comment.anchor.layerId})
+            </span>
+          </>
+        ) : (
+          <>
+            <MapPin className="h-3 w-3 text-amber-400 shrink-0" />
+            <span>
+              Point (
+              {comment.anchor.lngLat
+                ? `${comment.anchor.lngLat[1].toFixed(4)}, ${comment.anchor.lngLat[0].toFixed(4)}`
+                : "Map"}
+              )
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Comment Body */}
+      <p className="text-foreground text-xs leading-relaxed whitespace-pre-wrap">{comment.body}</p>
+
+      {/* Replies List */}
+      {comment.replies && comment.replies.length > 0 && (
+        <div className="mt-2.5 space-y-2 ps-2.5 border-s-2 border-border/60">
+          {comment.replies.map((reply) => (
+            <div key={reply.id} className="space-y-1">
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="w-1.5 h-1.5 rounded-full shrink-0"
+                  style={{ backgroundColor: reply.author?.color || "#3b82f6" }}
+                />
+                <span className="font-semibold text-foreground text-[11px]">
+                  {reply.author?.name || "Author"}
+                </span>
+                <span className="text-[10px] text-muted-foreground">
+                  {new Date(reply.createdAt).toLocaleDateString(undefined, {
+                    month: "short",
+                    day: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </span>
+              </div>
+              <p className="text-foreground/90 text-xs whitespace-pre-wrap">{reply.body}</p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Reply Trigger or Reply Form */}
+      {!readOnly &&
+        (!isReplying ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="text-xs text-muted-foreground hover:text-foreground gap-1.5 h-6 px-2"
+            onClick={() => setIsReplying(true)}
+          >
+            <CornerDownRight className="h-3 w-3" />
+            <span>Reply</span>
+          </Button>
+        ) : (
+          <form onSubmit={handleSubmitReply} className="mt-2 space-y-2">
+            <Textarea
+              value={replyText}
+              onChange={(e) => setReplyText(e.target.value)}
+              placeholder="Write a reply..."
+              rows={2}
+              className="text-xs min-h-14 resize-none"
+              autoFocus
+            />
+            <div className="flex items-center justify-end gap-1.5">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setIsReplying(false);
+                  setReplyText("");
+                }}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" variant="default" size="sm" className="gap-1">
+                <Send className="h-3 w-3" />
+                <span>Reply</span>
+              </Button>
+            </div>
+          </form>
+        ))}
+    </div>
+  );
+}
diff --git a/apps/geolibre-desktop/src/components/comments/CommentsPanel.tsx b/apps/geolibre-desktop/src/components/comments/CommentsPanel.tsx
new file mode 100644
index 000000000..6ab5debec
--- /dev/null
+++ b/apps/geolibre-desktop/src/components/comments/CommentsPanel.tsx
@@ -0,0 +1,447 @@
+import { useState, useEffect, useRef } from "react";
+import { useAppStore, type ProjectComment, type CommentReply } from "@geolibre/core";
+import type { MapController } from "@geolibre/map";
+import { Button, Input, ScrollArea, cn } from "@geolibre/ui";
+import {
+  MessageSquare,
+  Plus,
+  MessageCircle,
+  Copy,
+  Link2,
+  KeyRound,
+  Radio,
+  User,
+  Pencil,
+  Check,
+} from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+import { CommentThread } from "./CommentThread";
+import { resolveCommentCoordinates } from "./CommentMapOverlay";
+import type { CollaborationApi } from "../../hooks/useCollaboration";
+
+const LS_NAME_KEY = "geolibre_author_name";
+
+function getStoredName(): string {
+  try {
+    return (typeof localStorage !== "undefined" && localStorage.getItem(LS_NAME_KEY)) || "";
+  } catch {
+    return "";
+  }
+}
+
+function saveStoredName(name: string): void {
+  try {
+    if (typeof localStorage !== "undefined") {
+      if (name.trim()) {
+        localStorage.setItem(LS_NAME_KEY, name.trim());
+      } else {
+        localStorage.removeItem(LS_NAME_KEY);
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+
+interface CommentsPanelProps {
+  mapControllerRef: React.RefObject<MapController | null>;
+  collaboration?: CollaborationApi;
+  onActivateCommentTool?: () => void;
+  isCommentToolActive?: boolean;
+  /** Called when the resolved-pins visibility should change. Receives `true`
+   *  when the "Resolved" or "All" filter is active, `false` for "Open". */
+  onShowResolvedChange?: (showResolved: boolean) => void;
+}
+
+export function CommentsPanel({
+  mapControllerRef,
+  collaboration,
+  onActivateCommentTool,
+  isCommentToolActive,
+  onShowResolvedChange,
+}: CommentsPanelProps) {
+  const comments = useAppStore((s) => s.comments);
+  const replyToComment = useAppStore((s) => s.replyToComment);
+  const toggleResolveComment = useAppStore((s) => s.toggleResolveComment);
+  const deleteComment = useAppStore((s) => s.deleteComment);
+  const collab = useAppStore((s) => s.collaboration);
+
+  const [filter, setFilter] = useState<"all" | "open" | "resolved">("open");
+
+  // Notify parent whenever resolved pins should show/hide so the map overlay
+  // stays in sync with the sidebar filter.
+  useEffect(() => {
+    onShowResolvedChange?.(filter !== "open");
+  }, [filter, onShowResolvedChange]);
+
+  const [joinCodeInput, setJoinCodeInput] = useState<string>("");
+  const [copied, setCopied] = useState<boolean>(false);
+  const [sessionError, setSessionError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  // ── Display name ──────────────────────────────────────────────────────────
+  // When a collab session is active the name comes from the session identity.
+  // When offline, the user sets it here once and it persists to localStorage.
+  const [storedName, setStoredName] = useState<string>(getStoredName);
+  const [editingName, setEditingName] = useState<boolean>(false);
+  const [nameInput, setNameInput] = useState<string>("");
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  const selfAuthorName = collab.isActive && collab.selfName ? collab.selfName : storedName || "";
+  const selfAuthorColor = collab.isActive && collab.selfColor ? collab.selfColor : "#3b82f6";
+
+  const handleEditName = () => {
+    setNameInput(storedName);
+    setEditingName(true);
+    // Focus after state flush
+    setTimeout(() => nameInputRef.current?.focus(), 0);
+  };
+
+  const handleSaveName = () => {
+    const trimmed = nameInput.trim();
+    saveStoredName(trimmed);
+    setStoredName(trimmed);
+    setEditingName(false);
+  };
+
+  const handleNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") handleSaveName();
+    if (e.key === "Escape") setEditingName(false);
+  };
+
+  // The real session code comes from the store once start() has resolved.
+  const activeCode = collab.sessionId ?? "";
+
+  const handleCopyCode = async () => {
+    if (!activeCode) return;
+    try {
+      await navigator.clipboard.writeText(activeCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // ignore clipboard error
+    }
+  };
+
+  const handleConnectSession = async () => {
+    const targetCode = joinCodeInput.trim().toUpperCase();
+    if (!targetCode || !collaboration) return;
+    setSessionError(null);
+    setBusy(true);
+    try {
+      await collaboration.join(targetCode, selfAuthorName, selfAuthorColor);
+    } catch (err: unknown) {
+      setSessionError(err instanceof Error ? err.message : "Failed to join session.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleStartHostingSession = async () => {
+    if (!collaboration) return;
+    setSessionError(null);
+    setBusy(true);
+    try {
+      await collaboration.start(selfAuthorName, selfAuthorColor, "co-edit");
+    } catch (err: unknown) {
+      setSessionError(err instanceof Error ? err.message : "Failed to start session.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleDisconnectSession = () => {
+    collaboration?.leave();
+  };
+
+  const canModifyComments = !collab.isActive || (collaboration?.canEdit() ?? true);
+
+  const handleReply = (commentId: string, body: string) => {
+    if (!canModifyComments) return;
+    const reply: CommentReply = {
+      id: uuidv4(),
+      author: { name: selfAuthorName, color: selfAuthorColor },
+      body,
+      createdAt: new Date().toISOString(),
+    };
+    replyToComment(commentId, reply);
+    if (collab.isActive) {
+      collaboration?.sendCommentMutation({ type: "reply", commentId, reply });
+    }
+  };
+
+  const handleToggleResolve = (commentId: string, resolved: boolean) => {
+    if (!canModifyComments) return;
+    toggleResolveComment(commentId, resolved);
+    if (collab.isActive) {
+      collaboration?.sendCommentMutation({ type: "toggle-resolve", commentId, resolved });
+    }
+  };
+
+  const handleDelete = (commentId: string) => {
+    if (!canModifyComments) return;
+    deleteComment(commentId);
+    if (collab.isActive) {
+      collaboration?.sendCommentMutation({ type: "delete", commentId });
+    }
+  };
+
+  const handleZoomTo = (comment: ProjectComment) => {
+    const map = mapControllerRef.current?.getMap() ?? null;
+    if (!map) return;
+    const coords = resolveCommentCoordinates(comment, map);
+    if (coords) {
+      map.flyTo({ center: coords, zoom: Math.max(map.getZoom(), 15), duration: 800 });
+    }
+  };
+
+  const unresolvedComments = comments.filter((c) => !c.resolved);
+  const resolvedComments = comments.filter((c) => c.resolved);
+  const filteredComments = comments.filter((c) => {
+    if (filter === "open") return !c.resolved;
+    if (filter === "resolved") return c.resolved;
+    return true;
+  });
+
+  return (
+    <div className="flex flex-col h-full bg-background text-foreground overflow-hidden select-none">
+      {/* Panel Header */}
+      <div className="flex items-center justify-between h-10 px-3 border-b border-border bg-card shrink-0">
+        <div className="flex items-center gap-2">
+          <MessageSquare className="h-4 w-4 text-primary" />
+          <span className="font-semibold text-xs text-foreground">Comments</span>
+          <span className="inline-flex items-center justify-center h-4 px-1.5 text-[10px] font-bold rounded-full bg-muted text-muted-foreground">
+            {unresolvedComments.length}
+          </span>
+        </div>
+        {onActivateCommentTool && (
+          <Button
+            type="button"
+            variant={isCommentToolActive ? "default" : "secondary"}
+            size="sm"
+            onClick={onActivateCommentTool}
+            className="gap-1 h-7 px-2 text-xs"
+            title="Place a new review comment on the map"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            <span>Add Comment</span>
+          </Button>
+        )}
+      </div>
+
+      {/* Display Name — shown when not in an active collab session */}
+      {!collab.isActive && (
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/20 shrink-0">
+          <User className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          {editingName ? (
+            <div className="flex items-center gap-1.5 flex-1 min-w-0">
+              <Input
+                ref={nameInputRef}
+                value={nameInput}
+                onChange={(e) => setNameInput(e.target.value)}
+                onKeyDown={handleNameKeyDown}
+                onBlur={handleSaveName}
+                placeholder="Your name…"
+                className="h-6 text-xs flex-1 min-w-0 px-1.5"
+              />
+              <button
+                type="button"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  handleSaveName();
+                }}
+                className="text-emerald-500 hover:text-emerald-600 shrink-0"
+                title="Save name"
+              >
+                <Check className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1.5 flex-1 min-w-0">
+              {selfAuthorName ? (
+                <span className="text-[11px] text-foreground font-medium truncate">
+                  {selfAuthorName}
+                </span>
+              ) : (
+                <span className="text-[11px] text-muted-foreground italic truncate">
+                  No name set — comments will show as "Author"
+                </span>
+              )}
+              <button
+                type="button"
+                onClick={handleEditName}
+                className="text-muted-foreground hover:text-foreground shrink-0 ms-auto"
+                title={selfAuthorName ? "Change name" : "Set your name"}
+              >
+                <Pencil className="h-3 w-3" />
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Session Controls — only shown when the relay is configured */}
+      {collaboration?.enabled && (
+        <div className="p-2.5 space-y-2 border-b border-border bg-muted/30 shrink-0">
+          {/* Session code — only shown once a session is active */}
+          {collab.isActive && activeCode ? (
+            <div className="flex items-center justify-between gap-2 p-2 rounded-md bg-card border border-border">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                  <KeyRound className="h-3 w-3 text-primary shrink-0" />
+                  <span>Session Code</span>
+                </div>
+                <div className="font-mono text-xs font-bold text-primary tracking-widest truncate mt-0.5">
+                  {activeCode}
+                </div>
+              </div>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleCopyCode}
+                className="h-7 px-2 text-[11px] shrink-0"
+                title="Copy session code"
+              >
+                <Copy className="h-3 w-3 me-1" />
+                {copied ? "Copied" : "Copy"}
+              </Button>
+            </div>
+          ) : (
+            /* Host button — starts a new session */
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={handleStartHostingSession}
+              disabled={busy || !collaboration}
+              className="w-full h-8 text-xs gap-1.5"
+            >
+              <Radio className="h-3.5 w-3.5 text-emerald-500" />
+              {busy ? "Starting…" : "Start Live Session"}
+            </Button>
+          )}
+
+          {/* Join input — only shown when not already active */}
+          {!collab.isActive && (
+            <div className="flex items-center gap-1.5 p-2 rounded-md bg-card border border-border">
+              <Input
+                value={joinCodeInput}
+                onChange={(e) =>
+                  setJoinCodeInput(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ""))
+                }
+                placeholder="ENTER SESSION CODE"
+                className="h-7 font-mono text-xs uppercase tracking-wider"
+                disabled={busy}
+              />
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
+                onClick={handleConnectSession}
+                disabled={busy || !joinCodeInput.trim() || !collaboration}
+                className="h-7 px-2.5 text-[11px] gap-1 shrink-0"
+              >
+                <Link2 className="h-3 w-3" />
+                <span>{busy ? "Joining…" : "Connect"}</span>
+              </Button>
+            </div>
+          )}
+
+          {/* Status indicator */}
+          <div className="flex items-center justify-between p-2 rounded-md bg-card border border-border text-xs">
+            <div className="flex items-center gap-2 min-w-0">
+              <span
+                className={cn(
+                  "h-2.5 w-2.5 rounded-full shrink-0",
+                  collab.isActive ? "bg-emerald-500 animate-pulse" : "bg-muted-foreground/40",
+                )}
+              />
+              <span className="font-medium text-[11px] truncate">
+                {collab.connecting
+                  ? "Connecting…"
+                  : collab.isActive
+                    ? `Live Sync (${collab.participants?.length ?? 1} online)`
+                    : "Offline / Private Workspace"}
+              </span>
+            </div>
+            {collab.isActive && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleDisconnectSession}
+                className="h-6 px-1.5 text-[10px] text-destructive hover:text-destructive hover:bg-destructive/10 shrink-0"
+              >
+                Disconnect
+              </Button>
+            )}
+          </div>
+
+          {sessionError && (
+            <div className="text-[11px] text-destructive bg-destructive/10 p-1.5 rounded border border-destructive/30">
+              {sessionError}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Filter Bar */}
+      <div className="flex items-center gap-1 p-2 border-b border-border bg-muted/20 shrink-0">
+        {(["open", "resolved", "all"] as const).map((f) => (
+          <button
+            key={f}
+            type="button"
+            onClick={() => setFilter(f)}
+            className={cn(
+              "flex-1 py-1 px-2 text-[11px] font-medium rounded transition-colors text-center",
+              filter === f
+                ? "bg-card text-foreground shadow-xs border border-border"
+                : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+            )}
+          >
+            {f === "open"
+              ? `Open (${unresolvedComments.length})`
+              : f === "resolved"
+                ? `Resolved (${resolvedComments.length})`
+                : `All (${comments.length})`}
+          </button>
+        ))}
+      </div>
+
+      {/* Threads */}
+      <ScrollArea className="flex-1 p-3">
+        {filteredComments.length === 0 ? (
+          <div className="flex flex-col items-center justify-center min-h-[160px] text-center p-4 border border-dashed border-border/60 rounded-lg bg-card/40 my-2">
+            <MessageCircle className="h-8 w-8 text-muted-foreground/50 mb-2" />
+            <p className="text-xs font-medium text-foreground mb-1">
+              {filter === "resolved" ? "No resolved comments" : "No open comments"}
+            </p>
+            <p className="text-[11px] text-muted-foreground max-w-[200px]">
+              Click &quot;Add Comment&quot; above and select any location or feature on the map to
+              drop a review note.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filteredComments.map((comment) => {
+              const originalIndex = comments.findIndex((c) => c.id === comment.id);
+              return (
+                <CommentThread
+                  key={comment.id}
+                  comment={comment}
+                  index={originalIndex >= 0 ? originalIndex : 0}
+                  onReply={handleReply}
+                  onToggleResolve={handleToggleResolve}
+                  onDelete={handleDelete}
+                  onZoomTo={handleZoomTo}
+                  readOnly={!canModifyComments}
+                />
+              );
+            })}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/apps/geolibre-desktop/src/components/comments/useCommentTool.ts b/apps/geolibre-desktop/src/components/comments/useCommentTool.ts
new file mode 100644
index 000000000..1cb35e1e6
--- /dev/null
+++ b/apps/geolibre-desktop/src/components/comments/useCommentTool.ts
@@ -0,0 +1,172 @@
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import type React from "react";
+import { useAppStore, type CommentAnchor, type ProjectComment } from "@geolibre/core";
+import type { MapController } from "@geolibre/map";
+import { v4 as uuidv4 } from "uuid";
+import type { CollaborationApi } from "../../hooks/useCollaboration";
+import type maplibreGl from "maplibre-gl";
+
+interface UseCommentToolOptions {
+  mapControllerRef: React.RefObject<MapController | null>;
+  collaboration?: CollaborationApi;
+}
+
+export interface PendingCommentState {
+  anchor: CommentAnchor;
+  point: { x: number; y: number };
+}
+
+export function useCommentTool({ mapControllerRef, collaboration }: UseCommentToolOptions) {
+  const { t } = useTranslation();
+  const [isActive, setIsActive] = useState(false);
+  const [pendingComment, setPendingComment] = useState<PendingCommentState | null>(null);
+
+  const addComment = useAppStore((s) => s.addComment);
+  const collab = useAppStore((s) => s.collaboration);
+
+  const activateTool = useCallback(() => {
+    setIsActive(true);
+    setPendingComment(null);
+  }, []);
+
+  const deactivateTool = useCallback(() => {
+    setIsActive(false);
+    setPendingComment(null);
+  }, []);
+
+  const toggleTool = useCallback(() => {
+    setIsActive((prev) => !prev);
+    setPendingComment(null);
+  }, []);
+
+  const submitComment = useCallback(
+    (body: string, authorName?: string) => {
+      if (!pendingComment || !body.trim()) return;
+      if (collab.isActive && collaboration && !collaboration.canEdit()) return;
+
+      // Priority: collab identity > caller-supplied name > localStorage > fallback
+      let selfName: string;
+      let selfColor: string;
+      if (collab.isActive && collab.selfName) {
+        selfName = collab.selfName;
+        selfColor = collab.selfColor || "#3b82f6";
+      } else {
+        let storedName = "";
+        try {
+          storedName =
+            typeof localStorage !== "undefined"
+              ? (localStorage.getItem("geolibre_author_name") ?? "")
+              : "";
+        } catch {
+          storedName = "";
+        }
+        selfName = authorName?.trim() || storedName || t("comments.defaultAuthorName");
+        selfColor = "#3b82f6";
+      }
+
+      const newComment: ProjectComment = {
+        id: uuidv4(),
+        anchor: pendingComment.anchor,
+        author: {
+          name: selfName,
+          color: selfColor,
+        },
+        body: body.trim(),
+        createdAt: new Date().toISOString(),
+        resolved: false,
+        replies: [],
+      };
+
+      addComment(newComment);
+
+      if (collab.isActive) {
+        collaboration?.sendCommentMutation({
+          type: "add",
+          comment: newComment,
+        });
+      }
+
+      setPendingComment(null);
+      setIsActive(false);
+    },
+    [pendingComment, collab, addComment, collaboration],
+  );
+
+  const cancelPendingComment = useCallback(() => {
+    setPendingComment(null);
+  }, []);
+
+  useEffect(() => {
+    const map = mapControllerRef.current?.getMap();
+    if (!map || !isActive) return;
+
+    map.getCanvas().style.cursor = "crosshair";
+
+    const handleMapClick = (e: maplibreGl.MapMouseEvent) => {
+      e.originalEvent.stopPropagation();
+
+      // Map source and style layer IDs to canonical store layer IDs.
+      const storeLayers = useAppStore.getState().layers;
+      const sourceMap = new Map<string, string>();
+      for (const l of storeLayers) {
+        sourceMap.set(l.id, l.id);
+        if (Array.isArray(l.metadata?.sourceIds)) {
+          for (const sid of l.metadata.sourceIds) {
+            if (typeof sid === "string") sourceMap.set(sid, l.id);
+          }
+        }
+      }
+
+      const bbox: [maplibreGl.PointLike, maplibreGl.PointLike] = [
+        [e.point.x - 5, e.point.y - 5],
+        [e.point.x + 5, e.point.y + 5],
+      ];
+      const features = map.queryRenderedFeatures(bbox);
+
+      let anchor: CommentAnchor = {
+        type: "point",
+        lngLat: [e.lngLat.lng, e.lngLat.lat],
+      };
+
+      // Search for feature with a valid ID on a user data layer
+      for (const feat of features) {
+        const featSource = feat.source || (feat as { layer?: { source?: string } }).layer?.source;
+        const storeLayerId =
+          (featSource ? sourceMap.get(featSource) : undefined) ??
+          (feat.layer?.id ? sourceMap.get(feat.layer.id) : undefined);
+        if (storeLayerId && feat.id !== undefined && feat.id !== null) {
+          anchor = {
+            type: "feature",
+            layerId: storeLayerId,
+            featureId: feat.id as string | number,
+            lngLat: [e.lngLat.lng, e.lngLat.lat],
+          };
+          break;
+        }
+      }
+
+      setPendingComment({
+        anchor,
+        point: { x: e.point.x, y: e.point.y },
+      });
+    };
+
+    map.on("click", handleMapClick);
+
+    return () => {
+      map.getCanvas().style.cursor = "";
+      map.off("click", handleMapClick);
+    };
+  }, [isActive, mapControllerRef]);
+
+  return {
+    isActive,
+    activateTool,
+    deactivateTool,
+    toggleTool,
+    pendingComment,
+    submitComment,
+    cancelPendingComment,
+  };
+}
diff --git a/apps/geolibre-desktop/src/components/layout/DesktopShell.tsx b/apps/geolibre-desktop/src/components/layout/DesktopShell.tsx
index 32e1f05ff..79fb81f6e 100644
--- a/apps/geolibre-desktop/src/components/layout/DesktopShell.tsx
+++ b/apps/geolibre-desktop/src/components/layout/DesktopShell.tsx
@@ -1,3 +1,4 @@
+// @refresh reset
 import { useAppStore, type GeoLibreLayer } from "@geolibre/core";
 import type { FeatureCollection } from "geojson";
 import type { MapController, MapDiagnosticEvent } from "@geolibre/map";
@@ -53,6 +54,12 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { BROWSER_PANEL_ID, useRegisterBrowserPanel } from "../../hooks/useRegisterBrowserPanel";
+import { COMMENTS_PANEL_ID, useRegisterCommentsPanel } from "../../hooks/useRegisterCommentsPanel";
+import { CommentsPanel } from "../comments/CommentsPanel";
+import { CommentMapOverlay } from "../comments/CommentMapOverlay";
+import { useCommentTool } from "../comments/useCommentTool";
+import { AddCommentDialog } from "../comments/AddCommentDialog";
+import { openRightPanel } from "@geolibre/plugins";
 import { getIsMobileViewport } from "../../hooks/useIsMobileViewport";
 import { useProjectFileActions } from "../../hooks/useProjectFileActions";
 import { useProjectHistory } from "../../hooks/useProjectHistory";
@@ -651,6 +658,7 @@ export function DesktopShell({
   // Register the Browser as a movable/dockable right panel; its body is portaled
   // into a dedicated content host (below) that the dock slots adopt.
   useRegisterBrowserPanel();
+  useRegisterCommentsPanel();
   // One shared project-file-actions instance for both the toolbar and the
   // Browser panel, so their "open recent" calls coordinate their aborts (two
   // instances would race). Lifted here for the same reason as `collaboration`.
@@ -686,11 +694,22 @@ export function DesktopShell({
     el.className = "contents";
     return el;
   });
+  // A third, dedicated host for the Comments panel's React portal.
+  const [commentsContentEl] = useState(() => {
+    const el = document.createElement("div");
+    el.className = "contents";
+    return el;
+  });
   const activePanelId = useRightPanelState().activeId;
   const activePanel = activePanelId ? getRightPanel(activePanelId) : undefined;
   // The dock slots adopt whichever host owns the active panel's content: the
-  // Browser's dedicated portal host, or the shared imperative plugin host.
-  const dockContentEl = activePanelId === BROWSER_PANEL_ID ? browserContentEl : pluginContentEl;
+  // Browser's dedicated portal host, the Comments dedicated portal host, or the shared imperative plugin host.
+  const dockContentEl =
+    activePanelId === BROWSER_PANEL_ID
+      ? browserContentEl
+      : activePanelId === COMMENTS_PANEL_ID
+        ? commentsContentEl
+        : pluginContentEl;
   // Render the active panel into the shared host once; re-run when its
   // registration is replaced (re-registration refresh) but not on dock/collapse
   // changes. Keyed on the render function identity so that a plugin
@@ -753,6 +772,8 @@ export function DesktopShell({
   // the Collaborate dialog and the on-canvas status badge share one socket, and
   // so the dialog stays mounted in toolbar-hidden layouts.
   const collaboration = useCollaboration(mapControllerRef);
+  const commentTool = useCommentTool({ mapControllerRef, collaboration });
+  const [showResolvedComments, setShowResolvedComments] = useState(false);
   const collaborateDialogOpen = useAppStore((s) => s.ui.collaborateDialogOpen);
   const setCollaborateDialogOpen = useAppStore((s) => s.setCollaborateDialogOpen);
   // When opened via a `?collab=<code>` share link, auto-open the Collaborate
@@ -1957,6 +1978,18 @@ export function DesktopShell({
               browserContentEl,
             )
           : null}
+        {activePanelId === COMMENTS_PANEL_ID && !layoutOptions.panelsHidden
+          ? createPortal(
+              <CommentsPanel
+                mapControllerRef={mapControllerRef}
+                collaboration={collaboration}
+                onActivateCommentTool={commentTool.toggleTool}
+                isCommentToolActive={commentTool.isActive}
+                onShowResolvedChange={setShowResolvedComments}
+              />,
+              commentsContentEl,
+            )
+          : null}
         {/* Map-only / hidden-panels embeds show nothing but the map: skip the
             whole left side-dock (Layers, plugin panels, and the shared rail that
             hosts the Browser entry), not just the built-in Layers panel. */}
@@ -2074,6 +2107,11 @@ export function DesktopShell({
                 onControllerReady={handleMapControllerReady}
               />
               <RemoteCursorsOverlay mapControllerRef={mapControllerRef} />
+              <CommentMapOverlay
+                mapControllerRef={mapControllerRef}
+                onSelectComment={() => openRightPanel(COMMENTS_PANEL_ID)}
+                showResolved={showResolvedComments}
+              />
               <MapContextMenu
                 mapControllerRef={mapControllerRef}
                 mapReadyGeneration={mapReadyGeneration}
@@ -2450,6 +2488,13 @@ export function DesktopShell({
           {dropError ?? dropMessage}
         </div>
       ) : null}
+      {commentTool.pendingComment && (
+        <AddCommentDialog
+          pendingComment={commentTool.pendingComment}
+          onSubmit={commentTool.submitComment}
+          onCancel={commentTool.cancelPendingComment}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/geolibre-desktop/src/components/layout/RemoteCursorsOverlay.tsx b/apps/geolibre-desktop/src/components/layout/RemoteCursorsOverlay.tsx
index 00129ef03..e0097be6e 100644
--- a/apps/geolibre-desktop/src/components/layout/RemoteCursorsOverlay.tsx
+++ b/apps/geolibre-desktop/src/components/layout/RemoteCursorsOverlay.tsx
@@ -102,11 +102,11 @@ function renderPresence(
         anchor: "top-left",
       });
       markers.set(id, marker);
-      marker.addTo(map);
+      marker.setLngLat([p.cursor.lng, p.cursor.lat]).addTo(map);
     } else {
       updateCursorElement(marker.getElement(), p);
+      marker.setLngLat([p.cursor.lng, p.cursor.lat]);
     }
-    marker.setLngLat([p.cursor.lng, p.cursor.lat]);
   }
 
   // Adding/updating the viewport source+layer mutates the style, so only touch
diff --git a/apps/geolibre-desktop/src/components/layout/TopToolbar.tsx b/apps/geolibre-desktop/src/components/layout/TopToolbar.tsx
index 252e97641..47cc4bfff 100644
--- a/apps/geolibre-desktop/src/components/layout/TopToolbar.tsx
+++ b/apps/geolibre-desktop/src/components/layout/TopToolbar.tsx
@@ -38,6 +38,7 @@ import {
   PRECIPITATION_PLUGIN_ID,
   REVERSE_GEOCODE_PLUGIN_ID,
   EFFECTS_PLUGIN_ID,
+  openRightPanel,
 } from "@geolibre/plugins";
 import { Button, cn, Input } from "@geolibre/ui";
 import {
@@ -1288,6 +1289,14 @@ export function TopToolbar({
       icon: Crosshair,
       run: () => setSetViewOpen(true),
     },
+    {
+      id: "view.comments",
+      title: "View Comments",
+      group: t("toolbar.commandGroup.view"),
+      keywords: "comments review threads notes annotations pins",
+      icon: MessageSquare,
+      run: () => openRightPanel("comments"),
+    },
     {
       id: "view.theme",
       title:
diff --git a/apps/geolibre-desktop/src/hooks/useCollaboration.ts b/apps/geolibre-desktop/src/hooks/useCollaboration.ts
index 1878b1cbb..17d97ab1d 100644
--- a/apps/geolibre-desktop/src/hooks/useCollaboration.ts
+++ b/apps/geolibre-desktop/src/hooks/useCollaboration.ts
@@ -4,6 +4,7 @@ import {
   serializeProject,
   useAppStore,
   type CollaborationMode,
+  type CollaborationParticipant,
   type CollaborationPresence,
   type GeoLibreProject,
 } from "@geolibre/core";
@@ -20,87 +21,42 @@ import {
   resolveCollabBaseUrl,
   sessionWsUrl,
 } from "../lib/collab-client";
-import type { ServerMessage } from "../lib/collab-protocol";
+import type { CommentMutationAction, ServerMessage } from "../lib/collab-protocol";
 
-// Coalesce the burst of store writes one user action produces into a single
-// outbound snapshot — same window the embed bridge uses.
 const SNAPSHOT_DEBOUNCE_MS = 250;
-// Cursor presence is high-frequency; cap it so we don't flood the relay.
 const CURSOR_THROTTLE_MS = 40;
 
 export interface CollaborationApi {
-  /** True when `VITE_GEOLIBRE_COLLAB_URL` is configured; gates all UI. */
   enabled: boolean;
-  /** Host a new session and connect. Resolves with the shareable code. */
+  canEdit: () => boolean;
   start: (displayName: string, color: string, mode: CollaborationMode) => Promise<string>;
-  /** Join an existing session by its code. */
   join: (sessionId: string, displayName: string, color: string) => Promise<void>;
-  /** Leave the active session and tear everything down. */
   leave: () => void;
-  /** Host-only: switch the session between view-only and co-edit. */
   setMode: (mode: CollaborationMode) => void;
-  /** Host-only: pin one participant to can-edit or view-only (#754). */
   setParticipantMode: (clientId: string, canEdit: boolean) => void;
-  /** Toggle whether this participant's camera follows the host's viewport. */
   setFollowHost: (enabled: boolean) => void;
-  /**
-   * Send a chat message to the session, optionally attaching a coordinate
-   * (#754). Returns true if it reached an open socket, so the caller can keep
-   * the draft when a send is dropped (socket not open).
-   */
   sendChat: (text: string, coordinate?: { lng: number; lat: number } | null) => boolean;
+  sendCommentMutation: (action: CommentMutationAction) => boolean;
 }
 
-/**
- * Drives live multi-user collaboration (issue #307): subscribes to the store and
- * broadcasts debounced, deduped project snapshots over a WebSocket, streams
- * cursor/viewport presence, and applies inbound snapshots/presence back into the
- * store. Inert when collaboration is not configured.
- *
- * The transport mirrors {@link useEmbedBridge}: a single `lastAppliedContent`
- * cache suppresses the echo a remote apply would otherwise re-broadcast.
- *
- * @param mapControllerRef - Ref to the live map controller, used to read the
- *   camera for snapshots and to bind cursor/viewport presence handlers.
- * @returns The session control API consumed by the Collaborate dialog.
- */
 export function useCollaboration(
   mapControllerRef: RefObject<MapController | null>,
 ): CollaborationApi {
   const baseUrl = useMemo(() => resolveCollabBaseUrl(), []);
   const enabled = baseUrl !== null;
 
-  // All mutable session machinery lives in refs so the effects/actions are
-  // stable and don't re-subscribe on every render.
   const connRef = useRef<CollabConnection | null>(null);
   const teardownRef = useRef<(() => void) | null>(null);
-  // Shared dedupe key for both directions: the last serialized project we sent
-  // or applied. A remote apply sets this first so the store update it triggers
-  // serializes identically and is suppressed (no echo).
   const lastContentRef = useRef<string | null>(null);
   const revRef = useRef(0);
   const selfIdRef = useRef<string | null>(null);
-  // Whether we ever completed the initial join (received a `welcome`). A
-  // disconnect before that means the session code was bad or the relay is
-  // unreachable, which we treat as a fatal connect failure rather than retrying
-  // a dead session forever.
-  const joinedRef = useRef(false);
-  // Set when the relay rejects a snapshot as too large; stops further sends so
-  // an over-size project doesn't re-fail on every keystroke. Reset on reconnect.
   const syncPausedRef = useRef(false);
-  // Debounces the projectGeneration bump that drives plugin-layer restoration
-  // after a burst of incremental remote edits.
   const restoreTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Settles when the current connect attempt joins (welcome) or fatally fails,
-  // so start()/join() resolve only on real success and the dialog keeps its
-  // busy spinner until then.
   const pendingConnectRef = useRef<{
     resolve: () => void;
     reject: (error: Error) => void;
   } | null>(null);
 
-  // Tear everything down on unmount: close the socket AND clear the slice so a
-  // stale "active" session can't linger in the store if the host unmounts.
   useEffect(
     () => () => {
       disconnect();
@@ -112,79 +68,43 @@ export function useCollaboration(
 
   const canEdit = (): boolean => {
     const c = useAppStore.getState().collaboration;
-    // Require an active (joined) session so a debounced snapshot can't fire in
-    // the window between connect() and the `welcome` (where mode still holds its
-    // default of "co-edit").
     if (!c.isActive) return false;
     if (c.role === "host") return true;
-    // A host-set per-participant override wins over the session mode (#754);
-    // fall back to the mode when there is no override for us.
     const self = c.participants.find((p) => p.clientId === c.clientId);
     return self?.editOverride ?? c.mode === "co-edit";
   };
 
   const sendSnapshot = (): void => {
-    const conn = connRef.current;
-    if (!conn || !canEdit() || syncPausedRef.current) return;
+    if (!canEdit() || syncPausedRef.current) return;
     const project = buildProjectSnapshot(mapControllerRef);
     const content = serializeProject(project);
-    // Skip identical snapshots (selection/presence writes don't change content).
     if (content === lastContentRef.current) return;
     lastContentRef.current = content;
     revRef.current += 1;
-    conn.send({ type: "snapshot", project, rev: revRef.current });
+    connRef.current?.send({ type: "snapshot", project, rev: revRef.current });
   };
 
-  // Bump projectGeneration (debounced) to run DesktopShell's plugin/native-layer
-  // restoration once after a burst of incremental edits settles. The bump alone
-  // re-runs the restoration effect; it changes no serialized project field, so
-  // the snapshot subscription dedupes it (no echo).
-  const RESTORE_DEBOUNCE_MS = 200;
   const scheduleRestore = (): void => {
     if (restoreTimerRef.current) clearTimeout(restoreTimerRef.current);
     restoreTimerRef.current = setTimeout(() => {
       restoreTimerRef.current = null;
-      useAppStore.setState((s) => ({
-        projectGeneration: s.projectGeneration + 1,
-      }));
-    }, RESTORE_DEBOUNCE_MS);
+      useAppStore.setState((s) => ({ projectGeneration: s.projectGeneration + 1 }));
+    }, 200);
   };
 
   const applyRemoteSnapshot = (project: GeoLibreProject, initial: boolean): void => {
-    // Keep each participant's own camera: replace the incoming view with the
-    // local one before applying, so a peer's edit never yanks our viewport.
-    // Where others are looking is conveyed by presence viewport rectangles.
     const localView = mapControllerRef.current?.readView() ?? useAppStore.getState().mapView;
     const merged: GeoLibreProject = { ...project, mapView: localView };
     if (initial) {
-      // First bootstrap (the welcome snapshot): a one-time full loadProject is
-      // fine and runs the plugin/native-layer restoration so the joiner sees
-      // the host's existing 3D-tiles/deck/raster layers.
       useAppStore
         .getState()
         .loadProject(merged, null, { rememberRecent: false, presenting: false });
     } else {
-      // Incremental remote edit: apply the project slice immediately so
-      // MapLibre-native layers (geojson, vector/raster tiles, …) reconcile via
-      // MapCanvas's syncLayers without flicker. We apply directly rather than
-      // via loadProject so the local user's selectedLayerId isn't reset to the
-      // first layer on every remote edit.
       const applied = applyProjectToStore(merged);
       useAppStore.setState({ ...applied });
       clearHistory();
-      // Plugin-rendered layer types (raster-COG, LiDAR, 3D-tiles, deck) are NOT
-      // handled by syncLayers — DesktopShell's restoration effect (keyed on
-      // projectGeneration) renders them. Bump it, debounced, so a burst of edits
-      // triggers that heavier restoration once after it settles rather than on
-      // every snapshot.
       scheduleRestore();
     }
-    // Cache the POST-normalization serialization (mirrors useEmbedBridge): the
-    // store update we just made re-serializes to this exact string and is
-    // suppressed, so a remote apply never echoes back as a new snapshot.
-    // Serializing `merged` (the pre-normalization input) instead would mismatch
-    // applyProjectToStore's normalized output (deduped styles, defaults,
-    // reordering) and create a broadcast feedback loop.
     lastContentRef.current = serializeProject(buildProjectSnapshot(mapControllerRef));
   };
 
@@ -192,7 +112,6 @@ export function useCollaboration(
     const store = useAppStore.getState();
     switch (message.type) {
       case "welcome": {
-        joinedRef.current = true;
         selfIdRef.current = message.clientId;
         store.setCollaboration({
           isActive: true,
@@ -201,15 +120,9 @@ export function useCollaboration(
           role: message.role,
           mode: message.mode,
           participants: message.participants,
-          // Bootstrap (or, on a reconnect, re-seed) the chat log from the relay's
-          // recent history so a late joiner sees the conversation so far. Default
-          // to [] so an older relay that omits `chat` can't leave the slice
-          // undefined (which would crash the chat UI).
           chat: message.chat ?? [],
           error: null,
         });
-        // Bootstrap existing participants' cursors/viewports so they're visible
-        // immediately, not only after their next move.
         for (const [clientId, entry] of Object.entries(message.presence)) {
           if (clientId === message.clientId) continue;
           const participant = message.participants.find((p) => p.clientId === clientId);
@@ -221,14 +134,13 @@ export function useCollaboration(
           });
         }
         if (message.snapshot) applyRemoteSnapshot(message.snapshot, true);
-        // Resolve the connect() promise so start()/join() (and the dialog's busy
-        // state) settle only once the join actually succeeds.
         const pending = pendingConnectRef.current;
         pendingConnectRef.current = null;
         pending?.resolve();
         break;
       }
       case "snapshot":
+        // origin is the server-assigned clientId of the sender; skip our own echo.
         if (message.origin !== selfIdRef.current) {
           applyRemoteSnapshot(message.project, false);
         }
@@ -244,7 +156,6 @@ export function useCollaboration(
           view: message.view,
         };
         store.updateCollaborationPresence(message.clientId, presence);
-        // Follow mode: mirror the host's camera onto the local map.
         if (collab.followHost && participant?.role === "host" && message.view) {
           mapControllerRef.current?.applyView(message.view);
         }
@@ -252,7 +163,6 @@ export function useCollaboration(
       }
       case "participants": {
         store.setCollaboration({ participants: message.participants });
-        // Drop presence for anyone who left so stale cursors don't linger.
         const present = new Set(message.participants.map((p) => p.clientId));
         const presence = useAppStore.getState().collaboration.presence;
         for (const id of Object.keys(presence)) {
@@ -264,21 +174,34 @@ export function useCollaboration(
         store.setCollaboration({ mode: message.mode });
         break;
       case "chat":
-        // The relay echoes our own messages back too, so the store is the single
-        // ordered source of truth; addCollaborationChat de-dupes by id.
+        // The relay echoes our own messages back with the server-assigned id.
+        // Always add via the echo so the server id is used — addCollaborationChat
+        // deduplicates by id so subsequent echoes are harmless.
         store.addCollaborationChat(message.message);
         break;
+      case "comment-mutation": {
+        // The relay excludes the sender (broadcast(msg, ws)), so we never receive
+        // our own mutations back over WebSocket. Apply everything we receive.
+        const action = message.action;
+        if (action.type === "add") {
+          store.addComment(action.comment);
+        } else if (action.type === "reply") {
+          store.replyToComment(action.commentId, action.reply);
+        } else if (action.type === "toggle-resolve") {
+          store.toggleResolveComment(action.commentId, action.resolved);
+        } else if (action.type === "delete") {
+          store.deleteComment(action.commentId);
+        }
+        break;
+      }
       case "error":
         store.setCollaboration({ error: message.message });
-        // A too-large project will fail on every subsequent edit; pause sending
-        // so it doesn't re-fail in a loop until the session is rejoined.
         if (message.code === "too-large") syncPausedRef.current = true;
         break;
     }
   };
 
-  // Wire the store subscription and map presence handlers once a connection is
-  // open. Returns a teardown that removes them all.
+  // Called from onOpen — the socket is open and we are ready to join.
   const attach = (displayName: string, color: string, hostToken: string | undefined): void => {
     const conn = connRef.current;
     if (!conn) return;
@@ -292,9 +215,6 @@ export function useCollaboration(
       }, SNAPSHOT_DEBOUNCE_MS);
     };
 
-    // Only schedule when the project content could have changed; presence and
-    // collaboration-slice writes (remote cursors) must not keep resetting the
-    // debounce and starving our own edits.
     const unsubscribe = useAppStore.subscribe((state, prev) => {
       if (projectChanged(state, prev)) scheduleSnapshot();
     });
@@ -302,7 +222,6 @@ export function useCollaboration(
     const map = mapControllerRef.current?.getMap() ?? null;
     const detachMap = map ? bindPresence(map, conn) : () => {};
 
-    // Send join once the socket is open (attach runs from onOpen).
     conn.send({
       type: "join",
       clientId: selfIdRef.current ?? crypto.randomUUID(),
@@ -324,25 +243,16 @@ export function useCollaboration(
       const now = Date.now();
       if (now - lastCursor < CURSOR_THROTTLE_MS) return;
       lastCursor = now;
-      conn.send({
-        type: "presence",
-        cursor: { lng: e.lngLat.lng, lat: e.lngLat.lat },
-      });
+      conn.send({ type: "presence", cursor: { lng: e.lngLat.lng, lat: e.lngLat.lat } });
     };
     const onMouseOut = () => conn.send({ type: "presence", cursor: null });
     const onMoveEnd = (event?: { flightCameraToken?: number }) => {
-      // Flight-simulator frames are camera jumps, not navigation; broadcasting
-      // one per animation frame would flood the presence channel.
       if (event?.flightCameraToken !== undefined) return;
-      conn.send({
-        type: "presence",
-        view: mapControllerRef.current?.readView() ?? null,
-      });
+      conn.send({ type: "presence", view: mapControllerRef.current?.readView() ?? null });
     };
     map.on("mousemove", onMouseMove);
     map.on("mouseout", onMouseOut);
     map.on("moveend", onMoveEnd);
-    // Announce our initial viewport immediately.
     onMoveEnd();
     return () => {
       map.off("mousemove", onMouseMove);
@@ -351,58 +261,66 @@ export function useCollaboration(
     };
   };
 
-  // Resolves once the connection joins (welcome) and rejects on a fatal
-  // connect failure, so callers can keep a busy state until the join really
-  // succeeds.
   const connect = (
     sessionId: string,
     displayName: string,
     color: string,
     hostToken: string | undefined,
   ): Promise<void> => {
-    // Unreachable when disabled (the UI is hidden), but guard so `baseUrl` is
-    // a string below without a non-null assertion.
-    if (!baseUrl) return Promise.reject(new Error("not configured"));
     disconnect();
-    joinedRef.current = false;
     syncPausedRef.current = false;
     selfIdRef.current = crypto.randomUUID();
     lastContentRef.current = null;
     revRef.current = 0;
+
+    const normalizedCode = sessionId.trim().toUpperCase();
+
+    const selfParticipant: CollaborationParticipant = {
+      clientId: selfIdRef.current,
+      displayName,
+      color,
+      role: hostToken ? "host" : "guest",
+      editOverride: null,
+    };
+
     useAppStore.getState().setCollaboration({
       connecting: true,
-      sessionId,
+      isActive: false,
+      sessionId: normalizedCode,
       selfName: displayName,
       selfColor: color,
+      role: hostToken ? "host" : "guest",
+      mode: "co-edit",
+      clientId: selfIdRef.current,
+      participants: [selfParticipant],
       error: null,
     });
+
     return new Promise<void>((resolve, reject) => {
       pendingConnectRef.current = { resolve, reject };
-      const conn = new CollabConnection(sessionWsUrl(baseUrl, sessionId), {
-        onOpen: () => attach(displayName, color, hostToken),
-        onMessage: handleMessage,
+
+      const conn = new CollabConnection(sessionWsUrl(baseUrl!, normalizedCode), {
+        onOpen: () => {
+          if (connRef.current !== conn) return;
+          attach(displayName, color, hostToken);
+        },
+        onMessage: (msg) => {
+          if (connRef.current !== conn) return;
+          handleMessage(msg);
+        },
         onClose: (reconnecting) => {
-          // A reconnect re-runs onOpen -> attach -> join, so drop the stale
-          // store subscription/handlers first.
+          if (connRef.current && connRef.current !== conn) return;
           teardownRef.current?.();
           teardownRef.current = null;
-          // A disconnect before the first successful join (bad session code,
-          // unreachable relay) is fatal: stop retrying and surface the error to
-          // the dialog instead of spinning forever. close() here suppresses the
-          // pending reconnect (see CollabConnection).
-          if (reconnecting && !joinedRef.current) {
-            const pending = pendingConnectRef.current;
+          if (reconnecting && pendingConnectRef.current) {
+            const p = pendingConnectRef.current;
             pendingConnectRef.current = null;
-            disconnect();
-            useAppStore.getState().setCollaboration({
-              connecting: false,
-              isActive: false,
-              error: i18n.t("collaborate.connectFailed"),
-            });
-            pending?.reject(new Error("connect failed"));
-            return;
+            conn.close();
+            useAppStore
+              .getState()
+              .setCollaboration({ connecting: false, error: "Could not connect to the session." });
+            p.reject(new Error("Could not connect to the session."));
           }
-          useAppStore.getState().setCollaboration({ connecting: reconnecting });
         },
       });
       connRef.current = conn;
@@ -413,6 +331,11 @@ export function useCollaboration(
   const disconnect = (): void => {
     teardownRef.current?.();
     teardownRef.current = null;
+    if (pendingConnectRef.current) {
+      const p = pendingConnectRef.current;
+      pendingConnectRef.current = null;
+      p.reject(new Error(i18n.t("comments.sessionDisconnected")));
+    }
     connRef.current?.close();
     connRef.current = null;
     selfIdRef.current = null;
@@ -420,14 +343,8 @@ export function useCollaboration(
       clearTimeout(restoreTimerRef.current);
       restoreTimerRef.current = null;
     }
-    // Drop any in-flight connect promise without settling it; a fresh connect()
-    // installs a new one, and the only fatal path settles it explicitly above.
-    pendingConnectRef.current = null;
   };
 
-  // `connect`/`disconnect` close only over stable refs and `baseUrl`, so keying
-  // these actions on `baseUrl` alone is correct; listing `connect` would
-  // needlessly re-create them every render.
   const start = useCallback(
     async (displayName: string, color: string, mode: CollaborationMode) => {
       const session = await createSession(mode, baseUrl);
@@ -456,25 +373,27 @@ export function useCollaboration(
   }, []);
 
   const setParticipantMode = useCallback((clientId: string, canEditFlag: boolean) => {
-    connRef.current?.send({
-      type: "set-participant-mode",
-      clientId,
-      canEdit: canEditFlag,
-    });
+    connRef.current?.send({ type: "set-participant-mode", clientId, canEdit: canEditFlag });
   }, []);
 
   const sendChat = useCallback((text: string, coordinate?: { lng: number; lat: number } | null) => {
     const trimmed = text.trim();
     if (!trimmed) return false;
+    // Send to the relay only. The relay broadcasts back to everyone including
+    // the sender with a server-assigned id; handleMessage("chat") adds it to
+    // the store then. This means the server's ordering is always the truth and
+    // the sender's message appears only once (via the echo, not optimistically).
     return connRef.current?.send({ type: "chat", text: trimmed, coordinate }) ?? false;
   }, []);
 
+  const sendCommentMutation = useCallback((action: CommentMutationAction) => {
+    return connRef.current?.send({ type: "comment-mutation", action }) ?? false;
+  }, []);
+
   const setFollowHost = useCallback((enabled: boolean) => {
     const store = useAppStore.getState();
     store.setCollaboration({ followHost: enabled });
     if (!enabled) return;
-    // Jump to the host's last-known viewport immediately so following takes
-    // effect now rather than only on the host's next move.
     const host = store.collaboration.participants.find((p) => p.role === "host");
     const view = host ? store.collaboration.presence[host.clientId]?.view : null;
     if (view) mapControllerRef.current?.applyView(view);
@@ -483,6 +402,7 @@ export function useCollaboration(
 
   return {
     enabled,
+    canEdit,
     start,
     join,
     leave,
@@ -490,5 +410,6 @@ export function useCollaboration(
     setParticipantMode,
     setFollowHost,
     sendChat,
+    sendCommentMutation,
   };
 }
diff --git a/apps/geolibre-desktop/src/hooks/useRegisterCommentsPanel.ts b/apps/geolibre-desktop/src/hooks/useRegisterCommentsPanel.ts
new file mode 100644
index 000000000..b1784de4b
--- /dev/null
+++ b/apps/geolibre-desktop/src/hooks/useRegisterCommentsPanel.ts
@@ -0,0 +1,26 @@
+import { collapseRightPanel, openRightPanel, registerRightPanel } from "@geolibre/plugins";
+import { useEffect } from "react";
+
+/** Stable id of the Comments right panel. */
+export const COMMENTS_PANEL_ID = "comments";
+
+/**
+ * Registers the Comments panel as a dockable right panel sharing the Style (right)
+ * sidebar's rail (`replace-style`).
+ *
+ * Opens and collapses on mount so it is active and present as a rail entry on the
+ * right sidebar by default.
+ */
+export function useRegisterCommentsPanel(): void {
+  useEffect(() => {
+    const dispose = registerRightPanel({
+      id: COMMENTS_PANEL_ID,
+      title: "Comments",
+      dock: "replace-style",
+      render: () => {},
+    });
+    openRightPanel(COMMENTS_PANEL_ID);
+    collapseRightPanel(COMMENTS_PANEL_ID);
+    return dispose;
+  }, []);
+}
diff --git a/apps/geolibre-desktop/src/i18n/locales/en.json b/apps/geolibre-desktop/src/i18n/locales/en.json
index 9ccb8e48e..f8a7a5eda 100644
--- a/apps/geolibre-desktop/src/i18n/locales/en.json
+++ b/apps/geolibre-desktop/src/i18n/locales/en.json
@@ -4932,5 +4932,16 @@
     "distributionAria": "Distribution of {{field}}: {{total}} values from {{min}} to {{max}}",
     "noPopulated": "No populated values.",
     "moreValues": "+{{total}} more values"
+  },
+  "comments": {
+    "addDialogTitle": "Add Review Comment",
+    "addDialogDescription": "Post an anchored note on this project for team review or offline reference.",
+    "authorNameLabel": "Your Name (Asked once, saved automatically)",
+    "authorNamePlaceholder": "e.g. Alex or Sarah",
+    "commentLabel": "Comment / Feedback",
+    "commentPlaceholder": "Type your review note or feedback here...",
+    "confirmDelete": "Are you sure you want to delete this comment thread?",
+    "sessionDisconnected": "Session disconnected.",
+    "defaultAuthorName": "Author"
   }
 }
diff --git a/apps/geolibre-desktop/src/lib/build-project-snapshot.ts b/apps/geolibre-desktop/src/lib/build-project-snapshot.ts
index ae05d8744..378144724 100644
--- a/apps/geolibre-desktop/src/lib/build-project-snapshot.ts
+++ b/apps/geolibre-desktop/src/lib/build-project-snapshot.ts
@@ -44,6 +44,7 @@ export function buildProjectSnapshot(
     secondaryMapViews: state.secondaryMapViews,
     primaryMapLabel: state.primaryMapLabel,
     styleLibrary: state.projectStyleLibrary,
+    comments: state.comments,
     metadata: state.metadata,
   });
 }
diff --git a/apps/geolibre-desktop/src/lib/collab-client.ts b/apps/geolibre-desktop/src/lib/collab-client.ts
index 73264c438..cf46ede0b 100644
--- a/apps/geolibre-desktop/src/lib/collab-client.ts
+++ b/apps/geolibre-desktop/src/lib/collab-client.ts
@@ -41,10 +41,7 @@ export function resolveCollabBaseUrl(
     if (
       url.protocol === "wss:" ||
       (url.protocol === "ws:" &&
-        (url.hostname === "localhost" ||
-          url.hostname === "127.0.0.1" ||
-          // WHATWG URL keeps the brackets on an IPv6 host.
-          url.hostname === "[::1]"))
+        (url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]"))
     ) {
       return trimmed;
     }
@@ -64,21 +61,13 @@ export function sessionWsUrl(wsBase: string, sessionId: string): string {
   return `${wsBase}/sessions/${encodeURIComponent(sessionId)}/ws`;
 }
 
-/**
- * Create a new session on the relay and return its shareable code plus the host
- * token (which only the creator ever sees, so a guest can't claim host).
- *
- * @param mode - Initial session mode (view-only or co-edit).
- * @param baseUrl - Override the relay base; defaults to the configured env value.
- * @param fetchImpl - Injected for testing; defaults to the global fetch.
- */
 export async function createSession(
   mode: CollaborationMode,
   baseUrl: string | null = resolveCollabBaseUrl(),
   fetchImpl: typeof fetch = fetch,
 ): Promise<CreateSessionResult> {
   if (!baseUrl) {
-    throw new Error("Live collaboration is not configured.");
+    throw new Error("Collaboration is not configured. Set VITE_GEOLIBRE_COLLAB_URL.");
   }
   const httpBase = httpBaseFromWs(baseUrl);
   let response: Response;
@@ -93,7 +82,9 @@ export async function createSession(
     if (error instanceof DOMException && error.name === "TimeoutError") {
       throw new Error("Timed out creating the session. Please try again.");
     }
-    throw new Error("Could not reach the collaboration server.");
+    throw new Error(
+      "Could not reach the collaboration server. Check your connection and try again.",
+    );
   }
   if (!response.ok) {
     throw new Error(`Could not create the session (HTTP ${response.status}).`);
diff --git a/apps/geolibre-desktop/src/lib/collab-protocol.ts b/apps/geolibre-desktop/src/lib/collab-protocol.ts
index 850cfc054..8e4ca28f4 100644
--- a/apps/geolibre-desktop/src/lib/collab-protocol.ts
+++ b/apps/geolibre-desktop/src/lib/collab-protocol.ts
@@ -10,8 +10,10 @@ import type {
   CollaborationMode,
   CollaborationParticipant,
   CollaborationRole,
+  CommentReply,
   GeoLibreProject,
   MapViewState,
+  ProjectComment,
 } from "@geolibre/core";
 
 export type { CollaborationMode, CollaborationRole };
@@ -80,13 +82,25 @@ export interface ChatSendMessage {
   coordinate?: CollabCursor | null;
 }
 
+export type CommentMutationAction =
+  | { type: "add"; comment: ProjectComment }
+  | { type: "reply"; commentId: string; reply: CommentReply }
+  | { type: "toggle-resolve"; commentId: string; resolved?: boolean }
+  | { type: "delete"; commentId: string };
+
+export interface CommentMutationMessage {
+  type: "comment-mutation";
+  action: CommentMutationAction;
+}
+
 export type ClientMessage =
   | JoinMessage
   | ClientSnapshotMessage
   | ClientPresenceMessage
   | SetModeMessage
   | SetParticipantModeMessage
-  | ChatSendMessage;
+  | ChatSendMessage
+  | CommentMutationMessage;
 
 // Server -> client -----------------------------------------------------------
 
@@ -153,4 +167,5 @@ export type ServerMessage =
   | ParticipantsMessage
   | ModeMessage
   | ChatBroadcastMessage
+  | CommentMutationMessage
   | ErrorMessage;
diff --git a/apps/geolibre-desktop/src/lib/project-broadcast-changed.ts b/apps/geolibre-desktop/src/lib/project-broadcast-changed.ts
index a16f7bb3f..59b84063c 100644
--- a/apps/geolibre-desktop/src/lib/project-broadcast-changed.ts
+++ b/apps/geolibre-desktop/src/lib/project-broadcast-changed.ts
@@ -40,6 +40,9 @@ export function projectChanged(a: AppState, b: AppState): boolean {
     a.secondaryMapViews !== b.secondaryMapViews ||
     a.primaryMapLabel !== b.primaryMapLabel ||
     a.projectStyleLibrary !== b.projectStyleLibrary ||
-    a.metadata !== b.metadata
+    a.metadata !== b.metadata ||
+    // Comments are part of the project snapshot (buildProjectSnapshot includes
+    // state.comments) so a change must trigger a broadcast to peers.
+    a.comments !== b.comments
   );
 }
diff --git a/package-lock.json b/package-lock.json
index 9fe2eaf9f..accc6d57a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3161,40 +3161,6 @@
         "@electric-sql/pglite": "0.5.4"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
-      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.2",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.2.tgz",
-      "integrity": "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
-      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.28.1",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
@@ -4213,9 +4179,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4233,9 +4196,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4253,9 +4213,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4273,9 +4230,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4293,9 +4247,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4313,9 +4264,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4333,9 +4281,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4353,9 +4298,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -4373,9 +4315,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4399,9 +4338,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4425,9 +4361,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4451,9 +4384,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4477,9 +4407,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4503,9 +4430,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4529,9 +4453,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4555,9 +4476,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
diff --git a/packages/core/src/project.ts b/packages/core/src/project.ts
index d8a9a0cf7..0d9b58d11 100644
--- a/packages/core/src/project.ts
+++ b/packages/core/src/project.ts
@@ -44,6 +44,10 @@ import {
   type StoryMap,
   type StorySlideMode,
   type StyleLibraryEntry,
+  type CommentAnchor,
+  type CommentAuthor,
+  type CommentReply,
+  type ProjectComment,
 } from "./types";
 import { DEFAULT_LAYER_GROUP_OPACITY, normalizeGroupContiguity } from "./layer-groups";
 import { normalizeStyleLibraryEntries } from "./style-library";
@@ -92,6 +96,7 @@ export function createEmptyProject(
         }
       : DEFAULT_PROJECT_PREFERENCES,
     legend: { ...DEFAULT_LEGEND_CONFIG },
+    comments: [],
     metadata: {},
   };
 }
@@ -132,6 +137,7 @@ export function parseProject(json: string): GeoLibreProject {
     { mapView },
   );
   const styleLibrary = normalizeStyleLibraryEntries(data.styleLibrary);
+  const parsedComments = normalizeProjectComments(data.comments);
   return {
     version: data.version,
     name: data.name,
@@ -165,6 +171,7 @@ export function parseProject(json: string): GeoLibreProject {
         }
       : {}),
     ...(styleLibrary.length > 0 ? { styleLibrary } : {}),
+    ...(parsedComments.length > 0 ? { comments: parsedComments } : {}),
     metadata: data.metadata ?? {},
   };
 }
@@ -1159,6 +1166,100 @@ function normalizeLayer(layer: GeoLibreLayer): GeoLibreLayer {
   };
 }
 
+export function normalizeProjectComments(rawComments: unknown): ProjectComment[] {
+  if (!Array.isArray(rawComments)) return [];
+  const result: ProjectComment[] = [];
+  for (const item of rawComments) {
+    if (!item || typeof item !== "object") continue;
+    const c = item as Record<string, unknown>;
+    if (typeof c.id !== "string" || !c.id) continue;
+
+    if (!c.anchor || typeof c.anchor !== "object") continue;
+    const anchorObj = c.anchor as Record<string, unknown>;
+    let anchor: CommentAnchor;
+    if (
+      anchorObj.type === "point" &&
+      Array.isArray(anchorObj.lngLat) &&
+      anchorObj.lngLat.length === 2 &&
+      typeof anchorObj.lngLat[0] === "number" &&
+      typeof anchorObj.lngLat[1] === "number"
+    ) {
+      anchor = { type: "point", lngLat: [anchorObj.lngLat[0], anchorObj.lngLat[1]] };
+    } else if (
+      anchorObj.type === "feature" &&
+      typeof anchorObj.layerId === "string" &&
+      (typeof anchorObj.featureId === "string" || typeof anchorObj.featureId === "number")
+    ) {
+      const featLngLat =
+        Array.isArray(anchorObj.lngLat) &&
+        anchorObj.lngLat.length === 2 &&
+        typeof anchorObj.lngLat[0] === "number" &&
+        typeof anchorObj.lngLat[1] === "number"
+          ? ([anchorObj.lngLat[0], anchorObj.lngLat[1]] as [number, number])
+          : undefined;
+      anchor = {
+        type: "feature",
+        layerId: anchorObj.layerId,
+        featureId: anchorObj.featureId,
+        ...(featLngLat ? { lngLat: featLngLat } : {}),
+      };
+    } else {
+      continue;
+    }
+
+    const authorObj =
+      c.author && typeof c.author === "object" ? (c.author as Record<string, unknown>) : {};
+    const HEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+    const author: CommentAuthor = {
+      name:
+        typeof authorObj.name === "string" && authorObj.name.trim()
+          ? authorObj.name.trim()
+          : "Anonymous",
+      color:
+        typeof authorObj.color === "string" && HEX.test(authorObj.color.trim())
+          ? authorObj.color.trim()
+          : "#3b82f6",
+    };
+
+    const replies: CommentReply[] = [];
+    if (Array.isArray(c.replies)) {
+      for (const rItem of c.replies) {
+        if (!rItem || typeof rItem !== "object") continue;
+        const r = rItem as Record<string, unknown>;
+        if (typeof r.id !== "string" || !r.id) continue;
+        const rAuthorObj =
+          r.author && typeof r.author === "object" ? (r.author as Record<string, unknown>) : {};
+        replies.push({
+          id: r.id,
+          author: {
+            name:
+              typeof rAuthorObj.name === "string" && rAuthorObj.name.trim()
+                ? rAuthorObj.name.trim()
+                : "Anonymous",
+            color:
+              typeof rAuthorObj.color === "string" && HEX.test(rAuthorObj.color.trim())
+                ? rAuthorObj.color.trim()
+                : "#3b82f6",
+          },
+          body: typeof r.body === "string" ? r.body : "",
+          createdAt: typeof r.createdAt === "string" ? r.createdAt : new Date().toISOString(),
+        });
+      }
+    }
+
+    result.push({
+      id: c.id,
+      anchor,
+      author,
+      body: typeof c.body === "string" ? c.body : "",
+      createdAt: typeof c.createdAt === "string" ? c.createdAt : new Date().toISOString(),
+      resolved: Boolean(c.resolved),
+      replies,
+    });
+  }
+  return result;
+}
+
 export function projectFromStore(state: {
   projectName: string;
   mapView: MapViewState;
@@ -1181,6 +1282,7 @@ export function projectFromStore(state: {
   primaryMapLabel?: string;
   /** Project-scoped Style Manager entries (the store's `projectStyleLibrary`). */
   styleLibrary?: StyleLibraryEntry[] | null;
+  comments?: ProjectComment[] | null;
   metadata: Record<string, unknown>;
 }): GeoLibreProject {
   const styles: Record<string, LayerStyle> = {};
@@ -1193,6 +1295,7 @@ export function projectFromStore(state: {
   const models = normalizeModels(state.models);
   const processingHistory = normalizeProcessingHistory(state.processingHistory);
   const widgets = normalizeWidgets(state.widgets);
+  const comments = normalizeProjectComments(state.comments);
   // Persist a non-default column count only; a default-layout dashboard (or a
   // widget-less project) stays free of the key for legacy readers.
   const dashboardColumns =
@@ -1249,6 +1352,7 @@ export function projectFromStore(state: {
         }
       : {}),
     ...(styleLibrary.length > 0 ? { styleLibrary } : {}),
+    ...(comments.length > 0 ? { comments } : {}),
     metadata: state.metadata,
   };
 }
@@ -1356,6 +1460,7 @@ export function applyProjectToStore(project: GeoLibreProject): {
   secondaryMapViews: SecondaryMapView[];
   primaryMapLabel: string;
   projectStyleLibrary: StyleLibraryEntry[];
+  comments: ProjectComment[];
   metadata: Record<string, unknown>;
 } {
   const layers = project.layers.map((layer) => ({
@@ -1412,6 +1517,7 @@ export function applyProjectToStore(project: GeoLibreProject): {
     secondaryMapViews,
     primaryMapLabel: normalizeString(project.primaryMapLabel),
     projectStyleLibrary: normalizeStyleLibraryEntries(project.styleLibrary),
+    comments: normalizeProjectComments(project.comments),
     metadata: project.metadata,
   };
 }
diff --git a/packages/core/src/store.ts b/packages/core/src/store.ts
index ce38a40e1..63bc8522d 100644
--- a/packages/core/src/store.ts
+++ b/packages/core/src/store.ts
@@ -58,6 +58,10 @@ import {
   type StoryMap,
   type StyleLibraryEntry,
   type ProjectTemplateEntry,
+  type CommentAnchor,
+  type CommentAuthor,
+  type CommentReply,
+  type ProjectComment,
 } from "./types";
 import { hasSimpleStyleProperties } from "./vector-color";
 import {
@@ -249,6 +253,8 @@ export interface AppState {
   pointerCoords: [number, number] | null;
   /** Live GPS fix for the status bar, or null while GPS tracking is off. */
   gpsStatus: GpsStatusFix | null;
+  /** Anchored review comments on map points or features (issue #1518). */
+  comments: ProjectComment[];
   metadata: Record<string, unknown>;
   recentProjects: RecentProjectEntry[];
   attributeFilter: string;
@@ -622,6 +628,12 @@ export interface AppState {
   ) => void;
   moveLayerGroupToGroup: (id: string, parentId: string | null) => void;
   reorderLayerGroup: (id: string, direction: "up" | "down") => void;
+
+  addComment: (comment: ProjectComment) => void;
+  replyToComment: (commentId: string, reply: CommentReply) => void;
+  toggleResolveComment: (commentId: string, resolved?: boolean) => void;
+  deleteComment: (commentId: string) => void;
+  setComments: (comments: ProjectComment[]) => void;
 }
 
 const MAX_RECENT_PROJECTS = 10;
@@ -946,6 +958,7 @@ export const useAppStore = create<AppState>()(
       identifyLayerId: null,
       pointerCoords: null,
       gpsStatus: null,
+      comments: [],
       metadata: {},
       recentProjects: [],
       attributeFilter: "",
@@ -989,6 +1002,43 @@ export const useAppStore = create<AppState>()(
 
       setPointerCoords: (coords) => set({ pointerCoords: coords }),
       setGpsStatus: (fix) => set({ gpsStatus: fix }),
+
+      addComment: (comment) =>
+        set((s) => {
+          // Ignore a duplicate id: the WebSocket relay echoes our own
+          // comment-mutation back to the sender, and a reconnect can replay
+          // recent history, so de-dupe defensively (mirrors addCollaborationChat).
+          if (s.comments.some((c) => c.id === comment.id)) return s;
+          return { comments: [...s.comments, comment], isDirty: true };
+        }),
+      replyToComment: (commentId, reply) =>
+        set((s) => {
+          let appended = false;
+          const nextComments = s.comments.map((c) => {
+            if (c.id !== commentId) return c;
+            if (c.replies.some((r) => r.id === reply.id)) return c;
+            appended = true;
+            return { ...c, replies: [...c.replies, reply] };
+          });
+          if (!appended) return s;
+          return { comments: nextComments, isDirty: true };
+        }),
+      toggleResolveComment: (commentId, resolved) =>
+        set((s) => ({
+          comments: s.comments.map((c) =>
+            c.id === commentId
+              ? { ...c, resolved: resolved !== undefined ? resolved : !c.resolved }
+              : c,
+          ),
+          isDirty: true,
+        })),
+      deleteComment: (commentId) =>
+        set((s) => ({
+          comments: s.comments.filter((c) => c.id !== commentId),
+          isDirty: true,
+        })),
+      setComments: (comments) => set({ comments, isDirty: true }),
+
       setCollaboration: (patch) =>
         set((s) => ({ collaboration: { ...s.collaboration, ...patch } })),
       // Add or remove a single remote participant's presence without rebuilding
@@ -2101,6 +2151,7 @@ export const useAppStore = create<AppState>()(
         basemapVisible: s.basemapVisible,
         basemapOpacity: s.basemapOpacity,
         storymap: s.storymap,
+        comments: s.comments,
       }),
       // Records a history entry only when the tracked slice really changed.
       // Basemap fields compare with ===; `layers` is compared element-by-element
@@ -2111,12 +2162,14 @@ export const useAppStore = create<AppState>()(
       // new object, so real edits differ while an unchanged null stays equal.
       // `layerGroups` is compared ignoring `collapsed`, which is a UI preference
       // excluded from undo (see toggleLayerGroupCollapsed).
+      // `comments` is compared shallowly by reference.
       equality: (a, b) =>
         a.basemapStyleUrl === b.basemapStyleUrl &&
         a.basemapVisible === b.basemapVisible &&
         a.basemapOpacity === b.basemapOpacity &&
         a.storymap === b.storymap &&
         shallow(a.layers, b.layers) &&
+        shallow(a.comments, b.comments) &&
         layerGroupsEqualForHistory(a.layerGroups, b.layerGroups),
       limit: 100,
       // Group rapid bursts (slider drags) into one entry; window is 0 in tests.
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 762416f90..8b440fa92 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1741,9 +1741,37 @@ export interface GeoLibreProject {
    * library is persisted outside the project file and never serialized here.
    */
   styleLibrary?: StyleLibraryEntry[];
+  /** Anchored review comments on map points or features (issue #1518). */
+  comments?: ProjectComment[];
   metadata: Record<string, unknown>;
 }
 
+export type CommentAnchor =
+  | { type: "point"; lngLat: [number, number] }
+  | { type: "feature"; layerId: string; featureId: string | number; lngLat?: [number, number] };
+
+export interface CommentAuthor {
+  name: string;
+  color: string;
+}
+
+export interface CommentReply {
+  id: string;
+  author: CommentAuthor;
+  body: string;
+  createdAt: string;
+}
+
+export interface ProjectComment {
+  id: string;
+  anchor: CommentAnchor;
+  author: CommentAuthor;
+  body: string;
+  createdAt: string;
+  resolved: boolean;
+  replies: CommentReply[];
+}
+
 export interface RecentProjectEntry {
   path: string;
   name: string;
diff --git a/tests/collab-protocol.test.ts b/tests/collab-protocol.test.ts
index 56bb782a3..13afe4fb7 100644
--- a/tests/collab-protocol.test.ts
+++ b/tests/collab-protocol.test.ts
@@ -146,8 +146,8 @@ describe("createSession", () => {
     });
   });
 
-  it("throws when collaboration is not configured", async () => {
-    await assert.rejects(() => createSession("co-edit", null, ok({})), /not configured/);
+  it("rejects when collaboration baseUrl is null", async () => {
+    await assert.rejects(() => createSession("co-edit", null), /Collaboration is not configured/);
   });
 
   it("throws on an unexpected response shape", async () => {
@@ -263,4 +263,78 @@ describe("CollabConnection", () => {
     second.holder.socket!.emit("close");
     assert.ok(second.events.includes("close:false"));
   });
+
+  it("receives and parses comment-mutation messages", () => {
+    const { conn, holder, received } = setup();
+    conn.connect();
+    holder.socket!.readyState = FakeWebSocket.OPEN;
+
+    const mutationMsg: ServerMessage = {
+      type: "comment-mutation",
+      action: {
+        type: "add",
+        comment: {
+          id: "comm-123",
+          anchor: { type: "point", lngLat: [10, 20] },
+          author: { name: "Tester", color: "#ff0000" },
+          body: "Hello Test Comment",
+          createdAt: "2026-08-01T00:00:00.000Z",
+          resolved: false,
+          replies: [],
+        },
+      },
+    };
+
+    holder.socket!.emit("message", { data: JSON.stringify(mutationMsg) });
+    assert.equal(received.length, 1);
+    assert.equal(received[0]?.type, "comment-mutation");
+    if (received[0]?.type === "comment-mutation") {
+      assert.equal(received[0].action.type, "add");
+      assert.equal(received[0].action.comment.id, "comm-123");
+    }
+    conn.close();
+  });
+
+  it("sends comment-mutation client messages correctly", () => {
+    const { conn, holder } = setup();
+    conn.connect();
+    holder.socket!.readyState = FakeWebSocket.OPEN;
+
+    const sendMsg: ClientMessage = {
+      type: "comment-mutation",
+      action: {
+        type: "toggle-resolve",
+        commentId: "comm-456",
+        resolved: true,
+      },
+    };
+
+    conn.send(sendMsg);
+    assert.equal(holder.socket!.sent.length, 1);
+    const parsed = JSON.parse(holder.socket!.sent[0] ?? "null") as ClientMessage;
+    assert.equal(parsed.type, "comment-mutation");
+    if (parsed.type === "comment-mutation") {
+      assert.equal(parsed.action.type, "toggle-resolve");
+      assert.equal(parsed.action.commentId, "comm-456");
+    }
+    conn.close();
+  });
+
+  it("handles malformed comment-mutation actions safely", () => {
+    const { conn, holder } = setup();
+    conn.connect();
+    holder.socket!.readyState = FakeWebSocket.OPEN;
+
+    const malformedMsg = {
+      type: "comment-mutation",
+      action: {
+        type: "add",
+        comment: "not-an-object",
+      },
+    };
+
+    conn.send(malformedMsg as unknown as ClientMessage);
+    assert.equal(holder.socket!.sent.length, 1);
+    conn.close();
+  });
 });
diff --git a/tests/comments.test.ts b/tests/comments.test.ts
new file mode 100644
index 000000000..671c95dc2
--- /dev/null
+++ b/tests/comments.test.ts
@@ -0,0 +1,149 @@
+import { describe, it, afterEach } from "node:test";
+import assert from "node:assert/strict";
+import {
+  createEmptyProject,
+  parseProject,
+  serializeProject,
+  applyProjectToStore,
+  normalizeProjectComments,
+  useAppStore,
+  type ProjectComment,
+} from "@geolibre/core";
+
+describe("Anchored, Persistent Comments (#1518)", () => {
+  it("initializes empty project with comments array", () => {
+    const project = createEmptyProject("Test Project");
+    assert.deepEqual(project.comments, []);
+  });
+
+  it("normalizes and validates comment structures", () => {
+    const rawComments = [
+      {
+        id: "c1",
+        anchor: { type: "point", lngLat: [-122.4194, 37.7749] },
+        author: { name: "Alice", color: "#ef4444" },
+        body: "San Francisco comment",
+        createdAt: "2026-08-01T12:00:00.000Z",
+        resolved: false,
+        replies: [
+          {
+            id: "r1",
+            author: { name: "Bob", color: "#3b82f6" },
+            body: "I agree",
+            createdAt: "2026-08-01T12:05:00.000Z",
+          },
+        ],
+      },
+      {
+        id: "c2",
+        anchor: { type: "feature", layerId: "layer-1", featureId: "feat-99" },
+        author: { name: "Charlie", color: "#10b981" },
+        body: "Polygon check",
+        createdAt: "2026-08-01T12:10:00.000Z",
+        resolved: true,
+        replies: [],
+      },
+      // Malformed entries should be filtered out safely
+      null,
+      { id: "invalid-no-anchor" },
+      { id: "invalid-bad-anchor", anchor: { type: "unknown" } },
+    ];
+
+    const normalized = normalizeProjectComments(rawComments);
+    assert.equal(normalized.length, 2);
+    assert.equal(normalized[0].id, "c1");
+    assert.equal(normalized[0].anchor.type, "point");
+    assert.equal(normalized[0].replies.length, 1);
+    assert.equal(normalized[1].id, "c2");
+    assert.equal(normalized[1].anchor.type, "feature");
+    assert.equal(normalized[1].resolved, true);
+  });
+
+  it("round-trips comments through serialization and applyProjectToStore", () => {
+    const sampleComment: ProjectComment = {
+      id: "comm-1",
+      anchor: { type: "point", lngLat: [10.0, 20.0] },
+      author: { name: "Tester", color: "#8b5cf6" },
+      body: "Test comment body",
+      createdAt: new Date().toISOString(),
+      resolved: false,
+      replies: [],
+    };
+
+    const project = createEmptyProject("Roundtrip Project");
+    project.comments = [sampleComment];
+
+    // serialize → parseProject (validates structure) → applyProjectToStore
+    const jsonStr = serializeProject(project);
+    const parsed = parseProject(jsonStr);
+
+    assert.equal(Array.isArray(parsed.comments), true);
+    assert.equal(parsed.comments!.length, 1);
+
+    const applied = applyProjectToStore(parsed);
+    assert.equal(applied.comments.length, 1);
+    assert.equal(applied.comments[0].id, "comm-1");
+    assert.equal(applied.comments[0].body, "Test comment body");
+    assert.equal(applied.comments[0].anchor.type, "point");
+    assert.equal(applied.comments[0].resolved, false);
+  });
+
+  it("supports store comment actions", () => {
+    useAppStore.getState().newProject({ name: "Store Test" });
+    assert.deepEqual(useAppStore.getState().comments, []);
+
+    const newComment: ProjectComment = {
+      id: "action-1",
+      anchor: { type: "point", lngLat: [0, 0] },
+      author: { name: "Store Author", color: "#3b82f6" },
+      body: "Initial comment",
+      createdAt: new Date().toISOString(),
+      resolved: false,
+      replies: [],
+    };
+
+    // Add comment
+    useAppStore.getState().addComment(newComment);
+    assert.equal(useAppStore.getState().comments.length, 1);
+
+    // Reply to comment
+    useAppStore.getState().replyToComment("action-1", {
+      id: "rep-1",
+      author: { name: "Replier", color: "#10b981" },
+      body: "Replied!",
+      createdAt: new Date().toISOString(),
+    });
+    assert.equal(useAppStore.getState().comments[0].replies.length, 1);
+
+    // Resolve comment
+    useAppStore.getState().toggleResolveComment("action-1", true);
+    assert.equal(useAppStore.getState().comments[0].resolved, true);
+
+    // Delete comment
+    useAppStore.getState().deleteComment("action-1");
+    assert.equal(useAppStore.getState().comments.length, 0);
+  });
+
+  it("deduplicates addComment calls with the same id (relay echo guard)", () => {
+    useAppStore.getState().newProject({ name: "Dedup Test" });
+
+    const comment: ProjectComment = {
+      id: "dedup-1",
+      anchor: { type: "point", lngLat: [5, 10] },
+      author: { name: "Echo", color: "#3b82f6" },
+      body: "Only once",
+      createdAt: new Date().toISOString(),
+      resolved: false,
+      replies: [],
+    };
+
+    useAppStore.getState().addComment(comment);
+    useAppStore.getState().addComment(comment); // simulated relay echo
+    assert.equal(useAppStore.getState().comments.length, 1);
+  });
+
+  afterEach(() => {
+    // Reset the singleton store so tests don't share state.
+    useAppStore.getState().newProject({ name: "reset" });
+  });
+});
diff --git a/workers/collab/src/protocol.ts b/workers/collab/src/protocol.ts
index 86a126699..f024bf5b6 100644
--- a/workers/collab/src/protocol.ts
+++ b/workers/collab/src/protocol.ts
@@ -93,13 +93,25 @@ export interface ChatSendMessage {
   coordinate?: CollabCursor | null;
 }
 
+export type CommentMutationAction =
+  | { type: "add"; comment: unknown }
+  | { type: "reply"; commentId: string; reply: unknown }
+  | { type: "toggle-resolve"; commentId: string; resolved?: boolean }
+  | { type: "delete"; commentId: string };
+
+export interface CommentMutationMessage {
+  type: "comment-mutation";
+  action: CommentMutationAction;
+}
+
 export type ClientMessage =
   | JoinMessage
   | ClientSnapshotMessage
   | ClientPresenceMessage
   | SetModeMessage
   | SetParticipantModeMessage
-  | ChatSendMessage;
+  | ChatSendMessage
+  | CommentMutationMessage;
 
 // Server -> client -----------------------------------------------------------
 
@@ -167,4 +179,5 @@ export type ServerMessage =
   | ParticipantsMessage
   | ModeMessage
   | ChatBroadcastMessage
+  | CommentMutationMessage
   | ErrorMessage;
diff --git a/workers/collab/src/session.ts b/workers/collab/src/session.ts
index 3a577b5ba..b32b1fbdd 100644
--- a/workers/collab/src/session.ts
+++ b/workers/collab/src/session.ts
@@ -279,6 +279,9 @@ export class CollabSession extends DurableObject<Env> {
       case "chat":
         await this.handleChat(ws, attachment, message);
         break;
+      case "comment-mutation":
+        await this.handleCommentMutation(ws, attachment, message);
+        break;
     }
   }
 
@@ -652,4 +655,69 @@ export class CollabSession extends DurableObject<Env> {
       }
     }
   }
+
+  private async handleCommentMutation(
+    ws: WebSocket,
+    attachment: SocketAttachment,
+    message: Extract<ClientMessage, { type: "comment-mutation" }>,
+  ): Promise<void> {
+    const mode = (await this.ctx.storage.get<CollaborationMode>("mode")) ?? "co-edit";
+    if (!canEdit(attachment, mode)) {
+      this.send(ws, {
+        type: "error",
+        code: "forbidden",
+        message: "You are in view-only mode and cannot comment.",
+      });
+      return;
+    }
+
+    const rawSnapshot = await this.ctx.storage.get<string>("snapshot");
+    if (rawSnapshot) {
+      try {
+        const parsed = JSON.parse(rawSnapshot) as Record<string, unknown>;
+        const comments = Array.isArray(parsed.comments)
+          ? (parsed.comments as Record<string, unknown>[])
+          : [];
+        const action = message.action;
+        if (!action || typeof action !== "object") return;
+        let updatedComments = comments;
+
+        if (action.type === "add") {
+          if (!action.comment || typeof action.comment !== "object") return;
+          updatedComments = [...comments, action.comment as Record<string, unknown>];
+        } else if (action.type === "reply") {
+          if (!action.reply || typeof action.reply !== "object") return;
+          const replyObj = action.reply as Record<string, unknown>;
+          updatedComments = comments.map((c) => {
+            if (!c || typeof c !== "object" || c.id !== action.commentId) return c;
+            const existingReplies = Array.isArray(c.replies)
+              ? (c.replies as Record<string, unknown>[])
+              : [];
+            if (existingReplies.some((r) => r && typeof r === "object" && r.id === replyObj.id))
+              return c;
+            return { ...c, replies: [...existingReplies, replyObj] };
+          });
+        } else if (action.type === "toggle-resolve") {
+          updatedComments = comments.map((c) =>
+            c && typeof c === "object" && c.id === action.commentId
+              ? { ...c, resolved: action.resolved !== undefined ? action.resolved : !c.resolved }
+              : c,
+          );
+        } else if (action.type === "delete") {
+          updatedComments = comments.filter(
+            (c) => c && typeof c === "object" && c.id !== action.commentId,
+          );
+        }
+
+        parsed.comments = updatedComments;
+        await this.ctx.storage.put("snapshot", JSON.stringify(parsed));
+      } catch {
+        // Ignore snapshot mutation update errors defensively
+      }
+    }
+
+    // Exclude the sender (ws) so they don't receive their own mutation back.
+    // The sender already applied the change locally before calling sendCommentMutation.
+    this.broadcast(message, ws);
+  }
 }