@jxsuite/studio 0.19.0 → 0.21.0

package/src/panels/ai-panel.js

@@ -0,0 +1,406 @@
+/**
+ * Ai-panel.js — Claude AI Assistant tab for the right panel
+ *
+ * Uses QuikChat for the chat UI with Claude Agent SDK streaming via SSE.
+ */
+
+import { html, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import quikchat from "quikchat/md";
+import { getPlatform } from "../platform.js";
+import { reloadFileInTab } from "../files/files.js";
+
+// ─── State (module-level, persists across tab switches) ─────────────────────
+
+/**
+ * @type {{
+ *   role: string;
+ *   content: string;
+ *   toolUse?: { tool: string; input?: Record<string, unknown> };
+ * }[]}
+ */
+let messages = [];
+let streaming = false;
+let sessionId = /** @type {string | null} */ (null);
+let authStatus = /** @type {"authenticated" | "unauthenticated" | "checking" | "unknown"} */ (
+  "unknown"
+);
+let authError = "";
+let currentAssistantText = "";
+let eventSource = /** @type {EventSource | null} */ (null);
+let mounted = false;
+
+/** @type {any} */
+let chatInstance = null;
+/** @type {Element | null} */
+let chatContainerEl = null;
+/** @type {HTMLElement | null} */
+let _quikChatEl = null;
+let currentStreamMsgId = /** @type {number | null} */ (null);
+let streamStarted = false;
+/** @type {Set<string>} */
+let pendingFileReloads = new Set();
+
+// ─── Lifecycle ──────────────────────────────────────────────────────────────
+
+export function mountAiPanel() {
+  if (mounted) return;
+  mounted = true;
+  checkAuth();
+}
+
+function rerenderPanel() {
+  const { render } = /** @type {any} */ (/** @type {any} */ (globalThis).__jxRightPanelRender) ||
+  {};
+  if (render) render();
+  requestAnimationFrame(() => mountQuikChat());
+}
+
+export function registerRightPanelRender(/** @type {Function} */ fn) {
+  /** @type {any} */ (globalThis).__jxRightPanelRender = { render: fn };
+}
+
+// ─── QuikChat Mount ────────────────────────────────────────────────────────
+
+export function mountQuikChat() {
+  const container = _quikChatEl;
+  if (!container) return;
+  if (chatInstance && chatContainerEl === container) return;
+
+  chatInstance = new quikchat(
+    container,
+    (/** @type {any} */ _chat, /** @type {string} */ msg) => {
+      handleUserSend(msg);
+    },
+    {
+      theme: "quikchat-theme-dark",
+      titleArea: { show: false },
+      showTimestamps: false,
+      messagesArea: { alternating: false },
+    },
+  );
+  chatContainerEl = container;
+
+  replayMessages();
+
+  if (streaming) {
+    chatInstance.inputAreaSetEnabled(false);
+  }
+}
+
+function replayMessages() {
+  if (!chatInstance || !messages.length) return;
+  for (const msg of messages) {
+    if (msg.role === "user") {
+      chatInstance.messageAddNew(msg.content, "You", "right", "user");
+    } else if (msg.role === "tool" && msg.toolUse) {
+      chatInstance.messageAddNew(
+        formatToolLabel(msg.toolUse.tool, msg.toolUse.input),
+        "",
+        "left",
+        "tool",
+      );
+    } else {
+      chatInstance.messageAddNew(msg.content, "", "left", "assistant");
+    }
+  }
+  if (streaming && currentAssistantText) {
+    currentStreamMsgId = chatInstance.messageAddNew(currentAssistantText, "", "left", "assistant");
+    streamStarted = true;
+  }
+}
+
+// ─── Auth ───────────────────────────────────────────────────────────────────
+
+async function checkAuth() {
+  authStatus = "checking";
+  rerenderPanel();
+  try {
+    const plat = getPlatform();
+    const result = await plat.aiAuthStatus();
+    authStatus = result.authenticated ? "authenticated" : "unauthenticated";
+    authError = result.error || "";
+  } catch (err) {
+    authStatus = "unauthenticated";
+    authError = String(err);
+  }
+  rerenderPanel();
+}
+
+// ─── Messaging ──────────────────────────────────────────────────────────────
+
+/** @param {string} text */
+async function handleUserSend(text) {
+  if (!text.trim() || streaming) return;
+
+  messages.push({ role: "user", content: text });
+  streaming = true;
+  currentAssistantText = "";
+  streamStarted = false;
+
+  if (chatInstance) {
+    currentStreamMsgId = chatInstance.messageAddTypingIndicator("");
+    chatInstance.inputAreaSetEnabled(false);
+  }
+
+  rerenderPanel();
+
+  const plat = getPlatform();
+
+  try {
+    if (!sessionId) {
+      const result = await plat.aiCreateSession({ message: text });
+      sessionId = result.id;
+      await connectStream(/** @type {string} */ (sessionId));
+    } else {
+      await plat.aiSendMessage(sessionId, text);
+    }
+  } catch (err) {
+    if (chatInstance && currentStreamMsgId != null) {
+      chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${err}`);
+    }
+    messages.push({ role: "assistant", content: `Error: ${err}` });
+    streaming = false;
+    if (chatInstance) chatInstance.inputAreaSetEnabled(true);
+    rerenderPanel();
+  }
+}
+
+function stop() {
+  if (!sessionId) return;
+  const plat = getPlatform();
+  plat.aiStopSession(sessionId);
+  finishStream();
+}
+
+function newChat() {
+  if (sessionId) {
+    const plat = getPlatform();
+    plat.aiDeleteSession(sessionId);
+  }
+  disconnectStream();
+  messages = [];
+  sessionId = null;
+  streaming = false;
+  currentAssistantText = "";
+  currentStreamMsgId = null;
+  streamStarted = false;
+  pendingFileReloads.clear();
+  if (chatInstance) {
+    chatInstance.historyImport([]);
+    chatInstance.inputAreaSetEnabled(true);
+  }
+  rerenderPanel();
+}
+
+// ─── SSE Stream ─────────────────────────────────────────────────────────────
+
+async function connectStream(/** @type {string} */ id) {
+  disconnectStream();
+  const plat = getPlatform();
+  const url = await Promise.resolve(plat.aiStreamUrl(id));
+  eventSource = new EventSource(url);
+
+  eventSource.addEventListener("stream_event", (e) => {
+    try {
+      const data = JSON.parse(e.data);
+      const evt = data.event;
+      if (evt?.type === "content_block_delta" && evt.delta?.type === "text_delta") {
+        const token = evt.delta.text;
+        currentAssistantText += token;
+        if (chatInstance && currentStreamMsgId != null) {
+          if (!streamStarted) {
+            chatInstance.messageReplaceContent(currentStreamMsgId, currentAssistantText);
+            streamStarted = true;
+          } else {
+            chatInstance.messageAppendContent(currentStreamMsgId, token);
+          }
+        }
+      }
+    } catch {}
+  });
+
+  eventSource.addEventListener("assistant", (e) => {
+    try {
+      handleAssistantMessage(JSON.parse(e.data));
+    } catch {}
+  });
+
+  eventSource.addEventListener("result", (e) => {
+    try {
+      const data = JSON.parse(e.data);
+      if (data.result && data.is_error) {
+        if (chatInstance && currentStreamMsgId != null) {
+          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.result}`);
+        }
+        currentAssistantText = `Error: ${data.result}`;
+      }
+    } catch {}
+    finishStream();
+  });
+
+  eventSource.addEventListener("done", () => {
+    finishStream();
+  });
+
+  eventSource.addEventListener("error", (e) => {
+    try {
+      const data = JSON.parse(/** @type {MessageEvent} */ (e).data);
+      if (data.error) {
+        if (chatInstance && currentStreamMsgId != null) {
+          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.error}`);
+        }
+        currentAssistantText = `Error: ${data.error}`;
+      }
+    } catch {}
+    finishStream();
+  });
+
+  eventSource.onerror = () => {
+    finishStream();
+  };
+}
+
+function finishStream() {
+  if (!streaming) return;
+  if (currentAssistantText) {
+    messages.push({ role: "assistant", content: currentAssistantText });
+    currentAssistantText = "";
+  }
+  streaming = false;
+  currentStreamMsgId = null;
+  streamStarted = false;
+  if (chatInstance) chatInstance.inputAreaSetEnabled(true);
+
+  if (pendingFileReloads.size) {
+    for (const fp of pendingFileReloads) reloadFileInTab(fp);
+    pendingFileReloads.clear();
+  }
+
+  rerenderPanel();
+}
+
+function disconnectStream() {
+  if (eventSource) {
+    eventSource.close();
+    eventSource = null;
+  }
+}
+
+/** @param {any} data */
+function handleAssistantMessage(data) {
+  const content = data.message?.content || data.content;
+  if (!content) return;
+
+  let text = "";
+  const toolBlocks = [];
+
+  for (const block of content) {
+    if (block.type === "text") {
+      text += block.text;
+    } else if (block.type === "tool_use") {
+      toolBlocks.push({ tool: block.name, input: block.input });
+      if ((block.name === "Edit" || block.name === "Write") && block.input) {
+        const fp = block.input.file_path || block.input.path;
+        if (fp) pendingFileReloads.add(String(fp));
+      }
+    }
+  }
+
+  if (toolBlocks.length) {
+    if (currentAssistantText) {
+      messages.push({ role: "assistant", content: currentAssistantText });
+    }
+    for (const t of toolBlocks) {
+      messages.push({ role: "tool", content: "", toolUse: t });
+      if (chatInstance) {
+        chatInstance.messageAddNew(formatToolLabel(t.tool, t.input), "", "left", "tool");
+      }
+    }
+  }
+
+  currentAssistantText = text;
+  if (chatInstance) {
+    currentStreamMsgId = chatInstance.messageAddNew(text || "", "", "left", "assistant");
+    streamStarted = !!text;
+  }
+}
+
+// ─── Tool Label Formatting ─────────────────────────────────────────────────
+
+/**
+ * @param {string} tool
+ * @param {Record<string, unknown>} [input]
+ */
+function formatToolLabel(tool, input) {
+  switch (tool) {
+    case "Edit":
+    case "Write":
+      return `📝 ${tool}: ${input?.file_path || input?.path || "file"}`;
+    case "Read":
+      return `📖 Read: ${input?.file_path || input?.path || "file"}`;
+    case "Bash":
+      return `⚡ Run: ${truncate(String(input?.command || ""), 50)}`;
+    case "Glob":
+      return `🔍 Glob: ${input?.pattern || ""}`;
+    case "Grep":
+      return `🔍 Grep: ${truncate(String(input?.pattern || ""), 40)}`;
+    default:
+      return `🔧 ${tool}`;
+  }
+}
+
+/** @param {string} s @param {number} max */
+function truncate(s, max) {
+  return s.length > max ? s.slice(0, max) + "…" : s;
+}
+
+// ─── Template ───────────────────────────────────────────────────────────────
+
+/** @returns {import("lit-html").TemplateResult} */
+export function renderAiPanelTemplate() {
+  if (authStatus === "checking" || authStatus === "unknown") {
+    return html`<div class="ai-tab-body">
+      <div class="ai-status-center">Checking authentication...</div>
+    </div>`;
+  }
+
+  if (authStatus === "unauthenticated") {
+    return html`
+      <div class="ai-tab-body">
+        <div class="ai-status-center">
+          <sp-icon-artboard style="font-size:32px"></sp-icon-artboard>
+          <div>Claude authentication required</div>
+          <div style="font-size:11px;color:var(--spectrum-global-color-gray-600)">
+            Run the following in your terminal:
+          </div>
+          <code class="ai-code-snippet">npx @anthropic-ai/claude-code login</code>
+          ${authError
+            ? html`<sp-help-text variant="negative">${authError}</sp-help-text>`
+            : nothing}
+          <sp-button size="s" variant="primary" @click=${checkAuth}>Retry</sp-button>
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="ai-tab-body">
+      <div class="ai-toolbar">
+        ${streaming
+          ? html`<sp-action-button size="xs" @click=${stop}>Stop</sp-action-button>`
+          : nothing}
+        <sp-action-button size="xs" quiet @click=${newChat}>
+          <sp-icon-add slot="icon"></sp-icon-add>
+          New Chat
+        </sp-action-button>
+      </div>
+      <div
+        id="ai-quikchat"
+        ${ref((el) => {
+          _quikChatEl = /** @type {HTMLElement | null} */ (el || null);
+        })}
+      ></div>
+    </div>
+  `;
+}

package/src/panels/block-action-bar.js

@@ -5,11 +5,12 @@
 
 import { html, render as litRender, nothing } from "lit-html";
 import { styleMap } from "lit-html/directives/style-map.js";
+import { ref } from "lit-html/directives/ref.js";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
 import { getNodeAtPath, nodeLabel, parentElementPath, childIndex } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateMoveNode } from "../tabs/transact.js";
+import { transactDoc, mutateMoveNode, mutateUpdateProperty } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-edit.js";
 import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
@@ -17,13 +18,15 @@ import { componentRegistry } from "../files/components.js";
 import { convertToComponent } from "../editor/convert-to-component.js";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 import { getLayerSlot } from "../ui/layers.js";
+import { showSlashMenu } from "../editor/slash-menu.js";
+import { getConvertTargets } from "../editor/convert-targets.js";
 
 /**
  * @typedef {import("../state.js").StudioState} StudioState
  *
  * @typedef {import("../state.js").JxPath} JxPath
  *
- * @typedef {{ command: string; tag: string; label: string; icon: string; shortcut?: string }} InlineAction
+ * @typedef {import("../editor/inline-edit.js").InlineAction} InlineAction
  */
 
 /**
@@ -70,9 +73,29 @@ const formatIconMap = /** @type {Record<string, import("lit-html").TemplateResul
 function onBarMousedown(e) {
   if (/** @type {HTMLElement} */ (e.target).closest("sp-textfield")) return;
   if (/** @type {HTMLElement} */ (e.target).closest(".bar-drag-handle")) return;
+  if (/** @type {HTMLElement} */ (e.target).closest(".bar-tag--interactive")) return;
   e.preventDefault();
 }
 
+/**
+ * @param {MouseEvent} e
+ * @param {import("../editor/convert-targets.js").SlashCommand[]} targets
+ * @param {JxPath} selection
+ */
+function onTagBadgeClick(e, targets, selection) {
+  e.stopPropagation();
+  const anchorEl = /** @type {HTMLElement} */ (e.currentTarget);
+  showSlashMenu(anchorEl, "", {
+    showFilter: targets.length > 6,
+    commands: targets,
+    onSelect: (cmd) => {
+      transactDoc(activeTab.value, (t) => {
+        mutateUpdateProperty(t, selection, "tagName", cmd.tag);
+      });
+    },
+  });
+}
+
 /** Saved selection range for format button mousedown→click flow */
 function captureSelectionRange() {
   const sel = window.getSelection();
@@ -182,7 +205,7 @@ function applyInlineFormat(action) {
     code: "code",
   };
 
-  const tag = cmdToTag[action.command];
+  const tag = action.command ? cmdToTag[action.command] : undefined;
   if (tag) {
     const editableRoot = getActiveElement();
     toggleInlineFormat(tag, editableRoot);
@@ -226,9 +249,11 @@ function showLinkPopover(anchorBtn) {
 
   const rect = anchorBtn.getBoundingClientRect();
 
+  /** @type {HTMLInputElement | null} */
+  let _linkField = null;
+
   const onApply = () => {
-    const field = /** @type {HTMLInputElement | null} */ (host.querySelector("sp-textfield"));
-    const url = field?.value || "";
+    const url = _linkField?.value || "";
     if (existingLink) {
       existingLink.setAttribute("href", url);
     } else if (url) {
@@ -272,6 +297,10 @@ function showLinkPopover(anchorBtn) {
           style="width:200px"
           value=${existingLink?.getAttribute("href") || ""}
           @keydown=${onKeydown}
+          ${ref((el) => {
+            _linkField = /** @type {HTMLInputElement | null} */ (el || null);
+            if (el) requestAnimationFrame(() => /** @type {HTMLElement} */ (el).focus());
+          })}
         ></sp-textfield>
         <sp-action-button size="xs" @click=${onApply}>
           ${existingLink ? "Update" : "Apply"}
@@ -283,10 +312,6 @@ function showLinkPopover(anchorBtn) {
     `,
     host,
   );
-
-  requestAnimationFrame(
-    () => /** @type {HTMLElement | null} */ (host.querySelector("sp-textfield"))?.focus(),
-  );
 }
 
 /** Move the selected node up (swap with previous sibling). */
@@ -360,6 +385,21 @@ export function renderBlockActionBar() {
     ? actions.filter((a) => isTagActiveInSelection(a.tag, el)).map((a) => a.tag)
     : [];
 
+  // Conversion targets for badge click
+  const isComponent =
+    node.tagName?.includes("-") &&
+    componentRegistry.some((/** @type {{ tagName: string }} */ c) => c.tagName === node.tagName);
+  const isEmpty =
+    !node.textContent &&
+    (!node.children ||
+      node.children.length === 0 ||
+      (Array.isArray(node.children) &&
+        node.children.length === 1 &&
+        typeof node.children[0] === "object" &&
+        node.children[0]?.tagName === "br"));
+  const convertTargets = !isComponent ? getConvertTargets(tag, isEmpty) : [];
+  const badgeInteractive = convertTargets.length > 0;
+
   litRender(
     html`
       <div
@@ -369,10 +409,34 @@ export function renderBlockActionBar() {
       >
         ${selection.length >= 2 ? renderParentSelector() : nothing}
 
-        <span class="bar-tag">${node.$id || (node.tagName ?? "div")}</span>
+        <span
+          class="bar-tag${badgeInteractive ? " bar-tag--interactive" : ""}"
+          @click=${badgeInteractive
+            ? (/** @type {MouseEvent} */ e) => onTagBadgeClick(e, convertTargets, selection)
+            : nothing}
+          >${node.$id || (node.tagName ?? "div")}</span
+        >
 
         ${selection.length >= 2
-          ? html`<span class="bar-drag-handle" title="Drag to reorder">⠿</span>`
+          ? html`<span
+              class="bar-drag-handle"
+              title="Drag to reorder"
+              ${ref((el) => {
+                if (!el) return;
+                if (view.selDragCleanup) {
+                  view.selDragCleanup();
+                  view.selDragCleanup = null;
+                }
+                view.selDragCleanup = draggable({
+                  element: /** @type {HTMLElement} */ (el),
+                  getInitialData: () => ({
+                    type: "tree-node",
+                    path: activeTab.value?.session.selection,
+                  }),
+                });
+              })}
+              >⠿</span
+            >`
           : nothing}
         ${selection.length >= 2 ? renderMoveArrows() : nothing}
         ${selection.length >= 2 && node.tagName
@@ -423,7 +487,7 @@ export function renderBlockActionBar() {
                       @mousedown=${captureSelectionRange}
                       @click=${(/** @type {MouseEvent} */ e) => onFormatClick(e, action)}
                     >
-                      ${formatIconMap[action.icon] ?? nothing}
+                      ${action.icon ? (formatIconMap[action.icon] ?? nothing) : nothing}
                     </sp-action-button>
                   `,
                 )}
@@ -437,27 +501,12 @@ export function renderBlockActionBar() {
 
   // Post-render side effects
   requestAnimationFrame(() => {
-    const bar = view.blockActionBarEl?.firstElementChild;
+    const bar = /** @type {HTMLElement | null} */ (view.blockActionBarEl?.firstElementChild);
     if (!bar) return;
     // Clamp to window
     const barRect = bar.getBoundingClientRect();
     if (barRect.right > window.innerWidth) {
       bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
     }
-    // Attach drag handle
-    const currentTab = activeTab.value;
-    if (currentTab?.session.selection && currentTab.session.selection.length >= 2) {
-      const handle = bar.querySelector(".bar-drag-handle");
-      if (handle) {
-        if (view.selDragCleanup) {
-          view.selDragCleanup();
-          view.selDragCleanup = null;
-        }
-        view.selDragCleanup = draggable({
-          element: handle,
-          getInitialData: () => ({ type: "tree-node", path: activeTab.value?.session.selection }),
-        });
-      }
-    }
   });
 }

package/src/panels/canvas-dnd.js

@@ -16,11 +16,15 @@ import { effectiveZoom } from "../canvas/canvas-helpers.js";
 
 /**
  * @typedef {{
+ *   mediaName: string | null;
+ *   element: HTMLElement | null;
  *   canvas: HTMLElement;
- *   overlayClk: HTMLElement;
  *   overlay: HTMLElement;
+ *   overlayClk: HTMLElement;
  *   viewport: HTMLElement;
+ *   scrollContainer: HTMLElement | null;
  *   dropLine: HTMLElement;
+ *   _width: number | null;
  * }} CanvasPanel
  *
  * @typedef {(string | number)[]} JxPath
@@ -56,7 +60,9 @@ export function registerPanelDnD(panel) {
     onDrop() {
       _activeDropEl?.classList.remove("canvas-drop-target");
       _activeDropEl = null;
-      for (const p of canvasPanels) p.dropLine.style.display = "none";
+      for (const p of canvasPanels) {
+        if (p.dropLine) p.dropLine.style.display = "none";
+      }
       view.lastDragInput = null;
       for (const el of canvas.querySelectorAll("*")) {
         /** @type {HTMLElement} */ (el).style.pointerEvents = "none";