@alpaca-editor/core 1.0.4104 → 1.0.4106

package/src/editor/control-center/IndexOverview.tsx

@@ -1,14 +1,16 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   RefreshCw,
+  ExternalLink,
   Database,
   Clock,
   CheckCircle,
   AlertCircle,
   Trash2,
 } from "lucide-react";
-
+import { Button } from "../../components/ui/button";
 import { classNames } from "primereact/utils";
+import { formatDateOnly, formatDateTime } from "../utils";
 import {
   IndexStatus,
   StagingStatus,
@@ -25,6 +27,8 @@ import {
   startDirectGeneration,
 } from "../services/indexService";
 
+import { useEditContext } from "../client/editContext";
+
 export function IndexOverview() {
   const [indexStatus, setIndexStatus] = useState<IndexStatus | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -190,6 +194,54 @@ export function IndexOverview() {
     }
   };
 
+  const editContext = useEditContext();
+  const goToSettings = useCallback(() => {
+    // Ensure URL reflects the target view and panel before switching views
+    editContext?.updateUrl({ view: "control-center", ccpanel: "setup" });
+    editContext?.switchView("control-center");
+  }, [editContext]);
+
+
+  const getIndexStatusInfo = (
+    isCollecting: boolean,
+    isSubmitting: boolean,
+    indexStatus: IndexStatus | null,
+    importStatus: ImportStatus | null,
+    centroidsStatus: CentroidsStatus | null,
+  ) => {
+    const batches = indexStatus?.batches || [];
+    const inProgress = batches.some((b) => {
+      const s = (b.status || "").toLowerCase();
+      return (
+        s === "submitted" || s === "processing" || s === "queued"
+      );
+    });
+
+    if (isCollecting) {
+      return { statusLabel: "Collecting items", statusClass: "text-indigo-600", hasSettingsIssue: false};
+    } else if (isSubmitting || inProgress) {
+      return { statusLabel: "Generating Embeddings", statusClass: "text-blue-600", hasSettingsIssue: false };
+    }  else if (importStatus?.isImporting) {
+      return { 
+        statusLabel: importStatus.status || "Importing embeddings", 
+        statusClass: "text-purple-600",
+        hasSettingsIssue: false
+      };
+    } else if (centroidsStatus?.isPopulating) {
+      return { 
+        statusLabel: centroidsStatus.status || "Populating centroids", 
+        statusClass: "text-pink-600",
+        hasSettingsIssue: false
+      };
+    } else if (indexStatus?.rebuilding) {
+      return { statusLabel: "Rebuilding", statusClass: "text-orange-600", hasSettingsIssue: false };
+    } else if (indexStatus?.messages != null && indexStatus.messages.length > 0 && indexStatus.messages[0]?.message){
+      return { statusLabel: indexStatus.messages[0].message, statusClass: "text-red-600", hasSettingsIssue: true };
+    }else {
+      return { statusLabel: "Ready", statusClass: "text-green-600", hasSettingsIssue: false };
+    }
+  };
+
   return (
     <div className="flex h-full items-stretch">
       <div className="flex min-w-96 flex-col gap-4 p-4">
@@ -375,41 +427,24 @@ export function IndexOverview() {
               <div className="rounded bg-gray-50 p-3">
                 <div className="text-sm text-gray-600">Status</div>
                 {(() => {
-                  const batches = indexStatus?.batches || [];
-                  const inProgress = batches.some((b) => {
-                    const s = (b.status || "").toLowerCase();
-                    return (
-                      s === "submitted" || s === "processing" || s === "queued"
-                    );
-                  });
-                  const statusLabel = isCollecting
-                    ? "Collecting items"
-                    : isSubmitting || inProgress
-                      ? "Generating Embeddings"
-                      : importStatus?.isImporting
-                        ? importStatus.status || "Importing embeddings"
-                        : centroidsStatus?.isPopulating
-                          ? centroidsStatus.status || "Populating centroids"
-                          : indexStatus.rebuilding
-                            ? "Rebuilding"
-                            : "Ready";
-                  const statusClass =
-                    statusLabel === "Rebuilding"
-                      ? "text-orange-600"
-                      : statusLabel === "Generating Embeddings"
-                        ? "text-blue-600"
-                        : statusLabel === "Collecting items"
-                          ? "text-indigo-600"
-                          : importStatus?.isImporting
-                            ? "text-purple-600"
-                            : centroidsStatus?.isPopulating
-                              ? "text-pink-600"
-                              : "text-green-600";
+                  const { statusLabel, statusClass, hasSettingsIssue } = getIndexStatusInfo(
+                    isCollecting,
+                    isSubmitting,
+                    indexStatus,
+                    importStatus,
+                    centroidsStatus,
+                  );
                   return (
                     <div
-                      className={classNames("text-sm font-medium", statusClass)}
+                      className={classNames("text-sm font-medium flex items-center gap-2", statusClass)}
                     >
                       {statusLabel}
+                      {hasSettingsIssue && (
+                        <Button size="sm" variant="outline" onClick={goToSettings}>
+                          <ExternalLink className="h-4 w-4" strokeWidth={1} />
+                          Settings
+                        </Button>
+                      )}
                     </div>
                   );
                 })()}
@@ -527,7 +562,7 @@ export function IndexOverview() {
                           </div>
                           <div className="text-xs text-gray-500">
                             {batch.created
-                              ? new Date(batch.created).toLocaleDateString()
+                              ? formatDateOnly(new Date(batch.created))
                               : "Unknown"}
                           </div>
                         </div>
@@ -584,7 +619,7 @@ export function IndexOverview() {
                           )}
                         </div>
                         <div className="ml-2 shrink-0 text-xs text-gray-500">
-                          {new Date(it.created).toLocaleString()}
+                          {formatDateTime(new Date(it.created))}
                         </div>
                       </div>
                     ))}

package/src/editor/control-center/LatestFeedback.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { Comment, SuggestedEdit } from "../../types";
+import { getLatestComments } from "../services/reviewsService";
+import { getLatestSuggestedEdits } from "../services/suggestedEditsService";
+import { Lightbulb, MessageSquare } from "lucide-react";
+
+type FeedbackItem =
+  | (Comment & { kind: "comment" })
+  | (SuggestedEdit & { kind: "suggestion" });
+
+export function LatestFeedback() {
+  const editContext = useEditContext();
+  const [items, setItems] = useState<FeedbackItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Cutoff is now computed server-side. Keep memo in case we later want client hints.
+  const sinceIso = useMemo(() => null, []);
+
+  const load = useCallback(async () => {
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const take = 50;
+      const [cRes, sRes] = await Promise.all([
+        getLatestComments(take),
+        getLatestSuggestedEdits(take),
+      ]);
+
+      const comments = ((cRes.data || []) as Comment[]).map((c) => ({
+        ...(c as Comment),
+        kind: "comment" as const,
+      }));
+      const suggestions = ((sRes.data || []) as SuggestedEdit[]).map((s) => ({
+        ...(s as SuggestedEdit),
+        kind: "suggestion" as const,
+      }));
+
+      const merged = [...comments, ...suggestions].sort((a, b) => {
+        const ad = new Date((a as any).created || 0).getTime();
+        const bd = new Date((b as any).created || 0).getTime();
+        return bd - ad;
+      });
+
+      const latest = merged.slice(0, 50);
+      if (!cancelled) setItems(latest);
+    } catch (e: any) {
+      if (!cancelled) setError(e?.message || "Failed to load latest items");
+    } finally {
+      if (!cancelled) setIsLoading(false);
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [sinceIso]);
+
+  useEffect(() => {
+    let disposed: any;
+    (async () => {
+      disposed = await load();
+    })();
+    load();
+    return () => {
+      try {
+        disposed?.();
+      } catch {}
+    };
+  }, [load]);
+
+  useEffect(() => {
+    const typesToRefresh = new Set([
+      "comment-updated",
+      "comment-deleted",
+      "suggested-edit-updated",
+      "suggested-edit-deleted",
+    ]);
+    const dispose = editContext?.addSocketMessageListener?.((message: any) => {
+      try {
+        if (typesToRefresh.has(message?.type)) {
+          void load();
+        }
+      } catch {}
+    });
+    return () => {
+      try {
+        dispose?.();
+      } catch {}
+    };
+  }, [editContext?.addSocketMessageListener, load]);
+
+  const onOpenItem = async (item: FeedbackItem) => {
+    try {
+      const mainId =
+        item.kind === "comment" ? item.mainItemId : item.mainItemId;
+      const lang =
+        item.kind === "comment" ? item.language : item.mainItemLanguage;
+      const ver = item.kind === "comment" ? item.version : item.mainItemVersion;
+      await editContext?.loadItem({ id: mainId, language: lang, version: ver });
+      editContext?.setSelectedComment(
+        item.kind === "comment" ? (item as Comment) : undefined,
+      );
+      if (item.kind === "comment") {
+        editContext?.setScrollIntoView((item as Comment).itemId);
+      }
+      editContext?.switchView("comments");
+    } catch {}
+  };
+
+  const Row = ({ item }: { item: FeedbackItem }) => {
+    const isComment = item.kind === "comment";
+    const created = (item as any).created
+      ? new Date((item as any).created)
+      : undefined;
+    const dateText = created
+      ? `${created.toLocaleDateString()} ${created.toLocaleTimeString()}`
+      : "";
+    const comment = isComment ? (item as Comment) : undefined;
+    const pageName = isComment
+      ? comment?.mainItemName ||
+        (comment?.relatedItems || []).find(
+          (ri) => ri.itemId === comment?.mainItemId,
+        )?.itemName
+      : (item as SuggestedEdit).mainItemName;
+    const componentName = isComment
+      ? comment?.itemName
+      : (item as SuggestedEdit).itemName;
+    const fieldName = isComment ? comment?.fieldName : undefined;
+    const user = (item as any).authorDisplayName || (item as any).author || "";
+    const label = isComment ? "Comment" : "Suggestion";
+
+    return (
+      <button
+        className="w-full cursor-pointer rounded p-1 text-left hover:bg-gray-100"
+        onClick={() => onOpenItem(item)}
+      >
+        <div className="flex items-center justify-between gap-2 text-xs">
+          <div className="flex items-center gap-2 truncate">
+            <span
+              className="inline-flex items-center justify-center rounded py-0.5 text-gray-700"
+              aria-label={label}
+              title={label}
+            >
+              {isComment ? (
+                <MessageSquare className="h-3.5 w-3.5" strokeWidth={1} />
+              ) : (
+                <Lightbulb className="h-3.5 w-3.5" strokeWidth={1} />
+              )}
+            </span>
+            <div className="flex items-center">
+              {[
+                pageName,
+                componentName,
+                fieldName ||
+                  (item.kind === "suggestion" ? item.fieldId : undefined),
+              ]
+                .filter((x): x is string => !!x && x.length > 0)
+                .map((seg, idx, arr) => (
+                  <span key={idx} className="truncate">
+                    {idx > 0 && (
+                      <span className="mx-1 text-gray-400">&gt;</span>
+                    )}
+                    <span
+                      className={
+                        idx === 0
+                          ? "font-medium text-gray-900"
+                          : "text-gray-500"
+                      }
+                    >
+                      {seg}
+                    </span>
+                  </span>
+                ))}
+            </div>
+            {user && <span className="text-gray-500"> · {user}</span>}
+          </div>
+          <div className="shrink-0 text-[10px] text-gray-500">{dateText}</div>
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <div className="h-full overflow-auto p-2">
+      {isLoading && <div className="p-2 text-xs text-gray-500">Loading…</div>}
+      {error && <div className="p-2 text-xs text-red-600">{error}</div>}
+      {!isLoading && !error && items.length === 0 && (
+        <div className="p-2 text-xs text-gray-500">No recent activity</div>
+      )}
+      <div className="divide-y">
+        {items.map((it) => (
+          <Row key={`${it.kind}-${(it as any).id}`} item={it} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/editor/control-center/WebSocketMessages.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "react";
+import { formatTime } from "../utils";
 import { useEditContext } from "../client/editContext";
 
 export function WebSocketMessages() {
@@ -34,11 +35,8 @@ export function WebSocketMessages() {
 
   const formatTimestamp = (isoString: string) => {
     const date = new Date(isoString);
-    return (
-      date.toLocaleTimeString() +
-      "." +
-      date.getMilliseconds().toString().padStart(3, "0")
-    );
+    const base = formatTime(date);
+    return base + "." + date.getMilliseconds().toString().padStart(3, "0");
   };
 
   const getMessageTypeColor = (type: string) => {

package/src/editor/field-types/richtext/contextMenuFactory.tsx

@@ -3,6 +3,7 @@ import { Field } from "../../pageModel";
 import { EditContextType } from "../../client/editContext";
 import { getRichTextProfile } from "../../services/contentService";
 import { getCachedParsedProfile } from "./utils/profileServiceCache";
+import { getComponentById } from "../../componentTreeHelper";
 import {
   RichTextEditorProfile,
   SLATE_MARKS,
@@ -82,6 +83,19 @@ export async function createRichTextContextMenu(
   const richTextField = field as RichTextField;
   const profilePath = richTextField.customProperties?.profile;
 
+  // Hide formatting when layout components are disabled and this field belongs to a layout component
+  try {
+    if (editContext?.showLayoutComponents === false && editContext?.page) {
+      const owner = getComponentById(
+        field.descriptor.item.id,
+        editContext.page,
+      );
+      if (owner?.layoutId) {
+        return [];
+      }
+    }
+  } catch {}
+
   // Get the iframe document
   const iframeDocument =
     editContext.pageView?.editorIframe?.contentWindow?.document;

package/src/editor/media-selector/MediaFolderBrowser.tsx

@@ -195,7 +195,7 @@ export function MediaFolderBrowser({
             />
           </div>
           <div className="min-w-0 flex-1">
-            <div className="truncate text-sm font-medium text-gray-900">
+            <div className="text-dark truncate text-xs font-medium">
               {t.name}
             </div>
             <div className="mt-1 text-xs text-gray-500">Media File</div>
@@ -305,7 +305,7 @@ export function MediaFolderBrowser({
       {/* Selected Item Info */}
       {selectedImage && (
         <div className="border-t bg-gray-50 p-3">
-          <div className="truncate text-sm font-medium text-gray-900">
+          <div className="text-dark truncate text-xs font-medium">
             Selected: {selectedImage.name}
           </div>
           <div className="mt-1 text-xs text-gray-500">

package/src/editor/menubar/ActiveUsers.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 import { getItemVisitors, ItemVisitor } from "../services/editService";
 import { VerticalDotsIcon } from "../ui/Icons";
 import { AboutDialog } from "../client/AboutDialog";
+import { formatDateOnly } from "../utils";
 
 type UserListItem = {
   type: "active" | "visitor";
@@ -258,7 +259,7 @@ export function ActiveUsers() {
                 />
               </div>
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-gray-900">About</div>
+                <div className="text-dark text-xs font-medium">About</div>
               </div>
             </div>
             <div
@@ -272,7 +273,7 @@ export function ActiveUsers() {
                 />
               </div>
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-gray-900">Log Out</div>
+                <div className="text-dark text-xs font-medium">Log Out</div>
               </div>
             </div>
           </div>
@@ -296,5 +297,5 @@ function formatTimeAgo(date: Date): string {
   if (diffInSeconds < 604800)
     return `${Math.floor(diffInSeconds / 86400)}d ago`;
 
-  return date.toLocaleDateString();
+  return formatDateOnly(date);
 }

package/src/editor/menubar/toolbar-sections/EditControls.tsx

@@ -18,12 +18,11 @@ export function EditControls({
   if (!editContext) return null;
 
   // Calculate total count of comments and suggestions
-  const commentsCount =
-    editContext.comments?.filter((x) => !x.isResolved).length || 0;
+
   const suggestionsCount =
     editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
     0;
-  const totalCount = commentsCount + suggestionsCount;
+  const totalCount = suggestionsCount;
 
   return (
     <>

package/src/editor/menubar/toolbar-sections/ViewportControls.tsx

@@ -1,7 +1,7 @@
 import { CompareIcon } from "../../ui/Icons";
 import { useEditContext } from "../../client/editContext";
 import { SimpleIconButton } from "../../ui/SimpleIconButton";
-import { Monitor, Smartphone, Table } from "lucide-react";
+import { Monitor, Smartphone, Table, MessageSquareMore } from "lucide-react";
 import { Separator } from "../Separator";
 
 export function ViewportControls() {
@@ -12,6 +12,8 @@ export function ViewportControls() {
   const pageViewContext = editContext.pageView;
   const device = pageViewContext.device;
   const setDevice = pageViewContext.setDevice;
+  const commentsCount =
+    editContext.comments?.filter((x) => !x.isResolved).length || 0;
 
   return (
     <>
@@ -56,6 +58,22 @@ export function ViewportControls() {
           onClick={() => editContext.setCompareMode(!editContext.compareMode)}
         />
       )}
+      <Separator size="large" />{" "}
+      <SimpleIconButton
+        className="relative"
+        selected={!!editContext.showComments}
+        icon={<MessageSquareMore className="h-6 w-6 p-1" strokeWidth={1} />}
+        label={editContext.showComments ? "Hide comments" : "Show comments"}
+        size="large"
+        data-testid="toggle-comments-button"
+        onClick={() => editContext.setShowComments(!editContext.showComments)}
+      >
+        {commentsCount > 0 && (
+          <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
+            {commentsCount > 99 ? "99+" : commentsCount}
+          </div>
+        )}
+      </SimpleIconButton>
     </>
   );
 }

package/src/editor/reviews/Comment.tsx

@@ -136,7 +136,20 @@ export function Comment({
       className={`mb-3 cursor-pointer rounded-lg border-2 bg-white p-3 shadow-sm hover:bg-gray-50 ${
         isSelected ? "border-blue-500" : "border-transparent"
       }`}
-      onClick={() => {
+      onClick={async () => {
+        const currentPageId = editContext?.currentItemDescriptor?.id;
+        if (
+          currentPageId &&
+          comment.mainItemId &&
+          comment.mainItemId !== currentPageId
+        ) {
+          await editContext?.loadItem({
+            id: comment.mainItemId,
+            language: comment.language,
+            version: comment.version,
+          });
+        }
+
         editContext?.setSelectedComment(comment);
         editContext?.setScrollIntoView(comment.itemId);
         editContext?.select([comment.itemId]);
@@ -161,6 +174,8 @@ export function Comment({
         canDelete={canDelete}
         canResolve={canResolve}
         availableTags={availableTags}
+        basePageName={editContext?.currentItemDescriptor?.name}
+        basePageId={editContext?.currentItemDescriptor?.id}
         onEdit={() => setIsEditing(true)}
         onDelete={handleDelete}
         onResolve={handleResolve}

package/src/editor/reviews/CommentView.tsx

@@ -16,6 +16,11 @@ export interface CommentViewProps {
   canDelete: boolean;
   canResolve: boolean;
   availableTags?: { label: string; color: string }[];
+  // The id of the page currently open in the editor. Used to decide when to
+  // show the page name for comments belonging to a different page (child page).
+  basePageId?: string;
+  // The name of the page to display in the breadcrumb
+  basePageName?: string;
   onEdit?: () => void;
   onDelete?: () => void;
   onResolve?: () => void;
@@ -31,6 +36,8 @@ export function CommentView({
   canDelete,
   canResolve,
   availableTags = [],
+  basePageId,
+  basePageName,
   onEdit,
   onDelete,
   onResolve,
@@ -73,36 +80,29 @@ export function CommentView({
   };
 
   const renderContextInfo = () => {
-    const showItemName =
-      comment.itemId && comment.mainItemId !== comment.itemId;
-    const showFieldName = comment.fieldId;
+    const pageName = basePageName;
+    const isComponentDifferent =
+      !!comment.itemId && comment.mainItemId !== comment.itemId;
+    const componentName = isComponentDifferent ? comment.itemName : undefined;
+    const fieldName = comment.fieldName;
 
-    if (!showItemName && !showFieldName) return null;
+    const segments = [pageName, componentName, fieldName].filter(
+      (x): x is string => !!x && x.length > 0,
+    );
+
+    if (segments.length === 0) return null;
 
     return (
       <div
         className={`${compact ? "mt-2" : "mt-3"} flex items-center border-t pt-${compact ? "2" : "3"} text-xs`}
         data-testid="comment-context-info"
       >
-        {showItemName && (
-          <div
-            className="text-2xs text-gray-500"
-            data-testid="comment-item-name"
-          >
-            {comment.itemName}
-          </div>
-        )}
-        {showFieldName && showItemName && (
-          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
-        )}
-        {showFieldName && (
-          <div
-            className="text-2xs text-gray-500"
-            data-testid="comment-field-name"
-          >
-            {comment.fieldName}
-          </div>
-        )}
+        {segments.map((seg, idx) => (
+          <React.Fragment key={idx}>
+            {idx > 0 && <div className="text-2xs mx-2 text-gray-500">&gt;</div>}
+            <div className="text-2xs text-gray-500">{seg}</div>
+          </React.Fragment>
+        ))}
       </div>
     );
   };
@@ -115,7 +115,7 @@ export function CommentView({
       >
         <div>
           <div
-            className={`${compact ? "text-xs" : "text-sm"} font-bold text-gray-900`}
+            className={`text-dark text-xs font-medium`}
             title={comment.author}
           >
             {comment.authorDisplayName}