@rool-dev/app 0.3.0

package/dist/dev/DevHostController.js

@@ -0,0 +1,395 @@
+/**
+ * DevHostController — business logic for the dev host shell.
+ *
+ * Owns the RoolClient lifecycle, space management, channel-per-app management,
+ * bridge hosting, and published app management. The Svelte component is a thin
+ * view layer that reads this controller's state and calls its methods.
+ *
+ * The controller is self-sufficient: it manages the full lifecycle including
+ * DOM flush (via injected tick) and bridge binding. Svelte components can call
+ * controller methods directly without needing wrappers.
+ */
+import { RoolClient } from '@rool-dev/sdk';
+import { createBridgeHost } from '../host.js';
+import { ENV_URLS } from '../manifest.js';
+// ---------------------------------------------------------------------------
+// localStorage helpers
+// ---------------------------------------------------------------------------
+function storageGet(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function storageSet(key, value) {
+    try {
+        if (value === null)
+            localStorage.removeItem(key);
+        else
+            localStorage.setItem(key, value);
+    }
+    catch { /* ignore */ }
+}
+// ---------------------------------------------------------------------------
+// DevHostController
+// ---------------------------------------------------------------------------
+export class DevHostController {
+    // --- Config (immutable after construction) ---
+    channelId;
+    appUrl;
+    manifest;
+    manifestError;
+    // --- SDK client ---
+    client;
+    // --- Observable state (Svelte component mirrors these via $state) ---
+    spaces = [];
+    currentSpaceId = null;
+    statusText = 'Initializing...';
+    statusState = 'off';
+    placeholderText = 'Authenticating...';
+    env;
+    publishedApps = [];
+    installedAppIds = [];
+    sidebarCollapsed = false;
+    // --- Per-tab state (imperative, not rendered directly) ---
+    channels = {};
+    iframeEls = {};
+    bridgeHosts = {};
+    // --- Dependencies ---
+    _onChange;
+    _tick;
+    // --- Storage keys ---
+    _spaceKey;
+    constructor(options, onChange, tick) {
+        this.channelId = options.channelId;
+        this.appUrl = options.appUrl;
+        this.manifest = options.manifest;
+        this.manifestError = options.manifestError;
+        this._onChange = onChange;
+        this._tick = tick;
+        this._spaceKey = `rool-devhost:${options.channelId}:space`;
+        // Restore persisted state
+        this.env = this._getSavedEnv();
+        this.sidebarCollapsed = storageGet('rool-devhost:collapsed') === 'true';
+    }
+    // ---------------------------------------------------------------------------
+    // Derived
+    // ---------------------------------------------------------------------------
+    get tabs() {
+        const localTab = {
+            id: 'local',
+            name: this.manifest?.name ?? 'Local',
+            url: this.appUrl,
+            isLocal: true,
+        };
+        const appTabs = this.installedAppIds
+            .map((id) => {
+            const app = this.publishedApps.find((a) => a.appId === id);
+            if (!app)
+                return null;
+            return {
+                id: app.appId,
+                name: app.name,
+                url: `https://${app.appId}.${ENV_URLS[this.env].appsDomain}`,
+                isLocal: false,
+            };
+        })
+            .filter((t) => t !== null);
+        return [localTab, ...appTabs];
+    }
+    // ---------------------------------------------------------------------------
+    // Bootstrap
+    // ---------------------------------------------------------------------------
+    async boot() {
+        const urls = ENV_URLS[this.env];
+        this.client = new RoolClient({ baseUrl: urls.baseUrl, authUrl: urls.authUrl });
+        const authenticated = await this.client.initialize();
+        if (!authenticated) {
+            this.placeholderText = 'Redirecting to login...';
+            this.statusText = 'Authenticating...';
+            this.statusState = 'loading';
+            this._onChange();
+            this.client.login('App Dev Host');
+            return;
+        }
+        this.placeholderText = 'Loading spaces...';
+        this.statusText = 'Loading spaces...';
+        this.statusState = 'loading';
+        this._onChange();
+        const [spaceList, appList] = await Promise.all([
+            this.client.listSpaces(),
+            this.client.listApps().catch(() => []),
+        ]);
+        this.spaces = spaceList;
+        this.publishedApps = appList;
+        this.client.on('spaceAdded', (space) => {
+            if (!this.spaces.some((s) => s.id === space.id)) {
+                this.spaces = [...this.spaces, space];
+                this._onChange();
+            }
+        });
+        this.client.on('spaceRemoved', (id) => {
+            this.spaces = this.spaces.filter((s) => s.id !== id);
+            if (this.currentSpaceId === id) {
+                this.currentSpaceId = null;
+                this.statusText = 'Disconnected';
+                this.statusState = 'off';
+            }
+            this._onChange();
+        });
+        this.client.on('spaceRenamed', (id, name) => {
+            this.spaces = this.spaces.map((s) => (s.id === id ? { ...s, name } : s));
+            this._onChange();
+        });
+        this.statusText = 'Ready';
+        this.statusState = 'off';
+        const savedSpace = storageGet(this._spaceKey);
+        if (savedSpace && this.spaces.some((s) => s.id === savedSpace)) {
+            await this.selectSpace(savedSpace);
+        }
+        else {
+            this.placeholderText = 'Select a space to load the app';
+            this._onChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Space selection
+    // ---------------------------------------------------------------------------
+    async selectSpace(spaceId) {
+        this._destroyAllBridgesAndChannels();
+        this.currentSpaceId = spaceId;
+        storageSet(this._spaceKey, spaceId);
+        this.statusText = 'Opening channels...';
+        this.statusState = 'loading';
+        this.placeholderText = 'Opening channels...';
+        this._onChange();
+        try {
+            // Open the local app's channel
+            const localChannel = await this.client.openChannel(spaceId, this.channelId);
+            this.channels['local'] = localChannel;
+            // Apply manifest settings to the local channel
+            await this._syncManifest(localChannel, this.manifest);
+            // Discover installed apps: space channels whose ID matches a published app
+            const space = await this.client.openSpace(spaceId);
+            const spaceChannels = space.getChannels();
+            const publishedAppIds = new Set(this.publishedApps.map((a) => a.appId));
+            this.installedAppIds = spaceChannels
+                .map((ch) => ch.id)
+                .filter((id) => publishedAppIds.has(id) && id !== this.channelId);
+            // Open channels for each installed app and sync their manifests
+            for (const appId of this.installedAppIds) {
+                try {
+                    const ch = await this.client.openChannel(spaceId, appId);
+                    this.channels[appId] = ch;
+                    const remoteManifest = await this._fetchRemoteManifest(appId);
+                    if (remoteManifest) {
+                        await this._syncManifest(ch, remoteManifest);
+                    }
+                }
+                catch (e) {
+                    console.error(`Failed to open channel for app ${appId}:`, e);
+                }
+            }
+            // Show iframes, wait for DOM to mount them, then bind bridges
+            this.placeholderText = null;
+            this._onChange();
+            await this._tick();
+            this._bindAllBridges();
+            const spaceName = this.spaces.find((s) => s.id === this.currentSpaceId)?.name ?? spaceId;
+            this.statusText = `Connected \u2014 ${spaceName}`;
+            this.statusState = 'ok';
+            this._onChange();
+        }
+        catch (e) {
+            console.error('Failed to open channel:', e);
+            this.placeholderText = `Error: ${e instanceof Error ? e.message : String(e)}`;
+            this.statusText = 'Error';
+            this.statusState = 'off';
+            this._onChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // App installation / removal
+    // ---------------------------------------------------------------------------
+    /**
+     * Install an app in the current space.
+     *
+     * Opens the channel first, THEN adds the tab. This ensures the channel
+     * exists when the iframe mounts so registerIframe → _bindBridge can
+     * connect the bridge before the app sends its init message.
+     */
+    async installApp(appId) {
+        if (!this.currentSpaceId)
+            return;
+        if (this.installedAppIds.includes(appId))
+            return;
+        try {
+            // Step 1: open channel (creates it on server == install)
+            const ch = await this.client.openChannel(this.currentSpaceId, appId);
+            this.channels[appId] = ch;
+            // Step 2: add the card, flush DOM, bind bridge
+            this.installedAppIds = [...this.installedAppIds, appId];
+            this._onChange();
+            await this._tick();
+            this._bindBridge(appId);
+            // Step 3: fetch and apply the published app's manifest
+            const remoteManifest = await this._fetchRemoteManifest(appId);
+            if (remoteManifest) {
+                await this._syncManifest(ch, remoteManifest);
+            }
+        }
+        catch (e) {
+            console.error(`Failed to install app ${appId}:`, e);
+            this.installedAppIds = this.installedAppIds.filter((id) => id !== appId);
+            this._onChange();
+        }
+    }
+    /**
+     * Uninstall an app from the current space.
+     * Deletes the channel and removes the card.
+     */
+    removeApp(appId) {
+        this._destroyTab(appId);
+        this.installedAppIds = this.installedAppIds.filter((id) => id !== appId);
+        this._onChange();
+        // Delete the channel in the background (fire-and-forget)
+        if (this.currentSpaceId) {
+            this.client.deleteChannel(this.currentSpaceId, appId).catch((e) => {
+                console.error(`Failed to delete channel for app ${appId}:`, e);
+            });
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Environment switching
+    // ---------------------------------------------------------------------------
+    async switchEnv(newEnv) {
+        if (newEnv === this.env)
+            return;
+        this.env = newEnv;
+        storageSet('rool-devhost:env', newEnv);
+        this._destroyAllBridgesAndChannels();
+        this.currentSpaceId = null;
+        this.spaces = [];
+        this.publishedApps = [];
+        this.installedAppIds = [];
+        this._onChange();
+        await this.boot();
+    }
+    // ---------------------------------------------------------------------------
+    // Sidebar
+    // ---------------------------------------------------------------------------
+    toggleSidebar() {
+        this.sidebarCollapsed = !this.sidebarCollapsed;
+        storageSet('rool-devhost:collapsed', String(this.sidebarCollapsed));
+        this._onChange();
+    }
+    // ---------------------------------------------------------------------------
+    // Iframe registration (called by Svelte action)
+    // ---------------------------------------------------------------------------
+    registerIframe(tabId, el) {
+        this.iframeEls[tabId] = el;
+        this._bindBridge(tabId);
+    }
+    unregisterIframe(tabId) {
+        delete this.iframeEls[tabId];
+    }
+    // ---------------------------------------------------------------------------
+    // Cleanup
+    // ---------------------------------------------------------------------------
+    logout() {
+        this.client.logout();
+        window.location.reload();
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    _bindBridge(tabId) {
+        const el = this.iframeEls[tabId];
+        const ch = this.channels[tabId];
+        if (el && ch && !this.bridgeHosts[tabId]) {
+            this.bridgeHosts[tabId] = createBridgeHost({ channel: ch, iframe: el });
+        }
+    }
+    _bindAllBridges() {
+        for (const tab of this.tabs) {
+            this._bindBridge(tab.id);
+        }
+    }
+    _destroyTab(tabId) {
+        this.bridgeHosts[tabId]?.destroy();
+        delete this.bridgeHosts[tabId];
+        this.channels[tabId]?.close();
+        delete this.channels[tabId];
+        delete this.iframeEls[tabId];
+    }
+    _destroyAllBridgesAndChannels() {
+        for (const host of Object.values(this.bridgeHosts)) {
+            host.destroy();
+        }
+        for (const ch of Object.values(this.channels)) {
+            ch.close();
+        }
+        this.bridgeHosts = {};
+        this.channels = {};
+        this.iframeEls = {};
+    }
+    /**
+     * Fetch `rool-app.json` from a published app's URL.
+     * Returns null if the fetch fails (app might not have a manifest).
+     */
+    async _fetchRemoteManifest(appId) {
+        const domain = ENV_URLS[this.env].appsDomain;
+        const url = `https://${appId}.${domain}/rool-app.json`;
+        try {
+            const res = await fetch(url);
+            if (!res.ok)
+                return null;
+            return await res.json();
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Idempotently sync a manifest's settings (name, system instruction, collections)
+     * onto a channel. Safe to call every time the app is opened.
+     */
+    async _syncManifest(channel, manifest) {
+        if (!manifest)
+            return;
+        if (channel.channelName !== manifest.name) {
+            await channel.rename(manifest.name);
+        }
+        const targetInstruction = manifest.systemInstruction ?? null;
+        const currentInstruction = channel.getSystemInstruction() ?? null;
+        if (currentInstruction !== targetInstruction) {
+            await channel.setSystemInstruction(targetInstruction);
+        }
+        if (manifest.collections) {
+            const currentSchema = channel.getSchema();
+            const syncCollections = async (colls) => {
+                for (const [name, fields] of Object.entries(colls)) {
+                    if (name in currentSchema) {
+                        await channel.alterCollection(name, fields);
+                    }
+                    else {
+                        await channel.createCollection(name, fields);
+                    }
+                }
+            };
+            const { write: w, read: r } = manifest.collections;
+            if (w && w !== '*')
+                await syncCollections(w);
+            if (r && r !== '*')
+                await syncCollections(r);
+        }
+    }
+    _getSavedEnv() {
+        const saved = storageGet('rool-devhost:env');
+        if (saved === 'dev' || saved === 'prod')
+            return saved;
+        return 'prod';
+    }
+}

package/dist/dev/HostShell.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { DevHostController } from './DevHostController.js';
+  import type { AppTab } from './DevHostController.js';
+  import type { AppManifest } from '../manifest.js';
+  import type { RoolSpaceInfo, PublishedAppInfo } from '@rool-dev/sdk';
+  import type { Environment } from '../manifest.js';
+  import Sidebar from './Sidebar.svelte';
+  import AppGrid from './AppGrid.svelte';
+
+  // Props injected from the mount entry
+  interface Props {
+    channelId: string;
+    appUrl: string;
+    manifest: AppManifest | null;
+    manifestError: string | null;
+  }
+
+  const props: Props = $props();
+
+  // ---------------------------------------------------------------------------
+  // Controller + reactive state mirror
+  // ---------------------------------------------------------------------------
+
+  let spaces: RoolSpaceInfo[] = $state([]);
+  let currentSpaceId: string | null = $state(null);
+  let statusText: string = $state('Initializing...');
+  let statusState: 'ok' | 'loading' | 'off' = $state('off');
+  let placeholderText: string | null = $state('Authenticating...');
+  let sidebarCollapsed: boolean = $state(false);
+  let env: Environment = $state('prod');
+  let publishedApps: PublishedAppInfo[] = $state([]);
+  let installedAppIds: string[] = $state([]);
+  let tabs: AppTab[] = $state([]);
+
+  // UI-only state (not in controller)
+  let dropdownOpen: boolean = $state(false);
+
+  const controller = new DevHostController(
+    props,
+    syncState,
+    tick,
+  );
+
+  function syncState() {
+    spaces = controller.spaces;
+    currentSpaceId = controller.currentSpaceId;
+    statusText = controller.statusText;
+    statusState = controller.statusState;
+    placeholderText = controller.placeholderText;
+    sidebarCollapsed = controller.sidebarCollapsed;
+    env = controller.env;
+    publishedApps = controller.publishedApps;
+    installedAppIds = controller.installedAppIds;
+    tabs = controller.tabs;
+  }
+
+  // Derived: published apps not yet installed (excluding the local dev app)
+  let uninstalledApps = $derived(
+    publishedApps.filter((app) => app.appId !== props.channelId && !installedAppIds.includes(app.appId)),
+  );
+
+  // Initial sync
+  syncState();
+
+  // ---------------------------------------------------------------------------
+  // Bootstrap
+  // ---------------------------------------------------------------------------
+
+  onMount(() => {
+    controller.boot();
+
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownOpen && !(e.target as Element)?.closest('[data-dropdown]')) {
+        dropdownOpen = false;
+      }
+    }
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  });
+</script>
+
+<!-- Sidebar -->
+<Sidebar
+  {controller}
+  manifest={props.manifest}
+  manifestError={props.manifestError}
+  {spaces}
+  {currentSpaceId}
+  {env}
+  {statusText}
+  {statusState}
+  {sidebarCollapsed}
+  bind:dropdownOpen
+/>
+
+<!-- Main area -->
+<div class="flex-1 min-w-0 flex flex-col">
+  {#if placeholderText}
+    <div class="flex items-center justify-center h-full text-slate-400 text-sm">{placeholderText}</div>
+  {:else}
+    <AppGrid
+      {controller}
+      {tabs}
+      {uninstalledApps}
+      onInstallApp={(id) => controller.installApp(id)}
+      onRemoveApp={(id) => controller.removeApp(id)}
+    />
+  {/if}
+</div>

package/dist/dev/HostShell.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { AppManifest } from '../manifest.js';
+interface Props {
+    channelId: string;
+    appUrl: string;
+    manifest: AppManifest | null;
+    manifestError: string | null;
+}
+declare const HostShell: import("svelte").Component<Props, {}, "">;
+type HostShell = ReturnType<typeof HostShell>;
+export default HostShell;
+//# sourceMappingURL=HostShell.svelte.d.ts.map

package/dist/dev/HostShell.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HostShell.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/HostShell.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAQhD,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AA0FH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}