@alpaca-editor/core 1.0.4086 → 1.0.4089

package/src/editor/reviews/CommentPopover.tsx

@@ -11,10 +11,7 @@ import {
 } from "../client/editContext";
 import type { SelectionRange } from "../client/editContext";
 import type { FieldDescriptor } from "../../types";
-import {
-  createOrUpdateComment,
-  getAvailableCommentTags,
-} from "../services/reviewsService";
+import { createOrUpdateComment } from "../services/reviewsService";
 import {
   Popover,
   PopoverContent,
@@ -41,11 +38,9 @@ export function CommentPopover({
 }) {
   const [isOpen, setIsOpen] = useState(!!position);
   const [saving, setSaving] = useState(false);
-  const [availableTags, setAvailableTags] = useState<
-    { label: string; color: string }[]
-  >([]);
   const contextFromHook = useEditContext();
   const editContext = externalEditContext || contextFromHook;
+  const availableTags = editContext?.availableCommentTags || [];
   const fieldsContext = useFieldsEditContext();
   const contentRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -53,23 +48,7 @@ export function CommentPopover({
     if (position) setIsOpen(true);
   }, [position?.x, position?.y]);
 
-  useEffect(() => {
-    let cancelled = false;
-    const loadTags = async () => {
-      try {
-        const descriptor = editContext?.contentEditorItem?.descriptor;
-        if (!descriptor) return;
-        const tags = await getAvailableCommentTags(descriptor);
-        if (!cancelled) setAvailableTags(tags || []);
-      } catch {
-        if (!cancelled) setAvailableTags([]);
-      }
-    };
-    loadTags();
-    return () => {
-      cancelled = true;
-    };
-  }, [editContext?.contentEditorItem?.descriptor?.id]);
+  // Tags are now provided by editContext.availableCommentTags
 
   const handleSave = async (text: string, tags: string[]) => {
     if (!editContext || !text || saving) return;

package/src/editor/reviews/CommentView.tsx

@@ -43,7 +43,8 @@ export function CommentView({
   const [resolvePopoverOpen, setResolvePopoverOpen] = React.useState(false);
 
   const renderTags = () => {
-    const tagLabels = (comment.tags || "")
+    // Canonical: parse labels from comment.tags (comma-separated string)
+    const tagLabels: string[] = (comment.tags || "")
       .split(",")
       .map((t) => t.trim())
       .filter(Boolean);
@@ -192,7 +193,7 @@ export function CommentView({
                   >
                     <Check
                       className="h-3.5 w-3.5 text-green-500"
-                      strokeWidth={2}
+                      strokeWidth={1}
                     />
                   </button>
                 </PopoverTrigger>

package/src/editor/reviews/Comments.tsx

@@ -5,12 +5,21 @@ import { SuggestedEditComponent } from "./SuggestedEdit";
 import { Comment as CommentType, SuggestedEdit } from "../../types";
 import { SimpleToolbar } from "../ui/SimpleToolbar";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Button } from "../../components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 import {
   FileDiff,
   SquarePen,
   CheckCircle,
   CheckCircle2,
   MessageSquareMore,
+  Plus,
+  GitBranch,
+  Tags,
 } from "lucide-react";
 
 // Define a union type for feedback items:
@@ -21,9 +30,29 @@ export function Comments() {
   const [feedbackItems, setFeedbackItems] = useState<FeedbackItem[]>([]);
   const [hideAppliedSuggestions, setHideAppliedSuggestions] =
     useState<boolean>(true);
-  const [availableTags, setAvailableTags] = useState<
-    { label: string; color: string }[]
-  >([]);
+  const [selectedTagsFilter, setSelectedTagsFilter] = useState<string[]>(() => {
+    try {
+      const raw =
+        typeof window !== "undefined"
+          ? localStorage.getItem("editor.comments.tagsFilter")
+          : null;
+      return raw ? (JSON.parse(raw) as string[]) : [];
+    } catch {
+      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,
@@ -36,47 +65,69 @@ export function Comments() {
       ? suggestedEdits.filter((edit) => edit.status !== "applied")
       : suggestedEdits;
 
+    // Start with combined list
     const combined: FeedbackItem[] = [...comments, ...filteredSuggestedEdits];
 
+    // Apply scope filter (item-only vs item + children)
+    const baseItemId =
+      (editContext?.selection && editContext.selection[0]) ||
+      editContext?.currentItemDescriptor?.id ||
+      undefined;
+
+    const scoped =
+      scope === "itemOnly" && baseItemId
+        ? combined.filter((item: any) => item.itemId === baseItemId)
+        : 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. Adjust the comparison as needed if the date properties differ.
-    combined.sort(
+    tagFiltered.sort(
       (a, b) =>
         new Date(b.created || "").getTime() -
         new Date(a.created || "").getTime(),
     );
 
-    setFeedbackItems(combined);
-  }, [editContext, hideAppliedSuggestions]);
+    setFeedbackItems(tagFiltered);
+  }, [editContext, hideAppliedSuggestions, scope, selectedTagsFilter]);
 
-  // Load available tags once per context for color mapping in child comments
   useEffect(() => {
-    let cancelled = false;
-    const loadTags = async () => {
-      try {
-        const descriptor = editContext?.contentEditorItem?.descriptor;
-        if (!descriptor) {
-          if (!cancelled) setAvailableTags([]);
-          return;
-        }
-        const { getAvailableCommentTags } = await import(
-          "../services/reviewsService"
+    try {
+      if (typeof window !== "undefined")
+        localStorage.setItem(
+          "editor.comments.tagsFilter",
+          JSON.stringify(selectedTagsFilter),
         );
-        const tags = await getAvailableCommentTags(descriptor);
-        if (!cancelled) setAvailableTags(tags || []);
-      } catch {
-        if (!cancelled) setAvailableTags([]);
-      }
-    };
-    loadTags();
-    return () => {
-      cancelled = true;
-    };
-  }, [editContext?.contentEditorItem?.descriptor?.id]);
+    } catch {}
+  }, [selectedTagsFilter]);
+
+  useEffect(() => {
+    try {
+      if (typeof window !== "undefined")
+        localStorage.setItem("editor.comments.scope", scope);
+    } catch {}
+  }, [scope]);
+
+  // Tags are provided once via editContext.availableCommentTags
 
   return (
     <div className="flex h-full flex-col">
       <div className="border-gray-3 flex-1 overflow-auto border-b">
         <div className="h-fill-available p-4">
+          {/* Filters moved to bottom toolbar */}
+
           {feedbackItems.map((item) => {
             // Use a discriminator check. Here we assume suggested edits have the properties oldValue and newValue.
             if ("oldValue" in item && "newValue" in item) {
@@ -100,7 +151,7 @@ export function Comments() {
       <SimpleToolbar>
         <SimpleIconButton
           id="add-comment"
-          icon="pi pi-plus"
+          icon={<Plus size={16} strokeWidth={1} className="p-0.5" />}
           label="Add Comment"
           onClick={() => {
             editContext?.addComment();
@@ -108,7 +159,9 @@ export function Comments() {
         />
         <SimpleIconButton
           selected={editContext?.showComments}
-          icon={<MessageSquareMore size={16} className="p-0.5" />}
+          icon={
+            <MessageSquareMore size={16} strokeWidth={1} className="p-0.5" />
+          }
           label="Show Comments"
           onClick={() => {
             editContext?.setShowComments((x) => !x);
@@ -116,7 +169,7 @@ export function Comments() {
         />
         <SimpleIconButton
           selected={editContext?.showSuggestedEdits}
-          icon={<SquarePen size={16} className="p-0.5" />}
+          icon={<SquarePen size={16} strokeWidth={1} className="p-0.5" />}
           label="Show Suggestions"
           onClick={() => {
             editContext?.setShowSuggestedEdits((x) => !x);
@@ -124,7 +177,7 @@ export function Comments() {
         />
         <SimpleIconButton
           selected={!!editContext?.showResolvedComments}
-          icon={<CheckCircle2 size={16} className="p-0.5" />}
+          icon={<CheckCircle2 size={16} strokeWidth={1} className="p-0.5" />}
           label={
             editContext?.showResolvedComments
               ? "Hide Resolved Comments"
@@ -137,7 +190,7 @@ export function Comments() {
         {editContext?.showSuggestedEdits && (
           <SimpleIconButton
             selected={editContext?.showSuggestedEditsDiff}
-            icon={<FileDiff size={16} className="p-0.5" />}
+            icon={<FileDiff size={16} strokeWidth={1} className="p-0.5" />}
             label="Show Suggestions Diff"
             onClick={() => {
               editContext?.setShowSuggestedEditsDiff((x) => !x);
@@ -148,9 +201,9 @@ export function Comments() {
           selected={hideAppliedSuggestions}
           icon={
             hideAppliedSuggestions ? (
-              <CheckCircle2 size={16} className="p-0.5" />
+              <CheckCircle2 size={16} strokeWidth={1} className="p-0.5" />
             ) : (
-              <CheckCircle size={16} className="p-0.5" />
+              <CheckCircle size={16} strokeWidth={1} className="p-0.5" />
             )
           }
           label={
@@ -162,6 +215,80 @@ export function Comments() {
             setHideAppliedSuggestions((x) => !x);
           }}
         />
+        <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 (
+                      <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
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 px-2 text-xs"
+                      onClick={() => setSelectedTagsFilter([])}
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                )}
+              </PopoverContent>
+            </Popover>
+          )}
+        </div>
       </SimpleToolbar>
     </div>
   );

package/src/editor/reviews/commentAi.ts

@@ -88,6 +88,11 @@ export function openAiAgentForComment(
             rangeEnd: comment.rangeEnd,
           },
         },
+        // Seed profile from editor settings if available
+        profileId:
+          editContext.editorSettings?.commentResolveProfileId || undefined,
+        profileName:
+          editContext.editorSettings?.commentResolveProfileName || undefined,
       },
     } as any;
 

package/src/editor/sidebar/Debug.tsx

@@ -34,11 +34,7 @@ export function Debug({}: {}) {
       setPageLayout(layout);
     };
     loadLayout();
-  }, [
-    editContext.contentEditorItem,
-    editContext.itemsRepository.revision,
-    pageViewContext.isHeadless,
-  ]);
+  }, [editContext.contentEditorItem, pageViewContext.isHeadless]);
 
   const page = pageLayout; // editContext.page;
   let component = null;

package/src/editor/sidebar/ViewSelector.tsx

@@ -17,7 +17,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../../components/ui/tooltip";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "../../components/ui/context-menu";
 import { DrawingPinFilledIcon, DrawingPinIcon } from "@radix-ui/react-icons";
+import { Pin, PinOff } from "lucide-react";
 
 function ViewSelectorComponent() {
   const editContext = useEditContext();
@@ -51,6 +58,7 @@ function ViewSelectorComponent() {
   );
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
 
   const views = useMemo(() => {
     return (
@@ -71,6 +79,22 @@ function ViewSelectorComponent() {
   // Use visibleViews from editContext instead of calculating locally
   const visibleViews = editContext?.visibleViews ?? [];
 
+  // Order visible views so pinned ones follow the user's pinnedViews order
+  const orderedVisibleViews = useMemo(() => {
+    const shown = visibleViews.filter((x) => x.icon);
+    const pinnedOrder = contextValues.pinnedViews;
+    const pinnedSet = new Set(pinnedOrder);
+
+    const pinnedOrdered = pinnedOrder
+      .map((name) => shown.find((v) => v.name === name))
+      .filter((v): v is NonNullable<typeof v> => Boolean(v));
+
+    const selected = shown.find((v) => v.name === contextValues.viewName);
+    if (selected && !pinnedSet.has(selected.name)) pinnedOrdered.push(selected);
+
+    return pinnedOrdered;
+  }, [visibleViews, contextValues.pinnedViews, contextValues.viewName]);
+
   const togglePin = useCallback(
     (viewName: string) => {
       const newPinnedViews = contextValues.pinnedViews.includes(viewName)
@@ -103,11 +127,12 @@ function ViewSelectorComponent() {
 
   const handleViewClick = useCallback(
     (viewName: string) => {
+      if (isDragging) return;
       if (viewName !== contextValues.viewName) {
         contextValues.switchView?.(viewName);
       }
     },
-    [contextValues.viewName, contextValues.switchView],
+    [isDragging, contextValues.viewName, contextValues.switchView],
   );
 
   const handleViewClickAndClosePopover = useCallback(
@@ -126,41 +151,132 @@ function ViewSelectorComponent() {
     [togglePin],
   );
 
+  const handleDragStart = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, viewName: string) => {
+      setIsDragging(true);
+      e.dataTransfer.setData("text/alpaca-view", viewName);
+      e.dataTransfer.effectAllowed = "move";
+    },
+    [],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    // Allow drop
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, targetViewName: string) => {
+      e.preventDefault();
+      const sourceViewName =
+        e.dataTransfer.getData("text/alpaca-view") ||
+        e.dataTransfer.getData("text/plain");
+
+      if (!sourceViewName || sourceViewName === targetViewName) return;
+
+      const pinned = contextValues.pinnedViews;
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const before = e.clientY < rect.top + rect.height / 2;
+
+      // Remove source first, then insert relative to target (even if not currently pinned)
+      const newPinned = pinned.filter((n) => n !== sourceViewName);
+      const targetIndex = newPinned.indexOf(targetViewName);
+      const baseIndex = targetIndex >= 0 ? targetIndex : newPinned.length - 1;
+      const insertIndex = before
+        ? Math.max(0, baseIndex)
+        : Math.max(0, baseIndex + 1);
+
+      newPinned.splice(insertIndex, 0, sourceViewName);
+      contextValues.setUserPreferences?.({ pinnedViews: newPinned });
+    },
+    [contextValues.pinnedViews, contextValues.setUserPreferences],
+  );
+
+  // Drop between helpers
+  const handleDropBetween = useCallback(
+    (
+      e: React.DragEvent<HTMLDivElement>,
+      beforeIndex: number, // insert at this index
+    ) => {
+      e.preventDefault();
+      const sourceViewName =
+        e.dataTransfer.getData("text/alpaca-view") ||
+        e.dataTransfer.getData("text/plain");
+      if (!sourceViewName) return;
+
+      const pinned = contextValues.pinnedViews;
+      const newPinned = pinned.filter((n) => n !== sourceViewName);
+      const clamped = Math.max(0, Math.min(beforeIndex, newPinned.length));
+      newPinned.splice(clamped, 0, sourceViewName);
+      contextValues.setUserPreferences?.({ pinnedViews: newPinned });
+    },
+    [contextValues.pinnedViews, contextValues.setUserPreferences],
+  );
+
   return (
     <TooltipProvider delayDuration={500} skipDelayDuration={0}>
       {/* Visible views (pinned + selected) */}
-      {visibleViews
-        .filter((x) => x.icon)
-        .map((view, i) => (
+      {orderedVisibleViews.map((view, i) => {
+        const isPinned = contextValues.pinnedViews.includes(view.name);
+        return (
           <Tooltip key={`visible-${i}`} delayDuration={500}>
-            <TooltipTrigger asChild>
-              <div
-                className={classNames(
-                  contextValues.viewName === view.name
-                    ? "active bg-theme-secondary-light text-theme-secondary rounded-sm"
-                    : "text-dark hover:bg-gray-5",
-                  "relative flex cursor-pointer flex-col items-center justify-center",
-                  contextValues.showViewNames ? "p-1" : "p-1.5",
-                  contextValues.isMobile ? "flex-shrink-0" : "",
-                )}
-                data-sidebarview-name={view.name}
-                onClick={() => handleViewClick(view.name)}
-              >
-                <div className={contextValues.showViewNames ? "p-0.5" : ""}>
-                  {renderViewIcon(view)}
-                </div>
-                {contextValues.showViewNames && (
-                  <span className="mt-1 max-w-[60px] text-center text-xs leading-tight break-words">
-                    {view.title || view.name}
-                  </span>
-                )}
-              </div>
-            </TooltipTrigger>
+            <ContextMenu>
+              <ContextMenuTrigger asChild>
+                <TooltipTrigger asChild>
+                  <div
+                    className={classNames(
+                      contextValues.viewName === view.name
+                        ? "active bg-theme-secondary-light text-theme-secondary rounded-sm"
+                        : "text-dark hover:bg-gray-5",
+                      "relative flex cursor-pointer flex-col items-center justify-center select-none",
+                      contextValues.showViewNames ? "p-1" : "p-1.5",
+                      contextValues.isMobile ? "flex-shrink-0" : "",
+                    )}
+                    data-sidebarview-name={view.name}
+                    onDragOver={handleDragOver}
+                    onDrop={(e) => handleDrop(e, view.name)}
+                    draggable={true}
+                    onDragStart={(e) => handleDragStart(e, view.name)}
+                    onDragEnd={handleDragEnd}
+                    onClick={() => handleViewClick(view.name)}
+                  >
+                    <div className={contextValues.showViewNames ? "p-0.5" : ""}>
+                      {renderViewIcon(view)}
+                    </div>
+                    {contextValues.showViewNames && (
+                      <span className="mt-1 max-w-[60px] text-center text-xs leading-tight break-words">
+                        {view.title || view.name}
+                      </span>
+                    )}
+                  </div>
+                </TooltipTrigger>
+              </ContextMenuTrigger>
+              <ContextMenuContent>
+                <ContextMenuItem
+                  onSelect={() => {
+                    togglePin(view.name);
+                  }}
+                >
+                  {isPinned ? (
+                    <PinOff className="size-4" strokeWidth={1} />
+                  ) : (
+                    <Pin className="size-4" strokeWidth={1} />
+                  )}
+                  {isPinned ? "Unpin view" : "Pin view"}
+                </ContextMenuItem>
+              </ContextMenuContent>
+            </ContextMenu>
             <TooltipContent side="right">
               {view.title || view.name}
             </TooltipContent>
           </Tooltip>
-        ))}
+        );
+      })}
 
       {/* Three dots menu for non-selected views */}
       {views.length > 0 && (

package/src/editor/ui/Icons.tsx

@@ -921,3 +921,58 @@ export function SecretAgentIcon({
     </svg>
   );
 }
+
+export function AnimatedSunIcon({
+  size = 36,
+  style,
+  ...props
+}: {
+  size?: number;
+  style?: React.CSSProperties;
+  props?: React.SVGProps<SVGSVGElement>;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      role="img"
+      aria-label="Animated Sun"
+      stroke="currentColor"
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={style}
+      {...props}
+    >
+      <style>{`
+        @media (prefers-reduced-motion: reduce) {
+          .sun-spin { animation: none !important; }
+        }
+        .sun-spin {
+          transform-origin: 12px 12px;
+          animation: sun-rotate 8s linear infinite;
+        }
+        @keyframes sun-rotate {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+
+      {/* Rays spin */}
+      <g className="sun-spin">
+        <line x1="12" y1="2.5" x2="12" y2="4.2" />
+        <line x1="12" y1="19.8" x2="12" y2="21.5" />
+        <line x1="4.2" y1="12" x2="2.5" y2="12" />
+        <line x1="21.5" y1="12" x2="19.8" y2="12" />
+        <line x1="5.6" y1="5.6" x2="4.4" y2="4.4" />
+        <line x1="19.6" y1="19.6" x2="18.4" y2="18.4" />
+        <line x1="5.6" y1="18.4" x2="4.4" y2="19.6" />
+        <line x1="19.6" y1="4.4" x2="18.4" y2="5.6" />
+      </g>
+
+      {/* Core stays still */}
+      <circle cx="12" cy="12" r="4.2" />
+    </svg>
+  );
+}

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4086";
-export const buildDate = "2025-09-12 01:46:21";
+export const version = "1.0.4089";
+export const buildDate = "2025-09-16 09:23:08";