collabmd 0.1.42 → 0.1.44

package/src/client/presentation/excalidraw-embed-controller.js

@@ -1,6 +1,11 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { reconcileEmbedEntries } from './excalidraw-embed-reconciler.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
+import {
+  cancelIdleRender,
+  isNearViewport,
+  requestIdleRender,
+} from '../browser-utils.js';
 
 const DEFAULT_HEIGHT = 420;
 const HYDRATE_TIMEOUT_MS = 500;
@@ -10,46 +15,6 @@ const MAX_IFRAME_BOOT_ATTEMPTS = 3;
 const MIN_HEIGHT = 200;
 const EDITOR_IFRAME_PATH = '/excalidraw-editor.html';
 
-function requestIdleRender(callback, timeout) {
-  if (typeof window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(callback, { timeout });
-  }
-
-  return window.setTimeout(() => {
-    callback({
-      didTimeout: false,
-      timeRemaining: () => 0,
-    });
-  }, 1);
-}
-
-function cancelIdleRender(id) {
-  if (id === null) {
-    return;
-  }
-
-  if (typeof window.cancelIdleCallback === 'function') {
-    window.cancelIdleCallback(id);
-    return;
-  }
-
-  window.clearTimeout(id);
-}
-
-function isNearViewport(element, root, marginPx) {
-  if (!element || !root) {
-    return false;
-  }
-
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-
-  return (
-    elementRect.bottom >= (rootRect.top - marginPx)
-    && elementRect.top <= (rootRect.bottom + marginPx)
-  );
-}
-
 export class ExcalidrawEmbedController {
   constructor({
     getTheme,
@@ -254,10 +219,10 @@ export class ExcalidrawEmbedController {
     });
   }
 
-  prepareFileDisconnect(filePath, { timeoutMs = 250 } = {}) {
+  prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
     const entry = this._findEntryByFilePath(filePath);
     if (!entry?.iframe?.contentWindow) {
-      return Promise.resolve(false);
+      return Promise.resolve(true);
     }
 
     const requestId = `disconnect-${++this.disconnectRequestCounter}`;
@@ -274,7 +239,29 @@ export class ExcalidrawEmbedController {
       };
 
       const timeoutId = window.setTimeout(() => {
-        finish(false);
+        const shouldDiscard = window.confirm(
+          'This diagram has not reconnected, so its latest queued changes may not be saved. Discard pending changes and leave?',
+        );
+        if (!shouldDiscard) {
+          this._postMessageToEntry(entry, {
+            source: 'collabmd-host',
+            type: 'cancel-disconnect',
+            requestId,
+          });
+          this.toastController?.show?.('Stayed on the diagram while it reconnects');
+          finish(false);
+          return;
+        }
+
+        this._postMessageToEntry(entry, {
+          source: 'collabmd-host',
+          type: 'discard-and-disconnect',
+          requestId,
+        });
+        const request = this.pendingDisconnectRequests.get(requestId);
+        if (request) {
+          request.timeoutId = window.setTimeout(() => finish(true), 1000);
+        }
       }, timeoutMs);
 
       this.pendingDisconnectRequests.set(requestId, {
@@ -657,6 +644,9 @@ export class ExcalidrawEmbedController {
     if (hostSearchParams.has('syncTimeoutMs')) {
       iframeUrl.searchParams.set('syncTimeoutMs', hostSearchParams.get('syncTimeoutMs'));
     }
+    if (hostSearchParams.get('excalidrawDebug') === '1') {
+      iframeUrl.searchParams.set('excalidrawDebug', '1');
+    }
 
     return iframeUrl;
   }
@@ -1199,6 +1189,23 @@ export class ExcalidrawEmbedController {
       if (request?.entry === entry) {
         request.resolve(true);
       }
+      return;
+    }
+
+    if (msg.type === 'disconnect-blocked') {
+      entry.authorityState = msg.state || 'reconnecting-readonly';
+      this.toastController?.show?.('Waiting for the diagram to reconnect before leaving');
+      return;
+    }
+
+    if (msg.type === 'excalidraw-authority-state') {
+      entry.authorityState = msg.state || 'closed';
+      entry.hasPendingWrites = Boolean(msg.hasPendingWrites);
+      return;
+    }
+
+    if (msg.type === 'park-blocked') {
+      entry.authorityState = msg.state || 'reconnecting-readonly';
     }
   }
 

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

@@ -9,26 +9,13 @@ import {
   createMermaidStarter,
   createPlantUmlStarter,
   ensureVaultExtension,
+  getVaultPathLeaf,
+  getVaultPathParent,
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
-import { createWorkspaceRequestId } from '../domain/workspace-request-id.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { CreateMenuPresenter } from './create-menu-presenter.js';
 
-function getPathLeaf(path) {
-  return String(path ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function getParentPath(pathValue) {
-  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
-  const separatorIndex = normalized.lastIndexOf('/');
-  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
-}
-
 function replacePathPrefix(pathValue, oldPrefix, newPrefix) {
   if (pathValue === oldPrefix) {
     return newPrefix;
@@ -86,7 +73,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 +95,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();
@@ -266,16 +251,12 @@ export class FileActionController {
     this.showToast(error?.message ? `${message}: ${error.message}` : message);
   }
 
-  ensureExtension(pathValue, extension) {
-    return ensureVaultExtension(pathValue, extension);
-  }
-
   createPendingWorkspaceRequestId() {
     if (!this.pendingWorkspaceRequestIds) {
       return null;
     }
 
-    const requestId = createWorkspaceRequestId();
+    const requestId = crypto.randomUUID();
     this.pendingWorkspaceRequestIds.add(requestId);
     return requestId;
   }
@@ -540,7 +521,7 @@ export class FileActionController {
     const finalPath = requestedExtension
       ? normalizedPath
       : `${normalizedPath}${extension}`;
-    if (!getPathLeaf(finalPath)) {
+    if (!getVaultPathLeaf(finalPath)) {
       this.showToast('File path is required');
       return false;
     }
@@ -644,8 +625,8 @@ export class FileActionController {
   planMoveEntryByDrop({ destinationDirectory = '', sourcePath = '', sourceType = 'file' } = {}) {
     const normalizedSourcePath = normalizeVaultPathInput(sourcePath);
     const normalizedDestinationDirectory = normalizeVaultPathInput(destinationDirectory);
-    const currentParentPath = getParentPath(normalizedSourcePath);
-    const entryName = getPathLeaf(normalizedSourcePath);
+    const currentParentPath = getVaultPathParent(normalizedSourcePath);
+    const entryName = getVaultPathLeaf(normalizedSourcePath);
 
     if (!normalizedSourcePath || !entryName) {
       return { ok: false, reason: 'Invalid item to move' };
@@ -763,7 +744,7 @@ export class FileActionController {
           return false;
         }
 
-        const filePath = this.ensureExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.md');
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.md');
         return this.createVaultFile(filePath, createMarkdownStarter(filePath), {
           errorMessage: 'Failed to create file',
           openAfterCreate: true,
@@ -841,7 +822,7 @@ export class FileActionController {
           return false;
         }
 
-        const filePath = this.ensureExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.excalidraw');
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.excalidraw');
         return this.createVaultFile(filePath, createEmptyExcalidrawScene(), {
           errorMessage: 'Failed to create drawing',
           openAfterCreate: true,

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

@@ -1,5 +1,4 @@
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
-import { vaultApiClient } from '../domain/vault-api-client.js';
 import { FileActionController } from './file-action-controller.js';
 import { FileTreeState } from './file-tree-state.js';
 import { FileExplorerView } from './file-explorer-view.js';
@@ -11,7 +10,7 @@ export class FileExplorerController {
     onFileDelete,
     pendingWorkspaceRequestIds = null,
     toastController,
-    vaultClient = vaultApiClient,
+    vaultClient,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;

package/src/client/presentation/file-explorer-view.js

@@ -3,22 +3,9 @@ import {
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
-function getPathLeaf(path) {
-  return String(path ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function getParentPath(pathValue) {
-  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
-  const separatorIndex = normalized.lastIndexOf('/');
-  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
-}
-
 function findNodeByPath(nodes = [], pathValue = '') {
   for (const node of nodes) {
     if (node.path === pathValue) {
@@ -174,7 +161,7 @@ export class FileExplorerView {
     }
 
     const affectedParentPaths = Array.from(new Set(
-      changedPaths.map((pathValue) => getParentPath(pathValue)),
+      changedPaths.map((pathValue) => getVaultPathParent(pathValue)),
     ))
       .sort((left, right) => left.split('/').length - right.split('/').length)
       .filter((pathValue, index, values) => (
@@ -232,7 +219,7 @@ export class FileExplorerView {
         depth: 0,
         filePath: match.path,
         fileType: match.type || (getVaultTreeNodeType(match.path) ?? 'file'),
-        name: match.name || getPathLeaf(match.path),
+        name: match.name || getVaultPathLeaf(match.path),
       }));
     }
     this.treeContainer.appendChild(fragment);
@@ -348,7 +335,7 @@ export class FileExplorerView {
     button.dataset.entryType = 'directory';
     button.innerHTML = `
       <svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>
-      <span class="file-tree-name">${escapeHtml(node.name || getPathLeaf(node.path))}</span>
+      <span class="file-tree-name">${escapeHtml(node.name || getVaultPathLeaf(node.path))}</span>
     `;
 
     button.addEventListener('click', (event) => {

package/src/client/presentation/file-history-view-controller.js

@@ -1,21 +1,12 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
 const HISTORY_PAGE_SIZE = 30;
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '').split('/').pop() || '';
-}
-
-function getPathDir(pathValue) {
-  const parts = String(pathValue ?? '').split('/');
-  parts.pop();
-  return parts.join('/');
-}
-
 function renderHistoryTitle(filePath = '') {
-  const fileName = getPathLeaf(filePath);
-  const dirPath = getPathDir(filePath);
+  const fileName = getVaultPathLeaf(filePath);
+  const dirPath = getVaultPathParent(filePath);
   if (!dirPath) {
     return `<span class="file-history-path">${escapeHtml(fileName)}</span>`;
   }

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

@@ -1,16 +1,7 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '').split('/').pop() || '';
-}
-
-function getPathDir(pathValue) {
-  const parts = String(pathValue ?? '').split('/');
-  parts.pop();
-  return parts.join('/');
-}
-
 function createSectionId(pathValue) {
   return `diff-section-${encodeURIComponent(String(pathValue ?? '')).replace(/%/g, '_')}`;
 }
@@ -687,7 +678,7 @@ export class GitDiffViewController {
     const files = this.data?.files ?? [];
     const items = files.map((file, index) => {
       const isActive = this.activeFilePath === file.path;
-      const dirPath = getPathDir(file.path);
+      const dirPath = getVaultPathParent(file.path);
       return `
         <button
           class="ui-record-surface diff-index-item${isActive ? ' active' : ''}"
@@ -696,7 +687,7 @@ export class GitDiffViewController {
           aria-current="${isActive ? 'true' : 'false'}"
         >
           <span class="ui-record-header diff-index-item-top">
-            <span class="ui-record-title diff-index-item-name">${escapeHtml(getPathLeaf(file.path))}</span>
+            <span class="ui-record-title diff-index-item-name">${escapeHtml(getVaultPathLeaf(file.path))}</span>
             <span class="ui-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
           </span>
           ${dirPath ? `<span class="ui-record-subtitle diff-index-item-path">${escapeHtml(dirPath)}</span>` : ''}
@@ -748,8 +739,8 @@ export class GitDiffViewController {
           <span class="diff-commit-section-main">
             ${chevronSvg(isCollapsed)}
             <span class="diff-commit-section-copy">
-              <span class="diff-commit-section-name">${escapeHtml(getPathLeaf(file.path))}</span>
-              ${getPathDir(file.path) ? `<span class="diff-commit-section-path">${escapeHtml(getPathDir(file.path))}</span>` : ''}
+              <span class="diff-commit-section-name">${escapeHtml(getVaultPathLeaf(file.path))}</span>
+              ${getVaultPathParent(file.path) ? `<span class="diff-commit-section-path">${escapeHtml(getVaultPathParent(file.path))}</span>` : ''}
             </span>
           </span>
           <span class="diff-commit-section-meta">
@@ -1237,10 +1228,10 @@ export class GitDiffViewController {
       }
 
       if (path) {
-        return getPathLeaf(path);
+        return getVaultPathLeaf(path);
       }
       if (this.activeFilePath) {
-        return getPathLeaf(this.activeFilePath);
+        return getVaultPathLeaf(this.activeFilePath);
       }
       if (this.commitMeta?.shortHash) {
         return `Commit ${this.commitMeta.shortHash}`;
@@ -1252,7 +1243,7 @@ export class GitDiffViewController {
     }
 
     if (filePath) {
-      return getPathLeaf(filePath);
+      return getVaultPathLeaf(filePath);
     }
 
     if (scope === 'staged') {

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

@@ -1,20 +1,11 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
 
 const HISTORY_PAGE_SIZE = 30;
 const REFRESH_INTERVAL_MS = 10_000;
 
-function getPathDir(pathValue) {
-  const parts = String(pathValue ?? '').split('/');
-  parts.pop();
-  return parts.join('/');
-}
-
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '').split('/').pop() || '';
-}
-
 function fileIconSvg() {
   return '<svg class="git-file-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
 }
@@ -728,8 +719,8 @@ export class GitPanelController {
     const isActive = this.selection.source === 'workspace'
       && this.selection.path === file.path
       && this.selection.scope === file.scope;
-    const dirPath = getPathDir(file.path);
-    const displayName = getPathLeaf(file.path);
+    const dirPath = getVaultPathParent(file.path);
+    const displayName = getVaultPathLeaf(file.path);
     const fullPath = String(file.path || '');
     const statusClass = badgeClass(file.status);
     const stageAction = file.scope === 'staged'

package/src/client/presentation/quick-switcher-controller.js

@@ -9,12 +9,8 @@ import {
 
 const MAX_VISIBLE_RESULTS = 12;
 
-function stripDisplayExtension(filePath) {
-  return stripVaultFileExtension(filePath);
-}
-
 function createCorpusEntry(filePath) {
-  const displayName = stripDisplayExtension(filePath);
+  const displayName = stripVaultFileExtension(filePath);
   const fileName = displayName.split('/').pop() || displayName;
 
   return {
@@ -28,11 +24,12 @@ function createCorpusEntry(filePath) {
 }
 
 function getFileName(filePath) {
-  return stripDisplayExtension(filePath).split('/').pop() || stripDisplayExtension(filePath);
+  const displayName = stripVaultFileExtension(filePath);
+  return displayName.split('/').pop() || displayName;
 }
 
 function getDirPath(filePath) {
-  const displayName = stripDisplayExtension(filePath);
+  const displayName = stripVaultFileExtension(filePath);
   return displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
 }
 

package/src/client/presentation/scroll-sync-controller.js

@@ -1,4 +1,5 @@
 import { clamp } from '../domain/vault-utils.js';
+import { cancelIdleRender, requestIdleRender } from '../browser-utils.js';
 
 const VIEWPORT_FOCUS_RATIO = 0.35;
 const LARGE_DOCUMENT_EDITOR_IDLE_MS = 120;
@@ -31,32 +32,6 @@ function isLeafSourceBlock(element) {
   return !element.querySelector('[data-source-line]');
 }
 
-function requestIdleWork(callback) {
-  if (typeof window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(callback, { timeout: 500 });
-  }
-
-  return window.setTimeout(() => {
-    callback({
-      didTimeout: false,
-      timeRemaining: () => 0,
-    });
-  }, 1);
-}
-
-function cancelIdleWork(id) {
-  if (id === null) {
-    return;
-  }
-
-  if (typeof window.cancelIdleCallback === 'function') {
-    window.cancelIdleCallback(id);
-    return;
-  }
-
-  window.clearTimeout(id);
-}
-
 export class ScrollSyncController {
   constructor({
     getEditorLineNumber,
@@ -143,7 +118,7 @@ export class ScrollSyncController {
     this.editorScrollIdleTimer = null;
     this.pendingSync = null;
     this.previewBlocks = null;
-    cancelIdleWork(this.previewBlocksWarmId);
+    cancelIdleRender(this.previewBlocksWarmId);
     this.previewBlocksWarmId = null;
     this.previewBlocksReadyCallbacks = [];
     this.lockedElements.clear();
@@ -188,7 +163,7 @@ export class ScrollSyncController {
 
   invalidatePreviewBlocks() {
     this.previewBlocks = null;
-    cancelIdleWork(this.previewBlocksWarmId);
+    cancelIdleRender(this.previewBlocksWarmId);
     this.previewBlocksWarmId = null;
     this.previewBlocksReadyCallbacks = [];
   }
@@ -224,11 +199,11 @@ export class ScrollSyncController {
       return;
     }
 
-    this.previewBlocksWarmId = requestIdleWork(() => {
+    this.previewBlocksWarmId = requestIdleRender(() => {
       this.previewBlocksWarmId = null;
       this.previewBlocks = this.buildPreviewBlocks();
       this.flushPreviewBlocksReadyCallbacks();
-    });
+    }, 500);
   }
 
   realignAfterLayoutChange() {

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

@@ -53,7 +53,7 @@
   display: flex;
   justify-content: center;
   gap: var(--space-1);
-  padding: var(--space-2) var(--space-2) 0;
+  padding: var(--space-1) var(--space-2) 0;
   border-bottom: 1px solid var(--color-divider);
 }
 

package/src/client/styles/features/auth-gate.css

@@ -6,15 +6,8 @@
   align-items: center;
   justify-content: center;
   padding: var(--space-6);
-  background:
-    radial-gradient(circle at 50% 8%, oklch(from var(--color-primary) l c h / 0.18), transparent 28%),
-    radial-gradient(circle at 60% 45%, oklch(from var(--color-primary) l c h / 0.08), transparent 18%),
-    linear-gradient(
-      180deg,
-      oklch(from var(--color-bg) calc(l - 0.06) c h / 0.9),
-      oklch(from var(--color-bg) calc(l - 0.08) c h / 0.96)
-    );
-  backdrop-filter: blur(18px);
+  background: oklch(from var(--color-bg) l c h / 0.94);
+  backdrop-filter: blur(12px);
 }
 
 .auth-gate-card {
@@ -22,11 +15,9 @@
   padding: var(--space-8);
   border: 1px solid var(--border-accent-soft);
   border-radius: var(--radius-xl);
-  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
+  background: var(--color-surface);
   color: var(--color-text);
-  box-shadow:
-    var(--shadow-card-strong),
-    var(--shadow-sheet-inset);
+  box-shadow: var(--shadow-card-strong);
   font-family: var(--font-body);
 }
 

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

@@ -222,7 +222,6 @@
 .backlink-item:hover {
   border-color: transparent;
   background: var(--color-surface-offset);
-  box-shadow: inset 3px 0 0 var(--color-primary);
 }
 
 .backlink-item:focus-visible {

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

@@ -115,7 +115,7 @@
   display: grid;
   place-items: center;
   padding: var(--space-6);
-  background: radial-gradient(circle at top, oklch(from var(--color-primary) l c h / 0.16), transparent 38%), oklch(from var(--color-bg) l c h / 0.82);
+  background: oklch(from var(--color-bg) l c h / 0.86);
   backdrop-filter: blur(10px);
 }
 
@@ -126,7 +126,7 @@
   padding: var(--space-6);
   border: 1px solid oklch(from var(--color-primary) l c h / 0.25);
   border-radius: var(--radius-xl);
-  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
+  background: var(--color-surface);
   box-shadow: var(--shadow-lg);
 }
 

package/src/client/styles/features/comment-card.css

@@ -48,6 +48,14 @@
   text-transform: uppercase;
 }
 
+.comment-card-anchor-note {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--surface-comment-offset-soft);
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+}
+
 .comment-card-close,
 .comment-thread-card-action {
   border: 1px solid transparent;
@@ -107,12 +115,27 @@
   justify-content: flex-end;
 }
 
-.comment-card-input,
-.comment-reply-input {
-  padding: var(--space-3) var(--space-4);
+.ui-input.comment-card-input,
+.ui-input.comment-reply-input {
+  padding: var(--space-2) var(--space-3);
+  border-color: var(--border-comment-strong);
+  background: var(--surface-comment-subtle);
+  caret-color: var(--color-comment);
   line-height: 1.5;
 }
 
+.ui-input.comment-card-input:hover:not(:focus),
+.ui-input.comment-reply-input:hover:not(:focus) {
+  border-color: var(--border-comment-active);
+}
+
+.ui-input.comment-card-input:focus,
+.ui-input.comment-reply-input:focus {
+  border-color: var(--color-comment);
+  background: var(--surface-comment-elevated);
+  box-shadow: var(--shadow-comment-outline), 0 0 0 3px var(--color-comment-soft);
+}
+
 .comment-card-input {
   resize: vertical;
   min-height: 88px;
@@ -126,26 +149,11 @@
   border-top: 1px solid var(--color-divider);
 }
 
-.comment-thread-card-header {
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.comment-thread-card-heading {
-  display: flex;
-  flex: 1 1 160px;
-  flex-wrap: wrap;
-  gap: var(--space-1) var(--space-2);
-  min-width: 0;
-}
-
-.comment-thread-card-author,
 .comment-message-card-author {
   font-size: var(--text-label);
   font-weight: 700;
 }
 
-.comment-thread-card-time,
 .comment-message-card-time {
   color: var(--color-text-faint);
   font-size: var(--text-meta);
@@ -164,6 +172,11 @@
   background: transparent;
 }
 
+.comment-message-card.is-thread-start {
+  padding-top: 0;
+  border-top: 0;
+}
+
 .comment-message-card-body {
   margin-top: var(--space-1);
   font-size: var(--text-label);