Tabs are open documents: Scene, Game and Plugins stay as fixed tabs, every other asset opens in its own tab (double click or Enter in the asset panel, on creation, from the list button), several assets of one kind can be open at once, a tab is labelled with its kind dimmed before the name, cut at 160 px and renamed with its asset, closes with its x or a middle click and goes away when its asset is deleted; a tab always shows its own document instead of following the selection, the picker in the tab head is gone, zoom and scroll are kept per document for the session and dropped on close, a double click on a call node stays in the same tab with breadcrumbs per tab; one editor per kind is switched between documents, the placement rules live in the pure module documents.ts, and the test hook showTab stays as a compatibility path; new e2e module 44 documents (#171)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/editor/graph/GraphCanvas.ts

@@ -240,6 +240,19 @@ export class GraphCanvas extends Widget {
     this.fitView();
   }
 
+  saveView(): GraphViewState {
+    return { pan: { ...this.pan }, zoom: this.zoom, needsFit: this.needsFit };
+  }
+
+  restoreView(view: unknown): void {
+    const saved = view as GraphViewState;
+    if (saved.needsFit) return;
+    this.pan = { ...saved.pan };
+    this.zoom = saved.zoom;
+    this.needsFit = false;
+    this.applyView();
+  }
+
   /** Takes effect on the next drag only – turning it on must not shuffle the graph. */
   setSnapping(on: boolean): void {
     this.snapping = on;
@@ -1322,6 +1335,13 @@ export class GraphCanvas extends Widget {
 
 type Rect = { x: number; y: number; w: number; h: number };
 
+/** Zoom and scroll of one graph, kept while another document is on screen (#171). */
+interface GraphViewState {
+  pan: { x: number; y: number };
+  zoom: number;
+  needsFit: boolean;
+}
+
 function globalPoint(target: Container, local: { x: number; y: number }): { x: number; y: number } {
   const g = target.toGlobal({ x: local.x, y: local.y });
   return { x: g.x, y: g.y };

src/editor/graph/GraphEditor.ts

@@ -14,9 +14,11 @@ export class GraphEditor extends AssetTabEditor<BehaviorAsset, GraphCanvas> {
   private readonly snap = new SnapToggle(() => this.canvas);
   readonly breadcrumb = new Breadcrumb();
   private trail: Trail = [];
+  /** A call followed into another behavior: the tab goes on to that document (#171). */
+  onRetarget: (from: string, to: string) => void = () => undefined;
 
   constructor(state: EditorState) {
-    super(state, { noun: 'Behavior', infoWidth: INFO_WIDTH });
+    super(state, { infoWidth: INFO_WIDTH });
     this.breadcrumb.onPick = (index) => this.open(this.trail[index]!, backTo(this.trail, index));
     this.mount(new GraphCanvas(state), this.snap.widgets, this.breadcrumb);
     this.canvas.onOpenBehavior = (id) => this.open(id, descend(this.trail, this.currentAssetId, id));
@@ -29,10 +31,26 @@ export class GraphEditor extends AssetTabEditor<BehaviorAsset, GraphCanvas> {
    * appearing afterwards would cut the bottom of the fitted graph off.
    */
   private open(assetId: string, trail: Trail): void {
+    const from = this.currentAssetId;
     this.trail = trail;
     this.showTrail();
+    // A fresh look: fitted below this trail, not the view (and trail) kept from an earlier visit.
+    this.forgetView(assetId);
+    this.showAsset(assetId);
+    this.onRetarget(from, assetId);
     this.state.select({ kind: 'asset', assetId });
-    this.refresh();
+  }
+
+  /** The trail belongs to the tab's document, so it comes back with the view. */
+  protected override saveView(): unknown {
+    return { canvas: super.saveView(), trail: this.trail };
+  }
+
+  protected override restoreView(view: unknown): void {
+    const saved = view as { canvas: unknown; trail: Trail };
+    this.trail = saved.trail;
+    this.showTrail();
+    super.restoreView(saved.canvas);
   }
 
   protected override refresh(): void {
@@ -49,11 +67,11 @@ export class GraphEditor extends AssetTabEditor<BehaviorAsset, GraphCanvas> {
     if (this.breadcrumb.show(names)) this.relayout();
   }
 
-  protected override selectedId(): string {
+  override selectedId(): string {
     return this.state.selectedBehaviorId ?? '';
   }
 
-  protected override isMine(asset: Asset): asset is BehaviorAsset {
+  override isMine(asset: Asset): asset is BehaviorAsset {
     return asset.type === 'behavior';
   }