synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/ui-sidepanel-layout.js

@@ -0,0 +1,109 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Right-edge sidepanel layout reservation.
+//
+// Each panel reserves a slice of the right edge by calling
+// reserveRightPanelLayout(owner, panelOrWidth, outerGap?). The total reserved
+// width is the SUM of every active reservation, exposed via
+// `--right-panel-width` so the rest of the app reflows. Each owner also gets
+// a per-owner CSS variable `--right-panel-offset-${cssVar(owner)}` containing
+// the cumulative width of panels stacked to its RIGHT — sub-agent panels read
+// this to position themselves leftward of the parent OCP panel.
+//
+// Insertion order = stack order: the first reservation sits flush against the
+// right edge; later reservations stack to its left. Closing a panel re-flows
+// the offsets for everything stacked to the left of it.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const RESERVED_WIDTH_VAR = '--right-panel-width';
+const RESERVED_GAP_VAR = '--right-panel-gap';
+const LEGACY_WIDTH_VAR = '--claude-panel-width';
+const LEGACY_GAP_VAR = '--claude-panel-gap';
+const OFFSET_VAR_PREFIX = '--right-panel-offset-';
+
+// Insertion-ordered Map keeps stack order across resize/refresh.
+const _reservations = new Map();
+
+function px(value) {
+  return `${Math.max(0, Math.round(Number(value) || 0))}px`;
+}
+
+function setVarPair(primary, legacy, value) {
+  const rootStyle = document.documentElement.style;
+  rootStyle.setProperty(primary, value);
+  rootStyle.setProperty(legacy, value);
+}
+
+function ownerCssVar(owner) {
+  return String(owner || '').replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+
+function clearAllOffsetVars() {
+  const rootStyle = document.documentElement.style;
+  for (let i = rootStyle.length - 1; i >= 0; i--) {
+    const name = rootStyle[i];
+    if (name && name.startsWith(OFFSET_VAR_PREFIX)) rootStyle.removeProperty(name);
+  }
+}
+
+function applyStackedReservation() {
+  const rootStyle = document.documentElement.style;
+  let totalWidth = 0;
+  let maxGap = 0;
+
+  for (const entry of _reservations.values()) {
+    totalWidth += entry.reservedWidth || 0;
+    if ((entry.gap || 0) > maxGap) maxGap = entry.gap || 0;
+  }
+
+  setVarPair(RESERVED_WIDTH_VAR, LEGACY_WIDTH_VAR, px(totalWidth));
+  setVarPair(RESERVED_GAP_VAR, LEGACY_GAP_VAR, px(maxGap));
+
+  // Per-owner offset = sum of widths of panels to its RIGHT
+  // (= panels inserted BEFORE this one in the Map).
+  clearAllOffsetVars();
+  let offset = 0;
+  for (const [owner, entry] of _reservations) {
+    rootStyle.setProperty(`${OFFSET_VAR_PREFIX}${ownerCssVar(owner)}`, px(offset));
+    offset += entry.reservedWidth || 0;
+  }
+}
+
+export function measureRightPanelReservation(panel, outerGap = 20) {
+  if (!panel) return 0;
+  return Math.ceil(panel.getBoundingClientRect().width) + outerGap;
+}
+
+export function reserveRightPanelLayout(owner, panelOrReservedWidth, outerGap = 20) {
+  if (!owner) return 0;
+  const reservedWidth = typeof panelOrReservedWidth === 'number'
+    ? panelOrReservedWidth
+    : measureRightPanelReservation(panelOrReservedWidth, outerGap);
+  _reservations.set(owner, {
+    reservedWidth,
+    gap: Math.max(0, Number(outerGap) || 0),
+  });
+  applyStackedReservation();
+  return reservedWidth;
+}
+
+export function clearRightPanelLayout(owner) {
+  if (owner) _reservations.delete(owner);
+  else _reservations.clear();
+  applyStackedReservation();
+  return _reservations.size === 0;
+}
+
+// Owner-scoped offset CSS variable name. Panels read this to position
+// themselves leftward of any panels stacked to their right.
+export function rightPanelOffsetVar(owner) {
+  return `${OFFSET_VAR_PREFIX}${ownerCssVar(owner)}`;
+}
+
+// Toggle a global `sp-resizing` flag on <html> while a right-edge panel is
+// being drag-resized. CSS uses it to suspend the 0.3s transitions on the
+// workspace toolbar / file-editor (so they track the drag frame-for-frame
+// instead of trailing ~300ms behind) and to drop the expensive panel
+// backdrop-filter blur for the duration of the drag.
+export function setRightPanelResizing(active) {
+  document.documentElement.classList.toggle('sp-resizing', !!active);
+}

package/neural-interface/public/shared/ui-sidepanel-runtime.js

@@ -0,0 +1,19 @@
+// Same-origin session documents isolate each provider's module-level UI state.
+export const hostedSidepanelId = (() => {
+  try { return window.frameElement?.dataset.sidepanelSession || null; } catch { return null; }
+})();
+
+export function sidepanelHost() {
+  return hostedSidepanelId ? window.parent.__synabunSessionPanels : window.__synabunSessionPanels;
+}
+
+export function routeSidepanelEvent(event, data) {
+  const host = sidepanelHost();
+  if (!host) return false;
+  if (hostedSidepanelId) {
+    if (!['open-plan-editor', 'open-changelog-editor', 'browser:reconnect'].includes(event)) return false;
+    host.emitFromSession(hostedSidepanelId, event, data);
+    return true;
+  }
+  return host.routeEvent(event, data);
+}

package/neural-interface/public/shared/ui-sidepanel-session-entry.js

@@ -0,0 +1,40 @@
+import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
+import { emit } from './state.js';
+
+const host = sidepanelHost();
+const provider = new URLSearchParams(location.search).get('provider');
+if (hostedSidepanelId && host) {
+  try {
+    let receivePath, end, defaults;
+    if (provider === 'claude') {
+      const panel = await import('./ui-claude-panel.js');
+      await panel.toggleClaudePanel();
+      receivePath = panel.sendToPanel;
+      end = panel.endHostedClaudeSessions;
+      defaults = () => ({ project: document.querySelector('#cp-project')?._value || '' });
+    } else if (provider === 'codex') {
+      const panel = await import('./ui-codex-panel.js');
+      const tabs = await import('./cdx/cdx-tabs.js');
+      await panel.toggleCodexPanel();
+      receivePath = tabs.addPathChip;
+      end = () => { while (tabs.allTabs().length) tabs.closeTab(tabs.allTabs().length - 1); };
+      defaults = () => ({ project: tabs.activeTab()?.project || '' });
+    } else if (provider === 'opencode') {
+      const panel = await import('./ocp-v2/ocp-v2-panel.js');
+      const store = await import('./ocp-v2/ocp-v2-state.js');
+      await panel.toggleOpencodePanel();
+      receivePath = panel.attachPathToOpencode;
+      end = panel.endHostedOpenCodeSessions;
+      defaults = () => ({ project: store.getState().cwd || '' });
+    } else throw new Error('Unknown session provider');
+    const focus = () => document.querySelector('#cp-input, #cxp-input, .ocpv2-compose textarea')?.focus();
+    const title = document.querySelector('.cp-session-label, .cxp-session-label, .ocpv2-session-label');
+    const syncTitle = () => host.title(hostedSidepanelId, title?.textContent?.trim());
+    if (title) new MutationObserver(syncTitle).observe(title, { childList: true, subtree: true, characterData: true });
+    syncTitle();
+    host.ready(hostedSidepanelId, { focus, defaults, end, receive(kind, data) {
+      if (kind === 'path') return receivePath(data);
+      emit(kind === 'image' ? 'wb:send-to-panel' : kind, data);
+    } });
+  } catch (error) { host.fail(hostedSidepanelId, error.message); }
+}

package/neural-interface/public/shared/ui-sidepanel-sessions.js

@@ -0,0 +1,221 @@
+import { storage } from './storage.js';
+import { state, emit } from './state.js';
+import { hostedSidepanelId } from './ui-sidepanel-runtime.js';
+import { registerSidepanel, setSidepanelVisible, focusSidepanel, detachSidepanel, getSidepanelPresentation, sendToFocusedSession } from './ui-sidepanel-windows.js';
+
+let manifestKey;
+const PROVIDERS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode' };
+const entries = new Map();
+const editorOwners = new Map();
+let initialized = false;
+
+function save() {
+  storage.setItem(manifestKey, JSON.stringify([...entries.values()].map(({ id, provider, title, defaults }) => ({ id, provider, title, defaults }))));
+}
+
+function storageFor(id) {
+  // Session lists/registries share one live cache. Unscoped defaults and legacy
+  // session pointers belong to the individual document, never another session.
+  const scoped = key => /^(synabun-(claude|codex)-panel-(session|thread|title|project|model|effort|autoaccept|default-model|permission-mode)|opencode-v2-project)$/.test(key);
+  const keyFor = key => scoped(key) ? `synabun-session-pref-${id}:${key}` : key;
+  return {
+    getItem(key) {
+      const value = storage.getItem(keyFor(key));
+      if (value != null || !scoped(key)) return value;
+      if (/-(session|thread|title)$/.test(key)) return null;
+      return storage.getItem(key);
+    },
+    setItem: (key, value) => storage.setItem(keyFor(key), value),
+    removeItem: key => storage.removeItem(keyFor(key)),
+    keys: () => storage.keys(),
+  };
+}
+
+function pillFor(entry) {
+  if (entry.pill) return entry.pill;
+  const tray = document.getElementById('term-minimized-tray');
+  if (!tray) return null;
+  const pill = document.createElement('div');
+  pill.className = 'term-minimized-pill sp-session-pill';
+  pill.dataset.sessionWindow = entry.id;
+  const label = document.createElement('span');
+  label.className = 'term-minimized-pill-label';
+  const close = document.createElement('button');
+  close.className = 'term-minimized-pill-close';
+  close.textContent = '×';
+  close.title = 'End detached session';
+  close.addEventListener('click', event => { event.stopPropagation(); end(entry).catch(showError.bind(null, entry)); });
+  pill.append(label, close);
+  pill.addEventListener('click', () => show(entry));
+  tray.append(pill);
+  entry.pill = pill;
+  return pill;
+}
+
+function renderPill(entry) {
+  const pill = pillFor(entry);
+  if (!pill) return;
+  pill.querySelector('.term-minimized-pill-label').textContent = entry.title || `${PROVIDERS[entry.provider]} session`;
+  // Visible session pills also act as a window switcher when windows overlap.
+  pill.classList.toggle('active', !!getSidepanelPresentation(entry.id)?.visible);
+}
+
+function showError(entry, error) {
+  if (entry.loading) entry.loading.textContent = `Could not open session: ${error?.message || error}`;
+}
+
+function show(entry) {
+  if (!entry.element) {
+    const element = document.createElement('section');
+    element.className = 'sp-session-window';
+    element.id = entry.id;
+    const header = document.createElement('div');
+    header.className = 'sp-session-header';
+    const label = document.createElement('span');
+    label.className = 'sp-session-title';
+    label.textContent = entry.title || `${PROVIDERS[entry.provider]} session`;
+    const actions = document.createElement('div');
+    actions.className = 'sp-session-actions';
+    for (const [text, title, action] of [
+      ['+', 'New detached session', () => open(entry.provider, entry.api?.defaults() || entry.defaults)],
+      ['−', 'Minimize session', () => setSidepanelVisible(entry.id, false)],
+      ['×', 'End session', () => end(entry).catch(showError.bind(null, entry))],
+    ]) {
+      const button = document.createElement('button');
+      button.className = 'sp-session-button';
+      button.type = 'button'; button.title = title; button.setAttribute('aria-label', title);
+      button.textContent = text; button.addEventListener('click', action); actions.append(button);
+    }
+    header.append(label, actions);
+    const loading = document.createElement('div');
+    loading.className = 'sp-session-loading'; loading.textContent = 'Opening session…';
+    const frame = document.createElement('iframe');
+    frame.dataset.sidepanelSession = entry.id;
+    frame.title = `${PROVIDERS[entry.provider]} session`;
+    frame.allow = 'clipboard-read; clipboard-write; microphone';
+    element.append(header, loading, frame);
+    document.body.append(element);
+    Object.assign(entry, { element, label, loading, frame });
+    entry.unregister = registerSidepanel({ owner: entry.id, layoutKey: entry.id, provider: entry.provider,
+      element, header, actions, buttonClass: 'sp-session-button', applyVisibility: () => renderPill(entry) });
+    if (!storage.getItem(`synabun-sidepanel-layout-${entry.id}`)) detachSidepanel(entry.id);
+    frame.src = `/sidepanel-session.html?provider=${entry.provider}`;
+  }
+  setSidepanelVisible(entry.id, true);
+}
+
+function open(provider, defaults = {}) {
+  if (!PROVIDERS[provider]) return;
+  const id = `session-${crypto.randomUUID()}`;
+  const entry = { id, provider, title: `${PROVIDERS[provider]} session`, defaults: { project: String(defaults.project || '') } };
+  entries.set(id, entry);
+  const seed = { activeIdx: 0, tabs: [{ id: `${id}-tab`, project: entry.defaults.project, label: 'New chat', title: 'New session' }] };
+  if (provider === 'opencode') storage.setItem(`opencode-v2-tabs-${id}`, '[]');
+  else storage.setItem(`synabun-${provider}-panel-tabs-${id}`, JSON.stringify(seed));
+  const scoped = storageFor(id);
+  scoped.setItem(provider === 'opencode' ? 'opencode-v2-project' : `synabun-${provider}-panel-project`, entry.defaults.project);
+  save();
+  show(entry);
+  return id;
+}
+
+async function end(entry) {
+  if (entry.ending) return;
+  entry.ending = true;
+  try {
+    if (entry.api) await entry.api.end();
+    else if (!entry.element) {
+      // A restored, unopened window may still own a server-side turn.
+      const raw = storage.getItem(`synabun-${entry.provider}-panel-tabs-${entry.id}`);
+      const sessions = entry.provider === 'opencode'
+        ? JSON.parse(storage.getItem(`opencode-v2-tabs-${entry.id}`) || '[]').map(sessionId => ({ sessionId }))
+        : JSON.parse(raw || '{"tabs":[]}').tabs;
+      for (const session of sessions) {
+        await fetch('/api/sidepanel/kill-session', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ provider: entry.provider, windowId: entry.id,
+            sessionId: session.sessionId || session.id, threadId: session.threadId }) });
+      }
+    }
+    entry.unregister?.(); entry.element?.remove(); entry.pill?.remove();
+    entries.delete(entry.id);
+    for (const key of storage.keys()) {
+      if (key.endsWith(`-${entry.id}`) || key.startsWith(`synabun-session-pref-${entry.id}:`)) storage.removeItem(key);
+    }
+    save();
+  } finally { entry.ending = false; }
+}
+
+export function initDetachedAgentSessions() {
+  if (initialized || hostedSidepanelId) return;
+  initialized = true;
+  let windowId = sessionStorage.getItem('synabun-session-panels-window');
+  if (!windowId) { windowId = crypto.randomUUID(); sessionStorage.setItem('synabun-session-panels-window', windowId); }
+  manifestKey = `synabun-detached-sessions-${windowId}`;
+  const style = document.createElement('style');
+  style.textContent = `
+    .sp-session-window { position:fixed; top:68px; right:20px; bottom:20px; width:460px;
+      display:flex; flex-direction:column; background:#121214; border:1px solid #ffffff18;
+      border-radius:16px; box-shadow:0 12px 40px #0008; }
+    .sp-session-header { display:flex; align-items:center; gap:6px; padding:8px; flex-shrink:0;
+      cursor:grab; touch-action:none; color:#cbd5e1; font:11px 'JetBrains Mono',monospace; }
+    .sp-session-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .sp-session-actions { display:flex; gap:3px; }
+    .sp-session-button { display:inline-flex; justify-content:center; align-items:center; width:25px;
+      height:25px; padding:0; border:0; border-radius:8px; background:#ffffff08; color:#a1a1aa; cursor:pointer; }
+    .sp-session-button:hover { color:white; background:#ffffff18; }
+    .sp-session-window iframe { border:0; width:100%; flex:1; min-height:0; border-radius:0 0 15px 15px; }
+    .sp-session-loading { padding:12px; font:12px sans-serif; color:#cbd5e1; }
+    .sp-session-pill.active { border-color:#3b82f680; }
+  `;
+  document.head.append(style);
+  window.__synabunSessionPanels = {
+    storage, storageFor, open, has: id => entries.has(id),
+    focus: id => focusSidepanel(id), hide: id => setSidepanelVisible(id, false),
+    ready(id, api) {
+      const entry = entries.get(id);
+      if (!entry) return;
+      entry.api = api; entry.loading.hidden = true;
+      for (const [kind, data] of entry.pendingInputs || []) api.receive(kind, data);
+      entry.pendingInputs = [];
+      if (getSidepanelPresentation(id)?.visible && state.lastActiveSidepanel === id) api.focus();
+    },
+    title(id, title) {
+      const entry = entries.get(id);
+      if (!entry) return;
+      const next = `${PROVIDERS[entry.provider]} · ${title || 'New session'}`;
+      if (entry.title === next) return;
+      entry.title = next; if (entry.label) entry.label.textContent = next; renderPill(entry); save();
+    },
+    fail: (id, error) => { const entry = entries.get(id); if (entry) showError(entry, error); },
+    send(id, kind, data) {
+      const entry = entries.get(id);
+      if (!entry) return;
+      if (entry.api) entry.api.receive(kind, data);
+      else (entry.pendingInputs ||= []).push([kind, data]);
+    },
+    emitFromSession: (id, event, data) => emit(event, { ...data, sidepanelWindowId: id }),
+    routeEvent(event, data) {
+      if (event === 'wb:send-to-panel') return sendToFocusedSession('image', data);
+      const type = event.includes('changelog') ? 'changelog' : 'plan';
+      if (event === 'open-plan-editor' || event === 'open-changelog-editor') editorOwners.set(type, data?.sidepanelWindowId || null);
+      if (['plan-saved', 'plan-edit-cancelled', 'plan-editor-state', 'changelog-saved', 'changelog-edit-cancelled'].includes(event)) {
+        // A new editor can open before the old one emits cancel. Explicit
+        // ownership keeps that cancel and dirty/save events in the old session.
+        const owner = Object.hasOwn(data || {}, 'sidepanelWindowId')
+          ? data.sidepanelWindowId : editorOwners.get(type);
+        if (owner) {
+          entries.get(owner)?.api?.receive(event, data);
+          if (event !== 'plan-editor-state' && editorOwners.get(type) === owner) editorOwners.delete(type);
+          return true;
+        }
+      }
+      return false;
+    },
+  };
+  try {
+    for (const record of JSON.parse(storage.getItem(manifestKey) || '[]')) {
+      if (!/^session-[a-f0-9-]+$/.test(record.id) || !PROVIDERS[record.provider]) continue;
+      entries.set(record.id, record); renderPill(record);
+    }
+  } catch { /* Missing or invalid saved manifest starts with no extra windows. */ }
+}

package/neural-interface/public/shared/ui-sidepanel-state.js

@@ -0,0 +1,131 @@
+// Presentation only: providers retain ownership of their DOM and live sessions.
+const MIN_SIZE = 320;
+const MARGIN = 8;
+
+export function clampSidepanelRect(rect, viewport) {
+  const left = MARGIN;
+  const top = Math.max(MARGIN, viewport.top + MARGIN);
+  const availableWidth = Math.max(1, viewport.width - MARGIN * 2);
+  const availableHeight = Math.max(1, viewport.height - top - MARGIN);
+  const width = Math.min(availableWidth, Math.max(Math.min(MIN_SIZE, availableWidth), rect.width));
+  const height = Math.min(availableHeight, Math.max(Math.min(MIN_SIZE, availableHeight), rect.height));
+  return {
+    x: Math.max(left, Math.min(viewport.width - MARGIN - width, rect.x)),
+    y: Math.max(top, Math.min(viewport.height - MARGIN - height, rect.y)),
+    width, height,
+  };
+}
+
+export function resizeSidepanelRect(rect, edge, dx, dy, viewport) {
+  const minWidth = Math.min(MIN_SIZE, Math.max(1, viewport.width - MARGIN * 2));
+  const minHeight = Math.min(MIN_SIZE, Math.max(1, viewport.height - viewport.top - MARGIN * 2));
+  let { x, y, width, height } = rect;
+  if (edge.includes('w')) {
+    x = Math.max(MARGIN, Math.min(rect.x + dx, rect.x + rect.width - minWidth));
+    width = rect.x + rect.width - x;
+  }
+  if (edge.includes('e')) width = Math.max(minWidth, Math.min(viewport.width - MARGIN - x, rect.width + dx));
+  if (edge.includes('n')) {
+    y = Math.max(viewport.top + MARGIN, Math.min(rect.y + dy, rect.y + rect.height - minHeight));
+    height = rect.y + rect.height - y;
+  }
+  if (edge.includes('s')) height = Math.max(minHeight, Math.min(viewport.height - MARGIN - y, rect.height + dy));
+  return clampSidepanelRect({ x, y, width, height }, viewport);
+}
+
+export function readSidepanelLayout(value) {
+  try {
+    const saved = typeof value === 'string' ? JSON.parse(value) : value;
+    if (saved?.version !== 1) throw new Error('Unknown layout version');
+    const rect = saved.rect;
+    const validRect = rect && ['x', 'y', 'width', 'height'].every(key => Number.isFinite(rect[key]))
+      && rect.width > 0 && rect.height > 0;
+    return {
+      version: 1,
+      mode: saved.mode === 'floating' ? 'floating' : 'docked',
+      rect: validRect ? { x: rect.x, y: rect.y, width: rect.width, height: rect.height } : null,
+      dockedWidth: Number.isFinite(saved.dockedWidth) && saved.dockedWidth > 0
+        ? Math.max(320, Math.min(700, saved.dockedWidth)) : null,
+    };
+  } catch {
+    return { version: 1, mode: 'docked', rect: null, dockedWidth: null };
+  }
+}
+
+export function createSidepanelController({ load = () => null, save = () => {}, changed = () => {}, focused = () => {} } = {}) {
+  const views = new Map();
+  const layouts = new Map();
+  let focusOrder = 0;
+
+  function register({ id, provider, layoutKey = provider, applyVisibility }) {
+    if (views.has(id)) throw new Error(`Sidepanel already registered: ${id}`);
+    if (!layouts.has(layoutKey)) layouts.set(layoutKey, readSidepanelLayout(load(layoutKey)));
+    const view = { id, provider, layoutKey, applyVisibility, visible: false, order: 0, layout: layouts.get(layoutKey) };
+    views.set(id, view);
+    changed(view, 'register');
+    return view;
+  }
+
+  function focus(id) {
+    const view = views.get(id);
+    if (!view?.visible) return;
+    view.order = ++focusOrder;
+    focused(view);
+  }
+
+  function hidePeers(view) {
+    for (const peer of views.values()) {
+      if (peer.id !== view.id && peer.visible && (peer.layoutKey === view.layoutKey
+        || (view.layout.mode === 'docked' && peer.layout.mode === 'docked'))) {
+        setVisible(peer.id, false);
+      }
+    }
+  }
+
+  function setVisible(id, visible) {
+    const view = views.get(id);
+    if (!view) return;
+    visible = !!visible;
+    if (visible) hidePeers(view);
+    if (visible !== view.visible) {
+      view.visible = visible;
+      changed(view, 'visibility');
+      view.applyVisibility(visible);
+    }
+    if (visible) focus(id);
+  }
+
+  function setMode(id, mode) {
+    const view = views.get(id);
+    if (!view || !['docked', 'floating'].includes(mode) || mode === view.layout.mode) return;
+    view.layout.mode = mode;
+    if (view.visible) hidePeers(view);
+    for (const peer of views.values()) {
+      if (peer.layoutKey === view.layoutKey) changed(peer, 'mode');
+    }
+    persist(id);
+    focus(id);
+  }
+
+  function updateLayout(id, patch) {
+    const view = views.get(id);
+    if (!view) return;
+    Object.assign(view.layout, patch);
+    for (const peer of views.values()) {
+      if (peer.layoutKey === view.layoutKey) changed(peer, 'geometry');
+    }
+  }
+
+  function persist(id) {
+    const view = views.get(id);
+    if (view) save(view.layoutKey, JSON.stringify(view.layout));
+  }
+
+  function unregister(id) {
+    setVisible(id, false);
+    views.delete(id);
+  }
+
+  return { register, unregister, setVisible, setMode, updateLayout, persist, focus,
+    get: id => views.get(id), all: () => [...views.values()] };
+}