collabmd 0.1.49 → 0.1.51

package/src/client/presentation/hosted-workspace-gate-controller.js

@@ -0,0 +1,180 @@
+import { createFragment, escapeHtml } from '../domain/vault-utils.js';
+
+export class HostedWorkspaceGateController {
+  constructor({ apiClient, appRoot = null, gate, runtimeConfig, teamSettingsController }) {
+    this.apiClient = apiClient;
+    this.appRoot = appRoot;
+    this.gate = gate;
+    this.content = gate?.querySelector('[data-hosted-gate-content]') ?? null;
+    this.teamSettingsController = teamSettingsController;
+    this.enabled = runtimeConfig.hosted?.enabled === true;
+    this.accessGrantedPromise = new Promise((resolve) => {
+      this.resolveAccessGranted = resolve;
+    });
+    this.gate?.addEventListener('click', (event) => void this.handleClick(event));
+    this.gate?.addEventListener('submit', (event) => void this.handleSubmit(event));
+  }
+
+  async initialize() {
+    if (!this.enabled) {
+      this.hide();
+      return;
+    }
+    await this.refresh();
+    await this.accessGrantedPromise;
+  }
+
+  async refresh() {
+    this.show('Loading workspace…');
+    let status;
+    try {
+      status = await this.apiClient.getStatus();
+    } catch (error) {
+      if (error.status === 401 || error.code === 'HOSTED_AUTH_REQUIRED') {
+        this.show('Sign in to access this workspace.', { title: 'Sign-in required' });
+      } else {
+        this.show(error.message || 'Failed to load workspace status.', { error: true, title: 'Workspace unavailable' });
+      }
+      this.teamSettingsController?.setTriggerVisible(false);
+      return;
+    }
+    this.applyStatus(status);
+  }
+
+  applyStatus(status) {
+    const membership = status.membership ?? null;
+    const isAdmin = membership?.role === 'admin';
+    this.teamSettingsController?.setTriggerVisible(Boolean(isAdmin && status.setupComplete));
+    if (!status.claimed) {
+      this.renderClaim();
+      return;
+    }
+    if (!status.setupComplete) {
+      if (isAdmin) {
+        this.renderSetup(status);
+      } else {
+        this.show('Workspace setup is incomplete. Ask a Team Admin to finish setup.', { title: status.team?.name || 'Workspace setup' });
+      }
+      return;
+    }
+    if (!membership) {
+      this.renderAccept(status);
+      return;
+    }
+    this.hide();
+    this.resolveAccessGranted();
+  }
+
+  hide() {
+    this.gate?.classList.add('hidden');
+    this.content?.replaceChildren();
+    if (this.appRoot) this.appRoot.inert = false;
+  }
+
+  reveal() {
+    if (!this.gate) return;
+    this.gate.classList.remove('hidden');
+    if (this.appRoot) this.appRoot.inert = true;
+    this.content?.querySelector('button, input, select')?.focus?.();
+  }
+
+  render(markup) {
+    if (!this.gate || !this.content) return;
+    this.content.replaceChildren(createFragment(markup));
+    this.reveal();
+  }
+
+  show(message, { error = false, title = 'Workspace' } = {}) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(title)}</h2>
+      <p class="hosted-gate-status${error ? ' is-error' : ''}" role="status">${escapeHtml(message)}</p>
+    `);
+  }
+
+  renderClaim() {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">Claim this workspace</h2>
+      <p class="hosted-gate-copy">Enter the team name and the one-time claim token from provisioning to become the first Team Admin.</p>
+      <form class="hosted-gate-form" data-claim-form>
+        <label class="app-dialog-field">
+          <span class="app-dialog-label">Team name</span>
+          <input class="ui-input" name="teamName" maxlength="80" autocomplete="off" spellcheck="false" required>
+        </label>
+        <label class="app-dialog-field">
+          <span class="app-dialog-label">Claim token</span>
+          <input class="ui-input" name="token" type="password" autocomplete="off" spellcheck="false" required>
+        </label>
+        <button class="ui-button ui-button--primary" type="submit">Claim workspace</button>
+      </form>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  renderSetup(status) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(status.team?.name || 'Workspace setup')}</h2>
+      <p class="hosted-gate-copy">Workspace setup is not complete. The editor and invitations stay unavailable until setup is done. Connecting a GitHub vault source comes later; for now, completing setup unlocks team management.</p>
+      <button class="ui-button ui-button--primary" type="button" data-complete-setup>Complete setup</button>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  renderAccept(status) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(status.team?.name || 'Workspace')}</h2>
+      <p class="hosted-gate-copy">You are signed in but not a team member yet. If a Team Admin invited your Google email, accept below to join.</p>
+      <button class="ui-button ui-button--primary" type="button" data-accept-invitation>Accept invitation</button>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  setLiveMessage(message) {
+    const live = this.content?.querySelector('.hosted-gate-live');
+    if (live) live.textContent = message;
+  }
+
+  async handleClick(event) {
+    const target = event.target.closest('button');
+    if (!target) return;
+    if (target.dataset.completeSetup != null) {
+      target.disabled = true;
+      try {
+        await this.apiClient.completeSetup();
+        await this.refresh();
+      } catch (error) {
+        this.setLiveMessage(error.message || 'Failed to complete setup');
+        target.disabled = false;
+      }
+      return;
+    }
+    if (target.dataset.acceptInvitation != null) {
+      target.disabled = true;
+      try {
+        await this.apiClient.acceptInvitation();
+        await this.refresh();
+      } catch (error) {
+        this.setLiveMessage(error.message || 'No pending invitation was found for your account.');
+        target.disabled = false;
+      }
+    }
+  }
+
+  async handleSubmit(event) {
+    const form = event.target.closest('[data-claim-form]');
+    if (!form) return;
+    event.preventDefault();
+    const data = new FormData(form);
+    const submit = form.querySelector('[type="submit"]');
+    submit.disabled = true;
+    try {
+      await this.apiClient.claimWorkspace({
+        teamName: String(data.get('teamName') ?? '').trim(),
+        token: String(data.get('token') ?? ''),
+      });
+      await this.refresh();
+    } catch (error) {
+      this.setLiveMessage(error.message || 'Failed to claim workspace');
+      submit.disabled = false;
+    }
+  }
+}

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

@@ -2,12 +2,19 @@ export class LayoutController {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onMeasureEditor,
+    onPreferredViewChange = null,
+    onViewChange = null,
     onViewRequest = null,
+    preferredView = 'split',
   }) {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.onMeasureEditor = onMeasureEditor;
+    this.onPreferredViewChange = onPreferredViewChange;
+    this.onViewChange = onViewChange;
     this.onViewRequest = onViewRequest;
-    this.preferredView = 'split';
+    this.preferredView = preferredView === 'editor' || preferredView === 'preview' || preferredView === 'split'
+      ? preferredView
+      : 'split';
     this.mobileShowsEditor = !this.isMobileViewport();
     this.currentView = this.mobileShowsEditor ? this.preferredView : 'preview';
     this.editorLayout = document.getElementById('editorLayout');
@@ -78,6 +85,7 @@ export class LayoutController {
     this.currentView = view;
     this.editorLayout?.setAttribute('data-view', view);
     this.syncViewButtons();
+    this.onViewChange?.(view);
   }
 
   setView(view, { persist = true } = {}) {
@@ -87,6 +95,7 @@ export class LayoutController {
 
     if (persist) {
       this.preferredView = view;
+      this.onPreferredViewChange?.(view);
     }
 
     this.applyView(view);

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/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/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/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 {

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

@@ -13,6 +13,25 @@
   line-height: 1.7;
 }
 
+.preview-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, .table-wrapper, .frontmatter-block) {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 4rem;
+}
+
+.preview-content img {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 240px;
+}
+
+.preview-content > pre,
+.preview-content > table,
+.preview-content > .table-wrapper {
+  contain-intrinsic-size: auto 12rem;
+}
+
+
+
+
 .preview-content[data-render-phase='shell'] {
   color: var(--color-text-muted);
 }
@@ -1047,6 +1066,10 @@
   position: relative;
 }
 
+.preview-content .task-list-label {
+  cursor: pointer;
+}
+
 .preview-content .task-list-item input[type='checkbox'] {
   position: absolute;
   top: 0.5em;
@@ -1104,20 +1127,11 @@
   overflow-wrap: normal;
 }
 
-.preview-content .preview-code-block {
-  position: relative;
-}
-
-.preview-content .preview-code-block pre code {
+.preview-content pre:has(> .preview-code-copy-button) > code {
   padding-right: 84px;
 }
 
-.preview-content .preview-code-actions {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  height: 0;
-}
+
 
 .preview-content .preview-code-copy-button {
   position: absolute;