@jxsuite/studio 0.35.0 → 0.37.0

package/src/collab/collab-state.ts

@@ -0,0 +1,71 @@
+/**
+ * Reactive per-tab collab state, kept OUTSIDE the Tab type: UI reads it through collabState(tab),
+ * and non-collab builds never touch it. The path registry answers "is this file co-edited?" for the
+ * fs-sync/reload guards without importing the session machinery.
+ */
+
+import { reactive } from "../reactivity";
+import type { Tab } from "../tabs/tab";
+import type { CollabAwarenessState } from "@jxsuite/collab/awareness-types";
+
+export type CollabTabStatus = "detached" | "connecting" | "synced" | "offline";
+
+export interface PeerPresence {
+  clientId: number;
+  state: CollabAwarenessState;
+}
+
+export interface TabCollabState {
+  status: CollabTabStatus;
+  /** True once a session is attached and past its initial sync. */
+  active: boolean;
+  readOnly: boolean;
+  /** Other clients' awareness states (this project connection, all docs). */
+  peers: PeerPresence[];
+  /**
+   * True while source holds the canonical lock (someone is co-editing the code view): structural
+   * surfaces soft-freeze and the canvas previews the source reconciler's parses.
+   */
+  sourceCanonical: boolean;
+}
+
+const states = new WeakMap<Tab, TabCollabState>();
+const attachedPaths = new Map<string, number>();
+
+export function collabState(tab: Tab): TabCollabState {
+  let state = states.get(tab);
+  if (!state) {
+    state = reactive({
+      active: false,
+      peers: [],
+      readOnly: false,
+      sourceCanonical: false,
+      status: "detached",
+    }) as TabCollabState;
+    states.set(tab, state);
+  }
+  return state;
+}
+
+export function isCollabActive(tab: Tab): boolean {
+  return states.get(tab)?.active === true;
+}
+
+/** Track which project-relative paths have live sessions (fs-event/reload suppression). */
+export function registerCollabPath(path: string): void {
+  attachedPaths.set(path, (attachedPaths.get(path) ?? 0) + 1);
+}
+
+export function unregisterCollabPath(path: string): void {
+  const count = attachedPaths.get(path) ?? 0;
+  if (count <= 1) {
+    attachedPaths.delete(path);
+  } else {
+    attachedPaths.set(path, count - 1);
+  }
+}
+
+/** True while some tab co-edits this path — its Y.Doc is ahead of any provider write-back. */
+export function isCollabPath(path: string): boolean {
+  return attachedPaths.has(path.replaceAll("\\", "/"));
+}

package/src/collab/monaco-cursors.ts

@@ -0,0 +1,69 @@
+/**
+ * Remote cursor colors for y-monaco. MonacoBinding decorates other clients' text cursors with
+ * per-client class names (`yRemoteSelection-<id>`, `yRemoteSelectionHead-<id>`) but ships no
+ * styling — this module maintains one injected <style> element with a rule set per remote client,
+ * colored from the presence palette (`user.color`) and labeled with the author's name on hover of
+ * the cursor head.
+ */
+
+/** The slice of y-protocols Awareness the style manager uses (duck-typed; stays yjs-free). */
+export interface AwarenessLike {
+  clientID: number;
+  getStates: () => Map<number, unknown>;
+  on: (event: "change", cb: () => void) => void;
+  off: (event: "change", cb: () => void) => void;
+}
+
+interface PeerStateShape {
+  user?: { color?: string; name?: string; login?: string };
+}
+
+/** CSS-escape for the content string (names come from GitHub logins/display names). */
+function cssString(value: string): string {
+  return `"${value.replaceAll("\\", String.raw`\\`).replaceAll('"', String.raw`\"`)}"`;
+}
+
+/** One client's rules: translucent selection band, solid caret, name flag above the caret. */
+export function cursorRulesFor(clientId: number, color: string, label: string): string {
+  return [
+    `.yRemoteSelection-${clientId}{background-color:${color}44;}`,
+    `.yRemoteSelectionHead-${clientId}{position:absolute;border-left:2px solid ${color};height:100%;box-sizing:border-box;}`,
+    `.yRemoteSelectionHead-${clientId}::after{content:${cssString(label)};position:absolute;top:-1.2em;left:-2px;padding:0 4px;border-radius:3px 3px 3px 0;font:10px/1.4 sans-serif;color:#fff;white-space:nowrap;background-color:${color};opacity:0;transition:opacity .15s;pointer-events:none;}`,
+    `.yRemoteSelectionHead-${clientId}:hover::after{opacity:1;}`,
+  ].join("\n");
+}
+
+/** Full stylesheet text for every remote client with a presence identity. */
+export function cursorStylesheet(awareness: AwarenessLike): string {
+  const rules: string[] = [];
+  for (const [clientId, raw] of awareness.getStates()) {
+    if (clientId === awareness.clientID) {
+      continue;
+    }
+    const { user } = raw as PeerStateShape;
+    if (!user?.color) {
+      continue;
+    }
+    rules.push(cursorRulesFor(clientId, user.color, user.name ?? user.login ?? String(clientId)));
+  }
+  return rules.join("\n");
+}
+
+/**
+ * Keep an injected <style> element in sync with the awareness roster while a code view is bound.
+ * Returns the disposer (removes the element and the listener).
+ */
+export function attachCursorStyles(awareness: AwarenessLike, doc: Document): () => void {
+  const style = doc.createElement("style");
+  style.dataset["jxCollabCursors"] = "true";
+  doc.head.append(style);
+  const refresh = () => {
+    style.textContent = cursorStylesheet(awareness);
+  };
+  refresh();
+  awareness.on("change", refresh);
+  return () => {
+    awareness.off("change", refresh);
+    style.remove();
+  };
+}

package/src/collab/presence-chips.ts

@@ -0,0 +1,58 @@
+/**
+ * Presence chips — who else is in this co-editing session, plus the sync-status pill that replaces
+ * the dirty dot for collab tabs. Pure lit templates over collabState(tab); the toolbar includes
+ * them and its render effect tracks the underlying reactive state.
+ */
+
+import { html, nothing } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { collabState } from "./collab-state";
+import type { PeerPresence } from "./collab-state";
+import type { Tab } from "../tabs/tab";
+
+function initialOf(peer: PeerPresence): string {
+  const name = peer.state.user.name ?? peer.state.user.login;
+  return (name[0] ?? "?").toUpperCase();
+}
+
+function titleOf(peer: PeerPresence, docPath: string | null): string {
+  const { user } = peer.state;
+  const who = user.name ? `${user.name} (${user.login})` : user.login;
+  const here = peer.state.focusedPath && peer.state.focusedPath === docPath;
+  return here ? who : `${who} — ${peer.state.focusedPath ?? "browsing"}`;
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  connecting: "Connecting…",
+  offline: "Offline — changes sync on reconnect",
+  synced: "Live",
+};
+
+/** Chips + status pill for the toolbar; `nothing` while the tab isn't co-editing. */
+export function presenceChipsTemplate(tab: Tab | null): TemplateResult | typeof nothing {
+  if (!tab) {
+    return nothing;
+  }
+  const state = collabState(tab);
+  if (state.status === "detached") {
+    return nothing;
+  }
+  const label = STATUS_LABEL[state.status] ?? state.status;
+  return html`
+    <div class="jx-presence" title=${label}>
+      <span class="jx-presence-status" data-status=${state.status}>${label}</span>
+      ${state.peers.map(
+        (peer) => html`
+          <span
+            class="jx-presence-chip"
+            style="background:${peer.state.user.color}"
+            title=${titleOf(peer, tab.documentPath)}
+            >${peer.state.user.avatarUrl
+              ? html`<img src=${peer.state.user.avatarUrl} alt=${initialOf(peer)} />`
+              : initialOf(peer)}</span
+          >
+        `,
+      )}
+    </div>
+  `;
+}

package/src/files/file-ops.ts

@@ -13,6 +13,7 @@ import { statusMessage } from "../panels/statusbar";
 import { validateComponentSlots } from "../services/cem-export";
 import { getPlatform } from "../platform";
 import { activeTab, openTab } from "../workspace/workspace";
+import { collabSave } from "../collab/collab-session";
 import { isEditing, stopEditing } from "../editor/inline-edit";
 import {
   defaultContentFormat,
@@ -162,6 +163,11 @@ export async function saveFile() {
     return;
   }
   try {
+    // A co-edited tab persists through its provider (a direct file write would reset the room).
+    if (await collabSave(tab)) {
+      savedMessage(tab, "Synced");
+      return;
+    }
     const output = await serializeDocument(tab);
 
     if (tab.documentPath) {

package/src/files/files.ts

@@ -20,6 +20,7 @@ import { ensureDependenciesInstalled } from "../packages/ensure-deps";
 import { maybePromptJxsuiteUpdate } from "../packages/jxsuite-update";
 import { autoSyncProjectOnOpen } from "../packages/pull-package-sync";
 import { markLocalMutation } from "./fs-events";
+import { isCollabPath } from "../collab/collab-state";
 import {
   draggable,
   dropTargetForElements,
@@ -1078,6 +1079,11 @@ export async function openFileInTab(path: string) {
  */
 /** Reload an open tab from disk when an external change arrives — but only if it is not dirty. */
 export function reloadCleanTab(path: string): void {
+  // Co-edited docs never reload from disk: the shared Y.Doc is ahead of the provider's write-back
+  // (Which is what produced this event), and genuine external changes arrive as a collab reset.
+  if (isCollabPath(path)) {
+    return;
+  }
   for (const [, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path && !tab.doc.dirty) {
       void reloadFileInTab(path);

package/src/panels/ai-panel.ts

@@ -21,6 +21,7 @@ import type { TemplateResult } from "lit-html";
 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 { createAiCredentialsForm } from "../ui/ai-credentials-form";
 import { clearMarkdownCache } from "./ai-chat/chat-markdown";
 import { renderChatHeader, renderMessageList } from "./ai-chat/chat-view";
@@ -36,6 +37,23 @@ let mounted = false;
 /** Whether the OpenAI key form is showing (gate when no key, or re-edit via the gear). */
 let keyEditing = false;
 
+/**
+ * One-time proxy probe: managed platforms (cloud Workers AI) and env-keyed dev servers report
+ * `configured` from /models, unlocking the assistant without a locally stored key. Fired lazily on
+ * the first gated render.
+ */
+let proxyProbe: Promise<void> | null = null;
+
+function ensureProxyProbe() {
+  proxyProbe ??= fetchAvailableModels({ force: true })
+    .catch(() => {
+      // Unreachable proxy — the key gate stays up.
+    })
+    .then(() => {
+      scheduleAiRender();
+    });
+}
+
 /** Which pane the panel shows once the key gate is passed. */
 let view: "chat" | "sessions" = "chat";
 
@@ -245,9 +263,13 @@ const composer = createComposer({
 
 /** @returns {TemplateResult} */
 export function renderAiPanelTemplate(): TemplateResult {
-  // The document assistant authenticates via the AI proxy (an OpenAI-compatible key). Gate the chat
-  // Behind the key form until one is stored locally.
-  if (!hasOpenAiKey() || keyEditing) {
+  /* The document assistant authenticates via the AI proxy. Gate the chat
+     behind the key form until a key is stored locally OR the proxy reports
+     itself configured (managed platforms, env-keyed dev servers). */
+  if ((!hasOpenAiKey() && !isProxyConfigured()) || keyEditing) {
+    if (!keyEditing) {
+      ensureProxyProbe();
+    }
     return renderKeyGate();
   }
 

package/src/panels/git-panel.ts

@@ -6,6 +6,7 @@
 
 import { html, nothing } from "lit-html";
 import { errorMessage } from "@jxsuite/schema/parse";
+import { flushAllCollab } from "../collab/collab-session";
 import type {
   GitBranchesResult,
   GitDiffState,
@@ -263,6 +264,9 @@ export function renderGitPanel(
       return;
     }
     updateUi("gitCommitMessage", "");
+    // Fold co-editing sessions into the backend's tree first so the commit never misses
+    // Trailing keystrokes (the mirror is debounced).
+    await flushAllCollab();
     await gitAction("gitCommit", msg);
   };
 
@@ -275,6 +279,7 @@ export function renderGitPanel(
     updateUi("gitCommitMessage", "");
     updateUi("gitLoading", true);
     updateUi("gitError", null);
+    await flushAllCollab();
     const plat = getPlatform();
     try {
       await plat.gitCommit(msg);

package/src/panels/toolbar.ts

@@ -5,8 +5,16 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
+import { openPublishPanel } from "../publish/publish-panel";
 import { updateSession } from "../store";
-import { redo as tabRedo, undo as tabUndo } from "../tabs/transact";
+import {
+  canRedo as tabCanRedo,
+  canUndo as tabCanUndo,
+  redo as tabRedo,
+  undo as tabUndo,
+} from "../tabs/transact";
+import { collabState } from "../collab/collab-state";
+import { presenceChipsTemplate } from "../collab/presence-chips";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { applyPanelCollapse, view } from "../view";
@@ -100,6 +108,8 @@ export function mount(rootEl: HTMLElement, ctx: ToolbarCtx) {
         void tab.session.ui.gitStatus;
         void tab.history.index;
         void tab.history.snapshots.length;
+        void collabState(tab).status;
+        void collabState(tab).peers.length;
       }
       render();
     });
@@ -321,8 +331,8 @@ function toolbarTemplate() {
   }
 
   const allowedModes = new Set(tab.capabilities.modes);
-  const canUndo = tab.history.index > 0;
-  const canRedo = tab.history.index < tab.history.snapshots.length - 1;
+  const canUndo = tabCanUndo(tab);
+  const canRedo = tabCanRedo(tab);
   const canSave = tab.doc.dirty;
 
   const S = {
@@ -472,6 +482,7 @@ function toolbarTemplate() {
       ${recentProjectsTpl}
     </div>
     ${tbBtnTpl("Manage", openBrowseModal, "sp-icon-view-list")}
+    ${tbBtnTpl("Publish", openPublishPanel)}
     <sp-action-button size="s" title="Save" ?disabled=${!canSave} @click=${ctx.saveFile}>
       ${toolbarIconMap["sp-icon-save-floppy"]}<span class="tb-label">Save</span>
     </sp-action-button>
@@ -493,6 +504,7 @@ function toolbarTemplate() {
         ${toolbarIconMap["sp-icon-redo"]}<span class="tb-label">Redo</span>
       </sp-action-button>
     </sp-action-group>
+    ${presenceChipsTemplate(tab)}
     <div class="tb-spacer"></div>
     <sp-action-button
       class="tb-search-trigger"

package/src/panels/welcome-screen.ts

@@ -5,6 +5,7 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
+import { getProjectList } from "../project-list";
 import { clearRecentProjects, getRecentProjects, removeRecentProject } from "../recent-projects";
 import { renderOnly } from "../store";
 import { platformSupportsClone } from "./git-panel";
@@ -27,6 +28,8 @@ export function initWelcome(ctx: WelcomeCtx) {
 export function renderWelcome(host: HTMLElement) {
   const ctx = _ctx as WelcomeCtx;
   const recent = getRecentProjects();
+  // Catalogue entries already in Recent stay in that section only.
+  const catalogue = getProjectList().filter((p) => !recent.some((r) => r.root === p.root));
   const showClone = platformSupportsClone();
 
   litRender(
@@ -84,6 +87,29 @@ export function renderWelcome(host: HTMLElement) {
               : nothing}
           </div>
 
+          ${catalogue.length > 0
+            ? html`
+                <div class="welcome-section">
+                  <h2 class="welcome-section-title">Projects</h2>
+                  ${catalogue.map(
+                    (p) => html`
+                      <div class="welcome-recent-row">
+                        <button
+                          class="welcome-recent welcome-catalogue"
+                          @click=${() => ctx.openRecentProject(p.root)}
+                          title=${p.root}
+                        >
+                          <span class="welcome-recent-name">${p.name}</span>
+                          <span class="welcome-recent-path">
+                            ${p.description ?? shortenPath(p.root)}
+                          </span>
+                        </button>
+                      </div>
+                    `,
+                  )}
+                </div>
+              `
+            : nothing}
           ${recent.length > 0
             ? html`
                 <div class="welcome-section">