collabmd 0.1.48 → 0.1.49

package/src/client/app/export-document.html

@@ -10,7 +10,7 @@
     <header class="export-page-header">
       <div>
         <h1>Preparing export</h1>
-        <p id="exportStatus">Initializing…</p>
+        <p id="exportStatus" role="status" aria-live="polite">Initializing…</p>
       </div>
     </header>
     <section id="exportWarningsSection" class="export-warnings-panel" hidden>

package/src/client/app/index.html

@@ -72,8 +72,8 @@
             </button>
           </div>
         </div>
-        <div class="ui-nav-tabs" id="sidebarTabs">
-          <button class="ui-nav-tab active" id="filesSidebarTab" type="button">
+        <div class="ui-nav-tabs" id="sidebarTabs" role="tablist" aria-label="Sidebar views">
+          <button class="ui-nav-tab active" id="filesSidebarTab" type="button" role="tab" aria-selected="true" aria-controls="fileTree" tabindex="0">
             <span class="ui-nav-tab-icon" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
@@ -81,7 +81,7 @@
             </span>
             <span class="ui-nav-tab-label">Files</span>
           </button>
-          <button class="ui-nav-tab" id="commentsSidebarTab" type="button">
+          <button class="ui-nav-tab" id="commentsSidebarTab" type="button" role="tab" aria-selected="false" aria-controls="commentOverviewPanel" tabindex="-1">
             <span class="ui-nav-tab-icon" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -89,7 +89,7 @@
             </span>
             <span class="ui-nav-tab-label">Comments</span>
           </button>
-          <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button">
+          <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button" role="tab" aria-selected="false" aria-controls="gitPanel" tabindex="-1">
             <span class="ui-nav-tab-icon" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="18" cy="18" r="3"></circle>
@@ -125,9 +125,9 @@
             aria-label="Search changed files"
           >
         </div>
-        <nav id="fileTree" class="file-tree" aria-label="File explorer"></nav>
-        <section id="commentOverviewPanel" class="comment-overview-panel hidden" aria-label="Open comments"></section>
-        <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
+        <nav id="fileTree" class="file-tree" role="tabpanel" aria-labelledby="filesSidebarTab"></nav>
+        <section id="commentOverviewPanel" class="comment-overview-panel hidden" role="tabpanel" aria-labelledby="commentsSidebarTab"></section>
+        <div id="gitPanel" class="git-panel hidden" role="tabpanel" aria-labelledby="gitSidebarTab"></div>
         <div
           class="sidebar-resizer"
           id="sidebarResizer"
@@ -239,13 +239,11 @@
                 type="button"
                 class="ui-pill-badge ui-pill-badge--muted toolbar-badge toolbar-badge-button toolbar-presence-count"
                 id="userCount"
-                aria-controls="presencePanel"
-                aria-expanded="false"
-                data-presence-panel-trigger="true"
+                popovertarget="presencePanel"
               ></button>
             </div>
 
-            <section class="collaboration-popover presence-panel hidden" id="presencePanel" aria-label="Online users" aria-hidden="true">
+            <section class="collaboration-popover presence-panel" id="presencePanel" aria-label="Online users" popover="auto">
               <div class="presence-panel-header">
                 <div>
                   <h2 class="presence-panel-title">Online now</h2>
@@ -256,7 +254,7 @@
             </section>
 
             <div class="chat-container" id="chatContainer">
-              <button type="button" class="ui-button ui-button--ghost ui-button--toolbar chat-toggle-btn" id="chatToggleBtn" aria-label="Open team chat" aria-controls="chatPanel" aria-expanded="false" title="Team chat">
+              <button type="button" class="ui-button ui-button--ghost ui-button--toolbar chat-toggle-btn" id="chatToggleBtn" aria-label="Open team chat" popovertarget="chatPanel" title="Team chat">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                 </svg>
@@ -265,7 +263,7 @@
               </button>
               <div class="toast-container chat-toast-container" id="chatToastContainer" aria-live="polite" aria-atomic="true"></div>
 
-              <section class="collaboration-popover chat-panel hidden" id="chatPanel" role="dialog" aria-labelledby="chatPanelTitle">
+              <section class="collaboration-popover chat-panel" id="chatPanel" role="dialog" aria-labelledby="chatPanelTitle" popover="auto">
                 <div class="chat-panel-header">
                   <div class="chat-panel-heading">
                     <h2 class="chat-panel-title" id="chatPanelTitle">Team chat</h2>
@@ -292,7 +290,7 @@
                         <path class="chat-notification-mute-slash" d="m4 4 16 16"></path>
                       </svg>
                     </button>
-                    <button type="button" class="ui-icon-button chat-close-btn" id="chatCloseBtn" aria-label="Close team chat" title="Close team chat">
+                    <button type="button" class="ui-icon-button chat-close-btn" id="chatCloseBtn" aria-label="Close team chat" popovertarget="chatPanel" popovertargetaction="hide" title="Close team chat">
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                         <line x1="18" y1="6" x2="6" y2="18"></line>
                         <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -327,7 +325,7 @@
               class="ui-button ui-button--ghost ui-button--toolbar toolbar-overflow-toggle"
               id="toolbarOverflowToggle"
               aria-label="Open more actions"
-              aria-expanded="false"
+              popovertarget="toolbarOverflowMenu"
               title="More actions"
             >
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
@@ -337,7 +335,7 @@
               </svg>
             </button>
 
-            <div class="toolbar-overflow-menu" id="toolbarOverflowMenu">
+            <div class="toolbar-overflow-menu" id="toolbarOverflowMenu" popover="auto">
               <button class="ui-button ui-button--ghost ui-button--toolbar hidden" id="fileHistoryBtn" aria-label="Open file history" title="View file history">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                   <path d="M3 12a9 9 0 1 0 3-6.7"></path>
@@ -363,6 +361,14 @@
                 <span class="ui-toolbar-button-label">Share</span>
               </button>
 
+              <button class="ui-button ui-button--ghost ui-button--toolbar hidden" id="connectAgentBtn" aria-label="Connect AI Agent" title="Connect AI Agent">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <rect x="5" y="7" width="14" height="11" rx="3"></rect>
+                  <path d="M12 3v4M8 12h.01M16 12h.01M9 16h6"></path>
+                </svg>
+                <span class="ui-toolbar-button-label">Connect AI Agent</span>
+              </button>
+
               <button class="ui-button ui-button--ghost ui-button--toolbar toolbar-search-files-btn" id="searchFilesBtn" aria-label="Search files" title="Search files">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                   <circle cx="11" cy="11" r="7"></circle>
@@ -460,7 +466,7 @@
                   <circle cx="11" cy="11" r="8"></circle>
                   <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                 </svg>
-                Search Everything
+                Search everything
                 <kbd class="empty-state-kbd">⌘K</kbd>
               </button>
             </div>
@@ -509,7 +515,7 @@
               </div>
               <div id="markdownToolbar" class="markdown-toolbar hidden" role="toolbar" aria-label="Markdown formatting"></div>
               <div id="editorContainer" class="editor-container">
-                <div class="editor-loading" id="editorLoading">
+                <div class="editor-loading" id="editorLoading" role="status" aria-live="polite" aria-label="Loading file…">
                   <div class="skeleton-line skeleton-line--title skeleton-line--break"></div>
                   <div class="skeleton-line skeleton-line--full"></div>
                   <div class="skeleton-line skeleton-line--ninety"></div>
@@ -630,7 +636,7 @@
               </div>
               <div class="diff-toolbar-actions">
                 <button class="ui-button ui-button--secondary ui-button--action ui-button--wide ui-button--surface hidden diff-back-btn" id="diffBackToHistoryBtn" type="button">
-                  Back to History
+                  Back to history
                 </button>
                 <div class="diff-toolbar-actions-group diff-toolbar-actions-group-git" id="diffGitActionsGroup" role="group" aria-label="Git file actions">
                   <button class="ui-button ui-button--secondary ui-button--action ui-button--wide ui-button--surface" id="diffPrimaryActionBtn" type="button" disabled>
@@ -648,12 +654,12 @@
                 <span class="ui-stat-token ui-stat-token--del diff-stats-del">-0</span>
               </div>
               <div class="ui-segmented-control hidden diff-layout-toggle" id="diffLayoutToggle" role="group" aria-label="Commit diff layout">
-                <button class="ui-segmented-btn view-btn diff-layout-btn" data-diff-layout="stacked" type="button">Stacked</button>
-                <button class="ui-segmented-btn active view-btn diff-layout-btn" data-diff-layout="focused" type="button">Focused</button>
+                <button class="ui-segmented-btn diff-layout-btn" data-diff-layout="stacked" type="button" aria-pressed="false">Stacked</button>
+                <button class="ui-segmented-btn active diff-layout-btn" data-diff-layout="focused" type="button" aria-pressed="true">Focused</button>
               </div>
               <div class="ui-segmented-control diff-mode-toggle" role="group" aria-label="Diff view mode">
-                <button class="ui-segmented-btn active view-btn diff-mode-btn" data-diff-mode="unified" type="button">Unified</button>
-                <button class="ui-segmented-btn view-btn diff-mode-btn" data-diff-mode="split" type="button">Split</button>
+                <button class="ui-segmented-btn active diff-mode-btn" data-diff-mode="unified" type="button" aria-pressed="true">Unified</button>
+                <button class="ui-segmented-btn diff-mode-btn" data-diff-mode="split" type="button" aria-pressed="false">Split</button>
               </div>
               <span class="diff-toolbar-actions-divider" id="diffToolbarDivider" aria-hidden="true"></span>
               <div class="diff-toolbar-actions-group" id="diffEditorActionsGroup" role="group" aria-label="Navigation actions">
@@ -670,7 +676,7 @@
       </main>
     </div>
 
-    <dialog class="app-dialog" id="displayNameDialog">
+    <dialog class="app-dialog" id="displayNameDialog" aria-labelledby="displayNameTitle">
       <form class="app-dialog-form" id="displayNameForm" method="dialog">
         <div class="app-dialog-header">
           <h2 class="app-dialog-title" id="displayNameTitle">Update display name</h2>
@@ -687,7 +693,17 @@
       </form>
     </dialog>
 
-    <dialog class="app-dialog" id="fileActionDialog">
+    <dialog class="app-dialog agent-connection-dialog" id="agentConnectionDialog" aria-labelledby="agentConnectionTitle">
+      <div class="app-dialog-form">
+        <div class="app-dialog-header">
+          <h2 class="app-dialog-title" id="agentConnectionTitle">Connect an AI agent</h2>
+          <p class="app-dialog-copy">Follow the steps below to give an agent secure access to this workspace.</p>
+        </div>
+        <div id="agentConnectionContent"></div>
+      </div>
+    </dialog>
+
+    <dialog class="app-dialog" id="fileActionDialog" aria-labelledby="fileActionTitle">
       <form class="app-dialog-form" id="fileActionForm" method="dialog">
         <div class="app-dialog-header">
           <h2 class="app-dialog-title" id="fileActionTitle">Create file</h2>
@@ -706,7 +722,7 @@
       </form>
     </dialog>
 
-    <dialog class="app-dialog" id="gitCommitDialog">
+    <dialog class="app-dialog" id="gitCommitDialog" aria-labelledby="gitCommitTitle">
       <form class="app-dialog-form" id="gitCommitForm" method="dialog">
         <div class="app-dialog-header">
           <h2 class="app-dialog-title" id="gitCommitTitle">Commit included files</h2>
@@ -724,7 +740,7 @@
       </form>
     </dialog>
 
-    <dialog class="app-dialog" id="gitResetDialog">
+    <dialog class="app-dialog" id="gitResetDialog" aria-labelledby="gitResetTitle">
       <form class="app-dialog-form" method="dialog">
         <div class="app-dialog-header">
           <h2 class="app-dialog-title" id="gitResetTitle">Reset file</h2>
@@ -739,12 +755,12 @@
         </div>
         <div class="app-dialog-actions">
           <button class="ui-button ui-button--secondary" id="gitResetCancel" type="button">Cancel</button>
-          <button class="ui-button ui-button--danger" id="gitResetSubmit" type="button">Reset File</button>
+          <button class="ui-button ui-button--danger" id="gitResetSubmit" type="button">Reset file</button>
         </div>
       </form>
     </dialog>
 
-    <div class="tab-lock-overlay hidden" id="tabLockOverlay" role="dialog" aria-modal="true" aria-labelledby="tabLockTitle">
+    <dialog class="tab-lock-overlay" id="tabLockOverlay" aria-labelledby="tabLockTitle">
       <div class="tab-lock-card">
         <span class="tab-lock-kicker">Single active tab</span>
         <h2 class="tab-lock-title" id="tabLockTitle">This vault is active in another tab</h2>
@@ -753,11 +769,11 @@
           <button type="button" class="ui-button ui-button--primary ui-button--lg" id="tabLockTakeoverBtn">Take over here</button>
         </div>
       </div>
-    </div>
+    </dialog>
 
     <div class="toast-container" id="toastContainer"></div>
 
-    <div class="qs-overlay" id="quickSwitcher" role="dialog" aria-modal="true" aria-labelledby="quickSwitcherTitle" aria-hidden="true">
+    <dialog class="qs-overlay" id="quickSwitcher" aria-labelledby="quickSwitcherTitle" closedby="any">
       <div class="qs-modal">
         <h2 class="sr-only" id="quickSwitcherTitle">Search files and text</h2>
         <div class="qs-mode-tabs" role="tablist" aria-label="Search mode">
@@ -769,7 +785,7 @@
             <circle cx="11" cy="11" r="8"></circle>
             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
           </svg>
-          <input type="text" class="qs-input" id="quickSwitcherInput" role="combobox" placeholder="Search files..." aria-label="Search files" aria-controls="quickSwitcherResults" aria-describedby="quickSwitcherHint quickSwitcherScope" aria-autocomplete="list" aria-expanded="false" autocomplete="off" spellcheck="false">
+          <input type="text" class="qs-input" id="quickSwitcherInput" role="combobox" placeholder="Search files..." aria-label="Search files" aria-controls="quickSwitcherResults" aria-describedby="quickSwitcherHint quickSwitcherScope" aria-autocomplete="list" aria-expanded="false" autocomplete="off" spellcheck="false" autofocus>
           <kbd class="qs-kbd">esc</kbd>
         </div>
         <div class="qs-scope hidden" id="quickSwitcherScope" role="note" aria-hidden="true">Exact, case-insensitive text in Markdown, Base, Mermaid, PlantUML, Draw.io, and Excalidraw files. Images are excluded.</div>
@@ -781,7 +797,7 @@
           <span><kbd>Tab</kbd> Switch mode</span>
         </div>
       </div>
-    </div>
+    </dialog>
   <script vite-ignore src="./app-config.js"></script>
   <script type="module" src="./main-entry.js"></script>
 </body>

package/src/client/app/main-entry.js

@@ -1,5 +1,7 @@
 import darkHighlightThemeUrl from '../assets/vendor/highlight/github-dark.min.css?url';
 import lightHighlightThemeUrl from '../assets/vendor/highlight/github.min.css?url';
+import { CollabMdAppShell } from '../bootstrap/collabmd-app-shell.js';
+import { ensureClientAuthenticated } from '../infrastructure/auth-client.js';
 import '../styles/base.css';
 import '../styles/style.css';
 
@@ -18,4 +20,16 @@ function ensureHighlightThemeStylesheet() {
 }
 
 ensureHighlightThemeStylesheet();
-await import('../main.js');
+async function start() {
+  await ensureClientAuthenticated();
+  const app = new CollabMdAppShell();
+  app.initialize();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    void start();
+  }, { once: true });
+} else {
+  void start();
+}

package/src/client/application/app-shell/chat-feature.js

@@ -72,34 +72,23 @@ export const chatFeature = {
     this.renderChat();
   },
 
-  toggleChatPanel() {
-    if (this.chatIsOpen) {
-      this.closeChatPanel({ restoreFocus: true });
-      return;
-    }
-
-    this.openChatPanel();
-  },
 
   openChatPanel() {
     this.chatIsOpen = true;
     this.chatUnreadCount = 0;
+    if (!this.elements.chatPanel?.matches(':popover-open')) {
+      this.elements.chatPanel?.showPopover();
+    }
     this.renderChat({ stickToBottom: true });
-    requestAnimationFrame(() => {
-      this.elements.chatInput?.focus();
-    });
+    requestAnimationFrame(() => this.elements.chatInput?.focus());
   },
 
-  closeChatPanel({ restoreFocus = false } = {}) {
-    if (!this.chatIsOpen) {
-      return;
+  closeChatPanel() {
+    if (this.elements.chatPanel?.matches(':popover-open')) {
+      this.elements.chatPanel.hidePopover();
     }
-
     this.chatIsOpen = false;
     this.renderChat({ messagesChanged: false });
-    if (restoreFocus) {
-      requestAnimationFrame(() => this.elements.chatToggleButton?.focus());
-    }
   },
 
   handleChatSubmit() {
@@ -129,8 +118,6 @@ export const chatFeature = {
   },
 
   renderChat({ messagesChanged = true, stickToBottom = false } = {}) {
-    this.elements.chatContainer?.classList.toggle('is-open', this.chatIsOpen);
-    this.elements.chatPanel?.classList.toggle('hidden', !this.chatIsOpen);
 
     this.syncChatToggleButton();
     this.syncChatNotificationButton();
@@ -363,8 +350,6 @@ export const chatFeature = {
 
     button.classList.toggle('is-active', this.chatIsOpen);
     button.classList.toggle('is-unread', shouldEmphasizeUnread);
-    button.setAttribute('aria-controls', 'chatPanel');
-    button.setAttribute('aria-expanded', String(this.chatIsOpen));
     button.setAttribute(
       'aria-label',
       hasUnread ? `Open team chat, ${this.chatUnreadCount} unread` : 'Open team chat',

package/src/client/application/app-shell/git-feature.js

@@ -132,7 +132,7 @@ export const gitFeature = {
 
     button.classList.remove('hidden');
     if (mode === 'history-preview') {
-      label.textContent = 'Back to History';
+      label.textContent = 'Back to history';
       button.setAttribute('aria-label', 'Back to file history');
       button.title = 'Back to file history';
       return;
@@ -326,6 +326,10 @@ export const gitFeature = {
           return await this.gitApiClient.stageFile({ path: payload.path, requestId });
         case 'unstage':
           return await this.gitApiClient.unstageFile({ path: payload.path, requestId });
+        case 'stage-all':
+          return await this.gitApiClient.stageAll({ requestId });
+        case 'unstage-all':
+          return await this.gitApiClient.unstageAll({ requestId });
         case 'push':
           return await this.gitApiClient.pushBranch({ requestId });
         case 'pull':
@@ -534,6 +538,20 @@ export const gitFeature = {
     });
   },
 
+  async stageAllGitFiles() {
+    await this.runGitActionWithStatus('Staging all changes...', async () => {
+      const result = await this.postGitAction('stage-all', {});
+      await this.finalizeGitAction({ action: 'stage-all', preferredScope: 'staged', result });
+    });
+  },
+
+  async unstageAllGitFiles() {
+    await this.runGitActionWithStatus('Unstaging all changes...', async () => {
+      const result = await this.postGitAction('unstage-all', {});
+      await this.finalizeGitAction({ action: 'unstage-all', preferredScope: 'working-tree', result });
+    });
+  },
+
   async pushGitBranch() {
     await this.runGitActionWithStatus('Pushing branch...', async () => {
       try {
@@ -595,7 +613,7 @@ export const gitFeature = {
     }
     this.elements.gitResetFileName.value = filePath;
     if (this.elements.gitResetSubmit) {
-      this.elements.gitResetSubmit.textContent = 'Reset File';
+      this.elements.gitResetSubmit.textContent = 'Reset file';
     }
     this.elements.gitResetSubmit?.toggleAttribute('disabled', false);
 
@@ -619,10 +637,10 @@ export const gitFeature = {
 
     submit?.toggleAttribute('disabled', true);
     if (submit) {
-      submit.textContent = 'Resetting...';
+      submit.textContent = 'Resetting…';
     }
     try {
-      await this.runGitActionWithStatus('Resetting file...', async () => {
+      await this.runGitActionWithStatus('Resetting file…', async () => {
         const result = await this.postGitAction('reset-file', { path: filePath });
         await this.finalizeGitAction({
           action: 'reset',
@@ -636,7 +654,7 @@ export const gitFeature = {
       this.toastController.show(error.message || 'Failed to reset file');
     } finally {
       if (submit) {
-        submit.textContent = 'Reset File';
+        submit.textContent = 'Reset file';
       }
       submit?.toggleAttribute('disabled', false);
     }

package/src/client/application/app-shell/presence-feature.js

@@ -84,12 +84,10 @@ export const presenceFeature = {
     const effectiveConnectionState = getConnectedPresenceState(this);
     const hasUsers = this.globalUsers.length > 0;
     if (effectiveConnectionState.status !== 'connected') {
-      this.presencePanelOpen = false;
+      this.closePresencePanel();
     }
 
     badge.type = 'button';
-    badge.setAttribute('aria-controls', 'presencePanel');
-    badge.setAttribute('aria-expanded', String(this.presencePanelOpen));
     badge.classList.toggle('is-active', this.presencePanelOpen);
 
     if (effectiveConnectionState.status === 'connected') {
@@ -173,12 +171,9 @@ export const presenceFeature = {
       overflow.className = 'user-avatar user-avatar-button user-avatar-overflow-trigger';
       overflow.style.backgroundColor = 'var(--color-surface-dynamic)';
       overflow.style.color = 'var(--color-text-muted)';
-      overflow.setAttribute('aria-controls', 'presencePanel');
-      overflow.setAttribute('aria-expanded', String(this.presencePanelOpen));
+      overflow.setAttribute('popovertarget', 'presencePanel');
       overflow.setAttribute('aria-label', `Show ${visibleUsers.length} online users`);
-      overflow.setAttribute('data-presence-panel-trigger', 'true');
       overflow.title = `Show ${visibleUsers.length} online users`;
-      overflow.addEventListener('click', () => this.openPresencePanel());
       const overflowLabel = document.createElement('span');
       overflowLabel.className = 'user-avatar-initial';
       overflowLabel.textContent = `+${visibleUsers.length - MAX_INLINE_AVATARS}`;
@@ -194,29 +189,19 @@ export const presenceFeature = {
     }
 
     this.presencePanelOpen = true;
-    this.closeChatPanel?.();
-    this.closeToolbarOverflowMenu?.();
+    if (!this.elements.presencePanel?.matches(':popover-open')) {
+      this.elements.presencePanel?.showPopover();
+    }
     this.renderAvatars();
     this.renderPresence();
   },
 
   closePresencePanel() {
-    if (!this.presencePanelOpen) {
-      return;
+    if (this.elements.presencePanel?.matches(':popover-open')) {
+      this.elements.presencePanel.hidePopover();
     }
-
     this.presencePanelOpen = false;
-    this.renderAvatars();
-    this.renderPresence();
-  },
-
-  togglePresencePanel() {
-    if (this.presencePanelOpen) {
-      this.closePresencePanel();
-      return;
-    }
-
-    this.openPresencePanel();
+    this.renderAvatars?.();
   },
 
   renderPresencePanel() {
@@ -225,8 +210,6 @@ export const presenceFeature = {
     const status = this.elements.presencePanelStatus;
     if (!panel || !list) return;
 
-    panel.classList.toggle('hidden', !this.presencePanelOpen);
-    panel.setAttribute('aria-hidden', String(!this.presencePanelOpen));
     if (!this.presencePanelOpen) {
       return;
     }