cli-jaw 2.0.10 → 2.0.16

package/public/js/features/theme.ts

@@ -7,12 +7,20 @@ import githubLight from 'highlight.js/styles/github.css?inline';
 import { broadcastThemeToIframes } from '../diagram/iframe-renderer.js';
 import { rerenderMermaidDiagrams } from '../render.js';
 
-const STORAGE_KEY = 'theme';
+const STORAGE_KEY = 'jaw.uiTheme';
 let hljsStyleEl: HTMLStyleElement | null = null;
-type ThemeValue = 'dark' | 'light';
+type ThemeValue = 'dark' | 'light' | 'auto';
 
 function isThemeValue(value: unknown): value is ThemeValue {
-    return value === 'dark' || value === 'light';
+    return value === 'dark' || value === 'light' || value === 'auto';
+}
+
+function resolveTheme(theme: string): 'dark' | 'light' {
+    if (theme === 'light') return 'light';
+    if (theme === 'auto' && typeof window !== 'undefined' && window.matchMedia) {
+        return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+    return 'dark';
 }
 
 function applyHljsTheme(theme: string): void {
@@ -26,6 +34,11 @@ function applyHljsTheme(theme: string): void {
 }
 
 export function initTheme(): void {
+    if (!localStorage.getItem(STORAGE_KEY) && localStorage.getItem('theme')) {
+        localStorage.setItem(STORAGE_KEY, localStorage.getItem('theme')!);
+        localStorage.removeItem('theme');
+    }
+
     const previewTheme = readPreviewThemeParam();
     const saved = localStorage.getItem(STORAGE_KEY);
     const prefer = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
@@ -34,6 +47,20 @@ export function initTheme(): void {
 
     document.getElementById('toggleTheme')?.addEventListener('click', toggleTheme);
     window.addEventListener('message', handlePreviewThemeMessage);
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    mq.addEventListener('change', () => {
+        const current = localStorage.getItem(STORAGE_KEY);
+        if (!current || current === 'auto') {
+            applyTheme(current || 'auto');
+        }
+    });
+
+    window.addEventListener('storage', (e) => {
+        if (e.key === STORAGE_KEY && e.newValue) {
+            applyTheme(e.newValue);
+        }
+    });
 }
 
 function toggleTheme(): void {
@@ -44,14 +71,15 @@ function toggleTheme(): void {
 }
 
 function applyTheme(theme: string): void {
-    document.documentElement.setAttribute('data-theme', theme);
+    const resolved = resolveTheme(theme);
+    document.documentElement.setAttribute('data-theme', resolved);
 
     const btn = document.getElementById('toggleTheme');
     if (btn) {
-        btn.classList.toggle('is-light', theme === 'light');
+        btn.classList.toggle('is-light', resolved === 'light');
     }
 
-    applyHljsTheme(theme);
+    applyHljsTheme(resolved);
     broadcastThemeToIframes();
     rerenderMermaidDiagrams();
 }

package/public/js/features/transport-status-row.ts

@@ -0,0 +1,91 @@
+import { apiJson } from '../api.js';
+import { escapeHtml } from '../render.js';
+import { t } from './i18n.js';
+
+export type TransportStatus = {
+    configured: boolean;
+    activeInbound: boolean;
+    sendCapable: boolean;
+    reason?: string;
+};
+
+export type ChannelHealth = {
+    activeInbound: 'telegram' | 'discord';
+    telegram: TransportStatus;
+    discord: TransportStatus;
+};
+
+function isTransportStatus(value: unknown): value is TransportStatus {
+    if (!value || typeof value !== 'object') return false;
+    const row = value as Record<string, unknown>;
+    return typeof row['configured'] === 'boolean'
+        && typeof row['activeInbound'] === 'boolean'
+        && typeof row['sendCapable'] === 'boolean';
+}
+
+export function parseChannelHealth(payload: unknown): ChannelHealth | null {
+    if (!payload || typeof payload !== 'object') return null;
+    const channels = (payload as { channels?: unknown }).channels;
+    if (!channels || typeof channels !== 'object') return null;
+    const row = channels as Record<string, unknown>;
+    if (row['activeInbound'] !== 'telegram' && row['activeInbound'] !== 'discord') return null;
+    if (!isTransportStatus(row['telegram']) || !isTransportStatus(row['discord'])) return null;
+    return {
+        activeInbound: row['activeInbound'],
+        telegram: row['telegram'],
+        discord: row['discord'],
+    };
+}
+
+export function transportChipLabels(status: TransportStatus): string[] {
+    const chips: string[] = [];
+    chips.push(status.configured ? t('settings.channel.configured') : t('settings.channel.notConfigured'));
+    if (status.sendCapable) chips.push(t('settings.channel.sendCapable'));
+    if (status.activeInbound) chips.push(t('settings.channel.activeInbound'));
+    return chips;
+}
+
+function renderTransportBlock(
+    label: string,
+    status: TransportStatus,
+    showHint: boolean,
+): string {
+    const chips = transportChipLabels(status)
+        .map(text => `<span class="transport-status-chip">${escapeHtml(text)}</span>`)
+        .join('');
+    const hint = showHint && status.configured && status.sendCapable && !status.activeInbound
+        ? `<p class="transport-status-hint">${escapeHtml(t('settings.channel.sendOnlyHint'))}</p>`
+        : '';
+    return `
+        <div class="transport-status-block">
+            <div class="transport-status-label">${escapeHtml(label)}</div>
+            <div class="transport-status-chips">${chips}</div>
+            ${hint}
+        </div>`;
+}
+
+export function renderTransportStatusRow(container: HTMLElement, health: ChannelHealth): void {
+    container.innerHTML = `
+        <h4 class="section-title-row">
+            <span><span data-icon="radio"></span> ${escapeHtml(t('settings.channel.statusTitle'))}</span>
+        </h4>
+        ${renderTransportBlock('Telegram', health.telegram, true)}
+        ${renderTransportBlock('Discord', health.discord, true)}
+    `;
+}
+
+export async function refreshTransportStatusRow(): Promise<void> {
+    const container = document.getElementById('channelTransportStatus');
+    if (!container) return;
+    try {
+        const payload = await apiJson<{ channels?: unknown }>('/api/health', 'GET', null);
+        const health = parseChannelHealth(payload);
+        if (!health) {
+            container.innerHTML = '';
+            return;
+        }
+        renderTransportStatusRow(container, health);
+    } catch {
+        container.innerHTML = '';
+    }
+}

package/public/js/features/workflow-event-adapter.ts

@@ -0,0 +1,77 @@
+// Converts WorkflowEvent into ProcessBlock rows and cockpit state patches.
+// Does NOT import AI SDK UI packages.
+
+import { state } from '../state.js';
+
+export type WorkflowEventKind =
+    | 'command'
+    | 'goal'
+    | 'goal-run'
+    | 'handoff'
+    | 'guard'
+    | 'checkpoint';
+
+export type WorkflowEventStatus =
+    | 'started'
+    | 'blocked'
+    | 'running'
+    | 'done'
+    | 'failed';
+
+export interface WorkflowEventMessage {
+    schemaVersion: 'workflow-event-v1';
+    workflowId: string;
+    sequenceId: number;
+    createdAt: string;
+    kind: WorkflowEventKind;
+    status: WorkflowEventStatus;
+    label: string;
+    detail?: unknown;
+}
+
+const appliedSequences = new Map<string, number>();
+
+export function shouldApplyEvent(event: WorkflowEventMessage): boolean {
+    const lastSeq = appliedSequences.get(event.workflowId) ?? -1;
+    return event.sequenceId > lastSeq;
+}
+
+export function markEventApplied(event: WorkflowEventMessage): void {
+    appliedSequences.set(event.workflowId, event.sequenceId);
+}
+
+export function hasSequenceGap(event: WorkflowEventMessage): boolean {
+    const lastSeq = appliedSequences.get(event.workflowId) ?? -1;
+    if (lastSeq === -1) return false;
+    return event.sequenceId > lastSeq + 1;
+}
+
+export function resetEventTracking(): void {
+    appliedSequences.clear();
+}
+
+export function applyWorkflowEvent(event: WorkflowEventMessage): {
+    applied: boolean;
+    gapDetected: boolean;
+} {
+    if (!shouldApplyEvent(event)) {
+        return { applied: false, gapDetected: false };
+    }
+
+    const gapDetected = hasSequenceGap(event);
+    markEventApplied(event);
+
+    if (event.kind === 'goal') {
+        updateGoalCockpitFromEvent(event);
+    }
+
+    return { applied: true, gapDetected };
+}
+
+function updateGoalCockpitFromEvent(event: WorkflowEventMessage): void {
+    if (!state.activeGoal) return;
+
+    if (event.status === 'done' && event.kind === 'goal') {
+        state.activeGoal = null;
+    }
+}

package/public/js/main.ts

@@ -52,7 +52,7 @@ import {
     onFlushCliChange, loadFlushAgentSidebar,
     closePromptModal, savePromptFromModal, syncMcpServers, installMcpGlobal,
     loadCliStatus, scheduleCliStatusRefresh, setCliStatusInterval,
-    initCliStatusToggle, isCliStatusExpanded, expandCliStatus,
+    initCliStatusToggle, initCliStatusPreviewHooks, isCliStatusExpanded, expandCliStatus, isEmbeddedPreviewFrame,
     setTelegram, setForwardAll, setTelegramMentionOnly, saveTelegramSettings,
     setDiscord, setDiscordForwardAll, setDiscordAllowBots, setDiscordMentionOnly, saveDiscordSettings, setActiveChannel,
     saveFallbackOrder,
@@ -178,8 +178,24 @@ document.querySelector('.tab-bar')?.addEventListener('click', (e) => {
 document.querySelector('.sidebar-save-bar .btn-save')?.addEventListener('click', handleSave);
 
 // ── Agents Tab ──
+function syncAiEProviderSelectsFromActiveProvider(eventTarget: EventTarget | null): void {
+    const activeProvider = eventTarget instanceof HTMLSelectElement
+        ? eventTarget
+        : document.getElementById('selAiEProvider') as HTMLSelectElement | null;
+    const provider = activeProvider?.value || '';
+    const perCliProvider = document.getElementById('providerAiE') as HTMLSelectElement | null;
+    if (!provider || !perCliProvider) return;
+    if (Array.from(perCliProvider.options).some(option => option.value === provider)) {
+        perCliProvider.value = provider;
+    }
+}
+
 document.getElementById('selCli')?.addEventListener('change', () => onCliChange());
-document.getElementById('selAiEProvider')?.addEventListener('change', () => onCliChange());
+document.getElementById('selAiEProvider')?.addEventListener('change', (event) => {
+    syncAiEProviderSelectsFromActiveProvider(event.target);
+    onCliChange();
+    saveActiveCliSettings();
+});
 document.getElementById('selModel')?.addEventListener('change', () => saveActiveCliSettings());
 document.getElementById('selEffort')?.addEventListener('change', () => saveActiveCliSettings());
 document.getElementById('flushCli')?.addEventListener('change', () => onFlushCliChange());
@@ -510,6 +526,7 @@ async function bootstrap(): Promise<void> {
     loadFlushAgentSidebar();
     scheduleCliStatusRefresh();
     initCliStatusToggle();
+    initCliStatusPreviewHooks();
     if (isCliStatusExpanded()) loadCliStatus();
     // loadMessages() is handled by ws.js onopen (clear + reload)
     initSidebar();
@@ -525,8 +542,8 @@ async function bootstrap(): Promise<void> {
     // Phase 127-F2: prewarm Mermaid at idle so first diagram renders fast
     prewarmMermaid();
 
-    // Register Service Worker (production only — Vite HMR handles dev)
-    if ('serviceWorker' in navigator && !import.meta.env.DEV) {
+    // Register Service Worker (production only — Vite HMR handles dev; skip embedded dashboard preview iframes)
+    if ('serviceWorker' in navigator && !import.meta.env.DEV && !isEmbeddedPreviewFrame()) {
         navigator.serviceWorker.register('/sw.js').catch(() => {});
     }
 }

package/public/js/preview-parent-origin.ts

@@ -0,0 +1,38 @@
+const RESERVED_NOTE_SEGMENTS = new Set(['.git', '.assets', '_templates', '_snippets', '_plugins']);
+
+export function isLocalPreviewRelayOrigin(origin: string): boolean {
+    if (origin === window.location.origin) return true;
+    try {
+        const hostname = new URL(origin).hostname;
+        return hostname === 'localhost'
+            || hostname === '127.0.0.1'
+            || hostname === '::1'
+            || hostname === '[::1]';
+    } catch {
+        return false;
+    }
+}
+
+export function previewParentOrigin(): string | null {
+    if (window.parent === window) return null;
+    try {
+        const parentOrigin = window.parent.location.origin;
+        if (parentOrigin && parentOrigin !== 'null' && isLocalPreviewRelayOrigin(parentOrigin)) {
+            return parentOrigin;
+        }
+    } catch { /* cross-origin preview iframe */ }
+    try {
+        if (document.referrer) {
+            const origin = new URL(document.referrer).origin;
+            if (isLocalPreviewRelayOrigin(origin)) return origin;
+        }
+    } catch { /* ignore */ }
+    return null;
+}
+
+export function postPreviewOpenNotes(path: string): boolean {
+    const targetOrigin = previewParentOrigin();
+    if (!targetOrigin || !path.trim()) return false;
+    window.parent.postMessage({ type: 'jaw-preview-open-notes', path }, targetOrigin);
+    return true;
+}

package/public/js/provider-icons.ts

@@ -8,6 +8,7 @@ import geminiSvg from '../assets/providers/gemini-color.svg?raw';
 import antigravitySvg from '../assets/providers/antigravity-color.svg?raw';
 import grokSvg from '../assets/providers/grok-color.svg?raw';
 import copilotSvg from '../assets/providers/copilot-color.svg?raw';
+import cursorSvg from '../assets/providers/cursor-color.svg?raw';
 
 // Mono variants for dark/light mode flexibility
 import claudeMonoSvg from '../assets/providers/claude.svg?raw';
@@ -15,13 +16,14 @@ import geminiMonoSvg from '../assets/providers/gemini.svg?raw';
 import antigravityMonoSvg from '../assets/providers/antigravity.svg?raw';
 import grokMonoSvg from '../assets/providers/grok.svg?raw';
 import copilotMonoSvg from '../assets/providers/copilot.svg?raw';
+import cursorMonoSvg from '../assets/providers/cursor.svg?raw';
 
 // Service icons (Discord, Telegram)
 import discordSvg from '../assets/providers/discord.svg?raw';
 import telegramSvg from '../assets/providers/telegram.svg?raw';
 import opencodeSvg from '../assets/providers/opencode.svg?raw';
 
-export type ProviderSlug = 'ai-e' | 'claude' | 'openai' | 'gemini' | 'antigravity' | 'grok' | 'copilot' | 'codex' | 'codex-app' | 'opencode' | 'discord' | 'telegram';
+export type ProviderSlug = 'ai-e' | 'claude' | 'openai' | 'gemini' | 'antigravity' | 'grok' | 'copilot' | 'cursor' | 'codex' | 'codex-app' | 'opencode' | 'discord' | 'telegram';
 
 interface ProviderIcon {
     color: string;
@@ -39,6 +41,7 @@ const PROVIDER_ICONS: Record<ProviderSlug, ProviderIcon> = {
     antigravity: { color: antigravitySvg, mono: antigravityMonoSvg, label: 'Antigravity' },
     grok:     { color: grokSvg,    mono: grokMonoSvg,     label: 'Grok' },
     copilot:  { color: copilotSvg, mono: copilotMonoSvg,  label: 'Copilot' },
+    cursor:   { color: cursorSvg,  mono: cursorMonoSvg,   label: 'Cursor' },
     codex:    { color: openaiSvg, mono: openaiSvg,  label: 'Codex' },
     'codex-app': { color: openaiColorSvg, mono: openaiSvg, label: 'Codex App' },
     opencode: { color: opencodeSvg, mono: opencodeSvg,   label: 'OpenCode' },
@@ -53,6 +56,7 @@ const PROVIDER_LABEL_ALIASES: Record<string, string> = {
     'jaw-claude-i': 'Claude E',
     'claude-i': 'Claude E',
     'agy': 'Antigravity',
+    cursor: 'Cursor',
 };
 
 function resolveProviderSlug(slug: string): ProviderSlug | null {
@@ -63,6 +67,7 @@ function resolveProviderSlug(slug: string): ProviderSlug | null {
     if (normalized === 'antigravity' || normalized === 'agy' || normalized === 'googleantigravity') return 'antigravity';
     if (normalized === 'grok' || normalized.startsWith('grok')) return 'grok';
     if (normalized.startsWith('copilot') || normalized === 'githubcopilot') return 'copilot';
+    if (normalized === 'cursor' || normalized.startsWith('cursor')) return 'cursor';
     if (normalized === 'codexapp' || normalized === 'codexappserver') return 'codex-app';
     if (normalized === 'codex') return 'codex';
     if (normalized === 'opencode') return 'opencode';

package/public/js/render/code-copy.ts

@@ -1,9 +1,23 @@
 // ── Copy button event delegation ──
+import { copyText } from '../features/copy-text.js';
 import { t } from '../features/i18n.js';
 
 // ── Copy button event delegation (one-time setup) ──
 let codeCopyDelegationReady = false;
 
+function copyCodeAndFlash(target: HTMLElement, code: string): void {
+    void copyText(code).then(result => {
+        if (!result.ok) return;
+        const orig = target.textContent || '';
+        target.textContent = t('code.copied');
+        target.classList.add('copied');
+        setTimeout(() => {
+            target.textContent = orig;
+            target.classList.remove('copied');
+        }, 1500);
+    });
+}
+
 export function ensureCodeCopyDelegation(): void {
     if (codeCopyDelegationReady) return;
     codeCopyDelegationReady = true;
@@ -16,15 +30,7 @@ export function ensureCodeCopyDelegation(): void {
             if (!block) return;
             const codeEl = block.querySelector('pre code');
             if (!codeEl) return;
-            navigator.clipboard.writeText(codeEl.textContent || '').then(() => {
-                const orig = copyBtn.textContent || '';
-                copyBtn.textContent = t('code.copied');
-                copyBtn.classList.add('copied');
-                setTimeout(() => {
-                    copyBtn.textContent = orig;
-                    copyBtn.classList.remove('copied');
-                }, 1500);
-            }).catch(() => { /* clipboard API fail silently */ });
+            copyCodeAndFlash(copyBtn, codeEl.textContent || '');
             return;
         }
         // Legacy structure: .code-lang-label inside .code-block-wrapper
@@ -34,14 +40,6 @@ export function ensureCodeCopyDelegation(): void {
         if (!wrapper) return;
         const codeEl = wrapper.querySelector('pre code');
         if (!codeEl) return;
-        navigator.clipboard.writeText(codeEl.textContent || '').then(() => {
-            const orig = label.textContent || '';
-            label.textContent = t('code.copied');
-            label.classList.add('copied');
-            setTimeout(() => {
-                label.textContent = orig;
-                label.classList.remove('copied');
-            }, 1500);
-        }).catch(() => { /* clipboard API fail silently */ });
+        copyCodeAndFlash(label, codeEl.textContent || '');
     });
 }

package/public/js/render/file-links.ts

@@ -1,16 +1,57 @@
 // ── File path linkification and click-to-open delegation ──
 import { apiJson } from '../api.js';
-
-// ── File path linkification (click-to-open in Finder) ──
+import { postPreviewOpenNotes, previewParentOrigin } from '../preview-parent-origin.js';
+import { normalizeNotesVaultPath } from './notes-vault-path.js';
 
 const FILE_PATH_RE_G = /(?:~\/[^\s)`\]"'<>]+|\/(?:Users|home|tmp|var|opt|private)\/[^\s)`\]"'<>]+)/g;
+const REL_NOTE_PATH_RE_G = /(?:^|[\s([{"'`])([A-Za-z0-9._-]+(?:\/[A-Za-z0-9._-]+)*\.md)\b/g;
 const TRAILING_PUNCT_RE = /[.,!?:;]+$/;
 const LOCAL_FILE_HREF_RE = /^(?:~\/|\/(?:Users|home|tmp|var|opt|private)\/)/;
 
+let notesRootCache: string | null | undefined;
+let notesRootFetch: Promise<string | null> | null = null;
+
 function isLocalFileHref(href: string): boolean {
     return LOCAL_FILE_HREF_RE.test(href);
 }
 
+function isExternalHttpHref(href: string): boolean {
+    try {
+        const parsed = new URL(href, window.location.href);
+        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return false;
+        if (parsed.username || parsed.password) return false;
+        return parsed.origin !== window.location.origin;
+    } catch {
+        return false;
+    }
+}
+
+function ensureExternalAnchorTarget(anchor: HTMLAnchorElement): void {
+    anchor.target = '_blank';
+    const rel = new Set(anchor.rel.split(/\s+/).filter(Boolean));
+    rel.add('noopener');
+    rel.add('noreferrer');
+    anchor.rel = [...rel].join(' ');
+}
+
+async function resolveNotesRoot(): Promise<string | null> {
+    if (notesRootCache !== undefined) return notesRootCache;
+    if (!previewParentOrigin()) {
+        notesRootCache = null;
+        return null;
+    }
+    if (!notesRootFetch) {
+        notesRootFetch = apiJson<{ root?: string }>('/api/dashboard/notes/info', 'GET', null)
+            .then(data => (typeof data?.root === 'string' ? data.root : null))
+            .catch(() => null)
+            .then(root => {
+                notesRootCache = root;
+                return root;
+            });
+    }
+    return notesRootFetch;
+}
+
 function openLocalPath(path: string, el?: HTMLElement | null): void {
     if (el) el.classList.add('opening');
 
@@ -36,12 +77,66 @@ function openLocalPath(path: string, el?: HTMLElement | null): void {
         });
 }
 
+function appendFileLink(
+    frag: DocumentFragment,
+    clean: string,
+    vaultRel: string | null,
+): void {
+    const span = document.createElement('span');
+    span.className = 'file-path-link';
+    span.setAttribute('data-file-path', clean);
+    if (vaultRel) span.setAttribute('data-vault-rel', vaultRel);
+    span.setAttribute('role', 'button');
+    span.setAttribute('tabindex', '0');
+    span.textContent = clean;
+    frag.appendChild(span);
+}
+
+function collectAbsoluteHits(text: string): { index: number; raw: string; clean: string }[] {
+    FILE_PATH_RE_G.lastIndex = 0;
+    const hits: { index: number; raw: string; clean: string }[] = [];
+    let match: RegExpExecArray | null;
+    while ((match = FILE_PATH_RE_G.exec(text))) {
+        const raw = match[0];
+        const clean = raw.replace(TRAILING_PUNCT_RE, '');
+        if (clean.length < 4) continue;
+        hits.push({ index: match.index, raw, clean });
+    }
+    return hits;
+}
+
+function collectRelativeNoteHits(text: string): { index: number; raw: string; clean: string }[] {
+    REL_NOTE_PATH_RE_G.lastIndex = 0;
+    const hits: { index: number; raw: string; clean: string }[] = [];
+    let match: RegExpExecArray | null;
+    while ((match = REL_NOTE_PATH_RE_G.exec(text))) {
+        const prefix = match[0].slice(0, match[0].length - match[1].length);
+        const clean = match[1];
+        const index = match.index + prefix.length;
+        hits.push({ index, raw: clean, clean });
+    }
+    return hits;
+}
+
+function mergeHits(
+    absoluteHits: { index: number; raw: string; clean: string }[],
+    relativeHits: { index: number; raw: string; clean: string }[],
+): { index: number; raw: string; clean: string }[] {
+    const merged = [...absoluteHits, ...relativeHits].sort((a, b) => a.index - b.index);
+    const filtered: { index: number; raw: string; clean: string }[] = [];
+    let cursor = -1;
+    for (const hit of merged) {
+        if (hit.index < cursor) continue;
+        filtered.push(hit);
+        cursor = hit.index + hit.raw.length;
+    }
+    return filtered;
+}
+
 /**
  * Walk text nodes inside container, wrap file paths in clickable spans.
- * Idempotent — skips already-linkified paths.
- * Skips: <pre>, <a>, <button>, .file-path-link
  */
-export function linkifyFilePaths(container: HTMLElement): void {
+export function linkifyFilePaths(container: HTMLElement, notesRoot: string | null = null): void {
     const SKIP_TAGS = new Set(['PRE', 'A', 'BUTTON', 'TEXTAREA', 'INPUT', 'SCRIPT', 'STYLE']);
 
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
@@ -59,24 +154,14 @@ export function linkifyFilePaths(container: HTMLElement): void {
         },
     });
 
-    // Collect text nodes with matches, grouped by node
     const nodeMatches = new Map<Text, { index: number; raw: string; clean: string }[]>();
     let textNode: Text | null;
     while ((textNode = walker.nextNode() as Text | null)) {
         const text = textNode.textContent || '';
-        FILE_PATH_RE_G.lastIndex = 0;
-        let m: RegExpExecArray | null;
-        const hits: { index: number; raw: string; clean: string }[] = [];
-        while ((m = FILE_PATH_RE_G.exec(text))) {
-            const raw = m[0];
-            const clean = raw.replace(TRAILING_PUNCT_RE, '');
-            if (clean.length < 4) continue;
-            hits.push({ index: m.index, raw, clean });
-        }
+        const hits = mergeHits(collectAbsoluteHits(text), collectRelativeNoteHits(text));
         if (hits.length) nodeMatches.set(textNode, hits);
     }
 
-    // Replace each text node once — build full fragment with all matches
     for (const [node, hits] of nodeMatches) {
         const text = node.textContent || '';
         const parent = node.parentNode;
@@ -86,25 +171,16 @@ export function linkifyFilePaths(container: HTMLElement): void {
         let cursor = 0;
 
         for (const { index, raw, clean } of hits) {
-            // Text before this match
             if (index > cursor) {
                 frag.appendChild(document.createTextNode(text.slice(cursor, index)));
             }
-            // The clickable span
-            const span = document.createElement('span');
-            span.className = 'file-path-link';
-            span.setAttribute('data-file-path', clean);
-            span.setAttribute('role', 'button');
-            span.setAttribute('tabindex', '0');
-            span.textContent = clean;
-            frag.appendChild(span);
-            // Trailing punctuation that was trimmed
+            const vaultRel = normalizeNotesVaultPath(clean, notesRoot);
+            appendFileLink(frag, clean, vaultRel);
             const trailingPunct = raw.slice(clean.length);
             if (trailingPunct) frag.appendChild(document.createTextNode(trailingPunct));
             cursor = index + raw.length;
         }
 
-        // Remaining text after last match
         if (cursor < text.length) {
             frag.appendChild(document.createTextNode(text.slice(cursor)));
         }
@@ -113,7 +189,23 @@ export function linkifyFilePaths(container: HTMLElement): void {
     }
 }
 
-// ── File path click event delegation (one-time setup) ──
+export async function linkifyFilePathsWithNotesRoot(container: HTMLElement): Promise<void> {
+    const notesRoot = await resolveNotesRoot();
+    linkifyFilePaths(container, notesRoot);
+}
+
+async function handleFilePathClick(path: string, link: HTMLElement): Promise<void> {
+    const notesRoot = await resolveNotesRoot();
+    const vaultRel = link.getAttribute('data-vault-rel')
+        || normalizeNotesVaultPath(path, notesRoot);
+    if (vaultRel && previewParentOrigin() && postPreviewOpenNotes(vaultRel)) {
+        link.classList.add('opened');
+        setTimeout(() => link.classList.remove('opened'), 1500);
+        return;
+    }
+    openLocalPath(path, link);
+}
+
 let filePathDelegationReady = false;
 
 export function ensureFilePathDelegation(): void {
@@ -124,10 +216,14 @@ export function ensureFilePathDelegation(): void {
         const target = e.target as HTMLElement;
         const anchor = target?.closest('a') as HTMLAnchorElement | null;
         const href = anchor?.getAttribute('href') || '';
+        if (anchor && isExternalHttpHref(href)) {
+            ensureExternalAnchorTarget(anchor);
+            return;
+        }
         if (anchor && isLocalFileHref(href)) {
             e.preventDefault();
             anchor.classList.add('file-path-link');
-            openLocalPath(href, anchor);
+            void handleFilePathClick(href, anchor);
             return;
         }
 
@@ -136,7 +232,8 @@ export function ensureFilePathDelegation(): void {
 
         const filePath = link.getAttribute('data-file-path');
         if (!filePath) return;
-        openLocalPath(filePath, link);
+        e.preventDefault();
+        void handleFilePathClick(filePath, link);
     });
 
     document.addEventListener('keydown', (e: KeyboardEvent) => {