Lifecycle

How to mount, unmount, and re-mount the bar without leaks.

Mounting

const bar = enableAutopilotBar(client);

Preconditions:

• client is an AutopilotClient instance.
• setAutopilotClient(client) has been called (so the bar's components can resolve the singleton).
• The DOM is ready (document.body exists). In SPAs this is the case as soon as your framework mounts.

The function is synchronous and returns immediately. It does not wait for the client to be connected.

Unmounting

bar.destroy();

This:

1. Unmounts both Vue apps (overlay + toggle button).
2. Removes their host elements from the DOM.
3. Detaches the listeners those apps installed on the client.

destroy() is idempotent — calling it twice is safe.

When to destroy

Most apps never destroy the bar — they let it live for the lifetime of the page. Destroy when:

• You unmount a micro-frontend that owns the autopilot integration.
• You're in a multi-tenant page and switching tenants requires a fresh client.
• You only want the bar on certain routes of an SPA.

SPA route teardown

import { onMounted, onBeforeUnmount } from 'vue';
import { enableAutopilotBar } from '@llmor/autopilot-bar';
import { useAutopilotClient } from '@llmor/autopilot-core';

const client = useAutopilotClient();
let bar: ReturnType<typeof enableAutopilotBar> | null = null;

onMounted(() => {
  bar = enableAutopilotBar(client);
});

onBeforeUnmount(() => {
  bar?.destroy();
  bar = null;
});

Reconnecting after disconnect

client.disconnect();
// bar still mounted — it just shows "disconnected"

await client.connect({ conversationUrl }); // bar reactivates

You do not need to destroy/recreate the bar to reconnect. The bar reads connectionStatus and re-renders.

Switching conversations

client.disconnect();
await client.connect({ conversationUrl: anotherUrl });

Registered functions are kept on the client across reconnects. Context is not wiped — call clearContext() first if you want a fresh state.

Multiple instances

There is only one singleton client per page. If you call enableAutopilotBar() twice you will get two overlays sharing the same store — almost never what you want. Destroy the previous one first:

let bar = enableAutopilotBar(client);
// later
bar.destroy();
bar = enableAutopilotBar(client); // safe