@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/ai-panel.ts

@@ -33,17 +33,29 @@ let currentAssistantText = "";
 let eventSource = null as EventSource | null;
 let mounted = false;
 
-let chatInstance: any = null;
+/** Minimal surface of the untyped quikchat library that this panel uses. */
+interface QuikChatInstance {
+  messageAddNew: (text: string, sender: string, side: string, role?: string) => number;
+  messageAddTypingIndicator: (text: string) => number;
+  messageReplaceContent: (id: number, text: string) => void;
+  messageAppendContent: (id: number, text: string) => void;
+  inputAreaSetEnabled: (enabled: boolean) => void;
+  historyImport: (history: unknown[]) => void;
+}
+
+let chatInstance: QuikChatInstance | null = null;
 let chatContainerEl: Element | null = null;
 let _quikChatEl: HTMLElement | null = null;
 let currentStreamMsgId = null as number | null;
 let streamStarted = false;
-let pendingFileReloads: Set<string> = new Set();
+const pendingFileReloads = new Set<string>();
 
 // ─── Lifecycle ──────────────────────────────────────────────────────────────
 
 export function mountAiPanel() {
-  if (mounted) return;
+  if (mounted) {
+    return;
+  }
   mounted = true;
   checkAuth();
 }
@@ -54,7 +66,9 @@ const _g = globalThis as unknown as {
 
 function rerenderPanel() {
   const { render } = _g.__jxRightPanelRender || {};
-  if (render) render();
+  if (render) {
+    render();
+  }
   requestAnimationFrame(() => mountQuikChat());
 }
 
@@ -66,19 +80,23 @@ export function registerRightPanelRender(fn: () => void) {
 
 export function mountQuikChat() {
   const container = _quikChatEl;
-  if (!container) return;
-  if (chatInstance && chatContainerEl === container) return;
+  if (!container) {
+    return;
+  }
+  if (chatInstance && chatContainerEl === container) {
+    return;
+  }
 
   chatInstance = new quikchat(
     container,
-    (_chat: any, msg: string) => {
+    (_chat: unknown, msg: string) => {
       handleUserSend(msg);
     },
     {
+      messagesArea: { alternating: false },
+      showTimestamps: false,
       theme: "quikchat-theme-dark",
       titleArea: { show: false },
-      showTimestamps: false,
-      messagesArea: { alternating: false },
     },
   );
   chatContainerEl = container;
@@ -86,12 +104,14 @@ export function mountQuikChat() {
   replayMessages();
 
   if (streaming) {
-    chatInstance.inputAreaSetEnabled(false);
+    chatInstance?.inputAreaSetEnabled(false);
   }
 }
 
 function replayMessages() {
-  if (!chatInstance || !messages.length) return;
+  if (!chatInstance || messages.length === 0) {
+    return;
+  }
   for (const msg of messages) {
     if (msg.role === "user") {
       chatInstance.messageAddNew(msg.content, "You", "right", "user");
@@ -122,9 +142,9 @@ async function checkAuth() {
     const result = await plat.aiAuthStatus();
     authStatus = result.authenticated ? "authenticated" : "unauthenticated";
     authError = result.error || "";
-  } catch (err) {
+  } catch (error) {
     authStatus = "unauthenticated";
-    authError = String(err);
+    authError = String(error);
   }
   rerenderPanel();
 }
@@ -133,9 +153,11 @@ async function checkAuth() {
 
 /** @param {string} text */
 async function handleUserSend(text: string) {
-  if (!text.trim() || streaming) return;
+  if (!text.trim() || streaming) {
+    return;
+  }
 
-  messages.push({ role: "user", content: text });
+  messages.push({ content: text, role: "user" });
   streaming = true;
   currentAssistantText = "";
   streamStarted = false;
@@ -157,19 +179,23 @@ async function handleUserSend(text: string) {
     } else {
       await plat.aiSendMessage(sessionId, text);
     }
-  } catch (err) {
+  } catch (error) {
     if (chatInstance && currentStreamMsgId != null) {
-      chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${err}`);
+      chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${error}`);
     }
-    messages.push({ role: "assistant", content: `Error: ${err}` });
+    messages.push({ content: `Error: ${error}`, role: "assistant" });
     streaming = false;
-    if (chatInstance) chatInstance.inputAreaSetEnabled(true);
+    if (chatInstance) {
+      chatInstance.inputAreaSetEnabled(true);
+    }
     rerenderPanel();
   }
 }
 
 function stop() {
-  if (!sessionId) return;
+  if (!sessionId) {
+    return;
+  }
   const plat = getPlatform();
   plat.aiStopSession(sessionId);
   finishStream();
@@ -258,24 +284,30 @@ async function connectStream(id: string) {
     finishStream();
   });
 
-  eventSource.onerror = () => {
+  eventSource.addEventListener("error", () => {
     finishStream();
-  };
+  });
 }
 
 function finishStream() {
-  if (!streaming) return;
+  if (!streaming) {
+    return;
+  }
   if (currentAssistantText) {
-    messages.push({ role: "assistant", content: currentAssistantText });
+    messages.push({ content: currentAssistantText, role: "assistant" });
     currentAssistantText = "";
   }
   streaming = false;
   currentStreamMsgId = null;
   streamStarted = false;
-  if (chatInstance) chatInstance.inputAreaSetEnabled(true);
+  if (chatInstance) {
+    chatInstance.inputAreaSetEnabled(true);
+  }
 
-  if (pendingFileReloads.size) {
-    for (const fp of pendingFileReloads) reloadFileInTab(fp);
+  if (pendingFileReloads.size > 0) {
+    for (const fp of pendingFileReloads) {
+      reloadFileInTab(fp);
+    }
     pendingFileReloads.clear();
   }
 
@@ -289,10 +321,26 @@ function disconnectStream() {
   }
 }
 
-/** @param {any} data */
-function handleAssistantMessage(data: any) {
+/** SSE payload from the assistant stream: message blocks or a bare content array. */
+interface AssistantMessageData {
+  message?: { content?: AssistantBlock[] };
+  content?: AssistantBlock[];
+}
+
+interface AssistantBlock {
+  type?: string;
+  text?: string;
+  name?: string;
+  input?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/** @param {AssistantMessageData} data */
+function handleAssistantMessage(data: AssistantMessageData) {
   const content = data.message?.content || data.content;
-  if (!content) return;
+  if (!content) {
+    return;
+  }
 
   let text = "";
   const toolBlocks = [];
@@ -300,21 +348,23 @@ function handleAssistantMessage(data: any) {
   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 });
+    } else if (block.type === "tool_use" && typeof block.name === "string") {
+      toolBlocks.push({ tool: block.name, ...(block.input ? { 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 (fp) {
+          pendingFileReloads.add(String(fp));
+        }
       }
     }
   }
 
-  if (toolBlocks.length) {
+  if (toolBlocks.length > 0) {
     if (currentAssistantText) {
-      messages.push({ role: "assistant", content: currentAssistantText });
+      messages.push({ content: currentAssistantText, role: "assistant" });
     }
     for (const t of toolBlocks) {
-      messages.push({ role: "tool", content: "", toolUse: t });
+      messages.push({ content: "", role: "tool", toolUse: t });
       if (chatInstance) {
         chatInstance.messageAddNew(formatToolLabel(t.tool, t.input), "", "left", "tool");
       }
@@ -324,7 +374,7 @@ function handleAssistantMessage(data: any) {
   currentAssistantText = text;
   if (chatInstance) {
     currentStreamMsgId = chatInstance.messageAddNew(text || "", "", "left", "assistant");
-    streamStarted = !!text;
+    streamStarted = Boolean(text);
   }
 }
 
@@ -337,24 +387,30 @@ function handleAssistantMessage(data: any) {
 function formatToolLabel(tool: string, input?: Record<string, unknown>) {
   switch (tool) {
     case "Edit":
-    case "Write":
+    case "Write": {
       return `📝 ${tool}: ${input?.file_path || input?.path || "file"}`;
-    case "Read":
+    }
+    case "Read": {
       return `📖 Read: ${input?.file_path || input?.path || "file"}`;
-    case "Bash":
+    }
+    case "Bash": {
       return `⚡ Run: ${truncate(String(input?.command || ""), 50)}`;
-    case "Glob":
+    }
+    case "Glob": {
       return `🔍 Glob: ${input?.pattern || ""}`;
-    case "Grep":
+    }
+    case "Grep": {
       return `🔍 Grep: ${truncate(String(input?.pattern || ""), 40)}`;
-    default:
+    }
+    default: {
       return `🔧 ${tool}`;
+    }
   }
 }
 
 /** @param {string} s @param {number} max */
 function truncate(s: string, max: number) {
-  return s.length > max ? s.slice(0, max) + "…" : s;
+  return s.length > max ? `${s.slice(0, max)}…` : s;
 }
 
 // ─── Template ───────────────────────────────────────────────────────────────

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

@@ -9,13 +9,13 @@ 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";
+import { childIndex, childList, getNodeAtPath, nodeLabel, parentElementPath } from "../store";
 import { activeTab } from "../workspace/workspace";
-import { transactDoc, mutateMoveNode, mutateUpdateProperty } from "../tabs/transact";
+import { mutateMoveNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
-import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-edit";
+import { getActiveElement, getInlineActions, isEditing } from "../editor/inline-edit";
 import type { InlineAction } from "../editor/inline-edit";
-import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format";
+import { isTagActiveInSelection, toggleInlineFormat } from "../editor/inline-format";
 import { componentRegistry } from "../files/components";
 import { convertToComponent } from "../editor/convert-to-component";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
@@ -24,6 +24,8 @@ import { showSlashMenu } from "../editor/slash-menu";
 import { getConvertTargets } from "../editor/convert-targets";
 
 import type { JxPath } from "../state";
+import type { TemplateResult } from "lit-html";
+import type { SlashCommand } from "../editor/convert-targets.js";
 
 /**
  * @type {{
@@ -53,19 +55,19 @@ export function initBlockActionBar(ctx: {
 
 /** Pre-built icon templates for inline format buttons (avoids unsafeStatic) */
 const formatIconMap = {
+  "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
+  "sp-icon-link": html`<sp-icon-link slot="icon"></sp-icon-link>`,
   "sp-icon-text-bold": html`<sp-icon-text-bold slot="icon"></sp-icon-text-bold>`,
   "sp-icon-text-italic": html`<sp-icon-text-italic slot="icon"></sp-icon-text-italic>`,
-  "sp-icon-text-underline": html`<sp-icon-text-underline slot="icon"></sp-icon-text-underline>`,
   "sp-icon-text-strikethrough": html`<sp-icon-text-strikethrough
     slot="icon"
   ></sp-icon-text-strikethrough>`,
+  "sp-icon-text-subscript": html`<sp-icon-text-subscript slot="icon"></sp-icon-text-subscript>`,
   "sp-icon-text-superscript": html`<sp-icon-text-superscript
     slot="icon"
   ></sp-icon-text-superscript>`,
-  "sp-icon-text-subscript": html`<sp-icon-text-subscript slot="icon"></sp-icon-text-subscript>`,
-  "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
-  "sp-icon-link": html`<sp-icon-link slot="icon"></sp-icon-link>`,
-} as Record<string, import("lit-html").TemplateResult>;
+  "sp-icon-text-underline": html`<sp-icon-text-underline slot="icon"></sp-icon-text-underline>`,
+} as Record<string, TemplateResult>;
 
 /**
  * Prevent the bar from stealing focus from contenteditable
@@ -73,9 +75,15 @@ const formatIconMap = {
  * @param {MouseEvent} e
  */
 function onBarMousedown(e: MouseEvent) {
-  if ((e.target as HTMLElement).closest("sp-textfield")) return;
-  if ((e.target as HTMLElement).closest(".bar-drag-handle")) return;
-  if ((e.target as HTMLElement).closest(".bar-tag--interactive")) return;
+  if ((e.target as HTMLElement).closest("sp-textfield")) {
+    return;
+  }
+  if ((e.target as HTMLElement).closest(".bar-drag-handle")) {
+    return;
+  }
+  if ((e.target as HTMLElement).closest(".bar-tag--interactive")) {
+    return;
+  }
   e.preventDefault();
 }
 
@@ -84,28 +92,26 @@ function onBarMousedown(e: MouseEvent) {
  * @param {import("../editor/convert-targets.js").SlashCommand[]} targets
  * @param {JxPath} selection
  */
-function onTagBadgeClick(
-  e: MouseEvent,
-  targets: import("../editor/convert-targets.js").SlashCommand[],
-  selection: JxPath,
-) {
+function onTagBadgeClick(e: MouseEvent, targets: SlashCommand[], selection: JxPath) {
   e.stopPropagation();
   const anchorEl = e.currentTarget as HTMLElement;
   showSlashMenu(anchorEl, "", {
-    showFilter: targets.length > 6,
     commands: targets,
     onSelect: (cmd) => {
       transactDoc(activeTab.value, (t) => {
         mutateUpdateProperty(t, selection, "tagName", cmd.tag);
       });
     },
+    showFilter: targets.length > 6,
   });
 }
 
 /** Saved selection range for format button mousedown→click flow */
 function captureSelectionRange() {
   const sel = window.getSelection();
-  if (sel && sel.rangeCount) view.savedRange = sel.getRangeAt(0).cloneRange();
+  if (sel && sel.rangeCount) {
+    view.savedRange = sel.getRangeAt(0).cloneRange();
+  }
 }
 
 /**
@@ -133,9 +139,13 @@ function onFormatClick(e: MouseEvent, action: InlineAction) {
 
 function renderParentSelector() {
   const tab = activeTab.value;
-  if (!tab?.session.selection) return nothing;
+  if (!tab?.session.selection) {
+    return nothing;
+  }
   const pPath = parentElementPath(tab.session.selection);
-  if (!pPath) return nothing;
+  if (!pPath) {
+    return nothing;
+  }
   const parentNode = getNodeAtPath(tab.doc.document, pPath);
   return html`
     <sp-action-button
@@ -154,12 +164,14 @@ function renderParentSelector() {
 
 function renderMoveArrows() {
   const tab = activeTab.value;
-  if (!tab?.session.selection) return nothing;
+  if (!tab?.session.selection) {
+    return nothing;
+  }
   const sel = tab.session.selection;
   const idx = childIndex(sel) as number;
   const pPath = parentElementPath(sel);
   const parentNode = pPath ? getNodeAtPath(tab.doc.document, pPath) : null;
-  const siblings = parentNode?.children;
+  const siblings = parentNode ? childList(parentNode) : null;
   return html`
     <sp-action-button
       size="xs"
@@ -196,12 +208,12 @@ function renderMoveArrows() {
 function applyInlineFormat(action: InlineAction) {
   const cmdToTag: Record<string, string> = {
     bold: "strong",
+    code: "code",
     italic: "em",
-    underline: "u",
     strikethrough: "del",
-    superscript: "sup",
     subscript: "sub",
-    code: "code",
+    superscript: "sup",
+    underline: "u",
   };
 
   const tag = action.command ? cmdToTag[action.command] : undefined;
@@ -220,7 +232,9 @@ export function dismissLinkPopover() {
 
 /** Dismiss the block action bar. */
 export function dismissBlockActionBar() {
-  if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
+  if (view.blockActionBarEl) {
+    litRender(nothing, view.blockActionBarEl);
+  }
 }
 
 /** @param {HTMLElement} anchorBtn */
@@ -257,17 +271,22 @@ function showLinkPopover(anchorBtn: HTMLElement) {
   };
 
   const onRemove = () => {
-    if (!existingLink?.parentNode) return;
+    if (!existingLink?.parentNode) {
+      return;
+    }
     const frag = document.createDocumentFragment();
-    while (existingLink.firstChild) frag.appendChild(existingLink.firstChild);
+    while (existingLink.firstChild) {
+      frag.append(existingLink.firstChild);
+    }
     existingLink.parentNode.replaceChild(frag, existingLink);
     litRender(nothing, host);
     renderBlockActionBar();
   };
 
   const onKeydown = (e: KeyboardEvent) => {
-    if (e.key === "Enter") onApply();
-    else if (e.key === "Escape") {
+    if (e.key === "Enter") {
+      onApply();
+    } else if (e.key === "Escape") {
       litRender(nothing, host);
     }
   };
@@ -278,8 +297,8 @@ function showLinkPopover(anchorBtn: HTMLElement) {
         class="link-popover"
         open
         style=${styleMap({
-          position: "fixed",
           left: `${rect.left}px`,
+          position: "fixed",
           top: `${rect.bottom + 4}px`,
           zIndex: "30",
         })}
@@ -292,7 +311,9 @@ function showLinkPopover(anchorBtn: HTMLElement) {
           @keydown=${onKeydown}
           ${ref((el) => {
             _linkField = (el as HTMLInputElement | null) || null;
-            if (el) requestAnimationFrame(() => (el as HTMLElement).focus());
+            if (el) {
+              requestAnimationFrame(() => (el as HTMLElement).focus());
+            }
           })}
         ></sp-textfield>
         <sp-action-button size="xs" @click=${onApply}>
@@ -310,10 +331,14 @@ function showLinkPopover(anchorBtn: HTMLElement) {
 /** Move the selected node up (swap with previous sibling). */
 function moveSelectionUp() {
   const tab = activeTab.value;
-  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  if (!tab?.session.selection || tab.session.selection.length < 2) {
+    return;
+  }
   const sel = tab.session.selection;
   const idx = childIndex(sel) as number;
-  if (idx <= 0) return;
+  if (idx <= 0) {
+    return;
+  }
   const pPath = parentElementPath(sel) as JxPath;
   transactDoc(tab, (t) => mutateMoveNode(t, sel, pPath, idx - 1));
   tab.session.selection = [...pPath, "children", idx - 1];
@@ -322,20 +347,26 @@ function moveSelectionUp() {
 /** Move the selected node down (swap with next sibling). */
 function moveSelectionDown() {
   const tab = activeTab.value;
-  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  if (!tab?.session.selection || tab.session.selection.length < 2) {
+    return;
+  }
   const sel = tab.session.selection;
   const idx = childIndex(sel) as number;
   const pPath = parentElementPath(sel) as JxPath;
   const parentNode = getNodeAtPath(tab.doc.document, pPath);
-  const siblings = parentNode?.children;
-  if (!siblings || idx >= siblings.length - 1) return;
+  const siblings = childList(parentNode);
+  if (idx >= siblings.length - 1) {
+    return;
+  }
   transactDoc(tab, (t) => mutateMoveNode(t, sel, pPath, idx + 2));
   tab.session.selection = [...pPath, "children", idx + 1];
 }
 
 /** Render the unified block action bar above the selected element. */
 export function renderBlockActionBar() {
-  if (!_ctx) return;
+  if (!_ctx) {
+    return;
+  }
   if (!view.blockActionBarEl) {
     view.blockActionBarEl = getLayerSlot("popover", "block-action-bar");
   }
@@ -353,7 +384,7 @@ export function renderBlockActionBar() {
     return;
   }
 
-  const selection = tab.session.selection;
+  const { selection } = tab.session;
   const activePanel = getActivePanel();
   if (!activePanel) {
     litRender(nothing, view.blockActionBarEl);
@@ -382,14 +413,11 @@ export function renderBlockActionBar() {
   const isComponent =
     node.tagName?.includes("-") &&
     componentRegistry.some((/** @type {{ tagName: string }} */ c) => c.tagName === node.tagName);
+  const children = childList(node);
   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"));
+    (children.length === 0 ||
+      (children.length === 1 && typeof children[0] === "object" && children[0]?.tagName === "br"));
   const convertTargets = !isComponent ? getConvertTargets(tag, isEmpty) : [];
   const badgeInteractive = convertTargets.length > 0;
 
@@ -414,17 +442,19 @@ export function renderBlockActionBar() {
           ? html`<span
               class="bar-drag-handle"
               title="Drag to reorder"
-              ${ref((el) => {
-                if (!el) return;
+              ${ref((handleEl) => {
+                if (!handleEl) {
+                  return;
+                }
                 if (view.selDragCleanup) {
                   view.selDragCleanup();
                   view.selDragCleanup = null;
                 }
                 view.selDragCleanup = draggable({
-                  element: el as HTMLElement,
+                  element: handleEl as HTMLElement,
                   getInitialData: () => ({
-                    type: "tree-node",
                     path: activeTab.value?.session.selection,
+                    type: "tree-node",
                   }),
                 });
               })}
@@ -469,7 +499,7 @@ export function renderBlockActionBar() {
                 compact
                 emphasized
                 selects="multiple"
-                selected=${activeValues.length ? JSON.stringify(activeValues) : nothing}
+                selected=${activeValues.length > 0 ? JSON.stringify(activeValues) : nothing}
               >
                 ${actions.map(
                   (action) => html`
@@ -495,7 +525,9 @@ export function renderBlockActionBar() {
   // Post-render side effects
   requestAnimationFrame(() => {
     const bar = view.blockActionBarEl?.firstElementChild as HTMLElement | null;
-    if (!bar) return;
+    if (!bar) {
+      return;
+    }
     // Clamp to window
     const barRect = bar.getBoundingClientRect();
     if (barRect.right > window.innerWidth) {