collabmd 0.1.29 → 0.1.30

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

@@ -242,6 +242,14 @@ export function appShellTemplate() {
                 <span class="ui-toolbar-button-label">Share</span>
               </button>
 
+              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: '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>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+                <span class="ui-toolbar-button-label">Search files</span>
+              </button>
+
               <details class="toolbar-overflow-group hidden" id="exportMenuGroup">
                 <summary class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'toolbar-overflow-group-toggle' })} aria-label="Export options" title="Export">
                   <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">
@@ -327,6 +335,13 @@ export function appShellTemplate() {
                   <span class="pane-label-meta" id="lineInfo">Ln 1, Col 1</span>
                 </div>
                 <div class="pane-header-actions">
+                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'mobile-editor-find-btn' })} id="editorFindBtn" aria-label="Find in file" title="Find in file">
+                    <svg width="14" height="14" 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>
+                      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <span class="ui-action-label">Find</span>
+                  </button>
                   <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'hidden' })} id="commentSelectionBtn" aria-label="Comment current line or selection" title="Comment current line or selection">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                       <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>

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

@@ -436,11 +436,10 @@ export class FileActionController {
 
     this.setActionDialogBusy(true);
 
-    let shouldClose = false;
+    let shouldClose;
     try {
       shouldClose = await this.pendingAction.onSubmit(rawValue);
     } catch (error) {
-      shouldClose = false;
       this.showError('Failed to complete action', error);
     }
 

package/src/client/presentation/git-diff-view-controller.js

@@ -696,16 +696,13 @@ export class GitDiffViewController {
     const errorMessage = this.fileErrors.get(file.path);
     const detail = this.getFileDetail(file.path) ?? file;
 
-    let bodyMarkup = '';
-    if (isCollapsed) {
-      bodyMarkup = '';
-    } else if (isLoading) {
-      bodyMarkup = '<div class="diff-empty-state">Loading file diff...</div>';
-    } else if (errorMessage) {
-      bodyMarkup = `<div class="diff-empty-state">${escapeHtml(errorMessage)}</div>`;
-    } else {
-      bodyMarkup = this.renderDiffDetail(detail, index, { includeHeader: false });
-    }
+    const bodyMarkup = isCollapsed
+      ? ''
+      : isLoading
+        ? '<div class="diff-empty-state">Loading file diff...</div>'
+        : errorMessage
+          ? `<div class="diff-empty-state">${escapeHtml(errorMessage)}</div>`
+          : this.renderDiffDetail(detail, index, { includeHeader: false });
 
     return `
       <section

package/src/client/styles/base.css

@@ -11,10 +11,15 @@ html {
   scroll-behavior: smooth;
   hanging-punctuation: first last;
   scroll-padding-top: var(--space-16);
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
 }
 
 body {
+  height: 100%;
   min-height: 100dvh;
+  overflow: hidden;
   line-height: 1.6;
   font-family: var(--font-body, sans-serif);
   font-size: var(--text-sm);

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

@@ -13,6 +13,10 @@
   margin-top: 0;
 }
 
+.preview-content .frontmatter-block + h1 {
+  margin-top: 0;
+}
+
 .preview-content h2 {
   margin: var(--space-6) 0 var(--space-3);
   font-size: var(--text-lg);
@@ -40,6 +44,128 @@
   margin-bottom: var(--space-4);
 }
 
+.preview-content .frontmatter-block {
+  max-width: 72ch;
+  margin: 0 0 var(--space-5);
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface));
+}
+
+.preview-content .frontmatter-label {
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.preview-content .frontmatter-block > .frontmatter-label {
+  display: block;
+  margin-bottom: var(--space-3);
+}
+
+.preview-content .frontmatter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+
+.preview-content .frontmatter-toggle {
+  flex-shrink: 0;
+  min-height: 30px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--text-ui-sm);
+  cursor: pointer;
+}
+
+.preview-content .frontmatter-toggle:hover {
+  background: var(--color-surface-offset);
+}
+
+.preview-content .frontmatter-toggle:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.preview-content .frontmatter-summary {
+  margin-bottom: var(--space-1);
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+}
+
+.preview-content .frontmatter-properties {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+}
+
+.preview-content .frontmatter-property {
+  display: grid;
+  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
+  gap: var(--space-3);
+  align-items: start;
+}
+
+.preview-content .frontmatter-key {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+  font-weight: 600;
+}
+
+.preview-content .frontmatter-value {
+  min-width: 0;
+  margin: 0;
+}
+
+.preview-content .frontmatter-value-text {
+  display: inline-block;
+  color: var(--color-text);
+  overflow-wrap: anywhere;
+}
+
+.preview-content .frontmatter-value-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.preview-content .frontmatter-value-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+}
+
+.preview-content .frontmatter-value-code {
+  margin: 0;
+  border-radius: var(--radius-md);
+}
+
+.preview-content .frontmatter-value-code code {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.preview-content .frontmatter-empty {
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+}
+
 .preview-content p:has(> .excalidraw-embed-placeholder:only-child),
 .preview-content p:has(> .video-embed-placeholder:only-child),
 .preview-content p:has(> .plantuml-shell:only-child) {
@@ -202,3 +328,15 @@
   border-radius: var(--radius-md);
   cursor: zoom-in;
 }
+
+@media (max-width: 768px) {
+  .preview-content .frontmatter-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .preview-content .frontmatter-property {
+    grid-template-columns: 1fr;
+    gap: var(--space-1);
+  }
+}

package/src/client/styles/layout/editor-page.css

@@ -316,6 +316,12 @@
   border-left: 1px solid var(--color-divider);
 }
 
+.markdown-toolbar .markdown-toolbar-group--mobile-only,
+.pane-header-actions .mobile-editor-find-btn,
+.toolbar-overflow-menu .toolbar-search-files-btn {
+  display: none !important;
+}
+
 .markdown-toolbar-block-trigger {
   display: inline-flex;
   align-items: center;

package/src/client/styles/layout/responsive.css

@@ -130,6 +130,10 @@
     width: 100%;
   }
 
+  .toolbar-overflow-menu .toolbar-search-files-btn {
+    display: inline-flex !important;
+  }
+
   .toolbar-overflow-menu .ui-toolbar-button-label {
     display: inline;
     min-width: 0;
@@ -204,6 +208,53 @@
     flex: 1;
   }
 
+  .editor-pane {
+    position: relative;
+  }
+
+  .editor-pane > .pane-header {
+    position: sticky;
+    top: 0;
+    z-index: 8;
+    gap: var(--space-2);
+    padding-inline: var(--space-2);
+  }
+
+  .editor-pane > .pane-header .pane-header-meta {
+    flex: 1 1 auto;
+    gap: var(--space-2);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .editor-pane > .pane-header .pane-label {
+    flex-shrink: 0;
+  }
+
+  .editor-pane > .pane-header .pane-label-meta {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .editor-pane > .pane-header .pane-header-actions {
+    flex-shrink: 0;
+    gap: 0;
+    min-width: 0;
+    margin-left: auto;
+  }
+
+  .editor-pane > .pane-header .ui-button--compact {
+    gap: 4px;
+    padding-inline: 6px;
+  }
+
+  .editor-pane > .pane-header .ui-action-label,
+  .editor-pane > .pane-header #wrapToggleLabel {
+    font-size: 11px;
+  }
+
   .preview-content {
     padding: var(--space-4);
   }
@@ -283,15 +334,29 @@
   }
 
   .markdown-toolbar {
+    position: sticky;
+    top: 28px;
+    z-index: 7;
     overflow-x: auto;
     flex-wrap: nowrap;
     scrollbar-width: thin;
   }
 
+  .markdown-toolbar .markdown-toolbar-group--mobile-only {
+    display: inline-flex !important;
+    margin-left: 0;
+    padding-left: 0;
+    border-left: none;
+  }
+
   .markdown-toolbar-popover {
     max-width: min(240px, calc(100vw - 24px));
   }
 
+  .pane-header-actions .mobile-editor-find-btn {
+    display: inline-flex !important;
+  }
+
   .outline-panel {
     position: absolute;
     inset: 0;
@@ -403,6 +468,30 @@
   }
 }
 
+@media (max-width: 480px) {
+  .editor-pane > .pane-header {
+    gap: var(--space-1);
+    padding-inline: var(--space-1);
+  }
+
+  .editor-pane > .pane-header .pane-header-meta {
+    gap: var(--space-1);
+  }
+
+  .editor-pane > .pane-header .pane-label-meta {
+    font-size: 11px;
+  }
+
+  .editor-pane > .pane-header .ui-button--compact {
+    padding-inline: 4px;
+  }
+
+  .editor-pane > .pane-header .ui-action-label,
+  .editor-pane > .pane-header #wrapToggleLabel {
+    font-size: 10px;
+  }
+}
+
 @media (min-width: 769px) {
   .mobile-view-toggle {
     display: none !important;

package/src/client/styles/layout/shell.css

@@ -1,8 +1,14 @@
 /* ===== APP SHELL ===== */
 
 .app-shell {
+  position: fixed;
+  top: var(--app-viewport-offset-top, 0px);
+  right: 0;
+  left: 0;
   display: flex;
+  width: 100%;
   height: 100dvh;
+  height: var(--app-viewport-height, 100dvh);
   overflow: hidden;
 }
 

package/src/client/styles/overrides/codemirror.css

@@ -51,3 +51,77 @@
   content: '📄';
   font-size: var(--text-ui-sm);
 }
+
+.cm-panels-top {
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.cm-panel.cm-search {
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-2);
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  color: var(--color-text);
+  box-shadow: inset 0 -1px 0 var(--color-divider);
+  font-family: var(--font-body);
+}
+
+.cm-panel.cm-search label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.cm-panel.cm-search .cm-textfield {
+  min-height: 32px;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+}
+
+.cm-panel.cm-search .cm-button {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.cm-panel.cm-search .cm-button:hover:not(:disabled),
+.cm-panel.cm-search .cm-button:focus-visible {
+  background: var(--color-surface-dynamic);
+  outline: none;
+}
+
+@media (max-width: 768px) {
+  .cm-panel.cm-search {
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+
+  .cm-panel.cm-search label {
+    flex: 1 1 100%;
+  }
+
+  .cm-panel.cm-search .cm-textfield {
+    width: 100%;
+    min-height: 40px;
+    font-size: 16px;
+  }
+
+  .cm-panel.cm-search .cm-button {
+    min-height: 40px;
+    padding: 0 12px;
+  }
+}

package/src/server/auth/create-auth-service.js

@@ -168,8 +168,7 @@ function readAuthenticatedOidcSession(sessionCookieManager, req) {
     return null;
   }
 
-  const expiresAt = Number(session.expiresAt);
-  if (Number.isFinite(expiresAt) && expiresAt <= Date.now()) {
+  if (hasExpiredSession(session)) {
     return null;
   }
 
@@ -185,6 +184,29 @@ function readAuthenticatedOidcSession(sessionCookieManager, req) {
   };
 }
 
+function hasExpiredSession(session) {
+  const expiresAt = Number(session?.expiresAt);
+  return Number.isFinite(expiresAt) && expiresAt <= Date.now();
+}
+
+function resolveSessionExpiresAt(sessionMaxAgeMs, fallbackExpiresAt = null) {
+  if (Number.isFinite(sessionMaxAgeMs) && sessionMaxAgeMs > 0) {
+    return Date.now() + sessionMaxAgeMs;
+  }
+
+  return Number.isFinite(fallbackExpiresAt) ? fallbackExpiresAt : null;
+}
+
+function createSessionCookieOptions(expiresAt) {
+  if (!Number.isFinite(expiresAt)) {
+    return {};
+  }
+
+  return {
+    expires: new Date(expiresAt),
+  };
+}
+
 function buildClientConfig(authConfig, { basePath = '' } = {}) {
   const loginEndpoint = prependBasePath(basePath, '/api/auth/oidc/login');
   const sessionEndpoint = prependBasePath(basePath, '/api/auth/session');
@@ -232,7 +254,7 @@ function createPasswordStrategy(authConfig, sessionCookieManager, clientConfig)
 
   function hasValidSession(req) {
     const session = sessionCookieManager.readSession(req);
-    return session?.strategy === AUTH_STRATEGY_PASSWORD;
+    return session?.strategy === AUTH_STRATEGY_PASSWORD && !hasExpiredSession(session);
   }
 
   return {
@@ -260,6 +282,8 @@ function createPasswordStrategy(authConfig, sessionCookieManager, clientConfig)
         }, { kind: 'invalid_credentials' });
       }
 
+      const expiresAt = resolveSessionExpiresAt(authConfig.sessionMaxAgeMs);
+
       return createResponse(200, {
         auth: clientConfig,
         authenticated: true,
@@ -269,8 +293,9 @@ function createPasswordStrategy(authConfig, sessionCookieManager, clientConfig)
         kind: 'session_created',
         setCookie: sessionCookieManager.createSessionCookie(req, {
           authenticatedAt: Date.now(),
+          ...(Number.isFinite(expiresAt) ? { expiresAt } : {}),
           strategy: AUTH_STRATEGY_PASSWORD,
-        }),
+        }, createSessionCookieOptions(expiresAt)),
       });
     },
 
@@ -456,9 +481,10 @@ function createOidcStrategy(authConfig, sessionCookieManager, flowCookieManager,
           return createErrorRedirect(req, accessDecision.error, flowPayload);
         }
 
-        const expiresAt = Number.isFinite(claims.exp)
+        const tokenExpiresAt = Number.isFinite(claims.exp)
           ? claims.exp * 1000
           : Date.now() + (Math.max(Number(tokens.expires_in) || 3600, 1) * 1000);
+        const expiresAt = resolveSessionExpiresAt(authConfig.sessionMaxAgeMs, tokenExpiresAt);
         const returnTo = sanitizeReturnTo(flowPayload.returnTo, {
           basePath,
           publicBaseUrl: authConfig.oidc.publicBaseUrl,
@@ -480,7 +506,7 @@ function createOidcStrategy(authConfig, sessionCookieManager, flowCookieManager,
               expiresAt,
               strategy: AUTH_STRATEGY_OIDC,
               user,
-            }),
+            }, createSessionCookieOptions(expiresAt)),
             flowCookieManager.clear(req),
           ],
         });

package/src/server/config/env.js

@@ -10,12 +10,34 @@ import {
   createRandomSessionSecret,
 } from '../auth/create-auth-service.js';
 import { loadBuildInfo } from './build-info.js';
+import { isPerfLoggingEnabled } from './perf-logging.js';
 
 function parsePositiveInt(rawValue, fallbackValue) {
   const parsed = Number.parseInt(rawValue ?? '', 10);
   return Number.isInteger(parsed) && parsed > 0 ? parsed : fallbackValue;
 }
 
+function parseOptionalPositiveInt(rawValue, {
+  fallbackValue = null,
+  variableName = 'value',
+} = {}) {
+  const normalized = String(rawValue ?? '').trim();
+  if (!normalized) {
+    return fallbackValue;
+  }
+
+  if (!/^[1-9]\d*$/u.test(normalized)) {
+    throw new Error(`${variableName} must be a positive integer.`);
+  }
+
+  const parsed = Number(normalized);
+  if (Number.isSafeInteger(parsed) && parsed > 0) {
+    return parsed;
+  }
+
+  throw new Error(`${variableName} must be a positive integer.`);
+}
+
 function parsePort(rawPort, fallbackPort) {
   return parsePositiveInt(rawPort, fallbackPort);
 }
@@ -284,6 +306,10 @@ export function loadConfig(overrides = {}) {
       password,
       passwordWasGenerated,
       sessionCookieName: authOverrides.sessionCookieName || process.env.AUTH_SESSION_COOKIE_NAME || 'collabmd_auth',
+      sessionMaxAgeMs: parseOptionalPositiveInt(
+        authOverrides.sessionMaxAgeMs ?? process.env.AUTH_SESSION_MAX_AGE_MS,
+        { variableName: 'AUTH_SESSION_MAX_AGE_MS' },
+      ),
       sessionSecret: authOverrides.sessionSecret || process.env.AUTH_SESSION_SECRET || createRandomSessionSecret(),
       strategy: authStrategy,
     },
@@ -296,6 +322,7 @@ export function loadConfig(overrides = {}) {
     httpRequestTimeoutMs: parsePositiveInt(process.env.HTTP_REQUEST_TIMEOUT_MS, 30_000),
     git,
     gitEnabled: git.enabled,
+    perfLoggingEnabled: overrides.perfLoggingEnabled ?? isPerfLoggingEnabled(process.env.COLLABMD_PERF_LOGGING),
     port: parsePort(process.env.PORT, 1234),
     nodeEnv,
     plantumlServerUrl: process.env.PLANTUML_SERVER_URL || 'https://www.plantuml.com/plantuml',

package/src/server/config/perf-logging.js

@@ -0,0 +1,39 @@
+function formatPerfValue(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return Number.isInteger(value) ? String(value) : value.toFixed(3).replace(/\.?0+$/u, '');
+  }
+
+  if (typeof value === 'string') {
+    return /[\s=]/u.test(value) ? JSON.stringify(value) : value;
+  }
+
+  if (typeof value === 'boolean') {
+    return value ? 'true' : 'false';
+  }
+
+  return JSON.stringify(value);
+}
+
+export function isPerfLoggingEnabled(value = '') {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  const normalized = String(value ?? '').trim().toLowerCase();
+  return normalized === '1'
+    || normalized === 'true'
+    || normalized === 'yes'
+    || normalized === 'on';
+}
+
+export function logPerfEvent(enabled, scope, fields = {}) {
+  if (!enabled) {
+    return;
+  }
+
+  const formattedFields = Object.entries(fields)
+    .filter(([, value]) => value !== undefined && value !== null && value !== '')
+    .map(([key, value]) => `${key}=${formatPerfValue(value)}`);
+  const suffix = formattedFields.length > 0 ? ` ${formattedFields.join(' ')}` : '';
+  console.info(`[perf][${scope}]${suffix}`);
+}