function* handleDevConfigLoaded() {
  const { 
    rootPath,
    context
  }: ExtensionState = yield select();

  const config =  workspace.getConfiguration("tandem.paperclip");

  const childServerPort = yield call(getPort);

  console.log(`spawning Paperclip dev server with env PORT ${childServerPort}`);

  console.log(JSON.stringify(config.devServer));

  let proc;

  const chan = eventChannel(emit => {
    proc = startPCDevServer({
      cwd: rootPath,
      pipeStdio: true,
      projectConfig: config.devServer,
      port: childServerPort
    }, emit);
    return () => {
      proc.dispose();
    };
  });

  yield spawn(function*() {
    while(1) {
      const action = yield take(chan);
      action[TAG] = 1;
      yield spawn(function*() {
        yield put(action);
      });
    }
  });

  yield spawn(function*() {
    while(1) {
      const action = yield take();
      if (action[TAG] || !action.$public) continue;
      proc.send(action);
    }
  });

  yield put(childDevServerStarted(childServerPort));
}

  yield spawn(function*() {
    yield put(artboardLoading(artboardId));

    // TODO - if state exists, then fetch diffs diffs instead
    const state: ApplicationState = yield select();
    const artboard = getArtboardById(artboardId, state);
    const [dependencyUris, compressedNode] = yield call(getComponentPreview, artboard.componentId, artboard.previewName, state);

    let doc = uncompressRootNode([dependencyUris, compressedNode]);
    const checksum = getDocumentChecksum(doc as SlimParentNode);
    const idSeed = crc32(checksum + artboard.$id);
    doc = setVMObjectIds(doc, idSeed);

    const mount = document.createElement("iframe");
    mount.setAttribute("style", `border: none; width: 100%; height: 100%`);
    const renderChan = eventChannel((emit) => {
      mount.addEventListener("load", () => {
        emit(renderDOM2(doc, mount.contentDocument.body));
      });
      return () => {};
    });

    yield spawn(function*() {
      yield put(artboardRendered(artboardId, yield take(renderChan)));
    });

    // Unique IDs necessary for the front-end to ensure that other artboards with the same component & preview don't contain the same node IDs.
    const html: SlimElement = createSlimElement("html", "html", [], [
      createSlimElement("body", "body", [], [doc])
    ]);

    yield put(artboardLoaded(artboard.$id, dependencyUris, html, checksum, mount));
  });

  yield fork(function* handleFileEditRequest() {
    while(true) {
      const req: ApplyFileMutations = yield take(APPLY_FILE_MUTATIONS);
      const { apiHost }: SyntheticBrowserRootState = yield select();
      const { mutations } = req;
      const state = yield select();
      const mutationsByUri: {
        [identifier: string]: Mutation<any>[]
      } = {};

      for (const mutation of mutations) {
        const source = (mutation.target as SEnvNodeInterface).source;
        if (!mutationsByUri[source.uri]) {
          mutationsByUri[source.uri] = [];
        }

        mutationsByUri[source.uri].push(mutation);
      }

      const stringMutations: StringMutation[] = [];

      yield spawn(function*() {
        yield call(apiEditFile, mutationsByUri, yield select());
      });
    }
  }); 

 yield spawn(function*() {
   while(true) {
     yield spawn(function*() {
       yield route(...(yield take(chan)));
     });
   }
 });

  yield fork(function*() {
    let connectingChan;

    while(1) {
      yield take([OPENING_TANDEM_APP, TANDEM_FE_CONNECTIVITY]);
      const state: ExtensionState = yield select();
      if (connectingChan) {
        yield cancel(connectingChan);
        connectingChan = undefined;
      }
      if (state.tandemEditorStatus === TandemEditorReadyStatus.CONNECTED) {
        status.text = "$(zap) Tandem";
        status.tooltip = "Connected to Tandem";
      } else if (state.tandemEditorStatus === TandemEditorReadyStatus.CONNECTING) {
        status.tooltip = "Connecting to Tandem";
        connectingChan = yield spawn(function*() {
          while(1) {
            // https://github.com/sindresorhus/elegant-spinner/blob/master/index.js
            status.text = SPIN_SEQ.charAt(i = (i + 1) % SPIN_SEQ.length) + " Tandem";
            yield call(delay, 100);
          }
        });
      } else if (state.tandemEditorStatus === TandemEditorReadyStatus.DISCONNECTED) {
        status.text = "▶ Tandem";
        status.tooltip = "Disconnected from Tandem";

        
      }
      status.show();
    }
  });

function* openSyntheticWindowEnvironment({ $id: windowId = generateDefaultId(), location, bounds, scrollPosition }: SyntheticWindow, browserId: string) {

  let main: SEnvWindowInterface;
  const documentId = generateDefaultId();
  const fetch = yield getFetch();
  const { apiHost }: SyntheticBrowserRootState = yield select();

  let currentWindow: SEnvWindowInterface;

  const reloadChan = yield eventChannel((emit) => {

    const reload = (bounds?: Bounds) => {
      if (currentWindow) {
        currentWindow.dispose();
      }
      const SEnvWindow = getSEnvWindowClass({ 
        console: getSEnvWindowConsole(), 
        fetch, 
        reload: () => reload(),
        getProxyUrl: (url: string) => {
          return apiHost && url.substr(0, 5) !== "data:" && url.indexOf(window.location.host) === -1 ? apiHost + "/proxy/" + encodeURIComponent(url) : url;
        },
        createRenderer: (window: SEnvWindowInterface) => {
          return window.top === window ? new SyntheticMirrorRenderer(window) : new SyntheticDOMRenderer(window, document)
        }
      });
      const window = currentWindow = new SEnvWindow(location, browserId);
  
      // ick. Better to use seed function instead to generate UIDs <- TODO.
      window.$id = windowId;
      window.document.$id = documentId;
  
      if (bounds) {
        window.moveTo(bounds.left, bounds.top);
        if (bounds.right) {
          window.resizeTo(bounds.right - bounds.left, bounds.bottom - bounds.top);
        }
      }

      emit(window);

      return window;
    };

    reload(bounds);

    return () => { };
  });

  yield spawn(function*() {
    while(true) {
      yield watchWindowExternalResourceUris(currentWindow, () => currentWindow.location.reload());
      currentWindow.$load();
      const isNew = !getSyntheticWindow(yield select(), currentWindow.$id);
      yield put(syntheticWindowOpened(currentWindow, null, isNew));
      yield take(reloadChan);
    }
  });
}

 yield fork(function*() {
   while(true) {
     const e = yield take(chan);
     yield spawn(function*() {
       yield put(e);
     })
   }
 });

 yield spawn(function*() {
   while(1) {
     const action = yield take(chan);
     action[TAG] = 1;
     yield spawn(function*() {
       yield put(action);
     });
   }
 });

export function* screenshotsSaga() {
  yield spawn(handleTakingScreesnshots);
  yield fork(handleNewScreenshot);
  yield fork(handleSavedScreenshot);
  yield fork(cleanupOldScreenshots);

  // last thing to launch
  yield fork(openHeadlessBrowser);
}

function* handleOpenedSyntheticProxyWindow() {
  while(true) {
    const { instance } = (yield take(SYNTHETIC_WINDOW_PROXY_OPENED)) as SyntheticWindowOpened;
    const thread = yield spawn(handleSyntheticWindowInstance, instance);
    yield fork(function*() {
      yield take((action: Removed) => action.type === REMOVED && action.itemId === instance.$id);
      yield cancel(thread);
    })
  }
}