@alpaca-editor/core 1.0.4104 → 1.0.4106

package/src/editor/reviews/Comments.tsx

@@ -11,14 +11,16 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "../../components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
 import {
   FileDiff,
-  SquarePen,
   CheckCircle,
   CheckCircle2,
-  MessageSquareMore,
   Plus,
-  GitBranch,
   Tags,
   Lightbulb,
 } from "lucide-react";
@@ -42,67 +44,70 @@ export function Comments() {
       return [];
     }
   });
-  const [scope, setScope] = useState<"all" | "itemOnly">(() => {
-    try {
-      const raw =
-        typeof window !== "undefined"
-          ? localStorage.getItem("editor.comments.scope")
-          : null;
-      return raw === "itemOnly" ? "itemOnly" : "all";
-    } catch {
-      return "all";
-    }
-  });
   const availableTags = editContext?.availableCommentTags || [];
 
   useEffect(() => {
-    // Retrieve your list of comments (and ensure there's an array of suggested edits,
-    // for instance from your editContext)
-    const comments: CommentType[] = editContext?.comments || [];
-    const suggestedEdits: SuggestedEdit[] = editContext?.suggestedEdits || [];
+    let cancelled = false;
+
+    const load = async () => {
+      // Base lists from context
+      const mainComments: CommentType[] = editContext?.comments || [];
+      const suggestedEdits: SuggestedEdit[] = editContext?.suggestedEdits || [];
+
+      // Filter out applied suggestions if hideAppliedSuggestions is true
+      const filteredSuggestedEdits = hideAppliedSuggestions
+        ? suggestedEdits.filter((edit) => edit.status !== "applied")
+        : suggestedEdits;
 
-    // Filter out applied suggestions if hideAppliedSuggestions is true
-    const filteredSuggestedEdits = hideAppliedSuggestions
-      ? suggestedEdits.filter((edit) => edit.status !== "applied")
-      : suggestedEdits;
+      // Start with main page comments and suggestions
+      let allComments: CommentType[] = [...mainComments];
 
-    // Start with combined list
-    const combined: FeedbackItem[] = [...comments, ...filteredSuggestedEdits];
+      // Base page context
+      const basePageId = editContext?.currentItemDescriptor?.id;
 
-    // Apply scope filter (item-only vs item + children)
-    const baseItemId =
-      (editContext?.selection && editContext.selection[0]) ||
-      editContext?.currentItemDescriptor?.id ||
-      undefined;
+      // Combine with suggestions
+      let combined: FeedbackItem[] = [
+        ...allComments,
+        ...filteredSuggestedEdits,
+      ];
 
-    const scoped =
-      scope === "itemOnly" && baseItemId
-        ? combined.filter((item: any) => item.itemId === baseItemId)
+      // Only keep items whose mainItemId is the current page
+      if (basePageId) {
+        combined = combined.filter(
+          (item: any) => item.mainItemId === basePageId,
+        );
+      }
+
+      // Apply tag filter to comments only (suggested edits do not have tags)
+      const tagFiltered = selectedTagsFilter.length
+        ? combined.filter((item: any) => {
+            // Keep suggested edits
+            if ("oldValue" in item && "newValue" in item) return true;
+            const tags = (item.tags || "")
+              .split(",")
+              .map((t: string) => t.trim())
+              .filter(Boolean);
+            // OR logic: include if any selected tag matches
+            return selectedTagsFilter.some((t) => tags.includes(t));
+          })
         : combined;
 
-    // Apply tag filter to comments only (suggested edits do not have tags)
-    const tagFiltered = selectedTagsFilter.length
-      ? scoped.filter((item: any) => {
-          // Keep suggested edits
-          if ("oldValue" in item && "newValue" in item) return true;
-          const tags = (item.tags || "")
-            .split(",")
-            .map((t: string) => t.trim())
-            .filter(Boolean);
-          // OR logic: include if any selected tag matches
-          return selectedTagsFilter.some((t) => tags.includes(t));
-        })
-      : scoped;
+      // Sort by creation date
+      tagFiltered.sort(
+        (a, b) =>
+          new Date(b.created || "").getTime() -
+          new Date(a.created || "").getTime(),
+      );
+
+      if (!cancelled) setFeedbackItems(tagFiltered);
+    };
 
-    // Sort by creation date. Adjust the comparison as needed if the date properties differ.
-    tagFiltered.sort(
-      (a, b) =>
-        new Date(b.created || "").getTime() -
-        new Date(a.created || "").getTime(),
-    );
+    load();
 
-    setFeedbackItems(tagFiltered);
-  }, [editContext, hideAppliedSuggestions, scope, selectedTagsFilter]);
+    return () => {
+      cancelled = true;
+    };
+  }, [editContext, hideAppliedSuggestions, selectedTagsFilter]);
 
   useEffect(() => {
     try {
@@ -114,13 +119,6 @@ export function Comments() {
     } catch {}
   }, [selectedTagsFilter]);
 
-  useEffect(() => {
-    try {
-      if (typeof window !== "undefined")
-        localStorage.setItem("editor.comments.scope", scope);
-    } catch {}
-  }, [scope]);
-
   // Tags are provided once via editContext.availableCommentTags
 
   return (
@@ -158,17 +156,6 @@ export function Comments() {
             editContext?.addComment();
           }}
         />
-        <SimpleIconButton
-          selected={editContext?.showComments}
-          icon={
-            <MessageSquareMore size={16} strokeWidth={1} className="p-0.5" />
-          }
-          label="Show Comments"
-          onClick={() => {
-            editContext?.setShowComments((x) => !x);
-          }}
-        />
-
         <SimpleIconButton
           selected={!!editContext?.showResolvedComments}
           icon={<CheckCircle2 size={16} strokeWidth={1} className="p-0.5" />}
@@ -181,15 +168,7 @@ export function Comments() {
             editContext?.setShowResolvedComments((x) => !x);
           }}
         />
-        <SimpleIconButton
-          selected={editContext?.showSuggestedEdits}
-          icon={<Lightbulb size={16} strokeWidth={1} className="p-0.5" />}
-          label="Show Suggestions"
-          data-testid="show-suggestions-button"
-          onClick={() => {
-            editContext?.setShowSuggestedEdits((x) => !x);
-          }}
-        />
+
         {editContext?.showSuggestedEdits && (
           <SimpleIconButton
             selected={editContext?.showSuggestedEditsDiff}
@@ -221,77 +200,75 @@ export function Comments() {
           }}
         />
         <div className="ml-auto flex items-center gap-2">
-          <SimpleIconButton
-            selected={scope === "all"}
-            icon={<GitBranch size={16} strokeWidth={1} className="p-0.5" />}
-            label={
-              scope === "all"
-                ? "Include Children (on)"
-                : "Include Children (off)"
-            }
-            onClick={() => setScope(scope === "all" ? "itemOnly" : "all")}
-          />
-
           {availableTags.length > 0 && (
-            <Popover>
-              <PopoverTrigger asChild>
-                <SimpleIconButton
-                  showTooltip={false}
-                  selected={selectedTagsFilter.length > 0}
-                  icon={<Tags size={16} strokeWidth={1} className="p-0.5" />}
-                  label={
-                    selectedTagsFilter.length > 0
-                      ? `Tags (${selectedTagsFilter.length})`
-                      : "Tags"
-                  }
-                  onClick={() => {}}
-                />
-              </PopoverTrigger>
-              <PopoverContent className="w-72 p-3" align="start">
-                <div className="mb-2 text-xs text-gray-600">Filter by tags</div>
-                <div className="flex flex-wrap gap-2">
-                  {availableTags.map((tag) => {
-                    const isSelected = selectedTagsFilter.includes(tag.label);
-                    return (
+            <Tooltip delayDuration={500}>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <TooltipTrigger asChild>
+                    <SimpleIconButton
+                      showTooltip={false}
+                      selected={selectedTagsFilter.length > 0}
+                      icon={
+                        <Tags size={16} strokeWidth={1} className="p-0.5" />
+                      }
+                      label={
+                        selectedTagsFilter.length > 0
+                          ? `Tags (${selectedTagsFilter.length})`
+                          : "Tags"
+                      }
+                      onClick={() => {}}
+                    />
+                  </TooltipTrigger>
+                </PopoverTrigger>
+                <PopoverContent className="w-72 p-3" align="start">
+                  <div className="mb-2 text-xs text-gray-600">
+                    Filter by tags
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {availableTags.map((tag) => {
+                      const isSelected = selectedTagsFilter.includes(tag.label);
+                      return (
+                        <Button
+                          key={tag.label}
+                          type="button"
+                          size="sm"
+                          variant={isSelected ? "secondary" : "outline"}
+                          className="h-6 px-2 text-xs"
+                          onClick={() => {
+                            setSelectedTagsFilter((prev) =>
+                              prev.includes(tag.label)
+                                ? prev.filter((l) => l !== tag.label)
+                                : [...prev, tag.label],
+                            );
+                          }}
+                          style={{
+                            borderColor: isSelected ? tag.color : undefined,
+                            backgroundColor: isSelected
+                              ? tag.color + "22"
+                              : undefined,
+                          }}
+                        >
+                          {tag.label}
+                        </Button>
+                      );
+                    })}
+                  </div>
+                  {selectedTagsFilter.length > 0 && (
+                    <div className="mt-3 text-right">
                       <Button
-                        key={tag.label}
-                        type="button"
                         size="sm"
-                        variant={isSelected ? "secondary" : "outline"}
+                        variant="ghost"
                         className="h-6 px-2 text-xs"
-                        onClick={() => {
-                          setSelectedTagsFilter((prev) =>
-                            prev.includes(tag.label)
-                              ? prev.filter((l) => l !== tag.label)
-                              : [...prev, tag.label],
-                          );
-                        }}
-                        style={{
-                          borderColor: isSelected ? tag.color : undefined,
-                          backgroundColor: isSelected
-                            ? tag.color + "22"
-                            : undefined,
-                        }}
+                        onClick={() => setSelectedTagsFilter([])}
                       >
-                        {tag.label}
+                        Clear
                       </Button>
-                    );
-                  })}
-                </div>
-                {selectedTagsFilter.length > 0 && (
-                  <div className="mt-3 text-right">
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-6 px-2 text-xs"
-                      onClick={() => setSelectedTagsFilter([])}
-                    >
-                      Clear
-                    </Button>
-                  </div>
-                )}
-              </PopoverContent>
-            </Popover>
+                    </div>
+                  )}
+                </PopoverContent>
+              </Popover>
+              <TooltipContent>Filter by tags</TooltipContent>
+            </Tooltip>
           )}
         </div>
       </SimpleToolbar>

package/src/editor/reviews/SuggestedEdit.tsx

@@ -1,5 +1,5 @@
 import { SuggestedEdit as SuggestedEditType } from "../../types";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import {
   deleteSuggestedEdit,
@@ -100,21 +100,27 @@ export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
 
   // Render contextual info by retrieving item and field names from the loaded item.
   const renderContextInfo = () => {
-    const itemName = item ? item.name : null;
+    const pageName = editContext?.currentItemDescriptor?.name;
+    const itemName = item ? item.name : undefined;
     const fieldName =
       item && item.fields
         ? item.fields.find(
             (f: { id: string; name?: string }) => f.id === edit.fieldId,
-          )?.name
-        : null;
-    if (!itemName && !fieldName) return null;
+          )?.name || undefined
+        : undefined;
+
+    const segments = [pageName, itemName, fieldName].filter(
+      (x): x is string => !!x && x.length > 0,
+    );
+    if (segments.length === 0) return null;
     return (
       <div className="mt-3 flex items-center border-t pt-3 text-xs">
-        {itemName && <div className="text-2xs text-gray-500">{itemName}</div>}
-        {fieldName && itemName && (
-          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
-        )}
-        {fieldName && <div className="text-2xs text-gray-500">{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>
     );
   };

package/src/editor/reviews/SuggestionDisplayPopover.tsx

@@ -208,23 +208,28 @@ export function SuggestionDisplayPopover({
   };
 
   const renderContextInfo = () => {
-    const itemName = item ? item.name : null;
+    const pageName = editContext?.currentItemDescriptor?.name;
+    const itemName = item ? item.name : undefined;
     const fieldName =
       item && item.fields
         ? item.fields.find(
             (f: { id: string; name?: string }) => f.id === suggestion.fieldId,
-          )?.name
-        : null;
+          )?.name || undefined
+        : undefined;
 
-    if (!itemName && !fieldName) return null;
+    const segments = [pageName, itemName, fieldName].filter(
+      (x): x is string => !!x && x.length > 0,
+    );
+    if (segments.length === 0) return null;
 
     return (
       <div className="mt-3 flex items-center border-t pt-3 text-xs">
-        {itemName && <div className="text-xs text-gray-500">{itemName}</div>}
-        {fieldName && itemName && (
-          <div className="mx-2 text-xs text-gray-500">&gt;</div>
-        )}
-        {fieldName && <div className="text-xs text-gray-500">{fieldName}</div>}
+        {segments.map((seg, idx) => (
+          <React.Fragment key={idx}>
+            {idx > 0 && <div className="mx-2 text-xs text-gray-500">&gt;</div>}
+            <div className="text-xs text-gray-500">{seg}</div>
+          </React.Fragment>
+        ))}
       </div>
     );
   };

package/src/editor/services/reviewsService.ts

@@ -12,6 +12,16 @@ export function getComments(itemId: string, language: string, version: number) {
   );
 }
 
+// Latest comments across the system, already filtered by backend for user access.
+export function getLatestComments(take?: number) {
+  const params = new URLSearchParams();
+  if (take && take > 0) params.set("take", take.toString());
+  const query = params.toString();
+  return get<Comment[]>(
+    `/alpaca/editor/comments/latest${query ? `?${query}` : ""}`,
+  );
+}
+
 export function resolveComment(comment: Comment) {
   return post(`/alpaca/editor/comments/resolve?commentId=${comment.id}`, {});
 }

package/src/editor/services/suggestedEditsService.ts

@@ -21,6 +21,16 @@ export function getSuggestedEdits(
   );
 }
 
+// Latest suggested edits across the system, already filtered by backend for user access.
+export function getLatestSuggestedEdits(take?: number) {
+  const params = new URLSearchParams();
+  if (take && take > 0) params.set("take", take.toString());
+  const query = params.toString();
+  return get<SuggestedEdit[]>(
+    `/alpaca/editor/suggested-edits/latest${query ? `?${query}` : ""}`,
+  );
+}
+
 /**
  * Retrieves a single suggested edit by its unique identifier.
  */

package/src/editor/sidebar/Completions.tsx

@@ -4,6 +4,7 @@ import { Switch } from "../../components/ui/switch";
 import { Button } from "../../components/ui/button";
 import { Badge } from "../../components/ui/badge";
 import { Loader2, RefreshCw, FileText } from "lucide-react";
+import { formatTime } from "../utils";
 
 import {
   generatePageContext,
@@ -120,7 +121,7 @@ export function Completions() {
               {pageContext.abstract}
             </p>
             <div className="text-xs text-gray-400">
-              Generated: {pageContext.lastGenerated.toLocaleTimeString()}
+              {`Generated: ${formatTime(pageContext.lastGenerated)}`}
             </div>
           </div>
         ) : (

package/src/editor/ui/Icons.tsx

@@ -891,10 +891,12 @@ export function SecretAgentIcon({
   title,
   strokeWidth = 1,
   size = 20,
+  className,
 }: {
   title?: string;
   strokeWidth?: number;
   size?: number;
+  className?: string;
 }) {
   return (
     <svg
@@ -909,6 +911,7 @@ export function SecretAgentIcon({
       strokeLinejoin="round"
       role="img"
       aria-label={title}
+      className={className}
     >
       <path d="M3 10h18" />
       <path d="M7 10l2-5h6l2 5" />

package/src/editor/ui/SimpleTable.tsx

@@ -23,10 +23,10 @@ export function SimpleTable<T>({
 }) {
   return (
     <table className="text-surface min-w-full table-auto text-left text-xs font-light">
-      <thead className="border-b border-neutral-200 font-medium">
+      <thead className="border-b border-neutral-200">
         <tr>
           {columns.map((col, index) => (
-            <th key={index} className="px-1.5 py-1.5">
+            <th key={index} className="px-1.5 py-1.5 font-medium">
               {col.header}
             </th>
           ))}

package/src/editor/utils.ts

@@ -504,23 +504,81 @@ export function normalizeGuid(id: string) {
   return "{" + id + "}";
 }
 
-const dateOptions: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "numeric",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  hour12: false,
-};
+function getLocale() {
+  try {
+    if (typeof navigator !== "undefined" && navigator.language)
+      return navigator.language;
+  } catch {}
+  return "en";
+}
+
+function getUserTimeZone() {
+  try {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return tz || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+
+export function formatDate(
+  date: Date,
+  options?: Intl.DateTimeFormatOptions & { timeZone?: string },
+) {
+  const locale = getLocale();
+  const timeZone = options?.timeZone || getUserTimeZone();
+  const fmt = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: false,
+    timeZone,
+    ...options,
+  });
+  return fmt.format(date);
+}
 
-const dateFormat = Intl.DateTimeFormat(
-  typeof navigator !== "undefined" ? navigator.language : "en",
-  dateOptions,
-);
+export function formatDateOnly(
+  date: Date,
+  options?: Intl.DateTimeFormatOptions & { timeZone?: string },
+) {
+  const locale = getLocale();
+  const timeZone = options?.timeZone || getUserTimeZone();
+  const fmt = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    timeZone,
+    ...options,
+  });
+  return fmt.format(date);
+}
 
-export function formatDate(date: Date) {
-  return dateFormat.format(date);
+export function formatTime(
+  date: Date,
+  options?: Intl.DateTimeFormatOptions & { timeZone?: string },
+) {
+  const locale = getLocale();
+  const timeZone = options?.timeZone || getUserTimeZone();
+  const fmt = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: false,
+    timeZone,
+    ...options,
+  });
+  return fmt.format(date);
+}
+
+export function formatDateTime(
+  date: Date,
+  options?: Intl.DateTimeFormatOptions & { timeZone?: string },
+) {
+  return formatDate(date, options);
 }
 
 export function findClosestFieldElement(node: Node | null): HTMLElement | null {

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4104";
-export const buildDate = "2025-09-23 14:05:05";
+export const version = "1.0.4106";
+export const buildDate = "2025-09-23 20:25:39";

package/src/types.ts

@@ -260,6 +260,7 @@ export type IndexStatus = {
   rebuilding: boolean;
   batches: EmbeddingBatch[];
   latestEmbeddedItems?: LatestEmbeddedItem[];
+  messages?: SystemStatusMessage[];
 };
 
 export type EmbeddingBatch = {
@@ -337,6 +338,7 @@ export type Comment = {
   isNew: boolean;
   itemId: string;
   itemName?: string;
+  mainItemName?: string;
   mainItemId: string;
   language: string;
   version: number;
@@ -408,7 +410,9 @@ export interface SuggestedEdit {
   mainItemId: string;
   mainItemLanguage: string;
   mainItemVersion: number;
+  mainItemName?: string;
   itemId: string;
+  itemName?: string;
   fieldId: string;
   oldValue: string;
   newValue: string;