collabmd 0.1.41 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabmd",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "type": "module",
   "description": "Collaborative markdown vault — like Obsidian, but online. Serve any directory of markdown files for realtime collaborative editing.",
   "repository": {
@@ -64,31 +64,31 @@
   "license": "MIT",
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.10.3",
-    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-markdown": "^6.5.1",
     "@codemirror/lang-yaml": "^6.1.3",
-    "@codemirror/language": "^6.12.3",
+    "@codemirror/language": "^6.12.4",
     "@codemirror/language-data": "^6.5.2",
-    "@codemirror/search": "^6.7.0",
-    "@codemirror/state": "^6.6.0",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.7.1",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.1",
-    "@excalidraw/excalidraw": "0.18.0-699826",
+    "@codemirror/view": "^6.43.6",
+    "@excalidraw/excalidraw": "0.18.0-e9c856d",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
-    "@turbodocx/html-to-docx": "^1.21.0",
+    "@turbodocx/html-to-docx": "^1.22.0",
     "archiver": "^8.0.0",
     "highlight.js": "^11.11.1",
-    "js-yaml": "^4.2.0",
+    "js-yaml": "^5.2.1",
     "lib0": "^0.2.117",
     "lit-html": "^3.3.3",
-    "markdown-it": "^14.2.0",
-    "mermaid": "^11.15.0",
+    "markdown-it": "^14.3.0",
+    "mermaid": "^11.16.0",
     "openid-client": "^6.8.4",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "sharp": "^0.35.1",
-    "ws": "^8.21.0",
+    "sharp": "^0.35.3",
+    "ws": "^8.21.1",
     "y-codemirror.next": "^0.3.5",
     "y-protocols": "^1.0.7",
     "y-websocket": "^3.0.0",
@@ -101,12 +101,12 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.60.0",
-    "@vitest/browser": "^4.1.8",
-    "@vitest/browser-playwright": "^4.1.8",
-    "eslint": "^10.5.0",
-    "globals": "^17.6.0",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8"
+    "@playwright/test": "^1.61.1",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "eslint": "^10.7.0",
+    "globals": "^17.7.0",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
   }
 }

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

@@ -255,10 +255,10 @@ export const chatFeature = {
     let pressed = false;
 
     if (permission === 'unsupported') {
-      label = 'No alerts';
+      label = 'Alerts unavailable';
       title = 'Browser notifications are unavailable here';
     } else if (permission === 'denied') {
-      label = 'Alerts blocked';
+      label = 'Alerts off';
       title = 'Browser notifications are blocked for this site';
     } else if (permission === 'granted') {
       pressed = this.chatNotificationsEnabled;

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

@@ -232,7 +232,10 @@ export const presenceFeature = {
     const effectiveConnectionState = getConnectedPresenceState(this);
     if (status) {
       if (effectiveConnectionState.status === 'connected') {
-        status.textContent = `${this.globalUsers.length} online. Click someone to follow.`;
+        const remoteUserCount = this.globalUsers.filter((user) => !user.isLocal).length;
+        status.textContent = remoteUserCount === 0
+          ? 'You’re the only person here right now.'
+          : `${remoteUserCount} ${remoteUserCount === 1 ? 'teammate' : 'teammates'} online. Select someone to follow.`;
       } else if (effectiveConnectionState.status === 'connecting') {
         status.textContent = effectiveConnectionState.unreachable ? 'Server unreachable.' : 'Connecting presence...';
       } else {

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

@@ -314,6 +314,10 @@ function bindEvents() {
     this.closeSidebarOnMobile();
   });
 
+  this.elements.sidebarBackdrop?.addEventListener('click', () => {
+    this.closeSidebarOnMobile();
+  });
+
   this.elements.filesSidebarTab?.addEventListener('click', () => {
     this.setSidebarTab('files');
   });

package/src/client/application/app-shell/ui-feature-sidebar.js

@@ -1,7 +1,7 @@
 /**
  * @typedef {object} UiSidebarContext
  * @property {string} activeSidebarTab
- * @property {{ sidebar?: HTMLElement | null, filesSidebarTab?: HTMLElement | null, commentsSidebarTab?: HTMLElement | null, gitSidebarTab?: HTMLElement | null, fileSearch?: HTMLElement | null, gitSearch?: HTMLElement | null, commentOverviewPanel?: HTMLElement | null }} elements
+ * @property {{ sidebar?: HTMLElement | null, sidebarBackdrop?: HTMLElement | null, filesSidebarTab?: HTMLElement | null, commentsSidebarTab?: HTMLElement | null, gitSidebarTab?: HTMLElement | null, fileSearch?: HTMLElement | null, gitSearch?: HTMLElement | null, commentOverviewPanel?: HTMLElement | null }} elements
  * @property {{ setSidebarVisible(showSidebar: boolean): void, getSidebarVisible(): string | null | undefined }} preferences
  * @property {{ setActive(active: boolean): void }} gitPanel
  * @property {boolean} gitRepoAvailable
@@ -63,13 +63,22 @@ function applySidebarVisibility(showSidebar) {
   const sidebar = this.elements.sidebar;
   if (!sidebar) return;
 
+  const isMobile = this.isMobileViewport();
   const isCollapsed = !showSidebar;
-  const hideForMobile = isCollapsed && this.isMobileViewport();
+  const hideForMobile = isCollapsed && isMobile;
+  const showBackdrop = showSidebar && isMobile;
 
   sidebar.classList.toggle('collapsed', isCollapsed);
   sidebar.toggleAttribute('hidden', hideForMobile);
-  sidebar.setAttribute('aria-hidden', hideForMobile ? 'true' : 'false');
+  sidebar.setAttribute('aria-hidden', isCollapsed ? 'true' : 'false');
   sidebar.inert = isCollapsed;
+
+  const backdrop = this.elements.sidebarBackdrop;
+  backdrop?.toggleAttribute('hidden', !showBackdrop);
+  backdrop?.setAttribute('aria-hidden', showBackdrop ? 'false' : 'true');
+  if (backdrop) {
+    backdrop.inert = !showBackdrop;
+  }
 }
 
 /** @this {UiSidebarContext} */

package/src/client/application/app-shell-elements.js

@@ -66,6 +66,7 @@ export function bindAppShellElements(doc = document) {
     activeFileName: doc.getElementById('activeFileName'),
     sidebarToggle: doc.getElementById('sidebarToggle'),
     sidebarClose: doc.getElementById('sidebarClose'),
+    sidebarBackdrop: doc.getElementById('sidebarBackdrop'),
     sidebar: doc.getElementById('sidebar'),
     emptyState: doc.getElementById('emptyState'),
     emptyStateNewFileBtn: doc.getElementById('emptyStateNewFileBtn'),

package/src/client/application/markdown-frontmatter.js

@@ -1,4 +1,4 @@
-import yaml from 'js-yaml';
+import { dump as dumpYaml } from 'js-yaml';
 
 import { escapeHtml } from '../domain/vault-utils.js';
 
@@ -31,7 +31,7 @@ function formatScalarValue(value) {
 }
 
 function serializeComplexValue(value) {
-  return yaml.dump(value, {
+  return dumpYaml(value, {
     lineWidth: -1,
     noRefs: true,
   }).trim();

package/src/client/application/mermaid-preview-hydrator.js

@@ -74,18 +74,18 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       },
       theme: this.currentTheme === 'dark' ? 'dark' : 'default',
       themeVariables: this.currentTheme === 'dark' ? {
-        background: '#161822',
-        clusterBkg: '#1a1c28',
-        edgeLabelBackground: '#161822',
-        lineColor: '#8b8ba0',
-        mainBkg: '#1c1e2c',
-        nodeBorder: '#383a50',
-        primaryBorderColor: '#383a50',
-        primaryColor: '#818cf8',
-        primaryTextColor: '#e2e2ea',
-        secondaryColor: '#1c1e2c',
-        tertiaryColor: '#161822',
-        titleColor: '#e2e2ea',
+        background: '#11161d',
+        clusterBkg: '#141a22',
+        edgeLabelBackground: '#11161d',
+        lineColor: '#9aa7b4',
+        mainBkg: '#171d26',
+        nodeBorder: '#303c4b',
+        primaryBorderColor: '#60a5fa',
+        primaryColor: '#172a45',
+        primaryTextColor: '#e6edf3',
+        secondaryColor: '#1c2530',
+        tertiaryColor: '#11161d',
+        titleColor: '#e6edf3',
       } : {},
     });
   }

package/src/client/presentation/app-shell-template.js

@@ -44,12 +44,6 @@ export function appShellTemplate() {
                 <span class="sidebar-create-btn-label">Create</span>
               </button>
             </div>
-            <button class=${iconButtonClassNames()} id="refreshFilesBtn" aria-label="Refresh" title="Refresh file list">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <polyline points="23 4 23 10 17 10"></polyline>
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
-              </svg>
-            </button>
           </div>
         </div>
         <div class="ui-nav-tabs" id="sidebarTabs">
@@ -108,6 +102,15 @@ export function appShellTemplate() {
         <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
       </aside>
 
+      <button
+        type="button"
+        class="sidebar-backdrop"
+        id="sidebarBackdrop"
+        aria-label="Close navigation"
+        aria-hidden="true"
+        hidden
+      ></button>
+
       <main class="main-area" id="mainContent">
         <header class="toolbar" role="banner">
           <div class="toolbar-left">
@@ -120,16 +123,6 @@ export function appShellTemplate() {
             </button>
             <div class="toolbar-room-info">
               <span class="toolbar-room-name" id="activeFileName">CollabMD</span>
-              <button
-                type="button"
-                class=${badgeClassNames({ tone: 'accent', extra: ['toolbar-badge', 'toolbar-badge-button'] })}
-                id="userCount"
-                aria-controls="presencePanel"
-                aria-expanded="false"
-                data-presence-panel-trigger="true"
-              ></button>
-              <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="toolbarDiffBadge">Diff</span>
-              <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
             </div>
           </div>
 
@@ -167,6 +160,19 @@ export function appShellTemplate() {
               <span class="ui-toolbar-button-label">Preview</span>
             </button>
 
+            <div class="toolbar-status-cluster" aria-label="Workspace status">
+              <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="toolbarDiffBadge">Diff</span>
+              <span class=${badgeClassNames({ tone: 'muted', hidden: true, extra: 'toolbar-badge' })} id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
+              <button
+                type="button"
+                class=${badgeClassNames({ tone: 'muted', extra: ['toolbar-badge', 'toolbar-badge-button'] })}
+                id="userCount"
+                aria-controls="presencePanel"
+                aria-expanded="false"
+                data-presence-panel-trigger="true"
+              ></button>
+            </div>
+
             <div class="user-avatars toolbar-presence-cluster" id="userAvatars"></div>
 
             <section class="presence-panel hidden" id="presencePanel" aria-label="Online users" aria-hidden="true">
@@ -337,7 +343,7 @@ export function appShellTemplate() {
             <h2 class="empty-state-title">Welcome to CollabMD</h2>
             <p class="empty-state-desc">Open a file from the sidebar, or get started quickly:</p>
             <div class="empty-state-actions">
-              <button class=${buttonClassNames({ variant: 'secondary', extra: 'empty-state-btn' })} id="emptyStateNewFileBtn">
+              <button class=${buttonClassNames({ variant: 'primary', extra: 'empty-state-btn' })} id="emptyStateNewFileBtn">
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                   <line x1="12" y1="5" x2="12" y2="19"></line>
                   <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -426,7 +432,7 @@ export function appShellTemplate() {
                     </svg>
                     <span class="ui-action-label">Comments</span>
                   </button>
-                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true })} id="outlineToggle" aria-label="Toggle outline" title="Toggle outline">
+                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true })} id="outlineToggle" aria-label="Toggle outline" aria-controls="outlinePanel" aria-expanded="false" title="Toggle outline">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                       <line x1="3" y1="6" x2="21" y2="6"></line>
                       <line x1="3" y1="12" x2="15" y2="12"></line>
@@ -469,14 +475,21 @@ export function appShellTemplate() {
                   <div class="comments-drawer-header">
                     <span class="comments-drawer-title">Comments</span>
                   </div>
-                  <div id="commentsDrawerEmpty" class="comments-drawer-empty">
-                    Add a comment from the editor or the preview bubbles.
+                  <div id="commentsDrawerEmpty" class="comments-drawer-empty ui-empty-state ui-empty-state--compact">
+                    <p class="ui-empty-state-title">No comments yet</p>
+                    <p class="ui-empty-state-copy">Select text in the editor or use a preview bubble to start a thread.</p>
                   </div>
                   <div id="commentsDrawerList" class="comments-drawer-list"></div>
                 </aside>
-                <aside id="outlinePanel" class="outline-panel hidden" aria-label="Document outline">
+                <aside id="outlinePanel" class="outline-panel hidden" aria-label="Document outline" aria-hidden="true">
                   <div class="outline-header">
                     <span class="outline-title">Outline</span>
+                    <button class=${iconButtonClassNames({ extra: 'outline-close-btn' })} id="outlineClose" type="button" aria-label="Close outline" title="Close outline">
+                      <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>
+                      </svg>
+                    </button>
                   </div>
                   <nav id="outlineNav" class="outline-nav"></nav>
                 </aside>
@@ -645,6 +658,11 @@ export function appShellTemplate() {
         </div>
         <div class="qs-results" id="quickSwitcherResults"></div>
         <div class="qs-hint" id="quickSwitcherHint">Type to search files</div>
+        <div class="qs-footer" aria-hidden="true">
+          <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
+          <span><kbd>↵</kbd> Open</span>
+          <span><kbd>Tab</kbd> Switch mode</span>
+        </div>
       </div>
     </div>
   `;

package/src/client/presentation/comment-overview-controller.js

@@ -27,6 +27,25 @@ function formatLineLabel(anchor = {}) {
   return startLine === endLine ? `Line ${startLine}` : `Lines ${startLine}-${endLine}`;
 }
 
+function createOverviewState({ copy, title, tone = '' }) {
+  const state = document.createElement('div');
+  state.className = 'comment-overview-empty ui-empty-state ui-empty-state--compact';
+  if (tone) {
+    state.dataset.tone = tone;
+  }
+
+  const heading = document.createElement('p');
+  heading.className = 'ui-empty-state-title';
+  heading.textContent = title;
+
+  const description = document.createElement('p');
+  description.className = 'ui-empty-state-copy';
+  description.textContent = copy;
+
+  state.append(heading, description);
+  return state;
+}
+
 export class CommentOverviewController {
   constructor({
     panelElement,
@@ -109,26 +128,32 @@ export class CommentOverviewController {
     this.panel.replaceChildren();
 
     if (this.errorMessage) {
-      const error = document.createElement('div');
-      error.className = 'comment-overview-empty';
-      error.textContent = this.errorMessage;
+      const error = createOverviewState({
+        copy: this.errorMessage,
+        title: 'Comments unavailable',
+        tone: 'error',
+      });
+      error.setAttribute('role', 'alert');
       this.panel.appendChild(error);
       return;
     }
 
     if (this.loading && asArray(this.overview.files).length === 0) {
-      const loading = document.createElement('div');
-      loading.className = 'comment-overview-empty';
-      loading.textContent = 'Loading open comments...';
+      const loading = createOverviewState({
+        copy: 'Checking the vault for active threads…',
+        title: 'Loading comments',
+      });
+      loading.setAttribute('role', 'status');
       this.panel.appendChild(loading);
       return;
     }
 
     const files = asArray(this.overview.files);
     if (files.length === 0) {
-      const empty = document.createElement('div');
-      empty.className = 'comment-overview-empty';
-      empty.textContent = 'No open comments';
+      const empty = createOverviewState({
+        copy: 'Open comments from any document will appear here.',
+        title: 'You’re all caught up',
+      });
       this.panel.appendChild(empty);
       return;
     }

package/src/client/presentation/comment-ui/comment-ui-card.js

@@ -340,20 +340,6 @@ function createThreadElement(thread) {
   const article = document.createElement('article');
   article.className = 'comment-thread-card';
 
-  const header = document.createElement('div');
-  header.className = 'ui-record-header comment-thread-card-header';
-
-  const heading = document.createElement('div');
-  heading.className = 'comment-thread-card-heading';
-
-  const author = document.createElement('span');
-  author.className = 'comment-thread-card-author';
-  author.textContent = thread.createdByName;
-
-  const time = document.createElement('span');
-  time.className = 'comment-thread-card-time';
-  time.textContent = this.formatTimestamp(thread.createdAt);
-
   const actions = document.createElement('div');
   actions.className = 'ui-record-actions comment-thread-card-actions';
 
@@ -407,13 +393,12 @@ function createThreadElement(thread) {
   });
 
   actions.append(jump, reply, resolve);
-  heading.append(author, time);
-  header.append(heading, actions);
 
-  article.append(header);
-
-  thread.messages.forEach((message) => {
-    article.appendChild(this.createMessageElement(thread, message));
+  thread.messages.forEach((message, index) => {
+    article.appendChild(this.createMessageElement(thread, message, {
+      actions: index === 0 ? actions : null,
+      isThreadStart: index === 0,
+    }));
   });
 
   if (this.activeCard?.replyThreadId === thread.id) {
@@ -424,9 +409,10 @@ function createThreadElement(thread) {
 }
 
 /** @this {any} */
-function createMessageElement(thread, message) {
+function createMessageElement(thread, message, { actions = null, isThreadStart = false } = {}) {
   const container = document.createElement('div');
   container.className = 'comment-message-card';
+  container.classList.toggle('is-thread-start', isThreadStart);
 
   const meta = document.createElement('div');
   meta.className = 'ui-record-meta comment-message-card-meta';
@@ -445,6 +431,9 @@ function createMessageElement(thread, message) {
   );
 
   meta.append(author, time);
+  if (actions) {
+    meta.appendChild(actions);
+  }
   container.append(meta, renderedBody);
   container.appendChild(this.createReactionBar(thread, message));
   return container;

package/src/client/presentation/file-action-controller.js

@@ -86,7 +86,6 @@ export class FileActionController {
     this.view = view;
     this.refresh = refresh;
     this.createButton = document.getElementById('sidebarCreateBtn');
-    this.refreshButton = document.getElementById('refreshFilesBtn');
     this.actionDialog = document.getElementById('fileActionDialog');
     this.actionForm = document.getElementById('fileActionForm');
     this.actionTitle = document.getElementById('fileActionTitle');
@@ -109,7 +108,6 @@ export class FileActionController {
     this.createButton?.addEventListener('click', () => {
       this.openRootCreateMenu({ anchor: this.createButton });
     });
-    this.refreshButton?.addEventListener('click', () => this.refresh());
     this.actionCancelButton?.addEventListener('click', () => this.closeActionDialog());
     this.actionForm?.addEventListener('submit', (event) => {
       event.preventDefault();

package/src/client/presentation/git-panel-controller.js

@@ -915,7 +915,11 @@ export class GitPanelController {
       return;
     }
 
-    this.panel.innerHTML = `<div class="git-panel-empty">${escapeHtml(message)}</div>`;
+    this.panel.innerHTML = `
+      <div class="git-panel-empty ui-empty-state ui-empty-state--compact">
+        <p class="ui-empty-state-copy">${escapeHtml(message)}</p>
+      </div>
+    `;
   }
 
   render() {

package/src/client/presentation/outline-controller.js

@@ -12,6 +12,7 @@ export class OutlineController {
     this.onNavigateToHeading = onNavigateToHeading;
     this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
+    this.closeButton = document.getElementById('outlineClose');
     this.navigation = document.getElementById('outlineNav');
     this.previewContainer = document.getElementById('previewContainer');
     this.toggleButton = document.getElementById('outlineToggle');
@@ -39,6 +40,7 @@ export class OutlineController {
 
   initialize() {
     this.toggleButton?.addEventListener('click', () => this.toggle());
+    this.closeButton?.addEventListener('click', () => this.close());
     document.addEventListener('pointerdown', this.handleDocumentPointerDown);
   }
 
@@ -58,6 +60,8 @@ export class OutlineController {
     this.outlineOpen = nextState;
     this.panel?.classList.toggle('hidden', !this.outlineOpen);
     this.toggleButton?.classList.toggle('active', this.outlineOpen);
+    this.panel?.setAttribute('aria-hidden', String(!this.outlineOpen));
+    this.toggleButton?.setAttribute('aria-expanded', String(this.outlineOpen));
 
     if (this.outlineOpen) {
       this.refresh();

package/src/client/styles/components/feedback.css

@@ -14,12 +14,12 @@
 .toast {
   max-width: 320px;
   padding: var(--space-2) var(--space-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-2);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
   color: var(--color-text);
   box-shadow: var(--shadow-md);
-  font-size: var(--text-xs);
+  font-size: var(--text-ui-sm);
   pointer-events: auto;
   opacity: 1;
   display: flex;

package/src/client/styles/components/navigation.css

@@ -51,23 +51,23 @@
 
 .ui-nav-tabs {
   display: flex;
-  gap: 4px;
-  padding: 4px var(--space-2) 0;
+  justify-content: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2) 0;
   border-bottom: 1px solid var(--color-divider);
 }
 
 .ui-nav-tab {
   position: relative;
-  flex: 1;
+  flex: 0 1 auto;
   display: inline-flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   min-width: 0;
-  height: 42px;
-  gap: 3px;
-  padding: 4px var(--space-1) 5px;
-  border: 1px solid transparent;
+  height: 34px;
+  gap: 5px;
+  padding: 0 var(--space-2);
+  border: none;
   border-bottom: 2px solid transparent;
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   color: var(--color-text-muted);
@@ -77,19 +77,24 @@
     color var(--transition-interactive);
 }
 
+.ui-nav-tabs:has(.ui-nav-tab.hidden) .ui-nav-tab:not(.hidden) {
+  flex: 1;
+}
+
 .ui-nav-tab-icon {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--control-icon-md);
-  height: var(--control-icon-md);
+  width: var(--control-icon-sm);
+  height: var(--control-icon-sm);
   flex-shrink: 0;
 }
 
 .ui-nav-tab-icon svg {
   display: block;
-  width: var(--control-icon-md);
-  height: var(--control-icon-md);
+  width: var(--control-icon-sm);
+  height: var(--control-icon-sm);
 }
 
 .ui-nav-tab-label {
@@ -97,16 +102,16 @@
   max-width: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 11px;
+  font-size: var(--text-label);
   font-weight: 600;
   line-height: 1;
 }
 
-.ui-nav-tab.has-changes::after {
+.ui-nav-tab.has-changes .ui-nav-tab-icon::after {
   content: '';
   position: absolute;
-  top: 5px;
-  right: 7px;
+  top: -2px;
+  right: -3px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -115,14 +120,13 @@
 }
 
 .ui-nav-tab:hover {
-  border-color: color-mix(in oklab, var(--color-border) 72%, transparent);
   background: var(--color-surface-offset);
   color: var(--color-text);
 }
 
-.ui-nav-tab.active {
-  border-color: color-mix(in oklab, var(--color-primary) 32%, transparent);
+.ui-nav-tab.active,
+.ui-nav-tab.active:hover {
   border-bottom-color: var(--color-primary);
-  background: var(--color-primary-highlight);
+  background: transparent;
   color: var(--color-primary);
 }