@alpaca-editor/core 1.0.3896 → 1.0.3897

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+
+export function Info() {
+  const editContext = useEditContext();
+  const user = editContext?.user;
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-gray-800">
+          System Information
+        </h2>
+
+        {/* User Information */}
+        {user && (
+          <div className="rounded-lg border border-gray-200 bg-white p-4">
+            <h3 className="mb-3 text-lg font-medium text-gray-700">
+              User Information
+            </h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Name
+                </label>
+                <p className="text-gray-900">{user.displayName || user.name}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Email
+                </label>
+                <p className="text-gray-900">{user.email || "Not available"}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  User Type
+                </label>
+                <p className="text-gray-900">
+                  {user.isLimitedPreviewUser
+                    ? "Limited Preview User"
+                    : "Regular User"}
+                </p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-500">
+                  Session ID
+                </label>
+                <p className="font-mono text-xs text-gray-900">
+                  {editContext?.sessionId}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Editor Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Editor Information
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Active Sessions
+              </label>
+              <p className="text-gray-900">
+                {editContext?.activeSessions?.length || 0}
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-gray-500">
+                Mobile View
+              </label>
+              <p className="text-gray-900">
+                {editContext?.isMobile ? "Yes" : "No"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Technical Information */}
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="mb-3 text-lg font-medium text-gray-700">
+            Technical Information
+          </h3>
+          <div className="space-y-2 text-sm">
+            <div>
+              <span className="font-medium text-gray-500">User Agent:</span>
+              <p className="mt-1 font-mono text-xs break-all text-gray-900">
+                {navigator.userAgent}
+              </p>
+            </div>
+            <div>
+              <span className="font-medium text-gray-500">Viewport Size:</span>
+              <p className="text-gray-900">
+                {window.innerWidth} × {window.innerHeight}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+
+export function QuotaInfo() {
+  const editContext = useEditContext();
+  const quotaInfo = editContext?.quotaInfo;
+
+  const formatQuotaPercentage = (used: number, limit: number) => {
+    if (limit === 0) return "No limit";
+    const percentage = Math.round((used / limit) * 100);
+    return `${percentage}%`;
+  };
+
+  const getQuotaStatus = (used: number, limit: number) => {
+    if (limit === 0) return "unlimited";
+    const percentage = (used / limit) * 100;
+    if (percentage >= 100) return "exceeded";
+    if (percentage >= 90) return "warning";
+    if (percentage >= 75) return "caution";
+    return "ok";
+  };
+
+  if (!quotaInfo) {
+    return (
+      <div className="space-y-6 p-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h2 className="mb-3 text-xl font-semibold text-gray-800">
+            AI Usage Quota
+          </h2>
+          <p className="text-gray-600">No quota information available</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h2 className="mb-3 text-xl font-semibold text-gray-800">
+          AI Usage Quota
+        </h2>
+        <div className="space-y-4">
+          {/* Token Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Token Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.tokens.toLocaleString()} /{" "}
+                {quotaInfo.limits.absoluteTokens > 0
+                  ? quotaInfo.limits.absoluteTokens.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.absoluteTokens > 0 && (
+              <div className="h-2 w-full rounded-full bg-gray-200">
+                <div
+                  className={`h-2 rounded-full ${
+                    getQuotaStatus(
+                      quotaInfo.usage.tokens,
+                      quotaInfo.limits.absoluteTokens,
+                    ) === "exceeded"
+                      ? "bg-red-500"
+                      : getQuotaStatus(
+                            quotaInfo.usage.tokens,
+                            quotaInfo.limits.absoluteTokens,
+                          ) === "warning"
+                        ? "bg-orange-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.tokens,
+                              quotaInfo.limits.absoluteTokens,
+                            ) === "caution"
+                          ? "bg-yellow-500"
+                          : "bg-green-500"
+                  }`}
+                  style={{
+                    width: `${Math.min(100, (quotaInfo.usage.tokens / quotaInfo.limits.absoluteTokens) * 100)}%`,
+                  }}
+                ></div>
+              </div>
+            )}
+            <p className="mt-1 text-xs text-gray-500">
+              {formatQuotaPercentage(
+                quotaInfo.usage.tokens,
+                quotaInfo.limits.absoluteTokens,
+              )}{" "}
+              used
+            </p>
+          </div>
+
+          {/* Image Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Image Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.images.toLocaleString()} /{" "}
+                {quotaInfo.limits.absoluteImages > 0
+                  ? quotaInfo.limits.absoluteImages.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.absoluteImages > 0 && (
+              <div className="h-2 w-full rounded-full bg-gray-200">
+                <div
+                  className={`h-2 rounded-full ${
+                    getQuotaStatus(
+                      quotaInfo.usage.images,
+                      quotaInfo.limits.absoluteImages,
+                    ) === "exceeded"
+                      ? "bg-red-500"
+                      : getQuotaStatus(
+                            quotaInfo.usage.images,
+                            quotaInfo.limits.absoluteImages,
+                          ) === "warning"
+                        ? "bg-orange-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.images,
+                              quotaInfo.limits.absoluteImages,
+                            ) === "caution"
+                          ? "bg-yellow-500"
+                          : "bg-green-500"
+                  }`}
+                  style={{
+                    width: `${Math.min(100, (quotaInfo.usage.images / quotaInfo.limits.absoluteImages) * 100)}%`,
+                  }}
+                ></div>
+              </div>
+            )}
+            <p className="mt-1 text-xs text-gray-500">
+              {formatQuotaPercentage(
+                quotaInfo.usage.images,
+                quotaInfo.limits.absoluteImages,
+              )}{" "}
+              used
+            </p>
+          </div>
+
+          {/* Quota Status Summary */}
+          <div className="mt-4 rounded-lg bg-gray-50 p-3">
+            <h4 className="mb-2 text-sm font-medium text-gray-700">
+              Quota Status
+            </h4>
+            <div className="space-y-1 text-sm">
+              {editContext?.isQuotaExceeded && (
+                <p className="font-medium text-red-600">
+                  ⚠️ Quota limits have been exceeded
+                </p>
+              )}
+              {editContext?.getQuotaWarningMessage &&
+                editContext.getQuotaWarningMessage() &&
+                !editContext.isQuotaExceeded && (
+                  <p className="text-orange-600">
+                    ⚠️ {editContext.getQuotaWarningMessage()}
+                  </p>
+                )}
+              {!editContext?.isQuotaExceeded &&
+                !editContext?.getQuotaWarningMessage?.() && (
+                  <p className="text-green-600">
+                    ✅ All quotas are within limits
+                  </p>
+                )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,7 +1,113 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEditContext } from "../client/editContext";
+import { SimpleMenu } from "../ui/SimpleMenu";
+import { Splitter, SplitterPanel } from "../ui/Splitter";
+
 export function Status() {
+  const editContext = useEditContext();
+  const config = editContext?.configuration;
+  const searchParams = useSearchParams();
+  const urlActiveItemKey = searchParams.get("ccpanel");
+
+  // Get the first available panel as default
+  const defaultActiveItemKey = config?.controlCenter.groups?.flatMap(
+    (x) => x.panels,
+  )?.[0]?.id;
+
+  const [activeItemKey, setActiveItemKey] = useState<string | null>(
+    urlActiveItemKey || defaultActiveItemKey || null,
+  );
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const updateUrl = (key: string | null) => {
+    if (urlActiveItemKey === key) return;
+
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+
+    if (key) {
+      current.set("ccpanel", key);
+    } else {
+      current.delete("ccpanel");
+    }
+    router.push(`${pathname}?${current.toString()}`, { scroll: false });
+  };
+
+  // Set default active item when config loads and no active item is set
+  useEffect(() => {
+    if (!activeItemKey && defaultActiveItemKey) {
+      setActiveItemKey(defaultActiveItemKey);
+    }
+  }, [defaultActiveItemKey, activeItemKey]);
+
+  const items = config?.controlCenter.groups.map((group) => {
+    return {
+      id: group.title,
+      label: group.title,
+      icon: group.icon,
+      items:
+        group.panels.map((panel) => ({
+          id: panel.id,
+          label: panel.title,
+        })) || [],
+    };
+  });
+
+  // Find the currently selected panel content
+  const selectedPanel = config?.controlCenter.groups
+    ?.flatMap((x) => x.panels)
+    ?.find((item) => item.id === activeItemKey);
+
+  if (!items) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center">
+        Loading...
+      </div>
+    );
+  }
+
+  const panels: SplitterPanel[] = [
+    {
+      name: "menu",
+      defaultSize: 300,
+      content: (
+        <div className="h-full border-r border-gray-200">
+          <SimpleMenu
+            items={items}
+            activeItemKey={activeItemKey}
+            onItemClick={(item) => {
+              setActiveItemKey(item.id);
+              // Only update URL when user explicitly clicks on an item
+              updateUrl(item.id);
+            }}
+          />
+        </div>
+      ),
+    },
+    {
+      name: "content",
+      defaultSize: "auto",
+      content: (
+        <div className="absolute inset-0 overflow-auto">
+          {selectedPanel ? (
+            selectedPanel.content
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center text-gray-500">
+              <i className="pi pi-info-circle mb-4 text-4xl"></i>
+              <p>Select a panel from the menu to view its content</p>
+            </div>
+          )}
+        </div>
+      ),
+    },
+  ];
+
   return (
-    <div className="flex flex-col justify-center items-center h-full">
-      Status
+    <div className="h-full">
+      <Splitter panels={panels} localStorageKey="control-center-splitter" />
     </div>
   );
 }

package/src/editor/page-editor-chrome/FieldActionIndicator.tsx

@@ -1,3 +1,4 @@
+import { ProgressSpinner } from "primereact/progressspinner";
 import { FieldAction } from "../client/EditorClient";
 import { useEditContext } from "../client/editContext";
 
@@ -9,7 +10,7 @@ export function FieldActionIndicator({ action }: { action: FieldAction }) {
   const field = action.field;
   const fieldElements =
     pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(
-      `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"]`
+      `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"]`,
     );
 
   if (!fieldElements) return null;
@@ -19,19 +20,25 @@ export function FieldActionIndicator({ action }: { action: FieldAction }) {
         <SingleIndicator
           element={element}
           key={action.field.fieldId + action.field + index}
+          action={action}
         />
       ))}
     </>
   );
 }
 
-function SingleIndicator({ element }: { element: Element }) {
+function SingleIndicator({
+  element,
+  action,
+}: {
+  element: Element;
+  action: FieldAction;
+}) {
   const rect = element.getBoundingClientRect();
-
   const indicatorRect = rect;
   return (
     <div
-      className={`pointer-events-none absolute focus-shadow executing-action`}
+      className={`focus-shadow executing-action pointer-events-none absolute flex items-center justify-center bg-blue-500/20`}
       style={{
         left: indicatorRect.x,
         top: indicatorRect.y,
@@ -39,6 +46,14 @@ function SingleIndicator({ element }: { element: Element }) {
         height: indicatorRect.height,
         zIndex: 800,
       }}
-    />
+    >
+      <div className="flex flex-col items-center justify-center gap-1.5 rounded-md bg-gray-100 p-3 text-sm font-bold text-blue-500">
+        <div className="flex items-center gap-1">
+          <ProgressSpinner style={{ width: "1rem", height: "1rem" }} />
+          {action.label}
+        </div>
+        <div className="text-xs">{action.message}</div>
+      </div>
+    </div>
   );
 }

package/src/editor/page-viewer/PageViewer.tsx

@@ -5,7 +5,7 @@ import { PageViewerFrame } from "./PageViewerFrame";
 import { useEffect, useState } from "react";
 import { useRef } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { EditorMode, useEditContext } from "../client/editContext";
+import { useEditContext } from "../client/editContext";
 import { useDebouncedCallback } from "use-debounce";
 import { Ellipsis, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 

package/src/editor/services/aiService.ts

@@ -1,6 +1,7 @@
 import { AiContext } from "../ai/AiTerminal";
 import { EditContextType } from "../client/editContext";
-import { ItemDescriptor } from "../pageModel";
+import { FieldDescriptor, ItemDescriptor } from "../pageModel";
+
 import { ExecutionResult, post } from "./serviceHelper";
 
 export type AiProfile = {
@@ -157,3 +158,14 @@ export async function executeSearch({
 
   return { type: "success", response, data: await response.json() };
 }
+
+export async function generateImage(
+  options: FieldDescriptor & {
+    prompt: string;
+    sessionId: string;
+    pageItem: ItemDescriptor;
+  },
+): Promise<ExecutionResult<any>> {
+  const response = await post("/alpaca/editor/ai/generateImage", options);
+  return response;
+}

package/src/editor/sidebar/ComponentTree.tsx

@@ -474,7 +474,7 @@ export function ComponentTree({}) {
 function renderNode(node: CustomTreeNode) {
   return (
     <div>
-      <div className="font-geist-sans flex items-center gap-2 text-[12px] text-gray-600">
+      <div className="flex items-center gap-2 text-[12px] text-gray-600">
         {typeof node.icon === "string" ? (
           <i className={node.icon}></i>
         ) : (

package/src/editor/sidebar/ViewSelector.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { classNames } from "primereact/utils";
 
 import { useEditContext } from "../client/editContext";
@@ -14,7 +15,7 @@ export function ViewSelector() {
   return (
     <div
       className={cn(
-        "z-10 flex items-center gap-4 bg-gray-100 p-2 shadow-md",
+        "z-10 flex items-center gap-4 bg-neutral-200 p-2 shadow-md",
         editContext?.isMobile ? "flex-row justify-around" : "max-w-11 flex-col",
       )}
     >
@@ -26,9 +27,9 @@ export function ViewSelector() {
             key={i}
             className={classNames(
               editContext?.viewName == x.name
-                ? "active text-gray-900"
-                : "text-gray-400 hover:text-gray-900",
-              "cursor-pointer",
+                ? "active bg-neutral-350 rounded-sm text-neutral-800"
+                : "text-neutral-500 hover:text-gray-900",
+              "cursor-pointer p-1",
             )}
             data-sidebarview-name={x.name}
             onClick={() => {
@@ -37,13 +38,11 @@ export function ViewSelector() {
               }
             }}
           >
-            {typeof x.icon === "string" ? (
-              <i className={classNames(x.icon)} style={{ fontSize: "1rem" }} />
-            ) : (
-              <div className="flex h-5 w-5 items-center justify-center">
-                {x.icon}
-              </div>
-            )}
+            {x.icon &&
+              React.isValidElement(x.icon) &&
+              React.cloneElement(x.icon as React.ReactElement<any>, {
+                className: "w-6 h-6",
+              })}
           </div>
         ))}
     </div>