@jxsuite/studio 5.1.0 → 5.2.0

package/src/panels/tab-drop.ts

@@ -0,0 +1,220 @@
+/// <reference lib="dom" />
+/**
+ * Resolve a completed pragmatic drag over a tab strip or a pane's right edge into a model write.
+ *
+ * `panels/tab-strip.ts` registers every chip as a source and every strip and chip as a target,
+ * `panels/pane-grid.ts` registers the right-edge zone, and both hand their monitor's `onDrop` here
+ * with nothing decided yet — the DATA a target's `getData` produced, and nothing else. This module
+ * is the one place that DATA becomes a write, which is what keeps the two registration sites (a
+ * strip, a grid cell) from having to agree twice about what a drop means.
+ *
+ * No import of `tab-strip.ts` or `pane-grid.ts`: this module reaches the model through
+ * `workspace/workspace.ts` and `workspace/pane-derive.ts`, and the one opener through
+ * `files/files.ts` — the same three a keyboard command would use, because a drag and `⌘\` / "Open
+ * to the Side" are the same act by a different gesture (studio-ui-guidelines.md §8.2).
+ *
+ * @docs studio/interface/tabs
+ */
+
+import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import {
+  activateTab,
+  closePane,
+  moveTab,
+  moveTabToPane,
+  paneById,
+  paneIsEmpty,
+  promoteTab,
+  receivingPane,
+  splitRight,
+  workspace,
+} from "../workspace/workspace";
+import { clearPaneDerivation } from "../workspace/pane-derive";
+import { openFileInTab } from "../files/files";
+
+/** A tab chip dragged off its own strip. */
+export interface TabDragData extends Record<string, unknown> {
+  type: "tab";
+  tabId: string;
+  /**
+   * The pane the chip is being dragged FROM, read at drag start — a host can change which pane it
+   * draws, so this is never captured earlier than the gesture itself.
+   */
+  paneId?: string;
+}
+
+/** A file row dragged off the Files tree — `files.ts`'s own source shape, read structurally. */
+export interface FileDragData extends Record<string, unknown> {
+  type: "file-tree";
+  entryType: string;
+  path: string;
+}
+
+export type TabDropSourceData = TabDragData | FileDragData;
+
+/** A slot in a strip — a chip's edge, or the strip's own empty tail when `tabId` is absent. */
+export interface TabSlotTarget extends Record<string, unknown> {
+  type: "tab-slot";
+  paneId: string;
+  tabId?: string;
+  /** The target's own slot in `paneId`'s order at `getData` time — the tail's length, otherwise. */
+  index: number;
+}
+
+export interface TabSlotRefusedTarget extends Record<string, unknown> {
+  type: "tab-slot-refused";
+}
+
+/** The right band of the last pane's stage, armed only while the grid is under {@link MAX_PANES}. */
+export interface PaneEdgeTarget extends Record<string, unknown> {
+  type: "pane-edge";
+  paneId: string;
+}
+
+export interface PaneEdgeRefusedTarget extends Record<string, unknown> {
+  type: "pane-edge-refused";
+}
+
+export type TabDropTarget =
+  | TabSlotTarget
+  | TabSlotRefusedTarget
+  | PaneEdgeTarget
+  | PaneEdgeRefusedTarget;
+
+/**
+ * Whether `data` — a drag source's own data, exactly as `getInitialData` produced it — is a source
+ * this module knows how to land. A directory row is refused HERE, in the data, rather than by
+ * omitting a `dropTargetForElements` registration: pragmatic-dnd bubbles a refusal to the next
+ * target OUT, and the next target out of a tab strip is the pane cell, which is not a target at all
+ * — so an unhandled refusal would not merely do nothing, it would do nothing silently in a way
+ * indistinguishable from a bug. Every caller answers `canDrop` with this, so a directory row (or
+ * anything else this module has no branch for) is refused at the SOURCE and never reaches a target
+ * closure at all.
+ */
+export function isTabDropSource(data: Record<string, unknown>): data is TabDropSourceData {
+  return data.type === "tab" || (data.type === "file-tree" && data.entryType === "file");
+}
+
+/**
+ * Land a tab at a specific slot of `paneId`, releasing any derivation the pane is borrowing FIRST —
+ * the same order `receivingPane` uses, and for the same reason: inserting into a `tabOrder` while
+ * `pane.derived` is still set is the one-frame D2 violation its own docstring describes, observable
+ * to anything that reads the pane between the two writes.
+ */
+function placeTab(tabId: string, paneId: string, index: number): void {
+  const pane = paneById(paneId);
+  if (pane?.derived) {
+    clearPaneDerivation(paneId);
+  }
+  const landed = moveTabToPane(tabId, paneId, index);
+  if (!landed) {
+    return;
+  }
+  // A drag is a commitment, exactly as a double-click promoting a preview tab is one.
+  promoteTab(tabId);
+  activateTab(tabId);
+}
+
+/** {@link placeTab}'s file half: land the file's tab at `index`, opening it first if it is not. */
+async function placeFile(path: string, paneId: string, index: number): Promise<void> {
+  const existing = [...workspace.tabs.values()].find((tab) => tab.documentPath === path);
+  if (existing) {
+    placeTab(existing.id, paneId, index);
+    return;
+  }
+  await openFileInTab(path, { focus: true, paneId });
+  // Idempotent by construction: `openFileInTab` may already have landed the tab at its default
+  // Slot, and this re-finds it by path and moves it to the slot the drop actually asked for.
+  const opened = [...workspace.tabs.values()].find((tab) => tab.documentPath === path);
+  if (opened) {
+    placeTab(opened.id, paneId, index);
+  }
+}
+
+/** The landing index a chip-edge target names, or the tail target's own index when there is none. */
+function edgeIndex(target: TabSlotTarget, edge: Edge | null): number {
+  if (target.tabId === undefined) {
+    return target.index;
+  }
+  return edge === "left" ? target.index : target.index + 1;
+}
+
+async function resolveTabSlotDrop(source: TabDropSourceData, target: TabSlotTarget): Promise<void> {
+  const edge = extractClosestEdge(target as unknown as Record<string | symbol, unknown>);
+  if (source.type === "tab") {
+    if (source.paneId === target.paneId) {
+      const pane = paneById(target.paneId);
+      if (!pane) {
+        return;
+      }
+      const startIndex = pane.tabOrder.indexOf(source.tabId);
+      if (startIndex === -1) {
+        return;
+      }
+      const to =
+        target.tabId === undefined
+          ? pane.tabOrder.length - 1
+          : getReorderDestinationIndex({
+              axis: "horizontal",
+              closestEdgeOfTarget: edge,
+              indexOfTarget: target.index,
+              startIndex,
+            });
+      if (to !== startIndex) {
+        moveTab(source.tabId, to);
+      }
+      return;
+    }
+    placeTab(source.tabId, target.paneId, edgeIndex(target, edge));
+    return;
+  }
+  await placeFile(source.path, target.paneId, edgeIndex(target, edge));
+}
+
+async function resolvePaneEdgeDrop(
+  source: TabDropSourceData,
+  target: PaneEdgeTarget,
+): Promise<void> {
+  if (source.type === "tab") {
+    // Ignores `target.paneId`: the split moves the tab beside ITS OWN pane, which is the edge zone's
+    // Pane by construction — the zone is only armed below `MAX_PANES`, so there is exactly one pane
+    // For a dragged tab to have come from.
+    const landed = splitRight(source.tabId);
+    if (landed) {
+      promoteTab(source.tabId);
+    }
+    return;
+  }
+  const pane = receivingPane(target.paneId);
+  await openFileInTab(source.path, { paneId: pane.id });
+  const landed = [...workspace.tabs.values()].some((tab) => tab.documentPath === source.path);
+  if (!landed && paneIsEmpty(pane)) {
+    // A refusal (a missing file, no editor for the format) must not leave a pane this drop minted
+    // Standing empty — the same rule `document.openToSide` applies to its own refusal.
+    closePane(pane.id);
+  }
+}
+
+/**
+ * Turn a completed drag into a write. `target` is the drop's own INNERMOST target data, or
+ * `undefined` for a drag cancelled off every target — both are legal and both mean nothing landed.
+ */
+export async function resolveTabDrop(
+  source: { data: Record<string, unknown> },
+  target: { data: Record<string, unknown> } | undefined,
+): Promise<void> {
+  if (!target || !isTabDropSource(source.data)) {
+    return;
+  }
+  const sourceData = source.data;
+  if (target.data.type === "tab-slot") {
+    await resolveTabSlotDrop(sourceData, target.data as TabSlotTarget);
+    return;
+  }
+  if (target.data.type === "pane-edge") {
+    await resolvePaneEdgeDrop(sourceData, target.data as PaneEdgeTarget);
+  }
+  // `tab-slot-refused` / `pane-edge-refused` / anything else: nothing.
+}

package/src/panels/tab-strip.ts

@@ -48,7 +48,6 @@ import {
   closeTab,
   focusPane,
   isPaneFocused,
-  moveTab,
   promoteDirtyPreviewTabs,
   promoteTab,
   setTabPinned,
@@ -80,9 +79,17 @@ import type { MenuHandle, MenuRowProjection } from "../surfaces/menu";
 import { saveFile } from "../files/file-ops";
 import { collabReadOnly } from "../collab/collab-session";
 import { collabState } from "../collab/collab-state";
-import { rectOf } from "../utils/geometry";
+import { elementAtPoint, rectOf } from "../utils/geometry";
 import { resolveRegion } from "../ui/regions";
 import { commitTabBuffers, tabBufferUnsaved } from "../services/monaco-buffer";
+import {
+  draggable,
+  dropTargetForElements,
+  monitorForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { attachClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { isTabDropSource, resolveTabDrop } from "./tab-drop";
 import type { EffectScope } from "@vue/reactivity";
 
 /**
@@ -119,8 +126,24 @@ const _overflowing = new Map<string, boolean>();
 
 let _overflowHandle: MenuHandle | null = null;
 
-/** The tab id currently being dragged, or null. */
-let _dragging: string | null = null;
+/** What is being dragged right now, or null between drags — a tab off some strip, or a file row. */
+let _drag: { kind: "tab"; tabId: string } | { kind: "file"; path: string } | null = null;
+
+/**
+ * Where the pointer is hovering, in the vocabulary a strip draws: which pane, which chip slot (`-1`
+ * for the tail), and whether that slot IS the tail. Null off every target this module answers for —
+ * a `pane-edge` hover included, which is `panels/pane-grid.ts`'s own indicator to draw.
+ */
+let _over: { paneId: string; index: number; tail: boolean } | null = null;
+
+/** Every chip's pragmatic registration, per host, per tab id — released before a re-registration. */
+const _chipDnd = new Map<HTMLElement, Map<string, () => void>>();
+
+/** Each host's OWN registration — the strip's empty-tail target. */
+const _stripDnd = new Map<HTMLElement, () => void>();
+
+/** The one drag monitor, armed in {@link mount} and released in {@link unmount}. */
+let _dropMonitor: (() => void) | null = null;
 
 /** Region id of a pane's tab strip. `ui/regions.ts` owns the grammar; this is one call site. */
 export function paneStripRegion(paneId: string): string {
@@ -153,6 +176,51 @@ function hostFor(pane: Pane): HTMLElement | null {
 export function mount(host: HTMLElement) {
   unmount();
   _primaryHost = host;
+  _dropMonitor = monitorForElements({
+    onDragStart({ source }) {
+      if (!isTabDropSource(source.data)) {
+        return;
+      }
+      _drag =
+        source.data.type === "tab"
+          ? { kind: "tab", tabId: source.data.tabId as string }
+          : { kind: "file", path: source.data.path as string };
+      // The tail target does not exist until a pane with no tabs is asked to grow one (§7).
+      render();
+      // `render()` alone does not write `dragKey` — only `syncDrag()` does — so without this the
+      // Source chip's `data-dragging` mark would not appear until the pointer's first move.
+      syncDrag();
+    },
+    onDrag({ location }) {
+      if (!_drag) {
+        return;
+      }
+      const [target] = location.current.dropTargets;
+      const data = target?.data;
+      _over =
+        data?.type === "tab-slot"
+          ? {
+              index: data.tabId === undefined ? -1 : (data.index as number),
+              paneId: data.paneId as string,
+              tail: data.tabId === undefined,
+            }
+          : null;
+      syncDrag();
+    },
+    onDrop({ location, source }) {
+      if (!isTabDropSource(source.data)) {
+        return;
+      }
+      const [target] = location.current.dropTargets;
+      _drag = null;
+      _over = null;
+      syncDrag();
+      render();
+      // A cancelled drag (dropped off every target) arrives with `dropTargets: []`; the resolver
+      // Reads `target === undefined` as "nothing landed", the same answer a refused target gives.
+      void resolveTabDrop(source, target);
+    },
+  });
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -195,18 +263,37 @@ export function unmount() {
   dismissTabContextMenu();
   _scope?.stop();
   _scope = null;
+  _dropMonitor?.();
+  _dropMonitor = null;
+  for (const host of _strips.keys()) {
+    releaseHostDnD(host);
+  }
   for (const strip of _strips.values()) {
     strip.dispose();
   }
   _strips.clear();
   _drawing.clear();
   _primaryHost = null;
-  _dragging = null;
+  _drag = null;
+  _over = null;
   _lastActive.clear();
   _overflowing.clear();
   _hosts.clear();
 }
 
+/** Take back every pragmatic registration a host holds — its chips and its own tail target. */
+function releaseHostDnD(host: HTMLElement): void {
+  const chips = _chipDnd.get(host);
+  if (chips) {
+    for (const release of chips.values()) {
+      release();
+    }
+    _chipDnd.delete(host);
+  }
+  _stripDnd.get(host)?.();
+  _stripDnd.delete(host);
+}
+
 function render() {
   /* One host draws ONE pane. While the shell has a single strip, both panes resolve to the same
      div — and the one whose tabs are on screen is the focused one, so it wins the tie. Without
@@ -237,6 +324,7 @@ function render() {
     _lastActive.delete(paneId);
     _overflowing.delete(paneId);
     if (!claims.has(host)) {
+      releaseHostDnD(host);
       _strips.get(host)?.dispose();
       _strips.delete(host);
       _drawing.delete(host);
@@ -261,6 +349,7 @@ function paint(pane: Pane, host: HTMLElement): void {
   } else {
     _strips.set(host, mountTabStripSurface(host, values, actionsFor(host)));
   }
+  reconcileStripDnD(host, values);
 
   /* The strip is HELD — `surfaces/tab-strip.ts` takes it as the element is created — so this is an
      imperative USE of a node this module owns rather than a re-find of one it renders
@@ -306,6 +395,9 @@ function actionsFor(host: HTMLElement): TabStripActions {
     activate: (id) => {
       activateTab(id);
     },
+    chipHost: (element, id) => {
+      adoptChip(host, element, id);
+    },
     closeTab: (id) => {
       void requestClose(id);
     },
@@ -315,11 +407,6 @@ function actionsFor(host: HTMLElement): TabStripActions {
         openTabContextMenu(tab, x, y);
       }
     },
-    dragEnd: onDragEnd,
-    dragStart: onDragStart,
-    drop: (index, transfer) => {
-      onDrop(host, index, transfer);
-    },
     focusPane: () => {
       focusPane(drawnPane(host)?.id ?? PRIMARY_PANE);
     },
@@ -329,6 +416,9 @@ function actionsFor(host: HTMLElement): TabStripActions {
     promote: (id) => {
       promoteTab(id);
     },
+    stripHost: (element) => {
+      adoptStrip(host, element);
+    },
     togglePin: (id) => {
       const tab = workspace.tabs.get(id);
       if (tab) {
@@ -439,6 +529,26 @@ function project(pane: Pane): TabStripValues {
     return derivationValues(pane, derived);
   }
   if (pane.tabOrder.length === 0) {
+    /* An empty, non-derived pane WHILE A DRAG IS LIVE draws a `tabs` row with no chips instead of
+       going blank: `blankValues` hides the row outright, and a hidden row has no `jx-tabs` element
+       for `adoptStrip` to make a target of — so a tab dragged toward the empty primary beside a
+       derived secondary (the state `detachTab` allows) had nowhere to land. `_drag` gates it rather
+       than `pane.tabOrder.length === 0` alone, so the pane stays hidden the rest of the time. */
+    if (_drag) {
+      return {
+        active: "",
+        chipTitle: "",
+        focused: isPaneFocused(pane.id),
+        mode: "tabs",
+        preset: "",
+        stripLabel: stripLabel(pane),
+        subject: "",
+        tabs: [],
+        trailing: false,
+        trailingGlyph: "⌄",
+        trailingTitle: "Show hidden tabs",
+      };
+    }
     _lastActive.set(pane.id, null);
     _overflowing.set(pane.id, false);
     return blankValues(pane);
@@ -492,7 +602,6 @@ function chipView(
     {
       dirty: tab.doc.dirty,
       draft: pill?.draft ?? false,
-      dragging: _dragging === id,
       index,
       key: id,
       label: labels.get(id) ?? "Untitled",
@@ -511,35 +620,131 @@ function chipView(
   ];
 }
 
-// ─── Drag reorder ─────────────────────────────────────────────────────────────
+// ─── Drag and drop ────────────────────────────────────────────────────────────
 
-function onDragStart(id: string, transfer: DataTransfer | null) {
-  _dragging = id;
-  transfer?.setData("text/plain", id);
-  if (transfer) {
-    transfer.effectAllowed = "move";
+/**
+ * Make one chip a pragmatic drag source and drop target. Called from `chipHost`, as the chip is
+ * CREATED (`onNodeCreated` fires once per chip; a repaint that keeps a chip alive fires it never
+ * again, and one that replaces it — a pane handover, §18.3 — fires it fresh).
+ *
+ * Released first, in case a chip element is ever handed a second registration for the same id: the
+ * SOURCE of truth for "is this id registered on this host" is the map, not whether pragmatic still
+ * remembers the old element, and releasing unconditionally is cheaper than asking.
+ */
+function adoptChip(host: HTMLElement, element: HTMLElement, id: string): void {
+  let chips = _chipDnd.get(host);
+  if (!chips) {
+    chips = new Map();
+    _chipDnd.set(host, chips);
   }
-  // The ghost is chrome state, not model state, so no effect fires for it.
-  render();
+  chips.get(id)?.();
+
+  const cleanup = combine(
+    draggable({
+      element,
+      // A drag starting on the pin toggle or the kit's own close button is a click on THAT control,
+      // Not a request to move the chip — the same guard `panels/dnd.ts`'s Outline rows use.
+      canDrag({ input }) {
+        const target = elementAtPoint(input.clientX, input.clientY);
+        return !(target instanceof Element && target.closest('[part="pin"], [part="close"]'));
+      },
+      getInitialData() {
+        // Read at DRAG TIME, not captured at registration: the pane a host draws can change under
+        // An already-mounted chip (a handover, §18.3), and `drawnPane` always answers about now.
+        return { paneId: drawnPane(host)?.id, tabId: id, type: "tab" };
+      },
+    }),
+    dropTargetForElements({
+      canDrop({ source }) {
+        return isTabDropSource(source.data);
+      },
+      element,
+      getData({ element: el, input }) {
+        const pane = drawnPane(host);
+        if (!pane) {
+          return { type: "tab-slot-refused" };
+        }
+        // Computed HERE, not at chip creation: the target's own slot moves every time a tab is
+        // Reordered, and `resolveTabDrop` reads this fresh on every hover and on the drop itself.
+        return attachClosestEdge(
+          { index: pane.tabOrder.indexOf(id), paneId: pane.id, tabId: id, type: "tab-slot" },
+          { allowedEdges: ["left", "right"], element: el, input },
+        );
+      },
+    }),
+  );
+  chips.set(id, cleanup);
 }
 
-function onDragEnd() {
-  _dragging = null;
-  render();
+/**
+ * Make a strip's OWN element a drop target — the empty tail after the last chip, and, for an empty
+ * pane growing one during a drag (§7), the whole of it. Innermost wins, so a chip under the pointer
+ * answers first; this only ever resolves a drop that landed on the strip itself.
+ */
+function adoptStrip(host: HTMLElement, element: HTMLElement): void {
+  _stripDnd.get(host)?.();
+  const cleanup = dropTargetForElements({
+    canDrop({ source }) {
+      return isTabDropSource(source.data);
+    },
+    element,
+    getData() {
+      const pane = drawnPane(host);
+      return pane
+        ? { index: pane.tabOrder.length, paneId: pane.id, type: "tab-slot" }
+        : { type: "tab-slot-refused" };
+    },
+  });
+  _stripDnd.set(host, cleanup);
 }
 
 /**
- * Drop onto the chip at `index`. The model clamps the destination into the region the dragged tab's
- * pinned state allows, so this only has to say where the pointer was.
+ * Release a host's chip registrations for ids that no longer appear — a tab closed, or a pane
+ * handover replaced every chip with another pane's — and release the whole host when it is no
+ * longer drawing tabs at all. Run at the tail of every {@link paint}, which is what makes a handover
+ * self-correcting: the SAME call that draws the new pane's chips (through `onNodeCreated`) is the
+ * call that notices the old pane's ids are no longer live.
  */
-function onDrop(host: HTMLElement, index: number, transfer: DataTransfer | null) {
-  const pane = drawnPane(host);
-  const id = _dragging ?? transfer?.getData("text/plain") ?? null;
-  _dragging = null;
-  if (!pane || !id || !pane.tabOrder.includes(id)) {
+function reconcileStripDnD(host: HTMLElement, values: TabStripValues): void {
+  if (values.mode !== "tabs") {
+    releaseHostDnD(host);
+    return;
+  }
+  const live = new Set(values.tabs.map((chip) => chip.key));
+  const chips = _chipDnd.get(host);
+  if (!chips) {
     return;
   }
-  moveTab(id, index);
+  for (const [id, release] of chips) {
+    if (!live.has(id)) {
+      release();
+      chips.delete(id);
+    }
+  }
+}
+
+/**
+ * Write the drag indicators for every standing strip, from {@link _over} and {@link _drag}.
+ *
+ * `dragKey` is broadcast to every host unconditionally — a tab id only matches a chip on the ONE
+ * host that draws its pane, so the comparison in `tab-strip.json` is what scopes it, not this
+ * function. `dropIndex` / `dropTail` ARE scoped here, to the host currently drawing `_over.paneId`,
+ * because an index is meaningless on a strip it was not measured against.
+ */
+function syncDrag(): void {
+  const dragKey = _drag?.kind === "tab" ? _drag.tabId : "";
+  for (const [host, drawing] of _drawing) {
+    const surface = _strips.get(host);
+    if (!surface) {
+      continue;
+    }
+    const hovering = _over !== null && _over.paneId === drawing.paneId;
+    surface.drag({
+      dragKey,
+      dropIndex: hovering && _over ? _over.index : -1,
+      dropTail: hovering && _over ? _over.tail : false,
+    });
+  }
 }
 
 /**

package/src/services/ai-models.ts

@@ -75,6 +75,7 @@ let proxyConfigured = false;
 let proxyManaged = false;
 let proxyDefaultModel = "";
 let proxyCode: AiModelsResponse["code"];
+let proxyModelsError = "";
 
 /**
  * One-shot capability probe shared by every credentials gate, plus the hosts to repaint when it
@@ -116,6 +117,7 @@ export function resetModelCache() {
   proxyManaged = false;
   proxyDefaultModel = "";
   proxyCode = undefined;
+  proxyModelsError = "";
   /* The probe's result IS the flags above. Clearing them while keeping the settled promise
      would strand every gate on a permanent "unconfigured, unmanaged" reading — ensureProxyProbe
      would no-op forever and the managed option would vanish until a full reload. */
@@ -266,6 +268,16 @@ export function proxyStateCode(): AiModelsResponse["code"] {
   return proxyCode;
 }
 
+/**
+ * The upstream's own error message from the last fetch, when it reported one (e.g. Cloudflare's "No
+ * route for that URI" for a base URL that doesn't serve `/models`). Empty when the last fetch had
+ * no upstream error to report — a stale message from an earlier failure must not survive a fetch
+ * that succeeded.
+ */
+export function proxyModelsErrorMessage(): string {
+  return proxyModelsError;
+}
+
 /** The proxy's preferred model id ("" when it does not declare one). */
 export function getProxyDefaultModel(): string {
   return proxyDefaultModel;
@@ -356,6 +368,7 @@ export async function fetchAvailableModels(
   proxyManaged = data.managed === true;
   proxyDefaultModel = data.defaultModel ?? "";
   proxyCode = data.code;
+  proxyModelsError = data.upstreamError !== undefined ? (data.upstreamMessage ?? "") : "";
   /* Capabilities are kept, not dropped. The backend has reported `toolSupport` all along and the
      ingest mapped `{id, name}` only, so a Workers AI model that cannot call tools looked exactly
      like one that can — the agent loop ran, called nothing, and answered as if that were normal.

package/src/studio.ts

@@ -27,6 +27,7 @@ import {
 
 import {
   PRIMARY_PANE,
+  activePane,
   activeTab,
   closeAllTabs,
   openTab,
@@ -384,9 +385,11 @@ function setCanvasMode(tab: Tab | null, mode: string) {
  * 1. **To the side.** §8.2 has promised this since P3 and it never shipped — the chain ran
  *    `openFileInTab` → `openTab` → `activePane()`, so "open the layout that wraps this page" opened
  *    it ON TOP of the page it was teaching about.
- * 2. **Focus stays in the page.** An assistant pane that takes the keyboard means the author's next
- *    keystroke edits the definition instead of the document they are looking at — and a following
- *    pane would immediately have nothing to follow.
+ * 2. **The focus FOLLOWS.** The open is a gesture, not a read: the author asked to edit the component,
+ *    so the pane it lands in takes the keyboard. The failure it replaces is the opposite one — an
+ *    assistant pane that takes the keyboard means the author's next keystroke edits the definition
+ *    instead of the document they are looking at, which is why the READS (`pane.compareWith`, the
+ *    derivation follow, session restore) browse with `focus: false`.
  * 3. **A PREVIEW tab**, because drilling in is browsing: the second drill-in takes the same slot
  *    instead of littering the side strip, and an edit promotes it (`promoteDirtyPreviewTabs`).
  * 4. **An ordinary tab, not a derivation.** "Edit definition" is a commitment to edit one component; a
@@ -396,16 +399,17 @@ function setCanvasMode(tab: Tab | null, mode: string) {
  * `openedFrom` is unchanged — §14.2's relationship, which nothing pops and nothing restores from.
  *
  * @param {string} componentPath
+ * @docs studio/interface/tabs
  */
 async function navigateToComponent(componentPath: string) {
   const from = activeTab.value;
-  /* {@link receivingPane}, not `sidePane`: the pane beside this one may be a LENS, which owns no
+  /* {@link receivingPane}, not `paneBeside`: the pane beside this one may be a LENS, which owns no
      tab. The open then landed in a `tabOrder` `tabOfPane` hops straight past, so the read below got
      the SOURCE tab back, `opened.documentPath !== componentPath`, and the one relationship this
      function exists to record (§14.2) was skipped without a sound. */
-  const target = receivingPane();
+  const target = receivingPane(activePane().id);
   const alreadyOpen = [...workspace.tabs.values()].some((t) => t.documentPath === componentPath);
-  await openFileInTab(componentPath, { focus: false, paneId: target.id, preview: true });
+  await openFileInTab(componentPath, { paneId: target.id, preview: true });
   const opened = tabOfPane(target.id);
   if (!alreadyOpen && from && opened && opened.documentPath === componentPath) {
     opened.session.openedFrom = { documentPath: from.documentPath, tabId: from.id };