@alpaca-editor/core 1.0.3896 → 1.0.3898

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

@@ -0,0 +1,301 @@
+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 || limit === 0 || limit === -1) return "No limit";
+    if (!used && used !== 0) return "0%";
+    if (isNaN(used) || isNaN(limit)) return "0%";
+    const percentage = Math.round((used / limit) * 100);
+    return `${percentage}%`;
+  };
+
+  const getQuotaStatus = (used: number, limit: number) => {
+    if (!limit || limit === 0 || limit === -1) return "unlimited";
+    if (!used && used !== 0) return "ok";
+    if (isNaN(used) || isNaN(limit)) return "ok";
+    const percentage = (used / limit) * 100;
+    if (percentage >= 100) return "exceeded";
+    if (percentage >= 90) return "warning";
+    if (percentage >= 75) return "caution";
+    return "ok";
+  };
+
+  const getProgressWidth = (used: number, limit: number) => {
+    if (
+      !limit ||
+      limit === 0 ||
+      limit === -1 ||
+      !used ||
+      isNaN(used) ||
+      isNaN(limit)
+    )
+      return 0;
+    return Math.min(100, (used / limit) * 100);
+  };
+
+  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">
+      {/* Token Usage Box */}
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h3 className="mb-3 text-lg font-semibold text-gray-800">
+          Token Usage
+        </h3>
+        <div className="space-y-4">
+          {/* Total Token Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Total Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.totalTokens.toLocaleString()} /{" "}
+                {quotaInfo.limits.totalTokens &&
+                quotaInfo.limits.totalTokens > 0
+                  ? quotaInfo.limits.totalTokens.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.totalTokens &&
+              quotaInfo.limits.totalTokens > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.totalTokens,
+                        quotaInfo.limits.totalTokens,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.totalTokens,
+                              quotaInfo.limits.totalTokens,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.totalTokens,
+                                quotaInfo.limits.totalTokens,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {formatQuotaPercentage(
+                quotaInfo.usage.totalTokens,
+                quotaInfo.limits.totalTokens,
+              )}{" "}
+              used
+            </p>
+          </div>
+
+          {/* Daily Token Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Daily Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.dailyTokens.toLocaleString()} /{" "}
+                {quotaInfo.limits.dailyTokens &&
+                quotaInfo.limits.dailyTokens > 0
+                  ? quotaInfo.limits.dailyTokens.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.dailyTokens &&
+              quotaInfo.limits.dailyTokens > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.dailyTokens,
+                        quotaInfo.limits.dailyTokens,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.dailyTokens,
+                              quotaInfo.limits.dailyTokens,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.dailyTokens,
+                                quotaInfo.limits.dailyTokens,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {quotaInfo.limits.dailyTokens === -1
+                ? "No daily limit"
+                : `${formatQuotaPercentage(
+                    quotaInfo.usage.dailyTokens,
+                    quotaInfo.limits.dailyTokens,
+                  )} used today`}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Image Usage Box */}
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h3 className="mb-3 text-lg font-semibold text-gray-800">
+          Image Usage
+        </h3>
+        <div className="space-y-4">
+          {/* Total Image Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Total Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.totalImages.toLocaleString()} /{" "}
+                {quotaInfo.limits.totalImages &&
+                quotaInfo.limits.totalImages > 0
+                  ? quotaInfo.limits.totalImages.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.totalImages &&
+              quotaInfo.limits.totalImages > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.totalImages,
+                        quotaInfo.limits.totalImages,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.totalImages,
+                              quotaInfo.limits.totalImages,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.totalImages,
+                                quotaInfo.limits.totalImages,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {formatQuotaPercentage(
+                quotaInfo.usage.totalImages,
+                quotaInfo.limits.totalImages,
+              )}{" "}
+              used
+            </p>
+          </div>
+
+          {/* Daily Image Usage */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="text-sm font-medium text-gray-500">
+                Daily Usage
+              </label>
+              <span className="text-sm text-gray-600">
+                {quotaInfo.usage.dailyImages.toLocaleString()} /{" "}
+                {quotaInfo.limits.dailyImages &&
+                quotaInfo.limits.dailyImages > 0
+                  ? quotaInfo.limits.dailyImages.toLocaleString()
+                  : "∞"}
+              </span>
+            </div>
+            {quotaInfo.limits.dailyImages &&
+              quotaInfo.limits.dailyImages > 0 && (
+                <div className="h-2 w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-2 rounded-full ${
+                      getQuotaStatus(
+                        quotaInfo.usage.dailyImages,
+                        quotaInfo.limits.dailyImages,
+                      ) === "exceeded"
+                        ? "bg-red-500"
+                        : getQuotaStatus(
+                              quotaInfo.usage.dailyImages,
+                              quotaInfo.limits.dailyImages,
+                            ) === "warning"
+                          ? "bg-orange-500"
+                          : getQuotaStatus(
+                                quotaInfo.usage.dailyImages,
+                                quotaInfo.limits.dailyImages,
+                              ) === "caution"
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                    }`}
+                    style={{
+                      width: `${getProgressWidth(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages)}%`,
+                    }}
+                  ></div>
+                </div>
+              )}
+            <p className="mt-1 text-xs text-gray-500">
+              {quotaInfo.limits.dailyImages === -1
+                ? "No daily limit"
+                : `${formatQuotaPercentage(
+                    quotaInfo.usage.dailyImages,
+                    quotaInfo.limits.dailyImages,
+                  )} used today`}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Quota Status Summary */}
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <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>
+  );
+}

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/control-center/WebSocketMessages.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useEditContext } from "../client/editContext";
+import { WebSocketMessage } from "../client/EditorClient";
+
+export function WebSocketMessages() {
+  const editContext = useEditContext();
+  const [expandedMessages, setExpandedMessages] = useState<Set<string>>(
+    new Set(),
+  );
+  const [autoScroll, setAutoScroll] = useState(true);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Get messages from central store
+  const messages = editContext?.webSocketMessages || [];
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (autoScroll && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, autoScroll]);
+
+  const toggleExpanded = (messageId: string) => {
+    setExpandedMessages((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(messageId)) {
+        newSet.delete(messageId);
+      } else {
+        newSet.add(messageId);
+      }
+      return newSet;
+    });
+  };
+
+  const formatTimestamp = (isoString: string) => {
+    const date = new Date(isoString);
+    return (
+      date.toLocaleTimeString() +
+      "." +
+      date.getMilliseconds().toString().padStart(3, "0")
+    );
+  };
+
+  const getMessageTypeColor = (type: string) => {
+    const colors: { [key: string]: string } = {
+      "active-sessions": "bg-blue-100 text-blue-800",
+      "item-deleted": "bg-red-100 text-red-800",
+      "item-changed": "bg-yellow-100 text-yellow-800",
+      "item-version-added": "bg-green-100 text-green-800",
+      "edit-operation": "bg-purple-100 text-purple-800",
+      "executing-field-action": "bg-orange-100 text-orange-800",
+      "comment-updated": "bg-cyan-100 text-cyan-800",
+      "comment-deleted": "bg-red-100 text-red-800",
+      "suggested-edit-updated": "bg-indigo-100 text-indigo-800",
+      "suggested-edit-deleted": "bg-red-100 text-red-800",
+      "update-quota": "bg-gray-100 text-gray-800",
+    };
+    return colors[type] || "bg-gray-100 text-gray-800";
+  };
+
+  const clearMessages = () => {
+    editContext?.clearWebSocketMessages();
+  };
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10;
+    setAutoScroll(isAtBottom);
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-gray-200 p-4">
+        <div className="flex items-center gap-2">
+          <i className="pi pi-comments text-lg" />
+          <h3 className="text-lg font-semibold">WebSocket Messages</h3>
+          <span className="rounded bg-gray-100 px-2 py-1 text-sm text-gray-800">
+            {messages.length}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="flex items-center gap-1 text-sm">
+            <input
+              type="checkbox"
+              checked={autoScroll}
+              onChange={(e) => setAutoScroll(e.target.checked)}
+              className="rounded"
+            />
+            Auto-scroll
+          </label>
+          <button
+            onClick={clearMessages}
+            className="rounded bg-red-500 px-3 py-1 text-sm text-white hover:bg-red-600"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      {/* Messages List */}
+      <div
+        ref={containerRef}
+        className="flex-1 space-y-2 overflow-y-auto p-4"
+        onScroll={handleScroll}
+      >
+        {messages.length === 0 ? (
+          <div className="py-8 text-center text-gray-500">
+            No WebSocket messages received yet
+          </div>
+        ) : (
+          messages.map((message) => (
+            <div key={message.id} className="rounded-lg border border-gray-200">
+              <div
+                className="flex cursor-pointer items-center justify-between p-3 hover:bg-gray-50"
+                onClick={() => toggleExpanded(message.id)}
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <span className="font-mono text-xs text-gray-500">
+                    {formatTimestamp(message.timestamp)}
+                  </span>
+                  <span
+                    className={`rounded px-2 py-1 text-xs font-medium ${getMessageTypeColor(message.type)}`}
+                  >
+                    {message.type}
+                  </span>
+                  <span className="truncate text-sm text-gray-600">
+                    {typeof message.payload === "object"
+                      ? Object.keys(message.payload).join(", ")
+                      : String(message.payload)}
+                  </span>
+                </div>
+                <i
+                  className={`pi ${expandedMessages.has(message.id) ? "pi-chevron-up" : "pi-chevron-down"} text-gray-400`}
+                />
+              </div>
+
+              {expandedMessages.has(message.id) && (
+                <div className="border-t border-gray-200 bg-gray-50 p-3">
+                  <pre className="overflow-x-auto font-mono text-xs break-words whitespace-pre-wrap">
+                    {message.rawMessage}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+    </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,7 +1,8 @@
 import { AiContext } from "../ai/AiTerminal";
 import { EditContextType } from "../client/editContext";
-import { ItemDescriptor } from "../pageModel";
-import { ExecutionResult, post } from "./serviceHelper";
+import { FieldDescriptor, ItemDescriptor } from "../pageModel";
+
+import { ExecutionResult, get, post } from "./serviceHelper";
 
 export type AiProfile = {
   id: string;
@@ -157,3 +158,17 @@ 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;
+}
+export async function requestQuota() {
+  await get("/alpaca/editor/ai/requestQuota");
+}

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>
         ) : (