clay-server 2.31.0 → 2.32.0-beta.10

package/lib/public/css/mates.css

@@ -616,6 +616,49 @@
   font-weight: 600;
 }
 
+/* Vendor toggle in mate header (split pill) */
+.mate-vendor-toggle {
+  display: flex;
+  align-items: center;
+  border: 1px solid rgba(255,255,255,0.4);
+  border-radius: 6px;
+  overflow: hidden;
+  height: 24px;
+}
+.mate-vendor-btn {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 6px;
+  height: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  color: rgba(255,255,255,0.5);
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+.mate-vendor-btn:first-child { border-right: 1px solid rgba(255,255,255,0.4); }
+.mate-vendor-btn.active {
+  background: rgba(255,255,255,0.25);
+  color: #fff;
+  font-weight: 600;
+}
+.mate-vendor-btn.disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.mate-vendor-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  background: #fff;
+}
+.mate-vendor-label {
+  pointer-events: none;
+}
+
 /* Collapse button inside mate header: white to match header style */
 .mate-sidebar-header .sidebar-collapse-btn {
   color: rgba(255,255,255,0.7);

package/lib/public/css/mention.css

@@ -8,18 +8,44 @@
   bottom: 100%;
   left: 0;
   right: 0;
-  max-height: 240px;
+  max-height: 280px;
   overflow-y: auto;
-  background: var(--bg-alt);
+  background: var(--sidebar-bg);
   border: 1px solid var(--border);
-  border-radius: 14px;
+  border-radius: 10px;
   margin-bottom: 8px;
-  box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.4);
+  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15);
   z-index: 10;
 }
 
 #mention-menu.visible { display: block; }
 
+.mention-hint {
+  position: sticky;
+  top: 0;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--sidebar-bg);
+  border-bottom: 1px solid var(--border-subtle);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mention-close-btn {
+  border: none;
+  background: none;
+  color: var(--text-dimmer);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+}
+.mention-close-btn:hover {
+  color: var(--text-secondary);
+}
+
 .mention-item {
   display: flex;
   align-items: center;
@@ -36,12 +62,30 @@
   background: rgba(var(--overlay-rgb), 0.05);
 }
 
+.mention-item-avatar-wrap {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
 .mention-item-avatar {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   flex-shrink: 0;
 }
+.mention-item-vendor-badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1.5px solid var(--sidebar-bg);
+  background: #fff;
+  object-fit: cover;
+  object-position: center;
+}
 
 .mention-item-info {
   flex: 1;

package/lib/public/css/menus.css

@@ -493,7 +493,7 @@
   border-radius: 12px;
   padding: 4px 0;
   min-width: 220px;
-  max-height: 420px;
+  max-height: min(600px, calc(100vh - 120px));
   overflow-y: auto;
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
   z-index: 200;

package/lib/public/css/messages.css

@@ -1688,6 +1688,7 @@ pre.mermaid-error {
 /* DM mode: hide project-specific UI elements */
 #main-column.dm-mode .msg-group,
 #main-column.dm-mode #suggestion-chips,
+#main-column.dm-mode #ghost-suggestion,
 #main-column.dm-mode .tool-group {
   display: none;
 }
@@ -1696,6 +1697,7 @@ pre.mermaid-error {
 #main-column.dm-mode #stt-btn,
 #main-column.dm-mode #config-chip-wrap,
 #main-column.dm-mode #context-mini,
+#main-column.dm-mode #context-sources-btn-wrap,
 #main-column.dm-mode #slash-menu {
   display: none !important;
 }

package/lib/public/css/notifications-center.css

@@ -81,6 +81,13 @@
 }
 .notif-banner-icon .lucide { width: 16px; height: 16px; }
 .notif-banner-emoji { font-size: 18px; line-height: 1; }
+.notif-banner-avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+  display: block;
+}
 
 .notif-banner-body {
   flex: 1;
@@ -180,6 +187,25 @@
 }
 .notif-banner-close .lucide { width: 12px; height: 12px; }
 
+/* Update available banner */
+.notif-banner-update .notif-banner-icon {
+  background: none;
+}
+.notif-banner-update-now {
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: var(--accent, #6c5ce7);
+  color: #fff;
+  transition: opacity 0.15s;
+}
+.notif-banner-update-now:hover { opacity: 0.85; }
+.notif-banner-update-now:disabled { opacity: 0.6; cursor: default; }
+
 /* ========================================================
    Mobile
    ======================================================== */

package/lib/public/css/tooltip.css

@@ -18,3 +18,50 @@
 }
 
 .tooltip.visible { opacity: 1; }
+
+.tooltip.multi-line {
+  white-space: pre-line;
+  text-align: left;
+  max-width: 320px;
+  line-height: 1.5;
+}
+
+/* Context sources tooltip */
+.ctx-tip-header {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.ctx-tip-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  color: var(--text);
+  font-size: 12px;
+}
+
+.ctx-tip-row .lucide {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+.ctx-tip-favicon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border-radius: 2px;
+}
+
+.ctx-tip-row span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 260px;
+}

package/lib/public/index.html

@@ -40,10 +40,6 @@
   body.wide-view:not(.mate-dm-active) .tool-group{max-width:100%!important}
   body.wide-view:not(.mate-dm-active) .turn-meta{max-width:100%!important}
 }
-#ask-mate-btn::before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(135deg,#4ecdc4 0%,#556bf7 33%,#a855f7 55%,#f857a6 78%,#ff6b6b 100%)!important;border-radius:inherit!important;opacity:0;transform:scale(0.3);transition:opacity 0.3s ease,transform 0.35s cubic-bezier(0.34,1.56,0.64,1);z-index:-1}
-#ask-mate-btn:hover::before{opacity:1!important;transform:scale(1)!important}
-#ask-mate-btn:hover{border-color:transparent!important;background:transparent!important;transform:translateY(-1px);box-shadow:0 2px 12px rgba(148,130,247,0.4)}
-#ask-mate-btn:hover .ask-mate-label{background:none!important;-webkit-text-fill-color:#fff!important}
 </style>
 </head>
 <body>
@@ -219,15 +215,7 @@
               <button id="session-search-clear" type="button" aria-label="Clear search"><i data-lucide="x"></i></button>
             </div>
           </div>
-          <div id="files-header-content" class="hidden">
-            <div class="session-list-header">
-              <span>File Browser</span>
-              <div class="session-list-header-actions">
-                <button id="file-panel-refresh" type="button" title="Refresh file tree"><i data-lucide="refresh-cw"></i></button>
-                <button id="file-panel-close" type="button" title="Close file browser"><i data-lucide="x"></i></button>
-              </div>
-            </div>
-          </div>
+          <div id="files-header-content" class="hidden"></div>
         </div>
         <div id="ralph-loop-section"></div>
         <div id="sidebar-panel-projects" class="sidebar-panel hidden">
@@ -244,6 +232,15 @@
           </div>
         </div>
         <div id="sidebar-panel-files" class="sidebar-panel hidden">
+          <div class="fb-titlebar">
+            <button id="file-panel-refresh" type="button" title="Refresh file tree"><i data-lucide="refresh-cw"></i></button>
+            <span class="fb-titlebar-title">File Browser</span>
+            <button id="file-panel-close" type="button" title="Close file browser"><i data-lucide="x"></i></button>
+          </div>
+          <div class="fb-search-bar">
+            <i data-lucide="search" class="fb-search-icon"></i>
+            <input id="fb-search-input" type="text" placeholder="Search files..." autocomplete="off" spellcheck="false" />
+          </div>
           <div id="file-tree"></div>
         </div>
       </div>
@@ -256,6 +253,7 @@
       <div class="mate-sidebar-header" id="mate-sidebar-header">
         <img id="mate-sidebar-avatar" class="mate-sidebar-avatar" alt="">
         <span id="mate-sidebar-name" class="mate-sidebar-name"></span>
+        <div id="mate-vendor-toggle" class="mate-vendor-toggle"></div>
         <div id="mate-sidebar-seed-tooltip" class="mate-seed-tooltip hidden"></div>
         <button id="mate-sidebar-toggle-btn" class="sidebar-collapse-btn" title="Collapse sidebar"><i data-lucide="panel-left-close"></i></button>
       </div>
@@ -354,6 +352,7 @@
         <div class="status">
           <button id="debate-pdf-btn" class="hidden" title="Export debate as PDF"><i data-lucide="download"></i></button>
           <button id="find-in-session-btn" title="Search in session (Ctrl+F)"><i data-lucide="search"></i></button>
+          <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
         </div>
       </div>
       <div id="main-panels">
@@ -446,15 +445,6 @@
       <div id="input-wrapper">
         <div id="mention-menu"></div>
         <div id="slash-menu"></div>
-        <div id="context-sources-bar">
-          <div id="context-sources-chips"></div>
-          <button id="context-sources-add" type="button" title="Add context source"><i data-lucide="plus"></i><span>Context Sources</span></button>
-          <div id="context-sources-picker" class="hidden">
-            <div class="context-picker-section" id="context-picker-email"></div>
-            <div class="context-picker-section" id="context-picker-terminals"></div>
-            <div class="context-picker-section" id="context-picker-tabs"></div>
-          </div>
-        </div>
         <div id="input-row">
           <div id="context-mini" class="hidden">
             <div class="context-mini-bar">
@@ -464,16 +454,38 @@
           </div>
           <div id="image-preview-bar"></div>
           <div id="suggestion-chips" class="hidden"></div>
-          <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send" dir="auto"></textarea>
+          <div id="input-textarea-wrap">
+            <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send" dir="auto"></textarea>
+            <div id="ghost-suggestion" class="hidden" aria-hidden="true"></div>
+          </div>
           <div id="input-bottom">
             <div id="attach-wrap">
-              <button id="attach-file-btn" type="button" aria-label="Attach file" title="Attach file"><i data-lucide="paperclip"></i></button>
-              <button id="attach-image-btn" type="button" aria-label="Attach image" title="Attach image"><i data-lucide="image"></i></button>
+              <button id="input-more-btn" type="button" aria-label="More options" title="More options" class="mobile-only"><i data-lucide="plus"></i></button>
+              <button id="attach-file-btn" type="button" aria-label="Attach file" title="Attach file" class="desktop-only"><i data-lucide="paperclip"></i></button>
+              <button id="attach-image-btn" type="button" aria-label="Attach image" title="Attach image" class="desktop-only"><i data-lucide="image"></i></button>
               <button id="stt-btn" type="button" aria-label="Voice input" title="Voice input"><i data-lucide="mic"></i></button>
               <button id="schedule-btn" type="button" aria-label="Schedule message" title="Schedule message"><i data-lucide="clock"></i></button>
-              <button id="ask-mate-btn" type="button" aria-label="Ask Mate"><span class="ask-mate-label">@ Ask Mate</span></button>
+              <button id="ask-mate-btn" type="button" aria-label="Ask Mate" title="Ask a Mate for advice on this session"><i data-lucide="at-sign"></i></button>
+              <div id="context-sources-btn-wrap" class="desktop-only">
+                <button id="context-sources-add" type="button" title="Add context sources"><i data-lucide="library"></i><span class="ctx-label">Context</span></button>
+                <div id="context-sources-picker" class="hidden">
+                  <div class="context-picker-section" id="context-picker-email"></div>
+                  <div class="context-picker-section" id="context-picker-terminals"></div>
+                  <div class="context-picker-section" id="context-picker-tabs"></div>
+                </div>
+              </div>
             </div>
             <div id="input-bottom-right">
+              <div id="vendor-toggle-wrap">
+                <button id="vendor-btn-claude" class="vendor-toggle-btn active" data-vendor="claude">
+                  <img src="/claude-code-avatar.png" class="vendor-toggle-icon" alt="Claude">
+                  <span class="vendor-toggle-label">Claude Code</span>
+                </button>
+                <button id="vendor-btn-codex" class="vendor-toggle-btn" data-vendor="codex">
+                  <img src="/codex-avatar.png" class="vendor-toggle-icon" alt="Codex">
+                  <span class="vendor-toggle-label">Codex</span>
+                </button>
+              </div>
               <div id="config-chip-wrap" class="hidden">
                 <button id="config-chip" title="Model, mode, and effort settings">
                   <i class="config-chip-icon" data-lucide="sliders-horizontal"></i>
@@ -511,6 +523,18 @@
                       </button>
                     </div>
                   </div>
+                  <div id="config-approval-section" class="config-section" style="display:none">
+                    <div class="config-section-label">APPROVAL</div>
+                    <div id="config-approval-bar" class="config-segmented"></div>
+                  </div>
+                  <div id="config-sandbox-section" class="config-section" style="display:none">
+                    <div class="config-section-label">SANDBOX</div>
+                    <div id="config-sandbox-bar" class="config-segmented"></div>
+                  </div>
+                  <div id="config-websearch-section" class="config-section" style="display:none">
+                    <div class="config-section-label">WEB SEARCH</div>
+                    <div id="config-websearch-bar" class="config-segmented"></div>
+                  </div>
                 </div>
               </div>
               <button id="send-btn" disabled aria-label="Send"><i data-lucide="arrow-up"></i></button>
@@ -520,6 +544,34 @@
       </div>
     </div>
   </div>
+  <!-- Mobile input-more bottom sheet: attach / image + context sources -->
+  <div id="input-more-sheet" class="hidden">
+    <div class="input-more-backdrop"></div>
+    <div class="input-more-content">
+      <div class="input-more-handle"></div>
+      <div class="input-more-actions">
+        <button class="input-more-action" id="input-more-attach">
+          <i data-lucide="paperclip"></i>
+          <span>Attach file</span>
+        </button>
+        <button class="input-more-action" id="input-more-image">
+          <i data-lucide="image"></i>
+          <span>Image</span>
+        </button>
+      </div>
+      <div class="input-more-divider"></div>
+      <div class="input-more-section-label">
+        <i data-lucide="library"></i>
+        <span>Context sources</span>
+      </div>
+      <div class="input-more-context-body" id="input-more-context-body">
+        <div class="context-picker-section" id="context-picker-email-mobile"></div>
+        <div class="context-picker-section" id="context-picker-terminals-mobile"></div>
+        <div class="context-picker-section" id="context-picker-tabs-mobile"></div>
+      </div>
+    </div>
+  </div>
+
   <!-- Mobile fullscreen sheet overlay (Projects / Sessions) -->
   <div id="mobile-sheet" class="hidden">
     <div class="mobile-sheet-backdrop"></div>

package/lib/public/modules/app-connection.js

@@ -1,56 +1,158 @@
 // app-connection.js - WebSocket connection, reconnect, status
 // Extracted from app.js (PR-22)
 
-var _ctx = null;
+import { store } from './store.js';
+import { getWs, setWs } from './ws-ref.js';
+import { getStatusDot, getSendBtn } from './dom-refs.js';
+import { setSendBtnMode, blinkIO, setActivity } from './app-favicon.js';
+import { startLogoAnimation, stopLogoAnimation } from './ascii-logo.js';
+import { hasSendableContent } from './input.js';
+import { isNotifAlertEnabled } from './notifications.js';
+import { processMessage } from './app-messages.js';
+import { flushPendingExtMessages } from './app-misc.js';
+import { resetTerminals } from './terminal.js';
+import { closeDmUserPicker } from './sidebar-mates.js';
+import { openDm } from './app-dm.js';
+
 var wasConnected = false;
 var reconnectTimer = null;
 var reconnectDelay = 1000;
 var connectTimeoutId = null;
 var disconnectNotifTimer = null;
 var disconnectNotifShown = false;
+var connectOverlay = null;
+
+export function initConnection() {
+  connectOverlay = document.getElementById("connect-overlay");
 
-export function initConnection(ctx) {
-  _ctx = ctx;
+  // --- Reactive UI sync for connected/processing state ---
+  store.subscribe(function (state, prev) {
+    // Status dot (depends on both connected and processing)
+    if (state.connected !== prev.connected || state.processing !== prev.processing) {
+      var dot = getStatusDot();
+      if (dot) {
+        dot.className = "icon-strip-status";
+        if (state.connected) {
+          dot.classList.add("connected");
+          if (state.processing) dot.classList.add("processing");
+        }
+      }
+    }
+
+    // Connected state changed
+    if (state.connected !== prev.connected) {
+      var sendBtn = getSendBtn();
+      if (state.connected) {
+        if (sendBtn) sendBtn.disabled = false;
+        if (connectOverlay) connectOverlay.classList.add("hidden");
+        var updPill = document.getElementById("update-pill-wrap");
+        if (updPill) updPill.classList.add("hidden");
+        stopLogoAnimation();
+      } else {
+        if (sendBtn) sendBtn.disabled = true;
+        if (connectOverlay) connectOverlay.classList.remove("hidden");
+        startLogoAnimation();
+      }
+    }
+
+    // Processing state changed
+    if (state.processing !== prev.processing) {
+      if (state.processing) {
+        setSendBtnMode(hasSendableContent() ? "send" : "stop");
+      } else if (state.connected) {
+        setSendBtnMode("send");
+      }
+    }
+  });
 }
 
+// setStatus: now just sets state. UI sync is handled by the subscriber above.
 export function setStatus(status) {
-  var dot = _ctx.getStatusDot();
-  if (dot) dot.className = "icon-strip-status";
   if (status === "connected") {
-    if (dot) dot.classList.add("connected");
-    _ctx.setConnected(true);
-    _ctx.setProcessing(false);
-    _ctx.sendBtn.disabled = false;
-    _ctx.setSendBtnMode("send");
-    _ctx.connectOverlay.classList.add("hidden");
-    // Hide update banner on reconnect; server will re-send update_available if still needed
-    var updPill = document.getElementById("update-pill-wrap");
-    if (updPill) updPill.classList.add("hidden");
-    _ctx.stopVerbCycle();
+    store.set({ connected: true, processing: false });
   } else if (status === "processing") {
-    if (dot) { dot.classList.add("connected"); dot.classList.add("processing"); }
-    _ctx.setProcessing(true);
-    _ctx.setSendBtnMode(_ctx.hasSendableContent() ? "send" : "stop");
+    store.set({ processing: true });
   } else {
-    _ctx.setConnected(false);
-    _ctx.sendBtn.disabled = true;
-    _ctx.connectOverlay.classList.remove("hidden");
-    _ctx.startVerbCycle();
+    store.set({ connected: false, processing: false });
+  }
+}
+
+function onConnected() {
+  // Flush any extension messages that arrived before WS was ready
+  flushPendingExtMessages();
+
+  // Reset terminal xterm instances (server will send fresh term_list)
+  resetTerminals();
+
+  // Re-send push subscription on reconnect
+  var ws = getWs();
+  if (window._pushSubscription) {
+    try {
+      ws.send(JSON.stringify({
+        type: "push_subscribe",
+        subscription: window._pushSubscription.toJSON(),
+      }));
+    } catch(e) {}
+  }
+
+  // Request mates list
+  try {
+    ws.send(JSON.stringify({ type: "mate_list" }));
+  } catch(e) {}
+
+  // If connecting to a mate project, request knowledge list for badge
+  if (store.get('mateProjectSlug')) {
+    try { ws.send(JSON.stringify({ type: "knowledge_list" })); } catch(e) {}
+  }
+
+  // Session restore is now server-driven (user-presence.json).
+  // Mate DM restore is also server-driven via "restore_mate_dm" message.
+  // Fallback: if server doesn't restore DM within 2s, try localStorage
+  var savedDm = null;
+  try { savedDm = localStorage.getItem("clay-active-dm"); } catch (e) {}
+  if (savedDm && !store.get('dmMode') && !store.get('mateProjectSlug')) {
+    var dmFallbackTimer = setTimeout(function () {
+      if (!store.get('dmMode') && savedDm) {
+        console.log("[dm-restore] Server did not restore DM, using localStorage fallback:", savedDm);
+        openDm(savedDm);
+      }
+    }, 2000);
+    // Cancel fallback if server restores DM first
+    var patchedOnce = false;
+    var checkRestore = function (evt) {
+      try {
+        var d = JSON.parse(evt.data);
+        if (d.type === "restore_mate_dm" && !patchedOnce) {
+          patchedOnce = true;
+          clearTimeout(dmFallbackTimer);
+        }
+      } catch (e) {}
+    };
+    ws.addEventListener("message", checkRestore);
+    setTimeout(function () { ws.removeEventListener("message", checkRestore); }, 3000);
+  }
+  // Safety: clear returningFromMateDm after initial messages settle
+  if (store.get('returningFromMateDm')) {
+    setTimeout(function () {
+      if (store.get('returningFromMateDm')) {
+        store.set({ returningFromMateDm: false });
+      }
+    }, 2000);
   }
 }
 
 export function connect() {
-  var ws = _ctx.getWs();
+  var ws = getWs();
   if (ws) { ws.onclose = null; ws.close(); }
   if (connectTimeoutId) { clearTimeout(connectTimeoutId); connectTimeoutId = null; }
 
   var protocol = location.protocol === "https:" ? "wss:" : "ws:";
-  var newWs = new WebSocket(protocol + "//" + location.host + _ctx.getWsPath());
-  _ctx.setWs(newWs);
+  var newWs = new WebSocket(protocol + "//" + location.host + store.get('wsPath'));
+  setWs(newWs);
 
   // If not connected within 3s, force retry
   connectTimeoutId = setTimeout(function () {
-    if (!_ctx.isConnected()) {
+    if (!store.get('connected')) {
       newWs.onclose = null;
       newWs.onerror = null;
       newWs.close();
@@ -68,7 +170,7 @@ export function connect() {
     // Only show "restored" notification if "lost" was actually shown
     var isMobileDevice = /Mobi|Android|iPad|iPhone|iPod/.test(navigator.userAgent) ||
       (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
-    if (wasConnected && disconnectNotifShown && !isMobileDevice && _ctx.isNotifAlertEnabled() && !document.hasFocus() && "serviceWorker" in navigator && Notification.permission === "granted") {
+    if (wasConnected && disconnectNotifShown && !isMobileDevice && isNotifAlertEnabled() && !document.hasFocus() && "serviceWorker" in navigator && Notification.permission === "granted") {
       navigator.serviceWorker.ready.then(function (reg) {
         return reg.showNotification("Clay", {
           body: "Server connection restored",
@@ -83,22 +185,21 @@ export function connect() {
     if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
 
     // Wrap ws.send to blink LED on outgoing traffic
-    var currentWs = _ctx.getWs();
+    var currentWs = getWs();
     var _origSend = currentWs.send.bind(currentWs);
     currentWs.send = function (data) {
-      _ctx.blinkIO();
+      blinkIO();
       return _origSend(data);
     };
 
-    _ctx.onConnected();
+    onConnected();
   };
 
   newWs.onclose = function (e) {
     if (connectTimeoutId) { clearTimeout(connectTimeoutId); connectTimeoutId = null; }
-    _ctx.closeDmUserPicker();
+    closeDmUserPicker();
     setStatus("disconnected");
-    _ctx.setProcessing(false);
-    _ctx.setActivity(null);
+    setActivity(null);
     // Delay "connection lost" notification by 5s to suppress brief disconnects
     if (!disconnectNotifTimer) {
       disconnectNotifTimer = setTimeout(function () {
@@ -106,7 +207,7 @@ export function connect() {
         disconnectNotifShown = true;
         var isMobileDevice = /Mobi|Android|iPad|iPhone|iPod/.test(navigator.userAgent) ||
           (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
-        if (!isMobileDevice && _ctx.isNotifAlertEnabled() && !document.hasFocus() && "serviceWorker" in navigator && Notification.permission === "granted") {
+        if (!isMobileDevice && isNotifAlertEnabled() && !document.hasFocus() && "serviceWorker" in navigator && Notification.permission === "granted") {
           navigator.serviceWorker.ready.then(function (reg) {
             return reg.showNotification("Clay", {
               body: "Server connection lost",
@@ -123,16 +224,16 @@ export function connect() {
 
   newWs.onmessage = function (event) {
     // Backup: if we're receiving messages, we're connected
-    if (!_ctx.isConnected()) {
+    if (!store.get('connected')) {
       setStatus("connected");
       reconnectDelay = 1000;
       if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
     }
 
-    _ctx.blinkIO();
+    blinkIO();
     var msg;
     try { msg = JSON.parse(event.data); } catch (e) { return; }
-    _ctx.processMessage(msg);
+    processMessage(msg);
   };
 }