collabmd 0.1.48 → 0.1.51

package/src/client/presentation/team-settings-controller.js

@@ -0,0 +1,228 @@
+import { createFragment, escapeHtml } from '../domain/vault-utils.js';
+
+function formatDate(value) {
+  return value ? new Date(value).toLocaleString() : '—';
+}
+
+function roleOptions(currentRole) {
+  return ['collaborator', 'admin'].map((role) => (
+    `<option value="${role}"${role === currentRole ? ' selected' : ''}>${role === 'admin' ? 'Admin' : 'Collaborator'}</option>`
+  )).join('');
+}
+
+export class TeamSettingsController {
+  constructor({ apiClient, closeToolbarMenu, content, dialog, toastController, trigger }) {
+    this.apiClient = apiClient;
+    this.closeToolbarMenu = closeToolbarMenu;
+    this.content = content;
+    this.dialog = dialog;
+    this.toastController = toastController;
+    this.trigger = trigger;
+    this.trigger?.classList.add('hidden');
+    this.trigger?.addEventListener('click', () => void this.open());
+    this.dialog?.addEventListener('close', () => {
+      this.content?.replaceChildren();
+      this.trigger?.focus?.();
+    });
+    this.dialog?.addEventListener('click', (event) => void this.handleClick(event));
+    this.dialog?.addEventListener('submit', (event) => void this.handleSubmit(event));
+    this.dialog?.addEventListener('change', (event) => void this.handleChange(event));
+  }
+
+  setTriggerVisible(visible) {
+    this.trigger?.classList.toggle('hidden', !visible);
+  }
+
+  async open() {
+    this.closeToolbarMenu?.();
+    this.dialog?.showModal?.();
+    this.renderStatus('Loading team settings…');
+    await this.refresh();
+  }
+
+  async loadOverview() {
+    const [membershipsResult, invitationsResult, auditResult] = await Promise.all([
+      this.apiClient.listMemberships(),
+      this.apiClient.listInvitations(),
+      this.apiClient.listAuditEvents(),
+    ]);
+    this.renderOverview({
+      auditEvents: auditResult.events ?? [],
+      invitations: invitationsResult.invitations ?? [],
+      memberships: membershipsResult.memberships ?? [],
+    });
+  }
+
+  renderStatus(message, { error = false } = {}) {
+    if (!this.content) return;
+    this.content.replaceChildren(createFragment(`<p class="team-settings-status${error ? ' is-error' : ''}" role="status">${escapeHtml(message)}</p>`));
+  }
+
+  renderOverview({ auditEvents = [], invitations = [], memberships = [] }) {
+    if (!this.content) return;
+    const memberMarkup = memberships.length > 0
+      ? memberships.map((membership) => `
+        <li class="team-settings-row">
+          <div class="team-settings-row-main">
+            <strong>${escapeHtml(membership.name || membership.email)}</strong>
+            <span>${escapeHtml(membership.email)}</span>
+            <small>Joined ${formatDate(membership.joinedAt)}</small>
+          </div>
+          <label class="team-settings-row-role">Role
+            <select class="ui-input ui-input--compact" data-membership-role="${escapeHtml(membership.id)}">
+              ${roleOptions(membership.role)}
+            </select>
+          </label>
+          <button class="ui-button ui-button--secondary ui-button--compact" type="button" data-membership-remove="${escapeHtml(membership.id)}" data-membership-email="${escapeHtml(membership.email)}">Remove</button>
+        </li>`).join('')
+      : '<p class="team-settings-empty">No collaborators yet.</p>';
+    const invitationMarkup = invitations.length > 0
+      ? invitations.map((invitation) => `
+        <li class="team-settings-row">
+          <div class="team-settings-row-main">
+            <strong>${escapeHtml(invitation.email)}</strong>
+            <span>Invited by ${escapeHtml(invitation.invitedByName || invitation.invitedByEmail)}</span>
+            <small>Expires ${formatDate(invitation.expiresAt)}</small>
+          </div>
+          <label class="team-settings-row-role">Role
+            <select class="ui-input ui-input--compact" data-invitation-role="${escapeHtml(invitation.id)}">
+              ${roleOptions(invitation.role)}
+            </select>
+          </label>
+          <button class="ui-button ui-button--secondary ui-button--compact" type="button" data-invitation-revoke="${escapeHtml(invitation.id)}" data-invitation-email="${escapeHtml(invitation.email)}">Revoke</button>
+        </li>`).join('')
+      : '<p class="team-settings-empty">No pending invitations.</p>';
+    const auditMarkup = auditEvents.length > 0
+      ? auditEvents.map((event) => `
+        <li class="team-settings-row team-settings-row--audit">
+          <div class="team-settings-row-main">
+            <strong>${escapeHtml(event.type)}</strong>
+            <span>${escapeHtml(event.targetEmail || '')}${event.targetRole ? ` · ${escapeHtml(event.targetRole)}` : ''}</span>
+            <small>By ${escapeHtml(event.actorName || event.actorEmail)} · ${formatDate(event.createdAt)}</small>
+          </div>
+        </li>`).join('')
+      : '<p class="team-settings-empty">No access history yet.</p>';
+    this.content.replaceChildren(createFragment(`
+      <section class="team-settings-section">
+        <h3>Collaborators</h3>
+        <ul class="team-settings-list">${memberMarkup}</ul>
+      </section>
+      <section class="team-settings-section">
+        <h3>Pending invitations</h3>
+        <ul class="team-settings-list">${invitationMarkup}</ul>
+        <form class="team-settings-invite-form" data-invite-form>
+          <label class="app-dialog-field">
+            <span class="app-dialog-label">Email</span>
+            <input class="ui-input" name="email" type="email" maxlength="254" autocomplete="off" spellcheck="false" required placeholder="teammate@example.com">
+          </label>
+          <label class="app-dialog-field">
+            <span class="app-dialog-label">Role</span>
+            <select class="ui-input" name="role">
+              <option value="collaborator">Collaborator</option>
+              <option value="admin">Admin</option>
+            </select>
+          </label>
+          <button class="ui-button ui-button--primary" type="submit">Invite</button>
+        </form>
+        <p class="team-settings-note">Share this workspace URL with the invited person. They sign in with the matching Google email, then accept the invitation. Email delivery is not set up yet.</p>
+      </section>
+      <section class="team-settings-section">
+        <h3>Access history</h3>
+        <ul class="team-settings-list team-settings-list--audit">${auditMarkup}</ul>
+      </section>
+      <div class="team-settings-actions">
+        <button class="ui-button ui-button--ghost" type="button" data-team-close>Close</button>
+      </div>
+      <p class="team-settings-live" role="status" aria-live="polite"></p>
+    `));
+  }
+
+  setLiveMessage(message) {
+    const live = this.content?.querySelector('.team-settings-live');
+    if (live) live.textContent = message;
+  }
+
+  async refresh() {
+    try {
+      await this.loadOverview();
+    } catch (error) {
+      this.renderStatus(error.message || 'Failed to load team settings', { error: true });
+    }
+  }
+
+  async handleClick(event) {
+    const target = event.target.closest('button');
+    if (!target) return;
+    if (target.dataset.teamClose != null) {
+      this.dialog.close();
+      return;
+    }
+    if (target.dataset.membershipRemove) {
+      if (!window.confirm(`Remove ${target.dataset.membershipEmail} from the team? They lose workspace access immediately.`)) return;
+      try {
+        await this.apiClient.removeMembership(target.dataset.membershipRemove);
+        await this.refresh();
+        this.setLiveMessage('Collaborator removed');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to remove collaborator');
+      }
+      return;
+    }
+    if (target.dataset.invitationRevoke) {
+      if (!window.confirm(`Revoke the invitation for ${target.dataset.invitationEmail}?`)) return;
+      try {
+        await this.apiClient.revokeInvitation(target.dataset.invitationRevoke);
+        await this.refresh();
+        this.setLiveMessage('Invitation revoked');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to revoke invitation');
+      }
+    }
+  }
+
+  async handleChange(event) {
+    const membershipSelect = event.target.closest('[data-membership-role]');
+    if (membershipSelect) {
+      try {
+        await this.apiClient.updateMembershipRole(membershipSelect.dataset.membershipRole, membershipSelect.value);
+        await this.refresh();
+        this.setLiveMessage('Role updated');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to update role');
+        await this.refresh();
+      }
+      return;
+    }
+    const invitationSelect = event.target.closest('[data-invitation-role]');
+    if (invitationSelect) {
+      try {
+        await this.apiClient.updateInvitationRole(invitationSelect.dataset.invitationRole, invitationSelect.value);
+        await this.refresh();
+        this.setLiveMessage('Invitation role updated');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to update invitation');
+        await this.refresh();
+      }
+    }
+  }
+
+  async handleSubmit(event) {
+    const form = event.target.closest('[data-invite-form]');
+    if (!form) return;
+    event.preventDefault();
+    const data = new FormData(form);
+    const submit = form.querySelector('[type="submit"]');
+    submit.disabled = true;
+    try {
+      await this.apiClient.createInvitation({
+        email: String(data.get('email') ?? '').trim(),
+        role: data.get('role'),
+      });
+      await this.refresh();
+      this.setLiveMessage('Invitation created — share the workspace URL with the invited person.');
+    } catch (error) {
+      this.setLiveMessage(error.message || 'Failed to create invitation');
+      submit.disabled = false;
+    }
+  }
+}

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

@@ -1,7 +1,6 @@
 /* ===== COMPONENTS / NAVIGATION ===== */
 
-.ui-button--toolbar,
-.ui-toolbar-button {
+.ui-button--toolbar {
   display: flex;
   align-items: center;
   gap: var(--space-1);

package/src/client/styles/deferred-collab.css

@@ -0,0 +1,5 @@
+@import './features/comments-drawer.css';
+@import './features/comment-overview.css';
+@import './features/comment-overlays.css';
+@import './features/comment-card.css';
+@import './features/comment-markdown.css';

package/src/client/styles/deferred-git.css

@@ -0,0 +1,7 @@
+@import './features/git-branch.css';
+@import './features/git-files.css';
+@import './features/git-history.css';
+@import './features/diff-toolbar.css';
+@import './features/diff-commit.css';
+@import './features/diff-lines.css';
+@import './features/diff-special.css';

package/src/client/styles/deferred-preview.css

@@ -0,0 +1,6 @@
+@import './features/media-lightbox.css';
+@import './features/embedded-preview.css';
+@import './features/diagram-preview.css';
+@import './features/preview-markdown.css';
+@import './features/backlinks.css';
+@import './overrides/highlightjs.css';

package/src/client/styles/features/agent-connection.css

@@ -0,0 +1,202 @@
+.agent-connection-dialog {
+  width: min(680px, calc(100vw - var(--space-6)));
+}
+
+#agentConnectionContent,
+.agent-connection-form,
+.agent-connection-section,
+.agent-connection-list {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.agent-connection-section h3,
+.agent-connection-scopes legend {
+  font-size: var(--text-sm);
+  font-weight: 700;
+}
+
+.agent-connection-section code,
+.agent-connection-section pre,
+.agent-connection-details > code,
+.agent-connection-details pre {
+  overflow: auto;
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--text-xs);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.agent-connection-section p,
+.agent-connection-note,
+.agent-connection-empty p,
+.agent-connection-status,
+.agent-connection-card span,
+.agent-connection-card small,
+.agent-connection-live,
+.agent-connection-details p,
+.agent-connection-step-header p,
+.agent-connection-steps span {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.agent-connection-status.is-error,
+.agent-connection-warning {
+  color: var(--color-error);
+}
+
+.agent-connection-empty {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-offset);
+}
+
+.agent-connection-empty strong,
+.agent-connection-step-header h3,
+.agent-connection-steps strong {
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.agent-connection-step-header {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.agent-connection-step-header > span {
+  color: var(--color-primary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.agent-connection-steps {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding-left: var(--space-5);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.agent-connection-steps code {
+  color: var(--color-text);
+  font-size: var(--text-xs);
+}
+
+.agent-connection-steps--setup {
+  padding-left: var(--space-6);
+}
+
+.agent-connection-steps--setup > li {
+  padding-left: var(--space-1);
+}
+
+.agent-connection-steps--setup > li::marker {
+  color: var(--color-primary);
+  font-weight: 700;
+}
+
+.agent-connection-steps--setup li > div {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.agent-connection-steps--setup .ui-button {
+  justify-self: start;
+  margin-top: var(--space-2);
+}
+
+.agent-connection-details {
+  display: grid;
+  gap: var(--space-3);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.agent-connection-details[open] {
+  padding-bottom: var(--space-1);
+}
+
+.agent-connection-details summary {
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.agent-connection-details > :not(summary) {
+  margin-top: var(--space-3);
+}
+
+.agent-connection-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+}
+
+.agent-connection-card > div {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.agent-connection-scopes {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.agent-connection-scopes label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.agent-connection-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+.agent-connection-token {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+@media (max-width: 640px) {
+  .agent-connection-card {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .agent-connection-actions {
+    display: grid;
+  }
+
+  .agent-connection-steps--setup .ui-button {
+    justify-self: stretch;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-connection-dialog {
+    transition: none;
+  }
+}

package/src/client/styles/features/collaboration-chat.css

@@ -6,6 +6,7 @@
 
 .chat-toggle-btn {
   position: relative;
+  anchor-name: --chat-trigger;
 }
 
 .chat-toggle-btn.is-active {
@@ -35,13 +36,19 @@
 }
 
 .chat-panel {
-  display: flex;
+  top: calc(anchor(--chat-trigger bottom) + var(--space-2));
+  right: anchor(--chat-trigger right);
+  display: none;
   flex-direction: column;
   gap: var(--space-3);
   max-height: min(70vh, 520px);
   padding: var(--space-4);
 }
 
+.chat-panel:popover-open {
+  display: flex;
+}
+
 .chat-container > .chat-toast-container {
   position: fixed;
   top: calc(var(--toolbar-h) + var(--space-2));

package/src/client/styles/features/collaboration-dialogs.css

@@ -111,14 +111,29 @@
 .tab-lock-overlay {
   position: fixed;
   inset: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
   z-index: 1200;
-  display: grid;
   place-items: center;
   padding: var(--space-6);
+  border: none;
   background: oklch(from var(--color-bg) l c h / 0.86);
+  color: var(--color-text);
   backdrop-filter: blur(10px);
 }
 
+.tab-lock-overlay[open] {
+  display: grid;
+}
+
+.tab-lock-overlay::backdrop {
+  background: transparent;
+}
+
 .tab-lock-card {
   display: grid;
   gap: var(--space-4);

package/src/client/styles/features/collaboration-presence.css

@@ -137,31 +137,44 @@
   opacity: 0.85;
 }
 
+.user-avatar-overflow-trigger,
+.toolbar-presence-count {
+  anchor-name: --presence-trigger;
+}
+
 .user-avatar-overflow-trigger {
   background: var(--color-surface-dynamic);
   color: var(--color-text-muted);
 }
 
 .collaboration-popover {
-  position: absolute;
-  top: calc(100% + var(--space-2));
-  right: 0;
+  position: fixed;
+  inset: auto;
   z-index: 30;
   width: min(360px, calc(100vw - var(--space-6)));
+  margin: 0;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-surface);
+  color: var(--color-text);
   box-shadow: var(--shadow-lg);
+  position-try-fallbacks: flip-block, flip-inline;
 }
 
 .presence-panel {
-  display: flex;
+  top: calc(anchor(--presence-trigger bottom) + var(--space-2));
+  right: anchor(--presence-trigger right);
+  display: none;
   flex-direction: column;
   gap: var(--space-2);
   max-height: min(72vh, 480px);
   padding: var(--space-3);
 }
 
+.presence-panel:popover-open {
+  display: flex;
+}
+
 .presence-panel-header {
   display: flex;
   align-items: flex-start;

package/src/client/styles/features/diagram-preview.css

@@ -520,21 +520,6 @@ body.excalidraw-maximized-open .resizer {
   opacity: 1;
 }
 
-.file-tree-file.is-excalidraw .file-tree-icon {
-  color: var(--color-primary);
-}
-
-.file-tree-file.is-pdf .file-tree-icon {
-  color: var(--color-danger);
-}
-
-.file-tree-file.is-mermaid .file-tree-icon {
-  color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
-}
-
-.file-tree-file.is-structurizr .file-tree-icon {
-  color: var(--color-primary);
-}
 
 .structurizr-preview-shell {
   display: flex;

package/src/client/styles/features/diff-toolbar.css

@@ -62,7 +62,7 @@
   gap: var(--space-2);
 }
 
-.diff-file-nav .ui-action-icon:disabled {
+.diff-file-nav .ui-icon-button--action:disabled {
   opacity: 0.3;
 }
 

package/src/client/styles/features/media-lightbox.css

@@ -3,12 +3,22 @@
 .image-lightbox-root {
   position: fixed;
   inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
   z-index: 220;
-  display: grid;
-  place-items: center;
   pointer-events: auto;
 }
 
+.image-lightbox-root::backdrop {
+  background: transparent;
+}
+
 .image-lightbox-root[hidden] {
   display: none !important;
 }
@@ -67,7 +77,6 @@
 }
 
 .image-lightbox-btn {
-  min-width: 0;
   min-height: var(--control-target-min);
   min-width: var(--control-target-min);
   padding: var(--space-2) var(--space-3);

package/src/client/styles/features/outline.css

@@ -28,8 +28,10 @@
   flex-shrink: 0;
 }
 
-.outline-close-btn {
-  display: none;
+@media (min-width: 769px) {
+  .outline-close-btn {
+    display: none;
+  }
 }
 
 .outline-title {