@jxsuite/studio 0.37.1 → 1.1.0

package/src/panels/ai-chat/chat-markdown.ts

@@ -1,7 +1,7 @@
 /**
  * Chat-markdown.js — memoized markdown rendering for assistant chat messages.
  *
- * Wraps @jxsuite/parser/md-html (sanitized markdown → HTML) with a per-message cache
+ * Wraps @jxsuite/markup/md-html (sanitized markdown → HTML) with a per-message cache
  * keyed by message id + content length, so re-renders during streaming only re-parse
  * the message that actually grew. The HTML goes through unsafeHTML, which is safe here
  * because md-html sanitizes (raw HTML dropped, javascript: URLs stripped).
@@ -12,7 +12,7 @@
 import { html } from "lit-html";
 import type { TemplateResult } from "lit-html";
 import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-import { markdownToHtml } from "@jxsuite/parser/md-html";
+import { markdownToHtml } from "@jxsuite/markup/md-html";
 
 const cache = new Map<string, { len: number; html: string }>();
 

package/src/panels/ai-panel.ts

@@ -16,12 +16,13 @@
  * @license MIT
  */
 
-import { html, render as litRender } from "lit-html";
+import { html, render as litRender, nothing } from "lit-html";
 import type { TemplateResult } from "lit-html";
+import { getPlatform } from "../platform";
 import { effect, effectScope } from "../reactivity";
 import { createDocumentAssistant } from "../services/document-assistant";
 import { hasOpenAiKey } from "../services/ai-settings";
-import { fetchAvailableModels, isProxyConfigured } from "../services/ai-models";
+import { fetchAvailableModels, isManagedProxy, isProxyConfigured } from "../services/ai-models";
 import { createAiCredentialsForm } from "../ui/ai-credentials-form";
 import { clearMarkdownCache } from "./ai-chat/chat-markdown";
 import { renderChatHeader, renderMessageList } from "./ai-chat/chat-view";
@@ -168,11 +169,67 @@ function startEditApiKey() {
   credsForm.startEdit();
 }
 
-/** The OpenAI (or compatible) key + endpoint settings form, shown as a gate when no key is set. */
+// ─── Managed Cloudflare connect (Workers AI) ─────────────────────────────────
+
+let cfConnectBusy = false;
+let cfConnectError = "";
+
+/**
+ * Managed platforms broker Workers AI on the user's own Cloudflare account: offer connecting it as
+ * the keyless alternative whenever the proxy says managed-but-unconfigured and the platform can run
+ * the hosted OAuth flow (the PAL seam — desktop shells can implement cfConnect later).
+ */
+function canOfferManagedConnect(): boolean {
+  return isManagedProxy() && !isProxyConfigured() && Boolean(getPlatform().cfConnect);
+}
+
+async function connectCloudflareForAi() {
+  if (cfConnectBusy) {
+    return;
+  }
+  cfConnectBusy = true;
+  cfConnectError = "";
+  scheduleAiRender();
+  try {
+    const connection = await getPlatform().cfConnect?.();
+    if (connection) {
+      // Re-probe: /models flips to configured once the connection lands, opening the gate.
+      await fetchAvailableModels({ force: true });
+    } else {
+      cfConnectError = "Cloudflare connection was not completed.";
+    }
+  } catch (error) {
+    cfConnectError = error instanceof Error ? error.message : String(error);
+  }
+  cfConnectBusy = false;
+  scheduleAiRender();
+}
+
+function renderManagedConnect() {
+  return html`
+    <div class="ai-managed-connect">
+      <div>Use Workers AI on your own Cloudflare account — no API key needed.</div>
+      <sp-button size="s" ?disabled=${cfConnectBusy} @click=${() => void connectCloudflareForAi()}>
+        ${cfConnectBusy ? "Connecting…" : "Connect Cloudflare"}
+      </sp-button>
+      ${cfConnectError
+        ? html`<div class="ai-managed-connect-error">${cfConnectError}</div>`
+        : nothing}
+      <div class="ai-managed-connect-divider">— or bring your own key —</div>
+    </div>
+  `;
+}
+
+/**
+ * The credentials gate: on managed platforms a keyless "Connect Cloudflare" (Workers AI) option
+ * sits above the OpenAI-compatible key form — both are real, working paths.
+ */
 function renderKeyGate() {
   return html`
     <div class="ai-tab-body">
-      <div class="ai-status-center">${credsForm.render()}</div>
+      <div class="ai-status-center">
+        ${canOfferManagedConnect() ? renderManagedConnect() : nothing} ${credsForm.render()}
+      </div>
     </div>
   `;
 }

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

@@ -606,10 +606,12 @@ export function renderBlockActionBar() {
   const tag = (node.tagName ?? "div").toLowerCase();
 
   // Inline format state, sourced from the iframe's selection snapshot.
-  const { editing, snapshot } = getEditSnapshot();
+  const { editing, editingProp, snapshot } = getEditSnapshot();
   const inlineEditing = editing;
   const actions = getInlineActions(tag) || [];
-  const showFormat = inlineEditing && actions.length > 0;
+  // A prop-bound plain session edits a single plain string — never show the format group (belt and
+  // Braces: component tags have no $inlineActions, so `actions` is empty there anyway).
+  const showFormat = inlineEditing && !editingProp && actions.length > 0;
   const activeValues =
     showFormat && snapshot
       ? actions.filter((a) => snapshot.activeTags.includes(a.tag)).map((a) => a.tag)
@@ -646,7 +648,10 @@ export function renderBlockActionBar() {
           @click=${badgeInteractive
             ? (e: MouseEvent) => onTagBadgeClick(e, convertTargets, selection)
             : nothing}
-          >${isRepeater ? nodeLabel(node) : node.$id || (node.tagName ?? "div")}</span
+          >${isRepeater ? nodeLabel(node) : node.$id || (node.tagName ?? "div")}${inlineEditing &&
+          editingProp
+            ? ` · ${editingProp}`
+            : ""}</span
         >
 
         ${selection.length >= 2

package/src/panels/chat-panel.ts

@@ -0,0 +1,98 @@
+/// <reference lib="dom" />
+/**
+ * Chat-panel.ts — the persistent AI chat sidebar (`#chat-panel` shell region).
+ *
+ * Hosts the assistant UI from ai-panel.ts unconditionally: with no project (welcome screen), with a
+ * project but no open document, and with a document open. The panel is mounted once at studio boot
+ * and never tears down on tab switches — the assistant's module state and DOM (composer draft,
+ * scroll position) persist.
+ *
+ * Deliberately NOT built on createPanelScheduler: ai-panel owns a focus-guard-free rAF render loop
+ * (streaming must repaint while the composer is focused). This module only provides the host
+ * container, the initial paint, and the pending-agent-prompt handoff; ai-panel's watcher drives all
+ * chat-state repaints through the same lit part cache.
+ *
+ * @license MIT
+ */
+
+import { render as litRender } from "lit-html";
+import { effect, effectScope } from "../reactivity";
+import { applyPanelCollapse, view } from "../view";
+import { workspace } from "../workspace/workspace";
+import { consumePendingAgentPrompt, hasPendingAgentPrompt } from "../services/agent-seed";
+import {
+  bindAiPanelHost,
+  mountAiPanel,
+  renderAiPanelTemplate,
+  seedAssistantPrompt,
+} from "./ai-panel";
+
+import type { EffectScope } from "@vue/reactivity";
+
+let _host: HTMLElement | null = null;
+let _container: HTMLElement | null = null;
+let _scope: EffectScope | null = null;
+
+/**
+ * Mount the chat sidebar into its shell region. Idempotent per host: the persistent `.panel-body`
+ * container is created once and bound as the ai-panel render host (lit needs a single render target
+ * for its part cache). A missing host (shell without a #chat-panel region, e.g. reduced test
+ * fixtures) is a no-op.
+ *
+ * @param {HTMLElement | null} host
+ */
+export function mount(host: HTMLElement | null) {
+  if (!host || (_host === host && _container)) {
+    return;
+  }
+  _host = host;
+  _container = document.createElement("div");
+  _container.className = "panel-body";
+  host.textContent = "";
+  host.append(_container);
+
+  mountAiPanel();
+  // The AI panel owns a focus-guard-free rAF render loop into this container so
+  // Streaming repaints while the composer is focused (see ai-panel.ts).
+  bindAiPanelHost(_container);
+  render();
+
+  _scope?.stop();
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      // A pending agent prompt (stored by the New Project flow, possibly from another window) is
+      // Keyed by the absolute project root — consume it as soon as this window adopts that root.
+      const root = workspace.projectRoot;
+      if (!root || !hasPendingAgentPrompt(root)) {
+        return;
+      }
+      if (view.chatPanelCollapsed) {
+        view.chatPanelCollapsed = false;
+        applyPanelCollapse();
+      }
+      const prompt = consumePendingAgentPrompt(root);
+      if (prompt) {
+        // Defer past the current render so the assistant machinery is in place before the send.
+        requestAnimationFrame(() => void seedAssistantPrompt(prompt));
+      }
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+  if (_host) {
+    _host.textContent = "";
+  }
+  _host = null;
+  _container = null;
+}
+
+/** Repaint the assistant template into the persistent container (no-op before mount). */
+export function render() {
+  if (_container) {
+    litRender(renderAiPanelTemplate(), _container);
+  }
+}

package/src/panels/data-grid.ts

@@ -0,0 +1,241 @@
+/// <reference lib="dom" />
+/**
+ * Data section actions — the owner console entry points over the platform's data surface.
+ *
+ * Integration: the settings modal's contributed sections stay fully generic — extension-sections
+ * passes this module's {@link dataSectionActions} into the ContributedSectionOptions.actions slot
+ * for the data-domain sections ("connections"/"data") whenever the platform implements the
+ * protocol's data routes. Those actions surface Test Connection, Push Schema (dry-run plan
+ * confirmation before apply), and Open Data Grid — which opens the grid-tab source picker; table
+ * editing itself lives in the spreadsheet grid tabs (src/grid/), which replaced the old modal grid
+ * at feature parity (paging, cell edit, add/delete row) and added batch save with undo.
+ */
+
+import { html, nothing } from "lit-html";
+import { openModal } from "../ui/layers";
+import { dataSurfaceAvailable, pushSchema, testConnection } from "../services/data-service";
+import { openGridSourcePicker } from "../grid/grid-open";
+import type { TemplateResult } from "lit-html";
+import type { DataConnectionTestResult, DataPushResult } from "../types";
+import type { SectionActionsContext } from "../settings/contributed-section";
+
+// ─── Grid opening (delegates to the grid-tab source picker) ──────────────────
+
+/** Reset all module UI state and close any open surfaces (test hook / project switch). */
+export function resetDataGridState(): void {
+  actionsState = { pushing: false, testResult: null, testing: null };
+  closePushDialog();
+}
+
+/** True when the platform serves the data grid. */
+export function isDataGridAvailable(): boolean {
+  return dataSurfaceAvailable();
+}
+
+// ─── Push dialog (dry-run plan confirmation before apply) ─────────────────────
+
+interface PushDialogState {
+  handle: ReturnType<typeof openModal>;
+  connection: string | undefined;
+  phase: "loading" | "confirm" | "applying" | "done";
+  plan: DataPushResult | null;
+  result: DataPushResult | null;
+  onDone: () => void;
+}
+
+let pushDialog: PushDialogState | null = null;
+
+/** Close the push dialog (also part of resetDataGridState). */
+function closePushDialog(): void {
+  pushDialog?.handle.close();
+  pushDialog = null;
+}
+
+/** Start a push: dry-run first, then a confirmation dialog gates the apply. */
+export async function startPush(connection: string | undefined, onDone: () => void) {
+  if (pushDialog) {
+    return;
+  }
+  const handle = openModal(html``);
+  pushDialog = { connection, handle, onDone, phase: "loading", plan: null, result: null };
+  renderPushDialog();
+  const plan = await pushSchema({
+    dryRun: true,
+    ...(connection === undefined ? {} : { connection }),
+  });
+  if (!pushDialog) {
+    return;
+  }
+  pushDialog.plan = plan;
+  pushDialog.phase = "confirm";
+  renderPushDialog();
+}
+
+async function applyPush(): Promise<void> {
+  if (!pushDialog) {
+    return;
+  }
+  pushDialog.phase = "applying";
+  renderPushDialog();
+  const result = await pushSchema(
+    pushDialog.connection === undefined ? {} : { connection: pushDialog.connection },
+  );
+  if (!pushDialog) {
+    return;
+  }
+  pushDialog.result = result;
+  pushDialog.phase = "done";
+  renderPushDialog();
+  pushDialog.onDone();
+}
+
+function pushDialogBody(state: PushDialogState): TemplateResult {
+  if (state.phase === "loading" || state.phase === "applying") {
+    return html`<div class="push-dialog-status">
+      ${state.phase === "loading" ? "Compiling plan…" : "Applying…"}
+    </div>`;
+  }
+  const shown = state.phase === "done" ? state.result : state.plan;
+  const steps = shown?.plan ?? [];
+  const warnings = shown?.warnings ?? [];
+  const errors = shown?.errors ?? [];
+  return html`
+    <div class="push-dialog-plan">
+      ${state.phase === "done"
+        ? html`<div class="push-dialog-status">
+            ${shown?.applied ? "Schema applied." : "Push failed."}
+          </div>`
+        : steps.length === 0 && errors.length === 0
+          ? html`<div class="push-dialog-status">Nothing to push — the schema is up to date.</div>`
+          : nothing}
+      <ul class="push-dialog-steps">
+        ${steps.map(
+          (step) => html`<li class="push-step push-step-${step.kind}">${step.summary}</li>`,
+        )}
+      </ul>
+      ${warnings.map((w) => html`<div class="push-dialog-warning">${w}</div>`)}
+      ${errors.map((e) => html`<div class="push-dialog-error">${e}</div>`)}
+    </div>
+  `;
+}
+
+function renderPushDialog(): void {
+  if (!pushDialog) {
+    return;
+  }
+  const state = pushDialog;
+  const confirmable = state.phase === "confirm" && (state.plan?.plan.length ?? 0) > 0;
+  const tpl = html`
+    <sp-underlay open @close=${closePushDialog}></sp-underlay>
+    <div class="settings-modal push-dialog">
+      <div class="settings-modal-header">
+        <h2 class="settings-modal-title">
+          Push Schema${state.connection ? html` — ${state.connection}` : nothing}
+        </h2>
+      </div>
+      <div class="settings-modal-body">${pushDialogBody(state)}</div>
+      <div class="push-dialog-actions">
+        <sp-action-button size="s" class="push-cancel" @click=${closePushDialog}>
+          ${state.phase === "done" ? "Close" : "Cancel"}
+        </sp-action-button>
+        ${confirmable
+          ? html`<sp-action-button
+              size="s"
+              emphasized
+              class="push-apply"
+              @click=${() => void applyPush()}
+              >Apply</sp-action-button
+            >`
+          : nothing}
+      </div>
+    </div>
+  `;
+  state.handle.update(tpl);
+}
+
+// ─── Contributed-section actions (Test / Push / Open grid) ────────────────────
+
+interface ActionsState {
+  /** Connection currently being tested, when any. */
+  testing: string | null;
+  testResult: (DataConnectionTestResult & { connection: string }) | null;
+  pushing: boolean;
+}
+
+let actionsState: ActionsState = { pushing: false, testResult: null, testing: null };
+
+/**
+ * The actions renderer for a data-domain contributed section, or null when the section is not
+ * data-domain or the platform lacks the data routes. Section keys "connections"/"data" are the
+ * connector's host wire contract (the same literals the backend's data routes serve) — the generic
+ * contributed-section renderer itself stays extension-agnostic.
+ *
+ * @param {string} sectionKey
+ * @returns {((ctx: SectionActionsContext) => TemplateResult) | null}
+ */
+export function dataSectionActions(
+  sectionKey: string,
+): ((ctx: SectionActionsContext) => TemplateResult) | null {
+  if ((sectionKey !== "connections" && sectionKey !== "data") || !dataSurfaceAvailable()) {
+    return null;
+  }
+  return (ctx) => renderSectionActions(sectionKey, ctx);
+}
+
+async function runTest(connection: string, rerender: () => void): Promise<void> {
+  actionsState.testing = connection;
+  actionsState.testResult = null;
+  rerender();
+  const result = await testConnection(connection);
+  actionsState.testing = null;
+  actionsState.testResult = { ...result, connection };
+  rerender();
+}
+
+function renderSectionActions(sectionKey: string, ctx: SectionActionsContext): TemplateResult {
+  const { selected, rerender } = ctx;
+  const { testResult } = actionsState;
+  // On the connections section a selected entry scopes both Test and Push to that connection.
+  const pushTarget = sectionKey === "connections" && selected ? selected : undefined;
+  return html`
+    <div class="data-section-actions">
+      ${sectionKey === "connections"
+        ? html`<sp-action-button
+            size="s"
+            class="data-action-test"
+            ?disabled=${!selected || actionsState.testing !== null}
+            @click=${() => {
+              if (selected) {
+                void runTest(selected, rerender);
+              }
+            }}
+          >
+            ${actionsState.testing ? "Testing…" : "Test Connection"}
+          </sp-action-button>`
+        : nothing}
+      <sp-action-button
+        size="s"
+        class="data-action-push"
+        @click=${() => void startPush(pushTarget, rerender)}
+      >
+        Push Schema
+      </sp-action-button>
+      <sp-action-button
+        size="s"
+        class="data-action-grid"
+        @click=${() => void openGridSourcePicker()}
+      >
+        Open Data Grid
+      </sp-action-button>
+      ${testResult
+        ? html`<span
+            class="data-test-result ${testResult.ok ? "ok" : "failed"}"
+            title=${testResult.error ?? ""}
+          >
+            ${testResult.connection}:
+            ${testResult.ok ? "connected" : (testResult.error ?? "failed")}
+          </span>`
+        : nothing}
+    </div>
+  `;
+}

package/src/panels/editors.ts

@@ -14,6 +14,7 @@ import { activeTab } from "../workspace/workspace";
 import { mutateUpdateDef, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { codeService, getFunctionArgs, setLintMarkers } from "../services/code-services";
+import { globalEntries, namedFormulaEntries } from "../ui/formula-catalog";
 
 import type { OxLintDiagnostic } from "../services/code-services";
 import type { JxMutableNode, JxPrototypeDef } from "@jxsuite/schema/types";
@@ -185,7 +186,10 @@ export function registerFunctionCompletions() {
   view._completionRegistered = true;
   monaco.languages.registerCompletionItemProvider("javascript", {
     provideCompletionItems(model, position) {
-      const defs = activeTab.value?.doc.document?.state || {};
+      if (!activeTab.value) {
+        return { suggestions: [] };
+      }
+      const defs = activeTab.value.doc.document?.state || {};
       const word = model.getWordUntilPosition(position);
       const range = {
         endColumn: word.endColumn,
@@ -194,23 +198,45 @@ export function registerFunctionCompletions() {
         startLineNumber: position.lineNumber,
       };
 
-      const suggestions = Object.entries(defs).map(([key, def]) => {
-        let kind = monaco.languages.CompletionItemKind.Variable;
-        if (
-          (def as JxPrototypeDef)?.$prototype === "Function" ||
-          (def as Record<string, unknown>)?.$handler
-        ) {
-          kind = monaco.languages.CompletionItemKind.Function;
-        } else if ((def as JxPrototypeDef)?.$prototype) {
-          kind = monaco.languages.CompletionItemKind.Property;
-        }
-        return {
-          insertText: `state.${key}`,
-          kind,
-          label: `state.${key}`,
+      // Named-formula catalog metadata enriches their completions with documentation.
+      const formulaDocs = new Map(namedFormulaEntries(defs).map((e) => [e.name, e.description]));
+
+      const suggestions: monaco.languages.CompletionItem[] = Object.entries(defs).map(
+        ([key, def]) => {
+          let kind = monaco.languages.CompletionItemKind.Variable;
+          if (
+            (def as JxPrototypeDef)?.$prototype === "Function" ||
+            (def as Record<string, unknown>)?.$handler ||
+            formulaDocs.has(key)
+          ) {
+            kind = monaco.languages.CompletionItemKind.Function;
+          } else if ((def as JxPrototypeDef)?.$prototype) {
+            kind = monaco.languages.CompletionItemKind.Property;
+          }
+          const item: monaco.languages.CompletionItem = {
+            insertText: `state.${key}`,
+            kind,
+            label: `state.${key}`,
+            range,
+          };
+          const documentation = formulaDocs.get(key);
+          if (documentation) {
+            item.documentation = documentation;
+          }
+          return item;
+        },
+      );
+
+      // Blessed pure globals from the formula catalog (Math.*, JSON.*, Object.*, …).
+      for (const entry of globalEntries()) {
+        suggestions.push({
+          documentation: entry.description,
+          insertText: `window.${entry.label}`,
+          kind: monaco.languages.CompletionItemKind.Function,
+          label: entry.label,
           range,
-        };
-      });
+        });
+      }
       return { suggestions };
     },
     triggerCharacters: ["."],