npm - office-core - Versions diffs - 0.1.0 - Mend

office-core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/.runtime-dist/scripts/bundle-host-package.js +46 -0
package/.runtime-dist/scripts/demo-multi-agent.js +130 -0
package/.runtime-dist/scripts/home-agent-host.js +1403 -0
package/.runtime-dist/scripts/host-doctor.js +28 -0
package/.runtime-dist/scripts/host-login.js +32 -0
package/.runtime-dist/scripts/host-menu.js +227 -0
package/.runtime-dist/scripts/host-open.js +20 -0
package/.runtime-dist/scripts/install-host.js +108 -0
package/.runtime-dist/scripts/lib/host-config.js +171 -0
package/.runtime-dist/scripts/lib/local-runner.js +287 -0
package/.runtime-dist/scripts/office-cli.js +698 -0
package/.runtime-dist/scripts/run-local-project.js +277 -0
package/.runtime-dist/src/auth/session-token.js +62 -0
package/.runtime-dist/src/discord/outbox-ledger.js +56 -0
package/.runtime-dist/src/do/AgentDO.js +205 -0
package/.runtime-dist/src/do/GatewayShardDO.js +9 -0
package/.runtime-dist/src/do/ProjectDO.js +829 -0
package/.runtime-dist/src/do/TaskDO.js +356 -0
package/.runtime-dist/src/index.js +123 -0
package/.runtime-dist/src/project/office-view.js +405 -0
package/.runtime-dist/src/project/read-model.js +79 -0
package/.runtime-dist/src/routes/agents-bootstrap.js +9 -0
package/.runtime-dist/src/routes/agents-descriptor.js +12 -0
package/.runtime-dist/src/routes/agents-events.js +17 -0
package/.runtime-dist/src/routes/agents-heartbeat.js +21 -0
package/.runtime-dist/src/routes/agents-task-context.js +17 -0
package/.runtime-dist/src/routes/bundles.js +198 -0
package/.runtime-dist/src/routes/local-host.js +49 -0
package/.runtime-dist/src/routes/projects.js +119 -0
package/.runtime-dist/src/routes/tasks.js +67 -0
package/.runtime-dist/src/task/reducer.js +464 -0
package/.runtime-dist/src/types/project.js +1 -0
package/.runtime-dist/src/types/protocol.js +3 -0
package/.runtime-dist/src/types/runtime.js +1 -0
package/README.md +148 -0
package/bin/double-penetration-host.mjs +83 -0
package/package.json +48 -0
package/public/index.html +1581 -0
package/public/install-host.ps1 +64 -0
package/scripts/run-runtime-script.mjs +43 -0

package/public/index.html ADDED Viewed

@@ -0,0 +1,1581 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Office Core</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #171411;
+        --panel: rgba(33, 29, 25, 0.92);
+        --panel-soft: rgba(255, 255, 255, 0.03);
+        --panel-hover: rgba(255, 255, 255, 0.05);
+        --border: rgba(255, 255, 255, 0.08);
+        --border-strong: rgba(255, 255, 255, 0.16);
+        --text: #f3ede4;
+        --text-muted: #b4a99c;
+        --text-faint: #877d72;
+        --accent: #d7a35a;
+        --success: #66b57f;
+        --danger: #e37669;
+        --shadow: 0 20px 56px rgba(0, 0, 0, 0.32);
+        --radius-xl: 24px;
+        --radius-lg: 18px;
+        --radius-md: 14px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+        background:
+          radial-gradient(circle at top left, rgba(215, 163, 90, 0.08), transparent 24%),
+          linear-gradient(180deg, #191511 0%, #14110f 100%);
+        color: var(--text);
+      }
+      body {
+        min-height: 100vh;
+      }
+      button,
+      input,
+      select,
+      textarea {
+        font: inherit;
+      }
+      button {
+        cursor: pointer;
+      }
+      .app {
+        display: grid;
+        grid-template-columns: 300px minmax(0, 1fr);
+        min-height: 100vh;
+      }
+      .sidebar {
+        border-right: 1px solid var(--border);
+        background: rgba(23, 20, 17, 0.9);
+        backdrop-filter: blur(18px);
+        padding: 20px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+      .brand-title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+      }
+      .brand-title::before {
+        content: "";
+        width: 12px;
+        height: 12px;
+        border-radius: 4px;
+        background: linear-gradient(135deg, var(--accent), #8b5d24);
+        box-shadow: 0 0 0 6px rgba(215, 163, 90, 0.12);
+      }
+      .section-title {
+        margin: 0;
+        font-size: 0.76rem;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        color: var(--text-faint);
+      }
+      .conversation-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        overflow: auto;
+        min-height: 0;
+      }
+      .conversation {
+        width: 100%;
+        text-align: left;
+        border: 1px solid transparent;
+        border-radius: var(--radius-md);
+        background: rgba(255, 255, 255, 0.02);
+        color: var(--text);
+        padding: 14px;
+      }
+      .conversation:hover {
+        background: var(--panel-hover);
+        border-color: var(--border);
+      }
+      .conversation.active {
+        background: rgba(215, 163, 90, 0.11);
+        border-color: rgba(215, 163, 90, 0.34);
+      }
+      .conversation-name {
+        font-size: 0.96rem;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+      .conversation-meta {
+        font-size: 0.82rem;
+        color: var(--text-muted);
+      }
+      .sidebar-card {
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        background: rgba(255, 255, 255, 0.03);
+        padding: 16px;
+        color: var(--text-muted);
+        line-height: 1.55;
+      }
+      .sidebar-card p {
+        margin: 0;
+      }
+      .actions {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .button {
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.03);
+        color: var(--text);
+        border-radius: 999px;
+        padding: 10px 15px;
+      }
+      .button:hover {
+        background: rgba(255, 255, 255, 0.06);
+        border-color: var(--border-strong);
+      }
+      .button.primary {
+        background: linear-gradient(180deg, rgba(215, 163, 90, 0.22), rgba(215, 163, 90, 0.1));
+        border-color: rgba(215, 163, 90, 0.34);
+      }
+      .button.small {
+        padding: 8px 12px;
+        font-size: 0.88rem;
+      }
+      .main {
+        padding: 18px 22px 22px;
+        display: grid;
+        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+        gap: 16px;
+        min-width: 0;
+        min-height: 100vh;
+      }
+      .topbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 16px;
+      }
+      .eyebrow {
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        color: var(--text-faint);
+      }
+      .project-title {
+        margin: 6px 0 0;
+        font-size: clamp(1.5rem, 2.2vw, 2.1rem);
+        font-weight: 700;
+        line-height: 1.08;
+      }
+      .project-subtitle {
+        margin-top: 6px;
+        color: var(--text-muted);
+        line-height: 1.5;
+      }
+      .pill-row {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        border-radius: 999px;
+        padding: 8px 12px;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.04);
+        color: var(--text-muted);
+        font-size: 0.85rem;
+      }
+      .pill::before {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        background: var(--success);
+      }
+      .summary-card,
+      .thread-card,
+      .composer-card {
+        border: 1px solid var(--border);
+        border-radius: var(--radius-xl);
+        background: var(--panel);
+        backdrop-filter: blur(16px);
+        box-shadow: var(--shadow);
+      }
+      .summary-card {
+        padding: 18px 20px;
+        display: grid;
+        gap: 14px;
+      }
+      .summary-grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 12px;
+      }
+      .summary-block {
+        padding: 14px;
+        border-radius: var(--radius-md);
+        background: var(--panel-soft);
+        border: 1px solid var(--border);
+      }
+      .summary-label {
+        font-size: 0.75rem;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--text-faint);
+        margin-bottom: 6px;
+      }
+      .summary-value {
+        line-height: 1.55;
+        color: var(--text);
+      }
+      .active-agents {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .agent-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid var(--border);
+      }
+      .agent-chip.active {
+        border-color: rgba(215, 163, 90, 0.34);
+        background: rgba(215, 163, 90, 0.11);
+      }
+      .agent-name {
+        font-weight: 600;
+        font-size: 0.93rem;
+      }
+      .agent-meta {
+        font-size: 0.79rem;
+        color: var(--text-muted);
+      }
+      .remove-agent {
+        width: 24px;
+        height: 24px;
+        border-radius: 999px;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.03);
+        color: var(--text-muted);
+      }
+      .remove-agent:hover {
+        border-color: rgba(227, 118, 105, 0.3);
+        color: #ffd6d1;
+      }
+      .thread-card {
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      .thread-header {
+        padding: 18px 20px 0;
+      }
+      .thread-header h2 {
+        margin: 0;
+        font-size: 1.05rem;
+      }
+      .thread-header p {
+        margin: 6px 0 0;
+        color: var(--text-muted);
+        line-height: 1.5;
+      }
+      .thread {
+        min-height: 0;
+        overflow: auto;
+        padding: 18px 20px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+      .empty-thread {
+        margin: auto 0;
+        padding: 40px 24px;
+        text-align: center;
+        color: var(--text-muted);
+        border: 1px dashed var(--border);
+        border-radius: var(--radius-lg);
+        line-height: 1.6;
+      }
+      .message {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        max-width: min(860px, 94%);
+      }
+      .message.user {
+        align-self: flex-end;
+      }
+      .message.agent,
+      .message.system {
+        align-self: flex-start;
+      }
+      .message-meta {
+        padding: 0 2px;
+        font-size: 0.8rem;
+        color: var(--text-faint);
+      }
+      .bubble {
+        padding: 16px 18px;
+        border-radius: 22px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+      .message.user .bubble {
+        background: linear-gradient(180deg, rgba(215, 163, 90, 0.21), rgba(215, 163, 90, 0.1));
+        border: 1px solid rgba(215, 163, 90, 0.28);
+      }
+      .message.agent .bubble {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid var(--border);
+      }
+      .message.system .bubble {
+        background: rgba(102, 181, 127, 0.08);
+        border: 1px solid rgba(102, 181, 127, 0.16);
+      }
+      .composer-card {
+        padding: 16px;
+        display: grid;
+        gap: 12px;
+      }
+      .composer-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        color: var(--text-muted);
+        font-size: 0.88rem;
+      }
+      textarea,
+      select,
+      input {
+        width: 100%;
+        border-radius: 18px;
+        border: 1px solid var(--border);
+        background: rgba(0, 0, 0, 0.14);
+        color: var(--text);
+        padding: 14px 16px;
+        outline: none;
+      }
+      textarea {
+        min-height: 116px;
+        resize: vertical;
+      }
+      .composer-actions {
+        display: flex;
+        justify-content: flex-end;
+      }
+      .modal-shell {
+        position: fixed;
+        inset: 0;
+        background: rgba(6, 5, 4, 0.62);
+        backdrop-filter: blur(18px);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        z-index: 100;
+      }
+      .modal-shell.open {
+        display: flex;
+      }
+      .modal {
+        width: min(520px, 100%);
+        padding: 22px;
+        border-radius: 28px;
+        border: 1px solid var(--border);
+        background: #211d19;
+        box-shadow: var(--shadow);
+        display: grid;
+        gap: 16px;
+      }
+      .modal h3 {
+        margin: 0;
+        font-size: 1.16rem;
+      }
+      .modal p {
+        margin: 0;
+        color: var(--text-muted);
+        line-height: 1.5;
+      }
+      .field-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+      }
+      .field {
+        display: grid;
+        gap: 8px;
+      }
+      .field label {
+        color: var(--text-muted);
+        font-size: 0.85rem;
+      }
+      .modal-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .code {
+        border-radius: 16px;
+        border: 1px solid var(--border);
+        background: rgba(0, 0, 0, 0.14);
+        padding: 14px;
+        color: var(--text-muted);
+        font-family: ui-monospace, Consolas, monospace;
+        font-size: 0.82rem;
+        line-height: 1.55;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+      @media (max-width: 960px) {
+        .app {
+          grid-template-columns: 1fr;
+        }
+        .sidebar {
+          border-right: 0;
+          border-bottom: 1px solid var(--border);
+        }
+        .summary-grid,
+        .field-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="app">
+      <aside class="sidebar">
+        <div class="brand">
+          <div class="brand-title">Office Core</div>
+          <button class="button small" id="new-conversation-btn">New</button>
+        </div>
+        <div>
+          <h2 class="section-title">Conversations</h2>
+        </div>
+        <div class="conversation-list" id="conversation-list"></div>
+        <div class="sidebar-card">
+          <p>Only the current room stays live. Older conversations keep compacted context and get fresh agents when reopened.</p>
+          <div class="actions" style="margin-top: 12px">
+            <button class="button small" id="copy-install-btn">Copy install</button>
+            <button class="button small" id="open-config-btn">Configure</button>
+          </div>
+        </div>
+      </aside>
+      <main class="main">
+        <section class="topbar">
+          <div>
+            <div class="eyebrow">Current project</div>
+            <h1 class="project-title" id="project-title">Office Core</h1>
+            <div class="project-subtitle" id="project-subtitle">One room. One visible thread. Fresh agents when you need them.</div>
+          </div>
+          <div class="actions">
+            <span class="pill" id="connection-pill">Connected</span>
+            <button class="button primary" id="open-add-agent-btn">Add Agent</button>
+            <button class="button" id="header-config-btn">Configure</button>
+          </div>
+        </section>
+        <section class="summary-card">
+          <div class="summary-grid">
+            <div class="summary-block">
+              <div class="summary-label">Summary</div>
+              <div class="summary-value" id="summary-text">No summary yet.</div>
+            </div>
+            <div class="summary-block">
+              <div class="summary-label">Latest directive</div>
+              <div class="summary-value" id="directive-text">No directive yet.</div>
+            </div>
+            <div class="summary-block">
+              <div class="summary-label">Machine</div>
+              <div class="summary-value" id="host-text">No host connected yet.</div>
+            </div>
+          </div>
+          <div class="active-agents" id="active-agents"></div>
+        </section>
+        <section class="thread-card">
+          <div class="thread-header">
+            <h2>Room</h2>
+            <p>Messages sent here are forwarded to the visible local agent shells attached to this project.</p>
+          </div>
+          <div class="thread" id="thread">
+            <div class="empty-thread">Start a conversation and then add the agents you need.</div>
+          </div>
+        </section>
+        <section class="composer-card">
+          <div class="composer-top">
+            <div id="composer-status">Broadcasting to every active agent in this room.</div>
+          </div>
+          <textarea id="composer-input" placeholder="Tell the room what needs to happen."></textarea>
+          <div class="composer-actions">
+            <button class="button primary" id="send-btn">Send</button>
+          </div>
+        </section>
+      </main>
+    </div>
+    <div class="modal-shell" id="add-agent-modal">
+      <div class="modal">
+        <div>
+          <h3>Add Agent</h3>
+          <p>Spawn a fresh local shell in the current project directory. The agent receives only onboarding.txt and this room’s summary.txt.</p>
+        </div>
+        <div class="field-grid">
+          <div class="field">
+            <label for="spawn-runner">Agent</label>
+            <select id="spawn-runner">
+              <option value="codex">Codex</option>
+              <option value="claude">Claude</option>
+            </select>
+          </div>
+          <div class="field">
+            <label for="spawn-effort">Effort</label>
+            <select id="spawn-effort">
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high" selected>High</option>
+            </select>
+          </div>
+          <div class="field">
+            <label for="spawn-host">Machine</label>
+            <select id="spawn-host"></select>
+          </div>
+          <div class="field">
+            <label for="spawn-name">Name</label>
+            <input id="spawn-name" readonly />
+          </div>
+        </div>
+        <div class="code" id="spawn-note"></div>
+        <div class="modal-actions">
+          <button class="button" data-close-modal="add-agent-modal">Cancel</button>
+          <button class="button primary" id="confirm-spawn-btn">Spawn</button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-shell" id="config-modal">
+      <div class="modal">
+        <div>
+          <h3>Configure</h3>
+          <p>Choose the control plane and the room to open by default.</p>
+        </div>
+        <div class="field">
+          <label for="config-api-base">API base</label>
+          <input id="config-api-base" />
+        </div>
+        <div class="field">
+          <label for="config-project-id">Project id</label>
+          <input id="config-project-id" />
+        </div>
+        <div class="field">
+          <label for="config-project-name">Display name</label>
+          <input id="config-project-name" placeholder="Optional for a new conversation" />
+        </div>
+        <div class="code" id="install-command"></div>
+        <div class="modal-actions">
+          <button class="button" data-close-modal="config-modal">Cancel</button>
+          <button class="button primary" id="save-config-btn">Save</button>
+        </div>
+      </div>
+    </div>
+    <script>
+      const STORAGE_KEY = "office-core.current-room.config.v1";
+      const CONVERSATIONS_KEY = "office-core.current-room.conversations.v1";
+      const LIVE_HOST_KEY = "office-core.current-room.live-host.v1";
+      const state = {
+        config: loadConfig(),
+        conversations: loadConversations(),
+        liveHost: loadLiveHost(),
+        project: null,
+        office: null,
+        focusTaskId: null,
+        selectedHostId: null,
+        selectedSessionId: null,
+        selectedAgentId: null,
+        pendingHostMoveProjectId: null,
+        isRefreshing: false,
+        projectEtag: null,
+        lastProjectSignature: "",
+        lastRoomSignature: "",
+        lastConversationSignature: "",
+      };
+      const els = {
+        conversationList: document.getElementById("conversation-list"),
+        projectTitle: document.getElementById("project-title"),
+        projectSubtitle: document.getElementById("project-subtitle"),
+        connectionPill: document.getElementById("connection-pill"),
+        summaryText: document.getElementById("summary-text"),
+        directiveText: document.getElementById("directive-text"),
+        hostText: document.getElementById("host-text"),
+        activeAgents: document.getElementById("active-agents"),
+        thread: document.getElementById("thread"),
+        composerInput: document.getElementById("composer-input"),
+        composerStatus: document.getElementById("composer-status"),
+        sendBtn: document.getElementById("send-btn"),
+        openAddAgentBtn: document.getElementById("open-add-agent-btn"),
+        addAgentModal: document.getElementById("add-agent-modal"),
+        spawnRunner: document.getElementById("spawn-runner"),
+        spawnEffort: document.getElementById("spawn-effort"),
+        spawnHost: document.getElementById("spawn-host"),
+        spawnName: document.getElementById("spawn-name"),
+        spawnNote: document.getElementById("spawn-note"),
+        confirmSpawnBtn: document.getElementById("confirm-spawn-btn"),
+        openConfigBtn: document.getElementById("open-config-btn"),
+        headerConfigBtn: document.getElementById("header-config-btn"),
+        configModal: document.getElementById("config-modal"),
+        configApiBase: document.getElementById("config-api-base"),
+        configProjectId: document.getElementById("config-project-id"),
+        configProjectName: document.getElementById("config-project-name"),
+        saveConfigBtn: document.getElementById("save-config-btn"),
+        installCommand: document.getElementById("install-command"),
+        copyInstallBtn: document.getElementById("copy-install-btn"),
+        newConversationBtn: document.getElementById("new-conversation-btn"),
+      };
+      init();
+      function init() {
+        hydrateConfigFromUrl();
+        bindEvents();
+        renderStaticConfig();
+        renderConversationList();
+        void refreshProject();
+        setInterval(() => {
+          void refreshProject();
+        }, 1500);
+      }
+      function bindEvents() {
+        els.sendBtn.addEventListener("click", () => void sendRoomMessage());
+        els.composerInput.addEventListener("keydown", (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            void sendRoomMessage();
+          }
+        });
+        els.openAddAgentBtn.addEventListener("click", () => openModal("add-agent-modal"));
+        els.openConfigBtn.addEventListener("click", () => openModal("config-modal"));
+        els.headerConfigBtn.addEventListener("click", () => openModal("config-modal"));
+        els.copyInstallBtn.addEventListener("click", () => void copyInstallCommand());
+        els.newConversationBtn.addEventListener("click", () => void createConversation());
+        els.confirmSpawnBtn.addEventListener("click", () => void queueSpawn());
+        els.saveConfigBtn.addEventListener("click", () => saveConfigFromModal());
+        els.spawnRunner.addEventListener("change", () => renderSpawnPreview());
+        els.spawnHost.addEventListener("change", () => {
+          state.selectedHostId = els.spawnHost.value || null;
+          renderSpawnPreview();
+        });
+        document.querySelectorAll("[data-close-modal]").forEach((button) => {
+          button.addEventListener("click", () => closeModal(button.getAttribute("data-close-modal")));
+        });
+        [els.addAgentModal, els.configModal].forEach((modal) => {
+          modal.addEventListener("click", (event) => {
+            if (event.target === modal) {
+              closeModal(modal.id);
+            }
+          });
+        });
+      }
+      function loadConfig() {
+        const defaults = {
+          apiBase: window.location.origin,
+          projectId: new URL(window.location.href).searchParams.get("projectId") || "prj_local",
+          projectName: "",
+        };
+        try {
+          const raw = localStorage.getItem(STORAGE_KEY);
+          if (!raw) {
+            return defaults;
+          }
+          return { ...defaults, ...JSON.parse(raw) };
+        } catch {
+          return defaults;
+        }
+      }
+      function loadLiveHost() {
+        try {
+          const raw = localStorage.getItem(LIVE_HOST_KEY);
+          if (!raw) {
+            return null;
+          }
+          const parsed = JSON.parse(raw);
+          if (!parsed?.hostId || !parsed?.projectId) {
+            return null;
+          }
+          return {
+            hostId: String(parsed.hostId),
+            projectId: String(parsed.projectId),
+            displayName: parsed.displayName ? String(parsed.displayName) : "",
+            updatedAt: parsed.updatedAt ? String(parsed.updatedAt) : "",
+          };
+        } catch {
+          return null;
+        }
+      }
+      function saveLiveHost() {
+        if (!state.liveHost?.hostId || !state.liveHost?.projectId) {
+          localStorage.removeItem(LIVE_HOST_KEY);
+          return;
+        }
+        localStorage.setItem(LIVE_HOST_KEY, JSON.stringify(state.liveHost));
+      }
+      function loadConversations() {
+        try {
+          const raw = localStorage.getItem(CONVERSATIONS_KEY);
+          const parsed = raw ? JSON.parse(raw) : [];
+          return Array.isArray(parsed) ? parsed : [];
+        } catch {
+          return [];
+        }
+      }
+      function saveConfig() {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(state.config));
+      }
+      function saveConversations() {
+        localStorage.setItem(CONVERSATIONS_KEY, JSON.stringify(state.conversations.slice(0, 40)));
+      }
+      function hydrateConfigFromUrl() {
+        const url = new URL(window.location.href);
+        const projectId = url.searchParams.get("projectId");
+        const apiBase = url.searchParams.get("apiBase");
+        if (projectId) {
+          state.config.projectId = projectId;
+        }
+        if (apiBase) {
+          state.config.apiBase = apiBase.replace(/\/$/, "");
+        }
+        saveConfig();
+      }
+      function renderStaticConfig() {
+        els.configApiBase.value = state.config.apiBase;
+        els.configProjectId.value = state.config.projectId;
+        els.configProjectName.value = state.config.projectName || "";
+        els.installCommand.textContent = buildInstallCommand();
+      }
+      async function refreshProject() {
+        if (state.isRefreshing || !state.config.projectId) {
+          return;
+        }
+        state.isRefreshing = true;
+        try {
+          const payload = await requestJson(`/api/projects/${encodeURIComponent(state.config.projectId)}`, { etag: state.projectEtag });
+          if (payload === null) {
+            return;
+          }
+          state.projectEtag = payload.__etag || null;
+          state.project = payload;
+          state.office = payload.office || null;
+          state.focusTaskId = state.office?.current_project?.focus_task_id || payload.active_task_id || null;
+          const onlineHosts = (state.office?.hosts || []).filter((host) => host.online);
+          if (onlineHosts.length > 0) {
+            const live = onlineHosts[0];
+            state.liveHost = {
+              hostId: live.host_id,
+              projectId: state.config.projectId,
+              displayName: live.display_name || live.host_id,
+              updatedAt: new Date().toISOString(),
+            };
+            saveLiveHost();
+            state.pendingHostMoveProjectId = null;
+          }
+          if (!state.selectedHostId || !onlineHosts.some((host) => host.host_id === state.selectedHostId)) {
+            state.selectedHostId = onlineHosts[0]?.host_id || state.liveHost?.hostId || state.office?.hosts?.[0]?.host_id || null;
+          }
+          reconcileSelectedSession();
+          rememberConversation(payload);
+          renderProject();
+          if (!onlineHosts.length && state.liveHost?.hostId && state.liveHost.projectId && state.liveHost.projectId !== state.config.projectId) {
+            if (state.pendingHostMoveProjectId !== state.config.projectId) {
+              state.pendingHostMoveProjectId = state.config.projectId;
+              void ensureHostReadyForCurrentRoom(state.liveHost.hostId).then((moved) => {
+                if (!moved && state.pendingHostMoveProjectId === state.config.projectId) {
+                  state.pendingHostMoveProjectId = null;
+                }
+              });
+            }
+          }
+        } catch (error) {
+          console.error(error);
+          els.connectionPill.textContent = "Disconnected";
+        } finally {
+          state.isRefreshing = false;
+        }
+      }
+      function renderProject() {
+        if (!state.project || !state.office) {
+          return;
+        }
+        const projectSignature = JSON.stringify({
+          projectId: state.project.id,
+          headline: state.office.current_project?.headline,
+          hosts: state.office.hosts?.map((host) => ({
+            host_id: host.host_id,
+            status: host.status,
+            sessions: (host.running_sessions || []).map((session) => session.session_id),
+          })),
+          settings: state.office.room?.settings,
+          roomSeq: state.project.room?.next_seq,
+        });
+        if (projectSignature === state.lastProjectSignature) {
+          return;
+        }
+        state.lastProjectSignature = projectSignature;
+        els.connectionPill.textContent = state.office.hosts?.some((host) => host.online) ? "Connected" : "Waiting for host";
+        els.projectTitle.textContent = state.project.name || state.project.id || state.config.projectId;
+        els.projectSubtitle.textContent = state.office.current_project?.headline || "This room keeps the current summary and fresh local agents.";
+        els.summaryText.textContent = state.office.current_project?.headline || "No summary yet.";
+        els.directiveText.textContent = state.office.attention?.human_directives?.[0]?.text || "No directive yet.";
+        els.hostText.textContent = formatHostSummary();
+        renderActiveAgents();
+        renderConversationList();
+        renderThread();
+        renderComposerStatus();
+        renderSpawnPreview();
+      }
+      function formatHostSummary() {
+        const host = (state.office?.hosts || []).find((entry) => entry.host_id === state.selectedHostId) || state.office?.hosts?.[0];
+        if (!host) {
+          if (state.liveHost?.displayName && state.liveHost?.projectId && state.liveHost.projectId !== state.config.projectId) {
+            return `${state.liveHost.displayName} is active in another room and will move here when needed.`;
+          }
+          return "No host connected yet.";
+        }
+        const running = host.running_sessions?.length || 0;
+        const queued = host.queued_commands?.length || 0;
+        return `${host.display_name} · ${host.online ? "online" : "offline"} · ${running} active · ${queued} queued`;
+      }
+      function renderConversationList() {
+        const signature = JSON.stringify({
+          current: state.config.projectId,
+          items: state.conversations.map((entry) => [entry.projectId, entry.name, entry.lastOpenedAt]),
+        });
+        if (signature === state.lastConversationSignature) {
+          return;
+        }
+        state.lastConversationSignature = signature;
+        els.conversationList.innerHTML = "";
+        if (!state.conversations.length) {
+          const empty = document.createElement("div");
+          empty.className = "conversation-meta";
+          empty.textContent = "No saved conversations yet.";
+          els.conversationList.appendChild(empty);
+          return;
+        }
+        state.conversations.forEach((entry) => {
+          const button = document.createElement("button");
+          button.className = `conversation${entry.projectId === state.config.projectId ? " active" : ""}`;
+          button.innerHTML = `
+            <div class="conversation-name">${escapeHtml(entry.name || entry.projectId)}</div>
+            <div class="conversation-meta">${escapeHtml(entry.projectId)} · ${formatRelative(entry.lastOpenedAt)}</div>
+          `;
+          button.addEventListener("click", () => {
+            void activateConversation(entry.projectId, entry.name || entry.projectId);
+          });
+          els.conversationList.appendChild(button);
+        });
+      }
+      function renderActiveAgents() {
+        els.activeAgents.innerHTML = "";
+        const sessions = getRunningSessions();
+        if (!sessions.length) {
+          const note = document.createElement("div");
+          note.className = "conversation-meta";
+          note.textContent = "No active agents in this room yet.";
+          els.activeAgents.appendChild(note);
+          return;
+        }
+        sessions.forEach((session) => {
+          const chip = document.createElement("div");
+          chip.className = `agent-chip${state.selectedSessionId === session.session_id ? " active" : ""}`;
+          chip.innerHTML = `
+            <div>
+              <div class="agent-name">${escapeHtml(session.agent_id)}</div>
+              <div class="agent-meta">${escapeHtml(labelForRunner(session.runner))} · ${escapeHtml(session.mode || "attach")}</div>
+            </div>
+          `;
+          chip.addEventListener("click", () => {
+            state.selectedSessionId = session.session_id;
+            state.selectedAgentId = session.agent_id;
+            renderComposerStatus();
+            renderActiveAgents();
+          });
+          const remove = document.createElement("button");
+          remove.className = "remove-agent";
+          remove.type = "button";
+          remove.textContent = "×";
+          remove.addEventListener("click", (event) => {
+            event.stopPropagation();
+            void removeSession(session.host_id, session.session_id);
+          });
+          chip.appendChild(remove);
+          els.activeAgents.appendChild(chip);
+        });
+      }
+      function renderThread() {
+        const messages = (state.office?.room?.recent_messages || []).slice(-120);
+        const nearBottom = isNearBottom(els.thread);
+        const signature = JSON.stringify(messages.map((message) => [message.seq, message.text, message.author_label, message.session_id, message.target_session_ids, message.target_agent_ids]));
+        if (signature === state.lastRoomSignature) {
+          return;
+        }
+        state.lastRoomSignature = signature;
+        els.thread.innerHTML = "";
+        if (!messages.length) {
+          const empty = document.createElement("div");
+          empty.className = "empty-thread";
+          empty.textContent = "This room is quiet. Start the conversation and then add the agents you need.";
+          els.thread.appendChild(empty);
+          return;
+        }
+        messages.forEach((message) => {
+          const wrapper = document.createElement("div");
+          wrapper.className = `message ${normalizeAuthorType(message.author_type)}`;
+          const meta = document.createElement("div");
+          meta.className = "message-meta";
+          meta.textContent = `${message.author_label || message.author_id || "system"} · ${formatTime(message.created_at)}`;
+          const bubble = document.createElement("div");
+          bubble.className = "bubble";
+          bubble.textContent = message.text || "";
+          wrapper.appendChild(meta);
+          wrapper.appendChild(bubble);
+          const targetText = describeMessageTarget(message);
+          if (targetText) {
+            const target = document.createElement("div");
+            target.className = "message-meta";
+            target.textContent = targetText;
+            wrapper.appendChild(target);
+          }
+          els.thread.appendChild(wrapper);
+        });
+        if (nearBottom) {
+          requestAnimationFrame(() => {
+            els.thread.scrollTop = els.thread.scrollHeight;
+          });
+        }
+      }
+      function renderComposerStatus() {
+        if (state.selectedSessionId && state.selectedAgentId) {
+          els.composerStatus.textContent = `Sending to ${state.selectedAgentId}.`;
+          return;
+        }
+        if (state.selectedHostId && !isBroadcastMode()) {
+          const host = (state.office?.hosts || []).find((entry) => entry.host_id === state.selectedHostId);
+          els.composerStatus.textContent = `Sending to ${host?.display_name || state.selectedHostId}.`;
+          return;
+        }
+        els.composerStatus.textContent = "Broadcasting to every active agent in this room.";
+      }
+      function renderSpawnPreview() {
+        const hosts = state.office?.hosts || [];
+        const fallbackHosts = hosts.length
+          ? hosts
+          : state.liveHost?.hostId
+            ? [
+                {
+                  host_id: state.liveHost.hostId,
+                  display_name: state.liveHost.displayName || state.liveHost.hostId,
+                  online: false,
+                  default_workdir: "",
+                },
+              ]
+            : [];
+        if (els.spawnHost.options.length !== fallbackHosts.length) {
+          els.spawnHost.innerHTML = fallbackHosts
+            .map((host) => `<option value="${escapeAttr(host.host_id)}">${escapeHtml(host.display_name)}${host.online ? "" : " (move here)"}</option>`)
+            .join("");
+        }
+        els.spawnHost.value = state.selectedHostId || fallbackHosts[0]?.host_id || "";
+        const runner = els.spawnRunner.value || "codex";
+        els.spawnName.value = getNextAgentName(runner);
+        const host = fallbackHosts.find((entry) => entry.host_id === els.spawnHost.value);
+        els.spawnNote.textContent = host
+          ? host.online
+            ? `${host.display_name} will open a visible ${labelForRunner(runner)} shell in ${host.default_workdir || "its configured project directory"}.`
+            : `${host.display_name} will be moved into this room, then a visible ${labelForRunner(runner)} shell will open here.`
+          : "Select a connected machine to spawn this room agent.";
+      }
+      function isBroadcastMode() {
+        return !state.selectedSessionId && !state.selectedAgentId;
+      }
+      async function sendRoomMessage() {
+        const text = els.composerInput.value.trim();
+        if (!text || !state.config.projectId) {
+          return;
+        }
+        const target = buildTargetPayload();
+        if (isBroadcastMode() && !state.office?.room?.settings?.all_agents_listening) {
+          if (!target.target_host_ids && !target.target_session_ids && !target.target_agent_ids) {
+            alert("Turn on All agents listening or select a target agent/machine first.");
+            return;
+          }
+        }
+        await requestJson(`/api/projects/${encodeURIComponent(state.config.projectId)}/room/messages`, {
+          method: "POST",
+          body: {
+            author_type: "user",
+            author_id: "human",
+            author_label: state.office?.room?.settings?.conductor_name || "You",
+            text,
+            task_id: state.focusTaskId,
+            ...target,
+          },
+        });
+        els.composerInput.value = "";
+        state.lastProjectSignature = "";
+        state.lastRoomSignature = "";
+        void refreshProject();
+      }
+      async function queueSpawn() {
+        const hostId = els.spawnHost.value;
+        const runner = els.spawnRunner.value;
+        const effort = els.spawnEffort.value;
+        let host = (state.office?.hosts || []).find((entry) => entry.host_id === hostId);
+        if (!host) {
+          alert("Choose a connected machine first.");
+          return;
+        }
+        if (!host.online) {
+          const moved = await ensureHostReadyForCurrentRoom(hostId);
+          if (!moved) {
+            alert("That machine is offline.");
+            return;
+          }
+          await refreshProject();
+          host = (state.office?.hosts || []).find((entry) => entry.host_id === hostId);
+          if (!host?.online) {
+            alert("That machine is offline.");
+            return;
+          }
+        }
+        const agentId = getNextAgentName(runner);
+        await requestJson(`/api/projects/${encodeURIComponent(state.config.projectId)}/local-host/commands/queue`, {
+          method: "POST",
+          body: {
+            host_id: hostId,
+            runner,
+            agent_id: agentId,
+            mode: "attach",
+            effort,
+            workdir: host.default_workdir || "",
+            task_id: state.focusTaskId,
+            prompt: `Join the current room as ${agentId}. Read onboarding.txt and summary.txt, then wait for room prompts.`,
+          },
+        });
+        closeModal("add-agent-modal");
+        state.selectedHostId = hostId;
+        state.selectedSessionId = null;
+        state.selectedAgentId = agentId;
+        state.lastProjectSignature = "";
+        state.lastRoomSignature = "";
+        void refreshProject();
+      }
+      async function removeSession(hostId, sessionId) {
+        await requestJson(`/api/projects/${encodeURIComponent(state.config.projectId)}/local-host/sessions/remove`, {
+          method: "POST",
+          body: {
+            host_id: hostId,
+            session_id: sessionId,
+          },
+        });
+        if (state.selectedSessionId === sessionId) {
+          clearTarget();
+        }
+        state.lastProjectSignature = "";
+        state.lastRoomSignature = "";
+        void refreshProject();
+      }
+      async function createConversation() {
+        const rawName = window.prompt("Name the new conversation.");
+        if (!rawName) {
+          return;
+        }
+        const name = rawName.trim();
+        if (!name) {
+          return;
+        }
+        const projectId = slugify(name);
+        await requestJson("/api/projects", {
+          method: "POST",
+          body: {
+            project_id: projectId,
+            name,
+          },
+        });
+        rememberConversation({ id: projectId, name });
+        await activateConversation(projectId, name);
+      }
+      async function activateConversation(projectId, projectName) {
+        const nextProjectId = String(projectId || "").trim();
+        if (!nextProjectId) {
+          return;
+        }
+        const previousProjectId = state.config.projectId;
+        const currentOnlineHost = (state.office?.hosts || []).find((host) => host.online);
+        const hostId = state.selectedHostId || currentOnlineHost?.host_id || state.liveHost?.hostId || null;
+        const sourceProjectId = currentOnlineHost?.host_id === hostId ? previousProjectId : state.liveHost?.projectId || previousProjectId;
+        if (hostId && sourceProjectId && sourceProjectId !== nextProjectId) {
+          try {
+            await requestJson(`/api/projects/${encodeURIComponent(sourceProjectId)}/local-host/switch`, {
+              method: "POST",
+              body: {
+                host_id: hostId,
+                target_project_id: nextProjectId,
+                target_project_name: projectName || nextProjectId,
+              },
+            });
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        state.config.projectId = nextProjectId;
+        state.config.projectName = projectName || nextProjectId;
+        state.selectedSessionId = null;
+        state.selectedAgentId = null;
+        saveConfig();
+        syncUrl();
+        state.lastProjectSignature = "";
+        state.lastRoomSignature = "";
+        await refreshProject();
+        if (hostId && sourceProjectId && sourceProjectId !== nextProjectId) {
+          await waitForHostOnline(nextProjectId, hostId);
+          state.lastProjectSignature = "";
+          state.lastRoomSignature = "";
+          await refreshProject();
+        }
+      }
+      async function ensureHostReadyForCurrentRoom(hostId) {
+        const knownHost = state.liveHost?.hostId === hostId ? state.liveHost : null;
+        const sourceProjectId = knownHost?.projectId;
+        if (!sourceProjectId || sourceProjectId === state.config.projectId) {
+          return false;
+        }
+        try {
+          await requestJson(`/api/projects/${encodeURIComponent(sourceProjectId)}/local-host/switch`, {
+            method: "POST",
+            body: {
+              host_id: hostId,
+              target_project_id: state.config.projectId,
+              target_project_name: state.config.projectName || state.project?.name || state.config.projectId,
+            },
+          });
+        } catch (error) {
+          console.error(error);
+          return false;
+        }
+        const moved = await waitForHostOnline(state.config.projectId, hostId);
+        if (moved) {
+          state.pendingHostMoveProjectId = null;
+        }
+        return moved;
+      }
+      async function waitForHostOnline(projectId, hostId) {
+        const startedAt = Date.now();
+        while (Date.now() - startedAt < 15000) {
+          try {
+            const payload = await requestJson(`/api/projects/${encodeURIComponent(projectId)}`);
+            const host = (payload.office?.hosts || []).find((entry) => entry.host_id === hostId);
+            if (host?.online) {
+              return true;
+            }
+          } catch (error) {
+            console.error(error);
+          }
+          await new Promise((resolve) => setTimeout(resolve, 600));
+        }
+        return false;
+      }
+      function rememberConversation(project) {
+        const projectId = String(project?.id || project?.project_id || state.config.projectId || "").trim();
+        if (!projectId) {
+          return;
+        }
+        const name = String(project?.name || projectId);
+        const existingIndex = state.conversations.findIndex((entry) => entry.projectId === projectId);
+        const entry = {
+          projectId,
+          name,
+          lastOpenedAt: new Date().toISOString(),
+        };
+        if (existingIndex >= 0) {
+          state.conversations.splice(existingIndex, 1);
+        }
+        state.conversations.unshift(entry);
+        saveConversations();
+      }
+      function openModal(id) {
+        renderSpawnPreview();
+        document.getElementById(id)?.classList.add("open");
+      }
+      function closeModal(id) {
+        document.getElementById(id)?.classList.remove("open");
+      }
+      function saveConfigFromModal() {
+        state.config.apiBase = els.configApiBase.value.trim().replace(/\/$/, "") || window.location.origin;
+        state.config.projectId = els.configProjectId.value.trim() || state.config.projectId;
+        state.config.projectName = els.configProjectName.value.trim();
+        saveConfig();
+        syncUrl();
+        renderStaticConfig();
+        closeModal("config-modal");
+        state.lastProjectSignature = "";
+        state.lastConversationSignature = "";
+        void refreshProject();
+      }
+      function syncUrl() {
+        const url = new URL(window.location.href);
+        url.searchParams.set("projectId", state.config.projectId);
+        if (state.config.apiBase && state.config.apiBase !== window.location.origin) {
+          url.searchParams.set("apiBase", state.config.apiBase);
+        } else {
+          url.searchParams.delete("apiBase");
+        }
+        window.history.replaceState({}, "", url);
+      }
+      async function copyInstallCommand() {
+        const command = buildInstallCommand();
+        try {
+          await navigator.clipboard.writeText(command);
+        } catch {
+          window.prompt("Copy install command", command);
+        }
+      }
+      function buildInstallCommand() {
+        return `npm install -g "${state.config.apiBase}/downloads/office-core.tgz"; office-core install --baseUrl "${state.config.apiBase}" --project "${state.config.projectId}" --workdir "C:\\path\\to\\project"`;
+      }
+      function buildTargetPayload() {
+        if (isBroadcastMode()) {
+          if (state.office?.room?.settings?.all_agents_listening) {
+            return { target_host_ids: null, target_session_ids: null, target_agent_ids: null };
+          }
+          if (state.selectedHostId) {
+            return { target_host_ids: [state.selectedHostId], target_session_ids: null, target_agent_ids: null };
+          }
+          return { target_host_ids: null, target_session_ids: null, target_agent_ids: null };
+        }
+        if (state.selectedSessionId && state.selectedAgentId) {
+          return {
+            target_session_ids: [state.selectedSessionId],
+            target_agent_ids: [state.selectedAgentId],
+            target_host_ids: null,
+          };
+        }
+        if (state.selectedHostId) {
+          return { target_host_ids: [state.selectedHostId], target_session_ids: null, target_agent_ids: null };
+        }
+        return { target_host_ids: null, target_session_ids: null, target_agent_ids: null };
+      }
+      function getRunningSessions() {
+        const sessions = [];
+        for (const host of state.office?.hosts || []) {
+          for (const session of host.running_sessions || []) {
+            sessions.push({ ...session, host_id: host.host_id, host_name: host.display_name });
+          }
+        }
+        return sessions;
+      }
+      function getNextAgentName(runner) {
+        const base = runner === "claude" ? "Claude" : "Codex";
+        const used = new Set();
+        for (const host of state.office?.hosts || []) {
+          for (const session of host.running_sessions || []) {
+            used.add(session.agent_id);
+          }
+          for (const command of host.queued_commands || []) {
+            if (command.agent_id) {
+              used.add(command.agent_id);
+            }
+          }
+        }
+        let index = 1;
+        while (used.has(`${base} #${index}`)) {
+          index += 1;
+        }
+        return `${base} #${index}`;
+      }
+      function reconcileSelectedSession() {
+        const sessions = getRunningSessions();
+        if (state.selectedSessionId && sessions.some((session) => session.session_id === state.selectedSessionId)) {
+          return;
+        }
+        state.selectedSessionId = null;
+        state.selectedAgentId = null;
+      }
+      function clearTarget() {
+        state.selectedSessionId = null;
+        state.selectedAgentId = null;
+        renderActiveAgents();
+        renderComposerStatus();
+      }
+      function describeMessageTarget(message) {
+        if (message.target_session_ids?.length || message.target_agent_ids?.length) {
+          return "Targeted message";
+        }
+        if (message.target_host_ids?.length) {
+          return "Sent to one machine";
+        }
+        if (message.reply_to_seq != null) {
+          return `Reply to #${message.reply_to_seq}`;
+        }
+        return "";
+      }
+      function normalizeAuthorType(authorType) {
+        if (authorType === "user" || authorType === "agent" || authorType === "system") {
+          return authorType;
+        }
+        return "system";
+      }
+      function formatRelative(value) {
+        if (!value) return "just now";
+        const deltaMs = Date.now() - new Date(value).getTime();
+        const deltaMinutes = Math.round(deltaMs / 60000);
+        if (deltaMinutes < 1) return "just now";
+        if (deltaMinutes < 60) return `${deltaMinutes}m ago`;
+        const deltaHours = Math.round(deltaMinutes / 60);
+        if (deltaHours < 24) return `${deltaHours}h ago`;
+        const deltaDays = Math.round(deltaHours / 24);
+        return `${deltaDays}d ago`;
+      }
+      function formatTime(value) {
+        try {
+          return new Date(value).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+        } catch {
+          return "";
+        }
+      }
+      function labelForRunner(runner) {
+        return runner === "claude" ? "Claude" : "Codex";
+      }
+      async function requestJson(pathname, options = {}) {
+        const url = pathname.startsWith("http") ? pathname : `${state.config.apiBase}${pathname}`;
+        const headers = { "content-type": "application/json" };
+        if (options.etag) {
+          headers["if-none-match"] = options.etag;
+        }
+        const response = await fetch(url, {
+          method: options.method || "GET",
+          headers,
+          body: options.body ? JSON.stringify(options.body) : undefined,
+        });
+        if (response.status === 304) {
+          return null;
+        }
+        if (!response.ok) {
+          throw new Error((await response.text()) || `${response.status}`);
+        }
+        const data = await response.json();
+        data.__etag = response.headers.get("etag") || null;
+        return data;
+      }
+      function slugify(value) {
+        return `prj_${value
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "_")
+          .replace(/^_+|_+$/g, "")
+          .slice(0, 40) || "room"}`;
+      }
+      function escapeHtml(value) {
+        return String(value)
+          .replaceAll("&", "&amp;")
+          .replaceAll("<", "&lt;")
+          .replaceAll(">", "&gt;")
+          .replaceAll('"', "&quot;")
+          .replaceAll("'", "&#39;");
+      }
+      function escapeAttr(value) {
+        return escapeHtml(value);
+      }
+      function isNearBottom(element) {
+        return element.scrollHeight - element.scrollTop - element.clientHeight < 120;
+      }
+    </script>
+  </body>
+</html>